kritzel-stencil 0.4.22 → 0.4.24

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: '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" }))));
+        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" }))));
     }
     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: '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" })))));
+        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" })))));
     }
     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.22';
+export const KRITZEL_VERSION = '0.4.24';

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>`;
     }
     /**