@flanksource/clicky-ui 0.3.40 → 0.3.42

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+function runtimeBarInlineCount({
+  width,
+  identity,
+  trigger,
+  fields,
+  gap
+}) {
+  let occupied = identity + trigger + gap;
+  let count = 0;
+  for (const field of fields) {
+    occupied += field + gap;
+    if (occupied > width) break;
+    count++;
+  }
+  return count;
+}
+function useRuntimeBarOverflow() {
+  const [container, setContainer] = react.useState(null);
+  const [measurement, setMeasurement] = react.useState(null);
+  const [visibleCount, setVisibleCount] = react.useState(Infinity);
+  const measure = react.useCallback(() => {
+    if (!container || !measurement) return;
+    const width = container.getBoundingClientRect().width;
+    if (width <= 0) return;
+    const [identity, ...controls] = [...measurement.children];
+    const trigger = controls.pop();
+    if (!identity || !trigger)
+      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
+    });
+    setVisibleCount((previous) => previous === count ? previous : count);
+  }, [container, measurement]);
+  react.useLayoutEffect(() => {
+    measure();
+  });
+  react.useLayoutEffect(() => {
+    if (!container || !measurement) return;
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+    observer == null ? void 0 : observer.observe(container);
+    observer == null ? void 0 : observer.observe(measurement);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [container, measurement, measure]);
+  return {
+    containerRef: setContainer,
+    measurementRef: setMeasurement,
+    visibleCount
+  };
+}
+exports.runtimeBarInlineCount = runtimeBarInlineCount;
+exports.useRuntimeBarOverflow = useRuntimeBarOverflow;
+//# sourceMappingURL=use-runtime-bar-overflow.cjs.map

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

@@ -0,0 +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;;;"}

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

@@ -0,0 +1,13 @@
+export declare function runtimeBarInlineCount({ width, identity, trigger, fields, gap, }: {
+    width: number;
+    identity: number;
+    trigger: number;
+    fields: number[];
+    gap: number;
+}): number;
+export declare function useRuntimeBarOverflow(): {
+    containerRef: import('react').Dispatch<import('react').SetStateAction<HTMLDivElement | null>>;
+    measurementRef: import('react').Dispatch<import('react').SetStateAction<HTMLDivElement | null>>;
+    visibleCount: number;
+};
+//# sourceMappingURL=use-runtime-bar-overflow.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,70 @@
+import { useState, useCallback, useLayoutEffect } from "react";
+function runtimeBarInlineCount({
+  width,
+  identity,
+  trigger,
+  fields,
+  gap
+}) {
+  let occupied = identity + trigger + gap;
+  let count = 0;
+  for (const field of fields) {
+    occupied += field + gap;
+    if (occupied > width) break;
+    count++;
+  }
+  return count;
+}
+function useRuntimeBarOverflow() {
+  const [container, setContainer] = useState(null);
+  const [measurement, setMeasurement] = useState(null);
+  const [visibleCount, setVisibleCount] = useState(Infinity);
+  const measure = useCallback(() => {
+    if (!container || !measurement) return;
+    const width = container.getBoundingClientRect().width;
+    if (width <= 0) return;
+    const [identity, ...controls] = [...measurement.children];
+    const trigger = controls.pop();
+    if (!identity || !trigger)
+      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
+    });
+    setVisibleCount((previous) => previous === count ? previous : count);
+  }, [container, measurement]);
+  useLayoutEffect(() => {
+    measure();
+  });
+  useLayoutEffect(() => {
+    if (!container || !measurement) return;
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(measure);
+    observer == null ? void 0 : observer.observe(container);
+    observer == null ? void 0 : observer.observe(measurement);
+    window.addEventListener("resize", measure);
+    return () => {
+      observer == null ? void 0 : observer.disconnect();
+      window.removeEventListener("resize", measure);
+    };
+  }, [container, measurement, measure]);
+  return {
+    containerRef: setContainer,
+    measurementRef: setMeasurement,
+    visibleCount
+  };
+}
+export {
+  runtimeBarInlineCount,
+  useRuntimeBarOverflow
+};
+//# sourceMappingURL=use-runtime-bar-overflow.js.map

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

@@ -0,0 +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;"}

package/dist/data/use-edge-focus.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const graphDiagramModel = require("./graph-diagram-model.cjs");
+function useEdgeFocus({ mode, edges, selectedId, selectedEdgeId }) {
+  const [hoveredNode, setHoveredNode] = react.useState();
+  const [hoveredEdge, setHoveredEdge] = react.useState();
+  const on = graphDiagramModel.edgeFocusOn(mode, edges.length);
+  const state = react.useMemo(
+    () => on ? {
+      focused: graphDiagramModel.focusedEdgeIds(edges, { nodes: [selectedId, hoveredNode], edges: [selectedEdgeId, hoveredEdge] }),
+      pinned: graphDiagramModel.focusedEdgeIds(edges, { nodes: [selectedId], edges: [selectedEdgeId] }),
+      nodes: new Set([selectedId, hoveredNode].filter((id) => id !== void 0))
+    } : void 0,
+    [on, edges, selectedId, selectedEdgeId, hoveredNode, hoveredEdge]
+  );
+  return { state, onNodeHover: on ? setHoveredNode : void 0, onEdgeHover: on ? setHoveredEdge : void 0 };
+}
+exports.useEdgeFocus = useEdgeFocus;
+//# sourceMappingURL=use-edge-focus.cjs.map

package/dist/data/use-edge-focus.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-edge-focus.cjs","sources":["../../src/data/use-edge-focus.ts"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { edgeFocusOn, focusedEdgeIds, type GraphDiagramEdge, type GraphDiagramEdgeFocus } from \"./graph-diagram-model\";\n\nexport interface EdgeFocusState {\n  /** Every edge in focus, by selection or by hover. Empty when nothing is. */\n  focused: ReadonlySet<string>;\n  /** The edges the selection put in focus. Their pills stay put, so they take the pointer. */\n  pinned: ReadonlySet<string>;\n  /** The nodes in focus: the selected one and the hovered one. */\n  nodes: ReadonlySet<string>;\n}\n\nexport interface EdgeFocus {\n  /** Undefined when the diagram is not focused: every edge then draws in full, with its pill. */\n  state: EdgeFocusState | undefined;\n  onNodeHover: ((id: string | undefined) => void) | undefined;\n  onEdgeHover: ((id: string | undefined) => void) | undefined;\n}\n\nexport interface UseEdgeFocusOptions {\n  mode: GraphDiagramEdgeFocus;\n  edges: readonly GraphDiagramEdge[];\n  selectedId: string | undefined;\n  selectedEdgeId: string | undefined;\n}\n\nexport function useEdgeFocus({ mode, edges, selectedId, selectedEdgeId }: UseEdgeFocusOptions): EdgeFocus {\n  const [hoveredNode, setHoveredNode] = useState<string>();\n  const [hoveredEdge, setHoveredEdge] = useState<string>();\n  const on = edgeFocusOn(mode, edges.length);\n  const state = useMemo(\n    () =>\n      on\n        ? {\n            focused: focusedEdgeIds(edges, { nodes: [selectedId, hoveredNode], edges: [selectedEdgeId, hoveredEdge] }),\n            pinned: focusedEdgeIds(edges, { nodes: [selectedId], edges: [selectedEdgeId] }),\n            nodes: new Set([selectedId, hoveredNode].filter((id): id is string => id !== undefined)),\n          }\n        : undefined,\n    [on, edges, selectedId, selectedEdgeId, hoveredNode, hoveredEdge],\n  );\n  return { state, onNodeHover: on ? setHoveredNode : undefined, onEdgeHover: on ? setHoveredEdge : undefined };\n}\n"],"names":["useState","edgeFocusOn","useMemo","focusedEdgeIds"],"mappings":";;;;AA0BO,SAAS,aAAa,EAAE,MAAM,OAAO,YAAY,kBAAkD;AACxG,QAAM,CAAC,aAAa,cAAc,IAAIA,eAAA;AACtC,QAAM,CAAC,aAAa,cAAc,IAAIA,eAAA;AACtC,QAAM,KAAKC,kBAAAA,YAAY,MAAM,MAAM,MAAM;AACzC,QAAM,QAAQC,MAAAA;AAAAA,IACZ,MACE,KACI;AAAA,MACE,SAASC,kBAAAA,eAAe,OAAO,EAAE,OAAO,CAAC,YAAY,WAAW,GAAG,OAAO,CAAC,gBAAgB,WAAW,GAAG;AAAA,MACzG,QAAQA,kBAAAA,eAAe,OAAO,EAAE,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,cAAc,GAAG;AAAA,MAC9E,OAAO,IAAI,IAAI,CAAC,YAAY,WAAW,EAAE,OAAO,CAAC,OAAqB,OAAO,MAAS,CAAC;AAAA,IAAA,IAEzF;AAAA,IACN,CAAC,IAAI,OAAO,YAAY,gBAAgB,aAAa,WAAW;AAAA,EAAA;AAElE,SAAO,EAAE,OAAO,aAAa,KAAK,iBAAiB,QAAW,aAAa,KAAK,iBAAiB,OAAA;AACnG;;"}

package/dist/data/use-edge-focus.d.ts

@@ -0,0 +1,23 @@
+import { GraphDiagramEdge, GraphDiagramEdgeFocus } from './graph-diagram-model.js';
+export interface EdgeFocusState {
+    /** Every edge in focus, by selection or by hover. Empty when nothing is. */
+    focused: ReadonlySet<string>;
+    /** The edges the selection put in focus. Their pills stay put, so they take the pointer. */
+    pinned: ReadonlySet<string>;
+    /** The nodes in focus: the selected one and the hovered one. */
+    nodes: ReadonlySet<string>;
+}
+export interface EdgeFocus {
+    /** Undefined when the diagram is not focused: every edge then draws in full, with its pill. */
+    state: EdgeFocusState | undefined;
+    onNodeHover: ((id: string | undefined) => void) | undefined;
+    onEdgeHover: ((id: string | undefined) => void) | undefined;
+}
+export interface UseEdgeFocusOptions {
+    mode: GraphDiagramEdgeFocus;
+    edges: readonly GraphDiagramEdge[];
+    selectedId: string | undefined;
+    selectedEdgeId: string | undefined;
+}
+export declare function useEdgeFocus({ mode, edges, selectedId, selectedEdgeId }: UseEdgeFocusOptions): EdgeFocus;
+//# sourceMappingURL=use-edge-focus.d.ts.map

package/dist/data/use-edge-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-edge-focus.d.ts","sourceRoot":"","sources":["../../src/data/use-edge-focus.ts"],"names":[],"mappings":"AACA,OAAO,EAA+B,KAAK,gBAAgB,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAEvH,MAAM,WAAW,cAAc;IAC7B,4EAA4E;IAC5E,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,4FAA4F;IAC5F,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC5B,gEAAgE;IAChE,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,+FAA+F;IAC/F,KAAK,EAAE,cAAc,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC5D,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC7D;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,qBAAqB,CAAC;IAC5B,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;CACpC;AAED,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAgBxG"}

package/dist/data/use-edge-focus.js

@@ -0,0 +1,20 @@
+import { useState, useMemo } from "react";
+import { edgeFocusOn, focusedEdgeIds } from "./graph-diagram-model.js";
+function useEdgeFocus({ mode, edges, selectedId, selectedEdgeId }) {
+  const [hoveredNode, setHoveredNode] = useState();
+  const [hoveredEdge, setHoveredEdge] = useState();
+  const on = edgeFocusOn(mode, edges.length);
+  const state = useMemo(
+    () => on ? {
+      focused: focusedEdgeIds(edges, { nodes: [selectedId, hoveredNode], edges: [selectedEdgeId, hoveredEdge] }),
+      pinned: focusedEdgeIds(edges, { nodes: [selectedId], edges: [selectedEdgeId] }),
+      nodes: new Set([selectedId, hoveredNode].filter((id) => id !== void 0))
+    } : void 0,
+    [on, edges, selectedId, selectedEdgeId, hoveredNode, hoveredEdge]
+  );
+  return { state, onNodeHover: on ? setHoveredNode : void 0, onEdgeHover: on ? setHoveredEdge : void 0 };
+}
+export {
+  useEdgeFocus
+};
+//# sourceMappingURL=use-edge-focus.js.map

package/dist/data/use-edge-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-edge-focus.js","sources":["../../src/data/use-edge-focus.ts"],"sourcesContent":["import { useMemo, useState } from \"react\";\nimport { edgeFocusOn, focusedEdgeIds, type GraphDiagramEdge, type GraphDiagramEdgeFocus } from \"./graph-diagram-model\";\n\nexport interface EdgeFocusState {\n  /** Every edge in focus, by selection or by hover. Empty when nothing is. */\n  focused: ReadonlySet<string>;\n  /** The edges the selection put in focus. Their pills stay put, so they take the pointer. */\n  pinned: ReadonlySet<string>;\n  /** The nodes in focus: the selected one and the hovered one. */\n  nodes: ReadonlySet<string>;\n}\n\nexport interface EdgeFocus {\n  /** Undefined when the diagram is not focused: every edge then draws in full, with its pill. */\n  state: EdgeFocusState | undefined;\n  onNodeHover: ((id: string | undefined) => void) | undefined;\n  onEdgeHover: ((id: string | undefined) => void) | undefined;\n}\n\nexport interface UseEdgeFocusOptions {\n  mode: GraphDiagramEdgeFocus;\n  edges: readonly GraphDiagramEdge[];\n  selectedId: string | undefined;\n  selectedEdgeId: string | undefined;\n}\n\nexport function useEdgeFocus({ mode, edges, selectedId, selectedEdgeId }: UseEdgeFocusOptions): EdgeFocus {\n  const [hoveredNode, setHoveredNode] = useState<string>();\n  const [hoveredEdge, setHoveredEdge] = useState<string>();\n  const on = edgeFocusOn(mode, edges.length);\n  const state = useMemo(\n    () =>\n      on\n        ? {\n            focused: focusedEdgeIds(edges, { nodes: [selectedId, hoveredNode], edges: [selectedEdgeId, hoveredEdge] }),\n            pinned: focusedEdgeIds(edges, { nodes: [selectedId], edges: [selectedEdgeId] }),\n            nodes: new Set([selectedId, hoveredNode].filter((id): id is string => id !== undefined)),\n          }\n        : undefined,\n    [on, edges, selectedId, selectedEdgeId, hoveredNode, hoveredEdge],\n  );\n  return { state, onNodeHover: on ? setHoveredNode : undefined, onEdgeHover: on ? setHoveredEdge : undefined };\n}\n"],"names":[],"mappings":";;AA0BO,SAAS,aAAa,EAAE,MAAM,OAAO,YAAY,kBAAkD;AACxG,QAAM,CAAC,aAAa,cAAc,IAAI,SAAA;AACtC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAA;AACtC,QAAM,KAAK,YAAY,MAAM,MAAM,MAAM;AACzC,QAAM,QAAQ;AAAA,IACZ,MACE,KACI;AAAA,MACE,SAAS,eAAe,OAAO,EAAE,OAAO,CAAC,YAAY,WAAW,GAAG,OAAO,CAAC,gBAAgB,WAAW,GAAG;AAAA,MACzG,QAAQ,eAAe,OAAO,EAAE,OAAO,CAAC,UAAU,GAAG,OAAO,CAAC,cAAc,GAAG;AAAA,MAC9E,OAAO,IAAI,IAAI,CAAC,YAAY,WAAW,EAAE,OAAO,CAAC,OAAqB,OAAO,MAAS,CAAC;AAAA,IAAA,IAEzF;AAAA,IACN,CAAC,IAAI,OAAO,YAAY,gBAAgB,aAAa,WAAW;AAAA,EAAA;AAElE,SAAO,EAAE,OAAO,aAAa,KAAK,iBAAiB,QAAW,aAAa,KAAK,iBAAiB,OAAA;AACnG;"}

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

@@ -0,0 +1,159 @@
+"use strict";
+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 OVERFLOW_MARGIN = 8;
+const DRAG_THRESHOLD = 4;
+function zoomAround(transform, point, factor, limits = DEFAULT_LIMITS) {
+  const scale = Math.min(limits.maxScale, Math.max(limits.minScale, transform.scale * factor));
+  const ratio = scale / transform.scale;
+  return {
+    x: point.x - (point.x - transform.x) * ratio,
+    y: point.y - (point.y - transform.y) * ratio,
+    scale
+  };
+}
+function fitOffset(viewport, content, focus, scale) {
+  const slack = viewport - content * scale;
+  return slack >= 0 ? slack / 2 : Math.min(0, Math.max(slack, viewport / 2 - focus * scale));
+}
+function fitTransform(content, viewport, limits = DEFAULT_LIMITS, fit = {}) {
+  if (viewport.width <= 0 || viewport.height <= 0 || content.width <= 0 || content.height <= 0) {
+    return { x: 0, y: 0, scale: 1 };
+  }
+  const whole = Math.min(1, viewport.width / content.width, viewport.height / content.height);
+  const scale = Math.max(limits.minScale, Math.min(1, fit.minScale ?? 0), whole);
+  const focus = fit.focus ?? { x: content.width / 2, y: content.height / 2 };
+  return {
+    x: fitOffset(viewport.width, content.width, focus.x, scale),
+    y: fitOffset(viewport.height, content.height, focus.y, scale),
+    scale
+  };
+}
+function viewportSize(element) {
+  return { width: element.clientWidth, height: element.clientHeight };
+}
+function overflowedSize(element, natural) {
+  const overflowed = (size, scrolled) => scrolled !== void 0 && scrolled > size ? scrolled + OVERFLOW_MARGIN : size;
+  return {
+    width: overflowed(natural.width, element == null ? void 0 : element.scrollWidth),
+    height: overflowed(natural.height, element == null ? void 0 : element.scrollHeight)
+  };
+}
+function useViewportResize(viewportRef, enabled, refit) {
+  react.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!enabled || !viewport) return;
+    refit();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(refit);
+    observer.observe(viewport);
+    return () => observer.disconnect();
+  }, [viewportRef, enabled, refit]);
+}
+function useWheelZoom(viewportRef, enabled, zoomAt) {
+  react.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!enabled || !viewport) return;
+    const onWheel = (event) => {
+      if (!event.ctrlKey && !event.metaKey) 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)
+      );
+    };
+    viewport.addEventListener("wheel", onWheel, { passive: false });
+    return () => viewport.removeEventListener("wheel", onWheel);
+  }, [viewportRef, enabled, zoomAt]);
+}
+function useDragPan(panBy) {
+  const [panning, setPanning] = react.useState(false);
+  const drag = react.useRef(null);
+  const endDrag = (event) => {
+    if (!drag.current || drag.current.pointerId !== event.pointerId) return;
+    drag.current = null;
+    setPanning(false);
+  };
+  return {
+    panning,
+    handlers: {
+      onPointerDown: (event) => {
+        if (event.button !== 0) return;
+        drag.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, moved: false };
+      },
+      onPointerMove: (event) => {
+        var _a, _b;
+        const active = drag.current;
+        if (!active || active.pointerId !== event.pointerId) return;
+        const dx = event.clientX - active.x;
+        const dy = event.clientY - active.y;
+        if (!active.moved) {
+          if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+          (_b = (_a = event.currentTarget).setPointerCapture) == null ? void 0 : _b.call(_a, event.pointerId);
+          setPanning(true);
+        }
+        drag.current = { pointerId: active.pointerId, x: event.clientX, y: event.clientY, moved: true };
+        panBy(dx, dy);
+      },
+      onPointerUp: endDrag,
+      onPointerCancel: endDrag
+    }
+  };
+}
+function usePanZoom({ enabled, contentWidth, contentHeight, opening }) {
+  const viewportRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  const [transform, setTransform] = react.useState({ x: 0, y: 0, scale: 1 });
+  const fitted = react.useRef("opening");
+  const { minScale, focus } = opening ?? {};
+  const [focusX, focusY] = [focus == null ? void 0 : focus.x, focus == null ? void 0 : focus.y];
+  const refit = react.useCallback(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || !fitted.current) return;
+    const content = overflowedSize(contentRef.current, { width: contentWidth, height: contentHeight });
+    const fit = fitted.current === "everything" ? {} : {
+      ...minScale !== void 0 ? { minScale } : {},
+      ...focusX !== void 0 && focusY !== void 0 ? { focus: { x: focusX, y: focusY } } : {}
+    };
+    setTransform(fitTransform(content, viewportSize(viewport), DEFAULT_LIMITS, fit));
+  }, [contentWidth, contentHeight, minScale, focusX, focusY]);
+  const zoomAt = react.useCallback((point, factor) => {
+    fitted.current = void 0;
+    setTransform((current) => zoomAround(current, point, factor));
+  }, []);
+  const zoomAtCentre = (factor) => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const { width, height } = viewportSize(viewport);
+    zoomAt({ x: width / 2, y: height / 2 }, factor);
+  };
+  const { panning, handlers } = useDragPan((dx, dy) => {
+    fitted.current = void 0;
+    setTransform((current) => ({ ...current, x: current.x + dx, y: current.y + dy }));
+  });
+  useViewportResize(viewportRef, enabled, refit);
+  useWheelZoom(viewportRef, enabled, zoomAt);
+  const hold = (fit) => () => {
+    fitted.current = fit;
+    refit();
+  };
+  return {
+    viewportRef,
+    contentRef,
+    handlers: enabled ? handlers : {},
+    transform,
+    panning,
+    zoomIn: () => zoomAtCentre(BUTTON_ZOOM_FACTOR),
+    zoomOut: () => zoomAtCentre(1 / BUTTON_ZOOM_FACTOR),
+    fit: hold("everything"),
+    reset: hold("opening")
+  };
+}
+exports.fitTransform = fitTransform;
+exports.usePanZoom = usePanZoom;
+exports.zoomAround = zoomAround;
+//# sourceMappingURL=use-pan-zoom.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,79 @@
+import { PointerEvent as ReactPointerEvent, RefObject } from 'react';
+export interface PanZoomTransform {
+    /** Translation of the content's top-left corner inside the viewport, in px. */
+    x: number;
+    y: number;
+    scale: number;
+}
+export interface PanZoomSize {
+    width: number;
+    height: number;
+}
+export interface PanZoomLimits {
+    minScale: number;
+    maxScale: number;
+}
+/** Scales by `factor`, clamped to `limits`, keeping the content under `point` (viewport px) where it is. */
+export declare function zoomAround(transform: PanZoomTransform, point: {
+    x: number;
+    y: number;
+}, factor: number, limits?: PanZoomLimits): PanZoomTransform;
+export interface FitOptions {
+    /** The smallest scale the fit shrinks to. Content too large for it overflows the viewport. */
+    minScale?: number;
+    /** The content point an overflowing axis is centred on. Defaults to the content's centre. */
+    focus?: {
+        x: number;
+        y: number;
+    };
+}
+/**
+ * The transform that shows all of `content` centred in `viewport`. Content is
+ * only ever shrunk to fit, never enlarged past its natural size. With
+ * `fit.minScale` it is not shrunk past that either: it then overflows, centred
+ * on `fit.focus`, and the rest is reached by panning. An unmeasured
+ * (zero-sized) viewport yields the identity transform.
+ */
+export declare function fitTransform(content: PanZoomSize, viewport: PanZoomSize, limits?: PanZoomLimits, fit?: FitOptions): PanZoomTransform;
+export interface UsePanZoomOptions {
+    /** When false the hook is inert: no listeners, identity transform. */
+    enabled: boolean;
+    /** Natural (unscaled) size of the content being panned and zoomed. */
+    contentWidth: number;
+    contentHeight: number;
+    /** How the content opens, and what `reset()` returns to. `fit()` ignores it and shows everything. */
+    opening?: FitOptions;
+}
+export interface PanZoomViewportHandlers {
+    onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onPointerMove: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onPointerUp: (event: ReactPointerEvent<HTMLDivElement>) => void;
+    onPointerCancel: (event: ReactPointerEvent<HTMLDivElement>) => void;
+}
+export interface PanZoom {
+    /** Attach to the clipping viewport element. */
+    viewportRef: RefObject<HTMLDivElement | null>;
+    /** Attach to the content element, so anything overflowing its box is fitted too. */
+    contentRef: RefObject<HTMLDivElement | null>;
+    /** Spread onto the viewport element; empty when disabled. */
+    handlers: Partial<PanZoomViewportHandlers>;
+    /** Apply to the content as `translate(x, y) scale(scale)` with a top-left transform origin. */
+    transform: PanZoomTransform;
+    panning: boolean;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    /** Shows everything, however small. */
+    fit: () => void;
+    /** Returns to how the content opened: see `UsePanZoomOptions.opening`. */
+    reset: () => void;
+}
+/**
+ * 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
+ * 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;
+//# sourceMappingURL=use-pan-zoom.d.ts.map

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

@@ -0,0 +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"}