@jxsuite/studio 0.17.0 → 0.18.0

package/dist/studio.js

@@ -47856,7 +47856,7 @@ function applyTransform() {
   view.panzoomWrap.style.transform = `translate(${view.panX}px, ${view.panY}px) scale(${zoom})`;
   renderZoomIndicator();
   renderOnly("overlays");
-  if (_ctx4.getCanvasMode() === "settings")
+  if (_ctx4.getCanvasMode() === "stylebook")
     _ctx4.renderStylebookOverlays();
 }
 function fitToScreen() {
@@ -180100,1071 +180100,6 @@ init_components();
 init_store();
 init_workspace();
 init_components();
-
-// src/utils/studio-utils.js
-function camelToKebab2(str) {
-  return str.replace(/[A-Z]/g, (c) => "-" + c.toLowerCase());
-}
-function camelToLabel(prop) {
-  return prop.replace(/([A-Z])/g, " $1").replace(/^./, (c) => c.toUpperCase());
-}
-function kebabToLabel(val) {
-  return val.replace(/(^|-)(\w)/g, (_, sep2, c) => (sep2 ? " " : "") + c.toUpperCase());
-}
-function propLabel(entry, prop) {
-  return entry?.$label || camelToLabel(prop);
-}
-function attrLabel(entry, attr) {
-  if (entry?.$label)
-    return entry.$label;
-  if (attr.includes("-"))
-    return attr.replace(/(^|-)(\w)/g, (_, sep2, c) => (sep2 ? " " : "") + c.toUpperCase());
-  return camelToLabel(attr);
-}
-function abbreviateValue(val) {
-  const map6 = {
-    inline: "inl",
-    "inline-block": "i-blk",
-    "inline-flex": "i-flx",
-    "inline-grid": "i-grd",
-    contents: "cnt",
-    "flow-root": "flow",
-    nowrap: "no-wr",
-    "wrap-reverse": "wr-rev",
-    "flex-start": "start",
-    "flex-end": "end",
-    "space-between": "betw",
-    "space-around": "arnd",
-    "space-evenly": "even",
-    stretch: "str",
-    baseline: "base",
-    normal: "norm",
-    "row-reverse": "row-r",
-    "column-reverse": "col-r",
-    column: "col"
-  };
-  return map6[val] || val;
-}
-function inferInputType(entry) {
-  if (entry.$shorthand === true)
-    return "shorthand";
-  if (entry.$input === "button-group")
-    return "button-group";
-  if (entry.$input === "media")
-    return "media";
-  if (entry.format === "color")
-    return "color";
-  if (entry.format === "uri-reference")
-    return "media";
-  if (entry.$units !== undefined)
-    return "number-unit";
-  if (entry.type === "number")
-    return "number";
-  if (Array.isArray(entry.enum))
-    return "select";
-  if (Array.isArray(entry.examples) || Array.isArray(entry.presets))
-    return "combobox";
-  return "text";
-}
-function findContentTypeSchema(documentPath, projectConfig) {
-  if (!documentPath || !projectConfig?.contentTypes)
-    return null;
-  for (const [name, def3] of Object.entries(projectConfig.contentTypes)) {
-    if (!def3.source || !def3.schema)
-      continue;
-    const src = def3.source.replace(/^\.\//, "");
-    const dir = src.split("/")[0];
-    const ext = src.includes("*.md") ? ".md" : src.includes("*.json") ? ".json" : src.includes("*.csv") ? ".csv" : null;
-    if (documentPath.startsWith(dir + "/") && (!ext || documentPath.endsWith(ext))) {
-      return { name, schema: def3.schema };
-    }
-  }
-  return null;
-}
-function friendlyNameToVar(name, prefix) {
-  const slug = name.trim().toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-  if (!slug)
-    return "";
-  return `${prefix}${slug}`;
-}
-function varDisplayName(varName, prefix) {
-  return varName.replace(new RegExp(`^${prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`), "").replace(/^--/, "").replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) || varName;
-}
-function parseCemType(typeText) {
-  if (!typeText)
-    return { kind: "text" };
-  const t = typeText.trim().replace(/\s*\|\s*undefined\b/g, "").trim();
-  if (t === "boolean")
-    return { kind: "boolean" };
-  if (t === "number")
-    return { kind: "number" };
-  const enumMatch = t.match(/^'[^']*'(\s*\|\s*'[^']*')+$/);
-  if (enumMatch) {
-    const options = [...t.matchAll(/'([^']*)'/g)].map((m) => m[1]);
-    return { kind: "combobox", options };
-  }
-  return { kind: "text" };
-}
-
-// src/settings/defs-editor.js
-init_platform();
-init_store();
-
-// src/settings/schema-field-ui.js
-var FIELD_TYPES = ["string", "number", "boolean", "array", "object", "reference"];
-var FORMAT_OPTIONS = ["", "image", "date", "color"];
-function detectFieldType(schema4) {
-  if (schema4.$ref)
-    return "reference";
-  return schema4.type || "string";
-}
-function detectFieldFormat(schema4) {
-  if (schema4.type === "array" && schema4.items?.format)
-    return schema4.items.format;
-  return schema4.format || "";
-}
-function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, contentTypeNames = []) {
-  const type = detectFieldType(fieldSchema);
-  const format2 = detectFieldFormat(fieldSchema);
-  const isNested = type === "object";
-  const isRef2 = type === "reference";
-  const nestedProps = fieldSchema.properties || {};
-  const nestedRequired = fieldSchema.required || [];
-  const refTarget = fieldSchema.$ref ? fieldSchema.$ref.replace("#/contentTypes/", "") : "";
-  return html`
-    <div class="schema-field-card">
-      <div class="schema-field-row">
-        <sp-textfield
-          size="s"
-          quiet
-          value=${fieldName}
-          class="schema-field-name-input"
-          @change=${(e) => {
-    const newName = e.target.value.trim();
-    if (newName && newName !== fieldName)
-      handlers.onRename(fieldName, newName);
-    else
-      e.target.value = fieldName;
-  }}
-          @keydown=${(e) => {
-    if (e.key === "Enter")
-      e.target.blur();
-    if (e.key === "Escape") {
-      e.target.value = fieldName;
-      e.target.blur();
-    }
-  }}
-        ></sp-textfield>
-        ${typePickerTpl(type, (newType) => handlers.onChangeType(fieldName, newType))}
-        ${type === "string" || type === "array" ? formatPickerTpl(format2, (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>
-      ${isRef2 && contentTypeNames.length ? 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((n2) => html`<sp-menu-item value=${n2}>${n2}</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 format2 = 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 newName = e.target.value.trim();
-    if (newName && newName !== childName && handlers.onRenameNested) {
-      handlers.onRenameNested(parentName, childName, newName);
-    } else {
-      e.target.value = childName;
-    }
-  }}
-          @keydown=${(e) => {
-    if (e.key === "Enter")
-      e.target.blur();
-    if (e.key === "Escape") {
-      e.target.value = childName;
-      e.target.blur();
-    }
-  }}
-        ></sp-textfield>
-        ${typePickerTpl(type, (newType) => {
-    if (handlers.onChangeNestedType)
-      handlers.onChangeNestedType(parentName, childName, newType);
-  })}
-        ${type === "string" || type === "array" ? formatPickerTpl(format2, (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 row = e.target.closest(".schema-nested-add");
-      const name = e.target.value.trim();
-      const typePicker = row?.querySelector("sp-picker");
-      const type = typePicker?.value || "string";
-      if (name && handlers.onAddNestedField) {
-        handlers.onAddNestedField(parentName, { name, type, required: false });
-        e.target.value = "";
-      }
-    }
-  }}
-      ></sp-textfield>
-      ${typePickerTpl("string", () => {})}
-      <sp-action-button
-        size="xs"
-        quiet
-        title="Add nested field"
-        @click=${(e) => {
-    const row = e.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, type, required: false });
-      nameInput.value = "";
-    }
-  }}
-      >
-        <sp-icon-add slot="icon"></sp-icon-add>
-      </sp-action-button>
-    </div>
-  `;
-}
-function typePickerTpl(value2, onChange) {
-  return html`
-    <sp-picker
-      size="s"
-      label="Type"
-      value=${value2}
-      @change=${(e) => onChange(e.target.value)}
-    >
-      ${FIELD_TYPES.map((t) => html`<sp-menu-item value=${t}>${t}</sp-menu-item>`)}
-    </sp-picker>
-  `;
-}
-function formatPickerTpl(value2, onChange) {
-  return html`
-    <sp-picker
-      size="s"
-      label="Format"
-      value=${value2}
-      @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, format2) {
-  switch (type) {
-    case "number":
-      return { type: "number" };
-    case "boolean":
-      return { type: "boolean" };
-    case "array":
-      return format2 ? { type: "array", items: { type: "string", format: format2 } } : { type: "array", items: { type: "string" } };
-    case "object":
-      return { type: "object", properties: {}, required: [] };
-    case "reference":
-      return { $ref: "#/contentTypes/" };
-    default:
-      return format2 ? { type: "string", format: format2 } : { type: "string" };
-  }
-}
-function yamlDefault(type, format2) {
-  if (format2 === "date")
-    return new Date().toISOString().split("T")[0];
-  if (format2 === "image")
-    return '""';
-  switch (type) {
-    case "boolean":
-      return "false";
-    case "number":
-      return "0";
-    case "array":
-      return "[]";
-    case "object":
-      return "{}";
-    default:
-      return '""';
-  }
-}
-
-// src/settings/defs-editor.js
-var selectedDef = null;
-var showAddField = false;
-var newFieldState = { name: "", type: "string", format: "", required: false };
-var showNewDef = false;
-var newDefName = "";
-async function saveProjectConfig() {
-  const platform3 = getPlatform();
-  const config = projectState.projectConfig;
-  await platform3.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] = {
-    type: "object",
-    properties: {},
-    required: []
-  };
-  selectedDef = name;
-  showNewDef = false;
-  newDefName = "";
-  rerender();
-  saveProjectConfig();
-}
-function handleAddField(rerender) {
-  const name = newFieldState.name.trim();
-  if (!name || !selectedDef)
-    return;
-  const def3 = getSelectedDef();
-  if (!def3)
-    return;
-  if (!def3.properties)
-    def3.properties = {};
-  def3.properties[name] = schemaForType(newFieldState.type, newFieldState.format || undefined);
-  if (newFieldState.required) {
-    if (!def3.required)
-      def3.required = [];
-    if (!def3.required.includes(name))
-      def3.required.push(name);
-  }
-  showAddField = false;
-  newFieldState = { name: "", type: "string", format: "", required: false };
-  rerender();
-  saveProjectConfig();
-}
-function handleDeleteField(fieldName, rerender) {
-  const def3 = getSelectedDef();
-  if (!def3?.properties)
-    return;
-  delete def3.properties[fieldName];
-  if (def3.required) {
-    def3.required = def3.required.filter((r) => r !== fieldName);
-  }
-  rerender();
-  saveProjectConfig();
-}
-function handleToggleRequired(fieldName, rerender) {
-  const def3 = getSelectedDef();
-  if (!def3)
-    return;
-  if (!def3.required)
-    def3.required = [];
-  const idx = def3.required.indexOf(fieldName);
-  if (idx >= 0)
-    def3.required.splice(idx, 1);
-  else
-    def3.required.push(fieldName);
-  rerender();
-  saveProjectConfig();
-}
-function handleRenameField(oldName, newName, rerender) {
-  const def3 = getSelectedDef();
-  if (!def3?.properties || !newName || def3.properties[newName])
-    return;
-  const newProps = {};
-  for (const [key, val] of Object.entries(def3.properties)) {
-    newProps[key === oldName ? newName : key] = val;
-  }
-  def3.properties = newProps;
-  if (def3.required) {
-    def3.required = def3.required.map((r) => r === oldName ? newName : r);
-  }
-  rerender();
-  saveProjectConfig();
-}
-function handleChangeType(fieldName, newType, rerender) {
-  const def3 = getSelectedDef();
-  if (!def3?.properties?.[fieldName])
-    return;
-  const oldFormat = newType === "string" || newType === "array" ? detectFieldFormat(def3.properties[fieldName]) : undefined;
-  def3.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
-  rerender();
-  saveProjectConfig();
-}
-function handleChangeFormat(fieldName, format2, rerender) {
-  const def3 = getSelectedDef();
-  if (!def3?.properties?.[fieldName])
-    return;
-  const prop = def3.properties[fieldName];
-  const type = prop.type || "string";
-  def3.properties[fieldName] = schemaForType(type, format2 || undefined);
-  rerender();
-  saveProjectConfig();
-}
-function handleAddNestedField(parentName, fieldState, rerender) {
-  const def3 = getSelectedDef();
-  const parent = def3?.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 def3 = getSelectedDef();
-  const parent = def3?.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 def3 = getSelectedDef();
-  const parent = def3?.properties?.[parentName];
-  if (!parent)
-    return;
-  if (!parent.required)
-    parent.required = [];
-  const idx = parent.required.indexOf(childName);
-  if (idx >= 0)
-    parent.required.splice(idx, 1);
-  else
-    parent.required.push(childName);
-  rerender();
-  saveProjectConfig();
-}
-function handleRenameNested(parentName, oldChild, newChild, rerender) {
-  const def3 = getSelectedDef();
-  const parent = def3?.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 def3 = getSelectedDef();
-  const parent = def3?.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, format2, rerender) {
-  const def3 = getSelectedDef();
-  const parent = def3?.properties?.[parentName];
-  if (!parent?.properties?.[childName])
-    return;
-  const prop = parent.properties[childName];
-  const type = prop.type || "string";
-  parent.properties[childName] = schemaForType(type, format2 || 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 def3 = defs[selectedDef];
-    const properties = def3.properties || {};
-    const required = def3.required || [];
-    const handlers = {
-      onDelete: (n2) => handleDeleteField(n2, rerender),
-      onToggleRequired: (n2) => handleToggleRequired(n2, rerender),
-      onRename: (oldN, newN) => handleRenameField(oldN, newN, rerender),
-      onChangeType: (n2, t) => handleChangeType(n2, t, rerender),
-      onChangeFormat: (n2, f) => handleChangeFormat(n2, f, rerender),
-      onAddNestedField: (p, s2) => handleAddNestedField(p, s2, rerender),
-      onDeleteNested: (p, c) => handleDeleteNested(p, c, rerender),
-      onToggleNestedRequired: (p, c) => handleToggleNestedRequired(p, c, rerender),
-      onRenameNested: (p, o, n2) => handleRenameNested(p, o, n2, rerender),
-      onChangeNestedType: (p, c, t) => handleChangeNestedType(p, c, t, rerender),
-      onChangeNestedFormat: (p, c, f) => handleChangeNestedFormat(p, c, f, 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, {
-      onInput: (field, value2) => {
-        newFieldState = { ...newFieldState, [field]: value2 };
-        rerender();
-      },
-      onConfirm: () => handleAddField(rerender),
-      onCancel: () => {
-        showAddField = false;
-        newFieldState = { name: "", type: "string", format: "", required: false };
-        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> `;
-  render2(tpl, container);
-}
-
-// src/settings/content-types-editor.js
-init_platform();
-init_store();
-var selectedContentType = null;
-var showAddField2 = false;
-var newFieldState2 = { name: "", type: "string", format: "", required: false };
-var showNewContentType = false;
-var newContentTypeName = "";
-async function saveProjectConfig2() {
-  const platform3 = getPlatform();
-  const config = projectState.projectConfig;
-  await platform3.writeFile("project.json", JSON.stringify(config, null, "\t"));
-}
-function getSelectedSchema() {
-  const config = projectState?.projectConfig;
-  return config?.contentTypes?.[selectedContentType]?.schema;
-}
-function handleNewContentType(rerender) {
-  const slug = newContentTypeName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
-  if (!slug)
-    return;
-  const config = projectState?.projectConfig;
-  if (!config)
-    return;
-  if (!config.contentTypes)
-    config.contentTypes = {};
-  if (config.contentTypes[slug])
-    return;
-  config.contentTypes[slug] = {
-    source: `./content/${slug}/**/*.md`,
-    schema: { type: "object", properties: {}, required: [] }
-  };
-  selectedContentType = slug;
-  showNewContentType = false;
-  newContentTypeName = "";
-  rerender();
-  saveProjectConfig2().then(async () => {
-    const platform3 = getPlatform();
-    await platform3.writeFile(`content/${slug}/.gitkeep`, "");
-  });
-}
-function handleAddField2(rerender) {
-  const name = newFieldState2.name.trim();
-  if (!name || !selectedContentType)
-    return;
-  const schema4 = getSelectedSchema();
-  if (!schema4)
-    return;
-  if (!schema4.properties)
-    schema4.properties = {};
-  schema4.properties[name] = schemaForType(newFieldState2.type, newFieldState2.format || undefined);
-  if (newFieldState2.required) {
-    if (!schema4.required)
-      schema4.required = [];
-    if (!schema4.required.includes(name))
-      schema4.required.push(name);
-  }
-  showAddField2 = false;
-  newFieldState2 = { name: "", type: "string", format: "", required: false };
-  rerender();
-  saveProjectConfig2();
-}
-function handleDeleteField2(fieldName, rerender) {
-  const schema4 = getSelectedSchema();
-  if (!schema4?.properties)
-    return;
-  delete schema4.properties[fieldName];
-  if (schema4.required) {
-    schema4.required = schema4.required.filter((r) => r !== fieldName);
-  }
-  rerender();
-  saveProjectConfig2();
-}
-function handleToggleRequired2(fieldName, rerender) {
-  const schema4 = getSelectedSchema();
-  if (!schema4)
-    return;
-  if (!schema4.required)
-    schema4.required = [];
-  const idx = schema4.required.indexOf(fieldName);
-  if (idx >= 0)
-    schema4.required.splice(idx, 1);
-  else
-    schema4.required.push(fieldName);
-  rerender();
-  saveProjectConfig2();
-}
-function handleRenameField2(oldName, newName, rerender) {
-  const schema4 = getSelectedSchema();
-  if (!schema4?.properties || !newName || schema4.properties[newName])
-    return;
-  const newProps = {};
-  for (const [key, val] of Object.entries(schema4.properties)) {
-    newProps[key === oldName ? newName : key] = val;
-  }
-  schema4.properties = newProps;
-  if (schema4.required) {
-    schema4.required = schema4.required.map((r) => r === oldName ? newName : r);
-  }
-  rerender();
-  saveProjectConfig2();
-}
-function handleChangeType2(fieldName, newType, rerender) {
-  const schema4 = getSelectedSchema();
-  if (!schema4?.properties?.[fieldName])
-    return;
-  const oldFormat = newType === "string" || newType === "array" ? detectFieldFormat(schema4.properties[fieldName]) : undefined;
-  schema4.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
-  rerender();
-  saveProjectConfig2();
-}
-function handleChangeFormat2(fieldName, format2, rerender) {
-  const schema4 = getSelectedSchema();
-  if (!schema4?.properties?.[fieldName])
-    return;
-  const prop = schema4.properties[fieldName];
-  const type = prop.type || "string";
-  schema4.properties[fieldName] = schemaForType(type, format2 || undefined);
-  rerender();
-  saveProjectConfig2();
-}
-function handleChangeRefTarget(fieldName, target, rerender) {
-  const schema4 = getSelectedSchema();
-  if (!schema4?.properties)
-    return;
-  schema4.properties[fieldName] = { $ref: `#/contentTypes/${target}` };
-  rerender();
-  saveProjectConfig2();
-}
-function handleAddNestedField2(parentName, fieldState, rerender) {
-  const schema4 = getSelectedSchema();
-  const parent = schema4?.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();
-  saveProjectConfig2();
-}
-function handleDeleteNested2(parentName, childName, rerender) {
-  const schema4 = getSelectedSchema();
-  const parent = schema4?.properties?.[parentName];
-  if (!parent?.properties)
-    return;
-  delete parent.properties[childName];
-  if (parent.required) {
-    parent.required = parent.required.filter((r) => r !== childName);
-  }
-  rerender();
-  saveProjectConfig2();
-}
-function handleToggleNestedRequired2(parentName, childName, rerender) {
-  const schema4 = getSelectedSchema();
-  const parent = schema4?.properties?.[parentName];
-  if (!parent)
-    return;
-  if (!parent.required)
-    parent.required = [];
-  const idx = parent.required.indexOf(childName);
-  if (idx >= 0)
-    parent.required.splice(idx, 1);
-  else
-    parent.required.push(childName);
-  rerender();
-  saveProjectConfig2();
-}
-function handleRenameNested2(parentName, oldChild, newChild, rerender) {
-  const schema4 = getSelectedSchema();
-  const parent = schema4?.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();
-  saveProjectConfig2();
-}
-function handleChangeNestedType2(parentName, childName, newType, rerender) {
-  const schema4 = getSelectedSchema();
-  const parent = schema4?.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();
-  saveProjectConfig2();
-}
-function handleChangeNestedFormat2(parentName, childName, format2, rerender) {
-  const schema4 = getSelectedSchema();
-  const parent = schema4?.properties?.[parentName];
-  if (!parent?.properties?.[childName])
-    return;
-  const prop = parent.properties[childName];
-  const type = prop.type || "string";
-  parent.properties[childName] = schemaForType(type, format2 || undefined);
-  rerender();
-  saveProjectConfig2();
-}
-function handleDeleteContentType(rerender) {
-  if (!selectedContentType)
-    return;
-  const config = projectState?.projectConfig;
-  if (!config?.contentTypes?.[selectedContentType])
-    return;
-  delete config.contentTypes[selectedContentType];
-  selectedContentType = null;
-  rerender();
-  saveProjectConfig2();
-}
-function renderContentTypesEditor(container) {
-  const rerender = () => renderContentTypesEditor(container);
-  const config = projectState?.projectConfig;
-  const contentTypes = config?.contentTypes || {};
-  const contentTypeNames = Object.keys(contentTypes);
-  const listTpl = html`
-    <div class="settings-list-panel">
-      ${contentTypeNames.map((name) => html`
-          <sp-action-button
-            size="s"
-            ?selected=${selectedContentType === name}
-            @click=${() => {
-    selectedContentType = name;
-    showAddField2 = false;
-    rerender();
-  }}
-          >
-            ${name}
-          </sp-action-button>
-        `)}
-      ${showNewContentType ? html`
-            <div class="settings-inline-form">
-              <sp-textfield
-                size="s"
-                placeholder="content-type-name"
-                .value=${newContentTypeName}
-                @input=${(e) => {
-    newContentTypeName = e.target.value;
-  }}
-                @keydown=${(e) => {
-    if (e.key === "Enter")
-      handleNewContentType(rerender);
-    if (e.key === "Escape") {
-      showNewContentType = false;
-      rerender();
-    }
-  }}
-              ></sp-textfield>
-              <sp-action-button size="s" @click=${() => handleNewContentType(rerender)}>
-                Create
-              </sp-action-button>
-            </div>
-          ` : html`
-            <sp-action-button
-              size="s"
-              quiet
-              @click=${() => {
-    showNewContentType = true;
-    rerender();
-  }}
-            >
-              <sp-icon-add slot="icon"></sp-icon-add> New Content Type
-            </sp-action-button>
-          `}
-    </div>
-  `;
-  let editorTpl;
-  if (!selectedContentType || !contentTypes[selectedContentType]) {
-    editorTpl = html`<div class="settings-empty-state">Select or create a content type</div>`;
-  } else {
-    const col = contentTypes[selectedContentType];
-    const schema4 = col.schema || {};
-    const properties = schema4.properties || {};
-    const required = schema4.required || [];
-    const handlers = {
-      onDelete: (n2) => handleDeleteField2(n2, rerender),
-      onToggleRequired: (n2) => handleToggleRequired2(n2, rerender),
-      onRename: (oldN, newN) => handleRenameField2(oldN, newN, rerender),
-      onChangeType: (n2, t) => handleChangeType2(n2, t, rerender),
-      onChangeFormat: (n2, f) => handleChangeFormat2(n2, f, rerender),
-      onChangeRefTarget: (n2, target) => handleChangeRefTarget(n2, target, rerender),
-      onAddNestedField: (p, s2) => handleAddNestedField2(p, s2, rerender),
-      onDeleteNested: (p, c) => handleDeleteNested2(p, c, rerender),
-      onToggleNestedRequired: (p, c) => handleToggleNestedRequired2(p, c, rerender),
-      onRenameNested: (p, o, n2) => handleRenameNested2(p, o, n2, rerender),
-      onChangeNestedType: (p, c, t) => handleChangeNestedType2(p, c, t, rerender),
-      onChangeNestedFormat: (p, c, f) => handleChangeNestedFormat2(p, c, f, rerender)
-    };
-    const fieldCards = Object.entries(properties).map(([name, def3]) => fieldCardTpl(name, def3, required.includes(name), handlers, contentTypeNames));
-    editorTpl = html`
-      <div class="settings-editor-panel">
-        <div class="settings-editor-header">
-          <h3>${selectedContentType}</h3>
-          <sp-field-label size="s">Source: ${col.source || "—"}</sp-field-label>
-          <sp-action-button
-            size="xs"
-            quiet
-            title="Delete content type"
-            @click=${() => handleDeleteContentType(rerender)}
-          >
-            <sp-icon-delete slot="icon"></sp-icon-delete>
-          </sp-action-button>
-        </div>
-        <div class="schema-field-list">${fieldCards}</div>
-        ${showAddField2 ? addFieldFormTpl(newFieldState2, {
-      onInput: (field, value2) => {
-        newFieldState2 = { ...newFieldState2, [field]: value2 };
-        rerender();
-      },
-      onConfirm: () => handleAddField2(rerender),
-      onCancel: () => {
-        showAddField2 = false;
-        newFieldState2 = { name: "", type: "string", format: "", required: false };
-        rerender();
-      }
-    }) : html`
-              <sp-action-button
-                size="s"
-                quiet
-                @click=${() => {
-      showAddField2 = 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> `;
-  render2(tpl, container);
-}
 // data/stylebook-meta.json
 var stylebook_meta_default = {
   $sections: [
@@ -181375,39 +180310,6 @@ registerBlockType( name, settings );`
 var _ctx6 = null;
 function renderStylebookMode(ctx) {
   _ctx6 = ctx;
-  const settingsTab = activeTab.value?.session.ui.settingsTab || "stylebook";
-  const settingsChromeBarTpl = html`
-    <div
-      class="sb-chrome settings-top-chrome"
-      style="position:absolute;top:0;left:0;right:0;z-index:16;background:var(--bg-panel);border-bottom:1px solid var(--border)"
-    >
-      <sp-tabs
-        size="s"
-        selected=${settingsTab}
-        @change=${(e) => {
-    updateUi("settingsTab", e.target.selected);
-  }}
-      >
-        <sp-tab label="Stylebook" value="stylebook"></sp-tab>
-        <sp-tab label="Definitions" value="definitions"></sp-tab>
-        <sp-tab label="Content Types" value="contentTypes"></sp-tab>
-      </sp-tabs>
-    </div>
-  `;
-  if (settingsTab === "definitions" || settingsTab === "contentTypes") {
-    canvasWrap.style.overflow = "hidden";
-    render2(html`${settingsChromeBarTpl}
-        <div
-          class="settings-editor-container"
-          style="position:absolute;inset:40px 0 0 0;overflow:auto"
-        ></div>`, canvasWrap);
-    const container = canvasWrap.querySelector(".settings-editor-container");
-    if (settingsTab === "definitions")
-      renderDefsEditor(container);
-    else
-      renderContentTypesEditor(container);
-    return;
-  }
   view.stylebookElToTag = new WeakMap;
   const tab = activeTab.value;
   const rootStyle = getEffectiveStyle(tab?.doc.document?.style);
@@ -181415,9 +180317,6 @@ function renderStylebookMode(ctx) {
   const customizedOnly = tab?.session.ui.stylebookCustomizedOnly;
   const { sizeBreakpoints, baseWidth } = parseMediaEntries(getEffectiveMedia(tab?.doc.document?.$media));
   const hasMedia = sizeBreakpoints.length > 0;
-  const onTabClick = (t) => {
-    updateUi("stylebookTab", t);
-  };
   const onFilterInput2 = (e) => {
     updateUi("stylebookFilter", e.target.value);
   };
@@ -181425,38 +180324,25 @@ function renderStylebookMode(ctx) {
     updateUi("stylebookCustomizedOnly", !tab?.session.ui.stylebookCustomizedOnly);
   };
   const chromeBarTpl = html`
-    ${settingsChromeBarTpl}
     <div
       class="sb-chrome"
-      style="position:absolute;top:36px;left:0;right:0;z-index:15;background:var(--bg-panel);border-bottom:1px solid var(--border)"
+      style="position:absolute;top:0;left:0;right:0;z-index:15;background:var(--bg-panel);border-bottom:1px solid var(--border)"
     >
-      <sp-tabs
-        size="s"
-        selected=${tab?.session.ui.stylebookTab || "elements"}
-        @change=${(e) => {
-    onTabClick(e.target.selected);
-  }}
-      >
-        ${["elements", "variables"].map((t) => html`
-            <sp-tab label=${t.charAt(0).toUpperCase() + t.slice(1)} value=${t}></sp-tab>
-          `)}
-      </sp-tabs>
-      ${tab?.session.ui.stylebookTab === "elements" ? html`
-            <input
-              class="field-input"
-              style="flex:1;max-width:200px;margin-left:8px"
-              placeholder="Filter…"
-              .value=${tab?.session.ui.stylebookFilter}
-              @input=${onFilterInput2}
-            />
-            <button
-              class="tb-toggle${tab?.session.ui.stylebookCustomizedOnly ? " active" : ""}"
-              style="margin-left:4px"
-              @click=${onCustomizedToggle}
-            >
-              Customized
-            </button>
-          ` : nothing}
+      <div style="display:flex;align-items:center;padding:4px 8px;gap:4px">
+        <input
+          class="field-input"
+          style="flex:1;max-width:200px"
+          placeholder="Filter…"
+          .value=${tab?.session.ui.stylebookFilter}
+          @input=${onFilterInput2}
+        />
+        <button
+          class="tb-toggle${tab?.session.ui.stylebookCustomizedOnly ? " active" : ""}"
+          @click=${onCustomizedToggle}
+        >
+          Customized
+        </button>
+      </div>
     </div>
   `;
   canvasWrap.style.overflow = "hidden";
@@ -181479,16 +180365,11 @@ function renderStylebookMode(ctx) {
   }
   const renderIntoPanel = (panel, activeBreakpoints) => {
     panel.canvas.classList.add("sb-canvas");
-    if (tab?.session.ui.stylebookTab === "elements") {
-      renderStylebookElementsIntoCanvas(panel.canvas, rootStyle, filter, customizedOnly, activeBreakpoints);
-      for (const child of panel.canvas.querySelectorAll("*")) {
-        child.style.pointerEvents = "none";
-      }
-      registerStylebookPanelEvents(panel);
-    } else {
-      renderStylebookVarsIntoCanvas(panel.canvas, rootStyle);
-      panel.overlayClk.style.pointerEvents = "none";
+    renderStylebookElementsIntoCanvas(panel.canvas, rootStyle, filter, customizedOnly, activeBreakpoints);
+    for (const child of panel.canvas.querySelectorAll("*")) {
+      child.style.pointerEvents = "none";
     }
+    registerStylebookPanelEvents(panel);
   };
   let panelEntries;
   if (!hasMedia) {
@@ -181508,7 +180389,7 @@ function renderStylebookMode(ctx) {
       ${chromeBarTpl}
       <div
         class="panzoom-wrap"
-        style="transform-origin:0 0;padding-top:72px"
+        style="transform-origin:0 0;padding-top:40px"
         ${ref2((el) => {
     if (el)
       view.panzoomWrap = el;
@@ -181798,363 +180679,6 @@ function renderStylebookElementsIntoCanvas(canvasEl, rootStyle, filter, customiz
     render2(html`${sectionTemplates}`, canvasEl);
   }
 }
-function renderStylebookVarsIntoCanvas(canvasEl, rootStyle) {
-  const varCats = stylebook_meta_default.$variables;
-  const groups = {};
-  for (const key of Object.keys(varCats))
-    groups[key] = [];
-  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 bodyRefs = new Map;
-  const sectionTemplates = Object.entries(varCats).map(([catKey, catMeta]) => {
-    const vars = groups[catKey];
-    const onAdd = () => {
-      const bodyEl = bodyRefs.get(catKey);
-      if (!bodyEl)
-        return;
-      const addBtn = bodyEl.querySelector(".sb-var-add-btn");
-      const row = renderVarRow(catKey, catMeta, null, "", true);
-      bodyEl.insertBefore(row, addBtn);
-      if (addBtn)
-        addBtn.style.display = "none";
-      const nameField = row.querySelector("sp-textfield");
-      if (nameField)
-        requestAnimationFrame(() => nameField.focus());
-    };
-    return html`
-      <div class="sb-section">
-        <div class="sb-label">${catMeta.label}</div>
-        <div
-          class="sb-body"
-          ${ref2((el) => {
-      if (el)
-        bodyRefs.set(catKey, el);
-    })}
-        >
-          ${vars.length > 0 ? vars.map(([varName, varVal]) => renderVarRow(catKey, catMeta, varName, String(varVal), false)) : html`<div class="sb-var-empty">
-                No ${catMeta.label.toLowerCase()} variables yet.
-              </div>`}
-          <button class="sb-var-add-btn" @click=${onAdd}>
-            <span class="sb-var-add-icon">+</span> Add ${catMeta.label}
-          </button>
-        </div>
-      </div>
-    `;
-  });
-  render2(html`${sectionTemplates}`, canvasEl);
-}
-function renderVarRow(catKey, catMeta, varName, varVal, isNew) {
-  const row = document.createElement("div");
-  row.className = isNew ? "sb-var-row is-new" : "sb-var-row";
-  let colorPicker = null;
-  let nameField = null;
-  let getValueFn;
-  let hexField = null;
-  const swatchTpl = catKey === "color" ? html`
-          <div
-            class="sb-var-swatch"
-            style=${styleMap({ backgroundColor: varVal || "var(--accent)" })}
-          >
-            <input
-              type="color"
-              .value=${varVal && varVal.startsWith("#") ? varVal : "#007acc"}
-              ${ref2((el) => {
-    if (el)
-      colorPicker = el;
-  })}
-              @input=${() => {
-    if (!colorPicker || !hexField)
-      return;
-    hexField.value = colorPicker.value;
-    const swatch = row.querySelector(".sb-var-swatch");
-    if (swatch)
-      swatch.style.backgroundColor = colorPicker.value;
-    if (!isNew && varName) {
-      transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, colorPicker.value));
-    }
-  }}
-            />
-          </div>
-        ` : nothing;
-  const namePlaceholder = catKey === "color" ? "Primary Blue" : catKey === "font" ? "Body Serif" : catKey === "size" ? "Spacing Large" : "Border Radius";
-  const nameColTpl = isNew ? html`
-        <div class="sb-var-col-name">
-          <div class="sb-var-col-label">Name</div>
-          <sp-textfield
-            size="s"
-            placeholder=${namePlaceholder}
-            style="pointer-events:auto"
-            ${ref2((el) => {
-    if (el)
-      nameField = el;
-  })}
-          ></sp-textfield>
-        </div>
-      ` : nothing;
-  let valueContent;
-  if (catKey === "color") {
-    let debounce;
-    valueContent = html`
-      <sp-textfield
-        size="s"
-        .value=${varVal || "#007acc"}
-        placeholder="#007acc"
-        style="pointer-events:auto"
-        ${ref2((el) => {
-      if (el)
-        hexField = el;
-    })}
-        @input=${() => {
-      clearTimeout(debounce);
-      debounce = setTimeout(() => {
-        if (!hexField)
-          return;
-        const v = hexField.value;
-        try {
-          if (colorPicker)
-            colorPicker.value = v.startsWith("#") ? v : colorPicker.value;
-        } catch {}
-        const swatch = row.querySelector(".sb-var-swatch");
-        if (swatch)
-          swatch.style.backgroundColor = v;
-        if (!isNew && varName) {
-          transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, v));
-        }
-      }, 400);
-    }}
-      ></sp-textfield>
-    `;
-    getValueFn = () => hexField?.value?.trim() || "";
-  } else if (catKey === "size") {
-    const ui = createUnitInput(varVal || "16px", {
-      onChange: (newVal) => {
-        const bar = row.querySelector(".sb-var-size-bar");
-        if (bar)
-          bar.style.width = newVal;
-        if (!isNew && varName) {
-          transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, newVal));
-        }
-      }
-    });
-    if (isNew)
-      ui.textfield.value = "";
-    valueContent = html`<div
-      ${ref2((el) => {
-      if (el && !el.firstChild)
-        el.appendChild(ui.wrap);
-    })}
-    ></div>`;
-    getValueFn = () => ui.getValue();
-  } else {
-    let textFieldEl = null;
-    let debounce;
-    valueContent = html`
-      <sp-textfield
-        size="s"
-        .value=${varVal}
-        placeholder=${catMeta.placeholder}
-        style="pointer-events:auto"
-        ${ref2((el) => {
-      if (el)
-        textFieldEl = el;
-    })}
-        @input=${() => {
-      if (!textFieldEl || isNew || !varName)
-        return;
-      clearTimeout(debounce);
-      debounce = setTimeout(() => {
-        const v = textFieldEl.value;
-        const fontPrev = row.querySelector(".sb-var-font-preview");
-        if (fontPrev)
-          fontPrev.style.fontFamily = v;
-        transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, v));
-      }, 400);
-    }}
-      ></sp-textfield>
-    `;
-    getValueFn = () => textFieldEl?.value?.trim() || "";
-  }
-  const valColTpl = html`
-    <div class="sb-var-col-value">
-      ${isNew ? html`<div class="sb-var-col-label">Value</div>` : nothing} ${valueContent}
-    </div>
-  `;
-  const actionsTpl = isNew ? html`
-        <div class="sb-var-add-actions">
-          <sp-action-button
-            size="s"
-            style="pointer-events:auto"
-            @click=${() => {
-    const name = (nameField?.value || "").trim();
-    const val = getValueFn();
-    const generatedVar = friendlyNameToVar(name, catMeta.prefix);
-    if (!generatedVar || !val)
-      return;
-    transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], generatedVar, val));
-  }}
-            >Add</sp-action-button
-          >
-          <sp-action-button
-            size="s"
-            quiet
-            style="pointer-events:auto"
-            @click=${() => {
-    const body = row.parentElement;
-    row.remove();
-    const addBtn = body?.querySelector(".sb-var-add-btn");
-    if (addBtn)
-      addBtn.style.display = "";
-  }}
-          >
-            <sp-icon-close slot="icon"></sp-icon-close>
-          </sp-action-button>
-        </div>
-      ` : nothing;
-  const headerTpl = !isNew && varName ? html`
-          <div class="sb-var-row-header">
-            <span class="sb-var-row-title">${varDisplayName(varName, catMeta.prefix)}</span>
-            <span class="sb-var-row-ref">${varName}</span>
-            <sp-action-button
-              size="s"
-              quiet
-              class="sb-var-del"
-              style="pointer-events:auto"
-              @click=${() => {
-    transactDoc(activeTab.value, (t) => mutateUpdateStyle(t, [], varName, undefined));
-  }}
-            >
-              <sp-icon-delete slot="icon"></sp-icon-delete>
-            </sp-action-button>
-          </div>
-        ` : nothing;
-  const addPreviewTpl = isNew ? html`
-        <div
-          class="sb-var-add-preview"
-          ${ref2((el) => {
-    if (!el || !nameField)
-      return;
-    nameField.addEventListener("input", () => {
-      el.textContent = friendlyNameToVar(nameField.value || "", catMeta.prefix);
-    });
-  })}
-        ></div>
-      ` : nothing;
-  const typePrevTpl = catKey === "font" && varVal ? html`
-          <div class="sb-var-preview">
-            <div class="sb-var-font-preview" style=${styleMap({ fontFamily: varVal })}>
-              The quick brown fox jumps over the lazy dog
-            </div>
-          </div>
-        ` : catKey === "size" && varVal ? html`
-            <div class="sb-var-preview">
-              <div class="sb-var-size-track">
-                <div class="sb-var-size-bar" style=${styleMap({ width: varVal })}></div>
-              </div>
-            </div>
-          ` : nothing;
-  render2(html`
-      ${headerTpl}
-      <div class="sb-var-input-row">${swatchTpl} ${nameColTpl} ${valColTpl} ${actionsTpl}</div>
-      ${addPreviewTpl} ${typePrevTpl}
-    `, row);
-  return row;
-}
-function createUnitInput(initialValue, { onChange, size = "s" } = {}) {
-  const match2 = String(initialValue).match(/^(-?[\d.]+)\s*(px|em|rem|vw|vh|%|ch|ex|vmin|vmax|pt|cm|mm|in)?$/);
-  let numVal = match2 ? match2[1] : initialValue;
-  let unitVal = match2 ? match2[2] || "px" : "";
-  const isNumeric = !!match2;
-  const wrap4 = document.createElement("div");
-  wrap4.className = "sb-unit-input";
-  wrap4.style.pointerEvents = "auto";
-  let textfield = null;
-  let picker = null;
-  const units = [
-    { value: "px", label: "px" },
-    { value: "rem", label: "rem" },
-    { value: "em", label: "em" },
-    { value: "%", label: "%" },
-    { value: "vw", label: "vw" },
-    { value: "vh", label: "vh" },
-    { value: "ch", label: "ch" },
-    { value: "pt", label: "pt" },
-    { divider: true },
-    { value: "auto", label: "auto" },
-    { value: "fit-content", label: "fit-content" }
-  ];
-  let debounce;
-  function getValue() {
-    const num = textfield?.value;
-    const unit = picker?.value;
-    if (unit === "auto" || unit === "fit-content")
-      return unit;
-    return num ? `${num}${unit}` : "";
-  }
-  render2(html`
-      <sp-textfield
-        .value=${numVal}
-        size=${size}
-        ${ref2((el) => {
-    if (el)
-      textfield = el;
-  })}
-        @input=${() => {
-    clearTimeout(debounce);
-    const raw = textfield?.value?.trim();
-    const looksNumeric = /^-?[\d.]+$/.test(raw || "");
-    if (picker)
-      picker.style.display = looksNumeric ? "" : "none";
-    debounce = setTimeout(() => {
-      if (onChange)
-        onChange(looksNumeric ? `${raw}${picker?.value}` : raw);
-    }, 400);
-  }}
-      ></sp-textfield>
-      <sp-picker
-        quiet
-        size=${size}
-        style=${styleMap({ display: isNumeric ? "" : "none" })}
-        ${ref2((el) => {
-    if (el) {
-      picker = el;
-      requestAnimationFrame(() => {
-        el.value = unitVal || "px";
-      });
-    }
-  })}
-        @change=${() => {
-    const unit = picker?.value;
-    if (unit === "auto" || unit === "fit-content") {
-      if (textfield)
-        textfield.value = unit;
-      if (picker)
-        picker.style.display = "none";
-      if (onChange)
-        onChange(unit);
-    } else {
-      unitVal = unit;
-      if (onChange)
-        onChange(getValue());
-    }
-  }}
-      >
-        ${units.map((u) => u.divider ? html`<sp-menu-divider></sp-menu-divider>` : html`<sp-menu-item value=${u.value}>${u.label}</sp-menu-item>`)}
-      </sp-picker>
-    `, wrap4);
-  return { wrap: wrap4, textfield, picker, getValue };
-}
 function registerStylebookPanelEvents(panel) {
   const { canvas, overlayClk } = panel;
   overlayClk.addEventListener("click", (e) => {
@@ -183310,6 +181834,289 @@ function updateForcedPseudoPreview() {
 // src/browse/browse.js
 init_platform();
 init_store();
+
+// src/settings/schema-field-ui.js
+var FIELD_TYPES = ["string", "number", "boolean", "array", "object", "reference"];
+var FORMAT_OPTIONS = ["", "image", "date", "color"];
+function detectFieldType(schema4) {
+  if (schema4.$ref)
+    return "reference";
+  return schema4.type || "string";
+}
+function detectFieldFormat(schema4) {
+  if (schema4.type === "array" && schema4.items?.format)
+    return schema4.items.format;
+  return schema4.format || "";
+}
+function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, contentTypeNames = []) {
+  const type = detectFieldType(fieldSchema);
+  const format2 = detectFieldFormat(fieldSchema);
+  const isNested = type === "object";
+  const isRef2 = type === "reference";
+  const nestedProps = fieldSchema.properties || {};
+  const nestedRequired = fieldSchema.required || [];
+  const refTarget = fieldSchema.$ref ? fieldSchema.$ref.replace("#/contentTypes/", "") : "";
+  return html`
+    <div class="schema-field-card">
+      <div class="schema-field-row">
+        <sp-textfield
+          size="s"
+          quiet
+          value=${fieldName}
+          class="schema-field-name-input"
+          @change=${(e) => {
+    const newName = e.target.value.trim();
+    if (newName && newName !== fieldName)
+      handlers.onRename(fieldName, newName);
+    else
+      e.target.value = fieldName;
+  }}
+          @keydown=${(e) => {
+    if (e.key === "Enter")
+      e.target.blur();
+    if (e.key === "Escape") {
+      e.target.value = fieldName;
+      e.target.blur();
+    }
+  }}
+        ></sp-textfield>
+        ${typePickerTpl(type, (newType) => handlers.onChangeType(fieldName, newType))}
+        ${type === "string" || type === "array" ? formatPickerTpl(format2, (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>
+      ${isRef2 && contentTypeNames.length ? 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((n2) => html`<sp-menu-item value=${n2}>${n2}</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 format2 = 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 newName = e.target.value.trim();
+    if (newName && newName !== childName && handlers.onRenameNested) {
+      handlers.onRenameNested(parentName, childName, newName);
+    } else {
+      e.target.value = childName;
+    }
+  }}
+          @keydown=${(e) => {
+    if (e.key === "Enter")
+      e.target.blur();
+    if (e.key === "Escape") {
+      e.target.value = childName;
+      e.target.blur();
+    }
+  }}
+        ></sp-textfield>
+        ${typePickerTpl(type, (newType) => {
+    if (handlers.onChangeNestedType)
+      handlers.onChangeNestedType(parentName, childName, newType);
+  })}
+        ${type === "string" || type === "array" ? formatPickerTpl(format2, (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 row = e.target.closest(".schema-nested-add");
+      const name = e.target.value.trim();
+      const typePicker = row?.querySelector("sp-picker");
+      const type = typePicker?.value || "string";
+      if (name && handlers.onAddNestedField) {
+        handlers.onAddNestedField(parentName, { name, type, required: false });
+        e.target.value = "";
+      }
+    }
+  }}
+      ></sp-textfield>
+      ${typePickerTpl("string", () => {})}
+      <sp-action-button
+        size="xs"
+        quiet
+        title="Add nested field"
+        @click=${(e) => {
+    const row = e.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, type, required: false });
+      nameInput.value = "";
+    }
+  }}
+      >
+        <sp-icon-add slot="icon"></sp-icon-add>
+      </sp-action-button>
+    </div>
+  `;
+}
+function typePickerTpl(value2, onChange) {
+  return html`
+    <sp-picker
+      size="s"
+      label="Type"
+      value=${value2}
+      @change=${(e) => onChange(e.target.value)}
+    >
+      ${FIELD_TYPES.map((t) => html`<sp-menu-item value=${t}>${t}</sp-menu-item>`)}
+    </sp-picker>
+  `;
+}
+function formatPickerTpl(value2, onChange) {
+  return html`
+    <sp-picker
+      size="s"
+      label="Format"
+      value=${value2}
+      @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, format2) {
+  switch (type) {
+    case "number":
+      return { type: "number" };
+    case "boolean":
+      return { type: "boolean" };
+    case "array":
+      return format2 ? { type: "array", items: { type: "string", format: format2 } } : { type: "array", items: { type: "string" } };
+    case "object":
+      return { type: "object", properties: {}, required: [] };
+    case "reference":
+      return { $ref: "#/contentTypes/" };
+    default:
+      return format2 ? { type: "string", format: format2 } : { type: "string" };
+  }
+}
+function yamlDefault(type, format2) {
+  if (format2 === "date")
+    return new Date().toISOString().split("T")[0];
+  if (format2 === "image")
+    return '""';
+  switch (type) {
+    case "boolean":
+      return "false";
+    case "number":
+      return "0";
+    case "array":
+      return "[]";
+    case "object":
+      return "{}";
+    default:
+      return '""';
+  }
+}
+
+// src/browse/browse.js
 var CATEGORIES = [
   { key: "all", label: "All" },
   { key: "pages", label: "Pages", dir: "pages" },
@@ -183850,7 +182657,7 @@ function _flush() {
   const { selection, hover } = tab.session;
   const { stylebookTab } = tab.session.ui;
   const canvasMode = _ctx9.getCanvasMode();
-  if (canvasMode !== "design" && canvasMode !== "edit" && canvasMode !== "settings") {
+  if (canvasMode !== "design" && canvasMode !== "edit" && canvasMode !== "stylebook") {
     for (const p of canvasPanels) {
       render2(nothing, p.overlay);
       p.overlayClk.style.pointerEvents = "none";
@@ -183861,7 +182668,7 @@ function _flush() {
     }
     return;
   }
-  if (canvasMode === "settings") {
+  if (canvasMode === "stylebook") {
     const enable = stylebookTab === "elements";
     for (const p of canvasPanels) {
       p.overlayClk.style.pointerEvents = enable ? "" : "none";
@@ -184006,7 +182813,7 @@ function renderCanvas() {
     });
     return;
   }
-  if (canvasMode === "settings") {
+  if (canvasMode === "stylebook") {
     renderStylebookMode({
       canvasPanelTemplate,
       applyTransform,
@@ -184810,6 +183617,11 @@ async function openFileInTab(path2) {
     });
     projectState.selectedPath = path2;
     trackRecentFile({ path: path2, name: path2.split("/").pop() || path2 });
+    if (path2 === "project.json") {
+      const tab = activeTab.value;
+      if (tab)
+        tab.session.ui.canvasMode = "stylebook";
+    }
     statusMessage(`Opened ${path2.split("/").pop()}`);
   } catch (e) {
     statusMessage(`Error: ${e.message}`);
@@ -210905,6 +209717,113 @@ class JxValueSelector extends LitElement {
 init_lit();
 init_store();
 init_workspace();
+
+// src/utils/studio-utils.js
+function camelToKebab2(str) {
+  return str.replace(/[A-Z]/g, (c6) => "-" + c6.toLowerCase());
+}
+function camelToLabel(prop) {
+  return prop.replace(/([A-Z])/g, " $1").replace(/^./, (c6) => c6.toUpperCase());
+}
+function kebabToLabel(val) {
+  return val.replace(/(^|-)(\w)/g, (_, sep2, c6) => (sep2 ? " " : "") + c6.toUpperCase());
+}
+function propLabel(entry, prop) {
+  return entry?.$label || camelToLabel(prop);
+}
+function attrLabel(entry, attr) {
+  if (entry?.$label)
+    return entry.$label;
+  if (attr.includes("-"))
+    return attr.replace(/(^|-)(\w)/g, (_, sep2, c6) => (sep2 ? " " : "") + c6.toUpperCase());
+  return camelToLabel(attr);
+}
+function abbreviateValue(val) {
+  const map6 = {
+    inline: "inl",
+    "inline-block": "i-blk",
+    "inline-flex": "i-flx",
+    "inline-grid": "i-grd",
+    contents: "cnt",
+    "flow-root": "flow",
+    nowrap: "no-wr",
+    "wrap-reverse": "wr-rev",
+    "flex-start": "start",
+    "flex-end": "end",
+    "space-between": "betw",
+    "space-around": "arnd",
+    "space-evenly": "even",
+    stretch: "str",
+    baseline: "base",
+    normal: "norm",
+    "row-reverse": "row-r",
+    "column-reverse": "col-r",
+    column: "col"
+  };
+  return map6[val] || val;
+}
+function inferInputType(entry) {
+  if (entry.$shorthand === true)
+    return "shorthand";
+  if (entry.$input === "button-group")
+    return "button-group";
+  if (entry.$input === "media")
+    return "media";
+  if (entry.format === "color")
+    return "color";
+  if (entry.format === "uri-reference")
+    return "media";
+  if (entry.$units !== undefined)
+    return "number-unit";
+  if (entry.type === "number")
+    return "number";
+  if (Array.isArray(entry.enum))
+    return "select";
+  if (Array.isArray(entry.examples) || Array.isArray(entry.presets))
+    return "combobox";
+  return "text";
+}
+function findContentTypeSchema(documentPath, projectConfig) {
+  if (!documentPath || !projectConfig?.contentTypes)
+    return null;
+  for (const [name, def3] of Object.entries(projectConfig.contentTypes)) {
+    if (!def3.source || !def3.schema)
+      continue;
+    const src = def3.source.replace(/^\.\//, "");
+    const dir = src.split("/")[0];
+    const ext = src.includes("*.md") ? ".md" : src.includes("*.json") ? ".json" : src.includes("*.csv") ? ".csv" : null;
+    if (documentPath.startsWith(dir + "/") && (!ext || documentPath.endsWith(ext))) {
+      return { name, schema: def3.schema };
+    }
+  }
+  return null;
+}
+function friendlyNameToVar(name, prefix) {
+  const slug = name.trim().toLowerCase().replace(/[^a-z0-9\s-]/g, "").replace(/\s+/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
+  if (!slug)
+    return "";
+  return `${prefix}${slug}`;
+}
+function varDisplayName(varName, prefix) {
+  return varName.replace(new RegExp(`^${prefix.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}`), "").replace(/^--/, "").replace(/-/g, " ").replace(/\b\w/g, (c6) => c6.toUpperCase()) || varName;
+}
+function parseCemType(typeText) {
+  if (!typeText)
+    return { kind: "text" };
+  const t15 = typeText.trim().replace(/\s*\|\s*undefined\b/g, "").trim();
+  if (t15 === "boolean")
+    return { kind: "boolean" };
+  if (t15 === "number")
+    return { kind: "number" };
+  const enumMatch = t15.match(/^'[^']*'(\s*\|\s*'[^']*')+$/);
+  if (enumMatch) {
+    const options = [...t15.matchAll(/'([^']*)'/g)].map((m3) => m3[1]);
+    return { kind: "combobox", options };
+  }
+  return { kind: "text" };
+}
+
+// src/ui/color-selector.js
 function getColorVars() {
   const style2 = getEffectiveStyle(activeTab.value?.doc.document?.style);
   if (!style2)
@@ -211724,6 +210643,1237 @@ function navigateSelection(direction = -1) {
 init_store();
 init_reactivity();
 init_workspace();
+
+// src/settings/defs-editor.js
+init_platform();
+init_store();
+var selectedDef = null;
+var showAddField = false;
+var newFieldState = { name: "", type: "string", format: "", required: false };
+var showNewDef = false;
+var newDefName = "";
+async function saveProjectConfig() {
+  const platform4 = getPlatform();
+  const config = projectState.projectConfig;
+  await platform4.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] = {
+    type: "object",
+    properties: {},
+    required: []
+  };
+  selectedDef = name;
+  showNewDef = false;
+  newDefName = "";
+  rerender();
+  saveProjectConfig();
+}
+function handleAddField(rerender) {
+  const name = newFieldState.name.trim();
+  if (!name || !selectedDef)
+    return;
+  const def3 = getSelectedDef();
+  if (!def3)
+    return;
+  if (!def3.properties)
+    def3.properties = {};
+  def3.properties[name] = schemaForType(newFieldState.type, newFieldState.format || undefined);
+  if (newFieldState.required) {
+    if (!def3.required)
+      def3.required = [];
+    if (!def3.required.includes(name))
+      def3.required.push(name);
+  }
+  showAddField = false;
+  newFieldState = { name: "", type: "string", format: "", required: false };
+  rerender();
+  saveProjectConfig();
+}
+function handleDeleteField(fieldName, rerender) {
+  const def3 = getSelectedDef();
+  if (!def3?.properties)
+    return;
+  delete def3.properties[fieldName];
+  if (def3.required) {
+    def3.required = def3.required.filter((r8) => r8 !== fieldName);
+  }
+  rerender();
+  saveProjectConfig();
+}
+function handleToggleRequired(fieldName, rerender) {
+  const def3 = getSelectedDef();
+  if (!def3)
+    return;
+  if (!def3.required)
+    def3.required = [];
+  const idx = def3.required.indexOf(fieldName);
+  if (idx >= 0)
+    def3.required.splice(idx, 1);
+  else
+    def3.required.push(fieldName);
+  rerender();
+  saveProjectConfig();
+}
+function handleRenameField(oldName, newName, rerender) {
+  const def3 = getSelectedDef();
+  if (!def3?.properties || !newName || def3.properties[newName])
+    return;
+  const newProps = {};
+  for (const [key, val] of Object.entries(def3.properties)) {
+    newProps[key === oldName ? newName : key] = val;
+  }
+  def3.properties = newProps;
+  if (def3.required) {
+    def3.required = def3.required.map((r8) => r8 === oldName ? newName : r8);
+  }
+  rerender();
+  saveProjectConfig();
+}
+function handleChangeType(fieldName, newType, rerender) {
+  const def3 = getSelectedDef();
+  if (!def3?.properties?.[fieldName])
+    return;
+  const oldFormat = newType === "string" || newType === "array" ? detectFieldFormat(def3.properties[fieldName]) : undefined;
+  def3.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
+  rerender();
+  saveProjectConfig();
+}
+function handleChangeFormat(fieldName, format2, rerender) {
+  const def3 = getSelectedDef();
+  if (!def3?.properties?.[fieldName])
+    return;
+  const prop = def3.properties[fieldName];
+  const type2 = prop.type || "string";
+  def3.properties[fieldName] = schemaForType(type2, format2 || undefined);
+  rerender();
+  saveProjectConfig();
+}
+function handleAddNestedField(parentName, fieldState, rerender) {
+  const def3 = getSelectedDef();
+  const parent = def3?.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 def3 = getSelectedDef();
+  const parent = def3?.properties?.[parentName];
+  if (!parent?.properties)
+    return;
+  delete parent.properties[childName];
+  if (parent.required) {
+    parent.required = parent.required.filter((r8) => r8 !== childName);
+  }
+  rerender();
+  saveProjectConfig();
+}
+function handleToggleNestedRequired(parentName, childName, rerender) {
+  const def3 = getSelectedDef();
+  const parent = def3?.properties?.[parentName];
+  if (!parent)
+    return;
+  if (!parent.required)
+    parent.required = [];
+  const idx = parent.required.indexOf(childName);
+  if (idx >= 0)
+    parent.required.splice(idx, 1);
+  else
+    parent.required.push(childName);
+  rerender();
+  saveProjectConfig();
+}
+function handleRenameNested(parentName, oldChild, newChild, rerender) {
+  const def3 = getSelectedDef();
+  const parent = def3?.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((r8) => r8 === oldChild ? newChild : r8);
+  }
+  rerender();
+  saveProjectConfig();
+}
+function handleChangeNestedType(parentName, childName, newType, rerender) {
+  const def3 = getSelectedDef();
+  const parent = def3?.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, format2, rerender) {
+  const def3 = getSelectedDef();
+  const parent = def3?.properties?.[parentName];
+  if (!parent?.properties?.[childName])
+    return;
+  const prop = parent.properties[childName];
+  const type2 = prop.type || "string";
+  parent.properties[childName] = schemaForType(type2, format2 || 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=${(e20) => {
+    newDefName = e20.target.value;
+  }}
+                @keydown=${(e20) => {
+    if (e20.key === "Enter")
+      handleNewDef(rerender);
+    if (e20.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 def3 = defs[selectedDef];
+    const properties = def3.properties || {};
+    const required = def3.required || [];
+    const handlers = {
+      onDelete: (n4) => handleDeleteField(n4, rerender),
+      onToggleRequired: (n4) => handleToggleRequired(n4, rerender),
+      onRename: (oldN, newN) => handleRenameField(oldN, newN, rerender),
+      onChangeType: (n4, t15) => handleChangeType(n4, t15, rerender),
+      onChangeFormat: (n4, f) => handleChangeFormat(n4, f, rerender),
+      onAddNestedField: (p2, s2) => handleAddNestedField(p2, s2, rerender),
+      onDeleteNested: (p2, c6) => handleDeleteNested(p2, c6, rerender),
+      onToggleNestedRequired: (p2, c6) => handleToggleNestedRequired(p2, c6, rerender),
+      onRenameNested: (p2, o19, n4) => handleRenameNested(p2, o19, n4, rerender),
+      onChangeNestedType: (p2, c6, t15) => handleChangeNestedType(p2, c6, t15, rerender),
+      onChangeNestedFormat: (p2, c6, f) => handleChangeNestedFormat(p2, c6, f, 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, {
+      onInput: (field, value2) => {
+        newFieldState = { ...newFieldState, [field]: value2 };
+        rerender();
+      },
+      onConfirm: () => handleAddField(rerender),
+      onCancel: () => {
+        showAddField = false;
+        newFieldState = { name: "", type: "string", format: "", required: false };
+        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> `;
+  render2(tpl, container);
+}
+
+// src/settings/content-types-editor.js
+init_platform();
+init_store();
+var selectedContentType = null;
+var showAddField2 = false;
+var newFieldState2 = { name: "", type: "string", format: "", required: false };
+var showNewContentType = false;
+var newContentTypeName = "";
+async function saveProjectConfig2() {
+  const platform4 = getPlatform();
+  const config = projectState.projectConfig;
+  await platform4.writeFile("project.json", JSON.stringify(config, null, "\t"));
+}
+function getSelectedSchema() {
+  const config = projectState?.projectConfig;
+  return config?.contentTypes?.[selectedContentType]?.schema;
+}
+function handleNewContentType(rerender) {
+  const slug = newContentTypeName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+  if (!slug)
+    return;
+  const config = projectState?.projectConfig;
+  if (!config)
+    return;
+  if (!config.contentTypes)
+    config.contentTypes = {};
+  if (config.contentTypes[slug])
+    return;
+  config.contentTypes[slug] = {
+    source: `./content/${slug}/**/*.md`,
+    schema: { type: "object", properties: {}, required: [] }
+  };
+  selectedContentType = slug;
+  showNewContentType = false;
+  newContentTypeName = "";
+  rerender();
+  saveProjectConfig2().then(async () => {
+    const platform4 = getPlatform();
+    await platform4.writeFile(`content/${slug}/.gitkeep`, "");
+  });
+}
+function handleAddField2(rerender) {
+  const name = newFieldState2.name.trim();
+  if (!name || !selectedContentType)
+    return;
+  const schema4 = getSelectedSchema();
+  if (!schema4)
+    return;
+  if (!schema4.properties)
+    schema4.properties = {};
+  schema4.properties[name] = schemaForType(newFieldState2.type, newFieldState2.format || undefined);
+  if (newFieldState2.required) {
+    if (!schema4.required)
+      schema4.required = [];
+    if (!schema4.required.includes(name))
+      schema4.required.push(name);
+  }
+  showAddField2 = false;
+  newFieldState2 = { name: "", type: "string", format: "", required: false };
+  rerender();
+  saveProjectConfig2();
+}
+function handleDeleteField2(fieldName, rerender) {
+  const schema4 = getSelectedSchema();
+  if (!schema4?.properties)
+    return;
+  delete schema4.properties[fieldName];
+  if (schema4.required) {
+    schema4.required = schema4.required.filter((r8) => r8 !== fieldName);
+  }
+  rerender();
+  saveProjectConfig2();
+}
+function handleToggleRequired2(fieldName, rerender) {
+  const schema4 = getSelectedSchema();
+  if (!schema4)
+    return;
+  if (!schema4.required)
+    schema4.required = [];
+  const idx = schema4.required.indexOf(fieldName);
+  if (idx >= 0)
+    schema4.required.splice(idx, 1);
+  else
+    schema4.required.push(fieldName);
+  rerender();
+  saveProjectConfig2();
+}
+function handleRenameField2(oldName, newName, rerender) {
+  const schema4 = getSelectedSchema();
+  if (!schema4?.properties || !newName || schema4.properties[newName])
+    return;
+  const newProps = {};
+  for (const [key, val] of Object.entries(schema4.properties)) {
+    newProps[key === oldName ? newName : key] = val;
+  }
+  schema4.properties = newProps;
+  if (schema4.required) {
+    schema4.required = schema4.required.map((r8) => r8 === oldName ? newName : r8);
+  }
+  rerender();
+  saveProjectConfig2();
+}
+function handleChangeType2(fieldName, newType, rerender) {
+  const schema4 = getSelectedSchema();
+  if (!schema4?.properties?.[fieldName])
+    return;
+  const oldFormat = newType === "string" || newType === "array" ? detectFieldFormat(schema4.properties[fieldName]) : undefined;
+  schema4.properties[fieldName] = schemaForType(newType, oldFormat || undefined);
+  rerender();
+  saveProjectConfig2();
+}
+function handleChangeFormat2(fieldName, format2, rerender) {
+  const schema4 = getSelectedSchema();
+  if (!schema4?.properties?.[fieldName])
+    return;
+  const prop = schema4.properties[fieldName];
+  const type2 = prop.type || "string";
+  schema4.properties[fieldName] = schemaForType(type2, format2 || undefined);
+  rerender();
+  saveProjectConfig2();
+}
+function handleChangeRefTarget(fieldName, target, rerender) {
+  const schema4 = getSelectedSchema();
+  if (!schema4?.properties)
+    return;
+  schema4.properties[fieldName] = { $ref: `#/contentTypes/${target}` };
+  rerender();
+  saveProjectConfig2();
+}
+function handleAddNestedField2(parentName, fieldState, rerender) {
+  const schema4 = getSelectedSchema();
+  const parent = schema4?.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();
+  saveProjectConfig2();
+}
+function handleDeleteNested2(parentName, childName, rerender) {
+  const schema4 = getSelectedSchema();
+  const parent = schema4?.properties?.[parentName];
+  if (!parent?.properties)
+    return;
+  delete parent.properties[childName];
+  if (parent.required) {
+    parent.required = parent.required.filter((r8) => r8 !== childName);
+  }
+  rerender();
+  saveProjectConfig2();
+}
+function handleToggleNestedRequired2(parentName, childName, rerender) {
+  const schema4 = getSelectedSchema();
+  const parent = schema4?.properties?.[parentName];
+  if (!parent)
+    return;
+  if (!parent.required)
+    parent.required = [];
+  const idx = parent.required.indexOf(childName);
+  if (idx >= 0)
+    parent.required.splice(idx, 1);
+  else
+    parent.required.push(childName);
+  rerender();
+  saveProjectConfig2();
+}
+function handleRenameNested2(parentName, oldChild, newChild, rerender) {
+  const schema4 = getSelectedSchema();
+  const parent = schema4?.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((r8) => r8 === oldChild ? newChild : r8);
+  }
+  rerender();
+  saveProjectConfig2();
+}
+function handleChangeNestedType2(parentName, childName, newType, rerender) {
+  const schema4 = getSelectedSchema();
+  const parent = schema4?.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();
+  saveProjectConfig2();
+}
+function handleChangeNestedFormat2(parentName, childName, format2, rerender) {
+  const schema4 = getSelectedSchema();
+  const parent = schema4?.properties?.[parentName];
+  if (!parent?.properties?.[childName])
+    return;
+  const prop = parent.properties[childName];
+  const type2 = prop.type || "string";
+  parent.properties[childName] = schemaForType(type2, format2 || undefined);
+  rerender();
+  saveProjectConfig2();
+}
+function handleDeleteContentType(rerender) {
+  if (!selectedContentType)
+    return;
+  const config = projectState?.projectConfig;
+  if (!config?.contentTypes?.[selectedContentType])
+    return;
+  delete config.contentTypes[selectedContentType];
+  selectedContentType = null;
+  rerender();
+  saveProjectConfig2();
+}
+function renderContentTypesEditor(container) {
+  const rerender = () => renderContentTypesEditor(container);
+  const config = projectState?.projectConfig;
+  const contentTypes = config?.contentTypes || {};
+  const contentTypeNames = Object.keys(contentTypes);
+  const listTpl = html`
+    <div class="settings-list-panel">
+      ${contentTypeNames.map((name) => html`
+          <sp-action-button
+            size="s"
+            ?selected=${selectedContentType === name}
+            @click=${() => {
+    selectedContentType = name;
+    showAddField2 = false;
+    rerender();
+  }}
+          >
+            ${name}
+          </sp-action-button>
+        `)}
+      ${showNewContentType ? html`
+            <div class="settings-inline-form">
+              <sp-textfield
+                size="s"
+                placeholder="content-type-name"
+                .value=${newContentTypeName}
+                @input=${(e20) => {
+    newContentTypeName = e20.target.value;
+  }}
+                @keydown=${(e20) => {
+    if (e20.key === "Enter")
+      handleNewContentType(rerender);
+    if (e20.key === "Escape") {
+      showNewContentType = false;
+      rerender();
+    }
+  }}
+              ></sp-textfield>
+              <sp-action-button size="s" @click=${() => handleNewContentType(rerender)}>
+                Create
+              </sp-action-button>
+            </div>
+          ` : html`
+            <sp-action-button
+              size="s"
+              quiet
+              @click=${() => {
+    showNewContentType = true;
+    rerender();
+  }}
+            >
+              <sp-icon-add slot="icon"></sp-icon-add> New Content Type
+            </sp-action-button>
+          `}
+    </div>
+  `;
+  let editorTpl;
+  if (!selectedContentType || !contentTypes[selectedContentType]) {
+    editorTpl = html`<div class="settings-empty-state">Select or create a content type</div>`;
+  } else {
+    const col = contentTypes[selectedContentType];
+    const schema4 = col.schema || {};
+    const properties = schema4.properties || {};
+    const required = schema4.required || [];
+    const handlers = {
+      onDelete: (n4) => handleDeleteField2(n4, rerender),
+      onToggleRequired: (n4) => handleToggleRequired2(n4, rerender),
+      onRename: (oldN, newN) => handleRenameField2(oldN, newN, rerender),
+      onChangeType: (n4, t15) => handleChangeType2(n4, t15, rerender),
+      onChangeFormat: (n4, f) => handleChangeFormat2(n4, f, rerender),
+      onChangeRefTarget: (n4, target) => handleChangeRefTarget(n4, target, rerender),
+      onAddNestedField: (p2, s2) => handleAddNestedField2(p2, s2, rerender),
+      onDeleteNested: (p2, c6) => handleDeleteNested2(p2, c6, rerender),
+      onToggleNestedRequired: (p2, c6) => handleToggleNestedRequired2(p2, c6, rerender),
+      onRenameNested: (p2, o19, n4) => handleRenameNested2(p2, o19, n4, rerender),
+      onChangeNestedType: (p2, c6, t15) => handleChangeNestedType2(p2, c6, t15, rerender),
+      onChangeNestedFormat: (p2, c6, f) => handleChangeNestedFormat2(p2, c6, f, rerender)
+    };
+    const fieldCards = Object.entries(properties).map(([name, def3]) => fieldCardTpl(name, def3, required.includes(name), handlers, contentTypeNames));
+    editorTpl = html`
+      <div class="settings-editor-panel">
+        <div class="settings-editor-header">
+          <h3>${selectedContentType}</h3>
+          <sp-field-label size="s">Source: ${col.source || "—"}</sp-field-label>
+          <sp-action-button
+            size="xs"
+            quiet
+            title="Delete content type"
+            @click=${() => handleDeleteContentType(rerender)}
+          >
+            <sp-icon-delete slot="icon"></sp-icon-delete>
+          </sp-action-button>
+        </div>
+        <div class="schema-field-list">${fieldCards}</div>
+        ${showAddField2 ? addFieldFormTpl(newFieldState2, {
+      onInput: (field, value2) => {
+        newFieldState2 = { ...newFieldState2, [field]: value2 };
+        rerender();
+      },
+      onConfirm: () => handleAddField2(rerender),
+      onCancel: () => {
+        showAddField2 = false;
+        newFieldState2 = { name: "", type: "string", format: "", required: false };
+        rerender();
+      }
+    }) : html`
+              <sp-action-button
+                size="s"
+                quiet
+                @click=${() => {
+      showAddField2 = 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> `;
+  render2(tpl, container);
+}
+
+// src/settings/css-vars-editor.js
+init_store();
+function renderCssVarsEditor(container) {
+  const config = projectState.projectConfig || {};
+  const rootStyle = config.style || {};
+  const media = getEffectiveMedia(config.$media);
+  const groups = { color: [], font: [], size: [], other: [] };
+  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((m3) => m3 !== "--") : [];
+  const save = () => {
+    updateSiteConfig({ style: { ...rootStyle } });
+  };
+  const updateVar = (name, val) => {
+    rootStyle[name] = val;
+    save();
+  };
+  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)}
+      ${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>
+  `;
+  render2(tpl, container);
+}
+function renderColorSection(vars, updateVar, deleteVar, addVar) {
+  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 && val.startsWith("#") ? val : "#007acc"}
+                @input=${(e20) => updateVar(name, e20.target.value)}
+              />
+            </div>
+            <span class="css-var-name">${varDisplayName(name, "--color-")}</span>
+            <sp-textfield
+              size="s"
+              .value=${String(val)}
+              @change=${(e20) => updateVar(name, e20.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>
+        `)}
+      ${renderAddRow("--color-", "Primary Blue", "#007acc", addVar)}
+    </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=${(e20) => updateVar(name, e20.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=${(e20) => updateVar(name, e20.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=${(e20) => updateVar(name, e20.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((o19) => html`
+          <div class="css-var-media-row">
+            <span class="css-var-media-label">@${o19.mediaName}</span>
+            <sp-textfield
+              size="s"
+              .value=${String(o19.value)}
+              @change=${(e20) => {
+    if (!rootStyle[`@${o19.mediaName}`])
+      rootStyle[`@${o19.mediaName}`] = {};
+    rootStyle[`@${o19.mediaName}`][varName] = e20.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}
+        ${ref2((el) => {
+    if (el)
+      nameEl = el;
+  })}
+      ></sp-textfield>
+      <sp-textfield
+        size="s"
+        placeholder=${valuePlaceholder}
+        ${ref2((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/settings/head-editor.js
+init_store();
+function renderHeadEditor(container) {
+  const config = projectState.projectConfig || {};
+  const headEntries = config.$head || [];
+  const save = () => {
+    updateSiteConfig({ $head: headEntries });
+  };
+  const addEntry = (tag7) => {
+    const entry = { tag: tag7 };
+    if (tag7 === "link") {
+      entry.rel = "stylesheet";
+      entry.href = "";
+    } else if (tag7 === "meta") {
+      entry.name = "";
+      entry.content = "";
+    } else if (tag7 === "script") {
+      entry.src = "";
+      entry.body = "";
+    } else if (tag7 === "style") {
+      entry.body = "";
+    }
+    headEntries.push(entry);
+    save();
+    renderHeadEditor(container);
+  };
+  const removeEntry = (idx) => {
+    headEntries.splice(idx, 1);
+    save();
+    renderHeadEditor(container);
+  };
+  const updateEntry = (idx, key, val) => {
+    headEntries[idx][key] = val;
+    save();
+  };
+  const tpl = html`
+    <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.tag}&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>
+  `;
+  render2(tpl, container);
+}
+function renderEntryFields(entry, idx, updateEntry) {
+  let debounce;
+  const onFieldChange = (key) => (e20) => {
+    clearTimeout(debounce);
+    debounce = setTimeout(() => {
+      updateEntry(idx, key, e20.target.value);
+    }, 300);
+  };
+  switch (entry.tag) {
+    case "link":
+      return html`
+        <div class="settings-field-row">
+          <sp-textfield
+            size="s"
+            label="rel"
+            .value=${entry.rel || ""}
+            @change=${onFieldChange("rel")}
+          ></sp-textfield>
+          <sp-textfield
+            size="s"
+            label="href"
+            .value=${entry.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=${entry.name || ""}
+            @change=${onFieldChange("name")}
+          ></sp-textfield>
+          <sp-textfield
+            size="s"
+            label="content"
+            .value=${entry.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=${entry.src || ""}
+            @change=${onFieldChange("src")}
+            placeholder="URL or leave empty for inline"
+            style="flex:1"
+          ></sp-textfield>
+        </div>
+        ${!entry.src ? html`
+              <div class="head-entry-body">
+                <label class="settings-field-label">Script body</label>
+                <textarea
+                  class="head-code-editor"
+                  .value=${entry.body || ""}
+                  @input=${onFieldChange("body")}
+                  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.body || ""}
+            @input=${onFieldChange("body")}
+            rows="8"
+            spellcheck="false"
+          ></textarea>
+        </div>
+      `;
+    default:
+      return nothing;
+  }
+}
+
+// src/settings/general-settings.js
+init_store();
+init_platform();
+function renderGeneralSettings(container) {
+  const config = projectState.projectConfig || {};
+  const onFaviconUpload = async () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*,.ico,.svg";
+    input.onchange = async () => {
+      const file = input.files?.[0];
+      if (!file)
+        return;
+      const platform4 = getPlatform();
+      await platform4.uploadFile("public/favicon.ico", file);
+      await updateSiteConfig({ favicon: "/favicon.ico" });
+      renderGeneralSettings(container);
+    };
+    input.click();
+  };
+  const onAdapterChange = (e20) => {
+    updateSiteConfig({ adapter: e20.target.value });
+  };
+  const onEditGlobalStyles = () => {
+    closeSettingsModal();
+    openFileInTab("project.json");
+  };
+  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:4px;padding:2px"
+              />` : html`<div
+                style="width:32px;height:32px;border:1px dashed var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--fg-dim);font-size:11px"
+              >
+                —
+              </div>`}
+          <sp-action-button size="s" @click=${onFaviconUpload}> Upload Favicon </sp-action-button>
+          ${currentFavicon ? html`<span style="font-size: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.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">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>
+  `;
+  render2(tpl, container);
+}
+
+// src/settings/settings-modal.js
+var _host = null;
+var _activeSection = "general";
+var sections = [
+  { key: "general", label: "General", icon: "sp-icon-properties" },
+  { key: "head", label: "Head", icon: "sp-icon-file-single-web-page" },
+  { key: "cssVars", label: "CSS Variables", icon: "sp-icon-brush" },
+  { key: "definitions", label: "Definitions", icon: "sp-icon-data" },
+  { key: "contentTypes", label: "Content Types", icon: "sp-icon-view-grid" }
+];
+function openSettingsModal() {
+  if (_host)
+    return;
+  _host = document.createElement("div");
+  _host.style.display = "contents";
+  const themeRoot = document.querySelector("sp-theme") || document.body;
+  themeRoot.appendChild(_host);
+  _activeSection = "general";
+  renderModal();
+}
+function closeSettingsModal() {
+  if (!_host)
+    return;
+  _host.remove();
+  _host = null;
+}
+function renderModal() {
+  if (!_host)
+    return;
+  const onNavClick = (key) => {
+    _activeSection = key;
+    renderModal();
+    renderActiveSection();
+  };
+  const tpl = html`
+    <sp-underlay open @close=${closeSettingsModal}></sp-underlay>
+    <div
+      class="settings-modal"
+      @keydown=${(e20) => {
+    if (e20.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">
+          ${sections.map((s2) => html`
+              <button
+                class="settings-nav-item${_activeSection === s2.key ? " active" : ""}"
+                @click=${() => onNavClick(s2.key)}
+              >
+                ${s2.label}
+              </button>
+            `)}
+        </nav>
+        <div
+          class="settings-modal-content"
+          ${ref2((el) => {
+    if (el)
+      requestAnimationFrame(() => renderActiveSection());
+  })}
+        ></div>
+      </div>
+    </div>
+  `;
+  render2(tpl, _host);
+}
+function renderActiveSection() {
+  if (!_host)
+    return;
+  const container = _host.querySelector(".settings-modal-content");
+  if (!container)
+    return;
+  switch (_activeSection) {
+    case "general":
+      renderGeneralSettings(container);
+      break;
+    case "head":
+      renderHeadEditor(container);
+      break;
+    case "cssVars":
+      renderCssVarsEditor(container);
+      break;
+    case "definitions":
+      renderDefsEditor(container);
+      break;
+    case "contentTypes":
+      renderContentTypesEditor(container);
+      break;
+  }
+}
+
+// src/panels/activity-bar.js
 var _scope3 = null;
 function mount4() {
   _scope3 = effectScope();
@@ -211805,6 +211955,17 @@ function renderActivityBar() {
           </sp-tab>
         `)}
     </sp-tabs>
+    <div style="margin-top:auto;padding:8px 0;display:flex;justify-content:center">
+      <sp-action-button
+        quiet
+        size="m"
+        title="Settings"
+        aria-label="Settings"
+        @click=${() => openSettingsModal()}
+      >
+        <sp-icon-gears slot="icon"></sp-icon-gears>
+      </sp-action-button>
+    </div>
   `;
   render2(tpl, activityBar);
 }
@@ -211947,17 +212108,22 @@ function toolbarTemplate() {
     { key: "design", label: "Design", iconTag: "sp-icon-artboard" },
     { key: "preview", label: "Preview", iconTag: "sp-icon-preview" },
     { key: "source", label: "Code", iconTag: "sp-icon-code" },
-    { key: "settings", label: "Settings", iconTag: "sp-icon-gears" }
+    { key: "stylebook", label: "Stylebook", iconTag: "sp-icon-brush" }
   ];
+  const isProjectFile = S.documentPath === "project.json";
+  const allowedModes = isProjectFile ? new Set(["stylebook", "source"]) : null;
   const modeSwitcherTpl = html`
     <sp-action-group selects="single" size="s" compact>
       ${modes.map((m3) => html`
           <sp-action-button
             size="s"
             ?selected=${canvasMode === m3.key}
+            ?disabled=${allowedModes && !allowedModes.has(m3.key)}
             @click=${() => {
     if (canvasMode === m3.key)
       return;
+    if (allowedModes && !allowedModes.has(m3.key))
+      return;
     if (S.ui.editingFunction) {
       if (view.functionEditor) {
         view.functionEditor.dispose();
@@ -211968,7 +212134,7 @@ function toolbarTemplate() {
     view.panX = 0;
     view.panY = 0;
     const uiPatch = { editingFunction: null };
-    if (m3.key === "settings")
+    if (m3.key === "stylebook")
       uiPatch.rightTab = "style";
     if (m3.key === "manage")
       view.leftTab = "files";
@@ -214777,7 +214943,7 @@ function renderStylePanelTemplate(ctx) {
   const tab = activeTab.value;
   if (!tab)
     return html`<div class="empty-state">No document loaded</div>`;
-  if (ctx.getCanvasMode() === "settings" && tab.session.ui.stylebookSelection) {
+  if (ctx.getCanvasMode() === "stylebook" && tab.session.ui.stylebookSelection) {
     const node3 = tab.doc.document;
     if (!node3)
       return html`<div class="empty-state">No document loaded</div>`;
@@ -217035,7 +217201,7 @@ function _render() {
   const tab = view.leftTab;
   let content3;
   if (tab === "layers")
-    content3 = ctx.getCanvasMode() === "settings" ? renderStylebookLayersTemplate({
+    content3 = ctx.getCanvasMode() === "stylebook" ? renderStylebookLayersTemplate({
       selectStylebookTag,
       stylebookMeta: stylebook_meta_default
     }) : renderLayersTemplate({
@@ -217097,7 +217263,7 @@ function _render() {
   else
     content3 = nothing;
   render2(html`<div class="panel-body">${content3}</div>`, leftPanel);
-  if (tab === "layers" && ctx.getCanvasMode() !== "settings")
+  if (tab === "layers" && ctx.getCanvasMode() !== "stylebook")
     ctx.registerLayersDnD();
   else if (tab === "imports") {} else if (tab === "blocks") {
     ctx.registerElementsDnD();
@@ -217112,10 +217278,10 @@ function _render() {
 // src/panels/tab-strip.js
 init_reactivity();
 init_workspace();
-var _host = null;
+var _host2 = null;
 var _scope7 = null;
 function mount8(host2) {
-  _host = host2;
+  _host2 = host2;
   _scope7 = effectScope();
   _scope7.run(() => {
     effect(() => {
@@ -217130,10 +217296,10 @@ function mount8(host2) {
   });
 }
 function render10() {
-  if (!_host)
+  if (!_host2)
     return;
   if (workspace.tabOrder.length <= 1) {
-    render2(nothing, _host);
+    render2(nothing, _host2);
     return;
   }
   render2(html`
@@ -217172,7 +217338,7 @@ function render10() {
           `;
   })}
       </div>
-    `, _host);
+    `, _host2);
 }
 function tabLabel(tab) {
   const path2 = tab.documentPath;
@@ -217658,5 +217824,5 @@ effect(() => {
     scheduleAutosave();
 });
 
-//# debugId=D4BE66DA4C58521864756E2164756E21
+//# debugId=2C5B0A9299ACFF5964756E2164756E21
 //# sourceMappingURL=studio.js.map