@classytic/stage 0.2.0 → 0.4.0

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.
@@ -54,14 +57,14 @@
      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.20 261);
-  --stage-cat-2: oklch(0.63 0.17 45);
-  --stage-cat-3: oklch(0.58 0.16 150);
-  --stage-cat-4: oklch(0.55 0.20 300);
+  --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.21 18);
-  --stage-cat-7: oklch(0.70 0.15 92);
-  --stage-cat-8: oklch(0.60 0.20 332);
+  --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 {
@@ -80,6 +83,7 @@
   --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);
@@ -91,3 +95,116 @@
   --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 {  };