@composy/layout-vue 0.0.1 → 0.0.2

package/dist/index.min.js

@@ -1 +1,2038 @@
-(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;});
+/*!
+* ***********************************
+* @composy/layout-vue v0.0.1      *
+* Built with rollup               *
+* Build time: 2024-10-12 17:52:50 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+(function(e, t) {
+	"object" == typeof exports && "undefined" != typeof module ? t(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")) : "function" == typeof define && 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"
+	], t) : t((e = "undefined" != typeof globalThis ? globalThis : e || self).LDesignLayoutVue = {}, e.Vue, e.ComposyLayoutRuntime, e.ComposyLayoutCore, e.ComposyLayoutEditor, e.Gridstack, e["gridstack/dist/gridstack"].min.css, e.Lucide, e.LucideVueNext, e.ComposyLayoutCompiler, e.ComposyLayoutGridstack);
+})(this, function(exports, e, t, a, n, o, r, l, i, s, c) {
+	Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+	const d = /* @__PURE__ */ new WeakMap();
+	function u(e, t) {
+		return function(e) {
+			if (e) {
+				if (Array.isArray(e)) {
+					const t = d.get(e);
+					if (t) return t;
+					const n = (0, a.createMaterialRegistry)(e);
+					return d.set(e, n), n;
+				}
+				return e;
+			}
+		}(e)?.get(t);
+	}
+	function p(t, a, n, o, r = "desktop") {
+		const l = u(t, a.type), i = { ...a.props ?? {} };
+		if ("vue" === n) {
+			const t = l?.renderers?.vue;
+			if (t?.component) return (0, e.h)(t.component, i);
+		} else {
+			const t = l?.renderers?.webcomponent;
+			if (t?.tagName) return (0, e.h)(t.tagName, {
+				...i,
+				materialProps: i,
+				onVnodeMounted: (e) => {
+					const t = e.el;
+					t && "materialProps" in t && (t.materialProps = i);
+				},
+				onVnodeUpdated: (e) => {
+					const t = e.el;
+					t && "materialProps" in t && (t.materialProps = i);
+				}
+			});
+		}
+		const s = l?.renderers?.html;
+		if (s?.render) {
+			const t = s.render({
+				item: a,
+				placement: o ?? a.layout[r] ?? {
+					x: 0,
+					y: 0,
+					w: 1,
+					h: 1
+				},
+				breakpointId: r
+			});
+			return "string" == typeof t ? (0, e.h)("div", { innerHTML: m(t) }) : t;
+		}
+		return s?.tagName ? (0, e.h)(s.tagName, i) : function(t, a, n, o) {
+			const r = u(t, a.type), l = {
+				item: a,
+				placement: n,
+				breakpointId: o
+			}, i = r?.renderers?.vue;
+			if (i?.component) return (0, e.h)(i.component, {
+				...a.props ?? {},
+				...i.tagName ? { is: i.tagName } : {}
+			});
+			const s = r?.renderers?.webcomponent;
+			if (s?.tagName) return (0, e.h)(s.tagName, {
+				...a.props ?? {},
+				materialProps: { ...a.props ?? {} }
+			});
+			const c = r?.renderers?.html;
+			if (c?.render) {
+				const t = c.render(l);
+				return "string" == typeof t ? (0, e.h)("div", { innerHTML: m(t) }) : t;
+			}
+			return c?.tagName ? (0, e.h)(c.tagName, { ...a.props ?? {} }) : void 0;
+		}(t, a, o ?? a.layout[r] ?? {
+			x: 0,
+			y: 0,
+			w: 1,
+			h: 1
+		}, r);
+	}
+	function m(e) {
+		return e.replace(/<(?:script|style|iframe|object|embed|foreignObject)\b[^>]*>[\s\S]*?<\/(?:script|style|iframe|object|embed|foreignObject)\s*>/gi, "").replace(/<(?:script|style|iframe|object|embed|foreignObject)\b[^>]*>/gi, "").replace(/\s+on[a-z]+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/\s+(?:href|src|xlink:href|formaction|srcdoc)\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]+)/gi, (e) => /javascript:|data:text\/html/i.test(e) ? "" : e);
+	}
+	const v = (0, e.defineComponent)({
+		name: "LGrid",
+		props: {
+			document: {
+				type: Object,
+				required: !0
+			},
+			breakpoint: {
+				type: String,
+				default: void 0
+			},
+			readonly: {
+				type: Boolean,
+				default: !1
+			},
+			materials: {
+				type: [Object, Array],
+				default: void 0
+			},
+			target: {
+				type: String,
+				default: "vue"
+			}
+		},
+		setup(a, { slots: n, expose: o }) {
+			const r = (0, e.ref)(), l = (0, e.ref)(a.breakpoint ?? a.document.defaultBreakpointId), i = (0, e.computed)(() => a.document.breakpoints.find((e) => e.id === l.value) ?? a.document.breakpoints[0]), s = (0, e.computed)(() => (0, t.resolveGridStyle)(a.document, i.value.id)), c = () => {
+				if (a.breakpoint || !r.value) return;
+				const e = r.value.getBoundingClientRect().width, t = a.document.breakpoints.find((t) => (void 0 === t.minWidth || e >= t.minWidth) && (void 0 === t.maxWidth || e < t.maxWidth));
+				l.value = t?.id ?? a.document.defaultBreakpointId;
+			};
+			let d;
+			return (0, e.onMounted)(() => {
+				"undefined" != typeof ResizeObserver && r.value && (d = new ResizeObserver(c), d.observe(r.value)), c();
+			}), (0, e.onBeforeUnmount)(() => d?.disconnect()), (0, e.watch)(() => [a.breakpoint, a.document.defaultBreakpointId], ([e, t]) => {
+				l.value = e ?? t;
+			}), o({ getBreakpoint: () => l.value }), () => (0, e.h)("div", {
+				ref: r,
+				class: "ldesign-layout-grid",
+				style: s.value,
+				dir: s.value.direction
+			}, a.document.items.map((o) => {
+				const r = o.layout[l.value];
+				return !r || r.hidden ? null : (0, e.h)("div", {
+					class: "ldesign-layout-item",
+					"data-layout-item-id": o.id,
+					"data-layout-type": o.type,
+					style: (0, t.resolveItemStyle)(o, l.value),
+					tabindex: a.readonly ? void 0 : 0
+				}, n.item?.({
+					item: o,
+					placement: r,
+					breakpointId: l.value
+				}) ?? n.default?.({
+					item: o,
+					placement: r,
+					breakpointId: l.value
+				}) ?? p(a.materials, o, a.target, r, l.value));
+			}));
+		}
+	}), y = (0, e.defineComponent)({
+		name: "LGridItem",
+		props: {
+			item: {
+				type: Object,
+				required: !0
+			},
+			placement: {
+				type: Object,
+				required: !0
+			},
+			breakpointId: {
+				type: String,
+				required: !0
+			},
+			materials: {
+				type: [Object, Array],
+				default: void 0
+			},
+			target: {
+				type: String,
+				default: "vue"
+			}
+		},
+		setup: (a, { slots: n }) => () => (0, e.h)("div", {
+			class: "ldesign-layout-item",
+			"data-layout-item-id": a.item.id,
+			"data-layout-type": a.item.type,
+			style: (0, t.resolveItemStyle)(a.item, a.breakpointId)
+		}, n.default?.({
+			item: a.item,
+			placement: a.placement,
+			breakpointId: a.breakpointId
+		}) ?? p(a.materials, a.item, a.target, a.placement, a.breakpointId))
+	}), f = (0, e.defineComponent)({
+		name: "LMaterialRenderer",
+		props: {
+			item: {
+				type: Object,
+				required: !0
+			},
+			materials: {
+				type: [Object, Array],
+				default: void 0
+			},
+			target: {
+				type: String,
+				default: "vue"
+			},
+			placement: {
+				type: Object,
+				default: void 0
+			},
+			breakpointId: {
+				type: String,
+				default: "desktop"
+			}
+		},
+		setup: (t, { attrs: a }) => () => {
+			const n = p(t.materials, t.item, t.target, t.placement, t.breakpointId);
+			return n ? (0, e.h)(n, a) : null;
+		}
+	}), h = (0, e.defineComponent)({
+		name: "LLayoutEditor",
+		props: {
+			document: {
+				type: Object,
+				required: !0
+			},
+			engine: {
+				type: Object,
+				required: !0
+			},
+			mode: {
+				type: String,
+				default: "edit"
+			},
+			preview: Object,
+			materials: {
+				type: [Object, Array],
+				default: void 0
+			}
+		},
+		emits: [
+			"update:document",
+			"change",
+			"ready"
+		],
+		setup(t, { slots: a, emit: o, expose: r }) {
+			const l = (0, e.shallowRef)((0, n.createLayoutEditor)({
+				document: t.document,
+				engine: t.engine,
+				materials: t.materials,
+				preview: t.preview
+			}));
+			let i = JSON.stringify(t.document);
+			(0, e.onMounted)(() => {
+				l.value.on("document:change", (e) => {
+					i = JSON.stringify(e.document), o("update:document", e.document), o("change", e);
+				}), l.value.mount(), l.value.setMode(t.mode), o("ready", l.value);
+			}), (0, e.watch)(() => t.document, (e) => {
+				const t = JSON.stringify(e);
+				t !== i && (l.value.load(e), i = t);
+			}), (0, e.watch)(() => t.mode, (e) => l.value.setMode(e));
+			const s = (e) => {
+				l.value.handleKeyboard(e);
+			};
+			return (0, e.onBeforeUnmount)(() => l.value.destroy()), r({ editor: l }), () => (0, e.h)("div", {
+				class: "ldesign-layout-editor",
+				"data-layout-mode": t.mode,
+				"aria-keyshortcuts": "ArrowLeft ArrowRight ArrowUp ArrowDown Delete Control+C Control+V Control+X Control+D",
+				onKeydown: s
+			}, a.default?.({ editor: l.value }));
+		}
+	}), b = (0, e.defineComponent)({
+		name: "LMetricCard",
+		props: {
+			title: {
+				type: String,
+				default: "数据指标"
+			},
+			value: {
+				type: [String, Number],
+				default: void 0
+			}
+		},
+		setup: (t) => () => (0, e.h)("article", {
+			class: "layout-card",
+			"data-layout-card": ""
+		}, [
+			(0, e.h)("div", { class: "layout-card__meta" }, [(0, e.h)("span", { class: "layout-card__type" }, "数据指标"), (0, e.h)("span", { class: "layout-card__status" }, "已配置")]),
+			(0, e.h)("h3", { class: "layout-card__title" }, t.title),
+			void 0 === t.value ? null : (0, e.h)("strong", { class: "layout-card__value" }, Number(t.value).toLocaleString("zh-CN")),
+			(0, e.h)("div", { class: "layout-card__footer" }, [(0, e.h)("span", null, "实时数据"), (0, e.h)("span", { class: "layout-card__spark" }, "趋势稳定")])
+		])
+	}), g = (0, e.defineComponent)({
+		name: "LTrendCard",
+		props: { title: {
+			type: String,
+			default: "趋势图表"
+		} },
+		setup: (t) => () => (0, e.h)("article", {
+			class: "layout-card",
+			"data-layout-card": ""
+		}, [
+			(0, e.h)("div", { class: "layout-card__meta" }, [(0, e.h)("span", { class: "layout-card__type" }, "趋势图表"), (0, e.h)("span", { class: "layout-card__status" }, "已配置")]),
+			(0, e.h)("h3", { class: "layout-card__title" }, t.title),
+			(0, e.h)("span", {
+				class: "layout-card__chart",
+				"aria-hidden": "true"
+			}, Array.from({ length: 5 }, (t, a) => (0, e.h)("i", { key: a }))),
+			(0, e.h)("div", { class: "layout-card__footer" }, [(0, e.h)("span", null, "实时数据"), (0, e.h)("span", { class: "layout-card__spark" }, "趋势稳定")])
+		])
+	}), k = ["data-theme", "data-development-framework"], w = { class: "topbar" }, N = { class: "brand" }, E = {
+		class: "brand-mark",
+		"aria-hidden": "true"
+	}, _ = ["aria-expanded", "title"], V = {
+		key: 0,
+		class: "custom-select__menu development-mode__menu",
+		role: "listbox"
+	}, C = ["aria-selected", "onClick"], x = {
+		class: "topbar-center",
+		"aria-hidden": "true",
+		style: { display: "none" }
+	}, L = {
+		class: "route-tabs",
+		"aria-label": "工作区模式"
+	}, S = [
+		"aria-current",
+		"aria-label",
+		"title",
+		"onClick"
+	], $ = {
+		class: "breakpoint-tabs",
+		"aria-label": "画布尺寸"
+	}, B = [
+		"aria-pressed",
+		"aria-label",
+		"title",
+		"onClick"
+	], D = { class: "actions" }, z = ["disabled"], M = ["disabled"], T = ["disabled"], A = [
+		"aria-label",
+		"title",
+		"disabled"
+	], O = [
+		"aria-label",
+		"title",
+		"disabled"
+	], I = [
+		"aria-label",
+		"title",
+		"disabled"
+	], j = ["aria-label", "title"], P = [
+		"aria-pressed",
+		"aria-label",
+		"title"
+	], R = { class: "workspace" }, q = {
+		class: "materials panel-scroll",
+		"data-layout-panel": "materials",
+		"aria-label": "物料面板"
+	}, G = { class: "panel-heading" }, K = { class: "panel-count" }, W = { class: "material-toolbar" }, U = { class: "material-search" }, H = ["onKeydown"], X = ["aria-expanded", "title"], J = {
+		key: 0,
+		class: "custom-select__menu",
+		role: "listbox"
+	}, F = ["aria-selected"], Z = ["aria-selected", "onClick"], Y = { class: "material-result-summary" }, Q = { key: 0 }, ee = {
+		key: 0,
+		class: "material-empty"
+	}, te = [
+		"data-material-type",
+		"data-layout-material",
+		"data-layout-props",
+		"aria-label",
+		"onClick",
+		"onKeydown"
+	], ae = {
+		class: "material-icon material-icon--metric",
+		"aria-hidden": "true"
+	}, ne = { class: "material-copy" }, oe = { class: "material-card-meta" }, re = { class: "material-size" }, le = { class: "material-renderer-badges" }, ie = ["title"], se = { class: "material-card-actions" }, ce = ["onClick"], de = {
+		class: "material-add",
+		"aria-hidden": "true"
+	}, ue = {
+		class: "canvas panel-scroll",
+		"data-layout-panel": "canvas",
+		"aria-label": "布局画布"
+	}, pe = {
+		class: "canvas-toolbar",
+		"aria-label": "画布操作"
+	}, me = ["aria-expanded"], ve = {
+		key: 0,
+		class: "custom-select__menu",
+		role: "listbox"
+	}, ye = [
+		"aria-selected",
+		"aria-label",
+		"onClick"
+	], fe = { class: "custom-select__option-meta" }, he = ["aria-label", "title"], be = { class: "canvas-toolbar__group" }, ge = {
+		class: "canvas-zoom-label",
+		"aria-live": "polite"
+	}, ke = [
+		"data-canvas-width",
+		"data-canvas-height",
+		"data-canvas-orientation"
+	], we = {
+		class: "editor-stage",
+		"aria-label": "可视化编辑画布"
+	}, Ne = { class: "stage-header" }, Ee = { class: "stage-badge" }, _e = {
+		class: "preview-stage",
+		"aria-label": "组件预览画布"
+	}, Ve = ["aria-label", "onClick"], Ce = ["data-preview-framework"], xe = { class: "stage-header" }, Le = { class: "stage-badge" }, Se = ["data-preview-framework"], $e = { class: "stage-header" }, Be = { class: "stage-badge" }, De = {
+		class: "inspectors panel-scroll",
+		"data-layout-panel": "inspector",
+		"aria-label": "代码检查面板"
+	}, ze = { class: "inspector-heading" }, Me = ["aria-label", "title"], Te = {
+		class: "code-block",
+		"data-code-output": ""
+	}, Ae = ["innerHTML"], Oe = { class: "code-status" }, Ie = ["data-preview-framework", "data-theme"], je = { class: "preview-dialog__panel" }, Pe = { class: "preview-dialog__header" }, Re = { class: "preview-dialog__header-meta" }, qe = { class: "stage-badge" }, Ge = { class: "preview-dialog__body" }, Ke = { class: "preview-dialog__canvas" }, We = [
+		"data-material-code-framework",
+		"data-material-code-type",
+		"data-theme"
+	], Ue = { class: "preview-dialog__panel material-code-dialog__panel" }, He = { class: "preview-dialog__header" }, Xe = { id: "material-code-title" }, Je = { class: "material-code-dialog__subtitle" }, Fe = { class: "preview-dialog__header-meta" }, Ze = { class: "stage-badge" }, Ye = { class: "preview-dialog__body material-code-dialog__body" }, Qe = { class: "code-block material-code-dialog__code" }, et = ["innerHTML"], tt = { class: "preview-dialog__footer" }, at = { class: "material-code-dialog__actions" }, nt = ["aria-label", "title"];
+	var ot = (0, e.defineComponent)({
+		__name: "LLayoutWorkspace",
+		props: {
+			document: {
+				type: Object,
+				required: !1
+			},
+			materials: {
+				type: [Object, Array],
+				required: !1
+			},
+			theme: {
+				type: String,
+				required: !1
+			}
+		},
+		emits: ["update:document", "change"],
+		setup(r, { emit: d }) {
+			const u = r, p = d, m = [
+				{
+					id: "editor",
+					label: "编辑",
+					description: "可视化编辑工作区"
+				},
+				{
+					id: "vanilla",
+					label: "原生",
+					description: "原生运行时渲染"
+				},
+				{
+					id: "runtime",
+					label: "预览",
+					description: "网格布局运行时预览"
+				},
+				{
+					id: "vue",
+					label: "组件",
+					description: "组件适配器"
+				}
+			], y = {
+				desktop: i.Monitor,
+				tablet: i.Tablet,
+				mobile: i.Smartphone
+			}, h = {
+				editor: i.Grid2X2,
+				vanilla: i.Code2,
+				runtime: i.Eye,
+				vue: i.PanelsTopLeft
+			}, ot = [{
+				id: "webcomponent",
+				label: "原生",
+				description: "原生 Web Component 物料",
+				icon: i.Code2
+			}, {
+				id: "vue",
+				label: "Vue 3",
+				description: "Vue 3 组件物料",
+				icon: i.PanelsTopLeft
+			}];
+			function rt(e) {
+				return e.replace(/[&<>'"]/g, (e) => ({
+					"&": "&amp;",
+					"<": "&lt;",
+					">": "&gt;",
+					"'": "&#39;",
+					"\"": "&quot;"
+				})[e] ?? e);
+			}
+			function lt(e) {
+				return String(e.props?.title ?? e.id);
+			}
+			function it(e) {
+				return yt.get(e)?.title ?? yt.get(e)?.label ?? e;
+			}
+			function st(e) {
+				return "desktop" === e ? "桌面" : "tablet" === e ? "平板" : "手机";
+			}
+			function ct(e) {
+				if ("undefined" == typeof document) return "";
+				const t = (0, l.createElement)(l.icons[e]);
+				return t.setAttribute("width", "13"), t.setAttribute("height", "13"), t.setAttribute("stroke-width", "1.9"), t.setAttribute("aria-hidden", "true"), t.outerHTML;
+			}
+			function dt(e, t = {}) {
+				const a = it(e.type), n = rt(lt(e)), o = e.props?.value, r = void 0 === o ? "<span class=\"layout-card__chart\" aria-hidden=\"true\"><i></i><i></i><i></i><i></i><i></i></span>" : `<strong class="layout-card__value">${rt(new Intl.NumberFormat("zh-CN").format(Number(o)))}</strong>`;
+				return `<article class="layout-card" data-layout-card data-layout-type="${rt(e.type)}">\n    ${t.interactive ? `<div class="layout-card__actions" data-layout-actions>\n      <button class="layout-card__action" type="button" data-layout-action="copy" aria-disabled="false" aria-label="复制物料" title="复制物料">${ct("Copy")}</button>\n      <button class="layout-card__action" type="button" data-layout-action="delete" aria-disabled="false" aria-label="删除物料" title="删除物料">${ct("Trash2")}</button>\n      <button class="layout-card__action" type="button" data-layout-action="lock" aria-disabled="false" aria-label="${e.state?.locked ? "解锁物料" : "锁定物料"}" title="${e.state?.locked ? "解锁物料" : "锁定物料"}">${ct(e.state?.locked ? "Unlock" : "Lock")}</button>\n    </div>` : ""}\n    <div class="layout-card__meta"><span class="layout-card__type">${rt(a)}</span><span class="layout-card__status">已配置</span></div>\n    <h3 class="layout-card__title">${n}</h3>\n    ${r}\n    <div class="layout-card__footer"><span>实时数据</span><span class="layout-card__spark">趋势稳定</span></div>\n  </article>`;
+			}
+			function ut(e, t) {
+				const a = (yt.get(t.type)?.renderers?.webcomponent)?.tagName;
+				if (e.className = "layout-item-shell", e.dataset.layoutType = t.type, e.dataset.materialRenderer = "webcomponent", !a || !/^[a-z][a-z0-9.-]*$/i.test(a)) return void (e.innerHTML = dt(t));
+				(function(e, t) {
+					if ("undefined" != typeof customElements && /^[a-z][a-z0-9.-]*$/i.test(e) && !customElements.get(e)) {
+						class a extends HTMLElement {
+							constructor() {
+								super(...arguments), this.props = {};
+							}
+							static get observedAttributes() {
+								return ["title", "value"];
+							}
+							get materialProps() {
+								return { ...this.props };
+							}
+							set materialProps(e) {
+								this.props = { ...e ?? {} }, this.render();
+							}
+							connectedCallback() {
+								this.render();
+							}
+							attributeChangedCallback() {
+								Object.keys(this.props).length || this.render();
+							}
+							attributeProps() {
+								const e = {};
+								for (const t of Array.from(this.attributes)) "class" !== t.name && "style" !== t.name && (e[t.name] = "value" !== t.name || "" === t.value || Number.isNaN(Number(t.value)) ? t.value : Number(t.value));
+								return e;
+							}
+							render() {
+								const e = Object.keys(this.props).length ? this.props : this.attributeProps();
+								this.style.display = "block", this.style.width = "100%", this.style.height = "100%", this.innerHTML = dt({
+									id: `native-${t}`,
+									type: t,
+									layout: {},
+									props: e
+								});
+							}
+						}
+						customElements.define(e, a);
+					}
+				})(a, t.type);
+				const n = e.ownerDocument.createElement(a);
+				n.materialProps = { ...t.props ?? {} }, e.replaceChildren(n);
+			}
+			function pt(e, t) {
+				"webcomponent" !== Vt.value ? (e.className = "layout-item-shell", e.dataset.layoutType = t.type, e.dataset.materialRenderer = "vue", e.innerHTML = dt(t)) : ut(e, t);
+			}
+			function mt(e) {
+				const t = e.replace(/^#\/?/, "");
+				return m.some((e) => e.id === t) ? t : "editor";
+			}
+			const vt = [{
+				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: !0,
+					resizable: !0
+				},
+				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: b
+					}
+				}
+			}, {
+				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: !0,
+					resizable: !0
+				},
+				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: g
+					}
+				}
+			}];
+			const yt = (ft = u.materials) ? Array.isArray(ft) ? (0, a.createMaterialRegistry)(ft) : ft : (0, a.createMaterialRegistry)(vt);
+			var ft;
+			const ht = u.document ?? (0, a.createLayoutDocument)({
+				id: "layout-alpha-demo",
+				breakpoints: a.responsiveWebBreakpoints.map((e) => ({ ...e })),
+				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
+							}
+						}
+					}
+				]
+			}), bt = (0, e.ref)(), gt = (0, e.ref)(), kt = (0, e.ref)(), wt = (0, e.ref)(), Nt = (0, e.ref)(), Et = (0, e.ref)(""), _t = (0, e.ref)(), Vt = (0, e.ref)("vue"), Ct = /* @__PURE__ */ new Map(), xt = /* @__PURE__ */ new Map(), Lt = (0, e.computed)(() => yt.getCategories()), St = (0, e.computed)(() => _t.value ? Lt.value.find((e) => e.id === _t.value)?.label ?? "全部分类" : "全部分类"), $t = (0, e.computed)(() => "webcomponent" === Vt.value ? "原生" : "Vue 3"), Bt = (0, e.computed)({
+				get: () => _t.value ?? "",
+				set: (e) => {
+					_t.value = e || void 0;
+				}
+			}), Dt = (0, e.computed)(() => Boolean(Et.value.trim()) || Boolean(_t.value)), zt = (0, e.computed)(() => yt.search({
+				query: Et.value,
+				category: _t.value,
+				framework: Vt.value
+			})), Mt = (0, e.ref)(structuredClone(ht)), Tt = (0, e.ref)(), At = (0, e.ref)([]), Ot = (0, e.ref)("desktop"), It = (0, e.ref)("landscape"), jt = (0, e.ref)(!1), Pt = (0, e.ref)(!1), Rt = (0, e.ref)(!1), qt = (0, e.ref)(!1), Gt = (0, e.ref)(!1), Kt = (0, e.ref)(!1), Wt = (0, e.ref)(), Ut = (0, e.ref)(!1), Ht = (0, e.ref)("editor"), Xt = (0, e.ref)(u.theme ?? "light"), Jt = (0, e.ref)(1), Ft = (0, e.ref)({
+				x: 0,
+				y: 0
+			}), Zt = (0, e.ref)("select"), Yt = (0, e.ref)(!1), Qt = (0, e.ref)(!1), ea = (0, e.ref)({
+				x: 0,
+				y: 0,
+				panX: 0,
+				panY: 0
+			});
+			let ta, aa, na, oa, ra;
+			const la = [], ia = (0, e.computed)(() => Mt.value), sa = (0, e.computed)(() => ({
+				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
+					}
+				}
+			})[Ot.value]?.[It.value] ?? {
+				width: 1200,
+				height: 760
+			}), ca = (0, e.computed)(() => y[Ot.value] ?? i.Monitor);
+			(0, e.computed)(() => JSON.stringify(ia.value, null, 2));
+			const da = (0, e.computed)(() => (0, s.compileLayout)(ia.value, {
+				target: "html-css",
+				breakpointId: Ot.value,
+				materials: yt,
+				materialCompiler: {
+					supports: () => !0,
+					compile: (e) => function(e) {
+						const t = (yt.get(e.type)?.renderers?.webcomponent)?.tagName;
+						if (!t || !/^[a-z][a-z0-9.-]*$/i.test(t)) return dt(e);
+						const a = Object.entries(e.props ?? {}).filter(([, e]) => null != e).filter(([, e]) => "object" != typeof e && "function" != typeof e).map(([e, t]) => `${e.replace(/[^a-zA-Z0-9:_.-]/g, "-")}="${rt(String(t))}"`).join(" ");
+						return `<${t}${a ? ` ${a}` : ""}></${t}>`;
+					}(e)
+				}
+			})), ua = (0, e.computed)(() => function(e) {
+				let t = 0;
+				return e.replace(/\s*\{\s*/g, " {\n").replace(/\s*;\s*/g, ";\n").replace(/\s*\}\s*/g, "\n}\n").split("\n").map((e) => e.trim()).filter(Boolean).map((e) => {
+					e.startsWith("}") && (t = Math.max(0, t - 1));
+					const a = `${"  ".repeat(t)}${e}`;
+					return e.endsWith("{") && (t += 1), a;
+				}).join("\n");
+			}(da.value.css ?? "")), pa = (0, e.computed)(() => {
+				const e = da.value;
+				return `<style>\n${ua.value}\n</style>\n\n${function(e) {
+					const t = e.replace(/></g, ">\n<").split("\n");
+					let a = 0;
+					return t.map((e) => {
+						const t = e.trim();
+						if (!t) return "";
+						t.startsWith("</") && (a = Math.max(0, a - 1));
+						const n = `${"  ".repeat(a)}${t}`;
+						return !t.startsWith("<") || t.startsWith("</") || t.startsWith("<!") || t.startsWith("<?") || t.endsWith("/>") || /^<(?:area|base|br|col|embed|hr|img|input|link|meta|param|source|track|wbr)\b/i.test(t) || (a += 1), n;
+					}).filter(Boolean).join("\n");
+				}(e.html ?? "")}`;
+			});
+			(0, e.computed)(() => `<script setup lang="ts">\nimport { LGrid } from '@composy/layout-vue'\nimport type { LayoutDocument } from '@composy/layout-core'\n\nconst layoutDocument: LayoutDocument = ${JSON.stringify(ia.value, null, 2)}\n<\/script>\n\n<template>\n  <LGrid :document="layoutDocument" breakpoint="${Ot.value}">\n    <template #item="{ item }">\n      <article class="layout-card">\n        <div class="layout-card__meta">\n          <span class="layout-card__type">{{ item.type === 'metric' ? '数据指标' : '趋势图表' }}</span>\n          <span class="layout-card__status">已配置</span>\n        </div>\n        <h3 class="layout-card__title">{{ item.props.title }}</h3>\n        <strong v-if="item.props.value !== undefined" class="layout-card__value">\n          {{ Number(item.props.value).toLocaleString('zh-CN') }}\n        </strong>\n        <span v-else class="layout-card__chart" aria-hidden="true">\n\n          <i v-for="bar in 5" :key="bar" />\n        </span>\n        <div class="layout-card__footer"><span>实时数据</span><span class="layout-card__spark">趋势稳定</span></div>\n      </article>\n    </template>\n  </LGrid>\n</template>`), (0, e.computed)(() => `import { Grid } from '@composy/layout-react'\nimport type { LayoutDocument } from '@composy/layout-core'\n\nconst layoutDocument: LayoutDocument = ${JSON.stringify(ia.value, null, 2)}\n\nexport function LayoutPreview() {\n  return (\n    <Grid document={layoutDocument} breakpoint="${Ot.value}">\n      {({ item }) => (\n        <article className="layout-card">\n          <div className="layout-card__meta">\n            <span className="layout-card__type">{item.type === 'metric' ? '数据指标' : '趋势图表'}</span>\n            <span className="layout-card__status">已配置</span>\n          </div>\n          <h3 className="layout-card__title">{String(item.props.title)}</h3>\n          {item.props.value !== undefined ? (\n            <strong className="layout-card__value">{Number(item.props.value).toLocaleString('zh-CN')}</strong>\n          ) : (\n            <span className="layout-card__chart" aria-hidden="true">{[1, 2, 3, 4, 5].map(bar => <i key={bar} />)}</span>\n          )}\n          <div className="layout-card__footer"><span>实时数据</span><span className="layout-card__spark">趋势稳定</span></div>\n        </article>\n      )}\n    </Grid>\n  )\n}`);
+			const ma = (0, e.computed)(() => {
+				const e = /* @__PURE__ */ new Map(), t = [], a = /* @__PURE__ */ new Set(["LGrid"]);
+				for (const n of yt.getAll()) {
+					const o = n.renderers?.vue;
+					if (!o?.package || !o.exportName) continue;
+					const r = o.exportName.trim();
+					if (!/^[A-Za-z_$][\w$]*$/.test(r)) continue;
+					let l = r, i = 2;
+					for (; a.has(l);) l = `${r}${i++}`;
+					a.add(l);
+					const s = e.get(o.package) ?? [];
+					s.push(l === r ? r : `${r} as ${l}`), e.set(o.package, s), t.push(`  ${JSON.stringify(n.type)}: ${l}`);
+				}
+				const n = ["import { LGrid } from '@composy/layout-vue'", ...[...e.entries()].map(([e, exports]) => `import { ${exports.join(", ")} } from '${e}'`)].join("\n"), o = t.length ? `const materialComponents = {\n${t.join(",\n")}\n} as const` : "const materialComponents: Record<string, never> = {}";
+				return `<script setup lang="ts">\n${n}\nimport type { LayoutDocument } from '@composy/layout-core'\n\nconst layoutDocument: LayoutDocument = ${JSON.stringify(ia.value, null, 2)}\nconst breakpoint = '${Ot.value}'\n${o}\n<\/script>\n\n<template>\n  <LGrid :document="layoutDocument" :breakpoint="breakpoint">\n    <template #item="{ item }">\n      <component\n        :is="materialComponents[item.type as keyof typeof materialComponents]"\n        v-bind="item.props"\n      />\n    </template>\n  </LGrid>\n</template>\n\n<style scoped>\n/* LGrid renders the ldesign-layout-grid CSS Grid container. */\n${ua.value}\n</style>`;
+			});
+			(0, e.computed)(() => `import type { LayoutDocument, LayoutNode } from '@composy/layout-core'\n\nconst layoutDocument: LayoutDocument = ${JSON.stringify(ia.value, null, 2)}\nconst breakpoint = '${Ot.value}'\nconst itemClass = (item: LayoutNode) => \`ldesign-layout-item-\${item.id.replace(/[^a-zA-Z0-9_-]/g, '-') }\`\n\nexport function LayoutPreview() {\n  return (\n    <section className="ldesign-layout-grid">\n      {layoutDocument.items.map(item => (\n        <article key={item.id} className={\`\${itemClass(item)} layout-card\`}>\n          <div className="layout-card__meta"><span className="layout-card__type">{item.type === 'metric' ? '数据指标' : '趋势图表'}</span><span className="layout-card__status">已配置</span></div>\n          <h3 className="layout-card__title">{String(item.props.title)}</h3>\n          {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>}\n          <div className="layout-card__footer"><span>实时数据</span><span className="layout-card__spark">趋势稳定</span></div>\n        </article>\n      ))}\n    </section>\n  )\n}\n\n/* CSS Grid styles are emitted separately by the compiler. */`.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 va = (0, e.computed)(() => "vue" === Vt.value ? ma.value : pa.value), ya = (0, e.computed)(() => "vue" === Vt.value ? "Vue组件代码" : "原生代码"), fa = (0, e.computed)(() => "vue" === Vt.value ? "vue" : "html");
+			function ha(e) {
+				return { ...e.defaults ?? {} };
+			}
+			const ba = (0, e.computed)(() => {
+				const e = Wt.value;
+				return e ? "vue" === Vt.value ? function(e) {
+					const t = e.renderers?.vue, a = t?.exportName?.trim(), n = (a && /^[A-Za-z_$][\w$]*$/.test(a) ? a : void 0) ?? t?.component?.name ?? e.type.replace(/[^A-Za-z0-9_$]/g, ""), o = t?.package && a && /^[A-Za-z_$][\w$]*$/.test(a) ? `import { ${n} } from '${t.package}'` : `// Vue 组件由物料注册表提供：${n}`, r = ha(e), l = Object.entries(r).filter(([, e]) => null != e).map(([e, t]) => `    :${e}='${JSON.stringify(t)}'`).join("\n");
+					return `<script setup lang="ts">\n${o}\n<\/script>\n\n\x3c!-- 注册表物料：${e.type} --\x3e\n<template>\n  <${n}${l ? `\n${l}\n  ` : ""}/>\n</template>`;
+				}(e) : function(e) {
+					const t = (e.renderers?.webcomponent)?.tagName ?? `ldesign-${e.type.replace(/[^a-z0-9-]/gi, "-")}`, a = Object.entries(ha(e)).filter(([, e]) => null != e).map(([e, t]) => `${e}="${String(t).replace(/"/g, "&quot;")}"`).join("\n  ");
+					return `\x3c!-- 注册表物料：${e.type} --\x3e\n\x3c!-- Web Component 标签：${t} --\x3e\n<${t}${a ? `\n  ${a}` : ""}></${t}>`;
+				}(e) : "";
+			}), ga = (0, e.computed)(() => wa(ba.value)), ka = (0, e.computed)(() => ba.value.split("\n").length);
+			function wa(e) {
+				const t = [], a = (e, a) => `__LDS_TOKEN_${t.push(`<span class="code-token-${a}">${e}</span>`) - 1}__`;
+				let n = rt(e);
+				n = n.replace(/(&quot;.*?&quot;|&#39;.*?&#39;|`.*?`)/g, (e) => a(e, "string")), n = n.replace(/(\/\/[^\n]*|\/\*[\s\S]*?\*\/)/g, (e) => a(e, "comment")), n = n.replace(/(^|[;{\n]\s*)([A-Za-z_$][\w$-]*)(?=\s*:)/g, (e, t, n) => `${t}${a(n, "property")}`), n = n.replace(/\b(import|from|const|let|function|return|export|as|type|class|extends|new|true|false|null|undefined)\b/g, (e) => a(e, /^(?:true|false|null|undefined)$/.test(e) ? "constant" : "keyword")), n = n.replace(/(&lt;\/?[A-Za-z][^&]*&gt;)/g, (e) => a(e, "tag"));
+				let o = "";
+				for (; o !== n && /__LDS_TOKEN_\d+__/.test(n);) o = n, n = n.replace(/__LDS_TOKEN_(\d+)__/g, (e, a) => t[Number(a)] ?? "");
+				return n;
+			}
+			const Na = (0, e.computed)(() => wa(va.value)), Ea = (0, e.computed)(() => va.value.split("\n").length), _a = (0, e.computed)(() => ({
+				width: `${sa.value.width}px`,
+				minHeight: `${sa.value.height}px`,
+				"--canvas-height": `${sa.value.height}px`,
+				"--canvas-grid-height": `${Math.max(180, sa.value.height)}px`,
+				transform: `translate3d(${Ft.value.x}px, ${Ft.value.y}px, 0) scale(${Jt.value})`
+			})), Va = (0, e.computed)(() => `${Math.round(100 * Jt.value)}%`), Ca = (0, e.computed)(() => Mt.value.items.find((e) => e.id === Tt.value)), xa = (0, e.computed)(() => Boolean(Ca.value?.state?.locked)), La = (0, e.computed)(() => !1 !== Ca.value?.constraints?.movable), Sa = (0, e.computed)(() => !1 !== Ca.value?.constraints?.resizable);
+			function $a(e) {
+				if (!ta) return;
+				const t = ta.addItem({ type: e });
+				ta.updateItem(t.id, (e) => {
+					for (const t of Object.values(e.layout)) t.y = 30;
+					return e;
+				}), ta.select(t.id);
+			}
+			function Ba() {
+				Wt.value = void 0, Ut.value = !1;
+			}
+			async function Da() {
+				if (ba.value && "undefined" != typeof navigator) try {
+					await navigator.clipboard.writeText(ba.value), Ut.value = !0, window.setTimeout(() => {
+						Ut.value = !1;
+					}, 1500);
+				} catch {
+					Ut.value = !1;
+				}
+			}
+			function za(e) {
+				Pt.value = "category" === e && !Pt.value, jt.value = "device" === e && !jt.value, Rt.value = !1;
+			}
+			function Ma() {
+				Rt.value = !Rt.value, Pt.value = !1, jt.value = !1;
+			}
+			function Ta() {
+				Pt.value = !1, jt.value = !1, Rt.value = !1;
+			}
+			function Aa(e) {
+				"Escape" === e.key && (Pt.value || Rt.value || jt.value) && (Ta(), e.target?.blur());
+			}
+			function Oa(e) {
+				const t = e.target;
+				t instanceof Element && (t.closest("[data-layout-filter-menu]") || Ta());
+			}
+			function Ia(e) {
+				Bt.value = e, Ta();
+			}
+			function ja() {
+				Et.value = "", _t.value = void 0, Ta();
+			}
+			function Pa(e) {
+				return "chart" === e ? i.ChartSpline : i.ChartNoAxesColumnIncreasing;
+			}
+			function Ra() {
+				if (!ta) return;
+				const e = new Set(zt.value.map((e) => e.type));
+				for (const e of zt.value) {
+					const t = Ct.get(e.type);
+					if (!t || xt.has(e.type)) continue;
+					const a = e.defaultLayout ?? e.size?.default, n = ta.registerExternalDragSource({
+						element: t,
+						type: e.type,
+						props: { ...e.defaults ?? {} },
+						placement: {
+							x: 0,
+							y: 0,
+							w: a?.w ?? 1,
+							h: a?.h ?? 1
+						}
+					});
+					xt.set(e.type, n);
+				}
+				for (const [t, a] of xt) e.has(t) || (a(), xt.delete(t));
+			}
+			function qa() {
+				ta?.handleKeyboard({ key: "Delete" });
+			}
+			function Ga() {
+				ta && Tt.value && (xa.value ? ta.unlockItem(Tt.value) : ta.lockItem(Tt.value));
+			}
+			function Ka(e) {
+				ta && Tt.value && ta.updateItem(Tt.value, (t) => (t.constraints = {
+					...t.constraints ?? {},
+					[e]: !1 === t.constraints?.[e]
+				}, t));
+			}
+			function Wa() {
+				ta?.undo();
+			}
+			function Ua() {
+				ta?.redo();
+			}
+			function Ha() {
+				const e = Gt.value ? "edit" : "preview";
+				ta?.setMode(e), Ya("preview" === e ? "runtime" : "editor");
+			}
+			function Xa() {
+				Kt.value = !0, (0, e.nextTick)(Fa);
+			}
+			function Ja() {
+				Kt.value = !1, na?.destroy(), na = void 0;
+			}
+			function Fa() {
+				if ("webcomponent" !== Vt.value || !Kt.value || !Nt.value) return na?.destroy(), void (na = void 0);
+				const e = ta?.exportRuntimeDocument() ?? Mt.value;
+				na ? na.update(e) : (na = (0, t.createLayoutRuntime)({
+					container: Nt.value,
+					document: e,
+					materials: yt,
+					observeResize: !1,
+					renderItem: ({ shell: e, item: t }) => {
+						const a = () => ut(e, t);
+						return a(), { update: a };
+					}
+				}), na.mount()), na.setBreakpoint(Ot.value);
+			}
+			function Za() {
+				if ("webcomponent" !== Vt.value || "vanilla" !== Ht.value || !wt.value || !ta) return aa?.destroy(), void (aa = void 0);
+				const e = ta.exportRuntimeDocument();
+				aa ? aa.update(e) : (aa = (0, t.createLayoutRuntime)({
+					container: wt.value,
+					document: e,
+					materials: yt,
+					observeResize: !1,
+					renderItem: ({ shell: e, item: t }) => {
+						const a = () => {
+							pt(e, t);
+						};
+						return a(), { update: a };
+					}
+				}), aa.mount()), aa.setBreakpoint(Ot.value);
+			}
+			function Ya(t) {
+				if (Ht.value = t, "undefined" != typeof window && (window.location.hash = `/${t}`), "runtime" === t) {
+					"preview" === ta?.getMode() && ta.setMode("edit"), ta?.setMode("preview");
+					const t = () => {
+						"runtime" === Ht.value && bt.value?.querySelectorAll(".grid-stack-item").forEach((e) => e.remove());
+					};
+					t(), (0, e.nextTick)(t);
+				} else Gt.value && ta?.setMode("edit");
+				(0, e.nextTick)(Za);
+			}
+			function Qa(e) {
+				Ot.value = e, It.value = "mobile" === e ? "portrait" : "landscape", ta?.setBreakpoint(e), aa?.setBreakpoint(e), jt.value = !1;
+			}
+			function en() {
+				It.value = "portrait" === It.value ? "landscape" : "portrait";
+			}
+			function tn(e, t) {
+				const a = gt.value, n = Jt.value, o = function(e) {
+					return Math.min(2, Math.max(.5, Math.round(20 * e) / 20));
+				}(e);
+				if (!a || n === o) return;
+				const r = a.getBoundingClientRect(), l = t?.x ?? r.left + r.width / 2, i = t?.y ?? r.top + r.height / 2, s = (l - r.left - Ft.value.x) / n, c = (i - r.top - Ft.value.y) / n;
+				Jt.value = o, Ft.value = {
+					x: l - r.left - s * o,
+					y: i - r.top - c * o
+				};
+			}
+			function an(e) {
+				tn(Jt.value + .1 * e);
+			}
+			function nn() {
+				Jt.value = 1, Ft.value = {
+					x: 0,
+					y: 0
+				};
+			}
+			function on() {
+				Ft.value = {
+					x: 0,
+					y: 0
+				};
+			}
+			function rn() {
+				Xt.value = "light" === Xt.value ? "dark" : "light", "undefined" != typeof window && window.localStorage.setItem("layout-theme", Xt.value);
+			}
+			function ln(e) {
+				e.preventDefault();
+				const t = e.deltaY < 0 ? 1 : -1;
+				tn(Jt.value + .08 * t, {
+					x: e.clientX,
+					y: e.clientY
+				});
+			}
+			function sn(e) {
+				"pan" !== Zt.value && !Qt.value && 1 !== e.button || 2 === e.button || (e.preventDefault(), e.stopPropagation(), e.currentTarget.setPointerCapture?.(e.pointerId), Yt.value = !0, ea.value = {
+					x: e.clientX,
+					y: e.clientY,
+					panX: Ft.value.x,
+					panY: Ft.value.y
+				});
+			}
+			function cn(e) {
+				if (!Yt.value) return;
+				const t = ea.value;
+				Ft.value = {
+					x: t.panX + e.clientX - t.x,
+					y: t.panY + e.clientY - t.y
+				};
+			}
+			function dn(e) {
+				Yt.value && (Yt.value = !1, e && e.currentTarget.releasePointerCapture?.(e.pointerId));
+			}
+			function un(e) {
+				"Space" === e.code && (Qt.value = !0);
+			}
+			function pn(e) {
+				"Space" === e.code && (Qt.value = !1);
+			}
+			function mn(e) {
+				if (!ta || e.defaultPrevented) return;
+				const t = bt.value?.closest("[data-layout-workspace]");
+				if (!(t && e.target instanceof Node && t.contains(e.target))) return;
+				const a = e.key.toLowerCase();
+				((e.ctrlKey || e.metaKey) && [
+					"c",
+					"v",
+					"x",
+					"d"
+				].includes(a) || ["delete", "backspace"].includes(a)) && ta.handleKeyboard({
+					key: e.key,
+					shiftKey: e.shiftKey,
+					ctrlKey: e.ctrlKey,
+					metaKey: e.metaKey,
+					altKey: e.altKey,
+					preventDefault: () => e.preventDefault()
+				});
+			}
+			async function vn() {
+				const e = va.value;
+				try {
+					if (navigator.clipboard?.writeText) await navigator.clipboard.writeText(e);
+					else {
+						const t = document.createElement("textarea");
+						t.value = e, t.style.position = "fixed", t.style.opacity = "0", document.body.appendChild(t), t.select(), document.execCommand("copy"), t.remove();
+					}
+					qt.value = !0, window.setTimeout(() => {
+						qt.value = !1;
+					}, 1600);
+				} catch {
+					qt.value = !1;
+				}
+			}
+			function yn() {
+				const e = new Blob([va.value], { type: "text/plain;charset=utf-8" }), t = URL.createObjectURL(e), a = document.createElement("a");
+				a.href = t, a.download = `layout-${Vt.value}.${fa.value}`, a.click(), URL.revokeObjectURL(t);
+			}
+			function fn(e) {
+				const t = e.target;
+				if (!(t instanceof Element)) return;
+				const a = t.closest("[data-layout-action]"), n = t.closest(".grid-stack-item");
+				if (!a || !n || "true" === a.dataset.layoutActionPointer) return void ("true" === a?.dataset.layoutActionPointer && delete a.dataset.layoutActionPointer);
+				"pointerdown" === e.type && (a.dataset.layoutActionPointer = "true", e.preventDefault());
+				const o = n.getAttribute("gs-id") ?? n.getAttribute("data-layout-item-id");
+				if (!o || !ta) return;
+				ta.select(o);
+				const r = a.dataset.layoutAction;
+				"copy" === r ? ta.copySelection() : "delete" === r ? ta.removeItem(o) : "lock" === r && (Mt.value.items.find((e) => e.id === o)?.state?.locked ? ta.unlockItem(o) : ta.lockItem(o));
+			}
+			function hn() {
+				const e = bt.value;
+				e && e.querySelectorAll(".grid-stack-item").forEach((e) => {
+					const t = e.getAttribute("gs-id") ?? e.getAttribute("data-layout-item-id") ?? "", a = Mt.value.items.find((e) => e.id === t), n = At.value.includes(t);
+					e.classList.toggle("is-selected", n), e.tabIndex = 0, e.setAttribute("role", "button"), a && e.setAttribute("aria-label", `${lt(a)}，${it(a.type)}`), e.setAttribute("aria-pressed", String(n)), e.setAttribute("aria-selected", String(n)), e.setAttribute("aria-disabled", String(Boolean(a?.state?.locked)));
+				});
+			}
+			function bn() {
+				if (void 0 !== ra) return;
+				const e = () => {
+					ra = void 0, ta && (Mt.value = ta.exportRuntimeDocument(), queueMicrotask(hn));
+				};
+				"undefined" == typeof window ? e() : ra = window.requestAnimationFrame(e);
+			}
+			return (0, e.watch)([
+				Et,
+				_t,
+				Vt
+			], () => (0, e.nextTick)(Ra)), (0, e.watch)([
+				Kt,
+				Vt,
+				Ot,
+				Mt
+			], () => (0, e.nextTick)(Fa)), (0, e.onMounted)(() => {
+				if ("undefined" != typeof window) {
+					const e = window.localStorage.getItem("layout-theme");
+					"light" !== e && "dark" !== e || (Xt.value = e);
+					const t = window.localStorage.getItem("layout-development-framework");
+					"webcomponent" !== t && "vue" !== t || (Vt.value = t);
+				}
+				if (!bt.value) return;
+				oa = o.GridStack.renderCB, o.GridStack.renderCB = (e, t) => {
+					e && void 0 !== t?.content && (e.innerHTML = String(t.content));
+				};
+				const t = (0, c.createGridStackEditorEngine)({
+					container: bt.value,
+					gridOptions: {
+						acceptWidgets: !0,
+						animate: !1
+					},
+					createGrid: (e) => o.GridStack.init(e, bt.value),
+					renderItem: ({ item: e }) => dt(e, { interactive: !0 })
+				});
+				if (ta = (0, n.createLayoutEditor)({
+					document: ht,
+					engine: t,
+					materials: yt,
+					preview: kt.value ? {
+						container: kt.value,
+						renderItem: ({ shell: e, item: t }) => {
+							const a = () => {
+								pt(e, t);
+							};
+							return a(), { update: a };
+						}
+					} : void 0
+				}), ta.on("document:change", (e) => {
+					Mt.value = e.document, p("update:document", e.document), p("change", e.document), queueMicrotask(hn), Za();
+				}), ta.on("interaction:move", bn), ta.on("interaction:resize", bn), ta.on("selection:change", (e) => {
+					Tt.value = e.primaryId, At.value = [...e.selectedIds], hn();
+				}), ta.on("mode:change", (t) => {
+					Gt.value = "preview" === t.mode, "preview" === t.mode && "runtime" !== Ht.value && (Ht.value = "runtime"), "edit" === t.mode && "runtime" === Ht.value && (Ht.value = "editor"), (0, e.nextTick)(Za);
+				}), ta.mount(), bt.value.addEventListener("pointerdown", fn, !0), bt.value.addEventListener("click", fn, !0), la.push(() => bt.value?.removeEventListener("pointerdown", fn, !0)), la.push(() => bt.value?.removeEventListener("click", fn, !0)), (0, e.nextTick)(Ra), hn(), "undefined" != typeof window) {
+					Ht.value = mt(window.location.hash);
+					const e = () => {
+						const e = mt(window.location.hash);
+						e !== Ht.value ? Ya(e) : "runtime" === e && "preview" !== ta?.getMode() ? ta.setMode("preview") : "runtime" !== e && "preview" === ta?.getMode() && ta.setMode("edit");
+					};
+					window.addEventListener("hashchange", e), la.push(() => window.removeEventListener("hashchange", e)), window.addEventListener("keydown", un), window.addEventListener("keyup", pn), window.addEventListener("keydown", mn), document.addEventListener("pointerdown", Oa), document.addEventListener("keydown", Aa), la.push(() => window.removeEventListener("keydown", un)), la.push(() => window.removeEventListener("keyup", pn)), la.push(() => window.removeEventListener("keydown", mn)), la.push(() => document.removeEventListener("pointerdown", Oa)), la.push(() => document.removeEventListener("keydown", Aa));
+				}
+				"runtime" === Ht.value && ta.setMode("preview"), Za();
+			}), (0, e.onBeforeUnmount)(() => {
+				void 0 !== ra && "undefined" != typeof window && window.cancelAnimationFrame(ra), ra = void 0, xt.forEach((e) => e()), xt.clear(), la.splice(0).forEach((e) => e()), aa?.destroy(), aa = void 0, na?.destroy(), na = void 0, ta?.destroy(), oa && (o.GridStack.renderCB = oa, oa = void 0);
+			}), (t, a) => ((0, e.openBlock)(), (0, e.createElementBlock)("main", {
+				class: "layout-demo",
+				"data-layout-workspace": "",
+				"data-theme": Xt.value,
+				"data-development-framework": Vt.value
+			}, [
+				(0, e.createElementVNode)("header", w, [
+					(0, e.createElementVNode)("div", N, [
+						(0, e.createElementVNode)("span", E, [(0, e.createVNode)((0, e.unref)(i.Grid2X2), {
+							size: 18,
+							"stroke-width": 1.8
+						})]),
+						a[20] || (a[20] = (0, e.createElementVNode)("div", { class: "brand-copy" }, [(0, e.createElementVNode)("strong", null, "布局工作台"), (0, e.createElementVNode)("span", null, "所见即所得 · 网格布局")], -1)),
+						(0, e.createElementVNode)("div", {
+							class: (0, e.normalizeClass)(["development-mode custom-select", { "is-open": Rt.value }]),
+							"data-layout-filter-menu": "",
+							onPointerdown: a[0] || (a[0] = (0, e.withModifiers)(() => {}, ["stop"]))
+						}, [(0, e.createElementVNode)("button", {
+							class: "custom-select__trigger",
+							type: "button",
+							"aria-haspopup": "listbox",
+							"aria-expanded": Rt.value,
+							"aria-label": "开发框架",
+							title: `当前开发框架：${$t.value}`,
+							onClick: (0, e.withModifiers)(Ma, ["stop"])
+						}, [
+							((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(ot.find((e) => e.id === Vt.value)?.icon ?? (0, e.unref)(i.PanelsTopLeft)), {
+								size: 14,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})),
+							(0, e.createElementVNode)("span", null, (0, e.toDisplayString)($t.value), 1),
+							(0, e.createVNode)((0, e.unref)(i.ChevronDown), {
+								size: 12,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})
+						], 8, _), Rt.value ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", V, [((0, e.openBlock)(), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(ot, (t) => (0, e.createElementVNode)("button", {
+							key: t.id,
+							class: "custom-select__option",
+							type: "button",
+							"aria-selected": Vt.value === t.id,
+							onClick: (a) => function(t) {
+								Vt.value = t, "undefined" != typeof window && window.localStorage.setItem("layout-development-framework", t), Ta(), (0, e.nextTick)(() => {
+									Za(), Fa(), Gt.value && ta && (ta.setMode("edit"), (0, e.nextTick)(() => ta?.setMode("preview")));
+								});
+							}(t.id)
+						}, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(t.icon), {
+							size: 14,
+							"stroke-width": 1.8,
+							"aria-hidden": "true"
+						})), (0, e.createElementVNode)("span", null, [(0, e.createElementVNode)("strong", null, (0, e.toDisplayString)(t.label), 1), (0, e.createElementVNode)("small", null, (0, e.toDisplayString)(t.description), 1)])], 8, C)), 64))])) : (0, e.createCommentVNode)("v-if", !0)], 34)
+					]),
+					(0, e.createElementVNode)("div", x, [(0, e.createElementVNode)("nav", L, [((0, e.openBlock)(), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(m, (t) => (0, e.createElementVNode)("button", {
+						key: t.id,
+						type: "button",
+						"aria-current": Ht.value === t.id ? "page" : void 0,
+						"aria-label": `${t.label}模式`,
+						title: t.description,
+						onClick: (e) => Ya(t.id)
+					}, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(h[t.id]), {
+						class: "route-icon",
+						size: 15,
+						"stroke-width": 1.8,
+						"aria-hidden": "true"
+					})), (0, e.createElementVNode)("span", null, (0, e.toDisplayString)(t.label), 1)], 8, S)), 64))]), (0, e.createElementVNode)("div", $, [((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(Mt.value.breakpoints, (t) => ((0, e.openBlock)(), (0, e.createElementBlock)("button", {
+						key: t.id,
+						class: "breakpoint-tab",
+						type: "button",
+						"aria-pressed": Ot.value === t.id,
+						"aria-label": `切换到${st(t.id)}画布`,
+						title: `${st(t.id)}画布`,
+						onClick: (e) => Qa(t.id)
+					}, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(y[t.id] ?? (0, e.unref)(i.Monitor)), {
+						size: 14,
+						"stroke-width": 1.8,
+						"aria-hidden": "true"
+					})), (0, e.createElementVNode)("span", null, (0, e.toDisplayString)(st(t.id)), 1)], 8, B))), 128)), (0, e.createCommentVNode)("v-if", !0)])]),
+					(0, e.createElementVNode)("div", D, [
+						(0, e.createElementVNode)("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": "撤销",
+							title: "撤销",
+							disabled: !(0, e.unref)(ta)?.canUndo(),
+							onClick: Wa
+						}, [(0, e.createVNode)((0, e.unref)(i.Undo2), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 8, z),
+						(0, e.createElementVNode)("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": "重做",
+							title: "重做",
+							disabled: !(0, e.unref)(ta)?.canRedo(),
+							onClick: Ua
+						}, [(0, e.createVNode)((0, e.unref)(i.Redo2), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 8, M),
+						(0, e.createElementVNode)("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": "删除选中组件",
+							title: "删除选中组件",
+							disabled: !Tt.value,
+							onClick: qa
+						}, [(0, e.createVNode)((0, e.unref)(i.Trash2), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 8, T),
+						(0, e.createElementVNode)("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": xa.value ? "解锁选中组件" : "锁定选中组件",
+							title: xa.value ? "解锁选中组件" : "锁定选中组件",
+							disabled: !Tt.value,
+							onClick: Ga
+						}, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(xa.value ? (0, e.unref)(i.Unlock) : (0, e.unref)(i.Lock)), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						}))], 8, A),
+						(0, e.createElementVNode)("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": La.value ? "禁止移动" : "允许移动",
+							title: La.value ? "禁止移动" : "允许移动",
+							disabled: !Tt.value || xa.value,
+							onClick: a[1] || (a[1] = (e) => Ka("movable"))
+						}, [(0, e.createVNode)((0, e.unref)(i.Move), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 8, O),
+						(0, e.createElementVNode)("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": Sa.value ? "禁止调整大小" : "允许调整大小",
+							title: Sa.value ? "禁止调整大小" : "允许调整大小",
+							disabled: !Tt.value || xa.value,
+							onClick: a[2] || (a[2] = (e) => Ka("resizable"))
+						}, [(0, e.createVNode)((0, e.unref)(i.Maximize2), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 8, I),
+						(0, e.createElementVNode)("button", {
+							class: "icon-button theme-button",
+							type: "button",
+							"aria-label": "dark" === Xt.value ? "切换到亮色主题" : "切换到暗色主题",
+							title: "dark" === Xt.value ? "切换到亮色主题" : "切换到暗色主题",
+							onClick: rn
+						}, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)("dark" === Xt.value ? (0, e.unref)(i.Sun) : (0, e.unref)(i.Moon)), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						}))], 8, j),
+						(0, e.createElementVNode)("button", {
+							class: "preview-open-button",
+							type: "button",
+							"aria-label": "打开实时预览",
+							title: "打开实时预览",
+							onClick: Xa
+						}, [(0, e.createVNode)((0, e.unref)(i.Eye), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						}), a[21] || (a[21] = (0, e.createElementVNode)("span", null, "实时预览", -1))]),
+						(0, e.createElementVNode)("button", {
+							class: "mode-button",
+							type: "button",
+							"aria-pressed": Gt.value,
+							"aria-label": Gt.value ? "返回编辑模式" : "进入预览模式",
+							title: Gt.value ? "返回编辑模式" : "进入预览模式",
+							onClick: Ha
+						}, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(Gt.value ? (0, e.unref)(i.Pencil) : (0, e.unref)(i.Eye)), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})), (0, e.createElementVNode)("span", null, (0, e.toDisplayString)(Gt.value ? "编辑" : "预览"), 1)], 8, P)
+					])
+				]),
+				(0, e.createElementVNode)("section", R, [
+					(0, e.createElementVNode)("aside", q, [
+						(0, e.createElementVNode)("div", G, [a[22] || (a[22] = (0, e.createElementVNode)("div", null, [(0, e.createElementVNode)("span", { class: "eyebrow" }, "工作区"), (0, e.createElementVNode)("h2", null, "物料")], -1)), (0, e.createElementVNode)("span", K, (0, e.toDisplayString)((0, e.unref)(yt).getAll().length), 1)]),
+						(0, e.createElementVNode)("div", W, [
+							(0, e.createElementVNode)("label", U, [(0, e.createVNode)((0, e.unref)(i.Search), {
+								size: 15,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							}), (0, e.withDirectives)((0, e.createElementVNode)("input", {
+								"onUpdate:modelValue": a[3] || (a[3] = (e) => Et.value = e),
+								type: "search",
+								placeholder: "搜索物料",
+								"aria-label": "搜索物料"
+							}, null, 512), [[e.vModelText, Et.value]])]),
+							(0, e.createElementVNode)("div", {
+								class: "material-filter-row",
+								"data-layout-filter-menu": "",
+								onKeydown: (0, e.withKeys)((0, e.withModifiers)(Aa, ["stop", "prevent"]), ["esc"])
+							}, [(0, e.createElementVNode)("div", {
+								class: (0, e.normalizeClass)(["material-select custom-select", { "is-open": Pt.value }]),
+								onPointerdown: a[6] || (a[6] = (0, e.withModifiers)(() => {}, ["stop"]))
+							}, [(0, e.createElementVNode)("button", {
+								class: "custom-select__trigger",
+								type: "button",
+								"aria-haspopup": "listbox",
+								"aria-expanded": Pt.value,
+								"aria-label": "物料分类",
+								title: `物料分类：${St.value}`,
+								onClick: a[4] || (a[4] = (0, e.withModifiers)((e) => za("category"), ["stop"]))
+							}, [
+								(0, e.createVNode)((0, e.unref)(i.Filter), {
+									size: 13,
+									"stroke-width": 1.9,
+									"aria-hidden": "true"
+								}),
+								(0, e.createElementVNode)("span", null, (0, e.toDisplayString)(St.value), 1),
+								(0, e.createVNode)((0, e.unref)(i.ChevronDown), {
+									size: 12,
+									"stroke-width": 1.9,
+									"aria-hidden": "true"
+								})
+							], 8, X), Pt.value ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", J, [(0, e.createElementVNode)("button", {
+								class: "custom-select__option",
+								type: "button",
+								"aria-selected": !Bt.value,
+								onClick: a[5] || (a[5] = (e) => Ia(""))
+							}, " 全部分类 ", 8, F), ((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(Lt.value, (t) => ((0, e.openBlock)(), (0, e.createElementBlock)("button", {
+								key: t.id,
+								class: "custom-select__option",
+								type: "button",
+								"aria-selected": Bt.value === t.id,
+								onClick: (e) => Ia(t.id)
+							}, (0, e.toDisplayString)(t.label), 9, Z))), 128))])) : (0, e.createCommentVNode)("v-if", !0)], 34), Dt.value ? ((0, e.openBlock)(), (0, e.createElementBlock)("button", {
+								key: 0,
+								class: "material-filter-reset",
+								type: "button",
+								"aria-label": "清除物料筛选",
+								title: "清除筛选",
+								onClick: ja
+							}, [(0, e.createVNode)((0, e.unref)(i.X), {
+								size: 13,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})])) : (0, e.createCommentVNode)("v-if", !0)], 40, H),
+							(0, e.createElementVNode)("div", Y, [(0, e.createElementVNode)("span", null, (0, e.toDisplayString)(zt.value.length) + " / " + (0, e.toDisplayString)((0, e.unref)(yt).getAll().length) + " 个物料", 1), Dt.value ? ((0, e.openBlock)(), (0, e.createElementBlock)("span", Q, "已筛选")) : (0, e.createCommentVNode)("v-if", !0)])
+						]),
+						zt.value.length ? (0, e.createCommentVNode)("v-if", !0) : ((0, e.openBlock)(), (0, e.createElementBlock)("div", ee, [
+							(0, e.createVNode)((0, e.unref)(i.Search), {
+								size: 17,
+								"stroke-width": 1.7,
+								"aria-hidden": "true"
+							}),
+							a[23] || (a[23] = (0, e.createElementVNode)("strong", null, "没有匹配的物料", -1)),
+							a[24] || (a[24] = (0, e.createElementVNode)("span", null, "试试更换关键词或分类", -1)),
+							Dt.value ? ((0, e.openBlock)(), (0, e.createElementBlock)("button", {
+								key: 0,
+								type: "button",
+								onClick: ja
+							}, " 清除筛选 ")) : (0, e.createCommentVNode)("v-if", !0)
+						])),
+						((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(zt.value, (t) => {
+							return (0, e.openBlock)(), (0, e.createElementBlock)("div", {
+								key: t.type,
+								ref_for: !0,
+								ref: (e) => {
+									a = t.type, (n = e) instanceof HTMLElement ? Ct.set(a, n) : Ct.delete(a);
+									return;
+									var a, n;
+								},
+								class: "material-source grid-stack-item",
+								role: "button",
+								tabindex: "0",
+								"data-material-type": t.type,
+								"data-layout-material": t.type,
+								"data-layout-props": (n = t.type, JSON.stringify(yt.get(n)?.defaults ?? {})),
+								"aria-label": `添加${t.title ?? t.label ?? t.type}`,
+								onClick: (e) => function(e) {
+									$a(e);
+								}(t.type),
+								onKeydown: [(0, e.withKeys)((e) => $a(t.type), ["enter"]), (0, e.withKeys)((0, e.withModifiers)((e) => $a(t.type), ["prevent"]), ["space"])]
+							}, [
+								(0, e.createElementVNode)("span", ae, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(Pa(t.type)), {
+									size: 18,
+									"stroke-width": 1.8
+								}))]),
+								(0, e.createElementVNode)("span", ne, [(0, e.createElementVNode)("strong", null, (0, e.toDisplayString)(t.title ?? t.label ?? t.type), 1), (0, e.createElementVNode)("small", null, (0, e.toDisplayString)(t.description ?? t.categoryLabel ?? "布局组件"), 1)]),
+								(0, e.createElementVNode)("span", oe, [(0, e.createElementVNode)("span", re, (0, e.toDisplayString)(t.defaultLayout?.w ?? t.size?.default.w ?? 1) + " × " + (0, e.toDisplayString)(t.defaultLayout?.h ?? t.size?.default.h ?? 1), 1), (0, e.createElementVNode)("span", le, [(0, e.createElementVNode)("span", {
+									class: (0, e.normalizeClass)(["material-renderer-badge", { "material-renderer-badge--vue": "vue" === Vt.value }]),
+									title: `当前开发目标：${$t.value}`
+								}, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)("vue" === Vt.value ? (0, e.unref)(i.PanelsTopLeft) : (0, e.unref)(i.Code2)), {
+									size: 11,
+									"stroke-width": 1.8,
+									"aria-hidden": "true"
+								})), (0, e.createElementVNode)("span", null, (0, e.toDisplayString)($t.value), 1)], 10, ie)])]),
+								(0, e.createElementVNode)("span", se, [(0, e.createElementVNode)("button", {
+									class: "material-code-button",
+									type: "button",
+									"aria-label": "查看当前物料代码",
+									title: "查看当前物料代码",
+									onPointerdown: a[7] || (a[7] = (0, e.withModifiers)(() => {}, ["stop"])),
+									onClick: (0, e.withModifiers)((e) => function(e) {
+										const t = yt.get(e);
+										t && (Wt.value = t, Ut.value = !1, Ta());
+									}(t.type), ["stop"])
+								}, [(0, e.createVNode)((0, e.unref)(i.Code2), {
+									size: 14,
+									"stroke-width": 1.8,
+									"aria-hidden": "true"
+								})], 40, ce), (0, e.createElementVNode)("span", de, [(0, e.createVNode)((0, e.unref)(i.Plus), {
+									size: 16,
+									"stroke-width": 1.8
+								})])])
+							], 40, te);
+							var n;
+						}), 128)),
+						(0, e.createCommentVNode)("v-if", !0),
+						(0, e.createCommentVNode)("v-if", !0)
+					]),
+					(0, e.createElementVNode)("section", ue, [(0, e.createElementVNode)("div", pe, [
+						(0, e.createElementVNode)("div", {
+							class: (0, e.normalizeClass)(["canvas-device-control custom-select", { "is-open": jt.value }]),
+							onPointerdown: a[15] || (a[15] = (0, e.withModifiers)(() => {}, ["stop"]))
+						}, [(0, e.createElementVNode)("button", {
+							class: "custom-select__trigger",
+							type: "button",
+							"aria-haspopup": "listbox",
+							"aria-expanded": jt.value,
+							"aria-label": "设备画布",
+							onClick: a[14] || (a[14] = (0, e.withModifiers)((e) => za("device"), ["stop"]))
+						}, [
+							((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(ca.value), {
+								size: 13,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})),
+							(0, e.createElementVNode)("span", null, (0, e.toDisplayString)(st(Ot.value)), 1),
+							(0, e.createVNode)((0, e.unref)(i.ChevronDown), {
+								size: 12,
+								"stroke-width": 1.9,
+								"aria-hidden": "true"
+							})
+						], 8, me), jt.value ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", ve, [((0, e.openBlock)(!0), (0, e.createElementBlock)(e.Fragment, null, (0, e.renderList)(Mt.value.breakpoints, (t) => ((0, e.openBlock)(), (0, e.createElementBlock)("button", {
+							key: t.id,
+							class: "custom-select__option",
+							type: "button",
+							"aria-selected": Ot.value === t.id,
+							"aria-label": `${st(t.id)} / ${t.columns} 列`,
+							onClick: (e) => {
+								Qa(t.id);
+							}
+						}, [
+							((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(y[t.id] ?? (0, e.unref)(i.Monitor)), {
+								size: 13,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							})),
+							(0, e.createElementVNode)("span", null, (0, e.toDisplayString)(st(t.id)), 1),
+							(0, e.createElementVNode)("span", fe, (0, e.toDisplayString)(t.columns) + " 列", 1)
+						], 8, ye))), 128))])) : (0, e.createCommentVNode)("v-if", !0)], 34),
+						(0, e.createElementVNode)("button", {
+							class: "orientation-button",
+							type: "button",
+							"aria-label": "portrait" === It.value ? "切换为横屏" : "切换为竖屏",
+							title: "portrait" === It.value ? "切换为横屏" : "切换为竖屏",
+							onClick: en
+						}, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)("portrait" === It.value ? (0, e.unref)(i.ArrowLeftRight) : (0, e.unref)(i.ArrowUpDown)), {
+							size: 14,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						}))], 8, he),
+						a[27] || (a[27] = (0, e.createElementVNode)("span", {
+							class: "canvas-toolbar__device-divider",
+							"aria-hidden": "true"
+						}, null, -1)),
+						(0, e.createElementVNode)("div", be, [(0, e.createElementVNode)("button", {
+							class: (0, e.normalizeClass)(["canvas-tool-button", { active: "select" === Zt.value }]),
+							type: "button",
+							"aria-label": "选择组件",
+							title: "选择组件",
+							onClick: a[16] || (a[16] = (e) => Zt.value = "select")
+						}, [(0, e.createVNode)((0, e.unref)(i.MousePointer2), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 2), (0, e.createElementVNode)("button", {
+							class: (0, e.normalizeClass)(["canvas-tool-button", { active: "pan" === Zt.value }]),
+							type: "button",
+							"aria-label": "移动画布",
+							title: "移动画布（也可按住空格拖动）",
+							onClick: a[17] || (a[17] = (e) => Zt.value = "pan" === Zt.value ? "select" : "pan")
+						}, [(0, e.createVNode)((0, e.unref)(i.Hand), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})], 2)]),
+						a[28] || (a[28] = (0, e.createElementVNode)("div", {
+							class: "canvas-toolbar__divider",
+							"aria-hidden": "true"
+						}, null, -1)),
+						(0, e.createElementVNode)("button", {
+							class: "canvas-tool-button",
+							type: "button",
+							"aria-label": "缩小画布",
+							title: "缩小画布",
+							onClick: a[18] || (a[18] = (e) => an(-1))
+						}, [(0, e.createVNode)((0, e.unref)(i.ZoomOut), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})]),
+						(0, e.createElementVNode)("span", ge, (0, e.toDisplayString)(Va.value), 1),
+						(0, e.createElementVNode)("button", {
+							class: "canvas-tool-button",
+							type: "button",
+							"aria-label": "放大画布",
+							title: "放大画布",
+							onClick: a[19] || (a[19] = (e) => an(1))
+						}, [(0, e.createVNode)((0, e.unref)(i.ZoomIn), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})]),
+						(0, e.createElementVNode)("button", {
+							class: "canvas-tool-button",
+							type: "button",
+							"aria-label": "适配画布",
+							title: "适配画布",
+							onClick: nn
+						}, [(0, e.createVNode)((0, e.unref)(i.Scan), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})]),
+						(0, e.createElementVNode)("button", {
+							class: "canvas-tool-button",
+							type: "button",
+							"aria-label": "重置画布位置",
+							title: "重置画布位置",
+							onClick: on
+						}, [(0, e.createVNode)((0, e.unref)(i.RotateCcw), {
+							size: 15,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})])
+					]), (0, e.createElementVNode)("div", {
+						ref_key: "canvasViewport",
+						ref: gt,
+						class: (0, e.normalizeClass)(["canvas-viewport", {
+							"is-panning": Yt.value,
+							"is-pan-tool": "pan" === Zt.value
+						}]),
+						onWheel: ln,
+						onPointerdownCapture: sn,
+						onPointermove: cn,
+						onPointerup: dn,
+						onPointercancel: dn
+					}, [(0, e.createElementVNode)("div", {
+						class: (0, e.normalizeClass)(["canvas-scene", `is-${It.value}`]),
+						"data-canvas-width": sa.value.width,
+						"data-canvas-height": sa.value.height,
+						"data-canvas-orientation": It.value,
+						style: (0, e.normalizeStyle)(_a.value)
+					}, [
+						(0, e.withDirectives)((0, e.createElementVNode)("section", we, [(0, e.createElementVNode)("header", Ne, [a[30] || (a[30] = (0, e.createElementVNode)("div", null, [(0, e.createElementVNode)("span", { class: "stage-kicker" }, "编辑模式"), (0, e.createElementVNode)("h2", null, "拖拽布局")], -1)), (0, e.createElementVNode)("span", Ee, [a[29] || (a[29] = (0, e.createElementVNode)("i", { "aria-hidden": "true" }, null, -1)), (0, e.createTextVNode)((0, e.toDisplayString)(st(Ot.value)), 1)])]), (0, e.createElementVNode)("div", {
+							ref_key: "editorGrid",
+							ref: bt,
+							class: "grid-stack layout-editor-grid",
+							role: "grid",
+							"aria-label": "网格布局编辑器",
+							"aria-multiselectable": "true"
+						}, null, 512)], 512), [[e.vShow, "editor" === Ht.value && !Gt.value]]),
+						(0, e.withDirectives)((0, e.createElementVNode)("section", _e, [a[31] || (a[31] = (0, e.createElementVNode)("header", { class: "stage-header" }, [(0, e.createElementVNode)("div", null, [(0, e.createElementVNode)("span", { class: "stage-kicker" }, "预览模式"), (0, e.createElementVNode)("h2", null, "组件渲染")]), (0, e.createElementVNode)("span", { class: "stage-badge" }, [(0, e.createElementVNode)("i", { "aria-hidden": "true" }), (0, e.createTextVNode)("同步布局")])], -1)), (0, e.createVNode)((0, e.unref)(v), {
+							document: Mt.value,
+							breakpoint: Ot.value,
+							materials: (0, e.unref)(yt),
+							target: Vt.value
+						}, {
+							item: (0, e.withCtx)(({ item: t }) => [(0, e.createElementVNode)("button", {
+								class: (0, e.normalizeClass)(["widget layout-item-shell layout-item-shell--interactive", { selected: Tt.value === t.id }]),
+								type: "button",
+								"aria-label": `${lt(t)}，${it(t.type)}`,
+								onClick: (e) => {
+									a = t.id, ta?.select(a);
+									return;
+									var a;
+								}
+							}, [(0, e.createVNode)((0, e.unref)(f), (0, e.mergeProps)({
+								item: t,
+								materials: (0, e.unref)(yt),
+								target: Vt.value
+							}, t.props), null, 16, [
+								"item",
+								"materials",
+								"target"
+							])], 10, Ve)]),
+							_: 1
+						}, 8, [
+							"document",
+							"breakpoint",
+							"materials",
+							"target"
+						])], 512), [[e.vShow, "vue" === Ht.value]]),
+						(0, e.withDirectives)((0, e.createElementVNode)("section", {
+							class: "runtime-preview-stage",
+							"data-preview-framework": Vt.value,
+							"aria-label": "运行时预览画布"
+						}, [
+							(0, e.createElementVNode)("header", xe, [a[33] || (a[33] = (0, e.createElementVNode)("div", null, [(0, e.createElementVNode)("span", { class: "stage-kicker" }, "预览模式"), (0, e.createElementVNode)("h2", null, "运行时预览")], -1)), (0, e.createElementVNode)("span", Le, [a[32] || (a[32] = (0, e.createElementVNode)("i", { "aria-hidden": "true" }, null, -1)), (0, e.createTextVNode)((0, e.toDisplayString)($t.value) + " · 只读", 1)])]),
+							"vue" === Vt.value ? ((0, e.openBlock)(), (0, e.createBlock)((0, e.unref)(v), {
+								key: 0,
+								document: Mt.value,
+								breakpoint: Ot.value,
+								materials: (0, e.unref)(yt),
+								target: Vt.value
+							}, {
+								item: (0, e.withCtx)(({ item: t }) => [(0, e.createVNode)((0, e.unref)(f), (0, e.mergeProps)({
+									item: t,
+									materials: (0, e.unref)(yt),
+									target: Vt.value,
+									class: "preview-dialog__card"
+								}, t.props), null, 16, [
+									"item",
+									"materials",
+									"target"
+								])]),
+								_: 1
+							}, 8, [
+								"document",
+								"breakpoint",
+								"materials",
+								"target"
+							])) : (0, e.createCommentVNode)("v-if", !0),
+							(0, e.withDirectives)((0, e.createElementVNode)("div", {
+								ref_key: "runtimePreview",
+								ref: kt,
+								class: "runtime-preview-grid",
+								"data-preview-renderer": "webcomponent"
+							}, null, 512), [[e.vShow, "webcomponent" === Vt.value]])
+						], 8, Ce), [[e.vShow, "runtime" === Ht.value && Gt.value]]),
+						(0, e.withDirectives)((0, e.createElementVNode)("section", {
+							class: "vanilla-runtime-stage",
+							"data-preview-framework": Vt.value,
+							"aria-label": "原生运行时画布"
+						}, [
+							(0, e.createElementVNode)("header", $e, [a[35] || (a[35] = (0, e.createElementVNode)("div", null, [(0, e.createElementVNode)("span", { class: "stage-kicker" }, "预览模式"), (0, e.createElementVNode)("h2", null, "原生运行时")], -1)), (0, e.createElementVNode)("span", Be, [a[34] || (a[34] = (0, e.createElementVNode)("i", { "aria-hidden": "true" }, null, -1)), (0, e.createTextVNode)((0, e.toDisplayString)($t.value) + " · 只读", 1)])]),
+							"vue" === Vt.value ? ((0, e.openBlock)(), (0, e.createBlock)((0, e.unref)(v), {
+								key: 0,
+								document: Mt.value,
+								breakpoint: Ot.value,
+								materials: (0, e.unref)(yt),
+								target: Vt.value
+							}, {
+								item: (0, e.withCtx)(({ item: t }) => [(0, e.createVNode)((0, e.unref)(f), (0, e.mergeProps)({
+									item: t,
+									materials: (0, e.unref)(yt),
+									target: Vt.value,
+									class: "preview-dialog__card"
+								}, t.props), null, 16, [
+									"item",
+									"materials",
+									"target"
+								])]),
+								_: 1
+							}, 8, [
+								"document",
+								"breakpoint",
+								"materials",
+								"target"
+							])) : (0, e.createCommentVNode)("v-if", !0),
+							(0, e.withDirectives)((0, e.createElementVNode)("div", {
+								ref_key: "vanillaRuntime",
+								ref: wt,
+								class: "runtime-preview-grid",
+								"data-preview-renderer": "webcomponent"
+							}, null, 512), [[e.vShow, "webcomponent" === Vt.value]])
+						], 8, Se), [[e.vShow, "vanilla" === Ht.value]])
+					], 14, ke)], 34)]),
+					(0, e.createElementVNode)("aside", De, [
+						(0, e.createElementVNode)("div", ze, [
+							(0, e.createElementVNode)("div", null, [a[36] || (a[36] = (0, e.createElementVNode)("span", { class: "eyebrow" }, "实时输出", -1)), (0, e.createElementVNode)("h2", null, (0, e.toDisplayString)(ya.value), 1)]),
+							(0, e.createElementVNode)("button", {
+								class: "copy-code-button",
+								type: "button",
+								"aria-label": qt.value ? "代码已复制" : "复制当前代码",
+								title: qt.value ? "代码已复制" : "复制当前代码",
+								onClick: vn
+							}, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(qt.value ? (0, e.unref)(i.CopyCheck) : (0, e.unref)(i.Copy)), {
+								size: 15,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							}))], 8, Me),
+							(0, e.createElementVNode)("button", {
+								class: "download-code-button",
+								type: "button",
+								"aria-label": "下载当前代码",
+								title: "下载当前代码",
+								onClick: yn
+							}, [(0, e.createVNode)((0, e.unref)(i.Download), {
+								size: 15,
+								"stroke-width": 1.8,
+								"aria-hidden": "true"
+							})])
+						]),
+						(0, e.createElementVNode)("pre", Te, [(0, e.createElementVNode)("code", { innerHTML: Na.value }, null, 8, Ae)]),
+						(0, e.createElementVNode)("div", Oe, [a[37] || (a[37] = (0, e.createElementVNode)("span", {
+							class: "code-status__dot",
+							"aria-hidden": "true"
+						}, null, -1)), (0, e.createElementVNode)("span", null, "已根据当前布局、" + (0, e.toDisplayString)(st(Ot.value)) + "断点实时生成 · 共 " + (0, e.toDisplayString)(Ea.value) + " 行，可滚动查看完整输出", 1)])
+					])
+				]),
+				(0, e.createVNode)(e.Transition, { name: "preview-dialog" }, {
+					default: (0, e.withCtx)(() => [Kt.value ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", {
+						key: 0,
+						class: "preview-dialog",
+						"data-preview-framework": Vt.value,
+						"data-theme": Xt.value,
+						role: "dialog",
+						"aria-modal": "true",
+						"aria-labelledby": "layout-preview-title"
+					}, [(0, e.createElementVNode)("button", {
+						class: "preview-dialog__backdrop",
+						type: "button",
+						"aria-label": "关闭实时预览",
+						onClick: Ja
+					}), (0, e.createElementVNode)("section", je, [
+						(0, e.createElementVNode)("header", Pe, [a[39] || (a[39] = (0, e.createElementVNode)("div", null, [(0, e.createElementVNode)("span", { class: "stage-kicker" }, "真实渲染"), (0, e.createElementVNode)("h2", { id: "layout-preview-title" }, "实时预览")], -1)), (0, e.createElementVNode)("div", Re, [(0, e.createElementVNode)("span", qe, [a[38] || (a[38] = (0, e.createElementVNode)("i", { "aria-hidden": "true" }, null, -1)), (0, e.createTextVNode)((0, e.toDisplayString)(st(Ot.value)), 1)]), (0, e.createElementVNode)("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": "关闭实时预览",
+							title: "关闭实时预览",
+							onClick: Ja
+						}, [(0, e.createVNode)((0, e.unref)(i.X), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})])])]),
+						(0, e.createElementVNode)("div", Ge, [(0, e.createElementVNode)("div", Ke, ["vue" === Vt.value ? ((0, e.openBlock)(), (0, e.createBlock)((0, e.unref)(v), {
+							key: 0,
+							document: Mt.value,
+							breakpoint: Ot.value,
+							materials: (0, e.unref)(yt),
+							target: Vt.value
+						}, {
+							item: (0, e.withCtx)(({ item: t }) => [(0, e.createVNode)((0, e.unref)(f), (0, e.mergeProps)({
+								item: t,
+								materials: (0, e.unref)(yt),
+								target: Vt.value,
+								class: "preview-dialog__card"
+							}, t.props), null, 16, [
+								"item",
+								"materials",
+								"target"
+							])]),
+							_: 1
+						}, 8, [
+							"document",
+							"breakpoint",
+							"materials",
+							"target"
+						])) : ((0, e.openBlock)(), (0, e.createElementBlock)("div", {
+							key: 1,
+							ref_key: "previewDialogRuntime",
+							ref: Nt,
+							class: "runtime-preview-grid preview-dialog__runtime-grid",
+							"data-preview-renderer": "webcomponent"
+						}, null, 512))])]),
+						(0, e.createElementVNode)("footer", { class: "preview-dialog__footer" }, [a[40] || (a[40] = (0, e.createElementVNode)("span", null, "此处展示当前布局的真实 CSS Grid 渲染结果", -1)), (0, e.createElementVNode)("button", {
+							class: "preview-dialog__close-button",
+							type: "button",
+							onClick: Ja
+						}, " 关闭预览 ")])
+					])], 8, Ie)) : (0, e.createCommentVNode)("v-if", !0)]),
+					_: 1
+				}),
+				(0, e.createVNode)(e.Transition, { name: "preview-dialog" }, {
+					default: (0, e.withCtx)(() => [Wt.value ? ((0, e.openBlock)(), (0, e.createElementBlock)("div", {
+						key: 0,
+						class: "preview-dialog material-code-dialog",
+						"data-material-code-dialog": "true",
+						"data-material-code-framework": Vt.value,
+						"data-material-code-type": Wt.value.type,
+						"data-theme": Xt.value,
+						role: "dialog",
+						"aria-modal": "true",
+						"aria-labelledby": "material-code-title"
+					}, [(0, e.createElementVNode)("button", {
+						class: "preview-dialog__backdrop",
+						type: "button",
+						"aria-label": "关闭物料代码",
+						onClick: Ba
+					}), (0, e.createElementVNode)("section", Ue, [
+						(0, e.createElementVNode)("header", He, [(0, e.createElementVNode)("div", null, [
+							a[41] || (a[41] = (0, e.createElementVNode)("span", { class: "stage-kicker" }, "注册表物料", -1)),
+							(0, e.createElementVNode)("h2", Xe, (0, e.toDisplayString)(Wt.value.title ?? Wt.value.label ?? Wt.value.type), 1),
+							(0, e.createElementVNode)("p", Je, (0, e.toDisplayString)("vue" === Vt.value ? "Vue 3 真实组件用法" : "原生 Web Component 标签用法"), 1)
+						]), (0, e.createElementVNode)("div", Fe, [(0, e.createElementVNode)("span", Ze, [a[42] || (a[42] = (0, e.createElementVNode)("i", { "aria-hidden": "true" }, null, -1)), (0, e.createTextVNode)((0, e.toDisplayString)($t.value), 1)]), (0, e.createElementVNode)("button", {
+							class: "icon-button",
+							type: "button",
+							"aria-label": "关闭物料代码",
+							title: "关闭物料代码",
+							onClick: Ba
+						}, [(0, e.createVNode)((0, e.unref)(i.X), {
+							size: 16,
+							"stroke-width": 1.9,
+							"aria-hidden": "true"
+						})])])]),
+						(0, e.createElementVNode)("div", Ye, [(0, e.createElementVNode)("pre", Qe, [(0, e.createElementVNode)("code", { innerHTML: ga.value }, null, 8, et)])]),
+						(0, e.createElementVNode)("footer", tt, [(0, e.createElementVNode)("span", null, "来自当前注册表的 " + (0, e.toDisplayString)("vue" === Vt.value ? "组件导出" : "自定义元素标签") + "，共 " + (0, e.toDisplayString)(ka.value) + " 行", 1), (0, e.createElementVNode)("div", at, [(0, e.createElementVNode)("button", {
+							class: "copy-code-button",
+							type: "button",
+							"aria-label": Ut.value ? "代码已复制" : "复制物料代码",
+							title: Ut.value ? "代码已复制" : "复制物料代码",
+							onClick: Da
+						}, [((0, e.openBlock)(), (0, e.createBlock)((0, e.resolveDynamicComponent)(Ut.value ? (0, e.unref)(i.CopyCheck) : (0, e.unref)(i.Copy)), {
+							size: 15,
+							"stroke-width": 1.8,
+							"aria-hidden": "true"
+						}))], 8, nt), (0, e.createElementVNode)("button", {
+							class: "preview-dialog__close-button",
+							type: "button",
+							onClick: Ba
+						}, " 关闭 ")])])
+					])], 8, We)) : (0, e.createCommentVNode)("v-if", !0)]),
+					_: 1
+				})
+			], 8, k));
+		}
+	});
+	ot.__file = "src/components/LLayoutWorkspace.vue";
+	var rt = ot;
+	const lt = (0, e.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: !0
+			}
+		},
+		setup(t, { slots: a }) {
+			let n, o = () => {};
+			const r = t.material, l = r?.type ?? t.type;
+			if (!l) throw new Error("LMaterialDragSource requires type or material.");
+			const i = {
+				...r?.defaults ?? {},
+				...t.props
+			}, s = () => ({
+				type: l,
+				props: i,
+				placement: {
+					x: t.placement?.x ?? 0,
+					y: t.placement?.y ?? 0,
+					w: t.placement?.w ?? r?.defaultLayout?.w ?? r?.size?.default.w ?? 1,
+					h: t.placement?.h ?? r?.defaultLayout?.h ?? r?.size?.default.h ?? 1
+				}
+			}), c = (e) => {
+				t.editor.beginExternalDrag({
+					...s(),
+					element: e.currentTarget,
+					dataTransfer: e.dataTransfer ?? void 0
+				});
+			}, d = () => t.editor.endExternalDrag();
+			return (0, e.onMounted)(() => {
+				n && (o = t.editor.registerExternalDragSource({
+					...s(),
+					element: n
+				})), "undefined" != typeof document && document.addEventListener("dragend", d);
+			}), (0, e.onBeforeUnmount)(() => {
+				o(), "undefined" != typeof document && document.removeEventListener("dragend", d);
+			}), () => (0, e.h)("div", {
+				ref: (e) => {
+					n = e;
+				},
+				class: "ldesign-layout-material-drag-source grid-stack-item",
+				"data-material-type": l,
+				"data-material-category": r?.category,
+				"data-material-title": r?.title ?? r?.label,
+				"aria-label": `添加${r?.title ?? r?.label ?? l}`,
+				onDragstart: c
+			}, a.default?.() ?? r?.title ?? r?.label ?? l);
+		}
+	});
+	exports.LGrid = v, exports.LGridItem = y, exports.LLayoutEditor = h, exports.LLayoutWorkspace = rt, exports.LMaterialDragSource = lt, exports.LMaterialRenderer = f, exports.LMetricCard = b, exports.LTrendCard = g, exports.useLayoutEditor = function(t) {
+		const a = (0, e.shallowRef)((0, n.createLayoutEditor)(t));
+		return (0, e.onMounted)(() => a.value.mount()), (0, e.onBeforeUnmount)(() => a.value.destroy()), a;
+	};
+});
+/*! End of @composy/layout-vue | Powered by @composy/builder */
+//# sourceMappingURL=index.min.js.map