From e0500154b516ff1c84c2618a287bbe89a7c7ade2 Mon Sep 17 00:00:00 2001
From: Jack Zhuang <277994282+os-zhuang@users.noreply.github.com>
Date: Wed, 1 Jul 2026 00:05:04 +0800
Subject: [PATCH] =?UTF-8?q?fix(showcase):=20command-center=20html=20page?=
 =?UTF-8?q?=20off=20Tailwind=20=E2=80=94=20structured=20props=20+=20style?=
 =?UTF-8?q?=20objects=20(ADR-0065)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The last kind:'html' showcase page still used Tailwind className (48 of them),
which the new ADR-0065 guardrail flags: page source is runtime metadata the
build never scans, so the classes silently no-op (and the light-theme slate/indigo
palette was wrong for the dark console anyway).

Rewrite with the html tier's real primitives:
- layout via the components' own structured props (<flex direction gap>, <grid columns>);
- color/size via inline JSON `style` objects with hsl(var(--token)) theme colors;
- text via native <div style> (the <text> renderer only applies `style` when a
  className/designer-id is also present — a real html-tier limitation — so styled
  text uses native passthrough tags instead);
- the throughput bars via <grid columns={7}> (a nested <flex> bar with flex:1
  collapsed to width:0; a grid track gives each bar width).

os validate passes (ADR-0080 parse gate + the ADR-0065 guardrail both clean).
The <flex>/grid/card/color rendering was browser-verified in the html tier; the
native-div text + grid bars use the same confirmed style-passthrough path.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../src/pages/command-center-jsx.page.ts      | 111 +++++++++---------
 1 file changed, 55 insertions(+), 56 deletions(-)

diff --git a/examples/app-showcase/src/pages/command-center-jsx.page.ts b/examples/app-showcase/src/pages/command-center-jsx.page.ts
index a3278078d..cc7c327f7 100644
--- a/examples/app-showcase/src/pages/command-center-jsx.page.ts
+++ b/examples/app-showcase/src/pages/command-center-jsx.page.ts
@@ -3,15 +3,16 @@
 import { definePage } from '@objectstack/spec/ui';
 
 /**
- * Command Center — a `kind:'html'` page (ADR-0080; formerly `kind:'jsx'`).
- * The entire layout is authored as a constrained JSX/HTML + Tailwind *string*;
- * at save time
- * `@objectstack/sdui-parser` compiles it (parse, never execute) into the SDUI
- * tree, which the normal PageRenderer / SchemaRenderer renders. Every tag is a
- * real registered component — `flex`, `grid`, `card`, `text`, `badge`, `stack`.
+ * Command Center — a `kind:'html'` page (ADR-0080): constrained JSX compiled to
+ * the SDUI tree, parsed-never-executed. It composes registered components with
+ * structured layout — the html tier's actual purpose.
  *
- * Demonstrates what the fixed page schema cannot: Tailwind-freeform layout that
- * still composes the platform's real components. Browser-verified.
+ * Styling (ADR-0065): a page's source is runtime metadata the build's Tailwind
+ * never scans, so utility `className`s silently no-op. So this page uses NO
+ * Tailwind: layout is the components' own structured props (`<flex direction gap>`,
+ * `<grid columns>`), and any custom CSS is a JSON `style` object with
+ * `hsl(var(--token))` theme colors (quoted keys/values — a JS-style object is
+ * parsed as a deferred expression and won't apply).
  */
 export const CommandCenterJsxPage = definePage({
   name: 'showcase_command_center_jsx',
@@ -19,59 +20,57 @@ export const CommandCenterJsxPage = definePage({
   type: 'home',
   kind: 'html',
   source: `
-<flex direction="col" className="min-h-screen gap-10 bg-gradient-to-br from-slate-50 via-white to-indigo-50 p-10">
+<flex direction="col" gap={8} style={{"padding":"40px"}}>
 
-  <flex direction="col" className="gap-3">
-    <badge className="w-fit rounded-full bg-indigo-100 px-3 py-1 text-xs font-semibold uppercase tracking-widest text-indigo-700" label="Operations · JSX-source page" />
-    <text className="block text-5xl font-bold tracking-tight text-slate-900" content="Command Center" />
-    <text className="block max-w-2xl text-base leading-relaxed text-slate-500" content="This whole page is authored as constrained JSX + Tailwind and compiled to the SDUI tree — parsed, never executed. Every card is a real registered component." />
+  <flex direction="col" gap={2}>
+    <div style={{"fontSize":"12px","fontWeight":"600","letterSpacing":"0.12em","textTransform":"uppercase","color":"hsl(var(--primary))"}}>Operations · HTML-source page</div>
+    <div style={{"fontSize":"36px","fontWeight":"700","letterSpacing":"-0.02em","color":"hsl(var(--foreground))"}}>Command Center</div>
+    <div style={{"maxWidth":"640px","fontSize":"15px","lineHeight":"1.6","color":"hsl(var(--muted-foreground))"}}>Authored as constrained JSX and compiled to the SDUI tree — parsed, never executed. Layout is structured component props; color is an inline style object with theme tokens. No Tailwind.</div>
   </flex>
 
-  <grid columns={4} className="gap-5">
-    <card className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-      <text className="block text-sm font-medium text-slate-500" content="Open Tasks" />
-      <text className="mt-3 block text-4xl font-bold text-slate-900" content="128" />
-      <text className="mt-2 block text-xs font-semibold text-emerald-600" content="▲ 12% vs last week" />
-    </card>
-    <card className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-      <text className="block text-sm font-medium text-slate-500" content="In Progress" />
-      <text className="mt-3 block text-4xl font-bold text-slate-900" content="47" />
-      <text className="mt-2 block text-xs font-semibold text-amber-600" content="● 9 due today" />
-    </card>
-    <card className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-      <text className="block text-sm font-medium text-slate-500" content="Completed" />
-      <text className="mt-3 block text-4xl font-bold text-slate-900" content="1,902" />
-      <text className="mt-2 block text-xs font-semibold text-emerald-600" content="▲ 4% this month" />
-    </card>
-    <card className="rounded-2xl border border-indigo-300 bg-gradient-to-br from-indigo-500 to-violet-600 p-6 shadow-md">
-      <text className="block text-sm font-medium text-indigo-100" content="Cycle Time" />
-      <text className="mt-3 block text-4xl font-bold text-white" content="2.4d" />
-      <text className="mt-2 block text-xs font-semibold text-indigo-100" content="▼ 18% faster" />
-    </card>
+  <grid columns={4} gap={5}>
+    <flex direction="col" gap={2} style={{"background":"hsl(var(--card))","border":"1px solid hsl(var(--border))","borderRadius":"var(--radius)","padding":"24px"}}>
+      <div style={{"fontSize":"13px","fontWeight":"500","color":"hsl(var(--muted-foreground))"}}>Open Tasks</div>
+      <div style={{"fontSize":"34px","fontWeight":"700","color":"hsl(var(--foreground))"}}>128</div>
+      <div style={{"fontSize":"12px","fontWeight":"600","color":"hsl(142 70% 45%)"}}>▲ 12% vs last week</div>
+    </flex>
+    <flex direction="col" gap={2} style={{"background":"hsl(var(--card))","border":"1px solid hsl(var(--border))","borderRadius":"var(--radius)","padding":"24px"}}>
+      <div style={{"fontSize":"13px","fontWeight":"500","color":"hsl(var(--muted-foreground))"}}>In Progress</div>
+      <div style={{"fontSize":"34px","fontWeight":"700","color":"hsl(var(--foreground))"}}>47</div>
+      <div style={{"fontSize":"12px","fontWeight":"600","color":"hsl(38 92% 50%)"}}>● 9 due today</div>
+    </flex>
+    <flex direction="col" gap={2} style={{"background":"hsl(var(--card))","border":"1px solid hsl(var(--border))","borderRadius":"var(--radius)","padding":"24px"}}>
+      <div style={{"fontSize":"13px","fontWeight":"500","color":"hsl(var(--muted-foreground))"}}>Completed</div>
+      <div style={{"fontSize":"34px","fontWeight":"700","color":"hsl(var(--foreground))"}}>1,902</div>
+      <div style={{"fontSize":"12px","fontWeight":"600","color":"hsl(142 70% 45%)"}}>▲ 4% this month</div>
+    </flex>
+    <flex direction="col" gap={2} style={{"background":"hsl(var(--primary))","border":"1px solid hsl(var(--primary))","borderRadius":"var(--radius)","padding":"24px"}}>
+      <div style={{"fontSize":"13px","fontWeight":"500","color":"hsl(var(--primary-foreground))"}}>Cycle Time</div>
+      <div style={{"fontSize":"34px","fontWeight":"700","color":"hsl(var(--primary-foreground))"}}>2.4d</div>
+      <div style={{"fontSize":"12px","fontWeight":"600","color":"hsl(var(--primary-foreground))"}}>▼ 18% faster</div>
+    </flex>
   </grid>
 
-  <grid columns={3} className="gap-5">
-    <card className="col-span-2 rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-      <text className="block text-lg font-semibold text-slate-900" content="Weekly Throughput" />
-      <flex direction="row" className="mt-8 items-end gap-4">
-        <flex className="h-12 w-full rounded-lg bg-indigo-400" />
-        <flex className="h-20 w-full rounded-lg bg-indigo-500" />
-        <flex className="h-16 w-full rounded-lg bg-indigo-400" />
-        <flex className="h-28 w-full rounded-lg bg-violet-500" />
-        <flex className="h-14 w-full rounded-lg bg-indigo-400" />
-        <flex className="h-24 w-full rounded-lg bg-indigo-500" />
-        <flex className="h-10 w-full rounded-lg bg-indigo-300" />
-      </flex>
-    </card>
-    <card className="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
-      <text className="block text-lg font-semibold text-slate-900" content="Recent Activity" />
-      <stack className="mt-4 gap-3">
-        <flex direction="row" className="items-center gap-3"><flex className="h-2 w-2 rounded-full bg-emerald-500" /><text className="text-sm text-slate-600" content="Onboarding flow shipped" /></flex>
-        <flex direction="row" className="items-center gap-3"><flex className="h-2 w-2 rounded-full bg-indigo-500" /><text className="text-sm text-slate-600" content="12 tasks moved to Review" /></flex>
-        <flex direction="row" className="items-center gap-3"><flex className="h-2 w-2 rounded-full bg-amber-500" /><text className="text-sm text-slate-600" content="SLA breach on #4821" /></flex>
-        <flex direction="row" className="items-center gap-3"><flex className="h-2 w-2 rounded-full bg-slate-300" /><text className="text-sm text-slate-600" content="Sprint 42 planning" /></flex>
-      </stack>
-    </card>
+  <grid columns={3} gap={5}>
+    <flex direction="col" gap={6} style={{"gridColumn":"span 2","background":"hsl(var(--card))","border":"1px solid hsl(var(--border))","borderRadius":"var(--radius)","padding":"24px"}}>
+      <div style={{"fontSize":"16px","fontWeight":"600","color":"hsl(var(--foreground))"}}>Weekly Throughput</div>
+      <grid columns={7} gap={4} style={{"height":"140px","alignItems":"end"}}>
+        <flex style={{"height":"48px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
+        <flex style={{"height":"86px","borderRadius":"8px","background":"hsl(var(--primary) / 0.7)"}} />
+        <flex style={{"height":"64px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
+        <flex style={{"height":"120px","borderRadius":"8px","background":"hsl(var(--primary))"}} />
+        <flex style={{"height":"58px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
+        <flex style={{"height":"100px","borderRadius":"8px","background":"hsl(var(--primary) / 0.7)"}} />
+        <flex style={{"height":"40px","borderRadius":"8px","background":"hsl(var(--primary) / 0.4)"}} />
+      </grid>
+    </flex>
+    <flex direction="col" gap={4} style={{"background":"hsl(var(--card))","border":"1px solid hsl(var(--border))","borderRadius":"var(--radius)","padding":"24px"}}>
+      <div style={{"fontSize":"16px","fontWeight":"600","color":"hsl(var(--foreground))"}}>Recent Activity</div>
+      <flex direction="row" gap={3} align="center"><flex style={{"width":"8px","height":"8px","borderRadius":"9999px","background":"hsl(142 70% 45%)"}} /><div style={{"fontSize":"14px","color":"hsl(var(--muted-foreground))"}}>Onboarding flow shipped</div></flex>
+      <flex direction="row" gap={3} align="center"><flex style={{"width":"8px","height":"8px","borderRadius":"9999px","background":"hsl(var(--primary))"}} /><div style={{"fontSize":"14px","color":"hsl(var(--muted-foreground))"}}>12 tasks moved to Review</div></flex>
+      <flex direction="row" gap={3} align="center"><flex style={{"width":"8px","height":"8px","borderRadius":"9999px","background":"hsl(38 92% 50%)"}} /><div style={{"fontSize":"14px","color":"hsl(var(--muted-foreground))"}}>SLA breach on #4821</div></flex>
+      <flex direction="row" gap={3} align="center"><flex style={{"width":"8px","height":"8px","borderRadius":"9999px","background":"hsl(var(--muted-foreground))"}} /><div style={{"fontSize":"14px","color":"hsl(var(--muted-foreground))"}}>Sprint 42 planning</div></flex>
+    </flex>
   </grid>
 </flex>`,
 });