@issuegraph/viewer 0.9.1 → 0.11.0

package/dist/skeleton.js

@@ -0,0 +1,108 @@
+/**
+ * `renderViewerSkeleton` — what the viewer draws before there is a document.
+ *
+ * ## Why the package draws it, and the host only styles it
+ *
+ * A viewer mounted before its data arrives had two choices and both were wrong.
+ * Rendered over an empty document it said "nothing is in the order", which is
+ * a claim about a backlog nobody has read yet. Held back by the host instead,
+ * the host drew its own placeholder — a guess at this package's layout that
+ * jumped when the real rows landed and that every host had to rewrite.
+ *
+ * So the SHAPE is this package's: the skeleton rows use the same `.ig-slot`
+ * geometry the order uses, so a placeholder row is exactly as tall as a real
+ * one at every density the container picks, and nothing moves on arrival. It
+ * is a pure function over no document, so a host can render it on the server
+ * — in a route's loading state — and the page-load placeholder, the
+ * waiting-for-data placeholder and the data all line up.
+ *
+ * The LOOK is the host's. Every placeholder is an `.ig-skeleton-block`,
+ * filled with `--ig-surface-2` and carrying no animation. This package ships
+ * no motion anywhere — the editor's sheet says why — so a host that wants its
+ * own pulse adds it to that one class, gated on its own reduced-motion rule,
+ * and the fill follows the host's theme like every other surface here.
+ *
+ * ## No word of its own
+ *
+ * The root is `aria-busy` always. It is a labelled `status` region only when
+ * the host supplies `label` — "Loading your issues" is a sentence in the
+ * host's language, and this package does not write one.
+ */
+import { element, renderMarkup } from "./element.js";
+import { resolveTheme, themeCss } from "./theme.js";
+import { viewerStylesheet } from "./styles.js";
+const DEFAULT_ROWS = 8;
+const DEFAULT_CARDS = 3;
+/** Title widths cycle through a few lengths so the column reads as text, not as a bar chart. */
+const TITLE_WIDTHS = ['0', '1', '2', '1'];
+function block(shape, extra = {}) {
+    return element('span', { class: 'ig-skeleton-block', 'data-shape': shape, ...extra });
+}
+function headerSkeleton() {
+    return element('header', { class: 'ig-header' }, [
+        element('div', { class: 'ig-header-top' }, [block('label')]),
+        element('div', { class: 'ig-skeleton-chips' }, [block('chip'), block('chip'), block('chip')]),
+    ]);
+}
+function rowSkeleton(index) {
+    return element('li', { class: 'ig-slot ig-skeleton-row' }, [
+        // THE STATION ALONE IN THE RANK TRACK. A rank figure over it made the cell
+        // taller than a real row's, and the whole placeholder a few pixels a row
+        // too tall — the jump this file exists to prevent. Measured against the
+        // real rail at its dense density: 53 and 53.
+        element('div', { class: 'ig-rank-cell' }, [block('station')]),
+        element('div', { class: 'ig-row-body' }, [
+            // ONE WRAPPER FOR BOTH LINES, as the real row has, so the body's own gap
+            // is not spent between the title and the meta line a second time.
+            element('div', { class: 'ig-skeleton-lines' }, [
+                block('title', { 'data-width': TITLE_WIDTHS[index % TITLE_WIDTHS.length] ?? '0' }),
+                block('meta'),
+            ]),
+        ]),
+    ]);
+}
+/**
+ * A spine card's placeholder: ONE filled block at the card's width and height,
+ * not an outlined card with bars inside. Solid rounded blocks are how a
+ * skeleton reads at a glance — the same shape host dashboards draw for their
+ * own cards — and it keeps every placeholder on the one hook a host styles.
+ */
+function cardSkeleton() {
+    return block('card');
+}
+/**
+ * The placeholder's root, as a spec — exported so a composing surface (the
+ * editor's workspace skeleton) can place it inside its own zones.
+ */
+export function skeletonSpec(options = {}) {
+    const projection = options.projection ?? 'linear';
+    const graph = projection === 'graph';
+    const count = Math.max(1, Math.floor(options.rows ?? (graph ? DEFAULT_CARDS : DEFAULT_ROWS)));
+    const body = graph
+        ? element('div', { class: 'ig-skeleton-stage' }, Array.from({ length: count }, () => cardSkeleton()))
+        : element('ol', { class: 'ig-list' }, Array.from({ length: count }, (_, index) => rowSkeleton(index)));
+    return element('section', {
+        class: `ig-viewer ${graph ? 'ig-graph' : projection === 'tree' ? 'ig-tree-view' : 'ig-linear'}`,
+        'data-projection': projection,
+        'data-frame': options.frame === false ? 'none' : undefined,
+        'data-ig-loading': 'true',
+        'aria-busy': 'true',
+        role: options.label === undefined ? undefined : 'status',
+        'aria-label': options.label,
+    }, [
+        options.chrome === false || graph ? null : headerSkeleton(),
+        // THE PLACEHOLDERS SAY NOTHING. They are shapes, not content, and a
+        // screen reader walking eight empty list items learns only that there
+        // are eight of them — the region's busy state and label already say it.
+        element('div', { 'aria-hidden': 'true' }, [body]),
+    ]);
+}
+/** Render the placeholder a host shows before the viewer has a document. Pure and total. */
+export function renderViewerSkeleton(options = {}) {
+    const theme = resolveTheme(options.theme);
+    return {
+        markup: renderMarkup(skeletonSpec(options)),
+        styles: `${viewerStylesheet}\n${themeCss(theme, options.themeSelector ?? ':root')}`,
+    };
+}
+//# sourceMappingURL=skeleton.js.map

package/dist/skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../src/skeleton.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;AA0RH,eAAO,MAAM,gBAAgB,QAiyC5B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AA+PH,eAAO,MAAM,gBAAgB,QAm+C5B,CAAC"}

package/dist/styles.js

@@ -169,18 +169,10 @@ ${scope} .ig-unit-count {
   margin-right: var(--ig-space-tight);
 }
 
-/* THE FOOTER ROWS TOO, AND THIS IS THE POPULATION THE ROW FIX MISSED.
-   A footer entry is deliberately ONE LINE and shorter than a ranked row -
-   16a gives it no rank, no station and no explanation block, because it is
-   not a fact about the work. That part was right. What was not governed is
-   its TITLE: it wrapped, and the excluded row carrying a canonical reference
-   ran to 73px while its siblings sat at 36. A footer row taller than a
-   ranked row inverts the whole point of the group.
-
-   THE DEFECT IS THE ONE ALREADY FIXED ON .ig-slot, ONE ROW KIND OVER: a
-   title with nothing stopping it wrapping takes the row with it. Fixed at
-   the class this time rather than at the site - the rail renders three row
-   kinds and the first pass governed two. */
+/* THE FOOTER ROW'S TITLE STAYS ON ONE LINE, as a ranked row's does. The row
+   is taller than a ranked row now by design — its status and its reason are
+   what it exists to show — but a title that wraps still takes the row with it,
+   so the name ellipsizes and the reason below it carries the length. */
 ${scope} .ig-footer-row .ig-title {
   line-height: var(--ig-row-title-line);
   min-width: 0;
@@ -189,39 +181,7 @@ ${scope} .ig-footer-row .ig-title {
   white-space: nowrap;
 }
 
-${scope} .ig-footer-row .ig-badges {
-  flex-wrap: nowrap;
-  min-width: 0;
-  overflow: hidden;
-}
-
-/* AND THE CHIPS LOSE THEIR CHROME HERE TOO, which is what actually makes a
-   footer entry ONE LINE. 16a draws it as "a label chip, a title and an
-   identity, on one line"; a bordered chip is padding plus stroke plus line
-   box, so a row carrying any relationship badge stood at 36px against 22px
-   for one carrying none - and the badge block, not the title, was the last
-   thing driving it.
-
-   MEASURED IN TWO PASSES, WHICH IS THE POINT. Stopping after the title fix
-   left the footer group at two heights and looked finished: the row that had
-   been 73px was down to 36 and matched its siblings, so the obvious check
-   passed. It was the SECOND measurement - why 22 and why 36 - that found the
-   badges. A class is not fixed until nothing in it varies for a reason you
-   have not named. */
-${scope} .ig-footer-row .ig-badge {
-  background: none;
-  border: 0;
-  border-radius: 0;
-  padding: 0;
-  white-space: nowrap;
-}
-
-/* THE THIRD AND LAST MEMBER OF THE CLASS: the identity. An excluded row
-   carries TWO - its own, and the canonical it defers to ('455 -> 512') - and
-   the second wrapped, which is why that row alone stood at 30px when the
-   others reached 17. Same defect as the title and the chips, third element,
-   found by asking the same question a third time rather than by stopping at
-   the first uniform-looking answer. */
+/* The identity never wraps mid-reference. */
 ${scope} .ig-footer-row .ig-id {
   white-space: nowrap;
 }
@@ -299,6 +259,19 @@ ${scope} .ig-slot[aria-expanded='true'] {
 ${scope} .ig-slot[aria-expanded='true'] .ig-provenance {
   display: block;
 }
+
+/* THE QUERY CHIP COMES BACK WHERE ITS LINE GOES (#131). At this density the
+   provenance line is hidden, so the chip is the only mark on the row naming
+   WHICH ordered query placed it — and step 3 below keeps it for exactly that
+   reason. A row the reader opened draws the line again, and the chip leaves
+   with it: one fact, said once, at every density. */
+${scope} .ig-slot .ig-badge[data-priority='query'] {
+  display: inline-flex;
+}
+
+${scope} .ig-slot[aria-expanded='true'] .ig-badge[data-priority='query'] {
+  display: none;
+}
 `;
 }
 export const viewerStylesheet = `
@@ -314,6 +287,51 @@ export const viewerStylesheet = `
   position: relative;
 }
 
+/* THE FRAME IS THE STANDALONE CASE'S, AND A CONTAINER CAN DECLINE IT.
+   Alone in a host's page the viewer is a card and draws its own edge. Composed
+   into a surface that already rules its own zones off, that edge lands beside
+   the container's and the seam reads as a doubled hairline — so the container
+   passes frame: false and takes responsibility for every line on the
+   surface. See SceneOptions.frame for why this is an option rather than a
+   host stylesheet unsetting the properties above. */
+.ig-viewer[data-frame='none'] {
+  border: 0;
+  border-radius: 0;
+}
+
+/* THE LEGEND DOCKS AGAINST THE CONTAINER'S SCROLLPORT, NOT THIS ROOT'S.
+   See SceneOptions.dockLegend for why only a container can ask for this.
+
+   THE overflow LINE IS THE WHOLE MECHANISM AND LOOKS LIKE A TIDY-UP. A sticky
+   element positions against its nearest SCROLLPORT, and an ancestor with
+   overflow: hidden is one — so with the root left as it is above, the legend
+   sticks to a box that never scrolls, which is the box it already sat at the
+   bottom of. Nothing moves, nothing errors, and the declaration below reads as
+   though it works. Lifting the clip hands the legend the container's scroller
+   instead, which is the only one that scrolls.
+
+   WHICH IS ALSO WHY THIS IS SAFE ONLY WITH THE FRAME DECLINED. The clip exists
+   so a drawn radius cuts its own corners; a root that has stopped clipping must
+   not be drawing one. The rule above and this one are written to be passed
+   together, and the workspace passes both.
+
+   NO z-index, DELIBERATELY. The legend is the root's last child, so it already
+   paints over the order it overlaps; a layer number here would be a claim about
+   a stacking order this package does not own. */
+.ig-viewer[data-legend='docked'] {
+  overflow: visible;
+}
+
+/* bottom: 0 IS A DEFAULT THE CONTAINER OVERRIDES, not a fixed position. A
+   container with something of its own already pinned to that edge — the
+   grooming workspace's rail footer — sets this element's bottom to clear it,
+   from a height it measures rather than from a number either package wrote
+   down and both would have to keep true. */
+.ig-viewer[data-legend='docked'] > .ig-legend {
+  position: sticky;
+  bottom: 0;
+}
+
 .ig-viewer *,
 .ig-viewer *::before,
 .ig-viewer *::after {
@@ -1045,6 +1063,20 @@ ${railDensity(".ig-viewer[data-density='dense']")}
   padding: var(--ig-space-micro) var(--ig-space-tight);
 }
 
+/* A MATCHED QUERY IS SAID ONCE ON A LIST ROW, BY ITS LINE (#131). The row's
+   provenance line already reads "Picked by query 1 · label:P0", so a chip
+   carrying "label:P0" above it printed the same label twice on every row a
+   query placed — and no §16 frame draws that chip; §16h gives a row "a single
+   provenance line". Hidden by CSS rather than dropped from the markup, for the
+   reason the dense rail hides the line instead: the markup stays whole, and
+   at the dense density, where the LINE is the one hidden, the rail block
+   brings the chip back. A graph card is not an .ig-slot and draws no line, so
+   its chip is untouched. A declared tier and a promotion keep their chips:
+   those are the scanning read §16a draws beside the sentence. */
+.ig-slot .ig-badge[data-priority='query'] {
+  display: none;
+}
+
 /* THE HUE IS A BORDER AND A FILL 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 contradicts the palette's own claim. It was
@@ -1188,57 +1220,83 @@ ${railDensity(".ig-viewer[data-density='dense']")}
 
 /* ── the footer group: holds that earn no rank slot ────────────────────── */
 
-.ig-footer {
-  background: var(--ig-surface-2);
-  padding: var(--ig-space) var(--ig-space-wide);
+/* NO RULE OF ITS OWN ON TOP. The last ranked row above already draws its
+   bottom rule, and a second one here stacked on it as a doubled line. */
+/* THE PANEL HEADER'S LAYOUT, ONE LEVEL DOWN: a kicker and a count chip on one
+   line, a sentence under them. The kicker and the chip are the header's own
+   classes (see footerHead), so this rule only places them. */
+.ig-footer-head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-tight);
+  padding: var(--ig-row-padding-block-dense) var(--ig-space-wide);
 }
 
-.ig-footer-head {
+.ig-footer-title-row {
   align-items: center;
   display: flex;
   gap: var(--ig-space);
-  justify-content: space-between;
 }
 
 .ig-footer-title {
-  color: var(--ig-text-body);
-  font-size: var(--ig-font-size-compact);
   margin: 0;
 }
 
-.ig-footer-labels {
+.ig-footer-note {
   color: var(--ig-text-muted);
-  font-family: var(--ig-font-mono);
-  font-size: var(--ig-font-size-meta);
+  font-size: var(--ig-font-size-compact);
+  line-height: var(--ig-row-meta-line);
+  margin: 0;
 }
 
-/* ONE LINE EACH, and the frame is explicit about why: these are not facts
-   about the work, so they earn no rank slot and no explanation block. A full
-   row here — station, badges, provenance — was claiming the opposite. */
 .ig-footer .ig-list {
   display: flex;
   flex-direction: column;
-  gap: var(--ig-space-snug);
-  margin-top: var(--ig-space);
 }
 
+/* A RANKED ROW'S GRID, PADDING AND RULE, so the group is the rest of the same
+   list rather than a panel of its own: the rank track holds the held station,
+   and it lines up under the stations above because it is the same track.
+
+   ON THE PANEL'S OWN GROUND, NOT A SECOND SURFACE, and at full strength. The
+   group used to sit on --ig-surface-2 with every row at 0.72 opacity, which
+   read as disabled — on the rows whose whole purpose is "open me to see why". */
 .ig-footer-row {
-  align-items: center;
-  display: flex;
-  gap: var(--ig-space-snug);
-  opacity: 0.72;
+  border-top: var(--ig-stroke) solid var(--ig-line);
+  column-gap: var(--ig-space);
+  cursor: pointer;
+  display: grid;
+  grid-template-columns: var(--ig-rank-column) 1fr;
+  /* THE DENSE RANKED ROW'S PADDING, at every width: these rows carry three
+     lines where a ranked row carries two, and the wider padding on top of that
+     made each one twice the height of its neighbours above. */
+  padding: var(--ig-row-padding-block-dense) var(--ig-space-wide);
+}
+
+.ig-footer-row:hover {
+  background: color-mix(in srgb, var(--ig-text) var(--ig-tint-unit), transparent);
+}
+
+/* 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);
+  box-shadow: inset var(--ig-band-rail) 0 0 var(--ig-accent);
 }
 
 .ig-footer-row .ig-title {
-  font-size: var(--ig-font-size-compact);
+  color: var(--ig-text-body);
 }
 
-.ig-footer-row .ig-id {
-  font-size: var(--ig-font-size-meta);
+.ig-footer-row[aria-current='true'] .ig-title {
+  color: var(--ig-text);
 }
 
-.ig-footer-row[aria-current='true'] {
-  opacity: 1;
+.ig-footer-why {
+  color: var(--ig-text-muted);
+  font-size: var(--ig-font-size-compact);
+  line-height: var(--ig-row-meta-line);
+  margin: 0;
 }
 
 /* ── the graph canvas ──────────────────────────────────────────────────── */
@@ -1573,6 +1631,94 @@ ${railDensity(".ig-viewer[data-density='dense']")}
   padding: var(--ig-space-tight) 0;
 }
 
+/* ── loading placeholder ───────────────────────────────────────────────── */
+
+/* THE HOST'S HOOK, AND THE ONLY ONE. Every placeholder shape is one of these,
+   filled with the second surface and holding still: this package ships no
+   motion, and the fill already follows the host's theme. A host that wants a
+   pulse animates this class under its own reduced-motion rule. */
+.ig-skeleton-block {
+  background: var(--ig-surface-2);
+  border-radius: var(--ig-radius);
+  display: block;
+}
+
+/* ON THE HEADER'S OWN GROUND the second surface is the ground, so the shapes
+   there take the hairline colour instead, or they vanish into it. */
+.ig-header .ig-skeleton-block {
+  background: var(--ig-line);
+}
+
+.ig-skeleton-block[data-shape='label'] {
+  block-size: var(--ig-space);
+  inline-size: calc(var(--ig-char-width) * 14);
+}
+
+.ig-skeleton-chips {
+  display: flex;
+  gap: var(--ig-space-snug);
+}
+
+.ig-skeleton-block[data-shape='chip'] {
+  block-size: calc(var(--ig-space) * 2);
+  border-radius: var(--ig-radius);
+  inline-size: calc(var(--ig-char-width) * 9);
+}
+
+.ig-skeleton-block[data-shape='station'] {
+  block-size: var(--ig-space);
+  border-radius: 50%;
+  inline-size: var(--ig-space);
+}
+
+/* THE ROW'S OWN LINE HEIGHTS, so a placeholder row and a real row are the same
+   height at every density the container picks. */
+.ig-skeleton-block[data-shape='title'] {
+  block-size: var(--ig-row-title-line);
+  inline-size: 68%;
+}
+
+.ig-skeleton-block[data-shape='title'][data-width='1'] {
+  inline-size: 54%;
+}
+
+.ig-skeleton-block[data-shape='title'][data-width='2'] {
+  inline-size: 82%;
+}
+
+.ig-skeleton-block[data-shape='meta'] {
+  block-size: var(--ig-row-meta-line);
+  inline-size: 36%;
+}
+
+/* THE TWO LINES OF A ROW, stacked with no gap of their own: each block is its
+   line's full height, which already carries the leading a real line has. */
+.ig-skeleton-lines {
+  display: flex;
+  flex-direction: column;
+}
+
+/* A placeholder row points at nothing, so it takes no pointer and no hover. */
+.ig-skeleton-row {
+  pointer-events: none;
+}
+
+.ig-skeleton-stage {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ig-space-wide);
+  padding: var(--ig-space-wide);
+}
+
+/* THE SPINE CARD'S OWN WIDTH, so the graph's placeholder sits where its cards
+   will, as one solid block with the large radius the panel's cards use. */
+.ig-skeleton-block[data-shape='card'] {
+  block-size: calc(var(--ig-station-box) * 4);
+  border-radius: var(--ig-radius-large);
+  inline-size: min(100%, var(--ig-spine-width));
+}
+
 /* ── legend ────────────────────────────────────────────────────────────── */
 
 /* A FOOTER BAR, WHERE §16b PUTS IT, and worded rather than glyph-only. It sits
@@ -1591,8 +1737,29 @@ ${railDensity(".ig-viewer[data-density='dense']")}
   padding: var(--ig-space) var(--ig-space-wide);
 }
 
+/* FLOATED SO THE BROWSER STOPS TREATING IT AS A RENDERED LEGEND, which is the
+   only reason this declaration exists. HTML gives the first in-flow legend of a
+   fieldset a layout nothing else in CSS has: it is lifted OUT of the fieldset's
+   content box, painted across the top border with a notch cut through the rule
+   either side of it, and the content box then starts below it. On this bar that
+   drew the caption sitting on the rule, a gap of bare ground under the caption
+   where the fieldset's own surface should have been, and a top rule broken in
+   the middle — all three of which looked like a styling bug and none of which
+   any rule here asked for.
+
+   The spec's own escape hatch is the float: a legend whose computed float is
+   not none is not the rendered legend, and becomes an ordinary child. This bar
+   is a flex container, where float does not apply to an item at all, so the
+   caption simply lays out as the first item on the row — which is what the
+   flex rule above, its muted uppercase micro type and its centred alignment
+   were always written for.
+
+   IT IS LOAD-BEARING AND LOOKS DECORATIVE, which is why it is recorded here at
+   this length: delete it and the notch, the gap and the broken rule all come
+   back, with nothing else in this file changed. */
 .ig-legend-caption {
   color: var(--ig-text-muted);
+  float: left;
   font-family: var(--ig-font-mono);
   font-size: var(--ig-font-size-pill);
   letter-spacing: var(--ig-tracking-group);

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;;;;;;;;;;;;;;;;;;;EAmBL,KAAK;;;;;;;;EAQL,KAAK;;;;;;;;;;;;;;;;;;;EAmBL,KAAK;;;;;;;;;;;;;;EAcL,KAAK;;;;;;;;;;;;EAYL,KAAK;;;;;EAKL,KAAK;;;;;EAKL,KAAK;;;;;;;EAOL,KAAK;;;;;;;;;;;;;;;;;;;;;;;EAuBL,KAAK;EACL,KAAK;EACL,KAAK;;;;;;;;;;;;;;;;EAgBL,KAAK;;;;EAIL,KAAK;;;CAGN,CAAC;AACF,CAAC;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsc9B,WAAW,CAAC,gCAAgC,CAAC;;;;;;;;;;;;;EAa7C,WAAW,CAAC,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA80BhD,CAAC"}
+{"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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmf9B,WAAW,CAAC,gCAAgC,CAAC;;;;;;;;;;;;;EAa7C,WAAW,CAAC,kCAAkC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAm+BhD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@issuegraph/viewer",
-  "version": "0.9.1",
+  "version": "0.11.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",