@stampui/blocks 1.1.0 → 2.0.0

package/src/components/blocks/onboarding-flow.tsx

@@ -1,230 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { Button } from "@/components/core/button"
-import { Input } from "@/components/core/input"
-import { Label } from "@/components/core/label"
-import { Progress } from "@/components/core/progress"
-import { Badge } from "@/components/core/badge"
-import { Check } from "lucide-react"
-import { cx } from "@/lib/cx"
-
-// ── Types ──────────────────────────────────────────────────────────────────
-
-export interface OnboardingStep {
-  id: string
-  title: string
-  description: string
-  content: React.ReactNode
-}
-
-export interface OnboardingFlowProps {
-  steps?: OnboardingStep[]
-  onComplete?: (data: Record<string, unknown>) => void
-  className?: string
-}
-
-// ── Default Steps ──────────────────────────────────────────────────────────
-
-function WorkspaceStep({ data, onChange }: { data: Record<string, string>; onChange: (k: string, v: string) => void }) {
-  return (
-    <div className="space-y-4">
-      <div className="space-y-2">
-        <Label htmlFor="workspace-name">Workspace name</Label>
-        <Input
-          id="workspace-name"
-          placeholder="Acme Corp"
-          value={data.workspaceName ?? ""}
-          onChange={(e) => onChange("workspaceName", e.target.value)}
-        />
-      </div>
-      <div className="space-y-2">
-        <Label htmlFor="workspace-slug">URL slug</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-xs text-muted-foreground whitespace-nowrap">
-            app.example.com/
-          </span>
-          <Input
-            id="workspace-slug"
-            placeholder="acme"
-            value={data.workspaceSlug ?? ""}
-            onChange={(e) => onChange("workspaceSlug", e.target.value)}
-            className="rounded-l-none"
-          />
-        </div>
-      </div>
-    </div>
-  )
-}
-
-function InviteStep({ data, onChange }: { data: Record<string, string>; onChange: (k: string, v: string) => void }) {
-  return (
-    <div className="space-y-4">
-      <p className="text-sm text-muted-foreground">Invite teammates to collaborate. You can skip this and do it later.</p>
-      {[0, 1, 2].map((i) => (
-        <div key={i} className="space-y-1.5">
-          <Label>Email {i + 1}</Label>
-          <Input
-            type="email"
-            placeholder={`teammate${i + 1}@example.com`}
-            value={data[`invite_${i}`] ?? ""}
-            onChange={(e) => onChange(`invite_${i}`, e.target.value)}
-          />
-        </div>
-      ))}
-    </div>
-  )
-}
-
-function PlanStep() {
-  const [selected, setSelected] = React.useState<"free" | "pro">("free")
-  const plans = [
-    { id: "free", label: "Free", price: "$0/mo", features: ["5 projects", "3 seats", "Community support"] },
-    { id: "pro", label: "Pro", price: "$29/mo", features: ["Unlimited projects", "Unlimited seats", "Priority support", "Pro blocks"] },
-  ] as const
-  return (
-    <div className="grid gap-3 sm:grid-cols-2">
-      {plans.map((plan) => (
-        <button
-          key={plan.id}
-          type="button"
-          onClick={() => setSelected(plan.id)}
-          className={cx(
-            "flex flex-col gap-3 rounded-xl border p-5 text-left transition-colors",
-            selected === plan.id
-              ? "border-border-strong bg-surface-2"
-              : "border-border hover:bg-surface-2/50"
-          )}
-        >
-          <div className="flex items-center justify-between">
-            <span className="font-semibold text-sm">{plan.label}</span>
-            {plan.id === "pro" && <Badge variant="neutral" className="text-[10px]">Popular</Badge>}
-          </div>
-          <span className="text-2xl font-bold tracking-tight">{plan.price}</span>
-          <ul className="space-y-1.5">
-            {plan.features.map((f) => (
-              <li key={f} className="flex items-center gap-2 text-xs text-muted-foreground">
-                <Check className="h-3 w-3 shrink-0 text-foreground" />
-                {f}
-              </li>
-            ))}
-          </ul>
-        </button>
-      ))}
-    </div>
-  )
-}
-
-function CompleteStep() {
-  return (
-    <div className="flex flex-col items-center text-center py-6 gap-4">
-      <div className="h-14 w-14 rounded-full bg-foreground text-background flex items-center justify-center">
-        <Check className="h-7 w-7" />
-      </div>
-      <div>
-        <h3 className="font-semibold text-lg">You're all set!</h3>
-        <p className="text-sm text-muted-foreground mt-1 max-w-xs">Your workspace is ready. Start building your first project.</p>
-      </div>
-    </div>
-  )
-}
-
-// ── Root ───────────────────────────────────────────────────────────────────
-
-export function OnboardingFlow({ onComplete, className }: OnboardingFlowProps) {
-  const [step, setStep] = React.useState(0)
-  const [data, setData] = React.useState<Record<string, string>>({})
-
-  const updateData = (k: string, v: string) => setData((d) => ({ ...d, [k]: v }))
-
-  const steps = [
-    {
-      id: "workspace",
-      title: "Create your workspace",
-      description: "Give your team a home.",
-      content: <WorkspaceStep data={data} onChange={updateData} />,
-    },
-    {
-      id: "invite",
-      title: "Invite your team",
-      description: "Collaboration starts here.",
-      content: <InviteStep data={data} onChange={updateData} />,
-    },
-    {
-      id: "plan",
-      title: "Choose a plan",
-      description: "Start free, upgrade anytime.",
-      content: <PlanStep />,
-    },
-    {
-      id: "complete",
-      title: "You're ready",
-      description: "Let's build something great.",
-      content: <CompleteStep />,
-    },
-  ]
-
-  const total = steps.length
-  const current = steps[step]
-  const progress = Math.round(((step) / (total - 1)) * 100)
-  const isLast = step === total - 1
-
-  return (
-    <div className={cx("w-full max-w-lg mx-auto", className)}>
-      <div className="rounded-2xl border border-border bg-background shadow-sm overflow-hidden">
-        {/* Header */}
-        <div className="px-8 pt-8 pb-6 border-b border-border">
-          <div className="flex items-center justify-between mb-4">
-            <span className="text-xs font-mono text-muted-foreground">Step {step + 1} of {total}</span>
-            <span className="text-xs text-muted-foreground">{progress}%</span>
-          </div>
-          <Progress value={progress} className="h-1.5 mb-6" />
-          <h2 className="text-lg font-semibold">{current.title}</h2>
-          <p className="text-sm text-muted-foreground mt-0.5">{current.description}</p>
-        </div>
-
-        {/* Content */}
-        <div className="px-8 py-6">
-          {current.content}
-        </div>
-
-        {/* Footer */}
-        <div className="px-8 pb-8 flex items-center justify-between">
-          <Button
-            variant="ghost"
-            onClick={() => setStep((s) => Math.max(0, s - 1))}
-            disabled={step === 0}
-          >
-            Back
-          </Button>
-          <Button
-            onClick={() => {
-              if (isLast) {
-                onComplete?.(data)
-              } else {
-                setStep((s) => s + 1)
-              }
-            }}
-          >
-            {isLast ? "Go to dashboard" : step === 1 ? "Skip for now" : "Continue"}
-          </Button>
-        </div>
-      </div>
-
-      {/* Step dots */}
-      <div className="flex justify-center gap-2 mt-4">
-        {steps.map((_, i) => (
-          <button
-            key={i}
-            type="button"
-            onClick={() => i < step && setStep(i)}
-            className={cx(
-              "h-1.5 rounded-full transition-all",
-              i === step ? "w-6 bg-foreground" : i < step ? "w-1.5 bg-muted-foreground/50" : "w-1.5 bg-border"
-            )}
-          />
-        ))}
-      </div>
-    </div>
-  )
-}

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

@@ -1,188 +0,0 @@
-"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

@@ -1,81 +0,0 @@
-"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/settings-layout.tsx

@@ -1,178 +0,0 @@
-"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>
-  )
-}