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

package/dist/calendar.mjs

@@ -0,0 +1,94 @@
+import { buttonVariants } from "./button.mjs";
+import { ScrollArea } from "./scroll-area.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DayPicker } from "react-day-picker";
+//#region src/calendar.tsx
+const calendarSelectedStyle = `
+.wkc-cal .selected button:hover {
+	background-color: var(--color-primary) !important;
+	color: var(--color-primary-foreground) !important;
+}
+`;
+let calStyleInjected = false;
+function injectCalStyle() {
+	if (calStyleInjected || typeof document === "undefined") return;
+	const s = document.createElement("style");
+	s.textContent = calendarSelectedStyle;
+	document.head.appendChild(s);
+	calStyleInjected = true;
+}
+/** Date picker calendar built on react-day-picker with single, range, and multi-select modes. */
+function Calendar({ className, classNames, showOutsideDays = true, size = "default", ...props }) {
+	injectCalStyle();
+	const compact = size === "compact";
+	return /* @__PURE__ */ jsx(DayPicker, {
+		showOutsideDays,
+		className: cn(compact ? "wwc:p-2" : "wwc:p-3", "wkc-cal", className),
+		classNames: {
+			root: "wwc:w-fit",
+			months: cn("wwc:flex wwc:flex-col wwc:sm:flex-row wwc:relative", compact ? "wwc:gap-2" : "wwc:gap-4"),
+			month: cn("wwc:flex wwc:flex-col", compact ? "wwc:gap-2" : "wwc:gap-4"),
+			month_caption: "wwc:flex wwc:justify-center wwc:pt-1 wwc:relative wwc:items-center wwc:h-7",
+			caption_label: "wwc:text-sm wwc:font-medium",
+			dropdowns: "wwc:flex wwc:gap-2",
+			nav: "wwc:absolute wwc:inset-x-0 wwc:top-0 wwc:z-10 wwc:pointer-events-none wwc:flex wwc:items-center wwc:justify-between wwc:px-1 wwc:pt-1",
+			button_previous: cn(buttonVariants({ variant: "outline" }), compact ? "wwc:h-6 wwc:w-6" : "wwc:h-7 wwc:w-7", "wwc:pointer-events-auto wwc:bg-transparent wwc:p-0 wwc:opacity-50 wwc:hover:opacity-100"),
+			button_next: cn(buttonVariants({ variant: "outline" }), compact ? "wwc:h-6 wwc:w-6" : "wwc:h-7 wwc:w-7", "wwc:pointer-events-auto wwc:bg-transparent wwc:p-0 wwc:opacity-50 wwc:hover:opacity-100"),
+			month_grid: cn("wwc:w-full wwc:border-collapse", compact ? "wwc:mt-2" : "wwc:mt-4"),
+			weekdays: "wwc:flex",
+			weekday: cn("wwc:text-muted-foreground wwc:font-normal wwc:text-[0.8rem] wwc:text-center", compact ? "wwc:w-8" : "wwc:w-9"),
+			week: cn("wwc:flex wwc:w-full", compact ? "wwc:mt-1" : "wwc:mt-2"),
+			day: cn("wwc:relative wwc:p-0 wwc:text-center wwc:text-sm wwc:focus-within:relative wwc:focus-within:z-20", "wwc:first:[&:has([aria-selected])]:rounded-l-md wwc:last:[&:has([aria-selected])]:rounded-r-md", "wwc:[&:has([aria-selected])]:bg-accent wwc:[&:has([aria-selected].day-outside)]:bg-accent/50", "wwc:[&:has([aria-selected].day-range-end)]:rounded-r-md"),
+			day_button: cn(buttonVariants({ variant: "ghost" }), compact ? "wwc:h-8 wwc:w-8" : "wwc:h-9 wwc:w-9", "wwc:p-0 wwc:font-normal wwc:aria-selected:opacity-100 wwc:hover:bg-accent wwc:hover:text-accent-foreground"),
+			range_end: "day-range-end",
+			selected: "selected wwc:bg-primary wwc:text-primary-foreground wwc:hover:bg-primary wwc:hover:text-primary-foreground wwc:focus:bg-primary wwc:focus:text-primary-foreground wwc:rounded-md",
+			today: "wwc:bg-accent wwc:text-accent-foreground wwc:rounded-md",
+			outside: "day-outside wwc:text-muted-foreground wwc:opacity-50 wwc:aria-selected:bg-accent/50 wwc:aria-selected:text-muted-foreground",
+			disabled: "wwc:text-muted-foreground wwc:opacity-50",
+			range_middle: "wwc:aria-selected:bg-accent wwc:aria-selected:text-accent-foreground",
+			hidden: "wwc:invisible",
+			...classNames
+		},
+		components: {
+			Chevron: ({ orientation }) => {
+				const chevronSize = compact ? "wwc:h-3.5 wwc:w-3.5" : "wwc:h-4 wwc:w-4";
+				switch (orientation) {
+					case "left": return /* @__PURE__ */ jsx(ChevronLeft, { className: chevronSize });
+					case "right": return /* @__PURE__ */ jsx(ChevronRight, { className: chevronSize });
+					case "up": return /* @__PURE__ */ jsx(ChevronUp, { className: chevronSize });
+					case "down": return /* @__PURE__ */ jsx(ChevronDown, { className: chevronSize });
+					default: return /* @__PURE__ */ jsx(ChevronDown, { className: chevronSize });
+				}
+			},
+			Dropdown: ({ value, onChange, options }) => {
+				const selected = options?.find((option) => option.value === value);
+				const handleChange = (newValue) => {
+					onChange?.({ target: { value: newValue } });
+				};
+				return /* @__PURE__ */ jsxs(Select, {
+					value: value?.toString(),
+					onValueChange: (val) => handleChange(val),
+					children: [/* @__PURE__ */ jsx(SelectTrigger, {
+						className: "wwc:h-8 wwc:w-fit wwc:gap-1 wwc:border-none wwc:px-2 wwc:font-medium wwc:shadow-none wwc:focus:ring-0",
+						children: /* @__PURE__ */ jsx(SelectValue, { children: selected?.label })
+					}), /* @__PURE__ */ jsx(SelectContent, { children: /* @__PURE__ */ jsx(ScrollArea, {
+						className: "wwc:h-60",
+						children: options?.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+							value: option.value.toString(),
+							children: option.label
+						}, option.value))
+					}) })]
+				});
+			}
+		},
+		...props
+	});
+}
+Calendar.displayName = "Calendar";
+//#endregion
+export { Calendar };
+
+//# sourceMappingURL=calendar.mjs.map

package/dist/calendar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.mjs","names":[],"sources":["../src/calendar.tsx"],"sourcesContent":["import type * as React from \"react\";\n\nimport {cn} from \"@corensystem/coren-utils\";\nimport {ChevronDown, ChevronLeft, ChevronRight, ChevronUp} from \"lucide-react\";\nimport {DayPicker, type DropdownProps} from \"react-day-picker\";\n\nimport {buttonVariants} from \"./button\";\nimport {ScrollArea} from \"./scroll-area\";\nimport {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from \"./select\";\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker> & {\n\t/** Visual density. `\"compact\"` shrinks day cells, text, nav, and spacing. */\n\tsize?: \"default\" | \"compact\";\n};\n\nconst calendarSelectedStyle = `\n.wkc-cal .selected button:hover {\n\tbackground-color: var(--color-primary) !important;\n\tcolor: var(--color-primary-foreground) !important;\n}\n`;\n\nlet calStyleInjected = false;\nfunction injectCalStyle() {\n\tif (calStyleInjected || typeof document === \"undefined\") return;\n\tconst s = document.createElement(\"style\");\n\ts.textContent = calendarSelectedStyle;\n\tdocument.head.appendChild(s);\n\tcalStyleInjected = true;\n}\n\n/** Date picker calendar built on react-day-picker with single, range, and multi-select modes. */\nfunction Calendar({className, classNames, showOutsideDays = true, size = \"default\", ...props}: CalendarProps) {\n\tinjectCalStyle();\n\tconst compact = size === \"compact\";\n\treturn (\n\t\t<DayPicker\n\t\t\tshowOutsideDays={showOutsideDays}\n\t\t\tclassName={cn(compact ? \"wwc:p-2\" : \"wwc:p-3\", \"wkc-cal\", className)}\n\t\t\tclassNames={{\n\t\t\t\troot: \"wwc:w-fit\",\n\t\t\t\tmonths: cn(\"wwc:flex wwc:flex-col wwc:sm:flex-row wwc:relative\", compact ? \"wwc:gap-2\" : \"wwc:gap-4\"),\n\t\t\t\tmonth: cn(\"wwc:flex wwc:flex-col\", compact ? \"wwc:gap-2\" : \"wwc:gap-4\"),\n\t\t\t\tmonth_caption: \"wwc:flex wwc:justify-center wwc:pt-1 wwc:relative wwc:items-center wwc:h-7\",\n\t\t\t\tcaption_label: \"wwc:text-sm wwc:font-medium\",\n\t\t\t\tdropdowns: \"wwc:flex wwc:gap-2\",\n\t\t\t\t// react-day-picker v9 renders <nav> BEFORE the month, so the `relative` caption paints over it and\n\t\t\t\t// swallowed every click but the chevrons' bottom 4px (SAF-1748). Raise the nav, but let clicks fall\n\t\t\t\t// through its empty span to the caption so `captionLayout=\"dropdown\"` selects stay reachable.\n\t\t\t\tnav: \"wwc:absolute wwc:inset-x-0 wwc:top-0 wwc:z-10 wwc:pointer-events-none wwc:flex wwc:items-center wwc:justify-between wwc:px-1 wwc:pt-1\",\n\t\t\t\tbutton_previous: cn(\n\t\t\t\t\tbuttonVariants({variant: \"outline\"}),\n\t\t\t\t\tcompact ? \"wwc:h-6 wwc:w-6\" : \"wwc:h-7 wwc:w-7\",\n\t\t\t\t\t\"wwc:pointer-events-auto wwc:bg-transparent wwc:p-0 wwc:opacity-50 wwc:hover:opacity-100\",\n\t\t\t\t),\n\t\t\t\tbutton_next: cn(\n\t\t\t\t\tbuttonVariants({variant: \"outline\"}),\n\t\t\t\t\tcompact ? \"wwc:h-6 wwc:w-6\" : \"wwc:h-7 wwc:w-7\",\n\t\t\t\t\t\"wwc:pointer-events-auto wwc:bg-transparent wwc:p-0 wwc:opacity-50 wwc:hover:opacity-100\",\n\t\t\t\t),\n\t\t\t\tmonth_grid: cn(\"wwc:w-full wwc:border-collapse\", compact ? \"wwc:mt-2\" : \"wwc:mt-4\"),\n\t\t\t\tweekdays: \"wwc:flex\",\n\t\t\t\tweekday: cn(\n\t\t\t\t\t\"wwc:text-muted-foreground wwc:font-normal wwc:text-[0.8rem] wwc:text-center\",\n\t\t\t\t\tcompact ? \"wwc:w-8\" : \"wwc:w-9\",\n\t\t\t\t),\n\t\t\t\tweek: cn(\"wwc:flex wwc:w-full\", compact ? \"wwc:mt-1\" : \"wwc:mt-2\"),\n\t\t\t\tday: cn(\n\t\t\t\t\t\"wwc:relative wwc:p-0 wwc:text-center wwc:text-sm wwc:focus-within:relative wwc:focus-within:z-20\",\n\t\t\t\t\t\"wwc:first:[&:has([aria-selected])]:rounded-l-md wwc:last:[&:has([aria-selected])]:rounded-r-md\",\n\t\t\t\t\t\"wwc:[&:has([aria-selected])]:bg-accent wwc:[&:has([aria-selected].day-outside)]:bg-accent/50\",\n\t\t\t\t\t\"wwc:[&:has([aria-selected].day-range-end)]:rounded-r-md\",\n\t\t\t\t),\n\t\t\t\tday_button: cn(\n\t\t\t\t\tbuttonVariants({variant: \"ghost\"}),\n\t\t\t\t\tcompact ? \"wwc:h-8 wwc:w-8\" : \"wwc:h-9 wwc:w-9\",\n\t\t\t\t\t\"wwc:p-0 wwc:font-normal wwc:aria-selected:opacity-100 wwc:hover:bg-accent wwc:hover:text-accent-foreground\",\n\t\t\t\t),\n\t\t\t\trange_end: \"day-range-end\",\n\t\t\t\tselected:\n\t\t\t\t\t\"selected wwc:bg-primary wwc:text-primary-foreground wwc:hover:bg-primary wwc:hover:text-primary-foreground wwc:focus:bg-primary wwc:focus:text-primary-foreground wwc:rounded-md\",\n\t\t\t\ttoday: \"wwc:bg-accent wwc:text-accent-foreground wwc:rounded-md\",\n\t\t\t\toutside:\n\t\t\t\t\t\"day-outside wwc:text-muted-foreground wwc:opacity-50 wwc:aria-selected:bg-accent/50 wwc:aria-selected:text-muted-foreground\",\n\t\t\t\tdisabled: \"wwc:text-muted-foreground wwc:opacity-50\",\n\t\t\t\trange_middle: \"wwc:aria-selected:bg-accent wwc:aria-selected:text-accent-foreground\",\n\t\t\t\thidden: \"wwc:invisible\",\n\t\t\t\t...classNames,\n\t\t\t}}\n\t\t\tcomponents={{\n\t\t\t\tChevron: ({orientation}) => {\n\t\t\t\t\tconst chevronSize = compact ? \"wwc:h-3.5 wwc:w-3.5\" : \"wwc:h-4 wwc:w-4\";\n\t\t\t\t\tswitch (orientation) {\n\t\t\t\t\t\tcase \"left\":\n\t\t\t\t\t\t\treturn <ChevronLeft className={chevronSize} />;\n\t\t\t\t\t\tcase \"right\":\n\t\t\t\t\t\t\treturn <ChevronRight className={chevronSize} />;\n\t\t\t\t\t\tcase \"up\":\n\t\t\t\t\t\t\treturn <ChevronUp className={chevronSize} />;\n\t\t\t\t\t\tcase \"down\":\n\t\t\t\t\t\t\treturn <ChevronDown className={chevronSize} />;\n\t\t\t\t\t\tdefault:\n\t\t\t\t\t\t\treturn <ChevronDown className={chevronSize} />;\n\t\t\t\t\t}\n\t\t\t\t},\n\t\t\t\tDropdown: ({value, onChange, options}: DropdownProps) => {\n\t\t\t\t\tconst selected = options?.find((option) => option.value === value);\n\t\t\t\t\tconst handleChange = (newValue: string) => {\n\t\t\t\t\t\tconst changeEvent = {\n\t\t\t\t\t\t\ttarget: {value: newValue},\n\t\t\t\t\t\t} as React.ChangeEvent<HTMLSelectElement>;\n\t\t\t\t\t\tonChange?.(changeEvent);\n\t\t\t\t\t};\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Select value={value?.toString()} onValueChange={(val) => handleChange(val)}>\n\t\t\t\t\t\t\t<SelectTrigger className=\"wwc:h-8 wwc:w-fit wwc:gap-1 wwc:border-none wwc:px-2 wwc:font-medium wwc:shadow-none wwc:focus:ring-0\">\n\t\t\t\t\t\t\t\t<SelectValue>{selected?.label}</SelectValue>\n\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t<ScrollArea className=\"wwc:h-60\">\n\t\t\t\t\t\t\t\t\t{options?.map((option) => (\n\t\t\t\t\t\t\t\t\t\t<SelectItem key={option.value} value={option.value.toString()}>\n\t\t\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ScrollArea>\n\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t</Select>\n\t\t\t\t\t);\n\t\t\t\t},\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\nCalendar.displayName = \"Calendar\";\n\nexport {Calendar};\n"],"mappings":";;;;;;;;AAeA,MAAM,wBAAwB;;;;;;AAO9B,IAAI,mBAAmB;AACvB,SAAS,iBAAiB;CACzB,IAAI,oBAAoB,OAAO,aAAa,aAAa;CACzD,MAAM,IAAI,SAAS,cAAc,OAAO;CACxC,EAAE,cAAc;CAChB,SAAS,KAAK,YAAY,CAAC;CAC3B,mBAAmB;AACpB;;AAGA,SAAS,SAAS,EAAC,WAAW,YAAY,kBAAkB,MAAM,OAAO,WAAW,GAAG,SAAuB;CAC7G,eAAe;CACf,MAAM,UAAU,SAAS;CACzB,OACC,oBAAC,WAAD;EACkB;EACjB,WAAW,GAAG,UAAU,YAAY,WAAW,WAAW,SAAS;EACnE,YAAY;GACX,MAAM;GACN,QAAQ,GAAG,sDAAsD,UAAU,cAAc,WAAW;GACpG,OAAO,GAAG,yBAAyB,UAAU,cAAc,WAAW;GACtE,eAAe;GACf,eAAe;GACf,WAAW;GAIX,KAAK;GACL,iBAAiB,GAChB,eAAe,EAAC,SAAS,UAAS,CAAC,GACnC,UAAU,oBAAoB,mBAC9B,yFACD;GACA,aAAa,GACZ,eAAe,EAAC,SAAS,UAAS,CAAC,GACnC,UAAU,oBAAoB,mBAC9B,yFACD;GACA,YAAY,GAAG,kCAAkC,UAAU,aAAa,UAAU;GAClF,UAAU;GACV,SAAS,GACR,+EACA,UAAU,YAAY,SACvB;GACA,MAAM,GAAG,uBAAuB,UAAU,aAAa,UAAU;GACjE,KAAK,GACJ,oGACA,kGACA,gGACA,yDACD;GACA,YAAY,GACX,eAAe,EAAC,SAAS,QAAO,CAAC,GACjC,UAAU,oBAAoB,mBAC9B,4GACD;GACA,WAAW;GACX,UACC;GACD,OAAO;GACP,SACC;GACD,UAAU;GACV,cAAc;GACd,QAAQ;GACR,GAAG;EACJ;EACA,YAAY;GACX,UAAU,EAAC,kBAAiB;IAC3B,MAAM,cAAc,UAAU,wBAAwB;IACtD,QAAQ,aAAR;KACC,KAAK,QACJ,OAAO,oBAAC,aAAD,EAAa,WAAW,YAAc,CAAA;KAC9C,KAAK,SACJ,OAAO,oBAAC,cAAD,EAAc,WAAW,YAAc,CAAA;KAC/C,KAAK,MACJ,OAAO,oBAAC,WAAD,EAAW,WAAW,YAAc,CAAA;KAC5C,KAAK,QACJ,OAAO,oBAAC,aAAD,EAAa,WAAW,YAAc,CAAA;KAC9C,SACC,OAAO,oBAAC,aAAD,EAAa,WAAW,YAAc,CAAA;IAC/C;GACD;GACA,WAAW,EAAC,OAAO,UAAU,cAA4B;IACxD,MAAM,WAAW,SAAS,MAAM,WAAW,OAAO,UAAU,KAAK;IACjE,MAAM,gBAAgB,aAAqB;KAI1C,WAAW,EAFV,QAAQ,EAAC,OAAO,SAAQ,EAEJ,CAAC;IACvB;IACA,OACC,qBAAC,QAAD;KAAQ,OAAO,OAAO,SAAS;KAAG,gBAAgB,QAAQ,aAAa,GAAG;KAA1E,UAAA,CACC,oBAAC,eAAD;MAAe,WAAU;MACxB,UAAA,oBAAC,aAAD,EAAA,UAAc,UAAU,MAAmB,CAAA;KAC7B,CAAA,GACf,oBAAC,eAAD,EAAA,UACC,oBAAC,YAAD;MAAY,WAAU;MACpB,UAAA,SAAS,KAAK,WACd,oBAAC,YAAD;OAA+B,OAAO,OAAO,MAAM,SAAS;OAC1D,UAAA,OAAO;MACG,GAFK,OAAO,KAEZ,CACZ;KACU,CAAA,EACE,CAAA,CACR;;GAEV;EACD;EACA,GAAI;CACJ,CAAA;AAEH;AACA,SAAS,cAAc"}

package/dist/camera-detail-panel.d.mts

@@ -0,0 +1,44 @@
+import { ViolationSummary } from "./violation-list.mjs";
+import * as React from "react";
+//#region src/camera-detail-panel.d.ts
+/** One row in a camera's violation list. Kept as an alias so existing imports still resolve. */
+export type CameraViolation = ViolationSummary;
+export interface CameraDetail {
+  id: string | number;
+  name: string;
+  /** Where it is — a zone name or free text. */
+  location?: string;
+  /** Camera type / model, e.g. "Fixed CCTV". */
+  kind?: string;
+  /** Online / offline etc. Rendered as a neutral badge. */
+  state?: string;
+  /** Still frame for the camera view. Omitted renders the "no preview" placeholder. */
+  thumbnailUrl?: string;
+  /** Marks the feed as live — badges the preview. */
+  live?: boolean;
+}
+export interface CameraDetailPanelProps extends React.HTMLAttributes<HTMLDivElement> {
+  camera: CameraDetail;
+  /** Violations attributed to this camera, newest first. The count badge reads off this list. */
+  violations?: CameraViolation[];
+  /** Drill into one violation — the caller swaps the panel for the ticket and passes `onBack`. */
+  onViolationSelect?: (violation: CameraViolation) => void;
+  onClose?: () => void;
+  /**
+   * Replaces the thumbnail entirely — pass a player here once cameras stream live. The 16:9 frame,
+   * rounding and clipping stay with the panel, so a player only has to fill its box.
+   */
+  preview?: React.ReactNode;
+  /** Panel width in px. Default `340` — matches `ObservationDetailPanel` so the frame never jumps. */
+  width?: number;
+}
+/**
+ * Floating detail for one camera: its fields, then the violations it caught as a selectable list. One
+ * camera commonly accounts for many violations, so the list is the point of the panel — picking a row
+ * drills into that ticket in the same frame, which is why this shares `DetailPanelShell` and its width
+ * with `ObservationDetailPanel`.
+ */
+declare const CameraDetailPanel: React.ForwardRefExoticComponent<CameraDetailPanelProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CameraDetailPanel };
+//# sourceMappingURL=camera-detail-panel.d.mts.map

package/dist/camera-detail-panel.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera-detail-panel.d.mts","names":[],"sources":["../src/camera-detail-panel.tsx"],"mappings":";;;;YASY,kBAAkB;iBAEb;EAChB;EACA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;iBAGgB,+BAA+B,MAAM,eAAe;EACpE,QAAQ;;EAER,aAAa;;EAEb,qBAAqB,WAAW;EAChC;;;;;EAKA,UAAU,MAAM;;EAEhB;;;;;;;;cAkBK,mBAAiB,MAAA,0BAAA,yBAAA,MAAA,cAAA"}

package/dist/camera-detail-panel.mjs

@@ -0,0 +1,105 @@
+import { Badge } from "./badge.mjs";
+import { AspectRatio } from "./aspect-ratio.mjs";
+import { DetailPanelShell } from "./detail-panel-shell.mjs";
+import { ViolationList } from "./violation-list.mjs";
+import { VideoOff } from "lucide-react";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/camera-detail-panel.tsx
+function DetailRow({ label, value }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:items-start wwc:justify-between wwc:gap-3 wwc:text-xs",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "wwc:shrink-0 wwc:text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("span", {
+			className: "wwc:min-w-0 wwc:text-right wwc:font-medium",
+			children: value
+		})]
+	});
+}
+/**
+* Floating detail for one camera: its fields, then the violations it caught as a selectable list. One
+* camera commonly accounts for many violations, so the list is the point of the panel — picking a row
+* drills into that ticket in the same frame, which is why this shares `DetailPanelShell` and its width
+* with `ObservationDetailPanel`.
+*/
+const CameraDetailPanel = React.forwardRef(({ className, camera, violations = [], onViolationSelect, onClose, preview, width = 340, ...props }, ref) => /* @__PURE__ */ jsxs(DetailPanelShell, {
+	ref,
+	className,
+	width,
+	title: camera.name,
+	onClose,
+	meta: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(Badge, {
+		variant: "neutralSoft",
+		children: [
+			violations.length,
+			" violation",
+			violations.length === 1 ? "" : "s"
+		]
+	}), camera.state && /* @__PURE__ */ jsx(Badge, {
+		variant: "outline",
+		children: camera.state
+	})] }),
+	...props,
+	children: [
+		/* @__PURE__ */ jsxs("div", {
+			className: "wwc:relative wwc:overflow-hidden wwc:rounded-md wwc:border wwc:border-border wwc:bg-muted",
+			children: [/* @__PURE__ */ jsx(AspectRatio, {
+				ratio: 16 / 9,
+				children: preview ?? (camera.thumbnailUrl ? /* @__PURE__ */ jsx("img", {
+					src: camera.thumbnailUrl,
+					alt: `${camera.name} view`,
+					className: "wwc:h-full wwc:w-full wwc:object-cover"
+				}) : /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:h-full wwc:w-full wwc:flex-col wwc:items-center wwc:justify-center wwc:gap-1 wwc:text-muted-foreground",
+					children: [/* @__PURE__ */ jsx(VideoOff, { className: "wwc:size-5" }), /* @__PURE__ */ jsx("span", {
+						className: "wwc:text-[11px] wwc:font-medium",
+						children: "No preview"
+					})]
+				}))
+			}), camera.live && /* @__PURE__ */ jsxs("span", {
+				className: "wwc:absolute wwc:left-1.5 wwc:top-1.5 wwc:flex wwc:items-center wwc:gap-1 wwc:rounded wwc:bg-black/70 wwc:px-1.5 wwc:py-0.5 wwc:text-[10px] wwc:font-semibold wwc:text-white",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "wwc:size-1.5 wwc:rounded-full wwc:bg-red-500",
+					"aria-hidden": "true"
+				}), "LIVE"]
+			})]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "wwc:space-y-1.5",
+			children: [
+				camera.kind && /* @__PURE__ */ jsx(DetailRow, {
+					label: "Type",
+					value: camera.kind
+				}),
+				camera.location && /* @__PURE__ */ jsx(DetailRow, {
+					label: "Location",
+					value: camera.location
+				}),
+				/* @__PURE__ */ jsx(DetailRow, {
+					label: "Violations",
+					value: violations.length
+				})
+			]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "wwc:space-y-1",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "wwc:text-[11px] wwc:font-medium wwc:text-muted-foreground",
+				children: "Related violations"
+			}), violations.length === 0 ? /* @__PURE__ */ jsx("p", {
+				className: "wwc:py-3 wwc:text-center wwc:text-xs wwc:text-muted-foreground",
+				children: "No violations from this camera."
+			}) : /* @__PURE__ */ jsx(ViolationList, {
+				violations,
+				onSelect: onViolationSelect
+			})]
+		})
+	]
+}));
+CameraDetailPanel.displayName = "CameraDetailPanel";
+//#endregion
+export { CameraDetailPanel };
+
+//# sourceMappingURL=camera-detail-panel.mjs.map

package/dist/camera-detail-panel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"camera-detail-panel.mjs","names":[],"sources":["../src/camera-detail-panel.tsx"],"sourcesContent":["import {VideoOff} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {AspectRatio} from \"./aspect-ratio\";\nimport {Badge} from \"./badge\";\nimport {DetailPanelShell} from \"./detail-panel-shell\";\nimport {ViolationList, type ViolationSummary} from \"./violation-list\";\n\n/** One row in a camera's violation list. Kept as an alias so existing imports still resolve. */\nexport type CameraViolation = ViolationSummary;\n\nexport interface CameraDetail {\n\tid: string | number;\n\tname: string;\n\t/** Where it is — a zone name or free text. */\n\tlocation?: string;\n\t/** Camera type / model, e.g. \"Fixed CCTV\". */\n\tkind?: string;\n\t/** Online / offline etc. Rendered as a neutral badge. */\n\tstate?: string;\n\t/** Still frame for the camera view. Omitted renders the \"no preview\" placeholder. */\n\tthumbnailUrl?: string;\n\t/** Marks the feed as live — badges the preview. */\n\tlive?: boolean;\n}\n\nexport interface CameraDetailPanelProps extends React.HTMLAttributes<HTMLDivElement> {\n\tcamera: CameraDetail;\n\t/** Violations attributed to this camera, newest first. The count badge reads off this list. */\n\tviolations?: CameraViolation[];\n\t/** Drill into one violation — the caller swaps the panel for the ticket and passes `onBack`. */\n\tonViolationSelect?: (violation: CameraViolation) => void;\n\tonClose?: () => void;\n\t/**\n\t * Replaces the thumbnail entirely — pass a player here once cameras stream live. The 16:9 frame,\n\t * rounding and clipping stay with the panel, so a player only has to fill its box.\n\t */\n\tpreview?: React.ReactNode;\n\t/** Panel width in px. Default `340` — matches `ObservationDetailPanel` so the frame never jumps. */\n\twidth?: number;\n}\n\nfunction DetailRow({label, value}: {label: string; value: React.ReactNode}) {\n\treturn (\n\t\t<div className=\"wwc:flex wwc:items-start wwc:justify-between wwc:gap-3 wwc:text-xs\">\n\t\t\t<span className=\"wwc:shrink-0 wwc:text-muted-foreground\">{label}</span>\n\t\t\t<span className=\"wwc:min-w-0 wwc:text-right wwc:font-medium\">{value}</span>\n\t\t</div>\n\t);\n}\n\n/**\n * Floating detail for one camera: its fields, then the violations it caught as a selectable list. One\n * camera commonly accounts for many violations, so the list is the point of the panel — picking a row\n * drills into that ticket in the same frame, which is why this shares `DetailPanelShell` and its width\n * with `ObservationDetailPanel`.\n */\nconst CameraDetailPanel = React.forwardRef<HTMLDivElement, CameraDetailPanelProps>(\n\t({className, camera, violations = [], onViolationSelect, onClose, preview, width = 340, ...props}, ref) => (\n\t\t<DetailPanelShell\n\t\t\tref={ref}\n\t\t\tclassName={className}\n\t\t\twidth={width}\n\t\t\ttitle={camera.name}\n\t\t\tonClose={onClose}\n\t\t\tmeta={\n\t\t\t\t<>\n\t\t\t\t\t<Badge variant=\"neutralSoft\">\n\t\t\t\t\t\t{violations.length} violation{violations.length === 1 ? \"\" : \"s\"}\n\t\t\t\t\t</Badge>\n\t\t\t\t\t{camera.state && <Badge variant=\"outline\">{camera.state}</Badge>}\n\t\t\t\t</>\n\t\t\t}\n\t\t\t{...props}\n\t\t>\n\t\t\t{/* 16:9 preview. A still today, the live stream's box tomorrow — the frame does not change. */}\n\t\t\t<div className=\"wwc:relative wwc:overflow-hidden wwc:rounded-md wwc:border wwc:border-border wwc:bg-muted\">\n\t\t\t\t<AspectRatio ratio={16 / 9}>\n\t\t\t\t\t{preview ??\n\t\t\t\t\t\t(camera.thumbnailUrl ? (\n\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\tsrc={camera.thumbnailUrl}\n\t\t\t\t\t\t\t\talt={`${camera.name} view`}\n\t\t\t\t\t\t\t\tclassName=\"wwc:h-full wwc:w-full wwc:object-cover\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:h-full wwc:w-full wwc:flex-col wwc:items-center wwc:justify-center wwc:gap-1 wwc:text-muted-foreground\">\n\t\t\t\t\t\t\t\t<VideoOff className=\"wwc:size-5\" />\n\t\t\t\t\t\t\t\t<span className=\"wwc:text-[11px] wwc:font-medium\">No preview</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t</AspectRatio>\n\t\t\t\t{camera.live && (\n\t\t\t\t\t<span className=\"wwc:absolute wwc:left-1.5 wwc:top-1.5 wwc:flex wwc:items-center wwc:gap-1 wwc:rounded wwc:bg-black/70 wwc:px-1.5 wwc:py-0.5 wwc:text-[10px] wwc:font-semibold wwc:text-white\">\n\t\t\t\t\t\t<span className=\"wwc:size-1.5 wwc:rounded-full wwc:bg-red-500\" aria-hidden=\"true\" />\n\t\t\t\t\t\tLIVE\n\t\t\t\t\t</span>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t<div className=\"wwc:space-y-1.5\">\n\t\t\t\t{camera.kind && <DetailRow label=\"Type\" value={camera.kind} />}\n\t\t\t\t{camera.location && <DetailRow label=\"Location\" value={camera.location} />}\n\t\t\t\t<DetailRow label=\"Violations\" value={violations.length} />\n\t\t\t</div>\n\n\t\t\t<div className=\"wwc:space-y-1\">\n\t\t\t\t<p className=\"wwc:text-[11px] wwc:font-medium wwc:text-muted-foreground\">Related violations</p>\n\t\t\t\t{violations.length === 0 ? (\n\t\t\t\t\t<p className=\"wwc:py-3 wwc:text-center wwc:text-xs wwc:text-muted-foreground\">\n\t\t\t\t\t\tNo violations from this camera.\n\t\t\t\t\t</p>\n\t\t\t\t) : (\n\t\t\t\t\t<ViolationList violations={violations} onSelect={onViolationSelect} />\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</DetailPanelShell>\n\t),\n);\nCameraDetailPanel.displayName = \"CameraDetailPanel\";\n\nexport {CameraDetailPanel};\n"],"mappings":";;;;;;;;AA0CA,SAAS,UAAU,EAAC,OAAO,SAAiD;CAC3E,OACC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,oBAAC,QAAD;GAAM,WAAU;GAA0C,UAAA;EAAY,CAAA,GACtE,oBAAC,QAAD;GAAM,WAAU;GAA8C,UAAA;EAAY,CAAA,CACtE;;AAEP;;;;;;;AAQA,MAAM,oBAAoB,MAAM,YAC9B,EAAC,WAAW,QAAQ,aAAa,CAAC,GAAG,mBAAmB,SAAS,SAAS,QAAQ,KAAK,GAAG,SAAQ,QAClG,qBAAC,kBAAD;CACM;CACM;CACJ;CACP,OAAO,OAAO;CACL;CACT,MACC,qBAAA,YAAA,EAAA,UAAA,CACC,qBAAC,OAAD;EAAO,SAAQ;EAAf,UAAA;GACE,WAAW;GAAO;GAAW,WAAW,WAAW,IAAI,KAAK;EACvD;CACN,CAAA,GAAA,OAAO,SAAS,oBAAC,OAAD;EAAO,SAAQ;EAAW,UAAA,OAAO;CAAa,CAAA,CAC9D,EAAA,CAAA;CAEH,GAAI;CAdL,UAAA;EAiBC,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,oBAAC,aAAD;IAAa,OAAO,KAAK;IACvB,UAAA,YACC,OAAO,eACP,oBAAC,OAAD;KACC,KAAK,OAAO;KACZ,KAAK,GAAG,OAAO,KAAK;KACpB,WAAU;IACV,CAAA,IAED,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,oBAAC,UAAD,EAAU,WAAU,aAAc,CAAA,GAClC,oBAAC,QAAD;MAAM,WAAU;MAAkC,UAAA;KAAgB,CAAA,CAC9D;;GAEK,CAAA,GACZ,OAAO,QACP,qBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACC,oBAAC,QAAD;KAAM,WAAU;KAA+C,eAAY;IAAQ,CAAA,GAAC,MAE/E;GAEH,CAAA,CAAA;;EAEL,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACE,OAAO,QAAQ,oBAAC,WAAD;KAAW,OAAM;KAAO,OAAO,OAAO;IAAO,CAAA;IAC5D,OAAO,YAAY,oBAAC,WAAD;KAAW,OAAM;KAAW,OAAO,OAAO;IAAW,CAAA;IACzE,oBAAC,WAAD;KAAW,OAAM;KAAa,OAAO,WAAW;IAAS,CAAA;GACrD;;EAEL,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACC,oBAAC,KAAD;IAAG,WAAU;IAA4D,UAAA;GAAqB,CAAA,GAC7F,WAAW,WAAW,IACtB,oBAAC,KAAD;IAAG,WAAU;IAAiE,UAAA;GAE3E,CAAA,IAEH,oBAAC,eAAD;IAA2B;IAAY,UAAU;GAAoB,CAAA,CAElE;;CACY;AAEpB,CAAA,CAAA;AACA,kBAAkB,cAAc"}

package/dist/canvas-file-picker.d.mts

@@ -0,0 +1,28 @@
+import * as React from "react";
+//#region src/canvas-file-picker.d.ts
+export interface CanvasFile {
+  id: string;
+  name: string;
+  disabled?: boolean;
+}
+export interface CanvasFilePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Files available for selection. */
+  files: CanvasFile[];
+  /** Currently active file id. */
+  activeFileId: string;
+  onFileChange?: (id: string) => void;
+  /** Render as a searchable Combobox instead of a Select. */
+  searchable?: boolean;
+  /** Placeholder for the searchable input. */
+  searchPlaceholder?: string;
+  /** Trigger width in px. */
+  triggerWidth?: number;
+  /** Trailing chars kept visible during middle truncation. */
+  tailChars?: number;
+  /** Empty-state text for the searchable list. */
+  emptyLabel?: string;
+}
+declare const CanvasFilePicker: React.ForwardRefExoticComponent<CanvasFilePickerProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CanvasFilePicker };
+//# sourceMappingURL=canvas-file-picker.d.mts.map

package/dist/canvas-file-picker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-file-picker.d.mts","names":[],"sources":["../src/canvas-file-picker.tsx"],"mappings":";;iBASiB;EAChB;EACA;EACA;;iBAGgB,8BAA8B,KAAK,MAAM,eAAe;;EAExE,OAAO;;EAEP;EACA,gBAAgB;;EAEhB;;EAEA;;EAEA;;EAEA;;EAEA;;cAkBK,kBAAgB,MAAA,0BAAA,wBAAA,MAAA,cAAA"}

package/dist/canvas-file-picker.mjs

@@ -0,0 +1,90 @@
+import { Button } from "./button.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger } from "./select.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "./command.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/canvas-file-picker.tsx
+function MiddleTruncate({ text, tail }) {
+	if (text.length <= tail) return /* @__PURE__ */ jsx("div", {
+		className: "wwc:min-w-0 wwc:flex-1 wwc:truncate",
+		children: text
+	});
+	const head = text.slice(0, -tail);
+	const tailText = text.slice(-tail);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-center wwc:overflow-hidden",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "wwc:min-w-0 wwc:overflow-hidden wwc:text-ellipsis wwc:whitespace-pre",
+			children: head
+		}), /* @__PURE__ */ jsx("span", {
+			className: "wwc:shrink-0 wwc:whitespace-pre",
+			children: tailText
+		})]
+	});
+}
+const CanvasFilePicker = React.forwardRef(({ className, files, activeFileId, onFileChange, searchable = false, searchPlaceholder = "Search files...", triggerWidth = 180, tailChars = 7, emptyLabel = "No file found.", ...rest }, ref) => {
+	const activeFile = files.find((f) => f.id === activeFileId);
+	const triggerStyle = { width: triggerWidth };
+	const [searchOpen, setSearchOpen] = React.useState(false);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("wwc:flex wwc:items-center", className),
+		...rest,
+		children: searchable ? /* @__PURE__ */ jsxs(Popover, {
+			open: searchOpen,
+			onOpenChange: setSearchOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					role: "combobox",
+					"aria-expanded": searchOpen,
+					className: "wwc:h-9 wwc:gap-2 wwc:overflow-hidden wwc:font-medium",
+					style: triggerStyle,
+					children: [/* @__PURE__ */ jsx(MiddleTruncate, {
+						text: activeFile?.name ?? "",
+						tail: tailChars
+					}), /* @__PURE__ */ jsx(ChevronsUpDown, { className: "wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:opacity-50" })]
+				})
+			}), /* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				className: "wwc:w-auto wwc:min-w-[var(--radix-popover-trigger-width)] wwc:max-w-[480px] wwc:p-0",
+				children: /* @__PURE__ */ jsxs(Command, { children: [/* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder }), /* @__PURE__ */ jsxs(CommandList, { children: [/* @__PURE__ */ jsx(CommandEmpty, { children: emptyLabel }), /* @__PURE__ */ jsx(CommandGroup, { children: files.map((f) => /* @__PURE__ */ jsxs(CommandItem, {
+					value: f.id,
+					disabled: f.disabled,
+					onSelect: (next) => {
+						onFileChange?.(next);
+						setSearchOpen(false);
+					},
+					children: [/* @__PURE__ */ jsx(Check, { className: cn("wwc:mr-2 wwc:h-4 wwc:w-4", f.id === activeFileId ? "wwc:opacity-100" : "wwc:opacity-0") }), f.name]
+				}, f.id)) })] })] })
+			})]
+		}) : /* @__PURE__ */ jsxs(Select, {
+			value: activeFileId,
+			onValueChange: onFileChange,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: "wwc:h-9 wwc:gap-2 wwc:overflow-hidden wwc:font-medium",
+				style: triggerStyle,
+				children: /* @__PURE__ */ jsx(MiddleTruncate, {
+					text: activeFile?.name ?? "",
+					tail: tailChars
+				})
+			}), /* @__PURE__ */ jsx(SelectContent, {
+				className: "wwc:w-auto wwc:max-w-[480px]",
+				children: files.map((f) => /* @__PURE__ */ jsx(SelectItem, {
+					value: f.id,
+					disabled: f.disabled,
+					children: f.name
+				}, f.id))
+			})]
+		})
+	});
+});
+CanvasFilePicker.displayName = "CanvasFilePicker";
+//#endregion
+export { CanvasFilePicker };
+
+//# sourceMappingURL=canvas-file-picker.mjs.map

package/dist/canvas-file-picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-file-picker.mjs","names":[],"sources":["../src/canvas-file-picker.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {Check, ChevronsUpDown} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList} from \"./command\";\nimport {Popover, PopoverContent, PopoverTrigger} from \"./popover\";\nimport {Select, SelectContent, SelectItem, SelectTrigger} from \"./select\";\n\nexport interface CanvasFile {\n\tid: string;\n\tname: string;\n\tdisabled?: boolean;\n}\n\nexport interface CanvasFilePickerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n\t/** Files available for selection. */\n\tfiles: CanvasFile[];\n\t/** Currently active file id. */\n\tactiveFileId: string;\n\tonFileChange?: (id: string) => void;\n\t/** Render as a searchable Combobox instead of a Select. */\n\tsearchable?: boolean;\n\t/** Placeholder for the searchable input. */\n\tsearchPlaceholder?: string;\n\t/** Trigger width in px. */\n\ttriggerWidth?: number;\n\t/** Trailing chars kept visible during middle truncation. */\n\ttailChars?: number;\n\t/** Empty-state text for the searchable list. */\n\temptyLabel?: string;\n}\n\nfunction MiddleTruncate({text, tail}: {text: string; tail: number}) {\n\tif (text.length <= tail) {\n\t\treturn <div className=\"wwc:min-w-0 wwc:flex-1 wwc:truncate\">{text}</div>;\n\t}\n\tconst head = text.slice(0, -tail);\n\tconst tailText = text.slice(-tail);\n\treturn (\n\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-center wwc:overflow-hidden\">\n\t\t\t<span className=\"wwc:min-w-0 wwc:overflow-hidden wwc:text-ellipsis wwc:whitespace-pre\">{head}</span>\n\t\t\t{/* `whitespace-pre` — see MiddleLabel in tree-row.tsx: a boundary space would collapse. */}\n\t\t\t<span className=\"wwc:shrink-0 wwc:whitespace-pre\">{tailText}</span>\n\t\t</div>\n\t);\n}\n\nconst CanvasFilePicker = React.forwardRef<HTMLDivElement, CanvasFilePickerProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tfiles,\n\t\t\tactiveFileId,\n\t\t\tonFileChange,\n\t\t\tsearchable = false,\n\t\t\tsearchPlaceholder = \"Search files...\",\n\t\t\ttriggerWidth = 180,\n\t\t\ttailChars = 7,\n\t\t\temptyLabel = \"No file found.\",\n\t\t\t...rest\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst activeFile = files.find((f) => f.id === activeFileId);\n\t\tconst triggerStyle = {width: triggerWidth};\n\t\tconst [searchOpen, setSearchOpen] = React.useState(false);\n\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(\"wwc:flex wwc:items-center\", className)} {...rest}>\n\t\t\t\t{searchable ? (\n\t\t\t\t\t<Popover open={searchOpen} onOpenChange={setSearchOpen}>\n\t\t\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\trole=\"combobox\"\n\t\t\t\t\t\t\t\taria-expanded={searchOpen}\n\t\t\t\t\t\t\t\tclassName=\"wwc:h-9 wwc:gap-2 wwc:overflow-hidden wwc:font-medium\"\n\t\t\t\t\t\t\t\tstyle={triggerStyle}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<MiddleTruncate text={activeFile?.name ?? \"\"} tail={tailChars} />\n\t\t\t\t\t\t\t\t<ChevronsUpDown className=\"wwc:h-4 wwc:w-4 wwc:shrink-0 wwc:opacity-50\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t</PopoverTrigger>\n\t\t\t\t\t\t<PopoverContent\n\t\t\t\t\t\t\talign=\"start\"\n\t\t\t\t\t\t\tclassName=\"wwc:w-auto wwc:min-w-[var(--radix-popover-trigger-width)] wwc:max-w-[480px] wwc:p-0\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Command>\n\t\t\t\t\t\t\t\t<CommandInput placeholder={searchPlaceholder} />\n\t\t\t\t\t\t\t\t<CommandList>\n\t\t\t\t\t\t\t\t\t<CommandEmpty>{emptyLabel}</CommandEmpty>\n\t\t\t\t\t\t\t\t\t<CommandGroup>\n\t\t\t\t\t\t\t\t\t\t{files.map((f) => (\n\t\t\t\t\t\t\t\t\t\t\t<CommandItem\n\t\t\t\t\t\t\t\t\t\t\t\tkey={f.id}\n\t\t\t\t\t\t\t\t\t\t\t\tvalue={f.id}\n\t\t\t\t\t\t\t\t\t\t\t\tdisabled={f.disabled}\n\t\t\t\t\t\t\t\t\t\t\t\tonSelect={(next) => {\n\t\t\t\t\t\t\t\t\t\t\t\t\tonFileChange?.(next);\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetSearchOpen(false);\n\t\t\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Check\n\t\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"wwc:mr-2 wwc:h-4 wwc:w-4\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tf.id === activeFileId ? \"wwc:opacity-100\" : \"wwc:opacity-0\",\n\t\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t{f.name}\n\t\t\t\t\t\t\t\t\t\t\t</CommandItem>\n\t\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t\t</CommandGroup>\n\t\t\t\t\t\t\t\t</CommandList>\n\t\t\t\t\t\t\t</Command>\n\t\t\t\t\t\t</PopoverContent>\n\t\t\t\t\t</Popover>\n\t\t\t\t) : (\n\t\t\t\t\t<Select value={activeFileId} onValueChange={onFileChange}>\n\t\t\t\t\t\t<SelectTrigger className=\"wwc:h-9 wwc:gap-2 wwc:overflow-hidden wwc:font-medium\" style={triggerStyle}>\n\t\t\t\t\t\t\t<MiddleTruncate text={activeFile?.name ?? \"\"} tail={tailChars} />\n\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t<SelectContent className=\"wwc:w-auto wwc:max-w-[480px]\">\n\t\t\t\t\t\t\t{files.map((f) => (\n\t\t\t\t\t\t\t\t<SelectItem key={f.id} value={f.id} disabled={f.disabled}>\n\t\t\t\t\t\t\t\t\t{f.name}\n\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t</Select>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nCanvasFilePicker.displayName = \"CanvasFilePicker\";\n\nexport {CanvasFilePicker};\n"],"mappings":";;;;;;;;;AAiCA,SAAS,eAAe,EAAC,MAAM,QAAqC;CACnE,IAAI,KAAK,UAAU,MAClB,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAuC,UAAA;CAAU,CAAA;CAExE,MAAM,OAAO,KAAK,MAAM,GAAG,CAAC,IAAI;CAChC,MAAM,WAAW,KAAK,MAAM,CAAC,IAAI;CACjC,OACC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,oBAAC,QAAD;GAAM,WAAU;GAAwE,UAAA;EAAW,CAAA,GAEnG,oBAAC,QAAD;GAAM,WAAU;GAAmC,UAAA;EAAe,CAAA,CAC9D;;AAEP;AAEA,MAAM,mBAAmB,MAAM,YAE7B,EACC,WACA,OACA,cACA,cACA,aAAa,OACb,oBAAoB,mBACpB,eAAe,KACf,YAAY,GACZ,aAAa,kBACb,GAAG,QAEJ,QACI;CACJ,MAAM,aAAa,MAAM,MAAM,MAAM,EAAE,OAAO,YAAY;CAC1D,MAAM,eAAe,EAAC,OAAO,aAAY;CACzC,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,KAAK;CAExD,OACC,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;EACxE,UAAA,aACA,qBAAC,SAAD;GAAS,MAAM;GAAY,cAAc;GAAzC,UAAA,CACC,oBAAC,gBAAD;IAAgB,SAAA;IACf,UAAA,qBAAC,QAAD;KACC,SAAQ;KACR,MAAK;KACL,iBAAe;KACf,WAAU;KACV,OAAO;KALR,UAAA,CAOC,oBAAC,gBAAD;MAAgB,MAAM,YAAY,QAAQ;MAAI,MAAM;KAAY,CAAA,GAChE,oBAAC,gBAAD,EAAgB,WAAU,8CAA+C,CAAA,CAClE;;GACO,CAAA,GAChB,oBAAC,gBAAD;IACC,OAAM;IACN,WAAU;IAEV,UAAA,qBAAC,SAAD,EAAA,UAAA,CACC,oBAAC,cAAD,EAAc,aAAa,kBAAoB,CAAA,GAC/C,qBAAC,aAAD,EAAA,UAAA,CACC,oBAAC,cAAD,EAAA,UAAe,WAAyB,CAAA,GACxC,oBAAC,cAAD,EAAA,UACE,MAAM,KAAK,MACX,qBAAC,aAAD;KAEC,OAAO,EAAE;KACT,UAAU,EAAE;KACZ,WAAW,SAAS;MACnB,eAAe,IAAI;MACnB,cAAc,KAAK;KACpB;KAPD,UAAA,CASC,oBAAC,OAAD,EACC,WAAW,GACV,4BACA,EAAE,OAAO,eAAe,oBAAoB,eAC7C,EACA,CAAA,GACA,EAAE,IACS;IAfP,GAAA,EAAE,EAeK,CACb,EACY,CAAA,CACF,EAAA,CAAA,CACL,EAAA,CAAA;GACM,CAAA,CACR;EAET,CAAA,IAAA,qBAAC,QAAD;GAAQ,OAAO;GAAc,eAAe;GAA5C,UAAA,CACC,oBAAC,eAAD;IAAe,WAAU;IAAwD,OAAO;IACvF,UAAA,oBAAC,gBAAD;KAAgB,MAAM,YAAY,QAAQ;KAAI,MAAM;IAAY,CAAA;GAClD,CAAA,GACf,oBAAC,eAAD;IAAe,WAAU;IACvB,UAAA,MAAM,KAAK,MACX,oBAAC,YAAD;KAAuB,OAAO,EAAE;KAAI,UAAU,EAAE;KAC9C,UAAA,EAAE;IACQ,GAFK,EAAE,EAEP,CACZ;GACa,CAAA,CACR;;CAEL,CAAA;AAEP,CACD;AACA,iBAAiB,cAAc"}

package/dist/canvas-header.d.mts

@@ -0,0 +1,28 @@
+import { WeekSelectorProps } from "./week-selector.mjs";
+import * as React from "react";
+//#region src/canvas-header.d.ts
+export interface CanvasHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Left cluster — typically a `Breadcrumb`. Takes the free width and stays on a single line. */
+  left?: React.ReactNode;
+  /** Optional centered cluster (e.g. a title or a segmented control). */
+  center?: React.ReactNode;
+  /** Right cluster actions (e.g. a full-screen `Button`), placed after the built-in `weekSelector`. */
+  right?: React.ReactNode;
+  /**
+   * A built-in period selector at the start of the right cluster. Pass the WeekSelector's props; it
+   * renders `bare` so it sits flush in the bar. The canvas header and a period selector are paired
+   * frequently, so this composes them for you (override the layout with the `right` slot instead).
+   */
+  weekSelector?: WeekSelectorProps;
+}
+/**
+ * The canvas-level header: a bordered `min-h-12` bar that heads a workspace canvas. It lays out a `left`
+ * cluster (breadcrumb — takes the free width, stays on one line, and truncates its trailing crumb when
+ * tight), an optional centered cluster, and a `right` cluster made of an optional built-in `weekSelector`
+ * plus your `right` actions. Not the platform top bar (`CoreAppTopBar`) — this heads a single canvas;
+ * pair it with `ViewTabBar` (view switching) and `CanvasToolbar` (on-canvas tools).
+ */
+declare const CanvasHeader: React.ForwardRefExoticComponent<CanvasHeaderProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CanvasHeader };
+//# sourceMappingURL=canvas-header.d.mts.map

package/dist/canvas-header.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-header.d.mts","names":[],"sources":["../src/canvas-header.tsx"],"mappings":";;;iBAKiB,0BAA0B,MAAM,eAAe;;EAE/D,OAAO,MAAM;;EAEb,SAAS,MAAM;;EAEf,QAAQ,MAAM;;;;;;EAMd,eAAe;;;;;;;;;cAUV,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA"}

package/dist/canvas-header.mjs

@@ -0,0 +1,42 @@
+import { WeekSelector } from "./week-selector.mjs";
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/canvas-header.tsx
+/**
+* The canvas-level header: a bordered `min-h-12` bar that heads a workspace canvas. It lays out a `left`
+* cluster (breadcrumb — takes the free width, stays on one line, and truncates its trailing crumb when
+* tight), an optional centered cluster, and a `right` cluster made of an optional built-in `weekSelector`
+* plus your `right` actions. Not the platform top bar (`CoreAppTopBar`) — this heads a single canvas;
+* pair it with `ViewTabBar` (view switching) and `CanvasToolbar` (on-canvas tools).
+*/
+const CanvasHeader = React.forwardRef(({ className, left, center, right, weekSelector, ...props }, ref) => {
+	const hasRight = weekSelector != null || right != null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("wwc:flex wwc:min-h-12 wwc:shrink-0 wwc:items-center wwc:gap-4 wwc:border-b wwc:border-border wwc:bg-background wwc:px-3", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-center wwc:overflow-hidden wwc:whitespace-nowrap wwc:[&>*]:min-w-0 wwc:[&_ol]:min-w-0 wwc:[&_ol]:flex-nowrap wwc:[&_li]:shrink-0 wwc:[&_li:last-child]:min-w-0 wwc:[&_li:last-child]:shrink wwc:[&_li:last-child>*]:truncate",
+				children: left
+			}),
+			center != null && /* @__PURE__ */ jsx("div", {
+				className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-center",
+				children: center
+			}),
+			hasRight && /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2",
+				children: [weekSelector != null && /* @__PURE__ */ jsx(WeekSelector, {
+					bare: true,
+					...weekSelector
+				}), right]
+			})
+		]
+	});
+});
+CanvasHeader.displayName = "CanvasHeader";
+//#endregion
+export { CanvasHeader };
+
+//# sourceMappingURL=canvas-header.mjs.map

package/dist/canvas-header.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-header.mjs","names":[],"sources":["../src/canvas-header.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nimport {WeekSelector, type WeekSelectorProps} from \"./week-selector\";\n\nexport interface CanvasHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Left cluster — typically a `Breadcrumb`. Takes the free width and stays on a single line. */\n\tleft?: React.ReactNode;\n\t/** Optional centered cluster (e.g. a title or a segmented control). */\n\tcenter?: React.ReactNode;\n\t/** Right cluster actions (e.g. a full-screen `Button`), placed after the built-in `weekSelector`. */\n\tright?: React.ReactNode;\n\t/**\n\t * A built-in period selector at the start of the right cluster. Pass the WeekSelector's props; it\n\t * renders `bare` so it sits flush in the bar. The canvas header and a period selector are paired\n\t * frequently, so this composes them for you (override the layout with the `right` slot instead).\n\t */\n\tweekSelector?: WeekSelectorProps;\n}\n\n/**\n * The canvas-level header: a bordered `min-h-12` bar that heads a workspace canvas. It lays out a `left`\n * cluster (breadcrumb — takes the free width, stays on one line, and truncates its trailing crumb when\n * tight), an optional centered cluster, and a `right` cluster made of an optional built-in `weekSelector`\n * plus your `right` actions. Not the platform top bar (`CoreAppTopBar`) — this heads a single canvas;\n * pair it with `ViewTabBar` (view switching) and `CanvasToolbar` (on-canvas tools).\n */\nconst CanvasHeader = React.forwardRef<HTMLDivElement, CanvasHeaderProps>(\n\t({className, left, center, right, weekSelector, ...props}, ref) => {\n\t\tconst hasRight = weekSelector != null || right != null;\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:flex wwc:min-h-12 wwc:shrink-0 wwc:items-center wwc:gap-4 wwc:border-b wwc:border-border wwc:bg-background wwc:px-3\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Left: takes the free space and stays on one line. `whitespace-nowrap` (inherited) stops every\n\t\t\t\t    crumb from wrapping; the chain (child → ol) may shrink; each crumb keeps its natural width\n\t\t\t\t    except the trailing one, which shrinks and truncates with an ellipsis when space runs out. */}\n\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:flex-1 wwc:items-center wwc:overflow-hidden wwc:whitespace-nowrap wwc:[&>*]:min-w-0 wwc:[&_ol]:min-w-0 wwc:[&_ol]:flex-nowrap wwc:[&_li]:shrink-0 wwc:[&_li:last-child]:min-w-0 wwc:[&_li:last-child]:shrink wwc:[&_li:last-child>*]:truncate\">\n\t\t\t\t\t{left}\n\t\t\t\t</div>\n\t\t\t\t{center != null && <div className=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:justify-center\">{center}</div>}\n\t\t\t\t{hasRight && (\n\t\t\t\t\t<div className=\"wwc:flex wwc:shrink-0 wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t{weekSelector != null && <WeekSelector bare {...weekSelector} />}\n\t\t\t\t\t\t{right}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nCanvasHeader.displayName = \"CanvasHeader\";\n\nexport {CanvasHeader};\n"],"mappings":";;;;;;;;;;;;AA2BA,MAAM,eAAe,MAAM,YACzB,EAAC,WAAW,MAAM,QAAQ,OAAO,cAAc,GAAG,SAAQ,QAAQ;CAClE,MAAM,WAAW,gBAAgB,QAAQ,SAAS;CAClD,OACC,qBAAC,OAAD;EACM;EACL,WAAW,GACV,2HACA,SACD;EACA,GAAI;EANL,UAAA;GAWC,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA;GACG,CAAA;GACJ,UAAU,QAAQ,oBAAC,OAAD;IAAK,WAAU;IAA6D,UAAA;GAAY,CAAA;GAC1G,YACA,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,gBAAgB,QAAQ,oBAAC,cAAD;KAAc,MAAA;KAAK,GAAI;IAAe,CAAA,GAC9D,KACG;;EAEF;;AAEP,CACD;AACA,aAAa,cAAc"}

package/dist/canvas-navigator.d.mts

@@ -0,0 +1,87 @@
+import * as React from "react";
+//#region src/canvas-navigator.d.ts
+/**
+ * A node in the navigator hierarchy. A node with a `children` array is a branch (a level you can
+ * drill into / expand) — even an empty array, which renders an empty state. A node without a
+ * `children` property is a selectable leaf. Nest to any depth.
+ */
+export interface CanvasNavigatorNode {
+  id: string;
+  label: string;
+  /** Leading icon for the row. */
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  children?: CanvasNavigatorNode[];
+}
+/**
+ * Panel size:
+ * - `collapsed` — header only, body hidden.
+ * - `default` — normal panel (drills one level at a time).
+ * - `expanded` — enlarged ("big") panel showing the full tree.
+ */
+export type CanvasNavigatorSize = "collapsed" | "default" | "expanded";
+export interface CanvasNavigatorProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSelect"> {
+  /** Hierarchical nodes (branches + leaves) shown in the navigator. */
+  nodes: CanvasNavigatorNode[];
+  /** Selected node id (controlled). */
+  value?: string;
+  /** Initial selected node id (uncontrolled). Defaults to the first (top-level) node. */
+  defaultValue?: string;
+  onSelect?: (id: string) => void;
+  /** Expanded branch ids in the full-tree (expanded) view. Defaults to every branch expanded. */
+  expandedIds?: string[];
+  defaultExpandedIds?: string[];
+  onExpandedChange?: (ids: string[]) => void;
+  /** Panel size (controlled): collapse to a header, or expand to go big. */
+  size?: CanvasNavigatorSize;
+  defaultSize?: CanvasNavigatorSize;
+  onSizeChange?: (size: CanvasNavigatorSize) => void;
+  /** Show the expand ("go big") control in the header. Default true. The collapse control always shows. */
+  expandable?: boolean;
+  /**
+   * Icon for the header's collapse control. Defaults to a chevron-up. Override it (e.g. with a panel
+   * icon) when the navigator is docked as a sidebar and "collapse" reads as "hide the panel".
+   */
+  collapseIcon?: React.ReactNode;
+  /** Header title shown at the top level. */
+  title?: string;
+  /** Render the header (with collapse + expand controls). Default true. */
+  header?: boolean;
+  /**
+   * Show a search bar in the header. While searching, the tree is replaced by a flat list of
+   * matching locations, each shown as its full breadcrumb path (start-truncated to one line).
+   */
+  searchable?: boolean;
+  /** Placeholder for the search input. Default "Search…". */
+  searchPlaceholder?: string;
+  /** Message shown when a branch has no children (e.g. a level with nothing under it). */
+  emptyLabel?: string;
+  /**
+   * Long-name handling for rows. Omit for plain end truncation. `"end"` adds a hover tooltip
+   * with the full name when it's clipped; `"middle"` keeps the start + tail visible (good for
+   * filenames like `Plan_Rev3.svg`); `"clamp"` wraps the name onto up to `maxLines` lines before
+   * truncating. All add a tooltip with the full name.
+   */
+  truncate?: "end" | "middle" | "clamp";
+  /** For `truncate="middle"`, how many trailing characters to always keep visible. Default 7. */
+  tailChars?: number;
+  /** For `truncate="clamp"`, the maximum number of wrapped lines before truncating. Default 3. */
+  maxLines?: number;
+  /** Compact density — 12px text on rows, header, search, and results, with tighter spacing. Default false. */
+  compact?: boolean;
+  /** Show a loading bar docked to the bottom of the panel while locations are still loading. Default false. */
+  loading?: boolean;
+  /** Text shown next to the spinner in the loading bar. Default "Loading…". */
+  loadingLabel?: string;
+  /**
+   * Deep-tree horizontal shift. When set, expanding branches past this (1-based) level slides the
+   * default tree left by one indent step — the gap between level 1 and level 2 — for each level
+   * revealed beyond it, so the active deep path stays in view. Collapsing a level shifts it back.
+   * Omit to disable (the tree never shifts).
+   */
+  shiftAfterLevel?: number;
+}
+declare const CanvasNavigator: React.ForwardRefExoticComponent<CanvasNavigatorProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { CanvasNavigator };
+//# sourceMappingURL=canvas-navigator.d.mts.map

package/dist/canvas-navigator.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"canvas-navigator.d.mts","names":[],"sources":["../src/canvas-navigator.tsx"],"mappings":";;;;;;;iBAuBiB;EAChB;EACA;;EAEA,OAAO,MAAM;EACb;EACA,WAAW;;;;;;;;YASA;iBAEK,6BAA6B,KAAK,MAAM,eAAe;;EAEvE,OAAO;;EAEP;;EAEA;EACA,YAAY;;EAEZ;EACA;EACA,oBAAoB;;EAEpB,OAAO;EACP,cAAc;EACd,gBAAgB,MAAM;;EAEtB;;;;;EAKA,eAAe,MAAM;;EAErB;;EAEA;;;;;EAKA;;EAEA;;EAEA;;;;;;;EAOA;;EAEA;;EAEA;;EAEA;;EAEA;;EAEA;;;;;;;EAOA;;cAmEK,iBAAe,MAAA,0BAAA,uBAAA,MAAA,cAAA"}