{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "features-01", "title": "Tabbed Feature Matrix", "type": "registry:block", "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" ], "files": [ { "path": "packages/elements-lit/src/blocks/features-01/features-01.ts", "content": "import { LitElement, css, html, nothing } from 'lit'\nimport {\n ArrowRight,\n BarChart3,\n Bot,\n Check,\n ChevronRight,\n Code2,\n Copy,\n Layers,\n ShieldCheck,\n Users,\n Wallet,\n type IconNode,\n} from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport { renderApi, renderCompliance, renderCopilot, renderDirectory, renderPayroll } from './simulations'\n\ninterface FeatureModule {\n id: string\n title: string\n category: 'core' | 'dx' | 'security' | 'ai'\n badge: string\n description: string\n icon: IconNode\n iconName: string\n metrics: { label: string; value: string; trend: string }[]\n previewType: 'directory' | 'payroll' | 'performance' | 'compliance' | 'api' | 'copilot'\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 iconName: '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 iconName: '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 iconName: 'chart-column',\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 iconName: 'shield-check',\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 iconName: 'code-2',\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 iconName: '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\n/**\n * — the registry Features01 block as a web component.\n *\n * Class strings are React's Features01 verbatim. React state (useState)\n * becomes @state fields; the copy-label and copilot timeouts are cleared in\n * `disconnectedCallback`. The five live simulations live in\n * `./simulations.ts` (same install unit, shipped together) and read/write\n * the element's public simulation fields. React's `performance` previewType\n * has no simulation branch in the source, so that canvas renders empty here\n * too. Card chrome stays plain divs carrying the registry Card part classes\n * (see the login-01 block).\n */\nexport class UipFeatures01 extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n activeCategory: { state: true },\n selectedFeatureId: { state: true },\n copied: { state: true },\n dirQuery: { state: true },\n dirTeam: { state: true },\n headcount: { state: true },\n copilotPrompt: { state: true },\n copilotExecuting: { state: true },\n copilotOutput: { state: true },\n }\n\n private activeCategory: 'all' | 'core' | 'dx' | 'security' | 'ai' = 'all'\n private selectedFeatureId = 'directory'\n private copied = false\n /** Simulation state (read by ./simulations.ts). */\n dirQuery = ''\n dirTeam = 'All Roles'\n headcount = 42\n copilotPrompt = 'Generate quarterly SOC2 compliance audit report with automated PR proof attachments.'\n copilotExecuting = false\n copilotOutput =\n 'Audit summary generated. 14 evidence logs compiled across 4 AWS & Cloudflare regions. Zero critical findings.'\n private copyTimer?: number\n private copilotTimer?: number\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'features-01')\n }\n\n disconnectedCallback() {\n super.disconnectedCallback()\n if (this.copyTimer) window.clearTimeout(this.copyTimer)\n if (this.copilotTimer) window.clearTimeout(this.copilotTimer)\n }\n\n private get filteredFeatures() {\n if (this.activeCategory === 'all') return features\n return features.filter((f) => f.category === this.activeCategory)\n }\n\n /** Simulation action (called by ./simulations.ts). */\n triggerCopilot() {\n this.copilotExecuting = true\n this.copilotOutput = 'Analyzing real-time event bus and compiling cryptographically signed evidence bundle...'\n if (this.copilotTimer) window.clearTimeout(this.copilotTimer)\n this.copilotTimer = window.setTimeout(() => {\n this.copilotOutput =\n '✓ SOC 2 Type II bundle validated. 142 controls verified at 100% adherence. Ready for auditor download.'\n this.copilotExecuting = false\n }, 900)\n }\n\n private copySnippet(text: string) {\n try {\n navigator.clipboard?.writeText(text)?.catch(() => {})\n } catch {\n // Clipboard unavailable (insecure context): still flash the label.\n }\n this.copied = true\n if (this.copyTimer) window.clearTimeout(this.copyTimer)\n this.copyTimer = window.setTimeout(() => {\n this.copied = false\n }, 2000)\n }\n\n render() {\n const activeFeature = features.find((f) => f.id === this.selectedFeatureId) ?? features[0]\n return html`\n
\n
\n
\n
\n
\n \n ${icon(Layers, 'layers', 'size-3.5')} 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 { 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 ].map(\n (cat) => html` {\n this.activeCategory = cat.id as 'all' | 'core' | 'dx' | 'security' | 'ai'\n }}\n >\n ${cat.label}\n `,\n )}\n
\n
\n\n
\n
\n ${this.filteredFeatures.map((item) => {\n const isSelected = this.selectedFeatureId === item.id\n return html` {\n this.selectedFeatureId = item.id\n }}\n >\n
\n
\n \n ${icon(item.icon, item.iconName, 'size-4.5')}\n
\n
\n
\n

${item.title}

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

${item.description}

\n
\n
\n ${icon(\n ChevronRight,\n 'chevron-right',\n cn(\n 'text-muted-foreground size-4 shrink-0 transition-transform',\n isSelected ? 'text-primary translate-x-0.5' : 'group-hover:translate-x-0.5',\n ),\n )}\n
\n\n ${isSelected\n ? html`
\n ${item.metrics.map(\n (m) => html`
\n

${m.label}

\n
\n ${m.value}\n ${m.trend}\n
\n
`,\n )}\n
`\n : nothing}\n
`\n })}\n
\n\n
\n \n \n
\n
\n \n Interactive Simulation\n \n
\n ${activeFeature.title}\n
\n
\n this.copySnippet(JSON.stringify(activeFeature, null, 2))}\n >\n ${this.copied ? icon(Check, 'check', 'text-success size-3') : icon(Copy, 'copy', 'size-3')}\n ${this.copied ? 'Copied' : 'Schema JSON'}\n \n
\n \n\n
\n ${activeFeature.previewType === 'directory' ? renderDirectory(this) : nothing}\n ${activeFeature.previewType === 'payroll' ? renderPayroll(this) : nothing}\n ${activeFeature.previewType === 'compliance' ? renderCompliance() : nothing}\n ${activeFeature.previewType === 'api' ? renderApi() : nothing}\n ${activeFeature.previewType === 'copilot' ? renderCopilot(this) : nothing}\n
\n\n \n \n Architecture SLA: 99.99% Multi-region Active-Active\n \n \n Explore Full Documentation ${icon(ArrowRight, 'arrow-right', 'size-3.5')}\n \n \n \n \n \n \n
\n `\n }\n}\n\ncustomElements.get('uip-features-01') || customElements.define('uip-features-01', UipFeatures01)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-features-01': UipFeatures01\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/features-01/features-01.ts" }, { "path": "packages/elements-lit/src/blocks/features-01/simulations.ts", "content": "import { html } from 'lit'\nimport { Bot, CheckCircle2, Globe, RefreshCw, Search } from 'lucide'\nimport { icon } from '../../lib/icon'\nimport type { UipInput } from '../../components/input/input'\nimport type { UipFeatures01 } from './features-01'\n\n// Live simulation canvases for . Same install unit (every\n// .ts in this dir ships with the block); class strings are React's\n// DirectorySimulation / PayrollSimulation / ComplianceSimulation /\n// ApiSimulation / CopilotSimulation verbatim.\n\nconst initialEmployees = [\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 controls = [\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\nconst GROSS_AMOUNT = 184000\nconst PAYROLL_TAX_RATE = 18.5\n\nexport function renderDirectory(el: UipFeatures01) {\n const q = el.dirQuery.toLowerCase()\n const filteredEmployees = initialEmployees.filter((emp) => {\n const matchQuery =\n emp.name.toLowerCase().includes(q) || emp.role.toLowerCase().includes(q)\n const matchRole = el.dirTeam === 'All Roles' || emp.team === el.dirTeam\n return matchQuery && matchRole\n })\n return html`
\n
\n {\n el.dirQuery = (e.target as UipInput).value\n }}\n placeholder=\"Search 1,420 employees...\"\n >\n ${icon(Search, 'search', 'size-3.5')}\n \n
\n Filter Team:\n {\n el.dirTeam = (e.target as HTMLSelectElement).value\n }}\n class=\"border-input bg-background text-foreground focus:ring-ring h-8 rounded-md border px-2 py-1 text-xs focus:ring-1 focus:outline-none\"\n >\n \n \n \n \n \n \n
\n
\n\n
\n ${filteredEmployees.map(\n (emp) => html`
\n
\n \n ${emp.name\n .split(' ')\n .map((n) => n[0])\n .join('')}\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\nexport function renderPayroll(el: UipFeatures01) {\n const estimatedDeductions = GROSS_AMOUNT * (PAYROLL_TAX_RATE / 100)\n const netPayout = GROSS_AMOUNT - estimatedDeductions\n return html`
\n
\n
\n

Gross Run

\n

$${GROSS_AMOUNT.toLocaleString()}

\n
\n
\n

Statutory Taxes

\n

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

\n
\n
\n

Net Settlement

\n

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

\n
\n
\n\n
\n
\n Adjust Headcount (Employees: ${el.headcount})\n $${(GROSS_AMOUNT / el.headcount).toFixed(0)}/mo avg\n
\n {\n el.headcount = Number((e.target as HTMLInputElement).value)\n }}\n type=\"range\"\n min=\"10\"\n max=\"150\"\n class=\"bg-muted accent-primary h-1.5 w-full cursor-pointer appearance-none rounded-lg\"\n />\n
\n\n
\n
\n ${icon(Globe, 'globe', 'text-primary size-4')}\n Cross-border SEPA & FedNow Instant Payout Batch: Ready\n
\n Zero-FX Spread\n
\n
`\n}\n\nexport function renderCompliance() {\n return html`
\n
\n Continuous Automated Compliance Check (142 Controls)\n \n Audit Grade A+\n \n
\n\n
\n ${controls.map(\n (ctrl) => html`
\n
\n ${icon(CheckCircle2, 'circle-check-big', 'text-success size-4 shrink-0')}\n
\n

${ctrl.name}

\n

${ctrl.framework}

\n
\n
\n ${ctrl.score}\n
`,\n )}\n
\n
`\n}\n\nexport function renderApi() {\n return html`
\n
\n \n curl --request POST https://api.uipkge.dev/v1/workforce\n \n TypeScript SDK\n
\n \n // Initialize client with zero-latency edge caching\n
\n import { UipkgeClient }\n from '@uipkge/sdk'\n
\n
\n const client = new\n UipkgeClient({ apiKey: process.env.UIPKGE_KEY })
\n
\n const { data } = await client.directory.syncOrgChart({
\n   autoProvision: true,
\n   enforceMfa: true,
\n   scimSyncInterval: 300,
\n })\n
\n `\n}\n\nexport function renderCopilot(el: UipFeatures01) {\n return html`
\n
\n \n
\n {\n el.copilotPrompt = (e.target as UipInput).value\n }}\n class=\"h-9 text-xs\"\n placeholder=\"Ask copilot to run calculations or compliance checks...\"\n >\n el.triggerCopilot()}\n >\n ${el.copilotExecuting\n ? icon(RefreshCw, 'refresh-cw', 'size-3.5 animate-spin')\n : icon(Bot, 'bot', 'size-3.5')}\n Run\n \n
\n
\n\n
\n
\n Copilot Real-time Synthesis\n Claude 3.5 Sonnet\n
\n

\n ${el.copilotOutput}\n

\n
\n
`\n}\n", "type": "registry:file", "target": "src/uip/blocks/features-01/simulations.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/input.json", "https://uipkge.dev/r/lit/lit-core.json" ] }