@fiestaboard/ui 3.0.1 → 3.2.0

package/dist/components/containment/json-tree.d.ts

@@ -0,0 +1,59 @@
+import * as React from "react";
+export interface JsonTreeLabels {
+    /**
+     * Accessible name (and tooltip) for a leaf's select button.
+     * Default: `` (path) => `Use path: ${path}` ``
+     */
+    selectPath?: (path: string) => string;
+    /**
+     * Accessible name for a branch's expand/collapse toggle — the visible
+     * `{3}` / `[2]` summary is decorative and hidden from assistive tech.
+     * Default: `` (path, count) => `${path} (${count} items)` ``
+     */
+    toggleNode?: (path: string, count: number) => string;
+    /** Stands in for the path of the root node, which has none. Default: `"root"` */
+    root?: string;
+    /** Announced politely after a leaf is selected. Default: `"Path copied"` */
+    selected?: string;
+    /** Shown in place of children for an empty object or array. Default: `"empty"` */
+    empty?: string;
+}
+export interface JsonTreeProps {
+    /** Any JSON-shaped value. Objects and arrays branch; everything else is a leaf. */
+    data: unknown;
+    /**
+     * Dot/bracket path of `data` itself, prefixed onto every child path.
+     * Defaults to `""`, which makes children read `a.b[0]` rather than `.a.b[0]`.
+     */
+    path?: string;
+    /**
+     * Called with the dot/bracket path of the leaf the user picked and its
+     * value. Omit for a read-only tree: the per-leaf select buttons disappear.
+     */
+    onSelect?: (path: string, value: unknown) => void;
+    /** Expand this node on first render. Default: `false`. */
+    defaultExpanded?: boolean;
+    /**
+     * Expand the first N levels on first render — `2` opens this node and its
+     * direct branch children. Default: `0`.
+     */
+    defaultExpandedDepth?: number;
+    labels?: JsonTreeLabels;
+    className?: string;
+}
+/**
+ * A collapsible JSON tree whose every leaf offers its own dot/bracket path.
+ *
+ * It knows nothing about plugins, settings, or where the data came from — it
+ * renders a value and reports the path the user picked — so any surface that
+ * needs "show me this response and let me point at part of it" can use it.
+ *
+ * Branches are nested WAI-ARIA **disclosures**, not a `role="tree"`: a correct
+ * tree owes callers a roving tabindex and full arrow-key navigation across a
+ * recursive component boundary, and a half-built one is worse than none — it
+ * would strip Tab access from the nested select buttons while advertising an
+ * interaction contract the widget doesn't honour. Disclosures are keyboard
+ * complete out of the box (Tab to reach, Enter/Space to toggle); Arrow
+ * Left/Right are wired up on top as the affordance tree users reach for.
+ */
+export declare function JsonTree({ data, path, onSelect, defaultExpanded, defaultExpandedDepth, labels, className, }: JsonTreeProps): React.JSX.Element;

package/dist/components/containment/json-tree.js

@@ -0,0 +1,122 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Check as t, ChevronDown as n, ChevronRight as r, Copy as i } from "lucide-react";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/containment/json-tree.tsx
+var c = {
+	string: "text-success",
+	number: "text-warning",
+	boolean: "text-warning",
+	nullish: "text-muted-foreground italic",
+	other: "text-foreground"
+}, l = "text-info", u = "text-tag-variable-foreground", d = "-ml-1 flex w-full items-center gap-1 rounded-sm px-1 py-0.5 text-left text-xs text-muted-foreground transition-colors duration-control hover:bg-muted/60 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]", f = "shrink-0 rounded-sm p-0.5 opacity-0 transition-opacity duration-control hover:bg-muted group-hover:opacity-100 focus-visible:opacity-100 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]", p = 1500;
+function m(e) {
+	return typeof e == "object" && !!e;
+}
+function h(e) {
+	if (e == null) return c.nullish;
+	switch (typeof e) {
+		case "string": return c.string;
+		case "number":
+		case "bigint": return c.number;
+		case "boolean": return c.boolean;
+		default: return c.other;
+	}
+}
+function g(e) {
+	return e == null ? "null" : typeof e == "string" ? `"${e}"` : String(e);
+}
+function _({ data: c, path: v = "", onSelect: y, defaultExpanded: b = !1, defaultExpandedDepth: x = 0, labels: S, className: C }) {
+	let { selectPath: w = (e) => `Use path: ${e}`, toggleNode: T = (e, t) => `${e} (${t} ${t === 1 ? "item" : "items"})`, root: E = "root", selected: D = "Path copied", empty: O = "empty" } = S ?? {}, k = x > 0, [A, j] = a.useState(b || k), [M, N] = a.useState(b || k), [P, F] = a.useState(null), I = a.useId(), L = a.useRef(null);
+	a.useEffect(() => () => {
+		L.current !== null && clearTimeout(L.current);
+	}, []);
+	function R(e, t) {
+		y?.(e, t), F(e), L.current !== null && clearTimeout(L.current), L.current = setTimeout(() => F(null), p);
+	}
+	function z() {
+		j((e) => !e), N(!0);
+	}
+	function B(e) {
+		e.key === "ArrowRight" && !A ? (e.preventDefault(), z()) : e.key === "ArrowLeft" && A && (e.preventDefault(), j(!1));
+	}
+	if (!m(c)) return /* @__PURE__ */ o("span", {
+		"data-slot": "json-tree-value",
+		className: e("font-mono text-xs", h(c), C),
+		children: g(c)
+	});
+	let V = Array.isArray(c), H = V ? c.map((e, t) => [String(t), e]) : Object.entries(c), U = V ? `[${H.length}]` : `{${H.length}}`, W = Math.max(0, x - 1);
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "json-tree",
+		className: e("ml-1", C),
+		children: [
+			/* @__PURE__ */ s("button", {
+				type: "button",
+				"aria-expanded": A,
+				"aria-controls": M ? I : void 0,
+				onClick: z,
+				onKeyDown: B,
+				className: d,
+				children: [
+					o(A ? n : r, { className: "size-3 shrink-0" }),
+					/* @__PURE__ */ o("span", {
+						"aria-hidden": "true",
+						className: "font-mono",
+						children: U
+					}),
+					/* @__PURE__ */ o("span", {
+						className: "sr-only",
+						children: T(v || E, H.length)
+					})
+				]
+			}),
+			M && /* @__PURE__ */ o("span", {
+				role: "status",
+				className: "sr-only",
+				children: P === null ? "" : D
+			}),
+			M && /* @__PURE__ */ s("ul", {
+				id: I,
+				hidden: !A,
+				className: "ml-3 flex flex-col gap-0.5 border-l border-border pl-2 [&[hidden]]:hidden",
+				children: [H.length === 0 && /* @__PURE__ */ o("li", {
+					className: "text-xs italic text-muted-foreground",
+					children: O
+				}), H.map(([n, r]) => {
+					let a = V ? `${v}[${n}]` : v ? `${v}.${n}` : n, c = V ? `[${n}]:` : `${n}:`;
+					return /* @__PURE__ */ s("li", {
+						className: "flex items-start gap-1",
+						children: [/* @__PURE__ */ o("span", {
+							className: e("shrink-0 pt-0.5 font-mono text-xs font-medium", V ? u : l),
+							children: c
+						}), m(r) ? /* @__PURE__ */ o(_, {
+							data: r,
+							path: a,
+							onSelect: y,
+							defaultExpandedDepth: W,
+							labels: S
+						}) : /* @__PURE__ */ s("span", {
+							className: "group flex min-w-0 items-center gap-1",
+							children: [/* @__PURE__ */ o("span", {
+								className: e("truncate font-mono text-xs", h(r)),
+								children: g(r)
+							}), y && /* @__PURE__ */ o("button", {
+								type: "button",
+								onClick: () => R(a, r),
+								"aria-label": w(a),
+								title: w(a),
+								className: f,
+								children: P === a ? /* @__PURE__ */ o(t, { className: "size-3 text-success" }) : /* @__PURE__ */ o(i, { className: "size-3 text-muted-foreground" })
+							})]
+						})]
+					}, n);
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { _ as JsonTree };
+
+//# sourceMappingURL=json-tree.js.map

package/dist/components/containment/json-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"json-tree.js","names":[],"sources":["../../../src/components/containment/json-tree.tsx"],"mappings":"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"}

package/dist/components/editor/color-picker-content.d.ts

@@ -0,0 +1,25 @@
+import { type BoardColorName } from "../../lib/board-colors";
+import type { DeviceType } from "../../lib/board-dimensions";
+export interface ColorPickerLabels {
+    /** Accessible name for the swatch grid. */
+    colorPickerAriaLabel: string;
+    /**
+     * Display name per board color. Maps 1:1 to the app's
+     * `templateEditor.drawColors` catalog — the app's picker rendered the raw
+     * English key, which is the one string in it that never got translated.
+     */
+    colorNames: Record<BoardColorName, string>;
+    /** Accessible name for one swatch, given its display name. */
+    colorOptionLabel: (colorName: string) => string;
+    heartCharacterAriaLabel: string;
+    heartLabel: string;
+    insertHeartTooltip: string;
+}
+export declare const DEFAULT_COLOR_PICKER_LABELS: ColorPickerLabels;
+export interface ColorPickerContentProps {
+    /** Receives a template color token, e.g. `{{red}}` — or `°` for the Note heart. */
+    onInsert: (colorValue: string) => void;
+    deviceType?: DeviceType;
+    labels?: Partial<ColorPickerLabels>;
+}
+export declare function ColorPickerContent({ onInsert, deviceType, labels }: ColorPickerContentProps): import("react").JSX.Element;

package/dist/components/editor/color-picker-content.js

@@ -0,0 +1,118 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Box as t } from "../layout/box.js";
+import { Grid as n } from "../layout/grid.js";
+import { Text as r } from "../typography/text.js";
+import { Tooltip as i, TooltipContent as a, TooltipProvider as o, TooltipTrigger as s } from "../overlays/tooltip.js";
+import { AVAILABLE_COLORS as c, COLOR_DISPLAY as l } from "../../lib/board-colors.js";
+import { Heart as u } from "lucide-react";
+import { useRef as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/editor/color-picker-content.tsx
+var h = {
+	colorPickerAriaLabel: "Color picker",
+	colorNames: {
+		red: "Red",
+		orange: "Orange",
+		yellow: "Yellow",
+		green: "Green",
+		blue: "Blue",
+		violet: "Violet",
+		white: "White",
+		black: "Black"
+	},
+	colorOptionLabel: (e) => `${e} color`,
+	heartCharacterAriaLabel: "Heart character",
+	heartLabel: "heart",
+	insertHeartTooltip: "Insert heart character (Note only)"
+}, g = c, _ = { red: "text-black" }, v = 4;
+function y({ onInsert: c, deviceType: y, labels: b }) {
+	let x = {
+		...h,
+		...b
+	}, S = y === "note", [C, w] = f(-1), T = d([]), E = (e) => {
+		let t = (e % g.length + g.length) % g.length;
+		w(t);
+		let n = T.current[t];
+		n?.scrollIntoView({
+			block: "nearest",
+			behavior: "smooth"
+		}), n?.focus();
+	};
+	return /* @__PURE__ */ p(o, { children: /* @__PURE__ */ m(t, {
+		className: e("p-2", !S && "pb-1"),
+		tabIndex: 0,
+		role: "listbox",
+		"aria-label": x.colorPickerAriaLabel,
+		onKeyDown: (e) => {
+			switch (e.key) {
+				case "ArrowRight":
+					e.preventDefault(), E(C + 1);
+					break;
+				case "ArrowLeft":
+					e.preventDefault(), E(C - 1);
+					break;
+				case "ArrowDown":
+					e.preventDefault(), E(C + v);
+					break;
+				case "ArrowUp":
+					e.preventDefault(), E(C - v);
+					break;
+				case "Enter":
+				case " ": e.preventDefault(), c(`{{${g[C] ?? g[0]}}}`);
+			}
+		},
+		onFocus: (e) => {
+			e.target === e.currentTarget && C === -1 && E(0);
+		},
+		children: [/* @__PURE__ */ p(n, {
+			cols: "4",
+			gap: "2",
+			className: "w-64",
+			role: "presentation",
+			children: g.map((t, n) => {
+				let o = C === n;
+				return /* @__PURE__ */ m(i, { children: [/* @__PURE__ */ p(s, {
+					asChild: !0,
+					children: /* @__PURE__ */ p("button", {
+						ref: (e) => {
+							T.current[n] = e;
+						},
+						type: "button",
+						onClick: () => c(`{{${t}}}`),
+						onFocus: () => w(n),
+						className: e("h-10 rounded-md text-xs font-medium transition-all hover:scale-105 hover:shadow-md", "flex items-center justify-center focus:outline-none", o && "ring-2 ring-offset-2 ring-primary scale-105 shadow-md", l[t].bg, _[t] ?? l[t].text),
+						"aria-label": x.colorOptionLabel(x.colorNames[t]),
+						role: "option",
+						"aria-selected": o,
+						children: x.colorNames[t]
+					})
+				}), /* @__PURE__ */ p(a, { children: /* @__PURE__ */ p(r, { children: x.colorNames[t] }) })] }, t);
+			})
+		}), S && /* @__PURE__ */ p(t, {
+			className: "mt-2 pt-2 border-t border-border",
+			role: "presentation",
+			children: /* @__PURE__ */ m(i, { children: [/* @__PURE__ */ p(s, {
+				asChild: !0,
+				children: /* @__PURE__ */ m("button", {
+					type: "button",
+					onClick: () => c("°"),
+					className: e("w-full h-10 rounded-md text-sm font-medium transition-all hover:scale-[1.02] hover:shadow-md", "flex items-center justify-center gap-1.5 focus:outline-none", "bg-board-red/10 text-board-red border border-board-red/20 hover:bg-board-red/20"),
+					"aria-label": x.heartCharacterAriaLabel,
+					role: "option",
+					"aria-selected": !1,
+					children: [/* @__PURE__ */ p(u, { className: "w-4 h-4 fill-current" }), /* @__PURE__ */ p(r, {
+						as: "span",
+						weight: "medium",
+						className: "text-board-red",
+						children: x.heartLabel
+					})]
+				})
+			}), /* @__PURE__ */ p(a, { children: /* @__PURE__ */ p(r, { children: x.insertHeartTooltip }) })] })
+		})]
+	}) });
+}
+//#endregion
+export { y as ColorPickerContent, h as DEFAULT_COLOR_PICKER_LABELS };
+
+//# sourceMappingURL=color-picker-content.js.map

package/dist/components/editor/color-picker-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-picker-content.js","names":[],"sources":["../../../src/components/editor/color-picker-content.tsx"],"mappings":"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"}

package/dist/components/editor/constants.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Constants for the TipTap template editor.
+ * Maps template syntax to FiestaBoard hardware constraints.
+ *
+ * PORTING NOTE — this file is deliberately thin. The FiestaBoard app's
+ * `tiptap-template-editor/utils/constants.ts` re-declared the device grid, the
+ * board palette and the board character set, all of which FiestaUI already owns
+ * in `src/lib/`. Duplicating them here would give the package two sources of
+ * truth for a hardware parity contract. So everything that already exists is
+ * re-exported, and only genuinely new editor-specific values are defined below.
+ *
+ * Already owned by FiestaUI (re-exported, never redefined):
+ *   - DeviceType / DEVICE_DIMENSIONS / resolveDimensions → lib/board-dimensions
+ *   - BOARD_COLORS (name → hex) / BoardColorName          → lib/board-colors
+ *   - BOARD_CHARS (code → character)                      → lib/board-characters
+ */
+import type { BoardColorName } from "../../lib/board-colors";
+import type { BoardDimensions } from "../../lib/board-dimensions";
+export { BOARD_CHARS } from "../../lib/board-characters";
+export { BOARD_COLORS, type BoardColorName } from "../../lib/board-colors";
+export { type BoardDimensions, DEVICE_DIMENSIONS, type DeviceType, resolveDimensions, } from "../../lib/board-dimensions";
+/**
+ * `DeviceDimensions` was the app's name for the { rows, cols } shape that
+ * FiestaUI calls `BoardDimensions`. Aliased so ported editor code reads the
+ * same, without a second interface declaration.
+ */
+export type DeviceDimensions = BoardDimensions;
+/**
+ * Color names usable inside a template token, including the `purple` alias for
+ * `violet`. Wider than `BoardColorName` (which is the hardware palette) because
+ * template authors may type either spelling.
+ */
+export type BoardColorToken = BoardColorName | "purple";
+/**
+ * FiestaBoard color codes (63–70), keyed by template token name.
+ *
+ * NEW: FiestaUI's `lib/board-colors` maps names → hex and codes → hex, but has
+ * no name → numeric code direction. The editor needs it because a colorTile
+ * node stores the numeric code the board hardware addresses.
+ *
+ * The `satisfies` clause fails the build if a palette color is ever added to
+ * BOARD_COLORS without a code being assigned here.
+ */
+export declare const BOARD_COLOR_CODES: {
+    readonly red: 63;
+    readonly orange: 64;
+    readonly yellow: 65;
+    readonly green: 66;
+    readonly blue: 67;
+    readonly violet: 68;
+    readonly purple: 68;
+    readonly white: 69;
+    readonly black: 70;
+};
+/**
+ * Numeric board codes → canonical color names (71 = filled tile; the closest
+ * palette entry is black). Inverse of BOARD_COLOR_CODES, minus the alias.
+ */
+export declare const BOARD_CODE_TO_COLOR: Record<number, BoardColorName>;
+/**
+ * Flagship geometry, used ONLY as a default when no device is known.
+ *
+ * The app's constants.ts exported these as `BOARD_WIDTH` / `BOARD_LINES` and
+ * modules imported them directly, which silently hard-coded flagship even when
+ * the caller was editing a Note template. They are renamed to DEFAULT_* here so
+ * that reaching for one is a visible choice: anything that knows its device
+ * MUST take the width / line count as a parameter (see length-calculator.ts).
+ */
+export declare const DEFAULT_BOARD_WIDTH: number;
+export declare const DEFAULT_BOARD_LINES: number;
+/** Special variable names. */
+export declare const FILL_SPACE_VAR = "fill_space";
+export declare const FILL_SPACE_REPEAT_VAR = "fill_space_repeat";
+/**
+ * Zero-width space (U+200B) inserted at the start and end of each line, and on
+ * both sides of every inline atom, so the caret always has a text node to sit
+ * in. Without it the cursor does not render at line boundaries, and it
+ * "selects" atom nodes during arrow navigation.
+ *
+ * Stripped on serialize so it never appears in a saved template string.
+ *
+ * Single source of truth: the app declared this character separately in
+ * serialization.ts, stroke-transaction.ts and trailing-newline.ts (each with a
+ * "mirroring serialization.ts" comment). Three copies of one caret contract is
+ * exactly the drift those comments were warning about, so it lives here.
+ */
+export declare const CURSOR_ANCHOR = "\u200B";

package/dist/components/editor/constants.js

@@ -0,0 +1,29 @@
+import "../../lib/board-colors.js";
+import "../../lib/board-characters.js";
+import { DEVICE_DIMENSIONS as e, resolveDimensions as t } from "../../lib/board-dimensions.js";
+//#region src/components/editor/constants.ts
+var n = {
+	red: 63,
+	orange: 64,
+	yellow: 65,
+	green: 66,
+	blue: 67,
+	violet: 68,
+	purple: 68,
+	white: 69,
+	black: 70
+}, r = {
+	63: "red",
+	64: "orange",
+	65: "yellow",
+	66: "green",
+	67: "blue",
+	68: "violet",
+	69: "white",
+	70: "black",
+	71: "black"
+}, i = e.flagship.cols, a = e.flagship.rows, o = "fill_space", s = "fill_space_repeat", c = "​";
+//#endregion
+export { r as BOARD_CODE_TO_COLOR, n as BOARD_COLOR_CODES, c as CURSOR_ANCHOR, a as DEFAULT_BOARD_LINES, i as DEFAULT_BOARD_WIDTH, s as FILL_SPACE_REPEAT_VAR, o as FILL_SPACE_VAR, t as resolveDimensions };
+
+//# sourceMappingURL=constants.js.map

package/dist/components/editor/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":[],"sources":["../../../src/components/editor/constants.ts"],"mappings":";;;;AAwDA,IAAa,IAAoB;CAC/B,KAAK;CACL,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,OAAO;CACP,OAAO;AACT,GAMa,IAAsD;CACjE,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAaa,IAAsB,EAAkB,SAAS,MACjD,IAAsB,EAAkB,SAAS,MAKjD,IAAiB,cACjB,IAAwB,qBAexB,IAAgB"}

package/dist/components/editor/draw-char-picker-content.d.ts

@@ -0,0 +1,22 @@
+import type { DeviceType } from "../../lib/board-dimensions";
+import type { DrawBrush } from "./utils/draw-mode";
+export interface DrawCharPickerLabels {
+    /** Accessible name for the character grid. */
+    characters: string;
+    /** Accessible name for the code-62 button on Flagship hardware. */
+    degree: string;
+    /** Accessible name for the code-62 button on a Note, where it draws a heart. */
+    heart: string;
+}
+export declare const DEFAULT_DRAW_CHAR_PICKER_LABELS: DrawCharPickerLabels;
+export interface DrawCharPickerContentProps {
+    current: DrawBrush;
+    onSelect: (brush: DrawBrush) => void;
+    /**
+     * Board the template targets. Only affects how code 62 is drawn and named —
+     * the inserted character is the degree symbol either way.
+     */
+    deviceType?: DeviceType;
+    labels?: Partial<DrawCharPickerLabels>;
+}
+export declare function DrawCharPickerContent({ current, onSelect, deviceType, labels }: DrawCharPickerContentProps): import("react").JSX.Element;

package/dist/components/editor/draw-char-picker-content.js

@@ -0,0 +1,79 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Box as t } from "../layout/box.js";
+import { Grid as n } from "../layout/grid.js";
+import { DRAW_CHARS as r } from "./utils/draw-mode.js";
+import { useRef as i, useState as a } from "react";
+import { jsx as o } from "react/jsx-runtime";
+//#region src/components/editor/draw-char-picker-content.tsx
+var s = "°", c = "♥", l = {
+	characters: "Characters",
+	degree: "Degree",
+	heart: "Heart"
+}, u = 8;
+function d({ current: d, onSelect: f, deviceType: p, labels: m }) {
+	let h = {
+		...l,
+		...m
+	}, g = p === "note", _ = d.kind === "char" ? d.char : null, v = i([]), [y, b] = a(() => {
+		let e = _ ? r.indexOf(_) : -1;
+		return e >= 0 ? e : 0;
+	}), x = (e) => {
+		let t = (e % r.length + r.length) % r.length;
+		b(t), v.current[t]?.focus();
+	}, S = (e, t) => {
+		switch (e.key) {
+			case "ArrowRight":
+				e.preventDefault(), x(t + 1);
+				break;
+			case "ArrowLeft":
+				e.preventDefault(), x(t - 1);
+				break;
+			case "ArrowDown":
+				e.preventDefault(), x(t + u);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), x(t - u);
+				break;
+			case "Home":
+				e.preventDefault(), x(0);
+				break;
+			case "End": e.preventDefault(), x(r.length - 1);
+		}
+	};
+	return /* @__PURE__ */ o(t, {
+		className: "w-64 p-2",
+		"data-testid": "draw-char-picker",
+		role: "group",
+		"aria-label": h.characters,
+		children: /* @__PURE__ */ o(n, {
+			cols: "8",
+			gap: "1",
+			children: r.map((t, n) => {
+				let r = t === s, i = r && g ? c : t;
+				return /* @__PURE__ */ o("button", {
+					ref: (e) => {
+						v.current[n] = e;
+					},
+					type: "button",
+					"data-draw-char": t,
+					tabIndex: n === y ? 0 : -1,
+					"aria-pressed": _ === t,
+					"aria-label": r ? g ? h.heart : h.degree : t,
+					onClick: () => f({
+						kind: "char",
+						char: t
+					}),
+					onFocus: () => b(n),
+					onKeyDown: (e) => S(e, n),
+					className: e("flex h-7 w-7 items-center justify-center rounded-md border font-mono text-sm transition-shadow", _ === t ? "ring-2 ring-primary ring-offset-1" : "hover:bg-muted/50"),
+					children: i
+				}, t);
+			})
+		})
+	});
+}
+//#endregion
+export { l as DEFAULT_DRAW_CHAR_PICKER_LABELS, d as DrawCharPickerContent };
+
+//# sourceMappingURL=draw-char-picker-content.js.map

package/dist/components/editor/draw-char-picker-content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw-char-picker-content.js","names":[],"sources":["../../../src/components/editor/draw-char-picker-content.tsx"],"mappings":";;;;;;;;AA0BA,IAAM,IAAc,KAEd,IAAkB,KAWX,IAAwD;CACnE,YAAY;CACZ,QAAQ;CACR,OAAO;AACT,GAaM,IAAY;AAElB,SAAgB,EAAsB,EAAE,YAAS,aAAU,eAAY,aAAsC;CAC3G,IAAM,IAAI;EAAE,GAAG;EAAiC,GAAG;CAAO,GAIpD,IAAS,MAAe,QACxB,IAAe,EAAQ,SAAS,SAAS,EAAQ,OAAO,MACxD,IAAa,EAAqC,CAAC,CAAC,GAGpD,CAAC,GAAc,KAAmB,QAAe;EACrD,IAAM,IAAgB,IAAe,EAAW,QAAQ,CAAY,IAAI;EACxE,OAAO,KAAiB,IAAI,IAAgB;CAC9C,CAAC,GAEK,KAAa,MAAkB;EACnC,IAAM,KAAY,IAAQ,EAAW,SAAU,EAAW,UAAU,EAAW;EAE/E,AADA,EAAgB,CAAO,GACvB,EAAW,QAAQ,EAAQ,EAAE,MAAM;CACrC,GAEM,KAAiB,GAA+C,MAAkB;EACtF,QAAQ,EAAM,KAAd;GACE,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAC;IACnB;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAC;IACnB;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAS;IAC3B;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,IAAQ,CAAS;IAC3B;GACF,KAAK;IAEH,AADA,EAAM,eAAe,GACrB,EAAU,CAAC;IACX;GACF,KAAK,OAEH,AADA,EAAM,eAAe,GACrB,EAAU,EAAW,SAAS,CAAC;EAEnC;CACF;CAEA,OAKE,kBAAC,GAAD;EAAK,WAAU;EAAW,eAAY;EAAmB,MAAK;EAAQ,cAAY,EAAE;EAClF,UAAA,kBAAC,GAAD;GAAM,MAAK;GAAI,KAAI;GAChB,UAAA,EAAW,KAAK,GAAM,MAAU;IAG/B,IAAM,IAAW,MAAS,GACpB,IAAQ,KAAY,IAAS,IAAkB;IAErD,OACE,kBAAC,UAAD;KAEE,MAAM,MAAO;MACX,EAAW,QAAQ,KAAS;KAC9B;KACA,MAAK;KACL,kBAAgB;KAChB,UAAU,MAAU,IAAe,IAAI;KACvC,gBAAc,MAAiB;KAC/B,cAAY,IAAY,IAAS,EAAE,QAAQ,EAAE,SAAU;KACvD,eAAe,EAAS;MAAE,MAAM;MAAQ;KAAK,CAAC;KAC9C,eAAe,EAAgB,CAAK;KACpC,YAAY,MAAU,EAAc,GAAO,CAAK;KAChD,WAAW,EACT,kGACA,MAAiB,IAAO,sCAAsC,mBAChE;KAEC,UAAA;IACK,GAlBD,CAkBC;GAEZ,CAAC;EACG,CAAA;CACH,CAAA;AAET"}

package/dist/components/editor/extensions/color-tile-node.d.ts

@@ -0,0 +1,10 @@
+/**
+ * ColorTileNode - Inline node for {{red}}, {{blue}}, etc.
+ * Renders as actual colored tiles matching FiestaBoard hardware
+ */
+import { Node } from "@tiptap/core";
+export interface ColorTileAttrs {
+    color: string;
+    code: number;
+}
+export declare const ColorTileNode: Node<any, any>;

package/dist/components/editor/extensions/color-tile-node.js

@@ -0,0 +1,43 @@
+"use client";
+import { ColorTileNodeView as e } from "../node-views/color-tile-node-view.js";
+import { ReactNodeViewRenderer as t } from "@tiptap/react";
+import { Node as n, mergeAttributes as r } from "@tiptap/core";
+//#region src/components/editor/extensions/color-tile-node.ts
+var i = n.create({
+	name: "colorTile",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	selectable: !1,
+	draggable: !0,
+	addAttributes() {
+		return {
+			color: {
+				default: "red",
+				parseHTML: (e) => e.getAttribute("data-color"),
+				renderHTML: (e) => ({ "data-color": e.color })
+			},
+			code: {
+				default: 63,
+				parseHTML: (e) => {
+					let t = e.getAttribute("data-code");
+					return t ? parseInt(t, 10) : 63;
+				},
+				renderHTML: (e) => ({ "data-code": e.code?.toString() || "63" })
+			}
+		};
+	},
+	parseHTML() {
+		return [{ tag: "span[data-type=\"color-tile\"]" }];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["span", r({ "data-type": "color-tile" }, e)];
+	},
+	addNodeView() {
+		return t(e);
+	}
+});
+//#endregion
+export { i as ColorTileNode };
+
+//# sourceMappingURL=color-tile-node.js.map

package/dist/components/editor/extensions/color-tile-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-tile-node.js","names":[],"sources":["../../../../src/components/editor/extensions/color-tile-node.ts"],"mappings":";;;;;AAgBA,IAAa,IAAgB,EAAK,OAAO;CACvC,MAAM;CAEN,OAAO;CAEP,QAAQ;CAER,MAAM;CAEN,YAAY;CAEZ,WAAW;CAEX,gBAAgB;EACd,OAAO;GACL,OAAO;IACL,SAAS;IACT,YAAY,MAAY,EAAQ,aAAa,YAAY;IACzD,aAAa,OAAgB,EAC3B,cAAc,EAAW,MAC3B;GACF;GACA,MAAM;IACJ,SAAS;IACT,YAAY,MAAY;KACtB,IAAM,IAAO,EAAQ,aAAa,WAAW;KAC7C,OAAO,IAAO,SAAS,GAAM,EAAE,IAAI;IACrC;IACA,aAAa,OAAgB,EAC3B,aAAa,EAAW,MAAM,SAAS,KAAK,KAC9C;GACF;EACF;CACF;CAEA,YAAY;EACV,OAAO,CACL,EACE,KAAK,iCACP,CACF;CACF;CAEA,WAAW,EAAE,qBAAkB;EAC7B,OAAO,CAAC,QAAQ,EAAgB,EAAE,aAAa,aAAa,GAAG,CAAc,CAAC;CAChF;CAEA,cAAc;EACZ,OAAO,EAAsB,CAAiB;CAChD;AACF,CAAC"}

package/dist/components/editor/extensions/fill-space-node.d.ts

@@ -0,0 +1,10 @@
+/**
+ * FillSpaceNode - Inline node for {{fill_space}}
+ * Visualizes expandable spacing that fills remaining line width
+ */
+import { Node } from "@tiptap/core";
+export interface FillSpaceAttrs {
+    id: string;
+    repeatChar?: string;
+}
+export declare const FillSpaceNode: Node<any, any>;