@miadi/stateloom-web 0.3.1 → 0.3.4

package/server/src/app/page.tsx

@@ -16,6 +16,7 @@ import SequenceWorkspace from "@/components/sequence/SequenceWorkspace";
 import SystemWorkspace from "@/components/system/SystemWorkspace";
 import SystemStrip from "@/components/system/SystemStrip";
 import BoardBoundary from "@/components/BoardBoundary";
+import ChromeIcon from "@/components/ChromeIcon";
 import IssueIcon from "@/components/IssueIcon";
 import StageProvider from "@/components/stage/StageProvider";
 import MachineStageLayer from "@/components/stage/MachineStageLayer";
@@ -137,9 +138,10 @@ function MachineDesigner() {
   const setDrawSource = useDesignerStore((s) => s.setDrawSource);
 
   const tabs: { id: Tab; label: string; icon: ReactNode; badge?: number }[] = [
-    { id: "properties", label: "Properties", icon: "🎛" },
-    { id: "events", label: "Events", icon: "⚡" },
-    { id: "settings", label: "Settings", icon: "⚙" },
+    // Drawn, not typed: 🎛 ⚡ ⚙ are colour emoji on iOS. See ChromeIcon.
+    { id: "properties", label: "Properties", icon: <ChromeIcon name="sliders" size={16} /> },
+    { id: "events", label: "Events", icon: <ChromeIcon name="bolt" size={16} /> },
+    { id: "settings", label: "Settings", icon: <ChromeIcon name="gear" size={16} /> },
     // Drawn, not typed: "⚠" is a bright yellow colour emoji on iOS. See IssueIcon.
     { id: "validation", label: "Errors", icon: <IssueIcon />, badge: errors.length || undefined },
   ];
@@ -305,7 +307,7 @@ function MachineDesigner() {
                   hideContextMenu();
                 }}
               >
-                ↗ Draw transition from here
+                <ChromeIcon name="draw" /> Draw transition from here
               </button>
               <button
                 className="block w-full text-left text-sm text-red-400 hover:bg-gray-800 px-4 py-3 md:text-xs md:px-3 md:py-1.5"
@@ -314,7 +316,7 @@ function MachineDesigner() {
                   hideContextMenu();
                 }}
               >
-                🗑 Delete state
+                <ChromeIcon name="trash" /> Delete state
               </button>
             </>
           ) : (
@@ -327,7 +329,7 @@ function MachineDesigner() {
                   hideContextMenu();
                 }}
               >
-                ＋ Add state here
+                <ChromeIcon name="plus" /> Add state here
               </button>
             </>
           )}

package/server/src/components/ChromeIcon.tsx

@@ -0,0 +1,106 @@
+/**
+ * The loom's chrome icons — the toolbar, the phone's tab bar, the context menu and the
+ * delete buttons — drawn as outlines in the current text colour (lane U, finding U6).
+ *
+ * The typed symbols they replace (📂 💾 🔄 📥 🖼 ⚡ 📜 🗑 🎛 ⚙ ✏️ ↩ ↪ ↗) are colour emoji
+ * on iOS: saturated, larger than the words beside them, and the first thing the eye lands
+ * on around a board whose stage, marks and dock are already drawn. Same style as
+ * IssueIcon and KindIcon: a 24-unit box, a 1.6 stroke, round ends.
+ */
+export type ChromeIconName =
+  | "undo"
+  | "redo"
+  | "arrange"
+  | "draw"
+  | "open"
+  | "save"
+  | "reload"
+  | "download"
+  | "image"
+  | "plus"
+  | "check"
+  | "bolt"
+  | "scroll"
+  | "code"
+  | "trash"
+  | "sliders"
+  | "gear";
+
+export default function ChromeIcon({ name, size = 14 }: { name: ChromeIconName; size?: number }) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.6"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      focusable="false"
+      className="inline-block shrink-0 align-[-2px]"
+    >
+      {name === "undo" && <path d="M9 7 4.5 11.5 9 16M5 11.5h9.5a5 5 0 0 1 0 10H12" />}
+      {name === "redo" && <path d="M15 7l4.5 4.5L15 16M19 11.5H9.5a5 5 0 0 0 0 10H12" />}
+      {name === "arrange" && (
+        // Three boxes in layers.
+        <>
+          <rect x="8.5" y="3" width="7" height="5" rx="1.5" />
+          <rect x="3" y="16" width="7" height="5" rx="1.5" />
+          <rect x="14" y="16" width="7" height="5" rx="1.5" />
+          <path d="M12 8v4M6.5 16v-2a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v2" />
+        </>
+      )}
+      {name === "draw" && (
+        // An arrow drawn from one state to another.
+        <>
+          <circle cx="5.5" cy="18.5" r="2" />
+          <path d="M7 17 18.5 5.5M11.5 5.5h7v7" />
+        </>
+      )}
+      {name === "open" && <path d="M3.5 7.5V18a1.5 1.5 0 0 0 1.5 1.5h14a1.5 1.5 0 0 0 1.5-1.5V9.5A1.5 1.5 0 0 0 19 8h-7l-2-2.5H5A1.5 1.5 0 0 0 3.5 7z" />}
+      {name === "save" && (
+        <>
+          <path d="M5 4h11l3.5 3.5V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z" />
+          <path d="M8 4v5h7V4M8 20v-6h8v6" />
+        </>
+      )}
+      {name === "reload" && <path d="M19.5 12a7.5 7.5 0 1 1-2.2-5.3M19.5 4v4.5H15" />}
+      {name === "download" && <path d="M12 4v11M7.5 10.5 12 15l4.5-4.5M4.5 19.5h15" />}
+      {name === "image" && (
+        <>
+          <rect x="3.5" y="5" width="17" height="14" rx="1.5" />
+          <circle cx="9" cy="10" r="1.6" />
+          <path d="m4 17.5 5-5 4 4 2.5-2.5 4.5 4.5" />
+        </>
+      )}
+      {name === "plus" && <path d="M12 5v14M5 12h14" />}
+      {name === "check" && <path d="m5 12.5 4.5 4.5L19 7.5" />}
+      {name === "bolt" && <path d="M13 3 5.5 13.5h5.5L10 21l8-11h-5.5z" />}
+      {name === "scroll" && (
+        // A page with lines: a written specification.
+        <>
+          <path d="M6.5 3.5h8l4 4v12a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1v-15a1 1 0 0 1 1-1z" />
+          <path d="M14.5 3.5v4h4M8.5 12h7M8.5 15.5h7M8.5 9h3" />
+        </>
+      )}
+      {name === "code" && <path d="m8.5 7.5-5 4.5 5 4.5M15.5 7.5l5 4.5-5 4.5M13.5 5l-3 14" />}
+      {name === "trash" && <path d="M4.5 6.5h15M9.5 6.5V4.5h5v2M6.5 6.5l.9 12.6a1.5 1.5 0 0 0 1.5 1.4h6.2a1.5 1.5 0 0 0 1.5-1.4l.9-12.6M10 10.5v6M14 10.5v6" />}
+      {name === "sliders" && (
+        <>
+          <path d="M5 4v16M12 4v16M19 4v16" />
+          <circle cx="5" cy="9" r="2" fill="currentColor" stroke="none" />
+          <circle cx="12" cy="15" r="2" fill="currentColor" stroke="none" />
+          <circle cx="19" cy="7.5" r="2" fill="currentColor" stroke="none" />
+        </>
+      )}
+      {name === "gear" && (
+        <>
+          <circle cx="12" cy="12" r="3" />
+          <path d="M12 3.5v2.2M12 18.3v2.2M3.5 12h2.2M18.3 12h2.2M6 6l1.6 1.6M16.4 16.4 18 18M6 18l1.6-1.6M16.4 7.6 18 6" />
+        </>
+      )}
+    </svg>
+  );
+}

package/server/src/components/PropertiesPanel.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useDesignerStore, collectAllStates, collectEventIds } from "@/store/useDesignerStore";
+import ChromeIcon from "@/components/ChromeIcon";
 import type { StateDef, ActionDef } from "@/types/definition";
 
 function ActionEditor({ label, actions, onChange }: { label: string; actions: ActionDef[]; onChange: (actions: ActionDef[]) => void }) {
@@ -175,7 +176,7 @@ export default function PropertiesPanel() {
           onClick={() => removeState(selection.id!)}
           className="text-red-500 hover:text-red-400 text-xs mt-2"
         >
-          🗑 Delete State
+          <ChromeIcon name="trash" /> Delete State
         </button>
       </div>
     );
@@ -235,7 +236,7 @@ export default function PropertiesPanel() {
           onClick={() => removeTransition(stateName, idx)}
           className="text-red-500 hover:text-red-400 text-xs"
         >
-          🗑 Delete Transition
+          <ChromeIcon name="trash" /> Delete Transition
         </button>
       </div>
     );

package/server/src/components/Toolbar.tsx

@@ -9,7 +9,9 @@ import {
   type ExportFormat,
 } from "@/lib/exportImage";
 import type { StateDef } from "@/types/definition";
+import ChromeIcon from "./ChromeIcon";
 import DocSwitcher from "./DocSwitcher";
+import IssueIcon from "./IssueIcon";
 import PresenceChips from "./PresenceChips";
 import { docQuery, useRequestedDoc } from "@/lib/docParam";
 
@@ -40,7 +42,7 @@ export default function Toolbar() {
   const applyRemote = useDesignerStore((s) => s.applyRemote);
 
   // Save and reload must follow the SAME document the page is viewing —
-  // without this, 💾 on a switched document would silently write the default
+  // without this, Disk on a switched document would silently write the default
   // file (the exact mismatch the allowlist exists to prevent).
   const requested = useRequestedDoc();
 
@@ -219,7 +221,9 @@ export default function Toolbar() {
           <span className="text-[10px] text-amber-400" title={remoteMessage ?? ""}>↻ remote changed</span>
         )}
         {remoteStatus === "error" && (
-          <span className="text-[10px] text-red-400" title={remoteMessage ?? ""}>⚠ disk error</span>
+          <span className="inline-flex items-center gap-0.5 text-[10px] text-red-400" title={remoteMessage ?? ""}>
+            <IssueIcon size={11} /> disk error
+          </span>
         )}
         {remoteStatus === "idle" && (
           <span className="text-[10px] text-gray-600" title={remoteMessage ?? "No file bound"}>○ no disk</span>
@@ -239,16 +243,18 @@ export default function Toolbar() {
         disabled={undoStack.length === 0}
         className="toolbar-btn disabled:opacity-30"
         title="Undo (Ctrl+Z)"
+        aria-label="Undo"
       >
-        ↩
+        <ChromeIcon name="undo" />
       </button>
       <button
         onClick={redo}
         disabled={redoStack.length === 0}
         className="toolbar-btn disabled:opacity-30"
         title="Redo (Ctrl+Y)"
+        aria-label="Redo"
       >
-        ↪
+        <ChromeIcon name="redo" />
       </button>
 
       <div className="w-px h-4 bg-gray-700" />
@@ -259,7 +265,7 @@ export default function Toolbar() {
         className="toolbar-btn"
         title="Arrange states into layers (auto-layout)"
       >
-        ⤢ Arrange
+        <ChromeIcon name="arrange" /> Arrange
       </button>
 
       <div className="w-px h-4 bg-gray-700" />
@@ -270,14 +276,14 @@ export default function Toolbar() {
         className={`toolbar-btn ${drawMode === "transition" ? "!bg-amber-700 !text-white" : ""}`}
         title={drawMode === "transition" ? "Exit draw mode (Esc)" : "Draw transition mode"}
       >
-        {drawMode === "transition" ? "✏️ Drawing" : "↗ Draw"}
+        <ChromeIcon name="draw" /> {drawMode === "transition" ? "Drawing" : "Draw"}
       </button>
 
       <div className="w-px h-4 bg-gray-700" />
 
       {/* File ops */}
-      <button onClick={handleOpen} className="toolbar-btn" title="Open local .smdf.json (browser)">
-        📂
+      <button onClick={handleOpen} className="toolbar-btn" title="Open local .smdf.json (browser)" aria-label="Open a local file">
+        <ChromeIcon name="open" />
       </button>
       <button
         onClick={handleSaveDisk}
@@ -285,17 +291,18 @@ export default function Toolbar() {
         className="toolbar-btn disabled:opacity-40"
         title="Save to disk (STATELOOM_PROJECT_FILE)"
       >
-        💾 Disk
+        <ChromeIcon name="save" /> Disk
       </button>
       <button
         onClick={handleReloadFromDisk}
         className="toolbar-btn"
         title="Reload from disk"
+        aria-label="Reload from disk"
       >
-        🔄
+        <ChromeIcon name="reload" />
       </button>
-      <button onClick={handleDownload} className="toolbar-btn" title="Download as file">
-        📥
+      <button onClick={handleDownload} className="toolbar-btn" title="Download as file" aria-label="Download as file">
+        <ChromeIcon name="download" />
       </button>
 
       {/* Export the board — pictures from the canvas as it stands, mermaid and
@@ -322,7 +329,13 @@ export default function Toolbar() {
         className={`toolbar-btn disabled:opacity-40 ${exportError ? "!text-red-400" : ""}`}
         title={exportError ?? `Export the board as ${FORMAT_LABEL[imageFormat]}`}
       >
-        {exporting ? "…" : "🖼 Export"}
+        {exporting ? (
+          "…"
+        ) : (
+          <>
+            <ChromeIcon name="image" /> Export
+          </>
+        )}
       </button>
       {exported && !exportError && (
         <span className="text-[10px] text-emerald-500 truncate max-w-[40vw] md:max-w-[16rem]" title={exported}>
@@ -346,12 +359,16 @@ export default function Toolbar() {
               if (e.key === "Escape") setAddingState(false);
             }}
           />
-          <button onClick={handleAddState} className="toolbar-btn-sm">✓</button>
-          <button onClick={() => setAddingState(false)} className="toolbar-btn-sm">✕</button>
+          <button onClick={handleAddState} className="toolbar-btn-sm" aria-label="Add the state">
+            <ChromeIcon name="check" />
+          </button>
+          <button onClick={() => setAddingState(false)} className="toolbar-btn-sm" aria-label="Cancel">
+            ✕
+          </button>
         </div>
       ) : (
         <button onClick={() => setAddingState(true)} className="toolbar-btn">
-          ＋State
+          <ChromeIcon name="plus" /> State
         </button>
       )}
 
@@ -359,7 +376,7 @@ export default function Toolbar() {
 
       {/* Validate & Generate */}
       <button onClick={() => validate()} className="toolbar-btn">
-        ✓ Validate
+        <ChromeIcon name="check" /> Validate
       </button>
       <select
         value={generateLang}
@@ -370,16 +387,16 @@ export default function Toolbar() {
         <option value="typescript">TypeScript</option>
       </select>
       <button onClick={handleGenerate} className="toolbar-btn">
-        ⚡ Generate
+        <ChromeIcon name="bolt" /> Generate
       </button>
       <button onClick={handleGenerateRispec} className="toolbar-btn" title="Generate RISE rispec markdown">
-        📜 RISE
+        <ChromeIcon name="scroll" /> RISE
       </button>
       <button
         onClick={() => setShowCodePreview(!showCodePreview)}
         className={`toolbar-btn ${showCodePreview ? "text-blue-400" : ""}`}
       >
-        {"</>"} Code
+        <ChromeIcon name="code" /> Code
       </button>
       </div>
     </div>

package/server/src/components/erd/ErdWorkspace.tsx

@@ -55,6 +55,7 @@ import {
   normalizeNotes,
 } from "@miadi/stateloom-protocol";
 import BoardBoundary from "@/components/BoardBoundary";
+import ChromeIcon from "@/components/ChromeIcon";
 import DocSwitcher from "@/components/DocSwitcher";
 import IssueIcon from "@/components/IssueIcon";
 import LockIcon from "@/components/LockIcon";
@@ -724,7 +725,7 @@ export default function ErdWorkspace() {
                         setSelection(null);
                       }}
                     >
-                      🗑 Delete {selected.name}
+                      <ChromeIcon name="trash" /> Delete {selected.name}
                     </button>
                   </>
                 )}

package/server/src/components/sequence/SequenceWorkspace.tsx

@@ -218,6 +218,15 @@ export default function SequenceWorkspace() {
   const view = useMemo(() => (def ? drawableSequence(def) : null), [def]);
   const layout = useMemo(() => (view ? sequenceLayout(view) : null), [view]);
   const stageBoxes = useMemo(() => (view && layout ? safely(() => sequenceElementBoxes(view, layout), []) : []), [view, layout]);
+  // A message is named on the marks by its number and its words, as the board shows it.
+  const stageLabels = useMemo(() => {
+    const out: Record<string, string> = {};
+    for (const { ref, message } of view ? safely(() => allMessages(view), []) : []) {
+      const words = message?.label ? `${ref}. ${message.label}` : `message ${ref}`;
+      out[`message:${ref}`] = words.length > 48 ? `${words.slice(0, 47)}…` : words;
+    }
+    return out;
+  }, [view]);
   const stageFocus = useUrlParam("focus");
   // A malformed document is reported as one issue, not a crash.
   const problems = useMemo<SqdValidationError[]>(() => {
@@ -586,7 +595,7 @@ export default function SequenceWorkspace() {
           {/* The stage (Spec 83). In the list view nothing is drawn to light, so a
               step that lights something here brings the diagram back. */}
           {def && layout && mode === "diagram" && (
-            <StageLayer docPath={docPath || null} kind="sequence" viewport={viewport} setViewport={setViewport} boxes={stageBoxes} boardRef={boardRef} focus={stageFocus} />
+            <StageLayer docPath={docPath || null} kind="sequence" viewport={viewport} setViewport={setViewport} boxes={stageBoxes} boardRef={boardRef} focus={stageFocus} labels={stageLabels} />
           )}
           {def && layout && mode === "list" && <StageReveal docPath={docPath} onReveal={() => setMode("diagram")} />}
 

package/server/src/components/stage/CompanionLayer.tsx

@@ -19,10 +19,17 @@
  * - once the person presses ▶ or ■, the waiting sequence is over: each reply plays when
  *   they choose it.
  *
+ * The conversation holds the person's marks on the episode's drawings too (the service
+ * reads their sidecars): each mark with its thread, and tapping one opens its drawing at
+ * that mark's thread. On a phone the closed dock is the bar at the top of the sheet at the
+ * bottom of the board, and the open conversation takes the caption's place in that sheet;
+ * it and a mark's card take turns.
+ *
  * Everything reaches the service through `/api/companion/` (this designer's proxy to
  * `STATELOOM_COMPANION_URL`); a reply is never posted from here.
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import {
   browserVoice,
   createCompanionThread,
@@ -35,10 +42,11 @@ import {
   type TakeRecorder,
   type ThreadSnapshot,
 } from "@miadi/stateloom-react";
-import { CompanionDock } from "@miadi/stateloom-canvas";
+import { CompanionDock, type DockMark } from "@miadi/stateloom-canvas";
 import { marksWaitingOn, readMarksFile } from "@miadi/stateloom-protocol";
 import { requestedDoc } from "@/lib/docParam";
-import { urlParam } from "@/lib/systemParam";
+import { openInSystem, urlParam } from "@/lib/systemParam";
+import { requestMark } from "@/lib/markRequest";
 import type { StageValue } from "./StageProvider";
 
 const BASE = "/api/companion/";
@@ -316,7 +324,7 @@ export default function CompanionLayer({ stage, defaultEpisode }: { stage: Stage
     const reply = threadRef.current?.getSnapshot().items.find((i): i is CompanionReply => i.kind === "reply" && i.id === id);
     if (!reply) return;
     if (busy(recRef.current.state)) {
-      setNotice(`Send your take first. Then press ▶ to hear ${WHO}.`);
+      setNotice(`Send your take first. Then press play to hear ${WHO}.`);
       return;
     }
     queue.current = [];
@@ -350,11 +358,33 @@ export default function CompanionLayer({ stage, defaultEpisode }: { stage: Stage
 
   const waiting = thread.waiting ? { take: thread.waiting.take, seconds: Math.max(0, Math.floor((now - thread.waiting.since) / 1000)) } : null;
 
-  return (
-    <div className="stage-talk-host">
+  // ── The phone's sheet: the open conversation holds it in the caption's place ──
+  const { narrow, sheet: sheetOwner, claimSheet, releaseSheet } = stage;
+  useEffect(() => {
+    if (open) claimSheet("talk");
+    else releaseSheet("talk");
+  }, [open, claimSheet, releaseSheet]);
+  useEffect(() => () => releaseSheet("talk"), [releaseSheet]);
+  // A mark's card took the sheet: the conversation folds to its bar.
+  const [seenOwner, setSeenOwner] = useState(sheetOwner);
+  if (seenOwner !== sheetOwner) {
+    setSeenOwner(sheetOwner);
+    if (narrow && sheetOwner === "card") setOpenState(false);
+  }
+
+  // A mark in the conversation: its drawing, at its thread.
+  const onOpenMark = useCallback((mark: DockMark) => {
+    if (window.matchMedia("(max-width: 767px)").matches) setOpenState(false);
+    requestMark(mark.doc, mark.id);
+    if (stageRef.current.board !== mark.doc) openInSystem({ doc: mark.doc, focus: null });
+  }, []);
+
+  const dock = (
       <CompanionDock
         open={open}
         onOpenChange={setOpen}
+        variant={narrow ? "bar" : "fab"}
+        onOpenMark={onOpenMark}
         who={WHO}
         episode={episode}
         episodes={episodes}
@@ -377,6 +407,11 @@ export default function CompanionLayer({ stage, defaultEpisode }: { stage: Stage
         notice={notice}
         error={problem ?? thread.error}
       />
-    </div>
   );
+  if (narrow) {
+    // The bar is the sheet's handle; the open conversation is its body.
+    const slot = open ? stage.sheetBody : stage.sheetHandle;
+    return slot ? createPortal(dock, slot) : null;
+  }
+  return <div className="stage-talk-host">{dock}</div>;
 }