@aphrody/m3-showcase 3.3.4

package/src/pages/Design.tsx

@@ -0,0 +1,163 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef, useState } from "react";
+import { useM3Theme } from "@aphrody/m3-theme/react";
+import type { GenerationResult } from "@aphrody/m3-design";
+import { Button } from "@aphrody/m3-primitives";
+import { Card, Code, Page, Section, Swatch } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+export default function Design({ adaptive }: PageProps) {
+  const theme = useM3Theme();
+  const [brief, setBrief] = useState(
+    "A minimal dashboard for developers, with a list-detail layout and supporting information.",
+  );
+  const [result, setResult] = useState<GenerationResult | null>(null);
+  const [file, setFile] = useState("src/theme.css");
+  const [notice, setNotice] = useState("");
+  const [busy, setBusy] = useState(false);
+  const active = useRef<AbortController | null>(null);
+  useEffect(() => () => active.current?.abort(), []);
+  async function compile() {
+    active.current?.abort();
+    const controller = new AbortController();
+    active.current = controller;
+    setBusy(true);
+    setNotice("");
+    try {
+      const response = await fetch("/api/design", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ brief, seed: theme.seedColor }),
+        signal: controller.signal,
+      });
+      const payload = await response.json();
+      if (!response.ok) throw new Error(payload.error ?? "The brief could not be compiled.");
+      if (!controller.signal.aborted) {
+        setResult(payload as GenerationResult);
+        setFile("src/theme.css");
+        setNotice("Design generated locally.");
+      }
+    } catch (error) {
+      if (!controller.signal.aborted)
+        setNotice(error instanceof Error ? error.message : "Generation failed.");
+    } finally {
+      if (active.current === controller) {
+        active.current = null;
+        setBusy(false);
+      }
+    }
+  }
+  return (
+    <Page
+      title="Design"
+      summary="Compile a design brief into a typed layout, canonical HCT palette, CSS roles, W3C tokens and React source."
+      packages={["@aphrody/m3-design", "@aphrody/m3-tokens"]}
+      panes={adaptive.panes}
+      aside={
+        result ? (
+          <Card>
+            <h3 className="text-title-medium">Parsed brief</h3>
+            <Code>{JSON.stringify(result.brief, null, 2)}</Code>
+          </Card>
+        ) : undefined
+      }
+    >
+      <Section
+        title="Design brief"
+        description={"The current theme seed is " + theme.seedColor + "."}
+      >
+        <Card className="flex flex-col gap-3">
+          <label className="text-label-large" htmlFor="design-brief">
+            Describe the interface
+          </label>
+          <textarea
+            id="design-brief"
+            maxLength={2000}
+            className="min-h-32 rounded-medium border border-outline bg-surface p-3 text-body-large"
+            value={brief}
+            onChange={(event) => setBrief(event.target.value)}
+          />
+          <Button
+            onClick={() => {
+              void compile();
+            }}
+            disabled={busy || !brief.trim()}
+          >
+            {busy ? "Generating…" : "Generate design"}
+          </Button>
+          <p role="status" className="text-body-medium text-on-surface-variant">
+            {notice}
+          </p>
+        </Card>
+      </Section>
+      {result ? (
+        <>
+          <Section title="Primary tonal palette">
+            <div className="grid grid-cols-3 gap-3 expanded:grid-cols-6">
+              {Object.entries(result.theme.palettes.primary.tones).map(([tone, value]) => (
+                <Swatch
+                  key={tone}
+                  name={"Tone " + tone}
+                  value={value}
+                  on={
+                    Number(tone) > 50
+                      ? result.theme.palettes.neutral.tones[10]
+                      : result.theme.palettes.neutral.tones[99]
+                  }
+                />
+              ))}
+            </div>
+          </Section>
+          <Section
+            title="Generated files"
+            description="Source files are computed in memory and can be copied into a consumer project."
+          >
+            <Card>
+              <label className="flex flex-col gap-2 text-label-large">
+                File
+                <select
+                  className="h-12 rounded-small border border-outline bg-surface px-3"
+                  value={file}
+                  onChange={(event) => setFile(event.target.value)}
+                >
+                  {result.files.map((item) => (
+                    <option key={item.path}>{item.path}</option>
+                  ))}
+                </select>
+              </label>
+              <Code>{result.files.find((item) => item.path === file)?.content}</Code>
+              <Button
+                variant="outlined"
+                onClick={() => {
+                  const content = result.files.find((item) => item.path === file)?.content ?? "";
+                  if (!navigator.clipboard) {
+                    setNotice("Clipboard access is unavailable.");
+                    return;
+                  }
+                  void navigator.clipboard.writeText(content).then(
+                    () => setNotice("Generated source copied."),
+                    () => setNotice("Clipboard access is unavailable."),
+                  );
+                }}
+              >
+                Copy source
+              </Button>
+            </Card>
+          </Section>
+          <Section title="Compiler critique">
+            <Card>
+              <p className="text-body-large">{result.critique.rationale}</p>
+              <Code>{JSON.stringify(result.critique.scores, null, 2)}</Code>
+            </Card>
+          </Section>
+        </>
+      ) : (
+        <Card>
+          <p className="text-body-large text-on-surface-variant">
+            Generate the brief to inspect its palette and source files.
+          </p>
+        </Card>
+      )}
+    </Page>
+  );
+}

package/src/pages/Explorer.tsx

@@ -0,0 +1,125 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useMemo, useState } from "react";
+import { GoogleDriveListView, TagPill, type DriveItem } from "@aphrody/m3-explorer";
+import { Card, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+const SAMPLE_FILES: DriveItem[] = [
+  {
+    id: "folder",
+    name: "Design studies",
+    type: "folder",
+    owner: "me",
+    lastModified: "Today",
+    shared: true,
+  },
+  {
+    id: "notes",
+    name: "Material notes.md",
+    type: "document",
+    owner: "me",
+    lastModified: "Today",
+    size: "4 KB",
+    starred: true,
+  },
+  {
+    id: "palette",
+    name: "Colour palette.json",
+    type: "code",
+    owner: "Team",
+    lastModified: "Yesterday",
+    size: "2 KB",
+    shared: true,
+  },
+  {
+    id: "cover",
+    name: "Reader cover.svg",
+    type: "image",
+    owner: "me",
+    lastModified: "Yesterday",
+    size: "12 KB",
+  },
+];
+
+export default function Explorer({ adaptive }: PageProps) {
+  const [files, setFiles] = useState(SAMPLE_FILES);
+  const [view, setView] = useState<"list" | "grid">("list");
+  const [selected, setSelected] = useState<string>();
+  const [filter, setFilter] = useState("all");
+  const [notice, setNotice] = useState("Local sample files; no remote Drive connection.");
+  const visible = useMemo(
+    () =>
+      files.filter((item) =>
+        filter === "people"
+          ? item.shared
+          : filter === "modified"
+            ? item.lastModified === "Today"
+            : filter === "location"
+              ? item.type === "folder"
+              : true,
+      ),
+    [files, filter],
+  );
+  return (
+    <Page
+      title="Explorer"
+      summary="File rows, selection, stars and a responsive grid from m3-explorer. The explicitly local sample inventory exercises callbacks without accessing your files."
+      packages={["@aphrody/m3-explorer"]}
+      panes={adaptive.panes}
+    >
+      <Section
+        title="Local sample inventory"
+        description="Enter opens a row or tile; Space selects it. The filter chips select all files, shared files, today's files or folders."
+      >
+        <Card>
+          <GoogleDriveListView
+            title="Sample files"
+            items={visible}
+            selectedId={selected}
+            onSelect={(item) => {
+              setSelected(item.id);
+              setNotice(`Selected ${item.name}`);
+            }}
+            onOpen={(item) => {
+              setSelected(item.id);
+              setNotice(`Opened local preview: ${item.name}`);
+            }}
+            viewMode={view}
+            onViewModeChange={setView}
+            activeFilter={filter}
+            onFilterChange={setFilter}
+            onToggleStar={(item) =>
+              setFiles((current) =>
+                current.map((entry) =>
+                  entry.id === item.id ? { ...entry, starred: !entry.starred } : entry,
+                ),
+              )
+            }
+            onRowAction={(item) => {
+              const blob = new Blob([`Local demonstration file: ${item.name}\n`], {
+                type: "text/plain",
+              });
+              const url = URL.createObjectURL(blob);
+              const link = document.createElement("a");
+              link.href = url;
+              link.download = `${item.name}.sample.txt`;
+              link.click();
+              setTimeout(() => URL.revokeObjectURL(url), 1000);
+              setNotice(`Downloaded local sample for ${item.name}`);
+            }}
+          />
+        </Card>
+        <p role="status" className="text-body-medium">
+          {notice}
+        </p>
+      </Section>
+      <Section title="Tags">
+        <div className="flex flex-wrap gap-3">
+          <TagPill color="#6750a4">Local sample</TagPill>
+          <TagPill color="#00658f">{visible.length} files</TagPill>
+          <TagPill color="#3a6a1e">{view === "grid" ? "Grid view" : "List view"}</TagPill>
+        </div>
+      </Section>
+    </Page>
+  );
+}

package/src/pages/Forms.tsx

@@ -0,0 +1,128 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useState } from "react";
+import { useForm, type FieldErrors, type Resolver } from "react-hook-form";
+import {
+  Form,
+  InputField,
+  TextAreaField,
+  SelectField,
+  CheckboxField,
+  SwitchField,
+} from "@aphrody/m3-forms";
+import { Button } from "@aphrody/m3-primitives";
+import { Card, Code, Page, Section } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+interface Profile {
+  name: string;
+  email: string;
+  role: string;
+  biography: string;
+  consent: boolean;
+  notifications: boolean;
+}
+const DEFAULTS: Profile = {
+  name: "",
+  email: "",
+  role: "reader",
+  biography: "",
+  consent: false,
+  notifications: true,
+};
+const validate: Resolver<Profile> = (values) => {
+  const errors: FieldErrors<Profile> = {};
+  if (values.name.trim().length < 2)
+    errors.name = { type: "minLength", message: "Enter a name with at least two characters." };
+  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email))
+    errors.email = { type: "pattern", message: "Enter a valid email address." };
+  if (!values.consent)
+    errors.consent = { type: "required", message: "Confirm this is local demonstration data." };
+  return Object.keys(errors).length ? { values: {}, errors } : { values, errors: {} };
+};
+
+export default function Forms({ adaptive }: PageProps) {
+  const form = useForm<Profile>({ defaultValues: DEFAULTS, resolver: validate, mode: "onBlur" });
+  const [saved, setSaved] = useState<Profile | null>(null);
+  return (
+    <Page
+      title="Forms"
+      summary="Labelled Material 3 fields, supporting text and accessible validation built on react-hook-form. This form stores a preview in memory only."
+      packages={["@aphrody/m3-forms", "@aphrody/m3-primitives"]}
+      panes={adaptive.panes}
+      aside={
+        <Card>
+          <h3 className="text-title-medium">Last valid preview</h3>
+          {saved ? (
+            <Code>{JSON.stringify(saved, null, 2)}</Code>
+          ) : (
+            <p className="mt-2 text-body-small text-on-surface-variant">
+              Submit valid local sample values to preview them here.
+            </p>
+          )}
+        </Card>
+      }
+    >
+      <Section
+        title="Local profile preview"
+        description="Try submitting empty fields to see supporting error messages. Reset clears both values and errors."
+      >
+        <Card>
+          <Form {...form}>
+            <form
+              noValidate
+              onSubmit={form.handleSubmit((values) => setSaved(values))}
+              className="flex flex-col gap-4"
+            >
+              <InputField
+                name="name"
+                label="Display name"
+                placeholder="Ada"
+                description="At least two characters."
+                required
+              />
+              <InputField
+                name="email"
+                label="Email address"
+                type="email"
+                placeholder="ada@example.invalid"
+                required
+              />
+              <SelectField
+                name="role"
+                label="Role"
+                options={[
+                  { value: "reader", label: "Reader" },
+                  { value: "editor", label: "Editor" },
+                  { value: "designer", label: "Designer" },
+                ]}
+              />
+              <TextAreaField
+                name="biography"
+                label="About you"
+                description="Optional local sample text."
+              />
+              <SwitchField name="notifications" label="Notifications" />
+              <CheckboxField name="consent" label="These are local sample values" required />
+              <div className="flex flex-wrap gap-3">
+                <Button type="submit">Preview profile</Button>
+                <Button
+                  type="button"
+                  variant="outlined"
+                  onClick={() => {
+                    form.reset(DEFAULTS);
+                    setSaved(null);
+                  }}
+                >
+                  Reset form
+                </Button>
+              </div>
+              <p role="status" className="text-body-medium text-on-surface-variant">
+                {saved ? "Valid preview ready. No data was sent." : "No profile has been saved."}
+              </p>
+            </form>
+          </Form>
+        </Card>
+      </Section>
+    </Page>
+  );
+}

package/src/pages/Icons.tsx

@@ -0,0 +1,138 @@
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useState } from "react";
+import { Input } from "@aphrody/m3-primitives";
+import home from "m3:icons/home";
+import search from "m3:icons/search";
+import favorite from "m3:icons/favorite";
+import settings from "m3:icons/settings";
+import download from "m3:icons/download";
+import palette from "m3:icons/palette";
+import dark from "m3:icons/dark_mode";
+import light from "m3:icons/light_mode";
+import close from "m3:icons/close";
+import check from "m3:icons/check";
+import menu from "m3:icons/menu";
+import folder from "m3:icons/folder";
+import { Card, Page, Section, Svg } from "../components/ui.tsx";
+import type { PageProps } from "./index.ts";
+
+const ICONS = [
+  ["home", home],
+  ["search", search],
+  ["favorite", favorite],
+  ["settings", settings],
+  ["download", download],
+  ["palette", palette],
+  ["dark_mode", dark],
+  ["light_mode", light],
+  ["close", close],
+  ["check", check],
+  ["menu", menu],
+  ["folder", folder],
+] as const;
+const TYPEFACES = ["Google Sans Flex", "Google Sans Code", "Roboto Mono"] as const;
+const FONT_FILES = [
+  { family: "Google Sans Code", file: "GoogleSansCode-latin.woff2" },
+  { family: "Roboto Mono", file: "RobotoMono-latin.woff2" },
+];
+
+export default function Icons({ adaptive }: PageProps) {
+  const [searchTerm, setSearch] = useState("");
+  const [selected, setSelected] = useState("home");
+  const [sample, setSample] = useState("Aphrody · Material 3 · 0123456789");
+  const [font, setFont] = useState<string>("Google Sans Flex");
+  const [fontState, setFontState] = useState("Loading optional fonts…");
+  useEffect(() => {
+    let active = true;
+    const added: FontFace[] = [];
+    Promise.all(
+      FONT_FILES.map(async ({ family, file }) => {
+        const face = new FontFace(family, `url("/api/m3/fonts/${file}")`, { weight: "100 900" });
+        await face.load();
+        if (active) {
+          document.fonts.add(face);
+          added.push(face);
+        }
+      }),
+    )
+      .then(() => {
+        if (active) setFontState("Optional fonts loaded from this process.");
+        return undefined;
+      })
+      .catch(() => {
+        if (active)
+          setFontState("Optional font assets unavailable; system fallback remains usable.");
+      });
+    return () => {
+      active = false;
+      for (const face of added) document.fonts.delete(face);
+    };
+  }, []);
+  const matches = ICONS.filter(([name]) => name.includes(searchTerm.trim().toLowerCase()));
+  return (
+    <Page
+      title="Icons and fonts"
+      summary="Per-icon Material Symbols SVG modules generated by the native build owner. Font assets load from this process on demand; no external font service is used."
+      packages={["@aphrody/m3-icons", "@aphrody/m3-fonts", "@aphrody/material-design-icons"]}
+      panes={adaptive.panes}
+    >
+      <Section
+        title="Material Symbols"
+        description="Choose a named SVG icon. The icon graphics are decorative inside labelled buttons."
+      >
+        <Input
+          aria-label="Filter icons"
+          placeholder="Filter icon names…"
+          value={searchTerm}
+          onChange={(event) => setSearch(event.target.value)}
+        />
+        <div className="grid grid-cols-2 gap-3 medium:grid-cols-4 expanded:grid-cols-6">
+          {matches.map(([name, icon]) => (
+            <button
+              key={name}
+              type="button"
+              aria-pressed={name === selected}
+              onClick={() => setSelected(name)}
+              className={`state-layer flex min-h-28 flex-col items-center justify-center gap-3 rounded-medium p-3 ${name === selected ? "bg-secondary-container text-on-secondary-container" : "bg-surface-container text-on-surface"}`}
+            >
+              <Svg html={icon} />
+              <span className="text-label-large">{name}</span>
+            </button>
+          ))}
+        </div>
+        <p role="status" className="text-body-medium">
+          {matches.length ? `Selected icon: ${selected}` : "No icons match this filter."}
+        </p>
+      </Section>
+      <Section title="Typeface preview" description={fontState}>
+        <Card className="flex flex-col gap-4">
+          <label className="flex flex-col gap-2 text-label-large">
+            Typeface
+            <select
+              value={font}
+              onChange={(event) => setFont(event.target.value)}
+              className="rounded-small border border-outline bg-surface p-3"
+            >
+              {TYPEFACES.map((family) => (
+                <option key={family}>{family}</option>
+              ))}
+            </select>
+          </label>
+          <Input
+            aria-label="Sample text"
+            value={sample}
+            onChange={(event) => setSample(event.target.value)}
+          />
+          <p
+            className="break-words text-headline-medium"
+            style={{
+              fontFamily: `"${font}", ${font === "Google Sans Flex" ? "sans-serif" : "monospace"}`,
+            }}
+          >
+            {sample}
+          </p>
+        </Card>
+      </Section>
+    </Page>
+  );
+}