@viniaraujo68/plinth 0.3.1 → 0.6.0

package/dist/components/Paginator.svelte

@@ -1,3 +1,23 @@
+<script lang="ts" module>
+  export interface PaginatorLabels {
+    navigation: string;
+    previous: string;
+    next: string;
+    page: (page: number) => string;
+    pageSize: string;
+    summary: (first: number, last: number, total: number) => string;
+  }
+
+  export const DEFAULT_PAGINATOR_LABELS: PaginatorLabels = {
+    navigation: "Pagination",
+    previous: "Previous page",
+    next: "Next page",
+    page: (page) => `Page ${page}`,
+    pageSize: "Items per page",
+    summary: (first, last, total) => `Showing ${first} to ${last} of ${total} items`,
+  };
+</script>
+
 <script lang="ts">
   import type { ClassValue } from "svelte/elements";
 
@@ -32,6 +52,7 @@
      * and the reset back to page 1, since a new size invalidates the old page arithmetic.
      */
     onPageSizeChange?: (size: number) => void;
+    labels?: Partial<PaginatorLabels>;
   } & (CountedPages | UncountedPages);
 
   let {
@@ -44,8 +65,11 @@
     totalPages,
     totalItems,
     hasNextPage,
+    labels,
   }: Props = $props();
 
+  const text = $derived({ ...DEFAULT_PAGINATOR_LABELS, ...labels });
+
   const range = (start: number, end: number): number[] =>
     Array.from({ length: Math.max(0, end - start + 1) }, (_, i) => start + i);
 
@@ -123,7 +147,7 @@ that means. Sizing is in `em`, so the whole strip scales with the font size arou
     class="btn h-[1.75em] min-w-[1.75em] px-2 tabular-nums btn-primary aria-[current=false]:btn-ghost"
     onclick={() => setPage(page)}
     aria-current={page === pageNumber}
-    aria-label={`Page ${page}`}
+    aria-label={text.page(page)}
   >
     {page}
   </button>
@@ -133,7 +157,7 @@ that means. Sizing is in `em`, so the whole strip scales with the font size arou
   <button
     type="button"
     class="btn size-[1.75em] btn-ghost px-1"
-    aria-label="Previous page"
+    aria-label={text.previous}
     disabled={pageNumber <= 1}
     onclick={() => setPage(pageNumber - 1)}
   >
@@ -153,7 +177,7 @@ that means. Sizing is in `em`, so the whole strip scales with the font size arou
   <button
     type="button"
     class="btn size-[1.75em] btn-ghost px-1"
-    aria-label="Next page"
+    aria-label={text.next}
     disabled={!canGoNext}
     onclick={() => setPage(pageNumber + 1)}
   >
@@ -162,19 +186,19 @@ that means. Sizing is in `em`, so the whole strip scales with the font size arou
 {/snippet}
 
 {#if totalItems === undefined || pageSize === undefined}
-  <nav class={["flex place-content-center gap-px", cls]} aria-label="Pagination">
+  <nav class={["flex place-content-center gap-px", cls]} aria-label={text.navigation}>
     {@render pageSelector()}
   </nav>
 {:else}
-  <nav class={["@container", cls]} aria-label="Pagination">
+  <nav class={["@container", cls]} aria-label={text.navigation}>
     <div class="grid items-center justify-items-center gap-1 @min-[45rem]:grid-cols-3">
       <!-- Narrow, the summary and the size picker fall below the buttons: the control the user
            came for stays at the top of the block rather than being pushed off by chrome. -->
       <div class="flex items-center gap-1 @max-[45rem]:order-last @min-[45rem]:mr-auto">
-        <span class="text-nowrap">Items per page:</span>
+        <span class="text-nowrap">{text.pageSize}:</span>
         <select
           class="select box-content w-[3ch] select-xs"
-          aria-label="Items per page"
+          aria-label={text.pageSize}
           value={pageSize}
           onchange={({ currentTarget }) => onPageSizeChange?.(Number(currentTarget.value))}
         >
@@ -185,7 +209,9 @@ that means. Sizing is in `em`, so the whole strip scales with the font size arou
       </div>
 
       <div class="text-center tabular-nums" data-testid="paginator-summary">
-        Showing {firstShown} to {lastShown} of {totalItems} items
+        {#if firstShown !== undefined && lastShown !== undefined}
+          {text.summary(firstShown, lastShown, totalItems)}
+        {/if}
       </div>
 
       <div class="flex items-center gap-px @max-[45rem]:order-first @min-[45rem]:ml-auto">

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

@@ -1,3 +1,12 @@
+export interface PaginatorLabels {
+    navigation: string;
+    previous: string;
+    next: string;
+    page: (page: number) => string;
+    pageSize: string;
+    summary: (first: number, last: number, total: number) => string;
+}
+export declare const DEFAULT_PAGINATOR_LABELS: PaginatorLabels;
 import type { ClassValue } from "svelte/elements";
 /** The server answered with a count: the last page is reachable and the summary is exact. */
 interface CountedPages {
@@ -28,6 +37,7 @@ type Props = {
      * and the reset back to page 1, since a new size invalidates the old page arithmetic.
      */
     onPageSizeChange?: (size: number) => void;
+    labels?: Partial<PaginatorLabels>;
 } & (CountedPages | UncountedPages);
 /**
  * Page selector for a list, in two flavours picked by which props are passed: `totalPages`

package/dist/components/RequestErrorDisplay.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { classifyError } from "../http.js";
+  import ErrorDisplay from "./ErrorDisplay.svelte";
+  import {
+    DEFAULT_REQUEST_ERROR_COPY,
+    REQUEST_ERROR_ICONS,
+    type RequestErrorLabels,
+  } from "./request-error.js";
+
+  interface Props {
+    error: unknown;
+    reset?: () => void;
+    labels?: RequestErrorLabels;
+    eyebrow?: string;
+    retryLabel?: string;
+  }
+
+  let { error, reset, labels, eyebrow = "Error", retryLabel = "Try again" }: Props = $props();
+
+  const kind = $derived(classifyError(error));
+  const copy = $derived({ ...DEFAULT_REQUEST_ERROR_COPY[kind], ...labels?.[kind] });
+</script>
+
+<div class="contents" data-kind={kind}>
+  <ErrorDisplay {reset} title={copy.title} message={copy.message} {eyebrow} {retryLabel}>
+    {#snippet icon()}
+      <svg
+        class="size-12 text-base-content/40"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        {#each REQUEST_ERROR_ICONS[kind] as d (d)}
+          <path {d} />
+        {/each}
+      </svg>
+    {/snippet}
+  </ErrorDisplay>
+</div>

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

@@ -0,0 +1,11 @@
+import { type RequestErrorLabels } from "./request-error.js";
+interface Props {
+    error: unknown;
+    reset?: () => void;
+    labels?: RequestErrorLabels;
+    eyebrow?: string;
+    retryLabel?: string;
+}
+declare const RequestErrorDisplay: import("svelte").Component<Props, {}, "">;
+type RequestErrorDisplay = ReturnType<typeof RequestErrorDisplay>;
+export default RequestErrorDisplay;

package/dist/components/Tabs.svelte

@@ -0,0 +1,204 @@
+<script lang="ts" generics="Id extends string">
+  import { tick } from "svelte";
+  import type { ClassValue } from "svelte/elements";
+  import type { TabItem } from "./tabs.js";
+
+  interface Props {
+    /** The tabs, in the order they are shown. `id` is the value, so it has to be unique. */
+    tabs: readonly TabItem<Id>[];
+    /** The selected tab's `id`. Bindable, and also reported through {@link Props.onchange}. */
+    value: Id;
+    /** Accessible name of the tab list. A prop because the library ships no translations. */
+    label: string;
+    /**
+     * The `id` of the panel the tabs drive. One panel whose content changes with the selection,
+     * which is how a page with a tab per section is usually built; leave it out when there is no
+     * single panel to point at.
+     */
+    controls?: string;
+    /**
+     * Prefix of each tab's element id: the tab for `ranking` is `${idPrefix}-ranking`, which is
+     * what the panel's `aria-labelledby` points at. Unique per instance by default; pass one when
+     * the panel has to name its tab.
+     */
+    idPrefix?: string;
+    /** Centres the tabs while they fit. Once they overflow they scroll from the first one. */
+    center?: boolean;
+    /** Classes for the wrapper — spacing, mostly. */
+    class?: ClassValue;
+    /** Called with the new `id` only when it actually changes; re-picking the current tab is silent. */
+    onchange?: (id: Id) => void;
+  }
+
+  const uid = $props.id();
+
+  let {
+    tabs,
+    value = $bindable(),
+    label,
+    controls,
+    idPrefix = uid,
+    center = false,
+    class: className,
+    onchange,
+  }: Props = $props();
+
+  const tabId = (id: Id) => `${idPrefix}-${id}`;
+
+  const select = (id: Id) => {
+    if (id === value) return;
+    value = id;
+    onchange?.(id);
+  };
+
+  const STEPS: Record<string, (from: number, count: number) => number> = {
+    ArrowRight: (from, count) => (from + 1) % count,
+    ArrowLeft: (from, count) => (from - 1 + count) % count,
+    Home: () => 0,
+    End: (_, count) => count - 1,
+  };
+
+  const onkeydown = async (event: KeyboardEvent) => {
+    const step = STEPS[event.key];
+    if (!step || tabs.length === 0) return;
+    event.preventDefault();
+    const from = Math.max(
+      tabs.findIndex((tab) => tab.id === value),
+      0,
+    );
+    const id = tabs[step(from, tabs.length)].id;
+    select(id);
+    // Selection follows focus, and a caller that keeps the selection in the URL navigates on
+    // `onchange` — which leaves the focus wherever it was. Walk it to the tab that is now selected.
+    await tick();
+    document.getElementById(tabId(id))?.focus();
+  };
+
+  let strip = $state<HTMLElement>();
+  let overflowing = $state(false);
+
+  const measure = () => {
+    if (!strip) return;
+    overflowing = strip.scrollWidth - strip.clientWidth - strip.scrollLeft > 4;
+  };
+
+  $effect(() => {
+    // Re-measured whenever the labels change — a language switch can push the last tab out.
+    void tabs.map((tab) => tab.label);
+    measure();
+  });
+</script>
+
+<!--
+@component
+A row of tabs that switches what one panel shows: a real `tablist` with a roving tabindex, so Tab
+lands on the selected tab and the arrow keys, Home and End move the selection along the row. The
+selection follows focus, the pattern for panels that are cheap to show.
+
+On a narrow screen the row scrolls sideways instead of wrapping, and while tabs are hidden past the
+right edge it fades out there — at phone width, the fade is the only hint that a fifth tab exists.
+
+The selection is the caller's: bind `value`, or pass it in and act on `onchange` — a page that
+keeps its tab in the URL navigates there, and the tab moves when the URL does.
+
+```svelte
+<Tabs
+  bind:value={tab}
+  label="Sections"
+  controls="panel"
+  idPrefix="tab"
+  tabs={[
+    { id: "overview", label: "Overview" },
+    { id: "settings", label: "Settings" },
+  ]}
+/>
+<div id="panel" role="tabpanel" aria-labelledby="tab-{tab}">…</div>
+```
+-->
+<div class={["plinth-tabs", className]} class:fade={overflowing}>
+  <div
+    class="plinth-tabs-strip tabs tabs-border"
+    class:center
+    role="tablist"
+    aria-label={label}
+    bind:this={strip}
+    onscroll={measure}
+  >
+    {#each tabs as tab (tab.id)}
+      <button
+        type="button"
+        class="tab"
+        role="tab"
+        id={tabId(tab.id)}
+        aria-selected={tab.id === value}
+        aria-controls={controls}
+        tabindex={tab.id === value ? 0 : -1}
+        onclick={() => select(tab.id)}
+        {onkeydown}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+</div>
+
+<svelte:window onresize={measure} />
+
+<style>
+  .plinth-tabs {
+    position: relative;
+  }
+
+  /* `display` stated here rather than left to daisyUI's `.tabs`: the one-row layout is what the
+     overflow and the fade are built on, so it cannot depend on a class the app might restyle. */
+  .plinth-tabs-strip {
+    display: flex;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    border-bottom: 1px solid color-mix(in oklch, var(--color-base-content) 12%, transparent);
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: none;
+  }
+
+  .plinth-tabs-strip::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* `safe` keeps the first tab reachable once the row overflows; plain `center` would push it off
+     the left edge, where no scroll can reach. The first declaration is the fallback. */
+  .plinth-tabs-strip.center {
+    justify-content: center;
+    justify-content: safe center;
+  }
+
+  /* A mask rather than a gradient laid over the strip, so it fades into whatever surface the tabs
+     sit on. Only while something is actually hidden past the edge. */
+  .plinth-tabs.fade .plinth-tabs-strip {
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent);
+    mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent);
+  }
+
+  .tab {
+    flex: 0 0 auto;
+    min-height: 2.75rem;
+    white-space: nowrap;
+  }
+
+  /* Inside a horizontal scroller an outset ring is clipped; drawn inside, it shows whole. */
+  .tab:focus-visible {
+    outline-offset: -2px;
+  }
+
+  .tab[aria-selected="true"] {
+    color: var(--color-base-content);
+    font-weight: 600;
+  }
+
+  .tab:not([aria-selected="true"]) {
+    color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
+  }
+
+  .tab:not([aria-selected="true"]):hover {
+    color: var(--color-base-content);
+  }
+</style>

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

@@ -0,0 +1,76 @@
+import type { ClassValue } from "svelte/elements";
+import type { TabItem } from "./tabs.js";
+declare function $$render<Id extends string>(): {
+    props: {
+        /** The tabs, in the order they are shown. `id` is the value, so it has to be unique. */
+        tabs: readonly TabItem<Id>[];
+        /** The selected tab's `id`. Bindable, and also reported through {@link Props.onchange}. */
+        value: Id;
+        /** Accessible name of the tab list. A prop because the library ships no translations. */
+        label: string;
+        /**
+         * The `id` of the panel the tabs drive. One panel whose content changes with the selection,
+         * which is how a page with a tab per section is usually built; leave it out when there is no
+         * single panel to point at.
+         */
+        controls?: string;
+        /**
+         * Prefix of each tab's element id: the tab for `ranking` is `${idPrefix}-ranking`, which is
+         * what the panel's `aria-labelledby` points at. Unique per instance by default; pass one when
+         * the panel has to name its tab.
+         */
+        idPrefix?: string;
+        /** Centres the tabs while they fit. Once they overflow they scroll from the first one. */
+        center?: boolean;
+        /** Classes for the wrapper — spacing, mostly. */
+        class?: ClassValue;
+        /** Called with the new `id` only when it actually changes; re-picking the current tab is silent. */
+        onchange?: (id: Id) => void;
+    };
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Id extends string> {
+    props(): ReturnType<typeof $$render<Id>>['props'];
+    events(): ReturnType<typeof $$render<Id>>['events'];
+    slots(): ReturnType<typeof $$render<Id>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Id extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Id>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Id>['props']>, ReturnType<__sveltets_Render<Id>['events']>, ReturnType<__sveltets_Render<Id>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Id>['bindings']>;
+    } & ReturnType<__sveltets_Render<Id>['exports']>;
+    <Id extends string>(internal: unknown, props: ReturnType<__sveltets_Render<Id>['props']> & {}): ReturnType<__sveltets_Render<Id>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/**
+ * A row of tabs that switches what one panel shows: a real `tablist` with a roving tabindex, so Tab
+ * lands on the selected tab and the arrow keys, Home and End move the selection along the row. The
+ * selection follows focus, the pattern for panels that are cheap to show.
+ *
+ * On a narrow screen the row scrolls sideways instead of wrapping, and while tabs are hidden past the
+ * right edge it fades out there — at phone width, the fade is the only hint that a fifth tab exists.
+ *
+ * The selection is the caller's: bind `value`, or pass it in and act on `onchange` — a page that
+ * keeps its tab in the URL navigates there, and the tab moves when the URL does.
+ *
+ * ```svelte
+ * <Tabs
+ * bind:value={tab}
+ * label="Sections"
+ * controls="panel"
+ * idPrefix="tab"
+ * tabs={[
+ *   { id: "overview", label: "Overview" },
+ *   { id: "settings", label: "Settings" },
+ * ]}
+ * />
+ * <div id="panel" role="tabpanel" aria-labelledby="tab-{tab}">…</div>
+ * ```
+ */
+declare const Tabs: $$IsomorphicComponent;
+type Tabs<Id extends string> = InstanceType<typeof Tabs<Id>>;
+export default Tabs;

package/dist/components/VirtualJsonView.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+  import VirtualList from "../virtual/VirtualList.svelte";
+  import JsonViewFrame, {
+    type JsonViewProps,
+    type JsonViewRevealTarget,
+  } from "./JsonViewFrame.svelte";
+
+  const props: JsonViewProps = $props();
+
+  let list = $state<ReturnType<typeof VirtualList>>();
+  let host = $state<HTMLDivElement>();
+  let probe = $state<HTMLSpanElement>();
+
+  const reveal = ({ visibleIndex, columnCh }: JsonViewRevealTarget) => {
+    list?.scrollToIndex(visibleIndex, "center");
+    const scroller = host?.querySelector<HTMLElement>(".plinth-virtual");
+    const ch = probe?.getBoundingClientRect().width ?? 0;
+    if (!scroller || ch === 0) return;
+    const target = columnCh * ch;
+    const start = scroller.scrollLeft;
+    const end = start + scroller.clientWidth;
+    if (target < start + ch * 4 || target > end - ch * 4)
+      scroller.scrollLeft = Math.max(0, target - scroller.clientWidth / 2);
+  };
+</script>
+
+<JsonViewFrame {...props} {reveal}>
+  {#snippet viewport({ visible, line, rowId, rowHeight, widthCh })}
+    <div bind:this={host} class="plinth-json-virtual">
+      <span bind:this={probe} class="plinth-json-probe" aria-hidden="true"></span>
+      <VirtualList
+        bind:this={list}
+        class="plinth-json-virtual-list"
+        count={visible.length}
+        itemSize={rowHeight}
+        getItemKey={(index) => rowId(visible[index])}
+        crossSize="max(100%, {widthCh + 1}ch)"
+      >
+        {#snippet item(index)}
+          {@render line(visible[index])}
+        {/snippet}
+      </VirtualList>
+    </div>
+  {/snippet}
+</JsonViewFrame>
+
+<style>
+  .plinth-json-virtual {
+    position: relative;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .plinth-json-probe {
+    position: absolute;
+    width: 1ch;
+    height: 0;
+    visibility: hidden;
+  }
+
+  :global(.plinth-json-virtual-list) {
+    flex: 1;
+    min-height: 0;
+  }
+</style>

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

@@ -0,0 +1,4 @@
+import { type JsonViewProps } from "./JsonViewFrame.svelte";
+declare const VirtualJsonView: import("svelte").Component<JsonViewProps, {}, "">;
+type VirtualJsonView = ReturnType<typeof VirtualJsonView>;
+export default VirtualJsonView;

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 {};