@miadi/stateloom-web 0.1.1 → 0.1.2

package/server/package-lock.json

@@ -8,6 +8,7 @@
       "name": "stateloom-web",
       "version": "0.1.1",
       "dependencies": {
+        "@miadi/stateloom-canvas": "file:../bridge-canvas",
         "@miadi/stateloom-client": "file:../bridge-client",
         "@miadi/stateloom-protocol": "file:../bridge-protocol",
         "@miadi/stateloom-react": "file:../bridge-react",
@@ -28,9 +29,28 @@
         "typescript": "^5"
       }
     },
+    "../bridge-canvas": {
+      "name": "@miadi/stateloom-canvas",
+      "version": "0.1.0",
+      "license": "MIT",
+      "dependencies": {
+        "@miadi/stateloom-protocol": "file:../bridge-protocol"
+      },
+      "devDependencies": {
+        "@types/react": "^19",
+        "react": "^19",
+        "typescript": "^5.7"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "react": "^19"
+      }
+    },
     "../bridge-client": {
       "name": "@miadi/stateloom-client",
-      "version": "0.1.0",
+      "version": "0.1.1",
       "license": "MIT",
       "dependencies": {
         "@miadi/stateloom-protocol": "file:../bridge-protocol",
@@ -40,20 +60,26 @@
         "@types/node": "^22",
         "socket.io": "^4.8.1",
         "typescript": "^5.7"
+      },
+      "engines": {
+        "node": ">=20"
       }
     },
     "../bridge-protocol": {
       "name": "@miadi/stateloom-protocol",
-      "version": "0.1.1",
+      "version": "0.1.3",
       "license": "MIT",
       "devDependencies": {
         "@types/node": "^22",
         "typescript": "^5.7"
+      },
+      "engines": {
+        "node": ">=20"
       }
     },
     "../bridge-react": {
       "name": "@miadi/stateloom-react",
-      "version": "0.1.2",
+      "version": "0.1.4",
       "license": "MIT",
       "dependencies": {
         "@miadi/stateloom-client": "file:../bridge-client",
@@ -66,6 +92,9 @@
         "socket.io": "^4.8.1",
         "typescript": "^5.7"
       },
+      "engines": {
+        "node": ">=20"
+      },
       "peerDependencies": {
         "react": "^19"
       }
@@ -1068,6 +1097,10 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@miadi/stateloom-canvas": {
+      "resolved": "../bridge-canvas",
+      "link": true
+    },
     "node_modules/@miadi/stateloom-client": {
       "resolved": "../bridge-client",
       "link": true

package/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stateloom-web",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "dev": "next dev -p ${PORT:-4598}",
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@miadi/stateloom-canvas": "file:../bridge-canvas",
     "@miadi/stateloom-client": "file:../bridge-client",
     "@miadi/stateloom-protocol": "file:../bridge-protocol",
     "@miadi/stateloom-react": "file:../bridge-react",

package/server/src/app/globals.css

@@ -251,67 +251,10 @@ body {
   }
 }
 
-/* --- WS7b: live Canvas animations (SVG/CSS only, no libraries) --- */
-
-/* Node bloom-in: fade + scale from ~0.92 to 1 around the node's own center. */
-@keyframes sm-node-in {
-  from { opacity: 0; transform: scale(0.92); }
-  to   { opacity: 1; transform: scale(1); }
-}
-
-/* Node fade-out: fade + scale down as the state leaves the definition. */
-@keyframes sm-node-out {
-  from { opacity: 1; transform: scale(1); }
-  to   { opacity: 0; transform: scale(0.9); }
-}
-
-/* Edge draw-on: reveal the stroke (pathLength=1 normalises the dash units). */
-@keyframes sm-edge-draw {
-  from { stroke-dashoffset: 1; opacity: 0; }
-  to   { stroke-dashoffset: 0; opacity: 1; }
-}
-
-/* Runtime-active pulse: a green (#22c55e) glow that layers over any stroke. */
-@keyframes sm-pulse {
-  0%, 100% { filter: drop-shadow(0 0 1px rgba(34, 197, 94, 0.55)); }
-  50%      { filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.95)); }
-}
-
-.sm-node-enter {
-  transform-box: fill-box;
-  transform-origin: center;
-  animation: sm-node-in 220ms ease-out both;
-}
-
-.sm-node-exit {
-  transform-box: fill-box;
-  transform-origin: center;
-  animation: sm-node-out 200ms ease-in forwards;
-}
-
-.sm-edge-enter {
-  stroke-dasharray: 1;
-  animation: sm-edge-draw 260ms ease-out both;
-}
-
-.sm-node-active {
-  animation: sm-pulse 1.2s ease-in-out infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .sm-node-enter,
-  .sm-edge-enter {
-    animation: none;
-  }
-  /* Keep exit near-instant so onAnimationEnd still fires and the node is
-     cleaned up from the exiting layer. */
-  .sm-node-exit {
-    animation-duration: 1ms;
-  }
-  /* Drop the infinite motion but keep a static glow so active states stay
-     distinguishable without relying on motion. */
-  .sm-node-active {
-    animation: none;
-    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.85));
-  }
-}
+/* --- Live canvas animations ------------------------------------------------
+   Moved out with the board itself. The node bloom, the edge draw-on, the
+   active-state pulse and their reduced-motion answers now ship as
+   `@miadi/stateloom-canvas/styles.css`, imported in app/layout.tsx, so the
+   designer and forgewright animate the same way from one source. Nothing in
+   this app referenced the old `sm-*` class names outside the canvas, which is
+   why they could simply leave. */

package/server/src/app/layout.tsx

@@ -1,5 +1,8 @@
 import type { Metadata, Viewport } from "next";
 import "./globals.css";
+// The board's own colours and animations. It ships with the canvas package so
+// forgewright gets the identical surface from the identical stylesheet.
+import "@miadi/stateloom-canvas/styles.css";
 
 export const metadata: Metadata = {
   title: "SMCraft Designer",