@aphrody/m3-showcase 3.3.4

package/src/components/ui.tsx

@@ -0,0 +1,89 @@
+// Small building blocks shared by the pages. Plain elements styled with the M3 preset utilities.
+import type { CSSProperties, ReactNode } from "react";
+import { PACKAGES } from "../inventory.ts";
+
+/** Inline SVG markup from `m3:icons/*`. */
+export function Svg({ html, className = "", small = false, label }: { html: string; className?: string; small?: boolean; label?: string }) {
+  return <span className={`${small ? "m3-icon-sm" : "m3-icon"} inline-flex shrink-0 ${className}`} role={label ? "img" : undefined} aria-label={label} aria-hidden={label ? undefined : true} dangerouslySetInnerHTML={{ __html: html }} />;
+}
+
+/** A package chip: name and version from the inventory. */
+export function PackageChip({ name }: { name: string }) {
+  const info = PACKAGES.find((p) => p.name === name);
+  return (
+    <span className="inline-flex items-center gap-1 rounded-small border border-outline-variant px-2 py-0.5 text-label-small text-on-surface-variant" title={info?.description ?? name}>
+      <span className="font-medium text-on-surface">{name}</span>
+      {info ? <span>{info.version}</span> : null}
+    </span>
+  );
+}
+
+export function Chips({ names }: { names: readonly string[] }) {
+  return (
+    <div className="flex flex-wrap gap-1.5">
+      {names.map((name) => (
+        <PackageChip key={name} name={name} />
+      ))}
+    </div>
+  );
+}
+
+/** A titled block of a page. */
+export function Section({ title, description, children, aside }: { title: string; description?: string; children: ReactNode; aside?: ReactNode }) {
+  return (
+    <section className="flex flex-col gap-3" aria-label={title}>
+      <header className="flex items-end justify-between gap-4">
+        <div className="flex flex-col gap-0.5">
+          <h2 className="text-title-large text-on-surface">{title}</h2>
+          {description ? <p className="text-body-medium text-on-surface-variant">{description}</p> : null}
+        </div>
+        {aside}
+      </header>
+      {children}
+    </section>
+  );
+}
+
+export function Card({ children, className = "", style }: { children: ReactNode; className?: string; style?: CSSProperties }) {
+  return (
+    <div className={`rounded-large bg-surface-container p-4 ${className}`} style={style}>
+      {children}
+    </div>
+  );
+}
+
+export function Code({ children }: { children: ReactNode }) {
+  return <pre className="m3-code m3-scroll max-h-72">{children}</pre>;
+}
+
+export function Swatch({ name, value, on }: { name: string; value: string; on?: string }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <div className="flex h-16 items-end rounded-medium border border-outline-variant p-2 text-label-small" style={{ background: value, color: on }} title={`${name} ${value}`}>
+        {value}
+      </div>
+      <span className="truncate text-label-small text-on-surface-variant">{name}</span>
+    </div>
+  );
+}
+
+/** A page: title, the packages it exercises, content and an optional supporting pane (wide windows). */
+export function Page({ title, summary, packages, children, aside, panes }: { title: string; summary: string; packages: readonly string[]; children: ReactNode; aside?: ReactNode; panes: 1 | 2 | 3 }) {
+  const showAside = aside && panes >= 2;
+  return (
+    <div className="mx-auto flex w-full max-w-[1800px] gap-6 p-(--m3-gutter)">
+      <article className="flex min-w-0 flex-1 flex-col gap-6" aria-labelledby="page-title">
+        <header className="flex flex-col gap-2">
+          <h1 id="page-title" className="text-headline-large text-on-surface">
+            {title}
+          </h1>
+          <p className="max-w-3xl text-body-large text-on-surface-variant">{summary}</p>
+          <Chips names={packages} />
+        </header>
+        {children}
+        {aside && !showAside ? <div className="flex flex-col gap-4">{aside}</div> : null}
+      </article>
+      {showAside ? <aside className="m3-scroll sticky top-0 hidden max-h-[calc(100vh-6rem)] w-[22rem] shrink-0 flex-col gap-4 self-start overflow-y-auto medium:flex" aria-label="Supporting pane">{aside}</aside> : null}
+    </div>
+  );
+}

package/src/env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="@aphrody/m3-bun/client" />
+/// <reference types="@aphrody/m3/client" />
+/// <reference types="@aphrody/assets/types" />
+
+declare module "*.css";

package/src/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="16" fill="#6750a4"/><path d="M14 46V20h6l12 16 12-16h6v26h-6V30L32 44 20 30v16z" fill="#eaddff"/></svg>

package/src/generated/inventory.json

@@ -0,0 +1,426 @@
+[
+  {
+    "name": "@aphrody/ag-ui",
+    "version": "1.0.1",
+    "description": "Aphrody AG-UI Protocol — Pure Bun & TypeScript 7 suite connecting Agentic UI events, streaming lifecycle, Protobuf codec, A2UI surfaces, and Agent-to-User bridges.",
+    "dir": "packages/ag-ui",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 2,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/app-ui",
+    "version": "0.1.0",
+    "description": "",
+    "dir": "packages/app-ui",
+    "kind": "package",
+    "workspace": false,
+    "private": true,
+    "exports": 2,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/assets",
+    "version": "0.1.0",
+    "description": "File-kind icons, extension badges, brand logos, images, sounds, videos and lottie animations, with icon resolution (getIcon, getLayeredIcon, getBeardedIcon, getIcon20): the Spacedrive @sd/assets set, merged with SpaceUI'",
+    "dir": "packages/assets",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 13,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/canvas",
+    "version": "1.0.9-aphrody.2",
+    "description": "Aphrody native Skia canvas facade over the pinned upstream @napi-rs/canvas runtime",
+    "dir": "packages/canvas",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 4,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/eslint-plugin-m3",
+    "version": "3.3.3",
+    "description": "Lint rules for sites consuming material-web (@aphrody/m3-react + Material Symbols) — runs under oxlint (jsPlugins) and ESLint.",
+    "dir": "packages/eslint-plugin-m3",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 2,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/identity",
+    "version": "0.1.0",
+    "description": "Aphrody product identity for the M3 surfaces: brand emblem and icons, the Aphrody avatar, and the animated pet sprite (atlas, timed tracks, 16-way gaze) drawn from crates/ui/identity.",
+    "dir": "packages/identity",
+    "kind": "package",
+    "workspace": true,
+    "private": false,
+    "exports": 4,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3",
+    "version": "3.3.3",
+    "description": "The @aphrody Material Design 3 framework for Bun: one plugin (Tailwind v4, Sass through Rust, m3:* virtual theme/font modules, ?url imports), serveM3 (Bun.serve + HMR + proxy), buildM3 (Bun.build, Tauri webview layout), ",
+    "dir": "packages/m3",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 10,
+    "bin": [
+      "m3"
+    ]
+  },
+  {
+    "name": "@aphrody/m3-ai",
+    "version": "3.3.3",
+    "description": "Material Design 3 agent-interaction components (tool calls, markdown, chat composer, workers, tasks): the SpaceUI (@spacedrive/ai) set rebuilt on @aphrody/m3-primitives.",
+    "dir": "packages/m3-ai",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 1,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-baseui",
+    "version": "3.3.3",
+    "description": "Base UI (aphrody-labs fork, forks/base-ui) with Material 3 styling: every Base UI primitive wrapped with M3 token classes; static CSS, no CSS-in-JS runtime, per-component modules and sheets.",
+    "dir": "packages/m3-baseui",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 5,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-bun",
+    "version": "3.3.3",
+    "description": "The one Bun-native tool for M3 apps: a single Bun plugin and the m3-bun CLI that build, minify, serve (HMR), compile to one executable, package and generate deploy configs (Docker, systemd, nginx, Vercel, Fly.io, Cloudfl",
+    "dir": "packages/m3-bun",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 9,
+    "bin": [
+      "m3-bun"
+    ]
+  },
+  {
+    "name": "@aphrody/m3-codemods",
+    "version": "0.1.0",
+    "description": "Codemods MUI React -> @aphrody/m3-react (jscodeshift + ast-grep)",
+    "dir": "packages/m3-codemods",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 3,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-config",
+    "version": "3.3.3",
+    "description": "Shared build, typecheck and test presets for the @aphrody Material Design 3 packages: tsconfig, the Bun.build preset and the happy-dom test preload.",
+    "dir": "packages/m3-config",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 6,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-design",
+    "version": "3.3.3",
+    "description": "Automated design engine for Material Design 3 and Google Design",
+    "dir": "packages/m3-design",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 0,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-explorer",
+    "version": "3.3.3",
+    "description": "Material Design 3 file-management components (tag pill, inline rename, file thumb, grid item): the SpaceUI (@spacedrive/explorer) set rebuilt on @aphrody/m3-primitives.",
+    "dir": "packages/m3-explorer",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 1,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-fonts",
+    "version": "3.3.3",
+    "description": "Aphrody M3 typefaces: Google Sans Flex, Google Sans Code, Roboto Flex, Roboto Mono and Material Symbols with Japanese fallbacks (Noto Sans JP, M PLUS 1 Code) as @font-face CSS and a typed manifest.",
+    "dir": "packages/m3-fonts",
+    "kind": "package",
+    "workspace": true,
+    "private": false,
+    "exports": 5,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-forms",
+    "version": "3.3.3",
+    "description": "Material Design 3 form fields (react-hook-form) on @aphrody/m3-primitives: the SpaceUI (@spacedrive/forms) set, M3-styled.",
+    "dir": "packages/m3-forms",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 1,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-front",
+    "version": "3.3.3",
+    "description": "Framework-agnostic Material 3 front layer: <m3-theme> web component, lazy material-web registration and window-class observation on top of @aphrody/material-web and @aphrody/m3-tokens.",
+    "dir": "packages/m3-front",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 5,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-icons",
+    "version": "3.3.3",
+    "description": "Material Symbols icons for @aphrody/m3: pixel-perfect inline SVG rendered from the aphrody-bun icons module (variable fonts), no icon font shipped at runtime.",
+    "dir": "packages/m3-icons",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 6,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-mcp",
+    "version": "1.0.0",
+    "description": "Single design/UI MCP server of aphrody-m3: packages, M3 tokens (lookup, validate), docs search, research links, templates, Material Symbols SVG, SVG to Tauri icons.",
+    "dir": "packages/m3-mcp",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 1,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-motion",
+    "version": "3.3.3",
+    "description": "Material 3 animation plugin powered by Motion (formerly Framer Motion)",
+    "dir": "packages/m3-motion",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 1,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-next",
+    "version": "3.3.3",
+    "description": "Next.js 16 App Router integration for the @aphrody Material Design 3 layer: withM3 config (React Compiler, Cache Components, typed routes, Tauri static export), M3Html/M3Root server components, a light 'use client' theme",
+    "dir": "packages/m3-next",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 6,
+    "bin": [
+      "m3-next"
+    ]
+  },
+  {
+    "name": "@aphrody/m3-next-migrate",
+    "version": "3.3.3",
+    "description": "Migration analysis, codemods and runtime shims for Next.js 16 components and private-owner native Bun web apps; Tauri 3 source planning requires a registered native host adapter for activation",
+    "dir": "packages/m3-next-migrate",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 16,
+    "bin": [
+      "m3-next-migrate",
+      "next-migrate"
+    ]
+  },
+  {
+    "name": "@aphrody/m3-os-themes",
+    "version": "3.3.3",
+    "description": "Material 3 OS theme generators and installers (Windows 11, GNOME Shell, COSMIC, Chromium browsers) derived from @aphrody/m3-tokens dynamic colour roles.",
+    "dir": "packages/m3-os-themes",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 3,
+    "bin": [
+      "m3-os-themes"
+    ]
+  },
+  {
+    "name": "@aphrody/m3-primitives",
+    "version": "3.3.3",
+    "description": "Material Design 3 React primitives: the SpaceUI (@spacedrive/primitives) component set rebuilt on the M3 roles, shape, typescale, state layers and motion of the aphrody design system.",
+    "dir": "packages/m3-primitives",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 1,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-react",
+    "version": "3.3.3",
+    "description": "React wrappers (@lit/react createComponent) for every <md-*> element of the @aphrody/material-web fork.",
+    "dir": "packages/m3-react",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 7,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-reader",
+    "version": "3.3.3",
+    "description": "Material 3 manga and illustrated book readers for React",
+    "dir": "packages/m3-reader",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 4,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-showcase",
+    "version": "3.3.3",
+    "description": "The M3 showcase: every @aphrody/m3 package in one adaptive app (mobile, desktop and TV layouts, D-pad navigation), served with its API from one Bun process, compiled to one executable, wrapped by Tauri desktop and mobile",
+    "dir": "apps/showcase",
+    "kind": "app",
+    "workspace": true,
+    "private": true,
+    "exports": 0,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-tailwind",
+    "version": "3.3.3",
+    "description": "Tailwind v4 CSS-first preset for Material 3: generates @theme (colour roles, shape, typescale, elevation, easing) from @aphrody/m3-tokens.",
+    "dir": "packages/m3-tailwind",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 3,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-theme",
+    "version": "3.3.3",
+    "description": "Canonical Material 3 fusion sheets: tokens.css (M3 + shadcn/ui + Tailwind v4 aliases), tailwind.css (every M3 system token as a Tailwind v4 utility) and spaceui.css (the SpaceUI themes rebuilt as M3 dynamic schemes, with",
+    "dir": "packages/m3-theme",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 6,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-tokens",
+    "version": "3.3.3",
+    "description": "Material 3 design tokens (--md-sys-*) for the @aphrody/material-web fork: MUI-theme → M3 token CSS generation and runtime Material You dynamic colour via material-color-utilities.",
+    "dir": "packages/m3-tokens",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 9,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/m3-web",
+    "version": "3.3.3",
+    "description": "Showcase app of the M3 framework. Built, served and compiled through the yolo CLI (`yolo web build|dev`, `yolo tauri build`), which runs these scripts.",
+    "dir": "apps/web",
+    "kind": "app",
+    "workspace": true,
+    "private": true,
+    "exports": 0,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/material-design-icons",
+    "version": "1.0.0",
+    "description": "Material Symbols SVG catalogue (forks/material-design-icons) with SVG to ICO/ICNS sync for Tauri desktop icons.",
+    "dir": "packages/material-design-icons",
+    "kind": "package",
+    "workspace": true,
+    "private": true,
+    "exports": 1,
+    "bin": [
+      "m3-svg-to-ico"
+    ]
+  },
+  {
+    "name": "@aphrody/nie-ui",
+    "version": "0.1.0",
+    "description": "NIE UI and design, unified: emulator web UI (src), menu renderers, NIE web/site libraries and scripts, pixel-perfect tooling, skills, docs and the Rust crates (rust/).",
+    "dir": "packages/nie-ui",
+    "kind": "package",
+    "workspace": false,
+    "private": true,
+    "exports": 2,
+    "bin": []
+  },
+  {
+    "name": "@aphrody/scaffold",
+    "version": "1.0.0-canary",
+    "description": "The single project scaffolder of the UI stack: Tauri 3 shell (pins, config, capabilities, icon), M3 web and app templates, the canonical example and a writer that never overwrites. Used by m3 new, m3-next-migrate and web",
+    "dir": "packages/scaffold",
+    "kind": "package",
+    "workspace": true,
+    "private": false,
+    "exports": 7,
+    "bin": [
+      "aphrody-scaffold"
+    ]
+  },
+  {
+    "name": "@aphrody/web-to-tauri",
+    "version": "1.0.0-canary",
+    "description": "Converts a website, web app or built web bundle into a native Tauri 3 app: probes the target, plans a regression-free mode (remote, bundle, sidecar), generates the project and checks parity against the original.",
+    "dir": "packages/web-to-tauri",
+    "kind": "package",
+    "workspace": false,
+    "private": false,
+    "exports": 8,
+    "bin": [
+      "web-to-tauri"
+    ]
+  },
+  {
+    "name": "@rosegriffon/ui",
+    "version": "1.0.3",
+    "description": "Composants shadcn/ui partagés (new-york style, Tailwind v4)",
+    "dir": "packages/rg-ui",
+    "kind": "package",
+    "workspace": false,
+    "private": true,
+    "exports": 7,
+    "bin": []
+  },
+  {
+    "name": "@shenron/ui",
+    "version": "0.1.0",
+    "description": "",
+    "dir": "packages/shenron-ui",
+    "kind": "package",
+    "workspace": false,
+    "private": true,
+    "exports": 32,
+    "bin": []
+  }
+]

package/src/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <title>Aphrody M3 Showcase</title>
+    <meta name="description" content="Every @aphrody/m3 package in one adaptive app: mobile, desktop and TV layouts." />
+    <meta name="theme-color" content="#6750a4" />
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/inventory.ts

@@ -0,0 +1,19 @@
+// The monorepo inventory, generated by scripts/inventory.ts and served by /api/packages.
+import data from "./generated/inventory.json";
+
+export interface PackageInfo {
+  name: string;
+  version: string;
+  description: string;
+  dir: string;
+  kind: "package" | "app";
+  workspace: boolean;
+  private: boolean;
+  exports: number;
+  bin: string[];
+}
+
+export const PACKAGES: readonly PackageInfo[] = data as PackageInfo[];
+
+/** Packages by name. */
+export const byName = (name: string): PackageInfo | undefined => PACKAGES.find((p) => p.name === name);

package/src/main.tsx

@@ -0,0 +1,6 @@
+import { createRoot } from "react-dom/client";
+import { App } from "./App.tsx";
+
+const root = document.getElementById("root");
+if (!root) throw new Error("#root is missing from index.html");
+createRoot(root).render(<App />);