@fiestaboard/ui 1.6.5 → 2.0.0

package/dist/components/plugin/board-showcase.d.ts

@@ -0,0 +1,24 @@
+import { type BoardPreviewEntry, type PreviewShapeLabels } from "../../lib/board-previews";
+export interface BoardShowcaseLabels extends PreviewShapeLabels {
+    /** Accessible name for the shape tab list. */
+    boardShape: string;
+    /** Accessible name for the board-colour group. */
+    boardColor: string;
+    blackBoard: string;
+    whiteBoard: string;
+}
+export declare const DEFAULT_SHOWCASE_LABELS: BoardShowcaseLabels;
+export interface BoardShowcaseProps {
+    /** Literal boards to show; the first is the default tab. */
+    previews: BoardPreviewEntry[];
+    /** Accessible description of the board, e.g. "Weather on a split-flap board". */
+    previewLabel?: string;
+    size?: "sm" | "md" | "lg";
+    /** Controlled board colour. Leave unset to let the showcase own it. */
+    boardType?: "black" | "white";
+    defaultBoardType?: "black" | "white";
+    onBoardTypeChange?: (boardType: "black" | "white") => void;
+    labels?: Partial<BoardShowcaseLabels>;
+    className?: string;
+}
+export declare function BoardShowcase({ previews, previewLabel, size, boardType, defaultBoardType, onBoardTypeChange, labels, className, }: BoardShowcaseProps): import("react").JSX.Element | null;

package/dist/components/plugin/board-showcase.js

@@ -0,0 +1,73 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Tabs as t, TabsContent as n, TabsList as r, TabsTrigger as i } from "../ui/tabs.js";
+import { StaticBoardDisplay as a } from "../board/static-board-display.js";
+import { DEFAULT_SHAPE_LABELS as o, previewLabels as s, previewMessage as c } from "../../lib/board-previews.js";
+import { useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/plugin/board-showcase.tsx
+var f = {
+	...o,
+	boardShape: "Board shape",
+	boardColor: "Board color",
+	blackBoard: "Black Board",
+	whiteBoard: "White Board"
+}, p = "rounded-full border px-4 py-1.5 text-xs font-medium transition-colors data-[active]:border-brand-emphasis data-[active]:bg-brand-emphasis data-[active]:text-brand-foreground data-[active]:font-semibold hover:border-brand hover:text-brand data-[active]:hover:text-brand-foreground";
+function m({ previews: o, previewLabel: m, size: h = "md", boardType: g, defaultBoardType: _ = "black", onBoardTypeChange: v, labels: y, className: b }) {
+	let x = {
+		...f,
+		...y
+	}, [S, C] = l(_), w = g ?? S;
+	function T(e) {
+		g === void 0 && C(e), v?.(e);
+	}
+	if (o.length === 0) return null;
+	let E = s(o, x);
+	return /* @__PURE__ */ d("div", {
+		"data-slot": "board-showcase",
+		className: e("flex flex-col items-center gap-4", b),
+		children: [/* @__PURE__ */ d(t, {
+			defaultValue: 0,
+			className: "flex w-full flex-col items-center gap-4",
+			children: [o.length > 1 && /* @__PURE__ */ u(r, {
+				"aria-label": x.boardShape,
+				className: "h-auto gap-2 rounded-full bg-transparent p-0",
+				children: E.map((e, t) => /* @__PURE__ */ u(i, {
+					value: t,
+					className: p,
+					children: e
+				}, e))
+			}), o.map((e, t) => /* @__PURE__ */ u(n, {
+				value: t,
+				className: "mt-0 flex w-full justify-center overflow-x-auto rounded-xl bg-muted/40 px-4 py-6 shadow-card",
+				children: /* @__PURE__ */ u(a, {
+					message: c(e),
+					size: h,
+					boardType: w,
+					deviceType: e.device_type ?? "flagship",
+					notesWide: e.notes_wide ?? 1,
+					notesTall: e.notes_tall ?? 1,
+					previewLabel: m
+				})
+			}, E[t]))]
+		}), /* @__PURE__ */ u("div", {
+			role: "group",
+			"aria-label": x.boardColor,
+			className: "flex",
+			children: ["black", "white"].map((t) => {
+				let n = w === t;
+				return /* @__PURE__ */ u("button", {
+					type: "button",
+					"aria-pressed": n,
+					onClick: () => T(t),
+					className: e("border px-4 py-1.5 text-xs font-medium transition-colors", "first:rounded-l-full last:rounded-r-full [&:not(:last-child)]:border-r-0", "outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50", n ? "border-brand-emphasis bg-brand-emphasis font-semibold text-brand-foreground" : "text-muted-foreground hover:border-brand hover:text-brand"),
+					children: t === "black" ? x.blackBoard : x.whiteBoard
+				}, t);
+			})
+		})]
+	});
+}
+//#endregion
+export { m as BoardShowcase, f as DEFAULT_SHOWCASE_LABELS };
+
+//# sourceMappingURL=board-showcase.js.map

package/dist/components/plugin/board-showcase.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-showcase.js","names":[],"sources":["../../../src/components/plugin/board-showcase.tsx"],"mappings":";;;;;;;;AAiCA,IAAa,IAA+C;CAC1D,GAAG;CACH,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,YAAY;AACd,GAoBM,IACJ;AAIF,SAAgB,EAAc,EAC5B,aACA,iBACA,UAAO,MACP,cACA,sBAAmB,SACnB,sBACA,WACA,gBACqB;CACrB,IAAM,IAAI;EAAE,GAAG;EAAyB,GAAG;CAAO,GAC5C,CAAC,GAAuB,KAA4B,EAA4B,CAAgB,GAChG,IAAkB,KAAa;CAErC,SAAS,EAAgB,GAAyB;EAEhD,AADI,MAAc,KAAA,KAAW,EAAyB,CAAI,GAC1D,IAAoB,CAAI;CAC1B;CAEA,IAAI,EAAS,WAAW,GAAG,OAAO;CAElC,IAAM,IAAY,EAAc,GAAU,CAAC;CAE3C,OACE,kBAAC,OAAD;EAAK,aAAU;EAAiB,WAAW,EAAG,oCAAoC,CAAS;EAA3F,UAAA,CACE,kBAAC,GAAD;GAAM,cAAc;GAAG,WAAU;GAAjC,UAAA,CACG,EAAS,SAAS,KACjB,kBAAC,GAAD;IAAU,cAAY,EAAE;IAAY,WAAU;IAC3C,UAAA,EAAU,KAAK,GAAO,MACrB,kBAAC,GAAD;KAAyB,OAAO;KAAO,WAAW;KAC/C,UAAA;IACU,GAFK,CAEL,CACd;GACO,CAAA,GAGX,EAAS,KAAK,GAAS,MACtB,kBAAC,GAAD;IAEE,OAAO;IACP,WAAU;IAEV,UAAA,kBAAC,GAAD;KACE,SAAS,EAAe,CAAO;KACzB;KACN,WAAW;KACX,YAAY,EAAQ,eAAe;KACnC,WAAW,EAAQ,cAAc;KACjC,WAAW,EAAQ,cAAc;KACnB;IACf,CAAA;GACU,GAbN,EAAU,EAaJ,CACd,CACG;EAEN,CAAA,GAAA,kBAAC,OAAD;GAAK,MAAK;GAAQ,cAAY,EAAE;GAAY,WAAU;GAClD,UAAA,CAAC,SAAS,OAAO,CAAC,CAAW,KAAK,MAAU;IAC5C,IAAM,IAAS,MAAoB;IACnC,OACE,kBAAC,UAAD;KAEE,MAAK;KACL,gBAAc;KACd,eAAe,EAAgB,CAAK;KACpC,WAAW,EACT,4DACA,4EACA,oEACA,IACI,gFACA,2DACN;KAEC,UAAA,MAAU,UAAU,EAAE,aAAa,EAAE;IAChC,GAdD,CAcC;GAEZ,CAAC;EACE,CAAA,CACF;;AAET"}

package/dist/components/plugin/plugin-card.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Directory card for a plugin: name, category, description, author, and a
+ * split-flap teaser strip showing what the plugin actually puts on a board.
+ *
+ * Presentational — routing and localization stay with the consumer. The
+ * primary link is supplied through `renderLink` because the two consumers use
+ * different routers (Docusaurus `Link`, the app's `smart-link`); the card
+ * stretches it over the whole surface so the `action` slot can hold a button
+ * without nesting one interactive element inside another.
+ */
+import type { CSSProperties, ReactNode } from "react";
+export interface PluginCardProps {
+    name: string;
+    description?: ReactNode;
+    /**
+     * Pre-formatted attribution, e.g. `"by FiestaBoard Team"` — the wording is a
+     * localized string, so the consumer builds it.
+     */
+    authorLabel?: ReactNode;
+    /** Manifest category id, e.g. `"weather"`. Omit to hide the badge. */
+    category?: string;
+    /** Localized category name. */
+    categoryLabel?: string;
+    /** Literal board line, at most 15 tiles. Omit to hide the teaser footer. */
+    teaser?: string;
+    boardType?: "black" | "white";
+    /**
+     * Renders the card's primary link. Receives the class that stretches it over
+     * the card, and the card title as children.
+     */
+    renderLink: (props: {
+        className: string;
+        children: ReactNode;
+    }) => ReactNode;
+    /** Trailing action, e.g. an Install button. Rendered above the stretched link. */
+    action?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function PluginCard({ name, description, authorLabel, category, categoryLabel, teaser, boardType, renderLink, action, className, style, }: PluginCardProps): import("react").JSX.Element;

package/dist/components/plugin/plugin-card.js

@@ -0,0 +1,65 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Heading as t } from "../ui/heading.js";
+import { Text as n } from "../ui/text.js";
+import { PluginCategoryBadge as r } from "./plugin-category-badge.js";
+import { ScaledBoardTeaser as i } from "./scaled-board-teaser.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/plugin/plugin-card.tsx
+var s = "after:absolute after:inset-0 after:rounded-xl after:content-[''] outline-none focus-visible:after:ring-[3px] focus-visible:after:ring-ring/50 text-foreground no-underline hover:no-underline hover:text-foreground";
+function c({ name: c, description: l, authorLabel: u, category: d, categoryLabel: f, teaser: p, boardType: m = "black", renderLink: h, action: g, className: _, style: v }) {
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "plugin-card",
+		style: v,
+		className: e("group relative flex h-full flex-col overflow-hidden rounded-xl border bg-card text-card-foreground", "shadow-card transition-[transform,box-shadow] duration-200 hover:-translate-y-1 hover:shadow-lg", "motion-reduce:transition-none motion-reduce:hover:translate-y-0", _),
+		children: [/* @__PURE__ */ o("div", {
+			className: "flex flex-1 flex-col gap-2 p-4",
+			children: [
+				/* @__PURE__ */ o("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [/* @__PURE__ */ a(t, {
+						level: 3,
+						className: "min-w-0 text-base",
+						children: h({
+							className: s,
+							children: c
+						})
+					}), d && /* @__PURE__ */ a(r, {
+						category: d,
+						label: f,
+						className: "ml-auto"
+					})]
+				}),
+				l && /* @__PURE__ */ a(n, {
+					tone: "muted",
+					size: "sm",
+					className: "line-clamp-3 flex-1 leading-relaxed",
+					children: l
+				}),
+				/* @__PURE__ */ o("div", {
+					className: "mt-auto flex items-center justify-between gap-2 pt-1",
+					children: [u ? /* @__PURE__ */ a(n, {
+						as: "span",
+						tone: "muted",
+						size: "xs",
+						className: "truncate",
+						children: u
+					}) : /* @__PURE__ */ a("span", {}), g && /* @__PURE__ */ a("div", {
+						className: "relative z-10 shrink-0",
+						children: g
+					})]
+				})
+			]
+		}), p && /* @__PURE__ */ a("div", {
+			className: "border-t bg-muted/30 px-3 py-4",
+			children: /* @__PURE__ */ a(i, {
+				teaser: p,
+				boardType: m
+			})
+		})]
+	});
+}
+//#endregion
+export { c as PluginCard };
+
+//# sourceMappingURL=plugin-card.js.map

package/dist/components/plugin/plugin-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-card.js","names":[],"sources":["../../../src/components/plugin/plugin-card.tsx"],"mappings":";;;;;;;;AAsBA,IAAM,IACJ;AA8BF,SAAgB,EAAW,EACzB,SACA,gBACA,gBACA,aACA,kBACA,WACA,eAAY,SACZ,eACA,WACA,cACA,YACkB;CAClB,OACE,kBAAC,OAAD;EACE,aAAU;EACH;EACP,WAAW,EACT,sGACA,mGACA,mEACA,CACF;EARF,UAAA,CAUE,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,kBAAC,GAAD;MAAS,OAAO;MAAG,WAAU;MAC1B,UAAA,EAAW;OAAE,WAAW;OAAsB,UAAU;MAAK,CAAC;KACxD,CAAA,GACR,KAAY,kBAAC,GAAD;MAA+B;MAAU,OAAO;MAAe,WAAU;KAAW,CAAA,CAC9F;;IAEJ,KACC,kBAAC,GAAD;KAAM,MAAK;KAAQ,MAAK;KAAK,WAAU;KACpC,UAAA;IACG,CAAA;IAGR,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,IACC,kBAAC,GAAD;MAAM,IAAG;MAAO,MAAK;MAAQ,MAAK;MAAK,WAAU;MAC9C,UAAA;KACG,CAAA,IAEN,kBAAC,QAAD,CAAO,CAAA,GAER,KAAU,kBAAC,OAAD;MAAK,WAAU;MAA0B,UAAA;KAAY,CAAA,CAC7D;;GACF;EAEJ,CAAA,GAAA,KACC,kBAAC,OAAD;GAAK,WAAU;GACb,UAAA,kBAAC,GAAD;IAA2B;IAAmB;GAAY,CAAA;EACvD,CAAA,CAEJ;;AAET"}

package/dist/components/plugin/plugin-category-badge.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Category badge for a plugin. One hue per category, defined once here so a
+ * plugin reads the same colour in the FiestaBoard marketplace and in the docs
+ * plugin directory. Unknown categories fall back to the neutral badge.
+ */
+/** The categories FiestaBoard plugins may declare (manifest `category`). */
+export declare const PLUGIN_CATEGORIES: readonly ["art", "data", "entertainment", "home", "transit", "utility", "weather"];
+export type PluginCategory = (typeof PLUGIN_CATEGORIES)[number];
+export interface PluginCategoryBadgeProps {
+    /** Manifest category id, e.g. `"weather"`. */
+    category: string;
+    /** Localized display name. Defaults to the raw category id. */
+    label?: string;
+    className?: string;
+}
+export declare function PluginCategoryBadge({ category, label, className }: PluginCategoryBadgeProps): import("react").JSX.Element;

package/dist/components/plugin/plugin-category-badge.js

@@ -0,0 +1,37 @@
+import { cn as e } from "../../lib/utils.js";
+import { Badge as t } from "../ui/badge.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/plugin/plugin-category-badge.tsx
+var r = [
+	"art",
+	"data",
+	"entertainment",
+	"home",
+	"transit",
+	"utility",
+	"weather"
+], i = {
+	art: "bg-category-art/15 border-category-art/30 text-category-art-foreground",
+	data: "bg-category-data/15 border-category-data/30 text-category-data-foreground",
+	entertainment: "bg-category-entertainment/15 border-category-entertainment/30 text-category-entertainment-foreground",
+	home: "bg-category-home/15 border-category-home/30 text-category-home-foreground",
+	transit: "bg-category-transit/15 border-category-transit/30 text-category-transit-foreground",
+	utility: "bg-category-utility/15 border-category-utility/30 text-category-utility-foreground",
+	weather: "bg-category-weather/15 border-category-weather/30 text-category-weather-foreground"
+};
+function a(e) {
+	return e in i;
+}
+function o({ category: r, label: o, className: s }) {
+	let c = a(r) ? i[r] : "";
+	return /* @__PURE__ */ n(t, {
+		variant: a(r) ? "outline" : "secondary",
+		"data-category": r,
+		className: e("text-[0.68rem] font-semibold uppercase tracking-wide px-2 py-0.5", c, s),
+		children: o ?? r
+	});
+}
+//#endregion
+export { r as PLUGIN_CATEGORIES, o as PluginCategoryBadge };
+
+//# sourceMappingURL=plugin-category-badge.js.map

package/dist/components/plugin/plugin-category-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin-category-badge.js","names":[],"sources":["../../../src/components/plugin/plugin-category-badge.tsx"],"mappings":";;;;AAUA,IAAa,IAAoB;CAAC;CAAO;CAAQ;CAAiB;CAAQ;CAAW;CAAW;AAAS,GAQnG,IAAmD;CACvD,KAAK;CACL,MAAM;CACN,eAAe;CACf,MAAM;CACN,SAAS;CACT,SAAS;CACT,SAAS;AACX;AAEA,SAAS,EAAgB,GAA8C;CACrE,OAAO,KAAY;AACrB;AAUA,SAAgB,EAAoB,EAAE,aAAU,UAAO,gBAAuC;CAC5F,IAAM,IAAO,EAAgB,CAAQ,IAAI,EAAiB,KAAY;CACtE,OACE,kBAAC,GAAD;EACE,SAAS,EAAgB,CAAQ,IAAI,YAAY;EACjD,iBAAe;EACf,WAAW,EAAG,oEAAoE,GAAM,CAAS;EAEhG,UAAA,KAAS;CACL,CAAA;AAEX"}

package/dist/components/plugin/scaled-board-teaser.d.ts

@@ -0,0 +1,11 @@
+export interface ScaledBoardTeaserProps {
+    /** Literal board line, e.g. `"{66}AQI 45 CLEAR"`. */
+    teaser: string;
+    boardType?: "black" | "white";
+    /** Strip width in tiles. */
+    tiles?: number;
+    minScale?: number;
+    maxScale?: number;
+    className?: string;
+}
+export declare function ScaledBoardTeaser({ teaser, boardType, tiles, minScale, maxScale, className, }: ScaledBoardTeaserProps): import("react").JSX.Element;

package/dist/components/plugin/scaled-board-teaser.js

@@ -0,0 +1,40 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { BoardTeaser as t } from "../board/board-teaser.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/plugin/scaled-board-teaser.tsx
+var o = 18;
+function s({ teaser: s, boardType: c = "black", tiles: l = 15, minScale: u = .85, maxScale: d = 1.5, className: f }) {
+	let p = r(null), [m, h] = i(1);
+	return n(() => {
+		let e = p.current, t = e?.firstElementChild;
+		if (!e || !t) return;
+		let n = () => {
+			t.offsetWidth > 0 && h(Math.min(d, Math.max(u, e.clientWidth / t.offsetWidth)));
+		};
+		n();
+		let r = new ResizeObserver(n);
+		return r.observe(e), () => r.disconnect();
+	}, [u, d]), /* @__PURE__ */ a("div", {
+		ref: p,
+		"data-slot": "scaled-board-teaser",
+		className: e("flex justify-center overflow-hidden", f),
+		style: { height: `${o * m}px` },
+		children: /* @__PURE__ */ a("div", {
+			style: {
+				transform: `scale(${m})`,
+				transformOrigin: "top center"
+			},
+			children: /* @__PURE__ */ a(t, {
+				teaser: s,
+				tiles: l,
+				boardType: c
+			})
+		})
+	});
+}
+//#endregion
+export { s as ScaledBoardTeaser };
+
+//# sourceMappingURL=scaled-board-teaser.js.map

package/dist/components/plugin/scaled-board-teaser.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scaled-board-teaser.js","names":[],"sources":["../../../src/components/plugin/scaled-board-teaser.tsx"],"mappings":";;;;;;AAgBA,IAAM,IAAe;AAarB,SAAgB,EAAkB,EAChC,WACA,eAAY,SACZ,WAAQ,IACR,cAAW,KACX,cAAW,KACX,gBACyB;CACzB,IAAM,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAO,KAAY,EAAS,CAAC;CAkBpC,OAhBA,QAAgB;EACd,IAAM,IAAY,EAAa,SACzB,IAAQ,GAAW;EACzB,IAAI,CAAC,KAAa,CAAC,GAAO;EAC1B,IAAM,UAAgB;GAEpB,AAAI,EAAM,cAAc,KACtB,EAAS,KAAK,IAAI,GAAU,KAAK,IAAI,GAAU,EAAU,cAAc,EAAM,WAAW,CAAC,CAAC;EAE9F;EACA,EAAQ;EACR,IAAM,IAAW,IAAI,eAAe,CAAO;EAE3C,OADA,EAAS,QAAQ,CAAS,SACb,EAAS,WAAW;CACnC,GAAG,CAAC,GAAU,CAAQ,CAAC,GAGrB,kBAAC,OAAD;EACE,KAAK;EACL,aAAU;EACV,WAAW,EAAG,uCAAuC,CAAS;EAC9D,OAAO,EAAE,QAAQ,GAAG,IAAe,EAAM,IAAI;EAE7C,UAAA,kBAAC,OAAD;GAAK,OAAO;IAAE,WAAW,SAAS,EAAM;IAAI,iBAAiB;GAAa;GACxE,UAAA,kBAAC,GAAD;IAAqB;IAAe;IAAkB;GAAY,CAAA;EAC/D,CAAA;CACF,CAAA;AAET"}

package/dist/index.d.ts

@@ -64,3 +64,8 @@ export * from "./components/board/static-board-display";
 export * from "./lib/board-characters";
 export * from "./lib/board-colors";
 export * from "./lib/board-dimensions";
+export * from "./lib/board-previews";
+export * from "./components/plugin/board-showcase";
+export * from "./components/plugin/plugin-card";
+export * from "./components/plugin/plugin-category-badge";
+export * from "./components/plugin/scaled-board-teaser";

package/dist/index.js

@@ -56,4 +56,9 @@ import { BoardDisplay as un } from "./components/board/board-display.js";
 import { BoardTeaser as dn } from "./components/board/board-teaser.js";
 import { ScaledBoardDisplay as fn } from "./components/board/scaled-board-display.js";
 import { StaticBoardDisplay as pn } from "./components/board/static-board-display.js";
-export { Bt as ALL_COLOR_CODES, Vt as AVAILABLE_COLORS, t as Accordion, n as AccordionContent, r as AccordionItem, i as AccordionTrigger, a as Alert, o as AlertDescription, u as AlertDialog, d as AlertDialogAction, f as AlertDialogCancel, p as AlertDialogContent, m as AlertDialogDescription, h as AlertDialogFooter, g as AlertDialogHeader, _ as AlertDialogOverlay, v as AlertDialogPortal, y as AlertDialogTitle, b as AlertDialogTrigger, s as AlertTitle, x as Aurora, Jt as BOARD_CHARS, Ht as BOARD_COLORS, S as Badge, un as BoardDisplay, pt as BoardIcon, mt as BoardSelector, dn as BoardTeaser, w as Box, c as Button, Ut as COLOR_CODE_MAP, Wt as COLOR_DISPLAY, T as Card, E as CardAction, D as CardContent, O as CardDescription, k as CardFooter, A as CardHeader, j as CardTitle, M as Checkbox, N as Code, P as Collapsible, F as CollapsibleContent, I as CollapsibleTrigger, nn as DEVICE_DIMENSIONS, be as DecryptedText, L as Dialog, R as DialogClose, z as DialogContent, B as DialogDescription, V as DialogFooter, H as DialogHeader, U as DialogOverlay, W as DialogPortal, G as DialogTitle, K as DialogTrigger, q as DropdownMenu, J as DropdownMenuCheckboxItem, Y as DropdownMenuContent, X as DropdownMenuGroup, Z as DropdownMenuItem, Q as DropdownMenuLabel, $ as DropdownMenuPortal, ee as DropdownMenuRadioGroup, te as DropdownMenuRadioItem, ne as DropdownMenuSeparator, re as DropdownMenuShortcut, ie as DropdownMenuSub, ae as DropdownMenuSubContent, oe as DropdownMenuSubTrigger, se as DropdownMenuTrigger, Yt as EXTRA_CHARS, ce as EmptyState, ht as FIESTA_ICON_DATA_URI, gt as FIESTA_ICON_PALETTE, _t as FIESTA_ICON_SVG, xe as FadeContent, vt as FiestaIcon, yt as FiestaLogo, le as Flex, de as Grid, jt as HIDE_FESTIVE_COOKIE, pe as Heading, he as Input, ge as Label, bt as LanguageSelector, _e as List, ve as ListItem, rn as MAX_NOTES_PER_AXIS, xt as MainContent, an as NOTE_COLS, on as NOTE_ROWS, Mt as PRIDE_SEASON, St as PageHeader, Ct as PageIconGradientDefs, wt as PageLayout, Tt as PageToolbar, Nt as SEASONS, fn as ScaledBoardDisplay, Se as ScrollArea, Ce as ScrollBar, we as Select, Te as SelectContent, Ee as SelectGroup, De as SelectItem, Oe as SelectLabel, ke as SelectScrollDownButton, Ae as SelectScrollUpButton, je as SelectSeparator, Me as SelectTrigger, Ne as SelectValue, Pe as Sheet, Fe as SheetClose, Ie as SheetContent, Le as SheetDescription, Re as SheetFooter, ze as SheetHeader, Be as SheetOverlay, Ve as SheetPortal, He as SheetTitle, Ue as SheetTrigger, Ot as Sidebar, Et as SidebarAurora, Dt as SidebarAuroraHorizontal, We as Skeleton, kt as SkipToContent, Ge as Slider, Ke as Stack, pn as StaticBoardDisplay, Je as Switch, Ye as Table, Xe as TableBody, Ze as TableCell, Qe as TableHead, $e as TableHeader, et as TableRow, tt as Tabs, nt as TabsContent, rt as TabsList, it as TabsTrigger, at as Text, st as TextLink, ct as Textarea, At as ThemeToggle, lt as Tooltip, ut as TooltipContent, dt as TooltipProvider, ft as TooltipTrigger, C as badgeVariants, l as buttonVariants, e as cn, Pt as fireSeasonBurst, ue as flexVariants, Ft as getActiveSeason, Gt as getBoardColor, Xt as getCharFromToken, Zt as getCharIndex, fe as gridVariants, me as headingVariants, Qt as isColorTile, sn as isNoteArray, Kt as isValidBoardColor, ye as listVariants, $t as messageToGrid, cn as noteArrayDimensions, en as parseLine, It as readCookieString, qt as resolveColorCode, ln as resolveDimensions, Lt as shouldShowPride, qe as stackVariants, ot as textVariants, tn as tokensEqual, Rt as useActiveSeason, zt as usePrideActive };
+import { DEFAULT_SHAPE_LABELS as mn, previewLabel as hn, previewLabels as gn, previewMessage as _n } from "./lib/board-previews.js";
+import { BoardShowcase as vn, DEFAULT_SHOWCASE_LABELS as yn } from "./components/plugin/board-showcase.js";
+import { PLUGIN_CATEGORIES as bn, PluginCategoryBadge as xn } from "./components/plugin/plugin-category-badge.js";
+import { ScaledBoardTeaser as Sn } from "./components/plugin/scaled-board-teaser.js";
+import { PluginCard as Cn } from "./components/plugin/plugin-card.js";
+export { Bt as ALL_COLOR_CODES, Vt as AVAILABLE_COLORS, t as Accordion, n as AccordionContent, r as AccordionItem, i as AccordionTrigger, a as Alert, o as AlertDescription, u as AlertDialog, d as AlertDialogAction, f as AlertDialogCancel, p as AlertDialogContent, m as AlertDialogDescription, h as AlertDialogFooter, g as AlertDialogHeader, _ as AlertDialogOverlay, v as AlertDialogPortal, y as AlertDialogTitle, b as AlertDialogTrigger, s as AlertTitle, x as Aurora, Jt as BOARD_CHARS, Ht as BOARD_COLORS, S as Badge, un as BoardDisplay, pt as BoardIcon, mt as BoardSelector, vn as BoardShowcase, dn as BoardTeaser, w as Box, c as Button, Ut as COLOR_CODE_MAP, Wt as COLOR_DISPLAY, T as Card, E as CardAction, D as CardContent, O as CardDescription, k as CardFooter, A as CardHeader, j as CardTitle, M as Checkbox, N as Code, P as Collapsible, F as CollapsibleContent, I as CollapsibleTrigger, mn as DEFAULT_SHAPE_LABELS, yn as DEFAULT_SHOWCASE_LABELS, nn as DEVICE_DIMENSIONS, be as DecryptedText, L as Dialog, R as DialogClose, z as DialogContent, B as DialogDescription, V as DialogFooter, H as DialogHeader, U as DialogOverlay, W as DialogPortal, G as DialogTitle, K as DialogTrigger, q as DropdownMenu, J as DropdownMenuCheckboxItem, Y as DropdownMenuContent, X as DropdownMenuGroup, Z as DropdownMenuItem, Q as DropdownMenuLabel, $ as DropdownMenuPortal, ee as DropdownMenuRadioGroup, te as DropdownMenuRadioItem, ne as DropdownMenuSeparator, re as DropdownMenuShortcut, ie as DropdownMenuSub, ae as DropdownMenuSubContent, oe as DropdownMenuSubTrigger, se as DropdownMenuTrigger, Yt as EXTRA_CHARS, ce as EmptyState, ht as FIESTA_ICON_DATA_URI, gt as FIESTA_ICON_PALETTE, _t as FIESTA_ICON_SVG, xe as FadeContent, vt as FiestaIcon, yt as FiestaLogo, le as Flex, de as Grid, jt as HIDE_FESTIVE_COOKIE, pe as Heading, he as Input, ge as Label, bt as LanguageSelector, _e as List, ve as ListItem, rn as MAX_NOTES_PER_AXIS, xt as MainContent, an as NOTE_COLS, on as NOTE_ROWS, bn as PLUGIN_CATEGORIES, Mt as PRIDE_SEASON, St as PageHeader, Ct as PageIconGradientDefs, wt as PageLayout, Tt as PageToolbar, Cn as PluginCard, xn as PluginCategoryBadge, Nt as SEASONS, fn as ScaledBoardDisplay, Sn as ScaledBoardTeaser, Se as ScrollArea, Ce as ScrollBar, we as Select, Te as SelectContent, Ee as SelectGroup, De as SelectItem, Oe as SelectLabel, ke as SelectScrollDownButton, Ae as SelectScrollUpButton, je as SelectSeparator, Me as SelectTrigger, Ne as SelectValue, Pe as Sheet, Fe as SheetClose, Ie as SheetContent, Le as SheetDescription, Re as SheetFooter, ze as SheetHeader, Be as SheetOverlay, Ve as SheetPortal, He as SheetTitle, Ue as SheetTrigger, Ot as Sidebar, Et as SidebarAurora, Dt as SidebarAuroraHorizontal, We as Skeleton, kt as SkipToContent, Ge as Slider, Ke as Stack, pn as StaticBoardDisplay, Je as Switch, Ye as Table, Xe as TableBody, Ze as TableCell, Qe as TableHead, $e as TableHeader, et as TableRow, tt as Tabs, nt as TabsContent, rt as TabsList, it as TabsTrigger, at as Text, st as TextLink, ct as Textarea, At as ThemeToggle, lt as Tooltip, ut as TooltipContent, dt as TooltipProvider, ft as TooltipTrigger, C as badgeVariants, l as buttonVariants, e as cn, Pt as fireSeasonBurst, ue as flexVariants, Ft as getActiveSeason, Gt as getBoardColor, Xt as getCharFromToken, Zt as getCharIndex, fe as gridVariants, me as headingVariants, Qt as isColorTile, sn as isNoteArray, Kt as isValidBoardColor, ye as listVariants, $t as messageToGrid, cn as noteArrayDimensions, en as parseLine, hn as previewLabel, gn as previewLabels, _n as previewMessage, It as readCookieString, qt as resolveColorCode, ln as resolveDimensions, Lt as shouldShowPride, qe as stackVariants, ot as textVariants, tn as tokensEqual, Rt as useActiveSeason, zt as usePrideActive };

package/dist/lib/board-previews.d.ts

@@ -0,0 +1,38 @@
+/**
+ * Board previews — the `teaser` / `previews` plugin-manifest contract, shared
+ * by every surface that advertises a plugin (the FiestaBoard marketplace, the
+ * docs plugin directory).
+ *
+ * A preview holds *literal* board rows, never `{{variables}}`: widths count
+ * tiles, so a color marker like `{66}` is one tile and an end tag `{/green}` is
+ * none. See FiestaBoard's docs/development/PLUGIN_DEVELOPMENT.md.
+ */
+import type { DeviceType } from "./board-dimensions";
+/** One literal board, at one shape. */
+export interface BoardPreviewEntry {
+    /** Human tab label; when absent, derive one with `previewLabel()`. */
+    label?: string;
+    device_type?: DeviceType;
+    /** Notes wide (note_array only). */
+    notes_wide?: number;
+    /** Notes tall (note_array only). */
+    notes_tall?: number;
+    rows: string[];
+}
+/** Localized shape names. `noteArray` may contain `{w}` and `{h}` placeholders. */
+export interface PreviewShapeLabels {
+    flagship: string;
+    note: string;
+    noteArray: string;
+}
+export declare const DEFAULT_SHAPE_LABELS: PreviewShapeLabels;
+/** Tab label for a preview: its declared label, or one derived from the shape. */
+export declare function previewLabel(preview: BoardPreviewEntry, labels?: PreviewShapeLabels): string;
+/**
+ * Tab labels for a whole preview list, numbering repeats so every tab has a
+ * distinct accessible name — authors may declare several previews of the same
+ * shape ("Flagship" twice).
+ */
+export declare function previewLabels(previews: BoardPreviewEntry[], labels?: PreviewShapeLabels): string[];
+/** The newline-joined message `StaticBoardDisplay` renders. */
+export declare function previewMessage(preview: BoardPreviewEntry): string;

package/dist/lib/board-previews.js

@@ -0,0 +1,23 @@
+//#region src/lib/board-previews.ts
+var e = {
+	flagship: "Flagship",
+	note: "Note",
+	noteArray: "Note Array {w}×{h}"
+};
+function t(t, n = e) {
+	return t.label ? t.label : t.device_type === "note_array" ? n.noteArray.replace("{w}", String(t.notes_wide ?? 1)).replace("{h}", String(t.notes_tall ?? 1)) : t.device_type === "note" ? n.note : n.flagship;
+}
+function n(e, n) {
+	let r = /* @__PURE__ */ new Map();
+	return e.map((e) => {
+		let i = t(e, n), a = r.get(i) ?? 0;
+		return r.set(i, a + 1), a > 0 ? `${i} ${a + 1}` : i;
+	});
+}
+function r(e) {
+	return e.rows.join("\n");
+}
+//#endregion
+export { e as DEFAULT_SHAPE_LABELS, t as previewLabel, n as previewLabels, r as previewMessage };
+
+//# sourceMappingURL=board-previews.js.map

package/dist/lib/board-previews.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"board-previews.js","names":[],"sources":["../../src/lib/board-previews.ts"],"mappings":";AA+BA,IAAa,IAA2C;CACtD,UAAU;CACV,MAAM;CACN,WAAW;AACb;AAGA,SAAgB,EAAa,GAA4B,IAA6B,GAA8B;CAOlH,OANI,EAAQ,QAAc,EAAQ,QAC9B,EAAQ,gBAAgB,eACnB,EAAO,UACX,QAAQ,OAAO,OAAO,EAAQ,cAAc,CAAC,CAAC,CAAC,CAC/C,QAAQ,OAAO,OAAO,EAAQ,cAAc,CAAC,CAAC,IAE5C,EAAQ,gBAAgB,SAAS,EAAO,OAAO,EAAO;AAC/D;AAOA,SAAgB,EAAc,GAA+B,GAAuC;CAClG,IAAM,oBAAO,IAAI,IAAoB;CACrC,OAAO,EAAS,KAAK,MAAY;EAC/B,IAAM,IAAO,EAAa,GAAS,CAAM,GACnC,IAAS,EAAK,IAAI,CAAI,KAAK;EAEjC,OADA,EAAK,IAAI,GAAM,IAAS,CAAC,GAClB,IAAS,IAAI,GAAG,EAAK,GAAG,IAAS,MAAM;CAChD,CAAC;AACH;AAGA,SAAgB,EAAe,GAAoC;CACjE,OAAO,EAAQ,KAAK,KAAK,IAAI;AAC/B"}

package/dist/theme.css

@@ -36,15 +36,16 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar: var(--sidebar);
-  --color-chart-5: var(--chart-5);
-  --color-chart-4: var(--chart-4);
-  --color-chart-3: var(--chart-3);
-  --color-chart-2: var(--chart-2);
-  --color-chart-1: var(--chart-1);
+  /* NOTE (#173): --chart-1..5 and --sidebar-primary(-foreground) used to be
+     exported here. They were stock shadcn leftovers, consumed by nothing in
+     this package, and carried 137-157 degree hue shifts between light and
+     dark — so a chart adopting them would silently re-encode its series on a
+     theme toggle. Deleted rather than redesigned: a design system should not
+     ship a palette it has not designed. If a data-viz component ever lands,
+     add a hue-STABLE five-series ramp (lightness varies per theme, hue does
+     not) plus a story that proves both themes. */
   --color-ring: var(--ring);
   --color-input: var(--input);
   --color-border: var(--border);
@@ -86,6 +87,23 @@
   --color-tag-formula: var(--tag-formula);
   --color-tag-formula-foreground: var(--tag-formula-foreground);
 
+  /* Plugin category accents (PluginCategoryBadge) — one hue per category so a
+     plugin reads the same on the marketplace and in the docs directory. */
+  --color-category-weather: var(--category-weather);
+  --color-category-weather-foreground: var(--category-weather-foreground);
+  --color-category-transit: var(--category-transit);
+  --color-category-transit-foreground: var(--category-transit-foreground);
+  --color-category-data: var(--category-data);
+  --color-category-data-foreground: var(--category-data-foreground);
+  --color-category-entertainment: var(--category-entertainment);
+  --color-category-entertainment-foreground: var(--category-entertainment-foreground);
+  --color-category-art: var(--category-art);
+  --color-category-art-foreground: var(--category-art-foreground);
+  --color-category-utility: var(--category-utility);
+  --color-category-utility-foreground: var(--category-utility-foreground);
+  --color-category-home: var(--category-home);
+  --color-category-home-foreground: var(--category-home-foreground);
+
   /* Overlay */
   --color-overlay: var(--overlay);
 
@@ -147,6 +165,12 @@
      owned by the stylesheet, not a build-time JS wrapper. */
   --font-geist-sans: "Geist Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   --font-geist-mono: "Geist Mono Variable", ui-monospace, SFMono-Regular, "SF Mono", Monaco, Menlo, monospace;
+  /* Tell the UA which form-control palette to paint (#160). Without this,
+     every browser-drawn widget — accent-color'd checkboxes, file/date/number
+     chrome, scrollbars, autofill — renders in LIGHT chrome, which on the dark
+     default theme makes an unchecked Checkbox read as a filled/checked box.
+     Declared next to the palette it belongs to, once per theme. */
+  color-scheme: light;
   --radius: 0.625rem;
   --background: oklch(0.985 0 0);
   --foreground: oklch(0.145 0 0);
@@ -154,6 +178,17 @@
   --card-foreground: oklch(0.145 0 0);
   --popover: oklch(1 0 0);
   --popover-foreground: oklch(0.145 0 0);
+  /* ============================================================
+   * INVARIANT — "one token means 'this control is on'" (#156/#159).
+   * --primary is the single pigment that says a control is the primary
+   * action / is selected / is focused. --ring and --sidebar-ring are
+   * deliberately set to the SAME value in both themes so a focused
+   * control and an engaged control read as one idea. They are the only
+   * intentional value aliases in this file; do not "de-duplicate" them
+   * into separate hues, and do not let --primary drift to a neutral —
+   * that is what made the dark theme brandless (see .dark below).
+   * --primary carries the FiestaBoard warm orange in BOTH themes.
+   * ============================================================ */
   --primary: oklch(0.52 0.16 60);
   --primary-foreground: oklch(0.985 0 0);
   --secondary: oklch(0.96 0 0);
@@ -165,26 +200,48 @@
   --accent-foreground: oklch(0.205 0 0);
   --destructive: oklch(0.43 0.245 27.325);
   --destructive-foreground: oklch(0.985 0 0);
+  /* ============================================================
+   * --border vs --input: TWO DIFFERENT INTENTS, NOT ONE VALUE (#161).
+   *
+   * --border is DECORATION: table rules, card edges, dividers, list
+   *   separators. It separates content that is already legible on its
+   *   own, so WCAG 2.2 SC 1.4.11 does not apply and it is deliberately
+   *   allowed to stay whisper-subtle (~1.3:1). Raising it to 3:1 would
+   *   turn every card and table into a wireframe.
+   *
+   * --input is the CONTROL BOUNDARY: Input, Textarea, Select trigger and
+   *   Checkbox are `bg-transparent`, so this 1px edge is the ONLY thing
+   *   that says "a control lives here". That is exactly the "visual
+   *   information required to identify a user interface component" of
+   *   SC 1.4.11, so it MUST clear 3:1 against BOTH --background and
+   *   --card (a field can sit on either surface).
+   *
+   * Derived from --foreground as an alpha fraction so the boundary
+   * tracks the text color in every theme and season instead of being a
+   * hand-tuned grey per palette. Percentages are the smallest that clear
+   * 3:1 on both surfaces with headroom (light 48% -> 3.45/3.48,
+   * dark 38% -> 3.37/3.44); they differ because contrast ramps faster
+   * for light-on-dark than dark-on-light.
+   *
+   * DO NOT collapse these two tokens into one value in either direction.
+   * ============================================================ */
   --border: oklch(0.905 0 0);
-  --input: oklch(0.885 0 0);
-  --ring: oklch(0.52 0.16 60);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.65 0.189 84.429);
-  --chart-5: oklch(0.65 0.188 70.08);
+  --input: color-mix(in oklch, var(--foreground) 48%, transparent);
+  --ring: oklch(0.52 0.16 60); /* = --primary, see the invariant above */
   --sidebar: oklch(0.975 0 0);
   --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.52 0.16 60);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.92 0 0);
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.915 0 0);
-  --sidebar-ring: oklch(0.52 0.16 60);
+  --sidebar-ring: oklch(0.52 0.16 60); /* = --primary, see the invariant above */
   --info: oklch(0.45 0.15 250);
   --info-foreground: oklch(0.985 0 0);
   --success: oklch(0.4 0.16 150);
   --success-foreground: oklch(0.985 0 0);
+  /* --warning must never collide with --brand (#157). In light they share a
+     near hue (70 vs 75) but are pulled apart by lightness — 1.61:1 between
+     them — so caution still reads as caution next to a brand accent. The
+     dark pair is separated on hue instead; see .dark. */
   --warning: oklch(0.45 0.16 70);
   --warning-foreground: oklch(0.985 0 0);
   --tag-variable: oklch(0.45 0.2 280);
@@ -193,6 +250,20 @@
   --tag-success-foreground: oklch(0.35 0.1 160);
   --tag-formula: oklch(0.45 0.15 80);
   --tag-formula-foreground: oklch(0.35 0.1 80);
+  --category-weather: oklch(0.55 0.14 245);
+  --category-weather-foreground: oklch(0.42 0.11 245);
+  --category-transit: oklch(0.55 0.15 145);
+  --category-transit-foreground: oklch(0.42 0.12 145);
+  --category-data: oklch(0.55 0.16 305);
+  --category-data-foreground: oklch(0.42 0.13 305);
+  --category-entertainment: oklch(0.55 0.14 75);
+  --category-entertainment-foreground: oklch(0.42 0.11 75);
+  --category-art: oklch(0.55 0.16 30);
+  --category-art-foreground: oklch(0.42 0.13 30);
+  --category-utility: oklch(0.55 0.03 255);
+  --category-utility-foreground: oklch(0.42 0.03 255);
+  --category-home: oklch(0.55 0.12 180);
+  --category-home-foreground: oklch(0.42 0.1 180);
   --overlay: oklch(0 0 0 / 80%);
   /* Brand accent - darkened for WCAG 2.2 AA (≥4.5:1 on light bg) */
   --brand: oklch(0.56 0.15 75);
@@ -348,14 +419,25 @@
 }
 
 .dark {
+  color-scheme: dark; /* see the note in :root (#160) */
   --background: oklch(0.13 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.16 0 0);
   --card-foreground: oklch(0.985 0 0);
   --popover: oklch(0.16 0 0);
   --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
-  --primary-foreground: oklch(0.205 0 0);
+  /* Brand-bearing primary (#156). This used to be oklch(0.922 0 0) — stock
+     shadcn's achromatic dark primary, never re-designed when the FiestaBoard
+     palette landed. Dark is the DEFAULT theme, so every default Button,
+     Badge, Switch track, Slider indicator and focus ring shipped with zero
+     brand hue. Same warm orange as :root, lifted in lightness for a dark
+     surface (light 0.52 -> dark 0.72) and held on the same hue family.
+     Upholds the "one token means 'this control is on'" invariant declared in
+     :root: --ring and --sidebar-ring below repeat this exact value. */
+  --primary: oklch(0.72 0.15 62);
+  /* Near-black on-accent foreground, matching every other dark accent
+     foreground in this block (destructive/info/success/warning all 0.15). */
+  --primary-foreground: oklch(0.15 0 0);
   --secondary: oklch(0.215 0 0);
   --secondary-foreground: oklch(0.985 0 0);
   --muted: oklch(0.2 0 0);
@@ -364,27 +446,30 @@
   --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.8 0.191 22.216);
   --destructive-foreground: oklch(0.15 0 0);
+  /* --border stays decorative-subtle; --input is the 3:1 control boundary.
+     Full rationale in the :root block — do not merge the two. */
   --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 14%);
-  --ring: oklch(0.55 0 0);
-  --chart-1: oklch(0.55 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
+  --input: color-mix(in oklch, var(--foreground) 38%, transparent);
+  --ring: oklch(0.72 0.15 62); /* = --primary, see the invariant in :root */
   --sidebar: oklch(0.145 0 0);
   --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
   --sidebar-accent: oklch(0.28 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 8%);
-  --sidebar-ring: oklch(0.55 0 0);
+  --sidebar-ring: oklch(0.72 0.15 62); /* = --primary, see the invariant in :root */
   --info: oklch(0.75 0.18 250);
   --info-foreground: oklch(0.15 0 0);
   --success: oklch(0.68 0.18 145);
   --success-foreground: oklch(0.15 0 0);
-  --warning: oklch(0.78 0.14 75);
+  /* Amber caution, deliberately OFF the brand hue (#157). This was
+     oklch(0.78 0.14 75) — byte-identical to --brand below, so "this is
+     FiestaBoard" and "be careful" rendered as the same pigment and neither
+     could be learned. Moved +20deg toward yellow and +0.08 lighter, which
+     puts 1.34:1 of luminance and a clear hue break between the two. The
+     22deg drift from the light --warning (hue 70) is intentional and small:
+     light must separate warning from brand on LIGHTNESS (it has to stay dark
+     enough to be readable text on white), dark separates them on HUE. */
+  --warning: oklch(0.86 0.16 95);
   --warning-foreground: oklch(0.15 0 0);
   --tag-variable: oklch(0.65 0.15 280);
   --tag-variable-foreground: oklch(0.85 0.08 280);
@@ -392,12 +477,36 @@
   --tag-success-foreground: oklch(0.85 0.08 160);
   --tag-formula: oklch(0.65 0.15 80);
   --tag-formula-foreground: oklch(0.85 0.08 80);
+  --category-weather: oklch(0.68 0.13 245);
+  --category-weather-foreground: oklch(0.85 0.08 245);
+  --category-transit: oklch(0.68 0.14 145);
+  --category-transit-foreground: oklch(0.85 0.09 145);
+  --category-data: oklch(0.68 0.14 305);
+  --category-data-foreground: oklch(0.85 0.09 305);
+  --category-entertainment: oklch(0.68 0.13 75);
+  --category-entertainment-foreground: oklch(0.85 0.08 75);
+  --category-art: oklch(0.68 0.14 30);
+  --category-art-foreground: oklch(0.85 0.09 30);
+  --category-utility: oklch(0.68 0.03 255);
+  --category-utility-foreground: oklch(0.85 0.02 255);
+  --category-home: oklch(0.68 0.11 180);
+  --category-home-foreground: oklch(0.85 0.07 180);
   --overlay: oklch(0 0 0 / 80%);
   --brand: oklch(0.78 0.14 75);
   --brand-emphasis: oklch(0.55 0.16 60);
   --brand-foreground: oklch(1 0 0);
-  /* Navigation active state — indigo palette (lighter for dark mode) */
-  --nav-active: oklch(0.59 0.19 265); /* indigo-500 */
+  /* Navigation active state — indigo palette.
+     NOT "lighter for dark mode" (#162): --nav-active is the solid FALLBACK
+     fill for the active nav pill, used whenever the frosted-glass treatment
+     can't run — no backdrop-filter support, prefers-reduced-transparency, and
+     prefers-contrast: more. At the old indigo-500 (0.59) white nav labels sat
+     at 4.26:1, i.e. BELOW AA for the 14px/600 labels Sidebar renders, which
+     made the explicit high-contrast path less accessible than the default
+     one. Darkened to clear AAA (7.47:1) instead. Kept as light as AAA allows
+     rather than the 0.42 the audit suggested (8.91:1), because darkening the
+     pill trades text contrast against the pill's own separation from the
+     surface behind it — see the fallback rules near .nav-active. */
+  --nav-active: oklch(0.46 0.19 265);
   --nav-active-foreground: oklch(1 0 0); /* white */
   --nav-active-hover: oklch(0.59 0.19 265 / 20%); /* indigo tint hover */
   /* Fiesta gradient palette — lighter for visibility on dark card backgrounds */
@@ -1027,6 +1136,15 @@ html[data-board-switch="backward"]::view-transition-new(board-page) {
   background: var(--nav-active);
   color: var(--nav-active-foreground);
 }
+/* The dark --nav-active fill is deliberately dark enough for AAA white labels
+   (#162), which necessarily brings it closer in luminance to the near-black
+   surfaces it sits on. A 1px light inset keeps the pill's OWN boundary
+   identifiable (SC 1.4.11 — "state" of a component) without reintroducing the
+   transparency these fallbacks exist to avoid. Light mode needs no help: its
+   pill already sits 7.6:1 off --sidebar. */
+.dark .nav-active {
+  box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.22);
+}
 .nav-active-hover:hover {
   background: var(--nav-active-hover);
 }
@@ -1071,7 +1189,10 @@ html[data-board-switch="backward"]::view-transition-new(board-page) {
   .sidebar-gradient .nav-active,
   .sidebar-gradient-horizontal .nav-active {
     background: var(--nav-active);
-    box-shadow: none;
+    /* Keep the hairline (was `none`): the solid fill is only ~1.2-1.7:1 off
+       the gradient stops behind it in either theme, so the ring is what makes
+       the pill an identifiable shape (#162). */
+    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.22);
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
   }
@@ -1087,7 +1208,8 @@ html[data-board-switch="backward"]::view-transition-new(board-page) {
   .sidebar-gradient .nav-active,
   .sidebar-gradient-horizontal .nav-active {
     background: var(--nav-active);
-    box-shadow: none;
+    /* Same reasoning as the @supports fallback above (#162). */
+    box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.22);
     backdrop-filter: none;
     -webkit-backdrop-filter: none;
   }
@@ -1099,6 +1221,10 @@ html[data-board-switch="backward"]::view-transition-new(board-page) {
   }
 }
 
+/* This branch is where the old fallback was most wrong: users who explicitly
+   asked for MORE contrast got 4.26:1 in dark, below the 4.5:1 the default
+   frosted path achieved. --nav-active now targets AAA (7.47:1) so this path
+   is deliberately the most legible one, not the least (#162). */
 @media (prefers-contrast: more) {
   .sidebar-gradient .nav-active,
   .sidebar-gradient-horizontal .nav-active {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiestaboard/ui",
-  "version": "1.6.5",
+  "version": "2.0.0",
   "description": "FiestaUI — the FiestaBoard design system. React components on Base UI with Tailwind v4 design tokens.",
   "license": "MIT",
   "repository": {