@laitszkin/apollo-toolkit 3.11.0 → 3.11.1

package/init-project-html/sample-demo/resources/project-architecture/assets/viewer.client.js

@@ -1,93 +1,136 @@
-/* viewer.client.js — pan/zoom for the macro atlas SVG. No deps; wires
- * onto any element marked [data-pan-zoom-viewport] containing one
- * [data-atlas-svg] SVG. Mouse wheel zooms around the cursor; drag pans;
- * toolbar buttons handle +/-/Fit; keyboard arrows pan. */
+/* viewer.client.js — pan/zoom for every atlas SVG on the page.
+ *
+ * Each `[data-pan-zoom-viewport]` element gets its own state and
+ * handlers, so a single page can host the macro atlas SVG AND
+ * sub-module-internal dataflow SVGs simultaneously. Toolbar buttons
+ * (`[data-pan-zoom="zoom-in|zoom-out|fit"]`) are scoped to the
+ * containing `[data-pan-zoom-container]` (falls back to the viewport's
+ * direct parent), so multiple toolbars on one page do not collide.
+ * Keyboard shortcuts (`←` / `→` / `↑` / `↓` / `+` / `−` / `0`) drive
+ * the page's first viewport — the "primary" diagram of that page
+ * (macro SVG on `index.html`; sub-dataflow SVG on a sub-module page).
+ */
 
 (function () {
   'use strict';
 
-  const viewport = document.querySelector('[data-pan-zoom-viewport]');
-  if (!viewport) return;
-  const svg = viewport.querySelector('[data-atlas-svg]');
-  if (!svg) return;
+  const viewports = Array.from(document.querySelectorAll('[data-pan-zoom-viewport]'));
+  const controllers = viewports.map(setupViewport).filter(Boolean);
+  if (controllers.length === 0) return;
 
-  const initial = svg.getAttribute('viewBox');
-  if (!initial) return;
-  const [ix, iy, iw, ih] = initial.split(/\s+/).map(Number);
-  const state = { x: ix, y: iy, w: iw, h: ih };
-
-  function apply() {
-    svg.setAttribute('viewBox', `${state.x} ${state.y} ${state.w} ${state.h}`);
-  }
+  const primary = controllers[0];
+  document.addEventListener('keydown', function (evt) {
+    if (evt.target && (evt.target.tagName === 'INPUT' || evt.target.tagName === 'TEXTAREA')) return;
+    if (evt.key === 'ArrowLeft') { primary.pan(-1, 0); }
+    else if (evt.key === 'ArrowRight') { primary.pan(1, 0); }
+    else if (evt.key === 'ArrowUp') { primary.pan(0, -1); }
+    else if (evt.key === 'ArrowDown') { primary.pan(0, 1); }
+    else if (evt.key === '+' || evt.key === '=') { primary.zoom(1 / 1.2); }
+    else if (evt.key === '-' || evt.key === '_') { primary.zoom(1.2); }
+    else if (evt.key === '0') { primary.fit(); }
+  });
 
-  function zoom(factor, cx, cy) {
-    const newW = Math.max(40, Math.min(state.w * factor, iw * 8));
-    const newH = newW * (state.h / state.w);
-    if (cx == null) { cx = state.x + state.w / 2; cy = state.y + state.h / 2; }
-    state.x = cx - (cx - state.x) * (newW / state.w);
-    state.y = cy - (cy - state.y) * (newH / state.h);
-    state.w = newW;
-    state.h = newH;
-    apply();
-  }
+  function setupViewport(viewport) {
+    const svg = viewport.querySelector('[data-atlas-svg]');
+    if (!svg) return null;
+    const initial = svg.getAttribute('viewBox');
+    if (!initial) return null;
+    const [ix, iy, iw, ih] = initial.split(/\s+/).map(Number);
+    const state = { x: ix, y: iy, w: iw, h: ih };
 
-  function clientToSvg(evt) {
-    const rect = svg.getBoundingClientRect();
-    const xRatio = (evt.clientX - rect.left) / rect.width;
-    const yRatio = (evt.clientY - rect.top) / rect.height;
-    return { x: state.x + xRatio * state.w, y: state.y + yRatio * state.h };
-  }
+    function apply() {
+      svg.setAttribute('viewBox', `${state.x} ${state.y} ${state.w} ${state.h}`);
+    }
+    function fit() {
+      state.x = ix; state.y = iy; state.w = iw; state.h = ih;
+      apply();
+    }
+    function zoom(factor, cx, cy) {
+      const newW = Math.max(40, Math.min(state.w * factor, iw * 8));
+      const newH = newW * (state.h / state.w);
+      if (cx == null) { cx = state.x + state.w / 2; cy = state.y + state.h / 2; }
+      state.x = cx - (cx - state.x) * (newW / state.w);
+      state.y = cy - (cy - state.y) * (newH / state.h);
+      state.w = newW;
+      state.h = newH;
+      apply();
+    }
+    function pan(dirX, dirY) {
+      const stepX = state.w * 0.08;
+      const stepY = state.h * 0.08;
+      state.x += dirX * stepX;
+      state.y += dirY * stepY;
+      apply();
+    }
+    function clientToSvg(evt) {
+      const rect = svg.getBoundingClientRect();
+      const xRatio = (evt.clientX - rect.left) / rect.width;
+      const yRatio = (evt.clientY - rect.top) / rect.height;
+      return { x: state.x + xRatio * state.w, y: state.y + yRatio * state.h };
+    }
 
-  viewport.addEventListener('wheel', function (evt) {
-    if (!evt.ctrlKey && !evt.metaKey && Math.abs(evt.deltaY) < 4 && Math.abs(evt.deltaX) < 4) return;
-    evt.preventDefault();
-    const factor = evt.deltaY > 0 ? 1.1 : 1 / 1.1;
-    const pt = clientToSvg(evt);
-    zoom(factor, pt.x, pt.y);
-  }, { passive: false });
+    viewport.addEventListener('wheel', function (evt) {
+      if (!evt.ctrlKey && !evt.metaKey && Math.abs(evt.deltaY) < 4 && Math.abs(evt.deltaX) < 4) return;
+      evt.preventDefault();
+      const factor = evt.deltaY > 0 ? 1.1 : 1 / 1.1;
+      const pt = clientToSvg(evt);
+      zoom(factor, pt.x, pt.y);
+    }, { passive: false });
 
-  let dragging = null;
-  viewport.addEventListener('pointerdown', function (evt) {
-    if (evt.button !== 0) return;
-    dragging = { x: evt.clientX, y: evt.clientY };
-    viewport.classList.add('is-grabbing');
-    viewport.setPointerCapture(evt.pointerId);
-  });
-  viewport.addEventListener('pointermove', function (evt) {
-    if (!dragging) return;
-    const rect = svg.getBoundingClientRect();
-    const dx = ((evt.clientX - dragging.x) / rect.width) * state.w;
-    const dy = ((evt.clientY - dragging.y) / rect.height) * state.h;
-    state.x -= dx;
-    state.y -= dy;
-    dragging = { x: evt.clientX, y: evt.clientY };
-    apply();
-  });
-  function endDrag(evt) {
-    if (!dragging) return;
-    dragging = null;
-    viewport.classList.remove('is-grabbing');
-    try { viewport.releasePointerCapture(evt.pointerId); } catch (e) { /* ignore */ }
-  }
-  viewport.addEventListener('pointerup', endDrag);
-  viewport.addEventListener('pointercancel', endDrag);
-  viewport.addEventListener('pointerleave', endDrag);
+    // Drag-pan: defer the pointer capture (and the "is-grabbing" class)
+    // until the pointer actually moves past a small threshold. Without
+    // this, a single click on an SVG <a> (sub-module link) would be
+    // captured by the viewport and never reach the link.
+    const DRAG_THRESHOLD_PX = 4;
+    let pending = null;
+    let dragging = null;
+    viewport.addEventListener('pointerdown', function (evt) {
+      if (evt.button !== 0) return;
+      pending = { x: evt.clientX, y: evt.clientY, pointerId: evt.pointerId };
+    });
+    viewport.addEventListener('pointermove', function (evt) {
+      if (!dragging && pending && pending.pointerId === evt.pointerId) {
+        const dx = evt.clientX - pending.x;
+        const dy = evt.clientY - pending.y;
+        if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;
+        dragging = { x: pending.x, y: pending.y, pointerId: pending.pointerId };
+        pending = null;
+        viewport.classList.add('is-grabbing');
+        try { viewport.setPointerCapture(dragging.pointerId); } catch (e) { /* ignore */ }
+      }
+      if (!dragging || dragging.pointerId !== evt.pointerId) return;
+      evt.preventDefault();
+      const rect = svg.getBoundingClientRect();
+      const dx = ((evt.clientX - dragging.x) / rect.width) * state.w;
+      const dy = ((evt.clientY - dragging.y) / rect.height) * state.h;
+      state.x -= dx;
+      state.y -= dy;
+      dragging.x = evt.clientX;
+      dragging.y = evt.clientY;
+      apply();
+    });
+    function endDrag(evt) {
+      pending = null;
+      if (!dragging) return;
+      const draggedId = dragging.pointerId;
+      dragging = null;
+      viewport.classList.remove('is-grabbing');
+      try { viewport.releasePointerCapture(draggedId); } catch (e) { /* ignore */ }
+      // Suppress the synthetic click that would follow a drag-release
+      // on top of a sub-module <a>; only the no-movement case should
+      // navigate.
+      const swallow = (e) => { e.preventDefault(); e.stopPropagation(); };
+      viewport.addEventListener('click', swallow, { capture: true, once: true });
+    }
+    viewport.addEventListener('pointerup', endDrag);
+    viewport.addEventListener('pointercancel', endDrag);
+    viewport.addEventListener('pointerleave', endDrag);
 
-  document.addEventListener('keydown', function (evt) {
-    if (evt.target && (evt.target.tagName === 'INPUT' || evt.target.tagName === 'TEXTAREA')) return;
-    const step = state.w * 0.08;
-    if (evt.key === 'ArrowLeft') { state.x -= step; apply(); }
-    else if (evt.key === 'ArrowRight') { state.x += step; apply(); }
-    else if (evt.key === 'ArrowUp') { state.y -= step; apply(); }
-    else if (evt.key === 'ArrowDown') { state.y += step; apply(); }
-    else if (evt.key === '+' || evt.key === '=') { zoom(1 / 1.2); }
-    else if (evt.key === '-' || evt.key === '_') { zoom(1.2); }
-    else if (evt.key === '0') { state.x = ix; state.y = iy; state.w = iw; state.h = ih; apply(); }
-  });
+    const container = viewport.closest('[data-pan-zoom-container]') || viewport.parentElement || document;
+    container.querySelectorAll('[data-pan-zoom="zoom-in"]').forEach((btn) => btn.addEventListener('click', () => zoom(1 / 1.2)));
+    container.querySelectorAll('[data-pan-zoom="zoom-out"]').forEach((btn) => btn.addEventListener('click', () => zoom(1.2)));
+    container.querySelectorAll('[data-pan-zoom="fit"]').forEach((btn) => btn.addEventListener('click', fit));
 
-  document.querySelectorAll('[data-pan-zoom="zoom-in"]').forEach((btn) => btn.addEventListener('click', () => zoom(1 / 1.2)));
-  document.querySelectorAll('[data-pan-zoom="zoom-out"]').forEach((btn) => btn.addEventListener('click', () => zoom(1.2)));
-  document.querySelectorAll('[data-pan-zoom="fit"]').forEach((btn) => btn.addEventListener('click', () => {
-    state.x = ix; state.y = iy; state.w = iw; state.h = ih; apply();
-  }));
+    return { zoom, fit, pan };
+  }
 })();

package/init-project-html/sample-demo/resources/project-architecture/atlas/features/get-invite-codes.yaml

@@ -83,10 +83,23 @@ submodules:
         scope: tx
         purpose: Persisted invite_codes row carrying owner, code, expiry, and consumption state.
     dataflow:
-      - Open transaction.
-      - Generate candidate code via generateCode.
-      - INSERT invite_codes row (retry on unique-violation).
-      - Commit and return code.
+      - step: Open transaction.
+        fn: Issue
+      - step: Build candidate code from random bytes.
+        fn: generateCode
+        writes:
+          - code
+      - step: Persist row via INSERT (retry on unique-violation).
+        fn: Issue
+        reads:
+          - code
+        writes:
+          - row
+      - step: Commit transaction and return code to caller.
+        fn: Issue
+        reads:
+          - code
+          - row
     errors:
       - name: ErrCollision
         when: Unique constraint on code repeatedly violated.

package/init-project-html/sample-demo/resources/project-architecture/features/get-invite-codes/invite-code-generator.html

@@ -28,23 +28,39 @@
     </section>
     <section class="sub-dataflow" aria-label="Internal data flow">
       <h2>Internal data flow</h2>
-      <svg class="sub-dataflow__svg" viewBox="0 0 400 180" role="img" aria-label="Internal dataflow">
-  <defs><marker id="sub-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" /></marker></defs>
+      <div class="sub-dataflow__canvas" data-pan-zoom-container>
+        <div class="sub-dataflow__toolbar" role="toolbar" aria-label="Diagram controls">
+          <button type="button" data-pan-zoom="zoom-in" aria-label="Zoom in">+</button>
+          <button type="button" data-pan-zoom="zoom-out" aria-label="Zoom out">−</button>
+          <button type="button" data-pan-zoom="fit" aria-label="Reset view">Fit</button>
+        </div>
+        <div class="sub-dataflow__viewport" data-pan-zoom-viewport>
+          <svg class="sub-dataflow__svg" data-atlas-svg="sub-dataflow" viewBox="0 0 628 252" role="img" aria-label="Internal dataflow">
+  <defs>
+    <marker id="sub-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" /></marker>
+  </defs>
   <g class="sub-dataflow__step">
-    <rect x="20" y="20" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="44" text-anchor="middle">Read 8 random bytes.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="68" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="73" text-anchor="middle">1</text>
+    <rect class="sub-dataflow__box" x="80" y="32" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="74" text-anchor="middle">Read 8 random bytes.</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="76" x2="200" y2="104" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="110" x2="340" y2="140" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="104" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="128" text-anchor="middle">Base32 encode without padding.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="184" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="189" text-anchor="middle">2</text>
+    <rect class="sub-dataflow__box" x="80" y="148" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="190" text-anchor="middle">Base32 encode without padding.</text>
   </g>
 </svg>
+        </div>
+      </div>
     </section>
     <section class="sub-errors" aria-label="Errors">
       <h2>Errors</h2>
       <p class="sub-section__empty">No errors recorded.</p>
     </section>
   </main>
+  <script src="../../assets/viewer.client.js" defer></script>
 </body>
 </html>

package/init-project-html/sample-demo/resources/project-architecture/features/get-invite-codes/invite-issuance-service.html

@@ -35,28 +35,59 @@
     </section>
     <section class="sub-dataflow" aria-label="Internal data flow">
       <h2>Internal data flow</h2>
-      <svg class="sub-dataflow__svg" viewBox="0 0 400 348" role="img" aria-label="Internal dataflow">
-  <defs><marker id="sub-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" /></marker></defs>
+      <div class="sub-dataflow__canvas" data-pan-zoom-container>
+        <div class="sub-dataflow__toolbar" role="toolbar" aria-label="Diagram controls">
+          <button type="button" data-pan-zoom="zoom-in" aria-label="Zoom in">+</button>
+          <button type="button" data-pan-zoom="zoom-out" aria-label="Zoom out">−</button>
+          <button type="button" data-pan-zoom="fit" aria-label="Reset view">Fit</button>
+        </div>
+        <div class="sub-dataflow__viewport" data-pan-zoom-viewport>
+          <svg class="sub-dataflow__svg" data-atlas-svg="sub-dataflow" viewBox="0 0 628 626" role="img" aria-label="Internal dataflow">
+  <defs>
+    <marker id="sub-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" /></marker>
+  </defs>
   <g class="sub-dataflow__step">
-    <rect x="20" y="20" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="44" text-anchor="middle">Open transaction.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="76" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="81" text-anchor="middle">1</text>
+    <rect class="sub-dataflow__box" x="80" y="32" width="520" height="88" rx="14" ry="14" />
+    <rect class="sub-dataflow__fn-bg" x="94" y="46" width="79.2" height="20" rx="10" ry="10" />
+    <text class="sub-dataflow__fn-text" x="104" y="60">fn Issue</text>
+    <text class="sub-dataflow__text" x="340" y="98" text-anchor="middle">Open transaction.</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="76" x2="200" y2="104" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="126" x2="340" y2="156" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="104" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="128" text-anchor="middle">Generate candidate code via generateCode.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="221" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="226" text-anchor="middle">2</text>
+    <rect class="sub-dataflow__box" x="80" y="164" width="520" height="114" rx="14" ry="14" />
+    <rect class="sub-dataflow__fn-bg" x="94" y="178" width="131" height="20" rx="10" ry="10" />
+    <text class="sub-dataflow__fn-text" x="104" y="192">fn generateCode</text>
+    <text class="sub-dataflow__text" x="340" y="230" text-anchor="middle">Build candidate code from random bytes.</text>
+    <text class="sub-dataflow__chip sub-dataflow__chip--writes" x="586" y="266" text-anchor="end">→ writes: code</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="160" x2="200" y2="188" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="284" x2="340" y2="314" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="188" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="212" text-anchor="middle">INSERT invite_codes row (retry on unique-violation).</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="379" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="384" text-anchor="middle">3</text>
+    <rect class="sub-dataflow__box" x="80" y="322" width="520" height="114" rx="14" ry="14" />
+    <rect class="sub-dataflow__fn-bg" x="94" y="336" width="79.2" height="20" rx="10" ry="10" />
+    <text class="sub-dataflow__fn-text" x="104" y="350">fn Issue</text>
+    <text class="sub-dataflow__text" x="340" y="388" text-anchor="middle">Persist row via INSERT (retry on unique-violation).</text>
+    <text class="sub-dataflow__chip sub-dataflow__chip--reads" x="94" y="424">← reads: code</text>
+    <text class="sub-dataflow__chip sub-dataflow__chip--writes" x="586" y="424" text-anchor="end">→ writes: row</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="244" x2="200" y2="272" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="442" x2="340" y2="472" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="272" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="296" text-anchor="middle">Commit and return code.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="537" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="542" text-anchor="middle">4</text>
+    <rect class="sub-dataflow__box" x="80" y="480" width="520" height="114" rx="14" ry="14" />
+    <rect class="sub-dataflow__fn-bg" x="94" y="494" width="79.2" height="20" rx="10" ry="10" />
+    <text class="sub-dataflow__fn-text" x="104" y="508">fn Issue</text>
+    <text class="sub-dataflow__text" x="340" y="546" text-anchor="middle">Commit transaction and return code to caller.</text>
+    <text class="sub-dataflow__chip sub-dataflow__chip--reads" x="94" y="582">← reads: code, row</text>
   </g>
 </svg>
+        </div>
+      </div>
     </section>
     <section class="sub-errors" aria-label="Errors">
       <h2>Errors</h2>
@@ -68,5 +99,6 @@
       </table>
     </section>
   </main>
+  <script src="../../assets/viewer.client.js" defer></script>
 </body>
 </html>

package/init-project-html/sample-demo/resources/project-architecture/features/get-invite-codes/postgresql.html

@@ -34,23 +34,40 @@
     </section>
     <section class="sub-dataflow" aria-label="Internal data flow">
       <h2>Internal data flow</h2>
-      <svg class="sub-dataflow__svg" viewBox="0 0 400 264" role="img" aria-label="Internal dataflow">
-  <defs><marker id="sub-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" /></marker></defs>
+      <div class="sub-dataflow__canvas" data-pan-zoom-container>
+        <div class="sub-dataflow__toolbar" role="toolbar" aria-label="Diagram controls">
+          <button type="button" data-pan-zoom="zoom-in" aria-label="Zoom in">+</button>
+          <button type="button" data-pan-zoom="zoom-out" aria-label="Zoom out">−</button>
+          <button type="button" data-pan-zoom="fit" aria-label="Reset view">Fit</button>
+        </div>
+        <div class="sub-dataflow__viewport" data-pan-zoom-viewport>
+          <svg class="sub-dataflow__svg" data-atlas-svg="sub-dataflow" viewBox="0 0 628 368" role="img" aria-label="Internal dataflow">
+  <defs>
+    <marker id="sub-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" /></marker>
+  </defs>
   <g class="sub-dataflow__step">
-    <rect x="20" y="20" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="44" text-anchor="middle">Accept INSERT from invite-issuance-service.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="68" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="73" text-anchor="middle">1</text>
+    <rect class="sub-dataflow__box" x="80" y="32" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="74" text-anchor="middle">Accept INSERT from invite-issuance-service.</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="76" x2="200" y2="104" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="110" x2="340" y2="140" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="104" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="128" text-anchor="middle">Enforce unique constraint on code.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="184" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="189" text-anchor="middle">2</text>
+    <rect class="sub-dataflow__box" x="80" y="148" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="190" text-anchor="middle">Enforce unique constraint on code.</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="160" x2="200" y2="188" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="226" x2="340" y2="256" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="188" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="212" text-anchor="middle">Return new rowid.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="300" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="305" text-anchor="middle">3</text>
+    <rect class="sub-dataflow__box" x="80" y="264" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="306" text-anchor="middle">Return new rowid.</text>
   </g>
 </svg>
+        </div>
+      </div>
     </section>
     <section class="sub-errors" aria-label="Errors">
       <h2>Errors</h2>
@@ -62,5 +79,6 @@
       </table>
     </section>
   </main>
+  <script src="../../assets/viewer.client.js" defer></script>
 </body>
 </html>

package/init-project-html/sample-demo/resources/project-architecture/features/get-invite-codes/public-api.html

@@ -33,28 +33,47 @@
     </section>
     <section class="sub-dataflow" aria-label="Internal data flow">
       <h2>Internal data flow</h2>
-      <svg class="sub-dataflow__svg" viewBox="0 0 400 348" role="img" aria-label="Internal dataflow">
-  <defs><marker id="sub-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" /></marker></defs>
+      <div class="sub-dataflow__canvas" data-pan-zoom-container>
+        <div class="sub-dataflow__toolbar" role="toolbar" aria-label="Diagram controls">
+          <button type="button" data-pan-zoom="zoom-in" aria-label="Zoom in">+</button>
+          <button type="button" data-pan-zoom="zoom-out" aria-label="Zoom out">−</button>
+          <button type="button" data-pan-zoom="fit" aria-label="Reset view">Fit</button>
+        </div>
+        <div class="sub-dataflow__viewport" data-pan-zoom-viewport>
+          <svg class="sub-dataflow__svg" data-atlas-svg="sub-dataflow" viewBox="0 0 628 484" role="img" aria-label="Internal dataflow">
+  <defs>
+    <marker id="sub-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" /></marker>
+  </defs>
   <g class="sub-dataflow__step">
-    <rect x="20" y="20" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="44" text-anchor="middle">Validate Authorization header.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="68" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="73" text-anchor="middle">1</text>
+    <rect class="sub-dataflow__box" x="80" y="32" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="74" text-anchor="middle">Validate Authorization header.</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="76" x2="200" y2="104" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="110" x2="340" y2="140" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="104" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="128" text-anchor="middle">Resolve userId from token.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="184" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="189" text-anchor="middle">2</text>
+    <rect class="sub-dataflow__box" x="80" y="148" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="190" text-anchor="middle">Resolve userId from token.</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="160" x2="200" y2="188" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="226" x2="340" y2="256" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="188" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="212" text-anchor="middle">Call invite-issuance-service.Issue.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="300" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="305" text-anchor="middle">3</text>
+    <rect class="sub-dataflow__box" x="80" y="264" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="306" text-anchor="middle">Call invite-issuance-service.Issue.</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="244" x2="200" y2="272" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="342" x2="340" y2="372" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="272" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="296" text-anchor="middle">Serialize response.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="416" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="421" text-anchor="middle">4</text>
+    <rect class="sub-dataflow__box" x="80" y="380" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="422" text-anchor="middle">Serialize response.</text>
   </g>
 </svg>
+        </div>
+      </div>
     </section>
     <section class="sub-errors" aria-label="Errors">
       <h2>Errors</h2>
@@ -66,5 +85,6 @@
       </table>
     </section>
   </main>
+  <script src="../../assets/viewer.client.js" defer></script>
 </body>
 </html>

package/init-project-html/sample-demo/resources/project-architecture/features/get-invite-codes/web-get-invite-ui.html

@@ -34,23 +34,40 @@
     </section>
     <section class="sub-dataflow" aria-label="Internal data flow">
       <h2>Internal data flow</h2>
-      <svg class="sub-dataflow__svg" viewBox="0 0 400 264" role="img" aria-label="Internal dataflow">
-  <defs><marker id="sub-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" /></marker></defs>
+      <div class="sub-dataflow__canvas" data-pan-zoom-container>
+        <div class="sub-dataflow__toolbar" role="toolbar" aria-label="Diagram controls">
+          <button type="button" data-pan-zoom="zoom-in" aria-label="Zoom in">+</button>
+          <button type="button" data-pan-zoom="zoom-out" aria-label="Zoom out">−</button>
+          <button type="button" data-pan-zoom="fit" aria-label="Reset view">Fit</button>
+        </div>
+        <div class="sub-dataflow__viewport" data-pan-zoom-viewport>
+          <svg class="sub-dataflow__svg" data-atlas-svg="sub-dataflow" viewBox="0 0 628 368" role="img" aria-label="Internal dataflow">
+  <defs>
+    <marker id="sub-arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="9" markerHeight="9" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 Z" /></marker>
+  </defs>
   <g class="sub-dataflow__step">
-    <rect x="20" y="20" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="44" text-anchor="middle">Read userId from auth context.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="68" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="73" text-anchor="middle">1</text>
+    <rect class="sub-dataflow__box" x="80" y="32" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="74" text-anchor="middle">Read userId from auth context.</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="76" x2="200" y2="104" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="110" x2="340" y2="140" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="104" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="128" text-anchor="middle">POST /api/invites with userId.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="184" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="189" text-anchor="middle">2</text>
+    <rect class="sub-dataflow__box" x="80" y="148" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="190" text-anchor="middle">POST /api/invites with userId.</text>
   </g>
-  <line class="sub-dataflow__arrow" x1="200" y1="160" x2="200" y2="188" marker-end="url(#sub-arrow)" />
+  <line class="sub-dataflow__arrow" x1="340" y1="226" x2="340" y2="256" marker-end="url(#sub-arrow)" />
   <g class="sub-dataflow__step">
-    <rect x="20" y="188" width="360" height="56" rx="8" ry="8" />
-    <text x="200" y="212" text-anchor="middle">Render returned code or surface error.</text>
+    <circle class="sub-dataflow__badge" cx="42" cy="300" r="18" />
+    <text class="sub-dataflow__badge-text" x="42" y="305" text-anchor="middle">3</text>
+    <rect class="sub-dataflow__box" x="80" y="264" width="520" height="72" rx="14" ry="14" />
+    <text class="sub-dataflow__text" x="340" y="306" text-anchor="middle">Render returned code or surface error.</text>
   </g>
 </svg>
+        </div>
+      </div>
     </section>
     <section class="sub-errors" aria-label="Errors">
       <h2>Errors</h2>
@@ -63,5 +80,6 @@
       </table>
     </section>
   </main>
+  <script src="../../assets/viewer.client.js" defer></script>
 </body>
 </html>