@assistant-ui/react-generative-ui 0.0.22 → 0.0.23

package/src/temporal.ts

@@ -0,0 +1,259 @@
+export type TemporalPrecision = "minutes" | "seconds" | number;
+
+export type TemporalInstant = {
+  kind: "instant";
+  epochMs: number;
+  offset: string;
+  precision: TemporalPrecision;
+  subMillisecondDigits?: string;
+};
+
+export type TemporalValue =
+  | { kind: "date" | "unparseable"; value: string }
+  | {
+      kind: "time" | "floating";
+      value: string;
+      precision: TemporalPrecision;
+    }
+  | TemporalInstant;
+
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+const TIME_PATTERN =
+  /^([01]\d|2[0-3]):([0-5]\d)(?::([0-5]\d)(?:\.(\d{1,9}))?)?$/;
+const DATETIME_PATTERN =
+  /^(\d{4}-\d{2}-\d{2})T([01]\d|2[0-3]):([0-5]\d)(?::([0-5]\d)(?:\.(\d+))?)?(Z|[+-](?:[01]\d|2[0-3]):[0-5]\d)?$/;
+const INPUT_PATTERN =
+  /^((?:\d{4}-\d{2}-\d{2}T)?(?:[01]\d|2[0-3]):[0-5]\d)(?::([0-5]\d)(?:\.(\d{1,9}))?)?$/;
+
+export const normalizeTemporalInputValue = (value: string): string => {
+  const match = INPUT_PATTERN.exec(value);
+  if (!match || match[2] === undefined) return value;
+  const digits = match[3]?.slice(0, 3) ?? "";
+  let end = digits.length;
+  while (end > 0 && digits[end - 1] === "0") end--;
+  const fraction = digits.slice(0, end);
+  if (match[2] === "00" && !fraction) return match[1]!;
+  return `${match[1]}:${match[2]}${fraction ? `.${fraction}` : ""}`;
+};
+
+const isCalendarDate = (value: string): boolean => {
+  const date = new Date(`${value}T00:00:00Z`);
+  return (
+    Number.isFinite(date.getTime()) && date.toISOString().slice(0, 10) === value
+  );
+};
+
+export const classifyTemporal = (value: string): TemporalValue => {
+  if (DATE_PATTERN.test(value) && isCalendarDate(value)) {
+    return { kind: "date", value };
+  }
+  const time = TIME_PATTERN.exec(value);
+  if (time) {
+    return {
+      kind: "time",
+      value,
+      precision:
+        time[4]?.length ?? (time[3] === undefined ? "minutes" : "seconds"),
+    };
+  }
+  const datetime = DATETIME_PATTERN.exec(value);
+  if (!datetime || !isCalendarDate(datetime[1]!)) {
+    return { kind: "unparseable", value };
+  }
+  const precision =
+    datetime[5]?.length ?? (datetime[4] === undefined ? "minutes" : "seconds");
+  const offset = datetime[6];
+  if (offset === undefined) return { kind: "floating", value, precision };
+  return {
+    kind: "instant",
+    epochMs: Date.parse(value),
+    offset,
+    precision,
+    ...(datetime[5] && datetime[5].length > 3
+      ? { subMillisecondDigits: datetime[5].slice(3) }
+      : {}),
+  };
+};
+
+export const getTemporalInputStep = (
+  ...values: (string | undefined)[]
+): "any" | 1 | undefined => {
+  let step: 1 | undefined;
+  for (const value of values) {
+    const temporal = classifyTemporal(value ?? "");
+    const precision =
+      "precision" in temporal
+        ? temporal.precision
+        : INPUT_PATTERN.exec(value ?? "")?.[3]?.length;
+    if (typeof precision === "number") return "any";
+    if (precision === "seconds") step = 1;
+  }
+  return step;
+};
+
+export const splitTemporalMinutes = (
+  value: string,
+  offset?: string,
+): { date?: string; time: string; droppedPrecision: boolean } | undefined => {
+  const temporal = classifyTemporal(value);
+  if (temporal.kind === "date" || temporal.kind === "unparseable")
+    return undefined;
+  const wallTime =
+    temporal.kind === "instant"
+      ? formatTemporalInstant(temporal, offset).slice(
+          0,
+          -(offset ?? temporal.offset).length,
+        )
+      : temporal.value;
+  const end = temporal.kind === "time" ? 5 : 16;
+  return {
+    ...(temporal.kind === "time" ? {} : { date: wallTime.slice(0, 10) }),
+    time: wallTime.slice(end - 5, end),
+    droppedPrecision: /[1-9]/.test(wallTime.slice(end)),
+  };
+};
+
+export const mergeTemporalMinutes = (date: string, time: string): string => {
+  if (
+    classifyTemporal(date).kind !== "date" ||
+    classifyTemporal(time).kind !== "time"
+  )
+    return "";
+  return `${date}T${time.slice(0, 5)}`;
+};
+
+const pad = (value: number, digits = 2): string =>
+  String(value).padStart(digits, "0");
+
+const offsetMinutes = (offset: string): number =>
+  offset === "Z"
+    ? 0
+    : (offset.startsWith("-") ? -1 : 1) *
+      (Number(offset.slice(1, 3)) * 60 + Number(offset.slice(4, 6)));
+
+export const formatTemporalInstant = (
+  instant: TemporalInstant,
+  offset = instant.offset,
+  precision = instant.precision,
+): string => {
+  const date = new Date(instant.epochMs + offsetMinutes(offset) * 60_000);
+  const iso = date.toISOString();
+  const wallTime =
+    precision === "minutes"
+      ? iso.slice(0, 16)
+      : precision === "seconds"
+        ? iso.slice(0, 19)
+        : `${iso.slice(0, 19)}.${(pad(date.getUTCMilliseconds(), 3) + (instant.subMillisecondDigits ?? "")).padEnd(precision, "0").slice(0, precision)}`;
+  return `${wallTime}${offset}`;
+};
+
+export const formatTemporalUnixSeconds = (
+  seconds: number,
+  offset = "Z",
+): string | undefined => {
+  if (!Number.isInteger(seconds)) return undefined;
+  try {
+    const value = formatTemporalInstant({
+      kind: "instant",
+      epochMs: seconds * 1000,
+      offset,
+      precision: "seconds",
+    });
+    return classifyTemporal(value).kind === "instant" ? value : undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+export const temporalOffsetLabel = (value: string): string | undefined => {
+  const temporal = classifyTemporal(value);
+  if (temporal.kind !== "instant") return undefined;
+  return temporal.offset === "Z" ? "UTC" : `UTC${temporal.offset}`;
+};
+
+export const fromOffsetDateTime = (
+  value: string,
+  previousValue?: string,
+): string => {
+  if (value === "") return "";
+  if (classifyTemporal(value).kind !== "floating") return value;
+  const previous = classifyTemporal(previousValue ?? "");
+  if (previous.kind !== "instant") return value;
+  const epochMs = Date.parse(`${value}${previous.offset}`);
+  const minuteRemainder =
+    previous.precision === "minutes"
+      ? 0
+      : ((previous.epochMs % 60_000) + 60_000) % 60_000;
+  return formatTemporalInstant({
+    ...previous,
+    epochMs: epochMs + minuteRemainder,
+  });
+};
+
+export const toLocalDateTime = (
+  value: string,
+  precision?: TemporalPrecision,
+): string => {
+  const temporal = classifyTemporal(value);
+  if (temporal.kind !== "instant") return value;
+  const date = new Date(temporal.epochMs);
+  const wallTime = `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+  return (precision ?? temporal.precision) === "minutes"
+    ? wallTime
+    : `${wallTime}:${pad(date.getSeconds())}${typeof precision === "number" ? formatTemporalInstant(temporal, "Z", precision).slice(19, -1) : ""}`;
+};
+
+export const toPickerLocalDateTime = (value: string): string => {
+  const temporal = classifyTemporal(value);
+  if (temporal.kind !== "instant") return normalizeTemporalInputValue(value);
+  const local = toLocalDateTime(
+    value,
+    typeof temporal.precision === "number" ? 3 : temporal.precision,
+  );
+  return typeof temporal.precision !== "number" || local.endsWith(".000")
+    ? normalizeTemporalInputValue(local)
+    : local;
+};
+
+export const fromLocalDateTime = (
+  value: string,
+  previousValue?: string,
+): string => {
+  const temporal = classifyTemporal(value);
+  const previous = classifyTemporal(previousValue ?? "");
+  if (temporal.kind !== "floating" || previous.kind === "floating") {
+    return value;
+  }
+  const date = new Date(
+    value.replace(
+      /\.(\d{1,2})$/,
+      (_, digits: string) => `.${digits.padEnd(3, "0")}`,
+    ),
+  );
+  const minutes = -date.getTimezoneOffset();
+  const offset = `${minutes < 0 ? "-" : "+"}${pad(Math.floor(Math.abs(minutes) / 60))}:${pad(Math.abs(minutes) % 60)}`;
+  if (previous.kind !== "instant") {
+    return formatTemporalInstant({
+      kind: "instant",
+      epochMs: date.getTime(),
+      offset,
+      precision: "seconds",
+    });
+  }
+  return formatTemporalInstant({
+    ...previous,
+    epochMs: date.getTime(),
+    ...(date.getMilliseconds() ===
+    new Date(previous.epochMs).getUTCMilliseconds()
+      ? {}
+      : typeof temporal.precision === "number"
+        ? {
+            precision: Math.max(
+              temporal.precision,
+              typeof previous.precision === "number" ? previous.precision : 0,
+            ),
+            subMillisecondDigits: value.slice(value.indexOf(".") + 4),
+          }
+        : { subMillisecondDigits: "" }),
+  });
+};

package/src/vocabulary/collectFormValues.test.ts

@@ -5,7 +5,16 @@ import {
   collectFormValues,
   type FormControlElementLike,
 } from "./collectFormValues";
-import { CHECKBOX_GROUP_ATTR, GENERATED_NAME_ATTR } from "../constants";
+import {
+  CHECKBOX_GROUP_ATTR,
+  FIELD_VALUE_ATTR,
+  GENERATED_NAME_ATTR,
+} from "../constants";
+import {
+  normalizeTemporalInputValue,
+  toLocalDateTime,
+  toPickerLocalDateTime,
+} from "../temporal";
 
 const el = (
   partial: Partial<FormControlElementLike>,
@@ -19,6 +28,194 @@ const el = (
 });
 
 describe("collectFormValues", () => {
+  it.each([
+    ["time", "13:45:30.500", "13:45:30.5"],
+    ["time", "13:45:30.000", "13:45:30"],
+    ["datetime-local", "2026-07-16T09:45:30.500", "2026-07-16T09:45:30.5"],
+    ["datetime-local", "2026-07-16T09:45:30.000", "2026-07-16T09:45:30"],
+  ])("collects an edited %s in shortest form", (type, value, expected) => {
+    expect(collectFormValues([el({ name: "when", type, value })])).toEqual({
+      when: expected,
+    });
+  });
+
+  it("retains an untouched instant's offset spelling and precision", () => {
+    const anchor = "2025-12-15T17:00:00.5Z";
+    const displayed = toPickerLocalDateTime(anchor);
+    const getAttribute = (name: string) =>
+      name === FIELD_VALUE_ATTR ? anchor : null;
+    expect(
+      collectFormValues([
+        el({
+          name: "when",
+          type: "datetime-local",
+          value: displayed,
+          getAttribute,
+        }),
+      ]),
+    ).toEqual({ when: "2025-12-15T17:00:00.5Z" });
+    expect(
+      collectFormValues([
+        el({
+          name: "when",
+          type: "datetime-local",
+          value: displayed.replace(".500", ".5"),
+          getAttribute,
+        }),
+      ]),
+    ).toEqual({ when: "2025-12-15T17:00:00.5Z" });
+    expect(
+      collectFormValues([
+        el({
+          name: "when",
+          type: "datetime-local",
+          value: displayed.replace(".500", ".750"),
+          getAttribute,
+        }),
+      ]),
+    ).toEqual({ when: "2025-12-15T17:00:00.75Z" });
+  });
+
+  it("uses an instant anchor only for datetime-local controls", () => {
+    expect(
+      collectFormValues([
+        el({
+          name: "canonical",
+          type: "datetime-local",
+          value: normalizeTemporalInputValue(
+            toLocalDateTime("2025-12-15T17:00:00Z"),
+          ),
+          getAttribute: (name) =>
+            name === FIELD_VALUE_ATTR ? "2025-12-15T17:00:00Z" : null,
+        }),
+        el({
+          name: "ordinary",
+          value: "live",
+          getAttribute: (name) => (name === FIELD_VALUE_ATTR ? "stale" : null),
+        }),
+      ]),
+    ).toEqual({ canonical: "2025-12-15T17:00:00Z", ordinary: "live" });
+  });
+
+  it("uses the declared datetime-local type when the browser reports text", () => {
+    const anchor = "2025-12-15T17:00:00.250Z";
+    const displayed = toPickerLocalDateTime(anchor);
+    const getAttribute = (name: string) =>
+      name === "type"
+        ? "datetime-local"
+        : name === FIELD_VALUE_ATTR
+          ? anchor
+          : null;
+    const control = (value: string) =>
+      el({ name: "when", type: "text", value, getAttribute });
+    expect(collectFormValues([control(displayed)])).toEqual({
+      when: anchor,
+    });
+    expect(
+      collectFormValues([control(displayed.replace(".250", ".750"))]),
+    ).toEqual({
+      when: "2025-12-15T17:00:00.750Z",
+    });
+    expect(collectFormValues([control(displayed.slice(0, -4))])).toEqual({
+      when: "2025-12-15T17:00:00.000Z",
+    });
+  });
+
+  it("uses the declared time type when the browser reports text", () => {
+    expect(
+      collectFormValues([
+        el({
+          name: "when",
+          type: "text",
+          value: "12:00",
+          getAttribute: (name) =>
+            name === "type"
+              ? "time"
+              : name === FIELD_VALUE_ATTR
+                ? "12:00:00"
+                : null,
+        }),
+      ]),
+    ).toEqual({ when: "12:00:00" });
+  });
+
+  it.each([
+    ["time", "17:00:00", "17:00", "08:30:45"],
+    [
+      "datetime-local",
+      "2025-12-15T17:00:00",
+      "2025-12-15T17:00",
+      "2025-12-16T08:30:45",
+    ],
+  ])(
+    "uses the canonical %s value only while its projection matches",
+    (type, canonical, displayed, edited) => {
+      const getAttribute = (name: string) =>
+        name === FIELD_VALUE_ATTR ? canonical : null;
+      expect(
+        collectFormValues([
+          el({ name: "value", type, value: displayed, getAttribute }),
+        ]),
+      ).toEqual({ value: canonical });
+      expect(
+        collectFormValues([
+          el({ name: "value", type, value: edited, getAttribute }),
+        ]),
+      ).toEqual({ value: edited });
+      expect(
+        collectFormValues([
+          el({ name: "value", type, value: "", getAttribute }),
+        ]),
+      ).toEqual({ value: "" });
+    },
+  );
+
+  it("ignores instant anchors on other control types", () => {
+    const getAttribute = (name: string) =>
+      name === FIELD_VALUE_ATTR ? "2025-12-15T17:00:00Z" : null;
+    expect(
+      collectFormValues([
+        el({ name: "date", type: "date", value: "", getAttribute }),
+        el({ name: "time", type: "time", value: "12:34", getAttribute }),
+        el({ name: "text", value: "live", getAttribute }),
+        el({
+          name: "select",
+          type: "select-one",
+          value: "chosen",
+          getAttribute,
+        }),
+        el({ name: "textarea", type: "textarea", value: "text", getAttribute }),
+        el({
+          name: "radio",
+          type: "radio",
+          value: "chosen",
+          checked: true,
+          getAttribute,
+        }),
+        el({ name: "checkbox", type: "checkbox", checked: true, getAttribute }),
+        el({
+          name: "group",
+          type: "checkbox",
+          value: "chosen",
+          checked: true,
+          hasAttribute: (name) => name === CHECKBOX_GROUP_ATTR,
+          getAttribute,
+        }),
+        el({ name: "range", type: "range", value: "7", getAttribute }),
+      ]),
+    ).toEqual({
+      date: "",
+      time: "12:34",
+      text: "live",
+      select: "chosen",
+      textarea: "text",
+      radio: "chosen",
+      checkbox: true,
+      group: ["chosen"],
+      range: 7,
+    });
+  });
+
   it("resolves a checkbox to its checked boolean", () => {
     expect(
       collectFormValues([

package/src/vocabulary/collectFormValues.ts

@@ -2,8 +2,14 @@ import type { FormEvent } from "react";
 import {
   CHECKBOX_GROUP_ATTR,
   FIELD_NAME_ATTR,
+  FIELD_VALUE_ATTR,
   GENERATED_NAME_ATTR,
 } from "../constants";
+import {
+  fromLocalDateTime,
+  normalizeTemporalInputValue,
+  toPickerLocalDateTime,
+} from "../temporal";
 
 /**
  * The subset of `HTMLInputElement`/`HTMLSelectElement`/`HTMLTextAreaElement` that {@link collectFormValues} reads. A structural type rather than the DOM interfaces themselves, so a plain object can stand in for a form control in tests.
@@ -20,7 +26,7 @@ export type FormControlElementLike = {
 };
 
 /**
- * Collects a submitted form's named control values into a plain object, keyed by `name`, in document order. Reads each control's live DOM state rather than `FormData`, so a checkbox resolves to its `checked` boolean instead of an on/off string. A radio group resolves to its checked option's `value`, or `undefined` if none is checked. A checkbox group resolves to its checked options' values in document order, or an empty array if none is checked. Any other repeated `name` resolves to an array of its controls' values, in document order. Controls without a `name`, that carry `data-aui-generated-name`, or that are effectively disabled, including through an ancestor disabled fieldset outside its first legend, are skipped entirely.
+ * Collects a submitted form's named control values into a plain object, keyed by `name`, in document order. Reads each control's live DOM state rather than `FormData`, so a checkbox resolves to its `checked` boolean instead of an on/off string. A radio group resolves to its checked option's `value`, or `undefined` if none is checked. A checkbox group resolves to its checked options' values in document order, or an empty array if none is checked. Any other repeated `name` resolves to an array of its controls' values, in document order. A time or datetime-local control's `data-aui-field-value` preserves the canonical string when its local projection is unchanged; an edited instant retains its original offset and precision. Controls without a `name`, that carry `data-aui-generated-name`, or that are effectively disabled, including through an ancestor disabled fieldset outside its first legend, are skipped entirely.
  */
 export function collectFormValues(
   elements: ArrayLike<FormControlElementLike>,
@@ -54,12 +60,35 @@ export function collectFormValues(
       continue;
     }
 
+    const temporalType =
+      element.type === "datetime-local" || element.type === "time"
+        ? element.type
+        : element.getAttribute?.("type");
+    const inputValue =
+      temporalType === "datetime-local" || temporalType === "time"
+        ? normalizeTemporalInputValue(element.value)
+        : element.value;
+    const fieldValue =
+      temporalType === "datetime-local" || temporalType === "time"
+        ? element.getAttribute?.(FIELD_VALUE_ATTR)
+        : undefined;
     const value: string | number | boolean =
       element.type === "checkbox"
         ? (element.checked ?? false)
         : element.type === "range"
           ? Number(element.value)
-          : element.value;
+          : fieldValue && inputValue !== ""
+            ? normalizeTemporalInputValue(inputValue) ===
+              normalizeTemporalInputValue(
+                temporalType === "time"
+                  ? fieldValue
+                  : toPickerLocalDateTime(fieldValue),
+              )
+              ? fieldValue
+              : temporalType === "datetime-local"
+                ? fromLocalDateTime(inputValue, fieldValue)
+                : inputValue
+            : inputValue;
 
     if (Object.hasOwn(values, name)) {
       const existing = values[name];