@fiestaboard/ui 3.1.0 → 3.2.0

package/dist/components/editor/node-views/fill-space-node-view.js

@@ -0,0 +1,43 @@
+"use client";
+import { Badge as e } from "../../feedback/badge.js";
+import { Text as t } from "../../typography/text.js";
+import { Tooltip as n, TooltipContent as r, TooltipProvider as i, TooltipTrigger as a } from "../../overlays/tooltip.js";
+import { useNodeViewInjection as o } from "./node-view-context.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { NodeViewWrapper as l } from "@tiptap/react";
+//#region src/components/editor/node-views/fill-space-node-view.tsx
+var u = {
+	fillSpaceTooltip: "Fill space - expands to fill remaining line width",
+	fillSpaceRepeatTooltip: (e) => `Fill space repeating: ${e}`
+};
+function d({ node: d, labels: f }) {
+	let p = o(), m = {
+		...u,
+		...p.labels,
+		...f
+	}, { repeatChar: h } = d.attrs, g = h && h !== " " ? h : null;
+	return /* @__PURE__ */ s(l, {
+		as: "span",
+		"data-drag-handle": !0,
+		style: {
+			display: "inline-flex",
+			verticalAlign: "baseline",
+			whiteSpace: "nowrap"
+		},
+		children: /* @__PURE__ */ s(i, { children: /* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s(a, {
+			asChild: !0,
+			children: /* @__PURE__ */ s(e, {
+				variant: "success",
+				className: "group inline-flex flex-nowrap items-center px-1.5 py-0 border-dashed cursor-grab hover:bg-tag-success/25 mr-0.5 transition-all duration-control",
+				children: /* @__PURE__ */ c("span", {
+					className: "font-mono text-[11px] leading-none",
+					children: ["fill_space", g && `_repeat:${g}`]
+				})
+			})
+		}), /* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(t, { children: g ? m.fillSpaceRepeatTooltip(g) : m.fillSpaceTooltip }) })] }) })
+	});
+}
+//#endregion
+export { u as DEFAULT_FILL_SPACE_NODE_VIEW_LABELS, d as FillSpaceNodeView };
+
+//# sourceMappingURL=fill-space-node-view.js.map

package/dist/components/editor/node-views/fill-space-node-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill-space-node-view.js","names":[],"sources":["../../../../src/components/editor/node-views/fill-space-node-view.tsx"],"mappings":";;;;;;;;AA2BA,IAAa,IAA+D;CAC1E,kBAAkB;CAClB,yBAAyB,MAAS,yBAAyB;AAC7D;AAMA,SAAgB,EAAkB,EAAE,SAAM,aAAkC;CAC1E,IAAM,IAAW,EAAqB,GAChC,IAAI;EAAE,GAAG;EAAqC,GAAG,EAAS;EAAQ,GAAG;CAAO,GAC5E,EAAE,kBAAe,EAAK,OAItB,IAAS,KAAc,MAAe,MAAM,IAAa;CAE/D,OACE,kBAAC,GAAD;EACE,IAAG;EACH,oBAAA;EACA,OAAO;GACL,SAAS;GACT,eAAe;GACf,YAAY;EACd;EAEA,UAAA,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAgB,SAAA;GACd,UAAA,kBAAC,GAAD;IACE,SAAQ;IACR,WAAU;IASV,UAAA,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CAAqD,cAAW,KAAU,WAAW,GAAe;;GAC/F,CAAA;EACO,CAAA,GAChB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAO,IAAS,EAAE,uBAAuB,CAAM,IAAI,EAAE,iBAAuB,CAAA,EAC9D,CAAA,CACT,EAAA,CAAA,EACM,CAAA;CACF,CAAA;AAErB"}

package/dist/components/editor/node-views/formula-node-view.d.ts

@@ -0,0 +1,39 @@
+/**
+ * FormulaNodeView — React NodeView for Formula nodes.
+ *
+ * Renders as an amber badge pill showing ƒ + truncated expression preview.
+ * Clicking opens a centered modal FormulaEditorPanel via a portal into
+ * document.body (escapes the ProseMirror container).
+ *
+ * The modal does NOT close on backdrop click — only on Esc / Done / Cancel.
+ */
+import type { ReactNodeViewProps } from "@tiptap/react";
+import { type ReactNode } from "react";
+export interface FormulaNodeViewLabels {
+    /** Pill preview text for a formula that has no expression yet. */
+    newFormula: string;
+    /** Hint under the tooltip's expression preview. */
+    clickToEditFormula: string;
+}
+export declare const DEFAULT_FORMULA_NODE_VIEW_LABELS: FormulaNodeViewLabels;
+/** What the node view hands the formula-editor slot when the modal opens. */
+export interface FormulaEditorSlotContext {
+    /** The current expression, without the `{{= }}` wrapper. */
+    initialExpr: string;
+    /** Commit a new expression and close the modal. */
+    onConfirm: (expression: string) => void;
+    /** Close the modal, deleting the node if it never got an expression. */
+    onCancel: () => void;
+}
+export type FormulaNodeViewProps = ReactNodeViewProps & {
+    labels?: Partial<FormulaNodeViewLabels>;
+    /**
+     * Renders the modal's contents. The app supplies this so the panel arrives
+     * with its own labels and its already-resolved data (formula functions,
+     * template variables) — a node view has no call site to thread those through
+     * and must not fetch them itself. Omitted, the lazily-imported
+     * `FormulaEditorPanel` is rendered with its own defaults.
+     */
+    renderFormulaEditor?: (ctx: FormulaEditorSlotContext) => ReactNode;
+};
+export declare function FormulaNodeView({ node, updateAttributes, deleteNode, labels, renderFormulaEditor, }: FormulaNodeViewProps): import("react").JSX.Element;

package/dist/components/editor/node-views/formula-node-view.js

@@ -0,0 +1,109 @@
+"use client";
+import { Badge as e } from "../../feedback/badge.js";
+import { Box as t } from "../../layout/box.js";
+import { Flex as n } from "../../layout/flex.js";
+import { Skeleton as r } from "../../feedback/skeleton.js";
+import { Text as i } from "../../typography/text.js";
+import { Tooltip as a, TooltipContent as o, TooltipProvider as s, TooltipTrigger as c } from "../../overlays/tooltip.js";
+import { useNodeViewInjection as l } from "./node-view-context.js";
+import { SquareFunction as u } from "lucide-react";
+import { Suspense as d, lazy as f, useCallback as p, useEffect as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import { NodeViewWrapper as y } from "@tiptap/react";
+import { createPortal as b } from "react-dom";
+//#region src/components/editor/node-views/formula-node-view.tsx
+var x = f(() => import("../formula/formula-editor-panel.js").then((e) => ({ default: e.FormulaEditorPanel }))), S = {
+	newFormula: "new formula",
+	clickToEditFormula: "Click to edit formula"
+};
+function C({ node: f, updateAttributes: C, deleteNode: w, labels: T, renderFormulaEditor: E }) {
+	let D = l(), O = {
+		...S,
+		...D.labels,
+		...T
+	}, k = E ?? D.renderFormulaEditor, { expression: A, autoOpen: j } = f.attrs, [M, N] = g(!1), P = h(j), F = A.length > 0 ? A.length > 20 ? A.slice(0, 20) + "…" : A : O.newFormula;
+	m(() => {
+		if (!P.current) return;
+		let e = requestAnimationFrame(() => N(!0));
+		return () => cancelAnimationFrame(e);
+	}, []);
+	let I = p((e) => {
+		e.preventDefault(), e.stopPropagation(), N(!0);
+	}, []);
+	m(() => {
+		if (!M) return;
+		let e = (e) => {
+			e.key === "Escape" && (e.stopPropagation(), N(!1), f.attrs.expression === "" && w());
+		};
+		return document.addEventListener("keydown", e, !0), () => document.removeEventListener("keydown", e, !0);
+	}, [
+		M,
+		f.attrs.expression,
+		w
+	]);
+	let L = (e) => {
+		C({ expression: e }), N(!1);
+	}, R = () => {
+		N(!1), f.attrs.expression === "" && w();
+	};
+	return /* @__PURE__ */ v(y, {
+		as: "span",
+		"data-drag-handle": !0,
+		style: {
+			display: "inline-flex",
+			verticalAlign: "baseline",
+			whiteSpace: "nowrap"
+		},
+		children: [/* @__PURE__ */ _(s, { children: /* @__PURE__ */ v(a, { children: [/* @__PURE__ */ _(c, {
+			asChild: !0,
+			children: /* @__PURE__ */ v(e, {
+				variant: "formula",
+				className: "inline-flex flex-nowrap items-center gap-1 px-1.5 py-0 border-dashed cursor-pointer hover:bg-amber-500/20 mr-0.5 transition-all duration-control active:scale-95",
+				onMouseDown: I,
+				role: "button",
+				tabIndex: 0,
+				onKeyDown: (e) => {
+					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), I(e));
+				},
+				children: [/* @__PURE__ */ _(u, { className: "w-2.5 h-2.5 flex-shrink-0" }), /* @__PURE__ */ _("span", {
+					className: "font-mono text-[11px] leading-none",
+					children: F
+				})]
+			})
+		}), /* @__PURE__ */ v(o, { children: [/* @__PURE__ */ _(i, {
+			size: "xs",
+			className: "font-mono",
+			children: "{{= " + A + " }}"
+		}), /* @__PURE__ */ _(i, {
+			size: "xs",
+			tone: "muted",
+			className: "mt-0.5",
+			children: O.clickToEditFormula
+		})] })] }) }), M && b(/* @__PURE__ */ v(n, {
+			align: "center",
+			justify: "center",
+			className: "fixed inset-0 z-[999] p-4",
+			onMouseDown: (e) => e.stopPropagation(),
+			children: [/* @__PURE__ */ _(t, { className: "absolute inset-0 bg-black/60 backdrop-blur-sm" }), /* @__PURE__ */ _(t, {
+				className: "relative rounded-lg border border-border bg-popover shadow-2xl max-h-[90vh] overflow-y-auto w-full max-w-[min(660px,90vw)]",
+				children: /* @__PURE__ */ _(d, {
+					fallback: /* @__PURE__ */ _(r, { className: "h-64 w-full" }),
+					children: k ? k({
+						initialExpr: A,
+						onConfirm: L,
+						onCancel: R
+					}) : /* @__PURE__ */ _(x, {
+						mode: "edit",
+						initialExpr: A,
+						onConfirm: L,
+						onCancel: R
+					})
+				})
+			})]
+		}), document.body)]
+	});
+}
+//#endregion
+export { S as DEFAULT_FORMULA_NODE_VIEW_LABELS, C as FormulaNodeView };
+
+//# sourceMappingURL=formula-node-view.js.map

package/dist/components/editor/node-views/formula-node-view.js.map

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

package/dist/components/editor/node-views/node-view-context.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Injection channel for the five React NodeViews.
+ *
+ * WHY THIS EXISTS — node views are not rendered by a parent component. The
+ * extensions instantiate them as `ReactNodeViewRenderer(XNodeView)`, so TipTap
+ * decides the props and only ever passes `ReactNodeViewProps`. There is no call
+ * site at which an app could hand a node view its `labels`, which is a problem
+ * for a package with no i18n library: every string in a node view would be
+ * permanently English.
+ *
+ * React context is the one channel that reaches them. TipTap renders React node
+ * views through portals anchored in the tree of the component that owns the
+ * editor, so a provider wrapping `<EditorContent>` is an ancestor of every node
+ * view — the same mechanism that makes `useCurrentEditor()` work inside one.
+ *
+ * Every node view still takes its own optional `labels` prop and still defaults
+ * to English, so this is purely additive:
+ *
+ *     explicit `labels` prop  >  provider value  >  English defaults
+ *
+ * The prop is what a story or a unit test uses (it needs no provider); the
+ * provider is what the editor component uses to push app translations down to
+ * nodes it never renders itself.
+ */
+import { type ReactNode } from "react";
+import type { ColorTileNodeViewLabels } from "./color-tile-node-view";
+import type { FillSpaceNodeViewLabels } from "./fill-space-node-view";
+import type { FormulaEditorSlotContext, FormulaNodeViewLabels } from "./formula-node-view";
+import type { VariableNodeViewLabels } from "./variable-node-view";
+import type { WrappedTextViewLabels } from "./wrapped-text-view";
+/**
+ * Every node-view label in one flat bag. The keys are unique across the five
+ * components and match the FiestaBoard app's translation keys 1:1, so the app
+ * can map its message catalog across mechanically.
+ */
+export interface NodeViewLabels extends ColorTileNodeViewLabels, FillSpaceNodeViewLabels, FormulaNodeViewLabels, VariableNodeViewLabels, WrappedTextViewLabels {
+}
+export interface NodeViewInjection {
+    labels?: Partial<NodeViewLabels>;
+    /**
+     * Renders the formula editor shown when a formula pill is clicked. Supplied
+     * by the app so the panel arrives with its data props (formula functions,
+     * template variables) already resolved — the node view cannot fetch and must
+     * not decide what the panel needs. Omitted, the node view falls back to the
+     * lazily-imported `FormulaEditorPanel`.
+     */
+    renderFormulaEditor?: (ctx: FormulaEditorSlotContext) => ReactNode;
+}
+export interface NodeViewInjectionProviderProps extends NodeViewInjection {
+    children?: ReactNode;
+}
+/**
+ * Wrap `<EditorContent>` with this to push labels and slots into node views.
+ * Rendering it is optional: without it every node view uses English defaults.
+ */
+export declare function NodeViewInjectionProvider({ labels, renderFormulaEditor, children }: NodeViewInjectionProviderProps): import("react").JSX.Element;
+/** Reads the injected labels/slots. Returns an empty bag when unprovided. */
+export declare function useNodeViewInjection(): NodeViewInjection;

package/dist/components/editor/node-views/node-view-context.js

@@ -0,0 +1,22 @@
+"use client";
+import { createContext as e, useContext as t, useMemo as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/editor/node-views/node-view-context.tsx
+var i = Object.freeze({}), a = e(i);
+function o({ labels: e, renderFormulaEditor: t, children: i }) {
+	let o = n(() => ({
+		labels: e,
+		renderFormulaEditor: t
+	}), [e, t]);
+	return /* @__PURE__ */ r(a.Provider, {
+		value: o,
+		children: i
+	});
+}
+function s() {
+	return t(a);
+}
+//#endregion
+export { o as NodeViewInjectionProvider, s as useNodeViewInjection };
+
+//# sourceMappingURL=node-view-context.js.map

package/dist/components/editor/node-views/node-view-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"node-view-context.js","names":[],"sources":["../../../../src/components/editor/node-views/node-view-context.tsx"],"mappings":";;;;AA6DA,IAAM,IAA2B,OAAO,OAAO,CAAC,CAAC,GAE3C,IAA2B,EAAiC,CAAK;AAUvE,SAAgB,EAA0B,EAAE,WAAQ,wBAAqB,eAA4C;CACnH,IAAM,IAAQ,SAAe;EAAE;EAAQ;CAAoB,IAAI,CAAC,GAAQ,CAAmB,CAAC;CAC5F,OAAO,kBAAC,EAAyB,UAA1B;EAA0C;EAAQ;CAA4C,CAAA;AACvG;AAGA,SAAgB,IAA0C;CACxD,OAAO,EAAW,CAAwB;AAC5C"}

package/dist/components/editor/node-views/variable-node-view.d.ts

@@ -0,0 +1,16 @@
+/**
+ * React NodeView for Variable nodes
+ * Displays {{plugin.field}} as an interactive badge with filters
+ */
+import type { ReactNodeViewProps } from "@tiptap/react";
+export interface VariableNodeViewLabels {
+    /** Tooltip on a filter chip. `filter` is already formatted as `name:arg`. */
+    variableFilterTooltip: (filter: string) => string;
+    /** Tooltip on the truncation hint shown when the variable declares a max length. */
+    variableMaxLengthTooltip: (maxLength: number) => string;
+}
+export declare const DEFAULT_VARIABLE_NODE_VIEW_LABELS: VariableNodeViewLabels;
+export type VariableNodeViewProps = ReactNodeViewProps & {
+    labels?: Partial<VariableNodeViewLabels>;
+};
+export declare function VariableNodeView({ node, labels }: VariableNodeViewProps): import("react").JSX.Element;

package/dist/components/editor/node-views/variable-node-view.js

@@ -0,0 +1,63 @@
+"use client";
+import { Badge as e } from "../../feedback/badge.js";
+import { Text as t } from "../../typography/text.js";
+import { Tooltip as n, TooltipContent as r, TooltipProvider as i, TooltipTrigger as a } from "../../overlays/tooltip.js";
+import { useNodeViewInjection as o } from "./node-view-context.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { NodeViewWrapper as l } from "@tiptap/react";
+//#region src/components/editor/node-views/variable-node-view.tsx
+var u = {
+	variableFilterTooltip: (e) => `Filter: ${e}`,
+	variableMaxLengthTooltip: (e) => `Max length: ${e} characters`
+};
+function d({ node: d, labels: f }) {
+	let p = o(), m = {
+		...u,
+		...p.labels,
+		...f
+	}, { pluginId: h, field: g, filters: _, maxLength: v } = d.attrs;
+	return /* @__PURE__ */ s(l, {
+		as: "span",
+		"data-drag-handle": !0,
+		style: {
+			display: "inline-flex",
+			verticalAlign: "baseline",
+			whiteSpace: "nowrap"
+		},
+		children: /* @__PURE__ */ s(i, { children: /* @__PURE__ */ c(e, {
+			variant: "variable",
+			className: "group inline-flex flex-nowrap items-center gap-1 px-1.5 py-0 border-dashed cursor-grab hover:bg-tag-variable/20 active:cursor-grabbing mr-0.5 transition-all duration-control",
+			children: [
+				/* @__PURE__ */ c("span", {
+					className: "font-mono text-[11px] leading-none",
+					children: [
+						h,
+						".",
+						g
+					]
+				}),
+				_ && _.length > 0 && /* @__PURE__ */ s("span", {
+					className: "inline-flex items-center gap-0.5",
+					children: _.map((e, i) => /* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s(a, {
+						asChild: !0,
+						children: /* @__PURE__ */ c("span", {
+							className: "inline-flex items-center px-1 rounded-sm text-[10px] bg-tag-variable/20 leading-none",
+							children: [e.name, e.arg && `:${e.arg}`]
+						})
+					}), /* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(t, { children: m.variableFilterTooltip(`${e.name}${e.arg ? `:${e.arg}` : ""}`) }) })] }, i))
+				}),
+				v && /* @__PURE__ */ c(n, { children: [/* @__PURE__ */ s(a, {
+					asChild: !0,
+					children: /* @__PURE__ */ c("span", {
+						className: "hidden group-hover:inline text-[10px] leading-none",
+						children: ["~", v]
+					})
+				}), /* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(t, { children: m.variableMaxLengthTooltip(v) }) })] })
+			]
+		}) })
+	});
+}
+//#endregion
+export { u as DEFAULT_VARIABLE_NODE_VIEW_LABELS, d as VariableNodeView };
+
+//# sourceMappingURL=variable-node-view.js.map

package/dist/components/editor/node-views/variable-node-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variable-node-view.js","names":[],"sources":["../../../../src/components/editor/node-views/variable-node-view.tsx"],"mappings":";;;;;;;;AA6BA,IAAa,IAA4D;CACvE,wBAAwB,MAAW,WAAW;CAC9C,2BAA2B,MAAc,eAAe,EAAU;AACpE;AAMA,SAAgB,EAAiB,EAAE,SAAM,aAAiC;CACxE,IAAM,IAAW,EAAqB,GAChC,IAAI;EAAE,GAAG;EAAmC,GAAG,EAAS;EAAQ,GAAG;CAAO,GAC1E,EAAE,aAAU,UAAO,YAAS,iBAAc,EAAK;CAErD,OACE,kBAAC,GAAD;EACE,IAAG;EACH,oBAAA;EACA,OAAO;GACL,SAAS;GACT,eAAe;GACf,YAAY;EACd;EAEA,UAAA,kBAAC,GAAD,EAAA,UAME,kBAAC,GAAD;GACE,SAAQ;GACR,WAAU;GAFZ,UAAA;IASE,kBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA;MACG;MAAS;MAAE;KACR;;IAEL,KAAW,EAAQ,SAAS,KAG3B,kBAAC,QAAD;KAAM,WAAU;KACb,UAAA,EAAQ,KAAK,GAAQ,MACpB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;MAAgB,SAAA;MAId,UAAA,kBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA,CACG,EAAO,MACP,EAAO,OAAO,IAAI,EAAO,KACtB;;KACQ,CAAA,GAChB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAO,EAAE,sBAAsB,GAAG,EAAO,OAAO,EAAO,MAAM,IAAI,EAAO,QAAQ,IAAI,EAAQ,CAAA,EAC9E,CAAA,CACT,EAAA,GAbK,CAaL,CACV;IACG,CAAA;IAGP,KACC,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KAAgB,SAAA;KAGd,UAAA,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA,CAAqE,KAAE,CAAgB;;IACzE,CAAA,GAChB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAO,EAAE,yBAAyB,CAAS,EAAQ,CAAA,EACrC,CAAA,CACT,EAAA,CAAA;GAEN;EACQ,CAAA,EAAA,CAAA;CACF,CAAA;AAErB"}

package/dist/components/editor/node-views/wrapped-text-view.d.ts

@@ -0,0 +1,14 @@
+/**
+ * React NodeView for Wrapped Text nodes
+ * Displays text that will be wrapped with visual indicator
+ */
+import type { ReactNodeViewProps } from "@tiptap/react";
+export interface WrappedTextViewLabels {
+    /** Accessible name for the button that removes the wrapped-text node. */
+    removeWrappedTextAriaLabel: string;
+}
+export declare const DEFAULT_WRAPPED_TEXT_VIEW_LABELS: WrappedTextViewLabels;
+export type WrappedTextViewProps = ReactNodeViewProps & {
+    labels?: Partial<WrappedTextViewLabels>;
+};
+export declare function WrappedTextView({ node, deleteNode, labels }: WrappedTextViewProps): import("react").JSX.Element;

package/dist/components/editor/node-views/wrapped-text-view.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn as e } from "../../../lib/utils.js";
+import { useNodeViewInjection as t } from "./node-view-context.js";
+import { WrapText as n, X as r } from "lucide-react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { NodeViewWrapper as o } from "@tiptap/react";
+//#region src/components/editor/node-views/wrapped-text-view.tsx
+var s = { removeWrappedTextAriaLabel: "Remove wrapped text" };
+function c({ node: c, deleteNode: l, labels: u }) {
+	let d = t(), f = {
+		...s,
+		...d.labels,
+		...u
+	}, { text: p } = c.attrs;
+	return /* @__PURE__ */ a(o, {
+		as: "span",
+		className: e("inline-block align-middle rounded-md px-2 py-0.5 text-xs font-medium cursor-grab", "border transition-all duration-control", "bg-warning/15 border-warning/30 text-warning", "hover:bg-warning/20", "active:cursor-grabbing", "max-h-[1.2rem] h-auto", "mr-0.5"),
+		"data-drag-handle": !0,
+		style: {
+			display: "inline-block",
+			verticalAlign: "middle",
+			whiteSpace: "nowrap"
+		},
+		children: [
+			/* @__PURE__ */ i(n, { className: "w-3 h-3 inline-block align-middle" }),
+			/* @__PURE__ */ i("span", {
+				className: "font-mono text-[11px] inline-block align-middle ml-1",
+				children: p
+			}),
+			/* @__PURE__ */ i("button", {
+				type: "button",
+				onClick: (e) => {
+					e.preventDefault(), e.stopPropagation(), l();
+				},
+				className: "rounded-full hover:bg-black/10 dark:hover:bg-white/10 p-0.5 -mr-1 ml-0.5 transition-colors",
+				tabIndex: -1,
+				"aria-label": f.removeWrappedTextAriaLabel,
+				children: /* @__PURE__ */ i(r, { className: "w-3 h-3" })
+			})
+		]
+	});
+}
+//#endregion
+export { s as DEFAULT_WRAPPED_TEXT_VIEW_LABELS, c as WrappedTextView };
+
+//# sourceMappingURL=wrapped-text-view.js.map

package/dist/components/editor/node-views/wrapped-text-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wrapped-text-view.js","names":[],"sources":["../../../../src/components/editor/node-views/wrapped-text-view.tsx"],"mappings":";;;;;;;AAuBA,IAAa,IAA0D,EACrE,4BAA4B,sBAC9B;AAMA,SAAgB,EAAgB,EAAE,SAAM,eAAY,aAAgC;CAClF,IAAM,IAAW,EAAqB,GAChC,IAAI;EAAE,GAAG;EAAkC,GAAG,EAAS;EAAQ,GAAG;CAAO,GACzE,EAAE,YAAS,EAAK;CAEtB,OACE,kBAAC,GAAD;EACE,IAAG;EACH,WAAW,EACT,oFACA,0CACA,gDACA,uBACA,0BACA,yBACA,QACF;EACA,oBAAA;EACA,OAAO;GACL,SAAS;GACT,eAAe;GACf,YAAY;EACd;EAhBF,UAAA;GAmBE,kBAAC,GAAD,EAAU,WAAU,oCAAqC,CAAA;GAMzD,kBAAC,QAAD;IAAM,WAAU;IAAwD,UAAA;GAAW,CAAA;GAMnF,kBAAC,UAAD;IACE,MAAK;IACL,UAAU,MAAM;KAGd,AAFA,EAAE,eAAe,GACjB,EAAE,gBAAgB,GAClB,EAAW;IACb;IACA,WAAU;IACV,UAAU;IACV,cAAY,EAAE;IAEd,UAAA,kBAAC,GAAD,EAAG,WAAU,UAAW,CAAA;GAClB,CAAA;EACO;;AAErB"}

package/dist/components/editor/template-editor-toolbar.d.ts

@@ -0,0 +1,146 @@
+import type { Editor } from "@tiptap/react";
+import { type ComponentProps, type ReactNode } from "react";
+import { type BoardColorName } from "../../lib/board-colors";
+import { type ColorPickerLabels } from "./color-picker-content";
+import type { DeviceType } from "./constants";
+import { type FormattingPickerLabels } from "./formatting-picker-content";
+import type { LineAlignment } from "./template-editor";
+import type { DrawBrush } from "./utils/draw-mode";
+import type { PluginDisplayData, PluginManifest, TemplateVariables, VariablePickerLabels } from "./variable-picker-content";
+declare const VariablePickerContent: import("react").LazyExoticComponent<typeof import("./variable-picker-content").VariablePickerContent>;
+/** One entry of the backend's `formatting` map: a snippet plus its help text. */
+export interface FormattingVariable {
+    syntax: string;
+    description?: string;
+}
+/**
+ * What the toolbar reads from the app's already-fetched `/templates/variables`
+ * payload: the variable picker's slice (forwarded to it verbatim) plus the two
+ * maps that decide whether the Colors and Formatting dropdowns exist at all.
+ *
+ * Narrowed and structural, like the picker's own types, so the app's full
+ * `getTemplateVariables` response satisfies it without a cast. Named for the
+ * toolbar rather than re-declaring `TemplateVariables`, which
+ * `variable-picker-content` already owns.
+ */
+export interface ToolbarTemplateVariables extends TemplateVariables {
+    /** Color name → board code. Presence is what enables the Colors dropdown. */
+    colors?: Record<string, number>;
+    formatting?: Record<string, FormattingVariable>;
+}
+/**
+ * What the toolbar hands an injected entity picker.
+ *
+ * The picker itself (Home Assistant's, or any other plugin's) lives in the
+ * host app — it is an API-backed dialog and this package neither fetches nor
+ * knows about plugins. The toolbar still owns the trigger button, the open
+ * state, and the caret-timing dance around insertion, so the slot is a render
+ * prop rather than a bare node: those three things cannot be handed over
+ * without reimplementing them in every host.
+ */
+export interface EntityPickerSlotContext {
+    /** True while the toolbar's entity button has asked for the picker. */
+    open: boolean;
+    /** Call when the picker dismisses itself. */
+    onClose: () => void;
+    /** Call with the template string to insert, e.g. `{{home_assistant.porch_temp}}`. */
+    onSelect: (variable: string) => void;
+}
+/**
+ * Every user-visible string in the toolbar. This package has no i18n runtime:
+ * hosts that localize pass a translated object, everyone else gets English.
+ *
+ * Keys mirror the FiestaBoard app's `templateEditor` message-catalog keys 1:1
+ * so the app can map its catalog across mechanically. This interface covers the
+ * toolbar's slice of that namespace; the editor and color picker own theirs.
+ */
+export interface TemplateEditorToolbarLabels {
+    /** Draw-mode toggle, accessible name and tooltip, while drawing is OFF. */
+    drawMode: string;
+    /** …and while it is ON (the button then exits draw mode). */
+    drawModeActive: string;
+    undo: string;
+    /** Accessible name for the undo button — the tooltip adds the shortcut. */
+    undoAriaLabel: string;
+    redo: string;
+    redoAriaLabel: string;
+    /**
+     * Accessible names for the draw-mode color swatches, keyed by palette color.
+     * Supply all eight; omitted colors fall back to the English default.
+     */
+    drawColors: Record<BoardColorName, string>;
+    drawEraser: string;
+    /** Label for the stamp-character dropdown. */
+    drawCharacter: string;
+    cut: string;
+    cutAriaLabel: string;
+    copy: string;
+    copyAriaLabel: string;
+    paste: string;
+    pasteAriaLabel: string;
+    variables: string;
+    /** Accessible name for the Variables button when there are none to insert. */
+    variablesNoVarsAvailable: string;
+    /** Tooltip explaining why the Variables button is disabled. */
+    noVariablesAvailable: string;
+    /** Label for the injected entity picker's trigger button. */
+    homeAssistantEntities: string;
+    colors: string;
+    formatting: string;
+    insertFormula: string;
+    /** Accessible name for the wrap toggle (constant); the tooltip states the effect. */
+    toggleWrap: string;
+    enableWrap: string;
+    disableWrap: string;
+    alignLeft: string;
+    alignCenter: string;
+    alignRight: string;
+    /** Accessible name for the sync-from-board button. */
+    syncFromBoard: string;
+    syncFromBoardTooltip: string;
+}
+export declare const DEFAULT_TEMPLATE_EDITOR_TOOLBAR_LABELS: TemplateEditorToolbarLabels;
+export interface TemplateEditorToolbarProps {
+    editor: Editor | null;
+    currentAlignment?: LineAlignment;
+    currentWrapEnabled?: boolean;
+    onAlignmentChange?: (alignment: LineAlignment) => void;
+    onWrapToggle?: () => void;
+    className?: string;
+    deviceType?: DeviceType;
+    onSyncFromBoard?: () => void;
+    syncFromBoardPending?: boolean;
+    drawMode?: boolean;
+    onDrawModeToggle?: () => void;
+    drawBrush?: DrawBrush;
+    onDrawBrushChange?: (brush: DrawBrush) => void;
+    /**
+     * Resolved template variables. Absent means "nothing available yet": the
+     * Variables button renders disabled and the colors/formatting dropdowns are
+     * omitted entirely, exactly as when the backend reports an empty catalog.
+     */
+    templateVariables?: ToolbarTemplateVariables;
+    /** True while the host is still fetching `templateVariables`. */
+    isLoadingVariables?: boolean;
+    /**
+     * Forwarded verbatim to the variable picker, which owns these contracts. The
+     * toolbar never reads them; see `variable-picker-content` for what each does.
+     */
+    pluginManifests?: Record<string, PluginManifest | undefined>;
+    isLoadingManifests?: boolean;
+    pluginDisplayData?: PluginDisplayData;
+    resolveIcon?: ComponentProps<typeof VariablePickerContent>["resolveIcon"];
+    /**
+     * Renders the host's entity picker dialog. Omit it (or leave the
+     * `home_assistant` plugin uninstalled) and neither the button nor the dialog
+     * appears — never a placeholder.
+     */
+    entityPickerSlot?: (ctx: EntityPickerSlotContext) => ReactNode;
+    labels?: Partial<TemplateEditorToolbarLabels>;
+    /** Labels for the nested pickers, each passed straight through to its owner. */
+    variablePickerLabels?: Partial<VariablePickerLabels>;
+    colorPickerLabels?: Partial<ColorPickerLabels>;
+    formattingPickerLabels?: Partial<FormattingPickerLabels>;
+}
+export declare function TemplateEditorToolbar({ editor, currentAlignment, currentWrapEnabled, onAlignmentChange, onWrapToggle, className, deviceType, onSyncFromBoard, syncFromBoardPending, drawMode, onDrawModeToggle, drawBrush, onDrawBrushChange, templateVariables, isLoadingVariables, pluginManifests, isLoadingManifests, pluginDisplayData, resolveIcon, entityPickerSlot, labels, variablePickerLabels, colorPickerLabels, formattingPickerLabels, }: TemplateEditorToolbarProps): import("react").JSX.Element;
+export {};