# @k8ordo/ui > React components from k8ordo, with semantic design tokens, dark mode, > built-in Japanese/English wording, AI chat components, and official generative UI > adapters (json-render & OpenUI) that let an LLM generate, validate, and render > on-brand UIs from these components. > > Like every k8ordo package it assumes React 19 and Server Components, uses only > what has reached Baseline, and ships no polyfills or legacy fallbacks — so > nothing here branches for a browser or a framework it does not support. These docs are served from . Start with the Design Guide, then follow the reference most relevant to the task. ## Guide - [Design Guide](https://ordo.k8o.me/docs/GUIDE.md): setup, i18n (default Japanese, switching to English), design direction, aesthetic guidelines, component usage principles, anti-patterns, implementation principles. ## References - [Components](https://ordo.k8o.me/docs/references/components.md): full component list, import paths, props, and i18n — every component, compound ones included (`Dialog.Root`, `Tabs.Root`, …), renders from a Server Component — component wording comes from a dictionary that defaults to Japanese; `@k8ordo/ui/i18n` exports `ja` / `en` / the `Messages` type for `` (per-component wording props win over the dictionary). - [AI chat](https://ordo.k8o.me/docs/references/ai-chat.md): AI chat components from `@k8ordo/ui/ai` (Conversation / Message / PromptInput / Reasoning / Suggestion / ToolInvocation), streaming Markdown `Response` from `@k8ordo/ui/ai/response` (optional peer `streamdown`), and `mapMessageParts` from `@k8ordo/ui/ai-sdk` to render AI SDK `UIMessage.parts` (optional peer `ai`). - [Generative UI](https://ordo.k8o.me/docs/references/generative-ui.md): use json-render / OpenUI to make an LLM generate UIs — `catalog.prompt()` (server-safe), `` (client), `validateGeneratedSpec()` (validate/repair LLM output), `satisfies UISpec` (typed specs), and `@k8ordo/ui/openui/prompt`. - [Typography](https://ordo.k8o.me/docs/references/typography.md): type scale and usage. - [Color](https://ordo.k8o.me/docs/references/color.md): semantic token system and dark mode. - [Spacing & layout](https://ordo.k8o.me/docs/references/spatial-design.md): spacing scale and layout patterns. - [Interaction](https://ordo.k8o.me/docs/references/interaction-design.md): motion and interaction guidelines. - [Hooks](https://ordo.k8o.me/docs/references/hooks.md): custom hooks for UI mechanics (disclosure, timing, DOM observation). State that lives in a place (URL, history, localStorage, memory) belongs to `@k8ordo/state`, not to a hook here. - [Helpers & types](https://ordo.k8o.me/docs/references/helpers.md): the five helper functions (`chain` / `cn` / `createSafeContext` / `mergeProps` / `mergeRefs`) and the public types (`Status` / `Direction` / `Placement` / `ModalSide` / `DrawerSide` / `Option`). --- # @k8ordo/form > Derive HTML constraint attributes, error messages, and server-side validation > from one zod schema. The DOM holds the values; React state holds only what the > DOM cannot express. Forms work with JavaScript disabled or not yet loaded. > > Like every k8ordo package it assumes React 19 and Server Components, uses only > what has reached Baseline newly available, and ships no polyfills or legacy > fallbacks. These docs are served from . ## Guide - [Design Guide](https://ordo.k8o.me/form/docs/GUIDE.md): the server/client split, writing a form end to end, what the package guarantees, what it does not do yet, and how it pairs with `@k8ordo/ui` without depending on it. ## Entry points - `@k8ordo/form` — client. `useForm(fields, state)` takes the whole `formFields` result and returns props for the `

` element, a `field(path)` accessor giving input attributes, the current error, and `invalid` / `required`, an `array(path)` accessor for repeated rows, and `isDirty`. Also `useAsyncCheck` for server-answered per-field checks and `HiddenValue` for components that render no input of their own. The types of the `formFields` result (`FormFields`, `DerivedField`, `DerivedArray`, `DroppedCheck`) are exported here as well, since the result crosses to the client as a prop. - `@k8ordo/form/server` — server. `formFields(schema)` derives serializable fields plus a `dropped` list of checks HTML cannot express (outside production the list is also logged once per schema with `console.warn`), and throws on a schema no form can represent; `parseForm(schema, formData)` validates a submission and returns typed data or per-field errors with the submitted values. `defineForm(schema, rules)` attaches cross-field rules (`sameAs`, `minChecked`, `requiredWhen`) typed against the schema's paths. --- # @k8ordo/state > Declare state by where it lives: `definePageState` (typed URL search params > plus hidden history-entry state — the two faces of one entry, updated > atomically over the Navigation API), `defineLocalState` (localStorage, > cross-tab), `defineMemoryState` (a typed shared box, resets on reload). > One zod schema per place derives the server read, canonical links, salvage > of stale data, and a client subscription with exact per-key change > detection. Works through links and GET forms before JavaScript loads; > imperative url updates ride a Navigation-API-intercepting router. > > Like every k8ordo package it assumes React 19 and Server Components, uses > only what has reached Baseline newly available, and ships no polyfills or > legacy fallbacks. These docs are served from . ## Guide - [Design Guide](https://ordo.k8o.me/state/docs/GUIDE.md): the four places and when each fits, the shared definition module, reading on the server, updating on the client, batching and update handles, subscription granularity, router requirements, typed routes via `Register`, reading local state before hydration, and pairing with `@k8ordo/form` for GET forms. ## Entry point - `@k8ordo/state` — `definePageState(key, { url?, entry? })` returns a pure definition usable from server and client: `parseUrl(searchParams)` reads the url slot typed with defaults applied and per-field salvage (wherever the router hands a page its search — under `@k8ordo/static` / `@k8ordo/server` a page receives `params` and `pathname` only, and the url slot is read in the browser); `href(base, values?)` builds a canonical link keeping the path literal in the type; `search(values?)` returns the query string alone. `defineLocalState(key, schema)` and `defineMemoryState(key, initial)` declare app-scope state; a local definition also exposes `storageKey` (the localStorage key, `k8ordo-state:`) and `inlineRead()`, a JavaScript expression for an inline `