@superxd-studio/adptr 0.5.0

package/source/reusable/generative/vocabulary.tsx

@@ -0,0 +1,847 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import {
+  Checkbox,
+  RadioGroup,
+  Radio,
+  Label,
+  Select,
+  SelectValue,
+  Popover,
+  ListBox,
+  ListBoxItem,
+  DateField,
+  DateInput,
+  DateSegment,
+  FieldError,
+  I18nProvider,
+  ProgressBar,
+} from "react-aria-components";
+import { parseDate } from "@internationalized/date";
+import type { z } from "zod";
+import type { GenerativeUILibrary, GenerativeUIDispatch } from "@assistant-ui/react-generative-ui";
+import { Button, buttonStyles } from "../../components/button.js";
+import { TextField } from "../../components/text-field.js";
+import { Callout } from "../../components/callout.js";
+import {
+  IconCheck,
+  IconChevronDown,
+  IconSun,
+  IconMoon,
+  IconClock,
+  IconCalendar,
+  IconMapPin,
+  IconChevronRight,
+  IconX,
+  IconUser,
+  IconSearch,
+} from "../../components/icons.js";
+import { MessageMarkdown } from "../web/message/index.js";
+import { cn } from "../../lib/cn.js";
+import { nodeSchemas, type StructuredAction } from "./schema.js";
+import { generativeCopy as copy } from "./copy.js";
+import { GenerativeChart, GenerativeTable } from "./data.js";
+
+export const GenerativeRuntimeContext = createContext({
+  blocked: false,
+  available: undefined as ReadonlySet<string> | undefined,
+  captureInput: undefined as ((input: unknown) => void) | undefined,
+  initialValues: undefined as Readonly<Record<string, string | boolean>> | undefined,
+});
+interface Field {
+  value: string | boolean;
+  required?: boolean;
+  inputType?: string;
+  date?: boolean;
+}
+interface FormState {
+  fields: Map<string, Field>;
+  bindings: Set<string>;
+  canSubmit: boolean;
+  errors: Record<string, string>;
+  setError: (name: string) => void;
+}
+const FieldContext = createContext<FormState | undefined>(undefined);
+function useField(
+  name: string,
+  initial: string | boolean,
+  required?: boolean,
+  inputType?: string,
+  date?: boolean,
+) {
+  const form = useContext(FieldContext);
+  const { initialValues } = useContext(GenerativeRuntimeContext);
+  const [value, setValue] = useState(initialValues?.[name] ?? initial);
+  useEffect(() => {
+    form?.fields.set(name, { value, required, inputType, date });
+    return () => {
+      form?.fields.delete(name);
+    };
+  }, [form?.fields, name, value, required, inputType, date]);
+  return {
+    value,
+    error: form?.errors[name],
+    onChange: (next: string | boolean) => {
+      form?.fields.set(name, { value: next, required, inputType, date });
+      setValue(next);
+      form?.setError(name);
+    },
+  };
+}
+function formValues(fields: Map<string, Field>) {
+  const errors: Record<string, string> = {},
+    values: Record<string, string | boolean> = Object.create(null);
+  fields.forEach((field, name) => {
+    values[name] = field.value;
+    if (field.required && !String(field.value).trim()) errors[name] = copy.fieldRequired;
+    else if (
+      field.inputType === "email" &&
+      field.value &&
+      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(String(field.value))
+    )
+      errors[name] = copy.email;
+    else if (field.date && field.value) {
+      try {
+        parseDate(String(field.value));
+      } catch {
+        errors[name] = copy.date;
+      }
+    }
+  });
+  if (values.startDate && values.endDate && String(values.endDate) <= String(values.startDate))
+    errors.endDate = copy.date;
+  return { errors, values };
+}
+export type GenerativeFactResolver = (
+  binding: string,
+  values: Readonly<Record<string, string | boolean>>,
+) => string | undefined;
+export interface GenerativeFormProps {
+  children?: ReactNode;
+  action?: StructuredAction;
+  dispatch?: GenerativeUIDispatch;
+  title?: string;
+  confirm?: { label: string; $action?: StructuredAction };
+  cancel?: { label: string; $action?: StructuredAction };
+  resolveFact?: GenerativeFactResolver;
+}
+export function GenerativeForm({
+  children,
+  action,
+  dispatch,
+  title,
+  confirm,
+  cancel,
+  resolveFact,
+}: GenerativeFormProps) {
+  const [fields] = useState(() => new Map<string, Field>());
+  const [bindings] = useState(() => new Set<string>());
+  const [, change] = useState(0);
+  const [quoteError, setQuoteError] = useState(false);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  const { blocked, available, captureInput } = useContext(GenerativeRuntimeContext);
+  const intent = confirm?.$action ?? action;
+  const canSubmit = Boolean(dispatch && intent && (!available || available.has(intent.type)));
+  return (
+    <FieldContext.Provider
+      value={{
+        fields,
+        bindings,
+        canSubmit,
+        errors,
+        setError: (name) => {
+          change((v) => v + 1);
+          setQuoteError(false);
+          setErrors((prior) => {
+            if (!prior[name]) return prior;
+            return Object.fromEntries(Object.entries(prior).filter(([key]) => key !== name));
+          });
+        },
+      }}
+    >
+      <form
+        className="flex min-w-0 flex-col gap-5"
+        noValidate
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (blocked || !canSubmit) return;
+          const { errors, values } = formValues(fields);
+          setErrors(errors);
+          if (Object.keys(errors).length) {
+            const form = e.currentTarget;
+            requestAnimationFrame(() =>
+              form.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus(),
+            );
+            return;
+          }
+          const quoted: Record<string, string> = {};
+          for (const binding of bindings) {
+            let value: string | undefined;
+            try {
+              value = resolveFact?.(binding, values);
+            } catch {
+              /* Host quote unavailable. */
+            }
+            if (value === undefined) {
+              setQuoteError(true);
+              return;
+            }
+            quoted[binding] = value;
+          }
+          if (intent && dispatch)
+            void dispatch({
+              ...intent,
+              $input: values,
+              ...(bindings.size ? { $bindings: quoted } : {}),
+            });
+        }}
+      >
+        {title ? <h3 className="type-title text-fg-emphasis">{title}</h3> : null}
+        {children}
+        {Object.keys(errors).length ? (
+          <p role="alert" className="type-body text-error">
+            {copy.validation}
+          </p>
+        ) : null}
+        {quoteError ? (
+          <p role="alert" className="type-body text-error">
+            {copy.quoteUnavailable}
+          </p>
+        ) : null}
+        {confirm || cancel ? (
+          <footer className="flex flex-wrap items-center gap-3 border-t border-line-subtle pt-5">
+            {confirm ? (
+              <Button
+                className="h-auto min-h-control-md max-w-full py-control-y wrap-anywhere whitespace-normal"
+                type="submit"
+                variant="primary"
+                isDisabled={blocked || !canSubmit}
+              >
+                {confirm.label}
+              </Button>
+            ) : null}
+            {cancel ? (
+              <Button
+                variant="ghost"
+                className="h-auto min-h-control-md max-w-full py-control-y wrap-anywhere whitespace-normal"
+                isDisabled={
+                  blocked ||
+                  !dispatch ||
+                  !cancel.$action ||
+                  Boolean(available && !available.has(cancel.$action.type))
+                }
+                onPress={() => {
+                  if (cancel.$action) {
+                    captureInput?.({ ...cancel.$action, $input: formValues(fields).values });
+                    void dispatch?.(cancel.$action);
+                  }
+                }}
+              >
+                {cancel.label}
+              </Button>
+            ) : null}
+          </footer>
+        ) : null}
+      </form>
+    </FieldContext.Provider>
+  );
+}
+function InputField(props: z.infer<typeof nodeSchemas.Input>) {
+  const field = useField(props.name, props.defaultValue ?? "", props.required, props.inputType);
+  const { blocked } = useContext(GenerativeRuntimeContext);
+  return (
+    <TextField
+      className="min-w-0 flex-1"
+      label={props.label}
+      name={props.name}
+      value={String(field.value)}
+      onChange={field.onChange}
+      multiline={props.multiline}
+      placeholder={props.placeholder}
+      error={field.error}
+      isRequired={props.required}
+      isDisabled={blocked}
+      type={props.inputType ?? "text"}
+    />
+  );
+}
+function SelectField(props: z.infer<typeof nodeSchemas.Select>) {
+  const field = useField(props.name, props.defaultValue ?? "", props.required);
+  const { blocked } = useContext(GenerativeRuntimeContext);
+  return (
+    <Select
+      placeholder={props.placeholder}
+      name={props.name}
+      value={String(field.value) || null}
+      onChange={(v) => field.onChange(String(v ?? ""))}
+      isRequired={props.required}
+      isInvalid={Boolean(field.error)}
+      isDisabled={blocked}
+      validationBehavior="aria"
+      className="flex min-w-0 flex-1 flex-col gap-1.5"
+    >
+      <Label className="type-label text-fg-emphasis">{props.label}</Label>
+      <Button className="group/trigger justify-between" isDisabled={blocked}>
+        <SelectValue className="min-w-0 truncate" />
+        {/* Turns with the settle spring as the list opens, like every SuperXD dropdown */}
+        <IconChevronDown className="transition-[rotate] duration-(--duration-settle) ease-settle group-aria-expanded/trigger:rotate-180 motion-reduce:transition-none" />
+      </Button>
+      <Popover className="min-w-(--trigger-width) origin-(--trigger-anchor-point) rounded-control border border-line-subtle bg-surface p-1 shadow-popover outline-none data-entering:animate-pop-in data-exiting:animate-pop-out">
+        <ListBox className="outline-none" items={props.options}>
+          {(option) => (
+            <ListBoxItem
+              id={option.value}
+              textValue={option.label}
+              className="cursor-pointer rounded-cell px-control-md-x py-control-y type-body text-fg-emphasis outline-none data-focus-visible:focus-ring data-focused:bg-surface-subtle data-selected:font-medium"
+            >
+              {option.label}
+            </ListBoxItem>
+          )}
+        </ListBox>
+      </Popover>
+      <FieldError className="type-caption text-error">{field.error}</FieldError>
+    </Select>
+  );
+}
+function GeneratedDate(props: z.infer<typeof nodeSchemas.DatePicker>) {
+  const field = useField(props.name, props.defaultValue ?? "", props.required, undefined, true);
+  const { blocked } = useContext(GenerativeRuntimeContext);
+  return (
+    <I18nProvider locale="en-AU">
+      <DateField
+        name={props.name}
+        value={field.value ? parseDate(String(field.value)) : null}
+        onChange={(date) => field.onChange(date?.toString() ?? "")}
+        isRequired={props.required}
+        isInvalid={Boolean(field.error)}
+        isDisabled={blocked}
+        validationBehavior="aria"
+        className="flex min-w-0 flex-1 flex-col gap-1.5"
+      >
+        <Label className="type-label text-fg-emphasis">{props.label}</Label>
+        <DateInput className="flex h-control-md items-center rounded-control border border-line-input bg-surface px-control-md-x type-body text-fg-emphasis data-disabled:opacity-50 data-focus-within:border-brand data-focus-within:focus-ring">
+          {(segment) => (
+            <DateSegment
+              segment={segment}
+              className="rounded-cell px-0.5 numeric outline-none data-focused:bg-brand data-focused:text-on-brand data-placeholder:text-fg-subtle"
+            />
+          )}
+        </DateInput>
+        <FieldError className="type-caption text-error">{field.error}</FieldError>
+      </DateField>
+    </I18nProvider>
+  );
+}
+function GeneratedRadio(props: z.infer<typeof nodeSchemas.RadioGroup>) {
+  const field = useField(props.name, props.defaultValue ?? "", props.required);
+  const { blocked } = useContext(GenerativeRuntimeContext);
+  return (
+    <RadioGroup
+      name={props.name}
+      value={String(field.value)}
+      onChange={field.onChange}
+      isRequired={props.required}
+      isInvalid={Boolean(field.error)}
+      isDisabled={blocked}
+      validationBehavior="aria"
+      className="flex flex-col gap-2"
+    >
+      <Label className="type-label text-fg-emphasis">{props.label}</Label>
+      <div className="flex flex-wrap gap-3">
+        {props.options.map((o) => (
+          <Radio
+            key={o.value}
+            value={o.value}
+            className="group flex cursor-pointer items-center gap-2 rounded-control border border-line px-control-md-x py-control-y type-body text-fg data-disabled:opacity-50 data-focus-visible:focus-ring data-selected:border-brand data-selected:bg-surface-muted"
+          >
+            <span className="grid size-4 place-items-center rounded-full border border-line-input">
+              <span className="size-2 rounded-full group-data-selected:bg-brand" />
+            </span>
+            {o.label}
+          </Radio>
+        ))}
+      </div>
+      <FieldError className="type-caption text-error">{field.error}</FieldError>
+    </RadioGroup>
+  );
+}
+function GeneratedCheckbox(props: z.infer<typeof nodeSchemas.Checkbox>) {
+  const field = useField(props.name, props.defaultChecked ?? false);
+  const { blocked } = useContext(GenerativeRuntimeContext);
+  return (
+    <Checkbox
+      name={props.name}
+      isSelected={Boolean(field.value)}
+      onChange={field.onChange}
+      isDisabled={blocked}
+      className="group flex cursor-pointer items-center gap-2 rounded-cell type-body text-fg data-disabled:opacity-50 data-focus-visible:focus-ring"
+    >
+      <span className="grid size-4 shrink-0 place-items-center rounded-cell border border-line-input group-data-selected:border-brand group-data-selected:bg-brand">
+        <IconCheck className="invisible size-3 text-on-brand group-data-selected:visible" />
+      </span>
+      {props.label}
+    </Checkbox>
+  );
+}
+const sizes = {
+  sm: "type-body",
+  md: "type-heading",
+  lg: "type-title",
+  xl: "type-title",
+  "2xl": "text-2xl leading-tight",
+  "3xl": "text-3xl leading-tight",
+};
+const gaps = ["gap-0", "gap-1", "gap-2", "gap-3", "gap-4", "gap-5", "gap-6", "gap-7", "gap-8"];
+const icons: Record<string, ReactNode> = {
+  sun: <IconSun />,
+  moon: <IconMoon />,
+  clock: <IconClock />,
+  calendar: <IconCalendar />,
+  "map-pin": <IconMapPin />,
+  check: <IconCheck />,
+  x: <IconX />,
+  user: <IconUser />,
+  search: <IconSearch />,
+  "chevron-right": <IconChevronRight />,
+};
+function GenerativeIcon({ name, size }: z.infer<typeof nodeSchemas.Icon>) {
+  const paths: Record<string, ReactNode> = {
+    plane: <path d="m3 16 7-4-1-9 3 1 3 7 6 1v2l-6 1-3 7-3 1 1-9-7-2Z" />,
+    play: <path d="m8 5 11 7-11 7Z" />,
+    pause: (
+      <>
+        <path d="M8 5v14M16 5v14" />
+      </>
+    ),
+    cloud: <path d="M6 18h12a4 4 0 0 0 0-8 6 6 0 0 0-11-2 5 5 0 0 0-1 10Z" />,
+    star: <path d="m12 3 3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1Z" />,
+    heart: <path d="M20 5a5 5 0 0 0-8 1 5 5 0 0 0-8-1C-2 11 12 21 12 21S26 11 20 5Z" />,
+    "arrow-right": <path d="M4 12h16m-6-6 6 6-6 6" />,
+    "arrow-up-right": <path d="M6 18 18 6M6 6h12v12" />,
+    "credit-card": (
+      <>
+        <rect x="3" y="5" width="18" height="14" rx="2" />
+        <path d="M3 10h18" />
+      </>
+    ),
+    truck: (
+      <>
+        <path d="M3 4h12v13H3Zm12 5h3l3 4v4h-6" />
+        <circle cx="7" cy="18" r="2" />
+        <circle cx="18" cy="18" r="2" />
+      </>
+    ),
+    bell: <path d="M4 17h16l-2-3V9a6 6 0 0 0-12 0v5ZM10 21h4" />,
+    wind: <path d="M3 8h12a3 3 0 1 0-3-3M3 12h16a3 3 0 1 1-3 3M3 16h5a3 3 0 1 1-3 3" />,
+    rain: (
+      <>
+        <path d="M6 14h12a3 3 0 0 0 0-6 6 6 0 0 0-11-1 4 4 0 0 0-1 7Z" />
+        <path d="m8 18-1 3m6-3-1 3m6-3-1 3" />
+      </>
+    ),
+    snow: <path d="M12 2v20M3 7l18 10M3 17 21 7M9 3l3 3 3-3M9 21l3-3 3 3" />,
+  };
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center text-fg-subtle [&>svg]:size-full",
+        size === "lg" ? "size-10" : "size-5",
+      )}
+    >
+      {icons[name] ?? (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          {paths[name]}
+        </svg>
+      )}
+    </span>
+  );
+}
+export interface GenerativeLibraryOptions {
+  /** Only host-approved images may load. No arbitrary model-supplied network requests. */ resolveImage?: (
+    src: string,
+  ) => string | undefined;
+  /** Host-derived values, such as a quote. The destination must revalidate them. */ resolveFact?: GenerativeFactResolver;
+}
+function GeneratedFact({
+  label,
+  value,
+  binding,
+  resolveFact,
+}: z.infer<typeof nodeSchemas.Fact> & GenerativeLibraryOptions) {
+  const form = useContext(FieldContext);
+  useEffect(() => {
+    if (binding) form?.bindings.add(binding);
+    return () => {
+      if (binding) form?.bindings.delete(binding);
+    };
+  }, [binding, form?.bindings]);
+  let displayed = value;
+  if (binding) {
+    try {
+      displayed =
+        resolveFact?.(
+          binding,
+          Object.fromEntries([...(form?.fields ?? [])].map(([name, field]) => [name, field.value])),
+        ) ?? copy.quoteUnavailable;
+    } catch {
+      displayed = copy.quoteUnavailable;
+    }
+  }
+  return (
+    <dl className="flex min-w-0 flex-col gap-1">
+      <dt className="type-caption font-normal text-fg-subtle">{label}</dt>
+      <dd
+        className="type-heading wrap-anywhere text-fg-emphasis numeric"
+        aria-live={binding ? "polite" : undefined}
+      >
+        {displayed}
+      </dd>
+    </dl>
+  );
+}
+function ApprovedImage({
+  src,
+  alt,
+  size,
+  round,
+  resolveImage,
+}: z.infer<typeof nodeSchemas.Image> & GenerativeLibraryOptions) {
+  const [failed, setFailed] = useState(false);
+  let approved: string | undefined;
+  try {
+    approved = resolveImage?.(src);
+  } catch {
+    /* An unavailable host resolver uses the image fallback. */
+  }
+  const safe = approved && (/^https:\/\//.test(approved) || /^\/(?!\/)/.test(approved));
+  return safe && !failed ? (
+    <img
+      key={approved}
+      src={approved}
+      alt={alt}
+      loading="lazy"
+      referrerPolicy="no-referrer"
+      onError={() => setFailed(true)}
+      className={cn(
+        "max-w-full object-cover",
+        size === "sm" ? "size-avatar-lg shrink-0" : "aspect-video w-full rounded-control",
+        round && "rounded-full",
+      )}
+    />
+  ) : (
+    <div
+      role={alt ? "img" : undefined}
+      aria-label={alt ? `${alt} · ${copy.imageMissing}` : undefined}
+      className={cn(
+        "flex items-center justify-center bg-surface-subtle text-fg-subtle",
+        size === "sm" ? "size-avatar-lg shrink-0" : "aspect-video rounded-control",
+        round && "rounded-full",
+      )}
+    >
+      <span aria-hidden>▧</span>
+    </div>
+  );
+}
+/** Same wire vocabulary as upstream, with SuperXD controls and a closed token-only presentation. */
+export function createSuperxdGenerativeLibrary(
+  options: GenerativeLibraryOptions = {},
+): GenerativeUILibrary {
+  const component = <T extends z.ZodType>(
+    schema: T,
+    description: string,
+    render: (
+      props: z.infer<T> & {
+        children?: ReactNode;
+        $dispatch?: GenerativeUIDispatch;
+        $action?: StructuredAction;
+      },
+    ) => ReactNode,
+  ) => ({ properties: schema, description, render });
+  return {
+    Card: component(
+      nodeSchemas.Card,
+      "A related set of content, optionally with a form and actions.",
+      ({ title, asForm, confirm, cancel, children, $dispatch }) => (
+        <section className="flex min-w-0 flex-col gap-5 rounded-surface border border-line-subtle bg-surface p-5 text-fg shadow-control sm:p-6">
+          {asForm ? (
+            <GenerativeForm
+              title={title}
+              confirm={confirm}
+              cancel={cancel}
+              dispatch={$dispatch}
+              resolveFact={options.resolveFact}
+            >
+              {children}
+            </GenerativeForm>
+          ) : (
+            <>
+              {title ? <h3 className="type-title text-fg-emphasis">{title}</h3> : null}
+              {children}
+              {confirm || cancel ? (
+                <div className="flex flex-wrap gap-3 border-t border-line-subtle pt-5">
+                  {confirm ? (
+                    <GeneratedButton
+                      label={confirm.label}
+                      action={confirm.$action}
+                      dispatch={$dispatch}
+                      buttonStyle="primary"
+                    />
+                  ) : null}
+                  {cancel ? (
+                    <GeneratedButton
+                      label={cancel.label}
+                      action={cancel.$action}
+                      dispatch={$dispatch}
+                      buttonStyle="ghost"
+                    />
+                  ) : null}
+                </div>
+              ) : null}
+            </>
+          )}
+        </section>
+      ),
+    ),
+    Form: component(
+      nodeSchemas.Form,
+      "A form collecting named, labelled controls.",
+      ({ children, $action, $dispatch }) => (
+        <GenerativeForm action={$action} dispatch={$dispatch} resolveFact={options.resolveFact}>
+          {children}
+        </GenerativeForm>
+      ),
+    ),
+    Row: component(nodeSchemas.Row, "A wrapping row.", ({ children, gap = 3, align, justify }) => (
+      <div
+        className={cn(
+          "flex min-w-0 flex-wrap",
+          gaps[gap],
+          align === "center" ? "items-center" : align === "end" ? "items-end" : "items-start",
+          justify === "between"
+            ? "justify-between"
+            : justify === "end"
+              ? "justify-end"
+              : justify === "center"
+                ? "justify-center"
+                : "justify-start",
+        )}
+      >
+        {children}
+      </div>
+    )),
+    Col: component(nodeSchemas.Col, "A vertical stack.", ({ children, gap = 3, align }) => (
+      <div
+        className={cn(
+          "flex min-w-0 flex-col",
+          gaps[gap],
+          align === "center" ? "items-center" : align === "end" ? "items-end" : "items-stretch",
+        )}
+      >
+        {children}
+      </div>
+    )),
+    Text: component(
+      nodeSchemas.Text,
+      "Plain text.",
+      ({ value, size = "sm", weight, color, children }) => (
+        <p
+          className={cn(
+            "min-w-0 wrap-anywhere",
+            sizes[size],
+            weight && weight !== "normal" && "font-medium",
+            color === "secondary" ? "text-fg-subtle" : "text-fg-emphasis",
+          )}
+        >
+          {value}
+          {children}
+        </p>
+      ),
+    ),
+    Header: component(nodeSchemas.Header, "A section heading.", ({ text, size = "md" }) => (
+      <h3 className={cn("text-fg-emphasis", sizes[size])}>{text}</h3>
+    )),
+    Caption: component(nodeSchemas.Caption, "Quiet supporting text.", ({ value }) => (
+      <p className="type-caption font-normal wrap-anywhere text-fg-subtle">{value}</p>
+    )),
+    Markdown: component(nodeSchemas.Markdown, "Safe formatted text.", ({ value }) => (
+      <MessageMarkdown text={value} />
+    )),
+    Fact: component(nodeSchemas.Fact, "A labelled value.", (props) => (
+      <GeneratedFact {...props} resolveFact={options.resolveFact} />
+    )),
+    Badge: component(
+      nodeSchemas.Badge,
+      "A status with text as well as colour.",
+      ({ value, variant, children }) => (
+        <span
+          className={cn(
+            "inline-flex items-center gap-1.5 self-start rounded-cell border px-2 py-1 font-mono type-caption",
+            variant === "success"
+              ? "border-success-line bg-success-subtle text-success"
+              : variant === "warning"
+                ? "border-attention-line bg-attention-subtle text-attention"
+                : variant === "info"
+                  ? "border-info-line bg-info-subtle text-info"
+                  : "border-line-subtle bg-surface-muted text-fg",
+          )}
+        >
+          {children}
+          {value}
+        </span>
+      ),
+    ),
+    Divider: component(nodeSchemas.Divider, "A quiet separator.", () => (
+      <hr className="border-line-subtle" />
+    )),
+    Spacer: component(nodeSchemas.Spacer, "Flexible space.", () => <span className="flex-1" />),
+    Accent: component(nodeSchemas.Accent, "A neutral event marker.", () => (
+      <span aria-hidden className="h-control-sm w-1 rounded-full bg-line-emphasis" />
+    )),
+    Icon: component(nodeSchemas.Icon, "A supporting decorative symbol.", (props) => (
+      <GenerativeIcon {...props} />
+    )),
+    Image: component(nodeSchemas.Image, "A host-approved image with an alternative.", (props) => (
+      <ApprovedImage key={props.src} {...props} {...options} />
+    )),
+    Avatar: component(nodeSchemas.Avatar, "Initials for a person.", ({ name }) => (
+      <span
+        role="img"
+        aria-label={name}
+        className="grid size-avatar-lg shrink-0 place-items-center rounded-full bg-surface-emphasis type-label text-fg-emphasis"
+      >
+        {name
+          .split(/\s+/)
+          .slice(0, 2)
+          .map((n) => n[0])
+          .join("")}
+      </span>
+    )),
+    Alert: component(nodeSchemas.Alert, "A contextual message.", ({ title, description, tone }) => (
+      <Callout
+        title={title}
+        tone={tone === "warning" ? "attention" : tone === "danger" ? "error" : tone}
+      >
+        {description}
+      </Callout>
+    )),
+    ListView: component(nodeSchemas.ListView, "A set of related rows.", ({ children }) => (
+      <ul className="flex list-none flex-col divide-y divide-line-subtle p-0">{children}</ul>
+    )),
+    ListViewItem: component(
+      nodeSchemas.ListViewItem,
+      "A passive list row. Put explicit buttons within it.",
+      ({ children }) => <li className="min-w-0 py-3 first:pt-0 last:pb-0">{children}</li>,
+    ),
+    Input: component(nodeSchemas.Input, "A labelled text field.", (props) => (
+      <InputField {...props} />
+    )),
+    Select: component(nodeSchemas.Select, "A labelled choice.", (props) => (
+      <SelectField {...props} />
+    )),
+    DatePicker: component(
+      nodeSchemas.DatePicker,
+      "A calendar date, with segmented keyboard input.",
+      (props) => <GeneratedDate {...props} />,
+    ),
+    RadioGroup: component(nodeSchemas.RadioGroup, "A small set of choices.", (props) => (
+      <GeneratedRadio {...props} />
+    )),
+    Checkbox: component(nodeSchemas.Checkbox, "An optional choice.", (props) => (
+      <GeneratedCheckbox {...props} />
+    )),
+    Button: component(
+      nodeSchemas.Button,
+      "An explicit action routed to the host.",
+      ({ $action, $dispatch, children, ...props }) => (
+        <GeneratedButton {...props} action={$action} dispatch={$dispatch}>
+          {children}
+        </GeneratedButton>
+      ),
+    ),
+    Progress: component(
+      nodeSchemas.Progress,
+      "A labelled measure of progress.",
+      ({ label, value, max }) => (
+        <ProgressBar
+          aria-label={label}
+          value={value}
+          maxValue={max}
+          className="h-1.5 overflow-hidden rounded-full bg-surface-emphasis"
+        >
+          <div
+            className="h-full rounded-full bg-brand"
+            style={{ width: `${(value / max) * 100}%` }}
+          />
+        </ProgressBar>
+      ),
+    ),
+    Chart: component(
+      nodeSchemas.Chart,
+      "A bounded chart with a data-table alternative.",
+      (props) => <GenerativeChart {...props} />,
+    ),
+    Table: component(nodeSchemas.Table, "A bounded data table, optionally sortable.", (props) => (
+      <GenerativeTable {...props} />
+    )),
+  };
+}
+function GeneratedButton({
+  label,
+  buttonStyle,
+  block,
+  submit,
+  children,
+  action,
+  dispatch,
+}: z.infer<typeof nodeSchemas.Button> & {
+  children?: ReactNode;
+  action?: StructuredAction;
+  dispatch?: GenerativeUIDispatch;
+}) {
+  const { blocked, available, captureInput } = useContext(GenerativeRuntimeContext);
+  const form = useContext(FieldContext);
+  return (
+    <Button
+      type={submit ? "submit" : "button"}
+      variant={
+        buttonStyle === "danger"
+          ? "destructive"
+          : buttonStyle === "primary"
+            ? "primary"
+            : buttonStyle === "ghost"
+              ? "ghost"
+              : "secondary"
+      }
+      className={cn(
+        "h-auto min-h-control-md max-w-full py-control-y wrap-anywhere whitespace-normal",
+        block && "w-full",
+      )}
+      isDisabled={
+        blocked ||
+        !dispatch ||
+        (submit ? !form?.canSubmit : !action || Boolean(available && !available.has(action.type)))
+      }
+      onPress={
+        submit
+          ? undefined
+          : () => {
+              if (action) {
+                if (form) captureInput?.({ ...action, $input: formValues(form.fields).values });
+                void dispatch?.(action);
+              }
+            }
+      }
+    >
+      {children}
+      {label}
+    </Button>
+  );
+}
+export { buttonStyles };