@vantageos/mosaic 0.2.1 → 0.3.0-alpha.1

package/dist/react/input.js

@@ -1,3 +1,197 @@
+import { useId, useRef, useState } from 'react';
+import { z } from 'zod';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
+// src/runtimes/react/components/input/Tabs.tsx
+
+// src/components/input/Tabs.logic.ts
+function getNavKeys(orientation) {
+  return orientation === "horizontal" ? { prev: "ArrowLeft", next: "ArrowRight" } : { prev: "ArrowUp", next: "ArrowDown" };
+}
+function findNextEnabledIndex(tabs, currentIndex, direction) {
+  const len = tabs.length;
+  let i = (currentIndex + direction + len) % len;
+  for (let tries = 0; tries < len; tries++) {
+    if (!tabs[i]?.disabled) return i;
+    i = (i + direction + len) % len;
+  }
+  return currentIndex;
+}
+function findFirstEnabledIndex(tabs) {
+  const idx = tabs.findIndex((t) => !t.disabled);
+  return idx === -1 ? 0 : idx;
+}
+function findLastEnabledIndex(tabs) {
+  for (let i = tabs.length - 1; i >= 0; i--) {
+    if (!tabs[i]?.disabled) return i;
+  }
+  return tabs.length - 1;
+}
+function getTabId(instanceId, tabId) {
+  return `${instanceId}-tab-${tabId}`;
+}
+function getPanelId(instanceId, tabId) {
+  return `${instanceId}-panel-${tabId}`;
+}
+function resolveInitialActive(tabs, value, defaultValue) {
+  if (value !== void 0) {
+    const found = tabs.find((t) => t.id === value && !t.disabled);
+    if (found) return found.id;
+  }
+  if (defaultValue !== void 0) {
+    const found = tabs.find((t) => t.id === defaultValue && !t.disabled);
+    if (found) return found.id;
+  }
+  const firstEnabled = tabs.find((t) => !t.disabled);
+  return firstEnabled?.id ?? tabs[0]?.id ?? "";
+}
+function getTablistClasses(orientation) {
+  return orientation === "horizontal" ? "flex flex-row border-b border-slate-200" : "flex flex-col border-r border-slate-200 self-start";
+}
+function getTabClasses(isSelected, isDisabled, orientation) {
+  const base = "relative px-4 py-2 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 select-none";
+  const orientationCls = orientation === "horizontal" ? "border-b-2 -mb-px" : "border-r-2 -mr-px text-left";
+  const stateCls = isDisabled ? "text-slate-400 cursor-not-allowed border-transparent" : isSelected ? "border-blue-600 text-blue-700 bg-slate-50" : "border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300 hover:bg-slate-50";
+  return [base, orientationCls, stateCls].join(" ");
+}
+function getPanelClasses(orientation) {
+  return orientation === "horizontal" ? "pt-4" : "pl-4 flex-1";
+}
+function getRootClasses(orientation) {
+  return orientation === "horizontal" ? "flex flex-col" : "flex flex-row";
+}
+var TabItemSchema = z.object({
+  id: z.string().min(1),
+  label: z.string().min(1),
+  /** ReactNode / PreactNode — accepted as unknown at Zod layer (JSX not serialisable). */
+  content: z.unknown(),
+  disabled: z.boolean().optional().default(false)
+});
+var TabsPropsSchema = z.object({
+  tabs: z.array(TabItemSchema).min(1),
+  value: z.string().optional(),
+  defaultValue: z.string().optional(),
+  orientation: z.enum(["horizontal", "vertical"]).default("horizontal"),
+  locale: z.enum(["en", "fr"]).default("en")
+});
+function validateTabsProps(raw) {
+  return TabsPropsSchema.parse(raw);
+}
+function TabsInner({
+  tabs,
+  value: controlledValue,
+  defaultValue,
+  orientation,
+  onValueChange
+}) {
+  const instanceId = useId();
+  const tabButtonRefs = useRef(/* @__PURE__ */ new Map());
+  const isControlled = controlledValue !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    () => resolveInitialActive(tabs, controlledValue, defaultValue)
+  );
+  const activeId = isControlled ? controlledValue ?? resolveInitialActive(tabs, void 0, defaultValue) : internalValue;
+  function handleSelect(tabId) {
+    if (!isControlled) {
+      setInternalValue(tabId);
+    }
+    onValueChange?.(tabId);
+  }
+  function focusTabByIndex(index) {
+    const tab = tabs[index];
+    if (!tab) return;
+    const btn = tabButtonRefs.current.get(tab.id);
+    btn?.focus();
+    handleSelect(tab.id);
+  }
+  function handleKeyDown(e, currentIndex) {
+    const { prev, next } = getNavKeys(orientation);
+    switch (e.key) {
+      case next: {
+        e.preventDefault();
+        focusTabByIndex(findNextEnabledIndex(tabs, currentIndex, 1));
+        break;
+      }
+      case prev: {
+        e.preventDefault();
+        focusTabByIndex(findNextEnabledIndex(tabs, currentIndex, -1));
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        focusTabByIndex(findFirstEnabledIndex(tabs));
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        focusTabByIndex(findLastEnabledIndex(tabs));
+        break;
+      }
+    }
+  }
+  const rootCls = getRootClasses(orientation);
+  const tablistCls = getTablistClasses(orientation);
+  const panelCls = getPanelClasses(orientation);
+  return /* @__PURE__ */ jsxs("div", { className: rootCls, children: [
+    /* @__PURE__ */ jsx("div", { role: "tablist", "aria-orientation": orientation, className: tablistCls, children: tabs.map((tab, index) => {
+      const isSelected = tab.id === activeId;
+      const tabDomId = getTabId(instanceId, tab.id);
+      const panelDomId = getPanelId(instanceId, tab.id);
+      const isDisabled = tab.disabled ?? false;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          ref: (el) => {
+            tabButtonRefs.current.set(tab.id, el);
+          },
+          id: tabDomId,
+          type: "button",
+          role: "tab",
+          "aria-selected": isSelected,
+          "aria-controls": panelDomId,
+          "aria-disabled": isDisabled || void 0,
+          disabled: isDisabled,
+          tabIndex: isSelected ? 0 : -1,
+          className: getTabClasses(isSelected, isDisabled, orientation),
+          onClick: () => {
+            if (!isDisabled) handleSelect(tab.id);
+          },
+          onKeyDown: (e) => handleKeyDown(e, index),
+          children: tab.label
+        },
+        tab.id
+      );
+    }) }),
+    tabs.map((tab) => {
+      const isSelected = tab.id === activeId;
+      const tabDomId = getTabId(instanceId, tab.id);
+      const panelDomId = getPanelId(instanceId, tab.id);
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: panelDomId,
+          role: "tabpanel",
+          "aria-labelledby": tabDomId,
+          tabIndex: 0,
+          hidden: !isSelected,
+          className: panelCls,
+          children: tab.content
+        },
+        tab.id
+      );
+    })
+  ] });
+}
+function Tabs(raw) {
+  try {
+    const parsed = validateTabsProps(raw);
+    return /* @__PURE__ */ jsx(TabsInner, { ...parsed, onValueChange: raw.onValueChange });
+  } catch (err) {
+    console.error("[Tabs] Invalid props \u2014 component will not render.", err);
+    return null;
+  }
+}
+
+export { Tabs, TabsPropsSchema, validateTabsProps };
 //# sourceMappingURL=input.js.map
 //# sourceMappingURL=input.js.map

package/dist/react/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"input.js"}
+{"version":3,"sources":["../../src/components/input/Tabs.logic.ts","../../src/components/input/Tabs.schema.ts","../../src/runtimes/react/components/input/Tabs.tsx"],"names":[],"mappings":"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","file":"input.js","sourcesContent":["/**\n * Tabs.logic.ts — pure, framework-agnostic logic.\n * No JSX here — shared between React 19 and Preact 10 runtimes.\n *\n * WCAG-AA ARIA + roving tabindex spec:\n * - role=\"tablist\" on container\n * - role=\"tab\" + aria-selected + aria-controls on each button\n * - role=\"tabpanel\" + aria-labelledby on each panel\n * - Roving tabindex: active tab = tabIndex 0, all others = tabIndex -1\n * - ArrowLeft/Right (horizontal) or ArrowUp/Down (vertical) moves focus between tabs\n * - Home → first enabled tab, End → last enabled tab\n * - Tab key moves focus INTO the active panel content (no tabIndex manipulation needed — natural DOM order)\n * - Disabled tabs are skipped during keyboard nav\n */\n\nexport type TabOrientation = \"horizontal\" | \"vertical\";\n\n/**\n * Returns the prev/next key pair for the given orientation.\n */\nexport function getNavKeys(orientation: TabOrientation): {\n  prev: string;\n  next: string;\n} {\n  return orientation === \"horizontal\"\n    ? { prev: \"ArrowLeft\", next: \"ArrowRight\" }\n    : { prev: \"ArrowUp\", next: \"ArrowDown\" };\n}\n\n/**\n * Finds the next focusable (non-disabled) tab index in direction.\n * Wraps around at boundaries.\n */\nexport function findNextEnabledIndex(\n  tabs: Array<{ id: string; disabled?: boolean }>,\n  currentIndex: number,\n  direction: 1 | -1,\n): number {\n  const len = tabs.length;\n  let i = (currentIndex + direction + len) % len;\n  // Guard: prevent infinite loop if all tabs are disabled (shouldn't happen but defensive)\n  for (let tries = 0; tries < len; tries++) {\n    if (!tabs[i]?.disabled) return i;\n    i = (i + direction + len) % len;\n  }\n  return currentIndex;\n}\n\n/**\n * Finds the first enabled tab index.\n */\nexport function findFirstEnabledIndex(tabs: Array<{ id: string; disabled?: boolean }>): number {\n  const idx = tabs.findIndex((t) => !t.disabled);\n  return idx === -1 ? 0 : idx;\n}\n\n/**\n * Finds the last enabled tab index.\n */\nexport function findLastEnabledIndex(tabs: Array<{ id: string; disabled?: boolean }>): number {\n  for (let i = tabs.length - 1; i >= 0; i--) {\n    if (!tabs[i]?.disabled) return i;\n  }\n  return tabs.length - 1;\n}\n\n/**\n * Generates stable DOM IDs for tab + panel linking.\n */\nexport function getTabId(instanceId: string, tabId: string): string {\n  return `${instanceId}-tab-${tabId}`;\n}\n\nexport function getPanelId(instanceId: string, tabId: string): string {\n  return `${instanceId}-panel-${tabId}`;\n}\n\n/**\n * Resolves the initial active tab ID.\n * Priority: value (controlled) > defaultValue > first enabled tab.\n */\nexport function resolveInitialActive(\n  tabs: Array<{ id: string; disabled?: boolean }>,\n  value?: string,\n  defaultValue?: string,\n): string {\n  if (value !== undefined) {\n    const found = tabs.find((t) => t.id === value && !t.disabled);\n    if (found) return found.id;\n  }\n  if (defaultValue !== undefined) {\n    const found = tabs.find((t) => t.id === defaultValue && !t.disabled);\n    if (found) return found.id;\n  }\n  const firstEnabled = tabs.find((t) => !t.disabled);\n  return firstEnabled?.id ?? tabs[0]?.id ?? \"\";\n}\n\n/**\n * Tailwind class helpers for the tablist container.\n */\nexport function getTablistClasses(orientation: TabOrientation): string {\n  return orientation === \"horizontal\"\n    ? \"flex flex-row border-b border-slate-200\"\n    : \"flex flex-col border-r border-slate-200 self-start\";\n}\n\n/**\n * Tailwind class helpers for a single tab button.\n */\nexport function getTabClasses(\n  isSelected: boolean,\n  isDisabled: boolean,\n  orientation: TabOrientation,\n): string {\n  const base =\n    \"relative px-4 py-2 text-sm font-medium transition-colors focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 select-none\";\n\n  const orientationCls =\n    orientation === \"horizontal\" ? \"border-b-2 -mb-px\" : \"border-r-2 -mr-px text-left\";\n\n  const stateCls = isDisabled\n    ? \"text-slate-400 cursor-not-allowed border-transparent\"\n    : isSelected\n      ? \"border-blue-600 text-blue-700 bg-slate-50\"\n      : \"border-transparent text-slate-600 hover:text-slate-900 hover:border-slate-300 hover:bg-slate-50\";\n\n  return [base, orientationCls, stateCls].join(\" \");\n}\n\n/**\n * Tailwind class helpers for the tab panel wrapper.\n */\nexport function getPanelClasses(orientation: TabOrientation): string {\n  return orientation === \"horizontal\" ? \"pt-4\" : \"pl-4 flex-1\";\n}\n\n/**\n * Tailwind class helpers for the root container.\n */\nexport function getRootClasses(orientation: TabOrientation): string {\n  return orientation === \"horizontal\" ? \"flex flex-col\" : \"flex flex-row\";\n}\n","import { z } from \"zod\";\n\n// i18nKeys: Tabs.error.invalidProps\n\n/**\n * Tabs component props schema.\n *\n * Supports controlled (value + onValueChange) and uncontrolled (defaultValue) modes.\n * orientation — \"horizontal\" (default) or \"vertical\" — affects ArrowLeft/Right vs ArrowUp/Down nav.\n * tabs — ordered list of tab descriptors (id must be unique within the instance).\n */\nexport const TabItemSchema = z.object({\n  id: z.string().min(1),\n  label: z.string().min(1),\n  /** ReactNode / PreactNode — accepted as unknown at Zod layer (JSX not serialisable). */\n  content: z.unknown(),\n  disabled: z.boolean().optional().default(false),\n});\n\nexport type TabItem = z.infer<typeof TabItemSchema>;\n\nexport const TabsPropsSchema = z.object({\n  tabs: z.array(TabItemSchema).min(1),\n  value: z.string().optional(),\n  defaultValue: z.string().optional(),\n  orientation: z.enum([\"horizontal\", \"vertical\"]).default(\"horizontal\"),\n  locale: z.enum([\"en\", \"fr\"]).default(\"en\"),\n});\n\n/** Runtime props — onValueChange is a function (not serialisable via Zod, kept outside schema). */\nexport type TabsProps = z.infer<typeof TabsPropsSchema> & {\n  onValueChange?: (id: string) => void;\n};\n\nexport function validateTabsProps(raw: unknown): z.infer<typeof TabsPropsSchema> {\n  return TabsPropsSchema.parse(raw);\n}\n","\"use client\";\n\n// i18nKeys: Tabs.error.invalidProps\n\nimport { type KeyboardEvent, useId, useRef, useState } from \"react\";\nimport {\n  findFirstEnabledIndex,\n  findLastEnabledIndex,\n  findNextEnabledIndex,\n  getNavKeys,\n  getPanelClasses,\n  getPanelId,\n  getRootClasses,\n  getTabClasses,\n  getTabId,\n  getTablistClasses,\n  resolveInitialActive,\n} from \"../../../../components/input/Tabs.logic.js\";\nimport {\n  type TabItem,\n  type TabsProps,\n  validateTabsProps,\n} from \"../../../../components/input/Tabs.schema.js\";\n\n// ─── Inner component (validated props) ────────────────────────────────────────\n\nfunction TabsInner({\n  tabs,\n  value: controlledValue,\n  defaultValue,\n  orientation,\n  onValueChange,\n}: TabsProps) {\n  const instanceId = useId();\n  const tabButtonRefs = useRef<Map<string, HTMLButtonElement | null>>(new Map());\n\n  const isControlled = controlledValue !== undefined;\n\n  const [internalValue, setInternalValue] = useState<string>(() =>\n    resolveInitialActive(tabs, controlledValue, defaultValue),\n  );\n\n  const activeId = isControlled\n    ? (controlledValue ?? resolveInitialActive(tabs, undefined, defaultValue))\n    : internalValue;\n\n  function handleSelect(tabId: string) {\n    if (!isControlled) {\n      setInternalValue(tabId);\n    }\n    onValueChange?.(tabId);\n  }\n\n  function focusTabByIndex(index: number) {\n    const tab = tabs[index];\n    if (!tab) return;\n    const btn = tabButtonRefs.current.get(tab.id);\n    btn?.focus();\n    handleSelect(tab.id);\n  }\n\n  function handleKeyDown(e: KeyboardEvent<HTMLButtonElement>, currentIndex: number) {\n    const { prev, next } = getNavKeys(orientation);\n\n    switch (e.key) {\n      case next: {\n        e.preventDefault();\n        focusTabByIndex(findNextEnabledIndex(tabs, currentIndex, 1));\n        break;\n      }\n      case prev: {\n        e.preventDefault();\n        focusTabByIndex(findNextEnabledIndex(tabs, currentIndex, -1));\n        break;\n      }\n      case \"Home\": {\n        e.preventDefault();\n        focusTabByIndex(findFirstEnabledIndex(tabs));\n        break;\n      }\n      case \"End\": {\n        e.preventDefault();\n        focusTabByIndex(findLastEnabledIndex(tabs));\n        break;\n      }\n    }\n  }\n\n  const rootCls = getRootClasses(orientation);\n  const tablistCls = getTablistClasses(orientation);\n  const panelCls = getPanelClasses(orientation);\n\n  return (\n    <div className={rootCls}>\n      {/* Tab list */}\n      <div role=\"tablist\" aria-orientation={orientation} className={tablistCls}>\n        {tabs.map((tab: TabItem, index: number) => {\n          const isSelected = tab.id === activeId;\n          const tabDomId = getTabId(instanceId, tab.id);\n          const panelDomId = getPanelId(instanceId, tab.id);\n          const isDisabled = tab.disabled ?? false;\n\n          return (\n            <button\n              key={tab.id}\n              ref={(el) => {\n                tabButtonRefs.current.set(tab.id, el);\n              }}\n              id={tabDomId}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={panelDomId}\n              aria-disabled={isDisabled || undefined}\n              disabled={isDisabled}\n              tabIndex={isSelected ? 0 : -1}\n              className={getTabClasses(isSelected, isDisabled, orientation)}\n              onClick={() => {\n                if (!isDisabled) handleSelect(tab.id);\n              }}\n              onKeyDown={(e) => handleKeyDown(e, index)}\n            >\n              {tab.label}\n            </button>\n          );\n        })}\n      </div>\n\n      {/* Tab panels — tabIndex={0} required by WAI-ARIA Tabs pattern for keyboard focus entry */}\n      {tabs.map((tab: TabItem) => {\n        const isSelected = tab.id === activeId;\n        const tabDomId = getTabId(instanceId, tab.id);\n        const panelDomId = getPanelId(instanceId, tab.id);\n\n        return (\n          <div\n            key={tab.id}\n            id={panelDomId}\n            role=\"tabpanel\"\n            aria-labelledby={tabDomId}\n            // biome-ignore lint/a11y/noNoninteractiveTabindex: WAI-ARIA Tabs pattern requires tabIndex=0 on tabpanel to allow Tab key entry into panel content\n            tabIndex={0}\n            hidden={!isSelected}\n            className={panelCls}\n          >\n            {tab.content as React.ReactNode}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n// ─── Public export with Zod guard ─────────────────────────────────────────────\n\n/**\n * Tabs — cross-runtime tab navigation component.\n *\n * Supports controlled (value + onValueChange) and uncontrolled (defaultValue) modes.\n * WCAG-AA: role=tablist/tab/tabpanel, aria-selected, aria-controls, aria-labelledby,\n * roving tabindex, ArrowLeft/Right/Up/Down, Home/End keyboard navigation.\n */\nexport function Tabs(raw: Record<string, unknown>) {\n  try {\n    const parsed = validateTabsProps(raw);\n    return <TabsInner {...parsed} onValueChange={(raw as TabsProps).onValueChange} />;\n  } catch (err) {\n    console.error(\"[Tabs] Invalid props — component will not render.\", err);\n    return null;\n  }\n}\n"]}

package/dist/tokens.d.cts

@@ -0,0 +1,35 @@
+/**
+ * @vantageos/mosaic-tokens — design tokens (T3-B implementation).
+ *
+ * Framework-free, OKLCH-based, mirror of the CSS custom properties in
+ * tokens.css. Consumers can opt for either the CSS surface (Tailwind v4
+ * + @theme inline) or the JS surface (typed runtime access in JSX styles,
+ * Storybook stories, Playwright assertions, snapshot tests).
+ *
+ * Size targets (.size-limit.json): JS bundle ≤5 KB gz, CSS ≤3 KB gz.
+ *
+ * Schema invariants (enforced by mosaic-tokens-coherence-test in T3-C):
+ *   - Every CSS var has a JS counterpart (and vice versa).
+ *   - Color shades 50 < 500 < 700 monotonic luminance.
+ *   - Spacing scale ascending, ratio 1.5x average (4 → 64 px).
+ *   - Typography scale uses 1.25x ratio (12 → 38 px).
+ *   - Shadow elevation 0 < 1 < 2 < 3 < 4 < 5 monotonic blur radius.
+ *   - Radii strictly ascending (none → full).
+ */
+interface MosaicTokens {
+    readonly colors: Readonly<Record<string, string>>;
+    readonly spacing: Readonly<Record<string, string>>;
+    readonly typography: Readonly<Record<string, string>>;
+    readonly shadows: Readonly<Record<string, string>>;
+    readonly radii: Readonly<Record<string, string>>;
+    readonly motion: Readonly<Record<string, string>>;
+}
+declare const colors: MosaicTokens["colors"];
+declare const spacing: MosaicTokens["spacing"];
+declare const typography: MosaicTokens["typography"];
+declare const shadows: MosaicTokens["shadows"];
+declare const radii: MosaicTokens["radii"];
+declare const motion: MosaicTokens["motion"];
+declare const tokens: MosaicTokens;
+
+export { type MosaicTokens, colors, tokens as default, motion, radii, shadows, spacing, tokens, typography };

package/dist/tokens.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @vantageos/mosaic-tokens — design tokens (T3-B implementation).
+ *
+ * Framework-free, OKLCH-based, mirror of the CSS custom properties in
+ * tokens.css. Consumers can opt for either the CSS surface (Tailwind v4
+ * + @theme inline) or the JS surface (typed runtime access in JSX styles,
+ * Storybook stories, Playwright assertions, snapshot tests).
+ *
+ * Size targets (.size-limit.json): JS bundle ≤5 KB gz, CSS ≤3 KB gz.
+ *
+ * Schema invariants (enforced by mosaic-tokens-coherence-test in T3-C):
+ *   - Every CSS var has a JS counterpart (and vice versa).
+ *   - Color shades 50 < 500 < 700 monotonic luminance.
+ *   - Spacing scale ascending, ratio 1.5x average (4 → 64 px).
+ *   - Typography scale uses 1.25x ratio (12 → 38 px).
+ *   - Shadow elevation 0 < 1 < 2 < 3 < 4 < 5 monotonic blur radius.
+ *   - Radii strictly ascending (none → full).
+ */
+interface MosaicTokens {
+    readonly colors: Readonly<Record<string, string>>;
+    readonly spacing: Readonly<Record<string, string>>;
+    readonly typography: Readonly<Record<string, string>>;
+    readonly shadows: Readonly<Record<string, string>>;
+    readonly radii: Readonly<Record<string, string>>;
+    readonly motion: Readonly<Record<string, string>>;
+}
+declare const colors: MosaicTokens["colors"];
+declare const spacing: MosaicTokens["spacing"];
+declare const typography: MosaicTokens["typography"];
+declare const shadows: MosaicTokens["shadows"];
+declare const radii: MosaicTokens["radii"];
+declare const motion: MosaicTokens["motion"];
+declare const tokens: MosaicTokens;
+
+export { type MosaicTokens, colors, tokens as default, motion, radii, shadows, spacing, tokens, typography };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vantageos/mosaic",
-  "version": "0.2.1",
+  "version": "0.3.0-alpha.1",
   "description": "Fleet-wide MCP UI design system — 6-category taxonomy, Zod-validated, registry-gated, streaming-ready, cross-runtime (React 19 + Preact 10).",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -8,112 +8,126 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs"
     },
     "./progress": {
+      "types": "./dist/progress.d.ts",
       "import": "./dist/progress.js",
-      "require": "./dist/progress.cjs",
-      "types": "./dist/progress.d.ts"
+      "require": "./dist/progress.cjs"
     },
     "./input": {
+      "types": "./dist/input.d.ts",
       "import": "./dist/input.js",
-      "require": "./dist/input.cjs",
-      "types": "./dist/input.d.ts"
+      "require": "./dist/input.cjs"
     },
     "./display": {
+      "types": "./dist/display.d.ts",
       "import": "./dist/display.js",
-      "require": "./dist/display.cjs",
-      "types": "./dist/display.d.ts"
+      "require": "./dist/display.cjs"
     },
     "./artifacts": {
+      "types": "./dist/artifacts.d.ts",
       "import": "./dist/artifacts.js",
-      "require": "./dist/artifacts.cjs",
-      "types": "./dist/artifacts.d.ts"
+      "require": "./dist/artifacts.cjs"
     },
     "./confirmation": {
+      "types": "./dist/confirmation.d.ts",
       "import": "./dist/confirmation.js",
-      "require": "./dist/confirmation.cjs",
-      "types": "./dist/confirmation.d.ts"
+      "require": "./dist/confirmation.cjs"
     },
     "./media": {
+      "types": "./dist/media.d.ts",
       "import": "./dist/media.js",
-      "require": "./dist/media.cjs",
-      "types": "./dist/media.d.ts"
+      "require": "./dist/media.cjs"
+    },
+    "./forms": {
+      "types": "./dist/forms.d.ts",
+      "import": "./dist/forms.js",
+      "require": "./dist/forms.cjs"
     },
     "./react": {
+      "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js",
-      "require": "./dist/react/index.cjs",
-      "types": "./dist/react/index.d.ts"
+      "require": "./dist/react/index.cjs"
     },
     "./react/progress": {
+      "types": "./dist/react/progress.d.ts",
       "import": "./dist/react/progress.js",
-      "require": "./dist/react/progress.cjs",
-      "types": "./dist/react/progress.d.ts"
+      "require": "./dist/react/progress.cjs"
     },
     "./react/input": {
+      "types": "./dist/react/input.d.ts",
       "import": "./dist/react/input.js",
-      "require": "./dist/react/input.cjs",
-      "types": "./dist/react/input.d.ts"
+      "require": "./dist/react/input.cjs"
     },
     "./react/display": {
+      "types": "./dist/react/display.d.ts",
       "import": "./dist/react/display.js",
-      "require": "./dist/react/display.cjs",
-      "types": "./dist/react/display.d.ts"
+      "require": "./dist/react/display.cjs"
     },
     "./react/artifacts": {
+      "types": "./dist/react/artifacts.d.ts",
       "import": "./dist/react/artifacts.js",
-      "require": "./dist/react/artifacts.cjs",
-      "types": "./dist/react/artifacts.d.ts"
+      "require": "./dist/react/artifacts.cjs"
     },
     "./react/confirmation": {
+      "types": "./dist/react/confirmation.d.ts",
       "import": "./dist/react/confirmation.js",
-      "require": "./dist/react/confirmation.cjs",
-      "types": "./dist/react/confirmation.d.ts"
+      "require": "./dist/react/confirmation.cjs"
     },
     "./react/media": {
+      "types": "./dist/react/media.d.ts",
       "import": "./dist/react/media.js",
-      "require": "./dist/react/media.cjs",
-      "types": "./dist/react/media.d.ts"
+      "require": "./dist/react/media.cjs"
+    },
+    "./react/forms": {
+      "types": "./dist/react/forms.d.ts",
+      "import": "./dist/react/forms.js",
+      "require": "./dist/react/forms.cjs"
     },
     "./preact": {
-      "import": "./dist/preact/index.js",
-      "types": "./dist/preact/index.d.ts"
+      "types": "./dist/preact/index.d.ts",
+      "import": "./dist/preact/index.js"
     },
     "./preact/progress": {
-      "import": "./dist/preact/progress.js",
-      "types": "./dist/preact/progress.d.ts"
+      "types": "./dist/preact/progress.d.ts",
+      "import": "./dist/preact/progress.js"
     },
     "./preact/input": {
-      "import": "./dist/preact/input.js",
-      "types": "./dist/preact/input.d.ts"
+      "types": "./dist/preact/input.d.ts",
+      "import": "./dist/preact/input.js"
     },
     "./preact/display": {
-      "import": "./dist/preact/display.js",
-      "types": "./dist/preact/display.d.ts"
+      "types": "./dist/preact/display.d.ts",
+      "import": "./dist/preact/display.js"
     },
     "./preact/artifacts": {
-      "import": "./dist/preact/artifacts.js",
-      "types": "./dist/preact/artifacts.d.ts"
+      "types": "./dist/preact/artifacts.d.ts",
+      "import": "./dist/preact/artifacts.js"
     },
     "./preact/confirmation": {
-      "import": "./dist/preact/confirmation.js",
-      "types": "./dist/preact/confirmation.d.ts"
+      "types": "./dist/preact/confirmation.d.ts",
+      "import": "./dist/preact/confirmation.js"
     },
     "./preact/media": {
-      "import": "./dist/preact/media.js",
-      "types": "./dist/preact/media.d.ts"
+      "types": "./dist/preact/media.d.ts",
+      "import": "./dist/preact/media.js"
+    },
+    "./preact/forms": {
+      "types": "./dist/preact/forms.d.ts",
+      "import": "./dist/preact/forms.js"
     },
     "./tokens": {
+      "types": "./dist/tokens.d.ts",
       "import": "./dist/tokens.js",
-      "require": "./dist/tokens.cjs",
-      "types": "./dist/tokens.d.ts"
+      "require": "./dist/tokens.cjs"
     },
     "./server": {
+      "types": "./dist/server.d.ts",
       "import": "./dist/server.js",
-      "require": "./dist/server.cjs",
-      "types": "./dist/server.d.ts"
+      "require": "./dist/server.cjs"
     },
     "./registry.yaml": "./registry.yaml"
   },
@@ -124,14 +138,19 @@
   ],
   "sideEffects": false,
   "peerDependencies": {
+    "@hookform/resolvers": "^3.10.0",
     "@mcp-ui/client": "7.1.1",
     "preact": "^10.25.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-hook-form": "^7.54.0",
     "react-i18next": "15.5.2",
     "rxjs": "^7.8.0"
   },
   "peerDependenciesMeta": {
+    "@hookform/resolvers": {
+      "optional": true
+    },
     "@mcp-ui/client": {
       "optional": true
     },
@@ -144,6 +163,9 @@
     "react-dom": {
       "optional": true
     },
+    "react-hook-form": {
+      "optional": true
+    },
     "react-i18next": {
       "optional": true
     },
@@ -161,11 +183,11 @@
     "@vantageos/mosaic-tokens": "0.2.0"
   },
   "devDependencies": {
+    "@axe-core/playwright": "4.10.1",
     "@babel/parser": "7.29.7",
     "@babel/traverse": "7.29.7",
-    "@types/babel__traverse": "7.28.0",
-    "@axe-core/playwright": "4.10.1",
     "@biomejs/biome": "1.9.4",
+    "@hookform/resolvers": "^3.10.0",
     "@playwright/test": "1.50.1",
     "@size-limit/preset-small-lib": "11.2.0",
     "@storybook/builder-vite": "8.6.18",
@@ -175,6 +197,7 @@
     "@tailwindcss/vite": "4.1.8",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
+    "@types/babel__traverse": "7.28.0",
     "@types/dompurify": "3.0.5",
     "@types/react": "19.1.0",
     "@types/react-dom": "19.1.0",
@@ -184,6 +207,7 @@
     "preact": "10.27.1",
     "react": "19.1.0",
     "react-dom": "19.1.0",
+    "react-hook-form": "^7.54.0",
     "size-limit": "11.2.0",
     "storybook": "8.6.18",
     "tailwindcss": "4.1.8",
@@ -194,6 +218,7 @@
     "vitest": "3.2.2"
   },
   "scripts": {
+    "prebuild": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
     "build": "tsup",
     "dev": "tsup --watch",
     "test": "vitest run",