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

package/dist/thumbnail.mjs

@@ -0,0 +1,81 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/thumbnail.tsx
+const thumbnailVariants = cva("wwc:relative wwc:overflow-hidden wwc:bg-muted wwc:flex wwc:items-center wwc:justify-center", {
+	variants: {
+		size: {
+			sm: "wwc:h-16 wwc:w-16",
+			md: "wwc:h-24 wwc:w-24",
+			lg: "wwc:h-32 wwc:w-32",
+			xl: "wwc:h-48 wwc:w-48"
+		},
+		rounded: {
+			none: "wwc:rounded-none",
+			sm: "wwc:rounded-sm",
+			md: "wwc:rounded-md",
+			lg: "wwc:rounded-lg",
+			full: "wwc:rounded-full"
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		rounded: "md"
+	}
+});
+/** An image preview component with loading and error states. */
+const Thumbnail = React.forwardRef(({ className, size, rounded, src, fallback, alt, ...props }, ref) => {
+	const [error, setError] = React.useState(false);
+	const [loading, setLoading] = React.useState(!!src);
+	React.useEffect(() => {
+		if (src) {
+			setLoading(true);
+			setError(false);
+		}
+	}, [src]);
+	const handleLoad = () => {
+		setLoading(false);
+	};
+	const handleError = () => {
+		setLoading(false);
+		setError(true);
+	};
+	const showFallback = !src || error;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn(thumbnailVariants({
+			size,
+			rounded,
+			className
+		})),
+		children: [!showFallback && /* @__PURE__ */ jsx("img", {
+			src,
+			alt,
+			onLoad: handleLoad,
+			onError: handleError,
+			className: cn("wwc:h-full wwc:w-full wwc:object-cover wwc:transition-opacity", loading ? "wwc:opacity-0" : "wwc:opacity-100"),
+			...props
+		}), showFallback && /* @__PURE__ */ jsx("div", {
+			className: "wwc:flex wwc:h-full wwc:w-full wwc:items-center wwc:justify-center wwc:text-muted-foreground",
+			children: fallback || /* @__PURE__ */ jsx("svg", {
+				className: "wwc:h-1/2 wwc:w-1/2 wwc:opacity-50",
+				fill: "none",
+				stroke: "currentColor",
+				viewBox: "0 0 24 24",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", {
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					strokeWidth: 2,
+					d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+				})
+			})
+		})]
+	});
+});
+Thumbnail.displayName = "Thumbnail";
+//#endregion
+export { Thumbnail, thumbnailVariants };
+
+//# sourceMappingURL=thumbnail.mjs.map

package/dist/thumbnail.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"thumbnail.mjs","names":[],"sources":["../src/thumbnail.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {type VariantProps, cva} from \"class-variance-authority\";\nimport * as React from \"react\";\n\nconst thumbnailVariants = cva(\n\t\"wwc:relative wwc:overflow-hidden wwc:bg-muted wwc:flex wwc:items-center wwc:justify-center\",\n\t{\n\t\tvariants: {\n\t\t\tsize: {\n\t\t\t\tsm: \"wwc:h-16 wwc:w-16\",\n\t\t\t\tmd: \"wwc:h-24 wwc:w-24\",\n\t\t\t\tlg: \"wwc:h-32 wwc:w-32\",\n\t\t\t\txl: \"wwc:h-48 wwc:w-48\",\n\t\t\t},\n\t\t\trounded: {\n\t\t\t\tnone: \"wwc:rounded-none\",\n\t\t\t\tsm: \"wwc:rounded-sm\",\n\t\t\t\tmd: \"wwc:rounded-md\",\n\t\t\t\tlg: \"wwc:rounded-lg\",\n\t\t\t\tfull: \"wwc:rounded-full\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tsize: \"md\",\n\t\t\trounded: \"md\",\n\t\t},\n\t},\n);\n\nexport interface ThumbnailProps\n\textends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"src\">, VariantProps<typeof thumbnailVariants> {\n\t/** Image source URL */\n\tsrc?: string;\n\t/** Fallback content when image fails to load or is not provided */\n\tfallback?: React.ReactNode;\n\t/** Alt text for the image */\n\talt: string;\n}\n\n/** An image preview component with loading and error states. */\nconst Thumbnail = React.forwardRef<HTMLDivElement, ThumbnailProps>(\n\t({className, size, rounded, src, fallback, alt, ...props}, ref) => {\n\t\tconst [error, setError] = React.useState(false);\n\t\tconst [loading, setLoading] = React.useState(!!src);\n\n\t\tReact.useEffect(() => {\n\t\t\tif (src) {\n\t\t\t\tsetLoading(true);\n\t\t\t\tsetError(false);\n\t\t\t}\n\t\t}, [src]);\n\n\t\tconst handleLoad = () => {\n\t\t\tsetLoading(false);\n\t\t};\n\n\t\tconst handleError = () => {\n\t\t\tsetLoading(false);\n\t\t\tsetError(true);\n\t\t};\n\n\t\tconst showFallback = !src || error;\n\n\t\treturn (\n\t\t\t<div ref={ref} className={cn(thumbnailVariants({size, rounded, className}))}>\n\t\t\t\t{!showFallback && (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={src}\n\t\t\t\t\t\talt={alt}\n\t\t\t\t\t\tonLoad={handleLoad}\n\t\t\t\t\t\tonError={handleError}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"wwc:h-full wwc:w-full wwc:object-cover wwc:transition-opacity\",\n\t\t\t\t\t\t\tloading ? \"wwc:opacity-0\" : \"wwc:opacity-100\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{showFallback && (\n\t\t\t\t\t<div className=\"wwc:flex wwc:h-full wwc:w-full wwc:items-center wwc:justify-center wwc:text-muted-foreground\">\n\t\t\t\t\t\t{fallback || (\n\t\t\t\t\t\t\t<svg\n\t\t\t\t\t\t\t\tclassName=\"wwc:h-1/2 wwc:w-1/2 wwc:opacity-50\"\n\t\t\t\t\t\t\t\tfill=\"none\"\n\t\t\t\t\t\t\t\tstroke=\"currentColor\"\n\t\t\t\t\t\t\t\tviewBox=\"0 0 24 24\"\n\t\t\t\t\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<path\n\t\t\t\t\t\t\t\t\tstrokeLinecap=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeLinejoin=\"round\"\n\t\t\t\t\t\t\t\t\tstrokeWidth={2}\n\t\t\t\t\t\t\t\t\td=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</svg>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nThumbnail.displayName = \"Thumbnail\";\n\nexport {Thumbnail, thumbnailVariants};\n"],"mappings":";;;;;AAIA,MAAM,oBAAoB,IACzB,8FACA;CACC,UAAU;EACT,MAAM;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACL;EACA,SAAS;GACR,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACP;CACD;CACA,iBAAiB;EAChB,MAAM;EACN,SAAS;CACV;AACD,CACD;;AAaA,MAAM,YAAY,MAAM,YACtB,EAAC,WAAW,MAAM,SAAS,KAAK,UAAU,KAAK,GAAG,SAAQ,QAAQ;CAClE,MAAM,CAAC,OAAO,YAAY,MAAM,SAAS,KAAK;CAC9C,MAAM,CAAC,SAAS,cAAc,MAAM,SAAS,CAAC,CAAC,GAAG;CAElD,MAAM,gBAAgB;EACrB,IAAI,KAAK;GACR,WAAW,IAAI;GACf,SAAS,KAAK;EACf;CACD,GAAG,CAAC,GAAG,CAAC;CAER,MAAM,mBAAmB;EACxB,WAAW,KAAK;CACjB;CAEA,MAAM,oBAAoB;EACzB,WAAW,KAAK;EAChB,SAAS,IAAI;CACd;CAEA,MAAM,eAAe,CAAC,OAAO;CAE7B,OACC,qBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,kBAAkB;GAAC;GAAM;GAAS;EAAS,CAAC,CAAC;EAA1E,UAAA,CACE,CAAC,gBACD,oBAAC,OAAD;GACM;GACA;GACL,QAAQ;GACR,SAAS;GACT,WAAW,GACV,iEACA,UAAU,kBAAkB,iBAC7B;GACA,GAAI;EACJ,CAAA,GAED,gBACA,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,YACA,oBAAC,OAAD;IACC,WAAU;IACV,MAAK;IACL,QAAO;IACP,SAAQ;IACR,OAAM;IAEN,UAAA,oBAAC,QAAD;KACC,eAAc;KACd,gBAAe;KACf,aAAa;KACb,GAAE;IACF,CAAA;GACG,CAAA;EAEF,CAAA,CAEF;;AAEP,CACD;AACA,UAAU,cAAc"}

package/dist/time-input.d.mts

@@ -0,0 +1,15 @@
+import * as React from "react";
+//#region src/time-input.d.ts
+export interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+  /** Callback when time value changes */
+  onChange?: (value: string) => void;
+  /** Current time value in HH:MM format */
+  value?: string;
+  /** Show seconds input */
+  showSeconds?: boolean;
+}
+/** A time input component for selecting time values. */
+declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { TimeInput };
+//# sourceMappingURL=time-input.d.mts.map

package/dist/time-input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.d.mts","names":[],"sources":["../src/time-input.tsx"],"mappings":";;iBAGiB,uBAAuB,KAAK,MAAM,oBAAoB;;EAEtE,YAAY;;EAEZ;;EAEA;;;cAIK,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/time-input.mjs

@@ -0,0 +1,21 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/time-input.tsx
+/** A time input component for selecting time values. */
+const TimeInput = React.forwardRef(({ className, onChange, value, showSeconds = false, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("input", {
+		type: "time",
+		ref,
+		className: cn("wwc:flex wwc:h-9 wwc:w-full wwc:rounded-md wwc:border wwc:border-input wwc:bg-transparent wwc:px-3 wwc:py-1 wwc:text-sm wwc:shadow-sm wwc:transition-colors wwc:file:border-0 wwc:file:bg-transparent wwc:file:text-sm wwc:file:font-medium wwc:file:text-foreground wwc:placeholder:text-muted-foreground wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50", className),
+		value,
+		onChange: (e) => onChange?.(e.target.value),
+		step: showSeconds ? 1 : void 0,
+		...props
+	});
+});
+TimeInput.displayName = "TimeInput";
+//#endregion
+export { TimeInput };
+
+//# sourceMappingURL=time-input.mjs.map

package/dist/time-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-input.mjs","names":[],"sources":["../src/time-input.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nexport interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\"> {\n\t/** Callback when time value changes */\n\tonChange?: (value: string) => void;\n\t/** Current time value in HH:MM format */\n\tvalue?: string;\n\t/** Show seconds input */\n\tshowSeconds?: boolean;\n}\n\n/** A time input component for selecting time values. */\nconst TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(\n\t({className, onChange, value, showSeconds = false, ...props}, ref) => {\n\t\treturn (\n\t\t\t<input\n\t\t\t\ttype=\"time\"\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:flex wwc:h-9 wwc:w-full wwc:rounded-md wwc:border wwc:border-input wwc:bg-transparent wwc:px-3 wwc:py-1 wwc:text-sm wwc:shadow-sm wwc:transition-colors wwc:file:border-0 wwc:file:bg-transparent wwc:file:text-sm wwc:file:font-medium wwc:file:text-foreground wwc:placeholder:text-muted-foreground wwc:focus-visible:outline-none wwc:focus-visible:ring-1 wwc:focus-visible:ring-ring wwc:disabled:cursor-not-allowed wwc:disabled:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tvalue={value}\n\t\t\t\tonChange={(e) => onChange?.(e.target.value)}\n\t\t\t\tstep={showSeconds ? 1 : undefined}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nTimeInput.displayName = \"TimeInput\";\n\nexport {TimeInput};\n"],"mappings":";;;;;AAaA,MAAM,YAAY,MAAM,YACtB,EAAC,WAAW,UAAU,OAAO,cAAc,OAAO,GAAG,SAAQ,QAAQ;CACrE,OACC,oBAAC,SAAD;EACC,MAAK;EACA;EACL,WAAW,GACV,0bACA,SACD;EACO;EACP,WAAW,MAAM,WAAW,EAAE,OAAO,KAAK;EAC1C,MAAM,cAAc,IAAI,KAAA;EACxB,GAAI;CACJ,CAAA;AAEH,CACD;AACA,UAAU,cAAc"}

package/dist/time-scrubber.d.mts

@@ -0,0 +1,93 @@
+import * as React from "react";
+//#region src/time-scrubber.d.ts
+export type TimeScrubberVariant = "barGraph" | "lineGraph" | "dots";
+export interface TimeSeriesPoint {
+  /** A sample time within [start, end]. */
+  time: Date;
+  /** The metric at that time (bar/line height, relative to the series max). */
+  value: number;
+  /** Optional stacked bar segments, bottom→top. Their sum should equal `value`; each carries a bg class. */
+  segments?: {
+    value: number;
+    className?: string;
+  }[];
+  /** Tooltip shown on hover over this bar (e.g. the active-vs-inactive breakdown). */
+  title?: string;
+}
+export interface TimeScrubberLegendItem {
+  /** Swatch caption, e.g. "Open". */
+  label: string;
+  /** Swatch colour, any CSS colour. Use `className` instead when the series segments are class-coloured. */
+  color?: string;
+  /** Swatch background class — pass the same class the matching `segments[].className` uses. */
+  className?: string;
+}
+export interface TimeScrubberProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  /** Range start (e.g. today 00:00). */
+  start: Date;
+  /** Range end (e.g. today 24:00). */
+  end: Date;
+  /** How the data reads. Default "barGraph". */
+  variant?: TimeScrubberVariant;
+  /** The series for bar/line tracks. For dots, points with `value > 0` become dots. */
+  data?: TimeSeriesPoint[];
+  /** Left row-label chip, e.g. "Workers". */
+  label?: React.ReactNode;
+  /** Cursor position (controlled). Scrubbing is enabled when `onValueChange` is given. */
+  value?: Date;
+  onValueChange?: (time: Date) => void;
+  /**
+   * Selected range (controlled). Providing it puts a second handle on the track: drag either end, and
+   * the band between them is the selection. `value` stays the playhead, so a range and a cursor can
+   * coexist. Use it when the surface reads a window of time rather than a single moment.
+   */
+  rangeValue?: [Date, Date];
+  onRangeValueChange?: (range: [Date, Date]) => void;
+  /** Latest scrubbable/playable time — the cursor can't move past it (e.g. "now" on a live day). */
+  max?: Date;
+  /** Minutes between minor ticks. Default 60. */
+  minorEveryMinutes?: number;
+  /** Minutes between labelled major ticks. Default 180. */
+  majorEveryMinutes?: number;
+  /** Header shown above the axis (e.g. the date). Ignored when `date` is set. */
+  sectionLabel?: React.ReactNode;
+  /** The day the axis covers. When `onDateChange` is given, the header becomes a date picker. */
+  date?: Date;
+  onDateChange?: (date: Date) => void;
+  /** Latest selectable day in the picker (future days are disabled). Default: today. */
+  maxDate?: Date;
+  /** Format the header date. Default "EEE, d MMM". */
+  formatDate?: (d: Date) => string;
+  /** Rendered next to the cursor time — e.g. the value at the cursor. */
+  valueLabel?: React.ReactNode;
+  /**
+   * Swatch legend shown in the header, for reading a stacked `segments` track. Keep it to a handful
+   * of entries — the header is a single row and competes with the date, controls and cursor readout.
+   */
+  legend?: TimeScrubberLegendItem[];
+  /** Playing state (controlled); the cursor advances by `playSpeed`. */
+  playing?: boolean;
+  onPlayingChange?: (playing: boolean) => void;
+  /** When given, a "Now" control resets the cursor to the current time (and today). */
+  onNow?: () => void;
+  /** Start the timeline collapsed to just the track (bars + cursor). Default false. */
+  defaultCollapsed?: boolean;
+  /** Collapsed state (controlled). Pair with `onCollapsedChange` when the surrounding layout reacts to it. */
+  collapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Simulated minutes advanced per real second while playing. Default 120. */
+  playSpeed?: number;
+  /** Show the play/pause control. Default true when scrubbing is enabled. */
+  showControls?: boolean;
+  /** Format tick labels. Default HH:mm. */
+  formatTick?: (t: Date) => string;
+  /** Format the cursor readout. Default HH:mm. */
+  formatTime?: (t: Date) => string;
+  /** Track height in px. Default 44. */
+  height?: number;
+}
+/** A minimal, precise intraday timeline with bar / line / dots tracks. */
+export declare function TimeScrubber({ start, end, variant, data, label, value, onValueChange, rangeValue, onRangeValueChange, max, minorEveryMinutes, majorEveryMinutes, sectionLabel, date, onDateChange, maxDate, formatDate, valueLabel, legend, playing, onPlayingChange, onNow, defaultCollapsed, collapsed: collapsedProp, onCollapsedChange, playSpeed, showControls, formatTick, formatTime, height, className, ...props }: TimeScrubberProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export type { TimeSeriesPoint as TimeScrubberActivity };
+//# sourceMappingURL=time-scrubber.d.mts.map

package/dist/time-scrubber.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-scrubber.d.mts","names":[],"sources":["../src/time-scrubber.tsx"],"mappings":";;YAeY;iBAEK;;EAEhB,MAAM;;EAEN;;EAEA;IAAY;IAAe;;;EAE3B;;iBAGgB;;EAEhB;;EAEA;;EAEA;;iBAGgB,0BAA0B,KAAK,MAAM,eAAe;;EAEpE,OAAO;;EAEP,KAAK;;EAEL,UAAU;;EAEV,OAAO;;EAEP,QAAQ,MAAM;;EAEd,QAAQ;EACR,iBAAiB,MAAM;;;;;;EAMvB,cAAc,MAAM;EACpB,sBAAsB,QAAQ,MAAM;;EAEpC,MAAM;;EAEN;;EAEA;;EAEA,eAAe,MAAM;;EAErB,OAAO;EACP,gBAAgB,MAAM;;EAEtB,UAAU;;EAEV,cAAc,GAAG;;EAEjB,aAAa,MAAM;;;;;EAKnB,SAAS;;EAET;EACA,mBAAmB;;EAEnB;;EAEA;;EAEA;EACA,qBAAqB;;EAErB;;EAEA;;EAEA,cAAc,GAAG;;EAEjB,cAAc,GAAG;;EAEjB;;;wBAae,eACf,OACA,KACA,SACA,MACA,OACA,OACA,eACA,YACA,oBACA,KACA,mBACA,mBACA,cACA,MACA,cACA,SACA,YACA,YACA,QACA,SACA,iBACA,OACA,kBACA,WAAW,eACX,mBACA,WACA,cACA,YACA,YACA,QACA,cACG,SACD,gDAAiB,IAAA"}

package/dist/time-scrubber.mjs

@@ -0,0 +1,420 @@
+import { Button } from "./button.mjs";
+import { Calendar as Calendar$1 } from "./calendar.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
+import { FLOAT_SHADOW } from "./float-shadow.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ChevronDown, ChevronUp, Pause, Play, RotateCcw } from "lucide-react";
+import * as React from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { addMinutes, format } from "date-fns";
+//#region src/time-scrubber.tsx
+const clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+const MIN_VISIBLE_MS = 9e5;
+const niceMinor = (visMin) => visMin <= 90 ? 10 : visMin <= 240 ? 15 : visMin <= 600 ? 30 : 60;
+const niceMajor = (visMin) => visMin <= 90 ? 30 : visMin <= 240 ? 60 : visMin <= 600 ? 120 : 180;
+/** A minimal, precise intraday timeline with bar / line / dots tracks. */
+function TimeScrubber({ start, end, variant = "barGraph", data = [], label, value, onValueChange, rangeValue, onRangeValueChange, max, minorEveryMinutes = 60, majorEveryMinutes = 180, sectionLabel, date, onDateChange, maxDate, formatDate = (d) => format(d, "EEE, d MMM"), valueLabel, legend, playing = false, onPlayingChange, onNow, defaultCollapsed = false, collapsed: collapsedProp, onCollapsedChange, playSpeed = 120, showControls, formatTick = (t) => format(t, "HH:mm"), formatTime = (t) => format(t, "HH:mm"), height = 28, className, ...props }) {
+	const trackRef = React.useRef(null);
+	const [dragging, setDragging] = React.useState(false);
+	const [uncontrolledCollapsed, setUncontrolledCollapsed] = React.useState(defaultCollapsed);
+	const collapsed = collapsedProp ?? uncontrolledCollapsed;
+	const setCollapsed = (next) => {
+		if (collapsedProp == null) setUncontrolledCollapsed(next);
+		onCollapsedChange?.(next);
+	};
+	const [hoveredBar, setHoveredBar] = React.useState(null);
+	const startMs = start.getTime();
+	const totalMs = Math.max(1, end.getTime() - startMs);
+	const maxMs = max ? clamp(max.getTime(), startMs, startMs + totalMs) : startMs + totalMs;
+	const [view, setView] = React.useState({
+		start: startMs,
+		end: startMs + totalMs
+	});
+	React.useEffect(() => {
+		setView({
+			start: startMs,
+			end: startMs + totalMs
+		});
+	}, [startMs, totalMs]);
+	const viewStart = clamp(view.start, startMs, startMs + totalMs - MIN_VISIBLE_MS);
+	const visibleMs = clamp(view.end - viewStart, MIN_VISIBLE_MS, startMs + totalMs - viewStart);
+	const viewEnd = viewStart + visibleMs;
+	const isFullView = viewStart <= startMs && viewEnd >= startMs + totalMs;
+	const xPct = (t) => (t.getTime() - viewStart) / visibleMs * 100;
+	const scrubbable = typeof onValueChange === "function" || rangeValue != null && typeof onRangeValueChange === "function";
+	const dragHandleRef = React.useRef(null);
+	const cursorRaw = value ? xPct(value) : null;
+	const cursorPct = cursorRaw != null && cursorRaw >= 0 && cursorRaw <= 100 ? cursorRaw : null;
+	const controls = showControls ?? scrubbable;
+	const viewRef = React.useRef(view);
+	viewRef.current = view;
+	React.useEffect(() => {
+		const el = trackRef.current;
+		if (!el) return;
+		const onWheel = (e) => {
+			e.preventDefault();
+			const rect = el.getBoundingClientRect();
+			const f = clamp((e.clientX - rect.left) / rect.width, 0, 1);
+			const v = viewRef.current;
+			const vis = v.end - v.start;
+			const anchor = v.start + f * vis;
+			const nextVis = clamp(vis * (e.deltaY < 0 ? .82 : 1 / .82), MIN_VISIBLE_MS, totalMs);
+			let ns = anchor - f * nextVis;
+			let ne = ns + nextVis;
+			if (ns < startMs) {
+				ns = startMs;
+				ne = startMs + nextVis;
+			}
+			if (ne > startMs + totalMs) {
+				ne = startMs + totalMs;
+				ns = ne - nextVis;
+			}
+			setView({
+				start: Math.max(startMs, ns),
+				end: ne
+			});
+		};
+		el.addEventListener("wheel", onWheel, { passive: false });
+		return () => el.removeEventListener("wheel", onWheel);
+	}, [startMs, totalMs]);
+	const seekTo = React.useCallback((clientX) => {
+		const el = trackRef.current;
+		if (!el || !onValueChange && !onRangeValueChange) return;
+		const rect = el.getBoundingClientRect();
+		const f = clamp((clientX - rect.left) / rect.width, 0, 1);
+		const v = viewRef.current;
+		const t = clamp(v.start + f * (v.end - v.start), startMs, maxMs);
+		if (rangeValue && onRangeValueChange) {
+			const [lo, hi] = [rangeValue[0].getTime(), rangeValue[1].getTime()];
+			const which = dragHandleRef.current ?? (Math.abs(t - lo) <= Math.abs(t - hi) ? 0 : 1);
+			dragHandleRef.current = which;
+			onRangeValueChange(which === 0 ? [new Date(Math.min(t, hi)), rangeValue[1]] : [rangeValue[0], new Date(Math.max(t, lo))]);
+			return;
+		}
+		onValueChange?.(new Date(t));
+	}, [
+		onValueChange,
+		rangeValue,
+		onRangeValueChange,
+		startMs,
+		maxMs
+	]);
+	const valueRef = React.useRef(value);
+	valueRef.current = value;
+	const onChangeRef = React.useRef(onValueChange);
+	onChangeRef.current = onValueChange;
+	React.useEffect(() => {
+		if (!playing || !value) return;
+		const tickMs = 200;
+		const id = window.setInterval(() => {
+			const cur = valueRef.current;
+			if (!cur) return;
+			const advanced = cur.getTime() + playSpeed * (tickMs / 1e3) * 6e4;
+			if (advanced >= maxMs) {
+				onChangeRef.current?.(new Date(maxMs));
+				onPlayingChange?.(false);
+			} else onChangeRef.current?.(new Date(advanced));
+		}, tickMs);
+		return () => window.clearInterval(id);
+	}, [
+		playing,
+		value,
+		playSpeed,
+		maxMs,
+		onPlayingChange
+	]);
+	const visMin = visibleMs / 6e4;
+	const minorMin = isFullView ? minorEveryMinutes : niceMinor(visMin);
+	const majorMin = isFullView ? majorEveryMinutes : niceMajor(visMin);
+	const endMs = startMs + totalMs;
+	const inWindow = (ms) => {
+		const p = (ms - viewStart) / visibleMs * 100;
+		return p >= -2 && p <= 102;
+	};
+	const minorTicks = [];
+	for (let ms = startMs; ms <= endMs; ms += minorMin * 6e4) if (inWindow(ms)) minorTicks.push(new Date(ms));
+	const majorTicks = [];
+	for (let ms = startMs; ms <= endMs; ms += majorMin * 6e4) if (inWindow(ms)) majorTicks.push(new Date(ms));
+	const maxValue = data.length ? Math.max(1, ...data.map((d) => d.value)) : 1;
+	const barWidthPct = data.length > 1 ? Math.max(.4, Math.abs(xPct(data[1].time) - xPct(data[0].time)) * .85) : 1.5;
+	const linePath = React.useMemo(() => {
+		if (variant !== "lineGraph" || data.length === 0) return {
+			line: "",
+			area: ""
+		};
+		const pts = data.map((d) => [xPct(d.time), 100 - d.value / maxValue * 100]);
+		const line = pts.map(([x, y], i) => `${i === 0 ? "M" : "L"}${x},${y}`).join(" ");
+		return {
+			line,
+			area: `${line} L${pts[pts.length - 1][0]},100 L${pts[0][0]},100 Z`
+		};
+	}, [
+		variant,
+		data,
+		maxValue,
+		viewStart,
+		visibleMs
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:mx-auto wwc:rounded-lg wwc:border wwc:border-border wwc:bg-card/95 wwc:px-2.5 wwc:py-1 wwc:backdrop-blur wwc:transition-[width] wwc:duration-300 wwc:ease-out", FLOAT_SHADOW, collapsed ? "wwc:w-3/4" : "wwc:w-full", className),
+		...props,
+		children: [!collapsed && (sectionLabel != null || date != null || value != null || controls || onNow || legend?.length) && /* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-3 wwc:pb-0.5",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-center wwc:gap-2 wwc:text-muted-foreground",
+				children: [
+					/* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						icon: true,
+						"aria-label": "Collapse timeline",
+						className: "wwc:h-6 wwc:w-6 wwc:text-muted-foreground",
+						onClick: () => setCollapsed(true),
+						children: /* @__PURE__ */ jsx(ChevronDown, { className: "wwc:h-3.5 wwc:w-3.5" })
+					}),
+					date != null && onDateChange ? /* @__PURE__ */ jsxs(Popover, { children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							className: "wwc:inline-flex wwc:items-center wwc:gap-1 wwc:rounded wwc:text-xs wwc:font-medium wwc:text-muted-foreground wwc:transition-colors wwc:hover:text-foreground",
+							children: [formatDate(date), /* @__PURE__ */ jsx(ChevronDown, { className: "wwc:h-3.5 wwc:w-3.5" })]
+						})
+					}), /* @__PURE__ */ jsx(PopoverContent, {
+						align: "start",
+						className: "wwc:w-auto wwc:p-0",
+						children: /* @__PURE__ */ jsx(Calendar$1, {
+							mode: "single",
+							size: "compact",
+							selected: date,
+							defaultMonth: date,
+							onSelect: (d) => d && onDateChange(d),
+							disabled: { after: maxDate ?? /* @__PURE__ */ new Date() }
+						})
+					})] }) : (sectionLabel ?? (date ? formatDate(date) : null)) != null ? /* @__PURE__ */ jsx("span", {
+						className: "wwc:text-xs wwc:font-medium wwc:text-muted-foreground",
+						children: sectionLabel ?? (date ? formatDate(date) : null)
+					}) : null,
+					(date != null || sectionLabel != null) && (controls && value || onNow) && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "wwc:h-4 wwc:w-px wwc:bg-border"
+					}),
+					controls && value && /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						icon: true,
+						"aria-label": playing ? "Pause" : "Play",
+						className: "wwc:h-6 wwc:w-6 wwc:text-muted-foreground",
+						onClick: () => onPlayingChange?.(!playing),
+						children: playing ? /* @__PURE__ */ jsx(Pause, { className: "wwc:h-3.5 wwc:w-3.5" }) : /* @__PURE__ */ jsx(Play, { className: "wwc:h-3.5 wwc:w-3.5" })
+					}),
+					onNow && /* @__PURE__ */ jsxs(Button, {
+						variant: "ghost",
+						size: "sm",
+						"aria-label": "Back to now",
+						className: "wwc:h-6 wwc:gap-1 wwc:px-1.5 wwc:text-xs wwc:font-medium wwc:text-muted-foreground",
+						onClick: onNow,
+						children: [/* @__PURE__ */ jsx(RotateCcw, { className: "wwc:h-3.5 wwc:w-3.5" }), "Now"]
+					})
+				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:items-center wwc:gap-2",
+				children: [
+					legend != null && legend.length > 0 && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+						className: "wwc:flex wwc:items-center wwc:gap-2.5",
+						children: legend.map((item) => /* @__PURE__ */ jsxs("span", {
+							className: "wwc:flex wwc:items-center wwc:gap-1 wwc:text-[11px] wwc:text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: cn("wwc:h-2 wwc:w-2 wwc:shrink-0 wwc:rounded-[2px]", item.className),
+								style: item.color ? { backgroundColor: item.color } : void 0
+							}), item.label]
+						}, item.label))
+					}), (value != null || valueLabel != null) && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "wwc:h-4 wwc:w-px wwc:bg-border"
+					})] }),
+					value && /* @__PURE__ */ jsx("span", {
+						className: "wwc:text-sm wwc:font-semibold wwc:tabular-nums",
+						children: formatTime(value)
+					}),
+					valueLabel != null && /* @__PURE__ */ jsx("span", {
+						className: "wwc:text-xs wwc:text-muted-foreground",
+						children: valueLabel
+					})
+				]
+			})]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("wwc:flex wwc:gap-2", collapsed ? "wwc:items-center" : "wwc:items-stretch"),
+			children: [collapsed ? /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: "sm",
+				icon: true,
+				"aria-label": "Expand timeline",
+				className: "wwc:h-5 wwc:w-5 wwc:shrink-0 wwc:text-muted-foreground",
+				onClick: () => setCollapsed(false),
+				children: /* @__PURE__ */ jsx(ChevronUp, { className: "wwc:h-3.5 wwc:w-3.5" })
+			}) : label != null && /* @__PURE__ */ jsx("div", {
+				className: "wwc:flex wwc:shrink-0 wwc:items-center wwc:self-end",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "wwc:rounded wwc:bg-primary/10 wwc:px-2 wwc:py-0.5 wwc:text-xs wwc:font-medium wwc:text-primary",
+					children: label
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				ref: trackRef,
+				role: scrubbable ? "slider" : void 0,
+				tabIndex: scrubbable ? 0 : void 0,
+				"aria-label": scrubbable ? "Time" : void 0,
+				"aria-valuetext": value ? formatTime(value) : void 0,
+				className: cn("wwc:relative wwc:min-w-0 wwc:flex-1 wwc:touch-none wwc:select-none", scrubbable && "wwc:cursor-pointer"),
+				style: { height: collapsed ? 22 : height + 12 },
+				title: isFullView ? "Scroll to zoom" : "Double-click to reset zoom",
+				onDoubleClick: () => setView({
+					start: startMs,
+					end: startMs + totalMs
+				}),
+				onPointerDown: scrubbable ? (e) => {
+					e.currentTarget.setPointerCapture(e.pointerId);
+					setDragging(true);
+					seekTo(e.clientX);
+				} : void 0,
+				onPointerMove: scrubbable ? (e) => dragging && seekTo(e.clientX) : void 0,
+				onPointerUp: scrubbable ? (e) => {
+					setDragging(false);
+					dragHandleRef.current = null;
+					e.currentTarget.releasePointerCapture(e.pointerId);
+				} : void 0,
+				onKeyDown: scrubbable && value ? (e) => {
+					if (e.key === "ArrowLeft") {
+						e.preventDefault();
+						onValueChange?.(new Date(clamp(addMinutes(value, -minorEveryMinutes).getTime(), startMs, maxMs)));
+					} else if (e.key === "ArrowRight") {
+						e.preventDefault();
+						onValueChange?.(new Date(clamp(addMinutes(value, minorEveryMinutes).getTime(), startMs, maxMs)));
+					}
+				} : void 0,
+				children: [!collapsed && /* @__PURE__ */ jsx("div", {
+					className: "wwc:pointer-events-none wwc:absolute wwc:inset-x-0 wwc:top-0 wwc:h-3",
+					children: majorTicks.map((t) => {
+						const pct = xPct(t);
+						const transform = pct <= .5 ? "translateX(0)" : pct >= 99.5 ? "translateX(-100%)" : "translateX(-50%)";
+						return /* @__PURE__ */ jsx("span", {
+							className: "wwc:absolute wwc:text-[10px] wwc:tabular-nums wwc:leading-none wwc:text-muted-foreground",
+							style: {
+								left: `${pct}%`,
+								transform
+							},
+							children: formatTick(t)
+						}, t.getTime());
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: cn("wwc:absolute wwc:inset-x-0 wwc:bottom-0", collapsed ? "wwc:top-0" : "wwc:top-3"),
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:pointer-events-none wwc:absolute wwc:inset-0",
+							children: [
+								minorTicks.map((t) => /* @__PURE__ */ jsx("span", {
+									className: "wwc:absolute wwc:top-0 wwc:h-1.5 wwc:w-px wwc:bg-border",
+									style: { left: `${xPct(t)}%` }
+								}, t.getTime())),
+								majorTicks.map((t) => /* @__PURE__ */ jsx("span", {
+									className: "wwc:absolute wwc:top-0 wwc:h-2 wwc:w-px wwc:bg-border",
+									style: { left: `${xPct(t)}%` }
+								}, `M${t.getTime()}`)),
+								/* @__PURE__ */ jsx("span", { className: "wwc:absolute wwc:inset-x-0 wwc:bottom-0 wwc:h-px wwc:bg-border" })
+							]
+						}),
+						variant === "barGraph" && data.length > 0 && /* @__PURE__ */ jsx("div", {
+							className: "wwc:absolute wwc:inset-x-0 wwc:bottom-px wwc:top-1 wwc:overflow-hidden",
+							children: data.map((d) => {
+								const left = xPct(d.time);
+								if (left < -barWidthPct || left > 100 + barWidthPct) return null;
+								if (d.value <= 0) return null;
+								const height = Math.max(2, d.value / maxValue * 100);
+								const style = {
+									left: `${left}%`,
+									width: `${barWidthPct}%`,
+									height: `${height}%`
+								};
+								const hover = d.title ? {
+									onMouseEnter: () => setHoveredBar({
+										title: d.title,
+										left
+									}),
+									onMouseLeave: () => setHoveredBar(null)
+								} : void 0;
+								if (d.segments && d.segments.length > 0) return /* @__PURE__ */ jsx("span", {
+									...hover,
+									className: "wwc:absolute wwc:bottom-0 wwc:flex wwc:flex-col-reverse wwc:overflow-hidden wwc:rounded-t-[1px]",
+									style,
+									children: d.segments.map((seg, i) => /* @__PURE__ */ jsx("span", {
+										className: cn("wwc:w-full", seg.className ?? "wwc:bg-primary/30"),
+										style: { height: `${seg.value / d.value * 100}%` }
+									}, seg.className ?? `seg-${i}`))
+								}, d.time.getTime());
+								return /* @__PURE__ */ jsx("span", {
+									...hover,
+									className: "wwc:absolute wwc:bottom-0 wwc:rounded-t-[1px] wwc:bg-primary/30",
+									style
+								}, d.time.getTime());
+							})
+						}),
+						hoveredBar && /* @__PURE__ */ jsx("div", {
+							className: "wwc:pointer-events-none wwc:absolute wwc:bottom-full wwc:z-50 wwc:mb-1.5 wwc:-translate-x-1/2 wwc:whitespace-nowrap wwc:rounded-md wwc:bg-primary wwc:px-2 wwc:py-1 wwc:text-[11px] wwc:font-medium wwc:text-primary-foreground wwc:shadow-md",
+							style: { left: `${hoveredBar.left}%` },
+							children: hoveredBar.title
+						}),
+						variant === "lineGraph" && data.length > 0 && /* @__PURE__ */ jsxs("svg", {
+							className: "wwc:pointer-events-none wwc:absolute wwc:inset-x-0 wwc:bottom-px wwc:top-1 wwc:overflow-hidden",
+							style: {
+								height: "calc(100% - 1px)",
+								width: "100%"
+							},
+							viewBox: "0 0 100 100",
+							preserveAspectRatio: "none",
+							children: [/* @__PURE__ */ jsx("path", {
+								d: linePath.area,
+								className: "wwc:fill-primary/15"
+							}), /* @__PURE__ */ jsx("path", {
+								d: linePath.line,
+								className: "wwc:fill-none wwc:stroke-primary",
+								strokeWidth: 1.25,
+								vectorEffect: "non-scaling-stroke"
+							})]
+						}),
+						variant === "dots" && /* @__PURE__ */ jsxs("div", {
+							className: "wwc:pointer-events-none wwc:absolute wwc:inset-x-0 wwc:top-1/2 wwc:h-0 wwc:overflow-visible",
+							children: [/* @__PURE__ */ jsx("span", { className: "wwc:absolute wwc:inset-x-0 wwc:top-0 wwc:h-px wwc:-translate-y-1/2 wwc:bg-border" }), data.filter((d) => d.value > 0 && xPct(d.time) >= 0 && xPct(d.time) <= 100).map((d) => /* @__PURE__ */ jsx("span", {
+								className: "wwc:absolute wwc:top-0 wwc:h-1.5 wwc:w-1.5 wwc:-translate-x-1/2 wwc:-translate-y-1/2 wwc:rounded-full wwc:bg-primary",
+								style: { left: `${xPct(d.time)}%` }
+							}, d.time.getTime()))]
+						}),
+						rangeValue && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+							className: "wwc:pointer-events-none wwc:absolute wwc:inset-y-0 wwc:bg-primary/15",
+							style: {
+								left: `${clamp(xPct(rangeValue[0]), 0, 100)}%`,
+								width: `${clamp(xPct(rangeValue[1]), 0, 100) - clamp(xPct(rangeValue[0]), 0, 100)}%`
+							}
+						}), rangeValue.map((edge, i) => {
+							const pct = xPct(edge);
+							if (pct < 0 || pct > 100) return null;
+							return /* @__PURE__ */ jsx("div", {
+								className: "wwc:pointer-events-none wwc:absolute wwc:inset-y-0 wwc:w-px wwc:-translate-x-1/2 wwc:bg-primary",
+								style: { left: `${pct}%` },
+								children: /* @__PURE__ */ jsx("span", { className: "wwc:absolute wwc:-top-1 wwc:left-1/2 wwc:h-2.5 wwc:w-2.5 wwc:-translate-x-1/2 wwc:rounded-[2px] wwc:border-2 wwc:border-background wwc:bg-primary wwc:shadow" })
+							}, i === 0 ? "range-start" : "range-end");
+						})] }),
+						cursorPct != null && /* @__PURE__ */ jsx("div", {
+							className: "wwc:pointer-events-none wwc:absolute wwc:inset-y-0 wwc:w-px wwc:-translate-x-1/2 wwc:bg-primary",
+							style: { left: `${cursorPct}%` },
+							children: /* @__PURE__ */ jsx("span", { className: "wwc:absolute wwc:-top-1 wwc:left-1/2 wwc:h-2.5 wwc:w-2.5 wwc:-translate-x-1/2 wwc:rounded-full wwc:border-2 wwc:border-background wwc:bg-primary wwc:shadow" })
+						})
+					]
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { TimeScrubber };
+
+//# sourceMappingURL=time-scrubber.mjs.map