kritzel-stencil 0.4.4 → 0.4.6

package/dist/components/p-D3y_Hauo.js

@@ -1 +1,85 @@
-import{p as t,H as e,c as r,h as o,d as i,t as s}from"./p-B43upypT.js";import{d as a}from"./p-D5jf8wAu.js";import{d as l}from"./p-DEBwmRTC.js";import{d as c}from"./p-DX2nriaq.js";const n=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.logoutRequest=r(this,"logoutRequest")}get host(){return this}user;terms={};isDialogOpen=!1;logoutRequest;async open(){this.isDialogOpen=!0}async close(){this.isDialogOpen=!1}closeDialog=()=>{this.isDialogOpen=!1};handleLogout=()=>{this.logoutRequest.emit(),this.closeDialog()};getDisplayName(){if(this.user)return this.user.displayName??([this.user.firstName,this.user.lastName].filter(Boolean).join(" ")||void 0)}render(){const t=this.getDisplayName();return o(i,{key:"46fa9107dd133e2896a80bf337874b69943156c6"},o("kritzel-dialog",{key:"9270ec727f41b73fb37eaec2ee601689d3c26292",dialogTitle:this.terms["currentUser.dialogTitle"]??"Account",isOpen:this.isDialogOpen,onDialogClose:this.closeDialog,size:"small",contained:!0},o("div",{key:"3c877db40a63bef3624f252ab39842cbc0b9bdc8",class:"user-info"},o("kritzel-avatar",{key:"821130a92f385de1fa4e796b99830c4c3b317c15",user:this.user,size:80}),t&&o("div",{key:"e9c44284d50c97aed00523541360dbbaf6e37566",class:"user-name"},t),this.user?.email&&o("div",{key:"46f24e37629e6bd1c1dd5c52cfd7281c1d2e2308",class:"user-email"},this.user.email),o("kritzel-button",{key:"929483c1bb270eb8dcf8e9d9e0d087b8476cd23f",class:"logout-button",variant:"primary",onButtonClick:this.handleLogout},this.terms["menu.logout"]??"Logout"))))}static get style(){return":host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.user-info{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0}.user-name{font-size:18px;font-weight:600;color:var(--kritzel-current-user-dialog-name-color, #333333);text-align:center;margin-top:8px}.user-email{font-size:14px;color:var(--kritzel-current-user-dialog-email-color, #666666);text-align:center}.logout-button{margin-top:16px;width:100%;--kritzel-button-width:100%;--kritzel-button-primary-background-color:var(--kritzel-current-user-dialog-logout-button-background-color, #007AFF);--kritzel-button-primary-hover-background-color:var(--kritzel-current-user-dialog-logout-button-hover-background-color, #006ae6);--kritzel-button-primary-active-background-color:var(--kritzel-current-user-dialog-logout-button-active-background-color, #005bbf);--kritzel-button-primary-color:var(--kritzel-current-user-dialog-logout-button-color, #ffffff)}"}},[513,"kritzel-current-user-dialog",{user:[16],terms:[16],isDialogOpen:[32],open:[64],close:[64]}]);function u(){"undefined"!=typeof customElements&&["kritzel-current-user-dialog","kritzel-avatar","kritzel-button","kritzel-dialog"].forEach((t=>{switch(t){case"kritzel-current-user-dialog":customElements.get(s(t))||customElements.define(s(t),n);break;case"kritzel-avatar":customElements.get(s(t))||a();break;case"kritzel-button":customElements.get(s(t))||l();break;case"kritzel-dialog":customElements.get(s(t))||c()}}))}export{n as K,u as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$3 } from './p-D5jf8wAu.js';
+import { d as defineCustomElement$2 } from './p-DEBwmRTC.js';
+import { d as defineCustomElement$1 } from './p-DX2nriaq.js';
+
+const kritzelCurrentUserDialogCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-width-small:380px}.user-info{display:flex;flex-direction:column;align-items:center;gap:8px;padding:8px 0}.user-name{font-size:18px;font-weight:600;color:var(--kritzel-current-user-dialog-name-color, #333333);text-align:center;margin-top:8px}.user-email{font-size:14px;color:var(--kritzel-current-user-dialog-email-color, #666666);text-align:center}.logout-button{margin-top:16px;width:100%;--kritzel-button-width:100%;--kritzel-button-primary-background-color:var(--kritzel-current-user-dialog-logout-button-background-color, #007AFF);--kritzel-button-primary-hover-background-color:var(--kritzel-current-user-dialog-logout-button-hover-background-color, #006ae6);--kritzel-button-primary-active-background-color:var(--kritzel-current-user-dialog-logout-button-active-background-color, #005bbf);--kritzel-button-primary-color:var(--kritzel-current-user-dialog-logout-button-color, #ffffff)}`;
+
+const KritzelCurrentUserDialog = /*@__PURE__*/ proxyCustomElement(class KritzelCurrentUserDialog extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.logoutRequest = createEvent(this, "logoutRequest");
+    }
+    get host() { return this; }
+    user;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    isDialogOpen = false;
+    /** Emitted when the user clicks the logout action. */
+    logoutRequest;
+    async open() {
+        this.isDialogOpen = true;
+    }
+    async close() {
+        this.isDialogOpen = false;
+    }
+    closeDialog = () => {
+        this.isDialogOpen = false;
+    };
+    handleLogout = () => {
+        this.logoutRequest.emit();
+        this.closeDialog();
+    };
+    getDisplayName() {
+        if (!this.user)
+            return undefined;
+        return (this.user.displayName ??
+            ([this.user.firstName, this.user.lastName].filter(Boolean).join(' ') ||
+                undefined));
+    }
+    render() {
+        const displayName = this.getDisplayName();
+        return (h(Host, { key: '46fa9107dd133e2896a80bf337874b69943156c6' }, h("kritzel-dialog", { key: '9270ec727f41b73fb37eaec2ee601689d3c26292', dialogTitle: this.terms['currentUser.dialogTitle'] ?? 'Account', isOpen: this.isDialogOpen, onDialogClose: this.closeDialog, size: "small", contained: true }, h("div", { key: '3c877db40a63bef3624f252ab39842cbc0b9bdc8', class: "user-info" }, h("kritzel-avatar", { key: '821130a92f385de1fa4e796b99830c4c3b317c15', user: this.user, size: 80 }), displayName && h("div", { key: 'e9c44284d50c97aed00523541360dbbaf6e37566', class: "user-name" }, displayName), this.user?.email && h("div", { key: '46f24e37629e6bd1c1dd5c52cfd7281c1d2e2308', class: "user-email" }, this.user.email), h("kritzel-button", { key: '929483c1bb270eb8dcf8e9d9e0d087b8476cd23f', class: "logout-button", variant: "primary", onButtonClick: this.handleLogout }, this.terms['menu.logout'] ?? 'Logout')))));
+    }
+    static get style() { return kritzelCurrentUserDialogCss(); }
+}, [513, "kritzel-current-user-dialog", {
+        "user": [16],
+        "terms": [16],
+        "isDialogOpen": [32],
+        "open": [64],
+        "close": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-current-user-dialog", "kritzel-avatar", "kritzel-button", "kritzel-dialog"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-current-user-dialog":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelCurrentUserDialog);
+            }
+            break;
+        case "kritzel-avatar":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-dialog":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelCurrentUserDialog as K, defineCustomElement as d };

package/dist/components/p-D5jf8wAu.js

@@ -1 +1,142 @@
-import{p as e,H as t,h as a,d as r,t as i}from"./p-B43upypT.js";const s=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}user;name;size=32;color;imageError=!1;retryCount=0;maxRetries=3;retryTimer;userChanged(){this.resetImageState()}profileImageUrlChanged(){this.resetImageState()}resetImageState(){this.imageError=!1,this.retryCount=0,clearTimeout(this.retryTimer)}disconnectedCallback(){clearTimeout(this.retryTimer)}getImageUrl(){return this.user?.profileImageUrl}getDisplayName(){return this.user?this.user.displayName??([this.user.firstName,this.user.lastName].filter(Boolean).join(" ")||this.user.email):this.name}getInitials(){const e=this.getDisplayName();if(!e)return;const t=e.trim().split(/\s+/);return t.length>=2?(t[0][0]+t[t.length-1][0]).toUpperCase():t[0][0]?.toUpperCase()}getBackgroundColor(){return this.user?.color??this.color??this.generateColorFromName()}generateColorFromName(){const e=this.getDisplayName()||"";let t=0;for(let a=0;a<e.length;a++)t=e.charCodeAt(a)+((t<<5)-t);return`hsl(${Math.abs(t%360)}, 45%, 55%)`}handleImageError=()=>{if(this.retryCount<this.maxRetries){this.retryCount++;const e=1e3*Math.pow(2,this.retryCount-1);this.retryTimer=setTimeout((()=>{this.imageError=!1}),e)}this.imageError=!0};render(){const e=this.getImageUrl(),t=this.getInitials(),i=e&&!this.imageError,s=!i&&t,o=!i&&!s,l={width:`${this.size}px`,height:`${this.size}px`,fontSize:`${Math.round(.4*this.size)}px`};return a(r,{key:"a25cae3d0597e53606a00855e3175c89ff90d58e",style:l,class:{"has-image":!!i,"has-initials":!!s,"has-default":!!o},role:"img","aria-label":this.getDisplayName()||"User avatar"},i&&a("img",{key:"c3288f0ba9e0d8876403244fe3942dd91e685a79",src:e,alt:"",class:"avatar-image",ref:e=>{e&&(e.referrerPolicy="no-referrer",e.crossOrigin="anonymous")},onError:this.handleImageError}),s&&a("span",{key:"ae0ca459b87e90a1f67abe747b75d8dd61247ead",class:"avatar-initials",style:{backgroundColor:this.getBackgroundColor()}},t),o&&a("span",{key:"2a60a0347ae21732828920339f53803330c9c6c6",class:"avatar-default"},a("svg",{key:"ee057dc02ae61206164775b35ad1408fe04dfed9",viewBox:"0 0 24 24",fill:"currentColor"},a("path",{key:"2190046ba2e2c659d47f8a7f4a12bb10ae626f07",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 watchers(){return{user:[{userChanged:0}],profileImageUrl:[{profileImageUrlChanged:0}]}}static get style(){return":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)}"}},[513,"kritzel-avatar",{user:[16],name:[1],size:[2],color:[1],imageError:[32]},void 0,{user:[{userChanged:0}],profileImageUrl:[{profileImageUrlChanged:0}]}]);function o(){"undefined"!=typeof customElements&&["kritzel-avatar"].forEach((e=>{"kritzel-avatar"===e&&(customElements.get(i(e))||customElements.define(i(e),s))}))}export{s as K,o as d}
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelAvatarCss = () => `: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)}`;
+
+const KritzelAvatar = /*@__PURE__*/ proxyCustomElement(class KritzelAvatar extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /** Full user object. If provided, individual props are ignored. */
+    user;
+    /** Direct prop: user's display name (used for initials fallback) */
+    name;
+    /** Avatar diameter in pixels */
+    size = 32;
+    /** Background color for initials fallback */
+    color;
+    /** Tracks whether the image failed to load */
+    imageError = false;
+    retryCount = 0;
+    maxRetries = 3;
+    retryTimer;
+    userChanged() {
+        this.resetImageState();
+    }
+    profileImageUrlChanged() {
+        this.resetImageState();
+    }
+    resetImageState() {
+        this.imageError = false;
+        this.retryCount = 0;
+        clearTimeout(this.retryTimer);
+    }
+    disconnectedCallback() {
+        clearTimeout(this.retryTimer);
+    }
+    getImageUrl() {
+        return this.user?.profileImageUrl;
+    }
+    getDisplayName() {
+        if (this.user) {
+            return (this.user.displayName ??
+                ([this.user.firstName, this.user.lastName].filter(Boolean).join(' ') ||
+                    this.user.email));
+        }
+        return this.name;
+    }
+    getInitials() {
+        const displayName = this.getDisplayName();
+        if (!displayName)
+            return undefined;
+        const parts = displayName.trim().split(/\s+/);
+        if (parts.length >= 2) {
+            return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+        }
+        return parts[0][0]?.toUpperCase();
+    }
+    getBackgroundColor() {
+        return this.user?.color ?? this.color ?? this.generateColorFromName();
+    }
+    generateColorFromName() {
+        const name = this.getDisplayName() || '';
+        let hash = 0;
+        for (let i = 0; i < name.length; i++) {
+            hash = name.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        const hue = Math.abs(hash % 360);
+        return `hsl(${hue}, 45%, 55%)`;
+    }
+    handleImageError = () => {
+        if (this.retryCount < this.maxRetries) {
+            this.retryCount++;
+            const delay = 1000 * Math.pow(2, this.retryCount - 1);
+            this.retryTimer = setTimeout(() => {
+                this.imageError = false;
+            }, delay);
+        }
+        this.imageError = true;
+    };
+    render() {
+        const imageUrl = this.getImageUrl();
+        const initials = this.getInitials();
+        const showImage = imageUrl && !this.imageError;
+        const showInitials = !showImage && initials;
+        const showDefaultIcon = !showImage && !showInitials;
+        const containerStyles = {
+            width: `${this.size}px`,
+            height: `${this.size}px`,
+            fontSize: `${Math.round(this.size * 0.4)}px`,
+        };
+        return (h(Host, { key: 'a25cae3d0597e53606a00855e3175c89ff90d58e', style: containerStyles, class: {
+                'has-image': !!showImage,
+                'has-initials': !!showInitials,
+                'has-default': !!showDefaultIcon,
+            }, role: "img", "aria-label": this.getDisplayName() || 'User avatar' }, showImage && (h("img", { key: 'c3288f0ba9e0d8876403244fe3942dd91e685a79', src: imageUrl, alt: "", class: "avatar-image", ref: (el) => {
+                if (el) {
+                    el.referrerPolicy = 'no-referrer';
+                    el.crossOrigin = 'anonymous';
+                }
+            }, onError: this.handleImageError })), showInitials && (h("span", { key: 'ae0ca459b87e90a1f67abe747b75d8dd61247ead', class: "avatar-initials", style: { backgroundColor: this.getBackgroundColor() } }, initials)), showDefaultIcon && (h("span", { key: '2a60a0347ae21732828920339f53803330c9c6c6', class: "avatar-default" }, h("svg", { key: 'ee057dc02ae61206164775b35ad1408fe04dfed9', viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '2190046ba2e2c659d47f8a7f4a12bb10ae626f07', 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 watchers() { return {
+        "user": [{
+                "userChanged": 0
+            }],
+        "profileImageUrl": [{
+                "profileImageUrlChanged": 0
+            }]
+    }; }
+    static get style() { return kritzelAvatarCss(); }
+}, [513, "kritzel-avatar", {
+        "user": [16],
+        "name": [1],
+        "size": [2],
+        "color": [1],
+        "imageError": [32]
+    }, undefined, {
+        "user": [{
+                "userChanged": 0
+            }],
+        "profileImageUrl": [{
+                "profileImageUrlChanged": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-avatar":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelAvatar);
+            }
+            break;
+    } });
+}
+
+export { KritzelAvatar as K, defineCustomElement as d };

package/dist/components/p-D82VaHce.js

@@ -1 +1,53 @@
-import{p as e,H as s,c as t,h as r,d as i,t as o}from"./p-B43upypT.js";import{d as l}from"./p-CqLgB8JK.js";const a=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.sizeChange=t(this,"sizeChange")}sizes=[4,6,8,12,16,24];selectedSize=null;sizeChange;handleSizeClick(e){this.selectedSize=e,this.sizeChange.emit(e)}render(){return r(i,{key:"a097daf527501b07874b449ac75ecb765cdd81b2"},r("div",{key:"0e2b3ade9bae7d4f97d5de8ecd44424fe914f3e7",class:"size-grid"},(this.sizes??[]).map((e=>r("div",{tabIndex:0,class:{"size-container":!0,selected:this.selectedSize===e},onClick:()=>this.handleSizeClick(e)},r("kritzel-color",{value:"var(--kritzel-global-text-primary)",size:e}))))))}static get style(){return":host{display:flex;align-items:flex-start;gap:0;padding:0;width:100%;box-sizing:border-box}.size-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill, 32px);gap:8px;justify-items:center}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}"}},[513,"kritzel-stroke-size",{sizes:[16],selectedSize:[1026,"selected-size"]}]);function c(){"undefined"!=typeof customElements&&["kritzel-stroke-size","kritzel-color"].forEach((e=>{switch(e){case"kritzel-stroke-size":customElements.get(o(e))||customElements.define(o(e),a);break;case"kritzel-color":customElements.get(o(e))||l()}}))}export{a as K,c as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$1 } from './p-CqLgB8JK.js';
+
+const kritzelStrokeSizeCss = () => `:host{display:flex;align-items:flex-start;gap:0;padding:0;width:100%;box-sizing:border-box}.size-grid{width:100%;display:grid;grid-template-columns:repeat(auto-fill, 32px);gap:8px;justify-items:center}.size-container{display:flex;justify-content:center;align-items:center;width:32px;height:32px;border-radius:50%;cursor:var(--kritzel-global-pointer-cursor, pointer);border:2px solid transparent;box-sizing:border-box}.size-container:hover{background-color:var(--kritzel-stroke-size-hover-background-color, #ebebeb)}.size-container.selected{border-color:var(--kritzel-selection-border-color, #007AFF);background-color:var(--kritzel-stroke-size-selected-background-color, #ebebeb)}`;
+
+const KritzelStrokeSize = /*@__PURE__*/ proxyCustomElement(class KritzelStrokeSize extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.sizeChange = createEvent(this, "sizeChange");
+    }
+    sizes = [4, 6, 8, 12, 16, 24];
+    selectedSize = null;
+    sizeChange;
+    handleSizeClick(size) {
+        this.selectedSize = size;
+        this.sizeChange.emit(size);
+    }
+    render() {
+        const sizes = this.sizes ?? [];
+        return (h(Host, { key: 'a097daf527501b07874b449ac75ecb765cdd81b2' }, h("div", { key: '0e2b3ade9bae7d4f97d5de8ecd44424fe914f3e7', class: "size-grid" }, sizes.map(size => (h("div", { tabIndex: 0, class: {
+                'size-container': true,
+                'selected': this.selectedSize === size,
+            }, onClick: () => this.handleSizeClick(size) }, h("kritzel-color", { value: 'var(--kritzel-global-text-primary)', size: size })))))));
+    }
+    static get style() { return kritzelStrokeSizeCss(); }
+}, [513, "kritzel-stroke-size", {
+        "sizes": [16],
+        "selectedSize": [1026, "selected-size"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-stroke-size", "kritzel-color"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-stroke-size":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelStrokeSize);
+            }
+            break;
+        case "kritzel-color":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelStrokeSize as K, defineCustomElement as d };

package/dist/components/p-DAwPPDMS.js

@@ -1 +1,101 @@
-const t="1.3.0";class e{__class__="KritzelWorkspace";id;name;createdAt;updatedAt;viewport;isPublic;_core;constructor(t,e,s={centerWorldX:0,centerWorldY:0,scale:1}){this.id=t,this.name=e,this.createdAt=new Date,this.updatedAt=new Date,this.viewport=s,this.isPublic=!1}static create(t,s){const i=new e(s.id,s.name,s.viewport);return i._core=t,i}addObject(t){this._core.engine.addObject(t)}serialize(e){const s={__class__:this.__class__,version:t,id:this.id,name:this.name,createdAt:this.createdAt.toISOString(),updatedAt:this.updatedAt.toISOString(),viewport:this.viewport,isPublic:this.isPublic};return e?.includeObjects&&this._core&&(s.objects=this._core.store.allNonSelectionObjects.map((t=>t.serialize()))),s}clone(){return Object.assign(Object.create(Object.getPrototypeOf(this)),this)}deserialize(t){return Object.assign(this,t),this.createdAt=new Date(t.createdAt),this.updatedAt=new Date(t.updatedAt),this}}export{e as K,t as W}
+/** Current version of the workspace export format */
+const WORKSPACE_EXPORT_VERSION = '1.3.0';
+/**
+ * Represents a workspace in the Kritzel canvas.
+ * A workspace is an isolated canvas area with its own set of objects and viewport state.
+ * It can be serialized and deserialized for persistence and collaborative editing.
+ */
+class KritzelWorkspace {
+    __class__ = 'KritzelWorkspace';
+    /** Unique identifier for the workspace */
+    id;
+    /** Display name of the workspace */
+    name;
+    /** Timestamp when the workspace was created */
+    createdAt;
+    /** Timestamp when the workspace was last updated */
+    updatedAt;
+    /** Viewport state containing the world-space center point and zoom level */
+    viewport;
+    /** Whether the workspace is publicly accessible via a share link */
+    isPublic;
+    /** Reference to the KritzelCore instance managing this workspace */
+    _core;
+    /**
+     * Creates a new KritzelWorkspace instance.
+     * @param id - Unique identifier for the workspace
+     * @param name - Display name of the workspace
+     * @param viewport - Initial viewport state with centerWorldX, centerWorldY, and scale values
+     */
+    constructor(id, name, viewport = { centerWorldX: 0, centerWorldY: 0, scale: 1 }) {
+        this.id = id;
+        this.name = name;
+        this.createdAt = new Date();
+        this.updatedAt = new Date();
+        this.viewport = viewport;
+        this.isPublic = false;
+    }
+    /**
+     * Factory method to create a workspace with a core reference.
+     * @param core - The KritzelCore instance to associate with this workspace
+     * @param obj - Object containing workspace properties (id, name, viewport)
+     * @returns A new KritzelWorkspace instance with the core reference set
+     */
+    static create(core, obj) {
+        const workspace = new KritzelWorkspace(obj.id, obj.name, obj.viewport);
+        workspace._core = core;
+        return workspace;
+    }
+    /**
+     * Adds an object to this workspace via the core engine.
+     * @param obj - The object to add to the workspace
+     */
+    addObject(obj) {
+        this._core.engine.addObject(obj);
+    }
+    /**
+     * Serializes the workspace to a plain object for storage or transmission.
+     * Converts dates to ISO strings and includes the class identifier.
+     * @param options - Optional settings for serialization
+     * @param options.includeObjects - If true, includes all canvas objects in the serialized output
+     * @returns A plain object representation of the workspace
+     */
+    serialize(options) {
+        const serialized = {
+            __class__: this.__class__,
+            version: WORKSPACE_EXPORT_VERSION,
+            id: this.id,
+            name: this.name,
+            createdAt: this.createdAt.toISOString(),
+            updatedAt: this.updatedAt.toISOString(),
+            viewport: this.viewport,
+            isPublic: this.isPublic,
+        };
+        if (options?.includeObjects && this._core) {
+            const allObjects = this._core.store.allNonSelectionObjects;
+            serialized.objects = allObjects.map(obj => obj.serialize());
+        }
+        return serialized;
+    }
+    /**
+     * Creates a shallow clone of this workspace, preserving the prototype chain.
+     * Useful when Stencil needs a new object reference to detect property changes.
+     */
+    clone() {
+        return Object.assign(Object.create(Object.getPrototypeOf(this)), this);
+    }
+    /**
+     * Deserializes a plain object into this workspace instance.
+     * Converts ISO string dates back to Date objects.
+     * @param object - The plain object to deserialize from
+     * @returns This workspace instance with updated properties
+     */
+    deserialize(object) {
+        Object.assign(this, object);
+        this.createdAt = new Date(object.createdAt);
+        this.updatedAt = new Date(object.updatedAt);
+        return this;
+    }
+}
+
+export { KritzelWorkspace as K, WORKSPACE_EXPORT_VERSION as W };

package/dist/components/p-DEBwmRTC.js

@@ -1 +1,55 @@
-import{p as t,H as o,c as r,h as e,d as n,t as a}from"./p-B43upypT.js";const i=t(class extends o{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.buttonClick=r(this,"buttonClick")}variant="primary";disabled=!1;type="button";buttonClick;handleClick=t=>{this.disabled||(t.stopPropagation(),this.buttonClick.emit())};render(){return e(n,{key:"ee7da1d8d86cdd6f920d15642203265cc93cda4e"},e("button",{key:"15b1f11be5157c70ef5a4b3cd917bacb8f90ee4a",type:this.type,class:{"kritzel-button":!0,[this.variant]:!0,disabled:this.disabled},disabled:this.disabled,onClick:this.handleClick},e("slot",{key:"8500172bd4540f4fa9c5e629d1ceb1816dcf556a"})))}static get style(){return":host{display:inline-block;font-family:sans-serif}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:inline-flex;width:var(--kritzel-button-width, auto);align-items:center;justify-content:center;gap:6px;border-radius:var(--kritzel-button-border-radius, 8px);padding:var(--kritzel-button-padding, 12px 20px);font-size:var(--kritzel-button-font-size, 14px);font-weight:var(--kritzel-button-font-weight, 500);transition:background-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}button.primary{background-color:var(--kritzel-button-primary-background-color, #007AFF);color:var(--kritzel-button-primary-color, #ffffff)}button.primary:hover{background-color:var(--kritzel-button-primary-hover-background-color, #006ae6)}button.primary:active{background-color:var(--kritzel-button-primary-active-background-color, #005bbf)}button.secondary{background-color:var(--kritzel-button-secondary-background-color, #f0f0f0);color:var(--kritzel-button-secondary-color, #333333)}button.secondary:hover{background-color:var(--kritzel-button-secondary-hover-background-color, #e0e0e0)}button.secondary:active{background-color:var(--kritzel-button-secondary-active-background-color, #d0d0d0)}button.text{background-color:transparent;color:var(--kritzel-button-text-color, #007AFF)}button.text:hover{background-color:var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08))}button.text:active{background-color:var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15))}button.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}"}},[769,"kritzel-button",{variant:[1],disabled:[4],type:[1]}]);function c(){"undefined"!=typeof customElements&&["kritzel-button"].forEach((t=>{"kritzel-button"===t&&(customElements.get(a(t))||customElements.define(a(t),i))}))}export{i as K,c as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelButtonCss = () => `:host{display:inline-block;font-family:sans-serif}button{border:none;background-color:transparent;padding:0;margin:0;font-family:inherit;font-size:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:var(--kritzel-global-pointer-cursor, pointer);display:inline-flex;width:var(--kritzel-button-width, auto);align-items:center;justify-content:center;gap:6px;border-radius:var(--kritzel-button-border-radius, 8px);padding:var(--kritzel-button-padding, 12px 20px);font-size:var(--kritzel-button-font-size, 14px);font-weight:var(--kritzel-button-font-weight, 500);transition:background-color 0.15s ease, opacity 0.15s ease;-webkit-tap-highlight-color:transparent}button.primary{background-color:var(--kritzel-button-primary-background-color, #007AFF);color:var(--kritzel-button-primary-color, #ffffff)}button.primary:hover{background-color:var(--kritzel-button-primary-hover-background-color, #006ae6)}button.primary:active{background-color:var(--kritzel-button-primary-active-background-color, #005bbf)}button.secondary{background-color:var(--kritzel-button-secondary-background-color, #f0f0f0);color:var(--kritzel-button-secondary-color, #333333)}button.secondary:hover{background-color:var(--kritzel-button-secondary-hover-background-color, #e0e0e0)}button.secondary:active{background-color:var(--kritzel-button-secondary-active-background-color, #d0d0d0)}button.text{background-color:transparent;color:var(--kritzel-button-text-color, #007AFF)}button.text:hover{background-color:var(--kritzel-button-text-hover-background-color, rgba(0, 122, 255, 0.08))}button.text:active{background-color:var(--kritzel-button-text-active-background-color, rgba(0, 122, 255, 0.15))}button.disabled{opacity:0.4;cursor:not-allowed;pointer-events:none}`;
+
+const KritzelButton = /*@__PURE__*/ proxyCustomElement(class KritzelButton extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.buttonClick = createEvent(this, "buttonClick");
+    }
+    /** The visual variant of the button */
+    variant = 'primary';
+    /** Whether the button is disabled */
+    disabled = false;
+    /** The type attribute for the native button element */
+    type = 'button';
+    /** Emitted when the button is clicked */
+    buttonClick;
+    handleClick = (event) => {
+        if (this.disabled)
+            return;
+        event.stopPropagation();
+        this.buttonClick.emit();
+    };
+    render() {
+        return (h(Host, { key: 'ee7da1d8d86cdd6f920d15642203265cc93cda4e' }, h("button", { key: '15b1f11be5157c70ef5a4b3cd917bacb8f90ee4a', type: this.type, class: {
+                'kritzel-button': true,
+                [this.variant]: true,
+                'disabled': this.disabled,
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '8500172bd4540f4fa9c5e629d1ceb1816dcf556a' }))));
+    }
+    static get style() { return kritzelButtonCss(); }
+}, [769, "kritzel-button", {
+        "variant": [1],
+        "disabled": [4],
+        "type": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-button":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelButton);
+            }
+            break;
+    } });
+}
+
+export { KritzelButton as K, defineCustomElement as d };

package/dist/components/p-DIazmg6w.js

@@ -1 +1,52 @@
-import{p as e,H as t,h as r,d as s,t as a}from"./p-B43upypT.js";import{d as i}from"./p-D5jf8wAu.js";const n=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}user;avatarSize=40;terms={};render(){return r(s,{key:"606ff4d621467d24c30d06a2cf9191a883497f1b"},r("kritzel-avatar",{key:"a215f36bcfa55e2d649e79ef2e4ae4503ebb325d",user:this.user,size:this.avatarSize}))}static get style(){return":host{display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}kritzel-avatar{cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}"}},[513,"kritzel-current-user",{user:[16],avatarSize:[2,"avatar-size"],terms:[16]}]);function c(){"undefined"!=typeof customElements&&["kritzel-current-user","kritzel-avatar"].forEach((e=>{switch(e){case"kritzel-current-user":customElements.get(a(e))||customElements.define(a(e),n);break;case"kritzel-avatar":customElements.get(a(e))||i()}}))}export{n as K,c as d}
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { d as defineCustomElement$1 } from './p-D5jf8wAu.js';
+
+const kritzelCurrentUserCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent}kritzel-avatar{cursor:var(--kritzel-global-pointer-cursor, pointer);border-radius:50%}`;
+
+const KritzelCurrentUser = /*@__PURE__*/ proxyCustomElement(class KritzelCurrentUser extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * The current user to display
+     */
+    user;
+    /**
+     * Avatar size in pixels
+     */
+    avatarSize = 40;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    render() {
+        return (h(Host, { key: '606ff4d621467d24c30d06a2cf9191a883497f1b' }, h("kritzel-avatar", { key: 'a215f36bcfa55e2d649e79ef2e4ae4503ebb325d', user: this.user, size: this.avatarSize })));
+    }
+    static get style() { return kritzelCurrentUserCss(); }
+}, [513, "kritzel-current-user", {
+        "user": [16],
+        "avatarSize": [2, "avatar-size"],
+        "terms": [16]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-current-user", "kritzel-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-current-user":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelCurrentUser);
+            }
+            break;
+        case "kritzel-avatar":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelCurrentUser as K, defineCustomElement as d };

package/dist/components/p-DJ88BrIW.js

@@ -1 +1,70 @@
-import{p as a,t,H as e,h as r,d as s}from"./p-B43upypT.js";import{d as i}from"./p-D5jf8wAu.js";const o=a(class extends e{constructor(a){super(),!1!==a&&this.__registerHost(),this.__attachShadow()}users=[];avatarSize=40;maxVisible=3;overlap=20;getDisplayName(a){return a.displayName??([a.firstName,a.lastName].filter(Boolean).join(" ")||a.email||"User")}render(){if(!this.users||0===this.users.length)return r(s,{style:{display:"none"}});const a=this.users.slice(0,this.maxVisible),t=this.users.length-this.maxVisible;return r(s,{style:{"--avatar-overlap":`-${this.overlap}px`}},r("div",{class:"avatars"},a.map(((t,e)=>r("div",{class:"avatar-wrapper",style:{marginLeft:e>0?"var(--avatar-overlap)":"0px",zIndex:""+(a.length-e)}},r("kritzel-avatar",{user:t,size:this.avatarSize}),r("span",{class:"avatar-tooltip"},this.getDisplayName(t)))))),t>0&&r("span",{class:"overflow-count"},"+",t,r("span",{class:"avatar-tooltip"},this.users.slice(this.maxVisible).map((a=>r("div",null,this.getDisplayName(a)))))))}static get style(){return":host{display:inline-flex;align-items:center}.avatars{display:flex;align-items:center}.avatar-wrapper{position:relative;transition:margin-left 200ms ease}.avatar-wrapper kritzel-avatar{border-radius:50%;box-shadow:0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff)}.avatars:hover .avatar-wrapper{margin-left:-6px !important}.avatar-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;padding:4px 8px;background-color:var(--kritzel-active-users-tooltip-background, #333333);color:var(--kritzel-active-users-tooltip-color, #ffffff);font-family:sans-serif;font-size:12px;font-weight:500;border-radius:4px;white-space:nowrap;width:max-content;pointer-events:none;opacity:0;transition:opacity 150ms ease}.avatar-wrapper:hover .avatar-tooltip,.overflow-count:hover .avatar-tooltip{opacity:1}.overflow-count{position:relative;margin-left:8px;font-family:sans-serif;font-size:var(--kritzel-active-users-overflow-font-size, 14px);font-weight:500;color:var(--kritzel-active-users-overflow-color, #666666);white-space:nowrap;cursor:default}.overflow-count .avatar-tooltip{white-space:nowrap;text-align:left;margin-top:20px}"}},[513,"kritzel-active-users",{users:[16],avatarSize:[2,"avatar-size"],maxVisible:[2,"max-visible"],overlap:[2]}]);function l(){"undefined"!=typeof customElements&&["kritzel-active-users","kritzel-avatar"].forEach((a=>{switch(a){case"kritzel-active-users":customElements.get(t(a))||customElements.define(t(a),o);break;case"kritzel-avatar":customElements.get(t(a))||i()}}))}export{o as K,l as d}
+import { p as proxyCustomElement, t as transformTag, H, h, d as Host } from './p-B43upypT.js';
+import { d as defineCustomElement$1 } from './p-D5jf8wAu.js';
+
+const kritzelActiveUsersCss = () => `:host{display:inline-flex;align-items:center}.avatars{display:flex;align-items:center}.avatar-wrapper{position:relative;transition:margin-left 200ms ease}.avatar-wrapper kritzel-avatar{border-radius:50%;box-shadow:0 0 0 2px var(--kritzel-active-users-avatar-border-color, #ffffff)}.avatars:hover .avatar-wrapper{margin-left:-6px !important}.avatar-tooltip{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:12px;padding:4px 8px;background-color:var(--kritzel-active-users-tooltip-background, #333333);color:var(--kritzel-active-users-tooltip-color, #ffffff);font-family:sans-serif;font-size:12px;font-weight:500;border-radius:4px;white-space:nowrap;width:max-content;pointer-events:none;opacity:0;transition:opacity 150ms ease}.avatar-wrapper:hover .avatar-tooltip,.overflow-count:hover .avatar-tooltip{opacity:1}.overflow-count{position:relative;margin-left:8px;font-family:sans-serif;font-size:var(--kritzel-active-users-overflow-font-size, 14px);font-weight:500;color:var(--kritzel-active-users-overflow-color, #666666);white-space:nowrap;cursor:default}.overflow-count .avatar-tooltip{white-space:nowrap;text-align:left;margin-top:20px}`;
+
+const KritzelActiveUsers = /*@__PURE__*/ proxyCustomElement(class KritzelActiveUsers extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /**
+     * Array of active users to display
+     */
+    users = [];
+    /**
+     * Avatar size in pixels
+     */
+    avatarSize = 40;
+    /**
+     * Maximum number of avatars to show before overflow text
+     */
+    maxVisible = 3;
+    /**
+     * Overlap offset in pixels (negative margin between avatars)
+     */
+    overlap = 20;
+    getDisplayName(user) {
+        return (user.displayName ??
+            ([user.firstName, user.lastName].filter(Boolean).join(' ') ||
+                user.email ||
+                'User'));
+    }
+    render() {
+        if (!this.users || this.users.length === 0) {
+            return h(Host, { style: { display: 'none' } });
+        }
+        const visibleUsers = this.users.slice(0, this.maxVisible);
+        const overflowCount = this.users.length - this.maxVisible;
+        return (h(Host, { style: { '--avatar-overlap': `-${this.overlap}px` } }, h("div", { class: "avatars" }, visibleUsers.map((user, index) => (h("div", { class: "avatar-wrapper", style: { marginLeft: index > 0 ? `var(--avatar-overlap)` : '0px', zIndex: `${visibleUsers.length - index}` } }, h("kritzel-avatar", { user: user, size: this.avatarSize }), h("span", { class: "avatar-tooltip" }, this.getDisplayName(user)))))), overflowCount > 0 && (h("span", { class: "overflow-count" }, "+", overflowCount, h("span", { class: "avatar-tooltip" }, this.users.slice(this.maxVisible).map(user => (h("div", null, this.getDisplayName(user)))))))));
+    }
+    static get style() { return kritzelActiveUsersCss(); }
+}, [513, "kritzel-active-users", {
+        "users": [16],
+        "avatarSize": [2, "avatar-size"],
+        "maxVisible": [2, "max-visible"],
+        "overlap": [2]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-active-users", "kritzel-avatar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-active-users":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelActiveUsers);
+            }
+            break;
+        case "kritzel-avatar":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelActiveUsers as K, defineCustomElement as d };