@jxsuite/studio 0.21.4 → 0.22.0

package/dist/studio.js

@@ -254721,6 +254721,8 @@ function mutateUpdateAttribute(tab, path, attr, value) {
     delete node.attributes;
 }
 function mutateUpdateMediaStyle(tab, path, mediaName, prop, value) {
+  if (!mediaName)
+    return mutateUpdateStyle(tab, path, prop, value);
   const node = getNodeAtPath(tab.doc.document, path);
   if (!node.style)
     node.style = {};
@@ -263034,6 +263036,12 @@ function collapsePropsToAttrMap(propsObj) {
       if (key.startsWith(":") && CSS_PSEUDO_NAMES2.has(key.slice(1))) {
         mdAttrKey = key.slice(1);
       }
+      if (key === "@") {
+        if (value2 && typeof value2 === "object" && !Array.isArray(value2)) {
+          walk2(value2, prefix);
+        }
+        continue;
+      }
       if (key.startsWith("@--")) {
         mdAttrKey = key.slice(1);
       }
@@ -263060,9 +263068,11 @@ async function codeService(action, payload) {
 }
 var pluginSchemaCache = new Map;
 async function fetchPluginSchema(def3, state) {
-  if (!def3.$src || !def3.$prototype)
+  const importedPath = def3.$prototype ? projectState?.projectConfig?.imports?.[def3.$prototype] : null;
+  const src = def3.$src || importedPath;
+  if (!src || !def3.$prototype)
     return null;
-  const cacheKey = `${def3.$src}::${def3.$prototype}`;
+  const cacheKey = `${src}::${def3.$prototype}`;
   if (pluginSchemaCache.has(cacheKey))
     return pluginSchemaCache.get(cacheKey);
   try {
@@ -263071,8 +263081,8 @@ async function fetchPluginSchema(def3, state) {
       pluginSchemaCache.set(cacheKey, null);
       return null;
     }
-    const base2 = state.documentPath ? `${location.origin}/${state.documentPath}` : undefined;
-    const schema4 = await platform3.fetchPluginSchema(def3.$src, def3.$prototype, base2);
+    const base2 = !importedPath && state.documentPath ? `${location.origin}/${state.documentPath}` : undefined;
+    const schema4 = await platform3.fetchPluginSchema(src, def3.$prototype, base2);
     pluginSchemaCache.set(cacheKey, schema4);
     return schema4;
   } catch {
@@ -264427,10 +264437,6 @@ var _serverFnConfig = { skip: false };
 function setSkipServerFunctions(v) {
   _serverFnConfig.skip = v;
 }
-var _contentConfig = { skip: false };
-function setSkipContentResolution(v) {
-  _contentConfig.skip = v;
-}
 async function buildScope(doc, parentScope = {}, base2 = location.href) {
   const raw = {};
   for (const [key, val] of Object.entries(parentScope)) {
@@ -264805,7 +264811,8 @@ function renderMappedArray(def3, state, options) {
   applyProperties(container, def3, state);
   applyStyle2(container, def3.style ?? {}, state["$media"] ?? {}, state);
   applyAttributes(container, def3.attributes ?? {}, state);
-  const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef } = def3.children;
+  const { items: _items, of: _of, map: mapDef, filter: filterRef, sort: sortRef } = def3.children;
+  const itemsSrc = _items ?? _of;
   effect(() => {
     container.innerHTML = "";
     let items;
@@ -265033,39 +265040,6 @@ async function resolvePrototype(def3, state, key, base2) {
       return new Blob(def3.parts ?? [], { type: def3.type ?? "text/plain" });
     case "ReadableStream":
       return null;
-    case "ContentCollection":
-    case "ContentEntry": {
-      if (_contentConfig.skip) {
-        return ref(def3.$prototype === "ContentCollection" ? [{ id: "", data: {} }] : null);
-      }
-      const s2 = ref(def3.$prototype === "ContentCollection" ? [] : null);
-      effect(() => {
-        let id = def3.id;
-        if (id && typeof id === "object" && id.$ref?.startsWith("#/$params/")) {
-          const paramName = id.$ref.replace("#/$params/", "");
-          id = state?.$params?.[paramName];
-        } else if (typeof id === "string" && id.includes("${")) {
-          id = evaluateTemplate(id, state);
-        }
-        if (def3.$prototype === "ContentEntry" && !id)
-          return;
-        fetch("/__studio/content", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            $prototype: def3.$prototype,
-            contentType: def3.contentType,
-            id,
-            filter: def3.filter,
-            sort: def3.sort,
-            limit: def3.limit
-          })
-        }).then((r) => r.ok ? r.json() : null).then((d2) => {
-          s2.value = d2;
-        }).catch(() => {});
-      });
-      return s2;
-    }
     default:
       console.warn(`Jx: unknown $prototype "${def3.$prototype}" for "${key}". Did you mean to add '$src'?`);
       return ref(null);
@@ -265149,6 +265123,10 @@ async function resolveClassJson(def3, state, key, base2) {
     return resolveViaDevProxy(def3, state, key, base2);
   }
   if (classDef.$implementation) {
+    const schemaStr = JSON.stringify(classDef);
+    if (schemaStr.includes('"#/$context/')) {
+      return resolveViaDevProxy(def3, state, key, base2);
+    }
     const schemaUrl = base2 ? new URL(src, base2).href : new URL(src, location.href).href;
     const implSrc = new URL(classDef.$implementation, schemaUrl).href;
     const exportName = def3.$export ?? classDef.title ?? def3.$prototype;
@@ -265690,7 +265668,6 @@ async function renderCanvasLive(gen, doc, canvasEl) {
     _failedElementsDocPath = S.documentPath ?? null;
   }
   setSkipServerFunctions(canvasMode !== "preview");
-  setSkipContentResolution(canvasMode !== "preview");
   let renderDoc = canvasMode === "preview" ? structuredClone(toRaw(doc)) : prepareForEditMode(stripEventHandlers(doc));
   let layoutWrapped = false;
   activeLayoutPath = null;
@@ -265741,7 +265718,7 @@ async function renderCanvasLive(gen, doc, canvasEl) {
     const docPrefix = root2 ? `${root2}/` : "";
     const docBase = S.documentPath ? `${location.origin}/${docPrefix}${S.documentPath}` : undefined;
     let effectiveElements = getEffectiveElements(renderDoc.$elements);
-    if (S.mode === "content" && componentRegistry.length > 0) {
+    if ((S.mode === "content" || layoutWrapped) && componentRegistry.length > 0) {
       const existingRefs = new Set(effectiveElements.map((e) => typeof e === "string" ? e : e?.$ref));
       const collectTags = (node2) => {
         const tags2 = new Set;
@@ -265862,6 +265839,8 @@ async function renderCanvasLive(gen, doc, canvasEl) {
         if (!entry?.tagName)
           continue;
         const tag3 = entry.tagName.toLowerCase();
+        if (tag3 === "script" && !entry.attributes?.src)
+          continue;
         const attrs = { ...entry.attributes };
         for (const key of ["href", "src"]) {
           const val = attrs[key];
@@ -266340,6 +266319,24 @@ function renderSignalsTemplate(S, ctx) {
     const type = e.target.value;
     if (!type)
       return;
+    if (type.startsWith("import:")) {
+      const protoName = type.slice(7);
+      const src = projectState?.projectConfig?.imports?.[protoName];
+      let n3 = "$" + protoName.charAt(0).toLowerCase() + protoName.slice(1);
+      let i3 = 1;
+      const base2 = n3;
+      while (S.document.state && S.document.state[n3]) {
+        n3 = base2 + i3++;
+      }
+      transactDoc(activeTab.value, (t) => mutateAddDef(t, n3, { $prototype: protoName }));
+      expandedSignal = n3;
+      if (src) {
+        fetchPluginSchema({ $prototype: protoName, $src: src }, S).then(() => ctx.renderLeftPanel());
+      } else {
+        ctx.renderLeftPanel();
+      }
+      return;
+    }
     const template = DEF_TEMPLATES[type];
     if (!template)
       return;
@@ -266367,6 +266364,7 @@ function renderSignalsTemplate(S, ctx) {
           <sp-menu-item value="map">Map</sp-menu-item>
           <sp-menu-item value="formData">FormData</sp-menu-item>
           <sp-menu-item value="external">External Module…</sp-menu-item>
+          ${projectState?.projectConfig?.imports ? html3`<sp-menu-divider></sp-menu-divider>${Object.keys(projectState.projectConfig.imports).map((k) => html3`<sp-menu-item value="import:${k}">${k}</sp-menu-item>`)}` : nothing}
           <sp-menu-divider></sp-menu-divider>
           <sp-menu-item value="function">Function</sp-menu-item>
         </sp-picker>
@@ -266554,9 +266552,6 @@ function renderDataSourceFields(S, name, def3, textareaRow, pickerRow, ctx) {
       ${signalFieldRow("Default", String(def3.default || ""), (v) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { default: v })))}
     `;
   }
-  if (proto2 === "ContentEntry" || proto2 === "ContentCollection") {
-    return renderContentPrototypeFields(name, def3, proto2);
-  }
   if (proto2 === "Set" || proto2 === "Map" || proto2 === "FormData") {
     const fieldName = proto2 === "FormData" ? "fields" : "default";
     const fieldLabel = proto2 === "FormData" ? "Fields" : "Default";
@@ -266569,85 +266564,6 @@ function renderDataSourceFields(S, name, def3, textareaRow, pickerRow, ctx) {
   }
   return renderExternalPrototypeEditorTemplate(S, name, def3, ctx);
 }
-function renderContentPrototypeFields(name, def3, proto2) {
-  const contentTypes = projectState?.projectConfig?.contentTypes;
-  const typeNames = contentTypes ? Object.keys(contentTypes) : [];
-  const currentType = def3.contentType || "";
-  const schema4 = currentType && contentTypes?.[currentType]?.schema || undefined;
-  const contentTypeField = typeNames.length ? html3`
-        <div class="signal-field-row">
-          <label class="signal-field-label">Content Type</label>
-          <sp-picker
-            size="s"
-            value=${currentType}
-            style="width:100%"
-            @change=${(e) => {
-    const v = e.target.value;
-    transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { contentType: v }));
-  }}
-          >
-            ${typeNames.map((t) => html3`<sp-menu-item value=${t}>${t}</sp-menu-item>`)}
-          </sp-picker>
-        </div>
-      ` : signalFieldRow("Content Type", currentType, (v) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { contentType: v })));
-  let entryFields = nothing;
-  if (proto2 === "ContentEntry") {
-    const idVal = def3.id;
-    const idStr = idVal && typeof idVal === "object" && idVal.$ref ? idVal.$ref : typeof idVal === "string" ? idVal : "";
-    entryFields = signalFieldRow("ID", idStr, (v) => {
-      const val = v.startsWith("#/") ? { $ref: v } : v;
-      transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { id: val }));
-    });
-  } else {
-    const filterStr = def3.filter ? JSON.stringify(def3.filter) : "";
-    const sortStr = def3.sort ? `${def3.sort.field || ""} ${def3.sort.order || ""}`.trim() : "";
-    const limitStr = def3.limit != null ? String(def3.limit) : "";
-    entryFields = html3`
-      ${signalFieldRow("Filter", filterStr, (v) => {
-      try {
-        const parsed = v ? JSON.parse(v) : undefined;
-        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { filter: parsed }));
-      } catch {}
-    })}
-      ${signalFieldRow("Sort", sortStr, (v) => {
-      if (!v) {
-        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { sort: undefined }));
-        return;
-      }
-      const [field, order2] = v.split(" ");
-      transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { sort: { field, order: order2 || "asc" } }));
-    })}
-      ${signalFieldRow("Limit", limitStr, (v) => {
-      const num = v ? parseInt(v, 10) : undefined;
-      transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { limit: num }));
-    })}
-    `;
-  }
-  let schemaFields = nothing;
-  if (schema4?.properties) {
-    const fields = Object.entries(schema4.properties);
-    const required = new Set(schema4.required || []);
-    schemaFields = html3`
-      <div style="margin-top:8px;padding:6px 0;border-top:1px solid var(--border-dim)">
-        <div style="font-size:11px;color:var(--fg-dim);margin-bottom:4px;font-weight:500">
-          Fields (${currentType})
-        </div>
-        ${fields.map(([field, fieldDef]) => html3`
-            <div style="font-size:11px;padding:2px 0;display:flex;gap:4px;align-items:center">
-              <code style="color:var(--fg-default)">${field}</code>
-              <span style="color:var(--fg-dim)">${fieldDef.type || ""}</span>
-              ${required.has(field) ? html3`<span style="color:var(--color-accent,#f36f32);font-size:9px">req</span>` : nothing}
-            </div>
-          `)}
-      </div>
-    `;
-  }
-  return html3`
-    ${contentTypeField}
-    ${signalFieldRow("Prototype", proto2, (v) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $prototype: v })))}
-    ${entryFields} ${schemaFields}
-  `;
-}
 function renderFunctionFields(S, name, def3, textareaRow, ctx) {
   const descriptionField = signalFieldRow("Description", def3.description || "", (v) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { description: v || undefined })));
   const bodyField = def3.$src ? html3`
@@ -266894,15 +266810,86 @@ function renderEmitsEditorTemplate(S, name, def3) {
     </button>
   `;
 }
-function renderSchemaFieldsTemplate(schema4, def3, name, _S) {
+function resolveSchemaEnum(enumDef, parentDef) {
+  if (Array.isArray(enumDef))
+    return enumDef;
+  if (enumDef && typeof enumDef === "object") {
+    const ref3 = enumDef.$ref;
+    if (ref3 === "#/$context/contentTypes") {
+      return Object.keys(projectState?.projectConfig?.contentTypes ?? {});
+    }
+    if (typeof ref3 === "string" && ref3.startsWith("#/$context/contentTypes/{@")) {
+      const match2 = ref3.match(/#\/\$context\/contentTypes\/\{@(\w+)\}\/schema\/properties/);
+      if (match2 && parentDef) {
+        const paramName = match2[1];
+        const typeName = parentDef[paramName];
+        if (typeName) {
+          const ct = projectState?.projectConfig?.contentTypes?.[typeName];
+          const schema4 = ct?.schema;
+          const props = schema4?.properties;
+          if (props)
+            return Object.keys(props);
+        }
+      }
+      return;
+    }
+  }
+  if (enumDef === "$contentTypes") {
+    return Object.keys(projectState?.projectConfig?.contentTypes ?? {});
+  }
+  return;
+}
+function renderInlineField(key, schema4, value2, onChange, parentDef) {
+  const enumValues = resolveSchemaEnum(schema4.enum, parentDef);
+  if (enumValues) {
+    return html3`<sp-picker
+      size="s"
+      label=${key}
+      value=${value2 !== undefined ? String(value2) : "__none__"}
+      @change=${(e) => onChange(e.target.value === "__none__" ? undefined : e.target.value)}
+    >
+      <sp-menu-item value="__none__">—</sp-menu-item>
+      ${enumValues.map((v) => html3`<sp-menu-item value=${v}>${v}</sp-menu-item>`)}
+    </sp-picker>`;
+  }
+  if (schema4.type === "boolean") {
+    return html3`<sp-switch
+      size="s"
+      ?checked=${!!value2}
+      @change=${(e) => onChange(e.target.checked)}
+      >${key}</sp-switch
+    >`;
+  }
+  if (schema4.type === "integer" || schema4.type === "number") {
+    return html3`<sp-number-field
+      size="s"
+      label=${key}
+      .value=${value2 !== undefined ? value2 : nothing}
+      step=${schema4.type === "integer" ? "1" : nothing}
+      @change=${(e) => {
+      const parsed = schema4.type === "integer" ? parseInt(e.target.value, 10) : parseFloat(e.target.value);
+      onChange(isNaN(parsed) ? undefined : parsed);
+    }}
+    ></sp-number-field>`;
+  }
+  return html3`<sp-textfield
+    size="s"
+    label=${key}
+    placeholder=${key}
+    .value=${value2 ?? ""}
+    @input=${(e) => onChange(e.target.value || undefined)}
+  ></sp-textfield>`;
+}
+function renderSchemaFieldsTemplate(schema4, def3, name, _S, ctx = null) {
   if (!schema4?.properties)
     return nothing;
   const required = new Set(schema4.required ?? []);
-  return Object.entries(schema4.properties).filter(([prop]) => !STUDIO_RESERVED_KEYS.has(prop)).map(([prop, ps]) => {
+  const propertyFields = Object.entries(schema4.properties).filter(([prop]) => !STUDIO_RESERVED_KEYS.has(prop)).map(([prop, ps]) => {
     const currentValue = def3[prop];
     const labelText = prop + (required.has(prop) ? " *" : "");
     let control;
-    if (ps.enum) {
+    const enumValues = resolveSchemaEnum(ps.enum, def3);
+    if (enumValues) {
       control = html3`
           <sp-picker
             size="s"
@@ -266912,7 +266899,7 @@ function renderSchemaFieldsTemplate(schema4, def3, name, _S) {
       }))}
           >
             ${!required.has(prop) ? html3`<sp-menu-item value="__none__">—</sp-menu-item>` : nothing}
-            ${ps.enum.map((val) => html3`<sp-menu-item value=${val}>${val}</sp-menu-item>`)}
+            ${enumValues.map((val) => html3`<sp-menu-item value=${val}>${val}</sp-menu-item>`)}
           </sp-picker>
         `;
     } else if (ps.type === "boolean") {
@@ -266930,7 +266917,7 @@ function renderSchemaFieldsTemplate(schema4, def3, name, _S) {
           max=${ifDefined(ps.maximum)}
           step=${ps.type === "integer" ? "1" : nothing}
           .value=${currentValue !== undefined ? currentValue : nothing}
-          placeholder=${ps.default !== undefined ? String(ps.default) : nothing}
+          placeholder=${ps.default != null ? String(ps.default) : nothing}
           @change=${(e) => {
         clearTimeout(debounce);
         debounce = setTimeout(() => {
@@ -266979,6 +266966,51 @@ function renderSchemaFieldsTemplate(schema4, def3, name, _S) {
             ></sp-textfield>
           </div>
         `;
+    } else if (ps.type === "array" && ps.items?.type === "object" && ps.items?.properties) {
+      const rows = Array.isArray(currentValue) ? currentValue : [];
+      const itemProps = ps.items.properties;
+      control = html3`
+          <div class="array-object-field">
+            ${rows.map((row, idx) => html3`
+                <div
+                  class="array-object-row"
+                  style="display:flex;gap:4px;align-items:center;margin-bottom:4px"
+                >
+                  ${Object.entries(itemProps).map(([propKey, propSchema]) => renderInlineField(propKey, propSchema, row[propKey], (val) => {
+        const updated = [...rows];
+        updated[idx] = { ...updated[idx], [propKey]: val };
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { [prop]: updated }));
+      }, def3))}
+                  <sp-action-button
+                    quiet
+                    size="s"
+                    @click=${() => {
+        const updated = rows.filter((_, i2) => i2 !== idx);
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { [prop]: updated.length ? updated : undefined }));
+        ctx?.renderLeftPanel();
+      }}
+                  >
+                    <sp-icon-delete slot="icon"></sp-icon-delete>
+                  </sp-action-button>
+                </div>
+              `)}
+            <sp-action-button
+              quiet
+              size="s"
+              @click=${(e) => {
+        e.stopPropagation();
+        const newRow = {};
+        for (const [k, v] of Object.entries(itemProps)) {
+          if (v.default !== undefined)
+            newRow[k] = v.default;
+        }
+        transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { [prop]: [...rows, newRow] }));
+        ctx?.renderLeftPanel();
+      }}
+              >+ Add</sp-action-button
+            >
+          </div>
+        `;
     } else if (ps.type === "array" || ps.type === "object") {
       let debounce;
       control = html3`<sp-textfield
@@ -267021,17 +267053,20 @@ function renderSchemaFieldsTemplate(schema4, def3, name, _S) {
       widget: control
     });
   });
+  return html3`${propertyFields}`;
 }
 function renderExternalPrototypeEditorTemplate(S, name, def3, ctx) {
   let schemaContent = nothing;
-  if (def3.$src && def3.$prototype) {
-    const cacheKey = `${def3.$src}::${def3.$prototype}`;
+  const importedPath = def3.$prototype ? projectState?.projectConfig?.imports?.[def3.$prototype] : null;
+  const resolvedSrc = def3.$src || importedPath;
+  if (resolvedSrc && def3.$prototype) {
+    const cacheKey = `${resolvedSrc}::${def3.$prototype}`;
     if (pluginSchemaCache.has(cacheKey)) {
       const schema4 = pluginSchemaCache.get(cacheKey);
       if (schema4) {
         schemaContent = html3`
           ${schema4.description ? html3`<div class="signal-hint" style="padding:4px 0 8px">${schema4.description}</div>` : nothing}
-          ${renderSchemaFieldsTemplate(schema4, def3, name, S)}
+          ${renderSchemaFieldsTemplate(schema4, def3, name, S, ctx)}
         `;
       }
     } else {
@@ -267047,14 +267082,18 @@ function renderExternalPrototypeEditorTemplate(S, name, def3, ctx) {
     }
   }
   return html3`
-    ${signalFieldRow("Source", def3.$src || "", (v) => {
+    ${importedPath ? html3`<div class="signal-hint" style="padding:4px 0 2px;font-size:11px;color:var(--fg-dim)">
+          ${def3.$prototype}
+        </div>` : html3`
+          ${signalFieldRow("Source", def3.$src || "", (v) => {
     transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $src: v || undefined }));
     pluginSchemaCache.delete(`${v}::${def3.$prototype}`);
   })}
-    ${signalFieldRow("Prototype", def3.$prototype || "", (v) => {
+          ${signalFieldRow("Prototype", def3.$prototype || "", (v) => {
     transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $prototype: v || undefined }));
     pluginSchemaCache.delete(`${def3.$src}::${v}`);
   })}
+        `}
     ${def3.$export ? signalFieldRow("Export", def3.$export || "", (v) => transactDoc(activeTab.value, (t) => mutateUpdateDef(t, name, { $export: v || undefined }))) : nothing}
     ${schemaContent}
   `;
@@ -268516,6 +268555,7 @@ init_workspace2();
 // src/editor/context-menu.js
 init_lit_html();
 init_ref();
+init_html_to_jx();
 init_store();
 init_workspace2();
 
@@ -269016,17 +269056,93 @@ function renderLayersTemplate(ctx) {
 }
 
 // src/editor/context-menu.js
-function copyNode() {
+var JX_MIME = "web application/jx+json";
+function nodeToHtml(node2) {
+  if (typeof node2 === "string")
+    return node2;
+  const tag3 = node2.tagName || "div";
+  let attrs = "";
+  if (node2.attributes) {
+    for (const [k, v] of Object.entries(node2.attributes)) {
+      attrs += v === "" ? ` ${k}` : ` ${k}="${v.replace(/"/g, "&quot;")}"`;
+    }
+  }
+  if (node2.style) {
+    const css = Object.entries(node2.style).map(([k, v]) => `${k}:${v}`).join(";");
+    if (css)
+      attrs += ` style="${css.replace(/"/g, "&quot;")}"`;
+  }
+  let inner = "";
+  if (node2.textContent) {
+    inner = node2.textContent;
+  } else if (node2.children) {
+    inner = node2.children.map((c) => nodeToHtml(c)).join("");
+  }
+  return `<${tag3}${attrs}>${inner}</${tag3}>`;
+}
+async function writeToClipboard(json2) {
+  workspace.clipboard = json2;
+  try {
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        [JX_MIME]: new Blob([JSON.stringify(json2)], { type: JX_MIME }),
+        "text/html": new Blob([nodeToHtml(json2)], { type: "text/html" })
+      })
+    ]);
+  } catch {
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(json2));
+    } catch {}
+  }
+}
+async function readFromClipboard() {
+  try {
+    const items = await navigator.clipboard.read();
+    for (const item of items) {
+      if (item.types.includes(JX_MIME)) {
+        const blob = await item.getType(JX_MIME);
+        const json2 = JSON.parse(await blob.text());
+        return [json2];
+      }
+      if (item.types.includes("text/html")) {
+        const blob = await item.getType("text/html");
+        const htmlStr = await blob.text();
+        const nodes = htmlToJx(htmlStr);
+        const jxNodes = nodes.map((n2) => typeof n2 === "string" ? { tagName: "p", textContent: n2 } : n2);
+        if (jxNodes.length > 0)
+          return jxNodes;
+      }
+      if (item.types.includes("text/plain")) {
+        const blob = await item.getType("text/plain");
+        const text6 = await blob.text();
+        try {
+          const parsed = JSON.parse(text6);
+          if (parsed && parsed.tagName)
+            return [parsed];
+        } catch {}
+        if (text6.trim())
+          return [{ tagName: "p", textContent: text6.trim() }];
+      }
+    }
+  } catch {
+    if (workspace.clipboard) {
+      return [JSON.parse(JSON.stringify(workspace.clipboard))];
+    }
+  }
+  return null;
+}
+async function copyNode() {
   const tab = activeTab.value;
   if (!tab?.session.selection)
     return;
   const node2 = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node2)
     return;
-  workspace.clipboard = structuredClone(node2);
+  const json2 = JSON.parse(JSON.stringify(node2));
+  await writeToClipboard(json2);
   statusMessage("Copied");
 }
-function cutNode() {
+async function cutNode() {
   const tab = activeTab.value;
   if (!tab?.session.selection || tab.session.selection.length < 2)
     return;
@@ -269034,17 +269150,18 @@ function cutNode() {
   const node2 = getNodeAtPath(tab.doc.document, sel);
   if (!node2)
     return;
-  workspace.clipboard = structuredClone(node2);
+  const json2 = JSON.parse(JSON.stringify(node2));
+  await writeToClipboard(json2);
   transactDoc(tab, (t) => mutateRemoveNode(t, sel));
   statusMessage("Cut");
 }
-function pasteNode() {
-  if (!workspace.clipboard)
-    return;
+async function pasteNode() {
   const tab = activeTab.value;
   if (!tab)
     return;
-  const clip = workspace.clipboard;
+  const nodes = await readFromClipboard();
+  if (!nodes || nodes.length === 0)
+    return;
   const pPath = tab.session.selection || [];
   const parent = getNodeAtPath(tab.doc.document, pPath);
   if (!parent)
@@ -269052,10 +269169,18 @@ function pasteNode() {
   if (tab.session.selection && tab.session.selection.length >= 2) {
     const pp = parentElementPath(tab.session.selection);
     const idx = childIndex(tab.session.selection);
-    transactDoc(tab, (t) => mutateInsertNode(t, pp, idx + 1, structuredClone(clip)));
+    transactDoc(tab, (t) => {
+      for (let i2 = 0;i2 < nodes.length; i2++) {
+        mutateInsertNode(t, pp, idx + 1 + i2, nodes[i2]);
+      }
+    });
   } else {
     const idx = parent.children ? parent.children.length : 0;
-    transactDoc(tab, (t) => mutateInsertNode(t, pPath, idx, structuredClone(clip)));
+    transactDoc(tab, (t) => {
+      for (let i2 = 0;i2 < nodes.length; i2++) {
+        mutateInsertNode(t, pPath, idx + i2, nodes[i2]);
+      }
+    });
   }
   statusMessage("Pasted");
 }
@@ -269159,26 +269284,39 @@ function showContextMenu(e, path2, opts = {}) {
       danger: true
     });
   }
-  if (workspace.clipboard) {
-    const clip = workspace.clipboard;
+  if (path2.length >= 2) {
     items.push({ label: "—" });
     items.push({
       label: "Paste inside",
-      action: () => {
+      action: async () => {
+        const nodes = await readFromClipboard();
+        if (!nodes || nodes.length === 0)
+          return;
         const idx = node2.children ? node2.children.length : 0;
-        transactDoc(activeTab.value, (t) => mutateInsertNode(t, path2, idx, structuredClone(clip)));
+        transactDoc(activeTab.value, (t) => {
+          for (let i2 = 0;i2 < nodes.length; i2++) {
+            mutateInsertNode(t, path2, idx + i2, nodes[i2]);
+          }
+        });
+        statusMessage("Pasted");
+      }
+    });
+    items.push({
+      label: "Paste after",
+      action: async () => {
+        const nodes = await readFromClipboard();
+        if (!nodes || nodes.length === 0)
+          return;
+        const pp = parentElementPath(path2);
+        const idx = childIndex(path2);
+        transactDoc(activeTab.value, (t) => {
+          for (let i2 = 0;i2 < nodes.length; i2++) {
+            mutateInsertNode(t, pp, idx + 1 + i2, nodes[i2]);
+          }
+        });
+        statusMessage("Pasted");
       }
     });
-    if (path2.length >= 2) {
-      items.push({
-        label: "Paste after",
-        action: () => {
-          const pp = parentElementPath(path2);
-          const idx = childIndex(path2);
-          transactDoc(activeTab.value, (t) => mutateInsertNode(t, pp, idx + 1, structuredClone(clip)));
-        }
-      });
-    }
   }
   let { clientX: x, clientY: y } = e;
   _ctxHandle = renderPopover(html3`<sp-popover
@@ -269266,7 +269404,8 @@ function onMouseMove(e) {
   if (!_ctx8 || !_helper)
     return;
   const { getCanvasMode } = _ctx8;
-  if (getCanvasMode() !== "design") {
+  const mode = getCanvasMode();
+  if (mode !== "design" && mode !== "edit") {
     hide2();
     return;
   }
@@ -270414,12 +270553,12 @@ function applyCanvasMediaOverrides(canvasEl, activeBreakpoints) {
   if (!tab)
     return;
   const docMedia = getEffectiveMedia(tab.doc.document.$media || {});
-  const validBreakpoints = new Set;
+  const activeConditions = new Set;
   for (const name of activeBreakpoints) {
     if (docMedia[name])
-      validBreakpoints.add(name);
+      activeConditions.add(docMedia[name]);
   }
-  const overrides = collectMediaOverrides(document.styleSheets, validBreakpoints);
+  const overrides = collectMediaOverrides(document.styleSheets, activeConditions);
   applyOverridesToCanvas(canvasEl, overrides);
 }
 function renderOverlays() {
@@ -271639,6 +271778,21 @@ function cleanupGoogleFontPreconnects(head) {
 }
 
 // src/panels/head-panel.js
+init_platform3();
+var layoutEntries = null;
+async function loadLayoutEntries() {
+  try {
+    const platform3 = getPlatform();
+    const listing = await platform3.listDirectory("layouts");
+    layoutEntries = listing.filter((f) => f.type === "file" && f.name.endsWith(".json")).map((f) => ({
+      name: f.name.replace(/\.json$/, "").replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()),
+      path: `./layouts/${f.name}`
+    }));
+  } catch {
+    layoutEntries = [];
+  }
+  renderOnly("leftPanel");
+}
 var PAGE_FIELDS = [
   { label: "Description", attr: "name", key: "description" },
   { label: "Viewport", attr: "name", key: "viewport" }
@@ -271776,9 +271930,63 @@ function renderHeadTemplate({ document: doc, applyMutation, renderLeftPanel }) {
   const tab = activeTab.value;
   const isContent = tab?.doc.mode === "content";
   const frontmatterSection = isContent ? renderFrontmatterSection() : nothing;
+  const isPage = tab?.documentPath && projectState?.isSiteProject && (tab.documentPath.startsWith("pages/") || tab.documentPath.startsWith("./pages/"));
+  let layoutSection = nothing;
+  if (isPage) {
+    if (layoutEntries === null) {
+      loadLayoutEntries();
+    } else {
+      const currentLayout = doc.$layout;
+      const defaultLayout = projectState?.projectConfig?.defaults?.layout;
+      const displayValue = currentLayout === false ? "__none__" : currentLayout ? currentLayout : "__default__";
+      const defaultLabel = defaultLayout ? defaultLayout.replace(/^\.\/layouts\//, "").replace(/\.json$/, "").replace(/[-_]+/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) : "";
+      layoutSection = html3`
+        <div class="imports-section">
+          <div class="imports-section-header">
+            <span class="imports-section-title">Layout</span>
+          </div>
+          <div class="head-section-body">
+            ${renderFieldRow({
+        prop: "layout",
+        label: "Layout",
+        hasValue: currentLayout !== undefined,
+        onClear: () => applyMutation((d2) => {
+          delete d2.$layout;
+        }),
+        widget: html3`
+                <sp-picker
+                  size="s"
+                  value=${displayValue}
+                  @change=${(e) => {
+          const val = e.target.value;
+          applyMutation((d2) => {
+            if (val === "__default__")
+              delete d2.$layout;
+            else if (val === "__none__")
+              d2.$layout = false;
+            else
+              d2.$layout = val;
+          });
+          invalidateLayoutCache();
+        }}
+                >
+                  <sp-menu-item value="__default__"
+                    >Default${defaultLabel ? ` (${defaultLabel})` : ""}</sp-menu-item
+                  >
+                  <sp-menu-item value="__none__">None</sp-menu-item>
+                  <sp-menu-divider></sp-menu-divider>
+                  ${layoutEntries.map((l) => html3`<sp-menu-item value=${l.path}>${l.name}</sp-menu-item>`)}
+                </sp-picker>
+              `
+      })}
+          </div>
+        </div>
+      `;
+    }
+  }
   return html3`
     <div class="imports-panel">
-      ${frontmatterSection}
+      ${frontmatterSection} ${layoutSection}
 
       <!-- Page section -->
       <div class="imports-section">
@@ -299628,7 +299836,7 @@ function renderHeadEditor(container) {
     } else if (tag5 === "script") {
       attrs.src = "";
     } else if (tag5 === "style") {
-      entry.content = "";
+      entry.textContent = "";
     }
     headEntries.push(entry);
     save();
@@ -299642,7 +299850,7 @@ function renderHeadEditor(container) {
   const updateEntry = (idx, key, val) => {
     const entry = headEntries[idx];
     if (key === "content" && (entry.tagName === "script" || entry.tagName === "style")) {
-      entry.content = val;
+      entry.textContent = val;
     } else {
       if (!entry.attributes)
         entry.attributes = {};
@@ -299752,7 +299960,7 @@ function renderEntryFields(entry, idx, updateEntry) {
                 <label class="settings-field-label">Script body</label>
                 <textarea
                   class="head-code-editor"
-                  .value=${entry.content || ""}
+                  .value=${entry.textContent || ""}
                   @input=${onFieldChange("content")}
                   rows="6"
                   spellcheck="false"
@@ -299766,7 +299974,7 @@ function renderEntryFields(entry, idx, updateEntry) {
           <label class="settings-field-label">Style body</label>
           <textarea
             class="head-code-editor"
-            .value=${entry.content || ""}
+            .value=${entry.textContent || ""}
             @input=${onFieldChange("content")}
             rows="8"
             spellcheck="false"
@@ -304057,6 +304265,47 @@ function styleSidebarTemplate(node2, activeMediaTab, activeSelector, effectiveSt
       }
       return false;
     });
+    const isOpen2 = isFiltering ? true : tab.session.ui.styleSections[sec.key] ?? false;
+    if (!isOpen2) {
+      return html3`
+          <sp-accordion-item
+            label=${sec.label}
+            .open=${false}
+            @sp-accordion-item-toggle=${(e20) => {
+        activeTab.value.session.ui.styleSections = {
+          ...activeTab.value.session.ui.styleSections,
+          [sec.key]: e20.target.open
+        };
+      }}
+          >
+            ${sectionActiveProps.length > 0 ? html3`
+                  <span slot="heading" style="display:flex;align-items:center;gap:6px">
+                    ${sec.label}
+                    <span
+                      class="set-dot set-dot--section"
+                      title="Clear all ${sec.label.toLowerCase()} properties"
+                      @click=${(e20) => {
+        e20.stopPropagation();
+        e20.preventDefault();
+        transactDoc(activeTab.value, (t15) => {
+          for (const { prop, entry } of sectionActiveProps) {
+            if (activeStyle[prop] !== undefined)
+              commitMutate(t15, prop, undefined);
+            if (inferInputType(entry) === "shorthand") {
+              for (const l of getLonghands(prop)) {
+                if (activeStyle[l.name] !== undefined)
+                  commitMutate(t15, l.name, undefined);
+              }
+            }
+          }
+        });
+      }}
+                    ></span>
+                  </span>
+                ` : nothing}
+          </sp-accordion-item>
+        `;
+    }
     const rows = [];
     for (const { prop, entry } of entries2) {
       const val = activeStyle[prop];
@@ -304094,7 +304343,6 @@ function styleSidebarTemplate(node2, activeMediaTab, activeSelector, effectiveSt
     }
     if (isFiltering && rows.length === 0)
       return nothing;
-    const isOpen2 = isFiltering ? true : tab.session.ui.styleSections[sec.key] ?? false;
     return html3`
         <sp-accordion-item
           label=${sec.label}
@@ -305153,17 +305401,17 @@ function mediaBreakpointRowTemplate(name, query3) {
     </div>
   `;
 }
-var layoutEntries = null;
-async function loadLayoutEntries() {
+var layoutEntries2 = null;
+async function loadLayoutEntries2() {
   try {
     const platform4 = getPlatform();
     const listing = await platform4.listDirectory("layouts");
-    layoutEntries = listing.filter((f) => f.type === "file" && f.name.endsWith(".json")).map((f) => ({
+    layoutEntries2 = listing.filter((f) => f.type === "file" && f.name.endsWith(".json")).map((f) => ({
       name: f.name.replace(/\.json$/, ""),
       path: `./layouts/${f.name}`
     }));
   } catch {
-    layoutEntries = [];
+    layoutEntries2 = [];
   }
   renderOnly("rightPanel");
 }
@@ -305176,8 +305424,8 @@ function renderPageSection(node2) {
   const tab = activeTab.value;
   if (!isPageDocument(tab.documentPath))
     return nothing;
-  if (layoutEntries === null) {
-    loadLayoutEntries();
+  if (layoutEntries2 === null) {
+    loadLayoutEntries2();
     return nothing;
   }
   const currentLayout = node2.$layout;
@@ -305219,7 +305467,7 @@ function renderPageSection(node2) {
             >
             <sp-menu-item value="__none__">None</sp-menu-item>
             <sp-menu-divider></sp-menu-divider>
-            ${layoutEntries.map((l) => html3`<sp-menu-item value=${l.path}>${l.name}</sp-menu-item>`)}
+            ${layoutEntries2.map((l) => html3`<sp-menu-item value=${l.path}>${l.name}</sp-menu-item>`)}
           </sp-picker>
         </div>
         ${effectivePath ? html3`<div style="font-size:10px;color:var(--fg-dim);padding:2px 0;font-style:italic">
@@ -306640,8 +306888,20 @@ var _scope5 = null;
 var _rendering = false;
 var _scheduled2 = false;
 var _hasFocus = false;
-function _onFocusIn() {
-  _hasFocus = true;
+function _isTextInput(el) {
+  if (!el)
+    return false;
+  const tag5 = el.tagName.toLowerCase();
+  if (tag5 === "input" || tag5 === "textarea")
+    return true;
+  if (tag5 === "sp-textfield" || tag5 === "sp-number-field" || tag5 === "sp-search")
+    return true;
+  if (el.shadowRoot?.activeElement)
+    return _isTextInput(el.shadowRoot.activeElement);
+  return false;
+}
+function _onFocusIn(e21) {
+  _hasFocus = _isTextInput(e21.target);
 }
 function _onFocusOut() {
   _hasFocus = false;
@@ -306685,6 +306945,24 @@ function render6() {
     queueMicrotask(_flush2);
   }
 }
+var _propsContainer = null;
+var _eventsContainer = null;
+var _styleContainer = null;
+var _assistantContainer = null;
+var _lastTab = null;
+function _ensureContainers() {
+  if (_propsContainer)
+    return;
+  _propsContainer = document.createElement("div");
+  _propsContainer.className = "panel-body";
+  _eventsContainer = document.createElement("div");
+  _eventsContainer.className = "panel-body";
+  _styleContainer = document.createElement("div");
+  _styleContainer.className = "panel-body";
+  _assistantContainer = document.createElement("div");
+  _assistantContainer.className = "panel-body";
+  _assistantContainer.style.cssText = "display:flex;flex-direction:column;overflow:hidden";
+}
 function _flush2() {
   _scheduled2 = false;
   if (!_ctx13)
@@ -306693,86 +306971,88 @@ function _flush2() {
     return;
   _rendering = true;
   try {
-    render2(rightPanelTemplate(), rightPanel);
-  } catch (e21) {
-    console.error("right-panel render error:", e21);
-    try {
+    const ctx = _ctx13;
+    const aTab = activeTab.value;
+    if (!aTab) {
       rightPanel.textContent = "";
-      delete rightPanel["_$litPart$"];
-      render2(rightPanelTemplate(), rightPanel);
-    } catch (e22) {
-      console.error("right-panel retry failed:", e22);
+      return;
+    }
+    const S = {
+      ui: aTab.session.ui,
+      document: aTab.doc.document,
+      mode: aTab.doc.mode,
+      selection: aTab.session.selection
+    };
+    const tab = S.ui.rightTab;
+    const panelTabs = [
+      { value: "properties", icon: "sp-icon-properties", label: "Properties" },
+      { value: "events", icon: "sp-icon-event", label: "Events" },
+      { value: "style", icon: "sp-icon-brush", label: "Style" },
+      { value: "assistant", icon: "sp-icon-chat", label: "Assistant" }
+    ];
+    const tabsT = html3`
+      <div class="panel-tabs">
+        <sp-tabs
+          selected=${tab}
+          quiet
+          @change=${(e21) => {
+      const sel = e21.target.selected;
+      if (sel && sel !== tab) {
+        updateUi("rightTab", sel);
+        render6();
+      }
+    }}
+        >
+          ${panelTabs.map((t16) => html3`
+              <sp-tab value=${t16.value} title=${t16.label} aria-label=${t16.label}>
+                ${tabIcon(t16.icon, "xs")}
+              </sp-tab>
+            `)}
+        </sp-tabs>
+      </div>
+    `;
+    _ensureContainers();
+    const containers = [
+      _propsContainer,
+      _eventsContainer,
+      _styleContainer,
+      _assistantContainer
+    ];
+    const tabKeys = ["properties", "events", "style", "assistant"];
+    for (let i8 = 0;i8 < containers.length; i8++) {
+      if (tabKeys[i8] === tab) {
+        containers[i8].style.display = tabKeys[i8] === "assistant" ? "flex" : "";
+      } else {
+        containers[i8].style.display = "none";
+      }
+    }
+    render2(tabsT, rightPanel);
+    for (const c7 of containers) {
+      if (!c7.parentNode)
+        rightPanel.appendChild(c7);
     }
+    if (tab === "properties") {
+      render2(renderPropertiesPanelTemplate({ navigateToComponent: ctx.navigateToComponent }), _propsContainer);
+    } else if (tab === "events") {
+      render2(eventsSidebarTemplate({ isCustomElementDoc: () => isCustomElementDoc(S) }), _eventsContainer);
+    } else if (tab === "style") {
+      try {
+        render2(renderStylePanelTemplate({ getCanvasMode: ctx.getCanvasMode }), _styleContainer);
+      } catch (e21) {
+        console.error("[renderStylePanelTemplate]", e21);
+      }
+    } else if (tab === "assistant") {
+      render2(renderAiPanelTemplate(), _assistantContainer);
+    }
+    _lastTab = tab;
+  } catch (e21) {
+    console.error("right-panel render error:", e21);
   } finally {
     _rendering = false;
   }
   requestAnimationFrame(() => mountQuikChat());
   _ctx13.updateForcedPseudoPreview();
 }
-function rightPanelTemplate() {
-  const ctx = _ctx13;
-  const aTab = activeTab.value;
-  if (!aTab)
-    return nothing;
-  const S = {
-    ui: aTab.session.ui,
-    document: aTab.doc.document,
-    mode: aTab.doc.mode,
-    selection: aTab.session.selection
-  };
-  const tab = S.ui.rightTab;
-  const panelTabs = [
-    { value: "properties", icon: "sp-icon-properties", label: "Properties" },
-    { value: "events", icon: "sp-icon-event", label: "Events" },
-    { value: "style", icon: "sp-icon-brush", label: "Style" },
-    { value: "assistant", icon: "sp-icon-chat", label: "Assistant" }
-  ];
-  const tabsT = html3`
-    <div class="panel-tabs">
-      <sp-tabs
-        selected=${tab}
-        quiet
-        @change=${(e21) => {
-    const sel = e21.target.selected;
-    if (sel && sel !== tab) {
-      updateUi("rightTab", sel);
-    }
-  }}
-      >
-        ${panelTabs.map((t16) => html3`
-            <sp-tab value=${t16.value} title=${t16.label} aria-label=${t16.label}>
-              ${tabIcon(t16.icon, "xs")}
-            </sp-tab>
-          `)}
-      </sp-tabs>
-    </div>
-  `;
-  let bodyT = nothing;
-  if (tab === "properties") {
-    bodyT = renderPropertiesPanelTemplate({ navigateToComponent: ctx.navigateToComponent });
-  } else if (tab === "events") {
-    bodyT = eventsSidebarTemplate({
-      isCustomElementDoc: () => isCustomElementDoc(S)
-    });
-  } else if (tab === "style") {
-    try {
-      bodyT = renderStylePanelTemplate({ getCanvasMode: ctx.getCanvasMode });
-    } catch (e21) {
-      console.error("[renderStylePanelTemplate]", e21);
-    }
-  } else if (tab === "assistant") {
-    bodyT = renderAiPanelTemplate();
-  }
-  return html3`
-    ${tabsT}
-    <div
-      class="panel-body"
-      style=${tab === "assistant" ? "display:flex;flex-direction:column;overflow:hidden" : ""}
-    >
-      ${bodyT}
-    </div>
-  `;
-}
 
 // src/panels/left-panel.js
 init_lit_html();
@@ -307749,5 +308029,5 @@ effect(() => {
     scheduleAutosave();
 });
 
-//# debugId=F13607B73179696E64756E2164756E21
+//# debugId=44524F8AC477F4E864756E2164756E21
 //# sourceMappingURL=studio.js.map