@kritzel/engine 0.4.31

package/dist/collection/components/kritzel-icon/kritzel-icon.css

@@ -0,0 +1,18 @@
+:host {
+  display: inline-flex; /* Changed from block to inline-flex for better alignment */
+  justify-content: center; /* Center content horizontally */
+  align-items: center; /* Center content vertically */
+  color: var(--kritzel-icon-color, inherited);
+}
+
+span {
+  display: flex;
+  align-items: center;
+  width: 100%; /* Make span fill host width */
+  height: 100%; /* Make span fill host height */
+}
+
+span > svg { /* Ensure SVG scales within the span */
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/kritzel-icon/kritzel-icon.js

@@ -0,0 +1,93 @@
+import { h, Host } from "@stencil/core";
+import { KritzelIconRegistry } from "../../classes/registries/icon-registry.class";
+export class KritzelIcon {
+    name;
+    label;
+    size = 24;
+    render() {
+        const svgContent = KritzelIconRegistry.get(this.name);
+        if (!svgContent) {
+            console.error(`[kritzel-icon] Icon "${this.name}" not found in registry.`);
+            return h("span", { class: "error-icon", "aria-label": `Error: Icon ${this.name} not found` }, "?");
+        }
+        const styles = {
+            width: `${this.size}px`,
+            height: `${this.size}px`,
+        };
+        return (h(Host, { style: styles }, h("span", { "aria-hidden": !this.label, role: this.label ? 'img' : undefined, "aria-label": this.label, innerHTML: svgContent })));
+    }
+    static get is() { return "kritzel-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-icon.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "24"
+            }
+        };
+    }
+}

package/dist/collection/components/kritzel-watermark/kritzel-watermark.css

@@ -0,0 +1,29 @@
+:host {
+  position: absolute;
+  bottom: var(--kritzel-watermark-offset-bottom, 12px);
+  right: var(--kritzel-watermark-offset-right, 12px);
+  z-index: 10000;
+  pointer-events: none;
+}
+
+.watermark-link {
+  pointer-events: auto;
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 8px;
+  border-radius: var(--kritzel-watermark-border-radius, 6px);
+  font-family: var(--kritzel-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  font-size: var(--kritzel-watermark-font-size, 11px);
+  line-height: 1;
+  text-decoration: none;
+  color: var(--kritzel-watermark-color, rgba(60, 60, 60, 0.75));
+  background-color: var(--kritzel-watermark-background, rgba(255, 255, 255, 0.6));
+  box-shadow: var(--kritzel-watermark-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.12));
+  opacity: var(--kritzel-watermark-opacity, 0.85);
+  transition: opacity 150ms ease;
+  user-select: none;
+}
+
+.watermark-link:hover {
+  opacity: 1;
+}

package/dist/collection/components/kritzel-watermark/kritzel-watermark.js

@@ -0,0 +1,83 @@
+import { Host, h } from "@stencil/core";
+import { KRITZEL_WEBSITE_URL } from "../../constants/engine.constants";
+/**
+ * "Powered by Kritzel" watermark shown in the bottom-right corner of the engine
+ * when the editor is not licensed.
+ *
+ * Rendered inside the engine's Shadow DOM and gated by the license manager on
+ * the engine's reactive render path, so removing the node simply causes it to
+ * reappear on the next render. The badge links to the Kritzel website.
+ */
+export class KritzelWatermark {
+    /** The core instance used to resolve localized terms. */
+    core;
+    /**
+     * Resolved "Powered by Kritzel" label. Passed in by the engine so the badge
+     * re-renders when the active locale changes. Falls back to resolving the term
+     * from the core when not provided.
+     */
+    label;
+    render() {
+        const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
+        return (h(Host, { key: '2bacbc19d9469c7fcaf5d6b1b3133ec14d3ff864' }, h("a", { key: '2de44e340afd092ed388b7575350af1ee9155d58', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+    }
+    static get is() { return "kritzel-watermark"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-watermark.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-watermark.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "core": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "KritzelCore",
+                    "resolved": "KritzelCore",
+                    "references": {
+                        "KritzelCore": {
+                            "location": "import",
+                            "path": "../../classes/core/core.class",
+                            "id": "src/classes/core/core.class.ts::KritzelCore",
+                            "referenceLocation": "KritzelCore"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The core instance used to resolve localized terms."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved \"Powered by Kritzel\" label. Passed in by the engine so the badge\r\nre-renders when the active locale changes. Falls back to resolving the term\r\nfrom the core when not provided."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            }
+        };
+    }
+}

package/dist/collection/configs/default-asset-storage.config.js

@@ -0,0 +1,9 @@
+/**
+ * Default asset storage configuration. Stores bytes in IndexedDB only,
+ * which provides offline-friendly behavior out of the box. Applications
+ * that sync Yjs over the network should also configure a remote provider
+ * (e.g. HttpAssetProvider) so images are available across devices.
+ */
+export const DEFAULT_ASSET_STORAGE_CONFIG = {
+    providers: [],
+};

package/dist/collection/configs/default-brush-tool.config.js

@@ -0,0 +1,9 @@
+import { DEFAULT_COLOR_PALETTE } from "../constants/color-palette.constants";
+import { DEFAULT_STROKE_SIZES } from "../constants/stroke-size.constants";
+export const DEFAULT_BRUSH_CONFIG = {
+    color: DEFAULT_COLOR_PALETTE[0],
+    size: 16,
+    opacity: 1,
+    palette: [...DEFAULT_COLOR_PALETTE],
+    sizes: [...DEFAULT_STROKE_SIZES],
+};

package/dist/collection/configs/default-engine-config.js

@@ -0,0 +1,73 @@
+export const DEFAULT_ENGINE_CONFIG = {
+    activeWorkspace: undefined,
+    activeTool: null,
+    objects: null,
+    snapCandidate: null,
+    snapPreviewCandidate: null,
+    resizeHandleType: null,
+    lineHandleType: null,
+    hasViewportChanged: false,
+    hasObjectsChanged: false,
+    isReady: false,
+    isEnabled: true,
+    isScaling: false,
+    isPanning: false,
+    isSelecting: false,
+    isResizing: false,
+    isResizeHandleHovered: false,
+    isResizeHandleSelected: false,
+    isRotating: false,
+    isRotationHandleHovered: false,
+    isRotationHandleSelected: false,
+    isLineHandleSelected: false,
+    isLineHandleDragging: false,
+    isDragging: false,
+    isDrawing: false,
+    isErasing: false,
+    isWriting: false,
+    isLoading: false,
+    isCtrlKeyPressed: false,
+    isContextMenuVisible: false,
+    contextMenuItems: [],
+    contextMenuX: 0,
+    contextMenuY: 0,
+    contextMenuWorldX: 0,
+    contextMenuWorldY: 0,
+    skipContextMenu: false,
+    debugInfo: {
+        showObjectInfo: false,
+        showViewportInfo: false,
+        showSyncProviderInfo: false,
+        showAssetResolverInfo: false,
+        showMigrationInfo: false,
+    },
+    host: null,
+    pointerX: 0,
+    pointerY: 0,
+    scale: 1,
+    scaleMax: 1,
+    scaleMin: 1,
+    startX: 0,
+    startY: 0,
+    translateX: 0,
+    translateXMax: 400,
+    translateXMin: 0,
+    translateY: 0,
+    translateYMax: 400,
+    translateYMin: 0,
+    viewportWidth: 0,
+    viewportHeight: 0,
+    longTouchTimeout: null,
+    longTouchDelay: 300,
+    pointers: new Map(),
+    workspaces: [],
+    cursor: {
+        icon: 'default',
+        iconActive: 'default'
+    },
+    lockDrawingScale: true,
+    viewportBoundaryLeft: -Infinity,
+    viewportBoundaryRight: Infinity,
+    viewportBoundaryTop: -Infinity,
+    viewportBoundaryBottom: Infinity
+};

package/dist/collection/configs/default-line-tool.config.js

@@ -0,0 +1,12 @@
+import { DEFAULT_COLOR_PALETTE } from "../constants/color-palette.constants";
+import { DEFAULT_STROKE_SIZES } from "../constants/stroke-size.constants";
+export const DEFAULT_LINE_TOOL_CONFIG = {
+    color: DEFAULT_COLOR_PALETTE[0],
+    size: 4,
+    opacity: 1,
+    palette: [...DEFAULT_COLOR_PALETTE],
+    sizes: [...DEFAULT_STROKE_SIZES],
+    arrows: {
+        end: { enabled: true, style: 'triangle' },
+    },
+};

package/dist/collection/configs/default-shape-tool.config.js

@@ -0,0 +1,15 @@
+import { ShapeType } from "../enums/shape-type.enum";
+import { DEFAULT_COLOR_PALETTE } from "../constants/color-palette.constants";
+import { DEFAULT_STROKE_SIZES } from "../constants/stroke-size.constants";
+export const DEFAULT_SHAPE_CONFIG = {
+    shapeType: ShapeType.Rectangle,
+    fillColor: { light: 'transparent', dark: 'transparent' },
+    strokeColor: DEFAULT_COLOR_PALETTE[0],
+    strokeWidth: 4,
+    opacity: 1,
+    fontColor: DEFAULT_COLOR_PALETTE[0],
+    fontSize: 16,
+    fontFamily: 'Arial',
+    palette: [...DEFAULT_COLOR_PALETTE],
+    sizes: [...DEFAULT_STROKE_SIZES],
+};

package/dist/collection/configs/default-sync.config.js

@@ -0,0 +1,6 @@
+/**
+ * Default sync configuration - None
+ */
+export const DEFAULT_SYNC_CONFIG = {
+    providers: [],
+};

package/dist/collection/configs/default-text-tool.config.js

@@ -0,0 +1,12 @@
+import { DEFAULT_COLOR_PALETTE } from "../constants/color-palette.constants";
+import { DEFAULT_FONT_SIZES } from "../constants/stroke-size.constants";
+import { DEFAULT_TEXT_TOOL_AVAILABLE_FONTS } from "../constants/text-tool-fonts.constants";
+export const DEFAULT_TEXT_CONFIG = {
+    color: DEFAULT_COLOR_PALETTE[0],
+    size: 8,
+    opacity: 1,
+    fontFamily: 'Arial',
+    availableFonts: [...DEFAULT_TEXT_TOOL_AVAILABLE_FONTS],
+    palette: [...DEFAULT_COLOR_PALETTE],
+    sizes: [...DEFAULT_FONT_SIZES],
+};

package/dist/collection/constants/color-palette.constants.js

@@ -0,0 +1,40 @@
+/**
+ * Helper function to resolve a color value for a specific theme
+ */
+export function resolveColor(color, theme) {
+    if (theme in color && color[theme]) {
+        return color[theme];
+    }
+    return color[theme === 'dark' ? 'dark' : 'light'];
+}
+/**
+ * Default color palette shared across all tool configurations.
+ * This ensures consistency in color options throughout the application.
+ * All colors support theme-specific variations.
+ */
+export const DEFAULT_COLOR_PALETTE = [
+    { light: '#000000', dark: '#ffffff', label: 'Primary' },
+    { light: '#ff5252', dark: '#ff5252' },
+    { light: '#ffbc00', dark: '#ffbc00' },
+    { light: '#00c853', dark: '#00c853' },
+    { light: '#0000FF', dark: '#0000FF' },
+    { light: '#d500f9', dark: '#d500f9' },
+    { light: '#fafafa', dark: '#212121', label: 'Background' },
+    { light: '#a52714', dark: '#a52714' },
+    { light: '#ee8100', dark: '#ee8100' },
+    { light: '#558b2f', dark: '#558b2f' },
+    { light: '#01579b', dark: '#01579b' },
+    { light: '#8e24aa', dark: '#8e24aa' },
+    { light: '#90a4ae', dark: '#607d8b', label: 'Neutral' },
+    { light: '#ff4081', dark: '#ff4081' },
+    { light: '#ff6e40', dark: '#ff6e40' },
+    { light: '#aeea00', dark: '#aeea00' },
+    { light: '#304ffe', dark: '#304ffe' },
+    { light: '#7c4dff', dark: '#7c4dff' },
+    { light: '#cfd8dc', dark: '#455a64' },
+    { light: '#f8bbd0', dark: '#ec407a' },
+    { light: '#ffccbc', dark: '#ff7043' },
+    { light: '#f0f4c3', dark: '#c0ca33' },
+    { light: '#9fa8da', dark: '#5c6bc0' },
+    { light: '#d1c4e9', dark: '#9575cd' },
+];

package/dist/collection/constants/core.constants.js

@@ -0,0 +1 @@
+// YJS_DOCUMENT_NAME removed - now each workspace has its own Y.Doc with naming: 'kritzel-workspace-${workspaceId}'

package/dist/collection/constants/engine.constants.js

@@ -0,0 +1,4 @@
+export const ABSOLUTE_SCALE_MAX = 1000;
+export const ABSOLUTE_SCALE_MIN = 0.0001;
+/** Destination opened when the "Powered by Kritzel" watermark is clicked. */
+export const KRITZEL_WEBSITE_URL = 'https://kritzel.io';

package/dist/collection/constants/license.constants.js

@@ -0,0 +1,25 @@
+/**
+ * License verification constants.
+ *
+ * Kritzel licenses are offline Ed25519 signed tokens. The owner signs each
+ * customer's token with a private key that never leaves their machine
+ * (see scripts/license/); the library verifies tokens against the public key
+ * below. The public key is safe to ship — it can only *verify* signatures,
+ * never forge them.
+ */
+/**
+ * Token format version prefix. A valid license key looks like:
+ *
+ *   KRTZL1.<base64url(payload JSON)>.<base64url(ed25519 signature)>
+ *
+ * Bump the version (and this prefix) if the token scheme ever changes.
+ */
+export const KRITZEL_LICENSE_TOKEN_PREFIX = 'KRTZL1.';
+/**
+ * Raw 32-byte Ed25519 public key (base64url) used to verify license tokens.
+ *
+ * Generate the matching key pair with `npm run license:keygen` and paste the
+ * printed public key here. Replacing this value invalidates every license
+ * signed with the previous key.
+ */
+export const KRITZEL_LICENSE_PUBLIC_KEY = '2IwZDin-qV3kOt8SEQCqdaJsGT9S7tAGapUYJVnVGQo';

package/dist/collection/constants/schema.constants.js

@@ -0,0 +1,4 @@
+/** Current schema version for the app-state Y.Doc (workspace list & settings). */
+export const CURRENT_APP_STATE_SCHEMA_VERSION = 2;
+/** Current schema version for workspace Y.Docs (drawable objects). */
+export const CURRENT_WORKSPACE_SCHEMA_VERSION = 3;

package/dist/collection/constants/storage.constants.js

@@ -0,0 +1 @@
+export const APP_STATE_INSTANCE_ID_STORAGE_KEY = 'kritzel-app-state-instance-id';

package/dist/collection/constants/stroke-size.constants.js

@@ -0,0 +1,2 @@
+export const DEFAULT_STROKE_SIZES = [4, 6, 8, 12, 16, 24];
+export const DEFAULT_FONT_SIZES = [8, 10, 12, 16, 20, 24];

package/dist/collection/constants/text-tool-fonts.constants.js

@@ -0,0 +1,18 @@
+export const DEFAULT_TEXT_TOOL_AVAILABLE_FONTS = [
+    'Arial',
+    'Verdana',
+    'Helvetica',
+    'Tahoma',
+    'Trebuchet MS',
+    'Times New Roman',
+    'Georgia',
+    'Garamond',
+    'Courier New',
+    'Brush Script MT',
+];
+export const resolveTextToolAvailableFonts = (availableFonts) => {
+    if (!availableFonts || availableFonts.length === 0) {
+        return [...DEFAULT_TEXT_TOOL_AVAILABLE_FONTS];
+    }
+    return [...availableFonts];
+};

package/dist/collection/constants/version.js

@@ -0,0 +1,6 @@
+/**
+ * The current version of the Kritzel library.
+ * This file is auto-generated by the version bump scripts.
+ * Do not modify manually.
+ */
+export const KRITZEL_VERSION = '0.4.31';

package/dist/collection/enums/alignment.enum.js

@@ -0,0 +1,9 @@
+export var KritzelAlignment;
+(function (KritzelAlignment) {
+    KritzelAlignment["StartHorizontal"] = "start-horizontal";
+    KritzelAlignment["CenterHorizontal"] = "center-horizontal";
+    KritzelAlignment["EndHorizontal"] = "end-horizontal";
+    KritzelAlignment["StartVertical"] = "start-vertical";
+    KritzelAlignment["CenterVertical"] = "center-vertical";
+    KritzelAlignment["EndVertical"] = "end-vertical";
+})(KritzelAlignment || (KritzelAlignment = {}));

package/dist/collection/enums/event-button.enum.js

@@ -0,0 +1,6 @@
+export var KritzelMouseButton;
+(function (KritzelMouseButton) {
+    KritzelMouseButton[KritzelMouseButton["Left"] = 0] = "Left";
+    KritzelMouseButton[KritzelMouseButton["Middle"] = 1] = "Middle";
+    KritzelMouseButton[KritzelMouseButton["Right"] = 2] = "Right";
+})(KritzelMouseButton || (KritzelMouseButton = {}));

package/dist/collection/enums/handle-type.enum.js

@@ -0,0 +1,7 @@
+export var KritzelHandleType;
+(function (KritzelHandleType) {
+    KritzelHandleType["TopLeft"] = "top-left";
+    KritzelHandleType["TopRight"] = "top-right";
+    KritzelHandleType["BottomLeft"] = "bottom-left";
+    KritzelHandleType["BottomRight"] = "bottom-right";
+})(KritzelHandleType || (KritzelHandleType = {}));

package/dist/collection/enums/shape-type.enum.js

@@ -0,0 +1,6 @@
+export var ShapeType;
+(function (ShapeType) {
+    ShapeType["Rectangle"] = "rectangle";
+    ShapeType["Ellipse"] = "ellipse";
+    ShapeType["Triangle"] = "triangle";
+})(ShapeType || (ShapeType = {}));

package/dist/collection/events/active-workspace-change.event.js

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

package/dist/collection/events/editor-is-ready.event.js

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

package/dist/collection/events/login.event.js

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

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

@@ -0,0 +1,73 @@
+import { KritzelAlignment } from "../enums/alignment.enum";
+/**
+ * Helper class for aligning objects within a selection group.
+ */
+export class AlignmentHelper {
+    /**
+     * Calculates the selection bounds from all objects' rotated bounding boxes.
+     */
+    static calculateSelectionBounds(objects) {
+        const bounds = objects.map(obj => obj.rotatedBoundingBox);
+        return {
+            minX: Math.min(...bounds.map(b => b.x)),
+            minY: Math.min(...bounds.map(b => b.y)),
+            maxX: Math.max(...bounds.map(b => b.x + b.width)),
+            maxY: Math.max(...bounds.map(b => b.y + b.height)),
+        };
+    }
+    /**
+     * Calculates the new translate positions for each object based on the alignment type.
+     * @param objects The objects to align
+     * @param alignment The alignment type
+     * @returns A map of object IDs to their new translateX and translateY values
+     */
+    static calculateAlignedPositions(objects, alignment) {
+        const result = new Map();
+        if (objects.length < 2) {
+            return result;
+        }
+        const selectionBounds = this.calculateSelectionBounds(objects);
+        for (const obj of objects) {
+            const objBounds = obj.rotatedBoundingBox;
+            let newTranslateX = obj.translateX;
+            let newTranslateY = obj.translateY;
+            // Calculate the offset between the object's translateX/Y and its rotated bounding box position
+            const offsetX = objBounds.x - obj.translateX;
+            const offsetY = objBounds.y - obj.translateY;
+            switch (alignment) {
+                case KritzelAlignment.StartHorizontal:
+                    // Align left edges to selection's left edge
+                    newTranslateX = selectionBounds.minX - offsetX;
+                    break;
+                case KritzelAlignment.CenterHorizontal:
+                    // Align centers horizontally
+                    const selectionCenterX = (selectionBounds.minX + selectionBounds.maxX) / 2;
+                    const objCenterX = objBounds.x + objBounds.width / 2;
+                    newTranslateX = obj.translateX + (selectionCenterX - objCenterX);
+                    break;
+                case KritzelAlignment.EndHorizontal:
+                    // Align right edges to selection's right edge
+                    const objRightEdge = objBounds.x + objBounds.width;
+                    newTranslateX = obj.translateX + (selectionBounds.maxX - objRightEdge);
+                    break;
+                case KritzelAlignment.StartVertical:
+                    // Align top edges to selection's top edge
+                    newTranslateY = selectionBounds.minY - offsetY;
+                    break;
+                case KritzelAlignment.CenterVertical:
+                    // Align centers vertically
+                    const selectionCenterY = (selectionBounds.minY + selectionBounds.maxY) / 2;
+                    const objCenterY = objBounds.y + objBounds.height / 2;
+                    newTranslateY = obj.translateY + (selectionCenterY - objCenterY);
+                    break;
+                case KritzelAlignment.EndVertical:
+                    // Align bottom edges to selection's bottom edge
+                    const objBottomEdge = objBounds.y + objBounds.height;
+                    newTranslateY = obj.translateY + (selectionBounds.maxY - objBottomEdge);
+                    break;
+            }
+            result.set(obj.id, { translateX: newTranslateX, translateY: newTranslateY });
+        }
+        return result;
+    }
+}

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

@@ -0,0 +1,5 @@
+export class KritzelClassHelper {
+    static isInstanceOf(object, className) {
+        return !!object && object.__class__ === className;
+    }
+}