@elabs-ai/components-ui 4.2.0 → 5.1.0

package/README.md

@@ -15,6 +15,7 @@ no token required. See `docs/CONSUMING.md`.
 ```bash
 pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui
 pnpm add @hookform/resolvers@"^3.9.1"  # optional peer
+pnpm add motion@"^12.26.2"  # optional peer
 pnpm add react-hook-form@"^7.54.2"  # optional peer
 ```
 
@@ -45,7 +46,7 @@ import { ThemeProvider } from "@elabs-ai/components-tokens";
 
 ## What's in it
 
-379 exported components — including `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger`, `AdvancedGroup`.
+409 exported components — including `Accordion`, `AccordionContent`, `AccordionItem`, `AccordionTrigger`, `AdvancedGroup`.
 
 Don't guess the API — ask the CLI:
 

package/dist/chunk-22Z735L6.js

@@ -0,0 +1,18 @@
+"use client";
+
+// src/components/field/field-context.ts
+import { createContext, use } from "react";
+var FieldContext = createContext(null);
+function useFieldContext(component) {
+  const ctx = use(FieldContext);
+  if (!ctx) {
+    throw new Error(`<${component}> must be rendered inside a <FieldRoot>.`);
+  }
+  return ctx;
+}
+
+export {
+  FieldContext,
+  useFieldContext
+};
+//# sourceMappingURL=chunk-22Z735L6.js.map

package/dist/chunk-22Z735L6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/field/field-context.ts"],"sourcesContent":["import { createContext, use } from \"react\";\n\n/**\n * Shared, lifted state for the `Field*` compound anatomy (`FieldRoot` +\n * `FieldLabel`/`FieldControl`/`FieldDescription`/`FieldError`). `FieldRoot`\n * is the only place this state is produced; every part reads the INTERFACE\n * below rather than receiving positional props, so parts can be composed in\n * any order/layout (compound-component + lifted-state convention — see\n * `.claude/rules/component-api.md` \"Composition patterns\").\n */\nexport interface FieldContextValue {\n  /**\n   * The id `FieldLabel`'s `htmlFor` points to — the FIRST `FieldControl`\n   * mounted under this `FieldRoot`, by JSX order (self-registered; see\n   * `registerControl`). `undefined` until a control has registered.\n   */\n  labelFor: string | undefined;\n  /** Registers a `FieldControl`'s resolved id (called while it is mounted). */\n  registerControl: (id: string) => void;\n  /** Unregisters a `FieldControl`'s id (called on unmount / when its id changes). */\n  unregisterControl: (id: string) => void;\n  /** `FieldRoot`'s `invalid` prop — drives `aria-invalid` on every `FieldControl` and error styling on `FieldLabel`. */\n  invalid: boolean;\n  /** `FieldRoot`'s `required` prop — drives `aria-required` on every `FieldControl`. */\n  required: boolean;\n  /**\n   * The composed `aria-describedby` value from every mounted `FieldDescription`/\n   * `FieldError` instance WITH content, descriptions first (in mount order),\n   * then errors (in mount order) — a fixed semantic order regardless of DOM\n   * position, so more than one of either part (or reordering them relative to\n   * `FieldControl`) never scrambles the announced order. `undefined` when\n   * nothing is registered.\n   */\n  describedBy: string | undefined;\n  /**\n   * Registers one `FieldDescription` INSTANCE's own id (called while it has\n   * content). Each instance generates and registers its own id — this is not\n   * a single shared slot, so more than one `FieldDescription` under one\n   * `FieldRoot` is supported without id collisions.\n   */\n  registerDescription: (id: string) => void;\n  /** Unregisters one `FieldDescription` instance's id (on unmount / when content is cleared). Removes only that instance's id. */\n  unregisterDescription: (id: string) => void;\n  /** Registers one `FieldError` instance's own id (called while it has content). Same per-instance contract as `registerDescription`. */\n  registerError: (id: string) => void;\n  /** Unregisters one `FieldError` instance's id (on unmount / when content is cleared). Removes only that instance's id. */\n  unregisterError: (id: string) => void;\n}\n\nexport const FieldContext = createContext<FieldContextValue | null>(null);\n\n/** Reads the shared `Field*` context; throws with the calling component's name when used outside a `FieldRoot`. */\nexport function useFieldContext(component: string): FieldContextValue {\n  const ctx = use(FieldContext);\n  if (!ctx) {\n    throw new Error(`<${component}> must be rendered inside a <FieldRoot>.`);\n  }\n  return ctx;\n}\n"],"mappings":";;;AAAA,SAAS,eAAe,WAAW;AAiD5B,IAAM,eAAe,cAAwC,IAAI;AAGjE,SAAS,gBAAgB,WAAsC;AACpE,QAAM,MAAM,IAAI,YAAY;AAC5B,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,IAAI,SAAS,0CAA0C;AAAA,EACzE;AACA,SAAO;AACT;","names":[]}

package/dist/chunk-23E62DNM.js

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

package/dist/chunk-23E62DNM.js.map

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

package/dist/chunk-2AABRSIN.js

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

package/dist/chunk-2AABRSIN.js.map

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

package/dist/chunk-2DFB4YTK.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-SGBCLZQF.js";
+import {
+  useControllableState
+} from "./chunk-5LCN5Q2L.js";
+import {
+  Calendar
+} from "./chunk-B3DANITU.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/date-picker/date-picker.tsx
+import { forwardRef } from "react";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DatePicker = forwardRef(function DatePicker2({ value, onValueChange, placeholder = "Pick a date", className }, ref) {
+  const { formatDate } = useLocale();
+  const [date, setDate] = useControllableState(value, void 0, onValueChange);
+  const label = date ? formatDate(date, { dateStyle: "medium" }) : placeholder;
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        ref,
+        variant: "outline",
+        className: cn(
+          "w-full justify-start gap-2 text-start font-normal",
+          !date && "text-muted-foreground",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CalendarIcon, { className: "size-4" }),
+          label
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: date, onSelect: setDate, autoFocus: true }) })
+  ] });
+});
+
+export {
+  DatePicker
+};
+//# sourceMappingURL=chunk-2DFB4YTK.js.map

package/dist/chunk-2DFB4YTK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/date-picker/date-picker.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef } from \"react\";\nimport { Calendar as CalendarIcon } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../lib/use-controllable-state\";\nimport { Button } from \"../button\";\nimport { Calendar } from \"../calendar\";\nimport { useLocale } from \"../locale-provider\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\n\nexport interface DatePickerProps {\n  value?: Date;\n  onValueChange?: (date?: Date) => void;\n  placeholder?: string;\n  className?: string;\n}\n\n/** Single-date picker (Popover + Calendar). Controlled or uncontrolled. */\nexport const DatePicker = forwardRef<HTMLButtonElement, DatePickerProps>(function DatePicker(\n  { value, onValueChange, placeholder = \"Pick a date\", className },\n  ref,\n) {\n  const { formatDate } = useLocale();\n  const [date, setDate] = useControllableState<Date | undefined>(value, undefined, onValueChange);\n  const label = date ? formatDate(date, { dateStyle: \"medium\" }) : placeholder;\n\n  return (\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button\n          ref={ref}\n          variant=\"outline\"\n          className={cn(\n            \"w-full justify-start gap-2 text-start font-normal\",\n            !date && \"text-muted-foreground\",\n            className,\n          )}\n        >\n          <CalendarIcon className=\"size-4\" />\n          {label}\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent className=\"w-auto p-0\" align=\"start\">\n        <Calendar mode=\"single\" selected={date} onSelect={setDate} autoFocus />\n      </PopoverContent>\n    </Popover>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAEA,SAAS,kBAAkB;AAC3B,SAAS,YAAY,oBAAoB;AA2BjC,SASE,KATF;AAXD,IAAM,aAAa,WAA+C,SAASA,YAChF,EAAE,OAAO,eAAe,cAAc,eAAe,UAAU,GAC/D,KACA;AACA,QAAM,EAAE,WAAW,IAAI,UAAU;AACjC,QAAM,CAAC,MAAM,OAAO,IAAI,qBAAuC,OAAO,QAAW,aAAa;AAC9F,QAAM,QAAQ,OAAO,WAAW,MAAM,EAAE,WAAW,SAAS,CAAC,IAAI;AAEjE,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MACrB;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAQ;AAAA,QACR,WAAW;AAAA,UACT;AAAA,UACA,CAAC,QAAQ;AAAA,UACT;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,gBAAa,WAAU,UAAS;AAAA,UAChC;AAAA;AAAA;AAAA,IACH,GACF;AAAA,IACA,oBAAC,kBAAe,WAAU,cAAa,OAAM,SAC3C,8BAAC,YAAS,MAAK,UAAS,UAAU,MAAM,UAAU,SAAS,WAAS,MAAC,GACvE;AAAA,KACF;AAEJ,CAAC;","names":["DatePicker"]}

package/dist/chunk-2SBYBN45.js

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

package/dist/chunk-2SBYBN45.js.map

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

package/dist/chunk-2ZMPAD6C.js

@@ -0,0 +1,357 @@
+"use client";
+import {
+  RevealOnEnter
+} from "./chunk-G3OTDYCD.js";
+import {
+  isMotionAtFloor,
+  readMotionFactor
+} from "./chunk-3JAEQNCB.js";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger
+} from "./chunk-QKZX5HDY.js";
+import {
+  CommandChip
+} from "./chunk-3BZBNDRP.js";
+import {
+  useCopyToClipboard
+} from "./chunk-FBJ2JSRA.js";
+import {
+  Card
+} from "./chunk-7KV7H2TW.js";
+import {
+  Skeleton
+} from "./chunk-UPGIQXUY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/surface-tour/surface-tour.tsx
+import {
+  forwardRef,
+  Suspense,
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { Check, Copy } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var HINT_DELAY_MS = 800;
+function hintSeen(key) {
+  try {
+    return window.sessionStorage.getItem(key) === "1";
+  } catch {
+    return false;
+  }
+}
+function markHintSeen(key) {
+  try {
+    window.sessionStorage.setItem(key, "1");
+  } catch {
+  }
+}
+var AffordanceHint = forwardRef(
+  function AffordanceHint2({ storageKey, delay = HINT_DELAY_MS, className, children, ...props }, ref) {
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, () => innerRef.current, []);
+    const [visible, setVisible] = useState(false);
+    useEffect(() => {
+      const el = innerRef.current;
+      const host = el?.parentElement;
+      if (!el || !host || hintSeen(storageKey)) return;
+      const wait = isMotionAtFloor(readMotionFactor(el)) ? 0 : delay;
+      const timer = window.setTimeout(() => {
+        markHintSeen(storageKey);
+        setVisible(true);
+      }, wait);
+      const dismiss = () => {
+        window.clearTimeout(timer);
+        markHintSeen(storageKey);
+        setVisible(false);
+        host.removeEventListener("pointerdown", dismiss, true);
+        host.removeEventListener("keydown", dismiss, true);
+      };
+      host.addEventListener("pointerdown", dismiss, true);
+      host.addEventListener("keydown", dismiss, true);
+      return () => {
+        window.clearTimeout(timer);
+        host.removeEventListener("pointerdown", dismiss, true);
+        host.removeEventListener("keydown", dismiss, true);
+      };
+    }, [storageKey, delay]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: innerRef,
+        "aria-hidden": "true",
+        "data-slot": "affordance-hint",
+        "data-visible": visible ? "" : void 0,
+        className: cn(
+          "pointer-events-none absolute end-3 top-3 z-10 rounded-full bg-primary px-2.5 py-1 text-meta text-primary-foreground shadow-ring-sm transition-opacity duration-base ease-standard",
+          visible ? "opacity-100" : "opacity-0",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+var DEFAULT_SURFACE_TOUR_ACTIONS_LABELS = {
+  openInStorybook: "Open in Storybook",
+  copyPrompt: "Copy prompt",
+  promptCopied: "Prompt copied",
+  promptCopyFailed: "Could not copy the prompt",
+  scaffold: "Scaffold",
+  copyCommand: "Copy scaffold command"
+};
+var SurfaceTourActions = forwardRef(
+  function SurfaceTourActions2({ storybookHref, prompt, command, labels: labelsProp, className, ...props }, ref) {
+    const labels = { ...DEFAULT_SURFACE_TOUR_ACTIONS_LABELS, ...labelsProp };
+    const { copied, copy } = useCopyToClipboard();
+    const [failed, setFailed] = useState(false);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "surface-tour-actions",
+        className: cn("flex min-w-0 flex-wrap items-center gap-2", className),
+        ...props,
+        children: [
+          storybookHref ? /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx("a", { href: storybookHref, "data-slot": "surface-tour-actions-storybook", children: labels.openInStorybook }) }) : null,
+          prompt ? /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              "data-slot": "surface-tour-actions-prompt",
+              "data-copied": copied ? "" : void 0,
+              onClick: () => {
+                void copy(prompt).then((ok) => setFailed(!ok));
+              },
+              children: [
+                copied ? /* @__PURE__ */ jsx(Check, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Copy, { "aria-hidden": "true" }),
+                labels.copyPrompt
+              ]
+            }
+          ) : null,
+          command ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 max-w-full items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 text-meta text-muted-foreground", children: labels.scaffold }),
+            /* @__PURE__ */ jsx(
+              CommandChip,
+              {
+                className: "min-w-0",
+                hosts: [{ id: "scaffold", label: labels.scaffold, command }],
+                labels: { copy: labels.copyCommand }
+              }
+            )
+          ] }) : null,
+          /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: copied ? labels.promptCopied : failed ? labels.promptCopyFailed : "" })
+        ]
+      }
+    );
+  }
+);
+function transitionMs(el) {
+  if (!el || typeof window === "undefined") return 0;
+  const raw = window.getComputedStyle(el).transitionDuration.split(",")[0]?.trim() ?? "";
+  const value = parseFloat(raw);
+  if (!Number.isFinite(value)) return 0;
+  return raw.endsWith("ms") ? value : value * 1e3;
+}
+function readHash(hashKey) {
+  const match = new RegExp(`^#${hashKey}=([^&]+)$`).exec(window.location.hash);
+  return match?.[1] ? decodeURIComponent(match[1]) : null;
+}
+var SurfaceTour = forwardRef(function SurfaceTour2({
+  tabs,
+  defaultTab,
+  onTabChange,
+  title,
+  description,
+  hashKey,
+  frameClassName,
+  className,
+  ...props
+}, ref) {
+  const rootRef = useRef(null);
+  useImperativeHandle(ref, () => rootRef.current, []);
+  const titleId = useId();
+  const initial = tabs.find((t) => t.id === defaultTab)?.id ?? tabs[0]?.id ?? "";
+  const [active, setActive] = useState(initial);
+  const [layers, setLayers] = useState([{ id: initial, leaving: false, entering: false }]);
+  const frameRef = useRef(null);
+  const prefetched = useRef(/* @__PURE__ */ new Set());
+  const prefetch = useCallback((tab) => {
+    if (!tab.prefetch || prefetched.current.has(tab.id)) return;
+    prefetched.current.add(tab.id);
+    tab.prefetch();
+  }, []);
+  const select = useCallback(
+    (id, { fromHash = false } = {}) => {
+      if (id === active || !tabs.some((t) => t.id === id)) return;
+      setLayers([
+        { id: active, leaving: true, entering: false },
+        { id, leaving: false, entering: !fromHash }
+      ]);
+      setActive(id);
+      if (hashKey && !fromHash && typeof window !== "undefined") {
+        const { pathname, search } = window.location;
+        window.history.replaceState(
+          window.history.state,
+          "",
+          `${pathname}${search}#${hashKey}=${encodeURIComponent(id)}`
+        );
+      }
+      onTabChange?.(id);
+    },
+    [active, tabs, hashKey, onTabChange]
+  );
+  useEffect(() => {
+    if (!hashKey) return;
+    const id = readHash(hashKey);
+    if (id && tabs.some((t) => t.id === id)) {
+      select(id, { fromHash: true });
+      rootRef.current?.scrollIntoView({ block: "start" });
+    }
+  }, []);
+  useEffect(() => {
+    if (!layers.some((l) => l.leaving)) return;
+    const ms = transitionMs(frameRef.current?.querySelector("[data-leaving]") ?? null);
+    const done = () => setLayers((current) => current.filter((l) => !l.leaving));
+    if (ms <= 1) {
+      done();
+      return;
+    }
+    const timer = window.setTimeout(done, ms);
+    return () => window.clearTimeout(timer);
+  }, [layers]);
+  useEffect(() => {
+    const frame = frameRef.current;
+    if (!frame || typeof ResizeObserver !== "function") return;
+    let tallest = 0;
+    const observer = new ResizeObserver(() => {
+      const height = frame.getBoundingClientRect().height;
+      if (height > tallest) {
+        tallest = height;
+        frame.style.minHeight = `${Math.ceil(height)}px`;
+      }
+    });
+    observer.observe(frame);
+    return () => observer.disconnect();
+  }, []);
+  const activeTab = tabs.find((t) => t.id === active);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      ref: rootRef,
+      "data-slot": "surface-tour",
+      "aria-labelledby": title ? titleId : void 0,
+      className: cn("flex w-full min-w-0 flex-col gap-6", className),
+      ...props,
+      children: [
+        title || description ? /* @__PURE__ */ jsxs(RevealOnEnter, { as: "header", "data-slot": "surface-tour-header", className: "flex flex-col gap-2", children: [
+          title ? /* @__PURE__ */ jsx("h2", { id: titleId, className: "text-display text-foreground", children: title }) : null,
+          description ? /* @__PURE__ */ jsx("p", { className: "text-body text-muted-foreground", children: description }) : null
+        ] }) : null,
+        /* @__PURE__ */ jsxs(
+          Tabs,
+          {
+            value: active,
+            onValueChange: (id) => select(id),
+            className: "flex min-w-0 flex-col gap-4",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "surface-tour-tabs",
+                  className: cn(
+                    "sticky z-20 bg-background py-2",
+                    // Overflow affordance on narrow screens: the strip scrolls, the end edge fades.
+                    "max-md:after:pointer-events-none max-md:after:absolute max-md:after:inset-y-0 max-md:after:end-0 max-md:after:w-10 max-md:after:from-background ltr:max-md:after:bg-linear-to-l rtl:max-md:after:bg-linear-to-r"
+                  ),
+                  style: { top: "var(--surface-tour-sticky-top, 0px)" },
+                  children: /* @__PURE__ */ jsx(TabsList, { className: "w-full justify-start md:w-auto", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+                    TabsTrigger,
+                    {
+                      value: tab.id,
+                      onPointerEnter: () => prefetch(tab),
+                      onFocus: () => prefetch(tab),
+                      children: tab.label
+                    },
+                    tab.id
+                  )) })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Card,
+                {
+                  ref: frameRef,
+                  "data-slot": "surface-tour-frame",
+                  className: cn("relative grid min-h-96 overflow-hidden p-0 shadow-md", frameClassName),
+                  children: tabs.map((tab) => {
+                    const layer = layers.find((l) => l.id === tab.id);
+                    return /* @__PURE__ */ jsx(
+                      TabsContent,
+                      {
+                        value: tab.id,
+                        forceMount: true,
+                        hidden: !layer,
+                        inert: layer?.leaving || void 0,
+                        "aria-hidden": layer?.leaving || void 0,
+                        "data-leaving": layer?.leaving ? "" : void 0,
+                        className: cn(
+                          "relative col-start-1 row-start-1 mt-0 min-h-0 min-w-0 transition-opacity duration-base ease-standard",
+                          layer?.leaving && "pointer-events-none opacity-0",
+                          layer?.entering && "starting:opacity-0"
+                        ),
+                        children: layer ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx(
+                            Suspense,
+                            {
+                              fallback: tab.fallback ?? /* @__PURE__ */ jsx(Skeleton, { className: "size-full min-h-96" }),
+                              children: tab.render()
+                            }
+                          ),
+                          tab.hint && !layer.leaving ? /* @__PURE__ */ jsx(
+                            AffordanceHint,
+                            {
+                              storageKey: `surface-tour-hint:${hashKey ?? "tour"}:${tab.id}`,
+                              children: tab.hint
+                            }
+                          ) : null
+                        ] }) : null
+                      },
+                      tab.id
+                    );
+                  })
+                }
+              ),
+              activeTab?.useCase || activeTab?.actions ? /* @__PURE__ */ jsxs("div", { "data-slot": "surface-tour-footer", className: "flex min-w-0 flex-col gap-3", children: [
+                activeTab.useCase ? /* @__PURE__ */ jsx("p", { className: "text-body text-muted-foreground", children: activeTab.useCase }) : null,
+                activeTab.actions
+              ] }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  AffordanceHint,
+  DEFAULT_SURFACE_TOUR_ACTIONS_LABELS,
+  SurfaceTourActions,
+  SurfaceTour
+};
+//# sourceMappingURL=chunk-2ZMPAD6C.js.map

package/dist/chunk-2ZMPAD6C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/surface-tour/surface-tour.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  Suspense,\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Check, Copy } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { useCopyToClipboard } from \"../../lib/use-copy-to-clipboard\";\nimport { isMotionAtFloor, readMotionFactor } from \"../../lib/use-scroll-progress\";\nimport { Button } from \"../button\";\nimport { Card } from \"../card\";\nimport { CommandChip } from \"../command-chip\";\nimport { RevealOnEnter } from \"../reveal-on-enter\";\nimport { Skeleton } from \"../skeleton\";\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"../tabs\";\n\n// ─────────────────────────────── AffordanceHint ───────────────────────────────\n\nconst HINT_DELAY_MS = 800;\n\nfunction hintSeen(key: string): boolean {\n  try {\n    return window.sessionStorage.getItem(key) === \"1\";\n  } catch {\n    return false;\n  }\n}\n\nfunction markHintSeen(key: string) {\n  try {\n    window.sessionStorage.setItem(key, \"1\");\n  } catch {\n    // Storage blocked (private mode, sandboxed iframe): the hint may show again. Harmless.\n  }\n}\n\nexport interface AffordanceHintProps extends HTMLAttributes<HTMLSpanElement> {\n  /** `sessionStorage` key: once the hint has shown (or the visitor interacted), it never returns this session. */\n  storageKey: string;\n  /** ms after mount before the hint appears; skipped entirely when the motion gate is closed. Default 800. */\n  delay?: number;\n}\n\n/**\n * A one-time visual nudge (\"Drag a tile\") pinned in the corner of its positioned parent. It\n * appears `delay` ms after mounting (at once when motion is reduced), leaves on the first\n * `pointerdown`/`keydown` inside that parent, and shows once per `storageKey` per session. It is\n * `aria-hidden` — the surface it points at is accessible on its own; this is a visual cue only.\n */\nexport const AffordanceHint = forwardRef<HTMLSpanElement, AffordanceHintProps>(\n  function AffordanceHint(\n    { storageKey, delay = HINT_DELAY_MS, className, children, ...props },\n    ref,\n  ) {\n    const innerRef = useRef<HTMLSpanElement>(null);\n    useImperativeHandle(ref, () => innerRef.current as HTMLSpanElement, []);\n    const [visible, setVisible] = useState(false);\n\n    useEffect(() => {\n      const el = innerRef.current;\n      const host = el?.parentElement;\n      if (!el || !host || hintSeen(storageKey)) return;\n      const wait = isMotionAtFloor(readMotionFactor(el)) ? 0 : delay;\n      const timer = window.setTimeout(() => {\n        markHintSeen(storageKey);\n        setVisible(true);\n      }, wait);\n      const dismiss = () => {\n        window.clearTimeout(timer);\n        markHintSeen(storageKey);\n        setVisible(false);\n        host.removeEventListener(\"pointerdown\", dismiss, true);\n        host.removeEventListener(\"keydown\", dismiss, true);\n      };\n      host.addEventListener(\"pointerdown\", dismiss, true);\n      host.addEventListener(\"keydown\", dismiss, true);\n      return () => {\n        window.clearTimeout(timer);\n        host.removeEventListener(\"pointerdown\", dismiss, true);\n        host.removeEventListener(\"keydown\", dismiss, true);\n      };\n    }, [storageKey, delay]);\n\n    return (\n      <span\n        ref={innerRef}\n        aria-hidden=\"true\"\n        data-slot=\"affordance-hint\"\n        data-visible={visible ? \"\" : undefined}\n        className={cn(\n          \"pointer-events-none absolute end-3 top-3 z-10 rounded-full bg-primary px-2.5 py-1 text-meta text-primary-foreground shadow-ring-sm transition-opacity duration-base ease-standard\",\n          visible ? \"opacity-100\" : \"opacity-0\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\n// ───────────────────────────── SurfaceTourActions ─────────────────────────────\n\n/** Every string the actions row renders — pass your own to localize it. */\nexport interface SurfaceTourActionsLabels {\n  openInStorybook: string;\n  copyPrompt: string;\n  promptCopied: string;\n  promptCopyFailed: string;\n  scaffold: string;\n  copyCommand: string;\n}\n\nexport const DEFAULT_SURFACE_TOUR_ACTIONS_LABELS: SurfaceTourActionsLabels = {\n  openInStorybook: \"Open in Storybook\",\n  copyPrompt: \"Copy prompt\",\n  promptCopied: \"Prompt copied\",\n  promptCopyFailed: \"Could not copy the prompt\",\n  scaffold: \"Scaffold\",\n  copyCommand: \"Copy scaffold command\",\n};\n\nexport interface SurfaceTourActionsProps extends HTMLAttributes<HTMLDivElement> {\n  /** Where \"Open in Storybook\" goes. Omit to hide the link. */\n  storybookHref?: string;\n  /** The (multi-line) prompt \"Copy prompt\" writes to the clipboard. Omit to hide the button. */\n  prompt?: string;\n  /** The scaffold command shown in a copyable chip. Omit to hide the chip. */\n  command?: string;\n  /** Override any rendered string. */\n  labels?: Partial<SurfaceTourActionsLabels>;\n}\n\n/** The per-surface actions row: open the story, copy an agent prompt, copy the scaffold command. */\nexport const SurfaceTourActions = forwardRef<HTMLDivElement, SurfaceTourActionsProps>(\n  function SurfaceTourActions(\n    { storybookHref, prompt, command, labels: labelsProp, className, ...props },\n    ref,\n  ) {\n    const labels = { ...DEFAULT_SURFACE_TOUR_ACTIONS_LABELS, ...labelsProp };\n    const { copied, copy } = useCopyToClipboard();\n    const [failed, setFailed] = useState(false);\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"surface-tour-actions\"\n        className={cn(\"flex min-w-0 flex-wrap items-center gap-2\", className)}\n        {...props}\n      >\n        {storybookHref ? (\n          <Button asChild variant=\"outline\" size=\"sm\">\n            <a href={storybookHref} data-slot=\"surface-tour-actions-storybook\">\n              {labels.openInStorybook}\n            </a>\n          </Button>\n        ) : null}\n        {prompt ? (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"sm\"\n            data-slot=\"surface-tour-actions-prompt\"\n            data-copied={copied ? \"\" : undefined}\n            onClick={() => {\n              void copy(prompt).then((ok) => setFailed(!ok));\n            }}\n          >\n            {copied ? <Check aria-hidden=\"true\" /> : <Copy aria-hidden=\"true\" />}\n            {labels.copyPrompt}\n          </Button>\n        ) : null}\n        {command ? (\n          <span className=\"flex min-w-0 max-w-full items-center gap-2\">\n            <span className=\"shrink-0 text-meta text-muted-foreground\">{labels.scaffold}</span>\n            <CommandChip\n              className=\"min-w-0\"\n              hosts={[{ id: \"scaffold\", label: labels.scaffold, command }]}\n              labels={{ copy: labels.copyCommand }}\n            />\n          </span>\n        ) : null}\n        <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n          {copied ? labels.promptCopied : failed ? labels.promptCopyFailed : \"\"}\n        </span>\n      </div>\n    );\n  },\n);\n\n// ───────────────────────────────── SurfaceTour ────────────────────────────────\n\n/** One surface in the tour. */\nexport interface SurfaceTourTab {\n  /** Stable id — the tab value, the `#<hashKey>=<id>` deep link and the hint's session key. */\n  id: string;\n  /** Tab label. */\n  label: ReactNode;\n  /** One sentence under the frame saying what this surface is for. */\n  useCase?: ReactNode;\n  /** The actions row under the frame (typically a `SurfaceTourActions`). */\n  actions?: ReactNode;\n  /** Corner hint shown once per session when the surface first mounts. */\n  hint?: ReactNode;\n  /** Renders the surface. May suspend (a `React.lazy` or `next/dynamic` component). */\n  render: () => ReactNode;\n  /** Starts loading the surface's code; called on tab hover/focus, never on scroll. */\n  prefetch?: () => void;\n  /** Shown while the surface suspends. Default: a frame-filling `Skeleton`. */\n  fallback?: ReactNode;\n}\n\nexport interface SurfaceTourProps extends Omit<HTMLAttributes<HTMLElement>, \"title\"> {\n  tabs: SurfaceTourTab[];\n  /** The tab shown first. Default: the first tab. */\n  defaultTab?: string;\n  /** Fires when the visitor picks another tab. */\n  onTabChange?: (id: string) => void;\n  /** Section heading. */\n  title?: ReactNode;\n  /** One sentence under the heading. */\n  description?: ReactNode;\n  /** When set, the active tab is read from and written to `#<hashKey>=<id>` (no history entries). */\n  hashKey?: string;\n  /** Classes for the frame — give it a height so every surface fills the same box. */\n  frameClassName?: string;\n}\n\ninterface Layer {\n  id: string;\n  leaving: boolean;\n  entering: boolean;\n}\n\n/** Resolved `transition-duration` of `el` in ms (0 when motion is off or unmeasurable). */\nfunction transitionMs(el: Element | null): number {\n  if (!el || typeof window === \"undefined\") return 0;\n  const raw = window.getComputedStyle(el).transitionDuration.split(\",\")[0]?.trim() ?? \"\";\n  const value = parseFloat(raw);\n  if (!Number.isFinite(value)) return 0;\n  return raw.endsWith(\"ms\") ? value : value * 1000;\n}\n\nfunction readHash(hashKey: string): string | null {\n  const match = new RegExp(`^#${hashKey}=([^&]+)$`).exec(window.location.hash);\n  return match?.[1] ? decodeURIComponent(match[1]) : null;\n}\n\n/**\n * A tour of full-size surfaces behind a sticky tab strip. The frame stays put while the\n * surfaces crossfade (`--t-base`, instant under reduced motion); the frame's min-height only\n * ever grows, so switching never jumps the page. Surfaces mount on first selection and may\n * suspend (lazy code) behind a `Skeleton`; `prefetch` runs on hover/focus of a tab. The sticky\n * offset is the `--surface-tour-sticky-top` custom property (set it to your nav height).\n */\nexport const SurfaceTour = forwardRef<HTMLElement, SurfaceTourProps>(function SurfaceTour(\n  {\n    tabs,\n    defaultTab,\n    onTabChange,\n    title,\n    description,\n    hashKey,\n    frameClassName,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const rootRef = useRef<HTMLElement>(null);\n  useImperativeHandle(ref, () => rootRef.current as HTMLElement, []);\n  const titleId = useId();\n  const initial = tabs.find((t) => t.id === defaultTab)?.id ?? tabs[0]?.id ?? \"\";\n  const [active, setActive] = useState(initial);\n  const [layers, setLayers] = useState<Layer[]>([{ id: initial, leaving: false, entering: false }]);\n  const frameRef = useRef<HTMLDivElement>(null);\n  const prefetched = useRef(new Set<string>());\n\n  const prefetch = useCallback((tab: SurfaceTourTab) => {\n    if (!tab.prefetch || prefetched.current.has(tab.id)) return;\n    prefetched.current.add(tab.id);\n    tab.prefetch();\n  }, []);\n\n  const select = useCallback(\n    (id: string, { fromHash = false } = {}) => {\n      if (id === active || !tabs.some((t) => t.id === id)) return;\n      setLayers([\n        { id: active, leaving: true, entering: false },\n        { id, leaving: false, entering: !fromHash },\n      ]);\n      setActive(id);\n      if (hashKey && !fromHash && typeof window !== \"undefined\") {\n        const { pathname, search } = window.location;\n        window.history.replaceState(\n          window.history.state,\n          \"\",\n          `${pathname}${search}#${hashKey}=${encodeURIComponent(id)}`,\n        );\n      }\n      onTabChange?.(id);\n    },\n    [active, tabs, hashKey, onTabChange],\n  );\n\n  // Deep link: `#<hashKey>=<id>` opens that tab on load (a browser-only read, once).\n  useEffect(() => {\n    if (!hashKey) return;\n    const id = readHash(hashKey);\n    if (id && tabs.some((t) => t.id === id)) {\n      select(id, { fromHash: true });\n      rootRef.current?.scrollIntoView({ block: \"start\" });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only read of the URL\n  }, []);\n\n  // The outgoing surface unmounts once the fade (the frame's resolved `--t-base`) is over.\n  useEffect(() => {\n    if (!layers.some((l) => l.leaving)) return;\n    const ms = transitionMs(frameRef.current?.querySelector(\"[data-leaving]\") ?? null);\n    const done = () => setLayers((current) => current.filter((l) => !l.leaving));\n    if (ms <= 1) {\n      done();\n      return;\n    }\n    const timer = window.setTimeout(done, ms);\n    return () => window.clearTimeout(timer);\n  }, [layers]);\n\n  // Height lock: the frame's min-height ratchets up to the tallest surface seen.\n  useEffect(() => {\n    const frame = frameRef.current;\n    if (!frame || typeof ResizeObserver !== \"function\") return;\n    let tallest = 0;\n    const observer = new ResizeObserver(() => {\n      const height = frame.getBoundingClientRect().height;\n      if (height > tallest) {\n        tallest = height;\n        frame.style.minHeight = `${Math.ceil(height)}px`;\n      }\n    });\n    observer.observe(frame);\n    return () => observer.disconnect();\n  }, []);\n\n  const activeTab = tabs.find((t) => t.id === active);\n\n  return (\n    <section\n      ref={rootRef}\n      data-slot=\"surface-tour\"\n      aria-labelledby={title ? titleId : undefined}\n      className={cn(\"flex w-full min-w-0 flex-col gap-6\", className)}\n      {...props}\n    >\n      {title || description ? (\n        <RevealOnEnter as=\"header\" data-slot=\"surface-tour-header\" className=\"flex flex-col gap-2\">\n          {title ? (\n            <h2 id={titleId} className=\"text-display text-foreground\">\n              {title}\n            </h2>\n          ) : null}\n          {description ? <p className=\"text-body text-muted-foreground\">{description}</p> : null}\n        </RevealOnEnter>\n      ) : null}\n      <Tabs\n        value={active}\n        onValueChange={(id) => select(id)}\n        className=\"flex min-w-0 flex-col gap-4\"\n      >\n        <div\n          data-slot=\"surface-tour-tabs\"\n          className={cn(\n            \"sticky z-20 bg-background py-2\",\n            // Overflow affordance on narrow screens: the strip scrolls, the end edge fades.\n            \"max-md:after:pointer-events-none max-md:after:absolute max-md:after:inset-y-0 max-md:after:end-0 max-md:after:w-10 max-md:after:from-background ltr:max-md:after:bg-linear-to-l rtl:max-md:after:bg-linear-to-r\",\n          )}\n          style={{ top: \"var(--surface-tour-sticky-top, 0px)\" }}\n        >\n          <TabsList className=\"w-full justify-start md:w-auto\">\n            {tabs.map((tab) => (\n              <TabsTrigger\n                key={tab.id}\n                value={tab.id}\n                onPointerEnter={() => prefetch(tab)}\n                onFocus={() => prefetch(tab)}\n              >\n                {tab.label}\n              </TabsTrigger>\n            ))}\n          </TabsList>\n        </div>\n        <Card\n          ref={frameRef}\n          data-slot=\"surface-tour-frame\"\n          className={cn(\"relative grid min-h-96 overflow-hidden p-0 shadow-md\", frameClassName)}\n        >\n          {tabs.map((tab) => {\n            const layer = layers.find((l) => l.id === tab.id);\n            return (\n              <TabsContent\n                key={tab.id}\n                value={tab.id}\n                forceMount\n                hidden={!layer}\n                inert={layer?.leaving || undefined}\n                aria-hidden={layer?.leaving || undefined}\n                data-leaving={layer?.leaving ? \"\" : undefined}\n                className={cn(\n                  \"relative col-start-1 row-start-1 mt-0 min-h-0 min-w-0 transition-opacity duration-base ease-standard\",\n                  layer?.leaving && \"pointer-events-none opacity-0\",\n                  layer?.entering && \"starting:opacity-0\",\n                )}\n              >\n                {layer ? (\n                  <>\n                    <Suspense\n                      fallback={tab.fallback ?? <Skeleton className=\"size-full min-h-96\" />}\n                    >\n                      {tab.render()}\n                    </Suspense>\n                    {tab.hint && !layer.leaving ? (\n                      <AffordanceHint\n                        storageKey={`surface-tour-hint:${hashKey ?? \"tour\"}:${tab.id}`}\n                      >\n                        {tab.hint}\n                      </AffordanceHint>\n                    ) : null}\n                  </>\n                ) : null}\n              </TabsContent>\n            );\n          })}\n        </Card>\n        {activeTab?.useCase || activeTab?.actions ? (\n          <div data-slot=\"surface-tour-footer\" className=\"flex min-w-0 flex-col gap-3\">\n            {activeTab.useCase ? (\n              <p className=\"text-body text-muted-foreground\">{activeTab.useCase}</p>\n            ) : null}\n            {activeTab.actions}\n          </div>\n        ) : null}\n      </Tabs>\n    </section>\n  );\n});\n"],"mappings":"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","names":["AffordanceHint","SurfaceTourActions","SurfaceTour"]}

package/dist/chunk-36SY7TID.js

@@ -0,0 +1,36 @@
+"use client";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/tooltip/tooltip.tsx
+import { forwardRef } from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = forwardRef(function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
+  return /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn(
+        "z-50 overflow-hidden rounded-md bg-foreground px-2.5 py-1.5 text-meta text-background shadow-md",
+        "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95",
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+
+export {
+  TooltipProvider,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent
+};
+//# sourceMappingURL=chunk-36SY7TID.js.map

package/dist/chunk-36SY7TID.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tooltip/tooltip.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport { cn } from \"../../lib/cn\";\n\nexport const TooltipProvider = TooltipPrimitive.Provider;\nexport const Tooltip = TooltipPrimitive.Root;\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport const TooltipContent = forwardRef<\n  ElementRef<typeof TooltipPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>\n>(function TooltipContent({ className, sideOffset = 6, ...props }, ref) {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Content\n        ref={ref}\n        data-slot=\"tooltip-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 overflow-hidden rounded-md bg-foreground px-2.5 py-1.5 text-meta text-background shadow-md\",\n          \"data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </TooltipPrimitive.Portal>\n  );\n});\n"],"mappings":";;;;;;AAAA,SAAS,kBAAkE;AAC3E,YAAY,sBAAsB;AAa5B;AAVC,IAAM,kBAAmC;AACzC,IAAM,UAA2B;AACjC,IAAM,iBAAkC;AAExC,IAAM,iBAAiB,WAG5B,SAASA,gBAAe,EAAE,WAAW,aAAa,GAAG,GAAG,MAAM,GAAG,KAAK;AACtE,SACE,oBAAkB,yBAAjB,EACC;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ,CAAC;","names":["TooltipContent"]}

package/dist/chunk-36VULFFV.js

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

package/dist/chunk-36VULFFV.js.map

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