@jxsuite/studio 10.4.0 → 10.6.0

package/dist/chunks/studio-dn56z7sn.js

@@ -1,5 +0,0 @@
-import{Oe,Jm,St,e0,e1,wh,Sv,t0,Z,Qe,Zm,bM,i0,vM,o0,yM,Xd,SM,CM,kM,h}from"./studio-knsjyx7n.js";import{to,wr,kx,BC,Ex,P$,u}from"./studio-pwctzka3.js";import{Fa}from"./studio-nzemfbkk.js";import{Ou,am,Ld,H_,dE}from"./studio-c2fa783p.js";import{yp,fw,Ac,Oc,bb,xp,eS,fm,tS,GD,mm,vb,Mc,nS,iS,oS,BE,gm,zE,zl,gw,WE,rS,qE}from"./studio-tmfcn347.js";import{Fn}from"./studio-tpxcryf2.js";import{ae}from"./studio-wqfaqw4m.js";import{Wo,CS,Bu,_T,Od,Cp,kp,zu,Wu,Md}from"./studio-cqxj4fcy.js";import{ji,Mp,Hr,TC}from"./studio-xva3hzkv.js";import{zt}from"./studio-daksw8kh.js";import{qd,La,cv}from"./studio-4zd6an2b.js";import{SE,kD,CE,sw}from"./studio-jd1qb1st.js";import{kr,II,of,NI,s0,a0,FM,wn,Na}from"./studio-4f7thq0p.js";import{Ce,oe}from"./studio-v5wktj6f.js";import{qM,KM,E,R}from"./studio-9dq7rwc7.js";import{me,te,g}from"./studio-3qr08sxq.js";import{n,Y,_,v,Pe,Ha,lc,Jn,xl,Di,pg,it}from"./studio-k3we3kqb.js";function om(e){return e?.session.ui.canvasMode===Ou?u.stylebook.selection:null}var Ye={$schema:"https://jxsuite.com/schema/v1",$id:"StudioLogicPanel",$description:"The Inspector's **Logic** tab — everything about how the selected element BEHAVES, as a Jx document over the kit. The Inspector is split by task rather than by data type (§6): wiring a `$switch`, wiring a repeater to a collection and wiring a click handler are one job, and they were three, split across two tabs because a `$switch` is stored as a property and a click handler as a property-shaped function. So there are four sections here — Repeating list, Condition, Events, and a custom element's outward contract (Observed Attributes · CSS Properties · CSS Parts) — and each of them is a projection. The adapter (`panels/events-panel.ts`) keeps every decision: what the selection is, which rungs a position permits, what a handler currently holds, which elements of a multi-selection disagree about a key, and what a commit writes. Nothing here reads the document, asks the schema a question or knows what a Value Source is. Two islands, both through `onNodeCreated` (studio-ui-guidelines.md §9.4): `[part=\"control-host\"]` receives the expression editor, which is a lit surface of its own, and `[part=\"statements-host\"]` receives the `statements` surface, which is a mounted document of its own. Every bindable row carries `data-prop`, which is what `inspector/field:<prop>` addresses.",tagName:"div",attributes:{part:"logic"},style:{$description:"The tab's own layout, and nothing else. `.style-sidebar` and `.style-section-body` are NOT transcribed: the first was a scroll container the dock already provides, and the second existed to put padding inside a Spectrum accordion item, which `jx-accordion-item` does itself. What is left is the two vocabularies this tab has that no other surface does — a declared event, and an event binding — plus the one empty state a document cannot borrow from `panels/empty-state.ts`.",display:"block",minWidth:"0",fontFamily:"var(--jx-font-sans)",fontSize:"var(--jx-text-md)",color:"var(--fg)",'& [part="empty"]':{$description:"The one empty-state pattern (studio-ui-guidelines.md §11.2), drawn here because a document cannot render a lit helper. It is a copy rather than a move — every panel still lit renders through that helper — and it goes when the last of them converts.",display:"flex",flexDirection:"column",alignItems:"center",gap:"var(--jx-space-3)",padding:"var(--jx-space-6)",textAlign:"center",fontSize:"var(--jx-text-md)",color:"var(--fg-dim)"},'& [part="empty-message"]':{margin:"0",maxWidth:"34ch",lineHeight:"1.5"},'& [part="section-body"]':{display:"flex",flexDirection:"column",gap:"var(--jx-space-2)",minWidth:"0"},'& [part="field"]':{minWidth:"0"},'& [part="field"] > [part="label"]:empty':{$description:"A row whose control names itself — an expression editor draws its own Operator / Target / Value rows — has no second label to draw. `jx-field` takes the empty label out of the accessible name by leaving it empty; this takes it out of the layout.",display:"none"},'& [part="value"]':{display:"flex",alignItems:"center",gap:"var(--jx-space-2)",minWidth:"0"},'& [part="widget"]':{flex:"1 1 auto",minWidth:"0"},'& [part="control-host"]':{display:"block",minWidth:"0"},'& [part="subhead"]':{margin:"var(--jx-space-2) 0 0",fontSize:"var(--jx-text-sm)",fontWeight:"600",color:"var(--fg-dim)"},'& [part="case"]':{display:"flex",alignItems:"center",gap:"var(--jx-space-2)",minWidth:"0"},'& [part="case-name"]':{flex:"1 1 auto",minWidth:"0"},'& [part="declared"]':{display:"flex",flexDirection:"column",gap:"var(--jx-space-1)",minWidth:"0"},'& [part="declared-row"]':{display:"flex",alignItems:"baseline",gap:"var(--jx-space-2)",minWidth:"0",fontSize:"var(--jx-text-sm)"},'& [part="event-code"]':{fontFamily:"var(--font-mono, monospace)",color:"var(--accent)"},'& [part="declared-from"]':{color:"var(--fg-dim)"},'& [part="event-type"]':{marginInlineStart:"auto",color:"var(--fg-dim)",fontFamily:"var(--font-mono, monospace)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},'& [part="binding"]':{$description:"One `on*` key and whatever produces it. A box, for the reason a statement card is one: a handler CONTAINS a body, and the border is what says where one binding stops and the next begins.",boxSizing:"border-box",display:"flex",flexDirection:"column",gap:"var(--jx-space-2)",minWidth:"0",padding:"var(--jx-space-2)",border:"1px solid var(--jx-border)",borderRadius:"var(--jx-radius-sm)"},'& [part="binding-head"]':{display:"flex",alignItems:"center",gap:"var(--jx-space-2)",minWidth:"0"},'& [part="event-name"]':{flex:"1 1 auto",minWidth:"0"},'& [part="binding-body"]':{display:"flex",flexDirection:"column",gap:"var(--jx-space-2)",minWidth:"0"},'& [part="body-toggle"]':{display:"flex",justifyContent:"flex-end",minWidth:"0"},'& [part="body-row"]':{display:"flex",alignItems:"flex-start",gap:"var(--jx-space-2)",minWidth:"0"},'& [part="body-field"], & [part="expression-host"], & [part="statements-host"]':{flex:"1 1 auto",minWidth:"0"},'& [part="kv"]':{display:"flex",alignItems:"baseline",gap:"var(--jx-space-2)",minWidth:"0",fontSize:"var(--jx-text-sm)"},'& [part="kv-name"]':{fontFamily:"var(--font-mono, monospace)",color:"var(--fg)"},'& [part="kv-detail"], & [part="kv-value"], & [part="kv-tags"]':{color:"var(--fg-dim)"},'& [part="kv-value"]':{marginInlineStart:"auto",fontFamily:"var(--font-mono, monospace)",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},'& [part="empty-actions"]':{display:"flex",flexWrap:"wrap",justifyContent:"center",gap:"var(--jx-space-2)"}},children:[{tagName:"div",attributes:{part:"body-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"#/state/state"},cases:{empty:{tagName:"div",attributes:{part:"empty"},children:[{tagName:"p",attributes:{part:"empty-message"},textContent:"${state.emptyMessage}"},{tagName:"div",attributes:{part:"empty-actions-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"#/state/hasEmptyActions"},cases:{true:{tagName:"div",attributes:{part:"empty-actions"},children:[{$prototype:"Array",items:{$ref:"#/state/emptyActions"},key:{$ref:"$map/item/id"},map:{tagName:"jx-button",attributes:{part:"empty-action"},$props:{size:"sm"},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/runEmptyAction"},value:[{$ref:"$map/item/id"}]}]},children:[{tagName:"span",textContent:"${$map.item.label}"}]}}]}}}]},ready:{tagName:"jx-accordion",attributes:{part:"sections"},$props:{multiple:!0},children:[{$description:'Repeating list. Filter and Sort are always drawn: they used to hide behind `+ Add filter`, which seeded `{ $ref: "#/state/" }` — a binding to the empty pointer, which is not a signal — so the row opened already bound to nothing and the only way to type a literal was to cycle the mode ring twice (§6.6). A repeater has exactly three inputs, and an empty row states that better than a button does.',tagName:"div",attributes:{part:"repeater-slot",role:"none",hidden:"${state.hasRepeater ? null : ''}"},style:{display:"contents"},$switch:{$ref:"#/state/hasRepeater"},cases:{true:{tagName:"jx-accordion-item",attributes:{"data-section":"repeater"},$props:{label:"Repeating list",open:{$ref:"#/state/repeaterOpen"}},ontoggle:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setSection"},value:["repeater",{$ref:"event#/detail"}]}]},children:[{tagName:"div",attributes:{part:"section-body"},children:[{$prototype:"Array",items:{$ref:"#/state/repeaterFields"},key:{$ref:"$map/item/key"},map:{$description:"A bindable value as a first-class field row. Every position it serves is a single-line expression — a collection, a filter, a sort key, a `$switch` — so it draws one widget rather than dispatching over a widget type: the textarea and checkbox arms the lit version carried had no caller in either tab. The set dot clears the position outright and is disabled where the position is mandatory; the source chip opens the rung picker rather than cycling, so any rung the position permits is one action away (§6.6).",tagName:"jx-field",attributes:{part:"field","data-prop":"${$map.item.prop}"},$props:{label:{$ref:"$map/item/label"},span:!0},children:[{tagName:"div",attributes:{part:"value"},children:[{tagName:"jx-action-button",attributes:{part:"source","data-source":"${$map.item.source}"},$props:{size:"sm",quiet:!0,haspopup:"menu",label:"${$map.item.sourceHint}",disabled:{$ref:"$map/item/sourceLocked"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/pickSource"},value:[{$ref:"$map/item/key"},{$ref:"event#/currentTarget"}]}]},children:[{tagName:"span",textContent:"${$map.item.sourceLabel}"}]},{tagName:"div",attributes:{part:"widget",role:"none"},$switch:{$ref:"$map/item/kind"},cases:{control:{tagName:"div",attributes:{part:"control-host","data-field":"${$map.item.key}"}},text:{tagName:"jx-textfield",attributes:{part:"text"},$props:{size:"sm",label:{$ref:"$map/item/label"},value:{$ref:"$map/item/value"},placeholder:{$ref:"$map/item/placeholder"},mono:{$ref:"$map/item/mono"}},oninput:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setField"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}},select:{tagName:"jx-select",attributes:{part:"select"},$props:{size:"sm",label:{$ref:"$map/item/label"},value:{$ref:"$map/item/value"},options:{$ref:"$map/item/options"}},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setField"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}}}},{tagName:"jx-action-button",attributes:{part:"set"},$props:{size:"sm",quiet:!0,label:"${$map.item.clearTitle}",disabled:{$ref:"$map/item/clearLocked"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/clearField"},value:[{$ref:"$map/item/key"}]}]},children:[{tagName:"jx-dot",attributes:{part:"dot","data-state":"${$map.item.dotState}"},$props:{tone:{$ref:"$map/item/tone"}}}]}]}]}},{tagName:"div",attributes:{part:"template-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"#/state/hasTemplate"},cases:{true:{tagName:"jx-action-button",attributes:{part:"edit-template"},$props:{size:"sm",label:"Edit template"},onclick:{$ref:"#/state/editTemplate"},children:[{tagName:"span",textContent:"Edit template →"}]}}}]}]}}},{$description:"Condition. A `$switch` discriminant is a `$ref` and nothing else, so From data… is its only rung — de-escalating it would delete the key and demote the node — and the adapter says so by locking the row's source chip rather than by this document knowing what a `SwitchDef` is.",tagName:"div",attributes:{part:"condition-slot",role:"none",hidden:"${state.hasCondition ? null : ''}"},style:{display:"contents"},$switch:{$ref:"#/state/hasCondition"},cases:{true:{tagName:"jx-accordion-item",attributes:{"data-section":"condition"},$props:{label:"Condition",open:{$ref:"#/state/conditionOpen"}},ontoggle:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setSection"},value:["condition",{$ref:"event#/detail"}]}]},children:[{tagName:"div",attributes:{part:"section-body"},children:[{$prototype:"Array",items:{$ref:"#/state/conditionFields"},key:{$ref:"$map/item/key"},map:{$description:"A bindable value as a first-class field row. Every position it serves is a single-line expression — a collection, a filter, a sort key, a `$switch` — so it draws one widget rather than dispatching over a widget type: the textarea and checkbox arms the lit version carried had no caller in either tab. The set dot clears the position outright and is disabled where the position is mandatory; the source chip opens the rung picker rather than cycling, so any rung the position permits is one action away (§6.6).",tagName:"jx-field",attributes:{part:"field","data-prop":"${$map.item.prop}"},$props:{label:{$ref:"$map/item/label"},span:!0},children:[{tagName:"div",attributes:{part:"value"},children:[{tagName:"jx-action-button",attributes:{part:"source","data-source":"${$map.item.source}"},$props:{size:"sm",quiet:!0,haspopup:"menu",label:"${$map.item.sourceHint}",disabled:{$ref:"$map/item/sourceLocked"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/pickSource"},value:[{$ref:"$map/item/key"},{$ref:"event#/currentTarget"}]}]},children:[{tagName:"span",textContent:"${$map.item.sourceLabel}"}]},{tagName:"div",attributes:{part:"widget",role:"none"},$switch:{$ref:"$map/item/kind"},cases:{control:{tagName:"div",attributes:{part:"control-host","data-field":"${$map.item.key}"}},text:{tagName:"jx-textfield",attributes:{part:"text"},$props:{size:"sm",label:{$ref:"$map/item/label"},value:{$ref:"$map/item/value"},placeholder:{$ref:"$map/item/placeholder"},mono:{$ref:"$map/item/mono"}},oninput:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setField"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}},select:{tagName:"jx-select",attributes:{part:"select"},$props:{size:"sm",label:{$ref:"$map/item/label"},value:{$ref:"$map/item/value"},options:{$ref:"$map/item/options"}},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setField"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}}}},{tagName:"jx-action-button",attributes:{part:"set"},$props:{size:"sm",quiet:!0,label:"${$map.item.clearTitle}",disabled:{$ref:"$map/item/clearLocked"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/clearField"},value:[{$ref:"$map/item/key"}]}]},children:[{tagName:"jx-dot",attributes:{part:"dot","data-state":"${$map.item.dotState}"},$props:{tone:{$ref:"$map/item/tone"}}}]}]}]}},{tagName:"p",attributes:{part:"subhead"},textContent:"Cases"},{$prototype:"Array",items:{$ref:"#/state/cases"},key:{$ref:"$map/item/key"},map:{tagName:"jx-field",attributes:{part:"field","data-prop":"${$map.item.prop}"},$props:{label:"Case",span:!0},children:[{tagName:"div",attributes:{part:"case"},children:[{tagName:"jx-textfield",attributes:{part:"case-name"},$props:{size:"sm",label:"Case value",value:{$ref:"$map/item/name"}},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/renameCase"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}},{tagName:"jx-action-button",attributes:{part:"case-open"},$props:{size:"sm",quiet:!0,icon:"arrow-right",label:"${$map.item.openTitle}"},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/openCase"},value:[{$ref:"$map/item/key"}]}]}},{tagName:"jx-action-button",attributes:{part:"case-remove"},$props:{size:"sm",quiet:!0,icon:"trash",label:"${$map.item.removeTitle}"},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/removeCase"},value:[{$ref:"$map/item/key"}]}]}}]}]}},{tagName:"jx-action-button",attributes:{part:"add-case"},$props:{size:"sm",quiet:!0,icon:"plus",label:"Add case"},onclick:{$ref:"#/state/addCase"},children:[{tagName:"span",textContent:"Add case"}]}]}]}}},{$description:"Events. A repeater is not an element — it has no `on*` position to bind, and offering Add Event on one writes a handler onto a node the renderer never mounts — so the adapter withholds the whole section rather than this document asking what a repeater is.",tagName:"div",attributes:{part:"events-slot",role:"none",hidden:"${state.hasEvents ? null : ''}"},style:{display:"contents"},$switch:{$ref:"#/state/hasEvents"},cases:{true:{tagName:"jx-accordion-item",attributes:{"data-section":"events"},$props:{label:"Events",open:{$ref:"#/state/eventsOpen"}},ontoggle:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setSection"},value:["events",{$ref:"event#/detail"}]}]},children:[{tagName:"div",attributes:{part:"section-body"},children:[{tagName:"div",attributes:{part:"declared-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"#/state/hasDeclared"},cases:{true:{tagName:"div",attributes:{part:"declared"},children:[{tagName:"p",attributes:{part:"subhead"},textContent:"Declared Events"},{$prototype:"Array",items:{$ref:"#/state/declared"},key:{$ref:"$map/item/key"},map:{tagName:"div",attributes:{part:"declared-row",title:"${$map.item.title}"},children:[{tagName:"code",attributes:{part:"event-code"},textContent:"${$map.item.name}"},{tagName:"span",attributes:{part:"declared-from"},textContent:"${$map.item.source}"},{tagName:"span",attributes:{part:"event-type",hidden:"${$map.item.type ? null : ''}"},textContent:"${$map.item.type}"}]}},{tagName:"jx-divider"}]}}},{tagName:"div",attributes:{part:"bindings-head-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"#/state/hasBindings"},cases:{true:{tagName:"p",attributes:{part:"subhead"},textContent:"Event Bindings"}}},{$prototype:"Array",items:{$ref:"#/state/bindings"},key:{$ref:"$map/item/key"},map:{$description:"One `on*` key. The Mixed contract (§6.7) splits in two and this row shows both halves: which events exist, how each is produced, and its removal are properties of the BATCH — binding one handler to six buttons is a single decision, so those three controls write to every selected element in one transaction — while what a handler CONTAINS is the PRIMARY's, because six elements do not share one body and broadcasting a keystroke into six of them would destroy five. The dot says `mixed` when the selected elements disagree; the body below it stays the primary's.",tagName:"div",attributes:{part:"binding","data-event":"${$map.item.key}"},children:[{tagName:"div",attributes:{part:"binding-head"},children:[{$description:"The event NAME, and it is free-form rather than a list of ten. The menu offers what this element already binds plus the ten worth suggesting, and its last row asks for any other name through the one prompt dialog Studio has — so `ondragover`, `onpointerdown` and every custom event a component emits are bindable, which is exactly what §6.1 asks for and what the closed picker refused.",tagName:"jx-action-button",attributes:{part:"event-name"},$props:{size:"sm",haspopup:"menu",label:"${$map.item.nameTitle}"},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/pickEventName"},value:[{$ref:"$map/item/key"},{$ref:"event#/currentTarget"}]}]},children:[{tagName:"span",textContent:"${$map.item.name}"}]},{$description:'The same ladder every other bindable position in Studio offers, in the same four words. It used to read Inline code / Expression / Existing function — a fourth private dialect for the one ladder §6.6 collapses, so a user who learned "Formula" on a property row met "Expression" here and had no reason to think they were the same thing.',tagName:"jx-action-button",attributes:{part:"event-source","data-source":"${$map.item.source}"},$props:{size:"sm",quiet:!0,haspopup:"menu",label:"${$map.item.sourceHint}"},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/pickHandler"},value:[{$ref:"$map/item/key"},{$ref:"event#/currentTarget"}]}]},children:[{tagName:"span",textContent:"${$map.item.sourceLabel}"}]},{tagName:"jx-action-button",attributes:{part:"event-clear"},$props:{size:"sm",quiet:!0,icon:"trash",label:"${$map.item.clearTitle}"},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/clearEvent"},value:[{$ref:"$map/item/key"}]}]},children:[{tagName:"jx-dot",attributes:{part:"dot","data-state":"${$map.item.dotState}"},$props:{tone:{$ref:"$map/item/tone"}}}]}]},{tagName:"div",attributes:{part:"binding-body"},children:[{$description:"Statements or Code, for an inline function only. A structured body is a `JxStatement[]` and a code body is a string, so the toggle is a change of REPRESENTATION rather than of view — which is why it is drawn beside the body it rewrites rather than in the source ladder above it.",tagName:"div",attributes:{part:"toggle-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/showToggle"},cases:{true:{tagName:"div",attributes:{part:"body-toggle"},children:[{tagName:"jx-action-group",$props:{compact:!0,selects:"single",label:"Handler body"},children:[{tagName:"jx-action-button",attributes:{part:"body-statements"},$props:{size:"sm",label:"Statements",checked:{$ref:"$map/item/statementsChecked"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setBodyMode"},value:[{$ref:"$map/item/key"},"statements"]}]},children:[{tagName:"span",textContent:"Statements"}]},{tagName:"jx-action-button",attributes:{part:"body-code"},$props:{size:"sm",label:"Code",checked:{$ref:"$map/item/codeChecked"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setBodyMode"},value:[{$ref:"$map/item/key"},"code"]}]},children:[{tagName:"span",textContent:"Code"}]}]}]}}},{tagName:"div",attributes:{part:"body-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/body"},cases:{statements:{$description:"An island: `surfaces/statements.ts` mounts its own document in here, named by the handler it edits (`inspector/statements:<key>`), because a node with two structured handlers stamped one id on two elements and `resolveRegion` took the second.",tagName:"div",attributes:{part:"statements-host","data-event":"${$map.item.key}"}},code:{tagName:"div",attributes:{part:"body-row"},children:[{tagName:"jx-textfield",attributes:{part:"body-field"},$props:{size:"sm",multiline:!0,grows:!0,mono:!0,label:"Handler body",placeholder:"// handler body",value:{$ref:"$map/item/code"}},oninput:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setCode"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}},{tagName:"jx-action-button",attributes:{part:"open-editor"},$props:{size:"sm",quiet:!0,icon:"code",label:"${$map.item.openTitle}"},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/openEditor"},value:[{$ref:"$map/item/key"}]}]}}]},expression:{tagName:"div",attributes:{part:"body-row"},children:[{tagName:"div",attributes:{part:"expression-host","data-event":"${$map.item.key}"}},{tagName:"jx-action-button",attributes:{part:"open-editor"},$props:{size:"sm",quiet:!0,icon:"align-bottom",label:"${$map.item.openTitle}"},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/openEditor"},value:[{$ref:"$map/item/key"}]}]}}]},ref:{tagName:"jx-select",attributes:{part:"event-handler"},$props:{size:"sm",label:"Handler",value:{$ref:"$map/item/refValue"},options:{$ref:"$map/item/refOptions"}},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setHandlerRef"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}}}}]}]}},{tagName:"jx-action-button",attributes:{part:"add-event"},$props:{size:"sm",quiet:!0,icon:"plus",label:"Add Event"},onclick:{$ref:"#/state/addEvent"},children:[{tagName:"span",textContent:"Add Event"}]}]}]}}},{$description:"The custom element's outward contract: what a page may set from markup, what it may override, and what it may reach into. Three read-only lists — this is a report, not a form — drawn only on a component's root.",tagName:"div",attributes:{part:"observed-slot",role:"none",hidden:"${state.hasObserved ? null : ''}"},style:{display:"contents"},$switch:{$ref:"#/state/hasObserved"},cases:{true:{tagName:"jx-accordion-item",attributes:{"data-section":"observed"},$props:{label:"Observed Attributes",open:{$ref:"#/state/observedOpen"}},ontoggle:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setSection"},value:["observed",{$ref:"event#/detail"}]}]},children:[{tagName:"div",attributes:{part:"section-body"},children:[{tagName:"div",attributes:{part:"observed-empty-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"#/state/observedEmpty"},cases:{true:{tagName:"div",attributes:{part:"empty"},children:[{tagName:"p",attributes:{part:"empty-message"},textContent:'Attributes let a page set this component from markup. Name an "attribute" on a data entry to expose it here.'}]}}},{$prototype:"Array",items:{$ref:"#/state/observed"},key:{$ref:"$map/item/key"},map:{$description:"A read-only name and what it maps to. The Content tab had three near-identical hand-written flex rows for these; they are one shape now, and this is it.",tagName:"div",attributes:{part:"kv","data-prop":"${$map.item.prop}"},children:[{tagName:"span",attributes:{part:"kv-name"},textContent:"${$map.item.name}"},{tagName:"span",attributes:{part:"kv-detail",hidden:"${$map.item.detail ? null : ''}"},textContent:"${$map.item.detail}"},{tagName:"span",attributes:{part:"kv-tags",hidden:"${$map.item.tags ? null : ''}"},textContent:"${$map.item.tags}"},{tagName:"span",attributes:{part:"kv-value",hidden:"${$map.item.value ? null : ''}"},textContent:"${$map.item.value}"}]}}]}]}}},{tagName:"div",attributes:{part:"cssprops-slot",role:"none",hidden:"${state.hasCssProps ? null : ''}"},style:{display:"contents"},$switch:{$ref:"#/state/hasCssProps"},cases:{true:{tagName:"jx-accordion-item",attributes:{"data-section":"cssprops"},$props:{label:"CSS Properties",open:{$ref:"#/state/cssPropsOpen"}},ontoggle:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setSection"},value:["cssprops",{$ref:"event#/detail"}]}]},children:[{tagName:"div",attributes:{part:"section-body"},children:[{$prototype:"Array",items:{$ref:"#/state/cssProps"},key:{$ref:"$map/item/key"},map:{$description:"A read-only name and what it maps to. The Content tab had three near-identical hand-written flex rows for these; they are one shape now, and this is it.",tagName:"div",attributes:{part:"kv","data-prop":"${$map.item.prop}"},children:[{tagName:"span",attributes:{part:"kv-name"},textContent:"${$map.item.name}"},{tagName:"span",attributes:{part:"kv-detail",hidden:"${$map.item.detail ? null : ''}"},textContent:"${$map.item.detail}"},{tagName:"span",attributes:{part:"kv-tags",hidden:"${$map.item.tags ? null : ''}"},textContent:"${$map.item.tags}"},{tagName:"span",attributes:{part:"kv-value",hidden:"${$map.item.value ? null : ''}"},textContent:"${$map.item.value}"}]}}]}]}}},{tagName:"div",attributes:{part:"cssparts-slot",role:"none",hidden:"${state.hasCssParts ? null : ''}"},style:{display:"contents"},$switch:{$ref:"#/state/hasCssParts"},cases:{true:{tagName:"jx-accordion-item",attributes:{"data-section":"cssparts"},$props:{label:"CSS Parts",open:{$ref:"#/state/cssPartsOpen"}},ontoggle:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setSection"},value:["cssparts",{$ref:"event#/detail"}]}]},children:[{tagName:"div",attributes:{part:"section-body"},children:[{$prototype:"Array",items:{$ref:"#/state/cssParts"},key:{$ref:"$map/item/key"},map:{$description:"A read-only name and what it maps to. The Content tab had three near-identical hand-written flex rows for these; they are one shape now, and this is it.",tagName:"div",attributes:{part:"kv","data-prop":"${$map.item.prop}"},children:[{tagName:"span",attributes:{part:"kv-name"},textContent:"${$map.item.name}"},{tagName:"span",attributes:{part:"kv-detail",hidden:"${$map.item.detail ? null : ''}"},textContent:"${$map.item.detail}"},{tagName:"span",attributes:{part:"kv-tags",hidden:"${$map.item.tags ? null : ''}"},textContent:"${$map.item.tags}"},{tagName:"span",attributes:{part:"kv-value",hidden:"${$map.item.value ? null : ''}"},textContent:"${$map.item.value}"}]}}]}]}}}]}}}]};E("logic-panel",Ye);function xe(){return{bindings:[],cases:[],conditionFields:[],conditionOpen:!0,cssParts:[],cssPartsOpen:!1,cssProps:[],cssPropsOpen:!1,declared:[],emptyActions:[],emptyMessage:"",eventsOpen:!0,hasBindings:!1,hasCondition:!1,hasCssParts:!1,hasCssProps:!1,hasDeclared:!1,hasEmptyActions:!1,hasEvents:!1,hasObserved:!1,hasRepeater:!1,hasTemplate:!1,observed:[],observedEmpty:!1,observedOpen:!1,repeaterFields:[],repeaterOpen:!0,state:"empty"}}function Ke(e,t){Object.assign(e,t)}function tn(e){let t=n(e)?void 0:e.attributes?.part;return n(t)?t:""}function nn(e){let t=e?.$map,o=v(t)?t.item:void 0,r=v(o)?o.key:"";return n(r)?r:""}function Xe(e,t,o,r){let a=g({...xe(),...o});Ke(a,t);let i=null,s=!1;return e.replaceChildren(),R("logic-panel",a,e,{onNodeCreated:(l,d,c,C)=>{if(!(l instanceof HTMLElement))return;let y=tn(c);if(y!=="control-host"&&y!=="expression-host"&&y!=="statements-host")return;let p=nn(C);if(y==="control-host")r.controlSlot(p,l);else if(y==="expression-host")r.expressionSlot(p,l);else r.statementsSlot(p,l)}}).then((l)=>{if(s){l.dispose();return}i=l}),{connected:()=>{let l=i?.root;return l instanceof HTMLElement?l.isConnected:!s},dispose(){s=!0,i?.dispose(),i=null},update(l){Ke(a,l)}}}var et=["onclick","oninput","onchange","onsubmit","onkeydown","onkeyup","onfocus","onblur","onmouseenter","onmouseleave"],tt=/^on[a-z][\da-z-]*$/i,ke=_T("eventHandler");function on(e,t){if(e==="function")return{$prototype:"Function",body:"",parameters:[]};if(e==="expression")return{$expression:{operator:"=",target:null}};let[o]=t;return o?{$ref:`#/state/${o[0]}`}:{$ref:""}}function nt(e,t,o){Z(h.value,(r)=>{for(let a of e)Qe(r,a,t,o)})}function rn(e,t,o){if(t.length<2)return 0;let r=t.map((a)=>{let i=oe(e,a);return i?pg(i,o)??null:null});return Jm(r).mixed?t.length:0}var N={bindings:new Map,cases:new Set,fields:new Map,functionDefs:[],selection:null,targets:[]};function Te(e,t){return t.some((o)=>o!==e)}function ot(e,t){let o=Wo[e];return Te(e,t)?`Value source: ${o} — click to change`:`Value source: ${o} (no other source available here)`}function an(e){return[...e.stateDefs.map((t)=>({label:t,value:`#/state/${t}`})),...e.extraSignals??[]]}function sn(e,t,o){let r=o.value!==void 0&&o.value!=="",a=o.mode==="literal"||o.mode==="function";return{clearLocked:!o.onClear,clearTitle:o.onClear?`Clear ${o.label}`:`${o.label} cannot be cleared`,dotState:r?"set":"unset",key:e,kind:o.mode==="expression"?"control":o.mode==="ref"?"select":"text",label:o.label,mono:o.mode==="template",options:o.mode==="ref"?an(o):[],placeholder:o.mode==="template"?"${state.…}":"",prop:t,source:o.mode,sourceHint:ot(o.mode,o.offered),sourceLabel:Wo[o.mode],sourceLocked:!Te(o.mode,o.offered),tone:"",value:a?String(o.value??""):o.mode==="ref"?Pe(o.value)?o.value.$ref:"":String(o.value??"")}}function we(e,t,o,r){let a=Od(r.caps),i=zu(t,r.value),s={...r,mode:i,offered:a};if(i==="expression"){let l=v(r.value)?r.value.$expression:void 0;s.paint=(d)=>Oc(d,l,(c)=>r.onChange({$expression:c}),{allowEventRef:!1,stateDefs:[...r.stateDefs],stateEntries:null})}return e.set(t,s),sn(t,o,s)}function rt(){let e=new Map,t=new Map,o=new Set,r=xe(),a=h.value,i=Oe(a?.session.selection),s=a?.doc.document,l=(f,k=[])=>(N={bindings:t,cases:o,fields:e,functionDefs:[],selection:null,targets:[]},r.emptyActions=k,r.emptyMessage=f,r.hasEmptyActions=k.length>0,r);if(!a||!s)return l("Open a page to inspect and wire what you click.",[{id:"open-page",label:"Open a page…"}]);if(!i)return l(mm("wire it up"));let d=oe(s,i);if(!d)return l(vb());r.state="ready";let c=s.state||{},C=Object.entries(c).filter(([,f])=>v(f)&&(f.$prototype==="Function"||Boolean(f.$handler))),y=a.session.selection.length>0?a.session.selection:[i];N={bindings:t,cases:o,fields:e,functionDefs:C,selection:i,targets:y};let p=d.$prototype==="Array",m=Boolean(d.$switch),T=i.length===0,w=rS({document:s,mode:a.doc.mode,selection:a.session.selection,ui:a.session.ui}),L=gm(s),A=i.join("/"),j=(f)=>{let k=Pe(f)?f.$ref:null;if(!k)return;return zE(c[k.startsWith("#/state/")?k.slice(8):k])||void 0};if(p){r.hasRepeater=!0,r.repeaterOpen=zl("__repeater",!0);let f=(b)=>(S)=>Z(h.value,(P)=>Qe(P,i,b,S||void 0)),k=(b,S)=>we(e,`prop|${A}|${b}`,b,{caps:b==="filter"?"repeaterFilter":"repeaterSort",extraSignals:null,label:S,literalDefault:j(d[b]),onChange:f(b),onClear:()=>Z(h.value,(P)=>Qe(P,i,b)),stateDefs:L,value:d[b]});r.repeaterFields=[we(e,`prop|${A}|items`,"items",{caps:"repeaterItems",extraSignals:null,label:"Items",literalDefault:j(d.items),onChange:(b)=>Z(h.value,(S)=>Qe(S,i,"items",b)),stateDefs:L,value:d.items}),k("filter","Filter"),k("sort","Sort")],r.hasTemplate=Boolean(d.map)}if(m)r.hasCondition=!0,r.conditionOpen=zl("__condition",!0),r.conditionFields=[we(e,`prop|${A}|$switch`,"$switch",{caps:"switchDiscriminant",extraSignals:BE(i),label:"Expression",literalDefault:j(d.$switch),onChange:(f)=>Z(h.value,(k)=>Qe(k,i,"$switch",f)),stateDefs:L,value:d.$switch})],r.cases=Object.keys(d.cases||{}).map((f)=>(o.add(f),{key:f,name:f,openTitle:`Edit case "${f}"`,prop:`case:${f}`,removeTitle:`Remove case "${f}"`}));if(!p){if(r.hasEvents=!0,r.eventsOpen=zl("__events",!0),w){let k=[];for(let[b,S]of Object.entries(c))if(Ha(S)&&Array.isArray(S.emits))for(let[P,M]of S.emits.entries())k.push({key:`${b}:${M.name||P}`,name:M.name||"(unnamed)",source:`← ${b}`,title:M.description||"",type:v(M.type)&&n(M.type.text)?M.type.text:""});r.declared=k,r.hasDeclared=k.length>0}let f=Object.keys(d).filter((k)=>k.startsWith("on")).map((k)=>[k,pg(d,k)]).filter((k)=>k[1]!==void 0);r.bindings=f.map(([k,b])=>ln(t,k,b,c)),r.hasBindings=f.length>0}if(w&&T){let f=[];for(let[S,P]of Object.entries(c)){if(!v(P)||!P.attribute)continue;f.push({detail:`→ ${S}`,key:S,name:String(P.attribute),prop:`attribute:${S}`,tags:P.reflects?"reflects":"",value:P.type?String(P.type):""})}r.hasObserved=!0,r.observedOpen=zl("__observed",!1),r.observedEmpty=f.length===0,r.observed=f;let k=Object.entries(d.style||{}).filter(([S])=>S.startsWith("--"));r.hasCssProps=k.length>0,r.cssPropsOpen=zl("__cssprops",!1),r.cssProps=k.map(([S,P])=>({detail:"",key:S,name:S,prop:`cssprop:${S}`,tags:"",value:String(P)}));let b=qE(s);r.hasCssParts=b.length>0,r.cssPartsOpen=zl("__cssparts",!1),r.cssParts=b.map((S)=>({detail:`<${S.tag}>`,key:`${S.tag}:${S.name}`,name:S.name,prop:`csspart:${S.name}`,tags:"",value:""}))}return r}function ln(e,t,o,r){let{functionDefs:a,selection:i,targets:s}=N,l=h.value,d=Ha(o)?o:null,c=lc(o)?o.$expression:null,C=Bu(o),y=d&&Array.isArray(d.body)?d.body:null,p=y!==null,m=d?p?"statements":"code":c?"expression":"ref",T=rn(l.doc.document,s,t)>0,w={body:m,fn:d,key:t,mode:C,value:o};if(d&&y&&i)w.mountStatements=(L)=>oS(L,y,(A)=>Z(h.value,(j)=>Qe(j,i,t,{...d,body:A})),{allowEventRef:!0,emits:d.emits??[],region:KM(t),stateDefs:Object.keys(r),stateEntries:r});if(c&&i){let L=bb(l,`event:${JSON.stringify(i)}:${t}`,c,i,()=>wn("rightPanel")),A=(f)=>Z(h.value,(k)=>Qe(k,i,t,{$expression:f})),j=(f,k)=>Z(h.value,(b)=>Xd(b,f,k));w.paint=(f)=>Oc(f,c,A,{allowEventRef:!0,onInsertDef:j,preview:L,stateDefs:Object.keys(r),stateEntries:r})}return e.set(t,w),{body:m,clearTitle:T?`${s.length} selected elements bind ${t} differently — clearing removes it from all of them`:`Clear ${t}`,code:d&&!p&&n(d.body)?d.body:"",codeChecked:m==="code"?"true":"false",dotState:T?"mixed":"set",key:t,name:t,nameTitle:`Event: ${t} — click to change`,openTitle:m==="expression"?"Open in formula workspace":"Open in editor",refOptions:[{label:"— none —",value:""},...a.map(([L])=>({label:L,value:`#/state/${L}`}))],refValue:Pe(o)?o.$ref:"",showToggle:Boolean(d),source:C,sourceHint:ot(C,ke),sourceLabel:Wo[C],statementsChecked:m==="statements"?"true":"false",tone:T?"warning":""}}var z=null,K=null,re=new Map,ie=new Map,se=new Map,dn=new Map([["condition","__condition"],["cssparts","__cssparts"],["cssprops","__cssprops"],["events","__events"],["observed","__observed"],["repeater","__repeater"]]);function Ne(e){if(K?.stop(),K=null,z?.dispose(),z=null,re.clear(),ie.clear(),se.clear(),!e)return;z=Xe(e,rt(),{addCase:()=>{let{selection:t}=N;if(t)Z(h.value,(o)=>SM(o,t,`case${N.cases.size+1}`))},addEvent:yn,clearEvent:(t)=>nt(N.targets,t),clearField:(t)=>N.fields.get(t)?.onClear?.(),editTemplate:()=>{let{selection:t}=N;if(t&&h.value)h.value.session.selection=[[...t,"map"]]},openCase:(t)=>{let{selection:o}=N;if(o&&h.value)h.value.session.selection=[[...o,"cases",t]]},openEditor:(t)=>{let{selection:o}=N,r=N.bindings.get(t);if(o&&r)xp({editing:{eventKey:t,path:o,type:"event"},surface:r.body==="expression"?"formula":"function"})},pickEventName:hn,pickHandler:fn,pickSource:mn,runEmptyAction:(t)=>{if(t==="open-page")Mc().run()},removeCase:(t)=>{let{selection:o}=N;if(o)Z(h.value,(r)=>CM(r,o,t))},renameCase:(t,o)=>{let{selection:r}=N;if(r&&o&&o!==t)Z(h.value,(a)=>kM(a,r,t,o))},setBodyMode:gn,setCode:(t,o)=>{let{selection:r}=N,a=N.bindings.get(t);if(r&&a?.fn)Z(h.value,(i)=>Qe(i,r,t,{$prototype:"Function",body:o,parameters:a.fn?.parameters||[]}))},setField:(t,o)=>{let r=N.fields.get(t);if(!r)return;if(r.mode==="ref"){r.onChange(o?{$ref:o}:void 0);return}r.onChange(o)},setHandlerRef:(t,o)=>{let{selection:r}=N;if(!r)return;Z(h.value,(a)=>Qe(a,r,t,o?{$ref:o}:void 0))},setSection:(t,o)=>{let r=dn.get(t);if(r)gw(r,o)}},{controlSlot:(t,o)=>{re.set(t,o),N.fields.get(t)?.paint?.(o)},expressionSlot:(t,o)=>{ie.set(t,o),N.bindings.get(t)?.paint?.(o)},statementsSlot:(t,o)=>{se.set(t,o),N.bindings.get(t)?.mountStatements?.(o)}}),un()}var Se=!1;function cn(){if(Se||!z)return;Se=!0,queueMicrotask(()=>{if(Se=!1,!z)return;z.update(rt()),queueMicrotask(pn)})}function pn(){for(let[e,t]of re){let o=N.fields.get(e);if(!o||!t.isConnected){re.delete(e);continue}o.paint?.(t)}for(let[e,t]of ie){let o=N.bindings.get(e);if(!o||!t.isConnected){ie.delete(e);continue}o.paint?.(t)}for(let[e,t]of se){let o=N.bindings.get(e);if(!o||!t.isConnected){se.delete(e);continue}o.mountStatements?.(t)}}function un(){K?.stop(),K=me(),K.run(()=>{te(()=>{let e=h.value;if(e)e.doc.document,e.doc.mode,e.session.selection.map((t)=>t.join("/")).join("|"),e.session.ui.inspectorSections;cn()})})}function mn(e,t){let o=N.fields.get(e);if(!o||!Te(o.mode,o.offered))return;zt({label:"Value source",opener:t,region:"value-source",rows:o.offered.map((r)=>({checked:r===o.mode?"true":"false",destructive:!1,disabled:!1,dividerAbove:!1,id:r,title:Wo[r]})),run:(r)=>{let a=o.offered.find((i)=>i===r);if(a===void 0||a===o.mode)return;if(o.mode==="ref"&&o.literalDefault!==void 0&&!kp(e,"literal"))Cp(e,"literal",o.literalDefault);o.onChange(Md(e,o.mode,a,Ce(o.value),Wu(a,{extraSignals:o.extraSignals,literalDefault:o.literalDefault,stateDefs:o.stateDefs})))}})}function fn(e,t){let o=N.bindings.get(e);if(!o)return;zt({label:"Value source",opener:t,region:"value-source",rows:ke.map((r)=>({checked:r===o.mode?"true":"false",destructive:!1,disabled:!1,dividerAbove:!1,id:r,title:Wo[r]})),run:(r)=>{let a=ke.find((s)=>s===r);if(a===void 0||a===o.mode)return;let i=on(a,N.functionDefs);nt(N.targets,e,Md(`event|${N.selection?.join("/")??""}|${e}`,o.mode,a,o.value,i)??i)}})}function hn(e,t){let o=[...N.bindings.keys()],r=[...new Set([...o,...et])];zt({label:"Event name",opener:t,region:"event-name",rows:[...r.map((a)=>({checked:a===e?"true":"false",destructive:!1,disabled:!1,dividerAbove:!1,id:a,title:a})),{destructive:!1,disabled:!1,dividerAbove:!0,id:"__custom__",run:()=>{Fn("Event name",{message:"Any DOM or custom event this element emits — onpointerdown, ondragover.",placeholder:"onpointerdown",validate:(a)=>tt.test(a.trim())?"":"An event key starts with “on” and continues in letters, digits or hyphens.",value:e}).then((a)=>{if(a)Ze(e,a.trim())})},title:"Other name…"}],run:(a)=>Ze(e,a)})}function Ze(e,t){if(!t||t===e||!tt.test(t))return;Z(h.value,(o)=>{for(let r of N.targets){let a=oe(o.doc.document,r),i=a?pg(a,e):void 0;if(i===void 0)continue;Qe(o,r,e),Qe(o,r,t,i)}})}function gn(e,t){let{selection:o}=N,a=N.bindings.get(e)?.fn;if(!o||!a)return;let i=Array.isArray(a.body);if(t==="statements"===i)return;Z(h.value,(s)=>Qe(s,o,e,{...a,body:t==="statements"?[]:""}))}function yn(){let{functionDefs:e,selection:t}=N,o=h.value;if(!t||!o)return;let r=oe(o.doc.document,t),a="onclick";for(let i of et)if(!r?.[i]){a=i;break}Z(h.value,(i)=>Qe(i,t,a,e.length>0?{$ref:`#/state/${e[0][0]}`}:{$prototype:"Function",body:"",parameters:[]}))}var $n=new Set(["input","select","textarea"]);function bn(e){let t=it(e.tagName).toLowerCase(),o=[];if(Fa(e))o.push(":popover-open","::backdrop",":popover-open::backdrop");if(t==="dialog")o.push("[open]",":modal","::backdrop");if(t==="details")o.push("[open]");if($n.has(t))o.push(":checked",":invalid",":required",":user-invalid");if(t==="a")o.push(":visited",":target");return o}function je(e){if(!_(e))return[...NI];return[...new Set([...NI,...bn(e)])]}function at(e,t,o,r=null){if(o===null||t.length===0)return{};let a=new Map,i=(s,l)=>{for(let[d,c]of Object.entries(s??{}))if(c===void 0||n(c)||Y(c))a.set(d,{donor:l,value:c??""})};if(r){i(Di(e,r),null);for(let s of t){if(s===o)break;i(Di(Di(e,`@${s}`),r),s)}return Object.fromEntries(a)}i(e,null);for(let s of t){if(s===o)break;i(Di(e,`@${s}`),s)}return Object.fromEntries(a)}var vn=new Set(["color","cursor","fontFamily","fontSize","fontStyle","fontVariant","fontWeight","letterSpacing","lineHeight","listStyleType","pointerEvents","textAlign","textShadow","textTransform","visibility","wordBreak","wordSpacing"]);function st(e,t,o){for(let[r,a]of Object.entries(t??{}))if(vn.has(r)&&(n(a)||Y(a)))e.set(r,{donor:o,value:a})}function lt(e,t){let o=e;for(let r of t)o=Di(o,r);return o}function dt(e,t,o){let r=t.split(" ").filter(Boolean),a=o?Di(e,`@${o}`):void 0,i=new Map,s=[[],...r[0]==="body"?[]:[["body"]]];for(let l=1;l<r.length;l+=1)s.push(r.slice(0,l));for(let l of s){let d=l.at(-1)??"body";if(st(i,lt(e,l),d),a)st(i,lt(a,l),d)}return Object.fromEntries(i)}var ct={$schema:"https://jxsuite.com/schema/v1",$id:"StudioTargetLine",$description:"The Style tab's edit target, as one sentence (§6.2): element · breakpoint · scheme variant · selector, then the chip that states how wide the blast radius is. Every word of the sentence is a control, because a sentence you cannot act on is a caption and the panel already had one of those. The breakpoint and scheme segments ROUTE to where those axes are defined rather than offering a third list to pick from — the Style tab owns the selector axis and nothing else — so the selector is the one segment with a menu, and that menu is the kit's. The project-scope warning band is not decoration: entering Stylebook converts every edit from `this element` to `every element of this tag`, and the band states that before the first keystroke.",tagName:"div",attributes:{part:"target"},style:{$description:"The `.target-line` / `.tl-*` rules the line used to take from `styles/inspector.css`, brought here and re-valued onto the kit's own layer. Every segment is a button with the chrome taken off: the row must read as a sentence, not as a toolbar, which is exactly what the three widgets it replaced failed to do.",display:"block",fontSize:"var(--jx-text-xs)",'& [part="line"]':{display:"flex",alignItems:"center",gap:"var(--jx-space-2)",padding:"5px var(--jx-space-3)",borderBottom:"1px solid var(--jx-border)",lineHeight:"1.4"},'& [part="glyph"]':{flexShrink:"0",color:"var(--jx-accent)"},'& [part="segments"]':{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"1px",minWidth:"0",flex:"1"},'& [part="separator"]':{color:"var(--jx-fg-dim)",opacity:"0.6"},'& [part="segment"]':{padding:"1px 3px",border:"none",borderRadius:"var(--jx-radius-sm)",background:"none",color:"var(--jx-fg)",font:"inherit",fontFamily:"var(--jx-font-mono)"},'& button[part="segment"]':{cursor:"pointer",":hover":{background:"var(--jx-hover-bg)",color:"var(--jx-accent)"},":focus-visible":{outline:"var(--jx-focus-ring)",outlineOffset:"-1px"}},'& [data-seg="element"]':{color:"var(--jx-tag)"},'& [data-seg="media"], & [data-seg="scheme"]':{color:"var(--jx-fg-dim)"},'& [data-seg="selector"]':{color:"var(--jx-signal)"},'& [part="scope"]':{$description:"Element scope is ambient and reads as ambient; the two tag-wide scopes are the ones a reader has to notice BEFORE typing, so they carry weight.",flexShrink:"0",padding:"1px var(--jx-space-3)",border:"1px solid var(--jx-border)",borderRadius:"999px",color:"var(--jx-fg-dim)",whiteSpace:"nowrap"},'& [part="scope"][data-scope="document"]':{borderColor:"var(--jx-accent-50)",color:"var(--jx-accent)"},'& [part="scope"][data-scope="project"]':{borderColor:"var(--jx-warning)",color:"var(--jx-warning)"},'& [part="warning"]':{padding:"var(--jx-space-3)",borderBottom:"1px solid var(--jx-border)",borderLeft:"2px solid var(--jx-warning)",background:"var(--jx-bg-panel)"},'& [part="warning-text"]':{margin:"0",color:"var(--jx-warning)"},'& [part="warning-action"]':{marginTop:"var(--jx-space-2)",padding:"0",border:"none",background:"none",color:"var(--jx-accent)",font:"inherit",cursor:"pointer",textDecoration:"underline",":focus-visible":{outline:"var(--jx-focus-ring)",outlineOffset:"1px"}},'& [part="affected"]':{margin:"var(--jx-space-2) 0 0",padding:"0",maxHeight:"140px",overflowY:"auto",listStyle:"none"},'& [part="affected-row"]':{display:"flex",justifyContent:"space-between",gap:"var(--jx-space-4)",padding:"1px 0",color:"var(--jx-fg-dim)"},'& [part="affected-path"]':{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",fontFamily:"var(--jx-font-mono)"},'& [part="affected-count"]':{flexShrink:"0",fontFamily:"var(--jx-font-mono)"},'& [part="affected-empty"]':{margin:"var(--jx-space-2) 0 0",color:"var(--jx-fg-dim)"}},children:[{tagName:"div",attributes:{part:"line","data-jx-region":"${state.region}"},children:[{tagName:"span",attributes:{part:"glyph","aria-hidden":"true"},textContent:"⌖"},{tagName:"div",attributes:{part:"segments"},children:[{$prototype:"Array",items:{$ref:"#/state/segments"},key:{$ref:"$map/item/key"},map:{tagName:"span",attributes:{part:"segment-slot",role:"none"},style:{display:"contents"},children:[{tagName:"span",attributes:{part:"separator-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/leading"},cases:{false:{tagName:"span",attributes:{part:"separator","aria-hidden":"true"},textContent:"·"}}},{tagName:"span",attributes:{part:"control-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/control"},cases:{button:{tagName:"button",attributes:{part:"segment",type:"button","data-seg":"${$map.item.key}",title:"${$map.item.title}"},textContent:"${$map.item.label}",onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/activate"},value:[{$ref:"$map/item/key"}]}]}},readout:{tagName:"span",attributes:{part:"segment","data-seg":"${$map.item.key}",title:"${$map.item.title}"},textContent:"${$map.item.label}"}}}]}},{tagName:"span",attributes:{part:"separator","aria-hidden":"true"},textContent:"·"},{tagName:"button",attributes:{part:"segment",type:"button","data-seg":"selector","aria-haspopup":"menu",title:"The state or nested rule these edits land in — click to choose another"},textContent:"${state.selectorLabel} ⌄",onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/openSelector"},value:[]}]}}]},{tagName:"span",attributes:{part:"scope","data-scope":"${state.scopeKind}",title:"${state.scopeTitle}"},textContent:"${state.scopeLabel}"}]},{tagName:"div",attributes:{part:"warning-slot",role:"none"},$switch:{$ref:"#/state/warn"},cases:{true:{tagName:"div",attributes:{part:"warning",role:"status"},children:[{tagName:"p",attributes:{part:"warning-text"},textContent:"${state.warningText}"},{tagName:"span",attributes:{part:"warning-action-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"#/state/hasToggle"},cases:{true:{tagName:"button",attributes:{part:"warning-action",type:"button","aria-expanded":"${state.showAffected ? 'true' : 'false'}"},textContent:"${state.toggleLabel}",onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/toggleAffected"},value:[]}]}}}},{tagName:"div",attributes:{part:"affected-slot",role:"none"},$switch:{$ref:"#/state/affectedState"},cases:{list:{tagName:"ul",attributes:{part:"affected"},children:[{$prototype:"Array",items:{$ref:"#/state/affectedFiles"},key:{$ref:"$map/item/path"},map:{tagName:"li",attributes:{part:"affected-row"},children:[{tagName:"span",attributes:{part:"affected-path"},textContent:"${$map.item.path}"},{tagName:"span",attributes:{part:"affected-count"},textContent:"${$map.item.count}"}]}}]},empty:{tagName:"p",attributes:{part:"affected-empty"},textContent:"No file list — the project could not be searched."}}}]}}}]};E("target-line",ct);var Sn="inspector/target",kn="style-selector",Ae="base rule",pt=null,de=null,Ee=null,ut=null,X=null;function le(){let e=X;X=null,e?.close()}function mt(){return pt??=g({activate:(e)=>{de?.segments.find((t)=>t.key===e)?.onActivate?.()},affectedFiles:[],affectedState:"hidden",hasToggle:!1,openSelector:()=>{Le()},region:Sn,scopeKind:"element",scopeLabel:"",scopeTitle:"",segments:[],selectorLabel:Ae,showAffected:!1,toggleAffected:()=>{de?.scope.onToggleAffected?.()},toggleLabel:"Show affected",warn:!1,warningText:""}),pt}function ft(e){let t=e instanceof HTMLElement?e:null;if(t===Ee)return;le();let o=ut;if(Ee=t,ut=t?R("target-line",mt(),t):null,o)o.then((r)=>{r.dispose()})}function ht(e){de=e;let t=mt(),o=[...e.scope.affectedFiles??[]],r=e.scope.showAffected===!0;t.segments=e.segments.map((a,i)=>({control:a.onActivate?"button":"readout",key:a.key,label:a.label,leading:i===0,title:a.title})),t.selectorLabel=e.selector.value??Ae,t.scopeKind=e.scope.kind,t.scopeLabel=e.scope.label,t.scopeTitle=e.scope.kind==="element"?"These edits apply to the selected element only":`These edits apply to ${e.scope.label}`,t.warn=e.scope.kind==="project",t.warningText=`Every edit here restyles ${e.scope.label} — ${e.scope.affected??"unknown"}.`,t.hasToggle=Boolean(e.scope.onToggleAffected),t.toggleLabel=r?"Hide affected":"Show affected",t.showAffected=r,t.affectedFiles=o,t.affectedState=r?o.length>0?"list":"empty":"hidden"}var Cn="__base__",Tn="__add_custom__";function Le(){let e=Ee?.querySelector('[data-seg="selector"]')??null;if(!e?.isConnected)throw RangeError(`command "style.openSelectorMenu" needs the Inspector's Style tab rendered; its selector menu is not in the document`);let t=de?.selector;if(!t)return;le();let o=(a)=>{le(),t.onSelect(a)},r=[{destructive:!1,disabled:!1,dividerAbove:!1,id:Cn,run:()=>{o(null)},title:Ae},...t.options.map((a,i)=>({checked:t.declared.has(a)?"true":"false",destructive:!1,disabled:!1,dividerAbove:i===0,id:a,run:()=>{o(a)},title:a})),{destructive:!1,disabled:!1,dividerAbove:!0,id:Tn,run:()=>{le(),t.onAddCustom()},title:"+ Add custom…"}];X=zt({label:"Edit target",onClosed:(a)=>{if(X===a)X=null},opener:e,region:kn,rows:r})}var V={$schema:"../../packages/schema/schema.json",$id:"css-meta",title:"CSS Property Metadata",description:"Section assignment, order, and input inference metadata for the style sidebar.",$sections:[{key:"layout",label:"Layout"},{key:"size",label:"Size",$layout:"grid"},{key:"spacing",label:"Spacing"},{key:"positioning",label:"Positioning"},{key:"typography",label:"Typography"},{key:"background",label:"Background"},{key:"border",label:"Border"},{key:"effects",label:"Effects"},{key:"other",label:"Other"}],$defs:{display:{$section:"layout",$order:10,type:"string",$input:"button-group",$buttonValues:["flex","grid","block","inline","none"],$icons:{flex:"columns",grid:"grid-four",block:"rectangle",inline:"text-t",none:"eye-slash"},enum:["block","inline","inline-block","flex","inline-flex","grid","inline-grid","contents","none","flow-root","table","list-item"]},height:{$section:"size",$order:10,type:"string",$units:["px","rem","em","%","vh","svh","dvh"],$keywords:["auto","min-content","max-content","fit-content"]},width:{$section:"size",$order:11,type:"string",$units:["px","rem","em","%","vw","svw"],$keywords:["auto","min-content","max-content","fit-content"]},minHeight:{$section:"size",$order:20,type:"string",$units:["px","rem","em","%","vh"],$keywords:["auto","min-content","max-content","fit-content"]},minWidth:{$section:"size",$order:21,type:"string",$units:["px","rem","em","%","vw"],$keywords:["auto","min-content","max-content","fit-content"]},maxHeight:{$section:"size",$order:30,type:"string",$units:["px","rem","em","%","vh"],$keywords:["none","min-content","max-content","fit-content"]},maxWidth:{$section:"size",$order:31,type:"string",$units:["px","rem","em","%","vw"],$keywords:["none","min-content","max-content","fit-content"]},aspectRatio:{$section:"size",$order:40,type:"string",examples:["auto","1/1","4/3","16/9","2/1"]},objectFit:{$section:"size",$order:41,type:"string",enum:["fill","contain","cover","none","scale-down"]},overflow:{$section:"size",$order:50,$span:2,type:"string",enum:["visible","hidden","scroll","auto","clip"]},overflowX:{$section:"size",$order:51,type:"string",enum:["visible","hidden","scroll","auto","clip"]},overflowY:{$section:"size",$order:52,type:"string",enum:["visible","hidden","scroll","auto","clip"]},boxSizing:{$section:"size",$order:60,$span:2,type:"string",enum:["content-box","border-box"]},flexDirection:{$section:"layout",$order:70,type:"string",$input:"button-group",$icons:{row:"arrow-right","row-reverse":"arrow-left",column:"arrow-down","column-reverse":"arrow-up"},enum:["row","row-reverse","column","column-reverse"],$show:[{prop:"display",values:["flex","inline-flex"]}]},flexWrap:{$section:"layout",$order:71,type:"string",$input:"button-group",$buttonValues:["nowrap","wrap"],$icons:{wrap:"arrow-u-down-left"},enum:["nowrap","wrap","wrap-reverse"],$show:[{prop:"display",values:["flex","inline-flex"]}]},justifyContent:{$section:"layout",$order:72,type:"string",$input:"button-group",$buttonValues:["flex-start","flex-end","center","space-between","space-around","space-evenly"],$icons:{"flex-start":"align-left","flex-end":"align-right",center:"align-center-horizontal","space-between":"arrows-out-line-horizontal","space-around":"arrows-in-line-horizontal","space-evenly":"arrows-horizontal"},enum:["flex-start","flex-end","center","space-between","space-around","space-evenly","start","end","normal"],$show:[{prop:"display",values:["flex","inline-flex","grid","inline-grid"]}]},alignItems:{$section:"layout",$order:73,type:"string",$input:"button-group",$buttonValues:["stretch","flex-start","flex-end","center","baseline"],$icons:{stretch:"arrows-out-line-vertical","flex-start":"align-top","flex-end":"align-bottom",center:"align-center-vertical",baseline:"text-a-underline"},enum:["stretch","flex-start","flex-end","center","baseline","start","end","normal"],$show:[{prop:"display",values:["flex","inline-flex","grid","inline-grid"]}]},alignContent:{$section:"layout",$order:74,type:"string",$input:"button-group",$buttonValues:["normal","flex-start","flex-end","center","space-between","stretch"],$icons:{"flex-start":"align-top","flex-end":"align-bottom",center:"align-center-vertical","space-between":"arrows-vertical",stretch:"arrows-out-line-vertical"},enum:["normal","flex-start","flex-end","center","space-between","space-around","stretch","start","end"],$show:[{prop:"display",values:["flex","inline-flex","grid","inline-grid"]}]},gap:{$section:"layout",$order:75,type:"string",$units:["px","rem","em","%"],$show:[{prop:"display",values:["flex","inline-flex","grid","inline-grid"]}]},rowGap:{$section:"layout",$order:76,type:"string",$units:["px","rem","em","%"],$show:[{prop:"display",values:["flex","inline-flex","grid","inline-grid"]}]},columnGap:{$section:"layout",$order:77,type:"string",$units:["px","rem","em","%"],$show:[{prop:"display",values:["flex","inline-flex","grid","inline-grid"]}]},flexGrow:{$section:"layout",$order:80,type:"string",$units:[],$show:[{prop:"display",values:["flex","inline-flex"]}]},flexShrink:{$section:"layout",$order:81,type:"string",$units:[],$show:[{prop:"display",values:["flex","inline-flex"]}]},flexBasis:{$section:"layout",$order:82,type:"string",$units:["px","rem","em","%"],$keywords:["auto","content"],$show:[{prop:"display",values:["flex","inline-flex"]}]},alignSelf:{$section:"layout",$order:83,type:"string",$input:"button-group",$buttonValues:["auto","flex-start","flex-end","center","baseline","stretch"],$icons:{stretch:"arrows-out-line-vertical","flex-start":"align-top","flex-end":"align-bottom",center:"align-center-vertical",baseline:"text-a-underline"},enum:["auto","flex-start","flex-end","center","baseline","stretch","start","end"],$show:[{prop:"display",values:["flex","inline-flex","grid","inline-grid"]}]},order:{$section:"layout",$order:84,type:"string",$units:[],$show:[{prop:"display",values:["flex","inline-flex","grid","inline-grid"]}]},gridTemplateColumns:{$section:"layout",$order:70,type:"string",examples:["repeat(2,1fr)","repeat(3,1fr)","repeat(4,1fr)","1fr 1fr","auto 1fr","auto"],$show:[{prop:"display",values:["grid","inline-grid"]}]},gridTemplateRows:{$section:"layout",$order:71,type:"string",examples:["repeat(2,1fr)","repeat(3,1fr)","auto 1fr","1fr 1fr"],$show:[{prop:"display",values:["grid","inline-grid"]}]},gridTemplateAreas:{$section:"layout",$order:72,type:"string",$show:[{prop:"display",values:["grid","inline-grid"]}]},justifyItems:{$section:"layout",$order:76,type:"string",enum:["start","end","center","stretch","normal"],$show:[{prop:"display",values:["grid","inline-grid"]}]},gridColumn:{$section:"layout",$order:80,type:"string",$show:[{prop:"display",values:["grid","inline-grid"]}]},gridRow:{$section:"layout",$order:81,type:"string",$show:[{prop:"display",values:["grid","inline-grid"]}]},justifySelf:{$section:"layout",$order:82,type:"string",enum:["auto","start","end","center","stretch","normal"],$show:[{prop:"display",values:["grid","inline-grid"]}]},padding:{$section:"spacing",$order:10,type:"string",$shorthand:!0},paddingTop:{$section:"spacing",$order:11,type:"string",$units:["px","rem","em","%"],$shorthand:"padding"},paddingRight:{$section:"spacing",$order:12,type:"string",$units:["px","rem","em","%"],$shorthand:"padding"},paddingBottom:{$section:"spacing",$order:13,type:"string",$units:["px","rem","em","%"],$shorthand:"padding"},paddingLeft:{$section:"spacing",$order:14,type:"string",$units:["px","rem","em","%"],$shorthand:"padding"},margin:{$section:"spacing",$order:20,type:"string",$shorthand:!0},marginTop:{$section:"spacing",$order:21,type:"string",$units:["px","rem","em","%"],$keywords:["auto"],$shorthand:"margin"},marginRight:{$section:"spacing",$order:22,type:"string",$units:["px","rem","em","%"],$keywords:["auto"],$shorthand:"margin"},marginBottom:{$section:"spacing",$order:23,type:"string",$units:["px","rem","em","%"],$keywords:["auto"],$shorthand:"margin"},marginLeft:{$section:"spacing",$order:24,type:"string",$units:["px","rem","em","%"],$keywords:["auto"],$shorthand:"margin"},position:{$section:"positioning",$order:10,type:"string",enum:["static","relative","absolute","fixed","sticky"]},top:{$section:"positioning",$order:20,type:"string",$units:["px","rem","em","%","vw","vh"],$keywords:["auto"],$show:[{prop:"position",values:["relative","absolute","fixed","sticky"]}]},right:{$section:"positioning",$order:21,type:"string",$units:["px","rem","em","%","vw","vh"],$keywords:["auto"],$show:[{prop:"position",values:["relative","absolute","fixed","sticky"]}]},bottom:{$section:"positioning",$order:22,type:"string",$units:["px","rem","em","%","vw","vh"],$keywords:["auto"],$show:[{prop:"position",values:["relative","absolute","fixed","sticky"]}]},left:{$section:"positioning",$order:23,type:"string",$units:["px","rem","em","%","vw","vh"],$keywords:["auto"],$show:[{prop:"position",values:["relative","absolute","fixed","sticky"]}]},zIndex:{$section:"positioning",$order:30,type:"string",$units:[],$keywords:["auto"],$show:[{prop:"position",values:["relative","absolute","fixed","sticky"]}]},float:{$section:"positioning",$order:40,type:"string",enum:["none","left","right","inline-start","inline-end"]},clear:{$section:"positioning",$order:41,type:"string",enum:["none","left","right","both","inline-start","inline-end"]},fontFamily:{$section:"typography",$order:10,type:"string",presets:[{title:"System UI",value:"system-ui, sans-serif"},{title:"Transitional",value:"Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif"},{title:"Old Style",value:"'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif"},{title:"Humanist",value:"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"},{title:"Geometric Humanist",value:"Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif"},{title:"Classical Humanist",value:"Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif"},{title:"Neo-Grotesque",value:"Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif"},{title:"Monospace Slab Serif",value:"'Nimbus Mono PS', 'Courier New', monospace"},{title:"Monospace Code",value:"ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace"},{title:"Industrial",value:"Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif"},{title:"Rounded Sans",value:"ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif"},{title:"Slab Serif",value:"Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif"},{title:"Antique",value:"Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif"},{title:"Didone",value:"Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif"},{title:"Handwritten",value:"'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive"}]},fontSize:{$section:"typography",$order:20,type:"string",$units:["px","rem","em","%"],$keywords:["small","medium","large","x-large","xx-large","smaller","larger"]},fontWeight:{$section:"typography",$order:21,type:"string",examples:["100","200","300","400","500","600","700","800","900","normal","bold","lighter","bolder"]},fontStyle:{$section:"typography",$order:22,type:"string",enum:["normal","italic","oblique"]},fontVariant:{$section:"typography",$order:23,type:"string",enum:["normal","small-caps"]},lineHeight:{$section:"typography",$order:30,type:"string",$units:["px","rem","em","%"],$keywords:["normal"]},letterSpacing:{$section:"typography",$order:31,type:"string",$units:["px","rem","em"],$keywords:["normal"]},wordSpacing:{$section:"typography",$order:32,type:"string",$units:["px","rem","em"],$keywords:["normal"]},color:{$section:"typography",$order:40,type:"string",format:"color"},textAlign:{$section:"typography",$order:50,type:"string",$input:"button-group",$buttonValues:["left","center","right","justify"],$icons:{left:"text-align-left",center:"text-align-center",right:"text-align-right",justify:"text-align-justify"},enum:["left","right","center","justify","start","end"]},textTransform:{$section:"typography",$order:51,type:"string",enum:["none","uppercase","lowercase","capitalize"]},textDecoration:{$section:"typography",$order:52,type:"string",examples:["none","underline","overline","line-through","underline wavy"]},textOverflow:{$section:"typography",$order:53,type:"string",enum:["clip","ellipsis"],$show:[{prop:"overflow",values:["hidden","clip","auto","scroll"]}]},whiteSpace:{$section:"typography",$order:54,type:"string",enum:["normal","nowrap","pre","pre-wrap","pre-line","break-spaces"]},wordBreak:{$section:"typography",$order:55,type:"string",enum:["normal","break-all","keep-all","break-word"]},verticalAlign:{$section:"typography",$order:56,type:"string",examples:["baseline","top","middle","bottom","text-top","text-bottom","sub","super"]},textShadow:{$section:"typography",$order:60,type:"string"},listStyleType:{$section:"typography",$order:70,type:"string",enum:["none","disc","decimal","circle","square","lower-alpha","upper-alpha","lower-roman","upper-roman"]},backgroundColor:{$section:"background",$order:10,type:"string",format:"color"},backgroundImage:{$section:"background",$order:20,type:"string",examples:["none","linear-gradient(to bottom, #fff, #000)","radial-gradient(circle, #fff, #000)"]},backgroundSize:{$section:"background",$order:21,type:"string",examples:["auto","cover","contain","100% 100%"]},backgroundPosition:{$section:"background",$order:22,type:"string",examples:["center","top","bottom","left","right","center center","top left","bottom right"]},backgroundRepeat:{$section:"background",$order:23,type:"string",enum:["repeat","no-repeat","repeat-x","repeat-y","space","round"]},backgroundAttachment:{$section:"background",$order:24,type:"string",enum:["scroll","fixed","local"]},backgroundClip:{$section:"background",$order:25,type:"string",enum:["border-box","padding-box","content-box","text"]},backgroundOrigin:{$section:"background",$order:26,type:"string",enum:["border-box","padding-box","content-box"]},opacity:{$section:"background",$order:40,type:"number",minimum:0,maximum:1},border:{$section:"border",$order:10,type:"string",$shorthand:!0,$shorthandType:"border-side",$longhands:["borderWidth","borderStyle","borderColor"]},borderWidth:{$section:"border",$order:11,type:"string",$shorthand:!0},borderStyle:{$section:"border",$order:12,type:"string",enum:["none","solid","dashed","dotted","double","groove","ridge","inset","outset","hidden"]},borderColor:{$section:"border",$order:13,type:"string",format:"color"},borderTop:{$section:"border",$order:13.1,type:"string",$shorthand:!0,$shorthandType:"border-side",$longhands:["borderTopWidth","borderTopStyle","borderTopColor"]},borderRight:{$section:"border",$order:13.2,type:"string",$shorthand:!0,$shorthandType:"border-side",$longhands:["borderRightWidth","borderRightStyle","borderRightColor"]},borderBottom:{$section:"border",$order:13.3,type:"string",$shorthand:!0,$shorthandType:"border-side",$longhands:["borderBottomWidth","borderBottomStyle","borderBottomColor"]},borderLeft:{$section:"border",$order:13.4,type:"string",$shorthand:!0,$shorthandType:"border-side",$longhands:["borderLeftWidth","borderLeftStyle","borderLeftColor"]},borderBlockStart:{$section:"border",$order:13.5,type:"string",$shorthand:!0,$shorthandType:"border-side",$longhands:["borderBlockStartWidth","borderBlockStartStyle","borderBlockStartColor"]},borderBlockEnd:{$section:"border",$order:13.6,type:"string",$shorthand:!0,$shorthandType:"border-side",$longhands:["borderBlockEndWidth","borderBlockEndStyle","borderBlockEndColor"]},borderInlineStart:{$section:"border",$order:13.7,type:"string",$shorthand:!0,$shorthandType:"border-side",$longhands:["borderInlineStartWidth","borderInlineStartStyle","borderInlineStartColor"]},borderInlineEnd:{$section:"border",$order:13.8,type:"string",$shorthand:!0,$shorthandType:"border-side",$longhands:["borderInlineEndWidth","borderInlineEndStyle","borderInlineEndColor"]},borderTopWidth:{$section:"border",$order:14,type:"string",$units:["px","rem","em"],$shorthand:"borderWidth"},borderTopStyle:{$section:"border",$order:15,$shorthand:"borderTop",type:"string",enum:["none","solid","dashed","dotted","double","groove","ridge","inset","outset","hidden"]},borderTopColor:{$section:"border",$order:16,$shorthand:"borderTop",type:"string",format:"color"},borderRightWidth:{$section:"border",$order:17,type:"string",$units:["px","rem","em"],$shorthand:"borderWidth"},borderRightStyle:{$section:"border",$order:18,$shorthand:"borderRight",type:"string",enum:["none","solid","dashed","dotted","double","groove","ridge","inset","outset","hidden"]},borderRightColor:{$section:"border",$order:19,$shorthand:"borderRight",type:"string",format:"color"},borderBottomWidth:{$section:"border",$order:20,type:"string",$units:["px","rem","em"],$shorthand:"borderWidth"},borderBottomStyle:{$section:"border",$order:21,$shorthand:"borderBottom",type:"string",enum:["none","solid","dashed","dotted","double","groove","ridge","inset","outset","hidden"]},borderBottomColor:{$section:"border",$order:22,$shorthand:"borderBottom",type:"string",format:"color"},borderLeftWidth:{$section:"border",$order:23,type:"string",$units:["px","rem","em"],$shorthand:"borderWidth"},borderLeftStyle:{$section:"border",$order:24,$shorthand:"borderLeft",type:"string",enum:["none","solid","dashed","dotted","double","groove","ridge","inset","outset","hidden"]},borderLeftColor:{$section:"border",$order:25,$shorthand:"borderLeft",type:"string",format:"color"},borderRadius:{$section:"border",$order:30,type:"string",$shorthand:!0},borderTopLeftRadius:{$section:"border",$order:31,type:"string",$units:["px","rem","em","%"],$shorthand:"borderRadius"},borderTopRightRadius:{$section:"border",$order:32,type:"string",$units:["px","rem","em","%"],$shorthand:"borderRadius"},borderBottomRightRadius:{$section:"border",$order:33,type:"string",$units:["px","rem","em","%"],$shorthand:"borderRadius"},borderBottomLeftRadius:{$section:"border",$order:34,type:"string",$units:["px","rem","em","%"],$shorthand:"borderRadius"},outline:{$section:"border",$order:40,type:"string"},outlineOffset:{$section:"border",$order:41,type:"string",$units:["px","rem","em"]},borderBlockStartWidth:{$section:"border",$order:50,type:"string",$units:["px","rem","em"],$shorthand:"borderBlockStart"},borderBlockStartStyle:{$section:"border",$order:51,type:"string",enum:["none","solid","dashed","dotted","double","groove","ridge","inset","outset","hidden"],$shorthand:"borderBlockStart"},borderBlockStartColor:{$section:"border",$order:52,type:"string",format:"color",$shorthand:"borderBlockStart"},borderBlockEndWidth:{$section:"border",$order:53,type:"string",$units:["px","rem","em"],$shorthand:"borderBlockEnd"},borderBlockEndStyle:{$section:"border",$order:54,type:"string",enum:["none","solid","dashed","dotted","double","groove","ridge","inset","outset","hidden"],$shorthand:"borderBlockEnd"},borderBlockEndColor:{$section:"border",$order:55,type:"string",format:"color",$shorthand:"borderBlockEnd"},borderInlineStartWidth:{$section:"border",$order:56,type:"string",$units:["px","rem","em"],$shorthand:"borderInlineStart"},borderInlineStartStyle:{$section:"border",$order:57,type:"string",enum:["none","solid","dashed","dotted","double","groove","ridge","inset","outset","hidden"],$shorthand:"borderInlineStart"},borderInlineStartColor:{$section:"border",$order:58,type:"string",format:"color",$shorthand:"borderInlineStart"},borderInlineEndWidth:{$section:"border",$order:59,type:"string",$units:["px","rem","em"],$shorthand:"borderInlineEnd"},borderInlineEndStyle:{$section:"border",$order:60,type:"string",enum:["none","solid","dashed","dotted","double","groove","ridge","inset","outset","hidden"],$shorthand:"borderInlineEnd"},borderInlineEndColor:{$section:"border",$order:61,type:"string",format:"color",$shorthand:"borderInlineEnd"},boxShadow:{$section:"effects",$order:10,type:"string",examples:["none","0 1px 3px rgba(0,0,0,0.12)","0 4px 6px rgba(0,0,0,0.1)","inset 0 1px 2px rgba(0,0,0,0.1)"]},filter:{$section:"effects",$order:20,type:"string",examples:["none","blur(4px)","brightness(1.2)","contrast(0.8)","grayscale(100%)","saturate(1.5)"]},backdropFilter:{$section:"effects",$order:21,type:"string",examples:["none","blur(4px)","brightness(1.2)","contrast(0.8)","grayscale(100%)","saturate(1.5)"]},transform:{$section:"effects",$order:30,type:"string",examples:["none","translateX(0)","translateY(0)","rotate(0deg)","scale(1)","skewX(0deg)"]},transformOrigin:{$section:"effects",$order:31,type:"string",examples:["center","top","bottom","left","right","top left","top right","bottom left","bottom right","center center"]},transition:{$section:"effects",$order:40,type:"string",examples:["none","all 0.2s ease","opacity 0.2s ease","transform 0.2s ease","background-color 0.2s ease"]},animationName:{$section:"effects",$order:41,type:"string"},animationDuration:{$section:"effects",$order:42,type:"string",$units:["s","ms"],$show:[{prop:"animationName",values:[]}]},animationTimingFunction:{$section:"effects",$order:43,type:"string",enum:["ease","linear","ease-in","ease-out","ease-in-out","step-start","step-end"],$show:[{prop:"animationName",values:[]}]},animationFillMode:{$section:"effects",$order:44,type:"string",enum:["none","forwards","backwards","both"],$show:[{prop:"animationName",values:[]}]},animationIterationCount:{$section:"effects",$order:45,type:"string",examples:["1","2","3","infinite"],$show:[{prop:"animationName",values:[]}]},cursor:{$section:"effects",$order:50,type:"string",enum:["auto","default","pointer","text","move","not-allowed","grab","grabbing","crosshair","help","wait","zoom-in","zoom-out","none"]},pointerEvents:{$section:"effects",$order:51,type:"string",enum:["auto","none"]},userSelect:{$section:"effects",$order:52,type:"string",enum:["auto","none","text","all","contain"]},visibility:{$section:"effects",$order:53,type:"string",enum:["visible","hidden","collapse"]},resize:{$section:"effects",$order:54,type:"string",enum:["none","both","horizontal","vertical"]},appearance:{$section:"effects",$order:55,type:"string",enum:["auto","none"]}}};var D=V.$defs,Me=new Map;function YR(e){Me=new Map;for(let[t,o]of e.cssProps)if(t!==void 0&&o!==void 0)Me.set(t,o)}function Ie(){return Me}function ce(e){return typeof e!=="object"}function jn(e,t){let o=t[e.prop]??"";if(e.values.length===0)return o!==""&&o!=="initial";return n(o)&&e.values.includes(o)}function gt(e,t){return(e.$show??[]).every((o)=>jn(o,t))}function yt(e,t){let o=e.style||{},r={...t};for(let a of Object.keys(o)){if(!ce(o[a]))continue;let i=D[a]?.$section??"other";if(r[i]===void 0)r[i]=!0}return r}function U(e){let t=D[e]?.$longhands;if(t)return t.map((r)=>({entry:D[r]||{$order:0},name:r})).toSorted((r,a)=>r.entry.$order-a.entry.$order);let o=[];for(let[r,a]of Object.entries(D))if(a.$shorthand===e)o.push({entry:a,name:r});return o.sort((r,a)=>r.entry.$order-a.entry.$order),o}function $t(e,t){if(!e)return Array.from({length:t},()=>"");let o=e.trim().split(/\s+/);if(t!==4||o.length===0)return Array.from({length:t},()=>"");if(o.length===1)return[o[0],o[0],o[0],o[0]];if(o.length===2)return[o[0],o[1],o[0],o[1]];if(o.length===3)return[o[0],o[1],o[2],o[1]];return[o[0],o[1],o[2],o[3]]}function bt(e){let[t,o,r,a]=e;if(t===o&&o===r&&r===a)return t;if(t===r&&o===a)return`${t} ${o}`;if(o===a)return`${t} ${o} ${r}`;return`${t} ${o} ${r} ${a}`}var En=new Set(["none","solid","dashed","dotted","double","groove","ridge","inset","outset","hidden"]);function vt(e){if(!e)return["","",""];let t=[],o="",r=0;for(let l of e.trim()){if(l==="(")r+=1;if(l===")")r-=1;if(l===" "&&r===0){if(o)t.push(o);o=""}else o+=l}if(o)t.push(o);let a="",i="",s="";for(let l of t)if(!i&&En.has(l))i=l;else if(!a&&/^[\d.]/.test(l))a=l;else s=s?`${s} ${l}`:l;return[a,i,s]}function xt(e){return e.filter((t)=>t&&t.trim()).join(" ")}function wt(){let e=wr(h.value?.doc.document?.style),t=[];for(let[o,r]of Object.entries(e))if(o.startsWith("--font")&&(n(r)||Y(r)))t.push({name:o,value:String(r)});return t}var kt=new Map([["fontStyle","slant"],["fontVariant","variant"],["fontWeight","weight"],["textDecoration","decoration"],["textTransform","transform"]]);var pe=/^(-?[\d.]+)(px|rem|em|%|vw|vh|svw|svh|dvh|ms|s|fr|ch|ex|deg)?$/;var Ct={$schema:"https://jxsuite.com/schema/v1",$id:"StudioStylePanel",$description:"The Inspector's Style tab: the Target Line's host, one filter, then the CSS property accordion — every row saying where its value came from (§6.7), every section heading tallying what is set inside it. Nothing here knows what CSS is. `panels/style-panel.ts` resolves the compound coordinate (selection, breakpoint, scheme layer, nested selector), reads css-meta, decides which of seven controls a property gets, works out its provenance and what a commit writes; this document draws the answer and decides nothing. That split is what lets the tab stop going through `panels/panel-scheduler.ts`: the focus guard existed because a lit repaint of the whole panel could take the field a reader was typing into, and a document is one runtime effect per bound property with an equal write skipped.",tagName:"div",attributes:{part:"panel"},style:{$description:"What `.style-sidebar`, `.style-filter-bar`, `.style-row`, `.style-row-label`, `.style-row--child`, `.style-row--warning`, `.style-shorthand-header`, `.style-section-body--grid`, `.kv-row`, `.kv-key`, `.kv-val`, `.input-group`, `.style-input-number-unit`, `.button-group-combo`, `.provenance-chip*`, `.set-dot` and `.provenance-dots` said across `styles/inspector.css` and `styles/overlays.css`, keyed on `part` and re-pointed at the kit's token layer. The rules those parts replace are DEAD in the stylesheets now rather than shared: `ui/field-row.ts` drew the same row for the Signals panel and the expression editor, and it is gone with them, so `.style-row*`, `.provenance-chip*` and `.set-dot` no longer have an emitter. Every `--spectrum-*` reference is gone rather than renamed — those names resolve only inside `<sp-theme>`, and this document is mounted in the Inspector's tab body, outside it, so each would silently have taken its hard-coded px fallback. The one deliberate change is the provenance chip: it is a `button` wherever it acts, drawn at the same 6px, because a 6px circle that clears a property was reachable by mouse alone.",display:"flex",flexDirection:"column",minHeight:"0",fontFamily:"var(--jx-font-sans)",color:"var(--jx-fg)",'& [part="empty"]':{$description:"The one empty-state pattern (`panels/empty-state.ts`), drawn here because a document cannot render a lit helper. Its rules are what is kept (studio-ui-guidelines.md §11): one sentence saying what the region is FOR, then the action that fills it.",display:"flex",flexDirection:"column",alignItems:"center",gap:"var(--jx-space-3)",padding:"var(--jx-space-6)",textAlign:"center",fontSize:"var(--jx-text-md)",color:"var(--jx-fg-dim)"},'& [part="empty-message"]':{margin:"0",maxWidth:"34ch",lineHeight:"1.5"},'& [part="filter"]':{padding:"var(--jx-space-2) var(--jx-space-3)",borderBottom:"1px solid var(--jx-border)"},'& [part="rows"]':{display:"flex",flexDirection:"column",minWidth:"0"},'& [part="rows"][data-layout="grid"]':{$description:"The Size section only. Two equal columns that may both shrink to nothing, so a long value scrolls inside its own control instead of pushing the pane wider.",display:"grid",gridTemplateColumns:"minmax(0, 1fr) minmax(0, 1fr)",gap:"var(--jx-space-2) var(--jx-space-3)"},'& [part="rows"] > [part="row"]':{$description:'Scoped to the panel\'s OWN rows rather than to every `part="row"` beneath it, and that is load-bearing now that a colour row draws a `jx-color-field`. The kit is light DOM and one cascade, so `[part="row"]` as a bare descendant also matches the field\'s internal row — and at equal specificity with the kit\'s own `& > [part="row"]` the winner is whichever sheet was interned later, which is not a thing a stylesheet may depend on. The same reasoning moved `[part="chip"]` under `[part="chip-slot"]`, where `background: none` would otherwise have erased a swatch\'s colour, and `[part="control"]` under its row, where `> *` would have stretched a swatch\'s chip.',display:"flex",flexDirection:"column",alignItems:"stretch",gap:"2px",padding:"2px 0",minWidth:"0"},'& [part="rows"] > [part="row"][data-span="2"]':{gridColumn:"1 / -1"},'& [part="rows"] > [part="row"][data-child="true"]':{paddingLeft:"var(--jx-space-5)"},'& [part="row-label"]':{display:"flex",alignItems:"center",gap:"var(--jx-space-2)",fontSize:"var(--jx-text-xs)",color:"var(--jx-fg-dim)"},'& [part="rows"] > [part="row"][data-warning="true"] > [part="row-label"]':{color:"var(--jx-warning)","::before":{content:'"⚠ "'}},'& [part="label"]':{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},'& [part="rows"] > [part="row"] > [part="control"]':{display:"flex",alignItems:"center",gap:"var(--jx-space-1)",minWidth:"0"},'& [part="rows"] > [part="row"] > [part="control"] > *':{flex:"1",minWidth:"0"},'& [part="color"]':{display:"flex",minWidth:"0"},'& [part="color"] > [part="color-field"]':{flex:"1",minWidth:"0"},'& [part="color-field"] > [part="row"]':{$description:"The field is `inline-flex` around a row sized to its own contents, which is right where it stands in a sentence and wrong where it IS the width of a dock. Two declarations, not a restatement of the kit's layout: the field still lays itself out.",flex:"1",minWidth:"0"},'& [part="color-field"] [part="text"]':{flex:"1",inlineSize:"auto",minInlineSize:"0"},'& [part="chip-slot"] > [part="chip"]':{$description:"One vocabulary, five states (§6.7). `default` draws nothing at all — absence IS the ghost — which is why there is no rule for it: the document never makes the node. `set` is the 6px accent disc `.set-dot` has always been; the two that carry information wear their donor's name in a bordered pill, and `mixed` is neutral on purpose because it says nothing about WHERE a value came from, only that the selection disagrees.",display:"inline-flex",alignItems:"center",flexShrink:"0",margin:"0",padding:"0",border:"none",background:"none",color:"inherit",font:"inherit",fontSize:"var(--jx-text-xs)"},'& [part="chip-slot"] > button[part="chip"]':{cursor:"pointer",":focus-visible":{outline:"var(--jx-focus-ring)",outlineOffset:"1px"}},'& [part="chip-slot"] > [part="chip"][data-state="set"]':{width:"6px",height:"6px",borderRadius:"50%",background:"var(--jx-accent)"},'& [part="chip-slot"] > button[part="chip"][data-state="set"]:hover':{background:"var(--jx-danger)"},'& [part="chip-slot"] > [part="chip"][data-state="inherited"], & [part="chip-slot"] > [part="chip"][data-state="bound"], & [part="chip-slot"] > [part="chip"][data-state="mixed"]':{maxWidth:"16ch",overflow:"hidden",padding:"0 var(--jx-space-2)",border:"1px solid currentcolor",borderRadius:"var(--jx-radius-sm)",lineHeight:"14px",whiteSpace:"nowrap",textOverflow:"ellipsis"},'& [part="chip-slot"] > [part="chip"][data-state="inherited"]':{color:"var(--jx-warning)"},'& [part="chip-slot"] > [part="chip"][data-state="bound"]':{color:"var(--jx-handler)"},'& [part="chip-slot"] > [part="chip"][data-state="mixed"]':{color:"var(--jx-fg-muted)"},'& [part="dots"]':{display:"inline-flex",alignItems:"center",gap:"3px"},'& [part="dot"]':{$description:"A collapsed heading has room for a tally, not for three labelled chips, so the two states that normally carry text collapse to coloured discs beside the accent one. That tally is what retired the tab's Active filter toggle: the toggle existed only because a closed section could not say whether anything inside it was set.",display:"inline-block",flex:"none",width:"7px",height:"7px",margin:"0",padding:"0",border:"none",borderRadius:"50%",background:"var(--jx-fg-muted)"},'& button[part="dot"]':{cursor:"pointer",":focus-visible":{outline:"var(--jx-focus-ring)",outlineOffset:"1px"}},'& [part="dot"][data-state="set"]':{background:"var(--jx-accent)"},'& button[part="dot"][data-state="set"]:hover':{background:"var(--jx-danger)"},'& [part="dot"][data-state="inherited"]':{background:"var(--jx-warning)"},'& [part="dot"][data-state="bound"]':{background:"var(--jx-handler)"},'& [part="source"]':{$description:"The Value Source chip (§6.6): quiet while the value is a literal, accent-tinted the moment it is produced from something else. A CSS declaration has exactly two rungs — `JxStyle` admits no `$ref` — so the picker it opens is two rows, and that is derived from the schema rather than written here.",flex:"none",color:"var(--jx-fg-dim)"},'& [part="source"][data-source="template"]':{color:"var(--jx-accent)"},'& [part="group"]':{$description:"The composite the kit draws as two elements on purpose: a field the reader may type anything into, beside a button that opens the kit MENU. It is the unit row, and it is not a combobox, because its list runs a VERB rather than committing a value — a unit re-attaches to the number the field holds (ui.md §5.5, jx-dimension-field). The keyword rows and the font row, whose list IS the value, are `jx-combobox` (the `keywords` case).",display:"flex",flex:"1",alignItems:"stretch",gap:"0",minWidth:"0"},'& [part="group"] > jx-textfield':{flex:"1 1 auto",minWidth:"0"},'& [part="group-open"]':{flex:"0 0 auto",marginInlineStart:"calc(-1 * 1px)"},'& [part="buttons"]':{display:"flex",flex:"1",alignItems:"stretch",minWidth:"0"},'& [part="buttons"] jx-action-group':{minWidth:"0"},'& [part="shorthand"]':{display:"flex",alignItems:"center",gap:"var(--jx-space-1)",minWidth:"0"},'& [part="shorthand"] > jx-textfield':{flex:"1",minWidth:"0"},'& [part="kv"]':{display:"flex",gap:"var(--jx-space-1)",marginBottom:"3px",minWidth:"0"},'& [part="kv-key"]':{width:"90px",flexShrink:"0"},'& [part="kv-value"]':{flex:"1",minWidth:"0"},'& [part="nested"]':{display:"flex",alignItems:"center",gap:"var(--jx-space-1)",padding:"2px 0",minWidth:"0"},'& [part="nested-open"]':{flex:"1",overflow:"hidden",padding:"var(--jx-space-2) var(--jx-space-3)",border:"none",borderRadius:"var(--jx-radius-sm)",background:"var(--jx-bg-panel)",color:"var(--jx-fg)",font:"inherit",fontSize:"var(--jx-text-sm)",fontFamily:"var(--jx-font-mono)",textAlign:"left",textOverflow:"ellipsis",whiteSpace:"nowrap",cursor:"pointer",":hover":{background:"var(--jx-hover-bg)",color:"var(--jx-accent)"},":focus-visible":{outline:"var(--jx-focus-ring)",outlineOffset:"-1px"}},'& [part="nested-add"]':{width:"100%",padding:"var(--jx-space-2) var(--jx-space-3)",border:"1px dashed var(--jx-border-strong)",borderRadius:"var(--jx-radius-sm)",background:"none",color:"var(--jx-fg-dim)",font:"inherit",fontSize:"var(--jx-text-sm)",cursor:"pointer",":hover":{color:"var(--jx-accent)",borderColor:"var(--jx-accent-50)"},":focus-visible":{outline:"var(--jx-focus-ring)",outlineOffset:"1px"}}},children:[{tagName:"div",attributes:{part:"view-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"#/state/view"},cases:{empty:{tagName:"div",attributes:{part:"empty"},children:[{tagName:"p",attributes:{part:"empty-message"},textContent:"${state.emptyMessage}"},{tagName:"span",attributes:{part:"empty-action-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"#/state/hasEmptyAction"},cases:{true:{tagName:"jx-button",attributes:{part:"empty-action"},$props:{size:"sm"},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/runEmptyAction"},value:[]}]},children:[{tagName:"span",textContent:"${state.emptyActionLabel}"}]}}}]},editor:{tagName:"div",attributes:{part:"editor",role:"none"},style:{display:"contents"},children:[{$description:"The Target Line's own host. It is EMPTY on purpose and stays empty: `surfaces/target-line.ts` mounts a second document into it, announced through `onNodeCreated` rather than found by selector (studio-ui-guidelines.md §9.4), so the line survives every repaint of the tab around it.",tagName:"div",attributes:{part:"target-host"}},{tagName:"div",attributes:{part:"filter"},children:[{tagName:"jx-textfield",attributes:{part:"filter-input"},$props:{size:"sm",type:"search",clearable:!0,label:"Filter properties",placeholder:"Filter properties…",value:{$ref:"#/state/filter"}},oninput:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/setFilter"},value:[{$ref:"event#/target/value"}]}]}}]},{tagName:"jx-accordion",attributes:{part:"sections"},$props:{multiple:!0},children:[{$prototype:"Array",items:{$ref:"#/state/sections"},key:{$ref:"$map/item/key"},map:{tagName:"jx-accordion-item",attributes:{part:"section","data-section":"${$map.item.key}"},$props:{label:{$ref:"$map/item/label"},open:{$ref:"$map/item/open"}},ontoggle:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/toggleSection"},value:[{$ref:"$map/item/key"},{$ref:"event#/detail"}]}]},children:[{$description:"The inert half of the tally goes in the heading slot and the one control in the actions slot, which is the element's own division: a click on the actions row cancels the summary's toggle, and a click on an inert mark slotted there would cancel it for nothing.",tagName:"span",attributes:{part:"dots",slot:"heading",hidden:"${$map.item.hasMarks ? null : ''}",title:"${$map.item.tally}","aria-label":"${$map.item.tally}"},children:[{$prototype:"Array",items:{$ref:"$map/item/marks"},key:{$ref:"$map/item/state"},map:{tagName:"span",attributes:{part:"dot","data-state":"${$map.item.state}"}}}]},{tagName:"span",attributes:{part:"actions-slot",slot:"actions",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/canClear"},cases:{true:{tagName:"button",attributes:{part:"dot",type:"button","data-state":"set","data-clear":"${$map.item.key}",title:"${$map.item.clearTitle}","aria-label":"${$map.item.clearTitle}"},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/clearSection"},value:[{$ref:"$map/item/key"}]}]}}}},{tagName:"div",attributes:{part:"rows","data-layout":"${$map.item.layout}"},children:[{$prototype:"Array",items:{$ref:"$map/item/rows"},key:{$ref:"$map/item/key"},map:{tagName:"div",attributes:{part:"row","data-prop":"${$map.item.prop}","data-kind":"${$map.item.kind}","data-child":"${$map.item.child ? 'true' : null}","data-warning":"${$map.item.warning ? 'true' : null}","data-span":"${$map.item.span ? '2' : null}"},children:[{tagName:"div",attributes:{part:"row-label",hidden:"${$map.item.hasLabel ? null : ''}"},children:[{tagName:"span",attributes:{part:"chip-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/chip"},cases:{button:{tagName:"button",attributes:{part:"chip",type:"button","data-state":"${$map.item.chipState}",title:"${$map.item.chipTitle}","aria-label":"${$map.item.chipTitle}"},textContent:"${$map.item.chipText}",onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/chipClick"},value:[{$ref:"$map/item/key"}]}]}},text:{tagName:"span",attributes:{part:"chip","data-state":"${$map.item.chipState}",title:"${$map.item.chipTitle}"},textContent:"${$map.item.chipText}"}}},{tagName:"span",attributes:{part:"label",title:"${$map.item.prop}"},textContent:"${$map.item.label}"},{tagName:"span",attributes:{part:"source-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/hasSource"},cases:{true:{tagName:"jx-action-button",attributes:{part:"source","data-source":"${$map.item.sourceState}"},$props:{size:"sm",quiet:!0,haspopup:"menu",label:{$ref:"$map/item/sourceHint"},hint:{$ref:"$map/item/sourceHint"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/pickSource"},value:[{$ref:"$map/item/key"},{$ref:"event#/currentTarget"}]}]},children:[{tagName:"span",textContent:"${$map.item.sourceLabel}"}]}}}]},{tagName:"div",attributes:{part:"control",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/widget"},cases:{text:{tagName:"jx-textfield",attributes:{part:"text"},$props:{size:"sm",label:{$ref:"$map/item/label"},value:{$ref:"$map/item/value"},placeholder:{$ref:"$map/item/placeholder"},mono:{$ref:"$map/item/mono"}},oninput:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/editText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/commitText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}},number:{tagName:"jx-number-field",attributes:{part:"number"},$props:{size:"sm",label:{$ref:"$map/item/label"},value:{$ref:"$map/item/value"},placeholder:{$ref:"$map/item/placeholder"},min:{$ref:"$map/item/min"},max:{$ref:"$map/item/max"},step:{$ref:"$map/item/step"},stepper:!1},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/commitText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}},keywords:{$description:"A keyword row, and the font row: one `jx-combobox` with `allows-custom-value` over the values worth offering (ui.md §5.3). The field IS the value and the rows under it are suggestions, which is the whole of what an enum means on a style property — `text-transform: full-width` is a value whether or not the catalogue lists it, so the list never refuses. A typography row's options carry the kit's drawing channels, so `700` is set in 700 and `Italic` leans, each in the element's own face; the font row's carry `face`, so every font is its own specimen, which is what a menu row could never be (ui.md §5.1: a picker you choose by LOOKING is not a menu). Both handlers read the ELEMENT's value, because a pick announces from the element while typing lets the control's own event bubble, and `currentTarget` is the one node both name. What a font pick WRITES is the adapter's, not the row's: the field holds a token's name, and the commit points the property at it, minting the token first when the name is a preset's.",tagName:"jx-combobox",attributes:{part:"text"},$props:{size:"sm",label:{$ref:"$map/item/label"},value:{$ref:"$map/item/value"},placeholder:{$ref:"$map/item/placeholder"},allowsCustomValue:!0,options:{$ref:"$map/item/options"}},oninput:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/editText"},value:[{$ref:"$map/item/key"},{$ref:"event#/currentTarget/value"}]}]},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/commitText"},value:[{$ref:"$map/item/key"},{$ref:"event#/currentTarget/value"}]}]}},group:{$description:"The dual-mode control: a number beside its unit. Type what you mean, or take a unit from the list — and the list is the kit MENU rather than a second popup of this document's own (studio-ui-guidelines.md §12.5), because every row of it is a verb: a unit re-attaches to the number the field holds. A keyword row, whose list commits a value, is the `keywords` case instead — and so is the font row now, because a font is chosen by looking and a menu row cannot draw itself in its own face.",tagName:"div",attributes:{part:"group"},children:[{tagName:"jx-textfield",attributes:{part:"text"},$props:{size:"sm",label:{$ref:"$map/item/label"},value:{$ref:"$map/item/value"},placeholder:{$ref:"$map/item/placeholder"},mono:{$ref:"$map/item/mono"}},oninput:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/editText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/commitText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}},{tagName:"span",attributes:{part:"group-open-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/hasChoices"},cases:{true:{tagName:"jx-action-button",attributes:{part:"group-open"},$props:{size:"sm",haspopup:"menu",label:{$ref:"$map/item/choicesHint"},hint:{$ref:"$map/item/choicesHint"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/pickChoice"},value:[{$ref:"$map/item/key"},{$ref:"event#/currentTarget"}]}]},children:[{tagName:"span",textContent:"${$map.item.choicesLabel}"}]}}}]},buttons:{tagName:"div",attributes:{part:"buttons"},children:[{tagName:"jx-action-group",$props:{selects:"single",compact:!0,label:{$ref:"$map/item/label"}},children:[{$prototype:"Array",items:{$ref:"$map/item/buttons"},key:{$ref:"$map/item/value"},map:{tagName:"jx-action-button",attributes:{part:"button","data-value":"${$map.item.value}"},$props:{size:"sm",icon:{$ref:"$map/item/icon"},label:{$ref:"$map/item/title"},hint:{$ref:"$map/item/title"},checked:{$ref:"$map/item/checked"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/pressButton"},value:[{$ref:"$map/item/row"},{$ref:"$map/item/value"}]}]},children:[{$description:"The abbreviation, for a value with no glyph, and HIDDEN rather than empty on a button that has one. The kit's `[part=\"label\"]` is `display: contents`, so an empty span is still a flex item in the control, and the control's 4px gap sits between the glyph and nothing: every icon button in the tab drew 26px wide with its glyph pushed 2px off centre, instead of 22px and centred. Hidden, it takes no box, and the button's name and tooltip are the value either way.",tagName:"span",attributes:{hidden:"${$map.item.text ? null : ''}"},textContent:"${$map.item.text}"}]}}]},{tagName:"span",attributes:{part:"overflow-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/hasChoices"},cases:{true:{tagName:"jx-action-button",attributes:{part:"group-open"},$props:{size:"sm",icon:"dots-three",haspopup:"menu",selected:{$ref:"$map/item/overflowSelected"},label:{$ref:"$map/item/choicesHint"},hint:{$ref:"$map/item/choicesHint"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/pickChoice"},value:[{$ref:"$map/item/key"},{$ref:"event#/currentTarget"}]}]}}}}]},color:{$description:"The colour row, and the whole of it: `ui.md` §5.6 landed, so the swatch, the value, the saturation square, the hue track and the project's own palette are ONE element rather than an announced `[part=\"control-host\"]` a lit island filled. The listener is on the WRAPPER and not on the field, and that is the field's own contract rather than a preference. `jx-color-field` stops its five inner controls' native events at its root and re-says the platform's two names FROM the host, so an ancestor hears exactly one `input` and one `change` per gesture with `e.target` being the field — while a listener on the field itself hears BOTH, including the raw `change` of a text box holding a half-typed word the field has just refused. Bound there, `not a colour` would have been committed as a colour.",tagName:"div",attributes:{part:"color",role:"none"},oninput:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/editText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/commitText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]},children:[{tagName:"jx-color-field",attributes:{part:"color-field"},$props:{size:"sm",label:{$ref:"$map/item/label"},value:{$ref:"$map/item/value"},resolved:{$ref:"$map/item/resolved"},alpha:!0},children:[{tagName:"span",attributes:{part:"palette-slot",slot:"tokens",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/hasTokens"},cases:{true:{$description:"The palette's `change` is caught HERE, on the group, because it never gets out: the field routes it as its `palette` channel, stops it, and then declines it — a swatch that stands for `var(--color-accent)` is not a string the field can parse as a colour, which is exactly why the reference survives the click. A row that let the field answer instead would have committed the literal behind the token and quietly opted one declaration out of the palette for ever.",tagName:"jx-swatch-group",attributes:{part:"palette"},$props:{label:"Colour tokens",value:{$ref:"$map/item/value"}},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/commitText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]},children:[{$prototype:"Array",items:{$ref:"$map/item/tokens"},key:{$ref:"$map/item/value"},map:{tagName:"jx-swatch",attributes:{part:"token","data-token":"${$map.item.value}"},$props:{size:"sm",color:{$ref:"$map/item/color"},value:{$ref:"$map/item/value"},label:{$ref:"$map/item/label"}}}}]}}}]}]},shorthand:{tagName:"div",attributes:{part:"shorthand"},children:[{tagName:"jx-textfield",attributes:{part:"text"},$props:{size:"sm",label:{$ref:"$map/item/label"},value:{$ref:"$map/item/value"},placeholder:{$ref:"$map/item/placeholder"}},oninput:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/editText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/commitText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}},{tagName:"jx-action-button",attributes:{part:"expand"},$props:{size:"sm",quiet:!0,icon:{$ref:"$map/item/expandIcon"},expanded:{$ref:"$map/item/expanded"},label:{$ref:"$map/item/expandLabel"},hint:{$ref:"$map/item/expandLabel"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/toggleShorthand"},value:[{$ref:"$map/item/key"}]}]}}]},kv:{tagName:"div",attributes:{part:"kv"},children:[{tagName:"jx-textfield",attributes:{part:"kv-key"},$props:{size:"sm",mono:!0,label:"Property name",value:{$ref:"$map/item/name"}},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/renameCustom"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}},{tagName:"jx-textfield",attributes:{part:"kv-value"},$props:{size:"sm",label:"Value",value:{$ref:"$map/item/value"},placeholder:{$ref:"$map/item/placeholder"}},oninput:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/editText"},value:[{$ref:"$map/item/key"},{$ref:"event#/target/value"}]}]}},{tagName:"jx-action-button",attributes:{part:"kv-remove"},$props:{size:"sm",quiet:!0,icon:"x",label:{$ref:"$map/item/removeLabel"},hint:{$ref:"$map/item/removeLabel"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/chipClick"},value:[{$ref:"$map/item/key"}]}]}}]},kvadd:{tagName:"jx-textfield",attributes:{part:"kv-add"},$props:{size:"sm",mono:!0,label:"Add a CSS property",placeholder:"Property name…"},onkeydown:{$prototype:"Function",body:[{if:{operator:"===",target:{$ref:"event#/key"},value:"Enter"},then:[{preventDefault:!0},{operator:"call",target:{$ref:"#/state/addCustom"},value:[{$ref:"$map/item/key"},{$ref:"event#/target"}]}]}]}},nested:{tagName:"div",attributes:{part:"nested"},children:[{tagName:"button",attributes:{part:"nested-open",type:"button",title:"${$map.item.openTitle}"},textContent:"${$map.item.name}",onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/openNested"},value:[{$ref:"$map/item/key"}]}]}},{tagName:"jx-action-button",attributes:{part:"nested-remove"},$props:{size:"sm",quiet:!0,icon:"trash",label:{$ref:"$map/item/removeLabel"},hint:{$ref:"$map/item/removeLabel"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/chipClick"},value:[{$ref:"$map/item/key"}]}]}}]},nestedadd:{tagName:"button",attributes:{part:"nested-add",type:"button"},textContent:"+ Add",onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/addNested"},value:[]}]}}}}]}}]}]}}]}]}}}]};E("style-panel",Ct);function Ln(e){let t=n(e)?void 0:e.attributes?.part;return n(t)?t:""}function Tt(e,t){e.view=t.view,e.emptyMessage=t.emptyMessage,e.hasEmptyAction=t.hasEmptyAction,e.emptyActionLabel=t.emptyActionLabel,e.filter=t.filter,e.sections=t.sections}function Nt(e,t,o,r){let a=g({...o,emptyActionLabel:"",emptyMessage:"",filter:"",hasEmptyAction:!1,sections:[],view:"empty"});Tt(a,t),e.replaceChildren();let i=null,s=!1;return R("style-panel",a,e,{onNodeCreated:(l,d,c)=>{if(l instanceof HTMLElement&&Ln(c)==="target-host")r.target(l)}}).then((l)=>{if(s){l.dispose();return}i=l}),{connected:()=>!s&&(i===null?e.childNodes.length===0:i.root.parentNode===e),dispose(){s=!0,r.target(null),i?.dispose(),i=null},update:(l)=>Tt(a,l)}}var Pn={state:"default"};function he(e){return/^[a-z]/.test(e)}function Ot(e,t){let o=e;for(let r of t.split(" "))if(o=Di(o,r),!o)return{};return o}function fe(e,t,o){let r=o?Di(e,`@${o}`)??{}:e;if(t)return he(t)?Ot(r,t):Di(r,t)??{};let a={};for(let[i,s]of Object.entries(r))if(ce(s))a[i]=s;return a}function Rt(e,t,o){let r;if(t&&he(t)){let a=t.split(" ");r=o?(i,s,l)=>yM(i,e,o,a,s,l):(i,s,l)=>o0(i,e,a,s,l)}else if(t)r=o?(a,i,s)=>vM(a,e,o,t,i,s):(a,i,s)=>i0(a,e,t,i,s);else r=o?(a,i,s)=>bM(a,e,o,i,s):(a,i,s)=>Zm(a,e,i,s);return(a,i,s)=>r(a,i,s)}function Mn(e,t,o,r){let a=new Set;if(t.length<2)return a;let i=t.map((l)=>{let d=oe(e.doc.document,l);return fe(d?.style??{},o,r)}),s=new Set;for(let l of i)for(let d of Object.keys(l))s.add(d);for(let l of s)if(Jm(i.map((d)=>d[l]??null)).mixed)a.add(l);return a}var Q=g({showAffected:!1,usageRevision:0});function B(e,t){ae()?.run(e,t)}function In(e){return e&&he(e)?e.split(" ")[0]??null:null}function On(e){return/(?:^|\/)project\.json$/.test(e)}function Rn(e,t){let o=e.documentPath??"",r=On(o);if(!t)return r?jt("every page in this project",null):{kind:"element",label:"this element"};let a=r||/^\.?\/?layouts\//.test(o),i=`all <${t}> in this ${a?"project":"document"}`;return a?jt(i,t):{kind:"document",label:i}}function jt(e,t){if(t===null)return{affected:"how many pages that is, is unknown",kind:"project",label:e};let o={tagName:t};Q.usageRevision;let r=qd(o);if(r===null)La(o).then(()=>{if(qd(o)!==null)Q.usageRevision+=1});return{kind:"project",label:e,affected:Vn(r),affectedFiles:r?.status==="ready"?cv(r.result):[],showAffected:Q.showAffected,onToggleAffected:()=>{Q.showAffected=!Q.showAffected}}}function Vn(e){if(e===null||e.status==="pending")return"counting the elements it affects…";if(e.status!=="ready")return"how many elements that is, is unknown";let{files:t,refsTotal:o}=e.result;if(o===0)return"no element in the project uses it yet";return`${o} element${o===1?"":"s"} in ${t.length} file${t.length===1?"":"s"}`}function Dn(e,t,o,r){let a=[{key:"element",label:e,title:"What these edits are pointed at — click to find it in the Outline",onActivate:()=>B("view.setActivity",{tab:"layers"})},{key:"media",label:o&&t?`@${ji(t)}`:"Base",title:"The breakpoint these edits land in. Choose it on the pane's Context control; click to manage breakpoints.",onActivate:()=>B("settings.open",{section:"contexts"})}];if(r)a.push({key:"scheme",label:`${ji(r)} variant`,title:"Edits land in this colour-scheme variant. Set the pane's Context control back to Auto to edit base styles; click to manage schemes.",onActivate:()=>B("settings.open",{section:"contexts"})});return a}function Bn(e){if(!n(e))return null;return/\$\{\s*(?:state\.)?([A-Za-z_$][\w$]*)/.exec(e)?.[1]??null}function Hn(e){return n(e)&&e.includes("${")}function ge(e,t){if(t.mixed?.props.has(e))return{state:"mixed",donor:String(t.mixed.count),onClick:()=>t.clear(e)};let o=t.active[e];if(o!==void 0&&t.own[e]===void 0)return{state:"inherited",donor:"site tokens",title:`Inherited from the project's site tokens — ${e} is not set on this document`};if(o!==void 0){if(Hn(o)){let a=Bn(o),i={state:"bound"};if(a){if(i.donor=a,t.signals.includes(a))i.onClick=()=>{B("view.setActivity",{tab:"data"}),B("data.expandRow",{name:a})}}return i}return{state:"set",onClick:()=>t.clear(e)}}let r=t.inherited[e];if(r){let a={state:"inherited",donor:r.donor};if(r.jump)a.onClick=r.jump;return a}return{state:"default"}}function Ft(e,t,o){let r=[e,...U(e).map((i)=>i.name)],{mixed:a}=t;if(a&&r.some((i)=>a.props.has(i))){let i={state:"mixed",donor:String(a.count)};if(o)i.onClick=o;return i}for(let i of r){let s=ge(i,t);if(s.state==="default")continue;return s.state==="set"&&o?{...s,onClick:o}:s}return Pn}function _n(e,t,o,r,a){let{mixed:i}=r;if(i&&(i.props.has(e)||o&&i.props.has(t)))return{state:"mixed",donor:String(i.count),onClick:a};let s=ge(e,r);if(s.state==="set"||s.state==="default"&&o)return{state:"set",onClick:a};return s}function Wn(e,t){return e.map(({prop:o,entry:r})=>wh(r)==="shorthand"?Ft(o,t).state:ge(o,t).state)}var F=new Map,Ve=new Map,De=null,Fe=new Map;function O(e){return F.get(e)}function zn(e){return/^-?\d*\.?\d*$/.test(e)}function Un(e,t,o){let r=e.$buttonValues||e.enum||[],a=e.$icons||{},{$buttonValues:i,enum:s}=e,l=i&&s&&s.length>i.length?s.filter((c)=>!i.includes(c)):[];return{buttons:r.map((c)=>{let C=a[c]??"";return{icon:C,row:t,checked:c===o?"true":"false",text:C===""?c:"",title:c,value:c}}),extra:l}}function Vt(e){return e.includes("-")?e0(e):e.replace(/^./,(t)=>t.toUpperCase())}function qn(e,t){return e.map((o)=>({checked:o===t,label:Vt(o),value:o}))}function Gn(e,t,o){let r=kt.get(t);return e.map((a)=>{let i={label:Vt(a),value:a};if(r)i[r]=a,i.face=o;return i})}function Yn(e){let t=e.activeStyle.fontFamily??e.inheritedStyle.fontFamily;if(!n(t)&&!Y(t))return"";let o=Ac(wr(e.tab.doc.document.style),t);return o===void 0?"":String(o)}function Dt(e){return Array.isArray(e.presets)?e.presets:[]}function Kn(e){let t=wt(),o=wr(h.value?.doc.document?.style),r=t.map((a)=>({description:a.name,face:String(Ac(o,a.value)??a.value),label:t0(a.name,"--font-"),value:a.name}));for(let a of Dt(e)){let i=Sv(a.title,"--font-");if(!t.some((s)=>s.name===i))r.push({face:a.value,label:a.title,value:i})}return r}function Et(e,t,o,r){let a=t.trim();if(!a.startsWith("--")){r(t);return}if(o&&wr(h.value?.doc.document?.style)[a]===void 0){let i=Dt(e).find((s)=>Sv(s.title,"--font-")===a);if(i)Z(h.value,(s)=>Zm(s,[],a,i.value))}r(fw(a))}function q(e,t,o){return{buttons:[],child:!1,chip:"none",chipState:"default",chipText:"",chipTitle:"",choicesHint:"",choicesLabel:"",expandIcon:"caret-right",expandLabel:"",expanded:!1,hasChoices:!1,hasLabel:!1,hasSource:!1,hasTokens:!1,key:e,kind:o,label:"",max:"",min:"",mono:!1,name:"",openTitle:"",options:[],overflowSelected:!1,placeholder:"",prop:t,removeLabel:"",resolved:"",sourceHint:"",sourceLabel:"",sourceState:"literal",span:!1,step:"",tokens:[],value:"",warning:!1,widget:"text"}}function Bt(e,t,o){if(o.state==="default"){e.chip="none";return}if(e.chipState=o.state,e.chipText=eS(o),e.chipTitle=fm(e.prop,o),o.onClick)e.chip="button",t.chip=o.onClick;else e.chip="text"}function Xn(){return Od("styleProperty").filter((e)=>e!=="ref")}function Ht(e,t,o,r,a){let i=`${e.coord}|${o}${a.child?"|child":""}`,s=q(i,o,"field"),l={},d=wh(t),c=Ie().get(o)??"",C=a.placeholder||c,y=(p)=>a.onCommit(p===""?void 0:p);if(s.label=e1(t,o),s.hasLabel=!0,s.child=a.child===!0,s.warning=a.warning===!0,s.span=a.span===!0,s.value=r,s.placeholder=C,Bt(s,l,a.provenance),!a.child){let p=Xn(),m=`${e.coord}|${o}`,T=zu(m,r===""?void 0:r);if(s.hasSource=!0,s.sourceState=T,s.sourceLabel=Wo[T],s.sourceHint=`Value source: ${Wo[T]} — click to change`,l.source={caps:p,fieldKey:m,mode:T,onChange:(w)=>a.onCommit(w===void 0||w===""?void 0:String(w)),stateDefs:e.templateSignals,value:r===""?void 0:r},T==="template")return s.widget="text",s.mono=!0,s.placeholder="${state.…}",l.commit=(w)=>a.onCommit(w===""?void 0:w),{actions:l,row:s}}switch(d){case"color":{s.widget="color",s.tokens=nS(),s.hasTokens=s.tokens.length>0,s.resolved=iS(r),l.edit=y,l.commit=y,l.debounceId=`color:${i}`;break}case"button-group":{let{buttons:p,extra:m}=Un(t,i,r);s.widget="buttons",s.buttons=p,s.hasChoices=m.length>0,s.overflowSelected=m.includes(r),s.choicesLabel="",s.choicesHint=`More ${s.label.toLowerCase()} values`,l.choices=qn(m,r),l.choose=y;break}case"number-unit":{let p=t.$units??[],m=t.$keywords??[],T=pe.exec(r),w=!T&&r!==""&&m.includes(r),L=w?p[0]??"":T?.[2]??p[0]??"";s.widget="group",s.value=Qn(r,T,w),s.placeholder=Zn(C),s.hasChoices=p.length>0||m.length>0,s.choicesLabel=L||p[0]||"",s.choicesHint=`Unit for ${s.label.toLowerCase()}`,l.choices=[...p.map((A)=>({checked:A===L,label:A,value:A})),...m.map((A,j)=>{let f={checked:A===r,label:A,value:A};if(j===0&&p.length>0)f.divider=!0;return f})],l.choose=(A)=>{if(m.includes(A)){a.onCommit(A);return}let j=pe.exec(r)?.[1];if(j)a.onCommit(j+A)};{let A=(j)=>{let f=j.trim();if(f===""){a.onCommit("");return}a.onCommit(zn(f)&&p.length>0?f+L:f)};l.edit=A,l.commit=A,l.debounceId=`nui:${i}`}break}case"number":{s.widget="number",s.min=t.minimum===void 0?"":String(t.minimum),s.max=t.maximum===void 0?"":String(t.maximum),s.step=t.maximum!==void 0&&t.maximum<=1?"0.1":"",l.commit=y;break}case"select":case"combobox":{let p=Array.isArray(t.enum)?t.enum:Array.isArray(t.examples)?t.examples:[];if(s.widget="keywords",o==="fontFamily")s.value=yp(r)??r,s.options=Kn(t),l.edit=(m)=>Et(t,m,!1,y),l.commit=(m)=>Et(t,m,!0,y);else s.options=Gn(p,o,Yn(e)),l.edit=y,l.commit=y;l.debounceId=`kw:${i}`;break}default:{s.widget="text",l.edit=y,l.commit=y,l.debounceId=`text:${i}`;break}}return{actions:l,row:s}}function Qn(e,t,o){if(o)return e;if(t)return t[1]??"";if(e==="")return"";let r=Number.parseFloat(e);return Number.isNaN(r)?e:String(r)}function Zn(e){return pe.exec(e)?.[1]??e}function eo(e,t,o){let r=U(o),a=e.activeStyle,i=a[o],s=r.some((b)=>a[b.name]!==void 0),l=e.tab.session.ui.styleShorthands[o]??s,d=i!==void 0||s,c=e.inheritedStyle,C=(b)=>Z(h.value,(S)=>{for(let P of r)e.mutate(S,P.name);e.mutate(S,o,b)}),y=()=>Z(h.value,(b)=>{e.mutate(b,o);for(let S of r)e.mutate(b,S.name)}),p=`${e.coord}|${o}`,m=q(p,o,"shorthand"),T={};m.widget="shorthand",m.hasLabel=!0,m.label=e1(t,o),m.value=n(i)?i:"",m.placeholder=no(i,r,a,c,o),m.expanded=l,m.expandIcon=l?"caret-down":"caret-right",m.expandLabel=`${l?"Collapse":"Expand"} ${m.label.toLowerCase()}`,Bt(m,T,Ft(o,e.provCtx,d?y:void 0)),T.edit=(b)=>C(b||void 0),T.commit=(b)=>C(b||void 0),T.debounceId=`short:${p}`,T.toggle=()=>{let b=h.value;if(b)b.session.ui.styleShorthands={...b.session.ui.styleShorthands,[o]:!l}};let w=[{actions:T,row:m}];if(!l)return w;let L=t.$shorthandType==="border-side",A=n(i)&&i?L?vt(i):$t(i,r.length):null,j=L?xt:bt,f=L?"":"0",k=(b,S)=>C(j(r.map((P,M)=>String(M===b?S:a[P.name]??(A?A[M]:f)))));for(let[b,{name:S,entry:P}]of r.entries()){let M=a[S]??(A?A[b]:""),be=M!==void 0&&M!=="";w.push(Ht(e,P,S,String(M??""),{child:!0,onCommit:(J)=>k(b,J||f),placeholder:!M&&c[S]!==void 0?String(c[S]):"",provenance:_n(S,o,be,e.provCtx,()=>k(b,f))}))}return w}function no(e,t,o,r,a){if(e)return"";if(t.some((i)=>o[i.name]!==void 0))return t.map((i)=>o[i.name]||"0").join(" ");if(r[a]!==void 0)return String(r[a]);if(t.some((i)=>r[i.name]!==void 0))return t.map((i)=>r[i.name]||"0").join(" ");return""}var oo="Variables are edited in the view itself. Switch the view to Elements and pick a tag to style its default here.";function ee(e,t){return{emptyActionLabel:t?Mc().label:"",emptyMessage:e,filter:"",hasEmptyAction:t,sections:[],view:"empty"}}function At(e){F=new Map;let t=h.value;if(!t)return ee("Open a page to style what you click.",!0);if(e()===am)return ee(oo,!1);if(e()==="stylebook"&&u.stylebook.selection){let a=t.doc.document;if(!Jn(a))return ee("Open a page to style what you click.",!0);return Lt(t,a,{effectiveStyle:wr(a.style),stylebookSelector:u.stylebook.selection})}let o=Oe(t.session.selection);if(!o)return ee(mm("style it"),!1);let r=oe(t.doc.document,o);if(!r)return ee(vb(),!1);return Lt(t,r,{})}function Lt(e,t,o){let{effectiveStyle:r,stylebookSelector:a=null}=o,i=Oe(e.session.selection)??[],s=t.style||{},l=r??s,d=Object.entries(e.doc.document.state||{}).filter(([,x])=>!(v(x)&&x.$handler)&&!Ha(x)).map(([x])=>x),{sizeBreakpoints:c}=Hr(to(e.doc.document.$media)),C=c.map((x)=>x.name),y=e.session.ui.activeMedia||null,{activeSelector:p}=e.session.ui,m=e.session.ui.previewColorScheme,T=y===null&&(m==="light"||m==="dark")?Object.entries(to(e.doc.document.$media)).find(([,x])=>Mp(String(x))===m)?.[0]??null:null,w=y&&C.length>0?y:T,L=w?Di(l,`@${w}`)??{}:l,A=new Set(Object.keys(L).filter((x)=>s0(x))),j=a&&he(a)?a:null,f=j?.split(" ").at(-1)??null,k=j?Object.keys(Ot(l,j)).filter((x)=>s0(x)):[],b=j?[...new Set([...[...je({tagName:f??"div"}),...k].map((x)=>`${j} ${x}`),...p&&p!==j?[p]:[]])]:[...new Set([...je(t),...A,...p?[p]:[]])],S=In(a),P=S??(n(t.tagName)?t.tagName:"element");ht({segments:Dn(P,y,C.length>0,T),selector:{value:j&&p===j?null:p,options:b,declared:j?new Set(k.map((x)=>`${j} ${x}`)):A,onSelect:(x)=>{let I=h.value;if(!I)return;if(I.session.ui.activeSelector=x??j,x?.startsWith(":popover-open"))B("canvas.setPopoverOpen",{open:!0});if((x?.startsWith("[open]")||x?.startsWith(":modal"))&&TC(I)!==null)B("canvas.setDialogOpen",{open:!0})},onAddCustom:()=>{Fn("Add Selector",{confirmLabel:"Use",message:"A state or nested rule to edit under this element.",placeholder:":hover, .child, &.active, [attr]",validate:(x)=>s0(x.trim())?"":'A selector must start with ":", ".", "&" or "[".'}).then((x)=>{if(x&&h.value)h.value.session.ui.activeSelector=j?`${j} ${x.trim()}`:x.trim()})}},scope:Rn(e,S)});let M=fe(l,p,w),be=l===s?M:fe(s,p,w),J=e.session.selection.length>0?e.session.selection:[i],_e=(x,I,W)=>{for(let Zt of J)Rt(Zt,p,w)(x,I,W)},We=(x,I)=>Z(h.value,(W)=>_e(W,x,I)),G={};if(T){let x=p?Di(l,p)??{}:l;for(let[I,W]of Object.entries(x))if(ce(W))G[I]={value:W??"",donor:"Base",jump:()=>Na(h.value,"previewColorScheme","auto")}}else for(let[x,I]of Object.entries(at(l,C,y,p)))G[x]={value:I.value,donor:I.donor===null?"Base":ji(I.donor),jump:()=>Na(h.value,"activeMedia",I.donor)};if(j)for(let[x,I]of Object.entries(dt(l,j,w)))G[x]??={donor:I.donor,value:I.value};let ze={};for(let[x,I]of Object.entries(G))ze[x]=I.value;let Ue=Mn(e,J,p,w),qe={own:be,active:M,inherited:G,signals:d,clear:(x)=>We(x)};if(Ue.size>0)qe.mixed={count:J.length,props:Ue};let Ge=yt({style:M},e.session.ui.styleSections);if(JSON.stringify(Ge)!==JSON.stringify(e.session.ui.styleSections))e.session.ui.styleSections=Ge;let Xt=(e.session.ui.styleFilter||"").toLowerCase(),ve={activeSelector:p,activeStyle:M,commit:We,coord:`style|${i.join("/")}|${w??""}|${p??""}`,editMedia:w,filter:Xt,inheritedStyle:ze,mutate:_e,provCtx:qe,tab:e,targets:J,templateSignals:d},Qt=[...ro(ve),...io(ve),...so(ve)];return{emptyActionLabel:"",emptyMessage:"",filter:e.session.ui.styleFilter||"",hasEmptyAction:!1,sections:Qt,view:"editor"}}function Pt(e){return F.set(e.row.key,e.actions),e.row}function ro(e){let{activeStyle:t,tab:o}=e,r=e.filter.length>0,a={};for(let s of V.$sections)a[s.key]=[];for(let[s,l]of Object.entries(D)){if(n(l.$shorthand))continue;a[l.$section||"other"].push({entry:l,prop:s})}for(let s of V.$sections)a[s.key].sort((l,d)=>l.entry.$order-d.entry.$order);let i=[];for(let s of V.$sections){if(s.key==="other")continue;let l=a[s.key],d=l.filter(({prop:m,entry:T})=>{if(t[m]!==void 0)return!0;return wh(T)==="shorthand"&&U(m).some((w)=>t[w.name]!==void 0)}),c=()=>{Z(h.value,(m)=>{for(let{prop:T,entry:w}of d){if(t[T]!==void 0)e.mutate(m,T);if(wh(w)==="shorthand")for(let L of U(T))e.mutate(m,L.name)}})},C=tS(Wn(l,e.provCtx)),y=r?!0:o.session.ui.styleSections[s.key]??!1,p=Be(s.key,s.label,y,C,{canClear:d.length>0,clearTitle:`Clear all ${s.label.toLowerCase()} properties`,layout:s.$layout==="grid"?"grid":"",onClear:c});if(y)p.rows=ao(e,l,s.$layout==="grid");if(r&&p.rows.length===0)continue;i.push(p)}return i}function ao(e,t,o){let{activeStyle:r}=e,a=[];for(let{prop:i,entry:s}of t){let l=r[i],d=l!==void 0,c=gt(s,r),C=wh(s);if(!d&&!c)continue;if(e.filter){let m=e1(s,i).toLowerCase();if(!i.includes(e.filter)&&!m.includes(e.filter))continue}if(C==="shorthand"){let m=U(i);if(!(d||m.some((w)=>r[w.name]!==void 0))&&!c)continue;for(let w of eo(e,s,i))a.push(Pt(w));continue}let y=e.inheritedStyle[i],p=Ht(e,s,i,String(l??""),{onCommit:(m)=>e.commit(i,m||void 0),placeholder:!d&&y!==void 0?String(y):"",provenance:ge(i,e.provCtx),span:o&&s.$span===2,warning:d&&!c});a.push(Pt(p))}return a}function Be(e,t,o,r,a){let i=[];if(r.inherited>0)i.push({state:"inherited"});if(r.bound>0)i.push({state:"bound"});if(r.mixed>0)i.push({state:"mixed"});let s=r.set>0&&a.canClear;if(s)Ve.set(e,a.onClear);return{canClear:s,clearTitle:a.clearTitle,hasMarks:i.length>0,key:e,label:t,layout:a.layout,marks:i,open:o,rows:[],tally:GD(r)}}function io(e){let t=[];for(let[s,l]of Object.entries(e.activeStyle))if(xl(l)&&!s.startsWith("@"))t.push(s);if(t.length===0)return[];let o=e.tab.session.ui.styleSections.nested??!0,r=Be("nested","Relative Styling",o,tS([]),{canClear:!1,clearTitle:"",layout:"",onClear:()=>{}});if(!o)return[r];for(let s of t){let l=`${e.coord}|nested|${s}`,d=q(l,s,"nested");d.widget="nested",d.name=s,d.openTitle=`Edit ${s} under this rule`,d.removeLabel=`Remove ${s}`,F.set(l,{chip:()=>e.commit(s),open:()=>{let c=e.activeSelector?`${e.activeSelector} ${s}`:s;Ld(c,void 0,{panCanvas:!0})}}),r.rows.push(d)}let a=`${e.coord}|nested|+add`,i=q(a,"+add","nested-add");return i.widget="nestedadd",F.set(a,{}),r.rows.push(i),De=()=>{Fn("Add Nested Selector",{confirmLabel:"Add",message:"Enter a selector to nest under the current rule.",placeholder:"th, :hover, .active",validate:(s)=>s.trim()?"":"Enter a selector."}).then((s)=>{if(s)e.commit(s,{})})},[r]}function so(e){let t=[];for(let d of Object.keys(e.activeStyle))if(!D[d]){if(_(e.activeStyle[d]))continue;t.push(d)}let o=e.tab.session.ui.styleSections.other??t.length>0,r=Be("other","Custom",o,tS([]),{canClear:!1,clearTitle:"",layout:"",onClear:()=>{}});if(!o)return[r];let a=Ie(),i=(d,c)=>{let C=oe(d.doc.document,c);return fe(C?.style??{},e.activeSelector,e.editMedia)};for(let d of t){let c=`${e.coord}|custom|${d}`,C=q(c,d,"custom");C.widget="kv",C.name=d,C.value=String(e.activeStyle[d]),C.placeholder=a.get(d)??"",C.removeLabel=`Remove ${d}`,F.set(c,{chip:()=>e.commit(d),debounceId:`custom:${c}`,edit:(y)=>e.commit(d,y),rename:(y)=>{let p=y.trim();if(!p||p===d)return;Z(h.value,(m)=>{for(let T of e.targets){let w=i(m,T)[d];if(w===void 0)continue;let L=Rt(T,e.activeSelector,e.editMedia);L(m,d),L(m,p,String(w))}})}}),r.rows.push(C)}let s=`${e.coord}|custom|+add`,l=q(s,"+add","custom-add");return l.widget="kvadd",F.set(s,{add:(d)=>{let c=d.trim();if(!c)return!1;return e.commit(c,a.get(c)||""),!0}}),r.rows.push(l),[r]}var lo="style-value",ne=null;function Jt(){let e=ne;ne=null,e?.close()}function Mt(e,t,o,r){if(Jt(),!e||o.length===0)return;ne=zt({label:t,onClosed:(a)=>{if(ne===a)ne=null},opener:e,region:lo,rows:o.map((a)=>{let i={destructive:!1,disabled:!1,dividerAbove:a.divider===!0,id:a.value,title:a.label};if(a.checked!==void 0)i.checked=a.checked?"true":"false";return i}),run:(a)=>r(a)})}var co={addCustom:(e,t)=>{let o=O(e)?.add;if(!o||!(t instanceof HTMLInputElement))return;if(o(t.value))t.value=""},addNested:()=>De?.(),chipClick:(e)=>O(e)?.chip?.(),clearSection:(e)=>Ve.get(e)?.(),commitText:(e,t)=>{let o=O(e);if(!o)return;if(o.debounceId)FM(o.debounceId);o.commit?.(t)},editText:(e,t)=>{let o=O(e);if(!o?.edit)return;if(o.debounceId){a0(o.debounceId,400,o.edit)(t);return}o.edit(t)},openNested:(e)=>O(e)?.open?.(),pickChoice:(e,t)=>{let o=O(e);if(!o?.choose||!o.choices)return;let{choose:r}=o;Mt(t instanceof HTMLElement?t:null,"Values",o.choices,(a)=>r(a))},pickSource:(e,t)=>{let o=O(e)?.source;if(!o)return;Mt(t instanceof HTMLElement?t:null,"Value source",o.caps.map((r)=>({checked:r===o.mode,label:`${Wo[r]} — ${CS[r]}`,value:r})),(r)=>{let a=o.caps.find((i)=>i===r);if(a===void 0||a===o.mode)return;o.onChange(Md(o.fieldKey,o.mode,a,Ce(o.value),Wu(a,{stateDefs:o.stateDefs})))})},pressButton:(e,t)=>{O(e)?.choose?.(t===po(e)?"":t)},renameCustom:(e,t)=>O(e)?.rename?.(t),runEmptyAction:()=>Mc().run(),setFilter:(e)=>{let t=h.value;if(t)t.session.ui.styleFilter=e},toggleSection:(e,t)=>{let o=h.value;if(!o)return;o.session.ui.styleSections={...o.session.ui.styleSections,[e]:t}},toggleShorthand:(e)=>O(e)?.toggle?.()};function po(e){return Fe.get(e)??""}var ue=null,_t=()=>"edit",Re=_t;function It(e){Fe=new Map;for(let t of e.sections)for(let o of t.rows)if(o.widget==="buttons")Fe.set(o.key,o.buttons.find((r)=>r.checked==="true")?.value??"")}function He(e,t){if(Jt(),ue?.scope.stop(),ue?.handle.dispose(),ue=null,F=new Map,Ve=new Map,De=null,!e)return;Re=t?.getCanvasMode??_t;let o=At(Re);It(o);let r=Nt(e,o,co,{target:(s)=>ft(s??void 0)}),a=t?.isShowing??(()=>!0),i=me();i.run(()=>{te(()=>{if(!a())return;let s=At(Re);It(s),r.update(s)})}),ue={handle:r,host:e,scope:i}}function uo(){let e=(t)=>t.document.open&&t.selection.count>0;return[{category:"View",id:"style.openSelectorMenu",level:"selection",menus:["palette"],group:"8_style",requires:"the Style tab showing a selected element",when:e,run:()=>Le(),title:"Open Selector Menu"},{args:{additionalProperties:!1,properties:{selector:fo()},required:["selector"],type:"object"},category:"View",id:"style.setSelector",level:"selection",menus:["palette"],group:"8_style",requires:"an element selection",when:e,run:(t,o)=>mo(o),title:"Set Style Selector"}]}function mo(e){if(e.selector===null){let r=h.value;if(r)r.session.ui.activeSelector=null;return}let t=St("style.setSelector",e,"selector");if(!s0(t))throw RangeError(`command "style.setSelector" argument "selector": "${t}" is not a nested `+'selector — it must start with ":", ".", "&" or "["');let o=h.value;if(!o)throw RangeError('command "style.setSelector" needs an open document');o.session.ui.activeSelector=t}function fo(){return{description:'A nested selector such as ":hover", ".child" or "[open]". null edits the base context.',oneOf:[{type:"string"},{type:"null"}]}}function ZR(e){e.registerAll(uo())}var Wt={$schema:"https://jxsuite.com/schema/v1",$id:"StudioInspectorDock",$description:"The Inspector dock's own chrome, as a Jx document over the kit: a header naming the tab and what the dock is pointed at, a real `tablist` of three tabs (Page · Element · Assistant, specs/studio.md §6), and a `tabpanel` per tab. It draws no tab BODY: each of the five leaves (the Page tab's body, Element's Content, Style and Logic, and the Assistant) is a mounted document of its own, so each leaf carries one empty `[part=\"panel-body\"]` island the adapter announces through `onNodeCreated` (studio-ui-guidelines.md §9.4). Element hosts three leaves behind a sub-switch, a single-select `jx-action-group` inside its panel; the other two tabs host one leaf each and draw no switch. Tabs and leaves are keyed on their ids and neither list ever changes, so a body host is created ONCE and lives as long as the dock: the hidden leaves stay mounted, which is what keeps a half-typed value and the Assistant's transcript alive across a switch. `panels/right-panel.ts` keeps every decision — which leaf is selected, per document or detached; what the Page tab is called for this document; what the target's name is; and which seam a host is handed to.",tagName:"div",attributes:{part:"inspector-dock"},style:{$description:"`styles/inspector.css`'s dock rules, carried in. Three of them were `#right-panel > .panel-*` — a direct-child selector that only held while this module rendered flat into the shell cell — and they are `[part]` rules on the document's own children now, which is the same statement without depending on how deep the dock is mounted. The header's typography is `panels.css`'s `.panel-header*`, at the same values: `--spectrum-font-size-50` resolved only inside `<sp-theme>` and a document mounts outside it, so it is `--jx-text-sm` (11px) here.",display:"flex",flexDirection:"column",height:"100%",minHeight:"0",fontFamily:"var(--jx-font-sans)",color:"var(--fg)",'& [part="header"]':{display:"flex",flex:"0 0 auto",alignItems:"baseline",gap:"var(--jx-space-2)",padding:"6px var(--jx-space-3)",borderBottom:"1px solid var(--border)"},'& [part="header-title"]':{fontSize:"var(--jx-text-sm)",fontWeight:"700",letterSpacing:"0.06em",textTransform:"uppercase",color:"var(--fg)"},'& [part="header-target"]':{overflow:"hidden",fontSize:"var(--jx-text-sm)",color:"var(--fg-dim)",textOverflow:"ellipsis",whiteSpace:"nowrap","::before":{$description:"The separator between the tab's name and its target, drawn rather than written into the string — `panels/right-panel.ts` states what the dock is pointed at and nothing about punctuation.",content:'"·"',marginRight:"var(--jx-space-2)"}},'& [part="tabs"]':{$description:"Three words in a 280px dock, allowed to compress rather than to become anonymous, which is why the tabs are not icons (§6). The kit tab's own 220px cap would let one tab push the last off the strip, so each takes an equal third.",flex:"0 0 auto",gap:"0",fontSize:"var(--jx-text-sm)"},'& [part="tab"]':{flex:"1 1 0",justifyContent:"center",minWidth:"0",maxWidth:"none",padding:"var(--jx-space-1) var(--jx-space-2)"},'& > [part="panel"]':{$description:"`#right-panel > .panel-body { flex: 1; min-height: 0; overflow-y: auto }`, now a flex column: Element's sub-switch sits above its leaves and must not scroll away with them. The kit's tab panel pads itself for a dialog; a dock's tab is the whole column and each body pads its own content. The child combinator is load-bearing: the leaves mount in this same light DOM, the Style leaf's root and every `jx-color-field`'s picker are also `part=\"panel\"`, and a descendant selector put this `overflow: hidden` on them. The Style root then clipped its own rows, so `panel-body` below saw nothing to scroll and every property past the fold was unreachable.",display:"flex",flexDirection:"column",flex:"1",minHeight:"0",padding:"0",overflow:"hidden"},'& > [part="panel"][hidden]':{$description:"Out of sight, out of the layout and out of the accessibility tree, but not `display: none`: a panel that left the box tree is restyled whole when it comes back, and the Inspector shows its Page panel on every deselect and on every close of the Assistant (§6), which made each of those a 300-element style recalculation. `content-visibility: hidden` skips the subtree while keeping its computed style, so a return restyles only what changed while it was away; `visibility: hidden` keeps it unfocusable and unexposed, as `hidden` means.",display:"flex",flex:"0 0 0",contentVisibility:"hidden",visibility:"hidden"},'& [part="panel-body"]':{display:"flex",flex:"1",flexDirection:"column",minHeight:"0",overflowY:"auto"},'& [part="subtabs"]':{$description:"Element's Content · Style · Logic switch. It is not a second tab strip: three views of the one selected node, so it is a single-select group inside the tab's body, and it does not count against the dock's four-tab cap (studio-ui-guidelines.md §12.2).",flex:"0 0 auto",padding:"var(--jx-space-2) var(--jx-space-3)",borderBottom:"1px solid var(--border)"},'& [part="subtab"]':{flex:"1 1 0",justifyContent:"center"},'& [part="leaf-empty"]':{margin:"0",padding:"var(--jx-space-6) var(--jx-space-4)",textAlign:"center",lineHeight:"1.5",fontSize:"var(--jx-text-md)",color:"var(--fg-dim)"},'& [part="panel-body"][data-tab="assistant"]':{$description:"The chat owns its own scrolling, so its body is a flex column that does not scroll.",overflow:"hidden"},'& [part="panel-body"][data-active="false"]':{$description:"A leaf that is not the one showing stays MOUNTED and is only taken out of the layout: it is a document with its own state, and rebuilding it on every switch would drop whatever it was holding. Hidden the way a hidden panel is (above), so switching back to it does not restyle it whole.",flex:"0 0 0",contentVisibility:"hidden",visibility:"hidden"}},children:[{tagName:"header",attributes:{part:"header"},children:[{tagName:"span",attributes:{part:"header-title"},textContent:"${state.title}"},{tagName:"span",attributes:{part:"header-target"},textContent:"${state.target}"}]},{tagName:"jx-tabs",attributes:{part:"tabs",selected:"${state.tab}"},$props:{label:"Inspector"},onchange:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/selectTab"},value:[{$ref:"event#/detail"}]}]},children:[{$prototype:"Array",items:{$ref:"#/state/tabs"},key:{$ref:"$map/item/key"},map:{tagName:"jx-tab",attributes:{part:"tab",id:"${$map.item.tabId}","data-tab":"${$map.item.key}",value:"${$map.item.key}",label:"${$map.item.title}",panel:"${$map.item.panelId}"}}}]},{$prototype:"Array",items:{$ref:"#/state/tabs"},key:{$ref:"$map/item/key"},map:{tagName:"jx-tab-panel",attributes:{part:"panel",id:"${$map.item.panelId}","data-tab":"${$map.item.key}"},$props:{active:{$ref:"$map/item/active"},labelledby:{$ref:"$map/item/tabId"}},children:[{tagName:"div",attributes:{part:"subtabs-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/hasLeaves"},cases:{true:{tagName:"jx-action-group",attributes:{part:"subtabs"},$props:{selects:"single",compact:!0,label:"${$map.item.title} view"},children:[{$prototype:"Array",items:{$ref:"$map/item/leaves"},key:{$ref:"$map/item/key"},map:{tagName:"jx-action-button",attributes:{part:"subtab","data-tab":"${$map.item.key}"},$props:{size:"sm",emphasized:!0,checked:{$ref:"$map/item/shown"}},onclick:{$prototype:"Function",body:[{operator:"call",target:{$ref:"#/state/selectTab"},value:[{$ref:"$map/item/key"}]}]},children:[{tagName:"span",textContent:"${$map.item.title}"}]}}]}}},{$prototype:"Array",items:{$ref:"$map/item/leaves"},key:{$ref:"$map/item/key"},map:{tagName:"div",attributes:{part:"leaf",role:"none","data-tab":"${$map.item.key}"},style:{display:"contents"},children:[{tagName:"div",attributes:{part:"leaf-empty-slot",role:"none"},style:{display:"contents"},$switch:{$ref:"$map/item/hasEmpty"},cases:{true:{tagName:"p",attributes:{part:"leaf-empty"},textContent:"${$map.item.empty}"}}},{$description:"The island. Every leaf is a mounted document of its own, so this stays EMPTY for the life of the dock — `panels/right-panel.ts` is handed it through `onNodeCreated` and passes it to that leaf's binder exactly once.",tagName:"div",attributes:{part:"panel-body","data-tab":"${$map.item.key}","data-active":"${$map.item.shown}","data-jx-region":"${$map.item.region}"}}]}}]}}]};E("inspector-dock",Wt);function go(e,t){e.title=t.title,e.target=t.target,e.tab=t.tab,e.tabs=t.tabs}function yo(e){let t=n(e)?void 0:e.attributes?.part;return n(t)?t:""}function $o(e){let t=e?.$map,o=v(t)?t.item:void 0;return v(o)?o:null}function Ut(e,t,o,r){let a=g({...t,selectTab:o.selectTab});e.textContent="",delete e._$litPart$;let i=null,s=!1;return R("inspector-dock",a,e,{onNodeCreated:(l,d,c,C)=>{if(!(l instanceof HTMLElement)||yo(c)!=="panel-body")return;let y=$o(C)?.key;if(n(y)&&y!=="")r.onBody(y,l)}}).then((l)=>{if(s){l.dispose();return}i=l}),{dispose(){s=!0,i?.dispose(),i=null},update:(l)=>{go(a,l)}}}var ye=null,$e=null,H=g({element:BC,tab:kx}),qt=new WeakMap;function bo(e,t,o){try{vo(e,t,o)}catch(r){console.error(`right-panel: the ${t} tab could not take its body:`,r)}}function vo(e,t,o){switch(t){case"page":{CE(o);break}case"assistant":{e.mountAssistant(o);break}case"events":{Ne(o);break}case"properties":{WE(o,{navigateToComponent:e.navigateToComponent});break}case"style":{He(o,{getCanvasMode:e.getCanvasMode,isShowing:()=>Hl()==="style"});break}default:break}}function XR(e){return H_.find((t)=>t.id===e)?.strip??"page"}function xo(){let e=h.value;return e?SE(e.documentPath):"Page"}function Yt(e){return e==="page"?xo():dE.find((t)=>t.id===e)?.title??e}function wo(e){let t=XR(e),o=h.value===null;return dE.map((r)=>{let a=H_.filter((i)=>i.strip===r.id).map((i)=>{let s=i.id==="page"&&o?kD:"";return{active:i.id===e,empty:s,hasEmpty:s!=="",key:i.id,region:qM(i.id),shown:i.id===e?"true":"false",title:i.title}});return{active:r.id===t,hasLeaves:a.length>1,key:r.id,leaves:a,panelId:`inspector-panel-${r.id}`,tabId:`inspector-tab-${r.id}`,title:Yt(r.id)}})}function eE(e){$e=Ut(of(II,"right-panel"),Kt(),{selectTab:(t)=>ko(t)},{onBody:(t,o)=>bo(e,t,o)}),ye=me(),ye.run(()=>{te(()=>{let t=h.value;if(u.layoutSelection,t)t.doc.document,t.doc.mode,t.doc.content,t.documentPath,t.session.selection.map((o)=>o.join("/")).join("|"),t.session.ui.rightTab,So(t);H.tab,tb()})})}function lF(){ye?.stop(),ye=null,$e?.dispose(),$e=null,Ne(null),WE(null),He(null),CE(null),H.tab=kx,H.element=BC}function So(e){let t=e.session.selection.length>0||u.layoutSelection!==null||om(e)!==null,o=qt.get(e);if(qt.set(e,t),o===void 0||o===t)return;let r=Hl();if(t&&r==="page")Iu(Je());else if(!t&&Ex(r))Iu("page")}function tE(){let e=h.value;return e!==null&&(e.session.selection.length>0||u.layoutSelection!==null)?Je():"page"}function Je(){let e=h.value,t=e?e.session.ui.elementTab:H.element;return Ex(t)?t:BC}function Kt(){let e=Hl(),t=XR(e);return{tab:t,tabs:wo(e),target:Co(e),title:Yt(t)}}function tb(){let e=Kt();if($e?.update(e),Hl()==="page")sw()}function Hl(){let e=h.value;if(!e)return H.tab;let t=e.session.ui.rightTab;return P$(t)?t:kx}function Iu(e){let t=h.value;if(t){if(t.session.ui.rightTab=e,Ex(e))t.session.ui.elementTab=e}else if(H.tab=e,Ex(e))H.element=e;tb()}function ko(e){let t=e==="element"?Je():e;if(t!==""&&t!==Hl()&&P$(t))Iu(t)}function Co(e){let t=h.value;if(!t)return"no document";if(e==="page")return Gt(t.documentPath);let o=u.layoutSelection;if(o)return`<${o.tagName||"element"}> in ${o.layoutFile||"the layout"}`;let r=om(t);if(r)return r;let a=t.session.selection,i=Oe(a);if(i)return a.length>1?`${a.length} elements`:kr(oe(t.doc.document,i));return Gt(t.documentPath)}function Gt(e){return e?e.split("/").at(-1)??"document":"document"}
-export{om,YR,ZR,XR,eE,lF,tE,tb,Hl,Iu};
-
-//# debugId=400FAD33E680716664756E2164756E21
-//# sourceMappingURL=studio-dn56z7sn.js.map