@almadar/std 16.241.0 → 16.242.0

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

@@ -88,23 +88,33 @@ orbital PredictOrbital {
           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 (str/concat @entity.score " / " @entity.totalScenarios " correct") (if (== @entity.phase "commit") "Predict" (if (== @entity.phase "reveal") "Revealing" (if (== @entity.chosenIndex @entity.correctIndex) "Correct" "Incorrect")))), variant: (if @entity.done "primary" (if (== @entity.phase "judged") (if (== @entity.chosenIndex @entity.correctIndex) "success" "error") "neutral")) }
+                  ] },
                 { type: progress-bar, value: (+ @entity.scenarioIndex 1), max: @entity.totalScenarios, showPercentage: false, label: (str/concat "Scenario " (str/concat "" (+ @entity.scenarioIndex 1)) " of " (str/concat "" @entity.totalScenarios)) },
                 { type: stack, direction: vertical, gap: md, children: @entity.view },
-                { type: stack, direction: horizontal, gap: xs, children: (array/map (array/range 0 (array/len @entity.options)) (fn (i)
-                    { type: button, action: PREDICT, actionPayload: { index: @i }, label: (array/nth @entity.options @i), variant: (if (and (!= @entity.phase "commit") (== @entity.chosenIndex @i)) "primary" "secondary"), size: sm, disabled: (if (== @entity.phase "commit") false true) })) },
-                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: 0, xMax: (math/max 1 (- (array/len @entity.frames) 1)), yMin: @config.valueMin, yMax: @config.valueMax, showAxes: true, showGrid: true, gridStep: @config.gridStep, curves: @entity.revealCurves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
+                { type: stack, direction: vertical, gap: sm, children: (array/map (array/range 0 (array/len @entity.options)) (fn (i)
+                    { type: button, action: PREDICT, actionPayload: { index: @i }, label: (array/nth @entity.options @i), size: lg, disabled: (!= @entity.phase "commit"), variant: (if (== @entity.phase "commit") "secondary" (if (== @entity.phase "reveal") (if (== @entity.chosenIndex @i) "primary" "ghost") (if (== @i @entity.correctIndex) "success" (if (== @entity.chosenIndex @i) "danger" "ghost")))) })) },
+                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: 0, xMax: (math/max 1 (- (array/len @entity.frames) 1)), yMin: @config.valueMin, yMax: @config.valueMax, showAxes: true, showGrid: true, gridStep: @config.gridStep, curves: @entity.revealCurves, points: [], vectors: [], shapes: [], interactive: false, animate: false, keyMap: { ArrowRight: NEXT, KeyR: RETRY } },
                 { type: typography, variant: body, content: @entity.frameCaption },
-                { type: typography, variant: caption, content: @entity.feedback },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: NEXT, label: @config.nextLabel, variant: primary, disabled: (if (and (== @entity.phase "judged") (== @entity.done false)) false true) },
-                    { type: button, action: RETRY, label: @config.retryLabel, variant: ghost, disabled: (if @entity.done false true) }
-                  ] },
-                { type: stat-display, label: "Correct predictions", value: @entity.score, max: @entity.totalScenarios }
+                { type: typography, variant: body, content: @entity.feedback },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: NEXT, label: @config.nextLabel, icon: "chevron-right", variant: primary, disabled: (if (and (== @entity.phase "judged") (== @entity.done false)) false true) },
+                    { type: button, action: RETRY, label: @config.retryLabel, icon: "rotate-ccw", variant: ghost, disabled: (if @entity.done false true) },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Correct " @entity.score " of " @entity.totalScenarios) }
+                  ] }
               ] }
           ]
         })
 
+      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.scenarios 0))
@@ -141,19 +151,25 @@ orbital PredictOrbital {
           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 (str/concat @entity.score " / " @entity.totalScenarios " correct") (if (== @entity.phase "commit") "Predict" (if (== @entity.phase "reveal") "Revealing" (if (== @entity.chosenIndex @entity.correctIndex) "Correct" "Incorrect")))), variant: (if @entity.done "primary" (if (== @entity.phase "judged") (if (== @entity.chosenIndex @entity.correctIndex) "success" "error") "neutral")) }
+                  ] },
                 { type: progress-bar, value: (+ @entity.scenarioIndex 1), max: @entity.totalScenarios, showPercentage: false, label: (str/concat "Scenario " (str/concat "" (+ @entity.scenarioIndex 1)) " of " (str/concat "" @entity.totalScenarios)) },
                 { type: stack, direction: vertical, gap: md, children: @entity.view },
-                { type: stack, direction: horizontal, gap: xs, children: (array/map (array/range 0 (array/len @entity.options)) (fn (i)
-                    { type: button, action: PREDICT, actionPayload: { index: @i }, label: (array/nth @entity.options @i), variant: (if (and (!= @entity.phase "commit") (== @entity.chosenIndex @i)) "primary" "secondary"), size: sm, disabled: (if (== @entity.phase "commit") false true) })) },
-                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: 0, xMax: (math/max 1 (- (array/len @entity.frames) 1)), yMin: @config.valueMin, yMax: @config.valueMax, showAxes: true, showGrid: true, gridStep: @config.gridStep, curves: @entity.revealCurves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
+                { type: stack, direction: vertical, gap: sm, children: (array/map (array/range 0 (array/len @entity.options)) (fn (i)
+                    { type: button, action: PREDICT, actionPayload: { index: @i }, label: (array/nth @entity.options @i), size: lg, disabled: (!= @entity.phase "commit"), variant: (if (== @entity.phase "commit") "secondary" (if (== @entity.phase "reveal") (if (== @entity.chosenIndex @i) "primary" "ghost") (if (== @i @entity.correctIndex) "success" (if (== @entity.chosenIndex @i) "danger" "ghost")))) })) },
+                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: 0, xMax: (math/max 1 (- (array/len @entity.frames) 1)), yMin: @config.valueMin, yMax: @config.valueMax, showAxes: true, showGrid: true, gridStep: @config.gridStep, curves: @entity.revealCurves, points: [], vectors: [], shapes: [], interactive: false, animate: false, keyMap: { ArrowRight: NEXT, KeyR: RETRY } },
                 { type: typography, variant: body, content: @entity.frameCaption },
-                { type: typography, variant: caption, content: @entity.feedback },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: NEXT, label: @config.nextLabel, variant: primary, disabled: (if (and (== @entity.phase "judged") (== @entity.done false)) false true) },
-                    { type: button, action: RETRY, label: @config.retryLabel, variant: ghost, disabled: (if @entity.done false true) }
-                  ] },
-                { type: stat-display, label: "Correct predictions", value: @entity.score, max: @entity.totalScenarios }
+                { type: typography, variant: body, content: @entity.feedback },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: NEXT, label: @config.nextLabel, icon: "chevron-right", variant: primary, disabled: (if (and (== @entity.phase "judged") (== @entity.done false)) false true) },
+                    { type: button, action: RETRY, label: @config.retryLabel, icon: "rotate-ccw", variant: ghost, disabled: (if @entity.done false true) },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Correct " @entity.score " of " @entity.totalScenarios) }
+                  ] }
               ] }
           ]
         })
@@ -214,19 +230,25 @@ orbital PredictOrbital {
           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 (str/concat @entity.score " / " @entity.totalScenarios " correct") (if (== @entity.phase "commit") "Predict" (if (== @entity.phase "reveal") "Revealing" (if (== @entity.chosenIndex @entity.correctIndex) "Correct" "Incorrect")))), variant: (if @entity.done "primary" (if (== @entity.phase "judged") (if (== @entity.chosenIndex @entity.correctIndex) "success" "error") "neutral")) }
+                  ] },
                 { type: progress-bar, value: (+ @entity.scenarioIndex 1), max: @entity.totalScenarios, showPercentage: false, label: (str/concat "Scenario " (str/concat "" (+ @entity.scenarioIndex 1)) " of " (str/concat "" @entity.totalScenarios)) },
                 { type: stack, direction: vertical, gap: md, children: @entity.view },
-                { type: stack, direction: horizontal, gap: xs, children: (array/map (array/range 0 (array/len @entity.options)) (fn (i)
-                    { type: button, action: PREDICT, actionPayload: { index: @i }, label: (array/nth @entity.options @i), variant: (if (and (!= @entity.phase "commit") (== @entity.chosenIndex @i)) "primary" "secondary"), size: sm, disabled: (if (== @entity.phase "commit") false true) })) },
-                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: 0, xMax: (math/max 1 (- (array/len @entity.frames) 1)), yMin: @config.valueMin, yMax: @config.valueMax, showAxes: true, showGrid: true, gridStep: @config.gridStep, curves: @entity.revealCurves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
+                { type: stack, direction: vertical, gap: sm, children: (array/map (array/range 0 (array/len @entity.options)) (fn (i)
+                    { type: button, action: PREDICT, actionPayload: { index: @i }, label: (array/nth @entity.options @i), size: lg, disabled: (!= @entity.phase "commit"), variant: (if (== @entity.phase "commit") "secondary" (if (== @entity.phase "reveal") (if (== @entity.chosenIndex @i) "primary" "ghost") (if (== @i @entity.correctIndex) "success" (if (== @entity.chosenIndex @i) "danger" "ghost")))) })) },
+                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: 0, xMax: (math/max 1 (- (array/len @entity.frames) 1)), yMin: @config.valueMin, yMax: @config.valueMax, showAxes: true, showGrid: true, gridStep: @config.gridStep, curves: @entity.revealCurves, points: [], vectors: [], shapes: [], interactive: false, animate: false, keyMap: { ArrowRight: NEXT, KeyR: RETRY } },
                 { type: typography, variant: body, content: @entity.frameCaption },
-                { type: typography, variant: caption, content: @entity.feedback },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: NEXT, label: @config.nextLabel, variant: primary, disabled: (if (and (== @entity.phase "judged") (== @entity.done false)) false true) },
-                    { type: button, action: RETRY, label: @config.retryLabel, variant: ghost, disabled: (if @entity.done false true) }
-                  ] },
-                { type: stat-display, label: "Correct predictions", value: @entity.score, max: @entity.totalScenarios }
+                { type: typography, variant: body, content: @entity.feedback },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: NEXT, label: @config.nextLabel, icon: "chevron-right", variant: primary, disabled: (if (and (== @entity.phase "judged") (== @entity.done false)) false true) },
+                    { type: button, action: RETRY, label: @config.retryLabel, icon: "rotate-ccw", variant: ghost, disabled: (if @entity.done false true) },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Correct " @entity.score " of " @entity.totalScenarios) }
+                  ] }
               ] }
           ]
         })
@@ -265,19 +287,25 @@ orbital PredictOrbital {
           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 (str/concat @entity.score " / " @entity.totalScenarios " correct") (if (== @entity.phase "commit") "Predict" (if (== @entity.phase "reveal") "Revealing" (if (== @entity.chosenIndex @entity.correctIndex) "Correct" "Incorrect")))), variant: (if @entity.done "primary" (if (== @entity.phase "judged") (if (== @entity.chosenIndex @entity.correctIndex) "success" "error") "neutral")) }
+                  ] },
                 { type: progress-bar, value: (+ @entity.scenarioIndex 1), max: @entity.totalScenarios, showPercentage: false, label: (str/concat "Scenario " (str/concat "" (+ @entity.scenarioIndex 1)) " of " (str/concat "" @entity.totalScenarios)) },
                 { type: stack, direction: vertical, gap: md, children: @entity.view },
-                { type: stack, direction: horizontal, gap: xs, children: (array/map (array/range 0 (array/len @entity.options)) (fn (i)
-                    { type: button, action: PREDICT, actionPayload: { index: @i }, label: (array/nth @entity.options @i), variant: (if (and (!= @entity.phase "commit") (== @entity.chosenIndex @i)) "primary" "secondary"), size: sm, disabled: (if (== @entity.phase "commit") false true) })) },
-                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: 0, xMax: (math/max 1 (- (array/len @entity.frames) 1)), yMin: @config.valueMin, yMax: @config.valueMax, showAxes: true, showGrid: true, gridStep: @config.gridStep, curves: @entity.revealCurves, points: [], vectors: [], shapes: [], interactive: false, animate: false },
+                { type: stack, direction: vertical, gap: sm, children: (array/map (array/range 0 (array/len @entity.options)) (fn (i)
+                    { type: button, action: PREDICT, actionPayload: { index: @i }, label: (array/nth @entity.options @i), size: lg, disabled: (!= @entity.phase "commit"), variant: (if (== @entity.phase "commit") "secondary" (if (== @entity.phase "reveal") (if (== @entity.chosenIndex @i) "primary" "ghost") (if (== @i @entity.correctIndex) "success" (if (== @entity.chosenIndex @i) "danger" "ghost")))) })) },
+                { type: math-canvas, width: @config.width, height: @config.height, title: "", xMin: 0, xMax: (math/max 1 (- (array/len @entity.frames) 1)), yMin: @config.valueMin, yMax: @config.valueMax, showAxes: true, showGrid: true, gridStep: @config.gridStep, curves: @entity.revealCurves, points: [], vectors: [], shapes: [], interactive: false, animate: false, keyMap: { ArrowRight: NEXT, KeyR: RETRY } },
                 { type: typography, variant: body, content: @entity.frameCaption },
-                { type: typography, variant: caption, content: @entity.feedback },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: NEXT, label: @config.nextLabel, variant: primary, disabled: (if (and (== @entity.phase "judged") (== @entity.done false)) false true) },
-                    { type: button, action: RETRY, label: @config.retryLabel, variant: ghost, disabled: (if @entity.done false true) }
-                  ] },
-                { type: stat-display, label: "Correct predictions", value: @entity.score, max: @entity.totalScenarios }
+                { type: typography, variant: body, content: @entity.feedback },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: NEXT, label: @config.nextLabel, icon: "chevron-right", variant: primary, disabled: (if (and (== @entity.phase "judged") (== @entity.done false)) false true) },
+                    { type: button, action: RETRY, label: @config.retryLabel, icon: "rotate-ccw", variant: ghost, disabled: (if @entity.done false true) },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Correct " @entity.score " of " @entity.totalScenarios) }
+                  ] }
               ] }
           ]
         })
@@ -360,6 +388,10 @@ orbital PredictOrbital {
         @label "Title"
         @description "Title shown above the instrument."
         @tier "presentation"
+      summary : string = ""
+        @label "Concept"
+        @description "One line under the title saying what is being predicted (keep it under ~65 characters). Empty shows no line."
+        @tier "presentation"
       scenarios : [PredictScenario] = [
         { setup: "A small island hosts 40 rabbits with unlimited grass and no predators.", question: "What happens to the population over the next six seasons?", options: ["It levels off", "It keeps accelerating", "It collapses"], correctIndex: 1, explanation: "With no limiting factor yet, growth compounds each season.", frames: [
             { caption: "Season 1: 40 rabbits", value: 40 },
@@ -394,7 +426,7 @@ orbital PredictOrbital {
       revealLabel : string = "Outcome"
         @label "Reveal Label"
         @tier "presentation"
-      revealColor : string = "#3b82f6"
+      revealColor : string = "series-1"
         @label "Reveal Color"
         @tier "presentation"
       nextLabel : string = "Next"

package/behaviors/lolo/ui/learning/atoms/std-learn-sample-accumulator.lolo

@@ -27,6 +27,11 @@ orbital SampleAccumulatorOrbital {
     fill : string
     lineWidth : number
     opacity : number
+    tone : string
+    fillTone : string
+    stroke : string
+    textSize : string
+    fillStyle : string
   }
   type SampleAccShapePoint = {
     x : number!
@@ -65,19 +70,32 @@ orbital SampleAccumulatorOrbital {
           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: DRAW, label: "Draw", variant: primary },
-                    { 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.sampleCount 0) (str/concat @entity.sampleCount " samples") "No samples"), variant: (if (> @entity.sampleCount 0) "primary" "neutral") }
+                  ] },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: DRAW, label: "Draw", icon: "plus", variant: primary },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Batch of " @entity.batchSize) }
+                  ] },
+                { type: math-canvas, width: @config.width, height: @config.height, xMin: 0, xMax: 1, yMin: 0, yMax: 1, showAxes: false, showGrid: false, gridStep: 0.1, curves: [], points: [], vectors: [], shapes: @entity.shapes, interactive: false, animate: false, keyMap: { Space: DRAW, KeyR: RESET } },
+                { type: stack, direction: vertical, gap: xs, children: [
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Batch size: " @entity.batchSize) },
+                    { type: range-slider, min: 1, max: 200, step: 1, value: @entity.batchSize, showTooltip: true, action: "SET_BATCH_SIZE" }
                   ] },
-                { type: typography, variant: caption, content: (str/concat "Batch size: " @entity.batchSize) },
-                { type: range-slider, min: 1, max: 200, step: 1, value: @entity.batchSize, showTooltip: true, action: "SET_BATCH_SIZE" },
-                { type: math-canvas, width: @config.width, height: @config.height, xMin: 0, xMax: 1, yMin: 0, yMax: 1, showAxes: false, showGrid: false, gridStep: 0.1, curves: [], points: [], vectors: [], shapes: @entity.shapes, interactive: false, animate: false },
                 { type: typography, variant: body, content: (if (== @entity.sourceKind "coin") (str/concat @entity.sampleCount " sample(s) drawn — running mean " (math/round @entity.mean 3) ", observed proportion " (math/round @entity.proportion 3) " (bias " @config.bias ")") (str/concat @entity.sampleCount " sample(s) drawn — running mean " (math/round @entity.mean 3))) }
               ] }
           ]
         })
 
+      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)
         (set @entity.active true)
         (set @entity.title @config.title)
@@ -93,14 +111,23 @@ orbital SampleAccumulatorOrbital {
           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: DRAW, label: "Draw", variant: primary },
-                    { 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.sampleCount 0) (str/concat @entity.sampleCount " samples") "No samples"), variant: (if (> @entity.sampleCount 0) "primary" "neutral") }
+                  ] },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: DRAW, label: "Draw", icon: "plus", variant: primary },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Batch of " @entity.batchSize) }
+                  ] },
+                { type: math-canvas, width: @config.width, height: @config.height, xMin: 0, xMax: 1, yMin: 0, yMax: 1, showAxes: false, showGrid: false, gridStep: 0.1, curves: [], points: [], vectors: [], shapes: @entity.shapes, interactive: false, animate: false, keyMap: { Space: DRAW, KeyR: RESET } },
+                { type: stack, direction: vertical, gap: xs, children: [
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Batch size: " @entity.batchSize) },
+                    { type: range-slider, min: 1, max: 200, step: 1, value: @entity.batchSize, showTooltip: true, action: "SET_BATCH_SIZE" }
                   ] },
-                { type: typography, variant: caption, content: (str/concat "Batch size: " @entity.batchSize) },
-                { type: range-slider, min: 1, max: 200, step: 1, value: @entity.batchSize, showTooltip: true, action: "SET_BATCH_SIZE" },
-                { type: math-canvas, width: @config.width, height: @config.height, xMin: 0, xMax: 1, yMin: 0, yMax: 1, showAxes: false, showGrid: false, gridStep: 0.1, curves: [], points: [], vectors: [], shapes: @entity.shapes, interactive: false, animate: false },
                 { type: typography, variant: body, content: (if (== @entity.sourceKind "coin") (str/concat @entity.sampleCount " sample(s) drawn — running mean " (math/round @entity.mean 3) ", observed proportion " (math/round @entity.proportion 3) " (bias " @config.bias ")") (str/concat @entity.sampleCount " sample(s) drawn — running mean " (math/round @entity.mean 3))) }
               ] }
           ]
@@ -129,7 +156,7 @@ orbital SampleAccumulatorOrbital {
               (let (
                   (barH (* (/ (array/nth @counts @b) @maxCount) @plotH))
                 )
-                { type: "rect", x: (+ 24 (* @b (/ @plotW @binCountV))), y: (- (+ 24 @plotH) @barH), width: (* (/ @plotW @binCountV) 0.9), height: @barH, fill: @config.color, lineWidth: 0 }))))
+                { type: "rect", x: (+ 24 (* @b (/ @plotW @binCountV))), y: (- (+ 24 @plotH) @barH), width: (* (/ @plotW @binCountV) 0.9), height: @barH, tone: @config.color, fillTone: @config.color, fillStyle: "solid" }))))
           )
           (do
             (set @entity.samples @allSamples)
@@ -144,14 +171,23 @@ orbital SampleAccumulatorOrbital {
           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: DRAW, label: "Draw", variant: primary },
-                    { 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.sampleCount 0) (str/concat @entity.sampleCount " samples") "No samples"), variant: (if (> @entity.sampleCount 0) "primary" "neutral") }
+                  ] },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: DRAW, label: "Draw", icon: "plus", variant: primary },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Batch of " @entity.batchSize) }
+                  ] },
+                { type: math-canvas, width: @config.width, height: @config.height, xMin: 0, xMax: 1, yMin: 0, yMax: 1, showAxes: false, showGrid: false, gridStep: 0.1, curves: [], points: [], vectors: [], shapes: @entity.shapes, interactive: false, animate: false, keyMap: { Space: DRAW, KeyR: RESET } },
+                { type: stack, direction: vertical, gap: xs, children: [
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Batch size: " @entity.batchSize) },
+                    { type: range-slider, min: 1, max: 200, step: 1, value: @entity.batchSize, showTooltip: true, action: "SET_BATCH_SIZE" }
                   ] },
-                { type: typography, variant: caption, content: (str/concat "Batch size: " @entity.batchSize) },
-                { type: range-slider, min: 1, max: 200, step: 1, value: @entity.batchSize, showTooltip: true, action: "SET_BATCH_SIZE" },
-                { type: math-canvas, width: @config.width, height: @config.height, xMin: 0, xMax: 1, yMin: 0, yMax: 1, showAxes: false, showGrid: false, gridStep: 0.1, curves: [], points: [], vectors: [], shapes: @entity.shapes, interactive: false, animate: false },
                 { type: typography, variant: body, content: (if (== @entity.sourceKind "coin") (str/concat @entity.sampleCount " sample(s) drawn — running mean " (math/round @entity.mean 3) ", observed proportion " (math/round @entity.proportion 3) " (bias " @config.bias ")") (str/concat @entity.sampleCount " sample(s) drawn — running mean " (math/round @entity.mean 3))) }
               ] }
           ]
@@ -165,14 +201,23 @@ orbital SampleAccumulatorOrbital {
           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: DRAW, label: "Draw", variant: primary },
-                    { 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.sampleCount 0) (str/concat @entity.sampleCount " samples") "No samples"), variant: (if (> @entity.sampleCount 0) "primary" "neutral") }
+                  ] },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: DRAW, label: "Draw", icon: "plus", variant: primary },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Batch of " @entity.batchSize) }
+                  ] },
+                { type: math-canvas, width: @config.width, height: @config.height, xMin: 0, xMax: 1, yMin: 0, yMax: 1, showAxes: false, showGrid: false, gridStep: 0.1, curves: [], points: [], vectors: [], shapes: @entity.shapes, interactive: false, animate: false, keyMap: { Space: DRAW, KeyR: RESET } },
+                { type: stack, direction: vertical, gap: xs, children: [
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Batch size: " @entity.batchSize) },
+                    { type: range-slider, min: 1, max: 200, step: 1, value: @entity.batchSize, showTooltip: true, action: "SET_BATCH_SIZE" }
                   ] },
-                { type: typography, variant: caption, content: (str/concat "Batch size: " @entity.batchSize) },
-                { type: range-slider, min: 1, max: 200, step: 1, value: @entity.batchSize, showTooltip: true, action: "SET_BATCH_SIZE" },
-                { type: math-canvas, width: @config.width, height: @config.height, xMin: 0, xMax: 1, yMin: 0, yMax: 1, showAxes: false, showGrid: false, gridStep: 0.1, curves: [], points: [], vectors: [], shapes: @entity.shapes, interactive: false, animate: false },
                 { type: typography, variant: body, content: (if (== @entity.sourceKind "coin") (str/concat @entity.sampleCount " sample(s) drawn — running mean " (math/round @entity.mean 3) ", observed proportion " (math/round @entity.proportion 3) " (bias " @config.bias ")") (str/concat @entity.sampleCount " sample(s) drawn — running mean " (math/round @entity.mean 3))) }
               ] }
           ]
@@ -189,14 +234,23 @@ orbital SampleAccumulatorOrbital {
           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: DRAW, label: "Draw", variant: primary },
-                    { 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.sampleCount 0) (str/concat @entity.sampleCount " samples") "No samples"), variant: (if (> @entity.sampleCount 0) "primary" "neutral") }
+                  ] },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: DRAW, label: "Draw", icon: "plus", variant: primary },
+                    { type: button, action: RESET, label: "Reset", icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Batch of " @entity.batchSize) }
+                  ] },
+                { type: math-canvas, width: @config.width, height: @config.height, xMin: 0, xMax: 1, yMin: 0, yMax: 1, showAxes: false, showGrid: false, gridStep: 0.1, curves: [], points: [], vectors: [], shapes: @entity.shapes, interactive: false, animate: false, keyMap: { Space: DRAW, KeyR: RESET } },
+                { type: stack, direction: vertical, gap: xs, children: [
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Batch size: " @entity.batchSize) },
+                    { type: range-slider, min: 1, max: 200, step: 1, value: @entity.batchSize, showTooltip: true, action: "SET_BATCH_SIZE" }
                   ] },
-                { type: typography, variant: caption, content: (str/concat "Batch size: " @entity.batchSize) },
-                { type: range-slider, min: 1, max: 200, step: 1, value: @entity.batchSize, showTooltip: true, action: "SET_BATCH_SIZE" },
-                { type: math-canvas, width: @config.width, height: @config.height, xMin: 0, xMax: 1, yMin: 0, yMax: 1, showAxes: false, showGrid: false, gridStep: 0.1, curves: [], points: [], vectors: [], shapes: @entity.shapes, interactive: false, animate: false },
                 { type: typography, variant: body, content: (if (== @entity.sourceKind "coin") (str/concat @entity.sampleCount " sample(s) drawn — running mean " (math/round @entity.mean 3) ", observed proportion " (math/round @entity.proportion 3) " (bias " @config.bias ")") (str/concat @entity.sampleCount " sample(s) drawn — running mean " (math/round @entity.mean 3))) }
               ] }
           ]
@@ -239,7 +293,11 @@ orbital SampleAccumulatorOrbital {
         @tier "presentation"
       title : string = "Sample Accumulator"
         @label "Title"
-        @description "Title shown above the canvas."
+        @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"
       sourceKind : string = "uniform"
         @label "Source Kind"
@@ -260,7 +318,7 @@ orbital SampleAccumulatorOrbital {
         @label "Bin Count"
         @description "Number of histogram buckets across the 0..1 value range."
         @tier "presentation"
-      color : string = "#2563eb"
+      color : string = "series-1"
         @label "Bar Color"
         @tier "presentation"
       width : number = 600

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

@@ -68,21 +68,28 @@ orbital LearnSandboxOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: typography, variant: body, content: "Toggle elements to see how the system's total responds." },
-                { type: biology-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, nodes: @entity.nodes, edges: @entity.edges, shapes: [], interactive: @config.interactive, animate: @config.animate },
-                { type: stack, direction: horizontal, gap: xs, children: (array/map @config.elements (fn e { type: button, action: TOGGLE, actionPayload: { elementId: (object/get @e id) }, label: (if (array/includes @entity.enabledIds (object/get @e id)) (object/get @e label) (str/concat (object/get @e label) " — off")), variant: (if (array/includes @entity.enabledIds (object/get @e id)) "primary" "ghost"), size: sm })) },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RESET, label: @config.resetLabel, 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, variant: (if @entity.holds "primary" "warning"), label: (if @entity.holds "Holds" "Does not hold") }
                   ] },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: badge, variant: (if @entity.holds "success" "danger"), label: (if @entity.holds "Holds" "Does Not Hold") },
-                    { type: typography, variant: body, content: @entity.readout }
-                  ] }
+                { type: biology-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, nodes: @entity.nodes, edges: @entity.edges, shapes: [], interactive: @config.interactive, animate: @config.animate, keyMap: { KeyR: RESET } },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: (array/map @config.elements (fn e { type: button, action: TOGGLE, actionPayload: { elementId: (object/get @e id) }, label: (if (array/includes @entity.enabledIds (object/get @e id)) (object/get @e label) (str/concat (object/get @e label) " — off")), variant: (if (array/includes @entity.enabledIds (object/get @e id)) "secondary" "ghost"), aria-pressed: (if (array/includes @entity.enabledIds (object/get @e id)) "true" "false") })) },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: RESET, label: @config.resetLabel, icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Total " @entity.total " of " @config.threshold) }
+                  ] },
+                { type: typography, variant: body, content: @entity.readout }
               ] }
           ]
         })
 
+      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)
         (set @entity.active true)
         (set @entity.title @config.title)
@@ -108,17 +115,20 @@ orbital LearnSandboxOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: typography, variant: body, content: "Toggle elements to see how the system's total responds." },
-                { type: biology-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, nodes: @entity.nodes, edges: @entity.edges, shapes: [], interactive: @config.interactive, animate: @config.animate },
-                { type: stack, direction: horizontal, gap: xs, children: (array/map @config.elements (fn e { type: button, action: TOGGLE, actionPayload: { elementId: (object/get @e id) }, label: (if (array/includes @entity.enabledIds (object/get @e id)) (object/get @e label) (str/concat (object/get @e label) " — off")), variant: (if (array/includes @entity.enabledIds (object/get @e id)) "primary" "ghost"), size: sm })) },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RESET, label: @config.resetLabel, 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, variant: (if @entity.holds "primary" "warning"), label: (if @entity.holds "Holds" "Does not hold") }
+                  ] },
+                { type: biology-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, nodes: @entity.nodes, edges: @entity.edges, shapes: [], interactive: @config.interactive, animate: @config.animate, keyMap: { KeyR: RESET } },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: (array/map @config.elements (fn e { type: button, action: TOGGLE, actionPayload: { elementId: (object/get @e id) }, label: (if (array/includes @entity.enabledIds (object/get @e id)) (object/get @e label) (str/concat (object/get @e label) " — off")), variant: (if (array/includes @entity.enabledIds (object/get @e id)) "secondary" "ghost"), aria-pressed: (if (array/includes @entity.enabledIds (object/get @e id)) "true" "false") })) },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: RESET, label: @config.resetLabel, icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Total " @entity.total " of " @config.threshold) }
                   ] },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: badge, variant: (if @entity.holds "success" "danger"), label: (if @entity.holds "Holds" "Does Not Hold") },
-                    { type: typography, variant: body, content: @entity.readout }
-                  ] }
+                { type: typography, variant: body, content: @entity.readout }
               ] }
           ]
         })
@@ -146,17 +156,20 @@ orbital LearnSandboxOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: typography, variant: body, content: "Toggle elements to see how the system's total responds." },
-                { type: biology-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, nodes: @entity.nodes, edges: @entity.edges, shapes: [], interactive: @config.interactive, animate: @config.animate },
-                { type: stack, direction: horizontal, gap: xs, children: (array/map @config.elements (fn e { type: button, action: TOGGLE, actionPayload: { elementId: (object/get @e id) }, label: (if (array/includes @entity.enabledIds (object/get @e id)) (object/get @e label) (str/concat (object/get @e label) " — off")), variant: (if (array/includes @entity.enabledIds (object/get @e id)) "primary" "ghost"), size: sm })) },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RESET, label: @config.resetLabel, 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, variant: (if @entity.holds "primary" "warning"), label: (if @entity.holds "Holds" "Does not hold") }
                   ] },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: badge, variant: (if @entity.holds "success" "danger"), label: (if @entity.holds "Holds" "Does Not Hold") },
-                    { type: typography, variant: body, content: @entity.readout }
-                  ] }
+                { type: biology-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, nodes: @entity.nodes, edges: @entity.edges, shapes: [], interactive: @config.interactive, animate: @config.animate, keyMap: { KeyR: RESET } },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: (array/map @config.elements (fn e { type: button, action: TOGGLE, actionPayload: { elementId: (object/get @e id) }, label: (if (array/includes @entity.enabledIds (object/get @e id)) (object/get @e label) (str/concat (object/get @e label) " — off")), variant: (if (array/includes @entity.enabledIds (object/get @e id)) "secondary" "ghost"), aria-pressed: (if (array/includes @entity.enabledIds (object/get @e id)) "true" "false") })) },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: RESET, label: @config.resetLabel, icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Total " @entity.total " of " @config.threshold) }
+                  ] },
+                { type: typography, variant: body, content: @entity.readout }
               ] }
           ]
         })
@@ -185,17 +198,20 @@ orbital LearnSandboxOrbital {
           padding: md
           children: [
             { type: stack, direction: vertical, gap: md, children: [
-                { type: typography, variant: h4, content: @entity.title },
-                { type: typography, variant: body, content: "Toggle elements to see how the system's total responds." },
-                { type: biology-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, nodes: @entity.nodes, edges: @entity.edges, shapes: [], interactive: @config.interactive, animate: @config.animate },
-                { type: stack, direction: horizontal, gap: xs, children: (array/map @config.elements (fn e { type: button, action: TOGGLE, actionPayload: { elementId: (object/get @e id) }, label: (if (array/includes @entity.enabledIds (object/get @e id)) (object/get @e label) (str/concat (object/get @e label) " — off")), variant: (if (array/includes @entity.enabledIds (object/get @e id)) "primary" "ghost"), size: sm })) },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: button, action: RESET, label: @config.resetLabel, 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, variant: (if @entity.holds "primary" "warning"), label: (if @entity.holds "Holds" "Does not hold") }
+                  ] },
+                { type: biology-canvas, width: @config.width, height: @config.height, backgroundColor: @config.backgroundColor, nodes: @entity.nodes, edges: @entity.edges, shapes: [], interactive: @config.interactive, animate: @config.animate, keyMap: { KeyR: RESET } },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: (array/map @config.elements (fn e { type: button, action: TOGGLE, actionPayload: { elementId: (object/get @e id) }, label: (if (array/includes @entity.enabledIds (object/get @e id)) (object/get @e label) (str/concat (object/get @e label) " — off")), variant: (if (array/includes @entity.enabledIds (object/get @e id)) "secondary" "ghost"), aria-pressed: (if (array/includes @entity.enabledIds (object/get @e id)) "true" "false") })) },
+                { type: stack, direction: horizontal, align: center, gap: sm, wrap: true, children: [
+                    { type: button, action: RESET, label: @config.resetLabel, icon: "rotate-ccw", variant: ghost },
+                    { type: typography, variant: caption, color: muted, content: (str/concat "Total " @entity.total " of " @config.threshold) }
                   ] },
-                { type: stack, direction: horizontal, gap: sm, children: [
-                    { type: badge, variant: (if @entity.holds "success" "danger"), label: (if @entity.holds "Holds" "Does Not Hold") },
-                    { type: typography, variant: body, content: @entity.readout }
-                  ] }
+                { type: typography, variant: body, content: @entity.readout }
               ] }
           ]
         })
@@ -243,6 +259,10 @@ orbital LearnSandboxOrbital {
         @label "Title"
         @description "Title shown above the instrument."
         @tier "presentation"
+      summary : string = ""
+        @label "Concept"
+        @description "One line under the title saying what the system models (keep it under ~65 characters). Empty shows no line."
+        @tier "presentation"
       width : number = 640
         @label "Width"
         @description "Canvas width in pixels."
@@ -251,7 +271,7 @@ orbital LearnSandboxOrbital {
         @label "Height"
         @description "Canvas height in pixels."
         @tier "presentation"
-      backgroundColor : string = "#f8fafc"
+      backgroundColor : string = ""
         @label "Background Color"
         @tier "presentation"
       interactive : boolean = false
@@ -295,16 +315,16 @@ orbital LearnSandboxOrbital {
       nodeRadius : number = 34
         @label "Node Radius"
         @tier "presentation"
-      enabledColor : string = "#2563eb"
+      enabledColor : string = "series-2"
         @label "Enabled Node Color"
         @tier "presentation"
-      disabledColor : string = "#cbd5e1"
+      disabledColor : string = "muted"
         @label "Disabled Node Color"
         @tier "presentation"
-      enabledEdgeColor : string = "#1e3a8a"
+      enabledEdgeColor : string = "ink"
         @label "Enabled Edge Color"
         @tier "presentation"
-      disabledEdgeColor : string = "#e2e8f0"
+      disabledEdgeColor : string = "guide"
         @label "Disabled Edge Color"
         @tier "presentation"
       resetLabel : string = "Reset"