@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-QKZX5HDY.js

@@ -0,0 +1,209 @@
+"use client";
+import {
+  mergeRefs
+} from "./chunk-L37QZALU.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.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-QKZX5HDY.js.map

package/dist/chunk-QKZX5HDY.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-QLM3KTAQ.js

@@ -0,0 +1,100 @@
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuTrigger
+} from "./chunk-ZSYT5H6U.js";
+import {
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar
+} from "./chunk-HWVU636Q.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/team-switcher/team-switcher.tsx
+import * as React from "react";
+import { ChevronsUpDown, Plus } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function TeamSwitcher({ teams, logoClassName, className }) {
+  const { isMobile } = useSidebar();
+  const { t } = useLocale();
+  const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+  if (!activeTeam) return null;
+  const Logo = activeTeam.logo;
+  return /* @__PURE__ */ jsx(SidebarMenu, { className, children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      SidebarMenuButton,
+      {
+        size: "lg",
+        "aria-label": `${activeTeam.name} ${activeTeam.plan}`,
+        className: "data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg",
+                logoClassName ?? "bg-sidebar-accent text-sidebar-accent-foreground",
+                "group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:rounded-none group-data-[collapsible=icon]:bg-transparent group-data-[collapsible=icon]:text-sidebar-foreground"
+              ),
+              children: /* @__PURE__ */ jsx(Logo, { className: "size-4" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "grid flex-1 text-start text-body leading-tight group-data-[collapsible=icon]:hidden", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-semibold", children: activeTeam.name }),
+            /* @__PURE__ */ jsx("span", { className: "truncate text-meta", children: activeTeam.plan })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "ms-auto group-data-[collapsible=icon]:hidden" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        className: "w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg",
+        align: "start",
+        side: isMobile ? "bottom" : "right",
+        sideOffset: 4,
+        children: [
+          /* @__PURE__ */ jsx(DropdownMenuLabel, { className: "text-meta text-muted-foreground", children: t("ui.teamSwitcher.label") }),
+          teams.map((team, index) => /* @__PURE__ */ jsxs(
+            DropdownMenuItem,
+            {
+              onClick: () => setActiveTeam(team),
+              className: "gap-2 p-2",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-md border", children: /* @__PURE__ */ jsx(team.logo, { className: "size-4 shrink-0" }) }),
+                team.name,
+                /* @__PURE__ */ jsxs(DropdownMenuShortcut, { children: [
+                  "\u2318",
+                  index + 1
+                ] })
+              ]
+            },
+            team.name
+          )),
+          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+          /* @__PURE__ */ jsxs(DropdownMenuItem, { className: "gap-2 p-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "flex size-6 items-center justify-center rounded-md border bg-transparent", children: /* @__PURE__ */ jsx(Plus, { className: "size-4" }) }),
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-muted-foreground", children: t("ui.teamSwitcher.addTeam") })
+          ] })
+        ]
+      }
+    )
+  ] }) }) });
+}
+
+export {
+  TeamSwitcher
+};
+//# sourceMappingURL=chunk-QLM3KTAQ.js.map

package/dist/chunk-QLM3KTAQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/team-switcher/team-switcher.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { ChevronsUpDown, Plus } from \"lucide-react\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu\";\nimport { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from \"../sidebar\";\nimport { useLocale } from \"../locale-provider\";\nimport { cn } from \"../../lib/cn\";\n\nexport type TeamSwitcherTeam = {\n  name: string;\n  logo: React.ElementType;\n  plan: string;\n};\n\nexport interface TeamSwitcherProps {\n  teams: TeamSwitcherTeam[];\n  /**\n   * Tailwind class for the active-team logo container background.\n   * @default \"bg-sidebar-accent text-sidebar-accent-foreground\"\n   */\n  logoClassName?: string;\n  className?: string;\n}\n\n/**\n * Sidebar team/workspace switcher. Shared primitive reconciled from sidebar-02\n * and sidebar-05 blocks (issue #99). Copy-owned blocks should import this\n * instead of maintaining local duplicates.\n */\nexport function TeamSwitcher({ teams, logoClassName, className }: TeamSwitcherProps) {\n  const { isMobile } = useSidebar();\n  const { t } = useLocale();\n  const [activeTeam, setActiveTeam] = React.useState(teams[0]);\n  if (!activeTeam) return null;\n  const Logo = activeTeam.logo;\n\n  return (\n    <SidebarMenu className={className}>\n      <SidebarMenuItem>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <SidebarMenuButton\n              size=\"lg\"\n              // The name is written out rather than left to the button's own\n              // contents, because the contents cannot carry it in every state:\n              // collapsed to the 48px rail the trigger is one glyph, and the\n              // label beside it is either gone or clipped out of view by the\n              // button's `overflow-hidden` — either way axe reads a nameless\n              // button (`button-name`, critical). The string is exactly the\n              // visible label, in reading order, so WCAG 2.5.3 (label in name)\n              // holds expanded, where that label IS on screen. Verified by\n              // deleting this line and watching three dashboard stories fail\n              // `button-name` (critical).\n              aria-label={`${activeTeam.name} ${activeTeam.plan}`}\n              className=\"data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground\"\n            >\n              {/* Collapsed, this row is ONE ICON in a 48px rail and has to sit\n                  on the same centre line as every nav entry above and below it.\n                  Measured before this fix: the 32px plate did not fit the\n                  button's 16px content box, so it overflowed (clipped by the\n                  button's own `overflow-hidden`) and its glyph landed 8px to the\n                  trailing side of every other icon in the rail. So the plate\n                  becomes the glyph's own 16px box — no fill, no radius, nothing\n                  to overflow — and the label and chevron stand down: at 48px\n                  there is no room to read them, and they are what crowds the\n                  plate. Expanded, all three come back unchanged. */}\n              <div\n                className={cn(\n                  \"flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg\",\n                  logoClassName ?? \"bg-sidebar-accent text-sidebar-accent-foreground\",\n                  \"group-data-[collapsible=icon]:size-4 group-data-[collapsible=icon]:rounded-none group-data-[collapsible=icon]:bg-transparent group-data-[collapsible=icon]:text-sidebar-foreground\",\n                )}\n              >\n                <Logo className=\"size-4\" />\n              </div>\n              <div className=\"grid flex-1 text-start text-body leading-tight group-data-[collapsible=icon]:hidden\">\n                <span className=\"truncate font-semibold\">{activeTeam.name}</span>\n                <span className=\"truncate text-meta\">{activeTeam.plan}</span>\n              </div>\n              {/* Decorative, so it simply goes. */}\n              <ChevronsUpDown className=\"ms-auto group-data-[collapsible=icon]:hidden\" />\n            </SidebarMenuButton>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent\n            className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg\"\n            align=\"start\"\n            side={isMobile ? \"bottom\" : \"right\"}\n            sideOffset={4}\n          >\n            <DropdownMenuLabel className=\"text-meta text-muted-foreground\">\n              {t(\"ui.teamSwitcher.label\")}\n            </DropdownMenuLabel>\n            {teams.map((team, index) => (\n              <DropdownMenuItem\n                key={team.name}\n                onClick={() => setActiveTeam(team)}\n                className=\"gap-2 p-2\"\n              >\n                <div className=\"flex size-6 items-center justify-center rounded-md border\">\n                  <team.logo className=\"size-4 shrink-0\" />\n                </div>\n                {team.name}\n                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>\n              </DropdownMenuItem>\n            ))}\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"gap-2 p-2\">\n              <div className=\"flex size-6 items-center justify-center rounded-md border bg-transparent\">\n                <Plus className=\"size-4\" />\n              </div>\n              <div className=\"font-medium text-muted-foreground\">\n                {t(\"ui.teamSwitcher.addTeam\")}\n              </div>\n            </DropdownMenuItem>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </SidebarMenuItem>\n    </SidebarMenu>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAEA,YAAY,WAAW;AACvB,SAAS,gBAAgB,YAAY;AA+ErB,cAEF,YAFE;AA5CT,SAAS,aAAa,EAAE,OAAO,eAAe,UAAU,GAAsB;AACnF,QAAM,EAAE,SAAS,IAAI,WAAW;AAChC,QAAM,EAAE,EAAE,IAAI,UAAU;AACxB,QAAM,CAAC,YAAY,aAAa,IAAU,eAAS,MAAM,CAAC,CAAC;AAC3D,MAAI,CAAC,WAAY,QAAO;AACxB,QAAM,OAAO,WAAW;AAExB,SACE,oBAAC,eAAY,WACX,8BAAC,mBACC,+BAAC,gBACC;AAAA,wBAAC,uBAAoB,SAAO,MAC1B;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QAWL,cAAY,GAAG,WAAW,IAAI,IAAI,WAAW,IAAI;AAAA,QACjD,WAAU;AAAA,QAYV;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,iBAAiB;AAAA,gBACjB;AAAA,cACF;AAAA,cAEA,8BAAC,QAAK,WAAU,UAAS;AAAA;AAAA,UAC3B;AAAA,UACA,qBAAC,SAAI,WAAU,uFACb;AAAA,gCAAC,UAAK,WAAU,0BAA0B,qBAAW,MAAK;AAAA,YAC1D,oBAAC,UAAK,WAAU,sBAAsB,qBAAW,MAAK;AAAA,aACxD;AAAA,UAEA,oBAAC,kBAAe,WAAU,gDAA+C;AAAA;AAAA;AAAA,IAC3E,GACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,WAAU;AAAA,QACV,OAAM;AAAA,QACN,MAAM,WAAW,WAAW;AAAA,QAC5B,YAAY;AAAA,QAEZ;AAAA,8BAAC,qBAAkB,WAAU,mCAC1B,YAAE,uBAAuB,GAC5B;AAAA,UACC,MAAM,IAAI,CAAC,MAAM,UAChB;AAAA,YAAC;AAAA;AAAA,cAEC,SAAS,MAAM,cAAc,IAAI;AAAA,cACjC,WAAU;AAAA,cAEV;AAAA,oCAAC,SAAI,WAAU,6DACb,8BAAC,KAAK,MAAL,EAAU,WAAU,mBAAkB,GACzC;AAAA,gBACC,KAAK;AAAA,gBACN,qBAAC,wBAAqB;AAAA;AAAA,kBAAE,QAAQ;AAAA,mBAAE;AAAA;AAAA;AAAA,YAR7B,KAAK;AAAA,UASZ,CACD;AAAA,UACD,oBAAC,yBAAsB;AAAA,UACvB,qBAAC,oBAAiB,WAAU,aAC1B;AAAA,gCAAC,SAAI,WAAU,4EACb,8BAAC,QAAK,WAAU,UAAS,GAC3B;AAAA,YACA,oBAAC,SAAI,WAAU,qCACZ,YAAE,yBAAyB,GAC9B;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KACF,GACF,GACF;AAEJ;","names":[]}

package/dist/chunk-QODOFLHL.js

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

package/dist/chunk-QODOFLHL.js.map

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

package/dist/chunk-QRGYKV4J.js

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

package/dist/chunk-QRGYKV4J.js.map

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

package/dist/chunk-R27VUCWR.js

@@ -0,0 +1,140 @@
+"use client";
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "./chunk-YFGFNFVW.js";
+import {
+  Label
+} from "./chunk-U756JCDK.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/segmented-field/segmented-field.tsx
+import {
+  forwardRef,
+  useCallback,
+  useId,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NAV_KEYS = /* @__PURE__ */ new Set(["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown", "Home", "End"]);
+var SegmentedField = forwardRef(
+  function SegmentedField2({
+    label,
+    options,
+    value: valueProp,
+    defaultValue,
+    onValueChange,
+    size = "sm",
+    disabled,
+    id,
+    className,
+    children,
+    ...props
+  }, ref) {
+    const generatedId = useId();
+    const labelId = `${id ?? generatedId}-label`;
+    const groupRef = useRef(null);
+    const isControlled = valueProp !== void 0;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = isControlled ? valueProp : internalValue;
+    const lastCommittedRef = useRef(currentValue);
+    lastCommittedRef.current = currentValue;
+    const commit = useCallback(
+      (next) => {
+        if (next === "" || next === lastCommittedRef.current) return;
+        lastCommittedRef.current = next;
+        if (!isControlled) setInternalValue(next);
+        onValueChange?.(next);
+      },
+      [isControlled, onValueChange]
+    );
+    const keyboardNavRef = useRef(false);
+    const handleKeyDownCapture = useCallback(
+      (event) => {
+        keyboardNavRef.current = NAV_KEYS.has(event.key);
+        props.onKeyDownCapture?.(event);
+      },
+      [props]
+    );
+    const handlePointerDownCapture = useCallback(
+      (event) => {
+        keyboardNavRef.current = false;
+        props.onPointerDownCapture?.(event);
+      },
+      [props]
+    );
+    const handleBlurCapture = useCallback(
+      (event) => {
+        if (!event.currentTarget.contains(event.relatedTarget)) {
+          keyboardNavRef.current = false;
+        }
+        props.onBlurCapture?.(event);
+      },
+      [props]
+    );
+    const handleItemFocus = useCallback(
+      (next) => {
+        if (!keyboardNavRef.current) return;
+        keyboardNavRef.current = false;
+        commit(next);
+      },
+      [commit]
+    );
+    const handleLabelClick = useCallback(() => {
+      const group = groupRef.current;
+      if (!group) return;
+      const selected = group.querySelector(
+        '[aria-checked="true"]:not(:disabled),[data-state="on"]:not(:disabled)'
+      );
+      (selected ?? group.querySelector("button:not(:disabled)"))?.focus();
+    }, []);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "segmented-field",
+        className: cn("flex flex-col items-start gap-1.5", className),
+        ...props,
+        onKeyDownCapture: handleKeyDownCapture,
+        onPointerDownCapture: handlePointerDownCapture,
+        onBlurCapture: handleBlurCapture,
+        children: [
+          /* @__PURE__ */ jsx(Label, { id: labelId, "data-slot": "segmented-field-label", onClick: handleLabelClick, children: label }),
+          /* @__PURE__ */ jsx(
+            ToggleGroup,
+            {
+              ref: groupRef,
+              type: "single",
+              variant: "segmented",
+              size,
+              value: currentValue ?? "",
+              onValueChange: commit,
+              disabled,
+              "aria-labelledby": labelId,
+              "data-slot": "segmented-field-options",
+              children: options ? options.map((option) => /* @__PURE__ */ jsx(
+                ToggleGroupItem,
+                {
+                  "data-slot": "segmented-field-segment",
+                  value: option.value,
+                  disabled: option.disabled,
+                  onFocus: () => handleItemFocus(option.value),
+                  children: option.label
+                },
+                option.value
+              )) : children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export {
+  SegmentedField
+};
+//# sourceMappingURL=chunk-R27VUCWR.js.map

package/dist/chunk-R27VUCWR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/segmented-field/segmented-field.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type FocusEvent as ReactFocusEvent,\n  type HTMLAttributes,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Label } from \"../label\";\nimport { ToggleGroup, ToggleGroupItem } from \"../toggle-group\";\n\n/** Keys whose focus move must also move the selection (WAI-ARIA radiogroup). */\nconst NAV_KEYS = new Set([\"ArrowLeft\", \"ArrowRight\", \"ArrowUp\", \"ArrowDown\", \"Home\", \"End\"]);\n\nexport interface SegmentedFieldOption {\n  /** The option's value, reported to `onValueChange`. */\n  value: string;\n  /** Visible content for the segment. */\n  label: ReactNode;\n  /** Disables just this segment. */\n  disabled?: boolean;\n}\n\nexport interface SegmentedFieldProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\"\n> {\n  /** Visible label describing the field. */\n  label: ReactNode;\n  /**\n   * Segment options. Omit and render `ToggleGroupItem` children directly for\n   * the compound-component escape hatch (component-api.md) when a plain\n   * `{ value, label }` shape isn't expressive enough.\n   */\n  options?: SegmentedFieldOption[];\n  /** Controlled selected value. */\n  value?: string;\n  /** Uncontrolled initial selected value. */\n  defaultValue?: string;\n  /**\n   * Called when the selected value changes. Never called with `\"\"` —\n   * re-clicking the active segment (Radix `ToggleGroup`'s `type=\"single\"`\n   * empty-emission on re-click) is swallowed as a no-op instead of clearing\n   * the field.\n   */\n  onValueChange?: (value: string) => void;\n  /** Size applied to every segment. Defaults to \"sm\", matching the compact segmented look. */\n  size?: \"default\" | \"sm\" | \"lg\";\n  /** Disables every segment. */\n  disabled?: boolean;\n  /** `ToggleGroupItem` children — the compound escape hatch (used instead of `options`). */\n  children?: ReactNode;\n}\n\n/**\n * SegmentedField — a labelled segmented control with STICKY selection.\n *\n * Composes the existing `Label` + `ToggleGroup`/`ToggleGroupItem`\n * (`variant=\"segmented\"`) — no new visual style. The whole reason this\n * component exists: Radix's `ToggleGroup` in `type=\"single\"` mode emits `\"\"`\n * when the already-active segment is re-clicked, silently clearing a field\n * that must always hold exactly one value. `SegmentedField` swallows that\n * emission so re-clicking the active segment is a true no-op.\n *\n * Per the WAI-ARIA radiogroup pattern (each segment renders `role=\"radio\"`\n * for `type=\"single\"`), ARROW-KEY navigation also SELECTS the newly focused\n * segment (selection follows focus), matching native radio-button behavior —\n * Radix's roving-tabindex only moves focus, so this component adds that\n * activation on top of it.\n *\n * Selection follows focus ONLY for arrow/Home/End keys, never for arbitrary\n * focus. A bare `onFocus` commit would make three non-navigation paths mutate\n * the field: clicking the `<Label>` (which moves focus into the group),\n * tabbing into a group with nothing selected yet, and any programmatic\n * `.focus()` a consumer performs. The keyboard intent is recorded on the\n * wrapper in the CAPTURE phase (it must land before Radix's own roving-focus\n * keydown handler runs) and is cleared by the focus it explains, by a pointer\n * press, by any non-navigation key, or by focus leaving the field — so it can\n * never leak into a later, unrelated focus.\n */\nexport const SegmentedField = forwardRef<HTMLDivElement, SegmentedFieldProps>(\n  function SegmentedField(\n    {\n      label,\n      options,\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      size = \"sm\",\n      disabled,\n      id,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const labelId = `${id ?? generatedId}-label`;\n    const groupRef = useRef<HTMLDivElement>(null);\n\n    const isControlled = valueProp !== undefined;\n    const [internalValue, setInternalValue] = useState(defaultValue);\n    const currentValue = isControlled ? valueProp : internalValue;\n\n    // Synced every render (mirrors the ref-during-render idiom in\n    // NumberInput) so a same-event double-dispatch (focus-follows-selection\n    // AND the click's own onPressedChange) commits at most once.\n    const lastCommittedRef = useRef(currentValue);\n    lastCommittedRef.current = currentValue;\n\n    const commit = useCallback(\n      (next: string) => {\n        // Radix emits \"\" when the active segment is re-clicked — swallow it.\n        if (next === \"\" || next === lastCommittedRef.current) return;\n        lastCommittedRef.current = next;\n        if (!isControlled) setInternalValue(next);\n        onValueChange?.(next);\n      },\n      [isControlled, onValueChange],\n    );\n\n    // Armed by an arrow/Home/End key, DISARMED by anything else — a pointer\n    // press, any other key, or focus leaving the field. It is deliberately not\n    // a timer: `@radix-ui/react-roving-focus` moves focus in a\n    // `setTimeout(() => focusFirst(...))`, so a microtask/`setTimeout` reset\n    // queued from the capture phase would always fire first and the arm would\n    // be gone before the focus it exists to classify.\n    const keyboardNavRef = useRef(false);\n\n    const handleKeyDownCapture = useCallback(\n      (event: ReactKeyboardEvent<HTMLDivElement>) => {\n        keyboardNavRef.current = NAV_KEYS.has(event.key);\n        props.onKeyDownCapture?.(event);\n      },\n      [props],\n    );\n\n    const handlePointerDownCapture = useCallback(\n      (event: ReactPointerEvent<HTMLDivElement>) => {\n        keyboardNavRef.current = false;\n        props.onPointerDownCapture?.(event);\n      },\n      [props],\n    );\n\n    const handleBlurCapture = useCallback(\n      (event: ReactFocusEvent<HTMLDivElement>) => {\n        // Focus moving between segments keeps the arm; leaving the field drops\n        // it, so a stale arm can never fire on a later tab-in.\n        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {\n          keyboardNavRef.current = false;\n        }\n        props.onBlurCapture?.(event);\n      },\n      [props],\n    );\n\n    const handleItemFocus = useCallback(\n      (next: string) => {\n        if (!keyboardNavRef.current) return;\n        keyboardNavRef.current = false;\n        commit(next);\n      },\n      [commit],\n    );\n\n    // Match a native `<label>`: move focus into the field without changing it.\n    // Focusing the SELECTED segment (not blindly the first) keeps the visible\n    // selection and the focus ring in agreement.\n    const handleLabelClick = useCallback(() => {\n      const group = groupRef.current;\n      if (!group) return;\n      const selected = group.querySelector<HTMLButtonElement>(\n        '[aria-checked=\"true\"]:not(:disabled),[data-state=\"on\"]:not(:disabled)',\n      );\n      (selected ?? group.querySelector<HTMLButtonElement>(\"button:not(:disabled)\"))?.focus();\n    }, []);\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"segmented-field\"\n        className={cn(\"flex flex-col items-start gap-1.5\", className)}\n        {...props}\n        // After the spread: these three are load-bearing (they classify a\n        // focus as arrow-navigation or not) and each re-invokes the consumer's\n        // handler, so composing beats being silently replaced.\n        onKeyDownCapture={handleKeyDownCapture}\n        onPointerDownCapture={handlePointerDownCapture}\n        onBlurCapture={handleBlurCapture}\n      >\n        <Label id={labelId} data-slot=\"segmented-field-label\" onClick={handleLabelClick}>\n          {label}\n        </Label>\n        <ToggleGroup\n          ref={groupRef}\n          type=\"single\"\n          variant=\"segmented\"\n          size={size}\n          // Always a string, never `undefined` — an unselected field would\n          // otherwise start UNcontrolled and flip to controlled on the first\n          // selection (React/Radix warn, and the mode flip is exactly what\n          // component-api.md forbids). `\"\"` is Radix's \"nothing selected\".\n          value={currentValue ?? \"\"}\n          onValueChange={commit}\n          disabled={disabled}\n          aria-labelledby={labelId}\n          data-slot=\"segmented-field-options\"\n        >\n          {options\n            ? options.map((option) => (\n                <ToggleGroupItem\n                  key={option.value}\n                  data-slot=\"segmented-field-segment\"\n                  value={option.value}\n                  disabled={option.disabled}\n                  onFocus={() => handleItemFocus(option.value)}\n                >\n                  {option.label}\n                </ToggleGroupItem>\n              ))\n            : children}\n        </ToggleGroup>\n      </div>\n    );\n  },\n);\n"],"mappings":"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","names":["SegmentedField"]}

package/dist/chunk-R5JYMCEA.js

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

package/dist/chunk-R5JYMCEA.js.map

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

package/dist/chunk-RB5AWLDJ.js

@@ -0,0 +1,26 @@
+"use client";
+
+// src/lib/diff-line.ts
+function diffLineMarker(type) {
+  switch (type) {
+    case "add":
+      return "+";
+    case "del":
+      return "\u2212";
+    case "context":
+      return "\xA0";
+    default:
+      return "";
+  }
+}
+function diffLineAccessibleLabel(type) {
+  if (type === "add") return "ai.diffView.addedLine";
+  if (type === "del") return "ai.diffView.removedLine";
+  return void 0;
+}
+
+export {
+  diffLineMarker,
+  diffLineAccessibleLabel
+};
+//# sourceMappingURL=chunk-RB5AWLDJ.js.map

package/dist/chunk-RB5AWLDJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/diff-line.ts"],"sourcesContent":["/**\n * The unified-diff line model behind `DiffView` (`@elabs-ai/components-ai`,\n * #102) and the terminal CLI look-alike family's own diff hunk (issue #117).\n *\n * Promoted here (not duplicated) because `@elabs-ai/components-ai` and\n * `@elabs-ai/components-terminal` are layer-2 DAG SIBLINGS and may not import\n * each other — `ui` is upstream of both\n * (docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4). This\n * module is the shiki-free half: the line shape, the marker glyph and the\n * screen-reader polarity label. Intra-line syntax highlighting (Shiki) and\n * the diff's presentational chrome stay in `@elabs-ai/components-ai`'s\n * `diff-view.tsx` — `ui` does not depend on Shiki and never will for one\n * component (see the decision doc § 3).\n *\n * The `DiffLine` model and the polarity-prefix technique are adapted from\n * `theswerd/brainless` (MIT) — see `ATTRIBUTION.md`.\n */\n\n/** What role a line plays in the diff. */\nexport type DiffLineType = \"add\" | \"del\" | \"context\" | \"hunk\" | \"meta\";\n\n/** One line of a unified diff. Absent gutter numbers are load-bearing (see below). */\nexport interface DiffLine {\n  type: DiffLineType;\n  /** Line number in the original file. Absent on `add` — there is no old line. */\n  oldNumber?: number;\n  /** Line number in the new file. Absent on `del` — there is no new line. */\n  newNumber?: number;\n  /** The line's text, without its leading `+` / `-` / ` ` marker. */\n  text: string;\n}\n\n/**\n * The single-character marker glyph for a real source line (`add`/`del`/\n * `context`). `hunk`/`meta` lines are diff headers, not source, and render\n * through a full-width row instead — this returns `\"\"` for them.\n */\nexport function diffLineMarker(type: DiffLineType): string {\n  switch (type) {\n    case \"add\":\n      return \"+\";\n    case \"del\":\n      return \"−\";\n    case \"context\":\n      return \" \";\n    default:\n      return \"\";\n  }\n}\n\n/**\n * The `ui` locale-message KEY (not the translated text) for the `sr-only`\n * screen-reader polarity word an `add`/`del` row carries ALONGSIDE its marker\n * glyph and its fill tint — colour is never the only channel (WCAG 1.4.1).\n * `undefined` for `context`/`hunk`/`meta`, which carry no polarity.\n */\nexport function diffLineAccessibleLabel(\n  type: DiffLineType,\n): \"ai.diffView.addedLine\" | \"ai.diffView.removedLine\" | undefined {\n  if (type === \"add\") return \"ai.diffView.addedLine\";\n  if (type === \"del\") return \"ai.diffView.removedLine\";\n  return undefined;\n}\n"],"mappings":";;;AAqCO,SAAS,eAAe,MAA4B;AACzD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT;AACE,aAAO;AAAA,EACX;AACF;AAQO,SAAS,wBACd,MACiE;AACjE,MAAI,SAAS,MAAO,QAAO;AAC3B,MAAI,SAAS,MAAO,QAAO;AAC3B,SAAO;AACT;","names":[]}

package/dist/chunk-RF7JSNXJ.js

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

package/dist/chunk-RF7JSNXJ.js.map

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