@jxsuite/studio 2.0.1 → 2.1.0

package/dist/chunks/studio-hbp1s8m9.js

@@ -0,0 +1,1817 @@
+import {
+  INSPECTOR_TABS,
+  selectStylebookTag
+} from "./studio-zv37yrfa.js";
+import {
+  allConditionsPass,
+  autoOpenSections,
+  bindableSignalNames,
+  collectCssParts,
+  compressBorderSide,
+  compressShorthand,
+  css_meta_default,
+  defaultAsString,
+  expandBorderSide,
+  expandShorthand,
+  getCssInitialMap,
+  getLonghands,
+  isColorPopoverOpen,
+  isCustomElementDoc,
+  isInspectorSectionOpen,
+  livePreviewExpression,
+  mapSignalsFor,
+  openLogicTarget,
+  parseMediaEntries,
+  renderPropertiesPanelTemplate,
+  renderStatementEditor,
+  schemeOfQuery,
+  setInspectorSection,
+  spTextField,
+  widgetForType
+} from "./studio-6nmjc5qk.js";
+import {
+  createPanelScheduler
+} from "./studio-8jpzqk5s.js";
+import {
+  VALUE_SOURCE_LABELS,
+  capsForPosition,
+  countProvenance,
+  renderDynamicSlot,
+  renderExpressionEditor,
+  renderFieldRow,
+  renderProvenanceChip,
+  renderProvenanceDots,
+  renderStaticKvRow,
+  slotMode,
+  switchSlotMode
+} from "./studio-c6s5getc.js";
+import {
+  live
+} from "./studio-xmvbhg31.js";
+import {
+  loadUsages,
+  peekUsages,
+  usageFiles
+} from "./studio-f12h6177.js";
+import {
+  clickAnythingTo,
+  mediaDisplayName,
+  openPageAction,
+  renderEmptyState,
+  staleSelectionMessage
+} from "./studio-v96qfnww.js";
+import {
+  DEFAULT_INSPECTOR_TAB,
+  REGION_ATTR,
+  activeRegistry,
+  activeTab,
+  effect,
+  effectScope,
+  getEffectiveMedia,
+  getEffectiveStyle,
+  inferInputType,
+  inspectorStatementsRegion,
+  inspectorTabRegion,
+  isInspectorTabId,
+  mutateAddDef,
+  mutateAddSwitchCase,
+  mutateRemoveSwitchCase,
+  mutateRenameSwitchCase,
+  mutateUpdateMediaNestedStyle,
+  mutateUpdateMediaNestedStylePath,
+  mutateUpdateMediaStyle,
+  mutateUpdateNestedStyle,
+  mutateUpdateNestedStylePath,
+  mutateUpdateProperty,
+  mutateUpdateStyle,
+  primarySelection,
+  propLabel,
+  reactive,
+  shell,
+  showPromptDialog,
+  stringArg,
+  transactDoc,
+  unifyValues
+} from "./studio-41exgzhq.js";
+import {
+  classMap,
+  ifDefined
+} from "./studio-ckwz4d3x.js";
+import {
+  ref
+} from "./studio-p471gg5n.js";
+import {
+  html,
+  nothing,
+  render
+} from "./studio-5x5774ak.js";
+import {
+  COMMON_SELECTORS,
+  debouncedStyleCommit,
+  getEventBinding,
+  getNestedStyle,
+  getNodeAtPath,
+  isExpressionDef,
+  isFunctionDef,
+  isJsonObject,
+  isNestedSelector,
+  isRef,
+  nodeLabel,
+  renderOnly,
+  rightPanel,
+  updateUi
+} from "./studio-cjm7fdjf.js";
+
+// src/panels/events-panel.ts
+var EVENT_NAMES = [
+  "onclick",
+  "oninput",
+  "onchange",
+  "onsubmit",
+  "onkeydown",
+  "onkeyup",
+  "onfocus",
+  "onblur",
+  "onmouseenter",
+  "onmouseleave"
+];
+function eventNameOptions(declared) {
+  const seen = new Set;
+  const out = [];
+  for (const name of [...declared, ...EVENT_NAMES]) {
+    if (!seen.has(name)) {
+      seen.add(name);
+      out.push({ label: name, value: name });
+    }
+  }
+  return out;
+}
+var HANDLER_MODES = capsForPosition("eventHandler");
+function seedForHandlerMode(mode, functionDefs) {
+  if (mode === "function") {
+    return { $prototype: "Function", body: "", parameters: [] };
+  }
+  if (mode === "expression") {
+    return { $expression: { operator: "=", target: null } };
+  }
+  const [firstFn] = functionDefs;
+  return firstFn ? { $ref: `#/state/${firstFn[0]}` } : { $ref: "" };
+}
+function bindableFieldRow({
+  prop,
+  label,
+  rawValue,
+  onChange,
+  onClear,
+  extraSignals = null,
+  fieldKey,
+  caps
+}) {
+  const defs = activeTab.value.doc.document.state || {};
+  const boundRef = isRef(rawValue) ? rawValue.$ref : null;
+  const staticVal = slotMode(rawValue) === "literal" ? rawValue ?? "" : "";
+  const literalDefault = boundRef ? defaultAsString(defs[boundRef.startsWith("#/state/") ? boundRef.slice(8) : boundRef]) || undefined : undefined;
+  const slot = renderDynamicSlot({
+    caps,
+    extraSignals,
+    fieldKey,
+    literalDefault,
+    onChange,
+    staticWidget: spTextField(`prop:${label}`, String(staticVal), (v) => onChange(v)),
+    stateDefs: bindableSignalNames(activeTab.value.doc.document),
+    value: rawValue
+  });
+  return renderFieldRow({
+    hasValue: rawValue !== undefined && rawValue !== "",
+    label,
+    labelExtra: slot.modeButton,
+    prop,
+    widget: slot.widget,
+    ...onClear ? { onClear } : {}
+  });
+}
+function renderRepeaterFieldsTemplate(node, path) {
+  const key = path.join("/");
+  const clear = (name) => () => transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, name));
+  const optional = (name, label) => bindableFieldRow({
+    caps: name === "filter" ? "repeaterFilter" : "repeaterSort",
+    fieldKey: `prop|${key}|${name}`,
+    label,
+    onChange: (v) => transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, name, v || undefined)),
+    onClear: clear(name),
+    prop: name,
+    rawValue: node[name]
+  });
+  return html`
+    ${bindableFieldRow({
+    caps: "repeaterItems",
+    fieldKey: `prop|${key}|items`,
+    label: "Items",
+    onChange: (v) => transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "items", v)),
+    prop: "items",
+    rawValue: node.items
+  })}
+    ${optional("filter", "Filter")} ${optional("sort", "Sort")}
+    ${node.map ? html`
+            <sp-action-button
+              size="s"
+              class="logic-edit-template"
+              @click=${() => {
+    activeTab.value.session.selection = [[...path, "map"]];
+  }}
+              >Edit template →</sp-action-button
+            >
+          ` : nothing}
+  `;
+}
+function renderSwitchFieldsTemplate(node, path, mapSignals) {
+  const caseNames = Object.keys(node.cases || {});
+  return html`
+    ${bindableFieldRow({
+    caps: "switchDiscriminant",
+    extraSignals: mapSignals,
+    fieldKey: `prop|${path.join("/")}|$switch`,
+    label: "Expression",
+    onChange: (v) => transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, path, "$switch", v)),
+    prop: "$switch",
+    rawValue: node.$switch
+  })}
+    <div class="logic-subhead">Cases</div>
+    ${caseNames.map((caseName) => {
+    let debounce;
+    return renderFieldRow({
+      hasValue: true,
+      label: "Case",
+      prop: `case:${caseName}`,
+      provenance: {
+        onClick: () => transactDoc(activeTab.value, (t) => mutateRemoveSwitchCase(t, path, caseName)),
+        state: "set",
+        title: `Remove case "${caseName}"`
+      },
+      widget: html`
+          <div class="logic-case-row">
+            <sp-textfield
+              size="s"
+              class="logic-case-name"
+              .value=${live(caseName)}
+              @input=${(e) => {
+        clearTimeout(debounce);
+        const next = e.target.value;
+        debounce = setTimeout(() => {
+          if (next && next !== caseName) {
+            transactDoc(activeTab.value, (t) => mutateRenameSwitchCase(t, path, caseName, next));
+          }
+        }, 500);
+      }}
+            ></sp-textfield>
+            <sp-action-button
+              size="xs"
+              quiet
+              class="logic-case-open"
+              title="Edit case"
+              @click=${(e) => {
+        e.stopPropagation();
+        activeTab.value.session.selection = [[...path, "cases", caseName]];
+      }}
+              >→</sp-action-button
+            >
+          </div>
+        `
+    });
+  })}
+    <span
+      class="kv-add"
+      @click=${() => {
+    transactDoc(activeTab.value, (t) => mutateAddSwitchCase(t, path, `case${caseNames.length + 1}`));
+  }}
+      >+ Add case</span
+    >
+  `;
+}
+function commitToTargets(targets, key, value) {
+  transactDoc(activeTab.value, (t) => {
+    for (const target of targets) {
+      mutateUpdateProperty(t, target, key, value);
+    }
+  });
+}
+function mixedEventCount(doc, targets, evKey) {
+  if (targets.length < 2) {
+    return 0;
+  }
+  const values = targets.map((path) => {
+    const n = getNodeAtPath(doc, path);
+    return n ? getEventBinding(n, evKey) ?? null : null;
+  });
+  return unifyValues(values).mixed ? targets.length : 0;
+}
+function renderEventsBody(node, selection, isCustomElement, targets = [selection]) {
+  const tab = activeTab.value;
+  const defs = tab.doc.document.state || {};
+  const functionDefs = Object.entries(defs).filter(([, d]) => d?.$prototype === "Function" || d?.$handler);
+  let declaredEventsT = nothing;
+  if (isCustomElement) {
+    const allEmits = [];
+    for (const [fnName, d] of Object.entries(defs)) {
+      if (isFunctionDef(d) && Array.isArray(d.emits)) {
+        for (const ev of d.emits) {
+          allEmits.push({ ...ev, _fn: fnName });
+        }
+      }
+    }
+    if (allEmits.length > 0) {
+      declaredEventsT = html`
+        <div class="events-section">
+          <sp-field-label size="s">Declared Events</sp-field-label>
+          ${allEmits.map((ev) => html`
+              <div class="declared-event-row" title=${ev.description || ""}>
+                <code class="event-code">${ev.name || "(unnamed)"}</code>
+                <span class="event-source">← ${ev._fn}</span>
+                ${isJsonObject(ev.type) && typeof ev.type.text === "string" ? html`<span class="event-type">${ev.type.text}</span>` : nothing}
+              </div>
+            `)}
+        </div>
+        <sp-divider size="s"></sp-divider>
+      `;
+    }
+  }
+  const eventEntries = Object.keys(node).filter((k) => k.startsWith("on")).map((k) => [k, getEventBinding(node, k)]).filter((pair) => pair[1] !== undefined);
+  return html`
+    <div class="events-panel">
+      ${declaredEventsT}
+      <div class="events-section">
+        ${eventEntries.length > 0 ? html` <sp-field-label size="s">Event Bindings</sp-field-label> ` : nothing}
+        ${eventEntries.map(([evKey, evVal]) => {
+    const inlineFn = isFunctionDef(evVal) ? evVal : null;
+    const expression = isExpressionDef(evVal) ? evVal.$expression : null;
+    const refValue = isRef(evVal) ? evVal.$ref : null;
+    const currentMode = slotMode(evVal);
+    const modeFieldKey = `event|${selection.join("/")}|${evKey}`;
+    return html`
+            <div class="event-binding">
+              <div class="event-row">
+                <jx-value-selector
+                  size="s"
+                  class="event-name"
+                  .value=${evKey}
+                  .options=${eventNameOptions(Object.keys(node).filter((k) => k.startsWith("on")))}
+                  @change=${(e) => {
+      const newKey = e.target.value.trim();
+      if (newKey && newKey !== evKey && /^on[a-z][\da-z-]*$/i.test(newKey)) {
+        transactDoc(activeTab.value, (t) => {
+          for (const target of targets) {
+            const existing = getEventBinding(getNodeAtPath(t.doc.document, target), evKey);
+            if (existing === undefined) {
+              continue;
+            }
+            mutateUpdateProperty(t, target, evKey);
+            mutateUpdateProperty(t, target, newKey, existing);
+          }
+        });
+      }
+    }}
+                >
+                  ></jx-value-selector
+                >
+                <sp-picker
+                  size="s"
+                  class="event-mode"
+                  .value=${live(currentMode)}
+                  @change=${(e) => {
+      const next = e.target.value;
+      commitToTargets(targets, evKey, switchSlotMode(modeFieldKey, currentMode, next, evVal, seedForHandlerMode(next, functionDefs)) ?? seedForHandlerMode(next, functionDefs));
+    }}
+                >
+                  ${HANDLER_MODES.map((m) => html`<sp-menu-item value=${m}>${VALUE_SOURCE_LABELS[m]}</sp-menu-item>`)}
+                </sp-picker>
+                ${renderProvenanceChip(evKey, {
+      state: mixedEventCount(tab.doc.document, targets, evKey) > 0 ? "mixed" : "set",
+      donor: String(targets.length),
+      onClick: () => commitToTargets(targets, evKey),
+      title: mixedEventCount(tab.doc.document, targets, evKey) > 0 ? `${targets.length} selected elements bind ${evKey} differently — ` + `clearing removes it from all of them` : `Clear ${evKey}`
+    })}
+                <sp-action-button size="xs" quiet @click=${() => commitToTargets(targets, evKey)}>
+                  <sp-icon-delete slot="icon"></sp-icon-delete>
+                </sp-action-button>
+              </div>
+              ${inlineFn ? html`
+                      <div class="event-body-mode" style="display:flex;justify-content:flex-end">
+                        <sp-action-group size="s" compact class="body-mode-toggle">
+                          <sp-action-button
+                            size="s"
+                            class="body-mode-statements"
+                            ?selected=${Array.isArray(inlineFn.body)}
+                            @click=${() => {
+      if (!Array.isArray(inlineFn.body)) {
+        transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, selection, evKey, {
+          ...inlineFn,
+          body: []
+        }));
+      }
+    }}
+                          >
+                            Statements
+                          </sp-action-button>
+                          <sp-action-button
+                            size="s"
+                            class="body-mode-code"
+                            ?selected=${!Array.isArray(inlineFn.body)}
+                            @click=${() => {
+      if (Array.isArray(inlineFn.body)) {
+        transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, selection, evKey, {
+          ...inlineFn,
+          body: ""
+        }));
+      }
+    }}
+                          >
+                            Code
+                          </sp-action-button>
+                        </sp-action-group>
+                      </div>
+                      ${Array.isArray(inlineFn.body) ? renderStatementEditor(inlineFn.body, (next) => transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, selection, evKey, {
+      ...inlineFn,
+      body: next
+    })), {
+      allowEventRef: true,
+      emits: inlineFn.emits ?? [],
+      region: inspectorStatementsRegion(evKey),
+      stateDefs: Object.keys(defs),
+      stateEntries: defs
+    }) : html`
+                              <div class="event-body-row">
+                                <sp-textfield
+                                  size="s"
+                                  multiline
+                                  grows
+                                  placeholder="// handler body"
+                                  .value=${live(typeof inlineFn.body === "string" ? inlineFn.body : "")}
+                                  @input=${(e) => {
+      transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, selection, evKey, {
+        $prototype: "Function",
+        body: e.target.value,
+        parameters: inlineFn?.parameters || []
+      }));
+    }}
+                                >
+                                </sp-textfield>
+                                <sp-action-button
+                                  size="xs"
+                                  quiet
+                                  title="Open in editor"
+                                  @click=${() => {
+      openLogicTarget({
+        editing: { eventKey: evKey, path: selection, type: "event" },
+        surface: "function"
+      });
+    }}
+                                >
+                                  <sp-icon-code slot="icon"></sp-icon-code>
+                                </sp-action-button>
+                              </div>
+                            `}
+                    ` : expression ? html`
+                        <div class="event-body-row">
+                          <div style="flex:1;min-width:0">
+                            ${renderExpressionEditor(expression, (newNode) => transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, selection, evKey, {
+      $expression: newNode
+    })), {
+      allowEventRef: true,
+      preview: livePreviewExpression(tab, `event:${JSON.stringify(selection)}:${evKey}`, expression, selection, () => renderOnly("rightPanel")),
+      onInsertDef: (defName, def) => transactDoc(activeTab.value, (t) => mutateAddDef(t, defName, def)),
+      stateDefs: Object.keys(defs),
+      stateEntries: defs
+    })}
+                          </div>
+                          <sp-action-button
+                            size="xs"
+                            quiet
+                            title="Open in formula workspace"
+                            @click=${() => {
+      openLogicTarget({
+        editing: { eventKey: evKey, path: selection, type: "event" },
+        surface: "formula"
+      });
+    }}
+                          >
+                            <sp-icon-align-bottom slot="icon"></sp-icon-align-bottom>
+                          </sp-action-button>
+                        </div>
+                      ` : html`
+                        <sp-picker
+                          size="s"
+                          class="event-handler"
+                          .value=${live(refValue || "__none__")}
+                          @change=${(e) => {
+      if (e.target.value && e.target.value !== "__none__") {
+        transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, selection, evKey, {
+          $ref: e.target.value
+        }));
+      } else {
+        transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, selection, evKey));
+      }
+    }}
+                        >
+                          <sp-menu-item value="__none__">— none —</sp-menu-item>
+                          ${functionDefs.map(([fName]) => html`<sp-menu-item value=${`#/state/${fName}`}
+                                >${fName}</sp-menu-item
+                              >`)}
+                        </sp-picker>
+                      `}
+            </div>
+          `;
+  })}
+        <sp-action-button
+          size="s"
+          quiet
+          @click=${() => {
+    let evName = "onclick";
+    for (const name of EVENT_NAMES) {
+      if (!node[name]) {
+        evName = name;
+        break;
+      }
+    }
+    if (functionDefs.length > 0) {
+      transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, selection, evName, {
+        $ref: `#/state/${functionDefs[0][0]}`
+      }));
+    } else {
+      transactDoc(activeTab.value, (t) => mutateUpdateProperty(t, selection, evName, {
+        $prototype: "Function",
+        body: "",
+        parameters: []
+      }));
+    }
+  }}
+        >
+          <sp-icon-add slot="icon"></sp-icon-add>
+          Add Event
+        </sp-action-button>
+      </div>
+    </div>
+  `;
+}
+function renderObservedAttrsSection(document2) {
+  const state = document2.state || {};
+  const entries = Object.entries(state).filter(([, d]) => d.attribute);
+  return html`
+    <sp-accordion-item
+      label="Observed Attributes"
+      ?open=${isInspectorSectionOpen("__observed", false)}
+      @sp-accordion-item-toggle=${() => setInspectorSection("__observed", !isInspectorSectionOpen("__observed", false))}
+    >
+      <div class="style-section-body">
+        ${entries.length === 0 ? renderEmptyState({
+    compact: true,
+    message: "Attributes let a page set this component from markup. " + 'Name an "attribute" on a data entry to expose it here.'
+  }) : entries.map(([key, d]) => {
+    const def = d;
+    return renderStaticKvRow({
+      detail: `→ ${key}`,
+      name: String(def.attribute),
+      ...def.type ? { value: String(def.type) } : {},
+      ...def.reflects ? { tags: ["reflects"] } : {}
+    });
+  })}
+      </div>
+    </sp-accordion-item>
+  `;
+}
+function renderCssPropsSection(node) {
+  const style = node.style || {};
+  const cssProps = Object.entries(style).filter(([k]) => k.startsWith("--"));
+  if (cssProps.length === 0) {
+    return nothing;
+  }
+  return html`
+    <sp-accordion-item
+      label="CSS Properties"
+      ?open=${isInspectorSectionOpen("__cssprops", false)}
+      @sp-accordion-item-toggle=${() => setInspectorSection("__cssprops", !isInspectorSectionOpen("__cssprops", false))}
+    >
+      <div class="style-section-body">
+        ${cssProps.map(([prop, val]) => renderStaticKvRow({ name: prop, value: String(val) }))}
+      </div>
+    </sp-accordion-item>
+  `;
+}
+function renderCssPartsSection(document2) {
+  const parts = collectCssParts(document2);
+  if (parts.length === 0) {
+    return nothing;
+  }
+  return html`
+    <sp-accordion-item
+      label="CSS Parts"
+      ?open=${isInspectorSectionOpen("__cssparts", false)}
+      @sp-accordion-item-toggle=${() => setInspectorSection("__cssparts", !isInspectorSectionOpen("__cssparts", false))}
+    >
+      <div class="style-section-body">
+        ${parts.map((p) => renderStaticKvRow({ detail: `<${p.tag}>`, name: p.name }))}
+      </div>
+    </sp-accordion-item>
+  `;
+}
+function renderLogicPanelTemplate(helpers) {
+  const { isCustomElementDoc: isCustomElementDoc2 } = helpers;
+  const tab = activeTab.value;
+  const selection = primarySelection(tab?.session.selection);
+  const doc = tab?.doc.document;
+  if (!selection) {
+    return renderEmptyState({ message: clickAnythingTo("wire it up") });
+  }
+  const node = getNodeAtPath(doc, selection);
+  if (!node) {
+    return renderEmptyState({ message: staleSelectionMessage() });
+  }
+  const targets = tab.session.selection.length > 0 ? tab.session.selection : [selection];
+  const isMapNode = node.$prototype === "Array";
+  const isSwitchNode = Boolean(node.$switch);
+  const isRoot = selection.length === 0;
+  const isCustomElement = isCustomElementDoc2();
+  const mapSignals = mapSignalsFor(selection);
+  const repeaterT = isMapNode ? html`
+        <sp-accordion-item label="Repeating list" open>
+          <div class="style-section-body">${renderRepeaterFieldsTemplate(node, selection)}</div>
+        </sp-accordion-item>
+      ` : nothing;
+  const switchT = isSwitchNode ? html`
+        <sp-accordion-item label="Condition" open>
+          <div class="style-section-body">
+            ${renderSwitchFieldsTemplate(node, selection, mapSignals)}
+          </div>
+        </sp-accordion-item>
+      ` : nothing;
+  const eventsT = isMapNode ? nothing : html`
+        <sp-accordion-item label="Events" open>
+          <div class="style-section-body">
+            ${renderEventsBody(node, selection, isCustomElement, targets)}
+          </div>
+        </sp-accordion-item>
+      `;
+  const contractT = isCustomElement && isRoot ? html`
+          ${renderObservedAttrsSection(doc)} ${renderCssPropsSection(node)}
+          ${renderCssPartsSection(doc)}
+        ` : nothing;
+  return html`
+    <div class="style-sidebar">
+      <sp-accordion allow-multiple size="s">
+        ${repeaterT} ${switchT} ${eventsT} ${contractT}
+      </sp-accordion>
+    </div>
+  `;
+}
+
+// src/utils/inherited-style.ts
+function computeInheritedSources(style, mediaNames, activeTab2, activeSelector = null) {
+  if (activeTab2 === null || mediaNames.length === 0) {
+    return {};
+  }
+  const inherited = {};
+  const layer = (block, donor) => {
+    for (const [p, v] of Object.entries(block)) {
+      if (typeof v !== "object") {
+        inherited[p] = { donor, value: v ?? "" };
+      }
+    }
+  };
+  if (activeSelector) {
+    layer(style[activeSelector] || {}, null);
+    for (const name of mediaNames) {
+      if (name === activeTab2) {
+        break;
+      }
+      layer((style[`@${name}`] || {})[activeSelector] || {}, name);
+    }
+    return inherited;
+  }
+  layer(style, null);
+  for (const name of mediaNames) {
+    if (name === activeTab2) {
+      break;
+    }
+    layer(style[`@${name}`] || {}, name);
+  }
+  return inherited;
+}
+
+// src/panels/target-line.ts
+var _selectorTrigger = null;
+function openSelectorMenu() {
+  if (!_selectorTrigger?.isConnected) {
+    throw new RangeError(`command "style.openSelectorMenu" needs the Inspector's Style tab rendered; its selector ` + `menu is not in the document`);
+  }
+  _selectorTrigger.open = "click";
+}
+function closeSelectorMenu() {
+  if (_selectorTrigger) {
+    _selectorTrigger.open = undefined;
+  }
+}
+function segmentTpl(segment) {
+  const cls = `tl-seg tl-seg--${segment.key}`;
+  if (!segment.onActivate) {
+    return html`<span class=${cls} data-seg=${segment.key} title=${segment.title}
+      >${segment.label}</span
+    >`;
+  }
+  return html`<button
+    type="button"
+    class=${cls}
+    data-seg=${segment.key}
+    title=${segment.title}
+    @click=${segment.onActivate}
+  >
+    ${segment.label}
+  </button>`;
+}
+var BASE_SELECTOR_LABEL = "base rule";
+function selectorTpl(selector) {
+  const label = selector.value ?? BASE_SELECTOR_LABEL;
+  const choose = (value) => {
+    closeSelectorMenu();
+    selector.onSelect(value);
+  };
+  return html`
+    <overlay-trigger
+      placement="bottom-start"
+      triggered-by="click"
+      ${ref((el) => {
+    _selectorTrigger = el ?? null;
+  })}
+    >
+      <button
+        slot="trigger"
+        type="button"
+        class="tl-seg tl-seg--selector"
+        data-seg="selector"
+        title="The state or nested rule these edits land in — click to choose another"
+      >
+        ${label} ⌄
+      </button>
+      <sp-popover slot="click-content" tip class="tl-selector-popover">
+        <sp-menu class="tl-selector-menu">
+          <sp-menu-item value="__base__" @click=${() => choose(null)}>
+            ${BASE_SELECTOR_LABEL}
+          </sp-menu-item>
+          <sp-menu-divider></sp-menu-divider>
+          ${selector.options.map((option) => html`
+              <sp-menu-item value=${option} @click=${() => choose(option)}>
+                ${selector.declared.has(option) ? `${option}  ●` : option}
+              </sp-menu-item>
+            `)}
+          <sp-menu-divider></sp-menu-divider>
+          <sp-menu-item
+            value="__add_custom__"
+            @click=${() => {
+    closeSelectorMenu();
+    selector.onAddCustom();
+  }}
+          >
+            + Add custom…
+          </sp-menu-item>
+        </sp-menu>
+      </sp-popover>
+    </overlay-trigger>
+  `;
+}
+function scopeTpl(scope) {
+  const classes = classMap({
+    "tl-scope": true,
+    [`tl-scope--${scope.kind}`]: true
+  });
+  const title = scope.kind === "element" ? "These edits apply to the selected element only" : `These edits apply to ${scope.label}`;
+  return html`<span class=${classes} data-scope=${scope.kind} title=${title}>${scope.label}</span>`;
+}
+function warningTpl(scope) {
+  if (scope.kind !== "project") {
+    return nothing;
+  }
+  const files = scope.affectedFiles ?? [];
+  return html`
+    <div class="tl-warning" role="status">
+      <p class="tl-warning-text">
+        Every edit here restyles ${scope.label} — ${scope.affected ?? "unknown"}.
+      </p>
+      ${scope.onToggleAffected ? html`<button type="button" class="tl-warning-action" @click=${scope.onToggleAffected}>
+              ${scope.showAffected ? "Hide affected" : "Show affected"}
+            </button>` : nothing}
+      ${scope.showAffected ? files.length > 0 ? html`<ul class="tl-affected">
+                ${files.map((file) => html`<li class="tl-affected-row">
+                    <span class="tl-affected-path">${file.path}</span>
+                    <span class="tl-affected-count">${file.count}</span>
+                  </li>`)}
+              </ul>` : html`<p class="tl-affected-empty">
+                No file list — the project could not be searched.
+              </p>` : nothing}
+    </div>
+  `;
+}
+function renderTargetLine(model) {
+  return html`
+    <div class="target-line" data-jx-region="inspector/target">
+      <span class="tl-glyph" aria-hidden="true">⌖</span>
+      <div class="tl-segments">
+        ${model.segments.map((segment, index) => html`
+            ${index > 0 ? html`<span class="tl-sep" aria-hidden="true">·</span>` : nothing}
+            ${segmentTpl(segment)}
+          `)}
+        <span class="tl-sep" aria-hidden="true">·</span>
+        ${selectorTpl(model.selector)}
+      </div>
+      ${scopeTpl(model.scope)}
+    </div>
+    ${warningTpl(model.scope)}
+  `;
+}
+
+// src/panels/style-panel.ts
+var DEFAULT_PROVENANCE = { state: "default" };
+function isTagPath(selector) {
+  return /^[a-z]/.test(selector);
+}
+function resolveNestedTagStyle(style, tagPath) {
+  let obj = style;
+  for (const part of tagPath.split(" ")) {
+    obj = getNestedStyle(obj, part);
+    if (!obj) {
+      return {};
+    }
+  }
+  return obj;
+}
+function resolveContextStyle(style, activeSelector, editMedia) {
+  const base = editMedia ? getNestedStyle(style, `@${editMedia}`) ?? {} : style;
+  if (activeSelector) {
+    return isTagPath(activeSelector) ? resolveNestedTagStyle(base, activeSelector) : getNestedStyle(base, activeSelector) ?? {};
+  }
+  const flat = {};
+  for (const [p, v] of Object.entries(base)) {
+    if (typeof v !== "object") {
+      flat[p] = v;
+    }
+  }
+  return flat;
+}
+function contextMutate(sel, activeSelector, editMedia) {
+  if (activeSelector && isTagPath(activeSelector)) {
+    const stylePath = activeSelector.split(" ");
+    return editMedia ? (t, prop, val) => mutateUpdateMediaNestedStylePath(t, sel, editMedia, stylePath, prop, val) : (t, prop, val) => mutateUpdateNestedStylePath(t, sel, stylePath, prop, val);
+  }
+  if (activeSelector) {
+    return editMedia ? (t, prop, val) => mutateUpdateMediaNestedStyle(t, sel, editMedia, activeSelector, prop, val) : (t, prop, val) => mutateUpdateNestedStyle(t, sel, activeSelector, prop, val);
+  }
+  return editMedia ? (t, prop, val) => mutateUpdateMediaStyle(t, sel, editMedia, prop, val) : (t, prop, val) => mutateUpdateStyle(t, sel, prop, val);
+}
+function mixedStyleProps(tab, targets, activeSelector, editMedia) {
+  const mixed = new Set;
+  if (targets.length < 2) {
+    return mixed;
+  }
+  const blocks = targets.map((path) => {
+    const node = getNodeAtPath(tab.doc.document, path);
+    return resolveContextStyle(node?.style ?? {}, activeSelector, editMedia);
+  });
+  const props = new Set;
+  for (const block of blocks) {
+    for (const prop of Object.keys(block)) {
+      props.add(prop);
+    }
+  }
+  for (const prop of props) {
+    if (unifyValues(blocks.map((block) => block[prop] ?? null)).mixed) {
+      mixed.add(prop);
+    }
+  }
+  return mixed;
+}
+function renderStyleRow(entry, prop, value, onCommit, isWarning, gridMode, inheritedValue, templateSignals = [], fieldKey = prop, provenance) {
+  const chip = provenance ?? DEFAULT_PROVENANCE;
+  const type = inferInputType(entry);
+  const hasVal = value !== undefined && value !== "";
+  const placeholder = !hasVal && inheritedValue ? String(inheritedValue) : "";
+  const spanVal = gridMode && entry.$span === 2 ? 2 : undefined;
+  const slot = renderDynamicSlot({
+    caps: "styleProperty",
+    fieldKey,
+    onChange: (v) => onCommit(v === undefined || v === "" ? undefined : String(v)),
+    staticWidget: widgetForType(type, entry, prop, value, onCommit, { placeholder }),
+    stateDefs: templateSignals,
+    value
+  });
+  return renderFieldRow({
+    prop,
+    label: propLabel(entry, prop),
+    hasValue: false,
+    widget: slot.widget,
+    provenance: chip,
+    labelExtra: slot.modeButton,
+    ...spanVal != null && { span: spanVal },
+    warning: isWarning
+  });
+}
+function renderShorthandRow({
+  prop: shortProp,
+  entry,
+  style,
+  mutate,
+  inherited,
+  ctx
+}) {
+  const tab = activeTab.value;
+  const longhands = getLonghands(shortProp);
+  const shortVal = style[shortProp];
+  const hasLonghands = longhands.some((l) => style[l.name] !== undefined);
+  const isExpanded = tab.session.ui.styleShorthands[shortProp] ?? hasLonghands;
+  const hasAnyVal = shortVal !== undefined || hasLonghands;
+  const writeShorthand = (val) => transactDoc(activeTab.value, (t) => {
+    for (const l of longhands) {
+      mutate(t, l.name);
+    }
+    mutate(t, shortProp, val);
+  });
+  const clearAll = () => transactDoc(activeTab.value, (t) => {
+    mutate(t, shortProp);
+    for (const l of longhands) {
+      mutate(t, l.name);
+    }
+  });
+  const headerWidget = html`
+    <div class="style-shorthand-header">
+      <sp-textfield
+        size="s"
+        .value=${live(shortVal || "")}
+        placeholder=${!shortVal && hasLonghands ? longhands.map((l) => style[l.name] || "0").join(" ") : !shortVal && inherited[shortProp] ? inherited[shortProp] : !shortVal && longhands.some((l) => inherited[l.name]) ? longhands.map((l) => inherited[l.name] || "0").join(" ") : ""}
+        @input=${debouncedStyleCommit(`short:${shortProp}`, 400, (e) => {
+    writeShorthand(e.target.value || undefined);
+  })}
+      ></sp-textfield>
+      <sp-action-button
+        size="xs"
+        quiet
+        @click=${(e) => {
+    e.stopPropagation();
+    activeTab.value.session.ui.styleShorthands = {
+      ...activeTab.value.session.ui.styleShorthands,
+      [shortProp]: !isExpanded
+    };
+  }}
+      >
+        ${isExpanded ? html`<sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>` : html`<sp-icon-chevron-right slot="icon"></sp-icon-chevron-right>`}
+      </sp-action-button>
+    </div>
+  `;
+  return html`
+    ${renderFieldRow({
+    prop: shortProp,
+    label: propLabel(entry, shortProp),
+    hasValue: hasAnyVal,
+    widget: headerWidget,
+    provenance: shorthandProvenance(shortProp, ctx, hasAnyVal ? clearAll : undefined)
+  })}
+    ${isExpanded ? (() => {
+    const isBorderSide = entry.$shorthandType === "border-side";
+    const expanded = shortVal ? isBorderSide ? expandBorderSide(shortVal) : expandShorthand(shortVal, longhands.length) : null;
+    const compress = isBorderSide ? compressBorderSide : compressShorthand;
+    const emptyVal = isBorderSide ? "" : "0";
+    const recompress = (idx, val) => writeShorthand(compress(longhands.map((l, i) => i === idx ? val : style[l.name] ?? (expanded ? expanded[i] : emptyVal))));
+    return longhands.map(({ name, entry: lEntry }, idx) => {
+      const lVal = style[name] ?? (expanded ? expanded[idx] : "");
+      const hasLVal = lVal !== undefined && lVal !== "";
+      return html`
+                <div class="style-row style-row--child" data-prop=${name}>
+                  <div class="style-row-label">
+                    ${renderProvenanceChip(name, longhandProvenance(name, shortProp, hasLVal, ctx, () => recompress(idx, emptyVal)))}
+                    <sp-field-label size="s" title=${name}
+                      >${propLabel(lEntry, name)}</sp-field-label
+                    >
+                  </div>
+                  ${widgetForType(inferInputType(lEntry), lEntry, name, lVal, (newVal) => recompress(idx, newVal || emptyVal), {
+        placeholder: !lVal && inherited[name] ? String(inherited[name]) : ""
+      })}
+                </div>
+              `;
+    });
+  })() : nothing}
+  `;
+}
+var _showAffected = false;
+function runCommand(id, args) {
+  activeRegistry()?.run(id, args);
+}
+function stylebookTagOf(selector) {
+  return selector && isTagPath(selector) ? selector.split(" ")[0] ?? null : null;
+}
+function isProjectStylesheet(path) {
+  return /(?:^|\/)project\.json$/.test(path);
+}
+function resolveScope(tab, stylebookTag) {
+  const path = tab.documentPath ?? "";
+  const isProjectStyle = isProjectStylesheet(path);
+  if (!stylebookTag) {
+    return isProjectStyle ? projectScope("every page in this project", null) : { kind: "element", label: "this element" };
+  }
+  const shared = isProjectStyle || /^\.?\/?layouts\//.test(path);
+  const label = `all <${stylebookTag}> in this ${shared ? "project" : "document"}`;
+  return shared ? projectScope(label, stylebookTag) : { kind: "document", label };
+}
+function projectScope(label, tagName) {
+  if (tagName === null) {
+    return { affected: "how many pages that is, is unknown", kind: "project", label };
+  }
+  const query = { tagName };
+  const state = peekUsages(query);
+  if (state === null) {
+    loadUsages(query).then(() => renderOnly("rightPanel"));
+  }
+  return {
+    kind: "project",
+    label,
+    affected: affectedSentence(state),
+    affectedFiles: state?.status === "ready" ? usageFiles(state.result) : [],
+    showAffected: _showAffected,
+    onToggleAffected: () => {
+      _showAffected = !_showAffected;
+      renderOnly("rightPanel");
+    }
+  };
+}
+function affectedSentence(state) {
+  if (state === null || state.status === "pending") {
+    return "counting the elements it affects…";
+  }
+  if (state.status !== "ready") {
+    return "how many elements that is, is unknown";
+  }
+  const { files, refsTotal } = state.result;
+  if (refsTotal === 0) {
+    return "no element in the project uses it yet";
+  }
+  return `${refsTotal} element${refsTotal === 1 ? "" : "s"} in ${files.length} file${files.length === 1 ? "" : "s"}`;
+}
+function targetSegments(elementLabel, mediaTab, hasBreakpoints, schemeLayer) {
+  const segments = [
+    {
+      key: "element",
+      label: elementLabel,
+      title: "What these edits are pointed at — click to find it in the Outline",
+      onActivate: () => runCommand("view.setActivity", { tab: "layers" })
+    },
+    {
+      key: "media",
+      label: hasBreakpoints && mediaTab ? `@${mediaDisplayName(mediaTab)}` : "Base",
+      title: "The breakpoint these edits land in. Choose it on the pane's Context control; click to " + "manage breakpoints.",
+      onActivate: () => runCommand("settings.open", { section: "contexts" })
+    }
+  ];
+  if (schemeLayer) {
+    segments.push({
+      key: "scheme",
+      label: `${mediaDisplayName(schemeLayer)} 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: () => runCommand("settings.open", { section: "contexts" })
+    });
+  }
+  return segments;
+}
+function templateSignalOf(value) {
+  if (typeof value !== "string") {
+    return null;
+  }
+  return /\$\{\s*(?:state\.)?([A-Za-z_$][\w$]*)/.exec(value)?.[1] ?? null;
+}
+function isTemplateValue(value) {
+  return typeof value === "string" && value.includes("${");
+}
+function provenanceOf(prop, ctx) {
+  if (ctx.mixed?.props.has(prop)) {
+    return {
+      state: "mixed",
+      donor: String(ctx.mixed.count),
+      onClick: () => ctx.clear(prop)
+    };
+  }
+  const value = ctx.active[prop];
+  if (value !== undefined && ctx.own[prop] === undefined) {
+    return {
+      state: "inherited",
+      donor: "site tokens",
+      title: `Inherited from the project's site tokens — ${prop} is not set on this document`
+    };
+  }
+  if (value !== undefined) {
+    if (isTemplateValue(value)) {
+      const signal = templateSignalOf(value);
+      return {
+        state: "bound",
+        ...signal ? { donor: signal } : {},
+        ...signal && ctx.signals.includes(signal) ? {
+          onClick: () => {
+            runCommand("view.setActivity", { tab: "data" });
+            runCommand("data.expandRow", { name: signal });
+          }
+        } : {}
+      };
+    }
+    return { state: "set", onClick: () => ctx.clear(prop) };
+  }
+  const inherited = ctx.inherited[prop];
+  if (inherited) {
+    return {
+      state: "inherited",
+      donor: inherited.donor,
+      ...inherited.jump ? { onClick: inherited.jump } : {}
+    };
+  }
+  return { state: "default" };
+}
+function shorthandProvenance(shortProp, ctx, clearAll) {
+  const props = [shortProp, ...getLonghands(shortProp).map((l) => l.name)];
+  const { mixed } = ctx;
+  if (mixed && props.some((p) => mixed.props.has(p))) {
+    return {
+      state: "mixed",
+      donor: String(mixed.count),
+      ...clearAll ? { onClick: clearAll } : {}
+    };
+  }
+  for (const p of props) {
+    const prov = provenanceOf(p, ctx);
+    if (prov.state === "default") {
+      continue;
+    }
+    return prov.state === "set" && clearAll ? { ...prov, onClick: clearAll } : prov;
+  }
+  return DEFAULT_PROVENANCE;
+}
+function longhandProvenance(name, shortProp, hasValue, ctx, clearChild) {
+  const { mixed } = ctx;
+  if (mixed && (mixed.props.has(name) || hasValue && mixed.props.has(shortProp))) {
+    return { state: "mixed", donor: String(mixed.count), onClick: clearChild };
+  }
+  const prov = provenanceOf(name, ctx);
+  if (prov.state === "set" || prov.state === "default" && hasValue) {
+    return { state: "set", onClick: clearChild };
+  }
+  return prov;
+}
+function sectionProvenance(entries, ctx) {
+  return entries.map(({ prop, entry }) => inferInputType(entry) === "shorthand" ? shorthandProvenance(prop, ctx).state : provenanceOf(prop, ctx).state);
+}
+function styleSidebarTemplate(node, activeMediaTab, activeSelector, opts = {}) {
+  const { effectiveStyle, stylebookSelector = null } = opts;
+  const tab = activeTab.value;
+  const sel = primarySelection(tab.session.selection);
+  const ownRootStyle = node.style || {};
+  const style = effectiveStyle ?? ownRootStyle;
+  const templateSignals = Object.entries(tab.doc.document.state || {}).filter(([, d]) => !d?.$handler && d?.$prototype !== "Function").map(([defName]) => defName);
+  const { sizeBreakpoints } = parseMediaEntries(getEffectiveMedia(tab.doc.document.$media));
+  const mediaNames = sizeBreakpoints.map((bp) => bp.name);
+  const mediaTab = activeMediaTab || null;
+  const forcedScheme = tab.session.ui.previewColorScheme;
+  const schemeLayer = mediaTab === null && (forcedScheme === "light" || forcedScheme === "dark") ? Object.entries(getEffectiveMedia(tab.doc.document.$media) ?? {}).find(([, q]) => schemeOfQuery(String(q)) === forcedScheme)?.[0] ?? null : null;
+  const editMedia = mediaTab && mediaNames.length > 0 ? mediaTab : schemeLayer;
+  const contextStyle = editMedia ? style[`@${editMedia}`] || {} : style;
+  const declaredSelectors = new Set(Object.keys(contextStyle).filter((s) => isNestedSelector(s)));
+  const selectorOptions = [
+    ...new Set([
+      ...COMMON_SELECTORS,
+      ...declaredSelectors,
+      ...activeSelector ? [activeSelector] : []
+    ])
+  ];
+  const stylebookTag = stylebookTagOf(stylebookSelector);
+  const elementLabel = stylebookTag ?? (typeof node.tagName === "string" ? node.tagName : "element");
+  const targetLineT = renderTargetLine({
+    segments: targetSegments(elementLabel, mediaTab, mediaNames.length > 0, schemeLayer),
+    selector: {
+      value: activeSelector,
+      options: selectorOptions,
+      declared: declaredSelectors,
+      onSelect: (value) => {
+        activeTab.value.session.ui.activeSelector = value;
+      },
+      onAddCustom: () => {
+        showPromptDialog("Add Selector", {
+          confirmLabel: "Use",
+          message: "A state or nested rule to edit under this element.",
+          placeholder: ":hover, .child, &.active, [attr]",
+          validate: (v) => isNestedSelector(v.trim()) ? "" : 'A selector must start with ":", ".", "&" or "[".'
+        }).then((value) => {
+          if (value) {
+            activeTab.value.session.ui.activeSelector = value.trim();
+            renderOnly("rightPanel");
+          }
+        });
+      }
+    },
+    scope: resolveScope(tab, stylebookTag)
+  });
+  const filterBarT = html`
+    <div class="style-filter-bar">
+      <sp-textfield
+        size="s"
+        class="style-filter-input"
+        placeholder="Filter properties…"
+        .value=${live(tab.session.ui.styleFilter || "")}
+        @input=${(e) => {
+    activeTab.value.session.ui.styleFilter = e.target.value;
+  }}
+      ></sp-textfield>
+    </div>
+  `;
+  const activeStyle = resolveContextStyle(style, activeSelector, editMedia);
+  const ownStyle = style === ownRootStyle ? activeStyle : resolveContextStyle(ownRootStyle, activeSelector, editMedia);
+  const targets = tab.session.selection.length > 0 ? tab.session.selection : [sel];
+  const mutateTargets = (t, prop, val) => {
+    for (const target of targets) {
+      contextMutate(target, activeSelector, editMedia)(t, prop, val);
+    }
+  };
+  const commitStyle = (prop, val) => transactDoc(activeTab.value, (t) => mutateTargets(t, prop, val));
+  const targetStyleOf = (t, target) => {
+    const targetNode = getNodeAtPath(t.doc.document, target);
+    return resolveContextStyle(targetNode?.style ?? {}, activeSelector, editMedia);
+  };
+  const inheritedInfo = {};
+  if (schemeLayer) {
+    const baseBlock = activeSelector ? getNestedStyle(style, activeSelector) ?? {} : style;
+    for (const [p, v] of Object.entries(baseBlock)) {
+      if (typeof v !== "object") {
+        inheritedInfo[p] = {
+          value: v ?? "",
+          donor: "Base",
+          jump: () => updateUi(activeTab.value, "previewColorScheme", "auto")
+        };
+      }
+    }
+  } else {
+    for (const [p, source] of Object.entries(computeInheritedSources(style, mediaNames, mediaTab, activeSelector))) {
+      inheritedInfo[p] = {
+        value: source.value,
+        donor: source.donor === null ? "Base" : mediaDisplayName(source.donor),
+        jump: () => updateUi(activeTab.value, "activeMedia", source.donor)
+      };
+    }
+  }
+  const inheritedStyle = {};
+  for (const [p, info] of Object.entries(inheritedInfo)) {
+    inheritedStyle[p] = info.value;
+  }
+  const mixedProps = mixedStyleProps(tab, targets, activeSelector, editMedia);
+  const provCtx = {
+    own: ownStyle,
+    active: activeStyle,
+    inherited: inheritedInfo,
+    signals: templateSignals,
+    clear: (prop) => commitStyle(prop),
+    ...mixedProps.size > 0 ? { mixed: { count: targets.length, props: mixedProps } } : {}
+  };
+  const newSections = autoOpenSections({ style: activeStyle }, tab.session.ui.styleSections);
+  if (JSON.stringify(newSections) !== JSON.stringify(tab.session.ui.styleSections)) {
+    tab.session.ui.styleSections = newSections;
+  }
+  const sectionProps = {};
+  for (const sec of css_meta_default.$sections) {
+    sectionProps[sec.key] = [];
+  }
+  for (const [prop, entry] of Object.entries(css_meta_default.$defs)) {
+    if (typeof entry.$shorthand === "string") {
+      continue;
+    }
+    const sec = entry.$section || "other";
+    sectionProps[sec].push({ entry, prop });
+  }
+  for (const sec of css_meta_default.$sections) {
+    sectionProps[sec.key].sort((a, b) => a.entry.$order - b.entry.$order);
+  }
+  const otherProps = [];
+  for (const prop of Object.keys(activeStyle)) {
+    if (!css_meta_default.$defs[prop]) {
+      const val = activeStyle[prop];
+      if (val !== null && typeof val === "object") {
+        continue;
+      }
+      otherProps.push(prop);
+    }
+  }
+  const nestedRules = [];
+  for (const [prop, val] of Object.entries(activeStyle)) {
+    if (val !== null && typeof val === "object" && !Array.isArray(val) && !prop.startsWith("@")) {
+      nestedRules.push(prop);
+    }
+  }
+  const filterText = (tab.session.ui.styleFilter || "").toLowerCase();
+  const isFiltering = filterText.length > 0;
+  const sectionTemplates = css_meta_default.$sections.filter((sec) => sec.key !== "other").map((sec) => {
+    const entries = sectionProps[sec.key];
+    const sectionActiveProps = entries.filter(({ prop, entry }) => {
+      if (activeStyle[prop] !== undefined) {
+        return true;
+      }
+      if (inferInputType(entry) === "shorthand") {
+        return getLonghands(prop).some((l) => activeStyle[l.name] !== undefined);
+      }
+      return false;
+    });
+    const clearSection = () => {
+      transactDoc(activeTab.value, (t) => {
+        for (const { prop, entry } of sectionActiveProps) {
+          if (activeStyle[prop] !== undefined) {
+            mutateTargets(t, prop);
+          }
+          if (inferInputType(entry) === "shorthand") {
+            for (const l of getLonghands(prop)) {
+              mutateTargets(t, l.name);
+            }
+          }
+        }
+      });
+    };
+    const counts = countProvenance(sectionProvenance(entries, provCtx));
+    const headingT = html`
+        <span slot="heading" class="style-section-heading">
+          ${sec.label}
+          ${renderProvenanceDots(counts, {
+      onClearSet: sectionActiveProps.length > 0 ? clearSection : undefined,
+      clearTitle: `Clear all ${sec.label.toLowerCase()} properties`
+    })}
+        </span>
+      `;
+    const isOpen = isFiltering ? true : tab.session.ui.styleSections[sec.key] ?? false;
+    if (!isOpen) {
+      return html`
+          <sp-accordion-item
+            label=${sec.label}
+            .open=${false}
+            @sp-accordion-item-toggle=${(e) => {
+        activeTab.value.session.ui.styleSections = {
+          ...activeTab.value.session.ui.styleSections,
+          [sec.key]: e.target.open
+        };
+      }}
+          >
+            ${headingT}
+          </sp-accordion-item>
+        `;
+    }
+    const rows = [];
+    for (const { prop, entry } of entries) {
+      const val = activeStyle[prop];
+      const hasVal = val !== undefined;
+      const condMet = allConditionsPass(entry, activeStyle);
+      const type = inferInputType(entry);
+      if (!hasVal && !condMet) {
+        continue;
+      }
+      if (filterText) {
+        const label = propLabel(entry, prop).toLowerCase();
+        if (!prop.includes(filterText) && !label.includes(filterText)) {
+          continue;
+        }
+      }
+      if (type === "shorthand") {
+        const longhands = getLonghands(prop);
+        const hasAny = hasVal || longhands.some((l) => activeStyle[l.name] !== undefined);
+        if (!hasAny && !condMet) {
+          continue;
+        }
+        rows.push(renderShorthandRow({
+          prop,
+          entry,
+          style: activeStyle,
+          mutate: mutateTargets,
+          inherited: inheritedStyle,
+          ctx: provCtx
+        }));
+      } else {
+        const isWarning = hasVal && !condMet;
+        if (hasVal || condMet) {
+          rows.push(renderStyleRow(entry, prop, val ?? "", (newVal) => commitStyle(prop, newVal || undefined), isWarning, sec.$layout === "grid", inheritedStyle[prop], templateSignals, `style|${sel.join("/")}|${editMedia ?? ""}|${activeSelector ?? ""}|${prop}`, provenanceOf(prop, provCtx)));
+        }
+      }
+    }
+    if (isFiltering && rows.length === 0) {
+      return nothing;
+    }
+    return html`
+        <sp-accordion-item
+          label=${sec.label}
+          .open=${isOpen}
+          @sp-accordion-item-toggle=${(e) => {
+      activeTab.value.session.ui.styleSections = {
+        ...activeTab.value.session.ui.styleSections,
+        [sec.key]: e.target.open
+      };
+    }}
+        >
+          ${headingT}
+          <div class=${sec.$layout === "grid" ? "style-section-body--grid" : ""}>${rows}</div>
+        </sp-accordion-item>
+      `;
+  });
+  const cssInitialMap = getCssInitialMap();
+  const customIsOpen = tab.session.ui.styleSections.other ?? otherProps.length > 0;
+  const customSectionT = html`
+    <sp-accordion-item
+      label="Custom"
+      .open=${customIsOpen}
+      @sp-accordion-item-toggle=${(e) => {
+    activeTab.value.session.ui.styleSections = {
+      ...activeTab.value.session.ui.styleSections,
+      other: e.target.open
+    };
+  }}
+    >
+      <div>
+        ${otherProps.map((prop) => html`
+            <div class="kv-row">
+              <sp-textfield
+                size="s"
+                class="kv-key"
+                .value=${live(prop)}
+                @change=${(e) => {
+    const newProp = e.target.value.trim();
+    if (!newProp || newProp === prop) {
+      return;
+    }
+    transactDoc(activeTab.value, (t) => {
+      for (const target of targets) {
+        const current = targetStyleOf(t, target)[prop];
+        if (current === undefined) {
+          continue;
+        }
+        const write = contextMutate(target, activeSelector, editMedia);
+        write(t, prop);
+        write(t, newProp, String(current));
+      }
+    });
+  }}
+              ></sp-textfield>
+              <sp-textfield
+                size="s"
+                class="kv-val"
+                .value=${live(String(activeStyle[prop]))}
+                placeholder=${ifDefined(cssInitialMap.get(prop))}
+                @input=${debouncedStyleCommit(`custom:${prop}`, 400, (e) => {
+    commitStyle(prop, e.target.value);
+  })}
+              ></sp-textfield>
+              <sp-action-button size="xs" quiet @click=${() => commitStyle(prop)}>
+                <sp-icon-close slot="icon"></sp-icon-close>
+              </sp-action-button>
+            </div>
+          `)}
+        <div style="display:flex;gap:4px;padding-top:4px">
+          <sp-textfield
+            size="s"
+            placeholder="Property name…"
+            style="flex:1"
+            @keydown=${(e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const prop = e.target.value.trim();
+      if (prop) {
+        const initial = cssInitialMap.get(prop) || "";
+        commitStyle(prop, initial || "");
+        e.target.value = "";
+      }
+    }
+  }}
+          ></sp-textfield>
+        </div>
+      </div>
+    </sp-accordion-item>
+  `;
+  const nestedIsOpen = tab.session.ui.styleSections.nested ?? nestedRules.length > 0;
+  const nestedSectionT = nestedRules.length > 0 ? html`
+          <sp-accordion-item
+            label="Relative Styling"
+            .open=${nestedIsOpen}
+            @sp-accordion-item-toggle=${(e) => {
+    activeTab.value.session.ui.styleSections = {
+      ...activeTab.value.session.ui.styleSections,
+      nested: e.target.open
+    };
+  }}
+          >
+            <div style="display:flex;flex-direction:column;gap:4px;padding:4px 0">
+              ${nestedRules.map((rule) => html`
+                  <div style="display:flex;align-items:center;gap:4px">
+                    <button
+                      style="flex:1;text-align:left;padding:6px 10px;background:var(--spectrum-gray-200, #1a1a1a);border:none;border-radius:var(--radius);color:var(--spectrum-gray-900, #fafafa);font-size:var(--spectrum-font-size-75, 12px);cursor:pointer"
+                      @click=${() => {
+    const newSelector = activeSelector ? `${activeSelector} ${rule}` : rule;
+    selectStylebookTag(newSelector, undefined, {
+      panCanvas: true
+    });
+  }}
+                    >
+                      ${rule}
+                    </button>
+                    <sp-action-button size="xs" quiet @click=${() => commitStyle(rule)}>
+                      <sp-icon-delete slot="icon"></sp-icon-delete>
+                    </sp-action-button>
+                  </div>
+                `)}
+              <button
+                style="padding:6px 10px;background:none;border:1px dashed var(--spectrum-gray-400, #333);border-radius:var(--radius);color:var(--spectrum-gray-700, #a1a1aa);font-size:var(--spectrum-font-size-75, 12px);cursor:pointer"
+                @click=${async () => {
+    const name = await showPromptDialog("Add Nested Selector", {
+      confirmLabel: "Add",
+      message: "Enter a selector to nest under the current rule.",
+      placeholder: "th, :hover, .active",
+      validate: (v) => v.trim() ? "" : "Enter a selector."
+    });
+    if (name) {
+      commitStyle(name, {});
+    }
+  }}
+              >
+                + Add
+              </button>
+            </div>
+          </sp-accordion-item>
+        ` : nothing;
+  return html`
+    <div class="style-sidebar">
+      ${targetLineT} ${filterBarT}
+      <sp-accordion allow-multiple size="s">
+        ${sectionTemplates} ${nestedSectionT} ${customSectionT}
+      </sp-accordion>
+    </div>
+  `;
+}
+function renderStylePanelTemplate(ctx) {
+  const tab = activeTab.value;
+  const noDocument = () => renderEmptyState({
+    actions: [openPageAction()],
+    message: "Open a page to style what you click."
+  });
+  if (!tab) {
+    return noDocument();
+  }
+  if (ctx.getCanvasMode() === "stylebook" && shell.stylebook.selection) {
+    const node2 = tab.doc.document;
+    if (!node2) {
+      return noDocument();
+    }
+    return styleSidebarTemplate(node2, tab.session.ui.activeMedia, tab.session.ui.activeSelector, {
+      effectiveStyle: getEffectiveStyle(node2.style),
+      stylebookSelector: shell.stylebook.selection
+    });
+  }
+  const selected = primarySelection(tab.session.selection);
+  if (!selected) {
+    return renderEmptyState({ message: clickAnythingTo("style it") });
+  }
+  const node = getNodeAtPath(tab.doc.document, selected);
+  if (!node) {
+    return renderEmptyState({ message: staleSelectionMessage() });
+  }
+  return styleSidebarTemplate(node, tab.session.ui.activeMedia, tab.session.ui.activeSelector);
+}
+function styleCommands() {
+  const styleTabOpen = (ctx) => ctx.document.open && ctx.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: styleTabOpen,
+      run: () => openSelectorMenu(),
+      title: "Open Selector Menu"
+    },
+    {
+      args: {
+        additionalProperties: false,
+        properties: {
+          selector: pathlessSelectorProperty()
+        },
+        required: ["selector"],
+        type: "object"
+      },
+      category: "View",
+      id: "style.setSelector",
+      level: "selection",
+      menus: ["palette"],
+      group: "8_style",
+      requires: "an element selection",
+      when: styleTabOpen,
+      run: (_commandCtx, args) => {
+        const { selector } = args;
+        if (selector === null) {
+          const tab2 = activeTab.value;
+          if (tab2) {
+            tab2.session.ui.activeSelector = null;
+          }
+          return;
+        }
+        const value = stringArg("style.setSelector", args, "selector");
+        if (!isNestedSelector(value)) {
+          throw new RangeError(`command "style.setSelector" argument "selector": "${value}" is not a nested ` + `selector — it must start with ":", ".", "&" or "["`);
+        }
+        const tab = activeTab.value;
+        if (!tab) {
+          throw new RangeError(`command "style.setSelector" needs an open document`);
+        }
+        tab.session.ui.activeSelector = value;
+      },
+      title: "Set Style Selector"
+    }
+  ];
+}
+function pathlessSelectorProperty() {
+  return {
+    description: 'A nested selector such as ":hover", ".child" or "[open]". null edits the base context.',
+    oneOf: [{ type: "string" }, { type: "null" }]
+  };
+}
+function registerStyleCommands(registry) {
+  registry.registerAll(styleCommands());
+}
+
+// src/panels/right-panel.ts
+var _ctx = null;
+var _scope = null;
+var _scheduler = null;
+var _detached = reactive({ tab: DEFAULT_INSPECTOR_TAB });
+function mount(ctx) {
+  _ctx = ctx;
+  _scheduler = createPanelScheduler({
+    blockWhile: isColorPopoverOpen,
+    render: _doRender,
+    root: rightPanel
+  });
+  _scheduler.bindFocus();
+  _scope = effectScope();
+  _scope.run(() => {
+    effect(() => {
+      const tab = activeTab.value;
+      shell.layoutSelection;
+      if (tab) {
+        tab.doc.document;
+        tab.session.selection.map((path) => path.join("/")).join("|");
+        tab.session.ui.rightTab;
+        tab.session.ui.activeMedia;
+        tab.session.ui.activeSelector;
+        tab.session.ui.styleSections;
+        tab.session.ui.styleShorthands;
+        tab.session.ui.styleFilter;
+        tab.session.ui.inspectorSections;
+      }
+      render2();
+    });
+  });
+}
+function unmount() {
+  _scope?.stop();
+  _scope = null;
+  _ctx = null;
+  _scheduler?.unbind();
+  _scheduler = null;
+  _containers = null;
+  _detached.tab = DEFAULT_INSPECTOR_TAB;
+}
+function render2() {
+  _scheduler?.schedule();
+}
+function inspectorTab() {
+  const tab = activeTab.value;
+  if (!tab) {
+    return _detached.tab;
+  }
+  const stored = tab.session.ui.rightTab;
+  return isInspectorTabId(stored) ? stored : DEFAULT_INSPECTOR_TAB;
+}
+function setInspectorTab(tab) {
+  const aTab = activeTab.value;
+  if (aTab) {
+    aTab.session.ui.rightTab = tab;
+  } else {
+    _detached.tab = tab;
+  }
+  render2();
+}
+var _containers = null;
+function _ensureContainers(ctx) {
+  if (_containers) {
+    return _containers;
+  }
+  _containers = new Map(INSPECTOR_TABS.map((t) => {
+    const el = document.createElement("div");
+    el.className = "panel-body";
+    el.setAttribute(REGION_ATTR, inspectorTabRegion(t.id));
+    return [t.id, el];
+  }));
+  ctx.mountAssistant(_containers.get("assistant"));
+  return _containers;
+}
+function inspectorTarget() {
+  const tab = activeTab.value;
+  if (!tab) {
+    return "no document";
+  }
+  const layout = shell.layoutSelection;
+  if (layout) {
+    return `<${layout.tagName || "element"}> in ${layout.layoutFile || "the layout"}`;
+  }
+  const paths = tab.session.selection;
+  const selection = primarySelection(paths);
+  if (selection) {
+    return paths.length > 1 ? `${paths.length} elements` : nodeLabel(getNodeAtPath(tab.doc.document, selection));
+  }
+  const path = tab.documentPath;
+  return path ? path.split("/").at(-1) ?? "document" : "document";
+}
+function headerTpl(tab) {
+  const title = INSPECTOR_TABS.find((t) => t.id === tab)?.title ?? tab;
+  return html`
+    <header class="panel-header">
+      <span class="panel-header-title">${title}</span>
+      <span class="panel-header-level">${inspectorTarget()}</span>
+    </header>
+  `;
+}
+function tabsTpl(tab) {
+  return html`
+    <div class="panel-tabs inspector-tabs">
+      <sp-tabs
+        selected=${tab}
+        quiet
+        size="s"
+        @change=${(e) => {
+    const sel = e.target.selected;
+    if (sel && sel !== tab && isInspectorTabId(sel)) {
+      setInspectorTab(sel);
+    }
+  }}
+      >
+        ${INSPECTOR_TABS.map((t) => html`<sp-tab value=${t.id} label=${t.title}></sp-tab>`)}
+      </sp-tabs>
+    </div>
+  `;
+}
+function noDocumentTpl() {
+  return renderEmptyState({
+    actions: [openPageAction()],
+    message: "Open a page to inspect and style what you click."
+  });
+}
+function _doRender() {
+  if (!_ctx) {
+    return;
+  }
+  try {
+    const ctx = _ctx;
+    const aTab = activeTab.value;
+    const tab = inspectorTab();
+    render(html`${headerTpl(tab)}${tabsTpl(tab)}`, rightPanel);
+    const containers = _ensureContainers(ctx);
+    for (const [key, el] of containers) {
+      el.style.display = key === tab ? "" : "none";
+      if (!el.parentNode) {
+        rightPanel.append(el);
+      }
+    }
+    const body = containers.get(tab);
+    if (tab === "assistant") {
+      return;
+    }
+    if (!aTab) {
+      render(noDocumentTpl(), body);
+      return;
+    }
+    if (tab === "properties") {
+      render(renderPropertiesPanelTemplate({
+        navigateToComponent: ctx.navigateToComponent
+      }), body);
+    } else if (tab === "events") {
+      render(renderLogicPanelTemplate({
+        isCustomElementDoc: () => isCustomElementDoc({
+          document: aTab.doc.document,
+          mode: aTab.doc.mode,
+          selection: aTab.session.selection,
+          ui: aTab.session.ui
+        })
+      }), body);
+    } else {
+      try {
+        render(renderStylePanelTemplate({ getCanvasMode: ctx.getCanvasMode }), body);
+      } catch (error) {
+        console.error("[renderStylePanelTemplate]", error);
+      }
+    }
+  } catch (error) {
+    console.error("right-panel render error:", error);
+  }
+}
+
+export { registerStyleCommands, mount, unmount, render2 as render, inspectorTab, setInspectorTab };
+
+//# debugId=EE6BCDBC241C370964756E2164756E21
+//# sourceMappingURL=studio-hbp1s8m9.js.map