@kritzel/editor 0.4.31 → 0.4.32

package/dist/collection/components/kritzel-pill-tabs/kritzel-pill-tabs.css

@@ -1,68 +1,68 @@
-:host {
-  display: block;
-  max-width: 100%;
-}
-
-.pill-tabs-container {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  padding: 4px;
-  max-width: 100%;
-  border-radius: var(--kritzel-pill-tabs-border-radius, 10px);
-  background: var(--kritzel-pill-tabs-background, #f0f0f0);
-  box-sizing: border-box;
-}
-
-.pill-tab {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  min-width: 0;
-  max-width: 100%;
-  padding: 8px 16px;
-  border: none;
-  border-radius: var(--kritzel-pill-tabs-tab-border-radius, 8px);
-  background: var(--kritzel-pill-tabs-tab-background, transparent);
-  color: var(--kritzel-pill-tabs-tab-text-color, #666666);
-  font-family: inherit;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: var(--kritzel-global-pointer-cursor, pointer);
-  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
-  white-space: nowrap;
-}
-
-.pill-tab:hover:not(.selected) {
-  background: var(--kritzel-pill-tabs-tab-background-hover, rgba(0, 0, 0, 0.05));
-}
-
-.pill-tab.selected {
-  background: var(--kritzel-pill-tabs-tab-background-selected, #ffffff);
-  color: var(--kritzel-pill-tabs-tab-text-color-selected, #000000);
-  box-shadow: var(--kritzel-pill-tabs-tab-shadow-selected, 0 1px 3px rgba(0, 0, 0, 0.1));
-}
-
-.pill-tab:focus {
-  outline: none;
-}
-
-.pill-tab:focus-visible {
-  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
-}
-
-.pill-tab-label {
-  display: block;
-  min-width: 0;
-  max-width: var(--kritzel-pill-tabs-tab-label-max-width, 10rem);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  line-height: 1;
-}
-
-/* Icon styling */
-.pill-tab kritzel-icon {
-  flex-shrink: 0;
-}
+:host {
+  display: block;
+  max-width: 100%;
+}
+
+.pill-tabs-container {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  max-width: 100%;
+  border-radius: var(--kritzel-pill-tabs-border-radius, 10px);
+  background: var(--kritzel-pill-tabs-background, #f0f0f0);
+  box-sizing: border-box;
+}
+
+.pill-tab {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  max-width: 100%;
+  padding: 8px 16px;
+  border: none;
+  border-radius: var(--kritzel-pill-tabs-tab-border-radius, 8px);
+  background: var(--kritzel-pill-tabs-tab-background, transparent);
+  color: var(--kritzel-pill-tabs-tab-text-color, #666666);
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: var(--kritzel-global-pointer-cursor, pointer);
+  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
+  white-space: nowrap;
+}
+
+.pill-tab:hover:not(.selected) {
+  background: var(--kritzel-pill-tabs-tab-background-hover, rgba(0, 0, 0, 0.05));
+}
+
+.pill-tab.selected {
+  background: var(--kritzel-pill-tabs-tab-background-selected, #ffffff);
+  color: var(--kritzel-pill-tabs-tab-text-color-selected, #000000);
+  box-shadow: var(--kritzel-pill-tabs-tab-shadow-selected, 0 1px 3px rgba(0, 0, 0, 0.1));
+}
+
+.pill-tab:focus {
+  outline: none;
+}
+
+.pill-tab:focus-visible {
+  box-shadow: 0 0 0 2px var(--kritzel-global-focus-ring-color, rgba(0, 122, 255, 0.3));
+}
+
+.pill-tab-label {
+  display: block;
+  min-width: 0;
+  max-width: var(--kritzel-pill-tabs-tab-label-max-width, 10rem);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+/* Icon styling */
+.pill-tab kritzel-icon {
+  flex-shrink: 0;
+}

package/dist/collection/components/kritzel-pill-tabs/kritzel-pill-tabs.js

@@ -50,7 +50,7 @@ export class KritzelPillTabs {
         buttons?.[newIndex]?.focus();
     }
     render() {
-        return (h(Host, { key: '16fce447fb7db0539ba115ef19771ac78f30a302' }, h("div", { key: '95487da922621b18c1ec422eb0d464131dbc28d3', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
+        return (h(Host, { key: 'f02f93ada5ec002695b62f511c847de201a8cbe4' }, h("div", { key: 'bb08ae773f1b993cb330556a5778d71fc5e91ce1', class: "pill-tabs-container", role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.id, class: {
                 'pill-tab': true,
                 'selected': this.value === tab.id,
             }, role: "tab", "aria-selected": this.value === tab.id ? 'true' : 'false', tabIndex: this.value === tab.id ? 0 : -1, onClick: () => this.handleTabClick(tab.id), onKeyDown: (e) => this.handleKeyDown(e, index) }, tab.icon && h("kritzel-icon", { name: tab.icon, size: 16 }), h("span", { class: "pill-tab-label" }, tab.label)))))));
@@ -78,7 +78,7 @@ export class KritzelPillTabs {
                     "references": {
                         "KritzelPillTab": {
                             "location": "local",
-                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-pill-tabs/kritzel-pill-tabs.tsx",
+                            "path": "/home/runner/work/kritzel-private/kritzel-private/libs/editor/core/src/components/kritzel-pill-tabs/kritzel-pill-tabs.tsx",
                             "id": "src/components/kritzel-pill-tabs/kritzel-pill-tabs.tsx::KritzelPillTab"
                         }
                     }

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

@@ -277,7 +277,7 @@ export class KritzelPortal {
         this.portal.style.visibility = 'visible';
     }
     render() {
-        return (h(Host, { key: 'c92b863d46e8a96b44d318288471ad11ae04d1f4', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: 'd207f238571b877145c0c445e9d184cb1c4a4e2b' })));
+        return (h(Host, { key: 'e37e3fb0de2910fabd9379f372e477ecac929d1d', style: { display: this.anchor ? 'block' : 'none' } }, h("slot", { key: '86f8720d298201b66efea2475634ec7506b33d9c' })));
     }
     static get is() { return "kritzel-portal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,137 +1,137 @@
-: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 */
-.settings-tab-panel {
-  display: none;
-}
-
-.settings-tab-panel.is-active {
-  display: block;
-}
-
-.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 */
-.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);
-}
+: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 */
+.settings-tab-panel {
+  display: none;
+}
+
+.settings-tab-panel.is-active {
+  display: block;
+}
+
+.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 */
+.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);
+}

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

@@ -208,7 +208,7 @@ export class KritzelSettings {
         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()))));
+        return (h(Host, { key: 'a3b62913565f4823bd379da67d81545c58c49d20' }, h("kritzel-dialog", { key: 'e688b2d81f985905f65b756becb336b7d14ca8f5', isOpen: this.isDialogOpen, dialogTitle: this.t('settings.dialogTitle', 'Settings'), size: "large", contained: true, onDialogClose: this.closeDialog }, h("kritzel-master-detail", { key: '1f6db30412514bee5b087d8365eca91d76002ef8', items: this.categories, selectedItemId: this.selectedCategoryId, onItemSelect: this.handleCategorySelect }, this.renderCategoryContent()))));
     }
     static get is() { return "kritzel-settings"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,47 +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%;
-}
+: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

@@ -16,10 +16,10 @@ export class KritzelShapeFill {
         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: {
+        return (h(Host, { key: '6d38a9af2e4c4c7f86ab994c63fc074007c86b48' }, h("div", { key: 'cf58f26cb0e56e274873d11024209c6908d317bb', class: "fill-row" }, h("button", { key: 'c75eed70fe0c2fcbf0fd136bb6fce75b2dbfb45d', class: {
                 'fill-option': true,
                 'selected': this.value === 'transparent',
-            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: 'cb5caf2db8aece4bef2eebca37e7ac36383bb450', class: {
+            }, onClick: () => this.handleFillChange('transparent'), title: "Transparent background" }, this.renderFillIcon('transparent')), h("button", { key: '5d6ede439b5d5e55598cd8c20b5851fb9f210463', class: {
                 'fill-option': true,
                 'selected': this.value === 'filled',
             }, onClick: () => this.handleFillChange('filled'), title: "Filled background" }, this.renderFillIcon('filled')))));
@@ -47,7 +47,7 @@ export class KritzelShapeFill {
                     "references": {
                         "ShapeFillType": {
                             "location": "local",
-                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-shape-fill/kritzel-shape-fill.tsx",
+                            "path": "/home/runner/work/kritzel-private/kritzel-private/libs/editor/core/src/components/kritzel-shape-fill/kritzel-shape-fill.tsx",
                             "id": "src/components/kritzel-shape-fill/kritzel-shape-fill.tsx::ShapeFillType"
                         }
                     }
@@ -83,7 +83,7 @@ export class KritzelShapeFill {
                     "references": {
                         "ShapeFillType": {
                             "location": "local",
-                            "path": "C:/Projects/kritzel/libs/editor/core/src/components/kritzel-shape-fill/kritzel-shape-fill.tsx",
+                            "path": "/home/runner/work/kritzel-private/kritzel-private/libs/editor/core/src/components/kritzel-shape-fill/kritzel-shape-fill.tsx",
                             "id": "src/components/kritzel-shape-fill/kritzel-shape-fill.tsx::ShapeFillType"
                         }
                     }