kritzel-stencil 0.1.83 → 0.1.86

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

@@ -1,100 +1,100 @@
-:host {
-  display: block;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  background-color: var(--kritzel-engine-background-color, #ffffff);
-}
-
-:host,
-:host * {
-  touch-action: none;
-  user-select: none;
-}
-
-.ProseMirror {
-  outline: none;
-}
-
-p, h1, h2, h3, h4, h5, h6, blockquote, pre {
-  margin: 0;
-  padding: 0;
-}
-
-.workspace-loading-overlay {
-  position: absolute;
-  inset: 0;
-  z-index: 9999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  background-color: var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));
-  color: var(--kritzel-loading-overlay-color, #333);
-  font-family: var(--kritzel-font-family, sans-serif);
-  font-size: 1.25rem;
-  pointer-events: all;
-  animation: workspace-loading-fade-in 200ms ease-out var(--kritzel-loading-overlay-delay, 300ms) forwards;
-  opacity: 0;
-}
-
-.workspace-loading-spinner {
-  width: 20px;
-  height: 20px;
-  box-sizing: border-box;
-  display: block;
-  flex-shrink: 0;
-  border: 2px solid var(--kritzel-loading-overlay-spinner-color, #cccccc);
-  border-top-color: var(--kritzel-loading-overlay-spinner-active-color, #333333);
-  border-radius: 50%;
-  animation: workspace-loading-spin 0.6s linear infinite;
-}
-
-@keyframes workspace-loading-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes workspace-loading-fade-in {
-  to {
-    opacity: 1;
-  }
-}
-
-.debug-panel {
-  position: absolute;
-  pointer-events: none;
-  top: 0;
-  right: 0;
-}
-
-.origin {
-  position: relative;
-  top: 0;
-  left: 0;
-  height: 0;
-  width: 0;
-  pointer-events: none;
-  -webkit-transform-origin: top left;
-  -moz-transform-origin: top left;
-  transform-origin: top left;
-  overflow: visible;
-}
-
-.object {
-  overflow: visible;
-}
-
-.PlaygroundEditorTheme__quote {
-  margin: 0;
-  margin-left: 20px;
-  margin-bottom: 10px;
-  font-size: 15px;
-  color: rgb(101, 103, 107);
-  border-left-color: rgb(206, 208, 212);
-  border-left-width: 4px;
-  border-left-style: solid;
-  padding-left: 16px;
+:host {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  background-color: var(--kritzel-engine-background-color, #ffffff);
+}
+
+:host,
+:host * {
+  touch-action: none;
+  user-select: none;
+}
+
+.ProseMirror {
+  outline: none;
+}
+
+p, h1, h2, h3, h4, h5, h6, blockquote, pre {
+  margin: 0;
+  padding: 0;
+}
+
+.workspace-loading-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  background-color: var(--kritzel-loading-overlay-background, rgba(255, 255, 255, 0.6));
+  color: var(--kritzel-loading-overlay-color, #333);
+  font-family: var(--kritzel-font-family, sans-serif);
+  font-size: 1.25rem;
+  pointer-events: all;
+  animation: workspace-loading-fade-in 200ms ease-out var(--kritzel-loading-overlay-delay, 300ms) forwards;
+  opacity: 0;
+}
+
+.workspace-loading-spinner {
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  display: block;
+  flex-shrink: 0;
+  border: 2px solid var(--kritzel-loading-overlay-spinner-color, #cccccc);
+  border-top-color: var(--kritzel-loading-overlay-spinner-active-color, #333333);
+  border-radius: 50%;
+  animation: workspace-loading-spin 0.6s linear infinite;
+}
+
+@keyframes workspace-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes workspace-loading-fade-in {
+  to {
+    opacity: 1;
+  }
+}
+
+.debug-panel {
+  position: absolute;
+  pointer-events: none;
+  top: 0;
+  right: 0;
+}
+
+.origin {
+  position: relative;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  pointer-events: none;
+  -webkit-transform-origin: top left;
+  -moz-transform-origin: top left;
+  transform-origin: top left;
+  overflow: visible;
+}
+
+.object {
+  overflow: visible;
+}
+
+.PlaygroundEditorTheme__quote {
+  margin: 0;
+  margin-left: 20px;
+  margin-bottom: 10px;
+  font-size: 15px;
+  color: rgb(101, 103, 107);
+  border-left-color: rgb(206, 208, 212);
+  border-left-width: 4px;
+  border-left-style: solid;
+  padding-left: 16px;
 }

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

@@ -3155,7 +3155,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."
@@ -3164,7 +3164,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```"
                         }]
                 }
             },
@@ -3493,7 +3493,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."
@@ -3517,7 +3517,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)."
@@ -3621,7 +3621,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."
@@ -3872,7 +3872,7 @@ export class KritzelEngine {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "Generates an SVG string from the currently selected objects.\r\nCreates clean, standards-compliant SVG markup by directly serializing object properties.",
+                    "text": "Generates an SVG string from the currently selected objects.\nCreates clean, standards-compliant SVG markup by directly serializing object properties.",
                     "tags": [{
                             "name": "param",
                             "text": "options - Optional export settings (theme, padding)."
@@ -3899,7 +3899,7 @@ export class KritzelEngine {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Exports the currently selected objects as an SVG file and triggers a browser download.\r\nCreates clean, standards-compliant SVG markup suitable for import into vector editors.",
+                    "text": "Exports the currently selected objects as an SVG file and triggers a browser download.\nCreates clean, standards-compliant SVG markup suitable for import into vector editors.",
                     "tags": [{
                             "name": "param",
                             "text": "options - Optional export settings (theme, padding)."
@@ -3923,7 +3923,7 @@ export class KritzelEngine {
                     "return": "Promise<string>"
                 },
                 "docs": {
-                    "text": "Generates a PNG data URL from the currently selected objects.\r\nConverts the SVG representation to a rasterized PNG image.",
+                    "text": "Generates a PNG data URL from the currently selected objects.\nConverts the SVG representation to a rasterized PNG image.",
                     "tags": [{
                             "name": "param",
                             "text": "options - Optional export settings (theme, padding, scale for resolution)."
@@ -3970,7 +3970,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."
@@ -4000,7 +4000,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)."
@@ -4033,7 +4033,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)."
@@ -4093,7 +4093,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."
@@ -4276,7 +4276,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"
@@ -4296,7 +4296,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": []
                 }
             }

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: '67c0c1f944b9c835d1685d2b743114a1b5a1f061', style: containerStyles, class: {
+        return (h(Host, { key: '2067605684a743be45059efd562697ff21fefbcb', style: containerStyles, class: {
                 'has-image': !!showImage,
                 'has-initials': !!showInitials,
                 'has-default': !!showDefaultIcon,
-            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'd71ccd7449a27133bcf8cc01f3cd654cc9b00142', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: '1ed322318335deb011087494a2c437849b5a23a0', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
                 if (el) {
                     el.referrerPolicy = 'no-referrer';
                     el.crossOrigin = 'anonymous';
                 }
-            }, onError: this.handleImageError })), showInitials && (h("span", { key: '818ad4a24d6489565dffc8c64b3d4e76b701444c', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '87af93fd968f3bf5b1f86295de6bd4b71c94120c', class: "avatar-default" }, h("svg", { key: '3267317fe99fb8d90432e207516bb48f603c08ed', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '9e4e225f9a058a24f63b508f36969c8c429fccd6', 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: 'ff99dded4cb17d6c25880b54e3875c262dfc0440', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '5a217c6a1366dea3ceee8bfa03a38917cad7a9f9', class: "avatar-default" }, h("svg", { key: 'f4537e21772e6e6f1bb60835ad7a56123a200dd7', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '29649695038a506e1caeba3a8b6c066860fb5a1d', 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);
 }

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

@@ -14,7 +14,7 @@ export class KritzelBrushStyle {
             value: option.value,
             label: option.label,
         }));
-        return (h(Host, { key: '66ecc7850e816be6f0c38e2a53d96493e8141a7c' }, h("kritzel-dropdown", { key: '792caa0c4ff4c8ee3c5dfd404ba5456e6a4c16e4', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: '7c82f747c86846c19635be47c797371300855f5e', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: '59d4863c0660d0c6281031321e11518c57d8ae71', name: this.type, size: 16 })))));
+        return (h(Host, { key: '126d6ebbd4b90eef936ccb90905da373a5f9b3ac' }, h("kritzel-dropdown", { key: '22e8e49b74c43b410384e247d4b0c779b1ee7b2e', options: dropdownOptions, value: this.type, onValueChanged: event => this.handleDropdownValueChange(event) }, h("button", { key: '0b00fc066db7a2afb5ab101bc20badbb8c065d4a', class: "brush-style-button", slot: "prefix" }, h("kritzel-icon", { key: 'ed074981009c37c86a22cbc70656663060c22553', name: this.type, size: 16 })))));
     }
     static get is() { return "kritzel-brush-style"; }
     static get encapsulation() { return "shadow"; }
@@ -59,7 +59,7 @@ export class KritzelBrushStyle {
                     "references": {
                         "BrushStyleOption": {
                             "location": "local",
-                            "path": "C:/Projects/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-brush-style/kritzel-brush-style.tsx",
+                            "path": "/home/runner/work/kritzel/kritzel/libs/kritzel-stencil/src/components/shared/kritzel-brush-style/kritzel-brush-style.tsx",
                             "id": "src/components/shared/kritzel-brush-style/kritzel-brush-style.tsx::BrushStyleOption"
                         }
                     }
@@ -72,7 +72,7 @@ export class KritzelBrushStyle {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { value: 'pen', label: 'Pen' },\r\n    { value: 'highlighter', label: 'Highlighter' },\r\n  ]"
+                "defaultValue": "[\n    { value: 'pen', label: 'Pen' },\n    { value: 'highlighter', label: 'Highlighter' },\n  ]"
             }
         };
     }