@kritzel/editor 0.4.31

package/dist/components/p-R1D8Sr0l.js

@@ -0,0 +1,299 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+
+const kritzelDropdownCss = () => `:host{display:inline-flex;vertical-align:middle;width:100%;position:relative}.dropdown-wrapper{display:flex;align-items:center;border:1px solid var(--kritzel-dropdown-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-border-radius, 6px);overflow:visible;height:38px;width:100%;position:relative}.dropdown-wrapper:hover:not(:focus-within){border-color:var(--kritzel-dropdown-hover-border-color, #cccccc)}.dropdown-container{flex:1;height:100%;min-width:0}.dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px;height:100%;width:100%;box-sizing:border-box;border-radius:var(--kritzel-dropdown-border-radius, 6px);border:none;background-color:var(--kritzel-dropdown-background, #ffffff);cursor:var(--kritzel-global-pointer-cursor, pointer);outline:none;font-size:inherit;font-family:inherit;color:var(--kritzel-dropdown-text-color, #333333);-webkit-tap-highlight-color:transparent;text-align:left}.dropdown-trigger:focus-visible{outline:revert}.dropdown-trigger.has-suffix-border{border-right:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-right-radius:0;border-bottom-right-radius:0}.dropdown-trigger.has-prefix-border{border-left:1px solid var(--kritzel-global-border-color, #ebebeb);border-top-left-radius:0;border-bottom-left-radius:0}.dropdown-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.dropdown-trigger-arrow{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;transition:transform 0.2s ease}.dropdown-trigger-arrow svg{width:100%;height:100%}.dropdown-trigger.is-open .dropdown-trigger-arrow{transform:rotate(180deg)}.dropdown-trigger.is-open.open-up .dropdown-trigger-arrow{transform:rotate(0deg)}.dropdown-menu{position:absolute;left:0;right:0;margin:0;padding:4px 0;list-style:none;background-color:var(--kritzel-dropdown-background, #ffffff);border:1px solid var(--kritzel-global-border-color, #ebebeb);border-radius:var(--kritzel-dropdown-menu-border-radius, var(--kritzel-dropdown-border-radius, 6px));box-shadow:var(--kritzel-toolbar-box-shadow, 0 4px 12px rgba(0, 0, 0, 0.15));z-index:1000;max-height:240px;overflow-y:auto;opacity:0;visibility:hidden;transition:opacity 0.15s ease,      transform 0.15s ease,      visibility 0.15s;outline:none}.dropdown-menu.open-down{top:calc(100% + 4px);bottom:auto;transform:translateY(-8px)}.dropdown-menu.open-up{bottom:calc(100% + 4px);top:auto;transform:translateY(8px)}.dropdown-menu.is-open{opacity:1;visibility:inherit;transform:translateY(0)}.dropdown-menu.open-up{box-shadow:var(--kritzel-toolbar-box-shadow, 0 -4px 12px rgba(0, 0, 0, 0.15))}.dropdown-option{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;cursor:var(--kritzel-global-pointer-cursor, pointer);color:var(--kritzel-dropdown-text-color, #333333);transition:background-color 0.1s ease;-webkit-tap-highlight-color:transparent}.dropdown-option.is-focused{background-color:var(--kritzel-dropdown-hover-background-color, #f0f0f0)}.dropdown-option.is-selected{font-weight:600;background-color:var(--kritzel-dropdown-selected-background-color, #007bff1a)}.dropdown-option-check{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--kritzel-dropdown-accent-color, #007bff)}.dropdown-option-check svg{width:100%;height:100%}.dropdown-menu{scrollbar-color:var(--kritzel-global-scrollbar-thumb-color, #ebebeb) transparent;scrollbar-width:thin}::slotted(*){height:100%;box-sizing:border-box}`;
+
+const KritzelDropdown = /*@__PURE__*/ proxyCustomElement(class KritzelDropdown extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChanged = createEvent(this, "valueChanged");
+    }
+    get el() { return this; }
+    options = [];
+    optionsChanged() {
+        this.updateInternalValue(this.internalValue, true);
+    }
+    value;
+    externalValueChanged(newValue) {
+        if (newValue !== this.internalValue) {
+            this.updateInternalValue(newValue, false);
+        }
+    }
+    width;
+    selectStyles = {};
+    /** Force the dropdown to open in a specific direction instead of auto-detecting */
+    forceOpenDirection;
+    internalValue;
+    hasSuffixContent = false;
+    hasPrefixContent = false;
+    isOpen = false;
+    focusedIndex = -1;
+    openDirection = 'down';
+    valueChanged;
+    suffixSlotElement;
+    prefixSlotElement;
+    triggerElement;
+    menuElement;
+    wrapperElement;
+    componentWillLoad() {
+        this.updateInternalValue(this.value, false);
+        this.evaluateSuffixContent();
+        this.evaluatePrefixContent();
+    }
+    disconnectedCallback() {
+        // Close menu when component is removed from DOM to prevent orphaned open dropdowns
+        if (this.isOpen) {
+            this.isOpen = false;
+        }
+    }
+    handleDocumentClick(event) {
+        if (this.isOpen && !this.el.contains(event.target)) {
+            this.closeMenu();
+        }
+    }
+    handleDocumentKeydown(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            event.stopPropagation();
+            event.preventDefault();
+            this.closeMenu();
+            this.triggerElement?.focus();
+        }
+    }
+    updateInternalValue(proposedValue, emitChange) {
+        let finalValue = proposedValue;
+        // Only fall back to an option if the proposed value is completely missing.
+        // We intentionally don't sanitize invalid values here, to allow for values 
+        // that might be added to options asynchronously later (preventing race conditions).
+        if (!finalValue && this.options && this.options.length > 0) {
+            finalValue = this.options[0].value;
+        }
+        else if (!finalValue) {
+            finalValue = undefined;
+        }
+        if (this.internalValue !== finalValue) {
+            this.internalValue = finalValue;
+            if (emitChange || (proposedValue !== finalValue && proposedValue !== undefined)) {
+                this.valueChanged.emit(this.internalValue);
+            }
+        }
+    }
+    toggleMenu = () => {
+        if (this.isOpen) {
+            this.closeMenu();
+        }
+        else {
+            this.openMenu();
+        }
+    };
+    openMenu = () => {
+        this.calculateMenuDirection();
+        this.isOpen = true;
+        const currentIndex = this.options.findIndex(opt => opt.value === this.internalValue);
+        this.focusedIndex = currentIndex >= 0 ? currentIndex : 0;
+        // Focus the menu after it opens
+        requestAnimationFrame(() => {
+            this.menuElement?.focus();
+        });
+    };
+    calculateMenuDirection = () => {
+        if (this.forceOpenDirection) {
+            this.openDirection = this.forceOpenDirection;
+            return;
+        }
+        if (!this.wrapperElement) {
+            this.openDirection = 'down';
+            return;
+        }
+        const wrapperRect = this.wrapperElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const spaceBelow = viewportHeight - wrapperRect.bottom;
+        const spaceAbove = wrapperRect.top;
+        // Estimate menu height (max 240px or fewer based on options)
+        const estimatedOptionHeight = 36; // padding + content
+        const menuPadding = 8; // 4px top + 4px bottom
+        const estimatedMenuHeight = Math.min(240, this.options.length * estimatedOptionHeight + menuPadding);
+        // Prefer opening downward, but switch to upward if not enough space below
+        // and there's more space above
+        if (spaceBelow < estimatedMenuHeight && spaceAbove > spaceBelow) {
+            this.openDirection = 'up';
+        }
+        else {
+            this.openDirection = 'down';
+        }
+    };
+    closeMenu = () => {
+        this.isOpen = false;
+        this.focusedIndex = -1;
+        // Note: openDirection is intentionally NOT reset here to allow the close animation
+        // to play in the same direction the menu was opened
+    };
+    selectOption = (option) => {
+        if (this.internalValue !== option.value) {
+            this.internalValue = option.value;
+            this.valueChanged.emit(this.internalValue);
+        }
+        this.closeMenu();
+        this.triggerElement?.focus();
+    };
+    handleTriggerKeyDown = (event) => {
+        switch (event.key) {
+            case 'Enter':
+            case ' ':
+            case 'ArrowDown':
+            case 'ArrowUp':
+                event.preventDefault();
+                this.openMenu();
+                break;
+        }
+    };
+    handleMenuKeyDown = (event) => {
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                this.focusedIndex = Math.min(this.focusedIndex + 1, this.options.length - 1);
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                this.focusedIndex = Math.max(this.focusedIndex - 1, 0);
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if (this.focusedIndex >= 0 && this.focusedIndex < this.options.length) {
+                    this.selectOption(this.options[this.focusedIndex]);
+                }
+                break;
+            case 'Home':
+                event.preventDefault();
+                this.focusedIndex = 0;
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'End':
+                event.preventDefault();
+                this.focusedIndex = this.options.length - 1;
+                this.scrollFocusedOptionIntoView();
+                break;
+            case 'Tab':
+                this.closeMenu();
+                break;
+        }
+    };
+    scrollFocusedOptionIntoView = () => {
+        if (!this.menuElement || this.focusedIndex < 0) {
+            return;
+        }
+        // Use requestAnimationFrame to ensure the DOM has updated with the new focused class
+        requestAnimationFrame(() => {
+            const focusedOption = this.menuElement?.querySelector('.dropdown-option.is-focused');
+            if (focusedOption) {
+                focusedOption.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+            }
+        });
+    };
+    handleOptionMouseEnter = (index) => {
+        this.focusedIndex = index;
+    };
+    evaluateSuffixContent = () => {
+        if (this.suffixSlotElement) {
+            const newHasContent = this.suffixSlotElement.assignedNodes({ flatten: true }).length > 0;
+            if (this.hasSuffixContent !== newHasContent) {
+                this.hasSuffixContent = newHasContent;
+            }
+        }
+        else if (this.hasSuffixContent !== false) {
+            this.hasSuffixContent = false;
+        }
+    };
+    evaluatePrefixContent = () => {
+        if (this.prefixSlotElement) {
+            const newHasContent = this.prefixSlotElement.assignedNodes({ flatten: true }).length > 0;
+            if (this.hasPrefixContent !== newHasContent) {
+                this.hasPrefixContent = newHasContent;
+            }
+        }
+        else if (this.hasPrefixContent !== false) {
+            this.hasPrefixContent = false;
+        }
+    };
+    getSelectedLabel() {
+        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
+        return selectedOption?.label ?? '';
+    }
+    getSelectedStyle() {
+        const selectedOption = this.options.find(opt => opt.value === this.internalValue);
+        return selectedOption?.style;
+    }
+    render() {
+        const triggerClasses = {
+            'dropdown-trigger': true,
+            'has-suffix-border': this.hasSuffixContent,
+            'has-prefix-border': this.hasPrefixContent,
+            'is-open': this.isOpen,
+            'open-up': this.openDirection === 'up',
+        };
+        const menuClasses = {
+            'dropdown-menu': true,
+            'is-open': this.isOpen,
+            'open-up': this.openDirection === 'up',
+            'open-down': this.openDirection === 'down',
+        };
+        return (h(Host, { key: '66ec6cbffa9fd25a7bad62d6e3477c0fe7726861' }, h("div", { key: '6dc1f20070dde95ab54f44d158659e99bd81b834', class: "dropdown-wrapper", ref: el => (this.wrapperElement = el) }, h("slot", { key: 'd9655fc7f5e6a0d74b4a1904a12cc0bf478ccf4e', name: "prefix", ref: el => (this.prefixSlotElement = el), onSlotchange: this.evaluatePrefixContent }), h("div", { key: '325af053df9588e99b493c422a1f369f0af2243a', class: "dropdown-container", style: { width: this.width } }, h("button", { key: '626d54cd8e01221b1cd61e61b9d53b534e7603db', type: "button", class: triggerClasses, style: { ...this.selectStyles, ...this.getSelectedStyle() }, onClick: this.toggleMenu, onKeyDown: this.handleTriggerKeyDown, "aria-haspopup": "listbox", "aria-expanded": this.isOpen ? 'true' : 'false', ref: el => (this.triggerElement = el) }, h("span", { key: 'bbc3ec7297ee98c1903cfd547ca20daf3a5f1311', class: "dropdown-trigger-label" }, this.getSelectedLabel()), h("span", { key: '591b71aec72d2e6eaa96e8eb4c91b1f34eb2177a', class: "dropdown-trigger-arrow", "aria-hidden": "true" }, h("svg", { key: '317034d40ceab9ca72090f6a58fc0fa5b92f2db0', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { key: '98867959ff1d7fd5515a3fe400bdc2378013dcb9', points: "6 9 12 15 18 9" }))))), h("slot", { key: 'f9d2f73f7b233a30f57ba4a9209e1a32a8ee5e70', name: "suffix", ref: el => (this.suffixSlotElement = el), onSlotchange: this.evaluateSuffixContent }), h("ul", { key: 'f15048910c0d24855fb1e940d2adc994dee83d06', class: menuClasses, role: "listbox", tabindex: "-1", onKeyDown: this.handleMenuKeyDown, ref: el => (this.menuElement = el) }, this.options.map((option, index) => {
+            const isSelected = option.value === this.internalValue;
+            const isFocused = index === this.focusedIndex;
+            const optionClasses = {
+                'dropdown-option': true,
+                'is-selected': isSelected,
+                'is-focused': isFocused,
+            };
+            return (h("li", { class: optionClasses, role: "option", "aria-selected": isSelected ? 'true' : 'false', style: option.style, onClick: () => this.selectOption(option), onMouseEnter: () => this.handleOptionMouseEnter(index) }, option.label, isSelected && (h("span", { class: "dropdown-option-check", "aria-hidden": "true" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("polyline", { points: "20 6 9 17 4 12" }))))));
+        })))));
+    }
+    static get watchers() { return {
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "value": [{
+                "externalValueChanged": 0
+            }]
+    }; }
+    static get style() { return kritzelDropdownCss(); }
+}, [769, "kritzel-dropdown", {
+        "options": [16],
+        "value": [1],
+        "width": [1],
+        "selectStyles": [16],
+        "forceOpenDirection": [1, "force-open-direction"],
+        "internalValue": [32],
+        "hasSuffixContent": [32],
+        "hasPrefixContent": [32],
+        "isOpen": [32],
+        "focusedIndex": [32],
+        "openDirection": [32]
+    }, [[4, "click", "handleDocumentClick"], [4, "keydown", "handleDocumentKeydown"]], {
+        "options": [{
+                "optionsChanged": 0
+            }],
+        "value": [{
+                "externalValueChanged": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-dropdown"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelDropdown);
+            }
+            break;
+    } });
+}
+
+export { KritzelDropdown as K, defineCustomElement as d };

package/dist/components/p-SLnqczCS.js

@@ -0,0 +1,49 @@
+import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-5qkOM1RJ.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: '2bacbc19d9469c7fcaf5d6b1b3133ec14d3ff864' }, h("a", { key: '2de44e340afd092ed388b7575350af1ee9155d58', 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-hQwVRh0t.js

@@ -0,0 +1,147 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+import { d as defineCustomElement$5 } from './p-peZjvnkK.js';
+import { d as defineCustomElement$4 } from './p-R1D8Sr0l.js';
+import { d as defineCustomElement$3 } from './p-BGmTmdLe.js';
+import { d as defineCustomElement$2 } from './p-B5xYV1o3.js';
+import { d as defineCustomElement$1 } from './p-B_gT0lCn.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;
+    }
+    async close() {
+        this.closeDialog();
+    }
+    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: '60baf80591c9456aa32443a43f9af102ed711494' }, h("kritzel-dialog", { key: 'f8c744284000b356dc9c3de12252c0358909c9de', isOpen: this.isDialogOpen, dialogTitle: this.terms['export.dialogTitle'] ?? 'Export', closable: true, contained: true, onDialogClose: this.closeDialog }, h("div", { key: '9f5f5e56302cc9c1d1c173757fe720871e085ca0', class: "export-content" }, h("kritzel-pill-tabs", { key: '3976ad59d19c90c8d1a605815cb7d90cebede5e3', tabs: this.tabs, value: this.activeTab, onValueChange: this.handleTabChange }), this.activeTab === 'viewport' && this.renderViewportExport(), this.activeTab === 'workspace' && this.renderWorkspaceExport()), h("div", { key: '992dad8deb946feebd453d452f0e7338dbdb2236', slot: "footer" }, h("button", { key: '8c9d907a82a45e9ad2b48618ff6e812c804d7252', 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],
+        "close": [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-h_uh_Njf.js

@@ -0,0 +1,63 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-5qkOM1RJ.js';
+
+const kritzelOpacitySliderCss = () => `:host{display:flex;flex-direction:column;padding:0;box-sizing:border-box}.opacity-container{display:flex;align-items:center;width:232px}.slider-wrapper{flex:1;display:flex;align-items:center}.opacity-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;background:linear-gradient(      to right,      var(--kritzel-opacity-slider-active-color, #007AFF) 0%,      var(--kritzel-opacity-slider-active-color, #007AFF) var(--slider-progress, 100%),      var(--kritzel-opacity-slider-track-color, #e0e0e0) var(--slider-progress, 100%),      var(--kritzel-opacity-slider-track-color, #e0e0e0) 100%    );outline:none;cursor:var(--kritzel-global-pointer-cursor, pointer)}.opacity-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--kritzel-opacity-slider-thumb-color, #ffffff);border:2px solid var(--kritzel-opacity-slider-thumb-border-color, #007AFF);cursor:var(--kritzel-global-pointer-cursor, pointer);box-shadow:0 1px 3px rgba(0, 0, 0, 0.2);transition:transform 0.1s ease}.opacity-slider::-moz-range-thumb:hover{transform:scale(1.1)}.opacity-slider::-moz-range-track{height:6px;border-radius:3px;background:transparent}.opacity-slider:focus{outline:none}.opacity-slider:focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}.opacity-slider:focus::-moz-range-thumb{box-shadow:0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3))}`;
+
+const KritzelOpacitySlider = /*@__PURE__*/ proxyCustomElement(class KritzelOpacitySlider extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.valueChange = createEvent(this, "valueChange");
+    }
+    /** Current opacity value (0 to 1) */
+    value = 1;
+    /** Minimum opacity value */
+    min = 0;
+    /** Maximum opacity value */
+    max = 1;
+    /** Step increment */
+    step = 0.01;
+    /** Color to display in the preview (optional) */
+    previewColor = '#000000';
+    valueChange;
+    handleInput(event) {
+        const input = event.target;
+        const newValue = parseFloat(input.value);
+        this.value = newValue;
+        this.valueChange.emit(newValue);
+    }
+    getPercentage() {
+        return Math.round(this.value * 100);
+    }
+    render() {
+        const percentage = this.getPercentage();
+        return (h(Host, { key: '6de0826f246bd01ec2230aac0820439059ad73c9' }, h("div", { key: 'f1f00e8e6162a8731ddeb5a857475d189ba803b1', class: "opacity-container" }, h("div", { key: '964d210f3509480756fc20795a00bda5fcfa0fb7', class: "slider-wrapper" }, h("input", { key: '40123306802ac13259e1ccd98f04739ecafbb3b4', type: "range", class: "opacity-slider", min: this.min, max: this.max, step: this.step, value: this.value, onInput: (e) => this.handleInput(e), style: {
+                '--slider-progress': `${percentage}%`,
+                '--kritzel-opacity-slider-thumb-border-color': this.previewColor,
+            } })))));
+    }
+    static get style() { return kritzelOpacitySliderCss(); }
+}, [513, "kritzel-opacity-slider", {
+        "value": [1026],
+        "min": [2],
+        "max": [2],
+        "step": [2],
+        "previewColor": [1, "preview-color"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-opacity-slider"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-opacity-slider":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelOpacitySlider);
+            }
+            break;
+    } });
+}
+
+export { KritzelOpacitySlider as K, defineCustomElement as d };