{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "features-01", "title": "Tabbed Feature Matrix", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/features-01/features-01.component.ts", "content": "// Interactive enterprise product feature workbench with live module simulations,\n// dynamic directory filters, real-time payroll calculations, continuous SOC 2\n// compliance verification, and a TypeScript API code viewer. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n ArrowRight,\n BarChart3,\n Bot,\n Check,\n CheckCircle2,\n ChevronRight,\n Code2,\n Copy,\n Globe,\n Layers,\n LucideAngularModule,\n RefreshCw,\n Search,\n ShieldCheck,\n Users,\n Wallet,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport type FeatureCategory = 'core' | 'dx' | 'security' | 'ai'\nexport type FeatureFilter = 'all' | FeatureCategory\nexport type PreviewType = 'directory' | 'payroll' | 'performance' | 'compliance' | 'api' | 'copilot'\n\nexport interface FeatureModule {\n id: string\n title: string\n category: FeatureCategory\n badge: string\n description: string\n icon: LucideIconData\n metrics: { label: string; value: string; trend: string }[]\n previewType: PreviewType\n}\n\nconst features: FeatureModule[] = [\n {\n id: 'directory',\n title: 'Global Employee Directory',\n category: 'core',\n badge: 'Real-time Sync',\n description:\n 'Single source of truth for global teams, reporting hierarchies, custom attributes, and automated SCIM provisioning.',\n icon: Users,\n metrics: [\n { label: 'Sync Latency', value: '<12ms', trend: 'P99 Edge' },\n { label: 'SCIM Connectors', value: '24+', trend: 'Okta/Google' },\n { label: 'Export Formats', value: 'JSON/CSV', trend: 'Bi-directional' },\n ],\n previewType: 'directory',\n },\n {\n id: 'payroll',\n title: 'Multi-Currency Global Payroll',\n category: 'core',\n badge: 'Automated Tax',\n description:\n 'Instant payroll calculation across 140+ countries with automated localized tax withholding, statutory benefits, and direct FX routing.',\n icon: Wallet,\n metrics: [\n { label: 'Supported Currencies', value: '140+', trend: 'Live FX' },\n { label: 'Settlement Time', value: 'Instant', trend: 'SEPA/FedNow' },\n { label: 'Tax Accuracy', value: '100%', trend: 'Statutory Verified' },\n ],\n previewType: 'payroll',\n },\n {\n id: 'performance',\n title: 'OKR & Continuous Reviews',\n category: 'dx',\n badge: '360 Calibration',\n description:\n 'Transparent objective tracking, real-time 1:1 syncs, and peer review cycles tied directly to engineering and business milestones.',\n icon: BarChart3,\n metrics: [\n { label: 'Cycle Completion', value: '98.4%', trend: '+14% vs avg' },\n { label: 'Review Latency', value: '2.1 days', trend: '-40% faster' },\n { label: 'Goal Alignment', value: '94%', trend: 'Company-wide' },\n ],\n previewType: 'performance',\n },\n {\n id: 'compliance',\n title: 'SOC 2 & Continuous Compliance',\n category: 'security',\n badge: 'Zero Trust',\n description:\n 'Continuous automated evidence collection across AWS, GCP, Cloudflare, and GitHub with automated auditor-ready export bundles.',\n icon: ShieldCheck,\n metrics: [\n { label: 'Continuous Tests', value: '142 / 142', trend: '100% Pass' },\n { label: 'Evidence Collection', value: 'Automated', trend: 'Every 5m' },\n { label: 'Standards', value: 'SOC2 / HIPAA', trend: 'ISO 27001' },\n ],\n previewType: 'compliance',\n },\n {\n id: 'api',\n title: 'REST & GraphQL Developer APIs',\n category: 'dx',\n badge: 'Type-Safe SDKs',\n description:\n 'Fully typed OpenAPI 3.1 & TypeScript SDKs with sub-millisecond edge response times, webhooks, and granular scoped API keys.',\n icon: Code2,\n metrics: [\n { label: 'API Median Latency', value: '18ms', trend: 'Global Edge' },\n { label: 'Webhook Delivery', value: '99.98%', trend: 'Automatic Retry' },\n { label: 'Rate Limit', value: '10k req/s', trend: 'Configurable' },\n ],\n previewType: 'api',\n },\n {\n id: 'copilot',\n title: 'Autonomous People Ops Copilot',\n category: 'ai',\n badge: 'Agentic AI',\n description:\n 'Natural language queries over workforce data, intelligent anomaly detection in compensation bands, and automated policy drafts.',\n icon: Bot,\n metrics: [\n { label: 'Inference Speed', value: '94 tps', trend: 'Claude 3.5' },\n { label: 'Accuracy Score', value: '99.6%', trend: 'RAG Grounded' },\n { label: 'Task Automation', value: '78%', trend: 'Self-serve' },\n ],\n previewType: 'copilot',\n },\n]\n\nconst categories: { id: FeatureFilter; label: string }[] = [\n { id: 'all', label: 'All Modules' },\n { id: 'core', label: 'Core Platform' },\n { id: 'dx', label: 'Developer DX' },\n { id: 'security', label: 'Security' },\n { id: 'ai', label: 'Agentic AI' },\n]\n\ninterface Employee {\n id: string\n name: string\n role: string\n team: string\n status: string\n location: string\n}\n\nconst employees: Employee[] = [\n {\n id: '1',\n name: 'Sophia Chen',\n role: 'Staff Design Engineer',\n team: 'Design Systems',\n status: 'Active',\n location: 'San Francisco, CA',\n },\n {\n id: '2',\n name: 'Marcus Vance',\n role: 'Principal Distributed Systems',\n team: 'Core Infrastructure',\n status: 'Active',\n location: 'London, UK',\n },\n {\n id: '3',\n name: 'Elena Rostova',\n role: 'Lead Security Architect',\n team: 'SecOps',\n status: 'In Review',\n location: 'Berlin, DE',\n },\n {\n id: '4',\n name: 'Devon Taylor',\n role: 'Head of Product',\n team: 'Enterprise Suite',\n status: 'Active',\n location: 'New York, NY',\n },\n]\n\nconst teamOptions = ['All Roles', 'Design Systems', 'Core Infrastructure', 'SecOps', 'Enterprise Suite']\n\nconst complianceControls = [\n { name: 'TLS 1.3 Strict Transport Security', framework: 'SOC 2 / ISO 27001', passed: true, score: '100%' },\n { name: 'Continuous Automated Evidence Sync', framework: 'HIPAA Security Rule', passed: true, score: '99.8%' },\n { name: 'Hardware Security Keys MFA Enforced', framework: 'Zero Trust Baseline', passed: true, score: '100%' },\n { name: 'Automated Ephemeral DB Credential TTL', framework: 'SOC 2 CC6.1', passed: true, score: '99.4%' },\n]\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-features-01, [ui-features-01]',\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 UiCardFooterComponent,\n UiCardHeaderComponent,\n UiInputComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n
\n \n
\n
\n
\n \n \n Unified Architecture\n \n v4.2 Enterprise Release\n
\n

\n Engineered for High-Velocity Teams.\n

\n

\n Six modular, composable building blocks that directly interconnect without third-party glue code.\n

\n
\n\n \n
\n @for (cat of allCategories; track cat.id) {\n \n }\n
\n
\n\n \n
\n \n
\n @for (item of filteredFeatures(); track item.id) {\n
\n
\n
\n
\n \n
\n
\n
\n

{{ item.title }}

\n \n {{ item.badge }}\n \n
\n

\n {{ item.description }}\n

\n
\n
\n \n
\n\n \n @if (selectedFeatureId() === item.id) {\n
\n @for (m of item.metrics; track m.label) {\n
\n

{{ m.label }}

\n
\n {{ m.value }}\n {{ m.trend }}\n
\n
\n }\n
\n }\n
\n }\n
\n\n \n
\n
\n \n \n
\n
\n Interactive Simulation\n \n {{ activeFeature().title }}\n
\n
\n \n @if (copied()) {\n \n } @else {\n \n }\n {{ copied() ? 'Copied' : 'Schema JSON' }}\n \n
\n
\n\n
\n \n @if (activeFeature().previewType === 'directory') {\n
\n
\n
\n \n \n
\n
\n Filter Team:\n \n @for (team of allTeams; track team) {\n \n }\n \n
\n
\n\n
\n @for (emp of filteredEmployees(); track emp.id) {\n
\n
\n \n {{ initials(emp.name) }}\n
\n
\n

{{ emp.name }}

\n

{{ emp.role }} · {{ emp.team }}

\n
\n
\n
\n \n \n {{ emp.status }}\n \n
\n
\n }\n
\n
\n }\n\n \n @if (activeFeature().previewType === 'payroll') {\n
\n
\n
\n

Gross Run

\n

\\${{ grossAmount().toLocaleString() }}

\n
\n
\n

Statutory Taxes

\n

\n -\\${{ Math.round(estimatedDeductions()).toLocaleString() }}\n

\n
\n
\n

Net Settlement

\n

\n \\${{ Math.round(netPayout()).toLocaleString() }}\n

\n
\n
\n\n
\n
\n Adjust Headcount (Employees: {{ headcount() }})\n \\${{ avgPerEmployee() }}/mo avg\n
\n \n
\n\n \n
\n \n Cross-border SEPA & FedNow Instant Payout Batch: Ready\n
\n Zero-FX Spread\n
\n
\n }\n\n \n @if (activeFeature().previewType === 'compliance') {\n
\n
\n Continuous Automated Compliance Check (142 Controls)\n \n Audit Grade A+\n \n
\n\n
\n @for (ctrl of allControls; track ctrl.name) {\n \n
\n \n
\n

{{ ctrl.name }}

\n

{{ ctrl.framework }}

\n
\n
\n {{ ctrl.score }}\n
\n }\n
\n
\n }\n\n \n @if (activeFeature().previewType === 'api') {\n
\n
\n curl --request POST https://api.uipkge.dev/v1/workforce\n TypeScript SDK\n
\n \n // Initialize client with zero-latency edge caching
\n import {\n UipkgeClient } from\n '@uipkge/sdk'

\n const client = new\n UipkgeClient({ apiKey: process.env.UIPKGE_KEY\n })

\n const { data } =\n await client.directory.syncOrgChart({
\n   autoProvision: true,
\n   enforceMfa: true,
\n   scimSyncInterval: 300,
\n })\n
\n
\n }\n\n \n @if (activeFeature().previewType === 'copilot' || activeFeature().previewType === 'performance') {\n
\n
\n \n
\n \n \n @if (copilotExecuting()) {\n \n } @else {\n \n }\n Run\n \n
\n
\n\n
\n
\n Copilot Real-time Synthesis\n Claude 3.5 Sonnet\n
\n \n {{ copilotOutput() }}\n

\n
\n
\n }\n \n\n \n Architecture SLA: 99.99% Multi-region Active-Active\n \n \n \n \n \n \n
\n `,\n})\nexport class UiFeatures01Component {\n protected readonly cn = cn\n protected readonly ArrowRight = ArrowRight\n protected readonly Bot = Bot\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronRight = ChevronRight\n protected readonly Copy = Copy\n protected readonly Globe = Globe\n protected readonly Layers = Layers\n protected readonly Math = Math\n protected readonly RefreshCw = RefreshCw\n protected readonly Search = Search\n\n protected readonly allCategories = categories\n protected readonly allTeams = teamOptions\n protected readonly allControls = complianceControls\n\n @Input() set initialCategory(v: FeatureFilter) {\n if (v === 'all' || categories.some((c) => c.id === v)) this.activeCategory.set(v)\n }\n @Input() set initialFeature(v: string) {\n if (features.some((f) => f.id === v)) this.selectedFeatureId.set(v)\n }\n @Input('class') className?: string\n\n readonly activeCategory = signal('all')\n readonly selectedFeatureId = signal('directory')\n readonly copied = signal(false)\n private copyTimer: ReturnType | undefined\n\n // Directory simulation state\n readonly searchQuery = signal('')\n readonly selectedTeam = signal('All Roles')\n\n // Payroll simulation state\n readonly grossAmount = signal(184000)\n readonly payrollTaxRate = signal(18.5)\n readonly headcount = signal(42)\n\n // Copilot simulation state\n readonly copilotPrompt = signal(\n 'Generate quarterly SOC2 compliance audit report with automated PR proof attachments.',\n )\n readonly copilotExecuting = signal(false)\n readonly copilotOutput = signal(\n 'Audit summary generated. 14 evidence logs compiled across 4 AWS & Cloudflare regions. Zero critical findings.',\n )\n private copilotTimer: ReturnType | undefined\n\n constructor() {\n inject(DestroyRef).onDestroy(() => {\n clearTimeout(this.copyTimer)\n clearTimeout(this.copilotTimer)\n })\n }\n\n readonly filteredFeatures = computed(() => {\n const cat = this.activeCategory()\n if (cat === 'all') return features\n return features.filter((f) => f.category === cat)\n })\n\n readonly activeFeature = computed(() => features.find((f) => f.id === this.selectedFeatureId()) ?? features[0]!)\n\n readonly filteredEmployees = computed(() => {\n const q = this.searchQuery().toLowerCase()\n const team = this.selectedTeam()\n return employees.filter((emp) => {\n const matchQuery = emp.name.toLowerCase().includes(q) || emp.role.toLowerCase().includes(q)\n const matchRole = team === 'All Roles' || emp.team === team\n return matchQuery && matchRole\n })\n })\n\n readonly estimatedDeductions = computed(() => this.grossAmount() * (this.payrollTaxRate() / 100))\n readonly netPayout = computed(() => this.grossAmount() - this.estimatedDeductions())\n readonly avgPerEmployee = computed(() => (this.grossAmount() / this.headcount()).toFixed(0))\n\n get rootClass(): string {\n return cn('bg-background border-border relative w-full border-y py-16 lg:py-24', this.className)\n }\n\n filterButtonClass(id: FeatureFilter): string {\n return cn(\n 'rounded-md px-3 py-1.5 text-xs font-medium transition-colors',\n this.activeCategory() === id\n ? 'bg-background text-foreground font-semibold shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n featureCardClass(id: string): string {\n return cn(\n 'group cursor-pointer rounded-xl border p-4 transition-colors duration-150',\n this.selectedFeatureId() === id\n ? 'bg-card border-primary/40 ring-primary/20 shadow-xs ring-1'\n : 'bg-card/40 border-border hover:bg-card/80 hover:border-border/80',\n )\n }\n\n featureIconClass(id: string): string {\n return cn(\n 'flex size-9 items-center justify-center rounded-lg border transition-colors',\n this.selectedFeatureId() === id\n ? 'bg-primary text-primary-foreground border-primary'\n : 'bg-muted text-muted-foreground border-border group-hover:text-foreground',\n )\n }\n\n chevronClass(id: string): string {\n return cn(\n 'text-muted-foreground size-4 shrink-0 transition-transform',\n this.selectedFeatureId() === id ? 'text-primary translate-x-0.5' : 'group-hover:translate-x-0.5',\n )\n }\n\n setActiveCategory(cat: FeatureFilter): void {\n this.activeCategory.set(cat)\n }\n\n selectFeature(id: string): void {\n this.selectedFeatureId.set(id)\n }\n\n initials(name: string): string {\n return name\n .split(' ')\n .map((n) => n[0])\n .join('')\n }\n\n async copySnippet(): Promise {\n try {\n await navigator.clipboard.writeText(JSON.stringify(this.activeFeature(), null, 2))\n this.copied.set(true)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copied.set(false), 2000)\n } catch {\n // Clipboard unavailable (e.g. insecure context): leave the label unchanged.\n }\n }\n\n triggerCopilot(): void {\n this.copilotExecuting.set(true)\n this.copilotOutput.set('Analyzing real-time event bus and compiling cryptographically signed evidence bundle...')\n clearTimeout(this.copilotTimer)\n this.copilotTimer = setTimeout(() => {\n this.copilotOutput.set(\n '✓ SOC 2 Type II bundle validated. 142 controls verified at 100% adherence. Ready for auditor download.',\n )\n this.copilotExecuting.set(false)\n }, 900)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/features-01/features-01.component.ts" }, { "path": "packages/registry-angular/blocks/features-01/index.ts", "content": "export {\n UiFeatures01Component,\n type FeatureCategory,\n type FeatureFilter,\n type FeatureModule,\n type PreviewType,\n} from './features-01.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/features-01/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/input.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Interactive enterprise product feature workbench with live module simulations, dynamic directory filters, real-time payroll calculations, continuous SOC 2 compliance verification, and TypeScript API code viewer.", "categories": [ "marketing" ] }