@classytic/labs 0.2.0 → 0.3.0

package/dist/kit/scale.mjs

@@ -1,7 +1,7 @@
 'use client';
 
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCoords } from "@classytic/stage";
+import { fmt, useCoords } from "@classytic/stage";
 
 //#region src/kit/scale.tsx
 const GRAD = "url(#stage-grad-metal)";
@@ -20,7 +20,10 @@ function barPath(x1, y1, x2, y2, w) {
 }
 function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced }) {
 	const c = useCoords();
-	const P = (v) => c.toPx(v.x, v.y);
+	const P = (v) => {
+		const [x, y] = c.toPx(v.x, v.y);
+		return [fmt(x), fmt(y)];
+	};
 	const [pivx, pivy] = P(pivot);
 	const [bax, bay] = P(beamA);
 	const [bbx, bby] = P(beamB);
@@ -28,7 +31,7 @@ function ScaleFrame({ pivot, beamA, beamB, trayLC, trayRC, baseY, panR, balanced
 		x: pivot.x,
 		y: baseY
 	});
-	const beamAngle = Math.atan2(bby - bay, bbx - bax) * 180 / Math.PI;
+	const beamAngle = fmt(Math.atan2(bby - bay, bbx - bax) * 180 / Math.PI);
 	const beamLen = Math.hypot(bbx - bax, bby - bay);
 	const rxPan = c.sx(panR);
 	const beamH = 13;

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"