kritzel-stencil 0.4.3 → 0.4.5

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-U6uE85Qx.js

@@ -0,0 +1,320 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { a as CURRENT_WORKSPACE_SCHEMA_VERSION, C as CURRENT_APP_STATE_SCHEMA_VERSION } from './p-CW-VyJgK.js';
+import { d as defineCustomElement$6 } from './p-DX2nriaq.js';
+import { d as defineCustomElement$5 } from './p-Df3BwVGy.js';
+import { d as defineCustomElement$4 } from './p-CdR76C4L.js';
+import { d as defineCustomElement$3 } from './p-BsANVili.js';
+import { d as defineCustomElement$2 } from './p-BDzlx2hB.js';
+import { d as defineCustomElement$1 } from './p-CWRSGYOE.js';
+
+/**
+ * The current version of the Kritzel library.
+ * This file is auto-generated by the version bump scripts.
+ * Do not modify manually.
+ */
+const KRITZEL_VERSION = '0.4.5';
+
+const kritzelSettingsCss = () => `:host{display:contents}kritzel-dialog{--kritzel-dialog-body-padding:0;--kritzel-dialog-width-large:800px;--kritzel-dialog-height-large:500px}.footer-button{padding:8px 16px;border-radius:6px;cursor:pointer;font-size:14px}.cancel-button{border:1px solid #ebebeb;background:#fff;color:inherit}.cancel-button:hover{background:#f5f5f5}.settings-content{padding:0}.settings-content h3{margin:0 0 16px 0;font-size:18px;font-weight:600;color:var(--kritzel-settings-content-heading-color, #333333)}.settings-content p{margin:0;font-size:14px;color:var(--kritzel-settings-content-text-color, #666666);line-height:1.5}.settings-group{display:flex;flex-direction:column;gap:24px}.settings-item{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.settings-description{font-size:12px;color:var(--kritzel-settings-description-color, #888888);margin:0;line-height:1.4}.shortcuts-list{display:flex;flex-direction:column;gap:24px}.shortcuts-category{display:flex;flex-direction:column;gap:8px}.shortcuts-category-title{font-size:14px;font-weight:600;color:var(--kritzel-settings-label-color, #333333);margin:0 0 4px 0}.shortcuts-group{display:flex;flex-direction:column;gap:4px}.shortcut-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-item-bg, rgba(0, 0, 0, 0.02))}.shortcut-label{font-size:14px;color:var(--kritzel-settings-content-text-color, #666666)}.shortcut-key{font-family:monospace;font-size:12px;padding:2px 8px;border-radius:4px;background:var(--kritzel-settings-shortcut-key-bg, #f0f0f0);color:var(--kritzel-settings-shortcut-key-color, #333333);border:1px solid var(--kritzel-settings-shortcut-key-border, #ddd)}`;
+
+const DEFAULT_SCALE_MIN = 0.0001;
+const DEFAULT_SCALE_MAX = 1000;
+const DEFAULT_LOCK_DRAWING_SCALE = true;
+const DEFAULT_VIEWPORT_BOUNDARY_LEFT = -Infinity;
+const DEFAULT_VIEWPORT_BOUNDARY_RIGHT = Infinity;
+const DEFAULT_VIEWPORT_BOUNDARY_TOP = -Infinity;
+const DEFAULT_VIEWPORT_BOUNDARY_BOTTOM = Infinity;
+const DEFAULT_DEBUG_INFO = {
+    showViewportInfo: false,
+    showObjectInfo: false,
+    showSyncProviderInfo: true,
+    showMigrationInfo: true,
+    showAssetResolverInfo: false,
+};
+const SETTINGS_CATEGORY_IDS = ['general', 'viewport', 'shortcuts', 'developer', 'about'];
+const KritzelSettings = /*@__PURE__*/ proxyCustomElement(class KritzelSettings extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.settingsChange = createEvent(this, "settingsChange");
+    }
+    get host() { return this; }
+    /** Keyboard shortcuts to display in the settings dialog */
+    availableThemes = ['light', 'dark'];
+    /** Available locales as `{ code, label }` options for the language selector. */
+    availableLocales = [];
+    shortcuts = [];
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    /** Current settings values. Used to initialize and sync the component's internal state. */
+    settings;
+    onSettingsPropChange(newSettings) {
+        if (newSettings) {
+            this.applySettings(newSettings);
+        }
+    }
+    isDialogOpen = false;
+    selectedCategoryId = SETTINGS_CATEGORY_IDS[0];
+    scaleMin = DEFAULT_SCALE_MIN;
+    scaleMax = DEFAULT_SCALE_MAX;
+    lockDrawingScale = DEFAULT_LOCK_DRAWING_SCALE;
+    theme = 'light';
+    locale = 'en';
+    viewportBoundaryLeft = DEFAULT_VIEWPORT_BOUNDARY_LEFT;
+    viewportBoundaryRight = DEFAULT_VIEWPORT_BOUNDARY_RIGHT;
+    viewportBoundaryTop = DEFAULT_VIEWPORT_BOUNDARY_TOP;
+    viewportBoundaryBottom = DEFAULT_VIEWPORT_BOUNDARY_BOTTOM;
+    debugInfo = { ...DEFAULT_DEBUG_INFO };
+    /** Emitted when settings change */
+    settingsChange;
+    componentWillLoad() {
+        if (this.settings) {
+            this.applySettings(this.settings);
+        }
+    }
+    applySettings(settings) {
+        if (typeof settings.scaleMin === 'number') {
+            this.scaleMin = settings.scaleMin;
+        }
+        if (typeof settings.scaleMax === 'number') {
+            this.scaleMax = settings.scaleMax;
+        }
+        if (typeof settings.lockDrawingScale === 'boolean') {
+            this.lockDrawingScale = settings.lockDrawingScale;
+        }
+        if (typeof settings.theme === 'string') {
+            this.theme = settings.theme;
+        }
+        if (typeof settings.locale === 'string') {
+            this.locale = settings.locale;
+        }
+        if (typeof settings.viewportBoundaryLeft === 'number') {
+            this.viewportBoundaryLeft = settings.viewportBoundaryLeft;
+        }
+        if (typeof settings.viewportBoundaryRight === 'number') {
+            this.viewportBoundaryRight = settings.viewportBoundaryRight;
+        }
+        if (typeof settings.viewportBoundaryTop === 'number') {
+            this.viewportBoundaryTop = settings.viewportBoundaryTop;
+        }
+        if (typeof settings.viewportBoundaryBottom === 'number') {
+            this.viewportBoundaryBottom = settings.viewportBoundaryBottom;
+        }
+        if (settings.debugInfo) {
+            this.debugInfo = { ...DEFAULT_DEBUG_INFO, ...settings.debugInfo };
+        }
+    }
+    emitSettings() {
+        const settings = {
+            scaleMin: this.scaleMin,
+            scaleMax: this.scaleMax,
+            lockDrawingScale: this.lockDrawingScale,
+            theme: this.theme,
+            locale: this.locale,
+            viewportBoundaryLeft: this.viewportBoundaryLeft,
+            viewportBoundaryRight: this.viewportBoundaryRight,
+            viewportBoundaryTop: this.viewportBoundaryTop,
+            viewportBoundaryBottom: this.viewportBoundaryBottom,
+            debugInfo: this.debugInfo,
+        };
+        this.settingsChange.emit(settings);
+    }
+    handleScaleMinChange = (event) => {
+        this.scaleMin = event.detail;
+        this.emitSettings();
+    };
+    handleScaleMaxChange = (event) => {
+        this.scaleMax = event.detail;
+        this.emitSettings();
+    };
+    handleLockDrawingScaleChange = (event) => {
+        this.lockDrawingScale = event.detail;
+        this.emitSettings();
+    };
+    handleThemeChange = (event) => {
+        this.theme = event.detail;
+        this.emitSettings();
+    };
+    handleLocaleChange = (event) => {
+        this.locale = event.detail;
+        this.emitSettings();
+    };
+    handleViewportBoundaryLeftChange = (event) => {
+        this.viewportBoundaryLeft = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_LEFT;
+        this.emitSettings();
+    };
+    handleViewportBoundaryRightChange = (event) => {
+        this.viewportBoundaryRight = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_RIGHT;
+        this.emitSettings();
+    };
+    handleViewportBoundaryTopChange = (event) => {
+        this.viewportBoundaryTop = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_TOP;
+        this.emitSettings();
+    };
+    handleViewportBoundaryBottomChange = (event) => {
+        this.viewportBoundaryBottom = event.detail ?? DEFAULT_VIEWPORT_BOUNDARY_BOTTOM;
+        this.emitSettings();
+    };
+    handleDebugInfoChange = (key) => (event) => {
+        this.debugInfo = { ...this.debugInfo, [key]: event.detail };
+        this.emitSettings();
+    };
+    async open() {
+        this.isDialogOpen = true;
+    }
+    closeDialog = () => {
+        this.isDialogOpen = false;
+    };
+    handleCategorySelect = (event) => {
+        this.selectedCategoryId = event.detail.item.id;
+    };
+    formatKeyCombo(shortcut) {
+        const parts = [];
+        if (shortcut.ctrl)
+            parts.push('Ctrl');
+        if (shortcut.shift)
+            parts.push('Shift');
+        parts.push(this.formatKey(shortcut.key));
+        return parts.join('+');
+    }
+    formatKey(key) {
+        const keyMap = {
+            'Escape': 'Esc',
+            'Delete': 'Del',
+            ' ': 'Space',
+        };
+        return keyMap[key] ?? key.toUpperCase();
+    }
+    groupShortcutsByCategory() {
+        const grouped = new Map();
+        for (const shortcut of this.shortcuts) {
+            const existing = grouped.get(shortcut.category) || [];
+            existing.push(shortcut);
+            grouped.set(shortcut.category, existing);
+        }
+        return grouped;
+    }
+    /**
+     * Resolves a localized string from the supplied {@link terms} map, falling
+     * back to the provided English default when the key is missing.
+     */
+    t(key, fallback) {
+        return this.terms[key] ?? fallback;
+    }
+    get categories() {
+        const icons = {
+            general: 'settings',
+            viewport: 'viewport',
+            shortcuts: 'command',
+            developer: 'braces',
+            about: 'info',
+        };
+        const labels = {
+            general: { key: 'settings.categories.general', fallback: 'General' },
+            viewport: { key: 'settings.categories.viewport', fallback: 'Viewport' },
+            shortcuts: { key: 'settings.categories.shortcuts', fallback: 'Keyboard Shortcuts' },
+            developer: { key: 'settings.categories.developer', fallback: 'Developer Options' },
+            about: { key: 'settings.categories.about', fallback: 'About' },
+        };
+        return SETTINGS_CATEGORY_IDS.map(id => ({
+            id,
+            label: this.t(labels[id].key, labels[id].fallback),
+            icon: icons[id],
+        }));
+    }
+    renderCategoryContent() {
+        switch (this.selectedCategoryId) {
+            case 'general':
+                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.general.title', 'General Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.theme.label', 'Theme')), h("p", { class: "settings-description" }, this.t('settings.general.theme.description', 'Select a registered color theme for the editor interface.')), h("kritzel-dropdown", { options: this.availableThemes.map(t => ({ value: t, label: t })), value: this.theme, onValueChanged: this.handleThemeChange })), this.availableLocales.length > 0 && (h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.language.label', 'Language')), h("p", { class: "settings-description" }, this.t('settings.general.language.description', 'Select the display language for the editor interface.')), h("kritzel-dropdown", { options: this.availableLocales.map(l => ({ value: l.code, label: l.label })), value: this.locale, onValueChanged: this.handleLocaleChange }))), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale')), h("p", { class: "settings-description" }, this.t('settings.general.lockDrawingScale.description', 'When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level.')), h("kritzel-slide-toggle", { checked: this.lockDrawingScale, label: this.t('settings.general.lockDrawingScale.label', 'Lock Drawing Scale'), onCheckedChange: this.handleLockDrawingScaleChange })))));
+            case 'viewport':
+                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.viewport.title', 'Viewport Settings')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.minZoom.label', 'Minimum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.minZoom.description', 'Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas.')), h("kritzel-numeric-input", { value: this.scaleMin, min: 0.0001, max: 1, step: 0.0001, onValueChange: this.handleScaleMinChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.maxZoom.label', 'Maximum Zoom Level')), h("p", { class: "settings-description" }, this.t('settings.viewport.maxZoom.description', 'Sets the maximum zoom level. Higher values allow zooming in closer for detailed work.')), h("kritzel-numeric-input", { value: this.scaleMax, min: 1, max: 1000, step: 1, onValueChange: this.handleScaleMaxChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryLeft.label', 'Viewport Boundary Left')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryLeft.description', 'Left boundary in world coordinates. Set to limit how far left the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryLeft, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryLeftChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryRight.label', 'Viewport Boundary Right')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryRight.description', 'Right boundary in world coordinates. Set to limit how far right the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryRight, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryRightChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryTop.label', 'Viewport Boundary Top')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryTop.description', 'Top boundary in world coordinates. Set to limit how far up the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryTop, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryTopChange })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.viewport.boundaryBottom.label', 'Viewport Boundary Bottom')), h("p", { class: "settings-description" }, this.t('settings.viewport.boundaryBottom.description', 'Bottom boundary in world coordinates. Set to limit how far down the viewport can pan.')), h("kritzel-numeric-input", { value: this.viewportBoundaryBottom, step: 100, placeholder: this.t('settings.viewport.boundaryPlaceholder', 'Infinite'), onValueChange: this.handleViewportBoundaryBottomChange })))));
+            case 'shortcuts':
+                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.shortcuts.title', 'Keyboard Shortcuts')), h("div", { class: "shortcuts-list" }, Array.from(this.groupShortcutsByCategory()).map(([category, shortcuts]) => (h("div", { class: "shortcuts-category", key: category }, h("h4", { class: "shortcuts-category-title" }, category), h("div", { class: "shortcuts-group" }, shortcuts.map(shortcut => (h("div", { class: "shortcut-item", key: shortcut.key + shortcut.label }, h("span", { class: "shortcut-label" }, shortcut.label), h("kbd", { class: "shortcut-key" }, this.formatKeyCombo(shortcut))))))))))));
+            case 'developer':
+                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.developer.title', 'Developer Options')), h("div", { class: "settings-group" }, h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showViewportInfo.description', 'Display viewport debug information such as position, zoom level, and boundaries.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showViewportInfo, label: this.t('settings.developer.showViewportInfo.label', 'Show Viewport Info'), onCheckedChange: this.handleDebugInfoChange('showViewportInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showObjectInfo.label', 'Show Object Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showObjectInfo.description', 'Display debug information about objects on the canvas.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showObjectInfo, label: this.t('settings.developer.showObjectInfo.label', 'Show Object Info'), onCheckedChange: this.handleDebugInfoChange('showObjectInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showSyncProviderInfo.description', 'Display debug information about the sync provider connection status.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showSyncProviderInfo, label: this.t('settings.developer.showSyncProviderInfo.label', 'Show Sync Provider Info'), onCheckedChange: this.handleDebugInfoChange('showSyncProviderInfo') })), h("div", { class: "settings-item" }, h("label", { class: "settings-label" }, this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info')), h("p", { class: "settings-description" }, this.t('settings.developer.showMigrationInfo.description', 'Display debug information about data migrations.')), h("kritzel-slide-toggle", { checked: this.debugInfo.showMigrationInfo, label: this.t('settings.developer.showMigrationInfo.label', 'Show Migration Info'), onCheckedChange: this.handleDebugInfoChange('showMigrationInfo') })))));
+            case 'about':
+                return (h("div", { class: "settings-content" }, h("h3", null, this.t('settings.about.title', 'About')), h("p", null, this.t('settings.about.description', 'Kritzel - A drawing application')), h("p", { class: "version-info" }, "Version ", KRITZEL_VERSION), h("p", { class: "version-info" }, "App-State Schema v", CURRENT_APP_STATE_SCHEMA_VERSION), h("p", { class: "version-info" }, "Workspace Schema v", CURRENT_WORKSPACE_SCHEMA_VERSION)));
+            default:
+                return null;
+        }
+    }
+    render() {
+        return (h(Host, { key: '1fb0bca35cb20633f017a927d39e2a66ebfb403b' }, h("kritzel-dialog", { key: '6366a8d8e7f65ef3f715248db3dc7c7e36dd3f4a', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '2f4891d1ef0b3f130c591790b2e53e7264a61145', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+    }
+    static get watchers() { return {
+        "settings": [{
+                "onSettingsPropChange": 0
+            }]
+    }; }
+    static get style() { return kritzelSettingsCss(); }
+}, [513, "kritzel-settings", {
+        "availableThemes": [16],
+        "availableLocales": [16],
+        "shortcuts": [16],
+        "terms": [16],
+        "settings": [16],
+        "isDialogOpen": [32],
+        "selectedCategoryId": [32],
+        "scaleMin": [32],
+        "scaleMax": [32],
+        "lockDrawingScale": [32],
+        "theme": [32],
+        "locale": [32],
+        "viewportBoundaryLeft": [32],
+        "viewportBoundaryRight": [32],
+        "viewportBoundaryTop": [32],
+        "viewportBoundaryBottom": [32],
+        "debugInfo": [32],
+        "open": [64]
+    }, undefined, {
+        "settings": [{
+                "onSettingsPropChange": 0
+            }]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-settings", "kritzel-dialog", "kritzel-dropdown", "kritzel-icon", "kritzel-master-detail", "kritzel-numeric-input", "kritzel-slide-toggle"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-settings":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelSettings);
+            }
+            break;
+        case "kritzel-dialog":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "kritzel-dropdown":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kritzel-master-detail":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-numeric-input":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-slide-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelSettings as K, 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 };