@fiestaboard/ui 3.1.0 → 3.2.0

package/dist/components/editor/extensions/trailing-newline.js

@@ -0,0 +1,27 @@
+import "../constants.js";
+import { Plugin as e, PluginKey as t } from "@tiptap/pm/state";
+import { Extension as n } from "@tiptap/core";
+//#region src/components/editor/extensions/trailing-newline.ts
+var r = n.create({
+	name: "trailingNewline",
+	addProseMirrorPlugins() {
+		return [new e({
+			key: new t("trailingNewline"),
+			appendTransaction(e, t, n) {
+				let { doc: r, tr: i } = n, a = !1;
+				return r.descendants((e, t) => {
+					if (e.type.name !== "paragraph") return;
+					let n = e.lastChild;
+					if (n && n.type.name === "hardBreak") {
+						let n = t + e.nodeSize - 1;
+						i.insertText("​", n), a = !0;
+					}
+				}), a ? i : null;
+			}
+		})];
+	}
+});
+//#endregion
+export { r as TrailingNewline };
+
+//# sourceMappingURL=trailing-newline.js.map

package/dist/components/editor/extensions/trailing-newline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trailing-newline.js","names":[],"sources":["../../../../src/components/editor/extensions/trailing-newline.ts"],"mappings":";;;;AAgBA,IAAa,IAAkB,EAAU,OAAO;CAC9C,MAAM;CAEN,wBAAwB;EACtB,OAAO,CACL,IAAI,EAAO;GACT,KAAK,IAAI,EAAU,iBAAiB;GAEpC,kBAAkB,GAAe,GAAW,GAAU;IACpD,IAAM,EAAE,QAAK,UAAO,GAEhB,IAAW;IAef,OAbA,EAAI,aAAa,GAAM,MAAQ;KAC7B,IAAI,EAAK,KAAK,SAAS,aAAa;KAEpC,IAAM,IAAY,EAAK;KAClB,SAED,EAAU,KAAK,SAAS,aAAa;MACvC,IAAM,IAAY,IAAM,EAAK,WAAW;MAExC,AADA,EAAG,WAAA,KAA0B,CAAS,GACtC,IAAW;KACb;IACF,CAAC,GAEM,IAAW,IAAK;GACzB;EACF,CAAC,CACH;CACF;AACF,CAAC"}

package/dist/components/editor/extensions/variable-node.d.ts

@@ -0,0 +1,15 @@
+/**
+ * VariableNode - Inline node for {{plugin.field}} variables
+ * Supports filters like |pad:3, |wrap, etc.
+ */
+import { Node } from "@tiptap/core";
+export interface VariableAttrs {
+    pluginId: string;
+    field: string;
+    filters: Array<{
+        name: string;
+        arg?: string;
+    }>;
+    maxLength?: number;
+}
+export declare const VariableNode: Node<any, any>;

package/dist/components/editor/extensions/variable-node.js

@@ -0,0 +1,56 @@
+"use client";
+import { VariableNodeView as e } from "../node-views/variable-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/variable-node.ts
+var i = n.create({
+	name: "variable",
+	group: "inline",
+	inline: !0,
+	atom: !0,
+	selectable: !1,
+	draggable: !0,
+	addAttributes() {
+		return {
+			pluginId: {
+				default: "",
+				parseHTML: (e) => e.getAttribute("data-plugin-id"),
+				renderHTML: (e) => ({ "data-plugin-id": e.pluginId })
+			},
+			field: {
+				default: "",
+				parseHTML: (e) => e.getAttribute("data-field"),
+				renderHTML: (e) => ({ "data-field": e.field })
+			},
+			filters: {
+				default: [],
+				parseHTML: (e) => {
+					let t = e.getAttribute("data-filters");
+					return t ? JSON.parse(t) : [];
+				},
+				renderHTML: (e) => ({ "data-filters": JSON.stringify(e.filters || []) })
+			},
+			maxLength: {
+				default: 10,
+				parseHTML: (e) => {
+					let t = e.getAttribute("data-max-length");
+					return t ? parseInt(t, 10) : 10;
+				},
+				renderHTML: (e) => ({ "data-max-length": e.maxLength?.toString() || "10" })
+			}
+		};
+	},
+	parseHTML() {
+		return [{ tag: "span[data-type=\"variable\"]" }];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["span", r({ "data-type": "variable" }, e)];
+	},
+	addNodeView() {
+		return t(e);
+	}
+});
+//#endregion
+export { i as VariableNode };
+
+//# sourceMappingURL=variable-node.js.map

package/dist/components/editor/extensions/variable-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variable-node.js","names":[],"sources":["../../../../src/components/editor/extensions/variable-node.ts"],"mappings":";;;;;AAkBA,IAAa,IAAe,EAAK,OAAO;CACtC,MAAM;CAEN,OAAO;CAEP,QAAQ;CAER,MAAM;CAEN,YAAY;CAEZ,WAAW;CAEX,gBAAgB;EACd,OAAO;GACL,UAAU;IACR,SAAS;IACT,YAAY,MAAY,EAAQ,aAAa,gBAAgB;IAC7D,aAAa,OAAgB,EAC3B,kBAAkB,EAAW,SAC/B;GACF;GACA,OAAO;IACL,SAAS;IACT,YAAY,MAAY,EAAQ,aAAa,YAAY;IACzD,aAAa,OAAgB,EAC3B,cAAc,EAAW,MAC3B;GACF;GACA,SAAS;IACP,SAAS,CAAC;IACV,YAAY,MAAY;KACtB,IAAM,IAAa,EAAQ,aAAa,cAAc;KACtD,OAAO,IAAa,KAAK,MAAM,CAAU,IAAI,CAAC;IAChD;IACA,aAAa,OAAgB,EAC3B,gBAAgB,KAAK,UAAU,EAAW,WAAW,CAAC,CAAC,EACzD;GACF;GACA,WAAW;IACT,SAAS;IACT,YAAY,MAAY;KACtB,IAAM,IAAS,EAAQ,aAAa,iBAAiB;KACrD,OAAO,IAAS,SAAS,GAAQ,EAAE,IAAI;IACzC;IACA,aAAa,OAAgB,EAC3B,mBAAmB,EAAW,WAAW,SAAS,KAAK,KACzD;GACF;EACF;CACF;CAEA,YAAY;EACV,OAAO,CACL,EACE,KAAK,+BACP,CACF;CACF;CAEA,WAAW,EAAE,qBAAkB;EAC7B,OAAO,CAAC,QAAQ,EAAgB,EAAE,aAAa,WAAW,GAAG,CAAc,CAAC;CAC9E;CAEA,cAAc;EACZ,OAAO,EAAsB,CAAgB;CAC/C;AACF,CAAC"}

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

@@ -0,0 +1,9 @@
+/**
+ * WrappedTextNode - Inline node for text that will be wrapped
+ * Created when user selects text and applies wrap filter
+ */
+import { Node } from "@tiptap/core";
+export interface WrappedTextAttrs {
+    text: string;
+}
+export declare const WrappedTextNode: Node<any, any>;

package/dist/components/editor/extensions/wrapped-text-node.js

@@ -0,0 +1,31 @@
+"use client";
+import { WrappedTextView as e } from "../node-views/wrapped-text-view.js";
+import { ReactNodeViewRenderer as t } from "@tiptap/react";
+import { Node as n, mergeAttributes as r } from "@tiptap/core";
+//#region src/components/editor/extensions/wrapped-text-node.ts
+var i = n.create({
+	name: "wrappedText",
+	group: "inline",
+	inline: !0,
+	atom: !1,
+	addAttributes() {
+		return { text: {
+			default: "",
+			parseHTML: (e) => e.getAttribute("data-text") || e.textContent || "",
+			renderHTML: (e) => ({ "data-text": e.text })
+		} };
+	},
+	parseHTML() {
+		return [{ tag: "span[data-type=\"wrapped-text\"]" }];
+	},
+	renderHTML({ HTMLAttributes: e }) {
+		return ["span", r({ "data-type": "wrapped-text" }, e)];
+	},
+	addNodeView() {
+		return t(e);
+	}
+});
+//#endregion
+export { i as WrappedTextNode };
+
+//# sourceMappingURL=wrapped-text-node.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wrapped-text-node.js","names":[],"sources":["../../../../src/components/editor/extensions/wrapped-text-node.ts"],"mappings":";;;;;AAeA,IAAa,IAAkB,EAAK,OAAO;CACzC,MAAM;CAEN,OAAO;CAEP,QAAQ;CAER,MAAM;CAEN,gBAAgB;EACd,OAAO,EACL,MAAM;GACJ,SAAS;GACT,YAAY,MAAY,EAAQ,aAAa,WAAW,KAAK,EAAQ,eAAe;GACpF,aAAa,OAAgB,EAC3B,aAAa,EAAW,KAC1B;EACF,EACF;CACF;CAEA,YAAY;EACV,OAAO,CACL,EACE,KAAK,mCACP,CACF;CACF;CAEA,WAAW,EAAE,qBAAkB;EAC7B,OAAO,CAAC,QAAQ,EAAgB,EAAE,aAAa,eAAe,GAAG,CAAc,CAAC;CAClF;CAEA,cAAc;EACZ,OAAO,EAAsB,CAAe;CAC9C;AACF,CAAC"}

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

@@ -0,0 +1,24 @@
+import type { Editor } from "@tiptap/react";
+export interface FilterPickerLabels {
+    noFiltersAvailable: string;
+    selectVariableFirst: string;
+    filterDescWrap: string;
+    filterDescPad: string;
+    filterDescTruncate: string;
+    wrapInstruction: string;
+    /** The template snippet is syntax — it stays verbatim in every locale. */
+    exampleLabel: (example: string) => string;
+}
+export declare const DEFAULT_FILTER_PICKER_LABELS: FilterPickerLabels;
+export interface FilterPickerContentProps {
+    /** Filter names as declared by the template engine, e.g. `["wrap", "pad:3"]`. */
+    filters: string[];
+    /**
+     * The live TipTap editor, so a picked filter can be applied to the variable
+     * under the caret. `null` degrades to plain text insertion via `onInsert`.
+     */
+    editor: Editor | null;
+    onInsert?: (filter: string) => void;
+    labels?: Partial<FilterPickerLabels>;
+}
+export declare function FilterPickerContent({ filters, editor, onInsert, labels }: FilterPickerContentProps): import("react").JSX.Element;

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

@@ -0,0 +1,146 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Badge as t } from "../feedback/badge.js";
+import { Box as n } from "../layout/box.js";
+import { Flex as r } from "../layout/flex.js";
+import { Code as i } from "../typography/code.js";
+import { Text as a } from "../typography/text.js";
+import { Stack as o } from "../layout/stack.js";
+import { AlertCircle as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/editor/filter-picker-content.tsx
+var u = {
+	noFiltersAvailable: "No filters available",
+	selectVariableFirst: "Select a variable first to apply a filter, or click to insert filter text.",
+	filterDescWrap: "Wraps long text across multiple lines",
+	filterDescPad: "Pads text to specified width",
+	filterDescTruncate: "Truncates text to specified length",
+	wrapInstruction: "Wraps long text. Leave empty lines below for text to flow into.",
+	exampleLabel: (e) => `Example: ${e}`
+};
+function d(e) {
+	let { state: t } = e, { selection: n } = t, { $from: r } = n;
+	for (let e = r.depth; e > 0; e--) {
+		let t = r.node(e);
+		if (t.type.name === "variable") return {
+			node: t,
+			pos: r.before(e)
+		};
+	}
+	let i = null;
+	return t.doc.nodesBetween(n.from, n.to, (e, t) => {
+		if (i) return !1;
+		if (e.type.name === "variable") return i = {
+			node: e,
+			pos: t
+		}, !1;
+	}), i;
+}
+function f(e, t) {
+	let { $from: n } = e.state.selection;
+	for (let e = n.depth; e > 0; e--) if (n.node(e).type.name === t) return !0;
+	return !1;
+}
+function p({ filters: p, editor: m, onInsert: h, labels: g }) {
+	let _ = {
+		...u,
+		...g
+	};
+	if (p.length === 0) return /* @__PURE__ */ c(a, {
+		tone: "muted",
+		className: "p-3",
+		children: _.noFiltersAvailable
+	});
+	let v = m !== null && d(m) !== null, y = (e) => {
+		if (!m) {
+			h?.(`|${e}`);
+			return;
+		}
+		let { state: t } = m, { selection: n } = t, r = d(m);
+		if (r) {
+			let n = r.node.attrs.filters || [], i = e.split(":")[0];
+			if (!n.some((e) => e.name === i)) {
+				let i = e.split(":"), a = {
+					name: i[0],
+					arg: i[1] || void 0
+				}, o = [...n, a], s = t.tr;
+				s.setNodeMarkup(r.pos, void 0, {
+					...r.node.attrs,
+					filters: o
+				}), m.view.dispatch(s), m.chain().focus().run();
+			}
+		} else if (e === "wrap" && n.from !== n.to) {
+			let r = t.doc.textBetween(n.from, n.to);
+			r.trim().length > 0 ? f(m, "wrappedText") || m.chain().focus().deleteSelection().insertContent({
+				type: "wrappedText",
+				attrs: { text: r }
+			}).run() : h?.(`|${e}`);
+		} else h?.(`|${e}`);
+	};
+	return /* @__PURE__ */ l(n, {
+		className: "p-2 min-w-[250px]",
+		children: [
+			!v && m && /* @__PURE__ */ l(r, {
+				align: "start",
+				gap: "2",
+				className: "mb-2 p-2 bg-muted/50 rounded-md text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ c(s, { className: "w-3.5 h-3.5 mt-0.5 flex-shrink-0" }), /* @__PURE__ */ c(a, {
+					as: "span",
+					size: "xs",
+					tone: "muted",
+					children: _.selectVariableFirst
+				})]
+			}),
+			/* @__PURE__ */ c(o, {
+				gap: "2",
+				children: p.map((n) => {
+					let r = n.split(":")[0];
+					return /* @__PURE__ */ l("button", {
+						type: "button",
+						onClick: () => y(n),
+						className: e("w-full text-left px-3 py-2 rounded-md text-sm", "hover:bg-accent hover:text-accent-foreground transition-colors", "flex items-center gap-2"),
+						children: [/* @__PURE__ */ l(t, {
+							variant: "secondary",
+							className: "font-mono text-xs",
+							children: ["|", n]
+						}), /* @__PURE__ */ l(a, {
+							as: "span",
+							size: "xs",
+							tone: "muted",
+							children: [
+								r === "wrap" && _.filterDescWrap,
+								r === "pad" && _.filterDescPad,
+								r === "truncate" && _.filterDescTruncate
+							]
+						})]
+					}, n);
+				})
+			}),
+			/* @__PURE__ */ l(o, {
+				gap: "1",
+				className: "mt-3 pt-3 border-t text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ c(a, {
+					size: "xs",
+					tone: "muted",
+					children: _.exampleLabel("{{weather.temperature|pad:3}}")
+				}), /* @__PURE__ */ l(a, {
+					tone: "muted",
+					className: "text-[10px]",
+					children: [
+						/* @__PURE__ */ c(i, {
+							className: "bg-transparent px-0 py-0 text-[10px] font-semibold text-muted-foreground",
+							children: "|wrap"
+						}),
+						":",
+						" ",
+						_.wrapInstruction
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { u as DEFAULT_FILTER_PICKER_LABELS, p as FilterPickerContent };
+
+//# sourceMappingURL=filter-picker-content.js.map

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

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

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

@@ -0,0 +1,30 @@
+import React from "react";
+import { type BoardColorName } from "../../lib/board-colors";
+export interface FormattingPickerLabels {
+    noFormattingAvailable: string;
+    back: string;
+    selectColor: string;
+    orCustomPattern: string;
+    use: string;
+    /** Placeholder for the custom repeat-pattern field. Punctuation, but still on screen. */
+    customPatternPlaceholder: string;
+    /** Display name per board color, shown on and announced for each swatch. */
+    colorNames: Record<BoardColorName, string>;
+    /** Accessible name for one swatch, given its display name. */
+    colorOptionLabel: (colorName: string) => string;
+}
+export declare const DEFAULT_FORMATTING_PICKER_LABELS: FormattingPickerLabels;
+export interface FormattingPickerContentProps {
+    /**
+     * Formatting options keyed by name, as declared by the template engine.
+     * Optional because the app's call site passes a possibly-absent
+     * `templateVars?.formatting`; an empty map renders the "none available" copy.
+     */
+    formatting?: Record<string, {
+        syntax: string;
+        description?: string;
+    }>;
+    onInsert: (syntax: string) => void;
+    labels?: Partial<FormattingPickerLabels>;
+}
+export declare function FormattingPickerContent({ formatting, onInsert, labels }: FormattingPickerContentProps): React.JSX.Element;

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

@@ -0,0 +1,154 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Badge as t } from "../feedback/badge.js";
+import { Button as n } from "../forms/button.js";
+import { Input as r } from "../forms/input.js";
+import { Box as i } from "../layout/box.js";
+import { Flex as a } from "../layout/flex.js";
+import { Grid as o } from "../layout/grid.js";
+import { Text as s } from "../typography/text.js";
+import { Stack as c } from "../layout/stack.js";
+import { Tooltip as l, TooltipContent as u, TooltipProvider as d, TooltipTrigger as f } from "../overlays/tooltip.js";
+import { AVAILABLE_COLORS as p, COLOR_DISPLAY as m } from "../../lib/board-colors.js";
+import { FILL_SPACE_REPEAT_VAR as h } from "./constants.js";
+import { ChevronRight as g, ChevronsLeftRight as _ } from "lucide-react";
+import v from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/editor/formatting-picker-content.tsx
+var x = {
+	noFormattingAvailable: "No formatting options available",
+	back: "← Back",
+	selectColor: "Select color:",
+	orCustomPattern: "Or custom pattern:",
+	use: "Use",
+	customPatternPlaceholder: "e.g. - or =-",
+	colorNames: {
+		red: "Red",
+		orange: "Orange",
+		yellow: "Yellow",
+		green: "Green",
+		blue: "Blue",
+		violet: "Violet",
+		white: "White",
+		black: "Black"
+	},
+	colorOptionLabel: (e) => `${e} color`
+};
+function S({ formatting: S = {}, onInsert: C, labels: w }) {
+	let T = {
+		...x,
+		...w
+	}, [E, D] = v.useState(!1), [O, k] = v.useState(""), A = v.useId(), j = Object.entries(S).map(([e, t]) => ({
+		name: e.replace(/_/g, " "),
+		syntax: t.syntax,
+		description: t.description
+	}));
+	if (j.length === 0) return /* @__PURE__ */ y(s, {
+		tone: "muted",
+		className: "p-3",
+		children: T.noFormattingAvailable
+	});
+	let M = (e) => {
+		e.syntax.includes("fill_space_repeat") ? D(!0) : C(e.syntax);
+	}, N = (e) => {
+		C(`{{${h}:${e}}}`), D(!1), k("");
+	};
+	return E ? /* @__PURE__ */ y(d, { children: /* @__PURE__ */ b(i, {
+		className: "p-2 min-w-[240px] max-w-[280px]",
+		children: [
+			/* @__PURE__ */ y("button", {
+				type: "button",
+				onClick: () => D(!1),
+				className: "text-xs text-muted-foreground hover:text-foreground mb-2 flex items-center gap-1",
+				children: T.back
+			}),
+			/* @__PURE__ */ y(s, {
+				size: "xs",
+				tone: "muted",
+				weight: "medium",
+				className: "mb-2",
+				children: T.selectColor
+			}),
+			/* @__PURE__ */ y(o, {
+				cols: "4",
+				gap: "2",
+				className: "mb-3",
+				children: p.map((t) => /* @__PURE__ */ b(l, { children: [/* @__PURE__ */ y(f, {
+					asChild: !0,
+					children: /* @__PURE__ */ y("button", {
+						type: "button",
+						onClick: () => N(t),
+						className: e("h-10 rounded-md text-xs font-medium transition-all hover:scale-105 hover:shadow-md", "flex items-center justify-center", m[t].bg, m[t].text),
+						"aria-label": T.colorOptionLabel(T.colorNames[t]),
+						children: T.colorNames[t]
+					})
+				}), /* @__PURE__ */ y(u, { children: /* @__PURE__ */ y(s, { children: T.colorNames[t] }) })] }, t))
+			}),
+			/* @__PURE__ */ b(i, {
+				className: "pt-2 border-t border-border",
+				children: [/* @__PURE__ */ y(s, {
+					size: "xs",
+					tone: "muted",
+					className: "mb-1.5",
+					id: A,
+					children: T.orCustomPattern
+				}), /* @__PURE__ */ b(i, {
+					as: "form",
+					onSubmit: (e) => {
+						e.preventDefault(), O && N(O);
+					},
+					className: "flex gap-1.5",
+					children: [/* @__PURE__ */ y(r, {
+						type: "text",
+						value: O,
+						onChange: (e) => k(e.target.value),
+						placeholder: T.customPatternPlaceholder,
+						maxLength: 10,
+						"aria-labelledby": A,
+						className: "flex-1 font-mono"
+					}), /* @__PURE__ */ y(n, {
+						type: "submit",
+						size: "sm",
+						disabled: !O,
+						children: T.use
+					})]
+				})]
+			})
+		]
+	}) }) : /* @__PURE__ */ y(d, { children: /* @__PURE__ */ y(i, {
+		className: "p-1.5 min-w-[240px] max-w-[280px]",
+		children: /* @__PURE__ */ y(c, {
+			gap: "0.5",
+			children: j.map((n) => {
+				let r = n.syntax.includes(h);
+				return /* @__PURE__ */ b(l, { children: [/* @__PURE__ */ y(f, {
+					asChild: !0,
+					children: /* @__PURE__ */ b("button", {
+						type: "button",
+						onClick: () => M(n),
+						className: e("w-full text-left px-2.5 py-1.5 rounded-md text-sm", "hover:bg-accent hover:text-accent-foreground transition-colors", "flex items-center justify-between gap-2 group"),
+						children: [/* @__PURE__ */ b(a, {
+							align: "center",
+							gap: "2",
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ y(_, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" }), /* @__PURE__ */ y(s, {
+								as: "span",
+								weight: "medium",
+								className: "capitalize truncate group-hover:text-accent-foreground",
+								children: n.name
+							})]
+						}), r ? /* @__PURE__ */ y(g, { className: "w-3.5 h-3.5 text-muted-foreground group-hover:text-accent-foreground flex-shrink-0" }) : /* @__PURE__ */ y(t, {
+							variant: "secondary",
+							className: "font-mono text-[10px] px-1.5 py-0 flex-shrink-0",
+							children: n.syntax
+						})]
+					})
+				}), /* @__PURE__ */ y(u, { children: /* @__PURE__ */ y(s, { children: n.description ?? n.name }) })] }, n.syntax);
+			})
+		})
+	}) });
+}
+//#endregion
+export { x as DEFAULT_FORMATTING_PICKER_LABELS, S as FormattingPickerContent };
+
+//# sourceMappingURL=formatting-picker-content.js.map

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

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

package/dist/components/editor/formula/formula-editor-panel.d.ts

@@ -0,0 +1,102 @@
+import { type ReactNode } from "react";
+/**
+ * One built-in formula function, as the app's `getFormulaFunctions` describes
+ * it. Declared structurally here so a host can type-check its own payload
+ * without this package depending on the FiestaBoard API client.
+ */
+export interface FormulaFunction {
+    /** Uppercase call name, e.g. `IF`. */
+    name: string;
+    /** Grouping key. The five FiestaBoard categories get an icon and an accent
+     *  colour; anything else still renders, in a neutral group after them. */
+    category: string;
+    /** Human-readable call shape, e.g. `IF(cond, then, else)`. */
+    signature: string;
+    /** One-line description, shown in the hover tooltip. */
+    summary: string;
+}
+/** Result of an injected expression validation round-trip. */
+export interface FormulaValidationResult {
+    valid: boolean;
+    /** Message to show under the editor when `valid` is false. */
+    error?: string;
+}
+export interface FormulaEditorLabels {
+    /** Tab that lists the built-in functions. */
+    functionsTab: string;
+    /** Tab that hosts the injected variable picker. */
+    variablesTab: string;
+    /** Accessible name for the function-list loading placeholder. */
+    loading: string;
+    /** Field label above the CodeMirror input. */
+    formulaExpression: string;
+    /** Confirm button, `mode="create"`. */
+    insert: string;
+    /** Confirm button, `mode="edit"`. */
+    done: string;
+    /** Dismiss button when the panel opened empty. */
+    cancel: string;
+    /** Dismiss button when the panel opened on an existing formula. */
+    close: string;
+    categoryLogic: string;
+    categoryMath: string;
+    categoryText: string;
+    categoryConversion: string;
+    categoryColor: string;
+}
+export declare const DEFAULT_FORMULA_EDITOR_LABELS: FormulaEditorLabels;
+export interface FormulaEditorPanelProps {
+    /**
+     * Pre-populated expression body (no {{= }}). Used in edit mode.
+     *
+     * Read when the CodeMirror document is created, i.e. at mount: changing it
+     * afterwards does not rewrite what the user is editing. To reopen the panel
+     * on a different formula, give it a new `key`.
+     */
+    initialExpr?: string;
+    /** "create" → Insert button; "edit" → Done button + Cancel */
+    mode: "create" | "edit";
+    /** Called with the bare expression when the user confirms. */
+    onConfirm: (expr: string) => void;
+    /** Called when the user cancels (edit mode only). */
+    onCancel?: () => void;
+    /**
+     * Built-in function reference, already resolved by the host. Grouped by
+     * `category` and sorted by name for display.
+     */
+    formulaFunctions?: FormulaFunction[];
+    /** Show placeholders in the Functions tab while the host fetches. */
+    isLoadingFunctions?: boolean;
+    /**
+     * Validates the **bare expression body** — no `{{=` / `}}` wrapper, already
+     * trimmed. A host backed by a whole-template validator wraps it itself:
+     * `validateExpression={(e) => api.validateTemplate(`{{= ${e} }}`)}`.
+     *
+     * Calls are debounced 300 ms and results for a stale expression are
+     * discarded, so an implementation only has to be idempotent, not cancelable.
+     *
+     * Omitting it turns validation off entirely: the state indicator stays
+     * blank and Confirm enables on any non-empty expression. That is deliberate
+     * — a panel with no validator must not present a permanently disabled
+     * Confirm button.
+     */
+    validateExpression?: (expr: string) => Promise<FormulaValidationResult>;
+    /**
+     * Renders the Variables tab. Omitted, the tab strip disappears and the panel
+     * shows only functions — never a placeholder.
+     *
+     * A slot rather than a direct import of the group's `VariablePickerContent`:
+     * that component pulls in lucide-react's full `icons` barrel, and injecting
+     * it lets the host hand over the *same* lazy chunk its toolbar already
+     * loaded instead of duplicating the barrel into this already
+     * CodeMirror-heavy panel (FiestaBoard #1575). This panel wraps the slot in
+     * its own `<Suspense>`, so a bare `lazy()` component can be passed straight
+     * in.
+     */
+    renderVariablePicker?: (ctx: {
+        onInsert: (variable: string) => void;
+    }) => ReactNode;
+    labels?: Partial<FormulaEditorLabels>;
+    className?: string;
+}
+export declare function FormulaEditorPanel({ initialExpr, mode, onConfirm, onCancel, formulaFunctions, isLoadingFunctions, validateExpression, renderVariablePicker, labels, className, }: FormulaEditorPanelProps): import("react").JSX.Element;