ContextualSidebarContent

export function ContextualSidebarContentSpecimen() {
  const [activo, setActivo] = useState('calendar')
  const [openState, setOpenState] = useState<ContextualSidebarOpenState>({
    sections: { sales: true, clients: false, finance: false },
    groups: {},
  })

  const item = (id: string, label: string, icono: React.ReactNode, badge?: number) => ({
    type: 'item' as const,
    item: { id, label, icon: icono, ...(badge ? { badge } : {}) },
  })

  const sections: ContextualSidebarSection[] = [
    {
      id: 'dashboard',
      label: 'Inicio',
      collapsible: false,
      content: [item('dashboard', 'Inicio', <IconHome className="h-4 w-4" />)],
    },
    {
      id: 'calendar',
      label: 'Eventos',
      collapsible: false,
      decorativeAccent: 'accent-1',
      content: [item('calendar', 'Eventos', <IconGrid className="h-4 w-4" />)],
    },
    {
      id: 'sales',
      label: 'Ventas',
      icon: <IconBriefcase className="h-4 w-4" />,
      decorativeAccent: 'accent-3',
      content: [
        item('pos', 'Punto de Venta', <IconBriefcase className="h-4 w-4" />),
        item('comandas', 'Comandas', <IconClipboard className="h-4 w-4" />, 4),
        item('productos', 'Productos', <IconGrid className="h-4 w-4" />),
      ],
    },
    {
      id: 'clients',
      label: 'Clientes',
      icon: <IconTeam className="h-4 w-4" />,
      decorativeAccent: 'accent-4',
      content: [
        item('crm', 'Contactos', <IconTeam className="h-4 w-4" />),
        item('consultas', 'Consultas', <IconInbox className="h-4 w-4" />, 2),
      ],
    },
    {
      id: 'finance',
      label: 'Finanzas',
      icon: <IconChart className="h-4 w-4" />,
      decorativeAccent: 'accent-6',
      content: [
        item('cajas', 'Cajas', <IconChart className="h-4 w-4" />),
        item('financeCollections', 'Cobros', <IconChart className="h-4 w-4" />),
      ],
    },
  ]

  return (
    <Stage label="ContextualSidebarContent · el cajón de navegación móvil de GestorSalon" tall wide>
      <div className="flex flex-col items-center gap-2 px-1 py-1">
        <PhoneFrame className="w-[240px]">
          <div className="flex h-[360px] 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">GestorSalón</span>
              <span className="text-[11px] text-content/50">cerrar</span>
            </div>
            <div className="flex min-h-0 flex-1 flex-col overflow-y-auto">
              <ContextualSidebarContent
                sections={sections}
                activeItemId={activo}
                onNavigate={(it) => setActivo(it.id)}
                collapsed={false}
                openState={openState}
                onOpenStateChange={setOpenState}
                decorativeGlow={false}
              />
            </div>
          </div>
        </PhoneFrame>
        <p className="max-w-[380px] text-center text-[11px] text-content/60">
          Mismo árbol que el sidebar de escritorio y mismo `openState` en localStorage: abrir
          «Ventas» acá lo deja abierto allá. Lo único que cambia es el contenedor.
        </p>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · ContextualSidebarContentSpecimen: 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.