@diagrammo/dgmo 0.8.19 → 0.8.21

package/dist/index.d.ts

@@ -8,10 +8,164 @@ interface DgmoError {
     column?: number;
     message: string;
     severity: DgmoSeverity;
+    /**
+     * Optional stable diagnostic code (e.g. 'E_ARROW_SUBSTRING_IN_LABEL').
+     * Additive; pre-existing diagnostics omit this field and existing
+     * substring-on-`.message` assertions keep working unchanged.
+     */
+    code?: string;
 }
-declare function makeDgmoError(line: number, message: string, severity?: DgmoSeverity): DgmoError;
+declare function makeDgmoError(line: number, message: string, severity?: DgmoSeverity, code?: string): DgmoError;
 declare function formatDgmoError(err: DgmoError): string;
 
+/**
+ * Stable diagnostic codes for in-arrow label parsing errors.
+ *
+ * **Active codes** — emitted by the parser pipeline today:
+ *   - `ARROW_SUBSTRING_IN_LABEL` (TD-13)
+ *   - `CONTROL_CHAR_IN_LABEL` (TD-14)
+ *
+ * **Reserved codes** — declared but NOT currently emitted. These are
+ * placeholders for future tightening of the arrow-tokenization rules
+ * described in TD-9. Today's chart parsers catch these cases through
+ * their own regex machinery with different diagnostics. A follow-up
+ * spec that introduces a dedicated tokenizer can start emitting them
+ * without changing the public code shape:
+ *   - `TRAILING_ARROW_TEXT` — extra `->`/`~>` after the primary arrow
+ *   - `MIXED_ARROW_DELIMITERS` — opening delim type doesn't match arrow
+ *
+ * See `docs/dgmo-language-spec-decisions.md` → TD-16 for the rationale.
+ */
+declare const ARROW_DIAGNOSTIC_CODES: {
+    /** Active: label contains `->` or `~>` substring (TD-13). */
+    readonly ARROW_SUBSTRING_IN_LABEL: "E_ARROW_SUBSTRING_IN_LABEL";
+    /** Active: label contains a forbidden control character (TD-14). */
+    readonly CONTROL_CHAR_IN_LABEL: "E_CONTROL_CHAR_IN_LABEL";
+    /** Reserved: not currently emitted by any parser. See JSDoc above. */
+    readonly TRAILING_ARROW_TEXT: "E_TRAILING_ARROW_TEXT";
+    /** Reserved: not currently emitted by any parser. See JSDoc above. */
+    readonly MIXED_ARROW_DELIMITERS: "E_MIXED_ARROW_DELIMITERS";
+};
+/**
+ * Validate an in-arrow label against the TD-13 and TD-14 character-set
+ * contract. Returns diagnostics (possibly empty). Does NOT mutate the label —
+ * callers that want a normalized label should trim before calling.
+ *
+ * TD-13: label must not contain the substrings "->" or "~>".
+ * TD-14: label must not contain C0 control chars other than tab, and no DEL.
+ */
+declare function validateLabelCharacters(label: string, lineNumber: number): DgmoError[];
+interface ParseInArrowLabelResult {
+    /** Cleaned label (trimmed; `undefined` if empty after trim per TD-10). */
+    label: string | undefined;
+    diagnostics: DgmoError[];
+}
+/**
+ * Normalize and validate a raw in-arrow label.
+ *
+ * Behavior:
+ *   - Trims leading/trailing whitespace (TD-8: internal whitespace preserved).
+ *   - Empty-after-trim → `{ label: undefined }` (TD-10 normalization).
+ *   - TD-13: emits `E_ARROW_SUBSTRING_IN_LABEL` if `->` or `~>` is present.
+ *   - TD-14: emits `E_CONTROL_CHAR_IN_LABEL` for forbidden control chars.
+ *
+ * This helper is intentionally chart-agnostic: it operates on an already
+ * extracted label string, leaving each chart's existing arrow-finding
+ * tokenization in place. TD-11 color-parens is handled inside the
+ * flowchart and state `parseArrowToken` functions because those are the
+ * only charts that interpret `-(color)->` as a colored edge; they use
+ * `matchColorParens()` from this module for the shared lookup.
+ */
+declare function parseInArrowLabel(rawLabel: string, lineNumber: number): ParseInArrowLabelResult;
+/**
+ * Test whether a string matches the TD-11 color-parens form `(colorName)`
+ * where `colorName` is one of the 11 recognized palette color names from
+ * `src/colors.ts:RECOGNIZED_COLOR_NAMES`. Returns the lowercase color name
+ * on a match, or `null` on fall-through (whole string becomes a label).
+ *
+ * Used by flowchart and state parsers to keep the color-parens recognition
+ * rule in one place — do NOT re-implement the regex in chart parsers.
+ */
+declare function matchColorParens(content: string): string | null;
+
+/**
+ * Compact view state schema (ADR-6).
+ * All fields optional. Only non-default values are encoded.
+ * `tag: null` means "user chose none"; absent `tag` means "use DSL default" (ADR-5).
+ */
+interface CompactViewState {
+    tag?: string | null;
+    cs?: number[];
+    cg?: string[];
+    swim?: string | null;
+    cl?: string[];
+    cc?: string[];
+    rm?: string;
+    htv?: Record<string, string[]>;
+    ha?: string[];
+    enl?: number[];
+    sem?: boolean;
+    cm?: boolean;
+    c4l?: string;
+    c4s?: string;
+    c4c?: string;
+    rps?: number;
+    spd?: number;
+    io?: Record<string, number>;
+    hd?: boolean;
+    cbd?: boolean;
+}
+interface DecodedDiagramUrl {
+    dsl: string;
+    viewState: CompactViewState;
+    palette?: string;
+    theme?: 'light' | 'dark';
+    filename?: string;
+}
+interface EncodeDiagramUrlOptions {
+    baseUrl?: string;
+    viewState?: CompactViewState;
+    palette?: string;
+    theme?: 'light' | 'dark';
+    filename?: string;
+}
+type EncodeDiagramUrlResult = {
+    url: string;
+    error?: undefined;
+} | {
+    url?: undefined;
+    error: 'too-large';
+    compressedSize: number;
+    limit: number;
+};
+/**
+ * Encode a CompactViewState to a compressed string for URL embedding.
+ * Returns empty string if state has no keys (ADR-4).
+ */
+declare function encodeViewState(state: CompactViewState): string;
+/**
+ * Decode a compressed view state string back to CompactViewState.
+ * Returns empty object on failure (no crash).
+ */
+declare function decodeViewState(encoded: string): CompactViewState;
+/**
+ * Compress a DGMO DSL string into a shareable URL.
+ * Returns `{ url }` on success, or `{ error: 'too-large', compressedSize, limit }` if the
+ * compressed payload exceeds the 8 KB limit.
+ */
+declare function encodeDiagramUrl(dsl: string, options?: EncodeDiagramUrlOptions): EncodeDiagramUrlResult;
+/**
+ * Decode a DGMO DSL string and view state from a URL query string or hash.
+ * Accepts any of:
+ *   - `?dgmo=<payload>&vs=<state>`
+ *   - `#dgmo=<payload>&vs=<state>` (backwards compat)
+ *   - `dgmo=<payload>`
+ *   - `<bare payload>`
+ *
+ * Returns `{ dsl, viewState }`. The DSL is empty string on invalid input.
+ */
+declare function decodeDiagramUrl(hash: string): DecodedDiagramUrl;
+
 /**
  * Render DGMO source to an SVG string.
  *
@@ -20,13 +174,13 @@ declare function formatDgmoError(err: DgmoError): string;
  *
  * @param content - DGMO source text
  * @param options - Optional theme and palette settings
- * @returns SVG string, or empty string on error
+ * @returns Object with `svg` (SVG string, empty on error) and `diagnostics` (parse errors/warnings)
  *
  * @example
  * ```ts
  * import { render } from '@diagrammo/dgmo';
  *
- * const svg = await render(`pie Languages
+ * const { svg, diagnostics } = await render(`pie Languages
  * TypeScript: 45
  * Python: 30
  * Rust: 25`);
@@ -35,7 +189,6 @@ declare function formatDgmoError(err: DgmoError): string;
 declare function render(content: string, options?: {
     theme?: 'light' | 'dark' | 'transparent';
     palette?: string;
-    branding?: boolean;
     c4Level?: 'context' | 'containers' | 'components' | 'deployment';
     c4System?: string;
     c4Container?: string;
@@ -45,7 +198,12 @@ declare function render(content: string, options?: {
         activeGroup?: string;
         hiddenAttributes?: string[];
     };
-}): Promise<string>;
+    /** View state for export — controls interactive state (collapse, swimlanes, etc.) */
+    viewState?: CompactViewState;
+}): Promise<{
+    svg: string;
+    diagnostics: DgmoError[];
+}>;
 
 /**
  * Extracts the chart type from raw file content.
@@ -156,13 +314,6 @@ declare function hexToHSL(hex: string): {
 declare function hslToHex(h: number, s: number, l: number): string;
 /** Convert hex to "H S% L%" string for CSS custom properties. */
 declare function hexToHSLString(hex: string): string;
-/**
- * Derive a muted (desaturated, darkened) variant of a color.
- * Used by the Mermaid theme generator for dark-mode fills.
- *
- * Algorithm: cap saturation at 35% and lightness at 36%.
- */
-declare function mute(hex: string): string;
 /**
  * Blend a color toward white (light mode quadrant fills).
  * amount: 0 = original, 1 = white
@@ -173,6 +324,13 @@ declare function tint(hex: string, amount: number): string;
  * amount: 0 = original, 1 = base
  */
 declare function shade(hex: string, base: string, amount: number): string;
+/**
+ * Blend two hex colors by percentage.
+ * `pct` = 0 → 100% of `b`, `pct` = 100 → 100% of `a`.
+ *
+ * Used by all renderers for tinted fills and strokes.
+ */
+declare function mix(a: string, b: string, pct: number): string;
 /**
  * Pick a text color that contrasts against `bg`.
  * Returns `darkText` when background is light (luminance > 0.179),
@@ -203,20 +361,6 @@ declare const draculaPalette: PaletteConfig;
 
 declare const monokaiPalette: PaletteConfig;
 
-/**
- * Generates ~121 Mermaid theme variables from palette tokens.
- * Replaces the hardcoded lightThemeVars/darkThemeVars objects.
- *
- * Dark mode fills use `mute()` to derive desaturated variants
- * that are readable with light text.
- */
-declare function buildMermaidThemeVars(colors: PaletteColors, isDark: boolean): Record<string, string>;
-/**
- * Generates custom CSS overrides for Mermaid SVGs.
- * Handles git graph label backgrounds and dark-mode text readability.
- */
-declare function buildThemeCSS(palette: PaletteColors, isDark: boolean): string;
-
 type ChartType$1 = 'bar' | 'line' | 'pie' | 'doughnut' | 'area' | 'polar-area' | 'radar' | 'bar-stacked';
 interface ChartDataPoint {
     label: string;
@@ -628,9 +772,12 @@ declare function buildSimpleChartOption(parsed: ParsedChart, palette: PaletteCol
  * Renders an extended chart (scatter, sankey, chord, function, heatmap, funnel) to SVG using server-side rendering.
  * Mirrors the `renderForExport` API — returns an SVG string or empty string on failure.
  */
-declare function renderExtendedChartForExport(content: string, theme: 'light' | 'dark' | 'transparent', palette?: PaletteColors, options?: {
-    branding?: boolean;
-}): Promise<string>;
+declare function renderExtendedChartForExport(content: string, theme: 'light' | 'dark' | 'transparent', palette?: PaletteColors): Promise<string>;
+
+interface D3ExportDimensions {
+    width?: number;
+    height?: number;
+}
 
 /** A single entry inside a tag group: `Value(color)` */
 interface TagEntry {
@@ -720,7 +867,7 @@ interface VennOverlap {
     label: string | null;
     lineNumber: number;
 }
-interface QuadrantLabel$1 {
+interface QuadrantLabel {
     text: string;
     color: string | null;
     lineNumber: number;
@@ -732,16 +879,12 @@ interface QuadrantPoint {
     lineNumber: number;
 }
 interface QuadrantLabels {
-    topRight: QuadrantLabel$1 | null;
-    topLeft: QuadrantLabel$1 | null;
-    bottomLeft: QuadrantLabel$1 | null;
-    bottomRight: QuadrantLabel$1 | null;
-}
-/** Optional explicit dimensions for CLI/export rendering (bypasses DOM layout). */
-interface D3ExportDimensions {
-    width?: number;
-    height?: number;
+    topRight: QuadrantLabel | null;
+    topLeft: QuadrantLabel | null;
+    bottomLeft: QuadrantLabel | null;
+    bottomRight: QuadrantLabel | null;
 }
+
 interface ParsedVisualization {
     type: VisualizationType | null;
     title: string | null;
@@ -811,20 +954,6 @@ declare function renderArcDiagram(container: HTMLDivElement, parsed: ParsedVisua
  *   '2024-06-15 14:30'  → 'Jun 15, 2024 14:30'
  */
 declare function formatDateLabel(dateStr: string): string;
-/**
- * Computes adaptive tick marks for a timeline scale.
- * - Multi-year spans → year ticks
- * - Within ~1 year → month ticks
- * - Within ~3 months → week ticks (1st, 8th, 15th, 22nd)
- *
- * Optional boundary parameters add ticks at exact data start/end:
- * - boundaryStart/boundaryEnd: numeric date values
- * - boundaryStartLabel/boundaryEndLabel: formatted labels for those dates
- */
-declare function computeTimeTicks(domainMin: number, domainMax: number, scale: d3Scale.ScaleLinear<number, number>, boundaryStart?: number, boundaryEnd?: number, boundaryStartLabel?: string, boundaryEndLabel?: string): {
-    pos: number;
-    label: string;
-}[];
 /**
  * Renders a timeline chart into the given container using D3.
  * Supports horizontal (default) and vertical orientation.
@@ -844,19 +973,27 @@ declare function renderQuadrant(container: HTMLDivElement, parsed: ParsedVisuali
  * Renders a D3 chart to an SVG string for export.
  * Creates a detached DOM element, renders into it, extracts the SVG, then cleans up.
  */
-declare function renderForExport(content: string, theme: 'light' | 'dark' | 'transparent', palette?: PaletteColors, orgExportState?: {
-    collapsedNodes?: Set<string>;
-    activeTagGroup?: string | null;
-    hiddenAttributes?: Set<string>;
-    swimlaneTagGroup?: string | null;
-}, options?: {
-    branding?: boolean;
+declare function renderForExport(content: string, theme: 'light' | 'dark' | 'transparent', palette?: PaletteColors, viewState?: CompactViewState, options?: {
     c4Level?: 'context' | 'containers' | 'components' | 'deployment';
     c4System?: string;
     c4Container?: string;
     tagGroup?: string;
 }): Promise<string>;
 
+/**
+ * Generates adaptive tick marks along a time axis.
+ * Picks the right granularity (years, months, weeks, days, hours, minutes)
+ * based on the domain span.
+ *
+ * Optional boundary parameters add ticks at exact data start/end:
+ * - boundaryStart/boundaryEnd: numeric date values
+ * - boundaryStartLabel/boundaryEndLabel: formatted labels for those dates
+ */
+declare function computeTimeTicks(domainMin: number, domainMax: number, scale: d3Scale.ScaleLinear<number, number>, boundaryStart?: number, boundaryEnd?: number, boundaryStartLabel?: string, boundaryEndLabel?: string): {
+    pos: number;
+    label: string;
+}[];
+
 /**
  * Participant types that can be declared via "Name is a type" syntax.
  */
@@ -978,48 +1115,6 @@ declare function inferParticipantType(name: string): ParticipantType;
  */
 declare const RULE_COUNT: number;
 
-interface QuadrantLabel {
-    text: string;
-    color: string | null;
-    lineNumber: number;
-}
-interface ParsedQuadrant {
-    title: string | null;
-    titleLineNumber: number | null;
-    xAxis: [string, string] | null;
-    xAxisLineNumber: number | null;
-    yAxis: [string, string] | null;
-    yAxisLineNumber: number | null;
-    quadrants: {
-        topRight: QuadrantLabel | null;
-        topLeft: QuadrantLabel | null;
-        bottomLeft: QuadrantLabel | null;
-        bottomRight: QuadrantLabel | null;
-    };
-    points: {
-        label: string;
-        x: number;
-        y: number;
-        lineNumber: number;
-    }[];
-    diagnostics: DgmoError[];
-    error: string | null;
-}
-/**
- * Parses a .dgmo quadrant document into a structured object.
- * Lines are processed sequentially; unknown lines are silently skipped.
- */
-declare function parseQuadrant(content: string): ParsedQuadrant;
-/**
- * Generates valid Mermaid quadrantChart syntax from a parsed quadrant.
- * Returns a string ready for the Mermaid renderer.
- */
-declare function buildMermaidQuadrant(parsed: ParsedQuadrant, options?: {
-    isDark?: boolean;
-    textColor?: string;
-    mutedTextColor?: string;
-}): string;
-
 type GraphShape = 'terminal' | 'process' | 'decision' | 'io' | 'subroutine' | 'document' | 'state' | 'pseudostate';
 type GraphDirection = 'TB' | 'LR';
 interface GraphNode {
@@ -1174,11 +1269,18 @@ interface LayoutGroup {
     label: string;
     color?: string;
     lineNumber: number;
+    collapsed?: boolean;
     x: number;
     y: number;
     width: number;
     height: number;
 }
+interface LayoutOptions {
+    /** Map of group ID → number of child nodes (for collapsed groups) */
+    collapsedChildCounts?: Map<string, number>;
+    /** Original groups before collapse (includes collapsed ones) */
+    originalGroups?: GraphGroup[];
+}
 interface LayoutResult {
     nodes: LayoutNode[];
     edges: LayoutEdge[];
@@ -1186,7 +1288,7 @@ interface LayoutResult {
     width: number;
     height: number;
 }
-declare function layoutGraph(graph: ParsedGraph): LayoutResult;
+declare function layoutGraph(graph: ParsedGraph, options?: LayoutOptions): LayoutResult;
 
 declare function renderState(container: HTMLDivElement, graph: ParsedGraph, layout: LayoutResult, palette: PaletteColors, isDark: boolean, onClickItem?: (lineNumber: number) => void, exportDims?: {
     width?: number;
@@ -1194,6 +1296,23 @@ declare function renderState(container: HTMLDivElement, graph: ParsedGraph, layo
 }): void;
 declare function renderStateForExport(content: string, theme: 'light' | 'dark' | 'transparent', palette: PaletteColors): string;
 
+interface StateCollapseResult {
+    parsed: ParsedGraph;
+    collapsedChildCounts: Map<string, number>;
+    originalGroups: GraphGroup[];
+}
+/**
+ * Pure transform: returns a new ParsedGraph with collapsed groups
+ * removed from the diagram content.
+ *
+ * - Children of collapsed groups removed from nodes
+ * - Edges redirected: endpoints in collapsed groups → group ID
+ * - Internal edges (both in same collapsed group) dropped
+ * - Duplicate edges (same source, target, label) deduplicated
+ * - Collapsed groups removed from groups[] (layout handles as nodes)
+ */
+declare function collapseStateGroups(parsed: ParsedGraph, collapsedGroups: Set<string>): StateCollapseResult;
+
 type ClassModifier = 'abstract' | 'interface' | 'enum';
 type MemberVisibility = 'public' | 'private' | 'protected';
 type RelationshipType = 'extends' | 'implements' | 'composes' | 'aggregates' | 'depends' | 'associates';
@@ -1526,6 +1645,9 @@ interface KanbanInteractiveOptions {
     activeTagGroup?: string | null;
     currentSwimlaneGroup?: string | null;
     onSwimlaneChange?: (group: string | null) => void;
+    collapsedLanes?: Set<string>;
+    collapsedColumns?: Set<string>;
+    compactMeta?: boolean;
 }
 declare function renderKanban(container: HTMLElement, parsed: ParsedKanban, palette: PaletteColors, isDark: boolean, options?: KanbanInteractiveOptions): void;
 declare function renderKanbanForExport(content: string, theme: 'light' | 'dark' | 'transparent', palette: PaletteColors): string;
@@ -1726,6 +1848,7 @@ interface BLGroup {
     children: string[];
     lineNumber: number;
     metadata: Record<string, string>;
+    parentGroup?: string;
 }
 interface ParsedBoxesAndLines {
     type: 'boxes-and-lines';
@@ -1807,6 +1930,7 @@ declare function renderBoxesAndLinesForExport(container: HTMLDivElement, parsed:
         height: number;
     };
     activeTagGroup?: string | null;
+    hiddenTagValues?: Map<string, Set<string>>;
 }): void;
 
 interface BLCollapseResult {
@@ -2453,6 +2577,205 @@ interface CollapsedOrgResult {
 }
 declare function collapseOrgTree(original: ParsedOrg, collapsedIds: Set<string>): CollapsedOrgResult;
 
+interface MindmapNode {
+    id: string;
+    label: string;
+    description?: string;
+    metadata: Record<string, string>;
+    children: MindmapNode[];
+    parentId: string | null;
+    lineNumber: number;
+    color?: string;
+    collapsed?: boolean;
+}
+interface ParsedMindmap {
+    title: string | null;
+    titleLineNumber: number | null;
+    roots: MindmapNode[];
+    tagGroups: TagGroup[];
+    options: Record<string, string>;
+    diagnostics: DgmoError[];
+    error: string | null;
+}
+interface MindmapLayoutNode {
+    id: string;
+    label: string;
+    description?: string;
+    metadata: Record<string, string>;
+    lineNumber: number;
+    color?: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    depth: number;
+    angle: number;
+    radius: number;
+    hiddenCount?: number;
+    hasChildren?: boolean;
+}
+interface MindmapLayoutEdge {
+    sourceId: string;
+    targetId: string;
+    path: string;
+}
+interface MindmapLayoutResult {
+    nodes: MindmapLayoutNode[];
+    edges: MindmapLayoutEdge[];
+    width: number;
+    height: number;
+}
+
+declare function parseMindmap(content: string, palette?: PaletteColors): ParsedMindmap;
+
+declare function layoutMindmap(parsed: ParsedMindmap, palette: PaletteColors, options?: {
+    interactive?: boolean;
+    hiddenCounts?: Map<string, number>;
+    activeTagGroup?: string | null;
+    hideDescriptions?: boolean;
+}): MindmapLayoutResult;
+
+declare function renderMindmap(container: HTMLDivElement, parsed: ParsedMindmap, layout: MindmapLayoutResult, palette: PaletteColors, isDark: boolean, onClickItem?: (lineNumber: number) => void, exportDims?: {
+    width?: number;
+    height?: number;
+}, onToggleNode?: (nodeId: string) => void, hideDescriptions?: boolean, activeTagGroup?: string | null, options?: {
+    colorByDepth?: boolean;
+    onToggleColorByDepth?: (active: boolean) => void;
+    onToggleDescriptions?: (active: boolean) => void;
+    controlsExpanded?: boolean;
+    onToggleControlsExpand?: () => void;
+}): void;
+declare function renderMindmapForExport(content: string, theme: 'light' | 'dark' | 'transparent', palette: PaletteColors): string;
+
+interface CollapsedMindmapResult {
+    /** Roots with collapsed subtrees pruned (deep-cloned, never mutates original) */
+    roots: MindmapNode[];
+    /** nodeId → count of hidden descendants */
+    hiddenCounts: Map<string, number>;
+}
+declare function collapseMindmapTree(roots: MindmapNode[], collapsedIds: Set<string>): CollapsedMindmapResult;
+
+/**
+ * All wireframe element types.
+ * Visual-mnemonic elements are inferred from bracket syntax;
+ * keyword elements use a small vocabulary (9 keywords).
+ */
+type WireframeElementType = 'group' | 'textInput' | 'button' | 'dropdown' | 'checkbox' | 'radio' | 'heading' | 'divider' | 'text' | 'listItem' | 'nav' | 'tabs' | 'table' | 'image' | 'modal' | 'skeleton' | 'alert' | 'progress' | 'chart';
+/**
+ * Single flat interface for all wireframe elements (ADR-8).
+ * No separate WireframeGroup — all elements carry group fields
+ * with sensible defaults (isContainer=false, orientation='vertical', isSkeleton=false).
+ */
+interface WireframeElement {
+    id: string;
+    type: WireframeElementType;
+    /** Display label / placeholder text / heading text */
+    label: string;
+    /** Child elements (non-empty only when isContainer=true) */
+    children: WireframeElement[];
+    /** Pipe metadata key-value pairs */
+    metadata: Record<string, string>;
+    /** State keywords: disabled, active, ghost, destructive, etc. */
+    states: string[];
+    /** Free-text annotations from pipe metadata */
+    annotations: string[];
+    /** 1-based line number in source */
+    lineNumber: number;
+    /** Measured indentation (column) */
+    indent: number;
+    /** True when element has children (set during parse via indent stack) */
+    isContainer: boolean;
+    /** Stacking direction for group children */
+    orientation: 'vertical' | 'horizontal';
+    /** True when inside a skeleton block */
+    isSkeleton: boolean;
+    /** Heading level: 1 for `#`, 2 for `##` */
+    headingLevel?: number;
+    /** Dropdown options (for type='dropdown') */
+    options?: string[];
+    /** Checked state (for type='checkbox') */
+    checked?: boolean;
+    /** Selected state (for type='radio') */
+    selected?: boolean;
+    /** Image hint: 'default' | 'round' | 'wide' */
+    imageHint?: 'default' | 'round' | 'wide';
+    /** Progress value 0-100 (for type='progress') */
+    progressValue?: number;
+    /** Chart hint: 'line' | 'bar' | 'pie' */
+    chartHint?: 'line' | 'bar' | 'pie';
+    /** Table dimensions for skeleton shorthand (for type='table') */
+    tableRows?: number;
+    tableCols?: number;
+    /** Table header row labels (for type='table') */
+    tableHeaders?: string[];
+    /** Table data rows — each row is an array of cell content strings (for type='table') */
+    tableData?: string[][];
+    /** Inline elements on the same line (multi-element line) */
+    inlineElements?: WireframeElement[];
+    /** Label element for label-field pairing */
+    labelFor?: WireframeElement;
+    /** Color from tag system */
+    color?: string;
+    /** Field variant: password, textarea */
+    fieldVariant?: 'password' | 'textarea';
+}
+/** Form factor / layout mode */
+type WireframeFormFactor = 'desktop' | 'mobile';
+interface ParsedWireframe {
+    title: string | null;
+    titleLineNumber: number | null;
+    formFactor: WireframeFormFactor;
+    /** Top-level elements (roots of the hierarchy) */
+    roots: WireframeElement[];
+    /** Modal elements (rendered separately below main) */
+    modals: WireframeElement[];
+    tagGroups: TagGroup[];
+    options: Record<string, string>;
+    diagnostics: DgmoError[];
+    error: string | null;
+}
+
+declare function parseWireframe(content: string): ParsedWireframe;
+
+interface WireframeLayoutNode {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    element: WireframeElement;
+    children: WireframeLayoutNode[];
+    /** For label-field pairs: the x offset where fields align */
+    fieldAlignX?: number;
+}
+interface WireframeLayout {
+    width: number;
+    height: number;
+    titleHeight: number;
+    nodes: WireframeLayoutNode[];
+    modalNodes: WireframeLayoutNode[];
+}
+declare function layoutWireframe(parsed: ParsedWireframe, _options?: Record<string, string>, overrideWidth?: number, showGroupLabels?: boolean): WireframeLayout;
+
+interface WireframeRenderOptions {
+    exportDims?: {
+        width?: number;
+        height?: number;
+    };
+    theme?: string;
+    onClickItem?: (lineNumber: number) => void;
+    /** Controls group state */
+    controlsExpanded?: boolean;
+    fitWidth?: boolean;
+    showGroupLabels?: boolean;
+    onControlsExpand?: () => void;
+    onControlsToggle?: (id: string, active: boolean) => void;
+}
+declare function renderWireframe(container: HTMLDivElement, parsed: ParsedWireframe, layout: WireframeLayout, palette: PaletteColors, isDark: boolean, _onClickItem?: (lineNumber: number) => void, exportDims?: {
+    width?: number;
+    height?: number;
+}, theme?: string, options?: WireframeRenderOptions): void;
+
 /**
  * Async or sync file reader. Receives an absolute path, returns content.
  * Throwing means "file not found".
@@ -2636,82 +2959,6 @@ declare function resolveColorWithDiagnostic(color: string, line: number, diagnos
 /** @deprecated Use getSeriesColors(palette) from '@/lib/palettes' instead. */
 declare const seriesColors: string[];
 
-/**
- * Compact view state schema (ADR-6).
- * All fields optional. Only non-default values are encoded.
- * `tag: null` means "user chose none"; absent `tag` means "use DSL default" (ADR-5).
- */
-interface CompactViewState {
-    tag?: string | null;
-    cs?: number[];
-    cg?: string[];
-    swim?: string | null;
-    cl?: string[];
-    cc?: string[];
-    rm?: string;
-    htv?: Record<string, string[]>;
-    ha?: string[];
-    enl?: number[];
-    sem?: boolean;
-    cm?: boolean;
-    c4l?: string;
-    c4s?: string;
-    c4c?: string;
-    rps?: number;
-    spd?: number;
-    io?: Record<string, number>;
-}
-interface DecodedDiagramUrl {
-    dsl: string;
-    viewState: CompactViewState;
-    palette?: string;
-    theme?: 'light' | 'dark';
-    filename?: string;
-}
-interface EncodeDiagramUrlOptions {
-    baseUrl?: string;
-    viewState?: CompactViewState;
-    palette?: string;
-    theme?: 'light' | 'dark';
-    filename?: string;
-}
-type EncodeDiagramUrlResult = {
-    url: string;
-    error?: undefined;
-} | {
-    url?: undefined;
-    error: 'too-large';
-    compressedSize: number;
-    limit: number;
-};
-/**
- * Encode a CompactViewState to a compressed string for URL embedding.
- * Returns empty string if state has no keys (ADR-4).
- */
-declare function encodeViewState(state: CompactViewState): string;
-/**
- * Decode a compressed view state string back to CompactViewState.
- * Returns empty object on failure (no crash).
- */
-declare function decodeViewState(encoded: string): CompactViewState;
-/**
- * Compress a DGMO DSL string into a shareable URL.
- * Returns `{ url }` on success, or `{ error: 'too-large', compressedSize, limit }` if the
- * compressed payload exceeds the 8 KB limit.
- */
-declare function encodeDiagramUrl(dsl: string, options?: EncodeDiagramUrlOptions): EncodeDiagramUrlResult;
-/**
- * Decode a DGMO DSL string and view state from a URL query string or hash.
- * Accepts any of:
- *   - `?dgmo=<payload>&vs=<state>`
- *   - `#dgmo=<payload>&vs=<state>` (backwards compat)
- *   - `dgmo=<payload>`
- *   - `<bare payload>`
- *
- * Returns `{ dsl, viewState }`. The DSL is empty string on invalid input.
- */
-declare function decodeDiagramUrl(hash: string): DecodedDiagramUrl;
-
 /**
  * Shared parser utilities — extracted from individual parsers to eliminate
  * duplication of measureIndent, extractColor, header regexes, and
@@ -2731,10 +2978,4 @@ declare function parseFirstLine(line: string): {
     title: string | undefined;
 } | null;
 
-/**
- * Injects `diagrammo.app` branding text into an SVG string.
- * Extends the SVG height by 20px and places the text at the bottom-right.
- */
-declare function injectBranding(svgHtml: string, mutedColor: string): string;
-
-export { ALL_CHART_TYPES, type Activation, type ArcLink, type ArcNodeGroup, type BLCollapseResult, type BLEdge, type BLGroup, type BLLayoutEdge, type BLLayoutGroup, type BLLayoutNode, type BLLayoutResult, type BLNode, type C4ArrowType, type C4DeploymentNode, type C4Element, type C4ElementType, type C4Group, type C4LayoutBoundary, type C4LayoutEdge, type C4LayoutNode, type C4LayoutResult, type C4LegendEntry, type C4LegendGroup, type C4Relationship, type C4Shape, type C4TagEntry, type C4TagGroup, CHART_TYPES, COMPLETION_REGISTRY, type ChartDataPoint, type ChartEra, type ChartType$1 as ChartType, type ClassLayoutEdge, type ClassLayoutNode, type ClassLayoutResult, type ClassMember, type ClassModifier, type ClassNode, type ClassRelationship, type CollapsedOrgResult, type CollapsedSitemapResult, type CollapsedView, type CompactViewState, type ComputedInfraEdge, type ComputedInfraModel, type ComputedInfraNode, type ContextRelationship, type D3ExportDimensions, type DecodedDiagramUrl, type DgmoError, type DgmoSeverity, type DiagramSymbols, type DirectiveSpec, type DirectiveValueSpec, type Duration, type DurationUnit, ENTITY_TYPES, type ERCardinality, type ERColumn, type ERConstraint, type ERLayoutEdge, type ERLayoutNode, type ERLayoutResult, type ERRelationship, type ERTable, type ElseIfBranch, type EncodeDiagramUrlOptions, type EncodeDiagramUrlResult, type ExtendedChartType, type ExtractFn, type GanttDependency, type GanttEra, type GanttGroup, type GroupRow as GanttGroupRow, type GanttHolidays, type GanttInteractiveOptions, type LaneHeaderRow as GanttLaneHeaderRow, type GanttMarker, type GanttNode, type GanttOptions, type GanttParallelBlock, type Row as GanttRow, type GanttTask, type TaskRow as GanttTaskRow, type GraphDirection, type GraphEdge, type GraphGroup, type GraphNode, type GraphShape, INFRA_BEHAVIOR_KEYS, type ImportSource, type InfraAvailabilityPercentiles, type InfraBehaviorKey, type InfraCbState, type InfraComputeParams, type InfraDiagnostic, type InfraEdge, type InfraGroup, type InfraLatencyPercentiles, type InfraLayoutEdge, type InfraLayoutGroup, type InfraLayoutNode, type InfraLayoutResult, type InfraLegendGroup, type InfraNode, type InfraPlaybackState, type InfraProperty, type InfraRole, type InfraTagGroup, type InlineSpan, type KanbanCard, type KanbanColumn, type KanbanTagEntry, type KanbanTagGroup, LEGEND_HEIGHT, type LayoutEdge, type LayoutGroup, type LayoutNode, type LayoutResult, type LegendCallbacks, type LegendConfig, type LegendControl, type LegendGroupData, type LegendHandle, type LegendLayout, type LegendMode, type LegendPalette, type LegendPosition, type LegendState, METADATA_KEY_SET, type MemberVisibility, type OrgContainerBounds, type OrgLayoutEdge, type OrgLayoutNode, type OrgLayoutResult, type OrgNode, PIPE_METADATA, type PaletteColors, type PaletteConfig, type ParsedBoxesAndLines, type ParsedC4, type ParsedChart, type ParsedClassDiagram, type ParsedERDiagram, type ParsedExtendedChart, type ParsedGantt, type ParsedGraph, type ParsedInfra, type ParsedKanban, type ParsedOrg, type ParsedQuadrant, type ParsedSequenceDgmo, type ParsedSitemap, type ParsedVisualization, type ParticipantType, type PipeKeySpec, RECOGNIZED_COLOR_NAMES, RULE_COUNT, type ReadFileFn, type RelationshipType, type RenderCategory, type RenderStep, type ResolveImportsResult, type ResolvedGroup, type ResolvedSchedule, type ResolvedTask, type ScatterLabelPoint, type SectionMessageGroup, type SequenceBlock, type SequenceElement, type SequenceGroup, type SequenceMessage, type SequenceNote, type SequenceParticipant, type SequenceRenderOptions, type SequenceSection, type SitemapContainerBounds, type SitemapDirection, type SitemapEdge, type SitemapLayoutEdge, type SitemapLayoutNode, type SitemapLayoutResult, type SitemapLegendEntry, type SitemapLegendGroup, type SitemapNode, type TagEntry, type TagGroup, type VisualizationType, addDurationToDate, applyCollapseProjection, applyGroupOrdering, applyPositionOverrides, boldPalette, buildExtendedChartOption, buildMermaidQuadrant, buildMermaidThemeVars, buildNoteMessageMap, buildRenderSequence, buildSimpleChartOption, buildTagLaneRowList, buildThemeCSS, calculateSchedule, catppuccinPalette, collapseBoxesAndLines, collapseOrgTree, collapseSitemapTree, collectDiagramRoles, collectTasks, colorNames, computeActivations, computeCardArchive, computeCardMove, computeInfra, computeInfraLegendGroups, computeLegendLayout, computeScatterLabelGraphics, computeTimeTicks, contrastText, decodeDiagramUrl, decodeViewState, draculaPalette, encodeDiagramUrl, encodeViewState, extractDiagramSymbols, extractTagDeclarations, formatDateLabel, formatDgmoError, getAvailablePalettes, getExtendedChartLegendGroups, getLegendReservedHeight, getPalette, getRenderCategory, getSeriesColors, getSimpleChartLegendGroups, groupMessagesBySection, gruvboxPalette, hexToHSL, hexToHSLString, hslToHex, inferParticipantType, inferRoles, injectBranding, isArchiveColumn, isExtendedChartType, isRecognizedColorName, isSequenceBlock, isSequenceNote, isValidHex, layoutBoxesAndLines, layoutC4Components, layoutC4Containers, layoutC4Context, layoutC4Deployment, layoutClassDiagram, layoutERDiagram, layoutGraph, layoutInfra, layoutOrg, layoutSitemap, looksLikeClassDiagram, looksLikeERDiagram, looksLikeFlowchart, looksLikeSequence, looksLikeSitemap, looksLikeState, makeDgmoError, monokaiPalette, mute, nord, nordPalette, oneDarkPalette, orderArcNodes, parseAndLayoutInfra, parseBoxesAndLines, parseC4, parseChart, parseClassDiagram, parseDataRowValues, parseDgmo, parseDgmoChartType, parseERDiagram, parseExtendedChart, parseFirstLine, parseFlowchart, parseGantt, parseInfra, parseInlineMarkdown, parseKanban, parseOrg, parseQuadrant, parseSequenceDgmo, parseSitemap, parseState, parseTimelineDate, parseVisualization, registerExtractor, registerPalette, render, renderArcDiagram, renderBoxesAndLines, renderBoxesAndLinesForExport, renderC4ComponentsForExport, renderC4Containers, renderC4ContainersForExport, renderC4Context, renderC4ContextForExport, renderC4Deployment, renderC4DeploymentForExport, renderClassDiagram, renderClassDiagramForExport, renderERDiagram, renderERDiagramForExport, renderExtendedChartForExport, renderFlowchart, renderFlowchartForExport, renderForExport, renderGantt, renderInfra, renderKanban, renderKanbanForExport, renderLegendD3, renderLegendSvg, renderLegendSvgFromConfig, renderOrg, renderOrgForExport, renderQuadrant, renderSequenceDiagram, renderSitemap, renderSitemapForExport, renderSlopeChart, renderState, renderStateForExport, renderTimeline, renderVenn, renderWordCloud, resolveColor, resolveColorWithDiagnostic, resolveOrgImports, resolveTaskName, rollUpContextRelationships, rosePinePalette, seriesColors, shade, solarizedPalette, tint, tokyoNightPalette, truncateBareUrl, validateComputed, validateInfra };
+export { ALL_CHART_TYPES, ARROW_DIAGNOSTIC_CODES, type Activation, type ArcLink, type ArcNodeGroup, type BLCollapseResult, type BLEdge, type BLGroup, type BLLayoutEdge, type BLLayoutGroup, type BLLayoutNode, type BLLayoutResult, type BLNode, type C4ArrowType, type C4DeploymentNode, type C4Element, type C4ElementType, type C4Group, type C4LayoutBoundary, type C4LayoutEdge, type C4LayoutNode, type C4LayoutResult, type C4LegendEntry, type C4LegendGroup, type C4Relationship, type C4Shape, type C4TagEntry, type C4TagGroup, CHART_TYPES, COMPLETION_REGISTRY, type ChartDataPoint, type ChartEra, type ChartType$1 as ChartType, type ClassLayoutEdge, type ClassLayoutNode, type ClassLayoutResult, type ClassMember, type ClassModifier, type ClassNode, type ClassRelationship, type CollapsedMindmapResult, type CollapsedOrgResult, type CollapsedSitemapResult, type CollapsedView, type CompactViewState, type ComputedInfraEdge, type ComputedInfraModel, type ComputedInfraNode, type ContextRelationship, type D3ExportDimensions, type DecodedDiagramUrl, type DgmoError, type DgmoSeverity, type DiagramSymbols, type DirectiveSpec, type DirectiveValueSpec, type Duration, type DurationUnit, ENTITY_TYPES, type ERCardinality, type ERColumn, type ERConstraint, type ERLayoutEdge, type ERLayoutNode, type ERLayoutResult, type ERRelationship, type ERTable, type ElseIfBranch, type EncodeDiagramUrlOptions, type EncodeDiagramUrlResult, type ExtendedChartType, type ExtractFn, type GanttDependency, type GanttEra, type GanttGroup, type GroupRow as GanttGroupRow, type GanttHolidays, type GanttInteractiveOptions, type LaneHeaderRow as GanttLaneHeaderRow, type GanttMarker, type GanttNode, type GanttOptions, type GanttParallelBlock, type Row as GanttRow, type GanttTask, type TaskRow as GanttTaskRow, type GraphDirection, type GraphEdge, type GraphGroup, type GraphNode, type GraphShape, INFRA_BEHAVIOR_KEYS, type ImportSource, type InfraAvailabilityPercentiles, type InfraBehaviorKey, type InfraCbState, type InfraComputeParams, type InfraDiagnostic, type InfraEdge, type InfraGroup, type InfraLatencyPercentiles, type InfraLayoutEdge, type InfraLayoutGroup, type InfraLayoutNode, type InfraLayoutResult, type InfraLegendGroup, type InfraNode, type InfraPlaybackState, type InfraProperty, type InfraRole, type InfraTagGroup, type InlineSpan, type KanbanCard, type KanbanColumn, type KanbanTagEntry, type KanbanTagGroup, LEGEND_HEIGHT, type LayoutEdge, type LayoutGroup, type LayoutNode, type LayoutOptions, type LayoutResult, type LegendCallbacks, type LegendConfig, type LegendControl, type LegendGroupData, type LegendHandle, type LegendLayout, type LegendMode, type LegendPalette, type LegendPosition, type LegendState, METADATA_KEY_SET, type MemberVisibility, type MindmapLayoutEdge, type MindmapLayoutNode, type MindmapLayoutResult, type MindmapNode, type OrgContainerBounds, type OrgLayoutEdge, type OrgLayoutNode, type OrgLayoutResult, type OrgNode, PIPE_METADATA, type PaletteColors, type PaletteConfig, type ParseInArrowLabelResult, type ParsedBoxesAndLines, type ParsedC4, type ParsedChart, type ParsedClassDiagram, type ParsedERDiagram, type ParsedExtendedChart, type ParsedGantt, type ParsedGraph, type ParsedInfra, type ParsedKanban, type ParsedMindmap, type ParsedOrg, type ParsedSequenceDgmo, type ParsedSitemap, type ParsedVisualization, type ParsedWireframe, type ParticipantType, type PipeKeySpec, RECOGNIZED_COLOR_NAMES, RULE_COUNT, type ReadFileFn, type RelationshipType, type RenderCategory, type RenderStep, type ResolveImportsResult, type ResolvedGroup, type ResolvedSchedule, type ResolvedTask, type ScatterLabelPoint, type SectionMessageGroup, type SequenceBlock, type SequenceElement, type SequenceGroup, type SequenceMessage, type SequenceNote, type SequenceParticipant, type SequenceRenderOptions, type SequenceSection, type SitemapContainerBounds, type SitemapDirection, type SitemapEdge, type SitemapLayoutEdge, type SitemapLayoutNode, type SitemapLayoutResult, type SitemapLegendEntry, type SitemapLegendGroup, type SitemapNode, type StateCollapseResult, type TagEntry, type TagGroup, type VisualizationType, type WireframeElement, type WireframeElementType, type WireframeFormFactor, type WireframeLayout, type WireframeLayoutNode, addDurationToDate, applyCollapseProjection, applyGroupOrdering, applyPositionOverrides, boldPalette, buildExtendedChartOption, buildNoteMessageMap, buildRenderSequence, buildSimpleChartOption, buildTagLaneRowList, calculateSchedule, catppuccinPalette, collapseBoxesAndLines, collapseMindmapTree, collapseOrgTree, collapseSitemapTree, collapseStateGroups, collectDiagramRoles, collectTasks, colorNames, computeActivations, computeCardArchive, computeCardMove, computeInfra, computeInfraLegendGroups, computeLegendLayout, computeScatterLabelGraphics, computeTimeTicks, contrastText, decodeDiagramUrl, decodeViewState, draculaPalette, encodeDiagramUrl, encodeViewState, extractDiagramSymbols, extractTagDeclarations, formatDateLabel, formatDgmoError, getAvailablePalettes, getExtendedChartLegendGroups, getLegendReservedHeight, getPalette, getRenderCategory, getSeriesColors, getSimpleChartLegendGroups, groupMessagesBySection, gruvboxPalette, hexToHSL, hexToHSLString, hslToHex, inferParticipantType, inferRoles, isArchiveColumn, isExtendedChartType, isRecognizedColorName, isSequenceBlock, isSequenceNote, isValidHex, layoutBoxesAndLines, layoutC4Components, layoutC4Containers, layoutC4Context, layoutC4Deployment, layoutClassDiagram, layoutERDiagram, layoutGraph, layoutInfra, layoutMindmap, layoutOrg, layoutSitemap, layoutWireframe, looksLikeClassDiagram, looksLikeERDiagram, looksLikeFlowchart, looksLikeSequence, looksLikeSitemap, looksLikeState, makeDgmoError, matchColorParens, mix, monokaiPalette, nord, nordPalette, oneDarkPalette, orderArcNodes, parseAndLayoutInfra, parseBoxesAndLines, parseC4, parseChart, parseClassDiagram, parseDataRowValues, parseDgmo, parseDgmoChartType, parseERDiagram, parseExtendedChart, parseFirstLine, parseFlowchart, parseGantt, parseInArrowLabel, parseInfra, parseInlineMarkdown, parseKanban, parseMindmap, parseOrg, parseSequenceDgmo, parseSitemap, parseState, parseTimelineDate, parseVisualization, parseWireframe, registerExtractor, registerPalette, render, renderArcDiagram, renderBoxesAndLines, renderBoxesAndLinesForExport, renderC4ComponentsForExport, renderC4Containers, renderC4ContainersForExport, renderC4Context, renderC4ContextForExport, renderC4Deployment, renderC4DeploymentForExport, renderClassDiagram, renderClassDiagramForExport, renderERDiagram, renderERDiagramForExport, renderExtendedChartForExport, renderFlowchart, renderFlowchartForExport, renderForExport, renderGantt, renderInfra, renderKanban, renderKanbanForExport, renderLegendD3, renderLegendSvg, renderLegendSvgFromConfig, renderMindmap, renderMindmapForExport, renderOrg, renderOrgForExport, renderQuadrant, renderSequenceDiagram, renderSitemap, renderSitemapForExport, renderSlopeChart, renderState, renderStateForExport, renderTimeline, renderVenn, renderWireframe, renderWordCloud, resolveColor, resolveColorWithDiagnostic, resolveOrgImports, resolveTaskName, rollUpContextRelationships, rosePinePalette, seriesColors, shade, solarizedPalette, tint, tokyoNightPalette, truncateBareUrl, validateComputed, validateInfra, validateLabelCharacters };