ketatlas 0.1.0

package/src/layout.js

@@ -0,0 +1,103 @@
+/** Deterministic grid layout. Each row/column fits its largest card. */
+export function layoutAtlas(config) {
+  const screens = new Map(config.screens.map((s) => [s.id, s]));
+  const nodes = [],
+    nodeByKey = new Map(),
+    flowById = new Map();
+  let height = 0,
+    width = 0;
+  const flows = config.flows.map((flow, index) => {
+    const f = { ...flow, index, y: height };
+    f.nodes = flow.nodes.map((n) => {
+      const screen = screens.get(n.screen),
+        v = screen?.viewport;
+      const cardWidth = v ? (v.width > 600 ? 460 : 232) : 270;
+      const previewWidth = cardWidth - 2;
+      const previewHeight = v ? (previewWidth * v.height) / v.width : 0;
+      return {
+        ...n,
+        key: n.id,
+        col: n.column,
+        kind: n.type,
+        screenId: n.screen,
+        screen,
+        flowId: f.id,
+        uid: `${f.id}:${n.id}`,
+        title: n.title || screen?.title,
+        url: n.url || screen?.url,
+        description: n.description || screen?.description || "",
+        width: cardWidth,
+        previewWidth,
+        previewHeight,
+        height: v ? Math.ceil(previewHeight) + 92 : 230,
+      };
+    });
+    const cols = [],
+      rows = [];
+    for (const n of f.nodes) {
+      cols[n.col] = Math.max(cols[n.col] || 0, n.width);
+      rows[n.row] = Math.max(rows[n.row] || 0, n.height);
+    }
+    const offset = (sizes, i, gap, fallback) =>
+      Array.from({ length: i }, (_, k) => (sizes[k] || fallback) + gap).reduce((a, b) => a + b, 0);
+    for (const n of f.nodes) {
+      n.x = 80 + offset(cols, n.col, 170, 232);
+      n.y = height + 240 + offset(rows, n.row, 210, 230);
+      nodes.push(n);
+      nodeByKey.set(n.uid, n);
+    }
+    f.width = Math.max(...f.nodes.map((n) => n.x + n.width)) + 80;
+    f.height = Math.max(...f.nodes.map((n) => n.y + n.height)) - f.y + 60;
+    height += f.height + 120;
+    width = Math.max(width, f.width);
+    flowById.set(f.id, f);
+    return f;
+  });
+  return { flows, nodes, nodeByKey, flowById, width, height };
+}
+const ports = (n, side) =>
+  ({
+    left: [n.x, n.y + n.height / 2],
+    right: [n.x + n.width, n.y + n.height / 2],
+    top: [n.x + n.width / 2, n.y],
+    bottom: [n.x + n.width / 2, n.y + n.height],
+  })[side];
+export function edgePath(a, b, index = 0) {
+  const lane = index % 3;
+  let start, end, points, label;
+  if (a.uid === b.uid) {
+    start = ports(a, "right");
+    end = ports(b, "top");
+    const x = a.x + a.width + 70,
+      y = a.y - 70;
+    points = [start, [x, start[1]], [x, y], [end[0], y], end];
+    label = [x, y];
+  } else if (a.row === b.row && b.col === a.col + 1) {
+    start = ports(a, "right");
+    end = ports(b, "left");
+    const mid = (start[0] + end[0]) / 2;
+    points = [start, [mid, start[1]], [mid, end[1]], end];
+    label = [mid, (start[1] + end[1]) / 2];
+  } else if (a.row === b.row) {
+    start = ports(a, "top");
+    end = ports(b, "top");
+    const y = Math.min(a.y, b.y) - 88 - lane * 28;
+    points = [start, [start[0], y], [end[0], y], end];
+    label = [(start[0] + end[0]) / 2, y];
+  } else if (b.row === a.row + 1) {
+    start = ports(a, "bottom");
+    end = ports(b, "top");
+    const y = Math.min(b.y - 45, a.y + a.height + 65 + lane * 24);
+    points = [start, [start[0], y], [end[0], y], end];
+    label = [(start[0] + end[0]) / 2, y];
+  } else {
+    const left = b.col < a.col;
+    start = ports(a, left ? "left" : "right");
+    end = ports(b, "top");
+    const x = left ? a.x - 85 : a.x + a.width + 85,
+      y = b.y - 88 - lane * 28;
+    points = [start, [x, start[1]], [x, y], [end[0], y], end];
+    label = [x, (start[1] + y) / 2];
+  }
+  return { d: points.map((p, i) => `${i ? "L" : "M"} ${p[0]} ${p[1]}`).join(" "), label };
+}

package/src/template.js

@@ -0,0 +1,38 @@
+export const escapeHTML = (value) =>
+  String(value ?? "")
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+export function template(config) {
+  return `<div class="flow-page" data-kv-design-system>
+    <header class="map-header">
+      <button id="map-menu" class="icon-button" aria-label="Choose a flow" aria-expanded="false" aria-controls="map-sidebar"></button>
+      <div class="map-brand"><span class="brand-mark">K</span><span><strong>${escapeHTML(config.title)}</strong><small>KetAtlas · Workflow atlas</small></span></div>
+      <span id="map-total" class="map-total"></span>
+      <div class="map-header-actions"><button id="map-help" class="icon-button" aria-label="Help"></button></div>
+    </header>
+    <div class="map-layout">
+      <aside id="map-sidebar" class="map-sidebar">
+        <div class="map-sidebar-heading"><h1>Workflows</h1><p>Choose a flow. Follow the journey.</p></div>
+        <div class="review-search"><input id="flow-search" type="search" aria-label="Search flows and screens" placeholder="Search flows, screens, IDs…"></div>
+        <nav id="flow-list" aria-label="Workflows"></nav>
+        <div class="map-sidebar-footer"><span class="map-live-dot"></span><p>Real HTML, connected.<br>Double-click a screen to try it.</p></div>
+      </aside>
+      <main id="map-viewport" class="map-viewport" tabindex="0" role="region" aria-label="Interactive workflow map" aria-describedby="map-instructions">
+        <div id="map-world" class="map-world"><svg id="map-edges" class="map-edges" aria-hidden="true"></svg><div id="map-lanes"></div><div id="map-nodes"></div></div>
+        <div class="map-context"><div class="map-context-text"><span id="flow-position"></span><h2 id="current-flow-title"></h2><p id="current-flow-description"></p></div><button id="flow-start" data-ui="action" data-variant="secondary">Back to start</button></div>
+        <div class="map-legend"><span><i class="main"></i>Primary</span><span><i class="branch"></i>Conditional</span><span><i class="recovery"></i>Recovery</span></div>
+        <div id="node-details" class="node-details" hidden></div>
+        <div class="map-bottom"><p id="map-instructions">Drag to explore · Scroll to pan · Ctrl/⌘ + scroll to zoom</p><div class="map-zoom">
+          <button id="zoom-out" class="icon-button" aria-label="Zoom out"></button><button id="zoom-reset" title="Reset to 100%">100%</button><button id="zoom-in" class="icon-button" aria-label="Zoom in"></button><span class="map-control-divider"></span><button id="zoom-fit" class="icon-button" aria-label="Fit current flow" title="Fit flow · F"></button>
+        </div></div>
+        <div class="map-minimap"><span>Current flow</span><svg id="minimap" viewBox="0 0 168 114" role="img" aria-label="Current viewport position"></svg><button id="minimap-fit">Fit entire flow</button></div>
+      </main>
+    </div>
+    <dialog id="screen-dialog" class="screen-dialog" aria-labelledby="dialog-title"><header><div><small id="dialog-screen-id"></small><h2 id="dialog-title"></h2></div><button id="close-screen" class="icon-button" aria-label="Close preview"></button></header><div id="dialog-preview"></div><footer><p>Interactive preview</p><a id="dialog-open" data-ui="action" data-variant="secondary" target="_blank" rel="noopener noreferrer">Open in new tab</a></footer></dialog>
+    <dialog id="help-dialog" class="help-dialog" aria-labelledby="help-title"><h2 id="help-title">Explore the whole journey</h2><ul>
+      <li>Drag the canvas or a screen card to move around.</li><li>Use + / −, Ctrl/⌘ + scroll, or pinch to zoom.</li><li>Choose a workflow in the sidebar. Fit the flow to see every branch.</li><li>Click a node to follow its outgoing steps. Double-click a screen to interact.</li><li>Use arrow keys to pan, F to fit, 0 to return to the start, and Escape to close.</li>
+    </ul><p>Arrows describe the authored flow. Embedded screens keep their own behavior.</p><button id="close-help" data-ui="action" data-variant="primary">Got it</button></dialog>
+  </div>`;
+}