@elabs-ai/components-ui 4.2.0 → 5.1.0

package/dist/chunk-RFTC5UVB.js

@@ -0,0 +1,126 @@
+"use client";
+import {
+  ToggleGroup,
+  ToggleGroupItem
+} from "./chunk-YFGFNFVW.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-36SY7TID.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/theme-family-switch/theme-family-switch.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_THEME_FAMILY_SWITCH_LABELS = {
+  families: "Theme family",
+  mode: "Colour mode",
+  light: "Light",
+  dark: "Dark"
+};
+var ITEM_SIZE = {
+  sm: "size-7",
+  md: "size-9",
+  lg: "size-11"
+};
+var MODE_SIZE = {
+  sm: "sm",
+  md: "default",
+  lg: "lg"
+};
+var ThemeFamilySwitch = forwardRef(
+  function ThemeFamilySwitch2({
+    families,
+    value,
+    onChange,
+    mode,
+    onModeChange,
+    size = "md",
+    labels: labelsProp,
+    className,
+    ...props
+  }, ref) {
+    const labels = { ...DEFAULT_THEME_FAMILY_SWITCH_LABELS, ...labelsProp };
+    return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 300, children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "theme-family-switch",
+        "data-size": size,
+        className: cn("inline-flex flex-wrap items-center gap-3", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            ToggleGroup,
+            {
+              type: "single",
+              value,
+              onValueChange: (next) => {
+                if (next && next !== value) onChange(next);
+              },
+              "aria-label": labels.families,
+              "data-slot": "theme-family-switch-families",
+              className: "flex-wrap gap-1",
+              children: families.map((family) => /* @__PURE__ */ jsxs(Tooltip, { children: [
+                /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                  ToggleGroupItem,
+                  {
+                    value: family.id,
+                    "aria-label": family.label,
+                    "data-slot": "theme-family-switch-item",
+                    className: cn(
+                      ITEM_SIZE[size],
+                      "min-w-0 rounded-full border-2 border-transparent p-0.5",
+                      "bg-transparent hover:bg-transparent data-[state=on]:bg-transparent aria-checked:bg-transparent",
+                      "data-[state=on]:border-foreground aria-checked:border-foreground"
+                    ),
+                    children: /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        "aria-hidden": "true",
+                        "data-slot": "theme-family-switch-swatch",
+                        className: "size-full rounded-full shadow-hairline",
+                        style: {
+                          background: `linear-gradient(135deg, ${family.swatch.background} 0 50%, ${family.swatch.primary} 50% 100%)`
+                        }
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(TooltipContent, { "data-slot": "theme-family-switch-wordmark", children: family.label })
+              ] }, family.id))
+            }
+          ),
+          mode !== void 0 && onModeChange ? /* @__PURE__ */ jsxs(
+            ToggleGroup,
+            {
+              type: "single",
+              variant: "segmented",
+              size: MODE_SIZE[size],
+              value: mode,
+              onValueChange: (next) => {
+                if (next === "light" || next === "dark") onModeChange(next);
+              },
+              "aria-label": labels.mode,
+              "data-slot": "theme-family-switch-mode",
+              children: [
+                /* @__PURE__ */ jsx(ToggleGroupItem, { value: "light", children: labels.light }),
+                /* @__PURE__ */ jsx(ToggleGroupItem, { value: "dark", children: labels.dark })
+              ]
+            }
+          ) : null
+        ]
+      }
+    ) });
+  }
+);
+
+export {
+  DEFAULT_THEME_FAMILY_SWITCH_LABELS,
+  ThemeFamilySwitch
+};
+//# sourceMappingURL=chunk-RFTC5UVB.js.map

package/dist/chunk-RFTC5UVB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/theme-family-switch/theme-family-switch.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { ToggleGroup, ToggleGroupItem } from \"../toggle-group\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../tooltip\";\n\nexport type ThemeFamilySwitchMode = \"light\" | \"dark\";\nexport type ThemeFamilySwitchSize = \"sm\" | \"md\" | \"lg\";\n\n/** The two colours a family's chip is painted with — any CSS colour, resolved by the host. */\nexport interface ThemeFamilySwatch {\n  /** The family's ground (`--background` in the active mode). */\n  background: string;\n  /** The family's accent (`--primary` in the active mode). */\n  primary: string;\n}\n\nexport interface ThemeFamilySwitchFamily {\n  /** Family id — what `value` holds and `onChange` reports. */\n  id: string;\n  /** Display name: the swatch's accessible name and its tooltip wordmark. */\n  label: string;\n  /** Chip colours. The switch never imports a theme; the host passes these in. */\n  swatch: ThemeFamilySwatch;\n}\n\nexport interface ThemeFamilySwitchLabels {\n  /** Accessible name of the swatch row. */\n  families: string;\n  /** Accessible name of the mode toggle. */\n  mode: string;\n  light: string;\n  dark: string;\n}\n\nexport const DEFAULT_THEME_FAMILY_SWITCH_LABELS: ThemeFamilySwitchLabels = {\n  families: \"Theme family\",\n  mode: \"Colour mode\",\n  light: \"Light\",\n  dark: \"Dark\",\n};\n\nexport interface ThemeFamilySwitchProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onChange\" | \"defaultValue\"\n> {\n  /** Families in display order. */\n  families: readonly ThemeFamilySwitchFamily[];\n  /** Id of the active family. */\n  value: string;\n  /** A family was applied (click, Enter or Space). Arrow keys only move focus. */\n  onChange: (familyId: string) => void;\n  /** Active mode; with `onModeChange`, renders the Light/Dark toggle after the swatches. */\n  mode?: ThemeFamilySwitchMode;\n  onModeChange?: (mode: ThemeFamilySwitchMode) => void;\n  size?: ThemeFamilySwitchSize;\n  /** UI strings, for localisation. */\n  labels?: Partial<ThemeFamilySwitchLabels>;\n}\n\n/** Hit target per size (the chip sits inside it, inset by the selection border). */\nconst ITEM_SIZE: Record<ThemeFamilySwitchSize, string> = {\n  sm: \"size-7\",\n  md: \"size-9\",\n  lg: \"size-11\",\n};\nconst MODE_SIZE: Record<ThemeFamilySwitchSize, \"sm\" | \"default\" | \"lg\"> = {\n  sm: \"sm\",\n  md: \"default\",\n  lg: \"lg\",\n};\n\n/**\n * One control that re-skins a page across theme families (concept §5a): a row of two-tone\n * family chips with roving focus — Tab enters the row, arrow keys move, Enter/Space apply —\n * plus an optional Light/Dark toggle. The selected chip carries a solid ring (a shape cue,\n * not colour alone) and `aria-checked`; each chip is named by its family.\n */\nexport const ThemeFamilySwitch = forwardRef<HTMLDivElement, ThemeFamilySwitchProps>(\n  function ThemeFamilySwitch(\n    {\n      families,\n      value,\n      onChange,\n      mode,\n      onModeChange,\n      size = \"md\",\n      labels: labelsProp,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const labels = { ...DEFAULT_THEME_FAMILY_SWITCH_LABELS, ...labelsProp };\n    return (\n      <TooltipProvider delayDuration={300}>\n        <div\n          ref={ref}\n          data-slot=\"theme-family-switch\"\n          data-size={size}\n          className={cn(\"inline-flex flex-wrap items-center gap-3\", className)}\n          {...props}\n        >\n          <ToggleGroup\n            type=\"single\"\n            value={value}\n            // Radix reports \"\" when the pressed item is pressed again — a family stays applied.\n            onValueChange={(next) => {\n              if (next && next !== value) onChange(next);\n            }}\n            aria-label={labels.families}\n            data-slot=\"theme-family-switch-families\"\n            className=\"flex-wrap gap-1\"\n          >\n            {families.map((family) => (\n              <Tooltip key={family.id}>\n                <TooltipTrigger asChild>\n                  <ToggleGroupItem\n                    value={family.id}\n                    aria-label={family.label}\n                    data-slot=\"theme-family-switch-item\"\n                    className={cn(\n                      ITEM_SIZE[size],\n                      \"min-w-0 rounded-full border-2 border-transparent p-0.5\",\n                      \"bg-transparent hover:bg-transparent data-[state=on]:bg-transparent aria-checked:bg-transparent\",\n                      \"data-[state=on]:border-foreground aria-checked:border-foreground\",\n                    )}\n                  >\n                    <span\n                      aria-hidden=\"true\"\n                      data-slot=\"theme-family-switch-swatch\"\n                      className=\"size-full rounded-full shadow-hairline\"\n                      style={{\n                        background: `linear-gradient(135deg, ${family.swatch.background} 0 50%, ${family.swatch.primary} 50% 100%)`,\n                      }}\n                    />\n                  </ToggleGroupItem>\n                </TooltipTrigger>\n                <TooltipContent data-slot=\"theme-family-switch-wordmark\">\n                  {family.label}\n                </TooltipContent>\n              </Tooltip>\n            ))}\n          </ToggleGroup>\n          {mode !== undefined && onModeChange ? (\n            <ToggleGroup\n              type=\"single\"\n              variant=\"segmented\"\n              size={MODE_SIZE[size]}\n              value={mode}\n              onValueChange={(next) => {\n                if (next === \"light\" || next === \"dark\") onModeChange(next);\n              }}\n              aria-label={labels.mode}\n              data-slot=\"theme-family-switch-mode\"\n            >\n              <ToggleGroupItem value=\"light\">{labels.light}</ToggleGroupItem>\n              <ToggleGroupItem value=\"dark\">{labels.dark}</ToggleGroupItem>\n            </ToggleGroup>\n          ) : null}\n        </div>\n      </TooltipProvider>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;AAEA,SAAS,kBAAuC;AAkHlC,SAaM,KAbN;AAhFP,IAAM,qCAA8D;AAAA,EACzE,UAAU;AAAA,EACV,MAAM;AAAA,EACN,OAAO;AAAA,EACP,MAAM;AACR;AAqBA,IAAM,YAAmD;AAAA,EACvD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AACA,IAAM,YAAoE;AAAA,EACxE,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAQO,IAAM,oBAAoB;AAAA,EAC/B,SAASA,mBACP;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,IACA,GAAG;AAAA,EACL,GACA,KACA;AACA,UAAM,SAAS,EAAE,GAAG,oCAAoC,GAAG,WAAW;AACtE,WACE,oBAAC,mBAAgB,eAAe,KAC9B;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,aAAW;AAAA,QACX,WAAW,GAAG,4CAA4C,SAAS;AAAA,QAClE,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL;AAAA,cAEA,eAAe,CAAC,SAAS;AACvB,oBAAI,QAAQ,SAAS,MAAO,UAAS,IAAI;AAAA,cAC3C;AAAA,cACA,cAAY,OAAO;AAAA,cACnB,aAAU;AAAA,cACV,WAAU;AAAA,cAET,mBAAS,IAAI,CAAC,WACb,qBAAC,WACC;AAAA,oCAAC,kBAAe,SAAO,MACrB;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO,OAAO;AAAA,oBACd,cAAY,OAAO;AAAA,oBACnB,aAAU;AAAA,oBACV,WAAW;AAAA,sBACT,UAAU,IAAI;AAAA,sBACd;AAAA,sBACA;AAAA,sBACA;AAAA,oBACF;AAAA,oBAEA;AAAA,sBAAC;AAAA;AAAA,wBACC,eAAY;AAAA,wBACZ,aAAU;AAAA,wBACV,WAAU;AAAA,wBACV,OAAO;AAAA,0BACL,YAAY,2BAA2B,OAAO,OAAO,UAAU,WAAW,OAAO,OAAO,OAAO;AAAA,wBACjG;AAAA;AAAA,oBACF;AAAA;AAAA,gBACF,GACF;AAAA,gBACA,oBAAC,kBAAe,aAAU,gCACvB,iBAAO,OACV;AAAA,mBAzBY,OAAO,EA0BrB,CACD;AAAA;AAAA,UACH;AAAA,UACC,SAAS,UAAa,eACrB;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAM,UAAU,IAAI;AAAA,cACpB,OAAO;AAAA,cACP,eAAe,CAAC,SAAS;AACvB,oBAAI,SAAS,WAAW,SAAS,OAAQ,cAAa,IAAI;AAAA,cAC5D;AAAA,cACA,cAAY,OAAO;AAAA,cACnB,aAAU;AAAA,cAEV;AAAA,oCAAC,mBAAgB,OAAM,SAAS,iBAAO,OAAM;AAAA,gBAC7C,oBAAC,mBAAgB,OAAM,QAAQ,iBAAO,MAAK;AAAA;AAAA;AAAA,UAC7C,IACE;AAAA;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;","names":["ThemeFamilySwitch"]}

package/dist/chunk-RHVYRQN4.js

@@ -0,0 +1,201 @@
+"use client";
+import {
+  Skeleton
+} from "./chunk-UPGIQXUY.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-36SY7TID.js";
+import {
+  badgeVariants
+} from "./chunk-HNLYRHAU.js";
+import {
+  useLocale
+} from "./chunk-EJQYE4MY.js";
+import {
+  Button
+} from "./chunk-C5QBV5RE.js";
+import {
+  cn
+} from "./chunk-FXWWDMMP.js";
+
+// src/components/view-toolbar/view-toolbar.tsx
+import { forwardRef } from "react";
+import { Info, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var ViewToolbar = forwardRef(function ViewToolbar2({ info, children, actions, className, ...props }, ref) {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-slot": "view-toolbar",
+      className: cn("flex min-h-9 w-full flex-wrap items-center gap-x-3 gap-y-2", className),
+      ...props,
+      children: [
+        info ? /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "icon-sm",
+              "data-slot": "view-toolbar-info",
+              "aria-label": t("ui.viewToolbar.about"),
+              className: "shrink-0 text-muted-foreground hover:text-foreground",
+              children: /* @__PURE__ */ jsx(Info, { "aria-hidden": "true" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TooltipContent, { className: "max-w-xs text-pretty", children: info })
+        ] }) }) : null,
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "view-toolbar-content",
+            className: cn(
+              "flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2",
+              children ? "basis-64" : "basis-0"
+            ),
+            children
+          }
+        ),
+        actions ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "view-toolbar-actions",
+            className: "ms-auto flex min-w-0 flex-wrap items-center justify-end gap-2",
+            children: actions
+          }
+        ) : null
+      ]
+    }
+  );
+});
+var ViewToolbarFilters = forwardRef(
+  function ViewToolbarFilters2({ onClearAll, children, className, ...props }, ref) {
+    const { t } = useLocale();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "view-toolbar-filters",
+        role: "group",
+        "aria-label": t("ui.viewToolbar.activeFilters"),
+        className: cn("flex min-w-0 flex-wrap items-center gap-1.5", className),
+        ...props,
+        children: [
+          children,
+          onClearAll ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              "data-slot": "view-toolbar-clear-all",
+              className: "h-6 px-2",
+              onClick: onClearAll,
+              children: t("ui.viewToolbar.clearAll")
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+var FilterChip = forwardRef(function FilterChip2({ label, trailing, onRemove, className, onClick, ...props }, ref) {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      "data-slot": "view-toolbar-filter-chip",
+      "aria-label": t("ui.viewToolbar.removeFilter", {
+        label: trailing ? `${label} \xB7 ${trailing}` : label
+      }),
+      className: cn(
+        badgeVariants({ variant: "secondary" }),
+        "group min-h-6 max-w-full gap-1 ps-2.5 pe-1.5",
+        "transition-colors duration-fast ease-standard hover:bg-secondary/70",
+        // Badge's own `focus:` ring is dead weight on a <span> but would fire on
+        // every MOUSE click here; neutralise it and keep the focus-visible ring.
+        "focus:ring-0 focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) onRemove();
+      },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { "data-slot": "view-toolbar-filter-chip-label", className: "min-w-0 truncate", children: label }),
+        trailing ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0 text-muted-foreground", children: "\xB7" }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "view-toolbar-filter-chip-trailing",
+              className: "shrink-0 whitespace-nowrap tabular-nums",
+              children: trailing
+            }
+          )
+        ] }) : null,
+        /* @__PURE__ */ jsx(
+          X,
+          {
+            "aria-hidden": "true",
+            className: "size-3 shrink-0 opacity-60 transition-opacity duration-fast ease-standard group-hover:opacity-100"
+          }
+        )
+      ]
+    }
+  );
+});
+var ResultCount = forwardRef(function ResultCount2({ count, total, loading = false, children, className, ...props }, ref) {
+  const { t, formatNumber } = useLocale();
+  if (loading) {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        ref,
+        "data-slot": "view-toolbar-result-count",
+        role: "status",
+        className: cn("inline-flex items-center", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("loading") }),
+          /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" })
+        ]
+      }
+    );
+  }
+  const text = total === void 0 ? formatNumber(count) : t("ui.viewToolbar.countOfTotal", {
+    count: formatNumber(count),
+    total: formatNumber(total)
+  });
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ref,
+      "data-slot": "view-toolbar-result-count",
+      className: cn("text-caption tabular-nums text-muted-foreground", className),
+      ...props,
+      children: [
+        text,
+        children ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          "\xA0",
+          children
+        ] }) : null
+      ]
+    }
+  );
+});
+
+export {
+  ViewToolbar,
+  ViewToolbarFilters,
+  FilterChip,
+  ResultCount
+};
+//# sourceMappingURL=chunk-RHVYRQN4.js.map

package/dist/chunk-RHVYRQN4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/view-toolbar/view-toolbar.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * ViewToolbar — the GRAMMAR for the one row that sits above every list, table\n * or board view (#331).\n *\n * The failure this fixes was ambiguity, not capability: with no named row\n * contract, ~40 routes of one consuming app grew 6 filter-chip idioms, 5\n * result-count renderings and ~11px of control-height scatter in a single filter\n * row. So the deliverable is a small, closed vocabulary — not a configurable\n * widget:\n *\n *   ⓘ info   │  ── left cluster: status · filters · count ──  │   actions\n *\n * - `ViewToolbar` is the row shell (slots only — it renders no view semantics).\n * - `ViewToolbarFilters` is the ONE home for active-filter chips + \"clear all\".\n * - `FilterChip` is the ONE removable chip (label-in-value, whole chip removes).\n * - `ResultCount` is the ONE count (`tabular-nums`, \"N of M\" when filtered).\n *\n * Deliberate non-decisions, so a reader doesn't mistake them for oversights:\n *\n * - **No `cva`.** None of the four parts has a second visual axis today, and the\n *   rules forbid dead variants. A sticky/bounded bar is a caller `className`\n *   recipe (documented in `Layout/ViewToolbar → Contract`), not a variant.\n * - **No `role=\"toolbar\"` on the root.** That role promises roving-tabindex\n *   arrow-key navigation, which this row does not implement; claiming it would\n *   mislead assistive tech. Every control is an ordinary tab stop instead, and\n *   the one region that benefits from a name — the filter set — carries\n *   `role=\"group\"` + an accessible name.\n * - **The row wraps; it never scrolls or clips.** A hard fixed height would put\n *   the action cluster out of reach at narrow widths (AC), so the row keeps a\n *   `min-h-9` floor (== `Button` default height, so single-line rows are\n *   consistent) and wraps beyond it. The action cluster wraps INTERNALLY too —\n *   a `shrink-0` cluster whose buttons cannot wrap simply overflows the row's\n *   box once the row is narrower than the buttons are wide (measured: it\n *   escaped by ~8px at a 320px viewport), which is the very thing the AC\n *   forbids. It stays right-aligned (`justify-end`) on every line.\n *\n * Relationship to neighbours: `PageShell`'s generic `header` slot is where this\n * row goes on a page (#367's toolbar header variant should PLACE a\n * `<ViewToolbar>`, not invent a second row concept). `@elabs-ai/components-data`'s `FilterBar`\n * stays the DataTable-scoped toolbar render-prop row; it could later be\n * recomposed on this shell, but that is a separate change.\n */\nimport { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Info, X } from \"lucide-react\";\nimport { badgeVariants } from \"../badge/badge\";\nimport { Button } from \"../button\";\nimport { Skeleton } from \"../skeleton\";\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../tooltip\";\nimport { useLocale } from \"../locale-provider\";\nimport { cn } from \"../../lib/cn\";\n\n// ---------------------------------------------------------------------------\n// ViewToolbar (the row shell)\n// ---------------------------------------------------------------------------\n\nexport interface ViewToolbarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * What this view is, as a tooltip on an ⓘ trigger at the start of the row —\n   * so a view does not need an in-page `<h1>` + paragraph block just to explain\n   * itself. Omit it when the surrounding page already says what the view is.\n   *\n   * **Pointer/keyboard only.** A Radix tooltip opens on hover and on keyboard\n   * focus but deliberately NOT on tap (and Radix suppresses the focus-open when\n   * focus arrived from a pointer), so on a touch device this text is\n   * unreachable. Treat `info` as progressive enhancement: never put something a\n   * phone user cannot do without in it. See `Layout/ViewToolbar → Contract`.\n   */\n  info?: ReactNode;\n  /** Left cluster — status/context, `ViewToolbarFilters`, `ResultCount`. */\n  children?: ReactNode;\n  /** Right cluster — the view's actions. Stays reachable at every width. */\n  actions?: ReactNode;\n}\n\nexport const ViewToolbar = forwardRef<HTMLDivElement, ViewToolbarProps>(function ViewToolbar(\n  { info, children, actions, className, ...props },\n  ref,\n) {\n  const { t } = useLocale();\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"view-toolbar\"\n      className={cn(\"flex min-h-9 w-full flex-wrap items-center gap-x-3 gap-y-2\", className)}\n      {...props}\n    >\n      {info ? (\n        <TooltipProvider>\n          <Tooltip>\n            <TooltipTrigger asChild>\n              <Button\n                variant=\"ghost\"\n                size=\"icon-sm\"\n                data-slot=\"view-toolbar-info\"\n                aria-label={t(\"ui.viewToolbar.about\")}\n                className=\"shrink-0 text-muted-foreground hover:text-foreground\"\n              >\n                <Info aria-hidden=\"true\" />\n              </Button>\n            </TooltipTrigger>\n            <TooltipContent className=\"max-w-xs text-pretty\">{info}</TooltipContent>\n          </Tooltip>\n        </TooltipProvider>\n      ) : null}\n\n      {/*\n       * Always rendered, even when empty: it owns the free space (`flex-1`), so\n       * the actions cluster stays anchored to the row's end, and it is a stable\n       * `data-slot` seam for consumers/tests.\n       *\n       * `basis-64` when it HAS content is what makes the narrow-width degrade\n       * work: with a 0 basis the left cluster would be squeezed to a few pixels\n       * so the actions could stay on line 1, shredding the chips. With a 16rem\n       * basis the two clusters stack instead. An EMPTY cluster keeps the 0 basis\n       * so it never forces a pointless wrap.\n       */}\n      <div\n        data-slot=\"view-toolbar-content\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-2\",\n          children ? \"basis-64\" : \"basis-0\",\n        )}\n      >\n        {children}\n      </div>\n\n      {actions ? (\n        <div\n          data-slot=\"view-toolbar-actions\"\n          className=\"ms-auto flex min-w-0 flex-wrap items-center justify-end gap-2\"\n        >\n          {actions}\n        </div>\n      ) : null}\n    </div>\n  );\n});\n\n// ---------------------------------------------------------------------------\n// ViewToolbarFilters (the active-filter region)\n// ---------------------------------------------------------------------------\n\nexport interface ViewToolbarFiltersProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Clear every active filter. Supplying it renders the \"clear all\" affordance\n   * at the end of the chip run; omit it when a view has no bulk reset.\n   */\n  onClearAll?: () => void;\n}\n\n/**\n * The chip run. Render it ONLY when at least one filter is active — the\n * \"no filters applied\" state is the region's ABSENCE, not an empty box.\n *\n * Runs at chip height (24px) so the whole group reads as one control rung; the\n * `actions` cluster runs at button height. That split is the fix for the\n * control-height scatter #331 measured.\n */\nexport const ViewToolbarFilters = forwardRef<HTMLDivElement, ViewToolbarFiltersProps>(\n  function ViewToolbarFilters({ onClearAll, children, className, ...props }, ref) {\n    const { t } = useLocale();\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"view-toolbar-filters\"\n        role=\"group\"\n        aria-label={t(\"ui.viewToolbar.activeFilters\")}\n        className={cn(\"flex min-w-0 flex-wrap items-center gap-1.5\", className)}\n        {...props}\n      >\n        {children}\n        {onClearAll ? (\n          <Button\n            variant=\"ghost\"\n            size=\"sm\"\n            data-slot=\"view-toolbar-clear-all\"\n            className=\"h-6 px-2\"\n            onClick={onClearAll}\n          >\n            {t(\"ui.viewToolbar.clearAll\")}\n          </Button>\n        ) : null}\n      </div>\n    );\n  },\n);\n\n// ---------------------------------------------------------------------------\n// FilterChip\n// ---------------------------------------------------------------------------\n\nexport interface FilterChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /**\n   * Label-in-value text — `\"Status: Failed\"`, never `\"Status = failed\"` and\n   * never a bare `\"Failed\"`. The caller composes the string so the chip reads\n   * as a sentence fragment out of context (and in a screen reader).\n   */\n  label: string;\n  /**\n   * Short, non-shrinking secondary text — a count, a unit (`\"excluded 1,204\"`).\n   * A second text slot rather than folding it into `label` (#284): `label` is\n   * the shrinkable, safe-to-truncate part; `trailing` is short and fixed-width\n   * and must never lose characters to the ellipsis. Same shape as\n   * `TurnStatus`'s and `TerminalWorking`'s `trailing` slot — a fixed-width\n   * companion beside a truncating label. Composed into the accessible name\n   * after `label` (`\"Remove filter: <label> · <trailing>\"`), so the byte-\n   * identical name from before this slot existed is unchanged.\n   *\n   * Trade-off: `trailing` is `shrink-0`, so an extremely narrow container now\n   * truncates `label` down to nothing before it touches `trailing`. That is\n   * the right default — the count is short and fixed, the label is the long,\n   * prose-shaped part — but it is a choice, not a free win.\n   */\n  trailing?: string;\n  /** Remove this filter. The WHOLE chip is the remove control — see below. */\n  onRemove: () => void;\n}\n\n/**\n * A removable active-filter chip.\n *\n * The whole chip is a single `<button>` whose action is \"remove\", rather than a\n * span with a nested ✕: one tab stop instead of two, a ≥24px target (WCAG 2.5.8)\n * with no dead zone, and Enter/Space for free from the native element. Its\n * accessible name is \"Remove filter: <label>\", which CONTAINS the visible label\n * (WCAG 2.5.3 Label in Name).\n *\n * A chip that must EDIT a filter rather than remove it is a different control —\n * reach for `FacetFilter` (`@elabs-ai/components-data`), not a variant of this.\n */\nexport const FilterChip = forwardRef<HTMLButtonElement, FilterChipProps>(function FilterChip(\n  { label, trailing, onRemove, className, onClick, ...props },\n  ref,\n) {\n  const { t } = useLocale();\n\n  return (\n    <button\n      ref={ref}\n      type=\"button\"\n      data-slot=\"view-toolbar-filter-chip\"\n      aria-label={t(\"ui.viewToolbar.removeFilter\", {\n        label: trailing ? `${label} · ${trailing}` : label,\n      })}\n      className={cn(\n        badgeVariants({ variant: \"secondary\" }),\n        \"group min-h-6 max-w-full gap-1 ps-2.5 pe-1.5\",\n        \"transition-colors duration-fast ease-standard hover:bg-secondary/70\",\n        // Badge's own `focus:` ring is dead weight on a <span> but would fire on\n        // every MOUSE click here; neutralise it and keep the focus-visible ring.\n        \"focus:ring-0 focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n        \"disabled:pointer-events-none disabled:opacity-50\",\n        className,\n      )}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) onRemove();\n      }}\n      {...props}\n    >\n      <span data-slot=\"view-toolbar-filter-chip-label\" className=\"min-w-0 truncate\">\n        {label}\n      </span>\n      {trailing ? (\n        <>\n          <span aria-hidden=\"true\" className=\"shrink-0 text-muted-foreground\">\n            ·\n          </span>\n          <span\n            data-slot=\"view-toolbar-filter-chip-trailing\"\n            className=\"shrink-0 whitespace-nowrap tabular-nums\"\n          >\n            {trailing}\n          </span>\n        </>\n      ) : null}\n      <X\n        aria-hidden=\"true\"\n        className=\"size-3 shrink-0 opacity-60 transition-opacity duration-fast ease-standard group-hover:opacity-100\"\n      />\n    </button>\n  );\n});\n\n// ---------------------------------------------------------------------------\n// ResultCount\n// ---------------------------------------------------------------------------\n\nexport interface ResultCountProps extends HTMLAttributes<HTMLSpanElement> {\n  /** How many rows/cards the view is showing right now. */\n  count: number;\n  /**\n   * The unfiltered total. Supplying it renders \"N of M\" — the honest reading\n   * when a filter is active. Omit it for an unfiltered view's bare count.\n   */\n  total?: number;\n  /**\n   * No count yet. Renders a layout-shaped placeholder instead of a `0` that\n   * lies while the data is in flight (see `.claude/rules/loading-states.md`).\n   */\n  loading?: boolean;\n  /**\n   * Optional trailing noun (\"results\", \"runs\", \"rows\") joined with a\n   * non-breaking space, so the number is never announced bare.\n   */\n  children?: ReactNode;\n}\n\nexport const ResultCount = forwardRef<HTMLSpanElement, ResultCountProps>(function ResultCount(\n  { count, total, loading = false, children, className, ...props },\n  ref,\n) {\n  const { t, formatNumber } = useLocale();\n\n  if (loading) {\n    return (\n      <span\n        ref={ref}\n        data-slot=\"view-toolbar-result-count\"\n        role=\"status\"\n        className={cn(\"inline-flex items-center\", className)}\n        {...props}\n      >\n        <span className=\"sr-only\">{t(\"loading\")}</span>\n        <Skeleton className=\"h-3 w-16\" />\n      </span>\n    );\n  }\n\n  const text =\n    total === undefined\n      ? formatNumber(count)\n      : t(\"ui.viewToolbar.countOfTotal\", {\n          count: formatNumber(count),\n          total: formatNumber(total),\n        });\n\n  return (\n    <span\n      ref={ref}\n      data-slot=\"view-toolbar-result-count\"\n      className={cn(\"text-caption tabular-nums text-muted-foreground\", className)}\n      {...props}\n    >\n      {text}\n      {children ? <>&nbsp;{children}</> : null}\n    </span>\n  );\n});\n"],"mappings":"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","names":["ViewToolbar","ViewToolbarFilters","FilterChip","ResultCount"]}

package/dist/chunk-RHXVQZOW.js

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

package/dist/chunk-RHXVQZOW.js.map

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

package/dist/chunk-RIYDAMSQ.js

@@ -0,0 +1,25 @@
+"use client";
+import {
+  StatePanel
+} from "./chunk-Y33ZFTMR.js";
+
+// src/components/error-state/error-state.tsx
+import "react";
+import { jsx } from "react/jsx-runtime";
+function ErrorState({ title, description, actions, className }) {
+  return /* @__PURE__ */ jsx(
+    StatePanel,
+    {
+      kind: "error",
+      title,
+      description,
+      actions,
+      className
+    }
+  );
+}
+
+export {
+  ErrorState
+};
+//# sourceMappingURL=chunk-RIYDAMSQ.js.map

package/dist/chunk-RIYDAMSQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/error-state/error-state.tsx"],"sourcesContent":["/**\n * @deprecated Use `StatePanel kind=\"error\"` from `@elabs-ai/components-ui` instead.\n * This wrapper is kept for back-compat and will be removed in a future release.\n */\nimport { type ReactNode } from \"react\";\nimport { StatePanel } from \"../state-panel/state-panel\";\n\nexport interface ErrorStateProps {\n  title?: ReactNode;\n  description?: ReactNode;\n  /** Optional retry / support actions. */\n  actions?: ReactNode;\n  className?: string;\n}\n\n/** @deprecated Use `<StatePanel kind=\"error\" />` instead. */\nexport function ErrorState({ title, description, actions, className }: ErrorStateProps) {\n  return (\n    <StatePanel\n      kind=\"error\"\n      title={title}\n      description={description}\n      actions={actions}\n      className={className}\n    />\n  );\n}\n"],"mappings":";;;;;;AAIA,OAA+B;AAc3B;AAFG,SAAS,WAAW,EAAE,OAAO,aAAa,SAAS,UAAU,GAAoB;AACtF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/chunk-RMSMTLXH.js

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

package/dist/chunk-RMSMTLXH.js.map

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

package/dist/chunk-RRYWMYGI.js

@@ -0,0 +1,14 @@
+"use client";
+
+// src/lib/approval-option.ts
+var APPROVAL_SCOPE_DESCRIPTION_KEYS = {
+  once: "ai.approvalCard.scopeOnceDescription",
+  session: "ai.approvalCard.scopeSessionDescription",
+  always: "ai.approvalCard.scopeAlwaysDescription",
+  deny: "ai.approvalCard.scopeDenyDescription"
+};
+
+export {
+  APPROVAL_SCOPE_DESCRIPTION_KEYS
+};
+//# sourceMappingURL=chunk-RRYWMYGI.js.map

package/dist/chunk-RRYWMYGI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/approval-option.ts"],"sourcesContent":["/**\n * The N-option, scoped-approval model behind `ApprovalCardOptions`\n * (`@elabs-ai/components-ai`'s `confirmation.tsx`, #103) and the terminal CLI\n * look-alike family's own permission row (issue #117) — a real coding-agent\n * permission prompt is rarely a plain yes/no; it asks an N-option question\n * whose options encode SCOPE (\"Yes\", \"Yes, and don't ask again this\n * session\", \"No, and tell the agent what to do instead\").\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). The\n * SYMBOLS have zero SDK coupling; only their previous host module\n * (`confirmation.tsx`) imports `ai`'s `ToolUIPart`, so only the vocabulary —\n * never the component — moves.\n */\n\n/**\n * How far a chosen option's permission reaches. Deliberately a closed,\n * app-agnostic vocabulary (not a free string) so a consumer can derive an\n * accessible fallback description per option (see\n * `APPROVAL_SCOPE_DESCRIPTION_KEYS` below) — the one thing every option of a\n * given scope always means, regardless of the agent-specific label wording.\n */\nexport type ApprovalScope = \"once\" | \"session\" | \"always\" | \"deny\";\n\nexport interface ApprovalOption {\n  id: string;\n  label: string;\n  /**\n   * What choosing this option actually does. Optional: when omitted, the\n   * consumer renders a scope-derived sentence instead, so scope always\n   * reaches assistive tech through real text — never only through colour or\n   * a `data-*` attribute (WCAG 1.4.1).\n   */\n  description?: string;\n  scope: ApprovalScope;\n  /** Optional key hint shown beside the option, e.g. \"1\". */\n  keyHint?: string;\n}\n\n/**\n * The locale-message KEY (not the translated text — `ui`'s locale catalogue,\n * `components/locale-provider/messages.ts`, holds the English fallback and\n * every other locale's translation) for the scope-derived sentence used only\n * when `option.description` is omitted.\n */\nexport const APPROVAL_SCOPE_DESCRIPTION_KEYS: Record<ApprovalScope, string> = {\n  once: \"ai.approvalCard.scopeOnceDescription\",\n  session: \"ai.approvalCard.scopeSessionDescription\",\n  always: \"ai.approvalCard.scopeAlwaysDescription\",\n  deny: \"ai.approvalCard.scopeDenyDescription\",\n};\n"],"mappings":";;;AA+CO,IAAM,kCAAiE;AAAA,EAC5E,MAAM;AAAA,EACN,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,MAAM;AACR;","names":[]}

package/dist/chunk-RTHCX2TG.js

@@ -0,0 +1,59 @@
+"use client";
+import {
+  useScrollProgress
+} from "./chunk-3JAEQNCB.js";
+
+// src/components/parallax-plane/parallax-plane.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var PARALLAX_PLANE_RATES = {
+  ground: 0.15,
+  content: 1,
+  float: 1.2
+};
+var PARALLAX_MAX_TRAVEL = 60;
+function parallaxOffset(scrollY, rate, factor) {
+  const offset = (1 - rate) * factor * scrollY;
+  return Math.max(-PARALLAX_MAX_TRAVEL, Math.min(PARALLAX_MAX_TRAVEL, offset));
+}
+var ParallaxPlane = React.forwardRef(
+  ({ plane = "content", rate, className, style, ...props }, ref) => {
+    const innerRef = React.useRef(null);
+    React.useImperativeHandle(ref, () => innerRef.current, []);
+    const effectiveRate = rate ?? PARALLAX_PLANE_RATES[plane];
+    const { mode, factor } = useScrollProgress(
+      (scrollY) => {
+        const el = innerRef.current;
+        if (el)
+          el.style.transform = `translateY(${parallaxOffset(scrollY, effectiveRate, factor)}px)`;
+      },
+      { enabled: effectiveRate !== 1, target: innerRef }
+    );
+    const perPx = (1 - effectiveRate) * factor;
+    const timelineStyle = mode === "timeline" && perPx !== 0 ? {
+      "--parallax-travel": `${Math.sign(perPx) * PARALLAX_MAX_TRAVEL}px`,
+      "--parallax-range": `${PARALLAX_MAX_TRAVEL / Math.abs(perPx)}px`
+    } : void 0;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: innerRef,
+        "data-slot": "parallax-plane",
+        "data-plane": plane,
+        "data-parallax": mode === "static" ? void 0 : mode,
+        className,
+        style: timelineStyle ? { ...style, ...timelineStyle } : style,
+        ...props
+      }
+    );
+  }
+);
+ParallaxPlane.displayName = "ParallaxPlane";
+
+export {
+  PARALLAX_PLANE_RATES,
+  PARALLAX_MAX_TRAVEL,
+  parallaxOffset,
+  ParallaxPlane
+};
+//# sourceMappingURL=chunk-RTHCX2TG.js.map

package/dist/chunk-RTHCX2TG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/parallax-plane/parallax-plane.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { useScrollProgress } from \"../../lib/use-scroll-progress\";\nimport \"./parallax-plane.css\";\n\n/** The three depth planes of a page: the ground, the content, and floating accents. */\nexport type ParallaxPlaneKind = \"ground\" | \"content\" | \"float\";\n\n/** Default scroll rate per plane, relative to the page (content moves with it at 1×). */\nexport const PARALLAX_PLANE_RATES: Record<ParallaxPlaneKind, number> = {\n  ground: 0.15,\n  content: 1,\n  float: 1.2,\n};\n\n/** The largest offset, in px, any plane may drift from the content plane. */\nexport const PARALLAX_MAX_TRAVEL = 60;\n\nexport interface ParallaxPlaneProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Which depth plane this is; sets `data-plane` and the default `rate`. Default `content`. */\n  plane?: ParallaxPlaneKind;\n  /** Scroll rate relative to the page (1 = moves with the content). Defaults per `plane`. */\n  rate?: number;\n}\n\n/**\n * Offset of a plane from the content plane after `scrollY` px of scroll: `(1 − rate) × factor`\n * per px, clamped to ±{@link PARALLAX_MAX_TRAVEL}. Reduced motion (factor at the floor) gives an\n * effective rate of 1 for every plane — no parallax.\n */\nexport function parallaxOffset(scrollY: number, rate: number, factor: number): number {\n  const offset = (1 - rate) * factor * scrollY;\n  return Math.max(-PARALLAX_MAX_TRAVEL, Math.min(PARALLAX_MAX_TRAVEL, offset));\n}\n\n/**\n * A depth plane that scrolls at its own rate. Uses CSS `animation-timeline: scroll(root)` where\n * the browser has it, else `motion`'s `scroll()` (lazy optional peer) writing `transform`. The\n * server HTML has no transform; motion starts after hydration and only when the gate is open.\n * The plane owns its `transform` — put layout transforms on a child.\n */\nexport const ParallaxPlane = React.forwardRef<HTMLDivElement, ParallaxPlaneProps>(\n  ({ plane = \"content\", rate, className, style, ...props }, ref) => {\n    const innerRef = React.useRef<HTMLDivElement>(null);\n    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement, []);\n\n    const effectiveRate = rate ?? PARALLAX_PLANE_RATES[plane];\n    const { mode, factor } = useScrollProgress(\n      (scrollY) => {\n        const el = innerRef.current;\n        if (el)\n          el.style.transform = `translateY(${parallaxOffset(scrollY, effectiveRate, factor)}px)`;\n      },\n      { enabled: effectiveRate !== 1, target: innerRef },\n    );\n\n    const perPx = (1 - effectiveRate) * factor;\n    const timelineStyle =\n      mode === \"timeline\" && perPx !== 0\n        ? ({\n            \"--parallax-travel\": `${Math.sign(perPx) * PARALLAX_MAX_TRAVEL}px`,\n            \"--parallax-range\": `${PARALLAX_MAX_TRAVEL / Math.abs(perPx)}px`,\n          } as React.CSSProperties)\n        : undefined;\n\n    return (\n      <div\n        ref={innerRef}\n        data-slot=\"parallax-plane\"\n        data-plane={plane}\n        data-parallax={mode === \"static\" ? undefined : mode}\n        className={className}\n        style={timelineStyle ? { ...style, ...timelineStyle } : style}\n        {...props}\n      />\n    );\n  },\n);\nParallaxPlane.displayName = \"ParallaxPlane\";\n"],"mappings":";;;;;;AAEA,YAAY,WAAW;AAiEjB;AAzDC,IAAM,uBAA0D;AAAA,EACrE,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AACT;AAGO,IAAM,sBAAsB;AAc5B,SAAS,eAAe,SAAiB,MAAc,QAAwB;AACpF,QAAM,UAAU,IAAI,QAAQ,SAAS;AACrC,SAAO,KAAK,IAAI,CAAC,qBAAqB,KAAK,IAAI,qBAAqB,MAAM,CAAC;AAC7E;AAQO,IAAM,gBAAsB;AAAA,EACjC,CAAC,EAAE,QAAQ,WAAW,MAAM,WAAW,OAAO,GAAG,MAAM,GAAG,QAAQ;AAChE,UAAM,WAAiB,aAAuB,IAAI;AAClD,IAAM,0BAAoB,KAAK,MAAM,SAAS,SAA2B,CAAC,CAAC;AAE3E,UAAM,gBAAgB,QAAQ,qBAAqB,KAAK;AACxD,UAAM,EAAE,MAAM,OAAO,IAAI;AAAA,MACvB,CAAC,YAAY;AACX,cAAM,KAAK,SAAS;AACpB,YAAI;AACF,aAAG,MAAM,YAAY,cAAc,eAAe,SAAS,eAAe,MAAM,CAAC;AAAA,MACrF;AAAA,MACA,EAAE,SAAS,kBAAkB,GAAG,QAAQ,SAAS;AAAA,IACnD;AAEA,UAAM,SAAS,IAAI,iBAAiB;AACpC,UAAM,gBACJ,SAAS,cAAc,UAAU,IAC5B;AAAA,MACC,qBAAqB,GAAG,KAAK,KAAK,KAAK,IAAI,mBAAmB;AAAA,MAC9D,oBAAoB,GAAG,sBAAsB,KAAK,IAAI,KAAK,CAAC;AAAA,IAC9D,IACA;AAEN,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,aAAU;AAAA,QACV,cAAY;AAAA,QACZ,iBAAe,SAAS,WAAW,SAAY;AAAA,QAC/C;AAAA,QACA,OAAO,gBAAgB,EAAE,GAAG,OAAO,GAAG,cAAc,IAAI;AAAA,QACvD,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,cAAc,cAAc;","names":[]}