mnfst 0.5.88 → 0.5.89

package/lib/manifest.code.js

@@ -587,18 +587,26 @@ const GROUP_INHERITABLE_ATTRS = ['lines', 'edit', 'collapse'];
 async function setupCodeGroup(group) {
     if (group.dataset.groupProcessed === 'yes') return;
 
+    // A "panel" is any direct child with a [name] — these are tab panels.
+    // Children without [name] are ambient (always visible alongside whichever
+    // panel is active). When nothing is named, the group has no tabs at all
+    // and renders as a borderless wrapper around its (always-visible) kids —
+    // a frame + code pair, for instance, with no title overhead.
     const sourcePanels = Array.from(group.children).filter(c => c.hasAttribute('name'));
-    if (sourcePanels.length === 0) return;
+    const ambientChildren = Array.from(group.children).filter(c => !c.hasAttribute('name'));
+    if (sourcePanels.length === 0 && ambientChildren.length === 0) return;
     // Claim the group synchronously so re-entrant callers (the directive +
     // observer can both arrive before the first call's `await` resolves)
     // bail out — otherwise the wrapper accumulates duplicate tab strips.
     group.dataset.groupProcessed = 'yes';
 
-    // Inherit feature attributes from wrapper to child <pre x-code> panels
-    // that don't set them. Run BEFORE setupBlock so the inherited attrs
+    // Inherit feature attributes from wrapper to child <pre x-code> elements
+    // that don't set them. Ambient (unnamed) pres inherit too, so a frame +
+    // code pair in an unnamed group still benefits from group-level [lines]
+    // / [edit] / [collapse]. Run BEFORE setupBlock so the inherited attrs
     // drive that block's setup.
-    for (const panel of sourcePanels) {
-        if (panel.tagName !== 'PRE') continue;
+    const allCodeChildren = [...sourcePanels, ...ambientChildren].filter(c => c.tagName === 'PRE');
+    for (const panel of allCodeChildren) {
         for (const attr of GROUP_INHERITABLE_ATTRS) {
             if (group.hasAttribute(attr) && !panel.hasAttribute(attr)) {
                 panel.setAttribute(attr, group.getAttribute(attr));
@@ -617,10 +625,11 @@ async function setupCodeGroup(group) {
     const active = tabNames[0];
     const slugify = s => s.replace(/\s+/g, '-').toLowerCase();
 
-    // Preload hljs + every language needed across the group so each panel's
-    // setupBlock can synchronously highlight without re-loading.
-    const codeLangs = sourcePanels
-        .filter(p => p.tagName === 'PRE' && p.hasAttribute('x-code'))
+    // Preload hljs + every language needed across the group (named panels +
+    // ambient pres) so each block's setupBlock can synchronously highlight
+    // without re-loading.
+    const codeLangs = allCodeChildren
+        .filter(p => p.hasAttribute('x-code'))
         .map(p => p.getAttribute('x-code'))
         .filter(Boolean);
     let hljs = null;
@@ -647,34 +656,36 @@ async function setupCodeGroup(group) {
     pre.dataset.groupProcessed = 'yes';
     if (!pre.hasAttribute('role')) pre.setAttribute('role', 'region');
 
-    // Run each code panel through setupBlock so it gets its full feature
-    // treatment (line numbers, copy button, collapse, editor). Frames stay
-    // as-is. setupBlock detects [x-code-group] ancestor and suppresses the
-    // per-panel title bar — the tab strip header serves that role.
-    for (const panel of sourcePanels) {
-        if (panel.tagName === 'PRE' && panel.hasAttribute('x-code')) {
+    // Run each code child (named or ambient) through setupBlock so it gets
+    // its full feature treatment (line numbers, copy button, collapse,
+    // editor). Frames stay as-is. setupBlock detects the [x-code-group]
+    // ancestor and suppresses the per-panel title bar — the group header
+    // (when present) serves that role; for headerless groups, the pre is
+    // simply rendered without its own title.
+    for (const panel of allCodeChildren) {
+        if (panel.hasAttribute('x-code')) {
             await setupBlock(panel, hljs);
             panel.dataset.codeProcessed = 'yes';
         }
     }
 
     // Header: tab strip when there are multiple named panels, plain title bar
-    // when there's just one. The single-panel form avoids creating a degenerate
-    // role="tablist" / role="tab" pair that screen readers announce as a
-    // selectable tab even though there's nothing to switch to — same UX and
-    // ARIA shape as a standalone <pre x-code name="…">, but kept on the group
-    // wrapper so the wrapper-level copy button and grouped frame siblings still
-    // work uniformly.
-    const header = document.createElement('header');
+    // when there's just one, no header at all when nothing is named. Skipping
+    // the header for headerless groups lets authors pair a frame + code block
+    // inside <div x-code-group> with no repetitive "HTML" title — both render
+    // as ambient siblings inside the wrapper.
     const isSingleTab = tabNames.length === 1;
+    const isHeaderless = tabNames.length === 0;
+    let header = null;
     let tablist = null;
     let tabButtons = [];
+    if (!isHeaderless) header = document.createElement('header');
     if (isSingleTab) {
         const titleEl = document.createElement('div');
         titleEl.textContent = active;
         header.appendChild(titleEl);
         if (!pre.hasAttribute('aria-label')) pre.setAttribute('aria-label', active);
-    } else {
+    } else if (!isHeaderless) {
         // The role=tablist sits on an inner <div> that holds the tab buttons.
         // That way the tablist can have its own overflow-x scrolling (when
         // there are too many tabs to fit) without dragging sibling header
@@ -714,12 +725,13 @@ async function setupCodeGroup(group) {
             });
         });
     }
-    pre.insertBefore(header, pre.firstChild);
+    if (header) pre.insertBefore(header, pre.firstChild);
 
     // Wire ARIA / IDs on each panel. Multi-tab groups get role="tabpanel" with
     // aria-labelledby pointing at its tab button; single-tab groups keep the
     // standalone role="region" + aria-label shape (label set on the wrapper
-    // above) so there's no orphan tabpanel without a tablist.
+    // above) so there's no orphan tabpanel without a tablist. Headerless
+    // groups have no tabpanels — every child is ambient.
     sourcePanels.forEach((panel, i) => {
         const name = panel.getAttribute('name');
         panel.id = panel.id || `${slugify(name)}-panel-${i}`;
@@ -743,7 +755,7 @@ async function setupCodeGroup(group) {
     // competing with the header's own overflow-scroll region. Same
     // positioning rule as for a standalone <pre x-code copy>.
     const wrapperHasCopy = pre.hasAttribute('copy');
-    const anyPanelCopy = sourcePanels.some(p => p.hasAttribute('copy'));
+    const anyPanelCopy = [...sourcePanels, ...ambientChildren].some(p => p.hasAttribute('copy'));
     let copyBtn = null;
     if (wrapperHasCopy || anyPanelCopy) {
         copyBtn = document.createElement('button');
@@ -754,9 +766,15 @@ async function setupCodeGroup(group) {
             // When multiple panels share the active name (e.g. a paired
             // frame + code), prefer the <pre x-code> for copy — the source
             // is what an author wants to take, not the rendered frame's
-            // text content.
-            const sameName = sourcePanels.filter(p => p.getAttribute('name') === activeName);
-            const activePanel = sameName.find(p => p.tagName === 'PRE' && p.hasAttribute('x-code')) || sameName[0];
+            // text content. Headerless groups have no active name, so pick
+            // the first ambient <pre x-code> child instead.
+            let activePanel;
+            if (isHeaderless) {
+                activePanel = ambientChildren.find(p => p.tagName === 'PRE' && p.hasAttribute('x-code'));
+            } else {
+                const sameName = sourcePanels.filter(p => p.getAttribute('name') === activeName);
+                activePanel = sameName.find(p => p.tagName === 'PRE' && p.hasAttribute('x-code')) || sameName[0];
+            }
             if (!activePanel) return;
             const code = activePanel.querySelector(':scope > code') || activePanel;
             try {
@@ -774,6 +792,7 @@ async function setupCodeGroup(group) {
     // visibility per-tab: when [copy] sits on the wrapper it stays visible
     // for every tab; when it sits only on individual panels, the button
     // shows for tabs whose panels carry [copy] and hides for the rest.
+    // Headerless groups have no tabs to switch, so activate() is a no-op.
     let activeName = active;
     function activate(name) {
         activeName = name;
@@ -792,7 +811,7 @@ async function setupCodeGroup(group) {
             copyBtn.style.display = activeCanCopy ? '' : 'none';
         }
     }
-    activate(active);
+    if (!isHeaderless) activate(active);
 }
 
 // ─── Page scan + observation ─────────────────────────────────────────────────

package/lib/manifest.integrity.json

@@ -2,7 +2,7 @@
   "manifest.appwrite.auth.js": "sha384-to37ssZJXGeOS6+rf2VI47ox2mEqgsi5oQ1E5vv8XU/lDspbDFE1KHEMm8TxBhxW",
   "manifest.appwrite.data.js": "sha384-00ulLT+GAIuPHA/rRT9p98vYlsyDzkyKXtg86BDQ6FGQa5vVVN+W6kuforniBAsz",
   "manifest.appwrite.presence.js": "sha384-uxRpx9/Jj0kGtklH5QmUlAzD3zdSvFRfK6bcJQqxl+Bsf5tOo4zgwqJTQgtZoHQP",
-  "manifest.code.js": "sha384-jO0j5UsOTYYlZs5x/NSzegJQqrEolLEXJZKV29Dxl6tD6qNQwLai1pifsBKh4xWw",
+  "manifest.code.js": "sha384-r0cbKtg4/bih6lzNiIdnwiCurW2ohbC8E8zNljSSoO5r+5ewPQcWP4QT+jZp3Oec",
   "manifest.color.js": "sha384-Z9G/lzt0vVMxjz4wkPuGG1X9mmQAJR15aOoGX3ephf7r2wnlUWet5GLgkUMtT4vt",
   "manifest.colorpicker.js": "sha384-0EVn+Ha06h7FIvOxc6WjZYnKYXzi+zba08yKvczSEGTRkWRxyKN2TFrZHI1SDCXu",
   "manifest.components.js": "sha384-3dCTD5EwCZTiX+1obYtDNM3WWwPh2JDQUQQsdRUUK3gs6FXjse1ShkKaT/2jsNaI",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mnfst",
-    "version": "0.5.88",
+    "version": "0.5.89",
     "private": false,
     "workspaces": [
         "templates/starter",