@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-SCCBEFVK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/field/field.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n  type ReactElement,\n} from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cn } from \"../../lib/cn\";\nimport { hasRenderableContent } from \"../../lib/has-renderable-content\";\nimport { Label } from \"../label\";\nimport { FieldContext, useFieldContext, type FieldContextValue } from \"./field-context\";\n\n// ── FieldRoot ─────────────────────────────────────────────────────────────\n\nexport interface FieldRootProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Whether the field is currently invalid. Drives `aria-invalid` on every\n   * `FieldControl` and error styling on `FieldLabel` — independent of\n   * whether a `FieldError` with content is actually mounted, so a caller can\n   * mark the control invalid before its message has settled.\n   */\n  invalid?: boolean;\n  /** Whether the field is required. Drives `aria-required` on every `FieldControl`. */\n  required?: boolean;\n}\n\n/**\n * Compound-anatomy field: `FieldRoot` owns id generation and `aria-describedby`\n * composition; `FieldLabel`/`FieldControl`/`FieldDescription`/`FieldError` read\n * that state from context and can be composed in ANY order/layout — including\n * more than one `FieldControl` in one row (e.g. first/last name) or a\n * `FieldDescription` placed before the control. Mirrors the same accessibility\n * wiring `FieldRow` (`../field-row`) already validated (id/`aria-describedby`/\n * `aria-invalid`/`role=\"alert\"`), adapted to a shared lifted-state context so\n * it holds across independently-composed parts; `FieldRow` remains the\n * convenience wrapper for the common single-control case and is unaffected by\n * this addition (#43).\n *\n * @example\n * ```tsx\n * <FieldRoot invalid={!!error} required>\n *   <FieldLabel>{label}</FieldLabel>\n *   <FieldControl><Input /></FieldControl>\n *   <FieldDescription>{helpText}</FieldDescription>\n *   <FieldError>{error}</FieldError>\n * </FieldRoot>\n * ```\n */\nexport const FieldRoot = forwardRef<HTMLDivElement, FieldRootProps>(function FieldRoot(\n  { invalid = false, required = false, className, children, ...props },\n  ref,\n) {\n  // Each `FieldDescription`/`FieldError` INSTANCE generates and registers its\n  // own id (see below) — two lists, not one shared slot per part type, so\n  // more than one of either part under one `FieldRoot` gets distinct ids\n  // instead of colliding, and unmounting one instance only ever removes that\n  // instance's own id from its own list (never a sibling's).\n  const [descriptionIds, setDescriptionIds] = useState<readonly string[]>([]);\n  const registerDescription = useCallback((descId: string) => {\n    setDescriptionIds((prev) => (prev.includes(descId) ? prev : [...prev, descId]));\n  }, []);\n  const unregisterDescription = useCallback((descId: string) => {\n    setDescriptionIds((prev) => (prev.includes(descId) ? prev.filter((x) => x !== descId) : prev));\n  }, []);\n\n  const [errorIds, setErrorIds] = useState<readonly string[]>([]);\n  const registerError = useCallback((errId: string) => {\n    setErrorIds((prev) => (prev.includes(errId) ? prev : [...prev, errId]));\n  }, []);\n  const unregisterError = useCallback((errId: string) => {\n    setErrorIds((prev) => (prev.includes(errId) ? prev.filter((x) => x !== errId) : prev));\n  }, []);\n\n  // Fixed semantic order — every description before every error — regardless\n  // of DOM order or registration order, so \"description placed before the\n  // control\" reorders the VISIBLE layout without reordering the announced\n  // description, and a second description/error is appended rather than\n  // replacing the first.\n  const describedBy = useMemo(() => {\n    const ids = [...descriptionIds, ...errorIds];\n    return ids.length > 0 ? ids.join(\" \") : undefined;\n  }, [descriptionIds, errorIds]);\n\n  // `FieldLabel`'s `htmlFor` can only point to ONE control, so it binds to\n  // whichever `FieldControl` registers FIRST (JSX/mount order) — the common\n  // single-control case gets this for free; a multi-control row (e.g.\n  // first/last name) still labels the first field, and every additional\n  // control needs its own explicit `id` the same way any two form controls\n  // would (no new coordination prop invented for this).\n  const [controlOrder, setControlOrder] = useState<readonly string[]>([]);\n  const registerControl = useCallback((controlId: string) => {\n    setControlOrder((prev) => (prev.includes(controlId) ? prev : [...prev, controlId]));\n  }, []);\n  const unregisterControl = useCallback((controlId: string) => {\n    setControlOrder((prev) =>\n      prev.includes(controlId) ? prev.filter((x) => x !== controlId) : prev,\n    );\n  }, []);\n  const labelFor = controlOrder[0];\n\n  const value = useMemo<FieldContextValue>(\n    () => ({\n      labelFor,\n      registerControl,\n      unregisterControl,\n      invalid,\n      required,\n      describedBy,\n      registerDescription,\n      unregisterDescription,\n      registerError,\n      unregisterError,\n    }),\n    [\n      labelFor,\n      registerControl,\n      unregisterControl,\n      invalid,\n      required,\n      describedBy,\n      registerDescription,\n      unregisterDescription,\n      registerError,\n      unregisterError,\n    ],\n  );\n\n  return (\n    <FieldContext.Provider value={value}>\n      <div ref={ref} data-slot=\"field\" className={cn(\"space-y-2\", className)} {...props}>\n        {children}\n      </div>\n    </FieldContext.Provider>\n  );\n});\n\n// ── FieldLabel ────────────────────────────────────────────────────────────\n\nexport const FieldLabel = forwardRef<\n  ElementRef<typeof Label>,\n  ComponentPropsWithoutRef<typeof Label>\n>(function FieldLabel({ className, ...props }, ref) {\n  const { labelFor, invalid } = useFieldContext(\"FieldLabel\");\n  return (\n    <Label\n      ref={ref}\n      htmlFor={labelFor}\n      data-slot=\"field-label\"\n      className={cn(\n        \"transition-colors duration-fast ease-standard\",\n        invalid && \"text-destructive-text\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\n// ── FieldControl ──────────────────────────────────────────────────────────\n\nexport interface FieldControlProps {\n  /**\n   * The single field control (`Input`, `Textarea`, `Select`, …). Receives\n   * `id`/`aria-describedby`/`aria-invalid`/`aria-required` via a Radix\n   * `Slot` — must be a single element that forwards those props to a real\n   * form control. Compose more than one `FieldControl` inside one\n   * `FieldRoot` for a multi-control row (each gets its own independent id;\n   * give every control but the first its own explicit `id`, the same way\n   * you would for any two form controls that must not collide). `FieldLabel`\n   * can only associate with ONE control (the first to mount), so give every\n   * OTHER control in the row its own `aria-label` — a shared visual label\n   * plus a placeholder is not a real accessible name for the rest.\n   */\n  children: ReactElement<{\n    id?: string;\n    \"aria-describedby\"?: string;\n  }>;\n}\n\nexport const FieldControl = forwardRef<ElementRef<typeof Slot>, FieldControlProps>(\n  function FieldControl({ children }, ref) {\n    const { invalid, required, describedBy, registerControl, unregisterControl } =\n      useFieldContext(\"FieldControl\");\n    // Independent per-instance fallback id — guarantees uniqueness with no\n    // coordination needed when more than one `FieldControl` shares a\n    // `FieldRoot` (e.g. a first/last-name row).\n    const generatedId = useId();\n\n    // Same \"child wins, but COMPOSE rather than discard\" merge FieldRow uses:\n    // Radix `Slot` merges child props OVER slot props, so a control that\n    // already carries its own `id`/`aria-describedby` must not silently lose\n    // the label association / description-error wiring.\n    const control = children;\n    const childProps = control.props;\n    const id = childProps.id ?? generatedId;\n    const composedDescribedBy =\n      [childProps[\"aria-describedby\"] ?? null, describedBy ?? null].filter(Boolean).join(\" \") ||\n      undefined;\n\n    useLayoutEffect(() => {\n      registerControl(id);\n      return () => unregisterControl(id);\n    }, [id, registerControl, unregisterControl]);\n\n    return (\n      <Slot\n        ref={ref}\n        id={id}\n        aria-describedby={composedDescribedBy}\n        aria-invalid={invalid}\n        aria-required={required || undefined}\n        data-slot=\"field-control\"\n      >\n        {cloneElement(control, { id, \"aria-describedby\": composedDescribedBy })}\n      </Slot>\n    );\n  },\n);\n\n// ── FieldDescription ──────────────────────────────────────────────────────\n\n/**\n * Optional field help text. Renders nothing — and registers no\n * `aria-describedby` reference — when `children` is falsy (`false`/`0`/`\"\"`/\n * `null`/`undefined`), an empty array, or an array containing only falsy\n * values (`{list.map(...)}` on an empty list; `[a && \"x\", b && \"y\"]` with\n * both false) — matching `FieldRow`'s `description ? … : null` convention:\n * `{hint && <FieldDescription>{hint}</FieldDescription>}` is the supported\n * way to express \"no description\".\n *\n * **Known limit:** a child that is itself a COMPONENT that renders nothing\n * (returns `null`/an empty fragment) is not knowable from the element\n * before render, so it still produces an empty paragraph that\n * `aria-describedby` points at. `FieldRow` and the wider React ecosystem\n * share this limit — pass a falsy child instead of a component that may\n * render nothing.\n */\nexport const FieldDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(function FieldDescription({ className, children, id, ...props }, ref) {\n  const { registerDescription, unregisterDescription } = useFieldContext(\"FieldDescription\");\n  // Own id per INSTANCE — two `FieldDescription`s under one `FieldRoot` (a hint\n  // above the control and a hint below it) must not collide on one shared id.\n  const instanceId = useId();\n  const generatedId = `${instanceId}-description`;\n  // Caller-supplied `id` wins — same \"child wins\" resolution `FieldControl`\n  // already uses (`childProps.id ?? generatedId`). Resolving ONE effective id\n  // up front, and destructuring `id` out of `...props` above, means the value\n  // registered into `aria-describedby` and the value actually rendered on the\n  // `<p>` can never diverge (PR #97 review finding 3).\n  const descriptionId = id ?? generatedId;\n  // Same falsy-content convention `FieldRow` uses (`description ? … : null`)\n  // — see `hasRenderableContent` (`../../lib/has-renderable-content`) for\n  // the full rationale, shared with `FieldError` below and `FieldRow`.\n  const hasContent = hasRenderableContent(children);\n\n  useLayoutEffect(() => {\n    if (!hasContent) return undefined;\n    registerDescription(descriptionId);\n    return () => unregisterDescription(descriptionId);\n  }, [hasContent, descriptionId, registerDescription, unregisterDescription]);\n\n  if (!hasContent) return null;\n\n  return (\n    <p\n      ref={ref}\n      id={descriptionId}\n      data-slot=\"field-description\"\n      className={cn(\"text-body text-muted-foreground\", className)}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n});\n\n// ── FieldError ────────────────────────────────────────────────────────────\n\n/**\n * Validation error text, announced via `role=\"alert\"`. Renders nothing —\n * and registers no `aria-describedby` reference — when `children` is falsy\n * (`false`/`0`/`\"\"`/`null`/`undefined`), an empty array, or an array\n * containing only falsy values (`{errors.map(...)}` on an empty array is\n * exactly how a real form renders \"no errors\") — matching `FieldRow`'s\n * `error ? … : null` convention: `{error && <FieldError>{error}</FieldError>}`\n * is the supported way to express \"no error\".\n *\n * **Known limit:** a child that is itself a COMPONENT that renders nothing\n * (returns `null`/an empty fragment) is not knowable from the element\n * before render, so it still produces an empty `role=\"alert\"` element that\n * `aria-describedby` points at (a screen reader announces an empty alert).\n * `FieldRow` and the wider React ecosystem share this limit — pass a falsy\n * child instead of a component that may render nothing.\n */\nexport const FieldError = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  function FieldError({ className, children, id, ...props }, ref) {\n    const { registerError, unregisterError } = useFieldContext(\"FieldError\");\n    // Own id per INSTANCE — same reasoning as `FieldDescription`.\n    const instanceId = useId();\n    const generatedId = `${instanceId}-error`;\n    // Caller-supplied `id` wins — same resolution as `FieldDescription`/\n    // `FieldControl` (PR #97 review finding 3: this had the identical\n    // ordering bug as `FieldDescription`).\n    const errorId = id ?? generatedId;\n    // Same falsy-content convention as `FieldDescription`/`FieldRow`'s\n    // `error ? … : null` — see `hasRenderableContent`\n    // (`../../lib/has-renderable-content`) for the full rationale.\n    const hasContent = hasRenderableContent(children);\n\n    useLayoutEffect(() => {\n      if (!hasContent) return undefined;\n      registerError(errorId);\n      return () => unregisterError(errorId);\n    }, [hasContent, errorId, registerError, unregisterError]);\n\n    if (!hasContent) return null;\n\n    return (\n      <p\n        ref={ref}\n        id={errorId}\n        role=\"alert\"\n        data-slot=\"field-error\"\n        className={cn(\"text-body font-medium text-destructive-text\", className)}\n        {...props}\n      >\n        {children}\n      </p>\n    );\n  },\n);\n"],"mappings":"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","names":["FieldRoot","FieldLabel","FieldControl","FieldDescription","FieldError"]}

package/dist/chunk-SEGTBIR4.js

@@ -0,0 +1,110 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/drawer/drawer.tsx
+import {
+  forwardRef
+} from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Drawer({
+  shouldScaleBackground = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DrawerPrimitive.Root, { shouldScaleBackground, ...props });
+}
+var DrawerTrigger = DrawerPrimitive.Trigger;
+var DrawerPortal = DrawerPrimitive.Portal;
+var DrawerClose = DrawerPrimitive.Close;
+var DrawerOverlay = forwardRef(function DrawerOverlay2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Overlay,
+    {
+      ref,
+      "data-slot": "drawer-overlay",
+      className: cn("fixed inset-0 z-50 bg-overlay", className),
+      ...props
+    }
+  );
+});
+var DrawerContent = forwardRef(function DrawerContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DrawerPrimitive.Content,
+      {
+        ref,
+        "data-slot": "drawer-content",
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col overscroll-contain rounded-t-xl border bg-card text-card-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { "data-slot": "drawer-handle", className: "mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted" }),
+          children
+        ]
+      }
+    )
+  ] });
+});
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn("grid gap-1.5 p-4 text-center sm:text-start", className),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+var DrawerTitle = forwardRef(function DrawerTitle2({ className, ...props }, ref) {
+  return (
+    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.
+    /* @__PURE__ */ jsx(
+      DrawerPrimitive.Title,
+      {
+        ref,
+        "data-slot": "drawer-title",
+        className: cn("text-title leading-none", className),
+        ...props
+      }
+    )
+  );
+});
+var DrawerDescription = forwardRef(function DrawerDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    DrawerPrimitive.Description,
+    {
+      ref,
+      "data-slot": "drawer-description",
+      className: cn("text-body text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerPortal,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription
+};
+//# sourceMappingURL=chunk-SEGTBIR4.js.map

package/dist/chunk-SEGTBIR4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/drawer/drawer.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentProps,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from \"react\";\nimport { Drawer as DrawerPrimitive } from \"vaul\";\nimport { cn } from \"../../lib/cn\";\n\nexport function Drawer({\n  shouldScaleBackground = true,\n  ...props\n}: ComponentProps<typeof DrawerPrimitive.Root>) {\n  return <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />;\n}\nexport const DrawerTrigger = DrawerPrimitive.Trigger;\nexport const DrawerPortal = DrawerPrimitive.Portal;\nexport const DrawerClose = DrawerPrimitive.Close;\n\nconst DrawerOverlay = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>\n>(function DrawerOverlay({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Overlay\n      ref={ref}\n      data-slot=\"drawer-overlay\"\n      className={cn(\"fixed inset-0 z-50 bg-overlay\", className)}\n      {...props}\n    />\n  );\n});\n\nexport const DrawerContent = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>\n>(function DrawerContent({ className, children, ...props }, ref) {\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        ref={ref}\n        data-slot=\"drawer-content\"\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col overscroll-contain rounded-t-xl border bg-card text-card-foreground\",\n          className,\n        )}\n        {...props}\n      >\n        <div data-slot=\"drawer-handle\" className=\"mx-auto mt-4 h-1.5 w-12 rounded-full bg-muted\" />\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n});\n\nexport function DrawerHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"grid gap-1.5 p-4 text-center sm:text-start\", className)}\n      {...props}\n    />\n  );\n}\nexport function DrawerFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  );\n}\nexport const DrawerTitle = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>\n>(function DrawerTitle({ className, ...props }, ref) {\n  return (\n    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.\n    <DrawerPrimitive.Title\n      ref={ref}\n      data-slot=\"drawer-title\"\n      className={cn(\"text-title leading-none\", className)}\n      {...props}\n    />\n  );\n});\nexport const DrawerDescription = forwardRef<\n  ElementRef<typeof DrawerPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>\n>(function DrawerDescription({ className, ...props }, ref) {\n  return (\n    <DrawerPrimitive.Description\n      ref={ref}\n      data-slot=\"drawer-description\"\n      className={cn(\"text-body text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,OAKK;AACP,SAAS,UAAU,uBAAuB;AAOjC,cA2BH,YA3BG;AAJF,SAAS,OAAO;AAAA,EACrB,wBAAwB;AAAA,EACxB,GAAG;AACL,GAAgD;AAC9C,SAAO,oBAAC,gBAAgB,MAAhB,EAAqB,uBAA+C,GAAG,OAAO;AACxF;AACO,IAAM,gBAAgB,gBAAgB;AACtC,IAAM,eAAe,gBAAgB;AACrC,IAAM,cAAc,gBAAgB;AAE3C,IAAM,gBAAgB,WAGpB,SAASA,eAAc,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACrD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,iCAAiC,SAAS;AAAA,MACvD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,gBAAgB,WAG3B,SAASC,eAAc,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/D,SACE,qBAAC,gBACC;AAAA,wBAAC,iBAAc;AAAA,IACf;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,SAAI,aAAU,iBAAgB,WAAU,iDAAgD;AAAA,UACxF;AAAA;AAAA;AAAA,IACH;AAAA,KACF;AAEJ,CAAC;AAEM,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAmC;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8CAA8C,SAAS;AAAA,MACpE,GAAG;AAAA;AAAA,EACN;AAEJ;AACO,SAAS,aAAa,EAAE,WAAW,GAAG,MAAM,GAAmC;AACpF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ;AACO,IAAM,cAAc,WAGzB,SAASC,aAAY,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACnD;AAAA;AAAA,IAEE;AAAA,MAAC,gBAAgB;AAAA,MAAhB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW,GAAG,2BAA2B,SAAS;AAAA,QACjD,GAAG;AAAA;AAAA,IACN;AAAA;AAEJ,CAAC;AACM,IAAM,oBAAoB,WAG/B,SAASC,mBAAkB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACzD,SACE;AAAA,IAAC,gBAAgB;AAAA,IAAhB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["DrawerOverlay","DrawerContent","DrawerTitle","DrawerDescription"]}

package/dist/chunk-SGBCLZQF.js

@@ -0,0 +1,38 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/popover/popover.tsx
+import { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx } from "react/jsx-runtime";
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = forwardRef(function PopoverContent2({ className, align = "center", sideOffset = 4, ...props }, ref) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      ref,
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "z-50 w-72 rounded-md bg-popover p-4 text-popover-foreground shadow-popover outline-none",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",
+        "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverAnchor,
+  PopoverContent
+};
+//# sourceMappingURL=chunk-SGBCLZQF.js.map

package/dist/chunk-SGBCLZQF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/popover/popover.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\";\nimport { cn } from \"../../lib/cn\";\n\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\n\nexport const PopoverContent = forwardRef<\n  ElementRef<typeof PopoverPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(function PopoverContent({ className, align = \"center\", sideOffset = 4, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        ref={ref}\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-72 rounded-md bg-popover p-4 text-popover-foreground shadow-popover outline-none\",\n          \"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95\",\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n});\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkE;AAC3E,YAAY,sBAAsB;AAa5B;AAVC,IAAM,UAA2B;AACjC,IAAM,iBAAkC;AACxC,IAAM,gBAAiC;AAEvC,IAAM,iBAAiB,WAG5B,SAASA,gBAAe,EAAE,WAAW,QAAQ,UAAU,aAAa,GAAG,GAAG,MAAM,GAAG,KAAK;AACxF,SACE,oBAAkB,yBAAjB,EACC;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;","names":["PopoverContent"]}

package/dist/chunk-SLDJYJEG.js

@@ -0,0 +1,133 @@
+"use client";
+import {
+  buttonVariants
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/alert-dialog/alert-dialog.tsx
+import {
+  forwardRef
+} from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive.Portal;
+var AlertDialogOverlay = forwardRef(function AlertDialogOverlay2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Overlay,
+    {
+      ref,
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-overlay backdrop-blur-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var AlertDialogContent = forwardRef(function AlertDialogContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        ref,
+        "data-slot": "alert-dialog-content",
+        className: cn(
+          // `max-h` + `overflow-y-auto`: without a height ceiling, a long body
+          // (a big diff, a long list of items to confirm) overflows past both
+          // viewport edges with its actions unreachable — the `-translate-y-1/2`
+          // centring only makes this worse by pushing the top half off-screen.
+          "fixed left-1/2 top-1/2 z-50 grid max-h-[85dvh] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-card p-6 text-card-foreground shadow-dialog data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+});
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn("flex flex-col gap-1.5 text-start", className),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+var AlertDialogTitle = forwardRef(function AlertDialogTitle2({ className, ...props }, ref) {
+  return (
+    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Title,
+      {
+        ref,
+        "data-slot": "alert-dialog-title",
+        className: cn("text-title leading-none", className),
+        ...props
+      }
+    )
+  );
+});
+var AlertDialogDescription = forwardRef(function AlertDialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    {
+      ref,
+      "data-slot": "alert-dialog-description",
+      className: cn("text-body text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+var AlertDialogAction = forwardRef(function AlertDialogAction2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Action,
+    {
+      ref,
+      "data-slot": "alert-dialog-action",
+      className: cn(buttonVariants(), className),
+      ...props
+    }
+  );
+});
+var AlertDialogCancel = forwardRef(function AlertDialogCancel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Cancel,
+    {
+      ref,
+      "data-slot": "alert-dialog-cancel",
+      className: cn(buttonVariants({ variant: "outline" }), className),
+      ...props
+    }
+  );
+});
+
+export {
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogPortal,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel
+};
+//# sourceMappingURL=chunk-SLDJYJEG.js.map

package/dist/chunk-SLDJYJEG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/alert-dialog/alert-dialog.tsx"],"sourcesContent":["import {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type HTMLAttributes,\n} from \"react\";\nimport * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport { cn } from \"../../lib/cn\";\nimport { buttonVariants } from \"../button\";\n\nexport const AlertDialog = AlertDialogPrimitive.Root;\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\nexport const AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nconst AlertDialogOverlay = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(function AlertDialogOverlay({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Overlay\n      ref={ref}\n      data-slot=\"alert-dialog-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-overlay backdrop-blur-overlay data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport const AlertDialogContent = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>\n>(function AlertDialogContent({ className, ...props }, ref) {\n  return (\n    <AlertDialogPortal>\n      <AlertDialogOverlay />\n      <AlertDialogPrimitive.Content\n        ref={ref}\n        data-slot=\"alert-dialog-content\"\n        className={cn(\n          // `max-h` + `overflow-y-auto`: without a height ceiling, a long body\n          // (a big diff, a long list of items to confirm) overflows past both\n          // viewport edges with its actions unreachable — the `-translate-y-1/2`\n          // centring only makes this worse by pushing the top half off-screen.\n          \"fixed left-1/2 top-1/2 z-50 grid max-h-[85dvh] w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 overflow-y-auto rounded-xl bg-card p-6 text-card-foreground shadow-dialog data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </AlertDialogPortal>\n  );\n});\n\nexport function AlertDialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\"flex flex-col gap-1.5 text-start\", className)}\n      {...props}\n    />\n  );\n}\nexport function AlertDialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n      {...props}\n    />\n  );\n}\nexport const AlertDialogTitle = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Title>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(function AlertDialogTitle({ className, ...props }, ref) {\n  return (\n    // `text-title`, matching `DialogTitle` (#286) — was `text-lg font-semibold`.\n    <AlertDialogPrimitive.Title\n      ref={ref}\n      data-slot=\"alert-dialog-title\"\n      className={cn(\"text-title leading-none\", className)}\n      {...props}\n    />\n  );\n});\nexport const AlertDialogDescription = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Description>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(function AlertDialogDescription({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Description\n      ref={ref}\n      data-slot=\"alert-dialog-description\"\n      className={cn(\"text-body text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n});\nexport const AlertDialogAction = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Action>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(function AlertDialogAction({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Action\n      ref={ref}\n      data-slot=\"alert-dialog-action\"\n      className={cn(buttonVariants(), className)}\n      {...props}\n    />\n  );\n});\nexport const AlertDialogCancel = forwardRef<\n  ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(function AlertDialogCancel({ className, ...props }, ref) {\n  return (\n    <AlertDialogPrimitive.Cancel\n      ref={ref}\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(buttonVariants({ variant: \"outline\" }), className)}\n      {...props}\n    />\n  );\n});\n"],"mappings":";;;;;;;;;AAAA;AAAA,EACE;AAAA,OAIK;AACP,YAAY,0BAA0B;AAalC,cAiBA,YAjBA;AATG,IAAM,cAAmC;AACzC,IAAM,qBAA0C;AAChD,IAAM,oBAAyC;AAEtD,IAAM,qBAAqB,WAGzB,SAASA,oBAAmB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC1D,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAEM,IAAM,qBAAqB,WAGhC,SAASC,oBAAmB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC1D,SACE,qBAAC,qBACC;AAAA,wBAAC,sBAAmB;AAAA,IACpB;AAAA,MAAsB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,UAKT;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,KACF;AAEJ,CAAC;AAEM,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAmC;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,oCAAoC,SAAS;AAAA,MAC1D,GAAG;AAAA;AAAA,EACN;AAEJ;AACO,SAAS,kBAAkB,EAAE,WAAW,GAAG,MAAM,GAAmC;AACzF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,0DAA0D,SAAS;AAAA,MAChF,GAAG;AAAA;AAAA,EACN;AAEJ;AACO,IAAM,mBAAmB,WAG9B,SAASC,kBAAiB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACxD;AAAA;AAAA,IAEE;AAAA,MAAsB;AAAA,MAArB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW,GAAG,2BAA2B,SAAS;AAAA,QACjD,GAAG;AAAA;AAAA,IACN;AAAA;AAEJ,CAAC;AACM,IAAM,yBAAyB,WAGpC,SAASC,wBAAuB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC9D,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,mCAAmC,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACM,IAAM,oBAAoB,WAG/B,SAASC,mBAAkB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACzD,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,GAAG,SAAS;AAAA,MACxC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AACM,IAAM,oBAAoB,WAG/B,SAASC,mBAAkB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACzD,SACE;AAAA,IAAsB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,UAAU,CAAC,GAAG,SAAS;AAAA,MAC9D,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;","names":["AlertDialogOverlay","AlertDialogContent","AlertDialogTitle","AlertDialogDescription","AlertDialogAction","AlertDialogCancel"]}

package/dist/chunk-SMTAPQEQ.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-SMTAPQEQ.js.map

package/dist/chunk-SMTAPQEQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-SS6EOZKZ.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-SS6EOZKZ.js.map

package/dist/chunk-SS6EOZKZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-SSQG36MH.js

@@ -0,0 +1,226 @@
+"use client";
+import {
+  lineOfParseError,
+  locateJsonPath,
+  offsetOfLine
+} from "./chunk-QF6UWWDY.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "./chunk-ZSYT5H6U.js";
+import {
+  useControllableState
+} from "./chunk-5LCN5Q2L.js";
+import {
+  Textarea
+} from "./chunk-FZEG2R3E.js";
+import {
+  Badge
+} from "./chunk-HNLYRHAU.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/spec-playground/spec-playground.tsx
+import {
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { Braces, ChevronDown, CircleAlert, CircleCheck, RotateCcw } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_SPEC_PLAYGROUND_LABELS = {
+  editor: "Spec (JSON)",
+  preview: "Rendered result",
+  errors: "Problems",
+  loadExample: "Load example",
+  reset: "Reset",
+  valid: "Valid",
+  errorCount: (count) => count === 1 ? "1 error" : `${count} errors`,
+  parseError: "Parse error",
+  showingLastValid: "Showing last valid",
+  nothingValid: "Nothing valid to render yet.",
+  line: (line) => `line ${line}`
+};
+function check(text, validate) {
+  let json;
+  try {
+    json = JSON.parse(text);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : String(error);
+    return { status: "parse-error", errors: [{ path: "", code: "parse-error", message }] };
+  }
+  const result = validate(json);
+  return result.ok ? { status: "valid", spec: result.spec, errors: [] } : { status: "invalid", errors: result.errors };
+}
+function SpecPlaygroundInner({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  validate,
+  render,
+  examples = [],
+  editor,
+  onErrorSelect,
+  debounceMs = 250,
+  labels: labelsProp,
+  className,
+  ...props
+}, ref) {
+  const labels = { ...DEFAULT_SPEC_PLAYGROUND_LABELS, ...labelsProp };
+  const initial = defaultValue ?? examples[0]?.value ?? "";
+  const [resetValue] = useState(initial);
+  const [value, setValue] = useControllableState(valueProp, initial, onChange);
+  const textareaRef = useRef(null);
+  const [settled, setSettled] = useState(value);
+  useEffect(() => {
+    if (settled === value) return;
+    const timer = setTimeout(() => setSettled(value), debounceMs);
+    return () => clearTimeout(timer);
+  }, [value, settled, debounceMs]);
+  const checked = useMemo(() => check(settled, validate), [settled, validate]);
+  const lastValidRef = useRef(null);
+  if (checked.status === "valid") lastValidRef.current = { spec: checked.spec };
+  const shown = checked.status === "valid" ? { spec: checked.spec } : lastValidRef.current;
+  const stale = checked.status !== "valid" && shown !== null;
+  const lineOf = (error) => error.code === "parse-error" ? lineOfParseError(settled, error.message) : locateJsonPath(settled, error.path);
+  const selectError = (error) => {
+    const line = lineOf(error);
+    if (onErrorSelect) return onErrorSelect(error, line);
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const offset = line === void 0 ? 0 : offsetOfLine(textarea.value, line);
+    textarea.focus();
+    textarea.setSelectionRange(offset, offset);
+  };
+  const errorListId = `${props.id ?? "spec-playground"}-errors`;
+  const hasErrors = checked.errors.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "spec-playground",
+      "data-status": checked.status,
+      className: cn("grid min-w-0 gap-4 lg:grid-cols-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-slot": "spec-playground-source", className: "flex min-w-0 flex-col gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { "data-slot": "spec-playground-toolbar", className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "me-auto", children: /* @__PURE__ */ jsxs(
+              Badge,
+              {
+                "data-slot": "spec-playground-status",
+                "data-status": checked.status,
+                variant: checked.status === "valid" ? "success" : checked.status === "invalid" ? "destructive" : "warning",
+                className: "gap-1",
+                children: [
+                  checked.status === "valid" ? /* @__PURE__ */ jsx(CircleCheck, { "aria-hidden": "true", size: 14 }) : checked.status === "invalid" ? /* @__PURE__ */ jsx(CircleAlert, { "aria-hidden": "true", size: 14 }) : /* @__PURE__ */ jsx(Braces, { "aria-hidden": "true", size: 14 }),
+                  checked.status === "valid" ? labels.valid : checked.status === "invalid" ? labels.errorCount(checked.errors.length) : labels.parseError
+                ]
+              }
+            ) }),
+            examples.length > 0 ? /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+              /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", "data-slot": "spec-playground-examples", children: [
+                labels.loadExample,
+                /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", size: 14 })
+              ] }) }),
+              /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", children: examples.map((example) => /* @__PURE__ */ jsx(
+                DropdownMenuItem,
+                {
+                  "data-example-id": example.id,
+                  onSelect: () => setValue(example.value),
+                  children: example.label
+                },
+                example.id
+              )) })
+            ] }) : null,
+            /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                "data-slot": "spec-playground-reset",
+                onClick: () => setValue(resetValue),
+                children: [
+                  /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true", size: 14 }),
+                  labels.reset
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { "data-slot": "spec-playground-editor", className: "min-h-80 min-w-0", children: editor ?? /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              ref: textareaRef,
+              "data-slot": "spec-playground-textarea",
+              "aria-label": labels.editor,
+              "aria-invalid": hasErrors || void 0,
+              "aria-describedby": hasErrors ? errorListId : void 0,
+              spellCheck: false,
+              value,
+              onChange: (event) => setValue(event.target.value),
+              className: "h-80 min-h-80 resize-y font-mono text-code"
+            }
+          ) }),
+          hasErrors ? /* @__PURE__ */ jsx(
+            "ol",
+            {
+              id: errorListId,
+              "aria-label": labels.errors,
+              "data-slot": "spec-playground-errors",
+              className: "flex flex-col gap-1",
+              children: checked.errors.map((error) => {
+                const line = lineOf(error);
+                return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "data-slot": "spec-playground-error",
+                    "data-path": error.path,
+                    "data-code": error.code,
+                    onClick: () => selectError(error),
+                    className: "focus-ring flex w-full min-w-0 flex-wrap items-baseline gap-x-2 rounded-md border-s-2 border-s-destructive px-2 py-1 text-start text-caption hover:bg-muted",
+                    children: [
+                      error.path ? /* @__PURE__ */ jsx("code", { className: "font-mono text-code", children: error.path }) : null,
+                      /* @__PURE__ */ jsx("span", { className: "font-mono text-code text-destructive-text", children: error.code }),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words text-muted-foreground", children: error.message }),
+                      line !== void 0 ? /* @__PURE__ */ jsx("span", { className: "text-meta text-muted-foreground", children: labels.line(line) }) : null
+                    ]
+                  }
+                ) }, `${error.path}|${error.code}|${error.message}`);
+              })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "section",
+          {
+            "aria-label": labels.preview,
+            "data-slot": "spec-playground-preview",
+            "data-stale": stale ? "" : void 0,
+            className: "flex min-w-0 flex-col gap-2",
+            children: [
+              stale ? /* @__PURE__ */ jsx(Badge, { variant: "outline", "data-slot": "spec-playground-stale", className: "self-start", children: labels.showingLastValid }) : null,
+              shown ? render(shown.spec) : /* @__PURE__ */ jsx("p", { className: "text-caption text-muted-foreground", children: labels.nothingValid })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var SpecPlayground = forwardRef(SpecPlaygroundInner);
+SpecPlayground.displayName = "SpecPlayground";
+
+export {
+  DEFAULT_SPEC_PLAYGROUND_LABELS,
+  SpecPlayground
+};
+//# sourceMappingURL=chunk-SSQG36MH.js.map

package/dist/chunk-SSQG36MH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/spec-playground/spec-playground.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport { Braces, ChevronDown, CircleAlert, CircleCheck, RotateCcw } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../lib/use-controllable-state\";\nimport { Badge } from \"../badge\";\nimport { Button } from \"../button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu\";\nimport { Textarea } from \"../textarea\";\nimport { lineOfParseError, locateJsonPath, offsetOfLine } from \"./locate-json-path\";\n\n/** One problem a validator reports — the shape both the A2UI and DashboardSpec validators use. */\nexport interface SpecPlaygroundError {\n  /** JSON-path-like address of the problem (`root.children[2].props.label`, `$.tiles[0]`). */\n  path: string;\n  /** The validator's machine-readable code (`missing-prop`, `overlap`, …). */\n  code: string;\n  message: string;\n}\n\n/** What `validate` returns: the typed spec, or the validator's own errors. */\nexport type SpecPlaygroundValidation<TSpec> =\n  | { ok: true; spec: TSpec }\n  | { ok: false; errors: readonly SpecPlaygroundError[] };\n\n/** An entry in the `Load example` menu. */\nexport interface SpecPlaygroundExample {\n  id: string;\n  label: string;\n  /** The JSON text loaded into the editor. */\n  value: string;\n}\n\n/** The playground's status: what the last validated text turned out to be. */\nexport type SpecPlaygroundStatus = \"valid\" | \"invalid\" | \"parse-error\";\n\n/** Every string the playground renders — pass your own to localize it. */\nexport interface SpecPlaygroundLabels {\n  /** Accessible name of the default textarea editor. */\n  editor: string;\n  /** Accessible name of the rendered-result region. */\n  preview: string;\n  /** Accessible name of the error list. */\n  errors: string;\n  /** Trigger of the examples menu. */\n  loadExample: string;\n  /** Resets the editor to its initial text. */\n  reset: string;\n  /** Status chip: the text validates. */\n  valid: string;\n  /** Status chip: the validator reported `count` errors. */\n  errorCount: (count: number) => string;\n  /** Status chip: the text is not JSON. */\n  parseError: string;\n  /** Shown over the render when it is the last valid spec, not the current text. */\n  showingLastValid: string;\n  /** Shown in the render pane before any text has validated. */\n  nothingValid: string;\n  /** Suffix naming the editor line an error points at. */\n  line: (line: number) => string;\n}\n\nexport const DEFAULT_SPEC_PLAYGROUND_LABELS: SpecPlaygroundLabels = {\n  editor: \"Spec (JSON)\",\n  preview: \"Rendered result\",\n  errors: \"Problems\",\n  loadExample: \"Load example\",\n  reset: \"Reset\",\n  valid: \"Valid\",\n  errorCount: (count) => (count === 1 ? \"1 error\" : `${count} errors`),\n  parseError: \"Parse error\",\n  showingLastValid: \"Showing last valid\",\n  nothingValid: \"Nothing valid to render yet.\",\n  line: (line) => `line ${line}`,\n};\n\nexport interface SpecPlaygroundProps<TSpec> extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\"\n> {\n  /** The JSON text (controlled). */\n  value?: string;\n  /** Initial JSON text (uncontrolled); also what `Reset` restores. Default: the first example. */\n  defaultValue?: string;\n  /** Called with the new text on every edit, example load and reset. */\n  onChange?: (value: string) => void;\n  /** Checks the parsed JSON; the errors shown are exactly the ones it returns. */\n  validate: (json: unknown) => SpecPlaygroundValidation<TSpec>;\n  /** Renders a validated spec. */\n  render: (spec: TSpec) => ReactNode;\n  /** Entries of the `Load example` menu (the menu is hidden without any). */\n  examples?: readonly SpecPlaygroundExample[];\n  /**\n   * The editor. Bind it to `value`/`onChange` yourself. Default: a `Textarea`, so the\n   * playground works without a code editor.\n   */\n  editor?: ReactNode;\n  /**\n   * Called when an error is chosen, with the editor line its path resolves to — move a custom\n   * editor's caret there. The default textarea handles this itself.\n   */\n  onErrorSelect?: (error: SpecPlaygroundError, line: number | undefined) => void;\n  /** Milliseconds between the last edit and validation. Default 250. */\n  debounceMs?: number;\n  labels?: Partial<SpecPlaygroundLabels>;\n}\n\ntype Checked<TSpec> =\n  | { status: \"valid\"; spec: TSpec; errors: readonly SpecPlaygroundError[] }\n  | { status: \"invalid\" | \"parse-error\"; errors: readonly SpecPlaygroundError[] };\n\nfunction check<TSpec>(\n  text: string,\n  validate: (json: unknown) => SpecPlaygroundValidation<TSpec>,\n): Checked<TSpec> {\n  let json: unknown;\n  try {\n    json = JSON.parse(text);\n  } catch (error) {\n    const message = error instanceof Error ? error.message : String(error);\n    return { status: \"parse-error\", errors: [{ path: \"\", code: \"parse-error\", message }] };\n  }\n  const result = validate(json);\n  return result.ok\n    ? { status: \"valid\", spec: result.spec, errors: [] }\n    : { status: \"invalid\", errors: result.errors };\n}\n\nfunction SpecPlaygroundInner<TSpec>(\n  {\n    value: valueProp,\n    defaultValue,\n    onChange,\n    validate,\n    render,\n    examples = [],\n    editor,\n    onErrorSelect,\n    debounceMs = 250,\n    labels: labelsProp,\n    className,\n    ...props\n  }: SpecPlaygroundProps<TSpec>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const labels = { ...DEFAULT_SPEC_PLAYGROUND_LABELS, ...labelsProp };\n  const initial = defaultValue ?? examples[0]?.value ?? \"\";\n  const [resetValue] = useState(initial);\n  const [value, setValue] = useControllableState(valueProp, initial, onChange);\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n  // Validation trails the text by `debounceMs`; the first render validates immediately.\n  const [settled, setSettled] = useState(value);\n  useEffect(() => {\n    if (settled === value) return;\n    const timer = setTimeout(() => setSettled(value), debounceMs);\n    return () => clearTimeout(timer);\n  }, [value, settled, debounceMs]);\n\n  const checked = useMemo(() => check(settled, validate), [settled, validate]);\n\n  // The last spec that validated — kept on screen while the current text does not.\n  const lastValidRef = useRef<{ spec: TSpec } | null>(null);\n  if (checked.status === \"valid\") lastValidRef.current = { spec: checked.spec };\n  const shown = checked.status === \"valid\" ? { spec: checked.spec } : lastValidRef.current;\n  const stale = checked.status !== \"valid\" && shown !== null;\n\n  const lineOf = (error: SpecPlaygroundError) =>\n    error.code === \"parse-error\"\n      ? lineOfParseError(settled, error.message)\n      : locateJsonPath(settled, error.path);\n\n  const selectError = (error: SpecPlaygroundError) => {\n    const line = lineOf(error);\n    if (onErrorSelect) return onErrorSelect(error, line);\n    const textarea = textareaRef.current;\n    if (!textarea) return;\n    const offset = line === undefined ? 0 : offsetOfLine(textarea.value, line);\n    textarea.focus();\n    textarea.setSelectionRange(offset, offset);\n  };\n\n  const errorListId = `${props.id ?? \"spec-playground\"}-errors`;\n  const hasErrors = checked.errors.length > 0;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"spec-playground\"\n      data-status={checked.status}\n      className={cn(\"grid min-w-0 gap-4 lg:grid-cols-2\", className)}\n      {...props}\n    >\n      <div data-slot=\"spec-playground-source\" className=\"flex min-w-0 flex-col gap-3\">\n        <div data-slot=\"spec-playground-toolbar\" className=\"flex flex-wrap items-center gap-2\">\n          <span role=\"status\" aria-live=\"polite\" className=\"me-auto\">\n            <Badge\n              data-slot=\"spec-playground-status\"\n              data-status={checked.status}\n              variant={\n                checked.status === \"valid\"\n                  ? \"success\"\n                  : checked.status === \"invalid\"\n                    ? \"destructive\"\n                    : \"warning\"\n              }\n              className=\"gap-1\"\n            >\n              {checked.status === \"valid\" ? (\n                <CircleCheck aria-hidden=\"true\" size={14} />\n              ) : checked.status === \"invalid\" ? (\n                <CircleAlert aria-hidden=\"true\" size={14} />\n              ) : (\n                <Braces aria-hidden=\"true\" size={14} />\n              )}\n              {checked.status === \"valid\"\n                ? labels.valid\n                : checked.status === \"invalid\"\n                  ? labels.errorCount(checked.errors.length)\n                  : labels.parseError}\n            </Badge>\n          </span>\n          {examples.length > 0 ? (\n            <DropdownMenu>\n              <DropdownMenuTrigger asChild>\n                <Button variant=\"outline\" size=\"sm\" data-slot=\"spec-playground-examples\">\n                  {labels.loadExample}\n                  <ChevronDown aria-hidden=\"true\" size={14} />\n                </Button>\n              </DropdownMenuTrigger>\n              <DropdownMenuContent align=\"end\">\n                {examples.map((example) => (\n                  <DropdownMenuItem\n                    key={example.id}\n                    data-example-id={example.id}\n                    onSelect={() => setValue(example.value)}\n                  >\n                    {example.label}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuContent>\n            </DropdownMenu>\n          ) : null}\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            data-slot=\"spec-playground-reset\"\n            onClick={() => setValue(resetValue)}\n          >\n            <RotateCcw aria-hidden=\"true\" size={14} />\n            {labels.reset}\n          </Button>\n        </div>\n        <div data-slot=\"spec-playground-editor\" className=\"min-h-80 min-w-0\">\n          {editor ?? (\n            <Textarea\n              ref={textareaRef}\n              data-slot=\"spec-playground-textarea\"\n              aria-label={labels.editor}\n              aria-invalid={hasErrors || undefined}\n              aria-describedby={hasErrors ? errorListId : undefined}\n              spellCheck={false}\n              value={value}\n              onChange={(event) => setValue(event.target.value)}\n              className=\"h-80 min-h-80 resize-y font-mono text-code\"\n            />\n          )}\n        </div>\n        {hasErrors ? (\n          <ol\n            id={errorListId}\n            aria-label={labels.errors}\n            data-slot=\"spec-playground-errors\"\n            className=\"flex flex-col gap-1\"\n          >\n            {checked.errors.map((error) => {\n              const line = lineOf(error);\n              return (\n                <li key={`${error.path}|${error.code}|${error.message}`}>\n                  <button\n                    type=\"button\"\n                    data-slot=\"spec-playground-error\"\n                    data-path={error.path}\n                    data-code={error.code}\n                    onClick={() => selectError(error)}\n                    className=\"focus-ring flex w-full min-w-0 flex-wrap items-baseline gap-x-2 rounded-md border-s-2 border-s-destructive px-2 py-1 text-start text-caption hover:bg-muted\"\n                  >\n                    {error.path ? <code className=\"font-mono text-code\">{error.path}</code> : null}\n                    <span className=\"font-mono text-code text-destructive-text\">{error.code}</span>\n                    <span className=\"min-w-0 break-words text-muted-foreground\">\n                      {error.message}\n                    </span>\n                    {line !== undefined ? (\n                      <span className=\"text-meta text-muted-foreground\">{labels.line(line)}</span>\n                    ) : null}\n                  </button>\n                </li>\n              );\n            })}\n          </ol>\n        ) : null}\n      </div>\n      <section\n        aria-label={labels.preview}\n        data-slot=\"spec-playground-preview\"\n        data-stale={stale ? \"\" : undefined}\n        className=\"flex min-w-0 flex-col gap-2\"\n      >\n        {stale ? (\n          <Badge variant=\"outline\" data-slot=\"spec-playground-stale\" className=\"self-start\">\n            {labels.showingLastValid}\n          </Badge>\n        ) : null}\n        {shown ? (\n          render(shown.spec)\n        ) : (\n          <p className=\"text-caption text-muted-foreground\">{labels.nothingValid}</p>\n        )}\n      </section>\n    </div>\n  );\n}\n\n/**\n * A live spec editor: JSON on the left, what it renders on the right (stacked below 1024 px).\n * Edits are validated after a short pause by the host's own `validate`; its errors are listed\n * under the editor (`path · code · message`, click to jump to the line) and the render keeps\n * the last valid spec, marked as such, until the text validates again. The editor, validator\n * and renderer all come from the host — this component owns only the loop between them.\n */\nexport const SpecPlayground = forwardRef(SpecPlaygroundInner) as <TSpec>(\n  props: SpecPlaygroundProps<TSpec> & { ref?: Ref<HTMLDivElement> },\n) => ReactElement;\n(SpecPlayground as { displayName?: string }).displayName = \"SpecPlayground\";\n"],"mappings":"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","names":[]}