@flanksource/clicky-ui 0.3.44 → 0.3.46

package/dist/data/runtime/RuntimeBarSegment.cjs

@@ -1,11 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
 const utils = require("../../lib/utils.cjs");
 const DropdownMenu = require("../../overlay/DropdownMenu.cjs");
 const Icon = require("../Icon.cjs");
-const RuntimeBar_context = require("./RuntimeBar.context.cjs");
 const UiCheck = require("../../icons/components/UiCheck.cjs");
 const UiChevronDown = require("../../icons/components/UiChevronDown.cjs");
 const SEGMENT_CAPTION_CLASS = "truncate text-xs font-semibold text-foreground";
@@ -20,7 +18,6 @@ function RuntimeSegment({
   className,
   children
 }) {
-  const variant = react.useContext(RuntimeBar_context.RuntimeBarVariantContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenu.DropdownMenu,
     {
@@ -30,8 +27,7 @@ function RuntimeSegment({
       ...header ? { header } : {},
       menuClassName: "max-h-[70vh] min-w-56 max-w-80 overflow-y-auto",
       className: utils.cn(
-        "h-control-h min-w-0 [&>span]:min-w-0 [&>span]:w-full",
-        variant === "combo" ? "rounded-md border border-input bg-background" : "border-l border-border first:border-l-0",
+        "h-control-h min-w-0 border-l border-border first:border-l-0 [&>span]:min-w-0 [&>span]:w-full",
         className
       ),
       trigger: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/data/runtime/RuntimeBarSegment.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RuntimeBarSegment.cjs","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { UiCheck, UiChevronDown } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  DropdownMenu,\n  type DropdownMenuItem,\n} from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\nimport { RuntimeBarVariantContext } from \"./RuntimeBar.context\";\n\nexport const SEGMENT_CAPTION_CLASS =\n  \"truncate text-xs font-semibold text-foreground\";\nexport const SEGMENT_KEY_CLASS =\n  \"text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground\";\n\n// One trigger in the segmented runtime bar: a dropdown whose button carries the\n// segment's current value. `min-w-0` on the root lets a segment shrink past its\n// content — without it the flex item's automatic minimum size is its max-content\n// width, so a row of segments overflows a narrow container instead of ellipsing\n// its captions.\nexport function RuntimeSegment({\n  items,\n  menuLabel,\n  title,\n  header,\n  disabled = false,\n  hideChevron = false,\n  className,\n  children,\n}: {\n  items: DropdownMenuItem[];\n  menuLabel: string;\n  title: string;\n  header?: ReactNode;\n  disabled?: boolean;\n  /** Drops the trailing chevron, for a segment whose caption is a bare glyph. */\n  hideChevron?: boolean;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  const variant = useContext(RuntimeBarVariantContext);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuLabel={menuLabel}\n      items={items}\n      {...(header ? { header } : {})}\n      menuClassName=\"max-h-[70vh] min-w-56 max-w-80 overflow-y-auto\"\n      className={cn(\n        \"h-control-h min-w-0 [&>span]:min-w-0 [&>span]:w-full\",\n        variant === \"combo\"\n          ? \"rounded-md border border-input bg-background\"\n          : \"border-l border-border first:border-l-0\",\n        className,\n      )}\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          title={title}\n          className=\"inline-flex h-full w-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted\"\n        >\n          <RuntimeSegmentCaption hideChevron={hideChevron}>\n            {children}\n          </RuntimeSegmentCaption>\n        </button>\n      }\n    />\n  );\n}\n\nexport function RuntimeSegmentCaption({\n  children,\n  hideChevron = false,\n}: {\n  children: ReactNode;\n  hideChevron?: boolean;\n}) {\n  return (\n    <>\n      {children}\n      {!hideChevron && (\n        <Icon\n          icon={UiChevronDown}\n          className=\"size-3 shrink-0 text-muted-foreground/70\"\n        />\n      )}\n    </>\n  );\n}\n\nexport function SegmentItemLabel({\n  text,\n  hint,\n  selected,\n  stacked = false,\n}: {\n  text: string;\n  hint?: string | undefined;\n  selected: boolean;\n  stacked?: boolean | undefined;\n}) {\n  return (\n    <>\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block truncate\", selected && \"font-semibold\")}>\n          {text}\n        </span>\n        {hint && stacked && (\n          <span className=\"block whitespace-normal text-[11px] leading-4 text-muted-foreground\">\n            {hint}\n          </span>\n        )}\n      </span>\n      {hint && !stacked && (\n        <span className=\"shrink-0 text-[11px] text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n      <Icon\n        icon={UiCheck}\n        className={cn(\n          \"size-3.5 shrink-0 text-primary\",\n          !selected && \"invisible\",\n        )}\n      />\n    </>\n  );\n}\n"],"names":["useContext","RuntimeBarVariantContext","jsx","DropdownMenu","cn","jsxs","Fragment","Icon","UiChevronDown","UiCheck"],"mappings":";;;;;;;;;;AAUO,MAAM,wBACX;AACK,MAAM,oBACX;AAOK,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAUG;AACD,QAAM,UAAUA,MAAAA,WAAWC,2CAAwB;AACnD,SACEC,2BAAAA;AAAAA,IAACC,aAAAA;AAAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACC,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC3B,eAAc;AAAA,MACd,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA,YAAY,UACR,iDACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAEF,SACEF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UAEV,UAAAA,2BAAAA,IAAC,uBAAA,EAAsB,aACpB,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,cAAc;AAChB,GAGG;AACD,SACEG,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,CAAC,eACAJ,2BAAAA;AAAAA,MAACK,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAMC,cAAAA;AAAAA,QACN,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,SACEH,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,MAAAH,2BAAAA,IAAC,UAAK,WAAWE,SAAG,kBAAkB,YAAY,eAAe,GAC9D,UAAA,MACH;AAAA,MACC,QAAQ,WACPF,2BAAAA,IAAC,QAAA,EAAK,WAAU,uEACb,UAAA,KAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,QAAQ,CAAC,0CACP,QAAA,EAAK,WAAU,8CACb,UAAA,MACH;AAAA,IAEFA,2BAAAA;AAAAA,MAACK,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAME,QAAAA;AAAAA,QACN,WAAWL,MAAAA;AAAAA,UACT;AAAA,UACA,CAAC,YAAY;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;;;;;;"}
+{"version":3,"file":"RuntimeBarSegment.cjs","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { UiCheck, UiChevronDown } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  DropdownMenu,\n  type DropdownMenuItem,\n} from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\n\nexport const SEGMENT_CAPTION_CLASS =\n  \"truncate text-xs font-semibold text-foreground\";\nexport const SEGMENT_KEY_CLASS =\n  \"text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground\";\n\n// One trigger in the segmented runtime bar: a dropdown whose button carries the\n// segment's current value. `min-w-0` on the root lets a segment shrink past its\n// content — without it the flex item's automatic minimum size is its max-content\n// width, so a row of segments overflows a narrow container instead of ellipsing\n// its captions.\nexport function RuntimeSegment({\n  items,\n  menuLabel,\n  title,\n  header,\n  disabled = false,\n  hideChevron = false,\n  className,\n  children,\n}: {\n  items: DropdownMenuItem[];\n  menuLabel: string;\n  title: string;\n  header?: ReactNode;\n  disabled?: boolean;\n  /** Drops the trailing chevron, for a segment whose caption is a bare glyph. */\n  hideChevron?: boolean;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuLabel={menuLabel}\n      items={items}\n      {...(header ? { header } : {})}\n      menuClassName=\"max-h-[70vh] min-w-56 max-w-80 overflow-y-auto\"\n      className={cn(\n        \"h-control-h min-w-0 border-l border-border first:border-l-0 [&>span]:min-w-0 [&>span]:w-full\",\n        className,\n      )}\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          title={title}\n          className=\"inline-flex h-full w-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted\"\n        >\n          <RuntimeSegmentCaption hideChevron={hideChevron}>\n            {children}\n          </RuntimeSegmentCaption>\n        </button>\n      }\n    />\n  );\n}\n\nexport function RuntimeSegmentCaption({\n  children,\n  hideChevron = false,\n}: {\n  children: ReactNode;\n  hideChevron?: boolean;\n}) {\n  return (\n    <>\n      {children}\n      {!hideChevron && (\n        <Icon\n          icon={UiChevronDown}\n          className=\"size-3 shrink-0 text-muted-foreground/70\"\n        />\n      )}\n    </>\n  );\n}\n\nexport function SegmentItemLabel({\n  text,\n  hint,\n  selected,\n  stacked = false,\n}: {\n  text: string;\n  hint?: string | undefined;\n  selected: boolean;\n  stacked?: boolean | undefined;\n}) {\n  return (\n    <>\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block truncate\", selected && \"font-semibold\")}>\n          {text}\n        </span>\n        {hint && stacked && (\n          <span className=\"block whitespace-normal text-[11px] leading-4 text-muted-foreground\">\n            {hint}\n          </span>\n        )}\n      </span>\n      {hint && !stacked && (\n        <span className=\"shrink-0 text-[11px] text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n      <Icon\n        icon={UiCheck}\n        className={cn(\n          \"size-3.5 shrink-0 text-primary\",\n          !selected && \"invisible\",\n        )}\n      />\n    </>\n  );\n}\n"],"names":["jsx","DropdownMenu","cn","jsxs","Fragment","Icon","UiChevronDown","UiCheck"],"mappings":";;;;;;;;AASO,MAAM,wBACX;AACK,MAAM,oBACX;AAOK,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAUG;AACD,SACEA,2BAAAA;AAAAA,IAACC,aAAAA;AAAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACC,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC3B,eAAc;AAAA,MACd,WAAWC,MAAAA;AAAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SACEF,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UAEV,UAAAA,2BAAAA,IAAC,uBAAA,EAAsB,aACpB,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,cAAc;AAChB,GAGG;AACD,SACEG,2BAAAA,KAAAC,qBAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,CAAC,eACAJ,2BAAAA;AAAAA,MAACK,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAMC,cAAAA;AAAAA,QACN,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,SACEH,2BAAAA,KAAAC,qBAAA,EACE,UAAA;AAAA,IAAAD,2BAAAA,KAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,MAAAH,2BAAAA,IAAC,UAAK,WAAWE,SAAG,kBAAkB,YAAY,eAAe,GAC9D,UAAA,MACH;AAAA,MACC,QAAQ,WACPF,2BAAAA,IAAC,QAAA,EAAK,WAAU,uEACb,UAAA,KAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,QAAQ,CAAC,0CACP,QAAA,EAAK,WAAU,8CACb,UAAA,MACH;AAAA,IAEFA,2BAAAA;AAAAA,MAACK,KAAAA;AAAAA,MAAA;AAAA,QACC,MAAME,QAAAA;AAAAA,QACN,WAAWL,MAAAA;AAAAA,UACT;AAAA,UACA,CAAC,YAAY;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;;;;;;"}

package/dist/data/runtime/RuntimeBarSegment.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RuntimeBarSegment.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGnD,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,4BAA4B,CAAC;AAIpC,eAAO,MAAM,qBAAqB,mDACgB,CAAC;AACnD,eAAO,MAAM,iBAAiB,yFAC0D,CAAC;AAOzF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,WAAmB,EACnB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA8BA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,WAAmB,GACpB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,+BAYA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAe,GAChB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B,+BA2BA"}
+{"version":3,"file":"RuntimeBarSegment.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAEL,KAAK,gBAAgB,EACtB,MAAM,4BAA4B,CAAC;AAGpC,eAAO,MAAM,qBAAqB,mDACgB,CAAC;AACnD,eAAO,MAAM,iBAAiB,yFAC0D,CAAC;AAOzF,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAgB,EAChB,WAAmB,EACnB,SAAS,EACT,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+EAA+E;IAC/E,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA0BA;AAED,wBAAgB,qBAAqB,CAAC,EACpC,QAAQ,EACR,WAAmB,GACpB,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,+BAYA;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,OAAe,GAChB,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B,+BA2BA"}

package/dist/data/runtime/RuntimeBarSegment.js

@@ -1,9 +1,7 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useContext } from "react";
 import { cn } from "../../lib/utils.js";
 import { DropdownMenu } from "../../overlay/DropdownMenu.js";
 import { Icon } from "../Icon.js";
-import { RuntimeBarVariantContext } from "./RuntimeBar.context.js";
 import { UiCheck } from "../../icons/components/UiCheck.js";
 import { UiChevronDown } from "../../icons/components/UiChevronDown.js";
 const SEGMENT_CAPTION_CLASS = "truncate text-xs font-semibold text-foreground";
@@ -18,7 +16,6 @@ function RuntimeSegment({
   className,
   children
 }) {
-  const variant = useContext(RuntimeBarVariantContext);
   return /* @__PURE__ */ jsx(
     DropdownMenu,
     {
@@ -28,8 +25,7 @@ function RuntimeSegment({
       ...header ? { header } : {},
       menuClassName: "max-h-[70vh] min-w-56 max-w-80 overflow-y-auto",
       className: cn(
-        "h-control-h min-w-0 [&>span]:min-w-0 [&>span]:w-full",
-        variant === "combo" ? "rounded-md border border-input bg-background" : "border-l border-border first:border-l-0",
+        "h-control-h min-w-0 border-l border-border first:border-l-0 [&>span]:min-w-0 [&>span]:w-full",
         className
       ),
       trigger: /* @__PURE__ */ jsx(

package/dist/data/runtime/RuntimeBarSegment.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuntimeBarSegment.js","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"sourcesContent":["import { useContext, type ReactNode } from \"react\";\nimport { UiCheck, UiChevronDown } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  DropdownMenu,\n  type DropdownMenuItem,\n} from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\nimport { RuntimeBarVariantContext } from \"./RuntimeBar.context\";\n\nexport const SEGMENT_CAPTION_CLASS =\n  \"truncate text-xs font-semibold text-foreground\";\nexport const SEGMENT_KEY_CLASS =\n  \"text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground\";\n\n// One trigger in the segmented runtime bar: a dropdown whose button carries the\n// segment's current value. `min-w-0` on the root lets a segment shrink past its\n// content — without it the flex item's automatic minimum size is its max-content\n// width, so a row of segments overflows a narrow container instead of ellipsing\n// its captions.\nexport function RuntimeSegment({\n  items,\n  menuLabel,\n  title,\n  header,\n  disabled = false,\n  hideChevron = false,\n  className,\n  children,\n}: {\n  items: DropdownMenuItem[];\n  menuLabel: string;\n  title: string;\n  header?: ReactNode;\n  disabled?: boolean;\n  /** Drops the trailing chevron, for a segment whose caption is a bare glyph. */\n  hideChevron?: boolean;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  const variant = useContext(RuntimeBarVariantContext);\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuLabel={menuLabel}\n      items={items}\n      {...(header ? { header } : {})}\n      menuClassName=\"max-h-[70vh] min-w-56 max-w-80 overflow-y-auto\"\n      className={cn(\n        \"h-control-h min-w-0 [&>span]:min-w-0 [&>span]:w-full\",\n        variant === \"combo\"\n          ? \"rounded-md border border-input bg-background\"\n          : \"border-l border-border first:border-l-0\",\n        className,\n      )}\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          title={title}\n          className=\"inline-flex h-full w-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted\"\n        >\n          <RuntimeSegmentCaption hideChevron={hideChevron}>\n            {children}\n          </RuntimeSegmentCaption>\n        </button>\n      }\n    />\n  );\n}\n\nexport function RuntimeSegmentCaption({\n  children,\n  hideChevron = false,\n}: {\n  children: ReactNode;\n  hideChevron?: boolean;\n}) {\n  return (\n    <>\n      {children}\n      {!hideChevron && (\n        <Icon\n          icon={UiChevronDown}\n          className=\"size-3 shrink-0 text-muted-foreground/70\"\n        />\n      )}\n    </>\n  );\n}\n\nexport function SegmentItemLabel({\n  text,\n  hint,\n  selected,\n  stacked = false,\n}: {\n  text: string;\n  hint?: string | undefined;\n  selected: boolean;\n  stacked?: boolean | undefined;\n}) {\n  return (\n    <>\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block truncate\", selected && \"font-semibold\")}>\n          {text}\n        </span>\n        {hint && stacked && (\n          <span className=\"block whitespace-normal text-[11px] leading-4 text-muted-foreground\">\n            {hint}\n          </span>\n        )}\n      </span>\n      {hint && !stacked && (\n        <span className=\"shrink-0 text-[11px] text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n      <Icon\n        icon={UiCheck}\n        className={cn(\n          \"size-3.5 shrink-0 text-primary\",\n          !selected && \"invisible\",\n        )}\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAUO,MAAM,wBACX;AACK,MAAM,oBACX;AAOK,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAUG;AACD,QAAM,UAAU,WAAW,wBAAwB;AACnD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACC,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC3B,eAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA,YAAY,UACR,iDACA;AAAA,QACJ;AAAA,MAAA;AAAA,MAEF,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UAEV,UAAA,oBAAC,uBAAA,EAAsB,aACpB,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,cAAc;AAChB,GAGG;AACD,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,CAAC,eACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,MAAA,oBAAC,UAAK,WAAW,GAAG,kBAAkB,YAAY,eAAe,GAC9D,UAAA,MACH;AAAA,MACC,QAAQ,WACP,oBAAC,QAAA,EAAK,WAAU,uEACb,UAAA,KAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,QAAQ,CAAC,+BACP,QAAA,EAAK,WAAU,8CACb,UAAA,MACH;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW;AAAA,UACT;AAAA,UACA,CAAC,YAAY;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"RuntimeBarSegment.js","sources":["../../../src/data/runtime/RuntimeBarSegment.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { UiCheck, UiChevronDown } from \"../../icons\";\nimport { cn } from \"../../lib/utils\";\nimport {\n  DropdownMenu,\n  type DropdownMenuItem,\n} from \"../../overlay/DropdownMenu\";\nimport { Icon } from \"../Icon\";\n\nexport const SEGMENT_CAPTION_CLASS =\n  \"truncate text-xs font-semibold text-foreground\";\nexport const SEGMENT_KEY_CLASS =\n  \"text-[11px] font-semibold uppercase leading-none tracking-wide text-muted-foreground\";\n\n// One trigger in the segmented runtime bar: a dropdown whose button carries the\n// segment's current value. `min-w-0` on the root lets a segment shrink past its\n// content — without it the flex item's automatic minimum size is its max-content\n// width, so a row of segments overflows a narrow container instead of ellipsing\n// its captions.\nexport function RuntimeSegment({\n  items,\n  menuLabel,\n  title,\n  header,\n  disabled = false,\n  hideChevron = false,\n  className,\n  children,\n}: {\n  items: DropdownMenuItem[];\n  menuLabel: string;\n  title: string;\n  header?: ReactNode;\n  disabled?: boolean;\n  /** Drops the trailing chevron, for a segment whose caption is a bare glyph. */\n  hideChevron?: boolean;\n  className?: string | undefined;\n  children: ReactNode;\n}) {\n  return (\n    <DropdownMenu\n      align=\"left\"\n      menuLabel={menuLabel}\n      items={items}\n      {...(header ? { header } : {})}\n      menuClassName=\"max-h-[70vh] min-w-56 max-w-80 overflow-y-auto\"\n      className={cn(\n        \"h-control-h min-w-0 border-l border-border first:border-l-0 [&>span]:min-w-0 [&>span]:w-full\",\n        className,\n      )}\n      trigger={\n        <button\n          type=\"button\"\n          disabled={disabled}\n          title={title}\n          className=\"inline-flex h-full w-full min-w-0 items-center gap-1.5 px-density-2 transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring [[aria-expanded=true]_&]:bg-muted\"\n        >\n          <RuntimeSegmentCaption hideChevron={hideChevron}>\n            {children}\n          </RuntimeSegmentCaption>\n        </button>\n      }\n    />\n  );\n}\n\nexport function RuntimeSegmentCaption({\n  children,\n  hideChevron = false,\n}: {\n  children: ReactNode;\n  hideChevron?: boolean;\n}) {\n  return (\n    <>\n      {children}\n      {!hideChevron && (\n        <Icon\n          icon={UiChevronDown}\n          className=\"size-3 shrink-0 text-muted-foreground/70\"\n        />\n      )}\n    </>\n  );\n}\n\nexport function SegmentItemLabel({\n  text,\n  hint,\n  selected,\n  stacked = false,\n}: {\n  text: string;\n  hint?: string | undefined;\n  selected: boolean;\n  stacked?: boolean | undefined;\n}) {\n  return (\n    <>\n      <span className=\"min-w-0 flex-1\">\n        <span className={cn(\"block truncate\", selected && \"font-semibold\")}>\n          {text}\n        </span>\n        {hint && stacked && (\n          <span className=\"block whitespace-normal text-[11px] leading-4 text-muted-foreground\">\n            {hint}\n          </span>\n        )}\n      </span>\n      {hint && !stacked && (\n        <span className=\"shrink-0 text-[11px] text-muted-foreground\">\n          {hint}\n        </span>\n      )}\n      <Icon\n        icon={UiCheck}\n        className={cn(\n          \"size-3.5 shrink-0 text-primary\",\n          !selected && \"invisible\",\n        )}\n      />\n    </>\n  );\n}\n"],"names":[],"mappings":";;;;;;AASO,MAAM,wBACX;AACK,MAAM,oBACX;AAOK,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AACF,GAUG;AACD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAM;AAAA,MACN;AAAA,MACA;AAAA,MACC,GAAI,SAAS,EAAE,OAAA,IAAW,CAAA;AAAA,MAC3B,eAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,SACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA,WAAU;AAAA,UAEV,UAAA,oBAAC,uBAAA,EAAsB,aACpB,SAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAIR;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,cAAc;AAChB,GAGG;AACD,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA;AAAA,IACA,CAAC,eACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GAEJ;AAEJ;AAEO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,GAKG;AACD,SACE,qBAAA,UAAA,EACE,UAAA;AAAA,IAAA,qBAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,MAAA,oBAAC,UAAK,WAAW,GAAG,kBAAkB,YAAY,eAAe,GAC9D,UAAA,MACH;AAAA,MACC,QAAQ,WACP,oBAAC,QAAA,EAAK,WAAU,uEACb,UAAA,KAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IACC,QAAQ,CAAC,+BACP,QAAA,EAAK,WAAU,8CACb,UAAA,MACH;AAAA,IAEF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM;AAAA,QACN,WAAW;AAAA,UACT;AAAA,UACA,CAAC,YAAY;AAAA,QAAA;AAAA,MACf;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/data/runtime/use-runtime-bar-overflow.cjs

@@ -5,13 +5,12 @@ function runtimeBarInlineCount({
   width,
   identity,
   trigger,
-  fields,
-  gap
+  fields
 }) {
-  let occupied = identity + trigger + gap;
+  let occupied = identity + trigger;
   let count = 0;
   for (const field of fields) {
-    occupied += field + gap;
+    occupied += field;
     if (occupied > width) break;
     count++;
   }
@@ -31,16 +30,11 @@ function useRuntimeBarOverflow() {
       throw new Error(
         "Runtime bar measurement requires identity and a menu trigger"
       );
-    const spacing = getComputedStyle(measurement).columnGap;
-    const gap = spacing === "normal" || spacing === "" ? 0 : Number.parseFloat(spacing);
-    if (!Number.isFinite(gap))
-      throw new Error(`Invalid runtime bar spacing: ${spacing}`);
     const count = runtimeBarInlineCount({
       width: width - 2,
       identity: identity.getBoundingClientRect().width,
       trigger: trigger.getBoundingClientRect().width,
-      fields: controls.map((node) => node.getBoundingClientRect().width),
-      gap
+      fields: controls.map((node) => node.getBoundingClientRect().width)
     });
     setVisibleCount((previous) => previous === count ? previous : count);
   }, [container, measurement]);

package/dist/data/runtime/use-runtime-bar-overflow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-runtime-bar-overflow.cjs","sources":["../../../src/data/runtime/use-runtime-bar-overflow.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from \"react\";\n\nexport function runtimeBarInlineCount({\n  width,\n  identity,\n  trigger,\n  fields,\n  gap,\n}: {\n  width: number;\n  identity: number;\n  trigger: number;\n  fields: number[];\n  gap: number;\n}) {\n  let occupied = identity + trigger + gap;\n  let count = 0;\n  for (const field of fields) {\n    occupied += field + gap;\n    if (occupied > width) break;\n    count++;\n  }\n  return count;\n}\n\nexport function useRuntimeBarOverflow() {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const [measurement, setMeasurement] = useState<HTMLDivElement | null>(null);\n  const [visibleCount, setVisibleCount] = useState(Infinity);\n\n  const measure = useCallback(() => {\n    if (!container || !measurement) return;\n    const width = container.getBoundingClientRect().width;\n    if (width <= 0) return;\n    const [identity, ...controls] = [...measurement.children];\n    const trigger = controls.pop();\n    if (!identity || !trigger)\n      throw new Error(\n        \"Runtime bar measurement requires identity and a menu trigger\",\n      );\n    const spacing = getComputedStyle(measurement).columnGap;\n    const gap =\n      spacing === \"normal\" || spacing === \"\" ? 0 : Number.parseFloat(spacing);\n    if (!Number.isFinite(gap))\n      throw new Error(`Invalid runtime bar spacing: ${spacing}`);\n    const count = runtimeBarInlineCount({\n      width: width - 2,\n      identity: identity.getBoundingClientRect().width,\n      trigger: trigger.getBoundingClientRect().width,\n      fields: controls.map((node) => node.getBoundingClientRect().width),\n      gap,\n    });\n    setVisibleCount((previous) => (previous === count ? previous : count));\n  }, [container, measurement]);\n\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    if (!container || !measurement) return;\n    measure();\n    const observer =\n      typeof ResizeObserver === \"undefined\"\n        ? undefined\n        : new ResizeObserver(measure);\n    observer?.observe(container);\n    observer?.observe(measurement);\n    window.addEventListener(\"resize\", measure);\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, [container, measurement, measure]);\n\n  return {\n    containerRef: setContainer,\n    measurementRef: setMeasurement,\n    visibleCount,\n  };\n}\n"],"names":["useState","useCallback","useLayoutEffect"],"mappings":";;;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,MAAI,WAAW,WAAW,UAAU;AACpC,MAAI,QAAQ;AACZ,aAAW,SAAS,QAAQ;AAC1B,gBAAY,QAAQ;AACpB,QAAI,WAAW,MAAO;AACtB;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,wBAAwB;AACtC,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAgC,IAAI;AACtE,QAAM,CAAC,aAAa,cAAc,IAAIA,MAAAA,SAAgC,IAAI;AAC1E,QAAM,CAAC,cAAc,eAAe,IAAIA,MAAAA,SAAS,QAAQ;AAEzD,QAAM,UAAUC,MAAAA,YAAY,MAAM;AAChC,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,UAAM,QAAQ,UAAU,sBAAA,EAAwB;AAChD,QAAI,SAAS,EAAG;AAChB,UAAM,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,GAAG,YAAY,QAAQ;AACxD,UAAM,UAAU,SAAS,IAAA;AACzB,QAAI,CAAC,YAAY,CAAC;AAChB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAEJ,UAAM,UAAU,iBAAiB,WAAW,EAAE;AAC9C,UAAM,MACJ,YAAY,YAAY,YAAY,KAAK,IAAI,OAAO,WAAW,OAAO;AACxE,QAAI,CAAC,OAAO,SAAS,GAAG;AACtB,YAAM,IAAI,MAAM,gCAAgC,OAAO,EAAE;AAC3D,UAAM,QAAQ,sBAAsB;AAAA,MAClC,OAAO,QAAQ;AAAA,MACf,UAAU,SAAS,sBAAA,EAAwB;AAAA,MAC3C,SAAS,QAAQ,sBAAA,EAAwB;AAAA,MACzC,QAAQ,SAAS,IAAI,CAAC,SAAS,KAAK,sBAAA,EAAwB,KAAK;AAAA,MACjE;AAAA,IAAA,CACD;AACD,oBAAgB,CAAC,aAAc,aAAa,QAAQ,WAAW,KAAM;AAAA,EACvE,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3BC,QAAAA,gBAAgB,MAAM;AACpB,YAAA;AAAA,EACF,CAAC;AAEDA,QAAAA,gBAAgB,MAAM;AACpB,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,YAAA;AACA,UAAM,WACJ,OAAO,mBAAmB,cACtB,SACA,IAAI,eAAe,OAAO;AAChC,yCAAU,QAAQ;AAClB,yCAAU,QAAQ;AAClB,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM;AACX,2CAAU;AACV,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,OAAO,CAAC;AAEpC,SAAO;AAAA,IACL,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB;AAAA,EAAA;AAEJ;;;"}
+{"version":3,"file":"use-runtime-bar-overflow.cjs","sources":["../../../src/data/runtime/use-runtime-bar-overflow.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from \"react\";\n\nexport function runtimeBarInlineCount({\n  width,\n  identity,\n  trigger,\n  fields,\n}: {\n  width: number;\n  identity: number;\n  trigger: number;\n  fields: number[];\n}) {\n  let occupied = identity + trigger;\n  let count = 0;\n  for (const field of fields) {\n    occupied += field;\n    if (occupied > width) break;\n    count++;\n  }\n  return count;\n}\n\nexport function useRuntimeBarOverflow() {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const [measurement, setMeasurement] = useState<HTMLDivElement | null>(null);\n  const [visibleCount, setVisibleCount] = useState(Infinity);\n\n  const measure = useCallback(() => {\n    if (!container || !measurement) return;\n    const width = container.getBoundingClientRect().width;\n    if (width <= 0) return;\n    const [identity, ...controls] = [...measurement.children];\n    const trigger = controls.pop();\n    if (!identity || !trigger)\n      throw new Error(\n        \"Runtime bar measurement requires identity and a menu trigger\",\n      );\n    const count = runtimeBarInlineCount({\n      width: width - 2,\n      identity: identity.getBoundingClientRect().width,\n      trigger: trigger.getBoundingClientRect().width,\n      fields: controls.map((node) => node.getBoundingClientRect().width),\n    });\n    setVisibleCount((previous) => (previous === count ? previous : count));\n  }, [container, measurement]);\n\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    if (!container || !measurement) return;\n    measure();\n    const observer =\n      typeof ResizeObserver === \"undefined\"\n        ? undefined\n        : new ResizeObserver(measure);\n    observer?.observe(container);\n    observer?.observe(measurement);\n    window.addEventListener(\"resize\", measure);\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, [container, measurement, measure]);\n\n  return {\n    containerRef: setContainer,\n    measurementRef: setMeasurement,\n    visibleCount,\n  };\n}\n"],"names":["useState","useCallback","useLayoutEffect"],"mappings":";;;AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,WAAW,WAAW;AAC1B,MAAI,QAAQ;AACZ,aAAW,SAAS,QAAQ;AAC1B,gBAAY;AACZ,QAAI,WAAW,MAAO;AACtB;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,wBAAwB;AACtC,QAAM,CAAC,WAAW,YAAY,IAAIA,MAAAA,SAAgC,IAAI;AACtE,QAAM,CAAC,aAAa,cAAc,IAAIA,MAAAA,SAAgC,IAAI;AAC1E,QAAM,CAAC,cAAc,eAAe,IAAIA,MAAAA,SAAS,QAAQ;AAEzD,QAAM,UAAUC,MAAAA,YAAY,MAAM;AAChC,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,UAAM,QAAQ,UAAU,sBAAA,EAAwB;AAChD,QAAI,SAAS,EAAG;AAChB,UAAM,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,GAAG,YAAY,QAAQ;AACxD,UAAM,UAAU,SAAS,IAAA;AACzB,QAAI,CAAC,YAAY,CAAC;AAChB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAEJ,UAAM,QAAQ,sBAAsB;AAAA,MAClC,OAAO,QAAQ;AAAA,MACf,UAAU,SAAS,sBAAA,EAAwB;AAAA,MAC3C,SAAS,QAAQ,sBAAA,EAAwB;AAAA,MACzC,QAAQ,SAAS,IAAI,CAAC,SAAS,KAAK,sBAAA,EAAwB,KAAK;AAAA,IAAA,CAClE;AACD,oBAAgB,CAAC,aAAc,aAAa,QAAQ,WAAW,KAAM;AAAA,EACvE,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3BC,QAAAA,gBAAgB,MAAM;AACpB,YAAA;AAAA,EACF,CAAC;AAEDA,QAAAA,gBAAgB,MAAM;AACpB,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,YAAA;AACA,UAAM,WACJ,OAAO,mBAAmB,cACtB,SACA,IAAI,eAAe,OAAO;AAChC,yCAAU,QAAQ;AAClB,yCAAU,QAAQ;AAClB,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM;AACX,2CAAU;AACV,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,OAAO,CAAC;AAEpC,SAAO;AAAA,IACL,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB;AAAA,EAAA;AAEJ;;;"}

package/dist/data/runtime/use-runtime-bar-overflow.d.ts

@@ -1,9 +1,8 @@
-export declare function runtimeBarInlineCount({ width, identity, trigger, fields, gap, }: {
+export declare function runtimeBarInlineCount({ width, identity, trigger, fields, }: {
     width: number;
     identity: number;
     trigger: number;
     fields: number[];
-    gap: number;
 }): number;
 export declare function useRuntimeBarOverflow(): {
     containerRef: import('react').Dispatch<import('react').SetStateAction<HTMLDivElement | null>>;

package/dist/data/runtime/use-runtime-bar-overflow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-runtime-bar-overflow.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/use-runtime-bar-overflow.ts"],"names":[],"mappings":"AAEA,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,GAAG,GACJ,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;CACb,UASA;AAED,wBAAgB,qBAAqB;;;;EAuDpC"}
+{"version":3,"file":"use-runtime-bar-overflow.d.ts","sourceRoot":"","sources":["../../../src/data/runtime/use-runtime-bar-overflow.ts"],"names":[],"mappings":"AAEA,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,GACP,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,UASA;AAED,wBAAgB,qBAAqB;;;;EAiDpC"}

package/dist/data/runtime/use-runtime-bar-overflow.js

@@ -3,13 +3,12 @@ function runtimeBarInlineCount({
   width,
   identity,
   trigger,
-  fields,
-  gap
+  fields
 }) {
-  let occupied = identity + trigger + gap;
+  let occupied = identity + trigger;
   let count = 0;
   for (const field of fields) {
-    occupied += field + gap;
+    occupied += field;
     if (occupied > width) break;
     count++;
   }
@@ -29,16 +28,11 @@ function useRuntimeBarOverflow() {
       throw new Error(
         "Runtime bar measurement requires identity and a menu trigger"
       );
-    const spacing = getComputedStyle(measurement).columnGap;
-    const gap = spacing === "normal" || spacing === "" ? 0 : Number.parseFloat(spacing);
-    if (!Number.isFinite(gap))
-      throw new Error(`Invalid runtime bar spacing: ${spacing}`);
     const count = runtimeBarInlineCount({
       width: width - 2,
       identity: identity.getBoundingClientRect().width,
       trigger: trigger.getBoundingClientRect().width,
-      fields: controls.map((node) => node.getBoundingClientRect().width),
-      gap
+      fields: controls.map((node) => node.getBoundingClientRect().width)
     });
     setVisibleCount((previous) => previous === count ? previous : count);
   }, [container, measurement]);

package/dist/data/runtime/use-runtime-bar-overflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-runtime-bar-overflow.js","sources":["../../../src/data/runtime/use-runtime-bar-overflow.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from \"react\";\n\nexport function runtimeBarInlineCount({\n  width,\n  identity,\n  trigger,\n  fields,\n  gap,\n}: {\n  width: number;\n  identity: number;\n  trigger: number;\n  fields: number[];\n  gap: number;\n}) {\n  let occupied = identity + trigger + gap;\n  let count = 0;\n  for (const field of fields) {\n    occupied += field + gap;\n    if (occupied > width) break;\n    count++;\n  }\n  return count;\n}\n\nexport function useRuntimeBarOverflow() {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const [measurement, setMeasurement] = useState<HTMLDivElement | null>(null);\n  const [visibleCount, setVisibleCount] = useState(Infinity);\n\n  const measure = useCallback(() => {\n    if (!container || !measurement) return;\n    const width = container.getBoundingClientRect().width;\n    if (width <= 0) return;\n    const [identity, ...controls] = [...measurement.children];\n    const trigger = controls.pop();\n    if (!identity || !trigger)\n      throw new Error(\n        \"Runtime bar measurement requires identity and a menu trigger\",\n      );\n    const spacing = getComputedStyle(measurement).columnGap;\n    const gap =\n      spacing === \"normal\" || spacing === \"\" ? 0 : Number.parseFloat(spacing);\n    if (!Number.isFinite(gap))\n      throw new Error(`Invalid runtime bar spacing: ${spacing}`);\n    const count = runtimeBarInlineCount({\n      width: width - 2,\n      identity: identity.getBoundingClientRect().width,\n      trigger: trigger.getBoundingClientRect().width,\n      fields: controls.map((node) => node.getBoundingClientRect().width),\n      gap,\n    });\n    setVisibleCount((previous) => (previous === count ? previous : count));\n  }, [container, measurement]);\n\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    if (!container || !measurement) return;\n    measure();\n    const observer =\n      typeof ResizeObserver === \"undefined\"\n        ? undefined\n        : new ResizeObserver(measure);\n    observer?.observe(container);\n    observer?.observe(measurement);\n    window.addEventListener(\"resize\", measure);\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, [container, measurement, measure]);\n\n  return {\n    containerRef: setContainer,\n    measurementRef: setMeasurement,\n    visibleCount,\n  };\n}\n"],"names":[],"mappings":";AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAMG;AACD,MAAI,WAAW,WAAW,UAAU;AACpC,MAAI,QAAQ;AACZ,aAAW,SAAS,QAAQ;AAC1B,gBAAY,QAAQ;AACpB,QAAI,WAAW,MAAO;AACtB;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,wBAAwB;AACtC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AACtE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAgC,IAAI;AAC1E,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,QAAQ;AAEzD,QAAM,UAAU,YAAY,MAAM;AAChC,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,UAAM,QAAQ,UAAU,sBAAA,EAAwB;AAChD,QAAI,SAAS,EAAG;AAChB,UAAM,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,GAAG,YAAY,QAAQ;AACxD,UAAM,UAAU,SAAS,IAAA;AACzB,QAAI,CAAC,YAAY,CAAC;AAChB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAEJ,UAAM,UAAU,iBAAiB,WAAW,EAAE;AAC9C,UAAM,MACJ,YAAY,YAAY,YAAY,KAAK,IAAI,OAAO,WAAW,OAAO;AACxE,QAAI,CAAC,OAAO,SAAS,GAAG;AACtB,YAAM,IAAI,MAAM,gCAAgC,OAAO,EAAE;AAC3D,UAAM,QAAQ,sBAAsB;AAAA,MAClC,OAAO,QAAQ;AAAA,MACf,UAAU,SAAS,sBAAA,EAAwB;AAAA,MAC3C,SAAS,QAAQ,sBAAA,EAAwB;AAAA,MACzC,QAAQ,SAAS,IAAI,CAAC,SAAS,KAAK,sBAAA,EAAwB,KAAK;AAAA,MACjE;AAAA,IAAA,CACD;AACD,oBAAgB,CAAC,aAAc,aAAa,QAAQ,WAAW,KAAM;AAAA,EACvE,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3B,kBAAgB,MAAM;AACpB,YAAA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,YAAA;AACA,UAAM,WACJ,OAAO,mBAAmB,cACtB,SACA,IAAI,eAAe,OAAO;AAChC,yCAAU,QAAQ;AAClB,yCAAU,QAAQ;AAClB,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM;AACX,2CAAU;AACV,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,OAAO,CAAC;AAEpC,SAAO;AAAA,IACL,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"use-runtime-bar-overflow.js","sources":["../../../src/data/runtime/use-runtime-bar-overflow.ts"],"sourcesContent":["import { useCallback, useLayoutEffect, useState } from \"react\";\n\nexport function runtimeBarInlineCount({\n  width,\n  identity,\n  trigger,\n  fields,\n}: {\n  width: number;\n  identity: number;\n  trigger: number;\n  fields: number[];\n}) {\n  let occupied = identity + trigger;\n  let count = 0;\n  for (const field of fields) {\n    occupied += field;\n    if (occupied > width) break;\n    count++;\n  }\n  return count;\n}\n\nexport function useRuntimeBarOverflow() {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const [measurement, setMeasurement] = useState<HTMLDivElement | null>(null);\n  const [visibleCount, setVisibleCount] = useState(Infinity);\n\n  const measure = useCallback(() => {\n    if (!container || !measurement) return;\n    const width = container.getBoundingClientRect().width;\n    if (width <= 0) return;\n    const [identity, ...controls] = [...measurement.children];\n    const trigger = controls.pop();\n    if (!identity || !trigger)\n      throw new Error(\n        \"Runtime bar measurement requires identity and a menu trigger\",\n      );\n    const count = runtimeBarInlineCount({\n      width: width - 2,\n      identity: identity.getBoundingClientRect().width,\n      trigger: trigger.getBoundingClientRect().width,\n      fields: controls.map((node) => node.getBoundingClientRect().width),\n    });\n    setVisibleCount((previous) => (previous === count ? previous : count));\n  }, [container, measurement]);\n\n  useLayoutEffect(() => {\n    measure();\n  });\n\n  useLayoutEffect(() => {\n    if (!container || !measurement) return;\n    measure();\n    const observer =\n      typeof ResizeObserver === \"undefined\"\n        ? undefined\n        : new ResizeObserver(measure);\n    observer?.observe(container);\n    observer?.observe(measurement);\n    window.addEventListener(\"resize\", measure);\n    return () => {\n      observer?.disconnect();\n      window.removeEventListener(\"resize\", measure);\n    };\n  }, [container, measurement, measure]);\n\n  return {\n    containerRef: setContainer,\n    measurementRef: setMeasurement,\n    visibleCount,\n  };\n}\n"],"names":[],"mappings":";AAEO,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,MAAI,WAAW,WAAW;AAC1B,MAAI,QAAQ;AACZ,aAAW,SAAS,QAAQ;AAC1B,gBAAY;AACZ,QAAI,WAAW,MAAO;AACtB;AAAA,EACF;AACA,SAAO;AACT;AAEO,SAAS,wBAAwB;AACtC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAgC,IAAI;AACtE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAgC,IAAI;AAC1E,QAAM,CAAC,cAAc,eAAe,IAAI,SAAS,QAAQ;AAEzD,QAAM,UAAU,YAAY,MAAM;AAChC,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,UAAM,QAAQ,UAAU,sBAAA,EAAwB;AAChD,QAAI,SAAS,EAAG;AAChB,UAAM,CAAC,UAAU,GAAG,QAAQ,IAAI,CAAC,GAAG,YAAY,QAAQ;AACxD,UAAM,UAAU,SAAS,IAAA;AACzB,QAAI,CAAC,YAAY,CAAC;AAChB,YAAM,IAAI;AAAA,QACR;AAAA,MAAA;AAEJ,UAAM,QAAQ,sBAAsB;AAAA,MAClC,OAAO,QAAQ;AAAA,MACf,UAAU,SAAS,sBAAA,EAAwB;AAAA,MAC3C,SAAS,QAAQ,sBAAA,EAAwB;AAAA,MACzC,QAAQ,SAAS,IAAI,CAAC,SAAS,KAAK,sBAAA,EAAwB,KAAK;AAAA,IAAA,CAClE;AACD,oBAAgB,CAAC,aAAc,aAAa,QAAQ,WAAW,KAAM;AAAA,EACvE,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3B,kBAAgB,MAAM;AACpB,YAAA;AAAA,EACF,CAAC;AAED,kBAAgB,MAAM;AACpB,QAAI,CAAC,aAAa,CAAC,YAAa;AAChC,YAAA;AACA,UAAM,WACJ,OAAO,mBAAmB,cACtB,SACA,IAAI,eAAe,OAAO;AAChC,yCAAU,QAAQ;AAClB,yCAAU,QAAQ;AAClB,WAAO,iBAAiB,UAAU,OAAO;AACzC,WAAO,MAAM;AACX,2CAAU;AACV,aAAO,oBAAoB,UAAU,OAAO;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,OAAO,CAAC;AAEpC,SAAO;AAAA,IACL,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB;AAAA,EAAA;AAEJ;"}

package/dist/data/test-runner/TestRunner.fixtures.d.ts

@@ -4,26 +4,6 @@ import { Test } from './types.js';
 export declare const completedTests: Test[];
 /** Same forest, but as an in-flight run: some running, some queued. */
 export declare const runningTests: Test[];
-/**
- * A suite whose leaves carry very large payloads: a 6×4 deep object, a
- * 500-row array, and an 800-line log — to stress JsonView, LogViewer, and the
- * detail pane's independent scrolling.
- */
-export declare const largeDetailTests: Test[];
-/**
- * A large forest (4 roots × depth 3 × breadth 4 = 340 nodes / 256 leaves) whose
- * every leaf carries the LargePayloads-sized detail (deep object + 500-row array
- * + 800-line log). Used for the dialog stress test: a long scrolling tree on the
- * left and very large detail payloads on the right.
- *
- * Depth is 3, not 4: at depth 4 (~1024 leaves) the jsdom unit test auto-expands
- * the failing branches and renders the whole tree, which OOM'd CI's
- * memory-constrained shared vitest worker (a STACK_TRACE_ERROR on the "very
- * large tree" test) once this package's suite grew. 340 nodes still scrolls and
- * stresses the detail panes while staying within the worker's budget; the
- * browser story renders the same fixture without the jsdom memory ceiling.
- */
-export declare const largeTreeTests: Test[];
 /**
  * Demo adapter proving the registry extension point: nodes named "setup" get a
  * custom detail body, an extra "Context" tab, and a node action — the seam that

package/dist/data/test-runner/TestRunner.fixtures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TestRunner.fixtures.d.ts","sourceRoot":"","sources":["../../../src/data/test-runner/TestRunner.fixtures.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAIpC,mFAAmF;AACnF,eAAO,MAAM,cAAc,EAAE,IAAI,EAmFhC,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,IAAI,EA+B9B,CAAC;AAsCF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,IAAI,EA0BlC,CAAC;AA0DF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,IAAI,EAEhC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,eA0C1B,CAAC"}
+{"version":3,"file":"TestRunner.fixtures.d.ts","sourceRoot":"","sources":["../../../src/data/test-runner/TestRunner.fixtures.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AACjD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAIpC,mFAAmF;AACnF,eAAO,MAAM,cAAc,EAAE,IAAI,EAmFhC,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,YAAY,EAAE,IAAI,EA+B9B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,eA0C1B,CAAC"}

package/dist/data/test-runner/TestRunner.large-fixtures.d.ts

@@ -0,0 +1,22 @@
+import { Test } from './types.js';
+/**
+ * A suite whose leaves carry very large payloads: a 6×4 deep object, a
+ * 500-row array, and an 800-line log — to stress JsonView, LogViewer, and the
+ * detail pane's independent scrolling.
+ */
+export declare const largeDetailTests: Test[];
+/**
+ * A large forest (4 roots × depth 3 × breadth 4 = 340 nodes / 256 leaves) whose
+ * every leaf carries the LargePayloads-sized detail (deep object + 500-row array
+ * + 800-line log). Used for the dialog stress test: a long scrolling tree on the
+ * left and very large detail payloads on the right.
+ *
+ * Depth is 3, not 4: at depth 4 (~1024 leaves) the jsdom unit test auto-expands
+ * the failing branches and renders the whole tree, which OOM'd CI's
+ * memory-constrained shared vitest worker (a STACK_TRACE_ERROR on the "very
+ * large tree" test) once this package's suite grew. 340 nodes still scrolls and
+ * stresses the detail panes while staying within the worker's budget; the
+ * browser story renders the same fixture without the jsdom memory ceiling.
+ */
+export declare const largeTreeTests: Test[];
+//# sourceMappingURL=TestRunner.large-fixtures.d.ts.map

package/dist/data/test-runner/TestRunner.large-fixtures.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TestRunner.large-fixtures.d.ts","sourceRoot":"","sources":["../../../src/data/test-runner/TestRunner.large-fixtures.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AA4CpC;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,IAAI,EA6BlC,CAAC;AAgEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc,EAAE,IAAI,EAEhC,CAAC"}

package/dist/data/use-group-windows.cjs

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const graphGroupWindow = require("./graph-group-window.cjs");
+const DOM_DELTA_LINE = 1;
+const DOM_DELTA_PAGE = 2;
+function useGroupWindows({ boxes, positions, reveal, stageRef, scale }) {
+  const [starts, setStarts] = react.useState(() => graphGroupWindow.revealMember(boxes, {}, reveal));
+  const [revealed, setRevealed] = react.useState(reveal);
+  if (reveal !== revealed) {
+    setRevealed(reveal);
+    setStarts((current) => graphGroupWindow.revealMember(boxes, current, reveal));
+  }
+  const live = react.useRef({ boxes, scale });
+  live.current = { boxes, scale };
+  const scroll = react.useCallback((boxId, rows) => {
+    var _a;
+    const memberWindow = (_a = live.current.boxes.find((box) => box.id === boxId)) == null ? void 0 : _a.window;
+    if (!memberWindow) throw new Error(`GraphDiagram: group box "${boxId}" has no member window to scroll`);
+    setStarts((current) => {
+      const next = graphGroupWindow.clampWindowStart(memberWindow, (current[boxId] ?? 0) + rows);
+      return next === graphGroupWindow.clampWindowStart(memberWindow, current[boxId] ?? 0) ? current : { ...current, [boxId]: next };
+    });
+  }, []);
+  react.useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    let carry = { boxId: "", px: 0 };
+    const onWheel = (event) => {
+      var _a, _b;
+      if (event.ctrlKey || event.metaKey || !(event.target instanceof Element)) return;
+      const boxId = (_a = event.target.closest("[data-graph-window]")) == null ? void 0 : _a.getAttribute("data-graph-window");
+      const memberWindow = (_b = live.current.boxes.find((box) => box.id === boxId)) == null ? void 0 : _b.window;
+      if (!boxId || !memberWindow) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const rowPx = memberWindow.height / memberWindow.rows * live.current.scale;
+      const unit = event.deltaMode === DOM_DELTA_LINE ? rowPx : event.deltaMode === DOM_DELTA_PAGE ? rowPx * memberWindow.rows : 1;
+      const moved = graphGroupWindow.wheelRows(carry.boxId === boxId ? carry.px : 0, event.deltaY * unit, rowPx);
+      carry = { boxId, px: moved.carry };
+      if (moved.rows !== 0) scroll(boxId, moved.rows);
+    };
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    return () => stage.removeEventListener("wheel", onWheel);
+  }, [stageRef, scroll]);
+  const windowed = react.useMemo(() => graphGroupWindow.windowedPositions(positions, boxes, starts), [positions, boxes, starts]);
+  return { ...windowed, starts, scroll };
+}
+exports.useGroupWindows = useGroupWindows;
+//# sourceMappingURL=use-group-windows.cjs.map

package/dist/data/use-group-windows.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-group-windows.cjs","sources":["../../src/data/use-group-windows.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from \"react\";\nimport type { GraphLayoutGroupBox } from \"./graph-columns-layout\";\nimport { clampWindowStart, revealMember, wheelRows, windowedPositions, type WindowedPositions, type WindowStarts } from \"./graph-group-window\";\nimport type { GraphLayoutPosition } from \"./graph-layout\";\n\nconst DOM_DELTA_LINE = 1;\nconst DOM_DELTA_PAGE = 2;\n\nexport interface GroupWindows extends WindowedPositions {\n  starts: WindowStarts;\n  /** Scrolls a windowed box by `rows`, kept within its members. */\n  scroll: (boxId: string, rows: number) => void;\n}\n\ninterface UseGroupWindowsOptions {\n  boxes: readonly GraphLayoutGroupBox[];\n  positions: Record<string, GraphLayoutPosition>;\n  /** The member kept in view: scrolled to whenever it changes. */\n  reveal: string | undefined;\n  /** The stage the boxes and nodes are drawn on: a wheel over a windowed group there scrolls it. */\n  stageRef: RefObject<HTMLElement | null>;\n  /** The stage's zoom, so a row of wheel travel is a row on screen. */\n  scale: number;\n}\n\n/**\n * Each windowed group's scroll position, and the positions it draws members at. A plain wheel over a\n * windowed group, or over one of its members, scrolls the group and goes no further, so it never zooms\n * the diagram; ctrl/meta + wheel still does.\n */\nexport function useGroupWindows({ boxes, positions, reveal, stageRef, scale }: UseGroupWindowsOptions): GroupWindows {\n  const [starts, setStarts] = useState<WindowStarts>(() => revealMember(boxes, {}, reveal));\n  const [revealed, setRevealed] = useState(reveal);\n  if (reveal !== revealed) {\n    setRevealed(reveal);\n    setStarts((current) => revealMember(boxes, current, reveal));\n  }\n  const live = useRef({ boxes, scale });\n  live.current = { boxes, scale };\n\n  const scroll = useCallback((boxId: string, rows: number) => {\n    const memberWindow = live.current.boxes.find((box) => box.id === boxId)?.window;\n    if (!memberWindow) throw new Error(`GraphDiagram: group box \"${boxId}\" has no member window to scroll`);\n    setStarts((current) => {\n      const next = clampWindowStart(memberWindow, (current[boxId] ?? 0) + rows);\n      return next === clampWindowStart(memberWindow, current[boxId] ?? 0) ? current : { ...current, [boxId]: next };\n    });\n  }, []);\n\n  useEffect(() => {\n    const stage = stageRef.current;\n    if (!stage) return;\n    let carry = { boxId: \"\", px: 0 };\n    const onWheel = (event: WheelEvent) => {\n      if (event.ctrlKey || event.metaKey || !(event.target instanceof Element)) return;\n      const boxId = event.target.closest(\"[data-graph-window]\")?.getAttribute(\"data-graph-window\");\n      const memberWindow = live.current.boxes.find((box) => box.id === boxId)?.window;\n      if (!boxId || !memberWindow) return;\n      event.preventDefault();\n      event.stopPropagation();\n      const rowPx = (memberWindow.height / memberWindow.rows) * live.current.scale;\n      const unit = event.deltaMode === DOM_DELTA_LINE ? rowPx : event.deltaMode === DOM_DELTA_PAGE ? rowPx * memberWindow.rows : 1;\n      const moved = wheelRows(carry.boxId === boxId ? carry.px : 0, event.deltaY * unit, rowPx);\n      carry = { boxId, px: moved.carry };\n      if (moved.rows !== 0) scroll(boxId, moved.rows);\n    };\n    // React registers wheel listeners as passive, which cannot keep the wheel from zooming the viewport.\n    stage.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => stage.removeEventListener(\"wheel\", onWheel);\n  }, [stageRef, scroll]);\n\n  const windowed = useMemo(() => windowedPositions(positions, boxes, starts), [positions, boxes, starts]);\n  return { ...windowed, starts, scroll };\n}\n"],"names":["useState","revealMember","useRef","useCallback","clampWindowStart","useEffect","wheelRows","useMemo","windowedPositions"],"mappings":";;;;AAKA,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AAwBhB,SAAS,gBAAgB,EAAE,OAAO,WAAW,QAAQ,UAAU,SAA+C;AACnH,QAAM,CAAC,QAAQ,SAAS,IAAIA,MAAAA,SAAuB,MAAMC,iBAAAA,aAAa,OAAO,IAAI,MAAM,CAAC;AACxF,QAAM,CAAC,UAAU,WAAW,IAAID,MAAAA,SAAS,MAAM;AAC/C,MAAI,WAAW,UAAU;AACvB,gBAAY,MAAM;AAClB,cAAU,CAAC,YAAYC,iBAAAA,aAAa,OAAO,SAAS,MAAM,CAAC;AAAA,EAC7D;AACA,QAAM,OAAOC,MAAAA,OAAO,EAAE,OAAO,OAAO;AACpC,OAAK,UAAU,EAAE,OAAO,MAAA;AAExB,QAAM,SAASC,MAAAA,YAAY,CAAC,OAAe,SAAiB;;AAC1D,UAAM,gBAAe,UAAK,QAAQ,MAAM,KAAK,CAAC,QAAQ,IAAI,OAAO,KAAK,MAAjD,mBAAoD;AACzE,QAAI,CAAC,aAAc,OAAM,IAAI,MAAM,4BAA4B,KAAK,kCAAkC;AACtG,cAAU,CAAC,YAAY;AACrB,YAAM,OAAOC,iBAAAA,iBAAiB,eAAe,QAAQ,KAAK,KAAK,KAAK,IAAI;AACxE,aAAO,SAASA,iBAAAA,iBAAiB,cAAc,QAAQ,KAAK,KAAK,CAAC,IAAI,UAAU,EAAE,GAAG,SAAS,CAAC,KAAK,GAAG,KAAA;AAAA,IACzG,CAAC;AAAA,EACH,GAAG,CAAA,CAAE;AAELC,QAAAA,UAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AACZ,QAAI,QAAQ,EAAE,OAAO,IAAI,IAAI,EAAA;AAC7B,UAAM,UAAU,CAAC,UAAsB;;AACrC,UAAI,MAAM,WAAW,MAAM,WAAW,EAAE,MAAM,kBAAkB,SAAU;AAC1E,YAAM,SAAQ,WAAM,OAAO,QAAQ,qBAAqB,MAA1C,mBAA6C,aAAa;AACxE,YAAM,gBAAe,UAAK,QAAQ,MAAM,KAAK,CAAC,QAAQ,IAAI,OAAO,KAAK,MAAjD,mBAAoD;AACzE,UAAI,CAAC,SAAS,CAAC,aAAc;AAC7B,YAAM,eAAA;AACN,YAAM,gBAAA;AACN,YAAM,QAAS,aAAa,SAAS,aAAa,OAAQ,KAAK,QAAQ;AACvE,YAAM,OAAO,MAAM,cAAc,iBAAiB,QAAQ,MAAM,cAAc,iBAAiB,QAAQ,aAAa,OAAO;AAC3H,YAAM,QAAQC,iBAAAA,UAAU,MAAM,UAAU,QAAQ,MAAM,KAAK,GAAG,MAAM,SAAS,MAAM,KAAK;AACxF,cAAQ,EAAE,OAAO,IAAI,MAAM,MAAA;AAC3B,UAAI,MAAM,SAAS,EAAG,QAAO,OAAO,MAAM,IAAI;AAAA,IAChD;AAEA,UAAM,iBAAiB,SAAS,SAAS,EAAE,SAAS,OAAO;AAC3D,WAAO,MAAM,MAAM,oBAAoB,SAAS,OAAO;AAAA,EACzD,GAAG,CAAC,UAAU,MAAM,CAAC;AAErB,QAAM,WAAWC,MAAAA,QAAQ,MAAMC,iBAAAA,kBAAkB,WAAW,OAAO,MAAM,GAAG,CAAC,WAAW,OAAO,MAAM,CAAC;AACtG,SAAO,EAAE,GAAG,UAAU,QAAQ,OAAA;AAChC;;"}

package/dist/data/use-group-windows.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+import { GraphLayoutGroupBox } from './graph-columns-layout.js';
+import { WindowedPositions, WindowStarts } from './graph-group-window.js';
+import { GraphLayoutPosition } from './graph-layout.js';
+export interface GroupWindows extends WindowedPositions {
+    starts: WindowStarts;
+    /** Scrolls a windowed box by `rows`, kept within its members. */
+    scroll: (boxId: string, rows: number) => void;
+}
+interface UseGroupWindowsOptions {
+    boxes: readonly GraphLayoutGroupBox[];
+    positions: Record<string, GraphLayoutPosition>;
+    /** The member kept in view: scrolled to whenever it changes. */
+    reveal: string | undefined;
+    /** The stage the boxes and nodes are drawn on: a wheel over a windowed group there scrolls it. */
+    stageRef: RefObject<HTMLElement | null>;
+    /** The stage's zoom, so a row of wheel travel is a row on screen. */
+    scale: number;
+}
+/**
+ * Each windowed group's scroll position, and the positions it draws members at. A plain wheel over a
+ * windowed group, or over one of its members, scrolls the group and goes no further, so it never zooms
+ * the diagram; ctrl/meta + wheel still does.
+ */
+export declare function useGroupWindows({ boxes, positions, reveal, stageRef, scale }: UseGroupWindowsOptions): GroupWindows;
+export {};
+//# sourceMappingURL=use-group-windows.d.ts.map

package/dist/data/use-group-windows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-group-windows.d.ts","sourceRoot":"","sources":["../../src/data/use-group-windows.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC1F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAgE,KAAK,iBAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAC/I,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAK1D,MAAM,WAAW,YAAa,SAAQ,iBAAiB;IACrD,MAAM,EAAE,YAAY,CAAC;IACrB,iEAAiE;IACjE,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,SAAS,mBAAmB,EAAE,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC;IAC/C,gEAAgE;IAChE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,kGAAkG;IAClG,QAAQ,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACxC,qEAAqE;IACrE,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,sBAAsB,GAAG,YAAY,CA2CnH"}

package/dist/data/use-group-windows.js

@@ -0,0 +1,50 @@
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { revealMember, clampWindowStart, windowedPositions, wheelRows } from "./graph-group-window.js";
+const DOM_DELTA_LINE = 1;
+const DOM_DELTA_PAGE = 2;
+function useGroupWindows({ boxes, positions, reveal, stageRef, scale }) {
+  const [starts, setStarts] = useState(() => revealMember(boxes, {}, reveal));
+  const [revealed, setRevealed] = useState(reveal);
+  if (reveal !== revealed) {
+    setRevealed(reveal);
+    setStarts((current) => revealMember(boxes, current, reveal));
+  }
+  const live = useRef({ boxes, scale });
+  live.current = { boxes, scale };
+  const scroll = useCallback((boxId, rows) => {
+    var _a;
+    const memberWindow = (_a = live.current.boxes.find((box) => box.id === boxId)) == null ? void 0 : _a.window;
+    if (!memberWindow) throw new Error(`GraphDiagram: group box "${boxId}" has no member window to scroll`);
+    setStarts((current) => {
+      const next = clampWindowStart(memberWindow, (current[boxId] ?? 0) + rows);
+      return next === clampWindowStart(memberWindow, current[boxId] ?? 0) ? current : { ...current, [boxId]: next };
+    });
+  }, []);
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    let carry = { boxId: "", px: 0 };
+    const onWheel = (event) => {
+      var _a, _b;
+      if (event.ctrlKey || event.metaKey || !(event.target instanceof Element)) return;
+      const boxId = (_a = event.target.closest("[data-graph-window]")) == null ? void 0 : _a.getAttribute("data-graph-window");
+      const memberWindow = (_b = live.current.boxes.find((box) => box.id === boxId)) == null ? void 0 : _b.window;
+      if (!boxId || !memberWindow) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const rowPx = memberWindow.height / memberWindow.rows * live.current.scale;
+      const unit = event.deltaMode === DOM_DELTA_LINE ? rowPx : event.deltaMode === DOM_DELTA_PAGE ? rowPx * memberWindow.rows : 1;
+      const moved = wheelRows(carry.boxId === boxId ? carry.px : 0, event.deltaY * unit, rowPx);
+      carry = { boxId, px: moved.carry };
+      if (moved.rows !== 0) scroll(boxId, moved.rows);
+    };
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    return () => stage.removeEventListener("wheel", onWheel);
+  }, [stageRef, scroll]);
+  const windowed = useMemo(() => windowedPositions(positions, boxes, starts), [positions, boxes, starts]);
+  return { ...windowed, starts, scroll };
+}
+export {
+  useGroupWindows
+};
+//# sourceMappingURL=use-group-windows.js.map

package/dist/data/use-group-windows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-group-windows.js","sources":["../../src/data/use-group-windows.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState, type RefObject } from \"react\";\nimport type { GraphLayoutGroupBox } from \"./graph-columns-layout\";\nimport { clampWindowStart, revealMember, wheelRows, windowedPositions, type WindowedPositions, type WindowStarts } from \"./graph-group-window\";\nimport type { GraphLayoutPosition } from \"./graph-layout\";\n\nconst DOM_DELTA_LINE = 1;\nconst DOM_DELTA_PAGE = 2;\n\nexport interface GroupWindows extends WindowedPositions {\n  starts: WindowStarts;\n  /** Scrolls a windowed box by `rows`, kept within its members. */\n  scroll: (boxId: string, rows: number) => void;\n}\n\ninterface UseGroupWindowsOptions {\n  boxes: readonly GraphLayoutGroupBox[];\n  positions: Record<string, GraphLayoutPosition>;\n  /** The member kept in view: scrolled to whenever it changes. */\n  reveal: string | undefined;\n  /** The stage the boxes and nodes are drawn on: a wheel over a windowed group there scrolls it. */\n  stageRef: RefObject<HTMLElement | null>;\n  /** The stage's zoom, so a row of wheel travel is a row on screen. */\n  scale: number;\n}\n\n/**\n * Each windowed group's scroll position, and the positions it draws members at. A plain wheel over a\n * windowed group, or over one of its members, scrolls the group and goes no further, so it never zooms\n * the diagram; ctrl/meta + wheel still does.\n */\nexport function useGroupWindows({ boxes, positions, reveal, stageRef, scale }: UseGroupWindowsOptions): GroupWindows {\n  const [starts, setStarts] = useState<WindowStarts>(() => revealMember(boxes, {}, reveal));\n  const [revealed, setRevealed] = useState(reveal);\n  if (reveal !== revealed) {\n    setRevealed(reveal);\n    setStarts((current) => revealMember(boxes, current, reveal));\n  }\n  const live = useRef({ boxes, scale });\n  live.current = { boxes, scale };\n\n  const scroll = useCallback((boxId: string, rows: number) => {\n    const memberWindow = live.current.boxes.find((box) => box.id === boxId)?.window;\n    if (!memberWindow) throw new Error(`GraphDiagram: group box \"${boxId}\" has no member window to scroll`);\n    setStarts((current) => {\n      const next = clampWindowStart(memberWindow, (current[boxId] ?? 0) + rows);\n      return next === clampWindowStart(memberWindow, current[boxId] ?? 0) ? current : { ...current, [boxId]: next };\n    });\n  }, []);\n\n  useEffect(() => {\n    const stage = stageRef.current;\n    if (!stage) return;\n    let carry = { boxId: \"\", px: 0 };\n    const onWheel = (event: WheelEvent) => {\n      if (event.ctrlKey || event.metaKey || !(event.target instanceof Element)) return;\n      const boxId = event.target.closest(\"[data-graph-window]\")?.getAttribute(\"data-graph-window\");\n      const memberWindow = live.current.boxes.find((box) => box.id === boxId)?.window;\n      if (!boxId || !memberWindow) return;\n      event.preventDefault();\n      event.stopPropagation();\n      const rowPx = (memberWindow.height / memberWindow.rows) * live.current.scale;\n      const unit = event.deltaMode === DOM_DELTA_LINE ? rowPx : event.deltaMode === DOM_DELTA_PAGE ? rowPx * memberWindow.rows : 1;\n      const moved = wheelRows(carry.boxId === boxId ? carry.px : 0, event.deltaY * unit, rowPx);\n      carry = { boxId, px: moved.carry };\n      if (moved.rows !== 0) scroll(boxId, moved.rows);\n    };\n    // React registers wheel listeners as passive, which cannot keep the wheel from zooming the viewport.\n    stage.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => stage.removeEventListener(\"wheel\", onWheel);\n  }, [stageRef, scroll]);\n\n  const windowed = useMemo(() => windowedPositions(positions, boxes, starts), [positions, boxes, starts]);\n  return { ...windowed, starts, scroll };\n}\n"],"names":[],"mappings":";;AAKA,MAAM,iBAAiB;AACvB,MAAM,iBAAiB;AAwBhB,SAAS,gBAAgB,EAAE,OAAO,WAAW,QAAQ,UAAU,SAA+C;AACnH,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAuB,MAAM,aAAa,OAAO,IAAI,MAAM,CAAC;AACxF,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,MAAM;AAC/C,MAAI,WAAW,UAAU;AACvB,gBAAY,MAAM;AAClB,cAAU,CAAC,YAAY,aAAa,OAAO,SAAS,MAAM,CAAC;AAAA,EAC7D;AACA,QAAM,OAAO,OAAO,EAAE,OAAO,OAAO;AACpC,OAAK,UAAU,EAAE,OAAO,MAAA;AAExB,QAAM,SAAS,YAAY,CAAC,OAAe,SAAiB;;AAC1D,UAAM,gBAAe,UAAK,QAAQ,MAAM,KAAK,CAAC,QAAQ,IAAI,OAAO,KAAK,MAAjD,mBAAoD;AACzE,QAAI,CAAC,aAAc,OAAM,IAAI,MAAM,4BAA4B,KAAK,kCAAkC;AACtG,cAAU,CAAC,YAAY;AACrB,YAAM,OAAO,iBAAiB,eAAe,QAAQ,KAAK,KAAK,KAAK,IAAI;AACxE,aAAO,SAAS,iBAAiB,cAAc,QAAQ,KAAK,KAAK,CAAC,IAAI,UAAU,EAAE,GAAG,SAAS,CAAC,KAAK,GAAG,KAAA;AAAA,IACzG,CAAC;AAAA,EACH,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACd,UAAM,QAAQ,SAAS;AACvB,QAAI,CAAC,MAAO;AACZ,QAAI,QAAQ,EAAE,OAAO,IAAI,IAAI,EAAA;AAC7B,UAAM,UAAU,CAAC,UAAsB;;AACrC,UAAI,MAAM,WAAW,MAAM,WAAW,EAAE,MAAM,kBAAkB,SAAU;AAC1E,YAAM,SAAQ,WAAM,OAAO,QAAQ,qBAAqB,MAA1C,mBAA6C,aAAa;AACxE,YAAM,gBAAe,UAAK,QAAQ,MAAM,KAAK,CAAC,QAAQ,IAAI,OAAO,KAAK,MAAjD,mBAAoD;AACzE,UAAI,CAAC,SAAS,CAAC,aAAc;AAC7B,YAAM,eAAA;AACN,YAAM,gBAAA;AACN,YAAM,QAAS,aAAa,SAAS,aAAa,OAAQ,KAAK,QAAQ;AACvE,YAAM,OAAO,MAAM,cAAc,iBAAiB,QAAQ,MAAM,cAAc,iBAAiB,QAAQ,aAAa,OAAO;AAC3H,YAAM,QAAQ,UAAU,MAAM,UAAU,QAAQ,MAAM,KAAK,GAAG,MAAM,SAAS,MAAM,KAAK;AACxF,cAAQ,EAAE,OAAO,IAAI,MAAM,MAAA;AAC3B,UAAI,MAAM,SAAS,EAAG,QAAO,OAAO,MAAM,IAAI;AAAA,IAChD;AAEA,UAAM,iBAAiB,SAAS,SAAS,EAAE,SAAS,OAAO;AAC3D,WAAO,MAAM,MAAM,oBAAoB,SAAS,OAAO;AAAA,EACzD,GAAG,CAAC,UAAU,MAAM,CAAC;AAErB,QAAM,WAAW,QAAQ,MAAM,kBAAkB,WAAW,OAAO,MAAM,GAAG,CAAC,WAAW,OAAO,MAAM,CAAC;AACtG,SAAO,EAAE,GAAG,UAAU,QAAQ,OAAA;AAChC;"}

package/dist/data/use-pan-zoom.cjs

@@ -3,7 +3,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("react");
 const DEFAULT_LIMITS = { minScale: 0.2, maxScale: 4 };
 const BUTTON_ZOOM_FACTOR = 1.25;
-const WHEEL_ZOOM_RATE = 0.01;
+const PINCH_ZOOM_RATE = 0.01;
+const WHEEL_NOTCH_PX = 100;
+const WHEEL_ZOOM_RATE = Math.log(BUTTON_ZOOM_FACTOR) / WHEEL_NOTCH_PX;
+const LINE_PX = 16;
+const DOM_DELTA_LINE = 1;
+const DOM_DELTA_PAGE = 2;
 const OVERFLOW_MARGIN = 8;
 const DRAG_THRESHOLD = 4;
 function zoomAround(transform, point, factor, limits = DEFAULT_LIMITS) {
@@ -53,22 +58,29 @@ function useViewportResize(viewportRef, enabled, refit) {
     return () => observer.disconnect();
   }, [viewportRef, enabled, refit]);
 }
-function useWheelZoom(viewportRef, enabled, zoomAt) {
+function wheelZoomFactor(event, mode, viewportHeight) {
+  const modified = event.ctrlKey || event.metaKey;
+  if (!modified && mode === "modifier") return void 0;
+  const unit = event.deltaMode === DOM_DELTA_LINE ? LINE_PX : event.deltaMode === DOM_DELTA_PAGE ? viewportHeight : 1;
+  const pixels = -event.deltaY * unit;
+  if (modified) return Math.exp(pixels * PINCH_ZOOM_RATE);
+  const step = Math.log(BUTTON_ZOOM_FACTOR);
+  return Math.exp(Math.min(step, Math.max(-step, pixels * WHEEL_ZOOM_RATE)));
+}
+function useWheelZoom(viewportRef, enabled, mode, zoomAt) {
   react.useEffect(() => {
     const viewport = viewportRef.current;
     if (!enabled || !viewport) return;
     const onWheel = (event) => {
-      if (!event.ctrlKey && !event.metaKey) return;
+      const factor = wheelZoomFactor(event, mode, viewport.clientHeight);
+      if (factor === void 0) return;
       event.preventDefault();
       const rect = viewport.getBoundingClientRect();
-      zoomAt(
-        { x: event.clientX - rect.left, y: event.clientY - rect.top },
-        Math.exp(-event.deltaY * WHEEL_ZOOM_RATE)
-      );
+      zoomAt({ x: event.clientX - rect.left, y: event.clientY - rect.top }, factor);
     };
     viewport.addEventListener("wheel", onWheel, { passive: false });
     return () => viewport.removeEventListener("wheel", onWheel);
-  }, [viewportRef, enabled, zoomAt]);
+  }, [viewportRef, enabled, mode, zoomAt]);
 }
 function useDragPan(panBy) {
   const [panning, setPanning] = react.useState(false);
@@ -104,7 +116,7 @@ function useDragPan(panBy) {
     }
   };
 }
-function usePanZoom({ enabled, contentWidth, contentHeight, opening }) {
+function usePanZoom({ enabled, contentWidth, contentHeight, opening, wheel = "modifier" }) {
   const viewportRef = react.useRef(null);
   const contentRef = react.useRef(null);
   const [transform, setTransform] = react.useState({ x: 0, y: 0, scale: 1 });
@@ -136,7 +148,7 @@ function usePanZoom({ enabled, contentWidth, contentHeight, opening }) {
     setTransform((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));
   });
   useViewportResize(viewportRef, enabled, refit);
-  useWheelZoom(viewportRef, enabled, zoomAt);
+  useWheelZoom(viewportRef, enabled, wheel, zoomAt);
   const hold = (fit) => () => {
     fitted.current = fit;
     refit();
@@ -155,5 +167,6 @@ function usePanZoom({ enabled, contentWidth, contentHeight, opening }) {
 }
 exports.fitTransform = fitTransform;
 exports.usePanZoom = usePanZoom;
+exports.wheelZoomFactor = wheelZoomFactor;
 exports.zoomAround = zoomAround;
 //# sourceMappingURL=use-pan-zoom.cjs.map