@miadi/stateloom-web 0.1.0

package/server/src/app/globals.css

@@ -0,0 +1,317 @@
+@import "tailwindcss";
+
+:root {
+  --background: #030712;
+  --foreground: #e2e8f0;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.toolbar-btn {
+  @apply text-xs bg-gray-800 hover:bg-gray-700 text-gray-300 px-2.5 py-1 rounded border border-gray-700;
+}
+
+.toolbar-btn-sm {
+  @apply text-xs bg-gray-700 hover:bg-gray-600 text-gray-300 px-1.5 py-0.5 rounded;
+}
+
+/* --- Mobile shell: phone-first responsive layout -------------------------- */
+
+:root {
+  /* Height of the phone-only tab dock. Declared once because two things depend
+     on agreeing about it: the dock's own height, and the padding that keeps the
+     rest of the app from hiding underneath it. */
+  --sm-dock-h: 3.5rem;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+/* Browser page zoom is refused here, document-wide, and this — not the viewport
+   meta tag — is what actually does it. `user-scalable=no` is advice a browser may
+   decline: Android Chrome overrides it whenever "Force enable zoom" is on in
+   accessibility settings, and iOS Safari has ignored it outright for years.
+   `touch-action` is a compositor-level contract and is honoured.
+
+   Why `pan-x pan-y` and not `none`: the value is a whitelist, and pinch-zoom is
+   absent from it, so the browser may still pan in either direction but may never
+   scale the page. That distinction is the whole difference between a fix and a
+   regression — `none` here would kill one-finger scrolling in all four panels
+   and the horizontal swipe along the toolbar strip.
+
+   Why not `pan-y` (which would be enough for the panels): the effective touch
+   action for a touch is the *intersection* of this value with every element's
+   down to the one under the finger. `pan-y` here would intersect the toolbar
+   strip's horizontal scroll away to nothing. For the same reason the canvas keeps
+   full control: its `touch-action: none` intersects to `none` regardless of what
+   is declared up here. */
+html,
+body,
+.app-shell {
+  touch-action: pan-x pan-y;
+}
+
+body {
+  /* This is a fixed full-screen editor — nothing is supposed to scroll at the
+     document level. Pinning it here also stops iOS rubber-banding and keeps the
+     closed bottom sheet (which parks itself one screen below the fold) from
+     growing the scrollable area. */
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+
+/* Root shell. `dvh` tracks the *dynamic* viewport, so the bottom of the app no
+   longer disappears behind iOS Safari's retracting URL bar the way `100vh`
+   caused; the `vh` line above it is the fallback for engines without `dvh`. */
+.app-shell {
+  height: 100vh;
+  height: 100dvh;
+  padding-top: env(safe-area-inset-top);
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+/* Phone only: hold content clear of the fixed tab dock. Zeroed at the `md`
+   breakpoint because the dock is gone there and the sidebar is a real column. */
+.dock-offset {
+  padding-bottom: calc(var(--sm-dock-h) + env(safe-area-inset-bottom));
+}
+
+.dock-safe {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+/* Anything pinned with `inset-x-0` is viewport-relative and so escapes the
+   shell's own horizontal safe-area padding — in landscape that means running
+   under the notch. These elements pad themselves back. */
+.safe-x {
+  padding-left: env(safe-area-inset-left);
+  padding-right: env(safe-area-inset-right);
+}
+
+@media (min-width: 768px) {
+  .dock-offset {
+    padding-bottom: 0;
+  }
+}
+
+/* Presence chips ride the top-right corner. Under `viewport-fit=cover` that
+   corner can be beneath a notch or the status bar, so the offset is measured
+   from the safe area rather than the raw viewport edge. */
+.presence-dock {
+  position: fixed;
+  top: calc(env(safe-area-inset-top) + 0.5rem);
+  right: calc(env(safe-area-inset-right) + 1rem);
+  z-index: 50;
+}
+
+/* The way back. A pinch on the chrome moves the root font size, and every length
+   in this stylesheet is a multiple of it — so at 175% the app is legible but the
+   control that undoes it must not have grown along with everything else. Every
+   number below is in px for exactly that reason: this pill is the same physical
+   size at 75% and at 175%, and stays a reachable target either way.
+
+   It sits above the phone dock (`--sm-dock-h` is itself rem, so it tracks the
+   dock's real height at any scale) and above the bottom sheet's z-30, because an
+   escape hatch you have to close a panel to reach is not an escape hatch. */
+.ui-scale-pill {
+  position: fixed;
+  z-index: 45;
+  right: calc(env(safe-area-inset-right) + 12px);
+  bottom: calc(var(--sm-dock-h) + env(safe-area-inset-bottom) + 8px);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px 6px 12px;
+  border: 1px solid #374151;
+  border-radius: 9999px;
+  background: rgb(17 24 39 / 0.92);
+  backdrop-filter: blur(6px);
+  font-size: 12px;
+  line-height: 1;
+  color: #9ca3af;
+  white-space: nowrap;
+}
+
+.ui-scale-pill button {
+  min-height: 32px;
+  padding: 0 12px;
+  border-radius: 9999px;
+  background: #1f2937;
+  font-size: 12px;
+  line-height: 1;
+  color: #93c5fd;
+}
+
+@media (min-width: 768px) {
+  /* No dock at this width — the pill drops to the bottom edge it was riding. */
+  .ui-scale-pill {
+    bottom: calc(env(safe-area-inset-bottom) + 12px);
+  }
+}
+
+/* The toolbar is ~15 controls wide — far past a phone. On a phone it becomes a
+   single horizontally-scrollable strip, so every control stays reachable by
+   swiping instead of overflowing off-screen or wrapping into four tall rows.
+   At `md` and up the wrapper dissolves via `display: contents`, which hands the
+   buttons back to the toolbar as direct flex children — the desktop row is
+   therefore byte-for-byte the layout it was before. The identity block plays
+   the same trick so the `flex-1` spacer keeps working in both shapes. */
+.toolbar-ident,
+.toolbar-strip {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-width: 0;
+}
+
+.toolbar-strip {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* Controls in the strip keep their natural size instead of being squeezed to
+   nothing by the horizontal overflow. */
+.toolbar-strip > * {
+  flex: 0 0 auto;
+}
+
+@media (min-width: 768px) {
+  .toolbar-ident,
+  .toolbar-strip {
+    display: contents;
+  }
+}
+
+/* Touch sizing. The discriminator is `pointer: coarse`, not a width breakpoint:
+   a touch laptop gets the roomy targets it needs, and a narrow desktop window
+   keeps the dense mouse-precision layout it has today. */
+@media (pointer: coarse) {
+  .toolbar-btn,
+  .toolbar-btn-sm {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+    padding-inline: 0.75rem;
+    font-size: 0.8125rem;
+  }
+
+  .toolbar-strip select,
+  .toolbar-strip input {
+    min-height: 2.75rem;
+  }
+
+  /* iOS zooms the entire page when a focused field is under 16px, and every
+     field in the panels is text-xs/text-sm — so each tap into one used to yank
+     the layout sideways. 16px removes the trap without touching desktop. */
+  input:not([type="checkbox"]),
+  select,
+  textarea {
+    font-size: 16px;
+  }
+
+  input[type="checkbox"] {
+    width: 1.15rem;
+    height: 1.15rem;
+  }
+
+  /* The panels are built from dense link-like controls (✕, "+ action"). This
+     gives them a real 44px target without changing their layout role — no
+     display change, so `block w-full text-left` rows stay left-aligned. */
+  .touch-targets button {
+    min-height: 2.75rem;
+    min-width: 2.75rem;
+  }
+
+  .touch-targets select,
+  .touch-targets input:not([type="checkbox"]) {
+    min-height: 2.75rem;
+  }
+
+  .touch-targets textarea {
+    min-height: 3.5rem;
+  }
+}
+
+/* --- 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));
+  }
+}

package/server/src/app/layout.tsx

@@ -0,0 +1,75 @@
+import type { Metadata, Viewport } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "SMCraft Designer",
+  description: "Visual State Machine Designer",
+};
+
+/**
+ * The app shipped with no viewport declaration at all, which is why phones
+ * rendered it microscopic: with no `width=device-width` a mobile browser
+ * assumes a ~980px desktop layout viewport and then shrink-to-fits the whole
+ * page into the screen. Everything below follows from fixing that.
+ *
+ * `viewportFit: "cover"` is what makes `env(safe-area-inset-*)` report real
+ * numbers instead of zero — the shell in globals.css pads itself with them, so
+ * notch and home-indicator hardware no longer sit on top of the toolbar/dock.
+ *
+ * Pinch-zoom is pinned to 1 deliberately, but do not mistake these two lines for
+ * the mechanism: `userScalable` is advice, and browsers decline it. Android
+ * Chrome overrides it whenever "Force enable zoom" is set in accessibility, and
+ * iOS Safari has ignored it for years. What actually reserves two-finger
+ * gestures for the app is `touch-action` in globals.css — `pan-x pan-y` on the
+ * document, which permits every kind of scrolling and forbids page zoom. These
+ * two lines remain as the cheap first line of defence.
+ *
+ * The usual accessibility objection to `userScalable: false` is that it blocks
+ * magnification — here both halves of that capability exist in-app instead: the
+ * canvas has its own zoom, and a pinch on the chrome scales the interface itself
+ * (see components/UiScale.tsx).
+ *
+ * `interactiveWidget: "resizes-content"` matters because the panel sheet is
+ * pinned to the bottom edge: without it the on-screen keyboard covers the very
+ * inputs it was opened to edit, and nothing scrolls because the document itself
+ * does not scroll.
+ */
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+  viewportFit: "cover",
+  interactiveWidget: "resizes-content",
+  themeColor: "#030712",
+  colorScheme: "dark",
+};
+
+/**
+ * Restore the remembered chrome size before anything paints.
+ *
+ * `UiScale` re-applies this from an effect anyway, but an effect runs after the
+ * first paint: without this the app would flash at 100% and then jump to 175% on
+ * every single reload, which reads as a bug even though it settles correctly.
+ *
+ * The two numbers here are the same clamp and the same key as `lib/uiScale.ts`;
+ * they are repeated rather than imported because this string is handed to the
+ * parser, not to the bundler. Silence on failure is the point — a browser with
+ * storage disabled gets the default size, not a blank page.
+ */
+const RESTORE_UI_SCALE = `try{var s=parseFloat(localStorage.getItem("stateloom.uiScale.v1"));if(s>=0.75&&s<=1.75)document.documentElement.style.fontSize=(16*s)+"px"}catch(e){}`;
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en" className="dark">
+      <body className="antialiased">
+        <script dangerouslySetInnerHTML={{ __html: RESTORE_UI_SCALE }} />
+        {children}
+      </body>
+    </html>
+  );
+}

package/server/src/app/page.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import { useState, type CSSProperties } from "react";
+import Canvas from "@/components/Canvas";
+import PropertiesPanel from "@/components/PropertiesPanel";
+import EventsPanel from "@/components/EventsPanel";
+import SettingsPanel from "@/components/SettingsPanel";
+import ValidationPanel from "@/components/ValidationPanel";
+import Toolbar from "@/components/Toolbar";
+import CodePreview from "@/components/CodePreview";
+import DesignBridge from "@/components/DesignBridge";
+import UiScale from "@/components/UiScale";
+import { useDesignerStore } from "@/store/useDesignerStore";
+
+type Tab = "properties" | "events" | "settings" | "validation";
+
+/**
+ * Place the context menu at the press point, opening toward the middle of the
+ * screen. A long-press near the right or bottom edge of a phone would otherwise
+ * render the menu partly off-screen — a max-width alone only rescues the
+ * horizontal case, and nothing rescued the vertical one, which is exactly where
+ * a thumb naturally rests.
+ *
+ * Flipping past the midpoint rather than measuring the menu is deliberate: a
+ * measure-then-correct pass would paint the menu once at the wrong place and
+ * visibly snap. The menu is small relative to half a screen, so the midpoint is
+ * a sufficient proxy for "would this overflow".
+ */
+function contextMenuPlacement(x: number, y: number): CSSProperties {
+  const w = typeof window === "undefined" ? 0 : window.innerWidth;
+  const h = typeof window === "undefined" ? 0 : window.innerHeight;
+  const flipX = w > 0 && x > w / 2;
+  const flipY = h > 0 && y > h / 2;
+  return {
+    left: x,
+    top: y,
+    maxWidth: "calc(100vw - 1rem)",
+    maxHeight: "calc(100dvh - 1rem)",
+    overflowY: "auto",
+    transform: `translate(${flipX ? "-100%" : "0"}, ${flipY ? "-100%" : "0"})`,
+  };
+}
+
+export default function Home() {
+  const [activeTab, setActiveTab] = useState<Tab>("properties");
+  // Phone-only state. The panel column and the bottom sheet are the same
+  // element: below `md` it is an overlay that starts closed so the canvas owns
+  // the entire screen, and at `md` and up the responsive classes pin it open as
+  // the 320px right sidebar it has always been — this flag stops mattering.
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const errors = useDesignerStore((s) => s.errors);
+  const contextMenu = useDesignerStore((s) => s.contextMenu);
+  const hideContextMenu = useDesignerStore((s) => s.hideContextMenu);
+  const addState = useDesignerStore((s) => s.addState);
+  const removeState = useDesignerStore((s) => s.removeState);
+  const setDrawMode = useDesignerStore((s) => s.setDrawMode);
+  const setDrawSource = useDesignerStore((s) => s.setDrawSource);
+
+  const tabs: { id: Tab; label: string; icon: string; badge?: number }[] = [
+    { id: "properties", label: "Properties", icon: "🎛" },
+    { id: "events", label: "Events", icon: "⚡" },
+    { id: "settings", label: "Settings", icon: "⚙" },
+    { id: "validation", label: "Errors", icon: "⚠", badge: errors.length || undefined },
+  ];
+
+  const activeLabel = tabs.find((t) => t.id === activeTab)?.label ?? "";
+
+  // Tapping the tab you are already reading closes the sheet, so the dock is
+  // both switcher and dismiss control and no screen height is spent on a
+  // separate close affordance.
+  const toggleTab = (id: Tab) => {
+    setSheetOpen((wasOpen) => !(wasOpen && activeTab === id));
+    setActiveTab(id);
+  };
+
+  return (
+    <div
+      className="app-shell dock-offset flex flex-col overflow-hidden"
+      onClick={() => contextMenu.visible && hideContextMenu()}
+    >
+      <DesignBridge />
+      {/* The chrome's own pinch, and the pill that undoes it. Renders nothing at
+          100%, so it costs an empty component until someone reaches for it. */}
+      <UiScale />
+      <Toolbar />
+      <div className="flex flex-1 min-h-0 overflow-hidden relative">
+        {/* Canvas */}
+        <div className="flex-1 overflow-hidden">
+          <Canvas />
+        </div>
+
+        {/* Scrim. Phone only — it is what makes "tap the canvas to dismiss"
+            work without stealing the canvas's own pointer handlers when the
+            sheet is closed. */}
+        {sheetOpen && (
+          <div
+            className="fixed inset-0 z-20 bg-black/50 md:hidden"
+            onClick={() => setSheetOpen(false)}
+            aria-hidden="true"
+          />
+        )}
+
+        {/* Panel column. One element, two shapes: a bottom sheet that slides
+            over the canvas on a phone, and the unchanged `w-80` right sidebar
+            from `md` up. The `md:` overrides have to undo every phone-only
+            declaration — position, height, width, transform, radius, border
+            side — which is why the class list is long. */}
+        <aside
+          className={`safe-x fixed inset-x-0 bottom-0 z-30 h-[70dvh] flex flex-col overflow-hidden rounded-t-2xl border-t border-gray-800 bg-gray-900 shadow-2xl transition-transform duration-200 ease-out ${
+            sheetOpen ? "translate-y-0" : "translate-y-full pointer-events-none"
+          } md:static md:z-auto md:h-auto md:w-80 md:translate-y-0 md:pointer-events-auto md:rounded-none md:border-t-0 md:border-l md:shadow-none md:transition-none`}
+        >
+          {/* Sheet header (phone). The grab handle reads as "this thing is a
+              sheet"; the dock below already names the tabs, so repeating the
+              tab bar here would only cost height. */}
+          <div className="md:hidden">
+            <div className="flex justify-center pt-2 pb-1">
+              <span className="h-1 w-10 rounded-full bg-gray-700" />
+            </div>
+            <div className="flex items-center justify-between border-b border-gray-800 px-4 pb-2">
+              <h2 className="text-sm font-semibold text-gray-300">{activeLabel}</h2>
+              <button
+                onClick={() => setSheetOpen(false)}
+                className="-mr-2 px-3 py-2 text-lg text-gray-400"
+                aria-label="Close panel"
+              >
+                ✕
+              </button>
+            </div>
+          </div>
+
+          {/* Tab bar (desktop). Hidden on a phone because the fixed dock at the
+              bottom of the screen is the switcher there — thumbs live at the
+              bottom edge, not the top of a sheet. */}
+          <div className="hidden border-b border-gray-800 md:flex">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`flex-1 text-xs py-2 px-1 text-center transition-colors relative ${
+                  activeTab === tab.id
+                    ? "text-blue-400 border-b-2 border-blue-400 bg-gray-800/50"
+                    : "text-gray-500 hover:text-gray-300"
+                }`}
+              >
+                {tab.label}
+                {tab.badge !== undefined && tab.badge > 0 && (
+                  <span className="absolute top-1 right-1 bg-red-600 text-white text-[9px] rounded-full px-1 min-w-[14px]">
+                    {tab.badge}
+                  </span>
+                )}
+              </button>
+            ))}
+          </div>
+
+          {/* Tab content. `touch-targets` is the hook the coarse-pointer block
+              in globals.css uses to grow every control inside the panels to
+              44px — one class instead of a responsive rewrite of four panels.
+              `dock-offset` keeps the last row of a panel from ending up behind
+              the dock, which paints over the bottom of the sheet. */}
+          <div className="touch-targets dock-offset flex-1 overflow-y-auto overscroll-contain">
+            {activeTab === "properties" && <PropertiesPanel />}
+            {activeTab === "events" && <EventsPanel />}
+            {activeTab === "settings" && <SettingsPanel />}
+            {activeTab === "validation" && <ValidationPanel />}
+          </div>
+        </aside>
+
+        <CodePreview />
+      </div>
+
+      {/* Tab dock (phone). Fixed to the bottom edge so the four panels stay one
+          thumb-tap away without ever occupying canvas width, and so the error
+          count — the one thing a user most needs to notice — is on screen at all
+          times rather than hidden inside a closed drawer. */}
+      <nav className="dock-safe safe-x fixed inset-x-0 bottom-0 z-40 flex border-t border-gray-800 bg-gray-900/95 backdrop-blur-md md:hidden">
+        {tabs.map((tab) => {
+          const current = sheetOpen && activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              onClick={() => toggleTab(tab.id)}
+              aria-pressed={current}
+              className={`relative flex h-14 flex-1 flex-col items-center justify-center gap-0.5 text-[11px] transition-colors ${
+                current ? "text-blue-400" : "text-gray-500"
+              }`}
+            >
+              <span className="text-base leading-none">{tab.icon}</span>
+              <span>{tab.label}</span>
+              {tab.badge !== undefined && tab.badge > 0 && (
+                <span className="absolute top-1 right-1/2 translate-x-4 rounded-full bg-red-600 px-1 text-[10px] leading-4 text-white min-w-[16px]">
+                  {tab.badge}
+                </span>
+              )}
+              {current && <span className="absolute inset-x-4 top-0 h-0.5 rounded-full bg-blue-400" />}
+            </button>
+          );
+        })}
+      </nav>
+
+      {/* Context menu. `contextMenu` is always an object — the `visible` flag is
+          what says whether it was opened, so gating on the object alone left the
+          menu parked over the top-left of the canvas from first paint.
+          Placement is inline rather than Tailwind arbitrary values because it
+          depends on where the press landed — see `contextMenuPlacement`. */}
+      {contextMenu.visible && (
+        <div
+          className="fixed z-50 bg-gray-900 border border-gray-700 rounded-lg shadow-xl py-1 min-w-[180px] md:min-w-[140px]"
+          style={contextMenuPlacement(contextMenu.x, contextMenu.y)}
+          onClick={(e) => e.stopPropagation()}
+        >
+          {contextMenu.target?.kind === "state" ? (
+            <>
+              <button
+                className="block w-full text-left text-sm text-gray-300 hover:bg-gray-800 px-4 py-3 md:text-xs md:px-3 md:py-1.5"
+                onClick={() => {
+                  setDrawMode("transition");
+                  setDrawSource(contextMenu.target!.id!);
+                  hideContextMenu();
+                }}
+              >
+                ↗ 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"
+                onClick={() => {
+                  if (contextMenu.target?.id) removeState(contextMenu.target.id);
+                  hideContextMenu();
+                }}
+              >
+                🗑 Delete state
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                className="block w-full text-left text-sm text-gray-300 hover:bg-gray-800 px-4 py-3 md:text-xs md:px-3 md:py-1.5"
+                onClick={() => {
+                  const name = prompt("State name:");
+                  if (name) addState(null, { name, kind: "normal" });
+                  hideContextMenu();
+                }}
+              >
+                ＋ Add state here
+              </button>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}