@anchrd/intel-ui 0.22.0 → 0.25.0

package/src/resource-menu/resource-menu.tsx

@@ -1,11 +1,12 @@
 import type { Flow, FlowValidation } from "@anchrd/intel-contract/flow";
 import type { Node } from "@anchrd/intel-contract/node";
-import type { ResourceGrant, ResourceVerb, UnreadableNodes } from "@anchrd/intel-contract/share";
+import type { ResourceVerb, UnreadableNodes } from "@anchrd/intel-contract/share";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useNavigate, useRouterState } from "@tanstack/react-router";
 import {
   Archive,
   CornerLeftUp,
+  Download,
   Ellipsis,
   FileArchive,
   FolderDown,
@@ -14,10 +15,10 @@ import {
   Pencil,
   Share2,
   ShieldCheck,
-  Trash2,
 } from "lucide-react";
 import type * as React from "react";
 import { useState } from "react";
+import { AccessSummary } from "@/access-summary/access-summary.tsx";
 import { moveErrorKey, useTreeMove } from "@/app/tree-move/tree-move.tsx";
 import {
   DropdownMenu,
@@ -36,7 +37,7 @@ import { useBundleImport } from "@/import-bundle/import-bundle.tsx";
 import { Modal } from "@/modal/modal.tsx";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 import { selectedFrom } from "@/router/selection-search.ts";
-import { useUserName } from "@/user-name/user-name.ts";
+import { useDateTime } from "@/time/time-context.tsx";
 
 /**
  * What a resource's own actions are, at the place the resource stands (#24).
@@ -135,6 +136,7 @@ export function ResourceMenu({
 }) {
   const { data } = useIntelRouterContext();
   const i18n = useI18n();
+  const dateTime = useDateTime();
   const queryClient = useQueryClient();
   const navigate = useNavigate();
   const [renaming, setRenaming] = useState(false);
@@ -266,6 +268,37 @@ export function ResourceMenu({
     },
   });
 
+  // #454: a table's CSV export — an ENTRY, not a button of its own. It was the only control WITH
+  // TEXT beside two icon buttons in the title line, and it was needed no more often than what sits
+  // in here anyway; it was merely wider. Intel has made the same decision twice already (#363 for
+  // status and archive, #346 for the import).
+  //
+  // ⚠️ It lives HERE and no longer in `NodeTablePanel`: there it hung off the table query in order
+  // to prevent an empty export. The condition survives the move without a second query — the
+  // canonical content IS the CSV, and if it is empty nothing is downloaded, it is refused instead.
+  // A file of zero bytes is the worse answer.
+  const downloadCsv = useMutation({
+    mutationFn: async () => {
+      if (target.type !== "node") throw new Error("csv export is a node's");
+      const document_ = await data.getNode(target.node.id);
+      const content = document_.content ?? "";
+      if (content === "") throw new Error("nothing to export yet");
+      return new Blob([content], { type: "text/csv;charset=utf-8" });
+    },
+    onSuccess: (blob) => {
+      const url = URL.createObjectURL(blob);
+      const anchor = document.createElement("a");
+      anchor.href = url;
+      // No doubled `.csv` when the title already carries the extension — unchanged from #40.
+      anchor.download = title.toLowerCase().endsWith(".csv") ? title : `${title}.csv`;
+      document.body.append(anchor);
+      anchor.click();
+      anchor.remove();
+      setTimeout(() => URL.revokeObjectURL(url), 0);
+    },
+  });
+  const isTable = target.type === "node" && target.node.kind === "table";
+
   const failure = rename.isError
     ? null // the rename dialog words its own refusal, beside the field that caused it
     : archive.isError
@@ -291,9 +324,25 @@ export function ResourceMenu({
             <Pencil aria-hidden="true" />
             {i18n.t("resource.rename")}
           </DropdownMenuItem>
+          {/* ⚠️ #455: the hint is the actual change of the ticket. Dragging in the tree has been
+              built and shipped since 2026-08-02 — Jack asked for it anyway, so the feature was not
+              the problem, its discoverability was. Nothing about a row says it is movable before you
+              touch it: `cursor-grab` is only visible once the pointer is already on it, and the root
+              drop target appears only while something is being carried.
+
+              A menu is where you learn what can be done with a thing — the same place an application
+              names its keyboard shortcuts. No handle and no extra icon (Jack's instruction), and
+              readable without the pointer ever touching the row.
+
+              ⚠️ The dialog behind it stays the main path, not the fallback: touch has no
+              `dragstart`, and nothing can be dragged by keyboard at all. Dragging is the shortcut
+              for the mouse — the hint says exactly that, in the place that is reachable both ways. */}
           <DropdownMenuItem onSelect={() => move.start(entryOf(target), null)}>
             <CornerLeftUp aria-hidden="true" />
             {i18n.t("tree.move.action")}
+            <span aria-hidden="true" className="ml-auto text-xs text-muted-foreground">
+              {i18n.t("tree.move.hint")}
+            </span>
           </DropdownMenuItem>
           {/* Every kind exports: a folder takes its subtree along, everything else is a bundle of
               one (#136). The entry sits with rename and move because it acts on the whole thing,
@@ -302,6 +351,14 @@ export function ResourceMenu({
             <FolderDown aria-hidden="true" />
             {i18n.t("resource.export")}
           </DropdownMenuItem>
+          {/* Only a table has a CSV — and it stands beside the bundle export because both do the
+              same thing: hand out the whole thing, not a part of its content. */}
+          {isTable ? (
+            <DropdownMenuItem onSelect={() => downloadCsv.mutate()}>
+              <Download aria-hidden="true" />
+              {i18n.t("node.table.download")}
+            </DropdownMenuItem>
+          ) : null}
           {/* The other half of the same round trip, next to it rather than in the tree's plus
               (#346): one word in the menu, both sources under it. */}
           {importable ? (
@@ -367,6 +424,9 @@ export function ResourceMenu({
       {/* Its own sentence, not `resourceErrorKey`'s: nothing was changed, something failed to
           arrive, and "the change was not saved" would send the reader looking for a change. */}
       {exportBundle.isError ? <MenuFailure>{i18n.t("resource.exportFailed")}</MenuFailure> : null}
+      {downloadCsv.isError ? (
+        <MenuFailure>{i18n.t("node.table.downloadFailed")}</MenuFailure>
+      ) : null}
       {/* The import's own sentence, and its own pickers — only where the entry exists, because two
           file inputs on every document's menu would be two elements nothing can ever open. */}
       {bundleImport.isError ? <MenuFailure>{i18n.t("tree.importFailed")}</MenuFailure> : null}
@@ -417,7 +477,7 @@ export function ResourceMenu({
           {/* A snapshot says when it was taken, or it will be read as a standing verdict. */}
           <p className="mt-4 text-xs text-muted-foreground">
             {i18n.t("flows.validateWhen", {
-              when: new Date(validation.checkedAt).toLocaleString(),
+              when: dateTime.at(validation.checkedAt),
             })}
           </p>
         </Modal>
@@ -577,54 +637,6 @@ function NodeLinksPanel({ node, close }: { node: Node; close(): void }) {
 // flows, which is where a permission decision belongs (ADR-0004 §2). Which verbs it offers is the
 // server's answer, not this component's: `execute` never appears on a document, because a document
 // has nothing to run.
-/**
- * One row of the grant list.
- *
- * ⚠️ It is a component rather than a line inside the `map` because of `useUserName`, and that hook
- * is the point: until #431 a `user` grant printed its raw id — `2C9lEhT82upO82abPjHFAvs24a7Vdd3J`
- * beside the word "Read" — which tells the reader nothing about who they let in and puts an
- * identifier on a screen that has no reason to carry one. `user-name.ts` already had the rule
- * ("never fall back to the id, show nothing instead", #258); this row was the last place breaking it.
- *
- * ⚠️ Intel can resolve exactly ONE id today: the signed-in person's. A foreign one is not "a name we
- * could probably guess" but genuinely unanswerable — Intel has no user directory (#261) — so what
- * stands there is what is true: an account, unnamed. The day #261 lands, `useUserName` starts
- * answering and this row needs no change.
- */
-function GrantRow({ grant, onRevoke }: { grant: ResourceGrant; onRevoke(grantId: string): void }) {
-  const i18n = useI18n();
-  const userName = useUserName(grant.principal.type === "user" ? grant.principal.id : null);
-  // ⚠️ An `email` grant keeps showing the ADDRESS, even where a name is known, and that is a
-  // decision rather than an oversight (#431, review finding). The grant is bound to the address —
-  // `db-grants.ts` matches `lower(principal_id)` against whoever signs in — not to an account.
-  // Putting a name there would claim a binding that does not exist, and it would be wrong the moment
-  // somebody else verifies that address.
-  const who =
-    grant.principal.type === "email"
-      ? grant.principal.email
-      : grant.principal.type === "user"
-        ? (userName ?? i18n.t("node.someUser"))
-        : i18n.t("node.organization");
-  return (
-    <li className="flex items-center justify-between gap-3 rounded-md border p-3 text-sm">
-      <span className="min-w-0 truncate">
-        {who}
-        <span className="ml-2 text-xs text-muted-foreground">
-          {i18n.t(`node.verb.${grant.verb}`)}
-        </span>
-      </span>
-      <button
-        type="button"
-        onClick={() => onRevoke(grant.id)}
-        aria-label={i18n.t("node.revokeShare")}
-        className="rounded-md p-2 text-destructive outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
-      >
-        <Trash2 aria-hidden="true" className="size-4" />
-      </button>
-    </li>
-  );
-}
-
 /**
  * Which of the three principals the dialog can SET (#431).
  *
@@ -692,7 +704,10 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
     // before, and the user would read a permission picture that is not the one in force. Of all the
     // things to be silently wrong about, access is the worst.
     onSettled: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["node-grants", node.id] });
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["node-grants", node.id] }),
+        queryClient.invalidateQueries({ queryKey: ["effective-node-grants"] }),
+      ]);
     },
   });
   const revoke = useMutation({
@@ -703,7 +718,10 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
         idempotencyKey: crypto.randomUUID(),
       }),
     onSettled: async () => {
-      await queryClient.invalidateQueries({ queryKey: ["node-grants", node.id] });
+      await Promise.all([
+        queryClient.invalidateQueries({ queryKey: ["node-grants", node.id] }),
+        queryClient.invalidateQueries({ queryKey: ["effective-node-grants"] }),
+      ]);
     },
   });
 
@@ -759,21 +777,17 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
           <p className="mt-1 text-xs text-muted-foreground">{i18n.t("node.shareUnreadableHint")}</p>
         </div>
       )}
-      <ul className="mb-5 max-h-44 space-y-2 overflow-y-auto">
-        {grants.data?.items.map((grant) => (
-          <GrantRow
-            key={grant.id}
-            grant={grant}
+      {grants.data && grants.data.items.length > 0 ? (
+        <div className="mb-5">
+          <AccessSummary
+            grants={grants.data.items}
             onRevoke={(grantId) => {
               share.reset();
               revoke.mutate(grantId);
             }}
           />
-        ))}
-        {grants.data?.items.length === 0 && (
-          <li className="text-sm text-muted-foreground">{i18n.t("node.noGrants")}</li>
-        )}
-      </ul>
+        </div>
+      ) : null}
       <form
         onSubmit={(event) => {
           event.preventDefault();
@@ -799,7 +813,7 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
                 name="share-principal"
                 checked={principalKind === kind}
                 onChange={() => setPrincipalKind(kind)}
-                aria-describedby={kind === "email" ? "share-email-hint" : "share-organization-hint"}
+                aria-describedby={kind === "organization" ? "share-organization-hint" : undefined}
                 className="size-4 border outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
               <span>
@@ -821,19 +835,9 @@ function SharePanel({ node, close }: { node: Node; close(): void }) {
                 required
                 value={email}
                 onChange={(event) => setEmail(event.target.value)}
-                aria-describedby="share-email-hint"
                 className="mt-2 w-full rounded-md border bg-background px-3 py-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
               />
             </label>
-            {/* ⚠️ What this says is what Intel knows, and no more (#431). It cannot check whether an
-                address belongs to anybody — Gate owns identity and offers Intel no lookup (#261) —
-                and a dialog that stayed silent about that let a typo become a grant that is valid,
-                permanent and completely without effect, with nobody on either side to notice. Naming
-                the uncertainty is the honest half of what the ticket asks for; the other half needs
-                Gate. */}
-            <p id="share-email-hint" className="mt-1 text-xs text-muted-foreground">
-              {i18n.t("node.emailHint")}
-            </p>
           </div>
         ) : (
           /* ⚠️ `aria-live` on the CONTAINER, which is already mounted whenever this branch is on

package/src/time/time-context.tsx

@@ -0,0 +1,72 @@
+import { createContext, type ReactNode, useContext, useMemo, useState } from "react";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import {
+  DeviceZone,
+  formatDate,
+  formatDateTime,
+  readZoneChoice,
+  rememberZoneChoice,
+  type TimeZoneStore,
+  type ZoneChoice,
+} from "./time.ts";
+
+// The React seam for the zone. Like language and appearance it is CLIENT state — a preference in
+// `localStorage`, never on Intel's HTTP surface (`packages/ui/CLAUDE.md`).
+//
+// ⚠️ Deliberately NOT inside the i18n context, although both concern presentation: the language
+// decides HOW a time is written, the zone WHICH time it is. Merged, the zone would hang off the
+// catalogue and a language switch would move the clock.
+
+export interface ZoneSelection {
+  current: ZoneChoice;
+  select(choice: ZoneChoice): void;
+}
+
+const ZoneContext = createContext<ZoneSelection | null>(null);
+
+export function TimeZoneProvider({
+  store,
+  children,
+}: {
+  store?: TimeZoneStore;
+  children: ReactNode;
+}) {
+  const [choice, setChoice] = useState<ZoneChoice>(() => readZoneChoice(store));
+  const selection = useMemo<ZoneSelection>(
+    () => ({
+      current: choice,
+      select: (next) => {
+        rememberZoneChoice(next, store);
+        setChoice(next);
+      },
+    }),
+    [choice, store],
+  );
+  return <ZoneContext value={selection}>{children}</ZoneContext>;
+}
+
+// `null` without a provider — not a stand-in value: the settings dialog asks exactly whether there
+// is anything to choose at all (the same rule `useTheme` follows).
+export function useTimeZone(): ZoneSelection | null {
+  return useContext(ZoneContext);
+}
+
+/**
+ * The formatter every surface showing a time uses.
+ *
+ * ⚠️ A hook rather than a function with parameters: otherwise every cell would have to fetch locale
+ * AND zone itself, and the first one that forgets shows the device's zone again — which is the state
+ * before #467, only harder to find.
+ */
+export function useDateTime(): { at: (value: string) => string; on: (value: string) => string } {
+  const i18n = useI18n();
+  const zone = useContext(ZoneContext);
+  const choice = zone?.current ?? DeviceZone;
+  return useMemo(
+    () => ({
+      at: (value: string) => formatDateTime(value, i18n.locale, choice),
+      on: (value: string) => formatDate(value, i18n.locale, choice),
+    }),
+    [i18n.locale, choice],
+  );
+}

package/src/time/time.ts

@@ -0,0 +1,140 @@
+// The ONE place a timestamp becomes a readable sentence (#467).
+//
+// Every surface used to call `toLocaleString(locale)` for itself, which silently takes the DEVICE's
+// zone. Three things follow that are not true:
+//
+//   1. Whoever travels, or uses a device in another zone, reads different times for the same
+//      events. For a record of what happened that is where it stops being evidence.
+//   2. Nowhere does it say WHICH zone applies. A time without a zone is a number, not a statement —
+//      and it looks exactly like a real one.
+//   3. Two people looking at the same entry see different times and cannot refer to one in
+//      conversation.
+//
+// ⚠️ **The zone is a LENS for reading, never a change to the value.** What is stored and sent stays
+// UTC; this module only formats.
+//
+// ⚠️ The comment in `settings-dialog.tsx` is what this file answers: the timezone left with the
+// Agents (#388) because nothing read it, and "a preference that changes nothing on screen is worse
+// than none". This exists BEFORE the preference does, and that order is the whole of #467.
+
+export interface TimeZoneStore {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+const StorageKey = "intel.timezone";
+
+// "This device's zone" as an explicit choice rather than an empty field: an empty field would look
+// as if nothing were set, and invite somebody to set what already holds.
+export const DeviceZone = "device";
+export type ZoneChoice = string;
+
+// ⚠️ Falling back to UTC rather than throwing: in an environment without Intl a time in UTC is
+// still a time, while a thrown exception is an empty screen.
+export function deviceZone(): string {
+  try {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone || "UTC";
+  } catch {
+    return "UTC";
+  }
+}
+
+// The stored value comes out of `localStorage` and may have been edited by hand, written by an older
+// build, or name a zone this runtime does not know.
+export function isKnownZone(zone: string): boolean {
+  if (zone === DeviceZone) return true;
+  try {
+    new Intl.DateTimeFormat("en-US", { timeZone: zone });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function readZoneChoice(store?: TimeZoneStore): ZoneChoice {
+  try {
+    const stored = store?.getItem(StorageKey);
+    return stored && isKnownZone(stored) ? stored : DeviceZone;
+  } catch {
+    return DeviceZone;
+  }
+}
+
+export function rememberZoneChoice(choice: ZoneChoice, store?: TimeZoneStore): void {
+  try {
+    store?.setItem(StorageKey, choice);
+  } catch {
+    // Without storage the choice holds for this session. Less than the reader wanted, more than an
+    // error they cannot switch off.
+  }
+}
+
+export function resolveZone(choice: ZoneChoice): string {
+  return choice === DeviceZone || !isKnownZone(choice) ? deviceZone() : choice;
+}
+
+/**
+ * A timestamp as a readable sentence — WITH its zone.
+ *
+ * ⚠️ The abbreviation is not decoration: a shifted time without one is precisely the silent
+ * misstatement this ticket is written against. And it comes from the runtime rather than from a
+ * string in the code — the runtime knows daylight saving, an appended label would be wrong for half
+ * the year.
+ *
+ * ⚠️ Individual components rather than `dateStyle`/`timeStyle`: Intl refuses the two style
+ * shorthands TOGETHER with `timeZoneName` and throws `Invalid option` — inside a table cell that
+ * takes the whole list with it. Found the hard way in `anchrd/gate#286`, where it read as "the row
+ * is missing" rather than as a formatting error.
+ */
+export function formatDateTime(value: string, locale: string, choice: ZoneChoice): string {
+  const date = new Date(value);
+  // An unreadable timestamp travels through rather than rendering as "Invalid Date": the raw value
+  // at least says what stood there.
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleString(locale, {
+    timeZone: resolveZone(choice),
+    year: "numeric",
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    timeZoneName: "short",
+  });
+}
+
+/**
+ * The date alone, for the column that only ever showed one (the folder table's "Changed").
+ *
+ * ⚠️ It still resolves through the chosen zone, and that is the point rather than a detail: near
+ * midnight a date is exactly the value that differs between two zones, and a bare date carries no
+ * abbreviation to warn anybody.
+ */
+export function formatDate(value: string, locale: string, choice: ZoneChoice): string {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value;
+  return date.toLocaleDateString(locale, { timeZone: resolveZone(choice) });
+}
+
+// ⚠️ A short curated list rather than `Intl.supportedValuesOf("timeZone")` — that is over 400
+// entries, and a dropdown of 400 rows without a search is not a choice but an imposition. A zone
+// missing here is added once it has been missed three times; until then the device's zone is the
+// answer, and it is the right one for almost everybody. Ordered by offset, so the list reads like a
+// map.
+export const ZoneOptions: readonly string[] = [
+  "UTC",
+  "Europe/Lisbon",
+  "Europe/Berlin",
+  "Europe/Athens",
+  "Europe/Moscow",
+  "Asia/Dubai",
+  "Asia/Kolkata",
+  "Asia/Singapore",
+  "Asia/Tokyo",
+  "Australia/Sydney",
+  "Pacific/Auckland",
+  "America/Sao_Paulo",
+  "America/New_York",
+  "America/Chicago",
+  "America/Denver",
+  "America/Los_Angeles",
+];

package/src/title-row/title-row.tsx

@@ -1,4 +1,5 @@
 import type * as React from "react";
+import { ResourceAccessSummary } from "@/access-summary/access-summary.tsx";
 import { ResourceMenu, type ResourceTarget } from "@/resource-menu/resource-menu.tsx";
 
 /**
@@ -33,6 +34,9 @@ export function TitleRow({
         <div className="min-w-0">
           <div className="flex min-w-0 flex-wrap items-baseline gap-x-3">
             <h2 className="truncate text-lg font-semibold">{title}</h2>
+            {target.type === "node" && target.node.kind === "folder" ? (
+              <ResourceAccessSummary resourceId={target.node.id} ownerId={target.node.ownerId} />
+            ) : null}
             <span data-slot="title-meta" className="text-sm text-muted-foreground" />
           </div>
           {description ? <p className="mt-1 text-sm text-muted-foreground">{description}</p> : null}

package/src/components/ui/breadcrumb.tsx

@@ -1,102 +0,0 @@
-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,
-};