kritzel-stencil 0.4.7 → 0.4.8

package/dist/components/kritzel-controls.js

@@ -1,4 +1,4 @@
-import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-DkH3hoLz.js';
+import { K as KritzelControls$1, d as defineCustomElement$1 } from './p-BknTMcbz.js';
 
 const KritzelControls = KritzelControls$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-editor.js

@@ -1,12 +1,12 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
 import { K as KritzelIconRegistry, d as defineCustomElement$s } from './p-CdR76C4L.js';
-import { v as DEFAULT_STROKE_SIZES, w as DEFAULT_FONT_SIZES, S as ShapeType, m as KritzelSelectionTool, f as KritzelBrushTool, h as KritzelEraserTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, i as KritzelImageTool, s as KritzelAlignment, x as DEFAULT_SYNC_CONFIG, y as KritzelSelectionGroup, z as KritzelSelectionBox, B as KritzelKeyboardHelper, C as defineCustomElement$x } from './p-C2yi85nc.js';
-import { D as DEFAULT_COLOR_PALETTE, T as ThemeHelper, d as darkTheme, l as lightTheme } from './p-BmyTdQGy.js';
+import { v as DEFAULT_STROKE_SIZES, w as DEFAULT_FONT_SIZES, S as ShapeType, m as KritzelSelectionTool, f as KritzelBrushTool, h as KritzelEraserTool, g as KritzelLineTool, k as KritzelShapeTool, j as KritzelTextTool, i as KritzelImageTool, s as KritzelAlignment, x as DEFAULT_SYNC_CONFIG, y as KritzelSelectionGroup, z as KritzelSelectionBox, B as KritzelKeyboardHelper, C as defineCustomElement$x } from './p-D8bHNNEm.js';
+import { D as DEFAULT_COLOR_PALETTE, T as ThemeHelper, d as darkTheme, l as lightTheme } from './p-CURiiQfq.js';
 import { D as DEFAULT_TEXT_TOOL_AVAILABLE_FONTS, r as resolveTextToolAvailableFonts, K as KritzelFontRegistry } from './p-DJkKlUyZ.js';
 import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$4 } from './p-CwuGA058.js';
 import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
 import { O as ObjectHelper } from './p-Dd-pMvlr.js';
-import { d as defineCustomElement$J } from './p-Ka7OWbnk.js';
+import { d as defineCustomElement$J } from './p-0H4HOJjy.js';
 import * as Y from 'yjs';
 import 'y-indexeddb';
 import 'y-websocket';
@@ -14,10 +14,10 @@ import { d as defineCustomElement$L } from './p-yD_3Z3K1.js';
 import { d as defineCustomElement$K } from './p-DXcjIb_a.js';
 import { d as defineCustomElement$I } from './p-BYO6pz8T.js';
 import { d as defineCustomElement$H } from './p-oGAPPwAL.js';
-import { d as defineCustomElement$G } from './p-zd7zXld8.js';
-import { d as defineCustomElement$F } from './p-1nG2hxfJ.js';
+import { d as defineCustomElement$G } from './p-CMZ09rB1.js';
+import { d as defineCustomElement$F } from './p-9m1cAVwG.js';
 import { d as defineCustomElement$E } from './p-BxpKq94F.js';
-import { d as defineCustomElement$D } from './p-DkH3hoLz.js';
+import { d as defineCustomElement$D } from './p-BknTMcbz.js';
 import { d as defineCustomElement$C } from './p-BO9BvTtK.js';
 import { d as defineCustomElement$B } from './p-BU-FZuj0.js';
 import { d as defineCustomElement$A } from './p-Cm33td2O.js';
@@ -39,14 +39,14 @@ import { d as defineCustomElement$i } from './p-DIMNEOTW.js';
 import { d as defineCustomElement$h } from './p-BzrxIesp.js';
 import { d as defineCustomElement$g } from './p-D09kgc5Q.js';
 import { d as defineCustomElement$f } from './p-BLOPBDUF.js';
-import { d as defineCustomElement$e } from './p-D0oplzU-.js';
+import { d as defineCustomElement$e } from './p-DgA865Tp.js';
 import { d as defineCustomElement$d } from './p-BFYtCsZu.js';
 import { d as defineCustomElement$c } from './p-BMRln59F.js';
 import { d as defineCustomElement$b } from './p-BzJEwFtn.js';
 import { d as defineCustomElement$a } from './p-D8TOEhPY.js';
-import { d as defineCustomElement$9 } from './p-Bm_BWQa4.js';
+import { d as defineCustomElement$9 } from './p-Ckm1Aq0V.js';
 import { d as defineCustomElement$8 } from './p-CM1duewg.js';
-import { d as defineCustomElement$7 } from './p-BZxOukfY.js';
+import { d as defineCustomElement$7 } from './p-Cr2z2UBL.js';
 import { d as defineCustomElement$6 } from './p-DrQRChp3.js';
 import { d as defineCustomElement$5 } from './p-DwY5pghH.js';
 import { d as defineCustomElement$3 } from './p-DDbO5q-e.js';

package/dist/components/kritzel-engine.js

@@ -1,4 +1,4 @@
-import { G as KritzelEngine$1, C as defineCustomElement$1 } from './p-C2yi85nc.js';
+import { G as KritzelEngine$1, C as defineCustomElement$1 } from './p-D8bHNNEm.js';
 
 const KritzelEngine = KritzelEngine$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-settings.js

@@ -1,4 +1,4 @@
-import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-D0oplzU-.js';
+import { K as KritzelSettings$1, d as defineCustomElement$1 } from './p-DgA865Tp.js';
 
 const KritzelSettings = KritzelSettings$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-stroke-size.js

@@ -1,4 +1,4 @@
-import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-Bm_BWQa4.js';
+import { K as KritzelStrokeSize$1, d as defineCustomElement$1 } from './p-Ckm1Aq0V.js';
 
 const KritzelStrokeSize = KritzelStrokeSize$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-tool-config.js

@@ -1,4 +1,4 @@
-import { a as KritzelToolConfig$1, d as defineCustomElement$1 } from './p-BZxOukfY.js';
+import { a as KritzelToolConfig$1, d as defineCustomElement$1 } from './p-Cr2z2UBL.js';
 
 const KritzelToolConfig = KritzelToolConfig$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-Ka7OWbnk.js → p-0H4HOJjy.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
 import { O as ObjectHelper } from './p-Dd-pMvlr.js';
-import { a as KritzelColorHelper } from './p-BmyTdQGy.js';
+import { a as KritzelColorHelper } from './p-CURiiQfq.js';
 
 class KritzelGeometryHelper {
     static doPolygonsIntersect(polygon1, polygon2) {
@@ -1950,7 +1950,7 @@ class KritzelLine extends KritzelBaseObject {
     getArrowFill(end) {
         const config = end === 'start' ? this.arrows?.start : this.arrows?.end;
         const color = config?.fill ?? this.stroke;
-        return KritzelColorHelper.resolveThemeColor(color);
+        return KritzelColorHelper.resolveThemeColor(color, this._core?.themeManager?.currentTheme);
     }
     /**
      * Generates SVG path data for an arrow head based on the given style.

package/dist/components/{p-1nG2hxfJ.js → p-9m1cAVwG.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { a as KritzelColorHelper } from './p-BmyTdQGy.js';
-import { d as defineCustomElement$1 } from './p-zd7zXld8.js';
+import { a as KritzelColorHelper } from './p-CURiiQfq.js';
+import { d as defineCustomElement$1 } from './p-CMZ09rB1.js';
 
 const kritzelColorPaletteCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;width:100%;box-sizing:border-box}.color-grid{width:100%;display:grid;grid-template-columns:repeat(6, 32px);gap:8px;justify-items:center;overflow:hidden;height:40px;transition:height 0.1s ease-in-out}.color-grid.expanded{height:500px}.color-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.color-container:hover{background-color:var(--kritzel-color-palette-hover-background-color, #ebebeb)}.color-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-color-palette-selected-background-color)}`;
 

package/dist/components/{p-DkH3hoLz.js → p-BknTMcbz.js}

@@ -1,9 +1,9 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
 import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
-import { K as KritzelToolConfigHelper, d as defineCustomElement$3 } from './p-BZxOukfY.js';
-import { a as KritzelColorHelper } from './p-BmyTdQGy.js';
-import { d as defineCustomElement$e } from './p-zd7zXld8.js';
-import { d as defineCustomElement$d } from './p-1nG2hxfJ.js';
+import { K as KritzelToolConfigHelper, d as defineCustomElement$3 } from './p-Cr2z2UBL.js';
+import { a as KritzelColorHelper } from './p-CURiiQfq.js';
+import { d as defineCustomElement$e } from './p-CMZ09rB1.js';
+import { d as defineCustomElement$d } from './p-9m1cAVwG.js';
 import { d as defineCustomElement$c } from './p-Df3BwVGy.js';
 import { d as defineCustomElement$b } from './p-DgnK50xO.js';
 import { d as defineCustomElement$a } from './p-djJSnjAX.js';
@@ -12,7 +12,7 @@ import { d as defineCustomElement$8 } from './p-CdR76C4L.js';
 import { d as defineCustomElement$7 } from './p-CXpv9Rxe.js';
 import { d as defineCustomElement$6 } from './p-BzrxIesp.js';
 import { d as defineCustomElement$5 } from './p-BFYtCsZu.js';
-import { d as defineCustomElement$4 } from './p-Bm_BWQa4.js';
+import { d as defineCustomElement$4 } from './p-Ckm1Aq0V.js';
 import { d as defineCustomElement$2 } from './p-DrQRChp3.js';
 import { d as defineCustomElement$1 } from './p-DwY5pghH.js';
 

package/dist/components/{p-zd7zXld8.js → p-CMZ09rB1.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { a as KritzelColorHelper } from './p-BmyTdQGy.js';
+import { a as KritzelColorHelper } from './p-CURiiQfq.js';
 
 const kritzelColorCss = () => `:host{display:flex}.checkerboard-bg{background:repeating-conic-gradient(       var(--kritzel-checkerboard-color-dark, #ccc) 0% 25%,       var(--kritzel-checkerboard-color-light, #fff) 0% 50%     )     50% / 8px 8px;position:relative;overflow:hidden}.color-circle{width:24px;height:24px;border-radius:50%;box-sizing:border-box;display:block}.color-circle.white{border:1px solid var(--kritzel-color-palette-circle-border-color, #dddcdc)}`;
 

package/dist/components/{p-BmyTdQGy.js → p-CURiiQfq.js}

@@ -173,7 +173,9 @@ const lightTheme = {
     },
     snap: {
         indicatorFill: 'rgba(59, 130, 246, 0.3)',
+        indicatorFillInactive: 'rgba(59, 130, 246, 0.18)',
         indicatorStroke: '#007bff',
+        indicatorStrokeInactive: 'rgba(59, 130, 246, 0.5)',
         lineStroke: 'rgba(0, 0, 0, 0.2)',
     },
     fontSize: {
@@ -510,7 +512,9 @@ const darkTheme = {
     },
     snap: {
         indicatorFill: 'rgba(10, 132, 255, 0.35)',
+        indicatorFillInactive: 'rgba(10, 132, 255, 0.2)',
         indicatorStroke: '#0A84FF',
+        indicatorStrokeInactive: 'rgba(255, 255, 255, 0.45)',
         lineStroke: 'rgba(255, 255, 255, 0.35)',
     },
     fontSize: {
@@ -710,6 +714,7 @@ const darkTheme = {
 };
 
 class ThemeHelper {
+    static appliedVariableNames = new WeakMap();
     /**
      * Converts a camelCase string to kebab-case.
      * @example ThemeHelper.camelToKebab('controlHoverBackgroundColor') → 'control-hover-background-color'
@@ -775,7 +780,14 @@ class ThemeHelper {
      */
     static applyThemeToElement(element, theme) {
         const variables = ThemeHelper.flattenThemeToVariables(theme);
+        const previousVariableNames = ThemeHelper.appliedVariableNames.get(element);
+        for (const name of previousVariableNames ?? []) {
+            if (!variables.has(name)) {
+                element.style.removeProperty(name);
+            }
+        }
         ThemeHelper.applyVariablesToElement(element, variables);
+        ThemeHelper.appliedVariableNames.set(element, new Set(variables.keys()));
     }
 }
 

package/dist/components/{p-Bm_BWQa4.js → p-Ckm1Aq0V.js}

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { d as defineCustomElement$1 } from './p-zd7zXld8.js';
+import { d as defineCustomElement$1 } from './p-CMZ09rB1.js';
 
 const kritzelStrokeSizeCss = () => `:host{display:flex;align-items:flex-start;gap:0;padding:0;width:100%;box-sizing:border-box}.size-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill, 32px);gap:8px;justify-items:center}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}`;
 

package/dist/components/{p-BZxOukfY.js → p-Cr2z2UBL.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
-import { a as KritzelColorHelper } from './p-BmyTdQGy.js';
+import { a as KritzelColorHelper } from './p-CURiiQfq.js';
 import { r as resolveTextToolAvailableFonts, K as KritzelFontRegistry } from './p-DJkKlUyZ.js';
-import { d as defineCustomElement$b } from './p-zd7zXld8.js';
-import { d as defineCustomElement$a } from './p-1nG2hxfJ.js';
+import { d as defineCustomElement$b } from './p-CMZ09rB1.js';
+import { d as defineCustomElement$a } from './p-9m1cAVwG.js';
 import { d as defineCustomElement$9 } from './p-Df3BwVGy.js';
 import { d as defineCustomElement$8 } from './p-DgnK50xO.js';
 import { d as defineCustomElement$7 } from './p-djJSnjAX.js';
@@ -11,7 +11,7 @@ import { d as defineCustomElement$5 } from './p-CdR76C4L.js';
 import { d as defineCustomElement$4 } from './p-CXpv9Rxe.js';
 import { d as defineCustomElement$3 } from './p-BzrxIesp.js';
 import { d as defineCustomElement$2 } from './p-BFYtCsZu.js';
-import { d as defineCustomElement$1 } from './p-Bm_BWQa4.js';
+import { d as defineCustomElement$1 } from './p-Ckm1Aq0V.js';
 
 class KritzelToolConfigHelper {
     static getToolConfig(tool) {

package/dist/components/{p-C2yi85nc.js → p-D8bHNNEm.js}

@@ -1,8 +1,8 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
 import { a as KritzelMouseButton, d as defineCustomElement$5 } from './p-Cm33td2O.js';
-import { K as KritzelBaseObject, e as KritzelMathHelper, f as KritzelGeometryHelper, a as KritzelPath, b as KritzelLine, d as defineCustomElement$6 } from './p-Ka7OWbnk.js';
+import { K as KritzelBaseObject, e as KritzelMathHelper, f as KritzelGeometryHelper, a as KritzelPath, b as KritzelLine, d as defineCustomElement$6 } from './p-0H4HOJjy.js';
 import { c as commonjsGlobal } from './p-BFTU3MAI.js';
-import { a as KritzelColorHelper, D as DEFAULT_COLOR_PALETTE, K as KritzelThemeManager } from './p-BmyTdQGy.js';
+import { a as KritzelColorHelper, D as DEFAULT_COLOR_PALETTE, K as KritzelThemeManager } from './p-CURiiQfq.js';
 import { K as KritzelDevicesHelper } from './p-jGOpkGDl.js';
 import { K as KritzelFontRegistry, r as resolveTextToolAvailableFonts } from './p-DJkKlUyZ.js';
 import { A as ABSOLUTE_SCALE_MAX, a as ABSOLUTE_SCALE_MIN, d as defineCustomElement$1 } from './p-CwuGA058.js';
@@ -13877,7 +13877,7 @@ class KritzelText extends KritzelBaseObject {
         }
         element.style.fontFamily = KritzelFontRegistry.resolveCssFontFamily(this.fontFamily);
         element.style.fontSize = `${this.fontSize}pt`;
-        element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
+        element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor, this._core?.themeManager?.currentTheme);
         if (this.isMounted && this.elementRef === element && this.editor.dom.parentElement === element) {
             if (!this._core.store.state.isScaling && !this._core.store.state.isPanning) {
                 requestAnimationFrame(() => this.adjustSizeOnInput());
@@ -16219,7 +16219,7 @@ class KritzelShape extends KritzelBaseObject {
         }
         element.style.fontFamily = this.fontFamily;
         element.style.fontSize = `${this.fontSize}pt`;
-        element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
+        element.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor, this._core?.themeManager?.currentTheme);
         element.style.whiteSpace = 'pre-wrap';
         element.style.wordWrap = 'break-word';
         if (this.editor.dom.parentElement === element) {
@@ -16535,13 +16535,13 @@ class KritzelShape extends KritzelBaseObject {
             this.fontColor = KritzelColorHelper.determineTextColor(this.fillColor);
             // Update the editor's text color immediately
             if (this.editor?.dom?.parentElement) {
-                this.editor.dom.parentElement.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
+                this.editor.dom.parentElement.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor, this._core?.themeManager?.currentTheme);
             }
         }
         else if (changedProperties.includes('fontColor')) {
             // Also update editor when fontColor changes directly
             if (this.editor?.dom?.parentElement) {
-                this.editor.dom.parentElement.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor);
+                this.editor.dom.parentElement.style.color = KritzelColorHelper.resolveThemeColor(this.fontColor, this._core?.themeManager?.currentTheme);
             }
         }
     }
@@ -21164,7 +21164,7 @@ class KritzelLineHandleHandler extends KritzelBaseHandler {
             t: clipInfo?.t,
             edgeX: clipInfo?.edgeX,
             edgeY: clipInfo?.edgeY,
-            lineStroke: KritzelColorHelper.resolveThemeColor(line.stroke),
+            lineStroke: KritzelColorHelper.resolveThemeColor(line.stroke, this._core.themeManager.currentTheme),
             lineStrokeWidth: line.strokeWidth / line.scale,
             arrowOffset: endpoint === 'start'
                 ? (line.hasStartArrow ? line.getArrowSize('start') / line.scale : undefined)
@@ -23839,7 +23839,7 @@ const KRITZEL_LICENSE_TOKEN_PREFIX = 'KRTZL1.';
  * printed public key here. Replacing this value invalidates every license
  * signed with the previous key.
  */
-const KRITZEL_LICENSE_PUBLIC_KEY = 'I-pYJlxDEjT94rwSaqhXW5Sv__fMKS-JKKnV3pg0PaM';
+const KRITZEL_LICENSE_PUBLIC_KEY = '2IwZDin-qV3kOt8SEQCqdaJsGT9S7tAGapUYJVnVGQo';
 
 /** Minimum delay (ms) between periodic license re-validations. */
 const MIN_REVALIDATION_DELAY_MS = 30_000;
@@ -24072,8 +24072,64 @@ class KritzelLicenseManager {
         if (typeof claims.exp === 'number' && claims.exp * 1000 <= Date.now()) {
             return { status: 'rejected' }; // Cleanly expired.
         }
+        const allowedDomains = this.normalizeAllowedDomains(claims.allowedDomains);
+        if (allowedDomains === null || allowedDomains.length === 0) {
+            return { status: 'rejected' };
+        }
+        const currentHostname = this.getCurrentHostname();
+        if (!currentHostname || !allowedDomains.includes(currentHostname)) {
+            return { status: 'rejected' };
+        }
         return { status: 'pass', payloadSegment, signatureSegment, claims };
     }
+    /** Returns the normalized current hostname, or null when unavailable/invalid. */
+    getCurrentHostname() {
+        const hostname = globalThis.location?.hostname;
+        if (typeof hostname !== 'string') {
+            return null;
+        }
+        return this.normalizeDomain(hostname);
+    }
+    /** Normalizes and validates the allowed domains claim. */
+    normalizeAllowedDomains(domains) {
+        if (!Array.isArray(domains)) {
+            return null;
+        }
+        const normalized = new Set();
+        for (const entry of domains) {
+            if (typeof entry !== 'string') {
+                return null;
+            }
+            const domain = this.normalizeDomain(entry);
+            if (!domain) {
+                return null;
+            }
+            normalized.add(domain);
+        }
+        return Array.from(normalized);
+    }
+    /** Normalizes a domain and rejects malformed hostnames. */
+    normalizeDomain(value) {
+        const trimmed = value.trim().toLowerCase();
+        if (trimmed.length === 0) {
+            return null;
+        }
+        const withoutTrailingDot = trimmed.endsWith('.') ? trimmed.slice(0, -1) : trimmed;
+        if (withoutTrailingDot.length === 0) {
+            return null;
+        }
+        try {
+            const parsed = new URL(`https://${withoutTrailingDot}`);
+            const normalizedHostname = parsed.hostname.toLowerCase();
+            if (normalizedHostname !== withoutTrailingDot) {
+                return null;
+            }
+            return normalizedHostname;
+        }
+        catch {
+            return null;
+        }
+    }
     /**
      * Verifies the Ed25519 signature of the token against the embedded public
      * key. Resolves true/false for a definitive valid/invalid signature.
@@ -47291,14 +47347,20 @@ class KritzelSvgExportHelper {
         const scale = this.getObjectScale(text);
         // Convert ProseMirror content to HTML
         const htmlContent = this.prosemirrorToHtml(text.content, text, theme);
-        // Calculate dimensions accounting for scale
+        // Calculate dimensions in SVG world units (world units = CSS px in a 1:1 SVG).
         const width = text.totalWidth / scale;
         const height = text.totalHeight / scale;
+        // Convert the font size from pt to SVG world units (px equivalent).
+        // text.fontSize is stored in CSS pt; 1 pt = 4/3 px at 96 dpi.
+        // We also bake in scaleFactor (user resize) and divide by the object scale so
+        // that the rendered font aligns with the world-unit dimensions above.
+        // The CSS transform: scale(scaleFactor) is removed from the div because the
+        // adjusted font-size already accounts for it – keeping both would double-scale
+        // the content and overflow the foreignObject.
+        const svgFontSizePx = (text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale).toFixed(4);
         return `<g transform="${transform}"${opacity}>
-    <foreignObject x="0" y="0" width="${width}" height="${height}">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${text.fontSize}pt; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; transform: scale(${text.scaleFactor}); transform-origin: top left; white-space: pre-wrap; word-wrap: break-word;">
-        ${htmlContent}
-      </div>
+    <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
     </foreignObject>
   </g>`;
     }
@@ -47317,9 +47379,13 @@ class KritzelSvgExportHelper {
         const height = text.totalHeight / scale;
         const lines = this.prosemirrorToPlainTextLines(text.content);
         const resolvedLines = lines.length > 0 ? lines : [''];
-        const resolvedFontSize = Math.max(1, text.fontSize * (text.scaleFactor || 1));
-        const lineHeight = resolvedFontSize * 1.2;
-        const startY = resolvedFontSize;
+        // Convert the font size from pt to SVG world units (px equivalent).
+        // text.fontSize is stored in CSS pt; 1 pt = 4/3 px at 96 dpi.
+        // We also bake in scaleFactor (user resize) and divide by the object scale so
+        // that the rendered lines align with the world-unit bounding box dimensions above.
+        const resolvedFontSizePx = Math.max(1, text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale);
+        const lineHeight = resolvedFontSizePx * 1.2;
+        const startY = resolvedFontSizePx;
         const bgRect = bgColor && bgColor !== 'transparent'
             ? `<rect x="0" y="0" width="${width}" height="${height}" fill="${bgColor}"/>`
             : '';
@@ -47331,7 +47397,7 @@ class KritzelSvgExportHelper {
             .join('');
         return `<g transform="${transform}"${opacity}>
     ${bgRect}
-    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSize}" fill="${fontColor}">${tspans}</text>
+    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
   </g>`;
     }
     /**
@@ -50994,7 +51060,9 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                 this.emitObjectsInViewportChange();
             }
         }
-        return (h(Host, null, h("kritzel-loading-overlay", { visible: this.core.store.state.isLoading, text: this.core.localizationManager.translate('engine.loading') }), h("kritzel-sync-indicator", { visible: this.isSyncing, text: "Syncing..." }), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
+        return (h(Host, null, h("kritzel-loading-overlay", { visible: this.core.store.state.isLoading, text: this.core.localizationManager.translate('engine.loading') }), h("kritzel-sync-indicator", { visible: this.isSyncing, text: "Syncing..." }), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel", style: {
+                color: 'var(--kritzel-global-text-primary)',
+            } }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
                 opacity: this._sceneBootstrapOpacity.toString(),
                 transition: this._sceneBootstrapTransitionEnabled ? 'opacity 220ms ease-out' : 'none',
@@ -51177,6 +51245,7 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
+                    color: 'var(--kritzel-global-text-primary)',
                 } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isSelected: ", object.isSelected ? 'true' : 'false'), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isInteractive: ", object.isInteractive ? 'true' : 'false'))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
@@ -51377,8 +51446,12 @@ const KritzelEngine = /*@__PURE__*/ proxyCustomElement(class KritzelEngine exten
                     strokeDasharray: data.dashArray,
                     strokeLinecap: 'round',
                 } }))), h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
-                    fill: isActiveSnap ? 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))' : 'rgba(59, 130, 246, 0.18)',
-                    stroke: isActiveSnap ? 'var(--kritzel-snap-indicator-stroke, #007bff)' : 'rgba(59, 130, 246, 0.5)',
+                    fill: isActiveSnap
+                        ? 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))'
+                        : 'var(--kritzel-snap-indicator-fill-inactive, var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.18)))',
+                    stroke: isActiveSnap
+                        ? 'var(--kritzel-snap-indicator-stroke, #007bff)'
+                        : 'var(--kritzel-snap-indicator-stroke-inactive, var(--kritzel-snap-indicator-stroke, rgba(59, 130, 246, 0.5)))',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
         })(), (() => {

package/dist/components/{p-D0oplzU-.js → p-DgA865Tp.js}

@@ -12,7 +12,7 @@ import { d as defineCustomElement$1 } from './p-BzJEwFtn.js';
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.4.7';
+const KRITZEL_VERSION = '0.4.8';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-tab-panel{display:none}.settings-tab-panel.is-active{display:block}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
 

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-uC7_X6yr.js';
-export { O as APP_STATE_MIGRATIONS, A as AssetNotFoundError, Q as CURRENT_APP_STATE_SCHEMA_VERSION, R as CURRENT_WORKSPACE_SCHEMA_VERSION, C as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, B as DEFAULT_LINE_TOOL_CONFIG, z as DEFAULT_TEXT_CONFIG, J as DE_LOCALE, G as EN_LOCALE, L as FR_LOCALE, I as IndexedDBAssetProvider, M as KritzelAlignment, t as KritzelAnchorManager, r as KritzelAssetResolver, K as KritzelBaseObject, i as KritzelBaseTool, j as KritzelBrushTool, p as KritzelCursorHelper, h as KritzelCustomElement, x as KritzelCustomElementRendererRegistry, l as KritzelEraserTool, y as KritzelFontRegistry, f as KritzelGroup, d as KritzelImage, m as KritzelImageTool, w as KritzelLicenseManager, e as KritzelLine, k as KritzelLineTool, v as KritzelLocalizationManager, c as KritzelPath, q as KritzelSelectionTool, g as KritzelShape, o as KritzelShapeTool, b as KritzelText, n as KritzelTextTool, u as KritzelThemeManager, s as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, P as WORKSPACE_MIGRATIONS, F as darkTheme, E as lightTheme, N as runMigrations } from './schema.constants-uC7_X6yr.js';
+import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-Rpm1NA9u.js';
+export { O as APP_STATE_MIGRATIONS, A as AssetNotFoundError, Q as CURRENT_APP_STATE_SCHEMA_VERSION, R as CURRENT_WORKSPACE_SCHEMA_VERSION, C as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, B as DEFAULT_LINE_TOOL_CONFIG, z as DEFAULT_TEXT_CONFIG, J as DE_LOCALE, G as EN_LOCALE, L as FR_LOCALE, I as IndexedDBAssetProvider, M as KritzelAlignment, t as KritzelAnchorManager, r as KritzelAssetResolver, K as KritzelBaseObject, i as KritzelBaseTool, j as KritzelBrushTool, p as KritzelCursorHelper, h as KritzelCustomElement, x as KritzelCustomElementRendererRegistry, l as KritzelEraserTool, y as KritzelFontRegistry, f as KritzelGroup, d as KritzelImage, m as KritzelImageTool, w as KritzelLicenseManager, e as KritzelLine, k as KritzelLineTool, v as KritzelLocalizationManager, c as KritzelPath, q as KritzelSelectionTool, g as KritzelShape, o as KritzelShapeTool, b as KritzelText, n as KritzelTextTool, u as KritzelThemeManager, s as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, P as WORKSPACE_MIGRATIONS, F as darkTheme, E as lightTheme, N as runMigrations } from './schema.constants-Rpm1NA9u.js';
 import * as Y from 'yjs';
 import { IndexeddbPersistence } from 'y-indexeddb';
 import { WebsocketProvider } from 'y-websocket';

package/dist/esm/kritzel-active-users_47.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-Dhio9uis.js';
-import { c as KritzelPath, e as KritzelLine, T as KritzelColorHelper, U as KritzelDevicesHelper, V as KritzelMouseButton, X as KritzelHTMLHelper, Y as DEFAULT_STROKE_SIZES, Z as DEFAULT_COLOR_PALETTE, S as ShapeType, q as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, j as KritzelBrushTool, l as KritzelEraserTool, B as DEFAULT_LINE_TOOL_CONFIG, k as KritzelLineTool, o as KritzelShapeTool, z as DEFAULT_TEXT_CONFIG, n as KritzelTextTool, m as KritzelImageTool, M as KritzelAlignment, C as DEFAULT_ASSET_STORAGE_CONFIG, _ as ObjectHelper, $ as resolveTextToolAvailableFonts, a0 as ThemeHelper, F as darkTheme, E as lightTheme, a1 as KritzelSelectionGroup, a2 as KritzelSelectionBox, a3 as KritzelIconRegistry, y as KritzelFontRegistry, a4 as KritzelKeyboardHelper, a5 as KritzelBaseHandler, s as KritzelWorkspace, f as KritzelGroup, h as KritzelCustomElement, d as KritzelImage, g as KritzelShape, b as KritzelText, N as runMigrations, R as CURRENT_WORKSPACE_SCHEMA_VERSION, P as WORKSPACE_MIGRATIONS, a6 as KritzelClassHelper, Q as CURRENT_APP_STATE_SCHEMA_VERSION, O as APP_STATE_MIGRATIONS, p as KritzelCursorHelper, a7 as KritzelImageFileHelper, a8 as imageCompression, t as KritzelAnchorManager, u as KritzelThemeManager, v as KritzelLocalizationManager, w as KritzelLicenseManager, r as KritzelAssetResolver, a9 as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION, i as KritzelBaseTool } from './schema.constants-uC7_X6yr.js';
+import { c as KritzelPath, e as KritzelLine, T as KritzelColorHelper, U as KritzelDevicesHelper, V as KritzelMouseButton, X as KritzelHTMLHelper, Y as DEFAULT_STROKE_SIZES, Z as DEFAULT_COLOR_PALETTE, S as ShapeType, q as KritzelSelectionTool, D as DEFAULT_BRUSH_CONFIG, j as KritzelBrushTool, l as KritzelEraserTool, B as DEFAULT_LINE_TOOL_CONFIG, k as KritzelLineTool, o as KritzelShapeTool, z as DEFAULT_TEXT_CONFIG, n as KritzelTextTool, m as KritzelImageTool, M as KritzelAlignment, C as DEFAULT_ASSET_STORAGE_CONFIG, _ as ObjectHelper, $ as resolveTextToolAvailableFonts, a0 as ThemeHelper, F as darkTheme, E as lightTheme, a1 as KritzelSelectionGroup, a2 as KritzelSelectionBox, a3 as KritzelIconRegistry, y as KritzelFontRegistry, a4 as KritzelKeyboardHelper, a5 as KritzelBaseHandler, s as KritzelWorkspace, f as KritzelGroup, h as KritzelCustomElement, d as KritzelImage, g as KritzelShape, b as KritzelText, N as runMigrations, R as CURRENT_WORKSPACE_SCHEMA_VERSION, P as WORKSPACE_MIGRATIONS, a6 as KritzelClassHelper, Q as CURRENT_APP_STATE_SCHEMA_VERSION, O as APP_STATE_MIGRATIONS, p as KritzelCursorHelper, a7 as KritzelImageFileHelper, a8 as imageCompression, t as KritzelAnchorManager, u as KritzelThemeManager, v as KritzelLocalizationManager, w as KritzelLicenseManager, r as KritzelAssetResolver, a9 as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION, i as KritzelBaseTool } from './schema.constants-Rpm1NA9u.js';
 import * as Y from 'yjs';
 import 'y-indexeddb';
 import 'y-websocket';
@@ -26262,14 +26262,20 @@ class KritzelSvgExportHelper {
         const scale = this.getObjectScale(text);
         // Convert ProseMirror content to HTML
         const htmlContent = this.prosemirrorToHtml(text.content, text, theme);
-        // Calculate dimensions accounting for scale
+        // Calculate dimensions in SVG world units (world units = CSS px in a 1:1 SVG).
         const width = text.totalWidth / scale;
         const height = text.totalHeight / scale;
+        // Convert the font size from pt to SVG world units (px equivalent).
+        // text.fontSize is stored in CSS pt; 1 pt = 4/3 px at 96 dpi.
+        // We also bake in scaleFactor (user resize) and divide by the object scale so
+        // that the rendered font aligns with the world-unit dimensions above.
+        // The CSS transform: scale(scaleFactor) is removed from the div because the
+        // adjusted font-size already accounts for it – keeping both would double-scale
+        // the content and overflow the foreignObject.
+        const svgFontSizePx = (text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale).toFixed(4);
         return `<g transform="${transform}"${opacity}>
-    <foreignObject x="0" y="0" width="${width}" height="${height}">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${text.fontSize}pt; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; transform: scale(${text.scaleFactor}); transform-origin: top left; white-space: pre-wrap; word-wrap: break-word;">
-        ${htmlContent}
-      </div>
+    <foreignObject x="0" y="0" width="${width}" height="${height}" overflow="visible">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="font-family: ${text.fontFamily}; font-size: ${svgFontSizePx}px; color: ${fontColor}; background-color: ${bgColor || 'transparent'}; white-space: pre-wrap; word-wrap: break-word; width: 100%; margin: 0; padding: 0; box-sizing: border-box;">${htmlContent.trim()}</div>
     </foreignObject>
   </g>`;
     }
@@ -26288,9 +26294,13 @@ class KritzelSvgExportHelper {
         const height = text.totalHeight / scale;
         const lines = this.prosemirrorToPlainTextLines(text.content);
         const resolvedLines = lines.length > 0 ? lines : [''];
-        const resolvedFontSize = Math.max(1, text.fontSize * (text.scaleFactor || 1));
-        const lineHeight = resolvedFontSize * 1.2;
-        const startY = resolvedFontSize;
+        // Convert the font size from pt to SVG world units (px equivalent).
+        // text.fontSize is stored in CSS pt; 1 pt = 4/3 px at 96 dpi.
+        // We also bake in scaleFactor (user resize) and divide by the object scale so
+        // that the rendered lines align with the world-unit bounding box dimensions above.
+        const resolvedFontSizePx = Math.max(1, text.fontSize * (4 / 3) * (text.scaleFactor || 1) / scale);
+        const lineHeight = resolvedFontSizePx * 1.2;
+        const startY = resolvedFontSizePx;
         const bgRect = bgColor && bgColor !== 'transparent'
             ? `<rect x="0" y="0" width="${width}" height="${height}" fill="${bgColor}"/>`
             : '';
@@ -26302,7 +26312,7 @@ class KritzelSvgExportHelper {
             .join('');
         return `<g transform="${transform}"${opacity}>
     ${bgRect}
-    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSize}" fill="${fontColor}">${tspans}</text>
+    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
   </g>`;
     }
     /**
@@ -29961,7 +29971,9 @@ const KritzelEngine = class {
                 this.emitObjectsInViewportChange();
             }
         }
-        return (h(Host, null, h("kritzel-loading-overlay", { visible: this.core.store.state.isLoading, text: this.core.localizationManager.translate('engine.loading') }), h("kritzel-sync-indicator", { visible: this.isSyncing, text: "Syncing..." }), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
+        return (h(Host, null, h("kritzel-loading-overlay", { visible: this.core.store.state.isLoading, text: this.core.localizationManager.translate('engine.loading') }), h("kritzel-sync-indicator", { visible: this.isSyncing, text: "Syncing..." }), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel", style: {
+                color: 'var(--kritzel-global-text-primary)',
+            } }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
                 opacity: this._sceneBootstrapOpacity.toString(),
                 transition: this._sceneBootstrapTransitionEnabled ? 'opacity 220ms ease-out' : 'none',
@@ -30144,6 +30156,7 @@ const KritzelEngine = class {
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
+                    color: 'var(--kritzel-global-text-primary)',
                 } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isSelected: ", object.isSelected ? 'true' : 'false'), KritzelClassHelper.isInstanceOf(object, 'KritzelCustomElement') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "isInteractive: ", object.isInteractive ? 'true' : 'false'))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
@@ -30344,8 +30357,12 @@ const KritzelEngine = class {
                     strokeDasharray: data.dashArray,
                     strokeLinecap: 'round',
                 } }))), h("circle", { cx: data.centerX, cy: data.centerY, r: data.indicatorRadius, style: {
-                    fill: isActiveSnap ? 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))' : 'rgba(59, 130, 246, 0.18)',
-                    stroke: isActiveSnap ? 'var(--kritzel-snap-indicator-stroke, #007bff)' : 'rgba(59, 130, 246, 0.5)',
+                    fill: isActiveSnap
+                        ? 'var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.3))'
+                        : 'var(--kritzel-snap-indicator-fill-inactive, var(--kritzel-snap-indicator-fill, rgba(59, 130, 246, 0.18)))',
+                    stroke: isActiveSnap
+                        ? 'var(--kritzel-snap-indicator-stroke, #007bff)'
+                        : 'var(--kritzel-snap-indicator-stroke-inactive, var(--kritzel-snap-indicator-stroke, rgba(59, 130, 246, 0.5)))',
                     strokeWidth: data.indicatorStrokeWidth,
                 } }))));
         })(), (() => {
@@ -31818,7 +31835,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.4.7';
+const KRITZEL_VERSION = '0.4.8';
 
 const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-tab-panel{display:none}.settings-tab-panel.is-active{display:block}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;