@fiestaboard/ui 3.0.1 → 3.2.0

package/dist/components/forms/toggle-card.d.ts

@@ -0,0 +1,120 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+/**
+ * A `radiogroup` has no implicit label, so axe (and every screen reader)
+ * needs one from the call site. Requiring it in the type means a group can
+ * never ship nameless: pass `aria-label`, or `aria-labelledby` pointing at
+ * the heading/`<Label>` that already introduces the options.
+ */
+export type SelectionGroupNameProps = {
+    "aria-label": string;
+    "aria-labelledby"?: string;
+} | {
+    "aria-labelledby": string;
+    "aria-label"?: string;
+};
+export interface SelectionGroupBaseProps {
+    /** Selected option value (controlled). Pair with `onValueChange`. */
+    value?: string | null;
+    /** Initially selected option value (uncontrolled). */
+    defaultValue?: string | null;
+    /** Fired with the newly selected value. Selection is never emptied. */
+    onValueChange?: (value: string) => void;
+    /** Disables every option in the group. */
+    disabled?: boolean;
+    /** Form field name — each option renders a hidden radio input under it. */
+    name?: string;
+    /** id of the form that owns the group, when rendered outside it. */
+    form?: string;
+    /** Marks the group required for form validation. */
+    required?: boolean;
+}
+declare const toggleCardGroupVariants: (props?: ({
+    columns?: "1" | "2" | "3" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const toggleCardVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    align?: "start" | "center" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ToggleCardSize = NonNullable<VariantProps<typeof toggleCardVariants>["size"]>;
+type ToggleCardAlign = NonNullable<VariantProps<typeof toggleCardVariants>["align"]>;
+export type ToggleCardGroupProps = SelectionGroupBaseProps & SelectionGroupNameProps & VariantProps<typeof toggleCardGroupVariants> & {
+    /** Size applied to every card in the group; a card may override it. */
+    size?: ToggleCardSize;
+    /** Content alignment applied to every card in the group. */
+    align?: ToggleCardAlign;
+    /** Show the selected-check on every card in the group. @default true */
+    indicator?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+} & Omit<React.ComponentProps<"div">, "defaultValue" | "onChange">;
+/**
+ * Single-select group of {@link ToggleCard}s — a real `radiogroup`.
+ *
+ * One tab stop for the whole group; arrow keys move the selection and wrap.
+ * Cards inside it take their state from the group's `value`, so they need a
+ * `value` of their own and must NOT be given `pressed`.
+ */
+declare function ToggleCardGroup({ className, columns, size, align, indicator, children, ...props }: ToggleCardGroupProps): React.JSX.Element;
+export type ToggleCardProps = Omit<React.ComponentProps<"button">, "value" | "title"> & VariantProps<typeof toggleCardVariants> & {
+    /** Identifies the card inside a {@link ToggleCardGroup}. */
+    value?: string;
+    /** Standalone toggle state — only outside a group. Pair with `onPressedChange`. */
+    pressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+    /** Leading icon (a lucide element); sized to 16px unless it sets its own. */
+    icon?: React.ReactNode;
+    /** Primary label. Provides the card's accessible name. */
+    title?: React.ReactNode;
+    /** Secondary line under the title. */
+    description?: React.ReactNode;
+    /** Trailing content on the title row — a badge, a size indicator, a price. */
+    meta?: React.ReactNode;
+    /**
+     * Render a check in the corner when selected, so selection is not carried
+     * by hue alone. @default true
+     */
+    indicator?: boolean;
+    /** Extra body content below the title row — a preview, a thumbnail row. */
+    children?: React.ReactNode;
+};
+/**
+ * A large selectable tile: optional icon, title, description and preview
+ * body.
+ *
+ * Inside a {@link ToggleCardGroup} it is a `radio` (`aria-checked`, roving
+ * tabindex, arrow-key navigation). On its own, with `pressed`, it is a
+ * toggle button (`aria-pressed`). See the note at the top of this file.
+ */
+declare function ToggleCard({ className, size, align, value, pressed, onPressedChange, icon, title, description, meta, indicator, children, ...props }: ToggleCardProps): React.JSX.Element;
+declare const segmentedControlVariants: (props?: ({
+    wrap?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const segmentedControlItemVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type SegmentedControlSize = NonNullable<VariantProps<typeof segmentedControlItemVariants>["size"]>;
+export type SegmentedControlProps = SelectionGroupBaseProps & SelectionGroupNameProps & VariantProps<typeof segmentedControlVariants> & {
+    /** Size applied to every item; an item may override it. */
+    size?: SegmentedControlSize;
+    className?: string;
+    children?: React.ReactNode;
+} & Omit<React.ComponentProps<"div">, "defaultValue" | "onChange">;
+/**
+ * Compact single-select pill row — the toolbar-scale sibling of
+ * {@link ToggleCardGroup}, with the same `radiogroup` semantics.
+ */
+declare function SegmentedControl({ className, size, wrap, children, ...props }: SegmentedControlProps): React.JSX.Element;
+export type SegmentedControlItemProps = Omit<React.ComponentProps<"button">, "value"> & VariantProps<typeof segmentedControlItemVariants> & {
+    /** Identifies the item inside a {@link SegmentedControl}. */
+    value?: string;
+    /** Standalone toggle state — only outside a SegmentedControl. */
+    pressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
+};
+/**
+ * One pill. Inside a {@link SegmentedControl} it is a `radio`; on its own
+ * with `pressed` it is an `aria-pressed` toggle (a filter chip).
+ */
+declare function SegmentedControlItem({ className, size, value, pressed, onPressedChange, children, ...props }: SegmentedControlItemProps): React.JSX.Element;
+export { SegmentedControl, SegmentedControlItem, segmentedControlItemVariants, segmentedControlVariants, ToggleCard, ToggleCardGroup, toggleCardGroupVariants, toggleCardVariants, };

package/dist/components/forms/toggle-card.js

@@ -0,0 +1,211 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Check as t } from "lucide-react";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { cva as a } from "class-variance-authority";
+import { Radio as o } from "@base-ui/react/radio";
+import { RadioGroup as s } from "@base-ui/react/radio-group";
+//#region src/components/forms/toggle-card.tsx
+function c({ slot: e, onValueChange: t, className: n, children: i, ...a }) {
+	return /* @__PURE__ */ r(s, {
+		"data-slot": e,
+		className: n,
+		onValueChange: (e) => t?.(e),
+		...a,
+		children: i
+	});
+}
+function l({ grouped: e, value: t, pressed: n, onPressedChange: i, onClick: a, disabled: s, ref: c, children: l, ...u }) {
+	if (e) return /* @__PURE__ */ r(o.Root, {
+		value: t,
+		render: /* @__PURE__ */ r("button", { type: "button" }),
+		nativeButton: !0,
+		disabled: s,
+		onClick: a,
+		ref: c,
+		...u,
+		children: l
+	});
+	let d = (e) => {
+		a?.(e), !e.defaultPrevented && i?.(!n);
+	};
+	return /* @__PURE__ */ r("button", {
+		type: "button",
+		disabled: s,
+		ref: c,
+		...n === void 0 ? {} : {
+			"aria-pressed": n,
+			...n ? { "data-checked": "" } : { "data-unchecked": "" }
+		},
+		onClick: d,
+		...u,
+		children: l
+	});
+}
+var u = a("gap-3", {
+	variants: { columns: {
+		1: "flex flex-col",
+		2: "grid grid-cols-1 sm:grid-cols-2",
+		3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
+	} },
+	defaultVariants: { columns: "1" }
+}), d = a([
+	"group/toggle-card relative flex w-full cursor-pointer flex-col border border-input bg-transparent",
+	"transition-[color,background-color,border-color,box-shadow] duration-control outline-none",
+	"not-data-[checked]:hover:border-primary/50 not-data-[checked]:hover:bg-accent/50",
+	"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+	"data-[checked]:border-primary data-[checked]:bg-primary/5",
+	"disabled:pointer-events-none disabled:opacity-50",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+], {
+	variants: {
+		size: {
+			sm: "gap-1.5 rounded-md p-2 text-xs",
+			md: "gap-2 rounded-lg p-3 text-sm",
+			lg: "gap-2.5 rounded-xl px-4 py-3.5 text-sm"
+		},
+		align: {
+			start: "text-left",
+			center: "text-center"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		align: "start"
+	}
+}), f = a("flex w-full min-w-0", {
+	variants: { align: {
+		start: "flex-row items-start gap-3",
+		center: "flex-col items-center gap-1.5"
+	} },
+	defaultVariants: { align: "start" }
+}), p = n.createContext(null);
+function m({ className: t, columns: i, size: a, align: o, indicator: s, children: l, ...d }) {
+	let f = n.useMemo(() => ({
+		size: a,
+		align: o,
+		indicator: s
+	}), [
+		a,
+		o,
+		s
+	]);
+	return /* @__PURE__ */ r(p.Provider, {
+		value: f,
+		children: /* @__PURE__ */ r(c, {
+			slot: "toggle-card-group",
+			className: e(u({ columns: i }), t),
+			...d,
+			children: l
+		})
+	});
+}
+function h({ className: a, size: o, align: s, value: c, pressed: u, onPressedChange: m, icon: h, title: g, description: _, meta: v, indicator: y, children: b, ...x }) {
+	let S = n.useContext(p), C = o ?? S?.size ?? "md", w = s ?? S?.align ?? "start", T = y ?? S?.indicator ?? !0;
+	return /* @__PURE__ */ i(l, {
+		grouped: S !== null,
+		value: c,
+		pressed: u,
+		onPressedChange: m,
+		"data-slot": "toggle-card",
+		"data-size": C,
+		className: e(d({
+			size: C,
+			align: w
+		}), T && (w === "center" ? "px-6" : "pr-8"), a),
+		...x,
+		children: [
+			/* @__PURE__ */ i("span", {
+				"data-slot": "toggle-card-header",
+				className: f({ align: w }),
+				children: [
+					h != null && /* @__PURE__ */ r("span", {
+						"data-slot": "toggle-card-icon",
+						className: e("flex shrink-0 items-center text-muted-foreground transition-colors duration-control group-data-[checked]/toggle-card:text-primary", w === "start" && "mt-0.5"),
+						"aria-hidden": "true",
+						children: h
+					}),
+					(g != null || _ != null) && /* @__PURE__ */ i("span", {
+						"data-slot": "toggle-card-body",
+						className: "flex min-w-0 flex-1 flex-col gap-1",
+						children: [g != null && /* @__PURE__ */ r("span", {
+							"data-slot": "toggle-card-title",
+							className: "font-medium",
+							children: g
+						}), _ != null && /* @__PURE__ */ r("span", {
+							"data-slot": "toggle-card-description",
+							className: "text-xs font-normal text-muted-foreground",
+							children: _
+						})]
+					}),
+					v != null && /* @__PURE__ */ r("span", {
+						"data-slot": "toggle-card-meta",
+						className: "shrink-0 text-muted-foreground",
+						children: v
+					})
+				]
+			}),
+			b,
+			T && /* @__PURE__ */ r("span", {
+				"data-slot": "toggle-card-indicator",
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute right-2 top-2 flex size-4 items-center justify-center rounded-full border border-input text-primary-foreground opacity-0 transition-[color,background-color,border-color,opacity] duration-control group-data-[checked]/toggle-card:border-primary group-data-[checked]/toggle-card:bg-primary group-data-[checked]/toggle-card:opacity-100",
+				children: /* @__PURE__ */ r(t, { className: "size-3" })
+			})
+		]
+	});
+}
+var g = a("flex items-center gap-2", {
+	variants: { wrap: {
+		true: "flex-wrap",
+		false: "flex-nowrap"
+	} },
+	defaultVariants: { wrap: !0 }
+}), _ = a([
+	"group/segmented-item inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap",
+	"border border-input bg-transparent font-medium text-foreground",
+	"transition-[color,background-color,border-color,box-shadow] duration-control outline-none",
+	"not-data-[checked]:hover:border-primary/50 not-data-[checked]:hover:bg-accent",
+	"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+	"data-[checked]:border-primary data-[checked]:bg-primary/10 data-[checked]:text-primary",
+	"disabled:pointer-events-none disabled:opacity-50",
+	"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+], {
+	variants: { size: {
+		sm: "h-7 rounded-md px-2.5 text-xs",
+		md: "h-8 rounded-md px-3 text-sm",
+		lg: "h-9 rounded-md px-4 text-sm"
+	} },
+	defaultVariants: { size: "md" }
+}), v = n.createContext(null);
+function y({ className: t, size: i, wrap: a, children: o, ...s }) {
+	let l = n.useMemo(() => ({ size: i }), [i]);
+	return /* @__PURE__ */ r(v.Provider, {
+		value: l,
+		children: /* @__PURE__ */ r(c, {
+			slot: "segmented-control",
+			className: e(g({ wrap: a }), t),
+			...s,
+			children: o
+		})
+	});
+}
+function b({ className: t, size: i, value: a, pressed: o, onPressedChange: s, children: c, ...u }) {
+	let d = n.useContext(v), f = i ?? d?.size ?? "md";
+	return /* @__PURE__ */ r(l, {
+		grouped: d !== null,
+		value: a,
+		pressed: o,
+		onPressedChange: s,
+		"data-slot": "segmented-control-item",
+		"data-size": f,
+		className: e(_({ size: f }), t),
+		...u,
+		children: c
+	});
+}
+//#endregion
+export { y as SegmentedControl, b as SegmentedControlItem, h as ToggleCard, m as ToggleCardGroup, _ as segmentedControlItemVariants, g as segmentedControlVariants, u as toggleCardGroupVariants, d as toggleCardVariants };
+
+//# sourceMappingURL=toggle-card.js.map

package/dist/components/forms/toggle-card.js.map

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

package/dist/components/overlays/popover.d.ts

@@ -0,0 +1,65 @@
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import * as React from "react";
+type PopoverRootProps = React.ComponentProps<typeof PopoverPrimitive.Root>;
+type PopoverPositionerProps = React.ComponentProps<typeof PopoverPrimitive.Positioner>;
+declare function usePopoverClose(): () => void;
+interface PopoverProps extends Omit<PopoverRootProps, "children"> {
+    children?: React.ReactNode;
+    /**
+     * Whether a press outside the popup dismisses it. Escape and `<PopoverClose>`
+     * keep working when this is `false`, so the popup is never a keyboard trap.
+     * @default true
+     */
+    closeOnOutsideClick?: boolean;
+}
+declare function Popover({ actionsRef, closeOnOutsideClick, onOpenChange, children, ...props }: PopoverProps): React.JSX.Element;
+declare function PopoverTrigger({ asChild, children, ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+interface PopoverContentProps extends Omit<React.ComponentProps<typeof PopoverPrimitive.Popup>, "children"> {
+    /** Preferred side of the anchor. Flipped automatically when it does not fit. */
+    side?: "top" | "right" | "bottom" | "left";
+    /** Alignment along the chosen side. Shifted automatically when it does not fit. */
+    align?: "start" | "center" | "end";
+    /** Distance in pixels between the anchor and the popup. */
+    sideOffset?: number;
+    /** Offset in pixels along the alignment axis. */
+    alignOffset?: number;
+    /** Minimum gap kept between the popup and the edge of the viewport. */
+    collisionPadding?: PopoverPositionerProps["collisionPadding"];
+    /** Element the popup is kept inside of. Defaults to the viewport. */
+    collisionBoundary?: PopoverPositionerProps["collisionBoundary"];
+    /** How side/alignment overflow is corrected. See Base UI's `collisionAvoidance`. */
+    collisionAvoidance?: PopoverPositionerProps["collisionAvoidance"];
+    /** Keep the popup on screen after the anchor scrolls out of view. */
+    sticky?: boolean;
+    /**
+     * Anchor the popup to something other than the trigger — an element, a ref,
+     * or a virtual element (`getBoundingClientRect`). Useful for anchoring to a
+     * text selection or an editor node rather than a button.
+     */
+    anchor?: PopoverPositionerProps["anchor"];
+    /** Class applied to the positioner wrapper rather than the popup surface. */
+    positionerClassName?: string;
+    /**
+     * Accessible name for the popup, which Base UI renders with `role="dialog"`.
+     * Ignored once a `<PopoverTitle>` is rendered inside, since that wins by
+     * `aria-labelledby`.
+     * @default "Popover"
+     */
+    label?: string;
+    /**
+     * Popup body. A function receives an imperative `close`, so a picker can
+     * dismiss itself on selection.
+     */
+    children?: React.ReactNode | ((api: {
+        close: () => void;
+    }) => React.ReactNode);
+}
+declare function PopoverContent({ className, positionerClassName, side, align, sideOffset, alignOffset, collisionPadding, collisionBoundary, collisionAvoidance, sticky, anchor, label, children, ...props }: PopoverContentProps): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Title>): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: React.ComponentProps<typeof PopoverPrimitive.Description>): React.JSX.Element;
+declare function PopoverClose({ asChild, children, ...props }: React.ComponentProps<typeof PopoverPrimitive.Close> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+export { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, usePopoverClose };

package/dist/components/overlays/popover.js

@@ -0,0 +1,89 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Popover as r } from "@base-ui/react/popover";
+//#region src/components/overlays/popover.tsx
+var i = "outside-press", a = t.createContext(() => {});
+function o() {
+	return t.useContext(a);
+}
+function s({ actionsRef: e, closeOnOutsideClick: o = !0, onOpenChange: s, children: c, ...l }) {
+	let u = t.useRef(null);
+	t.useImperativeHandle(e, () => ({
+		close: () => u.current?.close(),
+		unmount: () => u.current?.unmount()
+	}));
+	let d = t.useCallback(() => {
+		u.current?.close();
+	}, []), f = t.useCallback((e, t) => {
+		if (!e && !o && t.reason === i) {
+			t.cancel();
+			return;
+		}
+		s?.(e, t);
+	}, [o, s]);
+	return /* @__PURE__ */ n(r.Root, {
+		actionsRef: u,
+		onOpenChange: f,
+		...l,
+		children: /* @__PURE__ */ n(a.Provider, {
+			value: d,
+			children: c
+		})
+	});
+}
+function c({ asChild: e = !1, children: i, ...a }) {
+	return /* @__PURE__ */ n(r.Trigger, {
+		"data-slot": "popover-trigger",
+		...e ? { render: t.Children.only(i) } : { children: i },
+		...a
+	});
+}
+function l({ className: t, positionerClassName: i, side: a = "bottom", align: s = "center", sideOffset: c = 4, alignOffset: l, collisionPadding: u = 8, collisionBoundary: d, collisionAvoidance: f, sticky: p, anchor: m, label: h = "Popover", children: g, ..._ }) {
+	let v = o();
+	return /* @__PURE__ */ n(r.Portal, { children: /* @__PURE__ */ n(r.Positioner, {
+		side: a,
+		align: s,
+		sideOffset: c,
+		alignOffset: l,
+		collisionPadding: u,
+		collisionBoundary: d,
+		collisionAvoidance: f,
+		sticky: p,
+		anchor: m,
+		className: e("z-[var(--z-popover)]", i),
+		children: /* @__PURE__ */ n(r.Popup, {
+			"data-slot": "popover-content",
+			"aria-label": h,
+			className: e("max-h-[var(--available-height)] max-w-[var(--available-width)] origin-[var(--transform-origin)] overflow-auto rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[ending-style]:animate-out data-[ending-style]:fade-out-0 data-[ending-style]:zoom-out-95 data-[open]:animate-in data-[open]:fade-in-0 data-[open]:zoom-in-95", t),
+			..._,
+			children: typeof g == "function" ? g({ close: v }) : g
+		})
+	}) });
+}
+function u({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Title, {
+		"data-slot": "popover-title",
+		className: e("text-sm font-semibold leading-none tracking-tight", t),
+		...i
+	});
+}
+function d({ className: t, ...i }) {
+	return /* @__PURE__ */ n(r.Description, {
+		"data-slot": "popover-description",
+		className: e("text-sm text-muted-foreground", t),
+		...i
+	});
+}
+function f({ asChild: e = !1, children: i, ...a }) {
+	return /* @__PURE__ */ n(r.Close, {
+		"data-slot": "popover-close",
+		...e ? { render: t.Children.only(i) } : { children: i },
+		...a
+	});
+}
+//#endregion
+export { s as Popover, f as PopoverClose, l as PopoverContent, d as PopoverDescription, u as PopoverTitle, c as PopoverTrigger, o as usePopoverClose };
+
+//# sourceMappingURL=popover.js.map

package/dist/components/overlays/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover.js","names":[],"sources":["../../../src/components/overlays/popover.tsx"],"mappings":";;;;;;AAiBA,IAAM,IAAgB,iBAWhB,IAAsB,EAAM,oBATf,CAAC,CAS4C;AAEhE,SAAS,IAA8B;CACrC,OAAO,EAAM,WAAW,CAAmB;AAC7C;AAYA,SAAS,EAAQ,EAAE,eAAY,yBAAsB,IAAM,iBAAc,aAAU,GAAG,KAAuB;CAC3G,IAAM,IAAU,EAAM,OAA8B,IAAI;CAKxD,EAAM,oBAAoB,UAAmB;EAC3C,aAAa,EAAQ,SAAS,MAAM;EACpC,eAAe,EAAQ,SAAS,QAAQ;CAC1C,EAAE;CAEF,IAAM,IAAQ,EAAM,kBAAkB;EACpC,EAAQ,SAAS,MAAM;CACzB,GAAG,CAAC,CAAC,GAEC,IAAmB,EAAM,aAC5B,GAAe,MAAsC;EACpD,IAAI,CAAC,KAAQ,CAAC,KAAuB,EAAQ,WAAW,GAAe;GACrE,EAAQ,OAAO;GACf;EACF;EACA,IAAe,GAAM,CAAO;CAC9B,GACA,CAAC,GAAqB,CAAY,CACpC;CAEA,OACE,kBAAC,EAAiB,MAAlB;EAAuB,YAAY;EAAS,cAAc;EAAkB,GAAI;EAC9E,UAAA,kBAAC,EAAoB,UAArB;GAA8B,OAAO;GAAQ;EAAuC,CAAA;CAC/D,CAAA;AAE3B;AAEA,SAAS,EAAe,EACtB,aAAU,IACV,aACA,GAAG,KAC6E;CAChF,OACE,kBAAC,EAAiB,SAAlB;EACE,aAAU;EACV,GAAK,IAAU,EAAE,QAAQ,EAAM,SAAS,KAAK,CAAQ,EAAwB,IAAI,EAAE,YAAS;EAC5F,GAAI;CACL,CAAA;AAEL;AAyCA,SAAS,EAAe,EACtB,cACA,wBACA,UAAO,UACP,WAAQ,UACR,gBAAa,GACb,gBAEA,sBAAmB,GACnB,sBACA,uBACA,WACA,WACA,WAAQ,WACR,aACA,GAAG,KACmB;CACtB,IAAM,IAAQ,EAAgB;CAE9B,OACE,kBAAC,EAAiB,QAAlB,EAAA,UACE,kBAAC,EAAiB,YAAlB;EACQ;EACC;EACK;EACC;EACK;EACC;EACC;EACZ;EACA;EACR,WAAW,EAAG,wBAAwB,CAAmB;EAEzD,UAAA,kBAAC,EAAiB,OAAlB;GACE,aAAU;GACV,cAAY;GACZ,WAAW,EACT,kgBACA,CACF;GACA,GAAI;GAEH,UAAA,OAAO,KAAa,aAAa,EAAS,EAAE,SAAM,CAAC,IAAI;EAClC,CAAA;CACG,CAAA,EACN,CAAA;AAE7B;AAEA,SAAS,EAAa,EAAE,cAAW,GAAG,KAA8D;CAClG,OACE,kBAAC,EAAiB,OAAlB;EACE,aAAU;EACV,WAAW,EAAG,qDAAqD,CAAS;EAC5E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAmB,EAAE,cAAW,GAAG,KAAoE;CAC9G,OACE,kBAAC,EAAiB,aAAlB;EACE,aAAU;EACV,WAAW,EAAG,iCAAiC,CAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAa,EACpB,aAAU,IACV,aACA,GAAG,KAC2E;CAC9E,OACE,kBAAC,EAAiB,OAAlB;EACE,aAAU;EACV,GAAK,IAAU,EAAE,QAAQ,EAAM,SAAS,KAAK,CAAQ,EAAwB,IAAI,EAAE,YAAS;EAC5F,GAAI;CACL,CAAA;AAEL"}

package/dist/editor.css

@@ -0,0 +1,164 @@
+/**
+ * Template editor stylesheet — ProseMirror surface rules for
+ * `components/editor/template-editor.tsx`.
+ *
+ * Opt-in subpath, exactly like `fonts.css`: nothing in the package imports it,
+ * so an app that never renders the editor never pays for it. Consumers of
+ * `TemplateEditor` MUST import it once, alongside `theme.css`:
+ *
+ *   import "@fiestaboard/ui/theme.css";
+ *   import "@fiestaboard/ui/editor.css";
+ *
+ * Ported verbatim from the FiestaBoard app, where these rules lived in an
+ * inline `<style>` element rendered inside the editor component — i.e. the
+ * whole sheet was re-parsed on every mount, duplicated per instance, and could
+ * not be treeshaken, cached, or overridden by app CSS with predictable
+ * ordering. They are global on purpose: ProseMirror owns the DOM inside
+ * `.ProseMirror` and Tailwind utilities cannot reach nodes it creates
+ * (`<br>`, node-view wrappers, the `::before` placeholder). Tailwind
+ * arbitrary-variant classes that CAN reach their target stay inline on the
+ * component.
+ *
+ * `var(--primary)`, `var(--muted-foreground)` come from theme.css.
+ */
+
+/* Ensure ProseMirror container looks like a single textarea */
+.ProseMirror {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  max-width: 100%;
+  overflow: visible;
+  outline: none;
+}
+
+/* Placeholder for first empty line only - textarea-like */
+.ProseMirror[data-placeholder] > p:first-child:empty::before {
+  content: attr(data-placeholder);
+  color: var(--muted-foreground);
+  pointer-events: none;
+  position: absolute;
+}
+
+.ProseMirror:focus[data-placeholder] > p:first-child:empty::before {
+  opacity: 0.5;
+}
+
+/* Standard paragraph - no wrapping, fixed line height */
+.ProseMirror > p {
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+  font-family: "Courier New", "Courier", monospace;
+  font-size: 0.875rem;
+  letter-spacing: 0;
+  line-height: 1.5rem;
+  white-space: nowrap;
+  overflow: visible; /* Let content flow naturally, limit via input handling */
+  display: block;
+}
+
+/* Hard breaks create line breaks naturally */
+.ProseMirror br {
+  display: block;
+  content: "";
+  margin: 0;
+  padding: 0;
+  line-height: 0;
+}
+
+/* Prevent any extra spacing around hard breaks */
+.ProseMirror br::before,
+.ProseMirror br::after {
+  content: none;
+}
+
+/* Empty paragraph minimum height */
+.ProseMirror > p:empty {
+  min-height: 1.5rem;
+}
+
+/* Cursor styling */
+.ProseMirror {
+  caret-color: var(--primary);
+}
+
+.ProseMirror:focus {
+  outline: none;
+}
+
+/* Inline nodes - keep them truly inline, no wrapping */
+.ProseMirror [data-type="variable"],
+.ProseMirror [data-type="color-tile"],
+.ProseMirror [data-type="fill-space"],
+.ProseMirror [data-type="wrapped-text"] {
+  display: inline-block !important;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+/* Node view wrappers - prevent wrapping */
+.ProseMirror [data-node-view-wrapper] {
+  display: inline-block !important;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+/* Ensure text nodes also don't wrap */
+.ProseMirror p > span {
+  white-space: nowrap;
+}
+
+/* All inline nodes must not exceed line height */
+.ProseMirror [data-type="variable"],
+.ProseMirror [data-type="color-tile"],
+.ProseMirror [data-type="fill-space"],
+.ProseMirror [data-type="wrapped-text"] {
+  max-height: 1.4rem !important;
+  height: auto !important;
+  line-height: 1.4rem;
+  vertical-align: middle;
+}
+
+/* Text should be monospace and equal width - each character is exactly 1ch */
+.ProseMirror {
+  font-family: "Courier New", "Courier", monospace;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Don't transform node views (they handle their own display) */
+.ProseMirror [data-type="variable"],
+.ProseMirror [data-type="color-tile"],
+.ProseMirror [data-type="fill-space"],
+.ProseMirror [data-type="wrapped-text"] {
+  text-transform: none;
+}
+
+/* Enable dragging for nodes with data-drag-handle */
+.ProseMirror [data-drag-handle] {
+  cursor: grab;
+}
+
+.ProseMirror [data-drag-handle]:active {
+  cursor: grabbing;
+}
+
+/* Ensure no weird spacing around inline nodes */
+.ProseMirror [data-type="variable"]::before,
+.ProseMirror [data-type="variable"]::after,
+.ProseMirror [data-type="color-tile"]::before,
+.ProseMirror [data-type="color-tile"]::after {
+  content: none;
+}
+
+/* Range-selection highlight for inline atom nodes (color tiles,
+   variables, fill-space).  onSelectionUpdate adds this
+   class to any atom node DOM element inside the selection range,
+   giving shift+arrow and click-drag a visible highlight without
+   needing user-select: all (which made Safari treat clicks on a
+   tag as selecting the entire line). */
+.ProseMirror .selected-inline {
+  outline: 2px solid var(--primary);
+  outline-offset: 1px;
+  border-radius: 3px;
+}