@tempots/beatui 1.7.4 → 1.9.0

package/dist/openui/index.es.js

@@ -0,0 +1,2174 @@
+import { z as t } from "zod";
+import { html as z, attr as x, prop as p, style as X, Empty as A, Fragment as Y, makeProviderMark as ee, Provide as Z, WithCtx as te, Value as B, renderableOfTNode as W, renderWithContext as _, OnDispose as ne } from "@tempots/dom";
+import { S as oe, E as ae, M as ie, D as re, L as se } from "../stack-BLMteGTn.js";
+import { G as le, a as ce, T as ue, b as de, S as me } from "../text-area-Br83-_PQ.js";
+import { C as pe } from "../card-DX1DwGbL.js";
+import { G as K, D as be, A as ge, C as he, a as fe, T as ye, b as ve, c as we, S as ze, d as Se, e as Ce, f as je, B as ke, g as Ae, h as V, i as xe, j as Te, P as Ie, k as Le, I as Oe, H as Pe, R as Fe, l as De, m as Ee, O as Be, n as Ne, o as Me, p as Re, q as $e, r as Ge, s as Ze, t as We, u as _e, v as Ke, w as Ve, x as Ue, F as He, y as qe, z as Je, E as Qe, J as Xe, K as Ye, L as et } from "../stepper-TlzbfYWa.js";
+import { B as j } from "../input-container-DCS5oJ4S.js";
+import { C as tt, b as nt } from "../control-hqEuMzyI.js";
+import { I as ot } from "../translations-DU9wTV1y.js";
+import { T as at } from "../text-input-ByuxdX8w.js";
+import { P as it, E as rt } from "../password-input-mkRmrEPq.js";
+import { S as st, R as lt, a as ct } from "../slider-input-VYAMm7pE.js";
+import { M as ut } from "../modal-6Mq3vS5r.js";
+function dt(e) {
+  const n = e.split(`
+`), a = [];
+  let o = "";
+  for (const i of n) {
+    const r = i.trimEnd();
+    if (o === "" && r.trim() === "")
+      continue;
+    if (o !== "" ? o += `
+` + r : o = r, mt(o) <= 0) {
+      const s = o.trim();
+      s !== "" && a.push(s), o = "";
+    }
+  }
+  return o.trim() !== "" && a.push(o.trim()), a;
+}
+function mt(e) {
+  let n = 0, a = !1, o = 0;
+  for (; o < e.length; ) {
+    const i = e[o];
+    if (a) {
+      if (i === "\\") {
+        o += 2;
+        continue;
+      }
+      i === '"' && (a = !1);
+    } else
+      i === '"' ? a = !0 : i === "(" || i === "[" || i === "{" ? n++ : (i === ")" || i === "]" || i === "}") && n--;
+    o++;
+  }
+  return n;
+}
+function H(e) {
+  return (n) => pt(n, e);
+}
+function pt(e, n) {
+  const a = dt(e), o = /* @__PURE__ */ new Map(), i = [], r = /* @__PURE__ */ new Set(), c = /* @__PURE__ */ new Set(), s = e.split(`
+`);
+  let u = 0;
+  for (let d = 0; d < a.length; d++) {
+    const m = a[d], g = m.split(`
+`)[0].trim();
+    for (; u < s.length && !s[u].trim().startsWith(g.slice(0, 20)); )
+      u++;
+    const h = u + 1, f = m.indexOf("=");
+    if (f === -1) {
+      i.push({
+        line: h,
+        message: `Malformed statement (no '='): ${m}`,
+        code: "syntax"
+      }), u++;
+      continue;
+    }
+    const y = m.slice(0, f).trim(), S = m.slice(f + 1).trim();
+    if (!bt(y)) {
+      i.push({
+        line: h,
+        message: `Invalid identifier: '${y}'`,
+        code: "syntax"
+      }), u++;
+      continue;
+    }
+    let G;
+    try {
+      G = E(
+        S,
+        c,
+        i,
+        h,
+        n
+      );
+    } catch {
+      i.push({
+        line: h,
+        message: `Failed to parse expression: ${S}`,
+        code: "syntax"
+      }), u++;
+      continue;
+    }
+    r.add(y), o.set(y, { value: G }), u++;
+  }
+  const b = [...c].filter((d) => !r.has(d));
+  return {
+    root: o.has("root") ? o.get("root").value : null,
+    statements: o,
+    meta: {
+      incomplete: !1,
+      unresolved: b,
+      statementCount: o.size,
+      errors: i
+    }
+  };
+}
+function bt(e) {
+  return /^[a-zA-Z_][a-zA-Z0-9_]*$/.test(e);
+}
+function E(e, n, a, o, i) {
+  if (e = e.trim(), e === "null")
+    return { type: "null" };
+  if (e === "true")
+    return { type: "boolean", value: !0 };
+  if (e === "false")
+    return { type: "boolean", value: !1 };
+  if (e.startsWith('"'))
+    return gt(e);
+  if (/^-?\d/.test(e) || /^-?\.\d/.test(e)) {
+    const r = Number(e);
+    if (!isNaN(r))
+      return { type: "number", value: r };
+  }
+  if (e.startsWith("["))
+    return ht(e, n, a, o, i);
+  if (e.startsWith("{"))
+    return ft(e, n, a, o, i);
+  if (/^[A-Z]/.test(e) && e.includes("("))
+    return vt(e, n, a, o, i);
+  if (/^[a-z_]/.test(e)) {
+    const r = e;
+    return n.add(r), { type: "reference", name: r };
+  }
+  if (/^[A-Z][a-zA-Z0-9_]*$/.test(e)) {
+    const r = e;
+    return i && !i.has(r) && a.push({
+      line: o,
+      message: `Unknown component: '${r}'`,
+      code: "unknown-component"
+    }), { type: "component", name: r, args: [] };
+  }
+  throw new Error(`Cannot parse expression: ${e}`);
+}
+function gt(e) {
+  if (!e.startsWith('"') || !e.endsWith('"'))
+    throw new Error(`Malformed string: ${e}`);
+  return { type: "string", value: e.slice(1, -1).replace(
+    /\\(["\\/bfnrt]|u[0-9a-fA-F]{4})/g,
+    (o, i) => {
+      switch (i[0]) {
+        case '"':
+          return '"';
+        case "\\":
+          return "\\";
+        case "/":
+          return "/";
+        case "b":
+          return "\b";
+        case "f":
+          return "\f";
+        case "n":
+          return `
+`;
+        case "r":
+          return "\r";
+        case "t":
+          return "	";
+        case "u":
+          return String.fromCharCode(parseInt(i.slice(1), 16));
+        default:
+          return i;
+      }
+    }
+  ) };
+}
+function $(e) {
+  const n = [];
+  let a = 0, o = !1, i = 0, r = 0;
+  for (; r < e.length; ) {
+    const s = e[r];
+    if (o) {
+      if (s === "\\") {
+        r += 2;
+        continue;
+      }
+      s === '"' && (o = !1);
+    } else
+      s === '"' ? o = !0 : s === "(" || s === "[" || s === "{" ? a++ : s === ")" || s === "]" || s === "}" ? a-- : s === "," && a === 0 && (n.push(e.slice(i, r).trim()), i = r + 1);
+    r++;
+  }
+  const c = e.slice(i).trim();
+  return c !== "" && n.push(c), n;
+}
+function ht(e, n, a, o, i) {
+  const r = e.slice(1, -1).trim();
+  return r === "" ? { type: "array", items: [] } : { type: "array", items: $(r).map(
+    (u) => E(u, n, a, o, i)
+  ) };
+}
+function ft(e, n, a, o, i) {
+  const r = e.slice(1, -1).trim();
+  if (r === "")
+    return { type: "object", entries: {} };
+  const c = $(r), s = {};
+  for (const u of c) {
+    const b = yt(u);
+    if (b === -1)
+      throw new Error(`Malformed object entry: ${u}`);
+    const v = u.slice(0, b).trim(), d = u.slice(b + 1).trim();
+    s[v] = E(
+      d,
+      n,
+      a,
+      o,
+      i
+    );
+  }
+  return { type: "object", entries: s };
+}
+function yt(e) {
+  let n = 0, a = !1, o = 0;
+  for (; o < e.length; ) {
+    const i = e[o];
+    if (a) {
+      if (i === "\\") {
+        o += 2;
+        continue;
+      }
+      i === '"' && (a = !1);
+    } else if (i === '"')
+      a = !0;
+    else if (i === "(" || i === "[" || i === "{")
+      n++;
+    else if (i === ")" || i === "]" || i === "}")
+      n--;
+    else if (i === ":" && n === 0)
+      return o;
+    o++;
+  }
+  return -1;
+}
+function vt(e, n, a, o, i) {
+  const r = e.indexOf("("), c = e.slice(0, r).trim();
+  i && !i.has(c) && a.push({
+    line: o,
+    message: `Unknown component: '${c}'`,
+    code: "unknown-component"
+  });
+  const s = e.slice(r + 1, -1).trim();
+  if (s === "")
+    return { type: "component", name: c, args: [] };
+  const b = $(s).map(
+    (v) => E(v, n, a, o, i)
+  );
+  return { type: "component", name: c, args: b };
+}
+function Vt(e) {
+  const n = H(e);
+  let a = "", o = {
+    root: null,
+    statements: /* @__PURE__ */ new Map(),
+    meta: {
+      incomplete: !0,
+      unresolved: [],
+      statementCount: 0,
+      errors: []
+    }
+  };
+  return {
+    push(i) {
+      return a += i, o = n(a), o;
+    },
+    getResult() {
+      return o;
+    }
+  };
+}
+function l(e) {
+  return Object.freeze({
+    name: e.name,
+    props: e.props,
+    description: e.description,
+    renderer: e.renderer
+  });
+}
+function q(e) {
+  return e._def ?? {};
+}
+function k(e) {
+  const n = q(e);
+  if (!n.type) return "unknown";
+  const a = n.type ?? "unknown";
+  switch (a) {
+    case "string":
+      return "string";
+    case "number":
+    case "int":
+      return "number";
+    case "boolean":
+      return "boolean";
+    case "bigint":
+      return "bigint";
+    case "null":
+      return "null";
+    case "undefined":
+      return "undefined";
+    case "any":
+    case "unknown":
+      return a;
+    case "enum": {
+      const o = n.entries;
+      return o && typeof o == "object" ? Object.values(o).map((r) => JSON.stringify(r)).join(" | ") : "enum";
+    }
+    case "literal": {
+      const o = n.value;
+      return JSON.stringify(o);
+    }
+    case "optional": {
+      const o = n.innerType;
+      return o ? `${k(o)} | undefined` : "optional";
+    }
+    case "nullable": {
+      const o = n.innerType;
+      return o ? `${k(o)} | null` : "nullable";
+    }
+    case "array": {
+      const o = n.element;
+      return o ? `${k(o)}[]` : "array";
+    }
+    case "object":
+      return "object";
+    case "union": {
+      const o = n.options;
+      return Array.isArray(o) ? o.map((i) => k(i)).join(" | ") : "union";
+    }
+    case "record":
+      return "record";
+    case "map":
+      return "map";
+    case "set":
+      return "set";
+    case "tuple":
+      return "tuple";
+    case "date":
+      return "Date";
+    case "transform":
+    case "pipe": {
+      const o = n.innerType ?? n.in;
+      return o ? k(o) : a;
+    }
+    default:
+      return a;
+  }
+}
+function N(e) {
+  const n = [];
+  n.push(`### ${e.name}`), n.push(""), n.push(e.description), n.push("");
+  const a = e.props.shape, o = Object.entries(a);
+  if (o.length > 0) {
+    n.push("**Props** (named, all optional unless marked):");
+    for (const [i, r] of o) {
+      const c = k(r), b = q(r)?.type === "optional" || !1 ? "?" : "";
+      n.push(`- \`${i}${b}\`: ${c}`);
+    }
+  } else
+    n.push("No props.");
+  return n.join(`
+`);
+}
+function wt(e, n, a) {
+  const o = [];
+  if (o.push("# OpenUI Lang System Prompt"), o.push(""), o.push("## Syntax"), o.push(""), o.push(
+    "OpenUI Lang uses a simple declarative syntax where each statement takes the form:"
+  ), o.push(""), o.push("```"), o.push("identifier = Expression"), o.push("```"), o.push(""), o.push(
+    "Components accept named props as an object. Only include the props you need — all are optional unless noted:"
+  ), o.push(""), o.push("```"), o.push(
+    'btn = Button({label: "Click Me", variant: "filled", color: "primary"})'
+  ), o.push('card = Card({title: "Hello", content: "World"})'), o.push(
+    "layout = Stack([child1, child2])  // children array for layout components"
+  ), o.push("```"), o.push(""), o.push(
+    "Components are instantiated by name with positional arguments matching their prop order."
+  ), o.push(
+    "Children are nested inside component blocks using indentation or braces."
+  ), o.push(""), o.push("## Available Components"), o.push(""), n && n.length > 0) {
+    const i = new Set(n.flatMap((c) => c.components));
+    for (const c of n) {
+      o.push(`### Group: ${c.name}`), o.push(""), o.push(c.description), o.push("");
+      for (const s of c.components) {
+        const u = e.get(s);
+        u && (o.push(N(u)), o.push(""));
+      }
+    }
+    const r = [...e.values()].filter(
+      (c) => !i.has(c.name)
+    );
+    if (r.length > 0) {
+      o.push("### Other Components"), o.push("");
+      for (const c of r)
+        o.push(N(c)), o.push("");
+    }
+  } else
+    for (const i of e.values())
+      o.push(N(i)), o.push("");
+  if (o.push("## Rules"), o.push(""), o.push(
+    "- Always pass props as a named object: `Component({key: value, ...})`"
+  ), o.push(
+    "- Only include the props you need — omit optional ones for defaults."
+  ), o.push(
+    "- Layout components take children as an array: `Stack([child1, child2])`"
+  ), o.push(
+    "- Use references for composition: `root = Stack([header, content])`"
+  ), o.push("- Do not invent component names not listed above."), a?.additionalRules && a.additionalRules.length > 0)
+    for (const i of a.additionalRules)
+      o.push(`- ${i}`);
+  return o.join(`
+`);
+}
+function J(e) {
+  return e?._def ?? {};
+}
+function zt(e) {
+  const n = /* @__PURE__ */ new Map();
+  for (const a of e)
+    n.set(a.name, a);
+  return n;
+}
+function St(e) {
+  try {
+    return t.toJSONSchema(e.props);
+  } catch {
+    const n = {}, a = [];
+    for (const [i, r] of Object.entries(e.props.shape)) {
+      const c = J(r), s = c.type === "optional";
+      s || a.push(i);
+      const u = s && c.innerType ? c.innerType : r;
+      n[i] = O(u);
+    }
+    const o = {
+      type: "object",
+      properties: n
+    };
+    return a.length > 0 && (o.required = a), o;
+  }
+}
+function O(e) {
+  const n = J(e);
+  if (!n.type) return {};
+  switch (n.type) {
+    case "string":
+      return { type: "string" };
+    case "number":
+    case "int":
+      return { type: "number" };
+    case "boolean":
+      return { type: "boolean" };
+    case "bigint":
+      return { type: "integer" };
+    case "null":
+      return { type: "null" };
+    case "array":
+      return {
+        type: "array",
+        items: n.element ? O(n.element) : {}
+      };
+    case "object": {
+      const a = {};
+      if (n.shape)
+        for (const [o, i] of Object.entries(n.shape))
+          a[o] = O(i);
+      return { type: "object", properties: a };
+    }
+    case "enum":
+      return n.entries && typeof n.entries == "object" ? { enum: Object.values(n.entries) } : { type: "string" };
+    case "literal":
+      return { const: n.value };
+    case "optional":
+    case "nullable":
+      return n.innerType ? O(n.innerType) : {};
+    case "union":
+      return Array.isArray(n.options) ? { oneOf: n.options.map(O) } : {};
+    default:
+      return {};
+  }
+}
+function Q(e) {
+  const n = zt(e.components), a = e.root, o = e.groups;
+  return {
+    get components() {
+      return n;
+    },
+    get root() {
+      return a;
+    },
+    get(r) {
+      return n.get(r);
+    },
+    has(r) {
+      return n.has(r);
+    },
+    prompt(r) {
+      const c = r?.groups ?? o;
+      return wt(n, c, r);
+    },
+    toJSONSchema() {
+      const r = {};
+      for (const [c, s] of n)
+        r[c] = St(s);
+      return r;
+    },
+    extend(r) {
+      const c = new Map(n);
+      if (r.components)
+        for (const s of r.components)
+          c.set(s.name, s);
+      return Q({
+        components: [...c.values()],
+        root: r.root ?? a,
+        groups: o
+      });
+    }
+  };
+}
+const Ct = [
+  l({
+    name: "Stack",
+    props: t.object({
+      children: t.array(t.any()).optional()
+    }),
+    description: "Vertical stack layout that arranges children in a column with consistent spacing.",
+    renderer: (e) => oe(K("md"), ...e.children ?? [])
+  }),
+  l({
+    name: "Group",
+    props: t.object({
+      children: t.array(t.any()).optional()
+    }),
+    description: "Horizontal group layout that arranges children in a row with consistent spacing.",
+    renderer: (e) => le(K("md"), ...e.children ?? [])
+  }),
+  l({
+    name: "Card",
+    props: t.object({
+      title: t.string().optional(),
+      content: t.string().optional(),
+      variant: t.enum(["default", "elevated", "outlined", "flat"]).optional(),
+      children: t.array(t.any()).optional()
+    }),
+    description: 'A container with optional title and content text. Card("My Title", "Description text")',
+    renderer: (e) => {
+      const n = [];
+      return e.title && n.push(z.h3(x.class("font-semibold text-lg"), e.title)), e.content && n.push(
+        z.p(x.class("text-gray-600 dark:text-gray-400"), e.content)
+      ), e.children && n.push(...e.children), pe({ variant: e.variant }, ...n);
+    }
+  }),
+  l({
+    name: "Divider",
+    props: t.object({
+      orientation: t.enum(["horizontal", "vertical"]).optional(),
+      variant: t.enum(["solid", "dashed", "dotted"]).optional(),
+      tone: t.enum(["subtle", "default", "strong"]).optional(),
+      label: t.string().optional(),
+      labelAlign: t.enum(["left", "center", "right"]).optional()
+    }),
+    description: "A visual separator for dividing content sections.",
+    renderer: (e) => be({
+      orientation: e.orientation,
+      variant: e.variant,
+      tone: e.tone,
+      label: e.label,
+      labelAlign: e.labelAlign
+    })
+  }),
+  l({
+    name: "Accordion",
+    props: t.object({
+      items: t.array(
+        t.object({
+          key: t.string(),
+          header: t.string(),
+          body: t.string(),
+          defaultOpen: t.boolean().optional(),
+          disabled: t.boolean().optional()
+        })
+      ),
+      multiple: t.boolean().optional(),
+      size: t.enum(["xs", "sm", "md", "lg", "xl"]).optional(),
+      variant: t.enum(["default", "separated"]).optional()
+    }),
+    description: "An accordion component with collapsible sections. Each item has a clickable header that toggles content.",
+    renderer: (e) => ge({
+      items: e.items.map((n) => ({
+        key: n.key,
+        header: n.header,
+        body: z.p(n.body),
+        defaultOpen: n.defaultOpen,
+        disabled: n.disabled
+      })),
+      multiple: e.multiple,
+      size: e.size,
+      variant: e.variant
+    })
+  }),
+  l({
+    name: "Center",
+    props: t.object({
+      gap: t.enum(["none", "xs", "sm", "md", "lg", "xl", "2xl"]).optional(),
+      children: t.array(t.any()).optional()
+    }),
+    description: "Centers its children both horizontally and vertically within a container.",
+    renderer: (e) => he({ gap: e.gap }, ...e.children ?? [])
+  }),
+  l({
+    name: "Collapse",
+    props: t.object({
+      open: t.boolean(),
+      children: t.array(t.any()).optional()
+    }),
+    description: "Animated collapsible container that smoothly expands and contracts its content.",
+    renderer: (e) => fe({ open: e.open }, ...e.children ?? [])
+  })
+], F = t.enum([
+  "filled",
+  "light",
+  "outline",
+  "dashed",
+  "default",
+  "subtle",
+  "text"
+]), T = t.enum(["xs", "sm", "md", "lg", "xl"]), I = t.enum([
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "neutral",
+  "base"
+]), jt = [
+  l({
+    name: "Button",
+    props: t.object({
+      label: t.string(),
+      variant: F.optional(),
+      size: T.optional(),
+      color: I.optional(),
+      disabled: t.boolean().optional(),
+      actionType: t.string().optional(),
+      actionParams: t.record(t.string(), t.unknown()).optional()
+    }),
+    description: 'Clickable button. Set actionType to dispatch an action on click. Button("Click Me", "filled", "md", "primary", false, "submit_form", {key: "value"})',
+    renderer: (e) => {
+      const n = e.__onAction;
+      return j(
+        {
+          variant: e.variant,
+          size: e.size,
+          color: e.color,
+          disabled: e.disabled,
+          onClick: e.actionType ? () => {
+            n?.({
+              kind: "button",
+              type: e.actionType,
+              params: e.actionParams ?? {},
+              humanFriendlyMessage: `Clicked: ${e.label}`
+            });
+          } : void 0
+        },
+        e.label
+      );
+    }
+  }),
+  l({
+    name: "ToggleButton",
+    props: t.object({
+      label: t.string(),
+      pressed: t.boolean(),
+      variant: F.optional(),
+      size: T.optional(),
+      color: I.optional(),
+      disabled: t.boolean().optional()
+    }),
+    description: "A toggle button that can be pressed/unpressed, styled as a button with visual feedback for the pressed state.",
+    renderer: (e) => {
+      const n = p(e.pressed);
+      return ye(
+        {
+          pressed: n,
+          onChange: (a) => n.set(a),
+          variant: e.variant,
+          size: e.size,
+          color: e.color,
+          disabled: e.disabled
+        },
+        e.label
+      );
+    }
+  }),
+  l({
+    name: "CopyButton",
+    props: t.object({
+      text: t.string(),
+      variant: F.optional(),
+      size: T.optional(),
+      color: I.optional()
+    }),
+    description: "A button that copies text to the clipboard with visual feedback.",
+    renderer: (e) => ve({
+      text: e.text,
+      variant: e.variant,
+      size: e.size,
+      color: e.color
+    })
+  }),
+  l({
+    name: "CloseButton",
+    props: t.object({
+      size: T.optional(),
+      color: I.optional(),
+      icon: t.string().optional()
+    }),
+    description: "A small icon-only button for dismissing modals, drawers, notifications, and tags.",
+    renderer: (e) => tt({
+      size: e.size,
+      color: e.color,
+      icon: e.icon
+    })
+  }),
+  l({
+    name: "ToggleButtonGroup",
+    props: t.object({
+      items: t.array(
+        t.object({
+          key: t.string(),
+          label: t.string(),
+          disabled: t.boolean().optional()
+        })
+      ),
+      selectedKeys: t.array(t.string()).optional(),
+      multiple: t.boolean().optional(),
+      variant: F.optional(),
+      size: T.optional(),
+      color: I.optional(),
+      orientation: t.enum(["horizontal", "vertical"]).optional()
+    }),
+    description: "A group container for toggle buttons that manages single or multiple selection.",
+    renderer: (e) => {
+      const n = p(e.selectedKeys ?? []);
+      return we({
+        items: e.items,
+        value: n,
+        onChange: (a) => n.set(a),
+        multiple: e.multiple,
+        variant: e.variant,
+        size: e.size,
+        color: e.color,
+        orientation: e.orientation
+      });
+    }
+  })
+], D = t.enum(["xs", "sm", "md", "lg", "xl"]), C = t.enum([
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "neutral",
+  "base"
+]), kt = [
+  l({
+    name: "StatCard",
+    props: t.object({
+      title: t.string(),
+      value: t.string(),
+      trend: t.string().optional(),
+      trendDirection: t.enum(["up", "down", "flat"]).optional(),
+      variant: t.enum(["default", "elevated", "outlined"]).optional(),
+      size: D.optional(),
+      color: C.optional()
+    }),
+    description: 'Dashboard metric card. StatCard({title: "Revenue", value: "$12k", trend: "+8%", trendDirection: "up"})',
+    renderer: (e) => ze(
+      {
+        variant: e.variant,
+        size: e.size,
+        color: e.color
+      },
+      je({}, e.title),
+      Ce({}, e.value),
+      ...e.trendDirection != null ? [
+        Se({
+          value: e.trend ?? "",
+          direction: e.trendDirection
+        })
+      ] : []
+    )
+  }),
+  l({
+    name: "Badge",
+    props: t.object({
+      label: t.string(),
+      variant: t.enum([
+        "filled",
+        "light",
+        "outline",
+        "dashed",
+        "default",
+        "subtle",
+        "text"
+      ]).optional(),
+      size: D.optional(),
+      color: C.optional(),
+      circle: t.boolean().optional()
+    }),
+    description: "A small status indicator or label component with theme-aware colors.",
+    renderer: (e) => ke(
+      {
+        variant: e.variant,
+        size: e.size,
+        color: e.color,
+        circle: e.circle
+      },
+      e.label
+    )
+  }),
+  l({
+    name: "AutoColorBadge",
+    props: t.object({
+      label: t.string(),
+      size: D.optional()
+    }),
+    description: "A badge that automatically assigns a color based on the label text.",
+    renderer: (e) => Ae(
+      {
+        size: e.size
+      },
+      e.label
+    )
+  }),
+  l({
+    name: "Avatar",
+    props: t.object({
+      name: t.string().optional(),
+      src: t.string().optional(),
+      icon: t.string().optional(),
+      size: t.enum(["xs", "sm", "md", "lg", "xl", "2xl"]).optional(),
+      variant: t.enum(["circle", "square"]).optional(),
+      color: C.optional(),
+      bordered: t.boolean().optional()
+    }),
+    description: "Renders a user avatar with image, initials, or icon fallback.",
+    renderer: (e) => V({
+      name: e.name,
+      src: e.src,
+      icon: e.icon,
+      size: e.size,
+      variant: e.variant,
+      color: e.color,
+      bordered: e.bordered
+    })
+  }),
+  l({
+    name: "AvatarGroup",
+    props: t.object({
+      names: t.array(t.string()),
+      size: t.enum(["xs", "sm", "md", "lg", "xl", "2xl"]).optional(),
+      spacing: t.enum(["tight", "normal"]).optional(),
+      overflow: t.number().optional()
+    }),
+    description: "Renders a container for grouping multiple Avatar components with overlapping or spaced layout.",
+    renderer: (e) => xe(
+      { size: e.size, spacing: e.spacing },
+      ...e.names.map((n) => V({ name: n, size: e.size })),
+      ...e.overflow != null ? [
+        Te({
+          count: e.overflow,
+          size: e.size
+        })
+      ] : []
+    )
+  }),
+  l({
+    name: "ProgressBar",
+    props: t.object({
+      value: t.number().optional(),
+      size: t.enum(["sm", "md", "lg"]).optional(),
+      color: C.optional(),
+      max: t.number().optional(),
+      showLabel: t.boolean().optional()
+    }),
+    description: 'Horizontal progress bar. ProgressBar(75, "md") shows 75% progress.',
+    renderer: (e) => Ie({
+      value: e.value,
+      max: e.max,
+      size: e.size,
+      color: e.color,
+      showLabel: e.showLabel ?? !0
+    })
+  }),
+  // DataTable is too complex to register meaningfully here - skip with TODO
+  // TODO: DataTable requires column definitions and data models that can't be expressed as simple props
+  l({
+    name: "Skeleton",
+    props: t.object({
+      variant: t.enum(["text", "rect", "circle"]).optional(),
+      width: t.string().optional(),
+      height: t.string().optional(),
+      lines: t.number().optional(),
+      animate: t.boolean().optional()
+    }),
+    description: "A loading placeholder component that shows a shimmer animation.",
+    renderer: (e) => Le({
+      variant: e.variant,
+      width: e.width,
+      height: e.height,
+      lines: e.lines,
+      animate: e.animate
+    })
+  }),
+  l({
+    name: "Indicator",
+    props: t.object({
+      show: t.boolean().optional(),
+      count: t.number().optional(),
+      color: C.optional(),
+      placement: t.enum(["top-right", "top-left", "bottom-right", "bottom-left"]).optional(),
+      size: D.optional(),
+      children: t.array(t.any()).optional()
+    }),
+    description: "Overlays a small dot or count badge on any child content for notification counts or status.",
+    renderer: (e) => Oe(
+      {
+        show: e.show,
+        count: e.count,
+        color: e.color,
+        placement: e.placement,
+        size: e.size
+      },
+      ...e.children ?? []
+    )
+  }),
+  l({
+    name: "HistoryTimeline",
+    props: t.object({
+      entries: t.array(
+        t.object({
+          id: t.string(),
+          action: t.string(),
+          actionColor: t.string(),
+          icon: t.string(),
+          target: t.string(),
+          targetIcon: t.string(),
+          actor: t.object({ name: t.string(), initials: t.string() }),
+          time: t.string(),
+          detail: t.string(),
+          restorable: t.boolean().optional()
+        })
+      )
+    }),
+    description: "A timeline component displaying a history of actions with filtering support.",
+    renderer: (e) => Pe({
+      entries: p(e.entries)
+    })
+  }),
+  l({
+    name: "Icon",
+    props: t.object({
+      icon: t.string(),
+      size: t.enum(["xs", "sm", "md", "lg", "xl", "2xl"]).optional(),
+      color: C.optional(),
+      title: t.string().optional()
+    }),
+    description: "Renders an SVG icon from the Iconify icon library with lazy-loading and caching.",
+    renderer: (e) => ot({
+      icon: e.icon,
+      size: e.size,
+      color: e.color,
+      title: e.title
+    })
+  })
+], w = t.enum(["xs", "sm", "md", "lg", "xl"]), At = [
+  l({
+    name: "TextInput",
+    props: t.object({
+      value: t.string().optional(),
+      placeholder: t.string().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional()
+    }),
+    description: "A single-line text input component.",
+    renderer: (e) => {
+      const n = p(e.value ?? "");
+      return at({
+        value: n,
+        onChange: (a) => n.set(a),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "NumberInput",
+    props: t.object({
+      value: t.number().optional(),
+      placeholder: t.string().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional(),
+      min: t.number().optional(),
+      max: t.number().optional(),
+      step: t.number().optional()
+    }),
+    description: "A number input component for numeric values.",
+    renderer: (e) => {
+      const n = p(e.value ?? 0);
+      return ce({
+        value: n,
+        onChange: (a) => n.set(a),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        size: e.size,
+        min: e.min,
+        max: e.max,
+        step: e.step
+      });
+    }
+  }),
+  l({
+    name: "PasswordInput",
+    props: t.object({
+      value: t.string().optional(),
+      placeholder: t.string().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional()
+    }),
+    description: "A password input with toggle to show/hide the value.",
+    renderer: (e) => {
+      const n = p(e.value ?? "");
+      return it({
+        value: n,
+        onChange: (a) => n.set(a),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "EmailInput",
+    props: t.object({
+      value: t.string().optional(),
+      placeholder: t.string().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional()
+    }),
+    description: "An email address input component.",
+    renderer: (e) => {
+      const n = p(e.value ?? "");
+      return rt({
+        value: n,
+        onChange: (a) => n.set(a),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "TextArea",
+    props: t.object({
+      value: t.string().optional(),
+      placeholder: t.string().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional(),
+      rows: t.number().optional()
+    }),
+    description: "A multi-line text input component.",
+    renderer: (e) => {
+      const n = p(e.value ?? "");
+      return ue({
+        value: n,
+        onChange: (a) => n.set(a),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        size: e.size,
+        rows: e.rows
+      });
+    }
+  }),
+  l({
+    name: "CheckboxInput",
+    props: t.object({
+      checked: t.boolean().optional(),
+      placeholder: t.string().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional()
+    }),
+    description: "A custom checkbox input component with icon-based checked/unchecked states.",
+    renderer: (e) => {
+      const n = p(e.checked ?? !1);
+      return nt({
+        value: n,
+        onChange: (a) => n.set(a),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "Switch",
+    props: t.object({
+      value: t.boolean().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional(),
+      color: t.enum([
+        "primary",
+        "secondary",
+        "success",
+        "warning",
+        "danger",
+        "info",
+        "neutral",
+        "base"
+      ]).optional()
+    }),
+    description: "A toggle switch component for boolean on/off states with animated thumb transition.",
+    renderer: (e) => {
+      const n = p(e.value ?? !1);
+      return st({
+        value: n,
+        onChange: (a) => n.set(a),
+        disabled: e.disabled,
+        size: e.size,
+        color: e.color
+      });
+    }
+  }),
+  l({
+    name: "RadioGroup",
+    props: t.object({
+      options: t.array(
+        t.object({
+          value: t.string(),
+          label: t.string(),
+          description: t.string().optional(),
+          disabled: t.boolean().optional()
+        })
+      ),
+      value: t.string().optional(),
+      orientation: t.enum(["horizontal", "vertical"]).optional(),
+      size: w.optional(),
+      disabled: t.boolean().optional()
+    }),
+    description: "A group of radio buttons allowing the user to select one option from a mutually exclusive list.",
+    renderer: (e) => {
+      const n = p(e.value ?? e.options[0]?.value ?? "");
+      return Fe({
+        options: p(e.options),
+        value: n,
+        onChange: (a) => n.set(a),
+        orientation: e.orientation,
+        size: e.size,
+        disabled: e.disabled
+      });
+    }
+  }),
+  l({
+    name: "NativeSelect",
+    props: t.object({
+      options: t.array(
+        t.object({
+          value: t.string(),
+          label: t.string()
+        })
+      ),
+      value: t.string().optional(),
+      placeholder: t.string().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional()
+    }),
+    description: "A native HTML select dropdown input component.",
+    renderer: (e) => {
+      const n = p(e.value ?? e.options[0]?.value ?? "");
+      return de({
+        options: p(
+          e.options.map((a) => ({
+            type: "value",
+            value: a.value,
+            label: a.label
+          }))
+        ),
+        value: n,
+        onChange: (a) => n.set(a),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "RatingInput",
+    props: t.object({
+      value: t.number().optional(),
+      max: t.number().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional()
+    }),
+    description: "A star rating input component with fractional precision support.",
+    renderer: (e) => {
+      const n = p(e.value ?? 0);
+      return lt({
+        value: n,
+        onChange: (a) => n.set(a),
+        max: e.max,
+        disabled: e.disabled,
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "SliderInput",
+    props: t.object({
+      value: t.number().optional(),
+      min: t.number().optional(),
+      max: t.number().optional(),
+      step: t.number().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional()
+    }),
+    description: "A range slider input component.",
+    renderer: (e) => {
+      const n = p(e.value ?? e.min ?? 0);
+      return ct({
+        value: n,
+        onChange: (a) => n.set(a),
+        min: e.min,
+        max: e.max,
+        step: e.step,
+        disabled: e.disabled,
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "ColorInput",
+    props: t.object({
+      value: t.string().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional()
+    }),
+    description: "A color picker input component.",
+    renderer: (e) => {
+      const n = p(e.value ?? "#000000");
+      return De({
+        value: n,
+        onChange: (a) => n.set(a),
+        disabled: e.disabled,
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "TagInput",
+    props: t.object({
+      tags: t.array(t.string()).optional(),
+      placeholder: t.string().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional()
+    }),
+    description: "An input for entering and managing a list of tags.",
+    renderer: (e) => {
+      const n = p(e.tags ?? []);
+      return Ee({
+        values: n,
+        onChange: (a) => n.set(a),
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "OTPInput",
+    props: t.object({
+      value: t.string().optional(),
+      length: t.number().optional(),
+      disabled: t.boolean().optional(),
+      size: w.optional()
+    }),
+    description: "A one-time password input with individual character fields.",
+    renderer: (e) => {
+      const n = p(e.value ?? "");
+      return Be({
+        value: n,
+        onChange: (a) => n.set(a),
+        length: e.length,
+        disabled: e.disabled,
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "SegmentedInput",
+    props: t.object({
+      options: t.record(t.string(), t.string()),
+      value: t.string().optional(),
+      size: w.optional(),
+      disabled: t.boolean().optional(),
+      variant: t.enum(["pill", "squared"]).optional()
+    }),
+    description: "A segmented control for selecting one option from a set, similar to a tab bar or radio group.",
+    renderer: (e) => {
+      const n = Object.keys(e.options), a = p(e.value ?? n[0] ?? "");
+      return me({
+        options: e.options,
+        value: a,
+        onChange: (o) => a.set(o),
+        size: e.size,
+        disabled: e.disabled,
+        variant: e.variant
+      });
+    }
+  })
+], L = t.enum(["xs", "sm", "md", "lg", "xl"]), M = t.enum([
+  "primary",
+  "secondary",
+  "success",
+  "warning",
+  "danger",
+  "info",
+  "neutral",
+  "base"
+]), xt = [
+  l({
+    name: "Tabs",
+    props: t.object({
+      items: t.array(
+        t.object({
+          key: t.string(),
+          label: t.string(),
+          content: t.string().optional(),
+          disabled: t.boolean().optional()
+        })
+      ),
+      activeKey: t.string().optional(),
+      size: L.optional(),
+      variant: t.enum(["default", "filled", "outline", "underline", "pill"]).optional(),
+      color: M.optional(),
+      orientation: t.enum(["horizontal", "vertical"]).optional()
+    }),
+    description: "A tabbed navigation component with content panels for each tab.",
+    renderer: (e) => {
+      const n = e.activeKey ?? e.items[0]?.key ?? "", a = p(n);
+      return Ne({
+        items: e.items.map((o) => ({
+          key: o.key,
+          label: o.label,
+          content: () => z.div(X.padding("1rem 0"), o.content ?? ""),
+          disabled: o.disabled
+        })),
+        value: a,
+        onChange: (o) => a.set(o),
+        size: e.size,
+        variant: e.variant ?? "underline",
+        color: e.color,
+        orientation: e.orientation
+      });
+    }
+  }),
+  l({
+    name: "Breadcrumbs",
+    props: t.object({
+      items: t.array(
+        t.object({
+          label: t.string(),
+          href: t.string().optional(),
+          icon: t.string().optional(),
+          current: t.boolean().optional()
+        })
+      ),
+      separator: t.string().optional(),
+      maxItems: t.number().optional(),
+      size: L.optional()
+    }),
+    description: "A breadcrumb navigation component showing the current page location within a hierarchy.",
+    renderer: (e) => Me({
+      items: p(e.items),
+      separator: e.separator,
+      maxItems: e.maxItems,
+      size: e.size
+    })
+  }),
+  l({
+    name: "Pagination",
+    props: t.object({
+      currentPage: t.number(),
+      totalPages: t.number(),
+      siblings: t.number().optional(),
+      showPrevNext: t.boolean().optional(),
+      showFirstLast: t.boolean().optional(),
+      size: L.optional(),
+      variant: t.enum(["filled", "outline", "default"]).optional(),
+      color: M.optional()
+    }),
+    description: "A pagination control for navigating between pages of content.",
+    renderer: (e) => {
+      const n = p(e.currentPage);
+      return Re({
+        currentPage: n,
+        totalPages: e.totalPages,
+        onChange: (a) => n.set(a),
+        siblings: e.siblings,
+        showPrevNext: e.showPrevNext,
+        showFirstLast: e.showFirstLast,
+        size: e.size,
+        variant: e.variant,
+        color: e.color
+      });
+    }
+  }),
+  l({
+    name: "Stepper",
+    props: t.object({
+      steps: t.array(
+        t.object({
+          label: t.string(),
+          description: t.string().optional(),
+          icon: t.string().optional()
+        })
+      ),
+      activeStep: t.number().optional(),
+      orientation: t.enum(["horizontal", "vertical"]).optional(),
+      variant: t.enum(["default", "compact"]).optional(),
+      size: L.optional(),
+      color: M.optional(),
+      showNavigation: t.boolean().optional()
+    }),
+    description: "A step-by-step wizard component for multi-step forms or workflows.",
+    renderer: (e) => {
+      const n = p(e.activeStep ?? 0);
+      return $e({
+        steps: e.steps.map((a) => ({
+          label: a.label,
+          description: a.description,
+          icon: a.icon
+        })),
+        value: n,
+        onChange: (a) => n.set(a),
+        orientation: e.orientation,
+        variant: e.variant,
+        size: e.size,
+        color: e.color,
+        showNavigation: e.showNavigation
+      });
+    }
+  }),
+  l({
+    name: "TreeView",
+    props: t.object({
+      items: t.array(
+        t.object({
+          id: t.string(),
+          label: t.string(),
+          icon: t.string().optional(),
+          badge: t.string().optional(),
+          children: t.array(
+            t.object({
+              id: t.string(),
+              label: t.string(),
+              icon: t.string().optional()
+            })
+          ).optional()
+        })
+      ),
+      selectedId: t.string().optional(),
+      size: L.optional()
+    }),
+    description: "A hierarchical tree view component for displaying nested data with expand/collapse.",
+    renderer: (e) => {
+      const n = p(e.selectedId);
+      return Ge({
+        items: p(e.items),
+        selectedId: n,
+        onSelect: (a) => n.set(a),
+        size: e.size
+      });
+    }
+  }),
+  l({
+    name: "Sidebar",
+    props: t.object({
+      backgroundMode: t.enum(["light", "dark"]).optional(),
+      groups: t.array(
+        t.object({
+          label: t.string(),
+          links: t.array(
+            t.object({
+              label: t.string(),
+              href: t.string().optional(),
+              icon: t.string().optional(),
+              active: t.boolean().optional()
+            })
+          )
+        })
+      ).optional()
+    }),
+    description: "A navigation sidebar component for application layouts, supporting grouped links.",
+    renderer: (e) => Ze(
+      { backgroundMode: e.backgroundMode },
+      ...(e.groups ?? []).map(
+        (n) => We(
+          { header: n.label },
+          ...n.links.map(
+            (a) => _e({
+              content: a.label,
+              href: a.href ?? "#",
+              icon: a.icon
+            })
+          )
+        )
+      )
+    )
+  })
+], Tt = [
+  l({
+    name: "Modal",
+    props: t.object({
+      triggerLabel: t.string(),
+      title: t.string().optional(),
+      body: t.string(),
+      footerLabel: t.string().optional(),
+      size: t.enum(["sm", "md", "lg", "xl"]).optional(),
+      dismissable: t.boolean().optional(),
+      position: t.enum([
+        "center",
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ]).optional()
+    }),
+    description: "A modal dialog component with structured header, body, and footer sections. Renders a trigger button that opens the modal.",
+    renderer: (e) => ut(
+      {
+        size: e.size,
+        dismissable: e.dismissable,
+        position: e.position
+      },
+      (n, a) => j(
+        {
+          onClick: () => n({
+            header: e.title ? z.h2(e.title) : void 0,
+            body: z.p(e.body),
+            footer: e.footerLabel ? j(
+              { variant: "filled", onClick: a },
+              e.footerLabel
+            ) : void 0
+          })
+        },
+        e.triggerLabel
+      )
+    )
+  }),
+  l({
+    name: "Drawer",
+    props: t.object({
+      triggerLabel: t.string(),
+      title: t.string().optional(),
+      body: t.string(),
+      side: t.enum(["top", "right", "bottom", "left", "inline-start", "inline-end"]).optional(),
+      size: t.enum(["sm", "md", "lg", "xl"]).optional()
+    }),
+    description: "A slide-out panel component that anchors to any side of the viewport. Renders a trigger button.",
+    renderer: (e) => Ke(
+      (n, a) => j(
+        {
+          onClick: () => n({
+            side: e.side,
+            size: e.size,
+            header: e.title ? z.h3(e.title) : void 0,
+            body: z.p(e.body)
+          })
+        },
+        e.triggerLabel
+      )
+    )
+  }),
+  l({
+    name: "Tooltip",
+    props: t.object({
+      content: t.string(),
+      triggerLabel: t.string(),
+      placement: t.enum([
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ]).optional()
+    }),
+    description: "A tooltip that provides contextual information when hovering or focusing on an element. Must be a child of the trigger element.",
+    renderer: (e) => j(
+      {},
+      e.triggerLabel,
+      Ve({
+        content: e.content,
+        placement: e.placement
+      })
+    )
+  }),
+  l({
+    name: "Popover",
+    props: t.object({
+      content: t.string(),
+      triggerLabel: t.string(),
+      placement: t.enum([
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ]).optional()
+    }),
+    description: "A popover that displays arbitrary content in a positioned overlay panel triggered by clicking. Must be a child of the trigger element.",
+    renderer: (e) => j(
+      { stopPropagation: !1 },
+      e.triggerLabel,
+      Ue({
+        content: z.div(z.p(e.content)),
+        placement: e.placement
+      })
+    )
+  })
+], It = [
+  l({
+    name: "FormatNumber",
+    props: t.object({
+      value: t.number(),
+      style: t.enum(["decimal", "currency", "percent", "unit"]).optional(),
+      currency: t.string().optional(),
+      notation: t.enum(["standard", "scientific", "engineering", "compact"]).optional(),
+      minimumFractionDigits: t.number().optional(),
+      maximumFractionDigits: t.number().optional(),
+      locale: t.string().optional()
+    }),
+    description: "Locale-aware number formatting component.",
+    renderer: (e) => He({
+      value: e.value,
+      style: e.style,
+      currency: e.currency,
+      notation: e.notation,
+      minimumFractionDigits: e.minimumFractionDigits,
+      maximumFractionDigits: e.maximumFractionDigits,
+      locale: e.locale
+    })
+  }),
+  l({
+    name: "FormatDate",
+    props: t.object({
+      value: t.string(),
+      dateStyle: t.enum(["full", "long", "medium", "short"]).optional(),
+      locale: t.string().optional(),
+      timeZone: t.string().optional()
+    }),
+    description: "Locale-aware date formatting component.",
+    renderer: (e) => qe({
+      value: e.value,
+      dateStyle: e.dateStyle,
+      locale: e.locale,
+      timeZone: e.timeZone
+    })
+  }),
+  l({
+    name: "FormatTime",
+    props: t.object({
+      value: t.string(),
+      timeStyle: t.enum(["full", "long", "medium", "short"]).optional(),
+      locale: t.string().optional(),
+      timeZone: t.string().optional(),
+      hour12: t.boolean().optional()
+    }),
+    description: "Locale-aware time formatting component.",
+    renderer: (e) => Je({
+      value: e.value,
+      timeStyle: e.timeStyle,
+      locale: e.locale,
+      timeZone: e.timeZone,
+      hour12: e.hour12
+    })
+  }),
+  l({
+    name: "FormatDateTime",
+    props: t.object({
+      value: t.string(),
+      dateStyle: t.enum(["full", "long", "medium", "short"]).optional(),
+      timeStyle: t.enum(["full", "long", "medium", "short"]).optional(),
+      locale: t.string().optional(),
+      timeZone: t.string().optional()
+    }),
+    description: "Locale-aware date and time formatting component combining date and time styles.",
+    renderer: (e) => Qe({
+      value: e.value,
+      dateStyle: e.dateStyle,
+      timeStyle: e.timeStyle,
+      locale: e.locale,
+      timeZone: e.timeZone
+    })
+  }),
+  l({
+    name: "FormatRelativeTime",
+    props: t.object({
+      value: t.number(),
+      unit: t.enum([
+        "year",
+        "quarter",
+        "month",
+        "week",
+        "day",
+        "hour",
+        "minute",
+        "second"
+      ]),
+      numeric: t.enum(["always", "auto"]).optional(),
+      style: t.enum(["long", "short", "narrow"]).optional(),
+      locale: t.string().optional()
+    }),
+    description: 'Locale-aware relative time formatting component (e.g., "2 days ago", "in 3 hours").',
+    renderer: (e) => Xe({
+      value: e.value,
+      unit: e.unit,
+      numeric: e.numeric,
+      style: e.style,
+      locale: e.locale
+    })
+  }),
+  l({
+    name: "FormatFileSize",
+    props: t.object({
+      value: t.number(),
+      decimalPlaces: t.number().optional(),
+      locale: t.string().optional()
+    }),
+    description: 'Locale-aware file size formatting component (e.g., "1.5 KB", "2.3 MB").',
+    renderer: (e) => Ye({
+      value: e.value,
+      decimalPlaces: e.decimalPlaces,
+      locale: e.locale
+    })
+  })
+], Lt = [
+  l({
+    name: "Kbd",
+    props: t.object({
+      key: t.string(),
+      size: t.enum(["xs", "sm", "md"]).optional()
+    }),
+    description: "A styled keyboard key indicator component for displaying keyboard shortcuts.",
+    renderer: (e) => et({ size: e.size }, e.key)
+  }),
+  l({
+    name: "Label",
+    props: t.object({
+      text: t.string(),
+      type: t.enum(["default", "emphasis", "muted", "danger"]).optional()
+    }),
+    description: "An inline label component for text with semantic styling variants.",
+    renderer: (e) => {
+      const n = e.type ?? "default";
+      return n === "emphasis" ? ae(e.text) : n === "muted" ? ie(e.text) : n === "danger" ? re(e.text) : se(e.text);
+    }
+  })
+], Ut = Q({
+  components: [
+    ...Ct,
+    ...jt,
+    ...kt,
+    ...At,
+    ...xt,
+    ...Tt,
+    ...It,
+    ...Lt
+  ],
+  root: "Stack",
+  groups: [
+    {
+      name: "Layout",
+      description: "Structural containers",
+      components: [
+        "Stack",
+        "Flex",
+        "Card",
+        "Divider",
+        "Accordion",
+        "Center",
+        "Group",
+        "Collapse"
+      ]
+    },
+    {
+      name: "Button",
+      description: "Interactive buttons",
+      components: [
+        "Button",
+        "ToggleButton",
+        "CopyButton",
+        "CloseButton",
+        "ToggleButtonGroup"
+      ]
+    },
+    {
+      name: "Data Display",
+      description: "Content presentation",
+      components: [
+        "StatCard",
+        "Badge",
+        "AutoColorBadge",
+        "Avatar",
+        "AvatarGroup",
+        "ProgressBar",
+        "DataTable",
+        "Skeleton",
+        "Indicator",
+        "HistoryTimeline",
+        "Icon"
+      ]
+    },
+    {
+      name: "Form",
+      description: "User input controls",
+      components: [
+        "TextInput",
+        "NumberInput",
+        "PasswordInput",
+        "EmailInput",
+        "TextArea",
+        "CheckboxInput",
+        "Switch",
+        "RadioGroup",
+        "NativeSelect",
+        "DropdownInput",
+        "ComboboxInput",
+        "DatePicker",
+        "TimePicker",
+        "RatingInput",
+        "SliderInput",
+        "ColorInput",
+        "TagInput",
+        "OTPInput",
+        "SegmentedInput"
+      ]
+    },
+    {
+      name: "Navigation",
+      description: "Navigation controls",
+      components: [
+        "Tabs",
+        "Breadcrumbs",
+        "Pagination",
+        "Stepper",
+        "TreeView",
+        "Sidebar"
+      ]
+    },
+    {
+      name: "Overlay",
+      description: "Floating content",
+      components: ["Modal", "Drawer", "Tooltip", "Popover"]
+    },
+    {
+      name: "Format",
+      description: "Formatted values",
+      components: [
+        "FormatNumber",
+        "FormatDate",
+        "FormatTime",
+        "FormatDateTime",
+        "FormatRelativeTime",
+        "FormatFileSize"
+      ]
+    },
+    {
+      name: "Typography",
+      description: "Text elements",
+      components: ["Kbd", "Label"]
+    }
+  ]
+});
+function Ot() {
+  return z.div(
+    x.class("bc-skeleton bc-skeleton--text"),
+    x.style("min-height: 1.5em; width: 100%;")
+  );
+}
+function Pt(e) {
+  return Object.keys(e.props.shape);
+}
+function P(e, n, a, o, i) {
+  switch (e.type) {
+    case "string":
+      return e.value;
+    case "number":
+      return String(e.value);
+    case "boolean":
+      return String(e.value);
+    case "null":
+      return A;
+    case "array":
+      return Y(
+        ...e.items.map(
+          (r) => P(r, n, a, o, i)
+        )
+      );
+    case "object":
+      return A;
+    case "reference": {
+      if (o) {
+        const r = o.get(e.name);
+        if (r)
+          return P(r.value, n, a, o, i);
+      }
+      return Ot();
+    }
+    case "component": {
+      const r = n.get(e.name);
+      if (!r)
+        return A;
+      const c = Pt(r).includes("children"), s = e.args;
+      let u = {}, b = [];
+      if (s.length >= 1 && s[0].type === "object") {
+        u = R(s[0]);
+        const h = s[s.length - 1];
+        s.length > 1 && h.type === "array" && c && (b = h.items);
+      } else s.length >= 1 && s[0].type === "array" && c && (b = s[0].items);
+      const v = b.map(
+        (h) => P(h, n, a, o, i)
+      );
+      c && v.length > 0 && (u.children = v);
+      const d = { ...u };
+      delete d.children;
+      const m = r.props.safeParse(d), g = m.success ? {
+        ...m.data,
+        ...u.children != null ? { children: u.children } : {}
+      } : u;
+      return i && u.actionType && (g.__onAction = i), r.renderer(g, v);
+    }
+  }
+}
+function R(e) {
+  switch (e.type) {
+    case "string":
+      return e.value;
+    case "number":
+      return e.value;
+    case "boolean":
+      return e.value;
+    case "null":
+      return null;
+    case "array":
+      return e.items.map((n) => R(n));
+    case "object":
+      return Object.fromEntries(
+        Object.entries(e.entries).map(([n, a]) => [n, R(a)])
+      );
+    case "reference":
+      return e.name;
+    case "component":
+      return e.name;
+  }
+}
+const U = {
+  mark: ee("OpenUI:ActionContext"),
+  create: (e = {}) => {
+    const n = p([]);
+    return {
+      value: {
+        onAction: e.onAction,
+        actions: n
+      },
+      dispose: () => n.dispose()
+    };
+  }
+};
+function Ht(e) {
+  const {
+    library: n,
+    response: a,
+    isStreaming: o,
+    onAction: i,
+    onError: r,
+    onComplete: c,
+    debug: s
+  } = e, u = i ? (d) => i(d) : void 0;
+  function b(d) {
+    if (!d) return A;
+    const g = H(n)(d);
+    return g.meta.errors.length > 0 && r && r(g.meta.errors), g.root ? v(g.root, g) : A;
+  }
+  function v(d, m) {
+    if (d.type === "reference") {
+      const g = m.statements.get(d.name);
+      return g ? v(g.value, m) : A;
+    }
+    if (d.type === "component") {
+      const g = d.args.map((h) => {
+        if (h.type === "reference") {
+          const f = m.statements.get(h.name);
+          return f ? f.value : h;
+        }
+        return h.type === "array" ? {
+          ...h,
+          items: h.items.map((f) => {
+            if (f.type === "reference") {
+              const y = m.statements.get(f.name);
+              return y ? y.value : f;
+            }
+            return f;
+          })
+        } : h;
+      });
+      return P(
+        { ...d, args: g },
+        n,
+        s,
+        m.statements,
+        u
+      );
+    }
+    return P(d, n, s, m.statements, u);
+  }
+  return typeof a == "string" ? z.div(
+    x.class(e.className ?? ""),
+    Z(
+      U,
+      { onAction: i },
+      () => b(a)
+    )
+  ) : z.div(
+    x.class(e.className ?? ""),
+    Z(
+      U,
+      { onAction: i },
+      () => te((d) => {
+        let m = null;
+        const g = B.get(a);
+        if (g) {
+          const y = W(b(g));
+          m = _(y, d);
+        }
+        const h = B.on(a, (y) => {
+          if (m && (m(!0), m = null), y) {
+            const S = W(b(y));
+            m = _(S, d);
+          }
+        });
+        let f = null;
+        return o !== void 0 && (f = B.on(o, (y) => {
+          !y && c && c();
+        })), ne(() => {
+          h(), f && f(), m && m(!0);
+        });
+      })
+    )
+  );
+}
+function qt(e, n) {
+  const a = p(""), o = p(!0), { onComplete: i, onError: r, extractContent: c, withCredentials: s } = n ?? {}, u = new EventSource(e, {
+    withCredentials: s ?? !1
+  });
+  let b = "";
+  return u.addEventListener("message", (d) => {
+    const m = d.data;
+    if (c)
+      try {
+        b += c(m);
+      } catch {
+      }
+    else
+      b += m;
+    a.set(b);
+  }), u.addEventListener("error", () => {
+    if (u.readyState === EventSource.CLOSED)
+      o.set(!1), i?.();
+    else {
+      const d = new Error("EventSource error");
+      r?.(d), o.set(!1);
+    }
+  }), { response: a, isStreaming: o, abort: () => {
+    u.close(), a.dispose(), o.dispose();
+  } };
+}
+function Jt(e, n, a) {
+  const o = p(""), i = p(!0), r = new AbortController(), c = () => {
+    r.abort(), o.dispose(), i.dispose();
+  };
+  return fetch(e, { ...n, signal: r.signal }).then(async (s) => {
+    const u = s.body;
+    if (!u) {
+      i.set(!1), a?.onComplete?.();
+      return;
+    }
+    const b = u.getReader(), v = new TextDecoder();
+    let d = "";
+    for (; ; ) {
+      const { done: m, value: g } = await b.read();
+      if (m) break;
+      const h = v.decode(g, { stream: !0 });
+      if (a?.extractContent) {
+        const f = h.split(`
+`);
+        for (const y of f) {
+          const S = y.trim();
+          if (S)
+            try {
+              d += a.extractContent(S);
+            } catch {
+            }
+        }
+        o.set(d);
+      } else
+        d += h, o.set(d);
+    }
+    i.set(!1), a?.onComplete?.();
+  }).catch((s) => {
+    s instanceof Error && s.name === "AbortError" || (a?.onError?.(s instanceof Error ? s : new Error(String(s))), i.set(!1));
+  }), { response: o, isStreaming: i, abort: c };
+}
+function Qt(e, n) {
+  const a = p(""), o = p(!0), { onComplete: i, onError: r, extractContent: c, protocols: s } = n ?? {}, u = s ? new WebSocket(e, s) : new WebSocket(e);
+  let b = "";
+  return u.addEventListener("message", (m) => {
+    const g = m.data;
+    if (c)
+      try {
+        b += c(g);
+      } catch {
+      }
+    else
+      b += g;
+    a.set(b);
+  }), u.addEventListener("close", () => {
+    o.set(!1), i?.();
+  }), u.addEventListener("error", () => {
+    const m = new Error("WebSocket error");
+    r?.(m), o.set(!1);
+  }), { response: a, isStreaming: o, close: () => {
+    u.close(), a.dispose(), o.dispose();
+  }, send: (m) => {
+    u.send(m);
+  } };
+}
+export {
+  U as ActionContextProvider,
+  Ht as OpenUIRenderer,
+  Ut as beatuiLibrary,
+  Q as createLibrary,
+  H as createParser,
+  Vt as createStreamingParser,
+  l as defineComponent,
+  Jt as fromFetch,
+  qt as fromSSE,
+  Qt as fromWebSocket
+};