@k8ordo/ui 2.0.0 → 2.2.0

package/dist/integrations/_shared/schemas.mjs

@@ -48,7 +48,7 @@ import { z } from "zod";
 * 相対パスのみを許可する。`z.url()` は `javascript:` を拒否しないため正規表現で
 * 明示的にブロックしている。
 */
-const safeUrl = z.string().regex(/^(https?:\/\/|\/)/u, "外部 URL（http/https）または相対 URL のみ許可");
+const safeUrl = z.string().regex(/^(https?:\/\/|\/)/u, "Only an http:// or https:// URL, or a path starting with /, is allowed");
 const buttonProps = z.object({
 	label: z.string(),
 	variant: z.enum([
@@ -145,6 +145,16 @@ const iconButtonProps = z.object({
 		"secondary"
 	]).optional()
 });
+const copyButtonProps = z.object({
+	value: z.string().describe("Text copied to the clipboard"),
+	label: z.string().optional().describe("Button text, or the tooltip when iconOnly (default: \"Copy\")"),
+	iconOnly: z.boolean().optional(),
+	size: z.enum([
+		"sm",
+		"md",
+		"lg"
+	]).optional()
+});
 const chevronIconProps = z.object({
 	direction: z.enum([
 		"up",
@@ -218,11 +228,26 @@ const avatarProps = z.object({
 	]).optional()
 });
 const codeProps = z.object({ code: z.string() });
+const kbdProps = z.object({ keys: z.array(z.string()).min(1).describe("Keys pressed together, one per entry and in order, e.g. [\"Ctrl\", \"S\"]") });
+const emptyStateProps = z.object({
+	title: z.string(),
+	description: z.string().optional(),
+	icon: iconName.optional()
+});
+const carouselProps = z.object({
+	label: z.string().describe("Accessible name of the carousel"),
+	slideSize: z.enum([
+		"full",
+		"lg",
+		"md",
+		"sm"
+	]).optional()
+});
 const accordionProps = z.object({ items: z.array(z.object({
 	title: z.string(),
 	content: z.string(),
 	defaultOpen: z.boolean().optional()
-})).min(1).describe("各アコーディオン項目（タイトルとテキスト本文）") });
+})).min(1).describe("Accordion items, each with a title and a plain-text body") });
 const tableProps = z.object({
 	caption: z.string().optional(),
 	columns: z.array(z.object({
@@ -233,7 +258,30 @@ const tableProps = z.object({
 			"right"
 		]).optional()
 	})).min(1),
-	rows: z.array(z.array(z.string())).describe("各行のセル文字列（columns と同じ順序・個数）")
+	rows: z.array(z.array(z.string())).describe("Cell strings of each row, in the same order and number as columns")
+});
+const dataTableProps = z.object({
+	label: z.string().describe("Accessible name of the table"),
+	columns: z.array(z.object({
+		label: z.string(),
+		align: z.enum([
+			"left",
+			"center",
+			"right"
+		]).optional(),
+		sortable: z.boolean().optional()
+	})).min(1),
+	rows: z.array(z.array(z.string())).describe("Cell strings of each row, in the same order and number as columns"),
+	selectable: z.boolean().optional()
+});
+const treeProps = z.object({
+	label: z.string().describe("Accessible name of the tree"),
+	items: z.array(z.object({
+		id: z.string(),
+		label: z.string(),
+		parentId: z.string().optional(),
+		expanded: z.boolean().optional()
+	})).min(1).describe("Every node, flat and in display order; a child names its parent by parentId, and expanded opens a parent at first")
 });
 const cardProps = z.object({
 	width: z.enum(["full", "fit"]).optional(),
@@ -254,6 +302,16 @@ const alertProps = z.object({
 	]),
 	message: z.union([z.string(), z.array(z.string())])
 });
+const calloutProps = z.object({
+	tone: z.enum([
+		"success",
+		"info",
+		"warning",
+		"error"
+	]),
+	label: z.string().optional(),
+	content: z.string()
+});
 const spinnerProps = z.object({
 	label: z.string().optional(),
 	size: z.enum([
@@ -263,8 +321,8 @@ const spinnerProps = z.object({
 	]).optional()
 });
 const progressProps = z.object({
-	value: z.number(),
-	max: z.number(),
+	value: z.number().optional().describe("Current value; leave it out when progress is unknown"),
+	max: z.number().optional().describe("Upper bound (100 when omitted)"),
 	min: z.number().optional(),
 	label: z.string().optional()
 });
@@ -278,7 +336,7 @@ const skeletonProps = z.object({
 	animate: z.boolean().optional()
 });
 const toastProps = z.object({
-	triggerLabel: z.string().describe("トーストを表示するボタンの文言"),
+	triggerLabel: z.string().describe("Text of the button that shows the toast"),
 	tone: z.enum([
 		"success",
 		"info",
@@ -351,7 +409,6 @@ const gridProps = z.object({
 		"xl"
 	]).optional()
 });
-const scrollLinkedProps = z.object({});
 const anchorProps = z.object({
 	label: z.string(),
 	href: safeUrl,
@@ -367,7 +424,18 @@ const breadcrumbProps = z.object({
 		label: z.string(),
 		href: safeUrl.optional(),
 		current: z.boolean().optional()
-	})).min(1).describe("パンくず項目（href 無し、または current=true で現在地）")
+	})).min(1).describe("Breadcrumb items; the one without href, or with current: true, is the current page")
+});
+const sideNavProps = z.object({
+	label: z.string().describe("Accessible name of the navigation"),
+	groups: z.array(z.object({
+		title: z.string(),
+		links: z.array(z.object({
+			label: z.string(),
+			href: safeUrl,
+			current: z.boolean().optional()
+		})).min(1)
+	})).min(1).describe("Groups of links, each under a title; the link with current: true is the page being shown")
 });
 const paginationProps = z.object({
 	name: z.string(),
@@ -377,12 +445,21 @@ const paginationProps = z.object({
 	nextLabel: z.string().optional(),
 	disabled: z.boolean().optional()
 });
+const stepperProps = z.object({
+	label: z.string().describe("Accessible name of the list of steps"),
+	steps: z.array(z.object({
+		label: z.string(),
+		description: z.string().optional()
+	})).min(1).describe("Steps in order"),
+	current: z.int().min(0).describe("Index of the current step, from 0; the number of steps when every step is done"),
+	orientation: z.enum(["horizontal", "vertical"]).optional()
+});
 const tabsProps = z.object({
-	label: z.string().optional().describe("タブリストのアクセシブル名"),
+	label: z.string().optional().describe("Accessible name of the tab list"),
 	tabs: z.array(z.object({
 		label: z.string(),
 		content: z.string()
-	})).min(1).describe("各タブのラベルとテキストパネル")
+	})).min(1).describe("Label and text panel of each tab")
 });
 const textInputShape = {
 	name: z.string(),
@@ -395,8 +472,8 @@ const textInputShape = {
 const textFieldProps = z.object({ ...textInputShape });
 const textareaProps = z.object({
 	...textInputShape,
-	rows: z.int().min(1).max(40).optional().describe("初期表示の行数"),
-	autoResize: z.boolean().optional().describe("入力量に合わせて高さを自動で伸ばす")
+	rows: z.int().min(1).max(40).optional().describe("Number of rows shown at first"),
+	autoResize: z.boolean().optional().describe("Grow the height to fit the text")
 });
 const passwordInputProps = z.object({
 	name: z.string(),
@@ -417,8 +494,50 @@ const numericInputShape = {
 const numberFieldProps = z.object({ ...numericInputShape });
 const sliderProps = z.object({
 	...numericInputShape,
-	min: z.number().optional().describe("下限（未指定なら 0）"),
-	max: z.number().optional().describe("上限（未指定なら 100）")
+	min: z.number().optional().describe("Lower bound (0 when omitted)"),
+	max: z.number().optional().describe("Upper bound (100 when omitted)")
+});
+const isoDate = () => z.iso.date();
+const dateInputShape = {
+	name: z.string(),
+	label: z.string().describe("Visible label of the field"),
+	defaultValue: isoDate().optional().describe("YYYY-MM-DD"),
+	min: isoDate().optional().describe("Earliest date that can be entered"),
+	max: isoDate().optional().describe("Latest date that can be entered"),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional(),
+	required: z.boolean().optional()
+};
+const dateFieldProps = z.object({ ...dateInputShape });
+const datePickerProps = z.object({ ...dateInputShape });
+const calendarProps = z.object({
+	name: z.string().describe("State key the picked date is stored under"),
+	defaultValue: isoDate().optional().describe("YYYY-MM-DD"),
+	min: isoDate().optional().describe("Earliest date that can be picked"),
+	max: isoDate().optional().describe("Latest date that can be picked")
+});
+const rangeSliderProps = z.object({
+	name: z.string().describe("Both thumbs submit under this name, lower value first"),
+	label: z.string().describe("Accessible name of the slider"),
+	defaultValue: z.tuple([z.number(), z.number()]).optional().describe("[lower, upper]; the whole range when omitted"),
+	min: z.number().optional().describe("Lower bound (0 when omitted)"),
+	max: z.number().optional().describe("Upper bound (100 when omitted)"),
+	step: z.number().optional(),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional()
+});
+const hexColor = () => z.string().regex(/^#[0-9a-fA-F]{6}$/u);
+const colorPickerProps = z.object({
+	name: z.string(),
+	label: z.string().describe("Visible label of the field"),
+	defaultValue: hexColor().optional().describe("#rrggbb"),
+	swatches: z.array(z.object({
+		value: hexColor().describe("#rrggbb"),
+		label: z.string().describe("Name of the color, read out for the swatch")
+	})).optional().describe("Preset colors offered as buttons"),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional(),
+	required: z.boolean().optional()
 });
 const checkboxProps = z.object({
 	name: z.string(),
@@ -444,7 +563,7 @@ const radioCardOption = selectOption.extend({
 });
 const selectProps = z.object({
 	name: z.string(),
-	options: z.array(selectOption).min(1).describe("選択肢（value / label）"),
+	options: z.array(selectOption).min(1).describe("Choices (value / label)"),
 	defaultValue: z.string().optional(),
 	invalid: z.boolean().optional(),
 	disabled: z.boolean().optional()
@@ -476,7 +595,7 @@ const listBoxProps = z.object({
 	name: z.string(),
 	options: z.array(selectOption).min(1),
 	defaultValue: z.string().optional(),
-	label: z.string().optional().describe("トリガーのアクセシブル名")
+	label: z.string().optional().describe("Accessible name of the trigger")
 });
 const checkboxGroupProps = z.object({
 	name: z.string(),
@@ -491,11 +610,22 @@ const autocompleteProps = z.object({
 	invalid: z.boolean().optional(),
 	disabled: z.boolean().optional()
 });
+const comboboxProps = z.object({
+	name: z.string(),
+	label: z.string().describe("Visible label of the field"),
+	options: z.array(selectOption).min(1).describe("Choices (value / label); typing filters them by label"),
+	defaultValue: z.string().optional().describe("value of the chosen option"),
+	placeholder: z.string().optional(),
+	invalid: z.boolean().optional(),
+	disabled: z.boolean().optional(),
+	required: z.boolean().optional()
+});
 const fileFieldProps = z.object({
-	triggerLabel: z.string().optional().describe("ファイル選択ボタンの文言（未指定なら辞書の既定文言）"),
+	triggerLabel: z.string().optional().describe("Text of the file picker button (the built-in wording when omitted)"),
 	multiple: z.boolean().optional(),
 	maxFiles: z.number().optional(),
-	clearable: z.boolean().optional()
+	clearable: z.boolean().optional(),
+	dropzone: z.boolean().optional().describe("Show an area files can be dropped onto, with the button in it")
 });
 const formControlProps = z.object({
 	label: z.string(),
@@ -512,9 +642,9 @@ const formControlProps = z.object({
 	required: z.boolean().optional(),
 	invalid: z.boolean().optional()
 });
-const formProps = z.object({ action: safeUrl.optional().describe("送信先 URL（任意）") });
+const formProps = z.object({ action: safeUrl.optional().describe("URL the form submits to (optional)") });
 const modalProps = z.object({
-	triggerLabel: z.string().describe("モーダルを開くボタンの文言"),
+	triggerLabel: z.string().describe("Text of the button that opens the modal"),
 	title: z.string(),
 	side: z.enum([
 		"center",
@@ -524,22 +654,30 @@ const modalProps = z.object({
 	]).optional()
 });
 const dialogProps = z.object({
-	triggerLabel: z.string().describe("ダイアログを開くボタンの文言"),
+	triggerLabel: z.string().describe("Text of the button that opens the dialog"),
 	title: z.string()
 });
 const drawerProps = z.object({
-	triggerLabel: z.string().describe("ドロワーを開くボタンの文言"),
+	triggerLabel: z.string().describe("Text of the button that opens the drawer"),
 	title: z.string(),
 	side: z.enum(["left", "right"]).optional()
 });
-const popoverProps = z.object({ triggerLabel: z.string().describe("ポップオーバーを開くボタンの文言") });
+const popoverProps = z.object({ triggerLabel: z.string().describe("Text of the button that opens the popover") });
 const tooltipProps = z.object({
-	triggerLabel: z.string().describe("ツールチップを表示するトリガーの文言"),
-	content: z.string().describe("ツールチップの内容")
+	triggerLabel: z.string().describe("Text of the trigger that shows the tooltip"),
+	content: z.string().describe("Text of the tooltip")
+});
+const toolbarProps = z.object({
+	label: z.string().describe("Accessible name of the toolbar"),
+	items: z.array(z.object({
+		label: z.string(),
+		icon: iconName.optional().describe("Show only this icon; label becomes its accessible name")
+	})).min(1).describe("Buttons in the toolbar, in order"),
+	orientation: z.enum(["horizontal", "vertical"]).optional()
 });
 const dropdownMenuProps = z.object({
 	triggerLabel: z.string(),
-	items: z.array(z.object({ label: z.string() })).min(1).describe("メニュー項目")
+	items: z.array(z.object({ label: z.string() })).min(1).describe("Menu items")
 });
 //#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 };
+export { accordionProps, alertProps, anchorProps, autocompleteProps, avatarProps, badgeProps, breadcrumbProps, buttonProps, calendarProps, calloutProps, cardProps, carouselProps, checkboxCardProps, checkboxGroupProps, checkboxProps, chevronIconProps, codeProps, colorPickerProps, comboboxProps, copyButtonProps, dataTableProps, dateFieldProps, datePickerProps, dialogProps, drawerProps, dropdownMenuProps, emptyStateProps, fileFieldProps, formControlProps, formProps, gridProps, headingProps, iconButtonProps, iconName, iconProps, kbdProps, listBoxProps, modalProps, numberFieldProps, paginationProps, passwordInputProps, popoverProps, progressProps, radioCardProps, radioProps, rangeSliderProps, selectProps, separatorProps, sideNavProps, skeletonProps, sliderProps, spinnerProps, stackProps, statusIconProps, stepperProps, switchProps, tableProps, tabsProps, textFieldProps, textareaProps, toastProps, toolbarProps, tooltipProps, treeProps };

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

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

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

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

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

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

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

@@ -1,10 +1,10 @@
-import { getToolName, isReasoningUIPart, isTextUIPart, isToolUIPart } from "ai";
+import { getToolName, isDataUIPart, isFileUIPart, 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` を自分で描画する。
+* `ToolInvocation` / `Attachment` / `Source` を自分で描画する。
 */
 const mapMessageParts = (message) => {
 	const result = [];
@@ -24,7 +24,32 @@ const mapMessageParts = (message) => {
 		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
+		approval: part.approval
+	});
+	else if (isFileUIPart(part)) result.push({
+		kind: "file",
+		url: part.url,
+		mediaType: part.mediaType,
+		filename: part.filename
+	});
+	else if (part.type === "source-url") result.push({
+		kind: "source",
+		id: part.sourceId,
+		url: part.url,
+		title: part.title
+	});
+	else if (part.type === "source-document") result.push({
+		kind: "source",
+		id: part.sourceId,
+		title: part.title,
+		mediaType: part.mediaType,
+		filename: part.filename
+	});
+	else if (isDataUIPart(part)) result.push({
+		kind: "data",
+		name: part.type.slice(5),
+		id: part.id,
+		data: part.data
 	});
 	return result;
 };