@invergent/ui-sdk 2.19.1 → 2.19.3

package/README.md

@@ -48,12 +48,13 @@ the kit carries Work's own components:
 | `sidebar` | `Sidebar`, `SidebarBrand`, `SidebarUserBar`, `SidebarAction`, `useSidebar` | The desktop sidebar: open, or an icon rail that opens on hover, with the pin toggle at its bottom. `ListRow` and `SectionLabel` inside it collapse with the rail; outside it (a phone drawer) the parts draw open. |
 | `list-row` | `ListRow`, `ListGroup` | A list entry (icon, label, description, count, chevron) in three densities; a button, or any link via `asChild`. |
 | `section-label` | `SectionLabel` | A rule and a quiet word starting a group of rows. |
-| `collapsible-header` | `CollapsibleHeader` | A styled `CollapsibleTrigger`: `nav` (a group in a list of rows) or `section` (a disclosure). |
-| `chip` | `Chip`, `TonePill`, `TagPill`, `TONE` | Round chips by tone (`ok`, `warn`, `bad`, `muted`), removable with `onRemove`. |
+| `collapsible-header` | `CollapsibleHeader` | A styled `CollapsibleTrigger`: `nav` (a group in a list of rows) or `section` (a disclosure; `size="sm"` for the compact one). |
+| `chip` | `Chip`, `TonePill`, `TagPill`, `TONE` | Round chips by tone (`ok`, `warn`, `bad`, `info`, `muted`), removable with `onRemove`. |
 | `choice-card` | `ChoiceCard` | A selectable option card (`aria-pressed`), amber when picked. |
 | `text-link` | `TextLink` | Amber or muted text link; `asChild` for router links. |
 | `segmented-control` | `SegmentedControl` | The Work / Dev mode switch, for any two or three peers. |
 | `toggle`, `toggle-group` | `FilterPill`, `ViewSwitch`, `useRememberedView` | A list filter pill; a tab's view switch. |
+| `tab-strip` | `TabStrip`, `TabStripTab` | A compact strip of tabs that close (a browser's open pages). |
 | `pill-tabs` | `PillTabs` | A page's section tabs as a bare strip (`tabs` draws the same over Radix). |
 | `empty-state` | `EmptyState`, `EmptyStateLogo` | The brand badge, a heading, copy and actions for an empty list. |
 | `stat-card` | `StatCard`, `InfoHint`, `ChannelChip` | A stat tile: label, value, hint, detail. |

package/dist/chip.cjs

@@ -9,6 +9,7 @@ var TONE = {
   ok: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
   warn: "bg-amber-500/14 text-amber-700 dark:text-amber-300",
   bad: "bg-red-500/12 text-red-700 dark:text-red-300",
+  info: "bg-sky-500/12 text-sky-700 dark:text-sky-300",
   muted: "bg-foreground/[0.06] text-muted-foreground"
 };
 var chipVariants = classVarianceAuthority.cva(
@@ -60,10 +61,9 @@ function Chip({
 }
 function TonePill({
   tone,
-  className,
-  children
+  ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tone, size: "sm", className, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tone, size: "sm", ...props });
 }
 function TagPill({
   label,

package/dist/chip.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chip.tsx"],"names":["cva","jsxs","cn","jsx","XIcon"],"mappings":";;;;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAeA,0BAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACEC,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,oBAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACCC,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAAA,cAAA,CAACC,iBAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,sCACG,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAK,WACzB,QAAA,EACH,CAAA;AAEJ;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACED,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAWD,oBAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.cjs","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  className,\n  children,\n}: {\n  tone?: Tone\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <Chip tone={tone} size=\"sm\" className={className}>\n      {children}\n    </Chip>\n  )\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}
+{"version":3,"sources":["../src/chip.tsx"],"names":["cva","jsxs","cn","jsx","XIcon"],"mappings":";;;;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,IAAA,EAAM,8CAAA;AAAA,EACN,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAeA,0BAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACEC,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAWC,oBAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACCC,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAAA,cAAA,CAACC,iBAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqE;AACnE,EAAA,sCAAQ,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAM,GAAG,KAAA,EAAO,CAAA;AAChD;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACED,cAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAWD,oBAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.cjs","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"info\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  info: \"bg-sky-500/12 text-sky-700 dark:text-sky-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  ...props\n}: Omit<React.ComponentProps<\"span\">, \"onRemove\"> & { tone?: Tone }) {\n  return <Chip tone={tone} size=\"sm\" {...props} />\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}

package/dist/chip.d.cts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 
-type Tone = "ok" | "warn" | "bad" | "muted";
+type Tone = "ok" | "warn" | "bad" | "info" | "muted";
 declare const TONE: Record<Tone, string>;
 declare const chipVariants: (props?: ({
     tone?: Tone | null | undefined;
@@ -17,10 +17,8 @@ declare function Chip({ tone, size, onRemove, removeLabel, className, children,
     removeLabel?: string;
 }): react_jsx_runtime.JSX.Element;
 /** A status chip ("Active", "Paused") in one of the tones. */
-declare function TonePill({ tone, className, children, }: {
+declare function TonePill({ tone, ...props }: Omit<React.ComponentProps<"span">, "onRemove"> & {
     tone?: Tone;
-    className?: string;
-    children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 /** A tag, removable when `onRemove` is given. */
 declare function TagPill({ label, onRemove, size, className, }: {

package/dist/chip.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
 
-type Tone = "ok" | "warn" | "bad" | "muted";
+type Tone = "ok" | "warn" | "bad" | "info" | "muted";
 declare const TONE: Record<Tone, string>;
 declare const chipVariants: (props?: ({
     tone?: Tone | null | undefined;
@@ -17,10 +17,8 @@ declare function Chip({ tone, size, onRemove, removeLabel, className, children,
     removeLabel?: string;
 }): react_jsx_runtime.JSX.Element;
 /** A status chip ("Active", "Paused") in one of the tones. */
-declare function TonePill({ tone, className, children, }: {
+declare function TonePill({ tone, ...props }: Omit<React.ComponentProps<"span">, "onRemove"> & {
     tone?: Tone;
-    className?: string;
-    children: React.ReactNode;
 }): react_jsx_runtime.JSX.Element;
 /** A tag, removable when `onRemove` is given. */
 declare function TagPill({ label, onRemove, size, className, }: {

package/dist/chip.js

@@ -7,6 +7,7 @@ var TONE = {
   ok: "bg-emerald-500/12 text-emerald-700 dark:text-emerald-300",
   warn: "bg-amber-500/14 text-amber-700 dark:text-amber-300",
   bad: "bg-red-500/12 text-red-700 dark:text-red-300",
+  info: "bg-sky-500/12 text-sky-700 dark:text-sky-300",
   muted: "bg-foreground/[0.06] text-muted-foreground"
 };
 var chipVariants = cva(
@@ -58,10 +59,9 @@ function Chip({
 }
 function TonePill({
   tone,
-  className,
-  children
+  ...props
 }) {
-  return /* @__PURE__ */ jsx(Chip, { tone, size: "sm", className, children });
+  return /* @__PURE__ */ jsx(Chip, { tone, size: "sm", ...props });
 }
 function TagPill({
   label,

package/dist/chip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/chip.tsx"],"names":[],"mappings":";;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAIG;AACD,EAAA,2BACG,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAK,WACzB,QAAA,EACH,CAAA;AAEJ;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.js","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  className,\n  children,\n}: {\n  tone?: Tone\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <Chip tone={tone} size=\"sm\" className={className}>\n      {children}\n    </Chip>\n  )\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}
+{"version":3,"sources":["../src/chip.tsx"],"names":[],"mappings":";;;;;AAUO,IAAM,IAAA,GAA6B;AAAA,EACxC,EAAA,EAAI,0DAAA;AAAA,EACJ,IAAA,EAAM,oDAAA;AAAA,EACN,GAAA,EAAK,8CAAA;AAAA,EACL,IAAA,EAAM,8CAAA;AAAA,EACN,KAAA,EAAO;AACT;AAIA,IAAM,YAAA,GAAe,GAAA;AAAA,EACnB,uIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,IAAA;AAAA,MACN,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,2BAAA;AAAA,QACJ,OAAA,EAAS,qBAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,OAAA,EAAS,MAAM,SAAA;AAAU;AAEtD;AAEA,SAAS,IAAA,CAAK;AAAA,EACZ,IAAA,GAAO,OAAA;AAAA,EACP,IAAA,GAAO,SAAA;AAAA,EACP,QAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAOG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA,CAAG,YAAA,CAAa,EAAE,IAAA,EAAM,MAAM,CAAA,EAAG,QAAA,IAAY,MAAA,EAAQ,SAAS,CAAA;AAAA,MACxE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,QACA,QAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YAGL,WAAA,EAAa,CAAC,CAAA,KAAM,CAAA,CAAE,cAAA,EAAe;AAAA,YACrC,OAAA,EAAS,QAAA;AAAA,YACT,YAAA,EAAY,WAAA;AAAA,YAEZ,SAAA,EAAU,mSAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW;AAAA;AAAA;AAC9B;AAAA;AAAA,GAEJ;AAEJ;AAGA,SAAS,QAAA,CAAS;AAAA,EAChB,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAqE;AACnE,EAAA,2BAAQ,IAAA,EAAA,EAAK,IAAA,EAAY,IAAA,EAAK,IAAA,EAAM,GAAG,KAAA,EAAO,CAAA;AAChD;AAGA,SAAS,OAAA,CAAQ;AAAA,EACf,KAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAKG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA;AAAA,MAClC,QAAA;AAAA,MACA,WAAA,EAAa,cAAc,KAAK,CAAA,CAAA;AAAA,MAChC,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,SAAS,CAAA;AAAA,MAErC,QAAA,EAAA;AAAA;AAAA,GACH;AAEJ","file":"chip.js","sourcesContent":["import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type Tone = \"ok\" | \"warn\" | \"bad\" | \"info\" | \"muted\"\n\n// The Work console's status tones: a faint wash of the colour with text a\n// step darker in light mode and a step lighter in dark.\nexport const TONE: Record<Tone, string> = {\n  ok: \"bg-emerald-500/12 text-emerald-700 dark:text-emerald-300\",\n  warn: \"bg-amber-500/14 text-amber-700 dark:text-amber-300\",\n  bad: \"bg-red-500/12 text-red-700 dark:text-red-300\",\n  info: \"bg-sky-500/12 text-sky-700 dark:text-sky-300\",\n  muted: \"bg-foreground/[0.06] text-muted-foreground\",\n}\n\n// One chip for statuses (TonePill), tags and removable values (TagPill):\n// round, medium weight, tinted by tone.\nconst chipVariants = cva(\n  \"inline-flex w-fit shrink-0 items-center gap-1 rounded-full font-medium whitespace-nowrap [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      tone: TONE,\n      size: {\n        sm: \"px-2 py-0.5 text-[11.5px]\",\n        default: \"px-2 py-0.5 text-xs\",\n        lg: \"px-2.5 py-0.5 text-sm\",\n      },\n    },\n    defaultVariants: { tone: \"muted\", size: \"default\" },\n  }\n)\n\nfunction Chip({\n  tone = \"muted\",\n  size = \"default\",\n  onRemove,\n  removeLabel = \"Remove\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  tone?: Tone\n  size?: \"sm\" | \"default\" | \"lg\"\n  /** Shows an × that calls this. */\n  onRemove?: () => void\n  /** The ×'s accessible name. */\n  removeLabel?: string\n}) {\n  return (\n    <span\n      data-slot=\"chip\"\n      data-tone={tone}\n      className={cn(chipVariants({ tone, size }), onRemove && \"pr-1\", className)}\n      {...props}\n    >\n      {children}\n      {onRemove && (\n        <button\n          type=\"button\"\n          // preventDefault on mousedown keeps the adjacent input focused so\n          // removing a chip doesn't trigger its blur-to-commit handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={onRemove}\n          aria-label={removeLabel}\n          // The × is 10px; the overlay gives it a usable hit area.\n          className=\"relative inline-flex cursor-pointer items-center justify-center rounded-full border-none bg-transparent p-0.5 text-current opacity-60 transition-opacity outline-none after:absolute after:-inset-1.5 hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-2.5\" />\n        </button>\n      )}\n    </span>\n  )\n}\n\n/** A status chip (\"Active\", \"Paused\") in one of the tones. */\nfunction TonePill({\n  tone,\n  ...props\n}: Omit<React.ComponentProps<\"span\">, \"onRemove\"> & { tone?: Tone }) {\n  return <Chip tone={tone} size=\"sm\" {...props} />\n}\n\n/** A tag, removable when `onRemove` is given. */\nfunction TagPill({\n  label,\n  onRemove,\n  size = \"xs\",\n  className,\n}: {\n  label: string\n  onRemove?: () => void\n  size?: \"xs\" | \"sm\"\n  className?: string\n}) {\n  return (\n    <Chip\n      size={size === \"xs\" ? \"default\" : \"lg\"}\n      onRemove={onRemove}\n      removeLabel={`Remove tag ${label}`}\n      className={cn(\"font-normal\", className)}\n    >\n      {label}\n    </Chip>\n  )\n}\n\nexport { Chip, TonePill, TagPill, chipVariants }\n"]}

package/dist/{chunk-IVMZANP7.cjs → chunk-ILCP5QXL.cjs}

@@ -16,7 +16,10 @@ var toggleVariants = classVarianceAuthority.cva(
       size: {
         default: "min-h-10 px-3 text-[13px] pointer-fine:min-h-8",
         sm: "min-h-9 px-3 text-[12px] pointer-fine:min-h-7",
-        lg: "min-h-11 px-4 text-sm pointer-fine:min-h-9"
+        lg: "min-h-11 px-4 text-sm pointer-fine:min-h-9",
+        // Square, as the Button's icon sizes: 44px on touch.
+        icon: "size-9 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0",
+        "icon-xs": "size-7 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0"
       }
     },
     defaultVariants: {
@@ -63,5 +66,5 @@ function FilterPill({
 exports.FilterPill = FilterPill;
 exports.Toggle = Toggle;
 exports.toggleVariants = toggleVariants;
-//# sourceMappingURL=chunk-IVMZANP7.cjs.map
-//# sourceMappingURL=chunk-IVMZANP7.cjs.map
+//# sourceMappingURL=chunk-ILCP5QXL.cjs.map
+//# sourceMappingURL=chunk-ILCP5QXL.cjs.map

package/dist/chunk-ILCP5QXL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toggle.tsx"],"names":["cva","jsx","TogglePrimitive","cn"],"mappings":";;;;;;;AAWA,IAAM,cAAA,GAAiBA,0BAAA;AAAA,EACrB,oVAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,6NAAA;AAAA,QACF,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,gDAAA;AAAA,QACT,EAAA,EAAI,+CAAA;AAAA,QACJ,EAAA,EAAI,4CAAA;AAAA;AAAA,QAEJ,IAAA,EAAM,yEAAA;AAAA,QACN,SAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACuC;AACrC,EAAA,uBACEC,cAAA;AAAA,IAACC,cAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAWC,qBAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ;AAMA,SAAS,UAAA,CAAW;AAAA,EAClB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAQG;AACD,EAAA,uBACEF,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAS,EAAA;AAAA,MACT,eAAA,EAAiB,MAAM,OAAA,EAAQ;AAAA,MAC/B,WAAWE,oBAAA,CAAG,GAAA,IAAO,CAAC,EAAA,IAAM,cAAc,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-ILCP5QXL.cjs","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's pressed-state toggles. `default` is the 9px chip its\n// forms use for a choice that is on or off (Once / Repeating, the days of the\n// week): a faint box, amber-tinted once pressed. `outline` is its filter\n// pill: round, bordered, a neutral fill once on. Muted text brightens on\n// hover. Touch keeps 40px or more, a mouse the compact height.\nconst toggleVariants = cva(\n  \"group/toggle inline-flex shrink-0 items-center justify-center gap-1.5 border whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"rounded-[9px] border-foreground/[0.08] bg-foreground/[0.04] font-medium text-muted-foreground hover:text-foreground data-[state=on]:border-amber-500/40 data-[state=on]:bg-amber-500/[0.12] data-[state=on]:text-foreground\",\n        outline:\n          \"rounded-full border-foreground/10 text-muted-foreground hover:text-foreground data-[state=on]:border-foreground/30 data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n      },\n      size: {\n        default: \"min-h-10 px-3 text-[13px] pointer-fine:min-h-8\",\n        sm: \"min-h-9 px-3 text-[12px] pointer-fine:min-h-7\",\n        lg: \"min-h-11 px-4 text-sm pointer-fine:min-h-9\",\n        // Square, as the Button's icon sizes: 44px on touch.\n        icon: \"size-9 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0\",\n        \"icon-xs\":\n          \"size-7 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\n/**\n * The Work filter pill (a row of them filters a list: \"All channels\",\n * \"Slack 3\"…). An empty filter stays clickable, just quieter.\n */\nfunction FilterPill({\n  on,\n  onClick,\n  dim,\n  className,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof TogglePrimitive.Root>,\n  \"pressed\" | \"onPressedChange\" | \"onClick\"\n> & {\n  on: boolean\n  onClick: () => void\n  /** Nothing behind it yet: still clickable, just quieter. */\n  dim?: boolean\n}) {\n  return (\n    <Toggle\n      variant=\"outline\"\n      size=\"sm\"\n      pressed={on}\n      onPressedChange={() => onClick()}\n      className={cn(dim && !on && \"opacity-55\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, FilterPill, toggleVariants }\n"]}

package/dist/{chunk-CPAFEXKR.js → chunk-WO2SXSNH.js}

@@ -14,7 +14,10 @@ var toggleVariants = cva(
       size: {
         default: "min-h-10 px-3 text-[13px] pointer-fine:min-h-8",
         sm: "min-h-9 px-3 text-[12px] pointer-fine:min-h-7",
-        lg: "min-h-11 px-4 text-sm pointer-fine:min-h-9"
+        lg: "min-h-11 px-4 text-sm pointer-fine:min-h-9",
+        // Square, as the Button's icon sizes: 44px on touch.
+        icon: "size-9 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0",
+        "icon-xs": "size-7 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0"
       }
     },
     defaultVariants: {
@@ -59,5 +62,5 @@ function FilterPill({
 }
 
 export { FilterPill, Toggle, toggleVariants };
-//# sourceMappingURL=chunk-CPAFEXKR.js.map
-//# sourceMappingURL=chunk-CPAFEXKR.js.map
+//# sourceMappingURL=chunk-WO2SXSNH.js.map
+//# sourceMappingURL=chunk-WO2SXSNH.js.map

package/dist/chunk-WO2SXSNH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toggle.tsx"],"names":["TogglePrimitive"],"mappings":";;;;;AAWA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,oVAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,6NAAA;AAAA,QACF,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,gDAAA;AAAA,QACT,EAAA,EAAI,+CAAA;AAAA,QACJ,EAAA,EAAI,4CAAA;AAAA;AAAA,QAEJ,IAAA,EAAM,yEAAA;AAAA,QACN,SAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACuC;AACrC,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ;AAMA,SAAS,UAAA,CAAW;AAAA,EAClB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAQG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAS,EAAA;AAAA,MACT,eAAA,EAAiB,MAAM,OAAA,EAAQ;AAAA,MAC/B,WAAW,EAAA,CAAG,GAAA,IAAO,CAAC,EAAA,IAAM,cAAc,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-WO2SXSNH.js","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's pressed-state toggles. `default` is the 9px chip its\n// forms use for a choice that is on or off (Once / Repeating, the days of the\n// week): a faint box, amber-tinted once pressed. `outline` is its filter\n// pill: round, bordered, a neutral fill once on. Muted text brightens on\n// hover. Touch keeps 40px or more, a mouse the compact height.\nconst toggleVariants = cva(\n  \"group/toggle inline-flex shrink-0 items-center justify-center gap-1.5 border whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"rounded-[9px] border-foreground/[0.08] bg-foreground/[0.04] font-medium text-muted-foreground hover:text-foreground data-[state=on]:border-amber-500/40 data-[state=on]:bg-amber-500/[0.12] data-[state=on]:text-foreground\",\n        outline:\n          \"rounded-full border-foreground/10 text-muted-foreground hover:text-foreground data-[state=on]:border-foreground/30 data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n      },\n      size: {\n        default: \"min-h-10 px-3 text-[13px] pointer-fine:min-h-8\",\n        sm: \"min-h-9 px-3 text-[12px] pointer-fine:min-h-7\",\n        lg: \"min-h-11 px-4 text-sm pointer-fine:min-h-9\",\n        // Square, as the Button's icon sizes: 44px on touch.\n        icon: \"size-9 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0\",\n        \"icon-xs\":\n          \"size-7 min-h-11 min-w-11 px-0 pointer-fine:min-h-0 pointer-fine:min-w-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\n/**\n * The Work filter pill (a row of them filters a list: \"All channels\",\n * \"Slack 3\"…). An empty filter stays clickable, just quieter.\n */\nfunction FilterPill({\n  on,\n  onClick,\n  dim,\n  className,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof TogglePrimitive.Root>,\n  \"pressed\" | \"onPressedChange\" | \"onClick\"\n> & {\n  on: boolean\n  onClick: () => void\n  /** Nothing behind it yet: still clickable, just quieter. */\n  dim?: boolean\n}) {\n  return (\n    <Toggle\n      variant=\"outline\"\n      size=\"sm\"\n      pressed={on}\n      onPressedChange={() => onClick()}\n      className={cn(dim && !on && \"opacity-55\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, FilterPill, toggleVariants }\n"]}

package/dist/collapsible-header.cjs

@@ -13,14 +13,22 @@ var collapsibleHeaderVariants = classVarianceAuthority.cva(
       variant: {
         nav: "gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]",
         section: "min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground"
+      },
+      size: {
+        default: "",
+        sm: ""
       }
     },
-    defaultVariants: { variant: "nav" }
+    compoundVariants: [
+      { variant: "section", size: "sm", className: "gap-1.5 px-2.5 pointer-fine:min-h-8" }
+    ],
+    defaultVariants: { variant: "nav", size: "default" }
   }
 );
 function CollapsibleHeader({
   icon: Icon,
   variant = "nav",
+  size = "default",
   className,
   children,
   ...props
@@ -30,7 +38,7 @@ function CollapsibleHeader({
     {
       "data-slot": "collapsible-header",
       "data-variant": variant,
-      className: chunk6YHDDRIM_cjs.cn(collapsibleHeaderVariants({ variant }), className),
+      className: chunk6YHDDRIM_cjs.cn(collapsibleHeaderVariants({ variant, size }), className),
       ...props,
       children: [
         Icon && /* @__PURE__ */ jsxRuntime.jsx(
@@ -52,7 +60,10 @@ function CollapsibleHeader({
           lucideReact.ChevronDown,
           {
             "aria-hidden": true,
-            className: "size-4 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180"
+            className: chunk6YHDDRIM_cjs.cn(
+              "shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180",
+              size === "sm" ? "size-3.5" : "size-4"
+            )
           }
         )
       ]

package/dist/collapsible-header.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/collapsible-header.tsx"],"names":["cva","jsxs","CollapsiblePrimitive","cn","jsx","ChevronRight","ChevronDown"],"mappings":";;;;;;;;AAiBA,IAAM,yBAAA,GAA4BA,0BAAA;AAAA,EAChC,6LAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,sPAAA;AAAA,QACL,OAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,KAAA;AAAM;AAEtC;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,IAAA,EAAM,IAAA;AAAA,EACN,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAGG;AACD,EAAA,uBACEC,eAAA;AAAA,IAACC,mBAAA,CAAqB,kBAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAWC,oBAAA,CAAG,yBAAA,CAA0B,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAC9D,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBACCC,cAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,+DAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBAEFA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAS,CAAA;AAAA,QACpD,YAAY,KAAA,mBACXA,cAAA;AAAA,UAACC,wBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU,qIAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf,mBAEAD,cAAA;AAAA,UAACE,uBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,GAEJ;AAEJ","file":"collapsible-header.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\nimport { ChevronDown, ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's two collapsible headers, as a styled CollapsibleTrigger\n// (put it inside a `Collapsible`, above its `CollapsibleContent`):\n//   nav     — a group in a list of rows (\"Sessions\" under an expanded agent):\n//             the row's own shape, a right chevron that turns down when open.\n//   section — a disclosure on a settings page (\"What the agent knows about\n//             them\"): a 44px 13px header with a down chevron that flips.\n//             Sits in a bordered box (`rounded-[10px] border\n//             border-foreground/[0.08]`) whose content has a top rule.\nconst collapsibleHeaderVariants = cva(\n  \"group/collapsible-header flex w-full items-center text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        nav: \"gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]\",\n        section:\n          \"min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground\",\n      },\n    },\n    defaultVariants: { variant: \"nav\" },\n  }\n)\n\nfunction CollapsibleHeader({\n  icon: Icon,\n  variant = \"nav\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & {\n  icon?: LucideIcon\n  variant?: \"nav\" | \"section\"\n}) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-header\"\n      data-variant={variant}\n      className={cn(collapsibleHeaderVariants({ variant }), className)}\n      {...props}\n    >\n      {Icon && (\n        <Icon\n          className=\"size-4 shrink-0 text-muted-foreground pointer-coarse:size-4.5\"\n          strokeWidth={1.75}\n        />\n      )}\n      <span className=\"min-w-0 flex-1 text-left\">{children}</span>\n      {variant === \"nav\" ? (\n        <ChevronRight\n          aria-hidden={true}\n          className=\"size-3.5 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-90 pointer-coarse:size-4\"\n          strokeWidth={1.75}\n        />\n      ) : (\n        <ChevronDown\n          aria-hidden={true}\n          className=\"size-4 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180\"\n        />\n      )}\n    </CollapsiblePrimitive.CollapsibleTrigger>\n  )\n}\n\nexport { CollapsibleHeader, collapsibleHeaderVariants }\n"]}
+{"version":3,"sources":["../src/collapsible-header.tsx"],"names":["cva","jsxs","CollapsiblePrimitive","cn","jsx","ChevronRight","ChevronDown"],"mappings":";;;;;;;;AAmBA,IAAM,yBAAA,GAA4BA,0BAAA;AAAA,EAChC,6LAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,sPAAA;AAAA,QACL,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,EAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,EAAE,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,IAAA,EAAM,WAAW,qCAAA;AAAsC,KACrF;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,KAAA,EAAO,MAAM,SAAA;AAAU;AAEvD;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,IAAA,EAAM,IAAA;AAAA,EACN,OAAA,GAAU,KAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAKG;AACD,EAAA,uBACEC,eAAA;AAAA,IAACC,mBAAA,CAAqB,kBAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAWC,qBAAG,yBAAA,CAA0B,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACpE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBACCC,cAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,+DAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBAEFA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAS,CAAA;AAAA,QACpD,YAAY,KAAA,mBACXA,cAAA;AAAA,UAACC,wBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU,qIAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf,mBAEAD,cAAA;AAAA,UAACE,uBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAWH,oBAAA;AAAA,cACT,uGAAA;AAAA,cACA,IAAA,KAAS,OAAO,UAAA,GAAa;AAAA;AAC/B;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ","file":"collapsible-header.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\nimport { ChevronDown, ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's two collapsible headers, as a styled CollapsibleTrigger\n// (put it inside a `Collapsible`, above its `CollapsibleContent`):\n//   nav     — a group in a list of rows (\"Sessions\" under an expanded agent):\n//             the row's own shape, a right chevron that turns down when open.\n//   section — a disclosure on a settings page (\"What the agent knows about\n//             them\"): a 44px 13px header with a down chevron that flips.\n//             Sits in a bordered box (`rounded-[10px] border\n//             border-foreground/[0.08]`) whose content has a top rule. `sm`\n//             is the compact one a card in a thread or a strip above the\n//             composer takes: 32px with a mouse, still 44px on touch.\nconst collapsibleHeaderVariants = cva(\n  \"group/collapsible-header flex w-full items-center text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        nav: \"gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]\",\n        section:\n          \"min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground\",\n      },\n      size: {\n        default: \"\",\n        sm: \"\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"section\", size: \"sm\", className: \"gap-1.5 px-2.5 pointer-fine:min-h-8\" },\n    ],\n    defaultVariants: { variant: \"nav\", size: \"default\" },\n  }\n)\n\nfunction CollapsibleHeader({\n  icon: Icon,\n  variant = \"nav\",\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & {\n  icon?: LucideIcon\n  variant?: \"nav\" | \"section\"\n  /** `section` only: the compact header. */\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-header\"\n      data-variant={variant}\n      className={cn(collapsibleHeaderVariants({ variant, size }), className)}\n      {...props}\n    >\n      {Icon && (\n        <Icon\n          className=\"size-4 shrink-0 text-muted-foreground pointer-coarse:size-4.5\"\n          strokeWidth={1.75}\n        />\n      )}\n      <span className=\"min-w-0 flex-1 text-left\">{children}</span>\n      {variant === \"nav\" ? (\n        <ChevronRight\n          aria-hidden={true}\n          className=\"size-3.5 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-90 pointer-coarse:size-4\"\n          strokeWidth={1.75}\n        />\n      ) : (\n        <ChevronDown\n          aria-hidden={true}\n          className={cn(\n            \"shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180\",\n            size === \"sm\" ? \"size-3.5\" : \"size-4\"\n          )}\n        />\n      )}\n    </CollapsiblePrimitive.CollapsibleTrigger>\n  )\n}\n\nexport { CollapsibleHeader, collapsibleHeaderVariants }\n"]}

package/dist/collapsible-header.d.cts

@@ -6,10 +6,13 @@ import { LucideIcon } from 'lucide-react';
 
 declare const collapsibleHeaderVariants: (props?: ({
     variant?: "nav" | "section" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function CollapsibleHeader({ icon: Icon, variant, className, children, ...props }: React.ComponentProps<typeof Collapsible.CollapsibleTrigger> & {
+declare function CollapsibleHeader({ icon: Icon, variant, size, className, children, ...props }: React.ComponentProps<typeof Collapsible.CollapsibleTrigger> & {
     icon?: LucideIcon;
     variant?: "nav" | "section";
+    /** `section` only: the compact header. */
+    size?: "default" | "sm";
 }): react_jsx_runtime.JSX.Element;
 
 export { CollapsibleHeader, collapsibleHeaderVariants };

package/dist/collapsible-header.d.ts

@@ -6,10 +6,13 @@ import { LucideIcon } from 'lucide-react';
 
 declare const collapsibleHeaderVariants: (props?: ({
     variant?: "nav" | "section" | null | undefined;
+    size?: "default" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
-declare function CollapsibleHeader({ icon: Icon, variant, className, children, ...props }: React.ComponentProps<typeof Collapsible.CollapsibleTrigger> & {
+declare function CollapsibleHeader({ icon: Icon, variant, size, className, children, ...props }: React.ComponentProps<typeof Collapsible.CollapsibleTrigger> & {
     icon?: LucideIcon;
     variant?: "nav" | "section";
+    /** `section` only: the compact header. */
+    size?: "default" | "sm";
 }): react_jsx_runtime.JSX.Element;
 
 export { CollapsibleHeader, collapsibleHeaderVariants };

package/dist/collapsible-header.js

@@ -11,14 +11,22 @@ var collapsibleHeaderVariants = cva(
       variant: {
         nav: "gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]",
         section: "min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground"
+      },
+      size: {
+        default: "",
+        sm: ""
       }
     },
-    defaultVariants: { variant: "nav" }
+    compoundVariants: [
+      { variant: "section", size: "sm", className: "gap-1.5 px-2.5 pointer-fine:min-h-8" }
+    ],
+    defaultVariants: { variant: "nav", size: "default" }
   }
 );
 function CollapsibleHeader({
   icon: Icon,
   variant = "nav",
+  size = "default",
   className,
   children,
   ...props
@@ -28,7 +36,7 @@ function CollapsibleHeader({
     {
       "data-slot": "collapsible-header",
       "data-variant": variant,
-      className: cn(collapsibleHeaderVariants({ variant }), className),
+      className: cn(collapsibleHeaderVariants({ variant, size }), className),
       ...props,
       children: [
         Icon && /* @__PURE__ */ jsx(
@@ -50,7 +58,10 @@ function CollapsibleHeader({
           ChevronDown,
           {
             "aria-hidden": true,
-            className: "size-4 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180"
+            className: cn(
+              "shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180",
+              size === "sm" ? "size-3.5" : "size-4"
+            )
           }
         )
       ]

package/dist/collapsible-header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/collapsible-header.tsx"],"names":["CollapsiblePrimitive"],"mappings":";;;;;;AAiBA,IAAM,yBAAA,GAA4B,GAAA;AAAA,EAChC,6LAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,sPAAA;AAAA,QACL,OAAA,EACE;AAAA;AACJ,KACF;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,KAAA;AAAM;AAEtC;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,IAAA,EAAM,IAAA;AAAA,EACN,OAAA,GAAU,KAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAGG;AACD,EAAA,uBACE,IAAA;AAAA,IAACA,WAAA,CAAqB,kBAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAW,EAAA,CAAG,yBAAA,CAA0B,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAC9D,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,+DAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBAEF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAS,CAAA;AAAA,QACpD,YAAY,KAAA,mBACX,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU,qIAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf,mBAEA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,GAEJ;AAEJ","file":"collapsible-header.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\nimport { ChevronDown, ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's two collapsible headers, as a styled CollapsibleTrigger\n// (put it inside a `Collapsible`, above its `CollapsibleContent`):\n//   nav     — a group in a list of rows (\"Sessions\" under an expanded agent):\n//             the row's own shape, a right chevron that turns down when open.\n//   section — a disclosure on a settings page (\"What the agent knows about\n//             them\"): a 44px 13px header with a down chevron that flips.\n//             Sits in a bordered box (`rounded-[10px] border\n//             border-foreground/[0.08]`) whose content has a top rule.\nconst collapsibleHeaderVariants = cva(\n  \"group/collapsible-header flex w-full items-center text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        nav: \"gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]\",\n        section:\n          \"min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground\",\n      },\n    },\n    defaultVariants: { variant: \"nav\" },\n  }\n)\n\nfunction CollapsibleHeader({\n  icon: Icon,\n  variant = \"nav\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & {\n  icon?: LucideIcon\n  variant?: \"nav\" | \"section\"\n}) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-header\"\n      data-variant={variant}\n      className={cn(collapsibleHeaderVariants({ variant }), className)}\n      {...props}\n    >\n      {Icon && (\n        <Icon\n          className=\"size-4 shrink-0 text-muted-foreground pointer-coarse:size-4.5\"\n          strokeWidth={1.75}\n        />\n      )}\n      <span className=\"min-w-0 flex-1 text-left\">{children}</span>\n      {variant === \"nav\" ? (\n        <ChevronRight\n          aria-hidden={true}\n          className=\"size-3.5 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-90 pointer-coarse:size-4\"\n          strokeWidth={1.75}\n        />\n      ) : (\n        <ChevronDown\n          aria-hidden={true}\n          className=\"size-4 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180\"\n        />\n      )}\n    </CollapsiblePrimitive.CollapsibleTrigger>\n  )\n}\n\nexport { CollapsibleHeader, collapsibleHeaderVariants }\n"]}
+{"version":3,"sources":["../src/collapsible-header.tsx"],"names":["CollapsiblePrimitive"],"mappings":";;;;;;AAmBA,IAAM,yBAAA,GAA4B,GAAA;AAAA,EAChC,6LAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,GAAA,EAAK,sPAAA;AAAA,QACL,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,EAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,EAAE,OAAA,EAAS,SAAA,EAAW,IAAA,EAAM,IAAA,EAAM,WAAW,qCAAA;AAAsC,KACrF;AAAA,IACA,eAAA,EAAiB,EAAE,OAAA,EAAS,KAAA,EAAO,MAAM,SAAA;AAAU;AAEvD;AAEA,SAAS,iBAAA,CAAkB;AAAA,EACzB,IAAA,EAAM,IAAA;AAAA,EACN,OAAA,GAAU,KAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAKG;AACD,EAAA,uBACE,IAAA;AAAA,IAACA,WAAA,CAAqB,kBAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,oBAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAW,GAAG,yBAAA,CAA0B,EAAE,SAAS,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MACpE,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,IAAA,oBACC,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,+DAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf;AAAA,wBAEF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,0BAAA,EAA4B,QAAA,EAAS,CAAA;AAAA,QACpD,YAAY,KAAA,mBACX,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU,qIAAA;AAAA,YACV,WAAA,EAAa;AAAA;AAAA,SACf,mBAEA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAW,EAAA;AAAA,cACT,uGAAA;AAAA,cACA,IAAA,KAAS,OAAO,UAAA,GAAa;AAAA;AAC/B;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ","file":"collapsible-header.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\"\nimport { ChevronDown, ChevronRight, type LucideIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's two collapsible headers, as a styled CollapsibleTrigger\n// (put it inside a `Collapsible`, above its `CollapsibleContent`):\n//   nav     — a group in a list of rows (\"Sessions\" under an expanded agent):\n//             the row's own shape, a right chevron that turns down when open.\n//   section — a disclosure on a settings page (\"What the agent knows about\n//             them\"): a 44px 13px header with a down chevron that flips.\n//             Sits in a bordered box (`rounded-[10px] border\n//             border-foreground/[0.08]`) whose content has a top rule. `sm`\n//             is the compact one a card in a thread or a strip above the\n//             composer takes: 32px with a mouse, still 44px on touch.\nconst collapsibleHeaderVariants = cva(\n  \"group/collapsible-header flex w-full items-center text-left transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        nav: \"gap-2.25 rounded-[7px] px-2 py-1.75 text-[13px] font-normal text-foreground/80 hover:bg-foreground/6 hover:text-foreground pointer-coarse:min-h-11 pointer-coarse:gap-2.5 pointer-coarse:rounded-lg pointer-coarse:px-2.5 pointer-coarse:text-[14px]\",\n        section:\n          \"min-h-11 gap-2 rounded-[10px] px-3 text-[13px] font-medium text-foreground\",\n      },\n      size: {\n        default: \"\",\n        sm: \"\",\n      },\n    },\n    compoundVariants: [\n      { variant: \"section\", size: \"sm\", className: \"gap-1.5 px-2.5 pointer-fine:min-h-8\" },\n    ],\n    defaultVariants: { variant: \"nav\", size: \"default\" },\n  }\n)\n\nfunction CollapsibleHeader({\n  icon: Icon,\n  variant = \"nav\",\n  size = \"default\",\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger> & {\n  icon?: LucideIcon\n  variant?: \"nav\" | \"section\"\n  /** `section` only: the compact header. */\n  size?: \"default\" | \"sm\"\n}) {\n  return (\n    <CollapsiblePrimitive.CollapsibleTrigger\n      data-slot=\"collapsible-header\"\n      data-variant={variant}\n      className={cn(collapsibleHeaderVariants({ variant, size }), className)}\n      {...props}\n    >\n      {Icon && (\n        <Icon\n          className=\"size-4 shrink-0 text-muted-foreground pointer-coarse:size-4.5\"\n          strokeWidth={1.75}\n        />\n      )}\n      <span className=\"min-w-0 flex-1 text-left\">{children}</span>\n      {variant === \"nav\" ? (\n        <ChevronRight\n          aria-hidden={true}\n          className=\"size-3.5 shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-90 pointer-coarse:size-4\"\n          strokeWidth={1.75}\n        />\n      ) : (\n        <ChevronDown\n          aria-hidden={true}\n          className={cn(\n            \"shrink-0 text-muted-foreground transition-transform group-aria-expanded/collapsible-header:rotate-180\",\n            size === \"sm\" ? \"size-3.5\" : \"size-4\"\n          )}\n        />\n      )}\n    </CollapsiblePrimitive.CollapsibleTrigger>\n  )\n}\n\nexport { CollapsibleHeader, collapsibleHeaderVariants }\n"]}

package/dist/confirm-dialog.cjs

@@ -15,16 +15,18 @@ function ConfirmDialog({
   confirmIcon,
   variant = "destructive",
   confirmDisabled = false,
+  loading: busy = false,
   onConfirm,
   onCancel
 }) {
-  const [loading, setLoading] = react.useState(false);
+  const [pending, setPending] = react.useState(false);
+  const loading = busy || pending;
   const handleConfirm = async () => {
-    setLoading(true);
+    setPending(true);
     try {
       await onConfirm();
     } finally {
-      setLoading(false);
+      setPending(false);
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsx(chunkID7MWMJO_cjs.Dialog, { open, onOpenChange: (o) => {

package/dist/confirm-dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/confirm-dialog.tsx"],"names":["useState","jsx","Dialog","jsxs","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogFooter","Button","Loader2"],"mappings":";;;;;;;;;AA8BO,SAAS,aAAA,CAAc;AAAA,EAC5B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,WAAA;AAAA,EACA,OAAA,GAAU,aAAA;AAAA,EACV,eAAA,GAAkB,KAAA;AAAA,EAClB,SAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,gBAAgB,YAAY;AAChC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,IAAI;AACF,MAAA,MAAM,SAAA,EAAU;AAAA,IAClB,CAAA,SAAE;AACA,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA,IAClB;AAAA,EACF,CAAA;AAEA,EAAA,uBACEC,cAAA,CAACC,wBAAA,EAAA,EAAO,IAAA,EAAY,YAAA,EAAc,CAAC,CAAA,KAAM;AAAE,IAAA,IAAI,CAAC,CAAA,IAAK,CAAC,OAAA,EAAS,QAAA,EAAS;AAAA,EAAG,CAAA,EAEzE,QAAA,kBAAAC,eAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,KAAA;AAAA,MACjB,SAAA,EAAU,yCAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAACE,8BAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAAJ,cAAA,CAACK,iCAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACpBL,cAAA,CAACM,uCAAmB,QAAA,EAAA,WAAA,EAAY;AAAA,SAAA,EAClC,CAAA;AAAA,wBACAJ,eAAA,CAACK,8BAAA,EAAA,EAAa,SAAA,EAAU,QAAA,EACtB,QAAA,EAAA;AAAA,0BAAAP,cAAA;AAAA,YAACQ,wBAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,SAAA;AAAA,cACR,QAAA,EAAU,OAAA;AAAA,cACV,OAAA,EAAS,QAAA;AAAA,cACV,QAAA,EAAA;AAAA;AAAA,WAED;AAAA,0BACAN,eAAA;AAAA,YAACM,wBAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,UAAU,OAAA,IAAW,eAAA;AAAA,cACrB,OAAA,EAAS,aAAA;AAAA,cAER,QAAA,EAAA;AAAA,gBAAA,OAAA,kCAAWC,mBAAA,EAAA,EAAQ,SAAA,EAAU,qBAAA,EAAsB,IAAA,EAAM,IAAI,CAAA,GAAK,WAAA;AAAA,gBAClE;AAAA;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF,EACF,CAAA;AAEJ","file":"confirm-dialog.cjs","sourcesContent":["// Copyright (c) 2026, Invergent SA, developed by Flavius Burca\n// SPDX-License-Identifier: AGPL-3.0-only\n//\nimport { useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { Button } from \"./button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n} from \"./dialog\";\n\ninterface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  description: React.ReactNode;\n  confirmLabel?: string;\n  confirmIcon?: React.ReactNode;\n  variant?: \"destructive\" | \"default\";\n  /** Disables the confirm button. Use when the action is known\n   *  to be invalid (e.g. an in-use entity) and the dialog only\n   *  exists to explain why. */\n  confirmDisabled?: boolean;\n  onConfirm: () => Promise<void> | void;\n  onCancel: () => void;\n}\n\nexport function ConfirmDialog({\n  open,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  confirmIcon,\n  variant = \"destructive\",\n  confirmDisabled = false,\n  onConfirm,\n  onCancel,\n}: ConfirmDialogProps) {\n  const [loading, setLoading] = useState(false);\n\n  const handleConfirm = async () => {\n    setLoading(true);\n    try {\n      await onConfirm();\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={(o) => { if (!o && !loading) onCancel(); }}>\n      {/* Work's confirm: compact, no close button — Cancel and Escape do it. */}\n      <DialogContent\n        showCloseButton={false}\n        className=\"gap-3.5 px-6 pt-6 pb-5 sm:max-w-[430px]\"\n      >\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <DialogFooter className=\"pt-1.5\">\n          <Button\n            variant=\"outline\"\n            disabled={loading}\n            onClick={onCancel}\n          >\n            Cancel\n          </Button>\n          <Button\n            variant={variant}\n            disabled={loading || confirmDisabled}\n            onClick={handleConfirm}\n          >\n            {loading ? <Loader2 className=\"animate-spin mr-1.5\" size={14} /> : confirmIcon}\n            {confirmLabel}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"]}
+{"version":3,"sources":["../src/confirm-dialog.tsx"],"names":["useState","jsx","Dialog","jsxs","DialogContent","DialogHeader","DialogTitle","DialogDescription","DialogFooter","Button","Loader2"],"mappings":";;;;;;;;;AAiCO,SAAS,aAAA,CAAc;AAAA,EAC5B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,WAAA;AAAA,EACA,OAAA,GAAU,aAAA;AAAA,EACV,eAAA,GAAkB,KAAA;AAAA,EAClB,SAAS,IAAA,GAAO,KAAA;AAAA,EAChB,SAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,UAAU,IAAA,IAAQ,OAAA;AAExB,EAAA,MAAM,gBAAgB,YAAY;AAChC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,IAAI;AACF,MAAA,MAAM,SAAA,EAAU;AAAA,IAClB,CAAA,SAAE;AACA,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA,IAClB;AAAA,EACF,CAAA;AAEA,EAAA,uBACEC,cAAA,CAACC,wBAAA,EAAA,EAAO,IAAA,EAAY,YAAA,EAAc,CAAC,CAAA,KAAM;AAAE,IAAA,IAAI,CAAC,CAAA,IAAK,CAAC,OAAA,EAAS,QAAA,EAAS;AAAA,EAAG,CAAA,EAEzE,QAAA,kBAAAC,eAAA;AAAA,IAACC,+BAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,KAAA;AAAA,MACjB,SAAA,EAAU,yCAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAD,eAAA,CAACE,8BAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAAJ,cAAA,CAACK,iCAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACpBL,cAAA,CAACM,uCAAmB,QAAA,EAAA,WAAA,EAAY;AAAA,SAAA,EAClC,CAAA;AAAA,wBACAJ,eAAA,CAACK,8BAAA,EAAA,EAAa,SAAA,EAAU,QAAA,EACtB,QAAA,EAAA;AAAA,0BAAAP,cAAA;AAAA,YAACQ,wBAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,SAAA;AAAA,cACR,QAAA,EAAU,OAAA;AAAA,cACV,OAAA,EAAS,QAAA;AAAA,cACV,QAAA,EAAA;AAAA;AAAA,WAED;AAAA,0BACAN,eAAA;AAAA,YAACM,wBAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,UAAU,OAAA,IAAW,eAAA;AAAA,cACrB,OAAA,EAAS,aAAA;AAAA,cAER,QAAA,EAAA;AAAA,gBAAA,OAAA,kCAAWC,mBAAA,EAAA,EAAQ,SAAA,EAAU,qBAAA,EAAsB,IAAA,EAAM,IAAI,CAAA,GAAK,WAAA;AAAA,gBAClE;AAAA;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF,EACF,CAAA;AAEJ","file":"confirm-dialog.cjs","sourcesContent":["// Copyright (c) 2026, Invergent SA, developed by Flavius Burca\n// SPDX-License-Identifier: AGPL-3.0-only\n//\nimport { useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { Button } from \"./button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n} from \"./dialog\";\n\ninterface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  description: React.ReactNode;\n  confirmLabel?: string;\n  confirmIcon?: React.ReactNode;\n  variant?: \"destructive\" | \"default\";\n  /** Disables the confirm button. Use when the action is known\n   *  to be invalid (e.g. an in-use entity) and the dialog only\n   *  exists to explain why. */\n  confirmDisabled?: boolean;\n  /** Busy from outside: work that outlives the dialog (held in a store a\n   *  remounted dialog reads) keeps it locked, as its own pending confirm does. */\n  loading?: boolean;\n  onConfirm: () => Promise<void> | void;\n  onCancel: () => void;\n}\n\nexport function ConfirmDialog({\n  open,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  confirmIcon,\n  variant = \"destructive\",\n  confirmDisabled = false,\n  loading: busy = false,\n  onConfirm,\n  onCancel,\n}: ConfirmDialogProps) {\n  const [pending, setPending] = useState(false);\n  const loading = busy || pending;\n\n  const handleConfirm = async () => {\n    setPending(true);\n    try {\n      await onConfirm();\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={(o) => { if (!o && !loading) onCancel(); }}>\n      {/* Work's confirm: compact, no close button — Cancel and Escape do it. */}\n      <DialogContent\n        showCloseButton={false}\n        className=\"gap-3.5 px-6 pt-6 pb-5 sm:max-w-[430px]\"\n      >\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <DialogFooter className=\"pt-1.5\">\n          <Button\n            variant=\"outline\"\n            disabled={loading}\n            onClick={onCancel}\n          >\n            Cancel\n          </Button>\n          <Button\n            variant={variant}\n            disabled={loading || confirmDisabled}\n            onClick={handleConfirm}\n          >\n            {loading ? <Loader2 className=\"animate-spin mr-1.5\" size={14} /> : confirmIcon}\n            {confirmLabel}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"]}

package/dist/confirm-dialog.d.cts

@@ -11,9 +11,12 @@ interface ConfirmDialogProps {
      *  to be invalid (e.g. an in-use entity) and the dialog only
      *  exists to explain why. */
     confirmDisabled?: boolean;
+    /** Busy from outside: work that outlives the dialog (held in a store a
+     *  remounted dialog reads) keeps it locked, as its own pending confirm does. */
+    loading?: boolean;
     onConfirm: () => Promise<void> | void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ open, title, description, confirmLabel, confirmIcon, variant, confirmDisabled, onConfirm, onCancel, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+declare function ConfirmDialog({ open, title, description, confirmLabel, confirmIcon, variant, confirmDisabled, loading: busy, onConfirm, onCancel, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 
 export { ConfirmDialog };

package/dist/confirm-dialog.d.ts

@@ -11,9 +11,12 @@ interface ConfirmDialogProps {
      *  to be invalid (e.g. an in-use entity) and the dialog only
      *  exists to explain why. */
     confirmDisabled?: boolean;
+    /** Busy from outside: work that outlives the dialog (held in a store a
+     *  remounted dialog reads) keeps it locked, as its own pending confirm does. */
+    loading?: boolean;
     onConfirm: () => Promise<void> | void;
     onCancel: () => void;
 }
-declare function ConfirmDialog({ open, title, description, confirmLabel, confirmIcon, variant, confirmDisabled, onConfirm, onCancel, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
+declare function ConfirmDialog({ open, title, description, confirmLabel, confirmIcon, variant, confirmDisabled, loading: busy, onConfirm, onCancel, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element;
 
 export { ConfirmDialog };

package/dist/confirm-dialog.js

@@ -13,16 +13,18 @@ function ConfirmDialog({
   confirmIcon,
   variant = "destructive",
   confirmDisabled = false,
+  loading: busy = false,
   onConfirm,
   onCancel
 }) {
-  const [loading, setLoading] = useState(false);
+  const [pending, setPending] = useState(false);
+  const loading = busy || pending;
   const handleConfirm = async () => {
-    setLoading(true);
+    setPending(true);
     try {
       await onConfirm();
     } finally {
-      setLoading(false);
+      setPending(false);
     }
   };
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (o) => {

package/dist/confirm-dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/confirm-dialog.tsx"],"names":[],"mappings":";;;;;;;AA8BO,SAAS,aAAA,CAAc;AAAA,EAC5B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,WAAA;AAAA,EACA,OAAA,GAAU,aAAA;AAAA,EACV,eAAA,GAAkB,KAAA;AAAA,EAClB,SAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAE5C,EAAA,MAAM,gBAAgB,YAAY;AAChC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,IAAI;AACF,MAAA,MAAM,SAAA,EAAU;AAAA,IAClB,CAAA,SAAE;AACA,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA,IAClB;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAY,YAAA,EAAc,CAAC,CAAA,KAAM;AAAE,IAAA,IAAI,CAAC,CAAA,IAAK,CAAC,OAAA,EAAS,QAAA,EAAS;AAAA,EAAG,CAAA,EAEzE,QAAA,kBAAA,IAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,KAAA;AAAA,MACjB,SAAA,EAAU,yCAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,eAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACpB,GAAA,CAAC,qBAAmB,QAAA,EAAA,WAAA,EAAY;AAAA,SAAA,EAClC,CAAA;AAAA,wBACA,IAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,QAAA,EACtB,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,SAAA;AAAA,cACR,QAAA,EAAU,OAAA;AAAA,cACV,OAAA,EAAS,QAAA;AAAA,cACV,QAAA,EAAA;AAAA;AAAA,WAED;AAAA,0BACA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,UAAU,OAAA,IAAW,eAAA;AAAA,cACrB,OAAA,EAAS,aAAA;AAAA,cAER,QAAA,EAAA;AAAA,gBAAA,OAAA,uBAAW,OAAA,EAAA,EAAQ,SAAA,EAAU,qBAAA,EAAsB,IAAA,EAAM,IAAI,CAAA,GAAK,WAAA;AAAA,gBAClE;AAAA;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF,EACF,CAAA;AAEJ","file":"confirm-dialog.js","sourcesContent":["// Copyright (c) 2026, Invergent SA, developed by Flavius Burca\n// SPDX-License-Identifier: AGPL-3.0-only\n//\nimport { useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { Button } from \"./button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n} from \"./dialog\";\n\ninterface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  description: React.ReactNode;\n  confirmLabel?: string;\n  confirmIcon?: React.ReactNode;\n  variant?: \"destructive\" | \"default\";\n  /** Disables the confirm button. Use when the action is known\n   *  to be invalid (e.g. an in-use entity) and the dialog only\n   *  exists to explain why. */\n  confirmDisabled?: boolean;\n  onConfirm: () => Promise<void> | void;\n  onCancel: () => void;\n}\n\nexport function ConfirmDialog({\n  open,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  confirmIcon,\n  variant = \"destructive\",\n  confirmDisabled = false,\n  onConfirm,\n  onCancel,\n}: ConfirmDialogProps) {\n  const [loading, setLoading] = useState(false);\n\n  const handleConfirm = async () => {\n    setLoading(true);\n    try {\n      await onConfirm();\n    } finally {\n      setLoading(false);\n    }\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={(o) => { if (!o && !loading) onCancel(); }}>\n      {/* Work's confirm: compact, no close button — Cancel and Escape do it. */}\n      <DialogContent\n        showCloseButton={false}\n        className=\"gap-3.5 px-6 pt-6 pb-5 sm:max-w-[430px]\"\n      >\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <DialogFooter className=\"pt-1.5\">\n          <Button\n            variant=\"outline\"\n            disabled={loading}\n            onClick={onCancel}\n          >\n            Cancel\n          </Button>\n          <Button\n            variant={variant}\n            disabled={loading || confirmDisabled}\n            onClick={handleConfirm}\n          >\n            {loading ? <Loader2 className=\"animate-spin mr-1.5\" size={14} /> : confirmIcon}\n            {confirmLabel}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"]}
+{"version":3,"sources":["../src/confirm-dialog.tsx"],"names":[],"mappings":";;;;;;;AAiCO,SAAS,aAAA,CAAc;AAAA,EAC5B,IAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,GAAe,SAAA;AAAA,EACf,WAAA;AAAA,EACA,OAAA,GAAU,aAAA;AAAA,EACV,eAAA,GAAkB,KAAA;AAAA,EAClB,SAAS,IAAA,GAAO,KAAA;AAAA,EAChB,SAAA;AAAA,EACA;AACF,CAAA,EAAuB;AACrB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,UAAU,IAAA,IAAQ,OAAA;AAExB,EAAA,MAAM,gBAAgB,YAAY;AAChC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,IAAI;AACF,MAAA,MAAM,SAAA,EAAU;AAAA,IAClB,CAAA,SAAE;AACA,MAAA,UAAA,CAAW,KAAK,CAAA;AAAA,IAClB;AAAA,EACF,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAY,YAAA,EAAc,CAAC,CAAA,KAAM;AAAE,IAAA,IAAI,CAAC,CAAA,IAAK,CAAC,OAAA,EAAS,QAAA,EAAS;AAAA,EAAG,CAAA,EAEzE,QAAA,kBAAA,IAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,eAAA,EAAiB,KAAA;AAAA,MACjB,SAAA,EAAU,yCAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,YAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,eAAa,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACpB,GAAA,CAAC,qBAAmB,QAAA,EAAA,WAAA,EAAY;AAAA,SAAA,EAClC,CAAA;AAAA,wBACA,IAAA,CAAC,YAAA,EAAA,EAAa,SAAA,EAAU,QAAA,EACtB,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,SAAA;AAAA,cACR,QAAA,EAAU,OAAA;AAAA,cACV,OAAA,EAAS,QAAA;AAAA,cACV,QAAA,EAAA;AAAA;AAAA,WAED;AAAA,0BACA,IAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,OAAA;AAAA,cACA,UAAU,OAAA,IAAW,eAAA;AAAA,cACrB,OAAA,EAAS,aAAA;AAAA,cAER,QAAA,EAAA;AAAA,gBAAA,OAAA,uBAAW,OAAA,EAAA,EAAQ,SAAA,EAAU,qBAAA,EAAsB,IAAA,EAAM,IAAI,CAAA,GAAK,WAAA;AAAA,gBAClE;AAAA;AAAA;AAAA;AACH,SAAA,EACF;AAAA;AAAA;AAAA,GACF,EACF,CAAA;AAEJ","file":"confirm-dialog.js","sourcesContent":["// Copyright (c) 2026, Invergent SA, developed by Flavius Burca\n// SPDX-License-Identifier: AGPL-3.0-only\n//\nimport { useState } from \"react\";\nimport { Loader2 } from \"lucide-react\";\nimport { Button } from \"./button\";\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogFooter,\n} from \"./dialog\";\n\ninterface ConfirmDialogProps {\n  open: boolean;\n  title: string;\n  description: React.ReactNode;\n  confirmLabel?: string;\n  confirmIcon?: React.ReactNode;\n  variant?: \"destructive\" | \"default\";\n  /** Disables the confirm button. Use when the action is known\n   *  to be invalid (e.g. an in-use entity) and the dialog only\n   *  exists to explain why. */\n  confirmDisabled?: boolean;\n  /** Busy from outside: work that outlives the dialog (held in a store a\n   *  remounted dialog reads) keeps it locked, as its own pending confirm does. */\n  loading?: boolean;\n  onConfirm: () => Promise<void> | void;\n  onCancel: () => void;\n}\n\nexport function ConfirmDialog({\n  open,\n  title,\n  description,\n  confirmLabel = \"Confirm\",\n  confirmIcon,\n  variant = \"destructive\",\n  confirmDisabled = false,\n  loading: busy = false,\n  onConfirm,\n  onCancel,\n}: ConfirmDialogProps) {\n  const [pending, setPending] = useState(false);\n  const loading = busy || pending;\n\n  const handleConfirm = async () => {\n    setPending(true);\n    try {\n      await onConfirm();\n    } finally {\n      setPending(false);\n    }\n  };\n\n  return (\n    <Dialog open={open} onOpenChange={(o) => { if (!o && !loading) onCancel(); }}>\n      {/* Work's confirm: compact, no close button — Cancel and Escape do it. */}\n      <DialogContent\n        showCloseButton={false}\n        className=\"gap-3.5 px-6 pt-6 pb-5 sm:max-w-[430px]\"\n      >\n        <DialogHeader>\n          <DialogTitle>{title}</DialogTitle>\n          <DialogDescription>{description}</DialogDescription>\n        </DialogHeader>\n        <DialogFooter className=\"pt-1.5\">\n          <Button\n            variant=\"outline\"\n            disabled={loading}\n            onClick={onCancel}\n          >\n            Cancel\n          </Button>\n          <Button\n            variant={variant}\n            disabled={loading || confirmDisabled}\n            onClick={handleConfirm}\n          >\n            {loading ? <Loader2 className=\"animate-spin mr-1.5\" size={14} /> : confirmIcon}\n            {confirmLabel}\n          </Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"]}

package/dist/tab-strip.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var lucideReact = require('lucide-react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function TabStrip({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tablist",
+      "data-slot": "tab-strip",
+      className: chunk6YHDDRIM_cjs.cn("flex min-w-0 items-center gap-0.5 overflow-x-auto", className),
+      ...props
+    }
+  );
+}
+function TabStripTab({
+  active = false,
+  onSelect,
+  onClose,
+  closeLabel = "Close tab",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "tab",
+      tabIndex: 0,
+      "aria-selected": active,
+      "data-slot": "tab-strip-tab",
+      "data-active": active,
+      onClick: onSelect,
+      onKeyDown: (event) => {
+        if (event.target !== event.currentTarget) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onSelect();
+        }
+      },
+      className: chunk6YHDDRIM_cjs.cn(
+        "flex h-7 min-h-11 max-w-40 shrink-0 cursor-pointer items-center gap-1 rounded-[7px] pl-2.5 text-[12px] transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 pointer-fine:min-h-0",
+        onClose ? "pr-1" : "pr-2.5",
+        active ? "bg-foreground/[0.08] font-medium text-foreground" : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children }),
+        onClose && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "tab-strip-close",
+            "aria-label": closeLabel,
+            onClick: (event) => {
+              event.stopPropagation();
+              onClose();
+            },
+            className: "relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] text-muted-foreground transition-colors outline-none after:absolute after:-inset-1.5 hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.XIcon, { className: "size-3" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.TabStrip = TabStrip;
+exports.TabStripTab = TabStripTab;
+//# sourceMappingURL=tab-strip.cjs.map
+//# sourceMappingURL=tab-strip.cjs.map

package/dist/tab-strip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tab-strip.tsx"],"names":["jsx","cn","jsxs","XIcon"],"mappings":";;;;;;AAUA,SAAS,QAAA,CAAS,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACtE,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,SAAA;AAAA,MACL,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAWC,oBAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAC3E,GAAG;AAAA;AAAA,GACN;AAEJ;AAMA,SAAS,WAAA,CAAY;AAAA,EACnB,MAAA,GAAS,KAAA;AAAA,EACT,QAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,WAAA;AAAA,EACb,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAMG;AACD,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,KAAA;AAAA,MACL,QAAA,EAAU,CAAA;AAAA,MACV,eAAA,EAAe,MAAA;AAAA,MACf,WAAA,EAAU,eAAA;AAAA,MACV,aAAA,EAAa,MAAA;AAAA,MACb,OAAA,EAAS,QAAA;AAAA,MACT,SAAA,EAAW,CAAC,KAAA,KAAU;AACpB,QAAA,IAAI,KAAA,CAAM,MAAA,KAAW,KAAA,CAAM,aAAA,EAAe;AAC1C,QAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,OAAA,IAAW,KAAA,CAAM,QAAQ,GAAA,EAAK;AAC9C,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,QAAA,EAAS;AAAA,QACX;AAAA,MACF,CAAA;AAAA,MACA,SAAA,EAAWD,oBAAA;AAAA,QACT,4MAAA;AAAA,QACA,UAAU,MAAA,GAAS,QAAA;AAAA,QACnB,SACI,kDAAA,GACA,wEAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAoB,QAAA,EAAS,CAAA;AAAA,QAC5C,OAAA,oBACCA,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,WAAA,EAAU,iBAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS,CAAC,KAAA,KAAU;AAElB,cAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,cAAA,OAAA,EAAQ;AAAA,YACV,CAAA;AAAA,YAEA,SAAA,EAAU,8QAAA;AAAA,YAEV,QAAA,kBAAAA,cAAA,CAACG,iBAAA,EAAA,EAAM,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA;AAC5B;AAAA;AAAA,GAEJ;AAEJ","file":"tab-strip.cjs","sourcesContent":["import * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n/**\n * A compact strip of tabs that close (a browser's open pages), drawn as the\n * Work view switch draws its segments: muted text, a faint fill on the open\n * one. It switches nothing itself; each tab says what it does.\n */\nfunction TabStrip({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"tablist\"\n      data-slot=\"tab-strip\"\n      className={cn(\"flex min-w-0 items-center gap-0.5 overflow-x-auto\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * One tab, with an × once `onClose` is given. A `div` with the tab role, not\n * a button: the × is a button, and a button cannot hold another.\n */\nfunction TabStripTab({\n  active = false,\n  onSelect,\n  onClose,\n  closeLabel = \"Close tab\",\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"onSelect\"> & {\n  active?: boolean\n  onSelect: () => void\n  onClose?: () => void\n  /** The ×'s accessible name. */\n  closeLabel?: string\n}) {\n  return (\n    <div\n      role=\"tab\"\n      tabIndex={0}\n      aria-selected={active}\n      data-slot=\"tab-strip-tab\"\n      data-active={active}\n      onClick={onSelect}\n      onKeyDown={(event) => {\n        if (event.target !== event.currentTarget) return\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault()\n          onSelect()\n        }\n      }}\n      className={cn(\n        \"flex h-7 min-h-11 max-w-40 shrink-0 cursor-pointer items-center gap-1 rounded-[7px] pl-2.5 text-[12px] transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 pointer-fine:min-h-0\",\n        onClose ? \"pr-1\" : \"pr-2.5\",\n        active\n          ? \"bg-foreground/[0.08] font-medium text-foreground\"\n          : \"text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"min-w-0 truncate\">{children}</span>\n      {onClose && (\n        <button\n          type=\"button\"\n          data-slot=\"tab-strip-close\"\n          aria-label={closeLabel}\n          onClick={(event) => {\n            // Closing a tab is not opening it.\n            event.stopPropagation()\n            onClose()\n          }}\n          // The × is 16px; the overlay gives it a usable hit area.\n          className=\"relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] text-muted-foreground transition-colors outline-none after:absolute after:-inset-1.5 hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-3\" />\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport { TabStrip, TabStripTab }\n"]}

package/dist/tab-strip.d.cts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * A compact strip of tabs that close (a browser's open pages), drawn as the
+ * Work view switch draws its segments: muted text, a faint fill on the open
+ * one. It switches nothing itself; each tab says what it does.
+ */
+declare function TabStrip({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * One tab, with an × once `onClose` is given. A `div` with the tab role, not
+ * a button: the × is a button, and a button cannot hold another.
+ */
+declare function TabStripTab({ active, onSelect, onClose, closeLabel, className, children, ...props }: Omit<React.ComponentProps<"div">, "onSelect"> & {
+    active?: boolean;
+    onSelect: () => void;
+    onClose?: () => void;
+    /** The ×'s accessible name. */
+    closeLabel?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { TabStrip, TabStripTab };

package/dist/tab-strip.d.ts

@@ -0,0 +1,22 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * A compact strip of tabs that close (a browser's open pages), drawn as the
+ * Work view switch draws its segments: muted text, a faint fill on the open
+ * one. It switches nothing itself; each tab says what it does.
+ */
+declare function TabStrip({ className, ...props }: React.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+/**
+ * One tab, with an × once `onClose` is given. A `div` with the tab role, not
+ * a button: the × is a button, and a button cannot hold another.
+ */
+declare function TabStripTab({ active, onSelect, onClose, closeLabel, className, children, ...props }: Omit<React.ComponentProps<"div">, "onSelect"> & {
+    active?: boolean;
+    onSelect: () => void;
+    onClose?: () => void;
+    /** The ×'s accessible name. */
+    closeLabel?: string;
+}): react_jsx_runtime.JSX.Element;
+
+export { TabStrip, TabStripTab };

package/dist/tab-strip.js

@@ -0,0 +1,71 @@
+import { cn } from './chunk-LZGII7SX.js';
+import { XIcon } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function TabStrip({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "data-slot": "tab-strip",
+      className: cn("flex min-w-0 items-center gap-0.5 overflow-x-auto", className),
+      ...props
+    }
+  );
+}
+function TabStripTab({
+  active = false,
+  onSelect,
+  onClose,
+  closeLabel = "Close tab",
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "tab",
+      tabIndex: 0,
+      "aria-selected": active,
+      "data-slot": "tab-strip-tab",
+      "data-active": active,
+      onClick: onSelect,
+      onKeyDown: (event) => {
+        if (event.target !== event.currentTarget) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onSelect();
+        }
+      },
+      className: cn(
+        "flex h-7 min-h-11 max-w-40 shrink-0 cursor-pointer items-center gap-1 rounded-[7px] pl-2.5 text-[12px] transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 pointer-fine:min-h-0",
+        onClose ? "pr-1" : "pr-2.5",
+        active ? "bg-foreground/[0.08] font-medium text-foreground" : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children }),
+        onClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "tab-strip-close",
+            "aria-label": closeLabel,
+            onClick: (event) => {
+              event.stopPropagation();
+              onClose();
+            },
+            className: "relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] text-muted-foreground transition-colors outline-none after:absolute after:-inset-1.5 hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40",
+            children: /* @__PURE__ */ jsx(XIcon, { className: "size-3" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { TabStrip, TabStripTab };
+//# sourceMappingURL=tab-strip.js.map
+//# sourceMappingURL=tab-strip.js.map

package/dist/tab-strip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tab-strip.tsx"],"names":[],"mappings":";;;;AAUA,SAAS,QAAA,CAAS,EAAE,SAAA,EAAW,GAAG,OAAM,EAAgC;AACtE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,SAAA;AAAA,MACL,WAAA,EAAU,WAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAC3E,GAAG;AAAA;AAAA,GACN;AAEJ;AAMA,SAAS,WAAA,CAAY;AAAA,EACnB,MAAA,GAAS,KAAA;AAAA,EACT,QAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,WAAA;AAAA,EACb,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAMG;AACD,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,KAAA;AAAA,MACL,QAAA,EAAU,CAAA;AAAA,MACV,eAAA,EAAe,MAAA;AAAA,MACf,WAAA,EAAU,eAAA;AAAA,MACV,aAAA,EAAa,MAAA;AAAA,MACb,OAAA,EAAS,QAAA;AAAA,MACT,SAAA,EAAW,CAAC,KAAA,KAAU;AACpB,QAAA,IAAI,KAAA,CAAM,MAAA,KAAW,KAAA,CAAM,aAAA,EAAe;AAC1C,QAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,OAAA,IAAW,KAAA,CAAM,QAAQ,GAAA,EAAK;AAC9C,UAAA,KAAA,CAAM,cAAA,EAAe;AACrB,UAAA,QAAA,EAAS;AAAA,QACX;AAAA,MACF,CAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,4MAAA;AAAA,QACA,UAAU,MAAA,GAAS,QAAA;AAAA,QACnB,SACI,kDAAA,GACA,wEAAA;AAAA,QACJ;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAoB,QAAA,EAAS,CAAA;AAAA,QAC5C,OAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,WAAA,EAAU,iBAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS,CAAC,KAAA,KAAU;AAElB,cAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,cAAA,OAAA,EAAQ;AAAA,YACV,CAAA;AAAA,YAEA,SAAA,EAAU,8QAAA;AAAA,YAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,QAAA,EAAS;AAAA;AAAA;AAC5B;AAAA;AAAA,GAEJ;AAEJ","file":"tab-strip.js","sourcesContent":["import * as React from \"react\"\nimport { XIcon } from \"lucide-react\"\n\nimport { cn } from \"./lib/utils\"\n\n/**\n * A compact strip of tabs that close (a browser's open pages), drawn as the\n * Work view switch draws its segments: muted text, a faint fill on the open\n * one. It switches nothing itself; each tab says what it does.\n */\nfunction TabStrip({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"tablist\"\n      data-slot=\"tab-strip\"\n      className={cn(\"flex min-w-0 items-center gap-0.5 overflow-x-auto\", className)}\n      {...props}\n    />\n  )\n}\n\n/**\n * One tab, with an × once `onClose` is given. A `div` with the tab role, not\n * a button: the × is a button, and a button cannot hold another.\n */\nfunction TabStripTab({\n  active = false,\n  onSelect,\n  onClose,\n  closeLabel = \"Close tab\",\n  className,\n  children,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"onSelect\"> & {\n  active?: boolean\n  onSelect: () => void\n  onClose?: () => void\n  /** The ×'s accessible name. */\n  closeLabel?: string\n}) {\n  return (\n    <div\n      role=\"tab\"\n      tabIndex={0}\n      aria-selected={active}\n      data-slot=\"tab-strip-tab\"\n      data-active={active}\n      onClick={onSelect}\n      onKeyDown={(event) => {\n        if (event.target !== event.currentTarget) return\n        if (event.key === \"Enter\" || event.key === \" \") {\n          event.preventDefault()\n          onSelect()\n        }\n      }}\n      className={cn(\n        \"flex h-7 min-h-11 max-w-40 shrink-0 cursor-pointer items-center gap-1 rounded-[7px] pl-2.5 text-[12px] transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 pointer-fine:min-h-0\",\n        onClose ? \"pr-1\" : \"pr-2.5\",\n        active\n          ? \"bg-foreground/[0.08] font-medium text-foreground\"\n          : \"text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"min-w-0 truncate\">{children}</span>\n      {onClose && (\n        <button\n          type=\"button\"\n          data-slot=\"tab-strip-close\"\n          aria-label={closeLabel}\n          onClick={(event) => {\n            // Closing a tab is not opening it.\n            event.stopPropagation()\n            onClose()\n          }}\n          // The × is 16px; the overlay gives it a usable hit area.\n          className=\"relative flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-[4px] text-muted-foreground transition-colors outline-none after:absolute after:-inset-1.5 hover:bg-foreground/[0.08] hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/40\"\n        >\n          <XIcon className=\"size-3\" />\n        </button>\n      )}\n    </div>\n  )\n}\n\nexport { TabStrip, TabStripTab }\n"]}

package/dist/toggle-group.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkIVMZANP7_cjs = require('./chunk-IVMZANP7.cjs');
+var chunkILCP5QXL_cjs = require('./chunk-ILCP5QXL.cjs');
 var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
 var React = require('react');
 var radixUi = require('radix-ui');
@@ -97,8 +97,10 @@ function ToggleGroupItem({
       "data-spacing": context.spacing,
       className: chunk6YHDDRIM_cjs.cn(
         "shrink-0 focus:z-10 focus-visible:z-10",
-        chunkIVMZANP7_cjs.toggleVariants({ variant: itemVariant, size: itemSize }),
+        chunkILCP5QXL_cjs.toggleVariants({ variant: itemVariant, size: itemSize }),
         context.spacing === 0 && JOINED_ITEM[itemVariant ?? "default"],
+        // A joined segment pads its label; an icon segment stays square.
+        itemSize?.startsWith("icon") && "px-0",
         className
       ),
       ...props,

package/dist/toggle-group.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/toggle-group.tsx"],"names":["React","jsx","ToggleGroupPrimitive","cn","toggleVariants"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,IAAM,qBAA2BA,gBAAA,CAAA,aAAA,CAK/B;AAAA,EACA,IAAA,EAAM,SAAA;AAAA,EACN,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,CAAA;AAAA,EACT,WAAA,EAAa;AACf,CAAC,CAAA;AAQD,IAAM,YAAA,GAAe;AAAA,EACnB,OAAA,EAAS,6CAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,WAAA,GAAc;AAAA,EAClB,OAAA,EACE,8MAAA;AAAA,EACF,OAAA,EACE;AACJ,CAAA;AAEA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,WAAA,GAAc,YAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAIK;AACH,EAAA,uBACEC,cAAA;AAAA,IAACC,mBAAA,CAAqB,IAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAc,OAAA;AAAA,MACd,kBAAA,EAAkB,WAAA;AAAA,MAClB,KAAA,EAAO,EAAE,OAAA,EAAS,OAAA,EAAQ;AAAA,MAC1B,SAAA,EAAWC,oBAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT,4KAAA;AAAA,QACA,OAAA,KAAY,CAAA,IAAK,YAAA,CAAa,OAAA,IAAW,SAAS,CAAA;AAAA,QAClD;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAF,cAAA;AAAA,QAAC,kBAAA,CAAmB,QAAA;AAAA,QAAnB;AAAA,UACC,KAAA,EAAO,EAAE,OAAA,EAAS,IAAA,EAAM,SAAS,WAAA,EAAY;AAAA,UAE5C;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEA,SAAS,eAAA,CAAgB;AAAA,EACvB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACuC;AACrC,EAAA,MAAM,OAAA,GAAgBD,4BAAW,kBAAkB,CAAA;AACnD,EAAA,MAAM,WAAA,GAAc,QAAQ,OAAA,IAAW,OAAA;AACvC,EAAA,MAAM,QAAA,GAAW,QAAQ,IAAA,IAAQ,IAAA;AAEjC,EAAA,uBACEC,cAAA;AAAA,IAACC,mBAAA,CAAqB,IAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,cAAA,EAAc,WAAA;AAAA,MACd,WAAA,EAAW,QAAA;AAAA,MACX,gBAAc,OAAA,CAAQ,OAAA;AAAA,MACtB,SAAA,EAAWC,oBAAA;AAAA,QACT,wCAAA;AAAA,QACAC,iCAAe,EAAE,OAAA,EAAS,WAAA,EAAa,IAAA,EAAM,UAAU,CAAA;AAAA,QACvD,OAAA,CAAQ,OAAA,KAAY,CAAA,IAAK,WAAA,CAAY,eAAe,SAAS,CAAA;AAAA,QAC7D;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAOA,SAAS,UAAA,CAA6B;AAAA,EACpC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR;AACF,CAAA,EAMG;AACD,EAAA,uBACEH,cAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAQ,SAAA;AAAA,MACR,YAAA,EAAY,KAAA;AAAA,MACZ,KAAA;AAAA,MACA,aAAA,EAAe,CAAC,CAAA,KAAM;AACpB,QAAA,IAAI,CAAA,WAAY,CAAM,CAAA;AAAA,MACxB,CAAA;AAAA,MACA,SAAA;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,CAAA,qBACVA,cAAA,CAAC,eAAA,EAAA,EAA2B,KAAA,EAAO,CAAA,CAAE,EAAA,EAClC,QAAA,EAAA,CAAA,CAAE,KAAA,EAAA,EADiB,CAAA,CAAE,EAExB,CACD;AAAA;AAAA,GACH;AAEJ;AAGA,SAAS,iBAAA,CACP,KACA,KAAA,EACqB;AACrB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAUD,0BAAY,MAAM;AAC9C,IAAA,IAAI;AACF,MAAA,MAAM,KAAA,GAAQ,YAAA,CAAa,OAAA,CAAQ,GAAG,CAAA;AACtC,MAAA,OAAO,KAAA,CAAM,KAAK,CAAC,CAAA,KAAM,MAAM,KAAK,CAAA,IAAK,MAAM,CAAC,CAAA;AAAA,IAClD,CAAA,CAAA,MAAQ;AACN,MAAA,OAAO,MAAM,CAAC,CAAA;AAAA,IAChB;AAAA,EACF,CAAC,CAAA;AACD,EAAA,MAAM,MAAA,GAAS,CAAC,CAAA,KAAS;AACvB,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,IAAI;AACF,MAAA,YAAA,CAAa,OAAA,CAAQ,KAAK,CAAC,CAAA;AAAA,IAC7B,CAAA,CAAA,MAAQ;AAAA,IAER;AAAA,EACF,CAAA;AACA,EAAA,OAAO,CAAC,MAAM,MAAM,CAAA;AACtB","file":"toggle-group.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { toggleVariants } from \"./toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\n// With spacing the items are separate toggles, drawn as `toggle` draws them.\n// Joined (spacing 0) they are one segmented control, as the Work console\n// draws its two: `default` is the Work / Dev switch — a round track with the\n// picked segment an amber pill — and `outline` its view switch (Steps |\n// Stats, Open | Resolved) — a 10px bordered track, the picked segment a\n// faint fill.\nconst JOINED_TRACK = {\n  default: \"gap-1 rounded-full bg-foreground/[0.06] p-1\",\n  outline: \"gap-0 rounded-[10px] border border-foreground/10 p-0.5\",\n} as const\n\nconst JOINED_ITEM = {\n  default:\n    \"rounded-full border-transparent bg-transparent px-4 font-semibold text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-amber-400 data-[state=on]:text-stone-950\",\n  outline:\n    \"rounded-[8px] border-transparent bg-transparent px-3 text-[12.5px] font-normal text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n} as const\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        // `w-fit` sizes to content and refuses to shrink, so a segmented\n        // control wider than a phone dragged the whole page sideways rather\n        // than containing itself. Capped at its container, scrolling inside\n        // as a last resort — call sites should still shorten their labels.\n        \"group/toggle-group no-scrollbar flex w-fit max-w-full flex-row items-center gap-[--spacing(var(--gap))] overflow-x-auto data-vertical:flex-col data-vertical:items-stretch\",\n        spacing === 0 && JOINED_TRACK[variant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n  const itemVariant = context.variant || variant\n  const itemSize = context.size || size\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={itemVariant}\n      data-size={itemSize}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 focus:z-10 focus-visible:z-10\",\n        toggleVariants({ variant: itemVariant, size: itemSize }),\n        context.spacing === 0 && JOINED_ITEM[itemVariant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\n/**\n * A tab's two or three views (Steps | Stats, Members | Recent alerts): the\n * Work view switch. One view is always picked — clicking the picked one\n * again does not clear it.\n */\nfunction ViewSwitch<T extends string>({\n  views,\n  value,\n  onChange,\n  label = \"Show\",\n  className,\n}: {\n  views: readonly { id: T; label: React.ReactNode }[]\n  value: T\n  onChange: (v: T) => void\n  label?: string\n  className?: string\n}) {\n  return (\n    <ToggleGroup\n      type=\"single\"\n      variant=\"outline\"\n      aria-label={label}\n      value={value}\n      onValueChange={(v) => {\n        if (v) onChange(v as T)\n      }}\n      className={className}\n    >\n      {views.map((v) => (\n        <ToggleGroupItem key={v.id} value={v.id}>\n          {v.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  )\n}\n\n/** The view last chosen under `key`, else the first; storage may be off. */\nfunction useRememberedView<T extends string>(\n  key: string,\n  views: readonly T[]\n): [T, (v: T) => void] {\n  const [view, setView] = React.useState<T>(() => {\n    try {\n      const saved = localStorage.getItem(key)\n      return views.find((v) => v === saved) ?? views[0]\n    } catch {\n      return views[0]\n    }\n  })\n  const choose = (v: T) => {\n    setView(v)\n    try {\n      localStorage.setItem(key, v)\n    } catch {\n      // A private window keeps the choice for this visit only.\n    }\n  }\n  return [view, choose]\n}\n\nexport { ToggleGroup, ToggleGroupItem, ViewSwitch, useRememberedView }\n"]}
+{"version":3,"sources":["../src/toggle-group.tsx"],"names":["React","jsx","ToggleGroupPrimitive","cn","toggleVariants"],"mappings":"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","file":"toggle-group.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { toggleVariants } from \"./toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\n// With spacing the items are separate toggles, drawn as `toggle` draws them.\n// Joined (spacing 0) they are one segmented control, as the Work console\n// draws its two: `default` is the Work / Dev switch — a round track with the\n// picked segment an amber pill — and `outline` its view switch (Steps |\n// Stats, Open | Resolved) — a 10px bordered track, the picked segment a\n// faint fill.\nconst JOINED_TRACK = {\n  default: \"gap-1 rounded-full bg-foreground/[0.06] p-1\",\n  outline: \"gap-0 rounded-[10px] border border-foreground/10 p-0.5\",\n} as const\n\nconst JOINED_ITEM = {\n  default:\n    \"rounded-full border-transparent bg-transparent px-4 font-semibold text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-amber-400 data-[state=on]:text-stone-950\",\n  outline:\n    \"rounded-[8px] border-transparent bg-transparent px-3 text-[12.5px] font-normal text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n} as const\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        // `w-fit` sizes to content and refuses to shrink, so a segmented\n        // control wider than a phone dragged the whole page sideways rather\n        // than containing itself. Capped at its container, scrolling inside\n        // as a last resort — call sites should still shorten their labels.\n        \"group/toggle-group no-scrollbar flex w-fit max-w-full flex-row items-center gap-[--spacing(var(--gap))] overflow-x-auto data-vertical:flex-col data-vertical:items-stretch\",\n        spacing === 0 && JOINED_TRACK[variant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n  const itemVariant = context.variant || variant\n  const itemSize = context.size || size\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={itemVariant}\n      data-size={itemSize}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 focus:z-10 focus-visible:z-10\",\n        toggleVariants({ variant: itemVariant, size: itemSize }),\n        context.spacing === 0 && JOINED_ITEM[itemVariant ?? \"default\"],\n        // A joined segment pads its label; an icon segment stays square.\n        itemSize?.startsWith(\"icon\") && \"px-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\n/**\n * A tab's two or three views (Steps | Stats, Members | Recent alerts): the\n * Work view switch. One view is always picked — clicking the picked one\n * again does not clear it.\n */\nfunction ViewSwitch<T extends string>({\n  views,\n  value,\n  onChange,\n  label = \"Show\",\n  className,\n}: {\n  views: readonly { id: T; label: React.ReactNode }[]\n  value: T\n  onChange: (v: T) => void\n  label?: string\n  className?: string\n}) {\n  return (\n    <ToggleGroup\n      type=\"single\"\n      variant=\"outline\"\n      aria-label={label}\n      value={value}\n      onValueChange={(v) => {\n        if (v) onChange(v as T)\n      }}\n      className={className}\n    >\n      {views.map((v) => (\n        <ToggleGroupItem key={v.id} value={v.id}>\n          {v.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  )\n}\n\n/** The view last chosen under `key`, else the first; storage may be off. */\nfunction useRememberedView<T extends string>(\n  key: string,\n  views: readonly T[]\n): [T, (v: T) => void] {\n  const [view, setView] = React.useState<T>(() => {\n    try {\n      const saved = localStorage.getItem(key)\n      return views.find((v) => v === saved) ?? views[0]\n    } catch {\n      return views[0]\n    }\n  })\n  const choose = (v: T) => {\n    setView(v)\n    try {\n      localStorage.setItem(key, v)\n    } catch {\n      // A private window keeps the choice for this visit only.\n    }\n  }\n  return [view, choose]\n}\n\nexport { ToggleGroup, ToggleGroupItem, ViewSwitch, useRememberedView }\n"]}

package/dist/toggle-group.js

@@ -1,4 +1,4 @@
-import { toggleVariants } from './chunk-CPAFEXKR.js';
+import { toggleVariants } from './chunk-WO2SXSNH.js';
 import { cn } from './chunk-LZGII7SX.js';
 import * as React from 'react';
 import { ToggleGroup as ToggleGroup$1 } from 'radix-ui';
@@ -77,6 +77,8 @@ function ToggleGroupItem({
         "shrink-0 focus:z-10 focus-visible:z-10",
         toggleVariants({ variant: itemVariant, size: itemSize }),
         context.spacing === 0 && JOINED_ITEM[itemVariant ?? "default"],
+        // A joined segment pads its label; an icon segment stays square.
+        itemSize?.startsWith("icon") && "px-0",
         className
       ),
       ...props,

package/dist/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/toggle-group.tsx"],"names":["ToggleGroupPrimitive"],"mappings":";;;;;;AASA,IAAM,qBAA2B,KAAA,CAAA,aAAA,CAK/B;AAAA,EACA,IAAA,EAAM,SAAA;AAAA,EACN,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,CAAA;AAAA,EACT,WAAA,EAAa;AACf,CAAC,CAAA;AAQD,IAAM,YAAA,GAAe;AAAA,EACnB,OAAA,EAAS,6CAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,WAAA,GAAc;AAAA,EAClB,OAAA,EACE,8MAAA;AAAA,EACF,OAAA,EACE;AACJ,CAAA;AAEA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,WAAA,GAAc,YAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAIK;AACH,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA,CAAqB,IAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAc,OAAA;AAAA,MACd,kBAAA,EAAkB,WAAA;AAAA,MAClB,KAAA,EAAO,EAAE,OAAA,EAAS,OAAA,EAAQ;AAAA,MAC1B,SAAA,EAAW,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT,4KAAA;AAAA,QACA,OAAA,KAAY,CAAA,IAAK,YAAA,CAAa,OAAA,IAAW,SAAS,CAAA;AAAA,QAClD;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,kBAAA,CAAmB,QAAA;AAAA,QAAnB;AAAA,UACC,KAAA,EAAO,EAAE,OAAA,EAAS,IAAA,EAAM,SAAS,WAAA,EAAY;AAAA,UAE5C;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEA,SAAS,eAAA,CAAgB;AAAA,EACvB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACuC;AACrC,EAAA,MAAM,OAAA,GAAgB,iBAAW,kBAAkB,CAAA;AACnD,EAAA,MAAM,WAAA,GAAc,QAAQ,OAAA,IAAW,OAAA;AACvC,EAAA,MAAM,QAAA,GAAW,QAAQ,IAAA,IAAQ,IAAA;AAEjC,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA,CAAqB,IAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,cAAA,EAAc,WAAA;AAAA,MACd,WAAA,EAAW,QAAA;AAAA,MACX,gBAAc,OAAA,CAAQ,OAAA;AAAA,MACtB,SAAA,EAAW,EAAA;AAAA,QACT,wCAAA;AAAA,QACA,eAAe,EAAE,OAAA,EAAS,WAAA,EAAa,IAAA,EAAM,UAAU,CAAA;AAAA,QACvD,OAAA,CAAQ,OAAA,KAAY,CAAA,IAAK,WAAA,CAAY,eAAe,SAAS,CAAA;AAAA,QAC7D;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAOA,SAAS,UAAA,CAA6B;AAAA,EACpC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR;AACF,CAAA,EAMG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAQ,SAAA;AAAA,MACR,YAAA,EAAY,KAAA;AAAA,MACZ,KAAA;AAAA,MACA,aAAA,EAAe,CAAC,CAAA,KAAM;AACpB,QAAA,IAAI,CAAA,WAAY,CAAM,CAAA;AAAA,MACxB,CAAA;AAAA,MACA,SAAA;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,CAAA,qBACV,GAAA,CAAC,eAAA,EAAA,EAA2B,KAAA,EAAO,CAAA,CAAE,EAAA,EAClC,QAAA,EAAA,CAAA,CAAE,KAAA,EAAA,EADiB,CAAA,CAAE,EAExB,CACD;AAAA;AAAA,GACH;AAEJ;AAGA,SAAS,iBAAA,CACP,KACA,KAAA,EACqB;AACrB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAU,eAAY,MAAM;AAC9C,IAAA,IAAI;AACF,MAAA,MAAM,KAAA,GAAQ,YAAA,CAAa,OAAA,CAAQ,GAAG,CAAA;AACtC,MAAA,OAAO,KAAA,CAAM,KAAK,CAAC,CAAA,KAAM,MAAM,KAAK,CAAA,IAAK,MAAM,CAAC,CAAA;AAAA,IAClD,CAAA,CAAA,MAAQ;AACN,MAAA,OAAO,MAAM,CAAC,CAAA;AAAA,IAChB;AAAA,EACF,CAAC,CAAA;AACD,EAAA,MAAM,MAAA,GAAS,CAAC,CAAA,KAAS;AACvB,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,IAAI;AACF,MAAA,YAAA,CAAa,OAAA,CAAQ,KAAK,CAAC,CAAA;AAAA,IAC7B,CAAA,CAAA,MAAQ;AAAA,IAER;AAAA,EACF,CAAA;AACA,EAAA,OAAO,CAAC,MAAM,MAAM,CAAA;AACtB","file":"toggle-group.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { toggleVariants } from \"./toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\n// With spacing the items are separate toggles, drawn as `toggle` draws them.\n// Joined (spacing 0) they are one segmented control, as the Work console\n// draws its two: `default` is the Work / Dev switch — a round track with the\n// picked segment an amber pill — and `outline` its view switch (Steps |\n// Stats, Open | Resolved) — a 10px bordered track, the picked segment a\n// faint fill.\nconst JOINED_TRACK = {\n  default: \"gap-1 rounded-full bg-foreground/[0.06] p-1\",\n  outline: \"gap-0 rounded-[10px] border border-foreground/10 p-0.5\",\n} as const\n\nconst JOINED_ITEM = {\n  default:\n    \"rounded-full border-transparent bg-transparent px-4 font-semibold text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-amber-400 data-[state=on]:text-stone-950\",\n  outline:\n    \"rounded-[8px] border-transparent bg-transparent px-3 text-[12.5px] font-normal text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n} as const\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        // `w-fit` sizes to content and refuses to shrink, so a segmented\n        // control wider than a phone dragged the whole page sideways rather\n        // than containing itself. Capped at its container, scrolling inside\n        // as a last resort — call sites should still shorten their labels.\n        \"group/toggle-group no-scrollbar flex w-fit max-w-full flex-row items-center gap-[--spacing(var(--gap))] overflow-x-auto data-vertical:flex-col data-vertical:items-stretch\",\n        spacing === 0 && JOINED_TRACK[variant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n  const itemVariant = context.variant || variant\n  const itemSize = context.size || size\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={itemVariant}\n      data-size={itemSize}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 focus:z-10 focus-visible:z-10\",\n        toggleVariants({ variant: itemVariant, size: itemSize }),\n        context.spacing === 0 && JOINED_ITEM[itemVariant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\n/**\n * A tab's two or three views (Steps | Stats, Members | Recent alerts): the\n * Work view switch. One view is always picked — clicking the picked one\n * again does not clear it.\n */\nfunction ViewSwitch<T extends string>({\n  views,\n  value,\n  onChange,\n  label = \"Show\",\n  className,\n}: {\n  views: readonly { id: T; label: React.ReactNode }[]\n  value: T\n  onChange: (v: T) => void\n  label?: string\n  className?: string\n}) {\n  return (\n    <ToggleGroup\n      type=\"single\"\n      variant=\"outline\"\n      aria-label={label}\n      value={value}\n      onValueChange={(v) => {\n        if (v) onChange(v as T)\n      }}\n      className={className}\n    >\n      {views.map((v) => (\n        <ToggleGroupItem key={v.id} value={v.id}>\n          {v.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  )\n}\n\n/** The view last chosen under `key`, else the first; storage may be off. */\nfunction useRememberedView<T extends string>(\n  key: string,\n  views: readonly T[]\n): [T, (v: T) => void] {\n  const [view, setView] = React.useState<T>(() => {\n    try {\n      const saved = localStorage.getItem(key)\n      return views.find((v) => v === saved) ?? views[0]\n    } catch {\n      return views[0]\n    }\n  })\n  const choose = (v: T) => {\n    setView(v)\n    try {\n      localStorage.setItem(key, v)\n    } catch {\n      // A private window keeps the choice for this visit only.\n    }\n  }\n  return [view, choose]\n}\n\nexport { ToggleGroup, ToggleGroupItem, ViewSwitch, useRememberedView }\n"]}
+{"version":3,"sources":["../src/toggle-group.tsx"],"names":["ToggleGroupPrimitive"],"mappings":";;;;;;AASA,IAAM,qBAA2B,KAAA,CAAA,aAAA,CAK/B;AAAA,EACA,IAAA,EAAM,SAAA;AAAA,EACN,OAAA,EAAS,SAAA;AAAA,EACT,OAAA,EAAS,CAAA;AAAA,EACT,WAAA,EAAa;AACf,CAAC,CAAA;AAQD,IAAM,YAAA,GAAe;AAAA,EACnB,OAAA,EAAS,6CAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,WAAA,GAAc;AAAA,EAClB,OAAA,EACE,8MAAA;AAAA,EACF,OAAA,EACE;AACJ,CAAA;AAEA,SAAS,WAAA,CAAY;AAAA,EACnB,SAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA,GAAU,CAAA;AAAA,EACV,WAAA,GAAc,YAAA;AAAA,EACd,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAIK;AACH,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA,CAAqB,IAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,cAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACd,WAAA,EAAW,IAAA;AAAA,MACX,cAAA,EAAc,OAAA;AAAA,MACd,kBAAA,EAAkB,WAAA;AAAA,MAClB,KAAA,EAAO,EAAE,OAAA,EAAS,OAAA,EAAQ;AAAA,MAC1B,SAAA,EAAW,EAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT,4KAAA;AAAA,QACA,OAAA,KAAY,CAAA,IAAK,YAAA,CAAa,OAAA,IAAW,SAAS,CAAA;AAAA,QAClD;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAAC,kBAAA,CAAmB,QAAA;AAAA,QAAnB;AAAA,UACC,KAAA,EAAO,EAAE,OAAA,EAAS,IAAA,EAAM,SAAS,WAAA,EAAY;AAAA,UAE5C;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;AAEA,SAAS,eAAA,CAAgB;AAAA,EACvB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACuC;AACrC,EAAA,MAAM,OAAA,GAAgB,iBAAW,kBAAkB,CAAA;AACnD,EAAA,MAAM,WAAA,GAAc,QAAQ,OAAA,IAAW,OAAA;AACvC,EAAA,MAAM,QAAA,GAAW,QAAQ,IAAA,IAAQ,IAAA;AAEjC,EAAA,uBACE,GAAA;AAAA,IAACA,aAAA,CAAqB,IAAA;AAAA,IAArB;AAAA,MACC,WAAA,EAAU,mBAAA;AAAA,MACV,cAAA,EAAc,WAAA;AAAA,MACd,WAAA,EAAW,QAAA;AAAA,MACX,gBAAc,OAAA,CAAQ,OAAA;AAAA,MACtB,SAAA,EAAW,EAAA;AAAA,QACT,wCAAA;AAAA,QACA,eAAe,EAAE,OAAA,EAAS,WAAA,EAAa,IAAA,EAAM,UAAU,CAAA;AAAA,QACvD,OAAA,CAAQ,OAAA,KAAY,CAAA,IAAK,WAAA,CAAY,eAAe,SAAS,CAAA;AAAA;AAAA,QAE7D,QAAA,EAAU,UAAA,CAAW,MAAM,CAAA,IAAK,MAAA;AAAA,QAChC;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAOA,SAAS,UAAA,CAA6B;AAAA,EACpC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,GAAQ,MAAA;AAAA,EACR;AACF,CAAA,EAMG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAQ,SAAA;AAAA,MACR,YAAA,EAAY,KAAA;AAAA,MACZ,KAAA;AAAA,MACA,aAAA,EAAe,CAAC,CAAA,KAAM;AACpB,QAAA,IAAI,CAAA,WAAY,CAAM,CAAA;AAAA,MACxB,CAAA;AAAA,MACA,SAAA;AAAA,MAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,CAAA,qBACV,GAAA,CAAC,eAAA,EAAA,EAA2B,KAAA,EAAO,CAAA,CAAE,EAAA,EAClC,QAAA,EAAA,CAAA,CAAE,KAAA,EAAA,EADiB,CAAA,CAAE,EAExB,CACD;AAAA;AAAA,GACH;AAEJ;AAGA,SAAS,iBAAA,CACP,KACA,KAAA,EACqB;AACrB,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAU,eAAY,MAAM;AAC9C,IAAA,IAAI;AACF,MAAA,MAAM,KAAA,GAAQ,YAAA,CAAa,OAAA,CAAQ,GAAG,CAAA;AACtC,MAAA,OAAO,KAAA,CAAM,KAAK,CAAC,CAAA,KAAM,MAAM,KAAK,CAAA,IAAK,MAAM,CAAC,CAAA;AAAA,IAClD,CAAA,CAAA,MAAQ;AACN,MAAA,OAAO,MAAM,CAAC,CAAA;AAAA,IAChB;AAAA,EACF,CAAC,CAAA;AACD,EAAA,MAAM,MAAA,GAAS,CAAC,CAAA,KAAS;AACvB,IAAA,OAAA,CAAQ,CAAC,CAAA;AACT,IAAA,IAAI;AACF,MAAA,YAAA,CAAa,OAAA,CAAQ,KAAK,CAAC,CAAA;AAAA,IAC7B,CAAA,CAAA,MAAQ;AAAA,IAER;AAAA,EACF,CAAA;AACA,EAAA,OAAO,CAAC,MAAM,MAAM,CAAA;AACtB","file":"toggle-group.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { type VariantProps } from \"class-variance-authority\"\nimport { ToggleGroup as ToggleGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\nimport { toggleVariants } from \"./toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }\n>({\n  size: \"default\",\n  variant: \"default\",\n  spacing: 0,\n  orientation: \"horizontal\",\n})\n\n// With spacing the items are separate toggles, drawn as `toggle` draws them.\n// Joined (spacing 0) they are one segmented control, as the Work console\n// draws its two: `default` is the Work / Dev switch — a round track with the\n// picked segment an amber pill — and `outline` its view switch (Steps |\n// Stats, Open | Resolved) — a 10px bordered track, the picked segment a\n// faint fill.\nconst JOINED_TRACK = {\n  default: \"gap-1 rounded-full bg-foreground/[0.06] p-1\",\n  outline: \"gap-0 rounded-[10px] border border-foreground/10 p-0.5\",\n} as const\n\nconst JOINED_ITEM = {\n  default:\n    \"rounded-full border-transparent bg-transparent px-4 font-semibold text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-amber-400 data-[state=on]:text-stone-950\",\n  outline:\n    \"rounded-[8px] border-transparent bg-transparent px-3 text-[12.5px] font-normal text-muted-foreground hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n} as const\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  spacing = 0,\n  orientation = \"horizontal\",\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants> & {\n    spacing?: number\n    orientation?: \"horizontal\" | \"vertical\"\n  }) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      data-spacing={spacing}\n      data-orientation={orientation}\n      style={{ \"--gap\": spacing } as React.CSSProperties}\n      className={cn(\n        // `w-fit` sizes to content and refuses to shrink, so a segmented\n        // control wider than a phone dragged the whole page sideways rather\n        // than containing itself. Capped at its container, scrolling inside\n        // as a last resort — call sites should still shorten their labels.\n        \"group/toggle-group no-scrollbar flex w-fit max-w-full flex-row items-center gap-[--spacing(var(--gap))] overflow-x-auto data-vertical:flex-col data-vertical:items-stretch\",\n        spacing === 0 && JOINED_TRACK[variant ?? \"default\"],\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider\n        value={{ variant, size, spacing, orientation }}\n      >\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n  const itemVariant = context.variant || variant\n  const itemSize = context.size || size\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={itemVariant}\n      data-size={itemSize}\n      data-spacing={context.spacing}\n      className={cn(\n        \"shrink-0 focus:z-10 focus-visible:z-10\",\n        toggleVariants({ variant: itemVariant, size: itemSize }),\n        context.spacing === 0 && JOINED_ITEM[itemVariant ?? \"default\"],\n        // A joined segment pads its label; an icon segment stays square.\n        itemSize?.startsWith(\"icon\") && \"px-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\n/**\n * A tab's two or three views (Steps | Stats, Members | Recent alerts): the\n * Work view switch. One view is always picked — clicking the picked one\n * again does not clear it.\n */\nfunction ViewSwitch<T extends string>({\n  views,\n  value,\n  onChange,\n  label = \"Show\",\n  className,\n}: {\n  views: readonly { id: T; label: React.ReactNode }[]\n  value: T\n  onChange: (v: T) => void\n  label?: string\n  className?: string\n}) {\n  return (\n    <ToggleGroup\n      type=\"single\"\n      variant=\"outline\"\n      aria-label={label}\n      value={value}\n      onValueChange={(v) => {\n        if (v) onChange(v as T)\n      }}\n      className={className}\n    >\n      {views.map((v) => (\n        <ToggleGroupItem key={v.id} value={v.id}>\n          {v.label}\n        </ToggleGroupItem>\n      ))}\n    </ToggleGroup>\n  )\n}\n\n/** The view last chosen under `key`, else the first; storage may be off. */\nfunction useRememberedView<T extends string>(\n  key: string,\n  views: readonly T[]\n): [T, (v: T) => void] {\n  const [view, setView] = React.useState<T>(() => {\n    try {\n      const saved = localStorage.getItem(key)\n      return views.find((v) => v === saved) ?? views[0]\n    } catch {\n      return views[0]\n    }\n  })\n  const choose = (v: T) => {\n    setView(v)\n    try {\n      localStorage.setItem(key, v)\n    } catch {\n      // A private window keeps the choice for this visit only.\n    }\n  }\n  return [view, choose]\n}\n\nexport { ToggleGroup, ToggleGroupItem, ViewSwitch, useRememberedView }\n"]}

package/dist/toggle.cjs

@@ -1,21 +1,21 @@
 'use strict';
 
-var chunkIVMZANP7_cjs = require('./chunk-IVMZANP7.cjs');
+var chunkILCP5QXL_cjs = require('./chunk-ILCP5QXL.cjs');
 require('./chunk-6YHDDRIM.cjs');
 
 
 
 Object.defineProperty(exports, "FilterPill", {
   enumerable: true,
-  get: function () { return chunkIVMZANP7_cjs.FilterPill; }
+  get: function () { return chunkILCP5QXL_cjs.FilterPill; }
 });
 Object.defineProperty(exports, "Toggle", {
   enumerable: true,
-  get: function () { return chunkIVMZANP7_cjs.Toggle; }
+  get: function () { return chunkILCP5QXL_cjs.Toggle; }
 });
 Object.defineProperty(exports, "toggleVariants", {
   enumerable: true,
-  get: function () { return chunkIVMZANP7_cjs.toggleVariants; }
+  get: function () { return chunkILCP5QXL_cjs.toggleVariants; }
 });
 //# sourceMappingURL=toggle.cjs.map
 //# sourceMappingURL=toggle.cjs.map

package/dist/toggle.d.cts

@@ -6,7 +6,7 @@ import { Toggle as Toggle$1 } from 'radix-ui';
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 /**

package/dist/toggle.d.ts

@@ -6,7 +6,7 @@ import { Toggle as Toggle$1 } from 'radix-ui';
 
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "sm" | "lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;
 /**

package/dist/toggle.js

@@ -1,4 +1,4 @@
-export { FilterPill, Toggle, toggleVariants } from './chunk-CPAFEXKR.js';
+export { FilterPill, Toggle, toggleVariants } from './chunk-WO2SXSNH.js';
 import './chunk-LZGII7SX.js';
 //# sourceMappingURL=toggle.js.map
 //# sourceMappingURL=toggle.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@invergent/ui-sdk",
-  "version": "2.19.1",
+  "version": "2.19.3",
   "description": "Shared theme and UI components for Surogate's web client, chat SDK, desktop and ops console.",
   "license": "AGPL-3.0-only",
   "homepage": "https://github.com/invergent-ai/surogates/tree/master/sdk/ui-sdk#readme",

package/dist/chunk-CPAFEXKR.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toggle.tsx"],"names":["TogglePrimitive"],"mappings":";;;;;AAWA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,oVAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,6NAAA;AAAA,QACF,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,gDAAA;AAAA,QACT,EAAA,EAAI,+CAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACuC;AACrC,EAAA,uBACE,GAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAW,GAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ;AAMA,SAAS,UAAA,CAAW;AAAA,EAClB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAQG;AACD,EAAA,uBACE,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAS,EAAA;AAAA,MACT,eAAA,EAAiB,MAAM,OAAA,EAAQ;AAAA,MAC/B,WAAW,EAAA,CAAG,GAAA,IAAO,CAAC,EAAA,IAAM,cAAc,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-CPAFEXKR.js","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's pressed-state toggles. `default` is the 9px chip its\n// forms use for a choice that is on or off (Once / Repeating, the days of the\n// week): a faint box, amber-tinted once pressed. `outline` is its filter\n// pill: round, bordered, a neutral fill once on. Muted text brightens on\n// hover. Touch keeps 40px or more, a mouse the compact height.\nconst toggleVariants = cva(\n  \"group/toggle inline-flex shrink-0 items-center justify-center gap-1.5 border whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"rounded-[9px] border-foreground/[0.08] bg-foreground/[0.04] font-medium text-muted-foreground hover:text-foreground data-[state=on]:border-amber-500/40 data-[state=on]:bg-amber-500/[0.12] data-[state=on]:text-foreground\",\n        outline:\n          \"rounded-full border-foreground/10 text-muted-foreground hover:text-foreground data-[state=on]:border-foreground/30 data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n      },\n      size: {\n        default: \"min-h-10 px-3 text-[13px] pointer-fine:min-h-8\",\n        sm: \"min-h-9 px-3 text-[12px] pointer-fine:min-h-7\",\n        lg: \"min-h-11 px-4 text-sm pointer-fine:min-h-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\n/**\n * The Work filter pill (a row of them filters a list: \"All channels\",\n * \"Slack 3\"…). An empty filter stays clickable, just quieter.\n */\nfunction FilterPill({\n  on,\n  onClick,\n  dim,\n  className,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof TogglePrimitive.Root>,\n  \"pressed\" | \"onPressedChange\" | \"onClick\"\n> & {\n  on: boolean\n  onClick: () => void\n  /** Nothing behind it yet: still clickable, just quieter. */\n  dim?: boolean\n}) {\n  return (\n    <Toggle\n      variant=\"outline\"\n      size=\"sm\"\n      pressed={on}\n      onPressedChange={() => onClick()}\n      className={cn(dim && !on && \"opacity-55\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, FilterPill, toggleVariants }\n"]}

package/dist/chunk-IVMZANP7.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/toggle.tsx"],"names":["cva","jsx","TogglePrimitive","cn"],"mappings":";;;;;;;AAWA,IAAM,cAAA,GAAiBA,0BAAA;AAAA,EACrB,oVAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EACE,6NAAA;AAAA,QACF,OAAA,EACE;AAAA,OACJ;AAAA,MACA,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,gDAAA;AAAA,QACT,EAAA,EAAI,+CAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS,SAAA;AAAA,MACT,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,MAAA,CAAO;AAAA,EACd,SAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,IAAA,GAAO,SAAA;AAAA,EACP,GAAG;AACL,CAAA,EACuC;AACrC,EAAA,uBACEC,cAAA;AAAA,IAACC,cAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,SAAA,EAAWC,qBAAG,cAAA,CAAe,EAAE,SAAS,IAAA,EAAM,SAAA,EAAW,CAAC,CAAA;AAAA,MACzD,GAAG;AAAA;AAAA,GACN;AAEJ;AAMA,SAAS,UAAA,CAAW;AAAA,EAClB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAQG;AACD,EAAA,uBACEF,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAQ,SAAA;AAAA,MACR,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAS,EAAA;AAAA,MACT,eAAA,EAAiB,MAAM,OAAA,EAAQ;AAAA,MAC/B,WAAWE,oBAAA,CAAG,GAAA,IAAO,CAAC,EAAA,IAAM,cAAc,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-IVMZANP7.cjs","sourcesContent":["import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\n// The Work console's pressed-state toggles. `default` is the 9px chip its\n// forms use for a choice that is on or off (Once / Repeating, the days of the\n// week): a faint box, amber-tinted once pressed. `outline` is its filter\n// pill: round, bordered, a neutral fill once on. Muted text brightens on\n// hover. Touch keeps 40px or more, a mouse the compact height.\nconst toggleVariants = cva(\n  \"group/toggle inline-flex shrink-0 items-center justify-center gap-1.5 border whitespace-nowrap transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"rounded-[9px] border-foreground/[0.08] bg-foreground/[0.04] font-medium text-muted-foreground hover:text-foreground data-[state=on]:border-amber-500/40 data-[state=on]:bg-amber-500/[0.12] data-[state=on]:text-foreground\",\n        outline:\n          \"rounded-full border-foreground/10 text-muted-foreground hover:text-foreground data-[state=on]:border-foreground/30 data-[state=on]:bg-foreground/[0.08] data-[state=on]:font-medium data-[state=on]:text-foreground\",\n      },\n      size: {\n        default: \"min-h-10 px-3 text-[13px] pointer-fine:min-h-8\",\n        sm: \"min-h-9 px-3 text-[12px] pointer-fine:min-h-7\",\n        lg: \"min-h-11 px-4 text-sm pointer-fine:min-h-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\n/**\n * The Work filter pill (a row of them filters a list: \"All channels\",\n * \"Slack 3\"…). An empty filter stays clickable, just quieter.\n */\nfunction FilterPill({\n  on,\n  onClick,\n  dim,\n  className,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof TogglePrimitive.Root>,\n  \"pressed\" | \"onPressedChange\" | \"onClick\"\n> & {\n  on: boolean\n  onClick: () => void\n  /** Nothing behind it yet: still clickable, just quieter. */\n  dim?: boolean\n}) {\n  return (\n    <Toggle\n      variant=\"outline\"\n      size=\"sm\"\n      pressed={on}\n      onPressedChange={() => onClick()}\n      className={cn(dim && !on && \"opacity-55\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, FilterPill, toggleVariants }\n"]}