@elixpo/lixsketch 5.4.7 → 5.5.1

package/dist/react/textTool-M7S6F3VC.js

@@ -0,0 +1,21 @@
+"use client";
+import {
+  deselectElement,
+  enterEditMode,
+  handleTextMouseDown,
+  handleTextMouseMove,
+  handleTextMouseUp,
+  updateCodeToggleForShape
+} from "./chunk-JJCJNLNN.js";
+import "./chunk-LHRTXNVE.js";
+import "./chunk-BZE4CEBG.js";
+import "./chunk-L5OARZJ7.js";
+export {
+  deselectElement as deselectTextElement,
+  enterEditMode,
+  handleTextMouseDown,
+  handleTextMouseMove,
+  handleTextMouseUp,
+  updateCodeToggleForShape
+};
+//# sourceMappingURL=textTool-M7S6F3VC.js.map

package/dist/react/textTool-M7S6F3VC.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/package.json

@@ -1,17 +1,26 @@
 {
   "name": "@elixpo/lixsketch",
-  "version": "5.4.7",
-  "description": "Open-source SVG whiteboard engine with hand-drawn aesthetics — the core of LixSketch",
+  "version": "5.5.1",
+  "description": "Open-source SVG whiteboard engine + React canvas component with hand-drawn aesthetics — the core of LixSketch",
   "type": "module",
   "main": "src/index.js",
   "exports": {
     ".": "./src/index.js",
+    "./react": {
+      "import": "./dist/react/index.js",
+      "default": "./dist/react/index.js"
+    },
+    "./react/styles": "./dist/react/styles.css",
     "./src/*": "./src/*",
     "./fonts": "./fonts/fonts.css",
     "./fonts/*": "./fonts/*"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "files": [
     "src/",
+    "dist/",
     "fonts/",
     "README.md"
   ],
@@ -25,7 +34,8 @@
     "sketch",
     "excalidraw-alternative",
     "infinite-canvas",
-    "framework"
+    "framework",
+    "react"
   ],
   "author": {
     "name": "Ayushman Bhattacharya",
@@ -43,7 +53,31 @@
     "url": "https://github.com/elixpo/sketch.elixpo/issues"
   },
   "dependencies": {
-    "roughjs": "^4.6.6",
-    "perfect-freehand": "^1.2.3"
+    "boxicons": "^2.1.4",
+    "perfect-freehand": "^1.2.3",
+    "roughjs": "^4.6.6"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "zustand": "^5.0.13"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "zustand": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0"
+  },
+  "scripts": {
+    "build": "node build.mjs",
+    "prepublishOnly": "npm run build"
   }
 }

package/src/EngineShortcuts.js

@@ -18,31 +18,55 @@
  * specific contexts (e.g. when the host's overlay is focused).
  */
 
-import { TOOLS } from './index.js';
-
-// Single-key tool shortcuts. Mirrors what the standalone product ships.
+// NB: tool names are inlined as string literals below (rather than imported
+// from `./index.js`) to avoid a module-init cycle. EngineShortcuts.js and
+// index.js import each other; if SHORTCUT_MAP read TOOLS.PAN at the top
+// level, it would evaluate before index.js had populated TOOLS, throwing
+// "TOOLS is undefined" once esbuild splits this into a chunk.
+//
+// The values still match TOOLS.* exactly. If you change one, change both.
 export const SHORTCUT_MAP = {
-    h: TOOLS.PAN,
-    v: TOOLS.SELECT,
-    1: TOOLS.SELECT,
-    r: TOOLS.RECTANGLE,
-    2: TOOLS.RECTANGLE,
-    o: TOOLS.CIRCLE,
-    4: TOOLS.CIRCLE,
-    a: TOOLS.ARROW,
-    5: TOOLS.ARROW,
-    l: TOOLS.LINE,
-    6: TOOLS.LINE,
-    p: TOOLS.FREEHAND,
-    7: TOOLS.FREEHAND,
-    t: TOOLS.TEXT,
-    8: TOOLS.TEXT,
-    9: TOOLS.IMAGE,
-    e: TOOLS.ERASER,
-    0: TOOLS.ERASER,
-    i: TOOLS.ICON,
-    f: TOOLS.FRAME,
-    k: TOOLS.LASER,
+    h: 'pan',
+    v: 'select',
+    1: 'select',
+    r: 'rectangle',
+    2: 'rectangle',
+    o: 'circle',
+    4: 'circle',
+    a: 'arrow',
+    5: 'arrow',
+    l: 'line',
+    6: 'line',
+    p: 'freehand',
+    7: 'freehand',
+    t: 'text',
+    8: 'text',
+    9: 'image',
+    e: 'eraser',
+    0: 'eraser',
+    i: 'icon',
+    f: 'frame',
+    k: 'laser',
+};
+
+// Mirror of TOOLS used inside this module's function bodies. Local copy
+// avoids the same module-init cycle while still letting callers compare
+// engine state against named constants instead of magic strings.
+const TOOLS = {
+    SELECT: 'select',
+    PAN: 'pan',
+    RECTANGLE: 'rectangle',
+    CIRCLE: 'circle',
+    LINE: 'line',
+    ARROW: 'arrow',
+    FREEHAND: 'freehand',
+    TEXT: 'text',
+    CODE: 'code',
+    ERASER: 'eraser',
+    LASER: 'laser',
+    IMAGE: 'image',
+    FRAME: 'frame',
+    ICON: 'icon',
 };
 
 function isTypingTarget(target) {
@@ -165,6 +189,28 @@ export function installEngineShortcuts(engine, options = {}) {
             if (window.currentShape) {
                 const shape = window.currentShape;
                 const shapes = window.shapes;
+                const isFrame = shape.shapeName === 'frame';
+                const isDiagramFrame = isFrame && !!shape._diagramType;
+
+                // Issue #24 bug #7: regular frame → orphan children +
+                // snapshot for undo (mirrors deleteSelectedShapes).
+                let childSnapshot = null;
+                if (isFrame && !isDiagramFrame) {
+                    childSnapshot = [...(shape.containedShapes || [])];
+                    for (const child of childSnapshot) {
+                        if (!child || child === shape) continue;
+                        const el = child.group || child.element;
+                        if (el) {
+                            if (shape.clipGroup && el.parentNode === shape.clipGroup) {
+                                shape.clipGroup.removeChild(el);
+                            }
+                            if (window.svg && el.parentNode !== window.svg) window.svg.appendChild(el);
+                        }
+                        child.parentFrame = null;
+                        delete child.isBeingMovedByFrame;
+                    }
+                }
+
                 if (shapes) {
                     const idx = shapes.indexOf(shape);
                     if (idx !== -1) shapes.splice(idx, 1);
@@ -175,10 +221,20 @@ export function installEngineShortcuts(engine, options = {}) {
                 if (shape.parentFrame && typeof shape.parentFrame.removeShapeFromFrame === 'function') {
                     shape.parentFrame.removeShapeFromFrame(shape);
                 }
-                const el = shape.group || shape.element;
-                if (el && el.parentNode) el.parentNode.removeChild(el);
+
+                if (isFrame && !isDiagramFrame) {
+                    shape.containedShapes = [];
+                    if (shape.group && shape.group.parentNode) shape.group.parentNode.removeChild(shape.group);
+                    if (shape.clipGroup && shape.clipGroup.parentNode) shape.clipGroup.parentNode.removeChild(shape.clipGroup);
+                    if (shape.clipPath && shape.clipPath.parentNode) shape.clipPath.parentNode.removeChild(shape.clipPath);
+                } else {
+                    const el = shape.group || shape.element;
+                    if (el && el.parentNode) el.parentNode.removeChild(el);
+                }
+
                 if (typeof window.pushDeleteAction === 'function') {
-                    window.pushDeleteAction(shape);
+                    if (childSnapshot) window.pushDeleteAction(shape, { childSnapshot });
+                    else window.pushDeleteAction(shape);
                 }
                 window.currentShape = null;
                 if (typeof window.disableAllSideBars === 'function') {

package/src/core/AIRenderer.js

@@ -316,18 +316,22 @@ export function renderAIDiagram(diagram) {
     const ox = vcx - dw / 2 - minX;
     const oy = vcy - dh / 2 - minY;
 
-    // Create frame
-    let frame;
-    try {
-        frame = new window.Frame(vcx - dw / 2 - PADDING, vcy - dh / 2 - PADDING, dw + PADDING * 2, dh + PADDING * 2, {
-            stroke: '#888', strokeWidth: 2, fill: 'transparent', opacity: 1, frameName: title,
-        });
-        window.shapes.push(frame);
-        if (window.pushCreateAction) window.pushCreateAction(frame);
-    } catch (err) {
-        console.error('[AIRenderer] Frame creation failed:', err);
-        return false;
-    }
+    // Phase 5 (issue #22): no outer wrapper frame. Each generated shape
+    // (node, edge, subgraph container) gets the same `groupId` so the whole
+    // diagram behaves as one selectable group via Selection.js's existing
+    // group-expansion path. Drops the "solid background frame" symptom and
+    // makes the rendered content as interactive as user-drawn shapes.
+    const groupId = `aidiag-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 7)}`;
+    // Kept under the same name `frame` to minimise the diff inside this
+    // 600-line function — it's now a thin shim that catches `addShapeToFrame`
+    // calls and re-routes them to a groupId assignment. `selectFrame` /
+    // `removeSelection` no-op; selection is on the first node below.
+    const frame = {
+        addShapeToFrame(s) { if (s) s.groupId = groupId; },
+        selectFrame() {},
+        removeSelection() {},
+        shapeName: 'frame',
+    };
 
     const nodeMap = new Map();
 
@@ -593,12 +597,15 @@ export function renderAIDiagram(diagram) {
         }
     }
 
-    // Auto-select the frame and show its sidebar
-    window.currentShape = frame;
-    if (frame.selectFrame) frame.selectFrame();
-    if (window.__sketchStoreApi) window.__sketchStoreApi.setSelectedShapeSidebar('frame');
+    // Phase 5: select the first generated node — group expansion in
+    // Selection.js will pick up the rest via the shared groupId.
+    const first = nodeMap.values().next().value;
+    if (first && first.shape) {
+        window.currentShape = first.shape;
+        if (typeof first.shape.selectShape === 'function') first.shape.selectShape();
+    }
 
-    console.log(`[AIRenderer] Done: ${nodes.length} nodes, ${edges.length} edges, ${subgraphs.length} subgraphs → "${title}"`);
+    console.log(`[AIRenderer] Done: ${nodes.length} nodes, ${edges.length} edges, ${subgraphs.length} subgraphs → "${title}" (groupId=${groupId})`);
     return true;
 }
 
@@ -738,7 +745,7 @@ function cross(ax, ay, bx, by, cx, cy) {
  * Automatically attach an arrow endpoint to a shape.
  * This makes edges follow nodes when they're moved.
  */
-function autoAttach(arrow, shape, isStart, contactPoint) {
+export function autoAttach(arrow, shape, isStart, contactPoint) {
     if (!arrow || !shape) return;
     if (typeof arrow.attachToShape !== 'function') return;
 
@@ -1306,6 +1313,11 @@ export function generateFramePreviewSVG(frame, width = 500, height = 350) {
 // ============================================================
 
 export function initAIRenderer() {
+    // Expose the autoAttach helper so sibling renderers (Mermaid flowchart,
+    // Graph, LixScript) can wire arrow endpoints into shapes without
+    // import-cycling through this large module.
+    window.__autoAttach = autoAttach;
+
     // Lazy-load sequence renderer
     let _seqParser = null;
     let _seqPreview = null;

package/src/core/GraphEngine.js

@@ -48,39 +48,22 @@ function renderGraphOnCanvas(equations, settings) {
         ? 'Graph: ' + eqLabels.join(', ')
         : 'Graph';
 
-    // Create frame
-    let frame;
-    try {
-        frame = new window.Frame(frameX, frameY, frameW, frameH, {
-            stroke: '#4A90D9', strokeWidth: 2, fill: 'transparent', opacity: 1,
-            frameName: title,
-        });
-        // Store graph data for re-editing
-        frame._graphData = {
-            equations: equations.map(eq => ({ expression: eq.expression, color: eq.color })),
-            settings: { ...settings },
-        };
-        frame._frameType = 'graph';
-
-        window.shapes.push(frame);
-        if (window.pushCreateAction) window.pushCreateAction(frame);
-    } catch (err) {
-        console.error('[GraphEngine] Frame creation failed:', err);
-        return false;
-    }
-
-    // Parse SVG markup and insert elements into the frame
+    // Phase 5 (issue #22): no wrapper frame. The graph is conceptually a
+    // single rendering — axes, grid, curves all interlocked — so we don't
+    // split it into per-curve shapes. Instead the graph becomes ONE
+    // first-class shape on the canvas: a `graphShape` that implements the
+    // shape API the engine relies on (contains / selectShape / etc.) so
+    // it can be selected, dragged, attached to by arrows, picked up by
+    // the rect-drag — exactly like a user-drawn shape.
     try {
         const parser = new DOMParser();
         const doc = parser.parseFromString(svgMarkup, 'image/svg+xml');
         const svgEl = doc.querySelector('svg');
         if (!svgEl) return false;
 
-        // Create a group to hold all graph elements
         const graphGroup = document.createElementNS(NS, 'g');
         graphGroup.setAttribute('data-type', 'graph-group');
         graphGroup.setAttribute('transform', `translate(${frameX + 20}, ${frameY + 20})`);
-        graphGroup.style.pointerEvents = 'none';
 
         // Copy defs (clip paths)
         const defs = svgEl.querySelector('defs');
@@ -90,46 +73,86 @@ function renderGraphOnCanvas(equations, settings) {
                 window.svg.insertBefore(defsClone, window.svg.firstChild);
         }
 
-        // Copy all child elements
         while (svgEl.childNodes.length > 0) {
             const child = svgEl.childNodes[0];
-            if (child.nodeName === 'defs') {
-                svgEl.removeChild(child);
-                continue;
-            }
+            if (child.nodeName === 'defs') { svgEl.removeChild(child); continue; }
             graphGroup.appendChild(child);
         }
-
         window.svg.appendChild(graphGroup);
 
-        // Wrap as a simple shape-like object for the frame
         const graphShape = {
-            shapeName: 'graphContent',
+            shapeName: 'graph',                  // first-class shapeName
+            shapeID: `graph-${Date.now().toString(36)}-${Math.floor(Math.random() * 10000)}`,
             group: graphGroup,
             element: graphGroup,
             x: frameX + 20,
             y: frameY + 20,
             width: GRAPH_WIDTH,
             height: GRAPH_HEIGHT,
+            rotation: 0,
+            isSelected: false,
+            _selectionRect: null,
+            _graphData: {
+                equations: equations.map(eq => ({ expression: eq.expression, color: eq.color })),
+                settings: { ...settings },
+            },
+
+            // ── Shape API the engine relies on ────────────────────────
+            contains(px, py) {
+                return px >= this.x && px <= this.x + this.width
+                    && py >= this.y && py <= this.y + this.height;
+            },
             move(dx, dy) {
-                this.x += dx;
-                this.y += dy;
+                this.x += dx; this.y += dy;
                 this.group.setAttribute('transform', `translate(${this.x}, ${this.y})`);
+                this._updateSelectionRect();
+            },
+            selectShape() {
+                this.isSelected = true;
+                if (this._selectionRect) return;
+                const r = document.createElementNS(NS, 'rect');
+                r.setAttribute('fill', 'none');
+                r.setAttribute('stroke', '#9b7bf7');
+                r.setAttribute('stroke-width', '1.5');
+                r.setAttribute('stroke-dasharray', '4 3');
+                r.setAttribute('pointer-events', 'none');
+                window.svg.appendChild(r);
+                this._selectionRect = r;
+                this._updateSelectionRect();
+            },
+            removeSelection() {
+                this.isSelected = false;
+                if (this._selectionRect && this._selectionRect.parentNode) {
+                    this._selectionRect.parentNode.removeChild(this._selectionRect);
+                }
+                this._selectionRect = null;
+            },
+            _updateSelectionRect() {
+                if (!this._selectionRect) return;
+                const pad = 4;
+                this._selectionRect.setAttribute('x', this.x - pad);
+                this._selectionRect.setAttribute('y', this.y - pad);
+                this._selectionRect.setAttribute('width', this.width + pad * 2);
+                this._selectionRect.setAttribute('height', this.height + pad * 2);
+            },
+            updateAttachedArrows() {
+                if (typeof window.updateAttachedArrows === 'function') {
+                    window.updateAttachedArrows(this);
+                }
             },
-            updateAttachedArrows() {},
         };
 
         window.shapes.push(graphShape);
-        if (frame.addShapeToFrame) frame.addShapeToFrame(graphShape);
+        if (window.pushCreateAction) window.pushCreateAction(graphShape);
+
+        // Auto-select so the user sees something landed.
+        window.currentShape = graphShape;
+        graphShape.selectShape();
     } catch (err) {
         console.error('[GraphEngine] SVG insertion failed:', err);
+        return false;
     }
 
-    // Select the frame
-    window.currentShape = frame;
-    if (frame.selectFrame) frame.selectFrame();
-    if (window.__sketchStoreApi) window.__sketchStoreApi.setSelectedShapeSidebar('frame');
-
     return true;
 }