@parallelworks/ui 0.88.2 → 0.89.0

package/dist/components/Provider.d.ts

@@ -676,8 +676,11 @@ export interface UIStrings {
         changeValue: (values: string) => string;
         /** Joins the values a chip lists. */
         list: (values: string[]) => string;
-        /** A relative date preset: `today`, `-7d`, `-30d`, `-90d` or `month`; any `-Nd`. */
+        /** A relative date preset: `today`, `month` (so far), `year` (so far), `all` (every date),
+         *  any `-Nd` (the last N days) or any `-Nh` (the last N hours). */
         datePreset: (preset: string) => string;
+        /** At phone width, the toggle that shows a quick filter's other options: "+3 more". */
+        quickMore: (count: number) => string;
         /** The date picker's entry that picks days on a calendar. */
         customDate: string;
         /** Two days a filter spans. */

package/dist/components/Provider.js

@@ -647,9 +647,17 @@ var DEFAULTS = {
 			changeValue: (values) => `Value: ${values}`,
 			list: (values) => values.join(", "),
 			datePreset: (preset) => {
+				const named = {
+					today: "Today",
+					month: "This month",
+					year: "This year",
+					all: "All time"
+				};
 				const days = preset.match(/^-(\d+)d$/)?.[1];
-				return preset === "today" ? "Today" : preset === "month" ? "This month" : days ? `Last ${days} days` : preset;
+				const hours = preset.match(/^-(\d+)h$/)?.[1];
+				return named[preset] ?? (days ? `Last ${days} days` : hours ? `Last ${hours} hours` : preset);
 			},
+			quickMore: (count) => `+${count} more`,
 			customDate: "Custom…",
 			between: (from, to) => `${from} – ${to}`,
 			formatDate: (date, locale) => dayFormat(locale)[date.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? "short" : "medium"].format(date),

package/dist/components/ToggleGroup.d.ts

@@ -7,6 +7,9 @@ export interface ToggleGroupOption<T extends string> {
     /** How many items the option matches, after the label. */
     count?: number | undefined;
     disabled?: boolean | undefined;
+    /** `warning`: an option asking to be looked at, such as "Needs attention", whose label takes
+     *  the warning tone while it is off. */
+    tone?: 'warning' | undefined;
     testId?: string;
 }
 export interface ToggleGroupProps<T extends string> {
@@ -33,6 +36,11 @@ export interface ToggleGroupProps<T extends string> {
      *  of what the filter lets through. */
     'aria-describedby'?: string | undefined;
     testId?: string;
+    className?: string | undefined;
+    /** Whether an option that's off dims its icon so the pressed ones lead (default true).
+     *  `false` keeps icons whose color means something, such as status lamps, at full strength;
+     *  the fill and check still say which are on. */
+    dimIcons?: boolean | undefined;
 }
 /** Options that narrow a list, such as run statuses or job states, as a row of
  *  toggle buttons that wraps on a narrow screen. Pressing one adds it to the
@@ -44,4 +52,4 @@ export interface ToggleGroupProps<T extends string> {
  *  value, such as a time range, what to group by, or which view of the same
  *  data to show. A filter that may be off, or takes several values, is a
  *  `ToggleGroup`. */
-export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, allLabel, size, disabled, 'aria-describedby': describedBy, testId, }: ToggleGroupProps<T>): import("react").JSX.Element;
+export declare function ToggleGroup<T extends string>({ label, options, value, onValueChange, multiple, all, allLabel, size, disabled, 'aria-describedby': describedBy, testId, className, dimIcons, }: ToggleGroupProps<T>): import("react").JSX.Element;

package/dist/components/ToggleGroup.js

@@ -18,7 +18,7 @@ var ALL = "\0all";
 *  value, such as a time range, what to group by, or which view of the same
 *  data to show. A filter that may be off, or takes several values, is a
 *  `ToggleGroup`. */
-function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, allLabel, size = "sm", disabled = false, "aria-describedby": describedBy, testId }) {
+function ToggleGroup$1({ label, options, value, onValueChange, multiple = true, all = false, allLabel, size = "sm", disabled = false, "aria-describedby": describedBy, testId, className, dimIcons = true }) {
 	const strings = useStrings();
 	const allCount = typeof all === "object" ? all.count : void 0;
 	const pressed = all && value.length === 0 ? [ALL] : value;
@@ -26,7 +26,7 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 		"aria-label": label,
 		"aria-describedby": describedBy,
 		"data-testid": testId,
-		className: "flex flex-wrap items-center gap-1",
+		className: cx("flex flex-wrap items-center gap-1", className),
 		multiple,
 		disabled,
 		value: pressed,
@@ -42,7 +42,8 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 				value: ALL,
 				label: allLabel ?? strings.common.all,
 				count: allCount,
-				size
+				size,
+				dimIcon: dimIcons
 			}),
 			all && options.length > 0 && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
@@ -50,12 +51,13 @@ function ToggleGroup$1({ label, options, value, onValueChange, multiple = true,
 			}),
 			options.map((option) => /* @__PURE__ */ jsx(Chip, {
 				...option,
-				size
+				size,
+				dimIcon: dimIcons
 			}, option.value))
 		]
 	});
 }
-function Chip({ value, label, icon, count, disabled, testId, size }) {
+function Chip({ value, label, icon, count, disabled, tone, testId, size, dimIcon }) {
 	const locale = useLocale();
 	return /* @__PURE__ */ jsxs(Toggle, {
 		value,
@@ -64,10 +66,10 @@ function Chip({ value, label, icon, count, disabled, testId, size }) {
 		className: cx(buttonClasses({
 			variant: "outline",
 			size
-		}), "group focus-visible:-outline-offset-2 aria-pressed:bg-(--theme-accent-subtle)"),
+		}), "group focus-visible:-outline-offset-2 aria-pressed:bg-(--theme-accent-subtle)", tone === "warning" && "not-aria-pressed:text-(--theme-warning-text)"),
 		children: [
 			icon && /* @__PURE__ */ jsx("span", {
-				className: "inline-flex shrink-0 transition-opacity group-not-aria-pressed:opacity-55",
+				className: cx("inline-flex shrink-0 transition-opacity", dimIcon && "group-not-aria-pressed:opacity-55"),
 				children: icon
 			}),
 			label,

package/dist/list/ListFilterBar.d.ts

@@ -37,6 +37,10 @@ export interface ListFilterBarProps {
 /** The chips that say what narrows a list, under its toolbar: one per filter, each editable in
  *  place, then "+ Filter" and Clear (or Reset, where the page has default filters). It shows
  *  only while a filter is on or a field is required. At phone width it stops at two lines and
- *  a "+n filters" chip opens the rest in a sheet. */
-export declare function ListFilterBar({ filters, trailing, label, className }: ListFilterBarProps): import("react").JSX.Element | null;
+ *  a "+n filters" chip opens the rest in a sheet.
+ *
+ *  The list's quick filters show above the chips as toggles, always, setting the same filters
+ *  the chips edit. At phone width each keeps to one line, and "+n more" opens the rest in the
+ *  same sheet. */
+export declare function ListFilterBar({ filters, trailing, label, className }: ListFilterBarProps): false | import("react").JSX.Element | null;
 export {};

package/dist/list/ListFilterBar.js

@@ -9,6 +9,7 @@ import { Input } from "../components/Input.js";
 import { Combobox } from "../components/Combobox.js";
 import { Calendar } from "../components/DatePicker.js";
 import { Drawer } from "../components/Drawer.js";
+import { ToggleGroup } from "../components/ToggleGroup.js";
 import { DATE_PRESETS, fieldOperators, isDatePreset, isMultiple, operatorCount, parseDay, toDay } from "./filterModel.js";
 import { Menu } from "@base-ui/react/menu";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -458,7 +459,7 @@ function BooleanValuePicker({ filters, filter, open, onOpenChange, trigger }) {
 		}) })]
 	});
 }
-function DateValuePicker({ filters, filter, open, onOpenChange, trigger }) {
+function DateValuePicker({ filters, filter, field, open, onOpenChange, trigger }) {
 	const t = useStrings().filters;
 	const [custom, setCustom] = useState(false);
 	const [first, second] = filter.values;
@@ -484,7 +485,7 @@ function DateValuePicker({ filters, filter, open, onOpenChange, trigger }) {
 		className: "p-0",
 		children: [filter.op === "is" && /* @__PURE__ */ jsxs("div", {
 			className: cx("flex flex-col p-1", showCalendar && "border-b border-(--theme-border)"),
-			children: [DATE_PRESETS.map((preset) => /* @__PURE__ */ jsxs("button", {
+			children: [(field.presets ?? DATE_PRESETS).map((preset) => /* @__PURE__ */ jsxs("button", {
 				type: "button",
 				"aria-pressed": first === preset,
 				onClick: () => choosePreset(preset),
@@ -636,15 +637,177 @@ function AddFilterMenu({ filters, trigger, align = "start" }) {
 		children: menu
 	}) : menu;
 }
+var NO_TOGGLE = "\0none";
+/** A quick filter's toggles and what they show pressed, from the field's filter. */
+function quickToggles(filters, quick, field) {
+	const filter = filters.active.find((f) => f.field === quick.field);
+	if (field.kind === "boolean") {
+		const on = filter?.op === "is" && filter.values[0] !== "false";
+		return {
+			options: [{
+				value: "true",
+				label: field.label,
+				count: quick.counts?.["true"],
+				tone: quick.tone
+			}],
+			value: on ? ["true"] : filter ? [NO_TOGGLE] : [],
+			multiple: true
+		};
+	}
+	const multiple = quick.multiple ?? isMultiple(field);
+	const values = quick.values ?? (field.options ?? []).map((o) => o.value);
+	const options = values.map((value) => {
+		const option = field.options?.find((o) => o.value === value);
+		return {
+			value,
+			label: option?.label ?? field.valueLabel?.(value) ?? value,
+			icon: option?.icon,
+			count: quick.counts?.[value] ?? option?.count,
+			tone: quick.tone
+		};
+	});
+	const shows = filter?.op === "is" && filter.values.every((v) => values.includes(v)) && (multiple || filter.values.length === 1);
+	return {
+		options,
+		value: !filter ? [] : shows ? [...filter.values] : [NO_TOGGLE],
+		multiple
+	};
+}
+/** Whether a filter is said by its quick filter's toggles alone, so it needs no chip. */
+function saidByToggles(filters, filter) {
+	const quick = filters.quick.find((q) => q.field === filter.field);
+	const field = filters.fields.find((f) => f.key === filter.field);
+	if (!quick || !field || filters.draft === filter.field) return false;
+	const { value } = quickToggles(filters, quick, field);
+	return (value.length > 0 || Boolean(quick.all)) && !value.includes(NO_TOGGLE);
+}
+/** Every quick filter's toggles on one row, a rule between fields. On a narrow row they keep to
+*  one line, the pressed ones always among them, and "+n more" opens the rest in the sheet. */
+function QuickRow({ filters, groups, narrow, onMore, end, stacked = false }) {
+	const t = useStrings().filters;
+	const row = useRef(null);
+	const [limit, setLimit] = useState(null);
+	const [width, setWidth] = useState(0);
+	const fits = narrow && Boolean(onMore);
+	const built = groups.map(({ quick, field }) => {
+		const toggles = quickToggles(filters, quick, field);
+		return {
+			quick,
+			field,
+			toggles,
+			items: [...quick.all ? [{
+				value: ALL_ITEM,
+				pressed: toggles.value.length === 0
+			}] : [], ...toggles.options.map((o) => ({
+				value: o.value,
+				pressed: toggles.value.includes(o.value)
+			}))]
+		};
+	});
+	const total = built.reduce((n, g) => n + g.items.length, 0);
+	const keys = built.map((g) => g.items.map((i) => `${i.value}${i.pressed ? "+" : ""}`).join(",")).join("|");
+	useLayoutEffect(() => {
+		const el = row.current;
+		if (!el || !fits) return;
+		let last = el.getBoundingClientRect().width;
+		setWidth(last);
+		const observer = new ResizeObserver(() => {
+			const next = el.getBoundingClientRect().width;
+			if (next !== last) {
+				last = next;
+				setWidth(next);
+			}
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [fits]);
+	useLayoutEffect(() => setLimit(null), [
+		fits,
+		keys,
+		width
+	]);
+	useLayoutEffect(() => {
+		const el = row.current;
+		if (!el || !fits) return;
+		const tops = /* @__PURE__ */ new Set();
+		for (const button of el.querySelectorAll("button")) tops.add(Math.round(button.getBoundingClientRect().top));
+		const shown = limit ?? total;
+		if (tops.size > 1 && shown > 1) setLimit(shown - 1);
+	});
+	const cap = fits && limit !== null ? limit : total;
+	let index = 0;
+	let hidden = 0;
+	const parts = [];
+	for (const { quick, field, toggles, items } of built) {
+		const keep = /* @__PURE__ */ new Set();
+		for (const item of items) {
+			if (index < cap || item.pressed) keep.add(item.value);
+			else hidden += 1;
+			index += 1;
+		}
+		if (keep.size === 0) continue;
+		const all = quick.all;
+		const set = (next) => {
+			const values = next.filter((v) => v !== NO_TOGGLE);
+			if (values.length > 0) filters.update(quick.field, {
+				op: "is",
+				values
+			});
+			else if (field.required || field.pinned) filters.update(quick.field, { values: [] });
+			else filters.remove(quick.field);
+		};
+		if (parts.length > 0 && !stacked) parts.push(/* @__PURE__ */ jsx(QuickRule, {}, `rule-${quick.field}`));
+		parts.push(/* @__PURE__ */ jsx(ToggleGroup, {
+			label: field.label,
+			options: toggles.options.filter((o) => keep.has(o.value)),
+			value: toggles.value,
+			multiple: toggles.multiple,
+			all: keep.has(ALL_ITEM) && (typeof all === "object" ? { count: all.count } : all),
+			allLabel: typeof all === "object" ? all.label : void 0,
+			onValueChange: set,
+			dimIcons: false,
+			className: "min-w-0"
+		}, quick.field));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		ref: row,
+		className: cx("flex min-w-0", stacked ? "flex-col items-start gap-2" : "flex-wrap items-center gap-1"),
+		children: [
+			parts,
+			hidden > 0 && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onMore,
+				className: buttonClasses({
+					variant: "ghost",
+					size: "sm"
+				}),
+				children: t.quickMore(hidden)
+			}),
+			end
+		]
+	});
+}
+var ALL_ITEM = "\0all";
+function QuickRule() {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: "mx-1 h-5 w-px shrink-0 bg-(--theme-border)"
+	});
+}
 /** The chips that say what narrows a list, under its toolbar: one per filter, each editable in
 *  place, then "+ Filter" and Clear (or Reset, where the page has default filters). It shows
 *  only while a filter is on or a field is required. At phone width it stops at two lines and
-*  a "+n filters" chip opens the rest in a sheet. */
+*  a "+n filters" chip opens the rest in a sheet.
+*
+*  The list's quick filters show above the chips as toggles, always, setting the same filters
+*  the chips edit. At phone width each keeps to one line, and "+n more" opens the rest in the
+*  same sheet. */
 function ListFilterBar({ filters, trailing, label, className }) {
 	const strings = useStrings();
 	const t = strings.filters;
 	const registerBar = filters?.registerBar;
 	useEffect(() => registerBar?.(), [registerBar]);
+	const box = useRef(null);
 	const row = useRef(null);
 	const [narrow, setNarrow] = useState(false);
 	const [width, setWidth] = useState(0);
@@ -653,10 +816,18 @@ function ListFilterBar({ filters, trailing, label, className }) {
 	const [focusAt, setFocusAt] = useState(null);
 	const chips = filters ? orderedChips(filters) : [];
 	const fieldOf = (key) => filters?.fields.find((f) => f.key === key);
+	const quick = (filters?.quick ?? []).flatMap((q) => {
+		const field = fieldOf(q.field);
+		return field ? [{
+			quick: q,
+			field
+		}] : [];
+	});
 	const empty = chips.length === 0;
+	const hasQuick = quick.length > 0;
 	const chipKeys = chips.map((c) => c.filter.field).join("\0");
 	useLayoutEffect(() => {
-		const el = row.current;
+		const el = box.current;
 		if (!el) return;
 		const measure = () => {
 			const w = el.getBoundingClientRect().width;
@@ -667,7 +838,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 		const observer = new ResizeObserver(measure);
 		observer.observe(el);
 		return () => observer.disconnect();
-	}, [empty]);
+	}, [empty, hasQuick]);
 	useLayoutEffect(() => setLimit(null), [
 		width,
 		chipKeys,
@@ -694,7 +865,7 @@ function ListFilterBar({ filters, trailing, label, className }) {
 	useEffect(() => {
 		if (hiddenRequest) setSheet(true);
 	}, [hiddenRequest]);
-	if (!filters || empty) return null;
+	if (!filters || empty && !hasQuick) return null;
 	const removable = filters.active.some((f) => !fieldOf(f.field)?.required);
 	const resetting = filters.hasDefaults;
 	const clearButton = (resetting ? !filters.isDefault : removable) && /* @__PURE__ */ jsx("button", {
@@ -706,23 +877,53 @@ function ListFilterBar({ filters, trailing, label, className }) {
 		}),
 		children: resetting ? strings.common.reset : strings.common.clear
 	});
-	const addButton = /* @__PURE__ */ jsx(AddFilterMenu, {
+	const addButton = (narrow) => /* @__PURE__ */ jsx(AddFilterMenu, {
 		filters,
 		trigger: /* @__PURE__ */ jsxs("button", {
 			type: "button",
 			"data-filter-add": "",
+			"aria-label": narrow ? t.addFilter : void 0,
 			className: buttonClasses({
 				variant: "ghost",
-				size: "sm"
+				size: "sm",
+				iconOnly: narrow
 			}),
-			children: [/* @__PURE__ */ jsx(AddIcon, { "aria-hidden": "true" }), t.addFilter]
+			children: [/* @__PURE__ */ jsx(AddIcon, { "aria-hidden": "true" }), !narrow && t.addFilter]
 		})
 	});
-	return /* @__PURE__ */ jsxs("div", {
-		ref: row,
+	const drawer = /* @__PURE__ */ jsx(Drawer, {
+		open: sheet,
+		onClose: () => setSheet(false),
+		title: t.sheetTitle,
+		width: 400,
+		footer: /* @__PURE__ */ jsxs("div", {
+			className: "flex w-full items-center gap-1.5",
+			children: [addButton(false), clearButton]
+		}),
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-2",
+			children: [hasQuick && /* @__PURE__ */ jsx(QuickRow, {
+				filters,
+				groups: quick,
+				narrow: false,
+				stacked: true
+			}), chips.map(({ filter, field }) => /* @__PURE__ */ jsx(FilterChip, {
+				filters,
+				filter,
+				field,
+				stretch: true,
+				answers: sheet
+			}, filter.field))]
+		})
+	});
+	const chipRow = !empty && /* @__PURE__ */ jsxs("div", {
+		ref: hasQuick ? row : (node) => {
+			row.current = node;
+			box.current = node;
+		},
 		role: "group",
 		"aria-label": label ?? t.activeFilters,
-		className: cx("flex flex-wrap items-center gap-1.5 py-1.5", className),
+		className: cx("flex flex-wrap items-center gap-1.5", hasQuick ? void 0 : cx("py-1.5", className)),
 		children: [
 			shownChips.map(({ filter, field }, i) => /* @__PURE__ */ jsx(FilterChip, {
 				filters,
@@ -737,32 +938,32 @@ function ListFilterBar({ filters, trailing, label, className }) {
 				className: "flex h-7 cursor-pointer items-center rounded-md border border-dashed border-(--theme-border) px-2 text-[12px] text-(--theme-app) hover:bg-(--theme-hover) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--theme-focus)",
 				children: t.overflow(overflow)
 			}),
-			addButton,
+			addButton(narrow),
 			clearButton,
 			trailing && /* @__PURE__ */ jsx("div", {
 				className: "ml-auto flex items-center gap-1.5",
 				children: trailing
 			}),
-			/* @__PURE__ */ jsx(Drawer, {
-				open: sheet,
-				onClose: () => setSheet(false),
-				title: t.sheetTitle,
-				width: 400,
-				footer: /* @__PURE__ */ jsxs("div", {
-					className: "flex w-full items-center gap-1.5",
-					children: [addButton, clearButton]
-				}),
-				children: /* @__PURE__ */ jsx("div", {
-					className: "flex flex-col gap-2",
-					children: chips.map(({ filter, field }) => /* @__PURE__ */ jsx(FilterChip, {
-						filters,
-						filter,
-						field,
-						stretch: true,
-						answers: sheet
-					}, filter.field))
-				})
-			})
+			!hasQuick && drawer
+		]
+	});
+	if (!hasQuick) return chipRow;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		className: cx("flex min-w-0 flex-col gap-1.5 py-1.5", className),
+		children: [
+			/* @__PURE__ */ jsx(QuickRow, {
+				filters,
+				groups: quick,
+				narrow,
+				onMore: () => setSheet(true),
+				end: empty && /* @__PURE__ */ jsxs(Fragment$1, { children: [clearButton, trailing && /* @__PURE__ */ jsx("div", {
+					className: "ml-auto flex items-center gap-1.5",
+					children: trailing
+				})] })
+			}),
+			chipRow,
+			drawer
 		]
 	});
 }
@@ -784,7 +985,7 @@ function orderedChips(filters) {
 			field
 		});
 	}
-	return out;
+	return out.filter(({ filter }) => !saidByToggles(filters, filter));
 }
 //#endregion
 export { AddFilterMenu, FilterChip, ListFilterBar };

package/dist/list/filterModel.d.ts

@@ -51,6 +51,10 @@ export interface FilterField<T = never> {
     valueLabel?: ((value: string) => string | undefined) | undefined;
     /** enum and people: whether more than one value can be chosen (default true). */
     multiple?: boolean | undefined;
+    /** date: the presets its picker offers, in order, such as `['-24h', '-7d', '-30d', 'year',
+     *  'all']`. Defaults to {@link DATE_PRESETS}. Any `-Nh` or `-Nd` works, as do `today`,
+     *  `month`, `year` and `all`. */
+    presets?: readonly string[] | undefined;
     /** Whether the picker has a search field. Default: more than eight options, or `loadOptions`. */
     searchable?: boolean | undefined;
     /** Always shows its chip, with no remove button, reading "Any" while unset; Clear leaves it. */
@@ -65,6 +69,28 @@ export interface FilterField<T = never> {
      *  on the server. */
     matches?: ((row: T, filter: ActiveFilter) => boolean) | undefined;
 }
+/** A field's values as a row of toggles above the chips, for the few a reader picks most, such as
+ *  a job's state. The toggles set the same filter its chip edits, so either changes both. */
+export interface QuickFilter {
+    /** The field the toggles set. */
+    field: string;
+    /** enum and people: the options shown as toggles, in order; every option by default. */
+    values?: readonly string[] | undefined;
+    /** How many rows hold each value, shown after its label; a yes-or-no field's is under `true`.
+     *  An option's own `count` is used where this has none. */
+    counts?: Readonly<Record<string, number>> | undefined;
+    /** Leads with an "All" toggle, pressed while the field is unset, that clears it. `{ count }`
+     *  shows the total beside it and `{ label }` names what it covers, such as "All states". */
+    all?: boolean | {
+        count?: number | undefined;
+        label?: string | undefined;
+    } | undefined;
+    /** Whether several can be pressed at once; the field's own `multiple` by default. */
+    multiple?: boolean | undefined;
+    /** `warning`: a toggle asking to be looked at, such as "Needs attention", in the warning tone
+     *  while it is off. */
+    tone?: 'warning' | undefined;
+}
 /** One filter in effect: plain data, so it can go in a URL, storage or a saved view. */
 export interface ActiveFilter {
     field: string;
@@ -73,9 +99,12 @@ export interface ActiveFilter {
      *  relative wherever they are saved. A boolean is `true` or `false`. */
     values: readonly string[];
 }
-/** The relative date presets the date picker offers, as a filter stores them. */
+/** The relative date presets the date picker offers unless a field names its own, as a filter
+ *  stores them. */
 export declare const DATE_PRESETS: readonly ['today', '-7d', '-30d', '-90d', 'month'];
-export type DatePreset = (typeof DATE_PRESETS)[number];
+/** A relative date a filter can hold: today, this month or year so far, every date (`all`), or
+ *  the last N hours or days (`-24h`, `-365d`). */
+export type DatePreset = (typeof DATE_PRESETS)[number] | 'year' | 'all' | `-${number}h` | `-${number}d`;
 type AnyField = FilterField<any>;
 export declare function fieldOperators(field: AnyField): readonly FilterOperator[];
 export declare function isMultiple(field: AnyField): boolean;

package/dist/list/filterModel.js

@@ -1,5 +1,6 @@
 //#region src/list/filterModel.ts
-/** The relative date presets the date picker offers, as a filter stores them. */
+/** The relative date presets the date picker offers unless a field names its own, as a filter
+*  stores them. */
 var DATE_PRESETS = [
 	"today",
 	"-7d",
@@ -212,47 +213,72 @@ function parseDay(value) {
 }
 var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
 var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var NAMED_PRESETS = /* @__PURE__ */ new Set([
+	"today",
+	"month",
+	"year",
+	"all"
+]);
 function isDatePreset(value) {
-	return DATE_PRESETS.includes(value ?? "") || /^-\d+d$/.test(value ?? "");
+	return NAMED_PRESETS.has(value ?? "") || /^-\d+[dh]$/.test(value ?? "");
 }
-/** The days a preset or a day covers, as `[first, last]` local days, both included. */
-function presetDays(value, now) {
+/** The span a preset or a day covers: `from` included, `to` excluded, either open. Whole local
+*  days, except the last N hours, which run from that moment on. */
+function presetSpan(value, now) {
 	const today = startOfDay(now);
-	if (value === "today") return [today, today];
-	if (value === "month") return [new Date(today.getFullYear(), today.getMonth(), 1), today];
+	const tomorrow = addDays(today, 1);
+	if (value === "all") return {};
+	if (value === "today") return {
+		from: today,
+		to: tomorrow
+	};
+	if (value === "month") return {
+		from: new Date(today.getFullYear(), today.getMonth(), 1),
+		to: tomorrow
+	};
+	if (value === "year") return {
+		from: new Date(today.getFullYear(), 0, 1),
+		to: tomorrow
+	};
+	const hours = value.match(/^-(\d+)h$/);
+	if (hours) return { from: /* @__PURE__ */ new Date(now.getTime() - Number(hours[1]) * 36e5) };
 	const days = value.match(/^-(\d+)d$/);
-	if (days) return [addDays(today, 1 - Number(days[1])), today];
+	if (days) return {
+		from: addDays(today, 1 - Number(days[1])),
+		to: tomorrow
+	};
 	const day = parseDay(value);
-	return day ? [day, day] : void 0;
+	return day ? {
+		from: day,
+		to: addDays(day, 1)
+	} : void 0;
 }
 /** The span a date filter covers right now: `from` included, `to` excluded (the start of the
 *  day after the last), either open. Relative presets resolve against `now`. */
 function dateFilterRange(filter, now = /* @__PURE__ */ new Date()) {
 	const [first, second] = filter.values;
-	const days = (v) => v ? presetDays(v, now) : void 0;
+	const span = (v) => v ? presetSpan(v, now) : void 0;
+	const range = (from, to) => ({
+		...from && { from },
+		...to && { to }
+	});
 	switch (filter.op) {
 		case "is": {
-			const span = days(first);
-			return span && {
-				from: span[0],
-				to: addDays(span[1], 1)
-			};
+			const s = span(first);
+			return s && range(s.from, s.to);
 		}
 		case "after": {
-			const span = days(first);
-			return span && { from: span[0] };
+			const s = span(first);
+			return s && range(s.from, void 0);
 		}
 		case "before": {
-			const span = days(first);
-			return span && { to: addDays(span[1], 1) };
+			const s = span(first);
+			return s && range(void 0, s.to);
 		}
 		case "between": {
-			const a = days(first);
-			const b = days(second);
-			return a && b ? {
-				from: a[0],
-				to: addDays(b[1], 1)
-			} : void 0;
+			const a = span(first);
+			const b = span(second);
+			return a && b ? range(a.from, b.to) : void 0;
 		}
 		default: return;
 	}
@@ -291,6 +317,7 @@ function matchFilter(field, filter, row, now) {
 	}
 	if (field.kind === "date") {
 		const range = dateFilterRange(filter, now);
+		if (range && range.from === void 0 && range.to === void 0) return true;
 		const t = asTime(v);
 		if (!range || t === void 0) return range === void 0;
 		return (range.from === void 0 || t >= range.from.getTime()) && (range.to === void 0 || t < range.to.getTime());