@datum-cloud/datum-ui 3.7.1 → 3.10.0

package/dist/logs/index.mjs

@@ -1,19 +1,20 @@
 import { t as cn } from "../utils-CTIuhCOs.mjs";
 import { Skeleton } from "../skeleton/index.mjs";
-import { t as Badge } from "../badge-D7A6GfWn.mjs";
-import { t as useBreakpoint } from "../use-breakpoint-zY_JYINK.mjs";
+import { Badge } from "../badge/index.mjs";
+import { t as useBreakpoint } from "../use-breakpoint-Ce5tS4cU.mjs";
 import { t as useCopyToClipboard } from "../use-copy-to-clipboard-CWKWHLxI.mjs";
-import { t as Button } from "../button-Dj6cKrWj.mjs";
+import { t as Button } from "../button-Cn4KagBO.mjs";
 import { t as Sheet } from "../sheet-DEpEJ_Rk.mjs";
 import { t as Icon } from "../icon-wrapper-CIk2th6R.mjs";
+import { t as CopyStateIcon } from "../copy-state-icon-DMvXXsZm.mjs";
 import { c as getBrowserTimezone, t as DateTime, u as getTimezoneAbbreviation } from "../date-time-BBRVM9qb.mjs";
-import { t as Checkbox } from "../checkbox-CNljVnKj.mjs";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../collapsible/index.mjs";
-import { t as DateTimeRangePicker } from "../date-time-range-picker-RZX4CS4b.mjs";
+import { t as Checkbox } from "../checkbox-BAo5sbHk.mjs";
+import { n as CollapsibleContent, r as CollapsibleTrigger, t as Collapsible } from "../collapsible-B-KP3JZ-.mjs";
+import { t as DateTimeRangePicker } from "../date-time-range-picker-CqGGJTLS.mjs";
 import { TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/index.mjs";
 import { t as Input } from "../input-DsT5qkJn.mjs";
-import { Bot, ChevronDown, ChevronUp, Clock, Copy, Download, HelpCircle, Inbox, Monitor, RefreshCw, Search, SlidersHorizontal, Smartphone, Tablet, TriangleAlert, X } from "lucide-react";
-import { createContext, memo, use, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Bot, ChevronDown, ChevronUp, Clock, Download, HelpCircle, Inbox, Monitor, RefreshCw, Search, SlidersHorizontal, Smartphone, Tablet, TriangleAlert, X } from "lucide-react";
+import { createContext, memo, use, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { format, isSameDay } from "date-fns";
@@ -319,6 +320,322 @@ function useLogs() {
 	if (!context) throw new Error("Logs components must be used within <Logs.Root>");
 	return context;
 }
+// src/components/features/logs/utils/time-range.ts
+const MINUTE_MS$1 = 6e4;
+const HOUR_MS = 60 * MINUTE_MS$1;
+const DAY_MS$1 = 24 * HOUR_MS;
+function relativePreset(key, label, durationMs, shortcut) {
+	return {
+		key,
+		label,
+		shortcut,
+		getRange: () => {
+			const now = /* @__PURE__ */ new Date();
+			return {
+				from: new Date(now.getTime() - durationMs),
+				to: now
+			};
+		}
+	};
+}
+/**
+* Relative "Last N" windows offered by `Logs.Filters`. Keys are persisted on
+* `LogTimeRange.preset` so hosts can slide the window forward with
+* `resolveLogTimeRange` on refresh or while live tailing.
+*
+* Shortcuts follow the `picker` datetime presets (`1` / `2` / `H` / `W`) that
+* the logs picker is built on. Keys that mean something else in the pickers
+* (`3` is "Last 30 minutes" in `time-range-picker`, `D` is "Today") are not
+* reused, so muscle memory carries over between the two.
+*/
+const LOG_TIME_PRESETS = [
+	relativePreset("last-15m", "Last 15 minutes", 15 * MINUTE_MS$1, "1"),
+	relativePreset("last-30m", "Last 30 minutes", 30 * MINUTE_MS$1, "2"),
+	relativePreset("last-1h", "Last hour", HOUR_MS, "H"),
+	relativePreset("last-3h", "Last 3 hours", 3 * HOUR_MS),
+	relativePreset("last-6h", "Last 6 hours", 6 * HOUR_MS, "6"),
+	relativePreset("last-12h", "Last 12 hours", 12 * HOUR_MS),
+	relativePreset("last-24h", "Last 24 hours", DAY_MS$1),
+	relativePreset("last-7d", "Last 7 days", 7 * DAY_MS$1, "W")
+];
+function lastThirtyMinutes(now = /* @__PURE__ */ new Date()) {
+	return {
+		from: (/* @__PURE__ */ new Date(now.getTime() - 30 * MINUTE_MS$1)).toISOString(),
+		to: now.toISOString(),
+		preset: "last-30m"
+	};
+}
+/**
+* Re-anchor a preset range to `now`. Absolute ranges (no `preset`, or an
+* unknown key) are returned unchanged.
+*/
+function resolveLogTimeRange(range, now = /* @__PURE__ */ new Date()) {
+	if (!range.preset) return range;
+	const preset = LOG_TIME_PRESETS.find((item) => item.key === range.preset);
+	if (!preset) return range;
+	const { from, to } = preset.getRange("UTC");
+	const shift = now.getTime() - to.getTime();
+	return {
+		from: new Date(from.getTime() + shift).toISOString(),
+		to: now.toISOString(),
+		preset: range.preset
+	};
+}
+/** Human label for the time-range trigger: preset name, or a compact absolute range. */
+function logTimeRangeLabel(range) {
+	const preset = range.preset ? LOG_TIME_PRESETS.find((item) => item.key === range.preset) : void 0;
+	if (preset) return preset.label;
+	const from = new Date(range.from);
+	const to = new Date(range.to);
+	if (Number.isNaN(from.getTime()) || Number.isNaN(to.getTime())) return "Select range";
+	if (isSameDay(from, to)) return `${format(from, "MMM d, HH:mm")} – ${format(to, "HH:mm")}`;
+	return `${format(from, "MMM d, HH:mm")} – ${format(to, "MMM d, HH:mm")}`;
+}
+function filtersAreActive(filters) {
+	return Object.values(filters).some((values) => values.length > 0);
+}
+// src/components/features/logs/utils/url-state.ts
+/**
+* Query-string keys, before `prefix`. A preset range is written as
+* `range=last-1h`; a hand-picked one as `from` and `to` ISO timestamps. Each
+* selected facet value is its own `filter=<label>:<value>` entry.
+*/
+const LOGS_URL_KEYS = {
+	search: "q",
+	range: "range",
+	from: "from",
+	to: "to",
+	filter: "filter",
+	live: "live",
+	selected: "log"
+};
+/** Same rule as `buildLogQL`: anything else can't be a Loki label. */
+const LABEL_NAME$1 = /^[a-z_]\w*$/i;
+function keysFor(prefix = "") {
+	return {
+		search: `${prefix}${LOGS_URL_KEYS.search}`,
+		range: `${prefix}${LOGS_URL_KEYS.range}`,
+		from: `${prefix}${LOGS_URL_KEYS.from}`,
+		to: `${prefix}${LOGS_URL_KEYS.to}`,
+		filter: `${prefix}${LOGS_URL_KEYS.filter}`,
+		live: `${prefix}${LOGS_URL_KEYS.live}`,
+		selected: `${prefix}${LOGS_URL_KEYS.selected}`
+	};
+}
+function toParams(input) {
+	return typeof input === "string" ? new URLSearchParams(input) : input;
+}
+function isValidDate(value) {
+	return value !== null && value !== "" && !Number.isNaN(new Date(value).getTime());
+}
+function isKnownPreset(key) {
+	return LOG_TIME_PRESETS.some((preset) => preset.key === key);
+}
+function sameRange(a, b) {
+	if (a.preset || b.preset) return a.preset === b.preset;
+	return a.from === b.from && a.to === b.to;
+}
+function parseTimeRange(params, keys, fallback, now) {
+	const preset = params.get(keys.range);
+	if (preset && isKnownPreset(preset)) return resolveLogTimeRange({
+		from: "",
+		to: "",
+		preset
+	}, now);
+	const from = params.get(keys.from);
+	const to = params.get(keys.to);
+	if (isValidDate(from) && isValidDate(to) && new Date(from) < new Date(to)) return {
+		from: new Date(from).toISOString(),
+		to: new Date(to).toISOString()
+	};
+	return fallback.preset ? resolveLogTimeRange(fallback, now) : fallback;
+}
+function parseFilters(params, key) {
+	const filters = {};
+	for (const entry of params.getAll(key)) {
+		const split = entry.indexOf(":");
+		if (split <= 0) continue;
+		const name = entry.slice(0, split);
+		const value = entry.slice(split + 1);
+		if (!LABEL_NAME$1.test(name) || value === "") continue;
+		const values = filters[name] ?? (filters[name] = []);
+		if (!values.includes(value)) values.push(value);
+	}
+	return filters;
+}
+/**
+* Read logs state from a query string. Missing or malformed values fall back
+* to the defaults (`Logs.Root`'s own defaults), so a hand-edited or stale link
+* still opens. A preset range is resolved against `now`.
+*/
+function parseLogsUrlState(input, options = {}) {
+	const params = toParams(input);
+	const keys = keysFor(options.prefix);
+	const now = options.now ?? /* @__PURE__ */ new Date();
+	const fallback = options.defaultTimeRange ?? lastThirtyMinutes(now);
+	const live = params.get(keys.live);
+	return {
+		timeRange: parseTimeRange(params, keys, fallback, now),
+		filters: parseFilters(params, keys.filter),
+		search: params.get(keys.search) ?? "",
+		live: live === "1" || live === "true",
+		selectedId: params.get(keys.selected) || null
+	};
+}
+/**
+* Return a copy of `input` with the given parts of logs state written in.
+* Only the parts present in `state` are touched, and params the app owns are
+* kept. Defaults (no search, no filters, not live, the default range) are
+* left out so a fresh explorer has a clean URL.
+*/
+function writeLogsUrlState(input, state, options = {}) {
+	const params = new URLSearchParams(toParams(input));
+	const keys = keysFor(options.prefix);
+	if (state.timeRange !== void 0) {
+		params.delete(keys.range);
+		params.delete(keys.from);
+		params.delete(keys.to);
+		const range = state.timeRange;
+		if (!sameRange(range, options.defaultTimeRange ?? {
+			from: "",
+			to: "",
+			preset: "last-30m"
+		})) {
+			if (range.preset && isKnownPreset(range.preset)) params.set(keys.range, range.preset);
+			else if (isValidDate(range.from) && isValidDate(range.to)) {
+				params.set(keys.from, range.from);
+				params.set(keys.to, range.to);
+			}
+		}
+	}
+	if (state.filters !== void 0) {
+		params.delete(keys.filter);
+		for (const [name, values] of Object.entries(state.filters)) {
+			if (!LABEL_NAME$1.test(name)) continue;
+			for (const value of values) if (value !== "") params.append(keys.filter, `${name}:${value}`);
+		}
+	}
+	if (state.search !== void 0) {
+		if (state.search === "") params.delete(keys.search);
+		else params.set(keys.search, state.search);
+	}
+	if (state.live !== void 0) {
+		if (state.live) params.set(keys.live, "1");
+		else params.delete(keys.live);
+	}
+	if (state.selectedId !== void 0) {
+		if (state.selectedId) params.set(keys.selected, state.selectedId);
+		else params.delete(keys.selected);
+	}
+	return params;
+}
+/**
+* Just this explorer's params, as a query string in a fixed key order. It
+* parses to the same state as the full query string, and only changes when
+* one of these params does, so it works as a memo key: an unrelated app param
+* changing won't re-resolve a preset range (which would hand the host a new
+* `timeRange` and trigger a refetch).
+*/
+function logsUrlStateKey(input, options = {}) {
+	const params = toParams(input);
+	const own = new URLSearchParams();
+	for (const key of Object.values(keysFor(options.prefix))) for (const value of params.getAll(key)) own.append(key, value);
+	return own.toString();
+}
+// src/components/features/logs/hooks/use-logs-url-state.ts
+/** pushState/replaceState don't fire `popstate`, so writes announce themselves. */
+const LOCATION_CHANGE_EVENT = "datum-ui:logs-url-change";
+function subscribeToLocation(onChange) {
+	window.addEventListener("popstate", onChange);
+	window.addEventListener(LOCATION_CHANGE_EVENT, onChange);
+	return () => {
+		window.removeEventListener("popstate", onChange);
+		window.removeEventListener(LOCATION_CHANGE_EVENT, onChange);
+	};
+}
+const getLocationSearch = () => window.location.search;
+const getServerSearch = () => "";
+const setWindowSearchParams = (update, options) => {
+	const next = update(new URLSearchParams(window.location.search)).toString();
+	const url = `${window.location.pathname}${next ? `?${next}` : ""}${window.location.hash}`;
+	if (options?.replace === false) window.history.pushState(window.history.state, "", url);
+	else window.history.replaceState(window.history.state, "", url);
+	window.dispatchEvent(new Event(LOCATION_CHANGE_EVENT));
+};
+/**
+* Keep `Logs.Root`'s time range, filters, search, live toggle and open row in
+* the address bar, so a refresh or a shared link reopens the same view.
+*
+* ```tsx
+* const logsState = useLogsUrlState()
+* const query = buildLogQL({ matchers: logsState.filters, lineContains: logsState.search })
+* // fetch with query + resolveLogTimeRange(logsState.timeRange)
+*
+* <Logs.Root {...logsState} entries={entries} onRefresh={refetch}>
+*   <Logs.Explorer />
+* </Logs.Root>
+* ```
+*
+* With React Router, hand it the router's search params instead:
+*
+* ```tsx
+* const [searchParams, setSearchParams] = useSearchParams()
+* const logsState = useLogsUrlState({ searchParams, setSearchParams })
+* ```
+*/
+function useLogsUrlState(options = {}) {
+	const { searchParams, setSearchParams, prefix = "", defaultTimeRange, history = "replace" } = options;
+	const locationSearch = useSyncExternalStore(subscribeToLocation, getLocationSearch, getServerSearch);
+	const write = setSearchParams ?? setWindowSearchParams;
+	const replace = history !== "push";
+	const hasDefault = defaultTimeRange !== void 0;
+	const defaultFrom = defaultTimeRange?.from;
+	const defaultTo = defaultTimeRange?.to;
+	const defaultPreset = defaultTimeRange?.preset;
+	const urlOptions = useMemo(() => ({
+		prefix,
+		defaultTimeRange: hasDefault ? {
+			from: defaultFrom ?? "",
+			to: defaultTo ?? "",
+			preset: defaultPreset
+		} : void 0
+	}), [
+		prefix,
+		hasDefault,
+		defaultFrom,
+		defaultTo,
+		defaultPreset
+	]);
+	const ownQuery = logsUrlStateKey(searchParams ?? locationSearch, { prefix });
+	const state = useMemo(() => parseLogsUrlState(ownQuery, urlOptions), [ownQuery, urlOptions]);
+	const update = useCallback((patch) => {
+		write((prev) => writeLogsUrlState(prev, patch, urlOptions), { replace });
+	}, [
+		write,
+		urlOptions,
+		replace
+	]);
+	const onTimeRangeChange = useCallback((timeRange) => update({ timeRange }), [update]);
+	const onFiltersChange = useCallback((filters) => update({ filters }), [update]);
+	const onSearchChange = useCallback((search) => update({ search }), [update]);
+	const onLiveChange = useCallback((live) => update({ live }), [update]);
+	const onSelectedIdChange = useCallback((selectedId) => update({ selectedId }), [update]);
+	return useMemo(() => ({
+		...state,
+		onTimeRangeChange,
+		onFiltersChange,
+		onSearchChange,
+		onLiveChange,
+		onSelectedIdChange
+	}), [
+		state,
+		onTimeRangeChange,
+		onFiltersChange,
+		onSearchChange,
+		onLiveChange,
+		onSelectedIdChange
+	]);
+}
 function clampLogsDetailWidth(width, maxWidth) {
 	return Math.min(Math.max(Math.round(width), 400), maxWidth > 400 ? maxWidth : 400);
 }
@@ -688,9 +1005,29 @@ function keyedParams(params) {
 		};
 	});
 }
+/**
+* Icon button that copies `text` and shows a check until the copied state
+* resets. Each button owns its hook so only the one clicked flips.
+*/
+function LogsCopyButton({ text, label, small = false }) {
+	const [copied, copy] = useCopyToClipboard();
+	return /* @__PURE__ */ jsx(Button, {
+		type: "secondary",
+		theme: "borderless",
+		size: "icon",
+		className: small ? "-my-1 size-6" : void 0,
+		"aria-label": label,
+		onClick: () => copy(text, { withToast: true }),
+		children: /* @__PURE__ */ jsx(CopyStateIcon, {
+			copied,
+			size: small ? 14 : 16,
+			strokeWidth: 1,
+			absoluteStrokeWidth: true
+		})
+	});
+}
 const DetailBody = memo(({ showClose = true }) => {
 	const { selectedEntry, selectPrevious, selectNext, setSelectedId } = useLogs();
-	const [, copy] = useCopyToClipboard();
 	if (!selectedEntry) return null;
 	const parsed = parseLogLine(selectedEntry.line, selectedEntry.labels);
 	const displayLine = parsed.kind === "http" && !selectedEntry.line.trim() ? formatHttpLogLine(parsed) : selectedEntry.line;
@@ -729,13 +1066,9 @@ const DetailBody = memo(({ showClose = true }) => {
 							onClick: selectNext,
 							children: /* @__PURE__ */ jsx(Icon, { icon: ChevronDown })
 						}),
-						/* @__PURE__ */ jsx(Button, {
-							type: "secondary",
-							theme: "borderless",
-							size: "icon",
-							"aria-label": "Copy log line",
-							onClick: () => copy(displayLine, { withToast: true }),
-							children: /* @__PURE__ */ jsx(Icon, { icon: Copy })
+						/* @__PURE__ */ jsx(LogsCopyButton, {
+							text: displayLine,
+							label: "Copy log line"
 						}),
 						showClose && /* @__PURE__ */ jsx(Button, {
 							type: "secondary",
@@ -827,17 +1160,10 @@ const DetailBody = memo(({ showClose = true }) => {
 								children: [/* @__PURE__ */ jsx("span", {
 									className: "text-muted-foreground text-3xs font-medium",
 									children: "Client"
-								}), /* @__PURE__ */ jsx(Button, {
-									type: "secondary",
-									theme: "borderless",
-									size: "icon",
-									className: "-my-1 size-6",
-									"aria-label": "Copy user agent",
-									onClick: () => copy(client.raw, { withToast: true }),
-									children: /* @__PURE__ */ jsx(Icon, {
-										icon: Copy,
-										size: 14
-									})
+								}), /* @__PURE__ */ jsx(LogsCopyButton, {
+									text: client.raw,
+									label: "Copy user agent",
+									small: true
 								})]
 							}),
 							/* @__PURE__ */ jsxs("div", {
@@ -873,17 +1199,10 @@ const DetailBody = memo(({ showClose = true }) => {
 							children: [/* @__PURE__ */ jsx("span", {
 								className: "text-muted-foreground text-3xs font-medium",
 								children: "Search params"
-							}), /* @__PURE__ */ jsx(Button, {
-								type: "secondary",
-								theme: "borderless",
-								size: "icon",
-								className: "-my-1 size-6",
-								"aria-label": "Copy search params",
-								onClick: () => copy(`?${request.search}`, { withToast: true }),
-								children: /* @__PURE__ */ jsx(Icon, {
-									icon: Copy,
-									size: 14
-								})
+							}), /* @__PURE__ */ jsx(LogsCopyButton, {
+								text: `?${request.search}`,
+								label: "Copy search params",
+								small: true
 							})]
 						}), /* @__PURE__ */ jsx("dl", {
 							className: "flex flex-wrap gap-1.5",
@@ -1027,84 +1346,15 @@ function LogsDetail({ className }) {
 		}), /* @__PURE__ */ jsx(DetailBody, {})]
 	}) });
 }
-// src/components/features/logs/utils/time-range.ts
-const MINUTE_MS$1 = 6e4;
-const HOUR_MS = 60 * MINUTE_MS$1;
-const DAY_MS$1 = 24 * HOUR_MS;
-function relativePreset(key, label, durationMs, shortcut) {
-	return {
-		key,
-		label,
-		shortcut,
-		getRange: () => {
-			const now = /* @__PURE__ */ new Date();
-			return {
-				from: new Date(now.getTime() - durationMs),
-				to: now
-			};
-		}
-	};
-}
-/**
-* Relative "Last N" windows offered by `Logs.Filters`. Keys are persisted on
-* `LogTimeRange.preset` so hosts can slide the window forward with
-* `resolveLogTimeRange` on refresh or while live tailing.
-*
-* Shortcuts follow the `picker` datetime presets (`1` / `2` / `H` / `W`) that
-* the logs picker is built on. Keys that mean something else in the pickers
-* (`3` is "Last 30 minutes" in `time-range-picker`, `D` is "Today") are not
-* reused, so muscle memory carries over between the two.
-*/
-const LOG_TIME_PRESETS = [
-	relativePreset("last-15m", "Last 15 minutes", 15 * MINUTE_MS$1, "1"),
-	relativePreset("last-30m", "Last 30 minutes", 30 * MINUTE_MS$1, "2"),
-	relativePreset("last-1h", "Last hour", HOUR_MS, "H"),
-	relativePreset("last-3h", "Last 3 hours", 3 * HOUR_MS),
-	relativePreset("last-6h", "Last 6 hours", 6 * HOUR_MS, "6"),
-	relativePreset("last-12h", "Last 12 hours", 12 * HOUR_MS),
-	relativePreset("last-24h", "Last 24 hours", DAY_MS$1),
-	relativePreset("last-7d", "Last 7 days", 7 * DAY_MS$1, "W")
-];
-function lastThirtyMinutes(now = /* @__PURE__ */ new Date()) {
-	return {
-		from: (/* @__PURE__ */ new Date(now.getTime() - 30 * MINUTE_MS$1)).toISOString(),
-		to: now.toISOString(),
-		preset: "last-30m"
-	};
-}
-/**
-* Re-anchor a preset range to `now`. Absolute ranges (no `preset`, or an
-* unknown key) are returned unchanged.
-*/
-function resolveLogTimeRange(range, now = /* @__PURE__ */ new Date()) {
-	if (!range.preset) return range;
-	const preset = LOG_TIME_PRESETS.find((item) => item.key === range.preset);
-	if (!preset) return range;
-	const { from, to } = preset.getRange("UTC");
-	const shift = now.getTime() - to.getTime();
-	return {
-		from: new Date(from.getTime() + shift).toISOString(),
-		to: now.toISOString(),
-		preset: range.preset
-	};
-}
-/** Human label for the time-range trigger: preset name, or a compact absolute range. */
-function logTimeRangeLabel(range) {
-	const preset = range.preset ? LOG_TIME_PRESETS.find((item) => item.key === range.preset) : void 0;
-	if (preset) return preset.label;
-	const from = new Date(range.from);
-	const to = new Date(range.to);
-	if (Number.isNaN(from.getTime()) || Number.isNaN(to.getTime())) return "Select range";
-	if (isSameDay(from, to)) return `${format(from, "MMM d, HH:mm")} – ${format(to, "HH:mm")}`;
-	return `${format(from, "MMM d, HH:mm")} – ${format(to, "MMM d, HH:mm")}`;
-}
-function filtersAreActive(filters) {
-	return Object.values(filters).some((values) => values.length > 0);
-}
 // src/components/features/logs/components/filters.tsx
 function LogsFilterGroup({ facet, defaultOpen }) {
 	const { filters, toggleFilterValue } = useLogs();
 	const selected = filters[facet.name] ?? [];
+	const known = new Set(facet.options.map((option) => option.value));
+	const options = [...facet.options, ...selected.filter((value) => !known.has(value)).map((value) => ({
+		value,
+		count: void 0
+	}))];
 	return /* @__PURE__ */ jsxs(Collapsible, {
 		defaultOpen,
 		className: "border-b border-border",
@@ -1116,7 +1366,7 @@ function LogsFilterGroup({ facet, defaultOpen }) {
 			})]
 		}), /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("ul", {
 			className: "flex flex-col gap-1 px-3 pb-3",
-			children: facet.options.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", {
+			children: options.map((option) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("label", {
 				className: "hover:bg-muted/40 flex cursor-pointer items-center gap-2 rounded-md px-1 py-1 text-sm",
 				children: [
 					/* @__PURE__ */ jsx(Checkbox, {
@@ -1593,7 +1843,7 @@ function LogsSearch({ placeholder = "Search logs...", className }) {
 			onChange: (event) => setValue(event.target.value),
 			placeholder,
 			"aria-label": placeholder,
-			className: "pl-9",
+			className: "h-9 pl-9",
 			"data-slot": "logs-search"
 		})]
 	});
@@ -1981,6 +2231,53 @@ function buildLogQL({ matchers, lineContains } = {}) {
 	if (!text) return selector;
 	return `${selector} |= "${escapeQuoted(text)}"`;
 }
+// src/components/features/logs/utils/facet-counts.ts
+/** Same rule as `buildLogQL`: anything else can't be a Loki label. */
+const LABEL_NAME = /^[a-z_]\w*$/i;
+/** Whole seconds between `from` and `to`, at least 1. */
+function rangeSeconds({ from, to }) {
+	const ms = new Date(to).getTime() - new Date(from).getTime();
+	return Number.isFinite(ms) ? Math.max(1, Math.round(ms / 1e3)) : 1;
+}
+/**
+* LogQL that counts log lines per value of one label across a time range:
+*
+* ```
+* sum by (response_code) (count_over_time({route_name="my-alb"}[1800s]))
+* ```
+*
+* Run it as an instant query (`/loki/api/v1/query`) with `time` set to the
+* range's `to`, then pass the response to `facetFromLokiCounts`. Returns
+* `null` for a label name LogQL can't express. Works for indexed stream labels
+* and for structured metadata, which Loki can also group by.
+*/
+function buildLogFacetCountQuery({ label, matchers, timeRange }) {
+	if (!LABEL_NAME.test(label)) return null;
+	return `sum by (${label}) (count_over_time(${buildLogQL({ matchers })}[${rangeSeconds(timeRange)}s]))`;
+}
+/**
+* Turn the response to a `buildLogFacetCountQuery` query into a facet for
+* `Logs.Root`. Series without the label (lines that don't carry it) and zero
+* counts are skipped. Options are ordered the same way as `facetsFromEntries`.
+* Pass `label` to override the display name.
+*/
+function facetFromLokiCounts(name, response, options = {}) {
+	const counts = /* @__PURE__ */ new Map();
+	if (response?.status === "success" && response.data?.resultType === "vector") for (const sample of response.data.result) {
+		const value = sample.metric[name];
+		const count = Number(sample.value?.[1]);
+		if (!value || !Number.isFinite(count) || count <= 0) continue;
+		counts.set(value, (counts.get(value) ?? 0) + Math.round(count));
+	}
+	return {
+		name,
+		label: options.label ?? facetLabel(name),
+		options: [...counts.entries()].sort(([a], [b]) => compareFacetValues(name, a, b)).map(([value, count]) => ({
+			value,
+			count
+		}))
+	};
+}
 // src/components/features/logs/utils/flatten-loki.ts
 function nsToDate(timestampNs) {
 	try {
@@ -2024,4 +2321,4 @@ function flattenLokiStreams(response) {
 	});
 	return entries;
 }
-export { LOG_TIME_PRESETS, Logs, buildLogQL, facetsFromEntries, filterEntries, flattenLokiStreams, formatHttpLogLine, histogramFromEntries, httpStatusBadgeType, httpStatusTextClass, lastThirtyMinutes, logLineDisplay, logRequestHost, logTimeRangeLabel, logUserAgent, nsToDate, parseLogLine, parseUserAgent, resolveLogColumns, resolveLogTimeRange, searchableLogText, severityBadgeType, splitPathQuery, useLogs };
+export { LOGS_URL_KEYS, LOG_TIME_PRESETS, Logs, buildLogFacetCountQuery, buildLogQL, facetFromLokiCounts, facetsFromEntries, filterEntries, flattenLokiStreams, formatHttpLogLine, histogramFromEntries, httpStatusBadgeType, httpStatusTextClass, lastThirtyMinutes, logLineDisplay, logRequestHost, logTimeRangeLabel, logUserAgent, nsToDate, parseLogLine, parseLogsUrlState, parseUserAgent, resolveLogColumns, resolveLogTimeRange, searchableLogText, severityBadgeType, splitPathQuery, useLogs, useLogsUrlState, writeLogsUrlState };

package/dist/map/index.mjs

@@ -1 +1 @@
-export { k as Map, b as MapCircle, x as MapCircleMarker, h as MapControlContainer, o as MapDrawCircle, s as MapDrawControl, c as MapDrawDelete, l as MapDrawEdit, u as MapDrawMarker, d as MapDrawPolygon, f as MapDrawPolyline, p as MapDrawRectangle, m as MapDrawUndo, t as MapFeatureGroup, g as MapFullscreenControl, n as MapLayerGroup, r as MapLayers, i as MapLayersControl, _ as MapLocateControl, S as MapMarker, C as MapMarkerClusterGroup, w as MapPolygon, T as MapPolyline, E as MapPopup, D as MapRectangle, v as MapSearchControl, a as MapTileLayer, O as MapTooltip, y as MapZoomControl, j as PlaceAutocomplete, A as useLeaflet } from "../layers-XEND2WKv.mjs";
+export { k as Map, b as MapCircle, x as MapCircleMarker, h as MapControlContainer, o as MapDrawCircle, s as MapDrawControl, c as MapDrawDelete, l as MapDrawEdit, u as MapDrawMarker, d as MapDrawPolygon, f as MapDrawPolyline, p as MapDrawRectangle, m as MapDrawUndo, t as MapFeatureGroup, g as MapFullscreenControl, n as MapLayerGroup, r as MapLayers, i as MapLayersControl, _ as MapLocateControl, S as MapMarker, C as MapMarkerClusterGroup, w as MapPolygon, T as MapPolyline, E as MapPopup, D as MapRectangle, v as MapSearchControl, a as MapTileLayer, O as MapTooltip, y as MapZoomControl, j as PlaceAutocomplete, A as useLeaflet } from "../layers-BC1Ny49w.mjs";

package/dist/more-actions/index.mjs

@@ -1,3 +1,3 @@
 import { t as ActionRow } from "../action-row-BEzE9x37.mjs";
-import { t as MoreActions } from "../more-actions-D9k1ILzT.mjs";
+import { t as MoreActions } from "../more-actions-DXQiV-bN.mjs";
 export { ActionRow, MoreActions };

package/dist/{more-actions-D9k1ILzT.mjs → more-actions-DXQiV-bN.mjs}

@@ -1,7 +1,7 @@
-import { t as Button } from "./button-Dj6cKrWj.mjs";
+import { t as Button } from "./button-Cn4KagBO.mjs";
 import { t as Tooltip } from "./tooltip-OIySjJWW.mjs";
 import { t as cn } from "./utils-CTIuhCOs.mjs";
-import { t as ResponsiveDropdown } from "./responsive-dropdown-DsWgpE_i.mjs";
+import { t as ResponsiveDropdown } from "./responsive-dropdown-B9cDUeHt.mjs";
 import { t as ActionRow } from "./action-row-BEzE9x37.mjs";
 import { Ellipsis } from "lucide-react";
 import { useState } from "react";

package/dist/motion-chip-BczV7spP.mjs

@@ -0,0 +1,52 @@
+import { n as EASE, t as DURATION } from "./motion-DOrRbLmy.mjs";
+import { Badge } from "./badge/index.mjs";
+import { motion, useReducedMotion } from "motion/react";
+// src/components/features/_shared/motion-chip.tsx
+/** `Badge` as a Motion component, so chips can enter, exit and reflow. */
+const MotionBadge = motion.create(Badge);
+const ENTER = {
+	duration: DURATION.fast,
+	ease: EASE.out
+};
+const EXIT = {
+	duration: .1,
+	ease: EASE.out
+};
+/** Neighbours slide into a removed chip's gap a touch slower than it fades. */
+const REFLOW = {
+	duration: .2,
+	ease: EASE.out
+};
+/**
+* Motion props for a chip in a wrapping list, for use with `MotionBadge`
+* inside `<AnimatePresence initial={false} mode="popLayout">`.
+*
+* A chip scales up slightly as it fades in, and fades out a little faster
+* when removed. `popLayout` takes the leaving chip out of flow straight away,
+* and `layout="position"` slides the chips after it into the gap rather than
+* snapping. The list needs `position: relative` for `popLayout` to place the
+* leaving chip. Under reduced motion chips only fade and nothing slides.
+*/
+function useChipMotion() {
+	const reduceMotion = Boolean(useReducedMotion());
+	const scale = reduceMotion ? 1 : .85;
+	return {
+		initial: {
+			opacity: 0,
+			scale
+		},
+		animate: {
+			opacity: 1,
+			scale: 1,
+			transition: ENTER
+		},
+		exit: {
+			opacity: 0,
+			scale,
+			transition: EXIT
+		},
+		transition: { layout: REFLOW },
+		layout: reduceMotion ? false : "position"
+	};
+}
+export { useChipMotion as n, MotionBadge as t };