kritzel-stencil 0.4.4 → 0.4.6

package/dist/components/p-PSFAfAyd.js

@@ -1 +1,49 @@
-import{p as e,H as r,h as t,d as a,t as o}from"./p-B43upypT.js";const i=1e3,n=1e-4,s=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}core;label;render(){const e=this.label??this.core.localizationManager.translate("watermark.poweredBy");return t(a,{key:"143ea32342e30351c93751714dfd12b725ddca24"},t("a",{key:"95fb2dfa0d806367e6a71dad3932b321d7ae5a76",class:"watermark-link",href:"https://kritzel.io",target:"_blank",rel:"noopener noreferrer",part:"watermark",onPointerDown:e=>e.stopPropagation(),onPointerUp:e=>e.stopPropagation()},e))}static get style(){return":host{position:absolute;bottom:var(--kritzel-watermark-offset-bottom, 12px);right:var(--kritzel-watermark-offset-right, 12px);z-index:10000;pointer-events:none}.watermark-link{pointer-events:auto;display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--kritzel-watermark-border-radius, 6px);font-family:var(--kritzel-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);font-size:var(--kritzel-watermark-font-size, 11px);line-height:1;text-decoration:none;color:var(--kritzel-watermark-color, rgba(60, 60, 60, 0.75));background-color:var(--kritzel-watermark-background, rgba(255, 255, 255, 0.6));box-shadow:var(--kritzel-watermark-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.12));opacity:var(--kritzel-watermark-opacity, 0.85);transition:opacity 150ms ease;user-select:none}.watermark-link:hover{opacity:1}"}},[513,"kritzel-watermark",{core:[16],label:[1]}]);function l(){"undefined"!=typeof customElements&&["kritzel-watermark"].forEach((e=>{"kritzel-watermark"===e&&(customElements.get(o(e))||customElements.define(o(e),s))}))}export{i as A,s as K,n as a,l as d}
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-B43upypT.js';
+
+const ABSOLUTE_SCALE_MAX = 1000;
+const ABSOLUTE_SCALE_MIN = 0.0001;
+/** Destination opened when the "Powered by Kritzel" watermark is clicked. */
+const KRITZEL_WEBSITE_URL = 'https://kritzel.io';
+
+const kritzelWatermarkCss = () => `:host{position:absolute;bottom:var(--kritzel-watermark-offset-bottom, 12px);right:var(--kritzel-watermark-offset-right, 12px);z-index:10000;pointer-events:none}.watermark-link{pointer-events:auto;display:inline-flex;align-items:center;padding:4px 8px;border-radius:var(--kritzel-watermark-border-radius, 6px);font-family:var(--kritzel-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);font-size:var(--kritzel-watermark-font-size, 11px);line-height:1;text-decoration:none;color:var(--kritzel-watermark-color, rgba(60, 60, 60, 0.75));background-color:var(--kritzel-watermark-background, rgba(255, 255, 255, 0.6));box-shadow:var(--kritzel-watermark-box-shadow, 0 1px 2px rgba(0, 0, 0, 0.12));opacity:var(--kritzel-watermark-opacity, 0.85);transition:opacity 150ms ease;user-select:none}.watermark-link:hover{opacity:1}`;
+
+const KritzelWatermark = /*@__PURE__*/ proxyCustomElement(class KritzelWatermark extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    /** The core instance used to resolve localized terms. */
+    core;
+    /**
+     * Resolved "Powered by Kritzel" label. Passed in by the engine so the badge
+     * re-renders when the active locale changes. Falls back to resolving the term
+     * from the core when not provided.
+     */
+    label;
+    render() {
+        const label = this.label ?? this.core.localizationManager.translate('watermark.poweredBy');
+        return (h(Host, { key: '143ea32342e30351c93751714dfd12b725ddca24' }, h("a", { key: '95fb2dfa0d806367e6a71dad3932b321d7ae5a76', class: "watermark-link", href: KRITZEL_WEBSITE_URL, target: "_blank", rel: "noopener noreferrer", part: "watermark", onPointerDown: (ev) => ev.stopPropagation(), onPointerUp: (ev) => ev.stopPropagation() }, label)));
+    }
+    static get style() { return kritzelWatermarkCss(); }
+}, [513, "kritzel-watermark", {
+        "core": [16],
+        "label": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-watermark"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-watermark":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelWatermark);
+            }
+            break;
+    } });
+}
+
+export { ABSOLUTE_SCALE_MAX as A, KritzelWatermark as K, ABSOLUTE_SCALE_MIN as a, defineCustomElement as d };

package/dist/components/p-WUdQqYnu.js

@@ -1 +1,118 @@
-class t{static getNumericValueFromStyle(t,n){const e=window.getComputedStyle(t).getPropertyValue(n);return parseFloat(e)||0}static isScrollableElement(t){if(!(t instanceof HTMLElement))return!1;const n=window.getComputedStyle(t),e=n.overflowX,r=n.overflowY,o=n.overflow;return("auto"===e||"scroll"===e||"overlay"===e)&&t.scrollWidth>t.clientWidth||("auto"===r||"scroll"===r||"overlay"===r)&&t.scrollHeight>t.clientHeight||("auto"===o||"scroll"===o||"overlay"===o)&&(t.scrollWidth>t.clientWidth||t.scrollHeight>t.clientHeight)}static findScrollableElement(t){if(!t)return null;const n=new Set,e=t=>{if(n.has(t))return null;if(n.add(t),this.isScrollableElement(t))return t;if(t.shadowRoot)for(const n of Array.from(t.shadowRoot.children)){const t=e(n);if(t)return t}if("SLOT"===t.tagName)for(const n of t.assignedElements({flatten:!0})){const t=e(n);if(t)return t}for(const n of Array.from(t.children)){const t=e(n);if(t)return t}return null};return e(t)}static getScrollableParent(t){if(!t)return window;const n=t.parentNode?.host??t.parentElement;if(!n||"BODY"===n.tagName)return window;const e=window.getComputedStyle(n);return"auto"===e.overflow||"auto"===e.overflowY||"scroll"===e.overflow||"scroll"===e.overflowY?n:this.getScrollableParent(n)}static isElementInViewport(t){if(!t)return!1;const n=this.getScrollableParent(t),e=t.getBoundingClientRect();if(n===window){const t=window.innerHeight||document.documentElement.clientHeight,n=window.innerWidth||document.documentElement.clientWidth;return e.top>=0&&e.left>=0&&e.bottom<=t&&e.right<=n}const r=n.getBoundingClientRect();return e.top>=r.top&&e.left>=r.left&&e.bottom<=r.bottom&&e.right<=r.right}static getFocusableElements(t){if(!t)return[];const n=[],e=t=>{t instanceof HTMLElement&&t.matches('a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])')&&!t.hasAttribute("disabled")&&(t=>{const n=window.getComputedStyle(t);return"none"!==n.display&&"hidden"!==n.visibility})(t)&&n.push(t),t.shadowRoot&&Array.from(t.shadowRoot.children).forEach(e),"SLOT"===t.tagName&&t.assignedElements({flatten:!0}).forEach(e),t.shadowRoot||Array.from(t.children).forEach(e)};return e(t),n}}export{t as K}
+class KritzelHTMLHelper {
+    static getNumericValueFromStyle(element, property) {
+        const value = window.getComputedStyle(element).getPropertyValue(property);
+        return parseFloat(value) || 0;
+    }
+    static isScrollableElement(element) {
+        if (!(element instanceof HTMLElement)) {
+            return false;
+        }
+        const style = window.getComputedStyle(element);
+        const overflowX = style.overflowX;
+        const overflowY = style.overflowY;
+        const overflow = style.overflow;
+        const canScrollX = (overflowX === 'auto' || overflowX === 'scroll' || overflowX === 'overlay') && element.scrollWidth > element.clientWidth;
+        const canScrollY = (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') && element.scrollHeight > element.clientHeight;
+        const canScroll = overflow === 'auto' || overflow === 'scroll' || overflow === 'overlay';
+        return canScrollX || canScrollY || (canScroll && (element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight));
+    }
+    static findScrollableElement(root) {
+        if (!root) {
+            return null;
+        }
+        const visited = new Set();
+        const walk = (element) => {
+            if (visited.has(element)) {
+                return null;
+            }
+            visited.add(element);
+            if (this.isScrollableElement(element)) {
+                return element;
+            }
+            if (element.shadowRoot) {
+                for (const child of Array.from(element.shadowRoot.children)) {
+                    const scrollable = walk(child);
+                    if (scrollable) {
+                        return scrollable;
+                    }
+                }
+            }
+            if (element.tagName === 'SLOT') {
+                for (const assignedElement of element.assignedElements({ flatten: true })) {
+                    const scrollable = walk(assignedElement);
+                    if (scrollable) {
+                        return scrollable;
+                    }
+                }
+            }
+            for (const child of Array.from(element.children)) {
+                const scrollable = walk(child);
+                if (scrollable) {
+                    return scrollable;
+                }
+            }
+            return null;
+        };
+        return walk(root);
+    }
+    static getScrollableParent(element) {
+        if (!element) {
+            return window;
+        }
+        const parent = element.parentNode?.host ?? element.parentElement;
+        if (!parent || parent.tagName === 'BODY') {
+            return window;
+        }
+        const style = window.getComputedStyle(parent);
+        if (style.overflow === 'auto' || style.overflowY === 'auto' || style.overflow === 'scroll' || style.overflowY === 'scroll') {
+            return parent;
+        }
+        return this.getScrollableParent(parent);
+    }
+    static isElementInViewport(element) {
+        if (!element) {
+            return false;
+        }
+        const scrollableParent = this.getScrollableParent(element);
+        const rect = element.getBoundingClientRect();
+        if (scrollableParent === window) {
+            const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+            const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
+            return rect.top >= 0 && rect.left >= 0 && rect.bottom <= viewportHeight && rect.right <= viewportWidth;
+        }
+        const parentRect = scrollableParent.getBoundingClientRect();
+        return rect.top >= parentRect.top && rect.left >= parentRect.left && rect.bottom <= parentRect.bottom && rect.right <= parentRect.right;
+    }
+    static getFocusableElements(root) {
+        if (!root)
+            return [];
+        const focusableElements = [];
+        const focusableSelector = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), details, [tabindex]:not([tabindex="-1"])';
+        const isVisible = (el) => {
+            const style = window.getComputedStyle(el);
+            return style.display !== 'none' && style.visibility !== 'hidden';
+        };
+        const find = (element) => {
+            // Check if the element itself is focusable
+            if (element instanceof HTMLElement && element.matches(focusableSelector) && !element.hasAttribute('disabled') && isVisible(element)) {
+                focusableElements.push(element);
+            }
+            // Traverse shadow DOM
+            if (element.shadowRoot) {
+                Array.from(element.shadowRoot.children).forEach(find);
+            }
+            // Traverse slotted content
+            if (element.tagName === 'SLOT') {
+                element.assignedElements({ flatten: true }).forEach(find);
+            }
+            // Traverse light DOM children if there is no shadow root
+            if (!element.shadowRoot) {
+                Array.from(element.children).forEach(find);
+            }
+        };
+        find(root);
+        return focusableElements;
+    }
+}
+
+export { KritzelHTMLHelper as K };

package/dist/components/p-djJSnjAX.js

@@ -1 +1,84 @@
-import{p as t,H as e,c as o,h as n,d as s,t as l}from"./p-B43upypT.js";import{d as i}from"./p-Df3BwVGy.js";const r=t(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.fontFamilyChange=o(this,"fontFamilyChange")}fontOptions=[];selectedFontFamily;fontFamilyChange;handleFontOptionsChange(){this.ensureValidSelectedFont(this.resolveFontOptions())}componentWillLoad(){this.ensureValidSelectedFont(this.resolveFontOptions())}handleDropdownValueChange=t=>{this.fontFamilyChange.emit(t.detail)};ensureValidSelectedFont(t){if(0===t.length)return;const e=this.selectedFontFamily?.trim().toLocaleLowerCase(),o=t.some((t=>t.value.trim().toLocaleLowerCase()===e));e&&o||(this.selectedFontFamily=t[0].value)}resolveFontOptions(){return this.fontOptions}render(){const t=this.resolveFontOptions(),e=t.find((t=>t.value===this.selectedFontFamily)),o=e?.cssFontFamily??this.selectedFontFamily,l=t.map((t=>({value:t.value,label:t.label,style:{fontFamily:t.cssFontFamily??t.value}})));return n(s,{key:"059350f34370f7a291f47a42721ca5d9bb82df49"},n("kritzel-dropdown",{key:"fbd8cf1ae463c7e9b76d0ac754a41de54397058e",options:l,value:this.selectedFontFamily,onValueChanged:this.handleDropdownValueChange,selectStyles:{fontFamily:o}}))}static get watchers(){return{fontOptions:[{handleFontOptionsChange:0}]}}static get style(){return":host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);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)}.font-style-button.italic-text{font-style:italic}"}},[513,"kritzel-font-family",{fontOptions:[16],selectedFontFamily:[1025,"selected-font-family"]},void 0,{fontOptions:[{handleFontOptionsChange:0}]}]);function a(){"undefined"!=typeof customElements&&["kritzel-font-family","kritzel-dropdown"].forEach((t=>{switch(t){case"kritzel-font-family":customElements.get(l(t))||customElements.define(l(t),r);break;case"kritzel-dropdown":customElements.get(l(t))||i()}}))}export{r as K,a 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-Df3BwVGy.js';
+
+const kritzelFontFamilyCss = () => `:host{display:flex;align-items:flex-start;gap:8px;padding:0;box-sizing:border-box;width:100%}.font-style-button{display:flex;justify-content:center;align-items:center;width:42px;height:32px;padding:0;border:none;outline:none;background:none;cursor:var(--kritzel-global-pointer-cursor, pointer);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)}.font-style-button.italic-text{font-style:italic}`;
+
+const KritzelFontFamily = /*@__PURE__*/ proxyCustomElement(class KritzelFontFamily extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.fontFamilyChange = createEvent(this, "fontFamilyChange");
+    }
+    fontOptions = [];
+    selectedFontFamily;
+    fontFamilyChange;
+    handleFontOptionsChange() {
+        this.ensureValidSelectedFont(this.resolveFontOptions());
+    }
+    componentWillLoad() {
+        this.ensureValidSelectedFont(this.resolveFontOptions());
+    }
+    handleDropdownValueChange = (event) => {
+        this.fontFamilyChange.emit(event.detail);
+    };
+    ensureValidSelectedFont(options) {
+        if (options.length === 0) {
+            return;
+        }
+        const normalizedSelected = this.selectedFontFamily?.trim().toLocaleLowerCase();
+        const isValidCurrentFont = options.some(opt => opt.value.trim().toLocaleLowerCase() === normalizedSelected);
+        if (!normalizedSelected || !isValidCurrentFont) {
+            this.selectedFontFamily = options[0].value;
+        }
+    }
+    resolveFontOptions() {
+        return this.fontOptions;
+    }
+    render() {
+        const fontOptions = this.resolveFontOptions();
+        const selectedOption = fontOptions.find(option => option.value === this.selectedFontFamily);
+        const selectedFontFamily = selectedOption?.cssFontFamily ?? this.selectedFontFamily;
+        const dropdownOptions = fontOptions.map(option => ({
+            value: option.value,
+            label: option.label,
+            style: { fontFamily: option.cssFontFamily ?? option.value },
+        }));
+        return (h(Host, { key: '059350f34370f7a291f47a42721ca5d9bb82df49' }, h("kritzel-dropdown", { key: 'fbd8cf1ae463c7e9b76d0ac754a41de54397058e', options: dropdownOptions, value: this.selectedFontFamily, onValueChanged: this.handleDropdownValueChange, selectStyles: { fontFamily: selectedFontFamily } })));
+    }
+    static get watchers() { return {
+        "fontOptions": [{
+                "handleFontOptionsChange": 0
+            }]
+    }; }
+    static get style() { return kritzelFontFamilyCss(); }
+}, [513, "kritzel-font-family", {
+        "fontOptions": [16],
+        "selectedFontFamily": [1025, "selected-font-family"]
+    }, undefined, {
+        "fontOptions": [{
+                "handleFontOptionsChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-font-family", "kritzel-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-font-family":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelFontFamily);
+            }
+            break;
+        case "kritzel-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelFontFamily as K, defineCustomElement as d };

package/dist/components/p-e6Zpc9Vp.js

@@ -1 +1,143 @@
-import{p as e,H as t,c as i,h as r,d as o,t as a}from"./p-B43upypT.js";import{d as s}from"./p-DX2nriaq.js";import{d as l}from"./p-Df3BwVGy.js";import{d as n}from"./p-CdR76C4L.js";import{d as p}from"./p-C4NrrUfN.js";import{d as c}from"./p-D09kgc5Q.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.exportPng=i(this,"exportPng"),this.exportSvg=i(this,"exportSvg"),this.exportJson=i(this,"exportJson")}workspaceName="workspace";terms={};isDialogOpen=!1;previewUrl;isLoading=!1;activeTab="viewport";exportFilename="";viewportExportFormat="png";exportPng;exportSvg;exportJson;get tabs(){return[{id:"viewport",label:this.terms["export.tabs.viewport"]??"Export Viewport"},{id:"workspace",label:this.terms["export.tabs.workspace"]??"Export Workspace"}]}viewportFormatOptions=[{value:"png",label:"PNG"},{value:"svg",label:"SVG"}];async open(e){this.previewUrl=e,this.activeTab="viewport",this.viewportExportFormat="png",this.exportFilename=this.generateDefaultFilename(),this.isDialogOpen=!0}generateDefaultFilename(){const e=(new Date).toISOString().replace(/[:.]/g,"-").slice(0,-5);return`${this.workspaceName}-${e}`}handleFilenameChange=e=>{this.exportFilename=e.detail};closeDialog=()=>{this.isDialogOpen=!1};handleTabChange=e=>{this.activeTab=e.detail};handleViewportFormatChange=e=>{this.viewportExportFormat=e.detail};handleExport=()=>{"viewport"===this.activeTab?"png"===this.viewportExportFormat?this.exportPng.emit():this.exportSvg.emit():this.exportJson.emit(this.exportFilename||this.generateDefaultFilename()),this.closeDialog()};renderViewportExport(){return r("div",{class:"export-tab-content"},this.previewUrl&&r("div",{class:"preview-container"},r("img",{src:this.previewUrl,alt:"Viewport Preview"})),r("kritzel-input",{label:this.terms["export.filename.label"]??"Filename",value:this.exportFilename,placeholder:this.terms["export.filename.placeholder"]??"Enter filename",suffix:`.${this.viewportExportFormat}`,onValueChange:this.handleFilenameChange}),r("div",{class:"format-selection"},r("label",null,this.terms["export.format.label"]??"Format"),r("kritzel-dropdown",{options:this.viewportFormatOptions,value:this.viewportExportFormat,forceOpenDirection:"up",onValueChanged:this.handleViewportFormatChange})))}renderWorkspaceExport(){return r("div",{class:"export-tab-content"},r("kritzel-input",{label:this.terms["export.filename.label"]??"Filename",value:this.exportFilename,placeholder:this.terms["export.filename.placeholder"]??"Enter filename",suffix:".json",onValueChange:this.handleFilenameChange}))}render(){return r(o,{key:"2f12ec7f4754e3f2aa0364809bdbde60102d76e4"},r("kritzel-dialog",{key:"0e5929e175ac41dd7f480aabaef2aa109a15f679",isOpen:this.isDialogOpen,dialogTitle:this.terms["export.dialogTitle"]??"Export",closable:!0,contained:!0,onDialogClose:this.closeDialog},r("div",{key:"6afffd8098e414c117582f3485dbaa348747eb4c",class:"export-content"},r("kritzel-pill-tabs",{key:"dd901f356e80fb71033311825e4d83af36b9c561",tabs:this.tabs,value:this.activeTab,onValueChange:this.handleTabChange}),"viewport"===this.activeTab&&this.renderViewportExport(),"workspace"===this.activeTab&&this.renderWorkspaceExport(),r("button",{key:"9fab5c1037cc9187c4f14c9534c8f395fde0d7cf",class:"export-primary-button",onClick:this.handleExport},this.terms["export.exportButton"]??"Export"))))}static get style(){return":host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:var(--kritzel-button-border-radius, 8px);font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}"}},[513,"kritzel-export",{workspaceName:[1,"workspace-name"],terms:[16],isDialogOpen:[32],previewUrl:[32],isLoading:[32],activeTab:[32],exportFilename:[32],viewportExportFormat:[32],open:[64]}]);function h(){"undefined"!=typeof customElements&&["kritzel-export","kritzel-dialog","kritzel-dropdown","kritzel-icon","kritzel-input","kritzel-pill-tabs"].forEach((e=>{switch(e){case"kritzel-export":customElements.get(a(e))||customElements.define(a(e),d);break;case"kritzel-dialog":customElements.get(a(e))||s();break;case"kritzel-dropdown":customElements.get(a(e))||l();break;case"kritzel-icon":customElements.get(a(e))||n();break;case"kritzel-input":customElements.get(a(e))||p();break;case"kritzel-pill-tabs":customElements.get(a(e))||c()}}))}export{d as K,h 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$5 } from './p-DX2nriaq.js';
+import { d as defineCustomElement$4 } from './p-Df3BwVGy.js';
+import { d as defineCustomElement$3 } from './p-CdR76C4L.js';
+import { d as defineCustomElement$2 } from './p-C4NrrUfN.js';
+import { d as defineCustomElement$1 } from './p-D09kgc5Q.js';
+
+const kritzelExportCss = () => `:host{display:flex;flex-direction:column;min-height:0}.export-content{display:flex;flex-direction:column;gap:16px;padding:0;flex:1}.export-content kritzel-pill-tabs{align-self:center}.export-tab-content{display:flex;flex-direction:column;gap:16px;min-height:330px}.format-selection{display:flex;flex-direction:column;gap:6px}.format-selection label{font-size:14px;font-weight:500;color:var(--kritzel-global-text-primary, #333)}.export-primary-button{width:100%;padding:12px 24px;background-color:var(--kritzel-global-primary-color, #007AFF);color:var(--kritzel-global-primary-text-color, #fff);border:none;border-radius:var(--kritzel-button-border-radius, 8px);font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease;-webkit-tap-highlight-color:transparent}.export-primary-button:hover{background-color:var(--kritzel-global-primary-hover-color, #0066d6)}.export-primary-button:focus-visible{outline:revert;outline-offset:revert}.preview-container{width:100%;display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin-bottom:8px}.preview-container img{max-width:100%;max-height:250px;object-fit:contain;box-shadow:0 4px 8px rgba(0, 0, 0, 0.15);border-radius:4px;border:1px solid var(--kritzel-global-border-color, #dbdbdb)}.export-content p{margin:0;color:var(--kritzel-global-text-secondary, #666)}@media (max-width: 576px){.export-tab-content{flex:1;min-height:0}}`;
+
+const KritzelExport = /*@__PURE__*/ proxyCustomElement(class KritzelExport extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.exportPng = createEvent(this, "exportPng");
+        this.exportSvg = createEvent(this, "exportSvg");
+        this.exportJson = createEvent(this, "exportJson");
+    }
+    /**
+     * The name of the current workspace, used as default filename
+     */
+    workspaceName = 'workspace';
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    isDialogOpen = false;
+    previewUrl;
+    isLoading = false;
+    activeTab = 'viewport';
+    exportFilename = '';
+    viewportExportFormat = 'png';
+    exportPng;
+    exportSvg;
+    exportJson;
+    get tabs() {
+        return [
+            { id: 'viewport', label: this.terms['export.tabs.viewport'] ?? 'Export Viewport' },
+            { id: 'workspace', label: this.terms['export.tabs.workspace'] ?? 'Export Workspace' },
+        ];
+    }
+    viewportFormatOptions = [
+        { value: 'png', label: 'PNG' },
+        { value: 'svg', label: 'SVG' },
+    ];
+    async open(previewUrl) {
+        this.previewUrl = previewUrl;
+        this.activeTab = 'viewport';
+        this.viewportExportFormat = 'png';
+        this.exportFilename = this.generateDefaultFilename();
+        this.isDialogOpen = true;
+    }
+    generateDefaultFilename() {
+        const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5);
+        return `${this.workspaceName}-${timestamp}`;
+    }
+    handleFilenameChange = (event) => {
+        this.exportFilename = event.detail;
+    };
+    closeDialog = () => {
+        this.isDialogOpen = false;
+    };
+    handleTabChange = (event) => {
+        this.activeTab = event.detail;
+    };
+    handleViewportFormatChange = (event) => {
+        this.viewportExportFormat = event.detail;
+    };
+    handleExport = () => {
+        if (this.activeTab === 'viewport') {
+            if (this.viewportExportFormat === 'png') {
+                this.exportPng.emit();
+            }
+            else {
+                this.exportSvg.emit();
+            }
+        }
+        else {
+            this.exportJson.emit(this.exportFilename || this.generateDefaultFilename());
+        }
+        this.closeDialog();
+    };
+    renderViewportExport() {
+        return (h("div", { class: "export-tab-content" }, this.previewUrl && (h("div", { class: "preview-container" }, h("img", { src: this.previewUrl, alt: "Viewport Preview" }))), h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: `.${this.viewportExportFormat}`, onValueChange: this.handleFilenameChange }), h("div", { class: "format-selection" }, h("label", null, this.terms['export.format.label'] ?? 'Format'), h("kritzel-dropdown", { options: this.viewportFormatOptions, value: this.viewportExportFormat, forceOpenDirection: "up", onValueChanged: this.handleViewportFormatChange }))));
+    }
+    renderWorkspaceExport() {
+        return (h("div", { class: "export-tab-content" }, h("kritzel-input", { label: this.terms['export.filename.label'] ?? 'Filename', value: this.exportFilename, placeholder: this.terms['export.filename.placeholder'] ?? 'Enter filename', suffix: ".json", onValueChange: this.handleFilenameChange })));
+    }
+    render() {
+        return (h(Host, { key: '2f12ec7f4754e3f2aa0364809bdbde60102d76e4' }, h("kritzel-dialog", { key: '0e5929e175ac41dd7f480aabaef2aa109a15f679', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '6afffd8098e414c117582f3485dbaa348747eb4c', class: "export-content" }, h("kritzel-pill-tabs", { key: 'dd901f356e80fb71033311825e4d83af36b9c561', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport(), h("button", { key: '9fab5c1037cc9187c4f14c9534c8f395fde0d7cf', class: "export-primary-button", onClick: this.handleExport }, this.terms['export.exportButton'] ?? 'Export')))));
+    }
+    static get style() { return kritzelExportCss(); }
+}, [513, "kritzel-export", {
+        "workspaceName": [1, "workspace-name"],
+        "terms": [16],
+        "isDialogOpen": [32],
+        "previewUrl": [32],
+        "isLoading": [32],
+        "activeTab": [32],
+        "exportFilename": [32],
+        "viewportExportFormat": [32],
+        "open": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-export", "kritzel-dialog", "kritzel-dropdown", "kritzel-icon", "kritzel-input", "kritzel-pill-tabs"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-export":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelExport);
+            }
+            break;
+        case "kritzel-dialog":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "kritzel-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-input":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-pill-tabs":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelExport as K, defineCustomElement as d };

package/dist/components/p-jGOpkGDl.js

@@ -1 +1,30 @@
-class i{static isTouchDevice(){return window.matchMedia("(any-pointer: coarse)").matches}static isAndroid(){return/android/i.test(navigator.userAgent)}static isIOS(){return/iPad|iPhone|iPod/.test(navigator.userAgent)}static detectOS(){return this.isIOS()?"iOS":this.isAndroid()?"Android":"Other"}static isMobile(){return this.isIOS()||this.isAndroid()}static isFirefox(){return/firefox/i.test(navigator.userAgent)}}export{i as K}
+class KritzelDevicesHelper {
+    static isTouchDevice() {
+        return window.matchMedia('(any-pointer: coarse)').matches;
+    }
+    static isAndroid() {
+        return /android/i.test(navigator.userAgent);
+    }
+    static isIOS() {
+        return /iPad|iPhone|iPod/.test(navigator.userAgent);
+    }
+    static detectOS() {
+        if (this.isIOS()) {
+            return 'iOS';
+        }
+        else if (this.isAndroid()) {
+            return 'Android';
+        }
+        else {
+            return 'Other';
+        }
+    }
+    static isMobile() {
+        return this.isIOS() || this.isAndroid();
+    }
+    static isFirefox() {
+        return /firefox/i.test(navigator.userAgent);
+    }
+}
+
+export { KritzelDevicesHelper as K };

package/dist/components/p-pagW8YF7.js

@@ -1 +1,99 @@
-import{p as i,H as t,c as r,h as o,d as e,t as a}from"./p-B43upypT.js";import{d as n}from"./p-CdR76C4L.js";const s=i(class extends t{constructor(i){super(),!1!==i&&this.__registerHost(),this.__attachShadow(),this.dismiss=r(this,"dismiss"),this.hoverChange=r(this,"hoverChange")}notification;showTimestamp=!0;locale;dismiss;hoverChange;handleDismissClick=i=>{i.stopPropagation(),this.dismiss.emit()};handleMouseEnter=()=>{this.hoverChange.emit(!0)};handleMouseLeave=()=>{this.hoverChange.emit(!1)};get type(){return this.notification?.type??"info"}get role(){return"error"===this.type?"alert":"status"}getTypeLabel(i){switch(i){case"warning":return"Warning";case"error":return"Error";default:return"Info"}}formatTimestamp(i){if(!i||!this.showTimestamp)return null;const t=i instanceof Date?i:new Date(i);return Number.isNaN(t.getTime())?null:new Intl.DateTimeFormat(this.locale,{dateStyle:"medium",timeStyle:"short"}).format(t)}render(){const i=this.notification;if(!i)return o(e,null);const t=this.type,r=this.formatTimestamp(i.timestamp);return o(e,null,o("article",{class:{card:!0,[`type-${t}`]:!0},role:this.role,"aria-live":"polite",onMouseEnter:this.handleMouseEnter,onMouseLeave:this.handleMouseLeave},o("header",{class:"card-header"},o("span",{class:"type-pill"},this.getTypeLabel(t)),o("div",{class:"header-right"},r&&o("time",{class:"timestamp",dateTime:i.timestamp?.toISOString()},r),o("button",{class:"dismiss-button",type:"button","aria-label":"Dismiss notification",onClick:this.handleDismissClick},o("kritzel-icon",{name:"x",size:16})))),o("p",{class:"message"},i.message)))}static get style(){return":host{display:block}.card{box-sizing:border-box;width:100%;max-width:var(--kritzel-notification-card-max-width, 360px);margin-inline:auto;font-family:var(--kritzel-font-family, sans-serif);padding:var(--kritzel-notification-card-padding, 12px 14px);border:var(--kritzel-notification-card-border, 1px solid #e5e7eb);border-radius:var(--kritzel-notification-card-border-radius, 12px);background-color:var(--kritzel-notification-card-background-color, #ffffff);color:var(--kritzel-notification-card-color, #111827);box-shadow:var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08))}.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-notification-card-header-gap, 8px);margin-bottom:var(--kritzel-notification-card-header-margin-bottom, 8px)}.header-right{display:inline-flex;align-items:center;gap:var(--kritzel-notification-card-header-right-gap, 6px)}.type-pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--kritzel-notification-card-pill-height, 22px);padding:var(--kritzel-notification-card-pill-padding, 0 8px);border-radius:var(--kritzel-notification-card-pill-border-radius, 999px);background-color:var(--kritzel-notification-card-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-pill-color, #1d4ed8);font-size:var(--kritzel-notification-card-pill-font-size, 12px);font-weight:var(--kritzel-notification-card-pill-font-weight, 600);line-height:1}.card.type-info .type-pill{background-color:var(--kritzel-notification-card-info-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-info-pill-color, #1d4ed8)}.card.type-warning .type-pill{background-color:var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);color:var(--kritzel-notification-card-warning-pill-color, #b45309)}.card.type-error .type-pill{background-color:var(--kritzel-notification-card-error-pill-background-color, #fef2f2);color:var(--kritzel-notification-card-error-pill-color, #b91c1c)}.timestamp{color:var(--kritzel-notification-card-timestamp-color, #6b7280);font-size:var(--kritzel-notification-card-timestamp-font-size, 12px);white-space:nowrap}.dismiss-button{display:inline-flex;align-items:center;justify-content:center;width:var(--kritzel-notification-card-dismiss-button-size, 24px);height:var(--kritzel-notification-card-dismiss-button-size, 24px);padding:0;border:none;border-radius:var(--kritzel-notification-card-dismiss-button-border-radius, 6px);background:var(--kritzel-notification-card-dismiss-button-background-color, transparent);color:var(--kritzel-notification-card-dismiss-button-color, #4b5563);cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.dismiss-button:hover{background:var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6)}.dismiss-button:active{background:var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb)}.dismiss-button:focus-visible{outline:revert}.message{margin:0;color:var(--kritzel-notification-card-message-color, inherit);font-size:var(--kritzel-notification-card-message-font-size, 14px);line-height:var(--kritzel-notification-card-message-line-height, 1.45);word-break:break-word}"}},[513,"kritzel-notification-card",{notification:[16],showTimestamp:[4,"show-timestamp"],locale:[1]}]);function c(){"undefined"!=typeof customElements&&["kritzel-notification-card","kritzel-icon"].forEach((i=>{switch(i){case"kritzel-notification-card":customElements.get(a(i))||customElements.define(a(i),s);break;case"kritzel-icon":customElements.get(a(i))||n()}}))}export{s 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-CdR76C4L.js';
+
+const kritzelNotificationCardCss = () => `:host{display:block}.card{box-sizing:border-box;width:100%;max-width:var(--kritzel-notification-card-max-width, 360px);margin-inline:auto;font-family:var(--kritzel-font-family, sans-serif);padding:var(--kritzel-notification-card-padding, 12px 14px);border:var(--kritzel-notification-card-border, 1px solid #e5e7eb);border-radius:var(--kritzel-notification-card-border-radius, 12px);background-color:var(--kritzel-notification-card-background-color, #ffffff);color:var(--kritzel-notification-card-color, #111827);box-shadow:var(--kritzel-notification-card-box-shadow, 0 8px 20px rgba(15, 23, 42, 0.08))}.card-header{display:flex;align-items:center;justify-content:space-between;gap:var(--kritzel-notification-card-header-gap, 8px);margin-bottom:var(--kritzel-notification-card-header-margin-bottom, 8px)}.header-right{display:inline-flex;align-items:center;gap:var(--kritzel-notification-card-header-right-gap, 6px)}.type-pill{display:inline-flex;align-items:center;justify-content:center;min-height:var(--kritzel-notification-card-pill-height, 22px);padding:var(--kritzel-notification-card-pill-padding, 0 8px);border-radius:var(--kritzel-notification-card-pill-border-radius, 999px);background-color:var(--kritzel-notification-card-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-pill-color, #1d4ed8);font-size:var(--kritzel-notification-card-pill-font-size, 12px);font-weight:var(--kritzel-notification-card-pill-font-weight, 600);line-height:1}.card.type-info .type-pill{background-color:var(--kritzel-notification-card-info-pill-background-color, #eff6ff);color:var(--kritzel-notification-card-info-pill-color, #1d4ed8)}.card.type-warning .type-pill{background-color:var(--kritzel-notification-card-warning-pill-background-color, #fff7ed);color:var(--kritzel-notification-card-warning-pill-color, #b45309)}.card.type-error .type-pill{background-color:var(--kritzel-notification-card-error-pill-background-color, #fef2f2);color:var(--kritzel-notification-card-error-pill-color, #b91c1c)}.timestamp{color:var(--kritzel-notification-card-timestamp-color, #6b7280);font-size:var(--kritzel-notification-card-timestamp-font-size, 12px);white-space:nowrap}.dismiss-button{display:inline-flex;align-items:center;justify-content:center;width:var(--kritzel-notification-card-dismiss-button-size, 24px);height:var(--kritzel-notification-card-dismiss-button-size, 24px);padding:0;border:none;border-radius:var(--kritzel-notification-card-dismiss-button-border-radius, 6px);background:var(--kritzel-notification-card-dismiss-button-background-color, transparent);color:var(--kritzel-notification-card-dismiss-button-color, #4b5563);cursor:var(--kritzel-global-pointer-cursor, pointer);-webkit-tap-highlight-color:transparent}.dismiss-button:hover{background:var(--kritzel-notification-card-dismiss-button-hover-background-color, #f3f4f6)}.dismiss-button:active{background:var(--kritzel-notification-card-dismiss-button-active-background-color, #e5e7eb)}.dismiss-button:focus-visible{outline:revert}.message{margin:0;color:var(--kritzel-notification-card-message-color, inherit);font-size:var(--kritzel-notification-card-message-font-size, 14px);line-height:var(--kritzel-notification-card-message-line-height, 1.45);word-break:break-word}`;
+
+const KritzelNotificationCard = /*@__PURE__*/ proxyCustomElement(class KritzelNotificationCard extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.dismiss = createEvent(this, "dismiss");
+        this.hoverChange = createEvent(this, "hoverChange");
+    }
+    /** Notification data rendered by this card. */
+    notification;
+    /** Whether a formatted timestamp should be displayed when available. */
+    showTimestamp = true;
+    /** Locale used for formatting the timestamp. */
+    locale;
+    /** Emitted when the notification should be dismissed manually. */
+    dismiss;
+    /** Emitted when pointer hover state changes. */
+    hoverChange;
+    handleDismissClick = (event) => {
+        event.stopPropagation();
+        this.dismiss.emit();
+    };
+    handleMouseEnter = () => {
+        this.hoverChange.emit(true);
+    };
+    handleMouseLeave = () => {
+        this.hoverChange.emit(false);
+    };
+    get type() {
+        return this.notification?.type ?? 'info';
+    }
+    get role() {
+        return this.type === 'error' ? 'alert' : 'status';
+    }
+    getTypeLabel(type) {
+        switch (type) {
+            case 'warning':
+                return 'Warning';
+            case 'error':
+                return 'Error';
+            default:
+                return 'Info';
+        }
+    }
+    formatTimestamp(timestamp) {
+        if (!timestamp || !this.showTimestamp) {
+            return null;
+        }
+        const date = timestamp instanceof Date ? timestamp : new Date(timestamp);
+        if (Number.isNaN(date.getTime())) {
+            return null;
+        }
+        return new Intl.DateTimeFormat(this.locale, {
+            dateStyle: 'medium',
+            timeStyle: 'short',
+        }).format(date);
+    }
+    render() {
+        const notification = this.notification;
+        if (!notification) {
+            return h(Host, null);
+        }
+        const type = this.type;
+        const timestamp = this.formatTimestamp(notification.timestamp);
+        return (h(Host, null, h("article", { class: { card: true, [`type-${type}`]: true }, role: this.role, "aria-live": "polite", onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("header", { class: "card-header" }, h("span", { class: "type-pill" }, this.getTypeLabel(type)), h("div", { class: "header-right" }, timestamp && (h("time", { class: "timestamp", dateTime: notification.timestamp?.toISOString() }, timestamp)), h("button", { class: "dismiss-button", type: "button", "aria-label": "Dismiss notification", onClick: this.handleDismissClick }, h("kritzel-icon", { name: "x", size: 16 })))), h("p", { class: "message" }, notification.message))));
+    }
+    static get style() { return kritzelNotificationCardCss(); }
+}, [513, "kritzel-notification-card", {
+        "notification": [16],
+        "showTimestamp": [4, "show-timestamp"],
+        "locale": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-notification-card", "kritzel-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-notification-card":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelNotificationCard);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelNotificationCard as K, defineCustomElement as d };