@classytic/stage 0.1.0 → 0.3.0

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@classytic/stage",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Domain-neutral visual primitive engine for the web. Declarative SVG diagram/math primitives, draggable handles, a math↔pixel coordinate system, a motion core + energy effect defs, theming, pure sim cores, and a small kit of neutral glyph primitives. Reactive, web-native, agent-drivable. The render foundation under @classytic/labs (subject-matter glyphs live there); canvas + 3D subpaths later.",
   "author": "Classytic",
   "license": "MIT",
   "type": "module",
   "sideEffects": [
-    "**/*.css",
-    "**/assets/**"
+    "**/*.css"
   ],
   "engines": {
     "node": ">=22"
@@ -52,6 +51,10 @@
       "types": "./dist/math/index.d.mts",
       "default": "./dist/math/index.mjs"
     },
+    "./logic": {
+      "types": "./dist/logic/index.d.mts",
+      "default": "./dist/logic/index.mjs"
+    },
     "./sim": {
       "types": "./dist/sim/index.d.mts",
       "default": "./dist/sim/index.mjs"
@@ -60,6 +63,10 @@
       "types": "./dist/field/index.d.mts",
       "default": "./dist/field/index.mjs"
     },
+    "./circuit": {
+      "types": "./dist/circuit/index.d.mts",
+      "default": "./dist/circuit/index.mjs"
+    },
     "./thermo": {
       "types": "./dist/thermo/index.d.mts",
       "default": "./dist/thermo/index.mjs"
@@ -68,9 +75,13 @@
       "types": "./dist/chem/index.d.mts",
       "default": "./dist/chem/index.mjs"
     },
-    "./lesson": {
-      "types": "./dist/lesson/index.d.mts",
-      "default": "./dist/lesson/index.mjs"
+    "./finance": {
+      "types": "./dist/finance/index.d.mts",
+      "default": "./dist/finance/index.mjs"
+    },
+    "./steps": {
+      "types": "./dist/steps/index.d.mts",
+      "default": "./dist/steps/index.mjs"
     },
     "./styles.css": "./styles.css",
     "./package.json": "./package.json"
@@ -84,21 +95,6 @@
     "LICENSE",
     "README.md"
   ],
-  "scripts": {
-    "build": "tsdown",
-    "dev": "tsdown --watch",
-    "typecheck": "tsc --noEmit",
-    "sync": "node scripts/sync-stage.mjs",
-    "pretest": "npm run build",
-    "test": "vitest run",
-    "verify": "npm run typecheck && npm test",
-    "push": "classytic-push",
-    "changeset": "changeset",
-    "version-packages": "changeset version",
-    "release": "npm run build && changeset publish",
-    "prepublishOnly": "npm run typecheck && npm run build && npm test",
-    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
-  },
   "peerDependencies": {
     "katex": ">=0.16",
     "react": ">=19",
@@ -113,12 +109,11 @@
     "@changesets/cli": "^2.27.9",
     "@classytic/dev-tools": "^0.2.0",
     "@testing-library/react": "^16.3.2",
-    "@types/katex": "^0.16.7",
     "@types/node": "^22.0.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
     "happy-dom": "^20.0.0",
-    "katex": "^0.16.11",
+    "katex": "^0.18.7",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "tsdown": "^0.22.0",
@@ -137,5 +132,22 @@
     "math",
     "engine",
     "primitives"
-  ]
-}
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "sync": "node scripts/sync-stage.mjs",
+    "pretest": "npm run build",
+    "test": "vitest run",
+    "verify": "npm run typecheck && npm test",
+    "package:check": "node scripts/package-check.mjs",
+    "package:consumer": "node scripts/packed-consumer-check.mjs",
+    "verify:release": "npm run typecheck && npm test && npm run package:check && npm run package:consumer",
+    "push": "classytic-push",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "release": "npm run build && changeset publish",
+    "clean": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\""
+  }
+}

package/styles.css

@@ -30,7 +30,7 @@
   --stage-accent-2: var(--brand-2, oklch(0.62 0.18 48));
   --stage-good: var(--success, oklch(0.58 0.16 150));
   --stage-warn: var(--warning, oklch(0.68 0.15 72));
-  --stage-danger: var(--destructive, oklch(0.62 0.24 25));
+  --stage-danger: var(--destructive, oklch(0.58 0.19 25));
 
   /* Asset kit. metal/pan are domain greys → a mid grey that reads on white.
      The unknown (weight) tracks the brand. --stage-sheen is the top-edge
@@ -41,6 +41,9 @@
   --stage-weight-2: var(--brand-2, oklch(0.62 0.18 48));
   --stage-sheen: oklch(1 0 0);
   --stage-liquid: oklch(0.6 0.13 220 / 0.55);
+  /* Discrete "objects" a learner drops into a vessel (marbles, beads). A calm rose
+     so a pile reads clearly on the light canvas without shouting. */
+  --stage-object: oklch(0.64 0.15 352);
   --stage-handle-ring: color-mix(in oklab, var(--primary, oklch(0.59 0.22 261)) 40%, transparent);
 
   /* Electronics — semantic aliases so circuit symbols never hardcode a colour.
@@ -49,6 +52,19 @@
   --stage-wire: var(--stage-metal);
   --stage-live: var(--stage-good);
   --stage-charge: var(--stage-accent);
+
+  /* Categorical series palette: 8 distinct, theme-aware hues for group / series
+     colours (K-map loops, distributions, selection groups, arrangement letters).
+     Labs import these via kit/palette instead of hardcoding hex arrays that
+     ignore dark mode. cat-1/2/3 align with accent / accent-2 / good. */
+  --stage-cat-1: oklch(0.59 0.17 261);
+  --stage-cat-2: oklch(0.63 0.15 45);
+  --stage-cat-3: oklch(0.58 0.15 150);
+  --stage-cat-4: oklch(0.55 0.17 300);
+  --stage-cat-5: oklch(0.62 0.12 200);
+  --stage-cat-6: oklch(0.60 0.18 18);
+  --stage-cat-7: oklch(0.70 0.14 92);
+  --stage-cat-8: oklch(0.60 0.17 332);
 }
 
 .dark {
@@ -67,4 +83,128 @@
   --stage-pan: oklch(0.83 0.02 255);
   --stage-weight-2: var(--brand-2, oklch(0.74 0.15 50));
   --stage-liquid: oklch(0.7 0.13 220 / 0.6);
+  --stage-object: oklch(0.72 0.16 352);
+
+  /* Brighter categorical hues for the dark card surface. */
+  --stage-cat-1: oklch(0.72 0.17 261);
+  --stage-cat-2: oklch(0.78 0.15 52);
+  --stage-cat-3: oklch(0.72 0.17 150);
+  --stage-cat-4: oklch(0.71 0.18 300);
+  --stage-cat-5: oklch(0.76 0.12 200);
+  --stage-cat-6: oklch(0.73 0.18 22);
+  --stage-cat-7: oklch(0.83 0.16 92);
+  --stage-cat-8: oklch(0.75 0.18 332);
+}
+
+
+/* ── Interaction affordance ──────────────────────────────────────────────────
+   First-touch invitation on MovableDot: a slow sonar echo of the affordance
+   ring until the learner interacts once. Pure CSS (no rAF), GPU-composited,
+   hidden under prefers-reduced-motion. */
+.stage-nudge {
+  transform-box: fill-box;
+  transform-origin: center;
+  animation: stage-nudge 2.4s ease-out infinite;
+}
+@keyframes stage-nudge {
+  0%   { transform: scale(1);    opacity: .5; }
+  60%  { transform: scale(1.8);  opacity: 0; }
+  100% { transform: scale(1.8);  opacity: 0; }
+}
+@media (prefers-reduced-motion: reduce) { .stage-nudge { display: none; } }
+
+/* Shared runtime and authoring chrome. Geometry remains component-driven; these
+   classes keep static layout, focus and disabled states consistent for hosts. */
+.stage-root { width: 100%; }
+.stage-canvas {
+  display: block;
+  border: 1px solid var(--stage-grid);
+  border-radius: 12px;
+  user-select: none;
+  touch-action: none;
+  /* Before the ResizeObserver has measured anything, <Stage> renders width="640" so children
+     appear on first paint instead of a blank box. On a 360px phone that first paint is 280px
+     wider than the screen, so the page scrolls sideways and then jumps when JS mounts. The
+     viewBox makes the SVG scalable, so bounding it to the container costs nothing and removes
+     both the overflow and the shift. Post-measurement the width is already <= the container,
+     so neither rule binds and rendering is unchanged. */
+  max-width: 100%;
+  height: auto;
+}
+.stage-scene { position: relative; }
+.stage-scene__play-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 12px;
+  background: color-mix(in oklab, var(--stage-bg) 38%, transparent);
+  cursor: pointer;
+}
+.stage-scene__play-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 26px;
+  border-radius: 999px;
+  color: var(--primary-foreground, #fff);
+  background: var(--stage-accent);
+  box-shadow: 0 6px 18px rgb(0 0 0 / 28%);
+  font-size: 16px;
+  font-weight: 800;
+}
+.stage-scene__pause {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 34px;
+  height: 34px;
+  border: 1px solid var(--stage-grid);
+  border-radius: 999px;
+  color: var(--stage-fg);
+  background: color-mix(in oklab, var(--stage-bg) 80%, transparent);
+  cursor: pointer;
+  font-size: 13px;
+}
+.stage-builder { display: flex; flex-direction: column; gap: 10px; }
+.stage-palette__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
+.stage-palette__divider { align-self: stretch; width: 1px; margin: 0 4px; background: var(--stage-muted); }
+.stage-tool-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 6px 10px;
+  border: 1px solid var(--stage-muted);
+  border-radius: 8px;
+  color: var(--stage-fg);
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  font-weight: 600;
+}
+.stage-tool-button[aria-pressed="true"] { border-color: var(--stage-accent); color: var(--primary-foreground, #fff); background: var(--stage-accent); }
+.stage-tool-button:disabled { cursor: not-allowed; opacity: .4; }
+.stage-tool-button--save { border-color: var(--stage-good); color: var(--stage-good); }
+.stage-tool-button:focus-visible,
+.stage-builder__field:focus-visible,
+.stage-scene button:focus-visible { outline: 2px solid var(--stage-accent); outline-offset: 2px; }
+.stage-palette__hint { margin: 6px 2px 0; color: var(--stage-muted); font-size: 12px; }
+.stage-builder__scalars { display: flex; flex-wrap: wrap; gap: 14px; padding: 2px; font-size: 13px; }
+.stage-builder__scalar { display: inline-flex; align-items: center; gap: 6px; }
+.stage-builder__scalar-value { min-width: 24px; font-variant-numeric: tabular-nums; }
+.stage-builder__pedagogy { padding: 6px 10px; border: 1px solid var(--stage-muted); border-radius: 8px; font-size: 13px; }
+.stage-builder__pedagogy > summary { cursor: pointer; font-weight: 600; }
+.stage-builder__pedagogy-fields { display: grid; gap: 8px; margin-top: 8px; }
+.stage-builder__field-label { display: grid; gap: 3px; }
+.stage-builder__difficulty { display: inline-flex; align-items: center; gap: 8px; }
+.stage-builder__field { width: 100%; padding: 6px 8px; border: 1px solid var(--stage-muted); border-radius: 6px; color: inherit; background: transparent; font: inherit; }
+.stage-builder__field--select { width: auto; }
+@media (max-width: 520px) {
+  .stage-palette__divider { display: none; }
+  .stage-tool-button { min-height: 44px; }
+  .stage-builder__scalar { width: 100%; }
 }

package/dist/assets/kit/index.mjs

@@ -1,4 +0,0 @@
-import { StageAssetDefs } from "./svg-defs.mjs";
-import { BucketGlyph, HangerHook, WeightGlyph, XBlockGlyph } from "./glyphs.mjs";
-
-export {  };