@kritzel/editor 0.4.31 → 0.4.33

package/dist/components/{p-BvG3JO85.js → p-BMi-i7sC.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
 
 const kritzelShapeFillCss = () => `:host{display:flex;flex-direction:column;gap:12px;padding:0;box-sizing:border-box}.fill-row{display:flex;align-items:center;gap:4px}.fill-option{display:flex;justify-content:center;align-items:center;width:48px;height:32px;border-radius:6px;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box;background:var(--kritzel-shape-fill-option-background, #ffffff);padding:4px;transition:background-color 0.15s ease, border-color 0.15s ease}.fill-option:hover{background-color:var(--kritzel-shape-fill-hover-background-color, #ebebeb)}.fill-option.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-shape-fill-selected-background-color, #ebebeb)}.fill-option:focus{outline:none;box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.fill-icon{width:100%;height:100%}`;
 
@@ -27,10 +27,10 @@ const KritzelShapeFill = /*@__PURE__*/ proxyCustomElement(class KritzelShapeFill
         return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
     }
     render() {
-        return (h(Host, { key: 'ec214708dd4210e0c36734cb81fba76849114f9b' }, h("div", { key: 'd64bacdb7c50b31f3c460bdf2e939b4159d4d000', class: "fill-row" }, h("button", { key: '812735be08265145a13ab116e7153fd684f8b77f', class: {
+        return (h(Host, { key: '6d38a9af2e4c4c7f86ab994c63fc074007c86b48' }, h("div", { key: 'cf58f26cb0e56e274873d11024209c6908d317bb', class: "fill-row" }, h("button", { key: 'c75eed70fe0c2fcbf0fd136bb6fce75b2dbfb45d', class: {
                 'fill-option': true,
                 'selected': this.value === 'transparent',
-            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: 'cb5caf2db8aece4bef2eebca37e7ac36383bb450', class: {
+            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '5d6ede439b5d5e55598cd8c20b5851fb9f210463', class: {
                 'fill-option': true,
                 'selected': this.value === 'filled',
             }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));

package/dist/components/{p-Cy_cLtOP.js → p-BZ0ReYAA.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-Dzr6X2aj.js';
 
 var cjs = {};
 
@@ -42,6 +42,19 @@ class ObjectHelper {
     static isClass(object, className) {
         return !!object && object.__class__ === className;
     }
+    static isKritzelEmbeddedObject(object) {
+        if (!object || typeof object !== 'object') {
+            return false;
+        }
+        const candidate = object;
+        return (typeof candidate.isInteractive === 'boolean' &&
+            typeof candidate.isSelected === 'boolean' &&
+            typeof candidate.mount === 'function' &&
+            typeof candidate.unmount === 'function' &&
+            typeof candidate.setIsInteractive === 'function' &&
+            typeof candidate.hasFocusedInputElement === 'function' &&
+            typeof candidate.getEmbeddedContentRoots === 'function');
+    }
     static isKritzelExportable(object) {
         if (!object || typeof object !== 'object') {
             return false;
@@ -1291,6 +1304,7 @@ const lightTheme = {
         dividerColor: '#e0e0e0',
         focusColor: '#333333',
         focusRingColor: '#333333',
+        fontFamily: 'sans-serif',
         iconColor: 'currentColor',
         scrollbarThumbColor: '#ebebeb',
         textPrimary: '#000000',
@@ -1379,7 +1393,6 @@ const lightTheme = {
         closeButtonColor: '#333333',
         closeButtonHoverBackground: 'hsl(0, 0%, 0%, 4.3%)',
         closeButtonHoverColor: '#000000',
-        fontFamily: 'inherit',
         footerBorder: '1px solid #ebebeb',
         headerBorder: '1px solid #ebebeb',
         titleColor: '#000000',
@@ -1414,11 +1427,6 @@ const lightTheme = {
         loadingOverlayColor: '#333333',
         loadingOverlaySpinnerActiveColor: '#333333',
         loadingOverlaySpinnerColor: '#cccccc',
-        syncIndicatorBackground: 'rgba(255, 255, 255, 0.92)',
-        syncIndicatorColor: '#334155',
-        syncIndicatorSpinnerColor: '#007AFF',
-        syncIndicatorSpinnerTrack: 'rgba(148, 163, 184, 0.35)',
-        syncIndicatorZIndex: '10001',
     },
     snap: {
         indicatorFill: 'rgba(59, 130, 246, 0.3)',
@@ -1638,6 +1646,7 @@ const darkTheme = {
         dividerColor: '#3a3a3a',
         focusColor: '#ffffff',
         focusRingColor: '#ffffff',
+        fontFamily: 'sans-serif',
         iconColor: 'currentColor',
         scrollbarThumbColor: '#555555',
         textPrimary: '#ffffff',
@@ -1760,11 +1769,6 @@ const darkTheme = {
         loadingOverlayColor: '#e0e0e0',
         loadingOverlaySpinnerActiveColor: '#e0e0e0',
         loadingOverlaySpinnerColor: '#555555',
-        syncIndicatorBackground: 'rgba(30, 30, 30, 0.95)',
-        syncIndicatorColor: '#e0e0e0',
-        syncIndicatorSpinnerColor: '#0A84FF',
-        syncIndicatorSpinnerTrack: 'rgba(160, 160, 160, 0.3)',
-        syncIndicatorZIndex: '10001',
     },
     snap: {
         indicatorFill: 'rgba(10, 132, 255, 0.35)',
@@ -3141,7 +3145,7 @@ class KritzelLine extends KritzelBaseObject {
     }
 }
 
-const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,                height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
+const kritzelAwarenessCursorsCss = () => `:host{display:block;position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:1}.awareness-cursor{position:absolute;top:0;left:0;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               opacity 300ms ease;will-change:transform}.awareness-cursor.stale{opacity:0}.awareness-cursor.tracking-object{transition-duration:0ms}.cursor-arrow{filter:drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3))}.cursor-label{position:absolute;left:16px;top:16px;white-space:nowrap;font-family:var(--kritzel-awareness-font-family, var(--kritzel-global-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;user-select:none}.edge-indicator{position:absolute;top:-12px;left:-12px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               opacity 300ms ease;will-change:transform;pointer-events:auto;user-select:none;cursor:pointer}.edge-indicator.stale{opacity:0}.edge-indicator.tracking-object{transition-duration:0ms}.edge-arrow{position:absolute;filter:drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));transition:opacity 300ms ease}.edge-arrow.stale{opacity:0}.edge-label{position:absolute;white-space:nowrap;font-family:var(--kritzel-awareness-font-family, var(--kritzel-global-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));font-size:var(--kritzel-awareness-cursor-label-font-size, 12px);color:var(--kritzel-awareness-cursor-label-text-color, #ffffff);padding:2px 8px;border-radius:4px;line-height:1.4;font-weight:500;pointer-events:none;opacity:0;transform-origin:center;transition:opacity 150ms ease}.edge-indicator:hover .edge-label{opacity:1}.remote-selection-box{position:absolute;top:0;left:0;border-width:2px;border-style:solid;pointer-events:none;will-change:transform, width, height;transition:transform var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               width var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out,               height var(--kritzel-awareness-cursor-transition-duration, 100ms) ease-out}`;
 
 const STALE_THRESHOLD_MS = 10_000;
 const REMOVE_THRESHOLD_MS = 30_000;
@@ -3350,7 +3354,7 @@ const KritzelAwarenessCursors = /*@__PURE__*/ proxyCustomElement(class KritzelAw
     }
     render() {
         const cursors = Array.from(this.remoteCursors.values());
-        return (h(Host, { key: 'cf00004efc0c60e81bd6b2f19ecb7ca066396980' }, cursors.map(remoteCursor => {
+        return (h(Host, { key: '2021875ea3e430c04da438dc5b7a2c22f119ea67' }, cursors.map(remoteCursor => {
             if (!remoteCursor.cursor)
                 return null;
             // When a remote user is actively drawing, derive cursor position from