@grafloria/element 0.3.18 → 0.3.20

package/src/libs/engine/src/dsl/sync/SyncStateManager.d.ts

@@ -0,0 +1,145 @@
+/**
+ * Sync State Manager - Tracks sync state and provides UI feedback
+ *
+ * Manages synchronization state for UI components:
+ * - Sync status indicators
+ * - Error tracking
+ * - Performance metrics
+ * - Conflict detection
+ */
+import { SyncDirection } from './BidirectionalSync';
+export interface SyncStatus {
+    /**
+     * Current status
+     */
+    status: 'idle' | 'syncing' | 'error' | 'conflict';
+    /**
+     * Status message
+     */
+    message: string;
+    /**
+     * Last sync timestamp
+     */
+    lastSync?: Date;
+    /**
+     * Last sync duration (ms)
+     */
+    lastSyncDuration?: number;
+    /**
+     * Error message if status is 'error'
+     */
+    error?: string;
+}
+export interface SyncMetrics {
+    /**
+     * Total syncs performed
+     */
+    totalSyncs: number;
+    /**
+     * Text → Visual syncs
+     */
+    textToVisual: number;
+    /**
+     * Visual → Text syncs
+     */
+    visualToText: number;
+    /**
+     * Sync errors
+     */
+    errors: number;
+    /**
+     * Conflicts resolved
+     */
+    conflicts: number;
+    /**
+     * Average sync time (ms)
+     */
+    averageSyncTime: number;
+    /**
+     * Session duration (ms)
+     */
+    sessionDuration: number;
+}
+export interface ConflictInfo {
+    /**
+     * Timestamp of conflict
+     */
+    timestamp: Date;
+    /**
+     * Conflicting edit sources
+     */
+    sources: [SyncDirection, SyncDirection];
+    /**
+     * Resolution strategy used
+     */
+    resolution: 'last-write-wins' | 'user-choice' | 'merge';
+    /**
+     * Was conflict resolved
+     */
+    resolved: boolean;
+}
+export type StatusChangeCallback = (status: SyncStatus) => void;
+export declare class SyncStateManager {
+    private status;
+    private metrics;
+    private sessionStart;
+    private syncTimes;
+    private conflicts;
+    private callbacks;
+    /**
+     * Mark sync as started
+     */
+    startSync(direction: SyncDirection): void;
+    /**
+     * Mark sync as completed
+     */
+    completeSync(direction: SyncDirection, duration: number): void;
+    /**
+     * Mark sync as failed
+     */
+    failSync(error: string): void;
+    /**
+     * Record a conflict
+     */
+    recordConflict(sources: [SyncDirection, SyncDirection], resolution: ConflictInfo['resolution']): void;
+    /**
+     * Get current status
+     */
+    getStatus(): Readonly<SyncStatus>;
+    /**
+     * Get metrics
+     */
+    getMetrics(): Readonly<SyncMetrics>;
+    /**
+     * Get recent conflicts
+     */
+    getConflicts(limit?: number): ConflictInfo[];
+    /**
+     * Subscribe to status changes
+     */
+    onStatusChange(callback: StatusChangeCallback): () => void;
+    /**
+     * Notify callbacks
+     */
+    private notifyCallbacks;
+    /**
+     * Get sync message for direction
+     */
+    private getSyncMessage;
+    /**
+     * Reset metrics
+     */
+    resetMetrics(): void;
+    /**
+     * Get formatted status for display
+     */
+    getFormattedStatus(): string;
+    /**
+     * Get status icon
+     */
+    private getStatusIcon;
+    /**
+     * Get metrics summary
+     */
+    getMetricsSummary(): string;
+}

package/src/libs/engine/src/dsl/sync/SyncStateManager.js

@@ -0,0 +1,253 @@
+"use strict";
+/**
+ * Sync State Manager - Tracks sync state and provides UI feedback
+ *
+ * Manages synchronization state for UI components:
+ * - Sync status indicators
+ * - Error tracking
+ * - Performance metrics
+ * - Conflict detection
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SyncStateManager = void 0;
+class SyncStateManager {
+    constructor() {
+        this.status = {
+            status: 'idle',
+            message: 'Ready',
+        };
+        this.metrics = {
+            totalSyncs: 0,
+            textToVisual: 0,
+            visualToText: 0,
+            errors: 0,
+            conflicts: 0,
+            averageSyncTime: 0,
+            sessionDuration: 0,
+        };
+        this.sessionStart = new Date();
+        this.syncTimes = [];
+        this.conflicts = [];
+        this.callbacks = [];
+    }
+    /**
+     * Mark sync as started
+     */
+    startSync(direction) {
+        this.status = {
+            status: 'syncing',
+            message: this.getSyncMessage(direction),
+            lastSync: this.status.lastSync,
+            lastSyncDuration: this.status.lastSyncDuration,
+        };
+        this.notifyCallbacks();
+    }
+    /**
+     * Mark sync as completed
+     */
+    completeSync(direction, duration) {
+        // Update metrics
+        this.metrics.totalSyncs++;
+        if (direction === 'text-to-visual') {
+            this.metrics.textToVisual++;
+        }
+        else if (direction === 'visual-to-text') {
+            this.metrics.visualToText++;
+        }
+        // Track sync time
+        this.syncTimes.push(duration);
+        if (this.syncTimes.length > 100) {
+            this.syncTimes.shift(); // Keep last 100
+        }
+        // Calculate average
+        this.metrics.averageSyncTime =
+            this.syncTimes.reduce((a, b) => a + b, 0) / this.syncTimes.length;
+        // Update session duration
+        this.metrics.sessionDuration = Date.now() - this.sessionStart.getTime();
+        // Update status
+        this.status = {
+            status: 'idle',
+            message: 'Synced',
+            lastSync: new Date(),
+            lastSyncDuration: duration,
+        };
+        this.notifyCallbacks();
+    }
+    /**
+     * Mark sync as failed
+     */
+    failSync(error) {
+        this.metrics.errors++;
+        this.status = {
+            status: 'error',
+            message: 'Sync failed',
+            error,
+            lastSync: this.status.lastSync,
+            lastSyncDuration: this.status.lastSyncDuration,
+        };
+        this.notifyCallbacks();
+    }
+    /**
+     * Record a conflict
+     */
+    recordConflict(sources, resolution) {
+        const conflict = {
+            timestamp: new Date(),
+            sources,
+            resolution,
+            resolved: true,
+        };
+        this.conflicts.push(conflict);
+        this.metrics.conflicts++;
+        this.status = {
+            status: 'conflict',
+            message: 'Conflict resolved',
+            lastSync: new Date(),
+        };
+        this.notifyCallbacks();
+        // Return to idle after brief display
+        setTimeout(() => {
+            if (this.status.status === 'conflict') {
+                this.status = {
+                    status: 'idle',
+                    message: 'Ready',
+                    lastSync: this.status.lastSync,
+                    lastSyncDuration: this.status.lastSyncDuration,
+                };
+                this.notifyCallbacks();
+            }
+        }, 2000);
+    }
+    /**
+     * Get current status
+     */
+    getStatus() {
+        return Object.assign({}, this.status);
+    }
+    /**
+     * Get metrics
+     */
+    getMetrics() {
+        return Object.assign({}, this.metrics);
+    }
+    /**
+     * Get recent conflicts
+     */
+    getConflicts(limit = 10) {
+        return this.conflicts.slice(-limit);
+    }
+    /**
+     * Subscribe to status changes
+     */
+    onStatusChange(callback) {
+        this.callbacks.push(callback);
+        // Return unsubscribe function
+        return () => {
+            const index = this.callbacks.indexOf(callback);
+            if (index > -1) {
+                this.callbacks.splice(index, 1);
+            }
+        };
+    }
+    /**
+     * Notify callbacks
+     */
+    notifyCallbacks() {
+        for (const callback of this.callbacks) {
+            try {
+                callback(this.status);
+            }
+            catch (error) {
+                console.error('[SyncStateManager] Callback error:', error);
+            }
+        }
+    }
+    /**
+     * Get sync message for direction
+     */
+    getSyncMessage(direction) {
+        switch (direction) {
+            case 'text-to-visual':
+                return 'Updating diagram...';
+            case 'visual-to-text':
+                return 'Updating text...';
+            default:
+                return 'Syncing...';
+        }
+    }
+    /**
+     * Reset metrics
+     */
+    resetMetrics() {
+        this.metrics = {
+            totalSyncs: 0,
+            textToVisual: 0,
+            visualToText: 0,
+            errors: 0,
+            conflicts: 0,
+            averageSyncTime: 0,
+            sessionDuration: 0,
+        };
+        this.sessionStart = new Date();
+        this.syncTimes = [];
+        this.conflicts = [];
+    }
+    /**
+     * Get formatted status for display
+     */
+    getFormattedStatus() {
+        const { status, message, lastSync, lastSyncDuration } = this.status;
+        let formatted = `${this.getStatusIcon(status)} ${message}`;
+        if (lastSync && status === 'idle') {
+            const ago = Date.now() - lastSync.getTime();
+            if (ago < 1000) {
+                formatted += ' (just now)';
+            }
+            else if (ago < 60000) {
+                formatted += ` (${Math.floor(ago / 1000)}s ago)`;
+            }
+            else {
+                formatted += ` (${Math.floor(ago / 60000)}m ago)`;
+            }
+        }
+        if (lastSyncDuration) {
+            formatted += ` • ${lastSyncDuration.toFixed(0)}ms`;
+        }
+        return formatted;
+    }
+    /**
+     * Get status icon
+     */
+    getStatusIcon(status) {
+        switch (status) {
+            case 'idle':
+                return '✓';
+            case 'syncing':
+                return '⟳';
+            case 'error':
+                return '✗';
+            case 'conflict':
+                return '⚠';
+            default:
+                return '•';
+        }
+    }
+    /**
+     * Get metrics summary
+     */
+    getMetricsSummary() {
+        const m = this.metrics;
+        const lines = [
+            `Total syncs: ${m.totalSyncs}`,
+            `Text → Visual: ${m.textToVisual}`,
+            `Visual → Text: ${m.visualToText}`,
+            `Errors: ${m.errors}`,
+            `Conflicts: ${m.conflicts}`,
+            `Avg sync time: ${m.averageSyncTime.toFixed(2)}ms`,
+            `Session: ${(m.sessionDuration / 1000).toFixed(0)}s`,
+        ];
+        return lines.join('\n');
+    }
+}
+exports.SyncStateManager = SyncStateManager;
+//# sourceMappingURL=SyncStateManager.js.map

package/src/libs/engine/src/dsl/sync/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * DSL Sync Module - Bidirectional synchronization components
+ *
+ * Provides real-time text ↔ visual editing with:
+ * - 300ms debounced sync
+ * - Auto-layout application
+ * - State management and metrics
+ * - Conflict resolution
+ */
+export { BidirectionalSync, type SyncOptions, type SyncDirection, type EditSource, type SyncState, type SyncCallback, } from './BidirectionalSync';
+export { LayoutApplicator, type LayoutApplicatorOptions, type LayoutApplicationResult, } from './LayoutApplicator';
+export { SyncStateManager, type SyncStatus, type SyncMetrics, type ConflictInfo, type StatusChangeCallback, } from './SyncStateManager';
+export { IntegratedSyncManager, type IntegratedSyncOptions, type TextChangeCallback, type DiagramChangeCallback, type StatusCallback, } from './IntegratedSyncManager';

package/src/libs/engine/src/dsl/sync/index.js

@@ -0,0 +1,21 @@
+"use strict";
+/**
+ * DSL Sync Module - Bidirectional synchronization components
+ *
+ * Provides real-time text ↔ visual editing with:
+ * - 300ms debounced sync
+ * - Auto-layout application
+ * - State management and metrics
+ * - Conflict resolution
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntegratedSyncManager = exports.SyncStateManager = exports.LayoutApplicator = exports.BidirectionalSync = void 0;
+var BidirectionalSync_1 = require("./BidirectionalSync");
+Object.defineProperty(exports, "BidirectionalSync", { enumerable: true, get: function () { return BidirectionalSync_1.BidirectionalSync; } });
+var LayoutApplicator_1 = require("./LayoutApplicator");
+Object.defineProperty(exports, "LayoutApplicator", { enumerable: true, get: function () { return LayoutApplicator_1.LayoutApplicator; } });
+var SyncStateManager_1 = require("./SyncStateManager");
+Object.defineProperty(exports, "SyncStateManager", { enumerable: true, get: function () { return SyncStateManager_1.SyncStateManager; } });
+var IntegratedSyncManager_1 = require("./IntegratedSyncManager");
+Object.defineProperty(exports, "IntegratedSyncManager", { enumerable: true, get: function () { return IntegratedSyncManager_1.IntegratedSyncManager; } });
+//# sourceMappingURL=index.js.map

package/src/libs/engine/src/dsl/transformer/ASTTransformer.d.ts

@@ -0,0 +1,150 @@
+/**
+ * AST Transformer - Converts Abstract Syntax Tree to DiagramModel
+ *
+ * Takes the parsed AST from the Parser and transforms it into
+ * concrete NodeModel and LinkModel instances within a DiagramModel.
+ */
+import { DiagramModel } from '../../models/DiagramModel';
+import { DiagramNode } from '../types/ASTNode';
+export interface TransformOptions {
+    /**
+     * Default node size if not specified
+     */
+    defaultNodeSize?: {
+        width: number;
+        height: number;
+    };
+    /**
+     * Spacing between auto-positioned nodes
+     */
+    nodeSpacing?: number;
+    /**
+     * Starting position for auto-positioned nodes
+     */
+    startPosition?: {
+        x: number;
+        y: number;
+    };
+    /**
+     * Auto-generate positions (true) or use default position for all (false)
+     */
+    autoPosition?: boolean;
+    /**
+     * Name for the generated diagram
+     */
+    diagramName?: string;
+}
+export declare class ASTTransformer {
+    private nodePositions;
+    private nextAutoPosition;
+    private nodeSpacing;
+    /**
+     * The axis auto-placement advances along, from the diagram's direction
+     * keyword. `flowchart TD` is TOP-DOWN and must stack vertically; every
+     * direction used to lay out identically left-to-right, so TD/TB read as LR.
+     */
+    private flowAxis;
+    /**
+     * Transform AST into DiagramModel
+     */
+    transform(ast: DiagramNode, options?: TransformOptions): DiagramModel;
+    /**
+     * Rank-based placement over the whole parsed graph (Phase 2.5).
+     *
+     * Only nodes THIS transform auto-positioned (`this.nodePositions`) move — a
+     * guard, not a hope: anything with an explicit position (restored later by
+     * the sidecar, or added by a caller) must never be rearranged by a parse.
+     * Synchronous and deterministic; see dsl/mermaid/layout.ts.
+     */
+    private applyRankPlacement;
+    /**
+     * Process a single statement
+     */
+    private processStatement;
+    /** Depth-first flatten so directives inside subgraphs are applied too. */
+    private flattenStatements;
+    /**
+     * Phase 3 — apply the extension channel. Node-targeting directives first
+     * (style/class/click), then link-targeting ones (linkStyle/grafloria:edge) which
+     * depend on link order.
+     */
+    private applyDirectives;
+    /** `class a,b hot` — resolve the classDef and apply it to each node. */
+    private applyClass;
+    /** `linkStyle 0,2 …` — style links by insertion index (or 'default' = all). */
+    private applyLinkStyle;
+    /** `click a "url" "tip"` — the node's navigation target (metadata, not a node). */
+    private applyClick;
+    /** `%%grafloria:node a status:running` — Grafloria-only node state. */
+    private applyGrafloriaNode;
+    /** `%%grafloria:edge a b animation:flow` — Grafloria-only edge animation. */
+    private applyGrafloriaEdge;
+    /**
+     * Create a node from NodeDefinitionNode
+     */
+    private createNode;
+    /**
+     * Create a link from EdgeDefinitionNode
+     */
+    private createLink;
+    /**
+     * Create a subgraph as a real GroupModel whose members are the nodes defined
+     * inside it. Mermaid's `subgraph … end` is a container; mapping it to a group
+     * is what makes "collapse the subgraph" and drop-to-assign work downstream.
+     */
+    private createSubgraph;
+    /**
+     * Node ids defined AT THIS subgraph level (its own node defs + edge
+     * endpoints). Nested subgraphs form their own groups, so their nodes are not
+     * pulled into the parent's membership.
+     */
+    private collectDirectNodeIds;
+    /**
+     * Apply style to a node
+     */
+    private applyStyle;
+    /**
+     * Store class definition in diagram metadata
+     */
+    private storeClassDef;
+    /**
+     * Apply style properties to a node
+     */
+    private applyStyleToNode;
+    /**
+     * Apply style properties to a link
+     */
+    private applyStyleToLink;
+    /**
+     * Apply link type styling (dashed, thick, etc.)
+     */
+    private applyLinkTypeStyle;
+    /**
+     * Get node type from shape
+     */
+    private getNodeTypeFromShape;
+    /**
+     * Convert DSL NodeShape to SVG renderer shape configuration
+     * SVG renderer expects shape metadata in format: { type: 'rect' | 'circle' | 'ellipse' | 'diamond' | 'hexagon', cornerRadius?: number }
+     */
+    private getShapeConfigFromDSLShape;
+    /**
+     * Get size for shape
+     */
+    private getSizeForShape;
+    /**
+     * Get path type from link type
+     */
+    private getPathTypeFromLinkType;
+    /**
+     * Get next auto-position for a node
+     */
+    private getNextAutoPosition;
+    /**
+     * Reset auto-positioning state
+     */
+    resetAutoPosition(startPosition: {
+        x: number;
+        y: number;
+    }): void;
+}