@volter/game-editor 0.5.143 → 0.5.145

package/dist/assets/{react-inspector.service--CnSg1fP.js → react-inspector.service-CStUUFdZ.js}

@@ -1 +1 @@
-import{a as n}from"./jsx-runtime-DPjLkJKQ.js";import{eM as ye,eN as ne,eO as xe,eP as be,eQ as je,eR as Se,dR as ve,eS as Ce,eT as Re,eU as ke,eV as we,aG as Ee,e4 as m,er as u,et as j,a6 as k,eW as O,eX as $e,eY as H,bH as V,U as B,ex as Te,aN as Y,eZ as se,e_ as Ie,e$ as Ne,aS as Me,ax as ie,f0 as Oe,f1 as Ae}from"./index-C3IEVwzA.js";import{r as v}from"./index-nmcBqr7Y.js";import"./index-CtzuWnCS.js";import{p as re,G as ae,c as M,B as Be,A as Fe,S as A,a as _e,b as De,F as Le,d as X,e as ze,f as Pe,T as We,g as J,h as Ge,i as He,j as Ue}from"./ShadowEditor-B7CJc6XL.js";import{C as Ve}from"./ColorPicker-DPs8654V.js";import{s as oe,a as U,b as Ke}from"./board-guides-5y4zeqX7.js";import{b as Ye}from"./eyedropper-session-bjPXnfeX.js";import{k as Xe,l as Je}from"./inspect-B9obej0m.js";import{D as Qe}from"./dom-authoring-adapter-uYyXOnRm.js";import{R as D,c as Ze}from"./react-world-authoring-adapter-Dh-F6SHg.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./index-FUuS4qwW.js";import"./client-DNXj_opT.js";import"./index-D_NuPfjr.js";import"./index-CinJrH5C.js";import"./inference-diagnostics-NkV5meYv.js";import"./json-history-resource-BZ-2HcB1.js";import"./relative-import-specifier-a5wd_Gs0.js";import"./story-arg-descriptors-Ek86ExX7.js";import"./writer-tw6EcuVO.js";function le(e,t){if(!e)return null;const s=(()=>{if(!(t instanceof Ee))return t;const i=t.ownerOf(e.id);return i===null?null:t.childAdapters().find(a=>a.worldId===i)?.adapter??null})();return s instanceof D||s instanceof Qe?s:null}const qe=(e,t)=>le(e,t)!==null,et="element",tt=1500,nt="story",st=1600;function T(e){const t=e.indexOf(".");return t===-1?e:e.slice(t+1)}function it(e){const t=T(e.path);return e.type==="color"?"color":/^fontFamily$/i.test(t)?"font":t==="background"||t==="backgroundImage"?"gradient":t==="boxShadow"?"shadow":t==="textShadow"?"text-shadow":t==="filter"?"filter":t==="backdropFilter"?"backdrop-filter":t==="borderRadius"?"radius":e.type==="string"&&t==="transform"?"transform":e.type==="boolean"?"checkbox":e.type==="enum"?"select":e.type==="json"?"json":e.type==="number"?"scrub":"text"}function rt(e,t,s,i){if(!(e.path==="style.borderWidth"||e.path==="style.borderStyle"||e.path==="style.borderColor"))return!1;const o=t.get("style.borderWidth"),c=t.get("style.borderStyle"),r=t.get("style.borderColor");return!o||!c||!r?!1:(i.push({kind:"border",width:o,style:c,color:r}),s.add(o.path),s.add(c.path),s.add(r.path),!0)}function at(e,t,s,i){if(!(e.path==="style.justifyContent"||e.path==="style.alignItems"))return!1;const o=t.get("style.justifyContent"),c=t.get("style.alignItems");return!o||!c?!1:(i.push({kind:"align",justify:o,align:c}),s.add(o.path),s.add(c.path),!0)}function ce(e){const t=new Map(e.map(a=>[a.path,a])),s=new Set,i=[];for(const a of e)s.has(a.path)||rt(a,t,s,i)||at(a,t,s,i)||i.push({kind:"single",prop:a});return i}function L(e){return typeof e=="number"&&Number.isFinite(e)?e:0}function F(e){return`react-prop-${e.replace(/\./g,"-")}`}const de={type:"linear",angle:180,stops:[{color:"#ffffff",position:0},{color:"#000000",position:1}]};function w({label:e,testId:t,children:s}){return n.jsxs("div",{"data-testid":t?`${t}-row`:void 0,style:{...Oe,padding:`${u[2]} ${u[4]}`},children:[n.jsx("span",{style:{width:Ae,flexShrink:0,fontSize:j.base,color:m.textMuted},children:e}),n.jsx("div",{style:{flex:1,minWidth:0},children:s})]})}function ot({prop:e,raw:t,disabled:s,testId:i,commit:a}){return n.jsx(w,{label:e.label,testId:i,children:n.jsx(Ve,{testId:i,value:String(t??"#ffffff"),disabled:s,onChange:o=>a(e.path,o),onChangeEnd:o=>a(e.path,o),eyedropperFallback:()=>Je([String(t??"")]),onEyedropperPick:o=>Ye(o)})})}function lt({prop:e,raw:t,disabled:s,fonts:i,testId:a,commit:o}){return n.jsx(w,{label:e.label,testId:a,children:n.jsx(Ge,{testId:a,value:String(t??""),fonts:i,disabled:s,onChange:c=>o(e.path,c)})})}function ct({prop:e,raw:t,disabled:s,testId:i,commit:a}){const o=re(String(t??"none"));return o?n.jsx(w,{label:e.label,testId:i,children:n.jsx(ae,{testId:i,value:o,disabled:s,onChange:c=>a(e.path,M(c)),onChangeEnd:c=>a(e.path,M(c))})}):n.jsx(w,{label:e.label,testId:i,children:n.jsx(k,{type:"button",variant:"secondary",className:"volter-field-trigger","data-testid":i,disabled:s,onClick:()=>a(e.path,M(de)),children:"No gradient — click to add"})})}function Q({prop:e,raw:t,disabled:s,testId:i,commit:a,withSpreadInset:o}){const c=ze(String(t??"none"),o),r=o?Pe:We;return n.jsx(w,{label:e.label,testId:i,children:n.jsx(r,{value:c,disabled:s,onChange:l=>a(e.path,J(l,o)),onChangeEnd:l=>a(e.path,J(l,o))})})}function Z({prop:e,raw:t,disabled:s,testId:i,commit:a,label:o}){const c=De(String(t??"none"));return n.jsx(w,{label:e.label,testId:i,children:n.jsx(Le,{testId:i,label:o,value:c,disabled:s,onChange:r=>a(e.path,X(r)),onChangeEnd:r=>a(e.path,X(r))})})}const G=[{key:"topLeft",suffix:"TopLeft"},{key:"topRight",suffix:"TopRight"},{key:"bottomLeft",suffix:"BottomLeft"},{key:"bottomRight",suffix:"BottomRight"}];function dt({adapter:e,id:t,prop:s,raw:i,disabled:a,testId:o,commit:c,removeStyle:r}){const l=L(i),d=G.reduce((g,{key:f,suffix:S})=>{const x=e.inspector?.get(t,`style.border${S}Radius`);return g[f]=ie(x)??l,g},{}),y=g=>{if(Ue(g)){c(s.path,g.topLeft);for(const{suffix:f}of G)r(`style.border${f}Radius`);return}for(const{key:f,suffix:S}of G)c(`style.border${S}Radius`,g[f])};return n.jsx(w,{label:s.label,testId:o,children:n.jsx(_e,{value:d,disabled:a,onChange:y,onChangeEnd:y})})}function ut({prop:e,raw:t,disabled:s,testId:i,commit:a}){const o=se.has(T(e.path))?"":"px";return n.jsx(A,{testId:i,label:e.label,value:L(t),unit:o,disabled:s,onChange:c=>a(e.path,c),onChangeEnd:c=>a(e.path,c),style:{padding:`${u[2]} ${u[4]}`}})}function pt({prop:e,raw:t,disabled:s,testId:i,commit:a}){return n.jsx(w,{label:e.label,testId:i,children:n.jsx(V,{"data-testid":i,value:String(t??""),disabled:s,"data-dynamic":s||void 0,onChange:o=>a(e.path,o.target.value),style:{width:"100%"},children:(e.options??[]).map(o=>n.jsx("option",{value:String(o),children:String(o)},String(o)))})})}function gt({prop:e,raw:t,disabled:s,testId:i,commit:a}){return n.jsxs("label",{style:{display:"flex",gap:u[3],alignItems:"center",padding:`${u[3]} ${u[4]}`,fontSize:j.md},children:[n.jsx(Me,{className:"volter-checkbox","data-testid":i,checked:t!==!1,disabled:s,onChange:o=>a(e.path,o.target.checked)}),e.label]})}function ht({prop:e,raw:t,disabled:s,testId:i,commit:a}){return n.jsx(w,{label:e.label,testId:i,children:n.jsx(Ne,{"data-testid":i,defaultValue:JSON.stringify(t??null),disabled:s,"data-dynamic":s||void 0,"data-variant":"code",style:{width:"100%",minHeight:40},onBlur:o=>{try{a(e.path,JSON.parse(o.target.value))}catch{}}})})}function ue({prop:e,raw:t,disabled:s,testId:i,commit:a}){return n.jsx(w,{label:e.label,testId:i,children:n.jsx(Ie,{type:"text","data-testid":i,readOnly:s,"data-dynamic":s||void 0,value:String(t??""),onCommit:o=>a(e.path,o),style:{width:"100%"}})})}const ft=/^rotate\(\s*(-?[\d.]+)deg\s*\)\s*scale\(\s*(-?[\d.]+)\s*\)$/i,mt=/^scale\(\s*(-?[\d.]+)\s*\)\s*rotate\(\s*(-?[\d.]+)deg\s*\)$/i,yt=/^rotate\(\s*(-?[\d.]+)deg\s*\)$/i,xt=/^scale\(\s*(-?[\d.]+)\s*\)$/i,bt=/^matrix\(\s*(-?[\d.eE+-]+)\s*,\s*(-?[\d.eE+-]+)\s*,\s*(-?[\d.eE+-]+)\s*,\s*(-?[\d.eE+-]+)\s*,\s*(-?[\d.eE+-]+)\s*,\s*(-?[\d.eE+-]+)\s*\)$/,_=1e-4;function jt(e){const t=e.trim();if(t===""||t==="none")return{rotateDeg:0,scale:1};const s=ft.exec(t);if(s)return{rotateDeg:Number(s[1]),scale:Number(s[2])};const i=mt.exec(t);if(i)return{rotateDeg:Number(i[2]),scale:Number(i[1])};const a=yt.exec(t);if(a)return{rotateDeg:Number(a[1]),scale:1};const o=xt.exec(t);if(o)return{rotateDeg:0,scale:Number(o[1])};const c=bt.exec(t);if(!c)return null;const[r,l,d,y,g,f]=c.slice(1,7).map(Number);if(Math.abs(g)>_||Math.abs(f)>_||Math.abs(d+l)>_||Math.abs(y-r)>_)return null;const S=Math.hypot(r,l);if(S<_)return null;const x=Math.atan2(l,r)*180/Math.PI;return{rotateDeg:Math.round(x*100)/100,scale:Math.round(S*1e3)/1e3}}function St(e){return`rotate(${e.rotateDeg}deg) scale(${e.scale})`}function vt(e){const{prop:t,raw:s,disabled:i,testId:a,commit:o}=e,c=jt(String(s??"none"));if(!c)return n.jsx(ue,{...e});const r=l=>o(t.path,St(l));return n.jsx(w,{label:t.label,testId:a,children:n.jsxs("div",{style:{display:"flex",gap:u[3]},children:[n.jsx(A,{testId:`${a}-rotate`,label:"Rotate",value:c.rotateDeg,unit:"deg",disabled:i,onChange:l=>r({...c,rotateDeg:l}),onChangeEnd:l=>r({...c,rotateDeg:l}),style:{flex:1}}),n.jsx(A,{testId:`${a}-scale`,label:"Scale",value:c.scale,unit:"x",step:.1,disabled:i,onChange:l=>r({...c,scale:l}),onChangeEnd:l=>r({...c,scale:l}),style:{flex:1}})]})})}function $({adapter:e,id:t,prop:s,fonts:i}){const a=B(),o=(l,d)=>{e.inspector?.set(t,l,d),a.notifyIngestEdit()},c=l=>{e.inspector?.remove?.(t,l),a.notifyIngestEdit()},r={prop:s,raw:e.inspector?.get(t,s.path),disabled:s.readonly,testId:F(s.path),commit:o,fonts:i};switch(it(s)){case"color":return n.jsx(ot,{...r});case"font":return n.jsx(lt,{...r});case"gradient":return n.jsx(ct,{...r});case"shadow":return n.jsx(Q,{...r,withSpreadInset:!0});case"text-shadow":return n.jsx(Q,{...r,withSpreadInset:!1});case"filter":return n.jsx(Z,{...r,label:"Filter"});case"backdrop-filter":return n.jsx(Z,{...r,label:"Backdrop Filter"});case"radius":return n.jsx(dt,{...r,adapter:e,id:t,removeStyle:c});case"transform":return n.jsx(vt,{...r});case"scrub":return n.jsx(ut,{...r});case"select":return n.jsx(pt,{...r});case"checkbox":return n.jsx(gt,{...r});case"json":return n.jsx(ht,{...r});default:return n.jsx(ue,{...r})}}function pe({adapter:e,id:t,row:s}){const i=B(),a=(r,l)=>{e.inspector?.set(t,r,l),i.notifyIngestEdit()},o=r=>{e.inspector?.remove?.(t,r),i.notifyIngestEdit()};if(s.kind==="border"){const r={width:L(e.inspector?.get(t,s.width.path)),style:String(e.inspector?.get(t,s.style.path)??"solid"),color:String(e.inspector?.get(t,s.color.path)??"#000000")},l=f=>{const S=ie(e.inspector?.get(t,`style.border${f}Width`)),x=e.inspector?.get(t,`style.border${f}Style`),C=e.inspector?.get(t,`style.border${f}Color`),p=typeof C=="string"?Ze(C):void 0;return{width:S??r.width,style:typeof x=="string"&&x?x:r.style,color:p??r.color}},d={top:l("Top"),right:l("Right"),bottom:l("Bottom"),left:l("Left")},y=["Top","Right","Bottom","Left"],g=f=>{if(He(f)){a(s.width.path,f.top.width),a(s.style.path,f.top.style),a(s.color.path,f.top.color);for(const x of y)o(`style.border${x}Width`),o(`style.border${x}Style`),o(`style.border${x}Color`);return}const S=y.map(x=>({suffix:x,side:f[x.toLowerCase()]}));for(const{suffix:x,side:C}of S)a(`style.border${x}Width`,C.width),a(`style.border${x}Style`,C.style),a(`style.border${x}Color`,C.color)};return n.jsx(w,{label:"Border",testId:"react-prop-border",children:n.jsx(Be,{value:d,onChange:g,onChangeEnd:g})})}const c={justify:e.inspector?.get(t,s.justify.path)??"flex-start",align:e.inspector?.get(t,s.align.path)??"flex-start"};return n.jsx(w,{label:"Align",testId:"react-prop-align",children:n.jsx(Fe,{value:c,onChange:r=>{a(s.justify.path,r.justify),a(s.align.path,r.align)}})})}function z(e){return e.kind==="single"?e.prop.path:e.kind==="border"?`border:${e.width.path}`:`align:${e.justify.path}`}function E(e,t,s,i,a){if(!s)return null;const o=se.has(T(s.path))?"":"px",c=F(s.path);return n.jsx(A,{testId:c,label:i,value:L(e.inspector?.get(t,s.path)),unit:o,disabled:s.readonly,onChange:r=>a(s.path,r),onChangeEnd:r=>a(s.path,r),style:{flex:1,minWidth:0}},s.path)}function Ct({adapter:e,id:t,props:s,fonts:i,showConstraints:a,onToggleConstraints:o}){const c=B(),r=new Map(s.map(p=>[T(p.path),p])),l=(p,P)=>{e.inspector?.set(t,p,P),c.notifyIngestEdit()},d=String(e.inspector?.get(t,r.get("display")?.path??"style.display")??""),y=d==="flex"||d==="inline-flex",g=d==="grid"||d==="inline-grid",f=r.get("display"),S=r.get("gap"),x=ce(s.filter(p=>["justifyContent","alignItems"].includes(T(p.path)))),C=["flexDirection","flexWrap","overflow"].map(p=>r.get(p)).filter(p=>!!p);return n.jsxs("div",{style:{padding:"2px 8px 7px"},children:[n.jsxs("div",{style:{display:"flex",gap:u[3]},children:[E(e,t,r.get("width"),"W",l),E(e,t,r.get("height"),"H",l)]}),a&&n.jsxs("div",{"data-testid":"react-layout-constraints",style:{marginTop:5},children:[n.jsxs("div",{style:{display:"flex",gap:u[3]},children:[E(e,t,r.get("minWidth"),"Min W",l),E(e,t,r.get("minHeight"),"Min H",l)]}),n.jsxs("div",{style:{display:"flex",gap:u[3],marginTop:u[2]},children:[E(e,t,r.get("maxWidth"),"Max W",l),E(e,t,r.get("maxHeight"),"Max H",l)]})]}),n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-layout-toggle-constraints",onClick:o,style:{display:"flex",margin:"2px auto 5px"},children:a?"− constraints":"··· constraints"}),n.jsxs("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1.35fr) minmax(0, 1fr)",gap:u[3]},children:[f&&n.jsx(V,{"data-testid":F(f.path),value:d,disabled:f.readonly,"data-dynamic":f.readonly||void 0,onChange:p=>l(f.path,p.target.value),style:{width:"100%"},children:(f.options??[]).map(p=>n.jsx("option",{value:String(p),children:String(p)},String(p)))}),E(e,t,S,"Gap",l)]}),y&&n.jsxs("div",{"data-testid":"react-layout-flex-controls",style:{marginTop:5},children:[C.filter(p=>T(p.path)!=="overflow").map(p=>n.jsx($,{adapter:e,id:t,prop:p,fonts:i},p.path)),x.map(p=>p.kind==="single"?n.jsx($,{adapter:e,id:t,prop:p.prop,fonts:i},z(p)):n.jsx(pe,{adapter:e,id:t,row:p},z(p)))]}),g&&n.jsxs("div",{"data-testid":"react-layout-grid-controls",style:{marginTop:5},children:[n.jsxs("div",{style:{display:"flex",gap:u[3]},children:[q(e,t,r.get("gridTemplateColumns"),"Cols",l),q(e,t,r.get("gridTemplateRows"),"Rows",l)]}),[r.get("gridTemplateColumns"),r.get("gridTemplateRows")].filter(p=>!!p).map(p=>n.jsx($,{adapter:e,id:t,prop:p,fonts:i},p.path)),n.jsxs("div",{style:{display:"flex",gap:u[3],marginTop:u[1]},children:[E(e,t,r.get("rowGap"),"Row Gap",l),E(e,t,r.get("columnGap"),"Col Gap",l)]}),r.get("gridAutoFlow")&&n.jsx($,{adapter:e,id:t,prop:r.get("gridAutoFlow"),fonts:i})]}),C.filter(p=>T(p.path)==="overflow").map(p=>n.jsx($,{adapter:e,id:t,prop:p,fonts:i},p.path)),n.jsx(Rt,{adapter:e,id:t,byName:r,fonts:i})]})}function ge(e){const t=e.trim();if(!t||t==="none")return 0;const s=[];let i=0,a=0;for(let c=0;c<t.length;c++){const r=t[c];r==="("||r==="["?i++:r===")"||r==="]"?i--:r===" "&&i===0&&(c>a&&s.push(t.slice(a,c)),a=c+1)}a<t.length&&s.push(t.slice(a));let o=0;for(const c of s){const r=/^repeat\(\s*(\d+)\s*,([\s\S]*)\)$/.exec(c);o+=r?.[1]&&r[2]!==void 0?Number(r[1])*ge(r[2]):1}return o}function q(e,t,s,i,a){if(!s)return null;let o=null;const c=r=>{const d=`repeat(${Math.max(1,Math.round(r))}, 1fr)`;d!==o&&(o=d,a(s.path,d))};return n.jsx(A,{testId:`${F(s.path)}-count`,label:i,value:ge(String(e.inspector?.get(t,s.path)??"")),min:1,disabled:s.readonly,onChange:c,onChangeEnd:c,style:{flex:1,minWidth:0}},`${s.path}-count`)}function Rt({adapter:e,id:t,byName:s,fonts:i}){const[a,o]=v.useState(!1),c=["gridColumn","gridRow","justifySelf"].map(r=>s.get(r)).filter(r=>!!r);return c.length===0?null:n.jsxs(n.Fragment,{children:[n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-layout-toggle-grid-item",onClick:()=>o(r=>!r),style:{display:"flex",margin:"2px auto 0"},children:a?"− grid item":"··· grid item"}),a&&n.jsx("div",{"data-testid":"react-layout-grid-item",children:c.map(r=>n.jsx($,{adapter:e,id:t,prop:r,fonts:i},r.path))})]})}function kt(e){const t=e.trim();if(!t||t==="none")return[];const s=[];let i=0,a=0;for(let o=0;o<t.length;o++){const c=t[o];c==="("?i++:c===")"?i--:c===","&&i===0&&(s.push(t.slice(a,o).trim()),a=o+1)}return s.push(t.slice(a).trim()),s.filter(Boolean)}function ee(e){return/^url\((['"]?)([\s\S]*)\1\)$/.exec(e.trim())?.[2]??null}function wt({adapter:e,id:t,props:s,fonts:i}){const a=B(),o=new Map(s.map(h=>[T(h.path),h])),c=(h,b)=>{e.inspector?.set(t,h,b),a.notifyIngestEdit()},r=o.get("backgroundImage"),l=o.get("backgroundColor"),[d,y]=v.useState(null),[g,f]=v.useState(null),S=String(r?e.inspector?.get(t,r.path)??"":""),x=kt(S),C=h=>{if(r){if(h.length>0){c(r.path,h.join(", "));return}e.inspector?.remove?.(t,r.path),a.notifyIngestEdit()}},p=(h,b)=>C(x.map((R,I)=>I===h?b:R)),P=h=>{y(null),C(x.filter((b,R)=>R!==h))},K=(h,b)=>{const R=[...x],I=R[h+b];I===void 0||R[h]===void 0||(R[h+b]=R[h],R[h]=I,y(null),C(R))},W={background:"none",border:"none",color:m.textMuted,cursor:"pointer",fontSize:j.base,padding:`${u[2]} ${u[3]}`,lineHeight:O.tight};return n.jsxs("div",{"data-testid":"react-fill-list",style:{padding:"2px 8px 7px"},children:[x.map((h,b)=>{const R=re(h),I=ee(h),me=R?`${R.type} gradient`:I!==null?I.split("/").pop()??"image":h.slice(0,22);return n.jsxs("div",{style:{marginBottom:3},children:[n.jsxs("div",{style:{display:"flex",alignItems:"center",gap:5},children:[n.jsxs("button",{type:"button","data-testid":`react-fill-layer-${b}`,title:h,onClick:()=>y(d===b?null:b),style:{display:"flex",alignItems:"center",gap:u[3],flex:1,minWidth:0,background:"none",border:"none",cursor:"pointer",padding:`${u[1]} 0`,color:m.text,fontSize:j.base,textAlign:"left"},children:[n.jsx("span",{style:{width:16,height:16,flexShrink:0,borderRadius:Te.sm,border:`1px solid ${m.border}`,background:h,backgroundSize:"cover"}}),n.jsx("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:me})]}),b>0&&n.jsx("button",{type:"button","data-testid":`react-fill-up-${b}`,title:"Raise this fill",onClick:()=>K(b,-1),style:W,children:"↑"}),b<x.length-1&&n.jsx("button",{type:"button","data-testid":`react-fill-down-${b}`,title:"Lower this fill",onClick:()=>K(b,1),style:W,children:"↓"}),n.jsx("button",{type:"button","data-testid":`react-fill-remove-${b}`,title:"Remove this fill (CSS has no hidden-layer state — removing is Figma's eye)",onClick:()=>P(b),style:W,children:"✕"})]}),d===b&&R&&n.jsx(ae,{testId:`react-fill-gradient-${b}`,value:R,onChange:N=>p(b,M(N)),onChangeEnd:N=>p(b,M(N))}),d===b&&I!==null&&n.jsx(Y,{"data-testid":`react-fill-url-${b}`,defaultValue:I,placeholder:"image url",onBlur:N=>p(b,`url("${N.target.value.trim()}")`),onKeyDown:N=>{N.key==="Enter"&&p(b,`url("${N.currentTarget.value.trim()}")`)},style:{width:"100%",marginTop:u[1]}})]},`${b}-${h.slice(0,24)}`)}),g!==null&&n.jsx(Y,{"data-testid":"react-fill-image-draft",value:g,placeholder:"image url — Enter to add",autoFocus:!0,onChange:h=>f(h.target.value),onKeyDown:h=>{h.key==="Enter"&&g.trim()&&(C([`url("${g.trim()}")`,...x]),f(null)),h.key==="Escape"&&f(null)},style:{width:"100%",marginBottom:3}}),n.jsxs("div",{style:{display:"flex",gap:u[2]},children:[n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-fill-add-gradient",onClick:()=>{C([M(de),...x]),y(0)},children:"+ gradient"}),n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-fill-add-image",onClick:()=>f(""),children:"+ image"})]}),x.some(h=>ee(h)!==null)&&["backgroundSize","backgroundPosition","backgroundRepeat"].map(h=>o.get(h)).filter(h=>!!h).map(h=>n.jsx($,{adapter:e,id:t,prop:h,fonts:i},h.path)),l&&n.jsx($,{adapter:e,id:t,prop:l,fonts:i})]})}function Et({adapter:e,id:t,props:s,fonts:i}){const a=B(),o=new Map(s.map(g=>[T(g.path),g])),c=o.get("position"),r=String(c?e.inspector?.get(t,c.path)??"static":"static"),l=(g,f)=>{e.inspector?.set(t,g,f),a.notifyIngestEdit()},d=["top","right","bottom","left"],y=["zIndex","flexGrow","flexShrink","flexBasis","alignSelf"].map(g=>o.get(g)).filter(g=>!!g);return n.jsxs("div",{style:{padding:"2px 8px 7px"},children:[c&&n.jsx("div",{"data-testid":F(c.path),style:{display:"grid",gridTemplateColumns:"repeat(5, 1fr)",gap:u[1]},children:(c.options??[]).map(g=>{const f=String(g),S=f===r;return n.jsx(k,{type:"button",variant:S?"primary":"secondary",size:"compact","aria-pressed":S,title:f,disabled:c.readonly,onClick:()=>l(c.path,f),children:f.slice(0,3)},f)})}),r!=="static"&&n.jsx("div",{"data-testid":"react-position-offsets",style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:u[2],marginTop:u[3]},children:d.map(g=>E(e,t,o.get(g),g[0].toUpperCase(),l))}),y.length>0&&n.jsxs("div",{style:{borderTop:`1px solid ${m.border}`,marginTop:7,paddingTop:3},children:[n.jsx("div",{style:{color:m.textMuted,fontSize:j.xs,padding:"2px 0 1px"},children:"STACKING & FLEX ITEM"}),y.map(g=>n.jsx($,{adapter:e,id:t,prop:g,fonts:i},g.path))]})]})}function $t({adapter:e,id:t,props:s}){const i=B(),a=new Map(s.map(d=>[T(d.path),d])),o=(d,y)=>{e.inspector?.set(t,d,y),i.notifyIngestEdit()},c=d=>{const y=a.get(d);return y?n.jsx(A,{testId:F(y.path),label:"",value:L(e.inspector?.get(t,y.path)),unit:"px",disabled:y.readonly,onChange:g=>o(y.path,g),onChangeEnd:g=>o(y.path,g),style:{width:46,minWidth:0,flex:"none"}},y.path):n.jsx("span",{},d)},r=d=>n.jsx("span",{style:{position:"absolute",top:2,left:6,fontSize:8,letterSpacing:".08em",color:m.textMuted,pointerEvents:"none"},children:d}),l={display:"flex",alignItems:"center",justifyContent:"center"};return n.jsx("div",{style:{padding:`${u[1]} ${u[4]} ${u[4]}`},"data-testid":"react-spacing-box",children:n.jsxs("div",{style:{position:"relative",border:`1px solid ${m.border}`,borderRadius:4,padding:"11px 4px 3px"},children:[r("MARGIN"),n.jsx("div",{style:l,children:c("marginTop")}),n.jsxs("div",{style:{display:"flex",alignItems:"center",gap:u[1]},children:[c("marginLeft"),n.jsxs("div",{style:{position:"relative",flex:1,minWidth:0,border:`1px dashed ${m.border}`,borderRadius:4,padding:"11px 4px 3px"},children:[r("PADDING"),n.jsx("div",{style:l,children:c("paddingTop")}),n.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:u[1]},children:[c("paddingLeft"),c("paddingRight")]}),n.jsx("div",{style:l,children:c("paddingBottom")})]}),c("marginRight")]}),n.jsx("div",{style:l,children:c("marginBottom")})]})})}function Tt({name:e,groupId:t,props:s,adapter:i,id:a,fonts:o}){const[c,r]=v.useState(!1),l=ce(s);return n.jsxs("div",{"data-testid":`react-inspector-group-${t}`,children:[e==="Layout"&&n.jsx(Ct,{adapter:i,id:a,props:s,fonts:o,showConstraints:c,onToggleConstraints:()=>r(d=>!d)}),e==="Position"&&n.jsx(Et,{adapter:i,id:a,props:s,fonts:o}),e==="Spacing"&&n.jsx($t,{adapter:i,id:a,props:s}),e==="Fill"&&n.jsx(wt,{adapter:i,id:a,props:s,fonts:o}),e!=="Layout"&&e!=="Position"&&e!=="Spacing"&&e!=="Fill"&&l.map(d=>d.kind==="single"?n.jsx($,{adapter:i,id:a,prop:d.prop,fonts:o},z(d)):n.jsx(pe,{adapter:i,id:a,row:d},z(d)))]})}function It({adapter:e,node:t}){const s=[];let i=t,a=0;for(;i&&a++<100;)s.unshift(i),i=i.parentId?e.hierarchy.node(i.parentId):null;return n.jsx("nav",{"aria-label":"Selection ancestry","data-testid":"react-inspector-breadcrumbs",style:{display:"flex",alignItems:"center",gap:3,padding:`${u[3]} ${u[4]}`,overflowX:"auto",borderBottom:`1px solid ${m.border}`,whiteSpace:"nowrap"},children:s.map((o,c)=>n.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:3},children:[c>0&&n.jsx("span",{style:{color:m.textMuted},children:"/"}),n.jsx(k,{type:"button",variant:"ghost",size:"compact","aria-current":o.id===t.id?"page":void 0,title:o.secondaryLabel??o.label,onClick:()=>$e(e,[o.id]),children:o.label})]},o.id))})}function Nt({owner:e,node:t}){const s=e.portableArgs(t.id),[i,a]=v.useState("idle"),[o,c]=v.useState(""),[r,l]=v.useState(null),d=async y=>{const g=await e.writeStory(t.id,y);l(g.changed?null:g.error??"refused"),g.changed&&(a("idle"),c(""))};return n.jsxs("div",{"data-testid":"react-story-controls-header",style:{borderBottom:`1px solid ${m.border}`},children:[n.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:u[4],padding:"7px 8px"},children:[n.jsxs("div",{style:{minWidth:0},children:[n.jsx("div",{style:{color:m.text,fontSize:j.md,fontWeight:600},children:t.label}),n.jsx("div",{style:{color:m.textMuted,fontSize:j.sm},children:s?`${Object.keys(s).length} args · session controls`:"Portable CSF story"})]}),n.jsx(k,{type:"button",variant:"secondary",size:"compact","data-testid":"react-story-reset-args",onClick:()=>e.resetPortableArgs(t.id),children:"Reset"})]}),n.jsxs("div",{style:{display:"flex",gap:u[2],padding:`0 ${u[4]} ${u[3]}`,flexWrap:"wrap"},children:[n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-story-save-as",title:"Write the CURRENT session args as a new story export in this file",onClick:()=>{l(null),c(""),a(i==="save-as"?"idle":"save-as")},children:"Save as…"}),n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-story-rename",onClick:()=>{l(null),c(""),a(i==="rename"?"idle":"rename")},children:"Rename…"}),i==="confirm-delete"?n.jsx(k,{type:"button",variant:"secondary",size:"compact","data-testid":"react-story-delete-confirm",onClick:()=>void d({kind:"delete"}),children:"Delete story?"}):n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-story-delete",onClick:()=>{l(null),a("confirm-delete")},children:"Delete"})]}),(i==="save-as"||i==="rename")&&n.jsxs("div",{style:{display:"flex",gap:u[2],padding:`0 ${u[4]} ${u[4]}`,alignItems:"center"},children:[n.jsx("input",{"data-testid":"react-story-name-input",autoFocus:!0,value:o,placeholder:i==="save-as"?"NewStoryName":`Rename ${t.label}`,onChange:y=>c(y.target.value),onKeyDown:y=>{y.key==="Enter"&&o.trim()&&d(i==="save-as"?{kind:"save-as",name:o.trim()}:{kind:"rename",newName:o.trim()}),y.key==="Escape"&&a("idle")},style:{flex:1,minWidth:0,background:m.neutralHover,border:`1px solid ${m.border}`,borderRadius:4,color:m.text,fontSize:j.base,padding:"3px 6px"}}),n.jsx(k,{type:"button",variant:"secondary",size:"compact","data-testid":"react-story-name-commit",onClick:()=>void d(i==="save-as"?{kind:"save-as",name:o.trim()}:{kind:"rename",newName:o.trim()}),children:i==="save-as"?"Save":"Rename"})]}),r&&n.jsx("div",{"data-testid":"react-story-write-notice",style:{padding:`0 ${u[4]} ${u[4]}`,color:fe(),fontSize:j.sm,lineHeight:O.normal},children:r})]})}function Mt({owner:e,nodeId:t}){const s=e.elementClasses(t),[i,a]=v.useState(""),[o,c]=v.useState(null),r=async()=>{const l=i.trim().replace(/^\./,"");if(!l)return;const d=await e.writeNamedStyle(t,{kind:"set",className:l});c(d.changed?null:d.error??"refused"),d.changed&&a("")};return n.jsxs("div",{"data-testid":"react-element-classes",style:{padding:`${u[3]} ${u[4]}`,borderBottom:`1px solid ${m.border}`},children:[n.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:u[2],alignItems:"center"},children:[n.jsx("span",{style:{fontSize:j.sm,color:m.textMuted,marginRight:u[1]},children:"Style class"}),s.map(l=>n.jsxs("span",{"data-testid":`react-class-chip-${l.name}`,title:l.styledIn?`.${l.name} — ${l.count} element${l.count===1?"":"s"} in this game share this style (${l.styledIn.split("/").pop()??l.styledIn})`:`.${l.name} — utility/generated class (no first-party rule to edit)`,style:{display:"inline-flex",alignItems:"center",gap:3,fontFamily:H,fontSize:j.sm,color:l.styledIn?m.text:m.textMuted,background:m.neutralHover,border:`1px solid ${m.border}`,borderRadius:4,padding:"1px 4px"},children:[".",l.name,l.count>1&&n.jsxs("span",{style:{color:m.textMuted,fontSize:j.xs},children:["×",l.count]}),n.jsx("button",{type:"button","data-testid":`react-class-remove-${l.name}`,title:`Remove .${l.name} from this element`,onClick:()=>void e.writeNamedStyle(t,{kind:"remove",className:l.name}).then(d=>c(d.changed?null:d.error??"refused")),style:{background:"none",border:"none",color:m.textMuted,cursor:"pointer",fontSize:j.base,padding:"3px 5px",margin:"-3px -4px -3px -1px",lineHeight:O.tight},children:"✕"})]},l.name)),n.jsx("input",{"data-testid":"react-class-input",value:i,placeholder:s.length===0?"create style…":"add class…",title:"Type a class name — an existing first-party class is applied; a new name creates a style from this element's inline declarations",onChange:l=>{a(l.target.value),o&&c(null)},onKeyDown:l=>{l.key==="Enter"&&r(),l.key==="Escape"&&a("")},style:{flex:1,minWidth:72,background:"transparent",border:`1px dashed ${m.border}`,borderRadius:4,color:m.text,fontSize:j.sm,fontFamily:H,padding:"2px 5px"}})]}),o&&n.jsx("div",{"data-testid":"react-class-notice",style:{paddingTop:u[2],color:fe(),fontSize:j.sm,lineHeight:O.normal},children:o}),n.jsx(Ot,{})]})}function Ot(){const e=v.useSyncExternalStore(Ke,U);return n.jsxs(n.Fragment,{children:[n.jsxs("div",{style:{display:"flex",alignItems:"center",gap:5,paddingTop:5},children:[n.jsx("span",{style:{fontSize:j.sm,color:m.textMuted},children:"Breakpoint"}),n.jsx(V,{"data-testid":"react-breakpoint-select",value:e??"",onChange:t=>oe(t.target.value||null),style:{fontSize:j.sm,flex:1,...e?{color:m.accent,borderColor:m.accent}:{}},children:he.map(t=>n.jsx("option",{value:t.media??"",children:t.label},t.label))})]}),e&&n.jsxs("div",{"data-testid":"react-breakpoint-note",style:{paddingTop:3,color:m.textMuted,fontSize:j.xs,lineHeight:O.normal},children:["Style edits write @media ",e," — previewed live by frame width."]})]})}const he=[{label:"Base",media:null},{label:"Tablet ≤991",media:"(max-width: 991px)"},{label:"Phone L ≤767",media:"(max-width: 767px)"},{label:"Phone ≤479",media:"(max-width: 479px)"}];function fe(){return"#e06c75"}function At({entry:e}){const[t,s]=v.useState(!1),i=`${e.file}:${e.line}`,a=`${e.file.split("/").pop()??e.file}:${e.line}`,o=async()=>{try{await navigator.clipboard.writeText(i),s(!0),setTimeout(()=>s(!1),1500)}catch{}};return n.jsx("button",{type:"button","data-testid":"react-source-location",title:`${i} — click to copy the path`,onClick:()=>void o(),style:{fontFamily:H,fontSize:"inherit",color:m.textMuted,cursor:"pointer",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0,background:"none",border:"none",padding:0,textAlign:"left"},children:t?"Copied":a})}function Bt({owner:e,node:t,nodeId:s}){const i=e instanceof D,a=i?e.sourceLocation(s):void 0,o=t?.role==="story"?`Story · ${t.label}`:t?.role==="document"?`CSF · ${t.secondaryLabel??t.label}`:i?"Source":"Session overlay — not written to source",c=t?.role==="story"?`${t.label} is the active portable CSF design state.`:t?.role==="document"?`${t.secondaryLabel??t.label} owns this root's design states.`:i?`Edits change ${t?.label??"this component"}'s source — every rendered instance updates.`:"This is an ingested game: edits persist as a per-project overlay only, never written to source.";return n.jsxs("div",{"data-testid":i?"react-lane-b-disclosure":"react-overlay-disclosure",title:c,style:{display:"flex",alignItems:"center",gap:u[3],padding:`${u[1]} ${u[4]} ${u[3]}`,borderBottom:`1px solid ${m.border}`,color:m.textMuted,fontSize:j.sm,lineHeight:O.normal,minWidth:0},children:[n.jsx("span",{style:{flexShrink:0,...i?{}:{color:m.accent}},children:o}),a&&n.jsx(At,{entry:a})]})}function Ft({adapter:e,node:t,nodeId:s,owner:i}){return n.jsxs("div",{"data-testid":"react-inspector-section",children:[n.jsx(It,{adapter:e,node:t}),i instanceof D&&n.jsx(Mt,{owner:i,nodeId:s}),n.jsx(Bt,{owner:i,node:t,nodeId:s})]})}function te({adapter:e,id:t,name:s,groupId:i,props:a}){const o=v.useMemo(()=>Xe(),[]);return n.jsx(Tt,{name:s,groupId:i,props:a,adapter:e,id:t,fonts:o})}function _t(e,t){const s=le(e,t);if(!s||!e)return[];const i=e.id,a=(t.inspector?.properties(i)??[]).filter(l=>l.path!=="name"),{ungrouped:o,groups:c}=be(a),r=[{id:et,title:"Element",icon:je,order:tt,body:{kind:"custom",render:()=>v.createElement(Ft,{adapter:t,node:e,nodeId:i,owner:s}),...s instanceof D?{data:{classes:s.elementClasses(i),breakpoint:U()},editable:{fields:[{path:"element.breakpoint",label:"Breakpoint",type:"enum",options:he.map(l=>l.media??"")}],io:{get:l=>l==="element.breakpoint"?U()??"":void 0,set:(l,d)=>{l==="element.breakpoint"&&oe(typeof d=="string"&&d?d:null)}}}}:{}}}];return e.role==="story"&&s instanceof D&&r.push({id:nt,title:"Story",icon:Se,order:st,body:{kind:"custom",render:()=>v.createElement(Nt,{owner:s,node:e})}}),o.length>0&&r.push({id:ne,title:"Style",icon:Ce,order:ve,defaultOpen:!0,body:{kind:"custom",render:()=>v.createElement(te,{adapter:t,id:i,name:"Style",groupId:"style",props:o})}}),c.forEach((l,d)=>{r.push({id:we(l.groupId),title:l.name,icon:ke(l.name),order:Re+d,defaultOpen:!0,body:{kind:"custom",render:()=>v.createElement(te,{adapter:t,id:i,name:l.name,groupId:l.groupId,props:l.properties})}})}),r}const Dt=xe();function Lt(){Dt.ensure(e=>{e(ye({match:qe,sections:_t,claims:[ne]}))})}const ln="workspace.service";function cn(){return Lt(),()=>{}}export{ln as point,cn as start};
+import{a as n}from"./jsx-runtime-DPjLkJKQ.js";import{eM as ye,eN as ne,eO as xe,eP as be,eQ as je,eR as Se,dR as ve,eS as Ce,eT as Re,eU as ke,eV as we,aG as Ee,e4 as m,er as u,et as j,a6 as k,eW as O,eX as $e,eY as H,bH as V,U as B,ex as Te,aN as Y,eZ as se,e_ as Ie,e$ as Ne,aS as Me,ax as ie,f0 as Oe,f1 as Ae}from"./index-Crsbhlhy.js";import{r as v}from"./index-nmcBqr7Y.js";import"./index-CtzuWnCS.js";import{p as re,G as ae,c as M,B as Be,A as Fe,S as A,a as _e,b as De,F as Le,d as X,e as ze,f as Pe,T as We,g as J,h as Ge,i as He,j as Ue}from"./ShadowEditor-DgBjRx-V.js";import{C as Ve}from"./ColorPicker-DytPZaFB.js";import{s as oe,a as U,b as Ke}from"./board-guides-CAd3Uwwe.js";import{b as Ye}from"./eyedropper-session-bjPXnfeX.js";import{k as Xe,l as Je}from"./inspect-DPJ1m-DR.js";import{D as Qe}from"./dom-authoring-adapter-CJzZxsuq.js";import{R as D,c as Ze}from"./react-world-authoring-adapter-tdk4Hqj1.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./index-FUuS4qwW.js";import"./client-DNXj_opT.js";import"./index-D_NuPfjr.js";import"./index-CinJrH5C.js";import"./inference-diagnostics-JiGwiJUe.js";import"./json-history-resource-BdE8EcB4.js";import"./relative-import-specifier-CJ9epbC5.js";import"./story-arg-descriptors-Ek86ExX7.js";import"./writer-tw6EcuVO.js";function le(e,t){if(!e)return null;const s=(()=>{if(!(t instanceof Ee))return t;const i=t.ownerOf(e.id);return i===null?null:t.childAdapters().find(a=>a.worldId===i)?.adapter??null})();return s instanceof D||s instanceof Qe?s:null}const qe=(e,t)=>le(e,t)!==null,et="element",tt=1500,nt="story",st=1600;function T(e){const t=e.indexOf(".");return t===-1?e:e.slice(t+1)}function it(e){const t=T(e.path);return e.type==="color"?"color":/^fontFamily$/i.test(t)?"font":t==="background"||t==="backgroundImage"?"gradient":t==="boxShadow"?"shadow":t==="textShadow"?"text-shadow":t==="filter"?"filter":t==="backdropFilter"?"backdrop-filter":t==="borderRadius"?"radius":e.type==="string"&&t==="transform"?"transform":e.type==="boolean"?"checkbox":e.type==="enum"?"select":e.type==="json"?"json":e.type==="number"?"scrub":"text"}function rt(e,t,s,i){if(!(e.path==="style.borderWidth"||e.path==="style.borderStyle"||e.path==="style.borderColor"))return!1;const o=t.get("style.borderWidth"),c=t.get("style.borderStyle"),r=t.get("style.borderColor");return!o||!c||!r?!1:(i.push({kind:"border",width:o,style:c,color:r}),s.add(o.path),s.add(c.path),s.add(r.path),!0)}function at(e,t,s,i){if(!(e.path==="style.justifyContent"||e.path==="style.alignItems"))return!1;const o=t.get("style.justifyContent"),c=t.get("style.alignItems");return!o||!c?!1:(i.push({kind:"align",justify:o,align:c}),s.add(o.path),s.add(c.path),!0)}function ce(e){const t=new Map(e.map(a=>[a.path,a])),s=new Set,i=[];for(const a of e)s.has(a.path)||rt(a,t,s,i)||at(a,t,s,i)||i.push({kind:"single",prop:a});return i}function L(e){return typeof e=="number"&&Number.isFinite(e)?e:0}function F(e){return`react-prop-${e.replace(/\./g,"-")}`}const de={type:"linear",angle:180,stops:[{color:"#ffffff",position:0},{color:"#000000",position:1}]};function w({label:e,testId:t,children:s}){return n.jsxs("div",{"data-testid":t?`${t}-row`:void 0,style:{...Oe,padding:`${u[2]} ${u[4]}`},children:[n.jsx("span",{style:{width:Ae,flexShrink:0,fontSize:j.base,color:m.textMuted},children:e}),n.jsx("div",{style:{flex:1,minWidth:0},children:s})]})}function ot({prop:e,raw:t,disabled:s,testId:i,commit:a}){return n.jsx(w,{label:e.label,testId:i,children:n.jsx(Ve,{testId:i,value:String(t??"#ffffff"),disabled:s,onChange:o=>a(e.path,o),onChangeEnd:o=>a(e.path,o),eyedropperFallback:()=>Je([String(t??"")]),onEyedropperPick:o=>Ye(o)})})}function lt({prop:e,raw:t,disabled:s,fonts:i,testId:a,commit:o}){return n.jsx(w,{label:e.label,testId:a,children:n.jsx(Ge,{testId:a,value:String(t??""),fonts:i,disabled:s,onChange:c=>o(e.path,c)})})}function ct({prop:e,raw:t,disabled:s,testId:i,commit:a}){const o=re(String(t??"none"));return o?n.jsx(w,{label:e.label,testId:i,children:n.jsx(ae,{testId:i,value:o,disabled:s,onChange:c=>a(e.path,M(c)),onChangeEnd:c=>a(e.path,M(c))})}):n.jsx(w,{label:e.label,testId:i,children:n.jsx(k,{type:"button",variant:"secondary",className:"volter-field-trigger","data-testid":i,disabled:s,onClick:()=>a(e.path,M(de)),children:"No gradient — click to add"})})}function Q({prop:e,raw:t,disabled:s,testId:i,commit:a,withSpreadInset:o}){const c=ze(String(t??"none"),o),r=o?Pe:We;return n.jsx(w,{label:e.label,testId:i,children:n.jsx(r,{value:c,disabled:s,onChange:l=>a(e.path,J(l,o)),onChangeEnd:l=>a(e.path,J(l,o))})})}function Z({prop:e,raw:t,disabled:s,testId:i,commit:a,label:o}){const c=De(String(t??"none"));return n.jsx(w,{label:e.label,testId:i,children:n.jsx(Le,{testId:i,label:o,value:c,disabled:s,onChange:r=>a(e.path,X(r)),onChangeEnd:r=>a(e.path,X(r))})})}const G=[{key:"topLeft",suffix:"TopLeft"},{key:"topRight",suffix:"TopRight"},{key:"bottomLeft",suffix:"BottomLeft"},{key:"bottomRight",suffix:"BottomRight"}];function dt({adapter:e,id:t,prop:s,raw:i,disabled:a,testId:o,commit:c,removeStyle:r}){const l=L(i),d=G.reduce((g,{key:f,suffix:S})=>{const x=e.inspector?.get(t,`style.border${S}Radius`);return g[f]=ie(x)??l,g},{}),y=g=>{if(Ue(g)){c(s.path,g.topLeft);for(const{suffix:f}of G)r(`style.border${f}Radius`);return}for(const{key:f,suffix:S}of G)c(`style.border${S}Radius`,g[f])};return n.jsx(w,{label:s.label,testId:o,children:n.jsx(_e,{value:d,disabled:a,onChange:y,onChangeEnd:y})})}function ut({prop:e,raw:t,disabled:s,testId:i,commit:a}){const o=se.has(T(e.path))?"":"px";return n.jsx(A,{testId:i,label:e.label,value:L(t),unit:o,disabled:s,onChange:c=>a(e.path,c),onChangeEnd:c=>a(e.path,c),style:{padding:`${u[2]} ${u[4]}`}})}function pt({prop:e,raw:t,disabled:s,testId:i,commit:a}){return n.jsx(w,{label:e.label,testId:i,children:n.jsx(V,{"data-testid":i,value:String(t??""),disabled:s,"data-dynamic":s||void 0,onChange:o=>a(e.path,o.target.value),style:{width:"100%"},children:(e.options??[]).map(o=>n.jsx("option",{value:String(o),children:String(o)},String(o)))})})}function gt({prop:e,raw:t,disabled:s,testId:i,commit:a}){return n.jsxs("label",{style:{display:"flex",gap:u[3],alignItems:"center",padding:`${u[3]} ${u[4]}`,fontSize:j.md},children:[n.jsx(Me,{className:"volter-checkbox","data-testid":i,checked:t!==!1,disabled:s,onChange:o=>a(e.path,o.target.checked)}),e.label]})}function ht({prop:e,raw:t,disabled:s,testId:i,commit:a}){return n.jsx(w,{label:e.label,testId:i,children:n.jsx(Ne,{"data-testid":i,defaultValue:JSON.stringify(t??null),disabled:s,"data-dynamic":s||void 0,"data-variant":"code",style:{width:"100%",minHeight:40},onBlur:o=>{try{a(e.path,JSON.parse(o.target.value))}catch{}}})})}function ue({prop:e,raw:t,disabled:s,testId:i,commit:a}){return n.jsx(w,{label:e.label,testId:i,children:n.jsx(Ie,{type:"text","data-testid":i,readOnly:s,"data-dynamic":s||void 0,value:String(t??""),onCommit:o=>a(e.path,o),style:{width:"100%"}})})}const ft=/^rotate\(\s*(-?[\d.]+)deg\s*\)\s*scale\(\s*(-?[\d.]+)\s*\)$/i,mt=/^scale\(\s*(-?[\d.]+)\s*\)\s*rotate\(\s*(-?[\d.]+)deg\s*\)$/i,yt=/^rotate\(\s*(-?[\d.]+)deg\s*\)$/i,xt=/^scale\(\s*(-?[\d.]+)\s*\)$/i,bt=/^matrix\(\s*(-?[\d.eE+-]+)\s*,\s*(-?[\d.eE+-]+)\s*,\s*(-?[\d.eE+-]+)\s*,\s*(-?[\d.eE+-]+)\s*,\s*(-?[\d.eE+-]+)\s*,\s*(-?[\d.eE+-]+)\s*\)$/,_=1e-4;function jt(e){const t=e.trim();if(t===""||t==="none")return{rotateDeg:0,scale:1};const s=ft.exec(t);if(s)return{rotateDeg:Number(s[1]),scale:Number(s[2])};const i=mt.exec(t);if(i)return{rotateDeg:Number(i[2]),scale:Number(i[1])};const a=yt.exec(t);if(a)return{rotateDeg:Number(a[1]),scale:1};const o=xt.exec(t);if(o)return{rotateDeg:0,scale:Number(o[1])};const c=bt.exec(t);if(!c)return null;const[r,l,d,y,g,f]=c.slice(1,7).map(Number);if(Math.abs(g)>_||Math.abs(f)>_||Math.abs(d+l)>_||Math.abs(y-r)>_)return null;const S=Math.hypot(r,l);if(S<_)return null;const x=Math.atan2(l,r)*180/Math.PI;return{rotateDeg:Math.round(x*100)/100,scale:Math.round(S*1e3)/1e3}}function St(e){return`rotate(${e.rotateDeg}deg) scale(${e.scale})`}function vt(e){const{prop:t,raw:s,disabled:i,testId:a,commit:o}=e,c=jt(String(s??"none"));if(!c)return n.jsx(ue,{...e});const r=l=>o(t.path,St(l));return n.jsx(w,{label:t.label,testId:a,children:n.jsxs("div",{style:{display:"flex",gap:u[3]},children:[n.jsx(A,{testId:`${a}-rotate`,label:"Rotate",value:c.rotateDeg,unit:"deg",disabled:i,onChange:l=>r({...c,rotateDeg:l}),onChangeEnd:l=>r({...c,rotateDeg:l}),style:{flex:1}}),n.jsx(A,{testId:`${a}-scale`,label:"Scale",value:c.scale,unit:"x",step:.1,disabled:i,onChange:l=>r({...c,scale:l}),onChangeEnd:l=>r({...c,scale:l}),style:{flex:1}})]})})}function $({adapter:e,id:t,prop:s,fonts:i}){const a=B(),o=(l,d)=>{e.inspector?.set(t,l,d),a.notifyIngestEdit()},c=l=>{e.inspector?.remove?.(t,l),a.notifyIngestEdit()},r={prop:s,raw:e.inspector?.get(t,s.path),disabled:s.readonly,testId:F(s.path),commit:o,fonts:i};switch(it(s)){case"color":return n.jsx(ot,{...r});case"font":return n.jsx(lt,{...r});case"gradient":return n.jsx(ct,{...r});case"shadow":return n.jsx(Q,{...r,withSpreadInset:!0});case"text-shadow":return n.jsx(Q,{...r,withSpreadInset:!1});case"filter":return n.jsx(Z,{...r,label:"Filter"});case"backdrop-filter":return n.jsx(Z,{...r,label:"Backdrop Filter"});case"radius":return n.jsx(dt,{...r,adapter:e,id:t,removeStyle:c});case"transform":return n.jsx(vt,{...r});case"scrub":return n.jsx(ut,{...r});case"select":return n.jsx(pt,{...r});case"checkbox":return n.jsx(gt,{...r});case"json":return n.jsx(ht,{...r});default:return n.jsx(ue,{...r})}}function pe({adapter:e,id:t,row:s}){const i=B(),a=(r,l)=>{e.inspector?.set(t,r,l),i.notifyIngestEdit()},o=r=>{e.inspector?.remove?.(t,r),i.notifyIngestEdit()};if(s.kind==="border"){const r={width:L(e.inspector?.get(t,s.width.path)),style:String(e.inspector?.get(t,s.style.path)??"solid"),color:String(e.inspector?.get(t,s.color.path)??"#000000")},l=f=>{const S=ie(e.inspector?.get(t,`style.border${f}Width`)),x=e.inspector?.get(t,`style.border${f}Style`),C=e.inspector?.get(t,`style.border${f}Color`),p=typeof C=="string"?Ze(C):void 0;return{width:S??r.width,style:typeof x=="string"&&x?x:r.style,color:p??r.color}},d={top:l("Top"),right:l("Right"),bottom:l("Bottom"),left:l("Left")},y=["Top","Right","Bottom","Left"],g=f=>{if(He(f)){a(s.width.path,f.top.width),a(s.style.path,f.top.style),a(s.color.path,f.top.color);for(const x of y)o(`style.border${x}Width`),o(`style.border${x}Style`),o(`style.border${x}Color`);return}const S=y.map(x=>({suffix:x,side:f[x.toLowerCase()]}));for(const{suffix:x,side:C}of S)a(`style.border${x}Width`,C.width),a(`style.border${x}Style`,C.style),a(`style.border${x}Color`,C.color)};return n.jsx(w,{label:"Border",testId:"react-prop-border",children:n.jsx(Be,{value:d,onChange:g,onChangeEnd:g})})}const c={justify:e.inspector?.get(t,s.justify.path)??"flex-start",align:e.inspector?.get(t,s.align.path)??"flex-start"};return n.jsx(w,{label:"Align",testId:"react-prop-align",children:n.jsx(Fe,{value:c,onChange:r=>{a(s.justify.path,r.justify),a(s.align.path,r.align)}})})}function z(e){return e.kind==="single"?e.prop.path:e.kind==="border"?`border:${e.width.path}`:`align:${e.justify.path}`}function E(e,t,s,i,a){if(!s)return null;const o=se.has(T(s.path))?"":"px",c=F(s.path);return n.jsx(A,{testId:c,label:i,value:L(e.inspector?.get(t,s.path)),unit:o,disabled:s.readonly,onChange:r=>a(s.path,r),onChangeEnd:r=>a(s.path,r),style:{flex:1,minWidth:0}},s.path)}function Ct({adapter:e,id:t,props:s,fonts:i,showConstraints:a,onToggleConstraints:o}){const c=B(),r=new Map(s.map(p=>[T(p.path),p])),l=(p,P)=>{e.inspector?.set(t,p,P),c.notifyIngestEdit()},d=String(e.inspector?.get(t,r.get("display")?.path??"style.display")??""),y=d==="flex"||d==="inline-flex",g=d==="grid"||d==="inline-grid",f=r.get("display"),S=r.get("gap"),x=ce(s.filter(p=>["justifyContent","alignItems"].includes(T(p.path)))),C=["flexDirection","flexWrap","overflow"].map(p=>r.get(p)).filter(p=>!!p);return n.jsxs("div",{style:{padding:"2px 8px 7px"},children:[n.jsxs("div",{style:{display:"flex",gap:u[3]},children:[E(e,t,r.get("width"),"W",l),E(e,t,r.get("height"),"H",l)]}),a&&n.jsxs("div",{"data-testid":"react-layout-constraints",style:{marginTop:5},children:[n.jsxs("div",{style:{display:"flex",gap:u[3]},children:[E(e,t,r.get("minWidth"),"Min W",l),E(e,t,r.get("minHeight"),"Min H",l)]}),n.jsxs("div",{style:{display:"flex",gap:u[3],marginTop:u[2]},children:[E(e,t,r.get("maxWidth"),"Max W",l),E(e,t,r.get("maxHeight"),"Max H",l)]})]}),n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-layout-toggle-constraints",onClick:o,style:{display:"flex",margin:"2px auto 5px"},children:a?"− constraints":"··· constraints"}),n.jsxs("div",{style:{display:"grid",gridTemplateColumns:"minmax(0, 1.35fr) minmax(0, 1fr)",gap:u[3]},children:[f&&n.jsx(V,{"data-testid":F(f.path),value:d,disabled:f.readonly,"data-dynamic":f.readonly||void 0,onChange:p=>l(f.path,p.target.value),style:{width:"100%"},children:(f.options??[]).map(p=>n.jsx("option",{value:String(p),children:String(p)},String(p)))}),E(e,t,S,"Gap",l)]}),y&&n.jsxs("div",{"data-testid":"react-layout-flex-controls",style:{marginTop:5},children:[C.filter(p=>T(p.path)!=="overflow").map(p=>n.jsx($,{adapter:e,id:t,prop:p,fonts:i},p.path)),x.map(p=>p.kind==="single"?n.jsx($,{adapter:e,id:t,prop:p.prop,fonts:i},z(p)):n.jsx(pe,{adapter:e,id:t,row:p},z(p)))]}),g&&n.jsxs("div",{"data-testid":"react-layout-grid-controls",style:{marginTop:5},children:[n.jsxs("div",{style:{display:"flex",gap:u[3]},children:[q(e,t,r.get("gridTemplateColumns"),"Cols",l),q(e,t,r.get("gridTemplateRows"),"Rows",l)]}),[r.get("gridTemplateColumns"),r.get("gridTemplateRows")].filter(p=>!!p).map(p=>n.jsx($,{adapter:e,id:t,prop:p,fonts:i},p.path)),n.jsxs("div",{style:{display:"flex",gap:u[3],marginTop:u[1]},children:[E(e,t,r.get("rowGap"),"Row Gap",l),E(e,t,r.get("columnGap"),"Col Gap",l)]}),r.get("gridAutoFlow")&&n.jsx($,{adapter:e,id:t,prop:r.get("gridAutoFlow"),fonts:i})]}),C.filter(p=>T(p.path)==="overflow").map(p=>n.jsx($,{adapter:e,id:t,prop:p,fonts:i},p.path)),n.jsx(Rt,{adapter:e,id:t,byName:r,fonts:i})]})}function ge(e){const t=e.trim();if(!t||t==="none")return 0;const s=[];let i=0,a=0;for(let c=0;c<t.length;c++){const r=t[c];r==="("||r==="["?i++:r===")"||r==="]"?i--:r===" "&&i===0&&(c>a&&s.push(t.slice(a,c)),a=c+1)}a<t.length&&s.push(t.slice(a));let o=0;for(const c of s){const r=/^repeat\(\s*(\d+)\s*,([\s\S]*)\)$/.exec(c);o+=r?.[1]&&r[2]!==void 0?Number(r[1])*ge(r[2]):1}return o}function q(e,t,s,i,a){if(!s)return null;let o=null;const c=r=>{const d=`repeat(${Math.max(1,Math.round(r))}, 1fr)`;d!==o&&(o=d,a(s.path,d))};return n.jsx(A,{testId:`${F(s.path)}-count`,label:i,value:ge(String(e.inspector?.get(t,s.path)??"")),min:1,disabled:s.readonly,onChange:c,onChangeEnd:c,style:{flex:1,minWidth:0}},`${s.path}-count`)}function Rt({adapter:e,id:t,byName:s,fonts:i}){const[a,o]=v.useState(!1),c=["gridColumn","gridRow","justifySelf"].map(r=>s.get(r)).filter(r=>!!r);return c.length===0?null:n.jsxs(n.Fragment,{children:[n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-layout-toggle-grid-item",onClick:()=>o(r=>!r),style:{display:"flex",margin:"2px auto 0"},children:a?"− grid item":"··· grid item"}),a&&n.jsx("div",{"data-testid":"react-layout-grid-item",children:c.map(r=>n.jsx($,{adapter:e,id:t,prop:r,fonts:i},r.path))})]})}function kt(e){const t=e.trim();if(!t||t==="none")return[];const s=[];let i=0,a=0;for(let o=0;o<t.length;o++){const c=t[o];c==="("?i++:c===")"?i--:c===","&&i===0&&(s.push(t.slice(a,o).trim()),a=o+1)}return s.push(t.slice(a).trim()),s.filter(Boolean)}function ee(e){return/^url\((['"]?)([\s\S]*)\1\)$/.exec(e.trim())?.[2]??null}function wt({adapter:e,id:t,props:s,fonts:i}){const a=B(),o=new Map(s.map(h=>[T(h.path),h])),c=(h,b)=>{e.inspector?.set(t,h,b),a.notifyIngestEdit()},r=o.get("backgroundImage"),l=o.get("backgroundColor"),[d,y]=v.useState(null),[g,f]=v.useState(null),S=String(r?e.inspector?.get(t,r.path)??"":""),x=kt(S),C=h=>{if(r){if(h.length>0){c(r.path,h.join(", "));return}e.inspector?.remove?.(t,r.path),a.notifyIngestEdit()}},p=(h,b)=>C(x.map((R,I)=>I===h?b:R)),P=h=>{y(null),C(x.filter((b,R)=>R!==h))},K=(h,b)=>{const R=[...x],I=R[h+b];I===void 0||R[h]===void 0||(R[h+b]=R[h],R[h]=I,y(null),C(R))},W={background:"none",border:"none",color:m.textMuted,cursor:"pointer",fontSize:j.base,padding:`${u[2]} ${u[3]}`,lineHeight:O.tight};return n.jsxs("div",{"data-testid":"react-fill-list",style:{padding:"2px 8px 7px"},children:[x.map((h,b)=>{const R=re(h),I=ee(h),me=R?`${R.type} gradient`:I!==null?I.split("/").pop()??"image":h.slice(0,22);return n.jsxs("div",{style:{marginBottom:3},children:[n.jsxs("div",{style:{display:"flex",alignItems:"center",gap:5},children:[n.jsxs("button",{type:"button","data-testid":`react-fill-layer-${b}`,title:h,onClick:()=>y(d===b?null:b),style:{display:"flex",alignItems:"center",gap:u[3],flex:1,minWidth:0,background:"none",border:"none",cursor:"pointer",padding:`${u[1]} 0`,color:m.text,fontSize:j.base,textAlign:"left"},children:[n.jsx("span",{style:{width:16,height:16,flexShrink:0,borderRadius:Te.sm,border:`1px solid ${m.border}`,background:h,backgroundSize:"cover"}}),n.jsx("span",{style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:me})]}),b>0&&n.jsx("button",{type:"button","data-testid":`react-fill-up-${b}`,title:"Raise this fill",onClick:()=>K(b,-1),style:W,children:"↑"}),b<x.length-1&&n.jsx("button",{type:"button","data-testid":`react-fill-down-${b}`,title:"Lower this fill",onClick:()=>K(b,1),style:W,children:"↓"}),n.jsx("button",{type:"button","data-testid":`react-fill-remove-${b}`,title:"Remove this fill (CSS has no hidden-layer state — removing is Figma's eye)",onClick:()=>P(b),style:W,children:"✕"})]}),d===b&&R&&n.jsx(ae,{testId:`react-fill-gradient-${b}`,value:R,onChange:N=>p(b,M(N)),onChangeEnd:N=>p(b,M(N))}),d===b&&I!==null&&n.jsx(Y,{"data-testid":`react-fill-url-${b}`,defaultValue:I,placeholder:"image url",onBlur:N=>p(b,`url("${N.target.value.trim()}")`),onKeyDown:N=>{N.key==="Enter"&&p(b,`url("${N.currentTarget.value.trim()}")`)},style:{width:"100%",marginTop:u[1]}})]},`${b}-${h.slice(0,24)}`)}),g!==null&&n.jsx(Y,{"data-testid":"react-fill-image-draft",value:g,placeholder:"image url — Enter to add",autoFocus:!0,onChange:h=>f(h.target.value),onKeyDown:h=>{h.key==="Enter"&&g.trim()&&(C([`url("${g.trim()}")`,...x]),f(null)),h.key==="Escape"&&f(null)},style:{width:"100%",marginBottom:3}}),n.jsxs("div",{style:{display:"flex",gap:u[2]},children:[n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-fill-add-gradient",onClick:()=>{C([M(de),...x]),y(0)},children:"+ gradient"}),n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-fill-add-image",onClick:()=>f(""),children:"+ image"})]}),x.some(h=>ee(h)!==null)&&["backgroundSize","backgroundPosition","backgroundRepeat"].map(h=>o.get(h)).filter(h=>!!h).map(h=>n.jsx($,{adapter:e,id:t,prop:h,fonts:i},h.path)),l&&n.jsx($,{adapter:e,id:t,prop:l,fonts:i})]})}function Et({adapter:e,id:t,props:s,fonts:i}){const a=B(),o=new Map(s.map(g=>[T(g.path),g])),c=o.get("position"),r=String(c?e.inspector?.get(t,c.path)??"static":"static"),l=(g,f)=>{e.inspector?.set(t,g,f),a.notifyIngestEdit()},d=["top","right","bottom","left"],y=["zIndex","flexGrow","flexShrink","flexBasis","alignSelf"].map(g=>o.get(g)).filter(g=>!!g);return n.jsxs("div",{style:{padding:"2px 8px 7px"},children:[c&&n.jsx("div",{"data-testid":F(c.path),style:{display:"grid",gridTemplateColumns:"repeat(5, 1fr)",gap:u[1]},children:(c.options??[]).map(g=>{const f=String(g),S=f===r;return n.jsx(k,{type:"button",variant:S?"primary":"secondary",size:"compact","aria-pressed":S,title:f,disabled:c.readonly,onClick:()=>l(c.path,f),children:f.slice(0,3)},f)})}),r!=="static"&&n.jsx("div",{"data-testid":"react-position-offsets",style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:u[2],marginTop:u[3]},children:d.map(g=>E(e,t,o.get(g),g[0].toUpperCase(),l))}),y.length>0&&n.jsxs("div",{style:{borderTop:`1px solid ${m.border}`,marginTop:7,paddingTop:3},children:[n.jsx("div",{style:{color:m.textMuted,fontSize:j.xs,padding:"2px 0 1px"},children:"STACKING & FLEX ITEM"}),y.map(g=>n.jsx($,{adapter:e,id:t,prop:g,fonts:i},g.path))]})]})}function $t({adapter:e,id:t,props:s}){const i=B(),a=new Map(s.map(d=>[T(d.path),d])),o=(d,y)=>{e.inspector?.set(t,d,y),i.notifyIngestEdit()},c=d=>{const y=a.get(d);return y?n.jsx(A,{testId:F(y.path),label:"",value:L(e.inspector?.get(t,y.path)),unit:"px",disabled:y.readonly,onChange:g=>o(y.path,g),onChangeEnd:g=>o(y.path,g),style:{width:46,minWidth:0,flex:"none"}},y.path):n.jsx("span",{},d)},r=d=>n.jsx("span",{style:{position:"absolute",top:2,left:6,fontSize:8,letterSpacing:".08em",color:m.textMuted,pointerEvents:"none"},children:d}),l={display:"flex",alignItems:"center",justifyContent:"center"};return n.jsx("div",{style:{padding:`${u[1]} ${u[4]} ${u[4]}`},"data-testid":"react-spacing-box",children:n.jsxs("div",{style:{position:"relative",border:`1px solid ${m.border}`,borderRadius:4,padding:"11px 4px 3px"},children:[r("MARGIN"),n.jsx("div",{style:l,children:c("marginTop")}),n.jsxs("div",{style:{display:"flex",alignItems:"center",gap:u[1]},children:[c("marginLeft"),n.jsxs("div",{style:{position:"relative",flex:1,minWidth:0,border:`1px dashed ${m.border}`,borderRadius:4,padding:"11px 4px 3px"},children:[r("PADDING"),n.jsx("div",{style:l,children:c("paddingTop")}),n.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:u[1]},children:[c("paddingLeft"),c("paddingRight")]}),n.jsx("div",{style:l,children:c("paddingBottom")})]}),c("marginRight")]}),n.jsx("div",{style:l,children:c("marginBottom")})]})})}function Tt({name:e,groupId:t,props:s,adapter:i,id:a,fonts:o}){const[c,r]=v.useState(!1),l=ce(s);return n.jsxs("div",{"data-testid":`react-inspector-group-${t}`,children:[e==="Layout"&&n.jsx(Ct,{adapter:i,id:a,props:s,fonts:o,showConstraints:c,onToggleConstraints:()=>r(d=>!d)}),e==="Position"&&n.jsx(Et,{adapter:i,id:a,props:s,fonts:o}),e==="Spacing"&&n.jsx($t,{adapter:i,id:a,props:s}),e==="Fill"&&n.jsx(wt,{adapter:i,id:a,props:s,fonts:o}),e!=="Layout"&&e!=="Position"&&e!=="Spacing"&&e!=="Fill"&&l.map(d=>d.kind==="single"?n.jsx($,{adapter:i,id:a,prop:d.prop,fonts:o},z(d)):n.jsx(pe,{adapter:i,id:a,row:d},z(d)))]})}function It({adapter:e,node:t}){const s=[];let i=t,a=0;for(;i&&a++<100;)s.unshift(i),i=i.parentId?e.hierarchy.node(i.parentId):null;return n.jsx("nav",{"aria-label":"Selection ancestry","data-testid":"react-inspector-breadcrumbs",style:{display:"flex",alignItems:"center",gap:3,padding:`${u[3]} ${u[4]}`,overflowX:"auto",borderBottom:`1px solid ${m.border}`,whiteSpace:"nowrap"},children:s.map((o,c)=>n.jsxs("span",{style:{display:"inline-flex",alignItems:"center",gap:3},children:[c>0&&n.jsx("span",{style:{color:m.textMuted},children:"/"}),n.jsx(k,{type:"button",variant:"ghost",size:"compact","aria-current":o.id===t.id?"page":void 0,title:o.secondaryLabel??o.label,onClick:()=>$e(e,[o.id]),children:o.label})]},o.id))})}function Nt({owner:e,node:t}){const s=e.portableArgs(t.id),[i,a]=v.useState("idle"),[o,c]=v.useState(""),[r,l]=v.useState(null),d=async y=>{const g=await e.writeStory(t.id,y);l(g.changed?null:g.error??"refused"),g.changed&&(a("idle"),c(""))};return n.jsxs("div",{"data-testid":"react-story-controls-header",style:{borderBottom:`1px solid ${m.border}`},children:[n.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:u[4],padding:"7px 8px"},children:[n.jsxs("div",{style:{minWidth:0},children:[n.jsx("div",{style:{color:m.text,fontSize:j.md,fontWeight:600},children:t.label}),n.jsx("div",{style:{color:m.textMuted,fontSize:j.sm},children:s?`${Object.keys(s).length} args · session controls`:"Portable CSF story"})]}),n.jsx(k,{type:"button",variant:"secondary",size:"compact","data-testid":"react-story-reset-args",onClick:()=>e.resetPortableArgs(t.id),children:"Reset"})]}),n.jsxs("div",{style:{display:"flex",gap:u[2],padding:`0 ${u[4]} ${u[3]}`,flexWrap:"wrap"},children:[n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-story-save-as",title:"Write the CURRENT session args as a new story export in this file",onClick:()=>{l(null),c(""),a(i==="save-as"?"idle":"save-as")},children:"Save as…"}),n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-story-rename",onClick:()=>{l(null),c(""),a(i==="rename"?"idle":"rename")},children:"Rename…"}),i==="confirm-delete"?n.jsx(k,{type:"button",variant:"secondary",size:"compact","data-testid":"react-story-delete-confirm",onClick:()=>void d({kind:"delete"}),children:"Delete story?"}):n.jsx(k,{type:"button",variant:"ghost",size:"compact","data-testid":"react-story-delete",onClick:()=>{l(null),a("confirm-delete")},children:"Delete"})]}),(i==="save-as"||i==="rename")&&n.jsxs("div",{style:{display:"flex",gap:u[2],padding:`0 ${u[4]} ${u[4]}`,alignItems:"center"},children:[n.jsx("input",{"data-testid":"react-story-name-input",autoFocus:!0,value:o,placeholder:i==="save-as"?"NewStoryName":`Rename ${t.label}`,onChange:y=>c(y.target.value),onKeyDown:y=>{y.key==="Enter"&&o.trim()&&d(i==="save-as"?{kind:"save-as",name:o.trim()}:{kind:"rename",newName:o.trim()}),y.key==="Escape"&&a("idle")},style:{flex:1,minWidth:0,background:m.neutralHover,border:`1px solid ${m.border}`,borderRadius:4,color:m.text,fontSize:j.base,padding:"3px 6px"}}),n.jsx(k,{type:"button",variant:"secondary",size:"compact","data-testid":"react-story-name-commit",onClick:()=>void d(i==="save-as"?{kind:"save-as",name:o.trim()}:{kind:"rename",newName:o.trim()}),children:i==="save-as"?"Save":"Rename"})]}),r&&n.jsx("div",{"data-testid":"react-story-write-notice",style:{padding:`0 ${u[4]} ${u[4]}`,color:fe(),fontSize:j.sm,lineHeight:O.normal},children:r})]})}function Mt({owner:e,nodeId:t}){const s=e.elementClasses(t),[i,a]=v.useState(""),[o,c]=v.useState(null),r=async()=>{const l=i.trim().replace(/^\./,"");if(!l)return;const d=await e.writeNamedStyle(t,{kind:"set",className:l});c(d.changed?null:d.error??"refused"),d.changed&&a("")};return n.jsxs("div",{"data-testid":"react-element-classes",style:{padding:`${u[3]} ${u[4]}`,borderBottom:`1px solid ${m.border}`},children:[n.jsxs("div",{style:{display:"flex",flexWrap:"wrap",gap:u[2],alignItems:"center"},children:[n.jsx("span",{style:{fontSize:j.sm,color:m.textMuted,marginRight:u[1]},children:"Style class"}),s.map(l=>n.jsxs("span",{"data-testid":`react-class-chip-${l.name}`,title:l.styledIn?`.${l.name} — ${l.count} element${l.count===1?"":"s"} in this game share this style (${l.styledIn.split("/").pop()??l.styledIn})`:`.${l.name} — utility/generated class (no first-party rule to edit)`,style:{display:"inline-flex",alignItems:"center",gap:3,fontFamily:H,fontSize:j.sm,color:l.styledIn?m.text:m.textMuted,background:m.neutralHover,border:`1px solid ${m.border}`,borderRadius:4,padding:"1px 4px"},children:[".",l.name,l.count>1&&n.jsxs("span",{style:{color:m.textMuted,fontSize:j.xs},children:["×",l.count]}),n.jsx("button",{type:"button","data-testid":`react-class-remove-${l.name}`,title:`Remove .${l.name} from this element`,onClick:()=>void e.writeNamedStyle(t,{kind:"remove",className:l.name}).then(d=>c(d.changed?null:d.error??"refused")),style:{background:"none",border:"none",color:m.textMuted,cursor:"pointer",fontSize:j.base,padding:"3px 5px",margin:"-3px -4px -3px -1px",lineHeight:O.tight},children:"✕"})]},l.name)),n.jsx("input",{"data-testid":"react-class-input",value:i,placeholder:s.length===0?"create style…":"add class…",title:"Type a class name — an existing first-party class is applied; a new name creates a style from this element's inline declarations",onChange:l=>{a(l.target.value),o&&c(null)},onKeyDown:l=>{l.key==="Enter"&&r(),l.key==="Escape"&&a("")},style:{flex:1,minWidth:72,background:"transparent",border:`1px dashed ${m.border}`,borderRadius:4,color:m.text,fontSize:j.sm,fontFamily:H,padding:"2px 5px"}})]}),o&&n.jsx("div",{"data-testid":"react-class-notice",style:{paddingTop:u[2],color:fe(),fontSize:j.sm,lineHeight:O.normal},children:o}),n.jsx(Ot,{})]})}function Ot(){const e=v.useSyncExternalStore(Ke,U);return n.jsxs(n.Fragment,{children:[n.jsxs("div",{style:{display:"flex",alignItems:"center",gap:5,paddingTop:5},children:[n.jsx("span",{style:{fontSize:j.sm,color:m.textMuted},children:"Breakpoint"}),n.jsx(V,{"data-testid":"react-breakpoint-select",value:e??"",onChange:t=>oe(t.target.value||null),style:{fontSize:j.sm,flex:1,...e?{color:m.accent,borderColor:m.accent}:{}},children:he.map(t=>n.jsx("option",{value:t.media??"",children:t.label},t.label))})]}),e&&n.jsxs("div",{"data-testid":"react-breakpoint-note",style:{paddingTop:3,color:m.textMuted,fontSize:j.xs,lineHeight:O.normal},children:["Style edits write @media ",e," — previewed live by frame width."]})]})}const he=[{label:"Base",media:null},{label:"Tablet ≤991",media:"(max-width: 991px)"},{label:"Phone L ≤767",media:"(max-width: 767px)"},{label:"Phone ≤479",media:"(max-width: 479px)"}];function fe(){return"#e06c75"}function At({entry:e}){const[t,s]=v.useState(!1),i=`${e.file}:${e.line}`,a=`${e.file.split("/").pop()??e.file}:${e.line}`,o=async()=>{try{await navigator.clipboard.writeText(i),s(!0),setTimeout(()=>s(!1),1500)}catch{}};return n.jsx("button",{type:"button","data-testid":"react-source-location",title:`${i} — click to copy the path`,onClick:()=>void o(),style:{fontFamily:H,fontSize:"inherit",color:m.textMuted,cursor:"pointer",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",minWidth:0,background:"none",border:"none",padding:0,textAlign:"left"},children:t?"Copied":a})}function Bt({owner:e,node:t,nodeId:s}){const i=e instanceof D,a=i?e.sourceLocation(s):void 0,o=t?.role==="story"?`Story · ${t.label}`:t?.role==="document"?`CSF · ${t.secondaryLabel??t.label}`:i?"Source":"Session overlay — not written to source",c=t?.role==="story"?`${t.label} is the active portable CSF design state.`:t?.role==="document"?`${t.secondaryLabel??t.label} owns this root's design states.`:i?`Edits change ${t?.label??"this component"}'s source — every rendered instance updates.`:"This is an ingested game: edits persist as a per-project overlay only, never written to source.";return n.jsxs("div",{"data-testid":i?"react-lane-b-disclosure":"react-overlay-disclosure",title:c,style:{display:"flex",alignItems:"center",gap:u[3],padding:`${u[1]} ${u[4]} ${u[3]}`,borderBottom:`1px solid ${m.border}`,color:m.textMuted,fontSize:j.sm,lineHeight:O.normal,minWidth:0},children:[n.jsx("span",{style:{flexShrink:0,...i?{}:{color:m.accent}},children:o}),a&&n.jsx(At,{entry:a})]})}function Ft({adapter:e,node:t,nodeId:s,owner:i}){return n.jsxs("div",{"data-testid":"react-inspector-section",children:[n.jsx(It,{adapter:e,node:t}),i instanceof D&&n.jsx(Mt,{owner:i,nodeId:s}),n.jsx(Bt,{owner:i,node:t,nodeId:s})]})}function te({adapter:e,id:t,name:s,groupId:i,props:a}){const o=v.useMemo(()=>Xe(),[]);return n.jsx(Tt,{name:s,groupId:i,props:a,adapter:e,id:t,fonts:o})}function _t(e,t){const s=le(e,t);if(!s||!e)return[];const i=e.id,a=(t.inspector?.properties(i)??[]).filter(l=>l.path!=="name"),{ungrouped:o,groups:c}=be(a),r=[{id:et,title:"Element",icon:je,order:tt,body:{kind:"custom",render:()=>v.createElement(Ft,{adapter:t,node:e,nodeId:i,owner:s}),...s instanceof D?{data:{classes:s.elementClasses(i),breakpoint:U()},editable:{fields:[{path:"element.breakpoint",label:"Breakpoint",type:"enum",options:he.map(l=>l.media??"")}],io:{get:l=>l==="element.breakpoint"?U()??"":void 0,set:(l,d)=>{l==="element.breakpoint"&&oe(typeof d=="string"&&d?d:null)}}}}:{}}}];return e.role==="story"&&s instanceof D&&r.push({id:nt,title:"Story",icon:Se,order:st,body:{kind:"custom",render:()=>v.createElement(Nt,{owner:s,node:e})}}),o.length>0&&r.push({id:ne,title:"Style",icon:Ce,order:ve,defaultOpen:!0,body:{kind:"custom",render:()=>v.createElement(te,{adapter:t,id:i,name:"Style",groupId:"style",props:o})}}),c.forEach((l,d)=>{r.push({id:we(l.groupId),title:l.name,icon:ke(l.name),order:Re+d,defaultOpen:!0,body:{kind:"custom",render:()=>v.createElement(te,{adapter:t,id:i,name:l.name,groupId:l.groupId,props:l.properties})}})}),r}const Dt=xe();function Lt(){Dt.ensure(e=>{e(ye({match:qe,sections:_t,claims:[ne]}))})}const ln="workspace.service";function cn(){return Lt(),()=>{}}export{ln as point,cn as start};

package/dist/assets/{react-story-board-Bfwrt56k.js → react-story-board-CJ2rY1vM.js}

@@ -1 +1 @@
-import"./jsx-runtime-DPjLkJKQ.js";import"./index-nmcBqr7Y.js";import"./index-CtzuWnCS.js";import{dp as Rt,al as b,dB as Mt,dC as ot,dD as kt}from"./index-C3IEVwzA.js";const qt="#191c22",Kt="rgba(255, 255, 255, 0.2)",_t="#20242a",K="#2d323a";function St(){return`linear-gradient(45deg, ${K} 25%, transparent 25%, transparent 75%, ${K} 75%), linear-gradient(45deg, ${K} 25%, transparent 25%, transparent 75%, ${K} 75%)`}const O=20,Q=6,H=22,at=10,yt=O+Q,ft=H+at,Ct=.6,It=.4,Lt=.7,$t=.45;function pt(n,s,l){return n>=s?[1,!0]:n<=l?[0,!1]:[(n-l)/(s-l),!0]}function ht(n,s){const l=Math.max(0,n),i=s?Math.min(1,l/ft):0,[u,d]=pt(i,Lt,$t),c=Math.max(0,l-ft*i),y=Math.min(1,c/yt),[v,_]=pt(y,Ct,It),w=_?yt*y:0;return{frame:{scale:y,opacity:v,visible:_,offset:Q*y+O},group:s?{scale:i,opacity:u,visible:d,offset:w+at*i+H}:null}}function mt(n,s){n.style.transformOrigin="0 100%",n.style.transform=s.scale>=1?"":`scale(${s.scale})`,n.style.opacity=s.visible?String(s.opacity):"0",n.style.display=s.visible?"":"none"}const Bt={width:null,height:null};let J=Bt;const st=new Set;function Ot(){return J}function Pt(n,s){const l=n===null?null:Math.max(1,Math.round(n)),i=s===null?null:Math.max(1,Math.round(s));if(!(J.width===l&&J.height===i)){J={width:l,height:i};for(const u of st)u()}}function Jt(){Pt(null,null)}function Ft(n){return st.add(n),()=>st.delete(n)}const Tt=640,Vt=400,N=64,I=64,gt=72,zt=28,nt=I+H+at+O+Q;function wt(n,s){const l=new Map(n.map(i=>[i.id,i]));return s.sections.map(i=>({key:i.id,label:i.label,stories:i.storyIds.flatMap(u=>{const d=l.get(u);return d?[d]:[]})}))}const Nt=n=>n.split("/").map(s=>s.trim()).filter(Boolean);function xt(n){const s=new Set(n.filter(i=>i.stories.length===1).map(i=>i.key)),l=[];{const i=new Map;for(const u of n){if(!s.has(u.key)){l.push({key:u.key,label:u.label,stories:[...u.stories]});continue}const d=Nt(u.label).slice(0,-1).join("/");let c=i.get(d);c||(c={key:`category:${d}`,label:d||null,stories:[]},i.set(d,c),l.push(c)),c.stories.push(...u.stories)}}return l}function Gt(n,s,l){const i=xt(wt(n,s)),u=new Map,d=new Map;let c=N,y=0;i.forEach((w,P)=>{const E=Math.max(1,Math.ceil(Math.sqrt(w.stories.length))),S=Math.ceil(w.stories.length/E),L=w.stories.map(h=>l(h)),C=Array.from({length:E},()=>0),R=Array.from({length:S},()=>0);L.forEach((h,f)=>{const m=f%E,A=Math.floor(f/E);C[m]=Math.max(C[m],h.width),R[A]=Math.max(R[A],h.height)});const F=C.map((h,f)=>C.slice(0,f).reduce((m,A)=>m+A+I,0)),D=R.map((h,f)=>R.slice(0,f).reduce((m,A)=>m+A+I,0)),$=P===0?Number.POSITIVE_INFINITY:w.label!==null?nt:I+O+Q;w.label!==null&&d.set(w.key,{x:N,y:c,roomAbove:$}),w.stories.forEach((h,f)=>{const m=Math.floor(f/E),A=f%E,W=L[f],{width:T,height:U}=W,it=N+F[A],Y=c+D[m];u.set(h.id,{x:it,y:Y,width:T,height:U,roomAbove:m===0?$:I,withGroupLabel:i.length>1&&m===0&&w.label!==null})});const x=C.reduce((h,f)=>h+f,0)+Math.max(0,E-1)*I,B=R.reduce((h,f)=>h+f,0)+Math.max(0,S-1)*I;y=Math.max(y,x),c+=B+nt});const v=N*2+y,_=c-nt+N;return{layouts:u,groupOrigins:d,width:v,height:n.length?_:0}}const k=new WeakMap,rt=new Set,Ht=null;function G(){for(const n of rt)n()}function Qt(n){return rt.add(n),()=>rt.delete(n)}function Xt(n){return n?k.get(n)?.viewport()??Ht:null}function Zt(n,s){const l=n?k.get(n):void 0;return l?(l.setViewport(s),!0):!1}function te(n){const s=n?k.get(n):void 0;return!s||s.viewport().locked?!1:(s.setRotation(!s.viewport().rotated),!0)}function Dt(){const n=Ot();return{width:n.width??Tt,height:n.height??Vt}}function bt(n,s,l){if(s.width<=0||s.height<=0)return;const i=Math.max(1,n.clientWidth-gt*2),u=Math.max(1,n.clientHeight-gt*2),d=Math.min(l,Math.max(.1,Math.min(i/s.width,u/s.height)));kt(n.clientWidth/2-(s.x+s.width/2)*d,n.clientHeight/2-(s.y+s.height/2)*d,d)}function ee(n){const s=k.get(n);return s?(s.fitAll(),!0):!1}function oe(n,s,l){return n?k.get(n)?.selectAtClientPoint(s,l)??!1:!1}function ne(n,s,l){return n?k.get(n)?.zoomAtClientPoint(s,l)??!1:!1}function se(n,s,l,i,u){if(s.length===0)throw new Error("A React story board requires at least one story.");const d=n.parentElement;if(!d)throw new Error("A React story board layer must be attached before mounting.");n.dataset.volterReactStoryBoard="true",n.style.contain="none";const c=document.createElement("div");c.dataset.testid="react-story-board",c.dataset.volterReactStoryBoardCanvas="true",c.style.position="absolute",c.style.left="0",c.style.top="0",c.style.transformOrigin="0 0",n.appendChild(c);const y=document.createElement("div");y.dataset.testid="react-story-board-chrome",y.dataset.volterStoryBoardChromeFor=n.dataset.worldId??"",y.style.position="absolute",y.style.inset="0",y.style.zIndex=String(Rt.sticky),y.style.display=n.style.display||"block",y.style.pointerEvents="none",y.style.overflow="visible",d.appendChild(y);const v=new Map,_=new Map,w=new Map,P=new Map,E=new Map,S=new Map,L=wt(s,u.index),C=new Map,R=new Map,F=new Map,D=new Map;let $,x=s.some(t=>t.id===l)?l:s[0].id,B=!1,h=!1;const f=t=>{const e=u.resolve(t,t.frameSize??Dt(),F.has(t.id)?F.get(t.id):void 0,D.get(t.id)),o=S.get(t.id);return o?{...e,width:o.frame.width,height:o.frame.height,layout:"fullscreen"}:t.frameSize?{...e,layout:"fullscreen"}:e},m=()=>{const t=f(s.find(e=>e.id===x));$={storyId:x,selectedViewportId:t.selectedViewportId,locked:t.locked,rotated:t.rotated,choices:t.choices}};m();const A=new Set(L.filter(t=>t.stories.length===1).map(t=>t.key)),W=t=>t.split("/").map(e=>e.trim()).filter(Boolean),T=new Map;for(const t of L)for(const e of t.stories){const o=(e.title?W(e.title).at(-1):void 0)??W(t.label).at(-1);T.set(e.id,A.has(t.key)?o??e.label:e.label)}const U=xt(L);for(const t of L.flatMap(e=>e.stories)){const e=document.createElement("section");e.dataset.testid="react-story-frame",e.dataset.storyId=t.id,e.dataset.storyLabel=t.label,e.dataset.storyGroup=u.index.sections.find(et=>et.storyIds.includes(t.id))?.label??"",e.style.position="absolute",e.style.border=`1px solid ${b.boundary.strong}`,e.style.borderRadius="0",e.style.backgroundColor=_t,e.style.backgroundImage=St(),e.style.backgroundPosition="0 0, 8px 8px",e.style.backgroundSize="16px 16px",e.style.boxShadow="none";const o=document.createElement("button");o.type="button",o.dataset.testid="react-story-frame-label",o.dataset.storyId=t.id,o.title=`${T.get(t.id)??t.label} — click to select, double-click to zoom — ${t.modulePath}`,o.textContent=T.get(t.id)??t.label,o.style.position="absolute",o.style.height=`${O}px`,o.style.padding="0 2px",o.style.border="0",o.style.appearance="none",o.style.background="transparent",o.style.color=b.content.primary,o.style.font=`600 12px ${b.typography.sans}`,o.style.lineHeight=`${O}px`,o.style.textAlign="left",o.style.cursor="default",o.style.pointerEvents="auto",o.style.whiteSpace="nowrap",o.style.overflow="hidden",o.style.textOverflow="ellipsis",o.style.width="max-content",o.addEventListener("click",()=>i(t.id,"highlight")),o.addEventListener("dblclick",()=>i(t.id,"zoom"));const r=document.createElement("div");r.dataset.testid="react-story-frame-content",r.dataset.storyId=t.id,r.style.position="absolute",r.style.left="0",r.style.top="0",r.style.overflow="hidden",r.style.contain="layout paint",r.style.boxSizing="border-box";const a=document.createElement("div");a.dataset.testid="react-story-frame-note",a.dataset.storyId=t.id,a.style.position="absolute",a.style.left="0",a.style.right="0",a.style.bottom="0",a.style.display="none",a.style.padding="6px 8px",a.style.boxSizing="border-box",a.style.background=b.surface.overlay,a.style.color=b.content.muted,a.style.font=`11px ${b.typography.sans}`,a.style.pointerEvents="none";const p=document.createElement("div");p.dataset.testid="react-story-frame-error",p.dataset.storyId=t.id,p.style.position="absolute",p.style.inset="0",p.style.display="none",p.style.padding="16px",p.style.boxSizing="border-box",p.style.background=b.surface.overlay,p.style.color=b.semantic.danger,p.style.font=`12px ${b.typography.mono}`,p.style.pointerEvents="none",e.append(r,a,p),c.appendChild(e),y.appendChild(o),v.set(t.id,{element:e,content:r}),_.set(t.id,p),w.set(t.id,a),P.set(t.id,o)}if(U.length>1)for(const t of U){if(t.label===null)continue;const e=document.createElement("div");e.dataset.testid="react-story-group-label",e.dataset.storyGroup=t.key,e.textContent=t.label,e.style.position="absolute",e.style.height=`${H}px`,e.style.lineHeight=`${H}px`,e.style.color=b.content.primary,e.style.font=`700 14px ${b.typography.sans}`,e.style.whiteSpace="nowrap",e.style.pointerEvents="none",e.style.width="max-content",y.appendChild(e),C.set(t.key,e)}const Y=()=>{for(const[t,e]of v){const o=t===x;e.element.dataset.active=o?"true":"false",e.element.style.outline=o?`2px solid ${b.accent.default}`:"none",e.element.style.outlineOffset=o?"3px":"0";const r=P.get(t);r.setAttribute("aria-pressed",String(o)),r.style.color=o?b.accent.default:b.content.muted}},lt=(t,e)=>Number.isFinite(t)?t*e:Number.POSITIVE_INFINITY,j=()=>{const t=ot();for(const[e,o]of E){const r=P.get(e),{frame:a}=ht(lt(o.roomAbove,t.zoom),o.withGroupLabel);r.style.left=`${t.x+o.x*t.zoom}px`,r.style.top=`${t.y+o.y*t.zoom-a.offset}px`;const p=Math.max(1,(o.width+I/2)*t.zoom);r.style.maxWidth=`${p}px`,mt(r,p>=zt?a:{...a,opacity:0,visible:!1})}for(const[e,o]of R){const r=C.get(e);if(!r)continue;const{group:a}=ht(lt(o.roomAbove,t.zoom),!0);a&&(r.style.left=`${t.x+o.x*t.zoom}px`,r.style.top=`${t.y+o.y*t.zoom-a.offset}px`,mt(r,a))}},V=()=>{E.clear(),R.clear();const t=Gt(s,u.index,f);for(const[r,a]of t.groupOrigins)R.set(r,a);for(const r of s){const a=t.layouts.get(r.id);if(!a)continue;E.set(r.id,a);const{x:p,y:et,width:dt,height:ut}=a,z=f(r),g=v.get(r.id);g.element.style.left=`${p}px`,g.element.style.top=`${et}px`,g.element.style.width=`${dt}px`,g.element.style.height=`${ut}px`;const M=S.get(r.id);g.element.style.overflow=M?"hidden":"",g.content.style.width=`${M?M.mount.width:dt}px`,g.content.style.height=`${M?M.mount.height:ut}px`,g.content.style.left=`${M?-M.offset.x:0}px`,g.content.style.top=`${M?-M.offset.y:0}px`,g.content.dataset.storyLayout=z.layout,g.content.style.padding=z.layout==="padded"?"16px":"0",g.content.style.display=z.layout==="centered"?"flex":"block",g.content.style.alignItems=z.layout==="centered"?"center":"",g.content.style.justifyContent=z.layout==="centered"?"center":""}const e=t.width,o=t.height;c.style.width=`${e}px`,c.style.height=`${o}px`,n.style.width=`${e}px`,n.style.height=`${o}px`,j()},vt=()=>{const t=Number.parseFloat(c.style.width),e=Number.parseFloat(c.style.height);bt(d,{x:0,y:0,width:t,height:e},1)};let X=null;const Z=()=>{h||(h=!0,queueMicrotask(()=>{h=!1,!B&&(q(x,!0),X=ot())}))},q=(t,e=!1)=>{const o=v.get(t),r=E.get(t);!o||!r||(x=t,Y(),m(),G(),e&&bt(d,r,2))},ct=(t,e)=>{for(const[o,r]of v){const a=r.content.getBoundingClientRect();if(t>=a.left&&t<=a.right&&e>=a.top&&e<=a.bottom)return o}return null},Et=Ft(()=>{V(),Z()}),At=Mt(j);V(),Y(),j();const tt={element:c,frames:v,activeContent:()=>v.get(x).content,activate:q,clearError:t=>{const e=_.get(t);e&&(e.style.display="none",e.textContent="")},fitAll:vt,selectAtClientPoint:(t,e)=>{const o=ct(t,e);return!o||o===x?!1:(i(o,"highlight"),!0)},zoomAtClientPoint:(t,e)=>{const o=ct(t,e);return o?(i(o,"zoom"),!0):!1},setError:(t,e)=>{const o=_.get(t);o&&(o.textContent=e,o.style.display="block")},setMeasuredFrame:(t,e)=>{if(B||!v.has(t))return;const o=S.get(t);if(e===null){if(!o)return;S.delete(t)}else{if(o&&o.frame.width===e.frame.width&&o.frame.height===e.frame.height&&o.mount.width===e.mount.width&&o.mount.height===e.mount.height&&o.offset.x===e.offset.x&&o.offset.y===e.offset.y)return;S.set(t,e)}V(),j(),X!==null&&ot()===X&&Z()},setNote:t=>{for(const e of w.values())e.textContent=t??"",e.style.display=t===null?"none":"block"},viewport:()=>$,setViewport:t=>{$.locked||(F.set(x,t),V(),m(),G(),q(x,!0))},setRotation:t=>{$.locked||(D.set(x,t),V(),m(),G(),q(x,!0))},dispose:()=>{B||(B=!0,Et(),At(),k.get(d)===tt&&k.delete(d),G(),c.remove(),y.remove())}};return k.set(d,tt),G(),Z(),tt}export{qt as R,Qt as a,Xt as b,Zt as c,Pt as d,Jt as e,ee as f,Ot as g,se as h,Kt as i,oe as j,Gt as r,Ft as s,te as t,ne as z};
+import"./jsx-runtime-DPjLkJKQ.js";import"./index-nmcBqr7Y.js";import"./index-CtzuWnCS.js";import{dp as Rt,al as b,dB as Mt,dC as ot,dD as kt}from"./index-Crsbhlhy.js";const qt="#191c22",Kt="rgba(255, 255, 255, 0.2)",_t="#20242a",K="#2d323a";function St(){return`linear-gradient(45deg, ${K} 25%, transparent 25%, transparent 75%, ${K} 75%), linear-gradient(45deg, ${K} 25%, transparent 25%, transparent 75%, ${K} 75%)`}const O=20,Q=6,H=22,at=10,yt=O+Q,ft=H+at,Ct=.6,It=.4,Lt=.7,$t=.45;function pt(n,s,l){return n>=s?[1,!0]:n<=l?[0,!1]:[(n-l)/(s-l),!0]}function ht(n,s){const l=Math.max(0,n),i=s?Math.min(1,l/ft):0,[u,d]=pt(i,Lt,$t),c=Math.max(0,l-ft*i),y=Math.min(1,c/yt),[v,_]=pt(y,Ct,It),w=_?yt*y:0;return{frame:{scale:y,opacity:v,visible:_,offset:Q*y+O},group:s?{scale:i,opacity:u,visible:d,offset:w+at*i+H}:null}}function mt(n,s){n.style.transformOrigin="0 100%",n.style.transform=s.scale>=1?"":`scale(${s.scale})`,n.style.opacity=s.visible?String(s.opacity):"0",n.style.display=s.visible?"":"none"}const Bt={width:null,height:null};let J=Bt;const st=new Set;function Ot(){return J}function Pt(n,s){const l=n===null?null:Math.max(1,Math.round(n)),i=s===null?null:Math.max(1,Math.round(s));if(!(J.width===l&&J.height===i)){J={width:l,height:i};for(const u of st)u()}}function Jt(){Pt(null,null)}function Ft(n){return st.add(n),()=>st.delete(n)}const Tt=640,Vt=400,N=64,I=64,gt=72,zt=28,nt=I+H+at+O+Q;function wt(n,s){const l=new Map(n.map(i=>[i.id,i]));return s.sections.map(i=>({key:i.id,label:i.label,stories:i.storyIds.flatMap(u=>{const d=l.get(u);return d?[d]:[]})}))}const Nt=n=>n.split("/").map(s=>s.trim()).filter(Boolean);function xt(n){const s=new Set(n.filter(i=>i.stories.length===1).map(i=>i.key)),l=[];{const i=new Map;for(const u of n){if(!s.has(u.key)){l.push({key:u.key,label:u.label,stories:[...u.stories]});continue}const d=Nt(u.label).slice(0,-1).join("/");let c=i.get(d);c||(c={key:`category:${d}`,label:d||null,stories:[]},i.set(d,c),l.push(c)),c.stories.push(...u.stories)}}return l}function Gt(n,s,l){const i=xt(wt(n,s)),u=new Map,d=new Map;let c=N,y=0;i.forEach((w,P)=>{const E=Math.max(1,Math.ceil(Math.sqrt(w.stories.length))),S=Math.ceil(w.stories.length/E),L=w.stories.map(h=>l(h)),C=Array.from({length:E},()=>0),R=Array.from({length:S},()=>0);L.forEach((h,f)=>{const m=f%E,A=Math.floor(f/E);C[m]=Math.max(C[m],h.width),R[A]=Math.max(R[A],h.height)});const F=C.map((h,f)=>C.slice(0,f).reduce((m,A)=>m+A+I,0)),D=R.map((h,f)=>R.slice(0,f).reduce((m,A)=>m+A+I,0)),$=P===0?Number.POSITIVE_INFINITY:w.label!==null?nt:I+O+Q;w.label!==null&&d.set(w.key,{x:N,y:c,roomAbove:$}),w.stories.forEach((h,f)=>{const m=Math.floor(f/E),A=f%E,W=L[f],{width:T,height:U}=W,it=N+F[A],Y=c+D[m];u.set(h.id,{x:it,y:Y,width:T,height:U,roomAbove:m===0?$:I,withGroupLabel:i.length>1&&m===0&&w.label!==null})});const x=C.reduce((h,f)=>h+f,0)+Math.max(0,E-1)*I,B=R.reduce((h,f)=>h+f,0)+Math.max(0,S-1)*I;y=Math.max(y,x),c+=B+nt});const v=N*2+y,_=c-nt+N;return{layouts:u,groupOrigins:d,width:v,height:n.length?_:0}}const k=new WeakMap,rt=new Set,Ht=null;function G(){for(const n of rt)n()}function Qt(n){return rt.add(n),()=>rt.delete(n)}function Xt(n){return n?k.get(n)?.viewport()??Ht:null}function Zt(n,s){const l=n?k.get(n):void 0;return l?(l.setViewport(s),!0):!1}function te(n){const s=n?k.get(n):void 0;return!s||s.viewport().locked?!1:(s.setRotation(!s.viewport().rotated),!0)}function Dt(){const n=Ot();return{width:n.width??Tt,height:n.height??Vt}}function bt(n,s,l){if(s.width<=0||s.height<=0)return;const i=Math.max(1,n.clientWidth-gt*2),u=Math.max(1,n.clientHeight-gt*2),d=Math.min(l,Math.max(.1,Math.min(i/s.width,u/s.height)));kt(n.clientWidth/2-(s.x+s.width/2)*d,n.clientHeight/2-(s.y+s.height/2)*d,d)}function ee(n){const s=k.get(n);return s?(s.fitAll(),!0):!1}function oe(n,s,l){return n?k.get(n)?.selectAtClientPoint(s,l)??!1:!1}function ne(n,s,l){return n?k.get(n)?.zoomAtClientPoint(s,l)??!1:!1}function se(n,s,l,i,u){if(s.length===0)throw new Error("A React story board requires at least one story.");const d=n.parentElement;if(!d)throw new Error("A React story board layer must be attached before mounting.");n.dataset.volterReactStoryBoard="true",n.style.contain="none";const c=document.createElement("div");c.dataset.testid="react-story-board",c.dataset.volterReactStoryBoardCanvas="true",c.style.position="absolute",c.style.left="0",c.style.top="0",c.style.transformOrigin="0 0",n.appendChild(c);const y=document.createElement("div");y.dataset.testid="react-story-board-chrome",y.dataset.volterStoryBoardChromeFor=n.dataset.worldId??"",y.style.position="absolute",y.style.inset="0",y.style.zIndex=String(Rt.sticky),y.style.display=n.style.display||"block",y.style.pointerEvents="none",y.style.overflow="visible",d.appendChild(y);const v=new Map,_=new Map,w=new Map,P=new Map,E=new Map,S=new Map,L=wt(s,u.index),C=new Map,R=new Map,F=new Map,D=new Map;let $,x=s.some(t=>t.id===l)?l:s[0].id,B=!1,h=!1;const f=t=>{const e=u.resolve(t,t.frameSize??Dt(),F.has(t.id)?F.get(t.id):void 0,D.get(t.id)),o=S.get(t.id);return o?{...e,width:o.frame.width,height:o.frame.height,layout:"fullscreen"}:t.frameSize?{...e,layout:"fullscreen"}:e},m=()=>{const t=f(s.find(e=>e.id===x));$={storyId:x,selectedViewportId:t.selectedViewportId,locked:t.locked,rotated:t.rotated,choices:t.choices}};m();const A=new Set(L.filter(t=>t.stories.length===1).map(t=>t.key)),W=t=>t.split("/").map(e=>e.trim()).filter(Boolean),T=new Map;for(const t of L)for(const e of t.stories){const o=(e.title?W(e.title).at(-1):void 0)??W(t.label).at(-1);T.set(e.id,A.has(t.key)?o??e.label:e.label)}const U=xt(L);for(const t of L.flatMap(e=>e.stories)){const e=document.createElement("section");e.dataset.testid="react-story-frame",e.dataset.storyId=t.id,e.dataset.storyLabel=t.label,e.dataset.storyGroup=u.index.sections.find(et=>et.storyIds.includes(t.id))?.label??"",e.style.position="absolute",e.style.border=`1px solid ${b.boundary.strong}`,e.style.borderRadius="0",e.style.backgroundColor=_t,e.style.backgroundImage=St(),e.style.backgroundPosition="0 0, 8px 8px",e.style.backgroundSize="16px 16px",e.style.boxShadow="none";const o=document.createElement("button");o.type="button",o.dataset.testid="react-story-frame-label",o.dataset.storyId=t.id,o.title=`${T.get(t.id)??t.label} — click to select, double-click to zoom — ${t.modulePath}`,o.textContent=T.get(t.id)??t.label,o.style.position="absolute",o.style.height=`${O}px`,o.style.padding="0 2px",o.style.border="0",o.style.appearance="none",o.style.background="transparent",o.style.color=b.content.primary,o.style.font=`600 12px ${b.typography.sans}`,o.style.lineHeight=`${O}px`,o.style.textAlign="left",o.style.cursor="default",o.style.pointerEvents="auto",o.style.whiteSpace="nowrap",o.style.overflow="hidden",o.style.textOverflow="ellipsis",o.style.width="max-content",o.addEventListener("click",()=>i(t.id,"highlight")),o.addEventListener("dblclick",()=>i(t.id,"zoom"));const r=document.createElement("div");r.dataset.testid="react-story-frame-content",r.dataset.storyId=t.id,r.style.position="absolute",r.style.left="0",r.style.top="0",r.style.overflow="hidden",r.style.contain="layout paint",r.style.boxSizing="border-box";const a=document.createElement("div");a.dataset.testid="react-story-frame-note",a.dataset.storyId=t.id,a.style.position="absolute",a.style.left="0",a.style.right="0",a.style.bottom="0",a.style.display="none",a.style.padding="6px 8px",a.style.boxSizing="border-box",a.style.background=b.surface.overlay,a.style.color=b.content.muted,a.style.font=`11px ${b.typography.sans}`,a.style.pointerEvents="none";const p=document.createElement("div");p.dataset.testid="react-story-frame-error",p.dataset.storyId=t.id,p.style.position="absolute",p.style.inset="0",p.style.display="none",p.style.padding="16px",p.style.boxSizing="border-box",p.style.background=b.surface.overlay,p.style.color=b.semantic.danger,p.style.font=`12px ${b.typography.mono}`,p.style.pointerEvents="none",e.append(r,a,p),c.appendChild(e),y.appendChild(o),v.set(t.id,{element:e,content:r}),_.set(t.id,p),w.set(t.id,a),P.set(t.id,o)}if(U.length>1)for(const t of U){if(t.label===null)continue;const e=document.createElement("div");e.dataset.testid="react-story-group-label",e.dataset.storyGroup=t.key,e.textContent=t.label,e.style.position="absolute",e.style.height=`${H}px`,e.style.lineHeight=`${H}px`,e.style.color=b.content.primary,e.style.font=`700 14px ${b.typography.sans}`,e.style.whiteSpace="nowrap",e.style.pointerEvents="none",e.style.width="max-content",y.appendChild(e),C.set(t.key,e)}const Y=()=>{for(const[t,e]of v){const o=t===x;e.element.dataset.active=o?"true":"false",e.element.style.outline=o?`2px solid ${b.accent.default}`:"none",e.element.style.outlineOffset=o?"3px":"0";const r=P.get(t);r.setAttribute("aria-pressed",String(o)),r.style.color=o?b.accent.default:b.content.muted}},lt=(t,e)=>Number.isFinite(t)?t*e:Number.POSITIVE_INFINITY,j=()=>{const t=ot();for(const[e,o]of E){const r=P.get(e),{frame:a}=ht(lt(o.roomAbove,t.zoom),o.withGroupLabel);r.style.left=`${t.x+o.x*t.zoom}px`,r.style.top=`${t.y+o.y*t.zoom-a.offset}px`;const p=Math.max(1,(o.width+I/2)*t.zoom);r.style.maxWidth=`${p}px`,mt(r,p>=zt?a:{...a,opacity:0,visible:!1})}for(const[e,o]of R){const r=C.get(e);if(!r)continue;const{group:a}=ht(lt(o.roomAbove,t.zoom),!0);a&&(r.style.left=`${t.x+o.x*t.zoom}px`,r.style.top=`${t.y+o.y*t.zoom-a.offset}px`,mt(r,a))}},V=()=>{E.clear(),R.clear();const t=Gt(s,u.index,f);for(const[r,a]of t.groupOrigins)R.set(r,a);for(const r of s){const a=t.layouts.get(r.id);if(!a)continue;E.set(r.id,a);const{x:p,y:et,width:dt,height:ut}=a,z=f(r),g=v.get(r.id);g.element.style.left=`${p}px`,g.element.style.top=`${et}px`,g.element.style.width=`${dt}px`,g.element.style.height=`${ut}px`;const M=S.get(r.id);g.element.style.overflow=M?"hidden":"",g.content.style.width=`${M?M.mount.width:dt}px`,g.content.style.height=`${M?M.mount.height:ut}px`,g.content.style.left=`${M?-M.offset.x:0}px`,g.content.style.top=`${M?-M.offset.y:0}px`,g.content.dataset.storyLayout=z.layout,g.content.style.padding=z.layout==="padded"?"16px":"0",g.content.style.display=z.layout==="centered"?"flex":"block",g.content.style.alignItems=z.layout==="centered"?"center":"",g.content.style.justifyContent=z.layout==="centered"?"center":""}const e=t.width,o=t.height;c.style.width=`${e}px`,c.style.height=`${o}px`,n.style.width=`${e}px`,n.style.height=`${o}px`,j()},vt=()=>{const t=Number.parseFloat(c.style.width),e=Number.parseFloat(c.style.height);bt(d,{x:0,y:0,width:t,height:e},1)};let X=null;const Z=()=>{h||(h=!0,queueMicrotask(()=>{h=!1,!B&&(q(x,!0),X=ot())}))},q=(t,e=!1)=>{const o=v.get(t),r=E.get(t);!o||!r||(x=t,Y(),m(),G(),e&&bt(d,r,2))},ct=(t,e)=>{for(const[o,r]of v){const a=r.content.getBoundingClientRect();if(t>=a.left&&t<=a.right&&e>=a.top&&e<=a.bottom)return o}return null},Et=Ft(()=>{V(),Z()}),At=Mt(j);V(),Y(),j();const tt={element:c,frames:v,activeContent:()=>v.get(x).content,activate:q,clearError:t=>{const e=_.get(t);e&&(e.style.display="none",e.textContent="")},fitAll:vt,selectAtClientPoint:(t,e)=>{const o=ct(t,e);return!o||o===x?!1:(i(o,"highlight"),!0)},zoomAtClientPoint:(t,e)=>{const o=ct(t,e);return o?(i(o,"zoom"),!0):!1},setError:(t,e)=>{const o=_.get(t);o&&(o.textContent=e,o.style.display="block")},setMeasuredFrame:(t,e)=>{if(B||!v.has(t))return;const o=S.get(t);if(e===null){if(!o)return;S.delete(t)}else{if(o&&o.frame.width===e.frame.width&&o.frame.height===e.frame.height&&o.mount.width===e.mount.width&&o.mount.height===e.mount.height&&o.offset.x===e.offset.x&&o.offset.y===e.offset.y)return;S.set(t,e)}V(),j(),X!==null&&ot()===X&&Z()},setNote:t=>{for(const e of w.values())e.textContent=t??"",e.style.display=t===null?"none":"block"},viewport:()=>$,setViewport:t=>{$.locked||(F.set(x,t),V(),m(),G(),q(x,!0))},setRotation:t=>{$.locked||(D.set(x,t),V(),m(),G(),q(x,!0))},dispose:()=>{B||(B=!0,Et(),At(),k.get(d)===tt&&k.delete(d),G(),c.remove(),y.remove())}};return k.set(d,tt),G(),Z(),tt}export{qt as R,Qt as a,Xt as b,Zt as c,Pt as d,Jt as e,ee as f,Ot as g,se as h,Kt as i,oe as j,Gt as r,Ft as s,te as t,ne as z};