@jxsuite/studio 2.0.0 → 2.1.0

package/dist/chunks/studio-j6gqyjf4.js

@@ -1,1854 +0,0 @@
-import {
-  openFileInTab
-} from "./studio-d77qm3pk.js";
-import {
-  getEffectiveMedia,
-  postSiteStyleToLiveHosts,
-  pureSchemeOf,
-  updateSiteConfig
-} from "./studio-ygzav7z5.js";
-import {
-  classMap
-} from "./studio-cx91mnh8.js";
-import {
-  VERSION,
-  isComparable,
-  isUpgrade,
-  showProgressModal,
-  stripRange
-} from "./studio-568nx4t5.js";
-import {
-  openModal,
-  statusMessage
-} from "./studio-asvf0j9e.js";
-import {
-  camelToLabel,
-  friendlyNameToVar,
-  projectState,
-  varDisplayName
-} from "./studio-rq0vxb19.js";
-import {
-  ref
-} from "./studio-4k0m4fmp.js";
-import {
-  html,
-  nothing,
-  render
-} from "./studio-5x5774ak.js";
-import {
-  getPlatform
-} from "./studio-9smfzqhc.js";
-import {
-  __require
-} from "./studio-md4gps17.js";
-
-// src/settings/schema-field-ui.ts
-var FIELD_TYPES = ["string", "number", "boolean", "array", "object", "reference"];
-var FORMAT_OPTIONS = ["", "image", "date", "color"];
-function detectFieldType(schema) {
-  if (schema.$ref) {
-    return "reference";
-  }
-  return schema.type || "string";
-}
-function detectFieldFormat(schema) {
-  if (schema.type === "array" && schema.items?.format) {
-    return schema.items.format;
-  }
-  return schema.format || "";
-}
-function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, contentTypeNames = []) {
-  const type = detectFieldType(fieldSchema);
-  const format = detectFieldFormat(fieldSchema);
-  const isNested = type === "object";
-  const isRef = type === "reference";
-  const nestedProps = fieldSchema.properties || {};
-  const nestedRequired = fieldSchema.required || [];
-  const refTarget = fieldSchema.$ref ? fieldSchema.$ref.replace(/^#\/[^/]+\//, "") : "";
-  return html`
-    <div class="schema-field-card">
-      <div class="schema-field-row">
-        <sp-field-label size="s" class="schema-field-label"
-          >${camelToLabel(fieldName)}</sp-field-label
-        >
-        <sp-textfield
-          size="s"
-          quiet
-          value=${fieldName}
-          class="schema-field-name-input"
-          @change=${(e) => {
-    const target = e.target;
-    const newName = target.value.trim();
-    if (newName && newName !== fieldName) {
-      handlers.onRename(fieldName, newName);
-    } else {
-      target.value = fieldName;
-    }
-  }}
-          @keydown=${(e) => {
-    const target = e.target;
-    if (e.key === "Enter") {
-      target.blur();
-    }
-    if (e.key === "Escape") {
-      target.value = fieldName;
-      target.blur();
-    }
-  }}
-        ></sp-textfield>
-        ${typePickerTpl(type, (newType) => handlers.onChangeType(fieldName, newType))}
-        ${type === "string" || type === "array" ? formatPickerTpl(format, (f) => {
-    if (handlers.onChangeFormat) {
-      handlers.onChangeFormat(fieldName, f);
-    }
-  }) : nothing}
-        <sp-switch
-          size="s"
-          ?checked=${isRequired}
-          @change=${() => handlers.onToggleRequired(fieldName)}
-        >
-          Req
-        </sp-switch>
-        <sp-action-button
-          size="xs"
-          quiet
-          title="Delete field"
-          @click=${() => handlers.onDelete(fieldName)}
-        >
-          <sp-icon-delete slot="icon"></sp-icon-delete>
-        </sp-action-button>
-      </div>
-      ${isRef && contentTypeNames.length > 0 ? html`
-              <div class="schema-field-ref-target">
-                <sp-picker
-                  size="s"
-                  label="Target"
-                  value=${refTarget}
-                  @change=${(e) => {
-    if (handlers.onChangeRefTarget) {
-      handlers.onChangeRefTarget(fieldName, e.target.value);
-    }
-  }}
-                >
-                  ${contentTypeNames.map((n) => html`<sp-menu-item value=${n}>${n}</sp-menu-item>`)}
-                </sp-picker>
-              </div>
-            ` : nothing}
-      ${isNested ? html`
-              <div class="schema-field-nested">
-                ${Object.entries(nestedProps).map(([name, sub]) => nestedFieldCardTpl(fieldName, name, sub, nestedRequired.includes(name), handlers))}
-                ${nestedAddFieldTpl(fieldName, handlers)}
-              </div>
-            ` : nothing}
-    </div>
-  `;
-}
-function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, handlers) {
-  const type = detectFieldType(childSchema);
-  const format = detectFieldFormat(childSchema);
-  return html`
-    <div class="schema-field-card schema-field-card--nested">
-      <div class="schema-field-row">
-        <sp-textfield
-          size="s"
-          quiet
-          value=${childName}
-          class="schema-field-name-input"
-          @change=${(e) => {
-    const target = e.target;
-    const newName = target.value.trim();
-    if (newName && newName !== childName && handlers.onRenameNested) {
-      handlers.onRenameNested(parentName, childName, newName);
-    } else {
-      target.value = childName;
-    }
-  }}
-          @keydown=${(e) => {
-    const target = e.target;
-    if (e.key === "Enter") {
-      target.blur();
-    }
-    if (e.key === "Escape") {
-      target.value = childName;
-      target.blur();
-    }
-  }}
-        ></sp-textfield>
-        ${typePickerTpl(type, (newType) => {
-    if (handlers.onChangeNestedType) {
-      handlers.onChangeNestedType(parentName, childName, newType);
-    }
-  })}
-        ${type === "string" || type === "array" ? formatPickerTpl(format, (f) => {
-    if (handlers.onChangeNestedFormat) {
-      handlers.onChangeNestedFormat(parentName, childName, f);
-    }
-  }) : nothing}
-        <sp-switch
-          size="s"
-          ?checked=${isRequired}
-          @change=${() => {
-    if (handlers.onToggleNestedRequired) {
-      handlers.onToggleNestedRequired(parentName, childName);
-    }
-  }}
-        >
-          Req
-        </sp-switch>
-        <sp-action-button
-          size="xs"
-          quiet
-          title="Delete field"
-          @click=${() => {
-    if (handlers.onDeleteNested) {
-      handlers.onDeleteNested(parentName, childName);
-    }
-  }}
-        >
-          <sp-icon-delete slot="icon"></sp-icon-delete>
-        </sp-action-button>
-      </div>
-    </div>
-  `;
-}
-function nestedAddFieldTpl(parentName, handlers) {
-  return html`
-    <div class="schema-nested-add">
-      <sp-textfield
-        size="s"
-        placeholder="field name"
-        class="schema-nested-add-name"
-        @keydown=${(e) => {
-    if (e.key === "Enter") {
-      const target = e.target;
-      const row = target.closest(".schema-nested-add");
-      const name = target.value.trim();
-      const typePicker = row?.querySelector("sp-picker");
-      const type = typePicker?.value || "string";
-      if (name && handlers.onAddNestedField) {
-        handlers.onAddNestedField(parentName, {
-          name,
-          required: false,
-          type
-        });
-        target.value = "";
-      }
-    }
-  }}
-      ></sp-textfield>
-      ${typePickerTpl("string", () => {})}
-      <sp-action-button
-        size="xs"
-        quiet
-        title="Add nested field"
-        @click=${(e) => {
-    const target = e.target;
-    const row = target.closest(".schema-nested-add");
-    const nameInput = row?.querySelector(".schema-nested-add-name");
-    const typePicker = row?.querySelector("sp-picker");
-    const name = nameInput?.value?.trim();
-    const type = typePicker?.value || "string";
-    if (name && handlers.onAddNestedField) {
-      handlers.onAddNestedField(parentName, {
-        name,
-        required: false,
-        type
-      });
-      if (nameInput) {
-        nameInput.value = "";
-      }
-    }
-  }}
-      >
-        <sp-icon-add slot="icon"></sp-icon-add>
-      </sp-action-button>
-    </div>
-  `;
-}
-function typePickerTpl(value, onChange) {
-  return html`
-    <sp-picker
-      size="s"
-      label="Type"
-      value=${value}
-      @change=${(e) => onChange(e.target.value)}
-    >
-      ${FIELD_TYPES.map((t) => html`<sp-menu-item value=${t}>${t}</sp-menu-item>`)}
-    </sp-picker>
-  `;
-}
-function formatPickerTpl(value, onChange) {
-  return html`
-    <sp-picker
-      size="s"
-      label="Format"
-      value=${value}
-      @change=${(e) => onChange(e.target.value)}
-    >
-      ${FORMAT_OPTIONS.map((f) => html`<sp-menu-item value=${f}>${f || "(none)"}</sp-menu-item>`)}
-    </sp-picker>
-  `;
-}
-function addFieldFormTpl(state, handlers) {
-  return html`
-    <div class="schema-add-field">
-      <sp-textfield
-        size="s"
-        placeholder="Field name"
-        .value=${state.name}
-        @input=${(e) => handlers.onInput("name", e.target.value)}
-        @keydown=${(e) => {
-    if (e.key === "Enter") {
-      handlers.onConfirm();
-    }
-    if (e.key === "Escape") {
-      handlers.onCancel();
-    }
-  }}
-      ></sp-textfield>
-      ${typePickerTpl(state.type, (t) => handlers.onInput("type", t))}
-      ${state.type === "string" || state.type === "array" ? formatPickerTpl(state.format || "", (f) => handlers.onInput("format", f)) : nothing}
-      <sp-switch
-        size="s"
-        ?checked=${state.required}
-        @change=${(e) => handlers.onInput("required", e.target.checked)}
-      >
-        Required
-      </sp-switch>
-      <sp-action-button size="s" @click=${handlers.onConfirm}>Add</sp-action-button>
-      <sp-action-button size="s" quiet @click=${handlers.onCancel}>Cancel</sp-action-button>
-    </div>
-  `;
-}
-function schemaForType(type, format) {
-  switch (type) {
-    case "number": {
-      return { type: "number" };
-    }
-    case "boolean": {
-      return { type: "boolean" };
-    }
-    case "array": {
-      return format ? { items: { format, type: "string" }, type: "array" } : { items: { type: "string" }, type: "array" };
-    }
-    case "object": {
-      return { properties: {}, required: [], type: "object" };
-    }
-    case "reference": {
-      return { $ref: "#/content/" };
-    }
-    default: {
-      return format ? { format, type: "string" } : { type: "string" };
-    }
-  }
-}
-function yamlDefault(type, format) {
-  if (format === "date") {
-    return new Date().toISOString().split("T")[0];
-  }
-  if (format === "image") {
-    return '""';
-  }
-  switch (type) {
-    case "boolean": {
-      return "false";
-    }
-    case "number": {
-      return "0";
-    }
-    case "array": {
-      return "[]";
-    }
-    case "object": {
-      return "{}";
-    }
-    default: {
-      return '""';
-    }
-  }
-}
-
-// src/settings/defs-editor.ts
-var selectedDef = null;
-var showAddField = false;
-var newFieldState = { format: "", name: "", required: false, type: "string" };
-var showNewDef = false;
-var newDefName = "";
-async function saveProjectConfig() {
-  const platform = getPlatform();
-  const config = projectState.projectConfig;
-  await platform.writeFile("project.json", JSON.stringify(config, null, "\t"));
-}
-function getSelectedDef() {
-  const config = projectState?.projectConfig;
-  return config?.$defs?.[selectedDef];
-}
-function handleNewDef(rerender) {
-  const name = newDefName.trim();
-  if (!name) {
-    return;
-  }
-  const config = projectState?.projectConfig;
-  if (!config) {
-    return;
-  }
-  if (!config.$defs) {
-    config.$defs = {};
-  }
-  if (config.$defs[name]) {
-    return;
-  }
-  config.$defs[name] = {
-    properties: {},
-    required: [],
-    type: "object"
-  };
-  selectedDef = name;
-  showNewDef = false;
-  newDefName = "";
-  rerender();
-  saveProjectConfig();
-}
-function handleAddField(rerender) {
-  const name = newFieldState.name.trim();
-  if (!name || !selectedDef) {
-    return;
-  }
-  const def = getSelectedDef();
-  if (!def) {
-    return;
-  }
-  if (!def.properties) {
-    def.properties = {};
-  }
-  def.properties[name] = schemaForType(newFieldState.type, newFieldState.format || undefined);
-  if (newFieldState.required) {
-    if (!def.required) {
-      def.required = [];
-    }
-    if (!def.required.includes(name)) {
-      def.required.push(name);
-    }
-  }
-  showAddField = false;
-  newFieldState = { format: "", name: "", required: false, type: "string" };
-  rerender();
-  saveProjectConfig();
-}
-function handleDeleteField(fieldName, rerender) {
-  const def = getSelectedDef();
-  if (!def?.properties) {
-    return;
-  }
-  delete def.properties[fieldName];
-  if (def.required) {
-    def.required = def.required.filter((r) => r !== fieldName);
-  }
-  rerender();
-  saveProjectConfig();
-}
-function handleToggleRequired(fieldName, rerender) {
-  const def = getSelectedDef();
-  if (!def) {
-    return;
-  }
-  if (!def.required) {
-    def.required = [];
-  }
-  const idx = def.required.indexOf(fieldName);
-  if (idx !== -1) {
-    def.required.splice(idx, 1);
-  } else {
-    def.required.push(fieldName);
-  }
-  rerender();
-  saveProjectConfig();
-}
-function handleRenameField(oldName, newName, rerender) {
-  const def = getSelectedDef();
-  if (!def?.properties || !newName || def.properties[newName]) {
-    return;
-  }
-  const newProps = {};
-  for (const [key, val] of Object.entries(def.properties)) {
-    newProps[key === oldName ? newName : key] = val;
-  }
-  def.properties = newProps;
-  if (def.required) {
-    def.required = def.required.map((r) => r === oldName ? newName : r);
-  }
-  rerender();
-  saveProjectConfig();
-}
-function handleChangeType(fieldName, newType, rerender) {
-  const def = getSelectedDef();
-  if (!def?.properties?.[fieldName]) {
-    return;
-  }
-  const oldFormat = newType === "string" || newType === "array" ? detectFieldFormat(def.properties[fieldName]) : undefined;
-  def.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
-  rerender();
-  saveProjectConfig();
-}
-function handleChangeFormat(fieldName, format, rerender) {
-  const def = getSelectedDef();
-  if (!def?.properties?.[fieldName]) {
-    return;
-  }
-  const prop = def.properties[fieldName];
-  const type = prop.type || "string";
-  def.properties[fieldName] = schemaForType(type, format || undefined);
-  rerender();
-  saveProjectConfig();
-}
-function handleAddNestedField(parentName, fieldState, rerender) {
-  const def = getSelectedDef();
-  const parent = def?.properties?.[parentName];
-  if (!parent) {
-    return;
-  }
-  if (!parent.properties) {
-    parent.properties = {};
-  }
-  parent.properties[fieldState.name] = schemaForType(fieldState.type);
-  if (fieldState.required) {
-    if (!parent.required) {
-      parent.required = [];
-    }
-    if (!parent.required.includes(fieldState.name)) {
-      parent.required.push(fieldState.name);
-    }
-  }
-  rerender();
-  saveProjectConfig();
-}
-function handleDeleteNested(parentName, childName, rerender) {
-  const def = getSelectedDef();
-  const parent = def?.properties?.[parentName];
-  if (!parent?.properties) {
-    return;
-  }
-  delete parent.properties[childName];
-  if (parent.required) {
-    parent.required = parent.required.filter((r) => r !== childName);
-  }
-  rerender();
-  saveProjectConfig();
-}
-function handleToggleNestedRequired(parentName, childName, rerender) {
-  const def = getSelectedDef();
-  const parent = def?.properties?.[parentName];
-  if (!parent) {
-    return;
-  }
-  if (!parent.required) {
-    parent.required = [];
-  }
-  const idx = parent.required.indexOf(childName);
-  if (idx !== -1) {
-    parent.required.splice(idx, 1);
-  } else {
-    parent.required.push(childName);
-  }
-  rerender();
-  saveProjectConfig();
-}
-function handleRenameNested(parentName, oldChild, newChild, rerender) {
-  const def = getSelectedDef();
-  const parent = def?.properties?.[parentName];
-  if (!parent?.properties || !newChild || parent.properties[newChild]) {
-    return;
-  }
-  const newProps = {};
-  for (const [key, val] of Object.entries(parent.properties)) {
-    newProps[key === oldChild ? newChild : key] = val;
-  }
-  parent.properties = newProps;
-  if (parent.required) {
-    parent.required = parent.required.map((r) => r === oldChild ? newChild : r);
-  }
-  rerender();
-  saveProjectConfig();
-}
-function handleChangeNestedType(parentName, childName, newType, rerender) {
-  const def = getSelectedDef();
-  const parent = def?.properties?.[parentName];
-  if (!parent?.properties?.[childName]) {
-    return;
-  }
-  const oldFormat = newType === "string" || newType === "array" ? detectFieldFormat(parent.properties[childName]) : undefined;
-  parent.properties[childName] = schemaForType(newType, oldFormat || undefined);
-  rerender();
-  saveProjectConfig();
-}
-function handleChangeNestedFormat(parentName, childName, format, rerender) {
-  const def = getSelectedDef();
-  const parent = def?.properties?.[parentName];
-  if (!parent?.properties?.[childName]) {
-    return;
-  }
-  const prop = parent.properties[childName];
-  const type = prop.type || "string";
-  parent.properties[childName] = schemaForType(type, format || undefined);
-  rerender();
-  saveProjectConfig();
-}
-function handleDeleteDef(rerender) {
-  if (!selectedDef) {
-    return;
-  }
-  const config = projectState?.projectConfig;
-  if (!config?.$defs?.[selectedDef]) {
-    return;
-  }
-  delete config.$defs[selectedDef];
-  selectedDef = null;
-  rerender();
-  saveProjectConfig();
-}
-function renderDefsEditor(container) {
-  const rerender = () => renderDefsEditor(container);
-  const config = projectState?.projectConfig;
-  const defs = config?.$defs || {};
-  const defNames = Object.keys(defs);
-  const listTpl = html`
-    <div class="settings-list-panel">
-      ${defNames.map((name) => html`
-          <sp-action-button
-            size="s"
-            ?selected=${selectedDef === name}
-            @click=${() => {
-    selectedDef = name;
-    showAddField = false;
-    rerender();
-  }}
-          >
-            ${name}
-          </sp-action-button>
-        `)}
-      ${showNewDef ? html`
-              <div class="settings-inline-form">
-                <sp-textfield
-                  size="s"
-                  placeholder="TypeName"
-                  .value=${newDefName}
-                  @input=${(e) => {
-    newDefName = e.target.value;
-  }}
-                  @keydown=${(e) => {
-    if (e.key === "Enter") {
-      handleNewDef(rerender);
-    }
-    if (e.key === "Escape") {
-      showNewDef = false;
-      rerender();
-    }
-  }}
-                ></sp-textfield>
-                <sp-action-button size="s" @click=${() => handleNewDef(rerender)}>
-                  Create
-                </sp-action-button>
-              </div>
-            ` : html`
-              <sp-action-button
-                size="s"
-                quiet
-                @click=${() => {
-    showNewDef = true;
-    rerender();
-  }}
-              >
-                <sp-icon-add slot="icon"></sp-icon-add> New Definition
-              </sp-action-button>
-            `}
-    </div>
-  `;
-  let editorTpl;
-  if (!selectedDef || !defs[selectedDef]) {
-    editorTpl = html`<div class="settings-empty-state">Select or create a type definition</div>`;
-  } else {
-    const def = defs[selectedDef];
-    const properties = def.properties || {};
-    const required = def.required || [];
-    const handlers = {
-      onAddNestedField: (p, s) => handleAddNestedField(p, s, rerender),
-      onChangeFormat: (n, f) => handleChangeFormat(n, f, rerender),
-      onChangeNestedFormat: (p, c, f) => handleChangeNestedFormat(p, c, f, rerender),
-      onChangeNestedType: (p, c, t) => handleChangeNestedType(p, c, t, rerender),
-      onChangeType: (n, t) => handleChangeType(n, t, rerender),
-      onDelete: (n) => handleDeleteField(n, rerender),
-      onDeleteNested: (p, c) => handleDeleteNested(p, c, rerender),
-      onRename: (oldN, newN) => handleRenameField(oldN, newN, rerender),
-      onRenameNested: (p, o, n) => handleRenameNested(p, o, n, rerender),
-      onToggleNestedRequired: (p, c) => handleToggleNestedRequired(p, c, rerender),
-      onToggleRequired: (n) => handleToggleRequired(n, rerender)
-    };
-    const fieldCards = Object.entries(properties).map(([name, fieldDef]) => fieldCardTpl(name, fieldDef, required.includes(name), handlers));
-    editorTpl = html`
-      <div class="settings-editor-panel">
-        <div class="settings-editor-header">
-          <h3>${selectedDef}</h3>
-          <sp-action-button
-            size="xs"
-            quiet
-            title="Delete definition"
-            @click=${() => handleDeleteDef(rerender)}
-          >
-            <sp-icon-delete slot="icon"></sp-icon-delete>
-          </sp-action-button>
-        </div>
-        <div class="schema-field-list">${fieldCards}</div>
-        ${showAddField ? addFieldFormTpl(newFieldState, {
-      onCancel: () => {
-        showAddField = false;
-        newFieldState = {
-          format: "",
-          name: "",
-          required: false,
-          type: "string"
-        };
-        rerender();
-      },
-      onConfirm: () => handleAddField(rerender),
-      onInput: (field, value) => {
-        newFieldState = { ...newFieldState, [field]: value };
-        rerender();
-      }
-    }) : html`
-                <sp-action-button
-                  size="s"
-                  quiet
-                  @click=${() => {
-      showAddField = true;
-      rerender();
-    }}
-                >
-                  <sp-icon-add slot="icon"></sp-icon-add> Add Field
-                </sp-action-button>
-              `}
-      </div>
-    `;
-  }
-  const tpl = html` <div class="settings-two-col">${listTpl} ${editorTpl}</div> `;
-  render(tpl, container);
-}
-
-// src/utils/canvas-media.ts
-function isSchemeQuery(query) {
-  return pureSchemeOf(query) !== null;
-}
-function schemeOfQuery(query) {
-  return pureSchemeOf(query);
-}
-function parseMediaEntries(mediaDef) {
-  if (!mediaDef) {
-    return { baseWidth: 320, featureQueries: [], sizeBreakpoints: [] };
-  }
-  const features = [];
-  const sizes = [];
-  let baseWidth = 320;
-  for (const [name, query] of Object.entries(mediaDef)) {
-    if (name === "--") {
-      const wm = String(query).match(/^(\d+)\s*px$/);
-      baseWidth = wm ? Number(wm[1]) : 320;
-      continue;
-    }
-    const minMatch = query.match(/min-width:\s*([\d.]+)px/);
-    const maxMatch = query.match(/max-width:\s*([\d.]+)px/);
-    if (minMatch) {
-      sizes.push({ name, query, type: "min", width: Number(minMatch[1]) });
-    } else if (maxMatch) {
-      sizes.push({ name, query, type: "max", width: Number(maxMatch[1]) });
-    } else {
-      features.push({ name, query });
-    }
-  }
-  sizes.sort((a, b) => a.type === "min" ? a.width - b.width : b.width - a.width);
-  return { baseWidth, featureQueries: features, sizeBreakpoints: sizes };
-}
-
-// src/settings/css-vars-editor.ts
-function renderCssVarsEditor(container) {
-  const config = projectState?.projectConfig || {};
-  const rootStyle = config.style || {};
-  const media = getEffectiveMedia(config.$media);
-  const groups = { color: [], font: [], other: [], size: [] };
-  for (const [k, v] of Object.entries(rootStyle)) {
-    if (!k.startsWith("--")) {
-      continue;
-    }
-    if (typeof v !== "string" && typeof v !== "number") {
-      continue;
-    }
-    if (k.startsWith("--color")) {
-      groups.color.push([k, v]);
-    } else if (k.startsWith("--font")) {
-      groups.font.push([k, v]);
-    } else if (k.startsWith("--size") || k.startsWith("--spacing") || k.startsWith("--radius")) {
-      groups.size.push([k, v]);
-    } else {
-      groups.other.push([k, v]);
-    }
-  }
-  const mediaNames = media ? Object.keys(media).filter((m) => m !== "--" && !isSchemeQuery(String(media[m]))) : [];
-  const schemeEntries = media ? Object.entries(media).flatMap(([name, query]) => {
-    const scheme = schemeOfQuery(String(query));
-    return scheme ? [{ name, scheme }] : [];
-  }) : [];
-  const save = () => {
-    updateSiteConfig({ style: { ...rootStyle } });
-    postSiteStyleToLiveHosts();
-  };
-  const updateVar = (name, val) => {
-    rootStyle[name] = val;
-    save();
-  };
-  const updateSchemeVar = (schemeName, varName, val) => {
-    const key = `@${schemeName}`;
-    if (val) {
-      const block = rootStyle[key] ??= {};
-      block[varName] = val;
-    } else {
-      const block = rootStyle[key];
-      if (block && typeof block === "object") {
-        delete block[varName];
-        if (Object.keys(block).length === 0) {
-          delete rootStyle[key];
-        }
-      }
-    }
-    save();
-    renderCssVarsEditor(container);
-  };
-  const enableDarkScheme = () => {
-    updateSiteConfig({
-      $media: { ...config.$media, "--dark": "(prefers-color-scheme: dark)" }
-    }).then(() => renderCssVarsEditor(container));
-  };
-  const deleteVar = (name) => {
-    delete rootStyle[name];
-    save();
-    renderCssVarsEditor(container);
-  };
-  const addVar = (prefix, friendlyName, val) => {
-    const varName = friendlyNameToVar(friendlyName, prefix);
-    if (!varName || !val) {
-      return;
-    }
-    rootStyle[varName] = val;
-    save();
-    renderCssVarsEditor(container);
-  };
-  const tpl = html`
-    <div class="settings-section">
-      <h3 class="settings-section-title">CSS Variables</h3>
-
-      ${renderColorSection(groups.color, updateVar, deleteVar, addVar, rootStyle, schemeEntries, updateSchemeVar, enableDarkScheme)}
-      ${renderFontSection(groups.font, updateVar, deleteVar, addVar)}
-      ${renderSizeSection(groups.size, updateVar, deleteVar, addVar, rootStyle, mediaNames)}
-      ${groups.other.length > 0 ? renderOtherSection(groups.other, updateVar, deleteVar, addVar, rootStyle, mediaNames) : nothing}
-    </div>
-  `;
-  render(tpl, container);
-}
-function renderColorSection(vars, updateVar, deleteVar, addVar, rootStyle, schemeEntries, updateSchemeVar, enableDarkScheme) {
-  return html`
-    <div class="css-vars-group">
-      <h4 class="css-vars-group-title">Colors</h4>
-      ${vars.map(([name, val]) => html`
-          <div class="css-var-row">
-            <div class="css-var-swatch" style="background:${val}">
-              <input
-                type="color"
-                .value=${val && String(val).startsWith("#") ? val : "#3b82f6"}
-                @input=${(e) => updateVar(name, e.target.value)}
-              />
-            </div>
-            <span class="css-var-name">${varDisplayName(name, "--color-")}</span>
-            <sp-textfield
-              size="s"
-              .value=${String(val)}
-              @change=${(e) => updateVar(name, e.target.value)}
-              style="flex:1;max-width:160px"
-            ></sp-textfield>
-            <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
-              <sp-icon-delete slot="icon"></sp-icon-delete>
-            </sp-action-button>
-          </div>
-          ${schemeEntries.map((entry) => renderSchemeOverride(name, rootStyle, entry, updateSchemeVar))}
-        `)}
-      ${renderAddRow("--color-", "Primary Blue", "#3b82f6", addVar)}
-      ${schemeEntries.length === 0 ? html`
-              <sp-action-button
-                size="s"
-                class="css-vars-enable-dark"
-                title="Add a dark color scheme: declares --dark in $media so every color token can carry a dark value"
-                @click=${enableDarkScheme}
-              >
-                Enable dark scheme
-              </sp-action-button>
-            ` : nothing}
-    </div>
-  `;
-}
-function renderSchemeOverride(varName, rootStyle, entry, updateSchemeVar) {
-  const block = rootStyle[`@${entry.name}`];
-  const current = block && typeof block === "object" ? block[varName] : undefined;
-  const label = entry.scheme === "dark" ? "Dark" : "Light";
-  return html`
-    <div class="css-var-media-row css-var-scheme-row">
-      <span class="css-var-media-label">${label}</span>
-      <div class="css-var-swatch" style="background:${current ?? "transparent"}">
-        <input
-          type="color"
-          .value=${current && String(current).startsWith("#") ? String(current) : "#111111"}
-          @input=${(e) => updateSchemeVar(entry.name, varName, e.target.value)}
-        />
-      </div>
-      <sp-textfield
-        size="s"
-        placeholder="inherits"
-        .value=${current == null ? "" : String(current)}
-        @change=${(e) => updateSchemeVar(entry.name, varName, e.target.value)}
-        style="flex:1;max-width:160px"
-      ></sp-textfield>
-    </div>
-  `;
-}
-function renderFontSection(vars, updateVar, deleteVar, addVar) {
-  return html`
-    <div class="css-vars-group">
-      <h4 class="css-vars-group-title">Fonts</h4>
-      ${vars.map(([name, val]) => html`
-          <div class="css-var-row">
-            <span class="css-var-name">${varDisplayName(name, "--font-")}</span>
-            <sp-textfield
-              size="s"
-              .value=${String(val)}
-              @change=${(e) => updateVar(name, e.target.value)}
-              style="flex:1"
-            ></sp-textfield>
-            <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
-              <sp-icon-delete slot="icon"></sp-icon-delete>
-            </sp-action-button>
-          </div>
-          <div class="css-var-font-preview" style="font-family:${val}">
-            The quick brown fox jumps over the lazy dog
-          </div>
-        `)}
-      ${renderAddRow("--font-", "Body Serif", "'Georgia', serif", addVar)}
-    </div>
-  `;
-}
-function renderSizeSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaNames) {
-  return html`
-    <div class="css-vars-group">
-      <h4 class="css-vars-group-title">Sizes &amp; Spacing</h4>
-      ${vars.map(([name, val]) => html`
-          <div class="css-var-row">
-            <span class="css-var-name"
-              >${varDisplayName(name, "--size-") || varDisplayName(name, "--spacing-") || varDisplayName(name, "--radius-") || name}</span
-            >
-            <sp-textfield
-              size="s"
-              .value=${String(val)}
-              @change=${(e) => updateVar(name, e.target.value)}
-              style="max-width:120px"
-            ></sp-textfield>
-            <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
-              <sp-icon-delete slot="icon"></sp-icon-delete>
-            </sp-action-button>
-          </div>
-          ${mediaNames.length > 0 ? renderMediaOverrides(name, rootStyle, mediaNames) : nothing}
-        `)}
-      ${renderAddRow("--size-", "Spacing Large", "32px", addVar)}
-    </div>
-  `;
-}
-function renderOtherSection(vars, updateVar, deleteVar, addVar, rootStyle, mediaNames) {
-  return html`
-    <div class="css-vars-group">
-      <h4 class="css-vars-group-title">Other</h4>
-      ${vars.map(([name, val]) => html`
-          <div class="css-var-row">
-            <span class="css-var-name">${name}</span>
-            <sp-textfield
-              size="s"
-              .value=${String(val)}
-              @change=${(e) => updateVar(name, e.target.value)}
-              style="flex:1"
-            ></sp-textfield>
-            <sp-action-button quiet size="s" @click=${() => deleteVar(name)}>
-              <sp-icon-delete slot="icon"></sp-icon-delete>
-            </sp-action-button>
-          </div>
-          ${mediaNames.length > 0 ? renderMediaOverrides(name, rootStyle, mediaNames) : nothing}
-        `)}
-      ${renderAddRow("--", "Custom Var", "value", addVar)}
-    </div>
-  `;
-}
-function renderMediaOverrides(varName, rootStyle, mediaNames) {
-  const overrides = [];
-  for (const mediaName of mediaNames) {
-    const mediaKey = `@${mediaName}`;
-    const mediaBlock = rootStyle[mediaKey];
-    if (mediaBlock && typeof mediaBlock === "object" && mediaBlock[varName]) {
-      overrides.push({ mediaName, value: mediaBlock[varName] });
-    }
-  }
-  if (overrides.length === 0) {
-    return nothing;
-  }
-  return html`
-    <div class="css-var-media-overrides">
-      ${overrides.map((o) => html`
-          <div class="css-var-media-row">
-            <span class="css-var-media-label">@${o.mediaName}</span>
-            <sp-textfield
-              size="s"
-              .value=${String(o.value)}
-              @change=${(e) => {
-    if (!rootStyle[`@${o.mediaName}`]) {
-      rootStyle[`@${o.mediaName}`] = {};
-    }
-    rootStyle[`@${o.mediaName}`][varName] = e.target.value;
-    updateSiteConfig({ style: { ...rootStyle } });
-  }}
-              style="max-width:120px"
-            ></sp-textfield>
-          </div>
-        `)}
-    </div>
-  `;
-}
-function renderAddRow(prefix, placeholder, valuePlaceholder, addVar) {
-  let nameEl = null;
-  let valEl = null;
-  return html`
-    <div class="css-var-add-row">
-      <sp-textfield
-        size="s"
-        placeholder=${placeholder}
-        ${ref((el) => {
-    if (el) {
-      nameEl = el;
-    }
-  })}
-      ></sp-textfield>
-      <sp-textfield
-        size="s"
-        placeholder=${valuePlaceholder}
-        ${ref((el) => {
-    if (el) {
-      valEl = el;
-    }
-  })}
-      ></sp-textfield>
-      <sp-action-button
-        size="s"
-        @click=${() => {
-    if (nameEl && valEl) {
-      addVar(prefix, nameEl.value, valEl.value);
-    }
-  }}
-        >Add</sp-action-button
-      >
-    </div>
-  `;
-}
-
-// src/utils/google-fonts.ts
-var GFONTS_CSS_PREFIX = "https://fonts.googleapis.com/css2?";
-var GFONTS_PRECONNECT_ORIGINS = [
-  "https://fonts.googleapis.com",
-  "https://fonts.gstatic.com"
-];
-function isGoogleFontEntry(entry) {
-  return entry?.tagName === "link" && entry?.attributes?.rel === "stylesheet" && typeof entry?.attributes?.href === "string" && entry.attributes.href.startsWith(GFONTS_CSS_PREFIX);
-}
-function isGoogleFontPreconnect(entry) {
-  return entry?.tagName === "link" && entry?.attributes?.rel === "preconnect" && GFONTS_PRECONNECT_ORIGINS.includes(entry?.attributes?.href);
-}
-function extractFontFamily(href) {
-  const match = href.match(/family=([^&:]+)/);
-  if (!match) {
-    return "";
-  }
-  return decodeURIComponent(match[1].replaceAll("+", " "));
-}
-function buildGoogleFontUrl(family) {
-  return `${GFONTS_CSS_PREFIX}family=${encodeURIComponent(family).replaceAll("%20", "+")}&display=swap`;
-}
-function ensureGoogleFontPreconnects(head) {
-  for (const origin of GFONTS_PRECONNECT_ORIGINS) {
-    const exists = head.some((e) => e?.tagName === "link" && e?.attributes?.rel === "preconnect" && e?.attributes?.href === origin);
-    if (!exists) {
-      const attrs = {
-        href: origin,
-        rel: "preconnect"
-      };
-      if (origin === "https://fonts.gstatic.com") {
-        attrs.crossorigin = "";
-      }
-      head.push({ attributes: attrs, tagName: "link" });
-    }
-  }
-}
-function cleanupGoogleFontPreconnects(head) {
-  const hasFont = head.some((e) => isGoogleFontEntry(e));
-  if (!hasFont) {
-    return head.filter((e) => !isGoogleFontPreconnect(e));
-  }
-  return head;
-}
-
-// src/settings/head-editor.ts
-function renderHeadEditor(container) {
-  const config = projectState?.projectConfig || {};
-  const headEntries = config.$head || [];
-  const save = () => {
-    updateSiteConfig({ $head: headEntries });
-  };
-  const addEntry = (tag) => {
-    const attrs = {};
-    const entry = { attributes: attrs, tagName: tag };
-    if (tag === "link") {
-      attrs.rel = "stylesheet";
-      attrs.href = "";
-    } else if (tag === "meta") {
-      attrs.name = "";
-      attrs.content = "";
-    } else if (tag === "script") {
-      attrs.src = "";
-    } else if (tag === "style") {
-      entry.textContent = "";
-    }
-    headEntries.push(entry);
-    save();
-    renderHeadEditor(container);
-  };
-  const removeEntry = (idx) => {
-    headEntries.splice(idx, 1);
-    save();
-    renderHeadEditor(container);
-  };
-  const updateEntry = (idx, key, val) => {
-    const entry = headEntries[idx];
-    if (key === "content" && (entry.tagName === "script" || entry.tagName === "style")) {
-      entry.textContent = val;
-    } else {
-      if (!entry.attributes) {
-        entry.attributes = {};
-      }
-      entry.attributes[key] = val;
-    }
-    save();
-  };
-  const tpl = html`
-    <div class="settings-section">
-      <h3 class="settings-section-title">Google Fonts</h3>
-      <p class="settings-field-desc">
-        Manage Google Fonts imported across all pages in this project.
-      </p>
-      ${renderGoogleFontsSection(headEntries, save, () => renderHeadEditor(container))}
-    </div>
-
-    <div class="settings-section">
-      <h3 class="settings-section-title">Head</h3>
-      <p class="settings-field-desc">
-        Manage global &lt;head&gt; tags — stylesheets, meta tags, scripts, and inline styles.
-      </p>
-
-      <div class="head-entries">
-        ${headEntries.map((entry, idx) => html`
-            <div class="head-entry">
-              <div class="head-entry-header">
-                <span class="head-entry-tag">&lt;${entry.tagName}&gt;</span>
-                <sp-action-button quiet size="s" @click=${() => removeEntry(idx)}>
-                  <sp-icon-delete slot="icon"></sp-icon-delete>
-                </sp-action-button>
-              </div>
-              <div class="head-entry-fields">${renderEntryFields(entry, idx, updateEntry)}</div>
-            </div>
-          `)}
-      </div>
-
-      <div class="head-add-actions" style="margin-top:12px;display:flex;gap:8px">
-        <sp-action-button size="s" @click=${() => addEntry("link")}> + Link </sp-action-button>
-        <sp-action-button size="s" @click=${() => addEntry("meta")}> + Meta </sp-action-button>
-        <sp-action-button size="s" @click=${() => addEntry("script")}> + Script </sp-action-button>
-        <sp-action-button size="s" @click=${() => addEntry("style")}> + Style </sp-action-button>
-      </div>
-    </div>
-  `;
-  render(tpl, container);
-}
-function renderEntryFields(entry, idx, updateEntry) {
-  let debounce;
-  const onFieldChange = (key) => (e) => {
-    clearTimeout(debounce);
-    debounce = setTimeout(() => {
-      updateEntry(idx, key, e.target.value);
-    }, 300);
-  };
-  const attrs = entry.attributes || {};
-  switch (entry.tagName) {
-    case "link": {
-      return html`
-        <div class="settings-field-row">
-          <sp-textfield
-            size="s"
-            label="rel"
-            .value=${attrs.rel || ""}
-            @change=${onFieldChange("rel")}
-          ></sp-textfield>
-          <sp-textfield
-            size="s"
-            label="href"
-            .value=${attrs.href || ""}
-            @change=${onFieldChange("href")}
-            style="flex:1"
-          ></sp-textfield>
-        </div>
-      `;
-    }
-    case "meta": {
-      return html`
-        <div class="settings-field-row">
-          <sp-textfield
-            size="s"
-            label="name"
-            .value=${attrs.name || ""}
-            @change=${onFieldChange("name")}
-          ></sp-textfield>
-          <sp-textfield
-            size="s"
-            label="content"
-            .value=${attrs.content || ""}
-            @change=${onFieldChange("content")}
-            style="flex:1"
-          ></sp-textfield>
-        </div>
-      `;
-    }
-    case "script": {
-      return html`
-        <div class="settings-field-row">
-          <sp-textfield
-            size="s"
-            label="src"
-            .value=${attrs.src || ""}
-            @change=${onFieldChange("src")}
-            placeholder="URL or leave empty for inline"
-            style="flex:1"
-          ></sp-textfield>
-        </div>
-        ${!attrs.src ? html`
-                <div class="head-entry-body">
-                  <label class="settings-field-label">Script body</label>
-                  <textarea
-                    class="head-code-editor"
-                    .value=${entry.textContent || ""}
-                    @input=${onFieldChange("content")}
-                    rows="6"
-                    spellcheck="false"
-                  ></textarea>
-                </div>
-              ` : nothing}
-      `;
-    }
-    case "style": {
-      return html`
-        <div class="head-entry-body">
-          <label class="settings-field-label">Style body</label>
-          <textarea
-            class="head-code-editor"
-            .value=${entry.textContent || ""}
-            @input=${onFieldChange("content")}
-            rows="8"
-            spellcheck="false"
-          ></textarea>
-        </div>
-      `;
-    }
-    default: {
-      return nothing;
-    }
-  }
-}
-function renderGoogleFontsSection(headEntries, save, rerender) {
-  const fontEntries = headEntries.filter((e) => isGoogleFontEntry(e));
-  const addFont = (family) => {
-    ensureGoogleFontPreconnects(headEntries);
-    headEntries.push({
-      attributes: { href: buildGoogleFontUrl(family), rel: "stylesheet" },
-      tagName: "link"
-    });
-    save();
-    rerender();
-  };
-  const removeFont = (entry) => {
-    const idx = headEntries.indexOf(entry);
-    if (idx !== -1) {
-      headEntries.splice(idx, 1);
-    }
-    const cleaned = cleanupGoogleFontPreconnects(headEntries);
-    if (cleaned !== headEntries) {
-      headEntries.length = 0;
-      headEntries.push(...cleaned);
-    }
-    save();
-    rerender();
-  };
-  return html`
-    <div class="head-entries" style="margin-bottom:12px">
-      ${fontEntries.length > 0 ? fontEntries.map((entry) => html`
-                <div class="head-entry" style="flex-direction:row;align-items:center;gap:8px">
-                  <span style="flex:1"
-                    >${extractFontFamily(String(entry.attributes?.href || ""))}</span
-                  >
-                  <sp-action-button quiet size="s" @click=${() => removeFont(entry)}>
-                    <sp-icon-delete slot="icon"></sp-icon-delete>
-                  </sp-action-button>
-                </div>
-              `) : html`<p class="settings-field-desc" style="margin:0">No fonts imported.</p>`}
-    </div>
-    <div style="display:flex;gap:8px;align-items:center">
-      <sp-textfield
-        size="s"
-        placeholder="Font family name…"
-        style="flex:1"
-        @keydown=${(e) => {
-    if (e.key !== "Enter") {
-      return;
-    }
-    const family = e.target.value?.trim();
-    if (!family) {
-      return;
-    }
-    e.target.value = "";
-    addFont(family);
-  }}
-      ></sp-textfield>
-      <sp-action-button
-        size="s"
-        @click=${(e) => {
-    const input = e.target.closest("div")?.querySelector("sp-textfield");
-    const family = input?.value?.trim();
-    if (!family) {
-      return;
-    }
-    input.value = "";
-    addFont(family);
-  }}
-      >
-        + Add
-      </sp-action-button>
-    </div>
-  `;
-}
-
-// src/settings/general-settings.ts
-function renderGeneralSettings(container) {
-  const config = projectState?.projectConfig || {};
-  const onFaviconUpload = async () => {
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = "image/*,.ico,.svg";
-    input.addEventListener("change", async () => {
-      const file = input.files?.[0];
-      if (!file) {
-        return;
-      }
-      const platform = getPlatform();
-      await platform.uploadFile("public/favicon.ico", file);
-      await updateSiteConfig({ favicon: "/favicon.ico" });
-      renderGeneralSettings(container);
-    });
-    input.click();
-  };
-  const onAdapterChange = (e) => {
-    updateSiteConfig({
-      build: { ...config.build, adapter: e.target.value }
-    });
-  };
-  const onEditGlobalStyles = async () => {
-    const { closeSettingsModal } = await import("./settings-modal-gj0hrah4.js");
-    closeSettingsModal();
-    openFileInTab("project.json");
-  };
-  const media = config.$media || {};
-  const mediaEntries = Object.entries(media);
-  const onMediaValueChange = (key) => (e) => {
-    const updated = { ...media, [key]: e.target.value };
-    updateSiteConfig({ $media: updated });
-  };
-  const onMediaNameChange = (oldKey) => (e) => {
-    const rawName = e.target.value.trim();
-    const newKey = rawName.startsWith("--") ? rawName : `--${rawName}`;
-    if (newKey === oldKey) {
-      return;
-    }
-    const updated = {};
-    for (const [k, v] of Object.entries(media)) {
-      updated[k === oldKey ? newKey : k] = v;
-    }
-    updateSiteConfig({ $media: updated });
-    renderGeneralSettings(container);
-  };
-  const onRemoveBreakpoint = (key) => () => {
-    const updated = { ...media };
-    delete updated[key];
-    updateSiteConfig({ $media: updated });
-    renderGeneralSettings(container);
-  };
-  const onAddBreakpoint = () => {
-    const updated = { ...media, "--new": "(max-width: 480px)" };
-    updateSiteConfig({ $media: updated });
-    renderGeneralSettings(container);
-  };
-  const currentFavicon = config.favicon;
-  const tpl = html`
-    <div class="settings-section">
-      <h3 class="settings-section-title">General</h3>
-
-      <div class="settings-field">
-        <label class="settings-field-label">Favicon</label>
-        <p class="settings-field-desc">Upload an image to use as the site favicon.</p>
-        <div style="display:flex;align-items:center;gap:12px">
-          ${currentFavicon ? html`<img
-                  src=${currentFavicon}
-                  alt="Current favicon"
-                  style="width:32px;height:32px;object-fit:contain;border:1px solid var(--border);border-radius:var(--radius);padding:2px"
-                />` : html`<div
-                  style="width:32px;height:32px;border:1px dashed var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:var(--spectrum-font-size-50, 11px)"
-                >
-                  —
-                </div>`}
-          <sp-action-button size="s" @click=${onFaviconUpload}> Upload Favicon </sp-action-button>
-          ${currentFavicon ? html`<span style="font-size:var(--spectrum-font-size-50, 11px);color:var(--fg-dim)"
-                  >${currentFavicon}</span
-                >` : nothing}
-        </div>
-      </div>
-
-      <div class="settings-field">
-        <label class="settings-field-label">Platform Adapter</label>
-        <p class="settings-field-desc">Build adapter for deployment target.</p>
-        <sp-picker
-          size="s"
-          label="Platform Adapter"
-          .value=${config.build?.adapter || "static"}
-          @change=${onAdapterChange}
-        >
-          <sp-menu-item value="static">Static</sp-menu-item>
-          <sp-menu-item value="bun">Bun</sp-menu-item>
-          <sp-menu-item value="node">Node</sp-menu-item>
-          <sp-menu-item value="cloudflare-workers">Cloudflare Workers</sp-menu-item>
-          <sp-menu-item value="cloudflare-pages">Cloudflare Pages</sp-menu-item>
-        </sp-picker>
-      </div>
-
-      <div class="settings-field">
-        <label class="settings-field-label">Breakpoints</label>
-        <p class="settings-field-desc">
-          Responsive breakpoints for canvas panels and media query styles.
-        </p>
-        <div class="settings-media-list">
-          ${mediaEntries.map(([key, value]) => {
-    const isBase = key === "--";
-    return html`
-              <div class="settings-media-row">
-                ${isBase ? html`<span class="settings-media-name-fixed">Base</span>` : html`<sp-textfield
-                        size="s"
-                        class="settings-media-name"
-                        .value=${key.replace(/^--/, "")}
-                        placeholder="name"
-                        @change=${onMediaNameChange(key)}
-                      ></sp-textfield>`}
-                <sp-textfield
-                  size="s"
-                  class="settings-media-value"
-                  .value=${value}
-                  placeholder=${isBase ? "1280px" : "(max-width: 768px)"}
-                  @change=${onMediaValueChange(key)}
-                ></sp-textfield>
-                ${isBase ? nothing : html`<sp-action-button
-                        size="s"
-                        quiet
-                        title="Remove breakpoint"
-                        @click=${onRemoveBreakpoint(key)}
-                      >
-                        ×
-                      </sp-action-button>`}
-              </div>
-            `;
-  })}
-        </div>
-        <sp-action-button size="s" style="margin-top:8px" @click=${onAddBreakpoint}>
-          + Add Breakpoint
-        </sp-action-button>
-      </div>
-
-      <div class="settings-field">
-        <label class="settings-field-label">Global Styles</label>
-        <p class="settings-field-desc">Edit default element styles that apply across all pages.</p>
-        <sp-action-button size="s" @click=${onEditGlobalStyles}>
-          Edit Global Styles
-        </sp-action-button>
-      </div>
-    </div>
-  `;
-  render(tpl, container);
-}
-
-// src/settings/dependencies-editor.ts
-var JXSUITE_PREFIX = "@jxsuite/";
-var _container = null;
-var _packages = null;
-var _latest = new Map;
-var _busy = false;
-var _addName = "";
-function latestFor(p) {
-  if (p.name.startsWith(JXSUITE_PREFIX) && isComparable(VERSION) && isUpgrade(p.version, VERSION)) {
-    return VERSION;
-  }
-  const registry = _latest.get(p.name);
-  return registry && isUpgrade(p.version, registry) ? registry : null;
-}
-async function load() {
-  const platform = getPlatform();
-  try {
-    _packages = await platform.listPackages();
-  } catch {
-    _packages = [];
-  }
-  _latest = new Map;
-  if (platform.outdatedPackages) {
-    try {
-      for (const o of await platform.outdatedPackages()) {
-        _latest.set(o.name, o.latest);
-      }
-    } catch {}
-  }
-  render2();
-}
-async function withBusy(fn) {
-  if (_busy) {
-    return;
-  }
-  _busy = true;
-  render2();
-  const progress = showProgressModal({ status: "Running bun…", title: "Updating dependencies" });
-  try {
-    await fn();
-    progress.done();
-  } catch (error) {
-    progress.fail(error instanceof Error ? error.message : String(error));
-  } finally {
-    _busy = false;
-    await load();
-  }
-}
-async function onAdd() {
-  const name = _addName.trim();
-  if (!name) {
-    return;
-  }
-  await withBusy(async () => {
-    await getPlatform().addPackage(name);
-    _addName = "";
-    statusMessage(`Added ${name}`);
-  });
-}
-async function onRemove(p) {
-  await withBusy(async () => {
-    await getPlatform().removePackage(p.name);
-    statusMessage(`Removed ${p.name}`);
-  });
-}
-async function onUpdate(p, latest) {
-  const platform = getPlatform();
-  if (!platform.setPackageVersions) {
-    return;
-  }
-  await withBusy(async () => {
-    const target = stripRange(latest);
-    const res = await platform.setPackageVersions([
-      { dev: Boolean(p.dev), name: p.name, version: `^${target}` }
-    ]);
-    if (!res.ok) {
-      throw new Error(res.log ?? "Update failed");
-    }
-    statusMessage(`Updated ${p.name} to ${target}`);
-  });
-}
-async function onUpdateAll() {
-  const platform = getPlatform();
-  if (!platform.setPackageVersions) {
-    return;
-  }
-  const updates = (_packages ?? []).map((p) => {
-    const latest = latestFor(p);
-    return latest ? { dev: Boolean(p.dev), name: p.name, version: `^${stripRange(latest)}` } : null;
-  }).filter((u) => u !== null);
-  if (updates.length === 0) {
-    return;
-  }
-  await withBusy(async () => {
-    const res = await platform.setPackageVersions(updates);
-    if (!res.ok) {
-      throw new Error(res.log ?? "Update failed");
-    }
-    statusMessage(`Updated ${updates.length} package(s)`);
-  });
-}
-async function onReinstall() {
-  const platform = getPlatform();
-  if (!platform.installDependencies) {
-    return;
-  }
-  await withBusy(async () => {
-    const res = await platform.installDependencies();
-    if (!res.ok) {
-      throw new Error(res.log ?? "Install failed");
-    }
-    statusMessage("Dependencies reinstalled");
-  });
-}
-function row(p) {
-  const latest = latestFor(p);
-  return html`
-    <sp-table-row>
-      <sp-table-cell>
-        ${p.name}${p.dev ? html`<span style="color:var(--fg-dim);font-size:10px"> · dev</span>` : ""}
-      </sp-table-cell>
-      <sp-table-cell>${p.version}</sp-table-cell>
-      <sp-table-cell>${latest ?? "—"}</sp-table-cell>
-      <sp-table-cell>
-        ${latest ? html`<sp-action-button
-                size="s"
-                quiet
-                ?disabled=${_busy}
-                title="Update to ${latest}"
-                @click=${() => onUpdate(p, latest)}
-              >
-                <sp-icon-refresh slot="icon"></sp-icon-refresh>
-              </sp-action-button>` : ""}
-        <sp-action-button
-          size="s"
-          quiet
-          ?disabled=${_busy}
-          title="Remove"
-          @click=${() => onRemove(p)}
-        >
-          <sp-icon-delete slot="icon"></sp-icon-delete>
-        </sp-action-button>
-      </sp-table-cell>
-    </sp-table-row>
-  `;
-}
-function render2() {
-  if (!_container) {
-    return;
-  }
-  const pkgs = _packages ?? [];
-  const hasUpdates = pkgs.some((p) => latestFor(p) !== null);
-  const tpl = html`
-    <div class="settings-section">
-      <h3 class="settings-section-title">Dependencies</h3>
-      <p class="settings-field-desc">Manage this project's npm dependencies.</p>
-
-      <div style="display:flex;gap:8px;margin-bottom:12px;align-items:center">
-        <sp-textfield
-          size="s"
-          placeholder="package-name"
-          .value=${_addName}
-          ?disabled=${_busy}
-          @input=${(e) => {
-    _addName = e.target.value;
-  }}
-        ></sp-textfield>
-        <sp-action-button size="s" ?disabled=${_busy} @click=${onAdd}>
-          <sp-icon-add slot="icon"></sp-icon-add>
-          Add
-        </sp-action-button>
-        <span style="flex:1"></span>
-        ${hasUpdates ? html`<sp-action-button size="s" ?disabled=${_busy} @click=${onUpdateAll}>
-                Update all
-              </sp-action-button>` : ""}
-        <sp-action-button
-          size="s"
-          quiet
-          ?disabled=${_busy}
-          title="Reinstall (bun install)"
-          @click=${onReinstall}
-        >
-          <sp-icon-refresh slot="icon"></sp-icon-refresh>
-          Reinstall
-        </sp-action-button>
-      </div>
-
-      ${_packages === null ? html`<p class="about-muted">Loading…</p>` : pkgs.length === 0 ? html`<p class="about-muted">No dependencies.</p>` : html`
-                <sp-table size="s">
-                  <sp-table-head>
-                    <sp-table-head-cell>Package</sp-table-head-cell>
-                    <sp-table-head-cell>Current</sp-table-head-cell>
-                    <sp-table-head-cell>Latest</sp-table-head-cell>
-                    <sp-table-head-cell></sp-table-head-cell>
-                  </sp-table-head>
-                  <sp-table-body> ${pkgs.map((p) => row(p))} </sp-table-body>
-                </sp-table>
-              `}
-    </div>
-  `;
-  render(tpl, _container);
-}
-function renderDependenciesEditor(container) {
-  _container = container;
-  _packages = null;
-  _addName = "";
-  render2();
-  load();
-}
-
-// src/settings/settings-modal.ts
-var sectionRegistry = new Map;
-function registerSettingsSection(section) {
-  sectionRegistry.set(section.key, section);
-}
-function unregisterSettingsSection(key) {
-  sectionRegistry.delete(key);
-  if (_activeSection === key) {
-    _activeSection = "general";
-  }
-}
-function sortedSections() {
-  return [...sectionRegistry.values()].toSorted((a, b) => a.order - b.order);
-}
-registerSettingsSection({
-  icon: "sp-icon-properties",
-  key: "general",
-  label: "General",
-  order: 10,
-  render: renderGeneralSettings
-});
-registerSettingsSection({
-  icon: "sp-icon-file-single-web-page",
-  key: "head",
-  label: "Head",
-  order: 20,
-  render: renderHeadEditor
-});
-registerSettingsSection({
-  icon: "sp-icon-brush",
-  key: "cssVars",
-  label: "CSS Variables",
-  order: 30,
-  render: renderCssVarsEditor
-});
-registerSettingsSection({
-  icon: "sp-icon-data",
-  key: "definitions",
-  label: "Definitions",
-  order: 40,
-  render: renderDefsEditor
-});
-registerSettingsSection({
-  icon: "sp-icon-box",
-  key: "dependencies",
-  label: "Dependencies",
-  order: 60,
-  render: renderDependenciesEditor
-});
-var _handle = null;
-var _activeSection = "general";
-var _contentEl = null;
-function openSettingsModal(section) {
-  if (_handle) {
-    return;
-  }
-  _activeSection = section ?? "general";
-  renderModal();
-  import("./extension-sections-qct0gt8f.js").then(async ({ syncExtensionSettingsSections }) => {
-    await syncExtensionSettingsSections();
-    if (_handle) {
-      renderModal();
-      renderActiveSection();
-    }
-  }).catch(() => {});
-}
-function closeSettingsModal() {
-  if (!_handle) {
-    return;
-  }
-  _handle.close();
-  _handle = null;
-  _contentEl = null;
-}
-function renderModal() {
-  const onNavClick = (key) => {
-    _activeSection = key;
-    renderModal();
-    renderActiveSection();
-  };
-  const tpl = html`
-    <sp-underlay open @close=${closeSettingsModal}></sp-underlay>
-    <div
-      class="settings-modal"
-      @keydown=${(e) => {
-    if (e.key === "Escape") {
-      closeSettingsModal();
-    }
-  }}
-    >
-      <div class="settings-modal-header">
-        <h2 class="settings-modal-title">Settings</h2>
-        <sp-action-button quiet size="s" @click=${closeSettingsModal} title="Close">
-          <sp-icon-close slot="icon"></sp-icon-close>
-        </sp-action-button>
-      </div>
-      <div class="settings-modal-body">
-        <nav class="settings-modal-nav">
-          ${sortedSections().map((s) => html`
-              <button
-                class=${classMap({
-    active: _activeSection === s.key,
-    "settings-nav-item": true
-  })}
-                @click=${() => onNavClick(s.key)}
-              >
-                ${s.label}
-              </button>
-            `)}
-        </nav>
-        <div
-          class="settings-modal-content"
-          ${ref((el) => {
-    _contentEl = el || null;
-    if (_contentEl) {
-      requestAnimationFrame(() => renderActiveSection());
-    }
-  })}
-        ></div>
-      </div>
-    </div>
-  `;
-  if (!_handle) {
-    _handle = openModal(tpl);
-  } else {
-    _handle.update(tpl);
-  }
-}
-function renderActiveSection() {
-  if (!_handle || !_contentEl) {
-    return;
-  }
-  sectionRegistry.get(_activeSection)?.render(_contentEl);
-}
-
-export { detectFieldFormat, fieldCardTpl, addFieldFormTpl, schemaForType, yamlDefault, isSchemeQuery, schemeOfQuery, parseMediaEntries, isGoogleFontEntry, isGoogleFontPreconnect, registerSettingsSection, unregisterSettingsSection, openSettingsModal, closeSettingsModal };
-
-//# debugId=8B96522C815A708964756E2164756E21
-//# sourceMappingURL=studio-j6gqyjf4.js.map