adr-kit 0.10.0 → 0.12.0

package/dist/core/graph-view.js

@@ -1,96 +1,5 @@
-/** Inline assets for the offline decision map. No network or runtime dependency. */
+/** Map-specific inline styles; the viewer shell is shared with the tree. */
 export const MAP_STYLE = String.raw `
-
-:root {
-  font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
-  color: #233c36;
-  background: #f6f8f5
-}
-* {
-  box-sizing: border-box
-}
-body {
-  margin: 0
-}
-a {
-  color: inherit
-}
-header {
-  height: 64px;
-  background: #fff;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 28px;
-  border-bottom: 1px solid #e1e7e1;
-  gap: 14px
-}
-.brand {
-  font-size: 16px;
-  font-weight: 750;
-  letter-spacing: -.5px;
-  display: flex;
-  align-items: center;
-  gap: 10px
-}
-.logo {
-  background: #284f40;
-  color: #fff;
-  border-radius: 8px;
-  padding: 6px 9px;
-  font-family: monospace
-}
-.brand small {
-  font-size: 11px;
-  color: #728079;
-  font-weight: 500;
-  letter-spacing: 1px;
-  margin-left: 14px
-}
-.intro {
-  padding: 24px 32px 6px
-}
-.eyebrow {
-  color: #788b7b;
-  letter-spacing: 2px;
-  font: 11px monospace;
-  margin-bottom: 8px
-}
-h1 {
-  font-size: 23px;
-  letter-spacing: -.6px;
-  margin: 0;
-  font-weight: 650
-}
-.intro p {
-  font-size: 12px;
-  color: #718078;
-  margin: 8px 0 0
-}
-.stats {
-  display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  margin-top: 16px
-}
-.stat {
-  background: #fff;
-  border: 1px solid #e1e7e1;
-  border-radius: 10px;
-  padding: 8px 13px;
-  font-size: 11px;
-  color: #728079
-}
-.stat strong {
-  color: #233c36;
-  font-size: 15px;
-  font-weight: 600;
-  margin-right: 5px
-}
-main {
-  padding: 8px 20px 26px;
-  overflow-x: auto
-}
 svg {
   display: block
 }
@@ -116,9 +25,8 @@ svg {
   fill: #7c8a80;
   font-size: 10px
 }
-.node .badge {
-  fill: #387456;
-  font-size: 10px
+.node.has-deliberation rect {
+  fill: #edf6ef
 }
 .node.superseded rect {
   stroke-dasharray: 5 4
@@ -150,21 +58,6 @@ svg {
   stroke-width: 1.4;
   stroke-dasharray: 5 4
 }
-footer {
-  padding: 16px 32px 30px;
-  color: #87928a;
-  font-size: 10px
-}
-.legend {
-  display: flex;
-  gap: 18px;
-  flex-wrap: wrap
-}
-.legend span {
-  display: flex;
-  align-items: center;
-  gap: 7px
-}
 .swatch {
   width: 24px;
   height: 0;
@@ -174,85 +67,14 @@ footer {
   border-top: 1.5px dashed #b6c7ba
 }
 .swatch.delib {
-  width: 10px;
-  height: 10px;
-  border: 0;
+  width: 18px;
+  height: 12px;
+  border: 1px solid #dce4dc;
   border-radius: 3px;
   background: #edf6ef
 }
-#world {
-  position: relative;
-  transform-origin: 0 0
-}
-.controls {
-  position: absolute;
-  bottom: 22px;
-  right: 24px;
-  display: none;
-  align-items: center;
-  padding: 5px;
-  gap: 3px;
-  background: #fff;
-  border: 1px solid #dce4dc;
-  border-radius: 11px;
-  box-shadow: 0 4px 20px #294d3e0a
-}
-.controls button {
-  border: 0;
-  background: none;
-  font: inherit;
-  color: inherit;
-  cursor: pointer;
-  padding: 6px 9px;
-  border-radius: 7px
-}
-.controls button:hover {
-  background: #edf3ef
-}
-.controls output {
-  font: 11px monospace;
-  width: 44px;
-  text-align: center
-}
-.hint {
-  position: absolute;
-  bottom: 25px;
-  left: 28px;
-  display: none;
-  color: #7a8a7f;
-  font-size: 11px;
-  background: #f6f8f5df;
-  padding: 7px;
-  border-radius: 5px
-}
-.interactive main {
-  height: calc(100dvh - 250px);
-  min-height: 420px;
-  padding: 0;
-  overflow: hidden;
-  touch-action: none;
-  cursor: grab;
-  position: relative
-}
-.interactive #world {
-  position: absolute
-}
-.interactive .controls {
-  display: flex
-}
-.interactive .hint {
-  display: block
-}
-main.dragging {
-  cursor: grabbing
-}
-@media (max-width: 700px) {
-  .interactive main {
-    height: calc(100dvh - 240px)
-  }
-  .interactive .hint {
-    display: none
-  }
-}
+#world { position: relative; transform-origin: 0 0; }
+main { overflow: auto; }
+.empty { padding: 24px; }
 `;
 //# sourceMappingURL=graph-view.js.map

package/dist/core/graph-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"graph-view.js","sourceRoot":"","sources":["../../src/core/graph-view.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+PlC,CAAC"}
+{"version":3,"file":"graph-view.js","sourceRoot":"","sources":["../../src/core/graph-view.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6ElC,CAAC"}

package/dist/core/relation-focus.d.ts

@@ -0,0 +1,4 @@
+/** Shared hover/keyboard emphasis for both offline views (ADR 11). */
+export declare const RELATION_STYLE: string;
+export declare const RELATION_SCRIPT: string;
+//# sourceMappingURL=relation-focus.d.ts.map

package/dist/core/relation-focus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-focus.d.ts","sourceRoot":"","sources":["../../src/core/relation-focus.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,eAAO,MAAM,cAAc,QAQ1B,CAAC;AAEF,eAAO,MAAM,eAAe,QA6E3B,CAAC"}

package/dist/core/relation-focus.js

@@ -0,0 +1,89 @@
+/** Shared hover/keyboard emphasis for both offline views (ADR 11). */
+export const RELATION_STYLE = String.raw `
+.node, .card, .edge, #edges path { transition: opacity .16s ease; }
+.node.relation-dim, .card.relation-dim { opacity: .25; }
+.edge.relation-dim, #edges path.relation-dim { opacity: .12; }
+.card:focus-visible { outline: 2px solid #7750a5; outline-offset: 3px; }
+@media (prefers-reduced-motion: reduce) {
+  .node, .card, .edge, #edges path { transition: none; }
+}
+`;
+export const RELATION_SCRIPT = String.raw `
+(() => {
+  const world = document.getElementById('world');
+  const viewport = document.getElementById('viewport');
+  if (!world || !viewport) return;
+  const isTree = !!document.getElementById('edges');
+  const nodes = Array.from(world.querySelectorAll(isTree ? '.card' : '.node'));
+  const key = node => isTree ? node.id : node.dataset.adr;
+  let active = null;
+
+  // For a map, only incident edges count. For a tree, walk upstream and
+  // downstream separately: walking both ways in one pass would pull in siblings.
+  function relatedNodes(id, links, tree) {
+    const lit = new Set([id]);
+    if (!tree) {
+      for (const link of links) {
+        if (link.from === id) lit.add(link.to);
+        if (link.to === id) lit.add(link.from);
+      }
+      return lit;
+    }
+    for (const direction of ['from', 'to']) {
+      const seen = new Set([id]), queue = [id];
+      for (let i = 0; i < queue.length; i++) {
+        for (const link of links) {
+          const next = direction === 'from' ? link.to : link.from;
+          if (link[direction] !== queue[i] || seen.has(next)) continue;
+          seen.add(next);
+          lit.add(next);
+          queue.push(next);
+        }
+      }
+    }
+    return lit;
+  }
+
+  function nodeFor(target) {
+    if (!target || !world.contains(target)) return null;
+    return target.closest('.card, .node') || target.closest('a')?.querySelector('.node') || null;
+  }
+
+  function paint() {
+    if (active && active.hidden) active = null;
+    const paths = Array.from(world.querySelectorAll(isTree ? '#edges path' : '.edge'));
+    const links = paths.map(path => ({
+      path,
+      // Tree edges may start at an answer within a card, not the card itself.
+      from: isTree ? document.getElementById(path.dataset.from).closest('.card').id : path.dataset.from,
+      to: path.dataset.to,
+    }));
+    const id = active && key(active);
+    const lit = id ? relatedNodes(id, links, isTree) : null;
+    nodes.forEach(node => node.classList.toggle('relation-dim', !!lit && !lit.has(key(node))));
+    links.forEach(link => {
+      const related = !lit || (isTree ? lit.has(link.from) && lit.has(link.to) : link.from === id || link.to === id);
+      link.path.classList.toggle('relation-dim', !related);
+    });
+  }
+
+  function select(node) {
+    if (active === node) return;
+    active = node;
+    paint();
+  }
+  viewport.addEventListener('pointermove', event => {
+    if (event.buttons || event.pointerType === 'touch') return;
+    select(nodeFor(event.target));
+  });
+  viewport.addEventListener('pointerleave', () => select(null));
+  viewport.addEventListener('pointerdown', () => select(null));
+  world.addEventListener('focusin', event => select(nodeFor(event.target)));
+  world.addEventListener('focusout', event => select(nodeFor(event.relatedTarget)));
+  viewport.addEventListener('keydown', event => { if (event.key === 'Escape') select(null); });
+  window.addEventListener('blur', () => select(null));
+  // Folding recreates the tree's edges; apply emphasis to the new paths too.
+  world.addEventListener('adr-layout', paint);
+})();
+`;
+//# sourceMappingURL=relation-focus.js.map

package/dist/core/relation-focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"relation-focus.js","sourceRoot":"","sources":["../../src/core/relation-focus.ts"],"names":[],"mappings":"AAAA,sEAAsE;AACtE,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQvC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6ExC,CAAC"}

package/dist/core/share.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The Save-as-image action: renders the current view into a branded,
+ * self-contained PNG entirely on the client — serializes the diagram,
+ * rasterizes it, and composes the frame around it. No network, no third-party
+ * renderer, no runtime dependency (ADR 8/9): the only inputs are the live DOM
+ * and the page's own stylesheet text. Nothing is uploaded, and the browser
+ * decides where the download lands: a page cannot write to a chosen folder.
+ */
+/** The credit line every shared image carries. */
+export declare const SHARE_WATERMARK = "luochang212/adr-kit";
+/**
+ * The button is a camera, because that is what it does: it makes a picture of
+ * the view. A share glyph would promise sending it somewhere, a download glyph
+ * would promise only a file, and neither is what happens.
+ *
+ * The glyph is Lucide's `camera` (ISC), the same icon skill-zoo uses, at 24
+ * units in a 24 box and stroke 2 — 1.33px on screen at 16px, matching the
+ * Info glyph's 1.4.
+ */
+export declare const CAMERA_ICON: string;
+export declare const SHARE_BUTTON_HTML: string;
+/**
+ * The button carries no text, so its feedback is a status line: what was saved,
+ * whether the copy worked, and nothing it cannot know (a page cannot tell which
+ * folder the download reached).
+ */
+export declare const SHARE_STYLE: string;
+export declare const GITHUB_MARK_PATH: string;
+export declare const SHARE_SCRIPT: string;
+//# sourceMappingURL=share.d.ts.map

package/dist/core/share.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"share.d.ts","sourceRoot":"","sources":["../../src/core/share.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,kDAAkD;AAClD,eAAO,MAAM,eAAe,wBAAwB,CAAC;AAErD;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,QAGZ,CAAC;AAEb,eAAO,MAAM,iBAAiB,QACD,CAAC;AAE9B;;;;GAIG;AACH,eAAO,MAAM,WAAW,QAGvB,CAAC;AAIF,eAAO,MAAM,gBAAgB,QAK2D,CAAC;AAIzF,eAAO,MAAM,YAAY,QAuXxB,CAAC"}