{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "feature-tabbed-deepdive", "title": "Features — Tabbed Deep-Dive", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/feature-tabbed-deepdive/feature-tabbed-deepdive.component.ts", "content": "// One feature examined from three angles behind tabs, each panel carrying its own\n// explanation, a constraint the reader should know, and a matching detail panel.\n// Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, signal } from '@angular/core'\nimport { LucideAngularModule, TriangleAlert } 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 { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport {\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\n\nexport interface DeepDiveAngle {\n id: string\n label: string\n headline: string\n body: string\n constraint: string\n rows: { name: string; detail: string }[]\n}\n\n// Each angle names its own constraint. A deep-dive that only lists strengths\n// reads as marketing; the constraint is what makes the rest credible.\nconst angles: DeepDiveAngle[] = [\n {\n id: 'authoring',\n label: 'Authoring',\n headline: 'A metric is a file, not a setting',\n body: 'Definitions are YAML in your repository. They are reviewed, branched, and reverted with the tools your team already runs, and the history is yours if you leave.',\n constraint: 'Requires someone comfortable opening a pull request. There is no drag-and-drop builder.',\n rows: [\n { name: 'metrics/revenue_net.yml', detail: 'v128' },\n { name: 'metrics/margin.yml', detail: 'v41' },\n { name: 'metrics/pipeline.yml', detail: 'v12' },\n ],\n },\n {\n id: 'execution',\n label: 'Execution',\n headline: 'The planner decides where a query runs',\n body: 'Hot aggregates resolve from materialised tables; everything else falls through to the warehouse. Each result carries the freshness it was served at.',\n constraint: 'Materialised paths are stale between runs by design, and the stamp says so rather than hiding it.',\n rows: [\n { name: 'revenue rollup', detail: 'materialised · 5 min' },\n { name: 'pipeline by stage', detail: 'materialised · 1 hr' },\n { name: 'raw event search', detail: 'live query' },\n ],\n },\n {\n id: 'governance',\n label: 'Governance',\n headline: 'Access is decided at query time',\n body: 'Scope resolves from your identity provider on every request, and each evaluation is written to an append-only log you can export.',\n constraint: 'Group changes propagate on your directory’s sync interval, not instantly.',\n rows: [\n { name: 'EMEA analyst', detail: 'region-scoped' },\n { name: 'Finance lead', detail: 'full ledger' },\n { name: 'Contractor', detail: 'no payroll' },\n ],\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-feature-tabbed-deepdive, [ui-feature-tabbed-deepdive]',\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 UiSeparatorComponent,\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n ],\n template: `\n
\n
\n
\n In depth\n

The metric layer, from three angles

\n
\n\n \n \n @for (angle of allAngles; track angle.id) {\n \n }\n \n\n @for (angle of allAngles; track angle.id) {\n \n
\n
\n

{{ angle.headline }}

\n

{{ angle.body }}

\n\n \n\n

\n \n {{ angle.constraint }}\n

\n
\n\n
\n
\n
\n {{ angle.label }}\n
\n
    \n @for (row of angle.rows; track row.name) {\n
  • \n {{ row.name }}\n {{ row.detail }}\n
    • \n }\n
\n
\n
\n
\n \n }\n \n\n \n
\n
\n `,\n})\nexport class UiFeatureTabbedDeepdiveComponent {\n protected readonly TriangleAlert = TriangleAlert\n protected readonly allAngles = angles\n\n @Input() set defaultTab(v: string) {\n if (angles.some((a) => a.id === v)) this.activeTab.set(v)\n }\n @Input('class') className?: string\n\n readonly activeTab = signal('authoring')\n\n get rootClass(): string {\n return cn('bg-background', this.className)\n }\n\n setActiveTab(value: string): void {\n if (angles.some((a) => a.id === value)) this.activeTab.set(value)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-tabbed-deepdive/feature-tabbed-deepdive.component.ts" }, { "path": "packages/registry-angular/blocks/feature-tabbed-deepdive/index.ts", "content": "export { UiFeatureTabbedDeepdiveComponent, type DeepDiveAngle } from './feature-tabbed-deepdive.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-tabbed-deepdive/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/separator.json", "https://uipkge.dev/r/angular/tabs.json" ], "description": "One feature examined from three angles behind tabs, each panel carrying its own explanation, a constraint the reader should know, and a matching detail panel.", "categories": [ "marketing" ] }