Tabbed Feature Matrix

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface FeatureModule {
  id: string
  title: string
  category: 'core' | 'dx' | 'security' | 'ai'
  badge: string
  description: string
  icon: IconNode
  iconName: string
  metrics: { label: string; value: string; trend: string }[]
  previewType: 'directory' | 'payroll' | 'performance' | 'compliance' | 'api' | 'copilot'
}

interface HTMLElementTagNameMap {
    'uip-features-01': UipFeatures01
  }
}

Files installed (2)

• src/uip/blocks/features-01/features-01.ts16.9 kB

  Copy

  import { LitElement, css, html, nothing } from 'lit'
  import {
    ArrowRight,
    BarChart3,
    Bot,
    Check,
    ChevronRight,
    Code2,
    Copy,
    Layers,
    ShieldCheck,
    Users,
    Wallet,
    type IconNode,
  } from 'lucide'
  import { cn } from '../../lib/utils'
  import { tailwind } from '../../lib/styles'
  import { ThemeController } from '../../lib/theme'
  import { icon } from '../../lib/icon'
  // Side-effect imports: register the composed elements for standalone use
  // (consumers who install only this block still get working primitives).
  import '../../components/badge/badge'
  import '../../components/button/button'
  import { renderApi, renderCompliance, renderCopilot, renderDirectory, renderPayroll } from './simulations'
  
  interface FeatureModule {
    id: string
    title: string
    category: 'core' | 'dx' | 'security' | 'ai'
    badge: string
    description: string
    icon: IconNode
    iconName: string
    metrics: { label: string; value: string; trend: string }[]
    previewType: 'directory' | 'payroll' | 'performance' | 'compliance' | 'api' | 'copilot'
  }
  
  const features: FeatureModule[] = [
    {
      id: 'directory',
      title: 'Global Employee Directory',
      category: 'core',
      badge: 'Real-time Sync',
      description:
        'Single source of truth for global teams, reporting hierarchies, custom attributes, and automated SCIM provisioning.',
      icon: Users,
      iconName: 'users',
      metrics: [
        { label: 'Sync Latency', value: '<12ms', trend: 'P99 Edge' },
        { label: 'SCIM Connectors', value: '24+', trend: 'Okta/Google' },
        { label: 'Export Formats', value: 'JSON/CSV', trend: 'Bi-directional' },
      ],
      previewType: 'directory',
    },
    {
      id: 'payroll',
      title: 'Multi-Currency Global Payroll',
      category: 'core',
      badge: 'Automated Tax',
      description:
        'Instant payroll calculation across 140+ countries with automated localized tax withholding, statutory benefits, and direct FX routing.',
      icon: Wallet,
      iconName: 'wallet',
      metrics: [
        { label: 'Supported Currencies', value: '140+', trend: 'Live FX' },
        { label: 'Settlement Time', value: 'Instant', trend: 'SEPA/FedNow' },
        { label: 'Tax Accuracy', value: '100%', trend: 'Statutory Verified' },
      ],
      previewType: 'payroll',
    },
    {
      id: 'performance',
      title: 'OKR & Continuous Reviews',
      category: 'dx',
      badge: '360 Calibration',
      description:
        'Transparent objective tracking, real-time 1:1 syncs, and peer review cycles tied directly to engineering and business milestones.',
      icon: BarChart3,
      iconName: 'chart-column',
      metrics: [
        { label: 'Cycle Completion', value: '98.4%', trend: '+14% vs avg' },
        { label: 'Review Latency', value: '2.1 days', trend: '-40% faster' },
        { label: 'Goal Alignment', value: '94%', trend: 'Company-wide' },
      ],
      previewType: 'performance',
    },
    {
      id: 'compliance',
      title: 'SOC 2 & Continuous Compliance',
      category: 'security',
      badge: 'Zero Trust',
      description:
        'Continuous automated evidence collection across AWS, GCP, Cloudflare, and GitHub with automated auditor-ready export bundles.',
      icon: ShieldCheck,
      iconName: 'shield-check',
      metrics: [
        { label: 'Continuous Tests', value: '142 / 142', trend: '100% Pass' },
        { label: 'Evidence Collection', value: 'Automated', trend: 'Every 5m' },
        { label: 'Standards', value: 'SOC2 / HIPAA', trend: 'ISO 27001' },
      ],
      previewType: 'compliance',
    },
    {
      id: 'api',
      title: 'REST & GraphQL Developer APIs',
      category: 'dx',
      badge: 'Type-Safe SDKs',
      description:
        'Fully typed OpenAPI 3.1 & TypeScript SDKs with sub-millisecond edge response times, webhooks, and granular scoped API keys.',
      icon: Code2,
      iconName: 'code-2',
      metrics: [
        { label: 'API Median Latency', value: '18ms', trend: 'Global Edge' },
        { label: 'Webhook Delivery', value: '99.98%', trend: 'Automatic Retry' },
        { label: 'Rate Limit', value: '10k req/s', trend: 'Configurable' },
      ],
      previewType: 'api',
    },
    {
      id: 'copilot',
      title: 'Autonomous People Ops Copilot',
      category: 'ai',
      badge: 'Agentic AI',
      description:
        'Natural language queries over workforce data, intelligent anomaly detection in compensation bands, and automated policy drafts.',
      icon: Bot,
      iconName: 'bot',
      metrics: [
        { label: 'Inference Speed', value: '94 tps', trend: 'Claude 3.5' },
        { label: 'Accuracy Score', value: '99.6%', trend: 'RAG Grounded' },
        { label: 'Task Automation', value: '78%', trend: 'Self-serve' },
      ],
      previewType: 'copilot',
    },
  ]
  
  /**
   * <uip-features-01> — the registry Features01 block as a web component.
   *
   * Class strings are React's Features01 verbatim. React state (useState)
   * becomes @state fields; the copy-label and copilot timeouts are cleared in
   * `disconnectedCallback`. The five live simulations live in
   * `./simulations.ts` (same install unit, shipped together) and read/write
   * the element's public simulation fields. React's `performance` previewType
   * has no simulation branch in the source, so that canvas renders empty here
   * too. Card chrome stays plain divs carrying the registry Card part classes
   * (see the login-01 block).
   */
  export class UipFeatures01 extends LitElement {
    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }
    // :host display can't be a utility class (the host has no template of its own).
    static styles = [tailwind, css`:host { display: block; }`]
  
    static properties = {
      activeCategory: { state: true },
      selectedFeatureId: { state: true },
      copied: { state: true },
      dirQuery: { state: true },
      dirTeam: { state: true },
      headcount: { state: true },
      copilotPrompt: { state: true },
      copilotExecuting: { state: true },
      copilotOutput: { state: true },
    }
  
    private activeCategory: 'all' | 'core' | 'dx' | 'security' | 'ai' = 'all'
    private selectedFeatureId = 'directory'
    private copied = false
    /** Simulation state (read by ./simulations.ts). */
    dirQuery = ''
    dirTeam = 'All Roles'
    headcount = 42
    copilotPrompt = 'Generate quarterly SOC2 compliance audit report with automated PR proof attachments.'
    copilotExecuting = false
    copilotOutput =
      'Audit summary generated. 14 evidence logs compiled across 4 AWS & Cloudflare regions. Zero critical findings.'
    private copyTimer?: number
    private copilotTimer?: number
  
    constructor() {
      super()
      new ThemeController(this)
    }
  
    connectedCallback() {
      super.connectedCallback()
      this.setAttribute('data-uipkge', '')
      this.setAttribute('data-slot', 'features-01')
    }
  
    disconnectedCallback() {
      super.disconnectedCallback()
      if (this.copyTimer) window.clearTimeout(this.copyTimer)
      if (this.copilotTimer) window.clearTimeout(this.copilotTimer)
    }
  
    private get filteredFeatures() {
      if (this.activeCategory === 'all') return features
      return features.filter((f) => f.category === this.activeCategory)
    }
  
    /** Simulation action (called by ./simulations.ts). */
    triggerCopilot() {
      this.copilotExecuting = true
      this.copilotOutput = 'Analyzing real-time event bus and compiling cryptographically signed evidence bundle...'
      if (this.copilotTimer) window.clearTimeout(this.copilotTimer)
      this.copilotTimer = window.setTimeout(() => {
        this.copilotOutput =
          '✓ SOC 2 Type II bundle validated. 142 controls verified at 100% adherence. Ready for auditor download.'
        this.copilotExecuting = false
      }, 900)
    }
  
    private copySnippet(text: string) {
      try {
        navigator.clipboard?.writeText(text)?.catch(() => {})
      } catch {
        // Clipboard unavailable (insecure context): still flash the label.
      }
      this.copied = true
      if (this.copyTimer) window.clearTimeout(this.copyTimer)
      this.copyTimer = window.setTimeout(() => {
        this.copied = false
      }, 2000)
    }
  
    render() {
      const activeFeature = features.find((f) => f.id === this.selectedFeatureId) ?? features[0]
      return html`
        <section data-slot="features-01" class="bg-background border-border relative w-full border-y py-16 lg:py-24">
          <div class="mx-auto max-w-7xl space-y-12 px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col gap-6 md:flex-row md:items-end md:justify-between">
              <div class="max-w-2xl space-y-3">
                <div class="inline-flex items-center gap-2">
                  <uip-badge
                    variant="outline"
                    class="border-primary/30 text-primary bg-primary/5 gap-1.5 px-2.5 py-1 font-mono text-xs tracking-wide uppercase"
                  >
                    ${icon(Layers, 'layers', 'size-3.5')} Unified Architecture
                  </uip-badge>
                  <span class="text-muted-foreground font-mono text-xs">v4.2 Enterprise Release</span>
                </div>
                <h2 class="text-foreground text-3xl font-bold tracking-tight sm:text-4xl">
                  Engineered for High-Velocity Teams.
                </h2>
                <p class="text-muted-foreground text-base leading-relaxed sm:text-lg">
                  Six modular, composable building blocks that directly interconnect without third-party glue code.
                </p>
              </div>
  
              <div class="bg-muted/60 border-border flex flex-wrap items-center gap-1.5 rounded-lg border p-1">
                ${[
                  { id: 'all', label: 'All Modules' },
                  { id: 'core', label: 'Core Platform' },
                  { id: 'dx', label: 'Developer DX' },
                  { id: 'security', label: 'Security' },
                  { id: 'ai', label: 'Agentic AI' },
                ].map(
                  (cat) => html`<button
                    type="button"
                    class=${cn(
                      'rounded-md px-3 py-1.5 text-xs font-medium transition-colors',
                      this.activeCategory === cat.id
                        ? 'bg-background text-foreground font-semibold shadow-xs'
                        : 'text-muted-foreground hover:text-foreground',
                    )}
                    @click=${() => {
                      this.activeCategory = cat.id as 'all' | 'core' | 'dx' | 'security' | 'ai'
                    }}
                  >
                    ${cat.label}
                  </button>`,
                )}
              </div>
            </div>
  
            <div class="grid grid-cols-1 items-start gap-8 lg:grid-cols-12">
              <div class="space-y-3 lg:col-span-5">
                ${this.filteredFeatures.map((item) => {
                  const isSelected = this.selectedFeatureId === item.id
                  return html`<div
                    class=${cn(
                      'group cursor-pointer rounded-xl border p-4 transition-colors duration-150',
                      isSelected
                        ? 'bg-card border-primary/40 ring-primary/20 shadow-xs ring-1'
                        : 'bg-card/40 border-border hover:bg-card/80 hover:border-border/80',
                    )}
                    @click=${() => {
                      this.selectedFeatureId = item.id
                    }}
                  >
                    <div class="flex items-start justify-between gap-3">
                      <div class="flex items-center gap-3">
                        <div
                          class=${cn(
                            'flex size-9 items-center justify-center rounded-lg border transition-colors',
                            isSelected
                              ? 'bg-primary text-primary-foreground border-primary'
                              : 'bg-muted text-muted-foreground border-border group-hover:text-foreground',
                          )}
                        >
                          ${icon(item.icon, item.iconName, 'size-4.5')}
                        </div>
                        <div>
                          <div class="flex items-center gap-2">
                            <h3 class="text-foreground text-sm font-semibold tracking-tight">${item.title}</h3>
                            <uip-badge variant="secondary" class="px-1.5 py-0 text-xs font-normal"
                              >${item.badge}</uip-badge
                            >
                          </div>
                          <p class="text-muted-foreground mt-0.5 line-clamp-1 text-xs">${item.description}</p>
                        </div>
                      </div>
                      ${icon(
                        ChevronRight,
                        'chevron-right',
                        cn(
                          'text-muted-foreground size-4 shrink-0 transition-transform',
                          isSelected ? 'text-primary translate-x-0.5' : 'group-hover:translate-x-0.5',
                        ),
                      )}
                    </div>
  
                    ${isSelected
                      ? html`<div class="border-border/60 mt-4 grid grid-cols-3 gap-2 border-t pt-3">
                          ${item.metrics.map(
                            (m) => html`<div class="space-y-0.5">
                              <p class="text-muted-foreground font-mono text-xs tracking-wider uppercase">${m.label}</p>
                              <div class="flex items-baseline gap-1">
                                <span class="text-foreground text-xs font-semibold">${m.value}</span>
                                <span class="text-success font-mono text-xs">${m.trend}</span>
                              </div>
                            </div>`,
                          )}
                        </div>`
                      : nothing}
                  </div>`
                })}
              </div>
  
              <div class="lg:col-span-7">
                <div
                  data-uipkge=""
                  data-slot="card"
                  class="bg-card text-card-foreground rounded-xl border border-border shadow-sm transition-colors duration-150 overflow-hidden sticky top-6"
                >
                  <div
                    data-uipkge=""
                    data-slot="card-header"
                    class="grid auto-rows-min grid-cols-[minmax(0,1fr)] grid-rows-[auto_auto] items-start gap-1.5 p-6 has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto] border-border bg-muted/20 flex-row items-center justify-between space-y-0 border-b px-5 py-3.5"
                  >
                    <div class="flex items-center gap-2.5">
                      <div class="bg-success flex size-2 animate-pulse rounded-full"></div>
                      <span class="text-muted-foreground font-mono text-xs tracking-wider uppercase">
                        Interactive Simulation
                      </span>
                      <div
                        data-uipkge=""
                        data-slot="separator"
                        data-orientation="vertical"
                        role="none"
                        class="bg-border shrink-0 w-px h-3.5"
                      ></div>
                      <span class="text-foreground text-xs font-semibold">${activeFeature.title}</span>
                    </div>
                    <div class="flex items-center gap-2">
                      <uip-button
                        variant="outline"
                        size="sm"
                        class="h-7 gap-1.5 px-2.5 font-mono text-xs"
                        @click=${() => this.copySnippet(JSON.stringify(activeFeature, null, 2))}
                      >
                        ${this.copied ? icon(Check, 'check', 'text-success size-3') : icon(Copy, 'copy', 'size-3')}
                        <span>${this.copied ? 'Copied' : 'Schema JSON'}</span>
                      </uip-button>
                    </div>
                  </div>
  
                  <div data-uipkge="" data-slot="card-content" class="space-y-6 p-6 pt-0">
                    ${activeFeature.previewType === 'directory' ? renderDirectory(this) : nothing}
                    ${activeFeature.previewType === 'payroll' ? renderPayroll(this) : nothing}
                    ${activeFeature.previewType === 'compliance' ? renderCompliance() : nothing}
                    ${activeFeature.previewType === 'api' ? renderApi() : nothing}
                    ${activeFeature.previewType === 'copilot' ? renderCopilot(this) : nothing}
                  </div>
  
                  <div
                    data-uipkge=""
                    data-slot="card-footer"
                    class="flex items-center border-t border-border bg-muted/10 px-5 py-3 text-xs"
                  >
                    <span class="text-muted-foreground font-mono">
                      Architecture SLA: 99.99% Multi-region Active-Active
                    </span>
                    <uip-button
                      variant="link"
                      size="sm"
                      class="text-primary h-auto gap-1 p-0 text-xs [&::part(base)]:h-auto [&::part(base)]:gap-1 [&::part(base)]:p-0 [&::part(base)]:text-xs"
                    >
                      Explore Full Documentation ${icon(ArrowRight, 'arrow-right', 'size-3.5')}
                    </uip-button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      `
    }
  }
  
  customElements.get('uip-features-01') || customElements.define('uip-features-01', UipFeatures01)
  
  declare global {
    interface HTMLElementTagNameMap {
      'uip-features-01': UipFeatures01
    }
  }
  

• src/uip/blocks/features-01/simulations.ts10.5 kB

  Copy

Raw manifest:https://uipkge.dev/r/lit/features-01.json