@assistant-ui/react-generative-ui 0.0.24 → 0.1.0

package/src/vocabulary/alert.tsx

@@ -1,217 +0,0 @@
-import * as React from "react";
-import { z } from "zod";
-import type { GenerativeUILibrary } from "../types";
-import { ALERT_TONES } from "../ir";
-import { toTextContent } from "./toTextContent";
-
-const MAX_CARDS = 10;
-
-type CarouselRenderProps = {
-  label?: string;
-  children?: React.ReactNode;
-};
-
-type CarouselMeasurement = {
-  overflows: boolean;
-  atStart: boolean;
-  atEnd: boolean;
-};
-
-function CarouselRender({ label, children }: CarouselRenderProps) {
-  const carouselId = React.useId();
-  const carouselRef = React.useRef<HTMLDivElement>(null);
-  const [measurement, setMeasurement] = React.useState<
-    CarouselMeasurement | undefined
-  >(undefined);
-  const cards = React.Children.toArray(children).slice(0, MAX_CARDS);
-  const n = cards.length;
-
-  React.useEffect(() => {
-    const carousel = carouselRef.current;
-    if (!carousel) return;
-
-    const measure = () => {
-      const maxScrollLeft = Math.max(
-        carousel.scrollWidth - carousel.clientWidth,
-        0,
-      );
-      const position = Math.abs(carousel.scrollLeft);
-      const next = {
-        overflows: maxScrollLeft > 0,
-        atStart: position <= 1,
-        atEnd: position >= maxScrollLeft - 1,
-      };
-      setMeasurement((current) =>
-        current?.overflows === next.overflows &&
-        current.atStart === next.atStart &&
-        current.atEnd === next.atEnd
-          ? current
-          : next,
-      );
-    };
-
-    measure();
-    carousel.addEventListener("scroll", measure, { passive: true });
-    window.addEventListener("resize", measure);
-    const resizeObserver =
-      typeof ResizeObserver === "undefined"
-        ? undefined
-        : new ResizeObserver(measure);
-    resizeObserver?.observe(carousel);
-    carousel
-      .querySelectorAll(':scope > [data-aui="carousel-slide"]')
-      .forEach((slide) => resizeObserver?.observe(slide));
-
-    return () => {
-      carousel.removeEventListener("scroll", measure);
-      window.removeEventListener("resize", measure);
-      resizeObserver?.disconnect();
-    };
-  }, [n]);
-
-  const move = (direction: "previous" | "next") => {
-    const carousel = carouselRef.current;
-    if (!carousel) return;
-
-    const rtl = getComputedStyle(carousel).direction === "rtl";
-    const startOf = (element: Element) => {
-      const rect = element.getBoundingClientRect();
-      return rtl ? -rect.right : rect.left;
-    };
-    const edge = startOf(carousel);
-    const starts = Array.from(
-      carousel.querySelectorAll(':scope > [data-aui="carousel-slide"]'),
-      startOf,
-    );
-    let current = 0;
-    starts.forEach((start, index) => {
-      if (
-        Math.abs(start - edge) < Math.abs((starts[current] ?? start) - edge)
-      ) {
-        current = index;
-      }
-    });
-    const origin = starts[current];
-    const target = starts[current + (direction === "next" ? 1 : -1)];
-    if (origin === undefined || target === undefined) return;
-    carousel.scrollBy({ left: rtl ? origin - target : target - origin });
-  };
-
-  return (
-    <div data-aui="carousel-frame">
-      <div
-        ref={carouselRef}
-        id={carouselId}
-        data-aui="carousel"
-        role={label ? "region" : "group"}
-        aria-roledescription="carousel"
-        aria-label={label}
-        tabIndex={0}
-      >
-        {cards.map((card, i) => (
-          <div
-            key={i}
-            data-aui="carousel-slide"
-            role="group"
-            aria-roledescription="slide"
-            aria-label={`${i + 1} of ${n}`}
-          >
-            {card}
-          </div>
-        ))}
-      </div>
-      {measurement?.overflows ? (
-        <div data-aui="carousel-controls">
-          <button
-            type="button"
-            data-aui="carousel-prev"
-            aria-label="Previous slide"
-            aria-controls={carouselId}
-            disabled={measurement.atStart}
-            onClick={() => move("previous")}
-          >
-            <svg
-              aria-hidden="true"
-              viewBox="0 0 24 24"
-              width="16"
-              height="16"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M9 5l7 7-7 7" transform="translate(24 0) scale(-1 1)" />
-            </svg>
-          </button>
-          <button
-            type="button"
-            data-aui="carousel-next"
-            aria-label="Next slide"
-            aria-controls={carouselId}
-            disabled={measurement.atEnd}
-            onClick={() => move("next")}
-          >
-            <svg
-              aria-hidden="true"
-              viewBox="0 0 24 24"
-              width="16"
-              height="16"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            >
-              <path d="M9 5l7 7-7 7" />
-            </svg>
-          </button>
-        </div>
-      ) : null}
-    </div>
-  );
-}
-
-export const alertVocabulary = {
-  Alert: {
-    description:
-      "A highlighted message conveying urgency. `tone` drives the severity.",
-    properties: z.object({
-      title: z.string().optional().describe("Alert title."),
-      description: z
-        .string()
-        .optional()
-        .describe("Supporting description text."),
-      tone: z
-        .enum(ALERT_TONES)
-        .optional()
-        .describe("Severity tone; defaults to `info`."),
-    }),
-    render: ({ title, description, tone, children }) => {
-      const alertTitle = toTextContent(title);
-      const alertDescription = toTextContent(description);
-      return (
-        <div data-aui="alert" data-aui-tone={tone ?? "info"} role="alert">
-          {alertTitle ? (
-            <header data-aui="alert-title">{alertTitle}</header>
-          ) : null}
-          {alertDescription ? (
-            <p data-aui="alert-desc">{alertDescription}</p>
-          ) : null}
-          {children}
-        </div>
-      );
-    },
-  },
-  Carousel: {
-    description:
-      "A horizontally scrollable group of `Card` children (max 10). Set `label` for an accessible name.",
-    properties: z.object({
-      label: z
-        .string()
-        .optional()
-        .describe("Accessible label for the carousel."),
-    }),
-    render: CarouselRender,
-  },
-} satisfies GenerativeUILibrary;

package/src/vocabulary/collectFormValues.test.ts

@@ -1,389 +0,0 @@
-// @vitest-environment jsdom
-
-import { describe, it, expect } from "vitest";
-import {
-  collectFormValues,
-  type FormControlElementLike,
-} from "./collectFormValues";
-import {
-  CHECKBOX_GROUP_ATTR,
-  FIELD_VALUE_ATTR,
-  GENERATED_NAME_ATTR,
-} from "../constants";
-import {
-  normalizeTemporalInputValue,
-  toLocalDateTime,
-  toPickerLocalDateTime,
-} from "../temporal";
-
-const el = (
-  partial: Partial<FormControlElementLike>,
-): FormControlElementLike => ({
-  name: "",
-  type: "text",
-  value: "",
-  disabled: false,
-  hasAttribute: () => false,
-  ...partial,
-});
-
-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([
-        el({ name: "agree", type: "checkbox", checked: true }),
-      ]),
-    ).toEqual({ agree: true });
-    expect(
-      collectFormValues([
-        el({ name: "agree", type: "checkbox", checked: false }),
-      ]),
-    ).toEqual({ agree: false });
-  });
-
-  it("resolves a radio set to the checked option's value", () => {
-    expect(
-      collectFormValues([
-        el({ name: "size", type: "radio", value: "sm", checked: false }),
-        el({ name: "size", type: "radio", value: "md", checked: true }),
-        el({ name: "size", type: "radio", value: "lg", checked: false }),
-      ]),
-    ).toEqual({ size: "md" });
-  });
-
-  it("resolves a radio set with no checked option to undefined", () => {
-    const values = collectFormValues([
-      el({ name: "size", type: "radio", value: "sm", checked: false }),
-      el({ name: "size", type: "radio", value: "md", checked: false }),
-    ]);
-    expect("size" in values).toBe(true);
-    expect(values.size).toBeUndefined();
-  });
-
-  it("resolves a checkbox group to its checked values in document order", () => {
-    const option = (value: string, checked: boolean) =>
-      el({
-        name: "toppings",
-        type: "checkbox",
-        value,
-        checked,
-        hasAttribute: (name) => name === CHECKBOX_GROUP_ATTR,
-      });
-    expect(
-      collectFormValues([
-        option("basil", true),
-        option("olives", false),
-        option("onion", true),
-      ]),
-    ).toEqual({ toppings: ["basil", "onion"] });
-    expect(collectFormValues([option("basil", false)])).toEqual({
-      toppings: [],
-    });
-  });
-
-  it("resolves select/input/textarea/date controls to their string value", () => {
-    expect(
-      collectFormValues([
-        el({ name: "role", type: "select-one", value: "admin" }),
-        el({ name: "email", type: "email", value: "a@example.com" }),
-        el({ name: "bio", type: "textarea", value: "hi" }),
-        el({ name: "dob", type: "date", value: "2026-01-01" }),
-      ]),
-    ).toEqual({
-      role: "admin",
-      email: "a@example.com",
-      bio: "hi",
-      dob: "2026-01-01",
-    });
-  });
-
-  it("resolves a range input to its numeric value", () => {
-    expect(
-      collectFormValues([el({ name: "volume", type: "range", value: "7" })]),
-    ).toEqual({ volume: 7 });
-  });
-
-  it("collects repeated non-radio names into an array in document order", () => {
-    expect(
-      collectFormValues([
-        el({ name: "tag", type: "text", value: "a" }),
-        el({ name: "tag", type: "text", value: "b" }),
-        el({ name: "tag", type: "text", value: "c" }),
-      ]),
-    ).toEqual({ tag: ["a", "b", "c"] });
-  });
-
-  it("skips controls without a name", () => {
-    expect(
-      collectFormValues([
-        el({ name: "", type: "text", value: "unnamed" }),
-        el({ name: "kept", type: "text", value: "yes" }),
-      ]),
-    ).toEqual({ kept: "yes" });
-  });
-
-  it("skips radio groups whose name is generated only for native grouping", () => {
-    expect(
-      collectFormValues([
-        el({
-          name: "_R_1_",
-          type: "radio",
-          value: "sm",
-          checked: true,
-          hasAttribute: (name) => name === GENERATED_NAME_ATTR,
-        }),
-      ]),
-    ).toEqual({});
-  });
-
-  it("skips disabled controls", () => {
-    expect(
-      collectFormValues([
-        el({ name: "off", type: "text", value: "nope", disabled: true }),
-        el({ name: "on", type: "text", value: "yep" }),
-      ]),
-    ).toEqual({ on: "yep" });
-  });
-
-  it("skips a disabled control inside an otherwise-checked radio set", () => {
-    expect(
-      collectFormValues([
-        el({
-          name: "size",
-          type: "radio",
-          value: "sm",
-          checked: true,
-          disabled: true,
-        }),
-        el({ name: "size", type: "radio", value: "md", checked: false }),
-      ]),
-    ).toEqual({ size: undefined });
-  });
-
-  it("skips controls disabled by a fieldset while preserving its first legend", () => {
-    const form = document.createElement("form");
-    form.innerHTML = `
-      <fieldset disabled>
-        <legend><input name="legend" value="kept" /></legend>
-        <input name="blocked" value="old" />
-      </fieldset>
-      <input name="enabled" value="yes" />
-    `;
-    const blocked = form.elements.namedItem("blocked") as HTMLInputElement;
-
-    expect(blocked.disabled).toBe(false);
-
-    expect(
-      collectFormValues(
-        form.elements as unknown as ArrayLike<FormControlElementLike>,
-      ),
-    ).toEqual({ legend: "kept", enabled: "yes" });
-  });
-
-  it("returns an empty object for no elements", () => {
-    expect(collectFormValues([])).toEqual({});
-  });
-
-  it("a field named __proto__ round-trips as an own data key", () => {
-    const values = collectFormValues([
-      el({ name: "__proto__", type: "text", value: "x" }),
-    ]);
-    expect(Object.hasOwn(values, "__proto__")).toBe(true);
-    expect(values["__proto__"]).toBe("x");
-  });
-
-  it("a field named constructor collects as its submitted string, not an array seeded with the inherited function", () => {
-    const values = collectFormValues([
-      el({ name: "constructor", type: "text", value: "hi" }),
-    ]);
-    expect(values["constructor"]).toBe("hi");
-  });
-});