@miadi/stateloom-web 0.1.0 → 0.1.2

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",

package/server/src/components/BridgeProvider.tsx

@@ -2,18 +2,23 @@
 
 import { useEffect } from "react";
 import { useDesignerStore } from "@/store/useDesignerStore";
+import { docQuery, useRequestedDoc } from "@/lib/docParam";
 
 export default function BridgeProvider() {
   const applyRemote = useDesignerStore((s) => s.applyRemote);
   const setRemoteStatus = useDesignerStore((s) => s.setRemoteStatus);
   const setRemoteMtime = useDesignerStore((s) => s.setRemoteMtime);
+  // Step 2: the requested `?doc=` rides both the file fetch and the watch
+  // stream; the server resolves and guards, the browser only passes through.
+  const requested = useRequestedDoc();
 
   useEffect(() => {
     let cancelled = false;
+    const qs = docQuery(requested);
 
     async function fetchFile(): Promise<{ content: string | null; mtime: number; path: string; exists: boolean } | null> {
       try {
-        const r = await fetch("/api/file", { cache: "no-store" });
+        const r = await fetch(`/api/file${qs}`, { cache: "no-store" });
         if (!r.ok) return null;
         return await r.json();
       } catch {
@@ -33,7 +38,7 @@ export default function BridgeProvider() {
       }
     })();
 
-    const es = new EventSource("/api/watch");
+    const es = new EventSource(`/api/watch${qs}`);
 
     es.addEventListener("hello", (ev) => {
       try {
@@ -68,7 +73,9 @@ export default function BridgeProvider() {
       cancelled = true;
       es.close();
     };
-  }, [applyRemote, setRemoteStatus, setRemoteMtime]);
+    // `requested` re-keys the whole effect (step 3): a document switch closes
+    // the old watch stream and loads + watches the new document, no reload.
+  }, [applyRemote, setRemoteStatus, setRemoteMtime, requested]);
 
   return null;
 }