@ai-matrx/design-system 0.86.349 → 0.86.350

package/dist/carousel.js

@@ -1,14 +1,14 @@
 "use client";
 import {
   IconButton
-} from "./chunk-KYH42WEX.js";
+} from "./chunk-SC3XPADZ.js";
 import "./chunk-6NOLVA4E.js";
 import "./chunk-5IR3BZOS.js";
 import "./chunk-ZRHVA3DL.js";
 import "./chunk-XERGQT2M.js";
 import "./chunk-WQ2QCMMA.js";
-import "./chunk-MIJMP4WI.js";
-import "./chunk-6CDAHINE.js";
+import "./chunk-YRF22M5S.js";
+import "./chunk-UTADJKVR.js";
 import "./chunk-K4XCB576.js";
 import "./chunk-HKLIRHT2.js";
 import "./chunk-DRSBLHOF.js";
@@ -20,14 +20,14 @@ import "./chunk-NDTDBBMM.js";
 import {
   holdDragCursor
 } from "./chunk-LEPD6TV7.js";
-import "./chunk-6QKT52FR.js";
+import "./chunk-MTE6N7XU.js";
 import "./chunk-WFBPCMPF.js";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger
 } from "./chunk-OPF265PU.js";
-import "./chunk-XTP6HOB6.js";
+import "./chunk-6XNYYROM.js";
 import "./chunk-BD77DHUO.js";
 import "./chunk-BKCJUFD3.js";
 import {

package/dist/chunk-4WSXAP24.js

@@ -0,0 +1,51 @@
+"use client";
+
+// src/notice-stack.ts
+var NOTICE_STACK = {
+  /** The corner every notice floats in. */
+  corner: "top-right",
+  /** Cards shown at once; the rest fold into "N more". */
+  maxVisible: 3,
+  /** Info and success: gone after this long. */
+  infoMs: 4e3,
+  /** Errors and warnings: stay until dismissed, or this long at most. */
+  errorMs: 3e4,
+  /** The card's width: small, never the window's. */
+  widthRem: 22
+};
+function noticeKey(tone, title, message) {
+  const text = (v) => typeof v === "string" || typeof v === "number" ? String(v).trim() : "";
+  return `${tone}\0${text(title)}\0${text(message)}`;
+}
+function collapseNotices(items, keyOf) {
+  const groups = [];
+  const byKey = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const key = keyOf(item);
+    const found = key !== null ? byKey.get(key) : void 0;
+    if (found) {
+      found.members.push(item);
+      continue;
+    }
+    const group = { key, members: [item] };
+    groups.push(group);
+    if (key !== null) byKey.set(key, group);
+  }
+  return groups.map((g) => ({ item: g.members[g.members.length - 1], members: g.members, count: g.members.length }));
+}
+function visibleNotices(groups, max = NOTICE_STACK.maxVisible) {
+  if (groups.length <= max) return { shown: [...groups], folded: 0 };
+  return { shown: groups.slice(groups.length - max), folded: groups.length - max };
+}
+function noticeLifetimeMs(tone) {
+  return tone === "danger" || tone === "warning" || tone === "error" ? NOTICE_STACK.errorMs : NOTICE_STACK.infoMs;
+}
+
+export {
+  NOTICE_STACK,
+  noticeKey,
+  collapseNotices,
+  visibleNotices,
+  noticeLifetimeMs
+};
+//# sourceMappingURL=chunk-4WSXAP24.js.map

package/dist/chunk-4WSXAP24.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/notice-stack.ts"],"sourcesContent":["/**\n * @ai-matrx/design-system/notice-stack — THE ONE NOTICE LOOK AND STACK RULE, for the web and Matrx 2.\n *\n * Arman, 2026-10-23, looking at two full-width red bars across Matrx 2 Cloud Chat: \"Let's eliminate\n * this terrible pattern of having giant errors that shit the entire ui. If we're going to have a\n * place for errors, it should be a small something that resembles errors from a normal macos\".\n *\n * Champion: the macOS notification banner. A small rounded card of translucent material in the\n * window's TOP-RIGHT corner (where macOS puts every notification, so the eye already looks there;\n * the bottom of our windows holds the composer and the list's foot, which a notice must not sit on),\n * the tone's icon, a one-line title, an optional second line, at most one action, and ×.\n *\n * The stack rule, the same on both hosts:\n *   - identical notices (same tone, title and line) collapse into ONE card with a count;\n *   - at most 3 cards show; the rest fold into \"N more\";\n *   - info and success go after NOTICE_STACK.infoMs; errors and warnings stay until dismissed\n *     or until NOTICE_STACK.errorMs (long, so a notice nobody saw does not sit there for ever).\n *\n * The desktop renders it through `Notices` + `Banner` (desktop/layout.tsx, desktop/state.tsx); the\n * web through its one sonner Toaster (matrx-frontend components/ui/sonner.tsx), which reads these\n * constants and keys every toast with `noticeKey` so the same notice never stacks twice.\n */\n\nexport const NOTICE_STACK = {\n  /** The corner every notice floats in. */\n  corner: \"top-right\",\n  /** Cards shown at once; the rest fold into \"N more\". */\n  maxVisible: 3,\n  /** Info and success: gone after this long. */\n  infoMs: 4000,\n  /** Errors and warnings: stay until dismissed, or this long at most. */\n  errorMs: 30000,\n  /** The card's width: small, never the window's. */\n  widthRem: 22,\n} as const;\n\nexport type NoticeStackTone = \"neutral\" | \"info\" | \"warning\" | \"danger\" | \"success\";\n\n/** The identity two notices share when they say the same thing (tone, title, line). */\nexport function noticeKey(tone: string, title: unknown, message?: unknown): string {\n  const text = (v: unknown): string => (typeof v === \"string\" || typeof v === \"number\" ? String(v).trim() : \"\");\n  return `${tone}\\u0000${text(title)}\\u0000${text(message)}`;\n}\n\nexport interface CollapsedNotice<T> {\n  /** The latest notice of the group (its dismiss and action are the live ones). */\n  readonly item: T;\n  /** Every notice the group holds, oldest first. */\n  readonly members: readonly T[];\n  /** How many identical notices it stands for. */\n  readonly count: number;\n}\n\n/**\n * Identical notices become one with a count, in the order each first appeared. A notice whose key\n * is null (a rich one that says nothing comparable) stands alone.\n */\nexport function collapseNotices<T>(items: readonly T[], keyOf: (item: T) => string | null): CollapsedNotice<T>[] {\n  const groups: { key: string | null; members: T[] }[] = [];\n  const byKey = new Map<string, { key: string | null; members: T[] }>();\n  for (const item of items) {\n    const key = keyOf(item);\n    const found = key !== null ? byKey.get(key) : undefined;\n    if (found) {\n      found.members.push(item);\n      continue;\n    }\n    const group = { key, members: [item] };\n    groups.push(group);\n    if (key !== null) byKey.set(key, group);\n  }\n  return groups.map((g) => ({ item: g.members[g.members.length - 1] as T, members: g.members, count: g.members.length }));\n}\n\n/** The cards on screen and how many fold away (the newest show). */\nexport function visibleNotices<T>(groups: readonly T[], max: number = NOTICE_STACK.maxVisible): { shown: T[]; folded: number } {\n  if (groups.length <= max) return { shown: [...groups], folded: 0 };\n  return { shown: groups.slice(groups.length - max), folded: groups.length - max };\n}\n\n/** How long a notice of this tone stays (ms; Infinity never happens: errors cap at errorMs). */\nexport function noticeLifetimeMs(tone: NoticeStackTone | \"error\"): number {\n  return tone === \"danger\" || tone === \"warning\" || tone === \"error\" ? NOTICE_STACK.errorMs : NOTICE_STACK.infoMs;\n}\n"],"mappings":";;;AAuBO,IAAM,eAAe;AAAA;AAAA,EAE1B,QAAQ;AAAA;AAAA,EAER,YAAY;AAAA;AAAA,EAEZ,QAAQ;AAAA;AAAA,EAER,SAAS;AAAA;AAAA,EAET,UAAU;AACZ;AAKO,SAAS,UAAU,MAAc,OAAgB,SAA2B;AACjF,QAAM,OAAO,CAAC,MAAwB,OAAO,MAAM,YAAY,OAAO,MAAM,WAAW,OAAO,CAAC,EAAE,KAAK,IAAI;AAC1G,SAAO,GAAG,IAAI,KAAS,KAAK,KAAK,CAAC,KAAS,KAAK,OAAO,CAAC;AAC1D;AAeO,SAAS,gBAAmB,OAAqB,OAAyD;AAC/G,QAAM,SAAiD,CAAC;AACxD,QAAM,QAAQ,oBAAI,IAAkD;AACpE,aAAW,QAAQ,OAAO;AACxB,UAAM,MAAM,MAAM,IAAI;AACtB,UAAM,QAAQ,QAAQ,OAAO,MAAM,IAAI,GAAG,IAAI;AAC9C,QAAI,OAAO;AACT,YAAM,QAAQ,KAAK,IAAI;AACvB;AAAA,IACF;AACA,UAAM,QAAQ,EAAE,KAAK,SAAS,CAAC,IAAI,EAAE;AACrC,WAAO,KAAK,KAAK;AACjB,QAAI,QAAQ,KAAM,OAAM,IAAI,KAAK,KAAK;AAAA,EACxC;AACA,SAAO,OAAO,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,SAAS,CAAC,GAAQ,SAAS,EAAE,SAAS,OAAO,EAAE,QAAQ,OAAO,EAAE;AACxH;AAGO,SAAS,eAAkB,QAAsB,MAAc,aAAa,YAA4C;AAC7H,MAAI,OAAO,UAAU,IAAK,QAAO,EAAE,OAAO,CAAC,GAAG,MAAM,GAAG,QAAQ,EAAE;AACjE,SAAO,EAAE,OAAO,OAAO,MAAM,OAAO,SAAS,GAAG,GAAG,QAAQ,OAAO,SAAS,IAAI;AACjF;AAGO,SAAS,iBAAiB,MAAyC;AACxE,SAAO,SAAS,YAAY,SAAS,aAAa,SAAS,UAAU,aAAa,UAAU,aAAa;AAC3G;","names":[]}

package/dist/{chunk-XTP6HOB6.js → chunk-6XNYYROM.js}

@@ -462,4 +462,4 @@ export {
   Switch,
   Textarea
 };
-//# sourceMappingURL=chunk-XTP6HOB6.js.map
+//# sourceMappingURL=chunk-6XNYYROM.js.map

package/dist/chunk-6XNYYROM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/controls/controls.tsx"],"sourcesContent":["\"use client\";\n\n/**\n * THE ONE CONTROL — the settled control family (owner, 2026-10-02/03).\n *\n * Every control here is the same object: 28px visible height, capsule, 13px/500\n * label, 16px glyph inset 6px, text inset 10px, and HALF A GAP (3px) of its own\n * on each side so containers add no gap. There is NO size prop: agents get no\n * choice. Geometry and color live in `controls.css`, locked inside\n * `@layer matrx-tap-lock` (`!important` in the host's first layer), so a call\n * site's `className` can place a control (width, flex, grid, position) but can\n * never restyle it. The rare big control is a different component behind a\n * `// ui-exception:` comment, never a prop.\n *\n * Built on the package's own internals — Radix Slot / Switch / DropdownMenu, the\n * cursor law's `swallowClick`, `SelectChevron`, the package icons — so nothing\n * here is a second implementation of a behavior the package already owns.\n */\n\nimport * as SwitchPrimitives from \"@radix-ui/react-switch\";\nimport { Slot, Slottable } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\n\nimport { swallowClick } from \"../button\";\nimport { cn } from \"../cn\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../dropdown-menu\";\nimport { MagnifyingGlassIcon, PlusIcon } from \"../icons\";\nimport { SelectChevron } from \"../select\";\nimport { isIconOnly } from \"./icon-only\";\nimport { boxStyle, useAutoGrow, useMergedTextareaRef } from \"../textarea\";\n\n/* ------------------------------------------------------------------ */\n/* Layout: the row and the scope                                        */\n/* ------------------------------------------------------------------ */\n\nexport interface ControlRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Keep the controls on one line (a row's trailing actions). */\n  nowrap?: boolean;\n}\n\n/** A row of controls. It adds no gap: each control carries its own half-gap. */\nexport const ControlRow = React.forwardRef<HTMLDivElement, ControlRowProps>(\n  ({ className, nowrap, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-matrx-control-row=\"\"\n      data-nowrap={nowrap ? \"\" : undefined}\n      className={cn(\"matrx-control-row\", className)}\n      {...props}\n    />\n  ),\n);\nControlRow.displayName = \"ControlRow\";\n\n/**\n * Until the tap tokens move to 28/34 app-wide (the rollout), a tap button\n * inside a ControlScope matches the controls beside it: a 28px pill in a 34px\n * box. Wrap a page (or a region) that mixes tap buttons and controls.\n */\nexport const ControlScope = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  (props, ref) => <div ref={ref} data-matrx-controls=\"\" {...props} />,\n);\nControlScope.displayName = \"ControlScope\";\n\n/**\n * THE CONTAINER a collapsing control measures (`Button collapse=\"container\"`).\n * A host declares it on the box whose WIDTH decides — a list pane, a panel,\n * never the viewport: beside a chat panel a 1024px screen holds a 540px list.\n * `className={CONTROLS_CONTAINER_CLASS}`, or add the name to the box's own\n * `container-name` when it already names a container (`list matrx-controls`).\n */\nexport const CONTROLS_CONTAINER_NAME = \"matrx-controls\";\nexport const CONTROLS_CONTAINER_CLASS = \"matrx-controls-container\";\n/** Below this container width a `collapse=\"container\"` button is its icon alone (48rem). */\nexport const CONTROLS_COLLAPSE_BELOW_REM = 48;\n\n/* ------------------------------------------------------------------ */\n/* Button                                                               */\n/* ------------------------------------------------------------------ */\n\n/**\n * Tone, never size. `success` is the solid confirm-a-good-outcome fill (approve,\n * publish, mark done); `link` is a text action at the control's height — no\n * fill, no border, primary ink, underline on hover (an inline \"View all\").\n */\nexport type ControlVariant = \"primary\" | \"quiet\" | \"outline\" | \"danger\" | \"success\" | \"link\" | \"meta\";\n\n/**\n * THE NAMED CONTROL WIDTHS (0.68.22) — a button, field or select trigger that should not fill\n * its row takes one of these instead of a pasted `w-40`. Derived from the call sites:\n * `xs` 6rem (a unit, a short enum), `sm` 8rem, `md` 10rem (a date, a status), `lg` 14rem (a\n * name, an account), `xl` 20rem (a search, a URL). Never wider than its container.\n */\nexport type ControlWidth = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\ninterface ButtonBase extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, \"children\"> {\n  /** Tone, never size. Default `outline`. */\n  variant?: ControlVariant;\n  /** A status tint from the role tokens (the Badge's), for a button that\n   *  reports a state — a drift door, an alert count. Default: none. */\n  tone?: BadgeTone;\n  /** Leading 16px glyph. */\n  icon?: React.ReactNode;\n  /** Trailing 16px glyph (a menu chevron, an external-link mark). */\n  iconEnd?: React.ReactNode;\n  /** Render the one child element (a link) with the button's skin. */\n  asChild?: boolean;\n  /**\n   * `\"container\"`: below 48rem of the nearest `matrx-controls` container\n   * (CONTROLS_CONTAINER_NAME) the button is its leading `icon` alone — a 28px\n   * circle; the label stays its accessible name and its tooltip. Needs `icon`;\n   * without one it never collapses. Outside such a container it never does.\n   */\n  collapse?: \"container\";\n  /**\n   * A TOGGLE (a choice in a set, a mode, a tab-like switch): `true` is on —\n   * the accent fill and full ink; `false` is off — no fill, quiet ink. Sets\n   * `aria-pressed`. Omit for an ordinary action.\n   */\n  pressed?: boolean;\n  /**\n   * A count or a dot on the button's top-right corner, for something waiting\n   * behind it (items added, unread). A number draws the count (99+ above 99;\n   * 0 draws nothing); `true` draws an 8px dot. On a button with a text label\n   * the count sits in the row after the label instead (never over it). Name it in `aria-label` too —\n   * the mark is decoration.\n   */\n  badge?: number | boolean;\n  /**\n   * The glyph's own status ink, for a glyph whose COLOR carries meaning (the\n   * green check after a copy, an amber debug bug) while the button stays\n   * quiet. Tints only the icon(s), never the fill. Default: none.\n   */\n  glyphTone?: GlyphTone;\n  /**\n   * A removing act (clear, remove, disconnect): muted until hover,\n   * destructive on hover — the delete tier-1 skin on any glyph or label.\n   * Quiet variant only.\n   */\n  removes?: boolean;\n  /**\n   * MIXED CONTENT (0.68.12): a short muted fact after the label — a count, a\n   * size, a shortcut, a \"3 of 12\" — in the 12px secondary ink. The button\n   * stays 28px; the fact is part of the button, never a second element styled\n   * beside it. Never a sentence.\n   */\n  meta?: React.ReactNode;\n  /** A named width instead of the label's own (see `ControlWidth`). */\n  width?: ControlWidth;\n  /**\n   * THE INVITING-PAGE CALL TO ACTION (0.68.22): a 44px capsule with a 16px/600 label and a\n   * 24px inset — the size a marketing hero, a module landing or a kit's front door asks for.\n   * Inviting pages are never densified; functional pages never use it. A `primary` hero\n   * carries a soft primary glow.\n   */\n  hero?: boolean;\n}\n/** The status inks a glyph may carry (the role tokens). */\nexport type GlyphTone = \"success\" | \"warning\" | \"destructive\" | \"info\" | \"primary\";\ninterface LabelledButton extends ButtonBase {\n  children: React.ReactNode;\n}\ninterface IconOnlyButton extends ButtonBase {\n  children?: undefined;\n  /** An icon-only button must say what it does. */\n  \"aria-label\": string;\n}\nexport type ButtonProps = LabelledButton | IconOnlyButton;\n\nfunction glyphSlot(icon: unknown, iconEnd: unknown, label: unknown): string | undefined {\n  if (!label && (icon || iconEnd)) return \"only\";\n  if (icon && iconEnd) return \"both\";\n  if (icon) return \"start\";\n  if (iconEnd) return \"end\";\n  return undefined;\n}\n\n/**\n * THE button: primary / quiet / outline / danger / success / link, one 28px geometry; text,\n * icon + text, or icon-only (a 28px circle). `asChild` puts the skin on a link.\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant = \"outline\", tone, icon, iconEnd, asChild = false, collapse, pressed, badge, glyphTone, removes, meta, width, hero, children, onClick, type, ...props }, ref) => {\n    const Component = asChild ? Slot : \"button\";\n    const badgeText =\n      typeof badge === \"number\" ? (badge > 0 ? (badge > 99 ? \"99+\" : String(badge)) : null) : badge ? \"\" : null;\n    const ariaDisabled = props[\"aria-disabled\"];\n    const disabledChild = asChild && Boolean(props.disabled);\n    const inert = disabledChild || ariaDisabled === true || ariaDisabled === \"true\";\n    // asChild: the child element carries the label, so the glyph slot reads\n    // the child's own children.\n    const label = asChild && React.isValidElement<{ children?: React.ReactNode }>(children)\n      ? children.props.children\n      : children;\n    const collapses = collapse === \"container\" && Boolean(icon) && Boolean(label);\n    return (\n      <Component\n        ref={ref}\n        type={asChild ? undefined : (type ?? \"button\")}\n        data-matrx-control=\"button\"\n        data-variant={variant}\n        data-tone={tone && tone !== \"neutral\" ? tone : undefined}\n        data-glyph={glyphSlot(icon, iconEnd, label)}\n        data-collapse={collapses ? \"container\" : undefined}\n        data-pressed={pressed === undefined ? undefined : pressed ? \"true\" : \"false\"}\n        aria-pressed={pressed}\n        data-badge={badgeText === null ? undefined : badgeText === \"\" ? \"dot\" : \"count\"}\n        // A labeled button carries its count IN the row after the label: the\n        // corner count sat over the label's last letter (\"HR 28\" on /tasks).\n        data-badge-place={badgeText && label ? \"inline\" : undefined}\n        data-glyph-tone={glyphTone}\n        data-delete={removes ? \"\" : undefined}\n        data-width={width}\n        data-hero={hero ? \"\" : undefined}\n        className={cn(\"matrx-control matrx-control-button matrx-glyph-trim\", className)}\n        // A collapsed button still says what it does on hover.\n        title={collapses && typeof label === \"string\" && props.title === undefined ? label : undefined}\n        {...props}\n        aria-disabled={disabledChild ? true : ariaDisabled}\n        tabIndex={disabledChild ? -1 : props.tabIndex}\n        onClick={inert ? swallowClick : onClick}\n      >\n        {icon}\n        <Slottable>\n          {/* A text label NEVER spills past its button (owner, 2026-10-05: a\n              long chat title ran under the mode switch beside it). It sits in\n              its own box so a capped button ellipsizes instead of overflowing. */}\n          {!asChild && (typeof children === \"string\" || typeof children === \"number\") ? (\n            <span className=\"matrx-control-button-label\">{children}</span>\n          ) : (\n            children\n          )}\n        </Slottable>\n        {meta === undefined || meta === null || meta === false ? null : (\n          <span className=\"matrx-control-button-meta\">{meta}</span>\n        )}\n        {iconEnd}\n        {badgeText === null ? null : (\n          <span className=\"matrx-control-button-badge\" aria-hidden=\"true\">\n            {badgeText}\n          </span>\n        )}\n      </Component>\n    );\n  },\n);\nButton.displayName = \"Button\";\n\n/** A split button: two Buttons joined — the act, and its menu of variants. */\nexport const SplitButton = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div ref={ref} role=\"group\" data-matrx-control=\"split\" className={cn(\"matrx-control-split\", className)} {...props} />\n  ),\n);\nSplitButton.displayName = \"SplitButton\";\n\n/* ------------------------------------------------------------------ */\n/* Field (input capsule) and SearchField                                */\n/* ------------------------------------------------------------------ */\n\nexport interface FieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n  /** Leading 16px glyph. */\n  icon?: React.ReactNode;\n  /** Trailing content inside the capsule — a clear button, a unit. */\n  end?: React.ReactNode;\n  /** A named width instead of filling the row (see `ControlWidth`). */\n  width?: ControlWidth;\n  /**\n   * THE INVITING-PAGE INPUT: a 56px capsule with an 18px value and a 24px inset — the big,\n   * friendly field a welcome / onboarding front door asks for (pairs with Button `hero`).\n   * Inviting pages only; functional pages never use it.\n   */\n  hero?: boolean;\n  /**\n   * THE LEADING SEARCH: a 48px filled capsule — no frame, the muted fill, a 16px value, a 20px\n   * glyph — that turns the card color with a soft lift on focus. The one search a home page leads\n   * with (a file home's search, as on Google Docs / Drive). One per page; never in a form or toolbar.\n   */\n  filled?: boolean;\n}\n\n/** The input capsule. `className`/`style` place the capsule (width, flex). */\nexport const Field = React.forwardRef<HTMLInputElement, FieldProps>(\n  ({ className, style, icon, end, width, hero, filled, ...props }, ref) => (\n    <label\n      data-matrx-control=\"field\"\n      data-glyph={icon ? \"start\" : undefined}\n      data-width={width}\n      data-hero={hero ? \"\" : undefined}\n      data-filled={filled ? \"\" : undefined}\n      className={cn(\"matrx-control matrx-control-field\", className)}\n      style={style}\n    >\n      {icon}\n      <input ref={ref} {...props} />\n      {end}\n    </label>\n  ),\n);\nField.displayName = \"Field\";\n\n/** The search capsule: a Field with the magnifier, `type=\"search\"`. */\nexport const SearchField = React.forwardRef<HTMLInputElement, Omit<FieldProps, \"icon\">>(\n  ({ placeholder = \"Search\", ...props }, ref) => (\n    <Field\n      ref={ref}\n      type=\"search\"\n      icon={<MagnifyingGlassIcon aria-hidden=\"true\" />}\n      placeholder={placeholder}\n      aria-label={props[\"aria-label\"] ?? placeholder}\n      {...props}\n    />\n  ),\n);\nSearchField.displayName = \"SearchField\";\n\n/* ------------------------------------------------------------------ */\n/* Select — a capsule trigger over a radio menu                         */\n/* ------------------------------------------------------------------ */\n\nexport interface SelectOption<T extends string = string> {\n  value: T;\n  label: string;\n  /** 11px trailing text in the menu (a count, a shortcut). */\n  meta?: string;\n  /** Muted text right after the label, menu and trigger alike: what tells two same-named options apart (a short id, an owner). */\n  hint?: string;\n  /** A section heading: the menu shows it (foreground weight) above the first option of each consecutive run. */\n  group?: string;\n  /** Shown but not choosable (an unavailable tool, a sentinel the URL set). */\n  disabled?: boolean;\n}\n\nexport interface SelectProps<T extends string = string> {\n  value: T;\n  options: readonly SelectOption<T>[];\n  onValueChange: (value: T) => void;\n  \"aria-label\": string;\n  /** Leading 16px glyph on the trigger. */\n  icon?: React.ReactNode;\n  align?: \"start\" | \"end\";\n  disabled?: boolean;\n  /**\n   * `field` (default): the capsule a form row uses. `inline`: the value as text with a small chevron,\n   * no capsule — for a choice that sits inside a dense row or a toolbar sentence (\"Full ⌄\"), where a\n   * row of capsules reads as clutter (Arman, 2026-10-14).\n   */\n  variant?: \"field\" | \"inline\";\n  /**\n   * A search row at the top of the menu once there are at least this many options (a long list of\n   * organizations). It matches label, hint and group. Omitted: never.\n   */\n  searchAt?: number;\n  /** Placement only (width, flex). */\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function Select<T extends string = string>({\n  value,\n  options,\n  onValueChange,\n  icon,\n  align = \"start\",\n  disabled,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n  variant = \"field\",\n  searchAt,\n}: SelectProps<T>) {\n  const current = options.find((o) => o.value === value);\n  const [query, setQuery] = React.useState(\"\");\n  const searchable = searchAt !== undefined && options.length >= searchAt;\n  const q = searchable ? query.trim().toLowerCase() : \"\";\n  const shown = q ? options.filter((o) => [o.label, o.hint, o.group].some((t) => t?.toLowerCase().includes(q))) : options;\n  return (\n    <DropdownMenu onOpenChange={(open) => !open && setQuery(\"\")}>\n      <DropdownMenuTrigger asChild disabled={disabled}>\n        <button\n          type=\"button\"\n          data-matrx-control=\"select\"\n          data-variant={variant === \"inline\" ? \"inline\" : undefined}\n          data-glyph={icon ? \"start\" : undefined}\n          className={cn(\"matrx-control matrx-control-select\", className)}\n          style={style}\n          aria-label={ariaLabel}\n        >\n          <span className=\"matrx-control-select-value\">\n            {icon}\n            <span>{current?.label ?? value}</span>\n            {current?.hint ? <span className=\"text-muted-foreground\" data-select-hint=\"\">{current.hint}</span> : null}\n          </span>\n          <SelectChevron />\n        </button>\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align={align} className=\"max-h-80 w-max min-w-[max(10rem,var(--radix-dropdown-menu-trigger-width))] max-w-[min(24rem,var(--radix-dropdown-menu-content-available-width))] overflow-y-auto\">\n        {searchable ? (\n          <div className=\"sticky top-0 z-10 bg-popover p-1\" data-select-search=\"\">\n            <SearchField\n              className=\"w-full\"\n              value={query}\n              autoFocus\n              aria-label={`Search ${ariaLabel}`}\n              onChange={(e) => setQuery(e.target.value)}\n              // The menu's type-ahead never takes the letters; arrows and Escape still drive the menu.\n              onKeyDown={(e) => {\n                if (e.key !== \"ArrowDown\" && e.key !== \"ArrowUp\" && e.key !== \"Escape\" && e.key !== \"Tab\") e.stopPropagation();\n              }}\n            />\n          </div>\n        ) : null}\n        {searchable && shown.length === 0 ? <div className=\"px-2 py-1.5 text-[0.8125rem] text-muted-foreground\" role=\"status\">No match</div> : null}\n        <DropdownMenuRadioGroup value={value} onValueChange={(v) => onValueChange(v as T)}>\n          {shown.map((o, i) => (\n            <React.Fragment key={o.value}>\n              {o.group && o.group !== shown[i - 1]?.group ? (\n                <>\n                  {i > 0 ? <DropdownMenuSeparator /> : null}\n                  <DropdownMenuLabel>{o.group}</DropdownMenuLabel>\n                </>\n              ) : null}\n              <DropdownMenuRadioItem value={o.value} disabled={o.disabled === true} className=\"text-[0.8125rem]\">\n                {/* The label truncates; the hint never does (it is what tells two same-named options apart). */}\n                <span className=\"flex min-w-0 flex-1 items-baseline\">\n                  <span className=\"min-w-0 truncate\">{o.label}</span>\n                  {o.hint ? <span className=\"ml-1.5 shrink-0 text-muted-foreground\" data-select-hint=\"\">{o.hint}</span> : null}\n                </span>\n                {o.meta ? <span className=\"ml-3 text-[0.6875rem] text-muted-foreground\">{o.meta}</span> : null}\n              </DropdownMenuRadioItem>\n            </React.Fragment>\n          ))}\n        </DropdownMenuRadioGroup>\n      </DropdownMenuContent>\n    </DropdownMenu>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* SegmentedControl and Tabs                                            */\n/* ------------------------------------------------------------------ */\n\nexport interface SegmentOption<T extends string = string> {\n  value: T;\n  label: React.ReactNode;\n  /** An 11px count after the label. */\n  count?: number | null;\n  ariaLabel?: string;\n  /** Hover text (an icon-only segment's name). */\n  title?: string;\n  disabled?: boolean;\n}\n\nexport interface SegmentedControlProps<T extends string = string> {\n  /** The selected segment; `null` = none is selected (an optional choice). */\n  value: T | null;\n  onValueChange: (value: T) => void;\n  data: readonly SegmentOption<T>[];\n  \"aria-label\": string;\n  /** The segments share the row's whole width equally (a full-width choice: levels, modes). */\n  fill?: boolean;\n  /** Placement only. */\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction SegmentItems<T extends string>({\n  data,\n  value,\n  onValueChange,\n  role,\n}: {\n  data: readonly SegmentOption<T>[];\n  value: T | null;\n  onValueChange: (value: T) => void;\n  role: \"tab\" | undefined;\n}) {\n  return (\n    <>\n      {data.map((o) => {\n        const on = o.value === value;\n        return (\n          <button\n            key={o.value}\n            type=\"button\"\n            role={role}\n            aria-selected={role ? on : undefined}\n            aria-pressed={role ? undefined : on}\n            aria-label={o.ariaLabel}\n            title={o.title}\n            disabled={o.disabled}\n            data-state={on ? \"on\" : \"off\"}\n            data-icon-only={o.count == null && isIconOnly(o.label) ? \"\" : undefined}\n            className=\"matrx-control-segment\"\n            onClick={() => onValueChange(o.value)}\n          >\n            {o.label}\n            {o.count != null ? <span className=\"matrx-control-count\">{o.count}</span> : null}\n          </button>\n        );\n      })}\n    </>\n  );\n}\n\n/** The capsule toggle group: a muted track, the selected thumb inset 2px. */\nexport function SegmentedControl<T extends string = string>({\n  value,\n  onValueChange,\n  data,\n  fill,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n}: SegmentedControlProps<T>) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      data-matrx-control=\"segmented\"\n      data-fill={fill ? \"\" : undefined}\n      className={cn(\"matrx-control matrx-control-segmented\", className)}\n      style={style}\n    >\n      <SegmentItems data={data} value={value} onValueChange={onValueChange} role={undefined} />\n    </div>\n  );\n}\n\nexport interface TabsProps<T extends string = string> extends SegmentedControlProps<T> {\n  /** `underline` for page sections (default); `capsule` for filters. */\n  variant?: \"underline\" | \"capsule\";\n  /** Underline tabs draw their own hairline (default). Pass `false` when the row the tabs\n   *  sit in already draws it — the selected underline then lands on that row's rule. */\n  rule?: boolean;\n  /** Underline tabs inside a framed panel (a card, a bordered box): the labels start at the\n   *  panel's 12px content inset while the hairline still runs edge to edge. Page-level tabs\n   *  stay flush with the page gutter (default). Arman, 2026-10-21. */\n  inset?: boolean;\n}\n\n/** Tabs: underline for page sections, capsule for filters. */\nexport function Tabs<T extends string = string>({\n  variant = \"underline\",\n  rule = true,\n  inset = false,\n  value,\n  onValueChange,\n  data,\n  className,\n  style,\n  \"aria-label\": ariaLabel,\n}: TabsProps<T>) {\n  if (variant === \"capsule\") {\n    return (\n      <div\n        role=\"tablist\"\n        aria-label={ariaLabel}\n        data-matrx-control=\"tabs\"\n        className={cn(\"matrx-control matrx-control-segmented\", className)}\n        style={style}\n      >\n        <SegmentItems data={data} value={value} onValueChange={onValueChange} role=\"tab\" />\n      </div>\n    );\n  }\n  return (\n    <div\n      role=\"tablist\"\n      aria-label={ariaLabel}\n      data-matrx-control=\"tabs\"\n      data-rule={rule ? undefined : \"none\"}\n      data-inset={inset ? \"\" : undefined}\n      className={cn(\"matrx-control-tabs\", className)}\n      style={style}\n    >\n      {data.map((o) => (\n        <button\n          key={o.value}\n          type=\"button\"\n          role=\"tab\"\n          aria-selected={o.value === value}\n          aria-label={o.ariaLabel}\n          disabled={o.disabled}\n          className=\"matrx-control-tab\"\n          onClick={() => onValueChange(o.value)}\n        >\n          {o.label}\n          {o.count != null ? <span className=\"matrx-control-count\">{o.count}</span> : null}\n        </button>\n      ))}\n    </div>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* Badge                                                                */\n/* ------------------------------------------------------------------ */\n\nexport type BadgeTone = \"neutral\" | \"primary\" | \"success\" | \"warning\" | \"destructive\" | \"info\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** A status tint from the role tokens. Default `neutral` (plain outline). */\n  tone?: BadgeTone;\n  /** A 12px glyph before the label, 4px gap, in the badge's own tone color. */\n  icon?: React.ReactNode;\n}\n\n/** Outline, 18px, 11px text, clamped to one line (≤20rem) — never a sentence. */\nexport function Badge({ tone = \"neutral\", icon, className, children, ...props }: BadgeProps) {\n  return (\n    <span\n      data-matrx-control=\"badge\"\n      data-tone={tone}\n      className={cn(\"matrx-control-badge\", className)}\n      title={typeof children === \"string\" ? children : undefined}\n      {...props}\n    >\n      {icon ? (\n        <span className=\"matrx-control-badge-icon\" aria-hidden=\"true\">\n          {icon}\n        </span>\n      ) : null}\n      <span>{children}</span>\n    </span>\n  );\n}\n\n/* ------------------------------------------------------------------ */\n/* Chip and ChipSet                                                     */\n/* ------------------------------------------------------------------ */\n\n/**\n * The status tones (the Badge's) plus a FIXED set of categorical hues, each a\n * token pair in `controls.css` (`--matrx-chip-<hue>`, stepped for dark). A\n * feature maps its kinds onto these through ONE table of its own\n * (`kind → ChipTone`) — never a class string.\n */\nexport type ChipHue =\n  | \"sky\"\n  | \"blue\"\n  | \"indigo\"\n  | \"violet\"\n  | \"fuchsia\"\n  | \"rose\"\n  | \"orange\"\n  | \"amber\"\n  | \"lime\"\n  | \"emerald\"\n  | \"teal\"\n  | \"cyan\"\n  | \"slate\";\nexport type ChipTone = BadgeTone | ChipHue;\n\n/** Every tone a chip accepts, in a fixed order (tests, pickers, demos). */\nexport const CHIP_TONES: readonly ChipTone[] = [\n  \"neutral\",\n  \"primary\",\n  \"success\",\n  \"warning\",\n  \"destructive\",\n  \"info\",\n  \"sky\",\n  \"blue\",\n  \"indigo\",\n  \"violet\",\n  \"fuchsia\",\n  \"rose\",\n  \"orange\",\n  \"amber\",\n  \"lime\",\n  \"emerald\",\n  \"teal\",\n  \"cyan\",\n  \"slate\",\n] as const;\n\nexport interface ChipProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, \"children\"> {\n  /** The one line of text. Truncates; the full text is the tooltip. */\n  label: string;\n  /** `item` (default): an existing thing, tinted. `add`: a suggestion to make\n   *  one — dashed, quiet, with the package's own leading `+`. */\n  variant?: \"item\" | \"add\";\n  /** A named tone, never a class. Default `neutral`. Ignored by `add`. */\n  tone?: ChipTone;\n  /** Leading glyph (drawn 14px, optically trimmed). */\n  icon?: React.ReactNode;\n  /** Put the chip's skin on the one child element (a link or a button); the\n   *  child carries no children of its own — the chip draws glyph + label. */\n  asChild?: boolean;\n  /**\n   * A FILTER chip (a toggle in a set of choices): `true` is on — tinted in its\n   * `tone` (default `primary`); `false` is off — untinted outline, quiet ink.\n   * Sets `aria-pressed`. Use with `asChild` on a `<button>`. Omit for a tag.\n   */\n  pressed?: boolean;\n  children?: React.ReactElement;\n}\n\n/**\n * THE chip: a tag that names a thing (a format, a kind, a status, a source).\n * ONE 24px height, one 6px radius, one 12px/500 label, 14px glyph, matched\n * insets, single line with an ellipsis and a tooltip, and the controls' 3px\n * half-gap of its own so a `ChipSet` adds none. Geometry and tint are locked\n * in `controls.css`; a call site may place it, never restyle it.\n */\nexport const Chip = React.forwardRef<HTMLSpanElement, ChipProps>(\n  ({ label, variant = \"item\", tone, icon, asChild = false, pressed, children, className, title, ...props }, ref) => {\n    const Component = asChild ? Slot : \"span\";\n    const glyph = variant === \"add\" ? <PlusIcon className=\"lucide lucide-plus\" /> : icon;\n    const toggle = pressed !== undefined && variant === \"item\";\n    const resolvedTone = tone ?? (toggle ? \"primary\" : \"neutral\");\n    return (\n      <Component\n        ref={ref}\n        data-matrx-control=\"chip\"\n        data-variant={variant}\n        data-tone={variant === \"add\" ? undefined : resolvedTone}\n        data-pressed={toggle ? String(pressed) : undefined}\n        aria-pressed={toggle ? pressed : undefined}\n        data-glyph={glyph ? (variant === \"add\" && icon ? \"both\" : \"start\") : undefined}\n        className={cn(\"matrx-control-chip matrx-glyph-trim\", className)}\n        title={title ?? label}\n        {...props}\n      >\n        {glyph}\n        {variant === \"add\" ? icon : null}\n        {asChild ? <Slottable>{children}</Slottable> : null}\n        <span className=\"matrx-control-chip-label\">{label}</span>\n      </Component>\n    );\n  },\n);\nChip.displayName = \"Chip\";\n\nexport interface ChipSetProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * `flow` (default): chips sit at their own width and wrap.\n   * `grid`: every chip is the same width (auto-filled columns of at least\n   * 7.5rem), labels truncate — for a SET of siblings (a kit's formats).\n   */\n  layout?: \"flow\" | \"grid\";\n}\n\n/** A set of chips: same height, one baseline, the chips space themselves. */\nexport const ChipSet = React.forwardRef<HTMLDivElement, ChipSetProps>(\n  ({ layout = \"flow\", className, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-matrx-control=\"chip-set\"\n      data-layout={layout}\n      className={cn(\"matrx-control-chip-set\", className)}\n      {...props}\n    />\n  ),\n);\nChipSet.displayName = \"ChipSet\";\n\n/* ------------------------------------------------------------------ */\n/* Switch and Textarea                                                  */\n/* ------------------------------------------------------------------ */\n\nexport type SwitchProps = Omit<React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>, \"children\">;\n\n/** A 20px track in the 28px control box, so it lines up with every control. */\nexport const Switch = React.forwardRef<React.ComponentRef<typeof SwitchPrimitives.Root>, SwitchProps>(\n  ({ className, ...props }, ref) => (\n    <SwitchPrimitives.Root\n      ref={ref}\n      data-matrx-control=\"switch\"\n      className={cn(\"matrx-control matrx-control-switch\", className)}\n      {...props}\n    >\n      <span className=\"matrx-control-switch-track\">\n        <SwitchPrimitives.Thumb className=\"matrx-control-switch-thumb\" />\n      </span>\n    </SwitchPrimitives.Root>\n  ),\n);\nSwitch.displayName = \"Switch\";\n\nexport interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {\n  /** The roomy writing surface used by inviting prompt boxes. */\n  hero?: boolean;\n  /** Join a pinned status row below this field from the small breakpoint upward. */\n  joinedBottom?: boolean;\n  /** `field` (default): the field skin. `bare`: the surrounding surface draws the frame (a\n   *  composer) — no border, no fill, no inset, no focus ring of its own. */\n  variant?: \"field\" | \"bare\";\n  /** Monospace text — code, JSON, keys. */\n  mono?: boolean;\n  /** Grow with the content (stopping at `maxHeight`, then scroll). */\n  autoGrow?: boolean;\n  /** Minimum height in px (a writing area that must start tall). `rows` also sizes it. */\n  minHeight?: number;\n  /** Maximum height in px; past it the field scrolls. */\n  maxHeight?: number;\n  /** Space occupied by an overlaid control cluster, so editable text stays clear of it. */\n  reservedInlineEnd?: number;\n  /** Space occupied by an overlaid row of controls at the bottom of the writing area. */\n  reservedBlockEnd?: number;\n}\n\n/**\n * The field skin, multi-line (8px radius — a capsule cannot hold paragraphs). Height is the\n * textarea's own business — `rows`, `minHeight`/`maxHeight`, `autoGrow`, `resize` — never a class.\n */\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n  ({ className, style, variant = \"field\", mono, hero, joinedBottom, autoGrow, minHeight, maxHeight, reservedInlineEnd, reservedBlockEnd, ...props }, forwarded) => {\n    const { ref, callback } = useMergedTextareaRef(forwarded);\n    useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);\n    return (\n      <textarea\n        ref={callback}\n        data-matrx-control=\"textarea\"\n        data-variant={variant === \"bare\" ? \"bare\" : undefined}\n        data-mono={mono ? \"\" : undefined}\n        data-hero={hero ? \"\" : undefined}\n        data-joined-bottom={joinedBottom ? \"\" : undefined}\n        className={cn(\"matrx-control-textarea\", className)}\n        style={{ ...boxStyle(minHeight, maxHeight), ...style,\n          ...(reservedInlineEnd === undefined ? {} : { \"--matrx-textarea-reserved-inline-end\": `${Math.max(0, reservedInlineEnd)}px` }),\n          ...(reservedBlockEnd === undefined ? {} : { \"--matrx-textarea-reserved-block-end\": `${Math.max(0, reservedBlockEnd)}px` }),\n        } as React.CSSProperties}\n        {...props}\n      />\n    );\n  },\n);\nTextarea.displayName = \"Textarea\";\n"],"mappings":"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","names":["Fragment"]}

package/dist/{chunk-54UK6P7E.js → chunk-BCGNEWZM.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-VQQ3O7J5.js";
 import {
   ConfirmDialog
-} from "./chunk-6CDAHINE.js";
+} from "./chunk-UTADJKVR.js";
 import {
   ErrorBox
 } from "./chunk-HKLIRHT2.js";
@@ -21,7 +21,7 @@ import {
 } from "./chunk-TDMVH77G.js";
 import {
   Button
-} from "./chunk-XTP6HOB6.js";
+} from "./chunk-6XNYYROM.js";
 import {
   Tooltip,
   TooltipContent,
@@ -778,4 +778,4 @@ export {
   CanvasLayout,
   ModeSwitch
 };
-//# sourceMappingURL=chunk-54UK6P7E.js.map
+//# sourceMappingURL=chunk-BCGNEWZM.js.map

package/dist/{chunk-CEA6X445.js → chunk-CFUXEGW2.js}

@@ -21,7 +21,7 @@ import {
 import {
   DataRowInspector,
   columnId
-} from "./chunk-TWRC7NP4.js";
+} from "./chunk-WUD23YTG.js";
 import {
   useMatrxDataTableHost
 } from "./chunk-POJ3RR3K.js";
@@ -305,4 +305,4 @@ export {
   withMacLookDefaults,
   DataRowWindow
 };
-//# sourceMappingURL=chunk-CEA6X445.js.map
+//# sourceMappingURL=chunk-CFUXEGW2.js.map

package/dist/{chunk-BC7LMEOD.js → chunk-GJ6UGQ4X.js}

@@ -621,6 +621,9 @@ function canRedo(stack) {
 }
 
 // src/data-table/useSpreadsheetGrid.ts
+function cellCount(n) {
+  return `${n} ${n === 1 ? "cell" : "cells"}`;
+}
 function targetsAnEditor(target) {
   const element = target instanceof Element ? target : null;
   if (!element) return false;
@@ -816,7 +819,7 @@ function useSpreadsheetGrid(options) {
     await applyPatches(screened.accepted, "clear", "Cleared");
     announceSkips(
       [...skipped, ...screened.refusals],
-      `Cleared ${screened.accepted.length} cells.`
+      `Cleared ${cellCount(screened.accepted.length)}.`
     );
   }, [bounds, applyPatches, announceSkips, screenPatches, refuseWrite]);
   const doUndo = useCallback(async () => {
@@ -1183,7 +1186,7 @@ function useSpreadsheetGrid(options) {
       void applyPatches(screened.accepted, "paste", "Pasted");
       const outside = pastRightEdge + overflow.reduce((n, row) => n + Object.keys(row).length, 0);
       const tail = outside > 0 ? ` ${outside} landed past the edge of the table and were ignored.` : "";
-      announceSkips(refusals, `Pasted ${screened.accepted.length} cells.${tail}`);
+      announceSkips(refusals, `Pasted ${cellCount(screened.accepted.length)}.${tail}`);
     },
     [range, bounds, rowIds, columnIds, applyPatches, announceSkips, screenPatches, refuseWrite]
   );
@@ -1387,6 +1390,7 @@ export {
   undoEntryFor,
   canUndo,
   canRedo,
+  cellCount,
   CELL_EDITOR_ATTR,
   TYPE_CATCHER_ATTR,
   GRID_COMPANION_ATTR,
@@ -1394,4 +1398,4 @@ export {
   READ_ONLY_REASON,
   useSpreadsheetGrid
 };
-//# sourceMappingURL=chunk-BC7LMEOD.js.map
+//# sourceMappingURL=chunk-GJ6UGQ4X.js.map