@almadar/std 16.243.0 → 16.244.0

package/behaviors/lolo/ui/learning/atoms/std-learn-tour-3d.lolo

@@ -74,7 +74,7 @@ orbital LearnTour3DOrbital {
     initial: idle
 
     state idle {
-      INIT -> idle when (== @config.matchMode "")
+      INIT -> idle when (and (== @config.matchMode "") (== @config.rosterSource "config"))
         (set @entity.active true)
         (set @entity.title @config.title)
         (set @entity.stations @config.stations)
@@ -123,7 +123,7 @@ orbital LearnTour3DOrbital {
         (set @entity.active false)
         (render-ui main null)
 
-      MODE_SELECTED -> idle when (== ?mode @config.matchMode)
+      MODE_SELECTED -> idle when (and (== ?mode @config.matchMode) (== @config.rosterSource "config"))
         (set @entity.active true)
         (set @entity.title @config.title)
         (set @entity.stations @config.stations)
@@ -168,6 +168,55 @@ orbital LearnTour3DOrbital {
         })
         (emit TOUR_3D_UPDATED { id: @entity.selectedId, name: (object/get (array/nth @entity.stations 0) name), caption: (object/get (array/nth @entity.stations 0) caption), visited: (array/len @entity.visitedIds), total: (array/len @entity.stations), tourComplete: false })
 
+      ROSTER_LOADED -> idle when (and (== @config.rosterSource "event") (and (== ?mode @config.matchMode) (> (array/len ?stations) 0)))
+        (set @entity.active true)
+        (set @entity.title @config.title)
+        (set @entity.stations ?stations)
+        (set @entity.backdrop ?backdrop)
+        (set @entity.edges ?edges)
+        (set @entity.selectedIndex 0)
+        (set @entity.selectedId (object/get (array/nth @entity.stations 0) id))
+        (set @entity.visitedIds [(object/get (array/nth @entity.stations 0) id)])
+        (set @entity.tourComplete false)
+        (set @entity.narration (str/concat (object/get (array/nth @entity.stations 0) name) " — " (object/get (array/nth @entity.stations 0) caption)))
+        (render-ui main {
+          type: box
+          padding: md
+          children: [
+            { type: stack, direction: vertical, gap: md, children: [
+                { type: stack, direction: horizontal, justify: between, align: start, gap: md, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: h4, content: @entity.title },
+                        (if (== @config.summary "") null { type: typography, variant: body2, color: muted, content: @config.summary })
+                      ] },
+                    { type: badge, label: (if @entity.tourComplete "Complete" (str/concat "Station " (str/concat "" (+ @entity.selectedIndex 1)) " of " (str/concat "" (array/len @entity.stations)))), variant: (if @entity.tourComplete "success" "neutral") }
+                  ] },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: TOUR, label: @config.tourLabel, icon: "chevron-right", variant: primary },
+                    { type: button, action: RESET, label: @config.resetLabel, icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Explored " (str/concat "" (array/len @entity.visitedIds)) " of " (str/concat "" (array/len @entity.stations)) (if @entity.tourComplete " — tour complete!" "")) }
+                  ] },
+                { type: biology-canvas, keyMap: { Space: TOUR, ArrowRight: TOUR, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor,
+                  mode: "3d",
+                  camera: { mode: "perspective", zoom: @config.zoom, fov: @config.fov, azimuth: @config.azimuth,
+                    target: { x: (object/get (array/nth @entity.stations @entity.selectedIndex) x), y: (object/get (array/nth @entity.stations @entity.selectedIndex) y), z: (object/get (array/nth @entity.stations @entity.selectedIndex) z) } },
+                  lighting: @config.lighting,
+                  post: @config.post,
+                  nodes: (array/map (array/concat @entity.backdrop @entity.stations) (fn n { id: (object/get @n id), x: (object/get @n x), y: (object/get @n y), z: (object/get @n z), radius: (if (== (object/get @n id) @entity.selectedId) (* (object/get @n radius) 1.4) (object/get @n radius)), color: (object/get @n color), label: (object/get @n name), shape: (object/get @n shape), opacity: (object/get @n opacity) })),
+                  edges: @entity.edges,
+                  interactive: true,
+                  onShapeClick: "SELECT_STATION"
+                },
+                { type: typography, variant: body, content: @entity.narration }
+              ] }
+          ]
+        })
+        (emit TOUR_3D_UPDATED { id: @entity.selectedId, name: (object/get (array/nth @entity.stations 0) name), caption: (object/get (array/nth @entity.stations 0) caption), visited: (array/len @entity.visitedIds), total: (array/len @entity.stations), tourComplete: false })
+
+      ROSTER_LOADED -> idle when (and (== @config.rosterSource "event") (not (== ?mode @config.matchMode)))
+        (set @entity.active false)
+        (render-ui main null)
+
       TOUR -> idle when (== @entity.active true)
         (if (and (not @entity.tourComplete) (== (if (array/includes @entity.visitedIds (object/get (array/nth @entity.stations (math/mod (+ @entity.selectedIndex 1) (array/len @entity.stations))) id)) (array/len @entity.visitedIds) (+ (array/len @entity.visitedIds) 1)) (array/len @entity.stations))) (emit LEARN_ROUND_COMPLETE { score: (array/len @entity.stations), total: (array/len @entity.stations) }) null)
         (set @entity.selectedIndex (math/mod (+ @entity.selectedIndex 1) (array/len @entity.stations)))
@@ -348,6 +397,14 @@ orbital LearnTour3DOrbital {
       }
         @description "Lab router broadcast naming the active mode; this instrument renders when the mode equals matchMode, otherwise renders null."
         @tier "domain"
+      ROSTER_LOADED {
+        mode : string!
+        stations : [Learn3DStation]!
+        edges : [Learn3DEdge]!
+        backdrop : [Learn3DStation]!
+      }
+        @description "Runtime content feed, honoured only when rosterSource is event — mode names the instrument it is for (the matchMode it carries, blank when standalone) and stations, edges and backdrop are the scene roster; a matching instrument re-initialises from it exactly as INIT does from config, any other instrument hides."
+        @tier "domain"
       SELECT_STATION {
         payload : Learn3DClick
       }
@@ -388,6 +445,10 @@ orbital LearnTour3DOrbital {
         @label "Match Mode"
         @description "When composed behind a lab router, the MODE_SELECTED mode value this instrument responds to. Empty string means standalone — render immediately on INIT."
         @tier "presentation"
+      rosterSource : "config" | "event" = "config"
+        @label "Roster Source"
+        @description "Where the stations, edges and backdrop come from: config reads those knobs at INIT; event waits for ROSTER_LOADED and takes them from its payload."
+        @tier "domain"
       title : string = "3D Guided Tour"
         @label "Title"
         @description "Title shown above the canvas."

package/behaviors/lolo/ui/learning/atoms/std-learn-trace-player.lolo

@@ -17,6 +17,7 @@ orbital LearnTracePlayerOrbital {
     id : string!
     active : boolean = false
     title : string
+    frames : [TraceFrame]
     frameIndex : number = 0
     running : boolean = false
     speed : number = 1
@@ -31,16 +32,17 @@ orbital LearnTracePlayerOrbital {
     initial: idle
 
     state idle {
-      INIT -> idle when (== @config.matchMode "")
+      INIT -> idle when (and (== @config.matchMode "") (== @config.rosterSource "config"))
         (set @entity.active true)
         (set @entity.title @config.title)
+        (set @entity.frames @config.frames)
         (set @entity.frameIndex 0)
         (set @entity.running false)
         (set @entity.statusNote "Paused")
-        (set @entity.frameLabel (object/get (array/nth @config.frames @entity.frameIndex) label))
-        (set @entity.frameCaption (object/get (array/nth @config.frames @entity.frameIndex) caption))
-        (set @entity.bars (array/map (object/get (array/nth @config.frames @entity.frameIndex) values)
-          { value: @item, color: (if (array/includes (object/get (array/nth @config.frames @entity.frameIndex) highlights) @index) @config.highlightColor @config.baseColor), label: (str/concat "" @item) }))
+        (set @entity.frameLabel (object/get (array/nth @entity.frames @entity.frameIndex) label))
+        (set @entity.frameCaption (object/get (array/nth @entity.frames @entity.frameIndex) caption))
+        (set @entity.bars (array/map (object/get (array/nth @entity.frames @entity.frameIndex) values)
+          { value: @item, color: (if (array/includes (object/get (array/nth @entity.frames @entity.frameIndex) highlights) @index) @config.highlightColor @config.baseColor), label: (str/concat "" @item) }))
         (render-ui main {
           type: box
           padding: md
@@ -62,9 +64,9 @@ orbital LearnTracePlayerOrbital {
                         { type: button, action: SPEED_SET, actionPayload: { speed: 2 }, label: "2×", size: sm, variant: (if (== @entity.speed 2) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 2) "true" "false") },
                         { type: button, action: SPEED_SET, actionPayload: { speed: 4 }, label: "4×", size: sm, variant: (if (== @entity.speed 4) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 4) "true" "false") }
                       ] },
-                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @config.frames)) }
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @entity.frames)) }
                   ] },
-                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @config.frames), showPercentage: false },
+                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @entity.frames), showPercentage: false },
                 { type: algorithm-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESTART }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bars: @entity.bars },
                 { type: card, variant: bordered, padding: md, title: @entity.frameLabel, children: [
                     { type: typography, variant: body, content: @entity.frameCaption }
@@ -78,16 +80,17 @@ orbital LearnTracePlayerOrbital {
         (set @entity.running false)
         (render-ui main null)
 
-      MODE_SELECTED -> idle when (== ?mode @config.matchMode)
+      MODE_SELECTED -> idle when (and (== ?mode @config.matchMode) (== @config.rosterSource "config"))
         (set @entity.active true)
         (set @entity.title @config.title)
+        (set @entity.frames @config.frames)
         (set @entity.frameIndex 0)
         (set @entity.running false)
         (set @entity.statusNote "Paused")
-        (set @entity.frameLabel (object/get (array/nth @config.frames @entity.frameIndex) label))
-        (set @entity.frameCaption (object/get (array/nth @config.frames @entity.frameIndex) caption))
-        (set @entity.bars (array/map (object/get (array/nth @config.frames @entity.frameIndex) values)
-          { value: @item, color: (if (array/includes (object/get (array/nth @config.frames @entity.frameIndex) highlights) @index) @config.highlightColor @config.baseColor), label: (str/concat "" @item) }))
+        (set @entity.frameLabel (object/get (array/nth @entity.frames @entity.frameIndex) label))
+        (set @entity.frameCaption (object/get (array/nth @entity.frames @entity.frameIndex) caption))
+        (set @entity.bars (array/map (object/get (array/nth @entity.frames @entity.frameIndex) values)
+          { value: @item, color: (if (array/includes (object/get (array/nth @entity.frames @entity.frameIndex) highlights) @index) @config.highlightColor @config.baseColor), label: (str/concat "" @item) }))
         (render-ui main {
           type: box
           padding: md
@@ -109,9 +112,9 @@ orbital LearnTracePlayerOrbital {
                         { type: button, action: SPEED_SET, actionPayload: { speed: 2 }, label: "2×", size: sm, variant: (if (== @entity.speed 2) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 2) "true" "false") },
                         { type: button, action: SPEED_SET, actionPayload: { speed: 4 }, label: "4×", size: sm, variant: (if (== @entity.speed 4) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 4) "true" "false") }
                       ] },
-                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @config.frames)) }
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @entity.frames)) }
                   ] },
-                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @config.frames), showPercentage: false },
+                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @entity.frames), showPercentage: false },
                 { type: algorithm-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESTART }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bars: @entity.bars },
                 { type: card, variant: bordered, padding: md, title: @entity.frameLabel, children: [
                     { type: typography, variant: body, content: @entity.frameCaption }
@@ -120,6 +123,54 @@ orbital LearnTracePlayerOrbital {
           ]
         })
 
+      ROSTER_LOADED -> idle when (and (== @config.rosterSource "event") (and (== ?mode @config.matchMode) (> (array/len ?frames) 0)))
+        (set @entity.frames ?frames)
+        (set @entity.active true)
+        (set @entity.title @config.title)
+        (set @entity.frameIndex 0)
+        (set @entity.running false)
+        (set @entity.statusNote "Paused")
+        (set @entity.frameLabel (object/get (array/nth ?frames @entity.frameIndex) label))
+        (set @entity.frameCaption (object/get (array/nth ?frames @entity.frameIndex) caption))
+        (set @entity.bars (array/map (object/get (array/nth ?frames @entity.frameIndex) values)
+          { value: @item, color: (if (array/includes (object/get (array/nth ?frames @entity.frameIndex) highlights) @index) @config.highlightColor @config.baseColor), label: (str/concat "" @item) }))
+        (render-ui main {
+          type: box
+          padding: md
+          children: [
+            { type: stack, direction: vertical, gap: md, children: [
+                { type: stack, direction: horizontal, justify: between, align: start, gap: md, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: h4, content: @entity.title },
+                        (if (== @config.summary "") null { type: typography, variant: body2, color: muted, content: @config.summary })
+                      ] },
+                    { type: badge, label: @entity.statusNote, variant: (if (== @entity.statusNote "Finished") "success" (if @entity.running "primary" "neutral")) }
+                  ] },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    (if @entity.running { type: button, action: TOGGLE_RUN, label: "Pause", icon: "pause", variant: primary, aria-pressed: "true" } { type: button, action: TOGGLE_RUN, label: "Play", icon: "play", variant: primary, aria-pressed: "false", disabled: (== @entity.statusNote "Finished") }),
+                    { type: button, action: RESTART, label: "Restart", icon: "rotate-ccw", variant: ghost },
+                    { type: stack, direction: horizontal, align: center, gap: xs, role: "group", aria-label: "Speed", children: [
+                        { type: button, action: SPEED_SET, actionPayload: { speed: 0.5 }, label: "0.5×", size: sm, variant: (if (== @entity.speed 0.5) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 0.5) "true" "false") },
+                        { type: button, action: SPEED_SET, actionPayload: { speed: 1 }, label: "1×", size: sm, variant: (if (== @entity.speed 1) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 1) "true" "false") },
+                        { type: button, action: SPEED_SET, actionPayload: { speed: 2 }, label: "2×", size: sm, variant: (if (== @entity.speed 2) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 2) "true" "false") },
+                        { type: button, action: SPEED_SET, actionPayload: { speed: 4 }, label: "4×", size: sm, variant: (if (== @entity.speed 4) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 4) "true" "false") }
+                      ] },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len ?frames)) }
+                  ] },
+                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len ?frames), showPercentage: false },
+                { type: algorithm-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESTART }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bars: @entity.bars },
+                { type: card, variant: bordered, padding: md, title: @entity.frameLabel, children: [
+                    { type: typography, variant: body, content: @entity.frameCaption }
+                  ] }
+              ] }
+          ]
+        })
+
+      ROSTER_LOADED -> idle when (and (== @config.rosterSource "event") (not (== ?mode @config.matchMode)))
+        (set @entity.active false)
+        (set @entity.running false)
+        (render-ui main null)
+
       TOGGLE_RUN -> idle when (== @entity.active true)
         (set @entity.running (not @entity.running))
         (set @entity.statusNote (if @entity.running "Playing" "Paused"))
@@ -144,9 +195,9 @@ orbital LearnTracePlayerOrbital {
                         { type: button, action: SPEED_SET, actionPayload: { speed: 2 }, label: "2×", size: sm, variant: (if (== @entity.speed 2) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 2) "true" "false") },
                         { type: button, action: SPEED_SET, actionPayload: { speed: 4 }, label: "4×", size: sm, variant: (if (== @entity.speed 4) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 4) "true" "false") }
                       ] },
-                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @config.frames)) }
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @entity.frames)) }
                   ] },
-                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @config.frames), showPercentage: false },
+                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @entity.frames), showPercentage: false },
                 { type: algorithm-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESTART }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bars: @entity.bars },
                 { type: card, variant: bordered, padding: md, title: @entity.frameLabel, children: [
                     { type: typography, variant: body, content: @entity.frameCaption }
@@ -178,9 +229,9 @@ orbital LearnTracePlayerOrbital {
                         { type: button, action: SPEED_SET, actionPayload: { speed: 2 }, label: "2×", size: sm, variant: (if (== @entity.speed 2) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 2) "true" "false") },
                         { type: button, action: SPEED_SET, actionPayload: { speed: 4 }, label: "4×", size: sm, variant: (if (== @entity.speed 4) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 4) "true" "false") }
                       ] },
-                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @config.frames)) }
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @entity.frames)) }
                   ] },
-                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @config.frames), showPercentage: false },
+                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @entity.frames), showPercentage: false },
                 { type: algorithm-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESTART }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bars: @entity.bars },
                 { type: card, variant: bordered, padding: md, title: @entity.frameLabel, children: [
                     { type: typography, variant: body, content: @entity.frameCaption }
@@ -213,9 +264,9 @@ orbital LearnTracePlayerOrbital {
                         { type: button, action: SPEED_SET, actionPayload: { speed: 2 }, label: "2×", size: sm, variant: (if (== @entity.speed 2) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 2) "true" "false") },
                         { type: button, action: SPEED_SET, actionPayload: { speed: 4 }, label: "4×", size: sm, variant: (if (== @entity.speed 4) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 4) "true" "false") }
                       ] },
-                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @config.frames)) }
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @entity.frames)) }
                   ] },
-                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @config.frames), showPercentage: false },
+                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @entity.frames), showPercentage: false },
                 { type: algorithm-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESTART }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bars: @entity.bars },
                 { type: card, variant: bordered, padding: md, title: @entity.frameLabel, children: [
                     { type: typography, variant: body, content: @entity.frameCaption }
@@ -249,9 +300,9 @@ orbital LearnTracePlayerOrbital {
                         { type: button, action: SPEED_SET, actionPayload: { speed: 2 }, label: "2×", size: sm, variant: (if (== @entity.speed 2) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 2) "true" "false") },
                         { type: button, action: SPEED_SET, actionPayload: { speed: 4 }, label: "4×", size: sm, variant: (if (== @entity.speed 4) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 4) "true" "false") }
                       ] },
-                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @config.frames)) }
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @entity.frames)) }
                   ] },
-                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @config.frames), showPercentage: false },
+                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @entity.frames), showPercentage: false },
                 { type: algorithm-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESTART }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bars: @entity.bars },
                 { type: card, variant: bordered, padding: md, title: @entity.frameLabel, children: [
                     { type: typography, variant: body, content: @entity.frameCaption }
@@ -265,10 +316,10 @@ orbital LearnTracePlayerOrbital {
         (set @entity.frameIndex 0)
         (set @entity.running false)
         (set @entity.statusNote "Paused")
-        (set @entity.frameLabel (object/get (array/nth @config.frames @entity.frameIndex) label))
-        (set @entity.frameCaption (object/get (array/nth @config.frames @entity.frameIndex) caption))
-        (set @entity.bars (array/map (object/get (array/nth @config.frames @entity.frameIndex) values)
-          { value: @item, color: (if (array/includes (object/get (array/nth @config.frames @entity.frameIndex) highlights) @index) @config.highlightColor @config.baseColor), label: (str/concat "" @item) }))
+        (set @entity.frameLabel (object/get (array/nth @entity.frames @entity.frameIndex) label))
+        (set @entity.frameCaption (object/get (array/nth @entity.frames @entity.frameIndex) caption))
+        (set @entity.bars (array/map (object/get (array/nth @entity.frames @entity.frameIndex) values)
+          { value: @item, color: (if (array/includes (object/get (array/nth @entity.frames @entity.frameIndex) highlights) @index) @config.highlightColor @config.baseColor), label: (str/concat "" @item) }))
         (render-ui main {
           type: box
           padding: md
@@ -290,9 +341,9 @@ orbital LearnTracePlayerOrbital {
                         { type: button, action: SPEED_SET, actionPayload: { speed: 2 }, label: "2×", size: sm, variant: (if (== @entity.speed 2) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 2) "true" "false") },
                         { type: button, action: SPEED_SET, actionPayload: { speed: 4 }, label: "4×", size: sm, variant: (if (== @entity.speed 4) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 4) "true" "false") }
                       ] },
-                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @config.frames)) }
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @entity.frames)) }
                   ] },
-                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @config.frames), showPercentage: false },
+                { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @entity.frames), showPercentage: false },
                 { type: algorithm-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESTART }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bars: @entity.bars },
                 { type: card, variant: bordered, padding: md, title: @entity.frameLabel, children: [
                     { type: typography, variant: body, content: @entity.frameCaption }
@@ -310,13 +361,13 @@ orbital LearnTracePlayerOrbital {
         (when (>= (* @entity.elapsedMs @entity.speed) @config.tickMs)
           (do
             (set @entity.elapsedMs 0)
-            (set @entity.running (if (and (>= @entity.frameIndex (- (array/len @config.frames) 1)) (not @config.loop)) false @entity.running))
-            (set @entity.frameIndex (if (>= @entity.frameIndex (- (array/len @config.frames) 1)) (if @config.loop 0 @entity.frameIndex) (+ @entity.frameIndex 1)))
-            (set @entity.frameLabel (object/get (array/nth @config.frames @entity.frameIndex) label))
-            (set @entity.frameCaption (object/get (array/nth @config.frames @entity.frameIndex) caption))
-            (set @entity.bars (array/map (object/get (array/nth @config.frames @entity.frameIndex) values)
-              { value: @item, color: (if (array/includes (object/get (array/nth @config.frames @entity.frameIndex) highlights) @index) @config.highlightColor @config.baseColor), label: (str/concat "" @item) }))
-            (set @entity.statusNote (if @entity.running "Playing" (if (>= (+ @entity.frameIndex 1) (array/len @config.frames)) "Finished" "Paused")))
+            (set @entity.running (if (and (>= @entity.frameIndex (- (array/len @entity.frames) 1)) (not @config.loop)) false @entity.running))
+            (set @entity.frameIndex (if (>= @entity.frameIndex (- (array/len @entity.frames) 1)) (if @config.loop 0 @entity.frameIndex) (+ @entity.frameIndex 1)))
+            (set @entity.frameLabel (object/get (array/nth @entity.frames @entity.frameIndex) label))
+            (set @entity.frameCaption (object/get (array/nth @entity.frames @entity.frameIndex) caption))
+            (set @entity.bars (array/map (object/get (array/nth @entity.frames @entity.frameIndex) values)
+              { value: @item, color: (if (array/includes (object/get (array/nth @entity.frames @entity.frameIndex) highlights) @index) @config.highlightColor @config.baseColor), label: (str/concat "" @item) }))
+            (set @entity.statusNote (if @entity.running "Playing" (if (>= (+ @entity.frameIndex 1) (array/len @entity.frames)) "Finished" "Paused")))
             (render-ui main {
               type: box
               padding: md
@@ -338,9 +389,9 @@ orbital LearnTracePlayerOrbital {
                             { type: button, action: SPEED_SET, actionPayload: { speed: 2 }, label: "2×", size: sm, variant: (if (== @entity.speed 2) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 2) "true" "false") },
                             { type: button, action: SPEED_SET, actionPayload: { speed: 4 }, label: "4×", size: sm, variant: (if (== @entity.speed 4) "secondary" "ghost"), aria-pressed: (if (== @entity.speed 4) "true" "false") }
                           ] },
-                        { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @config.frames)) }
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Frame " (+ @entity.frameIndex 1) " of " (array/len @entity.frames)) }
                       ] },
-                    { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @config.frames), showPercentage: false },
+                    { type: progress-bar, value: (+ @entity.frameIndex 1), max: (array/len @entity.frames), showPercentage: false },
                     { type: algorithm-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESTART }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bars: @entity.bars },
                     { type: card, variant: bordered, padding: md, title: @entity.frameLabel, children: [
                         { type: typography, variant: body, content: @entity.frameCaption }
@@ -349,7 +400,7 @@ orbital LearnTracePlayerOrbital {
               ]
             })
             (emit FRAME_ADVANCED { frameIndex: @entity.frameIndex, frameLabel: @entity.frameLabel })
-            (if (and (not @config.loop) (not @entity.running) (>= (+ @entity.frameIndex 1) (array/len @config.frames))) (emit TRACE_DONE { totalFrames: (array/len @config.frames) }) null)
+            (if (and (not @config.loop) (not @entity.running) (>= (+ @entity.frameIndex 1) (array/len @entity.frames))) (emit TRACE_DONE { totalFrames: (array/len @entity.frames) }) null)
           ))
     }
 
@@ -359,6 +410,12 @@ orbital LearnTracePlayerOrbital {
       }
         @description "Lab router broadcast naming the active mode; this instrument renders when the mode equals matchMode, otherwise renders null."
         @tier "domain"
+      ROSTER_LOADED {
+        mode : string!
+        frames : [TraceFrame]!
+      }
+        @description "Runtime content feed, honoured only when rosterSource is event — mode names the instrument it is for (the matchMode it carries, blank when standalone) and frames is the frame roster; a matching instrument re-initialises from it exactly as INIT does from config, any other instrument hides."
+        @tier "domain"
       TOGGLE_RUN {
       }
         @description "Learner pressed the Play/Pause toggle — starts or freezes the frame cursor."
@@ -403,6 +460,10 @@ orbital LearnTracePlayerOrbital {
         @label "Match Mode"
         @description "When composed behind a lab router, the MODE_SELECTED mode value this instrument responds to. Empty string means standalone — render immediately on INIT."
         @tier "presentation"
+      rosterSource : "config" | "event" = "config"
+        @label "Roster Source"
+        @description "Where the frame roster comes from: config reads the frames knob at INIT; event waits for ROSTER_LOADED and takes the roster from its payload."
+        @tier "domain"
       title : string = "Trace Player"
         @label "Title"
         @description "The instrument's name, the header's one hero."

package/behaviors/lolo/ui/learning/atoms/std-learn-transport.lolo

@@ -29,7 +29,7 @@ orbital LearnTransportOrbital {
             { type: stack, direction: vertical, gap: md, children: [
                 { type: stack, direction: horizontal, justify: between, align: start, gap: md, children: [
                     { type: stack, direction: vertical, gap: xs, children: [
-                        { type: typography, variant: h4, content: @entity.title },
+                        (if (== @entity.title "") null { type: typography, variant: h4, content: @entity.title }),
                         (if (== @config.summary "") null { type: typography, variant: body2, color: muted, content: @config.summary })
                       ] },
                     { type: badge, label: (if @entity.done "Done" (if @entity.running "Running" "Paused")), variant: (if @entity.done "success" (if @entity.running "primary" "neutral")) }
@@ -64,7 +64,7 @@ orbital LearnTransportOrbital {
             { type: stack, direction: vertical, gap: md, children: [
                 { type: stack, direction: horizontal, justify: between, align: start, gap: md, children: [
                     { type: stack, direction: vertical, gap: xs, children: [
-                        { type: typography, variant: h4, content: @entity.title },
+                        (if (== @entity.title "") null { type: typography, variant: h4, content: @entity.title }),
                         (if (== @config.summary "") null { type: typography, variant: body2, color: muted, content: @config.summary })
                       ] },
                     { type: badge, label: (if @entity.done "Done" (if @entity.running "Running" "Paused")), variant: (if @entity.done "success" (if @entity.running "primary" "neutral")) }
@@ -100,7 +100,7 @@ orbital LearnTransportOrbital {
             { type: stack, direction: vertical, gap: md, children: [
                 { type: stack, direction: horizontal, justify: between, align: start, gap: md, children: [
                     { type: stack, direction: vertical, gap: xs, children: [
-                        { type: typography, variant: h4, content: @entity.title },
+                        (if (== @entity.title "") null { type: typography, variant: h4, content: @entity.title }),
                         (if (== @config.summary "") null { type: typography, variant: body2, color: muted, content: @config.summary })
                       ] },
                     { type: badge, label: (if @entity.done "Done" (if @entity.running "Running" "Paused")), variant: (if @entity.done "success" (if @entity.running "primary" "neutral")) }
@@ -131,7 +131,7 @@ orbital LearnTransportOrbital {
             { type: stack, direction: vertical, gap: md, children: [
                 { type: stack, direction: horizontal, justify: between, align: start, gap: md, children: [
                     { type: stack, direction: vertical, gap: xs, children: [
-                        { type: typography, variant: h4, content: @entity.title },
+                        (if (== @entity.title "") null { type: typography, variant: h4, content: @entity.title }),
                         (if (== @config.summary "") null { type: typography, variant: body2, color: muted, content: @config.summary })
                       ] },
                     { type: badge, label: (if @entity.done "Done" (if @entity.running "Running" "Paused")), variant: (if @entity.done "success" (if @entity.running "primary" "neutral")) }
@@ -164,7 +164,7 @@ orbital LearnTransportOrbital {
             { type: stack, direction: vertical, gap: md, children: [
                 { type: stack, direction: horizontal, justify: between, align: start, gap: md, children: [
                     { type: stack, direction: vertical, gap: xs, children: [
-                        { type: typography, variant: h4, content: @entity.title },
+                        (if (== @entity.title "") null { type: typography, variant: h4, content: @entity.title }),
                         (if (== @config.summary "") null { type: typography, variant: body2, color: muted, content: @config.summary })
                       ] },
                     { type: badge, label: (if @entity.done "Done" (if @entity.running "Running" "Paused")), variant: (if @entity.done "success" (if @entity.running "primary" "neutral")) }
@@ -195,7 +195,7 @@ orbital LearnTransportOrbital {
             { type: stack, direction: vertical, gap: md, children: [
                 { type: stack, direction: horizontal, justify: between, align: start, gap: md, children: [
                     { type: stack, direction: vertical, gap: xs, children: [
-                        { type: typography, variant: h4, content: @entity.title },
+                        (if (== @entity.title "") null { type: typography, variant: h4, content: @entity.title }),
                         (if (== @config.summary "") null { type: typography, variant: body2, color: muted, content: @config.summary })
                       ] },
                     { type: badge, label: (if @entity.done "Done" (if @entity.running "Running" "Paused")), variant: (if @entity.done "success" (if @entity.running "primary" "neutral")) }
@@ -270,7 +270,7 @@ orbital LearnTransportOrbital {
         @tier "presentation"
       title : string = "Learning Instrument"
         @label "Title"
-        @description "The instrument's name, the header's one hero."
+        @description "The instrument's name, the header's one hero. Empty shows no title."
         @tier "presentation"
       summary : string = ""
         @label "Concept"

package/behaviors/lolo/ui/learning/atoms/std-learn-tree.lolo

@@ -25,6 +25,7 @@ orbital LearnTreeOrbital {
     id : string!
     active : boolean = false
     title : string
+    values : [number]
     nodes : [LearnTreeNode]
     edges : [LearnTreeEdge]
     entries : [LearnTreeEntry]
@@ -51,9 +52,10 @@ orbital LearnTreeOrbital {
     initial: idle
 
     state idle {
-      INIT -> idle when (== @config.matchMode "")
+      INIT -> idle when (and (== @config.matchMode "") (== @config.rosterSource "config"))
         (set @entity.active true)
         (set @entity.title @config.title)
+        (set @entity.values @config.values)
         (set @entity.nodes [])
         (set @entity.edges [])
         (set @entity.entries [])
@@ -101,9 +103,10 @@ orbital LearnTreeOrbital {
         (set @entity.running false)
         (render-ui main null)
 
-      MODE_SELECTED -> idle when (== ?mode @config.matchMode)
+      MODE_SELECTED -> idle when (and (== ?mode @config.matchMode) (== @config.rosterSource "config"))
         (set @entity.active true)
         (set @entity.title @config.title)
+        (set @entity.values @config.values)
         (set @entity.nodes [])
         (set @entity.edges [])
         (set @entity.entries [])
@@ -146,14 +149,66 @@ orbital LearnTreeOrbital {
         })
         (emit TREE_UPDATED { nodes: @entity.nodes, edges: @entity.edges, count: @entity.count, narration: @entity.narration })
 
-      INSERT_VALUE -> idle when (and (== @entity.active true) (or @entity.descending (< @entity.cursor (array/len @config.values))))
+      ROSTER_LOADED -> idle when (and (== @config.rosterSource "event") (and (== ?mode @config.matchMode) (> (array/len ?values) 0)))
+        (set @entity.active true)
+        (set @entity.title @config.title)
+        (set @entity.values ?values)
+        (set @entity.nodes [])
+        (set @entity.edges [])
+        (set @entity.entries [])
+        (set @entity.cursor 0)
+        (set @entity.descending false)
+        (set @entity.trail [])
+        (set @entity.depth 0)
+        (set @entity.maxDepth 0)
+        (set @entity.count 0)
+        (set @entity.traversing false)
+        (set @entity.traversalOrder [])
+        (set @entity.sweptIds [])
+        (set @entity.done false)
+        (set @entity.running @config.autoRun)
+        (set @entity.narration "Press Insert to add the next value; keep pressing to watch it descend.")
+        (render-ui main {
+          type: box
+          padding: md
+          children: [
+            { type: stack, direction: vertical, gap: md, children: [
+                { type: stack, direction: horizontal, justify: between, align: start, gap: md, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: h4, content: @entity.title },
+                        (if (== @config.summary "") null { type: typography, variant: body2, color: muted, content: @config.summary })
+                      ] },
+                    { type: badge, label: (if @entity.traversing "Traversing" (if @entity.running "Auto-stepping" "Building")), variant: (if @entity.traversing "success" (if @entity.running "primary" "neutral")) }
+                  ] },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: INSERT_VALUE, label: "Insert", icon: "plus", variant: primary },
+                    { type: button, action: DELETE_VALUE, label: "Delete", variant: secondary },
+                    { type: button, action: RUN_TRAVERSAL, label: "Traverse", icon: "step-forward", variant: secondary },
+                    (if @entity.running { type: button, action: TOGGLE_RUN, label: "Pause", icon: "pause", variant: secondary, aria-pressed: "true" } { type: button, action: TOGGLE_RUN, label: "Run", icon: "play", variant: secondary, aria-pressed: "false" }),
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat (str/concat "" @entity.count) " nodes") }
+                  ] },
+                { type: algo-graph-canvas, keyMap: { Space: TOGGLE_RUN, ArrowRight: RUN_TRAVERSAL, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, layout: tree, root: "n0", nodes: @entity.nodes, edges: @entity.edges },
+                { type: typography, variant: body, content: @entity.narration }
+              ] }
+          ]
+        })
+        (emit TREE_UPDATED { nodes: @entity.nodes, edges: @entity.edges, count: @entity.count, narration: @entity.narration })
+
+      ROSTER_LOADED -> idle when (and (== @config.rosterSource "event") (not (== ?mode @config.matchMode)))
+        (set @entity.active false)
+        (set @entity.running false)
+        (render-ui main null)
+
+
+      INSERT_VALUE -> idle when (and (== @entity.active true) (or @entity.descending (< @entity.cursor (array/len @entity.values))))
         (set @entity.traversing false)
         (set @entity.traversalOrder [])
         (set @entity.sweptIds [])
         (set @entity.done false)
         (if (not @entity.descending)
           (let (
-              (v (array/nth @config.values @entity.cursor))
+              (v (array/nth @entity.values @entity.cursor))
             )
             (if (== @entity.count 0)
               (do
@@ -491,6 +546,12 @@ orbital LearnTreeOrbital {
       }
         @description "Lab router broadcast naming the active mode; this instrument renders when the mode equals matchMode, otherwise renders null."
         @tier "domain"
+      ROSTER_LOADED {
+        mode : string!
+        values : [number]!
+      }
+        @description "Runtime content feed, honoured only when rosterSource is event — mode names the instrument it is for (the matchMode it carries, blank when standalone) and values is the insertion sequence; a matching instrument re-initialises from it exactly as INIT does from config, any other instrument hides."
+        @tier "domain"
       INSERT_VALUE {
       }
         @description "Insert the next config-declared value: descends one comparison step per press from the root, coloring the descent cursor and comparison trail, until it attaches as a leaf. Pressing again while a descent is in flight continues that same descent."
@@ -535,6 +596,10 @@ orbital LearnTreeOrbital {
         @label "Match Mode"
         @description "When composed behind a lab router, the MODE_SELECTED mode value this instrument responds to. Empty string means standalone — render immediately on INIT."
         @tier "presentation"
+      rosterSource : "config" | "event" = "config"
+        @label "Roster Source"
+        @description "Where the insertion values come from: config reads the values knob at INIT; event waits for ROSTER_LOADED and takes them from its payload."
+        @tier "domain"
       autoRun : boolean = false
         @label "Auto Run"
         @description "When true, the tick auto-steps the traversal sweep started by Traverse; toggle live with the Run/Pause button. Has no effect on Insert/Delete, which stay manual."