@elabs-ai/components-ui 4.2.0 → 5.0.0

package/dist/chunk-HRYH7XQP.js

@@ -0,0 +1,209 @@
+"use client";
+import {
+  mergeRefs
+} from "./chunk-L37QZALU.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/tabs/tabs.tsx
+import {
+  createContext,
+  forwardRef,
+  use,
+  useEffect,
+  useMemo,
+  useRef
+} from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cva } from "class-variance-authority";
+import { useReducedMotion } from "@elabs-ai/components-tokens";
+import { jsx } from "react/jsx-runtime";
+var Tabs = TabsPrimitive.Root;
+function scrollTriggerIntoStrip(trigger, behavior) {
+  const strip = trigger.closest('[role="tablist"]');
+  if (!strip) return;
+  if (strip.scrollWidth <= strip.clientWidth) return;
+  const { paddingLeft, paddingRight } = getComputedStyle(strip);
+  const triggerRect = trigger.getBoundingClientRect();
+  const stripRect = strip.getBoundingClientRect();
+  const visibleLeft = stripRect.left + (parseFloat(paddingLeft) || 0);
+  const visibleRight = stripRect.right - (parseFloat(paddingRight) || 0);
+  const delta = triggerRect.left < visibleLeft ? triggerRect.left - visibleLeft : triggerRect.right > visibleRight ? triggerRect.right - visibleRight : 0;
+  if (delta === 0) return;
+  const left = strip.scrollLeft + delta;
+  if (typeof strip.scrollTo === "function") strip.scrollTo({ left, behavior });
+  else strip.scrollLeft = left;
+}
+var TABS_UNDERLINE_LIST_OVERRIDE = "tabs-underline:flex tabs-underline:h-auto tabs-underline:w-full tabs-underline:justify-start tabs-underline:rounded-none tabs-underline:bg-transparent tabs-underline:p-0 tabs-underline:border-b tabs-underline:border-rule";
+var TABS_UNDERLINE_TRIGGER_OVERRIDE = "tabs-underline:h-12 tabs-underline:rounded-none tabs-underline:border-b-(length:--tabs-indicator-width) tabs-underline:border-transparent tabs-underline:px-4 tabs-underline:py-0 tabs-underline:hover:text-foreground tabs-underline:focus-ring-inset tabs-underline:focus-visible:ring-offset-0 tabs-underline:data-[state=active]:bg-transparent tabs-underline:data-[state=active]:shadow-none tabs-underline:data-[state=active]:border-primary";
+var tabsListVariants = cva(
+  "max-w-full items-center overflow-x-auto text-muted-foreground",
+  {
+    variants: {
+      variant: {
+        // Recessed pill track with a raised active segment. Also the
+        // TOKEN-DRIVEN DEFAULT's base — see `TABS_UNDERLINE_LIST_OVERRIDE`.
+        segmented: cn(
+          "inline-flex h-9 justify-center-safe rounded-lg bg-muted p-1",
+          TABS_UNDERLINE_LIST_OVERRIDE
+        ),
+        // Line tabs: a transparent start-aligned row over a 1px rule; the active
+        // tab's underline sits on top of it (see `tabsTriggerVariants`).
+        underline: "flex w-full justify-start border-b border-rule"
+      }
+    },
+    defaultVariants: { variant: "segmented" }
+  }
+);
+var tabsTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap text-body font-control transition-colors duration-fast disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        // Also the TOKEN-DRIVEN DEFAULT's base — see `TABS_UNDERLINE_TRIGGER_OVERRIDE`.
+        segmented: cn(
+          "rounded-control px-3 py-1",
+          // `ring-offset-1`, not `-2`: the compound indicator's reach is
+          // `ring-offset` + 2px ring + 1px contour, and `TabsList` is an
+          // `overflow-x-auto` strip with `p-1` (4px). At offset 2 the reach is 5px
+          // and the scroll box clips the contour on three sides (#67 fix round 2,
+          // measured on `patterns-templates-starters-object-detail-hub--default` tab stop
+          // 9); at offset 1 it is exactly 4px and the loop closes.
+          "focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          "data-[state=active]:bg-surface-elevated data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+          "data-[state=active]:font-tabs-active",
+          TABS_UNDERLINE_TRIGGER_OVERRIDE
+        ),
+        underline: cn(
+          // The underline is a bottom BORDER inside the fixed height, transparent
+          // at rest, so activation never shifts layout. No negative margin to
+          // overlap the list's rule: the list scrolls (`overflow-x-auto`), which
+          // would clip anything hanging past its padding box. The strip has no
+          // padding for an outer ring either, so the indicator is drawn inset.
+          "h-12 rounded-none border-b-(length:--tabs-indicator-width) border-transparent px-4 hover:text-foreground",
+          "focus-ring-inset",
+          "data-[state=active]:border-primary data-[state=active]:text-foreground",
+          "data-[state=active]:font-tabs-active"
+        )
+      }
+    },
+    defaultVariants: { variant: "segmented" }
+  }
+);
+var TabsVariantContext = createContext(void 0);
+var TabsList = forwardRef(
+  function TabsList2({ className, variant, ...props }, ref) {
+    const explicitVariant = variant ?? void 0;
+    const resolved = explicitVariant ?? "segmented";
+    const innerRef = useRef(null);
+    const mergedRef = useMemo(() => mergeRefs(ref, innerRef), [ref]);
+    const reducedMotion = useReducedMotion();
+    useEffect(() => {
+      const node = innerRef.current;
+      if (!node) return;
+      const scrollActiveIntoView = () => {
+        const active = node.querySelector(
+          '[data-slot="tabs-trigger"][data-state="active"]'
+        );
+        if (active) scrollTriggerIntoStrip(active, reducedMotion ? "auto" : "smooth");
+      };
+      const activationObserver = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          const el = mutation.target;
+          if (el.getAttribute("data-state") === "active") {
+            scrollTriggerIntoStrip(el, reducedMotion ? "auto" : "smooth");
+            break;
+          }
+        }
+      });
+      activationObserver.observe(node, {
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["data-state"]
+      });
+      let resizeObserver;
+      if (typeof ResizeObserver === "function") {
+        resizeObserver = new ResizeObserver(scrollActiveIntoView);
+        resizeObserver.observe(node);
+        for (const trigger of node.querySelectorAll('[data-slot="tabs-trigger"]')) {
+          resizeObserver.observe(trigger);
+        }
+      }
+      const childListObserver = new MutationObserver((mutations) => {
+        if (!resizeObserver) return;
+        for (const mutation of mutations) {
+          mutation.addedNodes.forEach((added) => {
+            if (added instanceof HTMLElement && added.matches('[data-slot="tabs-trigger"]')) {
+              resizeObserver.observe(added);
+            }
+          });
+          mutation.removedNodes.forEach((removed) => {
+            if (removed instanceof HTMLElement && removed.matches('[data-slot="tabs-trigger"]')) {
+              resizeObserver.unobserve(removed);
+            }
+          });
+        }
+      });
+      childListObserver.observe(node, { childList: true, subtree: true });
+      return () => {
+        activationObserver.disconnect();
+        resizeObserver?.disconnect();
+        childListObserver.disconnect();
+      };
+    }, [reducedMotion]);
+    return (
+      // The normalized `explicitVariant` (undefined when unset), not
+      // `resolved` — an undefined Provider value is what lets a
+      // variant-less `TabsTrigger` also omit its own `data-variant` below.
+      /* @__PURE__ */ jsx(TabsVariantContext.Provider, { value: explicitVariant, children: /* @__PURE__ */ jsx(
+        TabsPrimitive.List,
+        {
+          ref: mergedRef,
+          "data-slot": "tabs-list",
+          "data-variant": explicitVariant,
+          className: cn(tabsListVariants({ variant: resolved }), className),
+          ...props
+        }
+      ) })
+    );
+  }
+);
+var TabsTrigger = forwardRef(function TabsTrigger2({ className, ...props }, ref) {
+  const variant = use(TabsVariantContext);
+  const resolved = variant ?? "segmented";
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Trigger,
+    {
+      ref,
+      "data-slot": "tabs-trigger",
+      "data-variant": variant,
+      className: cn(tabsTriggerVariants({ variant: resolved }), className),
+      ...props
+    }
+  );
+});
+var TabsContent = forwardRef(function TabsContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    TabsPrimitive.Content,
+    {
+      ref,
+      className: cn(
+        "mt-2 focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-1 data-[state=active]:[--tw-ease:var(--ease-entrance)]",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+export {
+  Tabs,
+  tabsListVariants,
+  tabsTriggerVariants,
+  TabsList,
+  TabsTrigger,
+  TabsContent
+};
+//# sourceMappingURL=chunk-HRYH7XQP.js.map

package/dist/chunk-HRYH7XQP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/tabs/tabs.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  use,\n  useEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n} from \"react\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useReducedMotion } from \"@elabs-ai/components-tokens\";\nimport { cn } from \"../../lib/cn\";\nimport { mergeRefs } from \"../../lib/merge-refs\";\n\nexport const Tabs = TabsPrimitive.Root;\n\n/**\n * Bring `trigger` inside the visible bounds of ITS OWN tab strip.\n *\n * Deliberately NOT `Element.scrollIntoView()`: that walks every scrollable\n * ancestor up to the document, so a Tabs sitting below the fold yanks the\n * whole PAGE (measured: `window.scrollY` 0 → 900 on a non-overflowing strip\n * under a 3000px spacer). Scrolling the strip itself is the only movement\n * this feature is entitled to make. It is also why nothing here throws under\n * jsdom, where `scrollIntoView` does not exist: the overflow gate below\n * returns first (`scrollWidth === clientWidth === 0`) and the scroll call is\n * feature-detected.\n */\nfunction scrollTriggerIntoStrip(trigger: HTMLElement, behavior: ScrollBehavior) {\n  const strip = trigger.closest<HTMLElement>('[role=\"tablist\"]');\n  if (!strip) return;\n  // A strip that fits has nothing to scroll — keep it byte-for-byte inert.\n  if (strip.scrollWidth <= strip.clientWidth) return;\n\n  // Keep the strip's own padding as a gutter, so the tab lands inset (with its\n  // focus ring / active shadow visible) rather than flush against the edge.\n  const { paddingLeft, paddingRight } = getComputedStyle(strip);\n  const triggerRect = trigger.getBoundingClientRect();\n  const stripRect = strip.getBoundingClientRect();\n  const visibleLeft = stripRect.left + (parseFloat(paddingLeft) || 0);\n  const visibleRight = stripRect.right - (parseFloat(paddingRight) || 0);\n  const delta =\n    triggerRect.left < visibleLeft\n      ? triggerRect.left - visibleLeft\n      : triggerRect.right > visibleRight\n        ? triggerRect.right - visibleRight\n        : 0;\n  // Nothing to do: the tab is already fully visible — typically because the\n  // browser's own focus-scroll got there first on a keyboard/pointer\n  // activation. That check is what keeps this from fighting the browser.\n  if (delta === 0) return;\n\n  // An ABSOLUTE target, not `scrollBy(delta)`: a relative scroll issued while\n  // an earlier smooth scroll is still in flight accumulates against a moving\n  // offset and lands short. `scrollLeft + delta` is read in the same instant\n  // as the rects, so it is exact whatever the animation is doing.\n  const left = strip.scrollLeft + delta;\n  if (typeof strip.scrollTo === \"function\") strip.scrollTo({ left, behavior });\n  else strip.scrollLeft = left;\n}\n\n/**\n * `overflow-x-auto` + `max-w-full` turn an overflowing tab strip into a\n * scroll container instead of silently clipping it — a bare `inline-flex`\n * has no bound on this element's own width, so without `max-w-full` it would\n * just grow past its parent instead of scrolling. `justify-center-safe`\n * (not `justify-center`) is required too: plain `justify-center` strands the\n * first tab off the left edge once the set overflows; `safe` falls back to\n * start-alignment on overflow while staying visually identical when the\n * strip fits (see #344).\n *\n * Token-driven default (`--tabs-variant`, default `segmented`): when the\n * caller passes NO `variant`, `TabsList`/`TabsTrigger` render with no\n * `data-variant` attribute at all — the `segmented` cva branch below, plus\n * these `tabs-underline:`-prefixed overrides, which the `tabs-underline`\n * custom variant (`themes.css`) only activates via a container style query\n * on an ancestor's `--tabs-variant`. An explicit `variant` prop always\n * renders `data-variant`, which the same custom variant's `:not([data-variant])`\n * guard excludes — so these overrides are inert on an explicit strip and its\n * own `underline` branch (below) renders unchanged. Literal strings, not\n * built via interpolation — see `badge.tsx`'s note on the same rule.\n */\nconst TABS_UNDERLINE_LIST_OVERRIDE =\n  \"tabs-underline:flex tabs-underline:h-auto tabs-underline:w-full tabs-underline:justify-start tabs-underline:rounded-none tabs-underline:bg-transparent tabs-underline:p-0 tabs-underline:border-b tabs-underline:border-rule\";\n\nconst TABS_UNDERLINE_TRIGGER_OVERRIDE =\n  \"tabs-underline:h-12 tabs-underline:rounded-none tabs-underline:border-b-(length:--tabs-indicator-width) tabs-underline:border-transparent tabs-underline:px-4 tabs-underline:py-0 tabs-underline:hover:text-foreground tabs-underline:focus-ring-inset tabs-underline:focus-visible:ring-offset-0 tabs-underline:data-[state=active]:bg-transparent tabs-underline:data-[state=active]:shadow-none tabs-underline:data-[state=active]:border-primary\";\n\nexport const tabsListVariants = cva(\n  \"max-w-full items-center overflow-x-auto text-muted-foreground\",\n  {\n    variants: {\n      variant: {\n        // Recessed pill track with a raised active segment. Also the\n        // TOKEN-DRIVEN DEFAULT's base — see `TABS_UNDERLINE_LIST_OVERRIDE`.\n        segmented: cn(\n          \"inline-flex h-9 justify-center-safe rounded-lg bg-muted p-1\",\n          TABS_UNDERLINE_LIST_OVERRIDE,\n        ),\n        // Line tabs: a transparent start-aligned row over a 1px rule; the active\n        // tab's underline sits on top of it (see `tabsTriggerVariants`).\n        underline: \"flex w-full justify-start border-b border-rule\",\n      },\n    },\n    defaultVariants: { variant: \"segmented\" },\n  },\n);\n\nexport const tabsTriggerVariants = cva(\n  \"inline-flex items-center justify-center whitespace-nowrap text-body font-control transition-colors duration-fast disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        // Also the TOKEN-DRIVEN DEFAULT's base — see `TABS_UNDERLINE_TRIGGER_OVERRIDE`.\n        segmented: cn(\n          \"rounded-control px-3 py-1\",\n          // `ring-offset-1`, not `-2`: the compound indicator's reach is\n          // `ring-offset` + 2px ring + 1px contour, and `TabsList` is an\n          // `overflow-x-auto` strip with `p-1` (4px). At offset 2 the reach is 5px\n          // and the scroll box clips the contour on three sides (#67 fix round 2,\n          // measured on `patterns-templates-starters-object-detail-hub--default` tab stop\n          // 9); at offset 1 it is exactly 4px and the loop closes.\n          \"focus-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n          \"data-[state=active]:bg-surface-elevated data-[state=active]:text-foreground data-[state=active]:shadow-sm\",\n          \"data-[state=active]:font-tabs-active\",\n          TABS_UNDERLINE_TRIGGER_OVERRIDE,\n        ),\n        underline: cn(\n          // The underline is a bottom BORDER inside the fixed height, transparent\n          // at rest, so activation never shifts layout. No negative margin to\n          // overlap the list's rule: the list scrolls (`overflow-x-auto`), which\n          // would clip anything hanging past its padding box. The strip has no\n          // padding for an outer ring either, so the indicator is drawn inset.\n          \"h-12 rounded-none border-b-(length:--tabs-indicator-width) border-transparent px-4 hover:text-foreground\",\n          \"focus-ring-inset\",\n          \"data-[state=active]:border-primary data-[state=active]:text-foreground\",\n          \"data-[state=active]:font-tabs-active\",\n        ),\n      },\n    },\n    defaultVariants: { variant: \"segmented\" },\n  },\n);\n\nexport type TabsVariant = NonNullable<VariantProps<typeof tabsListVariants>[\"variant\"]>;\n\n/**\n * The list owns the variant; its triggers read it, so a strip never mixes\n * two. `undefined` = the caller passed no `variant` on `TabsList` — the\n * token-driven default (`--tabs-variant`): neither the list nor its triggers\n * render a `data-variant` attribute, so the `tabs-underline:` custom\n * variant's container style query decides the look.\n */\nconst TabsVariantContext = createContext<TabsVariant | undefined>(undefined);\n\nexport interface TabsListProps\n  extends\n    ComponentPropsWithoutRef<typeof TabsPrimitive.List>,\n    VariantProps<typeof tabsListVariants> {}\n\nexport const TabsList = forwardRef<ElementRef<typeof TabsPrimitive.List>, TabsListProps>(\n  function TabsList({ className, variant, ...props }, ref) {\n    // cva's `VariantProps` types `variant` as possibly `null` (an explicit\n    // opt-out); normalize it to `undefined` so it matches `TabsVariant |\n    // undefined` — same DOM/CSS effect either way (no `data-variant`).\n    const explicitVariant = variant ?? undefined;\n    const resolved = explicitVariant ?? \"segmented\";\n    const innerRef = useRef<HTMLDivElement | null>(null);\n    const mergedRef = useMemo(() => mergeRefs(ref, innerRef), [ref]);\n    // Honours the in-app tri-state motion preference on `ThemeProvider` as well\n    // as the OS setting, and degrades to OS-only outside a provider.\n    const reducedMotion = useReducedMotion();\n\n    // Keep the tab that BECOMES active inside the strip's visible bounds.\n    //\n    // ONE set of observers per LIST, not one per trigger (#387 perf finding:\n    // N triggers used to mean N independent `MutationObserver`s (each\n    // watching only its own node) plus N independent `ResizeObserver`s (each\n    // ALSO watching this same shared strip) — a resize of a 20-tab strip fired\n    // 20 redundant callbacks. Watching the list's subtree in one callback\n    // gets the same behaviour for the cost of one.\n    //\n    // Watching attributes rather than reacting to a render is still\n    // load-bearing: Radix flips `data-state` on the trigger it renders, and\n    // only ITS OWN context consumer re-renders — this component does not, so\n    // a render-driven effect would never observe an activation at all\n    // (measured: 8 effect runs for 8 triggers at mount, zero on any later\n    // activation). A MutationObserver fires on a genuine inactive → active\n    // TRANSITION and never at mount, which is what stops a freshly-mounted\n    // Tabs from scrolling anything (#344 shipped a version that scrolled the\n    // page 900px on every mount).\n    useEffect(() => {\n      const node = innerRef.current;\n      if (!node) return;\n\n      const scrollActiveIntoView = () => {\n        const active = node.querySelector<HTMLElement>(\n          '[data-slot=\"tabs-trigger\"][data-state=\"active\"]',\n        );\n        if (active) scrollTriggerIntoStrip(active, reducedMotion ? \"auto\" : \"smooth\");\n      };\n\n      const activationObserver = new MutationObserver((mutations) => {\n        for (const mutation of mutations) {\n          const el = mutation.target as HTMLElement;\n          if (el.getAttribute(\"data-state\") === \"active\") {\n            scrollTriggerIntoStrip(el, reducedMotion ? \"auto\" : \"smooth\");\n            break;\n          }\n        }\n      });\n      activationObserver.observe(node, {\n        subtree: true,\n        attributes: true,\n        attributeFilter: [\"data-state\"],\n      });\n\n      // A relayout AFTER the scroll invalidates the target it was computed\n      // from: a webfont swapping in on a cold load (measured — a\n      // mono-everything theme's wider mono face left the last tab 45px\n      // outside the strip), or the strip itself being resized. One\n      // `ResizeObserver` instance covers both — it watches the strip AND\n      // every trigger inside it, not a second instance per trigger.\n      let resizeObserver: ResizeObserver | undefined;\n      if (typeof ResizeObserver === \"function\") {\n        resizeObserver = new ResizeObserver(scrollActiveIntoView);\n        resizeObserver.observe(node);\n        for (const trigger of node.querySelectorAll<HTMLElement>('[data-slot=\"tabs-trigger\"]')) {\n          resizeObserver.observe(trigger);\n        }\n      }\n\n      // A dynamic tab list can add/remove triggers later — keep the single\n      // `ResizeObserver`'s target set in sync instead of spinning up a new\n      // observer per trigger mount.\n      const childListObserver = new MutationObserver((mutations) => {\n        if (!resizeObserver) return;\n        for (const mutation of mutations) {\n          mutation.addedNodes.forEach((added) => {\n            if (added instanceof HTMLElement && added.matches('[data-slot=\"tabs-trigger\"]')) {\n              resizeObserver!.observe(added);\n            }\n          });\n          mutation.removedNodes.forEach((removed) => {\n            if (removed instanceof HTMLElement && removed.matches('[data-slot=\"tabs-trigger\"]')) {\n              resizeObserver!.unobserve(removed);\n            }\n          });\n        }\n      });\n      childListObserver.observe(node, { childList: true, subtree: true });\n\n      return () => {\n        activationObserver.disconnect();\n        resizeObserver?.disconnect();\n        childListObserver.disconnect();\n      };\n    }, [reducedMotion]);\n\n    return (\n      // The normalized `explicitVariant` (undefined when unset), not\n      // `resolved` — an undefined Provider value is what lets a\n      // variant-less `TabsTrigger` also omit its own `data-variant` below.\n      <TabsVariantContext.Provider value={explicitVariant}>\n        <TabsPrimitive.List\n          ref={mergedRef}\n          data-slot=\"tabs-list\"\n          data-variant={explicitVariant}\n          className={cn(tabsListVariants({ variant: resolved }), className)}\n          {...props}\n        />\n      </TabsVariantContext.Provider>\n    );\n  },\n);\n\nexport const TabsTrigger = forwardRef<\n  ElementRef<typeof TabsPrimitive.Trigger>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(function TabsTrigger({ className, ...props }, ref) {\n  const variant = use(TabsVariantContext);\n  const resolved = variant ?? \"segmented\";\n\n  return (\n    <TabsPrimitive.Trigger\n      ref={ref}\n      data-slot=\"tabs-trigger\"\n      data-variant={variant}\n      className={cn(tabsTriggerVariants({ variant: resolved }), className)}\n      {...props}\n    />\n  );\n});\n\nexport const TabsContent = forwardRef<\n  ElementRef<typeof TabsPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(function TabsContent({ className, ...props }, ref) {\n  return (\n    <TabsPrimitive.Content\n      ref={ref}\n      className={cn(\n        \"mt-2 focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-bottom-1 data-[state=active]:[--tw-ease:var(--ease-entrance)]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n"],"mappings":"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","names":["TabsList","TabsTrigger","TabsContent"]}

package/dist/chunk-HVFYAQLK.js

@@ -0,0 +1,101 @@
+"use client";
+import {
+  toggleVariants
+} from "./chunk-RM5JIUVW.js";
+import {
+  buttonVariants
+} from "./chunk-VA2OONPE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/toolbar/toolbar.tsx
+import * as ToolbarPrimitive from "@radix-ui/react-toolbar";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var toolbarVariants = cva("flex items-center gap-1", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      // Radix already writes `aria-orientation`; this only lays it out.
+      vertical: "h-full flex-col"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+var Toolbar = forwardRef(
+  function Toolbar2({ className, orientation, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      ToolbarPrimitive.Root,
+      {
+        ref,
+        "data-slot": "toolbar",
+        orientation: orientation ?? "horizontal",
+        className: cn(toolbarVariants({ orientation }), className),
+        ...props
+      }
+    );
+  }
+);
+var ToolbarButton = forwardRef(function ToolbarButton2({ className, variant = "ghost", size = "sm", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Button,
+    {
+      ref,
+      "data-slot": "toolbar-button",
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props
+    }
+  );
+});
+var ToolbarSeparator = forwardRef(function ToolbarSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Separator,
+    {
+      ref,
+      "data-slot": "toolbar-separator",
+      className: cn(
+        "bg-border-strong mx-1 shrink-0",
+        "data-[orientation=horizontal]:h-5 data-[orientation=horizontal]:w-px",
+        "data-[orientation=vertical]:h-px data-[orientation=vertical]:w-5",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var ToolbarToggleGroup = forwardRef(function ToolbarToggleGroup2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.ToggleGroup,
+    {
+      ref,
+      "data-slot": "toolbar-toggle-group",
+      className: cn("flex items-center gap-1", className),
+      ...props
+    }
+  );
+});
+var ToolbarToggleItem = forwardRef(function ToolbarToggleItem2({ className, size = "sm", ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.ToggleItem,
+    {
+      ref,
+      "data-slot": "toolbar-toggle-item",
+      className: cn(toggleVariants({ size }), className),
+      ...props
+    }
+  );
+});
+var ToolbarSlot = ToolbarPrimitive.Button;
+
+export {
+  toolbarVariants,
+  Toolbar,
+  ToolbarButton,
+  ToolbarSeparator,
+  ToolbarToggleGroup,
+  ToolbarToggleItem,
+  ToolbarSlot
+};
+//# sourceMappingURL=chunk-HVFYAQLK.js.map

package/dist/chunk-HVFYAQLK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/toolbar/toolbar.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * Toolbar — the ONE row that genuinely claims `role=\"toolbar\"`.\n *\n * The role is a promise: a toolbar is a SINGLE tab stop, and the arrow keys move\n * between its controls (WAI-ARIA APG). Four rows in this repo claim the role\n * without implementing that, which is worse than not claiming it — a screen\n * reader tells the user to press the arrow keys and nothing happens. This\n * component delegates the roving tabindex to `@radix-ui/react-toolbar` so the\n * promise is kept, and exists so no one has to hand-roll it again.\n *\n * When NOT to use it. A row of ordinary controls above a list or table is a\n * `ViewToolbar` — that component deliberately does not claim the role, because\n * every control there is an ordinary tab stop and readers expect Tab, not\n * arrows. Reach for `Toolbar` when the row is DENSE and SECONDARY to the content\n * it acts on (a document's page/zoom controls, a formatting bar): collapsing a\n * dozen controls into one tab stop is what makes the content reachable again.\n *\n * Anatomy — a shell plus three composable parts. There is no `actions` prop and\n * no items array: a toolbar's layout is the caller's, so groups are arranged\n * with ordinary flex utilities and `ToolbarSeparator` between them.\n */\n\nimport * as ToolbarPrimitive from \"@radix-ui/react-toolbar\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from \"react\";\n\nimport { cn } from \"../../lib/cn\";\nimport { buttonVariants } from \"../button\";\nimport { toggleVariants } from \"../toggle\";\n\n/* -------------------------------------------------------------------------- */\n/* Root                                                                        */\n/* -------------------------------------------------------------------------- */\n\nexport const toolbarVariants = cva(\"flex items-center gap-1\", {\n  variants: {\n    orientation: {\n      horizontal: \"flex-row\",\n      // Radix already writes `aria-orientation`; this only lays it out.\n      vertical: \"h-full flex-col\",\n    },\n  },\n  defaultVariants: { orientation: \"horizontal\" },\n});\n\nexport interface ToolbarProps\n  extends\n    Omit<ComponentPropsWithoutRef<typeof ToolbarPrimitive.Root>, \"orientation\">,\n    VariantProps<typeof toolbarVariants> {\n  /**\n   * What this toolbar acts on (\"Document\", \"Formatting\"). A toolbar is one tab\n   * stop with several controls inside it, so without a name a screen-reader\n   * user lands on an anonymous group — hence required, not optional.\n   */\n  \"aria-label\": string;\n}\n\n/**\n * The row shell. Renders no surface of its own: a toolbar sits ON something\n * (a card header, a document frame) and inherits that surface, so painting a\n * background here would double the fill wherever it is placed.\n */\nexport const Toolbar = forwardRef<ElementRef<typeof ToolbarPrimitive.Root>, ToolbarProps>(\n  function Toolbar({ className, orientation, ...props }, ref) {\n    return (\n      <ToolbarPrimitive.Root\n        ref={ref}\n        data-slot=\"toolbar\"\n        orientation={orientation ?? \"horizontal\"}\n        className={cn(toolbarVariants({ orientation }), className)}\n        {...props}\n      />\n    );\n  },\n);\n\n/* -------------------------------------------------------------------------- */\n/* Parts                                                                       */\n/* -------------------------------------------------------------------------- */\n\nexport interface ToolbarButtonProps\n  extends\n    ComponentPropsWithoutRef<typeof ToolbarPrimitive.Button>,\n    Pick<VariantProps<typeof buttonVariants>, \"variant\" | \"size\"> {}\n\n/**\n * A control inside the toolbar. Styled with `buttonVariants` — the same ink,\n * heights and focus ring as every other button in the system, not a parallel\n * set. Icon-only controls take `size=\"icon-sm\"` and MUST carry an `aria-label`;\n * wrap in a `Tooltip` when the glyph needs a name on screen too.\n */\nexport const ToolbarButton = forwardRef<\n  ElementRef<typeof ToolbarPrimitive.Button>,\n  ToolbarButtonProps\n>(function ToolbarButton({ className, variant = \"ghost\", size = \"sm\", ...props }, ref) {\n  return (\n    <ToolbarPrimitive.Button\n      ref={ref}\n      data-slot=\"toolbar-button\"\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    />\n  );\n});\n\nexport type ToolbarSeparatorProps = ComponentPropsWithoutRef<typeof ToolbarPrimitive.Separator>;\n\n/**\n * The divider between two groups of controls. It is the ONLY cue between two\n * same-fill regions of the row, so it takes the strong rung (WCAG 1.4.11,\n * ADR 0010) — `Separator`'s subtle default would be a decorative hairline here.\n */\nexport const ToolbarSeparator = forwardRef<\n  ElementRef<typeof ToolbarPrimitive.Separator>,\n  ToolbarSeparatorProps\n>(function ToolbarSeparator({ className, ...props }, ref) {\n  return (\n    <ToolbarPrimitive.Separator\n      ref={ref}\n      data-slot=\"toolbar-separator\"\n      className={cn(\n        \"bg-border-strong mx-1 shrink-0\",\n        \"data-[orientation=horizontal]:h-5 data-[orientation=horizontal]:w-px\",\n        \"data-[orientation=vertical]:h-px data-[orientation=vertical]:w-5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n});\n\nexport type ToolbarToggleGroupProps = ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleGroup>;\n\n/** A set of mutually-exclusive or multi-select toggles (a view switcher, bold/italic). */\nexport const ToolbarToggleGroup = forwardRef<\n  ElementRef<typeof ToolbarPrimitive.ToggleGroup>,\n  ToolbarToggleGroupProps\n>(function ToolbarToggleGroup({ className, ...props }, ref) {\n  return (\n    <ToolbarPrimitive.ToggleGroup\n      ref={ref}\n      data-slot=\"toolbar-toggle-group\"\n      className={cn(\"flex items-center gap-1\", className)}\n      {...props}\n    />\n  );\n});\n\nexport interface ToolbarToggleItemProps\n  extends\n    ComponentPropsWithoutRef<typeof ToolbarPrimitive.ToggleItem>,\n    Pick<VariantProps<typeof toggleVariants>, \"size\"> {}\n\n/** One toggle. Shares `Toggle`'s pressed styling, so state reads the same everywhere. */\nexport const ToolbarToggleItem = forwardRef<\n  ElementRef<typeof ToolbarPrimitive.ToggleItem>,\n  ToolbarToggleItemProps\n>(function ToolbarToggleItem({ className, size = \"sm\", ...props }, ref) {\n  return (\n    <ToolbarPrimitive.ToggleItem\n      ref={ref}\n      data-slot=\"toolbar-toggle-item\"\n      className={cn(toggleVariants({ size }), className)}\n      {...props}\n    />\n  );\n});\n\n/**\n * An escape hatch for anything the parts above do not cover — a `Select`, an\n * input, a `DropdownMenu` trigger. `asChild` hands the roving-tabindex wiring to\n * whatever you render, so the control stays part of the arrow-key sequence\n * instead of becoming a second tab stop inside a single-tab-stop row.\n */\nexport const ToolbarSlot = ToolbarPrimitive.Button;\n"],"mappings":";;;;;;;;;;;;AAwBA,YAAY,sBAAsB;AAClC,SAAS,WAA8B;AACvC,SAAS,kBAAkE;AAyCrE;AA/BC,IAAM,kBAAkB,IAAI,2BAA2B;AAAA,EAC5D,UAAU;AAAA,IACR,aAAa;AAAA,MACX,YAAY;AAAA;AAAA,MAEZ,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,aAAa,aAAa;AAC/C,CAAC;AAmBM,IAAM,UAAU;AAAA,EACrB,SAASA,SAAQ,EAAE,WAAW,aAAa,GAAG,MAAM,GAAG,KAAK;AAC1D,WACE;AAAA,MAAkB;AAAA,MAAjB;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,aAAa,eAAe;AAAA,QAC5B,WAAW,GAAG,gBAAgB,EAAE,YAAY,CAAC,GAAG,SAAS;AAAA,QACxD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AAiBO,IAAM,gBAAgB,WAG3B,SAASC,eAAc,EAAE,WAAW,UAAU,SAAS,OAAO,MAAM,GAAG,MAAM,GAAG,KAAK;AACrF,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,MACzD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AASM,IAAM,mBAAmB,WAG9B,SAASC,kBAAiB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AACxD,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAKM,IAAM,qBAAqB,WAGhC,SAASC,oBAAmB,EAAE,WAAW,GAAG,MAAM,GAAG,KAAK;AAC1D,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAQM,IAAM,oBAAoB,WAG/B,SAASC,mBAAkB,EAAE,WAAW,OAAO,MAAM,GAAG,MAAM,GAAG,KAAK;AACtE,SACE;AAAA,IAAkB;AAAA,IAAjB;AAAA,MACC;AAAA,MACA,aAAU;AAAA,MACV,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;AAAA,MAChD,GAAG;AAAA;AAAA,EACN;AAEJ,CAAC;AAQM,IAAM,cAA+B;","names":["Toolbar","ToolbarButton","ToolbarSeparator","ToolbarToggleGroup","ToolbarToggleItem"]}

package/dist/chunk-HZPNST7D.js

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

package/dist/chunk-HZPNST7D.js.map

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

package/dist/chunk-I6O6ACCH.js

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

package/dist/chunk-I6O6ACCH.js.map

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

package/dist/chunk-IGP5E4FC.js

@@ -0,0 +1,201 @@
+"use client";
+import {
+  Input
+} from "./chunk-XYACSO57.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-VA2OONPE.js";
+import {
+  cn
+} from "./chunk-KBNWM27Q.js";
+
+// src/components/key-value-editor/key-value-editor.tsx
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+import { Eye, EyeOff, Plus, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var KeyValueEditor = forwardRef(
+  function KeyValueEditor2({
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    keyPlaceholder,
+    valuePlaceholder,
+    addLabel,
+    disabled,
+    className,
+    ...props
+  }, ref) {
+    const { t } = useLocale();
+    const isControlled = valueProp !== void 0;
+    const [internalRows, setInternalRows] = useState(defaultValue ?? []);
+    const rows = useMemo(
+      () => isControlled ? valueProp ?? [] : internalRows,
+      [isControlled, valueProp, internalRows]
+    );
+    const [revealed, setRevealed] = useState(() => /* @__PURE__ */ new Map());
+    const isRevealed = useCallback(
+      (index, row) => revealed.get(index) === row.value,
+      [revealed]
+    );
+    const commit = useCallback(
+      (next) => {
+        if (!isControlled) setInternalRows(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    const addRow = useCallback(() => {
+      commit([...rows, { key: "", value: "", secret: false }]);
+    }, [rows, commit]);
+    const updateRow = useCallback(
+      (index, patch) => {
+        commit(rows.map((row, i) => i === index ? { ...row, ...patch } : row));
+        if (patch.value !== void 0) {
+          const nextValue = patch.value;
+          setRevealed((prev) => {
+            if (prev.get(index) !== rows[index]?.value) return prev;
+            const next = new Map(prev);
+            next.set(index, nextValue);
+            return next;
+          });
+        }
+      },
+      [rows, commit]
+    );
+    const removeRow = useCallback(
+      (index) => {
+        commit(rows.filter((_, i) => i !== index));
+        setRevealed((prev) => {
+          const next = /* @__PURE__ */ new Map();
+          for (const [i, stamp] of prev) {
+            if (i === index) continue;
+            next.set(i > index ? i - 1 : i, stamp);
+          }
+          return next;
+        });
+      },
+      [rows, commit]
+    );
+    const toggleReveal = useCallback((index, row) => {
+      setRevealed((prev) => {
+        const next = new Map(prev);
+        if (next.get(index) === row.value) next.delete(index);
+        else next.set(index, row.value);
+        return next;
+      });
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "key-value-editor",
+        className: cn("flex flex-col gap-2", className),
+        ...props,
+        children: [
+          rows.length === 0 ? /* @__PURE__ */ jsx("p", { "data-slot": "key-value-editor-empty", className: "text-body text-muted-foreground", children: t("ui.keyValueEditor.empty") }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: rows.map((row, index) => {
+            const isSecret = row.secret === true;
+            const rowRevealed = isRevealed(index, row);
+            const masked = isSecret && !rowRevealed;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-slot": "key-value-editor-row",
+                className: "flex items-center gap-1",
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      "data-slot": "key-value-editor-key",
+                      value: row.key,
+                      placeholder: keyPlaceholder,
+                      disabled,
+                      "aria-label": t("ui.keyValueEditor.keyLabel", { n: index + 1 }),
+                      onChange: (event) => updateRow(index, { key: event.target.value }),
+                      autoComplete: "off",
+                      spellCheck: false,
+                      className: "flex-1"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      "data-slot": "key-value-editor-value",
+                      type: masked ? "password" : "text",
+                      value: row.value,
+                      placeholder: valuePlaceholder,
+                      disabled,
+                      "aria-label": t("ui.keyValueEditor.valueLabel", { n: index + 1 }),
+                      onChange: (event) => updateRow(index, { value: event.target.value }),
+                      autoComplete: "off",
+                      spellCheck: false,
+                      className: "flex-1"
+                    }
+                  ),
+                  isSecret && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      "data-slot": "key-value-editor-reveal",
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon-sm",
+                      disabled,
+                      "aria-label": t(
+                        rowRevealed ? "ui.keyValueEditor.hide" : "ui.keyValueEditor.reveal",
+                        { n: index + 1 }
+                      ),
+                      onClick: () => toggleReveal(index, row),
+                      children: rowRevealed ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      "data-slot": "key-value-editor-remove",
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon-sm",
+                      disabled,
+                      "aria-label": t("ui.keyValueEditor.removeRow", { n: index + 1 }),
+                      onClick: () => removeRow(index),
+                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                    }
+                  )
+                ]
+              },
+              index
+            );
+          }) }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              "data-slot": "key-value-editor-add",
+              type: "button",
+              variant: "outline-subtle",
+              size: "sm",
+              disabled,
+              onClick: addRow,
+              className: "self-start",
+              children: [
+                /* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }),
+                addLabel ?? t("ui.keyValueEditor.addRow")
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  KeyValueEditor
+};
+//# sourceMappingURL=chunk-IGP5E4FC.js.map

package/dist/chunk-IGP5E4FC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/key-value-editor/key-value-editor.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Eye, EyeOff, 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 KeyValueRow {\n  key: string;\n  value: string;\n  /**\n   * Marks this row's value as sensitive: it renders masked (`type=\"password\"`)\n   * with a reveal toggle, and is never surfaced in plain text via any\n   * `title`/`aria-label`/`aria-valuetext`. Defaults to false (a plain,\n   * unmasked key/value pair) — the consumer opts a row in explicitly.\n   */\n  secret?: boolean;\n}\n\nexport interface KeyValueEditorProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\"\n> {\n  /**\n   * Controlled, ORDERED rows. An ordered `{ key, value, secret? }[]` is used\n   * instead of `Record<string,string>` because a plain record can't\n   * represent an in-progress duplicate key or preserve row order while the\n   * user is mid-edit — both happen constantly while typing an env-var map.\n   */\n  value?: KeyValueRow[];\n  /** Uncontrolled initial rows. */\n  defaultValue?: KeyValueRow[];\n  /** Called when the rows change (add, remove, or edit). */\n  onValueChange?: (rows: KeyValueRow[]) => void;\n  /** Placeholder for each row's key field. */\n  keyPlaceholder?: string;\n  /** Placeholder for each row's value field. */\n  valuePlaceholder?: string;\n  /** Label for the \"add row\" control. */\n  addLabel?: ReactNode;\n  /** Disables the whole editor. */\n  disabled?: boolean;\n}\n\n/**\n * KeyValueEditor — key/value rows with per-row secret masking.\n *\n * Composes the existing `Input` + `Button` (icon vocabulary matches\n * `packages/ai/src/environment-variables.tsx`'s `Eye`/`EyeOff` reveal icons\n * for conceptual consistency, though this component lives in\n * `@elabs-ai/components-ui` — an EDITABLE settings-form primitive\n * is app UI, not the read-only agent tool-output display that\n * `EnvironmentVariables` is).\n *\n * A masked row uses the native `type=\"password\"` input (the correct\n * primitive for an EDITABLE masked field — unlike a read-only display, the\n * value must stay typable, and native masking is what keeps it that way\n * without hand-rolling bullet substitution). The reveal toggle's\n * `aria-label` never contains the secret text itself, and no `title`\n * attribute is ever set from row content.\n *\n * Controlled via `value`/`onValueChange`; uncontrolled via `defaultValue`.\n */\nexport const KeyValueEditor = forwardRef<HTMLDivElement, KeyValueEditorProps>(\n  function KeyValueEditor(\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      keyPlaceholder,\n      valuePlaceholder,\n      addLabel,\n      disabled,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const { t } = useLocale();\n    const isControlled = valueProp !== undefined;\n    const [internalRows, setInternalRows] = useState<KeyValueRow[]>(defaultValue ?? []);\n    const rows = useMemo(\n      () => (isControlled ? (valueProp ?? []) : internalRows),\n      [isControlled, valueProp, internalRows],\n    );\n    // Reveal state is keyed by row index AND stamped with the exact value the\n    // user chose to reveal. The index alone is NOT safe: the row list can be\n    // re-ordered, prepended to, filtered, or left unchanged (a controlled\n    // parent that rejects a removal) entirely OUTSIDE this component, and a\n    // bare index would then point at a DIFFERENT row — unmasking a secret the\n    // user never asked to see. Comparing the stamp against the row's current\n    // value makes the check FAIL CLOSED: any row whose value is not exactly\n    // the one that was revealed renders masked again.\n    const [revealed, setRevealed] = useState<Map<number, string>>(() => new Map());\n\n    const isRevealed = useCallback(\n      (index: number, row: KeyValueRow) => revealed.get(index) === row.value,\n      [revealed],\n    );\n\n    const commit = useCallback(\n      (next: KeyValueRow[]) => {\n        if (!isControlled) setInternalRows(next);\n        onValueChange?.(next);\n      },\n      [isControlled, onValueChange],\n    );\n\n    const addRow = useCallback(() => {\n      commit([...rows, { key: \"\", value: \"\", secret: false }]);\n    }, [rows, commit]);\n\n    const updateRow = useCallback(\n      (index: number, patch: Partial<KeyValueRow>) => {\n        commit(rows.map((row, i) => (i === index ? { ...row, ...patch } : row)));\n        // Typing into a row the user deliberately revealed must not re-mask it\n        // mid-keystroke — re-stamp the snapshot with the new value, but ONLY\n        // when the old stamp still matched (i.e. it really was revealed).\n        if (patch.value !== undefined) {\n          const nextValue = patch.value;\n          setRevealed((prev) => {\n            if (prev.get(index) !== rows[index]?.value) return prev;\n            const next = new Map(prev);\n            next.set(index, nextValue);\n            return next;\n          });\n        }\n      },\n      [rows, commit],\n    );\n\n    const removeRow = useCallback(\n      (index: number) => {\n        commit(rows.filter((_, i) => i !== index));\n        // Re-index revealed state so a shifted row never inherits a stale\n        // reveal — dropping the removed index and shifting later ones down.\n        // The value stamp above is the second line of defence: if the parent\n        // rejects or rewrites the removal, the shifted stamps stop matching\n        // and every row falls back to masked.\n        setRevealed((prev) => {\n          const next = new Map<number, string>();\n          for (const [i, stamp] of prev) {\n            if (i === index) continue;\n            next.set(i > index ? i - 1 : i, stamp);\n          }\n          return next;\n        });\n      },\n      [rows, commit],\n    );\n\n    const toggleReveal = useCallback((index: number, row: KeyValueRow) => {\n      setRevealed((prev) => {\n        const next = new Map(prev);\n        if (next.get(index) === row.value) next.delete(index);\n        else next.set(index, row.value);\n        return next;\n      });\n    }, []);\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"key-value-editor\"\n        className={cn(\"flex flex-col gap-2\", className)}\n        {...props}\n      >\n        {rows.length === 0 ? (\n          <p data-slot=\"key-value-editor-empty\" className=\"text-body text-muted-foreground\">\n            {t(\"ui.keyValueEditor.empty\")}\n          </p>\n        ) : (\n          <div className=\"flex flex-col gap-2\">\n            {rows.map((row, index) => {\n              const isSecret = row.secret === true;\n              const rowRevealed = isRevealed(index, row);\n              const masked = isSecret && !rowRevealed;\n              return (\n                <div\n                  key={index}\n                  data-slot=\"key-value-editor-row\"\n                  className=\"flex items-center gap-1\"\n                >\n                  <Input\n                    data-slot=\"key-value-editor-key\"\n                    value={row.key}\n                    placeholder={keyPlaceholder}\n                    disabled={disabled}\n                    aria-label={t(\"ui.keyValueEditor.keyLabel\", { n: index + 1 })}\n                    onChange={(event) => updateRow(index, { key: event.target.value })}\n                    autoComplete=\"off\"\n                    spellCheck={false}\n                    className=\"flex-1\"\n                  />\n                  <Input\n                    data-slot=\"key-value-editor-value\"\n                    type={masked ? \"password\" : \"text\"}\n                    value={row.value}\n                    placeholder={valuePlaceholder}\n                    disabled={disabled}\n                    aria-label={t(\"ui.keyValueEditor.valueLabel\", { n: index + 1 })}\n                    onChange={(event) => updateRow(index, { value: event.target.value })}\n                    autoComplete=\"off\"\n                    spellCheck={false}\n                    className=\"flex-1\"\n                  />\n                  {isSecret && (\n                    <Button\n                      data-slot=\"key-value-editor-reveal\"\n                      type=\"button\"\n                      variant=\"ghost\"\n                      size=\"icon-sm\"\n                      disabled={disabled}\n                      aria-label={t(\n                        rowRevealed ? \"ui.keyValueEditor.hide\" : \"ui.keyValueEditor.reveal\",\n                        { n: index + 1 },\n                      )}\n                      onClick={() => toggleReveal(index, row)}\n                    >\n                      {rowRevealed ? <EyeOff aria-hidden=\"true\" /> : <Eye aria-hidden=\"true\" />}\n                    </Button>\n                  )}\n                  <Button\n                    data-slot=\"key-value-editor-remove\"\n                    type=\"button\"\n                    variant=\"ghost\"\n                    size=\"icon-sm\"\n                    disabled={disabled}\n                    aria-label={t(\"ui.keyValueEditor.removeRow\", { 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=\"key-value-editor-add\"\n          type=\"button\"\n          variant=\"outline-subtle\"\n          size=\"sm\"\n          disabled={disabled}\n          onClick={addRow}\n          className=\"self-start\"\n        >\n          <Plus aria-hidden=\"true\" />\n          {addLabel ?? t(\"ui.keyValueEditor.addRow\")}\n        </Button>\n      </div>\n    );\n  },\n);\n"],"mappings":"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","names":["KeyValueEditor"]}