@cardstack/boxel-cli 0.10.0 → 0.10.1-unstable.0

package/bundled-realms/pretui/components/gradient-editor.md

@@ -0,0 +1,43 @@
+## What it is
+
+A gradient editor: a bar of colour stops you can add, move, recolour and remove, with an explicit interpolation colour space.
+
+## The contract
+
+```
+@value?, @defaultValue? — the gradient spec
+@disabled?
+@lockInterpolation?     — hide the interpolation-space control
+@onValueChange?
+
+<:bar> — replaces the built-in stop bar; yields a GradientBarApi
+```
+
+**The interpolation space is part of the value, not a rendering detail.** The same stops interpolated through sRGB and through OKLCH produce visibly different gradients — sRGB goes grey through the middle of a complementary pair, OKLCH does not — so a gradient that does not record its space is a gradient that cannot be reproduced.
+
+**`@lockInterpolation` hides the control, not the property.** A product that has decided on one space stops offering the choice; the value still carries it.
+
+**`<:bar>` yields an API rather than expecting the caller to reimplement stop maths.**
+
+## Prior art
+
+**figui3's fill picker**, and **CSS Images 4** for the interpolation model.
+
+Where Pretui is better: the interpolation space is first-class. Most gradient editors emit stops and let CSS decide, which means the preview and the shipped gradient can differ; carrying the space through makes what you see what you get.
+
+Where it is thinner: linear gradients only in the stop model — no radial or conic authoring — no easing or midpoint hints between stops, which CSS supports, and no gradient library or presets.
+
+## Accessibility
+
+- **Each stop is a **ColorStopEditor**, which carries its own trigger, name and remove control** — so the bar is a set of named controls rather than a canvas of draggable dots.
+- **The gradient preview is presentation.** The value lives in the stops, each of which is separately reachable and announced.
+- **Editing a gradient without sight is possible but not pleasant**, and honesty matters here: the component gives every stop a keyboard path, and the _result_ is still a visual artifact that cannot be perceived from its parts.
+- **`@lockInterpolation` removes a control**, which reduces what a reader has to travel through when the choice is not theirs to make.
+
+## Theming
+
+`--pretui-gradient-preview` and `--pretui-gradient-preview-h` (the preview band and its height), `--pretui-stop-color` and `--pretui-stop-x` (each stop's swatch and position), over the shared `--pretui-checker` and the colour module's slider tokens.
+
+Keeping the preview height as its own token lets a theme give a gradient editor a taller band than a color field's swatch without either component knowing about the other — the preview is the thing being edited here, and it deserves the room.
+
+The styles sit in `@layer PretComponent`, so a caller's unlayered CSS overrides them without a more specific selector.

package/bundled-realms/pretui/components/gradient-editor.usage.gts

@@ -0,0 +1,69 @@
+// Pretui — GradientEditor usage page.
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { DEFAULT_GRADIENT } from '../color-engine';
+import type { GradientSpec } from '../color-engine';
+import { FreestyleUsage } from './freestyle-usage';
+import { GradientEditor } from './gradient-editor';
+
+// ── GradientEditor ───────────────────────────────────────────────────────
+class GradientEditorUsage extends Component {
+  @tracked spec: GradientSpec = DEFAULT_GRADIENT;
+  @tracked lockInterpolation = false;
+  setSpec = (next: GradientSpec) => (this.spec = next);
+  setLock = (v: boolean) => (this.lockInterpolation = v);
+  get css() {
+    return this.spec.stops.length ? this.spec.interpolation : '';
+  }
+  get usage() {
+    return '<GradientEditor @value={{this.spec}} @onValueChange={{this.setSpec}} />';
+  }
+  <template>
+    <FreestyleUsage
+      @name='GradientEditor'
+      @description="Gradient type, angle and centre, a stop list with add / distribute / flip / rotate, and — the part most pickers miss — the INTERPOLATION colour space. Switch it from OKLab to sRGB and watch the middle go muddy; that difference is exactly why OKLCH matters. Click the bar to insert a stop: the new stop SAMPLES the ramp at that point, so insertion is a no-op on what is rendered."
+      @source={{this.usage}}
+    >
+      <:example>
+        <GradientEditor
+          @value={{this.spec}}
+          @lockInterpolation={{this.lockInterpolation}}
+          @onValueChange={{this.setSpec}}
+        />
+      </:example>
+      <:api as |Args|>
+        <Args.Object
+          @name='value'
+          @description='The gradient spec: kind, angle, centre, interpolation space, hue path, and stops.'
+          @value={{this.spec}}
+        />
+        <Args.Bool
+          @name='lockInterpolation'
+          @defaultValue={{false}}
+          @description='Hide the interpolation-space control.'
+          @value={{this.lockInterpolation}}
+          @onInput={{this.setLock}}
+        />
+        <Args.Action
+          @name='onValueChange'
+          @description='Receives the whole spec on every change.'
+        />
+      </:api>
+      <:description>
+        <p>The
+          <code>&lt;:bar&gt;</code>
+          block is the seam with the design-tools port: this component owns the
+          model, the stop colours and the interpolation space; a
+          <code>GradientInput</code>
+          rendered in that block owns stop positions and dragging. Until one
+          lands, the built-in bar is the default.</p>
+        <p>Stops are sorted only at paint time, so a stop dragged past its
+          neighbour keeps its identity and its selection.</p>
+      </:description>
+    </FreestyleUsage>
+  </template>
+}
+
+export const DEMOS_GRADIENT_EDITOR: Record<string, unknown> = {
+  GradientEditor: GradientEditorUsage,
+};

package/bundled-realms/pretui/components/graph-layout.md

@@ -0,0 +1,54 @@
+## What it is
+
+**A deterministic layered layout for a directed graph.** Give it nodes and edges, and it returns a position for every node, in rows or columns that flow in one direction, with the edge crossings reduced. It is what turns a flow, a dependency graph or an org chart with no stored positions into a readable picture for **NodeCanvas**.
+
+It is a function, not a component: `graphLayout(nodes, edges, options)` in `surfaces-canvas-layout.ts`. It draws nothing. Use it in a getter and hand the placements to NodeCanvas.
+
+## The contract
+
+```
+graphLayout(nodes: LayoutNode[], edges: LayoutEdge[], options?: GraphLayoutOptions): GraphLayoutResult
+
+options   direction ('right' | 'down' | 'left' | 'up'; default 'right')
+          nodeWidth (200), nodeHeight (96), rankGap (110), nodeGap (28)
+          originX, originY (0), passes (8)
+result    placements, layers, reversed, crossingsBefore, crossingsAfter, width, height
+```
+
+**The stages.** It is the classic layered, Sugiyama-style layout:
+
+1. **Break cycles.** A cycle is broken by reversing an edge, and `reversed` reports which ones, so the caller can draw them differently. Nothing hangs.
+2. **Assign layers by longest path.** A node waits for its latest predecessor.
+3. **Order each layer.** Barycenter sweeps, `passes` of them, reduce crossings. The lowest-crossing ordering seen, the input order included, is the one kept. So more passes are slower, never worse, and the result never has more crossings than the input.
+4. **Place the nodes.** Each layer gets coordinates from each node's own width and height, with `rankGap` between layers and `nodeGap` between siblings.
+
+**It is pure and deterministic.** There is no `Math.random()`, no `Date.now()` and no mutation of the input. The same graph gives byte-identical output, and ties are decided by input order. That makes it safe to call from a getter the indexer may evaluate.
+
+**It is forgiving.** A repeated node id is kept once (the first wins). Self-loops and edges naming an unknown node are ignored for geometry. Isolated nodes are placed, not dropped. A deep chain does not overflow the stack, because the depth-first search is iterative.
+
+`direction` rotates the whole layout without changing its topology. `handleSidesFor(direction)` gives the matching source and target handle sides, and `countCrossings` is exported for measuring.
+
+## Prior art
+
+**dagre** (and **@dagrejs/dagre**) is the layout React Flow's docs point to: the same Sugiyama stages, a mutable graph object, and `rankdir`, `ranksep` and `nodesep` options. **ELK** (elkjs) is far more capable (ports, compound nodes, orthogonal routing) and far heavier, and it runs in a worker. **d3-dag** offers several layering and ordering strategies.
+
+Where Pretui is better: **no dependency and no mutable graph object.** It is one pure function that is safe in a realm getter. **Cycles are reported**, not silently reversed. **The output is reproducible byte for byte**, which dagre does not promise across versions.
+
+Where it is thinner: **no compound or grouped nodes**, **no edge routing** (NodeCanvas draws the edges), **no ports**, and **no incremental layout**: moving one node lays out the whole graph again. Use ELK when you need those.
+
+## Accessibility
+
+Not applicable to the function itself: it computes positions and renders nothing. What it enables is the reading order. `layers` gives the nodes in flow order, layer by layer, which is the order to present them in for a non-visual reading of the graph, for example in NodeCanvas's outline mode. The visual layout and that reading order then agree.
+
+## Theming
+
+None. Spacing is set by `rankGap`, `nodeGap` and the node sizes, which are options, not tokens. The canvas that draws the result reads its own tokens.
+
+## React ecosystem
+
+| Agent types                             | Give them                                              |
+| --------------------------------------- | ------------------------------------------------------ |
+| `dagre.layout(g)` with `rankdir: 'LR'`  | `graphLayout(nodes, edges, { direction: 'right' })`    |
+| dagre `ranksep` / `nodesep`             | `rankGap` / `nodeGap`                                  |
+| React Flow `getLayoutedElements` recipe | `graphLayout`, then pass placements to **NodeCanvas**  |
+| elkjs `layered` algorithm               | `graphLayout` for plain DAGs; ELK for ports and groups |

package/bundled-realms/pretui/components/graph-layout.usage.gts

@@ -0,0 +1,343 @@
+// Pretui — GraphLayout usage page.
+import { SUMMARIES } from '../internal/surfaces-canvas-fixtures';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import type { CanvasEdge, CanvasNode } from '../internal/surfaces-canvas';
+import { graphLayout } from '../surfaces-canvas-layout';
+import type { GraphDirection } from '../surfaces-canvas-layout';
+import { addEdge, applyEdgeChanges, applyNodeChanges } from '../surfaces/canvas/index.js';
+import { FreestyleUsage } from './freestyle-usage';
+import { NodeCanvas } from './node-canvas';
+import type { CanvasEdgeType } from './node-canvas';
+import { Token } from './token';
+
+
+// ── GraphLayout ──────────────────────────────────────────────────────────
+// The auto-layout page. Its fixture carries NO POSITIONS AT ALL — that is
+// the whole demonstration: `@autoLayout` is what puts the nodes anywhere.
+//
+// The graph is a release pipeline with a deliberate CYCLE in it
+// ("regressions" feeds back into "build"), because a cycle is what every
+// naive layered layout hangs on. `graphLayout` breaks it, reports which
+// edge it reversed, and the page prints that alongside the crossing counts
+// so the pass is legible rather than magic.
+
+interface StageSpec {
+  id: string;
+  title: string;
+  kind: string;
+  meta: string;
+  status: string;
+}
+
+const PIPELINE: StageSpec[] = [
+  { id: 'commit', title: 'Commit', kind: 'SRC', meta: 'main', status: 'merged' },
+  { id: 'lint', title: 'Lint', kind: 'JOB-01', meta: '38s', status: 'passing' },
+  { id: 'types', title: 'Typecheck', kind: 'JOB-02', meta: '1m 12s', status: 'passing' },
+  { id: 'build', title: 'Build', kind: 'JOB-03', meta: '4m 06s', status: 'passing' },
+  { id: 'unit', title: 'Unit tests', kind: 'JOB-04', meta: '2m 41s', status: 'passing' },
+  { id: 'browser', title: 'Browser tests', kind: 'JOB-05', meta: '9m 18s', status: 'flaky' },
+  { id: 'regressions', title: 'Regressions', kind: 'JOB-06', meta: '3 open', status: 'held' },
+  { id: 'stage', title: 'Staging', kind: 'ENV-1', meta: 'auto', status: 'in transit' },
+  { id: 'canary', title: 'Canary', kind: 'ENV-2', meta: '5% traffic', status: 'watching' },
+  { id: 'release', title: 'Release', kind: 'ENV-3', meta: 'manual gate', status: 'blocked' },
+];
+
+const PIPELINE_EDGES: CanvasEdge[] = [
+  { id: 'p1', source: 'commit', target: 'lint' },
+  { id: 'p2', source: 'commit', target: 'types' },
+  { id: 'p3', source: 'lint', target: 'build' },
+  { id: 'p4', source: 'types', target: 'build' },
+  { id: 'p5', source: 'build', target: 'unit' },
+  { id: 'p6', source: 'build', target: 'browser' },
+  { id: 'p7', source: 'browser', target: 'regressions', label: 'on failure' },
+  { id: 'p8', source: 'unit', target: 'stage' },
+  { id: 'p9', source: 'browser', target: 'stage' },
+  { id: 'p10', source: 'stage', target: 'canary', label: 'soak 30m' },
+  { id: 'p11', source: 'canary', target: 'release', label: 'gate' },
+  // The back edge. Without cycle-breaking this is where a layered layout
+  // spins forever.
+  { id: 'p12', source: 'regressions', target: 'build', label: 'retry' },
+];
+
+// No `position` anywhere: the layout supplies every coordinate.
+const PIPELINE_NODES: CanvasNode[] = PIPELINE.map((spec) => ({
+  id: spec.id,
+  position: { x: 0, y: 0 },
+  data: {
+    title: spec.title,
+    kind: spec.kind,
+    meta: spec.meta,
+    status: spec.status,
+  },
+}));
+
+const DIRECTIONS = ['right', 'down', 'left', 'up'];
+const EDGE_TYPES = ['bezier', 'smoothstep', 'step', 'straight', 'simplebezier'];
+const ARROWHEADS = ['closed', 'open', 'none'];
+
+class GraphLayoutUsage extends Component {
+  directionOptions = DIRECTIONS;
+  edgeTypeOptions = EDGE_TYPES;
+  arrowheadOptions = ARROWHEADS;
+  summaryOptions = SUMMARIES;
+
+  @tracked label = 'Release pipeline';
+  @tracked direction = 'right';
+  @tracked edgeType = 'smoothstep';
+  @tracked arrowheads = 'closed';
+  @tracked animatedEdges = false;
+  @tracked marquee = false;
+  @tracked snapToGrid = false;
+  @tracked rankGap = 110;
+  @tracked nodeGap = 28;
+  @tracked summary = 'visible';
+
+  @tracked nodes: CanvasNode[] = PIPELINE_NODES.map((node) => ({ ...node }));
+  @tracked edges: CanvasEdge[] = PIPELINE_EDGES.map((edge) => ({ ...edge }));
+
+  onNodesChange = (changes: unknown[]) => {
+    this.nodes = applyNodeChanges(changes, this.nodes);
+  };
+  onEdgesChange = (changes: unknown[]) => {
+    this.edges = applyEdgeChanges(changes, this.edges);
+  };
+  onConnect = (connection: unknown) => {
+    this.edges = addEdge(connection, this.edges);
+  };
+
+  setLabel = (v: string) => (this.label = v);
+  setDirection = (v: string) => (this.direction = v);
+  setEdgeType = (v: string) => (this.edgeType = v);
+  setArrowheads = (v: string) => (this.arrowheads = v);
+  setAnimatedEdges = (v: boolean) => (this.animatedEdges = v);
+  setMarquee = (v: boolean) => (this.marquee = v);
+  setSnapToGrid = (v: boolean) => (this.snapToGrid = v);
+  setRankGap = (v: number | null) => (this.rankGap = v ?? 110);
+  setNodeGap = (v: number | null) => (this.nodeGap = v ?? 28);
+  setSummary = (v: string) => (this.summary = v);
+
+  get directionVal() {
+    return this.direction as GraphDirection;
+  }
+  get edgeTypeVal() {
+    return this.edgeType as CanvasEdgeType;
+  }
+  get arrowheadsVal() {
+    return this.arrowheads as 'closed' | 'open' | 'none';
+  }
+  get summaryVal() {
+    return this.summary as 'sr-only' | 'visible' | 'off';
+  }
+
+  /**
+   * The same pure function the canvas runs, called directly so the page can
+   * SHOW its work. Nothing here touches the engine.
+   */
+  get report() {
+    let result = graphLayout(this.nodes, this.edges, {
+      direction: this.directionVal,
+      rankGap: this.rankGap,
+      nodeGap: this.nodeGap,
+    });
+    let names = new Map(
+      this.nodes.map((node) => [node.id, String(node.data?.title ?? node.id)]),
+    );
+    return {
+      layerCount: result.layers.length,
+      crossingsBefore: result.crossingsBefore,
+      crossingsAfter: result.crossingsAfter,
+      reversed: result.reversed.map((index) => {
+        let edge = this.edges[index];
+        if (!edge) {
+          return 'unknown';
+        }
+        return `${names.get(edge.source) ?? edge.source} to ${
+          names.get(edge.target) ?? edge.target
+        }`;
+      }),
+      hasReversed: result.reversed.length > 0,
+    };
+  }
+
+  get usage() {
+    let bits = [
+      `@label='${this.label}'`,
+      '@nodes={{this.nodes}}',
+      '@edges={{this.edges}}',
+      `@autoLayout='${this.direction}'`,
+    ];
+    if (this.edgeType !== 'bezier') bits.push(`@edgeType='${this.edgeType}'`);
+    if (this.arrowheads !== 'closed') {
+      bits.push(`@arrowheads='${this.arrowheads}'`);
+    }
+    if (this.animatedEdges) bits.push('@animatedEdges={{true}}');
+    if (this.marquee) bits.push('@marquee={{true}}');
+    if (this.snapToGrid) bits.push('@snapToGrid={{true}}');
+    if (this.rankGap !== 110) bits.push(`@rankGap={{${this.rankGap}}}`);
+    if (this.nodeGap !== 28) bits.push(`@nodeGap={{${this.nodeGap}}}`);
+    if (this.summary !== 'sr-only') bits.push(`@summary='${this.summary}'`);
+    return `<NodeCanvas\n  ${bits.join('\n  ')}\n/>`;
+  }
+
+  <template>
+    <FreestyleUsage
+      @name='NodeCanvas · auto-layout, edges and the outline'
+      @description="The same NodeCanvas, with the three things a node graph needs and xyflow does not ship. This page is CONTROLLED and auto-laid-out, so the layout owns every position and dragging is off — that combination is the one where a dragged node would snap straight back, so NodeCanvas turns dragging off rather than shipping the snap. Drop @onNodesChange and the same markup lays out once and then drags freely, with the outline's Tidy layout control to put it back. AUTO-LAYOUT: the fixture below carries no coordinates at all — a layered pass (cycle-break, longest-path layering, barycenter ordering, median straightening) places every node, deterministically, with no Math.random anywhere, because the indexer forbids it and because two runs of one graph should not differ. React Flow's own layouting example imports dagre for this; dagre's ranker calls Math.random. EDGES: routing is a knob, and arrowheads DRAW — the port emits marker-end and ships no marker definitions at all, so markerEnd has always been silently dead. THE OUTLINE: the text mirror is now operable. Every node is a button that selects and focuses it in the picture, each edge is stated in both directions with its label, and a keyboard user can draw a NEW edge — the gesture React Flow has no answer for. Set the outline visible below and try it without touching the mouse."
+      @source={{this.usage}}
+    >
+      <:example>
+        <NodeCanvas
+          @label={{this.label}}
+          @nodes={{this.nodes}}
+          @edges={{this.edges}}
+          @onNodesChange={{this.onNodesChange}}
+          @onEdgesChange={{this.onEdgesChange}}
+          @onConnect={{this.onConnect}}
+          @autoLayout={{this.directionVal}}
+          @rankGap={{this.rankGap}}
+          @nodeGap={{this.nodeGap}}
+          @edgeType={{this.edgeTypeVal}}
+          @arrowheads={{this.arrowheadsVal}}
+          @animatedEdges={{this.animatedEdges}}
+          @marquee={{this.marquee}}
+          @snapToGrid={{this.snapToGrid}}
+          @summary={{this.summaryVal}}
+          @height='30rem'
+        >
+          <:toolbar>
+            <span class='canvas-bar-title'>{{this.label}}</span>
+            <Token @value='10 stages' />
+          </:toolbar>
+        </NodeCanvas>
+
+        <dl class='layout-report'>
+          <dt>Layers</dt>
+          <dd>{{this.report.layerCount}}</dd>
+          <dt>Crossings before ordering</dt>
+          <dd>{{this.report.crossingsBefore}}</dd>
+          <dt>Crossings after ordering</dt>
+          <dd>{{this.report.crossingsAfter}}</dd>
+          <dt>Reversed to break a cycle</dt>
+          <dd>
+            {{#if this.report.hasReversed}}
+              {{#each this.report.reversed key='@index' as |pair|}}
+                <span class='layout-reversed'>{{pair}}</span>
+              {{/each}}
+            {{else}}
+              none — the graph is acyclic
+            {{/if}}
+          </dd>
+        </dl>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='label'
+          @required={{true}}
+          @value={{this.label}}
+          @onInput={{this.setLabel}}
+          @description='Accessible name for the canvas, and the name the outline gives itself.'
+        />
+        <Args.String
+          @name='autoLayout'
+          @options={{this.directionOptions}}
+          @value={{this.direction}}
+          @onInput={{this.setDirection}}
+          @description='Run the layered layout and place every node, ignoring the position on the input nodes. Omit it for free positioning. It also pins the handle sides to match the direction, so edges leave the face they are drawn on.'
+        />
+        <Args.Number
+          @name='rankGap'
+          @min={{40}}
+          @max={{260}}
+          @step={{10}}
+          @value={{this.rankGap}}
+          @defaultValue={{110}}
+          @onInput={{this.setRankGap}}
+          @description='Space between layers, along the flow axis, in graph units.'
+        />
+        <Args.Number
+          @name='nodeGap'
+          @min={{8}}
+          @max={{120}}
+          @step={{4}}
+          @value={{this.nodeGap}}
+          @defaultValue={{28}}
+          @onInput={{this.setNodeGap}}
+          @description='Space between siblings within a layer, across the flow axis.'
+        />
+        <Args.String
+          @name='edgeType'
+          @options={{this.edgeTypeOptions}}
+          @value={{this.edgeType}}
+          @defaultValue='bezier'
+          @onInput={{this.setEdgeType}}
+          @description='Routing for every edge that sets no type of its own, and for the line drawn WHILE connecting — the engine otherwise leaves that a bezier however the settled edges look.'
+        />
+        <Args.String
+          @name='arrowheads'
+          @options={{this.arrowheadOptions}}
+          @value={{this.arrowheads}}
+          @defaultValue='closed'
+          @onInput={{this.setArrowheads}}
+          @description='Arrowheads on every edge. On by default: a directed graph that does not say which way its edges run is not communicating. Requires the marker definitions this kit injects, which the engine references and never ships.'
+        />
+        <Args.Bool
+          @name='animatedEdges'
+          @value={{this.animatedEdges}}
+          @defaultValue={{false}}
+          @onInput={{this.setAnimatedEdges}}
+          @description='Dash and travel every edge that sets no animated flag of its own. Stops dead, at the END state, under prefers-reduced-motion.'
+        />
+        <Args.Bool
+          @name='marquee'
+          @value={{this.marquee}}
+          @defaultValue={{false}}
+          @onInput={{this.setMarquee}}
+          @description='Drag on empty canvas to rubber-band select instead of panning. Partial selection: a node only has to be touched by the band, not enclosed by it.'
+        />
+        <Args.Bool
+          @name='snapToGrid'
+          @value={{this.snapToGrid}}
+          @defaultValue={{false}}
+          @onInput={{this.setSnapToGrid}}
+          @description='Snap dragged nodes to the background grid — the one that is actually drawn, not a second invisible one.'
+        />
+        <Args.String
+          @name='summary'
+          @options={{this.summaryOptions}}
+          @value={{this.summary}}
+          @defaultValue='sr-only'
+          @onInput={{this.setSummary}}
+          @description='Where the graph outline goes. sr-only is clipped until focus enters it and then unclips, because a hidden region holding real buttons would otherwise strand a keyboard user. visible keeps it as a caption strip. off removes it, and removes the only keyboard route to a connection with it.'
+        />
+      </:api>
+    </FreestyleUsage>
+
+    <style scoped>
+      .layout-report {
+        display: grid;
+        grid-template-columns: auto minmax(0, 1fr);
+        gap: 2px var(--space-4, 11px);
+        margin: var(--space-4, 11px) 0 0;
+        font-size: var(--text-ui-sm, 11.5px);
+      }
+
+      .layout-report dt {
+        color: var(--muted-foreground);
+      }
+
+      .layout-report dd {
+        margin: 0;
+        font-family: var(--font-mono);
+      }
+
+      .layout-reversed {
+        margin-inline-end: var(--space-2, 5px);
+      }
+    </style>
+  </template>
+}
+
+export const DEMOS_GRAPH_LAYOUT: Record<string, unknown> = {
+  GraphLayout: GraphLayoutUsage,
+};