{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "feature-matrix-table-dense", "title": "Feature Matrix Table Dense", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/feature-matrix-table-dense/feature-matrix-table-dense.component.ts", "content": "// Dense Linear-style technical specification matrix: collapsible category sections,\n// capability search, and a \"differences only\" toggle across UIPKGE / NPM monolith /\n// in-house columns. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n ArrowRight,\n Check,\n CheckCircle2,\n ChevronDown,\n ChevronRight,\n Filter,\n LucideAngularModule,\n Minus,\n Search,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\n\nexport interface MatrixFeature {\n name: string\n description: string\n uipkge: boolean | string\n npmMonolith: boolean | string\n inHouse: boolean | string\n}\n\nexport interface MatrixCategory {\n id: string\n title: string\n features: MatrixFeature[]\n}\n\nconst DEFAULT_CATEGORIES: MatrixCategory[] = [\n {\n id: 'architecture',\n title: 'Architecture & Runtime Ownership',\n features: [\n {\n name: 'Zero NPM Runtime Dependency',\n description: 'Source code copied directly into your repository with 100% ownership.',\n uipkge: true,\n npmMonolith: false,\n inHouse: true,\n },\n {\n name: 'Dual Framework 1:1 Parity',\n description: 'Synchronized Vue 3.5 and React 19 primitives with identical token bindings.',\n uipkge: true,\n npmMonolith: false,\n inHouse: 'High Cost',\n },\n {\n name: 'Deterministic Tree-Shaking',\n description: 'Zero dead code in final production bundles; only imported components compile.',\n uipkge: true,\n npmMonolith: 'Partial',\n inHouse: true,\n },\n {\n name: 'Tailwind CSS v4 Native Tokens',\n description: 'Direct @theme inline OKLCH bindings without legacy tailwind.config.js overhead.',\n uipkge: true,\n npmMonolith: false,\n inHouse: 'Manual',\n },\n ],\n },\n {\n id: 'developer-experience',\n title: 'Developer Experience & Tooling',\n features: [\n {\n name: 'Headless Primitive Foundation',\n description: 'Powered by battle-tested Reka UI and Radix UI accessible state machines.',\n uipkge: true,\n npmMonolith: 'Proprietary',\n inHouse: 'Custom',\n },\n {\n name: 'CLI Direct Add Workflow',\n description: 'Install via npx shadcn add @uipkge/ with automated dependency resolution.',\n uipkge: true,\n npmMonolith: false,\n inHouse: false,\n },\n {\n name: 'Automated Parity Check Suite',\n description: 'Built-in AST parity verification scripts guarding against framework drift.',\n uipkge: true,\n npmMonolith: false,\n inHouse: false,\n },\n ],\n },\n {\n id: 'enterprise',\n title: 'Enterprise & Security Compliance',\n features: [\n {\n name: 'Zero Supply-Chain Vulnerabilities',\n description: 'No third-party registry packages or compromised transitive semver updates.',\n uipkge: true,\n npmMonolith: false,\n inHouse: true,\n },\n {\n name: 'Full Customization Freedom',\n description: 'Modify any CSS class, DOM attribute, or internal logic without breaking upstream.',\n uipkge: true,\n npmMonolith: 'Limited',\n inHouse: true,\n },\n {\n name: 'WCAG 2.1 AA Accessibility',\n description: 'Keyboard ergonomics, focus rings, ARIA roles, and screen-reader audited.',\n uipkge: true,\n npmMonolith: 'Partial',\n inHouse: 'Manual',\n },\n ],\n },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-feature-matrix-table-dense, [ui-feature-matrix-table-dense]',\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: [LucideAngularModule],\n template: `\n
\n
\n \n
\n \n \n Technical Architecture Comparison\n \n \n\n

\n {{ title }}\n

\n\n

\n {{ description }}\n

\n
\n\n \n \n
\n \n \n
\n\n
\n \n
\n
\n\n \n
\n \n \n \n \n \n \n
\n UIPKGE Registry\n Unbundled Code Ownership\n
\n \n \n \n \n \n\n \n \n @for (category of filteredCategories(); track category.id) {\n \n \n \n \n\n \n @if (!collapsedCategories()[category.id]) {\n @for (feature of category.features; track feature.name) {\n \n \n \n\n \n \n\n \n \n\n \n \n \n }\n }\n }\n \n
\n Capability & Specification\n \n
\n NPM Monolith\n e.g. MUI / AntD\n
\n 		\n
\n In-House Bespoke\n Built from scratch\n
\n
\n
\n @if (!collapsedCategories()[category.id]) {\n \n } @else {\n \n }\n {{ category.title }}\n \n ({{ category.features.length }})\n \n
\n
\n
{{ feature.name }}
\n
{{ feature.description }}
\n 		\n
\n @if (feature.uipkge === true) {\n \n \n \n } @else if (typeof feature.uipkge === 'string') {\n \n {{ feature.uipkge }}\n \n } @else {\n \n \n \n }\n
\n 		\n
\n @if (feature.npmMonolith === true) {\n \n \n \n } @else if (typeof feature.npmMonolith === 'string') {\n \n {{ feature.npmMonolith }}\n \n } @else {\n \n \n \n }\n
\n 		\n
\n @if (feature.inHouse === true) {\n \n \n \n } @else if (typeof feature.inHouse === 'string') {\n \n {{ feature.inHouse }}\n \n } @else {\n \n \n \n }\n
\n
\n
\n \n
\n `,\n})\nexport class UiFeatureMatrixTableDenseComponent {\n protected readonly ArrowRight = ArrowRight\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronDown = ChevronDown\n protected readonly ChevronRight = ChevronRight\n protected readonly Filter = Filter\n protected readonly Minus = Minus\n protected readonly Search = Search\n\n @Input() title = 'Engineered for teams who demand complete source code control.'\n @Input() description =\n 'Compare how unbundled registry components stack up against traditional monolithic npm packages and bespoke in-house design systems.'\n @Input() set categories(v: MatrixCategory[] | undefined) {\n this.customCategories.set(v ? v.map((c) => ({ ...c, features: [...c.features] })) : undefined)\n }\n @Input('class') className?: string\n\n private readonly customCategories = signal(undefined)\n\n readonly searchQuery = signal('')\n readonly onlyDifferences = signal(false)\n readonly collapsedCategories = signal>({})\n\n readonly activeCategories = computed(() => this.customCategories() ?? DEFAULT_CATEGORIES)\n\n readonly filteredCategories = computed(() => {\n const query = this.searchQuery().toLowerCase().trim()\n const onlyDiff = this.onlyDifferences()\n return this.activeCategories()\n .map((cat) => ({\n ...cat,\n features: cat.features.filter((f) => {\n const matchesQuery =\n !query || f.name.toLowerCase().includes(query) || f.description.toLowerCase().includes(query)\n if (!matchesQuery) return false\n if (onlyDiff) {\n const isSame = f.uipkge === f.npmMonolith && f.npmMonolith === f.inHouse\n if (isSame) return false\n }\n return true\n }),\n }))\n .filter((cat) => cat.features.length > 0)\n })\n\n get rootClass(): string {\n return cn('bg-background relative overflow-hidden py-16 sm:py-24', this.className)\n }\n\n get differencesButtonClass(): string {\n return cn(\n 'flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium transition-colors',\n this.onlyDifferences()\n ? 'border-primary bg-primary/10 text-primary'\n : 'border-border bg-card text-muted-foreground hover:text-foreground',\n )\n }\n\n toggleCategory(catId: string): void {\n this.collapsedCategories.update((prev) => ({ ...prev, [catId]: !prev[catId] }))\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-matrix-table-dense/feature-matrix-table-dense.component.ts" }, { "path": "packages/registry-angular/blocks/feature-matrix-table-dense/index.ts", "content": "export {\n UiFeatureMatrixTableDenseComponent,\n type MatrixFeature,\n type MatrixCategory,\n} from './feature-matrix-table-dense.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/feature-matrix-table-dense/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [], "description": "Dense Linear-style technical specification matrix table with collapsible sections and search filtering.", "categories": [ "feature", "marketing" ] }