@aphrody/m3-showcase 3.3.4

package/src/adaptive/dpad.ts

@@ -0,0 +1,223 @@
+// D-pad navigation for TV: arrow keys move focus to the nearest focusable element in that direction (spatial
+// navigation), Enter activates, Back (Escape, Backspace, XF86Back, Tizen 10009, webOS 461, Android 4) closes the
+// topmost dialog or goes back. `pickNext` is pure; `attachDpad` binds it to a document.
+
+export type Direction = "up" | "down" | "left" | "right";
+
+export interface Box {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+export const boxOf = (rect: { left: number; top: number; right: number; bottom: number }): Box => ({
+  left: rect.left,
+  top: rect.top,
+  right: rect.right,
+  bottom: rect.bottom,
+});
+
+const centerX = (b: Box) => (b.left + b.right) / 2;
+const centerY = (b: Box) => (b.top + b.bottom) / 2;
+
+/** Overlap length of two ranges (0 when they only touch or are apart). */
+const overlap = (a0: number, a1: number, b0: number, b1: number) =>
+  Math.max(0, Math.min(a1, b1) - Math.max(a0, b0));
+
+/**
+ * The candidate to move to from `from` in `direction`, or undefined. A candidate must lie in the direction (its
+ * centre beyond the origin's centre, its near edge not behind the origin's far edge by more than a tolerance).
+ * The score is the gap along the axis plus twice the offset across it, minus credit for overlapping the origin's
+ * extent across the axis, so a card straight below beats a nearer one far to the side.
+ */
+export function pickNext<T>(
+  from: Box,
+  candidates: ReadonlyArray<{ item: T; box: Box }>,
+  direction: Direction,
+): T | undefined {
+  const horizontal = direction === "left" || direction === "right";
+  const sign = direction === "right" || direction === "down" ? 1 : -1;
+  let best: { item: T; score: number } | undefined;
+  for (const { item, box } of candidates) {
+    if (box === from) continue;
+    const along = horizontal ? centerX(box) - centerX(from) : centerY(box) - centerY(from);
+    if (along * sign <= 1) continue;
+    // Near edge of the candidate relative to the far edge of the origin, along the movement axis.
+    const gap = horizontal
+      ? sign > 0
+        ? box.left - from.right
+        : from.left - box.right
+      : sign > 0
+        ? box.top - from.bottom
+        : from.top - box.bottom;
+    if (gap < -Math.min(horizontal ? from.right - from.left : from.bottom - from.top, 24)) continue;
+    const across = horizontal
+      ? Math.abs(centerY(box) - centerY(from))
+      : Math.abs(centerX(box) - centerX(from));
+    const shared = horizontal
+      ? overlap(from.top, from.bottom, box.top, box.bottom)
+      : overlap(from.left, from.right, box.left, box.right);
+    const score = Math.max(0, gap) + 2 * across - shared;
+    if (!best || score < best.score) best = { item, score };
+  }
+  return best?.item;
+}
+
+/** Keys that mean "back" on TV platforms. */
+export const BACK_KEYS = new Set(["Escape", "Backspace", "BrowserBack", "GoBack", "XF86Back"]);
+export const BACK_KEY_CODES = new Set([4, 10009, 461]);
+
+const FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled]):not([type=hidden])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "[tabindex]:not([tabindex='-1'])",
+  "[data-dpad]",
+  "md-filled-button",
+  "md-outlined-button",
+  "md-text-button",
+  "md-filled-tonal-button",
+  "md-elevated-button",
+  "md-icon-button",
+  "md-filled-icon-button",
+  "md-fab",
+  "md-chip-set md-filter-chip",
+  "md-switch",
+  "md-checkbox",
+  "md-radio",
+  "md-slider",
+  "md-primary-tab",
+  "md-secondary-tab",
+  "md-navigation-tab",
+  "md-list-item[type=button]",
+  "md-list-item[type=link]",
+].join(",");
+
+function disabledByFieldset(element: HTMLElement): boolean {
+  for (
+    let fieldset = element.closest("fieldset[disabled]");
+    fieldset;
+    fieldset = fieldset.parentElement?.closest("fieldset[disabled]") ?? null
+  ) {
+    const legend = [...fieldset.children].find((child) => child.tagName === "LEGEND");
+    if (!legend?.contains(element)) return true;
+  }
+  return false;
+}
+/** The visible, enabled focusable elements under `root`. */
+export function focusables(root: ParentNode): HTMLElement[] {
+  return [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter((el) => {
+    if (el.closest("[hidden], [inert], [aria-hidden='true'], [aria-disabled='true']")) return false;
+    if (
+      disabledByFieldset(el) ||
+      el.matches(":disabled") ||
+      el.hasAttribute("disabled") ||
+      el.getAttribute("aria-disabled") === "true"
+    )
+      return false;
+    const rect = el.getBoundingClientRect();
+    if (rect.width === 0 || rect.height === 0) return false;
+    const style = getComputedStyle(el);
+    return style.visibility !== "hidden" && style.display !== "none";
+  });
+}
+
+/** The topmost modal: an open dialog or an `aria-modal` container. Focus is confined to it. */
+export function activeModal(doc: Document): HTMLElement | null {
+  const modals = [
+    ...doc.querySelectorAll<HTMLElement>("dialog[open], md-dialog[open], [aria-modal='true']"),
+  ].filter((element) => {
+    if (element.closest("[hidden], [inert], [aria-hidden='true']")) return false;
+    const style = getComputedStyle(element);
+    return style.display !== "none" && style.visibility !== "hidden";
+  });
+  return modals.at(-1) ?? null;
+}
+
+export interface DpadOptions {
+  /** Called for a Back key when no modal consumed it. */
+  onBack?: () => void;
+  /** The document to bind to (default: the global one). */
+  doc?: Document;
+}
+
+/** Bind the keys to `doc`. Returns a disposer. */
+export function attachDpad(options: DpadOptions = {}): () => void {
+  const doc = options.doc ?? document;
+  const move = (direction: Direction): boolean => {
+    const scope: ParentNode = activeModal(doc) ?? doc;
+    const items = focusables(scope);
+    if (items.length === 0) return false;
+    const current = doc.activeElement as HTMLElement | null;
+    const origin =
+      current && items.includes(current)
+        ? current
+        : (current?.closest<HTMLElement>(FOCUSABLE) ?? null);
+    if (!origin) {
+      (items.find((el) => el.hasAttribute("data-dpad-start")) ?? items[0])!.focus();
+      return true;
+    }
+    const from = boxOf(origin.getBoundingClientRect());
+    const target = pickNext(
+      from,
+      items
+        .filter((el) => el !== origin)
+        .map((el) => ({ item: el, box: boxOf(el.getBoundingClientRect()) })),
+      direction,
+    );
+    if (!target) return false;
+    target.focus({ preventScroll: false });
+    target.scrollIntoView?.({ block: "nearest", inline: "nearest" });
+    return true;
+  };
+
+  const onKeyDown = (event: KeyboardEvent): void => {
+    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+    const editing = (event.composedPath()[0] as HTMLElement | undefined)?.closest?.(
+      "input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, [contenteditable='true']",
+    );
+    const direction = (
+      { ArrowUp: "up", ArrowDown: "down", ArrowLeft: "left", ArrowRight: "right" } as const
+    )[event.key as "ArrowUp"];
+    if (direction) {
+      // Inside a text field the arrows belong to the caret; leave through the field's edges with Tab or Back.
+      if (editing) return;
+      if (move(direction)) event.preventDefault();
+      return;
+    }
+    if (event.key === "Enter" && !editing) {
+      const target = doc.activeElement as HTMLElement | null;
+      // Native buttons and links activate themselves; custom controls and tabindex containers need the click.
+      if (
+        target &&
+        !(target instanceof HTMLButtonElement) &&
+        !(target instanceof HTMLAnchorElement) &&
+        !(target instanceof HTMLInputElement) &&
+        !(target instanceof HTMLSelectElement)
+      ) {
+        event.preventDefault();
+        target.click();
+      }
+      return;
+    }
+    if (BACK_KEYS.has(event.key) || BACK_KEY_CODES.has(event.keyCode)) {
+      if (editing && event.key === "Backspace") return;
+      const modal = activeModal(doc);
+      if (modal) {
+        event.preventDefault();
+        if ("close" in modal && typeof modal.close === "function") modal.close();
+        else modal.dispatchEvent(new Event("close", { bubbles: true }));
+        return;
+      }
+      if (options.onBack) {
+        event.preventDefault();
+        options.onBack();
+      }
+    }
+  };
+  doc.addEventListener("keydown", onKeyDown);
+  return () => doc.removeEventListener("keydown", onKeyDown);
+}

package/src/adaptive/window.ts

@@ -0,0 +1,133 @@
+// SPDX-License-Identifier: Apache-2.0
+import { windowClassFor, type WindowClassState } from "@aphrody/m3-front/window-class";
+import { useSyncExternalStore } from "react";
+
+export type LayoutMode = "mobile" | "desktop" | "tv";
+export const LAYOUT_MODES: readonly LayoutMode[] = ["mobile", "desktop", "tv"];
+export const TV_USER_AGENT =
+  /SMART-TV|SmartTV|Tizen|Web0S|WebOS|NetCast|HbbTV|BRAVIA|AFTM|AFTB|AFTT|AFTS|Android TV|GoogleTV|CrKey|Viera|Roku|AppleTV|PlayStation|Xbox/i;
+export function layoutModeFor(width: WindowClassState["width"], tv: boolean): LayoutMode {
+  return tv ? "tv" : width === "compact" ? "mobile" : "desktop";
+}
+export interface LayoutOverride {
+  mode: LayoutMode | null;
+}
+export function parseOverride(search: string, stored: string | null): LayoutMode | null {
+  const params = new URLSearchParams(search);
+  const value = params.get("layout") ?? (params.has("tv") ? "tv" : stored);
+  return (LAYOUT_MODES as readonly string[]).includes(value ?? "") ? (value as LayoutMode) : null;
+}
+export interface AdaptiveState extends WindowClassState {
+  widthPx: number;
+  heightPx: number;
+  mode: LayoutMode;
+  tv: boolean;
+  source: "user-agent" | "override" | "viewport";
+  landscape: boolean;
+  touch: boolean;
+}
+export const STORAGE_KEY = "m3-showcase:layout";
+export function adaptiveFor(input: {
+  width: number;
+  height: number;
+  userAgent: string;
+  override: LayoutMode | null;
+  touch: boolean;
+}): AdaptiveState {
+  const classes = windowClassFor(input.width, input.height);
+  const uaTv = TV_USER_AGENT.test(input.userAgent);
+  const mode = input.override ?? layoutModeFor(classes.width, uaTv);
+  return {
+    ...classes,
+    widthPx: input.width,
+    heightPx: input.height,
+    mode,
+    tv: mode === "tv",
+    source: input.override ? "override" : uaTv ? "user-agent" : "viewport",
+    landscape: input.width >= input.height,
+    touch: input.touch,
+  };
+}
+type Listener = () => void;
+const listeners = new Set<Listener>();
+let snapshot: AdaptiveState | undefined;
+// An explicit choice works even when storage is unavailable; a URL is an initial preference.
+let sessionOverride: LayoutMode | null | undefined;
+const SERVER_SNAPSHOT = adaptiveFor({
+  width: 1280,
+  height: 800,
+  userAgent: "",
+  override: null,
+  touch: false,
+});
+let pointerQuery: MediaQueryList | undefined;
+function read(): AdaptiveState {
+  let stored: string | null = null;
+  try {
+    stored = localStorage.getItem(STORAGE_KEY);
+  } catch {
+    /* The session preference still works. */
+  }
+  const next = adaptiveFor({
+    width: window.innerWidth,
+    height: window.innerHeight,
+    userAgent: navigator.userAgent,
+    override:
+      sessionOverride === undefined ? parseOverride(location.search, stored) : sessionOverride,
+    touch: window.matchMedia?.("(pointer: coarse)").matches ?? false,
+  });
+  if (snapshot && JSON.stringify(snapshot) === JSON.stringify(next)) return snapshot;
+  snapshot = next;
+  const data = document.documentElement.dataset;
+  data["layout"] = next.mode;
+  data["m3Width"] = next.width;
+  data["m3Height"] = next.height;
+  data["m3Nav"] = next.navigation;
+  return next;
+}
+function emit(): void {
+  read();
+  for (const listener of listeners) listener();
+}
+function onStorage(event: StorageEvent): void {
+  if (event.key !== STORAGE_KEY && event.key !== null) return;
+  sessionOverride = undefined;
+  emit();
+}
+/** Set a live preference; persistence is best effort. Clearing returns to the viewport/TV detection. */
+export function setLayoutOverride(mode: LayoutMode | null): void {
+  if (mode !== null && !LAYOUT_MODES.includes(mode)) throw new TypeError("Unknown layout mode");
+  sessionOverride = mode;
+  try {
+    if (mode) localStorage.setItem(STORAGE_KEY, mode);
+    else localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    /* Session only. */
+  }
+  emit();
+}
+function subscribe(listener: Listener): () => void {
+  if (listeners.size === 0) {
+    window.addEventListener("resize", emit, { passive: true });
+    window.addEventListener("orientationchange", emit);
+    window.addEventListener("popstate", emit);
+    window.addEventListener("storage", onStorage);
+    pointerQuery = window.matchMedia?.("(pointer: coarse)");
+    pointerQuery?.addEventListener("change", emit);
+  }
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0) {
+      window.removeEventListener("resize", emit);
+      window.removeEventListener("orientationchange", emit);
+      window.removeEventListener("popstate", emit);
+      window.removeEventListener("storage", onStorage);
+      pointerQuery?.removeEventListener("change", emit);
+      pointerQuery = undefined;
+    }
+  };
+}
+export function useAdaptive(): AdaptiveState {
+  return useSyncExternalStore(subscribe, read, () => SERVER_SNAPSHOT);
+}

package/src/api/index.ts

@@ -0,0 +1,332 @@
+// SPDX-License-Identifier: Apache-2.0
+// Local showcase computations. Providers, credentials and OS writes stay with their native owners.
+import { defineM3Api } from "@aphrody/m3-bun/api";
+import { EventEncoder, EventType, type BaseEvent } from "@aphrody/ag-ui";
+import { DesignCompiler } from "@aphrody/m3-design";
+import { generate, TARGETS, type Target, type ThemeInput } from "@aphrody/m3-os-themes";
+import {
+  generateM3Metadata,
+  generateM3Viewport,
+  m3JsonLd,
+  m3RobotsTxt,
+  m3SchemeColors,
+  m3SchemeStylesheet,
+  m3SitemapXml,
+  withM3,
+} from "@aphrody/m3-next";
+import { renderTemplate, TEMPLATES } from "@aphrody/scaffold";
+import { transformSource, type MigrationKind } from "@aphrody/m3-codemods";
+import lintPlugin from "@aphrody/eslint-plugin-m3";
+import googleSansCode from "@aphrody/m3-fonts/fonts/web/GoogleSansCode-latin.woff2" with { type: "file" };
+import robotoMono from "@aphrody/m3-fonts/fonts/web/RobotoMono-latin.woff2" with { type: "file" };
+import { PACKAGES } from "../inventory.ts";
+
+class InputError extends Error {}
+const json = (data: unknown, status = 200) =>
+  Response.json(data, {
+    status,
+    headers: { "Cache-Control": "no-store", "X-Content-Type-Options": "nosniff" },
+  });
+const guarded =
+  (handler: (request: Request) => Response | Promise<Response>) => async (request: Request) => {
+    try {
+      return await handler(request);
+    } catch (error) {
+      return json(
+        {
+          error:
+            error instanceof InputError
+              ? error.message
+              : "The local computation could not be completed.",
+        },
+        error instanceof InputError ? 400 : 500,
+      );
+    }
+  };
+
+/** Bound incoming JSON before parsing; no conversation or user source is persisted. */
+async function readJson(request: Request): Promise<Record<string, unknown>> {
+  const reader = request.body?.getReader();
+  if (!reader) throw new InputError("A JSON request body is required.");
+  const decoder = new TextDecoder();
+  let body = "",
+    bytes = 0;
+  try {
+    // eslint-disable-next-line no-await-in-loop -- The next request-body chunk depends on the previous read.
+    for (let chunk = await reader.read(); !chunk.done; chunk = await reader.read()) {
+      bytes += chunk.value.byteLength;
+      if (bytes > 65_536) {
+        // eslint-disable-next-line no-await-in-loop -- Stop the sequential request stream before rejecting oversized input.
+        await reader.cancel();
+        throw new InputError("The request body exceeds 64 KiB.");
+      }
+      body += decoder.decode(chunk.value, { stream: true });
+    }
+    body += decoder.decode();
+  } finally {
+    reader.releaseLock();
+  }
+  let value: unknown;
+  try {
+    value = JSON.parse(body);
+  } catch {
+    throw new InputError("The request body must be valid JSON.");
+  }
+  if (!value || typeof value !== "object" || Array.isArray(value))
+    throw new InputError("The request body must be an object.");
+  return value as Record<string, unknown>;
+}
+function textInput(value: unknown, name: string, limit = 2000): string {
+  if (typeof value !== "string" || !value.trim() || value.length > limit)
+    throw new InputError(name + " must be a non-empty string of at most " + limit + " characters.");
+  return value;
+}
+function themeInput(url: URL): ThemeInput {
+  const seed = url.searchParams.get("seed") ?? "#6750a4";
+  const mode = url.searchParams.get("mode") ?? "auto";
+  if (!/^#[a-f\d]{6}$/i.test(seed)) throw new InputError("seed must be #rrggbb.");
+  if (!["light", "dark", "auto"].includes(mode))
+    throw new InputError("mode must be light, dark or auto.");
+  return { name: "Showcase", seed, mode: mode as ThemeInput["mode"] };
+}
+function targetsFor(url: URL): readonly Target[] {
+  const target = url.searchParams.get("target") ?? "all";
+  if (target === "all") return TARGETS;
+  if (!(TARGETS as readonly string[]).includes(target))
+    throw new InputError("Unknown OS theme target.");
+  return [target as Target];
+}
+
+let toolsPromise: Promise<unknown[]> | undefined;
+async function discoverMcpTools(): Promise<unknown[]> {
+  if (!toolsPromise)
+    toolsPromise = (async () => {
+      const [{ createM3McpServer }, { Client }, { InMemoryTransport }] = await Promise.all([
+        import("@aphrody/m3-mcp"),
+        import("@modelcontextprotocol/sdk/client/index.js"),
+        import("@modelcontextprotocol/sdk/inMemory.js"),
+      ]);
+      const server = createM3McpServer();
+      const client = new Client({ name: "m3-showcase", version: "3.3.3" });
+      const [serverTransport, clientTransport] = InMemoryTransport.createLinkedPair();
+      try {
+        await server.connect(serverTransport);
+        await client.connect(clientTransport);
+        return (await client.listTools()).tools;
+      } finally {
+        await client.close();
+        await server.close();
+      }
+    })().catch((error: unknown) => {
+      toolsPromise = undefined;
+      throw error;
+    });
+  return toolsPromise;
+}
+
+const fonts: Readonly<Record<string, string>> = {
+  "GoogleSansCode-latin.woff2": googleSansCode,
+  "RobotoMono-latin.woff2": robotoMono,
+};
+const fontTags = new Map<string, string>();
+
+/** A labelled local AG-UI fixture: real package data, protocol events, no model calls. */
+function fixtureStream(request: Request, prompt: string): Response {
+  const encoder = new EventEncoder();
+  const runId = "fixture-" + crypto.randomUUID();
+  const messageId = runId + "-message";
+  const response =
+    "Local protocol fixture: your draft contains " +
+    prompt.length +
+    " characters. This workspace exposes " +
+    PACKAGES.length +
+    " packages. The transcript below is rendered from AG-UI events.";
+  const events: BaseEvent[] = [
+    { type: EventType.RUN_STARTED, threadId: "showcase-fixture", runId },
+    { type: EventType.TOOL_CALL_START, toolCallId: "inventory", toolCallName: "package_inventory" },
+    { type: EventType.TOOL_CALL_ARGS, toolCallId: "inventory", delta: "{}" },
+    { type: EventType.TOOL_CALL_END, toolCallId: "inventory" },
+    {
+      type: EventType.TOOL_CALL_RESULT,
+      toolCallId: "inventory",
+      messageId: runId + "-inventory",
+      role: "tool",
+      content: JSON.stringify({ packages: PACKAGES.length, source: "build inventory" }),
+    },
+    { type: EventType.TEXT_MESSAGE_START, messageId, role: "assistant" },
+    ...response
+      .match(/.{1,12}/g)!
+      .map((delta) => ({ type: EventType.TEXT_MESSAGE_CONTENT, messageId, delta })),
+    { type: EventType.TEXT_MESSAGE_END, messageId },
+    { type: EventType.RUN_FINISHED, threadId: "showcase-fixture", runId },
+  ] as BaseEvent[];
+  let timer: ReturnType<typeof setInterval> | undefined;
+  let abort: (() => void) | undefined;
+  const cleanup = () => {
+    if (timer) clearInterval(timer);
+    if (abort) request.signal.removeEventListener("abort", abort);
+  };
+  const stream = new ReadableStream<Uint8Array>({
+    start(controller) {
+      if (request.signal.aborted) {
+        controller.error(request.signal.reason);
+        return;
+      }
+      let index = 0;
+      abort = () => {
+        cleanup();
+        controller.error(request.signal.reason);
+      };
+      request.signal.addEventListener("abort", abort, { once: true });
+      timer = setInterval(() => {
+        controller.enqueue(new TextEncoder().encode(encoder.encodeSSE(events[index++])));
+        if (index === events.length) {
+          cleanup();
+          controller.close();
+        }
+      }, 45);
+    },
+    cancel() {
+      cleanup();
+    },
+  });
+  return new Response(stream, {
+    headers: {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-store",
+      "X-M3-Fixture": "true",
+      "X-Content-Type-Options": "nosniff",
+    },
+  });
+}
+
+export default defineM3Api({
+  "/api/packages": () =>
+    Response.json(PACKAGES, { headers: { "Cache-Control": "public, max-age=60" } }),
+  "/api/package": (request) => {
+    const name = new URL(request.url).searchParams.get("name");
+    const found = PACKAGES.find((p) => p.name === name);
+    return found ? json(found) : json({ error: "Unknown package " + String(name) }, 404);
+  },
+  "/api/echo": {
+    POST: guarded(async (request) =>
+      json({
+        received: await readJson(request),
+        method: request.method,
+        contentType: request.headers.get("content-type"),
+      }),
+    ),
+  },
+  "/api/m3/fonts/:name": async (request) => {
+    const name = request.params.name;
+    if (!Object.hasOwn(fonts, name)) return json({ error: "Unknown font." }, 404);
+    const file = Bun.file(fonts[name]);
+    let tag = fontTags.get(name);
+    if (!tag) {
+      tag =
+        '"' + new Bun.CryptoHasher("sha256").update(await file.arrayBuffer()).digest("hex") + '"';
+      fontTags.set(name, tag);
+    }
+    const headers = {
+      "Content-Type": "font/woff2",
+      "Cache-Control": "public, max-age=86400",
+      ETag: tag,
+      "X-Content-Type-Options": "nosniff",
+    };
+    if (request.headers.get("if-none-match") === tag)
+      return new Response(null, { status: 304, headers });
+    return new Response(request.method === "HEAD" ? null : file, { headers });
+  },
+  "/api/ai/stream": {
+    POST: guarded(async (request) =>
+      fixtureStream(request, textInput((await readJson(request)).prompt, "prompt")),
+    ),
+  },
+  "/api/design": {
+    POST: guarded(async (request) => {
+      const body = await readJson(request);
+      const brief = textInput(body.brief, "brief");
+      const seed = body.seed === undefined ? undefined : textInput(body.seed, "seed", 7);
+      if (seed !== undefined && !/^#[a-f\d]{6}$/i.test(seed))
+        throw new InputError("seed must be #rrggbb.");
+      return json(new DesignCompiler().compile(brief, seed));
+    }),
+  },
+  "/api/next": guarded((request) => {
+    const url = new URL(request.url);
+    const theme = themeInput(url);
+    const options = { seed: theme.seed };
+    return json({
+      metadata: generateM3Metadata({
+        name: "Aphrody M3 Showcase",
+        description: "An adaptive Material 3 component showcase.",
+        url: url.origin,
+      }),
+      viewport: generateM3Viewport(options),
+      schemeCss: m3SchemeStylesheet(
+        m3SchemeColors(options),
+        m3SchemeColors({ ...options, dark: true }),
+      ),
+      config: withM3({}),
+      robots: m3RobotsTxt({ origin: url.origin, rules: [{ userAgent: "*", disallow: ["/api/"] }] }),
+      sitemap: m3SitemapXml(["/", "/theme", "/components"], url.origin),
+      jsonLd: m3JsonLd({
+        "@context": "https://schema.org",
+        "@type": "SoftwareApplication",
+        name: "Aphrody M3 Showcase",
+        applicationCategory: "DesignApplication",
+        url: url.origin,
+      }),
+    });
+  }),
+  "/api/system": guarded(async (request) => {
+    const url = new URL(request.url);
+    const files = generate(themeInput(url), targetsFor(url));
+    const sample = renderTemplate({ template: "web", name: "m3-demo", m3Version: "3.3.3" });
+    return json({
+      themeFiles: files.map((file) => ({
+        target: file.target,
+        path: file.path,
+        bytes:
+          typeof file.content === "string"
+            ? Buffer.byteLength(file.content)
+            : file.content.byteLength,
+        binary: typeof file.content !== "string",
+      })),
+      templates: TEMPLATES,
+      scaffold: sample,
+      mcpTools: await discoverMcpTools(),
+      lintRules: Object.entries(lintPlugin.rules).map(([name, rule]) => ({
+        name,
+        description: rule.meta.docs?.description ?? "",
+      })),
+      migration: transformSource(
+        'import { Button } from "@mui/material"; export default () => <Button variant="contained">Save</Button>;',
+      ),
+    });
+  }),
+  "/api/os-theme": guarded((request) => {
+    const url = new URL(request.url);
+    const path = url.searchParams.get("path");
+    const file = generate(themeInput(url), targetsFor(url)).find((item) => item.path === path);
+    if (!file) return json({ error: "Unknown generated theme file." }, 404);
+    if (typeof file.content !== "string")
+      return new Response(file.content as unknown as BodyInit, {
+        headers: { "Content-Type": "image/png", "Cache-Control": "no-store" },
+      });
+    return json({ path: file.path, content: file.content });
+  }),
+  "/api/migrate": {
+    POST: guarded(async (request) => {
+      const body = await readJson(request);
+      const source = textInput(body.source, "source", 40_000);
+      const kind = body.kind ?? "mui";
+      if (kind !== "mui" && kind !== "icons") throw new InputError("kind must be mui or icons.");
+      try {
+        return json(transformSource(source, kind as MigrationKind));
+      } catch {
+        throw new InputError("The source must be valid TSX.");
+      }
+    }),
+  },
+});