@jxsuite/studio 0.10.1 → 0.10.2

package/dist/studio.js

@@ -32876,7 +32876,7 @@ var init_lit = __esm(() => {
 });
 
 // ../../node_modules/@spectrum-web-components/base/src/version.dev.js
-var version2 = "1.12.0", coreVersion2 = "0.1.0";
+var version2 = "1.12.1", coreVersion2 = "0.1.0";
 
 // ../../node_modules/@spectrum-web-components/base/src/Base.dev.js
 function SpectrumMixin(constructor) {
@@ -174677,7 +174677,13 @@ async function renderCanvasLive(gen, doc, canvasEl) {
             console.warn("Studio: failed to import package", entry, e);
           }
         } else if (entry?.$ref) {
-          const href = new URL(entry.$ref, docBase).href;
+          let href;
+          try {
+            href = new URL(entry.$ref, docBase).href;
+          } catch (urlErr) {
+            console.warn("Studio: invalid element URL", { ref: entry.$ref, docBase }, urlErr);
+            continue;
+          }
           try {
             await defineElement(href);
           } catch (e) {
@@ -176032,10 +176038,10 @@ function inferInputType(entry) {
     return "combobox";
   return "text";
 }
-function findCollectionSchema(documentPath, projectConfig) {
-  if (!documentPath || !projectConfig?.collections)
+function findContentTypeSchema(documentPath, projectConfig) {
+  if (!documentPath || !projectConfig?.contentTypes)
     return null;
-  for (const [name, def3] of Object.entries(projectConfig.collections)) {
+  for (const [name, def3] of Object.entries(projectConfig.contentTypes)) {
     if (!def3.source || !def3.schema)
       continue;
     const src = def3.source.replace(/^\.\//, "");
@@ -176609,14 +176615,14 @@ function renderDefsEditor(container) {
   render2(tpl, container);
 }
 
-// src/settings/collections-editor.js
+// src/settings/content-types-editor.js
 init_platform();
 init_store();
-var selectedCollection = null;
+var selectedContentType = null;
 var showAddField2 = false;
 var newFieldState2 = { name: "", type: "string", required: false };
-var showNewCollection = false;
-var newCollectionName = "";
+var showNewContentType = false;
+var newContentTypeName = "";
 async function saveProjectConfig2() {
   const platform3 = getPlatform();
   const config = projectState.projectConfig;
@@ -176624,35 +176630,35 @@ async function saveProjectConfig2() {
 }
 function getSelectedSchema() {
   const config = projectState?.projectConfig;
-  return config?.collections?.[selectedCollection]?.schema;
+  return config?.contentTypes?.[selectedContentType]?.schema;
 }
-function handleNewCollection(rerender) {
-  const slug = newCollectionName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
+function handleNewContentType(rerender) {
+  const slug = newContentTypeName.toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9-]/g, "");
   if (!slug)
     return;
   const config = projectState?.projectConfig;
   if (!config)
     return;
-  if (!config.collections)
-    config.collections = {};
-  if (config.collections[slug])
+  if (!config.contentTypes)
+    config.contentTypes = {};
+  if (config.contentTypes[slug])
     return;
-  config.collections[slug] = {
-    source: `./${slug}/**/*.md`,
+  config.contentTypes[slug] = {
+    source: `./content/${slug}/**/*.md`,
     schema: { type: "object", properties: {}, required: [] }
   };
-  selectedCollection = slug;
-  showNewCollection = false;
-  newCollectionName = "";
+  selectedContentType = slug;
+  showNewContentType = false;
+  newContentTypeName = "";
   rerender();
   saveProjectConfig2().then(async () => {
     const platform3 = getPlatform();
-    await platform3.writeFile(`${slug}/.gitkeep`, "");
+    await platform3.writeFile(`content/${slug}/.gitkeep`, "");
   });
 }
 function handleAddField2(rerender) {
   const name = newFieldState2.name.trim();
-  if (!name || !selectedCollection)
+  if (!name || !selectedContentType)
     return;
   const schema = getSelectedSchema();
   if (!schema)
@@ -176788,30 +176794,30 @@ function handleChangeNestedType2(parentName, childName, newType, rerender) {
   rerender();
   saveProjectConfig2();
 }
-function handleDeleteCollection(rerender) {
-  if (!selectedCollection)
+function handleDeleteContentType(rerender) {
+  if (!selectedContentType)
     return;
   const config = projectState?.projectConfig;
-  if (!config?.collections?.[selectedCollection])
+  if (!config?.contentTypes?.[selectedContentType])
     return;
-  delete config.collections[selectedCollection];
-  selectedCollection = null;
+  delete config.contentTypes[selectedContentType];
+  selectedContentType = null;
   rerender();
   saveProjectConfig2();
 }
-function renderCollectionsEditor(container) {
-  const rerender = () => renderCollectionsEditor(container);
+function renderContentTypesEditor(container) {
+  const rerender = () => renderContentTypesEditor(container);
   const config = projectState?.projectConfig;
-  const collections = config?.collections || {};
-  const collectionNames = Object.keys(collections);
+  const contentTypes = config?.contentTypes || {};
+  const contentTypeNames = Object.keys(contentTypes);
   const listTpl = html`
     <div class="settings-list-panel">
-      ${collectionNames.map((name) => html`
+      ${contentTypeNames.map((name) => html`
           <sp-action-button
             size="s"
-            ?selected=${selectedCollection === name}
+            ?selected=${selectedContentType === name}
             @click=${() => {
-    selectedCollection = name;
+    selectedContentType = name;
     showAddField2 = false;
     rerender();
   }}
@@ -176819,25 +176825,25 @@ function renderCollectionsEditor(container) {
             ${name}
           </sp-action-button>
         `)}
-      ${showNewCollection ? html`
+      ${showNewContentType ? html`
             <div class="settings-inline-form">
               <sp-textfield
                 size="s"
-                placeholder="collection-name"
-                .value=${newCollectionName}
+                placeholder="content-type-name"
+                .value=${newContentTypeName}
                 @input=${(e) => {
-    newCollectionName = e.target.value;
+    newContentTypeName = e.target.value;
   }}
                 @keydown=${(e) => {
     if (e.key === "Enter")
-      handleNewCollection(rerender);
+      handleNewContentType(rerender);
     if (e.key === "Escape") {
-      showNewCollection = false;
+      showNewContentType = false;
       rerender();
     }
   }}
               ></sp-textfield>
-              <sp-action-button size="s" @click=${() => handleNewCollection(rerender)}>
+              <sp-action-button size="s" @click=${() => handleNewContentType(rerender)}>
                 Create
               </sp-action-button>
             </div>
@@ -176846,20 +176852,20 @@ function renderCollectionsEditor(container) {
               size="s"
               quiet
               @click=${() => {
-    showNewCollection = true;
+    showNewContentType = true;
     rerender();
   }}
             >
-              <sp-icon-add slot="icon"></sp-icon-add> New Collection
+              <sp-icon-add slot="icon"></sp-icon-add> New Content Type
             </sp-action-button>
           `}
     </div>
   `;
   let editorTpl;
-  if (!selectedCollection || !collections[selectedCollection]) {
-    editorTpl = html`<div class="settings-empty-state">Select or create a collection</div>`;
+  if (!selectedContentType || !contentTypes[selectedContentType]) {
+    editorTpl = html`<div class="settings-empty-state">Select or create a content type</div>`;
   } else {
-    const col = collections[selectedCollection];
+    const col = contentTypes[selectedContentType];
     const schema = col.schema || {};
     const properties = schema.properties || {};
     const required = schema.required || [];
@@ -176878,13 +176884,13 @@ function renderCollectionsEditor(container) {
     editorTpl = html`
       <div class="settings-editor-panel">
         <div class="settings-editor-header">
-          <h3>${selectedCollection}</h3>
+          <h3>${selectedContentType}</h3>
           <sp-field-label size="s">Source: ${col.source || "—"}</sp-field-label>
           <sp-action-button
             size="xs"
             quiet
-            title="Delete collection"
-            @click=${() => handleDeleteCollection(rerender)}
+            title="Delete content type"
+            @click=${() => handleDeleteContentType(rerender)}
           >
             <sp-icon-delete slot="icon"></sp-icon-delete>
           </sp-action-button>
@@ -177145,11 +177151,11 @@ function renderStylebookMode(ctx) {
       >
         <sp-tab label="Stylebook" value="stylebook"></sp-tab>
         <sp-tab label="Definitions" value="definitions"></sp-tab>
-        <sp-tab label="Collections" value="collections"></sp-tab>
+        <sp-tab label="Content Types" value="contentTypes"></sp-tab>
       </sp-tabs>
     </div>
   `;
-  if (settingsTab === "definitions" || settingsTab === "collections") {
+  if (settingsTab === "definitions" || settingsTab === "contentTypes") {
     canvasWrap.style.overflow = "hidden";
     render2(html`${settingsChromeBarTpl}
         <div
@@ -177160,7 +177166,7 @@ function renderStylebookMode(ctx) {
     if (settingsTab === "definitions")
       renderDefsEditor(container);
     else
-      renderCollectionsEditor(container);
+      renderContentTypesEditor(container);
     return;
   }
   view.stylebookElToTag = new WeakMap;
@@ -177293,13 +177299,6 @@ function selectStylebookTag(tag3, media) {
     }
   });
   renderStylebookOverlays();
-  requestAnimationFrame(() => {
-    if (canvasPanels.length > 0) {
-      const el = findStylebookEl(canvasPanels[0].canvas, tag3);
-      if (el)
-        el.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  });
 }
 function renderStylebookOverlays() {
   if (!_ctx6)
@@ -177337,7 +177336,7 @@ function renderStylebookOverlays() {
       `, panel.overlay);
   }
 }
-function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
+function buildStylebookElement(entry, rootStyle, activeBreakpoints, parentTag = null) {
   const el = document.createElement(entry.tag);
   if (entry.text)
     el.textContent = entry.text;
@@ -177350,7 +177349,8 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
   }
   if (entry.style)
     el.style.cssText = entry.style;
-  const tagStyle = rootStyle[`& ${entry.tag}`];
+  const compoundSelector = parentTag && parentTag !== entry.tag ? `& ${parentTag} ${entry.tag}` : null;
+  const tagStyle = compoundSelector && rootStyle[compoundSelector] || rootStyle[`& ${entry.tag}`];
   if (tagStyle) {
     for (const [prop, val] of Object.entries(tagStyle)) {
       if (typeof val === "string" || typeof val === "number") {
@@ -177380,7 +177380,7 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
   }
   if (entry.children) {
     for (const child of entry.children) {
-      el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints));
+      el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints, entry.tag));
     }
   }
   return el;
@@ -177417,6 +177417,11 @@ function hasTagStyle(rootStyle, tag3) {
   return s && typeof s === "object" && Object.keys(s).length > 0;
 }
 function renderStylebookElementsIntoCanvas(canvasEl, rootStyle, filter, customizedOnly, activeBreakpoints) {
+  for (const [k, v] of Object.entries(rootStyle)) {
+    if (k.startsWith("--") && (typeof v === "string" || typeof v === "number")) {
+      canvasEl.style.setProperty(k, String(v));
+    }
+  }
   const sectionTemplates = [];
   for (const section of stylebook_meta_default.$sections) {
     let entries2 = section.elements;
@@ -177439,10 +177444,11 @@ function renderStylebookElementsIntoCanvas(canvasEl, rootStyle, filter, customiz
         view.stylebookElToTag.set(card, entry.tag);
         elToPath.set(card, ["__sb", entry.tag]);
         for (const child of el.querySelectorAll("*")) {
-          const tag3 = child.tagName.toLowerCase();
+          const childTag = child.tagName.toLowerCase();
           if (!view.stylebookElToTag.has(child)) {
-            view.stylebookElToTag.set(child, tag3);
-            elToPath.set(child, ["__sb", tag3]);
+            const compound = childTag === entry.tag ? entry.tag : `${entry.tag} ${childTag}`;
+            view.stylebookElToTag.set(child, compound);
+            elToPath.set(child, ["__sb", compound]);
           }
         }
       })}
@@ -177450,8 +177456,10 @@ function renderStylebookElementsIntoCanvas(canvasEl, rootStyle, filter, customiz
           <div
             class="element-card-preview"
             ${ref((c) => {
-        if (c && !c.firstChild)
+        if (c) {
+          c.textContent = "";
           c.appendChild(el);
+        }
       })}
           ></div>
           <div class="element-card-label">&lt;${entry.tag}&gt;</div>
@@ -179094,9 +179102,9 @@ var ENTITY_TYPES = [
   { key: "component", label: "Component", dir: "components", ext: ".json" },
   { key: "content", label: "Content", dir: "content", ext: ".md" }
 ];
-function buildFrontmatterYaml(collectionName) {
+function buildFrontmatterYaml(contentTypeName) {
   const config = projectState?.projectConfig;
-  const col = config?.collections?.[collectionName];
+  const col = config?.contentTypes?.[contentTypeName];
   if (!col?.schema?.properties)
     return `title: Untitled
 `;
@@ -179109,26 +179117,26 @@ function buildFrontmatterYaml(collectionName) {
   return yaml || `title: Untitled
 `;
 }
-function getCollectionTypes() {
+function getContentTypeTypes() {
   const config = projectState?.projectConfig;
-  if (!config?.collections)
+  if (!config?.contentTypes)
     return [];
-  return Object.entries(config.collections).map(([name, def3]) => {
+  return Object.entries(config.contentTypes).map(([name, def3]) => {
     const d2 = def3;
     const dir = d2.source ? d2.source.replace(/^\.\//, "").split("/")[0] : name;
     return {
-      key: `collection:${name}`,
+      key: `contentType:${name}`,
       label: name.charAt(0).toUpperCase() + name.slice(1),
       dir,
       ext: ".md",
-      collectionName: name
+      contentTypeName: name
     };
   });
 }
 async function handleNewEntity(typeKey, container, ctx) {
-  const isCollection = typeKey.startsWith("collection:");
-  const collectionName = isCollection ? typeKey.slice("collection:".length) : null;
-  const allTypes = [...ENTITY_TYPES, ...getCollectionTypes()];
+  const isContentType = typeKey.startsWith("contentType:");
+  const contentTypeName = isContentType ? typeKey.slice("contentType:".length) : null;
+  const allTypes = [...ENTITY_TYPES, ...getContentTypeTypes()];
   const typeInfo = allTypes.find((t) => t.key === typeKey);
   if (!typeInfo)
     return;
@@ -179139,7 +179147,7 @@ async function handleNewEntity(typeKey, container, ctx) {
   const filePath = `${typeInfo.dir}/${slug}${typeInfo.ext}`;
   let content;
   if (typeInfo.ext === ".md") {
-    const frontmatter = collectionName ? buildFrontmatterYaml(collectionName) : `title: Untitled
+    const frontmatter = contentTypeName ? buildFrontmatterYaml(contentTypeName) : `title: Untitled
 `;
     content = `---
 ${frontmatter}---
@@ -179180,7 +179188,7 @@ async function renderBrowse(container, ctx) {
     await loadFiles();
   }
   const files = filteredFiles();
-  const collectionTypes = getCollectionTypes();
+  const contentTypeTypes = getContentTypeTypes();
   const filterBar = html`
     <div class="browse-filter-bar">
       <sp-action-group selects="single" size="s" compact>
@@ -179216,7 +179224,7 @@ async function renderBrowse(container, ctx) {
             @change=${(e) => handleNewEntity(e.target.value, container, ctx)}
           >
             ${ENTITY_TYPES.map((t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`)}
-            ${collectionTypes.length ? html`<sp-menu-divider></sp-menu-divider> ${collectionTypes.map((t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`)}` : ""}
+            ${contentTypeTypes.length ? html`<sp-menu-divider></sp-menu-divider> ${contentTypeTypes.map((t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`)}` : ""}
           </sp-menu>
         </sp-popover>
       </overlay-trigger>
@@ -179527,7 +179535,8 @@ function renderCanvas() {
   const S = _ctx10.getState();
   const canvasMode = _ctx10.getCanvasMode();
   ++view.renderGeneration;
-  if (canvasWrap["_$litPart$"]) {
+  const modeChanged = canvasMode !== view.prevCanvasMode;
+  if (modeChanged && canvasWrap["_$litPart$"]) {
     canvasWrap.textContent = "";
     delete canvasWrap["_$litPart$"];
   }
@@ -179548,7 +179557,6 @@ function renderCanvas() {
     }
     return;
   }
-  const modeChanged = canvasMode !== view.prevCanvasMode;
   view.prevCanvasMode = canvasMode;
   for (const fn of view.canvasDndCleanups)
     fn();
@@ -183992,6 +184000,8 @@ ${md}` : md;
     if (path2.endsWith(".md")) {
       await ctx.loadMarkdown(content3, null);
       ctx.S.documentPath = path2;
+      ctx.S.dirty = false;
+      ctx.commit(ctx.S);
     } else {
       const doc = JSON.parse(content3);
       const newS = createState(doc);
@@ -187269,7 +187279,7 @@ function renderGitPanel(S) {
 }
 
 // ../../node_modules/@spectrum-web-components/base/src/version.js
-var version = "1.12.0";
+var version = "1.12.1";
 var coreVersion = "0.1.0";
 
 // ../../node_modules/@spectrum-web-components/theme/src/theme-interfaces.dev.js
@@ -213747,7 +213757,7 @@ function kvRow(key, value2, onChange, onDelete, datalistId = null) {
 function renderFrontmatterOnlyPanel() {
   const S = getState();
   const fm = S.content?.frontmatter || {};
-  const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
+  const col = findContentTypeSchema(S.documentPath, projectState?.projectConfig);
   const schemaProps = col?.schema?.properties;
   const requiredFields = new Set(col?.schema?.required || []);
   const fields = [];
@@ -214588,7 +214598,7 @@ function renderPropertiesPanelTemplate(ctx) {
   })() : nothing;
   const frontmatterT = S.mode === "content" ? (() => {
     const fm = S.content?.frontmatter || {};
-    const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
+    const col = findContentTypeSchema(S.documentPath, projectState?.projectConfig);
     const schemaProps = col?.schema?.properties;
     const requiredFields = new Set(col?.schema?.required || []);
     const fields = [];
@@ -215565,13 +215575,19 @@ if (_openParam) {
           }
           projectState.projectDirs = foundDirs;
         }
-        const fileRelPath = siteCtx.fileRelPath || _openParam;
+        const _fileParam = new URLSearchParams(location.search).get("file");
+        const fileRelPath = _fileParam || siteCtx.fileRelPath || _openParam;
         const content3 = await platform4.readFile(fileRelPath);
         if (content3) {
-          const parsed = JSON.parse(content3);
-          S = createState(parsed);
+          if (fileRelPath.endsWith(".md")) {
+            await loadMarkdown2(content3, null);
+            S.documentPath = fileRelPath;
+          } else {
+            const parsed = JSON.parse(content3);
+            S = createState(parsed);
+            S.documentPath = fileRelPath;
+          }
           S.dirty = false;
-          S.documentPath = fileRelPath;
           S.ui = { ...S.ui, leftTab: "files" };
           ({ doc, session } = fromFlat(S));
           render();
@@ -215703,5 +215719,5 @@ addUpdateMiddleware((state3) => {
     scheduleAutosave();
 });
 
-//# debugId=D62B21431F8E201A64756E2164756E21
+//# debugId=2B1FE5B3505549D664756E2164756E21
 //# sourceMappingURL=studio.js.map