@issuegraph/viewer 0.1.0

package/dist/scene.d.ts

@@ -0,0 +1,94 @@
+/**
+ * What a projection returns.
+ *
+ * A scene is the drawn tree PLUS the traversal it implies. Keeping the two
+ * together is what lets keyboard navigation walk the order rather than the
+ * picture: the graph projection places stations by geometry but publishes its
+ * `focusOrder` in rank order, and `navigate` reads only the published order. A
+ * projection that returned markup alone would leave every consumer to recover
+ * an order from coordinates, which is exactly the rule the design forbids.
+ */
+import type { ElementSpec } from './element.ts';
+/** Which projection produced a scene. */
+export type Projection = 'linear' | 'graph' | 'tree';
+/** The neighbours a lateral key press moves to, when there are any. */
+export interface LateralNeighbours {
+    readonly left?: string | undefined;
+    readonly right?: string | undefined;
+}
+export interface Scene {
+    readonly projection: Projection;
+    readonly root: ElementSpec;
+    /**
+     * Every key the vertical keys walk, in the order they walk them. For the
+     * spine that is RANK ORDER — never the order boxes happen to sit in.
+     */
+    readonly focusOrder: readonly string[];
+    /**
+     * Every key that can hold focus at all — `focusOrder` FIRST, then any key
+     * reachable only sideways.
+     *
+     * The two differ because a lateral move is not a position in the order: a
+     * gutter node is somewhere focus can GO without being somewhere `ArrowDown`
+     * ever stops. Resolving focus against `focusOrder` alone bounced focus off
+     * every such node on the next redraw, and rendered no tab stop for it — so
+     * membership questions ask this, and `focusOrder` answers ordering questions.
+     * `focusOrder` leads, so the first entry is the same under either.
+     */
+    readonly navigable: readonly string[];
+    /** Key -> its lateral neighbours. Absent for keys with none. */
+    readonly lateral: ReadonlyMap<string, LateralNeighbours>;
+    /**
+     * Key -> the key that REPRESENTS it in this projection. Absent for a key
+     * that represents itself, which is almost all of them.
+     *
+     * A `together-with` unit is one station in the linear and graph projections
+     * and its partners get no row of their own, so `navigable` deliberately does
+     * not hold them. That made a selection of a partner unstateable: the key is a
+     * real issue, so every entry point accepted it, and then focus could not
+     * follow it anywhere — `resolveFocusKey` found it in no order and fell to the
+     * FIRST entry, an unrelated issue. The tree publishes an EMPTY map, because
+     * it draws every key its own row and a partner there is its own subject.
+     *
+     * THIS IS NOT A DROP. `reconcile` carries a selection across a projection
+     * switch whole, deliberately — a switch changes representation, never
+     * subject. Mapping a partner to its lead keeps that promise rather than
+     * breaking it: the unit IS the subject, and this is the name this projection
+     * has for it.
+     */
+    readonly stationOf: ReadonlyMap<string, string>;
+    /** Anything the projection had to drop or refuse, for the host to surface. */
+    readonly diagnostics: readonly string[];
+}
+/** The attribute every focusable element carries, and the key it announces. */
+export declare const KEY_ATTRIBUTE = "data-ig-key";
+/**
+ * The attribute DECORATION carries — a `together-with` enclosure, its connector.
+ *
+ * Two different questions were being answered by one attribute. The FOCUS INDEX
+ * needs exactly one element per key, or `focus()` lands on whichever the
+ * renderer happened to emit first — which for the enclosure is a non-tabbable
+ * `<rect>` painted deliberately behind the node. POINTER identity is the other
+ * question, and the design fixes its answer: the connector IS a click target.
+ *
+ * Separating the attributes answers both. `keyAt` reads this one as a fallback
+ * so a click or hover on the enclosure still names its slot, while the index
+ * that drives focus sees only {@link KEY_ATTRIBUTE}.
+ */
+export declare const GROUP_ATTRIBUTE = "data-ig-group";
+/**
+ * Which key holds the roving tab stop.
+ *
+ * ONE RULE, USED BY THE PROJECTIONS AND BY `reconcile`. They have to agree: the
+ * projections decide which element renders `tabindex="0"`, `reconcile` decides
+ * what `handle.state.focused` reports, and a viewer whose markup and whose
+ * reported state disagree is one a keyboard cannot enter. Two spellings of
+ * "which key is focused" is exactly how they came to disagree — a requested key
+ * the projection no longer draws rendered NO tab stop at all.
+ *
+ * Selection is the fallback before the first item because a switch changes
+ * representation, never subject: landing focus on what the reader was looking
+ * at beats landing it at the top.
+ */
+export declare function resolveFocusKey(navigable: readonly string[], focused: string | null | undefined, selected: string | null | undefined): string | null;
+//# sourceMappingURL=scene.d.ts.map

package/dist/scene.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scene.d.ts","sourceRoot":"","sources":["../src/scene.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEhD,yCAAyC;AACzC,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAErD,uEAAuE;AACvE,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACrC;AAED,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,UAAU,EAAE,UAAU,CAAC;IAChC,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,UAAU,EAAE,SAAS,MAAM,EAAE,CAAC;IACvC;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,SAAS,EAAE,SAAS,MAAM,EAAE,CAAC;IACtC,gEAAgE;IAChE,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC;IACzD;;;;;;;;;;;;;;;;;OAiBG;IACH,QAAQ,CAAC,SAAS,EAAE,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChD,8EAA8E;IAC9E,QAAQ,CAAC,WAAW,EAAE,SAAS,MAAM,EAAE,CAAC;CACzC;AAED,+EAA+E;AAC/E,eAAO,MAAM,aAAa,gBAAgB,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,kBAAkB,CAAC;AAE/C;;;;;;;;;;;;;GAaG;AACH,wBAAgB,eAAe,CAC7B,SAAS,EAAE,SAAS,MAAM,EAAE,EAC5B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAClC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAClC,MAAM,GAAG,IAAI,CAIf"}

package/dist/scene.js

@@ -0,0 +1,48 @@
+/**
+ * What a projection returns.
+ *
+ * A scene is the drawn tree PLUS the traversal it implies. Keeping the two
+ * together is what lets keyboard navigation walk the order rather than the
+ * picture: the graph projection places stations by geometry but publishes its
+ * `focusOrder` in rank order, and `navigate` reads only the published order. A
+ * projection that returned markup alone would leave every consumer to recover
+ * an order from coordinates, which is exactly the rule the design forbids.
+ */
+/** The attribute every focusable element carries, and the key it announces. */
+export const KEY_ATTRIBUTE = 'data-ig-key';
+/**
+ * The attribute DECORATION carries — a `together-with` enclosure, its connector.
+ *
+ * Two different questions were being answered by one attribute. The FOCUS INDEX
+ * needs exactly one element per key, or `focus()` lands on whichever the
+ * renderer happened to emit first — which for the enclosure is a non-tabbable
+ * `<rect>` painted deliberately behind the node. POINTER identity is the other
+ * question, and the design fixes its answer: the connector IS a click target.
+ *
+ * Separating the attributes answers both. `keyAt` reads this one as a fallback
+ * so a click or hover on the enclosure still names its slot, while the index
+ * that drives focus sees only {@link KEY_ATTRIBUTE}.
+ */
+export const GROUP_ATTRIBUTE = 'data-ig-group';
+/**
+ * Which key holds the roving tab stop.
+ *
+ * ONE RULE, USED BY THE PROJECTIONS AND BY `reconcile`. They have to agree: the
+ * projections decide which element renders `tabindex="0"`, `reconcile` decides
+ * what `handle.state.focused` reports, and a viewer whose markup and whose
+ * reported state disagree is one a keyboard cannot enter. Two spellings of
+ * "which key is focused" is exactly how they came to disagree — a requested key
+ * the projection no longer draws rendered NO tab stop at all.
+ *
+ * Selection is the fallback before the first item because a switch changes
+ * representation, never subject: landing focus on what the reader was looking
+ * at beats landing it at the top.
+ */
+export function resolveFocusKey(navigable, focused, selected) {
+    if (focused !== null && focused !== undefined && navigable.includes(focused))
+        return focused;
+    if (selected !== null && selected !== undefined && navigable.includes(selected))
+        return selected;
+    return navigable[0] ?? null;
+}
+//# sourceMappingURL=scene.js.map

package/dist/scene.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scene.js","sourceRoot":"","sources":["../src/scene.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AA0DH,+EAA+E;AAC/E,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC;AAE3C;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,eAAe,CAAC;AAE/C;;;;;;;;;;;;;GAaG;AACH,MAAM,UAAU,eAAe,CAC7B,SAA4B,EAC5B,OAAkC,EAClC,QAAmC;IAEnC,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC;QAAE,OAAO,OAAO,CAAC;IAC7F,IAAI,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,SAAS,IAAI,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAAE,OAAO,QAAQ,CAAC;IACjG,OAAO,SAAS,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC;AAC9B,CAAC"}

package/dist/styles.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The structural stylesheet.
+ *
+ * It carries layout, weight and state — never a value. Every colour, size and
+ * spacing here is a `var(--ig-…)` reference resolved by whatever theme the host
+ * installs, which is what makes "supply a second theme through custom
+ * properties" a real capability rather than a claim. `styles.test.ts` scans
+ * this string for a literal colour or a fixed pixel length and fails on either,
+ * so the rule is enforced against the bytes rather than remembered.
+ *
+ * Shipped as a string, not a `.css` file: an entry that imports CSS cannot be
+ * loaded by a bare Node runtime (`ERR_UNKNOWN_FILE_EXTENSION`), and this
+ * package's floor is checked by a smoke test that imports the built entry. A
+ * string also means no consumer needs a bundler to use it.
+ */
+export declare const viewerStylesheet = "\n.ig-viewer {\n  background: var(--ig-bg);\n  color: var(--ig-text-body);\n  font-family: var(--ig-font-ui);\n  font-size: var(--ig-font-size);\n  line-height: var(--ig-line-height);\n  position: relative;\n}\n\n.ig-viewer *,\n.ig-viewer *::before,\n.ig-viewer *::after {\n  box-sizing: border-box;\n}\n\n.ig-viewer :focus-visible {\n  outline: var(--ig-focus-ring) solid var(--ig-focus);\n  outline-offset: var(--ig-space-tight);\n}\n\n.ig-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n/* \u2500\u2500 the spine \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ig-slot {\n  align-items: center;\n  background: var(--ig-surface);\n  border: var(--ig-stroke) solid var(--ig-line);\n  border-radius: var(--ig-radius);\n  column-gap: var(--ig-space);\n  display: grid;\n  grid-template-columns: auto auto 1fr auto;\n  margin-bottom: var(--ig-space-tight);\n  min-height: var(--ig-row-height);\n  padding: var(--ig-space-tight) var(--ig-space);\n}\n\n.ig-slot[data-held='true'] {\n  background: var(--ig-surface-2);\n  border-style: dashed;\n}\n\n.ig-slot[aria-current='true'] {\n  border-color: var(--ig-accent);\n}\n\n/* A CANVAS-OWNED NODE IS SELECTABLE TOO, and only the rail rows had a selected\n   look \u2014 so clicking a gutter, excluded or tracker-held node set aria-current on\n   the group and changed nothing a reader could see. A pointer does not normally\n   raise :focus-visible either, so those selections had no visible state at all\n   on the channel most likely to make them. Same accent the rail uses, so one\n   selection reads the same whichever surface drew it. */\n.ig-node-group[aria-current='true'] .ig-node {\n  stroke: var(--ig-accent);\n  stroke-width: calc(var(--ig-stroke) * 2);\n}\n\n.ig-rank {\n  color: var(--ig-text);\n  font-family: var(--ig-font-mono);\n  font-variant-numeric: tabular-nums;\n  min-width: calc(var(--ig-char-width) * 4);\n  text-align: right;\n}\n\n.ig-rank[data-held='true'] {\n  color: var(--ig-text-muted);\n}\n\n/* \u2500\u2500 readiness stations \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ig-station {\n  block-size: var(--ig-station-size);\n  border: var(--ig-stroke) solid var(--ig-station-held);\n  border-radius: 50%;\n  box-shadow: 0 0 0 var(--ig-station-halo) var(--ig-bg);\n  display: inline-block;\n  inline-size: var(--ig-station-size);\n}\n\n.ig-station[data-fill='filled'] {\n  background: var(--ig-station-ready);\n  border-color: var(--ig-station-ready);\n}\n\n.ig-station[data-fill='hollow'] {\n  background: transparent;\n  border-color: var(--ig-station-pending);\n}\n\n.ig-station[data-fill='dashed'] {\n  background: transparent;\n  border-style: dashed;\n  border-color: var(--ig-station-held);\n}\n\n/* \u2500\u2500 titles, identity, provenance \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ig-title {\n  color: var(--ig-text);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ig-id,\n.ig-count {\n  color: var(--ig-text-muted);\n  font-family: var(--ig-font-mono);\n  font-variant-numeric: tabular-nums;\n}\n\n.ig-link {\n  color: var(--ig-accent);\n  text-decoration: none;\n}\n\n.ig-link:hover {\n  text-decoration: underline;\n}\n\n.ig-provenance,\n.ig-hold {\n  color: var(--ig-text-muted);\n  font-size: var(--ig-font-size-small);\n  grid-column: 3 / -1;\n}\n\n.ig-strike {\n  text-decoration: line-through;\n}\n\n/* \u2500\u2500 edge badges \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* SPANNED FROM THE TITLE COLUMN, LIKE EVERY OTHER FULL-WIDTH ROW MEMBER. Left\n   unplaced this was the fifth child of a four-column grid, so it auto-placed\n   into column ONE of a second row \u2014 the rank track, an auto-sized column that\n   takes the width of its widest item. One relationship badge then set the width\n   of the rank column for the whole row, pushing the station and title across\n   and squeezing the title to pay for it. Badges belong with the row's other\n   metadata, which is what 3 / -1 already means here for provenance and holds.\n   (No backticks in this file: the stylesheet is a template literal.) */\n.ig-badges {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--ig-space-tight);\n  grid-column: 3 / -1;\n}\n\n.ig-badge {\n  align-items: center;\n  /* Not currentColor any more: the label and the border now carry DIFFERENT\n     colours deliberately \u2014 see below. Left as currentColor the border would\n     follow the text to --ig-text and the hue channel would vanish from the\n     badge entirely, which is the opposite of the fix. */\n  border: var(--ig-stroke) solid var(--ig-line);\n  border-radius: var(--ig-radius);\n  color: var(--ig-text);\n  display: inline-flex;\n  font-size: var(--ig-font-size-small);\n  gap: var(--ig-space-tight);\n  padding: 0 var(--ig-space-tight);\n}\n\n/* THE HUE IS A BORDER COLOUR HERE, NOT A TEXT COLOUR \u2014 the theme holds the\n   edge hues to the 3:1 NON-TEXT bar, and says so where it defines them, so\n   painting badge LABELS with them contradicted the palette's own claim. It was\n   not merely theoretical: at this size duplicate-of measured 3.98:1 on\n   --ig-surface and decomposed-from 4.37:1, both under the 4.5:1 the text test\n   asserts for every text colour. The label now takes --ig-text, which that\n   test already proves on all three surfaces, and the hue keeps the non-text\n   use it was measured for.\n   NO CHANNEL IS LOST. Hue is one of four redundant channels and it is still\n   carried by the border; the dash pattern and the glyph are untouched; and the\n   vocabulary test independently proves all five stay distinguishable with hue\n   removed ENTIRELY, which is the stronger claim. */\n.ig-badge[data-edge='blocked-by'] { border-color: var(--ig-edge-blocked-by); border-style: solid; }\n.ig-badge[data-edge='serialize-with'] { border-color: var(--ig-edge-serialize-with); border-style: double; }\n.ig-badge[data-edge='together-with'] { border-color: var(--ig-edge-together-with); border-style: solid; }\n.ig-badge[data-edge='duplicate-of'] { border-color: var(--ig-edge-duplicate-of); border-style: dotted; }\n.ig-badge[data-edge='decomposed-from'] { border-color: var(--ig-edge-decomposed-from); border-style: dashed; }\n\n.ig-glyph {\n  font-family: var(--ig-font-mono);\n}\n\n/* \u2500\u2500 the footer group: holds that earn no rank slot \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ig-footer {\n  border-top: var(--ig-stroke) solid var(--ig-line);\n  margin-top: var(--ig-space);\n  padding-top: var(--ig-space);\n}\n\n.ig-footer-title {\n  color: var(--ig-text-muted);\n  font-size: var(--ig-font-size-small);\n  margin: 0 0 var(--ig-space-tight);\n}\n\n/* \u2500\u2500 the graph canvas \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n/* The stage carries the LAYOUT's own size, so one SVG unit is one CSS pixel\n   and an absolutely-positioned rail row lands on the node it names. A\n   percentage-width canvas would rescale under the rail and drift. It scrolls\n   rather than shrinking, because shrinking would silently break that. */\n.ig-stage {\n  block-size: var(--ig-stage-h);\n  inline-size: var(--ig-stage-w);\n  max-inline-size: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  position: relative;\n}\n\n.ig-canvas {\n  block-size: var(--ig-stage-h);\n  display: block;\n  inline-size: var(--ig-stage-w);\n}\n\n/* The ranks and stations FOR the spine nodes, sitting on them. */\n.ig-rail {\n  inset: 0;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ig-rail-row {\n  block-size: var(--ig-row-h);\n  inline-size: var(--ig-row-w);\n  inset-block-start: var(--ig-row-y);\n  inset-inline-start: var(--ig-row-x);\n  margin-bottom: 0;\n  min-block-size: 0;\n  pointer-events: auto;\n  position: absolute;\n}\n\n.ig-node {\n  fill: var(--ig-surface);\n  stroke: var(--ig-line);\n  stroke-width: var(--ig-stroke);\n}\n\n.ig-node[data-held='true'] {\n  fill: var(--ig-surface-2);\n  stroke-dasharray: 4 3;\n}\n\n.ig-node-label {\n  fill: var(--ig-text);\n  font-family: var(--ig-font-ui);\n  font-size: var(--ig-font-size-small);\n}\n\n.ig-edge {\n  fill: none;\n  stroke-width: var(--ig-stroke);\n}\n\n.ig-edge[data-edge='blocked-by'] { stroke: var(--ig-edge-blocked-by); }\n.ig-edge[data-edge='serialize-with'] { stroke: var(--ig-edge-serialize-with); }\n.ig-edge[data-edge='together-with'] { stroke: var(--ig-edge-together-with); }\n.ig-edge[data-edge='duplicate-of'] { stroke: var(--ig-edge-duplicate-of); }\n.ig-edge[data-edge='decomposed-from'] { stroke: var(--ig-edge-decomposed-from); }\n\n/* The dash pattern is set per element from the edge vocabulary, never here \u2014\n   one source for the channel the colour-blind-safety claim rests on. */\n.ig-enclosure {\n  fill: none;\n  stroke: var(--ig-edge-together-with);\n  stroke-width: var(--ig-stroke);\n}\n\n.ig-connector {\n  stroke: var(--ig-edge-together-with);\n  stroke-width: var(--ig-stroke-connector);\n}\n\n/* currentColor on the marker resolves to the inherited text colour, not to the\n   edge's stroke \u2014 so a terminal has to be given the hue explicitly or it renders\n   in body text and the fourth channel silently collapses. */\n.ig-terminal {\n  color: var(--ig-text-body);\n  stroke-width: var(--ig-stroke);\n}\n\n.ig-terminal[data-edge='blocked-by'] { color: var(--ig-edge-blocked-by); }\n.ig-terminal[data-edge='serialize-with'] { color: var(--ig-edge-serialize-with); }\n.ig-terminal[data-edge='together-with'] { color: var(--ig-edge-together-with); }\n.ig-terminal[data-edge='duplicate-of'] { color: var(--ig-edge-duplicate-of); }\n.ig-terminal[data-edge='decomposed-from'] { color: var(--ig-edge-decomposed-from); }\n\n/* \u2500\u2500 refusals and empty states \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ig-refusal,\n.ig-empty {\n  background: var(--ig-surface-2);\n  border: var(--ig-stroke) solid var(--ig-line);\n  border-radius: var(--ig-radius);\n  color: var(--ig-text-body);\n  padding: var(--ig-space);\n}\n\n.ig-refusal-next {\n  color: var(--ig-text);\n  margin: var(--ig-space-tight) 0 0;\n}\n\n/* The capsule is INFORMATIONAL \u2014 a plain list item again. It was briefly a\n   button, to make the refusal's advertised action keyboard-reachable; the\n   action itself has since gone, because this package cannot narrow a document\n   and so could never complete it. With the control removed the UA button reset\n   goes too: there is no button look left to undo. */\n.ig-capsule {\n  align-items: baseline;\n  background: var(--ig-surface);\n  border: var(--ig-stroke) solid var(--ig-line);\n  border-radius: var(--ig-radius);\n  display: flex;\n  gap: var(--ig-space);\n  margin-top: var(--ig-space-tight);\n  padding: var(--ig-space-tight) var(--ig-space);\n}\n\n.ig-refusal-omitted {\n  color: var(--ig-text-muted);\n  font-size: var(--ig-font-size-small);\n  margin: var(--ig-space-tight) 0 0;\n}\n\n/* \u2500\u2500 the decomposition tree \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ig-tree,\n.ig-tree .ig-list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.ig-tree .ig-list {\n  border-left: var(--ig-stroke) dashed var(--ig-edge-decomposed-from);\n  margin-left: var(--ig-space);\n  padding-left: var(--ig-space);\n}\n\n.ig-tree-item {\n  padding: var(--ig-space-tight) 0;\n}\n\n/* \u2500\u2500 legend \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.ig-legend {\n  border: 0;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--ig-space);\n  margin: 0 0 var(--ig-space);\n  padding: 0;\n}\n\n.ig-legend-caption {\n  color: var(--ig-text-muted);\n  font-size: var(--ig-font-size-small);\n  padding: 0;\n}\n";
+//# sourceMappingURL=styles.d.ts.map

package/dist/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,eAAO,MAAM,gBAAgB,i6aAoX5B,CAAC"}

package/dist/styles.js

@@ -0,0 +1,389 @@
+/**
+ * The structural stylesheet.
+ *
+ * It carries layout, weight and state — never a value. Every colour, size and
+ * spacing here is a `var(--ig-…)` reference resolved by whatever theme the host
+ * installs, which is what makes "supply a second theme through custom
+ * properties" a real capability rather than a claim. `styles.test.ts` scans
+ * this string for a literal colour or a fixed pixel length and fails on either,
+ * so the rule is enforced against the bytes rather than remembered.
+ *
+ * Shipped as a string, not a `.css` file: an entry that imports CSS cannot be
+ * loaded by a bare Node runtime (`ERR_UNKNOWN_FILE_EXTENSION`), and this
+ * package's floor is checked by a smoke test that imports the built entry. A
+ * string also means no consumer needs a bundler to use it.
+ */
+export const viewerStylesheet = `
+.ig-viewer {
+  background: var(--ig-bg);
+  color: var(--ig-text-body);
+  font-family: var(--ig-font-ui);
+  font-size: var(--ig-font-size);
+  line-height: var(--ig-line-height);
+  position: relative;
+}
+
+.ig-viewer *,
+.ig-viewer *::before,
+.ig-viewer *::after {
+  box-sizing: border-box;
+}
+
+.ig-viewer :focus-visible {
+  outline: var(--ig-focus-ring) solid var(--ig-focus);
+  outline-offset: var(--ig-space-tight);
+}
+
+.ig-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* ── the spine ─────────────────────────────────────────────────────────── */
+
+.ig-slot {
+  align-items: center;
+  background: var(--ig-surface);
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  column-gap: var(--ig-space);
+  display: grid;
+  grid-template-columns: auto auto 1fr auto;
+  margin-bottom: var(--ig-space-tight);
+  min-height: var(--ig-row-height);
+  padding: var(--ig-space-tight) var(--ig-space);
+}
+
+.ig-slot[data-held='true'] {
+  background: var(--ig-surface-2);
+  border-style: dashed;
+}
+
+.ig-slot[aria-current='true'] {
+  border-color: var(--ig-accent);
+}
+
+/* A CANVAS-OWNED NODE IS SELECTABLE TOO, and only the rail rows had a selected
+   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. */
+.ig-node-group[aria-current='true'] .ig-node {
+  stroke: var(--ig-accent);
+  stroke-width: calc(var(--ig-stroke) * 2);
+}
+
+.ig-rank {
+  color: var(--ig-text);
+  font-family: var(--ig-font-mono);
+  font-variant-numeric: tabular-nums;
+  min-width: calc(var(--ig-char-width) * 4);
+  text-align: right;
+}
+
+.ig-rank[data-held='true'] {
+  color: var(--ig-text-muted);
+}
+
+/* ── readiness stations ────────────────────────────────────────────────── */
+
+.ig-station {
+  block-size: var(--ig-station-size);
+  border: var(--ig-stroke) solid var(--ig-station-held);
+  border-radius: 50%;
+  box-shadow: 0 0 0 var(--ig-station-halo) var(--ig-bg);
+  display: inline-block;
+  inline-size: var(--ig-station-size);
+}
+
+.ig-station[data-fill='filled'] {
+  background: var(--ig-station-ready);
+  border-color: var(--ig-station-ready);
+}
+
+.ig-station[data-fill='hollow'] {
+  background: transparent;
+  border-color: var(--ig-station-pending);
+}
+
+.ig-station[data-fill='dashed'] {
+  background: transparent;
+  border-style: dashed;
+  border-color: var(--ig-station-held);
+}
+
+/* ── titles, identity, provenance ──────────────────────────────────────── */
+
+.ig-title {
+  color: var(--ig-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ig-id,
+.ig-count {
+  color: var(--ig-text-muted);
+  font-family: var(--ig-font-mono);
+  font-variant-numeric: tabular-nums;
+}
+
+.ig-link {
+  color: var(--ig-accent);
+  text-decoration: none;
+}
+
+.ig-link:hover {
+  text-decoration: underline;
+}
+
+.ig-provenance,
+.ig-hold {
+  color: var(--ig-text-muted);
+  font-size: var(--ig-font-size-small);
+  grid-column: 3 / -1;
+}
+
+.ig-strike {
+  text-decoration: line-through;
+}
+
+/* ── edge badges ───────────────────────────────────────────────────────── */
+
+/* SPANNED FROM THE TITLE COLUMN, LIKE EVERY OTHER FULL-WIDTH ROW MEMBER. Left
+   unplaced this was the fifth child of a four-column grid, so it auto-placed
+   into column ONE of a second row — the rank track, an auto-sized column that
+   takes the width of its widest item. One relationship badge then set the width
+   of the rank column for the whole row, pushing the station and title across
+   and squeezing the title to pay for it. Badges belong with the row's other
+   metadata, which is what 3 / -1 already means here for provenance and holds.
+   (No backticks in this file: the stylesheet is a template literal.) */
+.ig-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ig-space-tight);
+  grid-column: 3 / -1;
+}
+
+.ig-badge {
+  align-items: center;
+  /* Not currentColor any more: the label and the border now carry DIFFERENT
+     colours deliberately — see below. Left as currentColor the border would
+     follow the text to --ig-text and the hue channel would vanish from the
+     badge entirely, which is the opposite of the fix. */
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  color: var(--ig-text);
+  display: inline-flex;
+  font-size: var(--ig-font-size-small);
+  gap: var(--ig-space-tight);
+  padding: 0 var(--ig-space-tight);
+}
+
+/* THE HUE IS A BORDER COLOUR HERE, NOT A TEXT COLOUR — the theme holds the
+   edge hues to the 3:1 NON-TEXT bar, and says so where it defines them, so
+   painting badge LABELS with them contradicted the palette's own claim. It was
+   not merely theoretical: at this size duplicate-of measured 3.98:1 on
+   --ig-surface and decomposed-from 4.37:1, both under the 4.5:1 the text test
+   asserts for every text colour. The label now takes --ig-text, which that
+   test already proves on all three surfaces, and the hue keeps the non-text
+   use it was measured for.
+   NO CHANNEL IS LOST. Hue is one of four redundant channels and it is still
+   carried by the border; the dash pattern and the glyph are untouched; and the
+   vocabulary test independently proves all five stay distinguishable with hue
+   removed ENTIRELY, which is the stronger claim. */
+.ig-badge[data-edge='blocked-by'] { border-color: var(--ig-edge-blocked-by); border-style: solid; }
+.ig-badge[data-edge='serialize-with'] { border-color: var(--ig-edge-serialize-with); border-style: double; }
+.ig-badge[data-edge='together-with'] { border-color: var(--ig-edge-together-with); border-style: solid; }
+.ig-badge[data-edge='duplicate-of'] { border-color: var(--ig-edge-duplicate-of); border-style: dotted; }
+.ig-badge[data-edge='decomposed-from'] { border-color: var(--ig-edge-decomposed-from); border-style: dashed; }
+
+.ig-glyph {
+  font-family: var(--ig-font-mono);
+}
+
+/* ── the footer group: holds that earn no rank slot ────────────────────── */
+
+.ig-footer {
+  border-top: var(--ig-stroke) solid var(--ig-line);
+  margin-top: var(--ig-space);
+  padding-top: var(--ig-space);
+}
+
+.ig-footer-title {
+  color: var(--ig-text-muted);
+  font-size: var(--ig-font-size-small);
+  margin: 0 0 var(--ig-space-tight);
+}
+
+/* ── the graph canvas ──────────────────────────────────────────────────── */
+
+/* The stage carries the LAYOUT's own size, so one SVG unit is one CSS pixel
+   and an absolutely-positioned rail row lands on the node it names. A
+   percentage-width canvas would rescale under the rail and drift. It scrolls
+   rather than shrinking, because shrinking would silently break that. */
+.ig-stage {
+  block-size: var(--ig-stage-h);
+  inline-size: var(--ig-stage-w);
+  max-inline-size: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  position: relative;
+}
+
+.ig-canvas {
+  block-size: var(--ig-stage-h);
+  display: block;
+  inline-size: var(--ig-stage-w);
+}
+
+/* The ranks and stations FOR the spine nodes, sitting on them. */
+.ig-rail {
+  inset: 0;
+  pointer-events: none;
+  position: absolute;
+}
+
+.ig-rail-row {
+  block-size: var(--ig-row-h);
+  inline-size: var(--ig-row-w);
+  inset-block-start: var(--ig-row-y);
+  inset-inline-start: var(--ig-row-x);
+  margin-bottom: 0;
+  min-block-size: 0;
+  pointer-events: auto;
+  position: absolute;
+}
+
+.ig-node {
+  fill: var(--ig-surface);
+  stroke: var(--ig-line);
+  stroke-width: var(--ig-stroke);
+}
+
+.ig-node[data-held='true'] {
+  fill: var(--ig-surface-2);
+  stroke-dasharray: 4 3;
+}
+
+.ig-node-label {
+  fill: var(--ig-text);
+  font-family: var(--ig-font-ui);
+  font-size: var(--ig-font-size-small);
+}
+
+.ig-edge {
+  fill: none;
+  stroke-width: var(--ig-stroke);
+}
+
+.ig-edge[data-edge='blocked-by'] { stroke: var(--ig-edge-blocked-by); }
+.ig-edge[data-edge='serialize-with'] { stroke: var(--ig-edge-serialize-with); }
+.ig-edge[data-edge='together-with'] { stroke: var(--ig-edge-together-with); }
+.ig-edge[data-edge='duplicate-of'] { stroke: var(--ig-edge-duplicate-of); }
+.ig-edge[data-edge='decomposed-from'] { stroke: var(--ig-edge-decomposed-from); }
+
+/* The dash pattern is set per element from the edge vocabulary, never here —
+   one source for the channel the colour-blind-safety claim rests on. */
+.ig-enclosure {
+  fill: none;
+  stroke: var(--ig-edge-together-with);
+  stroke-width: var(--ig-stroke);
+}
+
+.ig-connector {
+  stroke: var(--ig-edge-together-with);
+  stroke-width: var(--ig-stroke-connector);
+}
+
+/* currentColor on the marker resolves to the inherited text colour, not to the
+   edge's stroke — so a terminal has to be given the hue explicitly or it renders
+   in body text and the fourth channel silently collapses. */
+.ig-terminal {
+  color: var(--ig-text-body);
+  stroke-width: var(--ig-stroke);
+}
+
+.ig-terminal[data-edge='blocked-by'] { color: var(--ig-edge-blocked-by); }
+.ig-terminal[data-edge='serialize-with'] { color: var(--ig-edge-serialize-with); }
+.ig-terminal[data-edge='together-with'] { color: var(--ig-edge-together-with); }
+.ig-terminal[data-edge='duplicate-of'] { color: var(--ig-edge-duplicate-of); }
+.ig-terminal[data-edge='decomposed-from'] { color: var(--ig-edge-decomposed-from); }
+
+/* ── refusals and empty states ─────────────────────────────────────────── */
+
+.ig-refusal,
+.ig-empty {
+  background: var(--ig-surface-2);
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  color: var(--ig-text-body);
+  padding: var(--ig-space);
+}
+
+.ig-refusal-next {
+  color: var(--ig-text);
+  margin: var(--ig-space-tight) 0 0;
+}
+
+/* The capsule is INFORMATIONAL — a plain list item again. It was briefly a
+   button, to make the refusal's advertised action keyboard-reachable; the
+   action itself has since gone, because this package cannot narrow a document
+   and so could never complete it. With the control removed the UA button reset
+   goes too: there is no button look left to undo. */
+.ig-capsule {
+  align-items: baseline;
+  background: var(--ig-surface);
+  border: var(--ig-stroke) solid var(--ig-line);
+  border-radius: var(--ig-radius);
+  display: flex;
+  gap: var(--ig-space);
+  margin-top: var(--ig-space-tight);
+  padding: var(--ig-space-tight) var(--ig-space);
+}
+
+.ig-refusal-omitted {
+  color: var(--ig-text-muted);
+  font-size: var(--ig-font-size-small);
+  margin: var(--ig-space-tight) 0 0;
+}
+
+/* ── the decomposition tree ────────────────────────────────────────────── */
+
+.ig-tree,
+.ig-tree .ig-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ig-tree .ig-list {
+  border-left: var(--ig-stroke) dashed var(--ig-edge-decomposed-from);
+  margin-left: var(--ig-space);
+  padding-left: var(--ig-space);
+}
+
+.ig-tree-item {
+  padding: var(--ig-space-tight) 0;
+}
+
+/* ── legend ────────────────────────────────────────────────────────────── */
+
+.ig-legend {
+  border: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--ig-space);
+  margin: 0 0 var(--ig-space);
+  padding: 0;
+}
+
+.ig-legend-caption {
+  color: var(--ig-text-muted);
+  font-size: var(--ig-font-size-small);
+  padding: 0;
+}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoX/B,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,71 @@
+/**
+ * The theme: every value the viewer draws with, in one place, emitted as CSS
+ * custom properties.
+ *
+ * THE SHIPPED PALETTE IS THE DEFAULT THEME, NOT THE STYLING. It is dark, and
+ * light mode is deliberately absent rather than forgotten — a host that wants
+ * one supplies it through these same properties, which is exactly what makes
+ * this a theme rather than a look. The forcing function is that the package has
+ * to render two of them from one set of components; if a value cannot be
+ * overridden here, it is a bug in this file and not a styling choice elsewhere.
+ *
+ * GEOMETRY IS SINGLE-SOURCED AS NUMBERS. Layout maths needs real numbers (an
+ * SVG endpoint is a coordinate, not a `var()`), and CSS needs custom
+ * properties. Declaring both by hand would be two sources that drift, so the
+ * numbers are canonical and {@link themeCss} renders the properties FROM them.
+ * Retheming geometry therefore moves the drawing and the stylesheet together.
+ */
+/**
+ * Every colour the viewer uses, by token name. Declared as a tuple so the
+ * token list and the theme type cannot disagree: a colour added here is a
+ * compile error in every theme that does not supply it.
+ */
+export declare const COLOR_TOKENS: readonly ["--ig-bg", "--ig-surface", "--ig-surface-2", "--ig-line", "--ig-text", "--ig-text-body", "--ig-text-muted", "--ig-accent", "--ig-focus", "--ig-station-ready", "--ig-station-pending", "--ig-station-held", "--ig-edge-blocked-by", "--ig-edge-serialize-with", "--ig-edge-together-with", "--ig-edge-duplicate-of", "--ig-edge-decomposed-from"];
+export type ColorToken = (typeof COLOR_TOKENS)[number];
+/** Type tokens. `lineHeight` is unitless; the rest carry their own units. */
+export declare const TYPE_TOKENS: readonly ["--ig-font-ui", "--ig-font-mono", "--ig-font-size", "--ig-font-size-small", "--ig-line-height"];
+export type TypeToken = (typeof TYPE_TOKENS)[number];
+/** Geometry tokens. Every value is a number of CSS pixels. */
+export declare const METRIC_TOKENS: readonly ["--ig-space", "--ig-space-tight", "--ig-radius", "--ig-row-height", "--ig-station-size", "--ig-station-halo", "--ig-stroke", "--ig-stroke-connector", "--ig-terminal-length", "--ig-terminal-width", "--ig-gutter-width", "--ig-spine-width", "--ig-char-width", "--ig-focus-ring"];
+export type MetricToken = (typeof METRIC_TOKENS)[number];
+/** Every custom property the stylesheet may reference. */
+export declare const THEME_TOKENS: readonly string[];
+export interface Theme {
+    readonly colors: Readonly<Record<ColorToken, string>>;
+    readonly type: Readonly<Record<TypeToken, string>>;
+    /** Numbers, in CSS pixels. Layout reads these; `themeCss` renders them. */
+    readonly metrics: Readonly<Record<MetricToken, number>>;
+}
+/**
+ * The default theme.
+ *
+ * Contrast is a claim this palette makes and `theme.test.ts` measures: every
+ * text colour clears WCAG AA's 4.5:1 against all three surfaces, and every edge
+ * hue clears the 3:1 non-text bar that applies to a line or a badge outline.
+ * `--ig-text-muted` is the tight one — it carries sentence-length copy at small
+ * sizes, which is why it is the value the tests pin most precisely.
+ */
+export declare const defaultTheme: Theme;
+/** Everything a caller may override, with every field optional. */
+export interface ThemeOverride {
+    readonly colors?: Partial<Record<ColorToken, string>> | undefined;
+    readonly type?: Partial<Record<TypeToken, string>> | undefined;
+    readonly metrics?: Partial<Record<MetricToken, number>> | undefined;
+}
+/**
+ * Merge an override onto a base theme, per token.
+ *
+ * A partial override is the shape a second theme actually takes — changing a
+ * palette rarely means restating the geometry — and requiring a whole `Theme`
+ * would make the cheap case impossible to express.
+ */
+export declare function extendTheme(base: Theme, override: ThemeOverride): Theme;
+/**
+ * Render a theme as one CSS rule of custom properties.
+ *
+ * Values are emitted verbatim for colours and type — a theme's author owns
+ * their spelling — and metrics gain a `px` unit here, which is the single place
+ * the numbers become CSS.
+ */
+export declare function themeCss(theme: Theme, selector?: string): string;
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;GAIG;AACH,eAAO,MAAM,YAAY,6VAkBd,CAAC;AAEZ,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAEvD,6EAA6E;AAC7E,eAAO,MAAM,WAAW,2GAMb,CAAC;AAEZ,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAErD,8DAA8D;AAC9D,eAAO,MAAM,aAAa,+RAef,CAAC;AAEZ,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD,0DAA0D;AAC1D,eAAO,MAAM,YAAY,EAAE,SAAS,MAAM,EAIxC,CAAC;AAEH,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,CAAC;IACtD,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC;IACnD,2EAA2E;IAC3E,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;CACzD;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,KAuDzB,CAAC;AAEH,mEAAmE;AACnE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC,GAAG,SAAS,CAAC;IAClE,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC,GAAG,SAAS,CAAC;IAC/D,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,GAAG,SAAS,CAAC;CACrE;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,GAAG,KAAK,CAMvE;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,SAAU,GAAG,MAAM,CAMjE"}