@jxsuite/studio 4.1.0 → 5.0.0

package/dist/chunks/studio-zqazsct2.js

@@ -1,1823 +0,0 @@
-import {
-  INSPECTOR_TABS,
-  selectStylebookTag
-} from "./studio-fbf92ckf.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-950k0dx6.js";
-import {
-  createPanelScheduler
-} from "./studio-8jpzqk5s.js";
-import {
-  VALUE_SOURCE_LABELS,
-  capsForPosition,
-  countProvenance,
-  renderDynamicSlot,
-  renderExpressionEditor,
-  renderFieldRow,
-  renderProvenanceChip,
-  renderProvenanceDots,
-  renderStaticKvRow,
-  slotMode,
-  switchSlotMode
-} from "./studio-x4qkdat5.js";
-import {
-  loadUsages,
-  peekUsages,
-  usageFiles
-} from "./studio-cft9r4r7.js";
-import {
-  clickAnythingTo,
-  mediaDisplayName,
-  openPageAction,
-  renderEmptyState,
-  staleSelectionMessage
-} from "./studio-2b946z26.js";
-import {
-  DEFAULT_INSPECTOR_TAB,
-  getEffectiveMedia,
-  getEffectiveStyle,
-  isInspectorTabId,
-  shell
-} from "./studio-msd847zn.js";
-import {
-  activeTab,
-  inferInputType,
-  mutateAddDef,
-  mutateAddSwitchCase,
-  mutateRemoveSwitchCase,
-  mutateRenameSwitchCase,
-  mutateUpdateMediaNestedStyle,
-  mutateUpdateMediaNestedStylePath,
-  mutateUpdateMediaStyle,
-  mutateUpdateNestedStyle,
-  mutateUpdateNestedStylePath,
-  mutateUpdateProperty,
-  mutateUpdateStyle,
-  primarySelection,
-  propLabel,
-  stringArg,
-  transactDoc,
-  unifyValues
-} from "./studio-trxrabqf.js";
-import {
-  classMap,
-  ifDefined
-} from "./studio-m3hwn7y1.js";
-import {
-  COMMON_SELECTORS,
-  debouncedStyleCommit,
-  getNodeAtPath,
-  isNestedSelector,
-  nodeLabel,
-  renderOnly,
-  rightPanel,
-  updateUi
-} from "./studio-p4ngc046.js";
-import {
-  REGION_ATTR,
-  activeRegistry,
-  inspectorStatementsRegion,
-  inspectorTabRegion,
-  showPromptDialog
-} from "./studio-t7qb9db8.js";
-import {
-  effect,
-  effectScope,
-  reactive
-} from "./studio-xrapxwwc.js";
-import {
-  live,
-  ref
-} from "./studio-4rzyrtjz.js";
-import {
-  html,
-  nothing,
-  render
-} from "./studio-kryvsw6j.js";
-import {
-  getEventBinding,
-  getNestedStyle,
-  isExpressionDef,
-  isFunctionDef,
-  isJsonObject,
-  isRef
-} from "./studio-q7v10cg2.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=${live(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=${live(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=${live(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=F77FC250B78B06BA64756E2164756E21
-//# sourceMappingURL=studio-zqazsct2.js.map