@aphrody/m3-showcase 3.3.4

package/src/pages/System.tsx

@@ -0,0 +1,283 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef, useState } from "react";
+import { useM3Theme } from "@aphrody/m3-theme/react";
+import { Button } from "@aphrody/m3-primitives";
+import { Card, Code, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+interface ThemeFile {
+  target: string;
+  path: string;
+  bytes: number;
+  binary: boolean;
+}
+interface SystemOutput {
+  themeFiles: ThemeFile[];
+  templates: { name: string; summary: string }[];
+  scaffold: Record<string, string>;
+  mcpTools: { name: string; description?: string }[];
+  lintRules: { name: string; description: string }[];
+  migration: { source: string; diagnostics: string[] };
+}
+const sample =
+  'import { Button } from "@mui/material";\nexport default () => <Button variant="contained">Save</Button>;';
+export default function System({ adaptive }: PageProps) {
+  const { seedColor } = useM3Theme();
+  const [target, setTarget] = useState("all");
+  const [data, setData] = useState<SystemOutput | null>(null);
+  const [path, setPath] = useState("");
+  const [content, setContent] = useState("");
+  const [scaffoldFile, setScaffoldFile] = useState("m3.config.ts");
+  const [notice, setNotice] = useState("");
+  const [source, setSource] = useState(sample);
+  const [migration, setMigration] = useState<SystemOutput["migration"] | null>(null);
+  const [busy, setBusy] = useState(false);
+  const active = useRef<AbortController | null>(null);
+  useEffect(() => () => active.current?.abort(), []);
+  const query = "seed=" + encodeURIComponent(seedColor) + "&target=" + encodeURIComponent(target);
+  useEffect(() => {
+    const controller = new AbortController();
+    setNotice("Computing local system outputs…");
+    void fetch("/api/system?" + query, { signal: controller.signal })
+      .then(async (response) => {
+        const payload = await response.json();
+        if (!response.ok) throw new Error(payload.error ?? "System outputs are unavailable.");
+        if (!controller.signal.aborted) {
+          const result = payload as SystemOutput;
+          setData(result);
+          setMigration(result.migration);
+          setPath((current) =>
+            result.themeFiles.some((file) => file.path === current)
+              ? current
+              : (result.themeFiles.find((file) => !file.binary)?.path ?? ""),
+          );
+          setNotice("Generated files are ready to inspect.");
+        }
+        return payload;
+      })
+      .catch((error: unknown) => {
+        if (!controller.signal.aborted)
+          setNotice(error instanceof Error ? error.message : "System outputs are unavailable.");
+      });
+    return () => controller.abort();
+  }, [query]);
+  const selected = data?.themeFiles.find((file) => file.path === path);
+  useEffect(() => {
+    if (!path || selected?.binary) {
+      setContent("");
+      return;
+    }
+    const controller = new AbortController();
+    setContent("");
+    void fetch("/api/os-theme?" + query + "&path=" + encodeURIComponent(path), {
+      signal: controller.signal,
+    })
+      .then(async (response) => {
+        const payload = await response.json();
+        if (!response.ok) throw new Error(payload.error ?? "Theme file is unavailable.");
+        if (!controller.signal.aborted) setContent(payload.content);
+        return payload;
+      })
+      .catch((error: unknown) => {
+        if (!controller.signal.aborted)
+          setNotice(error instanceof Error ? error.message : "Theme file is unavailable.");
+      });
+    return () => controller.abort();
+  }, [path, query, selected?.binary]);
+  async function migrate() {
+    active.current?.abort();
+    const controller = new AbortController();
+    active.current = controller;
+    setBusy(true);
+    try {
+      const response = await fetch("/api/migrate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ source, kind: "mui" }),
+        signal: controller.signal,
+      });
+      const payload = await response.json();
+      if (!response.ok) throw new Error(payload.error ?? "Migration failed.");
+      if (!controller.signal.aborted) {
+        setMigration(payload);
+        setNotice("Source transformed in memory.");
+      }
+    } catch (error) {
+      if (!controller.signal.aborted)
+        setNotice(error instanceof Error ? error.message : "Migration failed.");
+    } finally {
+      if (active.current === controller) {
+        active.current = null;
+        setBusy(false);
+      }
+    }
+  }
+  return (
+    <Page
+      title="System"
+      summary="Generate OS themes and scaffolds, discover design MCP tools, inspect lint rules and run a source migration in memory."
+      packages={[
+        "@aphrody/m3-os-themes",
+        "@aphrody/scaffold",
+        "@aphrody/m3-mcp",
+        "@aphrody/m3-codemods",
+        "@aphrody/eslint-plugin-m3",
+      ]}
+      panes={adaptive.panes}
+      aside={
+        data ? (
+          <Card>
+            <h3 className="text-title-medium">Local capabilities</h3>
+            <Code>
+              {JSON.stringify(
+                {
+                  themeFiles: data.themeFiles.length,
+                  tools: data.mcpTools.length,
+                  rules: data.lintRules.length,
+                  seed: seedColor,
+                },
+                null,
+                2,
+              )}
+            </Code>
+          </Card>
+        ) : undefined
+      }
+    >
+      <p role="status" className="text-body-medium text-on-surface-variant">
+        {notice}
+      </p>
+      <Section
+        title="OS theme artifacts"
+        description="Inspect generated files before applying them through their native installer."
+      >
+        <Card className="flex flex-col gap-3">
+          <label className="flex flex-col gap-2 text-label-large">
+            Target
+            <select
+              className="h-12 rounded-small border border-outline bg-surface px-3"
+              value={target}
+              onChange={(event) => setTarget(event.target.value)}
+            >
+              {["all", "windows", "gnome", "cosmic", "chromium"].map((name) => (
+                <option key={name}>{name}</option>
+              ))}
+            </select>
+          </label>
+          {data ? (
+            <>
+              <label className="flex flex-col gap-2 text-label-large">
+                Generated file
+                <select
+                  className="h-12 rounded-small border border-outline bg-surface px-3"
+                  value={path}
+                  onChange={(event) => setPath(event.target.value)}
+                >
+                  {data.themeFiles.map((file) => (
+                    <option key={file.path} value={file.path}>
+                      {file.path} · {file.bytes} B
+                    </option>
+                  ))}
+                </select>
+              </label>
+              {selected?.binary ? (
+                <img
+                  src={"/api/os-theme?" + query + "&path=" + encodeURIComponent(path)}
+                  width={256}
+                  height={144}
+                  className="rounded-medium"
+                  alt="Wallpaper generated from the current Material 3 theme"
+                />
+              ) : (
+                <Code>{content || "Loading generated file…"}</Code>
+              )}
+            </>
+          ) : null}
+        </Card>
+      </Section>
+      {data ? (
+        <>
+          <Section
+            title="Project scaffold"
+            description="The public renderTemplate export produces this Bun and M3 web project without writing files."
+          >
+            <Card>
+              <label className="flex flex-col gap-2 text-label-large">
+                Scaffold file
+                <select
+                  className="h-12 rounded-small border border-outline bg-surface px-3"
+                  value={scaffoldFile}
+                  onChange={(event) => setScaffoldFile(event.target.value)}
+                >
+                  {Object.keys(data.scaffold).map((file) => (
+                    <option key={file}>{file}</option>
+                  ))}
+                </select>
+              </label>
+              <Code>{data.scaffold[scaffoldFile]}</Code>
+            </Card>
+          </Section>
+          <Section
+            title="MCP tool discovery"
+            description="These schemas are returned by the design server's real MCP discovery protocol."
+          >
+            <div className="grid gap-3 expanded:grid-cols-2">
+              {data.mcpTools.map((tool) => (
+                <Card key={tool.name}>
+                  <h3 className="text-title-medium">{tool.name}</h3>
+                  <p className="text-body-medium text-on-surface-variant">{tool.description}</p>
+                </Card>
+              ))}
+            </div>
+          </Section>
+          <Section title="M3 lint rules">
+            <div className="grid gap-3 expanded:grid-cols-2">
+              {data.lintRules.map((rule) => (
+                <Card key={rule.name}>
+                  <h3 className="text-title-medium">{rule.name}</h3>
+                  <p className="text-body-medium text-on-surface-variant">{rule.description}</p>
+                </Card>
+              ))}
+            </div>
+          </Section>
+        </>
+      ) : null}
+      <Section
+        title="MUI source migration"
+        description="A labelled source fixture exercises the actual codemod. Unsupported semantics produce explicit migration diagnostics."
+      >
+        <Card className="flex flex-col gap-3">
+          <label htmlFor="migration-source" className="text-label-large">
+            TSX source
+          </label>
+          <textarea
+            id="migration-source"
+            maxLength={40000}
+            rows={6}
+            className="rounded-medium border border-outline bg-surface p-3 font-code text-body-small"
+            value={source}
+            onChange={(event) => setSource(event.target.value)}
+          />
+          <Button
+            disabled={busy || !source.trim()}
+            onClick={() => {
+              void migrate();
+            }}
+          >
+            {busy ? "Transforming…" : "Transform source"}
+          </Button>
+          {migration ? (
+            <>
+              <Code>{migration.source}</Code>
+              <p className="text-body-medium text-on-surface-variant">
+                {migration.diagnostics.length
+                  ? migration.diagnostics.join("\n")
+                  : "This fixture migrated without manual decisions."}
+              </p>
+            </>
+          ) : null}
+        </Card>
+      </Section>
+    </Page>
+  );
+}

package/src/pages/Theme.tsx

@@ -0,0 +1,146 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useM3Theme, type SchemeVariant, type ThemeMode } from "@aphrody/m3-theme/react";
+import { schemeFromSeed } from "@aphrody/m3-tokens/dynamic-color";
+import { Button, Input } from "@aphrody/m3-primitives";
+import { Card, Code, Page, Section, Swatch } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+const VARIANTS: SchemeVariant[] = [
+  "tonalSpot",
+  "content",
+  "fidelity",
+  "expressive",
+  "vibrant",
+  "neutral",
+  "monochrome",
+];
+const PAIRS = [
+  ["primary", "on-primary"],
+  ["primary-container", "on-primary-container"],
+  ["secondary", "on-secondary"],
+  ["tertiary", "on-tertiary"],
+  ["surface", "on-surface"],
+  ["surface-container", "on-surface"],
+  ["error", "on-error"],
+  ["error-container", "on-error-container"],
+] as const;
+
+export default function Theme({ adaptive }: PageProps) {
+  const theme = useM3Theme();
+  const roles = schemeFromSeed(theme.seedColor, {
+    dark: theme.resolvedTheme === "dark",
+    contrastLevel: theme.contrastLevel,
+    variant: theme.variant,
+  });
+  return (
+    <Page
+      title="Theme"
+      summary="Derive a complete Material 3 colour scheme from one seed. Changes apply to this whole showcase, including React components and Lit shadow DOM."
+      packages={["@aphrody/m3-theme", "@aphrody/m3-tokens"]}
+      panes={adaptive.panes}
+      aside={
+        <Card>
+          <h3 className="text-title-medium">Current scheme</h3>
+          <Code>
+            {JSON.stringify(
+              {
+                seed: theme.seedColor,
+                mode: theme.themeMode,
+                resolved: theme.resolvedTheme,
+                variant: theme.variant,
+                contrast: theme.contrastLevel,
+              },
+              null,
+              2,
+            )}
+          </Code>
+        </Card>
+      }
+    >
+      <Section title="Customise the live theme">
+        <Card className="grid gap-4 medium:grid-cols-2">
+          <label className="flex flex-col gap-2 text-label-large">
+            Seed colour
+            <Input
+              type="color"
+              value={theme.seedColor}
+              onChange={(event) => theme.setSeedColor(event.target.value)}
+              aria-label="Seed colour"
+            />
+          </label>
+          <label className="flex flex-col gap-2 text-label-large">
+            Scheme variant
+            <select
+              className="h-12 rounded-small border border-outline bg-surface px-3 text-body-large"
+              value={theme.variant}
+              onChange={(event) => theme.setVariant(event.target.value as SchemeVariant)}
+            >
+              {VARIANTS.map((variant) => (
+                <option key={variant}>{variant}</option>
+              ))}
+            </select>
+          </label>
+          <label className="flex flex-col gap-2 text-label-large">
+            Colour mode
+            <select
+              className="h-12 rounded-small border border-outline bg-surface px-3 text-body-large"
+              value={theme.themeMode}
+              onChange={(event) => theme.setThemeMode(event.target.value as ThemeMode)}
+            >
+              {(["light", "dark", "system"] as const).map((mode) => (
+                <option key={mode}>{mode}</option>
+              ))}
+            </select>
+          </label>
+          <label className="flex flex-col gap-2 text-label-large">
+            Contrast: {theme.contrastLevel}
+            <input
+              type="range"
+              min={-1}
+              max={1}
+              step={0.1}
+              value={theme.contrastLevel}
+              onChange={(event) => theme.setContrastLevel(Number(event.target.value))}
+            />
+            <span className="text-body-small text-on-surface-variant">
+              0 is standard; 1 requests maximum contrast.
+            </span>
+          </label>
+          <Button
+            variant="outlined"
+            onClick={() => {
+              theme.setSeedColor("#6750a4");
+              theme.setVariant("tonalSpot");
+              theme.setThemeMode("system");
+              theme.setContrastLevel(0);
+            }}
+          >
+            Reset theme
+          </Button>
+        </Card>
+      </Section>
+      <Section
+        title="Roles and their text colours"
+        description={`${Object.keys(roles).length} roles generated for ${theme.resolvedTheme} mode.`}
+      >
+        <div className="grid grid-cols-2 gap-3 expanded:grid-cols-4">
+          {PAIRS.map(([role, on]) => (
+            <Swatch
+              key={role}
+              name={role}
+              value={roles[`--md-sys-color-${role}`]!}
+              on={roles[`--md-sys-color-${on}`]!}
+            />
+          ))}
+        </div>
+      </Section>
+      <Section title="Live scheme output">
+        <Code>
+          {Object.entries(roles)
+            .map(([name, value]) => `${name}: ${value};`)
+            .join("\n")}
+        </Code>
+      </Section>
+    </Page>
+  );
+}

package/src/pages/index.ts

@@ -0,0 +1,25 @@
+// SPDX-License-Identifier: Apache-2.0
+import { lazy, type ComponentType, type LazyExoticComponent } from "react";
+import type { AdaptiveState } from "../adaptive/window.ts";
+export interface PageProps {
+  adaptive: AdaptiveState;
+}
+type PageComponent = LazyExoticComponent<ComponentType<PageProps>>;
+export const PAGES = {
+  overview: lazy(() => import("./Overview.tsx")),
+  theme: lazy(() => import("./Theme.tsx")),
+  components: lazy(() => import("./Components.tsx")),
+  primitives: lazy(() => import("./Primitives.tsx")),
+  forms: lazy(() => import("./Forms.tsx")),
+  explorer: lazy(() => import("./Explorer.tsx")),
+  motion: lazy(() => import("./Motion.tsx")),
+  icons: lazy(() => import("./Icons.tsx")),
+  ai: lazy(() => import("./Ai.tsx")),
+  reader: lazy(() => import("./Reader.tsx")),
+  design: lazy(() => import("./Design.tsx")),
+  next: lazy(() => import("./Next.tsx")),
+  system: lazy(() => import("./System.tsx")),
+  brands: lazy(() => import("./Brands.tsx")),
+  adaptive: lazy(() => import("./Adaptive.tsx")),
+} satisfies Record<string, PageComponent>;
+export type PageId = keyof typeof PAGES;

package/src/router.ts

@@ -0,0 +1,22 @@
+// A hash router: `#/theme` selects a page. Hash routes work from file://, inside Tauri and behind any static host,
+// and the D-pad Back key maps to `history.back()`.
+import { useCallback, useSyncExternalStore } from "react";
+
+export function parseRoute(hash: string): string {
+  const path = hash.replace(/^#\/?/, "").split("?")[0] ?? "";
+  return path === "" ? "overview" : path.replace(/\/+$/, "");
+}
+
+function subscribe(listener: () => void): () => void {
+  window.addEventListener("hashchange", listener);
+  return () => window.removeEventListener("hashchange", listener);
+}
+
+/** The current route id and a navigate function. */
+export function useRoute(): { route: string; navigate: (route: string) => void } {
+  const route = useSyncExternalStore(subscribe, () => parseRoute(location.hash), () => "overview");
+  const navigate = useCallback((next: string) => {
+    location.hash = `#/${next}`;
+  }, []);
+  return { route, navigate };
+}