@almadar/std 16.241.0 → 16.243.0

package/behaviors/lolo/ui/learning/atoms/std-learn-live-sim.lolo

@@ -41,26 +41,39 @@ orbital LearnLiveSimOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RUN, label: "Run", variant: primary, disabled: (if @entity.running true false) },
-                    { type: button, action: PAUSE, label: "Pause", variant: secondary, disabled: (if @entity.running false true) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { 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.running "Running" "Paused"), variant: (if @entity.running "primary" "neutral") }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
-                    { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                { 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" }),
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Tick " @entity.tickCount) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
-                    { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                { type: physics-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
+                { type: stack, direction: vertical, gap: sm, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
+                        { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                      ] },
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
+                        { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                      ] }
                   ] },
-                { type: physics-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
-                { type: typography, variant: body, content: (str/concat "Tick " (str/concat "" @entity.tickCount) " · sample speed " (math/round @entity.sampleSpeed 2)) }
+                { type: typography, variant: body, content: (str/concat "Sample body speed " (math/round @entity.sampleSpeed 2)) }
               ] }
           ]
         })
 
+      MODE_SELECTED -> idle when (and (not (== @config.matchMode "")) (not (== ?mode @config.matchMode)))
+        (set @entity.active false)
+        (set @entity.running false)
+        (render-ui main null)
+
       MODE_SELECTED -> idle when (== ?mode @config.matchMode)
         (set @entity.active true)
         (set @entity.title @config.title)
@@ -75,25 +88,69 @@ orbital LearnLiveSimOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RUN, label: "Run", variant: primary, disabled: (if @entity.running true false) },
-                    { type: button, action: PAUSE, label: "Pause", variant: secondary, disabled: (if @entity.running false true) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { 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.running "Running" "Paused"), variant: (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" }),
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Tick " @entity.tickCount) }
+                  ] },
+                { type: physics-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
+                { type: stack, direction: vertical, gap: sm, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
+                        { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                      ] },
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
+                        { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                      ] }
+                  ] },
+                { type: typography, variant: body, content: (str/concat "Sample body speed " (math/round @entity.sampleSpeed 2)) }
+              ] }
+          ]
+        })
+
+      TOGGLE_RUN -> idle when (== @entity.active true)
+        (set @entity.running (not @entity.running))
+        (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.running "Running" "Paused"), variant: (if @entity.running "primary" "neutral") }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
-                    { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                { 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" }),
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Tick " @entity.tickCount) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
-                    { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                { type: physics-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
+                { type: stack, direction: vertical, gap: sm, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
+                        { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                      ] },
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
+                        { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                      ] }
                   ] },
-                { type: physics-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
-                { type: typography, variant: body, content: (str/concat "Tick " (str/concat "" @entity.tickCount) " · sample speed " (math/round @entity.sampleSpeed 2)) }
+                { type: typography, variant: body, content: (str/concat "Sample body speed " (math/round @entity.sampleSpeed 2)) }
               ] }
           ]
         })
+        (emit RUN_TOGGLED { running: @entity.running })
 
       RUN -> idle when (== @entity.active true)
         (set @entity.running true)
@@ -102,22 +159,30 @@ orbital LearnLiveSimOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RUN, label: "Run", variant: primary, disabled: (if @entity.running true false) },
-                    { type: button, action: PAUSE, label: "Pause", variant: secondary, disabled: (if @entity.running false true) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { 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.running "Running" "Paused"), variant: (if @entity.running "primary" "neutral") }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
-                    { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                { 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" }),
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Tick " @entity.tickCount) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
-                    { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                { type: physics-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
+                { type: stack, direction: vertical, gap: sm, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
+                        { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                      ] },
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
+                        { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                      ] }
                   ] },
-                { type: physics-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
-                { type: typography, variant: body, content: (str/concat "Tick " (str/concat "" @entity.tickCount) " · sample speed " (math/round @entity.sampleSpeed 2)) }
+                { type: typography, variant: body, content: (str/concat "Sample body speed " (math/round @entity.sampleSpeed 2)) }
               ] }
           ]
         })
@@ -130,22 +195,30 @@ orbital LearnLiveSimOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RUN, label: "Run", variant: primary, disabled: (if @entity.running true false) },
-                    { type: button, action: PAUSE, label: "Pause", variant: secondary, disabled: (if @entity.running false true) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { 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.running "Running" "Paused"), variant: (if @entity.running "primary" "neutral") }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
-                    { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                { 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" }),
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Tick " @entity.tickCount) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
-                    { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                { type: physics-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
+                { type: stack, direction: vertical, gap: sm, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
+                        { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                      ] },
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
+                        { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                      ] }
                   ] },
-                { type: physics-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
-                { type: typography, variant: body, content: (str/concat "Tick " (str/concat "" @entity.tickCount) " · sample speed " (math/round @entity.sampleSpeed 2)) }
+                { type: typography, variant: body, content: (str/concat "Sample body speed " (math/round @entity.sampleSpeed 2)) }
               ] }
           ]
         })
@@ -163,22 +236,30 @@ orbital LearnLiveSimOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RUN, label: "Run", variant: primary, disabled: (if @entity.running true false) },
-                    { type: button, action: PAUSE, label: "Pause", variant: secondary, disabled: (if @entity.running false true) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { 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.running "Running" "Paused"), variant: (if @entity.running "primary" "neutral") }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
-                    { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                { 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" }),
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Tick " @entity.tickCount) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
-                    { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                { type: physics-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
+                { type: stack, direction: vertical, gap: sm, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
+                        { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                      ] },
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
+                        { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                      ] }
                   ] },
-                { type: physics-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
-                { type: typography, variant: body, content: (str/concat "Tick " (str/concat "" @entity.tickCount) " · sample speed " (math/round @entity.sampleSpeed 2)) }
+                { type: typography, variant: body, content: (str/concat "Sample body speed " (math/round @entity.sampleSpeed 2)) }
               ] }
           ]
         })
@@ -191,22 +272,30 @@ orbital LearnLiveSimOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RUN, label: "Run", variant: primary, disabled: (if @entity.running true false) },
-                    { type: button, action: PAUSE, label: "Pause", variant: secondary, disabled: (if @entity.running false true) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { 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.running "Running" "Paused"), variant: (if @entity.running "primary" "neutral") }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
-                    { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                { 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" }),
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Tick " @entity.tickCount) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
-                    { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                { type: physics-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
+                { type: stack, direction: vertical, gap: sm, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
+                        { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                      ] },
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
+                        { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                      ] }
                   ] },
-                { type: physics-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
-                { type: typography, variant: body, content: (str/concat "Tick " (str/concat "" @entity.tickCount) " · sample speed " (math/round @entity.sampleSpeed 2)) }
+                { type: typography, variant: body, content: (str/concat "Sample body speed " (math/round @entity.sampleSpeed 2)) }
               ] }
           ]
         })
@@ -218,22 +307,30 @@ orbital LearnLiveSimOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RUN, label: "Run", variant: primary, disabled: (if @entity.running true false) },
-                    { type: button, action: PAUSE, label: "Pause", variant: secondary, disabled: (if @entity.running false true) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { 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.running "Running" "Paused"), variant: (if @entity.running "primary" "neutral") }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
-                    { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                { 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" }),
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Tick " @entity.tickCount) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
-                    { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                { type: physics-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
+                { type: stack, direction: vertical, gap: sm, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
+                        { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                      ] },
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
+                        { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                      ] }
                   ] },
-                { type: physics-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
-                { type: typography, variant: body, content: (str/concat "Tick " (str/concat "" @entity.tickCount) " · sample speed " (math/round @entity.sampleSpeed 2)) }
+                { type: typography, variant: body, content: (str/concat "Sample body speed " (math/round @entity.sampleSpeed 2)) }
               ] }
           ]
         })
@@ -272,22 +369,30 @@ orbital LearnLiveSimOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RUN, label: "Run", variant: primary, disabled: (if @entity.running true false) },
-                    { type: button, action: PAUSE, label: "Pause", variant: secondary, disabled: (if @entity.running false true) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { 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.running "Running" "Paused"), variant: (if @entity.running "primary" "neutral") }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
-                    { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                { 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" }),
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Tick " @entity.tickCount) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
-                    { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                { type: physics-canvas, keyMap: { Space: TOGGLE_RUN, KeyR: RESET }, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
+                { type: stack, direction: vertical, gap: sm, children: [
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Gravity: " (math/round @entity.gravity 2)) },
+                        { type: range-slider, min: -1, max: 1.5, step: 0.05, value: @entity.gravity, showTooltip: true, action: "SET_GRAVITY" }
+                      ] },
+                    { type: stack, direction: vertical, gap: xs, children: [
+                        { type: typography, variant: caption, color: muted, content: (str/concat "Damping: " (math/round @entity.damping 3)) },
+                        { type: range-slider, min: 0.9, max: 1, step: 0.005, value: @entity.damping, showTooltip: true, action: "SET_DAMPING" }
+                      ] }
                   ] },
-                { type: physics-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, bodies: @entity.bodies, showVelocity: @config.showVelocity, showForces: false, velocityScale: @config.velocityScale },
-                { type: typography, variant: body, content: (str/concat "Tick " (str/concat "" @entity.tickCount) " · sample speed " (math/round @entity.sampleSpeed 2)) }
+                { type: typography, variant: body, content: (str/concat "Sample body speed " (math/round @entity.sampleSpeed 2)) }
               ] }
           ]
         })
@@ -299,6 +404,10 @@ orbital LearnLiveSimOrbital {
       }
         @description "Lab router broadcast naming the active mode; this instrument renders when the mode equals matchMode, otherwise renders null."
         @tier "domain"
+      TOGGLE_RUN {
+      }
+        @description "Learner pressed the Play/Pause toggle — flips the running flag."
+        @tier "domain"
       RUN {
       }
         @description "Learner pressed Run — the tick begins integrating gravity, damping, and wall bounce for every body."
@@ -345,7 +454,11 @@ orbital LearnLiveSimOrbital {
         @tier "presentation"
       title : string = "Live Sim"
         @label "Title"
-        @description "Title shown above the instrument."
+        @description "The instrument's name, the header's one hero."
+        @tier "presentation"
+      summary : string = ""
+        @label "Concept"
+        @description "One line under the title saying what the learner is looking at (keep it under ~65 characters). Empty shows no line."
         @tier "presentation"
       running : boolean = false
         @label "Running"
@@ -371,8 +484,9 @@ orbital LearnLiveSimOrbital {
         @label "Height"
         @description "Simulation height in pixels; bounds the bounce."
         @tier "presentation"
-      backgroundColor : string = "#f8fafc"
+      backgroundColor : string = ""
         @label "Background Color"
+        @description "Canvas ground override; empty uses the theme's drawing ground."
         @tier "presentation"
       showVelocity : boolean = true
         @label "Show Velocity"
@@ -383,9 +497,9 @@ orbital LearnLiveSimOrbital {
         @description "Length multiplier for the velocity arrows."
         @tier "presentation"
       bodies : [LiveSimBody] = [
-        { id: "ball-a", x: 100, y: 60, radius: 14, color: "#2563eb", vx: 4, vy: 0 },
-        { id: "ball-b", x: 260, y: 90, radius: 18, color: "#16a34a", vx: -3, vy: 2 },
-        { id: "ball-c", x: 420, y: 40, radius: 11, color: "#f59e0b", vx: 2, vy: -1 }
+        { id: "ball-a", x: 100, y: 60, radius: 14, color: "series-1", vx: 4, vy: 0 },
+        { id: "ball-b", x: 260, y: 90, radius: 18, color: "series-2", vx: -3, vy: 2 },
+        { id: "ball-c", x: 420, y: 40, radius: 11, color: "series-3", vx: 2, vy: -1 }
       ]
         @label "Bodies"
         @description "Initial bodies; each carries position (x,y), radius, color, and velocity (vx,vy). Restored on Reset."