@liminis/diagrams 0.1.0 → 0.1.1

package/LICENSE

@@ -19,16 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
----
-
-This package vendors a modified copy of `mdast-util-wiki-link` (MIT,
-Copyright (c) 2020 Mark Hudnall). Its license and a description of the
-modifications ship alongside it, at
-`dist/markdown/vendor/mdast-util-wiki-link/`.
-
-This package derives from the `webview-ui` package of SlashMD
-(https://github.com/wolfdavo/SlashMD) by David Wolfenden, which that project's
-README declares to be MIT-licensed. SlashMD carries no LICENSE file and no
-copyright notice, so none is reproduced here; this notice records the
-derivation and the stated license in their absence.

package/README.md

@@ -7,6 +7,15 @@ editing.
 Extracted from [`@liminis/editor`](https://github.com/verveguy/liminis-editor), where it
 renders ` ```c4 ` fenced code blocks. Nothing here is bound to that editor.
 
+## Demo
+
+**[https://v3rv.com/liminis-diagrams/](https://v3rv.com/liminis-diagrams/)** — edit
+C4-PlantUML source and see it re-render live, drag nodes to reposition them, toggle dark
+mode, and switch between a few preset diagrams. The demo keeps dragged positions in
+memory only, for as long as the tab is open — this package has no persistence of its
+own (see [Recipe 3](docs/recipes.md#recipe-3-position-persistence--the-hosts-choice)),
+and neither does this demo.
+
 ## Install
 
 ```bash

package/dist/react/C4InteractiveRenderer.js

@@ -281,7 +281,14 @@ function C4InteractiveSvg({ layout, isDarkMode, isEditMode, draggedNodeId, svgRe
                 cursor: isEditMode ? (draggedNodeId ? 'grabbing' : 'default') : 'default',
             }, children: [_jsx(C4RendererContent, { layout: layout, isDarkMode: isDarkMode, legendPositionOverride: legendPositionOverride }), isEditMode && (_jsx("g", { className: "interactive-layer", children: hitAreas.map((area) => (_jsx("rect", { "data-node-id": area.id, x: area.x, y: area.y, width: area.width, height: area.height, fill: "transparent", stroke: "transparent", style: {
                             cursor: draggedNodeId === area.id ? 'grabbing' : 'grab',
-                        }, onMouseDown: (e) => onNodeMouseDown(area.id, area.x, area.y, e) }, area.id))) })), isEditMode && (_jsx("g", { className: "drag-handles-layer", children: hitAreas.map((area) => (_jsx(DragHandle, { x: area.x + area.width - 20, y: area.y + 4, color: handleColor, isDragging: draggedNodeId === area.id }, `handle-${area.id}`))) }))] }) }));
+                            // Without this the browser claims the gesture for panning and
+                            // zooming before any pointermove reaches us, so a touch drag
+                            // scrolls the page instead of moving the node. `none` is
+                            // deliberate rather than `pan-y`: the hit area is a drag
+                            // target, and a partial allowance still lets the browser
+                            // steal the gesture mid-drag and fire pointercancel.
+                            touchAction: 'none',
+                        }, onPointerDown: (e) => onNodeMouseDown(area.id, area.x, area.y, e) }, area.id))) })), isEditMode && (_jsx("g", { className: "drag-handles-layer", children: hitAreas.map((area) => (_jsx(DragHandle, { x: area.x + area.width - 20, y: area.y + 4, color: handleColor, isDragging: draggedNodeId === area.id }, `handle-${area.id}`))) }))] }) }));
 }
 /**
  * Drag handle indicator (grip icon).

package/dist/react/hooks/useC4DiagramDrag.d.ts

@@ -4,6 +4,15 @@
  * Provides drag-and-drop functionality for repositioning C4 diagram elements.
  * Uses window-level listeners during drag so the interaction continues even
  * when the cursor leaves the SVG bounds.
+ *
+ * Pointer events, not mouse events. This started as mouse-only and did not work
+ * on touch devices at all: iPadOS and mobile Safari synthesize `mousedown` and
+ * `click` *after* a gesture resolves, but never emit the `mousemove` stream a
+ * drag needs, so the node never moved and the page panned instead. Pointer
+ * events unify mouse, touch and pen, and are the only way to get one code path
+ * for all three. `pointercancel` matters here too — the browser fires it when it
+ * decides a touch is a scroll or a system gesture, and without handling it the
+ * drag would stay stuck open with no terminating `pointerup`.
  */
 import { RefObject } from 'react';
 export interface UseC4DiagramDragProps {
@@ -22,7 +31,12 @@ export interface UseC4DiagramDragReturn {
     /** Whether a drag is in progress */
     isDragging: boolean;
     /** Start dragging a node */
-    startNodeDrag: (nodeId: string, nodeX: number, nodeY: number, e: React.MouseEvent) => void;
+    /**
+     * Start dragging a node. Accepts a pointer or mouse event: the parameter is
+     * widened rather than switched so existing callers passing a React.MouseEvent
+     * still typecheck.
+     */
+    startNodeDrag: (nodeId: string, nodeX: number, nodeY: number, e: React.PointerEvent | React.MouseEvent) => void;
     /** Convert screen coordinates to SVG coordinates */
     screenToSvg: (clientX: number, clientY: number) => {
         x: number;
@@ -32,7 +46,7 @@ export interface UseC4DiagramDragReturn {
 /**
  * Hook for managing drag interactions on C4 diagram nodes.
  *
- * During a drag, mousemove and mouseup are handled on `window` so the
- * interaction continues seamlessly when the cursor moves outside the SVG.
+ * During a drag, pointermove/pointerup/pointercancel are handled on `window` so
+ * the interaction continues seamlessly when the pointer leaves the SVG.
  */
 export declare function useC4DiagramDrag({ svgRef, onNodeDrag, onNodeDragEnd, enabled, }: UseC4DiagramDragProps): UseC4DiagramDragReturn;

package/dist/react/hooks/useC4DiagramDrag.js

@@ -4,13 +4,22 @@
  * Provides drag-and-drop functionality for repositioning C4 diagram elements.
  * Uses window-level listeners during drag so the interaction continues even
  * when the cursor leaves the SVG bounds.
+ *
+ * Pointer events, not mouse events. This started as mouse-only and did not work
+ * on touch devices at all: iPadOS and mobile Safari synthesize `mousedown` and
+ * `click` *after* a gesture resolves, but never emit the `mousemove` stream a
+ * drag needs, so the node never moved and the page panned instead. Pointer
+ * events unify mouse, touch and pen, and are the only way to get one code path
+ * for all three. `pointercancel` matters here too — the browser fires it when it
+ * decides a touch is a scroll or a system gesture, and without handling it the
+ * drag would stay stuck open with no terminating `pointerup`.
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
 /**
  * Hook for managing drag interactions on C4 diagram nodes.
  *
- * During a drag, mousemove and mouseup are handled on `window` so the
- * interaction continues seamlessly when the cursor moves outside the SVG.
+ * During a drag, pointermove/pointerup/pointercancel are handled on `window` so
+ * the interaction continues seamlessly when the pointer leaves the SVG.
  */
 export function useC4DiagramDrag({ svgRef, onNodeDrag, onNodeDragEnd, enabled, }) {
     const [draggedNodeId, setDraggedNodeId] = useState(null);
@@ -18,6 +27,14 @@ export function useC4DiagramDrag({ svgRef, onNodeDrag, onNodeDragEnd, enabled, }
     const dragOffsetRef = useRef({ x: 0, y: 0 });
     // Track the last known position for dragEnd callback
     const lastPositionRef = useRef({ x: 0, y: 0 });
+    // The pointer that owns the current drag. Mouse events have exactly one
+    // stream; pointer events do not — a touch device can deliver concurrent
+    // streams for several fingers at once. Without this, a second finger landing
+    // on another node overwrites the single-slot drag state, so the first
+    // finger's moves start dragging the second node and either finger's release
+    // ends the drag. Null when no drag is active; null for a mouse-event caller,
+    // which cannot be concurrent anyway.
+    const activePointerIdRef = useRef(null);
     // Locked CTM inverse captured at drag start — prevents the accelerating
     // feedback loop where canvas expansion changes the scale mid-drag
     const lockedCtmInverseRef = useRef(null);
@@ -54,8 +71,14 @@ export function useC4DiagramDrag({ svgRef, onNodeDrag, onNodeDragEnd, enabled, }
     const startNodeDrag = useCallback((nodeId, nodeX, nodeY, e) => {
         if (!enabled)
             return;
+        // One drag at a time. A pointerdown arriving while a drag is already in
+        // progress is a second finger, not a new intent — ignore it rather than
+        // letting it hijack the drag already underway.
+        if (draggedNodeIdRef.current !== null)
+            return;
         e.stopPropagation();
         e.preventDefault();
+        activePointerIdRef.current = 'pointerId' in e ? e.pointerId : null;
         // Lock the CTM at drag start
         const svg = svgRef.current;
         const ctm = svg?.getScreenCTM();
@@ -75,10 +98,13 @@ export function useC4DiagramDrag({ svgRef, onNodeDrag, onNodeDragEnd, enabled, }
     useEffect(() => {
         if (!draggedNodeId)
             return;
-        const handleMouseMove = (e) => {
+        const handlePointerMove = (e) => {
             const nodeId = draggedNodeIdRef.current;
             if (!nodeId)
                 return;
+            // Movement from any other finger is not this drag.
+            if (activePointerIdRef.current !== null && e.pointerId !== activePointerIdRef.current)
+                return;
             const svgPoint = screenToSvgRef.current(e.clientX, e.clientY);
             if (!svgPoint)
                 return;
@@ -87,20 +113,29 @@ export function useC4DiagramDrag({ svgRef, onNodeDrag, onNodeDragEnd, enabled, }
             lastPositionRef.current = { x: newX, y: newY };
             onNodeDragRef.current?.(nodeId, newX, newY);
         };
-        const handleMouseUp = () => {
+        const endDrag = (e) => {
             const nodeId = draggedNodeIdRef.current;
             if (!nodeId)
                 return;
+            // A second finger lifting must not end the drag the first one owns.
+            if (activePointerIdRef.current !== null && e.pointerId !== activePointerIdRef.current)
+                return;
             onNodeDragEndRef.current?.(nodeId, lastPositionRef.current.x, lastPositionRef.current.y);
             draggedNodeIdRef.current = null;
+            activePointerIdRef.current = null;
             lockedCtmInverseRef.current = null;
             setDraggedNodeId(null);
         };
-        window.addEventListener('mousemove', handleMouseMove);
-        window.addEventListener('mouseup', handleMouseUp);
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', endDrag);
+        // Fired when the browser takes the gesture over (scroll, system swipe) or
+        // the pointer is otherwise lost. Without it a touch drag can end with no
+        // `pointerup` at all, leaving the node stuck to the finger.
+        window.addEventListener('pointercancel', endDrag);
         return () => {
-            window.removeEventListener('mousemove', handleMouseMove);
-            window.removeEventListener('mouseup', handleMouseUp);
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', endDrag);
+            window.removeEventListener('pointercancel', endDrag);
         };
     }, [draggedNodeId]);
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liminis/diagrams",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "C4 architecture diagrams: parse C4-PlantUML, lay out with dagre, render to SVG",
   "license": "MIT",
   "//repository": "Not cosmetic, and not optional. npm matches this URL against the GitHub Actions OIDC claim when publishing with --provenance; without it the registry rejects the publish outright (E422) after the release tag has already been cut. That is exactly how 0.1.0's first release attempt failed (#6). The `git+https://` scheme and the `.git` suffix are both part of the match — the SSH form does not work.",
@@ -48,7 +48,8 @@
     "./server": {
       "types": "./dist/server.d.ts",
       "default": "./dist/server.js"
-    }
+    },
+    "./package.json": "./package.json"
   },
   "publishConfig": {
     "access": "public"
@@ -61,6 +62,7 @@
     "clean": "rm -rf dist",
     "prepack": "pnpm run build",
     "prepublishOnly": "node scripts/guard-publish.mjs",
+    "verify:package": "node scripts/verify-package.mjs",
     "lint": "eslint src/",
     "lint:fix": "eslint src/ --fix",
     "typecheck": "tsc --noEmit",