@nanisoft/prism-ui 0.13.0 → 0.16.0

package/dist/components/ui/proportion-list.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Meter } from './meter.js';
+import { Status } from './status.js';
+import { cn } from '../../lib/utils.js';
+/**
+ * The bar's fill, from the state the caller put beside it.
+ *
+ * `StatusTone` is the wider of the two closed sets, because it is the one the
+ * caller is already using for a state wherever else they show one, and a list with
+ * its own narrower set would make the caller translate between two vocabularies for
+ * the same judgement. `MeterTone` is narrower and has no `info`, so `info` takes the
+ * neutral fill, and that cost is named on `status` and on this Component rather than
+ * hidden here.
+ *
+ * The mapping is a fact about two closed sets rather than a judgement about
+ * urgency. Nothing in this file decides whether a category is alarming: the caller
+ * named the tone, and a Component that graded a bar by how its own number compared
+ * to a ceiling would be making a claim about a budget this file cannot see.
+ */
+const BAR_FILL = {
+    neutral: 'neutral',
+    info: 'neutral',
+    success: 'success',
+    warning: 'warning',
+    destructive: 'destructive',
+};
+/**
+ * Each labelled category's share of one whole, as a proportional bar and a number.
+ *
+ * **The unit is a share, and that is what the whole Component is built around.** A
+ * part-to-whole with two or three parts is a `Chart` `donut`, and a series of
+ * unrelated values against a shared baseline is a `Chart` `bar`; neither is this,
+ * because a list of shares is neither of those things. Its bars cannot be modelled
+ * as independent series, since they are constrained to sum to the whole and a
+ * reader comparing two of them is comparing two slices of one pie rather than two
+ * measurements against a scale. So there is no `series` prop, no `mark`, and no
+ * axis: the bar is drawn from `value` against `total`, and the number printed
+ * beside it is that same division, so the two cannot disagree with each other or
+ * with the data.
+ *
+ * **The bar is decorative and the number is the reading, said plainly.** `Meter`
+ * draws the track and the fill, and the row wraps it in an `aria-hidden` box on
+ * purpose: a meter announces its name and its value, and the row already prints
+ * both, so an announced bar beside a printed one is the same sentence twice for
+ * every row on the page. `Meter` requires a name and the only name in the row is
+ * the category's own, so `label` is forwarded to it rather than invented, and the
+ * forwarding is invisible because the wrapper is hidden. A reader who cannot rank
+ * the fills still has every number, which is the whole reason the number is printed
+ * rather than left to the bar.
+ *
+ * **A share is drawn on one scale, so the bars are comparable down the page.** Every
+ * row's fill is `value / total` of the same track, and the tracks are the same
+ * width, which is what makes two categories comparable at a glance. That is the
+ * reason this is a list of bars rather than a stacked bar: a stack puts the shares
+ * in one figure, where the reader has to find the boundary between two categories
+ * to compare them, and a list puts each one on its own common baseline.
+ *
+ * **`Meter` is used rather than a second bar drawn here, and the honest cost is a
+ * palette of three state tones against five.** Composing it means the bar, its
+ * tone vocabulary and its accessibility are one Component's rather than two, and it
+ * means a share list looks like every other measurement in the product, which is
+ * what a reader wants from a bar. The cost is that `StatusTone` and `MeterTone` are
+ * different widths: there is no informational fill, so a category whose state is
+ * `info` draws a neutral bar and its colour meaning is carried by the dot beside the
+ * label. The alternative was a second set of fills authored here, and that is a
+ * second source of truth for a scale the tokens already own.
+ *
+ * **Two inputs throw, because a share that cannot be drawn is not a quiet share.**
+ * A negative quantity and a whole that is zero or less are both impossible rather
+ * than unusual, and both have exactly one honest rendering, which is to stop: a
+ * negative share drawn as an empty bar claims the category is zero when it is
+ * below zero, and a list drawn against a total of zero divides by nothing. The
+ * alternative was to clamp, which is what `Chart` does for a value past the end of
+ * its axis, and the reason it does not apply here is that there is no axis to be
+ * past: the whole is the denominator and it is either there or it is not.
+ *
+ * **The rows are a list, so a reader is told how many categories there are.**
+ * `<ul>` and `<li>` rather than a table of divs, because a reader moving by list
+ * item is told the count and each row is one stop, and because nothing in a
+ * category list is tabular data: there is one measure and it is beside its name.
+ * The rows are also not interactive, and no motion is attached to them for the same
+ * reason: a hover state on a row that cannot be pressed is an affordance for
+ * something the page does not do.
+ *
+ * **An empty list renders the caller's sentence rather than nothing.** A heading
+ * with no rows says the whole is nothing, and hiding the figure leaves a reader
+ * wondering whether it had been missed, which is the argument `Retention01` makes
+ * for leaving a withdrawn schedule on the page.
+ *
+ * **It is a server Component.** There is no state, no effect and no handler, the
+ * whole figure is arithmetic over props, and a dashboard of proportions costs no
+ * client code at all. `Status` and `Meter` are server Components too, so composing
+ * them costs nothing at this boundary either.
+ */
+function ProportionList({ className, items, total, precision = 1, label, caption, empty, ...props }) {
+    const whole = total ?? items.reduce((sum, item) => sum + item.value, 0);
+    // A nonsense `precision` is floored at zero rather than reaching `toFixed`, which
+    // throws on a negative count, for the reason `CohortGrid` gives its own: a
+    // rounding instruction is a reading instruction and a typo in one should not take
+    // a page down.
+    const places = Math.min(20, Math.max(0, Math.floor(precision)));
+    /*
+     * The refusals are inside the `items.length > 0` test because an empty list is a
+     * state a caller reaches rather than a bug: with no categories there is no
+     * category to be negative and no whole to divide by, so there is nothing to
+     * refuse and the caller's own sentence renders below.
+     */
+    if (items.length > 0) {
+        for (const item of items) {
+            if (!Number.isFinite(item.value) || item.value < 0) {
+                throw new Error(`ProportionList: the category '${item.label}' has the value ${String(item.value)}, which is not a ` +
+                    'quantity a share can be taken of. A negative category is a subtraction somewhere upstream, and ' +
+                    'a category whose value went missing is a query that did not come back; neither is something a ' +
+                    'bar can draw honestly, so this stops rather than showing it as nothing.');
+            }
+        }
+        if (!Number.isFinite(whole) || whole <= 0) {
+            throw new Error(`ProportionList: the whole is ${String(whole)}, so there is nothing for a share to be a share of. ` +
+                'Either no category carries a value or the total you passed is not positive. Pass a total that ' +
+                'names what the categories are shares of, and a category whose value is genuinely nothing is a 0.');
+        }
+    }
+    return (_jsxs("figure", { "data-slot": "proportion-list", "data-count": items.length, "aria-label": label, className: cn('flex w-full flex-col gap-3', className), ...props, children: [items.length === 0 ? (_jsx("p", { "data-slot": "proportion-list-empty", className: "text-muted-foreground text-sm", children: empty ?? null })) : (_jsx("ul", { "data-slot": "proportion-list-rows", className: "flex flex-col gap-2", children: items.map((item, index) => {
+                    const share = (item.value / whole) * 100;
+                    // The bar is filled from the printed figure rather than from the exact
+                    // quotient, so the length a reader measures and the number a reader reads
+                    // are the same number to the last decimal. A bar at 64.2087 percent beside
+                    // a printed 64.2 is one fact drawn twice, and a difference of one part in a
+                    // thousand is not worth the two versions of it.
+                    const printed = share.toFixed(places);
+                    return (_jsxs("li", { "data-slot": "proportion-list-row", className: "flex items-center gap-3", children: [item.status === undefined ? null : (_jsx(Status, { tone: item.status.tone, label: item.status.label, size: "sm", className: "shrink-0" })), _jsx("span", { "data-slot": "proportion-list-label", className: "min-w-0 flex-1 truncate text-sm font-medium", children: item.label }), _jsx("div", { "data-slot": "proportion-list-bar", "aria-hidden": "true", className: "w-32 shrink-0", children: _jsx(Meter, { value: Number(printed), label: item.label, tone: item.status === undefined ? undefined : BAR_FILL[item.status.tone] }) }), _jsx("span", { "data-slot": "proportion-list-value", className: "shrink-0 text-right text-sm tabular-nums", children: item.text ?? `${printed}%` })] }, `${item.label}-${index}`));
+                }) })), caption === undefined ? null : (_jsx("p", { "data-slot": "proportion-list-caption", className: "text-muted-foreground text-sm", children: caption }))] }));
+}
+export { ProportionList };

package/dist/components/ui/prose.d.ts

@@ -81,7 +81,41 @@ export type ProseProps = ComponentProps<'div'> & {
  * type rule gives body copy `text-pretty` and putting it here means a caller's
  * own `<p>` inherits it rather than needing a class of its own.
  *
+ * **A table in the run scrolls, and it is the only treatment here that has to
+ * change the element's box type to get there.** A `display: table` box cannot be
+ * a scroll container: `overflow` applies to block containers, and CSS Tables 3
+ * says the overflow property on a table-root or table-wrapper box "when its value
+ * is not either visible, clip or hidden, is ignored and treated as if its value
+ * was visible". So `overflow-x: auto` written straight onto the table computes
+ * away, the table keeps its min-content floor, and a four-column table widens the
+ * page instead of scrolling it. `display: block` is what makes the element a block
+ * container, and the declaration the code fence above already has then works on
+ * it. The row groups are wrapped in an anonymous table box by the fixup rules, and
+ * that box still inherits `border-collapse`, so a collapsed table stays collapsed.
+ *
+ * The consequence worth naming is that the grid inside now sizes to its content up
+ * to the measure rather than stretching to fill it, which is what the same
+ * technique does everywhere it is used. A table wider than the measure scrolls.
+ *
+ * The treatment is a CHILD selector, and that is load-bearing rather than
+ * incidental. A descendant selector would reach a table the caller has already put
+ * in a scroll container of their own, `Table` above all, and `display: block`
+ * there would move `caption-side` onto a block box and stop the grid filling the
+ * wrapper it arrived in. A direct child is what this component says its content
+ * is: the caller's own flow content.
+ *
  * It is a server Component: no hook, no context and no client code.
+ *
+ * **The heading ladder here is the one `SectionHeading` walks, entered one rung
+ * down, and the reason is the measure rather than a second decision.** A run of
+ * prose is held to `--container-measure`, 42rem. The Display step is 3rem, and a
+ * 42rem column is fourteen of them, so a document title set at Display is a
+ * title broken into fragments rather than a title. So the child treatments set
+ * `h1` at `4xl` and descend one authored step per level to `lg` at `h5` and
+ * `h6`, which is the same scale, the same floor and the same rule about a
+ * heading never rendering smaller than the copy it introduces, entered at the
+ * rung that fits the column. A document and a page are therefore one hierarchy
+ * at different reading widths rather than two answers to one question.
  */
 declare function Prose({ children, size, fullWidth, className, ...props }: ProseProps): import("react").JSX.Element;
 export { Prose };

package/dist/components/ui/prose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../../src/components/ui/prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;GAOG;AACH,QAAA,MAAM,WAAW;;;CAGP,CAAA;AAEV;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAA;AAEhD;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/C;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAa,EAAE,SAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BAkC7F;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../../src/components/ui/prose.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD;;;;;;;GAOG;AACH,QAAA,MAAM,WAAW;;;CAGP,CAAA;AAEV;;;;GAIG;AACH,MAAM,MAAM,SAAS,GAAG,MAAM,OAAO,WAAW,CAAA;AAEhD;;;;;;;GAOG;AACH,MAAM,MAAM,UAAU,GAAG,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/C;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAA;IACnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgEG;AACH,iBAAS,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAa,EAAE,SAAiB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,+BA0C7F;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/components/ui/prose.js

@@ -41,13 +41,53 @@ const PROSE_SIZES = {
  * type rule gives body copy `text-pretty` and putting it here means a caller's
  * own `<p>` inherits it rather than needing a class of its own.
  *
+ * **A table in the run scrolls, and it is the only treatment here that has to
+ * change the element's box type to get there.** A `display: table` box cannot be
+ * a scroll container: `overflow` applies to block containers, and CSS Tables 3
+ * says the overflow property on a table-root or table-wrapper box "when its value
+ * is not either visible, clip or hidden, is ignored and treated as if its value
+ * was visible". So `overflow-x: auto` written straight onto the table computes
+ * away, the table keeps its min-content floor, and a four-column table widens the
+ * page instead of scrolling it. `display: block` is what makes the element a block
+ * container, and the declaration the code fence above already has then works on
+ * it. The row groups are wrapped in an anonymous table box by the fixup rules, and
+ * that box still inherits `border-collapse`, so a collapsed table stays collapsed.
+ *
+ * The consequence worth naming is that the grid inside now sizes to its content up
+ * to the measure rather than stretching to fill it, which is what the same
+ * technique does everywhere it is used. A table wider than the measure scrolls.
+ *
+ * The treatment is a CHILD selector, and that is load-bearing rather than
+ * incidental. A descendant selector would reach a table the caller has already put
+ * in a scroll container of their own, `Table` above all, and `display: block`
+ * there would move `caption-side` onto a block box and stop the grid filling the
+ * wrapper it arrived in. A direct child is what this component says its content
+ * is: the caller's own flow content.
+ *
  * It is a server Component: no hook, no context and no client code.
+ *
+ * **The heading ladder here is the one `SectionHeading` walks, entered one rung
+ * down, and the reason is the measure rather than a second decision.** A run of
+ * prose is held to `--container-measure`, 42rem. The Display step is 3rem, and a
+ * 42rem column is fourteen of them, so a document title set at Display is a
+ * title broken into fragments rather than a title. So the child treatments set
+ * `h1` at `4xl` and descend one authored step per level to `lg` at `h5` and
+ * `h6`, which is the same scale, the same floor and the same rule about a
+ * heading never rendering smaller than the copy it introduces, entered at the
+ * rung that fits the column. A document and a page are therefore one hierarchy
+ * at different reading widths rather than two answers to one question.
  */
 function Prose({ children, size = 'base', fullWidth = false, className, ...props }) {
     return (_jsx("div", { "data-slot": "prose", "data-size": size, className: cn('text-pretty flex flex-col gap-4 leading-relaxed', fullWidth ? 'max-w-none' : 'max-w-measure', PROSE_SIZES[size], 
         // The block treatments. Every child is styled by its own tag so a
         // consumer's plain elements read as the system, and the gaps the flex
         // column owns are the rhythm between blocks.
-        '[&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:underline', '[&_blockquote]:border-border [&_blockquote]:text-muted-foreground [&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:italic', '[&_code]:bg-muted [&_code]:text-muted-foreground [&_code]:rounded-sm [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs', '[&_h1]:text-balance [&_h1]:text-3xl [&_h1]:font-semibold [&_h1]:tracking-tight', '[&_h2]:text-balance [&_h2]:mt-2 [&_h2]:text-2xl [&_h2]:font-semibold [&_h2]:tracking-tight', '[&_h3]:text-balance [&_h3]:mt-2 [&_h3]:text-xl [&_h3]:font-semibold [&_h3]:tracking-tight', '[&_h4]:text-balance [&_h4]:text-lg [&_h4]:font-semibold', '[&_hr]:bg-border [&_hr]:h-px [&_hr]:my-2', '[&_img]:rounded-lg', '[&_li]:leading-relaxed [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6', '[&_p]:leading-relaxed', '[&_pre]:bg-muted [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-xs', '[&_pre_code]:bg-transparent [&_pre_code]:p-0', '[&_strong]:font-semibold', '[&_table]:w-full [&_td]:px-3 [&_td]:py-2 [&_td]:align-top [&_th]:px-3 [&_th]:py-2 [&_th]:text-left', className), ...props, children: children }));
+        '[&_a]:text-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a:hover]:underline', '[&_blockquote]:border-border [&_blockquote]:text-muted-foreground [&_blockquote]:border-l-2 [&_blockquote]:pl-4 [&_blockquote]:italic', '[&_code]:bg-muted [&_code]:text-muted-foreground [&_code]:rounded-sm [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-xs', '[&_h1]:text-balance [&_h1]:text-4xl [&_h1]:font-semibold [&_h1]:tracking-tight', '[&_h2]:text-balance [&_h2]:mt-2 [&_h2]:text-3xl [&_h2]:font-semibold [&_h2]:tracking-tight', '[&_h3]:text-balance [&_h3]:mt-2 [&_h3]:text-2xl [&_h3]:font-semibold [&_h3]:tracking-tight', '[&_h4]:text-balance [&_h4]:text-xl [&_h4]:font-semibold', '[&_h5]:text-balance [&_h5]:text-lg [&_h5]:font-semibold', '[&_h6]:text-balance [&_h6]:text-lg [&_h6]:font-semibold', '[&_hr]:bg-border [&_hr]:h-px [&_hr]:my-2', '[&_img]:rounded-lg', '[&_li]:leading-relaxed [&_ol]:list-decimal [&_ol]:pl-6 [&_ul]:list-disc [&_ul]:pl-6', '[&_p]:leading-relaxed', '[&_pre]:bg-muted [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:p-4 [&_pre]:font-mono [&_pre]:text-xs', '[&_pre_code]:bg-transparent [&_pre_code]:p-0', '[&_strong]:font-semibold', 
+        // The one treatment that changes a box type rather than decorating one.
+        // The reasoning, and the two spec rules it rests on, are in this
+        // component's JSDoc: a `display: table` box cannot be a scroll container,
+        // and a child selector is what keeps the rule off a table a caller has
+        // already wrapped in a scroll container of their own.
+        '[&>table]:block [&>table]:w-full [&>table]:overflow-x-auto', '[&_td]:px-3 [&_td]:py-2 [&_td]:align-top [&_th]:px-3 [&_th]:py-2 [&_th]:text-left', className), ...props, children: children }));
 }
 export { Prose };

package/dist/components/ui/pulse-graph.d.ts

@@ -87,7 +87,12 @@ type PulseFigure = {
     relations?: readonly PulseRelation[];
     /**
      * Layout only, exactly as on every Component: grid placement and width.
-     * Changing a Prism-owned visual property from here is prohibited.
+     * Changing a Prism-owned visual property from here is prohibited, and this
+     * Component spreads no other prop, so there is no second way to do it.
+     *
+     * It lands on the drawing inside the sideways region rather than on the region
+     * itself, so a caller narrowing the figure narrows the drawing and the region
+     * still holds the floor.
      */
     className?: string;
 };
@@ -175,9 +180,36 @@ export type PulseGraphProps = PulseFigure & ({
  * sentence is what a screen reader gets. Pass `decorative` when that sentence
  * already says what the drawing shows.
  *
- * Positions are the caller's. The Component fits and draws, and it does not lay
- * out a graph, so it cannot know that two labels will not collide. A relation
- * naming a node that is not in `nodes` is dropped and counted on the element.
+ * **No stroke crosses a label, and every connector still reaches the marks it
+ * joins.** An edge used to run from one mark's centre to the other, and a node's
+ * name is printed under its mark, so every edge heading downward struck through the
+ * name of the node it left. Each label a node prints is now its own obstacle rather
+ * than part of one box enclosing the whole node, and an edge is trimmed only against
+ * the labels it would actually enter. That direction is the whole of the rule: a
+ * name and a note both sit below their mark, so an edge leaving sideways runs along
+ * the mark's centre line and clears both, and it stops at the mark's own edge with
+ * the ink clearance between. Backing every edge off the widest label at its node
+ * instead detached all five connectors on a six-stage rail from the circles they
+ * connect, which is a drawing of a shape with no relations on it. The Component
+ * cannot know that two labels will not collide with one another, which is the
+ * caller's positions to settle, and it does know every mark's radius, both label
+ * offsets and every label's own width, because a monospaced label's width is its
+ * character count. The rail is held to
+ * the same clearance rather than to a fixed distance from the canvas bottom,
+ * because a note is the deepest ink a node draws and a lane whose mark lands low
+ * put it under the rail. `test/pulse-graph.test.tsx` asserts both halves as
+ * geometry rather than the presence of a class name.
+ *
+ * **No label is drawn below `text-xs`.** The drawing is wrapped in a container
+ * that scrolls sideways, and the drawing itself holds a floor of its own
+ * coordinate space, so a phone sees the whole graph at a legible size rather than
+ * the whole graph at six pixels. That is the same bargain `Table` strikes with
+ * seven columns, and it is a bargain rather than an accident because the
+ * alternative is a picture of a shape with nothing written on it.
+ *
+ * Positions are the caller's, and two labels crossing one another is still the
+ * caller's to settle. A relation naming a node that is not in `nodes` is dropped
+ * and counted on the element.
  */
 declare function PulseGraph({ nodes, relations, label, decorative, className, }: PulseGraphProps): import("react").JSX.Element;
 export { PulseGraph };

package/dist/components/ui/pulse-graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pulse-graph.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pulse-graph.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAA;IACV;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,iDAAiD;AACjD,KAAK,WAAW,GAAG;IACjB;;;;;OAKG;IACH,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;IAC3B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,aAAa,EAAE,CAAA;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,CACI;IACE;;;;OAIG;IACH,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CACJ,CAAA;AAsHH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,SAAc,EACd,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,eAAe,+BA4MjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"pulse-graph.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pulse-graph.tsx"],"names":[],"mappings":"AAaA;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,MAAM,SAAS,GAAG;IACtB,oEAAoE;IACpE,EAAE,EAAE,MAAM,CAAA;IACV;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAA;IACT,0EAA0E;IAC1E,CAAC,EAAE,MAAM,CAAA;IACT;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;GASG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAA;IACZ,oDAAoD;IACpD,EAAE,EAAE,MAAM,CAAA;IACV,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,iDAAiD;AACjD,KAAK,WAAW,GAAG;IACjB;;;;;OAKG;IACH,KAAK,EAAE,SAAS,SAAS,EAAE,CAAA;IAC3B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,SAAS,aAAa,EAAE,CAAA;IACpC;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,WAAW,GACvC,CACI;IACE;;;;OAIG;IACH,UAAU,EAAE,IAAI,CAAA;IAChB,KAAK,CAAC,EAAE,KAAK,CAAA;CACd,GACD;IACE,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,KAAK,CAAA;CACnB,CACJ,CAAA;AA2MH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8FG;AACH,iBAAS,UAAU,CAAC,EAClB,KAAK,EACL,SAAc,EACd,KAAK,EACL,UAAkB,EAClB,SAAS,GACV,EAAE,eAAe,+BAoMjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/components/ui/pulse-graph.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { INK_CLEARANCE, LABEL_DESCENT, fitPoints, strokeBetween, } from '../../lib/figure.js';
 import { cn } from '../../lib/utils.js';
 /**
  * The canvas the graph draws into, in its own user units.
@@ -7,18 +8,49 @@ import { cn } from '../../lib/utils.js';
  * the reason `Diagram` gives: type inside a scaled SVG is sized in the SVG's
  * own user units, so a viewBox derived from a caller's coordinates would make
  * the label size a function of how large a number the caller happened to use.
+ *
+ * **A fixed canvas fixes the ratio, and the ratio was the half of the argument
+ * that was missing.** Every label's rendered size is its size in user units times
+ * the rendered width over this number, so a drawing that is right at a desktop
+ * width shrinks with its container until it says nothing. In the 356 pixels a
+ * phone leaves a PulseGraph, a stage name came to 7.23 pixels and a node's note
+ * to 5.56, which is a picture of a shape with nothing written on it. The canvas
+ * is still the right answer and it is what keeps a label a constant rather than a
+ * function of the caller's arithmetic; what it does not do is set a floor, and
+ * `LEGIBLE_MIN_WIDTH` is that floor. `DESIGN.md` states the rule under The figure
+ * floor.
  */
 const CANVAS_WIDTH = 640;
 const CANVAS_HEIGHT = 360;
+/**
+ * The width below which the drawing stops being legible, as a spacing multiple.
+ *
+ * The floor is `CANVAS_WIDTH` itself, so the rule is one sentence: the drawing is
+ * never rendered narrower than its own coordinate space, one user unit is
+ * therefore never less than one pixel, and the smallest label in it is
+ * `NODE_NOTE_SIZE`, which is the size `--text-xs` resolves to. So no label this
+ * drawing sets is smaller than `text-xs`, and at the floor the smallest is
+ * exactly it.
+ *
+ * **A container narrower than the floor scrolls rather than shrinking, and that
+ * is the answer this repository already gives a table and a board.** A table that
+ * restacks has stopped being a table, and a graph whose stage names are seven
+ * pixels tall has stopped being a graph: it is the shape with nothing written on
+ * it a reader can read. So the drawing holds its size and the container moves
+ * under it, which is what `Table` does with seven columns and what `Gantt01`
+ * does with a schedule of names and bars.
+ *
+ * `160` is `CANVAS_WIDTH` as a multiple of the authored spacing base, which is
+ * how a width nobody held a separate decision for is written.
+ */
+const LEGIBLE_MIN_WIDTH = 'min-w-160';
 /**
  * The band left empty around the fitted points, in user units.
  *
- * Wider than `Diagram`'s, and the extra is on the bottom rather than split. A
- * pulse graph is read as a sequence running left to right, so the bottom band
- * carries the rail, the lane marks and the stage names set under them, and all
- * three are horizontal extents that a graph with more vertical spread would
- * collide with. Reserving it once here is cheaper than every caller learning
- * where not to put a node.
+ * The same band `Diagram` keeps on its top and its two sides, and the foot
+ * carries more than that: a pulse graph is read as a sequence running left to
+ * right, so the band below the fitted area holds the rail, and a lane whose mark
+ * lands low puts its note in the gap `RAIL_BAND` left rather than under the rail.
  */
 const PADDING = 56;
 /** The node mark's radius. A circle, so no corner radius for the pack to move. */
@@ -29,14 +61,29 @@ const NODE_RADIUS = 6;
  * The authored type scale is in `rem` and cannot be used inside a viewBox, where
  * a font size is a coordinate and not a length on the page. These are geometry,
  * the one thing Tailwind stays authoritative for.
+ *
+ * The note is twelve user units, which is what `--text-xs` resolves to, so at
+ * `LEGIBLE_MIN_WIDTH` it renders at exactly that step and never below it. It was
+ * ten, and ten is not a step this system sets interface type at, so a note was the
+ * smallest type the whole package emitted anywhere, a figure included. The name is
+ * one unit larger, which is the same hierarchy the two have always drawn.
  */
 const NODE_NAME_SIZE = 13;
 const NODE_NAME_OFFSET = 22;
-const NODE_NOTE_SIZE = 10;
-const NODE_NOTE_OFFSET = 35;
+const NODE_NOTE_SIZE = 12;
+/**
+ * The note's baseline, measured down from the mark's centre.
+ *
+ * The name's baseline, then the note's own size, then a line of leading, so the
+ * second line sits under the first rather than on it. It is the deepest any node
+ * draws, and the rail band below is measured from it.
+ */
+const NODE_NOTE_OFFSET = NODE_NAME_OFFSET + NODE_NOTE_SIZE + 5;
+/** The deepest ink a node draws below its mark's centre, in user units. */
+const NODE_NOTE_DEPTH = NODE_NOTE_OFFSET + LABEL_DESCENT * NODE_NOTE_SIZE;
 /**
  * The rail the marker rides, in user units, measured from the bottom of the
- * fitted area.
+ * canvas.
  *
  * It is a separate element from the edges because it is a different claim: the
  * edges say what connects to what, and the rail says there is an order. A graph
@@ -46,28 +93,64 @@ const NODE_NOTE_OFFSET = 35;
 const RAIL_OFFSET = 74;
 const RAIL_THICKNESS = 1.5;
 /**
- * The caller's points, fitted into the canvas with their aspect ratio kept and
- * the leftover shared out evenly.
+ * The band the rail reserves at the foot of the canvas, in user units.
  *
- * A caller whose points span one axis only, or who passes a single node, gets
- * the other axis centred rather than a division by zero.
+ * It is the rail's own distance up from the bottom, then half its thickness, then
+ * the clearance the drawing keeps between two pieces of ink, then the deepest ink
+ * a node draws below its mark. The fitted area stops above the whole of it, so a
+ * lane whose mark lands on the bottom of that area puts its note in the gap this
+ * band left rather than on the rail's own stroke. It is arithmetic rather than a
+ * number because every term in it has its own reason, and retuning the rail or the
+ * type moves the fit with it rather than leaving the band behind.
  */
-function fit(nodes) {
-    if (nodes.length === 0)
-        return () => ({ x: CANVAS_WIDTH / 2, y: CANVAS_HEIGHT / 2 });
-    const xs = nodes.map((node) => node.x);
-    const ys = nodes.map((node) => node.y);
-    const minX = Math.min(...xs);
-    const minY = Math.min(...ys);
-    const spanX = Math.max(...xs) - minX;
-    const spanY = Math.max(...ys) - minY;
-    const roomX = CANVAS_WIDTH - PADDING * 2;
-    const roomY = CANVAS_HEIGHT - PADDING * 2;
-    const scale = Math.min(spanX === 0 ? Number.POSITIVE_INFINITY : roomX / spanX, spanY === 0 ? Number.POSITIVE_INFINITY : roomY / spanY);
-    const unit = Number.isFinite(scale) && scale > 0 ? scale : 1;
-    const offsetX = PADDING + (roomX - spanX * unit) / 2 - minX * unit;
-    const offsetY = PADDING + (roomY - spanY * unit) / 2 - minY * unit;
-    return (node) => ({ x: node.x * unit + offsetX, y: node.y * unit + offsetY });
+const RAIL_BAND = RAIL_OFFSET + RAIL_THICKNESS / 2 + INK_CLEARANCE + NODE_NOTE_DEPTH;
+/**
+ * The labels this drawing prints under one node, which are what a stroke leaving it
+ * has to be trimmed against.
+ *
+ * Each label is its own obstacle rather than one box enclosing both, and that is the
+ * whole of the trim rule as it applies here: a node's name and note are both below
+ * its mark, so an edge leaving sideways runs along the mark's centre line and never
+ * enters either of them, while an edge leaving downward enters both. The arithmetic
+ * is `lib/figure`, which is where the shared answer lives; what is left here is the
+ * two labels this drawing prints and where it prints them.
+ */
+function nodeLabels(node) {
+    const labels = [{ text: node.name, size: NODE_NAME_SIZE, offset: NODE_NAME_OFFSET }];
+    if (node.note !== undefined) {
+        labels.push({ text: node.note, size: NODE_NOTE_SIZE, offset: NODE_NOTE_OFFSET });
+    }
+    return labels;
+}
+/**
+ * The head a carrying edge grows, at the end of the stroke a reader can see.
+ *
+ * The head is part of the stroke rather than part of the target mark, so it is
+ * placed at the stroke's own end and not at an inset from the mark's centre. A
+ * head measured from the centre would sit inside the clearance the stroke stops at
+ * and the two would read as two marks with a gap between them rather than as one
+ * arrow. Measured from the stroke's own end the tip is one ink clearance from the
+ * mark it points at, which is the same gap every other end of every other connector
+ * on the rail keeps.
+ *
+ * This is the one piece of the drawing that earns its place by being static. An
+ * edge that carries something has to say so to a reader who has turned every
+ * animation off, and a dashed overlay read as direction only while the dashes
+ * were moving, so the claim vanished for exactly the reader who most needed it.
+ * A head does not move, so it does not need a cycle, and it is legible in a
+ * printed page. The rail's travelling marker is then free to be pure atmosphere
+ * rather than the only thing carrying the meaning.
+ */
+function flowHead(line) {
+    const dx = line.to.x - line.from.x;
+    const dy = line.to.y - line.from.y;
+    const length = Math.hypot(dx, dy);
+    if (length === 0)
+        return null;
+    const ux = dx / length;
+    const uy = dy / length;
+    const head = 5;
+    return (_jsx("path", { "data-slot": "pulse-graph-flow", d: `M ${line.to.x - uy * head} ${line.to.y + ux * head} L ${line.to.x} ${line.to.y} L ${line.to.x + uy * head} ${line.to.y - ux * head}`, strokeWidth: 1.5, fill: "none", className: "stroke-brand-ink" }));
 }
 /**
  * The lanes present, in ascending order.
@@ -159,19 +242,40 @@ function stagger(lane) {
  * sentence is what a screen reader gets. Pass `decorative` when that sentence
  * already says what the drawing shows.
  *
- * Positions are the caller's. The Component fits and draws, and it does not lay
- * out a graph, so it cannot know that two labels will not collide. A relation
- * naming a node that is not in `nodes` is dropped and counted on the element.
+ * **No stroke crosses a label, and every connector still reaches the marks it
+ * joins.** An edge used to run from one mark's centre to the other, and a node's
+ * name is printed under its mark, so every edge heading downward struck through the
+ * name of the node it left. Each label a node prints is now its own obstacle rather
+ * than part of one box enclosing the whole node, and an edge is trimmed only against
+ * the labels it would actually enter. That direction is the whole of the rule: a
+ * name and a note both sit below their mark, so an edge leaving sideways runs along
+ * the mark's centre line and clears both, and it stops at the mark's own edge with
+ * the ink clearance between. Backing every edge off the widest label at its node
+ * instead detached all five connectors on a six-stage rail from the circles they
+ * connect, which is a drawing of a shape with no relations on it. The Component
+ * cannot know that two labels will not collide with one another, which is the
+ * caller's positions to settle, and it does know every mark's radius, both label
+ * offsets and every label's own width, because a monospaced label's width is its
+ * character count. The rail is held to
+ * the same clearance rather than to a fixed distance from the canvas bottom,
+ * because a note is the deepest ink a node draws and a lane whose mark lands low
+ * put it under the rail. `test/pulse-graph.test.tsx` asserts both halves as
+ * geometry rather than the presence of a class name.
+ *
+ * **No label is drawn below `text-xs`.** The drawing is wrapped in a container
+ * that scrolls sideways, and the drawing itself holds a floor of its own
+ * coordinate space, so a phone sees the whole graph at a legible size rather than
+ * the whole graph at six pixels. That is the same bargain `Table` strikes with
+ * seven columns, and it is a bargain rather than an accident because the
+ * alternative is a picture of a shape with nothing written on it.
+ *
+ * Positions are the caller's, and two labels crossing one another is still the
+ * caller's to settle. A relation naming a node that is not in `nodes` is dropped
+ * and counted on the element.
  */
 function PulseGraph({ nodes, relations = [], label, decorative = false, className, }) {
-    const place = fit(nodes);
     const byId = new Map(nodes.map((node) => [node.id, node]));
     const lanes = lanesOf(nodes);
-    const drawn = relations.flatMap((relation) => {
-        const from = byId.get(relation.from);
-        const to = byId.get(relation.to);
-        return from && to ? [{ relation, from: place(from), to: place(to) }] : [];
-    });
     /**
      * The rail's two ends, taken from the lanes that exist rather than from the
      * canvas. A rail as wide as the canvas regardless of where the nodes are would
@@ -179,6 +283,27 @@ function PulseGraph({ nodes, relations = [], label, decorative = false, classNam
      * about a caller's data that the caller did not make.
      */
     const railNodes = nodes.filter((node) => node.lane !== undefined);
+    // A lane's note is the deepest ink a node draws, and the rail sits below the
+    // fitted area, so the fit stops above the band the rail reserves. A field has
+    // no rail, nothing reserves the foot, and the fit is the same band the top and
+    // the two sides get.
+    const place = fitPoints(nodes, {
+        width: CANVAS_WIDTH,
+        height: CANVAS_HEIGHT,
+        padding: PADDING,
+        bottom: railNodes.length ? CANVAS_HEIGHT - RAIL_BAND : undefined,
+    });
+    const drawn = relations.flatMap((relation) => {
+        const from = byId.get(relation.from);
+        const to = byId.get(relation.to);
+        if (!from || !to)
+            return [];
+        // Each end carries its mark's centre and the labels printed under it, because
+        // a stroke is trimmed against the labels it would enter and the two are not the
+        // same thing.
+        const end = (node) => ({ at: place(node), labels: nodeLabels(node) });
+        return [{ relation, from: end(from), to: end(to) }];
+    });
     const railAt = railNodes.length
         ? {
             x0: Math.min(...railNodes.map((node) => place(node).x)) - NODE_RADIUS - 10,
@@ -186,27 +311,16 @@ function PulseGraph({ nodes, relations = [], label, decorative = false, classNam
         }
         : null;
     const railY = CANVAS_HEIGHT - RAIL_OFFSET;
-    return (_jsxs("svg", { "data-slot": "pulse-graph", "data-unresolved-relations": relations.length - drawn.length, "data-lanes": lanes.length, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', className), children: [railAt ? (_jsxs("g", { "data-slot": "pulse-graph-rail", children: [_jsx("line", { "data-slot": "pulse-graph-rail-line", x1: railAt.x0, y1: railY, x2: railAt.x1, y2: railY, strokeWidth: RAIL_THICKNESS, className: "stroke-border" }), _jsx("g", { "data-slot": "pulse-graph-marker", className: "prism-ambient-travel prism-ambient-delay-1", style: { '--ambient-travel-distance': `${railAt.x1 - railAt.x0}px` }, children: _jsx("rect", { x: railAt.x0 - 2.5, y: railY - 2.5, width: 5, height: 5, rx: 2.5, className: "fill-brand-ink" }) })] })) : null, drawn.map(({ relation, from, to }) => (_jsxs("g", { "data-slot": "pulse-graph-relation", "data-relation": `${relation.from}-${relation.to}`, "data-carries": relation.carries || undefined, children: [_jsx("line", { x1: from.x, y1: from.y, x2: to.x, y2: to.y, strokeWidth: 1, strokeDasharray: relation.indirect ? '4 4' : undefined, className: "stroke-muted-foreground/50 fill-none" }), relation.carries
-                        ? (() => {
-                            const dx = to.x - from.x;
-                            const dy = to.y - from.y;
-                            const length = Math.hypot(dx, dy);
-                            if (length === 0)
-                                return null;
-                            // The head sits back from the target mark so it never overlaps
-                            // it, and is scaled to the line's own length so a short edge and
-                            // a long one get the same size head rather than a stretched one.
-                            const inset = NODE_RADIUS + 4;
-                            const ux = dx / length;
-                            const uy = dy / length;
-                            const hx = to.x - ux * inset;
-                            const hy = to.y - uy * inset;
-                            const head = 5;
-                            return (_jsx("path", { "data-slot": "pulse-graph-flow", d: `M ${hx - uy * head} ${hy + ux * head} L ${hx} ${hy} L ${hx + uy * head} ${hy - ux * head}`, strokeWidth: 1.5, fill: "none", className: "stroke-brand-ink" }));
-                        })()
-                        : null] }, `${relation.from}-${relation.to}`))), nodes.map((node) => {
-                const at = place(node);
-                return (_jsxs("g", { "data-slot": "pulse-graph-node", "data-node": node.id, "data-emphasis": node.emphasis || undefined, "data-lane": node.lane, children: [node.emphasis ? (_jsx("circle", { "data-slot": "pulse-graph-halo", cx: at.x, cy: at.y, r: NODE_RADIUS, strokeWidth: 0, className: cn('fill-brand-ink/25', 'prism-ambient-pulse', stagger(node.lane ?? 0)) })) : null, _jsx("circle", { cx: at.x, cy: at.y, r: NODE_RADIUS, strokeWidth: node.emphasis ? 2 : 1, className: cn(node.emphasis ? 'fill-accent stroke-brand-ink' : 'fill-card stroke-border') }), _jsx("text", { x: at.x, y: at.y + NODE_NAME_OFFSET, fontSize: NODE_NAME_SIZE, textAnchor: "middle", className: "fill-foreground font-mono", children: node.name }), node.note ? (_jsx("text", { x: at.x, y: at.y + NODE_NOTE_OFFSET, fontSize: NODE_NOTE_SIZE, textAnchor: "middle", className: "fill-muted-foreground font-mono", children: node.note })) : null] }, node.id));
-            })] }));
+    return (
+    // The sideways region, for the reason `LEGIBLE_MIN_WIDTH` states: the drawing
+    // holds a legible floor and a container narrower than it moves under the
+    // drawing rather than the drawing shrinking below what it says.
+    _jsx("div", { "data-slot": "pulse-graph-container", className: "w-full overflow-x-auto", children: _jsxs("svg", { "data-slot": "pulse-graph", "data-unresolved-relations": relations.length - drawn.length, "data-lanes": lanes.length, viewBox: `0 0 ${CANVAS_WIDTH} ${CANVAS_HEIGHT}`, xmlns: "http://www.w3.org/2000/svg", role: decorative ? undefined : 'img', "aria-label": decorative ? undefined : label, "aria-hidden": decorative || undefined, className: cn('h-auto w-full', LEGIBLE_MIN_WIDTH, className), children: [railAt ? (_jsxs("g", { "data-slot": "pulse-graph-rail", children: [_jsx("line", { "data-slot": "pulse-graph-rail-line", x1: railAt.x0, y1: railY, x2: railAt.x1, y2: railY, strokeWidth: RAIL_THICKNESS, className: "stroke-border" }), _jsx("g", { "data-slot": "pulse-graph-marker", className: "prism-ambient-travel prism-ambient-delay-1", style: { '--ambient-travel-distance': `${railAt.x1 - railAt.x0}px` }, children: _jsx("rect", { x: railAt.x0 - 2.5, y: railY - 2.5, width: 5, height: 5, rx: 2.5, className: "fill-brand-ink" }) })] })) : null, drawn.map(({ relation, from, to }) => {
+                    const line = strokeBetween(from.at, to.at, NODE_RADIUS, from.labels, to.labels);
+                    return (_jsxs("g", { "data-slot": "pulse-graph-relation", "data-relation": `${relation.from}-${relation.to}`, "data-carries": relation.carries || undefined, children: [_jsx("line", { x1: line.from.x, y1: line.from.y, x2: line.to.x, y2: line.to.y, strokeWidth: 1, strokeDasharray: relation.indirect ? '4 4' : undefined, className: "stroke-muted-foreground/50 fill-none" }), relation.carries ? flowHead(line) : null] }, `${relation.from}-${relation.to}`));
+                }), nodes.map((node) => {
+                    const at = place(node);
+                    return (_jsxs("g", { "data-slot": "pulse-graph-node", "data-node": node.id, "data-emphasis": node.emphasis || undefined, "data-lane": node.lane, children: [node.emphasis ? (_jsx("circle", { "data-slot": "pulse-graph-halo", cx: at.x, cy: at.y, r: NODE_RADIUS, strokeWidth: 0, className: cn('fill-brand-ink/25', 'prism-ambient-pulse', stagger(node.lane ?? 0)) })) : null, _jsx("circle", { cx: at.x, cy: at.y, r: NODE_RADIUS, strokeWidth: node.emphasis ? 2 : 1, className: cn(node.emphasis ? 'fill-accent stroke-brand-ink' : 'fill-card stroke-border') }), _jsx("text", { x: at.x, y: at.y + NODE_NAME_OFFSET, fontSize: NODE_NAME_SIZE, textAnchor: "middle", className: "fill-foreground font-mono", children: node.name }), node.note ? (_jsx("text", { "data-slot": "pulse-graph-node-note", x: at.x, y: at.y + NODE_NOTE_OFFSET, fontSize: NODE_NOTE_SIZE, textAnchor: "middle", className: "fill-muted-foreground font-mono", children: node.note })) : null] }, node.id));
+                })] }) }));
 }
 export { PulseGraph };