@magicvr/schema-ui-ui 0.1.2 → 0.1.3

package/components/data-table.js

@@ -0,0 +1,156 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Inbox } from "lucide-react";
+import { resolveAsyncDisplayState } from "@magicvr/schema-ui-ui/components/ui/async-state";
+import { Skeleton } from "@magicvr/schema-ui-ui/components/ui/skeleton";
+import { useTranslate } from "@magicvr/schema-ui-lib/i18n/runtime";
+import { formatDisplayTime } from "@magicvr/schema-ui-lib/lib/datetime";
+import { cn } from "@magicvr/schema-ui-lib/lib/utils";
+function cellContent(column, row) {
+    if (column.render !== undefined) {
+        return column.render(row);
+    }
+    const value = row[column.key];
+    // Universal empty fallback: null / undefined / empty string render a
+    // muted placeholder so blank cells stay visually consistent.
+    if (value === undefined || value === null || String(value) === "") {
+        return _jsx("span", { className: "text-muted-foreground", children: "\u2014" });
+    }
+    const text = String(value);
+    // Display formatting: ISO-8601 timestamps render as local
+    // "YYYY-MM-DD HH:mm" instead of the raw wire value.
+    const display = formatDisplayTime(value) ?? text;
+    // Universal single-line ellipsis: every string cell truncates at the
+    // column cap with a native title tooltip for the full value. The width
+    // cap lives on the td (W4 A-003 F-3) unless the column declares its own
+    // width, which then owns the constraint.
+    return (_jsx("span", { className: cn("block truncate", column.truncate === true ? "max-w-[16rem]" : ""), title: display, "data-table-cell": "truncated", children: display }));
+}
+function labelText(label) {
+    if (typeof label === "string" || typeof label === "number") {
+        return String(label);
+    }
+    return "";
+}
+/**
+ * Columns eligible for the mobile card surface. Action / selection chrome stays
+ * out of the primary title/secondary stack and is rendered as trailing controls.
+ */
+function contentColumns(columns) {
+    return columns.filter((column) => column.key !== "__selection" && column.key !== "actions");
+}
+function actionColumn(columns) {
+    return columns.find((column) => column.key === "actions");
+}
+function MobileCardList({ columns, rows, rowKey, onRowClick, selectedKey, }) {
+    const fields = contentColumns(columns);
+    const actions = actionColumn(columns);
+    const titleColumn = fields[0];
+    // W14 F-14 (GOAL-018): do not silently drop columns on mobile — render every
+    // remaining content column in the secondary stack.
+    const secondaryColumns = fields.slice(1);
+    const t = useTranslate();
+    return (_jsx("ul", { "data-table-presentation": "mobile-cards", className: "space-y-2 md:hidden", "aria-label": t("feedback.mobileCardList"), children: rows.map((row) => {
+            const key = rowKey(row);
+            const selected = selectedKey !== undefined && selectedKey === key;
+            return (_jsx("li", { children: _jsx("div", { role: onRowClick === undefined ? undefined : "button", tabIndex: onRowClick === undefined ? undefined : 0, "aria-selected": onRowClick === undefined ? undefined : selected, onClick: onRowClick === undefined ? undefined : () => onRowClick(row), onKeyDown: onRowClick === undefined
+                        ? undefined
+                        : (event) => {
+                            if (event.key === "Enter" || event.key === " ") {
+                                event.preventDefault();
+                                onRowClick(row);
+                            }
+                        }, className: cn("rounded-lg border border-border bg-card p-3 text-left shadow-sm transition-colors", onRowClick === undefined ? "" : "cursor-pointer hover:bg-accent/40", selected ? "border-primary/40 bg-accent/50 ring-1 ring-primary/20" : ""), children: _jsxs("div", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [titleColumn !== undefined ? (_jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: cellContent(titleColumn, row) })) : null, secondaryColumns.map((column) => (_jsxs("p", { className: "truncate text-xs text-muted-foreground", children: [labelText(column.label) !== "" ? (_jsxs("span", { className: "mr-1 font-medium text-muted-foreground/80", children: [labelText(column.label), ":"] })) : null, cellContent(column, row)] }, column.key)))] }), actions !== undefined ? (_jsx("div", { className: "shrink-0", onClick: (event) => event.stopPropagation(), onKeyDown: (event) => event.stopPropagation(), children: actions.render !== undefined
+                                    ? actions.render(row)
+                                    : cellContent(actions, row) })) : (_jsx("span", { "aria-hidden": "true", className: "shrink-0 px-1 text-sm text-muted-foreground", children: "\u22EF" }))] }) }) }, key));
+        }) }));
+}
+export function DataTable({ columns, rows, rowKey, sort, onSortChange, loading = false, error = null, emptyMessage = "No rows.", caption, onRowClick, selectedKey, onRetry, }) {
+    const t = useTranslate();
+    const toggleSort = (column) => {
+        if (!column.sortable || onSortChange === undefined) {
+            return;
+        }
+        // W14 F-14 (GOAL-018): a third click on the active descending column clears
+        // the sort instead of cycling back to ascending.
+        if (sort?.field === column.key && sort.order === "desc") {
+            onSortChange(null);
+            return;
+        }
+        const nextOrder = sort?.field === column.key && sort.order === "asc" ? "desc" : "asc";
+        onSortChange({ field: column.key, order: nextOrder });
+    };
+    const arrowFor = (column) => {
+        if (sort?.field !== column.key) {
+            return "";
+        }
+        return sort.order === "asc" ? " ↑" : " ↓";
+    };
+    const state = resolveAsyncDisplayState({ loading, error, isEmpty: rows.length === 0 });
+    if (state === "loading") {
+        return (_jsx("div", { className: "space-y-2", "data-table-presentation": "loading", children: _jsxs("div", { role: "status", "aria-label": t("feedback.loading"), className: "space-y-2 rounded-md border border-border p-4", children: [_jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-full" }), _jsx(Skeleton, { className: "h-4 w-3/4" })] }) }));
+    }
+    if (state === "error") {
+        return (_jsxs("div", { role: "alert", className: "space-y-3 rounded-md border border-destructive/30 bg-destructive/5 px-4 py-6 text-sm text-destructive", children: [_jsx("p", { children: error }), onRetry !== undefined ? (_jsx("button", { type: "button", "data-table-retry": "true", onClick: onRetry, className: "rounded-md border border-destructive/40 bg-background px-3 py-1.5 text-xs font-medium text-destructive transition-colors hover:bg-destructive/10", children: t("feedback.retry") })) : null] }));
+    }
+    if (state === "empty") {
+        // W11 · U-07: graphic empty state — an inbox glyph plus the message.
+        return (_jsxs("div", { className: "flex flex-col items-center gap-2 rounded-md border border-dashed border-border bg-card px-4 py-10 text-center", "data-table-empty": "true", children: [_jsx(Inbox, { "aria-hidden": "true", className: "size-8 text-muted-foreground/40" }), _jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })] }));
+    }
+    return (_jsxs("div", { className: "w-full min-w-0 space-y-0", "data-table-presentation": "dual-end", children: [_jsx("div", { "data-table-presentation": "desktop-table", className: "hidden w-full min-w-0 overflow-x-auto rounded-md border border-border md:block", children: _jsxs("table", { className: "w-full min-w-[32rem] border-collapse text-sm", children: [caption ? _jsx("caption", { className: "sr-only", children: caption }) : null, _jsx("thead", { children: _jsx("tr", { className: "border-b border-border bg-muted/30", children: columns.map((column) => {
+                                    const isActive = sort?.field === column.key;
+                                    return (_jsx("th", { style: {
+                                            ...(column.width !== undefined ? { width: column.width } : {}),
+                                            ...(column.minWidth !== undefined ? { minWidth: column.minWidth } : {}),
+                                        }, className: "px-4 py-3 text-left text-[11px] font-medium uppercase tracking-[0.12em] text-muted-foreground", scope: "col", children: column.sortable ? (_jsxs("button", { type: "button", onClick: () => toggleSort(column), "aria-sort": isActive
+                                                ? sort.order === "asc"
+                                                    ? "ascending"
+                                                    : "descending"
+                                                : undefined, className: cn("inline-flex items-center gap-1 uppercase tracking-[0.12em]", isActive ? "text-foreground" : "hover:text-foreground"), children: [column.label, _jsx("span", { "aria-hidden": "true", className: "text-[10px]", children: arrowFor(column) })] })) : (column.label) }, column.key));
+                                }) }) }), _jsx("tbody", { children: rows.map((row) => {
+                                const key = rowKey(row);
+                                const selected = selectedKey !== undefined && selectedKey === key;
+                                return (_jsx("tr", { tabIndex: onRowClick === undefined ? undefined : 0, onClick: onRowClick === undefined
+                                        ? undefined
+                                        : (event) => {
+                                            // Action/selection chrome must not select the row
+                                            // (selecting opens recordView drawer — bad UX for Edit/Delete).
+                                            const target = event.target;
+                                            if (target?.closest("button, a, input, select, textarea, label, [data-row-click-ignore]")) {
+                                                return;
+                                            }
+                                            onRowClick(row);
+                                        }, onKeyDown: onRowClick === undefined
+                                        ? undefined
+                                        : (event) => {
+                                            const target = event.target;
+                                            if (target?.closest("button, a, input, select, textarea, label, [data-row-click-ignore]")) {
+                                                return;
+                                            }
+                                            if (event.key === "Enter" || event.key === " ") {
+                                                event.preventDefault();
+                                                onRowClick(row);
+                                            }
+                                        }, "aria-selected": onRowClick === undefined ? undefined : selected, className: cn("border-b border-border transition-colors last:border-b-0 hover:bg-accent/40", onRowClick === undefined
+                                        ? ""
+                                        : "cursor-pointer hover:bg-accent/50", selected ? "bg-accent/60" : ""), children: columns.map((column) => {
+                                        const interactive = column.key === "actions" || column.key === "__selection";
+                                        return (_jsx("td", { "data-row-click-ignore": interactive ? "true" : undefined, style: {
+                                                ...(column.width !== undefined ? { width: column.width } : {}),
+                                                ...(column.minWidth !== undefined ? { minWidth: column.minWidth } : {}),
+                                            }, className: cn("px-4 py-3 align-middle text-sm", 
+                                            // W4 · GOAL-005: table-layout auto sizes a column by
+                                            // its cell max-content; the inner span's max-width
+                                            // alone does not clamp the cell, so the width cap
+                                            // must live on the td itself. Universal cap: every
+                                            // column truncates at 20rem unless it declares an
+                                            // explicit width (which then owns the constraint).
+                                            column.truncate === true
+                                                ? "max-w-[16rem]"
+                                                : column.width === undefined
+                                                    ? "max-w-[20rem]"
+                                                    : ""), onClick: interactive
+                                                ? (event) => event.stopPropagation()
+                                                : undefined, children: cellContent(column, row) }, column.key));
+                                    }) }, key));
+                            }) })] }) }), _jsx(MobileCardList, { columns: columns, rows: rows, rowKey: rowKey, onRowClick: onRowClick, selectedKey: selectedKey })] }));
+}

package/components/ui/async-state.js

@@ -0,0 +1,29 @@
+/**
+ * Shared pure state determination for async display regions (S4 · GOAL-004).
+ *
+ * statCard / chart / list-table each fetch a resource independently and used
+ * to invent their own ad-hoc "Loading…" text placeholder. This module
+ * centralizes the loading / error / empty / ready decision into one pure,
+ * directly-testable function so every consumer renders the same sequence
+ * (Skeleton while loading, a `role="alert"` message on error, a muted empty
+ * message otherwise) instead of drifting independently.
+ */
+/**
+ * Resolves the single display state a region should show.
+ *
+ * Precedence: `error` wins over `loading` (a failed fetch is not "still
+ * loading" even if a stale loading flag lingers), and `loading` wins over
+ * `isEmpty` (emptiness is unknown until the fetch settles).
+ */
+export function resolveAsyncDisplayState({ loading, error, isEmpty = false, }) {
+    if (error !== null) {
+        return "error";
+    }
+    if (loading) {
+        return "loading";
+    }
+    if (isEmpty) {
+        return "empty";
+    }
+    return "ready";
+}

package/components/ui/badge.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "@magicvr/schema-ui-lib/lib/utils";
+const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground shadow hover:opacity-80",
+            secondary: "border-transparent bg-secondary text-secondary-foreground hover:opacity-80",
+            destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:opacity-80",
+            success: "border-transparent bg-success text-success-foreground shadow hover:opacity-80",
+            outline: "text-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge({ className, variant, ...props }) {
+    return (_jsx("div", { className: cn(badgeVariants({ variant }), className), ...props }));
+}
+export { Badge, badgeVariants };

package/components/ui/breadcrumbs.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Breadcrumb navigation for nested admin pages (GOAL-015).
+ *
+ * Semantic hierarchy, not visit history (user ruling 2026-08-14):
+ * the trail is the page's place in the manifest navigation tree
+ * (slot → group labels → page) plus consumer-declared parents for
+ * inner pages reached by row navigation (e.g. dictionary-entries →
+ * data-dictionary, task-runs → scheduled-tasks). No protocol change:
+ * the parent map is a web-shell declaration (BREADCRUMB_PAGE_PARENTS).
+ *
+ * Trail shape: 首页 => 一级页 => ... => n级内页 — the home page
+ * (manifest homePageRef, the domain-root default) always leads, then nav
+ * group labels and declared parents, then the current page. Visual: compact
+ * 12px trail — muted clickable ancestors (hover brighten + underline), thin
+ * "/" separators, brighter non-clickable current item, and an optional
+ * small circular ghost back button (semantic parent) at the far left.
+ */
+import { ArrowLeft } from "lucide-react";
+import { useTranslate } from "@magicvr/schema-ui-lib/i18n/runtime";
+import { resolveTextProp } from "@magicvr/schema-ui-lib/i18n/catalog";
+export function Breadcrumbs({ entries, onNavigate, onBack, showBack = false, }) {
+    const t = useTranslate();
+    const hasTrail = entries.length > 1;
+    if (!hasTrail && !showBack) {
+        return null;
+    }
+    const backLabel = t("shell.back");
+    return (_jsxs("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-2", children: [showBack ? (_jsx("button", { type: "button", onClick: onBack, "aria-label": backLabel, title: backLabel, className: "inline-flex size-6 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", children: _jsx(ArrowLeft, { className: "size-3.5", "aria-hidden": "true" }) })) : null, hasTrail ? (_jsx("ol", { className: "flex min-w-0 flex-wrap items-center gap-x-1.5 gap-y-1 text-xs font-normal text-muted-foreground", children: entries.map((entry, index) => {
+                    const isLast = index === entries.length - 1;
+                    return (_jsxs("li", { className: "flex min-w-0 items-center gap-x-1.5", children: [isLast ? (_jsx("span", { "aria-current": "page", className: "truncate font-normal text-foreground/90", children: entry.label })) : entry.route !== "" ? (_jsx("button", { type: "button", onClick: () => onNavigate(entry.route), className: "truncate font-normal text-muted-foreground underline-offset-4 transition-colors hover:text-foreground hover:underline", children: entry.label })) : (_jsx("span", { className: "truncate font-normal text-muted-foreground/75", children: entry.label })), !isLast ? (_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground/40", children: "/" })) : null] }, entry.pageId));
+                }) })) : null] }));
+}
+/**
+ * Resolves the SEMANTIC breadcrumb trail for a matched page.
+ *
+ * Sources, in order:
+ *   1. manifest navigation tree — a page rendered under a group shows the
+ *      group labels as non-clickable ancestors (outermost first);
+ *   2. declared parents (options.parents) — inner pages reached by row
+ *      navigation declare their parent pageId; the chain walks up until a
+ *      page with no declared parent (its nav group chain, if any, is
+ *      included). Unknown declared parents fail safe (skipped).
+ *   3. pages not in the tree and without a declared parent are
+ *      single-level (no trail UI).
+ *
+ * This is NOT the visit history: the same page always shows the same
+ * trail regardless of how the user got there (user ruling 2026-08-14).
+ */
+export function resolveBreadcrumbTrail(pages, currentPage, t, options = {}) {
+    if (currentPage === undefined)
+        return [];
+    const labelOf = (page) => resolveTextProp(page, "titleKey", "title", t) ??
+        page.pageId;
+    const byId = new Map(pages.map((page) => [page.pageId, page]));
+    // Nav-tree group chain (outermost first) for a pageId; null when absent.
+    const groupChain = (pageId) => {
+        const walk = (items, chain) => {
+            for (const item of items ?? []) {
+                if (item.pageRef === pageId)
+                    return chain;
+                if (item.items !== undefined) {
+                    const label = resolveTextProp(item, "labelKey", "label", t) ?? "";
+                    const next = label === "" ? chain : [...chain, label];
+                    const found = walk(item.items, next);
+                    if (found !== null)
+                        return found;
+                }
+            }
+            return null;
+        };
+        for (const slot of [options.navigation?.top, options.navigation?.sidebar, options.navigation?.user]) {
+            const found = walk(slot, []);
+            if (found !== null)
+                return found;
+        }
+        return null;
+    };
+    // Declared-parent chain: each parent contributes its own nav group
+    // labels (outermost first) then the parent page, oldest ancestor first.
+    const ancestors = [];
+    const seen = new Set([currentPage.pageId]);
+    let cursor = options.parents?.[currentPage.pageId];
+    while (cursor !== undefined && !seen.has(cursor)) {
+        const page = byId.get(cursor);
+        if (page === undefined)
+            break; // unknown declared parent — fail safe
+        seen.add(cursor);
+        const groups = groupChain(cursor) ?? [];
+        for (const label of groups) {
+            ancestors.unshift({ pageId: label, label, route: "", current: false });
+        }
+        ancestors.unshift({
+            pageId: page.pageId,
+            label: labelOf(page),
+            route: page.route,
+            current: false,
+        });
+        cursor = options.parents?.[cursor];
+    }
+    const ownGroups = groupChain(currentPage.pageId) ?? [];
+    const chain = [
+        ...ownGroups.map((label) => ({ pageId: label, label, route: "", current: false })),
+        ...ancestors,
+        {
+            pageId: currentPage.pageId,
+            label: labelOf(currentPage),
+            route: currentPage.route,
+            current: true,
+        },
+    ];
+    // 首页 root: the domain-root default page leads every trail unless the
+    // current page IS home (deduplicated when the chain already contains it).
+    if (options.homePageId !== undefined && currentPage.pageId !== options.homePageId) {
+        const home = byId.get(options.homePageId);
+        if (home !== undefined && !chain.some((entry) => entry.pageId === home.pageId)) {
+            chain.unshift({
+                pageId: home.pageId,
+                label: labelOf(home),
+                route: home.route,
+                current: false,
+            });
+        }
+    }
+    return chain;
+}

package/components/ui/button.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@magicvr/schema-ui-lib/lib/utils";
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:opacity-90",
+            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:opacity-90",
+            ghost: "hover:bg-accent hover:text-accent-foreground",
+        },
+        size: {
+            default: "h-9 px-4 py-2",
+            sm: "h-8 rounded-md px-3 text-xs",
+            lg: "h-10 rounded-md px-8",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (_jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref: ref, ...props }));
+});
+Button.displayName = "Button";
+export { Button, buttonVariants };

package/components/ui/card.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@magicvr/schema-ui-lib/lib/utils";
+const Card = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("rounded-lg border border-border bg-card text-card-foreground shadow-sm", className), ...props })));
+Card.displayName = "Card";
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })));
+CardHeader.displayName = "CardHeader";
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx("h3", { ref: ref, className: cn("text-2xl font-semibold leading-none tracking-tight", className), ...props })));
+CardTitle.displayName = "CardTitle";
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx("p", { ref: ref, className: cn("text-sm text-muted-foreground", className), ...props })));
+CardDescription.displayName = "CardDescription";
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("p-6 pt-0", className), ...props })));
+CardContent.displayName = "CardContent";
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("div", { ref: ref, className: cn("flex items-center p-6 pt-0", className), ...props })));
+CardFooter.displayName = "CardFooter";
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

package/components/ui/index.d.ts

@@ -1,13 +1,13 @@
 /**
  * @schema-ui/ui 聚合导出：设计系统原子 + DataTable 核心（R3 六包化）。
  */
-export * from "./async-state";
-export * from "./badge";
-export * from "./breadcrumbs";
-export * from "./button";
-export * from "./card";
-export * from "./input";
-export * from "./label";
-export * from "./skeleton";
-export * from "./textarea";
-export * from "../data-table";
+export * from "./async-state.js";
+export * from "./badge.js";
+export * from "./breadcrumbs.js";
+export * from "./button.js";
+export * from "./card.js";
+export * from "./input.js";
+export * from "./label.js";
+export * from "./skeleton.js";
+export * from "./textarea.js";
+export * from "../data-table.js";

package/components/ui/index.js

@@ -0,0 +1,13 @@
+/**
+ * @magicvr/schema-ui-ui 聚合导出：设计系统原子 + DataTable 核心（R3 六包化）。
+ */
+export * from "./async-state.js";
+export * from "./badge.js";
+export * from "./breadcrumbs.js";
+export * from "./button.js";
+export * from "./card.js";
+export * from "./input.js";
+export * from "./label.js";
+export * from "./skeleton.js";
+export * from "./textarea.js";
+export * from "../data-table.js";

package/components/ui/input.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@magicvr/schema-ui-lib/lib/utils";
+const Input = React.forwardRef(({ className, type, ...props }, ref) => {
+    return (_jsx("input", { type: type, className: cn("flex h-9 w-full rounded-md border border-input/80 bg-background px-3 py-1 text-sm shadow-sm transition-all duration-150 file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/50 hover:border-muted-foreground/30 focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));
+});
+Input.displayName = "Input";
+export { Input };

package/components/ui/label.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@magicvr/schema-ui-lib/lib/utils";
+const Label = React.forwardRef(({ className, ...props }, ref) => (_jsx("label", { ref: ref, className: cn("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", className), ...props })));
+Label.displayName = "Label";
+export { Label };

package/components/ui/skeleton.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@magicvr/schema-ui-lib/lib/utils";
+function Skeleton({ className, ...props }) {
+    return (_jsx("div", { className: cn("animate-pulse rounded-md bg-primary/10", className), ...props }));
+}
+export { Skeleton };

package/components/ui/textarea.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@magicvr/schema-ui-lib/lib/utils";
+const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("textarea", { className: cn("flex min-h-[60px] w-full rounded-md border border-input/80 bg-background px-3 py-2 text-sm shadow-sm transition-all duration-150 placeholder:text-muted-foreground/50 hover:border-muted-foreground/30 focus-visible:outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref, ...props }));
+});
+Textarea.displayName = "Textarea";
+export { Textarea };

package/i18n/catalog.d.ts

@@ -12,7 +12,7 @@
  * observable via the `schema-ui:missing-translation` window event (deduped
  * per locale+key, so the first occurrence always reports).
  */
-import { type Locale } from "./locale";
+import { type Locale } from "./locale.js";
 export type MessageParams = Record<string, string | number>;
 export interface MissingTranslationDetail {
     locale: Locale;

package/i18n/catalog.js

@@ -0,0 +1,96 @@
+/**
+ * Translation catalog (S1 · C2/C3).
+ *
+ * Catalogs are pure data files under `messages/`; `en-US` is the canonical
+ * baseline. Resolution order for a key in locale L:
+ *
+ *   catalog[L] → catalog[en-US] → observable missing-key event → key itself
+ *
+ * A key is "missing" only when neither the current catalog nor the en-US
+ * catalog has it; the en-US fallback is silent (designed behavior). Missing
+ * keys never render empty, never throw, and never block the flow; they are
+ * observable via the `schema-ui:missing-translation` window event (deduped
+ * per locale+key, so the first occurrence always reports).
+ */
+import enUS from "./messages/en-US.json";
+import zhCN from "./messages/zh-CN.json";
+import { DEFAULT_LOCALE } from "./locale.js";
+export const MISSING_TRANSLATION_EVENT = "schema-ui:missing-translation";
+const catalogs = {
+    "en-US": enUS,
+    "zh-CN": zhCN,
+};
+const reportedMissing = new Set();
+/** True when the key exists in the given locale catalog. */
+export function hasTranslation(key, locale) {
+    return Object.prototype.hasOwnProperty.call(catalogs[locale], key);
+}
+/** Raw catalog text for a key, or null when the locale catalog lacks it. */
+export function lookupTranslation(key, locale) {
+    if (hasTranslation(key, locale)) {
+        return catalogs[locale][key];
+    }
+    return null;
+}
+/** Replaces `{name}` placeholders with params; unknown placeholders stay. */
+export function interpolate(template, params) {
+    if (params === undefined) {
+        return template;
+    }
+    return template.replace(/\{([a-zA-Z0-9_]+)\}/g, (match, name) => Object.prototype.hasOwnProperty.call(params, name) ? String(params[name]) : match);
+}
+/** Publishes a deduped missing-key report to the window event bus. */
+export function reportMissingTranslation(detail) {
+    const dedupeKey = `${detail.locale}:${detail.key}`;
+    if (reportedMissing.has(dedupeKey)) {
+        return;
+    }
+    reportedMissing.add(dedupeKey);
+    if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent(MISSING_TRANSLATION_EVENT, { detail }));
+    }
+}
+/** Resets the missing-key dedupe set (test seam). */
+export function resetMissingTranslationReports() {
+    reportedMissing.clear();
+}
+/**
+ * Resolves a message key for a locale with the frozen fallback chain.
+ * Never throws, never returns an empty string for a missing key.
+ *
+ * Fallback order: catalog[locale] → catalog[en-US] → `literalFallback`
+ * (protocol literal text, when supplied) → key itself.
+ */
+export function translate(key, params, locale = DEFAULT_LOCALE, path, literalFallback) {
+    const direct = lookupTranslation(key, locale);
+    if (direct !== null) {
+        return interpolate(direct, params);
+    }
+    const fallback = lookupTranslation(key, DEFAULT_LOCALE);
+    if (fallback !== null) {
+        return interpolate(fallback, params);
+    }
+    reportMissingTranslation({ locale, key, path });
+    return literalFallback !== undefined && literalFallback !== "" ? literalFallback : key;
+}
+/** Binds a locale (+ optional context path) to a translate function. */
+export function createTranslator(locale, options) {
+    return (key, params, literalFallback) => translate(key, params, locale, options?.path, literalFallback);
+}
+/**
+ * Resolves a schema/manifest text prop pair — the `*Key` field wins over the
+ * literal protocol text, and the literal text is the last fallback before the
+ * key itself (frozen chain: 当前语种 → en-US → 字面文本 → key).
+ */
+export function resolveTextProp(props, keyProp, literalProp, t, fallback = "") {
+    if (props === undefined) {
+        return fallback;
+    }
+    const key = props[keyProp];
+    if (typeof key === "string" && key !== "") {
+        const literal = typeof props[literalProp] === "string" ? props[literalProp] : undefined;
+        return t(key, undefined, literal);
+    }
+    const literal = props[literalProp];
+    return typeof literal === "string" ? literal : fallback;
+}

package/i18n/format.d.ts

@@ -6,7 +6,7 @@
  * Formatting is fail-safe: invalid inputs render empty, invalid timezones
  * degrade to the locale's default zone instead of throwing.
  */
-import { type Locale } from "./locale";
+import { type Locale } from "./locale.js";
 export interface FormatOptions {
     /** IANA timezone name; omitted = the environment's default zone. */
     timeZone?: string;

package/i18n/format.js

@@ -0,0 +1,35 @@
+/**
+ * Locale-aware date/number formatting (S1 · C5).
+ *
+ * Formatting follows the effective locale through Intl.* — no custom format
+ * templates (VP-007: "首版不暴露任意日期/数字格式模板，随有效 locale").
+ * Formatting is fail-safe: invalid inputs render empty, invalid timezones
+ * degrade to the locale's default zone instead of throwing.
+ */
+import { DEFAULT_LOCALE } from "./locale.js";
+/** Formats a date value in the given locale. Returns "" for invalid input. */
+export function formatDate(value, locale = DEFAULT_LOCALE, options = {}) {
+    const date = value instanceof Date ? value : new Date(value);
+    if (!Number.isFinite(date.getTime())) {
+        return "";
+    }
+    const timeZone = options.timeZone !== undefined && options.timeZone !== "" ? options.timeZone : undefined;
+    try {
+        return new Intl.DateTimeFormat(locale, {
+            dateStyle: "medium",
+            timeStyle: "short",
+            ...(timeZone === undefined ? {} : { timeZone }),
+        }).format(date);
+    }
+    catch {
+        // Invalid IANA name — degrade to the default zone, never throw.
+        return new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" }).format(date);
+    }
+}
+/** Formats a finite number in the given locale. Returns "" for invalid input. */
+export function formatNumber(value, locale = DEFAULT_LOCALE, options = {}) {
+    if (typeof value !== "number" || !Number.isFinite(value)) {
+        return "";
+    }
+    return new Intl.NumberFormat(locale, options).format(value);
+}