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

package/dist/legend.d.mts

@@ -0,0 +1,87 @@
+import * as React from "react";
+//#region src/legend.d.ts
+/** One row in the legend: a colored swatch mapped to a label (+ optional description). */
+export interface LegendItem {
+  id: string;
+  label: string;
+  description?: React.ReactNode;
+  /** Swatch fill — any CSS color. */
+  color: string;
+  /** Swatch border color. Defaults to `color`. */
+  borderColor?: string;
+  /** Swatch opacity, 0–1. Default 1. */
+  opacity?: number;
+}
+export type LegendShape = "square" | "circle";
+export type LegendPlacement = "bottom-right" | "bottom-left" | "top-right" | "top-left" | "static";
+export interface LegendProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title: string;
+  items: LegendItem[];
+  /** Swatch shape. Default `"square"`. */
+  shape?: LegendShape;
+  /** Grid columns. Default 2. */
+  columns?: 1 | 2 | 3;
+  /** Floating position over a canvas, or `"static"` to render inline. Default `"bottom-right"`. */
+  placement?: LegendPlacement;
+  /** Small status text beside the title (e.g. "Loading"). */
+  status?: React.ReactNode;
+  /** Explanatory note under the grid. */
+  footnote?: React.ReactNode;
+  /** Show the minimize control + collapsed reopen button. Default true. */
+  collapsible?: boolean;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Label on the collapsed reopen button. Default "Legend". */
+  collapsedLabel?: string;
+}
+/**
+ * A compact key mapping swatch colors to labels. Floats over a canvas/map (bottom-right by default)
+ * or embeds inline (`placement="static"`), and can minimize to a small button to get out of the way.
+ */
+declare const Legend: React.ForwardRefExoticComponent<LegendProps & React.RefAttributes<HTMLDivElement>>;
+/** One tab in a {@link TabbedLegend}: a label + its own set of legend items. */
+export interface LegendTab {
+  id: string;
+  /** Tab label. */
+  label: React.ReactNode;
+  /** This tab's swatch/label rows. */
+  items: LegendItem[];
+  /** Optional note under this tab's grid. */
+  footnote?: React.ReactNode;
+}
+export interface TabbedLegendProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  /** Header title (the "view mode" heading). */
+  title: string;
+  /** Tabs, each showing a different legend for what's selected. */
+  tabs: LegendTab[];
+  /** Active tab id (controlled). */
+  value?: string;
+  /** Initial active tab id. Defaults to the first tab. */
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  /** Swatch shape. Default `"square"`. */
+  shape?: LegendShape;
+  /** Cap each tab at this many rows; extra items flow into new columns (grows horizontally). Default 4. */
+  maxRows?: number;
+  /** Floating position over a canvas, or `"static"` to render inline. Default `"bottom-right"`. */
+  placement?: LegendPlacement;
+  /** Small status text beside the title. */
+  status?: React.ReactNode;
+  /** Show the minimize control + collapsed reopen button. Default true. */
+  collapsible?: boolean;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Accessible label for the collapsed tab bar. Default = `title`. */
+  collapsedLabel?: string;
+}
+/**
+ * A {@link Legend} whose body is split across tabs. The header ("view mode") can collapse to a chip,
+ * and each tab swaps in its own colors and rows — use it to key different overlays depending on
+ * what's selected on the canvas/map.
+ */
+declare const TabbedLegend: React.ForwardRefExoticComponent<TabbedLegendProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Legend, TabbedLegend };
+//# sourceMappingURL=legend.d.mts.map

package/dist/legend.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.d.mts","names":[],"sources":["../src/legend.tsx"],"mappings":";;;iBAQiB;EAChB;EACA;EACA,cAAc,MAAM;;EAEpB;;EAEA;;EAEA;;YAGW;YACA;iBAEK,oBAAoB,KAAK,MAAM,eAAe;EAC9D;EACA,OAAO;;EAEP,QAAQ;;EAER;;EAEA,YAAY;;EAEZ,SAAS,MAAM;;EAEf,WAAW,MAAM;;EAEjB;EACA;EACA;EACA,qBAAqB;;EAErB;;;;;;cAqFK,QAAM,MAAA,0BAAA,cAAA,MAAA,cAAA;;iBAyFK;EAChB;;EAEA,OAAO,MAAM;;EAEb,OAAO;;EAEP,WAAW,MAAM;;iBAGD,0BAA0B,KAAK,MAAM,eAAe;;EAEpE;;EAEA,MAAM;;EAEN;;EAEA;EACA,iBAAiB;;EAEjB,QAAQ;;EAER;;EAEA,YAAY;;EAEZ,SAAS,MAAM;;EAEf;EACA;EACA;EACA,qBAAqB;;EAErB;;;;;;;cAQK,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA"}

package/dist/legend.mjs

@@ -0,0 +1,210 @@
+import { Button } from "./button.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/legend.tsx
+function useControllable(controlled, fallback, onChange) {
+	const [internal, setInternal] = React.useState(fallback);
+	return [controlled !== void 0 ? controlled : internal, React.useCallback((next) => {
+		if (controlled === void 0) setInternal(next);
+		onChange?.(next);
+	}, [controlled, onChange])];
+}
+const PLACEMENT = {
+	"bottom-right": "wwc:absolute wwc:bottom-3 wwc:right-3",
+	"bottom-left": "wwc:absolute wwc:bottom-3 wwc:left-3",
+	"top-right": "wwc:absolute wwc:top-3 wwc:right-3",
+	"top-left": "wwc:absolute wwc:top-3 wwc:left-3"
+};
+const COLUMNS = {
+	1: "wwc:grid-cols-1",
+	2: "wwc:grid-cols-2",
+	3: "wwc:grid-cols-3"
+};
+/** The swatch + label grid shared by {@link Legend} and {@link TabbedLegend}. */
+function LegendItemGrid({ items, shape = "square", columns = 2, maxRows }) {
+	const rowCapped = maxRows != null;
+	const rows = rowCapped ? Math.min(maxRows, Math.max(items.length, 1)) : void 0;
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("wwc:grid wwc:gap-y-1.5", rowCapped ? "wwc:grid-flow-col wwc:gap-x-5" : cn("wwc:gap-x-3", COLUMNS[columns])),
+		style: rowCapped ? { gridTemplateRows: `repeat(${rows}, minmax(0, auto))` } : void 0,
+		children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-2",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: cn("wwc:h-2.5 wwc:w-2.5 wwc:shrink-0 wwc:border", shape === "circle" ? "wwc:rounded-full" : "wwc:rounded-sm"),
+				style: {
+					backgroundColor: item.color,
+					borderColor: item.borderColor ?? item.color,
+					opacity: item.opacity ?? 1
+				}
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "wwc:min-w-0",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "wwc:truncate wwc:text-sm wwc:font-medium wwc:text-foreground",
+					children: item.label
+				}), item.description ? /* @__PURE__ */ jsx("p", {
+					className: "wwc:truncate wwc:text-sm wwc:text-muted-foreground",
+					children: item.description
+				}) : null]
+			})]
+		}, item.id))
+	});
+}
+/**
+* A compact key mapping swatch colors to labels. Floats over a canvas/map (bottom-right by default)
+* or embeds inline (`placement="static"`), and can minimize to a small button to get out of the way.
+*/
+const Legend = React.forwardRef(({ className, title, items, shape = "square", columns = 2, placement = "bottom-right", status, footnote, collapsible = true, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, collapsedLabel = "Legend", ...rest }, ref) => {
+	const [collapsed, setCollapsed] = useControllable(collapsedProp, defaultCollapsed, onCollapsedChange);
+	const floating = placement !== "static";
+	const positionClass = placement === "static" ? "" : PLACEMENT[placement];
+	if (collapsible && collapsed) return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		onClick: () => setCollapsed(false),
+		className: cn("wwc:pointer-events-auto wwc:z-10 wwc:rounded-lg wwc:border wwc:bg-card/95 wwc:px-2 wwc:py-1 wwc:text-sm wwc:font-medium wwc:shadow-sm wwc:hover:bg-accent", positionClass, className),
+		...rest,
+		children: collapsedLabel
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:z-10 wwc:max-w-[18rem] wwc:rounded-lg wwc:border wwc:bg-card/95 wwc:p-2 wwc:text-sm wwc:shadow-sm", floating && "wwc:pointer-events-auto", positionClass, className),
+		...rest,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:mb-1 wwc:flex wwc:items-center wwc:justify-between wwc:gap-3",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-2",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "wwc:font-medium wwc:text-foreground",
+						children: title
+					}), status ? /* @__PURE__ */ jsx("span", {
+						className: "wwc:text-sm wwc:text-muted-foreground",
+						children: status
+					}) : null]
+				}), collapsible ? /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					icon: true,
+					size: "sm",
+					className: "wwc:h-6 wwc:w-6 wwc:shrink-0",
+					"aria-label": "Minimize legend",
+					onClick: () => setCollapsed(true),
+					children: /* @__PURE__ */ jsx(ChevronUp, { className: "wwc:h-3.5 wwc:w-3.5" })
+				}) : null]
+			}),
+			/* @__PURE__ */ jsx(LegendItemGrid, {
+				items,
+				shape,
+				columns
+			}),
+			footnote ? /* @__PURE__ */ jsx("p", {
+				className: "wwc:mt-2 wwc:text-sm wwc:leading-snug wwc:text-muted-foreground",
+				children: footnote
+			}) : null
+		]
+	});
+});
+Legend.displayName = "Legend";
+/**
+* A {@link Legend} whose body is split across tabs. The header ("view mode") can collapse to a chip,
+* and each tab swaps in its own colors and rows — use it to key different overlays depending on
+* what's selected on the canvas/map.
+*/
+const TabbedLegend = React.forwardRef(({ className, title, tabs, value, defaultValue, onValueChange, shape = "square", maxRows = 4, placement = "bottom-right", status, collapsible = true, collapsed: collapsedProp, defaultCollapsed = false, onCollapsedChange, collapsedLabel, ...rest }, ref) => {
+	const [collapsed, setCollapsed] = useControllable(collapsedProp, defaultCollapsed, onCollapsedChange);
+	const floating = placement !== "static";
+	const positionClass = placement === "static" ? "" : PLACEMENT[placement];
+	const firstTab = tabs[0]?.id;
+	const [activeTab, setActiveTab] = useControllable(value, defaultValue ?? firstTab ?? "", onValueChange);
+	if (collapsible && collapsed) return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"aria-label": collapsedLabel ?? title,
+		className: cn("wwc:pointer-events-auto wwc:z-10 wwc:flex wwc:items-center wwc:gap-1 wwc:rounded-lg wwc:border wwc:bg-card/95 wwc:px-2 wwc:py-1 wwc:shadow-sm", positionClass, className),
+		...rest,
+		children: [/* @__PURE__ */ jsx(Tabs, {
+			variant: "underline",
+			size: "sm",
+			value: activeTab,
+			onValueChange: setActiveTab,
+			children: /* @__PURE__ */ jsx(TabsList, {
+				className: "wwc:border-b-0",
+				children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, {
+					value: tab.id,
+					className: "wwc:text-sm wwc:data-[state=active]:border-transparent",
+					children: tab.label
+				}, tab.id))
+			})
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			icon: true,
+			size: "sm",
+			className: "wwc:h-6 wwc:w-6 wwc:shrink-0",
+			"aria-label": "Expand legend",
+			onClick: () => setCollapsed(false),
+			children: /* @__PURE__ */ jsx(ChevronDown, { className: "wwc:h-3.5 wwc:w-3.5" })
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:z-10 wwc:w-max wwc:max-w-[34rem] wwc:rounded-lg wwc:border wwc:bg-card/95 wwc:p-2 wwc:text-sm wwc:shadow-sm", floating && "wwc:pointer-events-auto", positionClass, className),
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "wwc:mb-1.5 wwc:flex wwc:items-center wwc:justify-between wwc:gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-2",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: "wwc:font-medium wwc:text-foreground",
+					children: title
+				}), status ? /* @__PURE__ */ jsx("span", {
+					className: "wwc:text-sm wwc:text-muted-foreground",
+					children: status
+				}) : null]
+			}), collapsible ? /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				icon: true,
+				size: "sm",
+				className: "wwc:h-6 wwc:w-6 wwc:shrink-0",
+				"aria-label": "Minimize legend",
+				onClick: () => setCollapsed(true),
+				children: /* @__PURE__ */ jsx(ChevronUp, { className: "wwc:h-3.5 wwc:w-3.5" })
+			}) : null]
+		}), /* @__PURE__ */ jsxs(Tabs, {
+			variant: "underline",
+			size: "sm",
+			value: activeTab,
+			onValueChange: setActiveTab,
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "wwc:mb-2 wwc:flex wwc:items-center wwc:gap-1",
+				children: [/* @__PURE__ */ jsx(TabsList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsTrigger, {
+					value: tab.id,
+					className: "wwc:text-sm",
+					children: tab.label
+				}, tab.id)) }), collapsible ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "wwc:h-6 wwc:w-6 wwc:shrink-0"
+				}) : null]
+			}), tabs.map((tab) => /* @__PURE__ */ jsxs(TabsContent, {
+				value: tab.id,
+				className: "wwc:mt-0",
+				children: [/* @__PURE__ */ jsx(LegendItemGrid, {
+					items: tab.items,
+					shape,
+					maxRows
+				}), tab.footnote ? /* @__PURE__ */ jsx("p", {
+					className: "wwc:mt-2 wwc:text-sm wwc:leading-snug wwc:text-muted-foreground",
+					children: tab.footnote
+				}) : null]
+			}, tab.id))]
+		})]
+	});
+});
+TabbedLegend.displayName = "TabbedLegend";
+//#endregion
+export { Legend, TabbedLegend };
+
+//# sourceMappingURL=legend.mjs.map

package/dist/legend.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.mjs","names":[],"sources":["../src/legend.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronDown, ChevronUp} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {Tabs, TabsContent, TabsList, TabsTrigger} from \"./tabs\";\n\n/** One row in the legend: a colored swatch mapped to a label (+ optional description). */\nexport interface LegendItem {\n\tid: string;\n\tlabel: string;\n\tdescription?: React.ReactNode;\n\t/** Swatch fill — any CSS color. */\n\tcolor: string;\n\t/** Swatch border color. Defaults to `color`. */\n\tborderColor?: string;\n\t/** Swatch opacity, 0–1. Default 1. */\n\topacity?: number;\n}\n\nexport type LegendShape = \"square\" | \"circle\";\nexport type LegendPlacement = \"bottom-right\" | \"bottom-left\" | \"top-right\" | \"top-left\" | \"static\";\n\nexport interface LegendProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n\ttitle: string;\n\titems: LegendItem[];\n\t/** Swatch shape. Default `\"square\"`. */\n\tshape?: LegendShape;\n\t/** Grid columns. Default 2. */\n\tcolumns?: 1 | 2 | 3;\n\t/** Floating position over a canvas, or `\"static\"` to render inline. Default `\"bottom-right\"`. */\n\tplacement?: LegendPlacement;\n\t/** Small status text beside the title (e.g. \"Loading\"). */\n\tstatus?: React.ReactNode;\n\t/** Explanatory note under the grid. */\n\tfootnote?: React.ReactNode;\n\t/** Show the minimize control + collapsed reopen button. Default true. */\n\tcollapsible?: boolean;\n\tcollapsed?: boolean;\n\tdefaultCollapsed?: boolean;\n\tonCollapsedChange?: (collapsed: boolean) => void;\n\t/** Label on the collapsed reopen button. Default \"Legend\". */\n\tcollapsedLabel?: string;\n}\n\nfunction useControllable<T>(controlled: T | undefined, fallback: T, onChange?: (value: T) => void) {\n\tconst [internal, setInternal] = React.useState<T>(fallback);\n\tconst value = controlled !== undefined ? controlled : internal;\n\tconst set = React.useCallback(\n\t\t(next: T) => {\n\t\t\tif (controlled === undefined) setInternal(next);\n\t\t\tonChange?.(next);\n\t\t},\n\t\t[controlled, onChange],\n\t);\n\treturn [value, set] as const;\n}\n\nconst PLACEMENT: Record<Exclude<LegendPlacement, \"static\">, string> = {\n\t\"bottom-right\": \"wwc:absolute wwc:bottom-3 wwc:right-3\",\n\t\"bottom-left\": \"wwc:absolute wwc:bottom-3 wwc:left-3\",\n\t\"top-right\": \"wwc:absolute wwc:top-3 wwc:right-3\",\n\t\"top-left\": \"wwc:absolute wwc:top-3 wwc:left-3\",\n};\n\nconst COLUMNS: Record<1 | 2 | 3, string> = {\n\t1: \"wwc:grid-cols-1\",\n\t2: \"wwc:grid-cols-2\",\n\t3: \"wwc:grid-cols-3\",\n};\n\n/** The swatch + label grid shared by {@link Legend} and {@link TabbedLegend}. */\nfunction LegendItemGrid({\n\titems,\n\tshape = \"square\",\n\tcolumns = 2,\n\tmaxRows,\n}: {\n\titems: LegendItem[];\n\tshape?: LegendShape;\n\tcolumns?: 1 | 2 | 3;\n\t/**\n\t * Cap the grid at this many rows and flow overflow into new columns (grows horizontally).\n\t * Overrides `columns` when set.\n\t */\n\tmaxRows?: number;\n}) {\n\t// When capped, fill top-to-bottom into `maxRows` rows, then wrap into extra columns.\n\tconst rowCapped = maxRows != null;\n\tconst rows = rowCapped ? Math.min(maxRows, Math.max(items.length, 1)) : undefined;\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:grid wwc:gap-y-1.5\",\n\t\t\t\trowCapped ? \"wwc:grid-flow-col wwc:gap-x-5\" : cn(\"wwc:gap-x-3\", COLUMNS[columns]),\n\t\t\t)}\n\t\t\tstyle={rowCapped ? {gridTemplateRows: `repeat(${rows}, minmax(0, auto))`} : undefined}\n\t\t>\n\t\t\t{items.map((item) => (\n\t\t\t\t<div key={item.id} className=\"wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-2\">\n\t\t\t\t\t<span\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:h-2.5 wwc:w-2.5 wwc:shrink-0 wwc:border\",\n\t\t\t\t\t\t\tshape === \"circle\" ? \"wwc:rounded-full\" : \"wwc:rounded-sm\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tbackgroundColor: item.color,\n\t\t\t\t\t\t\tborderColor: item.borderColor ?? item.color,\n\t\t\t\t\t\t\topacity: item.opacity ?? 1,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"wwc:min-w-0\">\n\t\t\t\t\t\t<p className=\"wwc:truncate wwc:text-sm wwc:font-medium wwc:text-foreground\">{item.label}</p>\n\t\t\t\t\t\t{item.description ? (\n\t\t\t\t\t\t\t<p className=\"wwc:truncate wwc:text-sm wwc:text-muted-foreground\">{item.description}</p>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\n/**\n * A compact key mapping swatch colors to labels. Floats over a canvas/map (bottom-right by default)\n * or embeds inline (`placement=\"static\"`), and can minimize to a small button to get out of the way.\n */\nconst Legend = React.forwardRef<HTMLDivElement, LegendProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\ttitle,\n\t\t\titems,\n\t\t\tshape = \"square\",\n\t\t\tcolumns = 2,\n\t\t\tplacement = \"bottom-right\",\n\t\t\tstatus,\n\t\t\tfootnote,\n\t\t\tcollapsible = true,\n\t\t\tcollapsed: collapsedProp,\n\t\t\tdefaultCollapsed = false,\n\t\t\tonCollapsedChange,\n\t\t\tcollapsedLabel = \"Legend\",\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [collapsed, setCollapsed] = useControllable<boolean>(collapsedProp, defaultCollapsed, onCollapsedChange);\n\t\tconst floating = placement !== \"static\";\n\t\tconst positionClass = placement === \"static\" ? \"\" : PLACEMENT[placement];\n\n\t\tif (collapsible && collapsed) {\n\t\t\treturn (\n\t\t\t\t<button\n\t\t\t\t\tref={ref as unknown as React.Ref<HTMLButtonElement>}\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tonClick={() => setCollapsed(false)}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:pointer-events-auto wwc:z-10 wwc:rounded-lg wwc:border wwc:bg-card/95 wwc:px-2 wwc:py-1 wwc:text-sm wwc:font-medium wwc:shadow-sm wwc:hover:bg-accent\",\n\t\t\t\t\t\tpositionClass,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...(rest as React.HTMLAttributes<HTMLButtonElement>)}\n\t\t\t\t>\n\t\t\t\t\t{collapsedLabel}\n\t\t\t\t</button>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:z-10 wwc:max-w-[18rem] wwc:rounded-lg wwc:border wwc:bg-card/95 wwc:p-2 wwc:text-sm wwc:shadow-sm\",\n\t\t\t\t\tfloating && \"wwc:pointer-events-auto\",\n\t\t\t\t\tpositionClass,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"wwc:mb-1 wwc:flex wwc:items-center wwc:justify-between wwc:gap-3\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t<p className=\"wwc:font-medium wwc:text-foreground\">{title}</p>\n\t\t\t\t\t\t{status ? <span className=\"wwc:text-sm wwc:text-muted-foreground\">{status}</span> : null}\n\t\t\t\t\t</div>\n\t\t\t\t\t{collapsible ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tclassName=\"wwc:h-6 wwc:w-6 wwc:shrink-0\"\n\t\t\t\t\t\t\taria-label=\"Minimize legend\"\n\t\t\t\t\t\t\tonClick={() => setCollapsed(true)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ChevronUp className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\n\t\t\t\t<LegendItemGrid items={items} shape={shape} columns={columns} />\n\n\t\t\t\t{footnote ? (\n\t\t\t\t\t<p className=\"wwc:mt-2 wwc:text-sm wwc:leading-snug wwc:text-muted-foreground\">{footnote}</p>\n\t\t\t\t) : null}\n\t\t\t</div>\n\t\t);\n\t},\n);\nLegend.displayName = \"Legend\";\n\n/* -----------------------------------------------------------------------------\n * TabbedLegend\n * -------------------------------------------------------------------------- */\n\n/** One tab in a {@link TabbedLegend}: a label + its own set of legend items. */\nexport interface LegendTab {\n\tid: string;\n\t/** Tab label. */\n\tlabel: React.ReactNode;\n\t/** This tab's swatch/label rows. */\n\titems: LegendItem[];\n\t/** Optional note under this tab's grid. */\n\tfootnote?: React.ReactNode;\n}\n\nexport interface TabbedLegendProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"title\"> {\n\t/** Header title (the \"view mode\" heading). */\n\ttitle: string;\n\t/** Tabs, each showing a different legend for what's selected. */\n\ttabs: LegendTab[];\n\t/** Active tab id (controlled). */\n\tvalue?: string;\n\t/** Initial active tab id. Defaults to the first tab. */\n\tdefaultValue?: string;\n\tonValueChange?: (value: string) => void;\n\t/** Swatch shape. Default `\"square\"`. */\n\tshape?: LegendShape;\n\t/** Cap each tab at this many rows; extra items flow into new columns (grows horizontally). Default 4. */\n\tmaxRows?: number;\n\t/** Floating position over a canvas, or `\"static\"` to render inline. Default `\"bottom-right\"`. */\n\tplacement?: LegendPlacement;\n\t/** Small status text beside the title. */\n\tstatus?: React.ReactNode;\n\t/** Show the minimize control + collapsed reopen button. Default true. */\n\tcollapsible?: boolean;\n\tcollapsed?: boolean;\n\tdefaultCollapsed?: boolean;\n\tonCollapsedChange?: (collapsed: boolean) => void;\n\t/** Accessible label for the collapsed tab bar. Default = `title`. */\n\tcollapsedLabel?: string;\n}\n\n/**\n * A {@link Legend} whose body is split across tabs. The header (\"view mode\") can collapse to a chip,\n * and each tab swaps in its own colors and rows — use it to key different overlays depending on\n * what's selected on the canvas/map.\n */\nconst TabbedLegend = React.forwardRef<HTMLDivElement, TabbedLegendProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\ttitle,\n\t\t\ttabs,\n\t\t\tvalue,\n\t\t\tdefaultValue,\n\t\t\tonValueChange,\n\t\t\tshape = \"square\",\n\t\t\tmaxRows = 4,\n\t\t\tplacement = \"bottom-right\",\n\t\t\tstatus,\n\t\t\tcollapsible = true,\n\t\t\tcollapsed: collapsedProp,\n\t\t\tdefaultCollapsed = false,\n\t\t\tonCollapsedChange,\n\t\t\tcollapsedLabel,\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst [collapsed, setCollapsed] = useControllable<boolean>(collapsedProp, defaultCollapsed, onCollapsedChange);\n\t\tconst floating = placement !== \"static\";\n\t\tconst positionClass = placement === \"static\" ? \"\" : PLACEMENT[placement];\n\t\tconst firstTab = tabs[0]?.id;\n\t\t// Active tab is owned here so switching tabs works while collapsed and persists when expanded.\n\t\tconst [activeTab, setActiveTab] = useControllable<string>(value, defaultValue ?? firstTab ?? \"\", onValueChange);\n\n\t\t// Collapsed: keep the tab bar interactive (switch the active view) plus an expand control — the\n\t\t// tab content (swatch grids) is hidden until expanded.\n\t\tif (collapsible && collapsed) {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tref={ref}\n\t\t\t\t\taria-label={collapsedLabel ?? title}\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"wwc:pointer-events-auto wwc:z-10 wwc:flex wwc:items-center wwc:gap-1 wwc:rounded-lg wwc:border wwc:bg-card/95 wwc:px-2 wwc:py-1 wwc:shadow-sm\",\n\t\t\t\t\t\tpositionClass,\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\t{...rest}\n\t\t\t\t>\n\t\t\t\t\t{/* Collapsed keeps the underline tabs but drops the underline itself (list border + active\n\t\t\t\t\t    indicator) — the active view reads via its bold/dark label instead. */}\n\t\t\t\t\t<Tabs variant=\"underline\" size=\"sm\" value={activeTab} onValueChange={setActiveTab}>\n\t\t\t\t\t\t<TabsList className=\"wwc:border-b-0\">\n\t\t\t\t\t\t\t{tabs.map((tab) => (\n\t\t\t\t\t\t\t\t<TabsTrigger\n\t\t\t\t\t\t\t\t\tkey={tab.id}\n\t\t\t\t\t\t\t\t\tvalue={tab.id}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:text-sm wwc:data-[state=active]:border-transparent\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{tab.label}\n\t\t\t\t\t\t\t\t</TabsTrigger>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TabsList>\n\t\t\t\t\t</Tabs>\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\ticon\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tclassName=\"wwc:h-6 wwc:w-6 wwc:shrink-0\"\n\t\t\t\t\t\taria-label=\"Expand legend\"\n\t\t\t\t\t\tonClick={() => setCollapsed(false)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChevronDown className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t// Grow horizontally as tabs overflow past `maxRows`, up to a sane cap.\n\t\t\t\t\t\"wwc:z-10 wwc:w-max wwc:max-w-[34rem] wwc:rounded-lg wwc:border wwc:bg-card/95 wwc:p-2 wwc:text-sm wwc:shadow-sm\",\n\t\t\t\t\tfloating && \"wwc:pointer-events-auto\",\n\t\t\t\t\tpositionClass,\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...rest}\n\t\t\t>\n\t\t\t\t<div className=\"wwc:mb-1.5 wwc:flex wwc:items-center wwc:justify-between wwc:gap-3\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t<p className=\"wwc:font-medium wwc:text-foreground\">{title}</p>\n\t\t\t\t\t\t{status ? <span className=\"wwc:text-sm wwc:text-muted-foreground\">{status}</span> : null}\n\t\t\t\t\t</div>\n\t\t\t\t\t{collapsible ? (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\ticon\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tclassName=\"wwc:h-6 wwc:w-6 wwc:shrink-0\"\n\t\t\t\t\t\t\taria-label=\"Minimize legend\"\n\t\t\t\t\t\t\tonClick={() => setCollapsed(true)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ChevronUp className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\n\t\t\t\t<Tabs variant=\"underline\" size=\"sm\" value={activeTab} onValueChange={setActiveTab}>\n\t\t\t\t\t<div className=\"wwc:mb-2 wwc:flex wwc:items-center wwc:gap-1\">\n\t\t\t\t\t\t<TabsList>\n\t\t\t\t\t\t\t{tabs.map((tab) => (\n\t\t\t\t\t\t\t\t<TabsTrigger key={tab.id} value={tab.id} className=\"wwc:text-sm\">\n\t\t\t\t\t\t\t\t\t{tab.label}\n\t\t\t\t\t\t\t\t</TabsTrigger>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</TabsList>\n\t\t\t\t\t\t{/* Invisible stand-in for the collapsed view's expand toggle, so the tab row — and thus the\n\t\t\t\t\t\t    panel — stays at least as wide when expanded as it is when collapsed. */}\n\t\t\t\t\t\t{collapsible ? <span aria-hidden=\"true\" className=\"wwc:h-6 wwc:w-6 wwc:shrink-0\" /> : null}\n\t\t\t\t\t</div>\n\t\t\t\t\t{tabs.map((tab) => (\n\t\t\t\t\t\t<TabsContent key={tab.id} value={tab.id} className=\"wwc:mt-0\">\n\t\t\t\t\t\t\t<LegendItemGrid items={tab.items} shape={shape} maxRows={maxRows} />\n\t\t\t\t\t\t\t{tab.footnote ? (\n\t\t\t\t\t\t\t\t<p className=\"wwc:mt-2 wwc:text-sm wwc:leading-snug wwc:text-muted-foreground\">{tab.footnote}</p>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</TabsContent>\n\t\t\t\t\t))}\n\t\t\t\t</Tabs>\n\t\t\t</div>\n\t\t);\n\t},\n);\nTabbedLegend.displayName = \"TabbedLegend\";\n\nexport {Legend, TabbedLegend};\n"],"mappings":"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"}

package/dist/lightbox.d.mts

@@ -0,0 +1,28 @@
+import * as React from "react";
+//#region src/lightbox.d.ts
+export interface LightboxImage {
+  src: string;
+  alt?: string;
+  caption?: string;
+}
+export interface LightboxProps {
+  /** Whether the lightbox is open */
+  open: boolean;
+  /** Callback when the lightbox should close */
+  onClose: () => void;
+  /** Array of images to display */
+  images: LightboxImage[];
+  /** Current image index */
+  currentIndex?: number;
+  /** Callback when index changes */
+  onIndexChange?: (index: number) => void;
+  /** Show navigation controls */
+  showControls?: boolean;
+  /** Show zoom controls */
+  showZoom?: boolean;
+}
+/** A lightbox component for viewing images in fullscreen. */
+declare const Lightbox: React.ForwardRefExoticComponent<LightboxProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Lightbox };
+//# sourceMappingURL=lightbox.d.mts.map

package/dist/lightbox.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightbox.d.mts","names":[],"sources":["../src/lightbox.tsx"],"mappings":";;iBAOiB;EAChB;EACA;EACA;;iBAGgB;;EAEhB;;EAEA;;EAEA,QAAQ;;EAER;;EAEA,iBAAiB;;EAEjB;;EAEA;;;cAIK,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}

package/dist/lightbox.mjs

@@ -0,0 +1,142 @@
+import { IconButton } from "./icon-button.mjs";
+import { Overlay } from "./overlay.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut } from "lucide-react";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/lightbox.tsx
+/** A lightbox component for viewing images in fullscreen. */
+const Lightbox = React.forwardRef(({ open, onClose, images, currentIndex = 0, onIndexChange, showControls = true, showZoom = true }, ref) => {
+	const [index, setIndex] = React.useState(currentIndex);
+	const [zoom, setZoom] = React.useState(1);
+	React.useEffect(() => {
+		setIndex(currentIndex);
+	}, [currentIndex]);
+	React.useEffect(() => {
+		if (open) document.body.style.overflow = "hidden";
+		else {
+			document.body.style.overflow = "";
+			setZoom(1);
+		}
+		return () => {
+			document.body.style.overflow = "";
+		};
+	}, [open]);
+	const handlePrevious = () => {
+		const newIndex = index > 0 ? index - 1 : images.length - 1;
+		setIndex(newIndex);
+		onIndexChange?.(newIndex);
+		setZoom(1);
+	};
+	const handleNext = () => {
+		const newIndex = index < images.length - 1 ? index + 1 : 0;
+		setIndex(newIndex);
+		onIndexChange?.(newIndex);
+		setZoom(1);
+	};
+	const handleZoomIn = () => {
+		setZoom((prev) => Math.min(prev + .25, 3));
+	};
+	const handleZoomOut = () => {
+		setZoom((prev) => Math.max(prev - .25, .5));
+	};
+	React.useEffect(() => {
+		const handleKeyDown = (e) => {
+			if (!open) return;
+			if (e.key === "Escape") onClose();
+			if (e.key === "ArrowLeft") handlePrevious();
+			if (e.key === "ArrowRight") handleNext();
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [open, index]);
+	if (!open || images.length === 0) return null;
+	const currentImage = images[index];
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Overlay, {
+		open,
+		onClose,
+		variant: "dark"
+	}), /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "wwc:fixed wwc:inset-0 wwc:z-50 wwc:flex wwc:items-center wwc:justify-center wwc:p-4",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:top-4 wwc:right-4 wwc:z-10",
+				children: /* @__PURE__ */ jsx(IconButton, {
+					variant: "ghost",
+					size: "lg",
+					onClick: onClose,
+					tooltip: "Close (Esc)",
+					children: /* @__PURE__ */ jsx(X, { className: "wwc:text-white" })
+				})
+			}),
+			showZoom && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:absolute wwc:top-4 wwc:left-4 wwc:z-10 wwc:flex wwc:gap-2",
+				children: [
+					/* @__PURE__ */ jsx(IconButton, {
+						variant: "ghost",
+						size: "md",
+						onClick: handleZoomOut,
+						tooltip: "Zoom out",
+						children: /* @__PURE__ */ jsx(ZoomOut, { className: "wwc:text-white" })
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						variant: "ghost",
+						size: "md",
+						onClick: handleZoomIn,
+						tooltip: "Zoom in",
+						children: /* @__PURE__ */ jsx(ZoomIn, { className: "wwc:text-white" })
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:items-center wwc:px-3 wwc:text-white wwc:text-sm",
+						children: [Math.round(zoom * 100), "%"]
+					})
+				]
+			}),
+			showControls && images.length > 1 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:left-4 wwc:top-1/2 wwc:-translate-y-1/2",
+				children: /* @__PURE__ */ jsx(IconButton, {
+					variant: "ghost",
+					size: "lg",
+					onClick: handlePrevious,
+					tooltip: "Previous (←)",
+					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "wwc:text-white wwc:h-8 wwc:w-8" })
+				})
+			}), /* @__PURE__ */ jsx("div", {
+				className: "wwc:absolute wwc:right-4 wwc:top-1/2 wwc:-translate-y-1/2",
+				children: /* @__PURE__ */ jsx(IconButton, {
+					variant: "ghost",
+					size: "lg",
+					onClick: handleNext,
+					tooltip: "Next (→)",
+					children: /* @__PURE__ */ jsx(ChevronRight, { className: "wwc:text-white wwc:h-8 wwc:w-8" })
+				})
+			})] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:flex-col wwc:items-center wwc:gap-4 wwc:max-h-full",
+				children: [/* @__PURE__ */ jsx("img", {
+					src: currentImage.src,
+					alt: currentImage.alt || `Image ${index + 1}`,
+					className: cn("wwc:max-h-[calc(100vh-8rem)] wwc:max-w-full wwc:object-contain wwc:transition-transform wwc:duration-200"),
+					style: { transform: `scale(${zoom})` }
+				}), currentImage.caption && /* @__PURE__ */ jsx("p", {
+					className: "wwc:text-white wwc:text-sm wwc:text-center",
+					children: currentImage.caption
+				})]
+			}),
+			images.length > 1 && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:absolute wwc:bottom-4 wwc:left-1/2 wwc:-translate-x-1/2 wwc:text-white wwc:text-sm wwc:bg-black/50 wwc:px-4 wwc:py-2 wwc:rounded-full",
+				children: [
+					index + 1,
+					" / ",
+					images.length
+				]
+			})
+		]
+	})] });
+});
+Lightbox.displayName = "Lightbox";
+//#endregion
+export { Lightbox };
+
+//# sourceMappingURL=lightbox.mjs.map

package/dist/lightbox.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"lightbox.mjs","names":[],"sources":["../src/lightbox.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {IconButton} from \"./icon-button\";\nimport {Overlay} from \"./overlay\";\n\nexport interface LightboxImage {\n\tsrc: string;\n\talt?: string;\n\tcaption?: string;\n}\n\nexport interface LightboxProps {\n\t/** Whether the lightbox is open */\n\topen: boolean;\n\t/** Callback when the lightbox should close */\n\tonClose: () => void;\n\t/** Array of images to display */\n\timages: LightboxImage[];\n\t/** Current image index */\n\tcurrentIndex?: number;\n\t/** Callback when index changes */\n\tonIndexChange?: (index: number) => void;\n\t/** Show navigation controls */\n\tshowControls?: boolean;\n\t/** Show zoom controls */\n\tshowZoom?: boolean;\n}\n\n/** A lightbox component for viewing images in fullscreen. */\nconst Lightbox = React.forwardRef<HTMLDivElement, LightboxProps>(\n\t({open, onClose, images, currentIndex = 0, onIndexChange, showControls = true, showZoom = true}, ref) => {\n\t\tconst [index, setIndex] = React.useState(currentIndex);\n\t\tconst [zoom, setZoom] = React.useState(1);\n\n\t\tReact.useEffect(() => {\n\t\t\tsetIndex(currentIndex);\n\t\t}, [currentIndex]);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (open) {\n\t\t\t\tdocument.body.style.overflow = \"hidden\";\n\t\t\t} else {\n\t\t\t\tdocument.body.style.overflow = \"\";\n\t\t\t\tsetZoom(1);\n\t\t\t}\n\t\t\treturn () => {\n\t\t\t\tdocument.body.style.overflow = \"\";\n\t\t\t};\n\t\t}, [open]);\n\n\t\tconst handlePrevious = () => {\n\t\t\tconst newIndex = index > 0 ? index - 1 : images.length - 1;\n\t\t\tsetIndex(newIndex);\n\t\t\tonIndexChange?.(newIndex);\n\t\t\tsetZoom(1);\n\t\t};\n\n\t\tconst handleNext = () => {\n\t\t\tconst newIndex = index < images.length - 1 ? index + 1 : 0;\n\t\t\tsetIndex(newIndex);\n\t\t\tonIndexChange?.(newIndex);\n\t\t\tsetZoom(1);\n\t\t};\n\n\t\tconst handleZoomIn = () => {\n\t\t\tsetZoom((prev) => Math.min(prev + 0.25, 3));\n\t\t};\n\n\t\tconst handleZoomOut = () => {\n\t\t\tsetZoom((prev) => Math.max(prev - 0.25, 0.5));\n\t\t};\n\n\t\tReact.useEffect(() => {\n\t\t\tconst handleKeyDown = (e: KeyboardEvent) => {\n\t\t\t\tif (!open) return;\n\t\t\t\tif (e.key === \"Escape\") onClose();\n\t\t\t\tif (e.key === \"ArrowLeft\") handlePrevious();\n\t\t\t\tif (e.key === \"ArrowRight\") handleNext();\n\t\t\t};\n\n\t\t\twindow.addEventListener(\"keydown\", handleKeyDown);\n\t\t\treturn () => window.removeEventListener(\"keydown\", handleKeyDown);\n\t\t}, [open, index]);\n\n\t\tif (!open || images.length === 0) return null;\n\n\t\tconst currentImage = images[index];\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<Overlay open={open} onClose={onClose} variant=\"dark\" />\n\t\t\t\t<div ref={ref} className=\"wwc:fixed wwc:inset-0 wwc:z-50 wwc:flex wwc:items-center wwc:justify-center wwc:p-4\">\n\t\t\t\t\t{/* Close Button */}\n\t\t\t\t\t<div className=\"wwc:absolute wwc:top-4 wwc:right-4 wwc:z-10\">\n\t\t\t\t\t\t<IconButton variant=\"ghost\" size=\"lg\" onClick={onClose} tooltip=\"Close (Esc)\">\n\t\t\t\t\t\t\t<X className=\"wwc:text-white\" />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Zoom Controls */}\n\t\t\t\t\t{showZoom && (\n\t\t\t\t\t\t<div className=\"wwc:absolute wwc:top-4 wwc:left-4 wwc:z-10 wwc:flex wwc:gap-2\">\n\t\t\t\t\t\t\t<IconButton variant=\"ghost\" size=\"md\" onClick={handleZoomOut} tooltip=\"Zoom out\">\n\t\t\t\t\t\t\t\t<ZoomOut className=\"wwc:text-white\" />\n\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t\t<IconButton variant=\"ghost\" size=\"md\" onClick={handleZoomIn} tooltip=\"Zoom in\">\n\t\t\t\t\t\t\t\t<ZoomIn className=\"wwc:text-white\" />\n\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:px-3 wwc:text-white wwc:text-sm\">\n\t\t\t\t\t\t\t\t{Math.round(zoom * 100)}%\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Navigation Controls */}\n\t\t\t\t\t{showControls && images.length > 1 && (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<div className=\"wwc:absolute wwc:left-4 wwc:top-1/2 wwc:-translate-y-1/2\">\n\t\t\t\t\t\t\t\t<IconButton variant=\"ghost\" size=\"lg\" onClick={handlePrevious} tooltip=\"Previous (←)\">\n\t\t\t\t\t\t\t\t\t<ChevronLeft className=\"wwc:text-white wwc:h-8 wwc:w-8\" />\n\t\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"wwc:absolute wwc:right-4 wwc:top-1/2 wwc:-translate-y-1/2\">\n\t\t\t\t\t\t\t\t<IconButton variant=\"ghost\" size=\"lg\" onClick={handleNext} tooltip=\"Next (→)\">\n\t\t\t\t\t\t\t\t\t<ChevronRight className=\"wwc:text-white wwc:h-8 wwc:w-8\" />\n\t\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{/* Image */}\n\t\t\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:items-center wwc:gap-4 wwc:max-h-full\">\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={currentImage.src}\n\t\t\t\t\t\t\talt={currentImage.alt || `Image ${index + 1}`}\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"wwc:max-h-[calc(100vh-8rem)] wwc:max-w-full wwc:object-contain wwc:transition-transform wwc:duration-200\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\tstyle={{transform: `scale(${zoom})`}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{currentImage.caption && (\n\t\t\t\t\t\t\t<p className=\"wwc:text-white wwc:text-sm wwc:text-center\">{currentImage.caption}</p>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Counter */}\n\t\t\t\t\t{images.length > 1 && (\n\t\t\t\t\t\t<div className=\"wwc:absolute wwc:bottom-4 wwc:left-1/2 wwc:-translate-x-1/2 wwc:text-white wwc:text-sm wwc:bg-black/50 wwc:px-4 wwc:py-2 wwc:rounded-full\">\n\t\t\t\t\t\t\t{index + 1} / {images.length}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</>\n\t\t);\n\t},\n);\nLightbox.displayName = \"Lightbox\";\n\nexport {Lightbox};\n"],"mappings":"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"}

package/dist/link-type-detail.d.mts

@@ -0,0 +1,73 @@
+import * as React from "react";
+//#region src/link-type-detail.d.ts
+export declare const LINK_CARDINALITY_LABELS: {
+  value: string;
+  short: string;
+}[];
+export declare const LINK_VISIBILITIES: string[];
+export declare const LINK_STATUSES: string[];
+/** One end of a link type. `objectTypeLabel` is what the user sees; `objectTypeId` is the host's key. */
+export interface LinkTypeSide {
+  objectTypeId?: string;
+  objectTypeLabel: string;
+  apiName: string;
+  displayName: string;
+  visibility: string;
+}
+/** The neutral link-type shape both the workforce and WC3 ontologies map onto. */
+export interface LinkTypeModel {
+  id: string;
+  /** Resource identifier, shown under the title when present. */
+  rid?: string;
+  sideA: LinkTypeSide;
+  sideB: LinkTypeSide;
+  cardinality: string;
+  /** Human-readable backing, e.g. "Foreign key (crew_id → crew_id)". */
+  backing: string;
+  status: string;
+  description?: string;
+  instanceLinks?: number;
+}
+/** A sample of the rows a link type actually connects, listed in the Instance links card. */
+export interface LinkInstanceRow {
+  aCode: string;
+  aName: string;
+  bCode: string;
+  bName: string;
+}
+export interface LinkTypeDetailSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  linkType: LinkTypeModel | null;
+  /** Glyph for an object type, looked up by its label. Falls back to a generic link icon. */
+  iconFor?: (objectTypeLabel: string) => React.ComponentType<{
+    className?: string;
+  }> | undefined;
+  /** Sample instance links. Omit to hide the sample list and show only the count. */
+  instanceRows?: LinkInstanceRow[];
+  cardinalities?: {
+    value: string;
+    short: string;
+  }[];
+  statuses?: string[];
+  visibilities?: string[];
+  /** Fired with the edited link type when "Save changes" is pressed. */
+  onSave?: (next: LinkTypeModel) => void;
+  /** Opens the graph explorer focused on this relationship. Hides the button when omitted. */
+  onTraverse?: () => void;
+  /** Host-specific sections appended below the standard cards (e.g. a danger zone). */
+  extra?: React.ReactNode;
+}
+/** Full link-type editor rendered as a 3/4-width sheet. */
+export declare function LinkTypeDetailSheet({ open, onOpenChange, linkType, iconFor, instanceRows, cardinalities, statuses, visibilities, onSave, onTraverse, extra }: LinkTypeDetailSheetProps): import("react/jsx-runtime").JSX.Element | null;
+export interface LinkTypeDetailPageProps extends Omit<LinkTypeDetailSheetProps, "open" | "onOpenChange" | "linkType"> {
+  linkType: LinkTypeModel;
+  onBack: () => void;
+}
+/**
+ * The same editor as {@link LinkTypeDetailSheet}, laid out as a full page with a fixed header and a
+ * vertical SideMenu — matching the object-type drill-in. Hosts that prefer an overlay keep the sheet.
+ */
+export declare function LinkTypeDetailPage({ linkType, iconFor, instanceRows, cardinalities, statuses, visibilities, onBack, onSave, onTraverse, extra }: LinkTypeDetailPageProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=link-type-detail.d.mts.map

package/dist/link-type-detail.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-type-detail.d.mts","names":[],"sources":["../src/link-type-detail.tsx"],"mappings":";;qBAyBa;EAA0B;EAAe;;qBAOzC;qBACA;;iBAGI;EAChB;EACA;EACA;EACA;EACA;;;iBAIgB;EAChB;;EAEA;EACA,OAAO;EACP,OAAO;EACP;;EAEA;EACA;EACA;EACA;;;iBAIgB;EAChB;EACA;EACA;EACA;;iBAGgB;EAChB;EACA,eAAe;EACf,UAAU;;EAEV,WAAW,4BAA4B,MAAM;IAAe;;;EAE5D,eAAe;EACf;IAAiB;IAAe;;EAChC;EACA;;EAEA,UAAU,MAAM;;EAEhB;;EAEA,QAAQ,MAAM;;;wBA+DC,sBACf,MACA,cACA,UACA,SACA,cACA,eACA,UACA,cACA,QACA,YACA,SACE,uDAAwB,IAAA;iBAgMV,gCAAgC,KAAK;EACrD,UAAU;EACV;;;;;;wBAOe,qBACf,UACA,SACA,cACA,eACA,UACA,cACA,QACA,QACA,YACA,SACE,sDAAuB,IAAA"}