@jxsuite/studio 0.10.1 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -30,35 +30,35 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/runtime": "^0.10.0",
-    "@spectrum-web-components/accordion": "^1.12.0",
-    "@spectrum-web-components/action-bar": "1.12.0",
-    "@spectrum-web-components/action-button": "^1.12.0",
-    "@spectrum-web-components/action-group": "^1.12.0",
-    "@spectrum-web-components/checkbox": "^1.12.0",
-    "@spectrum-web-components/color-area": "^1.12.0",
-    "@spectrum-web-components/color-handle": "^1.12.0",
-    "@spectrum-web-components/color-slider": "^1.12.0",
-    "@spectrum-web-components/combobox": "^1.12.0",
-    "@spectrum-web-components/dialog": "^1.12.0",
-    "@spectrum-web-components/divider": "^1.12.0",
-    "@spectrum-web-components/icon": "^1.12.0",
-    "@spectrum-web-components/icons-workflow": "^1.12.0",
-    "@spectrum-web-components/menu": "^1.12.0",
-    "@spectrum-web-components/number-field": "^1.12.0",
-    "@spectrum-web-components/overlay": "^1.12.0",
+    "@jxsuite/runtime": "^0.10.1",
+    "@spectrum-web-components/accordion": "^1.12.1",
+    "@spectrum-web-components/action-bar": "1.12.1",
+    "@spectrum-web-components/action-button": "^1.12.1",
+    "@spectrum-web-components/action-group": "^1.12.1",
+    "@spectrum-web-components/checkbox": "^1.12.1",
+    "@spectrum-web-components/color-area": "^1.12.1",
+    "@spectrum-web-components/color-handle": "^1.12.1",
+    "@spectrum-web-components/color-slider": "^1.12.1",
+    "@spectrum-web-components/combobox": "^1.12.1",
+    "@spectrum-web-components/dialog": "^1.12.1",
+    "@spectrum-web-components/divider": "^1.12.1",
+    "@spectrum-web-components/icon": "^1.12.1",
+    "@spectrum-web-components/icons-workflow": "^1.12.1",
+    "@spectrum-web-components/menu": "^1.12.1",
+    "@spectrum-web-components/number-field": "^1.12.1",
+    "@spectrum-web-components/overlay": "^1.12.1",
     "@spectrum-web-components/overlay-trigger": "^0.1.7",
-    "@spectrum-web-components/picker": "^1.12.0",
-    "@spectrum-web-components/picker-button": "^1.12.0",
-    "@spectrum-web-components/popover": "^1.12.0",
-    "@spectrum-web-components/search": "^1.12.0",
-    "@spectrum-web-components/swatch": "^1.12.0",
-    "@spectrum-web-components/switch": "^1.12.0",
-    "@spectrum-web-components/table": "^1.12.0",
-    "@spectrum-web-components/tabs": "^1.12.0",
-    "@spectrum-web-components/textfield": "^1.12.0",
-    "@spectrum-web-components/theme": "^1.12.0",
-    "@spectrum-web-components/tooltip": "^1.12.0",
+    "@spectrum-web-components/picker": "^1.12.1",
+    "@spectrum-web-components/picker-button": "^1.12.1",
+    "@spectrum-web-components/popover": "^1.12.1",
+    "@spectrum-web-components/search": "^1.12.1",
+    "@spectrum-web-components/swatch": "^1.12.1",
+    "@spectrum-web-components/switch": "^1.12.1",
+    "@spectrum-web-components/table": "^1.12.1",
+    "@spectrum-web-components/tabs": "^1.12.1",
+    "@spectrum-web-components/textfield": "^1.12.1",
+    "@spectrum-web-components/theme": "^1.12.1",
+    "@spectrum-web-components/tooltip": "^1.12.1",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
     "remark-directive": "^4.0.0",

package/src/browse/browse.js

@@ -3,7 +3,7 @@
  *
  * Displays pages, layouts, components, content, and media in a filterable table grid. Fills the
  * center canvas area as a parallel state to Edit/Design/Preview/Code/Settings. Includes a "New +"
- * button with type-aware entity creation (including collections from project.json).
+ * button with type-aware entity creation (including content types from project.json).
  */
 
 import { html, render as litRender } from "lit-html";
@@ -153,14 +153,14 @@ const ENTITY_TYPES = [
 ];
 
 /**
- * Build frontmatter YAML from a collection's schema properties.
+ * Build frontmatter YAML from a content type's schema properties.
  *
- * @param {string} collectionName
+ * @param {string} contentTypeName
  * @returns {string}
  */
-function buildFrontmatterYaml(collectionName) {
+function buildFrontmatterYaml(contentTypeName) {
   const config = projectState?.projectConfig;
-  const col = config?.collections?.[collectionName];
+  const col = config?.contentTypes?.[contentTypeName];
   if (!col?.schema?.properties) return "title: Untitled\n";
 
   let yaml = "";
@@ -172,22 +172,22 @@ function buildFrontmatterYaml(collectionName) {
 }
 
 /**
- * Get collection-derived entity types from project config.
+ * Get content-type-derived entity types from project config.
  *
- * @returns {{ key: string; label: string; dir: string; ext: string; collectionName: string }[]}
+ * @returns {{ key: string; label: string; dir: string; ext: string; contentTypeName: string }[]}
  */
-function getCollectionTypes() {
+function getContentTypeTypes() {
   const config = projectState?.projectConfig;
-  if (!config?.collections) return [];
-  return Object.entries(config.collections).map(([name, def]) => {
+  if (!config?.contentTypes) return [];
+  return Object.entries(config.contentTypes).map(([name, def]) => {
     const d = /** @type {any} */ (def);
     const dir = d.source ? d.source.replace(/^\.\//, "").split("/")[0] : name;
     return {
-      key: `collection:${name}`,
+      key: `contentType:${name}`,
       label: name.charAt(0).toUpperCase() + name.slice(1),
       dir,
       ext: ".md",
-      collectionName: name,
+      contentTypeName: name,
     };
   });
 }
@@ -200,9 +200,9 @@ function getCollectionTypes() {
  * @param {{ openFile: (path: string) => void }} ctx
  */
 async function handleNewEntity(typeKey, container, ctx) {
-  const isCollection = typeKey.startsWith("collection:");
-  const collectionName = isCollection ? typeKey.slice("collection:".length) : null;
-  const allTypes = [...ENTITY_TYPES, ...getCollectionTypes()];
+  const isContentType = typeKey.startsWith("contentType:");
+  const contentTypeName = isContentType ? typeKey.slice("contentType:".length) : null;
+  const allTypes = [...ENTITY_TYPES, ...getContentTypeTypes()];
   const typeInfo = allTypes.find((t) => t.key === typeKey);
   if (!typeInfo) return;
 
@@ -217,7 +217,9 @@ async function handleNewEntity(typeKey, container, ctx) {
 
   let content;
   if (typeInfo.ext === ".md") {
-    const frontmatter = collectionName ? buildFrontmatterYaml(collectionName) : "title: Untitled\n";
+    const frontmatter = contentTypeName
+      ? buildFrontmatterYaml(contentTypeName)
+      : "title: Untitled\n";
     content = `---\n${frontmatter}---\n\n`;
   } else {
     content = JSON.stringify({ tagName: "div", children: [] }, null, "\t");
@@ -278,7 +280,7 @@ export async function renderBrowse(container, ctx) {
 
   const files = filteredFiles();
 
-  const collectionTypes = getCollectionTypes();
+  const contentTypeTypes = getContentTypeTypes();
 
   const filterBar = html`
     <div class="browse-filter-bar">
@@ -317,8 +319,8 @@ export async function renderBrowse(container, ctx) {
             @change=${(/** @type {any} */ e) => handleNewEntity(e.target.value, container, ctx)}
           >
             ${ENTITY_TYPES.map((t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`)}
-            ${collectionTypes.length
-              ? html`<sp-menu-divider></sp-menu-divider> ${collectionTypes.map(
+            ${contentTypeTypes.length
+              ? html`<sp-menu-divider></sp-menu-divider> ${contentTypeTypes.map(
                     (t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`,
                   )}`
               : ""}

package/src/canvas/canvas-live-render.js

@@ -127,7 +127,13 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
             console.warn("Studio: failed to import package", entry, e);
           }
         } else if (entry?.$ref) {
-          const href = new URL(entry.$ref, docBase).href;
+          let href;
+          try {
+            href = new URL(entry.$ref, docBase).href;
+          } catch (/** @type {any} */ urlErr) {
+            console.warn("Studio: invalid element URL", { ref: entry.$ref, docBase }, urlErr);
+            continue;
+          }
           try {
             await defineElement(href);
           } catch (/** @type {any} */ e) {

package/src/canvas/canvas-render.js

@@ -66,12 +66,15 @@ export function renderCanvas() {
   // Advance render generation so stale async renders from the previous cycle bail out
   ++view.renderGeneration;
 
-  // Always clear Lit's internal state so it builds fresh DOM. Stale async
-  // renderCanvasLive calls from a previous cycle can corrupt nested ChildPart
-  // markers (Comment nodes inside panzoom-wrap) in ways the root-only
-  // ensureLitState check cannot detect.
+  // Detect whether this is a mode transition or a content-only re-render
+  const modeChanged = canvasMode !== view.prevCanvasMode;
+
+  // Only clear Lit's internal state on mode transitions (structural panel changes).
+  // For content re-renders in the same mode, Lit's template diffing preserves
+  // the panel structure. Bailed async renders can't corrupt the DOM because
+  // renderCanvasLive uses atomic clear (innerHTML = "" right before appendChild).
   // @ts-ignore
-  if (canvasWrap["_$litPart$"]) {
+  if (modeChanged && canvasWrap["_$litPart$"]) {
     canvasWrap.textContent = "";
     // @ts-ignore
     delete canvasWrap["_$litPart$"];
@@ -101,7 +104,6 @@ export function renderCanvas() {
   }
 
   // Detect whether this is a mode transition or a content-only re-render
-  const modeChanged = canvasMode !== view.prevCanvasMode;
   view.prevCanvasMode = canvasMode;
 
   // DnD handlers are registered on inner canvas elements that get replaced on every

package/src/files/files.js

@@ -564,6 +564,8 @@ export async function openFileFromTree(ctx, path) {
     if (path.endsWith(".md")) {
       await ctx.loadMarkdown(content, null);
       ctx.S.documentPath = path;
+      ctx.S.dirty = false;
+      ctx.commit(ctx.S);
     } else {
       const doc = JSON.parse(content);
       const newS = createState(doc);

package/src/panels/imports-panel.js

@@ -3,8 +3,8 @@
  *
  * When editing project.json: shows Class Imports, Dependencies (add/remove packages), and
  * per-package component toggles for cherry-picking individual elements. When editing a
- * page/layout/component/collection: shows Component Imports ($ref picker) and per-package component
- * toggles.
+ * page/layout/component/content type: shows Component Imports ($ref picker) and per-package
+ * component toggles.
  */
 
 import { html, nothing } from "lit-html";

package/src/panels/properties-panel.js

@@ -27,7 +27,7 @@ import { renderFieldRow } from "../ui/field-row.js";
 import {
   attrLabel,
   inferInputType,
-  findCollectionSchema,
+  findContentTypeSchema,
   friendlyNameToVar,
   camelToLabel,
   parseCemType,
@@ -210,7 +210,7 @@ function kvRow(
 function renderFrontmatterOnlyPanel() {
   const S = getState();
   const fm = S.content?.frontmatter || {};
-  const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
+  const col = findContentTypeSchema(S.documentPath, projectState?.projectConfig);
   const schemaProps = col?.schema?.properties;
   const requiredFields = new Set(col?.schema?.required || []);
 
@@ -1276,7 +1276,7 @@ export function renderPropertiesPanelTemplate(ctx) {
     S.mode === "content"
       ? (() => {
           const fm = S.content?.frontmatter || {};
-          const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
+          const col = findContentTypeSchema(S.documentPath, projectState?.projectConfig);
           const schemaProps = col?.schema?.properties;
           const requiredFields = new Set(col?.schema?.required || []);
 

package/src/panels/stylebook-panel.js

@@ -1,6 +1,6 @@
 /**
  * Stylebook panel — renders the Settings mode canvas (element catalog, design variables,
- * definitions, collections). Extracted from studio.js Phase 4e.
+ * definitions, content types). Extracted from studio.js Phase 4e.
  */
 
 import { html, render as litRender, nothing } from "lit-html";
@@ -26,7 +26,7 @@ import { parseMediaEntries, activeBreakpointsForWidth } from "../utils/canvas-me
 import { mediaDisplayName } from "./shared.js";
 import { friendlyNameToVar, varDisplayName } from "../utils/studio-utils.js";
 import { renderDefsEditor } from "../settings/defs-editor.js";
-import { renderCollectionsEditor } from "../settings/collections-editor.js";
+import { renderContentTypesEditor } from "../settings/content-types-editor.js";
 import stylebookMeta from "../../data/stylebook-meta.json";
 
 export { stylebookMeta };
@@ -67,12 +67,12 @@ export function renderStylebookMode(ctx) {
       >
         <sp-tab label="Stylebook" value="stylebook"></sp-tab>
         <sp-tab label="Definitions" value="definitions"></sp-tab>
-        <sp-tab label="Collections" value="collections"></sp-tab>
+        <sp-tab label="Content Types" value="contentTypes"></sp-tab>
       </sp-tabs>
     </div>
   `;
 
-  if (settingsTab === "definitions" || settingsTab === "collections") {
+  if (settingsTab === "definitions" || settingsTab === "contentTypes") {
     /** @type {any} */ (canvasWrap).style.overflow = "hidden";
 
     litRender(
@@ -88,7 +88,7 @@ export function renderStylebookMode(ctx) {
       canvasWrap.querySelector(".settings-editor-container")
     );
     if (settingsTab === "definitions") renderDefsEditor(container);
-    else renderCollectionsEditor(container);
+    else renderContentTypesEditor(container);
     return;
   }
 
@@ -261,12 +261,6 @@ export function selectStylebookTag(tag, media) {
     },
   });
   renderStylebookOverlays();
-  requestAnimationFrame(() => {
-    if (canvasPanels.length > 0) {
-      const el = findStylebookEl(canvasPanels[0].canvas, tag);
-      if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  });
 }
 
 /** Draw selection + hover overlays for stylebook elements */
@@ -324,7 +318,7 @@ export function renderStylebookOverlays() {
   }
 }
 
-// ─── Internal helpers ─────────────────────────────────────────────────────────
+// ─── Internal helpers (exported for testing) ─────────────────────────────────
 
 /**
  * Build a DOM element tree from a stylebook-meta.json entry.
@@ -332,8 +326,9 @@ export function renderStylebookOverlays() {
  * @param {any} entry
  * @param {any} rootStyle
  * @param {any} activeBreakpoints
+ * @param {string | null} [parentTag]
  */
-function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
+export function buildStylebookElement(entry, rootStyle, activeBreakpoints, parentTag = null) {
   const el = document.createElement(entry.tag);
   if (entry.text) el.textContent = entry.text;
   if (entry.attributes) {
@@ -344,7 +339,9 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
     }
   }
   if (entry.style) el.style.cssText = entry.style;
-  const tagStyle = rootStyle[`& ${entry.tag}`];
+  const compoundSelector =
+    parentTag && parentTag !== entry.tag ? `& ${parentTag} ${entry.tag}` : null;
+  const tagStyle = (compoundSelector && rootStyle[compoundSelector]) || rootStyle[`& ${entry.tag}`];
   if (tagStyle) {
     for (const [prop, val] of Object.entries(tagStyle)) {
       if (typeof val === "string" || typeof val === "number") {
@@ -372,7 +369,7 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
   }
   if (entry.children) {
     for (const child of entry.children) {
-      el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints));
+      el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints, entry.tag));
     }
   }
   return el;
@@ -429,13 +426,19 @@ function hasTagStyle(rootStyle, tag) {
  * @param {any} customizedOnly
  * @param {any} activeBreakpoints
  */
-function renderStylebookElementsIntoCanvas(
+export function renderStylebookElementsIntoCanvas(
   canvasEl,
   rootStyle,
   filter,
   customizedOnly,
   activeBreakpoints,
 ) {
+  for (const [k, v] of Object.entries(rootStyle)) {
+    if (k.startsWith("--") && (typeof v === "string" || typeof v === "number")) {
+      canvasEl.style.setProperty(k, String(v));
+    }
+  }
+
   /** @type {import("lit-html").TemplateResult[]} */
   const sectionTemplates = [];
 
@@ -462,10 +465,11 @@ function renderStylebookElementsIntoCanvas(
             view.stylebookElToTag.set(card, entry.tag);
             elToPath.set(card, ["__sb", entry.tag]);
             for (const child of el.querySelectorAll("*")) {
-              const tag = child.tagName.toLowerCase();
+              const childTag = child.tagName.toLowerCase();
               if (!view.stylebookElToTag.has(child)) {
-                view.stylebookElToTag.set(child, tag);
-                elToPath.set(child, ["__sb", tag]);
+                const compound = childTag === entry.tag ? entry.tag : `${entry.tag} ${childTag}`;
+                view.stylebookElToTag.set(child, compound);
+                elToPath.set(child, ["__sb", compound]);
               }
             }
           })}
@@ -473,7 +477,10 @@ function renderStylebookElementsIntoCanvas(
           <div
             class="element-card-preview"
             ${ref((c) => {
-              if (c && !c.firstChild) c.appendChild(el);
+              if (c) {
+                c.textContent = "";
+                c.appendChild(el);
+              }
             })}
           ></div>
           <div class="element-card-label">&lt;${entry.tag}&gt;</div>

package/src/settings/{collections-editor.js → content-types-editor.js}

@@ -1,8 +1,8 @@
 /**
- * Collections Editor — visual schema builder for project content collections.
+ * Content Types Editor — visual schema builder for project content types.
  *
- * Renders inside the Settings view "Collections" tab. Two-column layout: left column lists
- * collection names, right column edits the selected collection's schema.
+ * Renders inside the Settings view "Content Types" tab. Two-column layout: left column lists
+ * content type names, right column edits the selected content type's schema.
  */
 
 import { html, render as litRender } from "lit-html";
@@ -13,11 +13,11 @@ import { fieldCardTpl, addFieldFormTpl, schemaForType } from "./schema-field-ui.
 // ─── Module state ─────────────────────────────────────────────────────────────
 
 /** @type {string | null} */
-let selectedCollection = null;
+let selectedContentType = null;
 let showAddField = false;
 let newFieldState = { name: "", type: "string", required: false };
-let showNewCollection = false;
-let newCollectionName = "";
+let showNewContentType = false;
+let newContentTypeName = "";
 
 // ─── Persistence ──────────────────────────────────────────────────────────────
 
@@ -29,17 +29,17 @@ async function saveProjectConfig() {
 
 // ─── Helpers ─────────────────────────────────────────────────────────────────
 
-/** Get the schema object for the selected collection. */
+/** Get the schema object for the selected content type. */
 function getSelectedSchema() {
   const config = projectState?.projectConfig;
-  return config?.collections?.[/** @type {string} */ (selectedCollection)]?.schema;
+  return config?.contentTypes?.[/** @type {string} */ (selectedContentType)]?.schema;
 }
 
 // ─── Handlers ─────────────────────────────────────────────────────────────────
 
 /** @param {() => void} rerender */
-function handleNewCollection(rerender) {
-  const slug = newCollectionName
+function handleNewContentType(rerender) {
+  const slug = newContentTypeName
     .toLowerCase()
     .replace(/\s+/g, "-")
     .replace(/[^a-z0-9-]/g, "");
@@ -47,30 +47,30 @@ function handleNewCollection(rerender) {
 
   const config = projectState?.projectConfig;
   if (!config) return;
-  if (!config.collections) config.collections = {};
-  if (config.collections[slug]) return; // already exists
+  if (!config.contentTypes) config.contentTypes = {};
+  if (config.contentTypes[slug]) return; // already exists
 
-  config.collections[slug] = {
-    source: `./${slug}/**/*.md`,
+  config.contentTypes[slug] = {
+    source: `./content/${slug}/**/*.md`,
     schema: { type: "object", properties: {}, required: [] },
   };
 
-  selectedCollection = slug;
-  showNewCollection = false;
-  newCollectionName = "";
+  selectedContentType = slug;
+  showNewContentType = false;
+  newContentTypeName = "";
   rerender();
 
   // Persist in background
   saveProjectConfig().then(async () => {
     const platform = getPlatform();
-    await platform.writeFile(`${slug}/.gitkeep`, "");
+    await platform.writeFile(`content/${slug}/.gitkeep`, "");
   });
 }
 
 /** @param {() => void} rerender */
 function handleAddField(rerender) {
   const name = newFieldState.name.trim();
-  if (!name || !selectedCollection) return;
+  if (!name || !selectedContentType) return;
 
   const schema = getSelectedSchema();
   if (!schema) return;
@@ -270,13 +270,13 @@ function handleChangeNestedType(parentName, childName, newType, rerender) {
 }
 
 /** @param {() => void} rerender */
-function handleDeleteCollection(rerender) {
-  if (!selectedCollection) return;
+function handleDeleteContentType(rerender) {
+  if (!selectedContentType) return;
   const config = projectState?.projectConfig;
-  if (!config?.collections?.[selectedCollection]) return;
+  if (!config?.contentTypes?.[selectedContentType]) return;
 
-  delete config.collections[selectedCollection];
-  selectedCollection = null;
+  delete config.contentTypes[selectedContentType];
+  selectedContentType = null;
 
   rerender();
   saveProjectConfig();
@@ -285,26 +285,26 @@ function handleDeleteCollection(rerender) {
 // ─── Render ───────────────────────────────────────────────────────────────────
 
 /**
- * Render the collections editor.
+ * Render the content types editor.
  *
  * @param {HTMLElement} container
  */
-export function renderCollectionsEditor(container) {
-  const rerender = () => renderCollectionsEditor(container);
+export function renderContentTypesEditor(container) {
+  const rerender = () => renderContentTypesEditor(container);
   const config = projectState?.projectConfig;
-  const collections = config?.collections || {};
-  const collectionNames = Object.keys(collections);
+  const contentTypes = config?.contentTypes || {};
+  const contentTypeNames = Object.keys(contentTypes);
 
-  // Left column — collection list
+  // Left column — content type list
   const listTpl = html`
     <div class="settings-list-panel">
-      ${collectionNames.map(
+      ${contentTypeNames.map(
         (name) => html`
           <sp-action-button
             size="s"
-            ?selected=${selectedCollection === name}
+            ?selected=${selectedContentType === name}
             @click=${() => {
-              selectedCollection = name;
+              selectedContentType = name;
               showAddField = false;
               rerender();
             }}
@@ -313,25 +313,25 @@ export function renderCollectionsEditor(container) {
           </sp-action-button>
         `,
       )}
-      ${showNewCollection
+      ${showNewContentType
         ? html`
             <div class="settings-inline-form">
               <sp-textfield
                 size="s"
-                placeholder="collection-name"
-                .value=${newCollectionName}
+                placeholder="content-type-name"
+                .value=${newContentTypeName}
                 @input=${(/** @type {any} */ e) => {
-                  newCollectionName = e.target.value;
+                  newContentTypeName = e.target.value;
                 }}
                 @keydown=${(/** @type {any} */ e) => {
-                  if (e.key === "Enter") handleNewCollection(rerender);
+                  if (e.key === "Enter") handleNewContentType(rerender);
                   if (e.key === "Escape") {
-                    showNewCollection = false;
+                    showNewContentType = false;
                     rerender();
                   }
                 }}
               ></sp-textfield>
-              <sp-action-button size="s" @click=${() => handleNewCollection(rerender)}>
+              <sp-action-button size="s" @click=${() => handleNewContentType(rerender)}>
                 Create
               </sp-action-button>
             </div>
@@ -341,11 +341,11 @@ export function renderCollectionsEditor(container) {
               size="s"
               quiet
               @click=${() => {
-                showNewCollection = true;
+                showNewContentType = true;
                 rerender();
               }}
             >
-              <sp-icon-add slot="icon"></sp-icon-add> New Collection
+              <sp-icon-add slot="icon"></sp-icon-add> New Content Type
             </sp-action-button>
           `}
     </div>
@@ -353,10 +353,10 @@ export function renderCollectionsEditor(container) {
 
   // Right column — schema editor
   let editorTpl;
-  if (!selectedCollection || !collections[selectedCollection]) {
-    editorTpl = html`<div class="settings-empty-state">Select or create a collection</div>`;
+  if (!selectedContentType || !contentTypes[selectedContentType]) {
+    editorTpl = html`<div class="settings-empty-state">Select or create a content type</div>`;
   } else {
-    const col = collections[selectedCollection];
+    const col = contentTypes[selectedContentType];
     const schema = col.schema || {};
     const properties = schema.properties || {};
     const required = schema.required || [];
@@ -381,13 +381,13 @@ export function renderCollectionsEditor(container) {
     editorTpl = html`
       <div class="settings-editor-panel">
         <div class="settings-editor-header">
-          <h3>${selectedCollection}</h3>
+          <h3>${selectedContentType}</h3>
           <sp-field-label size="s">Source: ${col.source || "—"}</sp-field-label>
           <sp-action-button
             size="xs"
             quiet
-            title="Delete collection"
-            @click=${() => handleDeleteCollection(rerender)}
+            title="Delete content type"
+            @click=${() => handleDeleteContentType(rerender)}
           >
             <sp-icon-delete slot="icon"></sp-icon-delete>
           </sp-action-button>

package/src/settings/schema-field-ui.js

@@ -1,5 +1,5 @@
 /**
- * Schema field UI — shared field-card and add-field-dialog templates for the collections and
+ * Schema field UI — shared field-card and add-field-dialog templates for the content types and
  * definitions editors.
  */
 

package/src/state.js

@@ -229,7 +229,7 @@ export function createState(doc) {
       stylebookTab: "elements", // "elements" | "variables"
       stylebookFilter: "", // search filter text
       stylebookCustomizedOnly: false, // show only customized elements
-      settingsTab: "stylebook", // "stylebook" | "definitions" | "collections"
+      settingsTab: "stylebook", // "stylebook" | "definitions" | "contentTypes"
       gitStatus: null, // { branch, ahead, behind, files: [] }
       gitBranches: null, // { current, branches: [] }
       gitCommitMessage: "", // commit message input