@crewlethq/ui 0.31.0 → 0.32.0

package/dist/{chunk-OJ45PPCV.js → chunk-OTN35CI4.js}

@@ -1,13 +1,29 @@
 import { LayerNodeBridge } from './chunk-VYOKRN2I.js';
+import { Kbd } from './chunk-SMBKXWML.js';
+import { Tooltip } from './chunk-QWOPX2MN.js';
 import { LAYER_REPOSITION_EVENT, LayerHost } from './chunk-HMPFGIWM.js';
 import { Button } from './chunk-OG6CL3EB.js';
 import { IconButton } from './chunk-4FQT6ZAY.js';
 import { VisuallyHidden } from './chunk-BZFWDIV6.js';
 import { cx } from './chunk-ODEQTPFM.js';
-import './Canvas-YVXHMWLN.css';
+import './Canvas-LRVNW7XN.css';
 import { useId, useRef, useState, useCallback, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
-import { ZoomOutGlyph, ZoomInGlyph, FullscreenGlyph } from '@crewlethq/icons/glyphs';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { CURSORS, ZoomOutGlyph, ZoomInGlyph, FullscreenGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function ShortcutTip({ label, keys, placement = "top", children }) {
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      placement,
+      content: /* @__PURE__ */ jsxs("span", { className: "crewlet-shortcut-tip", children: [
+        label,
+        /* @__PURE__ */ jsx(Kbd, { keys, subtle: true })
+      ] }),
+      children
+    }
+  );
+}
 
 // src/Canvas/geometry.ts
 var IDENTITY_VIEW = { x: 0, y: 0, k: 1 };
@@ -26,9 +42,9 @@ 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) {
+function zoomLimits(content, viewport, largestItem, padding = CANVAS_FIT_PADDING, floor = CANVAS_MIN_ZOOM) {
   const measured = content !== null && viewport.width > 0 && viewport.height > 0;
-  const min = measured ? fitView(content, viewport, padding).k : CANVAS_MIN_ZOOM;
+  const min = measured ? fitView(content, viewport, padding, floor).k : floor;
   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));
@@ -73,13 +89,13 @@ function clampPan(view, content, viewport, margin = CANVAS_PAN_MARGIN) {
     k: view.k
   };
 }
-function fitView(content, viewport, padding = CANVAS_FIT_PADDING) {
+function fitView(content, viewport, padding = CANVAS_FIT_PADDING, floor = CANVAS_MIN_ZOOM) {
   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 k = Math.max(floor, 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;
@@ -145,10 +161,11 @@ var LABELS = {
   zoomIn: "Zoom in",
   zoomOut: "Zoom out",
   fit: "Fit to view",
+  actualSize: "Zoom to 100%",
   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."
+  keys: "Plus and minus zoom this canvas, zero or Shift 1 fits everything in view, and Shift 0 shows it at actual size. 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']";
@@ -160,11 +177,15 @@ function Canvas({
   controls = true,
   controlsPlacement = "bottom-right",
   controlsExtra,
+  controlsActualSize = false,
   controlsBelow,
   hint,
   largestItemWidth,
   dimmed = false,
   ground = "plain",
+  minZoom = CANVAS_MIN_ZOOM,
+  cursor = "hand",
+  refitOnResize = false,
   touch = true,
   labels,
   onReady,
@@ -190,10 +211,17 @@ function Canvas({
   contentNow.current = content;
   touchNow.current = touchActive;
   sizeNow.current = size;
-  const limits = zoomLimits(content, size, largestItemWidth);
+  const limits = zoomLimits(content, size, largestItemWidth, CANVAS_FIT_PADDING, minZoom);
   const limitsNow = useRef(limits);
   limitsNow.current = limits;
+  const floorNow = useRef(minZoom);
+  floorNow.current = minZoom;
+  const fitOf = useCallback(
+    (bounds, viewportSize = sizeNow.current) => fitView(bounds, viewportSize, CANVAS_FIT_PADDING, floorNow.current),
+    []
+  );
   const left = useRef(null);
+  const fitted = useRef(null);
   const apply = useCallback((next, eased) => {
     const bounds = contentNow.current;
     const clamped = bounds ? clampPan(next, bounds, sizeNow.current) : next;
@@ -203,6 +231,13 @@ function Canvas({
     viewNow.current = clamped;
     setView(clamped);
   }, []);
+  const fitNow = useCallback(
+    (bounds) => {
+      apply(fitOf(bounds), "near");
+      fitted.current = viewNow.current;
+    },
+    [apply, fitOf]
+  );
   useLayoutEffect(() => {
     const el = viewport.current;
     if (!el || typeof ResizeObserver === "undefined") return;
@@ -217,15 +252,29 @@ function Canvas({
   announceReady.current = onReady;
   useLayoutEffect(() => {
     if (ready || !content || size.width <= 0 || size.height <= 0) return;
-    const first = fitView(content, size);
+    const first = fitOf(content, size);
     viewNow.current = first;
+    fitted.current = first;
     setView(first);
     setReady(true);
     announceReady.current?.();
-  }, [ready, content, size]);
+  }, [ready, content, size, fitOf]);
+  const sizeSeen = useRef(size);
   useLayoutEffect(() => {
-    if (ready) apply(viewNow.current);
-  }, [ready, size, content, apply]);
+    if (!ready) return;
+    const resized = sizeSeen.current.width !== size.width || sizeSeen.current.height !== size.height;
+    sizeSeen.current = size;
+    const was = fitted.current;
+    const now = viewNow.current;
+    const untouched = was !== null && was.x === now.x && was.y === now.y && was.k === now.k;
+    if (refitOnResize && resized && untouched && content) {
+      apply(fitOf(content), false);
+      fitted.current = viewNow.current;
+    } else {
+      apply(now);
+      if (untouched) fitted.current = viewNow.current;
+    }
+  }, [ready, size, content, apply, fitOf, refitOnResize]);
   const reportView = useRef(onViewChange);
   reportView.current = onViewChange;
   useLayoutEffect(() => {
@@ -239,17 +288,26 @@ function Canvas({
     setAnimate(false);
     layer?.dispatchEvent(new CustomEvent(LAYER_REPOSITION_EVENT, { detail: viewNow.current }));
   };
+  const local = useCallback((event) => {
+    const rect = viewport.current?.getBoundingClientRect();
+    return { x: event.clientX - (rect?.left ?? 0), y: event.clientY - (rect?.top ?? 0) };
+  }, []);
   useImperativeHandle(
     ref,
     () => ({
       fit: () => {
         const bounds = contentNow.current;
-        if (bounds) apply(fitView(bounds, sizeNow.current), "near");
+        if (bounds) fitNow(bounds);
       },
       zoomBy: (factor) => {
         const { width, height } = sizeNow.current;
         apply(zoomAt(viewNow.current, factor, { x: width / 2, y: height / 2 }, limitsNow.current), "near");
       },
+      zoomTo: (scale) => {
+        const { width, height } = sizeNow.current;
+        const factor = scale / viewNow.current.k;
+        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");
@@ -268,9 +326,10 @@ function Canvas({
         left.current = null;
         apply(was, "travel");
       },
-      screenRect: (target) => screenRect(viewNow.current, target)
+      screenRect: (target) => screenRect(viewNow.current, target),
+      worldAt: (client) => toWorld(viewNow.current, local({ clientX: client.x, clientY: client.y }))
     }),
-    [apply]
+    [apply, fitNow, local]
   );
   useEffect(() => {
     const el = viewport.current;
@@ -294,10 +353,6 @@ function Canvas({
   }, [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);
@@ -411,12 +466,17 @@ function Canvas({
     const { width, height } = sizeNow.current;
     const centre = { x: width / 2, y: height / 2 };
     let handled = true;
-    if (event.key === "+" || mod && event.key === "=") {
+    const shiftDigit = event.shiftKey && !mod && !event.altKey ? event.code : "";
+    if (shiftDigit === "Digit0") {
+      centreZoom(1 / viewNow.current.k);
+    } else if (shiftDigit === "Digit1") {
+      if (content) fitNow(content);
+    } else 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");
+      if (content) fitNow(content);
     } else if (!onViewport) {
       handled = false;
     } else if (!mod && !event.altKey && event.key.startsWith("Arrow")) {
@@ -455,6 +515,8 @@ function Canvas({
     {
       className: cx("crewlet-canvas", className),
       ref: root,
+      style: CURSOR_PROPERTIES,
+      "data-cursor": cursor,
       "data-dimmed": dimmed,
       "data-ground": ground,
       "data-ready": ready,
@@ -501,16 +563,17 @@ function Canvas({
           (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(
+              /* @__PURE__ */ jsx(ShortcutTip, { label: text.zoomOut, keys: ["-"], children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "sm",
                   label: text.zoomOut,
+                  title: "",
                   icon: /* @__PURE__ */ jsx(ZoomOutGlyph, {}),
                   onClick: () => centreZoom(1 / CANVAS_ZOOM_STEP),
                   disabled: !ready
                 }
-              ),
+              ) }),
               /* @__PURE__ */ jsx(
                 ZoomReadout,
                 {
@@ -521,26 +584,39 @@ function Canvas({
                   disabled: !ready
                 }
               ),
-              /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(ShortcutTip, { label: text.zoomIn, keys: ["+"], children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "sm",
                   label: text.zoomIn,
+                  title: "",
                   icon: /* @__PURE__ */ jsx(ZoomInGlyph, {}),
                   onClick: () => centreZoom(CANVAS_ZOOM_STEP),
                   disabled: !ready
                 }
-              ),
-              /* @__PURE__ */ jsx(
+              ) }),
+              controlsActualSize && /* @__PURE__ */ jsx(ShortcutTip, { label: text.actualSize, keys: ["Shift", "0"], children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "crewlet-canvas__zoom crewlet-canvas__actual",
+                  "aria-label": text.actualSize,
+                  onClick: () => centreZoom(1 / viewNow.current.k),
+                  disabled: !ready,
+                  children: "1:1"
+                }
+              ) }),
+              /* @__PURE__ */ jsx(ShortcutTip, { label: text.fit, keys: ["Shift", "1"], children: /* @__PURE__ */ jsx(
                 IconButton,
                 {
                   size: "sm",
                   label: text.fit,
+                  title: "",
                   icon: /* @__PURE__ */ jsx(FullscreenGlyph, {}),
-                  onClick: () => content && apply(fitView(content, sizeNow.current), "near"),
+                  onClick: () => content && fitNow(content),
                   disabled: !ready
                 }
-              ),
+              ) }),
               controlsExtra
             ] })
           ] }),
@@ -552,6 +628,13 @@ function Canvas({
     }
   );
 }
+var CURSOR_PROPERTIES = {
+  "--crewlet-canvas-cursor-pointer": CURSORS.pointer,
+  "--crewlet-canvas-cursor-hand": CURSORS.hand,
+  "--crewlet-canvas-cursor-grabbing": CURSORS.grabbing,
+  "--crewlet-canvas-cursor-crosshair": CURSORS.crosshair,
+  "--crewlet-canvas-cursor-text": CURSORS.text
+};
 function ZoomReadout({
   zoom,
   onZoom,
@@ -633,4 +716,4 @@ function swallowNextClick(within) {
   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 };
+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, ShortcutTip, anchorView, beyondSlop, clampPan, clampZoom, fitView, panBy, pinchView, regionView, revealView, screenRect, toScreen, toWorld, wheelPixels, wheelZoomFactor, zoomAt, zoomLimits };