@playgenx/components 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# `@playgenx/components`
+
+Default React 19 implementations for every entry in `DEFAULT_REGISTRY`. Pair with `@playgenx/registry` and the parser/validator pipeline.
+
+## Install
+
+```sh
+pnpm add @playgenx/components react@^19 react-dom@^19
+```
+
+React 19 is a peer dependency; this package does not bundle it.
+
+## What's in here
+
+11 components, each matching a name in `@playgenx/registry`:
+
+- `Button` — primary / secondary / ghost variant, disabled state, click handler.
+- `TextField` — labeled controlled-or-uncontrolled input.
+- `Slider` — clamped range input with optional caption.
+- `Chart` — bar / line / pie, hand-rolled SVG, no chart library.
+- `Container` — vertical flex wrapper with padding + gap.
+- `Code` — inline or `<pre><code>` formatting, language data-attribute.
+- `Heading` — `<h1>`..`<h6>` with size-by-level, clamped.
+- `Text` — `<p>` with weight, size, color.
+- `Stepper` — multi-step reveal with previous/current/future states.
+- `Card` — bordered + shadowed wrapper with elevation prop.
+- `List` — `<ul>` or `<ol>` from an array of arbitrary values.
+
+## Use
+
+```tsx
+import { Button, Container, Heading, Text, componentMap } from '@playgenx/components';
+import { DEFAULT_REGISTRY, findSchema } from '@playgenx/registry';
+
+function App() {
+  return (
+    <Container>
+      <Heading level={2}>Hello</Heading>
+      <Text>A short description.</Text>
+      <Button label="Continue" variant="primary" />
+    </Container>
+  );
+}
+
+// Render-time lookup:
+const HeadingC = componentMap['Heading'];
+return <HeadingC level={2}>title</HeadingC>;
+```
+
+## Determinism
+
+Components are render-only and **never** reference `Math.random`, `Date.now`, or runtime-crypto APIs. Hashing inputs (validation, storage) is fully reproducible — `<Chart kind="bar" data={...} />` renders the same SVG every time given the same data.
+
+If you mount these in an environment where a renderer may pass non-deterministic callbacks, run inside a sandboxed iframe that the LLM never controls.
+
+## Versioning
+
+This package follows PlayGenX's overall version policy (mirror `playgenx` core). A component's prop signature is part of the public contract; new optional props are non-breaking, removing/renaming is a breaking change.
+
+## License
+
+MIT — see [LICENSE](../../LICENSE).

package/dist/index.d.mts

@@ -0,0 +1,198 @@
+import * as React from "react";
+import { ComponentType } from "react";
+//#region src/Button.d.ts
+/**
+ * Headless-style wrapper over `<button>` accepting the props defined in
+ * `DEFAULT_COMPONENT_SCHEMAS.Button`. Pass `onClick` through; this
+ * implementation does NOT execute arbitrary functions (deterministic
+ * renderer constraint) so the click handler is rendered inert at mount.
+ */
+interface ButtonProps {
+  /** Visible text. Required. */
+  label: string;
+  /** Variant. Defaults to 'primary'. */
+  variant?: 'primary' | 'secondary' | 'ghost';
+  /** Disabled state. Defaults to false. */
+  disabled?: boolean;
+  /**
+   * Optional click handler. The default impl forwards to onClick if
+   * present; in a deterministic renderer pass `noEvents` instead.
+   */
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+declare function Button({ label, variant, disabled, onClick }: ButtonProps): React.JSX.Element;
+//#endregion
+//#region src/TextField.d.ts
+interface TextFieldProps {
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  disabled?: boolean;
+  /**
+   * onChange is reported as `node` in the schema (it must be a
+   * function reference, which the validator cannot statically type).
+   * We forward to React's controlled input handler.
+   */
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+/**
+ * Controlled text input. Without `value`/`onChange`, behaves as
+ * uncontrolled (uses its own state via defaultValue). When a stable
+ * (deterministic) caller wires both, the input is fully controlled.
+ */
+declare function TextField({ label, value, placeholder, disabled, onChange }: TextFieldProps): React.JSX.Element;
+//#endregion
+//#region src/Slider.d.ts
+interface SliderProps {
+  /** Lower bound, inclusive. Required. */
+  min: number;
+  /** Upper bound, inclusive. Required. */
+  max: number;
+  /** Initial / controlled value. */
+  value?: number;
+  /** Increment between stops. Defaults to 1. */
+  step?: number;
+  /** Optional caption rendered above the slider. */
+  label?: string;
+}
+/**
+ * Range input. State: internal `value` mirrors props.value if present
+ * (otherwise uncontrolled); clamps to [min, max].
+ */
+declare function Slider({ min, max, value, step, label }: SliderProps): React.JSX.Element;
+//#endregion
+//#region src/Chart.d.ts
+type ChartKind = 'bar' | 'line' | 'pie';
+/**
+ * The schema lets `data` be any ReactNode, but in practice callers
+ * pass JSON-shaped arrays. We narrow at runtime:
+ *
+ *  - bar: `{ labels: string[], values: number[] }`
+ *  - line: `{ x: number[], y: number[] }` or `{ series: { label, points: {x,y} }[] }`
+ *  - pie: `{ labels: string[], values: number[] }`
+ *
+ * Anything that doesn't fit is rendered as a `<pre>` fallback.
+ */
+interface ChartProps {
+  kind: ChartKind;
+  data: unknown;
+  title?: string;
+}
+declare function Chart({ kind, data, title }: ChartProps): React.JSX.Element;
+//#endregion
+//#region src/Container.d.ts
+interface ContainerProps {
+  padding?: string;
+  gap?: string;
+  children?: React.ReactNode;
+}
+/**
+ * Layout wrapper. Defaults to a vertical flex container with 16px
+ * padding and 12px gap when callers omit props.
+ */
+declare function Container({ padding, gap, children }: ContainerProps): React.JSX.Element;
+//#endregion
+//#region src/Code.d.ts
+interface CodeProps {
+  language?: string;
+  children?: React.ReactNode;
+}
+/**
+ * Inline code formatter. Renders children as a `<code>` element inside
+ * a styled wrapper. If `children` is a single string, it displays
+ * verbatim; for multi-line content we fall back to a `<pre>`-styled
+ * block.
+ */
+declare function Code({ language, children }: CodeProps): React.JSX.Element;
+//#endregion
+//#region src/Heading.d.ts
+interface HeadingProps {
+  /**
+   * Heading level (1..6). Out-of-range or undefined falls back to 2.
+   * The renderer should never see an `Undefined` value here unless the
+   * schema validator said optional props can be omitted.
+   */
+  level?: number;
+  color?: string;
+  children?: React.ReactNode;
+}
+declare function Heading({ level, color, children }: HeadingProps): React.JSX.Element;
+//#endregion
+//#region src/Text.d.ts
+interface TextProps {
+  weight?: 'normal' | 'bold';
+  size?: string;
+  color?: string;
+  children?: React.ReactNode;
+}
+declare function Text({ weight, size, color, children }: TextProps): React.JSX.Element;
+//#endregion
+//#region src/Stepper.d.ts
+interface Step {
+  id: string;
+  title: string;
+  body?: React.ReactNode;
+}
+interface StepperProps {
+  steps: Step[];
+  /** 0-indexed initial step. Out-of-range falls back to 0. */
+  initial?: number;
+}
+/**
+ * Multi-step reveal. State: the active index. Previous steps can be
+ * revisited; future steps are disabled until reached.
+ */
+declare function Stepper({ steps, initial }: StepperProps): React.JSX.Element;
+//#endregion
+//#region src/Card.d.ts
+interface CardProps {
+  title?: string;
+  /**
+   * Visual elevation. 0 = flat (border only), 1+ = heavier shadow.
+   * Defaults to 1.
+   */
+  elevation?: number;
+  children?: React.ReactNode;
+}
+declare function Card({ title, elevation, children }: CardProps): React.JSX.Element;
+//#endregion
+//#region src/List.d.ts
+interface ListProps {
+  /**
+   * Items to render. Schema marks this as `node`; in practice callers
+   * pass arrays of strings/numbers/ReactNodes. Anything else is
+   * rendered as a single bullet containing the value.
+   */
+  items?: unknown;
+  /** When true, renders as `<ol>` instead of `<ul>`. */
+  ordered?: boolean;
+  /** Override the wrapper element for full control. */
+  children?: React.ReactNode;
+}
+/**
+ * List of items. Renders `items` as a list of strings/numbers (the
+ * common artifact prompt output). If `children` are passed they take
+ * precedence over `items`.
+ */
+declare function List({ items, ordered, children }: ListProps): React.JSX.Element;
+//#endregion
+//#region src/registry.d.ts
+/**
+ * Map of PascalCase component name to React component. Use this when
+ * you have a renderer that walks an AST and needs to pick an
+ * implementation at runtime:
+ *
+ *   const C = componentMap[tagName];
+ *   if (C) el = <C {...props}>{children}</C>;
+ *
+ * Keys mirror `DEFAULT_REGISTRY.list()`.
+ *
+ * Type note: components vary in their props shape, so the map is
+ * typed permissively (`Record<string, ComponentType<any>>`). Each
+ * individual export above is still strictly typed.
+ */
+declare const componentMap: Record<string, ComponentType<any>>;
+type ComponentMapKey = keyof typeof componentMap;
+//#endregion
+export { Button, type ButtonProps, Card, type CardProps, Chart, type ChartKind, type ChartProps, Code, type CodeProps, ComponentMapKey, Container, type ContainerProps, Heading, type HeadingProps, List, type ListProps, Slider, type SliderProps, type Step, Stepper, type StepperProps, Text, TextField, type TextFieldProps, type TextProps, componentMap };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../src/Button.tsx","../src/TextField.tsx","../src/Slider.tsx","../src/Chart.tsx","../src/Container.tsx","../src/Code.tsx","../src/Heading.tsx","../src/Text.tsx","../src/Stepper.tsx","../src/Card.tsx","../src/List.tsx","../src/registry.ts"],"mappings":";;;;;;;;;UASiB;;EAEf;;EAEA;;EAEA;;;;;EAKA,UAAU,MAAM,kBAAkB;;iBAGpB,SACd,OACA,SACA,UACA,WACC,cAAc,MAAM,IAAI;;;UCzBV;EACf;EACA;EACA;EACA;;;;;;EAMA,WAAW,MAAM,mBAAmB;;;;;;;iBAQtB,YACd,OACA,OACA,aACA,UACA,YACC,iBAAiB,MAAM,IAAI;;;UCxBb;;EAEf;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;iBAOc,SAAS,KAAK,KAAK,OAAO,MAAU,SAAS,cAAc,MAAM,IAAI;;;KCjBzE;;;;;;;;;;;UAYK;EACf,MAAM;EACN;EACA;;iBAGc,QAAQ,MAAM,MAAM,SAAS,aAAa,MAAM,IAAI;;;UCnBnD;EACf;EACA;EACA,WAAW,MAAM;;;;;;iBAOH,YAAY,SAAS,KAAK,YAAY,iBAAiB,MAAM,IAAI;;;UCThE;EACf;EACA,WAAW,MAAM;;;;;;;;iBASH,OAAO,UAAU,YAAY,YAAY,MAAM,IAAI;;;UCXlD;;;;;;EAMf;EACA;EACA,WAAW,MAAM;;iBAYH,UAAU,OAAO,OAAO,YAAY,eAAe,MAAM,IAAI;;;UCpB5D;EACf;EACA;EACA;EACA,WAAW,MAAM;;iBAGH,OAAO,QAAmB,MAAM,OAAO,YAAY,YAAY,MAAM,IAAI;;;UCPxE;EACf;EACA;EACA,OAAO,MAAM;;UAGE;EACf,OAAO;;EAEP;;;;;;iBAOc,UAAU,OAAO,WAAW,eAAe,MAAM,IAAI;;;UChBpD;EACf;;;;;EAKA;EACA,WAAW,MAAM;;iBAGH,OAAO,OAAO,WAAe,YAAY,YAAY,MAAM,IAAI;;;UCV9D;;;;;;EAMf;;EAEA;;EAEA,WAAW,MAAM;;;;;;;iBAQH,OAAO,OAAO,SAAS,YAAY,YAAY,MAAM,IAAI;;;;;;;;;;;;;;;;;cC6B5D,cAAc,eAAe;KAc9B,+BAA+B"}

package/dist/index.mjs

@@ -0,0 +1,638 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/theme.ts
+/**
+* Shared theme tokens for @playgenx/components.
+*
+* All styling is driven from this file. There is intentionally no
+* "config" theme or runtime theme provider — these are the default
+* implementations of the registry, and a downstream host app can swap
+* them out entirely. Tokens live as constants so they're stable
+* across renders and don't allocate per call.
+*/
+const colors = {
+	bg: "#ffffff",
+	fg: "#0f172a",
+	mutedFg: "#475569",
+	border: "#e2e8f0",
+	primary: "#2563eb",
+	primaryFg: "#ffffff",
+	secondaryFg: "#0f172a",
+	ghostFg: "#1d4ed8",
+	cardBg: "#f8fafc",
+	cardBorder: "#e2e8f0",
+	codeBg: "#f1f5f9",
+	codeFg: "#0f172a",
+	sliderTrack: "#cbd5e1",
+	sliderFill: "#2563eb",
+	sliderThumb: "#1d4ed8",
+	bar: "#2563eb",
+	barLabel: "#0f172a",
+	pie: [
+		"#2563eb",
+		"#16a34a",
+		"#f59e0b",
+		"#dc2626"
+	],
+	line: "#2563eb",
+	stepperPast: "#16a34a",
+	stepperCurrent: "#2563eb",
+	stepperFuture: "#cbd5e1"
+};
+const space = {
+	none: "0",
+	xs: "4px",
+	sm: "8px",
+	md: "12px",
+	lg: "16px",
+	xl: "24px"
+};
+const radius = {
+	sm: "4px",
+	md: "6px",
+	lg: "8px"
+};
+//#endregion
+//#region src/Button.tsx
+function Button({ label, variant = "primary", disabled = false, onClick }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		disabled,
+		onClick,
+		style: {
+			fontFamily: "inherit",
+			fontSize: "14px",
+			fontWeight: 500,
+			padding: "8px 14px",
+			borderRadius: radius.md,
+			border: "1px solid transparent",
+			cursor: disabled ? "not-allowed" : "pointer",
+			opacity: disabled ? .5 : 1,
+			background: variant === "primary" ? colors.primary : variant === "secondary" ? colors.secondaryFg : "transparent",
+			color: variant === "ghost" ? colors.ghostFg : variant === "secondary" ? colors.bg : colors.primaryFg,
+			borderColor: variant === "ghost" ? colors.border : "transparent"
+		},
+		"data-pgx": "Button",
+		children: label
+	});
+}
+//#endregion
+//#region src/TextField.tsx
+/**
+* Controlled text input. Without `value`/`onChange`, behaves as
+* uncontrolled (uses its own state via defaultValue). When a stable
+* (deterministic) caller wires both, the input is fully controlled.
+*/
+function TextField({ label, value, placeholder, disabled = false, onChange }) {
+	const wrapperStyle = {
+		display: "flex",
+		flexDirection: "column",
+		gap: "4px",
+		fontFamily: "inherit"
+	};
+	const labelStyle = {
+		fontSize: "12px",
+		fontWeight: 500,
+		color: colors.mutedFg
+	};
+	const inputStyle = {
+		fontFamily: "inherit",
+		fontSize: "14px",
+		padding: "8px 10px",
+		border: `1px solid ${colors.border}`,
+		borderRadius: radius.md,
+		background: colors.bg,
+		color: colors.fg,
+		outline: "none"
+	};
+	const inputProps = {
+		placeholder,
+		disabled,
+		onChange
+	};
+	if (value !== void 0) inputProps.value = value;
+	else inputProps.defaultValue = "";
+	return /* @__PURE__ */ jsxs("label", {
+		style: wrapperStyle,
+		"data-pgx": "TextField",
+		children: [label !== void 0 ? /* @__PURE__ */ jsx("span", {
+			style: labelStyle,
+			children: label
+		}) : null, /* @__PURE__ */ jsx("input", {
+			...inputProps,
+			style: inputStyle
+		})]
+	});
+}
+//#endregion
+//#region src/Slider.tsx
+/**
+* Range input. State: internal `value` mirrors props.value if present
+* (otherwise uncontrolled); clamps to [min, max].
+*/
+function Slider({ min, max, value, step = 1, label }) {
+	const [internal, setInternal] = React.useState(() => clamp(value ?? min, min, max));
+	const controlled = value !== void 0;
+	const current = controlled ? clamp(value, min, max) : internal;
+	const trackStyle = {
+		display: "flex",
+		flexDirection: "column",
+		gap: "6px",
+		fontFamily: "inherit",
+		width: "100%"
+	};
+	const labelStyle = {
+		fontSize: "12px",
+		color: colors.mutedFg
+	};
+	const wrapStyle = {
+		display: "flex",
+		alignItems: "center",
+		gap: "10px"
+	};
+	const inputStyle = {
+		flex: 1,
+		accentColor: colors.sliderFill
+	};
+	const valueStyle = {
+		minWidth: "32px",
+		textAlign: "right",
+		fontVariantNumeric: "tabular-nums",
+		fontSize: "14px",
+		color: colors.fg
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		style: trackStyle,
+		"data-pgx": "Slider",
+		children: [label !== void 0 ? /* @__PURE__ */ jsx("span", {
+			style: labelStyle,
+			children: label
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			style: wrapStyle,
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "range",
+				min,
+				max,
+				step,
+				value: current,
+				disabled: min === max,
+				"aria-label": label,
+				onChange: (e) => {
+					const next = Number(e.currentTarget.value);
+					if (!controlled) setInternal(next);
+				},
+				style: inputStyle
+			}), /* @__PURE__ */ jsx("span", {
+				style: valueStyle,
+				children: current
+			})]
+		})]
+	});
+}
+function clamp(n, lo, hi) {
+	if (Number.isNaN(n)) return lo;
+	return Math.min(hi, Math.max(lo, n));
+}
+//#endregion
+//#region src/Chart.tsx
+function Chart({ kind, data, title }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-pgx": "Chart",
+		"data-chart-kind": kind,
+		style: { fontFamily: "inherit" },
+		children: [title !== void 0 ? /* @__PURE__ */ jsx("div", {
+			style: {
+				fontSize: "14px",
+				fontWeight: 600,
+				color: colors.fg,
+				marginBottom: "6px"
+			},
+			children: title
+		}) : null, renderChart(kind, data)]
+	});
+}
+function renderChart(kind, data) {
+	if (kind === "bar") return renderBar(data);
+	if (kind === "line") return renderLine(data);
+	return renderPie(data);
+}
+function renderBar(data) {
+	const parsed = parseLabeled(data);
+	if (!parsed) return fallback("bar chart", data);
+	const { labels, values } = parsed;
+	const max = Math.max(1, ...values);
+	const width = 320;
+	const height = 160;
+	const barWidth = width / Math.max(1, labels.length);
+	return /* @__PURE__ */ jsx("svg", {
+		width,
+		height,
+		role: "img",
+		"aria-label": "Bar chart",
+		style: { display: "block" },
+		children: values.map((v, i) => {
+			const h = Math.max(0, v) / max * (height - 24);
+			return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("rect", {
+				x: i * barWidth + 2,
+				y: height - 12 - h,
+				width: Math.max(1, barWidth - 4),
+				height: h,
+				fill: colors.bar,
+				rx: 2
+			}), /* @__PURE__ */ jsx("text", {
+				x: i * barWidth + barWidth / 2,
+				y: height - 2,
+				fontSize: 10,
+				textAnchor: "middle",
+				fill: colors.barLabel,
+				children: (labels[i] ?? "").slice(0, 8)
+			})] }, i);
+		})
+	});
+}
+function renderLine(data) {
+	let points = [];
+	if (data && typeof data === "object" && "series" in data) {
+		const first = data.series?.[0];
+		points = Array.isArray(first?.points) ? first.points : [];
+	} else if (data && typeof data === "object" && Array.isArray(data.x) && Array.isArray(data.y)) {
+		const xArr = data.x;
+		const yArr = data.y;
+		points = xArr.map((x, i) => ({
+			x,
+			y: yArr[i] ?? 0
+		}));
+	}
+	if (points.length === 0) return fallback("line chart", data);
+	const xs = points.map((p) => p.x);
+	const ys = points.map((p) => p.y);
+	const xMin = Math.min(...xs);
+	const xMax = Math.max(...xs);
+	const yMin = Math.min(...ys);
+	const yMax = Math.max(...ys);
+	const w = 320;
+	const h = 160;
+	const sx = (x) => xMax === xMin ? w / 2 : (x - xMin) / (xMax - xMin) * (w - 8) + 4;
+	const sy = (y) => yMax === yMin ? h / 2 : h - (y - yMin) / (yMax - yMin) * (h - 24) - 12;
+	return /* @__PURE__ */ jsxs("svg", {
+		width: w,
+		height: h,
+		role: "img",
+		"aria-label": "Line chart",
+		style: { display: "block" },
+		children: [/* @__PURE__ */ jsx("path", {
+			d: points.map((p, i) => `${i === 0 ? "M" : "L"}${sx(p.x).toFixed(2)},${sy(p.y).toFixed(2)}`).join(" "),
+			fill: "none",
+			stroke: colors.line,
+			strokeWidth: 2
+		}), points.map((p, i) => /* @__PURE__ */ jsx("circle", {
+			cx: sx(p.x),
+			cy: sy(p.y),
+			r: 2,
+			fill: colors.line
+		}, i))]
+	});
+}
+function renderPie(data) {
+	const parsed = parseLabeled(data);
+	if (!parsed) return fallback("pie chart", data);
+	const total = parsed.values.reduce((a, b) => a + Math.max(0, b), 0) || 1;
+	const cx = 80;
+	const cy = 80;
+	const r = 60;
+	let angle = -Math.PI / 2;
+	return /* @__PURE__ */ jsx("svg", {
+		width: 160,
+		height: 160,
+		role: "img",
+		"aria-label": "Pie chart",
+		style: { display: "block" },
+		children: parsed.values.map((v, i) => {
+			const slice = Math.max(0, v) / total * Math.PI * 2;
+			const x1 = cx + r * Math.cos(angle);
+			const y1 = cy + r * Math.sin(angle);
+			const x2 = cx + r * Math.cos(angle + slice);
+			const y2 = cy + r * Math.sin(angle + slice);
+			const large = slice > Math.PI ? 1 : 0;
+			const path = slice >= Math.PI * 2 - 1e-6 ? `M ${cx - r} ${cy} A ${r} ${r} 0 1 1 140 ${cy} A ${r} ${r} 0 1 1 ${cx - r} ${cy}` : `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
+			angle += slice;
+			return /* @__PURE__ */ jsx("path", {
+				d: path,
+				fill: colors.pie[i % colors.pie.length] ?? colors.bar
+			}, i);
+		})
+	});
+}
+function parseLabeled(data) {
+	if (!data || typeof data !== "object") return null;
+	const labels = data.labels;
+	const values = data.values;
+	if (!Array.isArray(labels) || !Array.isArray(values)) return null;
+	if (labels.length !== values.length) return null;
+	if (!labels.every((l) => typeof l === "string" || typeof l === "number")) return null;
+	if (!values.every((v) => typeof v === "number" || typeof v === "string")) return null;
+	return {
+		labels: labels.map(String),
+		values: values.map((v) => typeof v === "number" ? v : Number(v))
+	};
+}
+function fallback(label, data) {
+	return /* @__PURE__ */ jsxs("pre", {
+		style: {
+			margin: 0,
+			fontSize: "12px",
+			background: colors.codeBg,
+			color: colors.codeFg,
+			padding: "8px",
+			borderRadius: "4px",
+			overflow: "auto"
+		},
+		children: [
+			label,
+			" data: ",
+			JSON.stringify(data, null, 2)
+		]
+	});
+}
+//#endregion
+//#region src/Container.tsx
+/**
+* Layout wrapper. Defaults to a vertical flex container with 16px
+* padding and 12px gap when callers omit props.
+*/
+function Container({ padding, gap, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			padding: padding ?? "16px",
+			gap: gap ?? "12px",
+			fontFamily: "inherit",
+			color: "inherit",
+			boxSizing: "border-box"
+		},
+		"data-pgx": "Container",
+		children
+	});
+}
+//#endregion
+//#region src/Code.tsx
+/**
+* Inline code formatter. Renders children as a `<code>` element inside
+* a styled wrapper. If `children` is a single string, it displays
+* verbatim; for multi-line content we fall back to a `<pre>`-styled
+* block.
+*/
+function Code({ language, children }) {
+	if (typeof children === "string" && children.includes("\n")) return /* @__PURE__ */ jsx("pre", {
+		"data-pgx": "Code",
+		"data-language": language ?? "text",
+		style: {
+			background: colors.codeBg,
+			color: colors.codeFg,
+			padding: "12px",
+			borderRadius: radius.md,
+			fontSize: "12px",
+			overflow: "auto",
+			margin: 0
+		},
+		children: /* @__PURE__ */ jsx("code", { children })
+	});
+	return /* @__PURE__ */ jsx("code", {
+		"data-pgx": "Code-inline",
+		"data-language": language ?? "text",
+		style: {
+			background: colors.codeBg,
+			color: colors.codeFg,
+			padding: "2px 6px",
+			borderRadius: radius.sm,
+			fontSize: "0.9em"
+		},
+		children
+	});
+}
+//#endregion
+//#region src/Heading.tsx
+const sizes = {
+	1: "24px",
+	2: "20px",
+	3: "18px",
+	4: "16px",
+	5: "14px",
+	6: "13px"
+};
+function Heading({ level, color, children }) {
+	const safeLevel = clampLevel(level);
+	const style = {
+		fontFamily: "inherit",
+		fontSize: sizes[safeLevel] ?? sizes[2],
+		fontWeight: 700,
+		color: color ?? colors.fg,
+		margin: 0,
+		lineHeight: 1.3
+	};
+	return React.createElement(`h${safeLevel}`, {
+		style,
+		"data-pgx": `Heading`
+	}, children);
+}
+function clampLevel(level) {
+	if (typeof level !== "number" || !Number.isFinite(level)) return 2;
+	const i = Math.floor(level);
+	if (i < 1) return 1;
+	if (i > 6) return 6;
+	return i;
+}
+//#endregion
+//#region src/Text.tsx
+function Text({ weight = "normal", size, color, children }) {
+	return /* @__PURE__ */ jsx("p", {
+		style: {
+			fontFamily: "inherit",
+			fontSize: size ?? "14px",
+			fontWeight: weight === "bold" ? 600 : 400,
+			color: color ?? colors.fg,
+			margin: 0,
+			lineHeight: 1.5
+		},
+		"data-pgx": "Text",
+		children
+	});
+}
+//#endregion
+//#region src/Stepper.tsx
+/**
+* Multi-step reveal. State: the active index. Previous steps can be
+* revisited; future steps are disabled until reached.
+*/
+function Stepper({ steps, initial }) {
+	const initialIdx = clampIndex(initial ?? 0, steps.length);
+	const [active, setActive] = React.useState(initialIdx);
+	const wrapStyle = {
+		fontFamily: "inherit",
+		display: "flex",
+		flexDirection: "column",
+		gap: "12px"
+	};
+	const listStyle = {
+		display: "flex",
+		gap: "6px",
+		listStyle: "none",
+		padding: 0,
+		margin: 0
+	};
+	const stepBtnBase = {
+		width: "28px",
+		height: "28px",
+		borderRadius: "50%",
+		display: "inline-flex",
+		alignItems: "center",
+		justifyContent: "center",
+		fontFamily: "inherit",
+		fontSize: "12px",
+		fontWeight: 600,
+		border: "1px solid transparent"
+	};
+	const bodyStyle = {
+		border: `1px solid ${colors.border}`,
+		borderRadius: "6px",
+		padding: "10px",
+		background: colors.bg,
+		color: colors.fg
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		"data-pgx": "Stepper",
+		style: wrapStyle,
+		children: [/* @__PURE__ */ jsx("ol", {
+			style: listStyle,
+			children: steps.map((s, i) => {
+				const isPast = i < active;
+				const isCurrent = i === active;
+				const future = i > active;
+				const stepStyle = {
+					...stepBtnBase,
+					background: isCurrent ? colors.stepperCurrent : isPast ? colors.stepperPast : colors.stepperFuture,
+					color: isCurrent || isPast ? "#fff" : colors.fg,
+					opacity: future ? .6 : 1,
+					cursor: future ? "not-allowed" : "pointer"
+				};
+				return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": `Step ${i + 1}: ${s.title}`,
+					"aria-current": isCurrent ? "step" : void 0,
+					disabled: future,
+					onClick: () => setActive(i),
+					style: stepStyle,
+					children: i + 1
+				}) }, s.id);
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			style: bodyStyle,
+			children: [/* @__PURE__ */ jsx("div", {
+				style: {
+					fontWeight: 600,
+					marginBottom: "4px",
+					fontSize: "14px"
+				},
+				children: steps[active]?.title ?? ""
+			}), /* @__PURE__ */ jsx("div", {
+				style: { fontSize: "13px" },
+				children: steps[active]?.body ?? null
+			})]
+		})]
+	});
+}
+function clampIndex(n, len) {
+	if (len === 0) return 0;
+	if (!Number.isFinite(n)) return 0;
+	return Math.min(len - 1, Math.max(0, Math.floor(n)));
+}
+//#endregion
+//#region src/Card.tsx
+function Card({ title, elevation = 1, children }) {
+	const shadow = elevation >= 3 ? "0 4px 12px rgba(15, 23, 42, 0.18)" : elevation === 2 ? "0 2px 8px rgba(15, 23, 42, 0.12)" : elevation === 1 ? "0 1px 2px rgba(15, 23, 42, 0.06)" : "none";
+	return /* @__PURE__ */ jsxs("section", {
+		"data-pgx": "Card",
+		style: {
+			background: colors.cardBg,
+			border: `1px solid ${colors.cardBorder}`,
+			borderRadius: radius.md,
+			boxShadow: shadow,
+			padding: space.md,
+			fontFamily: "inherit",
+			color: colors.fg,
+			display: "flex",
+			flexDirection: "column",
+			gap: space.sm
+		},
+		children: [title !== void 0 ? /* @__PURE__ */ jsx("h3", {
+			style: {
+				fontSize: "14px",
+				fontWeight: 600,
+				margin: 0
+			},
+			children: title
+		}) : null, children]
+	});
+}
+//#endregion
+//#region src/List.tsx
+/**
+* List of items. Renders `items` as a list of strings/numbers (the
+* common artifact prompt output). If `children` are passed they take
+* precedence over `items`.
+*/
+function List({ items, ordered, children }) {
+	const style = {
+		margin: 0,
+		paddingLeft: "20px",
+		fontFamily: "inherit",
+		color: colors.fg,
+		fontSize: "14px",
+		lineHeight: 1.6
+	};
+	if (children !== void 0 && children !== null) return React.createElement(ordered ? "ol" : "ul", {
+		style,
+		"data-pgx": "List"
+	}, children);
+	const arr = Array.isArray(items) ? items : items === void 0 ? [] : [items];
+	return React.createElement(ordered ? "ol" : "ul", {
+		style,
+		"data-pgx": "List"
+	}, arr.map((item, i) => {
+		return /* @__PURE__ */ jsx("li", { children: typeof item === "string" || typeof item === "number" ? String(item) : JSON.stringify(item) }, i);
+	}));
+}
+//#endregion
+//#region src/registry.ts
+/**
+* Map of PascalCase component name to React component. Use this when
+* you have a renderer that walks an AST and needs to pick an
+* implementation at runtime:
+*
+*   const C = componentMap[tagName];
+*   if (C) el = <C {...props}>{children}</C>;
+*
+* Keys mirror `DEFAULT_REGISTRY.list()`.
+*
+* Type note: components vary in their props shape, so the map is
+* typed permissively (`Record<string, ComponentType<any>>`). Each
+* individual export above is still strictly typed.
+*/
+const componentMap = {
+	Button,
+	TextField,
+	Slider,
+	Chart,
+	Container,
+	Code,
+	Heading,
+	Text,
+	Stepper,
+	Card,
+	List
+};
+//#endregion
+export { Button, Card, Chart, Code, Container, Heading, List, Slider, Stepper, Text, TextField, componentMap };
+
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../src/theme.ts","../src/Button.tsx","../src/TextField.tsx","../src/Slider.tsx","../src/Chart.tsx","../src/Container.tsx","../src/Code.tsx","../src/Heading.tsx","../src/Text.tsx","../src/Stepper.tsx","../src/Card.tsx","../src/List.tsx","../src/registry.ts"],"sourcesContent":["/**\n * Shared theme tokens for @playgenx/components.\n *\n * All styling is driven from this file. There is intentionally no\n * \"config\" theme or runtime theme provider — these are the default\n * implementations of the registry, and a downstream host app can swap\n * them out entirely. Tokens live as constants so they're stable\n * across renders and don't allocate per call.\n */\n\nexport const colors = {\n  bg: '#ffffff',\n  fg: '#0f172a',\n  mutedFg: '#475569',\n  border: '#e2e8f0',\n  primary: '#2563eb',\n  primaryFg: '#ffffff',\n  secondaryFg: '#0f172a',\n  ghostFg: '#1d4ed8',\n  cardBg: '#f8fafc',\n  cardBorder: '#e2e8f0',\n  codeBg: '#f1f5f9',\n  codeFg: '#0f172a',\n  sliderTrack: '#cbd5e1',\n  sliderFill: '#2563eb',\n  sliderThumb: '#1d4ed8',\n  bar: '#2563eb',\n  barLabel: '#0f172a',\n  pie: ['#2563eb', '#16a34a', '#f59e0b', '#dc2626'],\n  line: '#2563eb',\n  stepperPast: '#16a34a',\n  stepperCurrent: '#2563eb',\n  stepperFuture: '#cbd5e1',\n} as const;\n\nexport const space = {\n  none: '0',\n  xs: '4px',\n  sm: '8px',\n  md: '12px',\n  lg: '16px',\n  xl: '24px',\n} as const;\n\nexport const radius = {\n  sm: '4px',\n  md: '6px',\n  lg: '8px',\n} as const;\n\n/**\n * Common React-friendly prop accepts for content. Components that\n * accept children of arbitrary shape (Heading, Text, Card, Container,\n * ...) use this so the host can pass strings or JSX interchangeably.\n */\nexport type Children = string | number | React.ReactNode;\n\nimport type * as React from 'react';\n","import * as React from 'react';\nimport { colors, radius } from './theme.js';\n\n/**\n * Headless-style wrapper over `<button>` accepting the props defined in\n * `DEFAULT_COMPONENT_SCHEMAS.Button`. Pass `onClick` through; this\n * implementation does NOT execute arbitrary functions (deterministic\n * renderer constraint) so the click handler is rendered inert at mount.\n */\nexport interface ButtonProps {\n  /** Visible text. Required. */\n  label: string;\n  /** Variant. Defaults to 'primary'. */\n  variant?: 'primary' | 'secondary' | 'ghost';\n  /** Disabled state. Defaults to false. */\n  disabled?: boolean;\n  /**\n   * Optional click handler. The default impl forwards to onClick if\n   * present; in a deterministic renderer pass `noEvents` instead.\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n}\n\nexport function Button({\n  label,\n  variant = 'primary',\n  disabled = false,\n  onClick,\n}: ButtonProps): React.JSX.Element {\n  const styles: React.CSSProperties = {\n    fontFamily: 'inherit',\n    fontSize: '14px',\n    fontWeight: 500,\n    padding: '8px 14px',\n    borderRadius: radius.md,\n    border: '1px solid transparent',\n    cursor: disabled ? 'not-allowed' : 'pointer',\n    opacity: disabled ? 0.5 : 1,\n    background:\n      variant === 'primary'\n        ? colors.primary\n        : variant === 'secondary'\n          ? colors.secondaryFg\n          : 'transparent',\n    color:\n      variant === 'ghost' ? colors.ghostFg : variant === 'secondary' ? colors.bg : colors.primaryFg,\n    borderColor: variant === 'ghost' ? colors.border : 'transparent',\n  };\n  return (\n    <button type=\"button\" disabled={disabled} onClick={onClick} style={styles} data-pgx=\"Button\">\n      {label}\n    </button>\n  );\n}\n","import * as React from 'react';\nimport { colors, radius } from './theme.js';\n\nexport interface TextFieldProps {\n  label?: string;\n  value?: string;\n  placeholder?: string;\n  disabled?: boolean;\n  /**\n   * onChange is reported as `node` in the schema (it must be a\n   * function reference, which the validator cannot statically type).\n   * We forward to React's controlled input handler.\n   */\n  onChange?: React.ChangeEventHandler<HTMLInputElement>;\n}\n\n/**\n * Controlled text input. Without `value`/`onChange`, behaves as\n * uncontrolled (uses its own state via defaultValue). When a stable\n * (deterministic) caller wires both, the input is fully controlled.\n */\nexport function TextField({\n  label,\n  value,\n  placeholder,\n  disabled = false,\n  onChange,\n}: TextFieldProps): React.JSX.Element {\n  const wrapperStyle: React.CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '4px',\n    fontFamily: 'inherit',\n  };\n  const labelStyle: React.CSSProperties = {\n    fontSize: '12px',\n    fontWeight: 500,\n    color: colors.mutedFg,\n  };\n  const inputStyle: React.CSSProperties = {\n    fontFamily: 'inherit',\n    fontSize: '14px',\n    padding: '8px 10px',\n    border: `1px solid ${colors.border}`,\n    borderRadius: radius.md,\n    background: colors.bg,\n    color: colors.fg,\n    outline: 'none',\n  };\n  const inputProps: React.InputHTMLAttributes<HTMLInputElement> = {\n    placeholder,\n    disabled,\n    onChange,\n  };\n  // Use uncontrolled defaultValue when caller omits value. We can't\n  // set defaultValue AND value without React warning, so branch.\n  if (value !== undefined) inputProps.value = value;\n  else inputProps.defaultValue = '';\n  return (\n    <label style={wrapperStyle} data-pgx=\"TextField\">\n      {label !== undefined ? <span style={labelStyle}>{label}</span> : null}\n      <input {...inputProps} style={inputStyle} />\n    </label>\n  );\n}\n","import * as React from 'react';\nimport { colors } from './theme.js';\n\nexport interface SliderProps {\n  /** Lower bound, inclusive. Required. */\n  min: number;\n  /** Upper bound, inclusive. Required. */\n  max: number;\n  /** Initial / controlled value. */\n  value?: number;\n  /** Increment between stops. Defaults to 1. */\n  step?: number;\n  /** Optional caption rendered above the slider. */\n  label?: string;\n}\n\n/**\n * Range input. State: internal `value` mirrors props.value if present\n * (otherwise uncontrolled); clamps to [min, max].\n */\nexport function Slider({ min, max, value, step = 1, label }: SliderProps): React.JSX.Element {\n  // Controlled vs uncontrolled: React forbids both at once. Branch.\n  const [internal, setInternal] = React.useState(() => clamp(value ?? min, min, max));\n  const controlled = value !== undefined;\n  const current = controlled ? clamp(value, min, max) : internal;\n  const trackStyle: React.CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '6px',\n    fontFamily: 'inherit',\n    width: '100%',\n  };\n  const labelStyle: React.CSSProperties = {\n    fontSize: '12px',\n    color: colors.mutedFg,\n  };\n  const wrapStyle: React.CSSProperties = { display: 'flex', alignItems: 'center', gap: '10px' };\n  const inputStyle: React.CSSProperties = { flex: 1, accentColor: colors.sliderFill };\n  const valueStyle: React.CSSProperties = {\n    minWidth: '32px',\n    textAlign: 'right',\n    fontVariantNumeric: 'tabular-nums',\n    fontSize: '14px',\n    color: colors.fg,\n  };\n  return (\n    <div style={trackStyle} data-pgx=\"Slider\">\n      {label !== undefined ? <span style={labelStyle}>{label}</span> : null}\n      <div style={wrapStyle}>\n        <input\n          type=\"range\"\n          min={min}\n          max={max}\n          step={step}\n          value={current}\n          disabled={min === max}\n          aria-label={label}\n          onChange={(e) => {\n            const next = Number(e.currentTarget.value);\n            if (!controlled) setInternal(next);\n          }}\n          style={inputStyle}\n        />\n        <span style={valueStyle}>{current}</span>\n      </div>\n    </div>\n  );\n}\n\nfunction clamp(n: number, lo: number, hi: number): number {\n  if (Number.isNaN(n)) return lo;\n  return Math.min(hi, Math.max(lo, n));\n}\n","import * as React from 'react';\nimport { colors } from './theme.js';\n\nexport type ChartKind = 'bar' | 'line' | 'pie';\n\n/**\n * The schema lets `data` be any ReactNode, but in practice callers\n * pass JSON-shaped arrays. We narrow at runtime:\n *\n *  - bar: `{ labels: string[], values: number[] }`\n *  - line: `{ x: number[], y: number[] }` or `{ series: { label, points: {x,y} }[] }`\n *  - pie: `{ labels: string[], values: number[] }`\n *\n * Anything that doesn't fit is rendered as a `<pre>` fallback.\n */\nexport interface ChartProps {\n  kind: ChartKind;\n  data: unknown;\n  title?: string;\n}\n\nexport function Chart({ kind, data, title }: ChartProps): React.JSX.Element {\n  return (\n    <div data-pgx=\"Chart\" data-chart-kind={kind} style={{ fontFamily: 'inherit' }}>\n      {title !== undefined ? (\n        <div style={{ fontSize: '14px', fontWeight: 600, color: colors.fg, marginBottom: '6px' }}>\n          {title}\n        </div>\n      ) : null}\n      {renderChart(kind, data)}\n    </div>\n  );\n}\n\nfunction renderChart(kind: ChartKind, data: unknown): React.JSX.Element {\n  if (kind === 'bar') return renderBar(data);\n  if (kind === 'line') return renderLine(data);\n  return renderPie(data);\n}\n\nfunction renderBar(data: unknown): React.JSX.Element {\n  const parsed = parseLabeled(data);\n  if (!parsed) return fallback('bar chart', data);\n  const { labels, values } = parsed;\n  const max = Math.max(1, ...values);\n  const width = 320;\n  const height = 160;\n  const barWidth = width / Math.max(1, labels.length);\n  return (\n    <svg\n      width={width}\n      height={height}\n      role=\"img\"\n      aria-label=\"Bar chart\"\n      style={{ display: 'block' }}\n    >\n      {values.map((v, i) => {\n        const h = (Math.max(0, v) / max) * (height - 24);\n        return (\n          <g key={i}>\n            <rect\n              x={i * barWidth + 2}\n              y={height - 12 - h}\n              width={Math.max(1, barWidth - 4)}\n              height={h}\n              fill={colors.bar}\n              rx={2}\n            />\n            <text\n              x={i * barWidth + barWidth / 2}\n              y={height - 2}\n              fontSize={10}\n              textAnchor=\"middle\"\n              fill={colors.barLabel}\n            >\n              {(labels[i] ?? '').slice(0, 8)}\n            </text>\n          </g>\n        );\n      })}\n    </svg>\n  );\n}\n\nfunction renderLine(data: unknown): React.JSX.Element {\n  // Two accepted shapes; pick whichever parses cleanly.\n  let points: Array<{ x: number; y: number }> = [];\n  if (data && typeof data === 'object' && 'series' in (data as Record<string, unknown>)) {\n    const series = (data as { series: Array<{ points?: Array<{ x: number; y: number }> }> }).series;\n    const first = series?.[0];\n    points = Array.isArray(first?.points) ? first.points : [];\n  } else if (\n    data &&\n    typeof data === 'object' &&\n    Array.isArray((data as { x?: unknown }).x) &&\n    Array.isArray((data as { y?: unknown }).y)\n  ) {\n    const xArr = (data as { x: number[] }).x;\n    const yArr = (data as { y: number[] }).y;\n    points = xArr.map((x, i) => ({ x, y: yArr[i] ?? 0 }));\n  }\n  if (points.length === 0) return fallback('line chart', data);\n  const xs = points.map((p) => p.x);\n  const ys = points.map((p) => p.y);\n  const xMin = Math.min(...xs);\n  const xMax = Math.max(...xs);\n  const yMin = Math.min(...ys);\n  const yMax = Math.max(...ys);\n  const w = 320;\n  const h = 160;\n  const sx = (x: number) => (xMax === xMin ? w / 2 : ((x - xMin) / (xMax - xMin)) * (w - 8) + 4);\n  const sy = (y: number) =>\n    yMax === yMin ? h / 2 : h - ((y - yMin) / (yMax - yMin)) * (h - 24) - 12;\n  const path = points\n    .map((p, i) => `${i === 0 ? 'M' : 'L'}${sx(p.x).toFixed(2)},${sy(p.y).toFixed(2)}`)\n    .join(' ');\n  return (\n    <svg width={w} height={h} role=\"img\" aria-label=\"Line chart\" style={{ display: 'block' }}>\n      <path d={path} fill=\"none\" stroke={colors.line} strokeWidth={2} />\n      {points.map((p, i) => (\n        <circle key={i} cx={sx(p.x)} cy={sy(p.y)} r={2} fill={colors.line} />\n      ))}\n    </svg>\n  );\n}\n\nfunction renderPie(data: unknown): React.JSX.Element {\n  const parsed = parseLabeled(data);\n  if (!parsed) return fallback('pie chart', data);\n  const total = parsed.values.reduce((a, b) => a + Math.max(0, b), 0) || 1;\n  const cx = 80;\n  const cy = 80;\n  const r = 60;\n  let angle = -Math.PI / 2;\n  return (\n    <svg width={160} height={160} role=\"img\" aria-label=\"Pie chart\" style={{ display: 'block' }}>\n      {parsed.values.map((v, i) => {\n        const slice = (Math.max(0, v) / total) * Math.PI * 2;\n        const x1 = cx + r * Math.cos(angle);\n        const y1 = cy + r * Math.sin(angle);\n        const x2 = cx + r * Math.cos(angle + slice);\n        const y2 = cy + r * Math.sin(angle + slice);\n        const large = slice > Math.PI ? 1 : 0;\n        const path =\n          slice >= Math.PI * 2 - 1e-6\n            ? `M ${cx - r} ${cy} A ${r} ${r} 0 1 1 ${cx + r} ${cy} A ${r} ${r} 0 1 1 ${cx - r} ${cy}`\n            : `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;\n        angle += slice;\n        const fill = colors.pie[i % colors.pie.length] ?? colors.bar;\n        return <path key={i} d={path} fill={fill} />;\n      })}\n    </svg>\n  );\n}\n\nfunction parseLabeled(data: unknown): { labels: string[]; values: number[] } | null {\n  if (!data || typeof data !== 'object') return null;\n  const labels = (data as { labels?: unknown }).labels;\n  const values = (data as { values?: unknown }).values;\n  if (!Array.isArray(labels) || !Array.isArray(values)) return null;\n  if (labels.length !== values.length) return null;\n  if (!labels.every((l) => typeof l === 'string' || typeof l === 'number')) return null;\n  if (!values.every((v) => typeof v === 'number' || typeof v === 'string')) return null;\n  return {\n    labels: labels.map(String),\n    values: values.map((v) => (typeof v === 'number' ? v : Number(v))),\n  };\n}\n\nfunction fallback(label: string, data: unknown): React.JSX.Element {\n  return (\n    <pre\n      style={{\n        margin: 0,\n        fontSize: '12px',\n        background: colors.codeBg,\n        color: colors.codeFg,\n        padding: '8px',\n        borderRadius: '4px',\n        overflow: 'auto',\n      }}\n    >\n      {label} data: {JSON.stringify(data, null, 2)}\n    </pre>\n  );\n}\n","import * as React from 'react';\n\nexport interface ContainerProps {\n  padding?: string;\n  gap?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * Layout wrapper. Defaults to a vertical flex container with 16px\n * padding and 12px gap when callers omit props.\n */\nexport function Container({ padding, gap, children }: ContainerProps): React.JSX.Element {\n  const style: React.CSSProperties = {\n    display: 'flex',\n    flexDirection: 'column',\n    padding: padding ?? '16px',\n    gap: gap ?? '12px',\n    fontFamily: 'inherit',\n    color: 'inherit',\n    boxSizing: 'border-box',\n  };\n  return (\n    <div style={style} data-pgx=\"Container\">\n      {children}\n    </div>\n  );\n}\n","import * as React from 'react';\nimport { colors, radius } from './theme.js';\n\nexport interface CodeProps {\n  language?: string;\n  children?: React.ReactNode;\n}\n\n/**\n * Inline code formatter. Renders children as a `<code>` element inside\n * a styled wrapper. If `children` is a single string, it displays\n * verbatim; for multi-line content we fall back to a `<pre>`-styled\n * block.\n */\nexport function Code({ language, children }: CodeProps): React.JSX.Element {\n  const isString = typeof children === 'string';\n  const isMulti = isString && (children as string).includes('\\n');\n  if (isMulti) {\n    return (\n      <pre\n        data-pgx=\"Code\"\n        data-language={language ?? 'text'}\n        style={{\n          background: colors.codeBg,\n          color: colors.codeFg,\n          padding: '12px',\n          borderRadius: radius.md,\n          fontSize: '12px',\n          overflow: 'auto',\n          margin: 0,\n        }}\n      >\n        <code>{children}</code>\n      </pre>\n    );\n  }\n  return (\n    <code\n      data-pgx=\"Code-inline\"\n      data-language={language ?? 'text'}\n      style={{\n        background: colors.codeBg,\n        color: colors.codeFg,\n        padding: '2px 6px',\n        borderRadius: radius.sm,\n        fontSize: '0.9em',\n      }}\n    >\n      {children}\n    </code>\n  );\n}\n","import * as React from 'react';\nimport { colors } from './theme.js';\n\nexport interface HeadingProps {\n  /**\n   * Heading level (1..6). Out-of-range or undefined falls back to 2.\n   * The renderer should never see an `Undefined` value here unless the\n   * schema validator said optional props can be omitted.\n   */\n  level?: number;\n  color?: string;\n  children?: React.ReactNode;\n}\n\nconst sizes: Record<number, string> = {\n  1: '24px',\n  2: '20px',\n  3: '18px',\n  4: '16px',\n  5: '14px',\n  6: '13px',\n};\n\nexport function Heading({ level, color, children }: HeadingProps): React.JSX.Element {\n  const safeLevel = clampLevel(level);\n  const size = sizes[safeLevel] ?? sizes[2]!;\n  const style: React.CSSProperties = {\n    fontFamily: 'inherit',\n    fontSize: size,\n    fontWeight: 700,\n    color: color ?? colors.fg,\n    margin: 0,\n    lineHeight: 1.3,\n  };\n  // Render an element corresponding to the level. React enforces\n  // TagName = 'h1' | 'h2' ... via JSX, so we switch dynamically via\n  // createElement.\n  return React.createElement(`h${safeLevel}`, { style, 'data-pgx': `Heading` }, children);\n}\n\nfunction clampLevel(level: number | undefined): 1 | 2 | 3 | 4 | 5 | 6 {\n  if (typeof level !== 'number' || !Number.isFinite(level)) return 2;\n  const i = Math.floor(level);\n  if (i < 1) return 1;\n  if (i > 6) return 6;\n  return i as 1 | 2 | 3 | 4 | 5 | 6;\n}\n","import * as React from 'react';\nimport { colors } from './theme.js';\n\nexport interface TextProps {\n  weight?: 'normal' | 'bold';\n  size?: string;\n  color?: string;\n  children?: React.ReactNode;\n}\n\nexport function Text({ weight = 'normal', size, color, children }: TextProps): React.JSX.Element {\n  const style: React.CSSProperties = {\n    fontFamily: 'inherit',\n    fontSize: size ?? '14px',\n    fontWeight: weight === 'bold' ? 600 : 400,\n    color: color ?? colors.fg,\n    margin: 0,\n    lineHeight: 1.5,\n  };\n  return (\n    <p style={style} data-pgx=\"Text\">\n      {children}\n    </p>\n  );\n}\n","import * as React from 'react';\nimport { colors } from './theme.js';\n\nexport interface Step {\n  id: string;\n  title: string;\n  body?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: Step[];\n  /** 0-indexed initial step. Out-of-range falls back to 0. */\n  initial?: number;\n}\n\n/**\n * Multi-step reveal. State: the active index. Previous steps can be\n * revisited; future steps are disabled until reached.\n */\nexport function Stepper({ steps, initial }: StepperProps): React.JSX.Element {\n  const initialIdx = clampIndex(initial ?? 0, steps.length);\n  const [active, setActive] = React.useState(initialIdx);\n  const wrapStyle: React.CSSProperties = {\n    fontFamily: 'inherit',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '12px',\n  };\n  const listStyle: React.CSSProperties = {\n    display: 'flex',\n    gap: '6px',\n    listStyle: 'none',\n    padding: 0,\n    margin: 0,\n  };\n  const stepBtnBase: React.CSSProperties = {\n    width: '28px',\n    height: '28px',\n    borderRadius: '50%',\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    fontFamily: 'inherit',\n    fontSize: '12px',\n    fontWeight: 600,\n    border: '1px solid transparent',\n  };\n  const bodyStyle: React.CSSProperties = {\n    border: `1px solid ${colors.border}`,\n    borderRadius: '6px',\n    padding: '10px',\n    background: colors.bg,\n    color: colors.fg,\n  };\n  return (\n    <div data-pgx=\"Stepper\" style={wrapStyle}>\n      <ol style={listStyle}>\n        {steps.map((s, i) => {\n          const isPast = i < active;\n          const isCurrent = i === active;\n          const future = i > active;\n          const stepStyle: React.CSSProperties = {\n            ...stepBtnBase,\n            background: isCurrent\n              ? colors.stepperCurrent\n              : isPast\n                ? colors.stepperPast\n                : colors.stepperFuture,\n            color: isCurrent || isPast ? '#fff' : colors.fg,\n            opacity: future ? 0.6 : 1,\n            cursor: future ? 'not-allowed' : 'pointer',\n          };\n          return (\n            <li key={s.id}>\n              <button\n                type=\"button\"\n                aria-label={`Step ${i + 1}: ${s.title}`}\n                aria-current={isCurrent ? 'step' : undefined}\n                disabled={future}\n                onClick={() => setActive(i)}\n                style={stepStyle}\n              >\n                {i + 1}\n              </button>\n            </li>\n          );\n        })}\n      </ol>\n      <div style={bodyStyle}>\n        <div style={{ fontWeight: 600, marginBottom: '4px', fontSize: '14px' }}>\n          {steps[active]?.title ?? ''}\n        </div>\n        <div style={{ fontSize: '13px' }}>{steps[active]?.body ?? null}</div>\n      </div>\n    </div>\n  );\n}\n\nfunction clampIndex(n: number, len: number): number {\n  if (len === 0) return 0;\n  if (!Number.isFinite(n)) return 0;\n  return Math.min(len - 1, Math.max(0, Math.floor(n)));\n}\n","import * as React from 'react';\nimport { colors, radius, space } from './theme.js';\n\nexport interface CardProps {\n  title?: string;\n  /**\n   * Visual elevation. 0 = flat (border only), 1+ = heavier shadow.\n   * Defaults to 1.\n   */\n  elevation?: number;\n  children?: React.ReactNode;\n}\n\nexport function Card({ title, elevation = 1, children }: CardProps): React.JSX.Element {\n  const shadow =\n    elevation >= 3\n      ? '0 4px 12px rgba(15, 23, 42, 0.18)'\n      : elevation === 2\n        ? '0 2px 8px rgba(15, 23, 42, 0.12)'\n        : elevation === 1\n          ? '0 1px 2px rgba(15, 23, 42, 0.06)'\n          : 'none';\n  const cardStyle: React.CSSProperties = {\n    background: colors.cardBg,\n    border: `1px solid ${colors.cardBorder}`,\n    borderRadius: radius.md,\n    boxShadow: shadow,\n    padding: space.md,\n    fontFamily: 'inherit',\n    color: colors.fg,\n    display: 'flex',\n    flexDirection: 'column',\n    gap: space.sm,\n  };\n  const titleStyle: React.CSSProperties = {\n    fontSize: '14px',\n    fontWeight: 600,\n    margin: 0,\n  };\n  return (\n    <section data-pgx=\"Card\" style={cardStyle}>\n      {title !== undefined ? <h3 style={titleStyle}>{title}</h3> : null}\n      {children}\n    </section>\n  );\n}\n","import * as React from 'react';\nimport { colors } from './theme.js';\n\nexport interface ListProps {\n  /**\n   * Items to render. Schema marks this as `node`; in practice callers\n   * pass arrays of strings/numbers/ReactNodes. Anything else is\n   * rendered as a single bullet containing the value.\n   */\n  items?: unknown;\n  /** When true, renders as `<ol>` instead of `<ul>`. */\n  ordered?: boolean;\n  /** Override the wrapper element for full control. */\n  children?: React.ReactNode;\n}\n\n/**\n * List of items. Renders `items` as a list of strings/numbers (the\n * common artifact prompt output). If `children` are passed they take\n * precedence over `items`.\n */\nexport function List({ items, ordered, children }: ListProps): React.JSX.Element {\n  const style: React.CSSProperties = {\n    margin: 0,\n    paddingLeft: '20px',\n    fontFamily: 'inherit',\n    color: colors.fg,\n    fontSize: '14px',\n    lineHeight: 1.6,\n  };\n  if (children !== undefined && children !== null) {\n    return React.createElement(ordered ? 'ol' : 'ul', { style, 'data-pgx': 'List' }, children);\n  }\n  const arr = Array.isArray(items) ? items : items === undefined ? [] : [items];\n  return React.createElement(\n    ordered ? 'ol' : 'ul',\n    { style, 'data-pgx': 'List' },\n    arr.map((item, i) => {\n      const node: React.ReactNode =\n        typeof item === 'string' || typeof item === 'number' ? String(item) : JSON.stringify(item);\n      return <li key={i}>{node}</li>;\n    }),\n  );\n}\n","/**\n * Default @playgenx/components barrel.\n *\n * Re-exports every component named in `DEFAULT_REGISTRY` and a\n * `componentMap` keyed by PascalCase component name, so render-time\n * code can do `ComponentMap[tagName](props)`.\n *\n * @packageDocumentation\n */\n\nexport { Button, type ButtonProps } from './Button.js';\nexport { TextField, type TextFieldProps } from './TextField.js';\nexport { Slider, type SliderProps } from './Slider.js';\nexport { Chart, type ChartProps, type ChartKind } from './Chart.js';\nexport { Container, type ContainerProps } from './Container.js';\nexport { Code, type CodeProps } from './Code.js';\nexport { Heading, type HeadingProps } from './Heading.js';\nexport { Text, type TextProps } from './Text.js';\nexport { Stepper, type StepperProps, type Step } from './Stepper.js';\nexport { Card, type CardProps } from './Card.js';\nexport { List, type ListProps } from './List.js';\n\nimport type { ComponentType } from 'react';\nimport { Button } from './Button.js';\nimport { TextField } from './TextField.js';\nimport { Slider } from './Slider.js';\nimport { Chart } from './Chart.js';\nimport { Container } from './Container.js';\nimport { Code } from './Code.js';\nimport { Heading } from './Heading.js';\nimport { Text } from './Text.js';\nimport { Stepper } from './Stepper.js';\nimport { Card } from './Card.js';\nimport { List } from './List.js';\n\n/**\n * Map of PascalCase component name to React component. Use this when\n * you have a renderer that walks an AST and needs to pick an\n * implementation at runtime:\n *\n *   const C = componentMap[tagName];\n *   if (C) el = <C {...props}>{children}</C>;\n *\n * Keys mirror `DEFAULT_REGISTRY.list()`.\n *\n * Type note: components vary in their props shape, so the map is\n * typed permissively (`Record<string, ComponentType<any>>`). Each\n * individual export above is still strictly typed.\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const componentMap: Record<string, ComponentType<any>> = {\n  Button,\n  TextField,\n  Slider,\n  Chart,\n  Container,\n  Code,\n  Heading,\n  Text,\n  Stepper,\n  Card,\n  List,\n};\n\nexport type ComponentMapKey = keyof typeof componentMap;\n"],"mappings":"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"}

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@playgenx/components",
+  "version": "0.1.0",
+  "description": "Default React 19 implementations for every entry in DEFAULT_REGISTRY. Pair with @playgenx/registry and the parser/validator pipeline.",
+  "type": "module",
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsdown",
+    "lint": "eslint src",
+    "test": "vitest --run"
+  },
+  "keywords": [
+    "playgenx",
+    "react",
+    "components"
+  ],
+  "author": "xorinf <118471720+xorinf@users.noreply.github.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/xorinf/playgenx.git",
+    "directory": "packages/components"
+  },
+  "bugs": {
+    "url": "https://github.com/xorinf/playgenx/issues"
+  },
+  "homepage": "https://github.com/xorinf/playgenx/tree/main/packages/components",
+  "publishConfig": {
+    "access": "public"
+  },
+  "tsdown": {
+    "entry": [
+      "src/index.ts"
+    ],
+    "format": [
+      "esm"
+    ],
+    "dts": true,
+    "sourcemap": true,
+    "clean": true,
+    "deps": {
+      "alwaysBundle": [
+        "^@playgenx/"
+      ]
+    }
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@playgenx/registry": "workspace:*",
+    "@testing-library/react": "^16.2.0",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "jsdom": "^25.0.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tsdown": "^0.22.4",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
+  }
+}