PhoneFrame

export function MockupFramesMatrix() {
  return (
    <Stage label="PhoneFrame + BrowserFrame + GenericDashboardMockup · los tres con contenido y altura declarada" tall wide>
      <div className="flex w-full flex-col items-center gap-5">
        <div className="flex w-full flex-wrap items-start justify-center gap-6">
          <div className="flex flex-col items-center gap-1.5">
            <span className="font-mono text-[11px] text-content/50">PhoneFrame</span>
            <PhoneFrame className="w-[220px]">
              {/* La altura es del consumidor: el bezel no la fuerza. Sin este
                  div, el marco toma el alto de su contenido y con una línea de
                  texto queda achatado, con el notch encima. */}
              <div className="flex h-[300px] flex-col overflow-hidden bg-bkg">
                <div className="flex items-center justify-between border-b border-content/10 px-3 py-2.5">
                  <span className="text-xs font-medium text-content">Reservas</span>
                  <Badge color="success" variant="soft" size="sm">
                    12
                  </Badge>
                </div>
                <div className="flex flex-1 flex-col gap-2 p-3">
                  <div className="flex flex-col gap-1.5 rounded-lg border border-content/10 bg-container p-2.5">
                    <span className="text-[11px] font-medium text-content">Salón Jardín</span>
                    <LineaFalsa className="h-2 w-20" />
                    <StatusBadge status="active" size="sm" />
                  </div>
                  <div className="flex flex-col gap-1.5 rounded-lg border border-content/10 bg-container p-2.5">
                    <span className="text-[11px] font-medium text-content">Terraza norte</span>
                    <LineaFalsa className="h-2 w-16" />
                    <StatusBadge status="pending" size="sm" />
                  </div>
                </div>
                <div className="flex items-center justify-around border-t border-content/10 px-3 py-2">
                  <LineaFalsa className="h-2 w-10" />
                  <LineaFalsa className="h-2 w-10" />
                  <LineaFalsa className="h-2 w-10" />
                </div>
              </div>
            </PhoneFrame>
          </div>

          <div className="flex flex-col items-center gap-1.5">
            <span className="font-mono text-[11px] text-content/50">BrowserFrame</span>
            <BrowserFrame productName="gestorsalon" className="w-[420px] max-w-full">
              <div className="h-[300px] overflow-hidden bg-bkg">
                <div className="flex items-center justify-between border-b border-content/10 px-4 py-3">
                  <span className="text-sm font-medium text-content">Reservas de agosto</span>
                  <Button variant="secondary" size="xs">
                    Nueva reserva
                  </Button>
                </div>
                <div className="grid grid-cols-3 gap-2 p-3">
                  {[
                    { n: '12', t: 'confirmadas' },
                    { n: '3', t: 'con seña pendiente' },
                    { n: '1', t: 'cancelada' },
                  ].map((k) => (
                    <div key={k.t} className="flex flex-col gap-0.5 rounded-lg border border-content/10 bg-container p-2.5">
                      <span className="text-lg font-semibold text-content">{k.n}</span>
                      <span className="text-[10px] text-content/60">{k.t}</span>
                    </div>
                  ))}
                </div>
                <div className="flex flex-col gap-2 px-3">
                  {['Los Álamos · sábado 22', 'Terraza norte · domingo 23', 'Salón Jardín · viernes 28'].map((f) => (
                    <div key={f} className="flex items-center justify-between rounded-lg border border-content/10 bg-container px-3 py-2">
                      <span className="text-[11px] text-content/70">{f}</span>
                      <StatusBadge status="active" size="sm" />
                    </div>
                  ))}
                </div>
              </div>
            </BrowserFrame>
          </div>
        </div>

        <div className="flex w-full max-w-[420px] flex-col items-center gap-1.5">
          <span className="font-mono text-[11px] text-content/50">GenericDashboardMockup</span>
          {/* El mockup es `w-[90%]` y no trae marco: suelto se ve como cuatro
              rayas sobre el fondo del lienzo. Este recuadro es el mismo
              `mockupWrap` que `CasosSectionTemplate` le pone alrededor cuando
              lo usa de verdad — sin él, la ficha muestra la pieza fuera del
              único contexto en que existe. */}
          <div className="flex h-[180px] w-full items-center justify-center overflow-hidden rounded-lg border border-content/10 bg-container p-3">
            {/* `accent` y `accentLight` son REQUERIDAS por el tipo y el componente
                las IGNORA: su firma compilada es `GenericDashboardMockup(_props)`
                y pinta con `bg-primary-muted` fijo (chunk-YEBRHRK6.js). Se pasan
                porque el tipo las exige, no porque cambien algo — quien copie
                este ejemplo esperando tematizar por acento, no lo va a lograr. */}
            <GenericDashboardMockup accent="var(--color-primary)" accentLight="var(--color-primary-muted)" />
          </div>
          <p className="text-center text-[11px] text-content/50">
            Es el mockup de fábrica de CasosSectionTemplate, el que se usa cuando un caso no trae el suyo.
          </p>
        </div>
      </div>
    </Stage>
  )
}

De specimens/display.tsx · MockupFramesMatrix: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.