nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/ui/customCursors.js

@@ -1,4 +1,4 @@
-const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #F5F5F4;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n\n  --accent: #0096ff;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: rgba(223, 75, 75, 0.2);\n  --success: #2e7d52;\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --control-height-xlarge: 40px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
+const foundationStyles = ":host {\n  all: initial;\n  --surface-panel: #fff;\n  --surface-control: var(--surface-well);\n  --surface-control-hover: var(--surface-well-2x);\n  --surface-raised: #FAFAFA;\n  --surface-raised-2x: #fff ;\n  --surface-raised-hover: #F5F5F4;\n  --surface-well: hsla(0, 0%, 0%, 0.05);\n  --surface-well-2x: hsla(0, 0%, 0%, 0.10);\n  /* Inverse surfaces mirror the landing palette for dark, high-emphasis controls. */\n  --surface-inverse: #1f201e;\n  --surface-inverse-hover: #343532;\n\n  --border-subtle: hsla(0, 0%, 0%, 0.1);\n  --border-medium: hsla(0, 0%, 0%, 0.2);\n  --border-strong: #d8d8d8;\n\n  --text-primary: #242424;\n  --text-secondary: #6f6f6f;\n  --text-muted: #777777;\n  --text-muted-subtle: #a1a1a1;\n  --text-inverse: #fff;\n\n  --accent: #0096ff;\n  --linked: #8b5cf6;\n  --accent-surface: rgba(0, 176, 255, 0.15);\n  --warning: #d97706;\n  --warning-text: #9a5b00;\n  --warning-surface: #fff6e5;\n  --danger: #df4b4b;\n  --danger-text: #bd3636;\n  --danger-surface: rgba(223, 75, 75, 0.2);\n  --success: #2e7d52;\n\n  --space-0: 0;\n  --space-4: 4px;\n  --space-8: 8px;\n  --space-12: 12px;\n  --space-16: 16px;\n  --space-20: 20px;\n  --space-24: 24px;\n  --space-32: 32px;\n  --space-40: 40px;\n  --space-48: 48px;\n\n  /* Radius */\n  --radius-0: 0;\n  --radius-4: 4px;\n  --radius-6: 6px;\n  --radius-8: 8px;\n  --radius-12: 12px;\n  --radius-16: 16px;\n  --radius-20: 20px;\n  --radius-24: 24px;\n  --radius-pill: 999px;\n\n  --radius-control: var(--radius-8);\n  --shadow-outline: 0 0 0 1px rgba(0, 0, 0, 0.05);\n  --shadow-popup: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 16px rgba(0, 0, 0, 0.10);\n  --shadow-control-outline: 0 0 0 0.5px rgba(0, 0, 0, 0.25);\n  --shadow-control: inset 0 -2px 0 rgba(0, 0, 0, 0.03), var(--shadow-control-outline);\n  --z-index: 2147483647;\n\n  --font-family: \"Inter Variable\", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif;\n  --font-size-base: 12px;\n  --font-size-small: 10px;\n  --font-weight-base: 400;\n  --font-weight-label: 600;\n\n  /* Control semantic sizes */\n  --control-height-small: 24px;\n  --control-height-large: 32px;\n  --control-height-xlarge: 40px;\n  --label-column: 104px;\n\n  --icon-size-small: 16px;\n  --icon-size-large: 20px;\n  --icon-stroke-width: 1.5px;\n\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index);\n  pointer-events: none;\n  font-family: var(--font-family);\n  background: transparent;\n  box-sizing: border-box;\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton,\ninput,\nselect {\n  font-family: inherit;\n}\n";
 /** Custom property the renderer sets on its root to drive the interaction cursor. */
 export const INTERACTION_CURSOR_PROPERTY = "--nudge-ui-interaction-cursor";
 const DESIGN_SELECT_CURSOR_SVG = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -83,19 +83,31 @@ const SKETCH_CURSOR_SVG = `<svg width="20" height="20" viewBox="0 0 20 20" fill=
 </clipPath>
 </defs>
 </svg>`;
-function cursorDataUrl(svg) {
+const ERASER_CURSOR_SVG = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="10" cy="10" r="7" fill="white" fill-opacity="0.6" stroke="black"/>
+<circle cx="10" cy="10" r="8" stroke="white" stroke-opacity="0.8"/>
+</svg>`;
+/** Set on globalThis before the bundle evaluates; pages blocking data: images need the extension's origin instead. */
+const CURSOR_IMAGE_BASE = globalThis.__NUDGE_UI_CURSOR_IMAGE_BASE__;
+function cursorImageUrl(name, svg) {
+    if (typeof CURSOR_IMAGE_BASE === "string")
+        return `${CURSOR_IMAGE_BASE}${name}.svg`;
     return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 }
-export const DESIGN_SELECT_CURSOR_URL = cursorDataUrl(DESIGN_SELECT_CURSOR_SVG);
-export const DRAG_CURSOR_URL = cursorDataUrl(DRAG_CURSOR_SVG);
-export const SKETCH_CURSOR_URL = cursorDataUrl(SKETCH_CURSOR_SVG);
+export const DESIGN_SELECT_CURSOR_URL = cursorImageUrl("design-select", DESIGN_SELECT_CURSOR_SVG);
+export const DRAG_CURSOR_URL = cursorImageUrl("drag", DRAG_CURSOR_SVG);
+export const SKETCH_CURSOR_URL = cursorImageUrl("sketch", SKETCH_CURSOR_SVG);
+export const ERASER_CURSOR_URL = cursorImageUrl("eraser", ERASER_CURSOR_SVG);
 export const DESIGN_SELECT_CURSOR = `url("${DESIGN_SELECT_CURSOR_URL}") 3 4, default`;
 /** Cursor SVGs are separate images, so resolve CSS tokens before encoding them. */
 export function createCommentCursor(tokenSource) {
+    return `url("${cursorImageUrl("comment", commentCursorSvg(tokenSource))}") 3 20, crosshair`;
+}
+function commentCursorSvg(tokenSource) {
     const styles = tokenSource?.ownerDocument.defaultView?.getComputedStyle(tokenSource);
     const token = (name) => styles?.getPropertyValue(name).trim()
         || foundationStyles.match(new RegExp(`${name}:\\s*([^;]+);`))[1].trim();
-    const svg = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    return `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g clip-path="url(#comment-clip)"><g filter="url(#comment-shadow)">
 <path d="M4.3 16.1L3 20L7.7 19C11.659 20.922 16.608 19.942 19.274 16.707C21.94 13.472 21.5 8.983 18.245 6.206C14.99 3.43 9.926 3.225 6.4 5.726C2.874 8.228 1.976 12.663 4.3 16.1Z" fill="${token("--text-primary")}" stroke="${token("--surface-raised-2x")}" stroke-width="${token("--icon-stroke-width")}" stroke-linecap="round" stroke-linejoin="round"/>
 </g></g>
@@ -111,12 +123,22 @@ export function createCommentCursor(tokenSource) {
 </filter>
 <clipPath id="comment-clip"><rect width="24" height="24" fill="white"/></clipPath>
 </defs></svg>`;
-    return `url("${cursorDataUrl(svg)}") 3 20, crosshair`;
+}
+/** Image files for hosts that serve cursors from a base URL; the comment cursor uses default tokens. */
+export function cursorImageFiles() {
+    return {
+        "design-select": DESIGN_SELECT_CURSOR_SVG,
+        drag: DRAG_CURSOR_SVG,
+        sketch: SKETCH_CURSOR_SVG,
+        eraser: ERASER_CURSOR_SVG,
+        comment: commentCursorSvg(),
+    };
 }
 export const COMMENT_CURSOR = createCommentCursor();
 export const PAN_CURSOR = "grab";
 export const DRAG_CURSOR = `url("${DRAG_CURSOR_URL}") ${DRAG_CURSOR_HOTSPOT.x} ${DRAG_CURSOR_HOTSPOT.y}, grab`;
 export const SKETCH_CURSOR = `url("${SKETCH_CURSOR_URL}") 3 17, crosshair`;
+export const ERASER_CURSOR = `url("${ERASER_CURSOR_URL}") 10 10, cell`;
 export function rendererCursorValue(cursor, commentCursor = COMMENT_CURSOR) {
     return cursor === "comment" ? commentCursor : cursor === "drag" ? PAN_CURSOR : DESIGN_SELECT_CURSOR;
 }