47:Ta33b,
import { cn } from "cn"

import { Avatar, AvatarFallback } from "@konfront/ui/components/avatar"
import { Button } from "@konfront/ui/components/button"
import { Icon } from "@konfront/ui/icons"

/*
 * Client view (Vista cliente): its own layout, no sidebar or status bar.
 * Never render here: checklist, steps, percentages per stage or area, area codes,
 * delays, blocks, weekly status, transcripts or minutes, KB chat. Only milestone notifications.
 */

/** 56 px bar + centered content (max 1040), lots of air, responsive down to 390 px. */
export function ClientShell({
  logo,
  clientName,
  user,
  notifications = 0,
  children,
}: {
  logo: React.ReactNode
  clientName: string
  user: { initials: string; name: string }
  notifications?: number
  children: React.ReactNode
}) {
  return (
    <div className="min-h-svh bg-background-soft text-base">
      <header className="sticky top-0 z-10 border-b border-border bg-background/90 backdrop-blur">
        <div className="mx-auto flex h-14 max-w-[1040px] items-center gap-3 px-4 sm:px-6">
          <span className="grid size-8 shrink-0 place-items-center overflow-hidden rounded-md">{logo}</span>
          <span className="truncate font-heading font-bold">{clientName}</span>
          <div className="ml-auto flex items-center gap-1">
            <Button variant="ghost" size="icon" aria-label={notifications ? `Notificaciones, ${notifications} nuevas` : "Notificaciones"} className="relative">
              <Icon name="bell" />
              {notifications > 0 && <span aria-hidden className="absolute top-2 right-2 size-2 rounded-full bg-primary" />}
            </Button>
            <Avatar aria-label={user.name}>
              <AvatarFallback>{user.initials}</AvatarFallback>
            </Avatar>
          </div>
        </div>
      </header>
      <main className="mx-auto flex max-w-[1040px] flex-col gap-12 px-4 py-8 sm:px-6 sm:py-12 md:gap-16">{children}</main>
    </div>
  )
}

/** Front header on a dark brand surface: narrative first, stage as words, not percentages. */
export function ClientHero({ eyebrow, title, description, stage }: { eyebrow?: string; title: string; description: string; stage?: string }) {
  return (
    <section className="relative overflow-hidden rounded-2xl bg-heading px-6 py-10 text-primary-foreground sm:px-10 sm:py-14">
      <div aria-hidden className="absolute inset-0 bg-[radial-gradient(120%_120%_at_0%_0%,var(--primary),transparent_60%)] opacity-70" />
      <div className="relative flex max-w-2xl flex-col gap-4">
        {eyebrow && <span className="text-sm font-medium opacity-80">{eyebrow}</span>}
        <h1 className="font-heading text-3xl leading-tight font-bold text-balance sm:text-4xl">{title}</h1>
        <p className="text-base leading-relaxed text-pretty opacity-90 sm:text-lg">{description}</p>
        {stage && (
          <span className="mt-2 inline-flex w-fit items-center gap-2 rounded-full bg-background/15 px-3 py-1 text-sm font-medium">
            <Icon name="milestone" className="size-4" />
            {stage}
          </span>
        )}
      </div>
    </section>
  )
}

export type ClientMilestoneNote = { title: string; body: string; date: Date; reached: boolean }

const date = new Intl.DateTimeFormat("es-MX", { day: "numeric", month: "long" })

/** Milestone notifications, the only notifications the client view shows. */
export function ClientMilestones({ items, className }: { items: ClientMilestoneNote[]; className?: string }) {
  return (
    <section className={cn("flex flex-col gap-6", className)}>
      <h2 className="font-heading text-2xl font-bold text-heading">Hitos</h2>
      <ol className="flex flex-col gap-4">
        {items.map((m) => (
          <li key={m.title} className="flex gap-4 rounded-2xl border border-border bg-card p-6 shadow-xs">
            <span className={cn("mt-0.5 grid size-9 shrink-0 place-items-center rounded-full", m.reached ? "bg-success-soft text-success-text" : "bg-accent text-accent-foreground")}>
              {m.reached ? <Icon name="done" weight="fill" className="size-5" /> : <Icon name="milestone" className="size-5" />}
            </span>
            <div className="flex flex-col gap-1">
              <span className="text-sm text-muted-foreground">{date.format(m.date)}</span>
              <h3 className="font-heading text-lg font-bold">{m.title}</h3>
              <p className="leading-relaxed text-text-body">{m.body}</p>
            </div>
          </li>
        ))}
      </ol>
    </section>
  )
}
46:["$","div",null,{"className":"overflow-auto px-4 py-3.5 font-mono text-[13px] leading-6 [&_pre]:!bg-transparent [&_span]:text-(--shiki-light) dark:[&_span]:text-(--shiki-dark)","style":{"maxHeight":560},"dangerouslySetInnerHTML":{"__html":"$47"}}]
Reglas Konfront
