BreadcrumbsFromPath

export function HeaderBarSpecimen() {
  return (
    <Stage label="HeaderBar · el encabezado sticky de Zentrya — el wrapper es del consumidor, no del kit" tall wide>
      <div className="flex w-full flex-col gap-6">
        <div className="overflow-hidden rounded-xl border border-content/10">
          {/* El wrapper textual de `admin-page-header.tsx:37`. `sticky` no
              hace nada acá dentro (no hay scroll propio), pero se copia para
              que se vea de qué se hace cargo el consumidor. */}
          <div className="sticky top-0 z-10 border-b border-content/10 bg-container shadow-sm">
            <HeaderBar
              title="Mensajería"
              subtitle="3 canales conectados"
              breadcrumbs={[{ label: 'Zentrya' }, { label: 'Mensajería', onClick: () => {} }]}
              actions={
                <Button variant="secondary" size="sm" icon={IconSettings}>
                  Configurar
                </Button>
              }
            />
          </div>
          <div className="space-y-2 bg-bkg p-4">
            <div className="h-16 rounded-lg bg-container" />
            <div className="h-16 rounded-lg bg-container" />
          </div>
        </div>

        <div className="flex flex-col gap-2 rounded-xl border border-content/10 bg-container p-4">
          <span className="text-[10px] uppercase tracking-wide text-content/50">
            BreadcrumbsFromPath — deriva los crumbs de un pathname, no de un array a mano
          </span>
          <BreadcrumbsFromPath
            pathname="/admin/saas/projects/prj_gs/roadmap"
            routeLabels={{
              saas: 'SolaaS',
              projects: 'Projects',
              prj_gs: 'GestorSalon',
              roadmap: 'Roadmap',
            }}
            skipLeadingSegments={1}
            renderLink={(_href, label) => (
              <span className="max-w-[150px] truncate text-content/60 transition-colors hover:text-content">
                {label}
              </span>
            )}
          />
          <p className="text-[11px] text-content/60">
            `skipLeadingSegments={1}` se come el `/admin` de adelante; los ids de proyecto
            (`prj_gs`) se traducen por `routeLabels`, que es un diccionario plano segmento →
            etiqueta.
          </p>
        </div>
      </div>
    </Stage>
  )
}

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