nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/overlay/InspectorOverlay.js

@@ -1,332 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
-import { useInspectorOpen } from "../shell/openStore.js";
-import { getSelectedElements, useHierarchy, useSelectedElement, useSelectedElements } from "../selection/selectionStore.js";
-import { installElementSelector } from "./elementSelector.js";
-import { getMarginFills, getMarginGuides, readBorderWidths, readMargins, toRect, } from "./overlayGeometry.js";
-import { observeSelectedGeometry } from "./selectedGeometry.js";
-import { getDropLocationAtPoint, moveElement } from "./structuralGestures.js";
-import { resolveSelectionFromElement } from "../selection/resolveSelection.js";
-import { setSelectedElement } from "../selection/selectionStore.js";
-import { installInteractionStyles } from "./interactionStyles.js";
-import { clearDropGuide, showDropGuide, useDropGuide } from "./dropGuide.js";
-import { DropGuideOverlay } from "./DropGuideOverlay.js";
-import { createFrameThrottle } from "./frameThrottle.js";
-import { getMeasurementGeometry } from "./measurementGeometry.js";
-import { MeasurementGuideOverlay } from "./MeasurementGuideOverlay.js";
-import { resolveSelectionTarget, selectionTargetMode } from "../selection/selectionTarget.js";
-import { isInlineTextEditingActive, useInlineTextSession } from "../inline-text/inlineTextEditor.js";
-import { EMPTY_TEXT_PROJECTION_ATTR } from "../projection/textProjection.js";
-import { useNudgeUiRuntimeConfig } from "../runtime/useRuntimeConfig.js";
-import { DomNavigator } from "./DomNavigator.js";
-export { getMarginFills, getMarginGuides, } from "./overlayGeometry.js";
-function overlayStyle(rect) {
-    return {
-        position: "fixed",
-        left: rect.left,
-        top: rect.top,
-        width: rect.width,
-        height: rect.height,
-        pointerEvents: "none",
-    };
-}
-export function InspectorOverlay({ host }) {
-    const open = useInspectorOpen();
-    const selected = useSelectedElement();
-    const selectedElements = useSelectedElements();
-    const hierarchy = useHierarchy();
-    const domNavigationEnabled = useNudgeUiRuntimeConfig().capabilities.domNavigation === true;
-    const inlineTextSession = useInlineTextSession();
-    const [hoverRect, setHoverRect] = useState(null);
-    const [hoverMargins, setHoverMargins] = useState(null);
-    const [hoverBorders, setHoverBorders] = useState(null);
-    const [selectedRects, setSelectedRects] = useState([]);
-    const [selectedBorders, setSelectedBorders] = useState(null);
-    const [optionDown, setOptionDown] = useState(false);
-    const [pointerOverPage, setPointerOverPage] = useState(false);
-    const dropGuide = useDropGuide("inspect");
-    const hoverElRef = useRef(null);
-    const isDraggingRef = useRef(false);
-    const rafRef = useRef(0);
-    useEffect(() => {
-        if (!open) {
-            setHoverRect(null);
-            setHoverMargins(null);
-            setHoverBorders(null);
-            hoverElRef.current = null;
-            setPointerOverPage(false);
-            return;
-        }
-        let observedHover = null;
-        const ResizeObserverCtor = window.ResizeObserver;
-        const hoverResizeObserver = ResizeObserverCtor ? new ResizeObserverCtor(scheduleHoverRecalc) : null;
-        function clearHover() {
-            hoverElRef.current = null;
-            setHoverRect(null);
-            setHoverMargins(null);
-            setHoverBorders(null);
-            hoverResizeObserver?.disconnect();
-            observedHover = null;
-        }
-        function observeHover(el) {
-            if (observedHover === el)
-                return;
-            hoverResizeObserver?.disconnect();
-            hoverResizeObserver?.observe(el);
-            observedHover = el;
-        }
-        function recalcHover() {
-            if (isDraggingRef.current)
-                return;
-            const el = hoverElRef.current;
-            if (!el) {
-                setHoverRect(null);
-                setHoverMargins(null);
-                setHoverBorders(null);
-                return;
-            }
-            setHoverRect(toRect(el.getBoundingClientRect()));
-            setHoverMargins(readMargins(el));
-            setHoverBorders(readBorderWidths(el));
-        }
-        function scheduleHoverRecalc() {
-            if (isDraggingRef.current)
-                return;
-            cancelAnimationFrame(rafRef.current);
-            rafRef.current = requestAnimationFrame(recalcHover);
-        }
-        function onMouseOver(e) {
-            if (isDraggingRef.current)
-                return;
-            const target = e.target;
-            if (!(target instanceof HTMLElement))
-                return;
-            if (host === target || host.contains(target)) {
-                setPointerOverPage(false);
-                clearHover();
-                return;
-            }
-            setPointerOverPage(true);
-            const el = resolveSelectionTarget(target, selectionTargetMode(e));
-            if (!el) {
-                clearHover();
-                return;
-            }
-            hoverElRef.current = el;
-            observeHover(el);
-            scheduleHoverRecalc();
-        }
-        function onMouseOut(e) {
-            if (isDraggingRef.current)
-                return;
-            const related = e.relatedTarget;
-            if (!related || !(related instanceof Node)) {
-                setPointerOverPage(false);
-                clearHover();
-                return;
-            }
-            if (host === related || host.contains(related)) {
-                setPointerOverPage(false);
-                clearHover();
-                return;
-            }
-            const nearest = resolveSelectionTarget(related, selectionTargetMode(e));
-            if (nearest !== hoverElRef.current)
-                clearHover();
-        }
-        document.addEventListener("mouseover", onMouseOver, true);
-        document.addEventListener("mouseout", onMouseOut, true);
-        window.addEventListener("resize", scheduleHoverRecalc);
-        window.addEventListener("scroll", scheduleHoverRecalc, true);
-        const removeClickCapture = installElementSelector(host);
-        return () => {
-            cancelAnimationFrame(rafRef.current);
-            document.removeEventListener("mouseover", onMouseOver, true);
-            document.removeEventListener("mouseout", onMouseOut, true);
-            removeClickCapture();
-            window.removeEventListener("resize", scheduleHoverRecalc);
-            window.removeEventListener("scroll", scheduleHoverRecalc, true);
-            hoverResizeObserver?.disconnect();
-        };
-    }, [open, host]);
-    useEffect(() => {
-        let raf = 0;
-        function recalc() {
-            setSelectedRects(selectedElements.map((candidate) => toRect(candidate.domElement.getBoundingClientRect())));
-            if (selected) {
-                setSelectedBorders(readBorderWidths(selected.domElement));
-            }
-            else {
-                setSelectedBorders(null);
-            }
-        }
-        function schedule() {
-            cancelAnimationFrame(raf);
-            raf = requestAnimationFrame(recalc);
-        }
-        recalc();
-        const stopObserving = selectedElements.map((candidate) => observeSelectedGeometry(candidate.domElement, schedule));
-        return () => {
-            cancelAnimationFrame(raf);
-            stopObserving.forEach((stop) => stop());
-        };
-    }, [selectedElements]);
-    useEffect(() => {
-        if (!open) {
-            setOptionDown(false);
-            return;
-        }
-        function updateOptionState(event) {
-            setOptionDown(event.altKey);
-        }
-        function clearOptionState() {
-            setOptionDown(false);
-        }
-        window.addEventListener("keydown", updateOptionState);
-        window.addEventListener("keyup", updateOptionState);
-        window.addEventListener("blur", clearOptionState);
-        return () => {
-            window.removeEventListener("keydown", updateOptionState);
-            window.removeEventListener("keyup", updateOptionState);
-            window.removeEventListener("blur", clearOptionState);
-        };
-    }, [open]);
-    useEffect(() => {
-        if (!open)
-            return;
-        const removeInteractionStyles = installInteractionStyles();
-        let candidate = null;
-        let dragging = false;
-        let start = null;
-        function updateGuide(point) {
-            if (!candidate)
-                return;
-            const drop = getDropLocationAtPoint(document, candidate, point.x, point.y);
-            if (drop)
-                showDropGuide("inspect", document, drop);
-            else
-                clearDropGuide("inspect");
-        }
-        const guideUpdate = createFrameThrottle(updateGuide);
-        function clear() {
-            guideUpdate.cancel();
-            isDraggingRef.current = false;
-            candidate = null;
-            dragging = false;
-            start = null;
-            clearDropGuide("inspect");
-        }
-        function onPointerDown(event) {
-            if (isInlineTextEditingActive())
-                return;
-            if (getSelectedElements().length > 1)
-                return;
-            if (event.button !== 0 || !(event.target instanceof HTMLElement))
-                return;
-            if (host === event.target || host.contains(event.target))
-                return;
-            if (event.target.closest(`[${EMPTY_TEXT_PROJECTION_ATTR}]`))
-                return;
-            const target = resolveSelectionTarget(event.target, selectionTargetMode(event));
-            if (!target)
-                return;
-            candidate = target;
-            start = { x: event.clientX, y: event.clientY };
-        }
-        function onPointerMove(event) {
-            if (isInlineTextEditingActive())
-                return;
-            if (!candidate || !start)
-                return;
-            if (!dragging && Math.hypot(event.clientX - start.x, event.clientY - start.y) < 6)
-                return;
-            event.preventDefault();
-            const point = { x: event.clientX, y: event.clientY };
-            if (!dragging) {
-                dragging = true;
-                isDraggingRef.current = true;
-                hoverElRef.current = null;
-                setHoverRect(null);
-                setHoverMargins(null);
-                const selected = resolveSelectionFromElement(candidate);
-                if (selected)
-                    setSelectedElement(selected);
-                updateGuide(point);
-                return;
-            }
-            guideUpdate.schedule(point);
-        }
-        function onPointerUp(event) {
-            if (isInlineTextEditingActive())
-                return;
-            if (!candidate || !dragging) {
-                clear();
-                return;
-            }
-            event.preventDefault();
-            const drop = getDropLocationAtPoint(document, candidate, event.clientX, event.clientY);
-            if (drop)
-                moveElement(candidate, drop);
-            const selected = resolveSelectionFromElement(candidate);
-            if (selected)
-                setSelectedElement(selected);
-            clear();
-        }
-        document.addEventListener("mousedown", onPointerDown, true);
-        document.addEventListener("mousemove", onPointerMove, true);
-        document.addEventListener("mouseup", onPointerUp, true);
-        return () => {
-            document.removeEventListener("mousedown", onPointerDown, true);
-            document.removeEventListener("mousemove", onPointerMove, true);
-            document.removeEventListener("mouseup", onPointerUp, true);
-            guideUpdate.cancel();
-            isDraggingRef.current = false;
-            clearDropGuide("inspect");
-            removeInteractionStyles();
-        };
-    }, [open, host]);
-    const selectedGeometry = selectedElements.flatMap((candidate, index) => {
-        const rect = selectedRects[index];
-        return rect ? [{ element: candidate, rect }] : [];
-    });
-    const selectedPrimaryIndex = selectedElements.findIndex((candidate) => candidate.domElement === selected?.domElement);
-    const selectedRect = selectedRects[selectedPrimaryIndex >= 0 ? selectedPrimaryIndex : 0] ?? null;
-    const hoverStyle = hoverRect ? overlayStyle(hoverRect) : { display: "none" };
-    const hoverMarginGuides = hoverRect && hoverMargins
-        ? getMarginGuides(hoverRect, hoverMargins)
-        : [];
-    const hoverMarginFills = hoverRect && hoverMargins
-        ? getMarginFills(hoverRect, hoverMargins)
-        : [];
-    const showGuideOverlay = open
-        && selectedElements.length === 1
-        && optionDown
-        && pointerOverPage
-        && selectedRect;
-    const showMeasurement = showGuideOverlay
-        && hoverRect
-        && hoverElRef.current !== selected?.domElement;
-    const measurement = showMeasurement && selectedRect && hoverRect
-        ? getMeasurementGeometry(selectedRect, hoverRect, {
-            selectedBorders: selectedBorders ?? undefined,
-            hoveredBorders: hoverBorders ?? undefined,
-        })
-        : null;
-    return (_jsxs(_Fragment, { children: [showGuideOverlay && selectedRect ? (_jsx(MeasurementGuideOverlay, { selectedRect: selectedRect, segments: measurement?.segments ?? [] })) : null, open && hoverRect ? (_jsxs(_Fragment, { children: [hoverMarginFills.map((fill) => (_jsx("div", { className: "hover-margin-fill", "data-side": fill.side, style: {
-                            position: "fixed",
-                            left: fill.left,
-                            top: fill.top,
-                            width: fill.width,
-                            height: fill.height,
-                            pointerEvents: "none",
-                        }, "aria-hidden": "true" }, fill.side))), _jsx("div", { className: "hover-outline", style: hoverStyle, "aria-hidden": "true" }), hoverMarginGuides.map((guide) => (_jsx("div", { className: "hover-margin", "data-axis": guide.axis, "data-distance": guide.distance, "data-side": guide.side, style: {
-                            position: "fixed",
-                            left: guide.left,
-                            top: guide.top,
-                            width: guide.width,
-                            height: guide.height,
-                            pointerEvents: "none",
-                        }, "aria-hidden": "true" }, guide.side)))] })) : null, open && !inlineTextSession ? selectedGeometry.map(({ element, rect }, index) => (_jsx("div", { className: "selected-outline", "data-test": "selected-outline", "data-selected-cid": element.cid, "data-selected-index": index, "data-selected-src": element.src, style: overlayStyle(rect), "aria-hidden": "true" }, `${element.domElement.getAttribute("data-cid") ?? "element"}-${index}`))) : null, open && domNavigationEnabled && !inlineTextSession && selectedElements.length === 1 && selected && selectedRect ? (_jsx(DomNavigator, { selected: selected, hierarchy: hierarchy, anchor: selectedRect, project: (element) => toRect(element.getBoundingClientRect()) })) : null, open && selectedElements.length === 1 ? _jsx(DropGuideOverlay, { guide: dropGuide?.document === document
-                    ? { orientation: dropGuide.orientation, line: dropGuide.line, target: dropGuide.target }
-                    : null, lineClassName: "dom-drop-line", lineTestId: "dom-drop-line", targetClassName: "dom-drop-target", targetTestId: "dom-drop-target" }) : null] }));
-}

package/dist/inspector/overlay/elementSelector.d.ts

@@ -1 +0,0 @@
-export declare function installElementSelector(inspectorHost: HTMLElement, acceptsClick?: (event: Event) => boolean): () => void;

package/dist/inspector/overlay/elementSelector.js

@@ -1,111 +0,0 @@
-import { getSelectedElements, setSelectedElement, toggleSelectedElement } from "../selection/selectionStore.js";
-import { getOpen } from "../shell/openStore.js";
-import { resolveSelectionFromEvent } from "../selection/resolveSelection.js";
-import { handleInlineTextEditIntent, isInlineTextEditingActive, } from "../inline-text/inlineTextEditor.js";
-import { EMPTY_TEXT_PROJECTION_ATTR } from "../projection/textProjection.js";
-import { APPLICATION_GESTURE_EVENTS, blockApplicationClick, blockApplicationGesture, isInlineEditorTarget, isUserClick, } from "./clickPolicy.js";
-export function installElementSelector(inspectorHost, acceptsClick = isUserClick) {
-    function applyInlineTextDisposition(event, disposition) {
-        if (disposition === "pass-through")
-            return;
-        if (disposition === "suppress")
-            event.preventDefault();
-        event.stopPropagation();
-    }
-    function onDoubleClick(e) {
-        if (!getOpen())
-            return;
-        if (isInsideInspectorUi(e))
-            return;
-        if (getSelectedElements().length > 1) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        if (!(e.target instanceof Element))
-            return;
-        applyInlineTextDisposition(e, handleInlineTextEditIntent({
-            kind: "double-click",
-            target: e.target,
-            point: { x: e.clientX, y: e.clientY },
-        }));
-    }
-    function isInsideInspectorUi(event) {
-        const target = event.target;
-        if (!(target instanceof Element))
-            return false;
-        if (inspectorHost === target || inspectorHost.contains(target))
-            return true;
-        // Composed clicks originating inside the inspector's shadow root are
-        // retargeted to the host before document-level listeners observe them;
-        // this branch covers dispatch paths where retargeting has not applied.
-        const root = target.getRootNode();
-        return root instanceof ShadowRoot && root.host === inspectorHost;
-    }
-    function onClick(e) {
-        if (!getOpen() || !acceptsClick(e))
-            return;
-        if (isInsideInspectorUi(e)) {
-            // The selector guards the inspected application only. Clicks on the
-            // inspector's own controls must keep their native behavior, so they
-            // pass through untouched (no preventDefault / stopPropagation).
-            return;
-        }
-        if (isInlineTextEditingActive()) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        if (e.target instanceof Element
-            && e.target.closest(`[${EMPTY_TEXT_PROJECTION_ATTR}]`)) {
-            blockApplicationClick(e);
-            return;
-        }
-        // The inspector is an editing surface while open. Capture every ordinary
-        // application click so buttons, links, and untracked controls cannot run
-        // alongside selection. Shift-click toggles the primary target in the
-        // ordered group; Command/Ctrl-click selects the deepest tracked element.
-        const sel = resolveSelectionFromEvent(e, inspectorHost);
-        blockApplicationClick(e);
-        if (sel) {
-            if (e.shiftKey && !e.metaKey && !e.ctrlKey)
-                toggleSelectedElement(sel);
-            else
-                setSelectedElement(sel);
-        }
-    }
-    function onMouseDown(e) {
-        if (!getOpen() || isInsideInspectorUi(e))
-            return;
-        if (!(e.target instanceof Element))
-            return;
-        applyInlineTextDisposition(e, handleInlineTextEditIntent({
-            kind: "pointer-down",
-            target: e.target,
-            point: { x: e.clientX, y: e.clientY },
-            clickCount: e.detail,
-        }));
-    }
-    function onApplicationGesture(e) {
-        if (!getOpen() || !acceptsClick(e) || isInlineEditorTarget(e.target))
-            return;
-        if (e.target instanceof Element
-            && (e.target === inspectorHost || inspectorHost.contains(e.target)))
-            return;
-        blockApplicationGesture(e);
-    }
-    document.addEventListener("mousedown", onMouseDown, true);
-    document.addEventListener("dblclick", onDoubleClick, true);
-    document.addEventListener("click", onClick, true);
-    for (const type of APPLICATION_GESTURE_EVENTS) {
-        document.addEventListener(type, onApplicationGesture, true);
-    }
-    return () => {
-        document.removeEventListener("mousedown", onMouseDown, true);
-        document.removeEventListener("dblclick", onDoubleClick, true);
-        document.removeEventListener("click", onClick, true);
-        for (const type of APPLICATION_GESTURE_EVENTS) {
-            document.removeEventListener(type, onApplicationGesture, true);
-        }
-    };
-}

package/dist/inspector/sketch/SketchChanges.d.ts

@@ -1,2 +0,0 @@
-import type { ReactElement } from "react";
-export declare function SketchChanges(): ReactElement | null;

package/dist/inspector/sketch/SketchChanges.js

@@ -1,72 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { IconCheck, IconCopy, IconDownload, IconEdit, IconRefresh, IconTrash } from "@tabler/icons-react";
-import { Button } from "../ui/Button.js";
-import { StatusCallout } from "../ui/StatusCallout.js";
-import { copyImageToClipboard, downloadImage } from "./raster.js";
-import { editSketch } from "./SketchWorkspace.js";
-import { removeSketch, requeueSketch, useSketchStore } from "./store.js";
-import {} from "./model.js";
-function routeLabel(url) {
-    try {
-        const parsed = new URL(url);
-        return `${parsed.pathname}${parsed.search}` || "/";
-    }
-    catch {
-        return url;
-    }
-}
-function statusLabel(status) {
-    switch (status) {
-        case "dispatching": return "Sending";
-        case "handing-off": return "Handing off";
-        case "needs-review": return "Needs review";
-        case "unknown": return "Unknown";
-        default: return "Pending";
-    }
-}
-function Thumbnail({ item }) {
-    const [url, setUrl] = useState(null);
-    useEffect(() => {
-        if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function")
-            return;
-        const next = URL.createObjectURL(item.document.annotatedImage);
-        setUrl(next);
-        return () => URL.revokeObjectURL(next);
-    }, [item.document.annotatedImage]);
-    return url ? _jsx("img", { className: "sketch-change__thumbnail", src: url, alt: "Sketch annotation", "data-test": "sketch-thumbnail" }) : _jsx("div", { className: "sketch-change__thumbnail sketch-change__thumbnail--empty", "data-test": "sketch-thumbnail" });
-}
-function SketchRow({ item }) {
-    const [actionError, setActionError] = useState(null);
-    const busy = item.status === "dispatching" || item.status === "handing-off";
-    const canReview = item.status === "needs-review" || item.status === "unknown";
-    const document = item.document;
-    async function copyImage() {
-        setActionError(null);
-        try {
-            await copyImageToClipboard(document.annotatedImage);
-        }
-        catch (error) {
-            setActionError(error instanceof Error ? error.message : "The image could not be copied.");
-        }
-    }
-    async function runQueueAction(action, failureMessage) {
-        setActionError(null);
-        try {
-            if (!await action())
-                setActionError(failureMessage);
-        }
-        catch (error) {
-            setActionError(error instanceof Error ? error.message : failureMessage);
-        }
-    }
-    return (_jsxs("div", { className: "sketch-change__row", "data-test": "sketch-row", "data-sketch-id": document.id, children: [_jsx(Thumbnail, { item: item }), _jsxs("div", { className: "sketch-change__body", children: [_jsxs("div", { className: "sketch-change__heading", children: [_jsx("span", { className: "sketch-change__name", children: document.filename }), _jsx("span", { className: "sketch-change__status", "data-test": "sketch-status", "data-status": item.status, children: statusLabel(item.status) })] }), _jsxs("span", { className: "sketch-change__route", children: [routeLabel(document.capture.url), " \u00B7 revision ", document.revision] }), document.description ? _jsx("p", { className: "sketch-change__description", children: document.description }) : null, document.annotations?.length ? (_jsx("ol", { className: "sketch-change__annotations", children: document.annotations.map((annotation) => (_jsxs("li", { children: [_jsxs("span", { children: [annotation.number, "."] }), " ", annotation.description] }, annotation.id))) })) : null, _jsxs("div", { className: "sketch-change__actions", children: [_jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-copy-image", onClick: () => void copyImage(), children: [_jsx(IconCopy, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Copy image"] }), _jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-download-image", onClick: () => downloadImage(document.annotatedImage, document.filename), children: [_jsx(IconDownload, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Download"] }), _jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-reopen", onClick: () => editSketch(document.id), disabled: busy, children: [_jsx(IconEdit, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Reopen"] }), canReview ? (_jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-requeue", onClick: () => void runQueueAction(() => requeueSketch(document.id), "The sketch could not be requeued."), disabled: busy, children: [_jsx(IconRefresh, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " Requeue"] })) : null, _jsxs(Button, { size: "compact", variant: "quiet", type: "button", "data-test": "sketch-mark-done", onClick: () => void runQueueAction(() => removeSketch(document.id), "The sketch could not be removed yet."), disabled: busy, children: [canReview ? _jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" }) : _jsx(IconTrash, { size: "var(--icon-size-small)", "aria-hidden": "true" }), " ", canReview ? "Mark done" : "Delete"] })] }), actionError ? _jsx("span", { className: "sketch-change__error", role: "status", children: actionError }) : null] })] }));
-}
-export function SketchChanges() {
-    const store = useSketchStore();
-    const items = store.items;
-    const hasError = store.error !== null;
-    if (items.length === 0 && !hasError)
-        return null;
-    return (_jsxs("section", { className: "sketch-change", "data-test": "sketches", children: [_jsxs("div", { className: "sketch-change__title", children: ["Sketch annotations ", _jsx("span", { children: items.length })] }), store.error ? _jsx(StatusCallout, { tone: "warning", "data-test": "sketch-storage-error", children: store.error }) : null, items.length > 0 ? items.map((item) => _jsx(SketchRow, { item: item }, `${item.document.id}:${item.document.revision}`)) : (_jsx(StatusCallout, { tone: "warning", children: "Saved sketches need recovery. Reload the page to try again." }))] }));
-}

package/dist/inspector/sketch/SketchEntryButton.d.ts

@@ -1,4 +0,0 @@
-import type { ReactElement } from "react";
-export declare function SketchEntryButton({ hostElement }: {
-    readonly hostElement: HTMLElement | null;
-}): ReactElement;

package/dist/inspector/sketch/SketchEntryButton.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconPencil } from "@tabler/icons-react";
-import { Button } from "../ui/Button.js";
-import { isInlineTextEditingActive } from "../inline-text/inlineTextEditor.js";
-import { useSketchInteractionActive } from "./interaction.js";
-import { startSketchCapture } from "./SketchWorkspace.js";
-export function SketchEntryButton({ hostElement }) {
-    const active = useSketchInteractionActive();
-    const disabled = active || isInlineTextEditingActive();
-    return (_jsxs(Button, { variant: "quiet", size: "compact", className: "panel__sketch-button", type: "button", "data-test": "sketch-entry", "aria-label": "Sketch viewport", disabled: disabled || !hostElement, onClick: () => startSketchCapture(hostElement), children: [_jsx(IconPencil, { size: "var(--icon-size-small)", stroke: 1.8, "aria-hidden": "true" }), _jsx("span", { className: "panel__sketch-label", children: "Sketch" })] }));
-}

package/dist/inspector/sketch/SketchLayersPanel.d.ts

@@ -1,2 +0,0 @@
-import type { ReactElement } from "react";
-export declare function SketchLayersPanel(): ReactElement | null;

package/dist/inspector/sketch/SketchLayersPanel.js

@@ -1,71 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { IconCheck, IconCopy, IconX } from "@tabler/icons-react";
-import { Button } from "../ui/Button.js";
-import { IconButton } from "../ui/IconButton.js";
-import { copyImageToClipboard } from "./raster.js";
-import { closeSketchNote } from "./sketchNote.js";
-import { removeSketch, useSketchStore } from "./store.js";
-import { useFocusedCardId, useSelectedCardId } from "../canvas/canvasStore.js";
-import { sketchBelongsToCard, useDrafts } from "../drafts/store.js";
-import { Tooltip } from "../ui/Tooltip.js";
-function SketchThumbnail({ item }) {
-    const [url, setUrl] = useState(null);
-    const hasMarks = item.document.strokes.length > 0 || (item.document.annotations?.length ?? 0) > 0;
-    useEffect(() => {
-        if (!hasMarks) {
-            setUrl(null);
-            return;
-        }
-        if (typeof URL === "undefined" || typeof URL.createObjectURL !== "function")
-            return;
-        const next = URL.createObjectURL(item.document.annotatedImage);
-        setUrl(next);
-        return () => URL.revokeObjectURL(next);
-    }, [hasMarks, item.document.annotatedImage]);
-    return hasMarks && url ? (_jsx("img", { className: "sketch-layers__thumbnail", src: url, alt: "", "aria-hidden": "true" })) : (_jsx("span", { className: "sketch-layers__thumbnail sketch-layers__thumbnail--empty", "aria-hidden": "true" }));
-}
-function SketchLayer({ item, index, multiple, }) {
-    const [copied, setCopied] = useState(false);
-    const [error, setError] = useState(null);
-    const busy = item.status === "dispatching" || item.status === "handing-off";
-    async function copyImage() {
-        setError(null);
-        try {
-            await copyImageToClipboard(item.document.annotatedImage);
-            setCopied(true);
-            window.setTimeout(() => setCopied(false), 1500);
-        }
-        catch (copyError) {
-            setError(copyError instanceof Error ? copyError.message : "The sketch image could not be copied.");
-        }
-    }
-    async function deleteLayer() {
-        setError(null);
-        try {
-            if (!await removeSketch(item.document.id)) {
-                setError("This sketch is being sent and cannot be deleted yet.");
-            }
-            else {
-                closeSketchNote();
-            }
-        }
-        catch (deleteError) {
-            setError(deleteError instanceof Error ? deleteError.message : "The sketch could not be deleted.");
-        }
-    }
-    return (_jsxs("div", { className: "sketch-layers__item", "data-test": "sketch-layer", "data-sketch-id": item.document.id, children: [_jsxs(Button, { className: "sketch-layers__copy", variant: "primary", type: "button", "data-test": "sketch-layer-copy-image", onClick: () => void copyImage(), disabled: busy, children: [_jsxs("span", { className: "sketch-layers__copy-label", children: [copied
-                                ? _jsx(IconCheck, { size: "var(--icon-size-small)", "aria-hidden": "true" })
-                                : _jsx(IconCopy, { size: "var(--icon-size-small)", stroke: "var(--icon-stroke-width)", "aria-hidden": "true" }), _jsx("span", { className: "sketch-layers__name", children: copied ? "Copied" : `Copy sketch note${multiple ? ` ${index + 1}` : ""}` })] }), _jsx(SketchThumbnail, { item: item })] }), _jsx(Tooltip, { children: _jsx(IconButton, { className: "sketch-layers__delete", variant: "quiet", size: "compact", label: "Delete sketch", "data-test": "sketch-layer-delete", onClick: () => void deleteLayer(), disabled: busy, children: _jsx(IconX, { size: "var(--icon-size-small)", "aria-hidden": "true" }) }) }), error ? _jsx("span", { className: "sketch-layers__error", role: "status", children: error }) : null] }));
-}
-export function SketchLayersPanel() {
-    const { items } = useSketchStore();
-    useDrafts();
-    const selectedCardId = useSelectedCardId();
-    const focusedCardId = useFocusedCardId();
-    const cardId = selectedCardId ?? focusedCardId;
-    const visibleItems = items.filter((item) => sketchBelongsToCard(item.document, cardId));
-    if (visibleItems.length === 0)
-        return null;
-    return (_jsx("section", { className: "sketch-layers", "data-test": "sketch-layers", "aria-label": "Sketch layers", children: visibleItems.map((item, index) => (_jsx(SketchLayer, { item: item, index: index, multiple: visibleItems.length > 1 }, `${item.document.id}:${item.document.revision}`))) }));
-}

package/dist/inspector/styleEditors/InsetSection.d.ts

@@ -1,15 +0,0 @@
-import type { ReactElement } from "react";
-import type { TokenEntry } from "../../css/model/index.js";
-import type { ResolvedProperty } from "../../css/model/index.js";
-import type { SelectedElement } from "../selection/selectionStore.js";
-export interface InsetSectionProps {
-    element: SelectedElement;
-    entries?: TokenEntry[];
-    tokenRows?: ResolvedProperty[];
-    onAfterEdit?: () => void;
-}
-/**
- * Keeps the positioned-element inset editor available as a standalone
- * section for callers that render it outside SpacingBox.
- */
-export declare function InsetSection({ element, entries, tokenRows, onAfterEdit, }: InsetSectionProps): ReactElement | null;

package/dist/inspector/styleEditors/InsetSection.js

@@ -1,15 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { getStateStyleValue } from "../shell/stateValue.js";
-import { projectInspectorValues } from "../spacing/projection.js";
-import { SpacingField } from "./SpacingBox.js";
-/**
- * Keeps the positioned-element inset editor available as a standalone
- * section for callers that render it outside SpacingBox.
- */
-export function InsetSection({ element, entries = [], tokenRows = [], onAfterEdit, }) {
-    const el = element.domElement;
-    const position = getStateStyleValue(el, "position", "static").trim().toLowerCase();
-    if (position !== "relative" && position !== "sticky")
-        return null;
-    return (_jsx(SpacingField, { property: "inset", projection: projectInspectorValues(el, tokenRows).spacing.inset, domElement: el, entries: entries, tokenRows: tokenRows, onAfterEdit: onAfterEdit }));
-}