{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "features-01", "title": "Tabbed Feature Matrix", "type": "registry:block", "files": [ { "path": "packages/registry-svelte/blocks/features-01/Features01.svelte", "content": "\n\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 {#each categories as cat (cat.id)}\n (activeCategory = cat.id)}\n >\n {cat.label}\n \n {/each}\n
\n
\n\n \n
\n \n
\n {#each filteredFeatures as item (item.id)}\n {@const ItemIcon = item.icon}\n (selectedFeatureId = item.id)}\n onkeydown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n selectedFeatureId = item.id\n }\n }}\n role=\"button\"\n tabindex=\"0\"\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 {#each item.metrics as m (m.label)}\n
\n

{m.label}

\n
\n {m.value}\n {m.trend}\n
\n
\n {/each}\n
\n {/if}\n
\n {/each}\n
\n\n \n
\n \n \n \n
\n
\n \n Interactive Simulation\n \n \n {activeFeature.title}\n
\n
\n copySnippet(JSON.stringify(activeFeature, null, 2))}\n >\n {#if copied}\n \n {:else}\n \n {/if}\n {copied ? 'Copied' : 'Schema JSON'}\n \n
\n \n\n \n \n {#if activeFeature.previewType === 'directory'}\n \n {:else if activeFeature.previewType === 'payroll'}\n \n \n {:else if activeFeature.previewType === 'compliance'}\n \n \n {:else if activeFeature.previewType === 'api'}\n \n \n {:else}\n \n \n {/if}\n \n\n \n Architecture SLA: 99.99% Multi-region Active-Active\n \n \n \n
\n \n \n
\n", "type": "registry:block", "target": "~/src/lib/components/blocks/features-01/Features01.svelte" }, { "path": "packages/registry-svelte/blocks/features-01/DirectorySimulation.svelte", "content": "\n\n
\n
\n
\n \n \n
\n
\n Filter Team:\n \n \n \n \n \n \n \n
\n
\n\n
\n {#each filteredEmployees as emp (emp.id)}\n
\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 {/each}\n
\n\n", "type": "registry:block", "target": "~/src/lib/components/blocks/features-01/DirectorySimulation.svelte" }, { "path": "packages/registry-svelte/blocks/features-01/PayrollSimulation.svelte", "content": "\n\n
\n
\n
\n

Gross Run

\n

${grossAmount.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: {simulatedEmployeesCount})\n ${(grossAmount / simulatedEmployeesCount).toFixed(0)}/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", "type": "registry:block", "target": "~/src/lib/components/blocks/features-01/PayrollSimulation.svelte" }, { "path": "packages/registry-svelte/blocks/features-01/ComplianceSimulation.svelte", "content": "\n\n
\n
\n Continuous Automated Compliance Check (142 Controls)\n \n Audit Grade A+\n \n
\n\n
\n {#each controls as ctrl (ctrl.name)}\n
\n
\n \n
\n

{ctrl.name}

\n

{ctrl.framework}

\n
\n
\n {ctrl.score}\n
\n {/each}\n
\n
\n", "type": "registry:block", "target": "~/src/lib/components/blocks/features-01/ComplianceSimulation.svelte" }, { "path": "packages/registry-svelte/blocks/features-01/ApiSimulation.svelte", "content": "\n\n
\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 import {'{'} UipkgeClient {'}'}\n from '@uipkge/sdk'

\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", "type": "registry:block", "target": "~/src/lib/components/blocks/features-01/ApiSimulation.svelte" }, { "path": "packages/registry-svelte/blocks/features-01/CopilotSimulation.svelte", "content": "\n\n
\n
\n \n
\n \n \n {#if copilotExecuting}\n \n {:else}\n \n {/if}\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", "type": "registry:block", "target": "~/src/lib/components/blocks/features-01/CopilotSimulation.svelte" } ], "dependencies": [ "@lucide/svelte" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/svelte/badge.json", "https://uipkge.dev/r/svelte/button.json", "https://uipkge.dev/r/svelte/card.json", "https://uipkge.dev/r/svelte/input.json", "https://uipkge.dev/r/svelte/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" ] }