@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/carousel.mjs

@@ -0,0 +1,141 @@
+import { Button } from "./button.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import useEmblaCarousel from "embla-carousel-react";
+//#region src/carousel.tsx
+const CarouselContext = React.createContext(null);
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+	if (!context) throw new Error("useCarousel must be used within a <Carousel />");
+	return context;
+}
+/** Carousel built on Embla with swipe support, keyboard navigation, and autoplay. */
+const Carousel = React.forwardRef(({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+	const [carouselRef, api] = useEmblaCarousel({
+		...opts,
+		axis: orientation === "horizontal" ? "x" : "y"
+	}, plugins);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+	const onSelect = React.useCallback((api) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+	const handleKeyDown = React.useCallback((event) => {
+		if (event.key === "ArrowLeft") {
+			event.preventDefault();
+			scrollPrev();
+		} else if (event.key === "ArrowRight") {
+			event.preventDefault();
+			scrollNext();
+		}
+	}, [scrollPrev, scrollNext]);
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+	React.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on("reInit", onSelect);
+		api.on("select", onSelect);
+		return () => {
+			api?.off("select", onSelect);
+		};
+	}, [api, onSelect]);
+	return /* @__PURE__ */ jsx(CarouselContext.Provider, {
+		value: {
+			carouselRef,
+			api,
+			opts,
+			orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+			scrollPrev,
+			scrollNext,
+			canScrollPrev,
+			canScrollNext
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			onKeyDownCapture: handleKeyDown,
+			className: cn("wwc:relative", className),
+			role: "region",
+			"aria-roledescription": "carousel",
+			...props,
+			children
+		})
+	});
+});
+Carousel.displayName = "Carousel";
+const CarouselContent = React.forwardRef(({ className, ...props }, ref) => {
+	const { carouselRef, orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref: carouselRef,
+		className: "wwc:overflow-hidden",
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cn("wwc:flex", orientation === "horizontal" ? "wwc:-ml-4" : "wwc:-mt-4 wwc:flex-col", className),
+			...props
+		})
+	});
+});
+CarouselContent.displayName = "CarouselContent";
+const CarouselItem = React.forwardRef(({ className, ...props }, ref) => {
+	const { orientation } = useCarousel();
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		role: "group",
+		"aria-roledescription": "slide",
+		className: cn("wwc:min-w-0 wwc:shrink-0 wwc:grow-0 wwc:basis-full", orientation === "horizontal" ? "wwc:pl-4" : "wwc:pt-4", className),
+		...props
+	});
+});
+CarouselItem.displayName = "CarouselItem";
+const CarouselPrevious = React.forwardRef(({ className, variant = "outline", size, icon = true, ...props }, ref) => {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		ref,
+		variant,
+		size,
+		icon,
+		className: cn("wwc:absolute  wwc:h-8 wwc:w-8 wwc:rounded-full", orientation === "horizontal" ? "wwc:-left-12 wwc:top-1/2 wwc:-translate-y-1/2" : "wwc:-top-12 wwc:left-1/2 wwc:-translate-x-1/2 wwc:rotate-90", className),
+		disabled: !canScrollPrev,
+		onClick: scrollPrev,
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowLeft, { className: "wwc:h-4 wwc:w-4" }), /* @__PURE__ */ jsx("span", {
+			className: "wwc:sr-only",
+			children: "Previous slide"
+		})]
+	});
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+const CarouselNext = React.forwardRef(({ className, variant = "outline", size, icon = true, ...props }, ref) => {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+	return /* @__PURE__ */ jsxs(Button, {
+		ref,
+		variant,
+		size,
+		icon,
+		className: cn("wwc:absolute wwc:h-8 wwc:w-8 wwc:rounded-full", orientation === "horizontal" ? "wwc:-right-12 wwc:top-1/2 wwc:-translate-y-1/2" : "wwc:-bottom-12 wwc:left-1/2 wwc:-translate-x-1/2 wwc:rotate-90", className),
+		disabled: !canScrollNext,
+		onClick: scrollNext,
+		...props,
+		children: [/* @__PURE__ */ jsx(ArrowRight, { className: "wwc:h-4 wwc:w-4" }), /* @__PURE__ */ jsx("span", {
+			className: "wwc:sr-only",
+			children: "Next slide"
+		})]
+	});
+});
+CarouselNext.displayName = "CarouselNext";
+//#endregion
+export { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious };
+
+//# sourceMappingURL=carousel.mjs.map

package/dist/carousel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel.mjs","names":[],"sources":["../src/carousel.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport useEmblaCarousel, {type UseEmblaCarouselType} from \"embla-carousel-react\";\nimport {ArrowLeft, ArrowRight} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\n\ntype CarouselApi = UseEmblaCarouselType[1];\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>;\ntype CarouselOptions = UseCarouselParameters[0];\ntype CarouselPlugin = UseCarouselParameters[1];\n\ntype CarouselProps = {\n\topts?: CarouselOptions;\n\tplugins?: CarouselPlugin;\n\torientation?: \"horizontal\" | \"vertical\";\n\tsetApi?: (api: CarouselApi) => void;\n};\n\ntype CarouselContextProps = {\n\tcarouselRef: ReturnType<typeof useEmblaCarousel>[0];\n\tapi: ReturnType<typeof useEmblaCarousel>[1];\n\tscrollPrev: () => void;\n\tscrollNext: () => void;\n\tcanScrollPrev: boolean;\n\tcanScrollNext: boolean;\n} & CarouselProps;\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null);\n\nfunction useCarousel() {\n\tconst context = React.useContext(CarouselContext);\n\n\tif (!context) {\n\t\tthrow new Error(\"useCarousel must be used within a <Carousel />\");\n\t}\n\n\treturn context;\n}\n\n/** Carousel built on Embla with swipe support, keyboard navigation, and autoplay. */\nconst Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(\n\t({orientation = \"horizontal\", opts, setApi, plugins, className, children, ...props}, ref) => {\n\t\tconst [carouselRef, api] = useEmblaCarousel(\n\t\t\t{\n\t\t\t\t...opts,\n\t\t\t\taxis: orientation === \"horizontal\" ? \"x\" : \"y\",\n\t\t\t},\n\t\t\tplugins,\n\t\t);\n\t\tconst [canScrollPrev, setCanScrollPrev] = React.useState(false);\n\t\tconst [canScrollNext, setCanScrollNext] = React.useState(false);\n\n\t\tconst onSelect = React.useCallback((api: CarouselApi) => {\n\t\t\tif (!api) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetCanScrollPrev(api.canScrollPrev());\n\t\t\tsetCanScrollNext(api.canScrollNext());\n\t\t}, []);\n\n\t\tconst scrollPrev = React.useCallback(() => {\n\t\t\tapi?.scrollPrev();\n\t\t}, [api]);\n\n\t\tconst scrollNext = React.useCallback(() => {\n\t\t\tapi?.scrollNext();\n\t\t}, [api]);\n\n\t\tconst handleKeyDown = React.useCallback(\n\t\t\t(event: React.KeyboardEvent<HTMLDivElement>) => {\n\t\t\t\tif (event.key === \"ArrowLeft\") {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tscrollPrev();\n\t\t\t\t} else if (event.key === \"ArrowRight\") {\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tscrollNext();\n\t\t\t\t}\n\t\t\t},\n\t\t\t[scrollPrev, scrollNext],\n\t\t);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!api || !setApi) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetApi(api);\n\t\t}, [api, setApi]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (!api) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tonSelect(api);\n\t\t\tapi.on(\"reInit\", onSelect);\n\t\t\tapi.on(\"select\", onSelect);\n\n\t\t\treturn () => {\n\t\t\t\tapi?.off(\"select\", onSelect);\n\t\t\t};\n\t\t}, [api, onSelect]);\n\n\t\treturn (\n\t\t\t<CarouselContext.Provider\n\t\t\t\tvalue={{\n\t\t\t\t\tcarouselRef,\n\t\t\t\t\tapi: api,\n\t\t\t\t\topts,\n\t\t\t\t\torientation: orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n\t\t\t\t\tscrollPrev,\n\t\t\t\t\tscrollNext,\n\t\t\t\t\tcanScrollPrev,\n\t\t\t\t\tcanScrollNext,\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tonKeyDownCapture={handleKeyDown}\n\t\t\t\t\tclassName={cn(\"wwc:relative\", className)}\n\t\t\t\t\trole=\"region\"\n\t\t\t\t\taria-roledescription=\"carousel\"\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</CarouselContext.Provider>\n\t\t);\n\t},\n);\nCarousel.displayName = \"Carousel\";\n\nconst CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({className, ...props}, ref) => {\n\t\tconst {carouselRef, orientation} = useCarousel();\n\n\t\treturn (\n\t\t\t<div ref={carouselRef} className=\"wwc:overflow-hidden\">\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\tclassName={cn(\"wwc:flex\", orientation === \"horizontal\" ? \"wwc:-ml-4\" : \"wwc:-mt-4 wwc:flex-col\", className)}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t},\n);\nCarouselContent.displayName = \"CarouselContent\";\n\nconst CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({className, ...props}, ref) => {\n\t\tconst {orientation} = useCarousel();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\trole=\"group\"\n\t\t\t\taria-roledescription=\"slide\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:min-w-0 wwc:shrink-0 wwc:grow-0 wwc:basis-full\",\n\t\t\t\t\torientation === \"horizontal\" ? \"wwc:pl-4\" : \"wwc:pt-4\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nCarouselItem.displayName = \"CarouselItem\";\n\nconst CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n\t({className, variant = \"outline\", size, icon = true, ...props}, ref) => {\n\t\tconst {orientation, scrollPrev, canScrollPrev} = useCarousel();\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\tvariant={variant}\n\t\t\t\tsize={size}\n\t\t\t\ticon={icon}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:absolute  wwc:h-8 wwc:w-8 wwc:rounded-full\",\n\t\t\t\t\torientation === \"horizontal\"\n\t\t\t\t\t\t? \"wwc:-left-12 wwc:top-1/2 wwc:-translate-y-1/2\"\n\t\t\t\t\t\t: \"wwc:-top-12 wwc:left-1/2 wwc:-translate-x-1/2 wwc:rotate-90\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdisabled={!canScrollPrev}\n\t\t\t\tonClick={scrollPrev}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ArrowLeft className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t<span className=\"wwc:sr-only\">Previous slide</span>\n\t\t\t</Button>\n\t\t);\n\t},\n);\nCarouselPrevious.displayName = \"CarouselPrevious\";\n\nconst CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(\n\t({className, variant = \"outline\", size, icon = true, ...props}, ref) => {\n\t\tconst {orientation, scrollNext, canScrollNext} = useCarousel();\n\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\tvariant={variant}\n\t\t\t\tsize={size}\n\t\t\t\ticon={icon}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:absolute wwc:h-8 wwc:w-8 wwc:rounded-full\",\n\t\t\t\t\torientation === \"horizontal\"\n\t\t\t\t\t\t? \"wwc:-right-12 wwc:top-1/2 wwc:-translate-y-1/2\"\n\t\t\t\t\t\t: \"wwc:-bottom-12 wwc:left-1/2 wwc:-translate-x-1/2 wwc:rotate-90\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdisabled={!canScrollNext}\n\t\t\t\tonClick={scrollNext}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<ArrowRight className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t<span className=\"wwc:sr-only\">Next slide</span>\n\t\t\t</Button>\n\t\t);\n\t},\n);\nCarouselNext.displayName = \"CarouselNext\";\n\nexport {type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext};\n"],"mappings":"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"}

package/dist/catalogue-view-toggle.d.mts

@@ -0,0 +1,53 @@
+import * as React from "react";
+//#region src/catalogue-view-toggle.d.ts
+/**
+ * The table-or-cards switch every catalogue page grew its own copy of, and the card grid it swaps to.
+ *
+ * Deliberately NOT a whole "catalogue" component. `DataTable` already owns the search box, the filter
+ * chips, the empty state, paging and the toolbar; the only thing four catalogue pages were each
+ * re-typing is the mode toggle, the `localStorage` key that persists it, and the grid the cards land
+ * in. Wrapping `DataTable` as well would have to reproduce its whole surface, and would break the
+ * invariant those pages protect in comments: **one `DataTable` stays mounted for the life of the
+ * view** — its sorting, page index and column visibility live in its own state, so any wrapper that
+ * conditionally rendered a table or a grid would reset them on every mode change.
+ *
+ * The intended shape keeps that invariant by construction — `mode` reaches `DataTable` through two
+ * props and nothing else:
+ *
+ * ```tsx
+ * const [mode, setMode] = useCatalogueViewMode("wc3.processes.view");
+ * <DataTable
+ *   showColumnToggle={mode === "table"}
+ *   renderGrid={mode === "cards" ? renderGrid : undefined}
+ *   toolbarExtra={<CatalogueViewToggle value={mode} onValueChange={setMode} />}
+ * />
+ * ```
+ */
+export type CatalogueViewMode = "table" | "cards";
+/**
+ * Persisted table-or-cards preference. `storageKey` is a `localStorage` key, so it must be unique per
+ * catalogue — two pages sharing one key share one preference.
+ */
+export declare function useCatalogueViewMode(storageKey: string, initial?: CatalogueViewMode): [CatalogueViewMode, (mode: CatalogueViewMode) => void];
+export interface CatalogueViewToggleProps {
+  value: CatalogueViewMode;
+  onValueChange: (mode: CatalogueViewMode) => void;
+  /** Accessible name for the table option. Defaults to "Table view". */
+  tableLabel?: string;
+  /** Accessible name for the cards option. Defaults to "Card view". */
+  cardsLabel?: string;
+  className?: string;
+}
+/** Segmented table/cards control, sized for a `DataTable` toolbar. */
+export declare function CatalogueViewToggle({ value, onValueChange, tableLabel, cardsLabel, className }: CatalogueViewToggleProps): import("react/jsx-runtime").JSX.Element;
+export interface CatalogueCardGridProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+/**
+ * The grid cards land in when the toggle is on `cards` — one column on a phone, two from `sm`, three
+ * from `xl`. Return it from `DataTable`'s `renderGrid` so the table's own paging still governs which
+ * rows appear.
+ */
+export declare const CatalogueCardGrid: React.ForwardRefExoticComponent<CatalogueCardGridProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+//# sourceMappingURL=catalogue-view-toggle.d.mts.map

package/dist/catalogue-view-toggle.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalogue-view-toggle.d.mts","names":[],"sources":["../src/catalogue-view-toggle.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;YA+BY;;;;;wBAMI,qBACf,oBACA,UAAS,qBACN,oBAAoB,MAAM;iBAIb;EAChB,OAAO;EACP,gBAAgB,MAAM;;EAEtB;;EAEA;EACA;;;wBAIe,sBACf,OACA,eACA,YACA,YACA,aACE,uDAAwB,IAAA;iBAwBV,+BAA+B,MAAM,eAAe;EACpE,UAAU,MAAM;;;;;;;qBAQJ,mBAAiB,MAAA,0BAAA,yBAAA,MAAA,cAAA"}

package/dist/catalogue-view-toggle.mjs

@@ -0,0 +1,54 @@
+import { ToggleGroup, ToggleGroupItem } from "./toggle-group.mjs";
+import { usePersistentState } from "./use-persistent-state.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { LayoutGrid, List } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/catalogue-view-toggle.tsx
+/**
+* Persisted table-or-cards preference. `storageKey` is a `localStorage` key, so it must be unique per
+* catalogue — two pages sharing one key share one preference.
+*/
+function useCatalogueViewMode(storageKey, initial = "cards") {
+	return usePersistentState(storageKey, initial);
+}
+/** Segmented table/cards control, sized for a `DataTable` toolbar. */
+function CatalogueViewToggle({ value, onValueChange, tableLabel = "Table view", cardsLabel = "Card view", className }) {
+	return /* @__PURE__ */ jsxs(ToggleGroup, {
+		type: "single",
+		value,
+		onValueChange: (next) => {
+			if (next) onValueChange(next);
+		},
+		variant: "outline",
+		size: "sm",
+		className,
+		children: [/* @__PURE__ */ jsx(ToggleGroupItem, {
+			value: "table",
+			"aria-label": tableLabel,
+			title: tableLabel,
+			children: /* @__PURE__ */ jsx(List, { className: "wwc:h-3.5 wwc:w-3.5" })
+		}), /* @__PURE__ */ jsx(ToggleGroupItem, {
+			value: "cards",
+			"aria-label": cardsLabel,
+			title: cardsLabel,
+			children: /* @__PURE__ */ jsx(LayoutGrid, { className: "wwc:h-3.5 wwc:w-3.5" })
+		})]
+	});
+}
+/**
+* The grid cards land in when the toggle is on `cards` — one column on a phone, two from `sm`, three
+* from `xl`. Return it from `DataTable`'s `renderGrid` so the table's own paging still governs which
+* rows appear.
+*/
+const CatalogueCardGrid = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("wwc:grid wwc:gap-3 wwc:sm:grid-cols-2 wwc:xl:grid-cols-3", className),
+	...props,
+	children
+}));
+CatalogueCardGrid.displayName = "CatalogueCardGrid";
+//#endregion
+export { CatalogueCardGrid, CatalogueViewToggle, useCatalogueViewMode };
+
+//# sourceMappingURL=catalogue-view-toggle.mjs.map

package/dist/catalogue-view-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalogue-view-toggle.mjs","names":[],"sources":["../src/catalogue-view-toggle.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {LayoutGrid, List} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {ToggleGroup, ToggleGroupItem} from \"./toggle-group\";\nimport {usePersistentState} from \"./use-persistent-state\";\n\n/**\n * The table-or-cards switch every catalogue page grew its own copy of, and the card grid it swaps to.\n *\n * Deliberately NOT a whole \"catalogue\" component. `DataTable` already owns the search box, the filter\n * chips, the empty state, paging and the toolbar; the only thing four catalogue pages were each\n * re-typing is the mode toggle, the `localStorage` key that persists it, and the grid the cards land\n * in. Wrapping `DataTable` as well would have to reproduce its whole surface, and would break the\n * invariant those pages protect in comments: **one `DataTable` stays mounted for the life of the\n * view** — its sorting, page index and column visibility live in its own state, so any wrapper that\n * conditionally rendered a table or a grid would reset them on every mode change.\n *\n * The intended shape keeps that invariant by construction — `mode` reaches `DataTable` through two\n * props and nothing else:\n *\n * ```tsx\n * const [mode, setMode] = useCatalogueViewMode(\"wc3.processes.view\");\n * <DataTable\n *   showColumnToggle={mode === \"table\"}\n *   renderGrid={mode === \"cards\" ? renderGrid : undefined}\n *   toolbarExtra={<CatalogueViewToggle value={mode} onValueChange={setMode} />}\n * />\n * ```\n */\n\nexport type CatalogueViewMode = \"table\" | \"cards\";\n\n/**\n * Persisted table-or-cards preference. `storageKey` is a `localStorage` key, so it must be unique per\n * catalogue — two pages sharing one key share one preference.\n */\nexport function useCatalogueViewMode(\n\tstorageKey: string,\n\tinitial: CatalogueViewMode = \"cards\",\n): [CatalogueViewMode, (mode: CatalogueViewMode) => void] {\n\treturn usePersistentState<CatalogueViewMode>(storageKey, initial);\n}\n\nexport interface CatalogueViewToggleProps {\n\tvalue: CatalogueViewMode;\n\tonValueChange: (mode: CatalogueViewMode) => void;\n\t/** Accessible name for the table option. Defaults to \"Table view\". */\n\ttableLabel?: string;\n\t/** Accessible name for the cards option. Defaults to \"Card view\". */\n\tcardsLabel?: string;\n\tclassName?: string;\n}\n\n/** Segmented table/cards control, sized for a `DataTable` toolbar. */\nexport function CatalogueViewToggle({\n\tvalue,\n\tonValueChange,\n\ttableLabel = \"Table view\",\n\tcardsLabel = \"Card view\",\n\tclassName,\n}: CatalogueViewToggleProps) {\n\treturn (\n\t\t<ToggleGroup\n\t\t\ttype=\"single\"\n\t\t\tvalue={value}\n\t\t\t// Radix emits \"\" when the active item is pressed again; a segmented control has no \"neither\"\n\t\t\t// state, so that is swallowed rather than leaving the catalogue with no mode at all.\n\t\t\tonValueChange={(next) => {\n\t\t\t\tif (next) onValueChange(next as CatalogueViewMode);\n\t\t\t}}\n\t\t\tvariant=\"outline\"\n\t\t\tsize=\"sm\"\n\t\t\tclassName={className}\n\t\t>\n\t\t\t<ToggleGroupItem value=\"table\" aria-label={tableLabel} title={tableLabel}>\n\t\t\t\t<List className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t</ToggleGroupItem>\n\t\t\t<ToggleGroupItem value=\"cards\" aria-label={cardsLabel} title={cardsLabel}>\n\t\t\t\t<LayoutGrid className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t</ToggleGroupItem>\n\t\t</ToggleGroup>\n\t);\n}\n\nexport interface CatalogueCardGridProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren: React.ReactNode;\n}\n\n/**\n * The grid cards land in when the toggle is on `cards` — one column on a phone, two from `sm`, three\n * from `xl`. Return it from `DataTable`'s `renderGrid` so the table's own paging still governs which\n * rows appear.\n */\nexport const CatalogueCardGrid = React.forwardRef<HTMLDivElement, CatalogueCardGridProps>(\n\t({className, children, ...props}, ref) => (\n\t\t<div ref={ref} className={cn(\"wwc:grid wwc:gap-3 wwc:sm:grid-cols-2 wwc:xl:grid-cols-3\", className)} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t),\n);\nCatalogueCardGrid.displayName = \"CatalogueCardGrid\";\n"],"mappings":";;;;;;;;;;;AAqCA,SAAgB,qBACf,YACA,UAA6B,SAC4B;CACzD,OAAO,mBAAsC,YAAY,OAAO;AACjE;;AAaA,SAAgB,oBAAoB,EACnC,OACA,eACA,aAAa,cACb,aAAa,aACb,aAC4B;CAC5B,OACC,qBAAC,aAAD;EACC,MAAK;EACE;EAGP,gBAAgB,SAAS;GACxB,IAAI,MAAM,cAAc,IAAyB;EAClD;EACA,SAAQ;EACR,MAAK;EACM;EAVZ,UAAA,CAYC,oBAAC,iBAAD;GAAiB,OAAM;GAAQ,cAAY;GAAY,OAAO;GAC7D,UAAA,oBAAC,MAAD,EAAM,WAAU,sBAAuB,CAAA;EACvB,CAAA,GACjB,oBAAC,iBAAD;GAAiB,OAAM;GAAQ,cAAY;GAAY,OAAO;GAC7D,UAAA,oBAAC,YAAD,EAAY,WAAU,sBAAuB,CAAA;EAC7B,CAAA,CACL;;AAEf;;;;;;AAWA,MAAa,oBAAoB,MAAM,YACrC,EAAC,WAAW,UAAU,GAAG,SAAQ,QACjC,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,4DAA4D,SAAS;CAAG,GAAI;CACvG;AACG,CAAA,CAEP;AACA,kBAAkB,cAAc"}

package/dist/chart.d.mts

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { EChartsOption } from "echarts";
+//#region src/chart.d.ts
+export type ChartConfig = { [k in string]: {
+  label?: React.ReactNode;
+  icon?: React.ComponentType;
+} & ({
+  color?: string;
+  theme?: never;
+} | {
+  color?: never;
+  theme: Record<"light" | "dark", string>;
+}); };
+export type ChartSemanticTone = "primary" | "success" | "warning" | "destructive" | "muted" | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5";
+export type ChartSeriesTheme = {
+  tone: ChartSemanticTone;
+  colorIndex?: never;
+} | {
+  tone?: never;
+  colorIndex: number;
+};
+/**
+ * Returns an ECharts option whose CSS Color 4 values are converted to canvas-safe RGB strings.
+ * Optional series themes let consumers use Core semantic tones or palette indexes without
+ * reading CSS variables or introducing raw color literals.
+ *
+ * Colors are resolved against the theme that is live **at call time** — the returned option holds
+ * concrete RGB strings, so a memoised result goes stale the moment the theme is switched. Prefer
+ * `<ChartContainer seriesThemes={...} />`, which re-resolves them on every theme change; call this
+ * directly only when you need the option object itself, and key your memo on {@link useThemeVersion}.
+ */
+export declare function createThemedChartOption(option: EChartsOption, seriesThemes?: ChartSeriesTheme[]): EChartsOption;
+/**
+ * A counter that changes whenever the live theme does, so anything resolved from a CSS variable can
+ * be read again.
+ *
+ * Every color here comes out of `getComputedStyle(document.documentElement)`, which returns a
+ * concrete RGB string for whichever theme was live when it ran. Toggling `.dark` (or `.wwc-invert`,
+ * or `data-theme`) on `<html>` swaps the variables underneath but recomputes nothing — a chart
+ * memoised on mount keeps painting light-mode colors on a dark card until something invalidates it.
+ * That is what this hook is: an attribute observer over `<html>` plus the system-preference media
+ * query, both of which mean "read the variables again".
+ *
+ * Use it as a dependency of any memo that resolves theme colors itself.
+ */
+export declare function useThemeVersion(): number;
+/**
+ * Hook that returns theme-aware colors derived from CSS variables.
+ * Returns chart colors (--chart-1 through --chart-5) and common UI colors.
+ * Recomputes on every theme change, so an option built from these values is never stale.
+ */
+export declare function useChartTheme(): {
+  colors: any;
+  textColor: any;
+  mutedColor: any;
+  borderColor: any;
+  backgroundColor: any;
+};
+interface ChartContainerProps {
+  config?: ChartConfig;
+  option: EChartsOption;
+  /**
+   * Core semantic tones or palette indexes applied to `option.series` in order. Prefer this over
+   * calling {@link createThemedChartOption} yourself: the colors are resolved here, on every theme
+   * change, so the series survive a switch to dark mode.
+   */
+  seriesThemes?: ChartSeriesTheme[];
+  className?: string;
+  style?: React.CSSProperties;
+  height?: number | string;
+  onEvents?: Record<string, (params: unknown) => void>;
+  /** When set, the chart is framed in a WidgetCard with this name in the grey header band. */
+  title?: React.ReactNode;
+  /** Right-aligned header slot (info icon, menu, ...). Only rendered alongside a `title`. */
+  actions?: React.ReactNode;
+  /** Headline figure rendered above the chart, inside the card body. */
+  value?: React.ReactNode;
+}
+/**
+ * ECharts wrapper that manages its own instance to prevent hover/tooltip issues.
+ * Uses echarts directly instead of echarts-for-react to avoid re-render problems.
+ * Passing `title` frames the chart in the shared analytics container (grey header band + body).
+ *
+ * Colors are re-resolved and re-applied on every theme change, not only when `option` changes
+ * identity — a memoised option is the normal thing for a caller to pass, and it must not freeze the
+ * chart in the theme it was first painted in.
+ */
+declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ChartContainer };
+//# sourceMappingURL=chart.d.mts.map

package/dist/chart.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart.d.mts","names":[],"sources":["../src/chart.tsx"],"mappings":";;;YAQY,iBACV;EACA,QAAQ,MAAM;EACd,OAAO,MAAM;;EACR;EAAgB;;EAAkB;EAAe,OAAO;;YAGnD;YAYA;EAAoB,MAAM;EAAmB;;EAAuB;EAAc;;;;;;;;;;;;wBA4C9E,wBAAwB,QAAQ,eAAe,eAAc,qBAA0B;;;;;;;;;;;;;;wBAgCvF;;;;;;wBA0BA;;;;;;;UAmFN;EACT,SAAS;EACT,QAAQ;;;;;;EAMR,eAAe;EACf;EACA,QAAQ,MAAM;EACd;EACA,WAAW,gBAAgB;;EAE3B,QAAQ,MAAM;;EAEd,UAAU,MAAM;;EAEhB,QAAQ,MAAM;;;;;;;;;;;cAYT,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA"}

package/dist/chart.mjs

@@ -0,0 +1,254 @@
+import { WidgetCard, WidgetCardActions, WidgetCardBody, WidgetCardHeader, WidgetCardTitle } from "./widget-card.mjs";
+import { cssColorToRgb, getChartColors, getCssVarAsRgb } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as echarts from "echarts";
+//#region src/chart.tsx
+const TONE_VARIABLES = {
+	primary: "--primary",
+	success: "--success",
+	warning: "--warning",
+	destructive: "--destructive",
+	muted: "--muted-foreground",
+	"chart-1": "--chart-1",
+	"chart-2": "--chart-2",
+	"chart-3": "--chart-3",
+	"chart-4": "--chart-4",
+	"chart-5": "--chart-5"
+};
+const CANVAS_UNSAFE_COLOR = /(?:var\(|oklch\(|oklab\(|lab\(|lch\(|color\()/i;
+function themedSeriesColor(theme) {
+	if (theme.tone) return getCssVarAsRgb(TONE_VARIABLES[theme.tone]);
+	const colors = getChartColors();
+	return colors[(theme.colorIndex % colors.length + colors.length) % colors.length];
+}
+function normalizeColorValue(value, key) {
+	if (Array.isArray(value)) return value.map((item) => normalizeColorValue(item, key));
+	if (value && typeof value === "object") return Object.fromEntries(Object.entries(value).map(([childKey, childValue]) => [childKey, normalizeColorValue(childValue, childKey)]));
+	if (typeof value === "string" && key && /(?:^color$|color$)/i.test(key) && CANVAS_UNSAFE_COLOR.test(value)) return cssColorToRgb(value);
+	return value;
+}
+/**
+* Returns an ECharts option whose CSS Color 4 values are converted to canvas-safe RGB strings.
+* Optional series themes let consumers use Core semantic tones or palette indexes without
+* reading CSS variables or introducing raw color literals.
+*
+* Colors are resolved against the theme that is live **at call time** — the returned option holds
+* concrete RGB strings, so a memoised result goes stale the moment the theme is switched. Prefer
+* `<ChartContainer seriesThemes={...} />`, which re-resolves them on every theme change; call this
+* directly only when you need the option object itself, and key your memo on {@link useThemeVersion}.
+*/
+function createThemedChartOption(option, seriesThemes = []) {
+	const normalized = normalizeColorValue(option);
+	if (!seriesThemes.length || !Array.isArray(normalized.series)) return normalized;
+	return {
+		...normalized,
+		series: normalized.series.map((series, index) => {
+			const theme = seriesThemes[index];
+			if (!theme || !series || typeof series !== "object") return series;
+			const color = themedSeriesColor(theme);
+			const record = series;
+			return {
+				...record,
+				lineStyle: {
+					...record.lineStyle,
+					color
+				},
+				itemStyle: {
+					...record.itemStyle,
+					color
+				}
+			};
+		})
+	};
+}
+/**
+* A counter that changes whenever the live theme does, so anything resolved from a CSS variable can
+* be read again.
+*
+* Every color here comes out of `getComputedStyle(document.documentElement)`, which returns a
+* concrete RGB string for whichever theme was live when it ran. Toggling `.dark` (or `.wwc-invert`,
+* or `data-theme`) on `<html>` swaps the variables underneath but recomputes nothing — a chart
+* memoised on mount keeps painting light-mode colors on a dark card until something invalidates it.
+* That is what this hook is: an attribute observer over `<html>` plus the system-preference media
+* query, both of which mean "read the variables again".
+*
+* Use it as a dependency of any memo that resolves theme colors itself.
+*/
+function useThemeVersion() {
+	const [version, setVersion] = React.useState(0);
+	React.useEffect(() => {
+		const bump = () => setVersion((current) => current + 1);
+		const observer = new MutationObserver(bump);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class", "data-theme"]
+		});
+		const media = window.matchMedia("(prefers-color-scheme: dark)");
+		media.addEventListener("change", bump);
+		return () => {
+			observer.disconnect();
+			media.removeEventListener("change", bump);
+		};
+	}, []);
+	return version;
+}
+/**
+* Hook that returns theme-aware colors derived from CSS variables.
+* Returns chart colors (--chart-1 through --chart-5) and common UI colors.
+* Recomputes on every theme change, so an option built from these values is never stale.
+*/
+function useChartTheme() {
+	const themeVersion = useThemeVersion();
+	return React.useMemo(() => readChartTheme(themeVersion), [themeVersion]);
+}
+/** Reads the whole palette from the document. The version argument only dates the answer. */
+function readChartTheme(_themeVersion) {
+	return {
+		colors: getChartColors(),
+		textColor: getCssVarAsRgb("--foreground"),
+		mutedColor: getCssVarAsRgb("--muted-foreground"),
+		borderColor: getCssVarAsRgb("--border"),
+		backgroundColor: getCssVarAsRgb("--background")
+	};
+}
+/**
+* Defaults a `color` on a text-ish ECharts node. The caller's own value wins — spreading the
+* existing record last is what makes this a default rather than an override.
+*/
+function withTextColor(node, color) {
+	return {
+		color,
+		...node ?? {}
+	};
+}
+/** The same, for the `lineStyle.color` of an axis line, tick, or gridline. */
+function withLineColor(node, color) {
+	const record = node ?? {};
+	return {
+		...record,
+		lineStyle: {
+			color,
+			...record.lineStyle ?? {}
+		}
+	};
+}
+function themedAxis(axis, palette) {
+	if (Array.isArray(axis)) return axis.map((entry) => themedAxis(entry, palette));
+	if (!axis || typeof axis !== "object") return axis;
+	const record = axis;
+	return {
+		...record,
+		axisLabel: withTextColor(record.axisLabel, palette.mutedColor),
+		axisLine: withLineColor(record.axisLine, palette.borderColor),
+		axisTick: withLineColor(record.axisTick, palette.borderColor),
+		splitLine: withLineColor(record.splitLine, palette.borderColor)
+	};
+}
+function themedTextNode(node, color) {
+	if (Array.isArray(node)) return node.map((entry) => themedTextNode(entry, color));
+	if (!node || typeof node !== "object") return node;
+	const record = node;
+	return {
+		...record,
+		textStyle: withTextColor(record.textStyle, color)
+	};
+}
+/**
+* Fills in the chart's own furniture — label text, axis lines, gridlines — from the live theme.
+*
+* Left unset, ECharts falls back to its built-in `#333` text and `#ccc` lines, which are literals
+* and stay put when the page inverts. Anything the option already states is kept, so this only ever
+* colors what the caller left to chance. Axes absent from the option are not invented.
+*/
+function withThemeDefaults(option) {
+	if (typeof document === "undefined") return option;
+	const palette = {
+		textColor: getCssVarAsRgb("--foreground"),
+		mutedColor: getCssVarAsRgb("--muted-foreground"),
+		borderColor: getCssVarAsRgb("--border")
+	};
+	const record = option;
+	const themed = {
+		...record,
+		textStyle: withTextColor(record.textStyle, palette.textColor)
+	};
+	if (record.xAxis) themed.xAxis = themedAxis(record.xAxis, palette);
+	if (record.yAxis) themed.yAxis = themedAxis(record.yAxis, palette);
+	if (record.radiusAxis) themed.radiusAxis = themedAxis(record.radiusAxis, palette);
+	if (record.angleAxis) themed.angleAxis = themedAxis(record.angleAxis, palette);
+	if (record.legend) themed.legend = themedTextNode(record.legend, palette.mutedColor);
+	if (record.title) themed.title = themedTextNode(record.title, palette.textColor);
+	return themed;
+}
+/**
+* ECharts wrapper that manages its own instance to prevent hover/tooltip issues.
+* Uses echarts directly instead of echarts-for-react to avoid re-render problems.
+* Passing `title` frames the chart in the shared analytics container (grey header band + body).
+*
+* Colors are re-resolved and re-applied on every theme change, not only when `option` changes
+* identity — a memoised option is the normal thing for a caller to pass, and it must not freeze the
+* chart in the theme it was first painted in.
+*/
+const ChartContainer = React.forwardRef(({ config: _config, option, seriesThemes, className, style, height, onEvents, title, actions, value }, ref) => {
+	const chartRef = React.useRef(null);
+	const instanceRef = React.useRef(null);
+	const themeVersion = useThemeVersion();
+	React.useEffect(() => {
+		if (!chartRef.current) return;
+		const instance = echarts.init(chartRef.current);
+		instanceRef.current = instance;
+		if (onEvents) for (const [event, handler] of Object.entries(onEvents)) instance.on(event, handler);
+		const observer = new ResizeObserver(() => {
+			instance.resize();
+		});
+		observer.observe(chartRef.current);
+		return () => {
+			observer.disconnect();
+			instance.dispose();
+			instanceRef.current = null;
+		};
+	}, []);
+	const seriesThemesRef = React.useRef(seriesThemes);
+	seriesThemesRef.current = seriesThemes;
+	const seriesThemesKey = JSON.stringify(seriesThemes ?? []);
+	React.useEffect(() => {
+		if (instanceRef.current) {
+			const themed = withThemeDefaults(createThemedChartOption(option, seriesThemesRef.current));
+			instanceRef.current.setOption(themed, {
+				notMerge: false,
+				lazyUpdate: true
+			});
+		}
+	}, [
+		option,
+		seriesThemesKey,
+		themeVersion
+	]);
+	React.useImperativeHandle(ref, () => chartRef.current, []);
+	const chartStyle = {
+		...style,
+		height: height ?? style?.height ?? 300,
+		width: "100%"
+	};
+	const canvas = /* @__PURE__ */ jsx("div", {
+		ref: chartRef,
+		style: chartStyle
+	});
+	if (title === void 0) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: canvas
+	});
+	return /* @__PURE__ */ jsxs(WidgetCard, {
+		className,
+		children: [/* @__PURE__ */ jsxs(WidgetCardHeader, { children: [/* @__PURE__ */ jsx(WidgetCardTitle, { children: title }), actions && /* @__PURE__ */ jsx(WidgetCardActions, { children: actions })] }), /* @__PURE__ */ jsxs(WidgetCardBody, { children: [value !== void 0 && /* @__PURE__ */ jsx("div", {
+			className: "wwc:text-3xl wwc:font-semibold wwc:tracking-tight",
+			children: value
+		}), canvas] })]
+	});
+});
+ChartContainer.displayName = "ChartContainer";
+//#endregion
+export { ChartContainer, createThemedChartOption, useChartTheme, useThemeVersion };
+
+//# sourceMappingURL=chart.mjs.map