@draftably/editor 0.4.0 → 0.6.0

package/dist/types/src/engines/routing-engine.d.ts

@@ -0,0 +1,20 @@
+import { compute } from './routing/compute.ts';
+import { conflicts, parallelConflicts, type Line } from './routing/conflicts.ts';
+import { blocked } from './routing/geometry.ts';
+import { port } from './routing/ports.ts';
+import { settings } from './routing/settings.ts';
+export declare const RouteLab: {
+    compute: typeof compute;
+    settings: typeof settings;
+    defaults: import("./routing/types.ts").RoutingSettings;
+    port: typeof port;
+    blocked: typeof blocked;
+    conflicts: typeof conflicts;
+    parallelConflicts: typeof parallelConflicts;
+    /** Crossings and shared run length of a set of routes, each counted against the ones before it. */
+    metrics: (routes: Line[]) => {
+        crossings: number;
+        shared: number;
+    };
+};
+export type { PriorRoute, Route, RouteEdgeInput, RouteGroupInput, RouteInput, RouteMetrics, RouteNodeInput, RoutingOptions, RoutingReport, RoutingResult, } from './routing/types.ts';

package/dist/types/src/engines/sculpt-engine.d.ts

@@ -0,0 +1,87 @@
+import type { Diagram, LayoutSettings, NodeGeometry, Point, Rect } from '../model/types.ts';
+import type { LayoutMetrics, LayoutOptions, LayoutReport, TraceFrame } from './layout-engine.ts';
+export type BrushMode = 'tidy' | 'flow' | 'space' | 'restore' | 'protect';
+export interface BrushSettings {
+    radius: number;
+    strength: number;
+    softness: number;
+    step: number;
+    mode: BrushMode;
+    holdRestored: boolean;
+}
+export interface DabOptions extends Partial<BrushSettings> {
+    point?: Point;
+    worldRadius?: number;
+    reference?: NodeGeometry | null;
+    protectedIds?: string[];
+}
+export interface DabResult {
+    document: Diagram;
+    weights: Record<string, number>;
+    locked: string[];
+    moved: string[];
+    maxDisplacement: number;
+    blocked: boolean;
+    attenuation?: number;
+    mode: BrushMode;
+}
+export interface TimelineFrame {
+    nodes: NodeGeometry;
+    iteration: number;
+    phase: string;
+    metrics: LayoutMetrics;
+    index: number;
+    moved: number;
+    travel: number;
+    cumulative: number;
+    maxMove: number;
+}
+export interface TimelineBookmark {
+    index: number;
+    title: string;
+}
+export interface Timeline {
+    schemaVersion: 1;
+    kind: 'diagram-studio-journey';
+    baseline: Diagram;
+    settings: LayoutSettings;
+    execution: Record<string, unknown>;
+    report: LayoutReport;
+    frames: TimelineFrame[];
+    finalDocument: Diagram;
+    bookmarks: TimelineBookmark[];
+    createdAt: string;
+    /** Added by the app: routes in effect when the timeline was recorded. */
+    routePrior?: unknown[];
+}
+declare function settings(input?: Partial<BrushSettings>): BrushSettings;
+/** How strongly a brush of radius `r` acts at distance `d`: 1 in the core, eased to 0 at the rim. */
+declare function weight(d: number, r: number, softness?: number): number;
+declare function rectDistance(p: Point, r: Rect): number;
+/** The brush weight of each visible shape it reaches, and the shapes it reaches but may not move. */
+declare function field(doc: Diagram, point: Point, radius: number, softness?: number, protectedIds?: string[]): {
+    weights: Record<string, number>;
+    locked: string[];
+};
+declare function violationPairs(doc: Diagram, nodes: NodeGeometry): Map<string, number>;
+declare function noWorse(doc: Diagram, before: NodeGeometry, after: NodeGeometry): boolean;
+/** One brush dab at `options.point`: moves the shapes under it a step toward the brush's goal. */
+declare function dab(input: Diagram, options?: DabOptions): DabResult;
+declare function summarizeFrames(frames: TraceFrame[]): TimelineFrame[];
+/** A rebuild recorded as frames, from the given arrangement to the computed finish. */
+declare function journey(input: Diagram, options?: LayoutOptions): Promise<Timeline>;
+declare function lookahead(frames: TimelineFrame[], index: number, pixels?: number, scale?: number): number;
+export declare const SculptLab: {
+    defaults: BrushSettings;
+    settings: typeof settings;
+    weight: typeof weight;
+    rectDistance: typeof rectDistance;
+    field: typeof field;
+    dab: typeof dab;
+    journey: typeof journey;
+    lookahead: typeof lookahead;
+    summarizeFrames: typeof summarizeFrames;
+    violationPairs: typeof violationPairs;
+    noWorse: typeof noWorse;
+};
+export {};

package/dist/types/src/lib/engine-tasks.d.ts

@@ -1,7 +1,7 @@
-import { type CandidateResult, type CandidateSpec, type ComparisonConfig } from '../engines/explorer-engine.js';
-import { type LayoutOptions, type LayoutResult } from '../engines/layout-engine.js';
-import { type Timeline } from '../engines/sculpt-engine.js';
-import { type RouteInput, type RoutingOptions, type RoutingResult } from '../engines/routing-engine.js';
+import { type CandidateResult, type CandidateSpec, type ComparisonConfig } from '../engines/explorer-engine';
+import { type LayoutOptions, type LayoutResult } from '../engines/layout-engine';
+import { type Timeline } from '../engines/sculpt-engine';
+import { type RouteInput, type RoutingOptions, type RoutingResult } from '../engines/routing-engine';
 import { type Scene } from '../dsl/compile';
 import { type ViewState } from '../dsl/project';
 import type { Diagram } from '../model/types';

package/dist/types/src/model/appearance.d.ts

@@ -9,7 +9,8 @@ import type { Footnote } from './footnote';
 import type { Note } from './note';
 import { type FontRole, type TypeProfile } from './fonts';
 import type { FileConfig } from './link';
-export type ThemeId = 'drafting' | 'fieldnotes' | 'signal' | 'ink' | 'blueprint';
+import type { MessageKind } from './markers';
+export type ThemeId = 'drafting' | 'fieldnotes' | 'signal' | 'ink' | 'blueprint' | 'drafting-dark';
 export declare const THEME_IDS: ThemeId[];
 export declare const DEFAULT_THEME: ThemeId;
 /** Shade stops. Lower numbers are lighter and higher numbers darker, in every theme. */
@@ -101,10 +102,18 @@ export interface Heading {
 /** The connection styles a `legend line` row can explain. */
 export declare const LEGEND_LINES: readonly ["dashed", "solid"];
 export type LegendLine = (typeof LEGEND_LINES)[number];
-/** One row of the key: a color swatch (`family`), or a short connection (`line`). */
+/**
+ * One row of the key: a color swatch (`family`), a short connection (`line`), or the mark of a
+ * kind of sequence message (`message`), which the drawing adds for each kind it uses.
+ */
 export interface LegendEntry {
     family?: string;
     line?: LegendLine;
+    message?: MessageKind;
+    /** An activation bar, which a sequence with `activations=on` adds a row for. */
+    activation?: true;
+    /** Words with no swatch: a sequence's line that its rows show order, not time. */
+    caption?: true;
     /** Shade of the swatch; nodes' default when omitted. */
     shade?: Shade;
     label: string;
@@ -154,6 +163,13 @@ interface Preset {
     hues?: Partial<Record<string, [number, number]>>;
 }
 export declare const PRESETS: Record<ThemeId, Preset>;
+/**
+ * The appearance to draw on a page of this scheme. The default theme follows the page, with or
+ * without a `theme drafting` line and its size and font overrides: dark draws it as
+ * `drafting-dark`. Another named theme, a `theme-color` line or a color override on the `theme`
+ * line keeps the file's colors on every page.
+ */
+export declare function forScheme(appearance: DiagramAppearance, dark: boolean): DiagramAppearance;
 /** `a` moved toward `b` by `t` (0–1), in sRGB. */
 export declare function mixColors(a: string, b: string, t: number): string;
 export declare function contrast(a: string, b: string): number;

package/dist/types/src/model/edits.d.ts

@@ -1,4 +1,5 @@
 import { emptyDiagram } from './document';
+import type { MessageKind } from './markers';
 import type { ContainerLayout, Diagram, DiagramEdge, DiagramGroup, DiagramNode, EdgeLayout, IntentPlacement, IntentRole, NodeLayout, NodeStyle, Point, PortSide, Rect, Side } from './types';
 export declare function moveObject(doc: Diagram, id: string, dx: number, dy: number, manual?: boolean): void;
 /** Bounds of a container's direct children, including shape labels. */
@@ -99,6 +100,24 @@ export declare function setLabelMode(doc: Diagram, id: string, mode: NonNullable
 export declare function setParent(doc: Diagram, id: string, parentId: string | null): void;
 export declare function setContainer(doc: Diagram, id: string, patch: Partial<ContainerLayout>): void;
 export declare function setEdge(doc: Diagram, id: string, patch: Partial<Pick<DiagramEdge, 'directed' | 'dashed' | 'emphasis' | 'head' | 'tail'>>): void;
+/**
+ * Give a sequence message a kind, or take it away. The kind draws the line and its ends, so the
+ * message keeps no style of its own. A reply to a message that can no longer take one is unpaired.
+ */
+export declare function setMessage(doc: Diagram, id: string, kind: MessageKind | undefined): void;
+/**
+ * Add an event to a sequence before or after another: a plain message between the same two
+ * participants, or an action beside an action. The file gives it its row when it draws again.
+ */
+export declare function insertEvent(doc: Diagram, id: string, where: 'before' | 'after'): string | undefined;
+/** Move a sequence event one place up or down among the events. False at either end. */
+export declare function moveEvent(doc: Diagram, id: string, by: -1 | 1): boolean;
+/** Turn a sequence's activation bars on or off. The file's layout line holds the switch. */
+export declare function setActivations(doc: Diagram, on: boolean): void;
+/** The earlier messages a reply can answer: those with a kind that run the other way. */
+export declare function replyTargets(doc: Diagram, id: string): DiagramEdge[];
+/** Say which message a reply answers, or that it names none. */
+export declare function setReplyTo(doc: Diagram, id: string, target: string | undefined): void;
 export declare function setEdgeLayout(doc: Diagram, id: string, patch: Partial<EdgeLayout>): void;
 export declare function reverseEdge(doc: Diagram, id: string): void;
 export declare function useAutomaticPorts(doc: Diagram, edgeIds: string[]): void;

package/dist/types/src/model/labels.d.ts

@@ -62,6 +62,12 @@ export interface NodeLabel {
 export declare function nodeLabel(doc: Diagram, id: string, title: string, r: Rect): NodeLabel;
 /** Bounds of a shape together with its label. */
 export declare function visualBounds(doc: Diagram, id: string, title: string, r: Rect): Rect;
+/** Text width a sequence phase's label wraps to, so a long one does not push the lanes right. */
+export declare const PHASE_WRAP = 96;
+/** Inset of a phase label from its band's top left corner. */
+export declare const PHASE_TAB = 8;
+/** A phase label's lines, in the annotation type. */
+export declare const phaseLabelLines: (label: string, r: ResolvedAppearance) => string[];
 /** Text width a sequence message's label wraps to; the gap between participants follows it. */
 export declare const MESSAGE_WRAP = 168;
 /**
@@ -93,6 +99,23 @@ export declare function edgeLabelSize(label: string, r?: ResolvedAppearance, mes
     w: number;
     h: number;
 };
+/**
+ * An activation bar: its width, how far a nested bar steps to the right, how far it runs past
+ * its first and last rows, and the length of a bar whose call gets no reply.
+ */
+export declare const ACTIVATION: {
+    w: number;
+    step: number;
+    over: number;
+    stub: number;
+};
+/** Room between a local action's label and its box, on each side. */
+export declare const ACTION_PAD = 5;
+/** The box of a local action: its label and `ACTION_PAD` round it, centred on the lifeline. */
+export declare function actionSize(label: string, r: ResolvedAppearance): {
+    w: number;
+    h: number;
+};
 /**
  * What a self-message draws, measured from where its row meets the lifeline: how far right, how
  * far above the row and how far below it.

package/dist/types/src/model/markers.d.ts

@@ -30,10 +30,17 @@ export declare const markerBox: (kind: Exclude<EndMarker, "none">, tail: boolean
 };
 /** The fill a marker takes on this line and surface. */
 export declare function markerFill(kind: Exclude<EndMarker, 'none'>, ink: string, surface: string): string;
+/**
+ * What `message=` accepts on a sequence message, plus `action`, which an `action` line makes.
+ * Each says what the author means; none is read from a line's style.
+ */
+export declare const MESSAGE_KINDS: readonly ["interaction", "call", "send", "reply", "outcome"];
+export type MessageKind = (typeof MESSAGE_KINDS)[number] | 'action';
 type Ends = {
     directed?: boolean;
     head?: EndMarker;
     tail?: EndMarker;
+    message?: MessageKind;
 };
 /** An undirected edge has no marks, whatever else it holds. */
 export declare const headOf: (e: Ends) => EndMarker;

package/dist/types/src/model/note.d.ts

@@ -46,13 +46,22 @@ export declare function noteBox(look: ResolvedAppearance, note: Note): PlacedNot
  * Spots in a sequence's side margins, by index in `notes`, for notes on the messages in `rows`.
  * `left` and `right` are the margins' inner edges and `top` the highest a note goes. A note is
  * level with its row, or pushed down clear of the note above it. The panel grows round these, so
- * no note here can cover the drawing.
+ * no note here can cover the drawing. A note on a message in a phase stays inside that phase's
+ * band (`bands`, by message), which `marginNoteRoom` makes tall enough for its notes.
  */
 export declare function marginNotes(look: ResolvedAppearance, notes: readonly Note[], rows: ReadonlyMap<string, number>, { left, right, top }: {
     left: number;
     right: number;
     top: number;
-}): (Rect | null)[];
+}, bands?: ReadonlyMap<string, {
+    y: number;
+    h: number;
+}>): (Rect | null)[];
+/**
+ * The height a phase band needs for the margin notes on its messages (`ids`): the taller of its
+ * two sides, each a stack of its notes.
+ */
+export declare function marginNoteRoom(look: ResolvedAppearance, notes: readonly Note[], ids: string[]): number;
 /**
  * Place every anchored note beside its object or message, clear of shapes, group borders, lines
  * and earlier notes when a nearby spot allows it. Frame notes, and notes whose object is not drawn,

package/dist/types/src/model/routes.d.ts

@@ -1,4 +1,4 @@
-import { type PriorRoute, type Route, type RoutingResult } from '../engines/routing-engine.js';
+import { type PriorRoute, type Route, type RoutingResult } from '../engines/routing-engine';
 import { type ResolvedAppearance } from './appearance';
 import { type VisibleGraph } from './graph';
 import type { Diagram, EdgeLayout, Point, Rect, ShapeKind, Side } from './types';
@@ -132,8 +132,10 @@ export declare function routeInput(doc: Diagram, vg: VisibleGraph, all: Map<stri
         tail?: import("./markers").EndMarker;
         emphasis: boolean;
         dashed: boolean;
-        status?: import("./status.js").Status;
-        spot?: import("./status.js").Spot;
+        message?: import("./markers").MessageKind;
+        replyTo?: string;
+        status?: import("./status").Status;
+        spot?: import("./status").Spot;
     }[];
 };
 /**

package/dist/types/src/model/status.d.ts

@@ -82,3 +82,21 @@ export declare function withState(doc: Diagram, id: string): Diagram;
 export declare function usedStatuses(doc: Diagram): StatusCount[];
 /** The color key's rows: a diff draws no family colors, so it lists only its statuses. */
 export declare const drawnLegend: (doc: Diagram) => LegendEntry[];
+/** What every sequence says under its drawing. */
+export declare const SEQUENCE_CAPTION = "Rows show order, not elapsed time.";
+/**
+ * The events that belong with one event of a sequence: a message, the reply that answers it,
+ * and the message a reply answers. Only pairs the file states, never a guess from direction.
+ */
+export declare function replyPair(doc: Diagram, id: string): string[];
+/**
+ * A sequence in words, for a reader who cannot see it: the participants, then each event in
+ * order with its kind. An exported SVG carries it as its description unless the host gives one.
+ */
+export declare function sequenceDescription(doc: Diagram): string | undefined;
+/**
+ * The key a sequence draws for its kinds of message: one row for each mark in use, so a reader
+ * never has to guess what a solid head or a box means. Nothing unless a message has a kind. A
+ * plain message and a shown result draw the same arrow, so they share a row.
+ */
+export declare function messageKey(doc: Diagram): LegendEntry[];

package/dist/types/src/model/types.d.ts

@@ -13,7 +13,7 @@ export type PortSide = Side | 'auto';
 export type Direction = 'RIGHT' | 'DOWN';
 export type Theme = 'light' | 'dark';
 import type { DiagramAppearance, Shade } from './appearance';
-import type { EndMarker } from './markers';
+import type { EndMarker, MessageKind } from './markers';
 import type { Spot, Status } from './status';
 export type ShapeKind = 'box' | 'pill' | 'circle' | 'diamond' | 'text' | 'icon' | 'image'
 /** A seam between two cells of a `cells` group. */
@@ -70,6 +70,13 @@ export interface DiagramEdge {
     tail?: EndMarker;
     emphasis: boolean;
     dashed: boolean;
+    /**
+     * A sequence message's meaning, from `message=`, or `action` for work one participant does
+     * (an `action` line; `from` and `to` are that participant). Unset for a plain message.
+     */
+    message?: MessageKind;
+    /** With `message: 'reply'`: the earlier message this one answers, from `answers=`. */
+    replyTo?: string;
     /** How it differs between two versions of the diagram. */
     status?: Status;
     /** How the drawn emphasis state treats it; see `withState`. */
@@ -93,6 +100,8 @@ export interface EdgeLayout {
     toOffset?: number;
     /** A sequence message: drawn straight between the two lifelines at this height, not routed. */
     row?: number;
+    /** A message between distant lanes: the middle of the gap between lifelines its label sits in. */
+    labelX?: number;
     /**
      * Set by the compiler for a forward line in a `flow` scope: its route planned from the ranks.
      * The quick router takes it as it is when it clears every box.
@@ -274,8 +283,18 @@ export interface SequenceLayout {
         rows: Record<string, number>;
         phases: SequencePhase[];
         grow: number;
+        activations?: Activation[];
     };
+    /** With `activations=on`: the bars on the lifelines of participants at work on a call. */
+    activations?: Activation[];
+    /** The `activations=on` switch itself, which the Inspector turns on and off. */
+    bars?: true;
 }
+/** One activation bar: its participant, the call that opened it, and its box. */
+export type Activation = Rect & {
+    node: string;
+    call: string;
+};
 export type SequencePhase = {
     id: string;
     label: string;

package/dist/types/src/runtime/color-scheme.d.ts

@@ -0,0 +1,15 @@
+/** Watches one host's scheme. `check` reads it again now; `stop` ends the watch. */
+export interface SchemeWatch {
+    check(): void;
+    stop(): void;
+}
+/**
+ * Calls `onChange(dark)` now and whenever the scheme in `host` changes: an element, or a shadow
+ * root, whose children inherit the element's scheme. A hidden probe in `host` has a `light-dark()`
+ * color, so a scheme change anywhere above it (a class flip on the page, a style) starts a
+ * transition there; the media query covers a change of system setting under `light dark`. A
+ * transition cannot run while the host has no box (a hidden tab, a closed `<details>`, a detached
+ * mount), so a resize observer on the host reads the scheme again when it gets one. Callers also
+ * call `check` after each commit.
+ */
+export declare function watchColorScheme(host: Element | ShadowRoot, onChange: (dark: boolean) => void): SchemeWatch;

package/dist/types/src/runtime/host.d.ts

@@ -3,6 +3,7 @@
  * packages loop over `HOST_EVENTS`, so a new event adds no lines to any of them.
  * This module has no side effects and no runtime imports.
  */
+import type { RenderFailure } from './types';
 import type { UpdateResult, ViewerEvents } from './viewer';
 export type { Camera, CameraReason, FrameOptions, MoveResult } from './camera';
 export type { Box, EdgeOut, Geometry, PlacedBox } from './geometry';
@@ -10,8 +11,11 @@ export type { Anchor, DraftSlot } from './anchors';
 export interface HostEvents {
     /** After each commit, after the marked children change, and with `[]` before destroy. */
     anchors: ViewerEvents['anchors'];
-    /** Each update's result: committed, error or a cancellation. */
-    update: UpdateResult;
+    /**
+     * Each update's result, from the first source on: committed, error or a cancellation. The
+     * editor's commit has no `value` or `diagnostics` (see `EditorUpdate`).
+     */
+    update: UpdateResult | EditorUpdate;
     render: ViewerEvents['render'];
     diagnostics: ViewerEvents['diagnostics'];
     camera: ViewerEvents['camera'];
@@ -30,11 +34,39 @@ export interface HostEvents {
         source: string;
     };
 }
+/**
+ * `<draft-editor>`'s update. The editor draws in its own session, not as one SVG, so a commit
+ * has no `value` and no `diagnostics`: the `diagnostics` event has them. A source that does not
+ * parse is an `error` with a `DRAFT_PARSE` diagnostic; the editor keeps the text and shows it.
+ */
+export type EditorUpdate = {
+    status: 'committed';
+    revision: number;
+    value?: never;
+    diagnostics?: never;
+} | {
+    status: 'error';
+    revision: number;
+    error: RenderFailure;
+} | {
+    status: 'destroyed';
+    revision: number;
+};
 export type HostEventName = keyof HostEvents;
 /** Every event, in one list. Each element dispatches these as bubbling `draft-<name>` events. */
 export declare const HOST_EVENTS: readonly ["anchors", "update", "render", "diagnostics", "camera", "itemactivate", "link", "contextmenu", "select", "change"];
 /** Events a host can cancel with `preventDefault()`. */
+export type CancelableEventName = 'link' | 'contextmenu';
 export declare const CANCELABLE_EVENTS: readonly HostEventName[];
+/**
+ * What a framework event prop receives: the event's `detail`, and on a cancelable event a
+ * `preventDefault()` that cancels the DOM event, so `onLink={e => e.preventDefault()}` works.
+ */
+export type HostEventDetail<K extends HostEventName> = K extends CancelableEventName ? HostEvents[K] & {
+    preventDefault(): void;
+} : HostEvents[K];
+/** The value a framework event prop receives for a `draft-<name>` event. */
+export declare function hostDetail(event: Event): unknown;
 export type DraftEventMap = {
     [K in HostEventName as `draft-${K}`]: CustomEvent<HostEvents[K]>;
 };

package/dist/types/src/runtime/page-shared.d.ts

@@ -4,7 +4,7 @@
  */
 import type { RenderOptions, RenderResult } from './types';
 /** Names the worker and the usual fix, so "worker failed" is not a dead end. */
-export declare const WORKER_HELP = "The worker is the module next to @draftably/runtime's viewer. With Vite, add optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] } to vite.config.";
+export declare const WORKER_HELP = "The worker is the module next to @draftably/runtime's viewer. With Vite 5\u20137, add optimizeDeps: { exclude: ['@draftably/runtime', '@draftably/editor'] } to vite.config.";
 /**
  * Render in the page's worker pool. Jobs queue on the main thread; an aborted job leaves the
  * queue before a worker sees it. A job that runs past `timeoutMs` stops its worker only.

package/dist/types/src/runtime/schemes.d.ts

@@ -0,0 +1,2 @@
+/** Both drawings as one, or null when they differ in more than color. */
+export declare function mergeSchemes(light: string, dark: string): string | null;

package/dist/types/src/runtime/svg-renderer.d.ts

@@ -3,6 +3,7 @@
  * same appearance, shapes and title wrapping as the canvas and embeds the fonts it uses.
  */
 import { type ResolvedAppearance } from '../model/appearance';
+import { PHASE_TAB } from '../model/labels';
 import { computeRoutes } from '../model/routes';
 import type { Diagram, Rect } from '../model/types';
 /** How an object's `href` is written into the file; as written unless the caller says. */
@@ -26,21 +27,25 @@ export interface SvgOptions {
         rects: Map<string, Rect>;
         routes: Route[];
     }) => void;
+    /**
+     * The routes `onDrawn` gave for this document, so drawing it again in other colors routes
+     * nothing again (not for compare or states).
+     */
+    routes?: Route[];
 }
 export declare class SvgLimitError extends Error {
 }
-type Route = ReturnType<typeof computeRoutes>['routes'][number];
+export type Route = ReturnType<typeof computeRoutes>['routes'][number];
 /**
  * A sequence diagram's panel, a light surface with a border that bounds the exchange, and a row
  * band for each phase with its label in a tab at the left edge. Drawn under everything else.
  */
 export declare function sequenceBackdrop(doc: Diagram, look: ResolvedAppearance): {
     panel: string[];
+    bars: string[];
     phases: string[];
 };
-/** Inset of a phase label from its band's top left corner. */
-export declare const PHASE_TAB = 8;
+export { PHASE_TAB };
 /** A thin stripe across the top of a box, inside its rounded corners. */
 export declare function accentPath(r: Rect, radius: number): string;
 export declare function renderSvg(doc: Diagram, opts?: SvgOptions): string;
-export {};

package/dist/types/src/runtime/types.d.ts

@@ -49,6 +49,13 @@ export interface CommonRenderOptions {
     sourceId?: string;
     signal?: AbortSignal;
     limits?: Partial<RenderLimits>;
+    /**
+     * `light` (default) draws the file's own colors. `dark` draws a file without a `theme` line in
+     * the default theme's dark variant. `auto` writes both as `light-dark()` colors, so the page's
+     * `color-scheme` picks one; the viewer and `<draft-diagram>` use it. A file's own theme line
+     * always wins.
+     */
+    colorScheme?: 'light' | 'dark' | 'auto';
 }
 export type RenderOptions = CommonRenderOptions & ({
     target?: 'image';

package/dist/types/src/state/active-session.d.ts

@@ -208,6 +208,8 @@ export declare const setActiveSession: (session: DiagramSession) => {
             tail?: import("../model/markers").EndMarker;
             emphasis: boolean;
             dashed: boolean;
+            message?: import("../model/markers").MessageKind;
+            replyTo?: string;
             status?: import("../model/status").Status;
             spot?: import("../model/status").Spot;
         }[];
@@ -216,7 +218,7 @@ export declare const setActiveSession: (session: DiagramSession) => {
     routingReport: () => import("../engines/routing-engine").RoutingReport;
     blockedRouteIds: () => string[];
     sceneBounds: () => import("../model/types").Rect;
-    viewerFrame: () => {
+    viewerFrame: import("solid-js").Accessor<{
         x: number;
         y: number;
         w: number;
@@ -260,7 +262,7 @@ export declare const setActiveSession: (session: DiagramSession) => {
             h: number;
         };
         notes: import("../model/note").PlacedNote[];
-    };
+    }>;
 } & {
     states: () => import("../model/appearance").EmphasisState[];
     activeState: () => string | null;
@@ -269,6 +271,9 @@ export declare const setActiveSession: (session: DiagramSession) => {
     showState: (id: string | null) => void;
     stepState: (by: 1 | -1) => boolean;
     drawnDoc: () => import("../model/types").Diagram;
+    dark: import("solid-js").Accessor<boolean>;
+    setDark: import("solid-js").Setter<boolean>;
+    drawnAppearance: () => import("../model/appearance").DiagramAppearance;
 } & {
     tool: import("solid-js").Accessor<import("./session/editor").Tool>;
     setToolSignal: import("solid-js").Setter<import("./session/editor").Tool>;
@@ -395,6 +400,8 @@ export declare const setActiveSession: (session: DiagramSession) => {
     fitSelectedContainer: () => void;
     toggleCollapse: (id?: string | undefined) => void;
     reverseSelectedEdge: () => void;
+    insertEvent: (where: "before" | "after") => string | undefined;
+    moveEvent: (by: -1 | 1) => void;
     resetSelectedBends: () => void;
     setLayoutIntent: (role: import("../model/types").IntentRole, id: string | null, placement?: import("../model/types").IntentPlacement) => void;
     markSelectedAs: (role: import("../model/types").IntentRole) => void;

package/dist/types/src/state/canvas-commands.d.ts

@@ -17,6 +17,15 @@ export interface Command {
 declare function undoCommand(): void;
 declare function redoCommand(): void;
 export declare const hasSelection: () => boolean;
+/** A sequence draws from its file, so its messages are added and moved in a file only. */
+declare function sequenceFileOnly(): "Open the diagram as a file to add or move its messages." | null;
+declare let nameInPanel: (() => boolean) | null;
+/**
+ * Set by the app shell, which owns the Inspector: put the caret in its Label field and return
+ * true, or return false when the Inspector is not showing. The embedded editor has no
+ * Inspector and sets nothing, so it names a new message in place.
+ */
+export declare const setLabelNamer: (fn: typeof nameInPanel) => (() => boolean) | null;
 export declare const canvasCommands: {
     undo: {
         hint: string;
@@ -49,6 +58,34 @@ export declare const canvasCommands: {
         icon: string;
         run: () => string | undefined;
     };
+    'insert-event-after': {
+        label: string;
+        keys: string;
+        hint: string;
+        run: () => void;
+        blocked: typeof sequenceFileOnly;
+    };
+    'insert-event-before': {
+        label: string;
+        keys: string;
+        hint: string;
+        run: () => void;
+        blocked: typeof sequenceFileOnly;
+    };
+    'move-event-up': {
+        label: string;
+        keys: string;
+        hint: string;
+        run: () => void;
+        blocked: typeof sequenceFileOnly;
+    };
+    'move-event-down': {
+        label: string;
+        keys: string;
+        hint: string;
+        run: () => void;
+        blocked: typeof sequenceFileOnly;
+    };
     duplicate: {
         hint: string;
         enabled: () => boolean;

package/dist/types/src/state/session/actions.d.ts

@@ -54,6 +54,8 @@ export declare function createActions(s: EditorPart & DocumentPart & ScenePart &
     fitSelectedContainer: () => void;
     toggleCollapse: (id?: string | undefined) => void;
     reverseSelectedEdge: () => void;
+    insertEvent: (where: "before" | "after") => string | undefined;
+    moveEvent: (by: -1 | 1) => void;
     resetSelectedBends: () => void;
     setLayoutIntent: (role: IntentRole, id: string | null, placement?: IntentPlacement) => void;
     markSelectedAs: (role: IntentRole) => void;

package/dist/types/src/state/session/emphasis.d.ts

@@ -7,5 +7,8 @@ export declare function createEmphasis(s: DocumentPart): {
     showState: (id: string | null) => void;
     stepState: (by: 1 | -1) => boolean;
     drawnDoc: () => import("../../model/types").Diagram;
+    dark: import("solid-js").Accessor<boolean>;
+    setDark: import("solid-js").Setter<boolean>;
+    drawnAppearance: () => import("../../model/appearance").DiagramAppearance;
 };
 export type EmphasisPart = ReturnType<typeof createEmphasis>;

package/dist/types/src/state/session/file-session.d.ts

@@ -1,6 +1,6 @@
 import { type Diagnostic, type Scene } from '../../dsl/compile';
 import { type ShapeChange, UnstorableLayout } from '../../dsl/layout-edits';
-import type { RoutingResult } from '../../engines/routing-engine.js';
+import type { RoutingResult } from '../../engines/routing-engine';
 import type { Diagram, LayoutSettings, RoutingSettings } from '../../model/types';
 import type { DocumentPart } from './document';
 import type { CanvasTextPart } from './canvas-text';