@invergent/ui-sdk 0.0.0-stage → 2.19.1

package/dist/rabbit-mark.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/rabbit-mark.tsx"],"names":[],"mappings":";;;AAeO,IAAM,gBAAA,GACX;AAGK,IAAM,eAAA,GAAkB;AAAA,EAC7B,CAAA,EAAG,OAAA;AAAA,EACH,CAAA,EAAG,KAAA;AAAA,EACH,CAAA,EAAG,OAAA;AAAA,EACH,CAAA,EAAG;AACL;AAEO,SAAS,UAAA,CAAW,EAAE,SAAA,EAAU,EAA2B;AAChE,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA;AAAA,MACA,OAAA,EAAQ,+BAAA;AAAA,MACR,IAAA,EAAK,cAAA;AAAA,MACL,aAAA,EAAY,MAAA;AAAA,MAEZ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAG,gBAAA,EAAkB;AAAA;AAAA,GAC7B;AAEJ","file":"rabbit-mark.js","sourcesContent":["// Copyright (c) 2026, Invergent SA, developed by Flavius Burca\n// SPDX-License-Identifier: AGPL-3.0-only\n//\n// The Surogate rabbit, as one path.\n//\n// Lifted from the brand favicon and stripped to the silhouette: the\n// circle, the amber ground and the registered mark all belong to the\n// full lockup, not to a 16px glyph. The viewBox is the path's own\n// bounding box, so the mark fills whatever box it is given the way a\n// lucide icon does, and `currentColor` lets it inherit like one too.\n//\n// The path is exported on its own because the whiteboard also paints\n// it onto a canvas, where there is no DOM to render an `<svg>` into.\n\n/** The rabbit silhouette, in the coordinate space of {@link RABBIT_MARK_BOX}. */\nexport const RABBIT_MARK_PATH =\n  \"M49.71,46.83c0,.23.02.45.07.67,2.1.49,4.16,1.07,6.18,1.74.58-.64.94-1.48.94-2.42,0-1.98-1.61-3.59-3.59-3.59s-3.59,1.61-3.59,3.59M33.95,78.3c3.1-5.1,6.72-8.89,11.64-12.21.61-.42,1.24-.8,1.88-1.17.44-.25.61-.66.58-1.05,0-.53-.49-.91-.93-1.12-1.34-.62-2.72-1.5-4.06-2.54-1.57-1.22-3.01-2.59-4.36-4.06-.95-1.04-2.02-2.38-3-3.81-.81-1.18-.63-2.77.43-3.73,1.1-1,2.26-1.92,3.48-2.76.36-.25.72-.49,1.1-.73,2.43-1.55,5.05-2.79,7.79-3.7,3.23-1.07,6.62-1.66,10.03-1.74.59-.35,1.19-.69,1.8-1.01,1.66-.88,3.38-1.62,5.17-2.21,1.58-.54,3.2-.95,4.85-1.24,3.28-.59,6.64-.7,9.95-.32,1.23.14,2.45.34,3.68.62,2.87.64,5.59,1.62,8.09,2.9.54.27.71.95.36,1.45-1.58,2.22-3.46,4.25-5.5,6.05-3.01,2.65-6.51,4.75-10.26,6.17-2.32.88-4.75,1.53-7.22,1.91-.62.1-.78.9-.24,1.22,0,0,.01,0,.02.01,6.97,4.05,13.1,9.22,18.36,15.32.72.83,1.42,1.68,2.1,2.53,3.36,4.22,6.23,8.82,8.56,13.68,1.8,3.73,3.27,7.63,4.39,11.62.73,2.6,1.34,5.24,1.76,7.91.11.76-.87,1.16-1.3.53-1.15-1.69-2.31-3.35-3.61-4.93-1.2-1.46-2.46-2.86-3.75-4.24-5.44-5.8-11.84-10.7-18.84-14.48-7.32-3.94-15.09-6.38-23.44-6.53-2.23-.04-4.46.08-6.68.3-4.05.43-8.02,1.28-11.93,2.4-.03,0-.05.01-.08.02,0,0-.01,0-.02,0-.07.02-.14.03-.21.03-.53,0-.91-.6-.61-1.09M50.95,12.97c-1.31,1.16-2.2,2.71-2.9,4.29-1.66,3.74-2.85,7.74-3.52,11.77-.32,1.92-.56,3.87-1.28,5.69-.17.44-.37.87-.6,1.28-1.18,2.1-3.37,3.19-5.6,3.86-4.96,1.47-10.14,1.97-15.25,2.65-2.37.31-8.03,1.12-7.34,4.69.46,2.36,2.26,4.16,4.08,5.6,2.66,2.11,5.44,4.09,8.33,5.88,1.87,1.15,3.85,2.11,5.6,3.44,1.74,1.33,3.15,3.05,3.58,5.25.22,1.16-.18,2.35-1,3.2-1.57,1.63-3,3.41-4.25,5.29-1.32,2.1-2.38,4.35-3.25,6.65-.59,1.44.97,2.98,2.41,2.37.53-.21,1.07-.41,1.61-.61,2.26-.82,4.68.73,4.93,3.12.17,1.61.38,3.17.63,4.57.46,2.57,3.14,3.63,5.32,1.41,2.84-2.88,4.66-6.31,7.84-8.86,2.53-2.03,6.26-4.17,9.71-3.59,3.17.56,6.27,1.52,9.23,2.85,5.32,2.32,10.36,5.29,14.95,8.86,9.17,7.1,16.56,16.51,21.27,27.1.93,2.07,4.03,1.44,4.1-.83.55-17.71-5.72-35.46-17.11-49.01-2.87-3.42-6.07-6.65-9.59-9.44-.88-.8-1.54-1.7-1.38-2.93.38-2.97,2-4.32,4.04-5.85,2.51-1.89,5.02-3.85,7.16-6.21.03-.03.06-.06.09-.1,1.24-1.37,2.38-2.83,3.4-4.37,1.2-1.81.6-4.26-1.3-5.31,0,0-.96-.52-1.45-.76-2.72-1.34-5.61-2.36-8.6-3.03-2.76-.62-5.58-.93-8.38-.93-2.38,0-4.76.22-7.09.67-1.96.37-3.97-.31-5.25-1.84-.28-.34-.54-.69-.79-1.04-.58-.84-1.09-1.71-1.63-2.58-1.29-2.06-1.87-3.63-2.89-5.84-1.06-2.29-1.85-4.73-3.26-6.86-.73-1.11-1.53-1.54-2.32-1.54s-1.54.41-2.24,1.02\";\n\n/** The path's bounding box: what to scale against when painting it. */\nexport const RABBIT_MARK_BOX = {\n  x: 14.4021,\n  y: 11.93,\n  w: 95.1813,\n  h: 109.058,\n} as const;\n\nexport function RabbitMark({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"14.4021 11.93 95.1813 109.058\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path d={RABBIT_MARK_PATH} />\n    </svg>\n  );\n}\n"]}

package/dist/responsive-panel.cjs

@@ -0,0 +1,85 @@
+'use strict';
+
+var chunkUXSDDJXM_cjs = require('./chunk-UXSDDJXM.cjs');
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var radixUi = require('radix-ui');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var MOBILE_QUERY = "(max-width: 767px)";
+function subscribe(onChange) {
+  const mql = window.matchMedia(MOBILE_QUERY);
+  mql.addEventListener("change", onChange);
+  return () => mql.removeEventListener("change", onChange);
+}
+function useIsMobile() {
+  return react.useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(MOBILE_QUERY).matches,
+    // No viewport when server-rendered; assume desktop, as the components do.
+    () => false
+  );
+}
+function ResponsivePanel({
+  open,
+  onOpenChange,
+  trigger,
+  title,
+  children,
+  align = "start",
+  popoverClassName
+}) {
+  const isMobile = useIsMobile();
+  if (!isMobile) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(chunkUXSDDJXM_cjs.Popover, { open, onOpenChange, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(chunkUXSDDJXM_cjs.PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        chunkUXSDDJXM_cjs.PopoverContent,
+        {
+          side: "top",
+          align,
+          className: chunk6YHDDRIM_cjs.cn("w-64 overflow-hidden rounded-xl p-1", popoverClassName),
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsxs(radixUi.Dialog.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        radixUi.Dialog.Overlay,
+        {
+          "data-slot": "responsive-panel-overlay",
+          className: "fixed inset-0 z-50 bg-black/40 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        radixUi.Dialog.Content,
+        {
+          "data-slot": "responsive-panel-sheet",
+          "aria-describedby": void 0,
+          className: chunk6YHDDRIM_cjs.cn(
+            "fixed inset-x-0 bottom-0 z-50 flex max-h-[80svh] flex-col overflow-hidden rounded-t-2xl border-t border-border bg-popover pb-[env(safe-area-inset-bottom)] text-popover-foreground shadow-lg",
+            "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Title, { className: "sr-only", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "mx-auto mt-2.5 mb-1 h-1 w-9 shrink-0 rounded-full bg-muted-foreground/30"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1", children })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+exports.ResponsivePanel = ResponsivePanel;
+//# sourceMappingURL=responsive-panel.cjs.map
+//# sourceMappingURL=responsive-panel.cjs.map

package/dist/responsive-panel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/use-is-mobile.ts","../src/responsive-panel.tsx"],"names":["useSyncExternalStore","jsxs","Popover","jsx","PopoverTrigger","PopoverContent","cn","DialogPrimitive"],"mappings":";;;;;;;;AAQA,IAAM,YAAA,GAAe,oBAAA;AAOrB,SAAS,UAAU,QAAA,EAAkC;AACnD,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,UAAA,CAAW,YAAY,CAAA;AAC1C,EAAA,GAAA,CAAI,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACvC,EAAA,OAAO,MAAM,GAAA,CAAI,mBAAA,CAAoB,QAAA,EAAU,QAAQ,CAAA;AACzD;AASO,SAAS,WAAA,GAAuB;AACrC,EAAA,OAAOA,0BAAA;AAAA,IACL,SAAA;AAAA,IACA,MAAM,MAAA,CAAO,UAAA,CAAW,YAAY,CAAA,CAAE,OAAA;AAAA;AAAA,IAEtC,MAAM;AAAA,GACR;AACF;ACUO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,uBACEC,eAAA,CAACC,yBAAA,EAAA,EAAQ,IAAA,EAAY,YAAA,EACnB,QAAA,EAAA;AAAA,sBAAAC,cAAA,CAACC,gCAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EAAE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,sBACjCD,cAAA;AAAA,QAACE,gCAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,KAAA;AAAA,UACL,KAAA;AAAA,UACA,SAAA,EAAWC,oBAAA,CAAG,qCAAA,EAAuC,gBAAgB,CAAA;AAAA,UAEpE;AAAA;AAAA;AACH,KAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEL,eAAA,CAACM,cAAA,CAAgB,IAAA,EAAhB,EAAqB,MAAY,YAAA,EAChC,QAAA,EAAA;AAAA,oBAAAJ,cAAA,CAACI,cAAA,CAAgB,OAAA,EAAhB,EAAwB,OAAA,EAAO,MAAE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAC1CN,eAAA,CAACM,cAAA,CAAgB,MAAA,EAAhB,EACC,QAAA,EAAA;AAAA,sBAAAJ,cAAA;AAAA,QAACI,cAAA,CAAgB,OAAA;AAAA,QAAhB;AAAA,UACC,WAAA,EAAU,0BAAA;AAAA,UACV,SAAA,EAAU;AAAA;AAAA,OACZ;AAAA,sBACAN,eAAA;AAAA,QAACM,cAAA,CAAgB,OAAA;AAAA,QAAhB;AAAA,UACC,WAAA,EAAU,wBAAA;AAAA,UACV,kBAAA,EAAkB,MAAA;AAAA,UAClB,SAAA,EAAWD,oBAAA;AAAA,YACT,8LAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAAH,cAAA,CAACI,cAAA,CAAgB,KAAA,EAAhB,EAAsB,SAAA,EAAU,WAC9B,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,4BAIAJ,cAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,aAAA,EAAY,MAAA;AAAA,gBACZ,SAAA,EAAU;AAAA;AAAA,aACZ;AAAA,4BACAA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uDAAA,EACZ,QAAA,EACH;AAAA;AAAA;AAAA;AACF,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"responsive-panel.cjs","sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * The `md` breakpoint, matching the Tailwind default the components'\n * responsive classes use. Anything that needs to *render* differently on a\n * phone (rather than just restyle) reads this; a media query alone cannot\n * swap a popover for a sheet, because they are different components.\n */\nconst MOBILE_QUERY = \"(max-width: 767px)\";\n\n// Deliberately not caching the MediaQueryList across calls. getSnapshot does\n// run per render, but matchMedia is ~1µs and a module-level cache would pin\n// the first `window.matchMedia` this module ever saw — which makes the hook\n// untestable by stubbing it, and the sheet branch is only reachable in tests\n// that way. Not a trade worth making for a cost that does not register.\nfunction subscribe(onChange: () => void): () => void {\n  const mql = window.matchMedia(MOBILE_QUERY);\n  mql.addEventListener(\"change\", onChange);\n  return () => mql.removeEventListener(\"change\", onChange);\n}\n\n/**\n * True while the viewport is narrower than `md`.\n *\n * Reads synchronously on the first render rather than filling in from an\n * effect: a value that says \"desktop\" for one frame is invisible for a class\n * name and wrong for anything that decides *which component to mount*.\n */\nexport function useIsMobile(): boolean {\n  return useSyncExternalStore(\n    subscribe,\n    () => window.matchMedia(MOBILE_QUERY).matches,\n    // No viewport when server-rendered; assume desktop, as the components do.\n    () => false,\n  );\n}\n","// A panel that is a popover with a cursor and a bottom sheet on a phone.\n//\n// The composer's secondary controls (tools, session context) open panels that\n// are anchored above a ~32px button. That is right on a desktop and wrong on a\n// phone: an anchored popover near the bottom of the screen has nowhere to go,\n// its content is capped by whatever space is left above the composer, and the\n// whole thing sits under the thumb that opened it. A sheet rising from the\n// bottom edge has the full width, as much height as it needs, and lands where\n// the hand already is.\n//\n// The two are different components, not one component with different classes,\n// so the choice is made in JS — see useIsMobile.\n\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useIsMobile } from \"./lib/use-is-mobile\";\nimport { cn } from \"./lib/utils\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport interface ResponsivePanelProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** The control that opens the panel. Rendered as the trigger in both forms. */\n  trigger: ReactNode;\n  /**\n   * Names the sheet for screen readers. Radix Dialog requires an accessible\n   * name; it is visually hidden, since the panel's own contents are labelled.\n   */\n  title: string;\n  children: ReactNode;\n  /** Popover-only; the sheet is always full width. */\n  align?: ComponentProps<typeof PopoverContent>[\"align\"];\n  /**\n   * Styling for the popover form only.\n   *\n   * Deliberately not a shared `className`: `cn` is tailwind-merge, so a class\n   * written for the popover silently deletes a conflicting one from the\n   * sheet's own base list. `p-0` and `pb-[env(safe-area-inset-bottom)]` are\n   * the same conflict group, so passing the popover's `p-0` through dropped\n   * the sheet's home-indicator inset — and a `divide-y` meant for the\n   * popover's sections drew a rule under the sheet's grab handle instead.\n   */\n  popoverClassName?: string;\n}\n\nexport function ResponsivePanel({\n  open,\n  onOpenChange,\n  trigger,\n  title,\n  children,\n  align = \"start\",\n  popoverClassName,\n}: ResponsivePanelProps) {\n  const isMobile = useIsMobile();\n\n  if (!isMobile) {\n    return (\n      <Popover open={open} onOpenChange={onOpenChange}>\n        <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n        <PopoverContent\n          side=\"top\"\n          align={align}\n          className={cn(\"w-64 overflow-hidden rounded-xl p-1\", popoverClassName)}\n        >\n          {children}\n        </PopoverContent>\n      </Popover>\n    );\n  }\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Trigger asChild>{trigger}</DialogPrimitive.Trigger>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay\n          data-slot=\"responsive-panel-overlay\"\n          className=\"fixed inset-0 z-50 bg-black/40 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\"\n        />\n        <DialogPrimitive.Content\n          data-slot=\"responsive-panel-sheet\"\n          aria-describedby={undefined}\n          className={cn(\n            \"fixed inset-x-0 bottom-0 z-50 flex max-h-[80svh] flex-col overflow-hidden rounded-t-2xl border-t border-border bg-popover pb-[env(safe-area-inset-bottom)] text-popover-foreground shadow-lg\",\n            \"data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom\",\n          )}\n        >\n          <DialogPrimitive.Title className=\"sr-only\">\n            {title}\n          </DialogPrimitive.Title>\n          {/* Not draggable — Radix has no drag gesture and the sheet is short\n              enough that a grab bar would only promise one. It reads as the\n              handle the shape implies while staying purely decorative. */}\n          <div\n            aria-hidden=\"true\"\n            className=\"mx-auto mt-2.5 mb-1 h-1 w-9 shrink-0 rounded-full bg-muted-foreground/30\"\n          />\n          <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1\">\n            {children}\n          </div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n"]}

package/dist/responsive-panel.d.cts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ComponentProps } from 'react';
+import { PopoverContent } from './popover.cjs';
+import 'radix-ui';
+
+interface ResponsivePanelProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The control that opens the panel. Rendered as the trigger in both forms. */
+    trigger: ReactNode;
+    /**
+     * Names the sheet for screen readers. Radix Dialog requires an accessible
+     * name; it is visually hidden, since the panel's own contents are labelled.
+     */
+    title: string;
+    children: ReactNode;
+    /** Popover-only; the sheet is always full width. */
+    align?: ComponentProps<typeof PopoverContent>["align"];
+    /**
+     * Styling for the popover form only.
+     *
+     * Deliberately not a shared `className`: `cn` is tailwind-merge, so a class
+     * written for the popover silently deletes a conflicting one from the
+     * sheet's own base list. `p-0` and `pb-[env(safe-area-inset-bottom)]` are
+     * the same conflict group, so passing the popover's `p-0` through dropped
+     * the sheet's home-indicator inset — and a `divide-y` meant for the
+     * popover's sections drew a rule under the sheet's grab handle instead.
+     */
+    popoverClassName?: string;
+}
+declare function ResponsivePanel({ open, onOpenChange, trigger, title, children, align, popoverClassName, }: ResponsivePanelProps): react_jsx_runtime.JSX.Element;
+
+export { ResponsivePanel, type ResponsivePanelProps };

package/dist/responsive-panel.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, ComponentProps } from 'react';
+import { PopoverContent } from './popover.js';
+import 'radix-ui';
+
+interface ResponsivePanelProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The control that opens the panel. Rendered as the trigger in both forms. */
+    trigger: ReactNode;
+    /**
+     * Names the sheet for screen readers. Radix Dialog requires an accessible
+     * name; it is visually hidden, since the panel's own contents are labelled.
+     */
+    title: string;
+    children: ReactNode;
+    /** Popover-only; the sheet is always full width. */
+    align?: ComponentProps<typeof PopoverContent>["align"];
+    /**
+     * Styling for the popover form only.
+     *
+     * Deliberately not a shared `className`: `cn` is tailwind-merge, so a class
+     * written for the popover silently deletes a conflicting one from the
+     * sheet's own base list. `p-0` and `pb-[env(safe-area-inset-bottom)]` are
+     * the same conflict group, so passing the popover's `p-0` through dropped
+     * the sheet's home-indicator inset — and a `divide-y` meant for the
+     * popover's sections drew a rule under the sheet's grab handle instead.
+     */
+    popoverClassName?: string;
+}
+declare function ResponsivePanel({ open, onOpenChange, trigger, title, children, align, popoverClassName, }: ResponsivePanelProps): react_jsx_runtime.JSX.Element;
+
+export { ResponsivePanel, type ResponsivePanelProps };

package/dist/responsive-panel.js

@@ -0,0 +1,83 @@
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-NSK344BJ.js';
+import { cn } from './chunk-LZGII7SX.js';
+import { Dialog } from 'radix-ui';
+import { useSyncExternalStore } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var MOBILE_QUERY = "(max-width: 767px)";
+function subscribe(onChange) {
+  const mql = window.matchMedia(MOBILE_QUERY);
+  mql.addEventListener("change", onChange);
+  return () => mql.removeEventListener("change", onChange);
+}
+function useIsMobile() {
+  return useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(MOBILE_QUERY).matches,
+    // No viewport when server-rendered; assume desktop, as the components do.
+    () => false
+  );
+}
+function ResponsivePanel({
+  open,
+  onOpenChange,
+  trigger,
+  title,
+  children,
+  align = "start",
+  popoverClassName
+}) {
+  const isMobile = useIsMobile();
+  if (!isMobile) {
+    return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsx(
+        PopoverContent,
+        {
+          side: "top",
+          align,
+          className: cn("w-64 overflow-hidden rounded-xl p-1", popoverClassName),
+          children
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx(
+        Dialog.Overlay,
+        {
+          "data-slot": "responsive-panel-overlay",
+          className: "fixed inset-0 z-50 bg-black/40 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Dialog.Content,
+        {
+          "data-slot": "responsive-panel-sheet",
+          "aria-describedby": void 0,
+          className: cn(
+            "fixed inset-x-0 bottom-0 z-50 flex max-h-[80svh] flex-col overflow-hidden rounded-t-2xl border-t border-border bg-popover pb-[env(safe-area-inset-bottom)] text-popover-foreground shadow-lg",
+            "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(Dialog.Title, { className: "sr-only", children: title }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "mx-auto mt-2.5 mb-1 h-1 w-9 shrink-0 rounded-full bg-muted-foreground/30"
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1", children })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+
+export { ResponsivePanel };
+//# sourceMappingURL=responsive-panel.js.map
+//# sourceMappingURL=responsive-panel.js.map

package/dist/responsive-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/use-is-mobile.ts","../src/responsive-panel.tsx"],"names":["DialogPrimitive"],"mappings":";;;;;;AAQA,IAAM,YAAA,GAAe,oBAAA;AAOrB,SAAS,UAAU,QAAA,EAAkC;AACnD,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,UAAA,CAAW,YAAY,CAAA;AAC1C,EAAA,GAAA,CAAI,gBAAA,CAAiB,UAAU,QAAQ,CAAA;AACvC,EAAA,OAAO,MAAM,GAAA,CAAI,mBAAA,CAAoB,QAAA,EAAU,QAAQ,CAAA;AACzD;AASO,SAAS,WAAA,GAAuB;AACrC,EAAA,OAAO,oBAAA;AAAA,IACL,SAAA;AAAA,IACA,MAAM,MAAA,CAAO,UAAA,CAAW,YAAY,CAAA,CAAE,OAAA;AAAA;AAAA,IAEtC,MAAM;AAAA,GACR;AACF;ACUO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR;AACF,CAAA,EAAyB;AACvB,EAAA,MAAM,WAAW,WAAA,EAAY;AAE7B,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,uBACE,IAAA,CAAC,OAAA,EAAA,EAAQ,IAAA,EAAY,YAAA,EACnB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EAAE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,sBACjC,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,IAAA,EAAK,KAAA;AAAA,UACL,KAAA;AAAA,UACA,SAAA,EAAW,EAAA,CAAG,qCAAA,EAAuC,gBAAgB,CAAA;AAAA,UAEpE;AAAA;AAAA;AACH,KAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,IAAA,CAACA,MAAA,CAAgB,IAAA,EAAhB,EAAqB,MAAY,YAAA,EAChC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAACA,MAAA,CAAgB,OAAA,EAAhB,EAAwB,OAAA,EAAO,MAAE,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAC1C,IAAA,CAACA,MAAA,CAAgB,MAAA,EAAhB,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAACA,MAAA,CAAgB,OAAA;AAAA,QAAhB;AAAA,UACC,WAAA,EAAU,0BAAA;AAAA,UACV,SAAA,EAAU;AAAA;AAAA,OACZ;AAAA,sBACA,IAAA;AAAA,QAACA,MAAA,CAAgB,OAAA;AAAA,QAAhB;AAAA,UACC,WAAA,EAAU,wBAAA;AAAA,UACV,kBAAA,EAAkB,MAAA;AAAA,UAClB,SAAA,EAAW,EAAA;AAAA,YACT,8LAAA;AAAA,YACA;AAAA,WACF;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAA,GAAA,CAACA,MAAA,CAAgB,KAAA,EAAhB,EAAsB,SAAA,EAAU,WAC9B,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,4BAIA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,aAAA,EAAY,MAAA;AAAA,gBACZ,SAAA,EAAU;AAAA;AAAA,aACZ;AAAA,4BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uDAAA,EACZ,QAAA,EACH;AAAA;AAAA;AAAA;AACF,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"responsive-panel.js","sourcesContent":["import { useSyncExternalStore } from \"react\";\n\n/**\n * The `md` breakpoint, matching the Tailwind default the components'\n * responsive classes use. Anything that needs to *render* differently on a\n * phone (rather than just restyle) reads this; a media query alone cannot\n * swap a popover for a sheet, because they are different components.\n */\nconst MOBILE_QUERY = \"(max-width: 767px)\";\n\n// Deliberately not caching the MediaQueryList across calls. getSnapshot does\n// run per render, but matchMedia is ~1µs and a module-level cache would pin\n// the first `window.matchMedia` this module ever saw — which makes the hook\n// untestable by stubbing it, and the sheet branch is only reachable in tests\n// that way. Not a trade worth making for a cost that does not register.\nfunction subscribe(onChange: () => void): () => void {\n  const mql = window.matchMedia(MOBILE_QUERY);\n  mql.addEventListener(\"change\", onChange);\n  return () => mql.removeEventListener(\"change\", onChange);\n}\n\n/**\n * True while the viewport is narrower than `md`.\n *\n * Reads synchronously on the first render rather than filling in from an\n * effect: a value that says \"desktop\" for one frame is invisible for a class\n * name and wrong for anything that decides *which component to mount*.\n */\nexport function useIsMobile(): boolean {\n  return useSyncExternalStore(\n    subscribe,\n    () => window.matchMedia(MOBILE_QUERY).matches,\n    // No viewport when server-rendered; assume desktop, as the components do.\n    () => false,\n  );\n}\n","// A panel that is a popover with a cursor and a bottom sheet on a phone.\n//\n// The composer's secondary controls (tools, session context) open panels that\n// are anchored above a ~32px button. That is right on a desktop and wrong on a\n// phone: an anchored popover near the bottom of the screen has nowhere to go,\n// its content is capped by whatever space is left above the composer, and the\n// whole thing sits under the thumb that opened it. A sheet rising from the\n// bottom edge has the full width, as much height as it needs, and lands where\n// the hand already is.\n//\n// The two are different components, not one component with different classes,\n// so the choice is made in JS — see useIsMobile.\n\nimport { Dialog as DialogPrimitive } from \"radix-ui\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { useIsMobile } from \"./lib/use-is-mobile\";\nimport { cn } from \"./lib/utils\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"./popover\";\n\nexport interface ResponsivePanelProps {\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** The control that opens the panel. Rendered as the trigger in both forms. */\n  trigger: ReactNode;\n  /**\n   * Names the sheet for screen readers. Radix Dialog requires an accessible\n   * name; it is visually hidden, since the panel's own contents are labelled.\n   */\n  title: string;\n  children: ReactNode;\n  /** Popover-only; the sheet is always full width. */\n  align?: ComponentProps<typeof PopoverContent>[\"align\"];\n  /**\n   * Styling for the popover form only.\n   *\n   * Deliberately not a shared `className`: `cn` is tailwind-merge, so a class\n   * written for the popover silently deletes a conflicting one from the\n   * sheet's own base list. `p-0` and `pb-[env(safe-area-inset-bottom)]` are\n   * the same conflict group, so passing the popover's `p-0` through dropped\n   * the sheet's home-indicator inset — and a `divide-y` meant for the\n   * popover's sections drew a rule under the sheet's grab handle instead.\n   */\n  popoverClassName?: string;\n}\n\nexport function ResponsivePanel({\n  open,\n  onOpenChange,\n  trigger,\n  title,\n  children,\n  align = \"start\",\n  popoverClassName,\n}: ResponsivePanelProps) {\n  const isMobile = useIsMobile();\n\n  if (!isMobile) {\n    return (\n      <Popover open={open} onOpenChange={onOpenChange}>\n        <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n        <PopoverContent\n          side=\"top\"\n          align={align}\n          className={cn(\"w-64 overflow-hidden rounded-xl p-1\", popoverClassName)}\n        >\n          {children}\n        </PopoverContent>\n      </Popover>\n    );\n  }\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <DialogPrimitive.Trigger asChild>{trigger}</DialogPrimitive.Trigger>\n      <DialogPrimitive.Portal>\n        <DialogPrimitive.Overlay\n          data-slot=\"responsive-panel-overlay\"\n          className=\"fixed inset-0 z-50 bg-black/40 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0\"\n        />\n        <DialogPrimitive.Content\n          data-slot=\"responsive-panel-sheet\"\n          aria-describedby={undefined}\n          className={cn(\n            \"fixed inset-x-0 bottom-0 z-50 flex max-h-[80svh] flex-col overflow-hidden rounded-t-2xl border-t border-border bg-popover pb-[env(safe-area-inset-bottom)] text-popover-foreground shadow-lg\",\n            \"data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom\",\n          )}\n        >\n          <DialogPrimitive.Title className=\"sr-only\">\n            {title}\n          </DialogPrimitive.Title>\n          {/* Not draggable — Radix has no drag gesture and the sheet is short\n              enough that a grab bar would only promise one. It reads as the\n              handle the shape implies while staying purely decorative. */}\n          <div\n            aria-hidden=\"true\"\n            className=\"mx-auto mt-2.5 mb-1 h-1 w-9 shrink-0 rounded-full bg-muted-foreground/30\"\n          />\n          <div className=\"min-h-0 flex-1 overflow-y-auto overscroll-contain p-1\">\n            {children}\n          </div>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n"]}

package/dist/scroll-area.cjs

@@ -0,0 +1,63 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var radixUi = require('radix-ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    radixUi.ScrollArea.Root,
+    {
+      "data-slot": "scroll-area",
+      className: chunk6YHDDRIM_cjs.cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          radixUi.ScrollArea.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(radixUi.ScrollArea.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.ScrollArea.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      "data-orientation": orientation,
+      orientation,
+      className: chunk6YHDDRIM_cjs.cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        radixUi.ScrollArea.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-none bg-border"
+        }
+      )
+    }
+  );
+}
+
+exports.ScrollArea = ScrollArea;
+exports.ScrollBar = ScrollBar;
+//# sourceMappingURL=scroll-area.cjs.map
+//# sourceMappingURL=scroll-area.cjs.map

package/dist/scroll-area.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scroll-area.tsx"],"names":["jsxs","ScrollAreaPrimitive","cn","jsx"],"mappings":";;;;;;AAOA,SAAS,UAAA,CAAW;AAAA,EAClB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACEA,eAAA;AAAA,IAACC,kBAAA,CAAoB,IAAA;AAAA,IAApB;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAWC,oBAAA,CAAG,UAAA,EAAY,SAAS,CAAA;AAAA,MAClC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAACF,kBAAA,CAAoB,QAAA;AAAA,UAApB;AAAA,YACC,WAAA,EAAU,sBAAA;AAAA,YACV,SAAA,EAAU,oJAAA;AAAA,YAET;AAAA;AAAA,SACH;AAAA,uCACC,SAAA,EAAA,EAAU,CAAA;AAAA,wBACXE,cAAA,CAACF,kBAAA,CAAoB,MAAA,EAApB,EAA2B;AAAA;AAAA;AAAA,GAC9B;AAEJ;AAEA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,WAAA,GAAc,UAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAyE;AACvE,EAAA,uBACEE,cAAA;AAAA,IAACF,kBAAA,CAAoB,mBAAA;AAAA,IAApB;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,kBAAA,EAAkB,WAAA;AAAA,MAClB,WAAA;AAAA,MACA,SAAA,EAAWC,oBAAA;AAAA,QACT,oQAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAAC,cAAA;AAAA,QAACF,kBAAA,CAAoB,eAAA;AAAA,QAApB;AAAA,UACC,WAAA,EAAU,mBAAA;AAAA,UACV,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA,GACF;AAEJ","file":"scroll-area.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-none bg-border\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n"]}

package/dist/scroll-area.d.cts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ScrollArea as ScrollArea$1 } from 'radix-ui';
+
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollArea$1.Root>): react_jsx_runtime.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
+
+export { ScrollArea, ScrollBar };

package/dist/scroll-area.d.ts

@@ -0,0 +1,8 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { ScrollArea as ScrollArea$1 } from 'radix-ui';
+
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollArea$1.Root>): react_jsx_runtime.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollArea$1.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
+
+export { ScrollArea, ScrollBar };

package/dist/scroll-area.js

@@ -0,0 +1,60 @@
+import { cn } from './chunk-LZGII7SX.js';
+import { ScrollArea as ScrollArea$1 } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollArea$1.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollArea$1.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollArea$1.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-area-scrollbar",
+      "data-orientation": orientation,
+      orientation,
+      className: cn(
+        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollArea$1.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-area-thumb",
+          className: "relative flex-1 rounded-none bg-border"
+        }
+      )
+    }
+  );
+}
+
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.js.map
+//# sourceMappingURL=scroll-area.js.map

package/dist/scroll-area.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/scroll-area.tsx"],"names":["ScrollAreaPrimitive"],"mappings":";;;;AAOA,SAAS,UAAA,CAAW;AAAA,EAClB,SAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA0D;AACxD,EAAA,uBACE,IAAA;AAAA,IAACA,YAAA,CAAoB,IAAA;AAAA,IAApB;AAAA,MACC,WAAA,EAAU,aAAA;AAAA,MACV,SAAA,EAAW,EAAA,CAAG,UAAA,EAAY,SAAS,CAAA;AAAA,MAClC,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAACA,YAAA,CAAoB,QAAA;AAAA,UAApB;AAAA,YACC,WAAA,EAAU,sBAAA;AAAA,YACV,SAAA,EAAU,oJAAA;AAAA,YAET;AAAA;AAAA,SACH;AAAA,4BACC,SAAA,EAAA,EAAU,CAAA;AAAA,wBACX,GAAA,CAACA,YAAA,CAAoB,MAAA,EAApB,EAA2B;AAAA;AAAA;AAAA,GAC9B;AAEJ;AAEA,SAAS,SAAA,CAAU;AAAA,EACjB,SAAA;AAAA,EACA,WAAA,GAAc,UAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAyE;AACvE,EAAA,uBACE,GAAA;AAAA,IAACA,YAAA,CAAoB,mBAAA;AAAA,IAApB;AAAA,MACC,WAAA,EAAU,uBAAA;AAAA,MACV,kBAAA,EAAkB,WAAA;AAAA,MAClB,WAAA;AAAA,MACA,SAAA,EAAW,EAAA;AAAA,QACT,oQAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA;AAAA,QAACA,YAAA,CAAoB,eAAA;AAAA,QAApB;AAAA,UACC,WAAA,EAAU,mBAAA;AAAA,UACV,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA,GACF;AAEJ","file":"scroll-area.js","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\"\n\nimport { cn } from \"./lib/utils\"\n\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-none bg-border\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n"]}

package/dist/section-label.cjs

@@ -0,0 +1,30 @@
+'use strict';
+
+var chunk2UHRDVPT_cjs = require('./chunk-2UHRDVPT.cjs');
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+function SectionLabel({
+  label,
+  className,
+  ...props
+}) {
+  const { collapsed } = chunk2UHRDVPT_cjs.useSidebar();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "section-label",
+      className: chunk6YHDDRIM_cjs.cn(
+        "border-t border-line pointer-coarse:mt-3 pointer-coarse:mb-1 pointer-coarse:pt-4",
+        collapsed ? "my-1.5" : "mt-2 mb-0.5 pt-3 pl-2.5",
+        className
+      ),
+      ...props,
+      children: !collapsed && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-block text-xs text-subtle pointer-coarse:text-[13px] pointer-coarse:font-medium pointer-coarse:tracking-wide", children: label })
+    }
+  );
+}
+
+exports.SectionLabel = SectionLabel;
+//# sourceMappingURL=section-label.cjs.map
+//# sourceMappingURL=section-label.cjs.map

package/dist/section-label.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/section-label.tsx"],"names":["useSidebar","jsx","cn"],"mappings":";;;;;;AAUA,SAAS,YAAA,CAAa;AAAA,EACpB,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA+E;AAG7E,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIA,4BAAA,EAAW;AAEjC,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,eAAA;AAAA,MACV,SAAA,EAAWC,oBAAA;AAAA,QACT,kFAAA;AAAA,QACA,YAAY,QAAA,GAAW,yBAAA;AAAA,QACvB;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,WAAC,SAAA,oBACAD,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uHACb,QAAA,EAAA,KAAA,EACH;AAAA;AAAA,GAEJ;AAEJ","file":"section-label.cjs","sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\nimport { useSidebar } from \"./sidebar\"\n\n/**\n * The Work navbar's group label (\"Library\"): a rule above a small, quiet\n * word, starting a new group in a list of rows. Touch steps the type up and\n * the spacing out with the rows around it.\n */\nfunction SectionLabel({\n  label,\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { label: React.ReactNode }) {\n  // In a collapsed sidebar rail there is no room for the word: the rule alone\n  // still says \"a new group\".\n  const { collapsed } = useSidebar()\n\n  return (\n    <div\n      data-slot=\"section-label\"\n      className={cn(\n        \"border-t border-line pointer-coarse:mt-3 pointer-coarse:mb-1 pointer-coarse:pt-4\",\n        collapsed ? \"my-1.5\" : \"mt-2 mb-0.5 pt-3 pl-2.5\",\n        className\n      )}\n      {...props}\n    >\n      {!collapsed && (\n        <span className=\"inline-block text-xs text-subtle pointer-coarse:text-[13px] pointer-coarse:font-medium pointer-coarse:tracking-wide\">\n          {label}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport { SectionLabel }\n"]}

package/dist/section-label.d.cts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * The Work navbar's group label ("Library"): a rule above a small, quiet
+ * word, starting a new group in a list of rows. Touch steps the type up and
+ * the spacing out with the rows around it.
+ */
+declare function SectionLabel({ label, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+    label: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { SectionLabel };

package/dist/section-label.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * The Work navbar's group label ("Library"): a rule above a small, quiet
+ * word, starting a new group in a list of rows. Touch steps the type up and
+ * the spacing out with the rows around it.
+ */
+declare function SectionLabel({ label, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+    label: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { SectionLabel };

package/dist/section-label.js

@@ -0,0 +1,28 @@
+import { useSidebar } from './chunk-L73QIINW.js';
+import { cn } from './chunk-LZGII7SX.js';
+import { jsx } from 'react/jsx-runtime';
+
+function SectionLabel({
+  label,
+  className,
+  ...props
+}) {
+  const { collapsed } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "section-label",
+      className: cn(
+        "border-t border-line pointer-coarse:mt-3 pointer-coarse:mb-1 pointer-coarse:pt-4",
+        collapsed ? "my-1.5" : "mt-2 mb-0.5 pt-3 pl-2.5",
+        className
+      ),
+      ...props,
+      children: !collapsed && /* @__PURE__ */ jsx("span", { className: "inline-block text-xs text-subtle pointer-coarse:text-[13px] pointer-coarse:font-medium pointer-coarse:tracking-wide", children: label })
+    }
+  );
+}
+
+export { SectionLabel };
+//# sourceMappingURL=section-label.js.map
+//# sourceMappingURL=section-label.js.map

package/dist/section-label.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/section-label.tsx"],"names":[],"mappings":";;;;AAUA,SAAS,YAAA,CAAa;AAAA,EACpB,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA+E;AAG7E,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,UAAA,EAAW;AAEjC,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,eAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,kFAAA;AAAA,QACA,YAAY,QAAA,GAAW,yBAAA;AAAA,QACvB;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,WAAC,SAAA,oBACA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uHACb,QAAA,EAAA,KAAA,EACH;AAAA;AAAA,GAEJ;AAEJ","file":"section-label.js","sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\nimport { useSidebar } from \"./sidebar\"\n\n/**\n * The Work navbar's group label (\"Library\"): a rule above a small, quiet\n * word, starting a new group in a list of rows. Touch steps the type up and\n * the spacing out with the rows around it.\n */\nfunction SectionLabel({\n  label,\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"div\">, \"children\"> & { label: React.ReactNode }) {\n  // In a collapsed sidebar rail there is no room for the word: the rule alone\n  // still says \"a new group\".\n  const { collapsed } = useSidebar()\n\n  return (\n    <div\n      data-slot=\"section-label\"\n      className={cn(\n        \"border-t border-line pointer-coarse:mt-3 pointer-coarse:mb-1 pointer-coarse:pt-4\",\n        collapsed ? \"my-1.5\" : \"mt-2 mb-0.5 pt-3 pl-2.5\",\n        className\n      )}\n      {...props}\n    >\n      {!collapsed && (\n        <span className=\"inline-block text-xs text-subtle pointer-coarse:text-[13px] pointer-coarse:font-medium pointer-coarse:tracking-wide\">\n          {label}\n        </span>\n      )}\n    </div>\n  )\n}\n\nexport { SectionLabel }\n"]}

package/dist/segmented-control.cjs

@@ -0,0 +1,75 @@
+'use strict';
+
+var chunk6YHDDRIM_cjs = require('./chunk-6YHDDRIM.cjs');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function SegmentedControl({
+  segments,
+  value,
+  onChange,
+  className,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": ariaLabel,
+      "data-slot": "segmented-control",
+      className: chunk6YHDDRIM_cjs.cn(
+        "flex shrink-0 items-center gap-2 text-[13px]",
+        "pointer-coarse:w-full pointer-coarse:gap-1 pointer-coarse:rounded-full pointer-coarse:bg-foreground/[0.06] pointer-coarse:p-1 pointer-coarse:text-sm",
+        className
+      ),
+      children: segments.map((segment, index) => {
+        const active = segment.value === value;
+        return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+          index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-subtle pointer-coarse:hidden", children: "/" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "data-slot": "segmented-control-item",
+              "aria-label": segment.ariaLabel,
+              "aria-pressed": active,
+              onClick: () => {
+                if (!active) onChange(segment.value);
+              },
+              className: chunk6YHDDRIM_cjs.cn(
+                "cursor-pointer rounded-full border-none font-semibold transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+                "pointer-coarse:inline-flex pointer-coarse:min-h-11 pointer-coarse:flex-1 pointer-coarse:items-center pointer-coarse:justify-center pointer-coarse:px-4",
+                active ? "bg-amber-400 px-3 py-1.25 text-stone-950 pointer-coarse:py-0" : "bg-transparent text-subtle hover:text-foreground pointer-coarse:text-muted-foreground pointer-coarse:active:bg-foreground/[0.06]"
+              ),
+              children: segment.label
+            }
+          )
+        ] }, segment.value);
+      })
+    }
+  );
+}
+
+exports.SegmentedControl = SegmentedControl;
+//# sourceMappingURL=segmented-control.cjs.map
+//# sourceMappingURL=segmented-control.cjs.map

package/dist/segmented-control.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control.tsx"],"names":["jsx","cn","jsxs","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,SAAS,gBAAA,CAAmC;AAAA,EAC1C,QAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc;AAChB,CAAA,EAMG;AACD,EAAA,uBACEA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,OAAA;AAAA,MACL,YAAA,EAAY,SAAA;AAAA,MACZ,WAAA,EAAU,mBAAA;AAAA,MACV,SAAA,EAAWC,oBAAA;AAAA,QACT,8CAAA;AAAA,QACA,sJAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,EAAS,KAAA,KAAU;AAChC,QAAA,MAAM,MAAA,GAAS,QAAQ,KAAA,KAAU,KAAA;AACjC,QAAA,uBACEC,eAAA,CAAOC,2BAAN,EACE,QAAA,EAAA;AAAA,UAAA,KAAA,GAAQ,qBACPH,cAAA,CAAC,MAAA,EAAA,EAAK,eAAa,IAAA,EAAM,SAAA,EAAU,qCAAoC,QAAA,EAAA,GAAA,EAEvE,CAAA;AAAA,0BAEFA,cAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,WAAA,EAAU,wBAAA;AAAA,cACV,cAAY,OAAA,CAAQ,SAAA;AAAA,cACpB,cAAA,EAAc,MAAA;AAAA,cACd,SAAS,MAAM;AACb,gBAAA,IAAI,CAAC,MAAA,EAAQ,QAAA,CAAS,OAAA,CAAQ,KAAK,CAAA;AAAA,cACrC,CAAA;AAAA,cACA,SAAA,EAAWC,oBAAA;AAAA,gBACT,sIAAA;AAAA,gBACA,wJAAA;AAAA,gBACA,SACI,8DAAA,GACA;AAAA,eACN;AAAA,cAEC,QAAA,EAAA,OAAA,CAAQ;AAAA;AAAA;AACX,SAAA,EAAA,EAvBmB,QAAQ,KAwB7B,CAAA;AAAA,MAEJ,CAAC;AAAA;AAAA,GACH;AAEJ","file":"segmented-control.cjs","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\n\nexport interface Segment<T extends string> {\n  value: T\n  label: React.ReactNode\n  /** Accessible name when the label alone is too terse (\"Dev\" → \"Dev workspace\"). */\n  ariaLabel?: string\n}\n\n/**\n * The Work console's mode switch (its Work / Dev toggle), for any two or\n * three peers. With a mouse it is a line of 13px words split by slashes, the\n * picked one an amber pill; on touch it becomes a full-width segmented\n * control at the 44px floor, equal halves on a round track. Every segment is\n * a button: the picked one is inert but stays focusable and announces its\n * state, which a `<span>` cannot.\n */\nfunction SegmentedControl<T extends string>({\n  segments,\n  value,\n  onChange,\n  className,\n  \"aria-label\": ariaLabel,\n}: {\n  segments: readonly Segment<T>[]\n  value: T\n  onChange: (value: T) => void\n  className?: string\n  \"aria-label\"?: string\n}) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={ariaLabel}\n      data-slot=\"segmented-control\"\n      className={cn(\n        \"flex shrink-0 items-center gap-2 text-[13px]\",\n        \"pointer-coarse:w-full pointer-coarse:gap-1 pointer-coarse:rounded-full pointer-coarse:bg-foreground/[0.06] pointer-coarse:p-1 pointer-coarse:text-sm\",\n        className\n      )}\n    >\n      {segments.map((segment, index) => {\n        const active = segment.value === value\n        return (\n          <React.Fragment key={segment.value}>\n            {index > 0 && (\n              <span aria-hidden={true} className=\"text-subtle pointer-coarse:hidden\">\n                /\n              </span>\n            )}\n            <button\n              type=\"button\"\n              data-slot=\"segmented-control-item\"\n              aria-label={segment.ariaLabel}\n              aria-pressed={active}\n              onClick={() => {\n                if (!active) onChange(segment.value)\n              }}\n              className={cn(\n                \"cursor-pointer rounded-full border-none font-semibold transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/40\",\n                \"pointer-coarse:inline-flex pointer-coarse:min-h-11 pointer-coarse:flex-1 pointer-coarse:items-center pointer-coarse:justify-center pointer-coarse:px-4\",\n                active\n                  ? \"bg-amber-400 px-3 py-1.25 text-stone-950 pointer-coarse:py-0\"\n                  : \"bg-transparent text-subtle hover:text-foreground pointer-coarse:text-muted-foreground pointer-coarse:active:bg-foreground/[0.06]\"\n              )}\n            >\n              {segment.label}\n            </button>\n          </React.Fragment>\n        )\n      })}\n    </div>\n  )\n}\n\nexport { SegmentedControl }\n"]}