@arbidocs/blocks 0.5.120 → 0.5.122

package/dist/{chunk-6WMMZLEV.cjs → chunk-XJEXFEWG.cjs}

@@ -207,35 +207,10 @@ function PageContainer({
     }
   );
 }
-function ToolButton({
-  onClick,
-  label,
-  active = false,
-  "data-testid": testId,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "button",
-    {
-      type: "button",
-      onClick,
-      title: label,
-      "aria-label": label,
-      "data-slot": "tool-button",
-      "data-testid": testId,
-      className: ui.cn(
-        "relative flex size-9 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-accent-foreground pointer-coarse:size-11",
-        active ? "bg-accent text-accent-foreground" : "text-muted-foreground"
-      ),
-      children
-    }
-  );
-}
 
 exports.DEFAULT_OVERLAY_ZONE_ID = DEFAULT_OVERLAY_ZONE_ID;
 exports.DEFAULT_PAGE_CONTAINER_PADDING = DEFAULT_PAGE_CONTAINER_PADDING;
 exports.PageContainer = PageContainer;
 exports.Shell = Shell;
-exports.ToolButton = ToolButton;
-//# sourceMappingURL=chunk-6WMMZLEV.cjs.map
-//# sourceMappingURL=chunk-6WMMZLEV.cjs.map
+//# sourceMappingURL=chunk-XJEXFEWG.cjs.map
+//# sourceMappingURL=chunk-XJEXFEWG.cjs.map

package/dist/chunk-XJEXFEWG.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shell/Shell.tsx"],"names":["BlocksTooltipProvider","jsxs","cn","jsx","useRef","useState","useLayoutEffect","useCallback","useDrawerBehavior","X"],"mappings":"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","file":"chunk-XJEXFEWG.cjs","sourcesContent":["import {\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type MouseEventHandler,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\nimport { useDrawerBehavior } from '../lib/use-drawer'\nimport { BlocksTooltipProvider } from '../provider/TooltipScope'\n\n/** Default id of the element overlay-mode panels portal into (see `Shell.Content`). */\nexport const DEFAULT_OVERLAY_ZONE_ID = 'app-overlay-zone'\n\nexport interface ShellRootProps {\n  /** Full-width strip above everything (e.g. a deletion-pending banner). */\n  banner?: ReactNode\n  /** Top chrome: a Shell.Topbar on list pages, a MobileAppBar on phones; omit for none. */\n  topbar?: ReactNode\n  /** The Sidebar.Root (and its drawer backdrop). */\n  sidebar?: ReactNode\n  /** Phone bottom navigation. */\n  tabBar?: ReactNode\n  /** Right-hand column beside the content: a `Shell.Dock` (chat, inspector...). */\n  aside?: ReactNode\n  /** Extra layers inside the body row (connection monitor, …). */\n  overlays?: ReactNode\n  /** The Shell.Content region. */\n  children: ReactNode\n  className?: string\n  'data-testid'?: string\n}\n\n/**\n * The application frame: banner, top chrome, then a body row holding the sidebar beside the\n * content, then the phone tab bar. Every region is a slot, so a custom UI composes its own.\n */\nfunction ShellRoot({\n  banner,\n  topbar,\n  sidebar,\n  tabBar,\n  aside,\n  overlays,\n  children,\n  className,\n  'data-testid': testId,\n}: ShellRootProps) {\n  return (\n    <BlocksTooltipProvider>\n      <div\n        data-slot=\"shell\"\n        data-testid={testId}\n        className={cn('flex h-screen h-dvh flex-col', className)}\n      >\n        {banner}\n        {topbar}\n        {/* `relative` anchors the sidebar's slide-out overlays to this row. */}\n        <div className=\"relative flex flex-1 overflow-hidden\">\n          {sidebar}\n          {children}\n          {aside}\n          {overlays}\n        </div>\n        {tabBar}\n      </div>\n    </BlocksTooltipProvider>\n  )\n}\n\nexport interface ShellContentProps {\n  children: ReactNode\n  /** Scrolling element, for scroll restoration. */\n  scrollRef?: Ref<HTMLDivElement>\n  onClick?: MouseEventHandler<HTMLDivElement>\n  /**\n   * Overlay-mode panels portal into this id and cover the content column only. Defaults to\n   * `DEFAULT_OVERLAY_ZONE_ID`.\n   */\n  overlayZoneId?: string\n  className?: string\n}\n\n/**\n * The content column beside the sidebar. It is `relative` so overlay-mode panels (portalled into\n * the overlay zone) cover this region only, leaving the sidebar and its actions interactive.\n */\nfunction ShellContent({\n  children,\n  scrollRef,\n  onClick,\n  overlayZoneId = DEFAULT_OVERLAY_ZONE_ID,\n  className,\n}: ShellContentProps) {\n  return (\n    <div\n      data-slot=\"shell-content\"\n      className={cn('flex min-w-0 flex-1 flex-col', className)}\n      onClick={onClick}\n    >\n      <div className=\"relative min-h-0 flex-1\">\n        {/* The content column is a CSS container: pages and parts size by its width with\n            container variants (`@3xl:`...), so an open dock or a narrow window is honoured,\n            which viewport breakpoints cannot do. */}\n        <div ref={scrollRef} className=\"@container h-full overflow-auto\">\n          {children}\n        </div>\n        <div id={overlayZoneId} data-slot=\"overlay-zone\" />\n      </div>\n    </div>\n  )\n}\n\nexport interface ShellTopbarProps {\n  /** Left side: guidance / breadcrumbs, centred in the page column. */\n  children?: ReactNode\n  /** Right side: the action cluster. */\n  actions?: ReactNode\n  className?: string\n}\n\n/** Space kept between the left side and the action cluster where they would meet. */\nconst TOPBAR_ACTIONS_GAP = 8\n\n/**\n * How far the centred column runs under the absolutely placed action cluster (plus a gap), so the\n * column can stop short of it; 0 while they don't meet (a wide screen, few actions).\n */\nfunction useActionsOverlap() {\n  const rowRef = useRef<HTMLDivElement>(null)\n  const actionsRef = useRef<HTMLDivElement>(null)\n  const [overlap, setOverlap] = useState(0)\n  useLayoutEffect(() => {\n    const row = rowRef.current\n    const cluster = actionsRef.current\n    if (!row || !cluster || typeof ResizeObserver === 'undefined') return\n    const measure = () => {\n      const { right } = row.getBoundingClientRect()\n      const { left, width } = cluster.getBoundingClientRect()\n      setOverlap(width > 0 ? Math.max(0, Math.ceil(right - left + TOPBAR_ACTIONS_GAP)) : 0)\n    }\n    const observer = new ResizeObserver(measure)\n    observer.observe(row.parentElement ?? row)\n    observer.observe(cluster)\n    measure()\n    return () => observer.disconnect()\n  }, [])\n  return { rowRef, actionsRef, overlap }\n}\n\n/** A minimal white header for pages with no sidebar (the workspaces list). */\nfunction ShellTopbar({ children, actions, className }: ShellTopbarProps) {\n  // The left side stays centred in the page column but never runs under the actions (they would\n  // cover its end: a guidance strip's dismiss button, say).\n  const { rowRef, actionsRef, overlap } = useActionsOverlap()\n  return (\n    // `relative z-30` keeps dropdowns the header opens above the page region (a later sibling).\n    <div\n      data-slot=\"shell-topbar\"\n      className={cn('relative z-30 flex h-14 shrink-0 items-center bg-background px-2', className)}\n    >\n      <div ref={rowRef} className=\"mx-auto flex w-full max-w-6xl items-center\">\n        <div\n          className=\"hidden min-w-0 flex-1 px-6 sm:block\"\n          style={overlap > 0 ? { marginRight: overlap } : undefined}\n        >\n          {children}\n        </div>\n      </div>\n      <div\n        ref={actionsRef}\n        className=\"absolute right-4 top-1/2 flex -translate-y-1/2 items-center gap-1\"\n      >\n        {actions}\n      </div>\n    </div>\n  )\n}\n\nexport interface ShellDockProps {\n  isOpen: boolean\n  /** Called with `false` by the mobile close button. */\n  onOpenChange?: (isOpen: boolean) => void\n  /** Desktop width (CSS length or px). Default 24rem. */\n  width?: number | string\n  /** Phone layout: the dock covers the screen instead of sitting beside the content. */\n  isMobile?: boolean\n  /** Accessible name of the dock. */\n  label: string\n  /** Mobile close button label. */\n  closeLabel?: string\n  children: ReactNode\n  className?: string\n  'data-testid'?: string\n}\n\n/**\n * A right-hand dock for a companion surface (chat, inspector). Controlled: the host owns\n * `isOpen`, the width and the mobile breakpoint. Pass it to `Shell.Root` as `aside`.\n */\nfunction ShellDock({\n  isOpen,\n  onOpenChange,\n  width = '24rem',\n  isMobile = false,\n  label,\n  closeLabel = 'Close',\n  children,\n  className,\n  'data-testid': testId,\n}: ShellDockProps) {\n  // The phone dock covers the screen, so it is a modal: Escape closes, focus is trapped and\n  // returns to the opener.\n  const mobileRef = useRef<HTMLDivElement>(null)\n  const closeMobile = useCallback(() => onOpenChange?.(false), [onOpenChange])\n  useDrawerBehavior(isOpen && isMobile, closeMobile, mobileRef)\n  if (!isOpen) return null\n  if (isMobile) {\n    return (\n      <div\n        ref={mobileRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-label={label}\n        data-slot=\"shell-dock\"\n        data-state=\"open\"\n        data-mobile=\"true\"\n        data-testid={testId}\n        className={cn('fixed inset-0 z-40 flex flex-col bg-background', className)}\n      >\n        {onOpenChange && (\n          <button\n            type=\"button\"\n            onClick={() => onOpenChange(false)}\n            aria-label={closeLabel}\n            className=\"absolute right-2 top-2 z-10 rounded-md p-2 text-muted-foreground hover:bg-muted\"\n          >\n            <X className=\"size-5\" />\n          </button>\n        )}\n        {children}\n      </div>\n    )\n  }\n  return (\n    <aside\n      aria-label={label}\n      data-slot=\"shell-dock\"\n      data-state=\"open\"\n      data-testid={testId}\n      style={{ width }}\n      className={cn(\n        'flex shrink-0 flex-col overflow-hidden border-l border-border bg-background',\n        className\n      )}\n    >\n      {children}\n    </aside>\n  )\n}\n\nexport const Shell = {\n  Root: ShellRoot,\n  Content: ShellContent,\n  Topbar: ShellTopbar,\n  Dock: ShellDock,\n}\n\nexport interface PageContainerProps {\n  children: ReactNode\n  /** Full width instead of the centred 72rem column. */\n  wide?: boolean\n  /** Max width of the centred column (any Tailwind `max-w-*` class). Default `max-w-6xl`. */\n  maxWidth?: string\n  /**\n   * Horizontal padding of the inner column (any Tailwind `px-*` classes, responsive variants\n   * welcome). Default `px-4 sm:px-6 lg:px-8`; pass `px-0` for a full-bleed page, or the class\n   * string of your own gutter. Use this prop, not `innerClassName`, to change the gutter: the\n   * classes are concatenated without a merge step, so a second `px-*` would not reliably win.\n   */\n  padding?: string\n  /** Extra classes for the inner column. */\n  innerClassName?: string\n  className?: string\n}\n\n/** Default gutter of {@link PageContainer}: tight on a phone, roomier from tablet up. */\nexport const DEFAULT_PAGE_CONTAINER_PADDING = 'px-4 sm:px-6 lg:px-8'\n\n/**\n * Page body wrapper: a white canvas with the standard 72rem column (or full width) and a responsive side gutter. Fills its\n * parent by default so sticky headers and h-full pages keep a definite height chain.\n *\n * NOT a CSS container: its content (a long thread) overflows it into the host's scroller, and\n * Chrome before ~v130 gives `container-type` layout containment, which turns that overflow into\n * ink overflow — the scroller sees no scroll height, so no scrollbar and a dead wheel. Container\n * queries resolve against the scroll surface instead (Shell.Content, the app's DockZone).\n */\nexport function PageContainer({\n  children,\n  wide = false,\n  maxWidth = 'max-w-6xl',\n  padding = DEFAULT_PAGE_CONTAINER_PADDING,\n  innerClassName,\n  className,\n}: PageContainerProps) {\n  return (\n    <div\n      data-slot=\"page-container\"\n      className={cn('bg-background pb-safe h-full min-h-0', className)}\n    >\n      <div\n        className={cn(\n          'flex h-full w-full min-w-0 flex-col pb-safe',\n          padding,\n          !wide && cn('mx-auto', maxWidth),\n          innerClassName\n        )}\n      >\n        {children}\n      </div>\n    </div>\n  )\n}\n"]}

package/dist/chunk-XK4TVJKD.cjs

@@ -0,0 +1,73 @@
+"use client";
+'use strict';
+
+var react = require('react');
+var annotations = require('@arbidocs/react/annotations');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/presentation/ClipCaptureOverlay.tsx
+var MIN_CLIP_FRACTION = 0.02;
+function ClipCaptureOverlay({ page, onCapture }) {
+  const start = react.useRef(null);
+  const [draft, setDraft] = react.useState(null);
+  const point = (event, box) => ({
+    x: event.clientX - box.left,
+    y: event.clientY - box.top
+  });
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const box = event.currentTarget.getBoundingClientRect();
+    start.current = { ...point(event, box), box };
+    setDraft(null);
+  };
+  const onPointerMove = (event) => {
+    const s = start.current;
+    if (!s) return;
+    const p = point(event, s.box);
+    setDraft({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y });
+  };
+  const onPointerUp = (event) => {
+    const s = start.current;
+    start.current = null;
+    setDraft(null);
+    if (!s) return;
+    const p = point(event, s.box);
+    const size = { width: s.box.width, height: s.box.height };
+    const rect = annotations.toNorm({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y }, size);
+    if (rect.w < MIN_CLIP_FRACTION || rect.h < MIN_CLIP_FRACTION) return;
+    onCapture({ page, rect, aspect: rect.w * size.width / (rect.h * size.height) });
+  };
+  const shown = draft && {
+    left: Math.min(draft.x, draft.x + draft.width),
+    top: Math.min(draft.y, draft.y + draft.height),
+    width: Math.abs(draft.width),
+    height: Math.abs(draft.height)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: "absolute inset-0 z-20 cursor-crosshair touch-none select-none",
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: () => {
+        start.current = null;
+        setDraft(null);
+      },
+      "data-testid": `clip-capture-${page}`,
+      children: shown && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "pointer-events-none absolute border-2 border-dashed border-primary bg-primary/10",
+          style: shown
+        }
+      )
+    }
+  );
+}
+
+exports.ClipCaptureOverlay = ClipCaptureOverlay;
+//# sourceMappingURL=chunk-XK4TVJKD.cjs.map
+//# sourceMappingURL=chunk-XK4TVJKD.cjs.map

package/dist/chunk-XK4TVJKD.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/presentation/ClipCaptureOverlay.tsx"],"names":["useRef","useState","toNorm","jsx"],"mappings":"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","file":"chunk-XK4TVJKD.cjs","sourcesContent":["/**\n * Over a page while clipping: drag a rectangle and it becomes a clip. The rectangle is kept as\n * fractions of the page (`toNorm`), so it does not depend on the zoom it was drawn at.\n */\n\nimport { useRef, useState, type PointerEvent as ReactPointerEvent } from 'react'\nimport { toNorm, type PixelRect } from '@arbidocs/react/annotations'\nimport type { Rect } from './model'\n\n/** Smaller than this (a fraction of the page, either side) is a stray click, not a clip. */\nconst MIN_CLIP_FRACTION = 0.02\n\nexport interface ClipCaptureOverlayProps {\n  page: number\n  onCapture: (capture: { page: number; rect: Rect; aspect: number }) => void\n}\n\nexport function ClipCaptureOverlay({ page, onCapture }: ClipCaptureOverlayProps) {\n  const start = useRef<{ x: number; y: number; box: DOMRect } | null>(null)\n  const [draft, setDraft] = useState<PixelRect | null>(null)\n\n  const point = (event: ReactPointerEvent, box: DOMRect) => ({\n    x: event.clientX - box.left,\n    y: event.clientY - box.top,\n  })\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return\n    event.preventDefault()\n    event.currentTarget.setPointerCapture(event.pointerId)\n    const box = event.currentTarget.getBoundingClientRect()\n    start.current = { ...point(event, box), box }\n    setDraft(null)\n  }\n\n  const onPointerMove = (event: ReactPointerEvent) => {\n    const s = start.current\n    if (!s) return\n    const p = point(event, s.box)\n    setDraft({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y })\n  }\n\n  const onPointerUp = (event: ReactPointerEvent) => {\n    const s = start.current\n    start.current = null\n    setDraft(null)\n    if (!s) return\n    const p = point(event, s.box)\n    const size = { width: s.box.width, height: s.box.height }\n    const rect = toNorm({ x: s.x, y: s.y, width: p.x - s.x, height: p.y - s.y }, size)\n    if (rect.w < MIN_CLIP_FRACTION || rect.h < MIN_CLIP_FRACTION) return\n    onCapture({ page, rect, aspect: (rect.w * size.width) / (rect.h * size.height) })\n  }\n\n  const shown = draft && {\n    left: Math.min(draft.x, draft.x + draft.width),\n    top: Math.min(draft.y, draft.y + draft.height),\n    width: Math.abs(draft.width),\n    height: Math.abs(draft.height),\n  }\n\n  return (\n    <div\n      className=\"absolute inset-0 z-20 cursor-crosshair touch-none select-none\"\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={onPointerUp}\n      onPointerCancel={() => {\n        start.current = null\n        setDraft(null)\n      }}\n      data-testid={`clip-capture-${page}`}\n    >\n      {shown && (\n        <div\n          className=\"pointer-events-none absolute border-2 border-dashed border-primary bg-primary/10\"\n          style={shown}\n        />\n      )}\n    </div>\n  )\n}\n"]}

package/dist/{chunk-E7TE2WVT.cjs → chunk-ZVEW3JBT.cjs}

@@ -5,7 +5,7 @@ var ui = require('@arbidocs/react/ui');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/files/GridView.tsx
-var gridChunk = ui.lazyChunk(() => import('./GridViewImpl-ZMJJWTOM.cjs'));
+var gridChunk = ui.lazyChunk(() => import('./GridViewImpl-LTYET77Q.cjs'));
 function GridSkeleton({
   className = "w-full",
   height = 500
@@ -37,5 +37,5 @@ var GridView = ui.lazyComponent(
 
 exports.GridView = GridView;
 exports.gridChunk = gridChunk;
-//# sourceMappingURL=chunk-E7TE2WVT.cjs.map
-//# sourceMappingURL=chunk-E7TE2WVT.cjs.map
+//# sourceMappingURL=chunk-ZVEW3JBT.cjs.map
+//# sourceMappingURL=chunk-ZVEW3JBT.cjs.map

package/dist/{chunk-E7TE2WVT.cjs.map → chunk-ZVEW3JBT.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/files/GridView.tsx"],"names":["lazyChunk","jsxs","jsx","lazyComponent"],"mappings":";;;;;;AAUO,IAAM,SAAA,GAAYA,YAAA,CAAU,MAAM,OAAO,6BAAgB,CAAC;AAGjE,SAAS,YAAA,CAAa;AAAA,EACpB,SAAA,GAAY,QAAA;AAAA,EACZ,MAAA,GAAS;AACX,CAAA,EAGG;AAED,EAAA,MAAM,OAAO,MAAA,KAAW,MAAA;AACxB,EAAA,MAAM,KAAA,GAAQ,OAAO,EAAE,SAAA,EAAW,KAAK,CAAA,GAAI,EAAA,EAAG,GAAI,EAAE,MAAA,EAAO;AAC3D,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAS,CAAA,gDAAA,CAAA;AAAA,MACvB,KAAA;AAAA,MACA,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAU,cAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,6CAAA,EAA8C,CAAA;AAAA,QAC5D,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,OAAO,CAAA,GAAI,CAAA,EAAE,EAAG,CAAC,CAAA,EAAG,CAAA,qBACxCD,eAAA,CAAC,KAAA,EAAA,EAAY,WAAU,8DAAA,EACrB,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yCAAA,EAA0C,CAAA;AAAA,0BACzDA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yCAAA,EAA0C;AAAA,SAAA,EAAA,EAFjD,CAGV,CACD;AAAA;AAAA;AAAA,GACH;AAEJ;AAEO,IAAM,QAAA,GAAWC,gBAAA;AAAA,EACtB,SAAA;AAAA,EACA,CAAC,MAAM,CAAA,CAAE,QAAA;AAAA,EACT,CAAC,0BAAUD,cAAA,CAAC,YAAA,EAAA,EAAa,WAAW,KAAA,CAAM,SAAA,EAAW,MAAA,EAAQ,KAAA,CAAM,MAAA,EAAQ;AAC7E","file":"chunk-E7TE2WVT.cjs","sourcesContent":["/**\n * `GridView`: the data grid (AG Grid). The grid library is large, so it lives in its own chunk,\n * loaded the first time a grid renders (`gridChunk`); meanwhile the same skeleton as a loading grid.\n */\nimport type { ComponentType } from 'react'\nimport { lazyChunk, lazyComponent } from '@arbidocs/react/ui'\nimport type { GridView as GridViewImpl, GridViewProps } from './GridViewImpl'\n\nexport type { GridViewEmptyState, GridViewProps, GridViewSelection } from './GridViewImpl'\n\nexport const gridChunk = lazyChunk(() => import('./GridViewImpl'))\n\n/** The loading grid's look, at the grid's own defaults (`className=\"w-full\"`, `height={500}`). */\nfunction GridSkeleton({\n  className = 'w-full',\n  height = 500,\n}: {\n  className?: string\n  height?: string | number\n}) {\n  // `auto` sizes the grid to its rows: a few rows' worth meanwhile, rather than nothing.\n  const auto = height === 'auto'\n  const style = auto ? { minHeight: 37 + 3 * 42 } : { height }\n  return (\n    <div\n      className={`${className} overflow-hidden rounded-lg border border-border`}\n      style={style}\n      aria-busy=\"true\"\n      data-slot=\"grid-loading\"\n    >\n      <div className=\"h-[37px] border-b border-border bg-muted/40\" />\n      {Array.from({ length: auto ? 3 : 6 }, (_, i) => (\n        <div key={i} className=\"flex h-[42px] items-center gap-4 border-b border-border px-3\">\n          <div className=\"h-3 w-40 animate-pulse rounded bg-muted\" />\n          <div className=\"h-3 w-24 animate-pulse rounded bg-muted\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport const GridView = lazyComponent(\n  gridChunk,\n  (m) => m.GridView as ComponentType<GridViewProps<unknown>>,\n  (props) => <GridSkeleton className={props.className} height={props.height} />\n) as typeof GridViewImpl\n"]}
+{"version":3,"sources":["../src/files/GridView.tsx"],"names":["lazyChunk","jsxs","jsx","lazyComponent"],"mappings":";;;;;;AAUO,IAAM,SAAA,GAAYA,YAAA,CAAU,MAAM,OAAO,6BAAgB,CAAC;AAGjE,SAAS,YAAA,CAAa;AAAA,EACpB,SAAA,GAAY,QAAA;AAAA,EACZ,MAAA,GAAS;AACX,CAAA,EAGG;AAED,EAAA,MAAM,OAAO,MAAA,KAAW,MAAA;AACxB,EAAA,MAAM,KAAA,GAAQ,OAAO,EAAE,SAAA,EAAW,KAAK,CAAA,GAAI,EAAA,EAAG,GAAI,EAAE,MAAA,EAAO;AAC3D,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,SAAS,CAAA,gDAAA,CAAA;AAAA,MACvB,KAAA;AAAA,MACA,WAAA,EAAU,MAAA;AAAA,MACV,WAAA,EAAU,cAAA;AAAA,MAEV,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,6CAAA,EAA8C,CAAA;AAAA,QAC5D,KAAA,CAAM,IAAA,CAAK,EAAE,MAAA,EAAQ,OAAO,CAAA,GAAI,CAAA,EAAE,EAAG,CAAC,CAAA,EAAG,CAAA,qBACxCD,eAAA,CAAC,KAAA,EAAA,EAAY,WAAU,8DAAA,EACrB,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yCAAA,EAA0C,CAAA;AAAA,0BACzDA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yCAAA,EAA0C;AAAA,SAAA,EAAA,EAFjD,CAGV,CACD;AAAA;AAAA;AAAA,GACH;AAEJ;AAEO,IAAM,QAAA,GAAWC,gBAAA;AAAA,EACtB,SAAA;AAAA,EACA,CAAC,MAAM,CAAA,CAAE,QAAA;AAAA,EACT,CAAC,0BAAUD,cAAA,CAAC,YAAA,EAAA,EAAa,WAAW,KAAA,CAAM,SAAA,EAAW,MAAA,EAAQ,KAAA,CAAM,MAAA,EAAQ;AAC7E","file":"chunk-ZVEW3JBT.cjs","sourcesContent":["/**\n * `GridView`: the data grid (AG Grid). The grid library is large, so it lives in its own chunk,\n * loaded the first time a grid renders (`gridChunk`); meanwhile the same skeleton as a loading grid.\n */\nimport type { ComponentType } from 'react'\nimport { lazyChunk, lazyComponent } from '@arbidocs/react/ui'\nimport type { GridView as GridViewImpl, GridViewProps } from './GridViewImpl'\n\nexport type { GridViewEmptyState, GridViewProps, GridViewSelection } from './GridViewImpl'\n\nexport const gridChunk = lazyChunk(() => import('./GridViewImpl'))\n\n/** The loading grid's look, at the grid's own defaults (`className=\"w-full\"`, `height={500}`). */\nfunction GridSkeleton({\n  className = 'w-full',\n  height = 500,\n}: {\n  className?: string\n  height?: string | number\n}) {\n  // `auto` sizes the grid to its rows: a few rows' worth meanwhile, rather than nothing.\n  const auto = height === 'auto'\n  const style = auto ? { minHeight: 37 + 3 * 42 } : { height }\n  return (\n    <div\n      className={`${className} overflow-hidden rounded-lg border border-border`}\n      style={style}\n      aria-busy=\"true\"\n      data-slot=\"grid-loading\"\n    >\n      <div className=\"h-[37px] border-b border-border bg-muted/40\" />\n      {Array.from({ length: auto ? 3 : 6 }, (_, i) => (\n        <div key={i} className=\"flex h-[42px] items-center gap-4 border-b border-border px-3\">\n          <div className=\"h-3 w-40 animate-pulse rounded bg-muted\" />\n          <div className=\"h-3 w-24 animate-pulse rounded bg-muted\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nexport const GridView = lazyComponent(\n  gridChunk,\n  (m) => m.GridView as ComponentType<GridViewProps<unknown>>,\n  (props) => <GridSkeleton className={props.className} height={props.height} />\n) as typeof GridViewImpl\n"]}

package/dist/collaboration/index.cjs

@@ -2,10 +2,10 @@
 'use strict';
 
 var chunkVZKTOGZR_cjs = require('../chunk-VZKTOGZR.cjs');
-var chunkEOG6OT5I_cjs = require('../chunk-EOG6OT5I.cjs');
+var chunkTXP2N3DC_cjs = require('../chunk-TXP2N3DC.cjs');
 require('../chunk-7G2LJMUG.cjs');
 var chunkTG2GM7WJ_cjs = require('../chunk-TG2GM7WJ.cjs');
-require('../chunk-E7TE2WVT.cjs');
+require('../chunk-ZVEW3JBT.cjs');
 var chunkMOIZ2R5X_cjs = require('../chunk-MOIZ2R5X.cjs');
 require('../chunk-ULWRNGGE.cjs');
 require('../chunk-PLIF5CUV.cjs');
@@ -34,275 +34,275 @@ Object.defineProperty(exports, "vCardFilename", {
 });
 Object.defineProperty(exports, "ActionMenu", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.ActionMenu; }
+  get: function () { return chunkTXP2N3DC_cjs.ActionMenu; }
 });
 Object.defineProperty(exports, "AddContactsForm", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.AddContactsForm; }
+  get: function () { return chunkTXP2N3DC_cjs.AddContactsForm; }
 });
 Object.defineProperty(exports, "AddContactsResults", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.AddContactsResults; }
+  get: function () { return chunkTXP2N3DC_cjs.AddContactsResults; }
 });
 Object.defineProperty(exports, "DEFAULT_ADD_CONTACTS_LABELS", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DEFAULT_ADD_CONTACTS_LABELS; }
+  get: function () { return chunkTXP2N3DC_cjs.DEFAULT_ADD_CONTACTS_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_CONTACT_INVITE_LABELS", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DEFAULT_CONTACT_INVITE_LABELS; }
+  get: function () { return chunkTXP2N3DC_cjs.DEFAULT_CONTACT_INVITE_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_CONTACT_OUTCOME_LABELS", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DEFAULT_CONTACT_OUTCOME_LABELS; }
+  get: function () { return chunkTXP2N3DC_cjs.DEFAULT_CONTACT_OUTCOME_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_DM_ACCESS_REQUEST_BANNER_LABELS", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DEFAULT_DM_ACCESS_REQUEST_BANNER_LABELS; }
+  get: function () { return chunkTXP2N3DC_cjs.DEFAULT_DM_ACCESS_REQUEST_BANNER_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_DM_GRANT_ACCESS_DIALOG_LABELS", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DEFAULT_DM_GRANT_ACCESS_DIALOG_LABELS; }
+  get: function () { return chunkTXP2N3DC_cjs.DEFAULT_DM_GRANT_ACCESS_DIALOG_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_DM_THREAD_FRAME_LABELS", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DEFAULT_DM_THREAD_FRAME_LABELS; }
+  get: function () { return chunkTXP2N3DC_cjs.DEFAULT_DM_THREAD_FRAME_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_MAIL_FOLDER_TREE_LABELS", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DEFAULT_MAIL_FOLDER_TREE_LABELS; }
+  get: function () { return chunkTXP2N3DC_cjs.DEFAULT_MAIL_FOLDER_TREE_LABELS; }
 });
 Object.defineProperty(exports, "DEFAULT_RECIPIENT_PICKER_LABELS", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DEFAULT_RECIPIENT_PICKER_LABELS; }
+  get: function () { return chunkTXP2N3DC_cjs.DEFAULT_RECIPIENT_PICKER_LABELS; }
 });
 Object.defineProperty(exports, "DmAccessRequestBanner", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DmAccessRequestBanner; }
+  get: function () { return chunkTXP2N3DC_cjs.DmAccessRequestBanner; }
 });
 Object.defineProperty(exports, "DmGrantAccessDialogView", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DmGrantAccessDialogView; }
+  get: function () { return chunkTXP2N3DC_cjs.DmGrantAccessDialogView; }
 });
 Object.defineProperty(exports, "DmInviteAvatar", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DmInviteAvatar; }
+  get: function () { return chunkTXP2N3DC_cjs.DmInviteAvatar; }
 });
 Object.defineProperty(exports, "DmThreadFrame", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.DmThreadFrame; }
+  get: function () { return chunkTXP2N3DC_cjs.DmThreadFrame; }
 });
 Object.defineProperty(exports, "EMPTY_CONTACT_FORM", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.EMPTY_CONTACT_FORM; }
+  get: function () { return chunkTXP2N3DC_cjs.EMPTY_CONTACT_FORM; }
 });
 Object.defineProperty(exports, "MAX_INVITE_EMAILS", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MAX_INVITE_EMAILS; }
+  get: function () { return chunkTXP2N3DC_cjs.MAX_INVITE_EMAILS; }
 });
 Object.defineProperty(exports, "MailActionBar", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailActionBar; }
+  get: function () { return chunkTXP2N3DC_cjs.MailActionBar; }
 });
 Object.defineProperty(exports, "MailConversationView", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailConversationView; }
+  get: function () { return chunkTXP2N3DC_cjs.MailConversationView; }
 });
 Object.defineProperty(exports, "MailDeliveryBadge", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailDeliveryBadge; }
+  get: function () { return chunkTXP2N3DC_cjs.MailDeliveryBadge; }
 });
 Object.defineProperty(exports, "MailDeliveryList", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailDeliveryList; }
+  get: function () { return chunkTXP2N3DC_cjs.MailDeliveryList; }
 });
 Object.defineProperty(exports, "MailDocumentPicker", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailDocumentPicker; }
+  get: function () { return chunkTXP2N3DC_cjs.MailDocumentPicker; }
 });
 Object.defineProperty(exports, "MailFlagButton", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailFlagButton; }
+  get: function () { return chunkTXP2N3DC_cjs.MailFlagButton; }
 });
 Object.defineProperty(exports, "MailFolderTree", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailFolderTree; }
+  get: function () { return chunkTXP2N3DC_cjs.MailFolderTree; }
 });
 Object.defineProperty(exports, "MailGrid", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailGrid; }
+  get: function () { return chunkTXP2N3DC_cjs.MailGrid; }
 });
 Object.defineProperty(exports, "MailMessageContent", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailMessageContent; }
+  get: function () { return chunkTXP2N3DC_cjs.MailMessageContent; }
 });
 Object.defineProperty(exports, "MailMessagePreview", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailMessagePreview; }
+  get: function () { return chunkTXP2N3DC_cjs.MailMessagePreview; }
 });
 Object.defineProperty(exports, "MailMessageView", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MailMessageView; }
+  get: function () { return chunkTXP2N3DC_cjs.MailMessageView; }
 });
 Object.defineProperty(exports, "MemberBulkActions", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MemberBulkActions; }
+  get: function () { return chunkTXP2N3DC_cjs.MemberBulkActions; }
 });
 Object.defineProperty(exports, "MemberListLoading", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MemberListLoading; }
+  get: function () { return chunkTXP2N3DC_cjs.MemberListLoading; }
 });
 Object.defineProperty(exports, "MemberMutedText", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MemberMutedText; }
+  get: function () { return chunkTXP2N3DC_cjs.MemberMutedText; }
 });
 Object.defineProperty(exports, "MemberNameCell", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MemberNameCell; }
+  get: function () { return chunkTXP2N3DC_cjs.MemberNameCell; }
 });
 Object.defineProperty(exports, "MemberRoleCell", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.MemberRoleCell; }
+  get: function () { return chunkTXP2N3DC_cjs.MemberRoleCell; }
 });
 Object.defineProperty(exports, "NEEDS_CONNECTION", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.NEEDS_CONNECTION; }
+  get: function () { return chunkTXP2N3DC_cjs.NEEDS_CONNECTION; }
 });
 Object.defineProperty(exports, "PlainMailBodyEditor", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.PlainMailBodyEditor; }
+  get: function () { return chunkTXP2N3DC_cjs.PlainMailBodyEditor; }
 });
 Object.defineProperty(exports, "RecipientPicker", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.RecipientPicker; }
+  get: function () { return chunkTXP2N3DC_cjs.RecipientPicker; }
 });
 Object.defineProperty(exports, "RoleSelect", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.RoleSelect; }
+  get: function () { return chunkTXP2N3DC_cjs.RoleSelect; }
 });
 Object.defineProperty(exports, "applyContactInviteResults", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.applyContactInviteResults; }
+  get: function () { return chunkTXP2N3DC_cjs.applyContactInviteResults; }
 });
 Object.defineProperty(exports, "buildMailFolderTree", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.buildMailFolderTree; }
+  get: function () { return chunkTXP2N3DC_cjs.buildMailFolderTree; }
 });
 Object.defineProperty(exports, "contactName", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.contactName; }
+  get: function () { return chunkTXP2N3DC_cjs.contactName; }
 });
 Object.defineProperty(exports, "contactOutcomeMessage", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.contactOutcomeMessage; }
+  get: function () { return chunkTXP2N3DC_cjs.contactOutcomeMessage; }
 });
 Object.defineProperty(exports, "contactStatusLabel", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.contactStatusLabel; }
+  get: function () { return chunkTXP2N3DC_cjs.contactStatusLabel; }
 });
 Object.defineProperty(exports, "contactToForm", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.contactToForm; }
+  get: function () { return chunkTXP2N3DC_cjs.contactToForm; }
 });
 Object.defineProperty(exports, "descendantFolderIds", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.descendantFolderIds; }
+  get: function () { return chunkTXP2N3DC_cjs.descendantFolderIds; }
 });
 Object.defineProperty(exports, "draftMailCompose", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.draftMailCompose; }
+  get: function () { return chunkTXP2N3DC_cjs.draftMailCompose; }
 });
 Object.defineProperty(exports, "emailTokens", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.emailTokens; }
+  get: function () { return chunkTXP2N3DC_cjs.emailTokens; }
 });
 Object.defineProperty(exports, "emptyMailCompose", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.emptyMailCompose; }
+  get: function () { return chunkTXP2N3DC_cjs.emptyMailCompose; }
 });
 Object.defineProperty(exports, "failContactInvites", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.failContactInvites; }
+  get: function () { return chunkTXP2N3DC_cjs.failContactInvites; }
 });
 Object.defineProperty(exports, "formToContactCard", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.formToContactCard; }
+  get: function () { return chunkTXP2N3DC_cjs.formToContactCard; }
 });
 Object.defineProperty(exports, "hasCalendarPart", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.hasCalendarPart; }
+  get: function () { return chunkTXP2N3DC_cjs.hasCalendarPart; }
 });
 Object.defineProperty(exports, "inviteEmail", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.inviteEmail; }
+  get: function () { return chunkTXP2N3DC_cjs.inviteEmail; }
 });
 Object.defineProperty(exports, "isInboxFolder", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.isInboxFolder; }
+  get: function () { return chunkTXP2N3DC_cjs.isInboxFolder; }
 });
 Object.defineProperty(exports, "isInvitableEmail", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.isInvitableEmail; }
+  get: function () { return chunkTXP2N3DC_cjs.isInvitableEmail; }
 });
 Object.defineProperty(exports, "mailAddressLabel", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.mailAddressLabel; }
+  get: function () { return chunkTXP2N3DC_cjs.mailAddressLabel; }
 });
 Object.defineProperty(exports, "matchesContact", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.matchesContact; }
+  get: function () { return chunkTXP2N3DC_cjs.matchesContact; }
 });
 Object.defineProperty(exports, "normalizeVCardDate", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.normalizeVCardDate; }
+  get: function () { return chunkTXP2N3DC_cjs.normalizeVCardDate; }
 });
 Object.defineProperty(exports, "parseEmails", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.parseEmails; }
+  get: function () { return chunkTXP2N3DC_cjs.parseEmails; }
 });
 Object.defineProperty(exports, "parseMailRecipients", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.parseMailRecipients; }
+  get: function () { return chunkTXP2N3DC_cjs.parseMailRecipients; }
 });
 Object.defineProperty(exports, "planContactInvites", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.planContactInvites; }
+  get: function () { return chunkTXP2N3DC_cjs.planContactInvites; }
 });
 Object.defineProperty(exports, "primaryEmail", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.primaryEmail; }
+  get: function () { return chunkTXP2N3DC_cjs.primaryEmail; }
 });
 Object.defineProperty(exports, "replyMailCompose", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.replyMailCompose; }
+  get: function () { return chunkTXP2N3DC_cjs.replyMailCompose; }
 });
 Object.defineProperty(exports, "summarizeContactInvites", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.summarizeContactInvites; }
+  get: function () { return chunkTXP2N3DC_cjs.summarizeContactInvites; }
 });
 Object.defineProperty(exports, "summarizeImport", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.summarizeImport; }
+  get: function () { return chunkTXP2N3DC_cjs.summarizeImport; }
 });
 Object.defineProperty(exports, "summarizeUnsentInvites", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.summarizeUnsentInvites; }
+  get: function () { return chunkTXP2N3DC_cjs.summarizeUnsentInvites; }
 });
 Object.defineProperty(exports, "toAddContactsRow", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.toAddContactsRow; }
+  get: function () { return chunkTXP2N3DC_cjs.toAddContactsRow; }
 });
 Object.defineProperty(exports, "toAddContactsRows", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.toAddContactsRows; }
+  get: function () { return chunkTXP2N3DC_cjs.toAddContactsRows; }
 });
 Object.defineProperty(exports, "toggleMailFolder", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.toggleMailFolder; }
+  get: function () { return chunkTXP2N3DC_cjs.toggleMailFolder; }
 });
 Object.defineProperty(exports, "validateContactForm", {
   enumerable: true,
-  get: function () { return chunkEOG6OT5I_cjs.validateContactForm; }
+  get: function () { return chunkTXP2N3DC_cjs.validateContactForm; }
 });
 Object.defineProperty(exports, "DEFAULT_SHARE_CONTROL_LABELS", {
   enumerable: true,

package/dist/components/ZoomSlider.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The app's zoom control: a small bordered pill with a zoom-out button and a slider (the files
+ * explorer's tile size, a presentation clip's zoom…), optionally followed by the value.
+ */
+import type { ReactNode } from 'react';
+export interface ZoomSliderProps {
+    value: number;
+    min: number;
+    max: number;
+    step?: number;
+    /** How far the zoom-out button steps (default `step`). */
+    zoomOutStep?: number;
+    onChange: (value: number) => void;
+    /** The slider's accessible name (e.g. "Tile size"). */
+    label: string;
+    /** The zoom-out button's accessible name. Default "Zoom out". */
+    zoomOutLabel?: string;
+    /** Shown after the slider (e.g. "150%"). */
+    valueLabel?: ReactNode;
+    className?: string;
+    sliderClassName?: string;
+    testId?: string;
+    zoomOutTestId?: string;
+}
+export declare function ZoomSlider({ value, min, max, step, zoomOutStep, onChange, label, zoomOutLabel, valueLabel, className, sliderClassName, testId, zoomOutTestId, }: ZoomSliderProps): import("react").JSX.Element;

package/dist/components/ZoomSlider.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ZoomOut } from "lucide-react";
+import { Slider, cn } from "@arbidocs/react/ui";
+function ZoomSlider({
+  value,
+  min,
+  max,
+  step = 1,
+  zoomOutStep = step,
+  onChange,
+  label,
+  zoomOutLabel = "Zoom out",
+  valueLabel,
+  className,
+  sliderClassName,
+  testId,
+  zoomOutTestId
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex h-7 items-center gap-1.5 rounded-md border border-input px-2", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": zoomOutLabel,
+            title: zoomOutLabel,
+            "data-testid": zoomOutTestId,
+            onClick: () => onChange(Math.max(min, value - zoomOutStep)),
+            disabled: value <= min,
+            className: "text-muted-foreground hover:text-foreground disabled:opacity-40 pointer-coarse:-m-[15px] pointer-coarse:p-[15px]",
+            children: /* @__PURE__ */ jsx(ZoomOut, { className: "h-3.5 w-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Slider,
+          {
+            value: [value],
+            min,
+            max,
+            step,
+            onValueChange: ([next]) => onChange(next),
+            "aria-label": label,
+            "data-testid": testId,
+            className: cn("w-20", sliderClassName)
+          }
+        ),
+        valueLabel !== void 0 && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs tabular-nums text-muted-foreground", children: valueLabel })
+      ]
+    }
+  );
+}
+export {
+  ZoomSlider
+};
+//# sourceMappingURL=ZoomSlider.js.map