@aphrody/m3-showcase 3.3.4

package/src/pages/Adaptive.tsx

@@ -0,0 +1,128 @@
+import { BREAKPOINTS, HEIGHT_BREAKPOINTS, marginFor, navigationFor, panesFor, WINDOW_SIZE_CLASSES } from "@aphrody/m3-tokens/breakpoints";
+import { useEffect, useRef, useState } from "react";
+import { attachDpad } from "../adaptive/dpad.ts";
+import { LAYOUT_MODES, setLayoutOverride, type LayoutMode } from "../adaptive/window.ts";
+import { Card, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+const FRAMES: ReadonlyArray<{ mode: LayoutMode; width: number; height: number; label: string }> = [
+  { mode: "mobile", width: 390, height: 844, label: "Mobile · 390 × 844" },
+  { mode: "desktop", width: 1280, height: 800, label: "Desktop · 1280 × 800" },
+  { mode: "tv", width: 1920, height: 1080, label: "TV · 1920 × 1080" },
+];
+
+function Frame({ mode, width, height, label, scale }: { mode: LayoutMode; width: number; height: number; label: string; scale: number }) {
+  return (
+    <figure className="flex flex-col gap-2" data-testid={`frame-${mode}`}>
+      <div className="overflow-hidden rounded-large border border-outline-variant" style={{ width: width * scale, height: height * scale }}>
+        <iframe title={`${label} preview`} src={`${location.pathname}?layout=${mode}#/overview`} loading="lazy" className="origin-top-left border-0" style={{ width, height, transform: `scale(${scale})` }} />
+      </div>
+      <figcaption className="text-label-medium text-on-surface-variant">{label}</figcaption>
+    </figure>
+  );
+}
+
+export default function Adaptive({ adaptive: a }: PageProps) {
+  const [dpad, setDpad] = useState(false);
+  const [focused, setFocused] = useState("none");
+  const grid = useRef<HTMLDivElement>(null);
+  const framed = window.self !== window.top;
+
+  useEffect(() => {
+    if (!dpad || a.mode === "tv") return;
+    document.documentElement.dataset["dpad"] = "on";
+    const detach = attachDpad({ onBack: () => history.back() });
+    return () => {
+      detach();
+      delete document.documentElement.dataset["dpad"];
+    };
+  }, [dpad, a.mode]);
+
+  return (
+    <Page title="Adaptive" summary="One app, three layouts. The window size class (M3 breakpoints at 600, 840, 1200 and 1600 dp) picks the navigation and the panes; the TV layout adds a 10-foot type scale and D-pad focus navigation." packages={["@aphrody/m3-tokens", "@aphrody/m3-front"]} panes={a.panes}>
+      <Section title="This window" description="Live from @aphrody/m3-front (observeWindowClass) and @aphrody/m3-tokens.">
+        <dl className="grid grid-cols-2 gap-3 expanded:grid-cols-4" data-testid="window-state">
+          {[
+            ["Width class", `${a.width} (${a.widthPx} px)`],
+            ["Height class", `${a.height} (${a.heightPx} px)`],
+            ["Navigation", a.navigation],
+            ["Panes", String(a.panes)],
+            ["Layout mode", `${a.mode} (${a.source})`],
+            ["Margin", `${marginFor(a.width)} dp`],
+            ["Orientation", a.landscape ? "landscape" : "portrait"],
+            ["Pointer", a.touch ? "coarse (touch)" : "fine"],
+          ].map(([term, value]) => (
+            <Card key={term}>
+              <dt className="text-label-medium text-on-surface-variant">{term}</dt>
+              <dd className="text-title-medium text-on-surface">{value}</dd>
+            </Card>
+          ))}
+        </dl>
+      </Section>
+
+      <Section title="Layout mode" description="TV is chosen by user agent (Tizen, webOS, Android TV, Fire TV, Chromecast, consoles), by ?layout=tv, or here.">
+        <div role="radiogroup" aria-label="Layout mode" className="inline-flex flex-wrap gap-2">
+          {[...LAYOUT_MODES, null].map((mode) => (
+            <button key={mode ?? "auto"} type="button" role="radio" aria-checked={(mode ?? "auto") === (a.source === "override" ? a.mode : "auto")} data-dpad data-testid={`layout-${mode ?? "auto"}`} className={`state-layer rounded-full border px-4 py-2 text-label-large ${(mode ?? "auto") === (a.source === "override" ? a.mode : "auto") ? "border-transparent bg-secondary-container text-on-secondary-container" : "border-outline text-on-surface-variant"}`} onClick={() => setLayoutOverride(mode)}>
+              {mode ?? "auto"}
+            </button>
+          ))}
+        </div>
+      </Section>
+
+      <Section title="Window size classes" description="Lower bounds in dp from @aphrody/m3-tokens/breakpoints; navigation and panes per class.">
+        <div className="m3-scroll overflow-x-auto rounded-large bg-surface-container">
+          <table className="w-full text-left text-body-medium" data-testid="breakpoints">
+            <thead className="text-label-large text-on-surface-variant">
+              <tr>
+                <th className="p-3">Class</th>
+                <th className="p-3">From</th>
+                <th className="p-3">Navigation</th>
+                <th className="p-3">Panes</th>
+                <th className="p-3">Margin</th>
+              </tr>
+            </thead>
+            <tbody>
+              {WINDOW_SIZE_CLASSES.map((c) => (
+                <tr key={c} className={c === a.width ? "bg-secondary-container text-on-secondary-container" : ""} aria-current={c === a.width ? "true" : undefined}>
+                  <td className="p-3 font-medium">{c}</td>
+                  <td className="p-3">{BREAKPOINTS[c]} dp</td>
+                  <td className="p-3">{navigationFor(c)}</td>
+                  <td className="p-3">{panesFor(c)}</td>
+                  <td className="p-3">{marginFor(c)} dp</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <p className="text-body-small text-on-surface-variant">Height classes: compact &lt; {HEIGHT_BREAKPOINTS.medium}, medium &lt; {HEIGHT_BREAKPOINTS.expanded}, expanded from {HEIGHT_BREAKPOINTS.expanded} dp.</p>
+      </Section>
+
+      <Section title="D-pad lab" description="Arrow keys move focus to the nearest control in that direction, Enter activates, Back (Escape, Backspace, TV Back keys) leaves. It is always on in the TV layout; switch it on here to try it with a keyboard.">
+        <div className="flex items-center gap-3">
+          <button type="button" role="switch" aria-checked={dpad || a.mode === "tv"} data-dpad data-testid="dpad-toggle" disabled={a.mode === "tv"} className="state-layer rounded-full border border-outline px-4 py-2 text-label-large" onClick={() => setDpad((v) => !v)}>
+            D-pad navigation: {dpad || a.mode === "tv" ? "on" : "off"}
+          </button>
+          <span className="text-body-medium text-on-surface-variant" data-testid="dpad-focus">Focused: {focused}</span>
+        </div>
+        <div ref={grid} className="grid grid-cols-3 gap-3 expanded:grid-cols-6" onFocusCapture={(event) => setFocused((event.target as HTMLElement).dataset["tile"] ?? "none")}>
+          {Array.from({ length: 12 }, (_, i) => (
+            <button key={i} type="button" data-dpad data-tile={`tile ${i + 1}`} className="state-layer flex h-24 items-center justify-center rounded-large bg-surface-container-high text-title-medium text-on-surface" onClick={() => setFocused(`tile ${i + 1} (activated)`)}>
+              {i + 1}
+            </button>
+          ))}
+        </div>
+      </Section>
+
+      {framed ? null : (
+        <Section title="Three layouts, side by side" description="The same app in three frames: the iframes load this page with ?layout=mobile, desktop and tv.">
+          <div className="flex flex-wrap items-start gap-6" data-testid="frames">
+            {FRAMES.map((f) => (
+              <Frame key={f.mode} {...f} scale={f.mode === "mobile" ? 0.6 : f.mode === "desktop" ? 0.4 : 0.3} />
+            ))}
+          </div>
+        </Section>
+      )}
+    </Page>
+  );
+}

package/src/pages/Ai.tsx

@@ -0,0 +1,174 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef, useState } from "react";
+import {
+  AgUiEventAccumulator,
+  ChatComposer,
+  MessageBubble,
+  ToolCall,
+  type AgUiStreamState,
+} from "@aphrody/m3-ai";
+import type { BaseEvent } from "@aphrody/ag-ui";
+import { Button } from "@aphrody/m3-primitives";
+import { Card, Code, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+const initial = (): AgUiStreamState => new AgUiEventAccumulator().snapshot();
+export default function Ai({ adaptive }: PageProps) {
+  const [draft, setDraft] = useState("Show the Material 3 package inventory.");
+  const [prompt, setPrompt] = useState("");
+  const [state, setState] = useState(initial);
+  const [running, setRunning] = useState(false);
+  const [notice, setNotice] = useState("");
+  const active = useRef<AbortController | null>(null);
+  useEffect(() => () => active.current?.abort(), []);
+
+  async function send() {
+    if (active.current || !draft.trim()) return;
+    const controller = new AbortController();
+    active.current = controller;
+    const accumulator = new AgUiEventAccumulator();
+    setPrompt(draft.trim());
+    setState(initial());
+    setNotice("");
+    setRunning(true);
+    try {
+      const response = await fetch("/api/ai/stream", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ prompt: draft.trim() }),
+        signal: controller.signal,
+      });
+      if (!response.ok || !response.body)
+        throw new Error("The local fixture stream is unavailable.");
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let pending = "";
+      const consume = () => {
+        const packets = pending.split(/\r?\n\r?\n/);
+        pending = packets.pop() ?? "";
+        for (const packet of packets) {
+          const data = packet
+            .split(/\r?\n/)
+            .filter((line) => line.startsWith("data:"))
+            .map((line) => line.slice(5).trimStart())
+            .join("\n");
+          if (data) accumulator.push(JSON.parse(data) as BaseEvent);
+        }
+        if (!controller.signal.aborted) setState(accumulator.snapshot());
+      };
+      try {
+        // eslint-disable-next-line no-await-in-loop -- Each SSE read extends the pending event frame from the previous chunk.
+        for (let chunk = await reader.read(); !chunk.done; chunk = await reader.read()) {
+          pending += decoder.decode(chunk.value, { stream: true });
+          consume();
+        }
+        pending += decoder.decode();
+        consume();
+      } finally {
+        reader.releaseLock();
+      }
+    } catch (error) {
+      if (!controller.signal.aborted)
+        setNotice(error instanceof Error ? error.message : "The fixture stream failed.");
+    } finally {
+      if (active.current === controller) {
+        active.current = null;
+        setRunning(false);
+      }
+    }
+  }
+  const stop = () => {
+    active.current?.abort();
+    active.current = null;
+    setRunning(false);
+    setNotice("Stream stopped.");
+  };
+  return (
+    <Page
+      title="AI"
+      summary="Inspect a real AG-UI event stream through the Material 3 transcript, tool-call and composer components."
+      packages={["@aphrody/m3-ai", "@aphrody/ag-ui"]}
+      panes={adaptive.panes}
+      aside={
+        <Card>
+          <h3 className="text-title-medium">Stream state</h3>
+          <Code>
+            {JSON.stringify(
+              {
+                status: state.status,
+                items: state.items.length,
+                subagents: state.subagents,
+                fixture: true,
+              },
+              null,
+              2,
+            )}
+          </Code>
+        </Card>
+      }
+    >
+      <Section
+        title="Local protocol fixture"
+        description="This app streams its package inventory as labelled AG-UI events."
+      >
+        <Card className="flex flex-col gap-4">
+          <div aria-live="polite" aria-busy={running} className="flex flex-col gap-3">
+            {prompt ? (
+              <MessageBubble content={prompt} isUser />
+            ) : (
+              <p className="text-body-large text-on-surface-variant">
+                Send a draft to inspect the local event fixture.
+              </p>
+            )}
+            {state.items.map((item, index) =>
+              item.kind === "tool" ? (
+                <ToolCall key={item.pair.id} pair={item.pair} defaultExpanded />
+              ) : (
+                <MessageBubble
+                  key={index}
+                  content={item.text}
+                  isUser={false}
+                  isStreaming={running}
+                  onCopy={(content) => {
+                    if (!navigator.clipboard) {
+                      setNotice("Clipboard access is unavailable.");
+                      return;
+                    }
+                    void navigator.clipboard.writeText(content).then(
+                      () => setNotice("Message copied."),
+                      () => setNotice("Clipboard access is unavailable."),
+                    );
+                  }}
+                />
+              ),
+            )}
+          </div>
+          <ChatComposer
+            draft={draft}
+            onDraftChange={setDraft}
+            onSend={() => {
+              void send();
+            }}
+            isSending={running}
+            onStop={stop}
+            placeholder="Draft for the local protocol fixture"
+          />
+          <p role="status" className="text-body-medium text-on-surface-variant">
+            {notice || (running ? "Receiving AG-UI events…" : "Ready")}
+          </p>
+          <Button
+            variant="outlined"
+            onClick={() => {
+              stop();
+              setPrompt("");
+              setState(initial());
+              setNotice("");
+            }}
+          >
+            Reset transcript
+          </Button>
+        </Card>
+      </Section>
+    </Page>
+  );
+}

package/src/pages/Brands.tsx

@@ -0,0 +1,156 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef, useState } from "react";
+import { AphrodyAvatar, AphrodyPet, PET, type PetAnimation } from "@aphrody/identity";
+import { PET_ATLAS_URL } from "@aphrody/identity/atlas";
+import {
+  configureBrowserCanvas,
+  createM3CanvasSurface,
+  selectCanvasBackend,
+} from "@aphrody/canvas/browser";
+import { getIcon } from "@aphrody/assets/util";
+import { useM3Theme } from "@aphrody/m3-theme/react";
+import rgTokens, { resolved as rgResolved } from "m3:optional/@rosegriffon/ui/tokens";
+import shenronTokens, { resolved as shenronResolved } from "m3:optional/@shenron/ui/tokens";
+import nieKit, { resolved as nieResolved } from "m3:optional/@aphrody/nie-ui";
+import { Card, Code, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+const kits = [
+  { name: "@rosegriffon/ui/tokens", resolved: rgResolved, namespace: rgTokens },
+  { name: "@shenron/ui/tokens", resolved: shenronResolved, namespace: shenronTokens },
+  { name: "@aphrody/nie-ui", resolved: nieResolved, namespace: nieKit },
+];
+export default function Brands({ adaptive }: PageProps) {
+  const theme = useM3Theme();
+  const [animation, setAnimation] = useState<PetAnimation>("idle");
+  const canvas = useRef<HTMLCanvasElement | null>(null);
+  useEffect(() => {
+    const element = canvas.current;
+    if (!element) return;
+    configureBrowserCanvas(element, {
+      width: 420,
+      height: 180,
+      m3: createM3CanvasSurface({ colorScheme: theme.resolvedTheme }),
+    });
+    const context = element.getContext("2d");
+    if (!context) return;
+    const style = getComputedStyle(element);
+    const ratio = devicePixelRatio || 1;
+    context.setTransform(ratio, 0, 0, ratio, 0, 0);
+    context.fillStyle = style.getPropertyValue("--md-sys-color-surface-container").trim();
+    context.fillRect(0, 0, 420, 180);
+    context.fillStyle = style.getPropertyValue("--md-sys-color-primary").trim();
+    context.fillRect(20, 20, 380, 140);
+    context.fillStyle = style.getPropertyValue("--md-sys-color-on-primary").trim();
+    context.font = "500 24px " + style.fontFamily;
+    context.fillText("Aphrody M3", 40, 82);
+    context.font = "400 16px " + style.fontFamily;
+    context.fillText("Canvas follows the live theme", 40, 114);
+  }, [theme.seedColor, theme.resolvedTheme, theme.variant, theme.contrastLevel]);
+  return (
+    <Page
+      title="Brands"
+      summary="Explore Aphrody's canonical identity, animated pet, adaptive canvas surface and shared file assets."
+      packages={["@aphrody/identity", "@aphrody/canvas", "@aphrody/assets"]}
+      panes={adaptive.panes}
+      aside={
+        <Card>
+          <h3 className="text-title-medium">Host kits</h3>
+          <p className="text-body-medium text-on-surface-variant">
+            Optional modules report their actual resolution in this workspace.
+          </p>
+          {kits.map((kit) => (
+            <div key={kit.name} className="mt-3">
+              <p className="text-label-large">{kit.name}</p>
+              <p className="text-body-medium">
+                {kit.resolved ? "Resolved" : "External host package"}
+              </p>
+              {kit.namespace ? <Code>{Object.keys(kit.namespace).join("\n")}</Code> : null}
+            </div>
+          ))}
+        </Card>
+      }
+    >
+      <Section title="Aphrody identity">
+        <Card className="flex flex-wrap items-center gap-5">
+          {[32, 64, 96].map((size) => (
+            <AphrodyAvatar key={size} size={size} label={"Aphrody emblem at " + size + " pixels"} />
+          ))}
+          <div>
+            <h3 className="text-title-large">Aphrody</h3>
+            <p className="text-body-medium text-on-surface-variant">
+              One brand asset source, with adaptive pixel density.
+            </p>
+          </div>
+        </Card>
+      </Section>
+      <Section
+        title="Animated pet"
+        description="The canonical atlas and timed tracks honour reduced-motion preferences."
+      >
+        <Card className="flex flex-col gap-4">
+          <label className="flex flex-col gap-2 text-label-large">
+            Animation
+            <select
+              className="h-12 rounded-small border border-outline bg-surface px-3"
+              value={animation}
+              onChange={(event) => setAnimation(event.target.value as PetAnimation)}
+            >
+              {Object.keys(PET.tracks).map((name) => (
+                <option key={name}>{name}</option>
+              ))}
+            </select>
+          </label>
+          <AphrodyPet
+            atlasUrl={PET_ATLAS_URL}
+            animation={animation}
+            height={160}
+            label="Aphrody animated pet"
+          />
+        </Card>
+      </Section>
+      <Section
+        title="Canvas surface"
+        description="The browser canvas adapter sizes the backing surface for the display's pixel ratio."
+      >
+        <Card>
+          <canvas
+            ref={canvas}
+            width={420}
+            height={180}
+            style={{ width: "100%", maxWidth: 420, height: "auto" }}
+            role="img"
+            aria-label="Aphrody Material 3 canvas using the current theme"
+          >
+            Aphrody M3 canvas.
+          </canvas>
+          <Code>
+            {JSON.stringify(
+              {
+                backend: selectCanvasBackend("browser"),
+                surface: createM3CanvasSurface({ colorScheme: theme.resolvedTheme }),
+              },
+              null,
+              2,
+            )}
+          </Code>
+        </Card>
+      </Section>
+      <Section title="Shared file assets">
+        <div className="grid grid-cols-3 gap-3 expanded:grid-cols-6">
+          {["Document", "Image", "Audio", "Video", "Code", "Archive"].map((kind) => (
+            <Card key={kind} className="flex flex-col items-center gap-2">
+              <img
+                src={String(getIcon(kind, theme.resolvedTheme === "dark"))}
+                width={48}
+                height={48}
+                alt={kind + " file icon"}
+              />
+              <span className="text-label-large">{kind}</span>
+            </Card>
+          ))}
+        </div>
+      </Section>
+    </Page>
+  );
+}

package/src/pages/Components.tsx

@@ -0,0 +1,91 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import {
+  MdElevatedButton,
+  MdFilledButton,
+  MdFilledTonalButton,
+  MdOutlinedButton,
+  MdTextButton,
+} from "@aphrody/m3-react/button";
+import { MdOutlinedTextField, MdFilledTextField } from "@aphrody/m3-react/textfield";
+import { MdSwitch } from "@aphrody/m3-react/switch";
+import { MdSlider } from "@aphrody/m3-react/slider";
+import { Card, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+export default function Components({ adaptive }: PageProps) {
+  const [clicks, setClicks] = useState(0);
+  const [name, setName] = useState("Aphrody");
+  const [enabled, setEnabled] = useState(true);
+  const [volume, setVolume] = useState(50);
+  return (
+    <Page
+      title="Web components"
+      summary="Material Web custom elements rendered through the React adapters. The shared theme reaches their shadow roots; native events update React state."
+      packages={["@aphrody/material-web", "@aphrody/m3-react"]}
+      panes={adaptive.panes}
+    >
+      <Section
+        title="Button family"
+        description="All five Material 3 emphasis levels trigger the same local counter."
+      >
+        <Card className="flex flex-wrap items-center gap-3">
+          <MdElevatedButton onClick={() => setClicks((value) => value + 1)}>
+            Elevated
+          </MdElevatedButton>
+          <MdFilledButton onClick={() => setClicks((value) => value + 1)}>Filled</MdFilledButton>
+          <MdFilledTonalButton onClick={() => setClicks((value) => value + 1)}>
+            Tonal
+          </MdFilledTonalButton>
+          <MdOutlinedButton onClick={() => setClicks((value) => value + 1)}>
+            Outlined
+          </MdOutlinedButton>
+          <MdTextButton onClick={() => setClicks((value) => value + 1)}>Text</MdTextButton>
+          <output className="text-body-large" aria-live="polite">
+            Activations: {clicks}
+          </output>
+        </Card>
+      </Section>
+      <Section
+        title="Text fields"
+        description="Input events keep outlined and filled fields in sync."
+      >
+        <Card className="flex flex-wrap items-start gap-4">
+          <MdOutlinedTextField
+            label="Outlined name"
+            value={name}
+            onInput={(event) => setName((event.currentTarget as HTMLInputElement).value)}
+          />
+          <MdFilledTextField
+            label="Filled name"
+            value={name}
+            onInput={(event) => setName((event.currentTarget as HTMLInputElement).value)}
+          />
+          <p className="text-body-large">Hello, {name || "visitor"}.</p>
+        </Card>
+      </Section>
+      <Section title="Selection and range">
+        <Card className="flex flex-col gap-4">
+          <label className="flex items-center gap-3">
+            <MdSwitch
+              selected={enabled}
+              onChange={(event) =>
+                setEnabled((event.currentTarget as unknown as { selected: boolean }).selected)
+              }
+              aria-label="Enable notifications"
+            />
+            Enable notifications: {enabled ? "on" : "off"}
+          </label>
+          <MdSlider
+            min={0}
+            max={100}
+            value={volume}
+            aria-label="Volume"
+            onInput={(event) => setVolume(Number((event.currentTarget as HTMLInputElement).value))}
+          />
+          <output className="text-body-large">Volume: {volume}%</output>
+        </Card>
+      </Section>
+    </Page>
+  );
+}