flowfig 0.1.0

package/dist/init.d.ts

@@ -0,0 +1,25 @@
+type Agent = {
+    id: string;
+    name: string;
+    /** Paths whose presence means the repo uses the agent. A trailing `/` means a directory. */
+    marks: string[];
+    /** The file init writes, relative to the repo. */
+    file: string;
+    /** `section` edits a file the user owns; `whole` owns the file. */
+    kind: 'section' | 'whole';
+    /** Text before the marked block in a whole file. */
+    head?: string;
+    note?: string;
+};
+export declare const AGENTS: Agent[];
+/** The ids of the agents that the repo at `dir` already uses. */
+export declare const detect: (dir: string) => string[];
+/** Toggle the agents named by numbers ("1 3" or "1,3"). A number out of range and other text are ignored. */
+export declare function toggle(input: string, selected: Set<string>, count: number): Set<string>;
+/** The picker screen. */
+export declare function renderList(selected: Set<string>, detected: string[], dir: string): string;
+/** The new file text, or `undefined` if the file belongs to the user and init must leave it. `old` is `undefined` for a missing file. */
+export declare function place(a: Agent, old: string | undefined): string | undefined;
+/** Run `flowfig init`. Returns the exit code. */
+export declare function runInit(argv: string[]): Promise<number>;
+export {};

package/dist/init.js

@@ -0,0 +1,171 @@
+// `flowfig init`: write flowfig instructions for the coding agents of a repo. Pure functions where possible, so the tests need no TTY.
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { dirname, join, resolve } from 'node:path';
+import { createInterface } from 'node:readline';
+import { AGENT_TEXT, SKILL_DESCRIPTION } from './guide.js';
+const START = '<!-- flowfig:start -->';
+const END = '<!-- flowfig:end -->';
+export const AGENTS = [
+    {
+        id: 'claude',
+        name: 'Claude Code',
+        marks: ['.claude/', 'CLAUDE.md'],
+        file: '.claude/skills/figure/SKILL.md',
+        kind: 'whole',
+        head: `---\nname: figure\ndescription: ${JSON.stringify(SKILL_DESCRIPTION)}\nuser_invocable: true\n---\n\n`,
+    },
+    { id: 'agents', name: 'AGENTS.md', marks: ['AGENTS.md'], file: 'AGENTS.md', kind: 'section', note: 'Codex, Amp, Jules, ...' },
+    {
+        id: 'cursor',
+        name: 'Cursor',
+        marks: ['.cursor/', '.cursorrules'],
+        file: '.cursor/rules/flowfig.mdc',
+        kind: 'whole',
+        head: '---\ndescription: Draw diagrams and flow figures with flowfig\nalwaysApply: false\n---\n\n',
+    },
+    {
+        id: 'copilot',
+        name: 'GitHub Copilot',
+        marks: ['.github/copilot-instructions.md'],
+        file: '.github/copilot-instructions.md',
+        kind: 'section',
+    },
+    { id: 'gemini', name: 'Gemini CLI', marks: ['GEMINI.md', '.gemini/'], file: 'GEMINI.md', kind: 'section' },
+    { id: 'windsurf', name: 'Windsurf', marks: ['.windsurf/', '.windsurfrules'], file: '.windsurf/rules/flowfig.md', kind: 'whole' },
+    { id: 'kiro', name: 'Kiro', marks: ['.kiro/'], file: '.kiro/steering/flowfig.md', kind: 'whole' },
+];
+/** The ids of the agents that the repo at `dir` already uses. */
+export const detect = (dir) => AGENTS.filter((a) => a.marks.some((m) => existsSync(join(dir, m)))).map((a) => a.id);
+/** Toggle the agents named by numbers ("1 3" or "1,3"). A number out of range and other text are ignored. */
+export function toggle(input, selected, count) {
+    const next = new Set(selected);
+    for (const t of input.split(/[\s,]+/)) {
+        const n = /^\d+$/.test(t) ? Number(t) : 0;
+        const id = n >= 1 && n <= count ? AGENTS[n - 1].id : undefined;
+        if (id)
+            next.has(id) ? next.delete(id) : next.add(id);
+    }
+    return next;
+}
+/** The picker screen. */
+export function renderList(selected, detected, dir) {
+    const rows = AGENTS.map((a, i) => {
+        const found = detected.includes(a.id) ? `(${a.marks.find((m) => existsSync(join(dir, m)))} found)` : '';
+        const dest = a.kind === 'whole' ? a.file : `section in ${a.file}${a.note ? `  (${a.note})` : ''}`;
+        return `  [${selected.has(a.id) ? 'x' : ' '}] ${i + 1}  ${a.name.padEnd(15)} ${found.padEnd(20)} → ${dest}`;
+    });
+    return [
+        'flowfig: pick the coding agents that should draw diagrams in this repo',
+        '',
+        ...rows,
+        'Type numbers to toggle (for example "1 3"), Enter to write, q to quit.',
+    ].join('\n');
+}
+const block = () => `${START}\n${AGENT_TEXT.trimEnd()}\n${END}\n`;
+/** The new file text, or `undefined` if the file belongs to the user and init must leave it. `old` is `undefined` for a missing file. */
+export function place(a, old) {
+    const mine = block();
+    if (a.kind === 'whole')
+        return old === undefined || old.includes(START) ? `${a.head ?? ''}${mine}` : undefined;
+    if (old === undefined)
+        return mine;
+    const s = old.indexOf(START), e = old.indexOf(END, s);
+    if (s !== -1 && e === -1)
+        return undefined; // an open block: the next run would eat the text after START
+    if (s !== -1)
+        return old.slice(0, s) + mine.trimEnd() + old.slice(e + END.length);
+    return old + (old.endsWith('\n\n') ? '' : old.endsWith('\n') ? '\n' : '\n\n') + mine;
+}
+const HINT = 'run with -y or --agents <ids>';
+/** Run `flowfig init`. Returns the exit code. */
+export async function runInit(argv) {
+    const args = [...argv];
+    const flag = (n, ...alias) => [n, ...alias].some((x) => args.includes(x) && args.splice(args.indexOf(x), 1).length > 0);
+    const listAgents = flag('--list-agents'), all = flag('--all-agents'), yes = flag('-y', '--yes'), global = flag('--global'), dry = flag('--dry-run');
+    let ids;
+    const at = args.indexOf('--agents');
+    if (at !== -1)
+        ids = (args.splice(at, 2)[1] ?? '').split(',').filter(Boolean);
+    const bad = args.find((a) => a.startsWith('-'));
+    if (bad)
+        return fail(`init: unknown flag ${bad}`);
+    const dir = resolve(args[0] ?? '.');
+    if (listAgents) {
+        for (const a of AGENTS)
+            console.log(`${a.id.padEnd(9)}${a.name}`);
+        return 0;
+    }
+    const unknown = ids?.find((i) => !AGENTS.some((a) => a.id === i));
+    if (unknown)
+        return fail(`init: unknown agent "${unknown}" (ids: ${AGENTS.map((a) => a.id).join(', ')})`);
+    if (global && ids?.some((i) => i !== 'claude'))
+        return fail('init: --global writes only the claude skill (use --agents claude)');
+    const detected = detect(dir);
+    const auto = new Set(detected.length ? detected : ['agents']);
+    let chosen;
+    if (global)
+        chosen = new Set(['claude']);
+    else if (all)
+        chosen = new Set(AGENTS.map((a) => a.id));
+    else if (ids)
+        chosen = new Set(ids);
+    else if (yes)
+        chosen = auto;
+    else if (!process.stdin.isTTY) {
+        for (const a of AGENTS)
+            console.log(`${a.id.padEnd(9)}${a.name}`);
+        return fail(HINT);
+    }
+    else {
+        const picked = await pick(auto, detected, dir);
+        if (!picked)
+            return 0;
+        chosen = picked;
+    }
+    for (const a of AGENTS.filter((x) => chosen.has(x.id))) {
+        const path = global ? join(homedir(), a.file) : join(dir, a.file);
+        const old = existsSync(path) ? readFileSync(path, 'utf8') : undefined;
+        const next = place(a, old);
+        let status;
+        if (next === undefined)
+            status = old?.includes(START) ? 'skipped (flowfig:start without flowfig:end)' : 'skipped (the file exists and is not from flowfig)';
+        else if (next === old)
+            status = 'unchanged';
+        else {
+            status = old === undefined ? 'created' : 'updated';
+            if (dry)
+                status = `would ${status === 'created' ? 'create' : 'update'}`;
+            else {
+                mkdirSync(dirname(path), { recursive: true });
+                writeFileSync(path, next);
+            }
+        }
+        console.log(`${status.padEnd(9)} ${path}`);
+    }
+    return 0;
+}
+function fail(message) {
+    console.error(message);
+    return 2;
+}
+/** Ask on the terminal. Returns the chosen ids, or `undefined` if the user quits. */
+async function pick(start, detected, dir) {
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    const ask = (q) => new Promise((res) => (rl.once('close', () => res(undefined)), rl.question(q, res)));
+    let selected = start;
+    try {
+        for (;;) {
+            console.log(`\n${renderList(selected, detected, dir)}`);
+            const line = (await ask('> '))?.trim();
+            if (line === undefined || line.toLowerCase() === 'q')
+                return undefined;
+            if (line === '')
+                return selected;
+            selected = toggle(line, selected, AGENTS.length);
+        }
+    }
+    finally {
+        rl.close();
+    }
+}

package/dist/model.d.ts

@@ -0,0 +1,191 @@
+import type { ReactNode } from 'react';
+/** A box in the figure. A box with a `show` in some step becomes a content card: it grows to fit the most any step puts in it. */
+export type FigNode = {
+    /** Name that edges, steps and beats use to point at this box. Must be unique in the figure. */
+    id: string;
+    /** The title in the box. */
+    label: ReactNode;
+    /** A smaller line under the label. */
+    sub?: ReactNode;
+    /** `box` is a rounded box, `decision` a diamond, `store` a database cylinder for data at rest. Default: `box`. */
+    shape?: 'box' | 'decision' | 'store';
+    /** The least number of text lines a content card keeps. The card still grows to fit its content. */
+    lines?: number;
+    /** Width in px. Overrides the width the layout picks. */
+    width?: number;
+};
+/** A frame that lays out its children in a row or a column. Groups can hold groups. */
+export type FigGroup = {
+    /** Name that edges can point at, to reach the group as a whole. */
+    id?: string;
+    /** The title on the frame. A group with a label is drawn as a frame around its children. */
+    label?: ReactNode;
+    /** `row` puts the children side by side, `column` stacks them. Default: `row`. */
+    direction?: 'row' | 'column';
+    /** Space between children in px. Default: 28 for a column. For a row, wide enough for the widest edge label between two children (at least 56). */
+    gap?: number;
+    /** Where children line up across the group's direction. Default: center (columns stretch). */
+    align?: 'start' | 'center' | 'end';
+    /** The boxes and groups inside, in order. */
+    children: (FigNode | FigGroup)[];
+};
+/** An arrow from one box to another. */
+export type FigEdge = {
+    /** Name that steps and beats use to send a packet along this edge. Default: `from->to`. */
+    id?: string;
+    /** The `id` of the box where the edge starts. */
+    from: string;
+    /** The `id` of the box where the edge ends. */
+    to: string;
+    /** Text on the edge, drawn as a small pill. */
+    label?: ReactNode;
+    /** Routes the edge over or under the boxes in between (loops, skip-ahead edges). */
+    around?: 'above' | 'below';
+    /** Draws the edge only while a step uses it. Use it for long edges that would cut across everything. */
+    quiet?: boolean;
+};
+/** One packet on one edge. A string is the edge `id`. */
+export type FigHop = string | {
+    /** The `id` of the edge the packet crosses. */
+    edge: string;
+    /** Runs the packet from the edge's `to` box to its `from` box. Default: `false`. */
+    back?: boolean;
+    /** A small card that rides along with the packet. */
+    data?: ReactNode;
+    /** Marks a message that does not wait for an answer. The rail draws it dashed, with an `async` tag. Default: `false`. */
+    async?: boolean;
+};
+/** One moment of a step. No edges means a pause. */
+export type FigBeat = {
+    /** The packets that cross in this beat. An array runs them at the same time. */
+    edges?: FigHop | FigHop[];
+    /** The line of narration for this beat. */
+    say?: ReactNode;
+    /** Fills the content card of each named box. The card keeps it until the step ends. */
+    show?: Record<string, FigContent>;
+    /** Ids of boxes to highlight for this beat, without a packet or a content card. */
+    light?: string[];
+    /** How long the beat lasts in ms. Default: the time one packet needs to cross an edge (`speed`). */
+    ms?: number;
+};
+/** One line of a content card. */
+export type FigRow = {
+    /** A short colored label at the start of the line. */
+    tag?: string;
+    /** The color of the tag. Default: `blue`. */
+    tone?: FigTone;
+    /** The main text of the line. */
+    text: ReactNode;
+    /** Muted text after the main text. */
+    meta?: ReactNode;
+    /** A mark at the right end of the line, such as a check or "new". */
+    mark?: ReactNode;
+    /** Draws the text in a monospace font. Default: `false`. */
+    mono?: boolean;
+};
+/** The color of a row tag. Each tone is a fixed color. */
+export type FigTone = 'blue' | 'purple' | 'green' | 'orange' | 'gray';
+/** What a content card shows: rows, or anything React can render. */
+export type FigContent = FigRow[] | ReactNode;
+/** One story the figure can tell. The player shows one tab for each step. */
+export type FigStep = {
+    /** The tab title. */
+    label: ReactNode;
+    /** The line shown under the figure while no beat of the step has a `say`. */
+    caption?: ReactNode;
+    /** The beats in play order. A plain hop or hop array is a beat with just edges. */
+    flow: (FigHop | FigHop[] | FigBeat)[];
+    /** Ids of boxes to highlight for the whole step. */
+    nodes?: string[];
+};
+/** Colors for the figure. Each key sets one color, and a color you leave out keeps the built-in value. */
+export type FigTheme = Partial<Record<'accent' | 'fg' | 'muted' | 'bg' | 'surface' | 'border' | 'font', string>>;
+/** The spec of one figure. Give it to `Flow` (React) or to `toSvg` (SVG string). */
+export type FlowProps = {
+    /** The boxes and how they line up. */
+    layout: FigGroup;
+    /** The arrows between the boxes. */
+    edges: FigEdge[];
+    /** The stories the figure tells. With no steps, the figure is a still map. */
+    steps?: FigStep[];
+    /** Colors. Can also be set from CSS with --fig-accent, --fig-bg, ... on `.flowfig`. `font` defaults to `inherit`. */
+    theme?: FigTheme;
+    /** Milliseconds a packet takes to cross one edge. Default: 900. */
+    speed?: number;
+    /** Starts playing when the figure mounts. Default: `true`. Only the React player reads it. */
+    autoplay?: boolean;
+    /** Development aid: run the `flowfig check` rules on what the browser drew, and print the faults with console.warn. Default: `false`. */
+    check?: boolean;
+    /** Draw the steps as a lifeline rail under the map: one row for each message, with its payload. `'only'` draws the rail without the map. Default: `false`. */
+    rail?: boolean | 'only';
+};
+/** A figure file's default export: a title, a source note and the props. */
+export type Figure = {
+    title: string;
+    source?: string;
+    props: FlowProps;
+};
+/** A beat with its hops spelled out: every hop has an edge id and a direction. */
+export type Beat = Omit<FigBeat, 'edges'> & {
+    hops: {
+        edge: string;
+        back: boolean;
+        data?: ReactNode;
+        async?: boolean;
+    }[];
+};
+export declare const toBeat: (b: FigHop | FigHop[] | FigBeat) => Beat;
+/** A React node can be an object too, so a row is told apart by its `text` key. */
+export declare const isRows: (c: FigContent) => c is FigRow[];
+export declare const edgeId: (e: FigEdge) => string;
+export declare const isGroup: (x: FigNode | FigGroup) => x is FigGroup;
+export declare const decisions: (g: FigGroup) => string[];
+/** The width of a content card in px. Both renderers use it, so a figure lays out the same way in each. */
+export declare const CARD_WIDTH = 166;
+/** The player runs 1.25 times faster than the timings in a figure: figure timings are written to be read slowly. The SVG matches it. */
+export declare const BASE_RATE = 1.25;
+/** The height of one text line in a content card, and the padding above and below the lines. */
+export declare const CARD_LINE = 15, CARD_PAD = 6;
+/** The fixed color of each row tone. */
+export declare const TONES: Record<FigTone, string>;
+/** The width of an edge-label pill in px: the label text plus its padding. The rail uses it for a payload, so both look the same. */
+export declare const labelPillW: (label: string) => number;
+/** The width of the `async` tag in px. */
+export declare const ASYNC_TAG_W: number;
+/** The stroke width in px of an edge that a packet crosses now, and of an idle edge. */
+export declare const EDGE_ON = 2, EDGE_OFF = 1.25;
+/** The built-in colors. Both renderers and `flowfig check` read these, so they cannot drift apart. */
+export declare const LIGHT: {
+    accent: string;
+    fg: string;
+    muted: string;
+    bg: string;
+    surface: string;
+    border: string;
+};
+export declare const DARK: {
+    accent: string;
+    fg: string;
+    muted: string;
+    bg: string;
+    surface: string;
+    border: string;
+};
+/** Text on an accent fill: the data chips and a lit edge label. */
+export declare const ON_ACCENT = "#ffffff";
+/** Only text survives outside React: a React element has no string form. */
+export declare const str: (n: unknown) => string;
+export declare const nodes: (g: FigGroup) => FigNode[];
+/** The part counts of a spec, for the line that `flowfig check` prints. An agent copies the line into its reply. */
+export declare const counts: (p: FlowProps) => {
+    boxes: number;
+    groups: number;
+    edges: number;
+    steps: number;
+    messages: number;
+};
+/**
+ * A group's gap. A row's default gap grows to hold the widest label of an edge between two of its children, with 8px each side:
+ * the label sits at the middle of that gap. A gap the author sets stays as set; `flowfig check` reports it if it is too narrow.
+ */
+export declare function groupGap(g: FigGroup, edges: FigEdge[]): number;

package/dist/model.js

@@ -0,0 +1,71 @@
+import { textWidth } from './text.js';
+export const toBeat = (b) => {
+    const isBeat = typeof b === 'object' && !Array.isArray(b) && !('edge' in b);
+    const { edges, ...rest } = isBeat ? b : { edges: b };
+    const hops = edges == null ? [] : Array.isArray(edges) ? edges : [edges];
+    return {
+        ...rest,
+        hops: hops.map((h) => (typeof h === 'string' ? { edge: h, back: false } : { back: false, ...h })),
+    };
+};
+/** A React node can be an object too, so a row is told apart by its `text` key. */
+export const isRows = (c) => Array.isArray(c) && c.every((r) => r != null && typeof r === 'object' && 'text' in r);
+export const edgeId = (e) => e.id ?? `${e.from}->${e.to}`;
+export const isGroup = (x) => 'children' in x;
+export const decisions = (g) => g.children.flatMap((c) => (isGroup(c) ? decisions(c) : c.shape === 'decision' ? [c.id] : []));
+/** The width of a content card in px. Both renderers use it, so a figure lays out the same way in each. */
+export const CARD_WIDTH = 166;
+/** The player runs 1.25 times faster than the timings in a figure: figure timings are written to be read slowly. The SVG matches it. */
+export const BASE_RATE = 1.25;
+/** The height of one text line in a content card, and the padding above and below the lines. */
+export const CARD_LINE = 15, CARD_PAD = 6;
+/** The fixed color of each row tone. */
+export const TONES = {
+    blue: '#3b82f6',
+    purple: '#8b5cf6',
+    green: '#10b981',
+    orange: '#f59e0b',
+    gray: '#8b949e',
+};
+/** The width of an edge-label pill in px: the label text plus its padding. The rail uses it for a payload, so both look the same. */
+export const labelPillW = (label) => textWidth(label, 11, true) + 14;
+/** The width of the `async` tag in px. */
+export const ASYNC_TAG_W = textWidth('ASYNC', 9) + 8;
+/** The stroke width in px of an edge that a packet crosses now, and of an idle edge. */
+export const EDGE_ON = 2, EDGE_OFF = 1.25;
+/** The built-in colors. Both renderers and `flowfig check` read these, so they cannot drift apart. */
+export const LIGHT = { accent: '#0074d9', fg: '#1c1e21', muted: '#606770', bg: '#ffffff', surface: '#f5f7fa', border: '#d0d7de' };
+// The dark accent is darker than a typical dark-mode blue: white text sits on it and needs 4.5:1.
+export const DARK = { accent: '#1f78c8', fg: '#e3e3e3', muted: '#9aa0a6', bg: '#1b1b1d', surface: '#242526', border: '#3a3b3c' };
+/** Text on an accent fill: the data chips and a lit edge label. */
+export const ON_ACCENT = '#ffffff';
+/** Only text survives outside React: a React element has no string form. */
+export const str = (n) => (typeof n === 'string' || typeof n === 'number' ? String(n) : '');
+export const nodes = (g) => g.children.flatMap((c) => (isGroup(c) ? nodes(c) : [c]));
+const labeledGroups = (g) => (g.label ? 1 : 0) + g.children.reduce((n, c) => n + (isGroup(c) ? labeledGroups(c) : 0), 0);
+/** The part counts of a spec, for the line that `flowfig check` prints. An agent copies the line into its reply. */
+export const counts = (p) => ({
+    boxes: nodes(p.layout).length,
+    groups: labeledGroups(p.layout),
+    edges: p.edges.length,
+    steps: (p.steps ?? []).length,
+    messages: (p.steps ?? []).reduce((n, s) => n + s.flow.reduce((m, b) => m + toBeat(b).hops.length, 0), 0),
+});
+/** Every id inside a child: its own id, and the ids of all boxes and groups below it. */
+const idsIn = (c) => (isGroup(c) ? [...(c.id ? [c.id] : []), ...c.children.flatMap(idsIn)] : [c.id]);
+/**
+ * A group's gap. A row's default gap grows to hold the widest label of an edge between two of its children, with 8px each side:
+ * the label sits at the middle of that gap. A gap the author sets stays as set; `flowfig check` reports it if it is too narrow.
+ */
+export function groupGap(g, edges) {
+    if (g.gap != null)
+        return g.gap;
+    if (g.direction === 'column')
+        return 28;
+    const side = new Map();
+    g.children.forEach((c, i) => idsIn(c).forEach((id) => side.set(id, i)));
+    const pills = edges
+        .filter((e) => e.label != null && side.has(e.from) && side.has(e.to) && side.get(e.from) !== side.get(e.to))
+        .map((e) => labelPillW(str(e.label)) + 16);
+    return Math.max(56, ...pills);
+}

package/dist/rail.d.ts

@@ -0,0 +1,82 @@
+import type { Rect } from './geometry.ts';
+import { type FlowProps } from './model.ts';
+export declare const RAIL: {
+    readonly gap: 24;
+    readonly band: 20;
+    readonly cols: 28;
+    readonly phase: 30;
+    readonly row: 34;
+    readonly minCol: 120;
+    readonly pad: 24;
+    readonly bandInset: 8;
+    readonly clear: 12;
+    readonly inset: 6;
+    readonly maxOpen: 10;
+};
+export type RailColumn = {
+    id: string;
+    label: string;
+    x: number;
+    w: number;
+};
+export type RailBand = {
+    id: string;
+    label: string;
+    rect: Rect;
+};
+export type RailRow = {
+    kind: 'phase';
+    step: number;
+    label: string;
+    messages: number;
+    /** The divider: it starts after the open label or after the folded label, and ends before the counter. */
+    line: {
+        open: number;
+        folded: number;
+        end: number;
+    };
+} | {
+    kind: 'message';
+    step: number;
+    beat: number;
+    n: number;
+    edge: string;
+    from: number;
+    to: number;
+    text: string;
+    async: boolean;
+    pill?: {
+        x: number;
+        w: number;
+    };
+    group?: number;
+};
+export type RailState = {
+    y: number;
+    shown: boolean;
+};
+export type Rail = {
+    width: number;
+    /** The y where the first row starts: below the band-label line (if a band exists) and the column labels. */
+    head: number;
+    height: number;
+    columns: RailColumn[];
+    bands: RailBand[];
+    rows: RailRow[];
+    groups: {
+        step: number;
+        rows: number[];
+    }[];
+    total: number;
+    folds: boolean;
+    states: RailState[][];
+};
+/** The folded phase text. Both renderers and the layout use it, so the measured width matches the drawn width. */
+export declare const foldedLabel: (row: {
+    label: string;
+    messages: number;
+}) => string;
+export declare function railState(rail: Rail, step: number): RailState[];
+export declare function layoutRail(fig: FlowProps, mapWidth: number): Rail | null;
+/** A parallel band around its rows, relative to the y of its first row: RAIL.inset around every arrow and pill it holds. */
+export declare function groupBox(rail: Rail, g: Rail['groups'][number]): Rect;