{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "feature-segmented-compare",
  "title": "Features — Segmented Compare",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-angular/blocks/feature-segmented-compare/feature-segmented-compare.component.ts",
      "content": "// Segmented execution-mode comparison: one toggle switches the whole section between\n// two operating modes, swapping the summary, capability list, constraints, and the\n// recommendation line. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport { Check, 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 { UiToggleGroupComponent, UiToggleGroupItemComponent } from '@/ui/toggle-group/toggle-group.component'\n\nexport interface ExecutionMode {\n  id: string\n  label: string\n  summary: string\n  capabilities: string[]\n  constraints: string[]\n  recommendation: string\n}\n\n// Each mode states its constraints as plainly as its capabilities. A comparison\n// that only lists upsides makes the reader do the work of distrusting it.\nconst modes: ExecutionMode[] = [\n  {\n    id: 'live',\n    label: 'Live query',\n    summary: 'Every read hits the warehouse at request time.',\n    capabilities: [\n      'Always current, to the second',\n      'No storage footprint on our side',\n      'Row-level scope applied per query',\n    ],\n    constraints: ['Latency follows your warehouse', 'Each read is billable compute'],\n    recommendation: 'Use for exploratory analysis and anything finance signs off on.',\n  },\n  {\n    id: 'materialised',\n    label: 'Materialised',\n    summary: 'Aggregates are computed on a schedule you set.',\n    capabilities: [\n      'Sub-100ms reads at any concurrency',\n      'Warehouse cost bounded by the schedule',\n      'Freshness stamp shown with every figure',\n    ],\n    constraints: ['Stale between runs, by design', 'Backfills reprocess the window'],\n    recommendation: 'Use for dashboards opened dozens of times an hour.',\n  },\n]\n\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-feature-segmented-compare, [ui-feature-segmented-compare]',\n  standalone: true,\n  // React renders the root <section> 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    UiToggleGroupComponent,\n    UiToggleGroupItemComponent,\n  ],\n  template: `\n    <section data-slot=\"feature-segmented-compare\" [class]=\"rootClass\">\n      <div class=\"mx-auto max-w-4xl px-6 py-20 lg:py-28\">\n        <div class=\"flex flex-wrap items-end justify-between gap-6\">\n          <div class=\"max-w-xl\">\n            <span ui-badge variant=\"secondary\">Execution modes</span>\n            <h2 class=\"mt-4 text-3xl font-semibold tracking-tight sm:text-4xl\">Pick per metric, not per platform</h2>\n          </div>\n\n          <div\n            ui-toggle-group\n            type=\"single\"\n            variant=\"outline\"\n            size=\"sm\"\n            aria-label=\"Choose an execution mode\"\n            [value]=\"active()\"\n            (valueChange)=\"onChange($event)\"\n          >\n            @for (mode of allModes; track mode.id) {\n              <button ui-toggle-group-item [value]=\"mode.id\">{{ mode.label }}</button>\n            }\n          </div>\n        </div>\n\n        <!-- min-h keeps the card from resizing between modes with different list\n             lengths, which would otherwise shift the page on every toggle. -->\n        <div ui-card class=\"mt-8\">\n          <div ui-card-content class=\"min-h-[22rem] p-6\">\n            <p class=\"text-lg leading-snug font-medium text-balance\">{{ current().summary }}</p>\n\n            <ui-separator class=\"my-6\" />\n\n            <div class=\"grid gap-8 sm:grid-cols-2\">\n              <div>\n                <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">What you get</p>\n                <ul class=\"mt-3 space-y-2.5\">\n                  @for (capability of current().capabilities; track capability) {\n                    <li class=\"flex items-start gap-2.5 text-sm\">\n                      <lucide-icon [img]=\"Check\" class=\"text-success mt-0.5 size-4 shrink-0\" aria-hidden=\"true\" />\n                      <span>{{ capability }}</span>\n                    </li>\n                  }\n                </ul>\n              </div>\n\n              <div>\n                <p class=\"text-muted-foreground font-mono text-xs tracking-[0.14em] uppercase\">What it costs you</p>\n                <ul class=\"mt-3 space-y-2.5\">\n                  @for (constraint of current().constraints; track constraint) {\n                    <li class=\"flex items-start gap-2.5 text-sm\">\n                      <lucide-icon\n                        [img]=\"TriangleAlert\"\n                        class=\"text-muted-foreground mt-0.5 size-4 shrink-0\"\n                        aria-hidden=\"true\"\n                      />\n                      <span class=\"text-muted-foreground\">{{ constraint }}</span>\n                    </li>\n                  }\n                </ul>\n              </div>\n            </div>\n\n            <ui-separator class=\"my-6\" />\n\n            <p class=\"text-sm\">\n              <span class=\"font-medium\">Recommendation. </span>\n              <span class=\"text-muted-foreground\">{{ current().recommendation }}</span>\n            </p>\n          </div>\n        </div>\n\n        <button ui-button variant=\"ghost\" class=\"mt-6\">Read how the planner chooses</button>\n      </div>\n    </section>\n  `,\n})\nexport class UiFeatureSegmentedCompareComponent {\n  protected readonly Check = Check\n  protected readonly TriangleAlert = TriangleAlert\n\n  protected readonly allModes = modes\n\n  @Input() set initialMode(v: string) {\n    if (modes.some((m) => m.id === v)) this.active.set(v)\n  }\n  @Input('class') className?: string\n\n  readonly active = signal(modes[0]!.id)\n\n  readonly current = computed(() => modes.find((mode) => mode.id === this.active()) ?? modes[0]!)\n\n  get rootClass(): string {\n    return cn('bg-background', this.className)\n  }\n\n  onChange(value: unknown): void {\n    if (typeof value === 'string' && value) this.active.set(value)\n  }\n}\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-segmented-compare/feature-segmented-compare.component.ts"
    },
    {
      "path": "packages/registry-angular/blocks/feature-segmented-compare/index.ts",
      "content": "export { UiFeatureSegmentedCompareComponent, type ExecutionMode } from './feature-segmented-compare.component'\n",
      "type": "registry:block",
      "target": "~/src/app/components/blocks/feature-segmented-compare/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/toggle-group.json"
  ],
  "description": "Segmented control switching one feature section between two operating modes, with the capability list, constraints, and a recommendation line changing per mode.",
  "categories": [
    "marketing"
  ]
}