import { z } from "zod"; import { Spec, UIElement } from "@json-render/core"; //#region src/integrations/json-render/catalog.d.ts /** * `@k8o/arte-odyssey/json-render`(サーバー安全) * * LLM が生成してよい部品の契約(Zod スキーマのみ)。React に依存しないので * RSC のサーバーコンポーネントから import して `catalog.prompt()` で * システムプロンプトを生成できる。 * * 実際の描画は `@k8o/arte-odyssey/json-render/registry`('use client')。 */ declare const catalog: import("@json-render/core").Catalog<{ spec: import("@json-render/core").SchemaType<"object", { root: import("@json-render/core").SchemaType<"string", unknown>; elements: import("@json-render/core").SchemaType<"record", import("@json-render/core").SchemaType<"object", { type: import("@json-render/core").SchemaType<"ref", string>; props: import("@json-render/core").SchemaType<"propsOf", string>; children: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>; visible: import("@json-render/core").SchemaType<"any", unknown>; }>>; }>; catalog: import("@json-render/core").SchemaType<"object", { components: import("@json-render/core").SchemaType<"map", { props: import("@json-render/core").SchemaType<"zod", unknown>; slots: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>; description: import("@json-render/core").SchemaType<"string", unknown>; example: import("@json-render/core").SchemaType<"any", unknown>; }>; actions: import("@json-render/core").SchemaType<"map", { params: import("@json-render/core").SchemaType<"zod", unknown>; description: import("@json-render/core").SchemaType<"string", unknown>; }>; }>; }, { components: { Stack: { props: z.ZodObject<{ direction: z.ZodOptional>; gap: z.ZodOptional>; padding: z.ZodOptional>; align: z.ZodOptional>; justify: z.ZodOptional>; }, z.core.$strip>; slots: string[]; description: string; }; Grid: { props: z.ZodObject<{ cols: z.ZodOptional, z.ZodLiteral<2>, z.ZodLiteral<3>, z.ZodLiteral<4>, z.ZodLiteral<5>, z.ZodLiteral<6>, z.ZodLiteral<"auto-fill">, z.ZodLiteral<"auto-fit">]>>; minItemSize: z.ZodOptional, z.ZodLiteral<32>, z.ZodLiteral<40>, z.ZodLiteral<48>, z.ZodLiteral<64>, z.ZodLiteral<80>]>>; gap: z.ZodOptional>; }, z.core.$strip>; slots: string[]; description: string; }; Button: { props: z.ZodObject<{ label: z.ZodString; variant: z.ZodOptional>; color: z.ZodOptional>; size: z.ZodOptional>; fullWidth: z.ZodOptional; href: z.ZodOptional; }, z.core.$strip>; description: string; }; Card: { props: z.ZodObject<{ width: z.ZodOptional>; appearance: z.ZodOptional>; interactive: z.ZodOptional; size: z.ZodOptional>; }, z.core.$strip>; slots: string[]; description: string; }; Badge: { props: z.ZodObject<{ text: z.ZodString; tone: z.ZodOptional>; variant: z.ZodOptional>; size: z.ZodOptional>; }, z.core.$strip>; description: string; }; Heading: { props: z.ZodObject<{ text: z.ZodString; level: z.ZodOptional>; lineClamp: z.ZodOptional; }, z.core.$strip>; description: string; }; Alert: { props: z.ZodObject<{ tone: z.ZodEnum<{ success: "success"; info: "info"; warning: "warning"; error: "error"; }>; message: z.ZodUnion]>; }, z.core.$strip>; description: string; }; Spinner: { props: z.ZodObject<{ label: z.ZodOptional; size: z.ZodOptional>; }, z.core.$strip>; description: string; }; Separator: { props: z.ZodObject<{ orientation: z.ZodOptional>; color: z.ZodOptional>; }, z.core.$strip>; description: string; }; TextField: { props: z.ZodObject<{ name: z.ZodString; placeholder: z.ZodOptional; defaultValue: z.ZodOptional; invalid: z.ZodOptional; disabled: z.ZodOptional; readOnly: z.ZodOptional; }, z.core.$strip>; description: string; }; Checkbox: { props: z.ZodObject<{ name: z.ZodString; label: z.ZodString; defaultChecked: z.ZodOptional; disabled: z.ZodOptional; }, z.core.$strip>; description: string; }; Switch: { props: z.ZodObject<{ name: z.ZodString; label: z.ZodString; defaultChecked: z.ZodOptional; disabled: z.ZodOptional; invalid: z.ZodOptional; required: z.ZodOptional; }, z.core.$strip>; description: string; }; Select: { props: z.ZodObject<{ name: z.ZodString; options: z.ZodArray>; defaultValue: z.ZodOptional; invalid: z.ZodOptional; disabled: z.ZodOptional; }, z.core.$strip>; description: string; }; Tabs: { props: z.ZodObject<{ label: z.ZodOptional; tabs: z.ZodArray>; }, z.core.$strip>; description: string; }; Accordion: { props: z.ZodObject<{ items: z.ZodArray; }, z.core.$strip>>; }, z.core.$strip>; description: string; }; Breadcrumb: { props: z.ZodObject<{ size: z.ZodOptional>; items: z.ZodArray; current: z.ZodOptional; }, z.core.$strip>>; }, z.core.$strip>; description: string; }; Table: { props: z.ZodObject<{ caption: z.ZodOptional; columns: z.ZodArray>; }, z.core.$strip>>; rows: z.ZodArray>; }, z.core.$strip>; description: string; }; Anchor: { props: z.ZodObject<{ text: z.ZodString; href: z.ZodString; openInNewTab: z.ZodOptional; }, z.core.$strip>; description: string; }; Avatar: { props: z.ZodObject<{ src: z.ZodOptional; alt: z.ZodOptional; name: z.ZodOptional; fallback: z.ZodOptional; size: z.ZodOptional>; }, z.core.$strip>; description: string; }; Code: { props: z.ZodObject<{ code: z.ZodString; }, z.core.$strip>; description: string; }; Progress: { props: z.ZodObject<{ progress: z.ZodNumber; maxProgress: z.ZodNumber; minProgress: z.ZodOptional; label: z.ZodOptional; }, z.core.$strip>; description: string; }; Skeleton: { props: z.ZodObject<{ shape: z.ZodOptional>; size: z.ZodOptional>; animate: z.ZodOptional; }, z.core.$strip>; description: string; }; Icon: { props: z.ZodObject<{ name: z.ZodEnum<{ form: "form"; list: "list"; link: "link"; check: "check"; plus: "plus"; minus: "minus"; close: "close"; copy: "copy"; send: "send"; mail: "mail"; subscribe: "subscribe"; rss: "rss"; history: "history"; "update-date": "update-date"; "publish-date": "publish-date"; "external-link": "external-link"; location: "location"; "navigation-menu": "navigation-menu"; table: "table"; view: "view"; "view-off": "view-off"; "light-mode": "light-mode"; "dark-mode": "dark-mode"; palette: "palette"; "color-contrast": "color-contrast"; "color-info": "color-info"; "mixed-color": "mixed-color"; "horizontal-writing": "horizontal-writing"; "vertical-writing": "vertical-writing"; tag: "tag"; blog: "blog"; news: "news"; slide: "slide"; sparkles: "sparkles"; ai: "ai"; atom: "atom"; accessibility: "accessibility"; "shield-check": "shield-check"; prepare: "prepare"; informative: "informative"; good: "good"; bad: "bad"; easy: "easy"; difficult: "difficult"; interesting: "interesting"; boring: "boring"; shallow: "shallow"; "arte-odyssey": "arte-odyssey"; logo: "logo"; github: "github"; twitter: "twitter"; qiita: "qiita"; }>; size: z.ZodOptional>; }, z.core.$strip>; description: string; }; ChevronIcon: { props: z.ZodObject<{ direction: z.ZodEnum<{ left: "left"; right: "right"; up: "up"; down: "down"; }>; size: z.ZodOptional>; }, z.core.$strip>; description: string; }; StatusIcon: { props: z.ZodObject<{ status: z.ZodEnum<{ success: "success"; info: "info"; warning: "warning"; error: "error"; }>; size: z.ZodOptional>; }, z.core.$strip>; description: string; }; IconButton: { props: z.ZodObject<{ icon: z.ZodEnum<{ form: "form"; list: "list"; link: "link"; check: "check"; plus: "plus"; minus: "minus"; close: "close"; copy: "copy"; send: "send"; mail: "mail"; subscribe: "subscribe"; rss: "rss"; history: "history"; "update-date": "update-date"; "publish-date": "publish-date"; "external-link": "external-link"; location: "location"; "navigation-menu": "navigation-menu"; table: "table"; view: "view"; "view-off": "view-off"; "light-mode": "light-mode"; "dark-mode": "dark-mode"; palette: "palette"; "color-contrast": "color-contrast"; "color-info": "color-info"; "mixed-color": "mixed-color"; "horizontal-writing": "horizontal-writing"; "vertical-writing": "vertical-writing"; tag: "tag"; blog: "blog"; news: "news"; slide: "slide"; sparkles: "sparkles"; ai: "ai"; atom: "atom"; accessibility: "accessibility"; "shield-check": "shield-check"; prepare: "prepare"; informative: "informative"; good: "good"; bad: "bad"; easy: "easy"; difficult: "difficult"; interesting: "interesting"; boring: "boring"; shallow: "shallow"; "arte-odyssey": "arte-odyssey"; logo: "logo"; github: "github"; twitter: "twitter"; qiita: "qiita"; }>; label: z.ZodString; size: z.ZodOptional>; color: z.ZodOptional>; }, z.core.$strip>; description: string; }; Textarea: { props: z.ZodObject<{ name: z.ZodString; placeholder: z.ZodOptional; defaultValue: z.ZodOptional; invalid: z.ZodOptional; disabled: z.ZodOptional; readOnly: z.ZodOptional; }, z.core.$strip>; description: string; }; PasswordInput: { props: z.ZodObject<{ name: z.ZodString; placeholder: z.ZodOptional; defaultValue: z.ZodOptional; invalid: z.ZodOptional; disabled: z.ZodOptional; }, z.core.$strip>; description: string; }; NumberField: { props: z.ZodObject<{ name: z.ZodString; defaultValue: z.ZodOptional; min: z.ZodOptional; max: z.ZodOptional; step: z.ZodOptional; invalid: z.ZodOptional; disabled: z.ZodOptional; }, z.core.$strip>; description: string; }; Slider: { props: z.ZodObject<{ name: z.ZodString; defaultValue: z.ZodOptional; min: z.ZodOptional; max: z.ZodOptional; step: z.ZodOptional; invalid: z.ZodOptional; disabled: z.ZodOptional; }, z.core.$strip>; description: string; }; Radio: { props: z.ZodObject<{ name: z.ZodString; label: z.ZodString; options: z.ZodArray>; defaultValue: z.ZodOptional; disabled: z.ZodOptional; }, z.core.$strip>; description: string; }; RadioCard: { props: z.ZodObject<{ name: z.ZodString; label: z.ZodString; options: z.ZodArray; disabled: z.ZodOptional; }, z.core.$strip>>; defaultValue: z.ZodOptional; invalid: z.ZodOptional; disabled: z.ZodOptional; }, z.core.$strip>; description: string; }; CheckboxCard: { props: z.ZodObject<{ name: z.ZodString; options: z.ZodArray; disabled: z.ZodOptional; }, z.core.$strip>>; defaultValue: z.ZodOptional>; invalid: z.ZodOptional; disabled: z.ZodOptional; }, z.core.$strip>; description: string; }; Pagination: { props: z.ZodObject<{ name: z.ZodString; totalPages: z.ZodNumber; defaultPage: z.ZodOptional; prevLabel: z.ZodOptional; nextLabel: z.ZodOptional; disabled: z.ZodOptional; }, z.core.$strip>; description: string; }; Form: { props: z.ZodObject<{ action: z.ZodOptional; }, z.core.$strip>; slots: string[]; description: string; }; Modal: { props: z.ZodObject<{ triggerLabel: z.ZodString; title: z.ZodString; type: z.ZodOptional>; }, z.core.$strip>; slots: string[]; description: string; }; Dialog: { props: z.ZodObject<{ triggerLabel: z.ZodString; title: z.ZodString; }, z.core.$strip>; slots: string[]; description: string; }; Drawer: { props: z.ZodObject<{ triggerLabel: z.ZodString; title: z.ZodString; side: z.ZodOptional>; }, z.core.$strip>; slots: string[]; description: string; }; Popover: { props: z.ZodObject<{ triggerLabel: z.ZodString; }, z.core.$strip>; slots: string[]; description: string; }; Tooltip: { props: z.ZodObject<{ label: z.ZodString; text: z.ZodString; }, z.core.$strip>; description: string; }; DropdownMenu: { props: z.ZodObject<{ triggerLabel: z.ZodString; items: z.ZodArray>; }, z.core.$strip>; description: string; }; Toast: { props: z.ZodObject<{ triggerLabel: z.ZodString; tone: z.ZodEnum<{ success: "success"; info: "info"; warning: "warning"; error: "error"; }>; message: z.ZodString; }, z.core.$strip>; description: string; }; ScrollLinked: { props: z.ZodObject<{}, z.core.$strip>; description: string; }; BaselineStatus: { props: z.ZodObject<{ featureId: z.ZodString; }, z.core.$strip>; description: string; }; ListBox: { props: z.ZodObject<{ name: z.ZodString; options: z.ZodArray>; defaultValue: z.ZodOptional; }, z.core.$strip>; description: string; }; CheckboxGroup: { props: z.ZodObject<{ name: z.ZodString; options: z.ZodArray>; defaultValue: z.ZodOptional>; }, z.core.$strip>; description: string; }; Autocomplete: { props: z.ZodObject<{ name: z.ZodString; options: z.ZodArray>; defaultValue: z.ZodOptional>; invalid: z.ZodOptional; disabled: z.ZodOptional; }, z.core.$strip>; description: string; }; FileField: { props: z.ZodObject<{ triggerLabel: z.ZodOptional; multiple: z.ZodOptional; maxFiles: z.ZodOptional; clearable: z.ZodOptional; }, z.core.$strip>; description: string; }; FormControl: { props: z.ZodObject<{ label: z.ZodString; fieldType: z.ZodOptional>; name: z.ZodString; placeholder: z.ZodOptional; defaultValue: z.ZodOptional; helpText: z.ZodOptional; errorText: z.ZodOptional; required: z.ZodOptional; invalid: z.ZodOptional; }, z.core.$strip>; description: string; }; }; actions: {}; }>; /** * LLM が破りやすい制約を `catalog.prompt({ customRules })` に注入するための * 横断ルール集。json-render のシステムプロンプト本文に追記される。 * * @example * const systemPrompt = catalog.prompt({ customRules: [...arteOdysseyRules] }); */ declare const arteOdysseyRules: readonly string[]; type ComponentSchemas = (typeof catalog)['data']['components']; type ComponentName = keyof ComponentSchemas; type ComponentProps = z.infer; /** * arte-odyssey のコンポーネントだけで構成された型付き spec の要素。 * `type` と `props` がコンポーネントごとに検査される。 */ type ArteSpecElement = { [K in ComponentName]: Omit & { type: K; props: ComponentProps; } }[ComponentName]; /** * arte-odyssey のコンポーネントだけで構成された型付き spec。 * `satisfies ArteSpec` で書くと component 名・props の typo がコンパイルエラーに * なり、エディタ補完も効く。上流の `Spec` へキャストなしで代入できる。 * * @example * const spec = { * root: 'root', * elements: { * root: { type: 'Stack', props: { direction: 'column' }, children: ['b'] }, * b: { type: 'Button', props: { label: 'OK' } }, * }, * } satisfies ArteSpec; */ type ArteSpec = { root: string; elements: Record; state?: Spec['state']; }; type GeneratedSpecIssue = { /** 問題のあった要素キー(spec 全体の問題なら未指定)。 */elementKey?: string; /** 人間(および LLM)向けの説明。 */ message: string; }; type ValidateGeneratedSpecResult = { ok: true; spec: ArteSpec; fixes: string[]; } | { ok: false; issues: GeneratedSpecIssue[]; repairPrompt: string; }; /** * LLM が生成した spec を検証し、描画可能なら型付き spec を、壊れていれば * そのまま LLM に投げ返せる修復プロンプトを返す。 * * 内部では (1) 機械修正(`autoFixSpec`)→ (2) 構造検証(`validateSpec`)→ * (3) 要素ごとに catalog の Zod スキーマで props 検証、を行う。 * `catalog.validate()` は使わない(現行の上流バージョンでは正常な spec を * 誤って弾き、props 検証も実質無効になるため)。 * * @example * const result = validateGeneratedSpec(JSON.parse(llmOutput)); * if (result.ok) { * return ; * } * const retried = await llm(result.repairPrompt); */ declare const validateGeneratedSpec: (input: unknown) => ValidateGeneratedSpecResult; //#endregion export { ArteSpec, ArteSpecElement, ComponentName, ComponentProps, GeneratedSpecIssue, ValidateGeneratedSpecResult, arteOdysseyRules, catalog, validateGeneratedSpec };