@jxsuite/studio 0.10.2 → 0.11.0

package/dist/studio.js

@@ -606,7 +606,15 @@ function stripEventHandlers(node) {
       for (const [ck, cv] of Object.entries(v))
         cases[ck] = stripEventHandlers(cv);
       out.cases = cases;
-    } else if (k === "state" || k === "style" || k === "attributes" || k === "$media") {
+    } else if (k === "state" && typeof v === "object" && v !== null) {
+      const state = {};
+      for (const [sk, sv] of Object.entries(v)) {
+        if (sv && typeof sv === "object" && sv.timing === "server")
+          continue;
+        state[sk] = sv;
+      }
+      out.state = state;
+    } else if (k === "style" || k === "attributes" || k === "$media") {
       out[k] = v;
     } else {
       out[k] = v;
@@ -41294,6 +41302,7 @@ var view = {
   stylebookElToTag: new WeakMap,
   showAddBreakpointForm: false,
   addBreakpointPreview: "",
+  layoutSelection: null,
   autosaveTimer: null
 };
 // data/elements-meta.json
@@ -172222,6 +172231,80 @@ function getEffectiveHead(docHead) {
   }
   return merged;
 }
+var layoutCache = new Map;
+function invalidateLayoutCache() {
+  layoutCache.clear();
+}
+function getEffectiveLayoutPath(docLayout) {
+  if (docLayout === false)
+    return null;
+  const defaultLayout = projectState?.projectConfig?.defaults?.layout;
+  return docLayout || defaultLayout || null;
+}
+async function resolveLayoutDoc(layoutPath) {
+  const normalized = layoutPath.replace(/^\.\//, "");
+  if (layoutCache.has(normalized))
+    return structuredClone(layoutCache.get(normalized));
+  try {
+    const platform3 = getPlatform();
+    const content = await platform3.readFile(normalized);
+    const doc = JSON.parse(content);
+    layoutCache.set(normalized, doc);
+    return structuredClone(doc);
+  } catch {
+    return null;
+  }
+}
+function distributePageIntoLayout(layoutDoc, pageDoc) {
+  const pageChildren = pageDoc.children ?? [];
+  const children = typeof pageChildren === "string" ? [pageChildren] : pageChildren;
+  const named = new Map;
+  const defaults = [];
+  for (const child of children) {
+    if (child && typeof child === "object" && child.attributes?.slot) {
+      const slotName = child.attributes.slot;
+      if (!named.has(slotName))
+        named.set(slotName, []);
+      named.get(slotName).push(child);
+    } else {
+      defaults.push(child);
+    }
+  }
+  fillSlots(layoutDoc, named, defaults);
+  if (pageDoc.state)
+    layoutDoc.state = { ...layoutDoc.state, ...pageDoc.state };
+  if (pageDoc.$media)
+    layoutDoc.$media = { ...layoutDoc.$media, ...pageDoc.$media };
+  if (pageDoc.style)
+    layoutDoc.style = { ...layoutDoc.style, ...pageDoc.style };
+  if (pageDoc.attributes)
+    layoutDoc.attributes = { ...layoutDoc.attributes, ...pageDoc.attributes };
+  return layoutDoc;
+}
+function fillSlots(node, named, defaults) {
+  if (!node || typeof node !== "object")
+    return;
+  if (!Array.isArray(node.children))
+    return;
+  const newChildren = [];
+  for (const child of node.children) {
+    if (child && typeof child === "object" && child.tagName === "slot") {
+      const slotName = child.attributes?.name;
+      if (slotName && named.has(slotName)) {
+        newChildren.push(...named.get(slotName));
+        named.delete(slotName);
+      } else if (!slotName && defaults.length > 0) {
+        newChildren.push(...defaults);
+      } else if (child.children) {
+        newChildren.push(...child.children);
+      }
+    } else {
+      fillSlots(child, named, defaults);
+      newChildren.push(child);
+    }
+  }
+  node.children = newChildren;
+}
 async function updateSiteConfig(patch) {
   const platform3 = getPlatform();
   const config = { ...projectState.projectConfig, ...patch };
@@ -173514,6 +173597,10 @@ var SCHEMA_KEYWORDS = new Set([
   "required",
   "examples"
 ]);
+var _serverFnConfig = { skip: false };
+function setSkipServerFunctions(v) {
+  _serverFnConfig.skip = v;
+}
 async function buildScope(doc, parentScope = {}, base = location.href) {
   const raw = {};
   for (const [key, val] of Object.entries(parentScope)) {
@@ -173577,9 +173664,11 @@ async function buildScope(doc, parentScope = {}, base = location.href) {
       state[key] = await resolvePrototype(def3, state, key, base);
     }
   }
-  for (const [key, def3] of Object.entries(defs)) {
-    if (def3 != null && typeof def3 === "object" && def3.timing === "server" && def3.$src && def3.$export && !def3.$prototype) {
-      state[key] = await resolveServerFunction(def3, state, key, base);
+  if (!_serverFnConfig.skip) {
+    for (const [key, def3] of Object.entries(defs)) {
+      if (def3 != null && typeof def3 === "object" && def3.timing === "server" && def3.$src && def3.$export && !def3.$prototype) {
+        state[key] = await resolveServerFunction(def3, state, key, base);
+      }
     }
   }
   if (doc.$media) {
@@ -174607,13 +174696,71 @@ function distributeSlots(host2, slottedChildren) {
 // src/canvas/canvas-live-render.js
 init_components();
 var _ctx5 = null;
+var layoutElements = new WeakSet;
+function findPageContentPrefix(node, path = []) {
+  if (!node || typeof node !== "object")
+    return null;
+  if (Array.isArray(node.children)) {
+    for (let i = 0;i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child && typeof child === "object" && !child.$__layout) {
+        return [...path, "children"];
+      }
+    }
+    for (let i = 0;i < node.children.length; i++) {
+      const child = node.children[i];
+      if (child && typeof child === "object" && child.$__layout) {
+        const found = findPageContentPrefix(child, [...path, "children", i]);
+        if (found)
+          return found;
+      }
+    }
+  }
+  return null;
+}
+var activeLayoutPath = null;
+function markLayoutNodes(node) {
+  if (!node || typeof node !== "object")
+    return;
+  node.$__layout = true;
+  if (Array.isArray(node.children)) {
+    for (const child of node.children)
+      markLayoutNodes(child);
+  }
+  if (node.$elements) {
+    for (const el of node.$elements)
+      markLayoutNodes(el);
+  }
+}
 function initCanvasLiveRender(ctx) {
   _ctx5 = ctx;
 }
 async function renderCanvasLive(gen, doc, canvasEl) {
   const S = _ctx5.getState();
   const canvasMode = _ctx5.getCanvasMode();
-  const renderDoc = canvasMode === "preview" ? structuredClone(doc) : prepareForEditMode(stripEventHandlers(doc));
+  setSkipServerFunctions(canvasMode !== "preview");
+  let renderDoc = canvasMode === "preview" ? structuredClone(doc) : prepareForEditMode(stripEventHandlers(doc));
+  let layoutWrapped = false;
+  activeLayoutPath = null;
+  const isPage = S.documentPath && projectState?.isSiteProject && (S.documentPath.startsWith("pages/") || S.documentPath.startsWith("./pages/"));
+  let pageContentPrefix = null;
+  if (isPage) {
+    const layoutPath = getEffectiveLayoutPath(doc.$layout);
+    if (layoutPath) {
+      const layoutDoc = await resolveLayoutDoc(layoutPath);
+      if (layoutDoc) {
+        if (gen !== view.renderGeneration)
+          return null;
+        activeLayoutPath = layoutPath.replace(/^\.\//, "");
+        markLayoutNodes(layoutDoc);
+        const pageForSlots = canvasMode === "preview" ? structuredClone(doc) : renderDoc;
+        const merged = distributePageIntoLayout(layoutDoc, pageForSlots);
+        renderDoc = canvasMode === "preview" ? merged : prepareForEditMode(stripEventHandlers(merged));
+        layoutWrapped = true;
+        pageContentPrefix = findPageContentPrefix(merged);
+      }
+    }
+  }
   const mapParentPaths = new Set;
   if (canvasMode === "design" || canvasMode === "edit") {
     (function findMapParents(node, path) {
@@ -174757,17 +174904,34 @@ async function renderCanvasLive(gen, doc, canvasEl) {
     if (gen !== view.renderGeneration)
       return null;
     const el = renderNode(renderDoc, $defs, {
-      onNodeCreated(el2, path) {
+      onNodeCreated(el2, path, def3) {
+        if (layoutWrapped && def3?.$__layout) {
+          layoutElements.add(el2);
+          if (el2.setAttribute)
+            el2.setAttribute("data-jx-layout", "");
+          return;
+        }
         let mappedPath = path;
+        if (layoutWrapped && pageContentPrefix) {
+          const pfx = pageContentPrefix;
+          if (path.length >= pfx.length && pfx.every((seg, i) => path[i] === seg)) {
+            mappedPath = ["children", ...path.slice(pfx.length)];
+          }
+        }
         if ((canvasMode === "design" || canvasMode === "edit") && mapParentPaths.size > 0) {
-          for (let i = 0;i < path.length - 1; i++) {
-            if (path[i] === "children" && path[i + 1] === 0) {
-              const parentKey = path.slice(0, i).join("/");
+          for (let i = 0;i < mappedPath.length - 1; i++) {
+            if (mappedPath[i] === "children" && mappedPath[i + 1] === 0) {
+              const parentKey = mappedPath.slice(0, i).join("/");
               if (mapParentPaths.has(parentKey)) {
-                if (path.length === i + 2) {
-                  mappedPath = path.slice(0, i + 1);
-                } else if (path.length >= i + 4 && path[i + 2] === "children" && path[i + 3] === 0) {
-                  mappedPath = [...path.slice(0, i), "children", "map", ...path.slice(i + 4)];
+                if (mappedPath.length === i + 2) {
+                  mappedPath = mappedPath.slice(0, i + 1);
+                } else if (mappedPath.length >= i + 4 && mappedPath[i + 2] === "children" && mappedPath[i + 3] === 0) {
+                  mappedPath = [
+                    ...mappedPath.slice(0, i),
+                    "children",
+                    "map",
+                    ...mappedPath.slice(i + 4)
+                  ];
                 }
                 break;
               }
@@ -176083,12 +176247,35 @@ init_platform();
 init_store();
 
 // src/settings/schema-field-ui.js
-var FIELD_TYPES = ["string", "number", "boolean", "array", "object", "date"];
-function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers) {
-  const type = fieldSchema.format === "date" ? "date" : fieldSchema.type || "string";
+var FIELD_TYPES = [
+  "string",
+  "number",
+  "boolean",
+  "array",
+  "object",
+  "date",
+  "image",
+  "gallery",
+  "reference"
+];
+function detectFieldType(schema) {
+  if (schema.$ref)
+    return "reference";
+  if (schema.format === "image")
+    return "image";
+  if (schema.format === "date")
+    return "date";
+  if (schema.type === "array" && schema.items?.format === "image")
+    return "gallery";
+  return schema.type || "string";
+}
+function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers, contentTypeNames = []) {
+  const type = detectFieldType(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">
@@ -176130,6 +176317,21 @@ function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers) {
           <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))}
@@ -176140,7 +176342,7 @@ function fieldCardTpl(fieldName, fieldSchema, isRequired, handlers) {
   `;
 }
 function nestedFieldCardTpl(parentName, childName, childSchema, isRequired, handlers) {
-  const type = childSchema.format === "date" ? "date" : childSchema.type || "string";
+  const type = detectFieldType(childSchema);
   return html`
     <div class="schema-field-card schema-field-card--nested">
       <div class="schema-field-row">
@@ -176289,6 +176491,12 @@ function schemaForType(type) {
       return { type: "object", properties: {}, required: [] };
     case "date":
       return { type: "string", format: "date" };
+    case "image":
+      return { type: "string", format: "image" };
+    case "gallery":
+      return { type: "array", items: { type: "string", format: "image" } };
+    case "reference":
+      return { $ref: "#/contentTypes/" };
     default:
       return { type: "string" };
   }
@@ -176296,6 +176504,8 @@ function schemaForType(type) {
 function yamlDefault(type, format2) {
   if (format2 === "date")
     return new Date().toISOString().split("T")[0];
+  if (format2 === "image")
+    return '""';
   switch (type) {
     case "boolean":
       return "false";
@@ -176725,6 +176935,14 @@ function handleChangeType2(fieldName, newType, rerender) {
   rerender();
   saveProjectConfig2();
 }
+function handleChangeRefTarget(fieldName, target, rerender) {
+  const schema = getSelectedSchema();
+  if (!schema?.properties)
+    return;
+  schema.properties[fieldName] = { $ref: `#/contentTypes/${target}` };
+  rerender();
+  saveProjectConfig2();
+}
 function handleAddNestedField2(parentName, fieldState, rerender) {
   const schema = getSelectedSchema();
   const parent = schema?.properties?.[parentName];
@@ -176874,13 +177092,14 @@ function renderContentTypesEditor(container) {
       onToggleRequired: (n2) => handleToggleRequired2(n2, rerender),
       onRename: (oldN, newN) => handleRenameField2(oldN, newN, rerender),
       onChangeType: (n2, t) => handleChangeType2(n2, t, rerender),
+      onChangeRefTarget: (n2, target) => handleChangeRefTarget(n2, target, rerender),
       onAddNestedField: (p, s) => handleAddNestedField2(p, s, 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)
     };
-    const fieldCards = Object.entries(properties).map(([name, def3]) => fieldCardTpl(name, def3, required.includes(name), handlers));
+    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">
@@ -177378,6 +177597,28 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints, parentTag =
       }
     }
   }
+  if (activeBreakpoints) {
+    const selector = compoundSelector || `& ${entry.tag}`;
+    for (const [key, val] of Object.entries(rootStyle)) {
+      if (!key.startsWith("@") || typeof val !== "object")
+        continue;
+      const mediaName = key.slice(1);
+      if (mediaName === "--")
+        continue;
+      if (activeBreakpoints.has(mediaName)) {
+        const mediaTagStyle = val[selector];
+        if (mediaTagStyle && typeof mediaTagStyle === "object") {
+          for (const [prop, v] of Object.entries(mediaTagStyle)) {
+            if (typeof v === "string" || typeof v === "number") {
+              try {
+                el.style[prop] = v;
+              } catch {}
+            }
+          }
+        }
+      }
+    }
+  }
   if (entry.children) {
     for (const child of entry.children) {
       el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints, entry.tag));
@@ -177386,6 +177627,7 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints, parentTag =
   return el;
 }
 async function renderComponentPreview(comp) {
+  setSkipServerFunctions(true);
   try {
     if (comp.source === "npm") {
       if (!customElements.get(comp.tagName)) {
@@ -177414,7 +177656,16 @@ async function renderComponentPreview(comp) {
 }
 function hasTagStyle(rootStyle, tag3) {
   const s = rootStyle[`& ${tag3}`];
-  return s && typeof s === "object" && Object.keys(s).length > 0;
+  if (s && typeof s === "object" && Object.keys(s).length > 0)
+    return true;
+  const selector = `& ${tag3}`;
+  for (const [key, val] of Object.entries(rootStyle)) {
+    if (!key.startsWith("@") || typeof val !== "object")
+      continue;
+    if (val[selector])
+      return true;
+  }
+  return false;
 }
 function renderStylebookElementsIntoCanvas(canvasEl, rootStyle, filter, customizedOnly, activeBreakpoints) {
   for (const [k, v] of Object.entries(rootStyle)) {
@@ -178205,11 +178456,13 @@ function applyDropInstruction(instruction, srcData, targetPath) {
 }
 
 // src/panels/canvas-dnd.js
+var _activeDropEl = null;
 function registerPanelDnD(panel) {
   const { canvas, dropLine } = panel;
   const allEls = canvas.querySelectorAll("*");
   const monitorCleanup = monitorForElements({
-    onDragStart() {
+    onDragStart({ location: location2 }) {
+      view.lastDragInput = location2.current.input;
       for (const el of canvas.querySelectorAll("*")) {
         el.style.pointerEvents = "auto";
       }
@@ -178220,6 +178473,8 @@ function registerPanelDnD(panel) {
       view.lastDragInput = location2.current.input;
     },
     onDrop() {
+      _activeDropEl?.classList.remove("canvas-drop-target");
+      _activeDropEl = null;
       for (const p of canvasPanels)
         p.dropLine.style.display = "none";
       view.lastDragInput = null;
@@ -178237,7 +178492,9 @@ function registerPanelDnD(panel) {
     if (!elPath)
       continue;
     const node = getNodeAtPath(S.document, elPath);
-    const isVoid = VOID_ELEMENTS.has((node?.tagName || "div").toLowerCase());
+    const tag3 = (node?.tagName || "div").toLowerCase();
+    const hasElementChildren = node?.children?.some((c) => c != null && typeof c === "object");
+    const isLeaf2 = VOID_ELEMENTS.has(tag3) || !hasElementChildren;
     const cleanup = dropTargetForElements({
       element: el,
       canDrop({ source }) {
@@ -178247,75 +178504,101 @@ function registerPanelDnD(panel) {
         return true;
       },
       getData() {
-        return { path: elPath, _isVoid: isVoid };
+        return { path: elPath, _isVoid: isLeaf2 };
       },
-      onDragEnter() {
-        showCanvasDropIndicator(el, elPath, isVoid, panel);
-      },
-      onDrag() {
-        showCanvasDropIndicator(el, elPath, isVoid, panel);
+      onDragEnter({ location: location2 }) {
+        view.lastDragInput = location2.current.input;
+        if (_activeDropEl && _activeDropEl !== el) {
+          _activeDropEl.classList.remove("canvas-drop-target");
+        }
+        _activeDropEl = el;
+        showCanvasDropIndicator(el, elPath, isLeaf2, panel);
       },
-      onDragLeave() {
-        dropLine.style.display = "none";
-        el.classList.remove("canvas-drop-target");
+      onDrag({ location: location2 }) {
+        view.lastDragInput = location2.current.input;
+        showCanvasDropIndicator(el, elPath, isLeaf2, panel);
       },
+      onDragLeave() {},
       onDrop({ source }) {
         dropLine.style.display = "none";
         el.classList.remove("canvas-drop-target");
-        const instruction = getCanvasDropInstruction(el, elPath, isVoid);
-        if (!instruction)
-          return;
-        applyDropInstruction(instruction, source.data, elPath);
+        _activeDropEl = null;
+        const { instruction, targetPath } = getCanvasDropResult(el, elPath, isLeaf2);
+        applyDropInstruction(instruction, source.data, targetPath);
       }
     });
     view.canvasDndCleanups.push(cleanup);
   }
 }
-function getCanvasDropInstruction(el, elPath, isVoid) {
-  const rect = el.getBoundingClientRect();
+function getCanvasDropResult(el, elPath, isLeaf2) {
   if (!view.lastDragInput)
-    return null;
+    return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
   const y = view.lastDragInput.clientY;
+  if (elPath.length === 0) {
+    const children = Array.from(el.children);
+    if (children.length === 0)
+      return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
+    return nearestChildEdge(children, y, elPath);
+  }
+  const rect = el.getBoundingClientRect();
   const relY = (y - rect.top) / rect.height;
-  if (elPath.length === 0)
-    return { type: "make-child" };
-  if (isVoid)
-    return relY < 0.5 ? { type: "reorder-above" } : { type: "reorder-below" };
+  if (isLeaf2) {
+    const instruction = relY < 0.5 ? { type: "reorder-above" } : { type: "reorder-below" };
+    return { instruction, referenceEl: el, targetPath: elPath };
+  }
   if (relY < 0.25)
-    return { type: "reorder-above" };
+    return { instruction: { type: "reorder-above" }, referenceEl: el, targetPath: elPath };
   if (relY > 0.75)
-    return { type: "reorder-below" };
-  return { type: "make-child" };
+    return { instruction: { type: "reorder-below" }, referenceEl: el, targetPath: elPath };
+  return { instruction: { type: "make-child" }, referenceEl: el, targetPath: elPath };
 }
-function showCanvasDropIndicator(el, elPath, isVoid, panel) {
-  const instruction = getCanvasDropInstruction(el, elPath, isVoid);
-  const { dropLine, viewport } = panel;
-  if (!instruction) {
-    dropLine.style.display = "none";
-    return;
+function nearestChildEdge(children, cursorY, parentPath) {
+  let closestDist = Infinity;
+  let instruction = { type: "reorder-below" };
+  let closestIdx = children.length - 1;
+  for (let i = 0;i < children.length; i++) {
+    const rect = children[i].getBoundingClientRect();
+    const topDist = Math.abs(cursorY - rect.top);
+    const bottomDist = Math.abs(cursorY - rect.bottom);
+    if (topDist < closestDist) {
+      closestDist = topDist;
+      instruction = { type: "reorder-above" };
+      closestIdx = i;
+    }
+    if (bottomDist < closestDist) {
+      closestDist = bottomDist;
+      instruction = { type: "reorder-below" };
+      closestIdx = i;
+    }
   }
+  const childPath = [...parentPath, "children", closestIdx];
+  return { instruction, referenceEl: children[closestIdx], targetPath: childPath };
+}
+function showCanvasDropIndicator(el, elPath, isLeaf2, panel) {
+  const { instruction, referenceEl } = getCanvasDropResult(el, elPath, isLeaf2);
+  const { dropLine, viewport } = panel;
   const scale = effectiveZoom();
   const wrapRect = viewport.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-  const left = (elRect.left - wrapRect.left + viewport.scrollLeft) / scale;
-  const width2 = elRect.width / scale;
+  const refRect = referenceEl.getBoundingClientRect();
+  const left = (refRect.left - wrapRect.left + viewport.scrollLeft) / scale;
+  const width2 = refRect.width / scale;
   if (instruction.type === "make-child") {
     dropLine.style.display = "block";
-    dropLine.style.top = `${(elRect.top - wrapRect.top + viewport.scrollTop) / scale}px`;
+    dropLine.style.top = `${(refRect.top - wrapRect.top + viewport.scrollTop) / scale}px`;
     dropLine.style.left = `${left}px`;
     dropLine.style.width = `${width2}px`;
-    dropLine.style.height = `${elRect.height / scale}px`;
+    dropLine.style.height = `${refRect.height / scale}px`;
     dropLine.className = "canvas-drop-indicator inside";
     el.classList.add("canvas-drop-target");
     return;
   }
   el.classList.remove("canvas-drop-target");
-  const top = instruction.type === "reorder-above" ? (elRect.top - wrapRect.top + viewport.scrollTop) / scale : (elRect.bottom - wrapRect.top + viewport.scrollTop) / scale;
+  const top = instruction.type === "reorder-above" ? (refRect.top - wrapRect.top + viewport.scrollTop) / scale : (refRect.bottom - wrapRect.top + viewport.scrollTop) / scale;
   dropLine.style.display = "block";
   dropLine.style.top = `${top}px`;
   dropLine.style.left = `${left}px`;
   dropLine.style.width = `${width2}px`;
-  dropLine.style.height = "2px";
+  dropLine.style.height = "";
   dropLine.className = "canvas-drop-indicator line";
 }
 
@@ -178675,6 +178958,13 @@ function registerPanelEvents(panel) {
     const elements = withPanelPointerEvents(() => document.elementsFromPoint(e.clientX, e.clientY));
     for (const el of elements) {
       if (canvas.contains(el) && el !== canvas) {
+        if (layoutElements.has(el)) {
+          view.layoutSelection = { el, layoutPath: activeLayoutPath };
+          update(selectNode(S, null));
+          renderOnly("rightPanel");
+          return;
+        }
+        view.layoutSelection = null;
         const originalPath = elToPath.get(el);
         if (originalPath) {
           let path = bubbleInlinePath(S.document, originalPath);
@@ -179058,11 +179348,13 @@ async function collectFiles(dir, platform3) {
         results.push(...sub);
       } else {
         const ext = extOf(entry.name);
+        const category = categoryFor(entry.path, ext);
+        const type = category === "Content" ? contentTypeFor(entry.path) || ext || "file" : ext || "file";
         results.push({
           name: entry.name,
           path: entry.path,
-          type: ext || "file",
-          category: categoryFor(entry.path, ext),
+          type,
+          category,
           ext
         });
       }
@@ -179070,6 +179362,21 @@ async function collectFiles(dir, platform3) {
   } catch {}
   return results;
 }
+function contentTypeFor(filePath) {
+  const config = projectState?.projectConfig;
+  if (!config?.contentTypes)
+    return null;
+  for (const [name, def3] of Object.entries(config.contentTypes)) {
+    const d2 = def3;
+    if (!d2.source)
+      continue;
+    const prefix = d2.source.replace(/^\.\//, "").split("/**")[0].split("/*")[0];
+    if (filePath.startsWith(prefix + "/") || filePath === prefix) {
+      return name.charAt(0).toUpperCase() + name.slice(1);
+    }
+  }
+  return null;
+}
 async function loadFiles() {
   if (!projectState)
     return;
@@ -179273,7 +179580,7 @@ async function renderBrowse(container, ctx) {
                 >
                   <sp-table-cell class="browse-name-cell">${f.name}</sp-table-cell>
                   <sp-table-cell>${f.category}</sp-table-cell>
-                  <sp-table-cell>${f.ext || "—"}</sp-table-cell>
+                  <sp-table-cell>${f.type}</sp-table-cell>
                   <sp-table-cell class="browse-path-cell">${f.path}</sp-table-cell>
                 </sp-table-row>
               `)}
@@ -179501,8 +179808,12 @@ function render4() {
     const boxes = [];
     if (S.hover && !pathsEqual(S.hover, S.selection)) {
       const el = findCanvasElement(S.hover, p.canvas);
-      if (el)
-        boxes.push(overlayBoxDescriptor(el, "hover", p));
+      if (el) {
+        const desc = overlayBoxDescriptor(el, "hover", p);
+        if (layoutElements.has(el))
+          desc.isLayout = true;
+        boxes.push(desc);
+      }
     }
     if (S.selection && p === getActivePanel()) {
       const el = findCanvasElement(S.selection, p.canvas);
@@ -179510,6 +179821,8 @@ function render4() {
         const desc = overlayBoxDescriptor(el, "selection", p);
         if (view.componentInlineEdit || _ctx9.isEditing())
           desc.border = "none";
+        if (layoutElements.has(el))
+          desc.isLayout = true;
         boxes.push(desc);
       }
     }
@@ -179517,9 +179830,11 @@ function render4() {
         ${p.dropLine}
         ${boxes.map((b) => html`
             <div
-              class=${b.cls}
+              class="${b.cls}${b.isLayout ? " overlay-layout" : ""}"
               style="top:${b.top};left:${b.left};width:${b.width};height:${b.height}${b.border ? `;border:${b.border}` : ""}"
-            ></div>
+            >
+              ${b.isLayout ? html`<span class="overlay-layout-badge">Layout</span>` : nothing}
+            </div>
           `)}
       `, p.overlay);
   }
@@ -179665,10 +179980,11 @@ function renderCanvas() {
       canvasWrap.style.overflow = "hidden";
       resetZoomIndicator();
     }
+    const { baseWidth: baseWidth2 } = parseMediaEntries(getEffectiveMedia(S.document.$media));
     const { tpl: panelTpl, panel } = canvasPanelTemplate(null, null, true);
     const editTpl = html`
       <div class="content-edit-canvas">
-        <div class="content-edit-column">${panelTpl}</div>
+        <div class="content-edit-column" style="max-width:${baseWidth2}px">${panelTpl}</div>
       </div>
     `;
     render2(editTpl, canvasWrap);
@@ -204783,6 +205099,316 @@ __decorateClass53([
   property({ type: String })
 ], ActionBar2.prototype, "variant", 1);
 
+// ../../node_modules/@spectrum-web-components/toast/src/Toast.dev.js
+init_index_dev();
+init_decorators_dev();
+init_focus_visible_dev();
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/elements/IconInfo.js
+init_index_dev();
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/icons/Info.js
+var InfoIcon = ({ width: a5 = 24, height: t12 = 24, hidden: e17 = false, title: r8 = "Info" } = {}) => tag6`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    height="${t12}"
+    viewBox="0 0 36 36"
+    width="${a5}"
+    aria-hidden=${e17 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${r8}"
+  >
+    <path
+      d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm-.3 4.3a2.718 2.718 0 0 1 2.864 2.824 2.664 2.664 0 0 1-2.864 2.863 2.705 2.705 0 0 1-2.864-2.864A2.717 2.717 0 0 1 17.7 6.3ZM22 27a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h1v-6h-1a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v9h1a1 1 0 0 1 1 1Z"
+    />
+  </svg>`;
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/InfoCircle.js
+var InfoCircleIcon = ({ width: r8 = 24, height: t12 = 24, hidden: e17 = false, title: l = "Info Circle" } = {}) => tag6`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${r8}"
+    height="${t12}"
+    viewBox="0 0 20 20"
+    aria-hidden=${e17 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${l}"
+  >
+    <path
+      d="m10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75Zm0-16c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z"
+      fill="currentColor"
+    />
+    <path
+      d="m10.00064,5.26036c.23065-.00813.45538.07387.62661.22862.33033.36505.33033.92102,0,1.28607-.16935.15851-.39483.24308-.62664.23504-.23635.00948-.46589-.08035-.63302-.24775-.16207-.1679-.24916-.39432-.24137-.62755-.01238-.23497.06959-.46515.2277-.6394.17358-.16474.40786-.24988.64671-.23503Z"
+      fill="currentColor"
+    />
+    <path
+      d="m10,15.0625c-.41406,0-.75-.33594-.75-.75v-4.83496c0-.41406.33594-.75.75-.75s.75.33594.75.75v4.83496c0,.41406-.33594.75-.75.75Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/elements/IconInfo.js
+class IconInfo extends IconBase {
+  render() {
+    return setCustomTemplateLiteralTag2(html8), this.spectrumVersion === 1 ? InfoIcon({ hidden: !this.label, title: this.label }) : InfoCircleIcon({ hidden: !this.label, title: this.label });
+  }
+}
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-info.js
+defineElement2("sp-icon-info", IconInfo);
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/elements/IconCheckmarkCircle.js
+init_index_dev();
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/icons-s2/CheckmarkCircle.js
+var CheckmarkCircleIcon = ({ width: e17 = 24, height: l = 24, hidden: r8 = false, title: t12 = "Checkmark Circle" } = {}) => tag6`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${e17}"
+    height="${l}"
+    viewBox="0 0 20 20"
+    aria-hidden=${r8 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${t12}"
+  >
+    <path
+      d="M10,18.75c-4.8252,0-8.75-3.9248-8.75-8.75S5.1748,1.25,10,1.25s8.75,3.9248,8.75,8.75-3.9248,8.75-8.75,8.75ZM10,2.75c-3.99805,0-7.25,3.25195-7.25,7.25s3.25195,7.25,7.25,7.25,7.25-3.25195,7.25-7.25-3.25195-7.25-7.25-7.25Z"
+      fill="currentColor"
+    />
+    <path
+      d="M9.22266,13.5c-.21191,0-.41504-.08984-.55762-.24805l-2.51074-2.79199c-.27734-.30859-.25195-.78223.05566-1.05957s.78125-.25195,1.05957.05566l1.89355,2.10645,3.4873-4.75586c.24316-.33398.71094-.40918,1.04785-.16113.33398.24414.40625.71387.16113,1.04785l-4.03223,5.5c-.13281.18262-.3418.29492-.56738.30566-.01172.00098-.02441.00098-.03711.00098Z"
+      fill="currentColor"
+    />
+  </svg>`;
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/icons/CheckmarkCircle.js
+var CheckmarkCircleIcon2 = ({ width: e17 = 24, height: a5 = 24, hidden: t12 = false, title: l = "Checkmark Circle" } = {}) => tag6`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="${e17}"
+    height="${a5}"
+    viewBox="0 0 36 36"
+    aria-hidden=${t12 ? "true" : "false"}
+    role="img"
+    fill="currentColor"
+    aria-label="${l}"
+  >
+    <path
+      d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2Zm10.666 9.08L16.018 27.341a1.208 1.208 0 0 1-.875.461c-.024.002-.05.002-.073.002a1.2 1.2 0 0 1-.85-.351l-7.784-7.795a1.2 1.2 0 0 1 0-1.698l1.326-1.325a1.201 1.201 0 0 1 1.695 0l5.346 5.347L25.314 8.473A1.203 1.203 0 0 1 27 8.263l1.455 1.133a1.205 1.205 0 0 1 .211 1.684Z"
+    />
+  </svg>`;
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/src/elements/IconCheckmarkCircle.js
+class IconCheckmarkCircle extends IconBase {
+  render() {
+    return setCustomTemplateLiteralTag2(html8), this.spectrumVersion === 2 ? CheckmarkCircleIcon({ hidden: !this.label, title: this.label }) : CheckmarkCircleIcon2({ hidden: !this.label, title: this.label });
+  }
+}
+
+// ../../node_modules/@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js
+defineElement2("sp-icon-checkmark-circle", IconCheckmarkCircle);
+
+// ../../node_modules/@spectrum-web-components/toast/src/toast.css.js
+init_index_dev();
+var o16 = css`
+    :host{--spectrum-toast-font-weight:var(--spectrum-regular-font-weight);--spectrum-toast-font-size:var(--spectrum-font-size-100);--spectrum-toast-corner-radius:var(--spectrum-corner-radius-100);--spectrum-toast-block-size:var(--spectrum-toast-height);--spectrum-toast-max-inline-size:var(--spectrum-toast-maximum-width);--spectrum-toast-border-width:var(--spectrum-border-width-100);--spectrum-toast-line-height:var(--spectrum-line-height-100);--spectrum-toast-line-height-cjk:var(--spectrum-cjk-line-height-100);--spectrum-toast-spacing-icon-to-text:var(--spectrum-text-to-visual-100);--spectrum-toast-spacing-start-edge-to-text-and-icon:var(--spectrum-spacing-300);--spectrum-toast-spacing-text-and-action-button-to-divider:var(--spectrum-spacing-300);--spectrum-toast-spacing-top-edge-to-divider:var(--spectrum-spacing-100);--spectrum-toast-spacing-bottom-edge-to-divider:var(--spectrum-spacing-100);--spectrum-toast-spacing-top-edge-to-icon:var(--spectrum-toast-top-to-workflow-icon);--spectrum-toast-spacing-text-to-action-button-horizontal:var(--spectrum-spacing-300);--spectrum-toast-spacing-close-button:var(--spectrum-spacing-100);--spectrum-toast-spacing-block-start:var(--spectrum-spacing-100);--spectrum-toast-spacing-block-end:var(--spectrum-spacing-100);--spectrum-toast-spacing-top-edge-to-text:var(--spectrum-toast-top-to-text);--spectrum-toast-spacing-bottom-edge-to-text:var(--spectrum-toast-bottom-to-text);--spectrum-toast-negative-background-color-default:var(--spectrum-negative-background-color-default);--spectrum-toast-positive-background-color-default:var(--spectrum-positive-background-color-default);--spectrum-toast-informative-background-color-default:var(--spectrum-informative-background-color-default);--spectrum-toast-text-and-icon-color:var(--spectrum-white)}@media (forced-colors:active){:host{--highcontrast-toast-border-color:ButtonText;border:var(--mod-toast-border-width,var(--spectrum-toast-border-width))solid var(--highcontrast-toast-border-color,transparent)}}:host{-webkit-font-smoothing:antialiased;box-sizing:border-box;max-inline-size:var(--mod-toast-max-inline-size,var(--spectrum-toast-max-inline-size));min-block-size:var(--mod-toast-block-size,var(--spectrum-toast-block-size));font-size:var(--mod-toast-font-size,var(--spectrum-toast-font-size));font-weight:var(--mod-toast-font-weight,var(--spectrum-toast-font-weight));color:var(--mod-toast-background-color-default,var(--spectrum-toast-background-color-default));overflow-wrap:anywhere;background-color:var(--mod-toast-background-color-default,var(--spectrum-toast-background-color-default));border-radius:var(--mod-toast-corner-radius,var(--spectrum-toast-corner-radius));flex-direction:row;align-items:stretch;padding-inline-start:var(--mod-toast-spacing-start-edge-to-text-and-icon,var(--spectrum-toast-spacing-start-edge-to-text-and-icon));display:inline-flex}:host([variant=negative]){background-color:var(--mod-toast-negative-background-color-default,var(--spectrum-toast-negative-background-color-default))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active){color:var(--mod-toast-negative-background-color-default,var(--spectrum-toast-negative-background-color-default))}:host([variant=info]){background-color:var(--mod-toast-informative-background-color-default,var(--spectrum-toast-informative-background-color-default))}:host([variant=info]),:host([variant=info]) .closeButton:focus-visible:not(:active){color:var(--mod-toast-informative-background-color-default,var(--spectrum-toast-informative-background-color-default))}:host([variant=positive]){background-color:var(--mod-toast-positive-background-color-default,var(--spectrum-toast-positive-background-color-default))}:host([variant=positive]),:host([variant=positive]) .closeButton:focus-visible:not(:active){color:var(--mod-toast-positive-background-color-default,var(--spectrum-toast-positive-background-color-default))}.type{flex-grow:0;flex-shrink:0;margin-block-start:var(--mod-toast-spacing-top-edge-to-icon,var(--spectrum-toast-spacing-top-edge-to-icon));margin-inline-start:0;margin-inline-end:var(--mod-toast-spacing-icon-to-text,var(--spectrum-toast-spacing-icon-to-text))}.content,.type{color:var(--mod-toast-text-and-icon-color,var(--spectrum-toast-text-and-icon-color))}.content{box-sizing:border-box;line-height:var(--mod-toast-line-height,var(--spectrum-toast-line-height));text-align:start;flex:auto;padding-block-start:calc(var(--mod-toast-spacing-top-edge-to-text,var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start,var(--spectrum-toast-spacing-block-start)));padding-block-end:calc(var(--mod-toast-spacing-bottom-edge-to-text,var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end,var(--spectrum-toast-spacing-block-end)));padding-inline-start:0;padding-inline-end:var(--mod-toast-spacing-text-to-action-button-horizontal,var(--spectrum-toast-spacing-text-to-action-button-horizontal));display:inline-block}.content:lang(ja),.content:lang(ko),.content:lang(zh){line-height:var(--mod-toast-line-height-cjk,var(--spectrum-toast-line-height-cjk))}.buttons{border-inline-start-color:var(--mod-toast-divider-color,var(--spectrum-toast-divider-color));flex:none;align-items:flex-start;margin-block-start:var(--mod-toast-spacing-top-edge-to-divider,var(--spectrum-toast-spacing-top-edge-to-divider));margin-block-end:var(--mod-toast-spacing-bottom-edge-to-divider,var(--spectrum-toast-spacing-bottom-edge-to-divider));padding-inline-end:var(--mod-toast-spacing-close-button,var(--spectrum-toast-spacing-close-button));display:flex}.buttons .spectrum-CloseButton{align-self:flex-start}.body{flex-wrap:wrap;flex:auto;align-self:center;align-items:center;padding-block-start:var(--mod-toast-spacing-block-start,var(--spectrum-toast-spacing-block-start));padding-block-end:var(--mod-toast-spacing-block-end,var(--spectrum-toast-spacing-block-end));display:flex}.body ::slotted([slot=action]){margin-inline-start:auto;margin-inline-end:var(--mod-toast-spacing-text-and-action-button-to-divider,var(--spectrum-toast-spacing-text-and-action-button-to-divider))}.body ::slotted([slot=action]:dir(rtl)){margin-inline-end:var(--mod-toast-spacing-text-and-action-button-to-divider,var(--spectrum-toast-spacing-text-and-action-button-to-divider))}.body+.buttons{border-inline-start-style:solid;border-inline-start-width:1px;padding-inline-start:var(--mod-toast-spacing-close-button,var(--spectrum-toast-spacing-close-button))}:host{--spectrum-toast-background-color-default:var(--system-toast-background-color-default);--spectrum-toast-divider-color:var(--system-toast-divider-color)}:host{--spectrum-overlay-animation-distance:var(--spectrum-spacing-100);--spectrum-overlay-animation-duration:var(--spectrum-animation-duration-100);visibility:hidden;pointer-events:none;opacity:0;transition:transform var(--spectrum-overlay-animation-duration)ease-in-out,opacity var(--spectrum-overlay-animation-duration)ease-in-out,visibility 0s linear var(--spectrum-overlay-animation-duration)}:host([open]){visibility:visible;pointer-events:auto;opacity:1;transition-delay:0s}:host([variant=error]),:host([variant=warning]){background-color:var(--highcontrast-toast-negative-background-color-default,var(--mod-toast-negative-background-color-default,var(--spectrum-toast-negative-background-color-default)))}:host([variant=negative]),:host([variant=negative]) .closeButton:focus-visible:not(:active),:host([variant=warning]),:host([variant=warning]) .closeButton:focus-visible:not(:active){color:var(--highcontrast-toast-negative-background-color-default,var(--mod-toast-negative-background-color-default,var(--spectrum-toast-negative-background-color-default)))}
+`;
+var toast_css_default = o16;
+
+// ../../node_modules/@spectrum-web-components/toast/src/Toast.dev.js
+var __defProp55 = Object.defineProperty;
+var __getOwnPropDesc55 = Object.getOwnPropertyDescriptor;
+var __decorateClass54 = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc55(target, key) : target;
+  for (var i6 = decorators2.length - 1, decorator;i6 >= 0; i6--)
+    if (decorator = decorators2[i6])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp55(target, key, result);
+  return result;
+};
+var toastVariants = [
+  "negative",
+  "positive",
+  "info",
+  "error",
+  "warning"
+];
+
+class Toast extends FocusVisiblePolyfillMixin(SpectrumElement) {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this._timeout = null;
+    this._variant = "";
+    this.countdownStart = 0;
+    this.nextCount = -1;
+    this.doCountdown = (time) => {
+      if (!this.countdownStart) {
+        this.countdownStart = performance.now();
+      }
+      if (time - this.countdownStart > this._timeout) {
+        this.shouldClose();
+        this.countdownStart = 0;
+      } else {
+        this.countdown();
+      }
+    };
+    this.countdown = () => {
+      cancelAnimationFrame(this.nextCount);
+      this.nextCount = requestAnimationFrame(this.doCountdown);
+    };
+    this.holdCountdown = () => {
+      this.stopCountdown();
+      this.addEventListener("focusout", this.resumeCountdown);
+    };
+    this.resumeCountdown = () => {
+      this.removeEventListener("focusout", this.holdCountdown);
+      this.countdown();
+    };
+  }
+  static get styles() {
+    return [toast_css_default];
+  }
+  set timeout(timeout2) {
+    const hasTimeout = timeout2 !== null && timeout2 > 0;
+    const newTimeout = hasTimeout ? Math.max(6000, timeout2) : null;
+    const oldValue = this.timeout;
+    if (newTimeout && this.countdownStart) {
+      this.countdownStart = performance.now();
+    }
+    this._timeout = newTimeout;
+    this.requestUpdate("timeout", oldValue);
+  }
+  get timeout() {
+    return this._timeout;
+  }
+  set variant(variant) {
+    if (variant === this.variant) {
+      return;
+    }
+    const oldValue = this.variant;
+    if (toastVariants.includes(variant)) {
+      this.setAttribute("variant", variant);
+      this._variant = variant;
+    } else {
+      this.removeAttribute("variant");
+      this._variant = "";
+    }
+    this.requestUpdate("variant", oldValue);
+  }
+  get variant() {
+    return this._variant;
+  }
+  renderIcon(variant, iconLabel) {
+    switch (variant) {
+      case "info":
+        return html8`
+          <sp-icon-info
+            label=${iconLabel || "Information"}
+            class="type"
+          ></sp-icon-info>
+        `;
+      case "negative":
+      case "error":
+        return html8`
+          <sp-icon-alert
+            label=${iconLabel || "Error"}
+            class="type"
+          ></sp-icon-alert>
+        `;
+      case "warning":
+        return html8`
+          <sp-icon-alert
+            label=${iconLabel || "Warning"}
+            class="type"
+          ></sp-icon-alert>
+        `;
+      case "positive":
+        return html8`
+          <sp-icon-checkmark-circle
+            label=${iconLabel || "Success"}
+            class="type"
+          ></sp-icon-checkmark-circle>
+        `;
+      default:
+        return html8``;
+    }
+  }
+  startCountdown() {
+    this.countdown();
+    this.addEventListener("focusin", this.holdCountdown);
+  }
+  stopCountdown() {
+    cancelAnimationFrame(this.nextCount);
+    this.countdownStart = 0;
+  }
+  shouldClose() {
+    const applyDefault = this.dispatchEvent(new CustomEvent("close", {
+      composed: true,
+      bubbles: true,
+      cancelable: true
+    }));
+    if (applyDefault) {
+      this.close();
+    }
+  }
+  close() {
+    this.open = false;
+  }
+  render() {
+    return html8`
+      ${this.renderIcon(this.variant, this.iconLabel)}
+      <div class="body" role="alert">
+        <div class="content">
+          <slot></slot>
+        </div>
+        <slot name="action"></slot>
+      </div>
+      <div class="buttons">
+        <sp-close-button
+          @click=${this.shouldClose}
+          label="Close"
+          static-color="white"
+        ></sp-close-button>
+      </div>
+    `;
+  }
+  updated(changes) {
+    super.updated(changes);
+    if (changes.has("open")) {
+      if (this.open) {
+        if (this.timeout) {
+          this.startCountdown();
+        }
+      } else {
+        if (this.timeout) {
+          this.stopCountdown();
+        }
+      }
+    }
+    if (changes.has("timeout")) {
+      if (this.timeout !== null && this.open) {
+        this.startCountdown();
+      } else {
+        this.stopCountdown();
+      }
+    }
+  }
+}
+__decorateClass54([
+  property({ type: Boolean, reflect: true })
+], Toast.prototype, "open", 2);
+__decorateClass54([
+  property({ type: Number })
+], Toast.prototype, "timeout", 1);
+__decorateClass54([
+  property({ type: String })
+], Toast.prototype, "variant", 1);
+__decorateClass54([
+  property({ type: String, attribute: "icon-label" })
+], Toast.prototype, "iconLabel", 2);
+
 // ../../node_modules/@lit-labs/virtualizer/events.js
 class RangeChangedEvent extends Event {
   constructor(range3) {
@@ -205618,21 +206244,21 @@ init_decorators_dev();
 
 // ../../node_modules/@spectrum-web-components/table/src/table-body.css.js
 init_index_dev();
-var o16 = css`
+var o17 = css`
     :host{border-radius:var(--mod-table-border-radius,var(--spectrum-table-border-radius));border:none;display:table-row-group;position:relative}:host([drop-target]){--mod-table-border-color:transparent;outline-width:var(--mod-table-focus-indicator-thickness,var(--spectrum-table-focus-indicator-thickness));outline-style:solid;outline-color:var(--highcontrast-table-focus-indicator-color,var(--mod-table-drop-zone-outline-color,var(--spectrum-table-drop-zone-outline-color)))}:host{border-block:var(--mod-table-border-width,var(--spectrum-table-border-width))solid var(--highcontrast-table-border-color,var(--mod-table-border-color,var(--spectrum-table-border-color)));border-inline:var(--mod-table-outer-border-inline-width,var(--spectrum-table-outer-border-inline-width))solid var(--highcontrast-table-border-color,var(--mod-table-border-color,var(--spectrum-table-border-color)));border-radius:var(--mod-table-border-radius,var(--spectrum-table-border-radius));flex-grow:1;display:block;overflow:auto}:host(:not([tabindex])){overflow:visible}
 `;
-var table_body_css_default = o16;
+var table_body_css_default = o17;
 
 // ../../node_modules/@spectrum-web-components/table/src/TableBody.dev.js
-var __defProp55 = Object.defineProperty;
-var __getOwnPropDesc55 = Object.getOwnPropertyDescriptor;
-var __decorateClass54 = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc55(target, key) : target;
+var __defProp56 = Object.defineProperty;
+var __getOwnPropDesc56 = Object.getOwnPropertyDescriptor;
+var __decorateClass55 = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc56(target, key) : target;
   for (var i6 = decorators2.length - 1, decorator;i6 >= 0; i6--)
     if (decorator = decorators2[i6])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp55(target, key, result);
+    __defProp56(target, key, result);
   return result;
 };
 
@@ -205668,7 +206294,7 @@ class TableBody extends SpectrumElement {
     `;
   }
 }
-__decorateClass54([
+__decorateClass55([
   property({ reflect: true })
 ], TableBody.prototype, "role", 2);
 
@@ -205689,15 +206315,15 @@ var t12 = css`
 var table_checkbox_cell_css_default = t12;
 
 // ../../node_modules/@spectrum-web-components/table/src/TableCheckboxCell.dev.js
-var __defProp56 = Object.defineProperty;
-var __getOwnPropDesc56 = Object.getOwnPropertyDescriptor;
-var __decorateClass55 = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc56(target, key) : target;
+var __defProp57 = Object.defineProperty;
+var __getOwnPropDesc57 = Object.getOwnPropertyDescriptor;
+var __decorateClass56 = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc57(target, key) : target;
   for (var i6 = decorators2.length - 1, decorator;i6 >= 0; i6--)
     if (decorator = decorators2[i6])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp56(target, key, result);
+    __defProp57(target, key, result);
   return result;
 };
 
@@ -205752,31 +206378,31 @@ class TableCheckboxCell extends SpectrumElement {
     `;
   }
 }
-__decorateClass55([
+__decorateClass56([
   property({ type: Boolean, reflect: true, attribute: "head-cell" })
 ], TableCheckboxCell.prototype, "headCell", 2);
-__decorateClass55([
+__decorateClass56([
   property({ reflect: true })
 ], TableCheckboxCell.prototype, "role", 2);
-__decorateClass55([
+__decorateClass56([
   query(".checkbox")
 ], TableCheckboxCell.prototype, "checkbox", 2);
-__decorateClass55([
+__decorateClass56([
   property({ type: Boolean })
 ], TableCheckboxCell.prototype, "indeterminate", 2);
-__decorateClass55([
+__decorateClass56([
   property({ type: Boolean })
 ], TableCheckboxCell.prototype, "checked", 2);
-__decorateClass55([
+__decorateClass56([
   property({ type: Boolean })
 ], TableCheckboxCell.prototype, "disabled", 2);
-__decorateClass55([
+__decorateClass56([
   property({ type: Boolean, reflect: true, attribute: "selects-single" })
 ], TableCheckboxCell.prototype, "selectsSingle", 2);
-__decorateClass55([
+__decorateClass56([
   property({ type: Boolean, reflect: true })
 ], TableCheckboxCell.prototype, "emphasized", 2);
-__decorateClass55([
+__decorateClass56([
   property({ type: String })
 ], TableCheckboxCell.prototype, "label", 2);
 
@@ -205794,15 +206420,15 @@ var e17 = css`
 var table_row_css_default = e17;
 
 // ../../node_modules/@spectrum-web-components/table/src/TableRow.dev.js
-var __defProp57 = Object.defineProperty;
-var __getOwnPropDesc57 = Object.getOwnPropertyDescriptor;
-var __decorateClass56 = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc57(target, key) : target;
+var __defProp58 = Object.defineProperty;
+var __getOwnPropDesc58 = Object.getOwnPropertyDescriptor;
+var __decorateClass57 = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc58(target, key) : target;
   for (var i6 = decorators2.length - 1, decorator;i6 >= 0; i6--)
     if (decorator = decorators2[i6])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp57(target, key, result);
+    __defProp58(target, key, result);
   return result;
 };
 
@@ -205877,22 +206503,22 @@ class TableRow extends SpectrumElement {
     }
   }
 }
-__decorateClass56([
+__decorateClass57([
   queryAssignedElements({
     selector: "sp-table-checkbox-cell",
     flatten: true
   })
 ], TableRow.prototype, "checkboxCells", 2);
-__decorateClass56([
+__decorateClass57([
   property({ reflect: true })
 ], TableRow.prototype, "role", 2);
-__decorateClass56([
+__decorateClass57([
   property({ type: Boolean })
 ], TableRow.prototype, "selectable", 2);
-__decorateClass56([
+__decorateClass57([
   property({ type: Boolean, reflect: true })
 ], TableRow.prototype, "selected", 2);
-__decorateClass56([
+__decorateClass57([
   property({ type: String })
 ], TableRow.prototype, "value", 2);
 
@@ -205907,15 +206533,15 @@ var e18 = css`
 var table_css_default = e18;
 
 // ../../node_modules/@spectrum-web-components/table/src/Table.dev.js
-var __defProp58 = Object.defineProperty;
-var __getOwnPropDesc58 = Object.getOwnPropertyDescriptor;
-var __decorateClass57 = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc58(target, key) : target;
+var __defProp59 = Object.defineProperty;
+var __getOwnPropDesc59 = Object.getOwnPropertyDescriptor;
+var __decorateClass58 = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc59(target, key) : target;
   for (var i6 = decorators2.length - 1, decorator;i6 >= 0; i6--)
     if (decorator = decorators2[i6])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp58(target, key, result);
+    __defProp59(target, key, result);
   return result;
 };
 class Table2 extends SizedMixin(SpectrumElement, {
@@ -206276,37 +206902,37 @@ class Table2 extends SizedMixin(SpectrumElement, {
     super.disconnectedCallback();
   }
 }
-__decorateClass57([
+__decorateClass58([
   property({ reflect: true })
 ], Table2.prototype, "role", 2);
-__decorateClass57([
+__decorateClass58([
   property({ type: String, reflect: true })
 ], Table2.prototype, "selects", 2);
-__decorateClass57([
+__decorateClass58([
   property({ type: Array })
 ], Table2.prototype, "selected", 2);
-__decorateClass57([
+__decorateClass58([
   property({ type: String, attribute: "select-all-label" })
 ], Table2.prototype, "selectAllLabel", 2);
-__decorateClass57([
+__decorateClass58([
   property({ type: Array })
 ], Table2.prototype, "items", 2);
-__decorateClass57([
+__decorateClass58([
   property({ type: Object })
 ], Table2.prototype, "itemValue", 2);
-__decorateClass57([
+__decorateClass58([
   property({ type: Object })
 ], Table2.prototype, "itemLabel", 2);
-__decorateClass57([
+__decorateClass58([
   property({ type: Boolean, reflect: true })
 ], Table2.prototype, "scroller", 2);
-__decorateClass57([
+__decorateClass58([
   property({ type: Boolean, reflect: true })
 ], Table2.prototype, "emphasized", 2);
-__decorateClass57([
+__decorateClass58([
   property({ type: Boolean, reflect: true })
 ], Table2.prototype, "quiet", 2);
-__decorateClass57([
+__decorateClass58([
   property({ type: String, reflect: true })
 ], Table2.prototype, "density", 2);
 
@@ -206322,15 +206948,15 @@ var t13 = css`
 var table_head_css_default = t13;
 
 // ../../node_modules/@spectrum-web-components/table/src/TableHead.dev.js
-var __defProp59 = Object.defineProperty;
-var __getOwnPropDesc59 = Object.getOwnPropertyDescriptor;
-var __decorateClass58 = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc59(target, key) : target;
+var __defProp60 = Object.defineProperty;
+var __getOwnPropDesc60 = Object.getOwnPropertyDescriptor;
+var __decorateClass59 = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc60(target, key) : target;
   for (var i6 = decorators2.length - 1, decorator;i6 >= 0; i6--)
     if (decorator = decorators2[i6])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp59(target, key, result);
+    __defProp60(target, key, result);
   return result;
 };
 
@@ -206361,10 +206987,10 @@ class TableHead extends SpectrumElement {
     `;
   }
 }
-__decorateClass58([
+__decorateClass59([
   property({ reflect: true })
 ], TableHead.prototype, "role", 2);
-__decorateClass58([
+__decorateClass59([
   property({ type: Boolean, reflect: true })
 ], TableHead.prototype, "selected", 2);
 
@@ -206374,10 +207000,10 @@ init_decorators_dev();
 
 // ../../node_modules/@spectrum-web-components/icon/src/spectrum-icon-arrow.css.js
 init_index_dev();
-var o17 = css`
+var o18 = css`
     .spectrum-UIIcon-ArrowRight75{--spectrum-icon-size:var(--spectrum-arrow-icon-size-75)}.spectrum-UIIcon-ArrowRight100{--spectrum-icon-size:var(--spectrum-arrow-icon-size-100)}.spectrum-UIIcon-ArrowRight200{--spectrum-icon-size:var(--spectrum-arrow-icon-size-200)}.spectrum-UIIcon-ArrowRight300{--spectrum-icon-size:var(--spectrum-arrow-icon-size-300)}.spectrum-UIIcon-ArrowRight400{--spectrum-icon-size:var(--spectrum-arrow-icon-size-400)}.spectrum-UIIcon-ArrowRight500{--spectrum-icon-size:var(--spectrum-arrow-icon-size-500)}.spectrum-UIIcon-ArrowRight600{--spectrum-icon-size:var(--spectrum-arrow-icon-size-600)}.spectrum-UIIcon-ArrowDown75{--spectrum-icon-size:var(--spectrum-arrow-icon-size-75);transform:rotate(90deg)}.spectrum-UIIcon-ArrowDown100{--spectrum-icon-size:var(--spectrum-arrow-icon-size-100);transform:rotate(90deg)}.spectrum-UIIcon-ArrowDown200{--spectrum-icon-size:var(--spectrum-arrow-icon-size-200);transform:rotate(90deg)}.spectrum-UIIcon-ArrowDown300{--spectrum-icon-size:var(--spectrum-arrow-icon-size-300);transform:rotate(90deg)}.spectrum-UIIcon-ArrowDown400{--spectrum-icon-size:var(--spectrum-arrow-icon-size-400);transform:rotate(90deg)}.spectrum-UIIcon-ArrowDown500{--spectrum-icon-size:var(--spectrum-arrow-icon-size-500);transform:rotate(90deg)}.spectrum-UIIcon-ArrowDown600{--spectrum-icon-size:var(--spectrum-arrow-icon-size-600);transform:rotate(90deg)}.spectrum-UIIcon-ArrowLeft75{--spectrum-icon-size:var(--spectrum-arrow-icon-size-75);transform:rotate(180deg)}.spectrum-UIIcon-ArrowLeft100{--spectrum-icon-size:var(--spectrum-arrow-icon-size-100);transform:rotate(180deg)}.spectrum-UIIcon-ArrowLeft200{--spectrum-icon-size:var(--spectrum-arrow-icon-size-200);transform:rotate(180deg)}.spectrum-UIIcon-ArrowLeft300{--spectrum-icon-size:var(--spectrum-arrow-icon-size-300);transform:rotate(180deg)}.spectrum-UIIcon-ArrowLeft400{--spectrum-icon-size:var(--spectrum-arrow-icon-size-400);transform:rotate(180deg)}.spectrum-UIIcon-ArrowLeft500{--spectrum-icon-size:var(--spectrum-arrow-icon-size-500);transform:rotate(180deg)}.spectrum-UIIcon-ArrowLeft600{--spectrum-icon-size:var(--spectrum-arrow-icon-size-600);transform:rotate(180deg)}.spectrum-UIIcon-ArrowUp75{--spectrum-icon-size:var(--spectrum-arrow-icon-size-75);transform:rotate(270deg)}.spectrum-UIIcon-ArrowUp100{--spectrum-icon-size:var(--spectrum-arrow-icon-size-100);transform:rotate(270deg)}.spectrum-UIIcon-ArrowUp200{--spectrum-icon-size:var(--spectrum-arrow-icon-size-200);transform:rotate(270deg)}.spectrum-UIIcon-ArrowUp300{--spectrum-icon-size:var(--spectrum-arrow-icon-size-300);transform:rotate(270deg)}.spectrum-UIIcon-ArrowUp400{--spectrum-icon-size:var(--spectrum-arrow-icon-size-400);transform:rotate(270deg)}.spectrum-UIIcon-ArrowUp500{--spectrum-icon-size:var(--spectrum-arrow-icon-size-500);transform:rotate(270deg)}.spectrum-UIIcon-ArrowUp600{--spectrum-icon-size:var(--spectrum-arrow-icon-size-600);transform:rotate(270deg)}
 `;
-var spectrum_icon_arrow_css_default = o17;
+var spectrum_icon_arrow_css_default = o18;
 
 // ../../node_modules/@spectrum-web-components/icons-ui/src/elements/IconArrow100.js
 init_index_dev();
@@ -206432,15 +207058,15 @@ var t14 = css`
 var table_head_cell_css_default = t14;
 
 // ../../node_modules/@spectrum-web-components/table/src/TableHeadCell.dev.js
-var __defProp60 = Object.defineProperty;
-var __getOwnPropDesc60 = Object.getOwnPropertyDescriptor;
-var __decorateClass59 = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc60(target, key) : target;
+var __defProp61 = Object.defineProperty;
+var __getOwnPropDesc61 = Object.getOwnPropertyDescriptor;
+var __decorateClass60 = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc61(target, key) : target;
   for (var i6 = decorators2.length - 1, decorator;i6 >= 0; i6--)
     if (decorator = decorators2[i6])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp60(target, key, result);
+    __defProp61(target, key, result);
   return result;
 };
 var ariaSortValue = (sortDirection) => {
@@ -206541,19 +207167,19 @@ class TableHeadCell extends SpectrumElement {
     super.update(changes);
   }
 }
-__decorateClass59([
+__decorateClass60([
   property({ type: Boolean, reflect: true })
 ], TableHeadCell.prototype, "active", 2);
-__decorateClass59([
+__decorateClass60([
   property({ reflect: true })
 ], TableHeadCell.prototype, "role", 2);
-__decorateClass59([
+__decorateClass60([
   property({ type: Boolean, reflect: true })
 ], TableHeadCell.prototype, "sortable", 2);
-__decorateClass59([
+__decorateClass60([
   property({ reflect: true, attribute: "sort-direction" })
 ], TableHeadCell.prototype, "sortDirection", 2);
-__decorateClass59([
+__decorateClass60([
   property({ attribute: "sort-key" })
 ], TableHeadCell.prototype, "sortKey", 2);
 
@@ -206569,15 +207195,15 @@ var e19 = css`
 var table_cell_css_default = e19;
 
 // ../../node_modules/@spectrum-web-components/table/src/TableCell.dev.js
-var __defProp61 = Object.defineProperty;
-var __getOwnPropDesc61 = Object.getOwnPropertyDescriptor;
-var __decorateClass60 = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc61(target, key) : target;
+var __defProp62 = Object.defineProperty;
+var __getOwnPropDesc62 = Object.getOwnPropertyDescriptor;
+var __decorateClass61 = (decorators2, target, key, kind) => {
+  var result = kind > 1 ? undefined : kind ? __getOwnPropDesc62(target, key) : target;
   for (var i6 = decorators2.length - 1, decorator;i6 >= 0; i6--)
     if (decorator = decorators2[i6])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
   if (kind && result)
-    __defProp61(target, key, result);
+    __defProp62(target, key, result);
   return result;
 };
 
@@ -206595,7 +207221,7 @@ class TableCell extends SpectrumElement {
     `;
   }
 }
-__decorateClass60([
+__decorateClass61([
   property({ reflect: true })
 ], TableCell.prototype, "role", 2);
 
@@ -209797,12 +210423,12 @@ class JxValueSelector extends LitElement {
     return this;
   }
   get _isPicker() {
-    return !!this.value && this.options.some((o18) => !o18.divider && o18.value === this.value);
+    return !!this.value && this.options.some((o19) => !o19.divider && o19.value === this.value);
   }
   get _selectedStyle() {
     if (!this._isPicker)
       return "";
-    const opt = this.options.find((o18) => !o18.divider && o18.value === this.value);
+    const opt = this.options.find((o19) => !o19.divider && o19.value === this.value);
     return opt?.style || "";
   }
   _renderMenuItems() {
@@ -210142,6 +210768,7 @@ var components = [
   ["sp-accordion", Accordion],
   ["sp-accordion-item", AccordionItem],
   ["sp-action-bar", ActionBar2],
+  ["sp-toast", Toast],
   ["sp-table", Table2],
   ["sp-table-head", TableHead],
   ["sp-table-head-cell", TableHeadCell],
@@ -213274,6 +213901,7 @@ function renderStylePanelTemplate(ctx) {
 // src/panels/properties-panel.js
 init_store();
 init_components();
+init_platform();
 // data/html-meta.json
 var html_meta_default = {
   $id: "html-meta",
@@ -213786,9 +214414,11 @@ function renderFrontmatterOnlyPanel() {
   if (fields.length === 0 && !schemaProps) {
     return html`<div class="empty-state">No frontmatter. Select an element to inspect.</div>`;
   }
+  const pageT = renderPageSection(S.document || {});
   return html`
     <div class="style-sidebar">
       <sp-accordion allow-multiple size="s">
+        ${pageT}
         <sp-accordion-item label=${col ? `Frontmatter (${col.name})` : "Frontmatter"} open>
           <div class="style-section-body">
             ${fields.map((f) => renderFmFieldRow(f.field, f.entry, f.value, requiredFields))}
@@ -213857,6 +214487,64 @@ function renderFmFieldRow(field, entry, value2, requiredFields) {
       `
     });
   }
+  if (entry.format === "image") {
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: renderMediaPicker(field, value2, (v) => update(updateFrontmatter(getState(), field, v || undefined)))
+    });
+  }
+  if (entry.type === "array" && entry.items?.format === "image") {
+    const images = Array.isArray(value2) ? value2 : [];
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: html`
+        <div class="gallery-picker">
+          <div class="gallery-picker-strip">
+            ${images.map((img, i6) => html`
+                <div class="gallery-picker-item">
+                  <img src=${img} alt="" class="gallery-picker-thumb" />
+                  <sp-action-button
+                    size="xs"
+                    quiet
+                    title="Remove"
+                    @click=${() => {
+        const next2 = images.filter((_, idx) => idx !== i6);
+        update(updateFrontmatter(getState(), field, next2.length ? next2 : undefined));
+      }}
+                  >
+                    <sp-icon-close slot="icon"></sp-icon-close>
+                  </sp-action-button>
+                </div>
+              `)}
+          </div>
+          ${renderMediaPicker(`${field}:add`, "", (v) => {
+        if (!v)
+          return;
+        const next2 = [...images, v];
+        update(updateFrontmatter(getState(), field, next2));
+      })}
+        </div>
+      `
+    });
+  }
+  if (entry.$ref) {
+    const targetName = entry.$ref.replace("#/contentTypes/", "");
+    const targetDef = projectState?.projectConfig?.contentTypes?.[targetName];
+    const picker = renderReferencePicker(field, value2, targetName, targetDef, (v) => update(updateFrontmatter(getState(), field, v || undefined)));
+    return renderFieldRow({
+      prop: field,
+      label: displayLabel,
+      hasValue: hasVal,
+      onClear,
+      widget: picker
+    });
+  }
   if (entry.type === "number") {
     return renderFieldRow({
       prop: field,
@@ -213893,6 +214581,55 @@ function renderFmFieldRow(field, entry, value2, requiredFields) {
     `
   });
 }
+var refEntriesCache = new Map;
+function renderReferencePicker(field, value2, targetName, targetDef, onCommit) {
+  if (!targetDef?.source) {
+    return html`<sp-textfield
+      size="s"
+      placeholder="slug"
+      .value=${live(value2 || "")}
+      @input=${debouncedStyleCommit(`fm:${field}`, 400, (e20) => onCommit(e20.target.value))}
+    ></sp-textfield>`;
+  }
+  const cacheKey = targetName;
+  if (!refEntriesCache.has(cacheKey)) {
+    loadRefEntries(targetName, targetDef);
+  }
+  const entries2 = refEntriesCache.get(cacheKey) || [];
+  return html`
+    <sp-picker
+      size="s"
+      label=${targetName}
+      .value=${live(value2 || "")}
+      @change=${(e20) => onCommit(e20.target.value || undefined)}
+    >
+      <sp-menu-item value="">— none —</sp-menu-item>
+      ${entries2.map((ent) => html`<sp-menu-item value=${ent.slug}>${ent.title || ent.slug}</sp-menu-item>`)}
+    </sp-picker>
+  `;
+}
+async function loadRefEntries(targetName, targetDef) {
+  const platform4 = getPlatform();
+  const sourceDir = targetDef.source.replace(/^\.\//, "").split("/**")[0].split("/*")[0];
+  try {
+    const listing = await platform4.listDirectory(sourceDir);
+    const entries2 = [];
+    for (const item of listing) {
+      if (item.type === "directory")
+        continue;
+      const slug = item.name.replace(/\.[^.]+$/, "");
+      let title = slug;
+      try {
+        const content3 = await platform4.readFile(item.path);
+        const match2 = content3.match(/^---[\s\S]*?title:\s*(.+?)[\r\n]/m);
+        if (match2)
+          title = match2[1].trim().replace(/^["']|["']$/g, "");
+      } catch {}
+      entries2.push({ slug, title });
+    }
+    refEntriesCache.set(targetName, entries2);
+  } catch {}
+}
 function renderRepeaterFieldsTemplate(node2, path2, _mapSignals) {
   const S = getState();
   return html`
@@ -214059,7 +214796,7 @@ function renderComponentPropsFieldsTemplate(node2, path2, mapSignals, navigateTo
           .value=${String(staticVal)}
           size="s"
           placeholder="—"
-          .options=${options.map((o18) => ({ value: o18, label: camelToLabel(o18) }))}
+          .options=${options.map((o19) => ({ value: o19, label: camelToLabel(o19) }))}
           @change=${(e20) => onChange(e20.detail?.value ?? e20.target.value)}
         ></jx-value-selector>`;
     } else {
@@ -214258,8 +214995,124 @@ function mediaBreakpointRowTemplate(name, query3) {
     </div>
   `;
 }
+var layoutEntries = null;
+async function loadLayoutEntries() {
+  try {
+    const platform4 = getPlatform();
+    const listing = await platform4.listDirectory("layouts");
+    layoutEntries = listing.filter((f) => f.type === "file" && f.name.endsWith(".json")).map((f) => ({
+      name: f.name.replace(/\.json$/, ""),
+      path: `./layouts/${f.name}`
+    }));
+  } catch {
+    layoutEntries = [];
+  }
+  renderOnly("rightPanel");
+}
+function isPageDocument(documentPath) {
+  if (!documentPath || !projectState?.isSiteProject)
+    return false;
+  return documentPath.startsWith("pages/") || documentPath.startsWith("./pages/");
+}
+function renderPageSection(node2) {
+  const S = getState();
+  if (!isPageDocument(S.documentPath))
+    return nothing;
+  if (layoutEntries === null) {
+    loadLayoutEntries();
+    return nothing;
+  }
+  const currentLayout = node2.$layout;
+  const defaultLayout = projectState?.projectConfig?.defaults?.layout;
+  const effectivePath = getEffectiveLayoutPath(currentLayout);
+  const displayValue = currentLayout === false ? "__none__" : currentLayout ? currentLayout : "__default__";
+  return html`
+    <sp-accordion-item label="Page" open>
+      <div class="style-section-body">
+        <div class="style-row" data-prop="$layout">
+          <div class="style-row-label">
+            ${currentLayout !== undefined ? html`<span
+                  class="set-dot"
+                  title="Reset to default"
+                  @click=${(e20) => {
+    e20.stopPropagation();
+    update(updateProperty(getState(), [], "$layout", undefined));
+  }}
+                ></span>` : nothing}
+            <sp-field-label size="s">Layout</sp-field-label>
+          </div>
+          <sp-picker
+            size="s"
+            value=${displayValue}
+            @change=${(e20) => {
+    const val = e20.target.value;
+    if (val === "__default__") {
+      update(updateProperty(getState(), [], "$layout", undefined));
+    } else if (val === "__none__") {
+      update(updateProperty(getState(), [], "$layout", false));
+    } else {
+      update(updateProperty(getState(), [], "$layout", val));
+    }
+    invalidateLayoutCache();
+  }}
+          >
+            <sp-menu-item value="__default__"
+              >Default${defaultLayout ? ` (${defaultLayout.replace(/^\.\/layouts\//, "").replace(/\.json$/, "")})` : ""}</sp-menu-item
+            >
+            <sp-menu-item value="__none__">None</sp-menu-item>
+            <sp-menu-divider></sp-menu-divider>
+            ${layoutEntries.map((l) => html`<sp-menu-item value=${l.path}>${l.name}</sp-menu-item>`)}
+          </sp-picker>
+        </div>
+        ${effectivePath ? html`<div style="font-size:10px;color:var(--fg-dim);padding:2px 0;font-style:italic">
+              Wraps page content via &lt;slot&gt; distribution
+            </div>` : nothing}
+      </div>
+    </sp-accordion-item>
+  `;
+}
+function renderLayoutSelectionPanel(ctx) {
+  const { el, layoutPath } = view.layoutSelection;
+  const tagName = el?.tagName?.toLowerCase() || "element";
+  const className2 = el?.className || "";
+  const displayPath = layoutPath || "layout";
+  return html`
+    <div class="style-sidebar">
+      <sp-accordion allow-multiple size="s">
+        <sp-accordion-item label="Layout Element" open>
+          <div class="style-section-body">
+            <div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">
+              <span
+                style="font-size:9px;padding:2px 6px;background:var(--spectrum-purple-600);color:white;border-radius:3px;text-transform:uppercase;letter-spacing:0.5px"
+                >Layout</span
+              >
+              <code style="font-size:12px;font-family:monospace">&lt;${tagName}&gt;</code>
+            </div>
+            ${className2 ? html`<div class="style-row">
+                  <div class="style-row-label">
+                    <sp-field-label size="s">Class</sp-field-label>
+                  </div>
+                  <span style="font-size:11px;color:var(--fg-dim);word-break:break-all"
+                    >${className2}</span
+                  >
+                </div>` : nothing}
+            <div style="font-size:10px;color:var(--fg-dim);padding:4px 0;font-style:italic">
+              This element is part of the page layout. Edit it by opening the layout file.
+            </div>
+            <span class="kv-add" @click=${() => ctx.navigateToComponent(displayPath)}
+              >Open Layout →</span
+            >
+          </div>
+        </sp-accordion-item>
+      </sp-accordion>
+    </div>
+  `;
+}
 function renderPropertiesPanelTemplate(ctx) {
   const S = getState();
+  if (view.layoutSelection) {
+    return renderLayoutSelectionPanel(ctx);
+  }
   if (!S.selection) {
     if (S.mode === "content") {
       return renderFrontmatterOnlyPanel();
@@ -214638,14 +215491,15 @@ function renderPropertiesPanelTemplate(ctx) {
             </sp-accordion-item>
           `;
   })() : nothing;
+  const pageT = isRoot ? renderPageSection(node2) : nothing;
   const tpl = html`
     <div class="style-sidebar">
       <sp-accordion allow-multiple size="s">
-        ${frontmatterT} ${isMapNode ? repeaterT : elemT} ${isMapNode ? nothing : observedAttrsT}
-        ${isMapNode ? nothing : switchT} ${isMapNode ? nothing : compPropsT}
-        ${isMapNode ? nothing : attrSectionTemplates} ${isMapNode ? nothing : customSectionT}
-        ${isMapNode ? nothing : mediaT} ${isMapNode ? nothing : cssPropsT}
-        ${isMapNode ? nothing : cssPartsT}
+        ${pageT} ${frontmatterT} ${isMapNode ? repeaterT : elemT}
+        ${isMapNode ? nothing : observedAttrsT} ${isMapNode ? nothing : switchT}
+        ${isMapNode ? nothing : compPropsT} ${isMapNode ? nothing : attrSectionTemplates}
+        ${isMapNode ? nothing : customSectionT} ${isMapNode ? nothing : mediaT}
+        ${isMapNode ? nothing : cssPropsT} ${isMapNode ? nothing : cssPartsT}
       </sp-accordion>
     </div>
   `;
@@ -215719,5 +216573,5 @@ addUpdateMiddleware((state3) => {
     scheduleAutosave();
 });
 
-//# debugId=2B1FE5B3505549D664756E2164756E21
+//# debugId=D2AFE14DF975CCFE64756E2164756E21
 //# sourceMappingURL=studio.js.map