feat(design): glass surfaces by role, the static Badge, LinkButton, user pickers on the Combobox (E28 S3d1)

frontend/src/components/ui/surfaces.ts

@@ -0,0 +1,30 @@
+// B5 (docs/DESIGN.md): one glass class and one radius per surface ROLE, so corners nest and no site
+// drifts its own alpha. A call site names the role and adds only its layout (padding, width, flex);
+// the radius comes from here, never beside it (no tailwind-merge: two `rounded-*` is a coin flip). A
+// raw `glass` / `glass-card` / `glass-menu` class anywhere else is a lint error (`local/surface-role`).
+//
+// What floats over undimmed content (a menu, a popover, a tooltip, a toast) is `.glass-menu`, the
+// near-opaque tier, so it stays readable over any thumbnail; what sits in the page is `.glass-card`;
+// a dialog, a drawer, a docked or side panel and a page section is `.glass`.
+export const SURFACE = {
+  /** A dialog, a side panel, a dock, a page section: r16. */
+  panel: "glass rounded-2xl",
+  /** A dialog that slides in from the edge: square on a phone, r16 on its open side. */
+  drawer: "glass rounded-none sm:rounded-l-2xl",
+  /** A card or a row card in the page (a video, a user, a download): r12. */
+  card: "glass-card rounded-xl",
+  /** A menu or a listbox: r12, 4px padding, so its r8 rows nest (12 − 4). */
+  menu: "glass-menu rounded-xl p-1",
+  /** Floating content that is not a list of choices (a hover card, a status popover, a toast): r12. */
+  popover: "glass-menu rounded-xl",
+  /** A tooltip: r8. */
+  tooltip: "glass-menu rounded-lg",
+  /** A control bar floating over the page (the debug recorder's bar): a pill (A2: round floats). */
+  floating: "glass-menu rounded-full",
+  /** The pull tab on a side panel's edge: square on the wall side, r12 on the open side. */
+  edgeTab: "glass rounded-r-xl",
+  /** A full-width sticky band (the design lab's header): square. */
+  band: "glass",
+} as const;
+
+export type SurfaceRole = keyof typeof SURFACE;