feat(launcher): compact icon+name tiles in the 9-dots app menu

design-system/_ds_manifest.json

@@ -37,10 +37,30 @@
       "name": "DataTable",
       "sourcePath": "components/data/DataTable.jsx"
     },
+    {
+      "name": "StatGroup",
+      "sourcePath": "components/data/StatGroup.jsx"
+    },
+    {
+      "name": "Alert",
+      "sourcePath": "components/feedback/Alert.jsx"
+    },
+    {
+      "name": "EmptyState",
+      "sourcePath": "components/feedback/EmptyState.jsx"
+    },
+    {
+      "name": "Rating",
+      "sourcePath": "components/feedback/Rating.jsx"
+    },
     {
       "name": "Skeleton",
       "sourcePath": "components/feedback/Skeleton.jsx"
     },
+    {
+      "name": "Spinner",
+      "sourcePath": "components/feedback/Spinner.jsx"
+    },
     {
       "name": "StatusPill",
       "sourcePath": "components/feedback/StatusPill.jsx"
@@ -65,10 +85,18 @@
       "name": "Textarea",
       "sourcePath": "components/forms/Textarea.jsx"
     },
+    {
+      "name": "Toggle",
+      "sourcePath": "components/forms/Toggle.jsx"
+    },
     {
       "name": "AppCard",
       "sourcePath": "components/launcher/AppCard.jsx"
     },
+    {
+      "name": "AppTile",
+      "sourcePath": "components/launcher/AppTile.jsx"
+    },
     {
       "name": "HealthDot",
       "sourcePath": "components/launcher/HealthDot.jsx"
@@ -77,6 +105,22 @@
       "name": "IntegrationBadge",
       "sourcePath": "components/launcher/IntegrationBadge.jsx"
     },
+    {
+      "name": "CenteredCard",
+      "sourcePath": "components/layout/CenteredCard.jsx"
+    },
+    {
+      "name": "Eyebrow",
+      "sourcePath": "components/layout/Eyebrow.jsx"
+    },
+    {
+      "name": "InfoRow",
+      "sourcePath": "components/layout/InfoRow.jsx"
+    },
+    {
+      "name": "SectionHead",
+      "sourcePath": "components/layout/SectionHead.jsx"
+    },
     {
       "name": "BottomNav",
       "sourcePath": "components/mobile/BottomNav.jsx"
@@ -89,10 +133,18 @@
       "name": "Drawer",
       "sourcePath": "components/mobile/Drawer.jsx"
     },
+    {
+      "name": "Pagination",
+      "sourcePath": "components/navigation/Pagination.jsx"
+    },
     {
       "name": "Modal",
       "sourcePath": "components/overlay/Modal.jsx"
     },
+    {
+      "name": "AnnouncementBar",
+      "sourcePath": "components/shell/AnnouncementBar.jsx"
+    },
     {
       "name": "MenuItem",
       "sourcePath": "components/shell/MenuItem.jsx"
@@ -195,16 +247,16 @@
     {
       "path": "guidelines/mobile-layout.card.html",
       "group": "Mobile",
-      "viewport": "480x520",
-      "name": "Mobile Layout — BottomNav, Drawer, BottomSheet",
-      "subtitle": "xs/sm layout primitives: bottom nav, slide-in drawer, bottom sheet"
+      "viewport": "800x520",
+      "name": "Mobile layout",
+      "subtitle": "breakpoints, shell patterns, tokens"
     },
     {
       "path": "guidelines/motion.card.html",
       "group": "Motion",
-      "viewport": "720x300",
-      "name": "Motion — Easing & Duration",
-      "subtitle": "Standard, springy-seam, enter/exit timing"
+      "viewport": "800x480",
+      "name": "Motion",
+      "subtitle": "seam animations, easing, focus"
     },
     {
       "path": "guidelines/radii-shadows.card.html",
@@ -558,6 +610,12 @@
       "kind": "shadow",
       "definedIn": "tokens/colors.css"
     },
+    {
+      "name": "--scrim",
+      "value": "rgba(0, 0, 0, 0.55)",
+      "kind": "color",
+      "definedIn": "tokens/colors.css"
+    },
     {
       "name": "--seam",
       "value": "linear-gradient(90deg, var(--accent-color) 0%, var(--accent-2) 100%)",
@@ -972,6 +1030,12 @@
       "kind": "spacing",
       "definedIn": "tokens/spacing.css"
     },
+    {
+      "name": "--space-7",
+      "value": "1.75rem",
+      "kind": "spacing",
+      "definedIn": "tokens/spacing.css"
+    },
     {
       "name": "--space-8",
       "value": "2rem",
@@ -1074,6 +1138,60 @@
       "kind": "shadow",
       "definedIn": "tokens/spacing.css"
     },
+    {
+      "name": "--shadow-pop",
+      "value": "0 12px 32px -12px var(--shadow), 0 2px 8px -4px var(--shadow)",
+      "kind": "shadow",
+      "definedIn": "tokens/spacing.css"
+    },
+    {
+      "name": "--z-base",
+      "value": "0",
+      "kind": "other",
+      "definedIn": "tokens/spacing.css"
+    },
+    {
+      "name": "--z-raised",
+      "value": "10",
+      "kind": "other",
+      "definedIn": "tokens/spacing.css"
+    },
+    {
+      "name": "--z-sticky",
+      "value": "100",
+      "kind": "other",
+      "definedIn": "tokens/spacing.css"
+    },
+    {
+      "name": "--z-dropdown",
+      "value": "1000",
+      "kind": "other",
+      "definedIn": "tokens/spacing.css"
+    },
+    {
+      "name": "--z-overlay",
+      "value": "1100",
+      "kind": "other",
+      "definedIn": "tokens/spacing.css"
+    },
+    {
+      "name": "--z-modal",
+      "value": "1200",
+      "kind": "other",
+      "definedIn": "tokens/spacing.css"
+    },
+    {
+      "name": "--z-toast",
+      "value": "1300",
+      "kind": "other",
+      "definedIn": "tokens/spacing.css"
+    },
+    {
+      "name": "--z-tooltip",
+      "value": "1400",
+      "kind": "other",
+      "definedIn": "tokens/spacing.css"
+    },
     {
       "name": "--top-bar-height",
       "value": "60px",
@@ -1105,99 +1223,111 @@
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--ease-standard",
-      "value": "cubic-bezier(0.4, 0, 0.2, 1)",
-      "kind": "other",
+      "name": "--top-bar-height-mobile",
+      "value": "52px",
+      "kind": "spacing",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--ease-out",
-      "value": "cubic-bezier(0.16, 1, 0.3, 1)",
+      "name": "--bottom-nav-height",
+      "value": "56px",
+      "kind": "spacing",
+      "definedIn": "tokens/spacing.css"
+    },
+    {
+      "name": "--drawer-width",
+      "value": "280px",
+      "kind": "spacing",
+      "definedIn": "tokens/spacing.css"
+    },
+    {
+      "name": "--sheet-max-h",
+      "value": "80dvh",
       "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--duration-fast",
-      "value": "120ms",
+      "name": "--touch-target",
+      "value": "44px",
       "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--duration-base",
-      "value": "200ms",
+      "name": "--safe-area-top",
+      "value": "env(safe-area-inset-top,    0px)",
       "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--duration-slow",
-      "value": "320ms",
+      "name": "--safe-area-bottom",
+      "value": "env(safe-area-inset-bottom, 0px)",
       "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--duration-enter",
-      "value": "260ms",
+      "name": "--safe-area-left",
+      "value": "env(safe-area-inset-left,   0px)",
       "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--duration-exit",
-      "value": "180ms",
+      "name": "--safe-area-right",
+      "value": "env(safe-area-inset-right,  0px)",
       "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--duration-seam",
-      "value": "400ms",
+      "name": "--ease-standard",
+      "value": "cubic-bezier(0.4, 0, 0.2, 1)",
       "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--ease-seam",
+      "name": "--ease-out",
       "value": "cubic-bezier(0.16, 1, 0.3, 1)",
       "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--space-7",
-      "value": "1.75rem",
-      "kind": "spacing",
+      "name": "--ease-seam",
+      "value": "cubic-bezier(0.16, 1, 0.3, 1)",
+      "kind": "color",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--top-bar-height-mobile",
-      "value": "52px",
-      "kind": "spacing",
+      "name": "--duration-fast",
+      "value": "120ms",
+      "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--bottom-nav-height",
-      "value": "56px",
-      "kind": "spacing",
+      "name": "--duration-base",
+      "value": "200ms",
+      "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--drawer-width",
-      "value": "280px",
-      "kind": "spacing",
+      "name": "--duration-slow",
+      "value": "320ms",
+      "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--sheet-max-h",
-      "value": "80dvh",
-      "kind": "spacing",
+      "name": "--duration-enter",
+      "value": "260ms",
+      "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--touch-target",
-      "value": "44px",
-      "kind": "spacing",
+      "name": "--duration-exit",
+      "value": "180ms",
+      "kind": "other",
       "definedIn": "tokens/spacing.css"
     },
     {
-      "name": "--shadow-pop",
-      "value": "0 12px 32px -12px var(--shadow), 0 2px 8px -4px var(--shadow)",
-      "kind": "shadow",
+      "name": "--duration-seam",
+      "value": "400ms",
+      "kind": "color",
       "definedIn": "tokens/spacing.css"
     }
   ],

design-system/components/launcher/AppTile.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+/**
+ * The launcher app tile — a compact icon + name cell for the 9-dots app grid,
+ * modeled on the Google app launcher. No description, no integration badge;
+ * offline apps render grayscaled, dimmed and non-interactive. Use `AppCard`
+ * for the full-detail dashboard / management surfaces.
+ */
+export interface AppTileProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
+  /** The app's display name (menu label), rendered beneath the icon. */
+  name: string;
+  /** Runtime integration strategy — drives the icon fallback hue/emoji. */
+  integrationType?: "module-federation" | "iframe" | "web-component" | string;
+  /** App icon image URL; falls back to a per-type emoji glyph on error or when absent. */
+  iconUrl?: string;
+  /** Emoji glyph (e.g. from a manifest `Icon.kind = "emoji"`); overrides the per-type fallback emoji when no `iconUrl`. */
+  iconGlyph?: string;
+  /** When false, the tile is grayscaled, dimmed and inert. */
+  isHealthy?: boolean;
+  /** Fired on click / Enter / Space — only when the app is healthy. */
+  onClick?: (event: React.SyntheticEvent) => void;
+}
+
+export function AppTile(props: AppTileProps): JSX.Element;