@classytic/stage 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Classytic
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,65 @@
+# @classytic/stage
+
+**Domain‑neutral visual primitive engine for the web.** Declarative SVG diagram/math
+primitives, draggable handles, a math↔pixel coordinate system, theming, a parametric
+asset/glyph kit, a serializable `SceneDoc` graph (resolver + command/undo), and a
+`LessonDoc` sequence engine. Reactive, web‑native, SSR‑safe, and agent‑drivable — the
+render foundation under [`@classytic/labs`](https://github.com/classytic/labs).
+
+```bash
+npm i @classytic/stage react react-dom
+```
+
+## Import deliberately (subpaths)
+
+Everything is also re‑exported from the root for convenience, but prefer subpaths so
+your bundle pulls only what it uses (ESM, per‑file emit; `sideEffects` are scoped to
+`**/*.css` + `**/assets/**`, so JS tree‑shakes while styles/assets are preserved):
+
+| Subpath | What's in it |
+|---|---|
+| `@classytic/stage` | the curated root barrel (everything) |
+| `@classytic/stage/view` | `<Stage>` SVG root, `useElementSize` |
+| `@classytic/stage/primitives` | `Dot` `Segment` `Line` `Ray` `Vector` `Circle` `Polygon` `Path` `Label` `Tex` `Grid` `Axes` `Plot` `CanvasLayer` |
+| `@classytic/stage/interaction` | `MovableDot`, `useDraggable`, `useScreenToMath`, `hitTest` |
+| `@classytic/stage/core` | `createCoords`/`fmt`, `vec`/`mat`, contexts, `useFrameLoop` clock, control surface, `useLearner` |
+| `@classytic/stage/scene` | `SceneDoc` types, `resolve`, `applyCommand`/`inverse`, `parse`/`serialize`/`migrate`, `SceneStore`, `Scene`, the asset registry |
+| `@classytic/stage/builder` | `Editor`, `SceneBuilder`, `Palette`, construction `*_TOOLS` |
+| `@classytic/stage/assets` | `StageAssetDefs` + the glyph kit (`XBlockGlyph`, `WeightGlyph`, `BucketGlyph`, `HangerHook`) |
+| `@classytic/stage/math` | dependency‑free expression engine (`compileExpr`, `differentiate`, `toLatex`…) |
+| `@classytic/stage/lesson` | `LessonProvider`, `useLessonProgress`, `LessonStepScope` (sequence + gating + progress) |
+| `@classytic/stage/styles.css` | theme tokens + control‑kit CSS (import once in global CSS) |
+
+## Quick start
+
+```tsx
+import { Stage } from '@classytic/stage/view';
+import { Axes, Vector } from '@classytic/stage/primitives';
+import { MovableDot } from '@classytic/stage/interaction';
+
+export function Demo() {
+  const [tip, setTip] = useState({ x: 3, y: 2 });
+  return (
+    <Stage view={{ xMin: -1, xMax: 6, yMin: -1, yMax: 5 }} height={320}>
+      <Axes labels />
+      <Vector tail={{ x: 0, y: 0 }} tip={tip} />
+      <MovableDot value={tip} onMove={setTip} />
+    </Stage>
+  );
+}
+```
+
+## Design principles
+
+- **SVG‑first** for crisp, accessible, themeable teaching figures; `CanvasLayer`
+  (zero‑dep Canvas2D) only for particle‑density (rain, heatmaps). No WebGL/Pixi
+  dependency until a lab measurably needs shaders.
+- **`fmt()` rounds emitted coordinates** for SSR determinism (server and client agree).
+- **Theming** via `--stage-*` tokens that bind to host shadcn tokens, with a deliberate
+  dark canvas surface.
+- **Pure engine** — all domain assets/presets live in `@classytic/labs`, built on this
+  kit. Stage ships no domain widgets.
+
+## License
+
+MIT

package/dist/assets/index.d.mts

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

package/dist/assets/index.mjs

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

package/dist/assets/kit/glyphs.d.mts

@@ -0,0 +1,61 @@
+import { ReactNode } from "react";
+
+//#region src/assets/kit/glyphs.d.ts
+interface GlyphBox {
+  cx: number;
+  top: number;
+  wpx: number;
+  hpx: number;
+  label: string;
+}
+/** The UNKNOWN — a crisp rounded tile with an italic label (e.g. "2x"). */
+declare function XBlockGlyph({
+  cx,
+  top,
+  wpx,
+  hpx,
+  label
+}: GlyphBox): ReactNode;
+/** A container of UNKNOWN amount — a pail, brand-colored (it IS an unknown, like
+ *  the tile), labelled "?" until revealed. Built with real form: one light
+ *  direction (top-left), 2-tone shading for volume (gradient body + a soft
+ *  right-side shadow + a left specular streak), a rim with visible thickness
+ *  (outer lip + dark opening), and a contrasting handle with pivots. No flat
+ *  fill, no stray band line. */
+declare function BucketGlyph({
+  cx,
+  top,
+  wpx,
+  hpx,
+  label
+}: GlyphBox): ReactNode;
+interface HangerHookProps {
+  /** Attach point on the beam/arm (pixels). */
+  topX: number;
+  topY: number;
+  /** Attach point on the load — the top-centre of the glyph it carries (pixels). */
+  botX: number;
+  botY: number;
+}
+/**
+ * A suspension: a thin eye on the beam, a taut thread, and an S-hook that grips
+ * the load — the realistic way a weight hangs from an arm (replaces the old
+ * bare "line + dot"). Pure pixel glyph: callers project math→px first. Layered
+ * edge/metal/sheen strokes match the beam's metallic read.
+ */
+declare function HangerHook({
+  topX,
+  topY,
+  botX,
+  botY
+}: HangerHookProps): ReactNode;
+/** A KNOWN value — a clean flat coin with the number. */
+declare function WeightGlyph({
+  cx,
+  top,
+  wpx,
+  hpx,
+  label
+}: GlyphBox): ReactNode;
+//#endregion
+export { BucketGlyph, GlyphBox, HangerHook, HangerHookProps, WeightGlyph, XBlockGlyph };

package/dist/assets/kit/glyphs.mjs

@@ -0,0 +1,256 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/assets/kit/glyphs.tsx
+/** The UNKNOWN — a crisp rounded tile with an italic label (e.g. "2x"). */
+function XBlockGlyph({ cx, top, wpx, hpx, label }) {
+	const s = Math.min(wpx, hpx);
+	const x0 = cx - s / 2;
+	const rx = s * .24;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("ellipse", {
+			cx,
+			cy: top + s,
+			rx: s * .52,
+			ry: s * .08,
+			fill: "color-mix(in oklab, black 60%, transparent)",
+			opacity: .14
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: x0,
+			y: top,
+			width: s,
+			height: s,
+			rx,
+			fill: "url(#stage-grad-weight)",
+			stroke: "color-mix(in oklab, var(--stage-weight) 65%, black)",
+			strokeWidth: 1
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: x0 + s * .22,
+			y1: top + s * .2,
+			x2: x0 + s * .78,
+			y2: top + s * .2,
+			stroke: "color-mix(in oklab, var(--stage-sheen) 40%, transparent)",
+			strokeWidth: 1.5,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("text", {
+			x: cx,
+			y: top + s * .56,
+			fill: "var(--stage-fg)",
+			fontSize: s * .42,
+			fontWeight: 700,
+			fontStyle: "italic",
+			textAnchor: "middle",
+			dominantBaseline: "central",
+			style: { pointerEvents: "none" },
+			children: label
+		})
+	] });
+}
+/** A container of UNKNOWN amount — a pail, brand-colored (it IS an unknown, like
+*  the tile), labelled "?" until revealed. Built with real form: one light
+*  direction (top-left), 2-tone shading for volume (gradient body + a soft
+*  right-side shadow + a left specular streak), a rim with visible thickness
+*  (outer lip + dark opening), and a contrasting handle with pivots. No flat
+*  fill, no stray band line. */
+function BucketGlyph({ cx, top, wpx, hpx, label }) {
+	const s = Math.min(wpx, hpx);
+	const lipRy = s * .095;
+	const topY = top + s * .18;
+	const botY = top + s * .99;
+	const topHalf = s * .44;
+	const botHalf = s * .3;
+	const r = s * .06;
+	const edge = "color-mix(in oklab, var(--stage-weight) 60%, black)";
+	const shadow = "color-mix(in oklab, var(--stage-weight) 55%, black)";
+	const dark = "color-mix(in oklab, var(--stage-weight) 42%, black)";
+	const body = `M ${cx - topHalf} ${topY} L ${cx + topHalf} ${topY} L ${cx + botHalf} ${botY - r} Q ${cx + botHalf} ${botY} ${cx + botHalf - r} ${botY} L ${cx - botHalf + r} ${botY} Q ${cx - botHalf} ${botY} ${cx - botHalf} ${botY - r} Z`;
+	const shade = `M ${cx + topHalf * .2} ${topY} L ${cx + topHalf} ${topY} L ${cx + botHalf} ${botY - r} Q ${cx + botHalf} ${botY} ${cx + botHalf - r} ${botY} L ${cx + botHalf * .28} ${botY} Z`;
+	const handleR = s * .42;
+	const hx = topHalf * .66;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("ellipse", {
+			cx,
+			cy: botY + s * .035,
+			rx: botHalf * 1.18,
+			ry: s * .05,
+			fill: "color-mix(in oklab, black 60%, transparent)",
+			opacity: .16
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M ${cx - hx} ${topY} A ${handleR} ${handleR} 0 0 1 ${cx + hx} ${topY}`,
+			fill: "none",
+			stroke: "color-mix(in oklab, var(--stage-metal) 70%, black)",
+			strokeWidth: Math.max(2, s * .05),
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: body,
+			fill: "url(#stage-grad-weight)",
+			stroke: edge,
+			strokeWidth: 1.25,
+			strokeLinejoin: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: shade,
+			fill: shadow,
+			opacity: .28
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M ${cx - topHalf * .66} ${topY + lipRy * 1.6} L ${cx - botHalf * .62} ${botY - r * 1.4}`,
+			fill: "none",
+			stroke: "color-mix(in oklab, var(--stage-sheen) 55%, transparent)",
+			strokeWidth: s * .05,
+			strokeLinecap: "round",
+			opacity: .5
+		}),
+		/* @__PURE__ */ jsx("ellipse", {
+			cx,
+			cy: topY,
+			rx: topHalf,
+			ry: lipRy,
+			fill: "url(#stage-grad-weight)",
+			stroke: edge,
+			strokeWidth: 1.25
+		}),
+		/* @__PURE__ */ jsx("ellipse", {
+			cx,
+			cy: topY + lipRy * .18,
+			rx: topHalf * .82,
+			ry: lipRy * .74,
+			fill: dark
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: cx - hx,
+			cy: topY,
+			r: s * .035,
+			fill: "color-mix(in oklab, var(--stage-metal) 70%, black)"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: cx + hx,
+			cy: topY,
+			r: s * .035,
+			fill: "color-mix(in oklab, var(--stage-metal) 70%, black)"
+		}),
+		/* @__PURE__ */ jsx("text", {
+			x: cx,
+			y: topY + (botY - topY) * .62,
+			fill: "var(--stage-sheen)",
+			fontSize: s * .42,
+			fontWeight: 800,
+			textAnchor: "middle",
+			dominantBaseline: "central",
+			style: {
+				paintOrder: "stroke",
+				stroke: dark,
+				strokeWidth: s * .03,
+				strokeLinejoin: "round",
+				pointerEvents: "none"
+			},
+			children: label
+		})
+	] });
+}
+/**
+* A suspension: a thin eye on the beam, a taut thread, and an S-hook that grips
+* the load — the realistic way a weight hangs from an arm (replaces the old
+* bare "line + dot"). Pure pixel glyph: callers project math→px first. Layered
+* edge/metal/sheen strokes match the beam's metallic read.
+*/
+function HangerHook({ topX, topY, botX, botY }) {
+	const metal = "var(--stage-metal)";
+	const edge = "color-mix(in oklab, var(--stage-metal) 55%, black)";
+	const sheen = "color-mix(in oklab, var(--stage-sheen) 50%, transparent)";
+	const k = 3.2;
+	const hookTop = botY - k * 3.4;
+	const span = botY - hookTop;
+	const s = `M ${botX} ${hookTop} C ${botX - k} ${hookTop + span * .2} ${botX - k} ${hookTop + span * .46} ${botX} ${hookTop + span * .52} C ${botX + k} ${hookTop + span * .6} ${botX + k} ${hookTop + span * .86} ${botX} ${botY}`;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("circle", {
+			cx: topX,
+			cy: topY,
+			r: 1.7,
+			fill: "none",
+			stroke: metal,
+			strokeWidth: 1.2
+		}),
+		/* @__PURE__ */ jsx("line", {
+			x1: topX,
+			y1: topY + 1.7,
+			x2: botX,
+			y2: hookTop,
+			stroke: metal,
+			strokeWidth: 1.1,
+			opacity: .75
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: s,
+			fill: "none",
+			stroke: edge,
+			strokeWidth: 2.6,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: s,
+			fill: "none",
+			stroke: metal,
+			strokeWidth: 1.6,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: s,
+			fill: "none",
+			stroke: sheen,
+			strokeWidth: .6,
+			strokeLinecap: "round",
+			transform: "translate(-0.5,0)"
+		})
+	] });
+}
+/** A KNOWN value — a clean flat coin with the number. */
+function WeightGlyph({ cx, top, wpx, hpx, label }) {
+	const r = Math.min(wpx, hpx) / 2;
+	const cy = top + r;
+	return /* @__PURE__ */ jsxs("g", { children: [
+		/* @__PURE__ */ jsx("ellipse", {
+			cx,
+			cy: cy + r * .96,
+			rx: r,
+			ry: r * .18,
+			fill: "color-mix(in oklab, black 60%, transparent)",
+			opacity: .14
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx,
+			cy,
+			r,
+			fill: "url(#stage-grad-weight-2)",
+			stroke: "color-mix(in oklab, var(--stage-weight-2) 62%, black)",
+			strokeWidth: 1
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: `M${cx - r * .6},${cy - r * .42} A${r * .72},${r * .72} 0 0 1 ${cx + r * .6},${cy - r * .42}`,
+			fill: "none",
+			stroke: "color-mix(in oklab, var(--stage-sheen) 38%, transparent)",
+			strokeWidth: 1.5,
+			strokeLinecap: "round"
+		}),
+		/* @__PURE__ */ jsx("text", {
+			x: cx,
+			y: cy + r * .04,
+			fill: "var(--stage-fg)",
+			fontSize: r * .8,
+			fontWeight: 700,
+			textAnchor: "middle",
+			dominantBaseline: "central",
+			style: { pointerEvents: "none" },
+			children: label
+		})
+	] });
+}
+
+//#endregion
+export { BucketGlyph, HangerHook, WeightGlyph, XBlockGlyph };

package/dist/assets/kit/index.d.mts

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

package/dist/assets/kit/index.mjs

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

package/dist/assets/kit/svg-defs.d.mts

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+
+//#region src/assets/kit/svg-defs.d.ts
+declare function StageAssetDefs(): ReactNode;
+//#endregion
+export { StageAssetDefs };

package/dist/assets/kit/svg-defs.mjs

@@ -0,0 +1,137 @@
+'use client';
+
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/assets/kit/svg-defs.tsx
+function StageAssetDefs() {
+	return /* @__PURE__ */ jsxs("defs", { children: [
+		/* @__PURE__ */ jsxs("linearGradient", {
+			id: "stage-grad-metal",
+			x1: "0",
+			y1: "0",
+			x2: "0",
+			y2: "1",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "0",
+				stopColor: "color-mix(in oklab, var(--stage-metal) 85%, white)"
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "1",
+				stopColor: "var(--stage-metal)"
+			})]
+		}),
+		/* @__PURE__ */ jsxs("linearGradient", {
+			id: "stage-grad-weight",
+			x1: "0",
+			y1: "0",
+			x2: "0",
+			y2: "1",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "0",
+				stopColor: "color-mix(in oklab, var(--stage-weight) 78%, white)"
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "1",
+				stopColor: "var(--stage-weight)"
+			})]
+		}),
+		/* @__PURE__ */ jsxs("linearGradient", {
+			id: "stage-grad-weight-2",
+			x1: "0",
+			y1: "0",
+			x2: "0",
+			y2: "1",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "0",
+				stopColor: "color-mix(in oklab, var(--stage-weight-2) 78%, white)"
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "1",
+				stopColor: "var(--stage-weight-2)"
+			})]
+		}),
+		/* @__PURE__ */ jsx("filter", {
+			id: "stage-soft-shadow",
+			x: "-30%",
+			y: "-30%",
+			width: "160%",
+			height: "160%",
+			children: /* @__PURE__ */ jsx("feDropShadow", {
+				dx: "0",
+				dy: "1.5",
+				stdDeviation: "1.8",
+				floodColor: "#000",
+				floodOpacity: "0.28"
+			})
+		}),
+		/* @__PURE__ */ jsxs("filter", {
+			id: "stage-glow",
+			x: "-60%",
+			y: "-60%",
+			width: "220%",
+			height: "220%",
+			children: [/* @__PURE__ */ jsx("feGaussianBlur", {
+				in: "SourceGraphic",
+				stdDeviation: "2.4",
+				result: "b"
+			}), /* @__PURE__ */ jsxs("feMerge", { children: [/* @__PURE__ */ jsx("feMergeNode", { in: "b" }), /* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })] })]
+		}),
+		/* @__PURE__ */ jsxs("filter", {
+			id: "stage-bloom",
+			x: "-120%",
+			y: "-120%",
+			width: "340%",
+			height: "340%",
+			children: [
+				/* @__PURE__ */ jsx("feGaussianBlur", {
+					in: "SourceGraphic",
+					stdDeviation: "6",
+					result: "b1"
+				}),
+				/* @__PURE__ */ jsx("feGaussianBlur", {
+					in: "SourceGraphic",
+					stdDeviation: "2.5",
+					result: "b2"
+				}),
+				/* @__PURE__ */ jsxs("feMerge", { children: [
+					/* @__PURE__ */ jsx("feMergeNode", { in: "b1" }),
+					/* @__PURE__ */ jsx("feMergeNode", { in: "b2" }),
+					/* @__PURE__ */ jsx("feMergeNode", { in: "SourceGraphic" })
+				] })
+			]
+		}),
+		/* @__PURE__ */ jsxs("radialGradient", {
+			id: "stage-grad-thermal",
+			cx: "0.5",
+			cy: "0.5",
+			r: "0.5",
+			children: [
+				/* @__PURE__ */ jsx("stop", {
+					offset: "0",
+					stopColor: "color-mix(in oklab, white 70%, var(--stage-warn))"
+				}),
+				/* @__PURE__ */ jsx("stop", {
+					offset: "0.45",
+					stopColor: "var(--stage-warn)"
+				}),
+				/* @__PURE__ */ jsx("stop", {
+					offset: "1",
+					stopColor: "color-mix(in oklab, var(--stage-warn) 40%, transparent)"
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs("radialGradient", {
+			id: "stage-grad-halo",
+			cx: "0.5",
+			cy: "0.5",
+			r: "0.5",
+			children: [/* @__PURE__ */ jsx("stop", {
+				offset: "0",
+				stopColor: "color-mix(in oklab, var(--stage-accent) 60%, transparent)"
+			}), /* @__PURE__ */ jsx("stop", {
+				offset: "1",
+				stopColor: "color-mix(in oklab, var(--stage-accent) 0%, transparent)"
+			})]
+		})
+	] });
+}
+
+//#endregion
+export { StageAssetDefs };

package/dist/builder/Palette.d.mts

@@ -0,0 +1,30 @@
+import { Tool } from "./tools.mjs";
+import { ReactNode } from "react";
+
+//#region src/builder/Palette.d.ts
+interface PaletteProps {
+  tools: Tool[];
+  activeTool: string;
+  onSelect: (id: string) => void;
+  onUndo: () => void;
+  onRedo: () => void;
+  canUndo: boolean;
+  canRedo: boolean;
+  onClear: () => void;
+  onSave?: () => void;
+  hint: string;
+}
+declare function Palette({
+  tools,
+  activeTool,
+  onSelect,
+  onUndo,
+  onRedo,
+  canUndo,
+  canRedo,
+  onClear,
+  onSave,
+  hint
+}: PaletteProps): ReactNode;
+//#endregion
+export { Palette, PaletteProps };