@superxd-studio/adptr 0.5.0

package/source/components/ui/selection.tsx

@@ -0,0 +1,336 @@
+import { PortalTheme } from "./portal-theme";
+import { createContext, useContext, useId, type ReactNode } from "react";
+import {
+  Checkbox as AriaCheckbox,
+  CheckboxGroup as AriaCheckboxGroup,
+  RadioGroup as AriaRadioGroup,
+  Radio,
+  Label,
+  Text,
+  FieldError,
+  Select as AriaSelect,
+  SelectValue,
+  ListBox,
+  ListBoxItem,
+  Popover,
+  Slider as AriaSlider,
+  SliderTrack,
+  SliderThumb,
+  SliderOutput,
+  ToggleButton as AriaToggleButton,
+  Form as AriaForm,
+  type CheckboxProps,
+  type CheckboxGroupProps,
+  type RadioGroupProps,
+  type SelectProps,
+  type SliderProps,
+  type ToggleButtonProps,
+  type FormProps,
+} from "react-aria-components";
+import { TextField as ExistingTextField, type TextFieldProps } from "../text-field";
+import { Button, buttonStyles } from "../button";
+import { IconCheck, IconChevronDown } from "../icons";
+import { cn } from "../../lib/cn";
+import { uiCopy } from "./copy";
+
+const field = "flex min-w-0 flex-col gap-2";
+const hint = "type-caption font-normal text-fg-subtle";
+export interface Choice {
+  id: string;
+  label: string;
+  description?: string;
+  isDisabled?: boolean;
+}
+
+export function Checkbox({
+  label,
+  description,
+  className,
+  ...props
+}: Omit<CheckboxProps, "children"> & { label: ReactNode; description?: ReactNode }) {
+  const id = useId();
+  return (
+    <AriaCheckbox
+      {...props}
+      aria-describedby={description ? `${id}-hint` : props["aria-describedby"]}
+      className={cn(
+        "group inline-flex min-h-control-md cursor-pointer items-start gap-3 rounded-control py-2 outline-none data-disabled:cursor-default data-disabled:opacity-50 data-focus-visible:focus-ring",
+        typeof className === "string" && className,
+      )}
+    >
+      {({ isSelected, isIndeterminate }) => (
+        <>
+          <span
+            aria-hidden="true"
+            className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-cell border border-line-input bg-surface transition-[background-color,border-color,scale] duration-(--duration-settle) ease-settle group-data-indeterminate:border-brand group-data-indeterminate:bg-brand group-data-indeterminate:text-on-brand group-data-pressed:scale-(--press-depth) group-data-pressed:duration-(--duration-snap) group-data-pressed:ease-snap group-data-selected:border-brand group-data-selected:bg-brand group-data-selected:text-on-brand"
+          >
+            {/* The box presses in; the tick grows and settles in, like the radio dot */}
+            {isIndeterminate ? (
+              <span>−</span>
+            ) : (
+              <IconCheck
+                className={cn(
+                  "size-3.5 transition-[scale] duration-(--duration-settle) ease-settle",
+                  isSelected ? "scale-100" : "scale-0",
+                )}
+              />
+            )}
+          </span>
+          <span className="min-w-0">
+            <span className="block type-label text-fg-emphasis">{label}</span>
+            {description ? (
+              <span id={`${id}-hint`} className={cn("mt-1 block", hint)}>
+                {description}
+              </span>
+            ) : null}
+          </span>
+        </>
+      )}
+    </AriaCheckbox>
+  );
+}
+export function CheckboxGroup({
+  label,
+  description,
+  error,
+  options,
+  className,
+  ...props
+}: Omit<CheckboxGroupProps, "children"> & {
+  label: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  options: readonly Choice[];
+}) {
+  return (
+    <AriaCheckboxGroup
+      {...props}
+      isInvalid={Boolean(error) || props.isInvalid}
+      className={cn(field, typeof className === "string" && className)}
+    >
+      <Label className="type-label text-fg-emphasis">{label}</Label>
+      {options.map((option) => (
+        <Checkbox
+          key={option.id}
+          value={option.id}
+          label={option.label}
+          description={option.description}
+          isDisabled={option.isDisabled}
+        />
+      ))}
+      {description && (
+        <Text slot="description" className={hint}>
+          {description}
+        </Text>
+      )}
+      <FieldError className="type-caption text-error">{error}</FieldError>
+    </AriaCheckboxGroup>
+  );
+}
+export function RadioGroup({
+  label,
+  description,
+  error,
+  options,
+  className,
+  ...props
+}: Omit<RadioGroupProps, "children"> & {
+  label: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  options: readonly Choice[];
+}) {
+  return (
+    <AriaRadioGroup
+      {...props}
+      isInvalid={Boolean(error) || props.isInvalid}
+      className={cn(field, typeof className === "string" && className)}
+    >
+      <Label className="type-label text-fg-emphasis">{label}</Label>
+      {options.map((option) => (
+        <Radio
+          key={option.id}
+          value={option.id}
+          isDisabled={option.isDisabled}
+          className="group flex min-h-control-md cursor-pointer items-start gap-3 rounded-control py-2 outline-none data-disabled:opacity-50 data-focus-visible:focus-ring"
+        >
+          <span
+            aria-hidden="true"
+            className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-pill border border-line-input bg-surface transition-[border-color,scale] duration-(--duration-settle) ease-settle group-data-pressed:scale-(--press-depth) group-data-pressed:duration-(--duration-snap) group-data-selected:border-brand"
+          >
+            {/* The dot settles into place: a small spring, from nothing to full size */}
+            <span className="size-2.5 scale-0 rounded-pill bg-brand transition-[scale] duration-(--duration-settle) ease-settle group-data-selected:scale-100" />
+          </span>
+          <span>
+            <span className="block type-label text-fg-emphasis">{option.label}</span>
+            {option.description && (
+              <Text slot="description" className={cn("mt-1 block", hint)}>
+                {option.description}
+              </Text>
+            )}
+          </span>
+        </Radio>
+      ))}
+      {description && (
+        <Text slot="description" className={hint}>
+          {description}
+        </Text>
+      )}
+      <FieldError className="type-caption text-error">{error}</FieldError>
+    </AriaRadioGroup>
+  );
+}
+export function Select({
+  label,
+  description,
+  error,
+  options,
+  className,
+  placeholder = uiCopy.choose,
+  ...props
+}: Omit<SelectProps<Choice>, "children" | "items"> & {
+  label: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  options: readonly Choice[];
+}) {
+  return (
+    <PortalTheme>
+      {(theme) => (
+        <AriaSelect
+          {...props}
+          placeholder={placeholder}
+          isInvalid={Boolean(error) || props.isInvalid}
+          disabledKeys={options.filter((o) => o.isDisabled).map((o) => o.id)}
+          className={cn(field, typeof className === "string" && className)}
+        >
+          <Label className="type-label text-fg-emphasis">{label}</Label>
+          <Button className="group/trigger w-full justify-between text-left whitespace-normal">
+            {/* Only the chosen text, on one line, not the option's whole list layout */}
+            <SelectValue className="min-w-0 break-words data-placeholder:text-fg-subtle">
+              {({ isPlaceholder, selectedText, defaultChildren }) =>
+                isPlaceholder ? defaultChildren : selectedText
+              }
+            </SelectValue>
+            {/* Turns with the settle spring as the list opens, like the accordion */}
+            <IconChevronDown className="transition-[rotate] duration-(--duration-settle) ease-settle group-aria-expanded/trigger:rotate-180 motion-reduce:transition-none" />
+          </Button>
+          {description && (
+            <Text slot="description" className={hint}>
+              {description}
+            </Text>
+          )}
+          <FieldError className="type-caption text-error">{error}</FieldError>
+          <Popover
+            style={theme.style}
+            placement="bottom start"
+            className={cn(
+              theme.className,
+              "z-50 w-(--trigger-width) max-w-[calc(100vw-2rem)] origin-(--trigger-anchor-point) rounded-surface border border-line-subtle bg-surface p-1 text-fg shadow-popover outline-none data-entering:animate-pop-in data-exiting:animate-pop-out",
+            )}
+          >
+            <ListBox
+              items={options}
+              className="max-h-72 overflow-y-auto outline-none"
+              renderEmptyState={() => (
+                <p className="p-3 type-body text-fg-subtle">{uiCopy.empty}</p>
+              )}
+            >
+              {(item) => (
+                <ListBoxItem
+                  id={item.id}
+                  textValue={item.label}
+                  className="group flex cursor-pointer items-center gap-3 rounded-cell p-3 outline-none data-disabled:opacity-50 data-focused:bg-surface-subtle data-selected:bg-surface-muted"
+                >
+                  <span className="min-w-0 flex-1">
+                    <Text slot="label" className="block type-label">
+                      {item.label}
+                    </Text>
+                    {item.description && (
+                      <Text slot="description" className={cn("mt-1 block", hint)}>
+                        {item.description}
+                      </Text>
+                    )}
+                  </span>
+                  <IconCheck className="invisible group-data-selected:visible" />
+                </ListBoxItem>
+              )}
+            </ListBox>
+          </Popover>
+        </AriaSelect>
+      )}
+    </PortalTheme>
+  );
+}
+export function Slider({
+  label,
+  className,
+  ...props
+}: Omit<SliderProps, "children"> & { label: ReactNode }) {
+  return (
+    <AriaSlider
+      {...props}
+      className={cn(
+        "flex w-full min-w-0 flex-col gap-3 data-disabled:opacity-50",
+        typeof className === "string" && className,
+      )}
+    >
+      <div className="flex justify-between gap-4">
+        <Label className="type-label text-fg-emphasis">{label}</Label>
+        <SliderOutput className="type-caption text-fg-subtle numeric" />
+      </div>
+      <SliderTrack className="relative h-6 w-full rounded-control bg-surface-subtle">
+        {({ state }) => (
+          <>
+            {state.values.map((_, index) => (
+              <SliderThumb
+                key={index}
+                index={index}
+                aria-label={
+                  Array.isArray(props.value) || Array.isArray(props.defaultValue)
+                    ? `${typeof label === "string" ? label : "Value"} ${index + 1}`
+                    : undefined
+                }
+                // Grows from the point React Aria centres it on, so it stays centred while dragged
+                className="top-1/2 size-6 origin-top-left rounded-pill border border-line-emphasis bg-surface shadow-control transition-[scale,border-color] duration-(--duration-settle) ease-settle outline-none data-dragging:scale-110 data-dragging:border-brand data-focus-visible:focus-ring"
+              />
+            ))}
+          </>
+        )}
+      </SliderTrack>
+    </AriaSlider>
+  );
+}
+export function Toggle({ className, ...props }: ToggleButtonProps) {
+  return (
+    <AriaToggleButton
+      {...props}
+      className={cn(
+        buttonStyles({ size: "sm" }),
+        "data-selected:border-brand data-selected:bg-brand data-selected:text-on-brand",
+        typeof className === "string" && className,
+      )}
+    />
+  );
+}
+const FormValidation = createContext<"native" | "aria" | undefined>(undefined);
+export function TextField(props: TextFieldProps) {
+  const context = useContext(FormValidation);
+  return (
+    <ExistingTextField
+      {...props}
+      validationBehavior={props.validationBehavior ?? context ?? "aria"}
+    />
+  );
+}
+export function Form({ className, children, validationBehavior = "native", ...props }: FormProps) {
+  return (
+    <AriaForm
+      {...props}
+      validationBehavior={validationBehavior}
+      className={cn("flex min-w-0 flex-col gap-4", typeof className === "string" && className)}
+    >
+      <FormValidation.Provider value={validationBehavior}>{children}</FormValidation.Provider>
+    </AriaForm>
+  );
+}

package/source/lib/cn.ts

@@ -0,0 +1,23 @@
+import { clsx, type ClassValue } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+
+// Teaches tailwind-merge the library's own token names, so a className passed
+// in from outside (say "rounded-none") cleanly replaces the component's own.
+const merge = extendTailwindMerge<"type-role">({
+  extend: {
+    theme: {
+      radius: ["control", "cell", "surface", "pill"],
+      shadow: ["control", "popover", "dialog"],
+      ease: ["standard", "exit"],
+      animate: ["fade-in", "rise-in", "slide-in", "dialog-in", "pulse-soft"],
+    },
+    classGroups: {
+      "type-role": ["type-title", "type-heading", "type-body", "type-label", "type-caption"],
+    },
+  },
+});
+
+/** Joins class names and resolves Tailwind conflicts (last one wins). */
+export function cn(...inputs: ClassValue[]): string {
+  return merge(clsx(inputs));
+}

package/source/reusable/ai-sdk/index.ts

@@ -0,0 +1,114 @@
+import { DefaultChatTransport, readUIMessageStream, type UIMessage, type UIMessageChunk } from "ai";
+import {
+  ChatInterrupted,
+  type ChatAdapter,
+  type ChatEvent,
+  type ChatMessage,
+} from "../core/index.js";
+
+export interface AiSdkChatOptions {
+  endpoint: string;
+  /** Opt into editing, regeneration and versions. Restart is controlled separately by retry. */
+  conversationActions?: boolean;
+  /** Allow Restart as a new run. Defaults to true; disable for endpoints without replay safety. */
+  retry?: boolean;
+  /** Stable conversation identity; requestId remains a distinct per-run identifier. */
+  chatId?: string;
+  headers?: () => HeadersInit | Promise<HeadersInit>;
+  credentials?: RequestCredentials;
+  fetch?: typeof globalThis.fetch;
+}
+
+function toMessage(message: ChatMessage): UIMessage {
+  const retained = message.metadata?.aiSdk as
+    { metadata?: unknown; parts?: UIMessage["parts"] } | undefined;
+  return {
+    id: message.id,
+    role: message.role,
+    metadata: { provider: retained?.metadata, superxdFiles: message.files ?? [] },
+    parts: [
+      ...(message.text ? [{ type: "text" as const, text: message.text }] : []),
+      ...(message.files ?? []).map((file) => ({
+        type: "file" as const,
+        mediaType: file.mediaType,
+        filename: file.name,
+        url: file.url,
+      })),
+      ...(retained?.parts ?? []).filter((part) => part.type !== "text" && part.type !== "file"),
+    ],
+  };
+}
+
+/** SDK owns protocol parsing only; SuperXD or the host owns the conversation. */
+export function createAiSdkChatAdapter(options: AiSdkChatOptions): ChatAdapter {
+  const chatId = options.chatId ?? globalThis.crypto.randomUUID();
+  const transport = new DefaultChatTransport<UIMessage>({
+    api: options.endpoint,
+    headers: async () => new Headers(await options.headers?.()),
+    credentials: options.credentials ?? "same-origin",
+    fetch: options.fetch,
+  });
+  return {
+    capabilities: {
+      send: true,
+      cancel: true,
+      retry: options.retry ?? true,
+      attachments: true,
+      ...(options.conversationActions ? { edit: true, regenerate: true, branches: true } : {}),
+    },
+    async *run(request, signal): AsyncGenerator<ChatEvent> {
+      const stream = await transport.sendMessages({
+        trigger: "submit-message",
+        chatId,
+        messageId: request.messages.at(-1)?.id,
+        messages: request.messages.map(toMessage),
+        abortSignal: signal,
+        body: { requestId: request.requestId },
+      });
+      let finished = false;
+      let remoteAbort = false;
+      const observed = stream.pipeThrough(
+        new TransformStream<UIMessageChunk, UIMessageChunk>({
+          transform(chunk, controller) {
+            if (JSON.stringify(chunk).length > 200_000) throw new Error("SDK part too large");
+            if (chunk.type.startsWith("tool-"))
+              throw new Error("Tool capabilities are not supported by this slice");
+            if (chunk.type === "finish") finished = true;
+            if (chunk.type === "abort") remoteAbort = true;
+            controller.enqueue(chunk);
+          },
+        }),
+      );
+      let previous = "";
+      try {
+        for await (const message of readUIMessageStream({
+          stream: observed,
+          terminateOnError: true,
+        })) {
+          if (signal.aborted) return;
+          const text = message.parts
+            .filter((part) => part.type === "text")
+            .map((part) => part.text)
+            .join("");
+          if (text.length > 100_000) throw new Error("Response too large");
+          if (text !== previous) {
+            yield text.startsWith(previous)
+              ? { type: "text", text: text.slice(previous.length) }
+              : { type: "replace-text", text };
+            previous = text;
+          }
+          const metadata = { aiSdk: { metadata: message.metadata, parts: message.parts } };
+          if (JSON.stringify(metadata).length > 200_000) throw new Error("Metadata too large");
+          yield { type: "metadata", metadata };
+        }
+        if (signal.aborted) return;
+        if (!finished || remoteAbort) throw new ChatInterrupted();
+        yield { type: "finish" };
+      } catch (error) {
+        if (signal.aborted) return;
+        if (error instanceof TypeError) throw new ChatInterrupted();
+        throw error;
+      }
+    },
+  };
+}