kritzel-stencil 0.3.11 → 0.3.12

package/dist/components/{p-B0VnbmWu.js → p-EFyZdR89.js}

@@ -1 +1 @@
-import{p as e,H as t,c as s,h as i,d as o,t as n}from"./p-BWj1eE2b.js";import{a,C as l}from"./p-CW-VyJgK.js";import{d as r}from"./p-BTSOqHMI.js";import{d as c}from"./p-C8ggg-5h.js";import{d as h}from"./p-CJERvHdy.js";import{d}from"./p-DfH7YY2C.js";import{d as g}from"./p-CWgI1dA0.js";import{d as p}from"./p-DgtrNOWm.js";const u=-1/0,m=1/0,b=-1/0,f=1/0,v={showViewportInfo:!1,showObjectInfo:!1,showSyncProviderInfo:!0,showMigrationInfo:!0},w=[{id:"general",label:"General",icon:"settings"},{id:"viewport",label:"Viewport",icon:"viewport"},{id:"shortcuts",label:"Keyboard Shortcuts",icon:"command"},{id:"developer",label:"Developer Options",icon:"braces"},{id:"about",label:"About",icon:"info"}],y=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.settingsChange=s(this,"settingsChange")}get host(){return this}availableThemes=["light","dark"];shortcuts=[];settings;onSettingsPropChange(e){e&&this.applySettings(e)}isDialogOpen=!1;selectedCategoryId=w[0].id;scaleMin=1e-4;scaleMax=1e3;lockDrawingScale=!0;theme="light";viewportBoundaryLeft=u;viewportBoundaryRight=m;viewportBoundaryTop=b;viewportBoundaryBottom=f;debugInfo={...v};settingsChange;componentWillLoad(){this.settings&&this.applySettings(this.settings)}applySettings(e){"number"==typeof e.scaleMin&&(this.scaleMin=e.scaleMin),"number"==typeof e.scaleMax&&(this.scaleMax=e.scaleMax),"boolean"==typeof e.lockDrawingScale&&(this.lockDrawingScale=e.lockDrawingScale),"string"==typeof e.theme&&(this.theme=e.theme),"number"==typeof e.viewportBoundaryLeft&&(this.viewportBoundaryLeft=e.viewportBoundaryLeft),"number"==typeof e.viewportBoundaryRight&&(this.viewportBoundaryRight=e.viewportBoundaryRight),"number"==typeof e.viewportBoundaryTop&&(this.viewportBoundaryTop=e.viewportBoundaryTop),"number"==typeof e.viewportBoundaryBottom&&(this.viewportBoundaryBottom=e.viewportBoundaryBottom),e.debugInfo&&(this.debugInfo={...v,...e.debugInfo})}emitSettings(){this.settingsChange.emit({scaleMin:this.scaleMin,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,theme:this.theme,viewportBoundaryLeft:this.viewportBoundaryLeft,viewportBoundaryRight:this.viewportBoundaryRight,viewportBoundaryTop:this.viewportBoundaryTop,viewportBoundaryBottom:this.viewportBoundaryBottom,debugInfo:this.debugInfo})}handleScaleMinChange=e=>{this.scaleMin=e.detail,this.emitSettings()};handleScaleMaxChange=e=>{this.scaleMax=e.detail,this.emitSettings()};handleLockDrawingScaleChange=e=>{this.lockDrawingScale=e.detail,this.emitSettings()};handleThemeChange=e=>{this.theme=e.detail,this.emitSettings()};handleViewportBoundaryLeftChange=e=>{this.viewportBoundaryLeft=e.detail??u,this.emitSettings()};handleViewportBoundaryRightChange=e=>{this.viewportBoundaryRight=e.detail??m,this.emitSettings()};handleViewportBoundaryTopChange=e=>{this.viewportBoundaryTop=e.detail??b,this.emitSettings()};handleViewportBoundaryBottomChange=e=>{this.viewportBoundaryBottom=e.detail??f,this.emitSettings()};handleDebugInfoChange=e=>t=>{this.debugInfo={...this.debugInfo,[e]:t.detail},this.emitSettings()};async open(){this.isDialogOpen=!0}closeDialog=()=>{this.isDialogOpen=!1};handleCategorySelect=e=>{this.selectedCategoryId=e.detail.item.id};formatKeyCombo(e){const t=[];return e.ctrl&&t.push("Ctrl"),e.shift&&t.push("Shift"),t.push(this.formatKey(e.key)),t.join("+")}formatKey(e){return{Escape:"Esc",Delete:"Del"," ":"Space"}[e]??e.toUpperCase()}groupShortcutsByCategory(){const e=new Map;for(const t of this.shortcuts){const s=e.get(t.category)||[];s.push(t),e.set(t.category,s)}return e}renderCategoryContent(){switch(this.selectedCategoryId){case"general":return i("div",{class:"settings-content"},i("h3",null,"General Settings"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Theme"),i("p",{class:"settings-description"},"Select a registered color theme for the editor interface."),i("kritzel-dropdown",{options:this.availableThemes.map((e=>({value:e,label:e}))),value:this.theme,onValueChanged:this.handleThemeChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Lock Drawing Scale"),i("p",{class:"settings-description"},"When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level."),i("kritzel-slide-toggle",{checked:this.lockDrawingScale,label:"Lock Drawing Scale",onCheckedChange:this.handleLockDrawingScaleChange}))));case"viewport":return i("div",{class:"settings-content"},i("h3",null,"Viewport Settings"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Minimum Zoom Level"),i("p",{class:"settings-description"},"Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas."),i("kritzel-numeric-input",{value:this.scaleMin,min:1e-4,max:1,step:1e-4,onValueChange:this.handleScaleMinChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Maximum Zoom Level"),i("p",{class:"settings-description"},"Sets the maximum zoom level. Higher values allow zooming in closer for detailed work."),i("kritzel-numeric-input",{value:this.scaleMax,min:1,max:1e3,step:1,onValueChange:this.handleScaleMaxChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Left"),i("p",{class:"settings-description"},"Left boundary in world coordinates. Set to limit how far left the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryLeft,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryLeftChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Right"),i("p",{class:"settings-description"},"Right boundary in world coordinates. Set to limit how far right the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryRight,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryRightChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Top"),i("p",{class:"settings-description"},"Top boundary in world coordinates. Set to limit how far up the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryTop,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryTopChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Bottom"),i("p",{class:"settings-description"},"Bottom boundary in world coordinates. Set to limit how far down the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryBottom,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryBottomChange}))));case"shortcuts":return i("div",{class:"settings-content"},i("h3",null,"Keyboard Shortcuts"),i("div",{class:"shortcuts-list"},Array.from(this.groupShortcutsByCategory()).map((([e,t])=>i("div",{class:"shortcuts-category",key:e},i("h4",{class:"shortcuts-category-title"},e),i("div",{class:"shortcuts-group"},t.map((e=>i("div",{class:"shortcut-item",key:e.key+e.label},i("span",{class:"shortcut-label"},e.label),i("kbd",{class:"shortcut-key"},this.formatKeyCombo(e)))))))))));case"developer":return i("div",{class:"settings-content"},i("h3",null,"Developer Options"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Viewport Info"),i("p",{class:"settings-description"},"Display viewport debug information such as position, zoom level, and boundaries."),i("kritzel-slide-toggle",{checked:this.debugInfo.showViewportInfo,label:"Show Viewport Info",onCheckedChange:this.handleDebugInfoChange("showViewportInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Object Info"),i("p",{class:"settings-description"},"Display debug information about objects on the canvas."),i("kritzel-slide-toggle",{checked:this.debugInfo.showObjectInfo,label:"Show Object Info",onCheckedChange:this.handleDebugInfoChange("showObjectInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Sync Provider Info"),i("p",{class:"settings-description"},"Display debug information about the sync provider connection status."),i("kritzel-slide-toggle",{checked:this.debugInfo.showSyncProviderInfo,label:"Show Sync Provider Info",onCheckedChange:this.handleDebugInfoChange("showSyncProviderInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Migration Info"),i("p",{class:"settings-description"},"Display debug information about data migrations."),i("kritzel-slide-toggle",{checked:this.debugInfo.showMigrationInfo,label:"Show Migration Info",onCheckedChange:this.handleDebugInfoChange("showMigrationInfo")}))));case"about":return i("div",{class:"settings-content"},i("h3",null,"About"),i("p",null,"Kritzel - A drawing application"),i("p",{class:"version-info"},"Version ","0.3.11"),i("p",{class:"version-info"},"App-State Schema v",l),i("p",{class:"version-info"},"Workspace Schema v",a));default:return null}}render(){return i(o,{key:"46c6792ae9cdd932d3dc71526862c9281c0cefc1"},i("kritzel-dialog",{key:"1cd288cdf8b26bea378665c54bfc14577597fe49",isOpen:this.isDialogOpen,dialogTitle:"Settings",size:"large",contained:!0,onDialogClose:this.closeDialog},i("kritzel-master-detail",{key:"4d07e94ebb09035807356bab4bc7eaca57c36c6c",items:w,selectedItemId:this.selectedCategoryId,onItemSelect:this.handleCategorySelect},this.renderCategoryContent())))}static get watchers(){return{settings:[{onSettingsPropChange:0}]}}static get style(){return":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)}"}},[513,"kritzel-settings",{availableThemes:[16],shortcuts:[16],settings:[16],isDialogOpen:[32],selectedCategoryId:[32],scaleMin:[32],scaleMax:[32],lockDrawingScale:[32],theme:[32],viewportBoundaryLeft:[32],viewportBoundaryRight:[32],viewportBoundaryTop:[32],viewportBoundaryBottom:[32],debugInfo:[32],open:[64]},void 0,{settings:[{onSettingsPropChange:0}]}]);function k(){"undefined"!=typeof customElements&&["kritzel-settings","kritzel-dialog","kritzel-dropdown","kritzel-icon","kritzel-master-detail","kritzel-numeric-input","kritzel-slide-toggle"].forEach((e=>{switch(e){case"kritzel-settings":customElements.get(n(e))||customElements.define(n(e),y);break;case"kritzel-dialog":customElements.get(n(e))||r();break;case"kritzel-dropdown":customElements.get(n(e))||c();break;case"kritzel-icon":customElements.get(n(e))||h();break;case"kritzel-master-detail":customElements.get(n(e))||d();break;case"kritzel-numeric-input":customElements.get(n(e))||g();break;case"kritzel-slide-toggle":customElements.get(n(e))||p()}}))}export{y as K,k as d}
+import{p as e,H as t,c as s,h as i,d as o,t as n}from"./p-BWj1eE2b.js";import{a,C as l}from"./p-CW-VyJgK.js";import{d as r}from"./p-BTSOqHMI.js";import{d as c}from"./p-C8ggg-5h.js";import{d as h}from"./p-CJERvHdy.js";import{d}from"./p-DfH7YY2C.js";import{d as g}from"./p-CWgI1dA0.js";import{d as p}from"./p-DgtrNOWm.js";const u=-1/0,m=1/0,b=-1/0,f=1/0,v={showViewportInfo:!1,showObjectInfo:!1,showSyncProviderInfo:!0,showMigrationInfo:!0},w=[{id:"general",label:"General",icon:"settings"},{id:"viewport",label:"Viewport",icon:"viewport"},{id:"shortcuts",label:"Keyboard Shortcuts",icon:"command"},{id:"developer",label:"Developer Options",icon:"braces"},{id:"about",label:"About",icon:"info"}],y=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.settingsChange=s(this,"settingsChange")}get host(){return this}availableThemes=["light","dark"];shortcuts=[];settings;onSettingsPropChange(e){e&&this.applySettings(e)}isDialogOpen=!1;selectedCategoryId=w[0].id;scaleMin=1e-4;scaleMax=1e3;lockDrawingScale=!0;theme="light";viewportBoundaryLeft=u;viewportBoundaryRight=m;viewportBoundaryTop=b;viewportBoundaryBottom=f;debugInfo={...v};settingsChange;componentWillLoad(){this.settings&&this.applySettings(this.settings)}applySettings(e){"number"==typeof e.scaleMin&&(this.scaleMin=e.scaleMin),"number"==typeof e.scaleMax&&(this.scaleMax=e.scaleMax),"boolean"==typeof e.lockDrawingScale&&(this.lockDrawingScale=e.lockDrawingScale),"string"==typeof e.theme&&(this.theme=e.theme),"number"==typeof e.viewportBoundaryLeft&&(this.viewportBoundaryLeft=e.viewportBoundaryLeft),"number"==typeof e.viewportBoundaryRight&&(this.viewportBoundaryRight=e.viewportBoundaryRight),"number"==typeof e.viewportBoundaryTop&&(this.viewportBoundaryTop=e.viewportBoundaryTop),"number"==typeof e.viewportBoundaryBottom&&(this.viewportBoundaryBottom=e.viewportBoundaryBottom),e.debugInfo&&(this.debugInfo={...v,...e.debugInfo})}emitSettings(){this.settingsChange.emit({scaleMin:this.scaleMin,scaleMax:this.scaleMax,lockDrawingScale:this.lockDrawingScale,theme:this.theme,viewportBoundaryLeft:this.viewportBoundaryLeft,viewportBoundaryRight:this.viewportBoundaryRight,viewportBoundaryTop:this.viewportBoundaryTop,viewportBoundaryBottom:this.viewportBoundaryBottom,debugInfo:this.debugInfo})}handleScaleMinChange=e=>{this.scaleMin=e.detail,this.emitSettings()};handleScaleMaxChange=e=>{this.scaleMax=e.detail,this.emitSettings()};handleLockDrawingScaleChange=e=>{this.lockDrawingScale=e.detail,this.emitSettings()};handleThemeChange=e=>{this.theme=e.detail,this.emitSettings()};handleViewportBoundaryLeftChange=e=>{this.viewportBoundaryLeft=e.detail??u,this.emitSettings()};handleViewportBoundaryRightChange=e=>{this.viewportBoundaryRight=e.detail??m,this.emitSettings()};handleViewportBoundaryTopChange=e=>{this.viewportBoundaryTop=e.detail??b,this.emitSettings()};handleViewportBoundaryBottomChange=e=>{this.viewportBoundaryBottom=e.detail??f,this.emitSettings()};handleDebugInfoChange=e=>t=>{this.debugInfo={...this.debugInfo,[e]:t.detail},this.emitSettings()};async open(){this.isDialogOpen=!0}closeDialog=()=>{this.isDialogOpen=!1};handleCategorySelect=e=>{this.selectedCategoryId=e.detail.item.id};formatKeyCombo(e){const t=[];return e.ctrl&&t.push("Ctrl"),e.shift&&t.push("Shift"),t.push(this.formatKey(e.key)),t.join("+")}formatKey(e){return{Escape:"Esc",Delete:"Del"," ":"Space"}[e]??e.toUpperCase()}groupShortcutsByCategory(){const e=new Map;for(const t of this.shortcuts){const s=e.get(t.category)||[];s.push(t),e.set(t.category,s)}return e}renderCategoryContent(){switch(this.selectedCategoryId){case"general":return i("div",{class:"settings-content"},i("h3",null,"General Settings"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Theme"),i("p",{class:"settings-description"},"Select a registered color theme for the editor interface."),i("kritzel-dropdown",{options:this.availableThemes.map((e=>({value:e,label:e}))),value:this.theme,onValueChanged:this.handleThemeChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Lock Drawing Scale"),i("p",{class:"settings-description"},"When enabled, drawn objects maintain a fixed visual size regardless of the current zoom level."),i("kritzel-slide-toggle",{checked:this.lockDrawingScale,label:"Lock Drawing Scale",onCheckedChange:this.handleLockDrawingScaleChange}))));case"viewport":return i("div",{class:"settings-content"},i("h3",null,"Viewport Settings"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Minimum Zoom Level"),i("p",{class:"settings-description"},"Sets the minimum zoom level. Lower values allow zooming out further to see more of the canvas."),i("kritzel-numeric-input",{value:this.scaleMin,min:1e-4,max:1,step:1e-4,onValueChange:this.handleScaleMinChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Maximum Zoom Level"),i("p",{class:"settings-description"},"Sets the maximum zoom level. Higher values allow zooming in closer for detailed work."),i("kritzel-numeric-input",{value:this.scaleMax,min:1,max:1e3,step:1,onValueChange:this.handleScaleMaxChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Left"),i("p",{class:"settings-description"},"Left boundary in world coordinates. Set to limit how far left the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryLeft,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryLeftChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Right"),i("p",{class:"settings-description"},"Right boundary in world coordinates. Set to limit how far right the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryRight,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryRightChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Top"),i("p",{class:"settings-description"},"Top boundary in world coordinates. Set to limit how far up the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryTop,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryTopChange})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Viewport Boundary Bottom"),i("p",{class:"settings-description"},"Bottom boundary in world coordinates. Set to limit how far down the viewport can pan."),i("kritzel-numeric-input",{value:this.viewportBoundaryBottom,step:100,placeholder:"Infinite",onValueChange:this.handleViewportBoundaryBottomChange}))));case"shortcuts":return i("div",{class:"settings-content"},i("h3",null,"Keyboard Shortcuts"),i("div",{class:"shortcuts-list"},Array.from(this.groupShortcutsByCategory()).map((([e,t])=>i("div",{class:"shortcuts-category",key:e},i("h4",{class:"shortcuts-category-title"},e),i("div",{class:"shortcuts-group"},t.map((e=>i("div",{class:"shortcut-item",key:e.key+e.label},i("span",{class:"shortcut-label"},e.label),i("kbd",{class:"shortcut-key"},this.formatKeyCombo(e)))))))))));case"developer":return i("div",{class:"settings-content"},i("h3",null,"Developer Options"),i("div",{class:"settings-group"},i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Viewport Info"),i("p",{class:"settings-description"},"Display viewport debug information such as position, zoom level, and boundaries."),i("kritzel-slide-toggle",{checked:this.debugInfo.showViewportInfo,label:"Show Viewport Info",onCheckedChange:this.handleDebugInfoChange("showViewportInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Object Info"),i("p",{class:"settings-description"},"Display debug information about objects on the canvas."),i("kritzel-slide-toggle",{checked:this.debugInfo.showObjectInfo,label:"Show Object Info",onCheckedChange:this.handleDebugInfoChange("showObjectInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Sync Provider Info"),i("p",{class:"settings-description"},"Display debug information about the sync provider connection status."),i("kritzel-slide-toggle",{checked:this.debugInfo.showSyncProviderInfo,label:"Show Sync Provider Info",onCheckedChange:this.handleDebugInfoChange("showSyncProviderInfo")})),i("div",{class:"settings-item"},i("label",{class:"settings-label"},"Show Migration Info"),i("p",{class:"settings-description"},"Display debug information about data migrations."),i("kritzel-slide-toggle",{checked:this.debugInfo.showMigrationInfo,label:"Show Migration Info",onCheckedChange:this.handleDebugInfoChange("showMigrationInfo")}))));case"about":return i("div",{class:"settings-content"},i("h3",null,"About"),i("p",null,"Kritzel - A drawing application"),i("p",{class:"version-info"},"Version ","0.3.12"),i("p",{class:"version-info"},"App-State Schema v",l),i("p",{class:"version-info"},"Workspace Schema v",a));default:return null}}render(){return i(o,{key:"46c6792ae9cdd932d3dc71526862c9281c0cefc1"},i("kritzel-dialog",{key:"1cd288cdf8b26bea378665c54bfc14577597fe49",isOpen:this.isDialogOpen,dialogTitle:"Settings",size:"large",contained:!0,onDialogClose:this.closeDialog},i("kritzel-master-detail",{key:"4d07e94ebb09035807356bab4bc7eaca57c36c6c",items:w,selectedItemId:this.selectedCategoryId,onItemSelect:this.handleCategorySelect},this.renderCategoryContent())))}static get watchers(){return{settings:[{onSettingsPropChange:0}]}}static get style(){return":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)}"}},[513,"kritzel-settings",{availableThemes:[16],shortcuts:[16],settings:[16],isDialogOpen:[32],selectedCategoryId:[32],scaleMin:[32],scaleMax:[32],lockDrawingScale:[32],theme:[32],viewportBoundaryLeft:[32],viewportBoundaryRight:[32],viewportBoundaryTop:[32],viewportBoundaryBottom:[32],debugInfo:[32],open:[64]},void 0,{settings:[{onSettingsPropChange:0}]}]);function k(){"undefined"!=typeof customElements&&["kritzel-settings","kritzel-dialog","kritzel-dropdown","kritzel-icon","kritzel-master-detail","kritzel-numeric-input","kritzel-slide-toggle"].forEach((e=>{switch(e){case"kritzel-settings":customElements.get(n(e))||customElements.define(n(e),y);break;case"kritzel-dialog":customElements.get(n(e))||r();break;case"kritzel-dropdown":customElements.get(n(e))||c();break;case"kritzel-icon":customElements.get(n(e))||h();break;case"kritzel-master-detail":customElements.get(n(e))||d();break;case"kritzel-numeric-input":customElements.get(n(e))||g();break;case"kritzel-slide-toggle":customElements.get(n(e))||p()}}))}export{y as K,k as d}

package/dist/esm/index.js

@@ -1,5 +1,5 @@
-import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-CqBoZbmA.js';
-export { C as APP_STATE_MIGRATIONS, A as AssetNotFoundError, F as CURRENT_APP_STATE_SCHEMA_VERSION, G as CURRENT_WORKSPACE_SCHEMA_VERSION, w as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, v as DEFAULT_LINE_TOOL_CONFIG, u as DEFAULT_TEXT_CONFIG, q as IndexedDBAssetProvider, I as IndexedDBSyncProvider, z as KritzelAlignment, s as KritzelAnchorManager, p as KritzelAssetResolver, K as KritzelBaseObject, h as KritzelBrushTool, n as KritzelCursorHelper, j as KritzelEraserTool, f as KritzelGroup, d as KritzelImage, k as KritzelImageTool, e as KritzelLine, i as KritzelLineTool, c as KritzelPath, o as KritzelSelectionTool, g as KritzelShape, m as KritzelShapeTool, b as KritzelText, l as KritzelTextTool, t as KritzelThemeManager, r as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, E as WORKSPACE_MIGRATIONS, y as darkTheme, x as lightTheme, B as runMigrations } from './schema.constants-CqBoZbmA.js';
+import { H as HocuspocusProvider, a as HocuspocusProviderWebsocket } from './schema.constants-BcT1vV4J.js';
+export { C as APP_STATE_MIGRATIONS, A as AssetNotFoundError, F as CURRENT_APP_STATE_SCHEMA_VERSION, G as CURRENT_WORKSPACE_SCHEMA_VERSION, w as DEFAULT_ASSET_STORAGE_CONFIG, D as DEFAULT_BRUSH_CONFIG, v as DEFAULT_LINE_TOOL_CONFIG, u as DEFAULT_TEXT_CONFIG, q as IndexedDBAssetProvider, I as IndexedDBSyncProvider, z as KritzelAlignment, s as KritzelAnchorManager, p as KritzelAssetResolver, K as KritzelBaseObject, h as KritzelBrushTool, n as KritzelCursorHelper, j as KritzelEraserTool, f as KritzelGroup, d as KritzelImage, k as KritzelImageTool, e as KritzelLine, i as KritzelLineTool, c as KritzelPath, o as KritzelSelectionTool, g as KritzelShape, m as KritzelShapeTool, b as KritzelText, l as KritzelTextTool, t as KritzelThemeManager, r as KritzelWorkspace, S as ShapeType, W as WORKSPACE_EXPORT_VERSION, E as WORKSPACE_MIGRATIONS, y as darkTheme, x as lightTheme, B as runMigrations } from './schema.constants-BcT1vV4J.js';
 import * as Y from 'yjs';
 import { WebsocketProvider } from 'y-websocket';
 import 'y-indexeddb';

package/dist/esm/kritzel-active-users_42.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, H as Host, c as createEvent, g as getElement } from './index-D9HaikfQ.js';
-import { c as KritzelPath, e as KritzelLine, J as KritzelColorHelper, o as KritzelSelectionTool, h as KritzelBrushTool, i as KritzelLineTool, m as KritzelShapeTool, l as KritzelTextTool, L as KritzelDevicesHelper, M as KritzelMouseButton, N as DEFAULT_STROKE_SIZES, O as DEFAULT_COLOR_PALETTE, S as ShapeType, I as IndexedDBSyncProvider, D as DEFAULT_BRUSH_CONFIG, j as KritzelEraserTool, v as DEFAULT_LINE_TOOL_CONFIG, u as DEFAULT_TEXT_CONFIG, k as KritzelImageTool, z as KritzelAlignment, w as DEFAULT_ASSET_STORAGE_CONFIG, T as ThemeHelper, y as darkTheme, x as lightTheme, P as KritzelSelectionGroup, Q as KritzelSelectionBox, R as KritzelIconRegistry, U as KritzelKeyboardHelper, V as KritzelBaseHandler, K as KritzelBaseObject, r as KritzelWorkspace, f as KritzelGroup, d as KritzelImage, g as KritzelShape, b as KritzelText, B as runMigrations, G as CURRENT_WORKSPACE_SCHEMA_VERSION, E as WORKSPACE_MIGRATIONS, F as CURRENT_APP_STATE_SCHEMA_VERSION, C as APP_STATE_MIGRATIONS, X as ObjectHelper, n as KritzelCursorHelper, s as KritzelAnchorManager, t as KritzelThemeManager, p as KritzelAssetResolver, Y as KritzelClassHelper, Z as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION } from './schema.constants-CqBoZbmA.js';
+import { c as KritzelPath, e as KritzelLine, J as KritzelColorHelper, o as KritzelSelectionTool, h as KritzelBrushTool, i as KritzelLineTool, m as KritzelShapeTool, l as KritzelTextTool, L as KritzelDevicesHelper, M as KritzelMouseButton, N as DEFAULT_STROKE_SIZES, O as DEFAULT_COLOR_PALETTE, S as ShapeType, I as IndexedDBSyncProvider, D as DEFAULT_BRUSH_CONFIG, j as KritzelEraserTool, v as DEFAULT_LINE_TOOL_CONFIG, u as DEFAULT_TEXT_CONFIG, k as KritzelImageTool, z as KritzelAlignment, w as DEFAULT_ASSET_STORAGE_CONFIG, T as ThemeHelper, y as darkTheme, x as lightTheme, P as KritzelSelectionGroup, Q as KritzelSelectionBox, R as KritzelIconRegistry, U as KritzelKeyboardHelper, V as KritzelBaseHandler, K as KritzelBaseObject, r as KritzelWorkspace, f as KritzelGroup, d as KritzelImage, g as KritzelShape, b as KritzelText, B as runMigrations, G as CURRENT_WORKSPACE_SCHEMA_VERSION, E as WORKSPACE_MIGRATIONS, F as CURRENT_APP_STATE_SCHEMA_VERSION, C as APP_STATE_MIGRATIONS, X as ObjectHelper, n as KritzelCursorHelper, s as KritzelAnchorManager, t as KritzelThemeManager, p as KritzelAssetResolver, Y as KritzelClassHelper, Z as KritzelEventHelper, W as WORKSPACE_EXPORT_VERSION } from './schema.constants-BcT1vV4J.js';
 import * as Y from 'yjs';
 import 'y-indexeddb';
 import 'y-websocket';
@@ -929,6 +929,7 @@ const KritzelControls = class {
         this.isControlsReady = createEvent(this, "isControlsReady");
     }
     get host() { return getElement(this); }
+    visible = true;
     controls = [];
     activeControl = null;
     isUtilityPanelVisible = true;
@@ -1153,13 +1154,13 @@ const KritzelControls = class {
         // Separate tool controls from config control
         const toolControls = this.internalControls.filter(c => c.type === 'tool' || c.type === 'separator');
         const configControl = this.internalControls.find(c => c.type === 'config' && c.name === this.firstConfig?.name);
-        return (h(Host, { key: 'b567aac7bca12cc5ffb0ee1eb9e6978636aa3c31', class: {
+        return (h(Host, { key: '0f40a136a6a9556080d922d346318045794421a8', style: { display: this.visible ? '' : 'none' }, class: {
                 mobile: this.isTouchDevice,
-            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: '88e8ae9ae7429987724df70895b02a3f59216364', style: {
+            } }, this.isUtilityPanelVisible && (h("kritzel-utility-panel", { key: 'd543e7575cb30e54d9362eddf7c7221fb8cce5f5', style: {
                 position: 'absolute',
                 bottom: '56px',
                 left: '12px',
-            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '658e3d7b94e49a002d5057c1fb4fc199a371c48d', class: "kritzel-controls" }, h("div", { key: 'b54bb52a43e4a94ae1148cd4e75528bcaad681ef', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '36ce760357d3228141281a45c0ac7b0024b04795', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
+            }, undoState: this.undoState, onUndo: () => this.kritzelEngine?.undo(), onRedo: () => this.kritzelEngine?.redo(), onDelete: () => this.kritzelEngine?.delete() })), h("div", { key: '1083380152e9d1b51c35da335533c20ca2ca8fcc', class: "kritzel-controls" }, h("div", { key: '11ef0fb76c30ffda0e30f01d43229ca2142a5854', class: { 'scroll-indicator-left': true, 'visible': this.canScrollLeft } }), h("div", { key: '269924a8859aece37ff31202307d4feaecbbde86', class: "kritzel-tools-scroll", ref: el => (this.toolsScrollRef = el), onScroll: this.handleToolsScroll }, toolControls.map(control => {
             // Check if this control has sub-options (split-button)
             if (control.subOptions?.length) {
                 const selectedSubOption = this.getSelectedSubOption(control);
@@ -1189,10 +1190,10 @@ const KritzelControls = class {
                     'kritzel-control': true,
                     'selected': this.activeControl?.name === control?.name,
                 }, key: control.name, "data-testid": `tool-${control.name}`, onClick: _event => this.handleControlClick?.(control), "aria-label": control.name.charAt(0).toUpperCase() + control.name.slice(1) }, h("kritzel-icon", { name: control.icon })));
-        })), h("div", { key: 'f0b1e0f74fe197f4d39e307e7dd8dd4819c4b183', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
+        })), h("div", { key: '8b97a5bba3ac4992482e8f433d7ba6197918a914', class: { 'scroll-indicator-right': true, 'visible': this.canScrollRight && !(configControl && this.activeControl && hasConfigUI) } }), configControl && this.activeControl && (h("div", { class: {
                 'kritzel-config-container': true,
                 'visible': hasConfigUI,
-            }, key: configControl.name }, h("div", { key: '51cc3ebf13092e710048441ff64856edd4f53dfc', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: 'dcace186ae3ece1d7e943f51b48ed5094d847284', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '9b16ac90f335fec3c043545fa0c5b363ab99924e', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '2425507968e27a01b66c1d7be79a40ebe77cd27d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
+            }, key: configControl.name }, h("div", { key: 'd9adef8c2acc8d9b9d745174050ce78960b89b58', class: { 'config-gradient-left': true, 'visible': this.needsScrolling } }), h("kritzel-tooltip", { key: '7605bbd2b6335c89c57aa68952293f26efad6b4b', anchorElement: this.host.shadowRoot?.querySelector('.kritzel-config-container'), triggerElement: this.configTriggerRef }, h("kritzel-tool-config", { key: '27b0f41442215e78b692fa44bb665444a4993b89', tool: this.activeControl.tool, theme: this.theme, engine: this.kritzelEngine, onToolChange: event => this.handleToolChange?.(event), onDisplayValuesChange: this.handleDisplayValuesChange, style: { width: '100%', height: '100%' } })), h("div", { key: '1fb5979b1c531593acf5086861b22b7d78d03e8d', tabIndex: hasConfigUI ? 0 : -1, class: "kritzel-config", "data-testid": "tool-config", ref: el => {
                 if (el)
                     this.configTriggerRef = el;
             }, onKeyDown: event => {
@@ -1201,7 +1202,7 @@ const KritzelControls = class {
                 }
             }, style: {
                 cursor: 'pointer',
-            } }, this.displayValues && (h("div", { key: 'd2499df3c0a90c101957f55664452739e0f1692b', class: "color-container" }, h("kritzel-color", { key: 'b7cfcd3a8579c63f508c2786eecace1223e88974', value: this.displayValues.color, theme: this.theme, size: 18, style: {
+            } }, this.displayValues && (h("div", { key: '3713ef344630f6b4d88df2e83992018859ddb18c', class: "color-container" }, h("kritzel-color", { key: 'c2679f68efae77c6daeb98be9e03d5320d51a73a', value: this.displayValues.color, theme: this.theme, size: 18, style: {
                 borderRadius: '50%',
                 border: 'none',
             } })))))))));
@@ -2140,6 +2141,7 @@ const DEFAULT_SHAPE_CONFIG = {
     fillColor: { light: 'transparent', dark: 'transparent' },
     strokeColor: DEFAULT_COLOR_PALETTE[0],
     strokeWidth: 4,
+    opacity: 1,
     fontColor: DEFAULT_COLOR_PALETTE[0],
     fontSize: 16,
     fontFamily: 'Arial',
@@ -2342,6 +2344,7 @@ const KritzelEditor = class {
     isUtilityPanelVisible = true;
     isWorkspaceManagerVisible = true;
     isMoreMenuVisible = true;
+    isObjectDistanceFadingActive = false;
     syncConfig = DEFAULT_SYNC_CONFIG;
     assetStorageConfig = DEFAULT_ASSET_STORAGE_CONFIG;
     /** The element to use as the target for the cursor. Defaults to the editor container if not set. */
@@ -2457,12 +2460,18 @@ const KritzelEditor = class {
     async addObject(object) {
         return this.engineRef.addObject(object);
     }
+    async addObjects(objects) {
+        return this.engineRef.addObjects(objects);
+    }
     async updateObject(object, updatedProperties) {
         return this.engineRef.updateObject(object, updatedProperties);
     }
     async removeObject(object) {
         return this.engineRef.removeObject(object);
     }
+    async removeObjects(objects) {
+        return this.engineRef.removeObjects(objects);
+    }
     async getSelectedObjects() {
         return this.engineRef.getSelectedObjects();
     }
@@ -2937,31 +2946,31 @@ const KritzelEditor = class {
         const isLoggedIn = this.isLoggedIn;
         const shouldShowCurrentUser = isLoggedIn;
         const shouldShowLoginButton = this.isReady && !!this.loginConfig && !isLoggedIn;
-        return (h(Host, { key: '3606d2318e6811f2f4b647f1531ff8bda409a401', style: {
+        return (h(Host, { key: '440621eb23598732c63d4be92ae16785d84b3d6f', style: {
                 opacity: this.isEditorVisible ? '1' : '0',
                 visibility: this.isEditorVisible ? 'visible' : 'hidden',
                 transition: 'opacity 0.2s ease-in-out, visibility 0.2s ease-in-out',
-            } }, h("div", { key: '094e66c69a829a3d150cd672f66f3f092cf19623', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'b31a64b26f0f13a24bc07f2a5db8230ebc0377e2', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: '9768ead0daf60292c649a0ccdb4dcd92d8ce342a', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: 'cf4cf487da19cd10352a31dab4e50db4aaabfd7a', ref: el => {
+            } }, h("div", { key: 'b20c930c8094f7ab9db8fdb09428cf34a2cab024', class: "top-left-buttons" }, h("kritzel-workspace-manager", { key: 'a6ff7e54fb3d45f4a3b1d009b12d2f6229d14d87', visible: this.isWorkspaceManagerVisible, workspaces: this.workspaces, activeWorkspace: this.activeWorkspace, onWorkspaceChange: event => (this.activeWorkspace = event.detail), onIsWorkspaceManagerReady: () => (this.isWorkspaceManagerReady = true) }), h("kritzel-back-to-content", { key: 'a3cbb86082c2f0768b7457ec25740d27200e287b', visible: this.isBackToContentButtonVisible, onBackToContent: () => this.backToContent() })), h("kritzel-engine", { key: '82e611de33c40997943e1fd702f0b601fadbf591', ref: el => {
                 if (el) {
                     this.engineRef = el;
                 }
-            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: 'eb0839b834e688f15461ebd7391c87b331a5b328', class: { 'keyboard-open': this.isVirtualKeyboardOpen }, style: { display: this.isControlsVisible ? 'flex' : 'none' }, ref: el => {
+            }, workspace: this.activeWorkspace, activeWorkspaceId: this.activeWorkspaceId, editorId: this.editorId, syncConfig: this.syncConfig, assetStorageConfig: this.assetStorageConfig, user: this.user, scaleMax: this.scaleMax, lockDrawingScale: this.lockDrawingScale, isObjectDistanceFadingActive: this.isObjectDistanceFadingActive, scaleMin: this.scaleMin, cursorTarget: this.cursorTarget, isLoading: this.isLoading, viewportBoundaryLeft: this.viewportBoundaryLeft, viewportBoundaryRight: this.viewportBoundaryRight, viewportBoundaryTop: this.viewportBoundaryTop, viewportBoundaryBottom: this.viewportBoundaryBottom, wheelEnabled: this.wheelEnabled, theme: this.theme, themes: this.themes, debugInfo: this.debugInfo, globalContextMenuItems: this.globalContextMenuItems, objectContextMenuItems: this.objectContextMenuItems, onIsEngineReady: event => this.onEngineReady(event), onWorkspacesChange: event => this.handleWorkspacesChange(event), onActiveWorkspaceChange: event => this.handleActiveWorkspaceChange(event), onObjectsChange: event => this.handleObjectsChange(event), onObjectsAdded: event => this.handleObjectsAdded(event), onObjectsRemoved: event => this.handleObjectsRemoved(event), onObjectsUpdated: event => this.handleObjectsUpdated(event), onUndoStateChange: event => this.handleUndoStateChange(event), onObjectsInViewportChange: event => this.handleObjectsInViewportChange(event), onViewportChange: event => this.handleViewportChange(event), onAwarenessChange: event => this.handleAwarenessChange(event) }), h("kritzel-controls", { key: 'eb48df395318bde3fc0bc48784510bf5139bc9e8', visible: this.isControlsVisible, class: { 'keyboard-open': this.isVirtualKeyboardOpen }, ref: el => {
                 if (el) {
                     this.controlsRef = el;
                 }
-            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: 'e5c14a118d245ef0ec1c5863eb21022a5e5d7c77', class: "top-right-buttons" }, h("kritzel-settings", { key: 'bad9ebae5bc91efaf388e525375ba263f0344374', ref: el => {
+            }, controls: this.controls, isUtilityPanelVisible: this.isUtilityPanelVisible, undoState: this.undoState ?? undefined, theme: this.theme, onIsControlsReady: () => (this.isControlsReady = true) }), h("div", { key: '1259089ca70c634621f7e2db274868b12a3e5e8a', class: "top-right-buttons" }, h("kritzel-settings", { key: 'b38b01040714827a5d824694b481edb8094eafd8', ref: el => {
                 if (el) {
                     this.settingsRef = el;
                 }
-            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'ca28cd1057181b347af75ea51950114272bf33ec', ref: el => {
+            }, shortcuts: this.shortcuts, availableThemes: this.themes && this.themes.length > 0 ? this.themes.map(t => t.name) : ['light', 'dark'], settings: this.currentSettingsConfig, onSettingsChange: event => this.handleSettingsChange(event) }), h("kritzel-export", { key: 'a678999cac4f3618c44d1340b6905ec2f3061dd5', ref: el => {
                 if (el) {
                     this.exportRef = el;
                 }
-            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '1b667e832c1f231ecdd9ea0cca0504c6f4a82ce1', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'ec0a1827625f79435d20b8d53374eb29e7174f7e', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: '0ddec61cc09b96797c33ae18c225ec967efed3e8', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: 'e9d41eff38bbd4e9420f8586559597f8ec9d6802', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: 'f3fd8a06f5cf0ac89c02d535ee30dec05c9e536f', ref: el => {
+            }, workspaceName: this.activeWorkspace?.name || 'workspace', onExportPng: () => this.engineRef.exportViewportAsPng(), onExportSvg: () => this.engineRef.exportViewportAsSvg(), onExportJson: event => this.engineRef.downloadAsJson(event.detail) }), h("kritzel-active-users", { key: '7d0b70c7347e7fda4e96a59b27b8fb6c2eb77f49', users: this.activeUsers }), shouldShowCurrentUser && h("kritzel-current-user", { key: 'ed364648df937fb1e84d850953fee51f6e54e95e', user: this.user }), shouldShowLoginButton && (h("kritzel-button", { key: 'dd24afa0746a311ac4a27000281fef28bddf844a', onButtonClick: () => this.loginDialogRef?.open() }, "Sign in")), h("kritzel-more-menu", { key: '713da1a5313809083470a8a23c0531e9e198c4bd', items: this.moreMenuItems, visible: this.isMoreMenuVisible }), h("kritzel-share-dialog", { key: '37f80fdb7b1087926b72ece7693f816c9f85f746', ref: el => {
                 if (el) {
                     this.shareDialogRef = el;
                 }
-            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: '49bd9f85d4cb7ee0f8dc7d2b7248169848c36b9f', ref: el => {
+            }, isPublic: this.currentIsPublic, workspaceId: this.activeWorkspace?.id, onToggleIsPublic: this.handleToggleIsPublic }), this.loginConfig && (h("kritzel-login-dialog", { key: 'f5b59522082824bc236784a9083f1d425852d487', ref: el => {
                 if (el) {
                     this.loginDialogRef = el;
                 }
@@ -26502,6 +26511,11 @@ const KritzelEngine = class {
     onLockDrawingScaleChange(newValue) {
         this.core.store.state.lockDrawingScale = newValue;
     }
+    /** When true, objects fade based on distance to the viewport center. */
+    isObjectDistanceFadingActive = false;
+    onIsObjectDistanceFadingActiveChange() {
+        this.core.rerender();
+    }
     /** The current theme to apply to the editor */
     theme = 'light';
     onThemeChange(newValue) {
@@ -26936,7 +26950,7 @@ const KritzelEngine = class {
         this.core.deselectAllObjects();
         object.id = object.generateId();
         object._core = this.core;
-        object.scale = this.core.store.state.scale;
+        object.scale = object.scale ?? this.core.store.state.scale;
         object.zIndex = this.core.store.currentZIndex;
         object.workspaceId = this.core.store.state.activeWorkspace.id;
         // Handle KritzelText: recreate the editor now that _core is available
@@ -26965,7 +26979,7 @@ const KritzelEngine = class {
                     const oldId = child.id;
                     child.id = child.generateId();
                     child._core = this.core;
-                    child.scale = this.core.store.state.scale;
+                    child.scale = child.scale ?? this.core.store.state.scale;
                     child.zIndex = this.core.store.currentZIndex;
                     child.workspaceId = this.core.store.state.activeWorkspace.id;
                     idRemapping.set(oldId, child.id);
@@ -27011,6 +27025,82 @@ const KritzelEngine = class {
         this.emitObjectsAdded([object]);
         return object;
     }
+    /**
+     * Adds multiple objects to the canvas in a single batch operation.
+     * All objects are inserted within one Yjs transaction (single undo step),
+     * triggering only one rerender cycle. Intended for programmatic streaming
+     * scenarios where per-object overhead would cause stutter.
+     * @param objects - The object instances to add.
+     * @returns The added objects.
+     */
+    async addObjects(objects) {
+        if (objects.length === 0) {
+            return [];
+        }
+        this.core.store.objects.transaction(() => {
+            for (const object of objects) {
+                object.id = object.generateId();
+                object._core = this.core;
+                object.zIndex = this.core.store.currentZIndex;
+                object.workspaceId = this.core.store.state.activeWorkspace.id;
+                if (KritzelClassHelper.isInstanceOf(object, 'KritzelText')) {
+                    const pendingContent = object.content;
+                    object.editor = object.createEditor();
+                    if (pendingContent) {
+                        object.setContent(pendingContent);
+                    }
+                }
+                if (KritzelClassHelper.isInstanceOf(object, 'KritzelGroup') && object._pendingChildren.length > 0) {
+                    const idRemapping = new Map();
+                    const allFlushedChildren = [];
+                    const flushGroup = (group) => {
+                        if (group._pendingChildren.length === 0) {
+                            return;
+                        }
+                        const pending = group._pendingChildren;
+                        group._pendingChildren = [];
+                        group.childIds = [];
+                        pending.forEach(child => {
+                            const oldId = child.id;
+                            child.id = child.generateId();
+                            child._core = this.core;
+                            child.zIndex = this.core.store.currentZIndex;
+                            child.workspaceId = this.core.store.state.activeWorkspace.id;
+                            idRemapping.set(oldId, child.id);
+                            group.childIds.push(child.id);
+                            allFlushedChildren.push(child);
+                            if (KritzelClassHelper.isInstanceOf(child, 'KritzelGroup')) {
+                                flushGroup(child);
+                            }
+                        });
+                    };
+                    flushGroup(object);
+                    allFlushedChildren.forEach(child => {
+                        if (KritzelClassHelper.isInstanceOf(child, 'KritzelLine')) {
+                            if (child.startAnchor && idRemapping.has(child.startAnchor.objectId)) {
+                                child.startAnchor = { objectId: idRemapping.get(child.startAnchor.objectId) };
+                            }
+                            if (child.endAnchor && idRemapping.has(child.endAnchor.objectId)) {
+                                child.endAnchor = { objectId: idRemapping.get(child.endAnchor.objectId) };
+                            }
+                        }
+                    });
+                    allFlushedChildren.forEach(child => {
+                        this.core.addObject(child);
+                    });
+                    object.finalize();
+                    this.core.anchorManager.rebuildIndex();
+                }
+                this.core.addObject(object);
+            }
+        });
+        this.core.rerender();
+        await new Promise(resolve => {
+            requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
+        });
+        this.emitObjectsAdded(objects);
+        return objects;
+    }
     /**
      * Updates properties of an existing canvas object.
      * @param object - The object to update.
@@ -27040,6 +27130,28 @@ const KritzelEngine = class {
         this.emitObjectsRemoved([object]);
         return object;
     }
+    /**
+     * Removes multiple objects from the canvas in a single batch operation.
+     * All removals happen within one Yjs transaction (single undo step),
+     * triggering only one rerender cycle. Intended for programmatic streaming
+     * scenarios where per-object overhead would cause stutter.
+     * @param objects - The objects to remove.
+     * @returns The removed objects.
+     */
+    async removeObjects(objects) {
+        const objectsMap = this.core.store.objects;
+        if (!objectsMap || objects.length === 0) {
+            return [];
+        }
+        objectsMap.transaction(() => {
+            for (const object of objects) {
+                this.core.removeObject(object);
+            }
+        });
+        this.core.rerender();
+        this.emitObjectsRemoved(objects);
+        return objects;
+    }
     /** Returns the currently selected objects. Returns an empty array if nothing is selected. */
     async getSelectedObjects() {
         const selectionGroup = this.core.store.selectionGroup;
@@ -27694,6 +27806,12 @@ const KritzelEngine = class {
         undoStackSize: 0,
         redoStackSize: 0,
     };
+    _objectDistanceFadeNearScale = 1;
+    _objectDistanceFadeFarScale = 0.15;
+    _objectDistanceFadeMinOpacity = 0;
+    _objectDistanceFadeCloseStartScale = 2;
+    _objectDistanceFadeCloseMaxScale = 4;
+    _objectDistanceFadeCloseMinOpacity = 0;
     syncLoadingState() {
         this.core.store.state.isLoading = this._isWorkspaceLoading || this.isLoading;
     }
@@ -28017,6 +28135,54 @@ const KritzelEngine = class {
         KritzelKeyboardHelper.forceHideKeyboard();
         this.core.rerender();
     }
+    getObjectDistanceFadeMultiplier(objectScale, viewportScale) {
+        if (!this.isObjectDistanceFadingActive) {
+            return 1;
+        }
+        const safeViewportScale = Math.max(Number.isFinite(viewportScale) ? viewportScale : 1, Number.EPSILON);
+        const safeObjectScale = Math.max(Number.isFinite(objectScale) ? objectScale : 1, Number.EPSILON);
+        const normalizedScale = safeViewportScale / safeObjectScale;
+        const farFadeMultiplier = this.getFarDistanceFadeMultiplier(normalizedScale);
+        const closeFadeMultiplier = this.getCloseDistanceFadeMultiplier(normalizedScale);
+        return Math.min(farFadeMultiplier, closeFadeMultiplier);
+    }
+    getFarDistanceFadeMultiplier(normalizedScale) {
+        if (normalizedScale >= this._objectDistanceFadeNearScale) {
+            return 1;
+        }
+        if (normalizedScale <= this._objectDistanceFadeFarScale) {
+            return this._objectDistanceFadeMinOpacity;
+        }
+        const progress = (this._objectDistanceFadeNearScale - normalizedScale) /
+            (this._objectDistanceFadeNearScale - this._objectDistanceFadeFarScale);
+        const smooth = progress * progress * (3 - 2 * progress);
+        return 1 - smooth * (1 - this._objectDistanceFadeMinOpacity);
+    }
+    getCloseDistanceFadeMultiplier(normalizedScale) {
+        if (normalizedScale <= this._objectDistanceFadeCloseStartScale) {
+            return 1;
+        }
+        if (normalizedScale >= this._objectDistanceFadeCloseMaxScale) {
+            return this._objectDistanceFadeCloseMinOpacity;
+        }
+        const progress = (normalizedScale - this._objectDistanceFadeCloseStartScale) /
+            (this._objectDistanceFadeCloseMaxScale - this._objectDistanceFadeCloseStartScale);
+        const smooth = progress * progress * (3 - 2 * progress);
+        return 1 - smooth * (1 - this._objectDistanceFadeCloseMinOpacity);
+    }
+    shouldApplyDistanceFade(object) {
+        return (!KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup') &&
+            !KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionBox'));
+    }
+    getObjectEffectiveOpacity(object, viewportScale) {
+        const safeObjectOpacity = Number.isFinite(object.opacity) ? object.opacity : 1;
+        const distanceFadeMultiplier = this.shouldApplyDistanceFade(object)
+            ? this.getObjectDistanceFadeMultiplier(object.scale, viewportScale)
+            : 1;
+        const multiplied = (object.markedForRemoval ? 0.5 : 1) * safeObjectOpacity * distanceFadeMultiplier;
+        const overridden = ((object.markedForRemoval ? 0.5 : safeObjectOpacity) * distanceFadeMultiplier).toString();
+        return { multiplied, overridden };
+    }
     render() {
         if (!this.viewport) {
             return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading..."))));
@@ -28026,6 +28192,7 @@ const KritzelEngine = class {
         const baseHandleSizePx = computedStyle.getPropertyValue('--kritzel-selection-handle-size').trim() || '6px';
         const baseHandleSize = parseFloat(baseHandleSizePx);
         const baseHandleTouchSize = baseHandleSize * 2 < 14 ? 14 : baseHandleSize;
+        const viewportScale = this.core.store.state.scale;
         const viewportCenterX = this.core.store.state.viewportWidth / 2 + this.core.store.state.translateX;
         const viewportCenterY = this.core.store.state.viewportHeight / 2 + this.core.store.state.translateY;
         const visibleObjects = this.core.store.objectsInViewport;
@@ -28039,39 +28206,34 @@ const KritzelEngine = class {
         return (h(Host, null, this.core.store.state.isLoading && (h("div", { class: "workspace-loading-overlay" }, h("span", { class: "workspace-loading-spinner" }), "Loading...")), this.core.store.state.debugInfo.showViewportInfo && (h("div", { class: "debug-panel" }, h("div", null, "ActiveWorkspaceId: ", this.core.store.state?.activeWorkspace?.id), h("div", null, "ActiveWorkspaceName: ", this.core.store.state?.activeWorkspace?.name), h("div", null, "TranslateX: ", this.core.store.state?.translateX), h("div", null, "TranslateY: ", this.core.store.state?.translateY), h("div", null, "ViewportWidth: ", this.core.store.state?.viewportWidth), h("div", null, "ViewportHeight: ", this.core.store.state?.viewportHeight), h("div", null, "PointerCount: ", this.core.store.state.pointers.size), h("div", null, "Scale: ", this.core.store.state?.scale), h("div", null, "ActiveTool: ", this.core.store.state?.activeTool?.name), h("div", null, "HasViewportChanged: ", this.core.store.state?.hasViewportChanged ? 'true' : 'false'), h("div", null, "IsEnabled: ", this.core.store.state?.isEnabled ? 'true' : 'false'), h("div", null, "IsScaling: ", this.core.store.state?.isScaling ? 'true' : 'false'), h("div", null, "IsPanning: ", this.core.store.state?.isPanning ? 'true' : 'false'), h("div", null, "IsSelecting: ", this.isSelecting ? 'true' : 'false'), h("div", null, "IsSelectionActive: ", this.isSelectionActive ? 'true' : 'false'), h("div", null, "IsResizeHandleSelected: ", this.core.store.state.isResizeHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleSelected: ", this.core.store.state.isRotationHandleSelected ? 'true' : 'false'), h("div", null, "IsRotationHandleHovered: ", this.core.store.state.isRotationHandleHovered ? 'true' : 'false'), h("div", null, "IsDrawing: ", this.core.store.state.isDrawing ? 'true' : 'false'), h("div", null, "IsWriting: ", this.core.store.state.isWriting ? 'true' : 'false'), h("div", null, "IsPointerDown: ", this.core.store.isPointerDown ? 'true' : 'false'), h("div", null, "PointerX: ", this.core.store.state?.pointerX), h("div", null, "PointerY: ", this.core.store.state?.pointerY), h("div", null, "TotalObjects: ", this.core.store.totalObjectCount), h("div", null, "ObjectsInViewport: ", this.core.store.objectsInViewport.length), h("div", null, "SelectedObjects: ", this.core.store.selectionGroup?.objects.length || 0), h("div", null, "ViewportCenter: (", viewportCenterX.toFixed(2), ", ", viewportCenterY.toFixed(2), ")"))), h("div", { id: "origin", class: "origin", style: {
                 transform: `matrix(${this.core.store.state?.scale}, 0, 0, ${this.core.store.state?.scale}, ${this.core.store.state?.translateX}, ${this.core.store.state?.translateY})`,
             } }, visibleObjects?.map(object => {
+            const { multiplied: effectiveOpacity, overridden: effectiveOpacityString } = this.getObjectEffectiveOpacity(object, viewportScale);
             return (h("div", { key: object.id, id: object.id, class: "object", style: {
                     transform: object?.transformationMatrix,
                     transformOrigin: 'top left',
                     position: 'absolute',
                     zIndex: object.zIndex.toString(),
                     pointerEvents: this.core.store.state.isScaling ? 'none' : 'auto',
-                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
-                return (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                        height: object?.totalHeight + 'px',
-                        width: object?.totalWidth + 'px',
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                        transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                        overflow: 'visible',
-                    }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.applyOpacity(object.fill, effectiveOpacity, currentTheme), stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' })));
-            })(), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
-                return (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
-                        height: object?.totalHeight + 'px',
-                        width: object?.totalWidth + 'px',
-                        left: '0',
-                        top: '0',
-                        position: 'absolute',
-                        transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
-                        transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                        pointerEvents: object.markedForRemoval ? 'none' : 'auto',
-                        overflow: 'visible',
-                    }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('start'), effectiveOpacity), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('end'), effectiveOpacity), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined })));
-            })(), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState === 'ready' && (h("img", { ref: el => el && object.mount(el), src: object.resolvedSrc || object.src, style: {
+                } }, KritzelClassHelper.isInstanceOf(object, 'KritzelPath') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                    height: object?.totalHeight + 'px',
+                    width: object?.totalWidth + 'px',
+                    left: '0',
+                    top: '0',
+                    position: 'absolute',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                    overflow: 'visible',
+                }, viewBox: object?.viewBox }, h("path", { d: object?.d, fill: KritzelColorHelper.applyOpacity(object.fill, effectiveOpacity, currentTheme), stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "shape-rendering": object.isLowRes() ? 'optimizeSpeed' : 'auto' }))), KritzelClassHelper.isInstanceOf(object, 'KritzelLine') && (h("svg", { ref: el => el && object.mount(el), xmlns: "http://www.w3.org/2000/svg", style: {
+                    height: object?.totalHeight + 'px',
+                    width: object?.totalWidth + 'px',
+                    left: '0',
+                    top: '0',
+                    position: 'absolute',
+                    transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
+                    transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
+                    pointerEvents: object.markedForRemoval ? 'none' : 'auto',
+                    overflow: 'visible',
+                }, viewBox: object?.viewBox }, (object.hasStartArrow || object.hasEndArrow) && (h("defs", null, object.hasStartArrow && (h("marker", { id: object.startMarkerId, markerWidth: object.getArrowSize('start'), markerHeight: object.getArrowSize('start'), refX: 0, refY: object.getArrowSize('start') / 2, orient: "auto-start-reverse", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.start?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('start'), effectiveOpacity), transform: `scale(${object.getArrowSize('start') / 10})` }))), object.hasEndArrow && (h("marker", { id: object.endMarkerId, markerWidth: object.getArrowSize('end'), markerHeight: object.getArrowSize('end'), refX: 0, refY: object.getArrowSize('end') / 2, orient: "auto", markerUnits: "userSpaceOnUse" }, h("path", { d: object.getArrowPath(object.arrows?.end?.style), fill: KritzelColorHelper.applyOpacity(object.getArrowFill('end'), effectiveOpacity), transform: `scale(${object.getArrowSize('end') / 10})` }))))), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: "transparent", "stroke-width": Math.max(object?.strokeWidth || 0, 10), "stroke-linecap": "round" }), h("path", { d: this.core.anchorManager.computeClippedLinePath(object), fill: "none", stroke: KritzelColorHelper.applyOpacity(object?.stroke, effectiveOpacity, currentTheme), "stroke-width": object?.strokeWidth, "stroke-linecap": "round", "marker-start": object.hasStartArrow ? `url(#${object.startMarkerId})` : undefined, "marker-end": object.hasEndArrow ? `url(#${object.endMarkerId})` : undefined }))), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && object.loadState === 'ready' && (h("img", { ref: el => el && object.mount(el), src: object.resolvedSrc || object.src, style: {
                     position: 'absolute',
                     left: '0',
                     top: '0',
@@ -28079,7 +28241,7 @@ const KritzelEngine = class {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
@@ -28097,7 +28259,7 @@ const KritzelEngine = class {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor({ light: '#e5e7eb', dark: '#2a2a2a' }, currentTheme),
                     borderColor: object.loadState === 'error'
@@ -28121,7 +28283,7 @@ const KritzelEngine = class {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     borderColor: KritzelColorHelper.resolveThemeColor(object.borderColor, currentTheme),
@@ -28162,7 +28324,7 @@ const KritzelEngine = class {
                     height: object.totalHeight + 'px',
                     transform: object.rotationDegrees !== 0 ? `rotate(${object.rotationDegrees}deg)` : undefined,
                     transformOrigin: object.rotationDegrees !== 0 ? `${object.totalWidth / 2}px ${object.totalHeight / 2}px` : undefined,
-                    opacity: object.markedForRemoval ? '0.5' : object.opacity.toString(),
+                    opacity: effectiveOpacityString,
                     pointerEvents: object.markedForRemoval ? 'none' : 'auto',
                 } }, h("div", { id: "text-object", ref: el => el && object.mount(el), onPointerDown: e => object.handlePointerDown(e), onPointerMove: e => object.handlePointerMove(e), onPointerUp: e => object.handlePointerUp(e), style: {
                     minWidth: object.initialWidth + 'px',
@@ -28175,7 +28337,6 @@ const KritzelEngine = class {
                     backgroundColor: KritzelColorHelper.resolveThemeColor(object.backgroundColor, currentTheme),
                     overflow: 'visible',
                 } }))), KritzelClassHelper.isInstanceOf(object, 'KritzelShape') && (() => {
-                const effectiveOpacity = (object.markedForRemoval ? 0.5 : 1) * object.opacity;
                 const fillResolved = KritzelColorHelper.resolveThemeColor(object.fillColor, currentTheme);
                 const strokeResolved = KritzelColorHelper.resolveThemeColor(object.strokeColor, currentTheme);
                 const isFilled = !!fillResolved && fillResolved !== 'transparent';
@@ -28217,7 +28378,7 @@ const KritzelEngine = class {
                     left: `${object.totalWidth}px`,
                     top: '0',
                     zIndex: (object.zIndex + 2).toString(),
-                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
+                } }, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "Id: ", object.id), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "userId: ", object.userId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "width: ", object.width), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "height: ", object.height), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateX: ", object.translateX), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "translateY: ", object.translateY), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "scale: ", object.scale), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "rotationDegrees: ", object.rotationDegrees), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "zIndex: ", object.zIndex), KritzelClassHelper.isInstanceOf(object, 'KritzelImage') && (h("div", null, h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "assetId: ", object.assetId), h("div", { style: { whiteSpace: 'nowrap', fontSize: '10px' } }, "mimeType: ", object.mimeType))))), (this.core.displaySelectionGroupUI(object) || this.core.displaySelectionLineUI(object)) &&
                 (() => {
                     const isSelectionGroup = KritzelClassHelper.isInstanceOf(object, 'KritzelSelectionGroup');
                     const localClientId = this.core.store.objects?.localClientId;
@@ -28492,6 +28653,9 @@ const KritzelEngine = class {
         "lockDrawingScale": [{
                 "onLockDrawingScaleChange": 0
             }],
+        "isObjectDistanceFadingActive": [{
+                "onIsObjectDistanceFadingActiveChange": 0
+            }],
         "theme": [{
                 "onThemeChange": 0
             }],
@@ -29763,7 +29927,7 @@ const KritzelPortal = class {
  * This file is auto-generated by the version bump scripts.
  * Do not modify manually.
  */
-const KRITZEL_VERSION = '0.3.11';
+const KRITZEL_VERSION = '0.3.12';
 
 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)}`;