polish(app-showcase): color + sublabels on home & My Work KPI tiles (#2072)

The landing KPIs all rendered with the neutral grey icon (object-metric's
default colorVariant) and an empty card bottom, which read flat. Opt them
into the metric palette and add a one-line sublabel so the tiles are colorful
and informative:
  • Home — Projects (blue), Tasks (purple), Accounts (teal), Open Tasks (amber)
  • My Work — Open Tasks (blue), In Review (amber), At-Risk (rose)
Each gains a description (active & planned / not done / awaiting review / …)
that fills the previously-empty space. Pairs with objectui #1817
(tabular-nums on the metric value).

Browser-verified on :5181.

Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

examples/app-showcase/src/pages/index.ts

@@ -63,10 +63,10 @@ export const ComponentGalleryPage: Page = {
             columns: 4,
             gap: 4,
             children: [
-              { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'Projects', icon: 'folder-kanban', aggregate: { field: 'id', function: 'count' } } },
-              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Tasks', icon: 'check-square', aggregate: { field: 'id', function: 'count' } } },
-              { type: 'object-metric', properties: { objectName: 'showcase_account', label: 'Accounts', icon: 'building', aggregate: { field: 'id', function: 'count' } } },
-              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'Projects', icon: 'folder-kanban', colorVariant: 'blue', description: 'active & planned', aggregate: { field: 'id', function: 'count' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Tasks', icon: 'check-square', colorVariant: 'purple', description: 'all states', aggregate: { field: 'id', function: 'count' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_account', label: 'Accounts', icon: 'building', colorVariant: 'teal', description: 'customers', aggregate: { field: 'id', function: 'count' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', colorVariant: 'warning', description: 'not done', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
             ],
           },
         },

examples/app-showcase/src/pages/my-work.page.ts

@@ -36,9 +36,9 @@ export const MyWorkPage: Page = {
             columns: 3,
             gap: 4,
             children: [
-              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
-              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'In Review', icon: 'eye', aggregate: { field: 'id', function: 'count' }, filter: { status: 'in_review' } } },
-              { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'At-Risk Projects', icon: 'alert-triangle', aggregate: { field: 'id', function: 'count' }, filter: { health: 'red' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'Open Tasks', icon: 'list-checks', colorVariant: 'blue', description: 'not done', aggregate: { field: 'id', function: 'count' }, filter: { status: { $ne: 'done' } } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_task', label: 'In Review', icon: 'eye', colorVariant: 'warning', description: 'awaiting review', aggregate: { field: 'id', function: 'count' }, filter: { status: 'in_review' } } },
+              { type: 'object-metric', properties: { objectName: 'showcase_project', label: 'At-Risk Projects', icon: 'alert-triangle', colorVariant: 'danger', description: 'health red', aggregate: { field: 'id', function: 'count' }, filter: { health: 'red' } } },
             ],
           },
         },