@anchrd/intel-ui 0.2.1 → 0.4.0

package/src/app/header-actions/header-actions.tsx

@@ -0,0 +1,15 @@
+import type * as React from "react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+// The shell owns the header bar, the screen owns what belongs in it: a screen renders its actions
+// here and they appear beside the breadcrumb instead of in a second heading of its own.
+//
+// ⚠️ The slot lives in the shell above the outlet, so it is not in the document while the screen
+// first renders. Looking it up in an effect costs one extra render and is the only order that
+// works; reading it during render finds nothing on the first paint.
+export function HeaderActions({ children }: { children: React.ReactNode }) {
+  const [slot, setSlot] = useState<Element | null>(null);
+  useEffect(() => setSlot(document.querySelector('[data-slot="header-actions"]')), []);
+  return slot ? createPortal(children, slot) : null;
+}

package/src/app/header-search/header-search.tsx

@@ -0,0 +1,291 @@
+import type { Flow, ToolCapability } from "@anchrd/intel-contract";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { FileText, Search, Workflow, Wrench } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/components/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+const Kinds = ["knowledge", "flow", "tool"] as const;
+type Kind = (typeof Kinds)[number];
+
+// Enough to answer "where was that again" without turning the dialog into a result page.
+const ResultLimit = 8;
+
+const areaFor = { knowledge: "/knowledge", flow: "/flows", tool: "/tools" } as const;
+
+function isMac(): boolean {
+  return typeof navigator !== "undefined" && /mac/i.test(navigator.userAgent);
+}
+
+// ⚠️ The deliberate boundary of this ticket, named rather than hidden: Intel has a search endpoint
+// for Knowledge only, so Knowledge hits come from `searchKnowledge()` and the server decides both
+// what matches and what may be seen. Flows and Tools have no such endpoint — they are the same
+// authorized lists the screens render, narrowed here in the client.
+//
+// That is safe in the one direction that matters: `listFlows()` returns what the caller may see
+// (the flow repository's `listVisible`), and `listTools()` is one live `tools/list` with the user's
+// own portal token. The client narrows a permitted set; it can never widen one, and no permission
+// decision is taken here.
+//
+// When either list outgrows what a browser should hold, that is a new ticket for a search endpoint
+// — not a silent regression of this one.
+function matches(query: string, ...fields: (string | null)[]): boolean {
+  const needle = query.toLocaleLowerCase();
+  return fields.some((field) => field?.toLocaleLowerCase().includes(needle));
+}
+
+export function HeaderSearch() {
+  const { data, i18n } = useIntelRouterContext();
+  const navigate = useNavigate();
+  const [open, setOpen] = useState(false);
+  const [text, setText] = useState("");
+  const [kind, setKind] = useState<Kind | null>(null);
+  const query = text.trim();
+  const restoreTo = useRef<HTMLElement | null>(null);
+
+  function change(next: boolean) {
+    if (next) restoreTo.current = document.activeElement as HTMLElement | null;
+    setOpen(next);
+  }
+
+  // The same combination opens and closes the dialog. Radix does not swallow the key while it is
+  // open, so one toggling listener on the window covers both directions from every screen.
+  useEffect(() => {
+    function onKeyDown(event: KeyboardEvent) {
+      if (event.key.toLowerCase() !== "k" || !(event.metaKey || event.ctrlKey) || event.altKey) {
+        return;
+      }
+      event.preventDefault();
+      if (!open) restoreTo.current = document.activeElement as HTMLElement | null;
+      setOpen(!open);
+    }
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [open]);
+
+  const shows = (candidate: Kind) => kind === null || kind === candidate;
+  // A filter that excludes a kind does not ask for it either: no request, and therefore no group
+  // that could show up empty.
+  const knowledge = useQuery({
+    queryKey: ["knowledge-search", query],
+    queryFn: () => data.searchKnowledge({ query, limit: ResultLimit }),
+    enabled: open && shows("knowledge") && query.length > 0,
+  });
+  // ⚠️ Deliberately the whole list, not one folder of the tree: a search that only saw the level
+  // someone happened to have open would miss the flow they are looking for. The sidebar tree asks
+  // per folder and keeps its own keys; only the Tools key is shared with the screen that fills it.
+  const flows = useQuery({
+    queryKey: ["flows"],
+    queryFn: () => data.listFlows(),
+    enabled: open && shows("flow") && query.length > 0,
+  });
+  const tools = useQuery({
+    queryKey: ["tools"],
+    queryFn: () => data.listTools(),
+    enabled: open && shows("tool") && query.length > 0,
+  });
+
+  const active = [
+    ...(shows("knowledge") ? [knowledge] : []),
+    ...(shows("flow") ? [flows] : []),
+    ...(shows("tool") ? [tools] : []),
+  ];
+  const searching = query.length > 0 && active.some((source) => source.isPending);
+  const failed = query.length > 0 && active.some((source) => source.isError);
+
+  const knowledgeHits = shows("knowledge") ? (knowledge.data?.items ?? []) : [];
+  const flowHits: Flow[] = shows("flow")
+    ? (flows.data?.items ?? [])
+        .filter((flow) => matches(query, flow.title, flow.description))
+        .slice(0, ResultLimit)
+    : [];
+  const toolHits: ToolCapability[] = shows("tool")
+    ? (tools.data?.items ?? [])
+        .filter((tool) => matches(query, tool.name, tool.title, tool.description))
+        .slice(0, ResultLimit)
+    : [];
+  const total = knowledgeHits.length + flowHits.length + toolHits.length;
+
+  function reach(hit: Kind, select: string) {
+    setOpen(false);
+    void navigate({ to: areaFor[hit], search: { select } });
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => change(true)}
+        aria-label={i18n.t("search.open")}
+        aria-keyshortcuts="Meta+K Control+K"
+        className="flex h-8 items-center gap-2 rounded-md border bg-background px-2.5 text-sm text-muted-foreground outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring sm:w-56"
+      >
+        <Search aria-hidden="true" className="size-4 shrink-0" />
+        <span className="truncate">{i18n.t("search.open")}</span>
+        {/* The hint repeats what `aria-keyshortcuts` already announces, so the accessible name
+            stays the label above rather than "Search ⌘K". */}
+        <kbd className="ml-auto hidden rounded border bg-muted px-1.5 font-sans text-[10px] sm:inline">
+          {isMac() ? "⌘K" : "Ctrl K"}
+        </kbd>
+      </button>
+
+      {/* ⚠️ Composed from `Dialog` and `Command` rather than from the registry's `CommandDialog`
+          for two reasons that both matter here: `CommandDialog` forwards its extra props to the
+          dialog root, so `shouldFilter` would never reach cmdk, and it renders its title outside
+          `DialogContent`, where it does not name the dialog for a screen reader. */}
+      <Dialog open={open} onOpenChange={change}>
+        <DialogContent
+          className="overflow-hidden p-0"
+          // ⚠️ Radix hands focus back to the dialog's trigger. This dialog is usually opened by a
+          // shortcut and has no trigger at all, so without this the caret would land on the body
+          // and a keyboard user would start over at the top of the page.
+          onCloseAutoFocus={(event) => {
+            event.preventDefault();
+            restoreTo.current?.focus();
+          }}
+        >
+          <DialogHeader className="sr-only">
+            <DialogTitle>{i18n.t("search.title")}</DialogTitle>
+            <DialogDescription>{i18n.t("search.description")}</DialogDescription>
+          </DialogHeader>
+          {/* Every source has already decided what matches — the server for Knowledge, the client
+              filter above for the two lists. Letting cmdk filter again would hide rows the server
+              returned, because a row's value is its identity rather than its text. */}
+          <Command shouldFilter={false}>
+            <CommandInput
+              value={text}
+              onValueChange={setText}
+              placeholder={i18n.t("search.placeholder")}
+            />
+            <fieldset className="flex flex-wrap gap-1 border-b px-3 py-2">
+              <legend className="sr-only">{i18n.t("search.filter")}</legend>
+              {[null, ...Kinds].map((candidate) => (
+                <button
+                  key={candidate ?? "all"}
+                  type="button"
+                  aria-pressed={kind === candidate}
+                  onClick={() => setKind(candidate)}
+                  // ⚠️ cmdk turns Enter into "open the highlighted result" on the command root,
+                  // without looking at where the key came from. Unstopped, Enter on a filter would
+                  // leave the dialog for a hit instead of narrowing the list.
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter" || event.key === " ") event.stopPropagation();
+                  }}
+                  className="rounded-full border px-2.5 py-1 text-xs outline-none aria-pressed:bg-primary aria-pressed:text-primary-foreground focus-visible:ring-2 focus-visible:ring-ring"
+                >
+                  {i18n.t(candidate === null ? "search.all" : `search.kind.${candidate}`)}
+                </button>
+              ))}
+            </fieldset>
+            <CommandList>
+              {query.length === 0 ? (
+                <p className="py-6 text-center text-sm text-muted-foreground">
+                  {i18n.t("search.hint")}
+                </p>
+              ) : null}
+              {/* Three states that never read as one another: still asking, could not ask, and asked
+              with nothing to show. A failing source is an alert even when another one answered. */}
+              {failed ? (
+                <div role="alert" className="space-y-3 px-3 py-6 text-center text-sm">
+                  <p className="text-destructive">{i18n.t("search.failed")}</p>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      for (const source of active) if (source.isError) void source.refetch();
+                    }}
+                    className="rounded-md border px-2.5 py-1 text-xs outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    {i18n.t("common.retry")}
+                  </button>
+                </div>
+              ) : null}
+              {searching ? (
+                <p role="status" className="py-6 text-center text-sm text-muted-foreground">
+                  {i18n.t("search.searching")}
+                </p>
+              ) : null}
+              {!searching && !failed && query.length > 0 && total === 0 ? (
+                <CommandEmpty>{i18n.t("search.empty", { query })}</CommandEmpty>
+              ) : null}
+
+              {knowledgeHits.length > 0 ? (
+                <CommandGroup heading={i18n.t("search.kind.knowledge")}>
+                  {knowledgeHits.map((citation) => (
+                    <CommandItem
+                      key={`${citation.nodeId}:${citation.versionId}`}
+                      value={`knowledge:${citation.nodeId}:${citation.versionId}`}
+                      onSelect={() => reach("knowledge", citation.nodeId)}
+                    >
+                      <FileText aria-hidden="true" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate">{citation.title}</span>
+                        <span className="block truncate text-xs text-muted-foreground">
+                          {citation.passage}
+                        </span>
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : null}
+              {flowHits.length > 0 ? (
+                <CommandGroup heading={i18n.t("search.kind.flow")}>
+                  {flowHits.map((flow) => (
+                    <CommandItem
+                      key={flow.id}
+                      value={`flow:${flow.id}`}
+                      onSelect={() => reach("flow", flow.id)}
+                    >
+                      <Workflow aria-hidden="true" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate">{flow.title}</span>
+                        {flow.description ? (
+                          <span className="block truncate text-xs text-muted-foreground">
+                            {flow.description}
+                          </span>
+                        ) : null}
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : null}
+              {toolHits.length > 0 ? (
+                <CommandGroup heading={i18n.t("search.kind.tool")}>
+                  {toolHits.map((tool) => (
+                    <CommandItem
+                      key={tool.name}
+                      value={`tool:${tool.name}`}
+                      onSelect={() => reach("tool", tool.name)}
+                    >
+                      <Wrench aria-hidden="true" />
+                      <span className="min-w-0 flex-1">
+                        <span className="block truncate">{tool.title ?? tool.name}</span>
+                        <span className="block truncate font-mono text-xs text-muted-foreground">
+                          {tool.name}
+                        </span>
+                      </span>
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : null}
+            </CommandList>
+          </Command>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

package/src/app/sidebar-preferences/sidebar-preferences.ts

@@ -0,0 +1,68 @@
+import type {
+  SidebarPreferenceDeps,
+  SidebarPreferenceStore,
+  SidebarPreferences,
+} from "./sidebar-preferences.types.ts";
+
+// Below the minimum the tree is unreadable and the sidebar cannot be dragged back open by eye;
+// above the maximum the content box stops being the larger half. Both are the reason the drag
+// exists at all, so neither is configurable.
+export const MinSidebarWidth = 180;
+export const MaxSidebarWidth = 520;
+export const DefaultSidebarWidth = 256;
+
+const storageKey = "intel.sidebar";
+const defaults: SidebarPreferences = { open: true, width: DefaultSidebarWidth };
+
+export function clampSidebarWidth(width: number): number {
+  if (!Number.isFinite(width)) return DefaultSidebarWidth;
+  return Math.min(MaxSidebarWidth, Math.max(MinSidebarWidth, Math.round(width)));
+}
+
+function browserStorage(): Pick<Storage, "getItem" | "setItem"> | null {
+  // Reading `localStorage` throws outright in a few privacy modes, so the guard is a try, not a
+  // typeof check. Losing the preference is acceptable; losing the shell is not.
+  try {
+    return typeof window === "undefined" ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+// The shell's own client state: not server data, so it stays out of TanStack Query, but it has to
+// survive a page change — which in a SPA includes a full reload — so it is written through.
+export function createSidebarPreferences(deps: SidebarPreferenceDeps = {}): SidebarPreferenceStore {
+  const storage = deps.storage === undefined ? browserStorage() : deps.storage;
+
+  return {
+    read() {
+      let raw: string | null = null;
+      try {
+        raw = storage?.getItem(storageKey) ?? null;
+      } catch {
+        return defaults;
+      }
+      if (raw === null) return defaults;
+      let parsed: unknown;
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        return defaults;
+      }
+      if (typeof parsed !== "object" || parsed === null) return defaults;
+      const value = parsed as Partial<SidebarPreferences>;
+      return {
+        open: typeof value.open === "boolean" ? value.open : defaults.open,
+        width: clampSidebarWidth(typeof value.width === "number" ? value.width : defaults.width),
+      };
+    },
+    write(preferences) {
+      try {
+        storage?.setItem(
+          storageKey,
+          JSON.stringify({ open: preferences.open, width: clampSidebarWidth(preferences.width) }),
+        );
+      } catch {}
+    },
+  };
+}

package/src/app/sidebar-preferences/sidebar-preferences.types.ts

@@ -0,0 +1,15 @@
+export interface SidebarPreferences {
+  open: boolean;
+  width: number;
+}
+
+export interface SidebarPreferenceStore {
+  read(): SidebarPreferences;
+  write(preferences: SidebarPreferences): void;
+}
+
+export interface SidebarPreferenceDeps {
+  // A `null` storage disables persistence. `undefined` means "use the browser's", which is not the
+  // same thing: a test passes null, a browser without localStorage produces null on its own.
+  storage?: Pick<Storage, "getItem" | "setItem"> | null;
+}

package/src/app/sidebar-resize-handle/sidebar-resize-handle.tsx

@@ -0,0 +1,85 @@
+import { useRef } from "react";
+import {
+  clampSidebarWidth,
+  MaxSidebarWidth,
+  MinSidebarWidth,
+} from "@/app/sidebar-preferences/sidebar-preferences.ts";
+import { cn } from "@/lib/utils";
+
+const KeyboardStep = 16;
+
+// The registry has no resizable sidebar, so this is the one piece of the shell that is not a
+// primitive. It is an ARIA window splitter rather than a bare div: a drag-only handle exists for
+// nobody on a keyboard, and the tree behind it is the entire navigation.
+export function SidebarResizeHandle({
+  width,
+  label,
+  onWidthChange,
+}: {
+  width: number;
+  label: string;
+  onWidthChange(width: number): void;
+}) {
+  const drag = useRef<{ pointerId: number; startX: number; startWidth: number } | null>(null);
+
+  return (
+    // The WAI-ARIA window-splitter pattern is a focusable separator carrying a value. The rule's
+    // suggested `<hr>` cannot take focus, which would remove the keyboard operation this handle
+    // exists to provide.
+    // biome-ignore lint/a11y/useSemanticElements: a focusable window splitter cannot be an <hr>
+    <button
+      type="button"
+      role="separator"
+      aria-orientation="vertical"
+      aria-label={label}
+      aria-valuenow={width}
+      aria-valuemin={MinSidebarWidth}
+      aria-valuemax={MaxSidebarWidth}
+      className={cn(
+        "absolute inset-y-0 -right-1 z-20 hidden w-2 cursor-col-resize outline-none md:block",
+        "after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2",
+        "hover:after:bg-sidebar-ring focus-visible:after:bg-sidebar-ring",
+        "focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+        // Collapsed the sidebar is a fixed icon rail; there is no width left to drag.
+        "group-data-[state=collapsed]:hidden",
+      )}
+      onPointerDown={(event) => {
+        drag.current = {
+          pointerId: event.pointerId,
+          startX: event.clientX,
+          startWidth: width,
+        };
+        event.currentTarget.setPointerCapture(event.pointerId);
+      }}
+      onPointerMove={(event) => {
+        const active = drag.current;
+        if (!active || active.pointerId !== event.pointerId) return;
+        // Measured against the width the drag started from, never against the live value: reading
+        // back the clamped width would make the handle drift away from the cursor at the limits.
+        onWidthChange(clampSidebarWidth(active.startWidth + (event.clientX - active.startX)));
+      }}
+      onPointerUp={(event) => {
+        drag.current = null;
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }}
+      onPointerCancel={() => {
+        drag.current = null;
+      }}
+      onKeyDown={(event) => {
+        const next =
+          event.key === "ArrowLeft"
+            ? width - KeyboardStep
+            : event.key === "ArrowRight"
+              ? width + KeyboardStep
+              : event.key === "Home"
+                ? MinSidebarWidth
+                : event.key === "End"
+                  ? MaxSidebarWidth
+                  : null;
+        if (next === null) return;
+        event.preventDefault();
+        onWidthChange(clampSidebarWidth(next));
+      }}
+    />
+  );
+}

package/src/app/user-footer/user-footer.tsx

@@ -0,0 +1,76 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Link, useRouterState } from "@tanstack/react-router";
+import { LogOut, User, Wrench } from "lucide-react";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { loginPath } from "@/data/intel-data-provider/intel-data-provider.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+// Everything that belongs to the person rather than to the content: the tool catalogue — a live
+// portal query with the signed-in user's own token (ADR-0003), so what it shows depends on who is
+// asking — then the user, then the sign-out.
+export function UserFooter() {
+  const { data, i18n } = useIntelRouterContext();
+  const pathname = useRouterState({ select: (state) => state.location.pathname });
+  const session = useQuery({ queryKey: ["session"], queryFn: () => data.getSession() });
+  const logout = useMutation({
+    mutationFn: () => data.logout(),
+    onSuccess: () => window.location.assign(loginPath()),
+  });
+
+  const user = session.data ?? null;
+  const primary = user ? (user.name ?? user.email) : null;
+  const secondary = user?.name ? user.email : null;
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton asChild isActive={pathname === "/tools"} tooltip={i18n.t("nav.tools")}>
+          <Link to="/tools">
+            <Wrench aria-hidden="true" />
+            <span>{i18n.t("nav.tools")}</span>
+          </Link>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+      <SidebarMenuItem>
+        <div
+          data-slot="signed-in-user"
+          className="flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm group-data-[collapsible=icon]:p-0"
+        >
+          <span className="flex aspect-square size-8 shrink-0 items-center justify-center rounded-lg bg-sidebar-accent text-sidebar-accent-foreground">
+            <User aria-hidden="true" className="size-4" />
+          </span>
+          {/* Collapsed to icons the name is not on screen, so the label has to carry it for a
+              screen reader. It is read out in both states; sighted users see it in neither. */}
+          <span className="sr-only">{i18n.t("shell.signedInUser")}</span>
+          <span className="grid flex-1 leading-tight group-data-[collapsible=icon]:hidden">
+            <span className="truncate font-medium">
+              {session.isPending
+                ? i18n.t("common.loading")
+                : (primary ?? i18n.t("shell.userUnavailable"))}
+            </span>
+            {secondary ? (
+              <span className="truncate text-xs text-muted-foreground">{secondary}</span>
+            ) : null}
+          </span>
+        </div>
+      </SidebarMenuItem>
+      {logout.isError ? (
+        <SidebarMenuItem>
+          <p role="alert" className="px-2 text-sm text-destructive">
+            {i18n.t("auth.signOutFailed")}
+          </p>
+        </SidebarMenuItem>
+      ) : null}
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          onClick={() => logout.mutate()}
+          disabled={logout.isPending}
+          tooltip={i18n.t("auth.signOut")}
+        >
+          <LogOut aria-hidden="true" />
+          <span>{i18n.t("auth.signOut")}</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,102 @@
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+import { Slot } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot.Root : "a";
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+};