@almadar/std 16.239.0 → 16.242.0

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

@@ -59,12 +59,12 @@ orbital EstimateOrbital {
                   { type: typography, variant: caption, content: (str/concat "Your estimate: " (math/round @entity.estimate 2) " " @entity.unit) },
                   { type: range-slider, min: @config.sliderMin, max: @config.sliderMax, step: @config.sliderStep, value: @entity.estimate, showTooltip: true, action: "SET_ESTIMATE" }
                 ] },
-              { type: stack, direction: horizontal, gap: sm, children: [
-                  { type: button, action: LOCK_IN, label: @config.lockLabel, variant: primary, disabled: (if @entity.locked true false) },
-                  { type: button, action: NEXT, label: @config.nextLabel, variant: secondary, disabled: (if @entity.locked false true) }
+              { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                  { type: button, action: LOCK_IN, label: @config.lockLabel, icon: "check", variant: primary, disabled: (if @entity.locked true false) },
+                  { type: button, action: NEXT, label: @config.nextLabel, icon: "chevron-right", variant: secondary, disabled: (if @entity.locked false true) }
                 ] },
               { type: stack, direction: horizontal, gap: xs, children: [
-                  { type: typography, variant: caption, content: @entity.feedback }
+                  { type: typography, variant: body, content: @entity.feedback }
                 ] },
               { type: stat-display, label: "Score", value: @entity.score, max: (* @entity.totalPrompts @config.exactPoints) }
             ])))
@@ -73,13 +73,23 @@ orbital EstimateOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
+                { 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.done "Complete" (if (== @entity.band "exact") "Spot on" (if (== @entity.band "close") "Close" (if (== @entity.band "off") "Off" "Estimating")))), variant: (if @entity.done "success" (if (== @entity.band "exact") "success" (if (== @entity.band "close") "warning" (if (== @entity.band "off") "danger" "neutral")))) }
+                  ] },
                 { type: progress-bar, value: (+ @entity.promptIndex 1), max: @entity.totalPrompts, showPercentage: false, label: (str/concat "Prompt " (str/concat "" (+ @entity.promptIndex 1)) " of " (str/concat "" @entity.totalPrompts)) },
                 { type: stack, direction: vertical, gap: md, children: @entity.view }
               ] }
           ]
         })
 
+      MODE_SELECTED -> idle when (and (not (== @config.matchMode "")) (not (== ?mode @config.matchMode)))
+        (set @entity.active false)
+        (render-ui main null)
+
       MODE_SELECTED -> idle when (== ?mode @config.matchMode)
         (let (
             (first (array/nth @config.prompts 0))
@@ -108,12 +118,12 @@ orbital EstimateOrbital {
                   { type: typography, variant: caption, content: (str/concat "Your estimate: " (math/round @entity.estimate 2) " " @entity.unit) },
                   { type: range-slider, min: @config.sliderMin, max: @config.sliderMax, step: @config.sliderStep, value: @entity.estimate, showTooltip: true, action: "SET_ESTIMATE" }
                 ] },
-              { type: stack, direction: horizontal, gap: sm, children: [
-                  { type: button, action: LOCK_IN, label: @config.lockLabel, variant: primary, disabled: (if @entity.locked true false) },
-                  { type: button, action: NEXT, label: @config.nextLabel, variant: secondary, disabled: (if @entity.locked false true) }
+              { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                  { type: button, action: LOCK_IN, label: @config.lockLabel, icon: "check", variant: primary, disabled: (if @entity.locked true false) },
+                  { type: button, action: NEXT, label: @config.nextLabel, icon: "chevron-right", variant: secondary, disabled: (if @entity.locked false true) }
                 ] },
               { type: stack, direction: horizontal, gap: xs, children: [
-                  { type: typography, variant: caption, content: @entity.feedback }
+                  { type: typography, variant: body, content: @entity.feedback }
                 ] },
               { type: stat-display, label: "Score", value: @entity.score, max: (* @entity.totalPrompts @config.exactPoints) }
             ])))
@@ -122,7 +132,13 @@ orbital EstimateOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
+                { 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.done "Complete" (if (== @entity.band "exact") "Spot on" (if (== @entity.band "close") "Close" (if (== @entity.band "off") "Off" "Estimating")))), variant: (if @entity.done "success" (if (== @entity.band "exact") "success" (if (== @entity.band "close") "warning" (if (== @entity.band "off") "danger" "neutral")))) }
+                  ] },
                 { type: progress-bar, value: (+ @entity.promptIndex 1), max: @entity.totalPrompts, showPercentage: false, label: (str/concat "Prompt " (str/concat "" (+ @entity.promptIndex 1)) " of " (str/concat "" @entity.totalPrompts)) },
                 { type: stack, direction: vertical, gap: md, children: @entity.view }
               ] }
@@ -140,12 +156,12 @@ orbital EstimateOrbital {
               { type: typography, variant: caption, content: (str/concat "Your estimate: " (math/round @entity.estimate 2) " " @entity.unit) },
               { type: range-slider, min: @config.sliderMin, max: @config.sliderMax, step: @config.sliderStep, value: @entity.estimate, showTooltip: true, action: "SET_ESTIMATE" }
             ] },
-          { type: stack, direction: horizontal, gap: sm, children: [
-              { type: button, action: LOCK_IN, label: @config.lockLabel, variant: primary, disabled: (if @entity.locked true false) },
-              { type: button, action: NEXT, label: @config.nextLabel, variant: secondary, disabled: (if @entity.locked false true) }
+          { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+              { type: button, action: LOCK_IN, label: @config.lockLabel, icon: "check", variant: primary, disabled: (if @entity.locked true false) },
+              { type: button, action: NEXT, label: @config.nextLabel, icon: "chevron-right", variant: secondary, disabled: (if @entity.locked false true) }
             ] },
           { type: stack, direction: horizontal, gap: xs, children: [
-              { type: typography, variant: caption, content: @entity.feedback }
+              { type: typography, variant: body, content: @entity.feedback }
             ] },
           { type: stat-display, label: "Score", value: @entity.score, max: (* @entity.totalPrompts @config.exactPoints) }
         ])
@@ -154,7 +170,13 @@ orbital EstimateOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
+                { 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.done "Complete" (if (== @entity.band "exact") "Spot on" (if (== @entity.band "close") "Close" (if (== @entity.band "off") "Off" "Estimating")))), variant: (if @entity.done "success" (if (== @entity.band "exact") "success" (if (== @entity.band "close") "warning" (if (== @entity.band "off") "danger" "neutral")))) }
+                  ] },
                 { type: progress-bar, value: (+ @entity.promptIndex 1), max: @entity.totalPrompts, showPercentage: false, label: (str/concat "Prompt " (str/concat "" (+ @entity.promptIndex 1)) " of " (str/concat "" @entity.totalPrompts)) },
                 { type: stack, direction: vertical, gap: md, children: @entity.view }
               ] }
@@ -182,13 +204,12 @@ orbital EstimateOrbital {
                   { type: typography, variant: caption, content: (str/concat "Your estimate: " (math/round @entity.estimate 2) " " @entity.unit) },
                   { type: range-slider, min: @config.sliderMin, max: @config.sliderMax, step: @config.sliderStep, value: @entity.estimate, showTooltip: true, action: "SET_ESTIMATE" }
                 ] },
-              { type: stack, direction: horizontal, gap: sm, children: [
-                  { type: button, action: LOCK_IN, label: @config.lockLabel, variant: primary, disabled: (if @entity.locked true false) },
-                  { type: button, action: NEXT, label: @config.nextLabel, variant: secondary, disabled: (if @entity.locked false true) }
+              { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                  { type: button, action: LOCK_IN, label: @config.lockLabel, icon: "check", variant: primary, disabled: (if @entity.locked true false) },
+                  { type: button, action: NEXT, label: @config.nextLabel, icon: "chevron-right", variant: secondary, disabled: (if @entity.locked false true) }
                 ] },
               { type: stack, direction: horizontal, gap: xs, children: [
-                  { type: badge, variant: (if (== @entity.band "exact") "success" (if (== @entity.band "close") "warning" "danger")), label: (if (== @entity.band "exact") "Spot on" (if (== @entity.band "close") "Close" "Off")) },
-                  { type: typography, variant: caption, content: @entity.feedback }
+                  { type: typography, variant: body, content: @entity.feedback }
                 ] },
               { type: stat-display, label: "Score", value: @entity.score, max: (* @entity.totalPrompts @config.exactPoints) }
             ])))
@@ -197,7 +218,13 @@ orbital EstimateOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
+                { 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.done "Complete" (if (== @entity.band "exact") "Spot on" (if (== @entity.band "close") "Close" (if (== @entity.band "off") "Off" "Estimating")))), variant: (if @entity.done "success" (if (== @entity.band "exact") "success" (if (== @entity.band "close") "warning" (if (== @entity.band "off") "danger" "neutral")))) }
+                  ] },
                 { type: progress-bar, value: (+ @entity.promptIndex 1), max: @entity.totalPrompts, showPercentage: false, label: (str/concat "Prompt " (str/concat "" (+ @entity.promptIndex 1)) " of " (str/concat "" @entity.totalPrompts)) },
                 { type: stack, direction: vertical, gap: md, children: @entity.view }
               ] }
@@ -227,7 +254,7 @@ orbital EstimateOrbital {
               [
                 { type: typography, variant: h4, content: "Round Complete" },
                 { type: stat-display, label: "Final score", value: @entity.score, max: (* @entity.totalPrompts @config.exactPoints) },
-                { type: button, action: RETRY, label: @config.retryLabel, variant: primary }
+                { type: button, action: RETRY, label: @config.retryLabel, icon: "rotate-ccw", variant: primary }
               ]
               [
                 { type: card, variant: bordered, padding: md, children: [
@@ -238,12 +265,12 @@ orbital EstimateOrbital {
                     { type: typography, variant: caption, content: (str/concat "Your estimate: " (math/round @entity.estimate 2) " " @entity.unit) },
                     { type: range-slider, min: @config.sliderMin, max: @config.sliderMax, step: @config.sliderStep, value: @entity.estimate, showTooltip: true, action: "SET_ESTIMATE" }
                   ] },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: LOCK_IN, label: @config.lockLabel, variant: primary, disabled: (if @entity.locked true false) },
-                    { type: button, action: NEXT, label: @config.nextLabel, variant: secondary, disabled: (if @entity.locked false true) }
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: LOCK_IN, label: @config.lockLabel, icon: "check", variant: primary, disabled: (if @entity.locked true false) },
+                    { type: button, action: NEXT, label: @config.nextLabel, icon: "chevron-right", variant: secondary, disabled: (if @entity.locked false true) }
                   ] },
                 { type: stack, direction: horizontal, gap: xs, children: [
-                    { type: typography, variant: caption, content: @entity.feedback }
+                    { type: typography, variant: body, content: @entity.feedback }
                   ] },
                 { type: stat-display, label: "Score", value: @entity.score, max: (* @entity.totalPrompts @config.exactPoints) }
               ])))
@@ -253,7 +280,13 @@ orbital EstimateOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
+                { 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.done "Complete" (if (== @entity.band "exact") "Spot on" (if (== @entity.band "close") "Close" (if (== @entity.band "off") "Off" "Estimating")))), variant: (if @entity.done "success" (if (== @entity.band "exact") "success" (if (== @entity.band "close") "warning" (if (== @entity.band "off") "danger" "neutral")))) }
+                  ] },
                 { type: progress-bar, value: (+ @entity.promptIndex 1), max: @entity.totalPrompts, showPercentage: false, label: (str/concat "Prompt " (str/concat "" (+ @entity.promptIndex 1)) " of " (str/concat "" @entity.totalPrompts)) },
                 { type: stack, direction: vertical, gap: md, children: @entity.view }
               ] }
@@ -286,12 +319,12 @@ orbital EstimateOrbital {
                   { type: typography, variant: caption, content: (str/concat "Your estimate: " (math/round @entity.estimate 2) " " @entity.unit) },
                   { type: range-slider, min: @config.sliderMin, max: @config.sliderMax, step: @config.sliderStep, value: @entity.estimate, showTooltip: true, action: "SET_ESTIMATE" }
                 ] },
-              { type: stack, direction: horizontal, gap: sm, children: [
-                  { type: button, action: LOCK_IN, label: @config.lockLabel, variant: primary, disabled: (if @entity.locked true false) },
-                  { type: button, action: NEXT, label: @config.nextLabel, variant: secondary, disabled: (if @entity.locked false true) }
+              { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                  { type: button, action: LOCK_IN, label: @config.lockLabel, icon: "check", variant: primary, disabled: (if @entity.locked true false) },
+                  { type: button, action: NEXT, label: @config.nextLabel, icon: "chevron-right", variant: secondary, disabled: (if @entity.locked false true) }
                 ] },
               { type: stack, direction: horizontal, gap: xs, children: [
-                  { type: typography, variant: caption, content: @entity.feedback }
+                  { type: typography, variant: body, content: @entity.feedback }
                 ] },
               { type: stat-display, label: "Score", value: @entity.score, max: (* @entity.totalPrompts @config.exactPoints) }
             ])))
@@ -300,7 +333,13 @@ orbital EstimateOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
+                { 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.done "Complete" (if (== @entity.band "exact") "Spot on" (if (== @entity.band "close") "Close" (if (== @entity.band "off") "Off" "Estimating")))), variant: (if @entity.done "success" (if (== @entity.band "exact") "success" (if (== @entity.band "close") "warning" (if (== @entity.band "off") "danger" "neutral")))) }
+                  ] },
                 { type: progress-bar, value: (+ @entity.promptIndex 1), max: @entity.totalPrompts, showPercentage: false, label: (str/concat "Prompt " (str/concat "" (+ @entity.promptIndex 1)) " of " (str/concat "" @entity.totalPrompts)) },
                 { type: stack, direction: vertical, gap: md, children: @entity.view }
               ] }
@@ -374,6 +413,10 @@ orbital EstimateOrbital {
         @label "Title"
         @description "Title shown above the drill."
         @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"
       prompts : [EstimatePrompt] = [
         { prompt: "How many meters does light travel in one microsecond?", answer: 300, unit: "m", hint: "Light covers 300,000 km every second." },
         { prompt: "What is the boiling point of water at sea level, in Fahrenheit?", answer: 212, unit: "°F", hint: "It is 100 °C." },

package/behaviors/lolo/ui/learning/atoms/std-learn-goal-seek.lolo

@@ -98,27 +98,39 @@ orbital GoalSeekOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: typography, variant: body, content: @config.goalText },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
-                    { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                { 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.solved "Solved" (if (> @entity.attempts 0) "Try again" "Tuning")), variant: (if @entity.solved "success" (if (> @entity.attempts 0) "warning" "neutral")) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
-                    { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: CHECK, label: @config.checkLabel, icon: "check", variant: primary, disabled: (if @entity.solved true false) },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) }
                   ] },
-                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
-                { type: typography, variant: body, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: CHECK, label: @config.checkLabel, variant: primary, disabled: (if @entity.solved true false) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { type: math-canvas, keyMap: { Space: CHECK, KeyR: RESET }, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
+                { type: stack, direction: vertical, gap: sm, children: [
+                { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
+                      { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                    ] },
+                  { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
+                      { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                    ] }
                   ] },
-                { type: stack, direction: horizontal, gap: xs, children: @entity.resultRow }
+                { type: typography, variant: body, content: @config.goalText },
+                { type: typography, variant: caption, color: muted, content: @entity.feedback }
               ] }
           ]
         })
 
+      MODE_SELECTED -> idle when (and (not (== @config.matchMode "")) (not (== ?mode @config.matchMode)))
+        (set @entity.active false)
+        (render-ui main null)
+
       MODE_SELECTED -> idle when (== ?mode @config.matchMode)
         (let (
             (kind @config.curveKind)
@@ -182,23 +194,31 @@ orbital GoalSeekOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: typography, variant: body, content: @config.goalText },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
-                    { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                { 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.solved "Solved" (if (> @entity.attempts 0) "Try again" "Tuning")), variant: (if @entity.solved "success" (if (> @entity.attempts 0) "warning" "neutral")) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
-                    { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: CHECK, label: @config.checkLabel, icon: "check", variant: primary, disabled: (if @entity.solved true false) },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) }
                   ] },
-                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
-                { type: typography, variant: body, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: CHECK, label: @config.checkLabel, variant: primary, disabled: (if @entity.solved true false) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { type: math-canvas, keyMap: { Space: CHECK, KeyR: RESET }, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
+                { type: stack, direction: vertical, gap: sm, children: [
+                { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
+                      { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                    ] },
+                  { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
+                      { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                    ] }
                   ] },
-                { type: stack, direction: horizontal, gap: xs, children: @entity.resultRow }
+                { type: typography, variant: body, content: @config.goalText },
+                { type: typography, variant: caption, color: muted, content: @entity.feedback }
               ] }
           ]
         })
@@ -244,23 +264,31 @@ orbital GoalSeekOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: typography, variant: body, content: @config.goalText },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
-                    { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                { 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.solved "Solved" (if (> @entity.attempts 0) "Try again" "Tuning")), variant: (if @entity.solved "success" (if (> @entity.attempts 0) "warning" "neutral")) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
-                    { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: CHECK, label: @config.checkLabel, icon: "check", variant: primary, disabled: (if @entity.solved true false) },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) }
                   ] },
-                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
-                { type: typography, variant: body, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: CHECK, label: @config.checkLabel, variant: primary, disabled: (if @entity.solved true false) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { type: math-canvas, keyMap: { Space: CHECK, KeyR: RESET }, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
+                { type: stack, direction: vertical, gap: sm, children: [
+                { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
+                      { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                    ] },
+                  { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
+                      { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                    ] }
                   ] },
-                { type: stack, direction: horizontal, gap: xs, children: @entity.resultRow }
+                { type: typography, variant: body, content: @config.goalText },
+                { type: typography, variant: caption, color: muted, content: @entity.feedback }
               ] }
           ]
         })
@@ -307,23 +335,31 @@ orbital GoalSeekOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: typography, variant: body, content: @config.goalText },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
-                    { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                { 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.solved "Solved" (if (> @entity.attempts 0) "Try again" "Tuning")), variant: (if @entity.solved "success" (if (> @entity.attempts 0) "warning" "neutral")) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
-                    { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: CHECK, label: @config.checkLabel, icon: "check", variant: primary, disabled: (if @entity.solved true false) },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) }
                   ] },
-                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
-                { type: typography, variant: body, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: CHECK, label: @config.checkLabel, variant: primary, disabled: (if @entity.solved true false) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { type: math-canvas, keyMap: { Space: CHECK, KeyR: RESET }, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
+                { type: stack, direction: vertical, gap: sm, children: [
+                { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
+                      { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                    ] },
+                  { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
+                      { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                    ] }
                   ] },
-                { type: stack, direction: horizontal, gap: xs, children: @entity.resultRow }
+                { type: typography, variant: body, content: @config.goalText },
+                { type: typography, variant: caption, color: muted, content: @entity.feedback }
               ] }
           ]
         })
@@ -341,23 +377,31 @@ orbital GoalSeekOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: typography, variant: body, content: @config.goalText },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
-                    { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                { 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.solved "Solved" (if (> @entity.attempts 0) "Try again" "Tuning")), variant: (if @entity.solved "success" (if (> @entity.attempts 0) "warning" "neutral")) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
-                    { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: CHECK, label: @config.checkLabel, icon: "check", variant: primary, disabled: (if @entity.solved true false) },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) }
                   ] },
-                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
-                { type: typography, variant: body, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: CHECK, label: @config.checkLabel, variant: primary, disabled: (if @entity.solved true false) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { type: math-canvas, keyMap: { Space: CHECK, KeyR: RESET }, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
+                { type: stack, direction: vertical, gap: sm, children: [
+                { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
+                      { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                    ] },
+                  { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
+                      { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                    ] }
                   ] },
-                { type: stack, direction: horizontal, gap: xs, children: @entity.resultRow }
+                { type: typography, variant: body, content: @config.goalText },
+                { type: typography, variant: caption, color: muted, content: @entity.feedback }
               ] }
           ]
         })
@@ -409,23 +453,31 @@ orbital GoalSeekOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: typography, variant: body, content: @config.goalText },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
-                    { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                { 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.solved "Solved" (if (> @entity.attempts 0) "Try again" "Tuning")), variant: (if @entity.solved "success" (if (> @entity.attempts 0) "warning" "neutral")) }
                   ] },
-                { type: stack, direction: vertical, gap: xs, children: [
-                    { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
-                    { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: CHECK, label: @config.checkLabel, icon: "check", variant: primary, disabled: (if @entity.solved true false) },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) }
                   ] },
-                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
-                { type: typography, variant: body, content: (if @config.showLiveDistance (str/concat "Distance from target: " (math/round @entity.distance 3) " · attempts: " (str/concat "" @entity.attempts)) (str/concat "Attempts: " (str/concat "" @entity.attempts))) },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: CHECK, label: @config.checkLabel, variant: primary, disabled: (if @entity.solved true false) },
-                    { type: button, action: RESET, label: "Reset", variant: ghost }
+                { type: math-canvas, keyMap: { Space: CHECK, KeyR: RESET }, width: @config.width, height: @config.height, title: "", xMin: @config.xMin, xMax: @config.xMax, yMin: @entity.yMin, yMax: @entity.yMax, showAxes: @config.showAxes, showGrid: @config.showGrid, gridStep: @config.gridStep, curves: @entity.curves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
+                { type: stack, direction: vertical, gap: sm, children: [
+                { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramALabel ": " (math/round @entity.paramA 2)) },
+                      { type: range-slider, min: @config.paramAMin, max: @config.paramAMax, step: @config.paramAStep, value: @entity.paramA, showTooltip: true, action: "SET_PARAM_A" }
+                    ] },
+                  { type: stack, direction: vertical, gap: xs, children: [
+                      { type: typography, variant: caption, content: (str/concat @entity.paramBLabel ": " (math/round @entity.paramB 2)) },
+                      { type: range-slider, min: @config.paramBMin, max: @config.paramBMax, step: @config.paramBStep, value: @entity.paramB, showTooltip: true, action: "SET_PARAM_B" }
+                    ] }
                   ] },
-                { type: stack, direction: horizontal, gap: xs, children: @entity.resultRow }
+                { type: typography, variant: body, content: @config.goalText },
+                { type: typography, variant: caption, color: muted, content: @entity.feedback }
               ] }
           ]
         })
@@ -497,6 +549,10 @@ orbital GoalSeekOrbital {
         @label "Title"
         @description "Title shown above the canvas."
         @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"
       goalText : string = "Tune the two sliders until your curve matches the target curve, then press Check."
         @label "Goal Text"
         @description "One-sentence statement of the inverse problem the learner must solve."
@@ -562,10 +618,10 @@ orbital GoalSeekOrbital {
       learnerLabel : string = "Yours"
         @label "Learner Label"
         @tier "presentation"
-      targetColor : string = "#94a3b8"
+      targetColor : string = "guide"
         @label "Target Color"
         @tier "presentation"
-      learnerColor : string = "#3b82f6"
+      learnerColor : string = "series-2"
         @label "Learner Color"
         @tier "presentation"
       checkLabel : string = "Check"