kritzel-stencil 0.4.20 → 0.4.22

package/dist/collection/components/core/kritzel-engine/kritzel-engine.js

@@ -258,7 +258,7 @@ export class KritzelEngine {
     contextMenuStateChange;
     /** Emitted when the combined loading state (external `isLoading` prop or internal workspace loading) changes. */
     loadingChange;
-    /** Emitted when remote workspace synchronization is in progress. */
+    /** Emitted while remote changes are being applied to the active workspace. Stays silent when the remote holds nothing new. */
     syncingChange;
     forceUpdate = 0;
     isSyncing = false;
@@ -1845,6 +1845,7 @@ export class KritzelEngine {
     _sceneBootstrapOpacity = 1;
     _sceneBootstrapTransitionEnabled = false;
     _sceneBootstrapTransitionTimer = null;
+    _remoteChangesUnsubscribe = null;
     _defaultUndoState = {
         canUndo: false,
         canRedo: false,
@@ -1862,9 +1863,16 @@ export class KritzelEngine {
         this.loadingChange.emit(this.core.store.state.isLoading);
     }
     syncSyncingState(isSyncing) {
+        if (this.isSyncing === isSyncing) {
+            return;
+        }
         this.isSyncing = isSyncing;
         this.syncingChange.emit(isSyncing);
     }
+    clearRemoteChangesSubscription() {
+        this._remoteChangesUnsubscribe?.();
+        this._remoteChangesUnsubscribe = null;
+    }
     isNetworkAvailable() {
         return typeof navigator !== 'undefined' && navigator.onLine;
     }
@@ -1957,6 +1965,7 @@ export class KritzelEngine {
     disconnectedCallback() {
         this.throttledPointerMoveMulti.cancel();
         this._revealedImageKeys.clear();
+        this.clearRemoteChangesSubscription();
         if (this._sceneBootstrapTransitionTimer !== null) {
             clearTimeout(this._sceneBootstrapTransitionTimer);
             this._sceneBootstrapTransitionTimer = null;
@@ -2103,6 +2112,7 @@ export class KritzelEngine {
         if (!this._isAssetStorageInitialized && this.assetStorageConfig) {
             await this.initializeAssetStorage();
         }
+        await this.waitForRemoteAppStateIfEmpty();
         if (this.activeWorkspaceId) {
             const startupWorkspace = this.core.getWorkspaces().find(ws => ws.id === this.activeWorkspaceId);
             if (startupWorkspace) {
@@ -2135,6 +2145,27 @@ export class KritzelEngine {
         }
         this.tryResolveActiveWorkspaceFromId();
     }
+    /**
+     * On a cold start the remote workspace list may still be in flight; creating a
+     * fallback workspace before it arrives would pollute the synced app state.
+     */
+    async waitForRemoteAppStateIfEmpty() {
+        if (this.core.getWorkspaces().length > 0) {
+            return;
+        }
+        if (!this.core.appStateMap.hasNetworkSyncProvider || !this.isNetworkAvailable()) {
+            return;
+        }
+        this._isWorkspaceLoading = true;
+        this.syncLoadingState();
+        try {
+            await this.core.appStateMap.whenNetworkSynced();
+        }
+        finally {
+            this._isWorkspaceLoading = false;
+            this.syncLoadingState();
+        }
+    }
     resolveStartupWorkspace() {
         if (this.activeWorkspaceId) {
             const workspaceById = this.core.getWorkspaces().find(ws => ws.id === this.activeWorkspaceId);
@@ -2189,21 +2220,7 @@ export class KritzelEngine {
         this._workspaceInitializationTargetKey = targetKey;
         try {
             await initializationPromise;
-            // Track remote sync in the background without blocking the loading overlay.
-            const initializedObjects = this.core.store.objects;
-            const networkSyncPromise = initializedObjects?.whenNetworkSynced();
-            if (networkSyncPromise && this.isNetworkAvailable()) {
-                this.syncSyncingState(true);
-                void networkSyncPromise.finally(() => {
-                    // Only clear syncing for the currently active object map.
-                    if (this.core.store.objects === initializedObjects) {
-                        this.syncSyncingState(false);
-                    }
-                });
-            }
-            else {
-                this.syncSyncingState(false);
-            }
+            this.trackRemoteSynchronization();
         }
         finally {
             // Only the most recent init clears loading state to prevent race conditions
@@ -2215,6 +2232,38 @@ export class KritzelEngine {
             }
         }
     }
+    /**
+     * Reports syncing only while remote data is actually being reconciled into the
+     * active workspace. Yjs suppresses updates that carry nothing new, so a workspace
+     * that already matches the remote never reports syncing at all.
+     */
+    trackRemoteSynchronization() {
+        this.clearRemoteChangesSubscription();
+        this.syncSyncingState(false);
+        const initializedObjects = this.core.store.objects;
+        if (!initializedObjects?.hasNetworkSyncProvider || !this.isNetworkAvailable()) {
+            return;
+        }
+        if (initializedObjects.supportsRemoteChangeDetection) {
+            this._remoteChangesUnsubscribe = initializedObjects.onRemoteChangesApplied(() => {
+                if (this.core.store.objects !== initializedObjects) {
+                    return;
+                }
+                this.syncSyncingState(true);
+            });
+        }
+        else {
+            // Custom providers without an update origin cannot be diffed, so fall back to reporting the whole handshake.
+            this.syncSyncingState(true);
+        }
+        void initializedObjects.whenNetworkSynced().finally(() => {
+            if (this.core.store.objects !== initializedObjects) {
+                return;
+            }
+            this.clearRemoteChangesSubscription();
+            this.syncSyncingState(false);
+        });
+    }
     emitObjectsChange() {
         const objectsMap = this.core.store.objects;
         if (!objectsMap) {
@@ -2970,7 +3019,7 @@ export class KritzelEngine {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Configuration for binary asset storage (e.g., images).\r\n\r\nThe Yjs document only persists asset ids; the actual bytes are stored\r\nby the providers listed here. Defaults to IndexedDB-only storage. To\r\nsupport cross-device image sync alongside a networked sync provider\r\n(Hocuspocus, WebSocket), configure at least one remote asset provider\r\nsuch as `HttpAssetProvider` or `PresignedAssetProvider`."
+                    "text": "Configuration for binary asset storage (e.g., images).\n\nThe Yjs document only persists asset ids; the actual bytes are stored\nby the providers listed here. Defaults to IndexedDB-only storage. To\nsupport cross-device image sync alongside a networked sync provider\n(Hocuspocus, WebSocket), configure at least one remote asset provider\nsuch as `HttpAssetProvider` or `PresignedAssetProvider`."
                 },
                 "getter": false,
                 "setter": false
@@ -3838,7 +3887,7 @@ export class KritzelEngine {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when remote workspace synchronization is in progress."
+                    "text": "Emitted while remote changes are being applied to the active workspace. Stays silent when the remote holds nothing new."
                 },
                 "complexType": {
                     "original": "boolean",
@@ -4399,7 +4448,7 @@ export class KritzelEngine {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Programmatically opens the context menu at a specified world-coordinate position.\r\nIf `objectId` is provided and found, the object context menu is shown for that object.\r\nIf no `objectId` is provided but a selection group already exists, the object context menu is shown.\r\nOtherwise, the global context menu is shown.",
+                    "text": "Programmatically opens the context menu at a specified world-coordinate position.\nIf `objectId` is provided and found, the object context menu is shown for that object.\nIf no `objectId` is provided but a selection group already exists, the object context menu is shown.\nOtherwise, the global context menu is shown.",
                     "tags": [{
                             "name": "param",
                             "text": "options.x - The X position in world (canvas) coordinates."
@@ -4509,7 +4558,7 @@ export class KritzelEngine {
                     "return": "Promise<T[]>"
                 },
                 "docs": {
-                    "text": "Returns all objects that match the given predicate function.\r\nExcludes internal selection-related objects (selection groups and selection boxes).",
+                    "text": "Returns all objects that match the given predicate function.\nExcludes internal selection-related objects (selection groups and selection boxes).",
                     "tags": [{
                             "name": "param",
                             "text": "predicate - A filter function called for each object. Return `true` to include."
@@ -4518,7 +4567,7 @@ export class KritzelEngine {
                             "text": "An array of matching objects."
                         }, {
                             "name": "example",
-                            "text": "```ts\r\n// Find all text objects\r\nconst texts = await engine.findObjects(obj => obj.__class__ === 'KritzelText');\r\n\r\n// Find objects at a point\r\nconst hits = await engine.findObjects(obj => obj.hitTest(100, 200));\r\n\r\n// Combine criteria\r\nconst filtered = await engine.findObjects(obj => obj.__class__ === 'KritzelPath' && obj.opacity < 0.5);\r\n```"
+                            "text": "```ts\n// Find all text objects\nconst texts = await engine.findObjects(obj => obj.__class__ === 'KritzelText');\n\n// Find objects at a point\nconst hits = await engine.findObjects(obj => obj.hitTest(100, 200));\n\n// Combine criteria\nconst filtered = await engine.findObjects(obj => obj.__class__ === 'KritzelPath' && obj.opacity < 0.5);\n```"
                         }]
                 }
             },
@@ -4651,7 +4700,7 @@ export class KritzelEngine {
                     "return": "Promise<T[]>"
                 },
                 "docs": {
-                    "text": "Adds multiple objects to the canvas in a single batch operation.\r\nAll objects are inserted within one Yjs transaction (single undo step),\r\ntriggering only one rerender cycle. Intended for programmatic streaming\r\nscenarios where per-object overhead would cause stutter.",
+                    "text": "Adds multiple objects to the canvas in a single batch operation.\nAll objects are inserted within one Yjs transaction (single undo step),\ntriggering only one rerender cycle. Intended for programmatic streaming\nscenarios where per-object overhead would cause stutter.",
                     "tags": [{
                             "name": "param",
                             "text": "objects - The object instances to add."
@@ -4773,7 +4822,7 @@ export class KritzelEngine {
                     "return": "Promise<T[]>"
                 },
                 "docs": {
-                    "text": "Removes multiple objects from the canvas in a single batch operation.\r\nAll removals happen within one Yjs transaction (single undo step),\r\ntriggering only one rerender cycle. Intended for programmatic streaming\r\nscenarios where per-object overhead would cause stutter.",
+                    "text": "Removes multiple objects from the canvas in a single batch operation.\nAll removals happen within one Yjs transaction (single undo step),\ntriggering only one rerender cycle. Intended for programmatic streaming\nscenarios where per-object overhead would cause stutter.",
                     "tags": [{
                             "name": "param",
                             "text": "objects - The objects to remove."
@@ -4961,7 +5010,7 @@ export class KritzelEngine {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Pans the viewport to center on the given object without changing the zoom level.\r\nUnlike `centerObjectInViewport`, this moves the camera \u2014 not the object.",
+                    "text": "Pans the viewport to center on the given object without changing the zoom level.\nUnlike `centerObjectInViewport`, this moves the camera \u2014 not the object.",
                     "tags": [{
                             "name": "param",
                             "text": "object - The object whose center the viewport should pan to."
@@ -4981,7 +5030,7 @@ export class KritzelEngine {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Pans and zooms the viewport to fit the nearest content, with padding.\r\nUseful when the user has panned away from all objects.",
+                    "text": "Pans and zooms the viewport to fit the nearest content, with padding.\nUseful when the user has panned away from all objects.",
                     "tags": [{
                             "name": "returns",
                             "text": "`true` if content was found and the viewport was adjusted, `false` otherwise."
@@ -5005,7 +5054,7 @@ export class KritzelEngine {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Pans and zooms the viewport to fit ALL objects on the canvas, including those not currently rendered.\r\nCalculates the combined bounding box of all objects and centers the viewport to show them.",
+                    "text": "Pans and zooms the viewport to fit ALL objects on the canvas, including those not currently rendered.\nCalculates the combined bounding box of all objects and centers the viewport to show them.",
                     "tags": [{
                             "name": "param",
                             "text": "animate - Whether to animate the viewport transition (default: true)."
@@ -5042,7 +5091,7 @@ export class KritzelEngine {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Pans and zooms the viewport to fit the provided objects.\r\nCalculates the combined bounding box of the given objects and centers the viewport to show them.",
+                    "text": "Pans and zooms the viewport to fit the provided objects.\nCalculates the combined bounding box of the given objects and centers the viewport to show them.",
                     "tags": [{
                             "name": "param",
                             "text": "objects - The objects to center and fit in the viewport."
@@ -5149,7 +5198,7 @@ export class KritzelEngine {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Zooms the viewport to the given scale level.\r\nOptionally centers on a world point; if omitted, zooms around the viewport center.",
+                    "text": "Zooms the viewport to the given scale level.\nOptionally centers on a world point; if omitted, zooms around the viewport center.",
                     "tags": [{
                             "name": "param",
                             "text": "scale - Target scale level."
@@ -5467,7 +5516,7 @@ export class KritzelEngine {
                     "return": "Promise<KritzelObjectExportFormat[]>"
                 },
                 "docs": {
-                    "text": "Returns export formats supported by the currently selected object.\r\nOnly returns formats when exactly one object is selected.",
+                    "text": "Returns export formats supported by the currently selected object.\nOnly returns formats when exactly one object is selected.",
                     "tags": []
                 }
             },
@@ -5494,7 +5543,7 @@ export class KritzelEngine {
                     "return": "Promise<boolean>"
                 },
                 "docs": {
-                    "text": "Checks whether the currently selected object supports a specific export format.\r\nReturns false when none or multiple objects are selected.",
+                    "text": "Checks whether the currently selected object supports a specific export format.\nReturns false when none or multiple objects are selected.",
                     "tags": []
                 }
             },
@@ -5521,7 +5570,7 @@ export class KritzelEngine {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Exports the currently selected object in the requested format and triggers a file download.\r\nOnly supports single selection.",
+                    "text": "Exports the currently selected object in the requested format and triggers a file download.\nOnly supports single selection.",
                     "tags": []
                 }
             },
@@ -5542,7 +5591,7 @@ export class KritzelEngine {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "Exports the current workspace and all its objects as a JSON string.\r\nThe exported data includes workspace metadata (id, name, viewport) and all canvas objects.",
+                    "text": "Exports the current workspace and all its objects as a JSON string.\nThe exported data includes workspace metadata (id, name, viewport) and all canvas objects.",
                     "tags": [{
                             "name": "returns",
                             "text": "A JSON string representing the complete workspace state."
@@ -5576,7 +5625,7 @@ export class KritzelEngine {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Imports a workspace from a JSON string into a new workspace.\r\nCreates a new workspace with the imported data and automatically switches to it.",
+                    "text": "Imports a workspace from a JSON string into a new workspace.\nCreates a new workspace with the imported data and automatically switches to it.",
                     "tags": [{
                             "name": "param",
                             "text": "json - A JSON string containing workspace data (from exportAsJson)."
@@ -5613,7 +5662,7 @@ export class KritzelEngine {
                     "return": "Promise<number>"
                 },
                 "docs": {
-                    "text": "Loads objects from a workspace JSON string into the current workspace.\r\nUnlike importFromJson, this does not create a new workspace - it adds objects to the existing one.\r\nUseful for initializing a workspace with pre-existing content after the editor is ready.",
+                    "text": "Loads objects from a workspace JSON string into the current workspace.\nUnlike importFromJson, this does not create a new workspace - it adds objects to the existing one.\nUseful for initializing a workspace with pre-existing content after the editor is ready.",
                     "tags": [{
                             "name": "param",
                             "text": "json - A JSON string containing workspace data (from exportAsJson)."
@@ -5673,7 +5722,7 @@ export class KritzelEngine {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Opens a file picker dialog and imports the selected JSON file into the workspace.\r\nThis method creates a hidden file input, triggers the browser's file chooser,\r\nreads the selected JSON file, and imports it using importFromJson.",
+                    "text": "Opens a file picker dialog and imports the selected JSON file into the workspace.\nThis method creates a hidden file input, triggers the browser's file chooser,\nreads the selected JSON file, and imports it using importFromJson.",
                     "tags": [{
                             "name": "returns",
                             "text": "A promise that resolves when the import is complete or rejects on error/cancel."
@@ -5856,7 +5905,7 @@ export class KritzelEngine {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Loads a shared workspace by token.\r\nIf the workspace exists locally, it switches to it.\r\nIf it doesn't exist, it adds it to the local workspaces list and then switches to it.",
+                    "text": "Loads a shared workspace by token.\nIf the workspace exists locally, it switches to it.\nIf it doesn't exist, it adds it to the local workspaces list and then switches to it.",
                     "tags": [{
                             "name": "param",
                             "text": "token - The connection token identifying the shared workspace"
@@ -5876,7 +5925,7 @@ export class KritzelEngine {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Reinitializes sync by performing a full teardown and re-initialization.\r\nDestroys the current Yjs documents and providers, then rebuilds everything\r\nfrom the current syncConfig. Data reloads from IndexedDB nearly instantly.\r\nCall this after updating the syncConfig prop (e.g. after authentication state changes).",
+                    "text": "Reinitializes sync by performing a full teardown and re-initialization.\nDestroys the current Yjs documents and providers, then rebuilds everything\nfrom the current syncConfig. Data reloads from IndexedDB nearly instantly.\nCall this after updating the syncConfig prop (e.g. after authentication state changes).",
                     "tags": []
                 }
             },
@@ -6139,7 +6188,7 @@ export class KritzelEngine {
                     "return": "Promise<Partial<Record<keyof KritzelTerms, string>>>"
                 },
                 "docs": {
-                    "text": "Resolves every known term key for the active locale into a flat map.\r\nUseful for UI layers that need to localize many strings at once.",
+                    "text": "Resolves every known term key for the active locale into a flat map.\nUseful for UI layers that need to localize many strings at once.",
                     "tags": []
                 }
             }

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

@@ -1,29 +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;
-}
+: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/core/kritzel-watermark/kritzel-watermark.js

@@ -19,7 +19,7 @@ export class KritzelWatermark {
     label;
     render() {
         const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
-        return (h(Host, { key: 'de81b568421f5517fe19897bd4a4a5d58d1f622d' }, h("a", { key: '6278f78180869650afc181aac5c37aa401c09040', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+        return (h(Host, { key: 'ae00d98f16912afcb7a90d47a9fc4d55fc7468f0' }, h("a", { key: '8781f94c9efe44b0e7a7a8c20a119160cb9feb8e', 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"; }
@@ -71,7 +71,7 @@ export class KritzelWatermark {
                 "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."
+                    "text": "Resolved \"Powered by Kritzel\" label. Passed in by the engine so the badge\nre-renders when the active locale changes. Falls back to resolving the term\nfrom the core when not provided."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.css

@@ -1,58 +1,58 @@
-:host {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 50%;
-  overflow: hidden;
-  user-select: none;
-  flex-shrink: 0;
-}
-
-.avatar-image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 50%;
-}
-
-.avatar-initials {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  color: var(--kritzel-avatar-initials-color, #ffffff);
-  font-weight: var(--kritzel-avatar-initials-font-weight, 500);
-  font-family: var(--kritzel-avatar-initials-font-family, sans-serif);
-  line-height: 1;
-}
-
-.avatar-default {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  background-color: var(--kritzel-avatar-default-background, #e0e0e0);
-  color: var(--kritzel-avatar-default-color, #9e9e9e);
-}
-
-.avatar-default svg {
-  width: 60%;
-  height: 60%;
-}
-
-:host(.has-image) {
-  border: var(--kritzel-avatar-border, none);
-}
-
-:host(.has-initials) {
-  border: var(--kritzel-avatar-border, none);
-}
-
-:host(.has-default) {
-  border: var(--kritzel-avatar-border, none);
-}
+:host {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  overflow: hidden;
+  user-select: none;
+  flex-shrink: 0;
+}
+
+.avatar-image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 50%;
+}
+
+.avatar-initials {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  color: var(--kritzel-avatar-initials-color, #ffffff);
+  font-weight: var(--kritzel-avatar-initials-font-weight, 500);
+  font-family: var(--kritzel-avatar-initials-font-family, sans-serif);
+  line-height: 1;
+}
+
+.avatar-default {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: var(--kritzel-avatar-default-background, #e0e0e0);
+  color: var(--kritzel-avatar-default-color, #9e9e9e);
+}
+
+.avatar-default svg {
+  width: 60%;
+  height: 60%;
+}
+
+:host(.has-image) {
+  border: var(--kritzel-avatar-border, none);
+}
+
+:host(.has-initials) {
+  border: var(--kritzel-avatar-border, none);
+}
+
+:host(.has-default) {
+  border: var(--kritzel-avatar-border, none);
+}

package/dist/collection/components/shared/kritzel-avatar/kritzel-avatar.js

@@ -81,16 +81,16 @@ export class KritzelAvatar {
             height: `${this.size}px`,
             fontSize: `${Math.round(this.size * 0.4)}px`,
         };
-        return (h(Host, { key: '020217baf0aa2736af33c5a003e89406322e5fdc', style: containerStyles, class: {
+        return (h(Host, { key: '90ce966bb2a374e68c544906c8c746df6cc01038', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '2f54dad2260ebf38cfe8c57e28899c98729e7e38', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '6799f4ad45c7d40ebaf640f191171ed6a5f14ae9', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (h("span", { key: 'a97435d30044a37f15ce72ed51439e9c682c0aa3', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '6d0893d3f15a2d68a93f3fcf1b0fbd36786be0eb', class: "avatar-default" }, h("svg", { key: '688a9a1f88e22f4f3c3085675618b5f5f460d8f7', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: 'd12c67677e162534b2ad92535acc6a836df179c7', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: '98cdcda64b900994b61a03179be9f2af17c489e8', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '64e6a6ee67017c927dce0b51810a5bb02fc0d6d1', class: "avatar-default" }, h("svg", { key: '42f99637a3c23aaf10fa7c99753347ede1d518c0', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '28b52a68b36e98b0e14891fd225457be65f1bb46', d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" }))))));
     }
     static get is() { return "kritzel-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/shared/kritzel-brush-style/kritzel-brush-style.css

@@ -1,43 +1,43 @@
-: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);
+: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);
 }