@motir/design-system 0.1.0

package/dist/components/ui/Modal.js

@@ -0,0 +1,153 @@
+'use client';
+import { forwardRef } from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var contentVariants = cva(
+  cn(
+    "fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2",
+    "w-[90vw] rounded-(--radius-modal) bg-(--el-page-bg)",
+    "shadow-(--shadow-modal) border border-(--el-border)",
+    "p-(--spacing-card-padding)",
+    "focus:outline-none",
+    // Never exceed the viewport: cap height and lay out as a column so a
+    // consumer can wrap its fields in `Modal.Body` (which owns the
+    // `flex-1 overflow-y-auto` scroll recipe) and pin a `Modal.Footer`,
+    // instead of the dialog growing off-screen (e.g. the create modal's
+    // expandable Explanation pushing the Create button out of view).
+    "flex max-h-[90vh] flex-col overflow-hidden"
+  ),
+  {
+    variants: {
+      // Literal widths, NOT the max-w-sm/md/lg utilities: the design
+      // system's @theme defines --spacing-sm/md/lg (12/16/20px), and
+      // Tailwind v4 resolves `max-w-{key}` against the --spacing-* scale
+      // when that key exists — so `max-w-md` would collapse the modal to
+      // 16px wide. Pinning the rem values (Tailwind's stock sm/md/lg) keeps
+      // the design-system token set untouched and the dialog readable.
+      size: {
+        sm: "max-w-[24rem]",
+        md: "max-w-[28rem]",
+        lg: "max-w-[32rem]",
+        // The large peek surface (Subtask 2.5.19's quick view) — a generous
+        // dialog that takes a big part of the screen; pairs with a height +
+        // p-0 className on the consumer side. Stock Tailwind 4xl rem value, so
+        // the design-system --spacing-* scale stays untouched (see the comment
+        // above on why we pin rems instead of max-w-{key}).
+        xl: "max-w-[58rem]",
+        // The whole viewport (Subtask 5.2.6's attachment preview lightbox —
+        // the 2.5.19 growth pattern one step further). Like `xl`, the variant
+        // only lifts the size caps; the consumer pairs it with bg/border/
+        // radius/padding overrides to drop the panel chrome it doesn't want.
+        full: "h-dvh max-h-dvh w-screen max-w-none"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+function ModalRoot({
+  open,
+  onOpenChange,
+  title,
+  description,
+  size,
+  hideClose,
+  srTitle,
+  className,
+  overlayClassName,
+  role,
+  children,
+  closeLabel = "Close",
+  dialogLabel = "Dialog"
+}) {
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      Dialog.Overlay,
+      {
+        "data-surface": "overlay",
+        className: cn("fixed inset-0 z-40 bg-(--el-overlay-scrim)", overlayClassName)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog.Content,
+      {
+        className: cn(contentVariants({ size }), className),
+        "data-surface": "modal",
+        ...role ? { role } : {},
+        ...description ? {} : { "aria-describedby": void 0 },
+        children: [
+          title || description ? /* @__PURE__ */ jsxs("div", { className: "mb-(--spacing-md) shrink-0", children: [
+            title ? /* @__PURE__ */ jsx(Dialog.Title, { className: "font-serif text-xl font-semibold text-(--el-text)", children: title }) : null,
+            description ? /* @__PURE__ */ jsx(Dialog.Description, { className: "text-(--el-text-subtitle) mt-1 font-sans text-sm", children: description }) : null
+          ] }) : (
+            // Radix requires Title for a11y; provide a visually-hidden one if
+            // missing. `srTitle` lets a consumer with its own visible heading
+            // still give the dialog a meaningful accessible name.
+            /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: srTitle ?? dialogLabel })
+          ),
+          children,
+          !hideClose ? /* @__PURE__ */ jsx(
+            Dialog.Close,
+            {
+              "aria-label": closeLabel,
+              className: "text-(--el-icon-muted) hover:text-(--el-text) absolute right-3 top-3 rounded-(--radius-control) p-(--spacing-icon-btn) transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)",
+              children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+            }
+          ) : null
+        ]
+      }
+    )
+  ] }) });
+}
+var ModalFooter = forwardRef(
+  function ModalFooter2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "border-(--el-border) mt-(--spacing-md) flex items-center justify-end gap-2 border-t pt-(--spacing-md)",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var ModalBody = forwardRef(
+  function ModalBody2({ className, children, ...rest }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex min-h-0 flex-1 flex-col overflow-y-auto",
+          // Ring-safe inset (see the component doc above): padding ≥ the focus
+          // ring's ~4px overhang + an equal negative margin to keep the gutter.
+          "-m-1.5 p-1.5",
+          className
+        ),
+        ...rest,
+        children
+      }
+    );
+  }
+);
+var ModalTrigger = Dialog.Trigger;
+var Modal = Object.assign(ModalRoot, {
+  Body: ModalBody,
+  Footer: ModalFooter,
+  Trigger: ModalTrigger
+});
+
+export { Modal };
+//# sourceMappingURL=Modal.js.map
+//# sourceMappingURL=Modal.js.map

package/dist/components/ui/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/utils/cn.ts","../../../src/components/ui/Modal.tsx"],"names":["ModalFooter","ModalBody"],"mappings":"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","file":"Modal.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Merge Tailwind class names without conflicts.\n *\n * `clsx` handles conditional inclusion (booleans, undefineds, arrays);\n * `twMerge` resolves conflicting Tailwind classes (later wins, e.g.\n * `px-2 px-4` → `px-4`). Together they are the de facto standard for\n * composing Tailwind classes in React components.\n *\n * @example\n * cn('px-2 py-1', isActive && 'bg-primary', className)\n */\nexport function cn(...inputs: ClassValue[]): string {\n  return twMerge(clsx(inputs));\n}\n","'use client';\n\nimport { forwardRef, type ReactNode } from 'react';\nimport * as Dialog from '@radix-ui/react-dialog';\nimport { X } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\n/**\n * Modal — accessible dialog wrapping @radix-ui/react-dialog.\n *\n * Radix handles focus trap, ESC-to-close, click-outside-to-close, and\n * focus-return-on-close out of the box. We style on top.\n *\n * Open/close is controlled by the consumer via `open` + `onOpenChange`.\n *\n * For a scrollable body with a pinned footer, wrap the fields in `Modal.Body`\n * (it owns the `flex-1 overflow-y-auto` scroll recipe and keeps focus rings\n * from clipping against the scroll edge — see `ModalBody`).\n *\n * @example\n * const [open, setOpen] = useState(false);\n * <Modal open={open} onOpenChange={setOpen} title=\"Confirm\" size=\"md\">\n *   <Modal.Body className=\"gap-4\">\n *     <Input label=\"Name\" autoFocus />\n *   </Modal.Body>\n *   <Modal.Footer>\n *     <Button variant=\"ghost\" onClick={() => setOpen(false)}>Cancel</Button>\n *     <Button variant=\"primary\" onClick={confirm}>Confirm</Button>\n *   </Modal.Footer>\n * </Modal>\n */\nconst contentVariants = cva(\n  cn(\n    'fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2',\n    'w-[90vw] rounded-(--radius-modal) bg-(--el-page-bg)',\n    'shadow-(--shadow-modal) border border-(--el-border)',\n    'p-(--spacing-card-padding)',\n    'focus:outline-none',\n    // Never exceed the viewport: cap height and lay out as a column so a\n    // consumer can wrap its fields in `Modal.Body` (which owns the\n    // `flex-1 overflow-y-auto` scroll recipe) and pin a `Modal.Footer`,\n    // instead of the dialog growing off-screen (e.g. the create modal's\n    // expandable Explanation pushing the Create button out of view).\n    'flex max-h-[90vh] flex-col overflow-hidden',\n  ),\n  {\n    variants: {\n      // Literal widths, NOT the max-w-sm/md/lg utilities: the design\n      // system's @theme defines --spacing-sm/md/lg (12/16/20px), and\n      // Tailwind v4 resolves `max-w-{key}` against the --spacing-* scale\n      // when that key exists — so `max-w-md` would collapse the modal to\n      // 16px wide. Pinning the rem values (Tailwind's stock sm/md/lg) keeps\n      // the design-system token set untouched and the dialog readable.\n      size: {\n        sm: 'max-w-[24rem]',\n        md: 'max-w-[28rem]',\n        lg: 'max-w-[32rem]',\n        // The large peek surface (Subtask 2.5.19's quick view) — a generous\n        // dialog that takes a big part of the screen; pairs with a height +\n        // p-0 className on the consumer side. Stock Tailwind 4xl rem value, so\n        // the design-system --spacing-* scale stays untouched (see the comment\n        // above on why we pin rems instead of max-w-{key}).\n        xl: 'max-w-[58rem]',\n        // The whole viewport (Subtask 5.2.6's attachment preview lightbox —\n        // the 2.5.19 growth pattern one step further). Like `xl`, the variant\n        // only lifts the size caps; the consumer pairs it with bg/border/\n        // radius/padding overrides to drop the panel chrome it doesn't want.\n        full: 'h-dvh max-h-dvh w-screen max-w-none',\n      },\n    },\n    defaultVariants: { size: 'md' },\n  },\n);\n\nexport interface ModalProps extends VariantProps<typeof contentVariants> {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  title?: string;\n  description?: string;\n  children?: ReactNode;\n  /** Hide the default close (×) button in the corner. */\n  hideClose?: boolean;\n  /**\n   * Accessible name for a dialog that renders its OWN visible heading (so no\n   * `title` is passed). Radix requires a Dialog.Title; without `title`/`srTitle`\n   * we fall back to the generic \"Dialog\". Supply this to label the dialog with\n   * something meaningful (e.g. the previewed issue's key) while keeping the\n   * heading inside `children` (Subtask 2.5.19's quick-view peek).\n   */\n  srTitle?: string;\n  className?: string;\n  /**\n   * Extra classes merged onto the backdrop — e.g. the attachment preview\n   * lightbox (Subtask 5.2.6) deepens the default `--el-overlay-scrim` to\n   * `bg-black/80` per `design/work-items/attachments.mock.html` panel 6.\n   */\n  overlayClassName?: string;\n  /**\n   * The dialog's ARIA role. Defaults to Radix's `dialog`; a DESTRUCTIVE confirm\n   * passes `alertdialog` (Subtask 2.8.4's delete confirm) so assistive tech\n   * treats it as an alert that interrupts and announces its description.\n   */\n  role?: 'dialog' | 'alertdialog';\n  /**\n   * Accessible label for the corner close (×) button. Defaults to `'Close'`.\n   * i18n is the consuming app's concern — the design-system package is\n   * framework-agnostic (no `next-intl` dependency), so a localized app passes\n   * the translated string here (motir-core wires it from its `common.close`).\n   */\n  closeLabel?: string;\n  /**\n   * Fallback accessible name when neither `title` nor `srTitle` is given.\n   * Defaults to `'Dialog'`. See `closeLabel` for the i18n rationale.\n   */\n  dialogLabel?: string;\n}\n\nfunction ModalRoot({\n  open,\n  onOpenChange,\n  title,\n  description,\n  size,\n  hideClose,\n  srTitle,\n  className,\n  overlayClassName,\n  role,\n  children,\n  closeLabel = 'Close',\n  dialogLabel = 'Dialog',\n}: ModalProps) {\n  return (\n    <Dialog.Root open={open} onOpenChange={onOpenChange}>\n      <Dialog.Portal>\n        {/* `data-surface=\"overlay\"` lets the glassmorphism style turn this dark\n            scrim into a LIGHT, page-blurring backdrop, so the frosted modal\n            refracts the (blurred) page behind it instead of darkness — the\n            point of a glass modal. Inert for every other style. */}\n        <Dialog.Overlay\n          data-surface=\"overlay\"\n          className={cn('fixed inset-0 z-40 bg-(--el-overlay-scrim)', overlayClassName)}\n        />\n        {/*\n          PRODECT_FINDINGS #8: Radix checks for a describing element\n          (Dialog.Description → aria-describedby) independently of the Title\n          check. When no `description` prop is passed we render no\n          Dialog.Description, so Radix logs a \"Missing Description or\n          aria-describedby={undefined}\" warning. We pick the explicit opt-out\n          (aria-describedby={undefined}) rather than emitting an empty sr-only\n          Description — an empty description announces nothing useful and is\n          worse for screen-reader users than declaring the dialog has none.\n        */}\n        <Dialog.Content\n          className={cn(contentVariants({ size }), className)}\n          // `data-surface` lets a surface-material style (glassmorphism) frost\n          // the dialog panel — see globals.css's material layer.\n          data-surface=\"modal\"\n          // A destructive confirm opts into `alertdialog` (2.8.4); otherwise\n          // Radix's default `dialog` role applies.\n          {...(role ? { role } : {})}\n          // Only opt out when there's no description. When `description` is\n          // set we omit the prop entirely so Radix keeps auto-wiring\n          // aria-describedby to the rendered Dialog.Description's id.\n          {...(description ? {} : { 'aria-describedby': undefined })}\n        >\n          {title || description ? (\n            <div className=\"mb-(--spacing-md) shrink-0\">\n              {title ? (\n                <Dialog.Title className=\"font-serif text-xl font-semibold text-(--el-text)\">\n                  {title}\n                </Dialog.Title>\n              ) : null}\n              {description ? (\n                <Dialog.Description className=\"text-(--el-text-subtitle) mt-1 font-sans text-sm\">\n                  {description}\n                </Dialog.Description>\n              ) : null}\n            </div>\n          ) : (\n            // Radix requires Title for a11y; provide a visually-hidden one if\n            // missing. `srTitle` lets a consumer with its own visible heading\n            // still give the dialog a meaningful accessible name.\n            <Dialog.Title className=\"sr-only\">{srTitle ?? dialogLabel}</Dialog.Title>\n          )}\n          {children}\n          {!hideClose ? (\n            <Dialog.Close\n              aria-label={closeLabel}\n              className=\"text-(--el-icon-muted) hover:text-(--el-text) absolute right-3 top-3 rounded-(--radius-control) p-(--spacing-icon-btn) transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--focus-ring-color)\"\n            >\n              <X className=\"h-4 w-4\" />\n            </Dialog.Close>\n          ) : null}\n        </Dialog.Content>\n      </Dialog.Portal>\n    </Dialog.Root>\n  );\n}\n\nconst ModalFooter = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function ModalFooter({ className, children, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'border-(--el-border) mt-(--spacing-md) flex items-center justify-end gap-2 border-t pt-(--spacing-md)',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/**\n * ModalBody — the scrollable field area of a modal. Owns the scroll recipe\n * once so consumers don't re-derive it (and re-introduce the focus-ring clip):\n * it fills the remaining column height (the panel caps at `max-h-[90vh]`) and\n * scrolls, so a sibling `Modal.Footer` stays pinned.\n *\n * Ring-safe by construction. `Input` draws its focus ring as\n * `focus-within:ring-2 … ring-offset-2` — a box-shadow extending ~4px OUTSIDE\n * the field's border box. Per the CSS spec, `overflow-y: auto` forces the\n * computed `overflow-x` from `visible` to `auto`, so this body is a clip box on\n * BOTH axes; a full-width field's ring overhang would be painted outside it and\n * silently clipped (rings are box-shadows — they never grow the layout box, so\n * nothing scrolls, the paint is just cut). We pad the scroll container by more\n * than the overhang (`p-1.5` = 6px > 4px) and pull an equal negative margin\n * (`-m-1.5`), so the ring gets room while the body's visual gutter — and the\n * fields' alignment with the modal title/footer — is unchanged.\n *\n * Pass `gap-*` (and any extra layout) via `className`.\n */\nconst ModalBody = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  function ModalBody({ className, children, ...rest }, ref) {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex min-h-0 flex-1 flex-col overflow-y-auto',\n          // Ring-safe inset (see the component doc above): padding ≥ the focus\n          // ring's ~4px overhang + an equal negative margin to keep the gutter.\n          '-m-1.5 p-1.5',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\n/** Convenience trigger — wires children to Radix's DialogTrigger. */\nconst ModalTrigger = Dialog.Trigger;\n\nexport const Modal = Object.assign(ModalRoot, {\n  Body: ModalBody,\n  Footer: ModalFooter,\n  Trigger: ModalTrigger,\n});\n"]}

package/dist/components/ui/MultiSelectPicker.d.ts

@@ -0,0 +1,73 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ComponentType, ReactNode } from 'react';
+
+/** One of the six `--el-tint-*` pastel token names (chip + swatch colour). */
+type MultiSelectTint = 'peach' | 'rose' | 'mint' | 'lavender' | 'sky' | 'yellow';
+interface MultiSelectOption {
+    id: string;
+    label: string;
+    /** Pastel tint for the chip + the option row's swatch dot; absent = neutral. */
+    tint?: MultiSelectTint;
+    /** Glyph for the option row's 22px slot and the chip (e.g. the component glyph). */
+    glyph?: ComponentType<{
+        className?: string;
+    }>;
+}
+interface MultiSelectPickerProps {
+    /** The selected values, rendered as chips. */
+    values: MultiSelectOption[];
+    /** The current option set — the caller filters/fetches; no fetching inside. */
+    options: MultiSelectOption[];
+    /** Toggle an option from the listbox (add when unselected, remove when selected). */
+    onToggle: (option: MultiSelectOption) => void;
+    /** Remove a chip (the × button / Backspace-on-empty path). */
+    onRemove: (value: MultiSelectOption) => void;
+    /**
+     * Folksonomy create — when present, a query matching no option (and no
+     * selected value) case-insensitively appends the create-row.
+     */
+    onCreate?: (name: string) => void;
+    /** The controlled filter query (the caller debounces its fetch off this). */
+    query: string;
+    onQueryChange: (query: string) => void;
+    /** Per-value cap — at the cap the input disables; chips stay removable. */
+    cap?: number;
+    /** Accessible name for the input + the listbox. */
+    label: string;
+    placeholder: string;
+    /** Localized create-row text for the current query (e.g. "Create 'perf-q3'"). */
+    createLabel?: (query: string) => string;
+    /** Localized accessible name for a chip's remove button. */
+    removeLabel: (label: string) => string;
+    /** Listbox empty state (e.g. "No components defined"). */
+    emptyText?: string;
+    /** Quiet line under the box (cap notice, admin link) — the mock's field-hint. */
+    hint?: ReactNode;
+    /** Inline error (the typed 422), announced via role="alert". */
+    error?: string | null;
+    /** Disables the whole control (a pending action). */
+    disabled?: boolean;
+    /** Extra classes for the chip-input BOX (the bordered element) — e.g. the
+     * filter builder's dashed pending-row treatment (Subtask 6.1.4). */
+    className?: string;
+}
+/**
+ * A value chip — exported so the rail cards' DISPLAY / read-only modes render
+ * the exact same chip the picker edits (mock panels 0 / 2 / 3). Neutral by
+ * default (the Pill-neutral colours); a `tint` puts the hue in the background
+ * with `--el-text-strong` text (finding #35 AA). With `onRemove` the trailing
+ * × renders (12px, accessible name via `removeLabel`).
+ */
+declare function ValueChip({ option, onRemove, removeLabel, disabled, }: {
+    option: MultiSelectOption;
+    onRemove?: (value: MultiSelectOption) => void;
+    removeLabel?: (label: string) => string;
+    disabled?: boolean;
+}): react_jsx_runtime.JSX.Element;
+/** A pulse-skeleton chip (the mock's panel-6 loading grammar, at chip size). */
+declare function ChipSkeleton({ className }: {
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function MultiSelectPicker({ values, options, onToggle, onRemove, onCreate, query, onQueryChange, cap, label, placeholder, createLabel, removeLabel, emptyText, hint, error, disabled, className, }: MultiSelectPickerProps): react_jsx_runtime.JSX.Element;
+
+export { ChipSkeleton, type MultiSelectOption, MultiSelectPicker, type MultiSelectPickerProps, type MultiSelectTint, ValueChip };

package/dist/components/ui/MultiSelectPicker.js

@@ -0,0 +1,358 @@
+'use client';
+import { useId, useRef, useState, useEffect, useCallback, useSyncExternalStore, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { X, Check, Plus, TriangleAlert } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var subscribeNoop = () => () => {
+};
+function useMounted() {
+  return useSyncExternalStore(
+    subscribeNoop,
+    () => true,
+    () => false
+  );
+}
+var TINT_CHIP = {
+  peach: "bg-(--el-label-1)",
+  rose: "bg-(--el-label-2)",
+  mint: "bg-(--el-label-3)",
+  lavender: "bg-(--el-label-4)",
+  sky: "bg-(--el-label-5)",
+  yellow: "bg-(--el-label-6)"
+};
+function ValueChip({
+  option,
+  onRemove,
+  removeLabel,
+  disabled
+}) {
+  const Glyph = option.glyph;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "inline-flex max-w-full items-center gap-1.5 rounded-(--radius-badge) px-(--spacing-chip-x) py-(--spacing-chip-y) font-sans text-xs font-medium",
+        option.tint ? cn(TINT_CHIP[option.tint], "text-(--el-text-strong)") : "bg-(--el-chip-bg) text-(--el-text-secondary) border border-(--el-chip-border)"
+      ),
+      children: [
+        Glyph ? /* @__PURE__ */ jsx(Glyph, { className: "h-3 w-3 shrink-0 text-(--el-icon-muted)", "aria-hidden": true }) : null,
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: option.label }),
+        onRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            disabled,
+            onClick: () => onRemove(option),
+            "aria-label": removeLabel ? removeLabel(option.label) : option.label,
+            className: cn(
+              "-mr-1 inline-flex items-center justify-center rounded-(--radius-badge) p-px focus-visible:ring-2 focus-visible:ring-(--focus-ring-color) focus-visible:outline-none",
+              option.tint ? "text-(--el-text-strong) opacity-65 hover:bg-(--el-text-strong)/10 hover:opacity-100" : "text-(--el-icon-muted) hover:bg-(--el-muted) hover:text-(--el-text)"
+            ),
+            children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3", "aria-hidden": true })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function ChipSkeleton({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn("h-[22px] animate-pulse rounded-(--radius-badge) bg-(--el-muted)", className),
+      "aria-hidden": true
+    }
+  );
+}
+function MultiSelectPicker({
+  values,
+  options,
+  onToggle,
+  onRemove,
+  onCreate,
+  query,
+  onQueryChange,
+  cap,
+  label,
+  placeholder,
+  createLabel,
+  removeLabel,
+  emptyText,
+  hint,
+  error,
+  disabled,
+  className
+}) {
+  const baseId = useId();
+  const listId = `${baseId}-listbox`;
+  const rootRef = useRef(null);
+  const boxRef = useRef(null);
+  const inputRef = useRef(null);
+  const menuRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const mounted = useMounted();
+  const [inModal, setInModal] = useState(false);
+  const [menuStyle, setMenuStyle] = useState(null);
+  const [listMaxHeight, setListMaxHeight] = useState(256);
+  const atCap = cap != null && values.length >= cap;
+  const inputDisabled = disabled || atCap;
+  const trimmed = query.trim();
+  const lower = trimmed.toLowerCase();
+  const hasExactMatch = options.some((o) => o.label.toLowerCase() === lower) || values.some((v) => v.label.toLowerCase() === lower);
+  const showCreate = !!onCreate && trimmed.length > 0 && !hasExactMatch;
+  const rowCount = options.length + (showCreate ? 1 : 0);
+  const clampedActive = rowCount === 0 ? 0 : Math.min(activeIndex, rowCount - 1);
+  const activeId = open && rowCount > 0 ? `${baseId}-opt-${clampedActive}` : void 0;
+  useEffect(() => {
+    if (!open) return;
+    function onPointerDown(e) {
+      const t = e.target;
+      if (rootRef.current?.contains(t) || menuRef.current?.contains(t)) return;
+      setOpen(false);
+    }
+    document.addEventListener("pointerdown", onPointerDown);
+    return () => document.removeEventListener("pointerdown", onPointerDown);
+  }, [open]);
+  const updatePosition = useCallback(() => {
+    const box = boxRef.current;
+    if (!box) return;
+    const rect = box.getBoundingClientRect();
+    const gap = 4;
+    const viewportH = window.innerHeight;
+    const spaceBelow = viewportH - rect.bottom - gap;
+    const spaceAbove = rect.top - gap;
+    const placeBelow = spaceBelow >= spaceAbove;
+    const avail = Math.max(120, placeBelow ? spaceBelow : spaceAbove);
+    setListMaxHeight(Math.max(80, Math.min(256, avail - 8)));
+    const style = {
+      position: "fixed",
+      left: Math.round(rect.left),
+      minWidth: Math.round(rect.width)
+    };
+    if (placeBelow) style.top = Math.round(rect.bottom + gap);
+    else style.bottom = Math.round(viewportH - rect.top + gap);
+    setMenuStyle(style);
+  }, []);
+  useIsomorphicLayoutEffect(() => {
+    if (!open) return;
+    setInModal(!!boxRef.current?.closest('[data-surface="modal"],[aria-modal="true"]'));
+  }, [open]);
+  useIsomorphicLayoutEffect(() => {
+    if (!(open && mounted) || inModal) return;
+    updatePosition();
+    const onReflow = () => updatePosition();
+    window.addEventListener("scroll", onReflow, true);
+    window.addEventListener("resize", onReflow);
+    return () => {
+      window.removeEventListener("scroll", onReflow, true);
+      window.removeEventListener("resize", onReflow);
+    };
+  }, [open, mounted, inModal, updatePosition, rowCount]);
+  function commitRow(index) {
+    const option = options[index];
+    if (option) onToggle(option);
+    else if (showCreate) onCreate?.(trimmed);
+  }
+  function onKeyDown(e) {
+    if (e.key === "Escape") {
+      if (open) {
+        e.preventDefault();
+        e.stopPropagation();
+        setOpen(false);
+      }
+      return;
+    }
+    if (e.key === "Backspace" && query.length === 0) {
+      const last = values[values.length - 1];
+      if (last) onRemove(last);
+      return;
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      if (rowCount === 0) return;
+      const delta = e.key === "ArrowDown" ? 1 : -1;
+      setActiveIndex((clampedActive + delta + rowCount) % rowCount);
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (open && rowCount > 0) commitRow(clampedActive);
+    }
+  }
+  const wrapMenu = (el) => inModal ? el : createPortal(el, document.body);
+  return (
+    // `data-inner-dismiss` (set while the listbox is open) lets an enclosing
+    // Radix layer's `onEscapeKeyDown` defer to us: Radix listens for Escape
+    // in the CAPTURE phase at the document, so our own bubble-phase handler
+    // alone can't stop it from dismissing the whole popover/dialog first
+    // (the 6.1.4 filter builder hit exactly this).
+    /* @__PURE__ */ jsxs("div", { ref: rootRef, "data-inner-dismiss": open ? true : void 0, className: "relative font-sans", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: boxRef,
+          onClick: () => inputRef.current?.focus(),
+          className: cn(
+            "flex min-h-(--height-input) cursor-text flex-wrap items-center gap-1.5 rounded-(--radius-input) border border-(--el-border) bg-(--el-page-bg) px-(--spacing-control-x) py-(--spacing-control-y)",
+            "focus-within:ring-2 focus-within:ring-(--focus-ring-color) focus-within:ring-offset-1",
+            inputDisabled && "cursor-not-allowed bg-(--el-surface-soft)",
+            className
+          ),
+          children: [
+            values.map((v) => /* @__PURE__ */ jsx(
+              ValueChip,
+              {
+                option: v,
+                onRemove,
+                removeLabel,
+                disabled
+              },
+              v.id
+            )),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: inputRef,
+                role: "combobox",
+                "aria-expanded": open,
+                "aria-controls": open ? listId : void 0,
+                "aria-activedescendant": activeId,
+                "aria-autocomplete": "list",
+                "aria-label": label,
+                disabled: inputDisabled,
+                value: query,
+                placeholder: values.length === 0 ? placeholder : void 0,
+                onChange: (e) => {
+                  onQueryChange(e.target.value);
+                  setOpen(true);
+                  setActiveIndex(0);
+                },
+                onFocus: () => setOpen(true),
+                onKeyDown,
+                className: "min-w-[60px] flex-1 border-0 bg-transparent py-0.5 text-sm text-(--el-text) outline-none placeholder:text-(--el-text-muted) disabled:cursor-not-allowed"
+              }
+            )
+          ]
+        }
+      ),
+      open && mounted ? wrapMenu(
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: menuRef,
+            id: listId,
+            role: "listbox",
+            "aria-multiselectable": "true",
+            "aria-label": label,
+            "data-menu-surface": "",
+            style: inModal ? { maxHeight: listMaxHeight } : {
+              ...menuStyle ?? { position: "fixed", visibility: "hidden" },
+              maxHeight: listMaxHeight
+            },
+            className: cn(
+              "w-max max-w-72 min-w-60 overflow-y-auto rounded-(--radius-card) border border-(--el-border) bg-(--el-page-bg) p-1 shadow-(--shadow-elevated)",
+              inModal ? "absolute top-full left-0 z-10 mt-1 max-h-64" : "z-50"
+            ),
+            children: [
+              options.map((opt, i) => {
+                const selected = values.some((v) => v.id === opt.id);
+                const Glyph = opt.glyph;
+                return /* @__PURE__ */ jsxs(
+                  "button",
+                  {
+                    id: `${baseId}-opt-${i}`,
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    disabled,
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: () => commitRow(i),
+                    onMouseEnter: () => setActiveIndex(i),
+                    className: cn(
+                      "flex w-full items-center gap-2.5 rounded-(--radius-control) px-(--spacing-control-x) py-(--spacing-control-y) text-left text-sm text-(--el-text) hover:bg-(--el-option-active-bg) focus-visible:outline-none",
+                      i === clampedActive && "bg-(--el-option-active-bg)"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx("span", { className: "flex w-[22px] shrink-0 items-center justify-center text-(--el-icon-muted)", children: opt.tint ? /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          "aria-hidden": true,
+                          className: cn(
+                            "h-2.5 w-2.5 rounded-full border border-(--el-border)",
+                            TINT_CHIP[opt.tint]
+                          )
+                        }
+                      ) : Glyph ? /* @__PURE__ */ jsx(Glyph, { className: "h-3.5 w-3.5", "aria-hidden": true }) : null }),
+                      /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: opt.label }),
+                      /* @__PURE__ */ jsx(
+                        Check,
+                        {
+                          "aria-hidden": true,
+                          className: cn(
+                            "h-4 w-4 shrink-0 text-(--el-accent-on-surface)",
+                            selected ? "opacity-100" : "opacity-0"
+                          )
+                        }
+                      )
+                    ]
+                  },
+                  opt.id
+                );
+              }),
+              showCreate ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  id: `${baseId}-opt-${options.length}`,
+                  type: "button",
+                  role: "option",
+                  "aria-selected": false,
+                  disabled,
+                  onMouseDown: (e) => e.preventDefault(),
+                  onClick: () => commitRow(options.length),
+                  onMouseEnter: () => setActiveIndex(options.length),
+                  className: cn(
+                    "flex w-full items-center gap-2.5 rounded-(--radius-control) px-(--spacing-control-x) py-(--spacing-control-y) text-left text-sm text-(--el-text) hover:bg-(--el-option-active-bg) focus-visible:outline-none",
+                    clampedActive === options.length && "bg-(--el-option-active-bg)"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { className: "flex w-[22px] shrink-0 items-center justify-center text-(--el-accent-on-surface)", children: /* @__PURE__ */ jsx(Plus, { className: "h-3.5 w-3.5", "aria-hidden": true }) }),
+                    /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: createLabel ? createLabel(trimmed) : trimmed })
+                  ]
+                }
+              ) : null,
+              options.length === 0 && !showCreate ? /* @__PURE__ */ jsx("div", { className: "px-(--spacing-control-x) py-(--spacing-control-y) text-sm text-(--el-text-muted)", children: emptyText }) : null
+            ]
+          }
+        )
+      ) : null,
+      error ? /* @__PURE__ */ jsxs(
+        "p",
+        {
+          role: "alert",
+          className: "mt-1.5 flex items-center gap-1.5 font-sans text-xs text-(--el-danger)",
+          children: [
+            /* @__PURE__ */ jsx(TriangleAlert, { className: "h-3.5 w-3.5 shrink-0", "aria-hidden": true }),
+            error
+          ]
+        }
+      ) : null,
+      !error && hint ? /* @__PURE__ */ jsx("div", { className: "mt-1.5 font-sans text-xs text-(--el-text-helper)", children: hint }) : null
+    ] })
+  );
+}
+
+export { ChipSkeleton, MultiSelectPicker, ValueChip };
+//# sourceMappingURL=MultiSelectPicker.js.map
+//# sourceMappingURL=MultiSelectPicker.js.map