@classytic/labs 0.6.0 → 0.7.0

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

@@ -1,30 +1,113 @@
 'use client';
 
-import { FigText } from "../../figure/text.mjs";
-import { STROKE } from "../../figure/figure.mjs";
 import { ACCENT, SCENE } from "../tokens.mjs";
-import "../../figure/index.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { STROKE } from "../../figure/figure.mjs";
+import { GRAIN_STEPS, Glint, brushedGrain } from "../materials.mjs";
+import { KnobCap } from "./knob.mjs";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/scene/objects/block.tsx
+/** Shared scene materials: lit/base/deep faces, grounded contact and stable attachments.
+* Material detail stays inside the published geometry so bound controls remain aligned.
+*/
 const r2 = (n) => Math.round(n * 100) / 100;
-/** Line pitch in a display: a note-size line plus air, so two lines never touch. */
-const LINE = 13;
 /** Brushed steel: stands, rods, housings. */
 const STEEL = SCENE.steel;
 /** White lab plastic: supplies, racks, stop blocks. */
 const PLASTIC = {
 	lit: SCENE.plastic.base,
 	base: `color-mix(in oklab, ${SCENE.plastic.base} 70%, ${SCENE.plastic.edge})`,
-	deep: SCENE.plastic.edge
+	deep: SCENE.plastic.edge,
+	far: `color-mix(in oklab, ${SCENE.plastic.edge}, ${SCENE.bench.top} 40%)`
+};
+/** How strongly each finish draws its lit band, its shaded side, and its highlight. */
+const FINISH = {
+	matte: {
+		band: .6,
+		sheen: 0,
+		side: .55,
+		bandH: .2,
+		fall: 0
+	},
+	satin: {
+		band: 1,
+		sheen: .55,
+		side: .8,
+		bandH: .2,
+		fall: .4
+	},
+	brushed: {
+		band: 1,
+		sheen: .3,
+		side: .8,
+		bandH: .16,
+		fall: .3
+	},
+	gloss: {
+		band: 1,
+		sheen: .7,
+		side: .9,
+		bandH: .13,
+		fall: .7
+	},
+	glass: {
+		band: 0,
+		sheen: 0,
+		side: 0,
+		bandH: .2,
+		fall: 0
+	},
+	"amber-glass": {
+		band: 0,
+		sheen: 0,
+		side: 0,
+		bandH: .2,
+		fall: 0
+	}
+};
+/** Brushed grain: the groove and the lit ridge, at a fine width that reads as texture, not lines. */
+const GRAIN = {
+	width: .55,
+	deep: .28,
+	lit: .36
 };
-/** A solid block in the scene material: base face, lit top band, shaded right side, thin deep edge. */
-function Solid({ x, y, w, h, ramp = STEEL, radius = 3 }) {
-	const band = Math.max(2, Math.min(h * .2, 10));
+/**
+* A solid block in the scene material: base face, lit top band, shaded right side, thin deep edge,
+* and the highlight its `finish` earns. All inside the same bounds, so attachments never move.
+*
+*   matte        rubber, card, stone: a dim band, no highlight
+*   satin        moulded plastic and painted housings (default): a soft highlight along the top edge
+*                and a soft falloff toward the bench
+*   brushed      machined metal: a fine grain along the long axis, and the soft streak of light
+*                that brushed metal throws ACROSS its grain, toward the key light
+*   gloss        lacquer, anodised accents: a tighter band, a hard glint, a body that darkens toward
+*                the bench, and the bench's bounce light along the bottom edge
+*   glass        a pane or block of clear glass: lit walls, clear middle, doubled edge, a wall streak
+*   amber-glass  brown reagent-bottle glass, pinned in both themes: dark thick walls, a lighter warm
+*                middle where the light gets through, a lit wall streak and a shoulder glint
+*
+* The two glasses ignore `ramp`: glass is its own material.
+*/
+function Solid({ x, y, w, h, ramp = STEEL, radius = 3, finish = "satin" }) {
+	const id = `solid-${useId().replace(/[^\w-]/g, "")}`;
+	const f = FINISH[finish];
+	const band = Math.max(2, Math.min(h * f.bandH, 10));
 	const side = Math.max(2, Math.min(w * .08, 8));
 	const r = Math.min(radius, w / 2, h / 2);
+	if (finish === "glass" || finish === "amber-glass") return /* @__PURE__ */ jsx(GlassFace, {
+		x,
+		y,
+		w,
+		h,
+		r,
+		amber: finish === "amber-glass",
+		id
+	});
+	const wide = w >= h;
 	return /* @__PURE__ */ jsxs("g", {
 		"data-part": "solid",
+		"data-finish": finish,
 		children: [
 			/* @__PURE__ */ jsx("rect", {
 				x,
@@ -34,15 +117,59 @@ function Solid({ x, y, w, h, ramp = STEEL, radius = 3 }) {
 				rx: r,
 				fill: ramp.base
 			}),
-			/* @__PURE__ */ jsx("rect", {
+			f.fall > 0 && h > 10 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+				id: `${id}-body`,
+				x1: "0",
+				y1: "0",
+				x2: "0",
+				y2: "1",
+				children: [/* @__PURE__ */ jsx("stop", {
+					offset: "0.35",
+					stopColor: ramp.deep,
+					stopOpacity: 0
+				}), /* @__PURE__ */ jsx("stop", {
+					offset: "1",
+					stopColor: ramp.deep,
+					stopOpacity: f.fall
+				})]
+			}) }), /* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: w,
+				height: h,
+				rx: r,
+				fill: `url(#${id}-body)`,
+				"data-decor": "sheen"
+			})] }) : null,
+			f.band > 0 ? /* @__PURE__ */ jsx("rect", {
 				x: x + 1,
 				y: y + 1,
 				width: Math.max(0, w - 2),
 				height: band,
 				rx: Math.max(0, r - 1),
 				fill: ramp.lit,
-				opacity: .7
-			}),
+				opacity: f.band
+			}) : null,
+			f.sheen > 0 ? /* @__PURE__ */ jsx("rect", {
+				x: x + 1,
+				y: y + 1,
+				width: Math.max(0, w - 2),
+				height: band,
+				rx: Math.max(0, r - 1),
+				fill: SCENE.spec.hard,
+				opacity: f.sheen
+			}) : null,
+			finish === "brushed" ? /* @__PURE__ */ jsx(Brushed, {
+				x,
+				y,
+				w: w - side,
+				h,
+				r,
+				band,
+				wide,
+				ramp,
+				id
+			}) : null,
 			/* @__PURE__ */ jsx("rect", {
 				x: x + w - side - .5,
 				y: y + band * .6,
@@ -50,8 +177,31 @@ function Solid({ x, y, w, h, ramp = STEEL, radius = 3 }) {
 				height: Math.max(0, h - band * .6 - .5),
 				rx: Math.max(0, r - 1),
 				fill: ramp.deep,
-				opacity: .32
+				opacity: f.side
 			}),
+			finish === "satin" && w > 8 ? /* @__PURE__ */ jsx(Glint, {
+				kind: "streak",
+				x1: x + r + 2,
+				y1: y + 1.5,
+				x2: x + w * .6,
+				y2: y + 1.5,
+				width: STROKE.hair,
+				strength: "soft"
+			}) : null,
+			finish === "gloss" && w > 8 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Glint, {
+				kind: "streak",
+				x1: x + r + 3,
+				y1: y + band * .55,
+				x2: x + Math.min(w * .45, w - side - 4),
+				y2: y + band * .55,
+				width: STROKE.line
+			}), h > 16 ? /* @__PURE__ */ jsx("path", {
+				d: `M${r2(x + r + 1)} ${r2(y + h - 1.6)}H${r2(x + w - side - 2)}`,
+				stroke: ramp.lit,
+				strokeWidth: STROKE.hair,
+				strokeLinecap: "round",
+				opacity: .75
+			}) : null] }) : null,
 			/* @__PURE__ */ jsx("rect", {
 				x,
 				y,
@@ -65,93 +215,243 @@ function Solid({ x, y, w, h, ramp = STEEL, radius = 3 }) {
 		]
 	});
 }
-/** The soft shadow an object casts on the surface it stands on, centred under it. */
-function ContactShadow({ cx, y, rx }) {
-	return /* @__PURE__ */ jsx("ellipse", {
-		"data-part": "contact-shadow",
-		cx,
-		cy: y,
-		rx,
-		ry: Math.max(2, rx * .12),
-		fill: SCENE.shadow
-	});
-}
 /**
-* A readout window set into an object: label paper with a thin inset edge, one or two lines of ink.
-* The first line is the name (quiet), the last the reading (semibold), so a detector says what it is
-* and what it counted without paint under its words.
+* Brushed metal over the front face (side strip excluded): the grain, then the anisotropic
+* highlight. Brushing scratches the metal into fine grooves, and each groove reflects the light
+* as a short line at right angles to itself, so the highlight is a soft streak ACROSS the grain,
+* set toward the upper-left key light. One scoped gradient, at most six grain paths, no filters.
 */
-function Display({ x, y, w, h, lines, fontSize }) {
-	const n = lines.length;
+function Brushed({ x, y, w, h, r, band, wide, ramp, id }) {
+	const grain = brushedGrain({
+		x: x + .5,
+		y: y + .5,
+		w: w - .5,
+		h: h - 1,
+		r
+	}, wide ? "x" : "y");
+	const streak = wide ? {
+		x: x + w * .16,
+		y: y + 1,
+		w: w * .3,
+		h: h - 2
+	} : {
+		x: x + 1,
+		y: y + band + h * .08,
+		w: w - 1,
+		h: Math.min(h * .3, h - band - 2)
+	};
 	return /* @__PURE__ */ jsxs("g", {
-		"data-part": "display",
-		children: [/* @__PURE__ */ jsx("rect", {
-			x,
-			y,
-			width: w,
-			height: h,
-			rx: 2.5,
-			fill: SCENE.label.paper,
-			stroke: SCENE.steel.deep,
-			strokeWidth: STROKE.hair
-		}), lines.map((line, i) => /* @__PURE__ */ jsx(FigText, {
-			x: r2(x + w / 2),
-			y: r2(y + h / 2 + (i - (n - 1) / 2) * Math.max(LINE, (fontSize ?? 0) * 1.25) + 1),
-			anchor: "middle",
-			baseline: "middle",
-			size: "note",
-			fontSize,
-			fit: w - 8,
-			weight: i === n - 1 ? "semibold" : undefined,
-			color: SCENE.label.ink,
-			halo: false,
-			caps: false,
-			children: line
-		}, i))]
+		"data-part": "brushed",
+		"data-decor": "grain",
+		"aria-hidden": "true",
+		children: [
+			grain.deep.map((d, i) => d ? /* @__PURE__ */ jsx("path", {
+				d,
+				stroke: ramp.deep,
+				strokeWidth: GRAIN.width,
+				opacity: r2(GRAIN.deep * GRAIN_STEPS[i])
+			}, `d${i}`) : null),
+			grain.lit.map((d, i) => d ? /* @__PURE__ */ jsx("path", {
+				d,
+				stroke: SCENE.spec.hard,
+				strokeWidth: GRAIN.width,
+				opacity: r2(GRAIN.lit * GRAIN_STEPS[i])
+			}, `l${i}`) : null),
+			streak.w > 2 && streak.h > 2 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+				id: `${id}-streak`,
+				x1: "0",
+				y1: "0",
+				x2: wide ? 1 : 0,
+				y2: wide ? 0 : 1,
+				children: [
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0",
+						stopColor: SCENE.light.warm,
+						stopOpacity: 0
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0.45",
+						stopColor: SCENE.light.warm,
+						stopOpacity: .5
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0.6",
+						stopColor: SCENE.light.warm,
+						stopOpacity: .38
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "1",
+						stopColor: SCENE.light.warm,
+						stopOpacity: 0
+					})
+				]
+			}) }), /* @__PURE__ */ jsx("rect", {
+				x: r2(streak.x),
+				y: r2(streak.y),
+				width: r2(streak.w),
+				height: r2(streak.h),
+				fill: `url(#${id}-streak)`
+			})] }) : null
+		]
 	});
 }
-/** A raised instrument dial: inset shadow, rim and a pointer that makes rotation visible. */
-function Knob({ cx, cy, r = 5, accent = "cobalt", angle = -90 }) {
-	const tone = ACCENT[accent];
+/**
+* The two glasses. Glass reads by its walls (docs/DESIGN-SYSTEM.md, Material): light crosses the
+* most glass at the two walls, so they carry the strongest tone and the middle the clearest (clear
+* glass) or the lightest warm brown (amber glass). A doubled edge gives the wall its thickness, a
+* soft streak runs down the wall facing the light, and amber adds a hard glint on its shoulder.
+*/
+function GlassFace({ x, y, w, h, r, amber, id }) {
+	const inset = Math.min(2.5, w * .08, h * .08);
+	const streakX = x + Math.min(Math.max(3, w * .14), w * .3);
+	const top = y + Math.max(r * .7, Math.min(5, h * .15));
 	return /* @__PURE__ */ jsxs("g", {
-		"data-part": "knob",
+		"data-part": "solid",
+		"data-finish": amber ? "amber-glass" : "glass",
 		children: [
-			/* @__PURE__ */ jsx("ellipse", {
-				cx,
-				cy: cy + r * .22,
-				rx: r * 1.1,
-				ry: r,
-				fill: SCENE.label.ink,
-				opacity: .16
+			/* @__PURE__ */ jsxs("defs", { children: [/* @__PURE__ */ jsx("linearGradient", {
+				id: `${id}-wall`,
+				x1: "0",
+				y1: "0",
+				x2: "1",
+				y2: "0",
+				children: amber ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0",
+						stopColor: SCENE.amberGlass.wall
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0.16",
+						stopColor: SCENE.amberGlass.body
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0.44",
+						stopColor: SCENE.amberGlass.core
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0.62",
+						stopColor: SCENE.amberGlass.core
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0.86",
+						stopColor: SCENE.amberGlass.body
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "1",
+						stopColor: SCENE.amberGlass.wall
+					})
+				] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0",
+						stopColor: SCENE.glass.edge,
+						stopOpacity: .45
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0.14",
+						stopColor: SCENE.glass.edge,
+						stopOpacity: 0
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "0.84",
+						stopColor: SCENE.glass.edge,
+						stopOpacity: 0
+					}),
+					/* @__PURE__ */ jsx("stop", {
+						offset: "1",
+						stopColor: SCENE.glass.edge,
+						stopOpacity: .6
+					})
+				] })
+			}), amber ? /* @__PURE__ */ jsxs("radialGradient", {
+				id: `${id}-base`,
+				children: [/* @__PURE__ */ jsx("stop", {
+					offset: "0",
+					stopColor: SCENE.light.warm,
+					stopOpacity: .3
+				}), /* @__PURE__ */ jsx("stop", {
+					offset: "1",
+					stopColor: SCENE.light.warm,
+					stopOpacity: 0
+				})]
+			}) : null] }),
+			amber ? null : /* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: w,
+				height: h,
+				rx: r,
+				fill: SCENE.glass.fill
 			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx,
-				cy,
-				r,
-				fill: tone.deep,
-				stroke: tone.deep,
-				strokeWidth: STROKE.line
+			/* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: w,
+				height: h,
+				rx: r,
+				fill: `url(#${id}-wall)`
 			}),
-			/* @__PURE__ */ jsx("circle", {
-				cx,
-				cy: cy - r * .12,
-				r: r * .84,
-				fill: tone.base,
-				stroke: tone.lit,
-				strokeWidth: STROKE.hair
+			amber && h > 16 ? /* @__PURE__ */ jsx("ellipse", {
+				cx: r2(x + w * .53),
+				cy: r2(y + h - inset - Math.min(h * .14, 10)),
+				rx: r2(w * .34),
+				ry: r2(Math.min(h * .16, 12)),
+				fill: `url(#${id}-base)`,
+				"data-decor": "sheen"
+			}) : null,
+			/* @__PURE__ */ jsx("rect", {
+				x: r2(x + inset),
+				y: r2(y + inset),
+				width: r2(Math.max(0, w - 2 * inset)),
+				height: r2(Math.max(0, h - 2 * inset)),
+				rx: r2(Math.max(0, r - inset)),
+				fill: "none",
+				stroke: amber ? SCENE.amberGlass.core : SCENE.glass.edge,
+				strokeWidth: STROKE.hair,
+				opacity: amber ? .55 : .5
+			}),
+			/* @__PURE__ */ jsx(Glint, {
+				kind: "streak",
+				x1: streakX,
+				y1: top,
+				x2: streakX,
+				y2: y + h - Math.max(r * .7, Math.min(6, h * .2)),
+				width: amber ? Math.min(STROKE.edge, Math.max(STROKE.hair, w * .06)) : STROKE.line,
+				strength: "soft"
 			}),
-			/* @__PURE__ */ jsx("line", {
-				x1: cx,
-				y1: cy,
-				x2: cx + Math.cos(angle * Math.PI / 180) * r * .65,
-				y2: cy + Math.sin(angle * Math.PI / 180) * r * .65,
-				stroke: SCENE.label.ink,
-				strokeWidth: STROKE.line,
-				strokeLinecap: "round"
+			amber && w > 12 && h > 16 ? /* @__PURE__ */ jsx(Glint, {
+				kind: "streak",
+				x1: streakX,
+				y1: top,
+				x2: streakX,
+				y2: top + Math.min(h * .16, 12),
+				width: STROKE.hair
+			}) : null,
+			/* @__PURE__ */ jsx("rect", {
+				x,
+				y,
+				width: w,
+				height: h,
+				rx: r,
+				fill: "none",
+				stroke: amber ? SCENE.amberGlass.wall : SCENE.glass.edge,
+				strokeWidth: STROKE.hair
 			})
 		]
 	});
 }
+/** A raised instrument dial: inset shadow, rim and a pointer that makes rotation visible. */
+function Knob({ cx, cy, r = 5, accent = "cobalt", angle = -90 }) {
+	return /* @__PURE__ */ jsx("g", {
+		"data-part": "knob",
+		children: /* @__PURE__ */ jsx(KnobCap, {
+			cx,
+			cy,
+			r,
+			angle: angle + 90,
+			ramp: ACCENT[accent]
+		})
+	});
+}
 /** A ball in an accent, lit from the upper left. The same form as `Knob`, sized for a projectile. */
 function Sphere({ cx, cy, r = 6, accent = "coral" }) {
 	const tone = ACCENT[accent];
@@ -175,40 +475,16 @@ function Sphere({ cx, cy, r = 6, accent = "coral" }) {
 				cy: r2(cy - r * .36),
 				r: r2(r * .3),
 				fill: tone.lit
+			}),
+			/* @__PURE__ */ jsx(Glint, {
+				kind: "dot",
+				cx,
+				cy,
+				r
 			})
 		]
 	});
 }
-/**
-* A small paper tag centred on (x, y), for text on an object too small for a `LabelChip`: "1 kg" on a
-* trolley, "300 g" on a hanger. Its width follows the text.
-*/
-function Tag({ x, y, children }) {
-	const w = r2(children.length * 6.6 + 10);
-	return /* @__PURE__ */ jsxs("g", {
-		"data-part": "tag",
-		children: [/* @__PURE__ */ jsx("rect", {
-			x: r2(x - w / 2),
-			y: y - 7.5,
-			width: w,
-			height: 15,
-			rx: 3,
-			fill: SCENE.label.paper,
-			stroke: SCENE.steel.deep,
-			strokeWidth: STROKE.hair
-		}), /* @__PURE__ */ jsx(FigText, {
-			x,
-			y: y + .5,
-			anchor: "middle",
-			baseline: "middle",
-			size: "note",
-			caps: false,
-			halo: false,
-			color: SCENE.label.ink,
-			children
-		})]
-	});
-}
 
 //#endregion
-export { ContactShadow, Display, Knob, PLASTIC, STEEL, Solid, Sphere, Tag };
+export { Knob, PLASTIC, STEEL, Solid, Sphere };

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

@@ -1,10 +1,10 @@
 'use client';
 
+import { ACCENT, SCENE } from "../tokens.mjs";
 import { STROKE } from "../../figure/figure.mjs";
 import { useScene } from "../context.mjs";
-import { ACCENT, SCENE } from "../tokens.mjs";
-import { ContactShadow, STEEL } from "./block.mjs";
-import "../../figure/index.mjs";
+import { Grounding } from "../materials.mjs";
+import { STEEL } from "./block.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/scene/objects/car.tsx
@@ -23,7 +23,7 @@ function Car({ x, ground, length = 46, accent = "coral", braking = false }) {
 	return /* @__PURE__ */ jsxs("g", {
 		"data-part": "car",
 		children: [
-			/* @__PURE__ */ jsx(ContactShadow, {
+			/* @__PURE__ */ jsx(Grounding, {
 				cx: r2(x + L / 2),
 				y: g,
 				rx: r2(L / 2 + 2)

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

@@ -1,10 +1,9 @@
 'use client';
 
 import { FigText } from "../../figure/text.mjs";
+import { ACCENT } from "../tokens.mjs";
 import { HUE, STROKE } from "../../figure/figure.mjs";
 import { Arrow } from "../../figure/beam.mjs";
-import { ACCENT } from "../tokens.mjs";
-import "../../figure/index.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/scene/objects/charges.tsx

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

@@ -1,10 +1,9 @@
 'use client';
 
-import { HUE, STROKE } from "../../figure/figure.mjs";
-import { GAUGE } from "../../figure/gauge.mjs";
 import { ACCENT, SCENE } from "../tokens.mjs";
+import { HUE, STROKE } from "../../figure/figure.mjs";
 import { STEEL } from "./block.mjs";
-import "../../figure/index.mjs";
+import { GAUGE } from "../../figure/gauge.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/scene/objects/clock.tsx