@k8ordo/ui 1.0.0

package/dist/integrations/_shared/schemas.mjs

@@ -0,0 +1,545 @@
+import { z } from "zod";
+//#region src/integrations/_shared/schemas.ts
+/**
+* Generative UI 統合の props スキーマ（純データ）。
+*
+* React に一切依存しない（`import type` のみ）ため **サーバー安全**。RSC の
+* サーバーコンポーネントから import して `catalog.prompt()` のプロンプト生成に
+* 使える。描画ロジックは ./renderers（'use client'）に分離している。
+*
+* ## 二重メンテ防止
+*
+* 各 schema には対応する `{Component}IntegrationProps` 型を定義し、
+* `satisfies z.ZodType<...>` で **本体コンポーネント Props と Zod の型を
+* コンパイル時に一致検査**する。本体側で prop を縮めたりリネームすると
+* ここで型エラーになり、CI がブロックする仕組み。
+*
+* - LLM 向けに独自抽象を入れている prop（`label`, `text`, `href`, `tabs`,
+*   `items` 等）は中間型に手書きする。
+* - 本体に存在する prop は `ComponentProps<typeof X>['key']` で参照することで、
+*   本体の enum を縮めたときに自動追従する。enum を「広げた」ときの追従漏れは
+*   satisfies では検知できないため、末尾の CoversComponent 型で別途検査する。
+*
+* enum 値はトークン由来の固定値に制約することで、生成 UI が崩れないように
+* している。
+*
+* ## キーの並び順は公開 ABI
+*
+* OpenUI Lang は完全な位置引数（`Button("ヘルプ", "outline", "base", ...)`）で、
+* @openuidev/lang-core が `Object.keys(properties)` の順に params を作る。
+* そのため **各 schema のキーの並び順がそのまま公開 ABI** になる。
+*
+* - 既存キーのリネーム: 位置が変わらないので安全。
+* - 既存キーの削除・並べ替え: 保存済みの OpenUI 文字列の引数が全部ずれる。
+* - 新しいキーの追加: **必ず末尾に足す**。途中に挿入すると以降の位置が 1 つずつ
+*   ずれ、既存の文字列が無言で誤描画される（型エラーにもならない）。
+*
+* ## スキーマの実体が同一性
+*
+* @openuidev/lang-core の `createLibrary` は `reg.add(comp.props, { id: name })`
+* と **zod インスタンスそのもの**をキーに登録する。そのため 2 つのコンポーネントに
+* 同じインスタンスを渡すと後勝ちで上書きされ、先に登録した方が JSON Schema の
+* `$defs` から丸ごと消える（型エラーにもならない）。キーが同じ schema を作る
+* ときは、プレーンな shape オブジェクトを spread して **別インスタンス**にする。
+*/
+/**
+* LLM 生成の `href` は `<a href>` に直接渡るため、`javascript:` や `data:` の
+* スキームが通ると XSS になる。`http(s)://` 始まり、または `/` から始まる
+* 相対パスのみを許可する。`z.url()` は `javascript:` を拒否しないため正規表現で
+* 明示的にブロックしている。
+*/
+const safeUrl = z.string().regex(/^(https?:\/\/|\/)/u, "外部 URL（http/https）または相対 URL のみ許可");
+const buttonProps = z.object({
+	label: z.string(),
+	variant: z.enum([
+		"solid",
+		"outline",
+		"skeleton"
+	]).optional(),
+	color: z.enum([
+		"primary",
+		"secondary",
+		"base"
+	]).optional(),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional(),
+	fullWidth: z.boolean().optional(),
+	href: safeUrl.optional()
+});
+const iconName = z.enum([
+	"plus",
+	"minus",
+	"check",
+	"close",
+	"copy",
+	"send",
+	"mail",
+	"subscribe",
+	"rss",
+	"history",
+	"update-date",
+	"publish-date",
+	"link",
+	"external-link",
+	"location",
+	"navigation-menu",
+	"list",
+	"table",
+	"form",
+	"view",
+	"view-off",
+	"light-mode",
+	"dark-mode",
+	"palette",
+	"color-contrast",
+	"color-info",
+	"mixed-color",
+	"horizontal-writing",
+	"vertical-writing",
+	"tag",
+	"blog",
+	"news",
+	"slide",
+	"sparkles",
+	"ai",
+	"atom",
+	"accessibility",
+	"shield-check",
+	"prepare",
+	"informative",
+	"good",
+	"bad",
+	"easy",
+	"difficult",
+	"interesting",
+	"boring",
+	"shallow",
+	"logo",
+	"github",
+	"twitter",
+	"qiita"
+]);
+const iconProps = z.object({
+	name: iconName,
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional()
+});
+const iconButtonProps = z.object({
+	icon: iconName,
+	label: z.string(),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional(),
+	color: z.enum([
+		"transparent",
+		"base",
+		"primary",
+		"secondary"
+	]).optional()
+});
+const chevronIconProps = z.object({
+	direction: z.enum([
+		"up",
+		"down",
+		"left",
+		"right"
+	]),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional()
+});
+const statusIconProps = z.object({
+	status: z.enum([
+		"success",
+		"info",
+		"warning",
+		"error"
+	]),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional()
+});
+const badgeProps = z.object({
+	label: z.string(),
+	tone: z.enum([
+		"neutral",
+		"info",
+		"success",
+		"warning",
+		"error"
+	]).optional(),
+	variant: z.enum(["solid", "outline"]).optional(),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional()
+});
+const headingProps = z.object({
+	label: z.string(),
+	level: z.enum([
+		"h1",
+		"h2",
+		"h3",
+		"h4",
+		"h5",
+		"h6"
+	]).optional(),
+	lineClamp: z.union([
+		z.literal(1),
+		z.literal(2),
+		z.literal(3),
+		z.literal(4),
+		z.literal(5),
+		z.literal(6)
+	]).optional()
+});
+const avatarProps = z.object({
+	src: z.string().optional(),
+	alt: z.string().optional(),
+	name: z.string().optional(),
+	fallback: z.string().optional(),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional()
+});
+const codeProps = z.object({ code: z.string() });
+const accordionProps = z.object({ items: z.array(z.object({
+	title: z.string(),
+	content: z.string(),
+	defaultOpen: z.boolean().optional()
+})).min(1).describe("各アコーディオン項目（タイトルとテキスト本文）") });
+const tableProps = z.object({
+	caption: z.string().optional(),
+	columns: z.array(z.object({
+		label: z.string(),
+		align: z.enum([
+			"left",
+			"center",
+			"right"
+		]).optional()
+	})).min(1),
+	rows: z.array(z.array(z.string())).describe("各行のセル文字列（columns と同じ順序・個数）")
+});
+const cardProps = z.object({
+	width: z.enum(["full", "fit"]).optional(),
+	variant: z.enum(["shadow", "outline"]).optional(),
+	interactive: z.boolean().optional(),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional()
+});
+const alertProps = z.object({
+	tone: z.enum([
+		"success",
+		"info",
+		"warning",
+		"error"
+	]),
+	message: z.union([z.string(), z.array(z.string())])
+});
+const spinnerProps = z.object({
+	label: z.string().optional(),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional()
+});
+const progressProps = z.object({
+	value: z.number(),
+	max: z.number(),
+	min: z.number().optional(),
+	label: z.string().optional()
+});
+const skeletonProps = z.object({
+	shape: z.enum(["rect", "circle"]).optional(),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional(),
+	animate: z.boolean().optional()
+});
+const toastProps = z.object({
+	triggerLabel: z.string().describe("トーストを表示するボタンの文言"),
+	tone: z.enum([
+		"success",
+		"info",
+		"warning",
+		"error"
+	]),
+	message: z.string()
+});
+const separatorProps = z.object({
+	orientation: z.enum(["horizontal", "vertical"]).optional(),
+	color: z.enum([
+		"base",
+		"mute",
+		"subtle"
+	]).optional()
+});
+const stackProps = z.object({
+	direction: z.enum(["row", "column"]).optional(),
+	gap: z.enum([
+		"none",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	]).optional(),
+	padding: z.enum([
+		"none",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	]).optional(),
+	align: z.enum([
+		"start",
+		"center",
+		"end",
+		"stretch"
+	]).optional(),
+	justify: z.enum([
+		"start",
+		"center",
+		"end",
+		"between"
+	]).optional()
+});
+const gridProps = z.object({
+	cols: z.union([
+		z.literal(1),
+		z.literal(2),
+		z.literal(3),
+		z.literal(4),
+		z.literal(5),
+		z.literal(6),
+		z.literal("auto-fill"),
+		z.literal("auto-fit")
+	]).optional(),
+	minItemSize: z.union([
+		z.literal(24),
+		z.literal(32),
+		z.literal(40),
+		z.literal(48),
+		z.literal(64),
+		z.literal(80)
+	]).optional(),
+	gap: z.enum([
+		"none",
+		"sm",
+		"md",
+		"lg",
+		"xl"
+	]).optional()
+});
+const scrollLinkedProps = z.object({});
+const anchorProps = z.object({
+	label: z.string(),
+	href: safeUrl,
+	openInNewTab: z.boolean().optional()
+});
+const breadcrumbProps = z.object({
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional(),
+	items: z.array(z.object({
+		label: z.string(),
+		href: safeUrl.optional(),
+		current: z.boolean().optional()
+	})).min(1).describe("パンくず項目（href 無し、または current=true で現在地）")
+});
+const paginationProps = z.object({
+	name: z.string(),
+	totalPages: z.number(),
+	defaultPage: z.number().optional(),
+	prevLabel: z.string().optional(),
+	nextLabel: z.string().optional(),
+	disabled: z.boolean().optional()
+});
+const tabsProps = z.object({
+	label: z.string().optional().describe("タブリストのアクセシブル名"),
+	tabs: z.array(z.object({
+		label: z.string(),
+		content: z.string()
+	})).min(1).describe("各タブのラベルとテキストパネル")
+});
+const textInputShape = {
+	name: z.string(),
+	placeholder: z.string().optional(),
+	defaultValue: z.string().optional(),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional(),
+	readOnly: z.boolean().optional()
+};
+const textFieldProps = z.object({ ...textInputShape });
+const textareaProps = z.object({
+	...textInputShape,
+	rows: z.int().min(1).max(40).optional().describe("初期表示の行数"),
+	autoResize: z.boolean().optional().describe("入力量に合わせて高さを自動で伸ばす")
+});
+const passwordInputProps = z.object({
+	name: z.string(),
+	placeholder: z.string().optional(),
+	defaultValue: z.string().optional(),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional()
+});
+const numericInputShape = {
+	name: z.string(),
+	defaultValue: z.number().optional(),
+	min: z.number().optional(),
+	max: z.number().optional(),
+	step: z.number().optional(),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional()
+};
+const numberFieldProps = z.object({ ...numericInputShape });
+const sliderProps = z.object({
+	...numericInputShape,
+	min: z.number().optional().describe("下限（未指定なら 0）"),
+	max: z.number().optional().describe("上限（未指定なら 100）")
+});
+const checkboxProps = z.object({
+	name: z.string(),
+	label: z.string(),
+	defaultChecked: z.boolean().optional(),
+	disabled: z.boolean().optional()
+});
+const switchProps = z.object({
+	name: z.string(),
+	label: z.string(),
+	defaultChecked: z.boolean().optional(),
+	disabled: z.boolean().optional(),
+	invalid: z.boolean().optional(),
+	required: z.boolean().optional()
+});
+const selectOption = z.object({
+	value: z.string(),
+	label: z.string()
+});
+const radioCardOption = selectOption.extend({
+	description: z.string().optional(),
+	disabled: z.boolean().optional()
+});
+const selectProps = z.object({
+	name: z.string(),
+	options: z.array(selectOption).min(1).describe("選択肢（value / label）"),
+	defaultValue: z.string().optional(),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional()
+});
+const radioProps = z.object({
+	name: z.string(),
+	label: z.string(),
+	options: z.array(selectOption).min(1),
+	defaultValue: z.string().optional(),
+	disabled: z.boolean().optional()
+});
+const radioCardProps = z.object({
+	name: z.string(),
+	label: z.string(),
+	options: z.array(radioCardOption).min(1),
+	defaultValue: z.string().optional(),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional()
+});
+const checkboxCardProps = z.object({
+	name: z.string(),
+	options: z.array(radioCardOption).min(1),
+	defaultValue: z.array(z.string()).optional(),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional(),
+	label: z.string()
+});
+const listBoxProps = z.object({
+	name: z.string(),
+	options: z.array(selectOption).min(1),
+	defaultValue: z.string().optional(),
+	label: z.string().optional().describe("トリガーのアクセシブル名")
+});
+const checkboxGroupProps = z.object({
+	name: z.string(),
+	options: z.array(selectOption).min(1),
+	defaultValue: z.array(z.string()).optional(),
+	label: z.string()
+});
+const autocompleteProps = z.object({
+	name: z.string(),
+	options: z.array(selectOption).min(1),
+	defaultValue: z.array(z.string()).optional(),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional()
+});
+const fileFieldProps = z.object({
+	triggerLabel: z.string().optional().describe("ファイル選択ボタンの文言（未指定なら辞書の既定文言）"),
+	multiple: z.boolean().optional(),
+	maxFiles: z.number().optional(),
+	clearable: z.boolean().optional()
+});
+const formControlProps = z.object({
+	label: z.string(),
+	fieldType: z.enum([
+		"text",
+		"textarea",
+		"password"
+	]).optional(),
+	name: z.string(),
+	placeholder: z.string().optional(),
+	defaultValue: z.string().optional(),
+	helpText: z.string().optional(),
+	errorText: z.string().optional(),
+	required: z.boolean().optional(),
+	invalid: z.boolean().optional()
+});
+const formProps = z.object({ action: safeUrl.optional().describe("送信先 URL（任意）") });
+const modalProps = z.object({
+	triggerLabel: z.string().describe("モーダルを開くボタンの文言"),
+	title: z.string(),
+	side: z.enum([
+		"center",
+		"bottom",
+		"right",
+		"left"
+	]).optional()
+});
+const dialogProps = z.object({
+	triggerLabel: z.string().describe("ダイアログを開くボタンの文言"),
+	title: z.string()
+});
+const drawerProps = z.object({
+	triggerLabel: z.string().describe("ドロワーを開くボタンの文言"),
+	title: z.string(),
+	side: z.enum(["left", "right"]).optional()
+});
+const popoverProps = z.object({ triggerLabel: z.string().describe("ポップオーバーを開くボタンの文言") });
+const tooltipProps = z.object({
+	triggerLabel: z.string().describe("ツールチップを表示するトリガーの文言"),
+	content: z.string().describe("ツールチップの内容")
+});
+const dropdownMenuProps = z.object({
+	triggerLabel: z.string(),
+	items: z.array(z.object({ label: z.string() })).min(1).describe("メニュー項目")
+});
+//#endregion
+export { accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, breadcrumbProps, buttonProps, cardProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, dialogProps, drawerProps, dropdownMenuProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconName, iconProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, scrollLinkedProps, selectProps, separatorProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, tooltipProps };

package/dist/integrations/ai-sdk/index.d.mts

@@ -0,0 +1,3 @@
+import { ChatStatus, ToolState } from "../../components/ai/types.mjs";
+import { MappedPart, mapMessageParts } from "./map-parts.mjs";
+export { type ChatStatus, type MappedPart, type ToolState, mapMessageParts };

package/dist/integrations/ai-sdk/index.mjs

@@ -0,0 +1,2 @@
+import { mapMessageParts } from "./map-parts.mjs";
+export { mapMessageParts };

package/dist/integrations/ai-sdk/map-parts.d.mts

@@ -0,0 +1,28 @@
+import { ToolState } from "../../components/ai/types.mjs";
+import { UIMessage } from "ai";
+//#region src/integrations/ai-sdk/map-parts.d.ts
+type MappedPart = {
+  kind: 'text';
+  text: string;
+} | {
+  kind: 'reasoning';
+  text: string;
+} | {
+  kind: 'tool';
+  name: string;
+  toolCallId: string;
+  state: ToolState;
+  input?: unknown;
+  output?: unknown;
+  errorText?: string;
+  deniedReason?: string;
+};
+/**
+ * AI SDK の `UIMessage.parts` を @k8ordo/ui の AI チャットコンポーネントに
+ * 対応付けやすい素朴な配列へ変換する。React には依存せず、利用側が
+ * `mapMessageParts(message).map(...)` で `Response` / `Reasoning` /
+ * `ToolInvocation` を自分で描画する。
+ */
+declare const mapMessageParts: (message: UIMessage) => MappedPart[];
+//#endregion
+export { MappedPart, mapMessageParts };

package/dist/integrations/ai-sdk/map-parts.mjs

@@ -0,0 +1,32 @@
+import { getToolName, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
+//#region src/integrations/ai-sdk/map-parts.ts
+/**
+* AI SDK の `UIMessage.parts` を @k8ordo/ui の AI チャットコンポーネントに
+* 対応付けやすい素朴な配列へ変換する。React には依存せず、利用側が
+* `mapMessageParts(message).map(...)` で `Response` / `Reasoning` /
+* `ToolInvocation` を自分で描画する。
+*/
+const mapMessageParts = (message) => {
+	const result = [];
+	for (const part of message.parts) if (isTextUIPart(part)) result.push({
+		kind: "text",
+		text: part.text
+	});
+	else if (isReasoningUIPart(part)) result.push({
+		kind: "reasoning",
+		text: part.text
+	});
+	else if (isToolUIPart(part)) result.push({
+		kind: "tool",
+		name: getToolName(part),
+		toolCallId: part.toolCallId,
+		state: part.state,
+		input: part.input,
+		output: part.state === "output-available" ? part.output : void 0,
+		errorText: part.state === "output-error" ? part.errorText : void 0,
+		deniedReason: part.state === "output-denied" ? part.approval.reason : void 0
+	});
+	return result;
+};
+//#endregion
+export { mapMessageParts };