@flanksource/clicky-ui 0.3.43 → 0.3.45

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-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

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

@@ -1 +1 @@
-{"version":3,"file":"use-pan-zoom.cjs","sources":["../../src/data/use-pan-zoom.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type PointerEvent as ReactPointerEvent,\n  type RefObject,\n} from \"react\";\n\nexport interface PanZoomTransform {\n  /** Translation of the content's top-left corner inside the viewport, in px. */\n  x: number;\n  y: number;\n  scale: number;\n}\n\nexport interface PanZoomSize {\n  width: number;\n  height: number;\n}\n\nexport interface PanZoomLimits {\n  minScale: number;\n  maxScale: number;\n}\n\nconst DEFAULT_LIMITS: PanZoomLimits = { minScale: 0.2, maxScale: 4 };\nconst BUTTON_ZOOM_FACTOR = 1.25;\nconst WHEEL_ZOOM_RATE = 0.01;\n/** Air kept between overflowing content and the viewport edge when fitting, in content px. */\nconst OVERFLOW_MARGIN = 8;\n/** Pointer travel in px before a press becomes a pan rather than a click. */\nconst DRAG_THRESHOLD = 4;\n\n/** Scales by `factor`, clamped to `limits`, keeping the content under `point` (viewport px) where it is. */\nexport function zoomAround(\n  transform: PanZoomTransform,\n  point: { x: number; y: number },\n  factor: number,\n  limits: PanZoomLimits = DEFAULT_LIMITS,\n): PanZoomTransform {\n  const scale = Math.min(limits.maxScale, Math.max(limits.minScale, transform.scale * factor));\n  const ratio = scale / transform.scale;\n  return {\n    x: point.x - (point.x - transform.x) * ratio,\n    y: point.y - (point.y - transform.y) * ratio,\n    scale,\n  };\n}\n\nexport interface FitOptions {\n  /** The smallest scale the fit shrinks to. Content too large for it overflows the viewport. */\n  minScale?: number;\n  /** The content point an overflowing axis is centred on. Defaults to the content's centre. */\n  focus?: { x: number; y: number };\n}\n\n/** Offset of one axis: centred when the content fits, else centred on `focus` without showing past either edge. */\nfunction fitOffset(viewport: number, content: number, focus: number, scale: number): number {\n  const slack = viewport - content * scale;\n  return slack >= 0 ? slack / 2 : Math.min(0, Math.max(slack, viewport / 2 - focus * scale));\n}\n\n/**\n * The transform that shows all of `content` centred in `viewport`. Content is\n * only ever shrunk to fit, never enlarged past its natural size. With\n * `fit.minScale` it is not shrunk past that either: it then overflows, centred\n * on `fit.focus`, and the rest is reached by panning. An unmeasured\n * (zero-sized) viewport yields the identity transform.\n */\nexport function fitTransform(\n  content: PanZoomSize,\n  viewport: PanZoomSize,\n  limits: PanZoomLimits = DEFAULT_LIMITS,\n  fit: FitOptions = {},\n): PanZoomTransform {\n  if (viewport.width <= 0 || viewport.height <= 0 || content.width <= 0 || content.height <= 0) {\n    return { x: 0, y: 0, scale: 1 };\n  }\n  const whole = Math.min(1, viewport.width / content.width, viewport.height / content.height);\n  const scale = Math.max(limits.minScale, Math.min(1, fit.minScale ?? 0), whole);\n  const focus = fit.focus ?? { x: content.width / 2, y: content.height / 2 };\n  return {\n    x: fitOffset(viewport.width, content.width, focus.x, scale),\n    y: fitOffset(viewport.height, content.height, focus.y, scale),\n    scale,\n  };\n}\n\nexport interface UsePanZoomOptions {\n  /** When false the hook is inert: no listeners, identity transform. */\n  enabled: boolean;\n  /** Natural (unscaled) size of the content being panned and zoomed. */\n  contentWidth: number;\n  contentHeight: number;\n  /** How the content opens, and what `reset()` returns to. `fit()` ignores it and shows everything. */\n  opening?: FitOptions;\n}\n\nexport interface PanZoomViewportHandlers {\n  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerCancel: (event: ReactPointerEvent<HTMLDivElement>) => void;\n}\n\nexport interface PanZoom {\n  /** Attach to the clipping viewport element. */\n  viewportRef: RefObject<HTMLDivElement | null>;\n  /** Attach to the content element, so anything overflowing its box is fitted too. */\n  contentRef: RefObject<HTMLDivElement | null>;\n  /** Spread onto the viewport element; empty when disabled. */\n  handlers: Partial<PanZoomViewportHandlers>;\n  /** Apply to the content as `translate(x, y) scale(scale)` with a top-left transform origin. */\n  transform: PanZoomTransform;\n  panning: boolean;\n  zoomIn: () => void;\n  zoomOut: () => void;\n  /** Shows everything, however small. */\n  fit: () => void;\n  /** Returns to how the content opened: see `UsePanZoomOptions.opening`. */\n  reset: () => void;\n}\n\ntype ViewportRef = RefObject<HTMLDivElement | null>;\n\nfunction viewportSize(element: HTMLElement): PanZoomSize {\n  return { width: element.clientWidth, height: element.clientHeight };\n}\n\n/**\n * The content's size, counting children that overflow its box to the right or\n * below (a label hanging off its edge): they extend its scroll size, which a\n * transform leaves untouched.\n */\nfunction overflowedSize(element: HTMLElement | null, natural: PanZoomSize): PanZoomSize {\n  const overflowed = (size: number, scrolled: number | undefined) =>\n    scrolled !== undefined && scrolled > size ? scrolled + OVERFLOW_MARGIN : size;\n  return {\n    width: overflowed(natural.width, element?.scrollWidth),\n    height: overflowed(natural.height, element?.scrollHeight),\n  };\n}\n\n/** Runs `refit` now and whenever the viewport is resized. */\nfunction useViewportResize(viewportRef: ViewportRef, enabled: boolean, refit: () => void): void {\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!enabled || !viewport) return;\n    refit();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(refit);\n    observer.observe(viewport);\n    return () => observer.disconnect();\n  }, [viewportRef, enabled, refit]);\n}\n\nfunction useWheelZoom(\n  viewportRef: ViewportRef,\n  enabled: boolean,\n  zoomAt: (point: { x: number; y: number }, factor: number) => void,\n): void {\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!enabled || !viewport) return;\n    const onWheel = (event: WheelEvent) => {\n      if (!event.ctrlKey && !event.metaKey) return;\n      event.preventDefault();\n      const rect = viewport.getBoundingClientRect();\n      zoomAt(\n        { x: event.clientX - rect.left, y: event.clientY - rect.top },\n        Math.exp(-event.deltaY * WHEEL_ZOOM_RATE),\n      );\n    };\n    // React registers wheel listeners as passive, which cannot preventDefault the page zoom.\n    viewport.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => viewport.removeEventListener(\"wheel\", onWheel);\n  }, [viewportRef, enabled, zoomAt]);\n}\n\nfunction useDragPan(panBy: (dx: number, dy: number) => void): {\n  panning: boolean;\n  handlers: PanZoomViewportHandlers;\n} {\n  const [panning, setPanning] = useState(false);\n  const drag = useRef<{ pointerId: number; x: number; y: number; moved: boolean } | null>(null);\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!drag.current || drag.current.pointerId !== event.pointerId) return;\n    drag.current = null;\n    setPanning(false);\n  };\n  return {\n    panning,\n    handlers: {\n      onPointerDown: (event) => {\n        if (event.button !== 0) return;\n        drag.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, moved: false };\n      },\n      onPointerMove: (event) => {\n        const active = drag.current;\n        if (!active || active.pointerId !== event.pointerId) return;\n        const dx = event.clientX - active.x;\n        const dy = event.clientY - active.y;\n        if (!active.moved) {\n          if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;\n          // Capturing only once a drag is under way leaves plain clicks on nodes and edges alone,\n          // and retargets the click that ends a drag to the viewport so it selects nothing.\n          event.currentTarget.setPointerCapture?.(event.pointerId);\n          setPanning(true);\n        }\n        drag.current = { pointerId: active.pointerId, x: event.clientX, y: event.clientY, moved: true };\n        panBy(dx, dy);\n      },\n      onPointerUp: endDrag,\n      onPointerCancel: endDrag,\n    },\n  };\n}\n\n/**\n * Pan and zoom for a fixed-size content box inside a clipping viewport:\n * ctrl/meta + wheel (which is also what a trackpad pinch sends) zooms around\n * the pointer, dragging pans, and `zoomIn`/`zoomOut`/`fit` back a control\n * cluster. The content stays fitted to the viewport — across content and\n * viewport size changes — until the user pans or zooms, and again after\n * `fit()` or `reset()`.\n */\nexport function usePanZoom({ enabled, contentWidth, contentHeight, opening }: UsePanZoomOptions): PanZoom {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [transform, setTransform] = useState<PanZoomTransform>({ x: 0, y: 0, scale: 1 });\n  // Which fit the content is held to, until the user pans or zooms.\n  const fitted = useRef<\"opening\" | \"everything\" | undefined>(\"opening\");\n  const { minScale, focus } = opening ?? {};\n  const [focusX, focusY] = [focus?.x, focus?.y];\n\n  const refit = useCallback(() => {\n    const viewport = viewportRef.current;\n    if (!viewport || !fitted.current) return;\n    const content = overflowedSize(contentRef.current, { width: contentWidth, height: contentHeight });\n    const fit: FitOptions =\n      fitted.current === \"everything\"\n        ? {}\n        : {\n            ...(minScale !== undefined ? { minScale } : {}),\n            ...(focusX !== undefined && focusY !== undefined ? { focus: { x: focusX, y: focusY } } : {}),\n          };\n    setTransform(fitTransform(content, viewportSize(viewport), DEFAULT_LIMITS, fit));\n  }, [contentWidth, contentHeight, minScale, focusX, focusY]);\n  const zoomAt = useCallback((point: { x: number; y: number }, factor: number) => {\n    fitted.current = undefined;\n    setTransform((current) => zoomAround(current, point, factor));\n  }, []);\n  const zoomAtCentre = (factor: number) => {\n    const viewport = viewportRef.current;\n    if (!viewport) return;\n    const { width, height } = viewportSize(viewport);\n    zoomAt({ x: width / 2, y: height / 2 }, factor);\n  };\n  const { panning, handlers } = useDragPan((dx, dy) => {\n    fitted.current = undefined;\n    setTransform((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));\n  });\n  useViewportResize(viewportRef, enabled, refit);\n  useWheelZoom(viewportRef, enabled, zoomAt);\n  const hold = (fit: \"opening\" | \"everything\") => () => {\n    fitted.current = fit;\n    refit();\n  };\n\n  return {\n    viewportRef,\n    contentRef,\n    handlers: enabled ? handlers : {},\n    transform,\n    panning,\n    zoomIn: () => zoomAtCentre(BUTTON_ZOOM_FACTOR),\n    zoomOut: () => zoomAtCentre(1 / BUTTON_ZOOM_FACTOR),\n    fit: hold(\"everything\"),\n    reset: hold(\"opening\"),\n  };\n}\n"],"names":["useEffect","useState","useRef","useCallback"],"mappings":"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"}
+{"version":3,"file":"use-pan-zoom.cjs","sources":["../../src/data/use-pan-zoom.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type PointerEvent as ReactPointerEvent,\n  type RefObject,\n} from \"react\";\n\nexport interface PanZoomTransform {\n  /** Translation of the content's top-left corner inside the viewport, in px. */\n  x: number;\n  y: number;\n  scale: number;\n}\n\nexport interface PanZoomSize {\n  width: number;\n  height: number;\n}\n\nexport interface PanZoomLimits {\n  minScale: number;\n  maxScale: number;\n}\n\nconst DEFAULT_LIMITS: PanZoomLimits = { minScale: 0.2, maxScale: 4 };\nconst BUTTON_ZOOM_FACTOR = 1.25;\n/** A pinch sends small ctrl-wheel deltas: this rate keeps it tracking the fingers. */\nconst PINCH_ZOOM_RATE = 0.01;\n/** A mouse wheel notch is about 100px of delta; this rate makes one notch a button step. */\nconst WHEEL_NOTCH_PX = 100;\nconst WHEEL_ZOOM_RATE = Math.log(BUTTON_ZOOM_FACTOR) / WHEEL_NOTCH_PX;\nconst LINE_PX = 16;\nconst DOM_DELTA_LINE = 1;\nconst DOM_DELTA_PAGE = 2;\n/** Air kept between overflowing content and the viewport edge when fitting, in content px. */\nconst OVERFLOW_MARGIN = 8;\n/** Pointer travel in px before a press becomes a pan rather than a click. */\nconst DRAG_THRESHOLD = 4;\n\n/** Scales by `factor`, clamped to `limits`, keeping the content under `point` (viewport px) where it is. */\nexport function zoomAround(\n  transform: PanZoomTransform,\n  point: { x: number; y: number },\n  factor: number,\n  limits: PanZoomLimits = DEFAULT_LIMITS,\n): PanZoomTransform {\n  const scale = Math.min(limits.maxScale, Math.max(limits.minScale, transform.scale * factor));\n  const ratio = scale / transform.scale;\n  return {\n    x: point.x - (point.x - transform.x) * ratio,\n    y: point.y - (point.y - transform.y) * ratio,\n    scale,\n  };\n}\n\nexport interface FitOptions {\n  /** The smallest scale the fit shrinks to. Content too large for it overflows the viewport. */\n  minScale?: number;\n  /** The content point an overflowing axis is centred on. Defaults to the content's centre. */\n  focus?: { x: number; y: number };\n}\n\n/** Offset of one axis: centred when the content fits, else centred on `focus` without showing past either edge. */\nfunction fitOffset(viewport: number, content: number, focus: number, scale: number): number {\n  const slack = viewport - content * scale;\n  return slack >= 0 ? slack / 2 : Math.min(0, Math.max(slack, viewport / 2 - focus * scale));\n}\n\n/**\n * The transform that shows all of `content` centred in `viewport`. Content is\n * only ever shrunk to fit, never enlarged past its natural size. With\n * `fit.minScale` it is not shrunk past that either: it then overflows, centred\n * on `fit.focus`, and the rest is reached by panning. An unmeasured\n * (zero-sized) viewport yields the identity transform.\n */\nexport function fitTransform(\n  content: PanZoomSize,\n  viewport: PanZoomSize,\n  limits: PanZoomLimits = DEFAULT_LIMITS,\n  fit: FitOptions = {},\n): PanZoomTransform {\n  if (viewport.width <= 0 || viewport.height <= 0 || content.width <= 0 || content.height <= 0) {\n    return { x: 0, y: 0, scale: 1 };\n  }\n  const whole = Math.min(1, viewport.width / content.width, viewport.height / content.height);\n  const scale = Math.max(limits.minScale, Math.min(1, fit.minScale ?? 0), whole);\n  const focus = fit.focus ?? { x: content.width / 2, y: content.height / 2 };\n  return {\n    x: fitOffset(viewport.width, content.width, focus.x, scale),\n    y: fitOffset(viewport.height, content.height, focus.y, scale),\n    scale,\n  };\n}\n\nexport interface UsePanZoomOptions {\n  /** When false the hook is inert: no listeners, identity transform. */\n  enabled: boolean;\n  /** Natural (unscaled) size of the content being panned and zoomed. */\n  contentWidth: number;\n  contentHeight: number;\n  /** How the content opens, and what `reset()` returns to. `fit()` ignores it and shows everything. */\n  opening?: FitOptions;\n  /** What a plain wheel does; defaults to \"modifier\". See `WheelMode`. */\n  wheel?: WheelMode;\n}\n\nexport interface PanZoomViewportHandlers {\n  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerCancel: (event: ReactPointerEvent<HTMLDivElement>) => void;\n}\n\nexport interface PanZoom {\n  /** Attach to the clipping viewport element. */\n  viewportRef: RefObject<HTMLDivElement | null>;\n  /** Attach to the content element, so anything overflowing its box is fitted too. */\n  contentRef: RefObject<HTMLDivElement | null>;\n  /** Spread onto the viewport element; empty when disabled. */\n  handlers: Partial<PanZoomViewportHandlers>;\n  /** Apply to the content as `translate(x, y) scale(scale)` with a top-left transform origin. */\n  transform: PanZoomTransform;\n  panning: boolean;\n  zoomIn: () => void;\n  zoomOut: () => void;\n  /** Shows everything, however small. */\n  fit: () => void;\n  /** Returns to how the content opened: see `UsePanZoomOptions.opening`. */\n  reset: () => void;\n}\n\ntype ViewportRef = RefObject<HTMLDivElement | null>;\n\nfunction viewportSize(element: HTMLElement): PanZoomSize {\n  return { width: element.clientWidth, height: element.clientHeight };\n}\n\n/**\n * The content's size, counting children that overflow its box to the right or\n * below (a label hanging off its edge): they extend its scroll size, which a\n * transform leaves untouched.\n */\nfunction overflowedSize(element: HTMLElement | null, natural: PanZoomSize): PanZoomSize {\n  const overflowed = (size: number, scrolled: number | undefined) =>\n    scrolled !== undefined && scrolled > size ? scrolled + OVERFLOW_MARGIN : size;\n  return {\n    width: overflowed(natural.width, element?.scrollWidth),\n    height: overflowed(natural.height, element?.scrollHeight),\n  };\n}\n\n/** Runs `refit` now and whenever the viewport is resized. */\nfunction useViewportResize(viewportRef: ViewportRef, enabled: boolean, refit: () => void): void {\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!enabled || !viewport) return;\n    refit();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(refit);\n    observer.observe(viewport);\n    return () => observer.disconnect();\n  }, [viewportRef, enabled, refit]);\n}\n\n/**\n * What a plain (unmodified) wheel does over the viewport: \"modifier\" leaves it to scroll the page\n * and zooms only on ctrl/meta + wheel or a pinch; \"zoom\" zooms on every wheel.\n */\nexport type WheelMode = \"modifier\" | \"zoom\";\n\ntype WheelInput = Pick<WheelEvent, \"deltaY\" | \"deltaMode\" | \"ctrlKey\" | \"metaKey\">;\n\n/**\n * The scale factor a wheel event zooms by, or undefined when `mode` leaves it to the page. The\n * delta is read in pixels whatever its unit, and a plain wheel notch is capped at one button step.\n */\nexport function wheelZoomFactor(event: WheelInput, mode: WheelMode, viewportHeight: number): number | undefined {\n  const modified = event.ctrlKey || event.metaKey;\n  if (!modified && mode === \"modifier\") return undefined;\n  const unit = event.deltaMode === DOM_DELTA_LINE ? LINE_PX : event.deltaMode === DOM_DELTA_PAGE ? viewportHeight : 1;\n  const pixels = -event.deltaY * unit;\n  if (modified) return Math.exp(pixels * PINCH_ZOOM_RATE);\n  const step = Math.log(BUTTON_ZOOM_FACTOR);\n  return Math.exp(Math.min(step, Math.max(-step, pixels * WHEEL_ZOOM_RATE)));\n}\n\nfunction useWheelZoom(\n  viewportRef: ViewportRef,\n  enabled: boolean,\n  mode: WheelMode,\n  zoomAt: (point: { x: number; y: number }, factor: number) => void,\n): void {\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!enabled || !viewport) return;\n    const onWheel = (event: WheelEvent) => {\n      const factor = wheelZoomFactor(event, mode, viewport.clientHeight);\n      if (factor === undefined) return;\n      event.preventDefault();\n      const rect = viewport.getBoundingClientRect();\n      zoomAt({ x: event.clientX - rect.left, y: event.clientY - rect.top }, factor);\n    };\n    // React registers wheel listeners as passive, which cannot preventDefault the page zoom or scroll.\n    viewport.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => viewport.removeEventListener(\"wheel\", onWheel);\n  }, [viewportRef, enabled, mode, zoomAt]);\n}\n\nfunction useDragPan(panBy: (dx: number, dy: number) => void): {\n  panning: boolean;\n  handlers: PanZoomViewportHandlers;\n} {\n  const [panning, setPanning] = useState(false);\n  const drag = useRef<{ pointerId: number; x: number; y: number; moved: boolean } | null>(null);\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!drag.current || drag.current.pointerId !== event.pointerId) return;\n    drag.current = null;\n    setPanning(false);\n  };\n  return {\n    panning,\n    handlers: {\n      onPointerDown: (event) => {\n        if (event.button !== 0) return;\n        drag.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, moved: false };\n      },\n      onPointerMove: (event) => {\n        const active = drag.current;\n        if (!active || active.pointerId !== event.pointerId) return;\n        const dx = event.clientX - active.x;\n        const dy = event.clientY - active.y;\n        if (!active.moved) {\n          if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;\n          // Capturing only once a drag is under way leaves plain clicks on nodes and edges alone,\n          // and retargets the click that ends a drag to the viewport so it selects nothing.\n          event.currentTarget.setPointerCapture?.(event.pointerId);\n          setPanning(true);\n        }\n        drag.current = { pointerId: active.pointerId, x: event.clientX, y: event.clientY, moved: true };\n        panBy(dx, dy);\n      },\n      onPointerUp: endDrag,\n      onPointerCancel: endDrag,\n    },\n  };\n}\n\n/**\n * Pan and zoom for a fixed-size content box inside a clipping viewport:\n * ctrl/meta + wheel (which is also what a trackpad pinch sends) — or any wheel, with `wheel: \"zoom\"` — zooms around\n * the pointer, dragging pans, and `zoomIn`/`zoomOut`/`fit` back a control\n * cluster. The content stays fitted to the viewport — across content and\n * viewport size changes — until the user pans or zooms, and again after\n * `fit()` or `reset()`.\n */\nexport function usePanZoom({ enabled, contentWidth, contentHeight, opening, wheel = \"modifier\" }: UsePanZoomOptions): PanZoom {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [transform, setTransform] = useState<PanZoomTransform>({ x: 0, y: 0, scale: 1 });\n  // Which fit the content is held to, until the user pans or zooms.\n  const fitted = useRef<\"opening\" | \"everything\" | undefined>(\"opening\");\n  const { minScale, focus } = opening ?? {};\n  const [focusX, focusY] = [focus?.x, focus?.y];\n\n  const refit = useCallback(() => {\n    const viewport = viewportRef.current;\n    if (!viewport || !fitted.current) return;\n    const content = overflowedSize(contentRef.current, { width: contentWidth, height: contentHeight });\n    const fit: FitOptions =\n      fitted.current === \"everything\"\n        ? {}\n        : {\n            ...(minScale !== undefined ? { minScale } : {}),\n            ...(focusX !== undefined && focusY !== undefined ? { focus: { x: focusX, y: focusY } } : {}),\n          };\n    setTransform(fitTransform(content, viewportSize(viewport), DEFAULT_LIMITS, fit));\n  }, [contentWidth, contentHeight, minScale, focusX, focusY]);\n  const zoomAt = useCallback((point: { x: number; y: number }, factor: number) => {\n    fitted.current = undefined;\n    setTransform((current) => zoomAround(current, point, factor));\n  }, []);\n  const zoomAtCentre = (factor: number) => {\n    const viewport = viewportRef.current;\n    if (!viewport) return;\n    const { width, height } = viewportSize(viewport);\n    zoomAt({ x: width / 2, y: height / 2 }, factor);\n  };\n  const { panning, handlers } = useDragPan((dx, dy) => {\n    fitted.current = undefined;\n    setTransform((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));\n  });\n  useViewportResize(viewportRef, enabled, refit);\n  useWheelZoom(viewportRef, enabled, wheel, zoomAt);\n  const hold = (fit: \"opening\" | \"everything\") => () => {\n    fitted.current = fit;\n    refit();\n  };\n\n  return {\n    viewportRef,\n    contentRef,\n    handlers: enabled ? handlers : {},\n    transform,\n    panning,\n    zoomIn: () => zoomAtCentre(BUTTON_ZOOM_FACTOR),\n    zoomOut: () => zoomAtCentre(1 / BUTTON_ZOOM_FACTOR),\n    fit: hold(\"everything\"),\n    reset: hold(\"opening\"),\n  };\n}\n"],"names":["useEffect","useState","useRef","useCallback"],"mappings":"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"}

package/dist/data/use-pan-zoom.d.ts

@@ -43,6 +43,8 @@ export interface UsePanZoomOptions {
     contentHeight: number;
     /** How the content opens, and what `reset()` returns to. `fit()` ignores it and shows everything. */
     opening?: FitOptions;
+    /** What a plain wheel does; defaults to "modifier". See `WheelMode`. */
+    wheel?: WheelMode;
 }
 export interface PanZoomViewportHandlers {
     onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
@@ -67,13 +69,25 @@ export interface PanZoom {
     /** Returns to how the content opened: see `UsePanZoomOptions.opening`. */
     reset: () => void;
 }
+/**
+ * What a plain (unmodified) wheel does over the viewport: "modifier" leaves it to scroll the page
+ * and zooms only on ctrl/meta + wheel or a pinch; "zoom" zooms on every wheel.
+ */
+export type WheelMode = "modifier" | "zoom";
+type WheelInput = Pick<WheelEvent, "deltaY" | "deltaMode" | "ctrlKey" | "metaKey">;
+/**
+ * The scale factor a wheel event zooms by, or undefined when `mode` leaves it to the page. The
+ * delta is read in pixels whatever its unit, and a plain wheel notch is capped at one button step.
+ */
+export declare function wheelZoomFactor(event: WheelInput, mode: WheelMode, viewportHeight: number): number | undefined;
 /**
  * Pan and zoom for a fixed-size content box inside a clipping viewport:
- * ctrl/meta + wheel (which is also what a trackpad pinch sends) zooms around
+ * ctrl/meta + wheel (which is also what a trackpad pinch sends) — or any wheel, with `wheel: "zoom"` — zooms around
  * the pointer, dragging pans, and `zoomIn`/`zoomOut`/`fit` back a control
  * cluster. The content stays fitted to the viewport — across content and
  * viewport size changes — until the user pans or zooms, and again after
  * `fit()` or `reset()`.
  */
-export declare function usePanZoom({ enabled, contentWidth, contentHeight, opening }: UsePanZoomOptions): PanZoom;
+export declare function usePanZoom({ enabled, contentWidth, contentHeight, opening, wheel }: UsePanZoomOptions): PanZoom;
+export {};
 //# sourceMappingURL=use-pan-zoom.d.ts.map

package/dist/data/use-pan-zoom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-pan-zoom.d.ts","sourceRoot":"","sources":["../../src/data/use-pan-zoom.ts"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,YAAY,IAAI,iBAAiB,EACtC,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,MAAM,WAAW,gBAAgB;IAC/B,+EAA+E;IAC/E,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAUD,4GAA4G;AAC5G,wBAAgB,UAAU,CACxB,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,EAC/B,MAAM,EAAE,MAAM,EACd,MAAM,GAAE,aAA8B,GACrC,gBAAgB,CAQlB;AAED,MAAM,WAAW,UAAU;IACzB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,KAAK,CAAC,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAClC;AAQD;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,WAAW,EACrB,MAAM,GAAE,aAA8B,EACtC,GAAG,GAAE,UAAe,GACnB,gBAAgB,CAYlB;AAED,MAAM,WAAW,iBAAiB;IAChC,sEAAsE;IACtE,OAAO,EAAE,OAAO,CAAC;IACjB,sEAAsE;IACtE,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,qGAAqG;IACrG,OAAO,CAAC,EAAE,UAAU,CAAC;CACtB;AAED,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClE,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClE,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CACrE;AAED,MAAM,WAAW,OAAO;IACtB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC9C,oFAAoF;IACpF,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,6DAA6D;IAC7D,QAAQ,EAAE,OAAO,CAAC,uBAAuB,CAAC,CAAC;IAC3C,+FAA+F;IAC/F,SAAS,EAAE,gBAAgB,CAAC;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,uCAAuC;IACvC,GAAG,EAAE,MAAM,IAAI,CAAC;IAChB,0EAA0E;IAC1E,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAiGD;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,EAAE,iBAAiB,GAAG,OAAO,CAsDxG"}
+{"version":3,"file":"use-pan-zoom.d.ts","sourceRoot":"","sources":["../../src/data/use-pan-zoom.ts"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,12 @@
 import { useRef, useState, useCallback, useEffect } from "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) {
@@ -51,22 +56,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) {
   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] = useState(false);
@@ -102,7 +114,7 @@ function useDragPan(panBy) {
     }
   };
 }
-function usePanZoom({ enabled, contentWidth, contentHeight, opening }) {
+function usePanZoom({ enabled, contentWidth, contentHeight, opening, wheel = "modifier" }) {
   const viewportRef = useRef(null);
   const contentRef = useRef(null);
   const [transform, setTransform] = useState({ x: 0, y: 0, scale: 1 });
@@ -134,7 +146,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();
@@ -154,6 +166,7 @@ function usePanZoom({ enabled, contentWidth, contentHeight, opening }) {
 export {
   fitTransform,
   usePanZoom,
+  wheelZoomFactor,
   zoomAround
 };
 //# sourceMappingURL=use-pan-zoom.js.map

package/dist/data/use-pan-zoom.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-pan-zoom.js","sources":["../../src/data/use-pan-zoom.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type PointerEvent as ReactPointerEvent,\n  type RefObject,\n} from \"react\";\n\nexport interface PanZoomTransform {\n  /** Translation of the content's top-left corner inside the viewport, in px. */\n  x: number;\n  y: number;\n  scale: number;\n}\n\nexport interface PanZoomSize {\n  width: number;\n  height: number;\n}\n\nexport interface PanZoomLimits {\n  minScale: number;\n  maxScale: number;\n}\n\nconst DEFAULT_LIMITS: PanZoomLimits = { minScale: 0.2, maxScale: 4 };\nconst BUTTON_ZOOM_FACTOR = 1.25;\nconst WHEEL_ZOOM_RATE = 0.01;\n/** Air kept between overflowing content and the viewport edge when fitting, in content px. */\nconst OVERFLOW_MARGIN = 8;\n/** Pointer travel in px before a press becomes a pan rather than a click. */\nconst DRAG_THRESHOLD = 4;\n\n/** Scales by `factor`, clamped to `limits`, keeping the content under `point` (viewport px) where it is. */\nexport function zoomAround(\n  transform: PanZoomTransform,\n  point: { x: number; y: number },\n  factor: number,\n  limits: PanZoomLimits = DEFAULT_LIMITS,\n): PanZoomTransform {\n  const scale = Math.min(limits.maxScale, Math.max(limits.minScale, transform.scale * factor));\n  const ratio = scale / transform.scale;\n  return {\n    x: point.x - (point.x - transform.x) * ratio,\n    y: point.y - (point.y - transform.y) * ratio,\n    scale,\n  };\n}\n\nexport interface FitOptions {\n  /** The smallest scale the fit shrinks to. Content too large for it overflows the viewport. */\n  minScale?: number;\n  /** The content point an overflowing axis is centred on. Defaults to the content's centre. */\n  focus?: { x: number; y: number };\n}\n\n/** Offset of one axis: centred when the content fits, else centred on `focus` without showing past either edge. */\nfunction fitOffset(viewport: number, content: number, focus: number, scale: number): number {\n  const slack = viewport - content * scale;\n  return slack >= 0 ? slack / 2 : Math.min(0, Math.max(slack, viewport / 2 - focus * scale));\n}\n\n/**\n * The transform that shows all of `content` centred in `viewport`. Content is\n * only ever shrunk to fit, never enlarged past its natural size. With\n * `fit.minScale` it is not shrunk past that either: it then overflows, centred\n * on `fit.focus`, and the rest is reached by panning. An unmeasured\n * (zero-sized) viewport yields the identity transform.\n */\nexport function fitTransform(\n  content: PanZoomSize,\n  viewport: PanZoomSize,\n  limits: PanZoomLimits = DEFAULT_LIMITS,\n  fit: FitOptions = {},\n): PanZoomTransform {\n  if (viewport.width <= 0 || viewport.height <= 0 || content.width <= 0 || content.height <= 0) {\n    return { x: 0, y: 0, scale: 1 };\n  }\n  const whole = Math.min(1, viewport.width / content.width, viewport.height / content.height);\n  const scale = Math.max(limits.minScale, Math.min(1, fit.minScale ?? 0), whole);\n  const focus = fit.focus ?? { x: content.width / 2, y: content.height / 2 };\n  return {\n    x: fitOffset(viewport.width, content.width, focus.x, scale),\n    y: fitOffset(viewport.height, content.height, focus.y, scale),\n    scale,\n  };\n}\n\nexport interface UsePanZoomOptions {\n  /** When false the hook is inert: no listeners, identity transform. */\n  enabled: boolean;\n  /** Natural (unscaled) size of the content being panned and zoomed. */\n  contentWidth: number;\n  contentHeight: number;\n  /** How the content opens, and what `reset()` returns to. `fit()` ignores it and shows everything. */\n  opening?: FitOptions;\n}\n\nexport interface PanZoomViewportHandlers {\n  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerCancel: (event: ReactPointerEvent<HTMLDivElement>) => void;\n}\n\nexport interface PanZoom {\n  /** Attach to the clipping viewport element. */\n  viewportRef: RefObject<HTMLDivElement | null>;\n  /** Attach to the content element, so anything overflowing its box is fitted too. */\n  contentRef: RefObject<HTMLDivElement | null>;\n  /** Spread onto the viewport element; empty when disabled. */\n  handlers: Partial<PanZoomViewportHandlers>;\n  /** Apply to the content as `translate(x, y) scale(scale)` with a top-left transform origin. */\n  transform: PanZoomTransform;\n  panning: boolean;\n  zoomIn: () => void;\n  zoomOut: () => void;\n  /** Shows everything, however small. */\n  fit: () => void;\n  /** Returns to how the content opened: see `UsePanZoomOptions.opening`. */\n  reset: () => void;\n}\n\ntype ViewportRef = RefObject<HTMLDivElement | null>;\n\nfunction viewportSize(element: HTMLElement): PanZoomSize {\n  return { width: element.clientWidth, height: element.clientHeight };\n}\n\n/**\n * The content's size, counting children that overflow its box to the right or\n * below (a label hanging off its edge): they extend its scroll size, which a\n * transform leaves untouched.\n */\nfunction overflowedSize(element: HTMLElement | null, natural: PanZoomSize): PanZoomSize {\n  const overflowed = (size: number, scrolled: number | undefined) =>\n    scrolled !== undefined && scrolled > size ? scrolled + OVERFLOW_MARGIN : size;\n  return {\n    width: overflowed(natural.width, element?.scrollWidth),\n    height: overflowed(natural.height, element?.scrollHeight),\n  };\n}\n\n/** Runs `refit` now and whenever the viewport is resized. */\nfunction useViewportResize(viewportRef: ViewportRef, enabled: boolean, refit: () => void): void {\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!enabled || !viewport) return;\n    refit();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(refit);\n    observer.observe(viewport);\n    return () => observer.disconnect();\n  }, [viewportRef, enabled, refit]);\n}\n\nfunction useWheelZoom(\n  viewportRef: ViewportRef,\n  enabled: boolean,\n  zoomAt: (point: { x: number; y: number }, factor: number) => void,\n): void {\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!enabled || !viewport) return;\n    const onWheel = (event: WheelEvent) => {\n      if (!event.ctrlKey && !event.metaKey) return;\n      event.preventDefault();\n      const rect = viewport.getBoundingClientRect();\n      zoomAt(\n        { x: event.clientX - rect.left, y: event.clientY - rect.top },\n        Math.exp(-event.deltaY * WHEEL_ZOOM_RATE),\n      );\n    };\n    // React registers wheel listeners as passive, which cannot preventDefault the page zoom.\n    viewport.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => viewport.removeEventListener(\"wheel\", onWheel);\n  }, [viewportRef, enabled, zoomAt]);\n}\n\nfunction useDragPan(panBy: (dx: number, dy: number) => void): {\n  panning: boolean;\n  handlers: PanZoomViewportHandlers;\n} {\n  const [panning, setPanning] = useState(false);\n  const drag = useRef<{ pointerId: number; x: number; y: number; moved: boolean } | null>(null);\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!drag.current || drag.current.pointerId !== event.pointerId) return;\n    drag.current = null;\n    setPanning(false);\n  };\n  return {\n    panning,\n    handlers: {\n      onPointerDown: (event) => {\n        if (event.button !== 0) return;\n        drag.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, moved: false };\n      },\n      onPointerMove: (event) => {\n        const active = drag.current;\n        if (!active || active.pointerId !== event.pointerId) return;\n        const dx = event.clientX - active.x;\n        const dy = event.clientY - active.y;\n        if (!active.moved) {\n          if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;\n          // Capturing only once a drag is under way leaves plain clicks on nodes and edges alone,\n          // and retargets the click that ends a drag to the viewport so it selects nothing.\n          event.currentTarget.setPointerCapture?.(event.pointerId);\n          setPanning(true);\n        }\n        drag.current = { pointerId: active.pointerId, x: event.clientX, y: event.clientY, moved: true };\n        panBy(dx, dy);\n      },\n      onPointerUp: endDrag,\n      onPointerCancel: endDrag,\n    },\n  };\n}\n\n/**\n * Pan and zoom for a fixed-size content box inside a clipping viewport:\n * ctrl/meta + wheel (which is also what a trackpad pinch sends) zooms around\n * the pointer, dragging pans, and `zoomIn`/`zoomOut`/`fit` back a control\n * cluster. The content stays fitted to the viewport — across content and\n * viewport size changes — until the user pans or zooms, and again after\n * `fit()` or `reset()`.\n */\nexport function usePanZoom({ enabled, contentWidth, contentHeight, opening }: UsePanZoomOptions): PanZoom {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [transform, setTransform] = useState<PanZoomTransform>({ x: 0, y: 0, scale: 1 });\n  // Which fit the content is held to, until the user pans or zooms.\n  const fitted = useRef<\"opening\" | \"everything\" | undefined>(\"opening\");\n  const { minScale, focus } = opening ?? {};\n  const [focusX, focusY] = [focus?.x, focus?.y];\n\n  const refit = useCallback(() => {\n    const viewport = viewportRef.current;\n    if (!viewport || !fitted.current) return;\n    const content = overflowedSize(contentRef.current, { width: contentWidth, height: contentHeight });\n    const fit: FitOptions =\n      fitted.current === \"everything\"\n        ? {}\n        : {\n            ...(minScale !== undefined ? { minScale } : {}),\n            ...(focusX !== undefined && focusY !== undefined ? { focus: { x: focusX, y: focusY } } : {}),\n          };\n    setTransform(fitTransform(content, viewportSize(viewport), DEFAULT_LIMITS, fit));\n  }, [contentWidth, contentHeight, minScale, focusX, focusY]);\n  const zoomAt = useCallback((point: { x: number; y: number }, factor: number) => {\n    fitted.current = undefined;\n    setTransform((current) => zoomAround(current, point, factor));\n  }, []);\n  const zoomAtCentre = (factor: number) => {\n    const viewport = viewportRef.current;\n    if (!viewport) return;\n    const { width, height } = viewportSize(viewport);\n    zoomAt({ x: width / 2, y: height / 2 }, factor);\n  };\n  const { panning, handlers } = useDragPan((dx, dy) => {\n    fitted.current = undefined;\n    setTransform((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));\n  });\n  useViewportResize(viewportRef, enabled, refit);\n  useWheelZoom(viewportRef, enabled, zoomAt);\n  const hold = (fit: \"opening\" | \"everything\") => () => {\n    fitted.current = fit;\n    refit();\n  };\n\n  return {\n    viewportRef,\n    contentRef,\n    handlers: enabled ? handlers : {},\n    transform,\n    panning,\n    zoomIn: () => zoomAtCentre(BUTTON_ZOOM_FACTOR),\n    zoomOut: () => zoomAtCentre(1 / BUTTON_ZOOM_FACTOR),\n    fit: hold(\"everything\"),\n    reset: hold(\"opening\"),\n  };\n}\n"],"names":[],"mappings":";AA0BA,MAAM,iBAAgC,EAAE,UAAU,KAAK,UAAU,EAAA;AACjE,MAAM,qBAAqB;AAC3B,MAAM,kBAAkB;AAExB,MAAM,kBAAkB;AAExB,MAAM,iBAAiB;AAGhB,SAAS,WACd,WACA,OACA,QACA,SAAwB,gBACN;AAClB,QAAM,QAAQ,KAAK,IAAI,OAAO,UAAU,KAAK,IAAI,OAAO,UAAU,UAAU,QAAQ,MAAM,CAAC;AAC3F,QAAM,QAAQ,QAAQ,UAAU;AAChC,SAAO;AAAA,IACL,GAAG,MAAM,KAAK,MAAM,IAAI,UAAU,KAAK;AAAA,IACvC,GAAG,MAAM,KAAK,MAAM,IAAI,UAAU,KAAK;AAAA,IACvC;AAAA,EAAA;AAEJ;AAUA,SAAS,UAAU,UAAkB,SAAiB,OAAe,OAAuB;AAC1F,QAAM,QAAQ,WAAW,UAAU;AACnC,SAAO,SAAS,IAAI,QAAQ,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,WAAW,IAAI,QAAQ,KAAK,CAAC;AAC3F;AASO,SAAS,aACd,SACA,UACA,SAAwB,gBACxB,MAAkB,IACA;AAClB,MAAI,SAAS,SAAS,KAAK,SAAS,UAAU,KAAK,QAAQ,SAAS,KAAK,QAAQ,UAAU,GAAG;AAC5F,WAAO,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,EAAA;AAAA,EAC9B;AACA,QAAM,QAAQ,KAAK,IAAI,GAAG,SAAS,QAAQ,QAAQ,OAAO,SAAS,SAAS,QAAQ,MAAM;AAC1F,QAAM,QAAQ,KAAK,IAAI,OAAO,UAAU,KAAK,IAAI,GAAG,IAAI,YAAY,CAAC,GAAG,KAAK;AAC7E,QAAM,QAAQ,IAAI,SAAS,EAAE,GAAG,QAAQ,QAAQ,GAAG,GAAG,QAAQ,SAAS,EAAA;AACvE,SAAO;AAAA,IACL,GAAG,UAAU,SAAS,OAAO,QAAQ,OAAO,MAAM,GAAG,KAAK;AAAA,IAC1D,GAAG,UAAU,SAAS,QAAQ,QAAQ,QAAQ,MAAM,GAAG,KAAK;AAAA,IAC5D;AAAA,EAAA;AAEJ;AAuCA,SAAS,aAAa,SAAmC;AACvD,SAAO,EAAE,OAAO,QAAQ,aAAa,QAAQ,QAAQ,aAAA;AACvD;AAOA,SAAS,eAAe,SAA6B,SAAmC;AACtF,QAAM,aAAa,CAAC,MAAc,aAChC,aAAa,UAAa,WAAW,OAAO,WAAW,kBAAkB;AAC3E,SAAO;AAAA,IACL,OAAO,WAAW,QAAQ,OAAO,mCAAS,WAAW;AAAA,IACrD,QAAQ,WAAW,QAAQ,QAAQ,mCAAS,YAAY;AAAA,EAAA;AAE5D;AAGA,SAAS,kBAAkB,aAA0B,SAAkB,OAAyB;AAC9F,YAAU,MAAM;AACd,UAAM,WAAW,YAAY;AAC7B,QAAI,CAAC,WAAW,CAAC,SAAU;AAC3B,UAAA;AACA,QAAI,OAAO,mBAAmB,YAAa;AAC3C,UAAM,WAAW,IAAI,eAAe,KAAK;AACzC,aAAS,QAAQ,QAAQ;AACzB,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,aAAa,SAAS,KAAK,CAAC;AAClC;AAEA,SAAS,aACP,aACA,SACA,QACM;AACN,YAAU,MAAM;AACd,UAAM,WAAW,YAAY;AAC7B,QAAI,CAAC,WAAW,CAAC,SAAU;AAC3B,UAAM,UAAU,CAAC,UAAsB;AACrC,UAAI,CAAC,MAAM,WAAW,CAAC,MAAM,QAAS;AACtC,YAAM,eAAA;AACN,YAAM,OAAO,SAAS,sBAAA;AACtB;AAAA,QACE,EAAE,GAAG,MAAM,UAAU,KAAK,MAAM,GAAG,MAAM,UAAU,KAAK,IAAA;AAAA,QACxD,KAAK,IAAI,CAAC,MAAM,SAAS,eAAe;AAAA,MAAA;AAAA,IAE5C;AAEA,aAAS,iBAAiB,SAAS,SAAS,EAAE,SAAS,OAAO;AAC9D,WAAO,MAAM,SAAS,oBAAoB,SAAS,OAAO;AAAA,EAC5D,GAAG,CAAC,aAAa,SAAS,MAAM,CAAC;AACnC;AAEA,SAAS,WAAW,OAGlB;AACA,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,OAAO,OAA2E,IAAI;AAC5F,QAAM,UAAU,CAAC,UAA6C;AAC5D,QAAI,CAAC,KAAK,WAAW,KAAK,QAAQ,cAAc,MAAM,UAAW;AACjE,SAAK,UAAU;AACf,eAAW,KAAK;AAAA,EAClB;AACA,SAAO;AAAA,IACL;AAAA,IACA,UAAU;AAAA,MACR,eAAe,CAAC,UAAU;AACxB,YAAI,MAAM,WAAW,EAAG;AACxB,aAAK,UAAU,EAAE,WAAW,MAAM,WAAW,GAAG,MAAM,SAAS,GAAG,MAAM,SAAS,OAAO,MAAA;AAAA,MAC1F;AAAA,MACA,eAAe,CAAC,UAAU;;AACxB,cAAM,SAAS,KAAK;AACpB,YAAI,CAAC,UAAU,OAAO,cAAc,MAAM,UAAW;AACrD,cAAM,KAAK,MAAM,UAAU,OAAO;AAClC,cAAM,KAAK,MAAM,UAAU,OAAO;AAClC,YAAI,CAAC,OAAO,OAAO;AACjB,cAAI,KAAK,MAAM,IAAI,EAAE,IAAI,eAAgB;AAGzC,4BAAM,eAAc,sBAApB,4BAAwC,MAAM;AAC9C,qBAAW,IAAI;AAAA,QACjB;AACA,aAAK,UAAU,EAAE,WAAW,OAAO,WAAW,GAAG,MAAM,SAAS,GAAG,MAAM,SAAS,OAAO,KAAA;AACzF,cAAM,IAAI,EAAE;AAAA,MACd;AAAA,MACA,aAAa;AAAA,MACb,iBAAiB;AAAA,IAAA;AAAA,EACnB;AAEJ;AAUO,SAAS,WAAW,EAAE,SAAS,cAAc,eAAe,WAAuC;AACxG,QAAM,cAAc,OAAuB,IAAI;AAC/C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,WAAW,YAAY,IAAI,SAA2B,EAAE,GAAG,GAAG,GAAG,GAAG,OAAO,EAAA,CAAG;AAErF,QAAM,SAAS,OAA6C,SAAS;AACrE,QAAM,EAAE,UAAU,MAAA,IAAU,WAAW,CAAA;AACvC,QAAM,CAAC,QAAQ,MAAM,IAAI,CAAC,+BAAO,GAAG,+BAAO,CAAC;AAE5C,QAAM,QAAQ,YAAY,MAAM;AAC9B,UAAM,WAAW,YAAY;AAC7B,QAAI,CAAC,YAAY,CAAC,OAAO,QAAS;AAClC,UAAM,UAAU,eAAe,WAAW,SAAS,EAAE,OAAO,cAAc,QAAQ,eAAe;AACjG,UAAM,MACJ,OAAO,YAAY,eACf,CAAA,IACA;AAAA,MACE,GAAI,aAAa,SAAY,EAAE,SAAA,IAAa,CAAA;AAAA,MAC5C,GAAI,WAAW,UAAa,WAAW,SAAY,EAAE,OAAO,EAAE,GAAG,QAAQ,GAAG,OAAA,EAAO,IAAM,CAAA;AAAA,IAAC;AAElG,iBAAa,aAAa,SAAS,aAAa,QAAQ,GAAG,gBAAgB,GAAG,CAAC;AAAA,EACjF,GAAG,CAAC,cAAc,eAAe,UAAU,QAAQ,MAAM,CAAC;AAC1D,QAAM,SAAS,YAAY,CAAC,OAAiC,WAAmB;AAC9E,WAAO,UAAU;AACjB,iBAAa,CAAC,YAAY,WAAW,SAAS,OAAO,MAAM,CAAC;AAAA,EAC9D,GAAG,CAAA,CAAE;AACL,QAAM,eAAe,CAAC,WAAmB;AACvC,UAAM,WAAW,YAAY;AAC7B,QAAI,CAAC,SAAU;AACf,UAAM,EAAE,OAAO,WAAW,aAAa,QAAQ;AAC/C,WAAO,EAAE,GAAG,QAAQ,GAAG,GAAG,SAAS,EAAA,GAAK,MAAM;AAAA,EAChD;AACA,QAAM,EAAE,SAAS,SAAA,IAAa,WAAW,CAAC,IAAI,OAAO;AACnD,WAAO,UAAU;AACjB,iBAAa,CAAC,aAAa,EAAE,GAAG,SAAS,GAAG,QAAQ,IAAI,IAAI,GAAG,QAAQ,IAAI,KAAK;AAAA,EAClF,CAAC;AACD,oBAAkB,aAAa,SAAS,KAAK;AAC7C,eAAa,aAAa,SAAS,MAAM;AACzC,QAAM,OAAO,CAAC,QAAkC,MAAM;AACpD,WAAO,UAAU;AACjB,UAAA;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,UAAU,UAAU,WAAW,CAAA;AAAA,IAC/B;AAAA,IACA;AAAA,IACA,QAAQ,MAAM,aAAa,kBAAkB;AAAA,IAC7C,SAAS,MAAM,aAAa,IAAI,kBAAkB;AAAA,IAClD,KAAK,KAAK,YAAY;AAAA,IACtB,OAAO,KAAK,SAAS;AAAA,EAAA;AAEzB;"}
+{"version":3,"file":"use-pan-zoom.js","sources":["../../src/data/use-pan-zoom.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type PointerEvent as ReactPointerEvent,\n  type RefObject,\n} from \"react\";\n\nexport interface PanZoomTransform {\n  /** Translation of the content's top-left corner inside the viewport, in px. */\n  x: number;\n  y: number;\n  scale: number;\n}\n\nexport interface PanZoomSize {\n  width: number;\n  height: number;\n}\n\nexport interface PanZoomLimits {\n  minScale: number;\n  maxScale: number;\n}\n\nconst DEFAULT_LIMITS: PanZoomLimits = { minScale: 0.2, maxScale: 4 };\nconst BUTTON_ZOOM_FACTOR = 1.25;\n/** A pinch sends small ctrl-wheel deltas: this rate keeps it tracking the fingers. */\nconst PINCH_ZOOM_RATE = 0.01;\n/** A mouse wheel notch is about 100px of delta; this rate makes one notch a button step. */\nconst WHEEL_NOTCH_PX = 100;\nconst WHEEL_ZOOM_RATE = Math.log(BUTTON_ZOOM_FACTOR) / WHEEL_NOTCH_PX;\nconst LINE_PX = 16;\nconst DOM_DELTA_LINE = 1;\nconst DOM_DELTA_PAGE = 2;\n/** Air kept between overflowing content and the viewport edge when fitting, in content px. */\nconst OVERFLOW_MARGIN = 8;\n/** Pointer travel in px before a press becomes a pan rather than a click. */\nconst DRAG_THRESHOLD = 4;\n\n/** Scales by `factor`, clamped to `limits`, keeping the content under `point` (viewport px) where it is. */\nexport function zoomAround(\n  transform: PanZoomTransform,\n  point: { x: number; y: number },\n  factor: number,\n  limits: PanZoomLimits = DEFAULT_LIMITS,\n): PanZoomTransform {\n  const scale = Math.min(limits.maxScale, Math.max(limits.minScale, transform.scale * factor));\n  const ratio = scale / transform.scale;\n  return {\n    x: point.x - (point.x - transform.x) * ratio,\n    y: point.y - (point.y - transform.y) * ratio,\n    scale,\n  };\n}\n\nexport interface FitOptions {\n  /** The smallest scale the fit shrinks to. Content too large for it overflows the viewport. */\n  minScale?: number;\n  /** The content point an overflowing axis is centred on. Defaults to the content's centre. */\n  focus?: { x: number; y: number };\n}\n\n/** Offset of one axis: centred when the content fits, else centred on `focus` without showing past either edge. */\nfunction fitOffset(viewport: number, content: number, focus: number, scale: number): number {\n  const slack = viewport - content * scale;\n  return slack >= 0 ? slack / 2 : Math.min(0, Math.max(slack, viewport / 2 - focus * scale));\n}\n\n/**\n * The transform that shows all of `content` centred in `viewport`. Content is\n * only ever shrunk to fit, never enlarged past its natural size. With\n * `fit.minScale` it is not shrunk past that either: it then overflows, centred\n * on `fit.focus`, and the rest is reached by panning. An unmeasured\n * (zero-sized) viewport yields the identity transform.\n */\nexport function fitTransform(\n  content: PanZoomSize,\n  viewport: PanZoomSize,\n  limits: PanZoomLimits = DEFAULT_LIMITS,\n  fit: FitOptions = {},\n): PanZoomTransform {\n  if (viewport.width <= 0 || viewport.height <= 0 || content.width <= 0 || content.height <= 0) {\n    return { x: 0, y: 0, scale: 1 };\n  }\n  const whole = Math.min(1, viewport.width / content.width, viewport.height / content.height);\n  const scale = Math.max(limits.minScale, Math.min(1, fit.minScale ?? 0), whole);\n  const focus = fit.focus ?? { x: content.width / 2, y: content.height / 2 };\n  return {\n    x: fitOffset(viewport.width, content.width, focus.x, scale),\n    y: fitOffset(viewport.height, content.height, focus.y, scale),\n    scale,\n  };\n}\n\nexport interface UsePanZoomOptions {\n  /** When false the hook is inert: no listeners, identity transform. */\n  enabled: boolean;\n  /** Natural (unscaled) size of the content being panned and zoomed. */\n  contentWidth: number;\n  contentHeight: number;\n  /** How the content opens, and what `reset()` returns to. `fit()` ignores it and shows everything. */\n  opening?: FitOptions;\n  /** What a plain wheel does; defaults to \"modifier\". See `WheelMode`. */\n  wheel?: WheelMode;\n}\n\nexport interface PanZoomViewportHandlers {\n  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;\n  onPointerCancel: (event: ReactPointerEvent<HTMLDivElement>) => void;\n}\n\nexport interface PanZoom {\n  /** Attach to the clipping viewport element. */\n  viewportRef: RefObject<HTMLDivElement | null>;\n  /** Attach to the content element, so anything overflowing its box is fitted too. */\n  contentRef: RefObject<HTMLDivElement | null>;\n  /** Spread onto the viewport element; empty when disabled. */\n  handlers: Partial<PanZoomViewportHandlers>;\n  /** Apply to the content as `translate(x, y) scale(scale)` with a top-left transform origin. */\n  transform: PanZoomTransform;\n  panning: boolean;\n  zoomIn: () => void;\n  zoomOut: () => void;\n  /** Shows everything, however small. */\n  fit: () => void;\n  /** Returns to how the content opened: see `UsePanZoomOptions.opening`. */\n  reset: () => void;\n}\n\ntype ViewportRef = RefObject<HTMLDivElement | null>;\n\nfunction viewportSize(element: HTMLElement): PanZoomSize {\n  return { width: element.clientWidth, height: element.clientHeight };\n}\n\n/**\n * The content's size, counting children that overflow its box to the right or\n * below (a label hanging off its edge): they extend its scroll size, which a\n * transform leaves untouched.\n */\nfunction overflowedSize(element: HTMLElement | null, natural: PanZoomSize): PanZoomSize {\n  const overflowed = (size: number, scrolled: number | undefined) =>\n    scrolled !== undefined && scrolled > size ? scrolled + OVERFLOW_MARGIN : size;\n  return {\n    width: overflowed(natural.width, element?.scrollWidth),\n    height: overflowed(natural.height, element?.scrollHeight),\n  };\n}\n\n/** Runs `refit` now and whenever the viewport is resized. */\nfunction useViewportResize(viewportRef: ViewportRef, enabled: boolean, refit: () => void): void {\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!enabled || !viewport) return;\n    refit();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(refit);\n    observer.observe(viewport);\n    return () => observer.disconnect();\n  }, [viewportRef, enabled, refit]);\n}\n\n/**\n * What a plain (unmodified) wheel does over the viewport: \"modifier\" leaves it to scroll the page\n * and zooms only on ctrl/meta + wheel or a pinch; \"zoom\" zooms on every wheel.\n */\nexport type WheelMode = \"modifier\" | \"zoom\";\n\ntype WheelInput = Pick<WheelEvent, \"deltaY\" | \"deltaMode\" | \"ctrlKey\" | \"metaKey\">;\n\n/**\n * The scale factor a wheel event zooms by, or undefined when `mode` leaves it to the page. The\n * delta is read in pixels whatever its unit, and a plain wheel notch is capped at one button step.\n */\nexport function wheelZoomFactor(event: WheelInput, mode: WheelMode, viewportHeight: number): number | undefined {\n  const modified = event.ctrlKey || event.metaKey;\n  if (!modified && mode === \"modifier\") return undefined;\n  const unit = event.deltaMode === DOM_DELTA_LINE ? LINE_PX : event.deltaMode === DOM_DELTA_PAGE ? viewportHeight : 1;\n  const pixels = -event.deltaY * unit;\n  if (modified) return Math.exp(pixels * PINCH_ZOOM_RATE);\n  const step = Math.log(BUTTON_ZOOM_FACTOR);\n  return Math.exp(Math.min(step, Math.max(-step, pixels * WHEEL_ZOOM_RATE)));\n}\n\nfunction useWheelZoom(\n  viewportRef: ViewportRef,\n  enabled: boolean,\n  mode: WheelMode,\n  zoomAt: (point: { x: number; y: number }, factor: number) => void,\n): void {\n  useEffect(() => {\n    const viewport = viewportRef.current;\n    if (!enabled || !viewport) return;\n    const onWheel = (event: WheelEvent) => {\n      const factor = wheelZoomFactor(event, mode, viewport.clientHeight);\n      if (factor === undefined) return;\n      event.preventDefault();\n      const rect = viewport.getBoundingClientRect();\n      zoomAt({ x: event.clientX - rect.left, y: event.clientY - rect.top }, factor);\n    };\n    // React registers wheel listeners as passive, which cannot preventDefault the page zoom or scroll.\n    viewport.addEventListener(\"wheel\", onWheel, { passive: false });\n    return () => viewport.removeEventListener(\"wheel\", onWheel);\n  }, [viewportRef, enabled, mode, zoomAt]);\n}\n\nfunction useDragPan(panBy: (dx: number, dy: number) => void): {\n  panning: boolean;\n  handlers: PanZoomViewportHandlers;\n} {\n  const [panning, setPanning] = useState(false);\n  const drag = useRef<{ pointerId: number; x: number; y: number; moved: boolean } | null>(null);\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (!drag.current || drag.current.pointerId !== event.pointerId) return;\n    drag.current = null;\n    setPanning(false);\n  };\n  return {\n    panning,\n    handlers: {\n      onPointerDown: (event) => {\n        if (event.button !== 0) return;\n        drag.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, moved: false };\n      },\n      onPointerMove: (event) => {\n        const active = drag.current;\n        if (!active || active.pointerId !== event.pointerId) return;\n        const dx = event.clientX - active.x;\n        const dy = event.clientY - active.y;\n        if (!active.moved) {\n          if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;\n          // Capturing only once a drag is under way leaves plain clicks on nodes and edges alone,\n          // and retargets the click that ends a drag to the viewport so it selects nothing.\n          event.currentTarget.setPointerCapture?.(event.pointerId);\n          setPanning(true);\n        }\n        drag.current = { pointerId: active.pointerId, x: event.clientX, y: event.clientY, moved: true };\n        panBy(dx, dy);\n      },\n      onPointerUp: endDrag,\n      onPointerCancel: endDrag,\n    },\n  };\n}\n\n/**\n * Pan and zoom for a fixed-size content box inside a clipping viewport:\n * ctrl/meta + wheel (which is also what a trackpad pinch sends) — or any wheel, with `wheel: \"zoom\"` — zooms around\n * the pointer, dragging pans, and `zoomIn`/`zoomOut`/`fit` back a control\n * cluster. The content stays fitted to the viewport — across content and\n * viewport size changes — until the user pans or zooms, and again after\n * `fit()` or `reset()`.\n */\nexport function usePanZoom({ enabled, contentWidth, contentHeight, opening, wheel = \"modifier\" }: UsePanZoomOptions): PanZoom {\n  const viewportRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [transform, setTransform] = useState<PanZoomTransform>({ x: 0, y: 0, scale: 1 });\n  // Which fit the content is held to, until the user pans or zooms.\n  const fitted = useRef<\"opening\" | \"everything\" | undefined>(\"opening\");\n  const { minScale, focus } = opening ?? {};\n  const [focusX, focusY] = [focus?.x, focus?.y];\n\n  const refit = useCallback(() => {\n    const viewport = viewportRef.current;\n    if (!viewport || !fitted.current) return;\n    const content = overflowedSize(contentRef.current, { width: contentWidth, height: contentHeight });\n    const fit: FitOptions =\n      fitted.current === \"everything\"\n        ? {}\n        : {\n            ...(minScale !== undefined ? { minScale } : {}),\n            ...(focusX !== undefined && focusY !== undefined ? { focus: { x: focusX, y: focusY } } : {}),\n          };\n    setTransform(fitTransform(content, viewportSize(viewport), DEFAULT_LIMITS, fit));\n  }, [contentWidth, contentHeight, minScale, focusX, focusY]);\n  const zoomAt = useCallback((point: { x: number; y: number }, factor: number) => {\n    fitted.current = undefined;\n    setTransform((current) => zoomAround(current, point, factor));\n  }, []);\n  const zoomAtCentre = (factor: number) => {\n    const viewport = viewportRef.current;\n    if (!viewport) return;\n    const { width, height } = viewportSize(viewport);\n    zoomAt({ x: width / 2, y: height / 2 }, factor);\n  };\n  const { panning, handlers } = useDragPan((dx, dy) => {\n    fitted.current = undefined;\n    setTransform((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));\n  });\n  useViewportResize(viewportRef, enabled, refit);\n  useWheelZoom(viewportRef, enabled, wheel, zoomAt);\n  const hold = (fit: \"opening\" | \"everything\") => () => {\n    fitted.current = fit;\n    refit();\n  };\n\n  return {\n    viewportRef,\n    contentRef,\n    handlers: enabled ? handlers : {},\n    transform,\n    panning,\n    zoomIn: () => zoomAtCentre(BUTTON_ZOOM_FACTOR),\n    zoomOut: () => zoomAtCentre(1 / BUTTON_ZOOM_FACTOR),\n    fit: hold(\"everything\"),\n    reset: hold(\"opening\"),\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/data/version-info.cjs

@@ -15,9 +15,9 @@ function detectMode() {
 }
 function getVersionInfo() {
   return {
-    commit: read(() => "199317e2", ""),
-    tag: read(() => "clicky-ui@0.3.41", ""),
-    date: read(() => "2026-10-01T12:38:49.651Z", ""),
+    commit: read(() => "9ef931dd", ""),
+    tag: read(() => "clicky-ui@0.3.44", ""),
+    date: read(() => "2026-10-05T13:41:10.767Z", ""),
     dirty: read(() => true, false),
     mode: detectMode()
   };