@draftably/mermaid 0.0.0-stage → 0.1.0

package/dist/mermaid.esm.min.mjs

@@ -0,0 +1,13 @@
+import { c as e, m as s, g as t, i, p as n, r as o, a as d, b as g, d as l, s as f } from "./cdn/index-MjBeFYcO.mjs";
+export {
+  e as contentLoaded,
+  s as default,
+  t as getConfig,
+  i as initialize,
+  n as parse,
+  o as registerExternalDiagrams,
+  d as registerLayoutLoaders,
+  g as render,
+  l as run,
+  f as setParseErrorHandler
+};

package/dist/mermaid.js

@@ -0,0 +1,117 @@
+import { renderSvg as E, validate as A } from "@draftably/runtime";
+let s = { startOnLoad: !0 }, P, d, x = 0, u;
+const o = () => P ??= import("mermaid-upstream").then((r) => r.default), p = (r) => /^\s*(?:%%.*\n\s*)*(?:diagram\s+"|(?:node|group|edge|layout|theme)\s)/.test(r), y = (r) => {
+  const n = r.replace(/^\s*\n/, "").replace(/\s+$/, "").split(`
+`), a = Math.min(...n.filter((e) => e.trim()).map((e) => /^\s*/.exec(e)[0].length));
+  return n.map((e) => e.slice(Number.isFinite(a) ? a : 0)).join(`
+`);
+}, w = (r) => Object.assign(new Error(r), { name: "DraftablyError" });
+async function F(r) {
+  if (s.draftably?.mermaid === "off") return null;
+  u ??= import("./chunks/mermaid-facade-BoLWBerE.js").then(
+    (i) => i.createMermaidFlowParser(o)
+  );
+  const [{ makePlainLabel: n }, { importMermaidFlow: a }] = await Promise.all([
+    import("./chunks/mermaid-facade-BoLWBerE.js"),
+    import("./chunks/mermaid-importer-IVovOQE9.js")
+  ]), e = await (await u)(r);
+  if (!e.ok) return null;
+  const t = a(e, n(document), "");
+  return t.nativeSource ? { source: t.nativeSource, family: t.family } : null;
+}
+async function l(r, n, a) {
+  const e = await E(n, { target: "inline", idPrefix: r });
+  if (!e.ok) throw w(e.diagnostics.map((t) => t.message).join(`
+`));
+  return { svg: e.value.svg, diagramType: a, renderer: "draftably" };
+}
+async function S(r, n, a) {
+  const e = await o();
+  e.initialize({ ...s, startOnLoad: !1 });
+  const t = await e.render(r, n, a);
+  return {
+    svg: t.svg,
+    diagramType: t.diagramType,
+    renderer: "mermaid",
+    bindFunctions: t.bindFunctions
+  };
+}
+async function c(r, n, a) {
+  const e = y(n);
+  if (p(e)) return l(r, e, "draftably");
+  const t = await F(e);
+  return t ? l(r, t.source, t.family) : S(r, e, a);
+}
+async function m(r, n = {}) {
+  const a = y(r);
+  try {
+    if (p(a)) {
+      const t = await A(a);
+      if (!t.ok) throw w(t.diagnostics.map((i) => i.message).join(`
+`));
+      return { diagramType: "draftably", config: s };
+    }
+    const e = await (await o()).parse(a);
+    return e ? { diagramType: e.diagramType, config: s } : !1;
+  } catch (e) {
+    if (d?.(e), n.suppressErrors) return !1;
+    throw e;
+  }
+}
+async function b(r = {}) {
+  const n = r.nodes ?? document.querySelectorAll(r.querySelector ?? ".mermaid"), a = [];
+  for (const e of Array.from(n)) {
+    if (e.getAttribute("data-processed")) continue;
+    e.setAttribute("data-processed", "true");
+    const t = `mermaid-${x++}`;
+    try {
+      const { svg: i, bindFunctions: v, renderer: L } = await c(t, e.textContent ?? "", e);
+      e.innerHTML = i, e.setAttribute("data-renderer", L), v?.(e), r.postRenderCallback?.(t);
+    } catch (i) {
+      d?.(i), a.push(i), e.setAttribute("data-draftably-error", String(i.message ?? i));
+    }
+  }
+  if (a.length && !r.suppressErrors) throw a[0];
+}
+function f(r) {
+  s = { ...s, ...r };
+}
+const g = () => s;
+function T(r) {
+  d = r;
+}
+async function h() {
+  s.startOnLoad && await b();
+}
+async function k(...r) {
+  await (await o()).registerExternalDiagrams(...r);
+}
+async function D(...r) {
+  (await o()).registerLayoutLoaders(...r);
+}
+const j = {
+  initialize: f,
+  run: b,
+  render: c,
+  parse: m,
+  contentLoaded: h,
+  getConfig: g,
+  setParseErrorHandler: T,
+  registerExternalDiagrams: k,
+  registerLayoutLoaders: D,
+  mermaidAPI: { initialize: f, render: c, parse: m, getConfig: g }
+};
+typeof window < "u" && window.addEventListener("load", () => void h().catch(() => {
+}), { once: !0 });
+export {
+  h as contentLoaded,
+  j as default,
+  g as getConfig,
+  f as initialize,
+  m as parse,
+  k as registerExternalDiagrams,
+  D as registerLayoutLoaders,
+  c as render,
+  b as run,
+  T as setParseErrorHandler
+};

package/dist/types/packages/mermaid/src/index.d.ts

@@ -0,0 +1,59 @@
+export interface MermaidConfig {
+    startOnLoad?: boolean;
+    /** Drop-in settings. Every other key passes through to Mermaid for families it still draws. */
+    draftably?: {
+        /** `convert` (default) draws Mermaid flowcharts and sequences with Draftably; `off` leaves them to Mermaid. */
+        mermaid?: 'convert' | 'off';
+    };
+    [key: string]: unknown;
+}
+export interface RunOptions {
+    querySelector?: string;
+    nodes?: ArrayLike<HTMLElement>;
+    suppressErrors?: boolean;
+    postRenderCallback?: (id: string) => unknown;
+}
+export interface RenderResult {
+    svg: string;
+    diagramType: string;
+    /** Who drew it: `draftably`, or `mermaid` for a family Draftably does not draw yet. */
+    renderer: 'draftably' | 'mermaid';
+    bindFunctions?: (element: Element) => void;
+}
+export interface ParseResult {
+    diagramType: string;
+    config: MermaidConfig;
+}
+type Upstream = (typeof import('mermaid-upstream'))['default'];
+export declare function render(id: string, text: string, container?: Element): Promise<RenderResult>;
+export declare function parse(text: string, options?: {
+    suppressErrors?: boolean;
+}): Promise<ParseResult | false>;
+export declare function run(options?: RunOptions): Promise<void>;
+export declare function initialize(next: MermaidConfig): void;
+export declare const getConfig: () => MermaidConfig;
+export declare function setParseErrorHandler(handler: (err: unknown, hash?: unknown) => void): void;
+/** Mermaid's page-load hook: render every `.mermaid` element when `startOnLoad` is on. */
+export declare function contentLoaded(): Promise<void>;
+/** Diagram families from plugins render through Mermaid, so register them there. */
+export declare function registerExternalDiagrams(...args: Parameters<Upstream['registerExternalDiagrams']>): Promise<void>;
+/** Layout plugins such as `@mermaid-js/layout-elk` apply to the charts Mermaid still draws. */
+export declare function registerLayoutLoaders(...args: Parameters<Upstream['registerLayoutLoaders']>): Promise<void>;
+declare const mermaid: {
+    initialize: typeof initialize;
+    run: typeof run;
+    render: typeof render;
+    parse: typeof parse;
+    contentLoaded: typeof contentLoaded;
+    getConfig: () => MermaidConfig;
+    setParseErrorHandler: typeof setParseErrorHandler;
+    registerExternalDiagrams: typeof registerExternalDiagrams;
+    registerLayoutLoaders: typeof registerLayoutLoaders;
+    mermaidAPI: {
+        initialize: typeof initialize;
+        render: typeof render;
+        parse: typeof parse;
+        getConfig: () => MermaidConfig;
+    };
+};
+export default mermaid;

package/dist/types/src/dsl/cells.d.ts

@@ -0,0 +1,91 @@
+import type { ResolvedAppearance } from '../model/appearance';
+/** Width of a marker's bar, centred on the seam it marks. */
+export declare const MARKER_WIDTH = 8;
+/** How far a marker's bar runs past the cells, so a line meets it clear of their corners. */
+export declare const MARKER_TAIL = 16;
+/** Height of a cells group's title band for a title type of this line height. */
+export declare const cellsBandFor: (lineHeight: number) => number;
+export interface CellInput {
+    id: string;
+    label: string;
+    marker: boolean;
+    /** Columns the cell covers in a grid. */
+    span?: number;
+    /** From a `size` line. */
+    size?: {
+        width: number;
+        height?: number;
+    };
+}
+export interface CellBox {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** A cell's own size: one line of title when it fits in `MAX_CELL`, wrapped when it does not. */
+export declare function cellSize(c: CellInput, look: ResolvedAppearance): {
+    w: number;
+    h: number;
+};
+/**
+ * Cells edge to edge, in rows of `columns` columns filled in order; a cell's `span` covers that
+ * many columns, and a cell that does not fit the rest of a row starts the next one. Without
+ * `columns`, the cells form one row (`right`) or one column (`down`). Each column is as wide as
+ * its widest single cell, widened at its last column for a wider spanning cell, and each row is
+ * as tall as its tallest cell. Cells narrower than `minWidth` in all, the title band's width,
+ * widen the last column.
+ *
+ * A marker takes no room: in one row or column, its bar sits on the seam before the next cell
+ * and spans the band above as well, so it cuts the whole object, and runs a short tail past the
+ * cells where lines meet it.
+ */
+export declare function layoutCells(cells: CellInput[], shape: {
+    direction: 'right' | 'down';
+    columns?: number;
+}, look: ResolvedAppearance, minWidth?: number): {
+    boxes: Map<string, CellBox>;
+    w: number;
+    h: number;
+};
+/** Width of one unit of a byte or bit layout, and the units in each row, unless the file says. */
+export declare const UNIT_WIDTH: {
+    readonly bit: 24;
+    readonly byte: 48;
+};
+export declare const UNIT_COLUMNS: {
+    readonly bit: 32;
+    readonly byte: 16;
+};
+export interface UnitCells {
+    /** Each field's main box: the longest piece, which holds its title. */
+    boxes: Map<string, CellBox>;
+    /** The other pieces of a field that runs on past a row's end. */
+    pieces: Map<string, CellBox[]>;
+    /** Fields of variable length, drawn with broken ends. */
+    open: string[];
+    /** Unit numbers above the first row: their centres, and the room they take above the cells. */
+    ruler?: {
+        h: number;
+        ticks: Array<{
+            x: number;
+            label: string;
+        }>;
+    };
+    w: number;
+    h: number;
+}
+/**
+ * A byte or bit layout: every unit has one width, so a field's width is its size. Rows hold
+ * `columns` units. A field longer than the rest of its row runs on into the next rows; a field of
+ * variable length (`span: 'var'`) fills the rest of its row, or a whole row, with broken ends.
+ * Every row has the height of the tallest title.
+ */
+export declare function layoutUnits(cells: Array<CellInput & {
+    open?: boolean;
+}>, shape: {
+    unit: 'bit' | 'byte';
+    columns?: number;
+    unitWidth?: number;
+    ruler: boolean;
+}, look: ResolvedAppearance): UnitCells;

package/dist/types/src/dsl/channels.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Routing channels inside groups.
+ *
+ * A group leaves `GROUP_INSET` between its members and its border. That is padding, not room for
+ * a line: a line routed through it runs beside a member and along the border at once. When a
+ * connection has to travel inside a group (a member boxed in by its neighbours, or a link between
+ * two of the group's children that can't go straight across), the group grows a channel on one
+ * side, wide enough for each such line to run a full standoff from the members,
+ * the border and each other. A link between children takes the side of them both ends lean
+ * toward, and a return (up or left) takes the left or top when they lean neither way, so a
+ * forward line and its return don't cross. The compiler lays the scene out once, plans channels
+ * from that geometry, and lays it out again with them.
+ */
+import type { ModelEdge } from './syntax';
+/**
+ * Room a group leaves round its content: the inset on the left, right and bottom (at least
+ * `GROUP_INSET`), and extra room under the title band on top (0 without a channel there).
+ */
+export interface Channel {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    /** How many lines each side's channel was planned for. */
+    lines: Record<Side, number>;
+}
+/** Channels may grow the drawing's area by this much at most. */
+export declare const CHANNEL_BUDGET = 1.1;
+/**
+ * Drop the channels that carry fewest lines until the drawing laid out with the rest (`measure`)
+ * is within `CHANNEL_BUDGET` of its area without any (`plain`).
+ */
+export declare function trimChannels(plan: Map<string, Channel>, plain: number, measure: (channels: Map<string, Channel>) => number): Map<string, Channel>;
+interface Box {
+    id: string;
+    type: string;
+    parent: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export type Side = 'left' | 'right' | 'top' | 'bottom';
+/**
+ * Channels for the scene laid out as `objects`. A group is keyed by id; groups with no traffic
+ * are left out.
+ */
+export declare function planChannels(objects: Box[], edges: ModelEdge[], routing?: {
+    edgeGap?: number;
+    portGap?: number;
+    standoff?: number;
+}): Map<string, Channel>;
+export {};

package/dist/types/src/dsl/compile.d.ts

@@ -0,0 +1,162 @@
+import { type ResolvedAppearance } from '../model/appearance';
+import type { CellsChrome, Lane, SequenceLayout } from '../model/types';
+import { GROUP_HEADER, GROUP_INSET, contentOrigin } from './frame';
+import { type Model, type ModelEdge, type ModelLayout, type ModelObject } from './syntax';
+/** The single render context. Browser window size changes the camera, never the layout. */
+export declare const RENDER_CONTEXT: {
+    readonly width: 1100;
+    readonly height: 720;
+};
+export { GROUP_HEADER, GROUP_INSET, contentOrigin };
+export interface SceneObject extends ModelObject {
+    /** World (diagram) coordinates. */
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    /** Position relative to the parent's content origin; `pin` and `stay` use these. */
+    localX: number;
+    localY: number;
+    /** Local position from the automatic recipe alone, before refinements; `nudge` offsets this. */
+    baseX: number;
+    baseY: number;
+    depth: number;
+    /** Sequence participants: how far the dashed lifeline runs below the box. */
+    lifeline?: number;
+    /** Soft groups: the tint's rectangles, relative to the group's top left; the first holds the label. */
+    hull?: Array<{
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }>;
+    /** Groups: lines the title wraps to, when more than one. */
+    titleLines?: number;
+}
+export interface Diagnostic {
+    level: 'error' | 'warning' | 'info';
+    code: string;
+    message: string;
+    /** Source line of the rule involved, when there is one. */
+    line?: number;
+    ids: string[];
+}
+/** A connection as the file declares it, plus the lane a fold's wrap edge returns along. */
+export interface SceneEdge extends ModelEdge {
+    lane?: Lane;
+    /** A sequence message: the height of its row; it is drawn straight between lifelines there. */
+    row?: number;
+}
+export interface Scene {
+    model: Model;
+    title: string;
+    objects: SceneObject[];
+    byId: Map<string, SceneObject>;
+    edges: SceneEdge[];
+    diagnostics: Diagnostic[];
+    /** The file's resolved appearance: the spacing and type every size above was computed with. */
+    look: ResolvedAppearance;
+    /** Rulers and run-on pieces of byte and bit layouts, by group. */
+    cells: Map<string, CellsChrome>;
+    /** Sequence diagrams: the panel they are drawn on and their phases' row bands. */
+    sequence?: SequenceLayout;
+}
+type Size = {
+    w: number;
+    h: number;
+};
+type Pos = {
+    x: number;
+    y: number;
+};
+export declare function compile(source: string): Promise<Scene>;
+/**
+ * Check source synchronously: every error `compile` can report, without running layout engines
+ * (they never add errors). Engine-governed scopes keep their built-in recipe in the result.
+ */
+export declare function checkSource(source: string): Scene;
+/**
+ * The scene as layout sees it, for edits that write positions: soft and frameless groups left
+ * out, and each object under the container that lays it out, which its local position is
+ * relative to.
+ */
+export declare function layoutView(scene: Scene): Scene;
+/** How far a soft refinement may give way before `check` warns that it no longer holds. */
+export declare const RELAXED_WARNING = 16;
+/** Solver budget for engine recipes; the same budget Compare and the timeline use. */
+export declare const ENGINE_ITERATIONS = 640;
+/** A labelled edge between two siblings, with the room its label needs across and down a gap. */
+interface LabelRoom {
+    a: string;
+    b: string;
+    w: number;
+    h: number;
+}
+export declare function layoutFor(m: Model, scope: string): ModelLayout;
+/**
+ * Size of a node: its requested size, or the default width with a height that fits the title in
+ * the theme's type and padding. A requested size is kept exactly; `overflow` reports a title that
+ * no longer fits in it.
+ */
+export declare function leafSize(o: ModelObject, size: {
+    width: number;
+    height?: number;
+} | undefined, look: ResolvedAppearance): {
+    w: number;
+    h: number;
+    overflow: boolean;
+};
+/**
+ * Longest-path ranks, in declaration order. Cycles are broken first: a depth-first walk from the
+ * sources (then any node not yet reached), in declaration order, sets aside each edge that returns
+ * to a node still on the walk. A loop therefore keeps its path along the reading direction and
+ * only its return edge runs backwards.
+ */
+export declare function rankLayers(ids: string[], pairs: Array<[string, string]>): string[][];
+/** A folded run: each band's ids in reading order, and the axis the bands read along. */
+export interface Fold {
+    bands: string[][];
+    axis: 'right' | 'down';
+}
+/**
+ * Fold a long run of ranks into bands, like lines of text: each band starts again at the
+ * beginning of the reading direction, and the bands stack across it. A run that is longer than
+ * the render context and more than `FOLD_ASPECT` times its depth is cut only between ranks (where
+ * no box spans the cut), into the fewest bands that bring it within both. Within a quarter of an
+ * even share, a cut is chosen for the fewest edges across it, keeping each decision with its
+ * branches and each loop whole, before an exact balance. Other runs are returned unchanged.
+ *
+ * `plan` is the same run laid out without its edge labels. Whether to fold, how many bands and
+ * where to cut are decided on it, so relabelling an edge never adds a band or moves a cut: the
+ * labels only widen the gaps they need inside their own band.
+ */
+export declare function foldRanks(items: Array<{
+    id: string;
+    w: number;
+    h: number;
+}>, positions: Map<string, Pos>, axis: 'right' | 'down', gap: number, pairs: Array<[string, string]>, rooms?: LabelRoom[], decisions?: Set<string>, plan?: Map<string, Pos>, { aspect, fewest, room, }?: {
+    aspect?: number;
+    fewest?: number;
+    room?: number;
+}): {
+    positions: Map<string, Pos>;
+    fold?: Fold;
+};
+/** How many times orthogonal paths, given as points along and across, cross one another. */
+export declare function crossings(paths: Array<Array<{
+    u: number;
+    v: number;
+}>>): number;
+/** The order of up to six items that scores fewest crossings; the first such, from `items`. */
+export declare function fewestCrossings<T>(items: T[], score: (order: T[]) => number): T[];
+/**
+ * Lay out a model. `arranged` holds world positions from layout engines; scopes that an engine
+ * governs take their children's relative placement from it instead of their built-in recipe.
+ *
+ * Nodes are laid out on slots: their size in the reference appearance (the default theme, with
+ * the file's own overrides), so a theme switch keeps rows, order and positions. Each node is drawn
+ * at its theme's size in its slot. A slot grows only where the theme's size is larger
+ * than the scope's gap can absorb (`SLOT_SPILL`), or where spilling would bring two boxes closer
+ * than `MIN_GAP`. With `slots`, objects come out at their slot size (the engines' input).
+ */
+export declare function layoutModel(m: Model, arranged?: Map<string, Pos & Size>, slots?: boolean): Scene;

package/dist/types/src/dsl/frame.d.ts

@@ -0,0 +1,38 @@
+/** Group frame metrics shared by the compiler, the projection and the translator. */
+/** Space between a group's frame and its content, on the sides and bottom. */
+export declare const GROUP_INSET = 24;
+/**
+ * Space between a group's top edge and its content in the default theme; the title sits in it.
+ * Themes with taller titles reserve more (`ResolvedAppearance.groupHeader`).
+ */
+export declare const GROUP_HEADER = 48;
+/**
+ * Horizontal room a group title needs besides its text: the icon and gap before it (33) and the
+ * frame controls after it (64), as `GroupView` and the SVG export truncate titles.
+ */
+export declare const GROUP_TITLE_CHROME: number;
+/** Room a soft group's tint leaves round its members, and above them for its label. */
+export declare const SOFT_PAD = 10;
+export declare const SOFT_LABEL = 18;
+/** Where a soft group's label sits in its tint: in the annotation face, at the top left. */
+export declare const SOFT_TITLE: {
+    x: number;
+    y: number;
+};
+/** Corner radius of each rectangle of a tint; small, so joined rectangles read as one shape. */
+export declare const SOFT_RADIUS = 6;
+/** Dash of a sequence participant's lifeline; quieter than a message line. */
+export declare const LIFELINE: {
+    dash: string;
+    width: number;
+};
+/** Top-left of a group's content area, which its children's local positions are relative to. */
+export declare const contentOrigin: (group: {
+    x: number;
+    y: number;
+}, header?: number) => {
+    x: number;
+    y: number;
+};
+/** Horizontal room a `cells` group's title needs besides its text: padding and the collapse control. */
+export declare const CELLS_TITLE_CHROME: number;

package/dist/types/src/dsl/lanes.d.ts

@@ -0,0 +1,23 @@
+import type { Lane } from '../model/types';
+import type { ModelEdge } from './syntax';
+interface Box {
+    id: string;
+    type: string;
+    shape?: string;
+    parent: string;
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** A scope arranged along a reading axis, with its fold's bands when it folded. */
+export interface FlowScope {
+    scope: string;
+    axis: 'right' | 'down';
+    bands?: string[][];
+}
+export declare function returnLanes(flows: FlowScope[], edges: ModelEdge[], byId: Map<string, Box>, taken: Set<string>, labelSize?: (label: string) => {
+    w: number;
+    h: number;
+}): Map<string, Lane>;
+export {};

package/dist/types/src/dsl/legend-notes.d.ts

@@ -0,0 +1,3 @@
+import type { Diagnostic } from './compile';
+import type { Model } from './syntax';
+export declare function legendNotes(m: Model): Diagnostic[];

package/dist/types/src/dsl/project.d.ts

@@ -0,0 +1,39 @@
+import type { Diagram, Rect } from '../model/types';
+import type { Scene } from './compile';
+/** Editor state that is not part of the source and survives a reprojection. */
+export type ViewState = Partial<Pick<Diagram, 'settings' | 'camera' | 'theme' | 'collapsed'>>;
+export declare function projectScene(scene: Scene, view?: ViewState): Diagram;
+export interface CanonicalGeometry {
+    nodes: Array<{
+        id: string;
+        parent: string;
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+    }>;
+    routes: Array<{
+        id: string;
+        points: Array<{
+            x: number;
+            y: number;
+        }>;
+    }>;
+}
+/** Rectangles for everything visible, as the canvas draws them. */
+export declare function visibleRects(doc: Diagram): {
+    vg: import("../model/graph").VisibleGraph;
+    rects: Map<string, Rect>;
+};
+/**
+ * Node rectangles and route points for a projected document. Edge label positions are left out:
+ * the browser measures label text with real fonts, which Node cannot reproduce.
+ */
+export declare function canonicalGeometry(doc: Diagram): CanonicalGeometry;
+export declare function measured(doc: Diagram, rects: Map<string, Rect>, routes: Array<{
+    id: string;
+    points: Array<{
+        x: number;
+        y: number;
+    }>;
+}>): CanonicalGeometry;