kritzel-stencil 0.3.16 → 0.3.17

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

@@ -41,7 +41,7 @@ export class KritzelSvgExportHelper {
      * @returns SVG document string
      */
     static generateSvg(objects, options = {}) {
-        const { theme, padding = 0, includeXmlDeclaration = true } = options;
+        const { theme, padding = 0, includeXmlDeclaration = true, rasterSafeForCanvas = false, imageDataUrls } = options;
         if (!objects || objects.length === 0) {
             return '';
         }
@@ -61,7 +61,7 @@ export class KritzelSvgExportHelper {
         // Generate SVG elements for each object
         const elements = objects
             .sort((a, b) => a.zIndex - b.zIndex)
-            .map(obj => this.objectToSvgElement(obj, theme))
+            .map(obj => this.objectToSvgElement(obj, theme, imageDataUrls, rasterSafeForCanvas))
             .filter(Boolean)
             .join('\n  ');
         const xmlDecl = includeXmlDeclaration ? '<?xml version="1.0" encoding="UTF-8"?>\n' : '';
@@ -87,6 +87,102 @@ export class KritzelSvgExportHelper {
         }
         return result;
     }
+    /**
+     * Resolves every image referenced by the given objects (including those
+     * nested inside groups) to an inlined `data:` URL, keyed by object id.
+     *
+     * This is required for export flows that rasterize the SVG (e.g. PNG
+     * export): an SVG loaded into an `<img>` element will NOT load external
+     * or `blob:` resources, so a `<image href="blob:...">` renders as a
+     * broken-image placeholder. Embedding the bytes as a base64 `data:` URL
+     * makes the image self-contained and survive rasterization.
+     *
+     * Resolution is best-effort: images that fail to resolve are simply
+     * omitted from the map, and the SVG falls back to whatever `href` the
+     * synchronous path would have produced.
+     * @param objects - Objects to inline images for
+     * @param assetResolver - Resolver used to fetch asset bytes; optional
+     * @returns Map of image object id -> inlined `data:` URL
+     */
+    static async resolveImageDataUrls(objects, assetResolver) {
+        const dataUrls = new Map();
+        if (!objects || objects.length === 0) {
+            return dataUrls;
+        }
+        const images = this.flattenObjects(objects).filter((obj) => KritzelClassHelper.isInstanceOf(obj, 'KritzelImage'));
+        await Promise.all(images.map(async (image) => {
+            // Legacy inline data URL is already embeddable as-is.
+            if (image.src?.startsWith('data:')) {
+                dataUrls.set(image.id, image.src);
+                return;
+            }
+            // A resolvedSrc that is itself a data URL can be embedded directly.
+            if (image.resolvedSrc?.startsWith('data:')) {
+                dataUrls.set(image.id, image.resolvedSrc);
+                return;
+            }
+            if (!image.assetId || !assetResolver) {
+                return;
+            }
+            try {
+                const blob = await assetResolver.fetchBlob(image.assetId);
+                dataUrls.set(image.id, await this.blobToDataUrl(blob));
+            }
+            catch (err) {
+                console.warn(`[KritzelSvgExportHelper] Failed to inline image asset ${image.assetId} for export:`, err);
+            }
+        }));
+        return dataUrls;
+    }
+    /**
+     * Reads a Blob into a base64 `data:` URL.
+     * @param blob - The blob to encode
+     * @returns Promise resolving to the data URL string
+     */
+    static async blobToDataUrl(blob) {
+        // Prefer FileReader in browser-like runtimes for efficiency.
+        const hasFileReader = typeof FileReader !== 'undefined';
+        if (hasFileReader) {
+            try {
+                return await new Promise((resolve, reject) => {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        if (typeof reader.result === 'string') {
+                            resolve(reader.result);
+                            return;
+                        }
+                        reject(new Error('FileReader result is not a string'));
+                    };
+                    reader.onerror = () => reject(reader.error ?? new Error('Failed to read blob as data URL'));
+                    reader.readAsDataURL(blob);
+                });
+            }
+            catch {
+                // Fall through to the ArrayBuffer-based encoder.
+            }
+        }
+        const bytes = new Uint8Array(await blob.arrayBuffer());
+        const mimeType = blob.type || 'application/octet-stream';
+        return `data:${mimeType};base64,${this.uint8ToBase64(bytes)}`;
+    }
+    /**
+     * Encodes a byte array to base64 across browser and Node-like runtimes.
+     */
+    static uint8ToBase64(bytes) {
+        if (typeof Buffer !== 'undefined') {
+            return Buffer.from(bytes).toString('base64');
+        }
+        let binary = '';
+        const chunkSize = 0x8000;
+        for (let i = 0; i < bytes.length; i += chunkSize) {
+            const chunk = bytes.subarray(i, Math.min(i + chunkSize, bytes.length));
+            binary += String.fromCharCode(...chunk);
+        }
+        if (typeof btoa === 'function') {
+            return btoa(binary);
+        }
+        throw new Error('No base64 encoder available in this runtime');
+    }
     /**
      * Collects SVG defs (markers, patterns, etc.) needed by the objects.
      * @param objects - Objects to collect defs for
@@ -131,9 +227,10 @@ export class KritzelSvgExportHelper {
      * Converts a Kritzel object to its SVG element representation.
      * @param object - The object to convert
      * @param theme - Theme for color resolution
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
      * @returns SVG element string, or empty string if object type is not supported
      */
-    static objectToSvgElement(object, theme) {
+    static objectToSvgElement(object, theme, imageDataUrls, rasterSafeForCanvas = false) {
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelPath')) {
             return this.pathToSvg(object, theme);
         }
@@ -144,13 +241,13 @@ export class KritzelSvgExportHelper {
             return this.shapeToSvg(object, theme);
         }
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
-            return this.textToSvg(object, theme);
+            return this.textToSvg(object, theme, rasterSafeForCanvas);
         }
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelImage')) {
-            return this.imageToSvg(object);
+            return this.imageToSvg(object, imageDataUrls);
         }
         if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup')) {
-            return this.groupToSvg(object, theme);
+            return this.groupToSvg(object, theme, imageDataUrls, rasterSafeForCanvas);
         }
         return '';
     }
@@ -165,9 +262,10 @@ export class KritzelSvgExportHelper {
         const fill = KritzelColorHelper.resolveThemeColor(path.fill, theme);
         const stroke = KritzelColorHelper.resolveThemeColor(path.stroke, theme);
         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 / path.scale}" height="${path.totalHeight / path.scale}" overflow="visible">
+    <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>`;
@@ -182,10 +280,11 @@ export class KritzelSvgExportHelper {
         const transform = this.buildTransform(line);
         const stroke = KritzelColorHelper.resolveThemeColor(line.stroke, theme);
         const opacity = line.opacity !== 1 ? ` opacity="${line.opacity}"` : '';
+        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 / line.scale}" height="${line.totalHeight / line.scale}" overflow="visible">
+    <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>`;
@@ -201,6 +300,7 @@ export class KritzelSvgExportHelper {
         const fill = KritzelColorHelper.resolveThemeColor(shape.fillColor, theme);
         const stroke = KritzelColorHelper.resolveThemeColor(shape.strokeColor, theme);
         const opacity = shape.opacity !== 1 ? ` opacity="${shape.opacity}"` : '';
+        const scale = this.getObjectScale(shape);
         // Get the SVG path for the shape
         const pathD = shape.getSvgPath();
         // Handle text content if present
@@ -221,7 +321,7 @@ export class KritzelSvgExportHelper {
             }
         }
         return `<g transform="${transform}"${opacity}>
-    <svg viewBox="${shape.viewBox}" width="${shape.totalWidth / shape.scale}" height="${shape.totalHeight / shape.scale}" overflow="visible" preserveAspectRatio="none">
+    <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>`;
@@ -232,45 +332,85 @@ export class KritzelSvgExportHelper {
      * @param theme - Theme for color resolution
      * @returns SVG element string
      */
-    static textToSvg(text, theme) {
+    static textToSvg(text, theme, rasterSafeForCanvas = false) {
+        if (rasterSafeForCanvas) {
+            return this.textToSvgRasterSafe(text, theme);
+        }
         const transform = this.buildTransform(text);
         const opacity = text.opacity !== 1 ? ` opacity="${text.opacity}"` : '';
         const fontColor = KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
         const bgColor = KritzelColorHelper.resolveThemeColor(text.backgroundColor, theme);
+        const scale = this.getObjectScale(text);
         // Convert ProseMirror content to HTML
         const htmlContent = this.prosemirrorToHtml(text.content, text, theme);
         // Calculate dimensions accounting for scale
-        const width = text.totalWidth / text.scale;
-        const height = text.totalHeight / text.scale;
+        const width = text.totalWidth / scale;
+        const height = text.totalHeight / scale;
         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>
+  </g>`;
+    }
+    /**
+     * Converts a KritzelText to SVG using pure SVG text primitives.
+     * This path avoids `<foreignObject>`, which taints canvases when the
+     * generated SVG is rasterized through `<img>` and `drawImage`.
+     */
+    static textToSvgRasterSafe(text, theme) {
+        const transform = this.buildTransform(text);
+        const opacity = text.opacity !== 1 ? ` opacity="${text.opacity}"` : '';
+        const fontColor = KritzelColorHelper.resolveThemeColor(text.fontColor, theme);
+        const bgColor = KritzelColorHelper.resolveThemeColor(text.backgroundColor, theme);
+        const scale = this.getObjectScale(text);
+        const width = text.totalWidth / scale;
+        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;
+        const bgRect = bgColor && bgColor !== 'transparent'
+            ? `<rect x="0" y="0" width="${width}" height="${height}" fill="${bgColor}"/>`
+            : '';
+        const tspans = resolvedLines
+            .map((line, index) => {
+            const y = startY + index * lineHeight;
+            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="${resolvedFontSize}" fill="${fontColor}">${tspans}</text>
   </g>`;
     }
     /**
      * Converts a KritzelImage to SVG.
      *
-     * Uses `resolvedSrc` when available (populated by the renderer via the
-     * asset resolver), falling back to the legacy inline `src` field for
+     * Prefers an inlined `data:` URL from `imageDataUrls` (keyed by object
+     * id) when provided, so the embedded bytes survive rasterization to
+     * PNG. Falls back to `resolvedSrc` (populated by the renderer via the
+     * asset resolver) and finally the legacy inline `src` field for
      * documents persisted before the asset layer existed.
      *
-     * Note: SVG export is synchronous and cannot await asset bytes from a
-     * remote provider. Callers that need the fully rasterized image bytes
-     * embedded in the exported SVG should pre-resolve assets via
-     * `core.assetResolver.fetchBlob` and inline them as data URLs.
+     * Note: a `blob:` `resolvedSrc` renders correctly on-canvas but becomes
+     * a broken-image placeholder once the SVG is loaded into an `<img>` and
+     * drawn to a canvas. Callers that rasterize the SVG must pass
+     * `imageDataUrls` (see {@link KritzelSvgExportHelper.resolveImageDataUrls}).
      * @param image - The image object
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
      * @returns SVG element string
      */
-    static imageToSvg(image) {
+    static imageToSvg(image, imageDataUrls) {
         const transform = this.buildTransform(image);
         const opacity = image.opacity !== 1 ? ` opacity="${image.opacity}"` : '';
+        const scale = this.getObjectScale(image);
         // Calculate dimensions
-        const width = image.totalWidth / image.scale;
-        const height = image.totalHeight / image.scale;
-        const href = image.resolvedSrc || image.src || '';
+        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"/>
   </g>`;
@@ -279,12 +419,13 @@ export class KritzelSvgExportHelper {
      * Converts a KritzelGroup to SVG by recursively converting children.
      * @param group - The group object
      * @param theme - Theme for color resolution
+     * @param imageDataUrls - Optional map of image id -> inlined data URL
      * @returns SVG element string
      */
-    static groupToSvg(group, theme) {
+    static groupToSvg(group, theme, imageDataUrls, rasterSafeForCanvas = false) {
         const children = group.children
             .sort((a, b) => a.zIndex - b.zIndex)
-            .map(child => this.objectToSvgElement(child, theme))
+            .map(child => this.objectToSvgElement(child, theme, imageDataUrls, rasterSafeForCanvas))
             .filter(Boolean)
             .join('\n    ');
         if (!children) {
@@ -303,17 +444,25 @@ export class KritzelSvgExportHelper {
      */
     static buildTransform(object) {
         const transforms = [];
+        const scale = this.getObjectScale(object);
         // Translation
         transforms.push(`translate(${object.translateX}, ${object.translateY})`);
         // Rotation around center
         if (object.rotation !== 0) {
-            const centerX = object.totalWidth / 2 / object.scale;
-            const centerY = object.totalHeight / 2 / object.scale;
+            const centerX = object.totalWidth / 2 / scale;
+            const centerY = object.totalHeight / 2 / scale;
             const degrees = object.rotation * (180 / Math.PI);
             transforms.push(`rotate(${degrees}, ${centerX}, ${centerY})`);
         }
         return transforms.join(' ');
     }
+    /**
+     * Returns a safe non-zero scale for export geometry calculations.
+     */
+    static getObjectScale(object) {
+        const scale = object.scale ?? 1;
+        return scale === 0 ? 1 : scale;
+    }
     /**
      * Converts ProseMirror JSON content to HTML string.
      * @param content - ProseMirror document JSON
@@ -369,6 +518,54 @@ export class KritzelSvgExportHelper {
                 return '';
         }
     }
+    /**
+     * Converts ProseMirror JSON content to plain-text lines.
+     * Used by raster-safe SVG export, which cannot depend on HTML/foreignObject.
+     */
+    static prosemirrorToPlainTextLines(content) {
+        if (!content || !Array.isArray(content.content)) {
+            return [];
+        }
+        const plainText = content.content
+            .map((node) => this.nodeToPlainText(node))
+            .join('')
+            .replace(/\r\n/g, '\n')
+            .replace(/\n+$/, '');
+        if (!plainText) {
+            return [];
+        }
+        return plainText.split('\n');
+    }
+    /**
+     * Converts a ProseMirror node tree into plain text.
+     */
+    static nodeToPlainText(node) {
+        if (!node) {
+            return '';
+        }
+        switch (node.type) {
+            case 'text':
+                return node.text || '';
+            case 'hard_break':
+                return '\n';
+            case 'paragraph': {
+                const paragraph = Array.isArray(node.content)
+                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
+                    : '';
+                return `${paragraph}\n`;
+            }
+            case 'list_item': {
+                const item = Array.isArray(node.content)
+                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
+                    : '';
+                return `- ${item.trim()}\n`;
+            }
+            default:
+                return Array.isArray(node.content)
+                    ? node.content.map((child) => this.nodeToPlainText(child)).join('')
+                    : '';
+        }
+    }
     /**
      * Applies a ProseMirror mark to text.
      * @param text - The text to wrap

package/dist/collection/index.js

@@ -14,6 +14,7 @@ export * from './classes/objects/image.class';
 export * from './classes/objects/line.class';
 export * from './classes/objects/group.class';
 export * from './classes/objects/shape.class';
+export * from './classes/tools/base-tool.class';
 export * from './classes/tools/brush-tool.class';
 export * from './classes/tools/line-tool.class';
 export * from './classes/tools/eraser-tool.class';
@@ -34,6 +35,8 @@ export * from './classes/providers/assets/presigned-asset-provider.class';
 export * from './classes/core/workspace.class';
 export * from './classes/managers/anchor.manager';
 export * from './classes/managers/theme.manager';
+export * from './classes/managers/localization.manager';
+export * from './classes/managers/license.manager';
 export * from './interfaces/toolbar-control.interface';
 export * from './interfaces/menu-item.interface';
 export * from './interfaces/object-change-event.interface';
@@ -48,13 +51,23 @@ export * from './interfaces/anchor.interface';
 export * from './interfaces/viewport-state.interface';
 export * from './interfaces/user.interface';
 export * from './interfaces/theme.interface';
+export * from './interfaces/localization.interface';
 export * from './interfaces/shortcut.interface';
+export * from './interfaces/undo-state.interface';
+export * from './interfaces/share.interface';
+export * from './interfaces/engine-state.interface';
+export * from './interfaces/debug-info.interface';
+export * from './interfaces/bounding-box.interface';
+export * from './interfaces/polygon.interface';
 export * from './configs/default-brush-tool.config';
 export * from './configs/default-text-tool.config';
 export * from './configs/default-line-tool.config';
 export * from './configs/default-asset-storage.config';
 export * from './themes/light-theme';
 export * from './themes/dark-theme';
+export * from './locales/en-locale';
+export * from './locales/de-locale';
+export * from './locales/fr-locale';
 export * from './enums/alignment.enum';
 export * from './enums/shape-type.enum';
 export * from './interfaces/migration.interface';

package/dist/collection/interfaces/localization.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/locales/de-locale.js

@@ -0,0 +1,119 @@
+/**
+ * Built-in German locale.
+ */
+export const DE_LOCALE = {
+    code: 'de',
+    label: 'Deutsch',
+    terms: {
+        // Context menu
+        'menu.copy': 'Kopieren',
+        'menu.cut': 'Ausschneiden',
+        'menu.paste': 'Einfügen',
+        'menu.selectAll': 'Alles auswählen',
+        'menu.order': 'Anordnen',
+        'menu.bringToFront': 'In den Vordergrund',
+        'menu.sendToBack': 'In den Hintergrund',
+        'menu.moveUp': 'Nach vorne',
+        'menu.moveDown': 'Nach hinten',
+        'menu.align': 'Ausrichten',
+        'menu.alignLeft': 'Linksbündig ausrichten',
+        'menu.alignCenterHorizontal': 'Horizontal zentrieren',
+        'menu.alignRight': 'Rechtsbündig ausrichten',
+        'menu.alignTop': 'Oben ausrichten',
+        'menu.alignCenterVertical': 'Vertikal zentrieren',
+        'menu.alignBottom': 'Unten ausrichten',
+        'menu.group': 'Gruppieren',
+        'menu.ungroup': 'Gruppierung aufheben',
+        'menu.export': 'Exportieren',
+        'menu.exportAsSvg': 'Als SVG exportieren',
+        'menu.exportAsPng': 'Als PNG exportieren',
+        'menu.delete': 'Löschen',
+        // More menu
+        'menu.share': 'Teilen',
+        'menu.import': 'Importieren',
+        'menu.settings': 'Einstellungen',
+        'menu.logout': 'Abmelden',
+        // Settings dialog
+        'settings.dialogTitle': 'Einstellungen',
+        'settings.categories.general': 'Allgemein',
+        'settings.categories.viewport': 'Ansichtsfenster',
+        'settings.categories.shortcuts': 'Tastenkürzel',
+        'settings.categories.developer': 'Entwickleroptionen',
+        'settings.categories.about': 'Über',
+        'settings.general.title': 'Allgemeine Einstellungen',
+        'settings.general.theme.label': 'Design',
+        'settings.general.theme.description': 'Wählen Sie ein registriertes Farbdesign für die Editor-Oberfläche.',
+        'settings.general.language.label': 'Sprache',
+        'settings.general.language.description': 'Wählen Sie die Anzeigesprache für die Editor-Oberfläche.',
+        'settings.general.lockDrawingScale.label': 'Zeichenskalierung sperren',
+        'settings.general.lockDrawingScale.description': 'Wenn aktiviert, behalten gezeichnete Objekte unabhängig von der aktuellen Zoomstufe eine feste visuelle Größe.',
+        'settings.viewport.title': 'Ansichtsfenster-Einstellungen',
+        'settings.viewport.minZoom.label': 'Minimale Zoomstufe',
+        'settings.viewport.minZoom.description': 'Legt die minimale Zoomstufe fest. Niedrigere Werte ermöglichen weiteres Herauszoomen, um mehr von der Zeichenfläche zu sehen.',
+        'settings.viewport.maxZoom.label': 'Maximale Zoomstufe',
+        'settings.viewport.maxZoom.description': 'Legt die maximale Zoomstufe fest. Höhere Werte ermöglichen näheres Heranzoomen für Detailarbeit.',
+        'settings.viewport.boundaryLeft.label': 'Ansichtsfenster-Grenze links',
+        'settings.viewport.boundaryLeft.description': 'Linke Grenze in Weltkoordinaten. Legen Sie fest, wie weit das Ansichtsfenster nach links verschoben werden kann.',
+        'settings.viewport.boundaryRight.label': 'Ansichtsfenster-Grenze rechts',
+        'settings.viewport.boundaryRight.description': 'Rechte Grenze in Weltkoordinaten. Legen Sie fest, wie weit das Ansichtsfenster nach rechts verschoben werden kann.',
+        'settings.viewport.boundaryTop.label': 'Ansichtsfenster-Grenze oben',
+        'settings.viewport.boundaryTop.description': 'Obere Grenze in Weltkoordinaten. Legen Sie fest, wie weit das Ansichtsfenster nach oben verschoben werden kann.',
+        'settings.viewport.boundaryBottom.label': 'Ansichtsfenster-Grenze unten',
+        'settings.viewport.boundaryBottom.description': 'Untere Grenze in Weltkoordinaten. Legen Sie fest, wie weit das Ansichtsfenster nach unten verschoben werden kann.',
+        'settings.viewport.boundaryPlaceholder': 'Unendlich',
+        'settings.shortcuts.title': 'Tastenkürzel',
+        'settings.developer.title': 'Entwickleroptionen',
+        'settings.developer.showViewportInfo.label': 'Ansichtsfenster-Infos anzeigen',
+        'settings.developer.showViewportInfo.description': 'Zeigt Debug-Informationen zum Ansichtsfenster an, z. B. Position, Zoomstufe und Grenzen.',
+        'settings.developer.showObjectInfo.label': 'Objekt-Infos anzeigen',
+        'settings.developer.showObjectInfo.description': 'Zeigt Debug-Informationen zu Objekten auf der Zeichenfläche an.',
+        'settings.developer.showSyncProviderInfo.label': 'Sync-Provider-Infos anzeigen',
+        'settings.developer.showSyncProviderInfo.description': 'Zeigt Debug-Informationen zum Verbindungsstatus des Sync-Providers an.',
+        'settings.developer.showMigrationInfo.label': 'Migrations-Infos anzeigen',
+        'settings.developer.showMigrationInfo.description': 'Zeigt Debug-Informationen zu Datenmigrationen an.',
+        'settings.about.title': 'Über',
+        'settings.about.description': 'Kritzel – Eine Zeichenanwendung',
+        // Export dialog
+        'export.dialogTitle': 'Exportieren',
+        'export.tabs.viewport': 'Ansichtsfenster exportieren',
+        'export.tabs.workspace': 'Arbeitsbereich exportieren',
+        'export.format.label': 'Format',
+        'export.filename.label': 'Dateiname',
+        'export.filename.placeholder': 'Dateiname eingeben',
+        'export.exportButton': 'Exportieren',
+        // Workspace manager
+        'workspace.sharedTooltip': 'Geteilter Arbeitsbereich',
+        'workspace.rename': 'Umbenennen',
+        'workspace.delete': 'Löschen',
+        // Zoom panel
+        'zoom.zoomIn': 'Vergrößern',
+        'zoom.zoomOut': 'Verkleinern',
+        // Utility panel
+        'utility.undo': 'Rückgängig',
+        'utility.redo': 'Wiederholen',
+        'utility.delete': 'Ausgewählte Elemente löschen',
+        // Share dialog
+        'share.dialogTitle': 'Arbeitsbereich teilen',
+        'share.linkSharing.label': 'Link-Freigabe',
+        'share.linkSharing.enabledDescription': 'Jeder mit dem Link kann auf diesen Arbeitsbereich zugreifen.',
+        'share.linkSharing.disabledDescription': 'Die Link-Freigabe ist deaktiviert. Nur Sie können auf diesen Arbeitsbereich zugreifen.',
+        'share.linkSharing.toggleLabel': 'Link-Freigabe aktivieren',
+        'share.copyLink.title': 'Link kopieren',
+        'share.copyLink.copied': 'Kopiert!',
+        // Login dialog
+        'login.dialogTitle': 'Anmelden',
+        // Current user dialog
+        'currentUser.dialogTitle': 'Konto',
+        // Back to content
+        'backToContent.label': 'Zurück zum Inhalt',
+        // Tool config
+        'toolConfig.collapse': 'Einklappen',
+        'toolConfig.expand': 'Ausklappen',
+        // More menu button
+        'moreMenu.ariaLabel': 'Weitere Optionen',
+        // Engine
+        'engine.loading': 'Wird geladen...',
+        // Watermark
+        'watermark.poweredBy': 'Bereitgestellt von Kritzel',
+    },
+};