@arbidocs/blocks 0.3.185 → 0.4.1

package/dist/chunk-UFHMLHIR.cjs

@@ -0,0 +1,66 @@
+"use client";
+'use strict';
+
+var chunkWJMEXTVD_cjs = require('./chunk-WJMEXTVD.cjs');
+var lucideReact = require('lucide-react');
+var ui = require('@arbidocs/react/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+var MAX_DEFAULT = 3;
+function MemberAvatarStack({
+  members,
+  total,
+  max = MAX_DEFAULT,
+  hidden = false,
+  onClick,
+  expanded = false,
+  ringClassName = "border-card",
+  className,
+  testId
+}) {
+  const count = total ?? members.length;
+  const shown = hidden ? [] : members.slice(0, max);
+  const extra = count - shown.length;
+  const faces = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    hidden ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-muted-foreground", children: "\u2014" }) : shown.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Avatar, { className: ui.cn("size-6 border-2", ringClassName), title: m.name, children: [
+      m.picture && /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarImage, { src: m.picture, alt: m.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(ui.AvatarFallback, { className: "bg-foreground text-xs font-medium text-background", children: chunkWJMEXTVD_cjs.initials(m.name || "?") })
+    ] }, i)),
+    !hidden && extra > 0 && /* @__PURE__ */ jsxRuntime.jsx(ui.Avatar, { className: ui.cn("size-6 border-2", ringClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(ui.AvatarFallback, { className: "bg-accent text-xs font-medium text-muted-foreground", children: [
+      "+",
+      extra
+    ] }) })
+  ] });
+  if (!onClick) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cn("flex shrink-0 -space-x-2", className), "data-testid": testId, children: faces });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-expanded": expanded,
+      className: ui.cn(
+        "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full py-0.5 pl-0.5 pr-1.5 transition-colors hover:bg-accent/60 pointer-coarse:min-h-11 pointer-coarse:pr-3",
+        className
+      ),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex -space-x-2", children: faces }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          lucideReact.ChevronDown,
+          {
+            className: ui.cn(
+              "size-3.5 text-muted-foreground transition-transform",
+              expanded && "rotate-180"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.MemberAvatarStack = MemberAvatarStack;
+//# sourceMappingURL=chunk-UFHMLHIR.cjs.map
+//# sourceMappingURL=chunk-UFHMLHIR.cjs.map

package/dist/chunk-UFHMLHIR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MemberAvatarStack.tsx"],"names":["jsxs","Fragment","jsx","Avatar","cn","AvatarImage","AvatarFallback","ChevronDown"],"mappings":";;;;;;;AAgCA,IAAM,WAAA,GAAc,CAAA;AAWb,SAAS,iBAAA,CAAkB;AAAA,EAChC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA,GAAM,WAAA;AAAA,EACN,MAAA,GAAS,KAAA;AAAA,EACT,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,aAAA,GAAgB,aAAA;AAAA,EAChB,SAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,MAAM,KAAA,GAAQ,SAAS,OAAA,CAAQ,MAAA;AAC/B,EAAA,MAAM,QAAQ,MAAA,GAAS,KAAK,OAAA,CAAQ,KAAA,CAAM,GAAG,GAAG,CAAA;AAChD,EAAA,MAAM,KAAA,GAAQ,QAAQ,KAAA,CAAM,MAAA;AAE5B,EAAA,MAAM,wBACJA,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,MAAA,mBACCC,cAAA,CAAC,UAAK,SAAA,EAAU,+BAAA,EAAgC,oBAAC,CAAA,GAEjD,KAAA,CAAM,IAAI,CAAC,CAAA,EAAG,sBACZF,eAAA,CAACG,SAAA,EAAA,EAAe,WAAWC,KAAA,CAAG,iBAAA,EAAmB,aAAa,CAAA,EAAG,KAAA,EAAO,EAAE,IAAA,EACvE,QAAA,EAAA;AAAA,MAAA,CAAA,CAAE,OAAA,mCAAYC,cAAA,EAAA,EAAY,GAAA,EAAK,EAAE,OAAA,EAAS,GAAA,EAAK,EAAE,IAAA,EAAM,CAAA;AAAA,sBACxDH,cAAA,CAACI,qBAAe,SAAA,EAAU,mDAAA,EACvB,qCAAS,CAAA,CAAE,IAAA,IAAQ,GAAG,CAAA,EACzB;AAAA,KAAA,EAAA,EAJW,CAKb,CACD,CAAA;AAAA,IAEF,CAAC,MAAA,IAAU,KAAA,GAAQ,CAAA,mCACjBH,SAAA,EAAA,EAAO,SAAA,EAAWC,KAAA,CAAG,iBAAA,EAAmB,aAAa,CAAA,EACpD,QAAA,kBAAAJ,eAAA,CAACM,iBAAA,EAAA,EAAe,WAAU,qDAAA,EAAsD,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAC5E;AAAA,KAAA,EACJ,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAGF,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,uBACEJ,cAAA,CAAC,SAAI,SAAA,EAAWE,KAAA,CAAG,4BAA4B,SAAS,CAAA,EAAG,aAAA,EAAa,MAAA,EACrE,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEJ,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA;AAAA,MACA,eAAA,EAAe,QAAA;AAAA,MACf,SAAA,EAAWI,KAAA;AAAA,QACT,sKAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MAEb,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EAAmB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACzCA,cAAA;AAAA,UAACK,uBAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWH,KAAA;AAAA,cACT,qDAAA;AAAA,cACA,QAAA,IAAY;AAAA;AACd;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"chunk-UFHMLHIR.cjs","sourcesContent":["import { ChevronDown } from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarImage, cn } from '@arbidocs/react/ui'\nimport { initials } from '../lib/format'\n\n/** One face in the stack — source-agnostic, not a raw SDK user. */\nexport interface StackedMember {\n  name: string\n  picture?: string | null\n}\n\nexport interface MemberAvatarStackProps {\n  members: StackedMember[]\n  /** Total, when it exceeds what's shown. Defaults to `members.length`. */\n  total?: number\n  /** Faces before the rest collapse into a `+N`. */\n  max?: number\n  /**\n   * The viewer isn't allowed to see who is here (e.g. row-level security hides\n   * the members of a public workspace you haven't joined). Renders an em dash\n   * rather than lying with an empty stack.\n   */\n  hidden?: boolean\n  /** Makes the stack a button — e.g. to expand the member list below it. */\n  onClick?: () => void\n  /** Rotates the chevron and drives `aria-expanded` when it is a toggle. */\n  expanded?: boolean\n  /** Ring colour behind each face; match the surface it sits on. */\n  ringClassName?: string\n  className?: string\n  testId?: string\n}\n\nconst MAX_DEFAULT = 3\n\n/**\n * An overlapping stack of member faces, with the overflow collapsed to `+N`.\n *\n * Lives here rather than inside a card because \"who is in this thing\" is shown\n * in more than one place — a workspace card, a workspace's own header — and\n * those had drawn it twice. Given `onClick` it becomes the control that expands\n * the full list, which is a better affordance than a button labelled \"Members\"\n * beside the very faces it would reveal.\n */\nexport function MemberAvatarStack({\n  members,\n  total,\n  max = MAX_DEFAULT,\n  hidden = false,\n  onClick,\n  expanded = false,\n  ringClassName = 'border-card',\n  className,\n  testId,\n}: MemberAvatarStackProps) {\n  const count = total ?? members.length\n  const shown = hidden ? [] : members.slice(0, max)\n  const extra = count - shown.length\n\n  const faces = (\n    <>\n      {hidden ? (\n        <span className=\"text-sm text-muted-foreground\">—</span>\n      ) : (\n        shown.map((m, i) => (\n          <Avatar key={i} className={cn('size-6 border-2', ringClassName)} title={m.name}>\n            {m.picture && <AvatarImage src={m.picture} alt={m.name} />}\n            <AvatarFallback className=\"bg-foreground text-xs font-medium text-background\">\n              {initials(m.name || '?')}\n            </AvatarFallback>\n          </Avatar>\n        ))\n      )}\n      {!hidden && extra > 0 && (\n        <Avatar className={cn('size-6 border-2', ringClassName)}>\n          <AvatarFallback className=\"bg-accent text-xs font-medium text-muted-foreground\">\n            +{extra}\n          </AvatarFallback>\n        </Avatar>\n      )}\n    </>\n  )\n\n  if (!onClick) {\n    return (\n      <div className={cn('flex shrink-0 -space-x-2', className)} data-testid={testId}>\n        {faces}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-expanded={expanded}\n      className={cn(\n        'flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full py-0.5 pl-0.5 pr-1.5 transition-colors hover:bg-accent/60 pointer-coarse:min-h-11 pointer-coarse:pr-3',\n        className\n      )}\n      data-testid={testId}\n    >\n      <span className=\"flex -space-x-2\">{faces}</span>\n      <ChevronDown\n        className={cn(\n          'size-3.5 text-muted-foreground transition-transform',\n          expanded && 'rotate-180'\n        )}\n      />\n    </button>\n  )\n}\n"]}

package/dist/chunk-UJE32SST.js

@@ -0,0 +1,39 @@
+"use client";
+import { XCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
+import { cn } from '@arbidocs/react/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Callout.tsx
+var STYLES = {
+  info: { wrap: "border-primary/30 bg-primary/5", icon: "text-primary", Icon: Info },
+  success: { wrap: "border-success/30 bg-success/10", icon: "text-success", Icon: CheckCircle2 },
+  warning: { wrap: "border-warning/40 bg-warning/10", icon: "text-warning", Icon: AlertTriangle },
+  danger: {
+    wrap: "border-destructive/30 bg-destructive/10",
+    icon: "text-destructive",
+    Icon: XCircle
+  }
+};
+function Callout({ variant = "info", title, body, testId }) {
+  const style = STYLES[variant] ?? STYLES.info;
+  const Icon = style.Icon;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex gap-3 rounded-lg border p-4 text-foreground", style.wrap),
+      "data-testid": testId,
+      role: "note",
+      children: [
+        /* @__PURE__ */ jsx(Icon, { className: cn("mt-0.5 size-5 shrink-0", style.icon), "aria-hidden": true }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+          title && /* @__PURE__ */ jsx("p", { className: "font-semibold", children: title }),
+          body && /* @__PURE__ */ jsx("p", { className: "text-sm leading-relaxed text-muted-foreground", children: body })
+        ] })
+      ]
+    }
+  );
+}
+
+export { Callout };
+//# sourceMappingURL=chunk-UJE32SST.js.map
+//# sourceMappingURL=chunk-UJE32SST.js.map

package/dist/chunk-UJE32SST.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Callout.tsx"],"names":[],"mappings":";;;;;AAaA,IAAM,MAAA,GAAmF;AAAA,EACvF,MAAM,EAAE,IAAA,EAAM,kCAAkC,IAAA,EAAM,cAAA,EAAgB,MAAM,IAAA,EAAK;AAAA,EACjF,SAAS,EAAE,IAAA,EAAM,mCAAmC,IAAA,EAAM,cAAA,EAAgB,MAAM,YAAA,EAAa;AAAA,EAC7F,SAAS,EAAE,IAAA,EAAM,mCAAmC,IAAA,EAAM,cAAA,EAAgB,MAAM,aAAA,EAAc;AAAA,EAC9F,MAAA,EAAQ;AAAA,IACN,IAAA,EAAM,yCAAA;AAAA,IACN,IAAA,EAAM,kBAAA;AAAA,IACN,IAAA,EAAM;AAAA;AAEV,CAAA;AAGO,SAAS,QAAQ,EAAE,OAAA,GAAU,QAAQ,KAAA,EAAO,IAAA,EAAM,QAAO,EAAiB;AAC/E,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,OAAO,CAAA,IAAK,MAAA,CAAO,IAAA;AACxC,EAAA,MAAM,OAAO,KAAA,CAAM,IAAA;AACnB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,kDAAA,EAAoD,KAAA,CAAM,IAAI,CAAA;AAAA,MAC5E,aAAA,EAAa,MAAA;AAAA,MACb,IAAA,EAAK,MAAA;AAAA,MAEL,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,WAAW,EAAA,CAAG,wBAAA,EAA0B,MAAM,IAAI,CAAA,EAAG,eAAW,IAAA,EAAC,CAAA;AAAA,wBACvE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACZ,QAAA,EAAA;AAAA,UAAA,KAAA,oBAAS,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,eAAA,EAAiB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UAC7C,IAAA,oBAAQ,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,iDAAiD,QAAA,EAAA,IAAA,EAAK;AAAA,SAAA,EAC9E;AAAA;AAAA;AAAA,GACF;AAEJ","file":"chunk-UJE32SST.js","sourcesContent":["import type { LucideIcon } from 'lucide-react'\nimport { AlertTriangle, CheckCircle2, Info, XCircle } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\n\nexport type CalloutVariant = 'info' | 'success' | 'warning' | 'danger'\n\nexport interface CalloutProps {\n  variant?: CalloutVariant\n  title?: string\n  body?: string\n  testId?: string\n}\n\nconst STYLES: Record<CalloutVariant, { wrap: string; icon: string; Icon: LucideIcon }> = {\n  info: { wrap: 'border-primary/30 bg-primary/5', icon: 'text-primary', Icon: Info },\n  success: { wrap: 'border-success/30 bg-success/10', icon: 'text-success', Icon: CheckCircle2 },\n  warning: { wrap: 'border-warning/40 bg-warning/10', icon: 'text-warning', Icon: AlertTriangle },\n  danger: {\n    wrap: 'border-destructive/30 bg-destructive/10',\n    icon: 'text-destructive',\n    Icon: XCircle,\n  },\n}\n\n/** Inline notice box in one of four semantic tones. */\nexport function Callout({ variant = 'info', title, body, testId }: CalloutProps) {\n  const style = STYLES[variant] ?? STYLES.info\n  const Icon = style.Icon\n  return (\n    <div\n      className={cn('flex gap-3 rounded-lg border p-4 text-foreground', style.wrap)}\n      data-testid={testId}\n      role=\"note\"\n    >\n      <Icon className={cn('mt-0.5 size-5 shrink-0', style.icon)} aria-hidden />\n      <div className=\"min-w-0\">\n        {title && <p className=\"font-semibold\">{title}</p>}\n        {body && <p className=\"text-sm leading-relaxed text-muted-foreground\">{body}</p>}\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/chunk-ULWRNGGE.cjs

@@ -0,0 +1,146 @@
+"use client";
+'use strict';
+
+var ui = require('@arbidocs/react/ui');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/settings/ModalScaffold.tsx
+function useRestoreFocus() {
+  const origin = react.useRef(null);
+  return react.useMemo(
+    () => ({
+      onOpenAutoFocus: () => {
+        origin.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+      },
+      onCloseAutoFocus: (event) => {
+        const element = origin.current;
+        origin.current = null;
+        if (element && element.isConnected && element !== document.body) {
+          event.preventDefault();
+          element.focus();
+        }
+      }
+    }),
+    []
+  );
+}
+var MODAL_SECTION_TITLE_CLASS = "mb-2 flex items-center gap-1 text-sm font-medium text-muted-foreground";
+function ModalHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.DialogHeader,
+    {
+      "data-slot": "modal-header",
+      className: ui.cn("flex-shrink-0 rounded-t-lg bg-transparent p-6 pb-3 pr-12", className),
+      ...props
+    }
+  );
+}
+function ModalSection({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "modal-section", className: ui.cn("pt-4", className), ...props });
+}
+function ModalSectionTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "modal-section-title",
+      className: ui.cn(MODAL_SECTION_TITLE_CLASS, className),
+      ...props
+    }
+  );
+}
+var SIZE_CLASS = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-2xl",
+  xl: "sm:max-w-4xl"
+};
+function ModalBody({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "modal-body", className: ui.cn("space-y-4", className), ...props });
+}
+function ModalFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ui.DialogFooter,
+    {
+      "data-slot": "modal-footer",
+      className: ui.cn(
+        "sticky bottom-0 -mx-6 -mb-6 mt-4 border-t border-border bg-background px-6 py-3",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ModalScaffold({
+  open,
+  onOpenChange,
+  title,
+  description,
+  showDescription = false,
+  icon,
+  size = "md",
+  presentation,
+  className,
+  testId,
+  role = "dialog",
+  initialFocusRef,
+  dismissible = true,
+  onInteractOutside,
+  onEscapeKeyDown,
+  children
+}) {
+  const restoreFocus = useRestoreFocus();
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    ui.DialogContent,
+    {
+      role,
+      presentation: presentation ?? (size === "lg" || size === "xl" ? "sheet" : "center"),
+      className: ui.cn(SIZE_CLASS[size], "flex flex-col gap-0 overflow-hidden p-0", className),
+      "data-testid": testId,
+      onInteractOutside: (e) => {
+        if (role === "alertdialog" || !dismissible) e.preventDefault();
+        onInteractOutside?.(e);
+      },
+      onEscapeKeyDown: (e) => {
+        if (!dismissible) e.preventDefault();
+        onEscapeKeyDown?.(e);
+      },
+      onOpenAutoFocus: (e) => {
+        restoreFocus.onOpenAutoFocus(e);
+        if (initialFocusRef?.current) {
+          e.preventDefault();
+          initialFocusRef.current.focus();
+        }
+      },
+      onCloseAutoFocus: restoreFocus.onCloseAutoFocus,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ModalHeader, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(ui.DialogTitle, { className: "flex items-center gap-2", children: [
+            icon,
+            title
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.DialogDescription, { className: showDescription ? void 0 : "sr-only", children: description ?? title })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-slot": "modal-scroll",
+            className: "min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain px-6 pb-6",
+            children
+          }
+        )
+      ]
+    }
+  ) });
+}
+ModalScaffold.Body = ModalBody;
+ModalScaffold.Footer = ModalFooter;
+
+exports.MODAL_SECTION_TITLE_CLASS = MODAL_SECTION_TITLE_CLASS;
+exports.ModalHeader = ModalHeader;
+exports.ModalScaffold = ModalScaffold;
+exports.ModalSection = ModalSection;
+exports.ModalSectionTitle = ModalSectionTitle;
+exports.useRestoreFocus = useRestoreFocus;
+//# sourceMappingURL=chunk-ULWRNGGE.cjs.map
+//# sourceMappingURL=chunk-ULWRNGGE.cjs.map

package/dist/chunk-ULWRNGGE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/useRestoreFocus.ts","../src/settings/ModalScaffold.tsx"],"names":["useRef","useMemo","jsx","DialogHeader","cn","DialogFooter","Dialog","jsxs","DialogContent","DialogTitle","DialogDescription"],"mappings":"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","file":"chunk-ULWRNGGE.cjs","sourcesContent":["import { useMemo, useRef } from 'react'\n\n/**\n * Props for a Radix `DialogContent` that put focus back where it was when the dialog opened.\n *\n * Radix Dialog returns focus to its `Trigger` on close and, when the dialog is opened from state\n * (no `DialogTrigger`, as every controlled dialog in the blocks is), drops it to `<body>`:\n * a keyboard or screen-reader user loses their place. Spread the result on `DialogContent`.\n */\nexport function useRestoreFocus(): {\n  onOpenAutoFocus: (event: Event) => void\n  onCloseAutoFocus: (event: Event) => void\n} {\n  const origin = useRef<HTMLElement | null>(null)\n  return useMemo(\n    () => ({\n      onOpenAutoFocus: () => {\n        // Runs before the dialog moves focus inside, so this is still the opener.\n        origin.current =\n          document.activeElement instanceof HTMLElement ? document.activeElement : null\n      },\n      onCloseAutoFocus: (event: Event) => {\n        const element = origin.current\n        origin.current = null\n        if (element && element.isConnected && element !== document.body) {\n          event.preventDefault()\n          element.focus()\n        }\n      },\n    }),\n    []\n  )\n}\n","import type { ComponentProps, ReactNode, RefObject } from 'react'\nimport {\n  cn,\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  type DialogPresentation,\n} from '@arbidocs/react/ui'\nimport { useRestoreFocus } from '../lib/useRestoreFocus'\n\n/** Tailwind classes for a modal section heading (also usable on a `Label`). */\nexport const MODAL_SECTION_TITLE_CLASS =\n  'mb-2 flex items-center gap-1 text-sm font-medium text-muted-foreground'\n\n/** Header of a hand-assembled modal: no tinted band, just space. */\nexport function ModalHeader({ className, ...props }: ComponentProps<typeof DialogHeader>) {\n  return (\n    <DialogHeader\n      data-slot=\"modal-header\"\n      className={cn('flex-shrink-0 rounded-t-lg bg-transparent p-6 pb-3 pr-12', className)}\n      {...props}\n    />\n  )\n}\n\n/** A padded group inside a modal body. */\nexport function ModalSection({ className, ...props }: ComponentProps<'div'>) {\n  return <div data-slot=\"modal-section\" className={cn('pt-4', className)} {...props} />\n}\n\n/** Muted label above the content of a {@link ModalSection}. */\nexport function ModalSectionTitle({ className, ...props }: ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"modal-section-title\"\n      className={cn(MODAL_SECTION_TITLE_CLASS, className)}\n      {...props}\n    />\n  )\n}\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl'\n\nconst SIZE_CLASS: Record<ModalSize, string> = {\n  sm: 'sm:max-w-sm',\n  md: 'sm:max-w-md',\n  lg: 'sm:max-w-2xl',\n  xl: 'sm:max-w-4xl',\n}\n\nexport interface ModalScaffoldProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  title: ReactNode\n  /** Accessible description; visually hidden unless `showDescription`. */\n  description?: ReactNode\n  showDescription?: boolean\n  /** Icon shown before the title. */\n  icon?: ReactNode\n  size?: ModalSize\n  /** Phone presentation; defaults to a bottom sheet for `lg`/`xl`, a centred box otherwise. */\n  presentation?: DialogPresentation\n  className?: string\n  testId?: string\n  /**\n   * `alertdialog` for a destructive or blocking confirmation: announced as an alert, dismissed\n   * only through its own buttons or Escape (not by clicking outside).\n   */\n  role?: 'dialog' | 'alertdialog'\n  /**\n   * Block dismissal by outside click AND Escape; only the dialog's own buttons close it. For a\n   * dialog that shows a secret once (a new API key). Default false. An `alertdialog` already\n   * ignores outside clicks.\n   */\n  dismissible?: boolean\n  /** Called on a pointer/focus interaction outside; `preventDefault()` keeps the dialog open. */\n  onInteractOutside?: (event: Event) => void\n  /** Called on Escape; `preventDefault()` keeps the dialog open. */\n  onEscapeKeyDown?: (event: KeyboardEvent) => void\n  /** Element that receives focus when the dialog opens (an alert dialog focuses its safe action). */\n  initialFocusRef?: RefObject<HTMLElement | null>\n  children?: ReactNode\n}\n\nfunction ModalBody({ className, ...props }: ComponentProps<'div'>) {\n  return <div data-slot=\"modal-body\" className={cn('space-y-4', className)} {...props} />\n}\n\n/**\n * Action row. Stacked full-width on phones (primary action on top), right-aligned on wider\n * screens. Sticks to the bottom of the scrolling dialog body so the actions stay reachable.\n */\nfunction ModalFooter({ className, ...props }: ComponentProps<typeof DialogFooter>) {\n  return (\n    <DialogFooter\n      data-slot=\"modal-footer\"\n      className={cn(\n        'sticky bottom-0 -mx-6 -mb-6 mt-4 border-t border-border bg-background px-6 py-3',\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n/**\n * Standard dialog: icon + title + description header, then the compound\n * `ModalScaffold.Body` / `ModalScaffold.Footer` slots.\n */\nexport function ModalScaffold({\n  open,\n  onOpenChange,\n  title,\n  description,\n  showDescription = false,\n  icon,\n  size = 'md',\n  presentation,\n  className,\n  testId,\n  role = 'dialog',\n  initialFocusRef,\n  dismissible = true,\n  onInteractOutside,\n  onEscapeKeyDown,\n  children,\n}: ModalScaffoldProps) {\n  const restoreFocus = useRestoreFocus()\n  return (\n    <Dialog open={open} onOpenChange={onOpenChange}>\n      <DialogContent\n        role={role}\n        presentation={presentation ?? (size === 'lg' || size === 'xl' ? 'sheet' : 'center')}\n        className={cn(SIZE_CLASS[size], 'flex flex-col gap-0 overflow-hidden p-0', className)}\n        data-testid={testId}\n        onInteractOutside={(e) => {\n          if (role === 'alertdialog' || !dismissible) e.preventDefault()\n          onInteractOutside?.(e)\n        }}\n        onEscapeKeyDown={(e) => {\n          if (!dismissible) e.preventDefault()\n          onEscapeKeyDown?.(e)\n        }}\n        onOpenAutoFocus={(e) => {\n          restoreFocus.onOpenAutoFocus(e)\n          if (initialFocusRef?.current) {\n            e.preventDefault()\n            initialFocusRef.current.focus()\n          }\n        }}\n        onCloseAutoFocus={restoreFocus.onCloseAutoFocus}\n      >\n        <ModalHeader>\n          <DialogTitle className=\"flex items-center gap-2\">\n            {icon}\n            {title}\n          </DialogTitle>\n          <DialogDescription className={showDescription ? undefined : 'sr-only'}>\n            {description ?? title}\n          </DialogDescription>\n        </ModalHeader>\n        <div\n          data-slot=\"modal-scroll\"\n          className=\"min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain px-6 pb-6\"\n        >\n          {children}\n        </div>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nModalScaffold.Body = ModalBody\nModalScaffold.Footer = ModalFooter\n"]}

package/dist/chunk-UWGIB3VQ.js

@@ -0,0 +1,64 @@
+"use client";
+import { initials } from './chunk-WW6EOVZA.js';
+import { ChevronDown } from 'lucide-react';
+import { Avatar, AvatarImage, AvatarFallback, cn } from '@arbidocs/react/ui';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var MAX_DEFAULT = 3;
+function MemberAvatarStack({
+  members,
+  total,
+  max = MAX_DEFAULT,
+  hidden = false,
+  onClick,
+  expanded = false,
+  ringClassName = "border-card",
+  className,
+  testId
+}) {
+  const count = total ?? members.length;
+  const shown = hidden ? [] : members.slice(0, max);
+  const extra = count - shown.length;
+  const faces = /* @__PURE__ */ jsxs(Fragment, { children: [
+    hidden ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "\u2014" }) : shown.map((m, i) => /* @__PURE__ */ jsxs(Avatar, { className: cn("size-6 border-2", ringClassName), title: m.name, children: [
+      m.picture && /* @__PURE__ */ jsx(AvatarImage, { src: m.picture, alt: m.name }),
+      /* @__PURE__ */ jsx(AvatarFallback, { className: "bg-foreground text-xs font-medium text-background", children: initials(m.name || "?") })
+    ] }, i)),
+    !hidden && extra > 0 && /* @__PURE__ */ jsx(Avatar, { className: cn("size-6 border-2", ringClassName), children: /* @__PURE__ */ jsxs(AvatarFallback, { className: "bg-accent text-xs font-medium text-muted-foreground", children: [
+      "+",
+      extra
+    ] }) })
+  ] });
+  if (!onClick) {
+    return /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 -space-x-2", className), "data-testid": testId, children: faces });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-expanded": expanded,
+      className: cn(
+        "flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full py-0.5 pl-0.5 pr-1.5 transition-colors hover:bg-accent/60 pointer-coarse:min-h-11 pointer-coarse:pr-3",
+        className
+      ),
+      "data-testid": testId,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex -space-x-2", children: faces }),
+        /* @__PURE__ */ jsx(
+          ChevronDown,
+          {
+            className: cn(
+              "size-3.5 text-muted-foreground transition-transform",
+              expanded && "rotate-180"
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { MemberAvatarStack };
+//# sourceMappingURL=chunk-UWGIB3VQ.js.map
+//# sourceMappingURL=chunk-UWGIB3VQ.js.map

package/dist/chunk-UWGIB3VQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MemberAvatarStack.tsx"],"names":[],"mappings":";;;;;AAgCA,IAAM,WAAA,GAAc,CAAA;AAWb,SAAS,iBAAA,CAAkB;AAAA,EAChC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA,GAAM,WAAA;AAAA,EACN,MAAA,GAAS,KAAA;AAAA,EACT,OAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,aAAA,GAAgB,aAAA;AAAA,EAChB,SAAA;AAAA,EACA;AACF,CAAA,EAA2B;AACzB,EAAA,MAAM,KAAA,GAAQ,SAAS,OAAA,CAAQ,MAAA;AAC/B,EAAA,MAAM,QAAQ,MAAA,GAAS,KAAK,OAAA,CAAQ,KAAA,CAAM,GAAG,GAAG,CAAA;AAChD,EAAA,MAAM,KAAA,GAAQ,QAAQ,KAAA,CAAM,MAAA;AAE5B,EAAA,MAAM,wBACJ,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,MAAA,mBACC,GAAA,CAAC,UAAK,SAAA,EAAU,+BAAA,EAAgC,oBAAC,CAAA,GAEjD,KAAA,CAAM,IAAI,CAAC,CAAA,EAAG,sBACZ,IAAA,CAAC,MAAA,EAAA,EAAe,WAAW,EAAA,CAAG,iBAAA,EAAmB,aAAa,CAAA,EAAG,KAAA,EAAO,EAAE,IAAA,EACvE,QAAA,EAAA;AAAA,MAAA,CAAA,CAAE,OAAA,wBAAY,WAAA,EAAA,EAAY,GAAA,EAAK,EAAE,OAAA,EAAS,GAAA,EAAK,EAAE,IAAA,EAAM,CAAA;AAAA,sBACxD,GAAA,CAAC,kBAAe,SAAA,EAAU,mDAAA,EACvB,mBAAS,CAAA,CAAE,IAAA,IAAQ,GAAG,CAAA,EACzB;AAAA,KAAA,EAAA,EAJW,CAKb,CACD,CAAA;AAAA,IAEF,CAAC,MAAA,IAAU,KAAA,GAAQ,CAAA,wBACjB,MAAA,EAAA,EAAO,SAAA,EAAW,EAAA,CAAG,iBAAA,EAAmB,aAAa,CAAA,EACpD,QAAA,kBAAA,IAAA,CAAC,cAAA,EAAA,EAAe,WAAU,qDAAA,EAAsD,QAAA,EAAA;AAAA,MAAA,GAAA;AAAA,MAC5E;AAAA,KAAA,EACJ,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAGF,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,uBACE,GAAA,CAAC,SAAI,SAAA,EAAW,EAAA,CAAG,4BAA4B,SAAS,CAAA,EAAG,aAAA,EAAa,MAAA,EACrE,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA;AAAA,MACA,eAAA,EAAe,QAAA;AAAA,MACf,SAAA,EAAW,EAAA;AAAA,QACT,sKAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MAEb,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EAAmB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,wBACzC,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,qDAAA;AAAA,cACA,QAAA,IAAY;AAAA;AACd;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"chunk-UWGIB3VQ.js","sourcesContent":["import { ChevronDown } from 'lucide-react'\nimport { Avatar, AvatarFallback, AvatarImage, cn } from '@arbidocs/react/ui'\nimport { initials } from '../lib/format'\n\n/** One face in the stack — source-agnostic, not a raw SDK user. */\nexport interface StackedMember {\n  name: string\n  picture?: string | null\n}\n\nexport interface MemberAvatarStackProps {\n  members: StackedMember[]\n  /** Total, when it exceeds what's shown. Defaults to `members.length`. */\n  total?: number\n  /** Faces before the rest collapse into a `+N`. */\n  max?: number\n  /**\n   * The viewer isn't allowed to see who is here (e.g. row-level security hides\n   * the members of a public workspace you haven't joined). Renders an em dash\n   * rather than lying with an empty stack.\n   */\n  hidden?: boolean\n  /** Makes the stack a button — e.g. to expand the member list below it. */\n  onClick?: () => void\n  /** Rotates the chevron and drives `aria-expanded` when it is a toggle. */\n  expanded?: boolean\n  /** Ring colour behind each face; match the surface it sits on. */\n  ringClassName?: string\n  className?: string\n  testId?: string\n}\n\nconst MAX_DEFAULT = 3\n\n/**\n * An overlapping stack of member faces, with the overflow collapsed to `+N`.\n *\n * Lives here rather than inside a card because \"who is in this thing\" is shown\n * in more than one place — a workspace card, a workspace's own header — and\n * those had drawn it twice. Given `onClick` it becomes the control that expands\n * the full list, which is a better affordance than a button labelled \"Members\"\n * beside the very faces it would reveal.\n */\nexport function MemberAvatarStack({\n  members,\n  total,\n  max = MAX_DEFAULT,\n  hidden = false,\n  onClick,\n  expanded = false,\n  ringClassName = 'border-card',\n  className,\n  testId,\n}: MemberAvatarStackProps) {\n  const count = total ?? members.length\n  const shown = hidden ? [] : members.slice(0, max)\n  const extra = count - shown.length\n\n  const faces = (\n    <>\n      {hidden ? (\n        <span className=\"text-sm text-muted-foreground\">—</span>\n      ) : (\n        shown.map((m, i) => (\n          <Avatar key={i} className={cn('size-6 border-2', ringClassName)} title={m.name}>\n            {m.picture && <AvatarImage src={m.picture} alt={m.name} />}\n            <AvatarFallback className=\"bg-foreground text-xs font-medium text-background\">\n              {initials(m.name || '?')}\n            </AvatarFallback>\n          </Avatar>\n        ))\n      )}\n      {!hidden && extra > 0 && (\n        <Avatar className={cn('size-6 border-2', ringClassName)}>\n          <AvatarFallback className=\"bg-accent text-xs font-medium text-muted-foreground\">\n            +{extra}\n          </AvatarFallback>\n        </Avatar>\n      )}\n    </>\n  )\n\n  if (!onClick) {\n    return (\n      <div className={cn('flex shrink-0 -space-x-2', className)} data-testid={testId}>\n        {faces}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-expanded={expanded}\n      className={cn(\n        'flex shrink-0 cursor-pointer items-center gap-1.5 rounded-full py-0.5 pl-0.5 pr-1.5 transition-colors hover:bg-accent/60 pointer-coarse:min-h-11 pointer-coarse:pr-3',\n        className\n      )}\n      data-testid={testId}\n    >\n      <span className=\"flex -space-x-2\">{faces}</span>\n      <ChevronDown\n        className={cn(\n          'size-3.5 text-muted-foreground transition-transform',\n          expanded && 'rotate-180'\n        )}\n      />\n    </button>\n  )\n}\n"]}

package/dist/chunk-V4ISCZJ7.cjs

@@ -0,0 +1,207 @@
+"use client";
+'use strict';
+
+var chunkPPCATBOY_cjs = require('./chunk-PPCATBOY.cjs');
+var chunkMHVNT4J3_cjs = require('./chunk-MHVNT4J3.cjs');
+var react = require('react');
+var lucideReact = require('lucide-react');
+var ui = require('@arbidocs/react/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+var NARROW_BELOW_PX = 480;
+var DEFAULT_SELECTION_BAR_LABELS = {
+  selected: "selected",
+  clearSelection: "Clear selection",
+  review: "Review",
+  selectionActions: "Selection actions"
+};
+function SelectionBar(props) {
+  if (props.count === 0 && !props.status) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(SelectionBarInner, { ...props });
+}
+function SelectionBarInner({
+  count,
+  onClear,
+  onReview,
+  actions,
+  children,
+  status,
+  selectedLabel,
+  labels,
+  testIds,
+  className
+}) {
+  const l = { ...DEFAULT_SELECTION_BAR_LABELS, ...labels };
+  const hasSelection = count > 0;
+  const rootRef = react.useRef(null);
+  const actionsRef = react.useRef(null);
+  const [isCompact, setIsCompact] = react.useState(false);
+  const [isNarrow, setIsNarrow] = react.useState(false);
+  const overflowRootWidthRef = react.useRef(Number.POSITIVE_INFINITY);
+  const measureRef = react.useRef(() => {
+  });
+  measureRef.current = () => {
+    const root = rootRef.current;
+    const el = actionsRef.current;
+    if (!root || !el) return;
+    const available = root.parentElement?.clientWidth ?? 0;
+    setIsNarrow(available > 0 && available < NARROW_BELOW_PX);
+    if (!isCompact) {
+      if (el.scrollWidth > el.clientWidth + 1) {
+        overflowRootWidthRef.current = root.clientWidth;
+        setIsCompact(true);
+      }
+    } else if (root.clientWidth > overflowRootWidthRef.current + 64) {
+      setIsCompact(false);
+    }
+  };
+  react.useLayoutEffect(() => {
+    measureRef.current();
+    const root = rootRef.current;
+    if (!root) return;
+    return chunkPPCATBOY_cjs.observeResize(root, () => measureRef.current());
+  }, []);
+  react.useLayoutEffect(() => {
+    measureRef.current();
+    const inner = actionsRef.current;
+    if (!inner || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(() => measureRef.current());
+    inner.querySelectorAll("button").forEach((button) => observer.observe(button));
+    return () => observer.disconnect();
+  });
+  react.useLayoutEffect(() => {
+    let isCancelled = false;
+    void document.fonts?.ready.then(() => {
+      if (!isCancelled) measureRef.current();
+    });
+    return () => {
+      isCancelled = true;
+    };
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "selection-bar",
+      className: ui.cn("pointer-events-none sticky bottom-0 z-30 h-0", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-x-0 bottom-4 flex justify-center px-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: rootRef,
+          role: "toolbar",
+          "aria-label": l.selectionActions,
+          "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.toolbar, { testId: "bulk-actions-toolbar" }),
+          "data-narrow": isNarrow || void 0,
+          className: "pointer-events-auto flex min-h-12 max-w-full items-center rounded-lg border border-border bg-popover px-2 py-1.5 shadow-xl",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2 px-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.count, { testId: "bulk-selected-count" }),
+                "aria-live": "polite",
+                className: ui.cn(
+                  "flex shrink-0 items-center rounded-full bg-accent text-sm font-semibold tabular-nums text-accent-foreground",
+                  isCompact ? "gap-1 px-2.5 py-1" : "gap-2 px-3 py-1"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    count,
+                    !isCompact && ` ${selectedLabel ?? l.selected}`
+                  ] }),
+                  hasSelection && /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onClear,
+                      "aria-label": l.clearSelection,
+                      "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.clear, { testId: "bulk-clear-selection-button" }),
+                      className: "rounded-full p-0.5 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:p-[15px]",
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" })
+                    }
+                  )
+                ]
+              }
+            ),
+            onReview && /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: onReview,
+                "aria-label": isNarrow ? l.review : void 0,
+                "data-testid": chunkMHVNT4J3_cjs.testIdOr(testIds?.review, { testId: "bulk-review-button" }),
+                className: "flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-accent px-2.5 text-sm font-medium text-accent-foreground transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:h-11",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.BookOpen, { className: "size-3.5" }),
+                  !isNarrow && l.review
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-px shrink-0 bg-border" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                ref: actionsRef,
+                className: "flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overscroll-x-contain [scrollbar-width:none]",
+                children: [
+                  status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center gap-2", children: status }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: ui.cn(
+                        "flex min-w-0 items-center gap-2",
+                        !hasSelection && "pointer-events-none opacity-40"
+                      ),
+                      children: [
+                        actions?.map((a) => /* @__PURE__ */ jsxRuntime.jsx(SelectionBarAction, { ...a, isCompact }, a.id)),
+                        typeof children === "function" ? children(isCompact, isNarrow) : children
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        }
+      ) })
+    }
+  );
+}
+function SelectionBarAction({
+  icon: Icon,
+  label,
+  onClick,
+  disabled = false,
+  variant = "ghost",
+  tooltip,
+  testId,
+  className,
+  isCompact = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Tooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      ui.Button,
+      {
+        variant,
+        size: "sm",
+        onClick,
+        disabled,
+        "aria-label": isCompact ? label : void 0,
+        "data-testid": testId,
+        className: ui.cn(
+          "h-8 shrink-0 gap-1.5 whitespace-nowrap px-2 disabled:opacity-50 pointer-coarse:h-11",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-4" }),
+          !isCompact && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: label })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.TooltipContent, { children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: tooltip ?? label }) })
+  ] });
+}
+
+exports.DEFAULT_SELECTION_BAR_LABELS = DEFAULT_SELECTION_BAR_LABELS;
+exports.SelectionBar = SelectionBar;
+exports.SelectionBarAction = SelectionBarAction;
+//# sourceMappingURL=chunk-V4ISCZJ7.cjs.map
+//# sourceMappingURL=chunk-V4ISCZJ7.cjs.map

package/dist/chunk-V4ISCZJ7.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/files/SelectionBar.tsx"],"names":["jsx","useRef","useState","useLayoutEffect","observeResize","cn","testIdOr","jsxs","X","BookOpen","Tooltip","TooltipTrigger","Button","TooltipContent"],"mappings":"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","file":"chunk-V4ISCZJ7.cjs","sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react'\nimport type { ReactNode } from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { BookOpen, X } from 'lucide-react'\nimport { Button, Tooltip, TooltipContent, TooltipTrigger, cn } from '@arbidocs/react/ui'\nimport { testIdOr } from '../chat/test-id'\nimport { observeResize } from '../lib/observe-resize'\n\nexport interface SelectionBarActionItem {\n  id: string\n  icon: LucideIcon\n  label: string\n  onClick: () => void\n  disabled?: boolean\n  variant?: 'default' | 'outline' | 'destructive' | 'ghost' | 'secondary'\n  /** Tooltip text; falls back to `label`. */\n  tooltip?: string\n  testId?: string\n  className?: string\n}\n\n/** Container width below which the bar is \"narrow\" (phones): only the essentials stay inline. */\nconst NARROW_BELOW_PX = 480\n\n/** Every fixed string of the selection bar. Pass a partial `labels` to translate or reword. */\nexport interface SelectionBarLabels {\n  selected: string\n  clearSelection: string\n  review: string\n  selectionActions: string\n}\n\nexport const DEFAULT_SELECTION_BAR_LABELS: SelectionBarLabels = {\n  selected: 'selected',\n  clearSelection: 'Clear selection',\n  review: 'Review',\n  selectionActions: 'Selection actions',\n}\n\nexport interface SelectionBarTestIds {\n  toolbar: string\n  count: string\n  clear: string\n  review: string\n}\n\nexport interface SelectionBarProps {\n  /** Number of selected rows. The bar renders only while this is > 0 (or `status` is set). */\n  count: number\n  onClear: () => void\n  /** Primary-in-bar \"Review\" shortcut (tonal, not the view's filled primary). */\n  onReview?: () => void\n  /** Actions as data. Rendered icon-only automatically when the bar is narrow. */\n  actions?: SelectionBarActionItem[]\n  /**\n   * Free-form actions; a function receives `isCompact` (icon-only) and `isNarrow` (a phone-width\n   * container: fold secondary actions into an overflow menu). Rendered after `actions`.\n   */\n  children?: ReactNode | ((isCompact: boolean, isNarrow: boolean) => ReactNode)\n  /** Always-legible content before the actions (e.g. a running budget); never dimmed. */\n  status?: ReactNode\n  /** Singular noun shown after the count; wins over `labels.selected`. */\n  selectedLabel?: string\n  labels?: Partial<SelectionBarLabels>\n  /** Overrides for the control test ids (defaults keep the current ids). */\n  testIds?: Partial<SelectionBarTestIds>\n  className?: string\n}\n\n/**\n * SelectionBar: the floating bar that appears while rows are selected.\n *\n * Stays on ONE row: when the actions overflow it flips to compact mode (icon-only actions and a\n * count-only badge) instead of wrapping. Sticky zero-height anchor, so showing/hiding it never\n * reflows the content beneath. Every control is always visible (nothing hover-only) and 44px on\n * coarse pointers.\n */\nexport function SelectionBar(props: SelectionBarProps) {\n  if (props.count === 0 && !props.status) return null\n  return <SelectionBarInner {...props} />\n}\n\nfunction SelectionBarInner({\n  count,\n  onClear,\n  onReview,\n  actions,\n  children,\n  status,\n  selectedLabel,\n  labels,\n  testIds,\n  className,\n}: SelectionBarProps) {\n  const l = { ...DEFAULT_SELECTION_BAR_LABELS, ...labels }\n  const hasSelection = count > 0\n  const rootRef = useRef<HTMLDivElement>(null)\n  const actionsRef = useRef<HTMLDivElement>(null)\n  const [isCompact, setIsCompact] = useState(false)\n  const [isNarrow, setIsNarrow] = useState(false)\n  // Root width at which the labelled actions last overflowed. Compared against the (stable) root\n  // width, never the actions' own width, which changes when we collapse labels and would oscillate.\n  const overflowRootWidthRef = useRef(Number.POSITIVE_INFINITY)\n\n  const measureRef = useRef<() => void>(() => {})\n  measureRef.current = () => {\n    const root = rootRef.current\n    const el = actionsRef.current\n    if (!root || !el) return\n    // The bar is content-sized, so judge narrowness by the space it is given (its anchor).\n    const available = root.parentElement?.clientWidth ?? 0\n    setIsNarrow(available > 0 && available < NARROW_BELOW_PX)\n    if (!isCompact) {\n      if (el.scrollWidth > el.clientWidth + 1) {\n        overflowRootWidthRef.current = root.clientWidth\n        setIsCompact(true)\n      }\n    } else if (root.clientWidth > overflowRootWidthRef.current + 64) {\n      setIsCompact(false)\n    }\n  }\n\n  useLayoutEffect(() => {\n    measureRef.current()\n    const root = rootRef.current\n    if (!root) return\n    return observeResize(root, () => measureRef.current())\n  }, [])\n  // The bar is capped by its anchor, so its own size does not change when the actions overflow, and\n  // the actions' text widens once the web font loads. Re-measure after every render and whenever\n  // an action changes size. The measurement only sets state on a change, so this cannot loop.\n  useLayoutEffect(() => {\n    measureRef.current()\n    const inner = actionsRef.current\n    if (!inner || typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(() => measureRef.current())\n    inner.querySelectorAll('button').forEach((button) => observer.observe(button))\n    return () => observer.disconnect()\n  })\n  useLayoutEffect(() => {\n    let isCancelled = false\n    void document.fonts?.ready.then(() => {\n      if (!isCancelled) measureRef.current()\n    })\n    return () => {\n      isCancelled = true\n    }\n  }, [])\n\n  return (\n    <div\n      data-slot=\"selection-bar\"\n      className={cn('pointer-events-none sticky bottom-0 z-30 h-0', className)}\n    >\n      <div className=\"absolute inset-x-0 bottom-4 flex justify-center px-3\">\n        <div\n          ref={rootRef}\n          role=\"toolbar\"\n          aria-label={l.selectionActions}\n          data-testid={testIdOr(testIds?.toolbar, { testId: 'bulk-actions-toolbar' })}\n          data-narrow={isNarrow || undefined}\n          className=\"pointer-events-auto flex min-h-12 max-w-full items-center rounded-lg border border-border bg-popover px-2 py-1.5 shadow-xl\"\n        >\n          <div className=\"flex min-w-0 flex-1 items-center gap-2 px-1\">\n            <div\n              data-testid={testIdOr(testIds?.count, { testId: 'bulk-selected-count' })}\n              aria-live=\"polite\"\n              className={cn(\n                'flex shrink-0 items-center rounded-full bg-accent text-sm font-semibold tabular-nums text-accent-foreground',\n                isCompact ? 'gap-1 px-2.5 py-1' : 'gap-2 px-3 py-1'\n              )}\n            >\n              <span>\n                {count}\n                {!isCompact && ` ${selectedLabel ?? l.selected}`}\n              </span>\n              {hasSelection && (\n                <button\n                  type=\"button\"\n                  onClick={onClear}\n                  aria-label={l.clearSelection}\n                  data-testid={testIdOr(testIds?.clear, { testId: 'bulk-clear-selection-button' })}\n                  className=\"rounded-full p-0.5 transition-colors hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:p-[15px]\"\n                >\n                  <X className=\"size-3.5\" />\n                </button>\n              )}\n            </div>\n\n            {onReview && (\n              <button\n                type=\"button\"\n                onClick={onReview}\n                aria-label={isNarrow ? l.review : undefined}\n                data-testid={testIdOr(testIds?.review, { testId: 'bulk-review-button' })}\n                className=\"flex h-8 shrink-0 items-center gap-1.5 rounded-md bg-accent px-2.5 text-sm font-medium text-accent-foreground transition-colors hover:bg-accent/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring pointer-coarse:h-11\"\n              >\n                <BookOpen className=\"size-3.5\" />\n                {!isNarrow && l.review}\n              </button>\n            )}\n\n            <div className=\"h-6 w-px shrink-0 bg-border\" />\n\n            <div\n              ref={actionsRef}\n              className=\"flex min-w-0 flex-1 items-center gap-2 overflow-x-auto overscroll-x-contain [scrollbar-width:none]\"\n            >\n              {status && <div className=\"flex shrink-0 items-center gap-2\">{status}</div>}\n              <div\n                className={cn(\n                  'flex min-w-0 items-center gap-2',\n                  !hasSelection && 'pointer-events-none opacity-40'\n                )}\n              >\n                {actions?.map((a) => (\n                  <SelectionBarAction key={a.id} {...a} isCompact={isCompact} />\n                ))}\n                {typeof children === 'function' ? children(isCompact, isNarrow) : children}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport interface SelectionBarActionProps extends Omit<SelectionBarActionItem, 'id'> {\n  /** Icon-only (the bar passes this when narrow). */\n  isCompact?: boolean\n}\n\n/** One action button in the bar: icon + label, icon-only when compact, always with a tooltip. */\nexport function SelectionBarAction({\n  icon: Icon,\n  label,\n  onClick,\n  disabled = false,\n  variant = 'ghost',\n  tooltip,\n  testId,\n  className,\n  isCompact = false,\n}: SelectionBarActionProps) {\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>\n        <Button\n          variant={variant}\n          size=\"sm\"\n          onClick={onClick}\n          disabled={disabled}\n          aria-label={isCompact ? label : undefined}\n          data-testid={testId}\n          className={cn(\n            'h-8 shrink-0 gap-1.5 whitespace-nowrap px-2 disabled:opacity-50 pointer-coarse:h-11',\n            className\n          )}\n        >\n          <Icon className=\"size-4\" />\n          {!isCompact && <span className=\"text-sm\">{label}</span>}\n        </Button>\n      </TooltipTrigger>\n      <TooltipContent>\n        <p>{tooltip ?? label}</p>\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n"]}