@morphemecms/cms 0.1.0 → 0.2.0-next-20261104150211

package/theme/ui/Chip.tsx

@@ -1,101 +1,101 @@
-// A chip (m3.material.io/components/chips, .chip in ../styles/ui.css): a short label (`label`), evt. an icon before it
-// (`icon`), or a person's picture (`avatar`: its address, on an input chip) and one after it (`trailingIcon`). Its kind
-// (`kind`) is Material's name; how each looks is the theme's: assist (the default: a link to something related, a post's
-// tag), filter (one of a few that choose what is shown: `selected` is the chosen one, aria-pressed on a button,
-// aria-current="page" on a link; it has a check before its label, which a theme shows on the chosen one or not), input
-// (something entered, evt. selected and with a button after it that removes it, `removeLabel`, its name for screen
-// readers, and what it does in the editor, `onRemove`) and suggestion (evt. selected). Assist, filter and suggestion chips can be `elevated` (with a shadow
-// instead of the edge, on a picture or a colour). Its states: `selected`, `disabled` (it cannot be used: a button
-// disabled, a link only shown) and `dragged` (while it is dragged to another place, with the shadow that lifts it).
-// With `href` it is a link (Link: on the site; in the editor only drawn), with `plain` only shown (a tag without a
-// page), else a <button type="button">; an input chip with `removeLabel` is the chip (a <span>) with its own button and
-// the button that removes it. Other attributes (data-…, aria-…, onClick) go on the button or the link, and `className`
-// after its own classes. The label is a prop, not children, so an Astro component shows it as it is (BlogIndex.astro).
-import type { ReactNode } from 'react';
-import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
-import { Link } from '@morphemecms/cms/src/standard/view';
-
-export type ChipKind = 'assist' | 'filter' | 'input' | 'suggestion';
-
-/** The kinds of a chip, as Material 3 names them. */
-export const chipKinds: ChipKind[] = ['assist', 'filter', 'input', 'suggestion'];
-
-/** A chip's classes: its kind's, and evt. elevated (not an input chip), dragged, and with a button that removes it. */
-export const chipClass = (kind: ChipKind = 'assist', { elevated = false, dragged = false, removable = false } = {}) =>
-  ['chip', `chip-${kind}`, elevated && kind !== 'input' && 'chip-elevated', dragged && 'chip-dragged', removable && 'chip-removable']
-    .filter(Boolean)
-    .join(' ');
-
-export default function Chip({
-  label,
-  kind = 'assist',
-  selected,
-  elevated,
-  disabled,
-  dragged,
-  icon,
-  avatar,
-  trailingIcon,
-  removeLabel,
-  onRemove,
-  href,
-  plain,
-  className,
-  ...rest
-}: {
-  label: ReactNode;
-  kind?: ChipKind;
-  selected?: boolean;
-  elevated?: boolean;
-  disabled?: boolean;
-  dragged?: boolean;
-  icon?: IconRef;
-  avatar?: string;
-  trailingIcon?: IconRef;
-  removeLabel?: string;
-  onRemove?: () => void;
-  href?: string;
-  plain?: boolean;
-  className?: string;
-} & Record<string, unknown>) {
-  const removable = kind === 'input' && Boolean(removeLabel);
-  const classes = [chipClass(kind, { elevated, dragged, removable }), className].filter(Boolean).join(' ');
-  // Chosen: a filter, an input or a suggestion chip that is a button (a filter chip that is a link: the open page).
-  const pressed = kind === 'assist' ? undefined : kind === 'filter' ? Boolean(selected) : selected;
-  const content = (
-    <>
-      {kind === 'filter' && <Svg name="check" size={18} className="chip-check" />}
-      {avatar ? <img src={avatar} alt="" className="chip-avatar" /> : icon && <Glyph icon={icon} size={18} />}
-      {label}
-      {trailingIcon && !removable && <Glyph icon={trailingIcon} size={18} className="chip-trailing-icon" />}
-    </>
-  );
-  if (removable)
-    return (
-      <span className={classes} data-selected={selected ? '' : undefined} aria-disabled={disabled || undefined}>
-        <button type="button" className="chip-action" aria-pressed={pressed} disabled={disabled} {...rest}>
-          {content}
-        </button>
-        <button type="button" className="chip-remove" aria-label={removeLabel} disabled={disabled} onClick={onRemove}>
-          <Glyph icon={trailingIcon ?? 'x'} size={18} />
-        </button>
-      </span>
-    );
-  if (href !== undefined && !disabled)
-    return (
-      <Link href={href} className={classes} aria-current={selected ? 'page' : undefined} {...rest}>
-        {content}
-      </Link>
-    );
-  if (plain || href !== undefined)
-    return (
-      <span className={classes} aria-disabled={disabled || undefined} {...rest}>
-        {content}
-      </span>
-    );
-  return (
-    <button type="button" className={classes} aria-pressed={pressed} disabled={disabled} {...rest}>
-      {content}
-    </button>
-  );
-}
+// A chip (m3.material.io/components/chips, .chip in ../styles/ui.css): a short label (`label`), evt. an icon before it
+// (`icon`), or a person's picture (`avatar`: its address, on an input chip) and one after it (`trailingIcon`). Its kind
+// (`kind`) is Material's name; how each looks is the theme's: assist (the default: a link to something related, a post's
+// tag), filter (one of a few that choose what is shown: `selected` is the chosen one, aria-pressed on a button,
+// aria-current="page" on a link; it has a check before its label, which a theme shows on the chosen one or not), input
+// (something entered, evt. selected and with a button after it that removes it, `removeLabel`, its name for screen
+// readers, and what it does in the editor, `onRemove`) and suggestion (evt. selected). Assist, filter and suggestion chips can be `elevated` (with a shadow
+// instead of the edge, on a picture or a colour). Its states: `selected`, `disabled` (it cannot be used: a button
+// disabled, a link only shown) and `dragged` (while it is dragged to another place, with the shadow that lifts it).
+// With `href` it is a link (Link: on the site; in the editor only drawn), with `plain` only shown (a tag without a
+// page), else a <button type="button">; an input chip with `removeLabel` is the chip (a <span>) with its own button and
+// the button that removes it. Other attributes (data-…, aria-…, onClick) go on the button or the link, and `className`
+// after its own classes. The label is a prop, not children, so an Astro component shows it as it is (BlogIndex.astro).
+import type { ReactNode } from 'react';
+import { Glyph, Svg, type IconRef } from '@morphemecms/cms/src/icon';
+import { Link } from '@morphemecms/cms/src/standard/view';
+
+export type ChipKind = 'assist' | 'filter' | 'input' | 'suggestion';
+
+/** The kinds of a chip, as Material 3 names them. */
+export const chipKinds: ChipKind[] = ['assist', 'filter', 'input', 'suggestion'];
+
+/** A chip's classes: its kind's, and evt. elevated (not an input chip), dragged, and with a button that removes it. */
+export const chipClass = (kind: ChipKind = 'assist', { elevated = false, dragged = false, removable = false } = {}) =>
+  ['chip', `chip-${kind}`, elevated && kind !== 'input' && 'chip-elevated', dragged && 'chip-dragged', removable && 'chip-removable']
+    .filter(Boolean)
+    .join(' ');
+
+export default function Chip({
+  label,
+  kind = 'assist',
+  selected,
+  elevated,
+  disabled,
+  dragged,
+  icon,
+  avatar,
+  trailingIcon,
+  removeLabel,
+  onRemove,
+  href,
+  plain,
+  className,
+  ...rest
+}: {
+  label: ReactNode;
+  kind?: ChipKind;
+  selected?: boolean;
+  elevated?: boolean;
+  disabled?: boolean;
+  dragged?: boolean;
+  icon?: IconRef;
+  avatar?: string;
+  trailingIcon?: IconRef;
+  removeLabel?: string;
+  onRemove?: () => void;
+  href?: string;
+  plain?: boolean;
+  className?: string;
+} & Record<string, unknown>) {
+  const removable = kind === 'input' && Boolean(removeLabel);
+  const classes = [chipClass(kind, { elevated, dragged, removable }), className].filter(Boolean).join(' ');
+  // Chosen: a filter, an input or a suggestion chip that is a button (a filter chip that is a link: the open page).
+  const pressed = kind === 'assist' ? undefined : kind === 'filter' ? Boolean(selected) : selected;
+  const content = (
+    <>
+      {kind === 'filter' && <Svg name="check" size={18} className="chip-check" />}
+      {avatar ? <img src={avatar} alt="" className="chip-avatar" /> : icon && <Glyph icon={icon} size={18} />}
+      {label}
+      {trailingIcon && !removable && <Glyph icon={trailingIcon} size={18} className="chip-trailing-icon" />}
+    </>
+  );
+  if (removable)
+    return (
+      <span className={classes} data-selected={selected ? '' : undefined} aria-disabled={disabled || undefined}>
+        <button type="button" className="chip-action" aria-pressed={pressed} disabled={disabled} {...rest}>
+          {content}
+        </button>
+        <button type="button" className="chip-remove" aria-label={removeLabel} disabled={disabled} onClick={onRemove}>
+          <Glyph icon={trailingIcon ?? 'x'} size={18} />
+        </button>
+      </span>
+    );
+  if (href !== undefined && !disabled)
+    return (
+      <Link href={href} className={classes} aria-current={selected ? 'page' : undefined} {...rest}>
+        {content}
+      </Link>
+    );
+  if (plain || href !== undefined)
+    return (
+      <span className={classes} aria-disabled={disabled || undefined} {...rest}>
+        {content}
+      </span>
+    );
+  return (
+    <button type="button" className={classes} aria-pressed={pressed} disabled={disabled} {...rest}>
+      {content}
+    </button>
+  );
+}

package/theme/ui/ChipSet.tsx

@@ -1,27 +1,27 @@
-// A chip set (Material's chips side by side, as Material's own web components group them, md-chip-set; .chip-set in
-// ../styles/ui.css): the theme's chips (`children`: Chip) in a group with its name (`label`, read by screen readers).
-// Its layout (`layout`): wrap (the default: on as many lines as they need) or scroll (on one line that scrolls sideways
-// when they are wider than it, as Material's chips do on a phone, without a scrollbar). Other attributes (data-…) go on
-// the group, and `className` after its own classes. An Astro component gives an element the same classes with
-// chipSetClass.
-import type { ReactNode } from 'react';
-
-export const chipSetLayouts = ['wrap', 'scroll'] as const;
-export type ChipSetLayout = (typeof chipSetLayouts)[number];
-
-/** A chip set's classes: its layout's. */
-export const chipSetClass = (layout: ChipSetLayout = 'wrap') => `chip-set chip-set-${layout}`;
-
-export default function ChipSet({
-  layout,
-  label,
-  className,
-  children,
-  ...rest
-}: { layout?: ChipSetLayout; label: string; className?: string; children: ReactNode } & Record<string, unknown>) {
-  return (
-    <div role="group" aria-label={label} className={[chipSetClass(layout), className].filter(Boolean).join(' ')} {...rest}>
-      {children}
-    </div>
-  );
-}
+// A chip set (Material's chips side by side, as Material's own web components group them, md-chip-set; .chip-set in
+// ../styles/ui.css): the theme's chips (`children`: Chip) in a group with its name (`label`, read by screen readers).
+// Its layout (`layout`): wrap (the default: on as many lines as they need) or scroll (on one line that scrolls sideways
+// when they are wider than it, as Material's chips do on a phone, without a scrollbar). Other attributes (data-…) go on
+// the group, and `className` after its own classes. An Astro component gives an element the same classes with
+// chipSetClass.
+import type { ReactNode } from 'react';
+
+export const chipSetLayouts = ['wrap', 'scroll'] as const;
+export type ChipSetLayout = (typeof chipSetLayouts)[number];
+
+/** A chip set's classes: its layout's. */
+export const chipSetClass = (layout: ChipSetLayout = 'wrap') => `chip-set chip-set-${layout}`;
+
+export default function ChipSet({
+  layout,
+  label,
+  className,
+  children,
+  ...rest
+}: { layout?: ChipSetLayout; label: string; className?: string; children: ReactNode } & Record<string, unknown>) {
+  return (
+    <div role="group" aria-label={label} className={[chipSetClass(layout), className].filter(Boolean).join(' ')} {...rest}>
+      {children}
+    </div>
+  );
+}

package/theme/ui/DatePicker.tsx

@@ -1,149 +1,149 @@
-// A date picker (m3.material.io/components/date-pickers, .date-picker in ../styles/ui.css): a text field to type a
-// date in (in the site's language's order, 02.11.2026), with a calendar button that opens the picker
-// (DatePickerContainer.tsx), and what a form sends, the day as ISO (2026-11-02), in a hidden input named `name` (and,
-// with `range`, the last day in one named `endName`). `kind`: docked (the picker opens under the field) or modal (in a
-// dialog in the middle of the screen, also with a keyboard input mode); a range is always modal. `value`, `endValue`:
-// the day(s) it starts with; `min`, `max`: the first and last day that can be picked; `label`, `supporting`, `error`:
-// the field's name, the line under it (else the date's format) and what is wrong with it (the field marked);
-// `required`, `id` and the rest go on the field's input, and `className` on the field. On the site datePicker.script.ts opens it, draws the picker in its <dialog>, writes the
-// day picked into the inputs and closes it; in the editor's previews it is only drawn, and with `onChange` (the editor's
-// own fields) it works the same way, here, and says the day(s) picked (or '' for none). Its fixed texts
-// (datePickerTexts) are the site's own, in @site/texts, unless `texts` gives them (the editor's, in its language).
-import { useEffect, useRef, type ReactNode } from 'react';
-import { siteText, locale } from '@morphemecms/cms/src/i18n';
-import { datePickerField } from '@theme/ui/datePicker.script';
-import IconButton from '@theme/ui/IconButton';
-import TextField from '@theme/ui/TextField';
-import { dateOf, dayTyped } from '@theme/ui/dates';
-import type { DatePickerKind, DatePickerTexts } from '@theme/ui/DatePickerContainer';
-
-/** A date picker's fixed texts, in the language its dates are written in. */
-export const datePickerTexts = (): DatePickerTexts => ({
-  locale,
-  select: siteText('Vælg dato'),
-  selectRange: siteText('Vælg datoer'),
-  enter: siteText('Skriv dato'),
-  enterRange: siteText('Skriv datoer'),
-  date: siteText('Dato'),
-  start: siteText('Startdato'),
-  end: siteText('Slutdato'),
-  format: siteText('dd.mm.åååå'),
-  wrongFormat: siteText('Skriv datoen som dd.mm.åååå.'),
-  notAllowed: siteText('Datoen kan ikke vælges.'),
-  endBeforeStart: siteText('Slutdatoen er før startdatoen.'),
-  previousMonth: siteText('Forrige måned'),
-  nextMonth: siteText('Næste måned'),
-  previousYear: siteText('Forrige år'),
-  nextYear: siteText('Næste år'),
-  chooseMonth: siteText('Vælg måned'),
-  chooseYear: siteText('Vælg år'),
-  toInput: siteText('Skift til at skrive'),
-  toCalendar: siteText('Skift til kalenderen'),
-  cancel: siteText('Annuller'),
-  ok: siteText('OK'),
-});
-
-/** What a date picker's script is told by its field: the fixed texts and what can be picked. */
-export type DatePickerSettings = { texts: DatePickerTexts; kind: DatePickerKind; range: boolean; min: string; max: string };
-
-export default function DatePicker({
-  label,
-  name,
-  endName,
-  value = '',
-  endValue = '',
-  kind = 'docked',
-  range = false,
-  min = '',
-  max = '',
-  supporting,
-  error,
-  texts: given,
-  onChange,
-  className,
-  ...rest
-}: {
-  label: string;
-  name: string;
-  endName?: string;
-  value?: string;
-  endValue?: string;
-  kind?: DatePickerKind;
-  range?: boolean;
-  min?: string;
-  max?: string;
-  supporting?: ReactNode;
-  error?: string | boolean;
-  texts?: DatePickerTexts;
-  onChange?: (value: string, endValue: string) => void;
-  className?: string;
-} & Record<string, unknown>) {
-  const texts = given ?? datePickerTexts();
-  const modal = kind === 'modal' || range;
-  const settings: DatePickerSettings = { texts, kind: modal ? 'modal' : 'docked', range, min, max };
-  const typed = [value, range ? endValue : '']
-    .filter((d) => dateOf(d))
-    .map((d) => dayTyped(d, texts.locale))
-    .join(' – ');
-  const format = range ? `${texts.format} – ${texts.format}` : texts.format;
-  const title = range ? texts.selectRange : texts.select;
-  const box = useWorking(onChange, [value, endValue], typed);
-  return (
-    <div ref={box} className={['date-picker-field', className].filter(Boolean).join(' ')} data-date-picker={JSON.stringify(settings)}>
-      <TextField
-        label={label}
-        supporting={supporting ?? format}
-        error={error}
-        placeholder={format}
-        defaultValue={typed}
-        inputMode="numeric"
-        autoComplete="off"
-        data-date-picker-text=""
-        {...rest}
-      />
-      <IconButton
-        icon="calendar-blank"
-        label={title}
-        className="date-picker-field-button"
-        aria-haspopup="dialog"
-        aria-expanded="false"
-        data-date-picker-open=""
-      />
-      <input type="hidden" name={name} defaultValue={dateOf(value) ? value : ''} data-date-picker-value="0" />
-      {range && <input type="hidden" name={endName} defaultValue={dateOf(endValue) ? endValue : ''} data-date-picker-value="1" />}
-      <dialog
-        className={modal ? 'dialog-modal date-picker-dialog' : 'date-picker-popover'}
-        aria-label={title}
-        data-date-picker-dialog=""
-      ></dialog>
-    </div>
-  );
-}
-
-// A picker the editor changes (`onChange`): made to work here as on the site, telling the editor what is picked, and
-// showing what the editor's value is when it changes from outside (a version restored).
-function useWorking(onChange: ((value: string, endValue: string) => void) | undefined, values: string[], typed: string) {
-  const box = useRef<HTMLDivElement>(null);
-  const told = useRef(onChange);
-  told.current = onChange;
-  const working = onChange !== undefined;
-  useEffect(() => {
-    const field = box.current;
-    if (!working || !field) return;
-    datePickerField(field);
-    const inputs = [...field.querySelectorAll<HTMLInputElement>('[data-date-picker-value]')];
-    const changed = () => told.current?.(inputs[0]?.value ?? '', inputs[1]?.value ?? '');
-    inputs.forEach((i) => i.addEventListener('change', changed));
-    return () => inputs.forEach((i) => i.removeEventListener('change', changed));
-  }, [working]);
-  useEffect(() => {
-    const field = box.current;
-    if (!working || !field) return;
-    const inputs = [...field.querySelectorAll<HTMLInputElement>('[data-date-picker-value]')];
-    if (inputs.every((input, i) => input.value === (dateOf(values[i] ?? '') ? values[i] : ''))) return;
-    inputs.forEach((input, i) => (input.value = dateOf(values[i] ?? '') ? values[i]! : ''));
-    const text = field.querySelector<HTMLInputElement>('[data-date-picker-text]');
-    if (text) text.value = typed;
-  }, [working, ...values]);
-  return box;
-}
+// A date picker (m3.material.io/components/date-pickers, .date-picker in ../styles/ui.css): a text field to type a
+// date in (in the site's language's order, 02.11.2026), with a calendar button that opens the picker
+// (DatePickerContainer.tsx), and what a form sends, the day as ISO (2026-11-02), in a hidden input named `name` (and,
+// with `range`, the last day in one named `endName`). `kind`: docked (the picker opens under the field) or modal (in a
+// dialog in the middle of the screen, also with a keyboard input mode); a range is always modal. `value`, `endValue`:
+// the day(s) it starts with; `min`, `max`: the first and last day that can be picked; `label`, `supporting`, `error`:
+// the field's name, the line under it (else the date's format) and what is wrong with it (the field marked);
+// `required`, `id` and the rest go on the field's input, and `className` on the field. On the site datePicker.script.ts opens it, draws the picker in its <dialog>, writes the
+// day picked into the inputs and closes it; in the editor's previews it is only drawn, and with `onChange` (the editor's
+// own fields) it works the same way, here, and says the day(s) picked (or '' for none). Its fixed texts
+// (datePickerTexts) are the site's own, in @site/texts, unless `texts` gives them (the editor's, in its language).
+import { useEffect, useRef, type ReactNode } from 'react';
+import { siteText, locale } from '@morphemecms/cms/src/i18n';
+import { datePickerField } from '@theme/ui/datePicker.script';
+import IconButton from '@theme/ui/IconButton';
+import TextField from '@theme/ui/TextField';
+import { dateOf, dayTyped } from '@theme/ui/dates';
+import type { DatePickerKind, DatePickerTexts } from '@theme/ui/DatePickerContainer';
+
+/** A date picker's fixed texts, in the language its dates are written in. */
+export const datePickerTexts = (): DatePickerTexts => ({
+  locale,
+  select: siteText('Vælg dato'),
+  selectRange: siteText('Vælg datoer'),
+  enter: siteText('Skriv dato'),
+  enterRange: siteText('Skriv datoer'),
+  date: siteText('Dato'),
+  start: siteText('Startdato'),
+  end: siteText('Slutdato'),
+  format: siteText('dd.mm.åååå'),
+  wrongFormat: siteText('Skriv datoen som dd.mm.åååå.'),
+  notAllowed: siteText('Datoen kan ikke vælges.'),
+  endBeforeStart: siteText('Slutdatoen er før startdatoen.'),
+  previousMonth: siteText('Forrige måned'),
+  nextMonth: siteText('Næste måned'),
+  previousYear: siteText('Forrige år'),
+  nextYear: siteText('Næste år'),
+  chooseMonth: siteText('Vælg måned'),
+  chooseYear: siteText('Vælg år'),
+  toInput: siteText('Skift til at skrive'),
+  toCalendar: siteText('Skift til kalenderen'),
+  cancel: siteText('Annuller'),
+  ok: siteText('OK'),
+});
+
+/** What a date picker's script is told by its field: the fixed texts and what can be picked. */
+export type DatePickerSettings = { texts: DatePickerTexts; kind: DatePickerKind; range: boolean; min: string; max: string };
+
+export default function DatePicker({
+  label,
+  name,
+  endName,
+  value = '',
+  endValue = '',
+  kind = 'docked',
+  range = false,
+  min = '',
+  max = '',
+  supporting,
+  error,
+  texts: given,
+  onChange,
+  className,
+  ...rest
+}: {
+  label: string;
+  name: string;
+  endName?: string;
+  value?: string;
+  endValue?: string;
+  kind?: DatePickerKind;
+  range?: boolean;
+  min?: string;
+  max?: string;
+  supporting?: ReactNode;
+  error?: string | boolean;
+  texts?: DatePickerTexts;
+  onChange?: (value: string, endValue: string) => void;
+  className?: string;
+} & Record<string, unknown>) {
+  const texts = given ?? datePickerTexts();
+  const modal = kind === 'modal' || range;
+  const settings: DatePickerSettings = { texts, kind: modal ? 'modal' : 'docked', range, min, max };
+  const typed = [value, range ? endValue : '']
+    .filter((d) => dateOf(d))
+    .map((d) => dayTyped(d, texts.locale))
+    .join(' – ');
+  const format = range ? `${texts.format} – ${texts.format}` : texts.format;
+  const title = range ? texts.selectRange : texts.select;
+  const box = useWorking(onChange, [value, endValue], typed);
+  return (
+    <div ref={box} className={['date-picker-field', className].filter(Boolean).join(' ')} data-date-picker={JSON.stringify(settings)}>
+      <TextField
+        label={label}
+        supporting={supporting ?? format}
+        error={error}
+        placeholder={format}
+        defaultValue={typed}
+        inputMode="numeric"
+        autoComplete="off"
+        data-date-picker-text=""
+        {...rest}
+      />
+      <IconButton
+        icon="calendar-blank"
+        label={title}
+        className="date-picker-field-button"
+        aria-haspopup="dialog"
+        aria-expanded="false"
+        data-date-picker-open=""
+      />
+      <input type="hidden" name={name} defaultValue={dateOf(value) ? value : ''} data-date-picker-value="0" />
+      {range && <input type="hidden" name={endName} defaultValue={dateOf(endValue) ? endValue : ''} data-date-picker-value="1" />}
+      <dialog
+        className={modal ? 'dialog-modal date-picker-dialog' : 'date-picker-popover'}
+        aria-label={title}
+        data-date-picker-dialog=""
+      ></dialog>
+    </div>
+  );
+}
+
+// A picker the editor changes (`onChange`): made to work here as on the site, telling the editor what is picked, and
+// showing what the editor's value is when it changes from outside (a version restored).
+function useWorking(onChange: ((value: string, endValue: string) => void) | undefined, values: string[], typed: string) {
+  const box = useRef<HTMLDivElement>(null);
+  const told = useRef(onChange);
+  told.current = onChange;
+  const working = onChange !== undefined;
+  useEffect(() => {
+    const field = box.current;
+    if (!working || !field) return;
+    datePickerField(field);
+    const inputs = [...field.querySelectorAll<HTMLInputElement>('[data-date-picker-value]')];
+    const changed = () => told.current?.(inputs[0]?.value ?? '', inputs[1]?.value ?? '');
+    inputs.forEach((i) => i.addEventListener('change', changed));
+    return () => inputs.forEach((i) => i.removeEventListener('change', changed));
+  }, [working]);
+  useEffect(() => {
+    const field = box.current;
+    if (!working || !field) return;
+    const inputs = [...field.querySelectorAll<HTMLInputElement>('[data-date-picker-value]')];
+    if (inputs.every((input, i) => input.value === (dateOf(values[i] ?? '') ? values[i] : ''))) return;
+    inputs.forEach((input, i) => (input.value = dateOf(values[i] ?? '') ? values[i]! : ''));
+    const text = field.querySelector<HTMLInputElement>('[data-date-picker-text]');
+    if (text) text.value = typed;
+  }, [working, ...values]);
+  return box;
+}