@stampui/blocks 1.0.0

package/src/components/blocks/project-command-center.tsx

@@ -0,0 +1,188 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpRight, CheckCircle2, Clock3, GitBranch, Rocket, ShieldCheck } from "lucide-react"
+import { AvatarStack } from "@/components/core/avatar-stack"
+import { Badge } from "@/components/core/badge"
+import { Button } from "@/components/core/button"
+import { Card, CardBody, CardHeader, CardTitle } from "@/components/core/card"
+import { Progress } from "@/components/core/progress"
+import { Separator } from "@/components/core/separator"
+import { StatusPulse } from "@/components/core/status-pulse"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/core/tabs"
+import { cx } from "@/lib/cx"
+
+export interface ProjectCommandCenterProps {
+  className?: string
+}
+
+const team = [
+  { name: "Ava" },
+  { name: "Mert" },
+  { name: "Lina" },
+  { name: "Noah" },
+  { name: "Iris" },
+]
+
+const milestones = [
+  { label: "Checkout flow", status: "Ready", progress: 92 },
+  { label: "Usage limits", status: "Review", progress: 68 },
+  { label: "Billing webhooks", status: "Blocked", progress: 34 },
+]
+
+const events = [
+  { icon: CheckCircle2, label: "Auth panel merged", meta: "12 min ago", tone: "success" },
+  { icon: GitBranch, label: "Preview branch deployed", meta: "31 min ago", tone: "info" },
+  { icon: ShieldCheck, label: "Security scan passed", meta: "1h ago", tone: "neutral" },
+]
+
+const health = [
+  { label: "API", value: "99.98%", status: "online" as const },
+  { label: "Queue", value: "42ms", status: "processing" as const },
+  { label: "Sync", value: "Live", status: "online" as const },
+]
+
+function MetricCard({
+  label,
+  value,
+  description,
+}: {
+  label: string
+  value: string
+  description: string
+}) {
+  return (
+    <Card variant="surface" className="min-h-[116px]">
+      <CardHeader className="pb-2">
+        <p className="text-xs font-medium uppercase tracking-widest text-muted-foreground">{label}</p>
+        <CardTitle className="text-2xl tabular-nums">{value}</CardTitle>
+      </CardHeader>
+      <CardBody className="pt-0">
+        <p className="text-xs leading-relaxed text-muted-foreground">{description}</p>
+      </CardBody>
+    </Card>
+  )
+}
+
+export function ProjectCommandCenter({ className }: ProjectCommandCenterProps) {
+  return (
+    <section className={cx("w-full rounded-2xl border border-border bg-background p-4 sm:p-6", className)}>
+      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <Badge variant="new">Sprint 24</Badge>
+            <StatusPulse status="online" label="Production healthy" />
+          </div>
+          <div>
+            <h2 className="text-2xl font-semibold tracking-tight text-foreground">Project Command Center</h2>
+            <p className="mt-1 max-w-xl text-sm leading-relaxed text-muted-foreground">
+              A compact delivery dashboard for launch readiness, team ownership, and live system status.
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <AvatarStack users={team} max={4} />
+          <Button size="sm" variant="outline">
+            Open board
+            <ArrowUpRight className="h-3.5 w-3.5" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-3 sm:grid-cols-3">
+        <MetricCard label="Ship score" value="84%" description="Readiness improved 12 points this week." />
+        <MetricCard label="Open tasks" value="18" description="6 tasks need owner review before release." />
+        <MetricCard label="Deploys" value="7" description="All preview deploys completed successfully." />
+      </div>
+
+      <Tabs defaultValue="milestones" className="mt-6">
+        <TabsList>
+          <TabsTrigger value="milestones">Milestones</TabsTrigger>
+          <TabsTrigger value="activity">Activity</TabsTrigger>
+          <TabsTrigger value="health">Health</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="milestones">
+          <Card variant="surface">
+            <CardBody className="space-y-5 p-5">
+              {milestones.map((item) => (
+                <div key={item.label} className="space-y-2">
+                  <div className="flex items-center justify-between gap-3">
+                    <div>
+                      <p className="text-sm font-medium text-foreground">{item.label}</p>
+                      <p className="text-xs text-muted-foreground">{item.progress}% complete</p>
+                    </div>
+                    <Badge variant={item.status === "Blocked" ? "warning" : item.status === "Ready" ? "success" : "neutral"}>
+                      {item.status}
+                    </Badge>
+                  </div>
+                  <Progress value={item.progress} size="sm" variant={item.status === "Blocked" ? "warning" : "default"} />
+                </div>
+              ))}
+            </CardBody>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="activity">
+          <Card variant="surface">
+            <CardBody className="p-0">
+              {events.map((event, index) => {
+                const Icon = event.icon
+                return (
+                  <React.Fragment key={event.label}>
+                    <div className="flex items-center gap-3 p-4">
+                      <div className="flex h-9 w-9 items-center justify-center rounded-lg border border-border bg-surface-2">
+                        <Icon className="h-4 w-4 text-foreground" />
+                      </div>
+                      <div className="min-w-0 flex-1">
+                        <p className="truncate text-sm font-medium text-foreground">{event.label}</p>
+                        <p className="text-xs text-muted-foreground">{event.meta}</p>
+                      </div>
+                      <Badge variant={event.tone === "success" ? "success" : event.tone === "info" ? "info" : "neutral"}>
+                        Done
+                      </Badge>
+                    </div>
+                    {index < events.length - 1 && <Separator />}
+                  </React.Fragment>
+                )
+              })}
+            </CardBody>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="health">
+          <Card variant="surface">
+            <CardBody className="grid gap-3 p-5 sm:grid-cols-3">
+              {health.map((item) => (
+                <div key={item.label} className="rounded-lg border border-border bg-surface-2 p-4">
+                  <div className="flex items-center justify-between">
+                    <p className="text-xs font-medium uppercase tracking-widest text-muted-foreground">{item.label}</p>
+                    <StatusPulse status={item.status} pulse={item.status !== "processing"} />
+                  </div>
+                  <p className="mt-3 text-xl font-semibold tabular-nums text-foreground">{item.value}</p>
+                </div>
+              ))}
+            </CardBody>
+          </Card>
+        </TabsContent>
+      </Tabs>
+
+      <div className="mt-6 flex flex-col gap-3 rounded-xl border border-border bg-surface-2 p-4 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-background">
+            <Rocket className="h-4 w-4 text-foreground" />
+          </div>
+          <div>
+            <p className="text-sm font-medium text-foreground">Release candidate is almost ready</p>
+            <p className="text-xs text-muted-foreground">Resolve blocked billing work to unlock final QA.</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Clock3 className="h-4 w-4 text-muted-foreground" />
+          <span className="text-xs text-muted-foreground">ETA 2 days</span>
+        </div>
+      </div>
+    </section>
+  )
+}

package/src/components/blocks/prompt-input.tsx

@@ -0,0 +1,81 @@
+"use client"
+
+import * as React from "react"
+import { Paperclip, ArrowUp } from "lucide-react"
+import { cx } from "@/lib/cx"
+import { Button } from "@/components/core/button"
+
+export interface PromptInputProps
+  extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "onSubmit"> {
+  onValueSubmit?: (value: string) => void
+}
+
+export const PromptInput = React.forwardRef<HTMLTextAreaElement, PromptInputProps>(
+  ({ className, onValueSubmit, ...props }, ref) => {
+    const internalRef = React.useRef<HTMLTextAreaElement>(null)
+    const [value, setValue] = React.useState("")
+
+    const handleInput = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setValue(e.target.value)
+      if (internalRef.current) {
+        internalRef.current.style.height = "auto"
+        internalRef.current.style.height = `${internalRef.current.scrollHeight}px`
+      }
+      if (props.onChange) props.onChange(e)
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === "Enter" && !e.shiftKey) {
+        e.preventDefault()
+        if (value.trim() && onValueSubmit) {
+          onValueSubmit(value)
+          setValue("")
+          if (internalRef.current) internalRef.current.style.height = "auto"
+        }
+      }
+      if (props.onKeyDown) props.onKeyDown(e)
+    }
+
+    return (
+      <div className={cx("relative flex w-full flex-col rounded-xl border border-border bg-card shadow-sm transition-colors focus-within:border-primary/50 focus-within:ring-1 focus-within:ring-primary/50", className)}>
+        <textarea
+          ref={(node) => {
+            internalRef.current = node
+            if (typeof ref === "function") ref(node)
+            else if (ref) ref.current = node
+          }}
+          value={value}
+          onChange={handleInput}
+          onKeyDown={handleKeyDown}
+          rows={1}
+          placeholder="Send a message..."
+          className="max-h-64 min-h-[56px] w-full resize-none bg-transparent px-4 py-4 pr-24 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+          {...props}
+        />
+        <div className="absolute bottom-2 right-2 flex items-center gap-1">
+          <Button variant="ghost" size="icon" className="h-8 w-8 rounded-lg text-muted-foreground hover:text-foreground">
+            <Paperclip className="h-4 w-4" />
+            <span className="sr-only">Attach file</span>
+          </Button>
+          <Button 
+            variant={value.trim() ? "primary" : "ghost"} 
+            size="icon" 
+            className="h-8 w-8 rounded-lg transition-colors"
+            disabled={!value.trim()}
+            onClick={() => {
+              if (value.trim() && onValueSubmit) {
+                onValueSubmit(value)
+                setValue("")
+                if (internalRef.current) internalRef.current.style.height = "auto"
+              }
+            }}
+          >
+            <ArrowUp className="h-4 w-4" />
+            <span className="sr-only">Send message</span>
+          </Button>
+        </div>
+      </div>
+    )
+  }
+)
+PromptInput.displayName = "PromptInput"

package/src/components/blocks/registry-card.tsx

@@ -0,0 +1,104 @@
+import * as React from "react"
+import Link from "next/link"
+import { Terminal, ArrowRight } from "lucide-react"
+import { Badge } from "@/components/core/badge"
+import { cx } from "@/lib/cx"
+import { CopyButton } from "@/components/core/copy-button"
+import type { BlockManifest } from "../../types"
+
+export interface RegistryCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  block: BlockManifest
+}
+
+/** Intentional fallback for blocks without a generated preview asset. */
+function BlockPreviewFallback({ slug }: { slug: string }) {
+  return (
+    <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-surface-2">
+      <div className="w-32 h-20 rounded-lg border border-border-soft bg-surface flex flex-col gap-2 p-3">
+        <div className="h-2 w-3/4 rounded-sm bg-border-strong/60" />
+        <div className="h-2 w-1/2 rounded-sm bg-border-strong/40" />
+        <div className="mt-auto h-5 w-full rounded-md bg-border-strong/30" />
+      </div>
+      <span className="text-[10px] font-mono text-muted-foreground/60">{slug}.tsx</span>
+    </div>
+  )
+}
+
+export function RegistryCard({
+  block,
+  className,
+  ...props
+}: RegistryCardProps) {
+  const { title, slug, description, category, status, previewPath, difficulty, frameworks, dependencies, promptReady, version, licenseRequired } = block
+  const isGated = licenseRequired || status === "pro" || status === "locked"
+
+  return (
+    <div
+      className={cx(
+        "group flex flex-col overflow-hidden rounded-xl border border-border bg-surface text-card-foreground transition-all hover:border-border-strong",
+        className
+      )}
+      {...props}
+    >
+      <Link href={`/blocks/${slug}`} className="block relative aspect-video w-full overflow-hidden border-b border-border bg-surface-2 outline-none focus-visible:ring-2 focus-visible:ring-border-strong">
+        {previewPath ? (
+          <img
+            src={previewPath}
+            alt={`${title} preview`}
+            className="object-contain w-full h-full p-3"
+          />
+        ) : (
+          <BlockPreviewFallback slug={slug} />
+        )}
+
+        <div className="absolute top-3 right-3 flex gap-1.5">
+          {isGated && (
+            <Badge variant="pro" className="bg-background/70 backdrop-blur-sm text-[10px] tracking-widest font-mono">
+              PRO
+            </Badge>
+          )}
+          {status === "new" && !isGated && (
+            <Badge variant="new" className="bg-background/70 backdrop-blur-sm text-[10px] tracking-widest font-mono">
+              NEW
+            </Badge>
+          )}
+          {promptReady && (
+            <Badge variant="neutral" className="bg-background/70 backdrop-blur-sm text-[10px] font-mono hidden group-hover:inline-flex">
+              Prompt Ready
+            </Badge>
+          )}
+        </div>
+      </Link>
+
+      <div className="flex flex-1 flex-col p-4">
+        <Link href={`/blocks/${slug}`} className="outline-none focus-visible:underline">
+          <h3 className="font-semibold text-sm leading-tight tracking-tight text-foreground group-hover:text-primary transition-colors">
+            {title}
+          </h3>
+        </Link>
+        <p className="text-xs text-muted-foreground line-clamp-1 mt-1">
+          {description}
+        </p>
+
+        <div className="flex flex-wrap items-center gap-x-3 gap-y-1.5 mt-4 text-[10px] font-mono text-muted-foreground h-4">
+          <span className="text-border-strong">v{version}</span>
+          <span className="text-border-strong">·</span>
+          <span>{category}</span>
+        </div>
+
+        <div className="mt-4 pt-4 border-t border-border flex items-center justify-between gap-2">
+          <div className="flex items-center gap-2 bg-surface-2 border border-border rounded-md px-2.5 py-1.5 w-[190px] flex-none group/cmd cursor-text">
+            <Terminal className="h-3 w-3 text-muted-foreground flex-shrink-0" />
+            <code className="text-[10px] font-mono text-muted-foreground truncate flex-1">
+              stampui add {slug}
+            </code>
+            <CopyButton value={`pnpm dlx stampui add ${slug}`} className="h-5 w-5 opacity-0 group-hover/cmd:opacity-100 transition-opacity flex-shrink-0" />
+          </div>
+          <Link href={`/blocks/${slug}`} className="text-xs font-medium text-foreground flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-all duration-200 ease-out translate-x-1 group-hover:translate-x-0 flex-shrink-0">
+            View <ArrowRight className="h-3 w-3" />
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/components/blocks/registry-explorer.tsx

@@ -0,0 +1,78 @@
+"use client"
+
+import * as React from "react"
+import { useSearchParams } from "next/navigation"
+import { Check, Command } from "lucide-react"
+import { cx } from "@/lib/cx"
+import { RegistryCard } from "./registry-card"
+import type { BlockManifest } from "../../types"
+
+export interface RegistryExplorerProps {
+  initialBlocks: (BlockManifest & { name?: string; previewThumbnail?: string })[]
+}
+
+export function RegistryExplorer({ initialBlocks }: RegistryExplorerProps) {
+  const searchParams = useSearchParams()
+  const search = searchParams?.get("q") || ""
+  const [activeCategory, setActiveCategory] = React.useState<string>("All")
+  const [activeDifficulty, setActiveDifficulty] = React.useState<string>("All")
+  const [activeStatus, setActiveStatus] = React.useState<string>("All")
+
+
+  const categories = ["All", ...Array.from(new Set(initialBlocks.map(b => b.category)))]
+  const difficulties = ["All", "beginner", "intermediate", "advanced"]
+  const statuses = ["All", "free", "pro", "new"]
+
+  const filteredBlocks = React.useMemo(() => {
+    return initialBlocks.filter((block) => {
+      const matchesSearch = block.title.toLowerCase().includes(search.toLowerCase()) || 
+                            block.slug.toLowerCase().includes(search.toLowerCase()) ||
+                            block.description.toLowerCase().includes(search.toLowerCase())
+      
+      const matchesCategory = activeCategory === "All" || block.category === activeCategory
+      const matchesDifficulty = activeDifficulty === "All" || block.difficulty === activeDifficulty
+      const matchesStatus = activeStatus === "All" || block.status === activeStatus
+
+      return matchesSearch && matchesCategory && matchesDifficulty && matchesStatus
+    })
+  }, [initialBlocks, search, activeCategory, activeDifficulty, activeStatus])
+
+  return (
+    <div className="flex flex-col w-full gap-8">
+      <div className="flex flex-col gap-6">
+        <div className="flex items-center justify-between border-b border-border pb-4">
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-semibold tracking-tight">Blocks Registry</h1>
+            <span className="text-xs font-mono bg-surface-2 text-muted-foreground px-2 py-0.5 rounded-full border border-border">
+              {filteredBlocks.length} items
+            </span>
+          </div>
+        </div>
+
+      </div>
+        {filteredBlocks.length > 0 ? (
+          <div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
+            {filteredBlocks.map((block) => (
+              <RegistryCard key={block.slug} block={block} />
+            ))}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-24 text-center border border-dashed border-border rounded-xl">
+            <Command className="h-8 w-8 text-muted-foreground mb-4 opacity-50" />
+            <h3 className="text-lg font-medium">No blocks found</h3>
+            <p className="text-sm text-muted-foreground mt-1 max-w-sm">
+              We couldn't find any blocks matching your current filters. Try adjusting your search or clearing filters.
+            </p>
+            <button 
+              onClick={() => {
+                window.location.href = "/blocks"
+              }}
+              className="mt-6 text-sm text-foreground font-medium underline underline-offset-4 decoration-border-strong hover:decoration-foreground"
+            >
+              Clear all filters
+            </button>
+          </div>
+        )}
+    </div>
+  )
+}

package/src/components/blocks/settings-layout.tsx

@@ -0,0 +1,178 @@
+"use client"
+
+import * as React from "react"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/core/tabs"
+import { Input } from "@/components/core/input"
+import { Label } from "@/components/core/label"
+import { Button } from "@/components/core/button"
+import { Switch } from "@/components/core/switch"
+import { Separator } from "@/components/core/separator"
+import { Select } from "@/components/core/select"
+import { Badge } from "@/components/core/badge"
+import { cx } from "@/lib/cx"
+
+// ── Types ──────────────────────────────────────────────────────────────────
+
+export interface SettingsLayoutProps {
+  className?: string
+  onSave?: (section: string, data: Record<string, unknown>) => void
+}
+
+// ── Account Tab ────────────────────────────────────────────────────────────
+
+function AccountSection({ onSave }: { onSave?: SettingsLayoutProps["onSave"] }) {
+  const [name, setName] = React.useState("Alex Johnson")
+  const [email, setEmail] = React.useState("alex@example.com")
+  const [username, setUsername] = React.useState("alexj")
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-base font-semibold">Profile</h3>
+        <p className="text-sm text-muted-foreground mt-0.5">Update your display name and username.</p>
+      </div>
+      <Separator />
+      <div className="grid gap-5 max-w-md">
+        <div className="space-y-2">
+          <Label htmlFor="name">Full name</Label>
+          <Input id="name" value={name} onChange={(e) => setName(e.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="username">Username</Label>
+          <div className="flex">
+            <span className="inline-flex items-center rounded-l-lg border border-r-0 border-border bg-surface-2 px-3 text-sm text-muted-foreground">
+              @
+            </span>
+            <Input id="username" value={username} onChange={(e) => setUsername(e.target.value)} className="rounded-l-none" />
+          </div>
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+        </div>
+      </div>
+      <div className="flex gap-3">
+        <Button onClick={() => onSave?.("account", { name, email, username })}>Save changes</Button>
+        <Button variant="outline">Cancel</Button>
+      </div>
+    </div>
+  )
+}
+
+// ── Notifications Tab ──────────────────────────────────────────────────────
+
+interface NotifPref { id: string; label: string; description: string; enabled: boolean }
+
+function NotificationsSection({ onSave }: { onSave?: SettingsLayoutProps["onSave"] }) {
+  const [prefs, setPrefs] = React.useState<NotifPref[]>([
+    { id: "email_updates", label: "Email updates", description: "Product news and announcements.", enabled: true },
+    { id: "security_alerts", label: "Security alerts", description: "Sign-in from new device or location.", enabled: true },
+    { id: "billing", label: "Billing notifications", description: "Invoices, renewals, and payment issues.", enabled: true },
+    { id: "marketing", label: "Marketing emails", description: "Tips, tutorials, and new features.", enabled: false },
+    { id: "weekly_digest", label: "Weekly digest", description: "Summary of activity from your projects.", enabled: false },
+  ])
+
+  const toggle = (id: string) =>
+    setPrefs((p) => p.map((pref) => pref.id === id ? { ...pref, enabled: !pref.enabled } : pref))
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-base font-semibold">Notifications</h3>
+        <p className="text-sm text-muted-foreground mt-0.5">Choose what you want to be notified about.</p>
+      </div>
+      <Separator />
+      <div className="space-y-6">
+        {prefs.map((pref) => (
+          <div key={pref.id} className="flex items-center justify-between gap-4">
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium">{pref.label}</p>
+              <p className="text-xs text-muted-foreground mt-0.5">{pref.description}</p>
+            </div>
+            <Switch
+              checked={pref.enabled}
+              onCheckedChange={() => toggle(pref.id)}
+            />
+          </div>
+        ))}
+      </div>
+      <Button onClick={() => onSave?.("notifications", Object.fromEntries(prefs.map(p => [p.id, p.enabled])))}>
+        Save preferences
+      </Button>
+    </div>
+  )
+}
+
+// ── Security Tab ───────────────────────────────────────────────────────────
+
+function SecuritySection({ onSave }: { onSave?: SettingsLayoutProps["onSave"] }) {
+  const [current, setCurrent] = React.useState("")
+  const [newPw, setNewPw] = React.useState("")
+  const [confirm, setConfirm] = React.useState("")
+  const [twoFa, setTwoFa] = React.useState(false)
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-base font-semibold">Security</h3>
+        <p className="text-sm text-muted-foreground mt-0.5">Manage your password and two-factor authentication.</p>
+      </div>
+      <Separator />
+      <div className="grid gap-5 max-w-md">
+        <div className="space-y-2">
+          <Label htmlFor="current-pw">Current password</Label>
+          <Input id="current-pw" type="password" value={current} onChange={(e) => setCurrent(e.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="new-pw">New password</Label>
+          <Input id="new-pw" type="password" value={newPw} onChange={(e) => setNewPw(e.target.value)} />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="confirm-pw">Confirm new password</Label>
+          <Input id="confirm-pw" type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} />
+        </div>
+      </div>
+      <Button onClick={() => onSave?.("password", { current, newPw, confirm })}>Update password</Button>
+
+      <Separator />
+
+      <div className="flex items-center justify-between max-w-md">
+        <div>
+          <p className="text-sm font-medium">Two-factor authentication</p>
+          <p className="text-xs text-muted-foreground mt-0.5">Add an extra layer of security to your account.</p>
+        </div>
+        <Switch checked={twoFa} onCheckedChange={setTwoFa} />
+      </div>
+    </div>
+  )
+}
+
+// ── Root ───────────────────────────────────────────────────────────────────
+
+const TABS = [
+  { value: "account", label: "Account" },
+  { value: "notifications", label: "Notifications" },
+  { value: "security", label: "Security" },
+]
+
+export function SettingsLayout({ className, onSave }: SettingsLayoutProps) {
+  return (
+    <div className={cx("w-full max-w-3xl mx-auto py-10 px-6", className)}>
+      <div className="mb-8">
+        <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
+        <p className="text-sm text-muted-foreground mt-1">Manage your account preferences and security.</p>
+      </div>
+
+      <Tabs defaultValue="account">
+        <TabsList className="mb-8">
+          {TABS.map((tab) => (
+            <TabsTrigger key={tab.value} value={tab.value}>{tab.label}</TabsTrigger>
+          ))}
+        </TabsList>
+        <TabsContent value="account"><AccountSection onSave={onSave} /></TabsContent>
+        <TabsContent value="notifications"><NotificationsSection onSave={onSave} /></TabsContent>
+        <TabsContent value="security"><SecuritySection onSave={onSave} /></TabsContent>
+      </Tabs>
+    </div>
+  )
+}