@aphrody/m3-showcase 3.3.4

package/src/pages/Motion.tsx

@@ -0,0 +1,157 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import { Button } from "@aphrody/m3-primitives";
+import {
+  M3Transition,
+  M3Fade,
+  M3Collapse,
+  M3ContainerTransform,
+  M3ContainerTransformStart,
+  M3ContainerTransformEnd,
+  M3ListStagger,
+  M3ListStaggerItem,
+  useM3ReducedMotion,
+  type M3TransitionPattern,
+} from "@aphrody/m3-motion";
+import { Card, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+const PATTERNS: M3TransitionPattern[] = [
+  "fade",
+  "fade-through",
+  "shared-axis-x",
+  "shared-axis-y",
+  "shared-axis-z",
+  "collapse",
+];
+export default function Motion({ adaptive }: PageProps) {
+  const reduced = useM3ReducedMotion();
+  const [pattern, setPattern] = useState<M3TransitionPattern>("shared-axis-x");
+  const [step, setStep] = useState(0);
+  const [forward, setForward] = useState(true);
+  const [shown, setShown] = useState(true);
+  const [expanded, setExpanded] = useState(false);
+  const [items, setItems] = useState([1, 2, 3]);
+  return (
+    <Page
+      title="Motion"
+      summary="Material 3 transitions, shared containers and list staggering. Every example follows your operating system's reduced-motion preference, including changes while this page is open."
+      packages={["@aphrody/m3-motion"]}
+      panes={adaptive.panes}
+    >
+      <p role="status" className="text-body-medium">
+        Reduced motion:{" "}
+        {reduced ? "on — states update without animation" : "off — Material motion is active"}
+      </p>
+      <Section title="Navigation patterns">
+        <Card className="flex flex-col gap-4">
+          <label className="flex flex-col gap-2 text-label-large">
+            Transition pattern
+            <select
+              value={pattern}
+              onChange={(event) => setPattern(event.target.value as M3TransitionPattern)}
+              className="rounded-small border border-outline bg-surface p-3"
+            >
+              {PATTERNS.map((value) => (
+                <option key={value}>{value}</option>
+              ))}
+            </select>
+          </label>
+          <div className="min-h-28 overflow-hidden rounded-medium bg-primary-container p-4">
+            <M3Transition stateKey={step} pattern={pattern} forward={forward}>
+              <h3 className="text-title-large text-on-primary-container">View {step + 1}</h3>
+              <p className="text-body-large text-on-primary-container">
+                The state key drives entry and exit. Try forward and backward navigation.
+              </p>
+            </M3Transition>
+          </div>
+          <div className="flex gap-3">
+            <Button
+              variant="outlined"
+              disabled={step === 0}
+              onClick={() => {
+                setForward(false);
+                setStep((value) => Math.max(0, value - 1));
+              }}
+            >
+              Previous
+            </Button>
+            <Button
+              onClick={() => {
+                setForward(true);
+                setStep((value) => value + 1);
+              }}
+            >
+              Next
+            </Button>
+          </div>
+        </Card>
+      </Section>
+      <Section title="Fade and collapse">
+        <Card className="flex flex-col gap-4">
+          <Button variant="tonal" onClick={() => setShown((value) => !value)} aria-expanded={shown}>
+            Toggle content
+          </Button>
+          <M3Fade in={shown}>
+            <p className="text-body-large">A fade keeps the transition focused on opacity.</p>
+          </M3Fade>
+          <M3Collapse in={shown}>
+            <div className="rounded-medium bg-secondary-container p-4 text-on-secondary-container">
+              Collapse interpolates the natural height of this disclosure.
+            </div>
+          </M3Collapse>
+        </Card>
+      </Section>
+      <Section title="Container transform">
+        <M3ContainerTransform
+          isExpanded={expanded}
+          layoutId="showcase-container"
+          className="rounded-large bg-tertiary-container text-on-tertiary-container p-4"
+          style={{ height: expanded ? 210 : 100 }}
+        >
+          <M3ContainerTransformStart>
+            <h3 className="text-title-medium">Compact card</h3>
+            <Button variant="text" onClick={() => setExpanded(true)}>
+              Expand card
+            </Button>
+          </M3ContainerTransformStart>
+          <M3ContainerTransformEnd>
+            <h3 className="text-headline-small">Expanded details</h3>
+            <p className="my-4 text-body-large">
+              The inactive layer is inert and hidden from assistive technology.
+            </p>
+            <Button variant="text" onClick={() => setExpanded(false)}>
+              Collapse card
+            </Button>
+          </M3ContainerTransformEnd>
+        </M3ContainerTransform>
+      </Section>
+      <Section title="List staggering">
+        <Card className="flex flex-col gap-4">
+          <div className="flex gap-3">
+            <Button onClick={() => setItems((values) => [...values, (values.at(-1) ?? 0) + 1])}>
+              Add item
+            </Button>
+            <Button
+              variant="outlined"
+              disabled={items.length === 0}
+              onClick={() => setItems((values) => values.slice(0, -1))}
+            >
+              Remove item
+            </Button>
+          </div>
+          <M3ListStagger className="flex flex-wrap gap-3">
+            {items.map((item) => (
+              <M3ListStaggerItem
+                key={item}
+                className="rounded-medium bg-surface-container-high px-4 py-3 text-body-large"
+              >
+                Item {item}
+              </M3ListStaggerItem>
+            ))}
+          </M3ListStagger>
+        </Card>
+      </Section>
+    </Page>
+  );
+}

package/src/pages/Next.tsx

@@ -0,0 +1,107 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useState } from "react";
+import { useM3Theme } from "@aphrody/m3-theme/react";
+import { Card, Code, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+interface NextOutput {
+  metadata: unknown;
+  viewport: unknown;
+  schemeCss: string;
+  config: unknown;
+  robots: string;
+  sitemap: string;
+  jsonLd: string;
+}
+export default function Next({ adaptive }: PageProps) {
+  const { seedColor } = useM3Theme();
+  const [result, setResult] = useState<NextOutput | null>(null);
+  const [notice, setNotice] = useState("");
+  const [selected, setSelected] = useState<keyof NextOutput>("metadata");
+  useEffect(() => {
+    const controller = new AbortController();
+    setNotice("Computing Next integration output…");
+    void fetch("/api/next?seed=" + encodeURIComponent(seedColor), { signal: controller.signal })
+      .then(async (response) => {
+        const payload = await response.json();
+        if (!response.ok) throw new Error(payload.error ?? "Next output is unavailable.");
+        if (!controller.signal.aborted) {
+          setResult(payload as NextOutput);
+          setNotice("Generated from the current theme and this site's origin.");
+        }
+        return payload;
+      })
+      .catch((error: unknown) => {
+        if (!controller.signal.aborted)
+          setNotice(error instanceof Error ? error.message : "Next output is unavailable.");
+      });
+    return () => controller.abort();
+  }, [seedColor]);
+  const output = result?.[selected];
+  return (
+    <Page
+      title="Next"
+      summary="Explore metadata, viewport, theme sheets and crawler documents generated by the Next integration's public exports."
+      packages={["@aphrody/m3-next"]}
+      panes={adaptive.panes}
+      aside={
+        <Card>
+          <h3 className="text-title-medium">App Router integration</h3>
+          <Code>
+            {
+              'import { withM3 } from "@aphrody/m3-next";\nexport default withM3({});\n\nimport { generateM3Metadata, generateM3Viewport } from "@aphrody/m3-next";\nexport const metadata = generateM3Metadata({ name: "My app" });\nexport const viewport = generateM3Viewport();'
+            }
+          </Code>
+        </Card>
+      }
+    >
+      <Section
+        title="Generated integration documents"
+        description="Public helpers run in this Bun showcase; the separate Next example qualifies its App Router host."
+      >
+        <Card className="flex flex-col gap-3">
+          <label className="flex flex-col gap-2 text-label-large">
+            Output
+            <select
+              className="h-12 rounded-small border border-outline bg-surface px-3"
+              value={selected}
+              onChange={(event) => setSelected(event.target.value as keyof NextOutput)}
+            >
+              {(
+                [
+                  "metadata",
+                  "viewport",
+                  "schemeCss",
+                  "config",
+                  "robots",
+                  "sitemap",
+                  "jsonLd",
+                ] as const
+              ).map((name) => (
+                <option key={name}>{name}</option>
+              ))}
+            </select>
+          </label>
+          <p role="status" className="text-body-medium text-on-surface-variant">
+            {notice}
+          </p>
+          <Code>{typeof output === "string" ? output : JSON.stringify(output ?? {}, null, 2)}</Code>
+        </Card>
+      </Section>
+      {result ? (
+        <Section title="Crawler files">
+          <div className="grid gap-4 expanded:grid-cols-2">
+            <Card>
+              <h3 className="text-title-medium">robots.txt</h3>
+              <Code>{result.robots}</Code>
+            </Card>
+            <Card>
+              <h3 className="text-title-medium">sitemap.xml</h3>
+              <Code>{result.sitemap}</Code>
+            </Card>
+          </div>
+        </Section>
+      ) : null}
+    </Page>
+  );
+}

package/src/pages/Overview.tsx

@@ -0,0 +1,105 @@
+import { useEffect, useState } from "react";
+import { Card, Code, Page, Section, Svg, Chips } from "../components/ui.tsx";
+import { PACKAGES } from "../inventory.ts";
+import { DESTINATIONS } from "../shell/nav.ts";
+import type { PageProps } from "./index.ts";
+import arrowIcon from "m3:icons/chevron_right";
+
+interface Info {
+  name: string;
+  version: string;
+  buildId: string;
+  bun: string;
+  files: number;
+  api: string[];
+}
+
+function useInfo(): { info?: Info; error?: string } {
+  const [state, setState] = useState<{ info?: Info; error?: string }>({});
+  useEffect(() => {
+    const controller = new AbortController();
+    fetch("/api/m3/info", { signal: controller.signal })
+      .then((response) =>
+        response.ok
+          ? (response.json() as Promise<Info>)
+          : Promise.reject(new Error(`HTTP ${response.status}`)),
+      )
+      .then((info) => setState({ info }))
+      .catch((error: Error) => error.name !== "AbortError" && setState({ error: error.message }));
+    return () => controller.abort();
+  }, []);
+  return state;
+}
+
+export default function Overview({ adaptive }: PageProps) {
+  const { info, error } = useInfo();
+  const inWorkspace = PACKAGES.filter((p) => p.workspace).length;
+  const columns =
+    adaptive.mode === "tv"
+      ? "grid-cols-3"
+      : adaptive.width === "compact"
+        ? "grid-cols-1"
+        : adaptive.width === "medium"
+          ? "grid-cols-2"
+          : "grid-cols-3";
+  return (
+    <Page
+      title="Aphrody M3 Showcase"
+      summary="Every package of the aphrody-m3 monorepo in one adaptive app. It is built, served and compiled by @aphrody/m3-bun: the UI files and this page's API come from one Bun process."
+      packages={["@aphrody/m3", "@aphrody/m3-bun"]}
+      panes={adaptive.panes}
+      aside={
+        <Card>
+          <h3 className="mb-2 text-title-medium">One process: UI and API</h3>
+          <p className="mb-3 text-body-small text-on-surface-variant">
+            This card is a live <code>GET /api/m3/info</code> from the process that served the page.
+          </p>
+          {info ? (
+            <Code>{JSON.stringify(info, null, 2)}</Code>
+          ) : (
+            <p className="text-body-small text-error" role="status">
+              {error ? `API unreachable: ${error}` : "Loading…"}
+            </p>
+          )}
+        </Card>
+      }
+    >
+      <Section title="By the numbers">
+        <div className="grid grid-cols-2 gap-3 expanded:grid-cols-4" data-testid="stats">
+          {[
+            [String(PACKAGES.length), "packages and apps"],
+            [String(inWorkspace), "in the Bun workspace"],
+            [String(DESTINATIONS.length), "showcase pages"],
+            [info ? `Bun ${info.bun}` : "…", "serving this page"],
+          ].map(([value, label]) => (
+            <Card key={label}>
+              <div className="text-headline-medium text-primary">{value}</div>
+              <div className="text-body-small text-on-surface-variant">{label}</div>
+            </Card>
+          ))}
+        </div>
+      </Section>
+      <Section title="Explore" description="Each page imports and runs the packages it names.">
+        <div className={`grid gap-3 ${columns}`} data-testid="destinations">
+          {DESTINATIONS.filter((d) => d.id !== "overview").map((d) => (
+            <a
+              key={d.id}
+              href={`#/${d.id}`}
+              data-dpad
+              data-testid={`card-${d.id}`}
+              className="state-layer flex flex-col gap-2 rounded-large bg-surface-container p-4 text-left"
+            >
+              <span className="flex items-center gap-2 text-title-medium text-on-surface">
+                <Svg html={d.icon} className="text-primary" />
+                {d.label}
+                <Svg html={arrowIcon} className="ml-auto text-on-surface-variant" small />
+              </span>
+              <span className="text-body-small text-on-surface-variant">{d.summary}</span>
+              <Chips names={d.packages.slice(0, 3)} />
+            </a>
+          ))}
+        </div>
+      </Section>
+    </Page>
+  );
+}

package/src/pages/Primitives.tsx

@@ -0,0 +1,138 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import {
+  Button,
+  CheckBox,
+  Switch,
+  Slider,
+  Card as PrimitiveCard,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  TabsRoot,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  DialogRoot,
+  DialogTrigger,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  AccordionRoot,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionPanel,
+  ProgressBar,
+  Badge,
+  Icon,
+} from "@aphrody/m3-primitives";
+import { Card, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+export default function Primitives({ adaptive }: PageProps) {
+  const [count, setCount] = useState(0);
+  const [checked, setChecked] = useState(false);
+  const [enabled, setEnabled] = useState(true);
+  const [progress, setProgress] = useState([35]);
+  return (
+    <Page
+      title="React primitives"
+      summary="The Base UI component family styled with Material 3 roles. Try keyboard focus, tabs, a modal dialog and the controlled inputs."
+      packages={["@aphrody/m3-primitives", "@aphrody/m3-baseui"]}
+      panes={adaptive.panes}
+    >
+      <Section title="Actions and surfaces">
+        <div className="grid gap-3 expanded:grid-cols-3">
+          {(["elevated", "filled", "outlined"] as const).map((variant) => (
+            <PrimitiveCard key={variant} variant={variant}>
+              <CardHeader>
+                <CardTitle>{variant} card</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <Button
+                  variant={variant === "elevated" ? "filled" : "outlined"}
+                  onClick={() => setCount((value) => value + 1)}
+                >
+                  <Icon name="add" size={20} />
+                  Activate
+                </Button>
+              </CardContent>
+            </PrimitiveCard>
+          ))}
+        </div>
+        <output className="text-body-large" aria-live="polite">
+          Activations: {count}
+        </output>
+      </Section>
+      <Section title="Controlled inputs">
+        <Card className="flex flex-col gap-4">
+          <label className="flex items-center gap-3">
+            <CheckBox checked={checked} onChange={(event) => setChecked(event.target.checked)} />
+            Receive a local demonstration newsletter
+          </label>
+          <label className="flex items-center gap-3">
+            <Switch checked={enabled} onCheckedChange={setEnabled} aria-label="Enable preview" />
+            Preview: {enabled ? "enabled" : "disabled"}
+          </label>
+          <Slider
+            value={progress}
+            onValueChange={setProgress}
+            min={0}
+            max={100}
+            step={1}
+            getAriaLabel={() => "Progress"}
+          />
+          <ProgressBar percent={progress[0]!} />
+          <output>{progress[0]}%</output>
+        </Card>
+      </Section>
+      <Section title="Tabs and disclosure">
+        <Card>
+          <TabsRoot defaultValue="preview">
+            <TabsList aria-label="Primitive examples">
+              <TabsTrigger value="preview">Preview</TabsTrigger>
+              <TabsTrigger value="details">Details</TabsTrigger>
+            </TabsList>
+            <TabsContent value="preview" className="pt-4">
+              <Badge>Interactive preview</Badge>
+              <p className="mt-3 text-body-large">Use left and right arrows in the tab list.</p>
+            </TabsContent>
+            <TabsContent value="details" className="pt-4">
+              <AccordionRoot>
+                <AccordionItem value="accessibility">
+                  <AccordionTrigger>Keyboard and focus</AccordionTrigger>
+                  <AccordionPanel>
+                    Base UI owns focus movement, expanded state and dismissal. M3 owns typography,
+                    shape and theme roles.
+                  </AccordionPanel>
+                </AccordionItem>
+              </AccordionRoot>
+            </TabsContent>
+          </TabsRoot>
+        </Card>
+      </Section>
+      <Section
+        title="Modal dialog"
+        description="Opening the dialog moves focus inside; Escape closes it and restores focus to the trigger."
+      >
+        <DialogRoot>
+          <DialogTrigger asChild>
+            <Button variant="tonal">Open dialog</Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogTitle>Local preview dialog</DialogTitle>
+            <DialogDescription>
+              This demonstration changes no account or remote data.
+            </DialogDescription>
+            <div className="pt-4">
+              <DialogClose asChild>
+                <Button>Close dialog</Button>
+              </DialogClose>
+            </div>
+          </DialogContent>
+        </DialogRoot>
+      </Section>
+    </Page>
+  );
+}

package/src/pages/Reader.tsx

@@ -0,0 +1,101 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import {
+  CollectionReader,
+  MangaReader,
+  DatabookReader,
+  type ReaderCollectionEdition,
+} from "@aphrody/m3-reader";
+// oxlint-disable-next-line import/no-unassigned-import -- reader styles provide the portable reader layout and reduced-motion rules
+import "@aphrody/m3-reader/styles.css";
+import { Card, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+function samplePage(number: number): string {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="720" height="960" viewBox="0 0 720 960"><rect width="720" height="960" fill="#f5f0ff"/><rect x="40" y="40" width="640" height="390" rx="18" fill="#e0d4f5"/><circle cx="${180 + number * 70}" cy="220" r="80" fill="#6750a4"/><rect x="40" y="470" width="300" height="400" rx="18" fill="#d6e6f0"/><rect x="380" y="470" width="300" height="400" rx="18" fill="#ead8e7"/><text x="60" y="920" font-family="sans-serif" font-size="28" fill="#34264d">Local illustration · page ${number}</text></svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+const PAGES = [1, 2, 3].map(samplePage);
+const EDITIONS: ReaderCollectionEdition[] = [
+  {
+    id: "first",
+    label: "Illustrated edition",
+    chapters: [
+      { id: "one", label: "Shapes", pageCount: 3 },
+      { id: "two", label: "Reading", pageCount: 3 },
+    ],
+  },
+  {
+    id: "second",
+    label: "Annotated edition",
+    chapters: [{ id: "notes", label: "Annotations", pageCount: 3 }],
+  },
+];
+const NOTES = PAGES.map((image, index) => ({
+  image,
+  number: index + 1,
+  text: `Local demonstration page ${index + 1}. The shapes above are original inline SVG sample artwork. Use the paged view, zoom, and keyboard navigation to explore.`,
+  verifiee: true,
+}));
+
+export default function Reader({ adaptive }: PageProps) {
+  const [page, setPage] = useState(1);
+  const [kind, setKind] = useState<"manga" | "notes">("manga");
+  return (
+    <Page
+      title="Reader"
+      summary="An illustrated collection, paged manga viewer and annotated databook. All three pages use original local SVG sample artwork and require no external image request."
+      packages={["@aphrody/m3-reader"]}
+      panes={adaptive.panes}
+    >
+      <Section title="Reader mode">
+        <div className="flex gap-3">
+          {(["manga", "notes"] as const).map((value) => (
+            <button
+              key={value}
+              type="button"
+              aria-pressed={kind === value}
+              onClick={() => setKind(value)}
+              className={`state-layer rounded-full px-4 py-2 text-label-large ${kind === value ? "bg-secondary-container text-on-secondary-container" : "border border-outline"}`}
+            >
+              {value === "manga" ? "Paged illustration" : "Annotated pages"}
+            </button>
+          ))}
+        </div>
+      </Section>
+      <Section
+        title="Local illustrated collection"
+        description="Switch editions, chapters, reading direction and paged or vertical modes."
+      >
+        <Card>
+          <CollectionReader
+            title="Local M3 illustrations"
+            editions={EDITIONS}
+            emptyLabel="No sample pages"
+            contentsLabel="Contents"
+            previousLabel="Previous chapter"
+            nextLabel="Next chapter"
+            renderChapter={(_edition, chapter) =>
+              kind === "manga" ? (
+                <MangaReader
+                  key={chapter.id}
+                  pages={PAGES}
+                  title={chapter.label}
+                  direction="ltr"
+                  onPageChange={setPage}
+                />
+              ) : (
+                <DatabookReader key={chapter.id} pages={NOTES} title={chapter.label} />
+              )
+            }
+          />
+        </Card>
+        {kind === "manga" ? (
+          <p role="status" className="text-body-medium">
+            Illustration page: {page}
+          </p>
+        ) : null}
+      </Section>
+    </Page>
+  );
+}