@jxsuite/studio 0.16.1 → 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() {
@@ -176998,12 +176998,6 @@ async function codeService(action, payload) {
     return null;
   return platform3.codeService(action, payload);
 }
-async function locateDocument(name) {
-  const platform3 = getPlatform();
-  if (!platform3.locateFile)
-    return null;
-  return platform3.locateFile(name);
-}
 var pluginSchemaCache = new Map;
 async function fetchPluginSchema(def3, state) {
   if (!def3.$src || !def3.$prototype)
@@ -177062,58 +177056,6 @@ function getFunctionArgs(editing, document4) {
 // src/files/file-ops.js
 init_platform();
 init_workspace();
-async function openFile() {
-  try {
-    if ("showOpenFilePicker" in window) {
-      const [handle2] = await window.showOpenFilePicker({
-        types: [
-          { description: "Jx Component", accept: { "application/json": [".json"] } },
-          { description: "Markdown Content", accept: { "text/markdown": [".md"] } }
-        ]
-      });
-      const file = await handle2.getFile();
-      const text6 = await file.text();
-      const documentPath = await locateDocument(handle2.name);
-      if (handle2.name.endsWith(".md")) {
-        const { document: document4, frontmatter: frontmatter2 } = await loadMarkdown(text6);
-        openTab({
-          id: handle2.name,
-          documentPath,
-          fileHandle: handle2,
-          document: document4,
-          frontmatter: frontmatter2,
-          sourceFormat: "md"
-        });
-      } else {
-        const document4 = JSON.parse(text6);
-        openTab({ id: handle2.name, documentPath, fileHandle: handle2, document: document4 });
-      }
-      statusMessage(`Opened ${handle2.name}`);
-    } else {
-      const input = document.createElement("input");
-      input.type = "file";
-      input.accept = ".json,.md";
-      input.onchange = async () => {
-        const file = input.files?.[0];
-        if (!file)
-          return;
-        const text6 = await file.text();
-        if (file.name.endsWith(".md")) {
-          const { document: document4, frontmatter: frontmatter2 } = await loadMarkdown(text6);
-          openTab({ id: file.name, document: document4, frontmatter: frontmatter2, sourceFormat: "md" });
-        } else {
-          const document4 = JSON.parse(text6);
-          openTab({ id: file.name, document: document4 });
-        }
-        statusMessage(`Opened ${file.name}`);
-      };
-      input.click();
-    }
-  } catch (e) {
-    if (e.name !== "AbortError")
-      statusMessage(`Error: ${e.message}`);
-  }
-}
 async function loadMarkdown(source) {
   const { transpileJxMarkdown: transpileJxMarkdown2 } = await Promise.resolve().then(() => (init_transpile(), exports_transpile));
   const doc = transpileJxMarkdown2(source);
@@ -180158,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: [
@@ -181433,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);
@@ -181473,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);
   };
@@ -181483,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";
@@ -181537,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) {
@@ -181566,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;
@@ -181856,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) => {
@@ -183368,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" },
@@ -183405,6 +182154,19 @@ function extOf(name) {
   const dot = name.lastIndexOf(".");
   return dot > 0 ? name.slice(dot).toLowerCase() : "";
 }
+var IMAGE_EXTENSIONS2 = new Set([
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".svg",
+  ".webp",
+  ".avif",
+  ".ico"
+]);
+function isImage(ext) {
+  return IMAGE_EXTENSIONS2.has(ext);
+}
 function categoryFor(dir, ext) {
   if (ext && MEDIA_EXTENSIONS2.has(ext))
     return "Media";
@@ -183662,9 +182424,12 @@ async function renderBrowse(container, ctx) {
                 <sp-table-row
                   value=${f.path}
                   class="browse-row"
-                  @click=${() => ctx.openFile(f.path)}
+                  style=${isImage(f.ext) ? "cursor:default" : ""}
+                  @click=${isImage(f.ext) ? nothing : () => ctx.openFile(f.path)}
                 >
-                  <sp-table-cell class="browse-name-cell">${f.name}</sp-table-cell>
+                  <sp-table-cell class="browse-name-cell"
+                    >${isImage(f.ext) ? html`<img class="browse-thumb" src="/${f.path}" />` : nothing}${f.name}</sp-table-cell
+                  >
                   <sp-table-cell>${f.category}</sp-table-cell>
                   <sp-table-cell>${f.type}</sp-table-cell>
                   <sp-table-cell class="browse-path-cell">${f.path}</sp-table-cell>
@@ -183892,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";
@@ -183903,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";
@@ -184048,7 +182813,7 @@ function renderCanvas() {
     });
     return;
   }
-  if (canvasMode === "settings") {
+  if (canvasMode === "stylebook") {
     renderStylebookMode({
       canvasPanelTemplate,
       applyTransform,
@@ -184355,6 +183120,48 @@ init_store();
 init_platform();
 init_components();
 init_workspace();
+
+// src/recent-projects.js
+var STORAGE_KEY = "jx-studio-recent-projects";
+var FILES_STORAGE_KEY = "jx-studio-recent-files";
+var MAX_RECENT = 8;
+var MAX_RECENT_FILES = 10;
+function getRecentProjects() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw)
+      return [];
+    return JSON.parse(raw).sort((a, b) => b.timestamp - a.timestamp);
+  } catch {
+    return [];
+  }
+}
+function addRecentProject(name, root2) {
+  const projects = getRecentProjects().filter((p) => p.root !== root2);
+  projects.unshift({ name, root: root2, timestamp: Date.now() });
+  if (projects.length > MAX_RECENT)
+    projects.length = MAX_RECENT;
+  localStorage.setItem(STORAGE_KEY, JSON.stringify(projects));
+}
+function getRecentFiles() {
+  try {
+    const raw = localStorage.getItem(FILES_STORAGE_KEY);
+    if (!raw)
+      return [];
+    return JSON.parse(raw).sort((a, b) => b.timestamp - a.timestamp);
+  } catch {
+    return [];
+  }
+}
+function trackRecentFile(file) {
+  const recent = getRecentFiles().filter((f) => f.path !== file.path);
+  recent.unshift({ path: file.path, name: file.name, timestamp: Date.now() });
+  if (recent.length > MAX_RECENT_FILES)
+    recent.length = MAX_RECENT_FILES;
+  localStorage.setItem(FILES_STORAGE_KEY, JSON.stringify(recent));
+}
+
+// src/files/files.js
 var fileIconMap = {
   "sp-icon-folder-open": html`<sp-icon-folder-open></sp-icon-folder-open>`,
   "sp-icon-folder": html`<sp-icon-folder></sp-icon-folder>`,
@@ -184440,6 +183247,7 @@ async function openProject({ renderActivityBar, renderLeftPanel }) {
     }
     projectState.projectDirs = foundDirs;
     view.leftTab = "files";
+    addRecentProject(projectState.name, projectState.projectRoot);
     renderActivityBar();
     renderLeftPanel();
     statusMessage(`Opened project: ${projectState.name}`);
@@ -184808,6 +183616,12 @@ async function openFileInTab(path2) {
       sourceFormat: path2.endsWith(".md") ? "md" : null
     });
     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}`);
@@ -185771,6 +184585,16 @@ function createDevServerPlatform() {
       } catch {}
       return null;
     },
+    async searchFiles(query) {
+      const glob = `**/*${query}*.{json,md}`;
+      const res = await fetch(`/__studio/files?dir=${encodeURIComponent(serverPath("."))}&glob=${encodeURIComponent(glob)}`);
+      if (!res.ok)
+        return [];
+      const entries2 = await res.json();
+      for (const e of entries2)
+        e.path = stripRoot(e.path);
+      return entries2;
+    },
     async fetchPluginSchema(src, prototype, base2) {
       const params = new URLSearchParams({ src });
       if (prototype)
@@ -210032,6 +208856,67 @@ class IconRemove extends IconBase {
   }
 }
 
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/elements/IconFullScreen.js
+init_index_dev();
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/FullScreen.js
+var FullScreenIcon = ({ width: l = 24, height: r8 = 24, hidden: t15 = false, title: c6 = "Full Screen" } = {}) => tag6`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${l}"
+    height="${r8}"
+    viewBox="0 0 20 20"
+    aria-hidden=${t15 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${c6}"
+  >
+    <path
+      d="M12.75,14.93652h-5.5c-1.24072,0-2.25-1.00928-2.25-2.25v-5.5c0-1.24072,1.00928-2.25,2.25-2.25h5.5c1.24072,0,2.25,1.00928,2.25,2.25v5.5c0,1.24072-1.00928,2.25-2.25,2.25ZM7.25,6.43652c-.41357,0-.75.33643-.75.75v5.5c0,.41357.33643.75.75.75h5.5c.41357,0,.75-.33643.75-.75v-5.5c0-.41357-.33643-.75-.75-.75h-5.5Z"
+      fill="currentColor"
+    />
+    <path
+      d="M4.5,19h-2.25c-.68945,0-1.25-.56055-1.25-1.25v-2.25c0-.41406.33594-.75.75-.75s.75.33594.75.75v2h2c.41406,0,.75.33594.75.75s-.33594.75-.75.75Z"
+      fill="currentColor"
+    />
+    <path
+      d="M17.75,19h-2.25c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h2v-2c0-.41406.33594-.75.75-.75s.75.33594.75.75v2.25c0,.68945-.56055,1.25-1.25,1.25Z"
+      fill="currentColor"
+      stroke-width="0"
+    />
+    <path
+      d="M18.25,5.25c-.41406,0-.75-.33594-.75-.75v-2h-2c-.41406,0-.75-.33594-.75-.75s.33594-.75.75-.75h2.25c.68945,0,1.25.56055,1.25,1.25v2.25c0,.41406-.33594.75-.75.75ZM17.75,2.5h.00977-.00977Z"
+      fill="currentColor"
+    />
+    <path
+      d="M1.75,5.25c-.41406,0-.75-.33594-.75-.75v-2.25c0-.68945.56055-1.25,1.25-1.25h2.25c.41406,0,.75.33594.75.75s-.33594.75-.75.75h-2v2c0,.41406-.33594.75-.75.75Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/icons/FullScreen.js
+var FullScreenIcon2 = ({ width: a5 = 24, height: e20 = 24, hidden: t15 = false, title: r8 = "Full Screen" } = {}) => tag6`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="${e20}"
+    viewBox="0 0 36 36"
+    width="${a5}"
+    aria-hidden=${t15 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${r8}"
+  >
+    <path
+      d="M32 24.5V30h-5.5a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5H34v-7.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5ZM4 30v-5.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V32h7.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5ZM26 4.5v1a.5.5 0 0 0 .5.5H32v5.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5V4h-7.5a.5.5 0 0 0-.5.5ZM4 6h5.5a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5H2v7.5a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5Z"
+    />
+    <rect height="16" rx=".5" ry=".5" width="20" x="8" y="10" />
+  </svg>`;
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/elements/IconFullScreen.js
+class IconFullScreen extends IconBase {
+  render() {
+    return setCustomTemplateLiteralTag2(html8), this.spectrumVersion === 2 ? FullScreenIcon({ hidden: !this.label, title: this.label }) : FullScreenIcon2({ hidden: !this.label, title: this.label });
+  }
+}
+
 // ../../node_modules/@spectrum-web-components/icons-workflow/src/elements/IconViewColumn.js
 init_index_dev();
 
@@ -210832,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)
@@ -211157,6 +210149,7 @@ var components = [
   ["sp-icon-text-baseline-shift", IconTextBaselineShift],
   ["sp-icon-flip-vertical", IconFlipVertical],
   ["sp-icon-remove", IconRemove],
+  ["sp-icon-full-screen", IconFullScreen],
   ["sp-icon-download", IconDownload],
   ["sp-icon-checkmark", IconCheckmark],
   ["sp-icon-view-column", IconViewColumn],
@@ -211185,14 +210178,14 @@ Theme.registerThemeFragment("dark", "color", theme_dark_css_default);
 Theme.registerThemeFragment("medium", "scale", scale_medium_css_default);
 
 // src/ui/panel-resize.js
-var STORAGE_KEY = "jx-studio-panel-widths";
+var STORAGE_KEY2 = "jx-studio-panel-widths";
 var MIN_WIDTH = 160;
 var MAX_RATIO = 0.5;
 var DEFAULT_LEFT = 240;
 var DEFAULT_RIGHT = 280;
 var root2 = document.documentElement;
 try {
-  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
+  const saved = JSON.parse(localStorage.getItem(STORAGE_KEY2) || "{}");
   if (saved.left)
     root2.style.setProperty("--panel-w-left", `${saved.left}px`);
   if (saved.right)
@@ -211238,7 +210231,7 @@ function persistWidths() {
   const left = parseInt(getComputedStyle(root2).getPropertyValue("--panel-w-left")) || DEFAULT_LEFT;
   const right = parseInt(getComputedStyle(root2).getPropertyValue("--panel-w-right")) || DEFAULT_RIGHT;
   try {
-    localStorage.setItem(STORAGE_KEY, JSON.stringify({ left, right }));
+    localStorage.setItem(STORAGE_KEY2, JSON.stringify({ left, right }));
   } catch {}
 }
 var resizeLeft = document.getElementById("resize-left");
@@ -211251,11 +210244,162 @@ if (resizeRight)
 // src/editor/shortcuts.js
 init_store();
 init_workspace();
+
+// src/panels/quick-search.js
+init_platform();
+var _open = false;
+var _query = "";
+var _results = [];
+var _selectedIndex = 0;
+var _debounceTimer = 0;
+var _container = null;
+function initQuickSearch() {
+  _container = document.createElement("div");
+  _container.style.display = "contents";
+  (document.querySelector("sp-theme") || document.body).appendChild(_container);
+}
+function openQuickSearch() {
+  _open = true;
+  _query = "";
+  _results = [];
+  _selectedIndex = 0;
+  renderOverlay();
+  requestAnimationFrame(() => {
+    const input = _container?.querySelector(".quick-search-input");
+    if (input)
+      input.focus();
+  });
+}
+function closeQuickSearch() {
+  _open = false;
+  renderOverlay();
+}
+async function doSearch(query3) {
+  if (!query3.trim()) {
+    _results = [];
+    _selectedIndex = 0;
+    renderOverlay();
+    return;
+  }
+  try {
+    const platform4 = getPlatform();
+    _results = await platform4.searchFiles(query3.trim().toLowerCase());
+    _selectedIndex = 0;
+    renderOverlay();
+  } catch {
+    _results = [];
+    renderOverlay();
+  }
+}
+function onInput(e20) {
+  _query = e20.target.value;
+  clearTimeout(_debounceTimer);
+  _debounceTimer = setTimeout(() => doSearch(_query), 150);
+  renderOverlay();
+}
+function onKeydown2(e20) {
+  const items = _query.trim() ? _results : getRecentFiles();
+  switch (e20.key) {
+    case "ArrowDown":
+      e20.preventDefault();
+      _selectedIndex = Math.min(_selectedIndex + 1, items.length - 1);
+      renderOverlay();
+      break;
+    case "ArrowUp":
+      e20.preventDefault();
+      _selectedIndex = Math.max(_selectedIndex - 1, 0);
+      renderOverlay();
+      break;
+    case "Enter":
+      e20.preventDefault();
+      if (items[_selectedIndex])
+        selectItem(items[_selectedIndex]);
+      break;
+    case "Escape":
+      e20.preventDefault();
+      closeQuickSearch();
+      break;
+  }
+}
+function selectItem(item) {
+  closeQuickSearch();
+  const path2 = item.path;
+  trackRecentFile({ path: path2, name: path2.split("/").pop() });
+  openFileInTab(path2);
+}
+function fileIcon(name) {
+  const ext = name.split(".").pop()?.toLowerCase();
+  switch (ext) {
+    case "json":
+      return html`<sp-icon-file-code size="s"></sp-icon-file-code>`;
+    case "md":
+      return html`<sp-icon-file-txt size="s"></sp-icon-file-txt>`;
+    default:
+      return html`<sp-icon-document size="s"></sp-icon-document>`;
+  }
+}
+function dirPart(path2) {
+  const parts = path2.split("/");
+  parts.pop();
+  return parts.length ? parts.join("/") : "";
+}
+function renderOverlay() {
+  if (!_container)
+    return;
+  if (!_open) {
+    render2(nothing, _container);
+    return;
+  }
+  const recentFiles = getRecentFiles();
+  const showRecent = !_query.trim();
+  const items = showRecent ? recentFiles : _results;
+  const tpl = html`
+    <div class="quick-search-overlay" @click=${closeQuickSearch}>
+      <div class="quick-search-panel" @click=${(e20) => e20.stopPropagation()}>
+        <input
+          class="quick-search-input"
+          type="text"
+          placeholder="Search project files…"
+          .value=${_query}
+          @input=${onInput}
+          @keydown=${onKeydown2}
+        />
+        <div class="quick-search-results">
+          ${items.length === 0 && _query.trim() ? html`<div class="quick-search-empty">No results</div>` : nothing}
+          ${items.length === 0 && !_query.trim() && recentFiles.length === 0 ? html`<div class="quick-search-empty">Type to search project files</div>` : nothing}
+          ${showRecent && recentFiles.length ? html`<div class="quick-search-section-label">Recently opened</div>` : nothing}
+          ${items.map((item, i6) => html`
+              <div
+                class="quick-search-item ${i6 === _selectedIndex ? "selected" : ""}"
+                @click=${() => selectItem(item)}
+                @mouseenter=${() => {
+    _selectedIndex = i6;
+    renderOverlay();
+  }}
+              >
+                <span class="quick-search-icon"
+                  >${fileIcon(item.name || item.path.split("/").pop())}</span
+                >
+                <span class="quick-search-name">${item.name || item.path.split("/").pop()}</span>
+                <span class="quick-search-path">${dirPart(item.path)}</span>
+                ${showRecent ? html`<span class="quick-search-badge">recent</span>` : nothing}
+              </div>
+            `)}
+        </div>
+      </div>
+    </div>
+  `;
+  render2(tpl, _container);
+}
+
+// src/editor/shortcuts.js
 function initShortcuts(getContext) {
   canvasWrap.addEventListener("wheel", (e20) => {
     const { canvasMode, panX, panY, setPan, applyTransform: applyTransform2 } = getContext();
     if (canvasMode === "edit")
       return;
+    if (canvasMode === "manage")
+      return;
     e20.preventDefault();
     if (e20.ctrlKey || e20.metaKey) {
       const rect = canvasWrap.getBoundingClientRect();
@@ -211359,6 +210503,10 @@ function initShortcuts(getContext) {
           e20.preventDefault();
           openProject2();
           break;
+        case "p":
+          e20.preventDefault();
+          openQuickSearch();
+          break;
         case "s":
           e20.preventDefault();
           saveFile2();
@@ -211495,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();
@@ -211576,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);
 }
@@ -211614,6 +212004,9 @@ function tbBtnTpl(label4, onClick, iconTag) {
 function mount5(rootEl, ctx) {
   _rootEl = rootEl;
   _ctx11 = ctx;
+  if (globalThis.__jxPlatform?.windowControls) {
+    rootEl.classList.add("electrobun-webkit-app-region-drag");
+  }
   _scope4 = effectScope();
   _scope4.run(() => {
     effect(() => {
@@ -211715,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();
@@ -211736,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";
@@ -211750,10 +212148,52 @@ function toolbarTemplate() {
         `)}
     </sp-action-group>
   `;
+  const windowControls = globalThis.__jxPlatform?.windowControls;
+  const csdTpl = windowControls ? html`
+        <sp-action-group class="window-controls" size="s">
+          <sp-action-button
+            quiet
+            size="s"
+            title="Minimize"
+            @click=${() => windowControls.minimize()}
+          >
+            <sp-icon-remove slot="icon"></sp-icon-remove>
+          </sp-action-button>
+          <sp-action-button
+            quiet
+            size="s"
+            title="Maximize"
+            @click=${() => windowControls.maximize()}
+          >
+            <sp-icon-full-screen slot="icon"></sp-icon-full-screen>
+          </sp-action-button>
+          <sp-action-button
+            quiet
+            size="s"
+            title="Close"
+            class="csd-close"
+            @click=${() => windowControls.close()}
+          >
+            <sp-icon-close slot="icon"></sp-icon-close>
+          </sp-action-button>
+        </sp-action-group>
+      ` : nothing;
+  const recentProjects = getRecentProjects();
+  const recentProjectsTpl = recentProjects.length ? html`
+        <overlay-trigger placement="bottom-start">
+          <sp-action-button size="s" slot="trigger" title="Recent projects">
+            <sp-icon-chevron-down slot="icon"></sp-icon-chevron-down>
+          </sp-action-button>
+          <sp-popover slot="click-content" tip>
+            <sp-menu @change=${(e20) => _ctx11.openRecentProject(e20.target.value)}>
+              ${recentProjects.map((p2) => html`<sp-menu-item value=${p2.root}>${p2.name}</sp-menu-item>`)}
+            </sp-menu>
+          </sp-popover>
+        </overlay-trigger>
+      ` : nothing;
   return html`
     <sp-action-group compact size="s">
-      ${tbBtnTpl("Open Project", _ctx11.openProject, "sp-icon-folder-open")}
-      ${tbBtnTpl("Open File", _ctx11.openFile, "sp-icon-document")}
+      ${tbBtnTpl("Open Project", _ctx11.openProject, "sp-icon-folder-open")} ${recentProjectsTpl}
       ${tbBtnTpl("Save", _ctx11.saveFile, "sp-icon-save-floppy")}
     </sp-action-group>
     <sp-action-group compact size="s">
@@ -211761,14 +212201,12 @@ function toolbarTemplate() {
       ${tbBtnTpl("Redo", () => redo(activeTab.value), "sp-icon-redo")}
     </sp-action-group>
     <div class="tb-spacer"></div>
-    ${S.documentPath ? html`<span class="tb-file-title" title=${S.documentPath}
-          >${S.documentPath}${S.dirty ? html`<span class="tb-dirty">●</span>` : nothing}</span
-        >` : S.fileHandle ? html`<span class="tb-file-title"
-            >${S.fileHandle.name}${S.dirty ? html`<span class="tb-dirty">●</span>` : nothing}</span
-          >` : nothing}
-    ${breadcrumbTpl}
+    <sp-action-button class="tb-search-trigger" size="s" quiet @click=${openQuickSearch}>
+      <sp-icon-search slot="icon"></sp-icon-search>
+      <span class="tb-search-label">Search files… <kbd>⌘P</kbd></span>
+    </sp-action-button>
     <div class="tb-spacer"></div>
-    ${togglesTpl} ${modeSwitcherTpl}
+    ${breadcrumbTpl} ${togglesTpl} ${modeSwitcherTpl} ${csdTpl}
   `;
 }
 
@@ -214505,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>`;
@@ -214908,15 +215346,15 @@ function bindableFieldRow(label4, type2, rawValue, onChange, filterFn = null, ex
   const isBound = typeof rawValue === "object" && rawValue !== null && rawValue.$ref;
   const signalDefs = Object.entries(defs).filter(([, d5]) => filterFn ? filterFn(d5) : !d5.$handler && d5.$prototype !== "Function");
   let debounce;
-  const onInput = (e20) => {
+  const onInput2 = (e20) => {
     clearTimeout(debounce);
     debounce = setTimeout(() => onChange(e20.target.value), 400);
   };
   const staticVal = isBound ? "" : rawValue ?? "";
-  const staticTpl = type2 === "textarea" ? html`<sp-textfield multiline size="s" value=${staticVal} @input=${onInput}></sp-textfield>` : type2 === "checkbox" ? html`<sp-checkbox
+  const staticTpl = type2 === "textarea" ? html`<sp-textfield multiline size="s" value=${staticVal} @input=${onInput2}></sp-textfield>` : type2 === "checkbox" ? html`<sp-checkbox
             ?checked=${!!staticVal}
             @change=${(e20) => onChange(e20.target.checked)}
-          ></sp-checkbox>` : html`<sp-textfield size="s" value=${staticVal} @input=${onInput}></sp-textfield>`;
+          ></sp-checkbox>` : html`<sp-textfield size="s" value=${staticVal} @input=${onInput2}></sp-textfield>`;
   const boundTpl = html`
     <sp-picker
       size="s"
@@ -216763,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({
@@ -216825,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();
@@ -216840,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(() => {
@@ -216858,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`
@@ -216900,7 +217338,7 @@ function render10() {
           `;
   })}
       </div>
-    `, _host);
+    `, _host2);
 }
 function tabLabel(tab) {
   const path2 = tab.documentPath;
@@ -217056,7 +217494,7 @@ mount5(toolbarEl, {
   navigateBack: () => navigateBack(),
   closeFunctionEditor: () => closeFunctionEditor(),
   openProject: () => openProject2(),
-  openFile: () => openFile(),
+  openRecentProject: (root3) => openRecentProject(root3),
   saveFile: () => saveFile(),
   parseMediaEntries,
   getCanvasMode,
@@ -217064,6 +217502,7 @@ mount5(toolbarEl, {
   renderCanvas: () => renderCanvas(),
   safeRenderRightPanel: () => safeRenderRightPanel()
 });
+initQuickSearch();
 mount8(document.querySelector("#tab-strip"));
 mount3({
   getCanvasMode,
@@ -217284,6 +217723,51 @@ function openProject2() {
     renderLeftPanel
   });
 }
+async function openRecentProject(root3) {
+  try {
+    const platform4 = getPlatform();
+    platform4.projectRoot = root3;
+    const content3 = await platform4.readFile("project.json");
+    const config = JSON.parse(content3);
+    replaceAllTabs({ id: "initial", document: { tagName: "div", children: [] } });
+    setProjectState({
+      ...projectState,
+      projectRoot: root3,
+      isSiteProject: true,
+      projectConfig: config,
+      name: config.name || root3.split("/").pop(),
+      dirs: new Map,
+      expanded: new Set,
+      selectedPath: null,
+      searchQuery: ""
+    });
+    await loadDirectory(".");
+    await loadComponentRegistry();
+    const conventionalDirs = [
+      "pages",
+      "layouts",
+      "components",
+      "content",
+      "data",
+      "public",
+      "styles"
+    ];
+    const entries2 = projectState.dirs.get(".") || [];
+    for (const e20 of entries2) {
+      if (e20.type === "directory" && conventionalDirs.includes(e20.name)) {
+        projectState.expanded.add(e20.path || e20.name);
+        await loadDirectory(e20.path || e20.name);
+      }
+    }
+    addRecentProject(projectState.name, root3);
+    view.leftTab = "files";
+    renderActivityBar();
+    renderLeftPanel();
+    statusMessage(`Opened project: ${projectState.name}`);
+  } catch (e20) {
+    statusMessage(`Error: ${e20.message}`);
+  }
+}
 function renderFilesTemplate2() {
   return renderFilesTemplate({ openProject: openProject2, openFileFromTree, renderLeftPanel });
 }
@@ -217340,5 +217824,5 @@ effect(() => {
     scheduleAutosave();
 });
 
-//# debugId=E697E6D3C357567164756E2164756E21
+//# debugId=2C5B0A9299ACFF5964756E2164756E21
 //# sourceMappingURL=studio.js.map