@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-AE6LFFME.js

@@ -0,0 +1,201 @@
+"use client";
+import {
+  cardVariants
+} from "./chunk-7KV7H2TW.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/bento-grid/bento-grid.tsx
+import {
+  createContext,
+  forwardRef,
+  use,
+  useEffect,
+  useRef,
+  useCallback
+} from "react";
+import { cva } from "class-variance-authority";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BentoGridContext = createContext({ spotlight: false });
+var BentoGrid = forwardRef(function BentoGrid2({ className, spotlight = false, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(BentoGridContext, { value: { spotlight }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "bento-grid",
+      className: cn(
+        "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+        "[grid-auto-flow:dense]",
+        "auto-rows-[14rem]",
+        "gap-4",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+});
+var SIZE_SPANS = {
+  sm: { col: 1, row: 1 },
+  md: { col: 2, row: 1 },
+  lg: { col: 2, row: 2 },
+  hero: { col: 2, row: 2 }
+};
+var bentoGridItemVariants = cva(
+  [
+    // Base: compose Card surface (bg-card border rounded-lg shadow-sm).
+    cardVariants({ interactive: false }),
+    // Overflow hidden so content + spotlight overlay stay within rounded corners.
+    "relative overflow-hidden",
+    // Flex column layout for slot content.
+    "flex flex-col",
+    // Ensure long unbroken strings can't overflow the tile.
+    "min-w-0 break-words",
+    // ELEVATION IS THE HOVER GESTURE. The grid rests FLAT — `shadow-none` beats
+    // the `shadow-sm` inherited from `cardVariants` (tailwind-merge, later wins)
+    // so a bento sheet reads as one plane, not a field of lifted chips. On hover
+    // the single tile under the pointer rises to `shadow-lg`, a stacked rung of
+    // the ONE elevation ramp (never a hand-rolled box-shadow). The rung is
+    // `hover:`-prefixed, so pairing it with the card border is the sanctioned
+    // "bordered card, hover lift" shape, not the flagged double edge.
+    "shadow-none hover:shadow-xl",
+    // Shadow alone is a LIGHT-theme signal: the ramp's ink is black, so on a dark
+    // ground even `shadow-xl` is faint (measured on `theme:dark` — the hovered tile
+    // was hard to pick out). The hover EDGE carries the lift there. It is
+    // `ring/40`, the same tint `Card interactive` uses — NOT `border-strong`, which
+    // is a near-charcoal 0.65 L against a 0.88 L resting border and reads as a hard
+    // outline snapping on, not as a lift. At 40% the brand hue stays a soft warm
+    // edge on white and a clearly brighter one on charcoal.
+    "hover:border-ring/40",
+    // A lift you can SEE: ~4px of travel. Below ~16px a slide is a flicker, but a
+    // hover-lift is the exception the motion guidelines size at ≥4px — and the
+    // travel, not the duration, is what makes the elevation legible.
+    "hover:-translate-y-1 motion-reduce:hover:translate-y-0",
+    // `ease-entrance` (easeOutQuint) — a near-zero arrival velocity is the #1
+    // smoothness lever; `ease-standard` snaps at the end. Duration stays at the
+    // 260ms `base` rung: lengthening it does NOT fix abruptness. Under OS
+    // reduced-motion the travel is neutralized and the transition is dropped, so
+    // the shadow + edge still state the hover without any movement.
+    "transition-[translate,box-shadow,border-color] duration-base ease-entrance motion-reduce:transition-none"
+  ].join(" "),
+  {
+    variants: {
+      /** Hero tile gets a subtle gradient wash to distinguish it from supporting tiles. */
+      hero: {
+        true: "bg-gradient-to-br from-primary/8 to-card",
+        false: ""
+      },
+      /**
+       * Interactive tiles (those holding a clickable inner element, e.g. a
+       * stretched link) get a pointer cursor and a `focus-within` ring so keyboard
+       * focus on the inner control is visible on the whole tile. The hover lift
+       * (elevation + edge) is on the base — every tile lifts, clickable or not.
+       */
+      interactive: {
+        true: "cursor-pointer focus-ring-within",
+        false: ""
+      }
+    },
+    defaultVariants: { hero: false, interactive: false }
+  }
+);
+var BentoGridItem = forwardRef(function BentoGridItem2({ size = "sm", span, spotlight, hero, interactive, className, style, children, ...props }, ref) {
+  const tileRef = useRef(null);
+  const overlayRef = useRef(null);
+  const spotlightOn = spotlight ?? use(BentoGridContext).spotlight;
+  const resolvedCol = span?.col ?? SIZE_SPANS[size].col;
+  const resolvedRow = span?.row ?? SIZE_SPANS[size].row;
+  const isInteractive = interactive ?? false;
+  const isHero = hero ?? size === "hero";
+  const rafRef = useRef(0);
+  useEffect(() => {
+    return () => {
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+    };
+  }, []);
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!spotlightOn || !tileRef.current || !overlayRef.current) return;
+      if (rafRef.current) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        if (!tileRef.current || !overlayRef.current) return;
+        const rect = tileRef.current.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const y = e.clientY - rect.top;
+        tileRef.current.style.setProperty("--bento-x", `${x}px`);
+        tileRef.current.style.setProperty("--bento-y", `${y}px`);
+        overlayRef.current.style.opacity = "1";
+      });
+    },
+    [spotlightOn]
+  );
+  const handleMouseLeave = useCallback(() => {
+    if (!overlayRef.current) return;
+    overlayRef.current.style.opacity = "0";
+  }, []);
+  const gridStyle = {
+    gridColumn: resolvedCol > 1 ? `span ${resolvedCol} / span ${resolvedCol}` : void 0,
+    gridRow: resolvedRow > 1 ? `span ${resolvedRow} / span ${resolvedRow}` : void 0,
+    ...style
+  };
+  const mergedRef = useCallback(
+    (node) => {
+      tileRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: mergedRef,
+      className: cn(
+        bentoGridItemVariants({
+          hero: isHero,
+          interactive: isInteractive
+        }),
+        className
+      ),
+      style: gridStyle,
+      "data-slot": "bento-grid-item",
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      ...props,
+      children: [
+        spotlightOn && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: overlayRef,
+            "aria-hidden": "true",
+            "data-testid": "bento-spotlight",
+            className: cn(
+              "pointer-events-none absolute inset-0 z-10",
+              "opacity-0 transition-opacity duration-base ease-standard",
+              // Suppress entirely under reduced-motion (cursor tracking = motion).
+              "motion-reduce:hidden"
+            ),
+            style: {
+              // Spotlight color is a DERIVED tint of the --primary token (not a raw
+              // literal), so it stays theme-correct in every theme without a new
+              // token. `color-mix` keeps it ~12% primary over transparent.
+              background: "radial-gradient(400px circle at var(--bento-x, 50%) var(--bento-y, 50%), color-mix(in oklch, var(--primary) 12%, transparent), transparent 70%)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-20 flex min-w-0 flex-1 flex-col", children })
+      ]
+    }
+  );
+});
+
+export {
+  BentoGrid,
+  bentoGridItemVariants,
+  BentoGridItem
+};
+//# sourceMappingURL=chunk-AE6LFFME.js.map

package/dist/chunk-AE6LFFME.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/bento-grid/bento-grid.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * BentoGrid + BentoGridItem — a hover-elevation bento layout.\n *\n * A responsive dense CSS-grid container. **The default separation gesture is\n * ELEVATION, not colour:** the grid rests flat (`shadow-none` — border only) and\n * each tile rises ~4px into `shadow-xl` with a brand-tinted edge on hover, so the\n * tile under the pointer clearly separates from the sheet.\n *\n * The cursor-following **spotlight is OPT-IN** (`spotlight`, default `false`) —\n * set it on the `BentoGrid` to enable it for every tile, or per tile to override\n * the grid. Its colour is a DERIVED tint of the `--primary` token\n * (`color-mix(in oklch, var(--primary) 12%, transparent)`), so it stays\n * theme-correct in every theme with no raw colors and no extra token. Under OS\n * reduced-motion the spotlight is suppressed entirely (`motion-reduce:hidden`);\n * tiles still respond to hover/focus with their normal card states.\n *\n * Key design choices:\n * - `BentoGridItem` composes `Card` (inherits card surface/border/radius) and\n *   then overrides the resting `shadow-sm` down to `shadow-none`.\n * - Under reduced motion the travel is neutralized and the transition dropped —\n *   the shadow and the edge still state the hover (\"reduced != none\").\n * - Spans are inline `grid-column/grid-row` and collapse to one cell on the\n *   1-column mobile grid (the browser caps a span at the available tracks).\n * - The tile is presentational; for a clickable tile, place an interactive inner\n *   element (e.g. a stretched `<a className=\"absolute inset-0\">`) and set\n *   `interactive` so the tile shows a `focus-within` ring.\n * - The spotlight overlay is `pointer-events-none` + `aria-hidden` (decorative).\n * - Motion is gated via `duration-base` / `ease-standard` (token-backed).\n */\n\nimport {\n  createContext,\n  forwardRef,\n  use,\n  useEffect,\n  useRef,\n  useCallback,\n  type CSSProperties,\n  type HTMLAttributes,\n} from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"../../lib/cn\";\nimport { cardVariants } from \"../card/card\";\n\n// ---------------------------------------------------------------------------\n// Context — the grid hands its spotlight default down to every tile so a whole\n// bento can opt in with ONE prop instead of repeating it on every child. A tile's\n// own `spotlight` prop always wins.\n// ---------------------------------------------------------------------------\n\nconst BentoGridContext = createContext<{ spotlight: boolean }>({ spotlight: false });\n\n// ---------------------------------------------------------------------------\n// BentoGrid\n// ---------------------------------------------------------------------------\n\nexport interface BentoGridProps extends HTMLAttributes<HTMLDivElement> {\n  /** Additional className merged via cn(). */\n  className?: string;\n  /**\n   * Enable the cursor-following spotlight on every tile in this grid. Individual\n   * tiles can still opt out (or in) with their own `spotlight` prop. Disabled\n   * entirely under OS `prefers-reduced-motion` regardless of this prop.\n   * @default false\n   */\n  spotlight?: boolean;\n}\n\n/**\n * Responsive CSS-grid container.\n * - 1 column on mobile, 2 on sm, 4 on lg.\n * - `grid-auto-flow: dense` fills in gaps left by spanning tiles.\n * - `auto-rows-[14rem]` gives a baseline row height (14rem ≈ 224px); tiles can\n *   span multiple rows via the `size` / `span.row` API.\n * - Carries the grid-wide `spotlight` default for its tiles (opt-in).\n */\nexport const BentoGrid = forwardRef<HTMLDivElement, BentoGridProps>(function BentoGrid(\n  { className, spotlight = false, children, ...props },\n  ref,\n) {\n  return (\n    <BentoGridContext value={{ spotlight }}>\n      <div\n        ref={ref}\n        data-slot=\"bento-grid\"\n        className={cn(\n          \"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\n          \"[grid-auto-flow:dense]\",\n          \"auto-rows-[14rem]\",\n          \"gap-4\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </BentoGridContext>\n  );\n});\n\n// ---------------------------------------------------------------------------\n// BentoGridItem — size / span presets\n// ---------------------------------------------------------------------------\n\n/**\n * Size preset → [colSpan, rowSpan].\n *\n * | size  | cols | rows | purpose                                                    |\n * |-------|------|------|------------------------------------------------------------|\n * | sm    |  1   |  1   | Supporting: compact metric or icon tile                    |\n * | md    |  2   |  1   | Supporting: wider but single-row                           |\n * | lg    |  2   |  2   | Featured: 2×2 block                                        |\n * | hero  |  2   |  2   | Hero: 2×2 + gradient emphasis wash                         |\n *\n * On a 1-column layout (mobile) ALL col spans clamp to 1 automatically via\n * CSS `min()` in `gridColumn`. Row spans are always honoured.\n */\nexport type BentoGridSize = \"sm\" | \"md\" | \"lg\" | \"hero\";\n\nconst SIZE_SPANS: Record<BentoGridSize, { col: number; row: number }> = {\n  sm: { col: 1, row: 1 },\n  md: { col: 2, row: 1 },\n  lg: { col: 2, row: 2 },\n  hero: { col: 2, row: 2 },\n};\n\n// cva for the item's structural/visual axes (NOT size — span is applied via\n// inline style so it collapses correctly on mobile without media-query gymnastics).\nexport const bentoGridItemVariants = cva(\n  [\n    // Base: compose Card surface (bg-card border rounded-lg shadow-sm).\n    cardVariants({ interactive: false }),\n    // Overflow hidden so content + spotlight overlay stay within rounded corners.\n    \"relative overflow-hidden\",\n    // Flex column layout for slot content.\n    \"flex flex-col\",\n    // Ensure long unbroken strings can't overflow the tile.\n    \"min-w-0 break-words\",\n    // ELEVATION IS THE HOVER GESTURE. The grid rests FLAT — `shadow-none` beats\n    // the `shadow-sm` inherited from `cardVariants` (tailwind-merge, later wins)\n    // so a bento sheet reads as one plane, not a field of lifted chips. On hover\n    // the single tile under the pointer rises to `shadow-lg`, a stacked rung of\n    // the ONE elevation ramp (never a hand-rolled box-shadow). The rung is\n    // `hover:`-prefixed, so pairing it with the card border is the sanctioned\n    // \"bordered card, hover lift\" shape, not the flagged double edge.\n    \"shadow-none hover:shadow-xl\",\n    // Shadow alone is a LIGHT-theme signal: the ramp's ink is black, so on a dark\n    // ground even `shadow-xl` is faint (measured on `theme:dark` — the hovered tile\n    // was hard to pick out). The hover EDGE carries the lift there. It is\n    // `ring/40`, the same tint `Card interactive` uses — NOT `border-strong`, which\n    // is a near-charcoal 0.65 L against a 0.88 L resting border and reads as a hard\n    // outline snapping on, not as a lift. At 40% the brand hue stays a soft warm\n    // edge on white and a clearly brighter one on charcoal.\n    \"hover:border-ring/40\",\n    // A lift you can SEE: ~4px of travel. Below ~16px a slide is a flicker, but a\n    // hover-lift is the exception the motion guidelines size at ≥4px — and the\n    // travel, not the duration, is what makes the elevation legible.\n    \"hover:-translate-y-1 motion-reduce:hover:translate-y-0\",\n    // `ease-entrance` (easeOutQuint) — a near-zero arrival velocity is the #1\n    // smoothness lever; `ease-standard` snaps at the end. Duration stays at the\n    // 260ms `base` rung: lengthening it does NOT fix abruptness. Under OS\n    // reduced-motion the travel is neutralized and the transition is dropped, so\n    // the shadow + edge still state the hover without any movement.\n    \"transition-[translate,box-shadow,border-color] duration-base ease-entrance motion-reduce:transition-none\",\n  ].join(\" \"),\n  {\n    variants: {\n      /** Hero tile gets a subtle gradient wash to distinguish it from supporting tiles. */\n      hero: {\n        true: \"bg-gradient-to-br from-primary/8 to-card\",\n        false: \"\",\n      },\n      /**\n       * Interactive tiles (those holding a clickable inner element, e.g. a\n       * stretched link) get a pointer cursor and a `focus-within` ring so keyboard\n       * focus on the inner control is visible on the whole tile. The hover lift\n       * (elevation + edge) is on the base — every tile lifts, clickable or not.\n       */\n      interactive: {\n        true: \"cursor-pointer focus-ring-within\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { hero: false, interactive: false },\n  },\n);\n\nexport type BentoGridItemVariants = VariantProps<typeof bentoGridItemVariants>;\n\nexport interface BentoGridItemProps extends HTMLAttributes<HTMLDivElement>, BentoGridItemVariants {\n  /**\n   * Size preset. Resolves to a col + row span. Overridden by explicit `span`.\n   * @default \"sm\"\n   */\n  size?: BentoGridSize;\n  /**\n   * Explicit grid span. Wins over `size`. Spans clamp gracefully on narrow\n   * layouts — a `col: 4` on a 2-col grid becomes `span min(4, 2)`.\n   */\n  span?: { col?: number; row?: number };\n  /**\n   * Enable the cursor-following spotlight gradient on this tile. Omit to inherit\n   * the parent `BentoGrid`'s `spotlight` (itself `false` by default) — so the\n   * effect is opt-in, per grid or per tile. Disabled entirely under OS\n   * `prefers-reduced-motion` regardless of this prop.\n   * @default false (inherited from BentoGrid)\n   */\n  spotlight?: boolean;\n}\n\n/**\n * A single bento tile. Composes `Card`, rests flat, lifts to `shadow-lg` on\n * hover, and adds the OPT-IN spotlight overlay.\n *\n * Spotlight:\n * - Sets `--bento-x` / `--bento-y` CSS custom properties on `onMouseMove`\n *   via a direct style set (no layout reads in render — uses\n *   `getBoundingClientRect` in the event handler only, never during paint).\n * - An absolutely-positioned `pointer-events-none aria-hidden` overlay paints\n *   `radial-gradient(… at var(--bento-x) var(--bento-y), color-mix(--primary), transparent)`.\n * - Revealed on hover via opacity transition gated by `duration-base ease-standard`.\n * - Suppressed with `motion-reduce:hidden` — cursor-following IS motion.\n */\nexport const BentoGridItem = forwardRef<HTMLDivElement, BentoGridItemProps>(function BentoGridItem(\n  { size = \"sm\", span, spotlight, hero, interactive, className, style, children, ...props },\n  ref,\n) {\n  const tileRef = useRef<HTMLDivElement>(null);\n  const overlayRef = useRef<HTMLDivElement>(null);\n\n  // Own prop wins; otherwise inherit the grid's opt-in (default false).\n  const spotlightOn = spotlight ?? use(BentoGridContext).spotlight;\n\n  // Resolve spans: explicit span wins over size preset.\n  const resolvedCol = span?.col ?? SIZE_SPANS[size].col;\n  const resolvedRow = span?.row ?? SIZE_SPANS[size].row;\n\n  const isInteractive = interactive ?? false;\n\n  // isHero: explicit prop or size === \"hero\".\n  const isHero = hero ?? size === \"hero\";\n\n  // rAF ref so we only schedule one frame at a time.\n  const rafRef = useRef<number>(0);\n\n  // Cancel a pending frame on unmount — otherwise a mouse move right before\n  // the tile unmounts (removed from the grid while hovered) still fires the\n  // scheduled callback after teardown.\n  useEffect(() => {\n    return () => {\n      if (rafRef.current) cancelAnimationFrame(rafRef.current);\n    };\n  }, []);\n\n  const handleMouseMove = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      if (!spotlightOn || !tileRef.current || !overlayRef.current) return;\n      // Cancel pending rAF to debounce rapid moves.\n      if (rafRef.current) cancelAnimationFrame(rafRef.current);\n      rafRef.current = requestAnimationFrame(() => {\n        if (!tileRef.current || !overlayRef.current) return;\n        const rect = tileRef.current.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        // Direct style mutation — no React render cycle.\n        tileRef.current.style.setProperty(\"--bento-x\", `${x}px`);\n        tileRef.current.style.setProperty(\"--bento-y\", `${y}px`);\n        overlayRef.current.style.opacity = \"1\";\n      });\n    },\n    [spotlightOn],\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    if (!overlayRef.current) return;\n    overlayRef.current.style.opacity = \"0\";\n  }, []);\n\n  // Grid span via inline style. On mobile (grid-cols-1) a col-span of any value\n  // is effectively clamped to 1 by the grid itself — a 4-col tile in a 1-col\n  // grid still renders in one cell. Row spans are always honoured as-is.\n  // We use `gridColumn: \"span N / span N\"` which the browser safely caps at the\n  // available track count; no CSS min() with custom-property arithmetic needed.\n  const gridStyle: CSSProperties = {\n    gridColumn: resolvedCol > 1 ? `span ${resolvedCol} / span ${resolvedCol}` : undefined,\n    gridRow: resolvedRow > 1 ? `span ${resolvedRow} / span ${resolvedRow}` : undefined,\n    ...style,\n  };\n\n  // Merge the forwarded ref and the internal tileRef into one callback ref.\n  const mergedRef = useCallback(\n    (node: HTMLDivElement | null) => {\n      (tileRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref) {\n        (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }\n    },\n    [ref],\n  );\n\n  return (\n    <div\n      ref={mergedRef as React.Ref<HTMLDivElement>}\n      className={cn(\n        bentoGridItemVariants({\n          hero: isHero,\n          interactive: isInteractive,\n        }),\n        className,\n      )}\n      style={gridStyle}\n      data-slot=\"bento-grid-item\"\n      onMouseMove={handleMouseMove}\n      onMouseLeave={handleMouseLeave}\n      {...props}\n    >\n      {/* Spotlight overlay — OPT-IN, decorative, pointer-events-none, aria-hidden.\n            Hidden in full under reduced-motion (the cursor-following IS the motion).\n            Color is a color-mix tint of --primary (token-derived, no raw color). */}\n      {spotlightOn && (\n        <div\n          ref={overlayRef}\n          aria-hidden=\"true\"\n          data-testid=\"bento-spotlight\"\n          className={cn(\n            \"pointer-events-none absolute inset-0 z-10\",\n            \"opacity-0 transition-opacity duration-base ease-standard\",\n            // Suppress entirely under reduced-motion (cursor tracking = motion).\n            \"motion-reduce:hidden\",\n          )}\n          style={{\n            // Spotlight color is a DERIVED tint of the --primary token (not a raw\n            // literal), so it stays theme-correct in every theme without a new\n            // token. `color-mix` keeps it ~12% primary over transparent.\n            background:\n              \"radial-gradient(400px circle at var(--bento-x, 50%) var(--bento-y, 50%), color-mix(in oklch, var(--primary) 12%, transparent), transparent 70%)\",\n          }}\n        />\n      )}\n      {/* Tile content — min-w-0 on inner wrapper prevents flex children from\n            overflowing on long unbroken strings (the silent truncation culprit). */}\n      <div className=\"relative z-20 flex min-w-0 flex-1 flex-col\">{children}</div>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;AAgCA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,WAA8B;AA0CjC,cA6NF,YA7NE;AAhCN,IAAM,mBAAmB,cAAsC,EAAE,WAAW,MAAM,CAAC;AA0B5E,IAAM,YAAY,WAA2C,SAASA,WAC3E,EAAE,WAAW,YAAY,OAAO,UAAU,GAAG,MAAM,GACnD,KACA;AACA,SACE,oBAAC,oBAAiB,OAAO,EAAE,UAAU,GACnC;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AAqBD,IAAM,aAAkE;AAAA,EACtE,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE;AAAA,EACrB,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE;AAAA,EACrB,IAAI,EAAE,KAAK,GAAG,KAAK,EAAE;AAAA,EACrB,MAAM,EAAE,KAAK,GAAG,KAAK,EAAE;AACzB;AAIO,IAAM,wBAAwB;AAAA,EACnC;AAAA;AAAA,IAEE,aAAa,EAAE,aAAa,MAAM,CAAC;AAAA;AAAA,IAEnC;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA,IAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACF,EAAE,KAAK,GAAG;AAAA,EACV;AAAA,IACE,UAAU;AAAA;AAAA,MAER,MAAM;AAAA,QACJ,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAOA,aAAa;AAAA,QACX,MAAM;AAAA,QACN,OAAO;AAAA,MACT;AAAA,IACF;AAAA,IACA,iBAAiB,EAAE,MAAM,OAAO,aAAa,MAAM;AAAA,EACrD;AACF;AAsCO,IAAM,gBAAgB,WAA+C,SAASC,eACnF,EAAE,OAAO,MAAM,MAAM,WAAW,MAAM,aAAa,WAAW,OAAO,UAAU,GAAG,MAAM,GACxF,KACA;AACA,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,aAAa,OAAuB,IAAI;AAG9C,QAAM,cAAc,aAAa,IAAI,gBAAgB,EAAE;AAGvD,QAAM,cAAc,MAAM,OAAO,WAAW,IAAI,EAAE;AAClD,QAAM,cAAc,MAAM,OAAO,WAAW,IAAI,EAAE;AAElD,QAAM,gBAAgB,eAAe;AAGrC,QAAM,SAAS,QAAQ,SAAS;AAGhC,QAAM,SAAS,OAAe,CAAC;AAK/B,YAAU,MAAM;AACd,WAAO,MAAM;AACX,UAAI,OAAO,QAAS,sBAAqB,OAAO,OAAO;AAAA,IACzD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAAwC;AACvC,UAAI,CAAC,eAAe,CAAC,QAAQ,WAAW,CAAC,WAAW,QAAS;AAE7D,UAAI,OAAO,QAAS,sBAAqB,OAAO,OAAO;AACvD,aAAO,UAAU,sBAAsB,MAAM;AAC3C,YAAI,CAAC,QAAQ,WAAW,CAAC,WAAW,QAAS;AAC7C,cAAM,OAAO,QAAQ,QAAQ,sBAAsB;AACnD,cAAM,IAAI,EAAE,UAAU,KAAK;AAC3B,cAAM,IAAI,EAAE,UAAU,KAAK;AAE3B,gBAAQ,QAAQ,MAAM,YAAY,aAAa,GAAG,CAAC,IAAI;AACvD,gBAAQ,QAAQ,MAAM,YAAY,aAAa,GAAG,CAAC,IAAI;AACvD,mBAAW,QAAQ,MAAM,UAAU;AAAA,MACrC,CAAC;AAAA,IACH;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,mBAAmB,YAAY,MAAM;AACzC,QAAI,CAAC,WAAW,QAAS;AACzB,eAAW,QAAQ,MAAM,UAAU;AAAA,EACrC,GAAG,CAAC,CAAC;AAOL,QAAM,YAA2B;AAAA,IAC/B,YAAY,cAAc,IAAI,QAAQ,WAAW,WAAW,WAAW,KAAK;AAAA,IAC5E,SAAS,cAAc,IAAI,QAAQ,WAAW,WAAW,WAAW,KAAK;AAAA,IACzE,GAAG;AAAA,EACL;AAGA,QAAM,YAAY;AAAA,IAChB,CAAC,SAAgC;AAC/B,MAAC,QAA0D,UAAU;AACrE,UAAI,OAAO,QAAQ,YAAY;AAC7B,YAAI,IAAI;AAAA,MACV,WAAW,KAAK;AACd,QAAC,IAAsD,UAAU;AAAA,MACnE;AAAA,IACF;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW;AAAA,QACT,sBAAsB;AAAA,UACpB,MAAM;AAAA,UACN,aAAa;AAAA,QACf,CAAC;AAAA,QACD;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP,aAAU;AAAA,MACV,aAAa;AAAA,MACb,cAAc;AAAA,MACb,GAAG;AAAA,MAKH;AAAA,uBACC;AAAA,UAAC;AAAA;AAAA,YACC,KAAK;AAAA,YACL,eAAY;AAAA,YACZ,eAAY;AAAA,YACZ,WAAW;AAAA,cACT;AAAA,cACA;AAAA;AAAA,cAEA;AAAA,YACF;AAAA,YACA,OAAO;AAAA;AAAA;AAAA;AAAA,cAIL,YACE;AAAA,YACJ;AAAA;AAAA,QACF;AAAA,QAIF,oBAAC,SAAI,WAAU,8CAA8C,UAAS;AAAA;AAAA;AAAA,EACxE;AAEJ,CAAC;","names":["BentoGrid","BentoGridItem"]}

package/dist/chunk-AE6UDP36.js

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

package/dist/chunk-AE6UDP36.js.map

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

package/dist/chunk-AFEFAGPW.js

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

package/dist/chunk-AFEFAGPW.js.map

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

package/dist/chunk-AFJCS2WV.js

@@ -0,0 +1,95 @@
+"use client";
+
+// src/components/virtual-select/use-virtual-listbox.ts
+import { useCallback, useEffect, useState } from "react";
+function findNext(filtered, from) {
+  for (let i = Math.max(0, from); i < filtered.length; i++) {
+    if (!filtered[i]?.disabled) return i;
+  }
+  return -1;
+}
+function findPrev(filtered, from) {
+  for (let i = Math.min(from, filtered.length - 1); i >= 0; i--) {
+    if (!filtered[i]?.disabled) return i;
+  }
+  return -1;
+}
+function useVirtualListbox({
+  count,
+  filtered,
+  isOpen,
+  onSelect,
+  virtualizer
+}) {
+  const [activeIndex, setActiveIndexRaw] = useState(0);
+  useEffect(() => {
+    const first = findNext(filtered, 0);
+    setActiveIndexRaw(first >= 0 ? first : 0);
+  }, [filtered]);
+  useEffect(() => {
+    if (!isOpen) setActiveIndexRaw(0);
+  }, [isOpen]);
+  const setActiveIndex = useCallback(
+    (index) => {
+      const clamped = Math.max(0, Math.min(index, count - 1));
+      setActiveIndexRaw(clamped);
+      virtualizer?.scrollToIndex(clamped, { align: "auto" });
+    },
+    [count, virtualizer]
+  );
+  const onInputKeyDown = useCallback(
+    (e) => {
+      if (!isOpen) return;
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          if (count === 0) return;
+          const next = findNext(filtered, activeIndex + 1);
+          if (next >= 0) setActiveIndex(next);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          if (count === 0) return;
+          const prev = findPrev(filtered, activeIndex - 1);
+          if (prev >= 0) setActiveIndex(prev);
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          if (count === 0) return;
+          const first = findNext(filtered, 0);
+          setActiveIndex(first >= 0 ? first : 0);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          if (count === 0) return;
+          const last = findPrev(filtered, filtered.length - 1);
+          setActiveIndex(last >= 0 ? last : 0);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          if (count === 0) return;
+          const opt = filtered[activeIndex];
+          if (opt && !opt.disabled) {
+            onSelect(opt.value);
+          }
+          break;
+        }
+        // Escape is handled by Radix Popover (it closes the portal and
+        // returns focus to the trigger). No additional handling required here.
+        default:
+          break;
+      }
+    },
+    [isOpen, count, filtered, activeIndex, setActiveIndex, onSelect]
+  );
+  return { activeIndex, setActiveIndex, onInputKeyDown };
+}
+
+export {
+  useVirtualListbox
+};
+//# sourceMappingURL=chunk-AFJCS2WV.js.map

package/dist/chunk-AFJCS2WV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/virtual-select/use-virtual-listbox.ts"],"sourcesContent":["// a2ui.exposed: yes\n\"use client\";\n\nimport { useCallback, useEffect, useState } from \"react\";\nimport type { Virtualizer } from \"@tanstack/react-virtual\";\n\nexport interface VirtualSelectOption {\n  label: string;\n  value: string;\n  disabled?: boolean;\n}\n\ninterface UseVirtualListboxOptions {\n  count: number;\n  filtered: VirtualSelectOption[];\n  /** Reserved for future use (e.g. multi-select keyboard shortcuts). */\n  multiple?: boolean;\n  isOpen: boolean;\n  onSelect: (value: string) => void;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  virtualizer: Virtualizer<any, any> | null;\n}\n\ninterface UseVirtualListboxReturn {\n  activeIndex: number;\n  setActiveIndex: (index: number) => void;\n  onInputKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** First non-disabled option index at or after `from`; -1 if none exists. */\nfunction findNext(filtered: VirtualSelectOption[], from: number): number {\n  for (let i = Math.max(0, from); i < filtered.length; i++) {\n    if (!filtered[i]?.disabled) return i;\n  }\n  return -1;\n}\n\n/** Last non-disabled option index at or before `from`; -1 if none exists. */\nfunction findPrev(filtered: VirtualSelectOption[], from: number): number {\n  for (let i = Math.min(from, filtered.length - 1); i >= 0; i--) {\n    if (!filtered[i]?.disabled) return i;\n  }\n  return -1;\n}\n\n/**\n * Keyboard navigation logic for the VirtualSelect listbox.\n * Encapsulates ArrowDown/Up/Home/End/Enter/Escape handling.\n * Focus stays on the search input; `aria-activedescendant` tracks the active row.\n */\nexport function useVirtualListbox({\n  count,\n  filtered,\n  isOpen,\n  onSelect,\n  virtualizer,\n}: UseVirtualListboxOptions): UseVirtualListboxReturn {\n  const [activeIndex, setActiveIndexRaw] = useState(0);\n\n  // When the filtered list changes, reset to the first enabled option.\n  useEffect(() => {\n    const first = findNext(filtered, 0);\n    setActiveIndexRaw(first >= 0 ? first : 0);\n  }, [filtered]);\n\n  // When the popover closes, reset to 0.\n  useEffect(() => {\n    if (!isOpen) setActiveIndexRaw(0);\n  }, [isOpen]);\n\n  const setActiveIndex = useCallback(\n    (index: number) => {\n      const clamped = Math.max(0, Math.min(index, count - 1));\n      setActiveIndexRaw(clamped);\n      virtualizer?.scrollToIndex(clamped, { align: \"auto\" });\n    },\n    [count, virtualizer],\n  );\n\n  const onInputKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (!isOpen) return;\n\n      switch (e.key) {\n        case \"ArrowDown\": {\n          e.preventDefault();\n          if (count === 0) return;\n          const next = findNext(filtered, activeIndex + 1);\n          if (next >= 0) setActiveIndex(next);\n          break;\n        }\n        case \"ArrowUp\": {\n          e.preventDefault();\n          if (count === 0) return;\n          const prev = findPrev(filtered, activeIndex - 1);\n          if (prev >= 0) setActiveIndex(prev);\n          break;\n        }\n        case \"Home\": {\n          e.preventDefault();\n          if (count === 0) return;\n          const first = findNext(filtered, 0);\n          setActiveIndex(first >= 0 ? first : 0);\n          break;\n        }\n        case \"End\": {\n          e.preventDefault();\n          if (count === 0) return;\n          const last = findPrev(filtered, filtered.length - 1);\n          setActiveIndex(last >= 0 ? last : 0);\n          break;\n        }\n        case \"Enter\": {\n          e.preventDefault();\n          if (count === 0) return;\n          const opt = filtered[activeIndex];\n          if (opt && !opt.disabled) {\n            onSelect(opt.value);\n          }\n          break;\n        }\n        // Escape is handled by Radix Popover (it closes the portal and\n        // returns focus to the trigger). No additional handling required here.\n        default:\n          break;\n      }\n    },\n    [isOpen, count, filtered, activeIndex, setActiveIndex, onSelect],\n  );\n\n  return { activeIndex, setActiveIndex, onInputKeyDown };\n}\n"],"mappings":";;;AAGA,SAAS,aAAa,WAAW,gBAAgB;AA2BjD,SAAS,SAAS,UAAiC,MAAsB;AACvE,WAAS,IAAI,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;AACxD,QAAI,CAAC,SAAS,CAAC,GAAG,SAAU,QAAO;AAAA,EACrC;AACA,SAAO;AACT;AAGA,SAAS,SAAS,UAAiC,MAAsB;AACvE,WAAS,IAAI,KAAK,IAAI,MAAM,SAAS,SAAS,CAAC,GAAG,KAAK,GAAG,KAAK;AAC7D,QAAI,CAAC,SAAS,CAAC,GAAG,SAAU,QAAO;AAAA,EACrC;AACA,SAAO;AACT;AAOO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAsD;AACpD,QAAM,CAAC,aAAa,iBAAiB,IAAI,SAAS,CAAC;AAGnD,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS,UAAU,CAAC;AAClC,sBAAkB,SAAS,IAAI,QAAQ,CAAC;AAAA,EAC1C,GAAG,CAAC,QAAQ,CAAC;AAGb,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ,mBAAkB,CAAC;AAAA,EAClC,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAAkB;AACjB,YAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,QAAQ,CAAC,CAAC;AACtD,wBAAkB,OAAO;AACzB,mBAAa,cAAc,SAAS,EAAE,OAAO,OAAO,CAAC;AAAA,IACvD;AAAA,IACA,CAAC,OAAO,WAAW;AAAA,EACrB;AAEA,QAAM,iBAAiB;AAAA,IACrB,CAAC,MAA6C;AAC5C,UAAI,CAAC,OAAQ;AAEb,cAAQ,EAAE,KAAK;AAAA,QACb,KAAK,aAAa;AAChB,YAAE,eAAe;AACjB,cAAI,UAAU,EAAG;AACjB,gBAAM,OAAO,SAAS,UAAU,cAAc,CAAC;AAC/C,cAAI,QAAQ,EAAG,gBAAe,IAAI;AAClC;AAAA,QACF;AAAA,QACA,KAAK,WAAW;AACd,YAAE,eAAe;AACjB,cAAI,UAAU,EAAG;AACjB,gBAAM,OAAO,SAAS,UAAU,cAAc,CAAC;AAC/C,cAAI,QAAQ,EAAG,gBAAe,IAAI;AAClC;AAAA,QACF;AAAA,QACA,KAAK,QAAQ;AACX,YAAE,eAAe;AACjB,cAAI,UAAU,EAAG;AACjB,gBAAM,QAAQ,SAAS,UAAU,CAAC;AAClC,yBAAe,SAAS,IAAI,QAAQ,CAAC;AACrC;AAAA,QACF;AAAA,QACA,KAAK,OAAO;AACV,YAAE,eAAe;AACjB,cAAI,UAAU,EAAG;AACjB,gBAAM,OAAO,SAAS,UAAU,SAAS,SAAS,CAAC;AACnD,yBAAe,QAAQ,IAAI,OAAO,CAAC;AACnC;AAAA,QACF;AAAA,QACA,KAAK,SAAS;AACZ,YAAE,eAAe;AACjB,cAAI,UAAU,EAAG;AACjB,gBAAM,MAAM,SAAS,WAAW;AAChC,cAAI,OAAO,CAAC,IAAI,UAAU;AACxB,qBAAS,IAAI,KAAK;AAAA,UACpB;AACA;AAAA,QACF;AAAA;AAAA;AAAA,QAGA;AACE;AAAA,MACJ;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,OAAO,UAAU,aAAa,gBAAgB,QAAQ;AAAA,EACjE;AAEA,SAAO,EAAE,aAAa,gBAAgB,eAAe;AACvD;","names":[]}

package/dist/chunk-ALNJV4XB.js

@@ -0,0 +1,218 @@
+"use client";
+import {
+  Input
+} from "./chunk-I3U52BDH.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/list-editor/list-editor.tsx
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { ChevronDown, ChevronUp, Plus, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ListEditor = forwardRef(function ListEditor2({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  reorderable = true,
+  placeholder,
+  max,
+  disabled,
+  addLabel,
+  className,
+  ...props
+}, ref) {
+  const { t } = useLocale();
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue ?? []);
+  const rows = useMemo(
+    () => isControlled ? valueProp ?? [] : internalValue,
+    [isControlled, valueProp, internalValue]
+  );
+  const commit = useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  const idCounterRef = useRef(0);
+  const makeId = useCallback(() => `list-editor-row-${idCounterRef.current++}`, []);
+  const [rowIds, setRowIds] = useState(() => rows.map(() => makeId()));
+  const lastRowsRef = useRef(rows);
+  const upButtonRefs = useRef(/* @__PURE__ */ new Map());
+  const downButtonRefs = useRef(/* @__PURE__ */ new Map());
+  const pendingFocusRef = useRef(null);
+  useEffect(() => {
+    if (rows === lastRowsRef.current) return;
+    lastRowsRef.current = rows;
+    setRowIds((prev) => {
+      if (prev.length === rows.length) return prev;
+      if (rows.length > prev.length) {
+        return [...prev, ...Array.from({ length: rows.length - prev.length }, () => makeId())];
+      }
+      return prev.slice(0, rows.length);
+    });
+  }, [rows, makeId]);
+  useEffect(() => {
+    const pending = pendingFocusRef.current;
+    if (!pending) return;
+    pendingFocusRef.current = null;
+    const map = pending.want === "up" ? upButtonRefs.current : downButtonRefs.current;
+    map.get(pending.id)?.focus();
+  }, [rowIds]);
+  const addRow = useCallback(() => {
+    if (max !== void 0 && rows.length >= max) return;
+    commit([...rows, ""]);
+    setRowIds((ids) => [...ids, makeId()]);
+  }, [rows, max, commit, makeId]);
+  const updateRow = useCallback(
+    (index, next) => {
+      commit(rows.map((row, i) => i === index ? next : row));
+    },
+    [rows, commit]
+  );
+  const removeRow = useCallback(
+    (index) => {
+      commit(rows.filter((_, i) => i !== index));
+      setRowIds((ids) => ids.filter((_, i) => i !== index));
+    },
+    [rows, commit]
+  );
+  const moveRow = useCallback(
+    (index, direction) => {
+      const target = index + direction;
+      if (target < 0 || target >= rows.length) return;
+      const next = [...rows];
+      const [moved] = next.splice(index, 1);
+      next.splice(target, 0, moved);
+      const movedId = rowIds[index];
+      commit(next);
+      setRowIds((ids) => {
+        const nextIds = [...ids];
+        const [id] = nextIds.splice(index, 1);
+        nextIds.splice(target, 0, id);
+        return nextIds;
+      });
+      const activated = direction === -1 ? "up" : "down";
+      const willDisable = activated === "up" && target === 0 || activated === "down" && target === rows.length - 1;
+      pendingFocusRef.current = {
+        id: movedId,
+        want: willDisable ? activated === "up" ? "down" : "up" : activated
+      };
+    },
+    [rows, rowIds, commit]
+  );
+  const atMax = max !== void 0 && rows.length >= max;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "list-editor",
+      className: cn("flex flex-col gap-2", className),
+      ...props,
+      children: [
+        rows.length === 0 ? /* @__PURE__ */ jsx("p", { "data-slot": "list-editor-empty", className: "text-body text-muted-foreground", children: t("ui.listEditor.empty") }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: rows.map((row, index) => {
+          const rowId = rowIds[index] ?? String(index);
+          return /* @__PURE__ */ jsxs("div", { "data-slot": "list-editor-row", className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(
+              Input,
+              {
+                "data-slot": "list-editor-item",
+                value: row,
+                placeholder,
+                disabled,
+                "aria-label": t("ui.listEditor.itemLabel", { n: index + 1 }),
+                onChange: (event) => updateRow(index, event.target.value),
+                className: "flex-1"
+              }
+            ),
+            reorderable && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ref: (el) => {
+                    if (el) upButtonRefs.current.set(rowId, el);
+                    else upButtonRefs.current.delete(rowId);
+                  },
+                  "data-slot": "list-editor-move-up",
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  disabled: disabled || index === 0,
+                  "aria-label": t("ui.listEditor.moveUp", { n: index + 1 }),
+                  onClick: () => moveRow(index, -1),
+                  children: /* @__PURE__ */ jsx(ChevronUp, { "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ref: (el) => {
+                    if (el) downButtonRefs.current.set(rowId, el);
+                    else downButtonRefs.current.delete(rowId);
+                  },
+                  "data-slot": "list-editor-move-down",
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon-sm",
+                  disabled: disabled || index === rows.length - 1,
+                  "aria-label": t("ui.listEditor.moveDown", { n: index + 1 }),
+                  onClick: () => moveRow(index, 1),
+                  children: /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                "data-slot": "list-editor-remove",
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                disabled,
+                "aria-label": t("ui.listEditor.removeItem", { n: index + 1 }),
+                onClick: () => removeRow(index),
+                children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+              }
+            )
+          ] }, rowId);
+        }) }),
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            "data-slot": "list-editor-add",
+            type: "button",
+            variant: "outline-subtle",
+            size: "sm",
+            disabled: disabled || atMax,
+            onClick: addRow,
+            className: "self-start",
+            children: [
+              /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }),
+              addLabel ?? t("ui.listEditor.addItem")
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  ListEditor
+};
+//# sourceMappingURL=chunk-ALNJV4XB.js.map

package/dist/chunk-ALNJV4XB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/list-editor/list-editor.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { ChevronDown, ChevronUp, Plus, X } from \"lucide-react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button } from \"../button\";\nimport { Input } from \"../input\";\nimport { useLocale } from \"../locale-provider\";\n\nexport interface ListEditorProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\"\n> {\n  /** Controlled list of strings. */\n  value?: string[];\n  /** Uncontrolled initial list of strings. */\n  defaultValue?: string[];\n  /** Called when the list changes (add, remove, edit, or reorder). */\n  onValueChange?: (value: string[]) => void;\n  /**\n   * Whether rows can be reordered via move-up/move-down buttons. Default\n   * true. Reordering is keyboard-operable (real buttons), never drag-only.\n   */\n  reorderable?: boolean;\n  /** Placeholder shown in each row's text field. */\n  placeholder?: string;\n  /** Maximum number of rows allowed. */\n  max?: number;\n  /** Whether the editor is disabled. */\n  disabled?: boolean;\n  /** Label for the \"add item\" control. */\n  addLabel?: ReactNode;\n}\n\n/**\n * ListEditor — one `Input` per row over a `string[]`, with add / remove /\n * keyboard-operable reorder (move-up/move-down buttons, not drag-and-drop —\n * no drag library exists in the monorepo and none should be added for this).\n *\n * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.\n */\nexport const ListEditor = forwardRef<HTMLDivElement, ListEditorProps>(function ListEditor(\n  {\n    value: valueProp,\n    defaultValue,\n    onValueChange,\n    reorderable = true,\n    placeholder,\n    max,\n    disabled,\n    addLabel,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const { t } = useLocale();\n  const isControlled = valueProp !== undefined;\n  const [internalValue, setInternalValue] = useState<string[]>(defaultValue ?? []);\n  const rows = useMemo(\n    () => (isControlled ? (valueProp ?? []) : internalValue),\n    [isControlled, valueProp, internalValue],\n  );\n\n  const commit = useCallback(\n    (next: string[]) => {\n      if (!isControlled) setInternalValue(next);\n      onValueChange?.(next);\n    },\n    [isControlled, onValueChange],\n  );\n\n  // `rows` is a bare `string[]` with no identity of its own — keying each\n  // row's DOM by its ARRAY INDEX means a reorder swaps which row's data a\n  // given DOM node (and its focused \"Move up\" button) renders, not which\n  // node holds the moved row's data. A stable per-row id, generated once and\n  // carried through add/remove/move in lockstep with `rows`, lets React\n  // (and thus keyboard focus) follow the actual row instead of the slot.\n  const idCounterRef = useRef(0);\n  const makeId = useCallback(() => `list-editor-row-${idCounterRef.current++}`, []);\n  const [rowIds, setRowIds] = useState<string[]>(() => rows.map(() => makeId()));\n  const lastRowsRef = useRef(rows);\n  const upButtonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n  const downButtonRefs = useRef<Map<string, HTMLButtonElement>>(new Map());\n  const pendingFocusRef = useRef<{ id: string; want: \"up\" | \"down\" } | null>(null);\n\n  // Safety net for a `rows` change that did NOT come from add/remove/move\n  // below (e.g. a controlled `value` reset by the app) — keeps `rowIds` the\n  // same length as `rows` without guessing at a diff.\n  useEffect(() => {\n    if (rows === lastRowsRef.current) return;\n    lastRowsRef.current = rows;\n    setRowIds((prev) => {\n      if (prev.length === rows.length) return prev;\n      if (rows.length > prev.length) {\n        return [...prev, ...Array.from({ length: rows.length - prev.length }, () => makeId())];\n      }\n      return prev.slice(0, rows.length);\n    });\n  }, [rows, makeId]);\n\n  useEffect(() => {\n    const pending = pendingFocusRef.current;\n    if (!pending) return;\n    pendingFocusRef.current = null;\n    const map = pending.want === \"up\" ? upButtonRefs.current : downButtonRefs.current;\n    map.get(pending.id)?.focus();\n  }, [rowIds]);\n\n  const addRow = useCallback(() => {\n    if (max !== undefined && rows.length >= max) return;\n    commit([...rows, \"\"]);\n    setRowIds((ids) => [...ids, makeId()]);\n  }, [rows, max, commit, makeId]);\n\n  const updateRow = useCallback(\n    (index: number, next: string) => {\n      commit(rows.map((row, i) => (i === index ? next : row)));\n    },\n    [rows, commit],\n  );\n\n  const removeRow = useCallback(\n    (index: number) => {\n      commit(rows.filter((_, i) => i !== index));\n      setRowIds((ids) => ids.filter((_, i) => i !== index));\n    },\n    [rows, commit],\n  );\n\n  const moveRow = useCallback(\n    (index: number, direction: -1 | 1) => {\n      const target = index + direction;\n      if (target < 0 || target >= rows.length) return;\n      const next = [...rows];\n      const [moved] = next.splice(index, 1);\n      next.splice(target, 0, moved!);\n      const movedId = rowIds[index]!;\n      commit(next);\n      setRowIds((ids) => {\n        const nextIds = [...ids];\n        const [id] = nextIds.splice(index, 1);\n        nextIds.splice(target, 0, id!);\n        return nextIds;\n      });\n\n      // The button the user just pressed keeps focus by default (same id ⇒\n      // same DOM node, just repositioned). The one case that needs help: the\n      // row landed at the top/bottom, so THIS direction's button is now\n      // `disabled` — a browser blurs a focused element the instant it goes\n      // disabled, dropping focus to <body>. Redirect to the row's other\n      // reorder button instead, which stays enabled.\n      const activated: \"up\" | \"down\" = direction === -1 ? \"up\" : \"down\";\n      const willDisable =\n        (activated === \"up\" && target === 0) ||\n        (activated === \"down\" && target === rows.length - 1);\n      pendingFocusRef.current = {\n        id: movedId,\n        want: willDisable ? (activated === \"up\" ? \"down\" : \"up\") : activated,\n      };\n    },\n    [rows, rowIds, commit],\n  );\n\n  const atMax = max !== undefined && rows.length >= max;\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"list-editor\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    >\n      {rows.length === 0 ? (\n        <p data-slot=\"list-editor-empty\" className=\"text-body text-muted-foreground\">\n          {t(\"ui.listEditor.empty\")}\n        </p>\n      ) : (\n        <div className=\"flex flex-col gap-2\">\n          {rows.map((row, index) => {\n            const rowId = rowIds[index] ?? String(index);\n            return (\n              <div key={rowId} data-slot=\"list-editor-row\" className=\"flex items-center gap-1\">\n                <Input\n                  data-slot=\"list-editor-item\"\n                  value={row}\n                  placeholder={placeholder}\n                  disabled={disabled}\n                  aria-label={t(\"ui.listEditor.itemLabel\", { n: index + 1 })}\n                  onChange={(event) => updateRow(index, event.target.value)}\n                  className=\"flex-1\"\n                />\n                {reorderable && (\n                  <>\n                    <Button\n                      ref={(el) => {\n                        if (el) upButtonRefs.current.set(rowId, el);\n                        else upButtonRefs.current.delete(rowId);\n                      }}\n                      data-slot=\"list-editor-move-up\"\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      disabled={disabled || index === 0}\n                      aria-label={t(\"ui.listEditor.moveUp\", { n: index + 1 })}\n                      onClick={() => moveRow(index, -1)}\n                    >\n                      <ChevronUp aria-hidden=\"true\" />\n                    </Button>\n                    <Button\n                      ref={(el) => {\n                        if (el) downButtonRefs.current.set(rowId, el);\n                        else downButtonRefs.current.delete(rowId);\n                      }}\n                      data-slot=\"list-editor-move-down\"\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      disabled={disabled || index === rows.length - 1}\n                      aria-label={t(\"ui.listEditor.moveDown\", { n: index + 1 })}\n                      onClick={() => moveRow(index, 1)}\n                    >\n                      <ChevronDown aria-hidden=\"true\" />\n                    </Button>\n                  </>\n                )}\n                <Button\n                  data-slot=\"list-editor-remove\"\n                  type=\"button\"\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  disabled={disabled}\n                  aria-label={t(\"ui.listEditor.removeItem\", { n: index + 1 })}\n                  onClick={() => removeRow(index)}\n                >\n                  <X aria-hidden=\"true\" />\n                </Button>\n              </div>\n            );\n          })}\n        </div>\n      )}\n      <Button\n        data-slot=\"list-editor-add\"\n        type=\"button\"\n        variant=\"outline-subtle\"\n        size=\"sm\"\n        disabled={disabled || atMax}\n        onClick={addRow}\n        className=\"self-start\"\n      >\n        <Plus aria-hidden=\"true\" />\n        {addLabel ?? t(\"ui.listEditor.addItem\")}\n      </Button>\n    </div>\n  );\n});\n"],"mappings":"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","names":["ListEditor"]}

package/dist/chunk-AQNLEP5F.js

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

package/dist/chunk-AQNLEP5F.js.map

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

package/dist/chunk-AUQVJ7KO.js

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

package/dist/chunk-AUQVJ7KO.js.map

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