kritzel-stencil 0.4.4 → 0.4.6

package/dist/components/p-Ch42cOeY.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.6';
+
+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-ClFprFvz.js

@@ -1 +1,209 @@
-import{p as e,H as t,c as i,h as s,d as n,t as l}from"./p-B43upypT.js";import{K as a}from"./p-DAwPPDMS.js";import{O as o}from"./p-Dd-pMvlr.js";import{d as r}from"./p-CdR76C4L.js";import{d as h,a as c}from"./p-CwJwsRR3.js";import{d as u}from"./p-Ca-igU1f.js";import{d as m}from"./p-Cr682JI_.js";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.isWorkspaceManagerReady=i(this,"isWorkspaceManagerReady"),this.workspaceChange=i(this,"workspaceChange")}get host(){return this}visible=!1;activeWorkspace;workspaces=[];terms={};isWorkspaceManagerReady;workspaceChange;childMenuAnchor=null;openChildMenuItem=null;newWorkspace=null;editingItemId=null;handleWheel(e){e.ctrlKey&&e.preventDefault()}kritzelEngineRef=null;splitButtonRef;get sortedWorkspaces(){return[this.newWorkspace,...this.workspaces].filter((e=>null!=e)).sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime()))}async componentWillLoad(){await this.initializeEngine(),this.isWorkspaceManagerReady.emit()}async initializeEngine(){await customElements.whenDefined("kritzel-engine");const e=this.host.closest("kritzel-editor");this.kritzelEngineRef=e?.querySelector("kritzel-engine")??null,this.kritzelEngineRef||console.warn("kritzel-engine not found in kritzel-editor.")}async select(e,t){this.editingItemId||(e.action?e.action(e,t):this.workspaceChange.emit(e.value))}async add(){await this.splitButtonRef.open(),this.newWorkspace=new a(o.generateUUID(),"New Workspace"),this.editingItemId=this.newWorkspace.id}edit(e){this.openChildMenuItem=null,this.childMenuAnchor=null,requestAnimationFrame((()=>{this.editingItemId=e.id}))}async save(e){if(this.newWorkspace)this.newWorkspace.name=e.label,await(this.kritzelEngineRef?.createWorkspace(this.newWorkspace)),this.workspaceChange.emit(this.newWorkspace);else{const t=e.value;t.name=e.label,await(this.kritzelEngineRef?.updateWorkspace(t))}this.editingItemId=null,this.newWorkspace=null}cancel(){this.newWorkspace=null,this.editingItemId=null}async delete(e){this.openChildMenuItem=null,this.childMenuAnchor=null,await(this.kritzelEngineRef?.deleteWorkspace(e.value)),e.value.id===this.activeWorkspace?.id&&(this.activeWorkspace=this.sortedWorkspaces.find((t=>t.id!==e.value.id))||null,this.workspaceChange.emit(this.activeWorkspace)),await this.splitButtonRef.focusMenu()}toggleChildMenu(e,t){this.openChildMenuItem=e,this.childMenuAnchor=t}closeChildMenu(){this.openChildMenuItem=null,this.childMenuAnchor=null}handleMenuOpen(){}handleMenuClose(){this.cancel(),this.closeChildMenu()}render(){const e=this.sortedWorkspaces.sort(((e,t)=>t.createdAt.getTime()-e.createdAt.getTime())).filter((e=>null!==e)).map((e=>({id:e.id,label:e.name,icon:e.isPublic?"users-round":void 0,iconTooltip:e.isPublic?this.terms["workspace.sharedTooltip"]??"Shared workspace":void 0,value:e,isEditing:this.editingItemId===e.id,isSelected:this.activeWorkspace?.id===e.id,isNewItem:this.newWorkspace?.id===e.id,isChildMenuOpen:this.openChildMenuItem?.id===e.id,childMenuAnchor:this.openChildMenuItem?.id===e.id?this.childMenuAnchor:null,children:[{id:`${e.id}-rename`,label:this.terms["workspace.rename"]??"Rename",value:"rename",action:(e,t)=>this.edit(t)},{id:`${e.id}-delete`,label:this.terms["workspace.delete"]??"Delete",value:"delete",isDisabled:this.sortedWorkspaces.length<=1,action:(e,t)=>this.delete(t)}]})));return s(n,{style:{display:this.visible?"":"none"}},s("div",{class:{manager:!0,visible:this.visible}},s("kritzel-split-button",{ref:e=>this.splitButtonRef=e,items:e,mainButtonDisabled:null!=this.editingItemId,onMainButtonClick:()=>this.add(),onItemSelect:e=>this.select(e.detail.item,e.detail.parent),onItemToggleChildMenu:e=>this.toggleChildMenu(e.detail.item,e.detail.childMenuAnchor),onItemSave:e=>this.save(e.detail),onItemCancel:()=>this.cancel(),onItemCloseChildMenu:()=>this.closeChildMenu(),onMenuOpen:()=>this.handleMenuOpen(),onMenuClose:()=>this.handleMenuClose()})))}static get style(){return":host{display:flex;flex-direction:column;z-index:1}.manager{opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.manager.visible{opacity:1;pointer-events:auto}"}},[513,"kritzel-workspace-manager",{visible:[4],activeWorkspace:[1040],workspaces:[16],terms:[16],childMenuAnchor:[32],openChildMenuItem:[32],newWorkspace:[32],editingItemId:[32]},[[8,"wheel","handleWheel"]]]);function p(){"undefined"!=typeof customElements&&["kritzel-workspace-manager","kritzel-icon","kritzel-menu","kritzel-menu-item","kritzel-portal","kritzel-split-button"].forEach((e=>{switch(e){case"kritzel-workspace-manager":customElements.get(l(e))||customElements.define(l(e),d);break;case"kritzel-icon":customElements.get(l(e))||r();break;case"kritzel-menu":customElements.get(l(e))||c();break;case"kritzel-menu-item":customElements.get(l(e))||h();break;case"kritzel-portal":customElements.get(l(e))||u();break;case"kritzel-split-button":customElements.get(l(e))||m()}}))}export{d as K,p as d}
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host, t as transformTag } from './p-B43upypT.js';
+import { K as KritzelWorkspace } from './p-DAwPPDMS.js';
+import { O as ObjectHelper } from './p-Dd-pMvlr.js';
+import { d as defineCustomElement$5 } from './p-CdR76C4L.js';
+import { d as defineCustomElement$3, a as defineCustomElement$4 } from './p-CwJwsRR3.js';
+import { d as defineCustomElement$2 } from './p-Ca-igU1f.js';
+import { d as defineCustomElement$1 } from './p-Cr682JI_.js';
+
+const kritzelWorkspaceManagerCss = () => `:host{display:flex;flex-direction:column;z-index:1}.manager{opacity:0;pointer-events:none;transition:opacity 0.2s ease-out}.manager.visible{opacity:1;pointer-events:auto}`;
+
+const KritzelWorkspaceManager = /*@__PURE__*/ proxyCustomElement(class KritzelWorkspaceManager extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.isWorkspaceManagerReady = createEvent(this, "isWorkspaceManagerReady");
+        this.workspaceChange = createEvent(this, "workspaceChange");
+    }
+    get host() { return this; }
+    /**
+     * Whether the workspace manager is visible
+     */
+    visible = false;
+    activeWorkspace;
+    workspaces = [];
+    /** Resolved localized strings keyed by term key, supplied by the editor. */
+    terms = {};
+    isWorkspaceManagerReady;
+    workspaceChange;
+    childMenuAnchor = null;
+    openChildMenuItem = null;
+    newWorkspace = null;
+    editingItemId = null;
+    handleWheel(event) {
+        if (event.ctrlKey) {
+            event.preventDefault();
+        }
+    }
+    kritzelEngineRef = null;
+    splitButtonRef;
+    get sortedWorkspaces() {
+        return [this.newWorkspace, ...this.workspaces].filter(ws => ws != null).sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
+    }
+    async componentWillLoad() {
+        await this.initializeEngine();
+        this.isWorkspaceManagerReady.emit();
+    }
+    async initializeEngine() {
+        await customElements.whenDefined('kritzel-engine');
+        // Search for kritzel-engine in the closest kritzel-editor ancestor
+        const editor = this.host.closest('kritzel-editor');
+        this.kritzelEngineRef = editor?.querySelector('kritzel-engine') ?? null;
+        if (!this.kritzelEngineRef) {
+            console.warn('kritzel-engine not found in kritzel-editor.');
+        }
+    }
+    async select(item, parent) {
+        if (this.editingItemId) {
+            return;
+        }
+        if (item.action) {
+            item.action(item, parent);
+            return;
+        }
+        this.workspaceChange.emit(item.value);
+    }
+    async add() {
+        await this.splitButtonRef.open();
+        this.newWorkspace = new KritzelWorkspace(ObjectHelper.generateUUID(), 'New Workspace');
+        this.editingItemId = this.newWorkspace.id;
+    }
+    edit(item) {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+        requestAnimationFrame(() => {
+            this.editingItemId = item.id;
+        });
+    }
+    async save(item) {
+        if (this.newWorkspace) {
+            this.newWorkspace.name = item.label;
+            await this.kritzelEngineRef?.createWorkspace(this.newWorkspace);
+            this.workspaceChange.emit(this.newWorkspace);
+        }
+        else {
+            const workspace = item.value;
+            workspace.name = item.label;
+            await this.kritzelEngineRef?.updateWorkspace(workspace);
+        }
+        this.editingItemId = null;
+        this.newWorkspace = null;
+    }
+    cancel() {
+        this.newWorkspace = null;
+        this.editingItemId = null;
+    }
+    async delete(item) {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+        await this.kritzelEngineRef?.deleteWorkspace(item.value);
+        if (item.value.id === this.activeWorkspace?.id) {
+            this.activeWorkspace = this.sortedWorkspaces.find(ws => ws.id !== item.value.id) || null;
+            this.workspaceChange.emit(this.activeWorkspace);
+        }
+        await this.splitButtonRef.focusMenu();
+    }
+    toggleChildMenu(item, anchor) {
+        this.openChildMenuItem = item;
+        this.childMenuAnchor = anchor;
+    }
+    closeChildMenu() {
+        this.openChildMenuItem = null;
+        this.childMenuAnchor = null;
+    }
+    handleMenuOpen() {
+        // Menu open - engine remains interactive
+    }
+    handleMenuClose() {
+        this.cancel();
+        this.closeChildMenu();
+    }
+    render() {
+        const menuItems = this.sortedWorkspaces
+            .sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime())
+            .filter(ws => ws !== null)
+            .map(ws => {
+            return {
+                id: ws.id,
+                label: ws.name,
+                icon: ws.isPublic ? 'users-round' : undefined,
+                iconTooltip: ws.isPublic ? (this.terms['workspace.sharedTooltip'] ?? 'Shared workspace') : undefined,
+                value: ws,
+                isEditing: this.editingItemId === ws.id,
+                isSelected: this.activeWorkspace?.id === ws.id,
+                isNewItem: this.newWorkspace?.id === ws.id,
+                isChildMenuOpen: this.openChildMenuItem?.id === ws.id,
+                childMenuAnchor: this.openChildMenuItem?.id === ws.id ? this.childMenuAnchor : null,
+                children: [
+                    {
+                        id: `${ws.id}-rename`,
+                        label: this.terms['workspace.rename'] ?? 'Rename',
+                        value: 'rename',
+                        action: (_item, parent) => this.edit(parent),
+                    },
+                    {
+                        id: `${ws.id}-delete`,
+                        label: this.terms['workspace.delete'] ?? 'Delete',
+                        value: 'delete',
+                        isDisabled: this.sortedWorkspaces.length <= 1,
+                        action: (_item, parent) => this.delete(parent),
+                    },
+                ],
+            };
+        });
+        return (h(Host, { style: { display: this.visible ? '' : 'none' } }, h("div", { class: { manager: true, visible: this.visible } }, h("kritzel-split-button", { ref: el => (this.splitButtonRef = el), items: menuItems, mainButtonDisabled: this.editingItemId != null, onMainButtonClick: () => this.add(), onItemSelect: event => this.select(event.detail.item, event.detail.parent), onItemToggleChildMenu: event => this.toggleChildMenu(event.detail.item, event.detail.childMenuAnchor), onItemSave: event => this.save(event.detail), onItemCancel: () => this.cancel(), onItemCloseChildMenu: () => this.closeChildMenu(), onMenuOpen: () => this.handleMenuOpen(), onMenuClose: () => this.handleMenuClose() }))));
+    }
+    static get style() { return kritzelWorkspaceManagerCss(); }
+}, [513, "kritzel-workspace-manager", {
+        "visible": [4],
+        "activeWorkspace": [1040],
+        "workspaces": [16],
+        "terms": [16],
+        "childMenuAnchor": [32],
+        "openChildMenuItem": [32],
+        "newWorkspace": [32],
+        "editingItemId": [32]
+    }, [[8, "wheel", "handleWheel"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["kritzel-workspace-manager", "kritzel-icon", "kritzel-menu", "kritzel-menu-item", "kritzel-portal", "kritzel-split-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "kritzel-workspace-manager":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), KritzelWorkspaceManager);
+            }
+            break;
+        case "kritzel-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "kritzel-menu":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "kritzel-menu-item":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "kritzel-portal":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "kritzel-split-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { KritzelWorkspaceManager as K, defineCustomElement as d };