refactor(state-machine): derive legend from the machine's edges

Add navigate/changeScope transition kinds and build the legend from the
transitions a machine actually has, so each blueprint shows only its own
kinds — needed for Calendar, whose lifecycle has no loadMore().

src/components/StateMachine.vue

@@ -71,20 +71,29 @@ const edges = computed(() =>
   }),
 )
 
-const legendItems = (() => {
+// Legend is derived from the transitions the machine actually has, so each
-  const items: [string, SmKind][] = [
+// blueprint shows exactly its own transition kinds — no phantom loadMore() on
-    ["succeed()", "succeed"],
+// Calendar, no missing navigate()/changeScope().
-    ["fail()", "fail"],
+const KIND_LABELS: Record<SmKind, string> = {
-    ["refresh()", "refresh"],
+  succeed: "succeed()",
-    ["loadMore()", "loadMore"],
+  fail: "fail()",
-  ]
+  refresh: "refresh()",
+  loadMore: "loadMore()",
+  navigate: "navigate(δ)",
+  changeScope: "changeScope(s)",
+}
+const KIND_ORDER: SmKind[] = ["succeed", "fail", "refresh", "loadMore", "navigate", "changeScope"]
+
+const legendItems = computed(() => {
+  const present = new Set(props.machine.edges.map((e) => e.kind))
   let lxp = 70
-  return items.map(([t, k]) => {
+  return KIND_ORDER.filter((k) => present.has(k)).map((k) => {
+    const t = KIND_LABELS[k]
     const item = { t, color: SM_COLORS[k], x1: lxp, x2: lxp + 18, tx: lxp + 24, y: 8, ty: 12 }
     lxp += 24 + t.length * 6.6 + 26
     return item
   })
-})()
+})
 </script>
 
 <template>

src/data/blueprint.ts

@@ -58,7 +58,7 @@ export interface SmNode {
   label: string
 }
 
-export type SmKind = "succeed" | "fail" | "refresh" | "loadMore"
+export type SmKind = "succeed" | "fail" | "refresh" | "loadMore" | "navigate" | "changeScope"
 
 export interface SmEdge {
   from: string
@@ -78,6 +78,8 @@ export const SM_COLORS: Record<SmKind | "init", string> = {
   fail: "#ff8f8f",
   refresh: "#ffb84d",
   loadMore: "#8fd0ff",
+  navigate: "#b79cff",
+  changeScope: "#67d0c0",
   init: "#4f7099",
 }