@classytic/labs 0.2.0 → 0.4.0

package/dist/kit/scene-library.mjs

@@ -4,6 +4,8 @@ import { dataScene, registerDataScene } from "./data-scene.mjs";
 import { SceneStudio } from "./scene-studio.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
+import { Pencil, Play, Plus, Trash2 } from "lucide-react";
 
 //#region src/kit/scene-library.tsx
 /**
@@ -63,43 +65,6 @@ const previewOf = (spec) => spec.kind === "count" ? dataScene(spec).render({
 	width: 130,
 	height: 116
 });
-const STYLE = `
-.scl{ --scl-line: color-mix(in oklab, var(--stage-fg) 14%, transparent); }
-.scl-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; }
-.scl-h{ font-weight:800; font-size:16px; margin:0; }
-.scl-count{ font-size:12px; font-weight:700; color:var(--stage-muted); }
-.scl-spacer{ flex:1; }
-.scl-btn{ font-weight:700; font-size:13px; border-radius:9px; padding:8px 14px; cursor:pointer; border:1.5px solid var(--scl-line); background:transparent; color:var(--stage-fg); }
-.scl-btn--primary{ border-color:var(--stage-accent); background:var(--stage-accent); color:#fff; }
-.scl-btn--ghost{ border-color:transparent; }
-.scl-btn:disabled{ opacity:.45; cursor:not-allowed; }
-.scl-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(168px,1fr)); gap:14px; }
-.scl-card{ position:relative; display:grid; justify-items:center; gap:6px; padding:14px 12px 12px; border:1px solid var(--scl-line); border-radius:14px; background:var(--stage-bg);
-  opacity:1; transition: opacity .25s ease, translate .25s ease, box-shadow .15s ease; }
-.scl-card:hover{ box-shadow:0 6px 18px rgba(0,0,0,.08); }
-@starting-style{ .scl-card{ opacity:0; translate:0 8px; } }
-.scl-fig{ min-height:120px; display:grid; place-items:center; }
-.scl-name{ font-weight:800; font-size:14px; }
-.scl-sub{ font-size:11px; color:var(--stage-muted); }
-.scl-actions{ position:absolute; top:8px; right:8px; display:flex; gap:4px; opacity:0; transition:opacity .15s ease; }
-.scl-card:hover .scl-actions, .scl-card:focus-within .scl-actions{ opacity:1; }
-.scl-icon{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; cursor:pointer; border:1px solid var(--scl-line); background:var(--stage-bg); color:var(--stage-fg); font-size:13px; }
-.scl-icon:hover{ background:color-mix(in oklab, var(--stage-fg) 8%, transparent); }
-.scl-confirm{ position:absolute; inset:0; display:grid; place-items:center; gap:8px; background:color-mix(in oklab, var(--stage-bg) 88%, transparent); border-radius:14px; }
-.scl-empty{ display:grid; justify-items:center; gap:8px; padding:34px; border:1.5px dashed var(--scl-line); border-radius:14px; color:var(--stage-muted); text-align:center; }
-.scl-dialog{ border:none; border-radius:16px; padding:0; width:min(620px, 94vw); background:var(--stage-bg); color:var(--stage-fg); box-shadow:0 24px 70px rgba(0,0,0,.28);
-  opacity:0; translate:0 14px; transition: opacity .22s ease, translate .22s ease, overlay .22s allow-discrete, display .22s allow-discrete; }
-.scl-dialog[open]{ opacity:1; translate:0 0; }
-@starting-style{ .scl-dialog[open]{ opacity:0; translate:0 14px; } }
-.scl-dialog::backdrop{ background:rgba(0,0,0,.45); backdrop-filter:blur(2px); }
-.scl-dlg-body{ padding:20px; display:grid; gap:16px; }
-.scl-dlg-h{ font-weight:800; font-size:17px; margin:0; }
-.scl-foot{ display:flex; justify-content:flex-end; gap:10px; }
-.scl-err{ font-size:12px; font-weight:600; color:var(--stage-warn); }
-@media (prefers-reduced-motion: reduce){
-  .scl-card, .scl-dialog{ translate:none; transition-duration:.05s; }
-  @starting-style{ .scl-card, .scl-dialog[open]{ translate:none; } }
-}`;
 const BLANK = {
 	name: "",
 	kind: "count",
@@ -139,57 +104,56 @@ function SceneLibraryManager({ onUse }) {
 		dlg.current?.close();
 	};
 	return /* @__PURE__ */ jsxs("div", {
-		className: "scl",
+		className: "[--scl-line:color-mix(in_oklab,var(--stage-fg)_14%,transparent)]",
 		children: [
-			/* @__PURE__ */ jsx("style", { children: STYLE }),
 			/* @__PURE__ */ jsxs("div", {
-				className: "scl-head",
+				className: "mb-3.5 flex flex-wrap items-center gap-3",
 				children: [
 					/* @__PURE__ */ jsx("h3", {
-						className: "scl-h",
+						className: "m-0 text-base font-extrabold",
 						children: "Custom scenes"
 					}),
 					/* @__PURE__ */ jsxs("span", {
-						className: "scl-count",
+						className: "text-xs font-bold text-[var(--stage-muted)]",
 						children: [lib.specs.length, " saved · used across every lesson"]
 					}),
-					/* @__PURE__ */ jsx("span", { className: "scl-spacer" }),
-					/* @__PURE__ */ jsx("button", {
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					/* @__PURE__ */ jsxs(Button, {
 						type: "button",
-						className: "scl-btn scl-btn--primary",
+						size: "sm",
 						onClick: () => open(),
-						children: "+ New scene"
+						children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }), "New scene"]
 					})
 				]
 			}),
 			lib.specs.length === 0 ? /* @__PURE__ */ jsxs("div", {
-				className: "scl-empty",
+				className: "grid justify-items-center gap-2 rounded-[14px] border border-dashed border-[var(--scl-line)] p-[34px] text-center text-[var(--stage-muted)]",
 				children: [
 					/* @__PURE__ */ jsx("strong", { children: "No custom scenes yet" }),
 					/* @__PURE__ */ jsx("span", { children: "Create a skin from an emoji or a shape, no code. It saves to this project and works in every lab." }),
-					/* @__PURE__ */ jsx("button", {
+					/* @__PURE__ */ jsxs(Button, {
 						type: "button",
-						className: "scl-btn scl-btn--primary",
+						size: "sm",
+						className: "mt-1",
 						onClick: () => open(),
-						style: { marginTop: 4 },
-						children: "+ New scene"
+						children: [/* @__PURE__ */ jsx(Plus, { "aria-hidden": "true" }), "New scene"]
 					})
 				]
 			}) : /* @__PURE__ */ jsx("div", {
-				className: "scl-grid",
+				className: "grid grid-cols-[repeat(auto-fill,minmax(168px,1fr))] gap-3.5",
 				children: lib.specs.map((spec) => /* @__PURE__ */ jsxs("div", {
-					className: "scl-card",
+					className: "group relative grid justify-items-center gap-1.5 rounded-[14px] border border-[var(--scl-line)] bg-[var(--stage-bg)] px-3 pb-3 pt-3.5 transition-shadow hover:shadow-lg focus-within:shadow-lg",
 					children: [
 						/* @__PURE__ */ jsx("div", {
-							className: "scl-fig",
+							className: "grid min-h-[120px] place-items-center",
 							children: previewOf(spec)
 						}),
 						/* @__PURE__ */ jsx("span", {
-							className: "scl-name",
+							className: "text-sm font-extrabold",
 							children: spec.label || spec.name
 						}),
 						/* @__PURE__ */ jsxs("span", {
-							className: "scl-sub",
+							className: "text-[11px] text-[var(--stage-muted)]",
 							children: [
 								/* @__PURE__ */ jsx("code", { children: spec.name }),
 								" · ",
@@ -197,60 +161,58 @@ function SceneLibraryManager({ onUse }) {
 							]
 						}),
 						/* @__PURE__ */ jsxs("div", {
-							className: "scl-actions",
+							className: "absolute right-2 top-2 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",
 							children: [
-								onUse && /* @__PURE__ */ jsx("button", {
+								onUse && /* @__PURE__ */ jsx(Button, {
 									type: "button",
-									className: "scl-icon",
+									size: "icon-sm",
+									variant: "outline",
 									title: "Use in the lab",
 									"aria-label": `use ${spec.name}`,
 									onClick: () => onUse(spec),
-									children: "▸"
+									children: /* @__PURE__ */ jsx(Play, { "aria-hidden": "true" })
 								}),
-								/* @__PURE__ */ jsx("button", {
+								/* @__PURE__ */ jsx(Button, {
 									type: "button",
-									className: "scl-icon",
+									size: "icon-sm",
+									variant: "outline",
 									title: "Edit",
 									"aria-label": `edit ${spec.name}`,
 									onClick: () => open(spec),
-									children: "✎"
+									children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": "true" })
 								}),
-								/* @__PURE__ */ jsx("button", {
+								/* @__PURE__ */ jsx(Button, {
 									type: "button",
-									className: "scl-icon",
+									size: "icon-sm",
+									variant: "outline",
 									title: "Delete",
 									"aria-label": `delete ${spec.name}`,
 									onClick: () => setConfirm(spec.name),
-									children: "🗑"
+									children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true" })
 								})
 							]
 						}),
 						confirm === spec.name && /* @__PURE__ */ jsxs("div", {
-							className: "scl-confirm",
+							className: "absolute inset-0 grid place-items-center gap-2 rounded-[14px] bg-[color-mix(in_oklab,var(--stage-bg)_88%,transparent)]",
 							children: [/* @__PURE__ */ jsxs("strong", {
-								style: { fontSize: 13 },
+								className: "text-[13px]",
 								children: [
 									"Delete “",
 									spec.label || spec.name,
 									"”?"
 								]
 							}), /* @__PURE__ */ jsxs("div", {
-								style: {
-									display: "flex",
-									gap: 8
-								},
-								children: [/* @__PURE__ */ jsx("button", {
+								className: "flex gap-2",
+								children: [/* @__PURE__ */ jsx(Button, {
 									type: "button",
-									className: "scl-btn scl-btn--ghost",
+									size: "sm",
+									variant: "ghost",
 									onClick: () => setConfirm(null),
 									children: "Cancel"
-								}), /* @__PURE__ */ jsx("button", {
+								}), /* @__PURE__ */ jsx(Button, {
 									type: "button",
-									className: "scl-btn",
-									style: {
-										borderColor: "var(--stage-warn)",
-										color: "var(--stage-warn)"
-									},
+									size: "sm",
+									variant: "destructive",
 									onClick: () => {
 										lib.remove(spec.name);
 										setConfirm(null);
@@ -264,13 +226,14 @@ function SceneLibraryManager({ onUse }) {
 			}),
 			/* @__PURE__ */ jsx("dialog", {
 				ref: dlg,
-				className: "scl-dialog",
+				closedby: "any",
+				className: "m-auto w-[min(620px,94vw)] translate-y-3.5 rounded-2xl border-0 bg-[var(--stage-bg)] p-0 text-[var(--stage-fg)] opacity-0 shadow-2xl transition-[opacity,translate,overlay,display] duration-200 open:translate-y-0 open:opacity-100 backdrop:bg-black/45 backdrop:backdrop-blur-[2px] motion-reduce:translate-y-0 motion-reduce:transition-none",
 				"aria-label": "Edit custom scene",
 				children: /* @__PURE__ */ jsxs("div", {
-					className: "scl-dlg-body",
+					className: "grid gap-4 p-5",
 					children: [
 						/* @__PURE__ */ jsx("h4", {
-							className: "scl-dlg-h",
+							className: "m-0 text-[17px] font-extrabold",
 							children: editing ? "Edit scene" : "New scene"
 						}),
 						/* @__PURE__ */ jsx(SceneStudio, {
@@ -278,7 +241,7 @@ function SceneLibraryManager({ onUse }) {
 							onChange: setDraft
 						}),
 						dup && /* @__PURE__ */ jsxs("span", {
-							className: "scl-err",
+							className: "text-xs font-semibold text-[var(--stage-warn)]",
 							children: [
 								"A scene named “",
 								nameTrim,
@@ -286,15 +249,14 @@ function SceneLibraryManager({ onUse }) {
 							]
 						}),
 						/* @__PURE__ */ jsxs("div", {
-							className: "scl-foot",
-							children: [/* @__PURE__ */ jsx("button", {
+							className: "flex justify-end gap-2.5",
+							children: [/* @__PURE__ */ jsx(Button, {
 								type: "button",
-								className: "scl-btn scl-btn--ghost",
+								variant: "ghost",
 								onClick: () => dlg.current?.close(),
 								children: "Cancel"
-							}), /* @__PURE__ */ jsx("button", {
+							}), /* @__PURE__ */ jsx(Button, {
 								type: "button",
-								className: "scl-btn scl-btn--primary",
 								disabled: !valid,
 								onClick: save,
 								children: editing ? "Save changes" : "Add to library"

package/dist/kit/scene-studio.d.mts

@@ -1,14 +1,10 @@
 import { DataSceneSpec } from "./data-scene.mjs";
 import { ReactNode } from "react";
-
 //#region src/kit/scene-studio.d.ts
 interface SceneStudioProps {
   spec: DataSceneSpec;
   onChange: (spec: DataSceneSpec) => void;
 }
-declare function SceneStudio({
-  spec,
-  onChange
-}: SceneStudioProps): ReactNode;
+declare function SceneStudio({ spec, onChange }: SceneStudioProps): ReactNode;
 //#endregion
 export { SceneStudio, SceneStudioProps };

package/dist/kit/scene-studio.mjs

@@ -1,8 +1,11 @@
 'use client';
 
+import { Chip } from "./controls.mjs";
 import { dataScene } from "./data-scene.mjs";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 //#region src/kit/scene-studio.tsx
 /**
@@ -66,39 +69,14 @@ function toSpec(f) {
 		color: f.color
 	};
 }
-const inputStyle = {
-	padding: "6px 9px",
-	borderRadius: 8,
-	border: "1.5px solid color-mix(in oklab, var(--stage-fg) 24%, transparent)",
-	background: "var(--stage-bg)",
-	color: "var(--stage-fg)",
-	fontSize: 14,
-	width: "100%"
-};
-const labelStyle = {
-	fontSize: 11,
-	fontWeight: 700,
-	color: "var(--stage-muted)",
-	textTransform: "uppercase",
-	letterSpacing: .4
-};
-function Chip({ active, onClick, children }) {
-	return /* @__PURE__ */ jsx("button", {
-		type: "button",
-		onClick,
-		style: {
-			padding: "5px 11px",
-			borderRadius: 999,
-			fontWeight: 700,
-			fontSize: 13,
-			cursor: "pointer",
-			border: `2px solid ${active ? "var(--stage-accent)" : "color-mix(in oklab, var(--stage-fg) 22%, transparent)"}`,
-			background: active ? "color-mix(in oklab, var(--stage-accent) 16%, transparent)" : "transparent",
-			color: "var(--stage-fg)"
-		},
-		children
-	});
-}
+const ICON_CHOICES = [
+	"⭐",
+	"🍎",
+	"🍕",
+	"🪙",
+	"🧱",
+	"🌱"
+];
 function SceneStudio({ spec, onChange }) {
 	const f = toFlat(spec);
 	const uid = useId();
@@ -118,124 +96,105 @@ function SceneStudio({ spec, onChange }) {
 		height: 150
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: "not-prose",
-		style: {
-			display: "grid",
-			gridTemplateColumns: "minmax(0,1fr) 170px",
-			gap: 18,
-			alignItems: "start",
-			padding: 14,
-			borderRadius: 12,
-			border: "1px solid color-mix(in oklab, var(--stage-fg) 14%, transparent)"
-		},
+		className: "not-prose lab-scene-studio",
 		children: [/* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				gap: 12
-			},
+			className: "lab-scene-studio-form",
 			children: [
 				/* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "grid",
-						gridTemplateColumns: "1fr 1fr",
-						gap: 10
-					},
+					className: "lab-scene-studio-fields",
 					children: [/* @__PURE__ */ jsxs("label", {
-						style: {
-							display: "grid",
-							gap: 4
-						},
-						children: [/* @__PURE__ */ jsx("span", {
-							style: labelStyle,
-							children: "name (id)"
-						}), /* @__PURE__ */ jsx("input", {
-							style: inputStyle,
-							value: f.name,
-							onChange: (e) => set({ name: e.currentTarget.value }),
-							placeholder: "pizza"
-						})]
+						className: "lab-scene-studio-field",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "lab-scene-studio-label",
+								children: "Internal name"
+							}),
+							/* @__PURE__ */ jsx(Input, {
+								className: "lab-scene-studio-input",
+								value: f.name,
+								onChange: (e) => set({ name: e.currentTarget.value }),
+								placeholder: "pizza",
+								autoComplete: "off"
+							}),
+							/* @__PURE__ */ jsx("small", { children: "Used as the stable scene ID." })
+						]
 					}), /* @__PURE__ */ jsxs("label", {
-						style: {
-							display: "grid",
-							gap: 4
-						},
+						className: "lab-scene-studio-field",
 						children: [/* @__PURE__ */ jsx("span", {
-							style: labelStyle,
-							children: "label"
-						}), /* @__PURE__ */ jsx("input", {
-							style: inputStyle,
+							className: "lab-scene-studio-label",
+							children: "Display label"
+						}), /* @__PURE__ */ jsx(Input, {
+							className: "lab-scene-studio-input",
 							value: f.label,
 							onChange: (e) => set({ label: e.currentTarget.value }),
 							placeholder: "Pizza"
 						})]
 					})]
 				}),
-				/* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "grid",
-						gap: 4
-					},
-					children: [/* @__PURE__ */ jsx("span", {
-						style: labelStyle,
-						children: "type"
+				/* @__PURE__ */ jsxs("fieldset", {
+					className: "lab-scene-studio-group",
+					children: [/* @__PURE__ */ jsx("legend", {
+						className: "lab-scene-studio-label",
+						children: "Representation"
 					}), /* @__PURE__ */ jsxs("div", {
-						style: {
-							display: "flex",
-							gap: 8,
-							flexWrap: "wrap"
-						},
+						className: "lab-scene-studio-choices",
 						children: [
-							/* @__PURE__ */ jsx(Chip, {
-								active: f.variant === "count",
+							/* @__PURE__ */ jsxs(Chip, {
+								className: "lab-scene-studio-choice",
+								selected: f.variant === "count",
 								onClick: () => set({ variant: "count" }),
-								children: "count of icons"
+								children: [/* @__PURE__ */ jsx("strong", { children: "Count" }), /* @__PURE__ */ jsx("span", { children: "Repeat objects" })]
 							}),
-							/* @__PURE__ */ jsx(Chip, {
-								active: f.variant === "icons",
+							/* @__PURE__ */ jsxs(Chip, {
+								className: "lab-scene-studio-choice",
+								selected: f.variant === "icons",
 								onClick: () => set({ variant: "icons" }),
-								children: "icon rating"
+								children: [/* @__PURE__ */ jsx("strong", { children: "Rating" }), /* @__PURE__ */ jsx("span", { children: "Fill fixed slots" })]
 							}),
-							/* @__PURE__ */ jsx(Chip, {
-								active: f.variant === "shape",
+							/* @__PURE__ */ jsxs(Chip, {
+								className: "lab-scene-studio-choice",
+								selected: f.variant === "shape",
 								onClick: () => set({ variant: "shape" }),
-								children: "filling shape"
+								children: [/* @__PURE__ */ jsx("strong", { children: "Level" }), /* @__PURE__ */ jsx("span", { children: "Fill a container" })]
 							})
 						]
 					})]
 				}),
 				(f.variant === "count" || f.variant === "icons") && /* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "grid",
-						gridTemplateColumns: f.variant === "icons" ? "1fr 1fr" : "1fr",
-						gap: 10
-					},
-					children: [/* @__PURE__ */ jsxs("label", {
-						style: {
-							display: "grid",
-							gap: 4
-						},
-						children: [/* @__PURE__ */ jsx("span", {
-							style: labelStyle,
-							children: "icon (emoji)"
-						}), /* @__PURE__ */ jsx("input", {
-							style: {
-								...inputStyle,
-								fontSize: 20
-							},
-							value: f.icon,
-							onChange: (e) => set({ icon: [...e.currentTarget.value][0] ?? "" }),
-							placeholder: "🍕"
+					className: "lab-scene-studio-fields",
+					children: [/* @__PURE__ */ jsxs("fieldset", {
+						className: "lab-scene-studio-group",
+						children: [/* @__PURE__ */ jsx("legend", {
+							className: "lab-scene-studio-label",
+							children: "Object"
+						}), /* @__PURE__ */ jsxs("div", {
+							className: "lab-scene-studio-icons",
+							"aria-label": "Suggested objects",
+							children: [ICON_CHOICES.map((icon) => /* @__PURE__ */ jsx(Button, {
+								type: "button",
+								size: "icon-sm",
+								variant: f.icon === icon ? "secondary" : "outline",
+								"aria-label": `Use ${icon}`,
+								"aria-pressed": f.icon === icon,
+								onClick: () => set({ icon }),
+								children: icon
+							}, icon)), /* @__PURE__ */ jsxs("label", {
+								className: "lab-scene-studio-custom-icon",
+								children: [/* @__PURE__ */ jsx("span", { children: "Other" }), /* @__PURE__ */ jsx(Input, {
+									"aria-label": "Custom emoji",
+									value: f.icon,
+									onChange: (e) => set({ icon: e.currentTarget.value }),
+									placeholder: "🍩"
+								})]
+							})]
 						})]
 					}), f.variant === "icons" && /* @__PURE__ */ jsxs("label", {
-						style: {
-							display: "grid",
-							gap: 4
-						},
+						className: "lab-scene-studio-field",
 						children: [/* @__PURE__ */ jsx("span", {
-							style: labelStyle,
-							children: "how many"
-						}), /* @__PURE__ */ jsx("input", {
-							style: inputStyle,
+							className: "lab-scene-studio-label",
+							children: "Number of slots"
+						}), /* @__PURE__ */ jsx(Input, {
+							className: "lab-scene-studio-input",
 							type: "number",
 							min: 1,
 							max: 12,
@@ -245,66 +204,47 @@ function SceneStudio({ spec, onChange }) {
 					})]
 				}),
 				f.variant === "shape" && /* @__PURE__ */ jsxs("div", {
-					style: {
-						display: "grid",
-						gridTemplateColumns: "1fr 1fr",
-						gap: 10
-					},
+					className: "lab-scene-studio-fields",
 					children: [/* @__PURE__ */ jsxs("label", {
-						style: {
-							display: "grid",
-							gap: 4
-						},
+						className: "lab-scene-studio-field",
 						children: [/* @__PURE__ */ jsx("span", {
-							style: labelStyle,
-							children: "shape"
+							className: "lab-scene-studio-label",
+							children: "Container"
 						}), /* @__PURE__ */ jsxs("select", {
-							style: inputStyle,
+							className: "lab-scene-studio-input",
 							value: f.shape,
 							onChange: (e) => set({ shape: e.currentTarget.value }),
 							children: [
 								/* @__PURE__ */ jsx("option", {
 									value: "box",
-									children: "box"
+									children: "Box"
 								}),
 								/* @__PURE__ */ jsx("option", {
 									value: "cup",
-									children: "cup"
+									children: "Cup"
 								}),
 								/* @__PURE__ */ jsx("option", {
 									value: "circle",
-									children: "circle (pie)"
+									children: "Circle"
 								})
 							]
 						})]
 					}), /* @__PURE__ */ jsxs("label", {
-						style: {
-							display: "grid",
-							gap: 4
-						},
+						className: "lab-scene-studio-field",
 						children: [/* @__PURE__ */ jsx("span", {
-							style: labelStyle,
-							children: "colour"
+							className: "lab-scene-studio-label",
+							children: "Colour"
 						}), /* @__PURE__ */ jsxs("span", {
-							style: {
-								display: "flex",
-								gap: 6,
-								alignItems: "center"
-							},
-							children: [/* @__PURE__ */ jsx("input", {
+							className: "lab-scene-studio-color",
+							children: [/* @__PURE__ */ jsx(Input, {
 								id: uid,
+								"aria-label": "Scene colour picker",
 								type: "color",
 								value: /^#/.test(f.color) ? f.color : "#7c83ff",
-								onChange: (e) => set({ color: e.currentTarget.value }),
-								style: {
-									width: 34,
-									height: 34,
-									padding: 0,
-									border: "none",
-									background: "none"
-								}
-							}), /* @__PURE__ */ jsx("input", {
-								style: inputStyle,
+								onChange: (e) => set({ color: e.currentTarget.value })
+							}), /* @__PURE__ */ jsx(Input, {
+								className: "lab-scene-studio-input",
+								"aria-label": "Scene colour value",
 								value: f.color,
 								onChange: (e) => set({ color: e.currentTarget.value }),
 								placeholder: "#7c83ff"
@@ -314,22 +254,21 @@ function SceneStudio({ spec, onChange }) {
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "grid",
-				justifyItems: "center",
-				gap: 6
-			},
-			children: [/* @__PURE__ */ jsx("span", {
-				style: labelStyle,
-				children: "preview"
-			}), /* @__PURE__ */ jsx("div", {
-				style: {
-					minHeight: 150,
-					display: "grid",
-					placeItems: "center"
-				},
-				children: preview
-			})]
+			className: "lab-scene-studio-preview",
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "lab-scene-studio-label",
+					children: "Live preview"
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: "lab-scene-studio-preview-stage",
+					children: preview
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "lab-scene-studio-preview-note",
+					children: f.variant === "count" ? "Example with 6 objects" : "Example at 60% fill"
+				})
+			]
 		})]
 	});
 }

package/dist/kit/scenes.d.mts

@@ -1,6 +1,5 @@
 import { GuessTone } from "./vessel.mjs";
 import { ReactNode } from "react";
-
 //#region src/kit/scenes.d.ts
 interface QuantityInput {
   /** 0..1 fill level (level scenes). */