@superxd-studio/adptr 0.5.0

package/package.json

@@ -0,0 +1,138 @@
+{
+  "name": "@superxd-studio/adptr",
+  "version": "0.5.0",
+  "type": "module",
+  "license": "MIT",
+  "description": "ADPTR by SuperXD: React components and finished product flows for conversation, review and AI-assisted work, with every state designed.",
+  "author": "SuperXD",
+  "homepage": "https://superxd.app",
+  "keywords": [
+    "react",
+    "components",
+    "design-system",
+    "react-aria",
+    "ai",
+    "chat",
+    "adptr"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./ui": {
+      "types": "./types/reusable/ui/index.d.ts",
+      "import": "./ui/index.js"
+    },
+    "./interactions": {
+      "types": "./types/reusable/interactions/index.d.ts",
+      "import": "./interactions/index.js"
+    },
+    "./core": {
+      "types": "./types/reusable/core/index.d.ts",
+      "import": "./core/index.js"
+    },
+    "./custom": {
+      "types": "./types/reusable/custom/index.d.ts",
+      "import": "./custom/index.js"
+    },
+    "./web": {
+      "types": "./types/reusable/web/index.d.ts",
+      "import": "./web/index.js"
+    },
+    "./assistant-ui": {
+      "types": "./types/reusable/assistant-ui/index.d.ts",
+      "import": "./assistant-ui/index.js"
+    },
+    "./ai-sdk": {
+      "types": "./types/reusable/ai-sdk/index.d.ts",
+      "import": "./ai-sdk/index.js"
+    },
+    "./uploads": {
+      "types": "./types/reusable/uploads/index.d.ts",
+      "import": "./uploads/index.js"
+    },
+    "./review": {
+      "types": "./types/reusable/review/index.d.ts",
+      "import": "./review/index.js"
+    },
+    "./generative": {
+      "types": "./types/reusable/generative/index.d.ts",
+      "import": "./generative/index.js"
+    },
+    "./langgraph-review": {
+      "types": "./types/reusable/langgraph-review/index.d.ts",
+      "import": "./langgraph-review/index.js"
+    },
+    "./styles.css": {
+      "types": "./styles.d.ts",
+      "default": "./styles.css"
+    },
+    "./fonts.css": {
+      "types": "./styles.d.ts",
+      "default": "./fonts.css"
+    }
+  },
+  "files": [
+    "source",
+    "examples",
+    "ui",
+    "interactions",
+    "INTERACTIONS.md",
+    "core",
+    "custom",
+    "web",
+    "assistant-ui",
+    "ai-sdk",
+    "uploads",
+    "review",
+    "generative",
+    "langgraph-review",
+    "types",
+    "assets",
+    "chunks",
+    "styles.css",
+    "fonts.css",
+    "styles.d.ts",
+    "LICENSE",
+    "THIRD-PARTY-NOTICES.md",
+    "licenses",
+    "README.md",
+    "REUSE.md",
+    "REVIEW.md",
+    "GENERATIVE.md"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0",
+    "react-aria-components": "^1.21.1",
+    "react-markdown": ">=10.0.0 <=10.1.0",
+    "remark-gfm": ">=4.0.0 <=4.0.1",
+    "@internationalized/date": "^3.12.4",
+    "zod": ">=4.6.4 <=4.6.5"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "@assistant-ui/react": ">=0.15.22 <=0.15.23",
+    "@assistant-ui/react-generative-ui": ">=0.0.21 <=0.0.22",
+    "ai": ">=7.0.126 <=7.0.127",
+    "@langchain/langgraph": ">=1.4.18 <=1.4.19"
+  },
+  "peerDependenciesMeta": {
+    "@assistant-ui/react": {
+      "optional": true
+    },
+    "@assistant-ui/react-generative-ui": {
+      "optional": true
+    },
+    "ai": {
+      "optional": true
+    },
+    "@langchain/langgraph": {
+      "optional": true
+    }
+  }
+}

package/review/index.js

@@ -0,0 +1,31 @@
+import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/types-BGF7r1my.js";
+import { n as o, t as s } from "../chunks/controller-Cfpg0C7v.js";
+//#region src/reusable/review/index.ts
+function c(n) {
+	let i = n.endpoint.replace(/\/$/, "");
+	async function o(e, t, r) {
+		let o = AbortSignal.timeout(n.timeoutMs ?? 15e3), s = await (n.fetch ?? globalThis.fetch)(i + e, {
+			signal: AbortSignal.any([t, o]),
+			method: r === void 0 ? "GET" : "POST",
+			credentials: n.credentials ?? "same-origin",
+			headers: {
+				...Object.fromEntries(new Headers(await n.headers?.()).entries()),
+				...r === void 0 ? {} : { "content-type": "application/json" }
+			},
+			body: r === void 0 ? void 0 : JSON.stringify(r)
+		});
+		if (s.status === 409) throw new a("conflict");
+		if (s.status === 401 || s.status === 403) throw new a("blocked");
+		if (!s.ok || !s.headers.get("content-type")?.startsWith("application/json")) throw Error("Review unavailable");
+		let c = await s.text();
+		if (c.length > 22e4) throw Error("Review response too large");
+		return JSON.parse(c);
+	}
+	return {
+		load: async (t) => e(await o("", t)),
+		decide: async (e, n) => t(await o("/decisions", n, e)),
+		recover: async (e, t) => r(await o(`/receipts/${encodeURIComponent(e)}`, t))
+	};
+}
+//#endregion
+export { s as ReviewController, a as ReviewFault, c as createHttpReviewAdapter, n as parseReviewDecision, i as parseReviewProposal, t as parseReviewReceipt, e as parseReviewRecord, r as parseReviewRecovery, o as reviewReducer };

package/source/components/avatar.tsx

@@ -0,0 +1,50 @@
+import { useState } from "react";
+import { cn } from "../lib/cn.js";
+
+const sizes = {
+  sm: "size-avatar-sm text-avatar-sm",
+  md: "size-avatar-md text-xs",
+  lg: "size-avatar-lg text-sm",
+} as const;
+
+export interface AvatarProps {
+  name: string;
+  src?: string;
+  size?: keyof typeof sizes;
+  className?: string;
+}
+
+function initials(name: string): string {
+  const parts = name.trim().split(/\s+/);
+  const first = parts[0]?.[0] ?? "";
+  const last = parts.length > 1 ? (parts[parts.length - 1]?.[0] ?? "") : "";
+  return (first + last).toUpperCase();
+}
+
+/** A person's photo, or their initials when there's no photo or it fails to load. */
+export function Avatar({ name, src, size = "md", className }: AvatarProps) {
+  const [failed, setFailed] = useState(false);
+  const showImage = src && !failed;
+  return (
+    <span
+      className={cn(
+        "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-pill bg-surface-emphasis font-semibold text-fg-emphasis select-none",
+        sizes[size],
+        className,
+      )}
+    >
+      {showImage ? (
+        <img
+          src={src}
+          alt={name}
+          className="size-full object-cover"
+          onError={() => setFailed(true)}
+        />
+      ) : (
+        <span role="img" aria-label={name}>
+          {initials(name)}
+        </span>
+      )}
+    </span>
+  );
+}

package/source/components/button.tsx

@@ -0,0 +1,155 @@
+import type { ReactNode, Ref } from "react";
+import {
+  Button as AriaButton,
+  Link as AriaLink,
+  composeRenderProps,
+  type ButtonProps as AriaButtonProps,
+  type LinkProps as AriaLinkProps,
+} from "react-aria-components";
+import { cn } from "../lib/cn.js";
+import { IconCheck } from "./icons";
+import { Spinner } from "./spinner";
+
+export type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+export type ButtonSize = "sm" | "md" | "lg" | "icon-sm" | "icon-md";
+
+const base =
+  "relative inline-flex select-none items-center justify-center gap-2 whitespace-nowrap rounded-control type-label outline-none press data-focus-visible:focus-ring data-disabled:cursor-not-allowed data-disabled:opacity-50 data-done:border-done! data-done:bg-done! data-done:text-on-done! data-done:shadow-none!";
+
+const variants: Record<ButtonVariant, string> = {
+  primary:
+    "bg-brand text-on-brand shadow-control data-hovered:bg-brand-emphasis data-pressed:bg-brand-emphasis",
+  secondary:
+    "border border-line bg-surface text-fg-emphasis shadow-control data-hovered:border-line-emphasis data-hovered:bg-surface-muted data-pressed:bg-surface-subtle",
+  ghost: "text-fg-emphasis data-hovered:bg-surface-subtle data-pressed:bg-surface-emphasis",
+  destructive:
+    "bg-destructive text-on-destructive shadow-control data-hovered:bg-destructive/90 data-pressed:bg-destructive/85",
+};
+
+const sizes: Record<ButtonSize, string> = {
+  sm: "h-control-sm px-control-sm-x",
+  md: "h-control-md px-control-md-x",
+  lg: "h-control-lg px-control-lg-x",
+  "icon-sm": "size-control-sm",
+  "icon-md": "size-control-md",
+};
+
+/** The button classes, for anything that should look like a button (links, triggers). */
+export function buttonStyles({
+  variant = "secondary",
+  size = "md",
+  className,
+}: {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  className?: string;
+} = {}): string {
+  return cn(base, variants[variant], sizes[size], className);
+}
+
+export interface ButtonProps extends AriaButtonProps {
+  ref?: Ref<HTMLButtonElement>;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  /**
+   * Shown with a spinner while `isPending` is true, for example "Booking".
+   * Without it the label stays in place (so the width holds) under a spinner.
+   */
+  pendingLabel?: ReactNode;
+  /**
+   * The moment the action finished, for example "Saved". The button turns SuperXD's
+   * ultramarine with a tick, keeping its width. Announce the result nearby as well.
+   */
+  isDone?: boolean;
+  /** Shown with the tick while `isDone` is true. Without it the button's own label stays. */
+  doneLabel?: ReactNode;
+}
+
+export function Button({
+  variant = "secondary",
+  size = "md",
+  pendingLabel,
+  isDone = false,
+  doneLabel,
+  className,
+  children,
+  ...props
+}: ButtonProps) {
+  return (
+    <AriaButton
+      {...props}
+      data-done={isDone || undefined}
+      className={composeRenderProps(className, (className) =>
+        buttonStyles({ variant, size, className }),
+      )}
+    >
+      {composeRenderProps(children, (children, { isPending }) => {
+        if (isDone && !isPending) {
+          return (
+            <>
+              <span className="invisible inline-flex items-center gap-2">{children}</span>
+              <span className="absolute inset-0 flex animate-reveal-in items-center justify-center gap-2">
+                <IconCheck />
+                {doneLabel ?? children}
+              </span>
+            </>
+          );
+        }
+        if (!isPending) return children;
+        if (pendingLabel) {
+          return (
+            <>
+              <Spinner />
+              {pendingLabel}
+            </>
+          );
+        }
+        return (
+          <>
+            <span className="invisible inline-flex items-center gap-2">{children}</span>
+            <span className="absolute inset-0 flex items-center justify-center">
+              <Spinner />
+            </span>
+          </>
+        );
+      })}
+    </AriaButton>
+  );
+}
+
+export interface ButtonLinkProps extends AriaLinkProps {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+/** A link that looks like a button. Use it when the action goes somewhere. */
+export function ButtonLink({
+  variant = "secondary",
+  size = "md",
+  className,
+  ...props
+}: ButtonLinkProps) {
+  return (
+    <AriaLink
+      {...props}
+      className={composeRenderProps(className, (className) =>
+        buttonStyles({ variant, size, className }),
+      )}
+    />
+  );
+}
+
+/** An inline text link. */
+export function TextLink({ className, ...props }: AriaLinkProps) {
+  return (
+    <AriaLink
+      {...props}
+      className={composeRenderProps(className, (className) =>
+        cn(
+          "cursor-pointer rounded-[2px] font-medium text-fg-emphasis underline decoration-line-emphasis underline-offset-[3px] transition-colors duration-(--duration-fast) outline-none data-focus-visible:focus-ring data-hovered:decoration-fg-emphasis",
+          className,
+        ),
+      )}
+    />
+  );
+}

package/source/components/callout.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn.js";
+import { IconAlert, IconCircleAlert, IconCircleCheck, IconInfo } from "./icons";
+
+export type CalloutTone = "neutral" | "info" | "success" | "attention" | "error";
+
+const tones: Record<CalloutTone, { box: string; icon: ReactNode }> = {
+  neutral: {
+    box: "border-line-subtle bg-surface-muted text-fg",
+    icon: <IconInfo className="text-fg-subtle" />,
+  },
+  info: { box: "border-info-line bg-info-subtle text-info", icon: <IconInfo /> },
+  success: { box: "border-success-line bg-success-subtle text-success", icon: <IconCircleCheck /> },
+  attention: {
+    box: "border-attention-line bg-attention-subtle text-attention",
+    icon: <IconAlert />,
+  },
+  error: { box: "border-error-line bg-error-subtle text-error", icon: <IconCircleAlert /> },
+};
+
+export interface CalloutProps {
+  tone?: CalloutTone;
+  title?: ReactNode;
+  children?: ReactNode;
+  /** Buttons or links shown under the message. */
+  actions?: ReactNode;
+  /** Replace or remove (null) the tone's icon. */
+  icon?: ReactNode | null;
+  /**
+   * How screen readers hear it when it appears: "polite" waits its turn,
+   * "assertive" interrupts. Leave unset for messages that are there on load.
+   */
+  live?: "polite" | "assertive";
+  className?: string;
+}
+
+/** A short message in the flow of the page: what happened and what to do next. */
+export function Callout({
+  tone = "neutral",
+  title,
+  children,
+  actions,
+  icon,
+  live,
+  className,
+}: CalloutProps) {
+  const style = tones[tone];
+  return (
+    <div
+      role={live === "assertive" ? "alert" : live === "polite" ? "status" : undefined}
+      className={cn(
+        "flex gap-2.5 rounded-control border px-control-md-x py-control-y type-body",
+        style.box,
+        className,
+      )}
+    >
+      {icon === null ? null : <span className="mt-0.5 flex">{icon ?? style.icon}</span>}
+      <div className="flex min-w-0 flex-1 flex-col gap-1">
+        {title ? <p className="font-medium">{title}</p> : null}
+        {children ? <div className="text-pretty">{children}</div> : null}
+        {actions ? <div className="mt-1.5 flex flex-wrap gap-2">{actions}</div> : null}
+      </div>
+    </div>
+  );
+}

package/source/components/canvas/connector.tsx

@@ -0,0 +1,14 @@
+import { SxdArrow } from "../superxd-arrow";
+
+/** SuperXD's arrow marks the transition, centred in the space between state frames. */
+export function CanvasConnector() {
+  return (
+    <span
+      data-canvas-connector
+      aria-hidden="true"
+      className="pointer-events-none absolute -top-10 left-1/2 -translate-x-1/2 -translate-y-1/2 text-system-blue"
+    >
+      <SxdArrow className="size-6 rotate-90" />
+    </span>
+  );
+}

package/source/components/canvas/copy.ts

@@ -0,0 +1,34 @@
+export const canvasCopy = {
+  previous: "Previous state",
+  loading: "Loading",
+  ready: "Ready",
+  details: "Your details",
+  holding: "Holding the time",
+  submitting: "Submitting",
+  failed: "Try again",
+  checking: "Checking status",
+  confirm: "Confirm the change",
+  booked: "Booked",
+  requested: "Requested",
+  moved: "Booking moved",
+  manage: "Manage booking",
+  cancelling: "Cancelling",
+  cancelled: "Cancelled",
+  closed: "Closed",
+  calendar: "Calendar",
+  event: "Event details",
+  edit: "Edit event",
+  saving: "Saving changes",
+  saved: "Changes saved",
+  discard: "Unsaved changes",
+  review: "Choose changes",
+  applying: "Applying changes",
+  partial: "Review remaining changes",
+  complete: "Changes applied",
+  denied: "Changes declined",
+  conflict: "Draft changed",
+  blocked: "View only",
+  uncertain: "Check the outcome",
+  support: "Support request",
+  supportSaved: "Request saved",
+};