@chengchenccc/tui 0.1.1-rc.1

package/dist/vendor/mermaid-ascii/ascii/er-diagram.js

@@ -0,0 +1,380 @@
+// ============================================================================
+// ASCII renderer — ER diagrams
+//
+// Renders erDiagram text to ASCII/Unicode art.
+// Each entity is a 2-section box (header | attributes).
+// Relationships are drawn as lines with crow's foot notation at endpoints.
+//
+// Layout: entities are placed in a grid pattern (multiple rows if needed).
+// Relationship lines use Manhattan routing between entity boxes.
+// ============================================================================
+import { parseErDiagram } from "../er/parser.js";
+import { mkCanvas, mkRoleCanvas, canvasToString, increaseSize, increaseRoleCanvasSize, setRole } from "./canvas.js";
+import { drawMultiBox } from "./draw.js";
+import { splitLines } from "./multiline-utils.js";
+import { displayWidth, toCells, WIDE_PAD } from "../text-metrics.js";
+/** Classify a character from a box drawing as 'border' or 'text'. */
+function classifyBoxChar(ch) {
+    if (/^[┌┐└┘├┤┬┴┼│─╭╮╰╯+\-|]$/.test(ch))
+        return 'border';
+    return 'text';
+}
+// ============================================================================
+// Entity box content
+// ============================================================================
+/** Format an attribute line: "PK type name" or "FK type name" etc. */
+function formatAttribute(attr) {
+    const keyStr = attr.keys.length > 0 ? attr.keys.join(',') + ' ' : '   ';
+    return `${keyStr}${attr.type} ${attr.name}`;
+}
+/** Build sections for an entity box: [header], [attributes] */
+function buildEntitySections(entity) {
+    // Support multi-line entity names
+    const header = splitLines(entity.label);
+    const attrs = entity.attributes.map(formatAttribute);
+    if (attrs.length === 0)
+        return [header];
+    return [header, attrs];
+}
+// ============================================================================
+// Crow's foot notation
+// ============================================================================
+/**
+ * Returns the ASCII/Unicode characters for a crow's foot cardinality marker.
+ * Markers are drawn adjacent to entity boxes at relationship endpoints.
+ *
+ * Standard ER notation:
+ *   one:       ─┤├─   perpendicular line (exactly one)
+ *   zero-one:  ─○┤─   circle + perpendicular (zero or one)
+ *   many:      ─<>─   crow's foot (one or more)
+ *   zero-many: ─○<─   circle + crow's foot (zero or more)
+ *
+ * @param card - The cardinality type
+ * @param useAscii - Use ASCII-only characters
+ * @param isRight - True if this marker is on the right side of the relationship
+ */
+function getCrowsFootChars(card, useAscii, isRight = false) {
+    if (useAscii) {
+        switch (card) {
+            case 'one': return '|';
+            case 'zero-one': return 'o|';
+            case 'many': return isRight ? '<' : '>';
+            case 'zero-many': return isRight ? 'o<' : '>o';
+        }
+    }
+    else {
+        // Use cleaner Unicode characters
+        switch (card) {
+            case 'one': return '│';
+            case 'zero-one': return '○│';
+            case 'many': return isRight ? '╟' : '╢';
+            case 'zero-many': return isRight ? '○╟' : '╢○';
+        }
+    }
+}
+// ============================================================================
+// Connected Component Detection
+// ============================================================================
+/**
+ * Find connected components in the ER diagram using DFS.
+ * Treats relationships as undirected edges for connectivity.
+ *
+ * Returns an array of entity ID sets, one per connected component.
+ */
+function findConnectedComponents(diagram) {
+    const visited = new Set();
+    const components = [];
+    // Build undirected adjacency list from relationships
+    const neighbors = new Map();
+    for (const ent of diagram.entities) {
+        neighbors.set(ent.id, new Set());
+    }
+    for (const rel of diagram.relationships) {
+        neighbors.get(rel.entity1)?.add(rel.entity2);
+        neighbors.get(rel.entity2)?.add(rel.entity1);
+    }
+    // DFS to find each component
+    function dfs(startId, component) {
+        const stack = [startId];
+        while (stack.length > 0) {
+            const nodeId = stack.pop();
+            if (visited.has(nodeId))
+                continue;
+            visited.add(nodeId);
+            component.add(nodeId);
+            for (const neighbor of neighbors.get(nodeId) ?? []) {
+                if (!visited.has(neighbor)) {
+                    stack.push(neighbor);
+                }
+            }
+        }
+    }
+    // Find all components
+    for (const ent of diagram.entities) {
+        if (!visited.has(ent.id)) {
+            const component = new Set();
+            dfs(ent.id, component);
+            if (component.size > 0) {
+                components.push(component);
+            }
+        }
+    }
+    return components;
+}
+// ============================================================================
+// Layout and rendering
+// ============================================================================
+/**
+ * Render a Mermaid ER diagram to ASCII/Unicode text.
+ *
+ * Pipeline: parse → build boxes → component-aware layout → draw boxes → draw relationships → string.
+ */
+export function renderErAscii(text, config, colorMode, theme) {
+    const lines = text.split('\n').map(l => l.trim()).filter(l => l.length > 0 && !l.startsWith('%%'));
+    const diagram = parseErDiagram(lines);
+    if (diagram.entities.length === 0)
+        return '';
+    const useAscii = config.useAscii;
+    const hGap = 6; // horizontal gap between entity boxes
+    const vGap = 4; // vertical gap between rows (for relationship lines)
+    const componentGap = 6; // vertical gap between disconnected components
+    // --- Build entity box dimensions ---
+    const entitySections = new Map();
+    const entityBoxW = new Map();
+    const entityBoxH = new Map();
+    const entityById = new Map();
+    for (const ent of diagram.entities) {
+        entityById.set(ent.id, ent);
+        const sections = buildEntitySections(ent);
+        entitySections.set(ent.id, sections);
+        let maxTextW = 0;
+        for (const section of sections) {
+            for (const line of section)
+                maxTextW = Math.max(maxTextW, displayWidth(line));
+        }
+        const boxW = maxTextW + 4; // 2 border + 2 padding
+        let totalLines = 0;
+        for (const section of sections)
+            totalLines += Math.max(section.length, 1);
+        const boxH = totalLines + (sections.length - 1) + 2;
+        entityBoxW.set(ent.id, boxW);
+        entityBoxH.set(ent.id, boxH);
+    }
+    // --- Find connected components ---
+    const components = findConnectedComponents(diagram);
+    // --- Layout: place each component, then stack components vertically ---
+    const placed = new Map();
+    let currentY = 0;
+    for (const component of components) {
+        // Get entities in this component (preserve original order for consistency)
+        const componentEntities = diagram.entities.filter(e => component.has(e.id));
+        // Layout entities within this component horizontally
+        // Use sqrt-based row limit for larger components
+        const maxPerRow = Math.max(2, Math.ceil(Math.sqrt(componentEntities.length)));
+        let currentX = 0;
+        let maxRowH = 0;
+        let colCount = 0;
+        const componentStartY = currentY;
+        for (const ent of componentEntities) {
+            const w = entityBoxW.get(ent.id);
+            const h = entityBoxH.get(ent.id);
+            if (colCount >= maxPerRow) {
+                // Wrap to next row within this component
+                currentY += maxRowH + vGap;
+                currentX = 0;
+                maxRowH = 0;
+                colCount = 0;
+            }
+            placed.set(ent.id, {
+                entity: ent,
+                sections: entitySections.get(ent.id),
+                x: currentX,
+                y: currentY,
+                width: w,
+                height: h,
+            });
+            currentX += w + hGap;
+            maxRowH = Math.max(maxRowH, h);
+            colCount++;
+        }
+        // Move to next component row (add gap between components)
+        currentY += maxRowH + componentGap;
+    }
+    // --- Create canvas ---
+    let totalW = 0;
+    let totalH = 0;
+    for (const p of placed.values()) {
+        totalW = Math.max(totalW, p.x + p.width);
+        totalH = Math.max(totalH, p.y + p.height);
+    }
+    totalW += 4;
+    totalH += 2;
+    const canvas = mkCanvas(totalW - 1, totalH - 1);
+    const rc = mkRoleCanvas(totalW - 1, totalH - 1);
+    /** Set a character on the canvas and track its role. */
+    function setC(x, y, ch, role) {
+        if (x >= 0 && x < canvas.length && y >= 0 && y < (canvas[0]?.length ?? 0)) {
+            canvas[x][y] = ch;
+            setRole(rc, x, y, role);
+        }
+    }
+    // --- Draw entity boxes ---
+    for (const p of placed.values()) {
+        const boxCanvas = drawMultiBox(p.sections, useAscii);
+        for (let bx = 0; bx < boxCanvas.length; bx++) {
+            for (let by = 0; by < boxCanvas[0].length; by++) {
+                const ch = boxCanvas[bx][by];
+                if (ch !== ' ') {
+                    const cx = p.x + bx;
+                    const cy = p.y + by;
+                    if (cx < totalW && cy < totalH) {
+                        setC(cx, cy, ch, classifyBoxChar(ch));
+                    }
+                }
+            }
+        }
+    }
+    // --- Draw relationships ---
+    const H = useAscii ? '-' : '─';
+    const V = useAscii ? '|' : '│';
+    const dashH = useAscii ? '.' : '╌';
+    const dashV = useAscii ? ':' : '┊';
+    for (const rel of diagram.relationships) {
+        const e1 = placed.get(rel.entity1);
+        const e2 = placed.get(rel.entity2);
+        if (!e1 || !e2)
+            continue;
+        const lineH = rel.identifying ? H : dashH;
+        const lineV = rel.identifying ? V : dashV;
+        // Determine connection direction based on relative position.
+        // Connect from right side of left entity to left side of right entity (horizontal),
+        // or from bottom of upper entity to top of lower entity (vertical).
+        const e1CX = e1.x + Math.floor(e1.width / 2);
+        const e1CY = e1.y + Math.floor(e1.height / 2);
+        const e2CX = e2.x + Math.floor(e2.width / 2);
+        const e2CY = e2.y + Math.floor(e2.height / 2);
+        // Check if entities are on the same row (horizontal connection)
+        const sameRow = Math.abs(e1CY - e2CY) < Math.max(e1.height, e2.height);
+        if (sameRow) {
+            // Horizontal connection: right side of left entity → left side of right entity
+            const [left, right] = e1CX < e2CX ? [e1, e2] : [e2, e1];
+            const [leftCard, rightCard] = e1CX < e2CX
+                ? [rel.cardinality1, rel.cardinality2]
+                : [rel.cardinality2, rel.cardinality1];
+            const startX = left.x + left.width;
+            const endX = right.x - 1;
+            const lineY = left.y + Math.floor(left.height / 2);
+            // Draw horizontal line
+            for (let x = startX; x <= endX; x++) {
+                setC(x, lineY, lineH, 'line');
+            }
+            // Draw crow's foot markers at endpoints
+            // Left marker (at left entity's right edge) - isRight=false
+            const leftChars = getCrowsFootChars(leftCard, useAscii, false);
+            for (let i = 0; i < leftChars.length; i++) {
+                setC(startX + i, lineY, leftChars[i], 'arrow');
+            }
+            // Right marker (at right entity's left edge) - isRight=true
+            const rightChars = getCrowsFootChars(rightCard, useAscii, true);
+            for (let i = 0; i < rightChars.length; i++) {
+                setC(endX - rightChars.length + 1 + i, lineY, rightChars[i], 'arrow');
+            }
+            // Relationship label centered in the gap between the two entities, below the line.
+            // Clamp label to the gap region [startX, endX] to avoid overwriting box borders.
+            // Supports multi-line labels.
+            if (rel.label) {
+                const lines = splitLines(rel.label);
+                const gapMid = Math.floor((startX + endX) / 2);
+                // Place lines below the relationship line (lineY + 1, lineY + 2, ...)
+                for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+                    const line = lines[lineIdx];
+                    const cells = toCells(line);
+                    const labelStart = Math.max(startX, gapMid - Math.floor(cells.length / 2));
+                    const labelY = lineY + 1 + lineIdx;
+                    // Ensure canvas is tall enough
+                    increaseSize(canvas, Math.max(labelStart + cells.length, 1), Math.max(labelY + 1, 1));
+                    increaseRoleCanvasSize(rc, Math.max(labelStart + cells.length, 1), Math.max(labelY + 1, 1));
+                    for (let i = 0; i < cells.length; i++) {
+                        const cell = cells[i];
+                        if (cell === WIDE_PAD)
+                            continue; // written atomically with its lead
+                        const lx = labelStart + i;
+                        const wide = cells[i + 1] === WIDE_PAD;
+                        // Keep wide-glyph pairs atomic within the gap region
+                        if (lx < startX || lx + (wide ? 1 : 0) > endX)
+                            continue;
+                        setC(lx, labelY, cell, 'text');
+                        if (wide)
+                            setC(lx + 1, labelY, WIDE_PAD, 'text');
+                    }
+                }
+            }
+        }
+        else {
+            // Vertical connection: bottom of upper entity → top of lower entity
+            const [upper, lower] = e1CY < e2CY ? [e1, e2] : [e2, e1];
+            const [upperCard, lowerCard] = e1CY < e2CY
+                ? [rel.cardinality1, rel.cardinality2]
+                : [rel.cardinality2, rel.cardinality1];
+            const startY = upper.y + upper.height;
+            const endY = lower.y - 1;
+            const lineX = upper.x + Math.floor(upper.width / 2);
+            // Vertical line
+            for (let y = startY; y <= endY; y++) {
+                setC(lineX, y, lineV, 'line');
+            }
+            // If horizontal offset needed, add a horizontal segment
+            const lowerCX = lower.x + Math.floor(lower.width / 2);
+            if (lineX !== lowerCX) {
+                const midY = Math.floor((startY + endY) / 2);
+                // Horizontal segment at midY
+                const lx = Math.min(lineX, lowerCX);
+                const rx = Math.max(lineX, lowerCX);
+                for (let x = lx; x <= rx; x++) {
+                    setC(x, midY, lineH, 'line');
+                }
+                // Vertical from midY to lower entity
+                for (let y = midY + 1; y <= endY; y++) {
+                    setC(lowerCX, y, lineV, 'line');
+                }
+            }
+            // Crow's foot markers (vertical direction)
+            // Upper marker (at upper entity's bottom edge) - treat as source side (isRight=false)
+            const upperChars = getCrowsFootChars(upperCard, useAscii, false);
+            for (let i = 0; i < upperChars.length; i++) {
+                setC(lineX - Math.floor(upperChars.length / 2) + i, startY, upperChars[i], 'arrow');
+            }
+            // Lower marker (at lower entity's top edge) - treat as target side (isRight=true)
+            const targetX = lineX !== lowerCX ? lowerCX : lineX;
+            const lowerChars = getCrowsFootChars(lowerCard, useAscii, true);
+            for (let i = 0; i < lowerChars.length; i++) {
+                setC(targetX - Math.floor(lowerChars.length / 2) + i, endY, lowerChars[i], 'arrow');
+            }
+            // Relationship label — placed to the right of the vertical line at the midpoint.
+            // We expand the canvas as needed since labels can extend beyond the initial bounds.
+            // Supports multi-line labels.
+            if (rel.label) {
+                const lines = splitLines(rel.label);
+                const midY = Math.floor((startY + endY) / 2);
+                // Center lines vertically around midY
+                const startLabelY = midY - Math.floor((lines.length - 1) / 2);
+                for (let lineIdx = 0; lineIdx < lines.length; lineIdx++) {
+                    const cells = toCells(lines[lineIdx]);
+                    const labelX = lineX + 2;
+                    const y = startLabelY + lineIdx;
+                    if (y >= 0) {
+                        for (let i = 0; i < cells.length; i++) {
+                            const lx = labelX + i;
+                            if (lx >= 0) {
+                                increaseSize(canvas, lx + 1, y + 1);
+                                increaseRoleCanvasSize(rc, lx + 1, y + 1);
+                                setC(lx, y, cells[i], 'text');
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return canvasToString(canvas, { roleCanvas: rc, colorMode, theme });
+}

package/dist/vendor/mermaid-ascii/ascii/grid.d.ts

@@ -0,0 +1,57 @@
+import type { GridCoord, DrawingCoord, Direction, AsciiGraph, AsciiNode, AsciiSubgraph } from './types.ts';
+/**
+ * Convert a grid coordinate to a drawing (character) coordinate.
+ * Sums column widths up to the target column, and row heights up to the target row,
+ * then centers within the cell.
+ */
+export declare function gridToDrawingCoord(graph: AsciiGraph, c: GridCoord, dir?: Direction): DrawingCoord;
+/** Convert a path of grid coords to drawing coords. */
+export declare function lineToDrawing(graph: AsciiGraph, line: GridCoord[]): DrawingCoord[];
+/**
+ * Reserve a 3x3 block in the grid for a node.
+ * If the requested position is occupied, recursively shift by 4 grid units
+ * (in the perpendicular direction based on effective direction) until a free spot is found.
+ *
+ * @param effectiveDir - Optional direction override. If not provided, uses the node's
+ *                       effective direction (subgraph direction if in a subgraph with override,
+ *                       otherwise graph direction).
+ */
+export declare function reserveSpotInGrid(graph: AsciiGraph, node: AsciiNode, requested: GridCoord, effectiveDir?: 'LR' | 'TD'): GridCoord;
+/**
+ * Set column widths and row heights for a node's 3x3 grid block.
+ * Each node occupies 3 columns (border, content, border) and 3 rows.
+ * Uses shape-aware dimensions to properly size non-rectangular shapes.
+ */
+export declare function setColumnWidth(graph: AsciiGraph, node: AsciiNode): void;
+/** Ensure grid has width/height entries for all cells along an edge path. */
+export declare function increaseGridSizeForPath(graph: AsciiGraph, path: GridCoord[]): void;
+/**
+ * Get the innermost subgraph that directly contains this node.
+ * Returns null if node is not in any subgraph.
+ */
+export declare function getNodeSubgraph(graph: AsciiGraph, node: AsciiNode): AsciiSubgraph | null;
+/**
+ * Get the effective direction for a node's layout.
+ * Returns the subgraph's direction override if the node is in a subgraph with one,
+ * otherwise returns the graph-level direction.
+ */
+export declare function getEffectiveDirection(graph: AsciiGraph, node: AsciiNode): 'LR' | 'TD';
+export declare function calculateSubgraphBoundingBoxes(graph: AsciiGraph): void;
+/**
+ * Offset all drawing coordinates so subgraph borders don't go negative.
+ * If any subgraph has negative min coordinates, shift everything positive.
+ */
+export declare function offsetDrawingForSubgraphs(graph: AsciiGraph): void;
+/**
+ * createMapping performs the full grid layout:
+ * 1. Place root nodes on the grid
+ * 2. Place child nodes level by level
+ * 3. Compute column widths and row heights
+ * 4. Run A* pathfinding for all edges
+ * 5. Determine label placement
+ * 6. Convert grid coords → drawing coords
+ * 7. Generate node box drawings
+ * 8. Calculate subgraph bounding boxes
+ */
+export declare function createMapping(graph: AsciiGraph): void;
+//# sourceMappingURL=grid.d.ts.map

package/dist/vendor/mermaid-ascii/ascii/grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/vendor/mermaid-ascii/ascii/grid.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EACzE,MAAM,YAAY,CAAA;AAoBnB;;;;GAIG;AACH,wBAAgB,kBAAkB,CAChC,KAAK,EAAE,UAAU,EACjB,CAAC,EAAE,SAAS,EACZ,GAAG,CAAC,EAAE,SAAS,GACd,YAAY,CAqBd;AAED,uDAAuD;AACvD,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,YAAY,EAAE,CAElF;AAMD;;;;;;;;GAQG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,UAAU,EACjB,IAAI,EAAE,SAAS,EACf,SAAS,EAAE,SAAS,EACpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GACzB,SAAS,CAuBX;AAMD;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,CA0CvE;AAED,6EAA6E;AAC7E,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CASlF;AAUD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,GAAG,aAAa,GAAG,IAAI,CAYxF;AAYD;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,GAAG,IAAI,GAAG,IAAI,CAMrF;AAuHD,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAKtE;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CAsCjE;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,UAAU,GAAG,IAAI,CA0KrD"}