@issuegraph/viewer 0.12.0 → 0.13.0

package/dist/selection.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The selection set: what the reader has selected, and how a gesture changes it.
+ *
+ * It owns the set and nothing else, as `recede.ts` owns receding. Every later
+ * step that builds a set — the mount's pointer and key input, an editor's —
+ * reads its gesture rules here, so no shell writes a rule of its own.
+ *
+ * A SELECTION IS TAGGED, NEVER A BARE STRING. `nextSelection` takes and returns
+ * a `ViewerSelection`, so it always knows an issue from a relationship and never
+ * guesses from the shape of a string. The tag is decided once, at the edge, by
+ * `viewerSelectionOf`, against the document.
+ *
+ * THE STORED FORM is `string | readonly string[] | null` — the shape
+ * `RecedeSelection.key` already takes. One issue or one relationship is a
+ * string; two or more issues are a frozen array in addition order. An empty or
+ * one-key array is never stored, so a single selection has exactly one
+ * spelling and every single-key caller keeps working unchanged.
+ */
+import type { NormalizedDocument } from './document.ts';
+export type ViewerSelection = {
+    readonly kind: 'none';
+} | {
+    readonly kind: 'edge';
+    readonly edgeId: string;
+} | {
+    readonly kind: 'issues';
+    readonly keys: readonly string[];
+};
+/** What the reader did, as the set rules read it. */
+export type SelectionGesture = {
+    readonly kind: 'replace' | 'toggle' | 'range';
+    readonly key: string;
+} | {
+    readonly kind: 'edge';
+    readonly edgeId: string;
+} | {
+    readonly kind: 'clear';
+} | {
+    readonly kind: 'limit-to-one';
+};
+/** A selection as hosts store it and the projections draw it. */
+export type StoredSelection = string | readonly string[] | null;
+/** Below this width a box is narrow, and a set narrows to one issue. */
+export declare const NARROW_WIDTH = 640;
+/** The selection after `gesture`, over the issues in `rankOrder`. */
+export declare function nextSelection(current: ViewerSelection, gesture: SelectionGesture, rankOrder: readonly string[]): ViewerSelection;
+/**
+ * A stored selection, tagged by the document: a string one of its edges'
+ * identities matches is a relationship, and any other string is an issue.
+ */
+export declare function viewerSelectionOf(document: NormalizedDocument, selected: StoredSelection): ViewerSelection;
+/** The stored form: never an empty or a one-key array. */
+export declare function storedSelectionOf(selection: ViewerSelection): StoredSelection;
+/** Whether two selections are the same, by value and in addition order. */
+export declare function sameSelection(a: ViewerSelection, b: ViewerSelection): boolean;
+/** Whether a box is narrow: under 640 wide, and not the all-zero box of an unlaid-out element. */
+export declare function isNarrowBox(box: {
+    readonly width: number;
+    readonly height: number;
+}): boolean;
+/** Every key a stored selection names, in addition order. */
+export declare function selectedKeysOf(selected: StoredSelection | undefined): readonly string[];
+/** Whether a stored selection names `key`. */
+export declare function isSelectedKey(selected: StoredSelection | undefined, key: string): boolean;
+//# sourceMappingURL=selection.d.ts.map

package/dist/selection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.d.ts","sourceRoot":"","sources":["../src/selection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAExD,MAAM,MAAM,eAAe,GACvB;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GACzB;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAClD;IAAE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IAAC,QAAQ,CAAC,IAAI,EAAE,SAAS,MAAM,EAAE,CAAA;CAAE,CAAC;AAElE,qDAAqD;AACrD,MAAM,MAAM,gBAAgB,GACxB;IAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GACvE;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAClD;IAAE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAA;CAAE,GAC1B;IAAE,QAAQ,CAAC,IAAI,EAAE,cAAc,CAAA;CAAE,CAAC;AAEtC,iEAAiE;AACjE,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;AAEhE,wEAAwE;AACxE,eAAO,MAAM,YAAY,MAAM,CAAC;AAiDhC,qEAAqE;AACrE,wBAAgB,aAAa,CAC3B,OAAO,EAAE,eAAe,EACxB,OAAO,EAAE,gBAAgB,EACzB,SAAS,EAAE,SAAS,MAAM,EAAE,GAC3B,eAAe,CASjB;AAED;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,kBAAkB,EAAE,QAAQ,EAAE,eAAe,GAAG,eAAe,CAO1G;AAED,0DAA0D;AAC1D,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,eAAe,GAAG,eAAe,CAM7E;AAQD,2EAA2E;AAC3E,wBAAgB,aAAa,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,eAAe,GAAG,OAAO,CAM7E;AAED,kGAAkG;AAClG,wBAAgB,WAAW,CAAC,GAAG,EAAE;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAG7F;AAED,6DAA6D;AAC7D,wBAAgB,cAAc,CAAC,QAAQ,EAAE,eAAe,GAAG,SAAS,GAAG,SAAS,MAAM,EAAE,CAGvF;AAED,8CAA8C;AAC9C,wBAAgB,aAAa,CAAC,QAAQ,EAAE,eAAe,GAAG,SAAS,EAAE,GAAG,EAAE,MAAM,GAAG,OAAO,CAEzF"}

package/dist/selection.js

@@ -0,0 +1,127 @@
+/**
+ * The selection set: what the reader has selected, and how a gesture changes it.
+ *
+ * It owns the set and nothing else, as `recede.ts` owns receding. Every later
+ * step that builds a set — the mount's pointer and key input, an editor's —
+ * reads its gesture rules here, so no shell writes a rule of its own.
+ *
+ * A SELECTION IS TAGGED, NEVER A BARE STRING. `nextSelection` takes and returns
+ * a `ViewerSelection`, so it always knows an issue from a relationship and never
+ * guesses from the shape of a string. The tag is decided once, at the edge, by
+ * `viewerSelectionOf`, against the document.
+ *
+ * THE STORED FORM is `string | readonly string[] | null` — the shape
+ * `RecedeSelection.key` already takes. One issue or one relationship is a
+ * string; two or more issues are a frozen array in addition order. An empty or
+ * one-key array is never stored, so a single selection has exactly one
+ * spelling and every single-key caller keeps working unchanged.
+ */
+import { edgeIdentity } from '@issuegraph/core';
+/** Below this width a box is narrow, and a set narrows to one issue. */
+export const NARROW_WIDTH = 640;
+const NONE = Object.freeze({ kind: 'none' });
+function issues(keys) {
+    return keys.length === 0 ? NONE : { kind: 'issues', keys: Object.freeze([...keys]) };
+}
+/** The issue keys of a selection, in addition order; none for a relationship. */
+function issueKeys(selection) {
+    return selection.kind === 'issues' ? selection.keys : [];
+}
+function toggled(current, key) {
+    const keys = issueKeys(current);
+    return keys.includes(key) ? issues(keys.filter((member) => member !== key)) : issues([...keys, key]);
+}
+/** `keys`, with `key` moved to the end — added last, wherever it was. */
+function addedLast(keys, key) {
+    return [...keys.filter((member) => member !== key), key];
+}
+/**
+ * A Shift range: from the most recently added key to `key`, in rank order.
+ *
+ * The keys between are appended walking from the anchor, so a range upward
+ * adds the nearer keys first; keys already present stay where they are; the
+ * clicked key ends the set. With no issue to extend from it is a replace, and
+ * when either end has no rank the clicked key is added alone.
+ */
+function ranged(current, key, rankOrder) {
+    const keys = issueKeys(current);
+    const anchor = keys.at(-1);
+    if (anchor === undefined)
+        return issues([key]);
+    const from = rankOrder.indexOf(anchor);
+    const to = rankOrder.indexOf(key);
+    if (from === -1 || to === -1)
+        return issues(addedLast(keys, key));
+    const step = to > from ? 1 : -1;
+    const between = Array.from({ length: Math.abs(to - from) }, (_, index) => rankOrder[from + step * (index + 1)])
+        .filter((member) => member !== undefined && !keys.includes(member));
+    return issues(addedLast([...keys, ...between], key));
+}
+function limitedToOne(current) {
+    const last = issueKeys(current).at(-1);
+    return current.kind === 'issues' && last !== undefined ? issues([last]) : current;
+}
+/** The selection after `gesture`, over the issues in `rankOrder`. */
+export function nextSelection(current, gesture, rankOrder) {
+    switch (gesture.kind) {
+        case 'replace': return issues([gesture.key]);
+        case 'toggle': return toggled(current, gesture.key);
+        case 'range': return ranged(current, gesture.key, rankOrder);
+        case 'edge': return { kind: 'edge', edgeId: gesture.edgeId };
+        case 'clear': return NONE;
+        case 'limit-to-one': return limitedToOne(current);
+    }
+}
+/**
+ * A stored selection, tagged by the document: a string one of its edges'
+ * identities matches is a relationship, and any other string is an issue.
+ */
+export function viewerSelectionOf(document, selected) {
+    if (selected === null)
+        return NONE;
+    if (typeof selected === 'string') {
+        const isEdge = document.edges.some((edge) => edgeIdentity(edge.field, edge.from, edge.to) === selected);
+        return isEdge ? { kind: 'edge', edgeId: selected } : issues([selected]);
+    }
+    return issues([...new Set(selected)]);
+}
+/** The stored form: never an empty or a one-key array. */
+export function storedSelectionOf(selection) {
+    switch (selection.kind) {
+        case 'none': return null;
+        case 'edge': return selection.edgeId;
+        case 'issues': return storedKeys(selection.keys);
+    }
+}
+function storedKeys(keys) {
+    if (keys.length === 0)
+        return null;
+    if (keys.length === 1)
+        return keys[0] ?? null;
+    return Object.freeze([...keys]);
+}
+/** Whether two selections are the same, by value and in addition order. */
+export function sameSelection(a, b) {
+    if (a.kind === 'edge' && b.kind === 'edge')
+        return a.edgeId === b.edgeId;
+    if (a.kind === 'issues' && b.kind === 'issues') {
+        return a.keys.length === b.keys.length && a.keys.every((key, index) => b.keys[index] === key);
+    }
+    return a.kind === b.kind;
+}
+/** Whether a box is narrow: under 640 wide, and not the all-zero box of an unlaid-out element. */
+export function isNarrowBox(box) {
+    const unmeasured = box.width === 0 && box.height === 0;
+    return box.width < NARROW_WIDTH && !unmeasured;
+}
+/** Every key a stored selection names, in addition order. */
+export function selectedKeysOf(selected) {
+    if (selected === null || selected === undefined)
+        return [];
+    return typeof selected === 'string' ? [selected] : selected;
+}
+/** Whether a stored selection names `key`. */
+export function isSelectedKey(selected, key) {
+    return selectedKeysOf(selected).includes(key);
+}
+//# sourceMappingURL=selection.js.map

package/dist/selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.js","sourceRoot":"","sources":["../src/selection.ts"],"names":[],"mappings":"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"}

package/dist/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AA+PH,eAAO,MAAM,gBAAgB,QAqhD5B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAqQH,eAAO,MAAM,gBAAgB,QAkpD5B,CAAC"}

package/dist/styles.js

@@ -22,6 +22,7 @@
  * hairlines — and a host that wants the panel suppressed overrides the four
  * properties on `.ig-viewer`.
  */
+import { RECEDE_ALPHA } from "./recede.js";
 /**
  * §17j's rail density, written once and emitted under two keys.
  *
@@ -274,6 +275,9 @@ ${scope} .ig-slot[aria-expanded='true'] .ig-badge[data-priority='query'] {
 }
 `;
 }
+/** `RECEDE_ALPHA` as a `color-mix` share, so a receded station's ring and a
+ * receded line draw at one strength from one source. */
+const RECEDE_PERCENT = `${RECEDE_ALPHA * 100}%`;
 export const viewerStylesheet = `
 .ig-viewer {
   background: var(--ig-bg);
@@ -897,7 +901,12 @@ ${railDensity(".ig-viewer[data-density='dense']")}
   );
 }
 
+/* A SELECTED ROW IS FILLED WITH --ig-surface, the stronger of the two
+   surfaces. --ig-surface-2 is what a receded row takes, so a selected row never
+   reads as receded. background-color, not the shorthand, so a held row keeps
+   its hatch when it is selected. */
 .ig-slot[aria-current='true'] {
+  background-color: var(--ig-surface);
   box-shadow: inset var(--ig-band-rail) 0 0 var(--ig-accent);
 }
 
@@ -905,13 +914,20 @@ ${railDensity(".ig-viewer[data-density='dense']")}
    look — so clicking a gutter, excluded or tracker-held node set aria-current on
    the group and changed nothing a reader could see. A pointer does not normally
    raise :focus-visible either, so those selections had no visible state at all
-   on the channel most likely to make them. Same accent the rail uses, so one
-   selection reads the same whichever surface drew it. */
+   on the channel most likely to make them. A SELECTED NODE IS INVERTED — the
+   text colour fills it and its label takes --ig-bg — the same
+   look a selected card takes, so one selection reads the same whichever
+   surface drew it. */
 .ig-node-group[aria-current='true'] .ig-node {
-  stroke: var(--ig-accent);
+  fill: var(--ig-text);
+  stroke: var(--ig-text);
   stroke-width: calc(var(--ig-stroke) * 2);
 }
 
+.ig-node-group[aria-current='true'] .ig-node-label {
+  fill: var(--ig-bg);
+}
+
 /* The rank track: figure over dot, centred, so the title column starts at one
    x on every row whether or not the row has a number to print. */
 .ig-rank-cell {
@@ -1016,16 +1032,17 @@ ${railDensity(".ig-viewer[data-density='dense']")}
   overflow-wrap: anywhere;
 }
 
-.ig-slot[data-held='true'] .ig-title,
 .ig-footer .ig-title {
   color: var(--ig-text-body);
 }
 
-/* A held row's CONTENT recedes, not its position. The frame dims the body and
-   leaves the rank track at full strength, so the row still reads as occupying
-   the slot it would have taken. */
-.ig-slot[data-held='true'] .ig-row-body {
-  opacity: 0.72;
+/* A held row's CONTENT recedes, not its position. The body's text turns muted
+   and the rank track stays at full strength, so the row still reads as
+   occupying the slot it would have taken. By colour, never by opacity: fading
+   the text would drop it below the contrast the theme's text roles promise. */
+.ig-slot[data-held='true'] .ig-row-body,
+.ig-slot[data-held='true'] .ig-title {
+  color: var(--ig-text-muted);
 }
 
 /* The isolated-issue tally sits directly on the panel, outside the padded
@@ -1330,7 +1347,7 @@ ${railDensity(".ig-viewer[data-density='dense']")}
 /* THE RANKED ROW'S SELECTED BAND, and its fill: one selection, one look,
    whichever part of the list it was made in. */
 .ig-footer-row[aria-current='true'] {
-  background: color-mix(in srgb, var(--ig-accent) var(--ig-tint-fill), transparent);
+  background: var(--ig-surface);
   box-shadow: inset var(--ig-band-rail) 0 0 var(--ig-accent);
 }
 
@@ -1440,7 +1457,7 @@ ${railDensity(".ig-viewer[data-density='dense']")}
 .ig-card[data-column='right'] {
   background: transparent;
   border-style: dashed;
-  opacity: 0.8;
+  color: var(--ig-text-muted);
 }
 
 .ig-card[data-exclusion='true'] {
@@ -1451,7 +1468,14 @@ ${railDensity(".ig-viewer[data-density='dense']")}
 .ig-card[data-held='true'] {
   background: transparent;
   border-style: dashed;
-  opacity: 0.75;
+  color: var(--ig-text-muted);
+}
+
+/* The card's own text roles set their colour, so the card's muted colour has
+   to be named on them too, or only the unstyled text would dim. */
+.ig-card[data-column='right'] .ig-title,
+.ig-card[data-held='true'] .ig-title {
+  color: var(--ig-text-muted);
 }
 
 .ig-card[data-now='true'] {
@@ -1464,9 +1488,23 @@ ${railDensity(".ig-viewer[data-density='dense']")}
   border-color: var(--ig-accent);
 }
 
+/* A SELECTED CARD IS INVERTED: filled with --ig-text, every text on it in
+   --ig-bg. Every descendant is named, because the card's
+   text roles set their own colours and a chip or badge tinted for the light
+   ground would vanish on the dark one. Each member of a selected set is drawn
+   this way; what is outside the set recedes. */
 .ig-rail-row[aria-current='true'] .ig-card {
-  border-color: var(--ig-accent);
+  background: var(--ig-text);
+  border-color: var(--ig-text);
+  border-style: solid;
   box-shadow: 0 0 0 var(--ig-band-rail) color-mix(in srgb, var(--ig-accent) var(--ig-tint-border), transparent);
+  color: var(--ig-bg);
+}
+
+.ig-rail-row[aria-current='true'] .ig-card * {
+  background: transparent;
+  border-color: var(--ig-bg);
+  color: var(--ig-bg);
 }
 
 /* The station column: a disc on the spine, carrying the rank the row would
@@ -1619,6 +1657,97 @@ ${railDensity(".ig-viewer[data-density='dense']")}
 .ig-terminal[data-edge='duplicate-of'] { color: var(--ig-edge-duplicate-of); }
 .ig-terminal[data-edge='decomposed-from'] { color: var(--ig-edge-decomposed-from); }
 
+/* ── what recedes around a selection ───────────────────────────────────── */
+
+/* EVERYTHING THAT DOES NOT TOUCH THE SELECTION RECEDES, so its neighbours read
+   first. The graph stamps data-recede='true' on each receding card row, spine
+   station, footer row, line and terminal, and the list stamps each receding
+   order row and footer row; these rules draw the stamp.
+
+   NO RULE HERE USES opacity OR filter. Fading a card by opacity fades its text
+   below the contrast the theme's text roles promise, so a card recedes by
+   colour instead: the second surface, with muted labels, and a list row
+   recedes the same way a card does. A line or terminal
+   recedes by stroke-opacity and fill-opacity on the stamped element itself,
+   never on a kind's class, so the legend's samples never dim. No rule touches
+   a dash, a border style or a stroke width: those carry each kind's line.
+
+   THESE RULES COME LAST AND MATCH OR BEAT EVERY VARIANT'S SPECIFICITY, so a
+   held, unit, gutter or now card still recedes the same way. styles.test.ts
+   checks that order. */
+.ig-canvas path[data-recede='true'],
+.ig-canvas circle[data-recede='true'] {
+  fill-opacity: ${RECEDE_ALPHA};
+  stroke-opacity: ${RECEDE_ALPHA};
+}
+
+.ig-rail-row[data-recede='true'] .ig-card {
+  background: var(--ig-surface-2);
+}
+
+/* A LIST ROW TAKES THE CARD'S GROUND through background-color alone, so a held
+   row keeps its hatch, which is a background-image, on the second surface. The
+   panel class lifts each rule to the card rule's specificity. The footer rule
+   is scoped to the list, whose root and detached footer both carry ig-linear,
+   because the graph draws its footer rows without a ground. */
+.ig-viewer .ig-slot[data-recede='true'],
+.ig-linear .ig-footer-row[data-recede='true'] {
+  background-color: var(--ig-surface-2);
+}
+
+.ig-rail-row[data-recede='true'] .ig-title,
+.ig-rail-row[data-recede='true'] .ig-id,
+.ig-rail-row[data-recede='true'] .ig-hold,
+.ig-rail-row[data-recede='true'] .ig-unit-note,
+.ig-slot[data-recede='true'] .ig-title,
+.ig-slot[data-recede='true'] .ig-id,
+.ig-slot[data-recede='true'] .ig-hold,
+.ig-slot[data-recede='true'] .ig-unit-note,
+.ig-footer-row[data-recede='true'] .ig-title,
+.ig-linear .ig-footer-row[data-recede='true'] .ig-id {
+  color: var(--ig-text-muted);
+}
+
+/* The priority tag keeps its words and loses its chip, so a receded card
+   carries no filled shape that competes with the kept ones. The border turns
+   transparent rather than going, so the tag keeps its size and nothing moves. */
+.ig-rail-row[data-recede='true'] .ig-badge[data-priority],
+.ig-slot[data-recede='true'] .ig-badge[data-priority] {
+  background: transparent;
+  border-color: transparent;
+  color: var(--ig-text);
+}
+
+/* A RECEDED STATION MIXES ITS OWN COLOURS WITH THE PAGE GROUND, never with
+   transparent and never by opacity: the station has to stay opaque, because
+   it sits on the spine line and covers it. Mixing over --ig-bg also makes what
+   is drawn equal to what the contrast test composites. Each variant names its
+   own hue, in the same order the variants above set it.
+
+   THE RANK NUMERAL IS TEXT AND KEEPS 4.5:1 ON WHAT IT SITS ON. A ring, dashed
+   or serialize station is hollow, so its numeral sits on --ig-bg and reads
+   --ig-text-muted, like every other receded label. A filled station's numeral
+   sits on its mixed fill instead, and --ig-text-muted there falls under 4.5:1
+   in both themes, so it reads --ig-text, which clears it. theme.test.ts
+   measures both. */
+.ig-spine-station[data-recede='true'] {
+  border-color: color-mix(in srgb, var(--ig-station-ready) ${RECEDE_PERCENT}, var(--ig-bg));
+  color: var(--ig-text-muted);
+}
+
+.ig-spine-station[data-fill='filled'][data-recede='true'] {
+  background: color-mix(in srgb, var(--ig-station-ready) ${RECEDE_PERCENT}, var(--ig-bg));
+  color: var(--ig-text);
+}
+
+.ig-spine-station[data-fill='dashed'][data-recede='true'] {
+  border-color: color-mix(in srgb, var(--ig-station-held) ${RECEDE_PERCENT}, var(--ig-bg));
+}
+
+.ig-spine-station[data-wait='serialize'][data-recede='true'] {
+  border-color: color-mix(in srgb, var(--ig-edge-serialize-with) ${RECEDE_PERCENT}, var(--ig-bg));
+}
+
 /* ── refusals and empty states ─────────────────────────────────────────── */
 
 .ig-refusal,

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,SAAS,WAAW,CAAC,KAAa;IAChC,OAAO;EACP,KAAK;;;;;;;;;;EAUL,KAAK;;;;EAIL,KAAK;;;;;;;;;EASL,KAAK;;;;;;;;;;EAUL,KAAK;;;;;;;;;;;;;EAaL,KAAK;;;;;;;;EAQL,KAAK;;;;;;;;;;;;;;;;;;EAkBL,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2BL,KAAK;;;;EAIL,KAAK;EACL,KAAK;;;;;;;EAOL,KAAK;;;;;;;;;;;EAWL,KAAK;;;;;;;;;EASL,KAAK;;;;;;;;;;;;EAYL,KAAK;;;;;EAKL,KAAK;;;;;EAKL,KAAK;;;;;;;EAOL,KAAK;;;;;;;;;;;;;;;;;;;;;;;EAuBL,KAAK;EACL,KAAK;EACL,KAAK;;;;;;;;;;;;;;;;EAgBL,KAAK;;;;EAIL,KAAK;;;;;;;;;EASL,KAAK;;;;EAIL,KAAK;;;CAGN,CAAC;AACF,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqiB9B,WAAW,CAAC,gCAAgC,CAAC;;;;;;;;;;;;;EAa7C,WAAW,CAAC,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAm+BhD,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@issuegraph/viewer",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Render an Issuegraph document as a work order — the ordered spine with readiness stations, the five edge treatments, and three projections. Rendering only: no fetching, no mutation, no auth, and every value themeable through CSS custom properties.",
   "keywords": [
     "issuegraph",