@ultimat3/ui 1.2.0 → 2.0.0

package/src/components/InfiniteScroll.module.scss

@@ -0,0 +1,43 @@
+@use '../tokens' as t;
+
+.scroller {
+  @include t.column(t.space(4));
+}
+
+.foot {
+  @include t.row(t.space(3), center, center);
+  position: relative;
+  padding-block: t.space(4);
+}
+
+.more {
+  @include t.focus-ring;
+  @include t.transition(background, color);
+  padding-block: t.space(2);
+  padding-inline: t.space(4);
+  border: 1px solid t.role('line');
+  border-radius: t.radius(md);
+  background: t.role('surface-raised');
+  color: t.role('fg-strong');
+  text-decoration: none;
+
+  &:hover {
+    background: t.role('bg-soft');
+    color: t.role('accent');
+  }
+}
+
+.end {
+  margin: 0;
+  color: t.role('fg-muted');
+  font-size: t.text(sm);
+}
+
+// The trigger, not a decoration: it sits at the very end of the list and is never painted.
+.sentinel {
+  position: absolute;
+  inset-block-end: 0;
+  inline-size: 1px;
+  block-size: 1px;
+  pointer-events: none;
+}

package/src/components/InfiniteScroll.tsx

@@ -0,0 +1,92 @@
+// An endless list that degrades to pagination: the foot is always a real `rel="next"` link, so
+// the next page is one navigation away with scripting off. With script, a sentinel below the
+// list asks for that page before the reader reaches it, and the link's click is intercepted.
+
+import type { JSX } from 'solid-js';
+import { ariaBool } from '../a11y';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import styles from './InfiniteScroll.module.scss';
+import { loadMoreState } from './infinite-scroll-view';
+import { Spinner } from './Spinner';
+
+/** One viewport-ish of runway, so the next page is usually there before the current one ends. */
+const ROOT_MARGIN = '400px';
+
+export interface InfiniteScrollProps {
+  /** The items rendered so far. This component owns the foot, never the list. */
+  children: JSX.Element;
+  /** Another page exists. */
+  hasMore: boolean;
+  /** The next page's URL. Required whenever `hasMore` — it is the no-JS path. */
+  nextHref?: string | undefined;
+  /** A page is in flight; the control stops inviting a second request. */
+  loading?: boolean | undefined;
+  /** The enhancement: called when the sentinel appears, and in place of following the link. */
+  onLoadMore?: (() => void) | undefined;
+  /** How far below the fold loading starts. A CSS length, as IntersectionObserver takes it. */
+  rootMargin?: string | undefined;
+  class?: string | undefined;
+}
+
+export function InfiniteScroll(props: InfiniteScrollProps): JSX.Element {
+  const ui = useUi();
+  const rt = solid();
+  let sentinel: HTMLSpanElement | undefined;
+
+  rt.createEffect(() => {
+    const onLoadMore = props.onLoadMore;
+    if (onLoadMore === undefined || sentinel === undefined) return;
+    // No observer means no enhancement — the link below is already the working control.
+    if (!props.hasMore || typeof IntersectionObserver === 'undefined') return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (props.loading !== true && entries.some((entry) => entry.isIntersecting)) onLoadMore();
+      },
+      { rootMargin: props.rootMargin ?? ROOT_MARGIN },
+    );
+    observer.observe(sentinel);
+    rt.onCleanup(() => observer.disconnect());
+  });
+
+  const onClick = (event: MouseEvent): void => {
+    if (props.onLoadMore === undefined) return;
+    event.preventDefault();
+    props.onLoadMore();
+  };
+
+  const state = (): ReturnType<typeof loadMoreState> =>
+    loadMoreState({
+      hasMore: props.hasMore,
+      loading: props.loading,
+      nextHref: props.nextHref,
+    });
+
+  return (
+    <div class={cx(styles['scroller'], props.class)} aria-busy={ariaBool(props.loading)}>
+      {props.children}
+      <div class={styles['foot']}>
+        {state() === 'loading' ? <Spinner size="sm" /> : null}
+        {state() === 'more' ? (
+          <a class={styles['more']} href={props.nextHref} rel="next" onClick={onClick}>
+            {ui.t(UI_KEYS.loadMore)}
+          </a>
+        ) : null}
+        {state() === 'end' ? (
+          <p class={styles['end']} role="status">
+            {ui.t(UI_KEYS.endOfList)}
+          </p>
+        ) : null}
+        <span
+          aria-hidden="true"
+          class={styles['sentinel']}
+          ref={(el: HTMLSpanElement) => {
+            sentinel = el;
+          }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/Link.tsx

@@ -4,6 +4,7 @@
 import type { JSX } from 'solid-js';
 import { cx } from '../cx';
 import styles from './Link.module.scss';
+import { linkTarget } from './link-target';
 
 export interface LinkProps {
   href: string;
@@ -20,12 +21,17 @@ export interface LinkProps {
 }
 
 export function Link(props: LinkProps): JSX.Element {
-  const isExternal = (): boolean => props.external === true || /^https?:\/\//.test(props.href);
+  // Both the href and the external verdict come from ONE decision (`link-target.ts`): a
+  // `javascript:` href used to be emitted verbatim AND classified internal, so it lost the
+  // hardening too. A refused URL emits no `href` — inert, and still renders its text.
+  const target = (): { href: string | undefined; external: boolean } =>
+    linkTarget(props.href, props.external);
+  const isExternal = (): boolean => target().external;
 
   return (
     <a
       id={props.id}
-      href={props.href}
+      href={target().href}
       target={isExternal() ? '_blank' : undefined}
       rel={isExternal() ? 'noopener noreferrer' : undefined}
       aria-current={props['aria-current']}

package/src/components/Select.tsx

@@ -31,14 +31,21 @@ export interface SelectProps {
   onChange?: JSX.EventHandlerUnion<HTMLSelectElement, Event> | undefined;
 }
 
+/**
+ * `<select>` has NO `value` attribute — the selected option carries `selected`, and the parser
+ * drops the attribute silently, so `value={…}` rendered every admin edit control on its first
+ * option whatever the row held. The placeholder takes the selection when nothing matches, which
+ * is also what keeps an unset field unsubmittable: that option is `disabled`.
+ */
 export function Select(props: SelectProps): JSX.Element {
+  const current = props.value ?? '';
+  const matched = props.options.some((option) => option.value === current);
   return (
     <span class={cx(styles['wrap'], styles[`size-${props.size ?? 'md'}`], props.class)}>
       <select
         class={styles['select']}
         id={props.id}
         name={props.name}
-        value={props.value ?? ''}
         required={props.required === true}
         disabled={props.disabled === true}
         aria-label={props['aria-label']}
@@ -47,12 +54,16 @@ export function Select(props: SelectProps): JSX.Element {
         onChange={props.onChange}
       >
         {props.placeholder === undefined ? null : (
-          <option value="" disabled>
+          <option value="" disabled selected={!matched}>
             {props.placeholder}
           </option>
         )}
         {props.options.map((option) => (
-          <option value={option.value} disabled={option.disabled === true}>
+          <option
+            value={option.value}
+            disabled={option.disabled === true}
+            selected={option.value === current}
+          >
             {option.label}
           </option>
         ))}

package/src/components/Textarea.tsx

@@ -25,13 +25,19 @@ export interface TextareaProps {
   onBlur?: JSX.EventHandlerUnion<HTMLTextAreaElement, FocusEvent> | undefined;
 }
 
+/**
+ * `<textarea>` has NO `value` attribute — its value is its text content, and the parser drops the
+ * attribute silently, so `value={…}` rendered every admin edit box empty whatever the row held.
+ * The leading newline is the serializer's, not the value's: the HTML parser strips exactly one
+ * newline after `<textarea>`, so emitting it unconditionally is what makes a value that itself
+ * starts with a newline survive the round trip.
+ */
 export function Textarea(props: TextareaProps): JSX.Element {
   return (
     <textarea
       class={cx(styles['textarea'], props.autoGrow === true && styles['autoGrow'], props.class)}
       id={props.id}
       name={props.name}
-      value={props.value ?? ''}
       placeholder={props.placeholder}
       rows={props.rows ?? 3}
       required={props.required === true}
@@ -43,6 +49,8 @@ export function Textarea(props: TextareaProps): JSX.Element {
       aria-invalid={ariaBool(props['aria-invalid'])}
       onInput={props.onInput}
       onBlur={props.onBlur}
-    />
+    >
+      {`\n${props.value ?? ''}`}
+    </textarea>
   );
 }

package/src/components/accordion-view.ts

@@ -0,0 +1,32 @@
+// Which sections are expanded on first paint. A rule, not markup: `<details name>` is a radio
+// group, so two open siblings is a state the browser silently resolves for you — deciding it
+// here instead means the server and the browser agree on what the page looked like.
+
+import { invalidValueError } from '../errors';
+
+export interface AccordionSection {
+  readonly id: string;
+  readonly defaultOpen?: boolean | undefined;
+}
+
+/**
+ * The open set. `exclusive` keeps the first requested section and closes the rest, because a
+ * `name`-grouped `<details>` can only have one open member and the browser picks silently.
+ */
+export function accordionOpenIds(
+  sections: readonly AccordionSection[],
+  exclusive = false,
+): ReadonlySet<string> {
+  const seen = new Set<string>();
+  const open = new Set<string>();
+  for (const section of sections) {
+    if (seen.has(section.id)) {
+      throw invalidValueError('Accordion', section.id, 'a unique item id — ids become element ids');
+    }
+    seen.add(section.id);
+    if (section.defaultOpen !== true) continue;
+    if (exclusive && open.size > 0) continue;
+    open.add(section.id);
+  }
+  return open;
+}

package/src/components/combobox-filter.ts

@@ -0,0 +1,50 @@
+// What a query matches, as a pure rule. Runs on the server for the first paint and again on
+// every debounced keystroke, so a no-JS form round-trip and a live filter narrow the list the
+// same way — two matchers would eventually disagree, and the user would see the list flicker.
+
+export interface ComboboxOption {
+  /** The text the field takes when the suggestion is picked — and what the form submits. */
+  value: string;
+  /** Already-translated hint shown beside the value. */
+  hint?: string | undefined;
+}
+
+/** Suggestions rendered when the caller sets no limit. Long lists are a scroll, not an answer. */
+export const COMBOBOX_LIMIT = 25;
+
+/**
+ * Case- and accent-insensitive: someone typing `cafe` means `Café`, and a filter that disagrees
+ * reads as "the option is missing".
+ */
+export function normalizeQuery(text: string): string {
+  return text
+    .normalize('NFD')
+    .replace(/\p{Diacritic}/gu, '')
+    .trim()
+    .toLowerCase();
+}
+
+const haystack = (option: ComboboxOption): string =>
+  normalizeQuery(option.hint === undefined ? option.value : `${option.value} ${option.hint}`);
+
+/**
+ * Matches ranked prefix-first, then substring, each keeping the caller's order. Prefix first
+ * because the first suggestion is the one the browser completes to.
+ */
+export function filterOptions(
+  options: readonly ComboboxOption[],
+  query = '',
+  limit: number = COMBOBOX_LIMIT,
+): readonly ComboboxOption[] {
+  const needle = normalizeQuery(query);
+  if (needle === '') return options.slice(0, limit);
+
+  const prefix: ComboboxOption[] = [];
+  const contains: ComboboxOption[] = [];
+  for (const option of options) {
+    const text = haystack(option);
+    if (text.startsWith(needle)) prefix.push(option);
+    else if (text.includes(needle)) contains.push(option);
+  }
+  return [...prefix, ...contains].slice(0, limit);
+}

package/src/components/date-time-view.ts

@@ -38,7 +38,18 @@ export interface DateTimeView {
   readonly text: string;
 }
 
+/** A date-TIME string with no `Z` and no `±HH:MM`. A date-only string is not one: the spec parses
+ * `2026-08-14` as UTC, so it is already zone-independent. */
+const OFFSETLESS_DATETIME = /^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}(?![\s\S]*(?:Z|[+-]\d{2}:?\d{2})$)/;
+
 export function toDate(value: TimeInput): Date {
+  // `new Date('2026-08-14T09:00')` resolves in the HOST's zone — the one ambient default this
+  // package forbids, inside the one function that had it. It rendered `09:00` on a `TZ=UTC` runner
+  // and `00:00` on `TZ=Asia/Tokyo` with the same `timeZone="UTC"` prop and no error. Every
+  // FORMATTING path here was already zoned; only the parse was not.
+  if (typeof value === 'string' && OFFSETLESS_DATETIME.test(value)) {
+    throw invalidValueError('DateTime', value, 'an ISO string carrying Z or a ±HH:MM offset');
+  }
   const date = value instanceof Date ? value : new Date(value);
   if (Number.isNaN(date.getTime())) {
     throw invalidValueError('DateTime', value, 'a valid Date, ISO string, or epoch millis');

package/src/components/file-input-view.ts

@@ -0,0 +1,102 @@
+// The rules behind `FileInput` and `Dropzone`, with no renderer: which files a control accepts,
+// why it turned one away, and how a byte count and a ratio become something a human reads.
+// Kept here because a `.tsx` holds markup and never a rule — and because "did it reject the
+// right file" is the question a component test could never ask without a DOM.
+
+/** Why a file was turned away. A reason, not a message: the caller owns the translated string. */
+export type FileRejectionReason = 'type' | 'size' | 'count';
+
+/** The three fields of a `File` these rules read. Structural, so a test needs no DOM. */
+export interface FileCandidate {
+  readonly name: string;
+  readonly type: string;
+  readonly size: number;
+}
+
+export interface FileRejection<TFile extends FileCandidate> {
+  readonly file: TFile;
+  readonly reason: FileRejectionReason;
+}
+
+export interface FileSelection<TFile extends FileCandidate> {
+  readonly accepted: readonly TFile[];
+  /** Never dropped silently: a file that vanished with no explanation reads as a broken control. */
+  readonly rejected: readonly FileRejection<TFile>[];
+}
+
+export interface FileSelectionLimits {
+  /** The `accept` attribute's own grammar: `.png`, `image/png`, `image/*`, comma-separated. */
+  readonly accept?: string | undefined;
+  readonly maxBytes?: number | undefined;
+  readonly maxFiles?: number | undefined;
+}
+
+/**
+ * A file whose type the browser could not guess arrives with `type: ''`, and an empty type
+ * matches no MIME pattern here — not even a wildcard one — because the alternative is a control
+ * that quietly widens itself for exactly the files least worth trusting. The server sniffs the
+ * bytes anyway; this is the cheap half, and the cheap half fails closed too.
+ */
+export function acceptMatches(accept: string, file: FileCandidate): boolean {
+  const patterns = accept
+    .split(',')
+    .map((one) => one.trim().toLowerCase())
+    .filter((one) => one !== '');
+  if (patterns.length === 0) return true;
+  const type = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return patterns.some((pattern) => {
+    if (pattern.startsWith('.')) return name.endsWith(pattern);
+    if (pattern.endsWith('/*')) return type !== '' && type.startsWith(pattern.slice(0, -1));
+    return type !== '' && type === pattern;
+  });
+}
+
+/** Partition a drop or a picker's `files` into what the control takes and what it refused. */
+export function selectFiles<TFile extends FileCandidate>(
+  files: readonly TFile[],
+  limits: FileSelectionLimits = {},
+): FileSelection<TFile> {
+  const accepted: TFile[] = [];
+  const rejected: FileRejection<TFile>[] = [];
+  for (const file of files) {
+    if (limits.accept !== undefined && !acceptMatches(limits.accept, file)) {
+      rejected.push({ file, reason: 'type' });
+    } else if (limits.maxBytes !== undefined && file.size > limits.maxBytes) {
+      rejected.push({ file, reason: 'size' });
+    } else if (limits.maxFiles !== undefined && accepted.length >= limits.maxFiles) {
+      rejected.push({ file, reason: 'count' });
+    } else {
+      accepted.push(file);
+    }
+  }
+  return { accepted, rejected };
+}
+
+/** 0..100, integer. A ratio outside the range, or `NaN`, is 0 — never a bar that renders `NaN%`. */
+export function progressPercent(ratio: number): number {
+  if (!Number.isFinite(ratio)) return 0;
+  return Math.round(Math.min(Math.max(ratio, 0), 1) * 100);
+}
+
+// Decimal, not binary: `Intl`'s byte units ARE decimal (kB = 1000 B), so dividing by 1024 and
+// labelling the result "kB" through `Intl` prints a number that disagrees with its own unit.
+const BYTE_UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte', 'terabyte'] as const;
+const BYTE_STEP = 1000;
+
+/** A size a human reads, in the viewer's locale — never a hand-built "1.2 MB" string. */
+export function formatBytes(bytes: number, locale: string): string {
+  const safe = Number.isFinite(bytes) && bytes > 0 ? bytes : 0;
+  let value = safe;
+  let index = 0;
+  while (value >= BYTE_STEP && index < BYTE_UNITS.length - 1) {
+    value /= BYTE_STEP;
+    index += 1;
+  }
+  return new Intl.NumberFormat(locale, {
+    style: 'unit',
+    unit: BYTE_UNITS[index] ?? 'byte',
+    unitDisplay: 'short',
+    maximumFractionDigits: index === 0 ? 0 : 1,
+  }).format(value);
+}

package/src/components/icon-glyph.ts

@@ -0,0 +1,74 @@
+// The Lucide glyph shape as data, and the one gate between glyph data and markup:
+// only these tags, only these attributes, only token-safe paint. Pure, so the rule
+// is testable with no renderer — the package's `*-view.ts` convention.
+
+import { invalidGlyphError } from '../errors';
+
+/**
+ * A Lucide `IconNode`: `[tag, attributes]` pairs, the shape `lucide-static` publishes and the
+ * shape `src/icons/glyphs/*.ts` is generated into. Structural, so an upstream icon node passes
+ * straight in with no adapter.
+ */
+export type IconGlyph = readonly (readonly [
+  tag: string,
+  attrs: Readonly<Record<string, string>>,
+])[];
+
+/**
+ * Tag → the attributes it may carry. The allowlist is the security property: a glyph is data, and
+ * data reaching an attribute sink unchecked is how `onload=` or `href=` gets into the DOM.
+ */
+export const ICON_TAGS = {
+  circle: ['cx', 'cy', 'r', 'fill'],
+  ellipse: ['cx', 'cy', 'rx', 'ry'],
+  line: ['x1', 'x2', 'y1', 'y2'],
+  path: ['d'],
+  polygon: ['points'],
+  polyline: ['points'],
+  rect: ['height', 'rx', 'ry', 'width', 'x', 'y'],
+} as const satisfies Readonly<Record<string, readonly string[]>>;
+
+export type IconTag = keyof typeof ICON_TAGS;
+
+export interface IconElement {
+  readonly tag: IconTag;
+  readonly attrs: Readonly<Record<string, string>>;
+}
+
+/** The only paint values allowed: a literal colour in a glyph would bypass the token system. */
+const FILL_VALUES: ReadonlySet<string> = new Set(['none', 'currentColor']);
+
+export function isIconTag(tag: string): tag is IconTag {
+  return Object.hasOwn(ICON_TAGS, tag);
+}
+
+const known = (tag: IconTag): readonly string[] => ICON_TAGS[tag];
+
+/**
+ * Validate a glyph and hand back its elements. Throws rather than silently dropping: a glyph that
+ * lost an attribute renders as a plausible-looking wrong icon, which is the bug nobody notices.
+ */
+export function iconElements(glyph: IconGlyph): readonly IconElement[] {
+  const elements: IconElement[] = [];
+  for (const [tag, attrs] of glyph) {
+    if (!isIconTag(tag)) {
+      throw invalidGlyphError(`tag <${tag}>`, `one of ${Object.keys(ICON_TAGS).join(', ')}`);
+    }
+    for (const [name, value] of Object.entries(attrs)) {
+      if (!known(tag).includes(name)) {
+        throw invalidGlyphError(
+          `attribute "${name}" on <${tag}>`,
+          `one of ${known(tag).join(', ')}`,
+        );
+      }
+      if (name === 'fill' && !FILL_VALUES.has(value)) {
+        throw invalidGlyphError(
+          `fill="${value}"`,
+          'fill="none" or fill="currentColor" — colour comes from the theme, never from the glyph',
+        );
+      }
+    }
+    elements.push({ tag, attrs });
+  }
+  return elements;
+}

package/src/components/infinite-scroll-view.ts

@@ -0,0 +1,30 @@
+// What the foot of an endless list shows. A rule, not markup: "loading", "there is more" and
+// "that was everything" are three different announcements, and a list that shows two of them at
+// once (or none) is the bug this decides away from the component.
+
+import { invalidValueError } from '../errors';
+
+export type LoadMoreState = 'loading' | 'more' | 'end';
+
+export interface LoadMoreInput {
+  readonly hasMore: boolean;
+  readonly loading?: boolean | undefined;
+  /** The next page's URL. Required while there is more, because the no-JS path is a navigation. */
+  readonly nextHref?: string | undefined;
+}
+
+/**
+ * Loading wins over "more": the control must not invite a second request for a page that is
+ * already in flight.
+ */
+export function loadMoreState(input: LoadMoreInput): LoadMoreState {
+  if (input.hasMore && (input.nextHref ?? '') === '') {
+    throw invalidValueError(
+      'InfiniteScroll',
+      input.nextHref,
+      'a nextHref URL whenever hasMore is true — with scripting off the control is a link, and a link needs somewhere to go',
+    );
+  }
+  if (input.loading === true) return 'loading';
+  return input.hasMore ? 'more' : 'end';
+}

package/src/components/link-target.ts

@@ -0,0 +1,23 @@
+// Pure href/target core behind <Link>, <Avatar> and <Breadcrumb>. Split out so the two rules —
+// a scheme a browser will execute is never emitted, and "external" is decided on the value that
+// SURVIVES that check — are testable without a renderer. `javascript:` used to pass through
+// `href={props.href}` untouched AND read as internal (the test was `/^https?:\/\//`), so it also
+// lost `rel="noopener"`.
+
+import { safeUrl } from '@ultimat3/core';
+
+export interface LinkTarget {
+  /** `undefined` means emit no `href` at all: an inert anchor beats a live unchecked one. */
+  readonly href: string | undefined;
+  readonly external: boolean;
+}
+
+/**
+ * `external` is `true` only for a URL that both survived the scheme check and names another
+ * origin's protocol — so a refused value can never acquire `target="_blank"` on the way out.
+ */
+export function linkTarget(href: string, declaredExternal?: boolean | undefined): LinkTarget {
+  const safe = safeUrl(href, 'href');
+  if (safe === null) return { href: undefined, external: false };
+  return { href: safe, external: declaredExternal === true || /^https?:\/\//.test(safe) };
+}

package/src/debounce.ts

@@ -0,0 +1,55 @@
+// Trailing-edge debounce: the last call of a burst wins, `ms` after the burst stops.
+// One timer, always cancellable — a component that unmounts mid-burst must not fire
+// a filter into a tree that is gone, which is what a leaked timer does.
+
+import { invalidValueError } from './errors';
+
+export interface Debounced<A extends readonly unknown[]> {
+  (...args: A): void;
+  /** Drop the pending call. Wire it to the component's cleanup. */
+  cancel(): void;
+  /** Run the pending call now, if there is one. Blur and submit both need this. */
+  flush(): void;
+  /** True while a call is waiting. */
+  pending(): boolean;
+}
+
+export const DEBOUNCE_DEFAULT_MS = 250;
+
+export function debounce<A extends readonly unknown[]>(
+  fn: (...args: A) => void,
+  ms: number = DEBOUNCE_DEFAULT_MS,
+): Debounced<A> {
+  if (!Number.isFinite(ms) || ms < 0) {
+    throw invalidValueError('debounce', ms, 'a finite, non-negative delay in milliseconds');
+  }
+
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  let queued: A | undefined;
+
+  const cancel = (): void => {
+    if (timer !== undefined) clearTimeout(timer);
+    timer = undefined;
+    queued = undefined;
+  };
+
+  const run = (): void => {
+    const args = queued;
+    // Cleared BEFORE the call: `fn` may schedule the next burst, and clearing after would
+    // discard the call it just queued.
+    cancel();
+    if (args !== undefined) fn(...args);
+  };
+
+  const debounced = (...args: A): void => {
+    queued = args;
+    if (timer !== undefined) clearTimeout(timer);
+    timer = setTimeout(run, ms);
+  };
+
+  return Object.assign(debounced, {
+    cancel,
+    flush: run,
+    pending: (): boolean => timer !== undefined,
+  });
+}