{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "features-2x2-spotlight", "title": "Features — 2×2 Spotlight", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/features-2x2-spotlight/features-2x2-spotlight.component.ts", "content": "// Four large feature panels in a two-by-two grid, each with a generous illustration\n// slot built from primitives, a headline, supporting copy, and a quiet inline link.\n// Port of the React block 1:1 — same four panels, same lineage/access/budget/release\n// illustration slots, same copy.\nimport { ChangeDetectionStrategy, Component, Input } from '@angular/core'\nimport { ArrowRight, LucideAngularModule } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface SpotlightPanel {\n eyebrow: string\n title: string\n body: string\n link: string\n kind: 'lineage' | 'access' | 'budget' | 'release'\n}\n\nconst defaultPanels: SpotlightPanel[] = [\n {\n eyebrow: 'Modelling',\n title: 'One definition, every surface',\n body: 'Dashboards, exports, and the API all resolve the same certified metric, so the number cannot disagree with itself.',\n link: 'See the metric layer',\n kind: 'lineage',\n },\n {\n eyebrow: 'Governance',\n title: 'Permissions you can prove',\n body: 'Scope resolves per query from your identity provider, and every evaluation lands in an exportable audit trail.',\n link: 'Read the access model',\n kind: 'access',\n },\n {\n eyebrow: 'Performance',\n title: 'Budgeted, not throttled',\n body: 'Each team gets a query budget enforced at run time, with materialised aggregates carrying the frequent load.',\n link: 'See the caching rules',\n kind: 'budget',\n },\n {\n eyebrow: 'Delivery',\n title: 'Ship without a redeploy',\n body: 'Publishing a definition change rolls out to every consumer immediately, and reverting is the same one click.',\n link: 'How releases work',\n kind: 'release',\n },\n]\n\nconst lineage = ['warehouse.orders', 'metrics.revenue_net', 'dashboard.exec_summary']\n\nconst access = [\n { label: 'EMEA analyst', value: 'Region-scoped' },\n { label: 'Finance lead', value: 'Full ledger' },\n { label: 'Contractor', value: 'No payroll' },\n]\n\nconst budgets = [\n { team: 'Finance', used: 62 },\n { team: 'RevOps', used: 38 },\n { team: 'Product', used: 81 },\n]\n\nconst releases = [\n { version: 'v128', note: 'revenue_net → trailing 28d' },\n { version: 'v127', note: 'added margin_by_channel' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-features-2x2-spotlight, [ui-features-2x2-spotlight]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n
\n Platform\n

Four things it does properly

\n

\n Each panel is a mechanism, not a promise — the illustration is the real shape of the feature.\n

\n
\n\n
\n @for (panel of panels; track panel.title) {\n
\n
\n \n
\n @if (panel.kind === 'lineage') {\n
\n @for (node of lineage; track node; let i = $index) {\n \n {{ node }}\n
\n }\n
\n } @else if (panel.kind === 'access') {\n
\n @for (row of access; track row.label) {\n
\n {{ row.label }}\n {{ row.value }}\n
\n }\n
\n } @else if (panel.kind === 'budget') {\n
\n @for (row of budgets; track row.team) {\n
\n
\n {{ row.team }}\n {{ row.used }}%\n
\n
\n
\n }\n
\n } @else {\n
\n @for (release of releases; track release.version) {\n
\n {{ release.version }}\n {{ release.note }}\n
\n }\n \n

Rolled out to 41 consumers, no redeploy.

\n
\n }\n
\n\n
\n

\n {{ panel.eyebrow }}\n

\n

{{ panel.title }}

\n

{{ panel.body }}

\n \n
\n
\n
\n }\n \n \n
\n `,\n})\nexport class UiFeatures2x2SpotlightComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly lineage = lineage\n protected readonly access = access\n protected readonly budgets = budgets\n protected readonly releases = releases\n\n @Input() panels: SpotlightPanel[] = defaultPanels.map((p) => ({ ...p }))\n @Input('class') className?: string\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/features-2x2-spotlight/features-2x2-spotlight.component.ts" }, { "path": "packages/registry-angular/blocks/features-2x2-spotlight/index.ts", "content": "export { UiFeatures2x2SpotlightComponent, type SpotlightPanel } from './features-2x2-spotlight.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/features-2x2-spotlight/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Four large feature panels in a two-by-two grid, each with a generous illustration slot built from primitives, a headline, supporting copy, and a quiet inline link.", "categories": [ "marketing" ] }