@kritzel/editor 0.4.31

package/dist/collection/components/kritzel-settings/kritzel-settings.js

@@ -0,0 +1,448 @@
+import { Host, h } from "@stencil/core";
+import { KRITZEL_VERSION } from "@kritzel/engine";
+import { CURRENT_APP_STATE_SCHEMA_VERSION, CURRENT_WORKSPACE_SCHEMA_VERSION } from "@kritzel/engine";
+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'];
+export class KritzelSettings {
+    host;
+    /** 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;
+    }
+    async close() {
+        this.closeDialog();
+    }
+    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() {
+        return (h("div", { class: "settings-categories-wrapper" }, h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'general' } }, 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 }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'viewport' } }, 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 }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'shortcuts' } }, 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)))))))))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'developer' } }, 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') }))))), h("div", { class: { 'settings-tab-panel': true, 'is-active': this.selectedCategoryId === 'about' } }, 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)))));
+    }
+    render() {
+        return (h(Host, { key: '0461408163ca90999eef2885be2496264cae94ac' }, h("kritzel-dialog", { key: 'bbeb801a3024887d9e4aff94128f50d15a0a6820', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: 'ee2013cb3e7588b0b25c0f6175e79290de21cf09', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
+    }
+    static get is() { return "kritzel-settings"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-settings.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-settings.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "availableThemes": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "string[]",
+                    "resolved": "string[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Keyboard shortcuts to display in the settings dialog"
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "['light', 'dark']"
+            },
+            "availableLocales": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "{ code: LocaleCode; label: string }[]",
+                    "resolved": "{ code: LocaleCode; label: string; }[]",
+                    "references": {
+                        "LocaleCode": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::LocaleCode",
+                            "referenceLocation": "LocaleCode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Available locales as `{ code, label }` options for the language selector."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "shortcuts": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Omit<KritzelShortcut, 'action' | 'condition'>[]",
+                    "resolved": "Omit<KritzelShortcut, \"action\" | \"condition\">[]",
+                    "references": {
+                        "Omit": {
+                            "location": "global",
+                            "id": "global::Omit"
+                        },
+                        "KritzelShortcut": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelShortcut",
+                            "referenceLocation": "KritzelShortcut"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            },
+            "terms": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<Record<KritzelTermKey, string>>",
+                    "resolved": "\"backToContent.label\" | \"currentUser.dialogTitle\" | \"editor.loading\" | \"export.dialogTitle\" | \"export.exportButton\" | \"export.filename.label\" | \"export.filename.placeholder\" | \"export.format.label\" | \"export.tabs.viewport\" | \"export.tabs.workspace\" | \"login.dialogTitle\" | \"menu.align\" | \"menu.alignBottom\" | \"menu.alignCenterHorizontal\" | \"menu.alignCenterVertical\" | \"menu.alignLeft\" | \"menu.alignRight\" | \"menu.alignTop\" | \"menu.bringToFront\" | \"menu.copy\" | \"menu.cut\" | \"menu.delete\" | \"menu.export\" | \"menu.exportAsPng\" | \"menu.exportAsSvg\" | \"menu.group\" | \"menu.import\" | \"menu.logout\" | \"menu.moveDown\" | \"menu.moveUp\" | \"menu.order\" | \"menu.paste\" | \"menu.selectAll\" | \"menu.sendToBack\" | \"menu.settings\" | \"menu.share\" | \"menu.ungroup\" | \"moreMenu.ariaLabel\" | \"settings.about.description\" | \"settings.about.title\" | \"settings.categories.about\" | \"settings.categories.developer\" | \"settings.categories.general\" | \"settings.categories.shortcuts\" | \"settings.categories.viewport\" | \"settings.developer.showMigrationInfo.description\" | \"settings.developer.showMigrationInfo.label\" | \"settings.developer.showObjectInfo.description\" | \"settings.developer.showObjectInfo.label\" | \"settings.developer.showSyncProviderInfo.description\" | \"settings.developer.showSyncProviderInfo.label\" | \"settings.developer.showViewportInfo.description\" | \"settings.developer.showViewportInfo.label\" | \"settings.developer.title\" | \"settings.dialogTitle\" | \"settings.general.language.description\" | \"settings.general.language.label\" | \"settings.general.lockDrawingScale.description\" | \"settings.general.lockDrawingScale.label\" | \"settings.general.theme.description\" | \"settings.general.theme.label\" | \"settings.general.title\" | \"settings.shortcuts.title\" | \"settings.viewport.boundaryBottom.description\" | \"settings.viewport.boundaryBottom.label\" | \"settings.viewport.boundaryLeft.description\" | \"settings.viewport.boundaryLeft.label\" | \"settings.viewport.boundaryPlaceholder\" | \"settings.viewport.boundaryRight.description\" | \"settings.viewport.boundaryRight.label\" | \"settings.viewport.boundaryTop.description\" | \"settings.viewport.boundaryTop.label\" | \"settings.viewport.maxZoom.description\" | \"settings.viewport.maxZoom.label\" | \"settings.viewport.minZoom.description\" | \"settings.viewport.minZoom.label\" | \"settings.viewport.title\" | \"share.copyLink.copied\" | \"share.copyLink.title\" | \"share.dialogTitle\" | \"share.linkSharing.disabledDescription\" | \"share.linkSharing.enabledDescription\" | \"share.linkSharing.label\" | \"share.linkSharing.toggleLabel\" | \"toolConfig.collapse\" | \"toolConfig.expand\" | \"utility.delete\" | \"utility.redo\" | \"utility.undo\" | \"watermark.poweredBy\" | \"workspace.delete\" | \"workspace.rename\" | \"workspace.sharedTooltip\" | \"zoom.zoomIn\" | \"zoom.zoomOut\" | string",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        },
+                        "KritzelTermKey": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelTermKey",
+                            "referenceLocation": "KritzelTermKey"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved localized strings keyed by term key, supplied by the editor."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "settings": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Partial<KritzelSettingsConfig>",
+                    "resolved": "KritzelSettingsConfig",
+                    "references": {
+                        "Partial": {
+                            "location": "global",
+                            "id": "global::Partial"
+                        },
+                        "KritzelSettingsConfig": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelSettingsConfig",
+                            "referenceLocation": "KritzelSettingsConfig"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Current settings values. Used to initialize and sync the component's internal state."
+                },
+                "getter": false,
+                "setter": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDialogOpen": {},
+            "selectedCategoryId": {},
+            "scaleMin": {},
+            "scaleMax": {},
+            "lockDrawingScale": {},
+            "theme": {},
+            "locale": {},
+            "viewportBoundaryLeft": {},
+            "viewportBoundaryRight": {},
+            "viewportBoundaryTop": {},
+            "viewportBoundaryBottom": {},
+            "debugInfo": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "settingsChange",
+                "name": "settingsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when settings change"
+                },
+                "complexType": {
+                    "original": "KritzelSettingsConfig",
+                    "resolved": "KritzelSettingsConfig",
+                    "references": {
+                        "KritzelSettingsConfig": {
+                            "location": "import",
+                            "path": "@kritzel/engine",
+                            "id": "../../engine/core/dist/types/index.d.ts::KritzelSettingsConfig",
+                            "referenceLocation": "KritzelSettingsConfig"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "settings",
+                "methodName": "onSettingsPropChange"
+            }];
+    }
+}

package/dist/collection/components/kritzel-shape-fill/kritzel-shape-fill.css

@@ -0,0 +1,47 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+.fill-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.fill-option {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 32px;
+  border-radius: 6px;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  border: 2px solid transparent;
+  box-sizing: border-box;
+  background: var(--kritzel-shape-fill-option-background, #ffffff);
+  padding: 4px;
+  transition: background-color 0.15s ease, border-color 0.15s ease;
+}
+
+.fill-option:hover {
+  background-color: var(--kritzel-shape-fill-hover-background-color, #ebebeb);
+}
+
+.fill-option.selected {
+  border-color: var(--kritzel-selection-border-color, #007AFF);
+  background-color: var(--kritzel-shape-fill-selected-background-color, #ebebeb);
+}
+
+.fill-option:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}
+
+.fill-icon {
+  width: 100%;
+  height: 100%;
+}

package/dist/collection/components/kritzel-shape-fill/kritzel-shape-fill.js

@@ -0,0 +1,93 @@
+import { Host, h } from "@stencil/core";
+export class KritzelShapeFill {
+    /** Current fill type */
+    value = 'transparent';
+    valueChange;
+    handleFillChange(type) {
+        this.value = type;
+        this.valueChange.emit(type);
+    }
+    renderFillIcon(type) {
+        const strokeColor = 'var(--kritzel-global-text-primary)';
+        if (type === 'transparent') {
+            return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: "none", stroke: strokeColor, "stroke-width": "2" })));
+        }
+        // Filled
+        return (h("svg", { viewBox: "0 0 24 24", class: "fill-icon" }, h("rect", { x: "4", y: "4", width: "16", height: "16", rx: "2", fill: strokeColor, stroke: strokeColor, "stroke-width": "2" })));
+    }
+    render() {
+        return (h(Host, { key: 'ec214708dd4210e0c36734cb81fba76849114f9b' }, h("div", { key: 'd64bacdb7c50b31f3c460bdf2e939b4159d4d000', class: "fill-row" }, h("button", { key: '812735be08265145a13ab116e7153fd684f8b77f', class: {
+                'fill-option': true,
+                'selected': this.value === 'transparent',
+            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: 'cb5caf2db8aece4bef2eebca37e7ac36383bb450', class: {
+                'fill-option': true,
+                'selected': this.value === 'filled',
+            }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
+    }
+    static get is() { return "kritzel-shape-fill"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["kritzel-shape-fill.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["kritzel-shape-fill.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "ShapeFillType",
+                    "resolved": "\"filled\" | \"transparent\"",
+                    "references": {
+                        "ShapeFillType": {
+                            "location": "local",
+                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-shape-fill/kritzel-shape-fill.tsx",
+                            "id": "src/components/kritzel-shape-fill/kritzel-shape-fill.tsx::ShapeFillType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current fill type"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "'transparent'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "valueChange",
+                "name": "valueChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "ShapeFillType",
+                    "resolved": "\"filled\" | \"transparent\"",
+                    "references": {
+                        "ShapeFillType": {
+                            "location": "local",
+                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-shape-fill/kritzel-shape-fill.tsx",
+                            "id": "src/components/kritzel-shape-fill/kritzel-shape-fill.tsx::ShapeFillType"
+                        }
+                    }
+                }
+            }];
+    }
+}