Skip to content

fix(showcase): command-center html page off Tailwind (ADR-0065) #2496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
os-zhuang merged 1 commit into from
Jun 30, 2026
Merged

fix(showcase): command-center html page off Tailwind (ADR-0065) #2496

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 55 additions & 56 deletions examples/app-showcase/src/pages/command-center-jsx.page.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,75 +3,74 @@
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',
label: 'Command Center (HTML)',
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>`,
});