PACKAGES

@fabrk/config (foundational — Zod schemas, no deps)
@fabrk/design-system (foundational — themes, no deps)
    |
    v
@fabrk/core (depends on config, design-system)
    |
    v
@fabrk/payments, @fabrk/auth, @fabrk/email,
@fabrk/storage, @fabrk/security (depend on core)
    |
    v
@fabrk/ai (depends on core)
@fabrk/components (depends on core, design-system)
@fabrk/store-prisma (depends on core)
    |
    v
Templates & Examples (depend on all packages)

pnpm add @fabrk/config

import { defineFabrkConfig } from '@fabrk/config'

export default defineFabrkConfig({
  framework: { runtime: 'nextjs', typescript: true, srcDir: 'src' },
  theme: { system: 'terminal', colorScheme: 'green', radius: 'sharp' },
  ai: { costTracking: true, budget: { daily: 50 } },
  notifications: { enabled: true },
  teams: { enabled: true, maxMembers: 50 },
})

pnpm add @fabrk/design-system

import { mode } from '@fabrk/design-system'

// mode.radius        — border radius class (e.g., 'rounded-dynamic')
// mode.font          — font family class (e.g., 'font-body')
// mode.textTransform — text casing ('uppercase' | 'normal')

// Full borders ALWAYS get mode.radius
<Card className={cn("border border-border", mode.radius)}>

// Partial borders NEVER get mode.radius
<div className="border-t border-border">

pnpm add @fabrk/core

import { autoWire, applyDevDefaults, cn } from '@fabrk/core'
import config from '../fabrk.config'

// Auto-wire all adapters from config
const fabrk = autoWire(applyDevDefaults(config))

// Use hooks in components
function Dashboard() {
  const { enabled, manager } = useTeam()
  const { enabled: showBeta } = useFeatureFlag('beta-ui')
  if (showBeta) return <BetaDashboard />
  return <StandardDashboard />
}

pnpm add @fabrk/components

import {
  Button, Card, Badge, KPICard, BarChart,
  DataTable, ChatInput, MfaCard, PricingCard
} from '@fabrk/components'
import { cn } from '@fabrk/core'
import { mode } from '@fabrk/design-system'

function MetricsPage() {
  return (
    <div className="grid gap-4">
      <KPICard title="REVENUE" value="$12,340" trend={12.5} />
      <Card className={cn("p-4 border border-border", mode.radius)}>
        <BarChart data={chartData} />
      </Card>
      <Badge variant="default">[ACTIVE]</Badge>
      <Button>> VIEW DETAILS</Button>
    </div>
  )
}

pnpm add @fabrk/ai

import { getLLMClient, AICostTracker, InMemoryCostStore } from '@fabrk/ai'

const client = getLLMClient({ provider: 'anthropic', model: 'claude-sonnet-4-5-20250514' })
const tracker = new AICostTracker(new InMemoryCostStore())

const response = await client.chat([
  { role: 'user', content: 'Explain quantum computing in 3 sentences.' },
])

// Track cost automatically
await tracker.track({
  userId: 'user_123', model: 'claude-sonnet-4-5-20250514',
  provider: 'anthropic', inputTokens: 12, outputTokens: 85, feature: 'chat',
})

pnpm add @fabrk/payments

import { StripePaymentAdapter } from '@fabrk/payments'

const payments = new StripePaymentAdapter({
  secretKey: process.env.STRIPE_SECRET_KEY!,
})

// Create a checkout session
const checkout = await payments.createCheckout({
  priceId: 'price_xxx',
  customerId: user.stripeCustomerId,
  successUrl: '/success',
  cancelUrl: '/cancel',
})

// Handle webhooks
const event = await payments.handleWebhook(body, signature)

pnpm add @fabrk/auth

import { generateApiKey, hashApiKey, verifyTOTP } from '@fabrk/auth'

// Generate API key (fabrk_live_xxx format)
const { key, hash } = await generateApiKey('live')
// key = "fabrk_live_a1b2c3..." (show to user once)
// hash = "sha256:..." (store in database)

// Validate API key from request
const isValid = await validateApiKey(requestKey, storedHash)

// Verify MFA TOTP token
const valid = verifyTOTP(token, secret)  // RFC 6238 compliant

pnpm add @fabrk/email

import { ResendEmailAdapter, ConsoleEmailAdapter } from '@fabrk/email'

// Production
const email = new ResendEmailAdapter({
  apiKey: process.env.RESEND_API_KEY!,
  from: 'noreply@yourdomain.com',
})

// Development (logs to terminal)
const devEmail = new ConsoleEmailAdapter()

// Send a template
await email.sendTemplate('welcome', {
  to: 'user@example.com',
  data: { name: 'Jason', loginUrl: 'https://app.example.com' },
})

pnpm add @fabrk/storage

import { S3StorageAdapter, LocalStorageAdapter } from '@fabrk/storage'

// Production: S3
const storage = new S3StorageAdapter({
  bucket: process.env.S3_BUCKET!,
  region: 'us-east-1',
})

// Development: local filesystem
const devStorage = new LocalStorageAdapter({ basePath: './uploads' })

// Upload a file
const url = await storage.upload(file, {
  path: 'uploads/',
  maxSize: 10 * 1024 * 1024, // 10MB
})

// Generate signed download URL
const signedUrl = await storage.getSignedUrl(key, { expiresIn: 3600 })

pnpm add @fabrk/security

import {
  generateCsrfToken, AuditLogger, MemoryRateLimiter
} from '@fabrk/security'

// CSRF protection
const csrf = generateCsrfToken()

// Rate limiting (100 requests per minute)
const limiter = new MemoryRateLimiter({ max: 100, window: '1m' })
const allowed = await limiter.check(ip)

// Tamper-proof audit logging
const audit = new AuditLogger()
await audit.log({
  action: 'user.login',
  userId: 'user_123',
  ip: '192.168.1.1',
  metadata: { method: 'oauth', provider: 'google' },
})

pnpm add @fabrk/store-prisma

import {
  PrismaTeamStore, PrismaAuditStore,
  PrismaApiKeyStore, PrismaFeatureFlagStore
} from '@fabrk/store-prisma'
import { autoWire } from '@fabrk/core'
import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

// Inject Prisma stores via StoreOverrides
const fabrk = autoWire(config, undefined, {
  teamStore: new PrismaTeamStore(prisma),
  auditStore: new PrismaAuditStore(prisma),
  apiKeyStore: new PrismaApiKeyStore(prisma),
  featureFlagStore: new PrismaFeatureFlagStore(prisma),
})