Breadcrumb with project, user and document info

<!--
  Оригинал использует IconPlaceholder (иконка "file-text") — заменено
  инлайновым <svg>, идентичным react.tsx. `github.com/vercel.png`/
  `github.com/shadcn.png` заменены локальным 1x1 data-URI (та же PIXEL
  константа, что и в блоках avatar/badge/breadcrumb-7).
-->
<script setup lang="ts">
import { Frame, FramePanel } from "@/components/reui/frame"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"

const PIXEL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAUwAOw=="
</script>

<template>
  <Frame spacing="sm">
    <FramePanel>
      <Breadcrumb>
        <BreadcrumbList class="gap-3">
          <BreadcrumbItem>
            <BreadcrumbLink href="#" class="text-foreground flex items-center gap-2">
              <Avatar class="size-6">
                <AvatarImage :src="PIXEL" />
                <AvatarFallback>VC</AvatarFallback>
              </Avatar>
            </BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator class="text-muted-foreground/60">/</BreadcrumbSeparator>

          <BreadcrumbItem>
            <BreadcrumbLink href="#" class="flex items-center gap-3">
              <Avatar class="size-6">
                <AvatarImage :src="PIXEL" class="object-cover" />
                <AvatarFallback>MP</AvatarFallback>
              </Avatar>
              <div class="flex flex-col">
                <span class="text-foreground leading-tight font-medium">shadcn</span>
                <span class="text-muted-foreground leading-tight">ui@shadcn.com</span>
              </div>
            </BreadcrumbLink>
          </BreadcrumbItem>

          <BreadcrumbSeparator class="text-muted-foreground/60">/</BreadcrumbSeparator>

          <BreadcrumbItem>
            <BreadcrumbPage class="flex items-center gap-2.5">
              <span class="flex size-6 items-center justify-center rounded-md bg-sky-100 text-sky-500 dark:bg-sky-500/10 dark:text-sky-400">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  stroke-width="2"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  class="size-3.5"
                ><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /><path d="M14 2v4a2 2 0 0 0 2 2h4" /><path d="M10 9H8" /><path d="M16 13H8" /><path d="M16 17H8" /></svg>
              </span>
              <div class="flex flex-col">
                <span class="text-foreground leading-tight font-medium">Document</span>
                <span class="text-muted-foreground flex items-center gap-1 leading-tight">agents.md</span>
              </div>
            </BreadcrumbPage>
          </BreadcrumbItem>
        </BreadcrumbList>
      </Breadcrumb>
    </FramePanel>
  </Frame>
</template>