@mohou/app-view 1.0.20

package/README.md

@@ -0,0 +1,8 @@
+---
+status: locked
+updated: 2026-10-01
+---
+
+Role: `definition`.
+
+Shared views of an app. The panel and `@mohou/ui` both import them. Product behavior: [features.md](../../../docs/product/features.md).

package/lib/types/app-card-css.d.ts

@@ -0,0 +1,3 @@
+/** Card rules for the panel sheet and every app sheet. Not scoped to the panel host. */
+export declare const appCardCss: string;
+//# sourceMappingURL=app-card-css.d.ts.map

package/lib/types/app-card-css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-card-css.d.ts","sourceRoot":"","sources":["../../src/app-card-css.ts"],"names":[],"mappings":"AAGA,wFAAwF;AACxF,eAAO,MAAM,UAAU,QA8EX,CAAA"}

package/lib/types/app-card.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+import type { AppListItem } from '@mohou/contract';
+/** Card styles. The same six the panel library offers. */
+export declare const appCardStyles: readonly ["glass", "stamp", "etch", "hero", "pulse", "list"];
+export type AppCardStyle = (typeof appCardStyles)[number];
+/** Fields only some styles read. Glass uses `featured` to span two columns. */
+export interface AppCardExtra {
+    readonly featured?: boolean;
+}
+/**
+ * One app card. `onOpen` is the click. The card does not open the app itself.
+ * @param props - style, the list item, and the open mark
+ */
+export declare function AppCard(props: {
+    readonly type: AppCardStyle;
+    readonly app: AppListItem;
+    readonly open?: boolean;
+    readonly openLabel?: string;
+    readonly extra?: AppCardExtra;
+    readonly onOpen: () => void;
+}): ReactNode;
+//# sourceMappingURL=app-card.d.ts.map

package/lib/types/app-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-card.d.ts","sourceRoot":"","sources":["../../src/app-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,0DAA0D;AAC1D,eAAO,MAAM,aAAa,8DAA+D,CAAA;AAEzF,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAA;AAEzD,+EAA+E;AAC/E,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B;AAUD;;;GAGG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE;IAC7B,QAAQ,CAAC,IAAI,EAAE,YAAY,CAAA;IAC3B,QAAQ,CAAC,GAAG,EAAE,WAAW,CAAA;IACzB,QAAQ,CAAC,IAAI,CAAC,EAAE,OAAO,CAAA;IACvB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,YAAY,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,MAAM,IAAI,CAAA;CAC5B,GAAG,SAAS,CAqBZ"}

package/lib/types/index.d.ts

@@ -0,0 +1,5 @@
+export { workbenchEntries } from '@mohou/contract';
+export { appCardCss } from './app-card-css.ts';
+export { AppCard, appCardStyles, type AppCardExtra, type AppCardStyle } from './app-card.tsx';
+export { WorkbenchLibrary } from './library.tsx';
+//# sourceMappingURL=index.d.ts.map

package/lib/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAC9C,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAC7F,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA"}

package/lib/types/library.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+import type { AppListItem } from '@mohou/contract';
+import { type AppCardStyle } from './app-card.tsx';
+/**
+ * The builtin library body. A workbench app does not render this.
+ * `openApp` asks the panel to add a tab. The component does not write policy.
+ */
+export declare function WorkbenchLibrary(props: {
+    readonly apps: readonly AppListItem[];
+    readonly cardStyle: AppCardStyle;
+    readonly openLabel: string;
+    readonly openAppIds?: readonly string[];
+    openApp(appId: string, title?: string): void;
+}): ReactNode;
+//# sourceMappingURL=library.d.ts.map

package/lib/types/library.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"library.d.ts","sourceRoot":"","sources":["../../src/library.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE3D;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,QAAQ,CAAC,IAAI,EAAE,SAAS,WAAW,EAAE,CAAA;IACrC,QAAQ,CAAC,SAAS,EAAE,YAAY,CAAA;IAChC,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IACvC,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CAC7C,GAAG,SAAS,CAqBZ"}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@mohou/app-view",
+  "version": "1.0.20",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "lib/types",
+    "README.md",
+    "!**/*.tsbuildinfo"
+  ],
+  "main": "./src/index.ts",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./src/index.ts"
+    },
+    "./css": {
+      "types": "./src/app-card-css.ts",
+      "default": "./src/app-card-css.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "@mohou/contract": "^1.0.20",
+    "@mohou/values": "^1.0.20"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}

package/src/app-card-css.ts

@@ -0,0 +1,83 @@
+/** Mac Avenir Next + PingFang SC. Windows Bahnschrift + DengXian, then YaHei. */
+const glassSans = '"Avenir Next",Bahnschrift,"Segoe UI","PingFang SC",DengXian,"Microsoft YaHei UI",sans-serif'
+
+/** Card rules for the panel sheet and every app sheet. Not scoped to the panel host. */
+export const appCardCss = [
+  '.mma-slot{display:grid;min-width:0;}',
+  `.mma-glass{display:grid;width:100%;height:100%;min-height:100%;box-sizing:border-box;border-radius:24px;border:1px solid color-mix(in oklch,var(--foreground) 8%,transparent);background:color-mix(in oklch,var(--card) 62%,transparent);padding:18px;text-align:left;font-family:${glassSans};backdrop-filter:blur(16px);transition:transform .4s cubic-bezier(.23,1,.32,1),background-color .4s,box-shadow .4s;}`,
+  '.mma-glass-body{display:flex;width:100%;height:100%;min-height:100%;flex-direction:column;justify-content:flex-start;gap:12px;}',
+  '.mma-feature .mma-glass{padding:24px;}',
+  '.mma-feature .mma-glass-body{justify-content:space-between;gap:15px;}',
+  '.mma-glass-name{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.25;}',
+  '.mma-feature .mma-glass-name{font-size:24px;}',
+  '.mma-glass-copy{margin:6px 0 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;font-weight:400;line-height:1.45;color:var(--muted-foreground);}',
+  '.mma-feature .mma-glass-copy{margin-top:8px;font-size:14px;line-height:1.625;}',
+  'button[data-card="stamp"] .mma-copy,button[data-card="etch"] .mma-copy,button[data-card="pulse"] .mma-copy,button[data-card="hero"] .mma-copy{min-height:2.75em;}',
+  '.mma-glass:hover{transform:translateY(-4px);background:color-mix(in oklch,var(--card) 88%,transparent);box-shadow:0 20px 40px -16px color-mix(in oklch,var(--foreground) 16%,transparent);}',
+  '.mma-feature{grid-column:span 2;}',
+  '@container (max-width:680px){.mma-feature{grid-column:span 1;}}',
+  '.mma-mark{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1;background:linear-gradient(to bottom right,hsl(var(--h) 48% 46%),hsl(var(--h) 40% 38% / .35));-webkit-background-clip:text;background-clip:text;color:transparent;}',
+  '.mma-feature .mma-mark{font-size:48px;letter-spacing:-2px;}',
+  '.mma-tag{border-radius:6px;background:color-mix(in oklch,var(--foreground) 6%,transparent);padding:2px 8px;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted-foreground);}',
+  '[data-mode="dark"] .mma-glass{background:color-mix(in oklch,var(--foreground) 4%,transparent);border-color:color-mix(in oklch,var(--foreground) 12%,transparent);}',
+  '[data-mode="dark"] .mma-mark{background:linear-gradient(to bottom right,hsl(var(--h) 42% 74%),hsl(var(--h) 30% 52% / .28));-webkit-background-clip:text;background-clip:text;}',
+  `#mma-host[data-card="glass"] .mma-library{font-family:${glassSans};}`,
+  'button[data-app-id]{transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background-color .22s ease;}',
+  '@keyframes mma-hero-breath{0%,100%{transform:translate(-50%,-50%) scale(1);filter:blur(10px) brightness(1)}50%{transform:translate(-50%,-50%) scale(.86);filter:blur(12px) brightness(.75)}}',
+  'button[data-app-id][data-card="hero"] .hero-chip{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;min-width:2.15rem;height:1.45rem;padding:0 .42rem;border-radius:.35rem;background:hsl(var(--h) 62% 46%);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;line-height:1;}',
+  '[data-mode="dark"] button[data-app-id][data-card="hero"] .hero-chip{background:#fff;color:hsl(var(--h) 58% 36%);}',
+  'button[data-app-id][data-card="hero"] .hero-mist{position:absolute;border-radius:50%;pointer-events:none;opacity:0;filter:blur(10px);transform:translate(-50%,-50%) scale(.5);transition:opacity 1.2s ease,transform 1.2s ease;}',
+  'button[data-app-id][data-card="hero"] .hero-mist-a{left:74%;top:30%;width:84px;height:84px;background:radial-gradient(circle,hsl(var(--h) 72% 56% / .85),transparent 70%);}',
+  'button[data-app-id][data-card="hero"] .hero-mist-b{left:30%;top:74%;width:56px;height:56px;background:radial-gradient(circle,hsl(var(--h) 64% 54% / .7),transparent 70%);}',
+  'button[data-app-id][data-card="hero"] .hero-mist-c{left:26%;top:28%;width:48px;height:48px;background:radial-gradient(circle,hsl(var(--h) 56% 58% / .55),transparent 72%);}',
+  'button[data-app-id][data-card="hero"]:hover{background:var(--card);border-color:hsl(var(--h) 58% 46% / .72);box-shadow:0 0 8px 0 hsl(var(--h) 62% 48% / .55);transform:translateY(-1px);}',
+  'button[data-app-id][data-card="hero"]:hover .hero-mist{opacity:.7;transform:translate(-50%,-50%) scale(1);}',
+  '[data-mode="dark"] button[data-app-id][data-card="hero"] .hero-mist-a{background:radial-gradient(circle,hsl(var(--h) 58% 72% / .8),transparent 70%);}',
+  '[data-mode="dark"] button[data-app-id][data-card="hero"] .hero-mist-b{background:radial-gradient(circle,hsl(var(--h) 48% 70% / .65),transparent 70%);}',
+  '[data-mode="dark"] button[data-app-id][data-card="hero"] .hero-mist-c{background:radial-gradient(circle,hsl(var(--h) 42% 74% / .5),transparent 72%);}',
+  '[data-mode="dark"] button[data-app-id][data-card="hero"]:hover{border-color:hsl(var(--h) 40% 62% / .45);box-shadow:0 0 8px 0 hsl(var(--h) 50% 68% / .28);}',
+  '[data-mode="dark"] button[data-app-id][data-card="hero"]:hover .hero-mist{opacity:.62;}',
+  'button[data-app-id][data-card="hero"]:hover .hero-mist-a{animation:mma-hero-breath 4.2s ease-in-out 1.2s infinite;}',
+  'button[data-app-id][data-card="hero"]:hover .hero-mist-b{opacity:.55;animation:mma-hero-breath 5.4s ease-in-out 1.2s infinite;}',
+  'button[data-app-id][data-card="hero"]:hover .hero-mist-c{opacity:.45;animation:mma-hero-breath 6.6s ease-in-out 1.2s infinite;}',
+  'button[data-app-id][data-card="etch"]{border-width:2px;border-style:solid;border-top-color:var(--card);border-left-color:var(--card);border-right-color:hsl(var(--h) 65% 45%);border-bottom-color:hsl(var(--h) 65% 45%);transition:border-color .9s ease,box-shadow .9s ease,background-color .22s ease;}',
+  'button[data-app-id][data-card="etch"] .etch-line{transition:opacity .55s ease;}',
+  'button[data-app-id][data-card="etch"] .etch-fill{opacity:0;transition:opacity .55s ease;}',
+  'button[data-app-id][data-card="etch"]:hover .etch-line{opacity:0;}',
+  'button[data-app-id][data-card="etch"]:hover{border-color:hsl(var(--h) 65% 45%);background:var(--card);transform:none;box-shadow:hsl(var(--h) 70% 50% / .40) 5px 5px,hsl(var(--h) 70% 50% / .28) 10px 10px,hsl(var(--h) 70% 50% / .16) 15px 15px;}',
+  'button[data-app-id][data-card="etch"]:hover .etch-fill{opacity:1;}',
+  'button[data-app-id][data-card="stamp"]:hover{background:linear-gradient(hsl(var(--h) 30% 55% / .07),hsl(var(--h) 30% 55% / .07)),var(--card);border-color:var(--foreground);box-shadow:0 8px 22px var(--shadow);transform:translateY(-1px);}',
+  'button[data-app-id][data-card="stamp"]:hover [data-monogram="stamp"]{background:var(--foreground);color:var(--card);transform:scale(1.05);}',
+  '@keyframes mma-list-spin{to{transform:rotate(360deg)}}',
+  'button[data-app-id][data-card="list"] .list-backlight{position:absolute;top:0;right:0;z-index:0;width:46%;height:100%;background:linear-gradient(to left,hsl(var(--h) 58% 58% / .52),hsl(var(--h) 46% 56% / .2) 55%,transparent);opacity:0;pointer-events:none;transition:opacity .6s ease;}',
+  'button[data-app-id][data-card="list"] .list-wash{position:absolute;inset:4px;z-index:1;border-radius:12px 64px 22px 12px;background:hsl(var(--h) 16% 46% / .06);backdrop-filter:blur(10px);pointer-events:none;transition:background-color .28s ease;}',
+  'button[data-app-id][data-card="list"] .list-orb{position:absolute;top:50%;right:28px;width:76px;height:76px;margin-top:-38px;border-radius:50%;background:conic-gradient(from 90deg,transparent 0%,hsl(var(--h) 42% 58% / 0) 20%,hsl(var(--h) 48% 50% / .55) 50%,transparent 76%);filter:blur(8px);animation:mma-list-spin 16s linear infinite;pointer-events:none;}',
+  '@keyframes mma-list-nudge{0%{transform:translateX(0)}45%{transform:translateX(4px)}100%{transform:translateX(0)}}',
+  '@keyframes mma-list-mark{0%{letter-spacing:.04em;opacity:.8}40%{letter-spacing:.18em;opacity:1}100%{letter-spacing:.08em;opacity:1}}',
+  'button[data-app-id][data-card="list"] .list-mark{display:block;font-size:13px;font-weight:700;line-height:1;letter-spacing:.04em;white-space:nowrap;color:var(--foreground);opacity:.8;}',
+  'button[data-app-id][data-card="list"] .list-go svg{display:block;}',
+  'button[data-app-id][data-card="list"]::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;background:linear-gradient(155deg,hsl(var(--h) 58% 46% / .9),hsl(var(--h) 42% 52% / .5) 40%,transparent 72%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none;transition:opacity .28s ease;}',
+  'button[data-app-id][data-card="list"]:hover{border-color:transparent;background:var(--card);}',
+  'button[data-app-id][data-card="list"]:hover::after{opacity:1;}',
+  'button[data-app-id][data-card="list"]:hover .list-backlight{opacity:1;}',
+  'button[data-app-id][data-card="list"]:hover .list-wash{background:hsl(var(--h) 28% 48% / .12);}',
+  '[data-mode="dark"] button[data-app-id][data-card="list"] .list-backlight{background:linear-gradient(to left,hsl(var(--h) 28% 64% / .32),transparent 70%);}',
+  '[data-mode="dark"] button[data-app-id][data-card="list"] .list-orb{background:conic-gradient(from 90deg,transparent 0%,hsl(var(--h) 22% 62% / 0) 20%,hsl(var(--h) 18% 55% / .42) 50%,transparent 76%);}',
+  '[data-mode="dark"] button[data-app-id][data-card="list"]::after{background:linear-gradient(155deg,hsl(0 0% 100% / .9),hsl(var(--h) 35% 62% / .4) 36%,transparent 70%);}',
+  '[data-mode="dark"] button[data-app-id][data-card="list"]:hover .list-wash{background:hsl(var(--h) 16% 46% / .1);}',
+  'button[data-app-id][data-card="list"]:hover .list-mark{color:hsl(var(--h) 42% 36%);animation:mma-list-mark .55s ease forwards;}',
+  '[data-mode="dark"] button[data-app-id][data-card="list"]:hover .list-mark{color:hsl(var(--h) 48% 74%);}',
+  'button[data-app-id][data-card="list"]:hover .list-go{background:hsl(var(--h) 42% 48% / .2);}',
+  'button[data-app-id][data-card="list"]:hover .list-go svg{animation:mma-list-nudge .45s ease;}',
+  '@keyframes mma-pulse-dot{0%,100%{background:hsl(var(--h) 60% 52% / 0)}50%{background:hsl(var(--h) 75% 48%)}}',
+  '@keyframes mma-pulse-glow{0%,100%{opacity:0}50%{opacity:1}}',
+  'button[data-app-id][data-card="pulse"]{border:none;background:linear-gradient(hsl(0 0% 100% / .35),hsl(0 0% 0% / .03)),var(--card);box-shadow:1px 1px 2px -1px #fff inset,0 2px 1px #00000010,0 8px 8px #00000012;transition:transform .25s cubic-bezier(.25,1.5,.5,1),filter .3s ease;}',
+  'button[data-app-id][data-card="pulse"] .pulse-mark{color:hsl(var(--h) 48% 38%);}',
+  '[data-mode="dark"] button[data-app-id][data-card="pulse"]{background:linear-gradient(hsl(var(--h) 22% 58% / .1),transparent 42%),var(--card);box-shadow:inset 0 1px 0 hsl(0 0% 100% / .07),0 10px 18px hsl(0 0% 0% / .4);}',
+  '[data-mode="dark"] button[data-app-id][data-card="pulse"] .pulse-mark{color:hsl(var(--h) 40% 74%);}',
+  'button[data-app-id][data-card="pulse"] .pulse-dot{position:absolute;top:16px;right:14px;width:8px;height:8px;border-radius:50%;border:1px solid hsl(var(--h) 40% 55% / .55);animation:mma-pulse-dot 1.2s ease-in-out infinite;}',
+  'button[data-app-id][data-card="pulse"] .pulse-dot::after{content:"";position:absolute;inset:-7px;border-radius:inherit;box-shadow:0 0 10px 2px hsl(var(--h) 80% 55% / .35),0 0 18px 6px hsl(var(--h) 80% 60% / .2);animation:mma-pulse-glow 1.2s ease-in-out infinite;}',
+  'button[data-app-id][data-card="pulse"]:hover{transform:translateY(-2px);filter:drop-shadow(6px 0 6px hsl(var(--h) 70% 55% / .45));}',
+  'button[data-app-id][data-card="pulse"]:hover .pulse-dot{animation:none;background:hsl(var(--h) 75% 48%);}',
+  'button[data-app-id][data-card="pulse"]:hover .pulse-dot::after{animation:none;opacity:1;}',
+].join('\n')

package/src/app-card.tsx

@@ -0,0 +1,281 @@
+import type { CSSProperties, ReactNode } from 'react'
+import { assertNever } from '@mohou/values'
+import type { AppListItem } from '@mohou/contract'
+
+/** Card styles. The same six the panel library offers. */
+export const appCardStyles = ['glass', 'stamp', 'etch', 'hero', 'pulse', 'list'] as const
+
+export type AppCardStyle = (typeof appCardStyles)[number]
+
+/** Fields only some styles read. Glass uses `featured` to span two columns. */
+export interface AppCardExtra {
+  readonly featured?: boolean
+}
+
+interface DrawnCard {
+  readonly app: AppListItem
+  readonly hue: CSSProperties
+  readonly open: boolean
+  readonly openLabel?: string
+  readonly onOpen: () => void
+}
+
+/**
+ * One app card. `onOpen` is the click. The card does not open the app itself.
+ * @param props - style, the list item, and the open mark
+ */
+export function AppCard(props: {
+  readonly type: AppCardStyle
+  readonly app: AppListItem
+  readonly open?: boolean
+  readonly openLabel?: string
+  readonly extra?: AppCardExtra
+  readonly onOpen: () => void
+}): ReactNode {
+  const hue = { '--h': appCardHue(props.app.id) } as CSSProperties
+  const open = props.open === true
+  const label = props.openLabel === undefined ? {} : { openLabel: props.openLabel }
+  const drawn = { app: props.app, hue, open, ...label, onOpen: () => { props.onOpen() } }
+  switch (props.type) {
+    case 'pulse':
+      return <PulseCard app={props.app} hue={hue} onOpen={drawn.onOpen} />
+    case 'list':
+      return <ListCard {...drawn} />
+    case 'glass':
+      return <GlassCard {...drawn} featured={props.extra?.featured === true} />
+    case 'hero':
+      return <HeroCard {...drawn} />
+    case 'etch':
+      return <EtchCard {...drawn} />
+    case 'stamp':
+      return <StampCard {...drawn} />
+    default:
+      return assertNever(props.type, 'AppCard')
+  }
+}
+
+function appCardHue(id: string): number {
+  let hue = 0
+  for (let index = 0; index < id.length; index += 1) hue = (hue * 31 + id.charCodeAt(index)) % 360
+  return hue
+}
+
+function OpenMark(props: { readonly open: boolean; readonly openLabel: string | undefined }): ReactNode {
+  if (!props.open || props.openLabel === undefined) return null
+  return (
+    <span className="inline-flex items-center gap-1 text-[11px] font-semibold text-primary">
+      <i />
+      {props.openLabel}
+    </span>
+  )
+}
+
+function PulseCard(props: {
+  readonly app: AppListItem
+  readonly hue: CSSProperties
+  readonly onOpen: () => void
+}): ReactNode {
+  return (
+    <button
+      type="button"
+      className="relative flex w-full flex-col items-start rounded-[22px] px-[15px] pt-4 pb-[13px] pr-8 text-left"
+      data-app-id={props.app.id}
+      data-card="pulse"
+      style={props.hue}
+      onClick={props.onOpen}
+    >
+      <span className="pulse-dot" aria-hidden />
+      <span className="pulse-mark relative z-[1] mb-2 text-[28px] leading-none font-extrabold tracking-wide">
+        {props.app.acronym}
+      </span>
+      <h3 className="relative z-[1] m-0 text-sm font-semibold tracking-tight">{props.app.name}</h3>
+      <p className="mma-copy relative z-[1] m-0 mt-1 line-clamp-2 text-xs leading-snug text-muted-foreground">
+        {props.app.description}
+      </p>
+      <span className="relative z-[1] mt-2 text-[11px] text-muted-foreground">{props.app.version}</span>
+    </button>
+  )
+}
+
+function ListCard(props: DrawnCard): ReactNode {
+  return (
+    <button
+      type="button"
+      className="relative flex h-24 w-full items-stretch gap-2 overflow-hidden rounded-2xl border border-foreground/10 bg-card p-2 text-left"
+      data-app-id={props.app.id}
+      data-card="list"
+      style={props.hue}
+      onClick={props.onOpen}
+    >
+      <span aria-hidden className="list-backlight" />
+      <span aria-hidden className="list-wash" />
+      <span aria-hidden className="list-orb" />
+      <span className="relative z-[1] flex min-w-0 flex-1 flex-col justify-between rounded-xl bg-card/50 px-3 py-2 backdrop-blur-md">
+        <span className="truncate text-sm font-semibold">{props.app.name}</span>
+        <span className="truncate text-xs text-muted-foreground">{props.app.description}</span>
+        <span className="text-[11px] text-muted-foreground">
+          {props.open ? <OpenMark open={props.open} openLabel={props.openLabel} /> : props.app.version}
+        </span>
+      </span>
+      <span className="list-rail relative z-[2] flex w-11 shrink-0 flex-col items-end justify-between py-0.5">
+        <span data-monogram="list" className="list-mark">{props.app.acronym}</span>
+        <span className="list-go flex size-7 items-center justify-center overflow-hidden rounded-full bg-foreground/10 text-foreground/70 backdrop-blur-md">
+          <svg className="size-3.5" viewBox="0 0 12 12" aria-hidden>
+            <path d="M4.646 2.146a.5.5 0 0 0 0 .708L7.793 6 4.646 9.146a.5.5 0 1 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z" fill="currentColor" />
+          </svg>
+        </span>
+      </span>
+    </button>
+  )
+}
+
+function GlassCard(props: DrawnCard & { readonly featured: boolean }): ReactNode {
+  const slot = props.featured ? 'mma-slot mma-feature' : 'mma-slot'
+  const tag = props.open && props.openLabel !== undefined ? props.openLabel : props.app.version
+  return (
+    <div className={slot}>
+      <button
+        type="button"
+        className="mma-glass"
+        data-app-id={props.app.id}
+        data-card="glass"
+        style={props.hue}
+        onClick={props.onOpen}
+      >
+        <span className="mma-glass-body">
+          <span className="flex w-full items-start justify-between gap-3">
+            <span data-monogram="glass" className="mma-mark">{props.app.acronym}</span>
+            <span className="mma-tag">{tag}</span>
+          </span>
+          <span className="block">
+            <h3 className="mma-glass-name">{props.app.name}</h3>
+            <p className="mma-glass-copy">{props.app.description}</p>
+          </span>
+        </span>
+      </button>
+    </div>
+  )
+}
+
+function HeroCard(props: DrawnCard): ReactNode {
+  return (
+    <button
+      type="button"
+      className="relative z-0 flex w-full flex-col items-start overflow-hidden rounded-[13px] border bg-card px-5 pt-4 pb-5 text-left"
+      data-app-id={props.app.id}
+      data-card="hero"
+      style={props.hue}
+      onClick={props.onOpen}
+    >
+      <span aria-hidden className="hero-mist hero-mist-a" />
+      <span aria-hidden className="hero-mist hero-mist-b" />
+      <span aria-hidden className="hero-mist hero-mist-c" />
+      <span className="relative z-[1] flex w-full items-center justify-between gap-3">
+        <span data-monogram="hero" className="hero-chip">{props.app.acronym}</span>
+        <span className="flex shrink-0 items-center gap-2 text-[13px] text-muted-foreground">
+          <span>{props.app.version}</span>
+          <OpenMark open={props.open} openLabel={props.openLabel} />
+        </span>
+      </span>
+      <h3 className="relative z-[1] m-0 mt-4 text-lg leading-snug font-semibold tracking-tight">{props.app.name}</h3>
+      <p className="mma-copy relative z-[1] m-0 mt-2 line-clamp-2 text-sm leading-snug text-muted-foreground">
+        {props.app.description}
+      </p>
+    </button>
+  )
+}
+
+function EtchCard(props: DrawnCard): ReactNode {
+  return (
+    <button
+      type="button"
+      className="relative flex w-full flex-col items-start overflow-hidden rounded-[13px] border bg-card px-[15px] pt-4 pb-[13px] text-left"
+      data-app-id={props.app.id}
+      data-card="etch"
+      style={props.hue}
+      onClick={props.onOpen}
+    >
+      <EtchMark text={props.app.acronym} />
+      <h3 className="relative z-[1] m-0 text-sm font-semibold tracking-tight">{props.app.name}</h3>
+      <p className="mma-copy relative z-[1] m-0 mt-1 line-clamp-2 text-xs leading-snug text-muted-foreground">
+        {props.app.description}
+      </p>
+      <span className="relative z-[1] mt-2 flex items-center gap-2 text-[11px] text-muted-foreground">
+        <span>{props.app.version}</span>
+        <OpenMark open={props.open} openLabel={props.openLabel} />
+      </span>
+    </button>
+  )
+}
+
+function StampCard(props: DrawnCard): ReactNode {
+  return (
+    <button
+      type="button"
+      className="relative flex w-full flex-col items-start overflow-hidden rounded-[13px] border bg-card px-[15px] pt-4 pb-[13px] text-left transition duration-200 ease-out hover:-translate-y-px hover:shadow-[0_8px_22px_var(--shadow)]"
+      data-app-id={props.app.id}
+      data-card="stamp"
+      style={props.hue}
+      onClick={props.onOpen}
+    >
+      <span
+        data-monogram="stamp"
+        className="absolute top-[13px] right-[13px] z-[1] flex size-11 shrink-0 items-center justify-center rounded-[9px] border-2 border-foreground text-sm font-extrabold tracking-wide text-foreground"
+        style={props.hue}
+      >
+        {props.app.acronym}
+      </span>
+      <h3 className="relative z-[1] m-0 pr-14 text-sm font-semibold tracking-tight">{props.app.name}</h3>
+      <p className="mma-copy relative z-[1] m-0 mt-1 line-clamp-2 pr-14 text-xs leading-snug text-muted-foreground">
+        {props.app.description}
+      </p>
+      <span className="relative z-[1] mt-2 flex items-center gap-2 text-[11px] text-muted-foreground">
+        <span>{props.app.version}</span>
+        <OpenMark open={props.open} openLabel={props.openLabel} />
+      </span>
+    </button>
+  )
+}
+
+function EtchMark(props: { readonly text: string }): ReactNode {
+  const width = Math.max(88, props.text.length * 36)
+  return (
+    <svg
+      data-monogram="etch"
+      viewBox={`0 0 ${width} 64`}
+      className="relative z-[1] mb-2.5 block h-[52px] overflow-visible"
+      style={{ width }}
+      aria-hidden
+    >
+      <text
+        className="etch-line"
+        x="2"
+        y="52"
+        fill="var(--card)"
+        stroke="hsl(var(--h) 65% 42%)"
+        strokeWidth="4.5"
+        paintOrder="stroke fill"
+        strokeLinejoin="round"
+        fontSize="46"
+        fontWeight="800"
+        letterSpacing="2"
+        fontFamily="ui-sans-serif, system-ui, sans-serif"
+      >
+        {props.text}
+      </text>
+      <text
+        className="etch-fill"
+        x="2"
+        y="52"
+        fill="hsl(var(--h) 65% 42%)"
+        stroke="none"
+        fontSize="46"
+        fontWeight="800"
+        letterSpacing="2"
+        fontFamily="ui-sans-serif, system-ui, sans-serif"
+      >
+        {props.text}
+      </text>
+    </svg>
+  )
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { workbenchEntries } from '@mohou/contract'
+export { appCardCss } from './app-card-css.ts'
+export { AppCard, appCardStyles, type AppCardExtra, type AppCardStyle } from './app-card.tsx'
+export { WorkbenchLibrary } from './library.tsx'

package/src/library.tsx

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react'
+import type { AppListItem } from '@mohou/contract'
+
+import { AppCard, type AppCardStyle } from './app-card.tsx'
+
+/**
+ * The builtin library body. A workbench app does not render this.
+ * `openApp` asks the panel to add a tab. The component does not write policy.
+ */
+export function WorkbenchLibrary(props: {
+  readonly apps: readonly AppListItem[]
+  readonly cardStyle: AppCardStyle
+  readonly openLabel: string
+  readonly openAppIds?: readonly string[]
+  openApp(appId: string, title?: string): void
+}): ReactNode {
+  const grid = props.cardStyle === 'list' ? 'flex flex-col gap-3' : 'mma-grid'
+  return (
+    <div className={grid}>
+      {props.apps.map((app, index) => {
+        const featured = props.cardStyle === 'glass' && index === 0
+        return (
+          <div key={app.id} className={featured ? 'mma-feature min-w-0' : 'min-w-0'}>
+            <AppCard
+              type={props.cardStyle}
+              app={app}
+              open={props.openAppIds?.includes(app.id) === true}
+              openLabel={props.openLabel}
+              extra={featured ? { featured: true } : {}}
+              onOpen={() => { props.openApp(app.id, app.name) }}
+            />
+          </div>
+        )
+      })}
+    </div>
+  )
+}