dekit-cli 0.2.3 → 0.3.0

package/dist/editor/assets/{index-Bx5YsS46.css → index-HLKs1tz-.css}

@@ -6,4 +6,4 @@
  * https://github.com/KingSora
  * 
  * Released under the MIT license.
- */.os-size-observer,.os-size-observer-listener{scroll-behavior:auto!important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(.1)}.os-size-observer:before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(10)}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;display:none!important;width:0!important;height:0!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch!important;flex-direction:row!important;flex-wrap:nowrap!important;scroll-behavior:auto!important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw: 0;--os-vah: 0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden!important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible!important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x: hidden;--os-viewport-overflow-y: hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x: visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x: hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x: scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y: visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y: hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y: scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x)!important;overflow-y:var(--os-viewport-overflow-y)!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0!important;line-height:0!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none!important;position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border-width:0!important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto!important;scroll-snap-type:none!important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden!important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto!important;width:auto!important}@property --os-scroll-percent{syntax: "<number>"; inherits: true; initial-value: 0;}@property --os-viewport-percent{syntax: "<number>"; inherits: true; initial-value: 0;}.os-scrollbar{--os-viewport-percent: 0;--os-scroll-percent: 0;--os-scroll-direction: 0;--os-scroll-percent-directional: calc( var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) * var(--os-scroll-direction) )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none!important}.os-scrollbar-track{position:relative;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translate(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translate(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size: 0;--os-padding-perpendicular: 0;--os-padding-axis: 0;--os-track-border-radius: 0;--os-track-bg: none;--os-track-bg-hover: none;--os-track-bg-active: none;--os-track-border: none;--os-track-border-hover: none;--os-track-border-active: none;--os-handle-border-radius: 0;--os-handle-bg: none;--os-handle-bg-hover: none;--os-handle-bg-active: none;--os-handle-border: none;--os-handle-border-hover: none;--os-handle-border-active: none;--os-handle-min-size: 33px;--os-handle-max-size: none;--os-handle-perpendicular-size: 100%;--os-handle-perpendicular-size-hover: 100%;--os-handle-perpendicular-size-active: 100%;--os-handle-interactive-area-offset: 0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity .15s,background-color .15s,border-color .15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,height .15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,width .15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none!important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size: 10px;--os-padding-perpendicular: 2px;--os-padding-axis: 2px;--os-track-border-radius: 10px;--os-handle-interactive-area-offset: 4px;--os-handle-border-radius: 10px}.os-theme-dark{--os-handle-bg: rgba(0, 0, 0, .44);--os-handle-bg-hover: rgba(0, 0, 0, .55);--os-handle-bg-active: rgba(0, 0, 0, .66)}.os-theme-light{--os-handle-bg: rgba(255, 255, 255, .44);--os-handle-bg-hover: rgba(255, 255, 255, .55);--os-handle-bg-active: rgba(255, 255, 255, .66)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;height:100vh;background:#1e1e1e;color:#ccc}#root{height:100vh}.editor-layout{display:flex;height:100vh}.left-panel{width:240px;background:#252526;border-right:1px solid #4a4a4a;display:flex;flex-direction:column;overflow:hidden}.center-panel{flex:1;background:#1e1e1e;display:flex;flex-direction:column;align-items:stretch;padding:0;min-width:0}.right-panel{width:280px;background:#252526;border-left:1px solid #4a4a4a;display:flex;flex-direction:column;overflow:hidden}.right-panel-top{flex:0 0 35%;display:flex;flex-direction:column;overflow:hidden;border-bottom:1px solid #4a4a4a}.right-panel-top .layer-tree-scroll{flex:1}.right-panel-bottom{flex:1;display:flex;flex-direction:column;overflow:hidden}.right-panel-bottom .properties-scroll,.page-list-scroll{flex:1}.panel-header{height:28px;display:flex;align-items:center;padding:0 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#969696;background:#3c3c3c;border-bottom:1px solid #4a4a4a;-webkit-user-select:none;user-select:none;flex-shrink:0}.page-list{list-style:none}.page-item{padding:6px 12px;cursor:pointer;font-size:13px;color:#ccc;-webkit-user-select:none;user-select:none}.page-item:hover,.page-item.active{background:#2a2d2e}.page-list.focused .page-item.active{background:#37373d;color:#fff}.page-list:focus{outline:none}.canvas-iframe{width:100%;height:100%;border:1px solid #3c3c3c;border-radius:4px;background:#fff}.layer-tree{padding:4px 0;font-size:13px}.layer-node{padding:3px 0;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;color:#ccc}.layer-node:hover,.layer-node.selected{background:#2a2d2e}.layer-tree.focused .layer-node.selected{background:#37373d;color:#fff}.layer-tree:focus{outline:none}.layer-tag{color:#569cd6}.layer-class{color:#9cdcfe;margin-left:4px;font-size:11px}.property-section{padding:8px 12px;border-bottom:1px solid #3c3c3c}.node-ref{cursor:pointer;color:#e2c08d;white-space:nowrap}.node-ref:hover{color:#f5d9a0}.property-value.copyable{cursor:pointer}.property-value.copyable:hover{color:#e0a56a}.property-section-title{font-size:11px;font-weight:600;text-transform:uppercase;color:#969696;margin-bottom:6px}.property-row{display:flex;justify-content:space-between;padding:2px 0;font-size:12px}.property-key{color:#9cdcfe}.property-value{color:#ce9178;text-align:right;max-width:150px;overflow:hidden;text-overflow:ellipsis}.empty-state{padding:24px;text-align:center;color:#969696;font-size:13px}.device-toolbar{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;height:28px;background:#3c3c3c;border-bottom:1px solid #4a4a4a;font-size:12px;line-height:1;color:#ccc;-webkit-user-select:none;user-select:none;flex-shrink:0}.device-toolbar>*{flex-shrink:0}.device-toolbar select{background:transparent;border:none;color:#ccc;padding:0 4px;height:20px;font-size:12px;line-height:20px;outline:none;cursor:pointer}.device-toolbar select:hover{color:#fff}.device-toolbar select:focus{color:#fff}.device-toolbar .dim-input{background:transparent;border:none;border-bottom:1px solid transparent;color:#ccc;padding:0 2px;height:20px;text-align:center;font-size:12px;line-height:20px;outline:none;min-width:3ch}.device-toolbar .dim-input:hover:not(:disabled){border-bottom-color:#666}.device-toolbar .dim-input:focus:not(:disabled){color:#fff;border-bottom-color:#2563eb}.device-toolbar .dim-input:disabled{color:#999;cursor:default;-moz-appearance:textfield}.device-toolbar .dim-input::-webkit-inner-spin-button,.device-toolbar .dim-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.device-toolbar .dim-separator{color:#999;margin:0 -4px;flex-shrink:0}.device-toolbar .toolbar-btn{background:transparent;border:none;color:#999;padding:0 4px;height:20px;border-radius:3px;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.device-toolbar .toolbar-btn:hover{color:#fff}.device-toolbar .toolbar-btn.active{color:#2563eb}.device-toolbar .dpr-badge{font-size:11px;color:#999;height:20px;line-height:20px}.device-toolbar .toolbar-divider{width:1px;height:14px;background:#555;flex-shrink:0}.canvas-area{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;position:relative;padding:24px;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.canvas-area::-webkit-scrollbar{width:6px;height:6px}.canvas-area::-webkit-scrollbar-track{background:transparent}.canvas-area::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.canvas-area::-webkit-scrollbar-thumb:hover{background:#ffffff40}.canvas-area::-webkit-scrollbar-corner{background:transparent}.canvas-area.with-grid{background:repeating-conic-gradient(#1a1a1a,#1a1a1a 25%,#1e1e1e 0%,#1e1e1e 50%) 0 0 / 16px 16px}.iframe-wrapper{flex-shrink:0;overflow:hidden;border-radius:4px}.iframe-wrapper .canvas-iframe{display:block;width:100%;height:100%;border:none;border-radius:4px;background:#fff;box-shadow:0 2px 16px #0006}.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background:#fff3}.os-theme-dark>.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle{background:#ffffff59}.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle.active{background:#ffffff73}.os-theme-dark>.os-scrollbar{--os-size: 6px;--os-padding-perpendicular: 1px;--os-padding-axis: 1px}.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{border:1px solid rgba(255,255,255,.15)}.context-menu{position:fixed;z-index:10000;background:#2d2d2d;border:1px solid #4a4a4a;border-radius:4px;padding:4px 0;min-width:120px;box-shadow:0 4px 12px #00000080}.context-menu-item{padding:6px 12px;font-size:12px;color:#ccc;cursor:pointer;-webkit-user-select:none;user-select:none}.context-menu-item:hover{background:#094771;color:#fff}
+ */.os-size-observer,.os-size-observer-listener{scroll-behavior:auto!important;direction:inherit;pointer-events:none;overflow:hidden;visibility:hidden;box-sizing:border-box}.os-size-observer,.os-size-observer-listener,.os-size-observer-listener-item,.os-size-observer-listener-item-final{writing-mode:horizontal-tb;position:absolute;left:0;top:0}.os-size-observer{z-index:-1;contain:strict;display:flex;flex-direction:row;flex-wrap:nowrap;padding:inherit;border:inherit;box-sizing:inherit;margin:-133px;top:0;right:0;bottom:0;left:0;transform:scale(.1)}.os-size-observer:before{content:"";flex:none;box-sizing:inherit;padding:10px;width:10px;height:10px}.os-size-observer-appear{animation:os-size-observer-appear-animation 1ms forwards}.os-size-observer-listener{box-sizing:border-box;position:relative;flex:auto;padding:inherit;border:inherit;margin:-133px;transform:scale(10)}.os-size-observer-listener.ltr{margin-right:-266px;margin-left:0}.os-size-observer-listener.rtl{margin-left:-266px;margin-right:0}.os-size-observer-listener:empty:before{content:"";width:100%;height:100%}.os-size-observer-listener:empty:before,.os-size-observer-listener>.os-size-observer-listener-item{display:block;position:relative;padding:inherit;border:inherit;box-sizing:content-box;flex:auto}.os-size-observer-listener-scroll{box-sizing:border-box;display:flex}.os-size-observer-listener-item{right:0;bottom:0;overflow:hidden;direction:ltr;flex:none}.os-size-observer-listener-item-final{transition:none}@keyframes os-size-observer-appear-animation{0%{cursor:auto}to{cursor:none}}.os-trinsic-observer{flex:none;box-sizing:border-box;position:relative;max-width:0px;max-height:1px;padding:0;margin:0;border:none;overflow:hidden;z-index:-1;height:0;top:calc(100% + 1px);contain:strict}.os-trinsic-observer:not(:empty){height:calc(100% + 1px);top:-1px}.os-trinsic-observer:not(:empty)>.os-size-observer{width:1000%;height:1000%;min-height:1px;min-width:1px}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport]),[data-overlayscrollbars-viewport~=scrollbarHidden],html[data-overlayscrollbars-viewport~=scrollbarHidden]>body{scrollbar-width:none!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar,[data-overlayscrollbars-initialize]:not([data-overlayscrollbars-viewport])::-webkit-scrollbar-corner,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar,[data-overlayscrollbars-viewport~=scrollbarHidden]::-webkit-scrollbar-corner,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar,html[data-overlayscrollbars-viewport~=scrollbarHidden]>body::-webkit-scrollbar-corner{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;display:none!important;width:0!important;height:0!important}[data-overlayscrollbars-initialize]:not([data-overlayscrollbars]):not(html):not(body){overflow:auto}html[data-overlayscrollbars-body]{overflow:hidden}html[data-overlayscrollbars-body],html[data-overlayscrollbars-body]>body{width:100%;height:100%;margin:0}html[data-overlayscrollbars-body]>body{overflow:visible;margin:0}[data-overlayscrollbars]{position:relative}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{display:flex;align-items:stretch!important;flex-direction:row!important;flex-wrap:nowrap!important;scroll-behavior:auto!important}[data-overlayscrollbars-padding],[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){box-sizing:inherit;position:relative;flex:auto;height:auto;width:100%;min-width:0;padding:0;margin:0;border:none;z-index:0}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]){--os-vaw: 0;--os-vah: 0;outline:none}[data-overlayscrollbars-viewport]:not([data-overlayscrollbars]):focus{outline:none}[data-overlayscrollbars-viewport][data-overlayscrollbars-viewport~=arrange]:before{content:"";position:absolute;pointer-events:none;z-index:-1;min-width:1px;min-height:1px;width:var(--os-vaw);height:var(--os-vah)}[data-overlayscrollbars~=host],[data-overlayscrollbars-padding]{overflow:hidden!important}[data-overlayscrollbars~=host][data-overlayscrollbars~=noClipping],[data-overlayscrollbars-padding~=noClipping]{overflow:visible!important}[data-overlayscrollbars-viewport]{--os-viewport-overflow-x: hidden;--os-viewport-overflow-y: hidden;overflow-x:var(--os-viewport-overflow-x);overflow-y:var(--os-viewport-overflow-y)}[data-overlayscrollbars-viewport~=overflowXVisible]{--os-viewport-overflow-x: visible}[data-overlayscrollbars-viewport~=overflowXHidden]{--os-viewport-overflow-x: hidden}[data-overlayscrollbars-viewport~=overflowXScroll]{--os-viewport-overflow-x: scroll}[data-overlayscrollbars-viewport~=overflowYVisible]{--os-viewport-overflow-y: visible}[data-overlayscrollbars-viewport~=overflowYHidden]{--os-viewport-overflow-y: hidden}[data-overlayscrollbars-viewport~=overflowYScroll]{--os-viewport-overflow-y: scroll}[data-overlayscrollbars-viewport~=overflowImportant]{overflow-x:var(--os-viewport-overflow-x)!important;overflow-y:var(--os-viewport-overflow-y)!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId){font-size:0!important;line-height:0!important}[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):before,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId):after,[data-overlayscrollbars-viewport~=noContent]:not(#osFakeId)>*:not(#osFakeId){display:none!important;position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border-width:0!important}[data-overlayscrollbars-viewport~=measuring],[data-overlayscrollbars-viewport~=scrolling]{scroll-behavior:auto!important;scroll-snap-type:none!important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowXVisible]{overflow-x:hidden!important}[data-overlayscrollbars-viewport~=measuring][data-overlayscrollbars-viewport~=overflowYVisible]{overflow-y:hidden!important}[data-overlayscrollbars-content]{box-sizing:inherit}[data-overlayscrollbars-contents]:not(#osFakeId):not([data-overlayscrollbars-padding]):not([data-overlayscrollbars-viewport]):not([data-overlayscrollbars-content]){display:contents}[data-overlayscrollbars-grid],[data-overlayscrollbars-grid] [data-overlayscrollbars-padding]{display:grid;grid-template:1fr/1fr}[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding],[data-overlayscrollbars-grid]>[data-overlayscrollbars-viewport],[data-overlayscrollbars-grid]>[data-overlayscrollbars-padding]>[data-overlayscrollbars-viewport]{height:auto!important;width:auto!important}@property --os-scroll-percent{syntax: "<number>"; inherits: true; initial-value: 0;}@property --os-viewport-percent{syntax: "<number>"; inherits: true; initial-value: 0;}.os-scrollbar{--os-viewport-percent: 0;--os-scroll-percent: 0;--os-scroll-direction: 0;--os-scroll-percent-directional: calc( var(--os-scroll-percent) - (var(--os-scroll-percent) + (1 - var(--os-scroll-percent)) * -1) * var(--os-scroll-direction) )}.os-scrollbar{contain:size layout;contain:size layout style;transition:opacity .15s,visibility .15s,top .15s,right .15s,bottom .15s,left .15s;pointer-events:none;position:absolute;opacity:0;visibility:hidden}body>.os-scrollbar{position:fixed;z-index:99999}.os-scrollbar-transitionless{transition:none!important}.os-scrollbar-track{position:relative;padding:0!important;border:none!important}.os-scrollbar-handle{position:absolute}.os-scrollbar-track,.os-scrollbar-handle{pointer-events:none;width:100%;height:100%}.os-scrollbar.os-scrollbar-track-interactive .os-scrollbar-track,.os-scrollbar.os-scrollbar-handle-interactive .os-scrollbar-handle{pointer-events:auto;touch-action:none}.os-scrollbar-horizontal{bottom:0;left:0}.os-scrollbar-vertical{top:0;right:0}.os-scrollbar-rtl.os-scrollbar-horizontal{right:0}.os-scrollbar-rtl.os-scrollbar-vertical{right:auto;left:0}.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-auto-hide.os-scrollbar-auto-hide-hidden{opacity:0;visibility:hidden}.os-scrollbar-interaction.os-scrollbar-visible{opacity:1;visibility:visible}.os-scrollbar-unusable,.os-scrollbar-unusable *,.os-scrollbar-wheel,.os-scrollbar-wheel *{pointer-events:none!important}.os-scrollbar-unusable .os-scrollbar-handle{opacity:0!important;transition:none!important}.os-scrollbar-horizontal .os-scrollbar-handle{bottom:0;left:calc(var(--os-scroll-percent-directional) * 100%);transform:translate(calc(var(--os-scroll-percent-directional) * -100%));width:calc(var(--os-viewport-percent) * 100%)}.os-scrollbar-vertical .os-scrollbar-handle{right:0;top:calc(var(--os-scroll-percent-directional) * 100%);transform:translateY(calc(var(--os-scroll-percent-directional) * -100%));height:calc(var(--os-viewport-percent) * 100%)}@supports (container-type: size){.os-scrollbar-track{container-type:size}.os-scrollbar-horizontal .os-scrollbar-handle{left:auto;transform:translate(calc(var(--os-scroll-percent-directional) * 100cqw + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-vertical .os-scrollbar-handle{top:auto;transform:translateY(calc(var(--os-scroll-percent-directional) * 100cqh + var(--os-scroll-percent-directional) * -100%))}.os-scrollbar-rtl.os-scrollbar-horizontal .os-scrollbar-handle{right:auto;left:0}}.os-scrollbar-rtl.os-scrollbar-vertical .os-scrollbar-handle{right:auto;left:0}.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-horizontal.os-scrollbar-cornerless.os-scrollbar-rtl{left:0;right:0}.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless,.os-scrollbar.os-scrollbar-vertical.os-scrollbar-cornerless.os-scrollbar-rtl{top:0;bottom:0}@media print{.os-scrollbar{display:none}}.os-scrollbar{--os-size: 0;--os-padding-perpendicular: 0;--os-padding-axis: 0;--os-track-border-radius: 0;--os-track-bg: none;--os-track-bg-hover: none;--os-track-bg-active: none;--os-track-border: none;--os-track-border-hover: none;--os-track-border-active: none;--os-handle-border-radius: 0;--os-handle-bg: none;--os-handle-bg-hover: none;--os-handle-bg-active: none;--os-handle-border: none;--os-handle-border-hover: none;--os-handle-border-active: none;--os-handle-min-size: 33px;--os-handle-max-size: none;--os-handle-perpendicular-size: 100%;--os-handle-perpendicular-size-hover: 100%;--os-handle-perpendicular-size-active: 100%;--os-handle-interactive-area-offset: 0}.os-scrollbar-track{border:var(--os-track-border);border-radius:var(--os-track-border-radius);background:var(--os-track-bg);transition:opacity .15s,background-color .15s,border-color .15s}.os-scrollbar-track:hover{border:var(--os-track-border-hover);background:var(--os-track-bg-hover)}.os-scrollbar-track:active{border:var(--os-track-border-active);background:var(--os-track-bg-active)}.os-scrollbar-handle{border:var(--os-handle-border);border-radius:var(--os-handle-border-radius);background:var(--os-handle-bg)}.os-scrollbar-handle:hover{border:var(--os-handle-border-hover);background:var(--os-handle-bg-hover)}.os-scrollbar-handle:active{border:var(--os-handle-border-active);background:var(--os-handle-bg-active)}.os-scrollbar-track:before,.os-scrollbar-handle:before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;display:block}.os-scrollbar-horizontal{padding:var(--os-padding-perpendicular) var(--os-padding-axis);right:var(--os-size);height:var(--os-size)}.os-scrollbar-horizontal.os-scrollbar-rtl{left:var(--os-size);right:0}.os-scrollbar-horizontal .os-scrollbar-track:before{top:calc(var(--os-padding-perpendicular) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal .os-scrollbar-handle{min-width:var(--os-handle-min-size);max-width:var(--os-handle-max-size);height:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,height .15s}.os-scrollbar-horizontal .os-scrollbar-handle:before{top:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);bottom:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-horizontal:hover .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-horizontal:active .os-scrollbar-handle{height:var(--os-handle-perpendicular-size-active)}.os-scrollbar-vertical{padding:var(--os-padding-axis) var(--os-padding-perpendicular);bottom:var(--os-size);width:var(--os-size)}.os-scrollbar-vertical .os-scrollbar-track:before{left:calc(var(--os-padding-perpendicular) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical .os-scrollbar-handle{min-height:var(--os-handle-min-size);max-height:var(--os-handle-max-size);width:var(--os-handle-perpendicular-size);transition:opacity .15s,background-color .15s,border-color .15s,width .15s}.os-scrollbar-vertical .os-scrollbar-handle:before{left:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);right:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical.os-scrollbar-rtl .os-scrollbar-handle:before{right:calc((var(--os-padding-perpendicular) + var(--os-handle-interactive-area-offset)) * -1);left:calc(var(--os-padding-perpendicular) * -1)}.os-scrollbar-vertical:hover .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-hover)}.os-scrollbar-vertical:active .os-scrollbar-handle{width:var(--os-handle-perpendicular-size-active)}[data-overlayscrollbars-viewport~=measuring]>.os-scrollbar,.os-theme-none.os-scrollbar{display:none!important}.os-theme-dark,.os-theme-light{box-sizing:border-box;--os-size: 10px;--os-padding-perpendicular: 2px;--os-padding-axis: 2px;--os-track-border-radius: 10px;--os-handle-interactive-area-offset: 4px;--os-handle-border-radius: 10px}.os-theme-dark{--os-handle-bg: rgba(0, 0, 0, .44);--os-handle-bg-hover: rgba(0, 0, 0, .55);--os-handle-bg-active: rgba(0, 0, 0, .66)}.os-theme-light{--os-handle-bg: rgba(255, 255, 255, .44);--os-handle-bg-hover: rgba(255, 255, 255, .55);--os-handle-bg-active: rgba(255, 255, 255, .66)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;overflow:hidden;height:100vh;background:#1e1e1e;color:#ccc}#root{height:100vh}.editor-layout{display:flex;height:100vh}.left-panel{width:240px;background:#252526;border-right:1px solid #4a4a4a;display:flex;flex-direction:column;overflow:hidden}.center-panel{flex:1;background:#1e1e1e;display:flex;flex-direction:column;align-items:stretch;padding:0;min-width:0}.right-panel{width:280px;background:#252526;border-left:1px solid #4a4a4a;display:flex;flex-direction:column;overflow:hidden}.right-panel-top{flex:0 0 35%;display:flex;flex-direction:column;overflow:hidden;border-bottom:1px solid #4a4a4a}.right-panel-top .layer-tree-scroll{flex:1}.right-panel-bottom{flex:1;display:flex;flex-direction:column;overflow:hidden}.right-panel-bottom .properties-scroll,.page-list-scroll{flex:1}.panel-header{height:28px;display:flex;align-items:center;padding:0 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:#969696;background:#3c3c3c;border-bottom:1px solid #4a4a4a;-webkit-user-select:none;user-select:none;flex-shrink:0}.page-list{list-style:none}.page-item{padding:6px 12px;cursor:pointer;font-size:13px;color:#ccc;-webkit-user-select:none;user-select:none}.page-item:hover{background:#2a2d2e}.page-item.active{background:#333639;color:#e0e0e0}.page-list.focused .page-item.active{background:#37373d;color:#fff}.page-list:focus{outline:none}.canvas-iframe{width:100%;height:100%;border:1px solid #3c3c3c;border-radius:4px;background:#fff}.layer-tree{padding:4px 0;font-size:13px}.layer-node{padding:3px 0;cursor:pointer;white-space:nowrap;-webkit-user-select:none;user-select:none;color:#ccc}.layer-node:hover{background:#2a2d2e}.layer-node.selected{background:#333639;color:#e0e0e0}.layer-tree.focused .layer-node.selected{background:#37373d;color:#fff}.layer-tree:focus{outline:none}.layer-tag{color:#569cd6}.layer-class{color:#9cdcfe;margin-left:4px;font-size:11px}.property-section{padding:8px 12px;border-bottom:1px solid #3c3c3c}.node-ref{cursor:pointer;color:#e2c08d;white-space:nowrap}.node-ref:hover{color:#f5d9a0}.property-value.copyable{cursor:pointer}.property-value.copyable:hover{color:#e0a56a}.property-section-title{font-size:11px;font-weight:600;text-transform:uppercase;color:#969696;margin-bottom:6px}.property-row{display:flex;justify-content:space-between;padding:2px 0;font-size:12px}.property-key{color:#9cdcfe}.property-value{color:#ce9178;text-align:right;max-width:150px;overflow:hidden;text-overflow:ellipsis}.empty-state{padding:24px;text-align:center;color:#969696;font-size:13px}.device-toolbar{display:flex;align-items:center;justify-content:center;gap:12px;padding:0 16px;height:28px;background:#3c3c3c;border-bottom:1px solid #4a4a4a;font-size:12px;line-height:1;color:#ccc;-webkit-user-select:none;user-select:none;flex-shrink:0}.device-toolbar>*{flex-shrink:0}.device-toolbar select{background:transparent;border:none;color:#ccc;padding:0 4px;height:20px;font-size:12px;line-height:20px;outline:none;cursor:pointer}.device-toolbar select:hover{color:#fff}.device-toolbar select:focus{color:#fff}.device-toolbar .dim-input{background:transparent;border:none;border-bottom:1px solid transparent;color:#ccc;padding:0 2px;height:20px;text-align:center;font-size:12px;line-height:20px;outline:none;min-width:3ch}.device-toolbar .dim-input:hover:not(:disabled){border-bottom-color:#666}.device-toolbar .dim-input:focus:not(:disabled){color:#fff;border-bottom-color:#2563eb}.device-toolbar .dim-input:disabled{color:#999;cursor:default;-moz-appearance:textfield}.device-toolbar .dim-input::-webkit-inner-spin-button,.device-toolbar .dim-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.device-toolbar .dim-separator{color:#999;margin:0 -4px;flex-shrink:0}.device-toolbar .toolbar-btn{background:transparent;border:none;color:#999;padding:0 4px;height:20px;border-radius:3px;cursor:pointer;font-size:14px;line-height:1;display:inline-flex;align-items:center;justify-content:center}.device-toolbar .toolbar-btn:hover{color:#fff}.device-toolbar .toolbar-btn.active{color:#2563eb}.device-toolbar .dpr-badge{font-size:11px;color:#999;height:20px;line-height:20px}.device-toolbar .toolbar-divider{width:1px;height:14px;background:#555;flex-shrink:0}.canvas-area{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;position:relative;padding:24px;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.canvas-area::-webkit-scrollbar{width:6px;height:6px}.canvas-area::-webkit-scrollbar-track{background:transparent}.canvas-area::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.canvas-area::-webkit-scrollbar-thumb:hover{background:#ffffff40}.canvas-area::-webkit-scrollbar-corner{background:transparent}.canvas-area.with-grid{background:repeating-conic-gradient(#1a1a1a,#1a1a1a 25%,#1e1e1e 0%,#1e1e1e 50%) 0 0 / 16px 16px}.iframe-wrapper{flex-shrink:0;overflow:hidden;border-radius:4px}.iframe-wrapper .canvas-iframe{display:block;width:100%;height:100%;border:none;border-radius:4px;background:#fff;box-shadow:0 2px 16px #0006}.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{background:#fff3}.os-theme-dark>.os-scrollbar:hover>.os-scrollbar-track>.os-scrollbar-handle{background:#ffffff59}.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle.active{background:#ffffff73}.os-theme-dark>.os-scrollbar{--os-size: 6px;--os-padding-perpendicular: 1px;--os-padding-axis: 1px}.os-theme-dark>.os-scrollbar>.os-scrollbar-track>.os-scrollbar-handle{border:1px solid rgba(255,255,255,.15)}.context-menu{position:fixed;z-index:10000;background:#2d2d2d;border:1px solid #4a4a4a;border-radius:4px;padding:4px 0;min-width:120px;box-shadow:0 4px 12px #00000080}.context-menu-item{padding:6px 12px;font-size:12px;color:#ccc;cursor:pointer;-webkit-user-select:none;user-select:none}.context-menu-item:hover{background:#094771;color:#fff}

package/dist/editor/index.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Dekit Editor</title>
-  <script type="module" crossorigin src="/assets/index-yt1AtkL3.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-Bx5YsS46.css">
+  <script type="module" crossorigin src="/assets/index-D16Bm-Rw.js"></script>
+  <link rel="stylesheet" crossorigin href="/assets/index-HLKs1tz-.css">
 </head>
 <body>
   <div id="root"></div>

package/editor/src/App.tsx

@@ -67,10 +67,23 @@ export function App() {
       if (msg.type === "NODE_SELECTED") {
         setSelectedNode(msg.node);
         setSelectedPath(msg.node.path);
-        if (inspectModeRef.current && currentPageRef.current) {
-          navigator.clipboard.writeText(getNodeRef(currentPageRef.current, msg.node.cssSelector));
-          iframeRef.current?.contentWindow?.postMessage({ type: "COPY_FEEDBACK" }, "*");
+      } else if (msg.type === "CONTEXT_MENU") {
+        setSelectedNode(msg.node);
+        setSelectedPath(msg.node.path);
+        // Convert iframe-local coordinates to editor coordinates
+        const iframe = iframeRef.current;
+        if (iframe) {
+          const iframeRect = iframe.getBoundingClientRect();
+          const sf = scaleFactor;
+          setContextMenu({
+            x: iframeRect.left + msg.x * sf,
+            y: iframeRect.top + msg.y * sf,
+            cssSelector: msg.node.cssSelector,
+            page: currentPageRef.current,
+          });
         }
+      } else if (msg.type === "DISMISS_CONTEXT_MENU") {
+        setContextMenu(null);
       } else if (msg.type === "DOM_TREE") {
         setDomTree(msg.tree);
       } else if (msg.type === "INSPECT_KEY") {
@@ -151,15 +164,18 @@ export function App() {
     currentPageRef.current = currentPage;
   }, [currentPage]);
 
-  // Dismiss context menu on click or iframe focus
+  // Dismiss context menu on click, freeze iframe while open
   useEffect(() => {
     if (!contextMenu) return;
+    const iframeWin = iframeRef.current?.contentWindow;
+    iframeWin?.postMessage({ type: "SET_SCROLL_LOCK", enabled: true }, "*");
+    iframeWin?.postMessage({ type: "SET_FROZEN", enabled: true }, "*");
     function dismiss() { setContextMenu(null); }
     window.addEventListener("click", dismiss);
-    window.addEventListener("blur", dismiss);
     return () => {
       window.removeEventListener("click", dismiss);
-      window.removeEventListener("blur", dismiss);
+      iframeWin?.postMessage({ type: "SET_SCROLL_LOCK", enabled: false }, "*");
+      iframeWin?.postMessage({ type: "SET_FROZEN", enabled: false }, "*");
     };
   }, [contextMenu]);
 
@@ -601,10 +617,20 @@ function LayerTreeNode({
   onHover: (path: string | null) => void;
   onContextMenu: (path: string, x: number, y: number) => void;
 }) {
+  const isSelected = node.path === selectedPath;
+  const ref = useCallback(
+    (el: HTMLDivElement | null) => {
+      if (el && isSelected) {
+        el.scrollIntoView({ block: "nearest" });
+      }
+    },
+    [isSelected]
+  );
   return (
     <>
       <div
-        className={`layer-node ${node.path === selectedPath ? "selected" : ""}`}
+        ref={ref}
+        className={`layer-node ${isSelected ? "selected" : ""}`}
         style={{ paddingLeft: 12 + depth * 16 }}
         onClick={() => onSelect(node.path)}
         onMouseEnter={() => onHover(node.path)}

package/editor/src/styles/editor.css

@@ -109,7 +109,8 @@ body {
 }
 
 .page-item.active {
-  background: #2a2d2e;
+  background: #333639;
+  color: #e0e0e0;
 }
 
 .page-list.focused .page-item.active {
@@ -148,7 +149,8 @@ body {
 }
 
 .layer-node.selected {
-  background: #2a2d2e;
+  background: #333639;
+  color: #e0e0e0;
 }
 
 .layer-tree.focused .layer-node.selected {

package/editor/vite.config.ts

@@ -8,4 +8,10 @@ export default defineConfig({
     outDir: "../dist/editor",
     emptyOutDir: true,
   },
+  server: {
+    port: 5173,
+    proxy: {
+      "/api": "http://localhost:7980",
+    },
+  },
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dekit-cli",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "type": "module",
   "description": "A code-first design toolkit for agents and humans — create, preview, and screenshot HTML/CSS designs",
   "keywords": [
@@ -38,7 +38,8 @@
     "dekit": "./bin/dekit.js"
   },
   "scripts": {
-    "dev": "node --import tsx bin/dekit.ts",
+    "dev": "node --import tsx bin/dekit.ts serve -c example/dekit.yaml",
+    "dev:editor": "vite dev --config editor/vite.config.ts",
     "build:editor": "vite build --config editor/vite.config.ts",
     "test": "vitest run",
     "prepublishOnly": "npm run build:editor"

package/src/design-server.ts

@@ -3,15 +3,14 @@ import type { DesignConfig } from "./types.js";
 import { dekitPlugin } from "./vite-plugin-dekit.js";
 
 export async function startDesignServer(
-  configRef: { current: DesignConfig },
-  port: number
+  configRef: { current: DesignConfig }
 ): Promise<ViteDevServer> {
   const server = await createServer({
     configFile: false,
     root: configRef.current.baseDir,
     server: {
-      port,
-      strictPort: true,
+      port: 0,
+      strictPort: false,
       cors: true,
     },
     plugins: [dekitPlugin(configRef)],
@@ -19,6 +18,8 @@ export async function startDesignServer(
   });
 
   await server.listen();
+  const address = server.httpServer!.address();
+  const port = typeof address === "object" && address ? address.port : 0;
   console.log(`  Design server running at http://localhost:${port}`);
   return server;
 }

package/src/injected/inspector.ts

@@ -4,6 +4,7 @@ export function generateInspectorScript(): string {
   let overlay = null;
   let selectedNode = null;
   let inspectEnabled = false;
+  let frozen = false;
   let pageName = '';
 
   function isOverlayEl(el) {
@@ -246,6 +247,12 @@ export function generateInspectorScript(): string {
   }
 
   document.addEventListener('click', function(e) {
+    if (frozen) {
+      e.preventDefault();
+      e.stopPropagation();
+      window.parent.postMessage({ type: 'DISMISS_CONTEXT_MENU' }, '*');
+      return;
+    }
     if (!inspectEnabled) return;
     e.preventDefault();
     e.stopPropagation();
@@ -256,8 +263,24 @@ export function generateInspectorScript(): string {
     window.parent.postMessage({ type: 'NODE_SELECTED', node: info }, '*');
   }, true);
 
+  document.addEventListener('contextmenu', function(e) {
+    e.preventDefault();
+    var node = e.target;
+    if (isOverlayEl(node)) return;
+    selectedNode = node;
+    frozen = true;
+    showOverlay(node);
+    var info = getNodeInfo(node);
+    window.parent.postMessage({
+      type: 'CONTEXT_MENU',
+      node: info,
+      x: e.clientX,
+      y: e.clientY
+    }, '*');
+  }, true);
+
   document.addEventListener('mouseover', function(e) {
-    if (!inspectEnabled) return;
+    if (frozen || !inspectEnabled) return;
     const node = e.target;
     if (isOverlayEl(node)) return;
     showOverlay(node);
@@ -266,7 +289,7 @@ export function generateInspectorScript(): string {
   }, true);
 
   document.addEventListener('mouseout', function(e) {
-    if (!inspectEnabled) return;
+    if (frozen || !inspectEnabled) return;
     const related = e.relatedTarget;
     if (related && isOverlayEl(related)) return;
     hideOverlay();
@@ -318,9 +341,20 @@ export function generateInspectorScript(): string {
       } else {
         if (touchStyle) touchStyle.remove();
       }
+    } else if (msg.type === 'SET_FROZEN') {
+      frozen = !!msg.enabled;
+      if (!frozen) {
+        hideOverlay();
+      }
+    } else if (msg.type === 'SET_SCROLL_LOCK') {
+      if (msg.enabled) {
+        document.body.style.overflow = 'hidden';
+      } else {
+        document.body.style.overflow = '';
+      }
     } else if (msg.type === 'SET_INSPECT_MODE') {
       inspectEnabled = !!msg.enabled;
-      if (!inspectEnabled) {
+      if (!inspectEnabled && !frozen) {
         hideOverlay();
       }
     } else if (msg.type === 'SET_PAGE_NAME') {

package/src/server.ts

@@ -1,27 +1,53 @@
 import type { DesignConfig } from "./types.js";
 import { startDesignServer } from "./design-server.js";
 import { startEditorServer } from "./editor-server.js";
+import { createServer } from "node:net";
+
+const DEFAULT_PORT = 7980;
 
 export interface ServerOptions {
   config: DesignConfig;
-  port: number;
-  designPort: number;
+  port?: number;
   noOpen?: boolean;
 }
 
+async function findAvailablePort(preferred: number): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const srv = createServer();
+    srv.listen(preferred, () => {
+      srv.close(() => resolve(preferred));
+    });
+    srv.on("error", () => {
+      // Preferred port taken, use random
+      const srv2 = createServer();
+      srv2.listen(0, () => {
+        const addr = srv2.address();
+        const port = typeof addr === "object" && addr ? addr.port : 0;
+        srv2.close(() => resolve(port));
+      });
+      srv2.on("error", reject);
+    });
+  });
+}
+
 export async function startServers(options: ServerOptions) {
   const configRef = { current: options.config };
 
   console.log("\n  Dekit Dev Server\n");
 
-  const designServer = await startDesignServer(configRef, options.designPort);
+  const designServer = await startDesignServer(configRef);
+  const designAddr = designServer.httpServer!.address();
+  const designPort =
+    typeof designAddr === "object" && designAddr ? designAddr.port : 0;
+
+  const editorPort = await findAvailablePort(options.port ?? DEFAULT_PORT);
   const editorServer = await startEditorServer(
     configRef,
-    options.port,
-    options.designPort
+    editorPort,
+    designPort
   );
 
-  const editorUrl = `http://localhost:${options.port}`;
+  const editorUrl = `http://localhost:${editorPort}`;
   console.log(`\n  Open ${editorUrl} in your browser\n`);
 
   // Try to open browser

package/src/vite-plugin-dekit.ts

@@ -34,6 +34,7 @@ export async function assemblePageHtml(
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <script type="module" src="/@vite/client"></script>
   <link rel="stylesheet" href="/@design/${config.globalStyle}">
   <link rel="stylesheet" href="/@design/${pageDef.style}">
 </head>