@crewlethq/ui 0.2.0 → 0.4.0

package/dist/chunk-CMEE37QJ.js

@@ -0,0 +1,628 @@
+import { LayerNodeBridge } from './chunk-53DVJCVW.js';
+import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-7RPGY3JE.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { Button } from './chunk-BZYDZBAN.js';
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Canvas-Q6JETCWR.css';
+import { useId, useRef, useState, useCallback, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
+import { ZoomOutGlyph, ZoomInGlyph, FitScreenGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/Canvas/geometry.ts
+var IDENTITY_VIEW = { x: 0, y: 0, k: 1 };
+var CANVAS_MIN_ZOOM = 0.25;
+var CANVAS_MAX_ZOOM = 2;
+var CANVAS_ZOOM_CEILING = 8;
+var CANVAS_FOCUS_CONTEXT = 3;
+var CANVAS_COMPOSE_CONTEXT = 1.5;
+var CANVAS_FIT_MAX_ZOOM = 1;
+var CANVAS_ZOOM_STEP = 1.2;
+var CANVAS_WHEEL_ZOOM_PER_PIXEL = Math.log2(CANVAS_ZOOM_STEP) / 100;
+var CANVAS_WHEEL_LINE_PX = 16;
+var CANVAS_PAN_MARGIN = 48;
+var CANVAS_FIT_PADDING = 24;
+var CANVAS_REVEAL_PADDING = 24;
+var CANVAS_PAN_STEP = 64;
+var CANVAS_TAP_SLOP = { mouse: 4, pen: 4, touch: 10 };
+var CANVAS_ZOOM_LIMITS = { min: CANVAS_MIN_ZOOM, max: CANVAS_MAX_ZOOM };
+function zoomLimits(content, viewport, largestItem, padding = CANVAS_FIT_PADDING) {
+  const measured = content !== null && viewport.width > 0 && viewport.height > 0;
+  const min = measured ? fitView(content, viewport, padding).k : CANVAS_MIN_ZOOM;
+  const room = viewport.width - 2 * padding;
+  const wanted = largestItem !== void 0 && largestItem > 0 && room > 0 ? room / largestItem : CANVAS_MAX_ZOOM;
+  const max = Math.min(CANVAS_ZOOM_CEILING, Math.max(CANVAS_MAX_ZOOM, wanted));
+  return { min: Math.min(min, max), max };
+}
+function clampZoom(k, limits = CANVAS_ZOOM_LIMITS) {
+  return Math.min(limits.max, Math.max(limits.min, k));
+}
+function toScreen(view, point) {
+  return { x: point.x * view.k + view.x, y: point.y * view.k + view.y };
+}
+function toWorld(view, point) {
+  return { x: (point.x - view.x) / view.k, y: (point.y - view.y) / view.k };
+}
+function screenRect(view, rect) {
+  const at = toScreen(view, rect);
+  return { x: at.x, y: at.y, width: rect.width * view.k, height: rect.height * view.k };
+}
+function panBy(view, dx, dy) {
+  return { x: view.x + dx, y: view.y + dy, k: view.k };
+}
+function zoomAt(view, factor, focus, limits = CANVAS_ZOOM_LIMITS) {
+  const k = clampZoom(view.k * factor, limits);
+  const ratio = k / view.k;
+  return {
+    x: focus.x - (focus.x - view.x) * ratio,
+    y: focus.y - (focus.y - view.y) * ratio,
+    k
+  };
+}
+function clampPan(view, content, viewport, margin = CANVAS_PAN_MARGIN) {
+  const axis = (offset, start, length, room) => {
+    const drawn = length * view.k;
+    const kept = Math.max(0, Math.min(margin, drawn, room));
+    const lowest = kept - (start + length) * view.k;
+    const highest = room - kept - start * view.k;
+    return Math.min(highest, Math.max(lowest, offset));
+  };
+  return {
+    x: axis(view.x, content.x, content.width, viewport.width),
+    y: axis(view.y, content.y, content.height, viewport.height),
+    k: view.k
+  };
+}
+function fitView(content, viewport, padding = CANVAS_FIT_PADDING) {
+  if (viewport.width <= 0 || viewport.height <= 0) return IDENTITY_VIEW;
+  const roomX = Math.max(0, viewport.width - 2 * padding);
+  const roomY = Math.max(0, viewport.height - 2 * padding);
+  const scaleX = content.width > 0 ? roomX / content.width : Infinity;
+  const scaleY = content.height > 0 ? roomY / content.height : Infinity;
+  const k = Math.max(CANVAS_MIN_ZOOM, Math.min(CANVAS_FIT_MAX_ZOOM, scaleX, scaleY));
+  const drawnHeight = content.height * k;
+  const x = (viewport.width - content.width * k) / 2 - content.x * k;
+  const y = drawnHeight <= roomY ? (viewport.height - drawnHeight) / 2 - content.y * k : padding - content.y * k;
+  return { x, y, k };
+}
+function revealView(view, target, viewport, padding = CANVAS_REVEAL_PADDING) {
+  const drawn = screenRect(view, target);
+  const axis = (offset, start, length, room) => {
+    const low = padding;
+    const high = room - padding;
+    if (length > high - low) return offset + (low - start);
+    if (start < low) return offset + (low - start);
+    if (start + length > high) return offset - (start + length - high);
+    return offset;
+  };
+  return {
+    x: axis(view.x, drawn.x, drawn.width, viewport.width),
+    y: axis(view.y, drawn.y, drawn.height, viewport.height),
+    k: view.k
+  };
+}
+function anchorView(view, before, after) {
+  return panBy(view, (before.x - after.x) * view.k, (before.y - after.y) * view.k);
+}
+function pinchView(start, a, b, limits = CANVAS_ZOOM_LIMITS) {
+  const spread = (p, q) => Math.hypot(p.x - q.x, p.y - q.y);
+  const was = spread(start.a, start.b);
+  const factor = was < 1 ? 1 : spread(a, b) / was;
+  const k = clampZoom(start.view.k * factor, limits);
+  const from = { x: (start.a.x + start.b.x) / 2, y: (start.a.y + start.b.y) / 2 };
+  const to = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+  const world = toWorld(start.view, from);
+  return { x: to.x - world.x * k, y: to.y - world.y * k, k };
+}
+function wheelPixels(event, pageHeight) {
+  const unit = event.deltaMode === 1 ? CANVAS_WHEEL_LINE_PX : event.deltaMode === 2 ? pageHeight : 1;
+  const dx = event.deltaX * unit;
+  const dy = event.deltaY * unit;
+  if (event.shiftKey && dx === 0) return { x: dy, y: 0 };
+  return { x: dx, y: dy };
+}
+function wheelZoomFactor(dy) {
+  return Math.pow(2, -dy * CANVAS_WHEEL_ZOOM_PER_PIXEL);
+}
+function beyondSlop(a, b, pointerType) {
+  const slop = CANVAS_TAP_SLOP[pointerType] ?? CANVAS_TAP_SLOP.mouse;
+  return Math.hypot(b.x - a.x, b.y - a.y) > slop;
+}
+function regionView(region, viewport, limits = CANVAS_ZOOM_LIMITS, context = CANVAS_FOCUS_CONTEXT, ceiling = Infinity) {
+  if (viewport.width <= 0 || viewport.height <= 0 || region.width <= 0 || region.height <= 0) {
+    return IDENTITY_VIEW;
+  }
+  const byWidth = viewport.width / (region.width * context);
+  const byHeight = viewport.height / (region.height * context);
+  const k = clampZoom(Math.min(byWidth, byHeight, ceiling), limits);
+  return {
+    x: viewport.width / 2 - (region.x + region.width / 2) * k,
+    y: viewport.height / 2 - (region.y + region.height / 2) * k,
+    k
+  };
+}
+var LABELS = {
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit to view",
+  zoom: (percent) => `Zoom is ${percent} percent. Set a zoom level`,
+  zoomLevel: "Zoom level, percent",
+  done: "Done",
+  keys: "Plus and minus zoom this canvas and zero fits everything in view. With the canvas itself focused, the arrow keys pan it."
+};
+var INTERACTIVE = "button, a[href], input, select, textarea, [contenteditable='true'], label";
+var TYPING = "input, textarea, select, [contenteditable='true']";
+function Canvas({
+  label,
+  content,
+  children,
+  overlay,
+  controls = true,
+  controlsPlacement = "bottom-right",
+  controlsExtra,
+  controlsBelow,
+  hint,
+  largestItemWidth,
+  dimmed = false,
+  touch = true,
+  labels,
+  onReady,
+  ref,
+  className
+}) {
+  const helpId = useId();
+  const text = { ...LABELS, ...labels };
+  const viewport = useRef(null);
+  const root = useRef(null);
+  const [layer, setLayer] = useState(null);
+  const [view, setView] = useState(IDENTITY_VIEW);
+  const [animate, setAnimate] = useState(false);
+  const [ready, setReady] = useState(false);
+  const [touchActive, setTouchActive] = useState(false);
+  const [panning, setPanning] = useState(false);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const viewNow = useRef(view);
+  const sizeNow = useRef(size);
+  const contentNow = useRef(content);
+  const touchNow = useRef(touchActive);
+  contentNow.current = content;
+  touchNow.current = touchActive;
+  sizeNow.current = size;
+  const limits = zoomLimits(content, size, largestItemWidth);
+  const limitsNow = useRef(limits);
+  limitsNow.current = limits;
+  const left = useRef(null);
+  const apply = useCallback((next, eased) => {
+    const bounds = contentNow.current;
+    const clamped = bounds ? clampPan(next, bounds, sizeNow.current) : next;
+    const was = viewNow.current;
+    if (clamped.x === was.x && clamped.y === was.y && clamped.k === was.k) return;
+    if (eased !== void 0) setAnimate(eased);
+    viewNow.current = clamped;
+    setView(clamped);
+  }, []);
+  useLayoutEffect(() => {
+    const el = viewport.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver((entries) => {
+      const box = entries[entries.length - 1]?.contentRect;
+      if (box) setSize({ width: box.width, height: box.height });
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const announceReady = useRef(onReady);
+  announceReady.current = onReady;
+  useLayoutEffect(() => {
+    if (ready || !content || size.width <= 0 || size.height <= 0) return;
+    const first = fitView(content, size);
+    viewNow.current = first;
+    setView(first);
+    setReady(true);
+    announceReady.current?.();
+  }, [ready, content, size]);
+  useLayoutEffect(() => {
+    if (ready) apply(viewNow.current);
+  }, [ready, size, content, apply]);
+  useLayoutEffect(() => {
+    layer?.dispatchEvent(new CustomEvent(LAYER_REPOSITION_EVENT, { detail: view }));
+  }, [view, layer]);
+  const settled = (event) => {
+    if (event.target !== event.currentTarget || event.propertyName !== "transform") return;
+    setAnimate(false);
+    layer?.dispatchEvent(new CustomEvent(LAYER_REPOSITION_EVENT, { detail: viewNow.current }));
+  };
+  useImperativeHandle(
+    ref,
+    () => ({
+      fit: () => {
+        const bounds = contentNow.current;
+        if (bounds) apply(fitView(bounds, sizeNow.current), "near");
+      },
+      zoomBy: (factor) => {
+        const { width, height } = sizeNow.current;
+        apply(zoomAt(viewNow.current, factor, { x: width / 2, y: height / 2 }, limitsNow.current), "near");
+      },
+      reveal: (target) => {
+        const next = revealView(viewNow.current, target, sizeNow.current);
+        if (next.x !== viewNow.current.x || next.y !== viewNow.current.y) apply(next, "near");
+      },
+      anchor: (before, after) => apply(anchorView(viewNow.current, before, after), false),
+      rememberView: () => {
+        left.current ??= viewNow.current;
+      },
+      focusRegion: (target, context, ceiling) => {
+        left.current ??= viewNow.current;
+        apply(regionView(target, sizeNow.current, limitsNow.current, context, ceiling), "travel");
+      },
+      restoreView: () => {
+        const was = left.current;
+        if (!was) return;
+        left.current = null;
+        apply(was, "travel");
+      },
+      screenRect: (target) => screenRect(viewNow.current, target)
+    }),
+    [apply]
+  );
+  useEffect(() => {
+    const el = viewport.current;
+    if (!el) return;
+    function onWheel(event) {
+      if (!contentNow.current || !el) return;
+      const rect = el.getBoundingClientRect();
+      const moved = wheelPixels(event, sizeNow.current.height);
+      if (event.ctrlKey || event.metaKey) {
+        event.preventDefault();
+        const focus = { x: event.clientX - rect.left, y: event.clientY - rect.top };
+        apply(zoomAt(viewNow.current, wheelZoomFactor(moved.y), focus, limitsNow.current), false);
+        return;
+      }
+      if (!el.contains(document.activeElement)) return;
+      event.preventDefault();
+      apply(panBy(viewNow.current, -moved.x, -moved.y), false);
+    }
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [apply]);
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const gesture = useRef(null);
+  const local = useCallback((event) => {
+    const rect = viewport.current?.getBoundingClientRect();
+    return { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0) };
+  }, []);
+  const endGesture = useCallback(() => {
+    gesture.current = null;
+    setPanning(false);
+  }, []);
+  const capture = useCallback((id) => {
+    const el = viewport.current;
+    if (!el || typeof el.setPointerCapture !== "function") return;
+    try {
+      el.setPointerCapture(id);
+    } catch {
+    }
+  }, []);
+  const touchAllowed = useRef(touch);
+  touchAllowed.current = touch;
+  useEffect(() => {
+    function onMove(event) {
+      if (!pointers.current.has(event.pointerId)) return;
+      const at = local(event);
+      pointers.current.set(event.pointerId, at);
+      const current = gesture.current;
+      if (!current) return;
+      if (current.kind === "pinch") {
+        const a = pointers.current.get(current.ids[0]);
+        const b = pointers.current.get(current.ids[1]);
+        if (a && b) apply(pinchView(current.start, a, b, limitsNow.current), false);
+        return;
+      }
+      if (current.id !== event.pointerId) return;
+      if (!current.dragging) {
+        if (!beyondSlop(current.start, at, current.type)) return;
+        if (current.type === "touch" && !touchNow.current) {
+          endGesture();
+          return;
+        }
+        current.dragging = true;
+        setPanning(true);
+        capture(current.id);
+        window.getSelection?.()?.removeAllRanges();
+      }
+      apply(panBy(current.view, at.x - current.start.x, at.y - current.start.y), false);
+    }
+    function onUp(event) {
+      if (!pointers.current.delete(event.pointerId)) return;
+      const current = gesture.current;
+      if (current?.kind === "press" && current.id === event.pointerId) {
+        if (current.dragging) {
+          if (viewport.current) swallowNextClick(viewport.current);
+        } else if (current.type === "touch" && touchAllowed.current && !touchNow.current && event.type === "pointerup") {
+          setTouchActive(true);
+        }
+        endGesture();
+      } else if (current?.kind === "pinch") {
+        endGesture();
+      }
+    }
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
+    };
+  }, [apply, capture, endGesture, local]);
+  function onPointerDown(event) {
+    if (!ready) return;
+    if (event.pointerType === "mouse" && event.button !== 0) return;
+    const target = event.target instanceof Element ? event.target : null;
+    if (target?.closest(INTERACTIVE)) return;
+    const at = local(event);
+    pointers.current.set(event.pointerId, at);
+    const touches = [...pointers.current.entries()];
+    if (event.pointerType === "touch" && touches.length >= 2) {
+      const [a, b] = touches.slice(-2);
+      capture(a[0]);
+      capture(b[0]);
+      gesture.current = {
+        kind: "pinch",
+        ids: [a[0], b[0]],
+        start: { view: viewNow.current, a: a[1], b: b[1] }
+      };
+      setPanning(true);
+      return;
+    }
+    gesture.current = {
+      kind: "press",
+      id: event.pointerId,
+      type: event.pointerType || "mouse",
+      start: at,
+      view: viewNow.current,
+      dragging: false
+    };
+  }
+  useEffect(() => {
+    if (!touchActive) return;
+    function onOutside(event) {
+      if (event.target instanceof Node && !root.current?.contains(event.target)) setTouchActive(false);
+    }
+    document.addEventListener("pointerdown", onOutside, true);
+    return () => document.removeEventListener("pointerdown", onOutside, true);
+  }, [touchActive]);
+  useEffect(() => {
+    if (!touch) setTouchActive(false);
+  }, [touch]);
+  function onKeyDown(event) {
+    if (!ready) return;
+    const onViewport = event.target === event.currentTarget;
+    const target = event.target instanceof Element ? event.target : null;
+    if (target !== null && target.closest(TYPING) !== null) return;
+    const mod = event.ctrlKey || event.metaKey;
+    const { width, height } = sizeNow.current;
+    const centre = { x: width / 2, y: height / 2 };
+    let handled = true;
+    if (event.key === "+" || mod && event.key === "=") {
+      apply(zoomAt(viewNow.current, CANVAS_ZOOM_STEP, centre, limitsNow.current), "near");
+    } else if (event.key === "-") {
+      apply(zoomAt(viewNow.current, 1 / CANVAS_ZOOM_STEP, centre, limitsNow.current), "near");
+    } else if (event.key === "0") {
+      if (content) apply(fitView(content, sizeNow.current), "near");
+    } else if (!onViewport) {
+      handled = false;
+    } else if (!mod && !event.altKey && event.key.startsWith("Arrow")) {
+      const step = {
+        ArrowLeft: [CANVAS_PAN_STEP, 0],
+        ArrowRight: [-CANVAS_PAN_STEP, 0],
+        ArrowUp: [0, CANVAS_PAN_STEP],
+        ArrowDown: [0, -CANVAS_PAN_STEP]
+      }[event.key];
+      if (step) apply(panBy(viewNow.current, step[0], step[1]), false);
+      else handled = false;
+    } else {
+      handled = false;
+    }
+    if (handled) event.preventDefault();
+  }
+  function onScroll() {
+    const el = viewport.current;
+    if (!el || el.scrollLeft === 0 && el.scrollTop === 0) return;
+    const dx = el.scrollLeft;
+    const dy = el.scrollTop;
+    el.scrollLeft = 0;
+    el.scrollTop = 0;
+    apply(panBy(viewNow.current, -dx, -dy), false);
+  }
+  const centreZoom = (factor) => {
+    const { width, height } = sizeNow.current;
+    apply(zoomAt(viewNow.current, factor, { x: width / 2, y: height / 2 }, limitsNow.current), "near");
+  };
+  const zoomToPercent = (percent) => {
+    if (!Number.isFinite(percent) || percent <= 0) return;
+    centreZoom(percent / 100 / viewNow.current.k);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-canvas", className),
+      ref: root,
+      "data-dimmed": dimmed,
+      "data-ready": ready,
+      "data-animate": animate === false ? "false" : animate,
+      "data-panning": panning,
+      "data-touch-active": touchActive,
+      children: [
+        /* @__PURE__ */ jsxs(LayerHost, { className: "crewlet-canvas__layer", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "crewlet-canvas__viewport",
+              ref: viewport,
+              tabIndex: 0,
+              role: "group",
+              "aria-roledescription": "canvas",
+              "aria-label": label,
+              "aria-describedby": helpId,
+              onPointerDown,
+              onKeyDown,
+              onScroll,
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "crewlet-canvas__world",
+                  style: { transform: `translate(${view.x}px, ${view.y}px) scale(${view.k})` },
+                  onTransitionEnd: settled,
+                  children
+                }
+              )
+            }
+          ),
+          overlay ? /* @__PURE__ */ jsx("div", { className: "crewlet-canvas__overlay", children: overlay }) : null,
+          /* @__PURE__ */ jsx(LayerNodeBridge, { onNode: setLayer })
+        ] }),
+        (controls || touchActive || controlsBelow || hint) && /*
+         * ONE GROUP IN ONE CORNER, as a column of bars: the zoom bar, then
+         * whatever the caller stacks under it. The console chart's own
+         * arrangement, and the reason it is a column rather than three things
+         * the page places itself is that all of them act on the canvas, so
+         * they belong beside the canvas and beside each other.
+         */
+        /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas__controls", "data-placement": controlsPlacement, children: [
+          (controls || touchActive) && /* @__PURE__ */ jsxs("div", { className: "crewlet-canvas__bar", children: [
+            touchActive && /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => setTouchActive(false), children: text.done }),
+            controls && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  label: text.zoomOut,
+                  icon: /* @__PURE__ */ jsx(ZoomOutGlyph, {}),
+                  onClick: () => centreZoom(1 / CANVAS_ZOOM_STEP),
+                  disabled: !ready
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ZoomReadout,
+                {
+                  zoom: view.k,
+                  onZoom: zoomToPercent,
+                  label: text.zoom,
+                  fieldLabel: text.zoomLevel,
+                  disabled: !ready
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  label: text.zoomIn,
+                  icon: /* @__PURE__ */ jsx(ZoomInGlyph, {}),
+                  onClick: () => centreZoom(CANVAS_ZOOM_STEP),
+                  disabled: !ready
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "sm",
+                  label: text.fit,
+                  icon: /* @__PURE__ */ jsx(FitScreenGlyph, {}),
+                  onClick: () => content && apply(fitView(content, sizeNow.current), "near"),
+                  disabled: !ready
+                }
+              ),
+              controlsExtra
+            ] })
+          ] }),
+          hint === void 0 ? null : /* @__PURE__ */ jsx("div", { className: "crewlet-canvas__hint", role: "status", children: hint }),
+          controlsBelow
+        ] }),
+        /* @__PURE__ */ jsx(VisuallyHidden, { id: helpId, children: text.keys })
+      ]
+    }
+  );
+}
+function ZoomReadout({
+  zoom,
+  onZoom,
+  label,
+  fieldLabel,
+  disabled
+}) {
+  const percent = Math.round(zoom * 100);
+  const [typing, setTyping] = useState(false);
+  const [draft, setDraft] = useState("");
+  const button = useRef(null);
+  const field = useRef(null);
+  const returning = useRef(false);
+  useLayoutEffect(() => {
+    if (typing) {
+      field.current?.select();
+      field.current?.focus();
+      return;
+    }
+    if (!returning.current) return;
+    returning.current = false;
+    button.current?.focus();
+  }, [typing]);
+  const close = (apply) => {
+    returning.current = true;
+    setTyping(false);
+    if (apply) onZoom(Number.parseInt(draft, 10));
+  };
+  if (typing) {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "crewlet-canvas__zoom-field",
+        ref: field,
+        "aria-label": fieldLabel,
+        inputMode: "numeric",
+        value: draft,
+        onChange: (event) => setDraft(event.target.value.replace(/[^0-9]/g, "")),
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            close(true);
+          } else if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            close(false);
+          }
+        },
+        onBlur: () => setTyping(false)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      ref: button,
+      className: "crewlet-canvas__zoom",
+      "aria-label": label(percent),
+      disabled,
+      onClick: () => {
+        setDraft(String(percent));
+        setTyping(true);
+      },
+      children: [
+        percent,
+        "%"
+      ]
+    }
+  );
+}
+function swallowNextClick(within) {
+  const swallow = (event) => {
+    if (!(event.target instanceof Node) || !within.contains(event.target)) return;
+    event.preventDefault();
+    event.stopPropagation();
+  };
+  window.addEventListener("click", swallow, { capture: true, once: true });
+  setTimeout(() => window.removeEventListener("click", swallow, { capture: true }), 0);
+}
+
+export { CANVAS_COMPOSE_CONTEXT, CANVAS_FIT_MAX_ZOOM, CANVAS_FIT_PADDING, CANVAS_FOCUS_CONTEXT, CANVAS_MAX_ZOOM, CANVAS_MIN_ZOOM, CANVAS_PAN_MARGIN, CANVAS_PAN_STEP, CANVAS_REVEAL_PADDING, CANVAS_TAP_SLOP, CANVAS_WHEEL_LINE_PX, CANVAS_WHEEL_ZOOM_PER_PIXEL, CANVAS_ZOOM_CEILING, CANVAS_ZOOM_LIMITS, CANVAS_ZOOM_STEP, Canvas, IDENTITY_VIEW, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits };