kritzel-stencil 0.4.20 → 0.4.21

package/dist/collection/components/ui/kritzel-tool-config/kritzel-tool-config.css

@@ -1,38 +1,38 @@
-.expand-toggle {
-  background: none;
-  border: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  padding: 0;
-  margin: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  color: var(--kritzel-icon-color, currentColor);
-  transition: transform 0.2s ease;
-}
-
-.expand-toggle:hover {
-  opacity: 0.7;
-}
-
-.expand-toggle:focus {
-  outline: none;
-}
-
-.expand-toggle:focus-visible {
-  outline: 2px solid var(--kritzel-focus-color, #007acc);
-  outline-offset: 2px;
-}
-
-.expand-toggle:active {
-  transform: scale(0.95);
-}
-
-.divider {
-  height: 1px;
-  background-color: var(--kritzel-divider-color, #e0e0e0);
-  margin: 4px 0;
-  width: 100%;
-}
+.expand-toggle {
+  background: none;
+  border: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  color: var(--kritzel-icon-color, currentColor);
+  transition: transform 0.2s ease;
+}
+
+.expand-toggle:hover {
+  opacity: 0.7;
+}
+
+.expand-toggle:focus {
+  outline: none;
+}
+
+.expand-toggle:focus-visible {
+  outline: 2px solid var(--kritzel-focus-color, #007acc);
+  outline-offset: 2px;
+}
+
+.expand-toggle:active {
+  transform: scale(0.95);
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--kritzel-divider-color, #e0e0e0);
+  margin: 4px 0;
+  width: 100%;
+}

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.css

@@ -1,46 +1,46 @@
-:host {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 4px;
-  gap: 8px;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-  background-color: var(--kritzel-utility-panel-background-color, #e2e2e2);
-  width: fit-content;
-  user-select: none;
-  z-index: 1;
-}
-
-.utility-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 28px;
-  height: 28px;
-  padding: 8px 4px;
-  border: none;
-  background: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  color: var(--kritzel-utility-panel-button-color, #333333);
-  --kritzel-icon-color: var(--kritzel-utility-panel-button-color, #333333);
-  -webkit-tap-highlight-color: transparent;
-  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);
-}
-
-.utility-button:hover,
-.utility-button:focus-visible {
-  background-color: var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.utility-button:disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-
-.utility-separator {
-  width: 1px;
-  height: 16px;
-  background-color: var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%));
+:host {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 4px;
+  gap: 8px;
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+  background-color: var(--kritzel-utility-panel-background-color, #e2e2e2);
+  width: fit-content;
+  user-select: none;
+  z-index: 1;
+}
+
+.utility-button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 8px 4px;
+  border: none;
+  background: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  color: var(--kritzel-utility-panel-button-color, #333333);
+  --kritzel-icon-color: var(--kritzel-utility-panel-button-color, #333333);
+  -webkit-tap-highlight-color: transparent;
+  border-radius: var(--kritzel-utility-panel-button-border-radius, 8px);
+}
+
+.utility-button:hover,
+.utility-button:focus-visible {
+  background-color: var(--kritzel-utility-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.utility-button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.utility-separator {
+  width: 1px;
+  height: 16px;
+  background-color: var(--kritzel-utility-panel-separator-color, hsl(0, 0%, 0%, 8%));
 }

package/dist/collection/components/ui/kritzel-utility-panel/kritzel-utility-panel.js

@@ -19,7 +19,7 @@ export class KritzelUtilityPanel {
         this.redo.emit();
     }
     render() {
-        return (h(Host, { key: 'bc0322b40c4ff4fba997f1dc1901edbb934e4a0a' }, h("button", { key: 'ff48698d2757b0d99cacfd4fbaa5a7b0ae8f1604', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: 'bc6756df10c7979e06cd9ebdb172b5ef54c7bb67', name: "undo" })), h("button", { key: '07afd176ae1b5cb5a65cd097ce4a99a131aee7aa', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: '4573d7ab91f0cbfa0aafb607050f0b09048d60e1', name: "redo" })), h("div", { key: 'b663c43ef9181f61b12614245a65d063f6d94eaf', class: "utility-separator" }), h("button", { key: '248f7ae7cabbd83585674dcb16124a3f9fa2449b', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '6cbc48e118c96770333ed3e5947e54e497e93716', name: "delete" }))));
+        return (h(Host, { key: '57c1a6746e4d5b319bb368c9d0bfc52a31d8c8de' }, h("button", { key: '5fb00d62b68de41feda9fafb3eec46cc0b85ba0e', class: "utility-button", "data-testid": "utility-undo", disabled: !this.undoState?.canUndo, onClick: event => this.handleUndo(event), "aria-label": this.terms['utility.undo'] ?? 'Undo' }, h("kritzel-icon", { key: '5ed2c36405ac7113ac697de9102aaf7067127e2a', name: "undo" })), h("button", { key: '0d58c8cbbb8e9547b9416dbf81a2c8011208dc6c', class: "utility-button", "data-testid": "utility-redo", disabled: !this.undoState?.canRedo, onClick: event => this.handleRedo(event), "aria-label": this.terms['utility.redo'] ?? 'Redo' }, h("kritzel-icon", { key: '70264118cbe0f54335a02941fdc868f63476cd1c', name: "redo" })), h("div", { key: '6eed6a603b8bc62e55b1f6fe82e7d035d1f5833c', class: "utility-separator" }), h("button", { key: 'd11195da7a86496afcca26105a6a0f066b1b2340', class: "utility-button", "data-testid": "utility-delete", onClick: () => this.delete.emit(), "aria-label": this.terms['utility.delete'] ?? 'Delete selected items' }, h("kritzel-icon", { key: '5e4c731f90863b4db917c67ac7e87c2945c7bcaa', name: "delete" }))));
     }
     static get is() { return "kritzel-utility-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/ui/kritzel-workspace-manager/kritzel-workspace-manager.css

@@ -1,16 +1,16 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  z-index: 1;
-}
-
-.manager {
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease-out;
-}
-
-.manager.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
+:host {
+  display: flex;
+  flex-direction: column;
+  z-index: 1;
+}
+
+.manager {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out;
+}
+
+.manager.visible {
+  opacity: 1;
+  pointer-events: auto;
+}

package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.css

@@ -1,72 +1,72 @@
-:host {
-  display: block;
-  z-index: 1;
-}
-
-.panel {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--kritzel-zoom-panel-gap, 4px);
-  padding: var(--kritzel-zoom-panel-padding, 4px);
-  border: var(--kritzel-zoom-panel-border, 1px solid #ebebeb);
-  border-radius: var(--kritzel-zoom-panel-border-radius, 12px);
-  background-color: var(--kritzel-zoom-panel-background-color, #ffffff);
-  box-shadow: var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.2s ease-out;
-}
-
-.panel.visible {
-  opacity: 1;
-  pointer-events: auto;
-}
-
-.zoom-level {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 46px;
-  color: var(--kritzel-zoom-panel-icon-color, #000000);
-  font-family: var(--kritzel-font-family, sans-serif);
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 1;
-  padding: 0 4px;
-  user-select: none;
-}
-
-.zoom-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--kritzel-zoom-panel-button-size, 32px);
-  height: var(--kritzel-zoom-panel-button-size, 32px);
-  padding: 0;
-  border: 0;
-  border-radius: var(--kritzel-zoom-panel-button-border-radius, 8px);
-  background: transparent;
-  background-color: transparent;
-  color: var(--kritzel-zoom-panel-icon-color, #000000);
-  --kritzel-icon-color: var(--kritzel-zoom-panel-icon-color, #000000);
-  box-shadow: none;
-  appearance: none;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  -webkit-tap-highlight-color: transparent;
-}
-
-.zoom-button:hover,
-.zoom-button:focus-visible {
-  background-color: var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
-}
-
-.zoom-button:active {
-  background-color: var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%));
-}
-
-.zoom-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-  pointer-events: none;
-}
+:host {
+  display: block;
+  z-index: 1;
+}
+
+.panel {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--kritzel-zoom-panel-gap, 4px);
+  padding: var(--kritzel-zoom-panel-padding, 4px);
+  border: var(--kritzel-zoom-panel-border, 1px solid #ebebeb);
+  border-radius: var(--kritzel-zoom-panel-border-radius, 12px);
+  background-color: var(--kritzel-zoom-panel-background-color, #ffffff);
+  box-shadow: var(--kritzel-zoom-panel-box-shadow, 0 0 3px rgba(0, 0, 0, 0.08));
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease-out;
+}
+
+.panel.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.zoom-level {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 46px;
+  color: var(--kritzel-zoom-panel-icon-color, #000000);
+  font-family: var(--kritzel-font-family, sans-serif);
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  padding: 0 4px;
+  user-select: none;
+}
+
+.zoom-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--kritzel-zoom-panel-button-size, 32px);
+  height: var(--kritzel-zoom-panel-button-size, 32px);
+  padding: 0;
+  border: 0;
+  border-radius: var(--kritzel-zoom-panel-button-border-radius, 8px);
+  background: transparent;
+  background-color: transparent;
+  color: var(--kritzel-zoom-panel-icon-color, #000000);
+  --kritzel-icon-color: var(--kritzel-zoom-panel-icon-color, #000000);
+  box-shadow: none;
+  appearance: none;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.zoom-button:hover,
+.zoom-button:focus-visible {
+  background-color: var(--kritzel-zoom-panel-button-hover-background-color, hsl(0, 0%, 0%, 4.3%));
+}
+
+.zoom-button:active {
+  background-color: var(--kritzel-zoom-panel-button-active-background-color, hsl(0, 0%, 0%, 8.6%));
+}
+
+.zoom-button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}

package/dist/collection/components/ui/kritzel-zoom-panel/kritzel-zoom-panel.js

@@ -26,7 +26,7 @@ export class KritzelZoomPanel {
         return Number.isFinite(this.zoomPercent) ? Math.max(1, Math.round(this.zoomPercent)) : 100;
     }
     render() {
-        return (h(Host, { key: '02de6ea9f2f7b6e057555e3b7e1ee3340cab5fa1' }, h("div", { key: '7531e03a4cfa05165057410e4dde3b4cc695f4de', class: { panel: true, visible: this.visible } }, h("button", { key: '57d324c7ad1c21ee8e107ad41cf1a4b708b0fccc', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '656128018addf58a59f223fab400605aeef4f5a8', name: "minus" })), h("span", { key: '32562a4709f8dea98fe3a80bf8a63722b176a3f4', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '4c0c5141597f0265ff4bf9d7bd1105666b6b7a76', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: 'f85f69f5b0e214a557dfecb6164f5577af66ca7f', name: "plus" })))));
+        return (h(Host, { key: 'ac5b3f37fbc298b1522f0ff80c26734164b5358a' }, h("div", { key: '8ac3f3600c45c064d9c4c4c9efa78397790edf4b', class: { panel: true, visible: this.visible } }, h("button", { key: '63b2a3fce804a310146d95cc9c2a874707f9e265', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomOut'] ?? 'Zoom out', disabled: this.disabled, onClick: this.handleZoomOut }, h("kritzel-icon", { key: '86ebb85dfc2b746cedd0ed63cd2ae90378f6bbb8', name: "minus" })), h("span", { key: '5191cc1aa9966234c1634882af145403acd32211', class: "zoom-level", "aria-live": "polite" }, this.normalizedZoomPercent, "%"), h("button", { key: '47a7ee5b6c1cf1c99cd1826877e0a1c4ce224442', class: "zoom-button", type: "button", "aria-label": this.terms['zoom.zoomIn'] ?? 'Zoom in', disabled: this.disabled, onClick: this.handleZoomIn }, h("kritzel-icon", { key: '09782e094534fbc5bbcc612f24eea359568d6132', name: "plus" })))));
     }
     static get is() { return "kritzel-zoom-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/constants/version.js

@@ -3,4 +3,4 @@
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-export const KRITZEL_VERSION = '0.4.20';
+export const KRITZEL_VERSION = '0.4.21';

package/dist/collection/helpers/cursor.helper.js

@@ -38,12 +38,12 @@ export class KritzelCursorHelper {
         // We rotate around the center of the SVG canvas
         const center = size / 2;
         // We use a group to apply the rotation
-        const svg = `
-      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
-        <g transform="rotate(${rotation} ${center} ${center})">
-          ${content}
-        </g>
-      </svg>
+        const svg = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}">
+        <g transform="rotate(${rotation} ${center} ${center})">
+          ${content}
+        </g>
+      </svg>
     `;
         // Encode the SVG for use in a data URI
         // We need to be careful with encoding to ensure it works across browsers

package/dist/collection/helpers/svg-export.helper.js

@@ -66,8 +66,8 @@ export class KritzelSvgExportHelper {
             .join('\n  ');
         const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
         const defsContent = defs.length > 0 ? `\n  <defs>\n    ${defs.join('\n    ')}\n  </defs>` : '';
-        return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
-  ${elements}
+        return `${xmlDecl}<svg xmlns="http://www.w3.org/2000/svg" viewBox="${viewBoxX} ${viewBoxY} ${viewBoxWidth} ${viewBoxHeight}" width="${viewBoxWidth}" height="${viewBoxHeight}">${defsContent}
+  ${elements}
 </svg>`;
     }
     /**
@@ -219,8 +219,8 @@ export class KritzelSvgExportHelper {
         const orient = end === 'start' ? 'auto-start-reverse' : 'auto';
         const refX = 0;
         const refY = size / 2;
-        return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
-      <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
+        return `<marker id="${markerId}" markerWidth="${size}" markerHeight="${size}" refX="${refX}" refY="${refY}" orient="${orient}" markerUnits="userSpaceOnUse">
+      <path d="${path}" fill="${fill}" transform="scale(${size / 10})"/>
     </marker>`;
     }
     /**
@@ -267,10 +267,10 @@ export class KritzelSvgExportHelper {
         const opacity = path.opacity !== 1 ? ` opacity="${path.opacity}"` : '';
         const scale = this.getObjectScale(path);
         // Path needs to be wrapped in a g with translation since path.d uses local coordinates
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
-      <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${path.viewBox}" width="${path.totalWidth / scale}" height="${path.totalHeight / scale}" overflow="visible">
+      <path d="${path.d}" fill="${fill || 'none'}" stroke="${stroke || 'none'}"${path.strokeWidth ? ` stroke-width="${path.strokeWidth}"` : ''}/>
+    </svg>
   </g>`;
     }
     /**
@@ -286,10 +286,10 @@ export class KritzelSvgExportHelper {
         const scale = this.getObjectScale(line);
         const markerStart = line.hasStartArrow ? ` marker-start="url(#${line.startMarkerId})"` : '';
         const markerEnd = line.hasEndArrow ? ` marker-end="url(#${line.endMarkerId})"` : '';
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
-      <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${line.viewBox}" width="${line.totalWidth / scale}" height="${line.totalHeight / scale}" overflow="visible">
+      <path d="${line.d}" fill="none" stroke="${stroke}" stroke-width="${line.strokeWidth}" stroke-linecap="round"${markerStart}${markerEnd}/>
+    </svg>
   </g>`;
     }
     /**
@@ -315,18 +315,18 @@ export class KritzelSvgExportHelper {
             const textHtml = this.prosemirrorToHtml(shape.content, shape, theme);
             if (textHtml) {
                 const fontColor = KritzelColorHelper.resolveThemeColor(shape.fontColor, theme);
-                textContent = `
-    <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
-      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
-        ${textHtml}
-      </div>
+                textContent = `
+    <foreignObject x="${shape.x}" y="${shape.y}" width="${shape.width}" height="${shape.height}">
+      <div xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; font-family: ${shape.fontFamily}; font-size: ${shape.fontSize}px; color: ${fontColor}; overflow: hidden;">
+        ${textHtml}
+      </div>
     </foreignObject>`;
             }
         }
-        return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
-      <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
-    </svg>
+        return `<g transform="${transform}"${opacity}>
+    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / scale}" height="${shape.totalHeight / scale}" overflow="visible" preserveAspectRatio="none">
+      <path d="${pathD}" fill="${fill || 'transparent'}" stroke="${stroke}" stroke-width="${shape.strokeWidth}"/>${textContent}
+    </svg>
   </g>`;
     }
     /**
@@ -357,10 +357,10 @@ export class KritzelSvgExportHelper {
         // 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}" 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>
+        return `<g transform="${transform}"${opacity}>
+    <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>`;
     }
     /**
@@ -394,9 +394,9 @@ export class KritzelSvgExportHelper {
             return `<tspan x="0" y="${y}" xml:space="preserve">${this.escapeHtml(line)}</tspan>`;
         })
             .join('');
-        return `<g transform="${transform}"${opacity}>
-    ${bgRect}
-    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
+        return `<g transform="${transform}"${opacity}>
+    ${bgRect}
+    <text font-family="${this.escapeHtml(text.fontFamily)}" font-size="${resolvedFontSizePx}" fill="${fontColor}">${tspans}</text>
   </g>`;
     }
     /**
@@ -424,8 +424,8 @@ export class KritzelSvgExportHelper {
         const width = image.totalWidth / scale;
         const height = image.totalHeight / scale;
         const href = imageDataUrls?.get(image.id) || image.resolvedSrc || image.src || '';
-        return `<g transform="${transform}"${opacity}>
-    <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
+        return `<g transform="${transform}"${opacity}>
+    <image href="${href}" x="0" y="0" width="${width}" height="${height}" preserveAspectRatio="xMidYMid meet"/>
   </g>`;
     }
     /**
@@ -445,19 +445,19 @@ export class KritzelSvgExportHelper {
         if (rasterSafeForCanvas) {
             // PNG export: render placeholder rect (foreignObject doesn't rasterize to PNG well)
             console.warn('[KritzelCustomElement SVG Export] Custom elements do not serialize well to PNG. Use SVG export or screenshot instead.');
-            return `<g transform="${transform}"${opacity}>
-      <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
-      <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
+            return `<g transform="${transform}"${opacity}>
+      <rect x="0" y="0" width="${width}" height="${height}" fill="#f0f0f0" stroke="#999" stroke-width="1" />
+      <text x="${width / 2}" y="${height / 2}" text-anchor="middle" dominant-baseline="middle" font-size="12" fill="#999">[Custom Element]</text>
     </g>`;
         }
         // SVG export: use foreignObject to embed HTML
         const html = obj.element?.outerHTML || '<div style="border:1px dashed #ccc">Empty</div>';
-        return `<g transform="${transform}"${opacity}>
-      <foreignObject x="0" y="0" width="${width}" height="${height}">
-        <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
-          ${html}
-        </div>
-      </foreignObject>
+        return `<g transform="${transform}"${opacity}>
+      <foreignObject x="0" y="0" width="${width}" height="${height}">
+        <div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;overflow:hidden;">
+          ${html}
+        </div>
+      </foreignObject>
     </g>`;
     }
     /**
@@ -477,8 +477,8 @@ export class KritzelSvgExportHelper {
             return '';
         }
         const opacity = group.opacity !== 1 ? ` opacity="${group.opacity}"` : '';
-        return `<g${opacity}>
-    ${children}
+        return `<g${opacity}>
+    ${children}
   </g>`;
     }
     /**

package/dist/components/index.js

@@ -1,6 +1,6 @@
-export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-C9_yBEoX.js';
-export { K as KritzelBaseObject, b as KritzelLine, a as KritzelPath } from './p-D6JycG-I.js';
-export { u as APP_STATE_MIGRATIONS, A as AssetNotFoundError, D as DE_LOCALE, E as EN_LOCALE, F as FR_LOCALE, I as IndexedDBAssetProvider, s as KritzelAlignment, o as KritzelAnchorManager, n as KritzelAssetResolver, e as KritzelBaseTool, f as KritzelBrushTool, l as KritzelCursorHelper, d as KritzelCustomElement, r as KritzelCustomElementRendererRegistry, h as KritzelEraserTool, b as KritzelGroup, a as KritzelImage, i as KritzelImageTool, q as KritzelLicenseManager, g as KritzelLineTool, p as KritzelLocalizationManager, m as KritzelSelectionTool, c as KritzelShape, k as KritzelShapeTool, K as KritzelText, j as KritzelTextTool, S as ShapeType, W as WORKSPACE_MIGRATIONS, t as runMigrations } from './p-Csxx9TbU.js';
+export { g as getAssetPath, r as render, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-B43upypT.js';
+export { K as KritzelBaseObject, b as KritzelLine, a as KritzelPath } from './p-bAacqNHq.js';
+export { u as APP_STATE_MIGRATIONS, A as AssetNotFoundError, D as DE_LOCALE, E as EN_LOCALE, F as FR_LOCALE, I as IndexedDBAssetProvider, s as KritzelAlignment, o as KritzelAnchorManager, n as KritzelAssetResolver, e as KritzelBaseTool, f as KritzelBrushTool, l as KritzelCursorHelper, d as KritzelCustomElement, r as KritzelCustomElementRendererRegistry, h as KritzelEraserTool, b as KritzelGroup, a as KritzelImage, i as KritzelImageTool, q as KritzelLicenseManager, g as KritzelLineTool, p as KritzelLocalizationManager, m as KritzelSelectionTool, c as KritzelShape, k as KritzelShapeTool, K as KritzelText, j as KritzelTextTool, S as ShapeType, W as WORKSPACE_MIGRATIONS, t as runMigrations } from './p-C_f_QElb.js';
 import * as Y from 'yjs';
 import { IndexeddbPersistence } from 'y-indexeddb';
 import { WebsocketProvider } from 'y-websocket';

package/dist/components/kritzel-active-users.js

@@ -1,4 +1,4 @@
-import { K as KritzelActiveUsers$1, d as defineCustomElement$1 } from './p-DafP9PAA.js';
+import { K as KritzelActiveUsers$1, d as defineCustomElement$1 } from './p-DBqoPgev.js';
 
 const KritzelActiveUsers = KritzelActiveUsers$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-avatar.js

@@ -1,4 +1,4 @@
-import { K as KritzelAvatar$1, d as defineCustomElement$1 } from './p-zG-WUBGF.js';
+import { K as KritzelAvatar$1, d as defineCustomElement$1 } from './p-4SPnZZkH.js';
 
 const KritzelAvatar = KritzelAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-awareness-cursors.js

@@ -1,4 +1,4 @@
-import { c as KritzelAwarenessCursors$1, d as defineCustomElement$1 } from './p-D6JycG-I.js';
+import { c as KritzelAwarenessCursors$1, d as defineCustomElement$1 } from './p-bAacqNHq.js';
 
 const KritzelAwarenessCursors = KritzelAwarenessCursors$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-back-to-content.js

@@ -1,4 +1,4 @@
-import { K as KritzelBackToContent$1, d as defineCustomElement$1 } from './p-BrqSjRJN.js';
+import { K as KritzelBackToContent$1, d as defineCustomElement$1 } from './p-Czhdc844.js';
 
 const KritzelBackToContent = KritzelBackToContent$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-brush-style.js

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-C9_yBEoX.js';
-import { d as defineCustomElement$3 } from './p-CHoOe3FD.js';
-import { d as defineCustomElement$2 } from './p-Ck-87E2G.js';
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$3 } from './p-Df3BwVGy.js';
+import { d as defineCustomElement$2 } from './p-CSuU8frA.js';
 
 const kritzelBrushStyleCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:8px;box-sizing:border-box;width:100%}.brush-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;border-radius:0;color:var(--control-text-color);font-weight:bold;-webkit-tap-highlight-color:transparent}.font-style-button:not(:last-child){border-right:1px solid #333333}.font-style-button:hover{background-color:var(--control-hover-bg)}.font-style-button:active{background-color:var(--control-active-bg)}.font-style-button.selected,.font-style-button.selected:hover,.font-style-button.selected:active{background-color:var(--control-selected-bg);color:var(--control-selected-color)}`;
 
@@ -27,7 +27,7 @@ const KritzelBrushStyle$1 = /*@__PURE__*/ proxyCustomElement(class KritzelBrushS
             value: option.value,
             label: option.label,
         }));
-        return (h(Host, { key: '51a7f84685032fd8fc967b22bee7c0711e811a54' }, h("kritzel-dropdown", { key: 'e49d7062c695458d345738d88a0adfc96b575e61', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'ebbbf1a55b89e91012ca44c5cf30acfb77332b50', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'dae002c9ab5e3486c726202426eb076a8f33b109', name: this.type, size: 16 })))));
+        return (h(Host, { key: '7b05e93ce8d28c23503e4ca358a487165169f1ad' }, h("kritzel-dropdown", { key: 'a8f2f30762b339411cd3995482c3bc658855f749', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: 'ac06462897a0fbd5011533095fafb7491a75508a', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'caee4c657c7fee478b1038ebd2ef3b502cf73e5e', name: this.type, size: 16 })))));
     }
     static get style() { return kritzelBrushStyleCss(); }
 }, [513, "kritzel-brush-style", {

package/dist/components/kritzel-button.js

@@ -1,4 +1,4 @@
-import { K as KritzelButton$1, d as defineCustomElement$1 } from './p-Cx-L_28S.js';
+import { K as KritzelButton$1, d as defineCustomElement$1 } from './p-BoN700-O.js';
 
 const KritzelButton = KritzelButton$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/kritzel-color-palette.js

@@ -1,4 +1,4 @@
-import { K as KritzelColorPalette$1, d as defineCustomElement$1 } from './p-MhQxGUvY.js';
+import { K as KritzelColorPalette$1, d as defineCustomElement$1 } from './p-B-585egz.js';
 
 const KritzelColorPalette = KritzelColorPalette$1;
 const defineCustomElement = defineCustomElement$1;