@classytic/labs 0.6.0 → 0.7.0

package/dist/kit/networking/scene/objects.mjs

@@ -1,11 +1,10 @@
 'use client';
 
 import { FigText } from "../../figure/text.mjs";
-import { STROKE } from "../../figure/figure.mjs";
 import { ACCENT, SCENE } from "../../scene/tokens.mjs";
-import { Display, Solid } from "../../scene/objects/block.mjs";
-import "../../scene/index.mjs";
-import "../../figure/index.mjs";
+import { STROKE } from "../../figure/figure.mjs";
+import { Reading, readingBox } from "../../figure/reading.mjs";
+import { Solid } from "../../scene/objects/block.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/networking/scene/objects.tsx
@@ -161,7 +160,6 @@ function hardware(kind, state) {
 				y: -24,
 				w: width,
 				h: 48,
-				depth: 4,
 				radius: 7,
 				ramp: casing
 			}),
@@ -190,7 +188,6 @@ function hardware(kind, state) {
 				y: -14,
 				w: 48,
 				h: 28,
-				depth: 5,
 				radius: 4,
 				ramp: casing
 			}),
@@ -253,7 +250,6 @@ function hardware(kind, state) {
 				y: -23,
 				w: 30,
 				h: 45,
-				depth: 5,
 				radius: 5,
 				ramp: casing
 			}),
@@ -281,7 +277,6 @@ function hardware(kind, state) {
 			y: -25,
 			w: 34,
 			h: 48,
-			depth: 5,
 			radius: 4,
 			ramp: casing
 		}), [
@@ -311,7 +306,6 @@ function hardware(kind, state) {
 				y: -20,
 				w: 44,
 				h: 40,
-				depth: 5,
 				radius: 6,
 				ramp: casing
 			}),
@@ -378,7 +372,6 @@ function hardware(kind, state) {
 				y: -15,
 				w: 44,
 				h: 30,
-				depth: 5,
 				radius: 5,
 				ramp: casing
 			}),
@@ -411,7 +404,6 @@ function hardware(kind, state) {
 				y: -21,
 				w: 36,
 				h: 32,
-				depth: 4,
 				radius: 3,
 				ramp: casing
 			}),
@@ -495,7 +487,6 @@ function hardware(kind, state) {
 				y: -18,
 				w: 44,
 				h: 36,
-				depth: 5,
 				radius: 7,
 				ramp: casing
 			}),
@@ -553,7 +544,6 @@ function hardware(kind, state) {
 				y: -14,
 				w: 34,
 				h: 28,
-				depth: 5,
 				radius: 6,
 				ramp: casing
 			}),
@@ -586,6 +576,13 @@ function hardware(kind, state) {
 /** Material networking equipment composed from the shared scene grammar. */
 function NetworkObject({ x, y, kind, label, active = false, state, scale = 1, labelSurface = false }) {
 	const visualState = state ?? (active ? "active" : "idle");
+	const plateW = label && labelSurface ? readingBox({
+		face: "window",
+		x: 0,
+		y: 0,
+		h: 24,
+		value: label
+	}).w : 0;
 	return /* @__PURE__ */ jsxs("g", {
 		"data-part": "network-object",
 		"data-kind": kind,
@@ -595,12 +592,13 @@ function NetworkObject({ x, y, kind, label, active = false, state, scale = 1, la
 		children: [/* @__PURE__ */ jsx("g", {
 			transform: `scale(${scale})`,
 			children: hardware(kind, visualState)
-		}), label && labelSurface ? /* @__PURE__ */ jsx(Display, {
-			x: -(label.length * 8.2 + 10) / 2,
+		}), label && labelSurface ? /* @__PURE__ */ jsx(Reading, {
+			face: "window",
+			x: -plateW / 2,
 			y: 28 * scale - 2,
-			w: label.length * 8.2 + 10,
+			w: plateW,
 			h: 24,
-			lines: [label]
+			value: label
 		}) : label ? /* @__PURE__ */ jsx(FigText, {
 			x: 0,
 			y: Math.max(38 * scale, 28 * scale + 12),
@@ -623,7 +621,6 @@ function DataPacket({ x, y, state = "moving", scale = 1 }) {
 				y: -9,
 				w: 26,
 				h: 18,
-				depth: 3,
 				radius: 4,
 				ramp
 			}),
@@ -655,4 +652,4 @@ function ObjectReading({ x, y, value }) {
 }
 
 //#endregion
-export { DataPacket, NetworkObject, ObjectReading };
+export { DataPacket, NetworkObject };

package/dist/kit/networking/scene/observability.mjs

@@ -2,7 +2,6 @@
 
 import { FigText } from "../../figure/text.mjs";
 import { HUE, STROKE, alpha, tint } from "../../figure/figure.mjs";
-import "../../figure/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/networking/scene/observability.tsx

package/dist/kit/networking/scene/route.mjs

@@ -1,11 +1,9 @@
 'use client';
 
+import { ACCENT, SCENE } from "../../scene/tokens.mjs";
 import { STROKE } from "../../figure/figure.mjs";
 import { useMarkDrawn } from "../../../runtime/drawn-controls.mjs";
 import { DetentPathGrip } from "../../figure/detent-path-grip.mjs";
-import { ACCENT, SCENE } from "../../scene/tokens.mjs";
-import "../../scene/index.mjs";
-import "../../figure/index.mjs";
 import { DataPacket } from "./objects.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 

package/dist/kit/networking/scene/switch.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { SCENE } from "../../scene/tokens.mjs";
-import { ContactShadow, Solid } from "../../scene/objects/block.mjs";
-import "../../scene/index.mjs";
+import { Grounding } from "../../scene/materials.mjs";
+import { Solid } from "../../scene/objects/block.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/networking/scene/switch.tsx
@@ -11,7 +11,7 @@ function SwitchPanel({ x, y, width, height, children }) {
 	return /* @__PURE__ */ jsxs("g", {
 		"data-part": "switch-panel",
 		children: [
-			/* @__PURE__ */ jsx(ContactShadow, {
+			/* @__PURE__ */ jsx(Grounding, {
 				cx: x + width / 2,
 				y: y + height + 3,
 				rx: width / 2

package/dist/kit/networking/secret-glyphs.mjs

@@ -3,7 +3,6 @@
 import { FigText } from "../figure/text.mjs";
 import { HUE, STROKE, alpha, tint } from "../figure/figure.mjs";
 import { Arrow } from "../figure/beam.mjs";
-import "../figure/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/networking/secret-glyphs.tsx

package/dist/kit/networking/signal-glyphs.mjs

@@ -1,10 +1,8 @@
 'use client';
 
 import { FigText } from "../figure/text.mjs";
-import { HUE, STROKE } from "../figure/figure.mjs";
 import { ACCENT, SCENE } from "../scene/tokens.mjs";
-import "../scene/index.mjs";
-import "../figure/index.mjs";
+import { HUE, STROKE } from "../figure/figure.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/networking/signal-glyphs.tsx

package/dist/kit/networking/vpc-route-glyph.mjs

@@ -3,9 +3,7 @@
 import { FigText } from "../figure/text.mjs";
 import { HUE, STROKE } from "../figure/figure.mjs";
 import { Arrow } from "../figure/beam.mjs";
-import "../figure/index.mjs";
 import { DataPacket, NetworkObject } from "./scene/objects.mjs";
-import "./scene/index.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/networking/vpc-route-glyph.tsx

package/dist/kit/number-response.mjs

@@ -1,5 +1,5 @@
 import { isRefusal } from "@classytic/stage/result";
-import { parseValue } from "@classytic/stage/math";
+import { parseValue } from "@classytic/stage/math/answer";
 
 //#region src/kit/number-response.ts
 /** Parse decimals, fractions, expressions, and percentages entered by a learner. */

package/dist/kit/plane-grip.d.mts

@@ -1,7 +1,7 @@
 import { GripChoiceControl } from "./figure/grip.mjs";
 import { NumberPointGeometry, PointBindingControl } from "./point-binding.mjs";
+import { Vec2 } from "@classytic/stage/core";
 import { ReactNode } from "react";
-import { Vec2 } from "@classytic/stage";
 //#region src/kit/plane-grip.d.ts
 interface PlaneGripValues {
   value: Vec2;

package/dist/kit/plane-grip.mjs

@@ -4,9 +4,10 @@ import { STROKE } from "./figure/figure.mjs";
 import { pointBinding } from "./point-binding.mjs";
 import { useMarkDrawn } from "../runtime/drawn-controls.mjs";
 import { GripCue, GripLock } from "./figure/grip.mjs";
+import { useCoords } from "@classytic/stage/core";
 import { use, useState } from "react";
-import { useCoords, useDraggable } from "@classytic/stage";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useDraggable } from "@classytic/stage/interaction";
 
 //#region src/kit/plane-grip.tsx
 /**

package/dist/kit/play.mjs

@@ -2,9 +2,9 @@
 
 import { SHELL_KEY } from "./appearance.mjs";
 import { useState } from "react";
-import { useInView } from "@classytic/stage";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@/components/ui/button";
+import { useInView } from "@classytic/stage/view";
 
 //#region src/kit/play.tsx
 /**

package/dist/kit/point-binding.d.mts

@@ -1,5 +1,5 @@
 import { GripChoiceControl, GripNumberControl, GripPointControl } from "./figure/grip.mjs";
-import { Vec2 } from "@classytic/stage";
+import { Vec2 } from "@classytic/stage/core";
 //#region src/kit/point-binding.d.ts
 /** Geometry maps control units to the picture; the bound control owns bounds and snapping. */
 export interface NumberPointGeometry {

package/dist/kit/predict.d.mts

@@ -1,7 +1,7 @@
 import { GripNumberControl } from "./figure/grip.mjs";
 import { GuessTone } from "./vessel.mjs";
+import { Vec2 } from "@classytic/stage/core";
 import { ReactNode } from "react";
-import { Vec2 } from "@classytic/stage";
 //#region src/kit/predict.d.ts
 interface PredictPlotCommon {
   /** Given data points, already plotted (the pattern to extend). */

package/dist/kit/predict.mjs

@@ -2,8 +2,9 @@
 
 import { useMarkDrawn } from "../runtime/drawn-controls.mjs";
 import { CoordPlane } from "./coords.mjs";
-import { Label, MovableDot, Point, Segment } from "@classytic/stage";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { MovableDot } from "@classytic/stage/interaction";
+import { Label, Point, Segment } from "@classytic/stage/primitives";
 
 //#region src/kit/predict.tsx
 const TONE_COLOR = {

package/dist/kit/probability.mjs

@@ -2,7 +2,6 @@
 
 import { FigText } from "./figure/text.mjs";
 import { STROKE } from "./figure/figure.mjs";
-import "./figure/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/probability.tsx

package/dist/kit/quantum/bloch-sphere.mjs

@@ -5,7 +5,6 @@ import { Figure, HUE, STROKE, alpha } from "../figure/figure.mjs";
 import { Ball } from "../figure/body.mjs";
 import { Arrow, Track } from "../figure/beam.mjs";
 import { Guide } from "../figure/plot.mjs";
-import "../figure/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/quantum/bloch-sphere.tsx

package/dist/kit/reaction.mjs

@@ -3,7 +3,6 @@
 import { FigText } from "./figure/text.mjs";
 import { Figure } from "./figure/figure.mjs";
 import { Arrow } from "./figure/beam.mjs";
-import "./figure/index.mjs";
 import { MoleculeGlyph } from "./molecules.mjs";
 import { jsx } from "react/jsx-runtime";
 

package/dist/kit/reasoning/claim-card.mjs

@@ -1,10 +1,8 @@
 'use client';
 
 import { FigText } from "../figure/text.mjs";
-import { HUE, STROKE, alpha } from "../figure/figure.mjs";
 import { SCENE } from "../scene/tokens.mjs";
-import "../scene/index.mjs";
-import "../figure/index.mjs";
+import { HUE, STROKE, alpha } from "../figure/figure.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/reasoning/claim-card.tsx

package/dist/kit/receipt.mjs

@@ -35,14 +35,14 @@ function ReceiptScene({ store = "Half Foods", items, currency = "$", revealItems
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-baseline justify-between gap-3 font-bold",
 				children: [/* @__PURE__ */ jsx("span", { children: "Total items" }), /* @__PURE__ */ jsx("span", {
-					className: revealItems ? "text-[var(--stage-good)]" : "text-[var(--stage-muted)]",
+					className: revealItems ? "text-[var(--stage-fg)]" : "text-[var(--stage-muted)]",
 					children: revealItems ? totalItems : "-"
 				})]
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex items-baseline justify-between gap-3 font-extrabold",
 				children: [/* @__PURE__ */ jsx("span", { children: "Total" }), /* @__PURE__ */ jsx("span", {
-					className: revealCost ? "text-[var(--stage-good)]" : "text-[var(--stage-muted)]",
+					className: revealCost ? "text-[var(--stage-fg)]" : "text-[var(--stage-muted)]",
 					children: revealCost ? money(currency, totalCost) : "-"
 				})]
 			})

package/dist/kit/rich.mjs

@@ -1,8 +1,8 @@
 'use client';
 
 import { Tex } from "../core/tex.mjs";
+import { parseRichText } from "@classytic/stage/core";
 import { Fragment } from "react";
-import { parseRichText } from "@classytic/stage";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 
 //#region src/kit/rich.tsx

package/dist/kit/rule.d.mts

@@ -1,6 +1,7 @@
 import { AuthoredChoiceQuestion } from "./activity-authoring.mjs";
 import { CalcStep, Worked } from "@classytic/stage/core";
 import { ReactNode } from "react";
+import { Result } from "@classytic/stage/result";
 //#region src/kit/rule.d.ts
 export interface RuleInput {
   key: string;
@@ -33,7 +34,7 @@ export interface RuleDef<I extends Record<string, number> = Record<string, numbe
   /** Live-calculator knobs (omit for a static formula card). */
   inputs?: RuleInput[];
   /** Compute the worked result from the current inputs (shows its working). */
-  compute?: (vals: I) => Worked;
+  compute?: (vals: I) => Result<Worked>;
   /** Why it's true: ordered proof/derivation lines, revealed on demand. */
   derivation?: CalcStep[];
   /** Identities, shortcuts, common traps. */

package/dist/kit/rule.mjs

@@ -2,7 +2,7 @@
 
 import { Tex } from "../core/tex.mjs";
 import { Stepper } from "./controls.mjs";
-import { useShell } from "./shell/context.mjs";
+import { useShellMeta, useShellVerdict } from "./shell/context.mjs";
 import { labActivity } from "./goal-activity.mjs";
 import { AuthoredActivityRuntime } from "./authored-activity-runtime.mjs";
 import { useMemo, useState } from "react";
@@ -65,7 +65,8 @@ function StepList({ steps, accent }) {
 function RuleCard({ rule, display = "card", showHeading = true }) {
 	const [vals, setVals] = useState(() => Object.fromEntries((rule.inputs ?? []).map((f) => [f.key, f.default])));
 	const [showProof, setShowProof] = useState(false);
-	const worked = useMemo(() => rule.compute ? rule.compute(vals) : null, [rule, vals]);
+	const computation = useMemo(() => rule.compute?.(vals) ?? null, [rule, vals]);
+	const worked = computation?.ok ? computation.value : null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "rule-card",
 		"data-display": display,
@@ -95,19 +96,26 @@ function RuleCard({ rule, display = "card", showHeading = true }) {
 						className: "rule-card-figure",
 						children: typeof rule.figure === "function" ? rule.figure(vals) : rule.figure
 					})]
-				}), (worked || rule.analogy) && /* @__PURE__ */ jsxs("section", {
+				}), (computation || rule.analogy) && /* @__PURE__ */ jsxs("section", {
 					className: "rule-card-evidence",
 					"aria-label": "Live explanation",
-					children: [!showHeading && rule.analogy && /* @__PURE__ */ jsxs("p", {
-						className: "rule-card-intuition",
-						children: [/* @__PURE__ */ jsx("span", { children: "Intuition" }), rule.analogy]
-					}), worked && /* @__PURE__ */ jsx(StepList, {
-						steps: worked.steps,
-						accent: true
-					})]
+					children: [
+						!showHeading && rule.analogy && /* @__PURE__ */ jsxs("p", {
+							className: "rule-card-intuition",
+							children: [/* @__PURE__ */ jsx("span", { children: "Intuition" }), rule.analogy]
+						}),
+						computation && !computation.ok && /* @__PURE__ */ jsx("p", {
+							role: "status",
+							children: computation.message
+						}),
+						worked && /* @__PURE__ */ jsx(StepList, {
+							steps: worked.steps,
+							accent: true
+						})
+					]
 				})]
 			}),
-			rule.inputs && rule.inputs.length > 0 && worked && /* @__PURE__ */ jsx("div", {
+			rule.inputs && rule.inputs.length > 0 && rule.compute && /* @__PURE__ */ jsx("div", {
 				className: "rule-card-controls",
 				"aria-label": "Rule variables",
 				children: rule.inputs.map((f) => /* @__PURE__ */ jsx(Stepper, {
@@ -166,8 +174,9 @@ function RuleLab({ rule, title, prompt, situation }) {
 * prediction is committed, right or wrong: the real rule beside a wrong guess is the lesson.
 */
 function CommittedRule({ rule }) {
-	const { state, meta } = useShell();
-	const open = meta.sequence.current.id === "play" || state.verdict !== undefined || meta.sequence.canAdvance;
+	const meta = useShellMeta();
+	const verdict = useShellVerdict();
+	const open = meta.sequence.current.id === "play" || verdict !== undefined || meta.sequence.canAdvance;
 	return open ? /* @__PURE__ */ jsx(RuleCard, {
 		rule,
 		display: "activity",

package/dist/kit/scale.mjs

@@ -1,8 +1,9 @@
 'use client';
 
 import { HUE, STROKE, alpha } from "./figure/figure.mjs";
-import { fmt, useCoords } from "@classytic/stage";
+import { fmt, useCoords } from "@classytic/stage/core";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { stageAssetUrl } from "@classytic/stage/assets";
 
 //#region src/kit/scale.tsx
 /**
@@ -18,7 +19,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * speak the same language. That is what lets this converge without rewriting `equation-balance`,
 * `balance-algebra` and `mystery-bucket` into a different rendering model.
 */
-const GRAD = "url(#stage-grad-metal)";
 /**
 * The outline and the bowl cavity are PINNED, and that is not an oversight.
 *
@@ -47,8 +47,9 @@ function barPath(x1, y1, x2, y2, w) {
 	const ny = dx / len * (w / 2);
 	return `M ${x1 + nx} ${y1 + ny} L ${x2 + nx} ${y2 + ny} L ${x2 - nx} ${y2 - ny} L ${x1 - nx} ${y1 - ny} Z`;
 }
-function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced }) {
+function ScaleFrame({ scope, pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced }) {
 	const c = useCoords();
+	const gradient = stageAssetUrl(scope, "metal");
 	const P = (v) => {
 		const [x, y] = c.toPx(v.x, v.y);
 		return [fmt(x), fmt(y)];
@@ -77,21 +78,21 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 		return /* @__PURE__ */ jsxs("g", { children: [
 			/* @__PURE__ */ jsx("path", {
 				d: barPath(ex, ey, rimL, cy, 3.6),
-				fill: GRAD,
+				fill: gradient,
 				stroke: EDGE,
 				strokeWidth: STROKE.hair,
 				strokeLinejoin: "round"
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: barPath(ex, ey, rimR, cy, 3.6),
-				fill: GRAD,
+				fill: gradient,
 				stroke: EDGE,
 				strokeWidth: STROKE.hair,
 				strokeLinejoin: "round"
 			}),
 			/* @__PURE__ */ jsx("path", {
 				d: body,
-				fill: GRAD,
+				fill: gradient,
 				stroke: EDGE,
 				strokeWidth: STROKE.hair,
 				strokeLinejoin: "round"
@@ -116,7 +117,7 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 				cx: rimL,
 				cy,
 				r: 2.7,
-				fill: GRAD,
+				fill: gradient,
 				stroke: EDGE,
 				strokeWidth: STROKE.hair
 			}),
@@ -124,7 +125,7 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 				cx: rimR,
 				cy,
 				r: 2.7,
-				fill: GRAD,
+				fill: gradient,
 				stroke: EDGE,
 				strokeWidth: STROKE.hair
 			}),
@@ -132,7 +133,7 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 				cx: ex,
 				cy: ey,
 				r: 3.8,
-				fill: GRAD,
+				fill: gradient,
 				stroke: EDGE,
 				strokeWidth: STROKE.hair
 			}),
@@ -150,7 +151,7 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 			cy: basey,
 			rx: baseRx,
 			ry: 9,
-			fill: GRAD,
+			fill: gradient,
 			stroke: EDGE,
 			strokeWidth: STROKE.hair
 		}),
@@ -159,13 +160,13 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 			cy: basey - 4,
 			rx: baseRx * .62,
 			ry: 6,
-			fill: GRAD,
+			fill: gradient,
 			stroke: EDGE,
 			strokeWidth: STROKE.hair
 		}),
 		/* @__PURE__ */ jsx("path", {
 			d: `M ${pivx - colTopHalf} ${pivy} L ${pivx + colTopHalf} ${pivy} L ${pivx + colBotHalf} ${basey - 3} Q ${pivx + colBotHalf} ${basey} ${pivx + colBotHalf - 3} ${basey} L ${pivx - colBotHalf + 3} ${basey} Q ${pivx - colBotHalf} ${basey} ${pivx - colBotHalf} ${basey - 3} Z`,
-			fill: GRAD,
+			fill: gradient,
 			stroke: EDGE,
 			strokeWidth: STROKE.hair,
 			strokeLinejoin: "round"
@@ -211,7 +212,7 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 					width: halfW * 2,
 					height: beamH,
 					rx: beamH / 2,
-					fill: balanced ? GOOD : GRAD,
+					fill: balanced ? GOOD : gradient,
 					stroke: EDGE,
 					strokeWidth: STROKE.hair
 				}),
@@ -229,7 +230,7 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 			cx: bax,
 			cy: bay,
 			r: 4,
-			fill: balanced ? GOOD : GRAD,
+			fill: balanced ? GOOD : gradient,
 			stroke: EDGE,
 			strokeWidth: STROKE.hair
 		}),
@@ -237,7 +238,7 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 			cx: bbx,
 			cy: bby,
 			r: 4,
-			fill: balanced ? GOOD : GRAD,
+			fill: balanced ? GOOD : gradient,
 			stroke: EDGE,
 			strokeWidth: STROKE.hair
 		}),
@@ -245,7 +246,7 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 			cx: pivx,
 			cy: pivy,
 			r: 7.5,
-			fill: GRAD,
+			fill: gradient,
 			stroke: EDGE,
 			strokeWidth: STROKE.hair
 		}),