@zigrivers/scaffold 3.30.0 → 3.31.0

package/dist/guides/chrome.js

@@ -39,12 +39,69 @@ export const CHROME_JS = /* js */ `(function(){
       });
     });
 
-    // ─── Mobile nav ──────────────────────────────────────────────────────────
+    // ─── Mobile nav (drawer + backdrop; aria-expanded + Escape-to-close) ──────
+    function setNav(open) {
+      var rail = document.querySelector('.rail');
+      if (rail) rail.classList.toggle('open', open);
+      var toggle = document.querySelector('.nav-toggle');
+      if (toggle) toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
+      // Modal-drawer focus containment: while open, make the page content inert
+      // (out of tab order + a11y tree) and move focus into the drawer; on close,
+      // restore content and return focus to the toggle.
+      var main = document.querySelector('.content');
+      if (main) main.inert = open;
+      if (open) {
+        var first = rail && rail.querySelector('a, button, [tabindex]:not([tabindex="-1"])');
+        if (first) first.focus();
+        else if (rail) { rail.setAttribute('tabindex', '-1'); rail.focus(); }
+      } else if (toggle) {
+        toggle.focus();
+      }
+    }
+    // If the viewport grows past the mobile breakpoint while the drawer is open,
+    // the rail becomes the desktop sidebar and the toggle hides — clear the open
+    // state so .content doesn't stay inert with no way to close it.
+    if (window.matchMedia) {
+      var mq = window.matchMedia('(max-width: 860px)');
+      var onMq = function() {
+        if (mq.matches) return;
+        var rail = document.querySelector('.rail');
+        if (rail) rail.classList.remove('open');
+        var toggle = document.querySelector('.nav-toggle');
+        if (toggle) toggle.setAttribute('aria-expanded', 'false');
+        var main = document.querySelector('.content');
+        if (main) main.inert = false;
+      };
+      if (mq.addEventListener) mq.addEventListener('change', onMq);
+      else if (mq.addListener) mq.addListener(onMq);
+    }
     document.querySelectorAll('[data-action="nav"]').forEach(function(btn) {
       btn.addEventListener('click', function() {
         var rail = document.querySelector('.rail');
-        if (rail) rail.classList.toggle('open');
+        setNav(!(rail && rail.classList.contains('open')));
+      });
+    });
+    // Selecting a TOC link closes the drawer (so the now-active content isn't
+    // left inert behind the panel) before the anchor navigation scrolls.
+    var drawerRail = document.querySelector('.rail');
+    if (drawerRail) {
+      drawerRail.querySelectorAll('a').forEach(function(a) {
+        a.addEventListener('click', function() {
+          if (drawerRail.classList.contains('open')) setNav(false);
+        });
       });
+    }
+    document.addEventListener('keydown', function(e) {
+      var rail = document.querySelector('.rail');
+      if (!rail || !rail.classList.contains('open')) return;
+      if (e.key === 'Escape') { setNav(false); return; } // setNav restores focus to the toggle
+      // Trap Tab within the open drawer (modal pattern).
+      if (e.key !== 'Tab') return;
+      var f = rail.querySelectorAll('a[href], button, [tabindex]:not([tabindex="-1"])');
+      if (!f.length) return;
+      var first = f[0], last = f[f.length - 1];
+      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
     });
 
     // ─── Copy buttons ─────────────────────────────────────────────────────────
@@ -71,17 +128,31 @@ export const CHROME_JS = /* js */ `(function(){
       wrapper.insertBefore(btn, pre);
     });
 
-    // ─── Tabs ─────────────────────────────────────────────────────────────────
+    // ─── Tabs (ARIA pattern: aria-selected + roving tabindex + arrow keys) ────
+    function activateTab(group, btn, focus) {
+      var idx = btn.getAttribute('data-tab');
+      group.querySelectorAll('.tab-btn').forEach(function(b) {
+        var on = b === btn;
+        b.classList.toggle('active', on);
+        b.setAttribute('aria-selected', on ? 'true' : 'false');
+        b.setAttribute('tabindex', on ? '0' : '-1');
+      });
+      group.querySelectorAll('.tabpane').forEach(function(pane) {
+        pane.classList.toggle('active', pane.getAttribute('data-tab') === idx);
+      });
+      if (focus) btn.focus();
+    }
     document.querySelectorAll('.tabs').forEach(function(group) {
-      group.querySelectorAll('.tab-btn').forEach(function(btn) {
-        btn.addEventListener('click', function() {
-          var idx = btn.getAttribute('data-tab');
-          group.querySelectorAll('.tab-btn').forEach(function(b) {
-            b.classList.toggle('active', b === btn);
-          });
-          group.querySelectorAll('.tabpane').forEach(function(pane) {
-            pane.classList.toggle('active', pane.getAttribute('data-tab') === idx);
-          });
+      var btns = [].slice.call(group.querySelectorAll('.tab-btn'));
+      btns.forEach(function(btn, i) {
+        btn.addEventListener('click', function() { activateTab(group, btn, false); });
+        btn.addEventListener('keydown', function(e) {
+          var ni = -1;
+          if (e.key === 'ArrowRight' || e.key === 'ArrowDown') ni = (i + 1) % btns.length;
+          else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') ni = (i - 1 + btns.length) % btns.length;
+          else if (e.key === 'Home') ni = 0;
+          else if (e.key === 'End') ni = btns.length - 1;
+          if (ni >= 0) { e.preventDefault(); activateTab(group, btns[ni], true); }
         });
       });
     });

package/dist/guides/chrome.js.map

@@ -1 +1 @@
-{"version":3,"file":"chrome.js","sourceRoot":"","sources":["../../src/guides/chrome.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GACxB,8DAA8D;IAC9D,4FAA4F;IAC5F,+EAA+E,CAAA;AAEjF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA4FpC,CAAA"}
+{"version":3,"file":"chrome.js","sourceRoot":"","sources":["../../src/guides/chrome.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GACxB,8DAA8D;IAC9D,4FAA4F;IAC5F,+EAA+E,CAAA;AAEjF;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,SAAS,GAAW,QAAQ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmKpC,CAAA"}

package/dist/guides/dashboard-theme.css

@@ -41,9 +41,13 @@
     --yellow:       #d97706;
     --yellow-bg:    #fffbeb;
     --yellow-border:#fde68a;
+    --red:          #dc2626;
+    --red-bg:       #fef2f2;
+    --red-border:   #fecaca;
     --gray:         #9ca3af;
     --gray-bg:      #f3f4f6;
     --gray-border:  #e5e7eb;
+    --scrim:        rgba(15, 17, 23, 0.45);
 
     /* Semantic: Next Banner */
     --next-bg:      #eef2ff;
@@ -126,9 +130,13 @@
     --yellow:       #fbbf24;
     --yellow-bg:    rgba(120, 53, 15, 0.25);
     --yellow-border:rgba(251, 191, 36, 0.20);
+    --red:          #f87171;
+    --red-bg:       rgba(127, 29, 29, 0.25);
+    --red-border:   rgba(248, 113, 113, 0.22);
     --gray:         #6b7294;
     --gray-bg:      #252940;
     --gray-border:  #363c58;
+    --scrim:        rgba(0, 0, 0, 0.6);
 
     /* Semantic: Next Banner */
     --next-bg:      rgba(30, 27, 75, 0.50);

package/dist/guides/directives-tabs.test.js

@@ -48,5 +48,52 @@ describe('remarkTabs', () => {
         // First pane is active
         expect(body).toContain('class="tabpane active"');
     });
+    it('emits a complete ARIA tabs pattern that survives sanitization', async () => {
+        const md = [
+            '::::tabs',
+            '',
+            ':::tab{title="A"}',
+            'A body',
+            ':::',
+            '',
+            ':::tab{title="B"}',
+            'B body',
+            ':::',
+            '',
+            '::::',
+        ].join('\n') + '\n';
+        const { body } = await renderGuideBody(md, { plugins: [remarkTabs] });
+        // Buttons: role=tab, controls + selected + roving tabindex
+        expect(body).toContain('role="tab"');
+        expect(body).toContain('aria-controls="tabpane-0-0"');
+        expect(body).toContain('aria-selected="true"');
+        expect(body).toContain('aria-selected="false"');
+        expect(body).toContain('tabindex="0"');
+        expect(body).toContain('tabindex="-1"');
+        // Panes: role=tabpanel + back-reference (the casing-sensitive one the
+        // sanitize allowlist must match: ariaLabelledBy, not ariaLabelledby)
+        expect(body).toContain('role="tabpanel"');
+        expect(body).toContain('aria-labelledby="tab-0-0"');
+        expect(body).toContain('id="tabpane-0-1"');
+    });
+    it('renders quoted titles with punctuation without leaking directive text', async () => {
+        const md = [
+            '::::tabs',
+            '',
+            ':::tab{title="mvp (depth 1)"}',
+            'A body',
+            ':::',
+            '',
+            ':::tab{title="CLI / library"}',
+            'B body',
+            ':::',
+            '',
+            '::::',
+        ].join('\n') + '\n';
+        const { body } = await renderGuideBody(md, { plugins: [remarkTabs] });
+        expect(body).toContain('mvp (depth 1)');
+        expect(body).toContain('CLI / library');
+        expect(body).not.toContain(':::tab'); // no leaked raw directive text
+    });
 });
 //# sourceMappingURL=directives-tabs.test.js.map

package/dist/guides/directives-tabs.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"directives-tabs.test.js","sourceRoot":"","sources":["../../src/guides/directives-tabs.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAE5C,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;IAC1B,EAAE,CAAC,wDAAwD,EAAE,KAAK,IAAI,EAAE;QACtE,MAAM,EAAE,GAAG;YACT,UAAU;YACV,EAAE;YACF,qBAAqB;YACrB,UAAU;YACV,KAAK;YACL,EAAE;YACF,6BAA6B;YAC7B,EAAE;YACF,MAAM;SACP,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;QACnB,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,eAAe,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;QACrE,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAA;QAClC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,6BAA6B,CAAC,CAAA;IACvD,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,4CAA4C,EAAE,KAAK,IAAI,EAAE;QAC1D,MAAM,EAAE,GAAG;YACT,UAAU;YACV,EAAE;YACF,uBAAuB;YACvB,YAAY;YACZ,KAAK;YACL,EAAE;YACF,wBAAwB;YACxB,aAAa;YACb,KAAK;YACL,EAAE;YACF,MAAM;SACP,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;QACnB,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,eAAe,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,UAAU,CAAC,EAAE,CAAC,CAAA;QACrE,+BAA+B;QAC/B,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;QACpC,YAAY;QACZ,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;QACtC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;QACpC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;QACtC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAA;QACtC,0BAA0B;QAC1B,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;QACpC,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAA;QACrC,gCAAgC;QAChC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA;QACrD,uBAAuB;QACvB,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAA;IAClD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}
+{"version":3,"file":"directives-tabs.test.js","sourceRoot":"","sources":["../../src/guides/directives-tabs.test.ts"],"names":[],"mappings":"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"}

package/dist/guides/directives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"directives.d.ts","sourceRoot":"","sources":["../../src/guides/directives.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAI5C,eAAO,MAAM,aAAa,EAAE,SAU3B,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,SA+CxB,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,SAqDzB,CAAA;AAGD,eAAO,MAAM,iBAAiB,EAAE,SAmB/B,CAAA;AAQD,eAAO,MAAM,UAAU,EAAE,SAgBxB,CAAA;AAKD,eAAO,MAAM,SAAS,EAAE,SAUvB,CAAA"}
+{"version":3,"file":"directives.d.ts","sourceRoot":"","sources":["../../src/guides/directives.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AAI5C,eAAO,MAAM,aAAa,EAAE,SAU3B,CAAA;AAGD,eAAO,MAAM,UAAU,EAAE,SA6DxB,CAAA;AAGD,eAAO,MAAM,WAAW,EAAE,SAqDzB,CAAA;AAGD,eAAO,MAAM,iBAAiB,EAAE,SAmB/B,CAAA;AAQD,eAAO,MAAM,UAAU,EAAE,SAgBxB,CAAA;AAKD,eAAO,MAAM,SAAS,EAAE,SAUvB,CAAA"}

package/dist/guides/directives.js

@@ -15,6 +15,7 @@ export const remarkCallout = () => (tree) => {
 };
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const remarkTabs = () => (tree) => {
+    let group = 0; // unique id base per tabs group (document order → deterministic)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     visit(tree, (node) => {
         if (node.type !== 'containerDirective' || node.name !== 'tabs')
@@ -22,20 +23,29 @@ export const remarkTabs = () => (tree) => {
         // With a 4-colon outer fence (::::tabs) wrapping 3-colon (:::tab) children,
         // remark-directive nests tab nodes directly inside node.children — no sibling
         // collection needed, no stray ::: paragraph produced.
+        const g = group++;
+        const tabId = (i) => `tab-${g}-${i}`;
+        const paneId = (i) => `tabpane-${g}-${i}`;
         const tabs = (node.children ?? []).filter(
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (c) => c.type === 'containerDirective' && c.name === 'tab');
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const others = (node.children ?? []).filter((c) => !(c.type === 'containerDirective' && c.name === 'tab'));
+        // Full ARIA tabs pattern: each button controls its pane; roving tabindex +
+        // aria-selected track the active tab (chrome.ts updates them on click/arrow).
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const buttons = tabs.map((t, i) => ({
             type: 'paragraph',
             data: {
                 hName: 'button',
                 hProperties: {
+                    id: tabId(i),
                     className: 'tab-btn' + (i === 0 ? ' active' : ''),
                     role: 'tab',
                     'data-tab': String(i),
+                    'aria-controls': paneId(i),
+                    'aria-selected': i === 0 ? 'true' : 'false',
+                    tabindex: i === 0 ? '0' : '-1',
                 },
             },
             children: [{ type: 'text', value: String(t.attributes?.title ?? `Tab ${i + 1}`) }],
@@ -51,8 +61,12 @@ export const remarkTabs = () => (tree) => {
             t.data = t.data ?? {};
             t.data.hName = 'div';
             t.data.hProperties = {
+                id: paneId(i),
                 className: 'tabpane' + (i === 0 ? ' active' : ''),
+                role: 'tabpanel',
                 'data-tab': String(i),
+                'aria-labelledby': tabId(i),
+                tabindex: '0',
             };
         });
         node.data = node.data ?? {};

package/dist/guides/directives.js.map

@@ -1 +1 @@
-{"version":3,"file":"directives.js","sourceRoot":"","sources":["../../src/guides/directives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAI7D,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAA;AAE3E,MAAM,CAAC,MAAM,aAAa,GAAc,GAAG,EAAE,CAAC,CAAC,IAAU,EAAE,EAAE;IAC3D,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,OAAM;QACzE,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,MAAM,CAAC,CAAC,WAAW,EAAE,CAAA;QAClE,MAAM,IAAI,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA;QACpD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,SAAS,EAAE,mBAAmB,IAAI,EAAE,EAAE,CAAA;IAClE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,8DAA8D;AAC9D,MAAM,CAAC,MAAM,UAAU,GAAc,GAAG,EAAE,CAAC,CAAC,IAAS,EAAE,EAAE;IACvD,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YAAE,OAAM;QACtE,4EAA4E;QAC5E,8EAA8E;QAC9E,sDAAsD;QAEtD,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM;QACvC,8DAA8D;QAC9D,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,oBAAoB,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK,CAChE,CAAA;QACD,8DAA8D;QAC9D,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,oBAAoB,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAA;QAC/G,8DAA8D;QAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,CAAS,EAAE,EAAE,CAAC,CAAC;YAC/C,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE;gBACJ,KAAK,EAAE,QAAQ;gBACf,WAAW,EAAE;oBACX,SAAS,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;oBACjD,IAAI,EAAE,KAAK;oBACX,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;iBACtB;aACF;YACD,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;SACnF,CAAC,CAAC,CAAA;QACH,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;YAC9E,QAAQ,EAAE,OAAO;SAClB,CAAA;QACD,+EAA+E;QAC/E,8DAA8D;QAC9D,IAAI,CAAC,OAAO,CAAC,CAAC,CAAM,EAAE,CAAS,EAAE,EAAE;YACjC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,EAAE,CAAA;YACrB,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;YACpB,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG;gBACnB,SAAS,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;gBACjD,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;aACtB,CAAA;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,CAAA;QAC7C,IAAI,CAAC,QAAQ,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,MAAM,CAAC,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,8DAA8D;AAC9D,MAAM,CAAC,MAAM,WAAW,GAAc,GAAG,EAAE,CAAC,CAAC,IAAS,EAAE,EAAE;IACxD,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,OAAM;QACvE,8DAA8D;QAC9D,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAA;QACxE,IAAI,CAAC,KAAK;YAAE,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAA;QAClE,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,CAAC,kBAAkB;QACvD,8DAA8D;QAC9D,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;YACjC,MAAM,KAAK,GAAG,CAAC,CAAC,QAAQ,CAAA;YACxB,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;YAClC,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA;YAChE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;gBAAE,MAAM,IAAI,KAAK,CAAC,+CAA+C,KAAK,IAAI,CAAC,CAAA;YACtG,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;QACzB,CAAC,CAAC,CAAA;QACF,8DAA8D;QAC9D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAA;QAChE,8DAA8D;QAC9D,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;YACjC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA;YAC7C,OAAO;gBACL,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE;oBACJ,KAAK,EAAE,KAAK;oBACZ,WAAW,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;iBAChF;gBACD,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,WAAW;wBACjB,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE;wBAClE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;qBAC7C;oBACD;wBACE,IAAI,EAAE,WAAW;wBACjB,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,GAAG,GAAG,EAAE,EAAE;wBACvF,QAAQ,EAAE,EAAE;qBACb;iBACF;aACF,CAAA;QACH,CAAC,CAAC,CAAA;QACF,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE,EAAE;YACrE,QAAQ,EAAE,IAAI;SACf,CAAA;QACD,8DAA8D;QAC9D,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAA;QACzE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,SAAS,EAAE,aAAa,EAAE,CAAA;QACpD,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC,CAAA;IAChD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,8DAA8D;AAC9D,MAAM,CAAC,MAAM,iBAAiB,GAAc,GAAG,EAAE,CAAC,CAAC,IAAS,EAAE,EAAE;IAC9D,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,IAAI,CAAC,IAAI,KAAK,cAAc;YAAE,OAAM;QAC9E,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,WAAW,EAAE;oBACX,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,mBAAmB;iBACnG;aACF;YACD,QAAQ,EAAE,EAAE;SACb,CAAA;QACD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA;QACrD,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAA;IACnD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,6EAA6E;AAC7E,iFAAiF;AACjF,gFAAgF;AAChF,6EAA6E;AAC7E,yEAAyE;AACzE,8DAA8D;AAC9D,MAAM,CAAC,MAAM,UAAU,GAAc,GAAG,EAAE,CAAC,CAAC,IAAS,EAAE,EAAE;IACvD,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,eAAe,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YAAE,OAAM;QACjE,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;QACpC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,KAAK,UAAU,CAAA;QACjF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACxB,oEAAoE;QACpE,4EAA4E;QAC5E,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG;YACtB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI;YAC5C,QAAQ,EAAE,IAAI;SACf,CAAA;QACD,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAA;IACjD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAA;AAE5D,8DAA8D;AAC9D,MAAM,CAAC,MAAM,SAAS,GAAc,GAAG,EAAE,CAAC,CAAC,IAAS,EAAE,EAAE;IACtD,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,eAAe,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK;YAAE,OAAM;QAChE,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC,WAAW,EAAE,CAAA;QAClE,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;QACjD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACxB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE,CAAA;IAC1D,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}
+{"version":3,"file":"directives.js","sourceRoot":"","sources":["../../src/guides/directives.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAA;AACxC,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAA;AAI7D,MAAM,aAAa,GAAG,IAAI,GAAG,CAAC,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAA;AAE3E,MAAM,CAAC,MAAM,aAAa,GAAc,GAAG,EAAE,CAAC,CAAC,IAAU,EAAE,EAAE;IAC3D,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;YAAE,OAAM;QACzE,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,MAAM,CAAC,CAAC,WAAW,EAAE,CAAA;QAClE,MAAM,IAAI,GAAG,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,MAAM,CAAA;QACpD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,SAAS,EAAE,mBAAmB,IAAI,EAAE,EAAE,CAAA;IAClE,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,8DAA8D;AAC9D,MAAM,CAAC,MAAM,UAAU,GAAc,GAAG,EAAE,CAAC,CAAC,IAAS,EAAE,EAAE;IACvD,IAAI,KAAK,GAAG,CAAC,CAAA,CAAC,iEAAiE;IAC/E,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YAAE,OAAM;QACtE,4EAA4E;QAC5E,8EAA8E;QAC9E,sDAAsD;QACtD,MAAM,CAAC,GAAG,KAAK,EAAE,CAAA;QACjB,MAAM,KAAK,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAA;QAC5C,MAAM,MAAM,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAA;QAEjD,MAAM,IAAI,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM;QACvC,8DAA8D;QAC9D,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,oBAAoB,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK,CAChE,CAAA;QACD,8DAA8D;QAC9D,MAAM,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,oBAAoB,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK,CAAC,CAAC,CAAA;QAC/G,2EAA2E;QAC3E,8EAA8E;QAC9E,8DAA8D;QAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,CAAS,EAAE,EAAE,CAAC,CAAC;YAC/C,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE;gBACJ,KAAK,EAAE,QAAQ;gBACf,WAAW,EAAE;oBACX,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC;oBACZ,SAAS,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;oBACjD,IAAI,EAAE,KAAK;oBACX,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;oBACrB,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;oBAC1B,eAAe,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;oBAC3C,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI;iBAC/B;aACF;YACD,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,IAAI,OAAO,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC;SACnF,CAAC,CAAC,CAAA;QACH,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;YAC9E,QAAQ,EAAE,OAAO;SAClB,CAAA;QACD,+EAA+E;QAC/E,8DAA8D;QAC9D,IAAI,CAAC,OAAO,CAAC,CAAC,CAAM,EAAE,CAAS,EAAE,EAAE;YACjC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI,EAAE,CAAA;YACrB,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;YACpB,CAAC,CAAC,IAAI,CAAC,WAAW,GAAG;gBACnB,EAAE,EAAE,MAAM,CAAC,CAAC,CAAC;gBACb,SAAS,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;gBACjD,IAAI,EAAE,UAAU;gBAChB,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;gBACrB,iBAAiB,EAAE,KAAK,CAAC,CAAC,CAAC;gBAC3B,QAAQ,EAAE,GAAG;aACd,CAAA;QACH,CAAC,CAAC,CAAA;QACF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,CAAA;QAC7C,IAAI,CAAC,QAAQ,GAAG,CAAC,OAAO,EAAE,GAAG,IAAI,EAAE,GAAG,MAAM,CAAC,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,8DAA8D;AAC9D,MAAM,CAAC,MAAM,WAAW,GAAc,GAAG,EAAE,CAAC,CAAC,IAAS,EAAE,EAAE;IACxD,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO;YAAE,OAAM;QACvE,8DAA8D;QAC9D,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAA;QACxE,IAAI,CAAC,KAAK;YAAE,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAA;QAClE,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA,CAAC,kBAAkB;QACvD,8DAA8D;QAC9D,MAAM,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;YACjC,MAAM,KAAK,GAAG,CAAC,CAAC,QAAQ,CAAA;YACxB,MAAM,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAA;YAClC,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAA;YAChE,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;gBAAE,MAAM,IAAI,KAAK,CAAC,+CAA+C,KAAK,IAAI,CAAC,CAAA;YACtG,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,CAAA;QACzB,CAAC,CAAC,CAAA;QACF,8DAA8D;QAC9D,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,CAAA;QAChE,8DAA8D;QAC9D,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE;YACjC,MAAM,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAA;YAC7C,OAAO;gBACL,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE;oBACJ,KAAK,EAAE,KAAK;oBACZ,WAAW,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;iBAChF;gBACD,QAAQ,EAAE;oBACR;wBACE,IAAI,EAAE,WAAW;wBACjB,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE;wBAClE,QAAQ,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC;qBAC7C;oBACD;wBACE,IAAI,EAAE,WAAW;wBACjB,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,SAAS,GAAG,GAAG,EAAE,EAAE;wBACvF,QAAQ,EAAE,EAAE;qBACb;iBACF;aACF,CAAA;QACH,CAAC,CAAC,CAAA;QACF,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,SAAS,EAAE,iBAAiB,EAAE,EAAE;YACrE,QAAQ,EAAE,IAAI;SACf,CAAA;QACD,8DAA8D;QAC9D,MAAM,WAAW,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CAAC,CAAA;QACzE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,SAAS,EAAE,aAAa,EAAE,CAAA;QACpD,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC,CAAA;IAChD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,8DAA8D;AAC9D,MAAM,CAAC,MAAM,iBAAiB,GAAc,GAAG,EAAE,CAAC,CAAC,IAAS,EAAE,EAAE;IAC9D,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,IAAI,CAAC,IAAI,KAAK,cAAc;YAAE,OAAM;QAC9E,MAAM,KAAK,GAAG;YACZ,IAAI,EAAE,WAAW;YACjB,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,WAAW,EAAE;oBACX,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,mBAAmB;iBACnG;aACF;YACD,QAAQ,EAAE,EAAE;SACb,CAAA;QACD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,CAAA;QACrD,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,CAAA;IACnD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,6EAA6E;AAC7E,iFAAiF;AACjF,gFAAgF;AAChF,6EAA6E;AAC7E,yEAAyE;AACzE,8DAA8D;AAC9D,MAAM,CAAC,MAAM,UAAU,GAAc,GAAG,EAAE,CAAC,CAAC,IAAS,EAAE,EAAE;IACvD,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,eAAe,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;YAAE,OAAM;QACjE,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAA;QACpC,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,KAAK,UAAU,CAAA;QACjF,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACxB,oEAAoE;QACpE,4EAA4E;QAC5E,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG;YACtB,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI;YAC5C,QAAQ,EAAE,IAAI;SACf,CAAA;QACD,IAAI,CAAC,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAA;IACjD,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC,CAAA;AAE5D,8DAA8D;AAC9D,MAAM,CAAC,MAAM,SAAS,GAAc,GAAG,EAAE,CAAC,CAAC,IAAS,EAAE,EAAE;IACtD,8DAA8D;IAC9D,KAAK,CAAC,IAAI,EAAE,CAAC,IAAS,EAAE,EAAE;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,eAAe,IAAI,IAAI,CAAC,IAAI,KAAK,KAAK;YAAE,OAAM;QAChE,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,KAAK,IAAI,IAAI,CAAC,CAAC,WAAW,EAAE,CAAA;QAClE,MAAM,IAAI,GAAG,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA;QACjD,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAA;QACxB,IAAI,CAAC,IAAI,CAAC,WAAW,GAAG,EAAE,SAAS,EAAE,WAAW,IAAI,EAAE,EAAE,CAAA;IAC1D,CAAC,CAAC,CAAA;AACJ,CAAC,CAAA"}

package/dist/guides/guides.css

@@ -0,0 +1,268 @@
+/* ============================================================================
+ * guides.css — component + layout styles for `scaffold guides` reference pages.
+ *
+ * Pairs with lib/dashboard-theme.css (the token source) and src/guides/chrome.ts
+ * (the behavior). Styles the guide CHROME (.topbar, .layout, .rail, nav.toc,
+ * .content) and the markdown DIRECTIVES (callouts, sev chips, filter-tables,
+ * charts, tabs, citations) plus base prose typography.
+ *
+ * DESIGN SYSTEM: all COLORS come from dashboard-theme.css tokens, and spacing
+ * uses the --sp-* scale wherever it maps. The few structural layout constants
+ * (topbar height, rail/drawer width, chart label column, card min) are declared
+ * as local custom properties below; a handful of sub-scale UI values (chip/bar
+ * sizing, em-based inline-code padding) and the responsive breakpoint are
+ * literal because no token expresses them. Both themes are covered because every
+ * color is a token.
+ * ==========================================================================*/
+
+:root {
+  --topbar-h: 52px;       /* sticky topbar height; rail sticky offset keys off it */
+  --rail-w: 260px;        /* desktop TOC sidebar column */
+  --drawer-w: 280px;      /* mobile off-canvas TOC drawer */
+  --card-min: 260px;      /* index card min track width */
+  --chart-label-w: 90px;  /* chart row label column min */
+}
+
+/* ── Base / reset on top of the token base in dashboard-theme.css ─────────── */
+.content a { color: var(--accent); text-decoration: none; }
+.content a:hover { text-decoration: underline; }
+.content strong { font-weight: var(--fw-semi); }
+.content hr { border: 0; border-top: 1px solid var(--border-light); margin: var(--sp-6) 0; }
+
+/* Consistent keyboard focus for every interactive control (a11y). */
+.topbar button:focus-visible,
+.copy-btn:focus-visible,
+.tab-btn:focus-visible,
+.filter-input:focus-visible,
+nav.toc a:focus-visible,
+.guide-card:focus-visible,
+.content a:focus-visible {
+  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm);
+}
+
+/* ── Topbar ────────────────────────────────────────────────────────────────*/
+.topbar {
+  position: sticky; top: 0; z-index: 60; height: var(--topbar-h);
+  display: flex; align-items: center; gap: var(--sp-3);
+  padding: 0 var(--page-pad);
+  background: var(--bg-card); border-bottom: 1px solid var(--border);
+}
+.topbar h1 {
+  flex: 1; min-width: 0; margin: 0;
+  font-size: var(--text-lg); font-weight: var(--fw-bold);
+  letter-spacing: var(--ls-tight);
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.topbar button {
+  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
+  border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-3); font-size: var(--text-base);
+  line-height: 1; cursor: pointer; font-family: inherit;
+}
+.topbar button:hover { background: var(--bg-hover); border-color: var(--accent); }
+.nav-toggle { display: none; }
+
+/* ── Layout: sticky sidebar TOC + reading-width content ──────────────────── */
+.layout {
+  max-width: var(--max-w); margin: 0 auto;
+  display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr);
+  gap: var(--sp-8); padding: 0 var(--page-pad);
+}
+.rail {
+  position: sticky; top: var(--topbar-h); align-self: start;
+  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
+  padding: var(--sp-5) 0; border-right: 1px solid var(--border-light);
+}
+.content { min-width: 0; padding: var(--sp-6) 0 var(--sp-10); }
+
+/* Backdrop behind the mobile drawer (toggled with the rail via chrome.ts). */
+.rail-backdrop { display: none; }
+/* In-drawer close button — hidden on desktop (the rail is a static sidebar). */
+.rail-close { display: none; }
+
+/* ── Table of contents (scrollspy marks a.active) ────────────────────────── */
+nav.toc ul { list-style: none; margin: 0; padding: 0; }
+nav.toc li { margin: 0; }
+nav.toc a {
+  display: block; padding: var(--sp-1) var(--sp-3); line-height: 1.35;
+  color: var(--text-muted); font-size: var(--text-sm);
+  text-decoration: none; border-left: 2px solid transparent;
+  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
+}
+nav.toc a:hover { color: var(--text); background: var(--bg-hover); }
+nav.toc a.active {
+  color: var(--accent); border-left-color: var(--accent);
+  background: var(--accent-glow); font-weight: var(--fw-medium);
+}
+nav.toc li.toc-3 a { padding-left: var(--sp-6); font-size: var(--text-xs); }
+
+/* ── Prose typography ──────────────────────────────────────────────────────*/
+.content h2 {
+  font-size: var(--text-xl); letter-spacing: var(--ls-tight);
+  margin: var(--sp-8) 0 var(--sp-3); padding-bottom: var(--sp-2);
+  border-bottom: 1px solid var(--border-light); scroll-margin-top: calc(var(--topbar-h) + var(--sp-3));
+}
+.content h3 {
+  font-size: var(--text-lg); margin: var(--sp-5) 0 var(--sp-2);
+  scroll-margin-top: calc(var(--topbar-h) + var(--sp-3));
+}
+.content p { margin: var(--sp-3) 0; line-height: var(--lh-relaxed); }
+.content ul, .content ol { margin: var(--sp-3) 0; padding-left: var(--sp-6); }
+.content li { margin: var(--sp-1) 0; line-height: var(--lh-relaxed); }
+.content blockquote {
+  margin: var(--sp-3) 0; padding: var(--sp-1) var(--sp-4);
+  border-left: 3px solid var(--border); color: var(--text-muted);
+}
+
+/* ── Inline code + code blocks (chrome.ts wraps <pre> in .code + .copy-btn) ──*/
+.content code {
+  font-family: var(--font-mono); font-size: 0.85em;
+  background: var(--bg-inset); padding: 0.12em 0.4em; border-radius: var(--radius-sm);
+}
+.content .code { position: relative; margin: var(--sp-3) 0; }
+.content .code pre {
+  margin: 0; padding: var(--sp-3) var(--sp-4); overflow-x: auto;
+  background: var(--bg-inset); border: 1px solid var(--border-light);
+  border-radius: var(--radius-sm); font-family: var(--font-mono);
+  font-size: var(--text-sm); line-height: var(--lh-relaxed);
+}
+.content .code pre code { background: none; padding: 0; font-size: inherit; }
+.copy-btn {
+  position: absolute; top: var(--sp-1); right: var(--sp-1);
+  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-muted);
+  border-radius: var(--radius-sm); font-size: var(--text-xs); padding: var(--sp-1) var(--sp-2);
+  cursor: pointer; opacity: 0.85; font-family: inherit;
+}
+.copy-btn:hover { color: var(--accent); border-color: var(--accent); opacity: 1; }
+
+/* ── Callouts ─ (border-color BEFORE border-left-color so the accent wins) ── */
+.callout {
+  margin: var(--sp-4) 0; padding: var(--sp-3) var(--sp-4);
+  border: 1px solid var(--border); border-left-width: 3px;
+  border-radius: var(--radius-sm); background: var(--bg-card);
+}
+.callout > :first-child { margin-top: 0; }
+.callout > :last-child { margin-bottom: 0; }
+.callout-note, .callout-info { background: var(--blue-bg);   border-color: var(--blue-border);   border-left-color: var(--blue); }
+.callout-tip                 { background: var(--green-bg);  border-color: var(--green-border);  border-left-color: var(--green); }
+.callout-warning             { background: var(--yellow-bg); border-color: var(--yellow-border); border-left-color: var(--yellow); }
+.callout-danger              { background: var(--red-bg);    border-color: var(--red-border);    border-left-color: var(--red); }
+
+/* ── Severity chips (:sev) — tight pill, sub-scale vertical padding ───────── */
+.sev {
+  display: inline-block; font-size: var(--text-xs); font-weight: var(--fw-semi);
+  padding: 1px var(--sp-2); border-radius: 999px; line-height: 1.5;
+  border: 1px solid var(--border); background: var(--bg-inset); color: var(--text-muted);
+  white-space: nowrap;
+}
+.sev-p0   { color: var(--sev-p0);   border-color: var(--sev-p0); }
+.sev-p1   { color: var(--sev-p1);   border-color: var(--sev-p1); }
+.sev-p2   { color: var(--sev-p2);   border-color: var(--sev-p2); }
+.sev-p3   { color: var(--sev-p3);   border-color: var(--sev-p3); }
+.sev-pass { color: var(--sev-pass); border-color: var(--sev-pass); }
+
+/* ── Citations (:cite) — inline provenance refs ──────────────────────────── */
+.fp, .cite-advisory {
+  font-family: var(--font-mono); font-size: 0.82em;
+  padding: 0.05em 0.35em; border-radius: var(--radius-sm);
+  background: var(--bg-inset); border: 1px solid var(--border-light);
+}
+.fp { color: var(--accent); }
+.cite-advisory { color: var(--text-faint); border-style: dashed; }
+
+/* ── Tables + filter-tables ──────────────────────────────────────────────── */
+.content table { width: 100%; border-collapse: collapse; margin: var(--sp-3) 0; font-size: var(--text-sm); }
+.content th, .content td { text-align: left; padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border-light); vertical-align: top; }
+.content th {
+  color: var(--text-muted); font-weight: var(--fw-semi); font-size: var(--text-xs);
+  text-transform: uppercase; letter-spacing: var(--ls-wide); border-bottom-color: var(--border);
+}
+.content tbody tr:hover { background: var(--bg-hover); }
+.content td code { white-space: nowrap; }
+.filter-table { margin: var(--sp-4) 0; }
+.filter-input {
+  width: 100%; max-width: 320px; margin-bottom: var(--sp-2);
+  padding: var(--sp-2) var(--sp-3); font-family: inherit; font-size: var(--text-sm);
+  color: var(--text); background: var(--bg-card);
+  border: 1px solid var(--border); border-radius: var(--radius-sm);
+}
+.filter-input:focus { border-color: var(--accent); }
+
+/* ── Charts (:::chart) — label + proportional bar (fill carries inline width%) */
+.chart-block { margin: var(--sp-4) 0; }
+.chart-row {
+  display: grid; grid-template-columns: minmax(var(--chart-label-w), 24%) 1fr;
+  align-items: center; gap: var(--sp-3); margin: var(--sp-1) 0;
+}
+.chart-label {
+  font-size: var(--text-sm); color: var(--text-muted); text-align: right;
+  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+}
+.chart-row .chart-bar {
+  height: 0.9em; min-width: 2px; background: var(--accent);
+  border-radius: var(--radius-sm);
+}
+
+/* ── Tabs (::::tabs / :::tab) ─────────────────────────────────────────────── */
+.tabs { margin: var(--sp-4) 0; }
+.tablist { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-bottom: 1px solid var(--border); margin-bottom: var(--sp-3); }
+.tab-btn {
+  background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
+  padding: var(--sp-2) var(--sp-3); color: var(--text-muted);
+  font-family: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); cursor: pointer;
+}
+.tab-btn:hover { color: var(--text); }
+.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tabpane { display: none; }
+.tabpane.active { display: block; }
+
+/* ── Mermaid diagrams ────────────────────────────────────────────────────── */
+.content figure { margin: var(--sp-4) 0; text-align: center; }
+.content figure svg, .content > svg, .content .mermaid svg { max-width: 100%; height: auto; }
+
+/* ── Index page: category card grid ──────────────────────────────────────── */
+.content .lead { color: var(--text-muted); font-size: var(--text-base); max-width: 60ch; margin-top: var(--sp-2); }
+.guide-cards {
+  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-min), 100%), 1fr));
+  gap: var(--sp-4); margin: var(--sp-4) 0 var(--sp-6);
+}
+.guide-card {
+  display: flex; flex-direction: column; gap: var(--sp-2);
+  padding: var(--sp-4); background: var(--bg-card);
+  border: 1px solid var(--border); border-radius: var(--radius);
+  color: inherit; text-decoration: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.guide-card:hover { border-color: var(--accent); box-shadow: var(--shadow-md); text-decoration: none; }
+.guide-card-title { font-weight: var(--fw-semi); color: var(--accent); font-size: var(--text-base); }
+.guide-card-desc { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--lh-normal); }
+
+/* ── Responsive: TOC becomes an off-canvas drawer (chrome.ts toggles .open) ──*/
+/* 860px is literal — media queries cannot read custom properties. Revisit it if
+   --topbar-h / --rail-w / --drawer-w change (the drawer sticky offsets key off them). */
+@media (max-width: 860px) {
+  .nav-toggle { display: inline-flex; align-items: center; }
+  .layout { grid-template-columns: 1fr; gap: 0; }
+  .rail {
+    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--drawer-w); z-index: 50;
+    height: auto; background: var(--bg-card); border-right: 1px solid var(--border);
+    padding: var(--sp-4); box-shadow: var(--shadow-lg);
+    transform: translateX(-100%); transition: transform 0.2s ease, visibility 0.2s ease;
+    /* Closed drawer is off-screen AND removed from tab order / pointer events. */
+    visibility: hidden; pointer-events: none;
+  }
+  .rail.open { transform: translateX(0); visibility: visible; pointer-events: auto; }
+  .rail-close {
+    display: block; margin-left: auto; margin-bottom: var(--sp-2);
+    background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
+    border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-3); font-size: var(--text-base);
+    line-height: 1; cursor: pointer; font-family: inherit;
+  }
+  .rail-close:hover { background: var(--bg-hover); border-color: var(--accent); }
+  .rail-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  .rail-backdrop {
+    display: block; position: fixed; inset: var(--topbar-h) 0 0 0;
+    background: var(--scrim); z-index: 49;
+    opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
+  }
+  .rail.open ~ .rail-backdrop { opacity: 1; pointer-events: auto; }
+}

package/dist/guides/index-page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index-page.d.ts","sourceRoot":"","sources":["../../src/guides/index-page.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAG5C,wBAAgB,eAAe,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAa1E"}
+{"version":3,"file":"index-page.d.ts","sourceRoot":"","sources":["../../src/guides/index-page.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAkB5C,wBAAgB,eAAe,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAsC1E"}

package/dist/guides/index-page.js

@@ -1,14 +1,47 @@
 import { wrapInChrome, esc } from './template.js';
+const CATEGORY_ORDER = ['concepts', 'reference', 'workflows', 'tools'];
+const CATEGORY_LABEL = {
+    concepts: 'Concepts',
+    reference: 'Reference',
+    workflows: 'Workflows',
+    tools: 'Tools',
+};
+function catLabel(c) {
+    return CATEGORY_LABEL[c] ?? c.charAt(0).toUpperCase() + c.slice(1);
+}
+function catId(c) {
+    return 'cat-' + c.toLowerCase().replace(/[^a-z0-9]+/g, '-');
+}
 export function renderIndexPage(entries, css) {
     const sorted = [...entries].sort((a, b) => a.frontmatter.order - b.frontmatter.order);
-    const items = sorted.map((e) => `<li><a href="${e.topic}/index.html"><strong>${esc(e.frontmatter.title)}</strong></a>` +
-        `<span class="cat">${esc(e.frontmatter.category)}</span>` +
-        `<p>${esc(e.frontmatter.description)}</p></li>`).join('');
-    return wrapInChrome({
-        title: 'Scaffold Guides',
-        body: `<h2 id="guides">Guides</h2><ul class="guide-index">${items}</ul>`,
-        headings: [{ depth: 2, text: 'Guides', id: 'guides' }],
-        css,
+    // Group by category, preserving order within each group.
+    const byCat = new Map();
+    for (const e of sorted) {
+        const c = e.frontmatter.category;
+        if (!byCat.has(c))
+            byCat.set(c, []);
+        byCat.get(c).push(e);
+    }
+    const cats = [...byCat.keys()].sort((a, b) => {
+        const ia = CATEGORY_ORDER.indexOf(a);
+        const ib = CATEGORY_ORDER.indexOf(b);
+        return (ia < 0 ? 99 : ia) - (ib < 0 ? 99 : ib);
     });
+    const headings = cats.map((c) => ({ depth: 2, text: catLabel(c), id: catId(c) }));
+    const sections = cats
+        .map((c) => {
+        const cards = byCat
+            .get(c)
+            .map((e) => `<a class="guide-card" href="${e.topic}/index.html">` +
+            `<span class="guide-card-title">${esc(e.frontmatter.title)}</span>` +
+            `<span class="guide-card-desc">${esc(e.frontmatter.description)}</span></a>`)
+            .join('');
+        return `<h2 id="${catId(c)}">${esc(catLabel(c))}</h2><div class="guide-cards">${cards}</div>`;
+    })
+        .join('');
+    const intro = '<p class="lead">Reference guides for Scaffold — human- and agent-readable. ' +
+        'Open a guide to read it in your browser; agents read the markdown source with ' +
+        '<code>scaffold guides &lt;topic&gt; --markdown</code>.</p>';
+    return wrapInChrome({ title: 'Scaffold Guides', body: intro + sections, headings, css });
 }
 //# sourceMappingURL=index-page.js.map