@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/date-time-range-picker-BUjjjvo8.js

@@ -0,0 +1,372 @@
+import { a as TriggerChevron, t as Button } from "./Button-Bi7aXd_G.js";
+import { DatePicker } from "./components/DateTimePicker.es.js";
+import { Field, FieldError } from "./components/Field.es.js";
+import { t as Input } from "./input-Cyit5ZSc.js";
+import { t as Txt } from "./Txt-5efBsb2p.js";
+import { t as ButtonsGroup } from "./buttons-group-DA_wORqQ.js";
+import { t as DropdownMenu } from "./dropdown-menu-jsf9D-J_.js";
+import { i as PopoverTrigger, n as Popover, r as PopoverContent } from "./popover-BpMi52Tb.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRight, CalendarIcon, Check, ChevronLeft, XIcon } from "lucide-react";
+import { differenceInCalendarMonths, format, isValid, parse, startOfDay, subMonths } from "date-fns";
+// src/ds/components/DateTimeRangePicker/custom-range-editor.tsx
+function formatDays(ms) {
+	const days = Math.round(ms / 864e5);
+	return `${days} day${days === 1 ? "" : "s"}`;
+}
+/** The draft day at the draft `HH:mm` time, or the start of the day when the time doesn't parse. */
+function combineDateAndTime(date, timeStr) {
+	if (!date) return void 0;
+	const combined = parse(timeStr, "HH:mm", startOfDay(date));
+	return isValid(combined) ? combined : startOfDay(date);
+}
+var isTime = (timeStr) => isValid(parse(timeStr, "HH:mm", /* @__PURE__ */ new Date()));
+/** Why the drafts can't be applied, or `undefined` when they can. */
+function rangeProblem({ from, to, timesFilled, maxRangeMs = Infinity, firstDay }) {
+	if (!timesFilled) return "Enter a time for the start and end";
+	if (from && to && from > to) return "Start date/time must be before end date/time";
+	if (from && to && to.getTime() - from.getTime() > maxRangeMs) return `Range cannot be longer than ${formatDays(maxRangeMs)}`;
+	if (from && firstDay && from < firstDay) return `Range cannot start before ${format(firstDay, "MMM d, yyyy")}`;
+}
+/** The left month of the two: the start's month when the range spans months, else the month before the end. */
+function firstShownMonth(from, to) {
+	if (from && to && differenceInCalendarMonths(to, from) >= 1) return from;
+	if (to) return subMonths(to, 1);
+	return from;
+}
+/**
+* The custom range popover body: one two-month calendar where the first click picks the
+* start and the second the end, with both ends and their times under it. It mounts each time the
+* popover opens, so its drafts start from the current range.
+*/
+function CustomRangeEditor({ dateFrom, dateTo, disabled, maxRangeMs, minDate, onApply, onShowPresets }) {
+	const [range, setRange] = useState(dateFrom || dateTo ? {
+		from: dateFrom,
+		to: dateTo
+	} : void 0);
+	const [draftTimeFrom, setDraftTimeFrom] = useState(dateFrom ? format(dateFrom, "HH:mm") : "00:00");
+	const [draftTimeTo, setDraftTimeTo] = useState(dateTo ? format(dateTo, "HH:mm") : "23:59");
+	const [applyAttempted, setApplyAttempted] = useState(false);
+	const errorId = useId();
+	const fromDate = combineDateAndTime(range?.from, draftTimeFrom);
+	const toDate = combineDateAndTime(range?.to, draftTimeTo);
+	const firstDay = minDate ? startOfDay(minDate) : void 0;
+	const problem = rangeProblem({
+		from: fromDate,
+		to: toDate,
+		timesFilled: (!range?.from || isTime(draftTimeFrom)) && (!range?.to || isTime(draftTimeTo)),
+		maxRangeMs,
+		firstDay
+	});
+	const error = applyAttempted ? problem : void 0;
+	const apply = () => {
+		if (problem) {
+			setApplyAttempted(true);
+			return;
+		}
+		onApply(fromDate, toDate);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				role: "group",
+				"aria-label": "Custom date range",
+				"aria-invalid": error ? true : void 0,
+				"aria-describedby": error ? errorId : void 0,
+				children: [/* @__PURE__ */ jsx(DatePicker, {
+					mode: "range",
+					numberOfMonths: 2,
+					showOutsideDays: false,
+					resetOnSelect: true,
+					selected: range,
+					onSelect: setRange,
+					defaultMonth: firstShownMonth(dateFrom, dateTo),
+					disabled: disabled || (firstDay ? { before: firstDay } : void 0),
+					startMonth: firstDay
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "grid grid-cols-[1fr_auto_1fr] gap-x-2 gap-y-1 px-3 pb-3",
+					children: [
+						/* @__PURE__ */ jsx(RangeEnd, {
+							label: "Start",
+							date: range?.from,
+							time: draftTimeFrom,
+							onTimeChange: setDraftTimeFrom,
+							disabled
+						}),
+						/* @__PURE__ */ jsx(ArrowRight, {
+							"aria-hidden": true,
+							className: "col-start-2 row-start-2 size-4 self-center text-muted-foreground"
+						}),
+						/* @__PURE__ */ jsx(RangeEnd, {
+							label: "End",
+							date: range?.to,
+							time: draftTimeTo,
+							onTimeChange: setDraftTimeTo,
+							disabled
+						})
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx(Field, {
+				invalid: Boolean(error),
+				children: /* @__PURE__ */ jsx(FieldError, {
+					id: errorId,
+					className: "px-4 pb-1",
+					children: error
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 border-t border-border px-3 py-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					icon: /* @__PURE__ */ jsx(ChevronLeft, {}),
+					variant: "ghost",
+					size: "sm",
+					disabled,
+					onClick: onShowPresets,
+					children: "Presets"
+				}), /* @__PURE__ */ jsx(Button, {
+					className: "ml-auto",
+					icon: /* @__PURE__ */ jsx(Check, {}),
+					variant: "primary",
+					size: "sm",
+					onClick: apply,
+					disabled,
+					children: "Apply"
+				})]
+			})
+		]
+	});
+}
+function RangeEnd({ label, date, time, onTimeChange, disabled }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "row-span-2 grid min-w-0 grid-rows-subgrid",
+		children: [/* @__PURE__ */ jsx(Txt, {
+			as: "span",
+			variant: "column",
+			tone: "muted",
+			className: "px-1",
+			children: label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(Txt, {
+				as: "span",
+				variant: "label",
+				tone: date ? void 0 : "muted",
+				className: "min-w-0 flex-1 truncate px-1",
+				children: date ? format(date, "MMM d, yyyy") : "Select a day"
+			}), /* @__PURE__ */ jsx(Input, {
+				type: "time",
+				size: "sm",
+				"aria-label": `${label} time`,
+				value: time,
+				onChange: (e) => onTimeChange(e.target.value),
+				disabled,
+				className: "w-24 shrink-0 [&::-webkit-calendar-picker-indicator]:hidden"
+			})]
+		})]
+	});
+}
+// src/ds/components/DateTimeRangePicker/date-time-range-picker.tsx
+var DATE_PRESETS = [
+	{
+		value: "all",
+		label: "All"
+	},
+	{
+		value: "last-24h",
+		label: "Last 24 hours",
+		ms: 864e5
+	},
+	{
+		value: "last-3d",
+		label: "Last 3 days",
+		ms: 2592e5
+	},
+	{
+		value: "last-7d",
+		label: "Last 7 days",
+		ms: 6048e5
+	},
+	{
+		value: "last-14d",
+		label: "Last 14 days",
+		ms: 12096e5
+	},
+	{
+		value: "last-30d",
+		label: "Last 30 days",
+		ms: 2592e6
+	},
+	{
+		value: "custom",
+		label: "Custom range..."
+	}
+];
+var sameTime = (a, b) => a?.getTime() === b?.getTime();
+/**
+* Whether a named range breaks the limits the custom editor enforces: it starts before
+* `minDate`'s day, or spans more than `maxRangeMs` (an open end counts up to now).
+*/
+function outsideLimits(range, minDate, maxRangeMs) {
+	const tooEarly = minDate !== void 0 && range.from < startOfDay(minDate);
+	const span = (range.to ?? /* @__PURE__ */ new Date()).getTime() - range.from.getTime();
+	return tooEarly || maxRangeMs !== void 0 && span > maxRangeMs;
+}
+var fmtClock = (d) => d.toLocaleTimeString("en-US", d.getMinutes() === 0 ? { hour: "numeric" } : {
+	hour: "numeric",
+	minute: "2-digit"
+});
+/**
+* A custom range as day and time, kept short: `Oct 21, 2:05 PM – 4 PM` within one day,
+* `Oct 20, 12 AM – Oct 27, 9:30 AM` across days, with years only outside the current one.
+*/
+function customRangeLabel(dateFrom, dateTo) {
+	const thisYear = (/* @__PURE__ */ new Date()).getFullYear();
+	const withYear = [dateFrom, dateTo].some((d) => d && d.getFullYear() !== thisYear);
+	const fmtDay = (d) => d.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		...withYear && { year: "numeric" }
+	});
+	const fmtMoment = (d) => `${fmtDay(d)}, ${fmtClock(d)}`;
+	const start = dateFrom ? fmtMoment(dateFrom) : "Start";
+	if (!dateTo) return `${start} \u2013 End`;
+	return `${start} \u2013 ${dateFrom !== void 0 && fmtDay(dateFrom) === fmtDay(dateTo) ? fmtClock(dateTo) : fmtMoment(dateTo)}`;
+}
+function DateTimeRangePicker({ preset = "all", onPresetChange, dateFrom, dateTo, onDateChange, onDateRangeChange, disabled, maxRangeMs, minDate, presets, namedRanges = [], size = "sm", defaultPreset, onReset, ref }) {
+	const visiblePresets = presets ? DATE_PRESETS.filter((p) => presets.includes(p.value)) : DATE_PRESETS;
+	const [customRangeOpen, setCustomRangeOpen] = useState(false);
+	const [presetMenuOpen, setPresetMenuOpen] = useState(false);
+	const [presetBeforeCustom, setPresetBeforeCustom] = useState();
+	const shownPreset = (presetMenuOpen && preset === "custom" ? presetBeforeCustom : void 0) ?? preset;
+	const datePresetLabel = DATE_PRESETS.find((p) => p.value === shownPreset)?.label ?? "All";
+	const applyPreset = (value) => {
+		onPresetChange?.(value);
+		const entry = DATE_PRESETS.find((p) => p.value === value);
+		if (entry?.ms) {
+			onDateChange?.(new Date(Date.now() - entry.ms), "from");
+			onDateChange?.(void 0, "to");
+		} else {
+			onDateChange?.(void 0, "from");
+			onDateChange?.(void 0, "to");
+		}
+	};
+	const handlePresetSelect = (value) => {
+		setPresetMenuOpen(false);
+		if (value === "custom") {
+			if (preset !== "custom") setPresetBeforeCustom(preset);
+			onPresetChange?.(value);
+			setCustomRangeOpen(true);
+			return;
+		}
+		setPresetBeforeCustom(void 0);
+		applyPreset(value);
+	};
+	const applyCustomRange = (fromDate, toDate) => {
+		if (onDateRangeChange) onDateRangeChange(fromDate, toDate);
+		else {
+			onDateChange?.(fromDate, "from");
+			onDateChange?.(toDate, "to");
+		}
+		setPresetBeforeCustom(void 0);
+		setCustomRangeOpen(false);
+	};
+	const showPresets = () => {
+		setCustomRangeOpen(false);
+		if (presetBeforeCustom) applyPreset(presetBeforeCustom);
+		setPresetMenuOpen(true);
+	};
+	const namedIndex = shownPreset === "custom" ? namedRanges.findIndex((r) => sameTime(r.from, dateFrom) && sameTime(r.to, dateTo)) : -1;
+	const named = namedRanges[namedIndex];
+	const canReset = defaultPreset !== void 0 && shownPreset === "custom" && !named;
+	const editingCustomRange = shownPreset === "custom" && !presetMenuOpen && (!named || customRangeOpen);
+	const label = named ? named.label : shownPreset === "custom" ? customRangeLabel(dateFrom, dateTo) : datePresetLabel;
+	const applyNamedRange = (range) => {
+		setPresetMenuOpen(false);
+		onPresetChange?.("custom");
+		applyCustomRange(range.from, range.to);
+	};
+	const trigger = /* @__PURE__ */ jsx(Button, {
+		ref,
+		size,
+		disabled,
+		icon: /* @__PURE__ */ jsx(CalendarIcon, {}),
+		iconEnd: canReset ? void 0 : /* @__PURE__ */ jsx(TriggerChevron, {}),
+		children: label
+	});
+	return /* @__PURE__ */ jsxs(JoinReset, {
+		size,
+		reset: canReset && /* @__PURE__ */ jsx(ResetRangeButton, {
+			size,
+			disabled,
+			onReset: onReset ?? (() => applyPreset(defaultPreset))
+		}),
+		children: [editingCustomRange && /* @__PURE__ */ jsxs(Popover, {
+			open: customRangeOpen,
+			onOpenChange: setCustomRangeOpen,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, { render: trigger }), /* @__PURE__ */ jsx(PopoverContent, {
+				align: "start",
+				className: cn("w-auto p-0"),
+				children: /* @__PURE__ */ jsx(CustomRangeEditor, {
+					dateFrom,
+					dateTo,
+					disabled,
+					maxRangeMs,
+					minDate,
+					onApply: applyCustomRange,
+					onShowPresets: showPresets
+				})
+			})]
+		}), !editingCustomRange && /* @__PURE__ */ jsxs(DropdownMenu, {
+			open: presetMenuOpen,
+			onOpenChange: setPresetMenuOpen,
+			children: [/* @__PURE__ */ jsx(DropdownMenu.Trigger, { render: trigger }), /* @__PURE__ */ jsx(DropdownMenu.Content, {
+				align: "start",
+				children: /* @__PURE__ */ jsxs(DropdownMenu.RadioGroup, {
+					value: named ? `named-${namedIndex}` : shownPreset,
+					children: [
+						namedRanges.map((r, i) => /* @__PURE__ */ jsx(DropdownMenu.RadioItem, {
+							value: `named-${i}`,
+							disabled: outsideLimits(r, minDate, maxRangeMs),
+							closeOnClick: true,
+							onClick: () => applyNamedRange(r),
+							children: r.label
+						}, `named-${i}`)),
+						namedRanges.length > 0 && /* @__PURE__ */ jsx(DropdownMenu.Separator, {}),
+						visiblePresets.map((p) => /* @__PURE__ */ jsx(DropdownMenu.RadioItem, {
+							value: p.value,
+							closeOnClick: true,
+							onClick: () => handlePresetSelect(p.value),
+							children: p.label
+						}, p.value))
+					]
+				})
+			})]
+		})]
+	});
+}
+/** Switches a custom range back to the picker's default preset. */
+function ResetRangeButton({ size, disabled, onReset }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		size: `icon-${size}`,
+		tooltip: "Reset time range",
+		disabled,
+		onClick: onReset,
+		children: /* @__PURE__ */ jsx(XIcon, {})
+	});
+}
+/** The trigger alone, or joined with the reset × as one pill. */
+function JoinReset({ reset, size, children }) {
+	if (!reset) return children;
+	return /* @__PURE__ */ jsxs(ButtonsGroup, {
+		size,
+		children: [children, reset]
+	});
+}
+export { DateTimeRangePicker as t };
+
+//# sourceMappingURL=date-time-range-picker-BUjjjvo8.js.map

package/dist/date-time-range-picker-BUjjjvo8.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-time-range-picker-BUjjjvo8.js","names":[],"sources":["../src/ds/components/DateTimeRangePicker/custom-range-editor.tsx","../src/ds/components/DateTimeRangePicker/date-time-range-picker.tsx"],"sourcesContent":["import { differenceInCalendarMonths, format, isValid, parse, startOfDay, subMonths } from 'date-fns';\nimport { ArrowRight, Check, ChevronLeft } from 'lucide-react';\nimport { useId, useState } from 'react';\nimport type { DateRange } from 'react-day-picker';\nimport { Button } from '@/ds/components/Button/Button';\nimport { DatePicker } from '@/ds/components/DateTimePicker';\nimport { Field, FieldError } from '@/ds/components/Field';\nimport { Input } from '@/ds/components/Input';\nimport { Txt } from '@/ds/components/Txt';\n\nfunction formatDays(ms: number): string {\n  const days = Math.round(ms / (24 * 60 * 60 * 1000));\n  return `${days} day${days === 1 ? '' : 's'}`;\n}\n\n/** The draft day at the draft `HH:mm` time, or the start of the day when the time doesn't parse. */\nfunction combineDateAndTime(date: Date | undefined, timeStr: string): Date | undefined {\n  if (!date) return undefined;\n  const combined = parse(timeStr, 'HH:mm', startOfDay(date));\n  return isValid(combined) ? combined : startOfDay(date);\n}\n\nconst isTime = (timeStr: string) => isValid(parse(timeStr, 'HH:mm', new Date()));\n\n/** Why the drafts can't be applied, or `undefined` when they can. */\nfunction rangeProblem({\n  from,\n  to,\n  timesFilled,\n  maxRangeMs = Infinity,\n  firstDay,\n}: {\n  from: Date | undefined;\n  to: Date | undefined;\n  timesFilled: boolean;\n  maxRangeMs?: number;\n  firstDay: Date | undefined;\n}): string | undefined {\n  if (!timesFilled) return 'Enter a time for the start and end';\n  if (from && to && from > to) return 'Start date/time must be before end date/time';\n  if (from && to && to.getTime() - from.getTime() > maxRangeMs)\n    return `Range cannot be longer than ${formatDays(maxRangeMs)}`;\n  if (from && firstDay && from < firstDay) return `Range cannot start before ${format(firstDay, 'MMM d, yyyy')}`;\n  return undefined;\n}\n\n/** The left month of the two: the start's month when the range spans months, else the month before the end. */\nfunction firstShownMonth(from: Date | undefined, to: Date | undefined): Date | undefined {\n  if (from && to && differenceInCalendarMonths(to, from) >= 1) return from;\n  if (to) return subMonths(to, 1);\n  return from;\n}\n\nexport interface CustomRangeEditorProps {\n  dateFrom?: Date;\n  dateTo?: Date;\n  disabled?: boolean;\n  /** Widest range that can be applied, in milliseconds. */\n  maxRangeMs?: number;\n  /** Earliest day a range can start on. Days before it are disabled. */\n  minDate?: Date;\n  onApply: (from: Date | undefined, to: Date | undefined) => void;\n  onShowPresets: () => void;\n}\n\n/**\n * The custom range popover body: one two-month calendar where the first click picks the\n * start and the second the end, with both ends and their times under it. It mounts each time the\n * popover opens, so its drafts start from the current range.\n */\nexport function CustomRangeEditor({\n  dateFrom,\n  dateTo,\n  disabled,\n  maxRangeMs,\n  minDate,\n  onApply,\n  onShowPresets,\n}: CustomRangeEditorProps) {\n  const [range, setRange] = useState<DateRange | undefined>(\n    dateFrom || dateTo ? { from: dateFrom, to: dateTo } : undefined,\n  );\n  const [draftTimeFrom, setDraftTimeFrom] = useState(dateFrom ? format(dateFrom, 'HH:mm') : '00:00');\n  const [draftTimeTo, setDraftTimeTo] = useState(dateTo ? format(dateTo, 'HH:mm') : '23:59');\n  const [applyAttempted, setApplyAttempted] = useState(false);\n  const errorId = useId();\n\n  const fromDate = combineDateAndTime(range?.from, draftTimeFrom);\n  const toDate = combineDateAndTime(range?.to, draftTimeTo);\n  const firstDay = minDate ? startOfDay(minDate) : undefined;\n  // A cleared time field would otherwise apply that end at midnight without saying so.\n  const timesFilled = (!range?.from || isTime(draftTimeFrom)) && (!range?.to || isTime(draftTimeTo));\n  const problem = rangeProblem({ from: fromDate, to: toDate, timesFilled, maxRangeMs, firstDay });\n  // Shown after a failed Apply, and gone as soon as the drafts form a valid range again.\n  const error = applyAttempted ? problem : undefined;\n\n  const apply = () => {\n    if (problem) {\n      setApplyAttempted(true);\n      return;\n    }\n    onApply(fromDate, toDate);\n  };\n\n  return (\n    <div className=\"flex flex-col\">\n      <div\n        role=\"group\"\n        aria-label=\"Custom date range\"\n        aria-invalid={error ? true : undefined}\n        aria-describedby={error ? errorId : undefined}\n      >\n        <DatePicker\n          mode=\"range\"\n          numberOfMonths={2}\n          // Side by side, a month's spill-over days repeat its neighbour's, range and all.\n          showOutsideDays={false}\n          resetOnSelect\n          selected={range}\n          onSelect={setRange}\n          defaultMonth={firstShownMonth(dateFrom, dateTo)}\n          disabled={disabled || (firstDay ? { before: firstDay } : undefined)}\n          startMonth={firstDay}\n        />\n        {/* Start and end share one grid: labels on the first row, values on the second, so\n          the arrow centres on the values whatever the labels do. */}\n        <div className=\"grid grid-cols-[1fr_auto_1fr] gap-x-2 gap-y-1 px-3 pb-3\">\n          <RangeEnd\n            label=\"Start\"\n            date={range?.from}\n            time={draftTimeFrom}\n            onTimeChange={setDraftTimeFrom}\n            disabled={disabled}\n          />\n          <ArrowRight aria-hidden className=\"col-start-2 row-start-2 size-4 self-center text-muted-foreground\" />\n          <RangeEnd label=\"End\" date={range?.to} time={draftTimeTo} onTimeChange={setDraftTimeTo} disabled={disabled} />\n        </div>\n      </div>\n      <Field invalid={Boolean(error)}>\n        <FieldError id={errorId} className=\"px-4 pb-1\">\n          {error}\n        </FieldError>\n      </Field>\n      <div className=\"flex items-center gap-2 border-t border-border px-3 py-2\">\n        <Button icon={<ChevronLeft />} variant=\"ghost\" size=\"sm\" disabled={disabled} onClick={onShowPresets}>\n          Presets\n        </Button>\n        <Button className=\"ml-auto\" icon={<Check />} variant=\"primary\" size=\"sm\" onClick={apply} disabled={disabled}>\n          Apply\n        </Button>\n      </div>\n    </div>\n  );\n}\n\nfunction RangeEnd({\n  label,\n  date,\n  time,\n  onTimeChange,\n  disabled,\n}: {\n  label: string;\n  date: Date | undefined;\n  time: string;\n  onTimeChange: (value: string) => void;\n  disabled?: boolean;\n}) {\n  return (\n    <div className=\"row-span-2 grid min-w-0 grid-rows-subgrid\">\n      <Txt as=\"span\" variant=\"column\" tone=\"muted\" className=\"px-1\">\n        {label}\n      </Txt>\n      <div className=\"flex items-center gap-1\">\n        <Txt as=\"span\" variant=\"label\" tone={date ? undefined : 'muted'} className=\"min-w-0 flex-1 truncate px-1\">\n          {date ? format(date, 'MMM d, yyyy') : 'Select a day'}\n        </Txt>\n        <Input\n          type=\"time\"\n          size=\"sm\"\n          aria-label={`${label} time`}\n          value={time}\n          onChange={e => onTimeChange(e.target.value)}\n          disabled={disabled}\n          className=\"w-24 shrink-0 [&::-webkit-calendar-picker-indicator]:hidden\"\n        />\n      </div>\n    </div>\n  );\n}\n","import { startOfDay } from 'date-fns';\nimport { CalendarIcon, XIcon } from 'lucide-react';\nimport { useState } from 'react';\nimport type { ReactNode, Ref } from 'react';\nimport { CustomRangeEditor } from './custom-range-editor';\nimport { Button, TriggerChevron } from '@/ds/components/Button/Button';\nimport type { TextButtonSize } from '@/ds/components/Button/Button';\nimport { ButtonsGroup } from '@/ds/components/ButtonsGroup/buttons-group';\nimport { DropdownMenu } from '@/ds/components/DropdownMenu/dropdown-menu';\nimport { Popover, PopoverTrigger, PopoverContent } from '@/ds/components/Popover/popover';\nimport { cn } from '@/lib/utils';\n\nexport type DateRangePreset = 'all' | 'last-24h' | 'last-3d' | 'last-7d' | 'last-14d' | 'last-30d' | 'custom';\n\nconst DATE_PRESETS: { value: DateRangePreset; label: string; ms?: number }[] = [\n  { value: 'all', label: 'All' },\n  { value: 'last-24h', label: 'Last 24 hours', ms: 24 * 60 * 60 * 1000 },\n  { value: 'last-3d', label: 'Last 3 days', ms: 3 * 24 * 60 * 60 * 1000 },\n  { value: 'last-7d', label: 'Last 7 days', ms: 7 * 24 * 60 * 60 * 1000 },\n  { value: 'last-14d', label: 'Last 14 days', ms: 14 * 24 * 60 * 60 * 1000 },\n  { value: 'last-30d', label: 'Last 30 days', ms: 30 * 24 * 60 * 60 * 1000 },\n  { value: 'custom', label: 'Custom range...' },\n];\n\nconst sameTime = (a: Date | undefined, b: Date | undefined) => a?.getTime() === b?.getTime();\n\n/**\n * Whether a named range breaks the limits the custom editor enforces: it starts before\n * `minDate`'s day, or spans more than `maxRangeMs` (an open end counts up to now).\n */\nfunction outsideLimits(range: DateTimeRangePickerNamedRange, minDate?: Date, maxRangeMs?: number) {\n  const tooEarly = minDate !== undefined && range.from < startOfDay(minDate);\n  const span = (range.to ?? new Date()).getTime() - range.from.getTime();\n  const tooWide = maxRangeMs !== undefined && span > maxRangeMs;\n  return tooEarly || tooWide;\n}\n\nconst fmtClock = (d: Date) =>\n  d.toLocaleTimeString('en-US', d.getMinutes() === 0 ? { hour: 'numeric' } : { hour: 'numeric', minute: '2-digit' });\n\n/**\n * A custom range as day and time, kept short: `Oct 21, 2:05 PM – 4 PM` within one day,\n * `Oct 20, 12 AM – Oct 27, 9:30 AM` across days, with years only outside the current one.\n */\nfunction customRangeLabel(dateFrom: Date | undefined, dateTo: Date | undefined) {\n  const thisYear = new Date().getFullYear();\n  const withYear = [dateFrom, dateTo].some(d => d && d.getFullYear() !== thisYear);\n  const fmtDay = (d: Date) =>\n    d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', ...(withYear && { year: 'numeric' }) });\n  const fmtMoment = (d: Date) => `${fmtDay(d)}, ${fmtClock(d)}`;\n\n  const start = dateFrom ? fmtMoment(dateFrom) : 'Start';\n  if (!dateTo) return `${start} \\u2013 End`;\n  const sameDay = dateFrom !== undefined && fmtDay(dateFrom) === fmtDay(dateTo);\n  return `${start} \\u2013 ${sameDay ? fmtClock(dateTo) : fmtMoment(dateTo)}`;\n}\n\n/** A fixed range offered beside the presets, e.g. the current billing period. */\nexport type DateTimeRangePickerNamedRange = { label: string; from: Date; to?: Date };\n\nexport interface DateTimeRangePickerProps {\n  preset?: DateRangePreset;\n  onPresetChange?: (preset: DateRangePreset) => void;\n  dateFrom?: Date;\n  dateTo?: Date;\n  onDateChange?: (value: Date | undefined, type: 'from' | 'to') => void;\n  /**\n   * Called once with both ends when a custom range is applied. When provided it replaces\n   * the two `onDateChange` calls for that step, so consumers can write the range atomically.\n   */\n  onDateRangeChange?: (from: Date | undefined, to: Date | undefined) => void;\n  disabled?: boolean;\n  /** Widest custom range that can be applied, in milliseconds. Presets are unaffected. */\n  maxRangeMs?: number;\n  /** Earliest day a custom range can start on, e.g. the oldest data still kept. Earlier days are disabled. */\n  minDate?: Date;\n  /** Subset of presets to show. If omitted, all presets are shown. */\n  presets?: readonly DateRangePreset[];\n  /**\n   * Fixed ranges listed above the presets, e.g. `{ label: 'This period', from: periodStart }`.\n   * Picking one applies it as a custom range; while it's applied the trigger shows its label.\n   */\n  namedRanges?: readonly DateTimeRangePickerNamedRange[];\n  /** Size of the trigger Button. Defaults to 'sm', the toolbar rung. */\n  size?: TextButtonSize;\n  /**\n   * The preset a custom range resets to. While a custom range is applied, a × joined to the\n   * trigger takes the chevron's place and switches back to it.\n   */\n  defaultPreset?: DateRangePreset;\n  /** Replaces what the reset × does, e.g. to undo a histogram zoom before falling back to `defaultPreset`. */\n  onReset?: () => void;\n  /** The trigger Button. */\n  ref?: Ref<HTMLButtonElement>;\n}\n\nexport function DateTimeRangePicker({\n  preset = 'all',\n  onPresetChange,\n  dateFrom,\n  dateTo,\n  onDateChange,\n  onDateRangeChange,\n  disabled,\n  maxRangeMs,\n  minDate,\n  presets,\n  namedRanges = [],\n  size = 'sm',\n  defaultPreset,\n  onReset,\n  ref,\n}: DateTimeRangePickerProps) {\n  const visiblePresets = presets ? DATE_PRESETS.filter(p => presets.includes(p.value)) : DATE_PRESETS;\n  const [customRangeOpen, setCustomRangeOpen] = useState(false);\n  const [presetMenuOpen, setPresetMenuOpen] = useState(false);\n  // The preset active before \"Custom range...\" was picked, until a range is applied.\n  // \"← Presets\" restores it instead of jumping to the first preset in the list.\n  const [presetBeforeCustom, setPresetBeforeCustom] = useState<DateRangePreset | undefined>();\n\n  // \"← Presets\" restores the previous preset through the parent, which may apply it a\n  // render later (e.g. a router URL update). Show it right away instead of \"custom\".\n  const restoringPreset = presetMenuOpen && preset === 'custom' ? presetBeforeCustom : undefined;\n  const shownPreset = restoringPreset ?? preset;\n  const datePresetLabel = DATE_PRESETS.find(p => p.value === shownPreset)?.label ?? 'All';\n\n  const applyPreset = (value: DateRangePreset) => {\n    onPresetChange?.(value);\n    const entry = DATE_PRESETS.find(p => p.value === value);\n    if (entry?.ms) {\n      onDateChange?.(new Date(Date.now() - entry.ms), 'from');\n      onDateChange?.(undefined, 'to');\n    } else {\n      onDateChange?.(undefined, 'from');\n      onDateChange?.(undefined, 'to');\n    }\n  };\n\n  const handlePresetSelect = (value: DateRangePreset) => {\n    setPresetMenuOpen(false);\n    if (value === 'custom') {\n      if (preset !== 'custom') setPresetBeforeCustom(preset);\n      onPresetChange?.(value);\n      setCustomRangeOpen(true);\n      return;\n    }\n    setPresetBeforeCustom(undefined);\n    applyPreset(value);\n  };\n\n  const applyCustomRange = (fromDate: Date | undefined, toDate: Date | undefined) => {\n    if (onDateRangeChange) {\n      onDateRangeChange(fromDate, toDate);\n    } else {\n      onDateChange?.(fromDate, 'from');\n      onDateChange?.(toDate, 'to');\n    }\n    setPresetBeforeCustom(undefined);\n    setCustomRangeOpen(false);\n  };\n\n  // Back to the preset list. Restores the preset the user came from; an applied custom\n  // range matches no preset, so it stays and the list shows \"Custom range...\" as current.\n  const showPresets = () => {\n    setCustomRangeOpen(false);\n    if (presetBeforeCustom) applyPreset(presetBeforeCustom);\n    setPresetMenuOpen(true);\n  };\n\n  // The applied custom range, when it is one of the named ranges.\n  const namedIndex =\n    shownPreset === 'custom' ? namedRanges.findIndex(r => sameTime(r.from, dateFrom) && sameTime(r.to, dateTo)) : -1;\n  const named = namedRanges[namedIndex];\n  const canReset = defaultPreset !== undefined && shownPreset === 'custom' && !named;\n  // A named range shows the preset list, unless \"Custom range...\" was picked to edit it.\n  const editingCustomRange = shownPreset === 'custom' && !presetMenuOpen && (!named || customRangeOpen);\n  const label = named ? named.label : shownPreset === 'custom' ? customRangeLabel(dateFrom, dateTo) : datePresetLabel;\n\n  const applyNamedRange = (range: DateTimeRangePickerNamedRange) => {\n    setPresetMenuOpen(false);\n    onPresetChange?.('custom');\n    applyCustomRange(range.from, range.to);\n  };\n  const trigger = (\n    <Button\n      ref={ref}\n      size={size}\n      disabled={disabled}\n      icon={<CalendarIcon />}\n      iconEnd={canReset ? undefined : <TriggerChevron />}\n    >\n      {label}\n    </Button>\n  );\n\n  return (\n    <JoinReset\n      size={size}\n      reset={\n        canReset && (\n          <ResetRangeButton size={size} disabled={disabled} onReset={onReset ?? (() => applyPreset(defaultPreset))} />\n        )\n      }\n    >\n      {editingCustomRange && (\n        <Popover open={customRangeOpen} onOpenChange={setCustomRangeOpen}>\n          <PopoverTrigger render={trigger} />\n          <PopoverContent align=\"start\" className={cn('w-auto p-0')}>\n            <CustomRangeEditor\n              dateFrom={dateFrom}\n              dateTo={dateTo}\n              disabled={disabled}\n              maxRangeMs={maxRangeMs}\n              minDate={minDate}\n              onApply={applyCustomRange}\n              onShowPresets={showPresets}\n            />\n          </PopoverContent>\n        </Popover>\n      )}\n      {!editingCustomRange && (\n        <DropdownMenu open={presetMenuOpen} onOpenChange={setPresetMenuOpen}>\n          <DropdownMenu.Trigger render={trigger} />\n          <DropdownMenu.Content align=\"start\">\n            {/* Items select on click (not onValueChange) so re-picking the checked\n              \"Custom range...\" still reopens the range editor. */}\n            <DropdownMenu.RadioGroup value={named ? `named-${namedIndex}` : shownPreset}>\n              {namedRanges.map((r, i) => (\n                <DropdownMenu.RadioItem\n                  key={`named-${i}`}\n                  value={`named-${i}`}\n                  disabled={outsideLimits(r, minDate, maxRangeMs)}\n                  closeOnClick\n                  onClick={() => applyNamedRange(r)}\n                >\n                  {r.label}\n                </DropdownMenu.RadioItem>\n              ))}\n              {namedRanges.length > 0 && <DropdownMenu.Separator />}\n              {visiblePresets.map(p => (\n                <DropdownMenu.RadioItem\n                  key={p.value}\n                  value={p.value}\n                  closeOnClick\n                  onClick={() => handlePresetSelect(p.value)}\n                >\n                  {p.label}\n                </DropdownMenu.RadioItem>\n              ))}\n            </DropdownMenu.RadioGroup>\n          </DropdownMenu.Content>\n        </DropdownMenu>\n      )}\n    </JoinReset>\n  );\n}\n\n/** Switches a custom range back to the picker's default preset. */\nfunction ResetRangeButton({\n  size,\n  disabled,\n  onReset,\n}: {\n  size: TextButtonSize;\n  disabled?: boolean;\n  onReset: () => void;\n}) {\n  return (\n    <Button\n      type=\"button\"\n      size={`icon-${size}` as const}\n      tooltip=\"Reset time range\"\n      disabled={disabled}\n      onClick={onReset}\n    >\n      <XIcon />\n    </Button>\n  );\n}\n\n/** The trigger alone, or joined with the reset × as one pill. */\nfunction JoinReset({ reset, size, children }: { reset: ReactNode; size: TextButtonSize; children: ReactNode }) {\n  if (!reset) return children;\n  return (\n    <ButtonsGroup size={size}>\n      {children}\n      {reset}\n    </ButtonsGroup>\n  );\n}\n"],"mappings":"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"}

package/dist/domains/auth/components/permission-denied.cjs.js

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_EmptyState = require("../../../EmptyState-DxDHlYqD.cjs");
+const require_EmptyState = require("../../../EmptyState-Dc-sP95H.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
 // src/domains/auth/components/permission-denied.tsx

package/dist/domains/auth/components/permission-denied.es.js

@@ -1,4 +1,4 @@
-import { n as EmptyState } from "../../../EmptyState-P-Gy898T.js";
+import { n as EmptyState } from "../../../EmptyState-i88y1x75.js";
 import { jsx } from "react/jsx-runtime";
 import { LockIcon } from "lucide-react";
 // src/domains/auth/components/permission-denied.tsx

package/dist/domains/auth/components/session-expired.cjs.js

@@ -1,7 +1,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Button = require("../../../Button-DLcMcuUL.cjs");
-const require_toast_api = require("../../../toast-api-qtkOucy2.cjs");
-const require_EmptyState = require("../../../EmptyState-DxDHlYqD.cjs");
+const require_Button = require("../../../Button-BfICfyxD.cjs");
+const require_EmptyState = require("../../../EmptyState-Dc-sP95H.cjs");
+const require_toast_api = require("../../../toast-api-DDcGCbIw.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");

package/dist/domains/auth/components/session-expired.es.js

@@ -1,6 +1,6 @@
-import { t as Button } from "../../../Button-CLXTbAY8.js";
-import { t as toast } from "../../../toast-api-D_rrRhNG.js";
-import { n as EmptyState } from "../../../EmptyState-P-Gy898T.js";
+import { t as Button } from "../../../Button-Bi7aXd_G.js";
+import { n as EmptyState } from "../../../EmptyState-i88y1x75.js";
+import { t as toast } from "../../../toast-api-Cak5N8pT.js";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { LogInIcon, TimerOffIcon } from "lucide-react";

package/dist/domains/chat/activity/activity-stretch-line.cjs.js

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_domains_chat_activity_use_activity_disclosure = require("./use-activity-disclosure.cjs.js");
-const require_activity = require("../../../activity-CcQZeDYi.cjs");
 const require_domains_chat_activity_components_activity_fold = require("./components/activity-fold.cjs.js");
 const require_domains_chat_activity_components_stretch_content = require("./components/stretch-content.cjs.js");
 const require_domains_chat_activity_model_activity_segments = require("./model/activity-segments.cjs.js");
+const require_domains_chat_activity_use_activity_disclosure = require("./use-activity-disclosure.cjs.js");
+const require_activity = require("../../../activity-Ciolopq8.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/domains/chat/activity/activity-stretch-line.tsx
 function isCall(member) {

package/dist/domains/chat/activity/activity-stretch-line.es.js

@@ -1,8 +1,8 @@
-import { ActivityDisclosureContext, useDisclosureStore, useIsOpen } from "./use-activity-disclosure.es.js";
-import { r as hasReasoningText } from "../../../activity-C8Ql81WM.js";
 import { ActivityFold } from "./components/activity-fold.es.js";
 import { StretchContent } from "./components/stretch-content.es.js";
 import { activitySegments } from "./model/activity-segments.es.js";
+import { ActivityDisclosureContext, useDisclosureStore, useIsOpen } from "./use-activity-disclosure.es.js";
+import { r as hasReasoningText } from "../../../activity-BH_eegMA.js";
 import { jsx } from "react/jsx-runtime";
 // src/domains/chat/activity/activity-stretch-line.tsx
 function isCall(member) {

package/dist/domains/chat/activity/components/activity-fold.cjs.js

@@ -1,14 +1,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("../../../../utils-uDc1ofX1.cjs");
-const require_Txt = require("../../../../Txt-BnoSqxKE.cjs");
-const require_AgentIndicator = require("../../../../AgentIndicator-to30W73z.cjs");
-const require_activity = require("../../../../activity-CcQZeDYi.cjs");
-const require_Arrival = require("../../../../Arrival-Cs1oWjo4.cjs");
-const require_components_Shimmer = require("../../../../components/Shimmer.cjs.js");
 const require_domains_chat_activity_model_activity_words = require("../model/activity-words.cjs.js");
-const require_domains_chat_activity_components_activity_timed_trigger = require("./activity-timed-trigger.cjs.js");
 const require_domains_chat_activity_components_use_fading_edge = require("./use-fading-edge.cjs.js");
 const require_domains_chat_activity_components_use_rolling_words = require("./use-rolling-words.cjs.js");
+const require_AgentIndicator = require("../../../../AgentIndicator-zCokR2zb.cjs");
+const require_activity = require("../../../../activity-Ciolopq8.cjs");
+const require_Arrival = require("../../../../Arrival-Cs1oWjo4.cjs");
+const require_components_Shimmer = require("../../../../components/Shimmer.cjs.js");
+const require_Txt = require("../../../../Txt-_00wWxTd.cjs");
+const require_utils = require("../../../../utils-uDc1ofX1.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let lucide_react = require("lucide-react");
@@ -60,57 +59,54 @@ function ActivityFold({ calls, indicator = false, live, elapsedMs, open, onOpenC
 			...words,
 			detail: words.detail && relative(words.detail)
 		}),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_domains_chat_activity_components_activity_timed_trigger.ActivityTimedTrigger, {
-			at: calls[0]?.startedAt,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_activity.ActivityHeader, { children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_activity.ActivityIcon, {
-					className: require_utils.cn(pose && "[&_svg]:size-4"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FoldIcon, {
-						pose,
-						animates,
-						live,
-						fallback: words.icon
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-					ref: box,
-					className: "relative flex min-w-0",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Shimmer.Shimmer, {
-						ref: said,
-						active: live,
-						className: "-my-1 flex min-w-0 items-center gap-2 overflow-hidden py-1",
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Arrival.Unwatched, { children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_activity.ActivityLabel, {
-								className: require_utils.cn(prominent && "text-body font-medium", UNTRUNCATED),
-								children: words.label
-							}),
-							words.detail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_activity.ActivityDetail, {
-								className: require_utils.cn(prominent && "text-body", UNTRUNCATED),
-								children: words.detail
-							}),
-							words.duration && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_activity.ActivityLabel, {
-								className: require_utils.cn(prominent && "text-body font-medium", "-ml-1 tabular-nums"),
-								children: ["· ", words.duration]
-							}),
-							failed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
-								size: 13,
-								role: "img",
-								"aria-label": "Failed",
-								className: "shrink-0 text-destructive-foreground"
-							}),
-							outcomeLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
-								as: "span",
-								variant: "meta",
-								tone: "muted",
-								className: require_utils.cn("shrink-0 tabular-nums", prominent && "text-body-sm"),
-								children: outcomeLabel
-							})
-						] })
-					})
-				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_activity.ActivityDisclosure, {})
-			] })
-		}), children]
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_activity.ActivityTrigger, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_activity.ActivityHeader, { children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_activity.ActivityIcon, {
+				className: require_utils.cn(pose && "[&_svg]:size-4"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FoldIcon, {
+					pose,
+					animates,
+					live,
+					fallback: words.icon
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				ref: box,
+				className: "relative flex min-w-0",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_Shimmer.Shimmer, {
+					ref: said,
+					active: live,
+					className: "-my-1 flex min-w-0 items-center gap-2 overflow-hidden py-1",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Arrival.Unwatched, { children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_activity.ActivityLabel, {
+							className: require_utils.cn(prominent && "text-body font-medium", UNTRUNCATED),
+							children: words.label
+						}),
+						words.detail && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_activity.ActivityDetail, {
+							className: require_utils.cn(prominent && "text-body", UNTRUNCATED),
+							children: words.detail
+						}),
+						words.duration && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_activity.ActivityLabel, {
+							className: require_utils.cn(prominent && "text-body font-medium", "tabular-nums"),
+							children: words.duration
+						}),
+						failed && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+							size: 13,
+							role: "img",
+							"aria-label": "Failed",
+							className: "shrink-0 text-destructive-foreground"
+						}),
+						outcomeLabel && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Txt.Txt, {
+							as: "span",
+							variant: "meta",
+							tone: "muted",
+							className: require_utils.cn("shrink-0 tabular-nums", prominent && "text-body-sm"),
+							children: outcomeLabel
+						})
+					] })
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_activity.ActivityDisclosure, {})
+		] }) }), children]
 	});
 }
 exports.ActivityFold = ActivityFold;