@composy/layout-vue 0.0.1

package/dist/index.min.css

@@ -0,0 +1 @@
+:root{color:#172033;background:#eef2f7;font-family:Inter,"Segoe UI","Microsoft YaHei",sans-serif;font-synthesis:none}*{box-sizing:border-box}#app,body,html{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:0}button{font:inherit}button:focus-visible{outline:#5b7cfa solid 2px;outline-offset:2px}.layout-demo{--ink:#172033;--muted:#768198;--line:#dce3ed;--line-strong:#c7d1df;--panel:#fff;--canvas:#f5f7fb;--topbar:rgb(255 255 255 / 92%);--stage:#fff;--stage-header:rgb(250 251 255 / 88%);--card:#fff;--card-line:#d8def0;--checker-a:#e7e9ed;--checker-b:#f8f9fb;--accent:#536df1;--accent-soft:#eef0ff;--shadow:0 16px 40px rgb(36 52 82 / 8%);width:100%;height:100%;min-width:0;min-height:0;display:grid;grid-template-rows:82px minmax(0,1fr);overflow:hidden;background:var(--canvas);color:var(--ink)}.topbar{min-width:0;min-height:0;position:relative;z-index:60;padding:10px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;overflow:visible;background:var(--topbar);border-bottom:1px solid var(--line);box-shadow:0 1px 0 rgb(255 255 255 / 80%)}.actions,.brand,.breakpoint-button,.material-source,.mode-button,.route-tabs,.route-tabs button{display:flex;align-items:center}.brand{min-width:150px;gap:10px}.brand-copy{min-width:0;display:grid;gap:2px}.brand-copy strong{color:var(--ink);font-size:14px;line-height:1.1;white-space:nowrap}.brand-copy span{color:var(--muted);font-size:10px;white-space:nowrap}.topbar-center{min-width:0;display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none}.topbar-center__shell{min-width:-moz-max-content;min-width:max-content;padding:4px 6px;display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--panel) 86%,#f0f3fa);box-shadow:0 5px 18px rgb(49 68 104 / 6%)}.topbar-center__section{display:flex;align-items:center;gap:7px}.device-select,.workspace-mode{min-height:34px;display:inline-flex;align-items:center;gap:7px;padding:0 10px;border:1px solid transparent;border-radius:9px;color:var(--muted)}.workspace-mode{color:var(--accent);font-size:12px;font-weight:700;white-space:nowrap}.development-mode{position:relative;min-width:124px;min-height:36px;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel) 86%,#eef1f7);color:var(--ink);box-shadow:0 4px 12px rgb(49 68 104 / 5%)}.development-mode.is-open,.development-mode:hover{border-color:var(--accent);background:var(--panel);color:var(--accent);box-shadow:0 0 0 3px rgb(88 105 241 / 10%)}.development-mode .custom-select__trigger{min-width:122px;min-height:34px;font-size:11px;font-weight:700}.development-mode__menu{min-width:226px;right:0;left:auto}.development-mode__menu .custom-select__option{min-height:44px}.development-mode__menu .custom-select__option>span{min-width:0;display:grid;gap:2px}.development-mode__menu strong{color:inherit;font-size:11px;font-weight:700}.development-mode__menu small{color:var(--muted);font-size:9px;line-height:1.2}.workspace-mode__hint{padding-left:7px;border-left:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:500}.device-select{position:relative;padding:0;background:color-mix(in srgb,var(--panel) 72%,#eef1f7)}.device-select.is-open,.device-select:hover{border-color:var(--line);background:var(--panel);color:var(--ink)}.custom-select__trigger{min-height:32px;display:inline-flex;align-items:center;gap:7px;min-width:104px;padding:0 9px;border:0;border-radius:inherit;background:0 0;color:inherit;cursor:pointer;font-size:11px;text-align:left}.custom-select__trigger svg:last-child{margin-left:auto;transition:transform 140ms}.custom-select.is-open .custom-select__trigger svg:last-child{transform:rotate(180deg)}.custom-select__menu{position:absolute;z-index:40;top:calc(100% + 7px);left:0;min-width:154px;padding:5px;display:grid;gap:2px;border:1px solid var(--line);border-radius:11px;background:var(--panel);box-shadow:0 14px 32px rgb(37 53 91 / 16%);animation:140ms ease-out select-menu-in}.custom-select__option{min-height:31px;display:flex;align-items:center;gap:7px;padding:0 8px;border:0;border-radius:7px;background:0 0;color:var(--muted);cursor:pointer;font-size:11px;text-align:left}.custom-select__option:hover,.custom-select__option[aria-selected=true]{background:var(--accent-soft);color:var(--accent)}.custom-select__option-meta{margin-left:auto;color:var(--muted);font-size:9px}@keyframes select-menu-in{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.orientation-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid transparent;border-radius:8px;background:color-mix(in srgb,var(--panel) 72%,#eef1f7);color:var(--muted);cursor:pointer;transition:140ms}.orientation-button:hover,.orientation-button[aria-pressed=true]{border-color:var(--line);background:var(--panel);color:var(--accent)}.topbar-center__label{padding:0 2px 0 4px;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.08em;white-space:nowrap}.topbar-center__divider{width:1px;height:24px;background:var(--line)}.topbar-center::-webkit-scrollbar{display:none}.brand-mark{width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;border-radius:11px;background:linear-gradient(145deg,#5f74f6,#8495ff);color:#fff;font-size:18px;font-weight:800;box-shadow:0 8px 18px rgb(83 109 241 / 25%)}.actions svg,.brand-mark svg,.breakpoint-icon svg,.inspector-icon svg,.material-add svg,.material-icon svg,.panel-tip>svg,.route-icon{display:block;flex:0 0 auto}.brand span,.brand strong{display:block}.brand strong{font-size:14px;letter-spacing:.01em}.brand div>span{margin-top:3px;color:var(--muted);font-size:11px}.actions{min-width:0;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;scrollbar-gutter:stable}.route-tabs{flex:0 0 auto;gap:2px;padding:2px;border-radius:9px;background:color-mix(in srgb,var(--panel) 72%,#eef1f7)}.breakpoint-tabs{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:2px;border-radius:9px;background:color-mix(in srgb,var(--panel) 72%,#eef1f7)}.breakpoint-tab{min-height:30px;padding:4px 8px;display:inline-flex;align-items:center;gap:5px;border:0;border-radius:7px;background:0 0;color:#7a8498;cursor:pointer;white-space:nowrap;transition:140ms}.breakpoint-tab:hover{color:var(--ink);background:#fff}.breakpoint-tab[aria-pressed=true]{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgb(38 52 82 / 10%)}.breakpoint-download-button{display:none}.route-tabs button{gap:5px;min-height:30px;padding:4px 9px;border:0;border-radius:7px;background:0 0;color:#6a7488;cursor:pointer;white-space:nowrap;transition:140ms}.route-tabs button:hover{color:var(--ink);background:rgb(255 255 255 / 70%)}.route-tabs button[aria-current=page]{background:#fff;color:var(--accent);box-shadow:0 2px 8px rgb(38 52 82 / 10%)}.route-icon{color:currentColor}.actions button{border:1px solid transparent;border-radius:8px;background:0 0;color:#68748a;cursor:pointer;transition:140ms}.actions button:hover:not(:disabled){border-color:var(--line);background:#fff;color:var(--ink)}.actions button:disabled{opacity:.35;cursor:not-allowed}.icon-button{width:32px;height:32px;flex:0 0 32px;display:grid!important;place-items:center;font-size:20px;line-height:1}.icon-button:nth-of-type(5){color:#e36c7e}.mode-button{flex:0 0 auto;gap:6px;min-height:32px;padding:0 11px;border-color:#cbd4ff!important;background:var(--accent-soft)!important;color:#4d63dc!important;font-size:12px;font-weight:700}.mode-button span:first-child{font-size:16px}.preview-open-button{min-height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid #cbd4ff!important;border-radius:8px;background:#fff!important;color:#536df1!important;cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap}.preview-open-button:hover{background:var(--accent-soft)!important;box-shadow:0 5px 14px rgb(83 109 241 / 12%)}.workspace{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(290px,330px) minmax(0,1fr) minmax(320px,400px);overflow:hidden}.panel-scroll{min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin}.materials{padding:16px 16px 18px;display:flex;flex-direction:column;align-items:stretch;gap:9px;background:linear-gradient(180deg,var(--panel) 0,color-mix(in srgb,var(--panel) 94%,var(--canvas)) 100%);border-right:1px solid var(--line)}.inspector-heading,.panel-heading{min-width:0;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.panel-heading{padding:0 3px 4px}.materials .panel-heading .eyebrow{display:none}.materials .panel-heading h2{margin:0;font-size:18px;letter-spacing:-.03em}.panel-heading--breakpoint{margin-top:18px}.eyebrow,.stage-kicker{display:block;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.inspector-heading h2,.panel-heading h2{margin:3px 0 0;font-size:14px;line-height:1.15}.breakpoint-icon,.inspector-icon,.panel-count{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:700}.material-toolbar{position:relative;z-index:10;display:grid;gap:6px;padding-bottom:4px;margin:0 0 2px;border-bottom:1px solid color-mix(in srgb,var(--line) 76%,transparent)}.material-search{display:flex;align-items:center;gap:7px;min-height:38px;padding:0 11px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--panel) 78%,#fff);color:var(--muted)}.material-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgb(88 105 241 / 10%)}.material-search input{width:100%;min-width:0;border:0;outline:0;background:0 0;color:var(--ink);font:inherit;font-size:11px}.material-filter-row{min-width:0;position:relative;z-index:20;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:6px}.material-select{min-width:0;min-height:34px;position:relative;display:flex;align-items:center;padding:0;border:1px solid var(--line);border-radius:10px;background:color-mix(in srgb,var(--panel) 78%,#eef2f8);color:var(--muted)}.material-select:hover{border-color:var(--accent);color:var(--accent)}.material-select.is-open{z-index:30;border-color:var(--accent);background:var(--panel);color:var(--ink);box-shadow:0 0 0 3px rgb(88 105 241 / 10%)}.material-select .custom-select__trigger{width:100%;min-width:0;padding:0 8px;font-size:10px}.material-select .custom-select__trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.material-select .custom-select__menu{min-width:max(100%,180px);max-width:min(260px,calc(100vw - 32px));max-height:min(280px,calc(100vh - 180px));overflow-y:auto}.material-select:nth-child(2) .custom-select__menu{right:0;left:auto}.material-filter-reset{width:28px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:0 0;color:var(--muted);cursor:pointer}.material-filter-reset:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.material-result-summary{min-height:16px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 2px;color:var(--muted);font-size:10px}.material-result-summary span:last-child{color:var(--accent)}.material-category-list{display:flex;gap:5px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}.material-category-list::-webkit-scrollbar{display:none}.material-category-button{flex:0 0 auto;min-height:25px;padding:0 9px;border:1px solid transparent;border-radius:7px;background:0 0;color:var(--muted);cursor:pointer;font:inherit;font-size:10px}.material-category-button.active,.material-category-button:hover{border-color:rgb(88 105 241 / 18%);background:var(--accent-soft);color:var(--accent)}.material-empty{min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px 12px;border:1px dashed var(--line-strong);border-radius:12px;background:color-mix(in srgb,var(--panel) 76%,var(--canvas));color:var(--muted);font-size:11px;text-align:center}.material-empty svg{color:var(--accent)}.material-empty strong{color:var(--ink);font-size:12px}.material-empty span{font-size:10px}.material-empty button{min-height:28px;margin-top:4px;padding:0 10px;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;font:inherit;font-size:10px}.material-empty button:hover{background:color-mix(in srgb,var(--accent-soft) 72%,var(--accent))}.material-source{min-height:72px;gap:9px;padding:11px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);text-align:left;cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none;box-shadow:0 4px 14px rgb(48 65 95 / 6%);transition:140ms;display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;align-items:center}.material-source:hover{border-color:#bcc6ff;background:#fbfbff;transform:translateY(-1px);box-shadow:0 8px 18px rgb(68 87 164 / 12%)}.material-source:active{cursor:grabbing;transform:translateY(0)}.material-copy,.material-source>span:nth-child(2){min-width:0;flex:1}.material-size{flex:0 0 auto;align-self:flex-start;padding:3px 5px;border-radius:5px;background:var(--accent-soft);color:var(--accent);font-size:9px;font-variant-numeric:tabular-nums}.material-card-meta{min-width:0;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}.material-renderer-badges{display:flex;align-items:center;gap:3px}.material-renderer-badge{display:inline-flex;align-items:center;gap:3px;padding:2px 4px;border-radius:5px;background:#edf5ff;color:#4381d9;font-size:8px;line-height:1;white-space:nowrap}.material-renderer-badge--vue{background:#eaf8f1;color:#3f9a74}.material-source small,.material-source strong{display:block}.material-source strong{font-size:12px}.material-source small{margin-top:3px;color:var(--muted);font-size:10px}.material-icon{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border-radius:8px}.material-icon--metric{background:#edf5ff;color:#4381d9}.material-icon--chart{background:#f2eeff;color:#8167dd}.material-add{display:grid;place-items:center;color:#a1abc0}.breakpoint-button{min-height:42px;gap:9px;padding:8px 9px;border:1px solid transparent;border-radius:9px;background:0 0;color:#69758b;text-align:left;cursor:pointer}.breakpoint-button:hover{background:#f6f8fc;color:var(--ink)}.breakpoint-button[aria-pressed=true]{border-color:#ccd4ff;background:var(--accent-soft);color:#4d63dc}.breakpoint-button span:nth-child(2){flex:1;font-size:12px;font-weight:700}.breakpoint-button small{color:#a0a9b9;font-size:10px}.breakpoint-dot{width:7px;height:7px;border-radius:50%;background:#c8d0dc}.breakpoint-button[aria-pressed=true] .breakpoint-dot{background:var(--accent);box-shadow:0 0 0 4px rgb(83 109 241 / 14%)}.panel-tip{margin-top:auto;padding:10px;display:flex;gap:7px;align-items:flex-start;border-radius:9px;background:#f7f8fb;color:#8993a5;font-size:10px;line-height:1.55}.panel-tip>svg{color:var(--accent)}.canvas{position:relative;padding:20px;display:flex;flex-direction:column;gap:10px;background-color:var(--checker-a);background-image:linear-gradient(45deg,var(--checker-b) 25%,transparent 25%),linear-gradient(-45deg,var(--checker-b) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--checker-b) 75%),linear-gradient(-45deg,transparent 75%,var(--checker-b) 75%);background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0}.canvas-toolbar{position:sticky;top:0;z-index:30;align-self:stretch;width:100%;min-height:38px;padding:4px;display:flex;align-items:center;justify-content:flex-end;gap:3px;border:0;background:0 0;box-shadow:none;pointer-events:none}.canvas-toolbar>*{pointer-events:auto}.canvas-device-control{position:absolute;z-index:35;left:0;top:4px;min-height:34px;padding:0;border:1px solid;border-radius:10px;background:var(--topbar);box-shadow:0 8px 22px rgb(67 84 122 / 12%),inset 0 1px 0 rgb(255 255 255 / 80%);backdrop-filter:blur(12px)}.canvas-device-control.is-open,.canvas-device-control:hover{border-color:var(--line-strong);background:var(--panel);color:var(--ink)}.canvas-device-control .custom-select__trigger{min-width:112px}.canvas-device-control .custom-select__menu{top:calc(100% + 7px);left:0}.canvas-device-control+.orientation-button{position:absolute;z-index:35;top:4px;left:120px;border:1px solid;background:var(--topbar);box-shadow:0 8px 22px rgb(67 84 122 / 12%),inset 0 1px 0 rgb(255 255 255 / 80%);backdrop-filter:blur(12px)}.canvas-device-control+.orientation-button+.canvas-toolbar__divider{display:none}.canvas-toolbar__group{display:flex;align-items:center;gap:2px}.canvas-toolbar__divider{width:1px;height:20px;margin:0 3px;background:var(--line)}.canvas-tool-button{width:29px;height:29px;display:grid;place-items:center;border:0;border-radius:8px;background:0 0;color:#7a879d;cursor:pointer;transition:background 140ms,color 140ms,transform 140ms}.canvas-tool-button:hover{background:#f0f3ff;color:var(--accent)}.canvas-tool-button:active{transform:scale(.94)}.canvas-tool-button.active{background:var(--accent-soft);color:var(--accent);box-shadow:inset 0 0 0 1px rgb(83 109 241 / 12%)}.canvas-zoom-label{min-width:42px;color:#5f6d84;font-size:11px;font-variant-numeric:tabular-nums;font-weight:700;text-align:center}.canvas-viewport{position:relative;flex:0 0 auto;min-width:0;min-height:620px;overflow:visible;border-radius:16px;touch-action:none;cursor:default}.canvas-viewport.is-pan-tool{cursor:grab}.canvas-viewport.is-panning{cursor:grabbing}.canvas-scene{width:100%;min-width:0;transform-origin:0 0;will-change:transform}.editor-stage,.preview-stage,.runtime-preview-stage,.vanilla-runtime-stage{flex:0 0 auto;min-width:0;min-height:620px;display:flex;flex-direction:column;height:auto;overflow:visible;border:1px solid var(--line);border-radius:14px;background:var(--stage);box-shadow:var(--shadow)}.editor-stage::before,.preview-stage::before,.runtime-preview-stage::before,.vanilla-runtime-stage::before{content:"";height:3px;flex:0 0 3px;background:linear-gradient(90deg,#5b73f2,#9c83ff 55%,#74cbb1)}.stage-header{min-height:62px;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);background:var(--stage-header)}.stage-header h2{margin:4px 0 0;font-size:15px;line-height:1.15}.stage-kicker{color:var(--muted);font-size:10px;font-weight:700}.stage-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:10px;white-space:nowrap}.stage-badge i{width:6px;height:6px;border-radius:50%;background:#62c49c;box-shadow:0 0 0 3px rgb(98 196 156 / 15%)}.layout-editor-grid,.ldesign-layout-grid,.runtime-preview-grid{flex:0 0 auto;min-width:0;min-height:558px;padding:16px;position:relative;isolation:isolate;background:var(--stage);--gs-cell-height:8px;--gs-item-margin-top:16px!important;--gs-item-margin-bottom:0px!important;--gs-item-margin-left:16px!important;--gs-item-margin-right:0px!important}.layout-editor-grid.gs-12{--gs-column-width:calc((100% - 16px) / 12)!important}.layout-editor-grid.gs-8{--gs-column-width:calc((100% - 16px) / 8)!important;--gs-item-margin-bottom:-4px!important}.layout-editor-grid.gs-4{--gs-column-width:calc((100% - 16px) / 4)!important;--gs-item-margin-bottom:-8px!important}.layout-editor-grid .grid-stack-item-content{padding:0;overflow:hidden;border:0;border-radius:12px;background:0 0;color:var(--ink);cursor:grab}.layout-editor-grid .grid-stack-item-content:active,.layout-editor-grid .ui-draggable-dragging .grid-stack-item-content,.layout-editor-grid.grid-stack-dragging .grid-stack-item-content{cursor:grabbing}.layout-editor-grid .grid-stack-item.ui-draggable-dragging,.layout-editor-grid .grid-stack-item.ui-resizable-resizing,.layout-editor-grid .ui-draggable-dragging{transition:none!important;will-change:left,top,width,height}body>.ui-draggable-dragging[data-layout-material]{transition:none!important;animation:none!important;will-change:left,top}.layout-editor-grid .grid-stack-placeholder>.placeholder-content{border:1px dashed;border-radius:12px;background:rgb(83 109 241 / 10%);box-shadow:inset 0 0 0 1px rgb(255 255 255 / 45%)}.layout-editor-grid::after{content:"拖入物料开始布局";inset:50% auto auto 50%;z-index:-1;transform:translate(-50%,-50%);color:#a8b2c5;font-size:12px;letter-spacing:.08em;pointer-events:none}.layout-editor-grid:has(.grid-stack-item)::after{opacity:0}.layout-editor-grid .grid-stack-item.is-selected .grid-stack-item-content{outline:2px solid var(--accent);outline-offset:-2px;border-radius:12px}.layout-editor-grid .grid-stack-item:focus-visible .grid-stack-item-content{outline:#12a594 solid 2px;outline-offset:-4px}.ldesign-layout-grid{flex:1 0 auto;min-height:max(180px,min(558px,var(--canvas-grid-height,558px)))}.runtime-preview-grid{flex:1 0 auto}.layout-card,.layout-item-shell{position:relative;width:100%;height:100%;min-width:0;min-height:0}.layout-item-shell{display:block;padding:0;overflow:hidden;border:0;background:0 0;color:inherit}.layout-item-shell--interactive{cursor:pointer}.layout-card{min-height:84px;padding:14px;display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--card-line);border-radius:12px;background:linear-gradient(145deg,rgb(255 255 255 / 98%),rgb(248 249 255 / 94%)),var(--card);color:var(--ink);box-shadow:0 10px 24px rgb(71 86 132 / 9%),inset 0 1px 0 rgb(255 255 255 / 80%);transition:border-color 160ms,box-shadow 160ms,transform 160ms}.layout-card__actions{position:absolute;z-index:2;top:9px;right:9px;display:flex;align-items:center;gap:3px;opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity 140ms,transform 140ms;isolation:isolate}.layout-editor-grid .grid-stack-item.is-selected .layout-card__actions,.layout-editor-grid .grid-stack-item:hover .layout-card__actions{opacity:1;transform:translateY(0);pointer-events:auto}.layout-card__action{position:relative;z-index:3;width:24px;height:24px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:7px;background:color-mix(in srgb,var(--panel) 94%,transparent);color:var(--muted);cursor:pointer;pointer-events:auto;box-shadow:0 3px 8px rgb(37 53 91 / 10%);transition:color 140ms,border-color 140ms,background 140ms,transform 140ms}.layout-card__action:hover{border-color:#9aa9ff;background:var(--accent-soft);color:var(--accent);transform:translateY(-1px)}.layout-card__footer,.layout-card__meta{display:flex;align-items:center;justify-content:space-between;gap:8px}.layout-card__meta{color:#8590a5;font-size:10px}.layout-card__type{color:var(--accent);font-weight:700}.layout-card__status{padding:2px 5px;border-radius:4px;background:#edf8f3;color:#4aaf84;white-space:nowrap}.layout-card__title{margin:10px 0 7px;overflow:hidden;color:#273249;font-size:13px;font-weight:700;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.layout-card__value{display:block;color:#25345a;font-size:clamp(20px, 2.2vw, 30px);line-height:1;letter-spacing:-.04em}.layout-card__chart{height:36px;display:flex;align-items:flex-end;gap:5px;padding:0 3px}.layout-card__chart i{width:100%;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#8b9cff,#5e72ed)}.layout-card__chart i:first-child{height:38%}.layout-card__chart i:nth-child(2){height:62%}.layout-card__chart i:nth-child(3){height:48%}.layout-card__chart i:nth-child(4){height:82%}.layout-card__chart i:nth-child(5){height:100%}.layout-card__footer{margin-top:auto;padding-top:12px;color:#9aa3b4;font-size:10px}.layout-card__spark{color:#56b78e;font-size:15px;font-weight:700}.layout-item-shell[aria-pressed=true] .layout-card,.widget.selected .layout-card{border-color:#8392f6;box-shadow:0 0 0 2px rgb(83 109 241 / 18%),0 10px 22px rgb(71 86 132 / 12%)}.layout-editor-grid .grid-stack-item:hover .layout-card,.layout-item-shell--interactive:hover .layout-card{border-color:#aab6f7;box-shadow:0 0 0 2px rgb(83 109 241 / 12%),0 14px 28px rgb(71 86 132 / 14%)}.inspectors{padding:18px 14px;display:flex;flex-direction:column;gap:12px;background:var(--panel);color:var(--ink);border-left:1px solid var(--line);overflow:auto}.inspector-heading{align-items:center;padding:2px 3px 0;flex:0 0 auto}.inspector-heading>div:first-child{min-width:0;flex:1}.inspector-heading h2{color:var(--ink)}.inspector-heading .eyebrow{color:var(--muted)}.inspector-icon{background:var(--accent-soft);color:var(--accent);font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.copy-code-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;transition:140ms}.copy-code-button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent-soft) 72%,#fff);color:var(--accent)}.download-code-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;transition:140ms}.download-code-button:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line));background:color-mix(in srgb,var(--accent-soft) 72%,#fff);color:var(--accent)}.code-block{min-height:0;height:0;flex:1 1 0;margin:0;padding:12px;overflow:auto;border:1px solid var(--line);border-radius:9px;background:#f7f9fc;color:#263653;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.65;-moz-tab-size:2;-o-tab-size:2;tab-size:2;white-space:pre;scrollbar-width:thin}.code-block code{display:block;min-width:-moz-max-content;min-width:max-content;color:inherit}.code-token-comment{color:#8b96a8;font-style:italic}.code-token-keyword,.code-token-tag{color:#7257d8}.code-token-attribute,.code-token-property{color:#197d9a}.code-token-string{color:#b05b2b}.code-token-constant,.code-token-number{color:#b43d78}.code-status{display:flex;align-items:center;gap:7px;padding:0 3px 2px;flex:0 0 auto;color:var(--muted);font-size:10px;line-height:1.4}.material-card-actions{display:inline-flex;align-items:center;gap:3px;justify-self:end}.material-code-button{width:25px;height:25px;display:grid;place-items:center;padding:0;border:1px solid transparent;border-radius:7px;background:0 0;color:var(--muted);cursor:pointer;transition:140ms}.material-code-button:focus-visible,.material-code-button:hover{border-color:color-mix(in srgb,var(--accent) 28%,var(--line));background:var(--accent-soft);color:var(--accent);outline:0}.code-status__dot{width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#60c99b;box-shadow:0 0 0 3px rgb(96 201 155 / 14%)}.preview-dialog{--ink:#172033;--muted:#768198;--line:#dce3ed;--panel:#fff;--canvas:#f5f7fb;--stage:#fff;--card:#fff;--card-line:#d8def0;--accent:#536df1;--accent-soft:#eef0ff;position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:28px;color:var(--ink)}.preview-dialog-enter-active,.preview-dialog-leave-active{transition:opacity 180ms}.preview-dialog-enter-active .preview-dialog__panel,.preview-dialog-leave-active .preview-dialog__panel{transition:transform 220ms cubic-bezier(.22, 1, .36, 1),opacity 180ms}.preview-dialog-enter-from,.preview-dialog-leave-to{opacity:0}.preview-dialog-enter-from .preview-dialog__panel,.preview-dialog-leave-to .preview-dialog__panel{opacity:0;transform:translateY(14px) scale(.975)}.preview-dialog__backdrop{position:absolute;inset:0;border:0;background:rgb(20 31 51 / 42%);cursor:default;backdrop-filter:blur(6px)}.preview-dialog__panel{position:relative;z-index:1;width:min(1080px,100%);max-height:min(820px,calc(100vh - 56px));display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--panel);box-shadow:0 28px 80px rgb(31 46 78 / 26%)}.preview-dialog__footer,.preview-dialog__header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;border-bottom:1px solid var(--line)}.preview-dialog__header h2{margin:4px 0 0;font-size:17px}.preview-dialog__header-meta{display:flex;align-items:center;gap:8px}.preview-dialog__header .icon-button{width:32px;height:32px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted);cursor:pointer;transition:140ms}.preview-dialog__header .icon-button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);transform:rotate(6deg)}.preview-dialog__body{min-height:0;flex:1 1 auto;overflow:auto;padding:18px;background:var(--canvas)}.preview-dialog__canvas{min-height:520px;padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--stage);box-shadow:inset 0 1px 0 rgb(255 255 255 / 70%)}.preview-dialog__canvas .ldesign-layout-grid{min-height:480px;padding:0;background:0 0}.preview-dialog__card{height:100%}.preview-dialog__footer{border-top:1px solid var(--line);border-bottom:0;color:var(--muted);font-size:11px}.preview-dialog__close-button{min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:var(--accent-soft);color:var(--accent);cursor:pointer;font-size:11px;font-weight:700}.preview-dialog__close-button:hover{border-color:var(--accent)}.material-code-dialog__panel{width:min(820px,100%)}.material-code-dialog__subtitle{margin:5px 0 0;color:var(--muted);font-size:11px}.material-code-dialog__body{min-height:0;padding:16px}.material-code-dialog__code{min-height:360px;max-height:min(560px,calc(100vh - 250px));margin:0;border:1px solid var(--line);border-radius:12px;background:color-mix(in srgb,var(--stage) 82%,var(--canvas))}.material-code-dialog__actions{display:inline-flex;align-items:center;gap:8px}.material-code-dialog__actions .copy-code-button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--muted);cursor:pointer}.material-code-dialog__actions .copy-code-button:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}.preview-dialog[data-theme=dark]{--ink:#edf2ff;--muted:#95a3be;--line:#34405a;--panel:#192238;--canvas:#121a2d;--stage:#202b43;--card:#1d2940;--card-line:#405071;--accent:#8ea2ff;--accent-soft:#293762}.preview-dialog[data-theme=dark] .preview-dialog__backdrop{background:rgb(4 8 18 / 64%)}.preview-dialog[data-theme=dark] .preview-dialog__canvas{box-shadow:inset 0 1px 0 rgb(255 255 255 / 4%)}.preview-dialog[data-theme=dark] .layout-card{background:linear-gradient(145deg,rgb(39 53 80 / 98%),rgb(29 41 64 / 96%)),var(--card);box-shadow:0 10px 24px rgb(2 8 22 / 30%),inset 0 1px 0 rgb(255 255 255 / 5%)}.preview-dialog[data-theme=dark] .layout-card__title{color:#edf2ff}.preview-dialog[data-theme=dark] .layout-card__value{color:#dbe4ff}.preview-dialog[data-theme=dark] .layout-card__footer,.preview-dialog[data-theme=dark] .layout-card__meta{color:#a8b6d0}@media (max-width:1080px){.workspace{grid-template-columns:minmax(190px,230px) minmax(0,1fr) minmax(260px,320px)}.topbar{gap:10px;padding-inline:12px}.brand{min-width:132px}.route-tabs button{padding-inline:7px}.route-tabs button>span:last-child{display:none}.breakpoint-tab{padding-inline:7px}.breakpoint-tab span{display:none}.canvas{padding:14px}}@media (max-width:720px){.layout-demo{grid-template-rows:70px minmax(0,1fr)}.brand-copy{display:none}.workspace{grid-template-columns:minmax(118px,0.8fr) minmax(0,1.8fr) minmax(170px,1fr)}.inspectors,.materials{padding-inline:9px}.canvas{padding:9px}.stage-header{padding-inline:11px}.stage-header h2{font-size:13px}.stage-badge{padding-inline:6px}.stage-badge i{display:none}.material-source{align-items:flex-start}.breakpoint-button small,.material-source>span:nth-child(2) small,.panel-tip{display:none}.topbar-center{order:3;flex:1 1 100%}.topbar{gap:8px;padding-inline:10px;flex-wrap:wrap}.actions{margin-left:auto}.breakpoint-tabs{display:none}.layout-card{padding:10px}.layout-card__footer{padding-top:7px}}.layout-demo[data-theme=dark]{--ink:#edf2ff;--muted:#93a1bb;--line:#2d3a50;--line-strong:#43516a;--panel:#151e2e;--canvas:#0e1625;--topbar:rgb(17 25 39 / 94%);--stage:#172235;--stage-header:rgb(24 36 56 / 96%);--card:#1d2a40;--card-line:#3b4b68;--checker-a:#1a2638;--checker-b:#223047;--accent:#90a2ff;--accent-soft:#29345d;--shadow:0 18px 42px rgb(0 0 0 / 28%);background:var(--canvas)}.layout-demo[data-theme=dark] .breakpoint-tabs,.layout-demo[data-theme=dark] .route-tabs{background:#1b273b}.layout-demo[data-theme=dark] .topbar-center__shell{background:#151f31;border-color:#2d3a50;box-shadow:0 8px 20px rgb(0 0 0 / 18%)}.layout-demo[data-theme=dark] .canvas-device-control,.layout-demo[data-theme=dark] .development-mode,.layout-demo[data-theme=dark] .device-select,.layout-demo[data-theme=dark] .orientation-button,.layout-demo[data-theme=dark] .workspace-mode{background:#1b273b;color:#a7b3c9}.layout-demo[data-theme=dark] .workspace-mode{background:0 0;color:#b7c2ff}.layout-demo[data-theme=dark] .development-mode.is-open,.layout-demo[data-theme=dark] .development-mode:hover{border-color:#455aab;background:#25324b;color:var(--accent)}.layout-demo[data-theme=dark] .workspace-mode__hint{border-color:#34435d;color:#8190aa}.layout-demo[data-theme=dark] .canvas-device-control.is-open,.layout-demo[data-theme=dark] .canvas-device-control:hover,.layout-demo[data-theme=dark] .device-select.is-open,.layout-demo[data-theme=dark] .device-select:hover,.layout-demo[data-theme=dark] .orientation-button:hover,.layout-demo[data-theme=dark] .orientation-button[aria-pressed=true]{border-color:#455aab;background:#25324b;color:var(--accent)}.layout-demo[data-theme=dark] .custom-select__menu{border-color:#36455f;background:#17243a;box-shadow:0 16px 34px rgb(0 0 0 / 32%)}.layout-demo[data-theme=dark] .custom-select__option:hover,.layout-demo[data-theme=dark] .custom-select__option[aria-selected=true]{background:#26365b;color:#c5ceff}.layout-demo[data-theme=dark] .preview-open-button{border-color:#455aab!important;background:#202d4d!important;color:#c5ceff!important}.layout-demo[data-theme=dark] .breakpoint-tab,.layout-demo[data-theme=dark] .route-tabs button{color:#a7b3c9}.layout-demo[data-theme=dark] .breakpoint-tab:hover,.layout-demo[data-theme=dark] .breakpoint-tab[aria-pressed=true],.layout-demo[data-theme=dark] .route-tabs button:hover,.layout-demo[data-theme=dark] .route-tabs button[aria-current=page]{background:#25324b;color:var(--accent)}.layout-demo[data-theme=dark] .actions button:hover:not(:disabled),.layout-demo[data-theme=dark] .canvas-tool-button:hover{background:#273552;color:var(--accent)}.layout-demo[data-theme=dark] .material-source{background:#1b293e;border-color:var(--line);box-shadow:0 6px 16px rgb(0 0 0 / 18%)}.layout-demo[data-theme=dark] .material-search{background:#17243a}.layout-demo[data-theme=dark] .material-select{background:#1b293e}.layout-demo[data-theme=dark] .material-category-button.active,.layout-demo[data-theme=dark] .material-category-button:hover,.layout-demo[data-theme=dark] .material-filter-reset:hover{background:#26365b}.layout-demo[data-theme=dark] .material-source:hover{background:#22324e;border-color:#5c6fbb}.layout-demo[data-theme=dark] .breakpoint-button[aria-pressed=true],.layout-demo[data-theme=dark] .panel-count{background:var(--accent-soft)}.layout-demo[data-theme=dark] .breakpoint-button{color:#a0aec5}.layout-demo[data-theme=dark] .breakpoint-button:hover{background:#202e47}.layout-demo[data-theme=dark] .panel-tip{background:#1a2639;color:#8999b5}.layout-demo[data-theme=dark] .stage-badge{background:#1f2d45}.layout-demo[data-theme=dark] .layout-card{background:var(--card);color:var(--ink);box-shadow:0 12px 26px rgb(0 0 0 / 20%),inset 0 1px 0 rgb(255 255 255 / 4%)}.layout-demo[data-theme=dark] .layout-card__action{border-color:#40516e;background:#1b2940;color:#a8b6d0}.layout-demo[data-theme=dark] .layout-card__title{color:#eef3ff}.layout-demo[data-theme=dark] .layout-card__value{color:#dbe3ff}.layout-demo[data-theme=dark] .layout-card__footer,.layout-demo[data-theme=dark] .layout-card__meta{color:#9caac1}.layout-demo[data-theme=dark] .layout-editor-grid::after{color:#7889a5}.layout-demo[data-theme=dark] .inspectors{background:#101827;color:#e9eff9;border-left-color:rgb(10 19 34 / 12%)}.layout-demo[data-theme=dark] .copy-code-button,.layout-demo[data-theme=dark] .download-code-button{border-color:rgb(153 170 210 / 16%);background:rgb(117 137 255 / 12%);color:#aab5ff}.layout-demo[data-theme=dark] .copy-code-button:hover,.layout-demo[data-theme=dark] .download-code-button:hover{border-color:rgb(153 170 210 / 34%);background:rgb(117 137 255 / 22%);color:#fff}.layout-demo[data-theme=dark] .code-block{background:#192438;color:#cad5ea;border-color:rgb(153 170 210 / 12%)}.layout-demo[data-theme=dark] .code-token-comment{color:#71819e}.layout-demo[data-theme=dark] .code-token-keyword,.layout-demo[data-theme=dark] .code-token-tag{color:#c4b5fd}.layout-demo[data-theme=dark] .code-token-attribute,.layout-demo[data-theme=dark] .code-token-property{color:#80d8ee}.layout-demo[data-theme=dark] .code-token-string{color:#f3b18a}.layout-demo[data-theme=dark] .code-token-constant,.layout-demo[data-theme=dark] .code-token-number{color:#f3a6cb}.layout-demo[data-theme=dark] .code-status{color:#7f8da6}.layout-demo[data-theme=dark] .mode-button{border-color:#5265b8!important;background:#27345c!important;color:#c5ceff!important}

package/dist/index.min.js

@@ -0,0 +1 @@
+(function(global,factory){typeof exports==="object"&&typeof module!=="undefined"?factory(exports,require("vue"),require("@composy/layout-runtime"),require("@composy/layout-core"),require("@composy/layout-editor"),require("gridstack"),require("gridstack/dist/gridstack.min.css"),require("lucide"),require("lucide-vue-next"),require("@composy/layout-compiler"),require("@composy/layout-gridstack")):typeof define==="function"&&define.amd?define(["exports","vue","@composy/layout-runtime","@composy/layout-core","@composy/layout-editor","gridstack","gridstack/dist/gridstack.min.css","lucide","lucide-vue-next","@composy/layout-compiler","@composy/layout-gridstack"],factory):(global=typeof globalThis!=="undefined"?globalThis:global||self,factory(global.LDesignLayoutVue={},global.Vue,global.ComposyLayoutRuntime,global.ComposyLayoutCore,global.ComposyLayoutEditor,global.Gridstack,global["gridstack/dist/gridstack"].min.css,global.Lucide,global.LucideVueNext,global.ComposyLayoutCompiler,global.ComposyLayoutGridstack));})(this,function(exports,vue,_composy_layout_runtime,_composy_layout_core,_composy_layout_editor,gridstack,gridstack_dist_gridstack_min_css,lucide,lucide_vue_next,_composy_layout_compiler,_composy_layout_gridstack){Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function resolveRegistry(source){if(!source)return void 0;if(Array.isArray(source))return(0,_composy_layout_core.createMaterialRegistry)(source);return source;}function resolveMaterialDefinition(materials,type){return resolveRegistry(materials)?.get(type);}function renderMaterialFallback(materials,item,placement,breakpointId){const material=resolveMaterialDefinition(materials,item.type);const context={item,placement,breakpointId};const vueRenderer=material?.renderers?.vue;if(vueRenderer?.component)return(0,vue.h)(vueRenderer.component,{...item.props??{},...vueRenderer.tagName?{is:vueRenderer.tagName}:{}});const webComponentRenderer=material?.renderers?.webcomponent;if(webComponentRenderer?.tagName)return(0,vue.h)(webComponentRenderer.tagName,{...item.props??{},materialProps:{...item.props??{}}});const htmlRenderer=material?.renderers?.html;if(htmlRenderer?.render){const rendered=htmlRenderer.render(context);if(typeof rendered==="string")return(0,vue.h)("div",{innerHTML:sanitizeMarkup(rendered)});return rendered;}if(htmlRenderer?.tagName)return(0,vue.h)(htmlRenderer.tagName,{...item.props??{}});}function renderMaterialForTarget(materials,item,target,placement,breakpointId="desktop"){const material=resolveMaterialDefinition(materials,item.type);const props={...item.props??{}};if(target==="vue"){const renderer=material?.renderers?.vue;if(renderer?.component)return(0,vue.h)(renderer.component,props);}else{const renderer=material?.renderers?.webcomponent;if(renderer?.tagName)return(0,vue.h)(renderer.tagName,{...props,materialProps:props,onVnodeMounted:(vnode)=>{const el=vnode.el;if(el&&"materialProps" in el)el.materialProps=props;},onVnodeUpdated:(vnode)=>{const el=vnode.el;if(el&&"materialProps" in el)el.materialProps=props;}});}const htmlRenderer=material?.renderers?.html;if(htmlRenderer?.render){const rendered=htmlRenderer.render({item,placement:placement??item.layout[breakpointId]??{x:0,y:0,w:1,h:1},breakpointId});if(typeof rendered==="string")return(0,vue.h)("div",{innerHTML:sanitizeMarkup(rendered)});return rendered;}if(htmlRenderer?.tagName)return(0,vue.h)(htmlRenderer.tagName,props);return renderMaterialFallback(materials,item,placement??item.layout[breakpointId]??{x:0,y:0,w:1,h:1},breakpointId);}function sanitizeMarkup(value){return value.replace(/<script\b[^>]*>[\s\S]*?<\/script\s*>/gi,"").replace(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi,"").replace(/\s+(?:href|src)\s*=\s*("|')\s*javascript:[^"']*\1/gi,"");}const LGrid=(0,vue.defineComponent)({name:"LGrid",props:{document:{type:Object,required:true},breakpoint:{type:String,default:void 0},readonly:{type:Boolean,default:false},materials:{type:[Object,Array],default:void 0},target:{type:String,default:"vue"}},setup(props,{slots,expose}){const root=(0,vue.ref)();const activeBreakpoint=(0,vue.ref)(props.breakpoint??props.document.defaultBreakpointId);const resolved=(0,vue.computed)(()=>props.document.breakpoints.find((bp)=>bp.id===activeBreakpoint.value)??props.document.breakpoints[0]);const gridStyle=(0,vue.computed)(()=>(0,_composy_layout_runtime.resolveGridStyle)(props.document,resolved.value.id));const resize=()=>{if(props.breakpoint||!root.value)return;const width=root.value.getBoundingClientRect().width;const match=props.document.breakpoints.find((bp)=>(bp.minWidth===void 0||width>=bp.minWidth)&&(bp.maxWidth===void 0||width<bp.maxWidth));activeBreakpoint.value=match?.id??props.document.defaultBreakpointId;};let observer;(0,vue.onMounted)(()=>{if(typeof ResizeObserver!=="undefined"&&root.value){observer=new ResizeObserver(resize);observer.observe(root.value);}resize();});(0,vue.onBeforeUnmount)(()=>observer?.disconnect());(0,vue.watch)(()=>props.breakpoint,(value)=>{activeBreakpoint.value=value??props.document.defaultBreakpointId;});expose({getBreakpoint:()=>activeBreakpoint.value});return()=>(0,vue.h)("div",{ref:root,class:"ldesign-layout-grid",style:gridStyle.value,dir:gridStyle.value.direction},props.document.items.map((item)=>{const placement=item.layout[activeBreakpoint.value];if(!placement||placement.hidden)return null;return(0,vue.h)("div",{class:"ldesign-layout-item","data-layout-item-id":item.id,"data-layout-type":item.type,style:(0,_composy_layout_runtime.resolveItemStyle)(item,activeBreakpoint.value),tabindex:props.readonly?void 0:0},slots.item?.({item,placement,breakpointId:activeBreakpoint.value})??slots.default?.({item,placement,breakpointId:activeBreakpoint.value})??renderMaterialForTarget(props.materials,item,props.target,placement,activeBreakpoint.value));}));}});const LGridItem=(0,vue.defineComponent)({name:"LGridItem",props:{item:{type:Object,required:true},placement:{type:Object,required:true},breakpointId:{type:String,required:true},materials:{type:[Object,Array],default:void 0},target:{type:String,default:"vue"}},setup(props,{slots}){return()=>(0,vue.h)("div",{class:"ldesign-layout-item","data-layout-item-id":props.item.id,"data-layout-type":props.item.type},slots.default?.({item:props.item,placement:props.placement,breakpointId:props.breakpointId})??renderMaterialForTarget(props.materials,props.item,props.target,props.placement,props.breakpointId));}});const LMaterialRenderer=(0,vue.defineComponent)({name:"LMaterialRenderer",props:{item:{type:Object,required:true},materials:{type:[Object,Array],default:void 0},target:{type:String,default:"vue"},placement:{type:Object,default:void 0},breakpointId:{type:String,default:"desktop"}},setup(props,{attrs}){return()=>{const rendered=renderMaterialForTarget(props.materials,props.item,props.target,props.placement,props.breakpointId);if(!rendered)return null;return(0,vue.h)(rendered,attrs);};}});const LLayoutEditor=(0,vue.defineComponent)({name:"LLayoutEditor",props:{document:{type:Object,required:true},engine:{type:Object,required:true},mode:{type:String,default:"edit"},preview:Object,materials:{type:Object,default:void 0}},emits:["update:document","change","ready"],setup(props,{slots,emit,expose}){const editor=(0,vue.shallowRef)((0,_composy_layout_editor.createLayoutEditor)({document:props.document,engine:props.engine,materials:props.materials,preview:props.preview}));let lastEmittedDocument=JSON.stringify(props.document);(0,vue.onMounted)(()=>{editor.value.on("document:change",(event)=>{lastEmittedDocument=JSON.stringify(event.document);emit("update:document",event.document);emit("change",event);});editor.value.mount();editor.value.setMode(props.mode);emit("ready",editor.value);});(0,vue.watch)(()=>props.document,(value)=>{const next=JSON.stringify(value);if(next!==lastEmittedDocument){editor.value.load(value);lastEmittedDocument=next;}});(0,vue.watch)(()=>props.mode,(value)=>editor.value.setMode(value));const onKeydown=(event)=>{editor.value.handleKeyboard(event);};(0,vue.onBeforeUnmount)(()=>editor.value.destroy());expose({editor});return()=>(0,vue.h)("div",{class:"ldesign-layout-editor","data-layout-mode":props.mode,"aria-keyshortcuts":"ArrowLeft ArrowRight ArrowUp ArrowDown Delete Control+C Control+V Control+X Control+D",onKeydown},slots.default?.({editor:editor.value}));}});const LMetricCard=(0,vue.defineComponent)({name:"LMetricCard",props:{title:{type:String,default:"数据指标"},value:{type:[String,Number],default:void 0}},setup(props){return()=>(0,vue.h)("article",{class:"layout-card","data-layout-card":""},[(0,vue.h)("div",{class:"layout-card__meta"},[(0,vue.h)("span",{class:"layout-card__type"},"数据指标"),(0,vue.h)("span",{class:"layout-card__status"},"已配置")]),(0,vue.h)("h3",{class:"layout-card__title"},props.title),props.value===void 0?null:(0,vue.h)("strong",{class:"layout-card__value"},Number(props.value).toLocaleString("zh-CN")),(0,vue.h)("div",{class:"layout-card__footer"},[(0,vue.h)("span",null,"实时数据"),(0,vue.h)("span",{class:"layout-card__spark"},"趋势稳定")])]);}});const LTrendCard=(0,vue.defineComponent)({name:"LTrendCard",props:{title:{type:String,default:"趋势图表"}},setup(props){return()=>(0,vue.h)("article",{class:"layout-card","data-layout-card":""},[(0,vue.h)("div",{class:"layout-card__meta"},[(0,vue.h)("span",{class:"layout-card__type"},"趋势图表"),(0,vue.h)("span",{class:"layout-card__status"},"已配置")]),(0,vue.h)("h3",{class:"layout-card__title"},props.title),(0,vue.h)("span",{class:"layout-card__chart","aria-hidden":"true"},Array.from({length:5},(_,index)=>(0,vue.h)("i",{key:index}))),(0,vue.h)("div",{class:"layout-card__footer"},[(0,vue.h)("span",null,"实时数据"),(0,vue.h)("span",{class:"layout-card__spark"},"趋势稳定")])]);}});const _hoisted_1=["data-theme","data-development-framework"];const _hoisted_2={class:"topbar"};const _hoisted_3={class:"brand"};const _hoisted_4={class:"brand-mark","aria-hidden":"true"};const _hoisted_5=["aria-expanded","title"];const _hoisted_6={key:0,class:"custom-select__menu development-mode__menu",role:"listbox"};const _hoisted_7=["aria-selected","onClick"];const _hoisted_8={class:"topbar-center","aria-hidden":"true",style:{"display":"none"}};const _hoisted_9={class:"route-tabs","aria-label":"工作区模式"};const _hoisted_10=["aria-current","aria-label","title","onClick"];const _hoisted_11={class:"breakpoint-tabs","aria-label":"画布尺寸"};const _hoisted_12=["aria-pressed","aria-label","title","onClick"];const _hoisted_13={class:"actions"};const _hoisted_14=["disabled"];const _hoisted_15=["disabled"];const _hoisted_16=["disabled"];const _hoisted_17=["aria-label","title","disabled"];const _hoisted_18=["aria-label","title","disabled"];const _hoisted_19=["aria-label","title","disabled"];const _hoisted_20=["aria-label","title"];const _hoisted_21=["aria-pressed","aria-label","title"];const _hoisted_22={class:"workspace"};const _hoisted_23={class:"materials panel-scroll","data-layout-panel":"materials","aria-label":"物料面板"};const _hoisted_24={class:"panel-heading"};const _hoisted_25={class:"panel-count"};const _hoisted_26={class:"material-toolbar"};const _hoisted_27={class:"material-search"};const _hoisted_28=["onKeydown"];const _hoisted_29=["aria-expanded","title"];const _hoisted_30={key:0,class:"custom-select__menu",role:"listbox"};const _hoisted_31=["aria-selected"];const _hoisted_32=["aria-selected","onClick"];const _hoisted_33={class:"material-result-summary"};const _hoisted_34={key:0};const _hoisted_35={key:0,class:"material-empty"};const _hoisted_36=["data-material-type","data-layout-material","data-layout-props","aria-label","onClick","onKeydown"];const _hoisted_37={class:"material-icon material-icon--metric","aria-hidden":"true"};const _hoisted_38={class:"material-copy"};const _hoisted_39={class:"material-card-meta"};const _hoisted_40={class:"material-size"};const _hoisted_41={class:"material-renderer-badges"};const _hoisted_42=["title"];const _hoisted_43={class:"material-card-actions"};const _hoisted_44=["onClick"];const _hoisted_45={class:"material-add","aria-hidden":"true"};const _hoisted_50={class:"canvas panel-scroll","data-layout-panel":"canvas","aria-label":"布局画布"};const _hoisted_51={class:"canvas-toolbar","aria-label":"画布操作"};const _hoisted_52=["aria-expanded"];const _hoisted_53={key:0,class:"custom-select__menu",role:"listbox"};const _hoisted_54=["aria-selected","aria-label","onClick"];const _hoisted_55={class:"custom-select__option-meta"};const _hoisted_56=["aria-label","title"];const _hoisted_57={class:"canvas-toolbar__group"};const _hoisted_58={class:"canvas-zoom-label","aria-live":"polite"};const _hoisted_59=["data-canvas-width","data-canvas-height","data-canvas-orientation"];const _hoisted_60={class:"editor-stage","aria-label":"可视化编辑画布"};const _hoisted_61={class:"stage-header"};const _hoisted_62={class:"stage-badge"};const _hoisted_63={class:"preview-stage","aria-label":"组件预览画布"};const _hoisted_64=["aria-label","onClick"];const _hoisted_65=["data-preview-framework"];const _hoisted_66={class:"stage-header"};const _hoisted_67={class:"stage-badge"};const _hoisted_68=["data-preview-framework"];const _hoisted_69={class:"stage-header"};const _hoisted_70={class:"stage-badge"};const _hoisted_71={class:"inspectors panel-scroll","data-layout-panel":"inspector","aria-label":"代码检查面板"};const _hoisted_72={class:"inspector-heading"};const _hoisted_73=["aria-label","title"];const _hoisted_74={class:"code-block","data-code-output":""};const _hoisted_75=["innerHTML"];const _hoisted_76={class:"code-status"};const _hoisted_77=["data-preview-framework","data-theme"];const _hoisted_78={class:"preview-dialog__panel"};const _hoisted_79={class:"preview-dialog__header"};const _hoisted_80={class:"preview-dialog__header-meta"};const _hoisted_81={class:"stage-badge"};const _hoisted_82={class:"preview-dialog__body"};const _hoisted_83={class:"preview-dialog__canvas"};const _hoisted_84=["data-material-code-framework","data-material-code-type","data-theme"];const _hoisted_85={class:"preview-dialog__panel material-code-dialog__panel"};const _hoisted_86={class:"preview-dialog__header"};const _hoisted_87={id:"material-code-title"};const _hoisted_88={class:"material-code-dialog__subtitle"};const _hoisted_89={class:"preview-dialog__header-meta"};const _hoisted_90={class:"stage-badge"};const _hoisted_91={class:"preview-dialog__body material-code-dialog__body"};const _hoisted_92={class:"code-block material-code-dialog__code"};const _hoisted_93=["innerHTML"];const _hoisted_94={class:"preview-dialog__footer"};const _hoisted_95={class:"material-code-dialog__actions"};const _hoisted_96=["aria-label","title"];var LLayoutWorkspace_vue_vue_type_script_setup_true_lang_default=(0,vue.defineComponent)({__name:"LLayoutWorkspace",props:{document:{type:Object,required:false},materials:{type:[Object,Array],required:false},theme:{type:String,required:false}},emits:["update:document","change"],setup(__props,{emit:__emit}){const workspaceProps=__props;const workspaceEmit=__emit;const routes=[{id:"editor",label:"编辑",description:"可视化编辑工作区"},{id:"vanilla",label:"原生",description:"原生运行时渲染"},{id:"runtime",label:"预览",description:"网格布局运行时预览"},{id:"vue",label:"组件",description:"组件适配器"}];const breakpointIcons={desktop:lucide_vue_next.Monitor,tablet:lucide_vue_next.Tablet,mobile:lucide_vue_next.Smartphone};const routeIcons={editor:lucide_vue_next.Grid2X2,vanilla:lucide_vue_next.Code2,runtime:lucide_vue_next.Eye,vue:lucide_vue_next.PanelsTopLeft};const developmentFrameworks=[{id:"webcomponent",label:"原生",description:"原生 Web Component 物料",icon:lucide_vue_next.Code2},{id:"vue",label:"Vue 3",description:"Vue 3 组件物料",icon:lucide_vue_next.PanelsTopLeft}];function developmentFrameworkLabel(framework){if(framework==="webcomponent")return "原生";return "Vue 3";}function escapeHtml(value){return value.replace(/[&<>'"]/g,(character)=>({"&":"&amp;","<":"&lt;",">":"&gt;","'":"&#39;","\"":"&quot;"})[character]??character);}function itemTitle(item){return String(item.props?.title??item.id);}function materialLabel(type){return materials.get(type)?.title??materials.get(type)?.label??type;}function formatMarkup(value){const tokens=value.replace(/></g,">\n<").split("\n");let depth=0;return tokens.map((token)=>{const line=token.trim();if(!line)return "";if(line.startsWith("</"))depth=Math.max(0,depth-1);const formatted=`${" ".repeat(depth)}${line}`;if(line.startsWith("<")&&!line.startsWith("</")&&!line.startsWith("<!")&&!line.startsWith("<?")&&!line.endsWith("/>")&&!/^<(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\b/i.test(line))depth+=1;return formatted;}).filter(Boolean).join("\n");}function formatCss(value){let depth=0;return value.replace(/\s*\{\s*/g,"{\n").replace(/\s*;\s*/g,";\n").replace(/\s*}\s*/g,"\n}\n").split("\n").map((line)=>line.trim()).filter(Boolean).map((line)=>{if(line.startsWith("}"))depth=Math.max(0,depth-1);const formatted=`${" ".repeat(depth)}${line}`;if(line.endsWith("{"))depth+=1;return formatted;}).join("\n");}function breakpointLabel(id){return id==="desktop"?"桌面":id==="tablet"?"平板":"手机";}function lucideMarkup(name){if(typeof document==="undefined")return "";const element=(0,lucide.createElement)(lucide.icons[name]);element.setAttribute("width","13");element.setAttribute("height","13");element.setAttribute("stroke-width","1.9");element.setAttribute("aria-hidden","true");return element.outerHTML;}function renderCardMarkup(item,options={}){const type=materialLabel(item.type);const title=escapeHtml(itemTitle(item));const value=item.props?.value;const valueMarkup=value===void 0?`<span class="layout-card__chart" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i></span>`:`<strong class="layout-card__value">${escapeHtml(new Intl.NumberFormat("zh-CN").format(Number(value)))}</strong>`;return `<article class="layout-card" data-layout-card data-layout-type="${escapeHtml(item.type)}">${options.interactive?`<div class="layout-card__actions" data-layout-actions><button class="layout-card__action" type="button" data-layout-action="copy" aria-disabled="false" aria-label="\u590D\u5236\u7269\u6599" title="\u590D\u5236\u7269\u6599">${lucideMarkup("Copy")}</button><button class="layout-card__action" type="button" data-layout-action="delete" aria-disabled="false" aria-label="\u5220\u9664\u7269\u6599" title="\u5220\u9664\u7269\u6599">${lucideMarkup("Trash2")}</button><button class="layout-card__action" type="button" data-layout-action="lock" aria-disabled="false" aria-label="${item.state?.locked?"解锁物料":"锁定物料"}" title="${item.state?.locked?"解锁物料":"锁定物料"}">${lucideMarkup(item.state?.locked?"Unlock":"Lock")}</button></div>`:""}<div class="layout-card__meta"><span class="layout-card__type">${escapeHtml(type)}</span><span class="layout-card__status">\u5DF2\u914D\u7F6E</span></div><h3 class="layout-card__title">${title}</h3>${valueMarkup}<div class="layout-card__footer"><span>\u5B9E\u65F6\u6570\u636E</span><span class="layout-card__spark">\u8D8B\u52BF\u7A33\u5B9A</span></div></article>`;}function renderExportMaterialMarkup(item){const tagName=(materials.get(item.type)?.renderers?.webcomponent)?.tagName;if(!tagName||!/^[a-z][a-z0-9.-]*$/i.test(tagName))return renderCardMarkup(item);const attributes=Object.entries(item.props??{}).filter(([,value])=>value!==void 0&&value!==null).filter(([,value])=>typeof value!=="object"&&typeof value!=="function").map(([key,value])=>`${key.replace(/[^a-zA-Z0-9:_.-]/g,"-")}="${escapeHtml(String(value))}"`).join(" ");return `<${tagName}${attributes?` ${attributes}`:""}></${tagName}>`;}function ensureWorkspaceMaterialElement(tagName,type){if(typeof customElements==="undefined"||!/^[a-z][a-z0-9.-]*$/i.test(tagName)||customElements.get(tagName))return;class LayoutMaterialElement extends HTMLElement{constructor(){super(...arguments);this.props={};}static get observedAttributes(){return["title","value"];}set materialProps(value){this.props={...value??{}};this.render();}connectedCallback(){this.render();}attributeChangedCallback(){if(!Object.keys(this.props).length)this.render();}attributeProps(){const result={};for(const attribute of Array.from(this.attributes)){if(attribute.name==="class"||attribute.name==="style")continue;result[attribute.name]=attribute.name==="value"&&attribute.value!==""&&!Number.isNaN(Number(attribute.value))?Number(attribute.value):attribute.value;}return result;}render(){const props=Object.keys(this.props).length?this.props:this.attributeProps();this.style.display="block";this.style.width="100%";this.style.height="100%";this.innerHTML=renderCardMarkup({id:`native-${type}`,type,layout:{},props});}}customElements.define(tagName,LayoutMaterialElement);}function setNativeRuntimeCard(shell,item){const tagName=(materials.get(item.type)?.renderers?.webcomponent)?.tagName;shell.className="layout-item-shell";shell.dataset.layoutType=item.type;shell.dataset.materialRenderer="webcomponent";if(!tagName||!/^[a-z][a-z0-9.-]*$/i.test(tagName)){shell.innerHTML=renderCardMarkup(item);return;}ensureWorkspaceMaterialElement(tagName,item.type);const element=shell.ownerDocument.createElement(tagName);element.materialProps={...item.props??{}};shell.replaceChildren(element);}function setRuntimeCard(shell,item){if(activeDevelopmentFramework.value==="webcomponent"){setNativeRuntimeCard(shell,item);return;}shell.className="layout-item-shell";shell.dataset.layoutType=item.type;shell.dataset.materialRenderer="vue";shell.innerHTML=renderCardMarkup(item);}function parseRoute(value){const id=value.replace(/^#\/?/,"");return routes.some((route)=>route.id===id)?id:"editor";}const builtinMaterials=[{type:"metric",order:1,title:"数据指标",category:"data",categoryLabel:"数据组件",description:"数值与摘要",keywords:["指标","数值","KPI"],tags:["数据","卡片"],defaultLayout:{w:4,h:8},size:{default:{w:4,h:8},min:{w:2,h:4},max:{w:12,h:20},step:{w:1,h:1}},constraints:{movable:true,resizable:true},defaults:{title:"新建指标",value:0},renderers:{html:{kind:"html",tagName:"article"},webcomponent:{kind:"webcomponent",tagName:"ldesign-metric-card"},vue:{kind:"vue",package:"@composy/layout-vue",exportName:"LMetricCard",component:LMetricCard}}},{type:"chart",order:2,title:"趋势图表",category:"visual",categoryLabel:"可视化组件",description:"变化与走向",keywords:["趋势","图表","分析"],tags:["可视化","卡片"],defaultLayout:{w:4,h:10},size:{default:{w:4,h:10},min:{w:3,h:6},max:{w:12,h:24},step:{w:1,h:1}},constraints:{movable:true,resizable:true},defaults:{title:"营收趋势"},renderers:{html:{kind:"html",tagName:"article"},webcomponent:{kind:"webcomponent",tagName:"ldesign-trend-card"},vue:{kind:"vue",package:"@composy/layout-vue",exportName:"LTrendCard",component:LTrendCard}}}];function resolveWorkspaceMaterials(input){if(!input)return(0,_composy_layout_core.createMaterialRegistry)(builtinMaterials);if(!Array.isArray(input))return input;return(0,_composy_layout_core.createMaterialRegistry)(input);}const materials=resolveWorkspaceMaterials(workspaceProps.materials);const initial=workspaceProps.document??(0,_composy_layout_core.createLayoutDocument)({id:"layout-alpha-demo",breakpoints:_composy_layout_core.responsiveWebBreakpoints.map((item)=>({...item})),defaultBreakpointId:"desktop",items:[{id:"sales",type:"metric",props:{title:"月度销售额",value:12840},layout:{desktop:{x:0,y:0,w:4,h:10},tablet:{x:0,y:0,w:4,h:10},mobile:{x:0,y:0,w:4,h:8}}},{id:"orders",type:"metric",props:{title:"待处理订单",value:86},layout:{desktop:{x:4,y:0,w:4,h:10},tablet:{x:4,y:0,w:4,h:10},mobile:{x:0,y:8,w:4,h:8}}},{id:"revenue",type:"chart",props:{title:"营收预测"},layout:{desktop:{x:8,y:0,w:4,h:18},tablet:{x:0,y:10,w:8,h:14},mobile:{x:0,y:16,w:4,h:12}}}]});const editorGrid=(0,vue.ref)();const canvasViewport=(0,vue.ref)();const runtimePreview=(0,vue.ref)();const vanillaRuntime=(0,vue.ref)();const previewDialogRuntime=(0,vue.ref)();const materialQuery=(0,vue.ref)("");const activeMaterialCategory=(0,vue.ref)();const activeDevelopmentFramework=(0,vue.ref)("vue");const materialElements=new Map();const materialSourceDisposers=new Map();const materialCategories=(0,vue.computed)(()=>materials.getCategories());const activeMaterialCategoryLabel=(0,vue.computed)(()=>{if(!activeMaterialCategory.value)return "全部分类";return materialCategories.value.find((category)=>category.id===activeMaterialCategory.value)?.label??"全部分类";});const activeDevelopmentFrameworkLabel=(0,vue.computed)(()=>developmentFrameworkLabel(activeDevelopmentFramework.value));const materialCategoryFilter=(0,vue.computed)({get:()=>activeMaterialCategory.value??"",set:(value)=>{activeMaterialCategory.value=value||void 0;}});const hasMaterialFilters=(0,vue.computed)(()=>Boolean(materialQuery.value.trim())||Boolean(activeMaterialCategory.value));const visibleMaterials=(0,vue.computed)(()=>materials.search({query:materialQuery.value,category:activeMaterialCategory.value,framework:activeDevelopmentFramework.value}));const layout=(0,vue.ref)(structuredClone(initial));const selected=(0,vue.ref)();const selectedIds=(0,vue.ref)([]);const activeBreakpoint=(0,vue.ref)("desktop");const canvasOrientation=(0,vue.ref)("landscape");const deviceMenuOpen=(0,vue.ref)(false);const categoryMenuOpen=(0,vue.ref)(false);const developmentModeMenuOpen=(0,vue.ref)(false);const copied=(0,vue.ref)(false);const previewMode=(0,vue.ref)(false);const previewDialogOpen=(0,vue.ref)(false);const materialCodeDialog=(0,vue.ref)();const materialCodeCopied=(0,vue.ref)(false);const activeRoute=(0,vue.ref)("editor");const theme=(0,vue.ref)(workspaceProps.theme??"light");const canvasZoom=(0,vue.ref)(1);const canvasPan=(0,vue.ref)({x:0,y:0});const canvasTool=(0,vue.ref)("select");const canvasPanning=(0,vue.ref)(false);const canvasSpacePressed=(0,vue.ref)(false);const canvasPanOrigin=(0,vue.ref)({x:0,y:0,panX:0,panY:0});let editor;let vanillaRuntimeInstance;let previewDialogRuntimeInstance;let previousGridStackRenderCallback;let interactionPreviewFrame;const disposers=[];const currentDocument=(0,vue.computed)(()=>layout.value);const canvasSize=(0,vue.computed)(()=>{return{desktop:{landscape:{width:1200,height:760},portrait:{width:760,height:1200}},tablet:{landscape:{width:1024,height:768},portrait:{width:768,height:1024}},mobile:{landscape:{width:844,height:390},portrait:{width:390,height:844}}}[activeBreakpoint.value]?.[canvasOrientation.value]??{width:1200,height:760};});const activeBreakpointIcon=(0,vue.computed)(()=>breakpointIcons[activeBreakpoint.value]??lucide_vue_next.Monitor);(0,vue.computed)(()=>JSON.stringify(currentDocument.value,null,2));const compiledResult=(0,vue.computed)(()=>(0,_composy_layout_compiler.compileLayout)(currentDocument.value,{target:"html-css",breakpointId:activeBreakpoint.value,materials,materialCompiler:{supports:()=>true,compile:(item)=>renderExportMaterialMarkup(item)}}));const compiled=(0,vue.computed)(()=>formatCss(compiledResult.value.css??""));const htmlSource=(0,vue.computed)(()=>{const result=compiledResult.value;return `<style>${compiled.value}</style>${formatMarkup(result.html??"")}`;});(0,vue.computed)(()=>`<script setup lang="ts">import{LGrid}from '@composy/layout-vue' import type{LayoutDocument}from '@composy/layout-core' const layoutDocument:LayoutDocument=${JSON.stringify(currentDocument.value,null,2)}<\/script><template><LGrid:document="layoutDocument" breakpoint="${activeBreakpoint.value}"><template #item="{item}"><article class="layout-card"><div class="layout-card__meta"><span class="layout-card__type">{{item.type==='metric'?'\u6570\u636E\u6307\u6807':'\u8D8B\u52BF\u56FE\u8868'}}</span><span class="layout-card__status">\u5DF2\u914D\u7F6E</span></div><h3 class="layout-card__title">{{item.props.title}}</h3><strong v-if="item.props.value!==undefined" class="layout-card__value">{{Number(item.props.value).toLocaleString('zh-CN')}}</strong><span v-else class="layout-card__chart" aria-hidden="true"><i v-for="bar in 5":key="bar"/></span><div class="layout-card__footer"><span>\u5B9E\u65F6\u6570\u636E</span><span class="layout-card__spark">\u8D8B\u52BF\u7A33\u5B9A</span></div></article></template></LGrid></template>`);(0,vue.computed)(()=>`import{Grid}from '@composy/layout-react' import type{LayoutDocument}from '@composy/layout-core' const layoutDocument:LayoutDocument=${JSON.stringify(currentDocument.value,null,2)}export function LayoutPreview(){return(<Grid document={layoutDocument}breakpoint="${activeBreakpoint.value}">{({item})=>(<article className="layout-card"><div className="layout-card__meta"><span className="layout-card__type">{item.type==='metric'?'\u6570\u636E\u6307\u6807':'\u8D8B\u52BF\u56FE\u8868'}</span><span className="layout-card__status">\u5DF2\u914D\u7F6E</span></div><h3 className="layout-card__title">{String(item.props.title)}</h3>{item.props.value!==undefined?(<strong className="layout-card__value">{Number(item.props.value).toLocaleString('zh-CN')}</strong>):(<span className="layout-card__chart" aria-hidden="true">{[1,2,3,4,5].map(bar=><i key={bar}/>)}</span>)}<div className="layout-card__footer"><span>\u5B9E\u65F6\u6570\u636E</span><span className="layout-card__spark">\u8D8B\u52BF\u7A33\u5B9A</span></div></article>)}</Grid>)}`);const generatedVueSource=(0,vue.computed)(()=>{const imports=new Map();const bindings=[];const usedLocals=new Set(["LGrid"]);for(const material of materials.getAll()){const renderer=material.renderers?.vue;if(!renderer?.package||!renderer.exportName)continue;const exportName=renderer.exportName.trim();if(!/^[A-Za-z_$][\w$]*$/.test(exportName))continue;let localName=exportName;let suffix=2;while(usedLocals.has(localName))localName=`${exportName}${suffix++}`;usedLocals.add(localName);const packageImports=imports.get(renderer.package)??[];packageImports.push(localName===exportName?exportName:`${exportName}as ${localName}`);imports.set(renderer.package,packageImports);bindings.push(` ${JSON.stringify(material.type)}:${localName}`);}const importLines=["import{LGrid}from '@composy/layout-vue'",...[...imports.entries()].map(([packageName,exports])=>`import{${exports.join(",")}}from '${packageName}'`)].join("\n");const componentMap=bindings.length?`const materialComponents={${bindings.join(",\n")}}as const`:"const materialComponents:Record<string,never>={}";return `<script setup lang="ts">${importLines}import type{LayoutDocument}from '@composy/layout-core' const layoutDocument:LayoutDocument=${JSON.stringify(currentDocument.value,null,2)}const breakpoint='${activeBreakpoint.value}' ${componentMap}<\/script><template><LGrid:document="layoutDocument":breakpoint="breakpoint"><template #item="{item}"><component:is="materialComponents[item.type as keyof typeof materialComponents]" v-bind="item.props"/></template></LGrid></template><style scoped>${compiled.value}</style>`;});(0,vue.computed)(()=>`import type{LayoutDocument,LayoutNode}from '@composy/layout-core' const layoutDocument:LayoutDocument=${JSON.stringify(currentDocument.value,null,2)}const breakpoint='${activeBreakpoint.value}' const itemClass=(item:LayoutNode)=>\`ldesign-layout-item-\${item.id.replace(/[^a-zA-Z0-9_-]/g,'-')}\` export function LayoutPreview(){return(<section className="ldesign-layout-grid">{layoutDocument.items.map(item=>(<article key={item.id}className={\`\${itemClass(item)}layout-card\`}><div className="layout-card__meta"><span className="layout-card__type">{item.type==='metric'?'\u6570\u636E\u6307\u6807':'\u8D8B\u52BF\u56FE\u8868'}</span><span className="layout-card__status">\u5DF2\u914D\u7F6E</span></div><h3 className="layout-card__title">{String(item.props.title)}</h3>{item.props.value!==undefined?<strong className="layout-card__value">{Number(item.props.value).toLocaleString('zh-CN')}</strong>:<span className="layout-card__chart" aria-hidden="true">{[1,2,3,4,5].map(bar=><i key={bar}/>)}</span>}<div className="layout-card__footer"><span>\u5B9E\u65F6\u6570\u636E</span><span className="layout-card__spark">\u8D8B\u52BF\u7A33\u5B9A</span></div></article>))}</section>)}`.replace(/<span className="layout-card__type">[\s\S]*?<\/span>/g,"<span className=\"layout-card__type\">{item.type}</span>").replace(/<span className="layout-card__status">[\s\S]*?<\/span>/g,"<span className=\"layout-card__status\">&#x5df2;&#x914d;&#x7f6e;</span>").replace(/<div className="layout-card__footer">[\s\S]*?<\/div>/g,"<div className=\"layout-card__footer\"><span>&#x5b9e;&#x65f6;&#x6570;&#x636e;</span><span className=\"layout-card__spark\">&#x7a33;&#x5b9a;</span></div>"));const activeCode=(0,vue.computed)(()=>activeDevelopmentFramework.value==="vue"?generatedVueSource.value:htmlSource.value);const activeCodeLabel=(0,vue.computed)(()=>activeDevelopmentFramework.value==="vue"?"Vue组件代码":"原生代码");const activeCodeExtension=(0,vue.computed)(()=>activeDevelopmentFramework.value==="vue"?"vue":"html");function materialCodeProps(material){return{...material.defaults??{}};}function materialVueCode(material){const renderer=material.renderers?.vue;const exportedName=renderer?.exportName?.trim();const componentName=(exportedName&&/^[A-Za-z_$][\w$]*$/.test(exportedName)?exportedName:void 0)??renderer?.component?.name??material.type.replace(/[^A-Za-z0-9_$]/g,"");const importLine=renderer?.package&&exportedName&&/^[A-Za-z_$][\w$]*$/.test(exportedName)?`import{${componentName}}from '${renderer.package}'`:` const props=materialCodeProps(material);const bindings=Object.entries(props).filter(([,value])=>value!==void 0&&value!==null).map(([key,value])=>`:${key}='${JSON.stringify(value)}'`).join("\n");return `<script setup lang="ts">${importLine}<\/script><!--\u6CE8\u518C\u8868\u7269\u6599\uFF1A${material.type}--><template><${componentName}${bindings?` ${bindings}`:""}/></template>`;}function materialWebComponentCode(material){const tagName=(material.renderers?.webcomponent)?.tagName??`ldesign-${material.type.replace(/[^a-z0-9-]/gi,"-")}`;const attributes=Object.entries(materialCodeProps(material)).filter(([,value])=>value!==void 0&&value!==null).map(([key,value])=>`${key}="${String(value).replace(/"/g,"&quot;")}"`).join("\n ");return `<!--\u6CE8\u518C\u8868\u7269\u6599\uFF1A${material.type}--><!--Web Component \u6807\u7B7E\uFF1A${tagName}--><${tagName}${attributes?` ${attributes}`:""}></${tagName}>`;}const materialCode=(0,vue.computed)(()=>{const material=materialCodeDialog.value;if(!material)return "";return activeDevelopmentFramework.value==="vue"?materialVueCode(material):materialWebComponentCode(material);});const highlightedMaterialCode=(0,vue.computed)(()=>highlightCode(materialCode.value));const materialCodeLineCount=(0,vue.computed)(()=>materialCode.value.split("\n").length);function highlightCode(value){const fragments=[];const stash=(value2,className)=>{return `__LDS_TOKEN_${fragments.push(`<span class="code-token-${className}">${value2}</span>`)-1}__`;};let code=escapeHtml(value);code=code.replace(/(&quot;.*?&quot;|&#39;.*?&#39;|`.*?`)/g,(match)=>stash(match,"string"));code=code.replace(/(\/\/[^\n]*|\/\*[\s\S]*?\*\/)/g,(match)=>stash(match,"comment"));code=code.replace(/(^|[;{\n]\s*)([A-Za-z_$][\w$-]*)(?=\s*:)/g,(_,prefix,name)=>`${prefix}${stash(name,"property")}`);code=code.replace(/\b(import|from|const|let|function|return|export|as|type|class|extends|new|true|false|null|undefined)\b/g,(match)=>stash(match,/^(true|false|null|undefined)$/.test(match)?"constant":"keyword"));code=code.replace(/(&lt;\/?[A-Za-z][^&]*?&gt;)/g,(match)=>stash(match,"tag"));let previous="";while(previous!==code&&/__LDS_TOKEN_\d+__/.test(code)){previous=code;code=code.replace(/__LDS_TOKEN_(\d+)__/g,(_,index)=>fragments[Number(index)]??"");}return code;}const highlightedCode=(0,vue.computed)(()=>highlightCode(activeCode.value));const activeCodeLineCount=(0,vue.computed)(()=>activeCode.value.split("\n").length);const canvasSceneStyle=(0,vue.computed)(()=>({width:`${canvasSize.value.width}px`,minHeight:`${canvasSize.value.height}px`,"--canvas-height":`${canvasSize.value.height}px`,"--canvas-grid-height":`${Math.max(180,canvasSize.value.height)}px`,transform:`translate3d(${canvasPan.value.x}px,${canvasPan.value.y}px,0)scale(${canvasZoom.value})`}));const canvasZoomLabel=(0,vue.computed)(()=>`${Math.round(canvasZoom.value*100)}%`);const selectedItem=(0,vue.computed)(()=>layout.value.items.find((item)=>item.id===selected.value));const selectedLocked=(0,vue.computed)(()=>Boolean(selectedItem.value?.state?.locked));const selectedMovable=(0,vue.computed)(()=>selectedItem.value?.constraints?.movable!==false);const selectedResizable=(0,vue.computed)(()=>selectedItem.value?.constraints?.resizable!==false);function add(type){if(!editor)return;const node=editor.addItem({type});editor.updateItem(node.id,(item)=>{for(const bp of Object.values(item.layout))bp.y=30;return item;});editor.select(node.id);}function materialProps(type){return JSON.stringify(materials.get(type)?.defaults??{});}function openMaterialCode(type){const material=materials.get(type);if(!material)return;materialCodeDialog.value=material;materialCodeCopied.value=false;closeFilterMenus();}function closeMaterialCode(){materialCodeDialog.value=void 0;materialCodeCopied.value=false;}async function copyMaterialCode(){if(!materialCode.value||typeof navigator==="undefined")return;try{await navigator.clipboard.writeText(materialCode.value);materialCodeCopied.value=true;window.setTimeout(()=>{materialCodeCopied.value=false;},1500);}catch{materialCodeCopied.value=false;}}function handleMaterialClick(type){add(type);}function toggleFilterMenu(menu){categoryMenuOpen.value=menu==="category"?!categoryMenuOpen.value:false;deviceMenuOpen.value=menu==="device"?!deviceMenuOpen.value:false;developmentModeMenuOpen.value=false;}function toggleDevelopmentModeMenu(){developmentModeMenuOpen.value=!developmentModeMenuOpen.value;categoryMenuOpen.value=false;deviceMenuOpen.value=false;}function closeFilterMenus(){categoryMenuOpen.value=false;deviceMenuOpen.value=false;developmentModeMenuOpen.value=false;}function handleFilterMenuKeydown(event){if(event.key!=="Escape")return;if(!categoryMenuOpen.value&&!developmentModeMenuOpen.value&&!deviceMenuOpen.value)return;closeFilterMenus();event.target?.blur();}function handleFilterOutsidePointerdown(event){const target=event.target;if(!(target instanceof Element))return;if(target.closest("[data-layout-filter-menu]"))return;closeFilterMenus();}function selectMaterialCategory(category){materialCategoryFilter.value=category;closeFilterMenus();}function selectDevelopmentFramework(framework){activeDevelopmentFramework.value=framework;if(typeof window!=="undefined")window.localStorage.setItem("layout-development-framework",framework);closeFilterMenus();(0,vue.nextTick)(()=>{syncVanillaRuntime();syncPreviewDialogRuntime();if(previewMode.value&&editor){editor.setMode("edit");(0,vue.nextTick)(()=>editor?.setMode("preview"));}});}function resetMaterialFilters(){materialQuery.value="";activeMaterialCategory.value=void 0;closeFilterMenus();}function materialIcon(type){return type==="chart"?lucide_vue_next.ChartSpline:lucide_vue_next.ChartNoAxesColumnIncreasing;}function setMaterialElement(type,value){if(value instanceof HTMLElement)materialElements.set(type,value);else materialElements.delete(type);}function syncMaterialSources(){if(!editor)return;const visibleTypes=new Set(visibleMaterials.value.map((material)=>material.type));for(const material of visibleMaterials.value){const element=materialElements.get(material.type);if(!element||materialSourceDisposers.has(material.type))continue;const size=material.defaultLayout??material.size?.default;const dispose=editor.registerExternalDragSource({element,type:material.type,props:{...material.defaults??{}},placement:{x:0,y:0,w:size?.w??1,h:size?.h??1}});materialSourceDisposers.set(material.type,dispose);}for(const[type,dispose]of materialSourceDisposers)if(!visibleTypes.has(type)){dispose();materialSourceDisposers.delete(type);}}(0,vue.watch)([materialQuery,activeMaterialCategory,activeDevelopmentFramework],()=>(0,vue.nextTick)(syncMaterialSources));function removeSelected(){editor?.handleKeyboard({key:"Delete"});}function toggleSelectedLock(){if(!editor||!selected.value)return;if(selectedLocked.value)editor.unlockItem(selected.value);else editor.lockItem(selected.value);}function toggleSelectedConstraint(key){if(!editor||!selected.value)return;editor.updateItem(selected.value,(item)=>{item.constraints={...item.constraints??{},[key]:item.constraints?.[key]===false};return item;});}function undo(){editor?.undo();}function redo(){editor?.redo();}function togglePreview(){const nextMode=previewMode.value?"edit":"preview";editor?.setMode(nextMode);navigate(nextMode==="preview"?"runtime":"editor");}function openPreviewDialog(){previewDialogOpen.value=true;(0,vue.nextTick)(syncPreviewDialogRuntime);}function closePreviewDialog(){previewDialogOpen.value=false;previewDialogRuntimeInstance?.destroy();previewDialogRuntimeInstance=void 0;}function syncPreviewDialogRuntime(){if(activeDevelopmentFramework.value!=="webcomponent"||!previewDialogOpen.value||!previewDialogRuntime.value){previewDialogRuntimeInstance?.destroy();previewDialogRuntimeInstance=void 0;return;}const runtimeDocument=editor?.exportRuntimeDocument()??layout.value;if(!previewDialogRuntimeInstance){previewDialogRuntimeInstance=(0,_composy_layout_runtime.createLayoutRuntime)({container:previewDialogRuntime.value,document:runtimeDocument,materials,observeResize:false,renderItem:({shell,item})=>{const render=()=>setNativeRuntimeCard(shell,item);render();return{update:render};}});previewDialogRuntimeInstance.mount();}else previewDialogRuntimeInstance.update(runtimeDocument);previewDialogRuntimeInstance.setBreakpoint(activeBreakpoint.value);}(0,vue.watch)([previewDialogOpen,activeDevelopmentFramework,activeBreakpoint,layout],()=>(0,vue.nextTick)(syncPreviewDialogRuntime));function syncVanillaRuntime(){if(activeDevelopmentFramework.value!=="webcomponent"||activeRoute.value!=="vanilla"||!vanillaRuntime.value||!editor){vanillaRuntimeInstance?.destroy();vanillaRuntimeInstance=void 0;return;}const document2=editor.exportRuntimeDocument();if(!vanillaRuntimeInstance){vanillaRuntimeInstance=(0,_composy_layout_runtime.createLayoutRuntime)({container:vanillaRuntime.value,document:document2,materials,observeResize:false,renderItem:({shell,item})=>{const render=()=>{setRuntimeCard(shell,item);};render();return{update:render};}});vanillaRuntimeInstance.mount();}else vanillaRuntimeInstance.update(document2);vanillaRuntimeInstance.setBreakpoint(activeBreakpoint.value);}function navigate(route){activeRoute.value=route;if(typeof window!=="undefined")window.location.hash=`/${route}`;if(route==="runtime"){if(editor?.getMode()==="preview")editor.setMode("edit");editor?.setMode("preview");const clearEditorWidgets=()=>{if(activeRoute.value!=="runtime")return;editorGrid.value?.querySelectorAll(".grid-stack-item").forEach((element)=>element.remove());};clearEditorWidgets();(0,vue.nextTick)(clearEditorWidgets);}else if(previewMode.value)editor?.setMode("edit");(0,vue.nextTick)(syncVanillaRuntime);}function select(id){editor?.select(id);}function changeBreakpoint(id){activeBreakpoint.value=id;canvasOrientation.value=id==="mobile"?"portrait":"landscape";editor?.setBreakpoint(id);vanillaRuntimeInstance?.setBreakpoint(id);deviceMenuOpen.value=false;}function selectBreakpoint(id){changeBreakpoint(id);}function toggleCanvasOrientation(){canvasOrientation.value=canvasOrientation.value==="portrait"?"landscape":"portrait";}function clampCanvasZoom(value){return Math.min(2,Math.max(.5,Math.round(value*20)/20));}function setCanvasZoom(value,anchor){const viewport=canvasViewport.value;const previousZoom=canvasZoom.value;const nextZoom=clampCanvasZoom(value);if(!viewport||previousZoom===nextZoom)return;const rect=viewport.getBoundingClientRect();const anchorX=anchor?.x??rect.left+rect.width/2;const anchorY=anchor?.y??rect.top+rect.height/2;const localX=(anchorX-rect.left-canvasPan.value.x)/previousZoom;const localY=(anchorY-rect.top-canvasPan.value.y)/previousZoom;canvasZoom.value=nextZoom;canvasPan.value={x:anchorX-rect.left-localX*nextZoom,y:anchorY-rect.top-localY*nextZoom};}function zoomCanvas(direction){setCanvasZoom(canvasZoom.value+direction*.1);}function resetCanvasView(){canvasZoom.value=1;canvasPan.value={x:0,y:0};}function resetCanvasPan(){canvasPan.value={x:0,y:0};}function toggleTheme(){theme.value=theme.value==="light"?"dark":"light";if(typeof window!=="undefined")window.localStorage.setItem("layout-theme",theme.value);}function handleCanvasWheel(event){event.preventDefault();const direction=event.deltaY<0?1:-1;setCanvasZoom(canvasZoom.value+direction*.08,{x:event.clientX,y:event.clientY});}function handleCanvasPointerDown(event){if(!(canvasTool.value==="pan"||canvasSpacePressed.value||event.button===1)||event.button===2)return;event.preventDefault();event.stopPropagation();event.currentTarget.setPointerCapture?.(event.pointerId);canvasPanning.value=true;canvasPanOrigin.value={x:event.clientX,y:event.clientY,panX:canvasPan.value.x,panY:canvasPan.value.y};}function handleCanvasPointerMove(event){if(!canvasPanning.value)return;const origin=canvasPanOrigin.value;canvasPan.value={x:origin.panX+event.clientX-origin.x,y:origin.panY+event.clientY-origin.y};}function finishCanvasPan(event){if(!canvasPanning.value)return;canvasPanning.value=false;if(event)event.currentTarget.releasePointerCapture?.(event.pointerId);}function handleCanvasKeydown(event){if(event.code==="Space")canvasSpacePressed.value=true;}function handleCanvasKeyup(event){if(event.code==="Space")canvasSpacePressed.value=false;}function handleWorkspaceKeydown(event){if(!editor||event.defaultPrevented)return;const root=editorGrid.value?.closest("[data-layout-workspace]");if(!root||!(event.target instanceof Node)||!root.contains(event.target))return;const key=event.key.toLowerCase();if(!((event.ctrlKey||event.metaKey)&&["c","v","x","d"].includes(key))&&!["delete","backspace"].includes(key))return;editor.handleKeyboard({key:event.key,shiftKey:event.shiftKey,ctrlKey:event.ctrlKey,metaKey:event.metaKey,altKey:event.altKey,preventDefault:()=>event.preventDefault()});}async function copyActiveCode(){const value=activeCode.value;try{if(navigator.clipboard?.writeText)await navigator.clipboard.writeText(value);else{const textarea=document.createElement("textarea");textarea.value=value;textarea.style.position="fixed";textarea.style.opacity="0";document.body.appendChild(textarea);textarea.select();document.execCommand("copy");textarea.remove();}copied.value=true;window.setTimeout(()=>{copied.value=false;},1600);}catch{copied.value=false;}}function downloadActiveCode(){const blob=new Blob([activeCode.value],{type:"text/plain;charset=utf-8"});const url=URL.createObjectURL(blob);const anchor=document.createElement("a");anchor.href=url;anchor.download=`layout-${activeDevelopmentFramework.value}.${activeCodeExtension.value}`;anchor.click();URL.revokeObjectURL(url);}function handleEditorGridAction(event){const target=event.target;if(!(target instanceof Element))return;const action=target.closest("[data-layout-action]");const widget=target.closest(".grid-stack-item");if(!action||!widget||action.dataset.layoutActionPointer==="true"){if(action?.dataset.layoutActionPointer==="true")delete action.dataset.layoutActionPointer;return;}if(event.type==="pointerdown"){action.dataset.layoutActionPointer="true";event.preventDefault();}const id=widget.getAttribute("gs-id")??widget.getAttribute("data-layout-item-id");if(!id||!editor)return;editor.select(id);const kind=action.dataset.layoutAction;if(kind==="copy")editor.copySelection();else if(kind==="delete")editor.removeItem(id);else if(kind==="lock")if(layout.value.items.find((item)=>item.id===id)?.state?.locked)editor.unlockItem(id);else editor.lockItem(id);}function syncSelection(){const root=editorGrid.value;if(!root)return;root.querySelectorAll(".grid-stack-item").forEach((item)=>{const id=item.getAttribute("gs-id")??item.getAttribute("data-layout-item-id")??"";const node=layout.value.items.find((candidate)=>candidate.id===id);const active=selectedIds.value.includes(id);item.classList.toggle("is-selected",active);item.tabIndex=0;item.setAttribute("role","button");if(node)item.setAttribute("aria-label",`${itemTitle(node)}\uFF0C${materialLabel(node.type)}`);item.setAttribute("aria-pressed",String(active));item.setAttribute("aria-selected",String(active));item.setAttribute("aria-disabled",String(Boolean(node?.state?.locked)));});}function syncInteractionPreview(){if(interactionPreviewFrame!==void 0)return;const flush=()=>{interactionPreviewFrame=void 0;if(!editor)return;layout.value=editor.exportRuntimeDocument();queueMicrotask(syncSelection);};if(typeof window==="undefined")flush();else interactionPreviewFrame=window.requestAnimationFrame(flush);}(0,vue.onMounted)(()=>{if(typeof window!=="undefined"){const savedTheme=window.localStorage.getItem("layout-theme");if(savedTheme==="light"||savedTheme==="dark")theme.value=savedTheme;const savedFramework=window.localStorage.getItem("layout-development-framework");if(savedFramework==="webcomponent"||savedFramework==="vue")activeDevelopmentFramework.value=savedFramework;}if(!editorGrid.value)return;previousGridStackRenderCallback=gridstack.GridStack.renderCB;gridstack.GridStack.renderCB=(element,widget)=>{if(element&&widget?.content!==void 0)element.innerHTML=String(widget.content);};const engine=(0,_composy_layout_gridstack.createGridStackEditorEngine)({container:editorGrid.value,gridOptions:{acceptWidgets:true,animate:false},createGrid:(options)=>gridstack.GridStack.init(options,editorGrid.value),renderItem:({item})=>renderCardMarkup(item,{interactive:true})});editor=(0,_composy_layout_editor.createLayoutEditor)({document:initial,engine,materials,preview:runtimePreview.value?{container:runtimePreview.value,renderItem:({shell,item})=>{const render=()=>{setRuntimeCard(shell,item);};render();return{update:render};}}:void 0});editor.on("document:change",(event)=>{layout.value=event.document;workspaceEmit("update:document",event.document);workspaceEmit("change",event.document);queueMicrotask(syncSelection);syncVanillaRuntime();});editor.on("interaction:move",syncInteractionPreview);editor.on("interaction:resize",syncInteractionPreview);editor.on("selection:change",(event)=>{selected.value=event.primaryId;selectedIds.value=[...event.selectedIds];syncSelection();});editor.on("mode:change",(event)=>{previewMode.value=event.mode==="preview";if(event.mode==="preview"&&activeRoute.value!=="runtime")activeRoute.value="runtime";if(event.mode==="edit"&&activeRoute.value==="runtime")activeRoute.value="editor";(0,vue.nextTick)(syncVanillaRuntime);});editor.mount();editorGrid.value.addEventListener("pointerdown",handleEditorGridAction,true);editorGrid.value.addEventListener("click",handleEditorGridAction,true);disposers.push(()=>editorGrid.value?.removeEventListener("pointerdown",handleEditorGridAction,true));disposers.push(()=>editorGrid.value?.removeEventListener("click",handleEditorGridAction,true));(0,vue.nextTick)(syncMaterialSources);syncSelection();if(typeof window!=="undefined"){activeRoute.value=parseRoute(window.location.hash);const onHashChange=()=>{const next=parseRoute(window.location.hash);if(next!==activeRoute.value)navigate(next);else if(next==="runtime"&&editor?.getMode()!=="preview")editor.setMode("preview");else if(next!=="runtime"&&editor?.getMode()==="preview")editor.setMode("edit");};window.addEventListener("hashchange",onHashChange);disposers.push(()=>window.removeEventListener("hashchange",onHashChange));window.addEventListener("keydown",handleCanvasKeydown);window.addEventListener("keyup",handleCanvasKeyup);window.addEventListener("keydown",handleWorkspaceKeydown);document.addEventListener("pointerdown",handleFilterOutsidePointerdown);document.addEventListener("keydown",handleFilterMenuKeydown);disposers.push(()=>window.removeEventListener("keydown",handleCanvasKeydown));disposers.push(()=>window.removeEventListener("keyup",handleCanvasKeyup));disposers.push(()=>window.removeEventListener("keydown",handleWorkspaceKeydown));disposers.push(()=>document.removeEventListener("pointerdown",handleFilterOutsidePointerdown));disposers.push(()=>document.removeEventListener("keydown",handleFilterMenuKeydown));}if(activeRoute.value==="runtime")editor.setMode("preview");syncVanillaRuntime();});(0,vue.onBeforeUnmount)(()=>{if(interactionPreviewFrame!==void 0&&typeof window!=="undefined")window.cancelAnimationFrame(interactionPreviewFrame);interactionPreviewFrame=void 0;materialSourceDisposers.forEach((dispose)=>dispose());materialSourceDisposers.clear();disposers.splice(0).forEach((dispose)=>dispose());vanillaRuntimeInstance?.destroy();vanillaRuntimeInstance=void 0;previewDialogRuntimeInstance?.destroy();previewDialogRuntimeInstance=void 0;editor?.destroy();if(previousGridStackRenderCallback){gridstack.GridStack.renderCB=previousGridStackRenderCallback;previousGridStackRenderCallback=void 0;}});return(_ctx,_cache)=>{return(0,vue.openBlock)(),(0,vue.createElementBlock)("main",{class:"layout-demo","data-layout-workspace":"","data-theme":theme.value,"data-development-framework":activeDevelopmentFramework.value},[(0,vue.createElementVNode)("header",_hoisted_2,[(0,vue.createElementVNode)("div",_hoisted_3,[(0,vue.createElementVNode)("span",_hoisted_4,[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Grid2X2),{size:18,"stroke-width":1.8})]),_cache[20]||(_cache[20]=(0,vue.createElementVNode)("div",{class:"brand-copy"},[(0,vue.createElementVNode)("strong",null,"布局工作台"),(0,vue.createElementVNode)("span",null,"所见即所得 · 网格布局")],-1)),(0,vue.createElementVNode)("div",{class:(0,vue.normalizeClass)(["development-mode custom-select",{"is-open":developmentModeMenuOpen.value}]),"data-layout-filter-menu":"",onPointerdown:_cache[0]||(_cache[0]=(0,vue.withModifiers)(()=>{},["stop"]))},[(0,vue.createElementVNode)("button",{class:"custom-select__trigger",type:"button","aria-haspopup":"listbox","aria-expanded":developmentModeMenuOpen.value,"aria-label":"开发框架",title:`\u5F53\u524D\u5F00\u53D1\u6846\u67B6\uFF1A${activeDevelopmentFrameworkLabel.value}`,onClick:(0,vue.withModifiers)(toggleDevelopmentModeMenu,["stop"])},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(developmentFrameworks.find((framework)=>framework.id===activeDevelopmentFramework.value)?.icon??(0,vue.unref)(lucide_vue_next.PanelsTopLeft)),{size:14,"stroke-width":1.9,"aria-hidden":"true"})),(0,vue.createElementVNode)("span",null,(0,vue.toDisplayString)(activeDevelopmentFrameworkLabel.value),1),(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.ChevronDown),{size:12,"stroke-width":1.9,"aria-hidden":"true"})],8,_hoisted_5),developmentModeMenuOpen.value?((0,vue.openBlock)(),(0,vue.createElementBlock)("div",_hoisted_6,[((0,vue.openBlock)(),(0,vue.createElementBlock)(vue.Fragment,null,(0,vue.renderList)(developmentFrameworks,(framework)=>{return(0,vue.createElementVNode)("button",{key:framework.id,class:"custom-select__option",type:"button","aria-selected":activeDevelopmentFramework.value===framework.id,onClick:($event)=>selectDevelopmentFramework(framework.id)},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(framework.icon),{size:14,"stroke-width":1.8,"aria-hidden":"true"})),(0,vue.createElementVNode)("span",null,[(0,vue.createElementVNode)("strong",null,(0,vue.toDisplayString)(framework.label),1),(0,vue.createElementVNode)("small",null,(0,vue.toDisplayString)(framework.description),1)])],8,_hoisted_7);}),64))])):(0,vue.createCommentVNode)("v-if",true)],34)]),(0,vue.createElementVNode)("div",_hoisted_8,[(0,vue.createElementVNode)("nav",_hoisted_9,[((0,vue.openBlock)(),(0,vue.createElementBlock)(vue.Fragment,null,(0,vue.renderList)(routes,(demoRoute)=>{return(0,vue.createElementVNode)("button",{key:demoRoute.id,type:"button","aria-current":activeRoute.value===demoRoute.id?"page":void 0,"aria-label":`${demoRoute.label}\u6A21\u5F0F`,title:demoRoute.description,onClick:($event)=>navigate(demoRoute.id)},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(routeIcons[demoRoute.id]),{class:"route-icon",size:15,"stroke-width":1.8,"aria-hidden":"true"})),(0,vue.createElementVNode)("span",null,(0,vue.toDisplayString)(demoRoute.label),1)],8,_hoisted_10);}),64))]),(0,vue.createElementVNode)("div",_hoisted_11,[((0,vue.openBlock)(true),(0,vue.createElementBlock)(vue.Fragment,null,(0,vue.renderList)(layout.value.breakpoints,(breakpoint)=>{return(0,vue.openBlock)(),(0,vue.createElementBlock)("button",{key:breakpoint.id,class:"breakpoint-tab",type:"button","aria-pressed":activeBreakpoint.value===breakpoint.id,"aria-label":`\u5207\u6362\u5230${breakpointLabel(breakpoint.id)}\u753B\u5E03`,title:`${breakpointLabel(breakpoint.id)}\u753B\u5E03`,onClick:($event)=>changeBreakpoint(breakpoint.id)},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(breakpointIcons[breakpoint.id]??(0,vue.unref)(lucide_vue_next.Monitor)),{size:14,"stroke-width":1.8,"aria-hidden":"true"})),(0,vue.createElementVNode)("span",null,(0,vue.toDisplayString)(breakpointLabel(breakpoint.id)),1)],8,_hoisted_12);}),128)),(0,vue.createCommentVNode)("v-if",true)])]),(0,vue.createElementVNode)("div",_hoisted_13,[(0,vue.createElementVNode)("button",{class:"icon-button",type:"button","aria-label":"撤销",title:"撤销",disabled:!(0,vue.unref)(editor)?.canUndo(),onClick:undo},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Undo2),{size:16,"stroke-width":1.9,"aria-hidden":"true"})],8,_hoisted_14),(0,vue.createElementVNode)("button",{class:"icon-button",type:"button","aria-label":"重做",title:"重做",disabled:!(0,vue.unref)(editor)?.canRedo(),onClick:redo},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Redo2),{size:16,"stroke-width":1.9,"aria-hidden":"true"})],8,_hoisted_15),(0,vue.createElementVNode)("button",{class:"icon-button",type:"button","aria-label":"删除选中组件",title:"删除选中组件",disabled:!selected.value,onClick:removeSelected},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Trash2),{size:16,"stroke-width":1.9,"aria-hidden":"true"})],8,_hoisted_16),(0,vue.createElementVNode)("button",{class:"icon-button",type:"button","aria-label":selectedLocked.value?"解锁选中组件":"锁定选中组件",title:selectedLocked.value?"解锁选中组件":"锁定选中组件",disabled:!selected.value,onClick:toggleSelectedLock},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(selectedLocked.value?(0,vue.unref)(lucide_vue_next.Unlock):(0,vue.unref)(lucide_vue_next.Lock)),{size:16,"stroke-width":1.9,"aria-hidden":"true"}))],8,_hoisted_17),(0,vue.createElementVNode)("button",{class:"icon-button",type:"button","aria-label":selectedMovable.value?"禁止移动":"允许移动",title:selectedMovable.value?"禁止移动":"允许移动",disabled:!selected.value||selectedLocked.value,onClick:_cache[1]||(_cache[1]=($event)=>toggleSelectedConstraint("movable"))},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Move),{size:16,"stroke-width":1.9,"aria-hidden":"true"})],8,_hoisted_18),(0,vue.createElementVNode)("button",{class:"icon-button",type:"button","aria-label":selectedResizable.value?"禁止调整大小":"允许调整大小",title:selectedResizable.value?"禁止调整大小":"允许调整大小",disabled:!selected.value||selectedLocked.value,onClick:_cache[2]||(_cache[2]=($event)=>toggleSelectedConstraint("resizable"))},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Maximize2),{size:16,"stroke-width":1.9,"aria-hidden":"true"})],8,_hoisted_19),(0,vue.createElementVNode)("button",{class:"icon-button theme-button",type:"button","aria-label":theme.value==="dark"?"切换到亮色主题":"切换到暗色主题",title:theme.value==="dark"?"切换到亮色主题":"切换到暗色主题",onClick:toggleTheme},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(theme.value==="dark"?(0,vue.unref)(lucide_vue_next.Sun):(0,vue.unref)(lucide_vue_next.Moon)),{size:16,"stroke-width":1.9,"aria-hidden":"true"}))],8,_hoisted_20),(0,vue.createElementVNode)("button",{class:"preview-open-button",type:"button","aria-label":"打开实时预览",title:"打开实时预览",onClick:openPreviewDialog},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Eye),{size:15,"stroke-width":1.9,"aria-hidden":"true"}),_cache[21]||(_cache[21]=(0,vue.createElementVNode)("span",null,"实时预览",-1))]),(0,vue.createElementVNode)("button",{class:"mode-button",type:"button","aria-pressed":previewMode.value,"aria-label":previewMode.value?"返回编辑模式":"进入预览模式",title:previewMode.value?"返回编辑模式":"进入预览模式",onClick:togglePreview},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(previewMode.value?(0,vue.unref)(lucide_vue_next.Pencil):(0,vue.unref)(lucide_vue_next.Eye)),{size:16,"stroke-width":1.9,"aria-hidden":"true"})),(0,vue.createElementVNode)("span",null,(0,vue.toDisplayString)(previewMode.value?"编辑":"预览"),1)],8,_hoisted_21)])]),(0,vue.createElementVNode)("section",_hoisted_22,[(0,vue.createElementVNode)("aside",_hoisted_23,[(0,vue.createElementVNode)("div",_hoisted_24,[_cache[22]||(_cache[22]=(0,vue.createElementVNode)("div",null,[(0,vue.createElementVNode)("span",{class:"eyebrow"},"工作区"),(0,vue.createElementVNode)("h2",null,"物料")],-1)),(0,vue.createElementVNode)("span",_hoisted_25,(0,vue.toDisplayString)((0,vue.unref)(materials).getAll().length),1)]),(0,vue.createElementVNode)("div",_hoisted_26,[(0,vue.createElementVNode)("label",_hoisted_27,[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Search),{size:15,"stroke-width":1.8,"aria-hidden":"true"}),(0,vue.withDirectives)((0,vue.createElementVNode)("input",{"onUpdate:modelValue":_cache[3]||(_cache[3]=($event)=>materialQuery.value=$event),type:"search",placeholder:"搜索物料","aria-label":"搜索物料"},null,512),[[vue.vModelText,materialQuery.value]])]),(0,vue.createElementVNode)("div",{class:"material-filter-row","data-layout-filter-menu":"",onKeydown:(0,vue.withKeys)((0,vue.withModifiers)(handleFilterMenuKeydown,["stop","prevent"]),["esc"])},[(0,vue.createElementVNode)("div",{class:(0,vue.normalizeClass)(["material-select custom-select",{"is-open":categoryMenuOpen.value}]),onPointerdown:_cache[6]||(_cache[6]=(0,vue.withModifiers)(()=>{},["stop"]))},[(0,vue.createElementVNode)("button",{class:"custom-select__trigger",type:"button","aria-haspopup":"listbox","aria-expanded":categoryMenuOpen.value,"aria-label":"物料分类",title:`\u7269\u6599\u5206\u7C7B\uFF1A${activeMaterialCategoryLabel.value}`,onClick:_cache[4]||(_cache[4]=(0,vue.withModifiers)(($event)=>toggleFilterMenu("category"),["stop"]))},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Filter),{size:13,"stroke-width":1.9,"aria-hidden":"true"}),(0,vue.createElementVNode)("span",null,(0,vue.toDisplayString)(activeMaterialCategoryLabel.value),1),(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.ChevronDown),{size:12,"stroke-width":1.9,"aria-hidden":"true"})],8,_hoisted_29),categoryMenuOpen.value?((0,vue.openBlock)(),(0,vue.createElementBlock)("div",_hoisted_30,[(0,vue.createElementVNode)("button",{class:"custom-select__option",type:"button","aria-selected":!materialCategoryFilter.value,onClick:_cache[5]||(_cache[5]=($event)=>selectMaterialCategory(""))}," 全部分类 ",8,_hoisted_31),((0,vue.openBlock)(true),(0,vue.createElementBlock)(vue.Fragment,null,(0,vue.renderList)(materialCategories.value,(category)=>{return(0,vue.openBlock)(),(0,vue.createElementBlock)("button",{key:category.id,class:"custom-select__option",type:"button","aria-selected":materialCategoryFilter.value===category.id,onClick:($event)=>selectMaterialCategory(category.id)},(0,vue.toDisplayString)(category.label),9,_hoisted_32);}),128))])):(0,vue.createCommentVNode)("v-if",true)],34),hasMaterialFilters.value?((0,vue.openBlock)(),(0,vue.createElementBlock)("button",{key:0,class:"material-filter-reset",type:"button","aria-label":"清除物料筛选",title:"清除筛选",onClick:resetMaterialFilters},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.X),{size:13,"stroke-width":1.9,"aria-hidden":"true"})])):(0,vue.createCommentVNode)("v-if",true)],40,_hoisted_28),(0,vue.createElementVNode)("div",_hoisted_33,[(0,vue.createElementVNode)("span",null,(0,vue.toDisplayString)(visibleMaterials.value.length)+"/"+(0,vue.toDisplayString)((0,vue.unref)(materials).getAll().length)+" 个物料",1),hasMaterialFilters.value?((0,vue.openBlock)(),(0,vue.createElementBlock)("span",_hoisted_34,"已筛选")):(0,vue.createCommentVNode)("v-if",true)])]),!visibleMaterials.value.length?((0,vue.openBlock)(),(0,vue.createElementBlock)("div",_hoisted_35,[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Search),{size:17,"stroke-width":1.7,"aria-hidden":"true"}),_cache[23]||(_cache[23]=(0,vue.createElementVNode)("strong",null,"没有匹配的物料",-1)),_cache[24]||(_cache[24]=(0,vue.createElementVNode)("span",null,"试试更换关键词或分类",-1)),hasMaterialFilters.value?((0,vue.openBlock)(),(0,vue.createElementBlock)("button",{key:0,type:"button",onClick:resetMaterialFilters}," 清除筛选 ")):(0,vue.createCommentVNode)("v-if",true)])):(0,vue.createCommentVNode)("v-if",true),((0,vue.openBlock)(true),(0,vue.createElementBlock)(vue.Fragment,null,(0,vue.renderList)(visibleMaterials.value,(material)=>{return(0,vue.openBlock)(),(0,vue.createElementBlock)("div",{key:material.type,ref_for:true,ref:(element)=>setMaterialElement(material.type,element),class:"material-source grid-stack-item",role:"button",tabindex:"0","data-material-type":material.type,"data-layout-material":material.type,"data-layout-props":materialProps(material.type),"aria-label":`\u6DFB\u52A0${material.title??material.label??material.type}`,onClick:($event)=>handleMaterialClick(material.type),onKeydown:[(0,vue.withKeys)(($event)=>add(material.type),["enter"]),(0,vue.withKeys)((0,vue.withModifiers)(($event)=>add(material.type),["prevent"]),["space"])]},[(0,vue.createElementVNode)("span",_hoisted_37,[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(materialIcon(material.type)),{size:18,"stroke-width":1.8}))]),(0,vue.createElementVNode)("span",_hoisted_38,[(0,vue.createElementVNode)("strong",null,(0,vue.toDisplayString)(material.title??material.label??material.type),1),(0,vue.createElementVNode)("small",null,(0,vue.toDisplayString)(material.description??material.categoryLabel??"布局组件"),1)]),(0,vue.createElementVNode)("span",_hoisted_39,[(0,vue.createElementVNode)("span",_hoisted_40,(0,vue.toDisplayString)(material.defaultLayout?.w??material.size?.default.w??1)+" × "+(0,vue.toDisplayString)(material.defaultLayout?.h??material.size?.default.h??1),1),(0,vue.createElementVNode)("span",_hoisted_41,[(0,vue.createElementVNode)("span",{class:(0,vue.normalizeClass)(["material-renderer-badge",{"material-renderer-badge--vue":activeDevelopmentFramework.value==="vue"}]),title:`\u5F53\u524D\u5F00\u53D1\u76EE\u6807\uFF1A${activeDevelopmentFrameworkLabel.value}`},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(activeDevelopmentFramework.value==="vue"?(0,vue.unref)(lucide_vue_next.PanelsTopLeft):(0,vue.unref)(lucide_vue_next.Code2)),{size:11,"stroke-width":1.8,"aria-hidden":"true"})),(0,vue.createElementVNode)("span",null,(0,vue.toDisplayString)(activeDevelopmentFrameworkLabel.value),1)],10,_hoisted_42)])]),(0,vue.createElementVNode)("span",_hoisted_43,[(0,vue.createElementVNode)("button",{class:"material-code-button",type:"button","aria-label":"查看当前物料代码",title:"查看当前物料代码",onPointerdown:_cache[7]||(_cache[7]=(0,vue.withModifiers)(()=>{},["stop"])),onClick:(0,vue.withModifiers)(($event)=>openMaterialCode(material.type),["stop"])},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Code2),{size:14,"stroke-width":1.8,"aria-hidden":"true"})],40,_hoisted_44),(0,vue.createElementVNode)("span",_hoisted_45,[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Plus),{size:16,"stroke-width":1.8})])])],40,_hoisted_36);}),128)),(0,vue.createCommentVNode)("v-if",true),(0,vue.createCommentVNode)("v-if",true)]),(0,vue.createElementVNode)("section",_hoisted_50,[(0,vue.createElementVNode)("div",_hoisted_51,[(0,vue.createElementVNode)("div",{class:(0,vue.normalizeClass)(["canvas-device-control custom-select",{"is-open":deviceMenuOpen.value}]),onPointerdown:_cache[15]||(_cache[15]=(0,vue.withModifiers)(()=>{},["stop"]))},[(0,vue.createElementVNode)("button",{class:"custom-select__trigger",type:"button","aria-haspopup":"listbox","aria-expanded":deviceMenuOpen.value,"aria-label":"设备画布",onClick:_cache[14]||(_cache[14]=(0,vue.withModifiers)(($event)=>toggleFilterMenu("device"),["stop"]))},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(activeBreakpointIcon.value),{size:13,"stroke-width":1.9,"aria-hidden":"true"})),(0,vue.createElementVNode)("span",null,(0,vue.toDisplayString)(breakpointLabel(activeBreakpoint.value)),1),(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.ChevronDown),{size:12,"stroke-width":1.9,"aria-hidden":"true"})],8,_hoisted_52),deviceMenuOpen.value?((0,vue.openBlock)(),(0,vue.createElementBlock)("div",_hoisted_53,[((0,vue.openBlock)(true),(0,vue.createElementBlock)(vue.Fragment,null,(0,vue.renderList)(layout.value.breakpoints,(breakpoint)=>{return(0,vue.openBlock)(),(0,vue.createElementBlock)("button",{key:breakpoint.id,class:"custom-select__option",type:"button","aria-selected":activeBreakpoint.value===breakpoint.id,"aria-label":breakpointLabel(breakpoint.id)+"/"+breakpoint.columns+" 列",onClick:($event)=>selectBreakpoint(breakpoint.id)},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(breakpointIcons[breakpoint.id]??(0,vue.unref)(lucide_vue_next.Monitor)),{size:13,"stroke-width":1.8,"aria-hidden":"true"})),(0,vue.createElementVNode)("span",null,(0,vue.toDisplayString)(breakpointLabel(breakpoint.id)),1),(0,vue.createElementVNode)("span",_hoisted_55,(0,vue.toDisplayString)(breakpoint.columns)+" 列",1)],8,_hoisted_54);}),128))])):(0,vue.createCommentVNode)("v-if",true)],34),(0,vue.createElementVNode)("button",{class:"orientation-button",type:"button","aria-label":canvasOrientation.value==="portrait"?"切换为横屏":"切换为竖屏",title:canvasOrientation.value==="portrait"?"切换为横屏":"切换为竖屏",onClick:toggleCanvasOrientation},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(canvasOrientation.value==="portrait"?(0,vue.unref)(lucide_vue_next.ArrowLeftRight):(0,vue.unref)(lucide_vue_next.ArrowUpDown)),{size:14,"stroke-width":1.9,"aria-hidden":"true"}))],8,_hoisted_56),_cache[27]||(_cache[27]=(0,vue.createElementVNode)("span",{class:"canvas-toolbar__device-divider","aria-hidden":"true"},null,-1)),(0,vue.createElementVNode)("div",_hoisted_57,[(0,vue.createElementVNode)("button",{class:(0,vue.normalizeClass)(["canvas-tool-button",{active:canvasTool.value==="select"}]),type:"button","aria-label":"选择组件",title:"选择组件",onClick:_cache[16]||(_cache[16]=($event)=>canvasTool.value="select")},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.MousePointer2),{size:15,"stroke-width":1.9,"aria-hidden":"true"})],2),(0,vue.createElementVNode)("button",{class:(0,vue.normalizeClass)(["canvas-tool-button",{active:canvasTool.value==="pan"}]),type:"button","aria-label":"移动画布",title:"移动画布（也可按住空格拖动）",onClick:_cache[17]||(_cache[17]=($event)=>canvasTool.value=canvasTool.value==="pan"?"select":"pan")},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Hand),{size:15,"stroke-width":1.9,"aria-hidden":"true"})],2)]),_cache[28]||(_cache[28]=(0,vue.createElementVNode)("div",{class:"canvas-toolbar__divider","aria-hidden":"true"},null,-1)),(0,vue.createElementVNode)("button",{class:"canvas-tool-button",type:"button","aria-label":"缩小画布",title:"缩小画布",onClick:_cache[18]||(_cache[18]=($event)=>zoomCanvas(-1))},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.ZoomOut),{size:15,"stroke-width":1.9,"aria-hidden":"true"})]),(0,vue.createElementVNode)("span",_hoisted_58,(0,vue.toDisplayString)(canvasZoomLabel.value),1),(0,vue.createElementVNode)("button",{class:"canvas-tool-button",type:"button","aria-label":"放大画布",title:"放大画布",onClick:_cache[19]||(_cache[19]=($event)=>zoomCanvas(1))},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.ZoomIn),{size:15,"stroke-width":1.9,"aria-hidden":"true"})]),(0,vue.createElementVNode)("button",{class:"canvas-tool-button",type:"button","aria-label":"适配画布",title:"适配画布",onClick:resetCanvasView},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Scan),{size:15,"stroke-width":1.9,"aria-hidden":"true"})]),(0,vue.createElementVNode)("button",{class:"canvas-tool-button",type:"button","aria-label":"重置画布位置",title:"重置画布位置",onClick:resetCanvasPan},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.RotateCcw),{size:15,"stroke-width":1.9,"aria-hidden":"true"})])]),(0,vue.createElementVNode)("div",{ref_key:"canvasViewport",ref:canvasViewport,class:(0,vue.normalizeClass)(["canvas-viewport",{"is-panning":canvasPanning.value,"is-pan-tool":canvasTool.value==="pan"}]),onWheel:handleCanvasWheel,onPointerdownCapture:handleCanvasPointerDown,onPointermove:handleCanvasPointerMove,onPointerup:finishCanvasPan,onPointercancel:finishCanvasPan},[(0,vue.createElementVNode)("div",{class:(0,vue.normalizeClass)(["canvas-scene",`is-${canvasOrientation.value}`]),"data-canvas-width":canvasSize.value.width,"data-canvas-height":canvasSize.value.height,"data-canvas-orientation":canvasOrientation.value,style:(0,vue.normalizeStyle)(canvasSceneStyle.value)},[(0,vue.withDirectives)((0,vue.createElementVNode)("section",_hoisted_60,[(0,vue.createElementVNode)("header",_hoisted_61,[_cache[30]||(_cache[30]=(0,vue.createElementVNode)("div",null,[(0,vue.createElementVNode)("span",{class:"stage-kicker"},"编辑模式"),(0,vue.createElementVNode)("h2",null,"拖拽布局")],-1)),(0,vue.createElementVNode)("span",_hoisted_62,[_cache[29]||(_cache[29]=(0,vue.createElementVNode)("i",{"aria-hidden":"true"},null,-1)),(0,vue.createTextVNode)((0,vue.toDisplayString)(breakpointLabel(activeBreakpoint.value)),1)])]),(0,vue.createElementVNode)("div",{ref_key:"editorGrid",ref:editorGrid,class:"grid-stack layout-editor-grid",role:"grid","aria-label":"网格布局编辑器","aria-multiselectable":"true"},null,512)],512),[[vue.vShow,activeRoute.value==="editor"&&!previewMode.value]]),(0,vue.withDirectives)((0,vue.createElementVNode)("section",_hoisted_63,[_cache[31]||(_cache[31]=(0,vue.createElementVNode)("header",{class:"stage-header"},[(0,vue.createElementVNode)("div",null,[(0,vue.createElementVNode)("span",{class:"stage-kicker"},"预览模式"),(0,vue.createElementVNode)("h2",null,"组件渲染")]),(0,vue.createElementVNode)("span",{class:"stage-badge"},[(0,vue.createElementVNode)("i",{"aria-hidden":"true"}),(0,vue.createTextVNode)("同步布局")])],-1)),(0,vue.createVNode)((0,vue.unref)(LGrid),{document:layout.value,breakpoint:activeBreakpoint.value,materials:(0,vue.unref)(materials),target:activeDevelopmentFramework.value},{item:(0,vue.withCtx)(({item})=>[(0,vue.createElementVNode)("button",{class:(0,vue.normalizeClass)(["widget layout-item-shell layout-item-shell--interactive",{selected:selected.value===item.id}]),type:"button","aria-label":`${itemTitle(item)}\uFF0C${materialLabel(item.type)}`,onClick:($event)=>select(item.id)},[(0,vue.createVNode)((0,vue.unref)(LMaterialRenderer),(0,vue.mergeProps)({item,materials:(0,vue.unref)(materials),target:activeDevelopmentFramework.value},item.props),null,16,["item","materials","target"])],10,_hoisted_64)]),_:1},8,["document","breakpoint","materials","target"])],512),[[vue.vShow,activeRoute.value==="vue"]]),(0,vue.withDirectives)((0,vue.createElementVNode)("section",{class:"runtime-preview-stage","data-preview-framework":activeDevelopmentFramework.value,"aria-label":"运行时预览画布"},[(0,vue.createElementVNode)("header",_hoisted_66,[_cache[33]||(_cache[33]=(0,vue.createElementVNode)("div",null,[(0,vue.createElementVNode)("span",{class:"stage-kicker"},"预览模式"),(0,vue.createElementVNode)("h2",null,"运行时预览")],-1)),(0,vue.createElementVNode)("span",_hoisted_67,[_cache[32]||(_cache[32]=(0,vue.createElementVNode)("i",{"aria-hidden":"true"},null,-1)),(0,vue.createTextVNode)((0,vue.toDisplayString)(activeDevelopmentFrameworkLabel.value)+" · 只读",1)])]),activeDevelopmentFramework.value==="vue"?((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.unref)(LGrid),{key:0,document:layout.value,breakpoint:activeBreakpoint.value,materials:(0,vue.unref)(materials),target:activeDevelopmentFramework.value},{item:(0,vue.withCtx)(({item})=>[(0,vue.createVNode)((0,vue.unref)(LMaterialRenderer),(0,vue.mergeProps)({item,materials:(0,vue.unref)(materials),target:activeDevelopmentFramework.value,class:"preview-dialog__card"},item.props),null,16,["item","materials","target"])]),_:1},8,["document","breakpoint","materials","target"])):(0,vue.createCommentVNode)("v-if",true),(0,vue.withDirectives)((0,vue.createElementVNode)("div",{ref_key:"runtimePreview",ref:runtimePreview,class:"runtime-preview-grid","data-preview-renderer":"webcomponent"},null,512),[[vue.vShow,activeDevelopmentFramework.value==="webcomponent"]])],8,_hoisted_65),[[vue.vShow,activeRoute.value==="runtime"&&previewMode.value]]),(0,vue.withDirectives)((0,vue.createElementVNode)("section",{class:"vanilla-runtime-stage","data-preview-framework":activeDevelopmentFramework.value,"aria-label":"原生运行时画布"},[(0,vue.createElementVNode)("header",_hoisted_69,[_cache[35]||(_cache[35]=(0,vue.createElementVNode)("div",null,[(0,vue.createElementVNode)("span",{class:"stage-kicker"},"预览模式"),(0,vue.createElementVNode)("h2",null,"原生运行时")],-1)),(0,vue.createElementVNode)("span",_hoisted_70,[_cache[34]||(_cache[34]=(0,vue.createElementVNode)("i",{"aria-hidden":"true"},null,-1)),(0,vue.createTextVNode)((0,vue.toDisplayString)(activeDevelopmentFrameworkLabel.value)+" · 只读",1)])]),activeDevelopmentFramework.value==="vue"?((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.unref)(LGrid),{key:0,document:layout.value,breakpoint:activeBreakpoint.value,materials:(0,vue.unref)(materials),target:activeDevelopmentFramework.value},{item:(0,vue.withCtx)(({item})=>[(0,vue.createVNode)((0,vue.unref)(LMaterialRenderer),(0,vue.mergeProps)({item,materials:(0,vue.unref)(materials),target:activeDevelopmentFramework.value,class:"preview-dialog__card"},item.props),null,16,["item","materials","target"])]),_:1},8,["document","breakpoint","materials","target"])):(0,vue.createCommentVNode)("v-if",true),(0,vue.withDirectives)((0,vue.createElementVNode)("div",{ref_key:"vanillaRuntime",ref:vanillaRuntime,class:"runtime-preview-grid","data-preview-renderer":"webcomponent"},null,512),[[vue.vShow,activeDevelopmentFramework.value==="webcomponent"]])],8,_hoisted_68),[[vue.vShow,activeRoute.value==="vanilla"]])],14,_hoisted_59)],34)]),(0,vue.createElementVNode)("aside",_hoisted_71,[(0,vue.createElementVNode)("div",_hoisted_72,[(0,vue.createElementVNode)("div",null,[_cache[36]||(_cache[36]=(0,vue.createElementVNode)("span",{class:"eyebrow"},"实时输出",-1)),(0,vue.createElementVNode)("h2",null,(0,vue.toDisplayString)(activeCodeLabel.value),1)]),(0,vue.createElementVNode)("button",{class:"copy-code-button",type:"button","aria-label":copied.value?"代码已复制":"复制当前代码",title:copied.value?"代码已复制":"复制当前代码",onClick:copyActiveCode},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(copied.value?(0,vue.unref)(lucide_vue_next.CopyCheck):(0,vue.unref)(lucide_vue_next.Copy)),{size:15,"stroke-width":1.8,"aria-hidden":"true"}))],8,_hoisted_73),(0,vue.createElementVNode)("button",{class:"download-code-button",type:"button","aria-label":"下载当前代码",title:"下载当前代码",onClick:downloadActiveCode},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.Download),{size:15,"stroke-width":1.8,"aria-hidden":"true"})])]),(0,vue.createElementVNode)("pre",_hoisted_74,[(0,vue.createElementVNode)("code",{innerHTML:highlightedCode.value},null,8,_hoisted_75)]),(0,vue.createElementVNode)("div",_hoisted_76,[_cache[37]||(_cache[37]=(0,vue.createElementVNode)("span",{class:"code-status__dot","aria-hidden":"true"},null,-1)),(0,vue.createElementVNode)("span",null,"已根据当前布局、"+(0,vue.toDisplayString)(breakpointLabel(activeBreakpoint.value))+"断点实时生成 · 共 "+(0,vue.toDisplayString)(activeCodeLineCount.value)+" 行，可滚动查看完整输出",1)])])]),(0,vue.createVNode)(vue.Transition,{name:"preview-dialog"},{default:(0,vue.withCtx)(()=>[previewDialogOpen.value?((0,vue.openBlock)(),(0,vue.createElementBlock)("div",{key:0,class:"preview-dialog","data-preview-framework":activeDevelopmentFramework.value,"data-theme":theme.value,role:"dialog","aria-modal":"true","aria-labelledby":"layout-preview-title"},[(0,vue.createElementVNode)("button",{class:"preview-dialog__backdrop",type:"button","aria-label":"关闭实时预览",onClick:closePreviewDialog}),(0,vue.createElementVNode)("section",_hoisted_78,[(0,vue.createElementVNode)("header",_hoisted_79,[_cache[39]||(_cache[39]=(0,vue.createElementVNode)("div",null,[(0,vue.createElementVNode)("span",{class:"stage-kicker"},"真实渲染"),(0,vue.createElementVNode)("h2",{id:"layout-preview-title"},"实时预览")],-1)),(0,vue.createElementVNode)("div",_hoisted_80,[(0,vue.createElementVNode)("span",_hoisted_81,[_cache[38]||(_cache[38]=(0,vue.createElementVNode)("i",{"aria-hidden":"true"},null,-1)),(0,vue.createTextVNode)((0,vue.toDisplayString)(breakpointLabel(activeBreakpoint.value)),1)]),(0,vue.createElementVNode)("button",{class:"icon-button",type:"button","aria-label":"关闭实时预览",title:"关闭实时预览",onClick:closePreviewDialog},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.X),{size:16,"stroke-width":1.9,"aria-hidden":"true"})])])]),(0,vue.createElementVNode)("div",_hoisted_82,[(0,vue.createElementVNode)("div",_hoisted_83,[activeDevelopmentFramework.value==="vue"?((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.unref)(LGrid),{key:0,document:layout.value,breakpoint:activeBreakpoint.value,materials:(0,vue.unref)(materials),target:activeDevelopmentFramework.value},{item:(0,vue.withCtx)(({item})=>[(0,vue.createVNode)((0,vue.unref)(LMaterialRenderer),(0,vue.mergeProps)({item,materials:(0,vue.unref)(materials),target:activeDevelopmentFramework.value,class:"preview-dialog__card"},item.props),null,16,["item","materials","target"])]),_:1},8,["document","breakpoint","materials","target"])):((0,vue.openBlock)(),(0,vue.createElementBlock)("div",{key:1,ref_key:"previewDialogRuntime",ref:previewDialogRuntime,class:"runtime-preview-grid preview-dialog__runtime-grid","data-preview-renderer":"webcomponent"},null,512))])]),(0,vue.createElementVNode)("footer",{class:"preview-dialog__footer"},[_cache[40]||(_cache[40]=(0,vue.createElementVNode)("span",null,"此处展示当前布局的真实 CSS Grid 渲染结果",-1)),(0,vue.createElementVNode)("button",{class:"preview-dialog__close-button",type:"button",onClick:closePreviewDialog}," 关闭预览 ")])])],8,_hoisted_77)):(0,vue.createCommentVNode)("v-if",true)]),_:1}),(0,vue.createVNode)(vue.Transition,{name:"preview-dialog"},{default:(0,vue.withCtx)(()=>[materialCodeDialog.value?((0,vue.openBlock)(),(0,vue.createElementBlock)("div",{key:0,class:"preview-dialog material-code-dialog","data-material-code-dialog":"true","data-material-code-framework":activeDevelopmentFramework.value,"data-material-code-type":materialCodeDialog.value.type,"data-theme":theme.value,role:"dialog","aria-modal":"true","aria-labelledby":"material-code-title"},[(0,vue.createElementVNode)("button",{class:"preview-dialog__backdrop",type:"button","aria-label":"关闭物料代码",onClick:closeMaterialCode}),(0,vue.createElementVNode)("section",_hoisted_85,[(0,vue.createElementVNode)("header",_hoisted_86,[(0,vue.createElementVNode)("div",null,[_cache[41]||(_cache[41]=(0,vue.createElementVNode)("span",{class:"stage-kicker"},"注册表物料",-1)),(0,vue.createElementVNode)("h2",_hoisted_87,(0,vue.toDisplayString)(materialCodeDialog.value.title??materialCodeDialog.value.label??materialCodeDialog.value.type),1),(0,vue.createElementVNode)("p",_hoisted_88,(0,vue.toDisplayString)(activeDevelopmentFramework.value==="vue"?"Vue 3 真实组件用法":"原生 Web Component 标签用法"),1)]),(0,vue.createElementVNode)("div",_hoisted_89,[(0,vue.createElementVNode)("span",_hoisted_90,[_cache[42]||(_cache[42]=(0,vue.createElementVNode)("i",{"aria-hidden":"true"},null,-1)),(0,vue.createTextVNode)((0,vue.toDisplayString)(activeDevelopmentFrameworkLabel.value),1)]),(0,vue.createElementVNode)("button",{class:"icon-button",type:"button","aria-label":"关闭物料代码",title:"关闭物料代码",onClick:closeMaterialCode},[(0,vue.createVNode)((0,vue.unref)(lucide_vue_next.X),{size:16,"stroke-width":1.9,"aria-hidden":"true"})])])]),(0,vue.createElementVNode)("div",_hoisted_91,[(0,vue.createElementVNode)("pre",_hoisted_92,[(0,vue.createElementVNode)("code",{innerHTML:highlightedMaterialCode.value},null,8,_hoisted_93)])]),(0,vue.createElementVNode)("footer",_hoisted_94,[(0,vue.createElementVNode)("span",null,"来自当前注册表的 "+(0,vue.toDisplayString)(activeDevelopmentFramework.value==="vue"?"组件导出":"自定义元素标签")+"，共 "+(0,vue.toDisplayString)(materialCodeLineCount.value)+" 行",1),(0,vue.createElementVNode)("div",_hoisted_95,[(0,vue.createElementVNode)("button",{class:"copy-code-button",type:"button","aria-label":materialCodeCopied.value?"代码已复制":"复制物料代码",title:materialCodeCopied.value?"代码已复制":"复制物料代码",onClick:copyMaterialCode},[((0,vue.openBlock)(),(0,vue.createBlock)((0,vue.resolveDynamicComponent)(materialCodeCopied.value?(0,vue.unref)(lucide_vue_next.CopyCheck):(0,vue.unref)(lucide_vue_next.Copy)),{size:15,"stroke-width":1.8,"aria-hidden":"true"}))],8,_hoisted_96),(0,vue.createElementVNode)("button",{class:"preview-dialog__close-button",type:"button",onClick:closeMaterialCode}," 关闭 ")])])])],8,_hoisted_84)):(0,vue.createCommentVNode)("v-if",true)]),_:1})],8,_hoisted_1);};}});LLayoutWorkspace_vue_vue_type_script_setup_true_lang_default.__file="src/components/LLayoutWorkspace.vue";var LLayoutWorkspace_default=LLayoutWorkspace_vue_vue_type_script_setup_true_lang_default;const LMaterialDragSource=(0,vue.defineComponent)({name:"LMaterialDragSource",props:{type:{type:String,default:void 0},material:{type:Object,default:void 0},props:{type:Object,default:()=>({})},placement:{type:Object,default:void 0},editor:{type:Object,required:true}},setup(props,{slots}){let unregister=()=>{};let element;const definition=props.material;const materialType=definition?.type??props.type;if(!materialType)throw new Error("LMaterialDragSource requires type or material.");const materialProps={...definition?.defaults??{},...props.props};const input=()=>({type:materialType,props:materialProps,placement:{x:props.placement?.x??0,y:props.placement?.y??0,w:props.placement?.w??definition?.defaultLayout?.w??definition?.size?.default.w??1,h:props.placement?.h??definition?.defaultLayout?.h??definition?.size?.default.h??1}});const start=(event)=>{props.editor.beginExternalDrag({...input(),element:event.currentTarget,dataTransfer:event.dataTransfer??void 0});};const end=()=>props.editor.endExternalDrag();(0,vue.onMounted)(()=>{if(element)unregister=props.editor.registerExternalDragSource({...input(),element});if(typeof document!=="undefined")document.addEventListener("dragend",end);});(0,vue.onBeforeUnmount)(()=>{unregister();if(typeof document!=="undefined")document.removeEventListener("dragend",end);});return()=>(0,vue.h)("div",{ref:(value)=>{element=value;},class:"ldesign-layout-material-drag-source grid-stack-item","data-material-type":materialType,"data-material-category":definition?.category,"data-material-title":definition?.title??definition?.label,"aria-label":`\u6DFB\u52A0${definition?.title??definition?.label??materialType}`,onDragstart:start},slots.default?.()??definition?.title??definition?.label??materialType);}});function useLayoutEditor(options){const editor=(0,vue.shallowRef)((0,_composy_layout_editor.createLayoutEditor)(options));(0,vue.onMounted)(()=>editor.value.mount());(0,vue.onBeforeUnmount)(()=>editor.value.destroy());return editor;}exports.LGrid=LGrid;exports.LGridItem=LGridItem;exports.LLayoutEditor=LLayoutEditor;exports.LLayoutWorkspace=LLayoutWorkspace_default;exports.LMaterialDragSource=LMaterialDragSource;exports.LMaterialRenderer=LMaterialRenderer;exports.LMetricCard=LMetricCard;exports.LTrendCard=LTrendCard;exports.useLayoutEditor=useLayoutEditor;});

package/es/components/LGrid.d.ts

@@ -0,0 +1,3 @@
+import type { LGridProps } from '../types';
+export declare const LGrid: import("vue").DefineComponent<LGridProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<LGridProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+//# sourceMappingURL=LGrid.d.ts.map

package/es/components/LGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGrid.d.ts","sourceRoot":"","sources":["../../src/components/LGrid.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAM1C,eAAO,MAAM,KAAK,gSA8FhB,CAAA"}

package/es/components/LGrid.js

@@ -0,0 +1,91 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { renderMaterialForTarget } from "./material-renderer.js";
+import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { resolveGridStyle, resolveItemStyle } from "@composy/layout-runtime";
+//#region src/components/LGrid.ts
+const LGrid = defineComponent({
+	name: "LGrid",
+	props: {
+		document: {
+			type: Object,
+			required: true
+		},
+		breakpoint: {
+			type: String,
+			default: void 0
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		materials: {
+			type: [Object, Array],
+			default: void 0
+		},
+		target: {
+			type: String,
+			default: "vue"
+		}
+	},
+	setup(props, { slots, expose }) {
+		const root = ref();
+		const activeBreakpoint = ref(props.breakpoint ?? props.document.defaultBreakpointId);
+		const resolved = computed(() => props.document.breakpoints.find((bp) => bp.id === activeBreakpoint.value) ?? props.document.breakpoints[0]);
+		const gridStyle = computed(() => resolveGridStyle(props.document, resolved.value.id));
+		const resize = () => {
+			if (props.breakpoint || !root.value) return;
+			const width = root.value.getBoundingClientRect().width;
+			const match = props.document.breakpoints.find((bp) => (bp.minWidth === void 0 || width >= bp.minWidth) && (bp.maxWidth === void 0 || width < bp.maxWidth));
+			activeBreakpoint.value = match?.id ?? props.document.defaultBreakpointId;
+		};
+		let observer;
+		onMounted(() => {
+			if (typeof ResizeObserver !== "undefined" && root.value) {
+				observer = new ResizeObserver(resize);
+				observer.observe(root.value);
+			}
+			resize();
+		});
+		onBeforeUnmount(() => observer?.disconnect());
+		watch(() => props.breakpoint, (value) => {
+			activeBreakpoint.value = value ?? props.document.defaultBreakpointId;
+		});
+		expose({ getBreakpoint: () => activeBreakpoint.value });
+		return () => h("div", {
+			ref: root,
+			class: "ldesign-layout-grid",
+			style: gridStyle.value,
+			dir: gridStyle.value.direction
+		}, props.document.items.map((item) => {
+			const placement = item.layout[activeBreakpoint.value];
+			if (!placement || placement.hidden) return null;
+			return h("div", {
+				class: "ldesign-layout-item",
+				"data-layout-item-id": item.id,
+				"data-layout-type": item.type,
+				style: resolveItemStyle(item, activeBreakpoint.value),
+				tabindex: props.readonly ? void 0 : 0
+			}, slots.item?.({
+				item,
+				placement,
+				breakpointId: activeBreakpoint.value
+			}) ?? slots.default?.({
+				item,
+				placement,
+				breakpointId: activeBreakpoint.value
+			}) ?? renderMaterialForTarget(props.materials, item, props.target, placement, activeBreakpoint.value));
+		}));
+	}
+});
+//#endregion
+export { LGrid };
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LGrid.js.map

package/es/components/LGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGrid.js","names":[],"sources":["../../src/components/LGrid.ts"],"sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  onBeforeUnmount,\n  onMounted,\n  ref,\n  type PropType,\n  watch,\n} from 'vue'\nimport { resolveGridStyle, resolveItemStyle } from '@composy/layout-runtime'\nimport type { LGridProps } from '../types'\nimport {\n  renderMaterialForTarget,\n  type VueMaterialSource,\n} from './material-renderer'\n\nexport const LGrid = defineComponent<LGridProps>({\n  name: 'LGrid',\n  props: {\n    document: { type: Object, required: true },\n    breakpoint: { type: String, default: undefined },\n    readonly: { type: Boolean, default: false },\n    materials: {\n      type: [Object, Array] as PropType<VueMaterialSource>,\n      default: undefined,\n    },\n    target: { type: String, default: 'vue' },\n  },\n  setup(props, { slots, expose }) {\n    const root = ref<HTMLElement>()\n    const activeBreakpoint = ref(\n      props.breakpoint ?? props.document.defaultBreakpointId\n    )\n    const resolved = computed(\n      () =>\n        props.document.breakpoints.find(\n          bp => bp.id === activeBreakpoint.value\n        ) ?? props.document.breakpoints[0]\n    )\n    const gridStyle = computed(() =>\n      resolveGridStyle(props.document, resolved.value.id)\n    )\n    const resize = () => {\n      if (props.breakpoint || !root.value) return\n      const width = root.value.getBoundingClientRect().width\n      const match = props.document.breakpoints.find(\n        bp =>\n          (bp.minWidth === undefined || width >= bp.minWidth) &&\n          (bp.maxWidth === undefined || width < bp.maxWidth)\n      )\n      activeBreakpoint.value = match?.id ?? props.document.defaultBreakpointId\n    }\n    let observer: ResizeObserver | undefined\n    onMounted(() => {\n      if (typeof ResizeObserver !== 'undefined' && root.value) {\n        observer = new ResizeObserver(resize)\n        observer.observe(root.value)\n      }\n      resize()\n    })\n    onBeforeUnmount(() => observer?.disconnect())\n    watch(\n      () => props.breakpoint,\n      value => {\n        activeBreakpoint.value = value ?? props.document.defaultBreakpointId\n      }\n    )\n    expose({ getBreakpoint: () => activeBreakpoint.value })\n    return () =>\n      h(\n        'div',\n        {\n          ref: root,\n          class: 'ldesign-layout-grid',\n          style: gridStyle.value,\n          dir: gridStyle.value.direction,\n        },\n        props.document.items.map(item => {\n          const placement = item.layout[activeBreakpoint.value]\n          if (!placement || placement.hidden) return null\n          return h(\n            'div',\n            {\n              class: 'ldesign-layout-item',\n              'data-layout-item-id': item.id,\n              'data-layout-type': item.type,\n              style: resolveItemStyle(item, activeBreakpoint.value),\n              tabindex: props.readonly ? undefined : 0,\n            },\n            slots.item?.({\n              item,\n              placement,\n              breakpointId: activeBreakpoint.value,\n            }) ??\n              slots.default?.({\n                item,\n                placement,\n                breakpointId: activeBreakpoint.value,\n              }) ??\n              renderMaterialForTarget(\n                props.materials as VueMaterialSource,\n                item,\n                props.target as 'vue' | 'webcomponent',\n                placement,\n                activeBreakpoint.value\n              )\n          )\n        })\n      )\n  },\n})\n"],"mappings":";;;;;;;;;;;;;AAiBO,MAAM,QAAQ,gBAA4B;CAC/C,MAAM;CACN,OAAO;EACL,UAAU;GAAE,MAAM;GAAQ,UAAU;EAAK;EACzC,YAAY;GAAE,MAAM;GAAQ,SAAS,KAAA;EAAU;EAC/C,UAAU;GAAE,MAAM;GAAS,SAAS;EAAM;EAC1C,WAAW;GACT,MAAM,CAAC,QAAQ,KAAK;GACpB,SAAS,KAAA;EACX;EACA,QAAQ;GAAE,MAAM;GAAQ,SAAS;EAAM;CACzC;CACA,MAAM,OAAO,EAAE,OAAO,UAAU;EAC9B,MAAM,OAAO,IAAiB;EAC9B,MAAM,mBAAmB,IACvB,MAAM,cAAc,MAAM,SAAS,mBACrC;EACA,MAAM,WAAW,eAEb,MAAM,SAAS,YAAY,MACzB,OAAM,GAAG,OAAO,iBAAiB,KACnC,KAAK,MAAM,SAAS,YAAY,EACpC;EACA,MAAM,YAAY,eAChB,iBAAiB,MAAM,UAAU,SAAS,MAAM,EAAE,CACpD;EACA,MAAM,eAAe;GACnB,IAAI,MAAM,cAAc,CAAC,KAAK,OAAO;GACrC,MAAM,QAAQ,KAAK,MAAM,sBAAsB,CAAA,CAAE;GACjD,MAAM,QAAQ,MAAM,SAAS,YAAY,MACvC,QACG,GAAG,aAAa,KAAA,KAAa,SAAS,GAAG,cACzC,GAAG,aAAa,KAAA,KAAa,QAAQ,GAAG,SAC7C;GACA,iBAAiB,QAAQ,OAAO,MAAM,MAAM,SAAS;EACvD;EACA,IAAI;EACJ,gBAAgB;GACd,IAAI,OAAO,mBAAmB,eAAe,KAAK,OAAO;IACvD,WAAW,IAAI,eAAe,MAAM;IACpC,SAAS,QAAQ,KAAK,KAAK;GAC7B;GACA,OAAO;EACT,CAAC;EACD,sBAAsB,UAAU,WAAW,CAAC;EAC5C,YACQ,MAAM,aACZ,UAAS;GACP,iBAAiB,QAAQ,SAAS,MAAM,SAAS;EACnD,CACF;EACA,OAAO,EAAE,qBAAqB,iBAAiB,MAAM,CAAC;EACtD,aACE,EACE,OACA;GACE,KAAK;GACL,OAAO;GACP,OAAO,UAAU;GACjB,KAAK,UAAU,MAAM;EACvB,GACA,MAAM,SAAS,MAAM,KAAI,SAAQ;GAC/B,MAAM,YAAY,KAAK,OAAO,iBAAiB;GAC/C,IAAI,CAAC,aAAa,UAAU,QAAQ,OAAO;GAC3C,OAAO,EACL,OACA;IACE,OAAO;IACP,uBAAuB,KAAK;IAC5B,oBAAoB,KAAK;IACzB,OAAO,iBAAiB,MAAM,iBAAiB,KAAK;IACpD,UAAU,MAAM,WAAW,KAAA,IAAY;GACzC,GACA,MAAM,OAAO;IACX;IACA;IACA,cAAc,iBAAiB;GACjC,CAAC,KACC,MAAM,UAAU;IACd;IACA;IACA,cAAc,iBAAiB;GACjC,CAAC,KACD,wBACE,MAAM,WACN,MACA,MAAM,QACN,WACA,iBAAiB,KACnB,CACJ;EACF,CAAC,CACH;CACJ;AACF,CAAC"}

package/es/components/LGridItem.d.ts

@@ -0,0 +1,52 @@
+import { type PropType } from 'vue';
+import type { LayoutNode, LayoutPlacement } from '@composy/layout-core';
+import { type VueMaterialSource } from './material-renderer';
+export declare const LGridItem: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    item: {
+        type: () => LayoutNode;
+        required: true;
+    };
+    placement: {
+        type: () => LayoutPlacement;
+        required: true;
+    };
+    breakpointId: {
+        type: StringConstructor;
+        required: true;
+    };
+    materials: {
+        type: PropType<VueMaterialSource>;
+        default: any;
+    };
+    target: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    item: {
+        type: () => LayoutNode;
+        required: true;
+    };
+    placement: {
+        type: () => LayoutPlacement;
+        required: true;
+    };
+    breakpointId: {
+        type: StringConstructor;
+        required: true;
+    };
+    materials: {
+        type: PropType<VueMaterialSource>;
+        default: any;
+    };
+    target: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    materials: VueMaterialSource;
+    target: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=LGridItem.d.ts.map

package/es/components/LGridItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGridItem.d.ts","sourceRoot":"","sources":["../../src/components/LGridItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAA;AACvD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AACvE,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,qBAAqB,CAAA;AAE5B,eAAO,MAAM,SAAS;;cAGM,MAAM,UAAU;;;;cACX,MAAM,eAAe;;;;;;;;cAGvB,QAAQ,CAAC,iBAAiB,CAAC;;;;;;;;;;;cAJ9B,MAAM,UAAU;;;;cACX,MAAM,eAAe;;;;;;;;cAGvB,QAAQ,CAAC,iBAAiB,CAAC;;;;;;;;;;4EA4BxD,CAAA"}

package/es/components/LGridItem.js

@@ -0,0 +1,52 @@
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-08-17 11:47:09 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+import { renderMaterialForTarget } from "./material-renderer.js";
+import { defineComponent, h } from "vue";
+//#region src/components/LGridItem.ts
+const LGridItem = defineComponent({
+	name: "LGridItem",
+	props: {
+		item: {
+			type: Object,
+			required: true
+		},
+		placement: {
+			type: Object,
+			required: true
+		},
+		breakpointId: {
+			type: String,
+			required: true
+		},
+		materials: {
+			type: [Object, Array],
+			default: void 0
+		},
+		target: {
+			type: String,
+			default: "vue"
+		}
+	},
+	setup(props, { slots }) {
+		return () => h("div", {
+			class: "ldesign-layout-item",
+			"data-layout-item-id": props.item.id,
+			"data-layout-type": props.item.type
+		}, slots.default?.({
+			item: props.item,
+			placement: props.placement,
+			breakpointId: props.breakpointId
+		}) ?? renderMaterialForTarget(props.materials, props.item, props.target, props.placement, props.breakpointId));
+	}
+});
+//#endregion
+export { LGridItem };
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=LGridItem.js.map

package/es/components/LGridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LGridItem.js","names":[],"sources":["../../src/components/LGridItem.ts"],"sourcesContent":["import { defineComponent, h, type PropType } from 'vue'\nimport type { LayoutNode, LayoutPlacement } from '@composy/layout-core'\nimport {\n  renderMaterialForTarget,\n  type VueMaterialSource,\n} from './material-renderer'\n\nexport const LGridItem = defineComponent({\n  name: 'LGridItem',\n  props: {\n    item: { type: Object as () => LayoutNode, required: true },\n    placement: { type: Object as () => LayoutPlacement, required: true },\n    breakpointId: { type: String, required: true },\n    materials: {\n      type: [Object, Array] as PropType<VueMaterialSource>,\n      default: undefined,\n    },\n    target: { type: String, default: 'vue' },\n  },\n  setup(props, { slots }) {\n    return () =>\n      h(\n        'div',\n        {\n          class: 'ldesign-layout-item',\n          'data-layout-item-id': props.item.id,\n          'data-layout-type': props.item.type,\n        },\n        slots.default?.({\n          item: props.item,\n          placement: props.placement,\n          breakpointId: props.breakpointId,\n        }) ??\n          renderMaterialForTarget(\n            props.materials as VueMaterialSource,\n            props.item,\n            props.target as 'vue' | 'webcomponent',\n            props.placement,\n            props.breakpointId\n          )\n      )\n  },\n})\n"],"mappings":";;;;;;;;;;;;AAOO,MAAM,YAAY,gBAAgB;CACvC,MAAM;CACN,OAAO;EACL,MAAM;GAAE,MAAM;GAA4B,UAAU;EAAK;EACzD,WAAW;GAAE,MAAM;GAAiC,UAAU;EAAK;EACnE,cAAc;GAAE,MAAM;GAAQ,UAAU;EAAK;EAC7C,WAAW;GACT,MAAM,CAAC,QAAQ,KAAK;GACpB,SAAS,KAAA;EACX;EACA,QAAQ;GAAE,MAAM;GAAQ,SAAS;EAAM;CACzC;CACA,MAAM,OAAO,EAAE,SAAS;EACtB,aACE,EACE,OACA;GACE,OAAO;GACP,uBAAuB,MAAM,KAAK;GAClC,oBAAoB,MAAM,KAAK;EACjC,GACA,MAAM,UAAU;GACd,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,cAAc,MAAM;EACtB,CAAC,KACC,wBACE,MAAM,WACN,MAAM,MACN,MAAM,QACN,MAAM,WACN,MAAM,YACR,CACJ;CACJ;AACF,CAAC"}

package/es/components/LLayoutEditor.d.ts

@@ -0,0 +1,49 @@
+import type { LayoutDocument } from '@composy/layout-core';
+import type { LayoutEditorEngine, LayoutEditorOptions } from '@composy/layout-editor';
+export declare const LLayoutEditor: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    document: {
+        type: () => LayoutDocument;
+        required: true;
+    };
+    engine: {
+        type: () => LayoutEditorEngine;
+        required: true;
+    };
+    mode: {
+        type: () => "edit" | "preview" | "readonly";
+        default: string;
+    };
+    preview: () => LayoutEditorOptions["preview"];
+    materials: {
+        type: ObjectConstructor;
+        default: any;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "update:document" | "ready")[], "change" | "update:document" | "ready", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    document: {
+        type: () => LayoutDocument;
+        required: true;
+    };
+    engine: {
+        type: () => LayoutEditorEngine;
+        required: true;
+    };
+    mode: {
+        type: () => "edit" | "preview" | "readonly";
+        default: string;
+    };
+    preview: () => LayoutEditorOptions["preview"];
+    materials: {
+        type: ObjectConstructor;
+        default: any;
+    };
+}>> & Readonly<{
+    onChange?: (...args: any[]) => any;
+    "onUpdate:document"?: (...args: any[]) => any;
+    onReady?: (...args: any[]) => any;
+}>, {
+    mode: "edit" | "preview" | "readonly";
+    materials: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=LLayoutEditor.d.ts.map

package/es/components/LLayoutEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LLayoutEditor.d.ts","sourceRoot":"","sources":["../../src/components/LLayoutEditor.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,cAAc,EAGf,MAAM,sBAAsB,CAAA;AAC7B,OAAO,KAAK,EACV,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,wBAAwB,CAAA;AAE/B,eAAO,MAAM,aAAa;;cAGM,MAAM,cAAc;;;;cACtB,MAAM,kBAAkB;;;;cAEhC,MAAM,MAAM,GAAG,SAAS,GAAG,UAAU;;;aAGpC,MAAM,mBAAmB,CAAC,SAAS,CAAC;;;;;;;;;cAN3B,MAAM,cAAc;;;;cACtB,MAAM,kBAAkB;;;;cAEhC,MAAM,MAAM,GAAG,SAAS,GAAG,UAAU;;;aAGpC,MAAM,mBAAmB,CAAC,SAAS,CAAC;;;;;;;;;;;;4EAyDzD,CAAA"}