@viniaraujo68/plinth 0.5.0 → 0.7.0

package/README.md

@@ -315,6 +315,17 @@ instead of wrapping, fading at the edge while tabs are hidden past it. `value` i
 that keeps its section in the URL passes it in and navigates on `onchange`, and `idPrefix` makes the
 tab ids predictable so the panel can name its tab through `aria-labelledby`.
 
+`DateRangePicker` picks a from/to pair from presets or two typed fields. By default it is a window
+of instants — presets are durations back from now ("24h"), the fields are local date-times and the
+pair goes out as UTC ISO strings. With `mode="date"` it is a span of calendar days: the fields are
+date fields, the pair is `YYYY-MM-DD`, and an empty end leaves that side open, so "since March" and
+"all time" are pairs too. Presets can follow the calendar instead of a duration — `thisMonth`,
+`lastMonth`, `lastMonths(n)` and `allTime` build the usual ones, and any `range(now)` function will
+do. Every preset re-anchors on a timer, and a picker handed a pair opens on the preset that names it.
+`caption` puts visible text before the presets, as on `SegmentedControl`, and `size` (`sm` or `md`)
+sizes the presets and the typed fields together, so the fields line up with the buttons.
+`fieldLabels` puts the field labels `"above"` their fields (the default) or `"beside"` them.
+
 `JsonInput` edits a JSON document as text: it reports through a bindable `invalid` whether the text
 parses, shows the parser's message after the first blur, can reindent on blur, and sets the
 textarea's custom validity so a form will not submit a broken document. `parseJsonText` and

package/dist/components/DateRangePicker.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import type { ClassValue } from "svelte/elements";
+  import SegmentedControl from "./SegmentedControl.svelte";
   import {
     anchorSelection,
     buildRange,
@@ -8,27 +9,38 @@
     CUSTOM_PRESET_ID,
     DEFAULT_PRESETS,
     isoToLocalInput,
+    isValidDayRange,
     isValidRange,
     localInputToIso,
+    parseDay,
+    selectionFor,
     type DateRange,
+    type DateRangeMode,
     type DateRangePreset,
   } from "./date-range.js";
 
   interface Props {
     class?: ClassValue;
     /**
-     * The selected window, as UTC ISO instants. Bindable, and also reported through
-     * {@link Props.onchange} — a consumer needs one or the other, never both.
+     * `"datetime"` (the default) picks a window of instants, emitted as UTC ISO strings, with
+     * date-and-time fields. `"date"` picks a span of calendar days, emitted as `YYYY-MM-DD`, with
+     * date fields either of which may stay empty to leave that side open.
+     */
+    mode?: DateRangeMode;
+    /**
+     * The selected window — UTC ISO instants, or days in `"date"` mode. Bindable, and also reported
+     * through {@link Props.onchange} — a consumer needs one or the other, never both.
      *
      * It is an output, not an input: a relative preset overwrites it on every anchor. Passing one
-     * in only seeds the picker, and only alongside `preset="custom"`.
+     * in only seeds the picker: it opens on the preset that names that window right now, or on
+     * custom with the pair in the fields.
      */
     value?: DateRange;
     /** The buttons offered. `id` may not be `"custom"`, which the picker reserves. */
     presets?: readonly DateRangePreset[];
     /**
-     * Which button starts selected — a preset id, or `"custom"`. Defaults to the first preset, or
-     * to custom when `value` was seeded without naming a preset.
+     * Which button starts selected — a preset id, or `"custom"`. Defaults to the preset matching a
+     * seeded `value`, to custom when none does, and to the first preset when there is no `value`.
      */
     preset?: string;
     /**
@@ -51,11 +63,27 @@
     toLabel?: string;
     /** Shown, as an alert, while the typed pair is out of order. */
     invalidRangeLabel?: string;
+    /**
+     * Visible text before the presets — "Period:". Passed to the {@link SegmentedControl}, so it
+     * sits on the preset row; `label` stays the accessible name.
+     */
+    caption?: string;
+    /**
+     * Sizes the presets and the custom fields together, so the fields line up with the buttons.
+     * `sm` is for a toolbar or a card header, where the default height would dominate.
+     */
+    size?: "sm" | "md";
+    /**
+     * Where the custom fields' labels sit: `"above"` stacks each one over its field, `"beside"`
+     * puts it before the field on the same line, so the whole picker can stay one row.
+     */
+    fieldLabels?: "above" | "beside";
     onchange?: (value: DateRange) => void;
   }
 
   let {
     class: cls,
+    mode = "datetime",
     value = $bindable(),
     presets = DEFAULT_PRESETS,
     preset,
@@ -65,6 +93,9 @@
     fromLabel = "From",
     toLabel = "To",
     invalidRangeLabel = "The start must not be after the end.",
+    caption,
+    size = "md",
+    fieldLabels = "above",
     onchange,
   }: Props = $props();
 
@@ -76,7 +107,13 @@
   // The selection is the picker's own state rather than a bound prop: the pair is the entire
   // output, and a second bound value would be a second thing for a consumer to keep in step.
   let selection = $state(
-    untrack(() => preset ?? (value ? CUSTOM_PRESET_ID : (presets[0]?.id ?? CUSTOM_PRESET_ID))),
+    untrack(
+      () =>
+        preset ??
+        (value
+          ? selectionFor(value, presets, Date.now(), mode)
+          : (presets[0]?.id ?? CUSTOM_PRESET_ID)),
+    ),
   );
 
   // Wall-clock text for the two fields. Empty until custom mode is entered, because reading the
@@ -86,6 +123,15 @@
   let customTo = $state("");
 
   const isCustom = $derived(selection === CUSTOM_PRESET_ID);
+  const days = $derived(mode === "date");
+  const fieldWrapper = $derived(
+    fieldLabels === "beside" ? "flex items-center gap-2" : "flex flex-col gap-1",
+  );
+
+  const options = $derived([
+    ...presets.map(({ id, label }) => ({ id, label })),
+    { id: CUSTOM_PRESET_ID, label: customLabel },
+  ]);
 
   const emit = (next: DateRange) => {
     if (value?.from === next.from && value?.to === next.to) return;
@@ -95,17 +141,37 @@
   };
 
   const anchor = () => {
-    const next = anchorSelection(selection, presets, Date.now());
+    const next = anchorSelection(selection, presets, Date.now(), mode);
     if (next) emit(next);
   };
 
   const seedCustomFields = (range: DateRange | undefined) => {
-    customFrom = isoToLocalInput(range?.from) ?? "";
-    customTo = isoToLocalInput(range?.to) ?? "";
+    const toField = days ? parseDay : isoToLocalInput;
+    customFrom = toField(range?.from) ?? "";
+    customTo = toField(range?.to) ?? "";
+  };
+
+  /**
+   * The typed pair, read back: `undefined` while either field is not yet a value — half typed —
+   * and otherwise the pair with whether it is in order. In `"date"` mode an empty field is a value,
+   * an open end, where in `"datetime"` mode it is not yet one.
+   */
+  const typedPair = (): { range: DateRange; ordered: boolean } | undefined => {
+    if (days) {
+      const from = parseDay(customFrom);
+      const to = parseDay(customTo);
+      if (from === null || to === null) return undefined;
+      return { range: { from, to }, ordered: isValidDayRange(from, to) };
+    }
+
+    const from = localInputToIso(customFrom);
+    const to = localInputToIso(customTo);
+    if (from === null || to === null) return undefined;
+    return { range: { from, to }, ordered: isValidRange(from, to) };
   };
 
   const enterCustom = () => {
-    const current = value ?? (presets[0] ? buildRange(presets[0]) : undefined);
+    const current = value ?? (presets[0] ? buildRange(presets[0], Date.now(), mode) : undefined);
 
     seedCustomFields(current);
     selection = CUSTOM_PRESET_ID;
@@ -117,27 +183,26 @@
   };
 
   const commitCustom = () => {
-    const from = localInputToIso(customFrom);
-    const to = localInputToIso(customTo);
-
-    if (from === null || to === null || !isValidRange(from, to)) return;
-
-    emit({ from, to });
+    const pair = typedPair();
+    if (pair?.ordered) emit(pair.range);
   };
 
   const rangeError = $derived.by(() => {
     if (!isCustom) return null;
 
-    const from = localInputToIso(customFrom);
-    const to = localInputToIso(customTo);
-
     // A half-typed field is not yet wrong, so it says nothing rather than flashing an error at
     // someone who is still filling the form in.
-    if (from === null || to === null) return null;
+    const pair = typedPair();
+    if (pair === undefined) return null;
 
-    return isValidRange(from, to) ? null : invalidRangeLabel;
+    return pair.ordered ? null : invalidRangeLabel;
   });
 
+  const pick = (id: string) => {
+    if (id === CUSTOM_PRESET_ID) enterCustom();
+    else selection = id;
+  };
+
   $effect(() => {
     const intervalMs = reAnchorMs;
     if (selection === CUSTOM_PRESET_ID) return;
@@ -175,17 +240,21 @@
 
 <!--
 @component
-A from/to picker built as a plain form control: relative presets, a custom pair of local
-date-times, and `{ from, to }` as UTC ISO strings on the way out. It fetches nothing, knows no
-query parameter, and reads no URL — what the pair means is the consumer's business.
-
-A relative preset re-anchors on a timer (`reAnchorMs`, 60s by default, `0` to disable), so a
-dashboard left open keeps sliding forward. The timer suspends while the tab is hidden and fires
-once on return. A custom range is never touched by it.
-
-The two custom fields are `<input type="datetime-local">`, which means they are wall-clock time in
-the viewer's own zone with no offset attached, while the emitted pair stays in UTC. The conversion
-runs to whole minutes in both directions; see `isoToLocalInput` / `localInputToIso`.
+A from/to picker built as a plain form control: presets, a custom pair the reader types, and
+`{ from, to }` on the way out. It fetches nothing, knows no query parameter, and reads no URL — what
+the pair means is the consumer's business.
+
+It works in one of two modes. `"datetime"`, the default, is a window of instants: the custom
+fields are `<input type="datetime-local">`, wall-clock time in the viewer's own zone, while the
+emitted pair stays in UTC — the conversion runs to whole minutes in both directions; see
+`isoToLocalInput` / `localInputToIso`. `"date"` is a span of calendar days: the fields are
+`<input type="date">`, the pair is `YYYY-MM-DD`, and an empty end leaves that side open.
+
+A preset is a duration back from now ("24h") or a window computed from the calendar ("this month",
+built with `thisMonth`, `lastMonth`, `lastMonths` and `allTime`). Either re-anchors on a timer
+(`reAnchorMs`, 60s by default, `0` to disable), so a dashboard left open keeps sliding forward and
+"this month" turns into the next one. The timer suspends while the tab is hidden and fires once on
+return. A custom range is never touched by it.
 
 Every word it renders is a prop with an English default — `label`, `customLabel`, `fromLabel`,
 `toLabel` and `invalidRangeLabel` — because the library ships no translations. Only the wording
@@ -194,44 +263,31 @@ buttons are labelled by the list itself, through `DateRangePreset.label`.
 
 ```svelte
 <DateRangePicker bind:value={range} preset="24h" onchange={(r) => load(r)} />
+
+<DateRangePicker
+  mode="date"
+  presets={[allTime("All time"), thisMonth("This month"), lastMonth("Last month")]}
+  onchange={(r) => load(r)}
+/>
 ```
 -->
 
-<div class={["flex flex-wrap items-end gap-x-4 gap-y-3", cls]}>
-  <div class="join" role="group" aria-label={label}>
-    {#each presets as option (option.id)}
-      <button
-        type="button"
-        class="btn join-item min-h-11"
-        class:btn-primary={selection === option.id}
-        aria-pressed={selection === option.id}
-        onclick={() => (selection = option.id)}
-      >
-        {option.label}
-      </button>
-    {/each}
-
-    <button
-      type="button"
-      class="btn join-item min-h-11"
-      class:btn-primary={isCustom}
-      aria-pressed={isCustom}
-      onclick={enterCustom}
-    >
-      {customLabel}
-    </button>
-  </div>
+<div class={["flex flex-wrap items-end gap-x-4 gap-y-3", cls]} data-size={size}>
+  <!-- A segmented control rather than a joined row: a calendar picker easily offers six windows,
+       and a joined row cannot wrap onto a second line at phone width. -->
+  <SegmentedControl {options} value={selection} {label} {caption} {size} onchange={pick} />
 
   {#if isCustom}
     <div class="flex flex-wrap items-end gap-x-4 gap-y-3">
-      <div class="flex flex-col gap-1">
+      <div class={fieldWrapper}>
         <label class="label text-xs" for={fromId}>{fromLabel}</label>
         <input
           id={fromId}
-          class="input min-h-11"
+          class="plinth-range-field input"
           class:input-error={rangeError !== null}
-          type="datetime-local"
+          type={days ? "date" : "datetime-local"}
           value={customFrom}
+          max={days && customTo ? customTo : undefined}
           aria-invalid={rangeError !== null}
           aria-describedby={rangeError === null ? undefined : errorId}
           oninput={({ currentTarget }) => {
@@ -241,14 +297,15 @@ buttons are labelled by the list itself, through `DateRangePreset.label`.
         />
       </div>
 
-      <div class="flex flex-col gap-1">
+      <div class={fieldWrapper}>
         <label class="label text-xs" for={toId}>{toLabel}</label>
         <input
           id={toId}
-          class="input min-h-11"
+          class="plinth-range-field input"
           class:input-error={rangeError !== null}
-          type="datetime-local"
+          type={days ? "date" : "datetime-local"}
           value={customTo}
+          min={days && customFrom ? customFrom : undefined}
           aria-invalid={rangeError !== null}
           aria-describedby={rangeError === null ? undefined : errorId}
           oninput={({ currentTarget }) => {
@@ -264,3 +321,28 @@ buttons are labelled by the list itself, through `DateRangePreset.label`.
     <p id={errorId} class="basis-full text-sm text-error" role="alert">{rangeError}</p>
   {/if}
 </div>
+
+<style>
+  /* Chrome sizes a date field to its text alone, leaving no room for the padding and the picker
+     icon, which then covers the last digit. */
+  .plinth-range-field {
+    height: 2rem;
+    min-width: 9rem;
+    font-size: 0.78rem;
+  }
+
+  .plinth-range-field[type="datetime-local"] {
+    min-width: 12.5rem;
+  }
+
+  [data-size="sm"] .plinth-range-field {
+    height: 1.625rem;
+    font-size: 0.7rem;
+  }
+
+  @media (max-width: 35rem) {
+    [data-size="md"] .plinth-range-field {
+      height: 2.5rem;
+    }
+  }
+</style>

package/dist/components/DateRangePicker.svelte.d.ts

@@ -1,20 +1,27 @@
 import type { ClassValue } from "svelte/elements";
-import { type DateRange, type DateRangePreset } from "./date-range.js";
+import { type DateRange, type DateRangeMode, type DateRangePreset } from "./date-range.js";
 interface Props {
     class?: ClassValue;
     /**
-     * The selected window, as UTC ISO instants. Bindable, and also reported through
-     * {@link Props.onchange} — a consumer needs one or the other, never both.
+     * `"datetime"` (the default) picks a window of instants, emitted as UTC ISO strings, with
+     * date-and-time fields. `"date"` picks a span of calendar days, emitted as `YYYY-MM-DD`, with
+     * date fields either of which may stay empty to leave that side open.
+     */
+    mode?: DateRangeMode;
+    /**
+     * The selected window — UTC ISO instants, or days in `"date"` mode. Bindable, and also reported
+     * through {@link Props.onchange} — a consumer needs one or the other, never both.
      *
      * It is an output, not an input: a relative preset overwrites it on every anchor. Passing one
-     * in only seeds the picker, and only alongside `preset="custom"`.
+     * in only seeds the picker: it opens on the preset that names that window right now, or on
+     * custom with the pair in the fields.
      */
     value?: DateRange;
     /** The buttons offered. `id` may not be `"custom"`, which the picker reserves. */
     presets?: readonly DateRangePreset[];
     /**
-     * Which button starts selected — a preset id, or `"custom"`. Defaults to the first preset, or
-     * to custom when `value` was seeded without naming a preset.
+     * Which button starts selected — a preset id, or `"custom"`. Defaults to the preset matching a
+     * seeded `value`, to custom when none does, and to the first preset when there is no `value`.
      */
     preset?: string;
     /**
@@ -37,20 +44,39 @@ interface Props {
     toLabel?: string;
     /** Shown, as an alert, while the typed pair is out of order. */
     invalidRangeLabel?: string;
+    /**
+     * Visible text before the presets — "Period:". Passed to the {@link SegmentedControl}, so it
+     * sits on the preset row; `label` stays the accessible name.
+     */
+    caption?: string;
+    /**
+     * Sizes the presets and the custom fields together, so the fields line up with the buttons.
+     * `sm` is for a toolbar or a card header, where the default height would dominate.
+     */
+    size?: "sm" | "md";
+    /**
+     * Where the custom fields' labels sit: `"above"` stacks each one over its field, `"beside"`
+     * puts it before the field on the same line, so the whole picker can stay one row.
+     */
+    fieldLabels?: "above" | "beside";
     onchange?: (value: DateRange) => void;
 }
 /**
- * A from/to picker built as a plain form control: relative presets, a custom pair of local
- * date-times, and `{ from, to }` as UTC ISO strings on the way out. It fetches nothing, knows no
- * query parameter, and reads no URL — what the pair means is the consumer's business.
+ * A from/to picker built as a plain form control: presets, a custom pair the reader types, and
+ * `{ from, to }` on the way out. It fetches nothing, knows no query parameter, and reads no URL — what
+ * the pair means is the consumer's business.
  *
- * A relative preset re-anchors on a timer (`reAnchorMs`, 60s by default, `0` to disable), so a
- * dashboard left open keeps sliding forward. The timer suspends while the tab is hidden and fires
- * once on return. A custom range is never touched by it.
+ * It works in one of two modes. `"datetime"`, the default, is a window of instants: the custom
+ * fields are `<input type="datetime-local">`, wall-clock time in the viewer's own zone, while the
+ * emitted pair stays in UTC — the conversion runs to whole minutes in both directions; see
+ * `isoToLocalInput` / `localInputToIso`. `"date"` is a span of calendar days: the fields are
+ * `<input type="date">`, the pair is `YYYY-MM-DD`, and an empty end leaves that side open.
  *
- * The two custom fields are `<input type="datetime-local">`, which means they are wall-clock time in
- * the viewer's own zone with no offset attached, while the emitted pair stays in UTC. The conversion
- * runs to whole minutes in both directions; see `isoToLocalInput` / `localInputToIso`.
+ * A preset is a duration back from now ("24h") or a window computed from the calendar ("this month",
+ * built with `thisMonth`, `lastMonth`, `lastMonths` and `allTime`). Either re-anchors on a timer
+ * (`reAnchorMs`, 60s by default, `0` to disable), so a dashboard left open keeps sliding forward and
+ * "this month" turns into the next one. The timer suspends while the tab is hidden and fires once on
+ * return. A custom range is never touched by it.
  *
  * Every word it renders is a prop with an English default — `label`, `customLabel`, `fromLabel`,
  * `toLabel` and `invalidRangeLabel` — because the library ships no translations. Only the wording
@@ -59,6 +85,12 @@ interface Props {
  *
  * ```svelte
  * <DateRangePicker bind:value={range} preset="24h" onchange={(r) => load(r)} />
+ *
+ * <DateRangePicker
+ * mode="date"
+ * presets={[allTime("All time"), thisMonth("This month"), lastMonth("Last month")]}
+ * onchange={(r) => load(r)}
+ * />
  * ```
  */
 declare const DateRangePicker: import("svelte").Component<Props, {}, "value">;

package/dist/components/date-range.d.ts

@@ -1,30 +1,61 @@
 /**
  * The pair a range picker emits, and the whole of what it emits.
  *
- * Both ends are ISO-8601 instants in UTC (`2026-08-29T18:04:05.123Z`), the form `toISOString()`
- * produces. A string rather than a `Date` because this value's job is to travel: into a fetch
- * body, a query string, a store, a load function's return — all of which serialise a `Date` to
- * exactly this string anyway, while an ISO string additionally survives the round trip back and
- * sorts correctly with a plain `<`. UTC rather than a local offset because two clients in
- * different zones must be able to name the same window with the same characters.
+ * In the default `"datetime"` mode both ends are ISO-8601 instants in UTC
+ * (`2026-08-29T18:04:05.123Z`), the form `toISOString()` produces. A string rather than a `Date`
+ * because this value's job is to travel: into a fetch body, a query string, a store, a load
+ * function's return — all of which serialise a `Date` to exactly this string anyway, while an ISO
+ * string additionally survives the round trip back and sorts correctly with a plain `<`. UTC rather
+ * than a local offset because two clients in different zones must be able to name the same window
+ * with the same characters.
+ *
+ * In `"date"` mode both ends are calendar days, `2026-08-29` — the value of an
+ * `<input type="date">`, with no time and no zone, because a day is what the reader picked. An
+ * empty string leaves that side open: `{ from: "2026-03-01", to: "" }` is "since March", and two
+ * empty ends are all time.
  */
 export interface DateRange {
     from: string;
     to: string;
 }
+/**
+ * What the picker works in: `"datetime"` for a window of instants (a dashboard's last 24 hours),
+ * `"date"` for a span of calendar days (a history filtered to last month).
+ */
+export type DateRangeMode = "datetime" | "date";
+interface PresetBase {
+    /** Stable across renders — it is what the picker's selection prop holds. */
+    id: string;
+    label: string;
+}
 /**
  * One relative window offered as a button — a fixed duration measured back from "now".
  *
  * `durationMs` is a duration and not a calendar step on purpose: "30d" means 30×24h, so the
  * window keeps its length across a DST boundary instead of silently growing or shrinking an hour
- * twice a year. A caller who really wants "this month" wants a custom range, not a preset.
+ * twice a year. A window that follows the calendar — this month, last month — is a
+ * {@link CalendarPreset}.
+ *
+ * In `"date"` mode the window becomes the days it touches: from the day `durationMs` ago to today.
  */
-export interface DateRangePreset {
-    /** Stable across renders — it is what the picker's selection prop holds. */
-    id: string;
-    label: string;
+export interface DurationPreset extends PresetBase {
     durationMs: number;
+    range?: never;
 }
+/**
+ * One window offered as a button and computed from the current moment — for the windows a
+ * duration cannot name: this month, last month, the last six months, all time. `range` returns the
+ * pair in the picker's mode, and runs again on every re-anchor, so "this month" turns into the
+ * next one when the month does.
+ *
+ * {@link thisMonth}, {@link lastMonth}, {@link lastMonths} and {@link allTime} build the usual
+ * ones for `"date"` mode.
+ */
+export interface CalendarPreset extends PresetBase {
+    range: (now: Date) => DateRange;
+    durationMs?: never;
+}
+export type DateRangePreset = DurationPreset | CalendarPreset;
 /**
  * The selection value that means "the user typed the two ends themselves".
  *
@@ -33,8 +64,10 @@ export interface DateRangePreset {
 export declare const CUSTOM_PRESET_ID = "custom";
 /** The four windows a dashboard actually gets asked for. Replace the list, not the component. */
 export declare const DEFAULT_PRESETS: readonly DateRangePreset[];
-/** Builds the window a preset names, ending at `now`. */
-export declare const buildRange: (preset: DateRangePreset, now?: Date | number) => DateRange;
+/** A local calendar day as `YYYY-MM-DD`, the value an `<input type="date">` holds. */
+export declare const toDay: (date: Date) => string;
+/** Builds the window a preset names as of `now`, in the picker's `mode`. */
+export declare const buildRange: (preset: DateRangePreset, now?: Date | number, mode?: DateRangeMode) => DateRange;
 /**
  * Resolves a selection into the window it stands for right now, or `null` when there is nothing
  * to build — an unknown id, or {@link CUSTOM_PRESET_ID}.
@@ -43,7 +76,41 @@ export declare const buildRange: (preset: DateRangePreset, now?: Date | number)
  * range is never re-anchored" a property of the data rather than of the timer's wiring: even a
  * tick that somehow fired while the user was in custom mode would have nothing to emit.
  */
-export declare const anchorSelection: (selection: string, presets: readonly DateRangePreset[], now?: Date | number) => DateRange | null;
+export declare const anchorSelection: (selection: string, presets: readonly DateRangePreset[], now?: Date | number, mode?: DateRangeMode) => DateRange | null;
+/**
+ * The selection a picker handed `value` (and no `preset`) should open on: the preset whose window
+ * right now is exactly that pair, or {@link CUSTOM_PRESET_ID}. A page that remounts its picker —
+ * one per tab, say — gets its "Last month" button back instead of a custom pair spelling it out.
+ *
+ * A duration preset in `"datetime"` mode only matches to the millisecond, so in practice a seeded
+ * instant pair still opens as custom, as it always did.
+ */
+export declare const selectionFor: (value: DateRange, presets: readonly DateRangePreset[], now?: Date | number, mode?: DateRangeMode) => string;
+/**
+ * Whether a pair of days is in order. An empty end leaves that side open, so it can never put the
+ * pair out of order.
+ */
+export declare const isValidDayRange: (from: string, to: string) => boolean;
+/**
+ * Reads an `<input type="date">` value back: the day itself, `""` for an empty field — no bound on
+ * that side — or `null` for anything that is not yet a real day.
+ *
+ * A year below 1000 counts as not yet a day. Chrome reports a value on every digit of the year as
+ * it is typed — `0002-03-01`, `0020-03-01`, `0202-03-01` — and each of those would otherwise be
+ * emitted, and fetched, on the way to `2026`.
+ */
+export declare const parseDay: (value: string | null | undefined) => string | null;
+/** "This month", for `"date"` mode: from the 1st, open at the end. */
+export declare const thisMonth: (label: string, id?: string) => CalendarPreset;
+/** "Last month", for `"date"` mode: its first day to its last. */
+export declare const lastMonth: (label: string, id?: string) => CalendarPreset;
+/**
+ * The last `months` months, for `"date"` mode: from the same day that many months ago — or the
+ * last day that month has — open at the end.
+ */
+export declare const lastMonths: (months: number, label: string, id?: string) => CalendarPreset;
+/** "All time", for `"date"` mode: both ends open. */
+export declare const allTime: (label: string, id?: string) => CalendarPreset;
 /** Whether the pair is in order. An empty end is not a range, so it is not valid either. */
 export declare const isValidRange: (from: string | null, to: string | null) => boolean;
 /**
@@ -99,3 +166,4 @@ export declare const createReAnchor: (options: {
     intervalMs: number;
     onAnchor: () => void;
 }) => ReAnchor;
+export {};

package/dist/components/date-range.js

@@ -14,9 +14,16 @@ export const DEFAULT_PRESETS = [
     { id: "7d", label: "7d", durationMs: 7 * DAY_MS },
     { id: "30d", label: "30d", durationMs: 30 * DAY_MS },
 ];
-/** Builds the window a preset names, ending at `now`. */
-export const buildRange = (preset, now = Date.now()) => {
+const pad = (value, length = 2) => String(value).padStart(length, "0");
+/** A local calendar day as `YYYY-MM-DD`, the value an `<input type="date">` holds. */
+export const toDay = (date) => `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+/** Builds the window a preset names as of `now`, in the picker's `mode`. */
+export const buildRange = (preset, now = Date.now(), mode = "datetime") => {
     const end = now instanceof Date ? now.getTime() : now;
+    if (preset.range)
+        return preset.range(new Date(end));
+    if (mode === "date")
+        return { from: toDay(new Date(end - preset.durationMs)), to: toDay(new Date(end)) };
     return { from: new Date(end - preset.durationMs).toISOString(), to: new Date(end).toISOString() };
 };
 /**
@@ -27,12 +34,87 @@ export const buildRange = (preset, now = Date.now()) => {
  * range is never re-anchored" a property of the data rather than of the timer's wiring: even a
  * tick that somehow fired while the user was in custom mode would have nothing to emit.
  */
-export const anchorSelection = (selection, presets, now = Date.now()) => {
+export const anchorSelection = (selection, presets, now = Date.now(), mode = "datetime") => {
     if (selection === CUSTOM_PRESET_ID)
         return null;
     const preset = presets.find(({ id }) => id === selection);
-    return preset ? buildRange(preset, now) : null;
+    return preset ? buildRange(preset, now, mode) : null;
+};
+/**
+ * The selection a picker handed `value` (and no `preset`) should open on: the preset whose window
+ * right now is exactly that pair, or {@link CUSTOM_PRESET_ID}. A page that remounts its picker —
+ * one per tab, say — gets its "Last month" button back instead of a custom pair spelling it out.
+ *
+ * A duration preset in `"datetime"` mode only matches to the millisecond, so in practice a seeded
+ * instant pair still opens as custom, as it always did.
+ */
+export const selectionFor = (value, presets, now = Date.now(), mode = "datetime") => {
+    const match = presets.find((preset) => {
+        const range = buildRange(preset, now, mode);
+        return range.from === value.from && range.to === value.to;
+    });
+    return match?.id ?? CUSTOM_PRESET_ID;
 };
+/**
+ * Whether a pair of days is in order. An empty end leaves that side open, so it can never put the
+ * pair out of order.
+ */
+export const isValidDayRange = (from, to) => !from || !to || from <= to;
+const DAY_PATTERN = /^([1-9]\d{3})-(\d{2})-(\d{2})$/;
+/**
+ * Reads an `<input type="date">` value back: the day itself, `""` for an empty field — no bound on
+ * that side — or `null` for anything that is not yet a real day.
+ *
+ * A year below 1000 counts as not yet a day. Chrome reports a value on every digit of the year as
+ * it is typed — `0002-03-01`, `0020-03-01`, `0202-03-01` — and each of those would otherwise be
+ * emitted, and fetched, on the way to `2026`.
+ */
+export const parseDay = (value) => {
+    if (!value)
+        return "";
+    const match = DAY_PATTERN.exec(value);
+    if (!match)
+        return null;
+    const [, year, month, day] = match;
+    const date = new Date(Number(year), Number(month) - 1, Number(day));
+    return date.getMonth() === Number(month) - 1 && date.getDate() === Number(day) ? value : null;
+};
+/** `now` moved back `months` calendar months, kept on its day or the last one the month has. */
+const monthsBefore = (now, months) => {
+    const month = now.getMonth() - months;
+    const lastDay = new Date(now.getFullYear(), month + 1, 0).getDate();
+    return new Date(now.getFullYear(), month, Math.min(now.getDate(), lastDay));
+};
+/** "This month", for `"date"` mode: from the 1st, open at the end. */
+export const thisMonth = (label, id = "this-month") => ({
+    id,
+    label,
+    range: (now) => ({ from: toDay(new Date(now.getFullYear(), now.getMonth(), 1)), to: "" }),
+});
+/** "Last month", for `"date"` mode: its first day to its last. */
+export const lastMonth = (label, id = "last-month") => ({
+    id,
+    label,
+    range: (now) => ({
+        from: toDay(new Date(now.getFullYear(), now.getMonth() - 1, 1)),
+        to: toDay(new Date(now.getFullYear(), now.getMonth(), 0)),
+    }),
+});
+/**
+ * The last `months` months, for `"date"` mode: from the same day that many months ago — or the
+ * last day that month has — open at the end.
+ */
+export const lastMonths = (months, label, id = `last-${months}-months`) => ({
+    id,
+    label,
+    range: (now) => ({ from: toDay(monthsBefore(now, months)), to: "" }),
+});
+/** "All time", for `"date"` mode: both ends open. */
+export const allTime = (label, id = "all-time") => ({
+    id,
+    label,
+    range: () => ({ from: "", to: "" }),
+});
 /** Whether the pair is in order. An empty end is not a range, so it is not valid either. */
 export const isValidRange = (from, to) => {
     if (from === null || to === null)
@@ -41,7 +123,6 @@ export const isValidRange = (from, to) => {
     const end = Date.parse(to);
     return !Number.isNaN(start) && !Number.isNaN(end) && start <= end;
 };
-const pad = (value, length = 2) => String(value).padStart(length, "0");
 const LOCAL_INPUT_PATTERN = /^(\d{4,6})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2}))?$/;
 /**
  * Formats a UTC instant for the `value` of an `<input type="datetime-local">`, whose contents are

package/dist/components/index.d.ts

@@ -24,7 +24,7 @@ export { default as Skeleton } from "./Skeleton.svelte";
 export { default as Tabs } from "./Tabs.svelte";
 export { default as Tooltip } from "./Tooltip.svelte";
 export { PICK_CLIP_PATH, PICK_PATH } from "./pick.js";
-export { buildRange, CUSTOM_PRESET_ID, DEFAULT_PRESETS, isoToLocalInput, localInputToIso, type DateRange, type DateRangePreset, } from "./date-range.js";
+export { allTime, buildRange, CUSTOM_PRESET_ID, DEFAULT_PRESETS, isoToLocalInput, lastMonth, lastMonths, localInputToIso, thisMonth, toDay, type CalendarPreset, type DateRange, type DateRangeMode, type DateRangePreset, type DurationPreset, } from "./date-range.js";
 export { matchesSelectQuery, normalizeForSearch, type SelectOption } from "./select.js";
 export { formatJsonText, parseJsonText, type JsonTextOptions, type JsonTextResult, } from "./json-text.js";
 export { DEFAULT_JSON_VIEW_LABELS, type JsonViewLabels } from "./json-view.js";

package/dist/components/index.js

@@ -28,12 +28,12 @@ export { default as Tooltip } from "./Tooltip.svelte";
 // copying the curve out of the library, which is how two versions of one shape start existing.
 // Not for avatars: a profile picture cut to anything but a disc reads as a badge.
 export { PICK_CLIP_PATH, PICK_PATH } from "./pick.js";
-// The half of `date-range.js` a consumer of the picker has a use for: the two prop types, the
-// preset list and the reserved id they are written against, and the three conversions anyone
-// pairing their own field with a `DateRange` has to repeat otherwise. The rest -- the selection
+// The half of `date-range.js` a consumer of the picker has a use for: the prop types, the preset
+// list, the calendar preset builders and the reserved id they are written against, and the
+// conversions anyone pairing their own field with a `DateRange` has to repeat otherwise. The rest -- the selection
 // anchor, the pair validator and the re-anchor clock -- is how the picker drives itself, and the
 // picker never emits a pair that would fail the validator.
-export { buildRange, CUSTOM_PRESET_ID, DEFAULT_PRESETS, isoToLocalInput, localInputToIso, } from "./date-range.js";
+export { allTime, buildRange, CUSTOM_PRESET_ID, DEFAULT_PRESETS, isoToLocalInput, lastMonth, lastMonths, localInputToIso, thisMonth, toDay, } from "./date-range.js";
 // The half of `select.ts` a consumer has a use for: the option type every caller of either
 // control has to name, and the default matcher, so widening the search -- matching the value too,
 // a synonym list -- can compose with the accent folding instead of reimplementing it. The

package/dist/index.d.ts

@@ -5,6 +5,6 @@
  * no portable way to import its own manifest, and a consumer that only wants to log a version
  * should not have to bundle one. `version.spec.ts` fails when this drifts from the manifest.
  */
-export declare const LIBRARY_VERSION = "0.5.0";
+export declare const LIBRARY_VERSION = "0.7.0";
 export { AsyncAction, type AsyncActionStatus, type AsyncFn } from "./async-action.svelte.js";
 export { reportError, setErrorReporter, type ErrorReporter } from "./error.js";

package/dist/index.js

@@ -5,7 +5,7 @@
  * no portable way to import its own manifest, and a consumer that only wants to log a version
  * should not have to bundle one. `version.spec.ts` fails when this drifts from the manifest.
  */
-export const LIBRARY_VERSION = "0.5.0";
+export const LIBRARY_VERSION = "0.7.0";
 // The root entry carries only what is not tied to one area: the error channel an app installs
 // once, and the async state machine the components are built on. Everything visual is reached
 // through a subpath — `/theme`, `/attachments`, `/components`, `/toast` — so importing a button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viniaraujo68/plinth",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "A personal Svelte 5 design system: theme, application shell, interface primitives, routing metadata, a fetch wrapper and locale-aware formatters.",
   "license": "MIT",
   "type": "module",