kritzel-stencil 0.4.4 → 0.4.6

package/dist/components/p-C38P-Vd0.js

@@ -1 +1,446 @@
-import{p as e,H as t,c as s,h as i,d as o,t as r}from"./p-B43upypT.js";import{a as n}from"./p-BmyTdQGy.js";import{r as l,K as a}from"./p-DJkKlUyZ.js";import{d as h}from"./p-CqLgB8JK.js";import{d as p}from"./p-Cymum41a.js";import{d as c}from"./p-Df3BwVGy.js";import{d}from"./p-B8Xi4Clg.js";import{d as m}from"./p-djJSnjAX.js";import{d as f}from"./p-BI2ng9I_.js";import{d as u}from"./p-CdR76C4L.js";import{d as g}from"./p-CXpv9Rxe.js";import{d as y}from"./p-B6t5q-V4.js";import{d as z}from"./p-BFYtCsZu.js";import{d as k}from"./p-D82VaHce.js";class C{static getToolConfig(e){switch(e?.toolType){case"selection":return"getToolConfig"in e&&"function"==typeof e.getToolConfig?e.getToolConfig():null;case"brush":return{type:"brush",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"size"}]};case"line":return{type:"line",colorProperty:"color",sizeProperty:"size",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"size"},{type:"line-endings",propertyName:"arrows",additionalProps:{}}]};case"shape":return{type:"shape",colorProperty:"strokeColor",sizeProperty:"strokeWidth",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"stroke-size",propertyName:"strokeWidth"},{type:"shape-fill",propertyName:"fillColor",additionalProps:{}}]};case"text":return{type:"text",colorProperty:"fontColor",sizeProperty:"fontSize",opacityProperty:"opacity",paletteSource:"palette",sizesSource:"sizes",controls:[{type:"font-size",propertyName:"fontSize",additionalProps:{}},{type:"font-family",propertyName:"fontFamily"}]};default:return null}}}const x=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.toolChange=s(this,"toolChange"),this.displayValuesChange=s(this,"displayValuesChange")}tool;handleToolChange(e,t){const s=C.getToolConfig(e);if(t&&e&&"shape"===s?.type){const i=C.getToolConfig(t);"shape"===i?.type&&[s.colorProperty,s.sizeProperty,s.opacityProperty,"fillColor"].forEach((s=>{s&&void 0!==t[s]&&(e[s]=t[s])}))}this.config=s,this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=e[this.config.opacityProperty]??1,this.emitDisplayValues())}isExpanded=!1;theme;engine;terms={};handleSelectionChangeBound=this.handleSelectionChange.bind(this);onThemeChange(){this.emitDisplayValues()}handleEngineChange(e,t){t&&t.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound),e&&e.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}toolChange;displayValuesChange;config;palette=[];sizes=[];currentOpacity=1;updateTrigger=0;getFontOptionsFromTool(){const e=[...l(this.tool.availableFonts).map((e=>{const t="string"==typeof e?{family:e,label:e,cssFontFamily:e}:{family:e.family,label:e.label??e.family,cssFontFamily:e.cssFontFamily??e.family};return{value:t.family,label:t.label,cssFontFamily:t.cssFontFamily}}))],t=new Set(e.map((e=>e.value.trim().toLocaleLowerCase())));for(const s of a.list()){const i=s.family.trim().toLocaleLowerCase();t.has(i)||(t.add(i),e.push({value:s.family,label:s.label,cssFontFamily:s.cssFontFamily}))}return e}handleSelectionChange(){"selection"===this.tool?.toolType&&(this.config=C.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()))}disconnectedCallback(){this.engine&&this.engine.removeEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}componentWillLoad(){this.config=C.getToolConfig(this.tool),this.config&&(this.updatePalette(),this.updateSizes(),this.currentOpacity=this.tool[this.config.opacityProperty]??1,this.emitDisplayValues()),this.engine&&this.engine.addEventListener("objectsSelectionChange",this.handleSelectionChangeBound)}emitDisplayValues(){if(!this.config)return;const e=this.tool[this.config.sizeProperty],t={color:n.applyOpacity(this.tool[this.config.colorProperty],this.currentOpacity,this.theme),size:e};"text"===this.tool.toolType&&(t.fontFamily=this.tool.fontFamily),this.displayValuesChange.emit(t)}updatePalette(){this.config&&(this.palette="none"===this.config.paletteSource?[]:this.tool.palette||[])}updateSizes(){this.config&&(this.sizes="none"===this.config.sizesSource?[]:this.tool.sizes||[])}handleToggleExpand=()=>{this.isExpanded=!this.isExpanded};handleColorChange=e=>{if(this.tool[this.config.colorProperty]=e.detail,"shape"===this.config.type||"selection"===this.config.type){const t=this.tool;("string"==typeof t.fillColor?"transparent"===t.fillColor:"transparent"===t.fillColor.light&&"transparent"===t.fillColor.dark)||(t.fillColor=e.detail)}this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleSizeChange=e=>{this.tool[this.config.sizeProperty]=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool),this.updateTrigger++};handleOpacityChange=e=>{this.tool[this.config.opacityProperty]=e.detail,this.currentOpacity=e.detail,this.emitDisplayValues(),this.toolChange.emit(this.tool)};handlePropertyChange=(e,t)=>{if("shape"!==this.config.type&&"selection"!==this.config.type||"fillColor"!==e)this.tool[e]=t,"fontFamily"===e&&this.emitDisplayValues();else{const e="filled"===t?this.tool[this.config.colorProperty]:{light:"transparent",dark:"transparent"};this.tool.fillColor=e,"filled"===t&&(this.tool[this.config.colorProperty]=e)}this.toolChange.emit(this.tool),this.updateTrigger++};getShapeFillValue(){const e=this.tool.fillColor;return("string"==typeof e?"transparent"===e:"transparent"===e.light&&"transparent"===e.dark)?"transparent":"filled"}renderControl(e){const t=this.tool[e.propertyName];switch(e.type){case"stroke-size":return i("kritzel-stroke-size",{key:e.type,sizes:this.sizes,selectedSize:t,onSizeChange:this.handleSizeChange});case"font-size":return i("kritzel-font-size",{key:e.type,sizes:this.sizes,selectedSize:t,fontFamily:this.tool.fontFamily,onSizeChange:this.handleSizeChange});case"line-endings":return i("kritzel-line-endings",{key:e.type,value:t,onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"shape-fill":return i("kritzel-shape-fill",{key:e.type,value:this.getShapeFillValue(),onValueChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});case"font-family":return i("kritzel-font-family",{key:e.type,fontOptions:this.getFontOptionsFromTool(),selectedFontFamily:t,onFontFamilyChange:t=>this.handlePropertyChange(e.propertyName,t.detail)});default:return null}}render(){if(!this.config)return null;const e=this.palette.length>6||"text"===this.config.type,t=this.palette.length>0,s=this.config.controls.find((e=>"stroke-size"===e.type||"font-size"===e.type)),r=this.config.controls.filter((e=>"stroke-size"!==e.type&&"font-size"!==e.type));return i(o,null,i("div",{style:{display:"flex",flexDirection:"row",gap:"8px",width:"100%"}},i("div",{style:{display:"flex",flexDirection:"column",gap:"12px",flex:"1"}},t&&i("kritzel-color-palette",{colors:this.palette,selectedColor:this.tool[this.config.colorProperty],isExpanded:this.isExpanded,isOpaque:!0,opacity:this.currentOpacity,theme:this.theme,onColorChange:this.handleColorChange}),s&&this.renderControl(s),i("kritzel-opacity-slider",{value:this.tool[this.config.opacityProperty],previewColor:this.tool[this.config.colorProperty],onValueChange:this.handleOpacityChange}),r.map((e=>[i("div",{class:"divider"}),this.renderControl(e)]))),e&&i("div",{style:{display:"flex",alignItems:"flex-start"}},i("button",{class:"expand-toggle",onClick:this.handleToggleExpand,title:this.isExpanded?this.terms["toolConfig.collapse"]??"Collapse":this.terms["toolConfig.expand"]??"Expand"},i("kritzel-icon",{name:this.isExpanded?"chevron-up":"chevron-down"})))))}static get watchers(){return{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}}static get style(){return".expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}"}},[513,"kritzel-tool-config",{tool:[1040],isExpanded:[1028,"is-expanded"],theme:[1],engine:[16],terms:[16],config:[32],palette:[32],sizes:[32],currentOpacity:[32],updateTrigger:[32]},void 0,{tool:[{handleToolChange:0}],theme:[{onThemeChange:0}],engine:[{handleEngineChange:0}]}]);function b(){"undefined"!=typeof customElements&&["kritzel-tool-config","kritzel-color","kritzel-color-palette","kritzel-dropdown","kritzel-font","kritzel-font-family","kritzel-font-size","kritzel-icon","kritzel-line-endings","kritzel-opacity-slider","kritzel-shape-fill","kritzel-stroke-size"].forEach((e=>{switch(e){case"kritzel-tool-config":customElements.get(r(e))||customElements.define(r(e),x);break;case"kritzel-color":customElements.get(r(e))||h();break;case"kritzel-color-palette":customElements.get(r(e))||p();break;case"kritzel-dropdown":customElements.get(r(e))||c();break;case"kritzel-font":customElements.get(r(e))||d();break;case"kritzel-font-family":customElements.get(r(e))||m();break;case"kritzel-font-size":customElements.get(r(e))||f();break;case"kritzel-icon":customElements.get(r(e))||u();break;case"kritzel-line-endings":customElements.get(r(e))||g();break;case"kritzel-opacity-slider":customElements.get(r(e))||y();break;case"kritzel-shape-fill":customElements.get(r(e))||z();break;case"kritzel-stroke-size":customElements.get(r(e))||k()}}))}export{C as K,x as a,b as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { a as KritzelColorHelper } from './p-BmyTdQGy.js';
+import { r as resolveTextToolAvailableFonts, K as KritzelFontRegistry } from './p-DJkKlUyZ.js';
+import { d as defineCustomElement$b } from './p-CqLgB8JK.js';
+import { d as defineCustomElement$a } from './p-Cymum41a.js';
+import { d as defineCustomElement$9 } from './p-Df3BwVGy.js';
+import { d as defineCustomElement$8 } from './p-B8Xi4Clg.js';
+import { d as defineCustomElement$7 } from './p-djJSnjAX.js';
+import { d as defineCustomElement$6 } from './p-BI2ng9I_.js';
+import { d as defineCustomElement$5 } from './p-CdR76C4L.js';
+import { d as defineCustomElement$4 } from './p-CXpv9Rxe.js';
+import { d as defineCustomElement$3 } from './p-B6t5q-V4.js';
+import { d as defineCustomElement$2 } from './p-BFYtCsZu.js';
+import { d as defineCustomElement$1 } from './p-D82VaHce.js';
+
+class KritzelToolConfigHelper {
+    static getToolConfig(tool) {
+        switch (tool?.toolType) {
+            case 'selection':
+                return 'getToolConfig' in tool && typeof tool.getToolConfig === 'function'
+                    ? tool.getToolConfig()
+                    : null;
+            case 'brush':
+                return {
+                    type: 'brush',
+                    colorProperty: 'color',
+                    sizeProperty: 'size',
+                    opacityProperty: 'opacity',
+                    paletteSource: 'palette',
+                    sizesSource: 'sizes',
+                    controls: [
+                        { type: 'stroke-size', propertyName: 'size' },
+                    ],
+                };
+            case 'line':
+                return {
+                    type: 'line',
+                    colorProperty: 'color',
+                    sizeProperty: 'size',
+                    opacityProperty: 'opacity',
+                    paletteSource: 'palette',
+                    sizesSource: 'sizes',
+                    controls: [
+                        { type: 'stroke-size', propertyName: 'size' },
+                        { type: 'line-endings', propertyName: 'arrows', additionalProps: {} },
+                    ],
+                };
+            case 'shape':
+                return {
+                    type: 'shape',
+                    colorProperty: 'strokeColor',
+                    sizeProperty: 'strokeWidth',
+                    opacityProperty: 'opacity',
+                    paletteSource: 'palette',
+                    sizesSource: 'sizes',
+                    controls: [
+                        { type: 'stroke-size', propertyName: 'strokeWidth' },
+                        { type: 'shape-fill', propertyName: 'fillColor', additionalProps: {} },
+                    ],
+                };
+            case 'text':
+                return {
+                    type: 'text',
+                    colorProperty: 'fontColor',
+                    sizeProperty: 'fontSize',
+                    opacityProperty: 'opacity',
+                    paletteSource: 'palette',
+                    sizesSource: 'sizes',
+                    controls: [
+                        { type: 'font-size', propertyName: 'fontSize', additionalProps: {} },
+                        { type: 'font-family', propertyName: 'fontFamily' },
+                    ],
+                };
+            default:
+                return null;
+        }
+    }
+}
+
+const kritzelToolConfigCss = () => `.expand-toggle{background:none;border:none;cursor:var(--kritzel-global-pointer-cursor, pointer);padding:0;margin:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;color:var(--kritzel-icon-color, currentColor);transition:transform 0.2s ease}.expand-toggle:hover{opacity:0.7}.expand-toggle:focus{outline:none}.expand-toggle:focus-visible{outline:2px solid var(--kritzel-focus-color, #007acc);outline-offset:2px}.expand-toggle:active{transform:scale(0.95)}.divider{height:1px;background-color:var(--kritzel-divider-color, #e0e0e0);margin:4px 0;width:100%}`;
+
+const KritzelToolConfig = /*@__PURE__*/ proxyCustomElement(class KritzelToolConfig extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.toolChange = createEvent(this, "toolChange");
+        this.displayValuesChange = createEvent(this, "displayValuesChange");
+    }
+    tool;
+    handleToolChange(newTool, oldTool) {
+        const newConfig = KritzelToolConfigHelper.getToolConfig(newTool);
+        // Maintain settings when switching between shape tools
+        if (oldTool && newTool && newConfig?.type === 'shape') {
+            const oldConfig = KritzelToolConfigHelper.getToolConfig(oldTool);
+            if (oldConfig?.type === 'shape') {
+                // Copy properties that should persist
+                const propsToCopy = [
+                    newConfig.colorProperty, // strokeColor
+                    newConfig.sizeProperty, // strokeWidth
+                    newConfig.opacityProperty, // opacity
+                    'fillColor' // shape specific
+                ];
+                propsToCopy.forEach(prop => {
+                    if (prop && oldTool[prop] !== undefined) {
+                        newTool[prop] = oldTool[prop];
+                    }
+                });
+            }
+        }
+        this.config = newConfig;
+        if (this.config) {
+            this.updatePalette();
+            this.updateSizes();
+            this.currentOpacity = newTool[this.config.opacityProperty] ?? 1;
+            // Emit the values since they might have been updated from the old tool
+            this.emitDisplayValues();
+        }
+    }
+    isExpanded = false;
+    theme;
+    engine;
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    handleSelectionChangeBound = this.handleSelectionChange.bind(this);
+    onThemeChange() {
+        this.emitDisplayValues();
+    }
+    handleEngineChange(newEngine, oldEngine) {
+        if (oldEngine) {
+            oldEngine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+        if (newEngine) {
+            newEngine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    toolChange;
+    displayValuesChange;
+    config;
+    palette = [];
+    sizes = [];
+    currentOpacity = 1;
+    updateTrigger = 0;
+    getFontOptionsFromTool() {
+        const configuredFonts = resolveTextToolAvailableFonts(this.tool.availableFonts).map(font => {
+            const registeredFont = typeof font === 'string'
+                ? {
+                    family: font,
+                    label: font,
+                    cssFontFamily: font,
+                }
+                : {
+                    family: font.family,
+                    label: font.label ?? font.family,
+                    cssFontFamily: font.cssFontFamily ?? font.family,
+                };
+            return {
+                value: registeredFont.family,
+                label: registeredFont.label,
+                cssFontFamily: registeredFont.cssFontFamily,
+            };
+        });
+        const mergedFonts = [...configuredFonts];
+        const seenFonts = new Set(mergedFonts.map(font => font.value.trim().toLocaleLowerCase()));
+        for (const font of KritzelFontRegistry.list()) {
+            const normalizedValue = font.family.trim().toLocaleLowerCase();
+            if (seenFonts.has(normalizedValue)) {
+                continue;
+            }
+            seenFonts.add(normalizedValue);
+            mergedFonts.push({
+                value: font.family,
+                label: font.label,
+                cssFontFamily: font.cssFontFamily,
+            });
+        }
+        return mergedFonts;
+    }
+    handleSelectionChange() {
+        if (this.tool?.toolType === 'selection') {
+            this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
+            if (this.config) {
+                this.updatePalette();
+                this.updateSizes();
+                this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
+                this.emitDisplayValues();
+            }
+        }
+    }
+    disconnectedCallback() {
+        if (this.engine) {
+            this.engine.removeEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    componentWillLoad() {
+        this.config = KritzelToolConfigHelper.getToolConfig(this.tool);
+        if (this.config) {
+            this.updatePalette();
+            this.updateSizes();
+            this.currentOpacity = this.tool[this.config.opacityProperty] ?? 1;
+            this.emitDisplayValues();
+        }
+        if (this.engine) {
+            this.engine.addEventListener('objectsSelectionChange', this.handleSelectionChangeBound);
+        }
+    }
+    emitDisplayValues() {
+        if (!this.config)
+            return;
+        const color = this.tool[this.config.colorProperty];
+        const opacity = this.currentOpacity;
+        const size = this.tool[this.config.sizeProperty];
+        const displayValues = {
+            color: KritzelColorHelper.applyOpacity(color, opacity, this.theme),
+            size,
+        };
+        if (this.tool.toolType === 'text') {
+            displayValues.fontFamily = this.tool.fontFamily;
+        }
+        this.displayValuesChange.emit(displayValues);
+    }
+    updatePalette() {
+        if (!this.config)
+            return;
+        if (this.config.paletteSource === 'none') {
+            this.palette = [];
+        }
+        else {
+            this.palette = this.tool.palette || [];
+        }
+    }
+    updateSizes() {
+        if (!this.config)
+            return;
+        if (this.config.sizesSource === 'none') {
+            this.sizes = [];
+        }
+        else {
+            this.sizes = this.tool.sizes || [];
+        }
+    }
+    handleToggleExpand = () => {
+        this.isExpanded = !this.isExpanded;
+    };
+    handleColorChange = (event) => {
+        this.tool[this.config.colorProperty] = event.detail;
+        // Special handling for shape fill: when color (stroke) changes, update fill color if it's currently filled
+        if (this.config.type === 'shape' || this.config.type === 'selection') {
+            const tool = this.tool;
+            const isTransparent = typeof tool.fillColor === 'string' ? tool.fillColor === 'transparent' :
+                (tool.fillColor.light === 'transparent' && tool.fillColor.dark === 'transparent');
+            if (!isTransparent) {
+                tool.fillColor = event.detail;
+            }
+        }
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    handleSizeChange = (event) => {
+        this.tool[this.config.sizeProperty] = event.detail;
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    handleOpacityChange = (event) => {
+        this.tool[this.config.opacityProperty] = event.detail;
+        this.currentOpacity = event.detail;
+        this.emitDisplayValues();
+        this.toolChange.emit(this.tool);
+    };
+    handlePropertyChange = (propertyName, value) => {
+        // Special handling for shape fill
+        if ((this.config.type === 'shape' || this.config.type === 'selection') && propertyName === 'fillColor') {
+            const newFillColor = value === 'filled' ? this.tool[this.config.colorProperty] : { light: 'transparent', dark: 'transparent' };
+            this.tool.fillColor = newFillColor;
+            // When switching to fill mode, also update stroke color to match
+            if (value === 'filled') {
+                this.tool[this.config.colorProperty] = newFillColor;
+            }
+        }
+        else {
+            this.tool[propertyName] = value;
+            // Emit display values for font family changes
+            if (propertyName === 'fontFamily') {
+                this.emitDisplayValues();
+            }
+        }
+        this.toolChange.emit(this.tool);
+        this.updateTrigger++;
+    };
+    getShapeFillValue() {
+        const fillColor = this.tool.fillColor;
+        const isTransparent = typeof fillColor === 'string' ? fillColor === 'transparent' :
+            (fillColor.light === 'transparent' && fillColor.dark === 'transparent');
+        return isTransparent ? 'transparent' : 'filled';
+    }
+    renderControl(control) {
+        const value = this.tool[control.propertyName];
+        switch (control.type) {
+            case 'stroke-size':
+                return (h("kritzel-stroke-size", { key: control.type, sizes: this.sizes, selectedSize: value, onSizeChange: this.handleSizeChange }));
+            case 'font-size':
+                return (h("kritzel-font-size", { key: control.type, sizes: this.sizes, selectedSize: value, fontFamily: this.tool.fontFamily, onSizeChange: this.handleSizeChange }));
+            case 'line-endings':
+                return (h("kritzel-line-endings", { key: control.type, value: value, onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            case 'shape-fill':
+                return (h("kritzel-shape-fill", { key: control.type, value: this.getShapeFillValue(), onValueChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            case 'font-family':
+                return (h("kritzel-font-family", { key: control.type, fontOptions: this.getFontOptionsFromTool(), selectedFontFamily: value, onFontFamilyChange: (event) => this.handlePropertyChange(control.propertyName, event.detail) }));
+            default:
+                return null;
+        }
+    }
+    render() {
+        if (!this.config)
+            return null;
+        const shouldShowExpandButton = this.palette.length > 6 || this.config.type === 'text';
+        const shouldShowColorPalette = this.palette.length > 0;
+        // Separate size control from other controls
+        const sizeControl = this.config.controls.find(c => c.type === 'stroke-size' || c.type === 'font-size');
+        const otherControls = this.config.controls.filter(c => c.type !== 'stroke-size' && c.type !== 'font-size');
+        return (h(Host, null, h("div", { style: {
+                display: 'flex',
+                flexDirection: 'row',
+                gap: '8px',
+                width: '100%',
+            } }, h("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '12px',
+                flex: '1',
+            } }, shouldShowColorPalette && (h("kritzel-color-palette", { colors: this.palette, selectedColor: this.tool[this.config.colorProperty], isExpanded: this.isExpanded, isOpaque: true, opacity: this.currentOpacity, theme: this.theme, onColorChange: this.handleColorChange })), sizeControl && this.renderControl(sizeControl), h("kritzel-opacity-slider", { value: this.tool[this.config.opacityProperty], previewColor: this.tool[this.config.colorProperty], onValueChange: this.handleOpacityChange }), otherControls.map((control) => [
+            h("div", { class: "divider" }),
+            this.renderControl(control),
+        ])), shouldShowExpandButton && (h("div", { style: {
+                display: 'flex',
+                alignItems: 'flex-start',
+            } }, h("button", { class: "expand-toggle", onClick: this.handleToggleExpand, title: this.isExpanded ? (this.terms['toolConfig.collapse'] ?? 'Collapse') : (this.terms['toolConfig.expand'] ?? 'Expand') }, h("kritzel-icon", { name: this.isExpanded ? 'chevron-up' : 'chevron-down' })))))));
+    }
+    static get watchers() { return {
+        "tool": [{
+                "handleToolChange": 0
+            }],
+        "theme": [{
+                "onThemeChange": 0
+            }],
+        "engine": [{
+                "handleEngineChange": 0
+            }]
+    }; }
+    static get style() { return kritzelToolConfigCss(); }
+}, [513, "kritzel-tool-config", {
+        "tool": [1040],
+        "isExpanded": [1028, "is-expanded"],
+        "theme": [1],
+        "engine": [16],
+        "terms": [16],
+        "config": [32],
+        "palette": [32],
+        "sizes": [32],
+        "currentOpacity": [32],
+        "updateTrigger": [32]
+    }, undefined, {
+        "tool": [{
+                "handleToolChange": 0
+            }],
+        "theme": [{
+                "onThemeChange": 0
+            }],
+        "engine": [{
+                "handleEngineChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-tool-config", "kritzel-color", "kritzel-color-palette", "kritzel-dropdown", "kritzel-font", "kritzel-font-family", "kritzel-font-size", "kritzel-icon", "kritzel-line-endings", "kritzel-opacity-slider", "kritzel-shape-fill", "kritzel-stroke-size"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-tool-config":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelToolConfig);
+            }
+            break;
+        case "kritzel-color":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$b();
+            }
+            break;
+        case "kritzel-color-palette":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$a();
+            }
+            break;
+        case "kritzel-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$9();
+            }
+            break;
+        case "kritzel-font":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$8();
+            }
+            break;
+        case "kritzel-font-family":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$7();
+            }
+            break;
+        case "kritzel-font-size":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "kritzel-line-endings":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kritzel-opacity-slider":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-shape-fill":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-stroke-size":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelToolConfigHelper as K, KritzelToolConfig as a, defineCustomElement as d };

package/dist/components/p-C4NrrUfN.js

@@ -1 +1,77 @@
-import{p as e,H as t,c as i,h as r,d as a,t as o}from"./p-B43upypT.js";const l=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChange=i(this,"valueChange")}value="";label="";placeholder="";suffix="";type="text";disabled=!1;valueChange;inputValue="";onValueChange(e){this.inputValue=e??""}componentWillLoad(){this.inputValue=this.value??""}handleInput=e=>{const t=e.target;this.inputValue=t.value,this.value=t.value,this.valueChange.emit(t.value)};render(){return r(a,{key:"a59aa026922a3267ec7e6177973e80edfa97202c"},r("div",{key:"46b1f191072bfb2a26579a329f8fd6ec86ca3ef9",class:"input-container"},this.label&&r("label",{key:"5409f811792034be56c3269b31ff374d8ed33de2",class:"input-label"},this.label),r("div",{key:"f51219b2a6384aeee63a7c8214821abd853a0ea5",class:{"input-wrapper":!0,"has-suffix":!!this.suffix}},r("input",{key:"05c93a526aa2f2d757a7c139fa3a47d84a4e2d95",type:this.type,class:"text-input",value:this.inputValue,placeholder:this.placeholder,disabled:this.disabled,onInput:this.handleInput}),this.suffix&&r("span",{key:"91b60b25a7ff750720ff1961e224a035a2d86096",class:"input-suffix"},this.suffix))))}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return":host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:var(--kritzel-text-input-border-radius, 6px);overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}"}},[513,"kritzel-input",{value:[1025],label:[1],placeholder:[1],suffix:[1],type:[1],disabled:[4],inputValue:[32]},void 0,{value:[{onValueChange:0}]}]);function n(){"undefined"!=typeof customElements&&["kritzel-input"].forEach((e=>{"kritzel-input"===e&&(customElements.get(o(e))||customElements.define(o(e),l))}))}export{l as K,n as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelInputCss = () => `:host{display:block}.input-container{display:flex;flex-direction:column;gap:6px}.input-label{font-size:14px;font-weight:500;color:var(--kritzel-text-input-label-color, #333333)}.input-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-text-input-border-color, #ebebeb);border-radius:var(--kritzel-text-input-border-radius, 6px);overflow:hidden;background:var(--kritzel-text-input-background, #ffffff);transition:border-color 150ms ease}.input-wrapper:hover:not(:focus-within){border-color:var(--kritzel-text-input-hover-border-color, #cccccc)}.input-wrapper:focus-within{border-color:var(--kritzel-text-input-focus-border-color, #007AFF);border-width:2px}.text-input{flex:1;padding:10px 12px;border:none;outline:none;font-size:14px;font-family:inherit;background:transparent;color:var(--kritzel-text-input-text-color, #333333);box-sizing:border-box}.text-input::placeholder{color:var(--kritzel-text-input-placeholder-color, #999999)}.text-input::selection{background-color:var(--kritzel-text-input-selection-background, #007AFF);color:var(--kritzel-text-input-selection-color, #ffffff)}.text-input:disabled{cursor:not-allowed;opacity:0.6}.input-suffix{padding:10px 12px;background:var(--kritzel-text-input-suffix-background, #f5f5f5);color:var(--kritzel-text-input-suffix-color, #666666);font-size:14px;border-left:1px solid var(--kritzel-text-input-border-color, #ebebeb);flex-shrink:0}`;
+
+const KritzelInput = /*@__PURE__*/ proxyCustomElement(class KritzelInput extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    /** Current text value */
+    value = '';
+    /** Label text displayed above the input */
+    label = '';
+    /** Placeholder text shown when input is empty */
+    placeholder = '';
+    /** Suffix text displayed after the input (e.g., file extension) */
+    suffix = '';
+    /** Input type */
+    type = 'text';
+    /** Whether the input is disabled */
+    disabled = false;
+    /** Emitted when the value changes */
+    valueChange;
+    inputValue = '';
+    onValueChange(newValue) {
+        this.inputValue = newValue ?? '';
+    }
+    componentWillLoad() {
+        this.inputValue = this.value ?? '';
+    }
+    handleInput = (event) => {
+        const input = event.target;
+        this.inputValue = input.value;
+        this.value = input.value;
+        this.valueChange.emit(input.value);
+    };
+    render() {
+        return (h(Host, { key: 'a59aa026922a3267ec7e6177973e80edfa97202c' }, h("div", { key: '46b1f191072bfb2a26579a329f8fd6ec86ca3ef9', class: "input-container" }, this.label && h("label", { key: '5409f811792034be56c3269b31ff374d8ed33de2', class: "input-label" }, this.label), h("div", { key: 'f51219b2a6384aeee63a7c8214821abd853a0ea5', class: { 'input-wrapper': true, 'has-suffix': !!this.suffix } }, h("input", { key: '05c93a526aa2f2d757a7c139fa3a47d84a4e2d95', type: this.type, class: "text-input", value: this.inputValue, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput }), this.suffix && h("span", { key: '91b60b25a7ff750720ff1961e224a035a2d86096', class: "input-suffix" }, this.suffix)))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+    static get style() { return kritzelInputCss(); }
+}, [513, "kritzel-input", {
+        "value": [1025],
+        "label": [1],
+        "placeholder": [1],
+        "suffix": [1],
+        "type": [1],
+        "disabled": [4],
+        "inputValue": [32]
+    }, undefined, {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-input":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelInput);
+            }
+            break;
+    } });
+}
+
+export { KritzelInput as K, defineCustomElement as d };

package/dist/components/p-CW-VyJgK.js

@@ -1 +1,6 @@
-const a=2,s=2;export{a as C,s as a}
+/** Current schema version for the app-state Y.Doc (workspace list & settings). */
+const CURRENT_APP_STATE_SCHEMA_VERSION = 2;
+/** Current schema version for workspace Y.Docs (drawable objects). */
+const CURRENT_WORKSPACE_SCHEMA_VERSION = 2;
+
+export { CURRENT_APP_STATE_SCHEMA_VERSION as C, CURRENT_WORKSPACE_SCHEMA_VERSION as a };

package/dist/components/p-CWRSGYOE.js

@@ -1 +1,57 @@
-import{p as e,H as t,c as i,h as l,d as s,t as r}from"./p-B43upypT.js";const o=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.checkedChange=i(this,"checkedChange")}checked=!1;disabled=!1;label;checkedChange;handleToggle=()=>{this.disabled||(this.checked=!this.checked,this.checkedChange.emit(this.checked))};handleKeyDown=e=>{" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),this.handleToggle())};render(){return l(s,{key:"e132e2614dcf2c7afc51e8aa064de36ea4a84710",class:{checked:this.checked,disabled:this.disabled},tabIndex:this.disabled?-1:0,role:"switch","aria-checked":this.checked?"true":"false","aria-disabled":this.disabled?"true":"false","aria-label":this.label,onClick:this.handleToggle,onKeyDown:this.handleKeyDown},l("div",{key:"c7857aa2b747aba1851f7df1bde3d0469898d32a",class:"toggle-track"},l("div",{key:"6beb1821fdc265b4fb5d0a6813a33fb768366984",class:"toggle-thumb"})))}static get style(){return":host{display:inline-flex;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;z-index:1;-webkit-tap-highlight-color:transparent}:host(:focus-visible) .toggle-track{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}:host(.disabled){opacity:0.5;pointer-events:none;cursor:default}.toggle-track{position:relative;width:var(--kritzel-slide-toggle-width, 40px);height:var(--kritzel-slide-toggle-height, 22px);background-color:var(--kritzel-slide-toggle-track-color, #ccc);border-radius:var(--kritzel-slide-toggle-border-radius, 11px);transition:background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-track{background-color:var(--kritzel-slide-toggle-track-checked-color, #007AFF)}.toggle-thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--kritzel-slide-toggle-thumb-size, 18px);height:var(--kritzel-slide-toggle-thumb-size, 18px);background-color:var(--kritzel-slide-toggle-thumb-color, #fff);border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-thumb{left:calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px)}"}},[513,"kritzel-slide-toggle",{checked:[1028],disabled:[4],label:[1]}]);function a(){"undefined"!=typeof customElements&&["kritzel-slide-toggle"].forEach((e=>{"kritzel-slide-toggle"===e&&(customElements.get(r(e))||customElements.define(r(e),o))}))}export{o as K,a as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const kritzelSlideToggleCss = () => `:host{display:inline-flex;align-items:center;cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;z-index:1;-webkit-tap-highlight-color:transparent}:host(:focus-visible) .toggle-track{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}:host(.disabled){opacity:0.5;pointer-events:none;cursor:default}.toggle-track{position:relative;width:var(--kritzel-slide-toggle-width, 40px);height:var(--kritzel-slide-toggle-height, 22px);background-color:var(--kritzel-slide-toggle-track-color, #ccc);border-radius:var(--kritzel-slide-toggle-border-radius, 11px);transition:background-color var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-track{background-color:var(--kritzel-slide-toggle-track-checked-color, #007AFF)}.toggle-thumb{position:absolute;top:50%;left:2px;transform:translateY(-50%);width:var(--kritzel-slide-toggle-thumb-size, 18px);height:var(--kritzel-slide-toggle-thumb-size, 18px);background-color:var(--kritzel-slide-toggle-thumb-color, #fff);border-radius:50%;box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:left var(--kritzel-slide-toggle-transition-duration, 0.2s) ease}:host(.checked) .toggle-thumb{left:calc(var(--kritzel-slide-toggle-width, 40px) - var(--kritzel-slide-toggle-thumb-size, 18px) - 2px)}`;
+
+const KritzelSlideToggle = /*@__PURE__*/ proxyCustomElement(class KritzelSlideToggle extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.checkedChange = createEvent(this, "checkedChange");
+    }
+    /** Whether the toggle is checked/on */
+    checked = false;
+    /** Whether the toggle is disabled */
+    disabled = false;
+    /** Label text for accessibility (screen readers) */
+    label;
+    /** Emitted when the toggle state changes */
+    checkedChange;
+    handleToggle = () => {
+        if (this.disabled)
+            return;
+        this.checked = !this.checked;
+        this.checkedChange.emit(this.checked);
+    };
+    handleKeyDown = (event) => {
+        if (event.key === ' ' || event.key === 'Enter') {
+            event.preventDefault();
+            this.handleToggle();
+        }
+    };
+    render() {
+        return (h(Host, { key: 'e132e2614dcf2c7afc51e8aa064de36ea4a84710', class: { checked: this.checked, disabled: this.disabled }, tabIndex: this.disabled ? -1 : 0, role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label, onClick: this.handleToggle, onKeyDown: this.handleKeyDown }, h("div", { key: 'c7857aa2b747aba1851f7df1bde3d0469898d32a', class: "toggle-track" }, h("div", { key: '6beb1821fdc265b4fb5d0a6813a33fb768366984', class: "toggle-thumb" }))));
+    }
+    static get style() { return kritzelSlideToggleCss(); }
+}, [513, "kritzel-slide-toggle", {
+        "checked": [1028],
+        "disabled": [4],
+        "label": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-slide-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-slide-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelSlideToggle);
+            }
+            break;
+    } });
+}
+
+export { KritzelSlideToggle as K, defineCustomElement as d };