@cratis/components 3.4.0 → 3.5.1

package/dist/esm/Canvas/shapes/Note/Note.js

@@ -0,0 +1,237 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef, useState, useEffect, useCallback, useLayoutEffect } from 'react';
+import { whenNoteFontReady } from './noteFont.js';
+
+const MIN_SIZE = 80;
+// How small the fitted text is allowed to get. Notes live on a canvas that zooms, so text too small to
+// read at 1:1 is still perfectly legible one zoom step in — shrinking is a far better answer than
+// hiding the text behind an affordance, and the floor is set low enough to say so. Only text that will
+// not fit even at this size falls back to the expand affordance.
+const MIN_FONT_SIZE = 4;
+const MAX_FONT_SIZE = 120;
+const PADDING = 12;
+const LINE_HEIGHT_RATIO = 1.4;
+function textFitsAtSize(measurer, text, fontSize, availableWidth, availableHeight) {
+    measurer.style.width = `${availableWidth}px`;
+    measurer.style.fontSize = `${fontSize}px`;
+    measurer.style.lineHeight = `${LINE_HEIGHT_RATIO}`;
+    measurer.textContent = text;
+    return measurer.scrollHeight <= availableHeight;
+}
+function findOptimalFontSize(measurer, text, width, height) {
+    if (!(text ?? '').trim())
+        return { fontSize: Math.min(MAX_FONT_SIZE, Math.min(width, height) * 0.4), overflows: false };
+    const availableWidth = width - PADDING * 2;
+    const availableHeight = height - PADDING * 2;
+    let low = MIN_FONT_SIZE;
+    let high = MAX_FONT_SIZE;
+    // Quick check: if the readability floor doesn't fit, stop shrinking and flag the overflow instead.
+    if (!textFitsAtSize(measurer, text, low, availableWidth, availableHeight)) {
+        return { fontSize: MIN_FONT_SIZE, overflows: true };
+    }
+    // Binary search for the largest fitting font size
+    while (high - low > 0.5) {
+        const mid = (low + high) / 2;
+        if (textFitsAtSize(measurer, text, mid, availableWidth, availableHeight)) {
+            low = mid;
+        }
+        else {
+            high = mid;
+        }
+    }
+    return { fontSize: Math.floor(low), overflows: false };
+}
+const HANDLE_KEYS = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+const HANDLE_POSITIONS = {
+    nw: { top: -4, left: -4 },
+    n: { top: -4, left: '50%', transform: 'translateX(-50%)' },
+    ne: { top: -4, right: -4 },
+    e: { top: '50%', right: -4, transform: 'translateY(-50%)' },
+    se: { bottom: -4, right: -4 },
+    s: { bottom: -4, left: '50%', transform: 'translateX(-50%)' },
+    sw: { bottom: -4, left: -4 },
+    w: { top: '50%', left: -4, transform: 'translateY(-50%)' },
+};
+const RESIZE_CURSORS = {
+    nw: 'nw-resize', n: 'n-resize', ne: 'ne-resize',
+    e: 'e-resize', se: 'se-resize',
+    s: 's-resize', sw: 'sw-resize', w: 'w-resize',
+};
+const Note = ({ note, selected, onSelect, onMove, onMoveEnd, onResize, onResizeEnd, onTextChange, onExpandedChange }) => {
+    const noteRef = useRef(null);
+    const measurerRef = useRef(null);
+    const textareaRef = useRef(null);
+    const [isEditing, setIsEditing] = useState(false);
+    const [liveText, setLiveText] = useState(note.text);
+    const [fontSize, setFontSize] = useState(MAX_FONT_SIZE);
+    const [textareaTopPadding, setTextareaTopPadding] = useState(PADDING);
+    // True once the text no longer fits even at the readability floor — shows the "see full text" button.
+    const [isOverflowing, setIsOverflowing] = useState(false);
+    // The height the note needs to show every line of its text at the fitted size.
+    const [fullTextHeight, setFullTextHeight] = useState(0);
+    const [isShowingFullText, setIsShowingFullText] = useState(false);
+    // The note face is a webfont, so the first measurement can land against the fallback's metrics.
+    // Flipping this re-runs the fit once the real face is in.
+    const [isFontReady, setIsFontReady] = useState(false);
+    useEffect(() => {
+        let cancelled = false;
+        void whenNoteFontReady().then(() => {
+            if (!cancelled)
+                setIsFontReady(true);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    const dragRef = useRef(null);
+    const resizeRef = useRef(null);
+    const readEffectiveZoom = useCallback(() => {
+        if (!noteRef.current)
+            return 1;
+        const renderedWidth = noteRef.current.getBoundingClientRect().width;
+        return renderedWidth > 0 ? renderedWidth / note.width : 1;
+    }, [note.width]);
+    // ── Move ────────────────────────────────────────────────────────────────
+    const handlePointerDown = useCallback((event) => {
+        if (isEditing)
+            return;
+        event.stopPropagation();
+        onSelect(note.id, event.shiftKey || event.metaKey || event.ctrlKey);
+        dragRef.current = {
+            clientX: event.clientX,
+            clientY: event.clientY,
+            startX: note.x,
+            startY: note.y,
+            zoom: readEffectiveZoom(),
+        };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }, [isEditing, note.id, note.x, note.y, onSelect, readEffectiveZoom]);
+    const handlePointerMove = useCallback((event) => {
+        if (!dragRef.current || !event.buttons)
+            return;
+        const { clientX, clientY, startX, startY, zoom } = dragRef.current;
+        const deltaX = (event.clientX - clientX) / zoom;
+        const deltaY = (event.clientY - clientY) / zoom;
+        onMove(note.id, startX + deltaX, startY + deltaY);
+    }, [note.id, onMove]);
+    const handlePointerUp = useCallback(() => {
+        if (dragRef.current) {
+            dragRef.current = null;
+            onMoveEnd?.(note.id);
+        }
+    }, [note.id, onMoveEnd]);
+    // ── Resize ──────────────────────────────────────────────────────────────
+    const handleResizePointerDown = useCallback((handle) => (event) => {
+        event.stopPropagation();
+        resizeRef.current = {
+            handle,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            startX: note.x,
+            startY: note.y,
+            startWidth: note.width,
+            startHeight: note.height,
+            zoom: readEffectiveZoom(),
+        };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }, [note.x, note.y, note.width, note.height, readEffectiveZoom]);
+    const handleResizePointerMove = useCallback((event) => {
+        if (!resizeRef.current || !event.buttons)
+            return;
+        const { handle, clientX, clientY, startX, startY, startWidth, startHeight, zoom } = resizeRef.current;
+        const deltaX = (event.clientX - clientX) / zoom;
+        const deltaY = (event.clientY - clientY) / zoom;
+        let newX = startX;
+        let newY = startY;
+        let newWidth = startWidth;
+        let newHeight = startHeight;
+        if (handle === 'e' || handle === 'ne' || handle === 'se') {
+            newWidth = Math.max(MIN_SIZE, startWidth + deltaX);
+        }
+        if (handle === 'w' || handle === 'nw' || handle === 'sw') {
+            newWidth = Math.max(MIN_SIZE, startWidth - deltaX);
+            newX = startX + startWidth - newWidth;
+        }
+        if (handle === 's' || handle === 'se' || handle === 'sw') {
+            newHeight = Math.max(MIN_SIZE, startHeight + deltaY);
+        }
+        if (handle === 'n' || handle === 'ne' || handle === 'nw') {
+            newHeight = Math.max(MIN_SIZE, startHeight - deltaY);
+            newY = startY + startHeight - newHeight;
+        }
+        onResize(note.id, newX, newY, newWidth, newHeight);
+    }, [note.id, onResize]);
+    const handleResizePointerUp = useCallback(() => {
+        if (resizeRef.current) {
+            resizeRef.current = null;
+            onResizeEnd?.(note.id);
+        }
+    }, [note.id, onResizeEnd]);
+    // ── Text editing ────────────────────────────────────────────────────────
+    const handleDoubleClick = useCallback((event) => {
+        event.stopPropagation();
+        setLiveText(note.text);
+        setIsEditing(true);
+    }, [note.text]);
+    const handleTextareaChange = useCallback((event) => {
+        setLiveText(event.currentTarget.value);
+    }, []);
+    const handleTextareaBlur = useCallback((event) => {
+        onTextChange(note.id, event.currentTarget.value);
+        setIsEditing(false);
+    }, [note.id, onTextChange]);
+    const handleTextareaKeyDown = useCallback((event) => {
+        if (event.key === 'Escape') {
+            setIsEditing(false);
+        }
+    }, []);
+    // Use live text for font sizing when editing, otherwise use committed text
+    const displayText = isEditing ? liveText : note.text;
+    // Measure optimal font size using an off-screen div that mirrors the note's
+    // word-wrap behavior. Runs synchronously before paint so there is no flash.
+    // Also measures actual text height so the textarea can be vertically centred.
+    useLayoutEffect(() => {
+        if (!measurerRef.current)
+            return;
+        const { fontSize: optimal, overflows } = findOptimalFontSize(measurerRef.current, displayText, note.width, note.height);
+        setFontSize(optimal);
+        setIsOverflowing(overflows);
+        // After finding the font, read the actual rendered text height to compute
+        // vertical padding that centres the text inside the textarea.
+        const measurer = measurerRef.current;
+        measurer.style.width = `${note.width - PADDING * 2}px`;
+        measurer.style.fontSize = `${optimal}px`;
+        measurer.style.lineHeight = `${LINE_HEIGHT_RATIO}`;
+        measurer.textContent = displayText || '\u00A0';
+        const renderedHeight = measurer.scrollHeight;
+        const topPad = Math.max(PADDING, (note.height - renderedHeight) / 2);
+        setTextareaTopPadding(topPad);
+        // The same measurement answers how tall the note has to grow to show everything.
+        setFullTextHeight(renderedHeight + PADDING * 2);
+    }, [displayText, note.width, note.height, isFontReady]);
+    const isExpanded = isShowingFullText && isOverflowing && !isEditing;
+    // Editing, retyping or resizing the note re-fits the text, and the note may well fit again — the
+    // grown state belongs to the text that no longer fits, so it never outlives it.
+    useEffect(() => {
+        if (!isOverflowing)
+            setIsShowingFullText(false);
+    }, [isOverflowing]);
+    useEffect(() => {
+        onExpandedChange?.(note.id, isExpanded);
+    }, [isExpanded, note.id, onExpandedChange]);
+    const handleExpand = useCallback((event) => {
+        event.stopPropagation();
+        setIsShowingFullText(true);
+    }, []);
+    // Growing is a look, not a mode: the note falls back to its own size the moment the pointer leaves it.
+    const handlePointerLeave = useCallback(() => setIsShowingFullText(false), []);
+    return (jsxs("div", { ref: noteRef, className: `canvas-note${selected ? ' canvas-note--selected' : ''}${isExpanded ? ' canvas-note--expanded' : ''}`, style: { width: note.width, height: isExpanded ? Math.max(note.height, fullTextHeight) : note.height }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, onPointerLeave: handlePointerLeave, onDoubleClick: handleDoubleClick, children: [jsx("div", { ref: measurerRef, className: 'canvas-note__measurer', "aria-hidden": 'true' }), isEditing ? (jsx("textarea", { ref: textareaRef, className: 'canvas-note__textarea', value: liveText, style: {
+                    fontSize,
+                    lineHeight: LINE_HEIGHT_RATIO,
+                    paddingTop: textareaTopPadding,
+                    paddingBottom: textareaTopPadding,
+                }, autoFocus: true, onChange: handleTextareaChange, onBlur: handleTextareaBlur, onKeyDown: handleTextareaKeyDown, onPointerDown: event => event.stopPropagation() })) : (jsx("p", { className: 'canvas-note__text', style: { fontSize }, children: note.text })), isOverflowing && !isEditing && !isExpanded && (jsx("button", { type: 'button', className: 'canvas-note__expand', "aria-label": 'See full text', title: 'See full text', onClick: handleExpand, onPointerDown: event => event.stopPropagation(), children: jsx("i", { className: 'pi pi-plus' }) })), selected && !isExpanded && HANDLE_KEYS.map(handle => (jsx("div", { className: 'canvas-note__handle', style: { ...HANDLE_POSITIONS[handle], cursor: RESIZE_CURSORS[handle] }, onPointerDown: handleResizePointerDown(handle), onPointerMove: handleResizePointerMove, onPointerUp: handleResizePointerUp, onPointerCancel: handleResizePointerUp }, handle)))] }));
+};
+
+export { Note };
+//# sourceMappingURL=Note.js.map

package/dist/esm/Canvas/shapes/Note/Note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.js","sources":["../../../../../Canvas/shapes/Note/Note.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/Canvas/shapes/Note/index.d.ts

@@ -0,0 +1,3 @@
+export { Note } from './Note';
+export type { NoteProps, NoteData } from './Note';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Canvas/shapes/Note/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../Canvas/shapes/Note/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC"}

package/dist/esm/Canvas/shapes/Note/index.js

@@ -0,0 +1,2 @@
+export { Note } from './Note';
+//# sourceMappingURL=index.js.map

package/dist/esm/Canvas/shapes/Note/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../Canvas/shapes/Note/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC"}

package/dist/esm/Canvas/shapes/Note/noteFont.d.ts

@@ -0,0 +1,2 @@
+export declare function whenNoteFontReady(): Promise<void>;
+//# sourceMappingURL=noteFont.d.ts.map

package/dist/esm/Canvas/shapes/Note/noteFont.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"noteFont.d.ts","sourceRoot":"","sources":["../../../../../Canvas/shapes/Note/noteFont.ts"],"names":[],"mappings":"AAiBA,wBAAgB,iBAAiB,IAAI,OAAO,CAAC,IAAI,CAAC,CAOjD"}

package/dist/esm/Canvas/shapes/Note/noteFont.js

@@ -0,0 +1,26 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/** A specimen of the embedded note face (declared in Note.css) — the size is irrelevant to
+ * `FontFaceSet.load`, only the family matters. */
+const SPECIMEN = '16px "Patrick Hand"';
+let ready = null;
+/**
+ * Resolves once the embedded note font is usable for measurement.
+ *
+ * The note text is sized by measuring it, and a webfont arrives asynchronously: a measurement taken
+ * before it loads uses the fallback face's metrics, so the fitted size is wrong for the face that
+ * ends up painting. Notes must re-measure once the real face is in — hence one shared promise for
+ * every note on the board rather than a load per note.
+ */
+function whenNoteFontReady() {
+    if (ready)
+        return ready;
+    const fonts = typeof document === 'undefined' ? undefined : document.fonts;
+    // A failed/unsupported load is not an error worth surfacing — the fallback face still renders,
+    // it just measures against different metrics.
+    ready = fonts ? fonts.load(SPECIMEN).then(() => undefined, () => undefined) : Promise.resolve();
+    return ready;
+}
+
+export { whenNoteFontReady };
+//# sourceMappingURL=noteFont.js.map

package/dist/esm/Canvas/shapes/Note/noteFont.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"noteFont.js","sources":["../../../../../Canvas/shapes/Note/noteFont.ts"],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AAEA;AACkD;AAClD,MAAM,QAAQ,GAAG,qBAAqB;AAEtC,IAAI,KAAK,GAAyB,IAAI;AAEtC;;;;;;;AAOG;SACa,iBAAiB,GAAA;AAC7B,IAAA,IAAI,KAAK;AAAE,QAAA,OAAO,KAAK;AACvB,IAAA,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC,KAAK;;;AAG1E,IAAA,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,MAAM,SAAS,EAAE,MAAM,SAAS,CAAC,GAAG,OAAO,CAAC,OAAO,EAAE;AAC/F,IAAA,OAAO,KAAK;AAChB;;"}

package/dist/esm/Canvas/shapes/Region/Region.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export interface RegionData {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    name: string;
+}
+export interface RegionProps {
+    region: RegionData;
+    selected: boolean;
+    onSelect: (id: string, additive: boolean) => void;
+    onMove: (id: string, x: number, y: number) => void;
+    onMoveEnd?: (id: string) => void;
+    onResize: (id: string, x: number, y: number, width: number, height: number) => void;
+    onResizeEnd?: (id: string) => void;
+    onNameChange: (id: string, name: string) => void;
+    children?: React.ReactNode;
+}
+export declare const Region: ({ region, selected, onSelect, onMove, onMoveEnd, onResize, onResizeEnd, onNameChange, children }: RegionProps) => React.JSX.Element;
+//# sourceMappingURL=Region.d.ts.map

package/dist/esm/Canvas/shapes/Region/Region.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Region.d.ts","sourceRoot":"","sources":["../../../../../Canvas/shapes/Region/Region.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAwB7D,MAAM,WAAW,UAAU;IAEvB,EAAE,EAAE,MAAM,CAAC;IAEX,CAAC,EAAE,MAAM,CAAC;IAEV,CAAC,EAAE,MAAM,CAAC;IAEV,KAAK,EAAE,MAAM,CAAC;IAEd,MAAM,EAAE,MAAM,CAAC;IAEf,IAAI,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAExB,MAAM,EAAE,UAAU,CAAC;IAEnB,QAAQ,EAAE,OAAO,CAAC;IAMlB,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAElD,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnD,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEpF,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAQjD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAUD,eAAO,MAAM,MAAM,GAAI,kGAAkG,WAAW,sBAmNnI,CAAC"}

package/dist/esm/Canvas/shapes/Region/Region.js

@@ -0,0 +1,150 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useCallback } from 'react';
+
+const MIN_SIZE = 100;
+const HANDLE_KEYS = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
+const HANDLE_POSITIONS = {
+    nw: { top: -4, left: -4 },
+    n: { top: -4, left: '50%', transform: 'translateX(-50%)' },
+    ne: { top: -4, right: -4 },
+    e: { top: '50%', right: -4, transform: 'translateY(-50%)' },
+    se: { bottom: -4, right: -4 },
+    s: { bottom: -4, left: '50%', transform: 'translateX(-50%)' },
+    sw: { bottom: -4, left: -4 },
+    w: { top: '50%', left: -4, transform: 'translateY(-50%)' },
+};
+const RESIZE_CURSORS = {
+    nw: 'nw-resize', n: 'n-resize', ne: 'ne-resize',
+    e: 'e-resize', se: 'se-resize',
+    s: 's-resize', sw: 'sw-resize', w: 'w-resize',
+};
+/**
+ * A resizable, draggable, labeled box a host can place other shapes inside of — the generic shell
+ * behind a "region" or "group" affordance on a board. Presentational and fully controlled: like
+ * {@link Note}, it owns no position/size/name state of its own and reads `region` fresh every render,
+ * reporting every change through callbacks instead of committing anything locally. A host that is slow
+ * to feed a new `region` back after a callback will see the box spring back to its last known value —
+ * the same trade-off `Note` makes for its own drag/resize/rename.
+ */
+const Region = ({ region, selected, onSelect, onMove, onMoveEnd, onResize, onResizeEnd, onNameChange, children }) => {
+    const [isEditing, setIsEditing] = useState(false);
+    const regionRef = useRef(null);
+    const titleBarRef = useRef(null);
+    const clickedTitleBarRef = useRef(false);
+    const dragRef = useRef(null);
+    const resizeRef = useRef(null);
+    const readEffectiveZoom = useCallback(() => {
+        if (!regionRef.current)
+            return 1;
+        const renderedWidth = regionRef.current.getBoundingClientRect().width;
+        return renderedWidth > 0 ? renderedWidth / region.width : 1;
+    }, [region.width]);
+    // ── Move ────────────────────────────────────────────────────────────────
+    // Only the title bar is a drag handle. A press anywhere on the region's body is deliberately left
+    // to bubble up to the host: a drag from there is free to become a rubber-band selection instead, and
+    // a plain click can select the region itself — a region is a backdrop you can both sweep a
+    // selection across and click to select, not a surface that swallows the gesture.
+    const handlePointerDown = useCallback((event) => {
+        if (isEditing)
+            return;
+        clickedTitleBarRef.current = titleBarRef.current?.contains(event.target) ?? false;
+        if (!clickedTitleBarRef.current)
+            return;
+        event.stopPropagation();
+        onSelect(region.id, event.shiftKey || event.metaKey || event.ctrlKey);
+        dragRef.current = {
+            clientX: event.clientX,
+            clientY: event.clientY,
+            startX: region.x,
+            startY: region.y,
+            zoom: readEffectiveZoom(),
+        };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }, [isEditing, region.id, region.x, region.y, onSelect, readEffectiveZoom]);
+    const handlePointerMove = useCallback((event) => {
+        if (!dragRef.current || !event.buttons)
+            return;
+        const { clientX, clientY, startX, startY, zoom } = dragRef.current;
+        const deltaX = (event.clientX - clientX) / zoom;
+        const deltaY = (event.clientY - clientY) / zoom;
+        onMove(region.id, startX + deltaX, startY + deltaY);
+    }, [region.id, onMove]);
+    const handlePointerUp = useCallback(() => {
+        if (dragRef.current) {
+            dragRef.current = null;
+            onMoveEnd?.(region.id);
+        }
+    }, [region.id, onMoveEnd]);
+    // ── Resize ──────────────────────────────────────────────────────────────
+    const handleResizePointerDown = useCallback((handle) => (event) => {
+        clickedTitleBarRef.current = false;
+        event.stopPropagation();
+        resizeRef.current = {
+            handle,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            startX: region.x,
+            startY: region.y,
+            startWidth: region.width,
+            startHeight: region.height,
+            zoom: readEffectiveZoom(),
+        };
+        event.currentTarget.setPointerCapture(event.pointerId);
+    }, [region.x, region.y, region.width, region.height, readEffectiveZoom]);
+    const handleResizePointerMove = useCallback((event) => {
+        if (!resizeRef.current || !event.buttons)
+            return;
+        const { handle, clientX, clientY, startX, startY, startWidth, startHeight, zoom } = resizeRef.current;
+        const deltaX = (event.clientX - clientX) / zoom;
+        const deltaY = (event.clientY - clientY) / zoom;
+        let newX = startX;
+        let newY = startY;
+        let newWidth = startWidth;
+        let newHeight = startHeight;
+        if (handle === 'e' || handle === 'ne' || handle === 'se') {
+            newWidth = Math.max(MIN_SIZE, startWidth + deltaX);
+        }
+        if (handle === 'w' || handle === 'nw' || handle === 'sw') {
+            newWidth = Math.max(MIN_SIZE, startWidth - deltaX);
+            newX = startX + startWidth - newWidth;
+        }
+        if (handle === 's' || handle === 'se' || handle === 'sw') {
+            newHeight = Math.max(MIN_SIZE, startHeight + deltaY);
+        }
+        if (handle === 'n' || handle === 'ne' || handle === 'nw') {
+            newHeight = Math.max(MIN_SIZE, startHeight - deltaY);
+            newY = startY + startHeight - newHeight;
+        }
+        onResize(region.id, newX, newY, newWidth, newHeight);
+    }, [region.id, onResize]);
+    const handleResizePointerUp = useCallback(() => {
+        if (resizeRef.current) {
+            resizeRef.current = null;
+            onResizeEnd?.(region.id);
+        }
+    }, [region.id, onResizeEnd]);
+    // ── Rename ──────────────────────────────────────────────────────────────
+    const handleDoubleClick = useCallback((event) => {
+        if (!clickedTitleBarRef.current)
+            return;
+        event.stopPropagation();
+        setIsEditing(true);
+    }, []);
+    const commitRename = useCallback((newName) => {
+        setIsEditing(false);
+        const trimmed = newName.trim();
+        if (trimmed && trimmed !== region.name)
+            onNameChange(region.id, trimmed);
+    }, [region.id, region.name, onNameChange]);
+    const handleInputBlur = useCallback((event) => commitRename(event.currentTarget.value), [commitRename]);
+    const handleInputKeyDown = useCallback((event) => {
+        if (event.key === 'Enter')
+            commitRename(event.currentTarget.value);
+        else if (event.key === 'Escape')
+            setIsEditing(false);
+    }, [commitRename]);
+    return (jsxs(Fragment, { children: [jsxs("div", { ref: regionRef, className: `canvas-region${selected ? ' canvas-region--selected' : ''}`, style: { width: region.width, height: region.height }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerCancel: handlePointerUp, onDoubleClick: handleDoubleClick, children: [jsx("div", { ref: titleBarRef, className: 'canvas-region__title-bar', children: isEditing ? (jsx("input", { className: 'canvas-region__name-input', type: 'text', defaultValue: region.name, autoFocus: true, onBlur: handleInputBlur, onKeyDown: handleInputKeyDown, onPointerDown: event => event.stopPropagation() })) : (jsx("span", { className: 'canvas-region__name', children: region.name })) }), selected && HANDLE_KEYS.map(handle => (jsx("div", { className: 'canvas-region__handle', style: { ...HANDLE_POSITIONS[handle], cursor: RESIZE_CURSORS[handle] }, onPointerDown: handleResizePointerDown(handle), onPointerMove: handleResizePointerMove, onPointerUp: handleResizePointerUp, onPointerCancel: handleResizePointerUp }, handle)))] }), jsx("div", { className: 'canvas-region__items', children: children })] }));
+};
+
+export { Region };
+//# sourceMappingURL=Region.js.map

package/dist/esm/Canvas/shapes/Region/Region.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Region.js","sources":["../../../../../Canvas/shapes/Region/Region.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/esm/Canvas/shapes/Region/index.d.ts

@@ -0,0 +1,3 @@
+export { Region } from './Region';
+export type { RegionProps, RegionData } from './Region';
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Canvas/shapes/Region/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../Canvas/shapes/Region/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/esm/Canvas/shapes/Region/index.js

@@ -0,0 +1,2 @@
+export { Region } from './Region';
+//# sourceMappingURL=index.js.map

package/dist/esm/Canvas/shapes/Region/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../Canvas/shapes/Region/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/esm/Canvas/useDragSelectionGuard.d.ts

@@ -0,0 +1,2 @@
+export declare function useDragSelectionGuard(containerRef: React.RefObject<HTMLElement | null>): void;
+//# sourceMappingURL=useDragSelectionGuard.d.ts.map

package/dist/esm/Canvas/useDragSelectionGuard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragSelectionGuard.d.ts","sourceRoot":"","sources":["../../../Canvas/useDragSelectionGuard.ts"],"names":[],"mappings":"AAcA,wBAAgB,qBAAqB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,QA4CtF"}

package/dist/esm/Canvas/useDragSelectionGuard.js

@@ -0,0 +1,59 @@
+import { useEffect } from 'react';
+
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+/**
+ * Suppresses native text selection for the duration of any pointer drag that starts inside the
+ * given container. The `user-select: none` rules on the boards are not enough in Safari — it still
+ * starts a selection on mousedown and extends it into chrome outside the board (top bar, controls,
+ * dialogs) as the drag sweeps over it. While a drag is live this guard cancels `selectstart` at the
+ * document level, clears any existing selection, and turns off selection on `body` (with the
+ * `-webkit-` form Safari honors). Drags starting in text inputs keep native selection behavior.
+ * @param containerRef The container whose pointer drags should suppress selection.
+ */
+function useDragSelectionGuard(containerRef) {
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        let active = false;
+        let previousUserSelect = '';
+        let previousWebkitUserSelect = '';
+        const suppressSelection = (event) => event.preventDefault();
+        const end = () => {
+            if (!active)
+                return;
+            active = false;
+            document.removeEventListener('selectstart', suppressSelection, true);
+            document.body.style.userSelect = previousUserSelect;
+            document.body.style.webkitUserSelect = previousWebkitUserSelect;
+        };
+        const begin = (event) => {
+            const target = event.target;
+            if (target?.closest('textarea, input, [contenteditable="true"]'))
+                return;
+            if (active)
+                return;
+            active = true;
+            previousUserSelect = document.body.style.userSelect;
+            previousWebkitUserSelect = document.body.style.webkitUserSelect;
+            document.body.style.userSelect = 'none';
+            document.body.style.webkitUserSelect = 'none';
+            window.getSelection()?.removeAllRanges();
+            document.addEventListener('selectstart', suppressSelection, true);
+        };
+        const handleRelease = () => end();
+        container.addEventListener('pointerdown', begin, true);
+        document.addEventListener('pointerup', handleRelease, true);
+        document.addEventListener('pointercancel', handleRelease, true);
+        return () => {
+            container.removeEventListener('pointerdown', begin, true);
+            document.removeEventListener('pointerup', handleRelease, true);
+            document.removeEventListener('pointercancel', handleRelease, true);
+            end();
+        };
+    }, [containerRef]);
+}
+
+export { useDragSelectionGuard };
+//# sourceMappingURL=useDragSelectionGuard.js.map

package/dist/esm/Canvas/useDragSelectionGuard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragSelectionGuard.js","sources":["../../../Canvas/useDragSelectionGuard.ts"],"sourcesContent":[null],"names":[],"mappings":";;AAAA;AACA;AAIA;;;;;;;;AAQG;AACG,SAAU,qBAAqB,CAAC,YAAiD,EAAA;IACnF,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO;AACtC,QAAA,IAAI,CAAC,SAAS;YAAE;QAEhB,IAAI,MAAM,GAAG,KAAK;QAClB,IAAI,kBAAkB,GAAG,EAAE;QAC3B,IAAI,wBAAwB,GAAG,EAAE;QAEjC,MAAM,iBAAiB,GAAG,CAAC,KAAY,KAAK,KAAK,CAAC,cAAc,EAAE;QAElE,MAAM,GAAG,GAAG,MAAK;AACb,YAAA,IAAI,CAAC,MAAM;gBAAE;YACb,MAAM,GAAG,KAAK;YACd,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC;YACpE,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,kBAAkB;YACnD,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,wBAAwB;AACnE,QAAA,CAAC;AAED,QAAA,MAAM,KAAK,GAAG,CAAC,KAAmB,KAAI;AAClC,YAAA,MAAM,MAAM,GAAG,KAAK,CAAC,MAA4B;AACjD,YAAA,IAAI,MAAM,EAAE,OAAO,CAAC,2CAA2C,CAAC;gBAAE;AAClE,YAAA,IAAI,MAAM;gBAAE;YACZ,MAAM,GAAG,IAAI;YACb,kBAAkB,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU;YACnD,wBAAwB,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB;YAC/D,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM;YACvC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,GAAG,MAAM;AAC7C,YAAA,MAAM,CAAC,YAAY,EAAE,EAAE,eAAe,EAAE;YACxC,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC;AACrE,QAAA,CAAC;AAED,QAAA,MAAM,aAAa,GAAG,MAAM,GAAG,EAAE;QAEjC,SAAS,CAAC,gBAAgB,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC;QACtD,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC;QAC3D,QAAQ,CAAC,gBAAgB,CAAC,eAAe,EAAE,aAAa,EAAE,IAAI,CAAC;AAC/D,QAAA,OAAO,MAAK;YACR,SAAS,CAAC,mBAAmB,CAAC,aAAa,EAAE,KAAK,EAAE,IAAI,CAAC;YACzD,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,aAAa,EAAE,IAAI,CAAC;YAC9D,QAAQ,CAAC,mBAAmB,CAAC,eAAe,EAAE,aAAa,EAAE,IAAI,CAAC;AAClE,YAAA,GAAG,EAAE;AACT,QAAA,CAAC;AACL,IAAA,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;AACtB;;"}

package/dist/esm/Canvas/zoomMechanism.d.ts

@@ -0,0 +1,4 @@
+export declare const isMultiTouchCapableDevice: boolean;
+export declare function shouldUseCssZoom(zoom: number, preferTransform: boolean, isMultiTouchCapable: boolean): boolean;
+export declare function applyZoomLayer(element: HTMLElement, zoom: number, preferTransform?: boolean): void;
+//# sourceMappingURL=zoomMechanism.d.ts.map

package/dist/esm/Canvas/zoomMechanism.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"zoomMechanism.d.ts","sourceRoot":"","sources":["../../../Canvas/zoomMechanism.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,yBAAyB,SAAyB,CAAC;AAoBhE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAE9G;AAaD,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,UAAQ,GAAG,IAAI,CAUhG"}