@anchrd/intel 0.59.0

package/ui/src/board/board-task/board-task.ts

@@ -0,0 +1,108 @@
+import type { BoardTask } from "@contract/board.ts";
+import type { ColumnWithCards } from "@/board/board-data/board-data.types.ts";
+
+/** What one entry of the task's link list is. The icon is drawn from this, nothing else. */
+/**
+ * ⚠️ **No `reference` kind yet, on purpose.** A plain reference is a link in the node graph and
+ * needs `node_link_list` — a second read this screen does not make. Carrying the kind here with no
+ * caller would be a path that looks built and is not; it is `#687` instead.
+ */
+export type LinkKind = "subtask" | "blocker" | "blocked";
+
+export interface TaskLink {
+  kind: LinkKind;
+  /** The linked node's id — its address, and the key of the row. */
+  id: string;
+  /** ⚠️ `null` when this answer holds no name for it. The VIEW decides what to say then; putting
+   * the id here would put it on screen. */
+  title: string | null;
+  /** The column the linked task sits in, so its state is readable without opening it. */
+  columnTitle: string | null;
+  /**
+   * The colour of that column (#725), so the row can show the state as a dot as well as a word.
+   *
+   * ⚠️ `undefined` is a real answer, not a gap: a board configured before colours existed has none,
+   * and a blocker outside this board has no column at all.
+   */
+  columnColor: string | undefined;
+  /** Set on a subtask only: whether it sits in a column the board calls terminal. */
+  done: boolean;
+}
+
+/**
+ * ⚠️ **The order is a DECISION, not an accident.** Subtasks, blockers and references stand mixed in
+ * one list, and a list whose order nobody can name reorders itself on every load. The key is, in
+ * this order:
+ *
+ * 1. **by kind** — subtasks, then what this task waits for, then what waits for it. Subtasks first
+ *    because they carry the progress; what waits on this one last, because it says nothing about
+ *    whether this task itself can move.
+ * 2. **by the board's own position** within a kind, so the list reads in the same order as the
+ *    column it came from.
+ * 3. **by title**, only to break a tie — two cards may share a position after a filtered read.
+ */
+const kindOrder: Record<LinkKind, number> = {
+  subtask: 0,
+  blocker: 1,
+  blocked: 2,
+};
+
+export function linksOf(task: BoardTask, columns: ColumnWithCards[]): TaskLink[] {
+  const cards = columns.flatMap((entry) =>
+    entry.cards.map((card) => ({ card, column: entry.column })),
+  );
+  const at = (id: string | null) =>
+    id === null ? undefined : cards.find((entry) => entry.card.id === id);
+  const position = (id: string) => at(id)?.card.position ?? Number.POSITIVE_INFINITY;
+
+  const links: TaskLink[] = [];
+
+  for (const { card, column } of cards) {
+    if (card.parentTaskId === task.id) {
+      links.push({
+        kind: "subtask",
+        id: card.id,
+        title: card.title,
+        columnTitle: column.title,
+        columnColor: column.color,
+        done: column.terminal,
+      });
+    }
+    // ⚠️ The other direction too. `dependsOn` is stored on the waiting card, so a task only learns
+    // what waits for IT by looking at every card — and that is exactly what somebody opening a
+    // blocker wants to know before they move it.
+    if (card.dependsOn === task.id && card.id !== task.id) {
+      links.push({
+        kind: "blocked",
+        id: card.id,
+        title: card.title,
+        columnTitle: column.title,
+        columnColor: column.color,
+        done: false,
+      });
+    }
+  }
+
+  if (task.dependsOn !== null) {
+    const blocking = at(task.dependsOn);
+    links.push({
+      kind: "blocker",
+      id: task.dependsOn,
+      // ⚠️ **`null`, never the id.** A blocker may be any node, not only a card of this board, so
+      // this answer often has no title for it — and an id put on screen in place of a name is the
+      // rule in `user-name.ts` (#258) broken with a node id instead of a principal id. The view
+      // says "something outside this board"; the id says nothing at all.
+      title: blocking?.card.title ?? null,
+      columnTitle: blocking?.column.title ?? null,
+      columnColor: blocking?.column.color,
+      done: false,
+    });
+  }
+
+  return links.sort(
+    (a, b) =>
+      kindOrder[a.kind] - kindOrder[b.kind] ||
+      position(a.id) - position(b.id) ||
+      (a.title ?? "").localeCompare(b.title ?? ""),
+  );
+}

package/ui/src/board/board-task/board-task.tsx

@@ -0,0 +1,335 @@
+import type { BoardTask } from "@contract/board.ts";
+import { Lock, Plus } from "lucide-react";
+import { useState } from "react";
+import { AssigneeChip } from "@/board/board-assignee/board-assignee.tsx";
+import { BoardChip } from "@/board/board-chip/board-chip.tsx";
+import type { BoardHandle } from "@/board/board-data/board-data.types.ts";
+import { DatesChip } from "@/board/board-dates/board-dates.tsx";
+import { ColumnDot } from "@/board/board-kanban/board-kanban.tsx";
+import { StatusChip } from "@/board/board-status/board-status.tsx";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu.tsx";
+import { useI18n } from "@/i18n/i18n-context.tsx";
+import { linksOf, type TaskLink } from "./board-task.ts";
+
+/** One entry of the link list. The icon carries the kind; nothing writes the word out. */
+function LinkRow({ link, onOpen }: { link: TaskLink; onOpen(id: string): void }) {
+  const i18n = useI18n();
+  /**
+   * ⚠️ **A subtask shows its column as a DOT, not a tick** (#725). Jack's report of 2026-08-21 was
+   * that the open subtasks carry a checkmark in front of them that cannot be ticked. A checkbox
+   * promises an action this list does not have, and a card is finished by being moved, not by being
+   * ticked here.
+   *
+   * ⚠️ **The lock stays.** A blocker outside this board is not a state on a scale, it is something
+   * the reader may not open, and a colour cannot say that.
+   */
+  /**
+   * ⚠️ **The lock is about READABILITY, not about the kind**, and keying it on the kind was wrong in
+   * both directions: `blocked` is always a card of this board and always readable, while `blocker`
+   * may be any node anywhere — the one case where this answer holds no title and no column at all.
+   *
+   * `title === null` is exactly that case, and it is the same condition the row already uses one
+   * line down to say "outside this board". A dot there would be a colour for a column that does not
+   * exist.
+   */
+  const unreadable = link.title === null;
+  return (
+    <li className="flex items-center gap-2 border-b py-2 last:border-0">
+      {unreadable ? (
+        <Lock aria-hidden="true" className="size-4 shrink-0 text-destructive" />
+      ) : (
+        <ColumnDot color={link.columnColor} />
+      )}
+      <button
+        type="button"
+        onClick={() => onOpen(link.id)}
+        className="flex-1 truncate text-left text-sm outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
+      >
+        {/* ⚠️ A name or a sentence, never the id. This answer holds no title for a node outside the
+            board, and a ulid on screen is a label nobody can read (`user-name.ts`, #258). */}
+        {link.title ?? i18n.t("board.link.outside")}
+      </button>
+      {/* ⚠️ The column of the LINKED task, so its state is readable without opening it — the whole
+          reason the list carries a right-hand column at all. */}
+      {/* ⚠️ Empty rather than a word, and no template over the kind. Only a BLOCKER can be without
+          a column — it may be any node, not a card of this board — and the title beside it already
+          says "outside this board". A `board.link.${kind}` lookup could reach exactly one of the
+          three keys, and kept the other two alive in all three catalogs for nobody. */}
+      <span className="shrink-0 text-xs text-muted-foreground">{link.columnTitle ?? ""}</span>
+    </li>
+  );
+}
+
+export function BoardTaskDocument({
+  task,
+  board,
+  onOpen,
+  body,
+}: {
+  task: BoardTask;
+  board: BoardHandle;
+  onOpen(taskId: string): void;
+  /** The markdown surface, handed in so this component stays free of the editor's own loading. */
+  body: React.ReactNode;
+}) {
+  const i18n = useI18n();
+
+  const links = linksOf(task, board.columns);
+  const columns = board.columns.filter((entry) => entry.unknown !== true).map((e) => e.column);
+  const column = columns.find((entry) => entry.id === task.status);
+
+  /**
+   * ⚠️ **Refused while a write is in flight, like every other surface of this board.** Labels make
+   * it worst: the whole list is REPLACED, so two quick clicks each send the list minus their own
+   * entry, the second answer wins, and one of the two removals is silently undone — both calls
+   * succeeded, so nothing anywhere reports a problem (#651).
+   */
+  const write = (input: Partial<Omit<Parameters<BoardHandle["updateTask"]>[0], "taskId">>) => {
+    if (board.isWriting) return;
+    void board.updateTask({
+      taskId: task.id,
+      ...input,
+      idempotencyKey: crypto.randomUUID(),
+    });
+  };
+
+  return (
+    <div
+      /* ⚠️ `pt-0`, and the 16px above the chips is the TITLE ROW's own `py-4` (#724). Adding padding
+         here as well would stack two gaps into 40px, which is what it was: the chips looked like a
+         section of their own instead of the second line of one head. `gap-6` below sets the 24px
+         that separates the head from the link list, which IS a section of its own. */
+      className="flex min-h-0 flex-1 flex-col gap-6 overflow-auto px-6 pt-0 pb-6"
+      aria-busy={board.isWriting}
+    >
+      {/* ⚠️ No heading and no way back HERE. Both live in the title row above since #692: the path
+          there ends in this card's name, so a heading would print it a second time, and an arrow
+          here would be a second control meaning what the one up there already means. */}
+      {/* ⚠️ ONE line of chips, and no field labels. "Status:" in front of a chip that says "Backlog"
+          says nothing the chip does not — and it turns a quiet head into a form. */}
+      <div className="flex flex-wrap items-center gap-2">
+        <StatusChip
+          status={task.status}
+          title={column?.title ?? task.status}
+          columns={columns}
+          write={write}
+        />
+
+        {/* ⚠️ ONE chip, since #724. It was two, `from …` and `due …` — two facts where a reader
+            sees one: a card runs from a day to a day. Each half is still edited and removed on its
+            own, but inside the popover, where the control can say which half it means. */}
+        <DatesChip startDate={task.startDate} dueDate={task.dueDate} write={write} />
+
+        {task.labels.map((entry) => (
+          <BoardChip
+            key={entry}
+            label={entry}
+            tone="inverted"
+            action={i18n.t("board.removeLabel")}
+            onClick={() => write({ labels: task.labels.filter((keep) => keep !== entry) })}
+          />
+        ))}
+
+        {/* ⚠️ **The last VALUE, and the plus comes after it** (#750, Jack's decision 2026-08-22). It
+            is the only round element in the row; standing between the chips it breaks the line. But
+            the plus is not a value, it is the control that adds one, and a control belongs behind
+            everything it can add to.
+
+            ⚠️ Drawn even when nobody has the card: an empty circle is the one control on the row
+            that says the card COULD be given to somebody, which is precisely what an unowned card
+            needs (#724). */}
+        <AssigneeChip
+          id={task.assigneeId}
+          boardId={board.boardId}
+          onPick={(assigneeId) => write({ assigneeId })}
+        />
+
+        <Adder task={task} board={board} write={write} />
+      </div>
+
+      {/* ⚠️ ONE list, not three blocks: the icon carries the kind. And it exists only when there is
+          something in it. An empty section with a heading and a hint tells the reader that something
+          is missing; nothing at all tells them there is nothing, which is the truth (#692). */}
+      {links.length === 0 ? null : (
+        <section aria-label={i18n.t("board.links")} className="flex flex-col gap-1">
+          {/* ⚠️ Secondary, and the counter is gone (#724). The heading is a label for the list
+              under it, not a section title competing with the card's name; and "0 of 2 done" was a
+              number nobody acts on — the rows themselves say which are done, and they say it
+              without arithmetic. */}
+          <h2 className="text-xs text-muted-foreground">{i18n.t("board.links")}</h2>
+          <ul className="flex flex-col">
+            {links.map((link) => (
+              <LinkRow key={`${link.kind}:${link.id}`} link={link} onOpen={onOpen} />
+            ))}
+          </ul>
+        </section>
+      )}
+
+      {/* The markdown text is the largest element of the page — everything above is the quiet part.
+          ⚠️ The slot is not decoration: a test that asks whether the BODY drew something has to be
+          able to say which part of the card it means. Unscoped, the same loading line elsewhere on
+          the card answers for it, and the assurance goes hollow without anybody touching it. */}
+      <div data-slot="task-body" className="min-h-0 flex-1">
+        {body}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * ⚠️ **ONE `+ Verlinkung`, and the kind is chosen afterwards** — not two buttons labelled "subtask"
+ * and "waits for". That is `#371`: the reader decides WHAT they are linking once they know which
+ * card they mean, not before.
+ */
+
+/**
+ * What the card can still be given. The order matches the chips it produces.
+ *
+ * ⚠️ **No `assignee` here, and that is a gap rather than a decision.** Setting one needs a person to
+ * pick from, and this application can only ever DISPLAY principals it already sees in a grant: there
+ * is no list to choose from anywhere in the data provider. An entry that opens nothing is worse than
+ * a missing one, because it looks like the feature is there (`#700`).
+ */
+// ⚠️ **No `assignee` here** (#750). It stood first once, back when the circle was drawn only for
+// somebody and an unowned card had nothing to press. Since #724 the circle is always there and opens
+// the same picker, so an entry here would be a second way to the same thing, two lines apart — and
+// the one somebody finds first would depend on where they happened to look.
+const addable = ["label", "start", "due"] as const;
+const linkable = ["subtask", "blocker"] as const;
+type Addable = (typeof addable)[number] | (typeof linkable)[number];
+
+/**
+ * ⚠️ **ONE plus for everything the card can carry**, and the kind is chosen afterwards. Two
+ * controls, one for fields and one for links, asked the reader to know which of the two a thing was
+ * before they could add it, and that is a question about our data model, not about their work.
+ */
+function Adder({
+  task,
+  board,
+  write,
+}: {
+  task: BoardTask;
+  board: BoardHandle;
+  write(input: Partial<Omit<Parameters<BoardHandle["updateTask"]>[0], "taskId">>): void;
+}) {
+  const i18n = useI18n();
+  const [kind, setKind] = useState<Addable | null>(null);
+  const [draft, setDraft] = useState("");
+  const close = () => {
+    setKind(null);
+    setDraft("");
+  };
+
+  const candidates = board.columns
+    .flatMap((entry) => entry.cards)
+    .filter((card) => card.id !== task.id && card.parentTaskId !== task.id);
+
+  // ⚠️ The picker is not an `<input>`, so it cannot ride the `draft` path below. It gets its own
+  // branch rather than a special case inside `commit`, because a "value" that is picked from a
+  // remote list has nothing in common with one that is typed.
+  const commit = () => {
+    const value = draft.trim();
+    if (value.length === 0 || board.isWriting) return close();
+    if (kind === "label") {
+      // ⚠️ Tags are REPLACED, not merged, so the whole list travels, and a duplicate would be
+      // written as one more entry rather than refused.
+      if (!task.labels.includes(value)) write({ labels: [...task.labels, value] });
+    }
+    if (kind === "start") write({ startDate: `${value}T00:00:00.000Z` });
+    if (kind === "due") write({ dueDate: `${value}T00:00:00.000Z` });
+    if (kind === "subtask") {
+      void board
+        .createTask({
+          title: value,
+          // A subtask starts in the same column as the task it belongs to: the first column would
+          // claim work was reset that never started.
+          status: task.status,
+          parentTaskId: task.id,
+          assigneeId: null,
+          labels: [],
+          startDate: null,
+          dueDate: null,
+          dependsOn: null,
+          idempotencyKey: crypto.randomUUID(),
+        })
+        .then(close);
+      return;
+    }
+    close();
+  };
+
+  return (
+    <>
+      <DropdownMenu>
+        {/* ⚠️ No border, square, and the icon at full strength (#724). A bordered pill here read
+            as one more chip, so the row looked like it carried a value called "+". Without the
+            border it is what it is: a control, quiet until the pointer is on it. */}
+        <DropdownMenuTrigger
+          aria-label={i18n.t("board.add")}
+          className="flex size-6 shrink-0 items-center justify-center rounded-md text-foreground outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+        >
+          <Plus aria-hidden="true" className="size-4" />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          {addable.map((entry) => (
+            <DropdownMenuItem key={entry} onSelect={() => setKind(entry)}>
+              {i18n.t(`board.add.${entry}`)}
+            </DropdownMenuItem>
+          ))}
+          {linkable.map((entry) => (
+            <DropdownMenuItem key={entry} onSelect={() => setKind(entry)}>
+              {i18n.t(`board.link.${entry}`)}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      {kind === null || kind === "blocker" ? null : (
+        <input
+          // biome-ignore lint/a11y/noAutofocus: it opens on a deliberate click, never on load
+          autoFocus
+          type={kind === "start" || kind === "due" ? "date" : "text"}
+          value={draft}
+          aria-label={i18n.t(kind === "subtask" ? "board.link.subtask" : `board.add.${kind}`)}
+          onChange={(event) => setDraft(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Escape") close();
+            if (event.key !== "Enter") return;
+            event.preventDefault();
+            commit();
+          }}
+          className="w-36 rounded-full border bg-background px-2.5 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        />
+      )}
+
+      {kind !== "blocker" ? null : (
+        <DropdownMenu open onOpenChange={(next) => !next && close()}>
+          <DropdownMenuTrigger
+            aria-label={i18n.t("board.link.blocker")}
+            className="rounded-full border px-2.5 py-0.5 text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          >
+            {i18n.t("board.link.blocker")}
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start">
+            {candidates.map((card) => (
+              <DropdownMenuItem
+                key={card.id}
+                onSelect={() => {
+                  close();
+                  write({ dependsOn: card.id });
+                }}
+              >
+                {card.title}
+              </DropdownMenuItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,66 @@
+import type { Node } from "@contract/node.ts";
+import { useQuery } from "@tanstack/react-query";
+import { crumbsOf } from "@/board/board-crumbs/board-crumbs.ts";
+import { BoardCrumbs } from "@/board/board-crumbs/board-crumbs.tsx";
+import { useBoard } from "@/board/board-data/board-data.ts";
+import { useOpenTask } from "@/board/board-open-task/board-open-task.ts";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { TitleRow } from "@/title-row/title-row.tsx";
+
+/**
+ * The one line above a board, and above a card opened on it.
+ *
+ * ⚠️ **The SAME `TitleRow`, with the path in place of the name.** A second header component for the
+ * open card would look identical today and drift tomorrow: the order of the right-hand group, the
+ * shadow on scroll and the slots are decided in exactly one place, and this keeps it that way (#53).
+ *
+ * ⚠️ **The menu then belongs to the CARD, not to the board.** Rename, move and archive act on what
+ * the reader is looking at. That is also where renaming a card happens, since the path carries its
+ * name and there is no heading to edit (#692).
+ */
+export function BoardTitleRow({ node }: { node: Node }) {
+  const { openId, open } = useOpenTask();
+  const board = useBoard(node.id);
+  const { data } = useIntelRouterContext();
+
+  // ⚠️ The same key the open card's body already uses, so this costs no second request.
+  const task = useQuery({
+    queryKey: ["node", openId],
+    queryFn: () => data.getNode(openId ?? ""),
+    enabled: openId !== null,
+  });
+
+  const tasks = board.columns.flatMap((entry) => entry.cards);
+  const openTask = tasks.find((card) => card.id === openId);
+
+  // ⚠️ Until the card is in the ANSWER, the board's own row stands. Drawing a path around a name
+  // nobody knows yet would flicker a wrong one into place for a moment.
+  //
+  // ⚠️ The card's NODE is a different wait, and it must not gate the path: it is only needed for the
+  // menu, and holding the whole row for it would show the board's name first and swap it a moment
+  // later — two different headers in sequence for one navigation.
+  if (openId === null || openTask === undefined) {
+    return <TitleRow title={node.title} target={{ type: "node", node }} />;
+  }
+
+  const crumbs = <BoardCrumbs crumbs={crumbsOf(openId, board.title, tasks)} onOpen={open} />;
+
+  /**
+   * ⚠️ **No menu at all while the card's node is missing**, rather than the board's. Rename, move
+   * and archive would otherwise act on the BOARD, and `archive` fires without asking: a control
+   * that is not there yet costs a moment, one that acts on the wrong thing costs the thing.
+   *
+   * ⚠️ **Missing covers two states, and deliberately treats them the same**: the read is still on
+   * its way, or it was refused. Neither gives this row a card to act on, and telling them apart
+   * here would only decide WHICH wrong menu to draw.
+   */
+  if (task.data === undefined) return <TitleRow title={openTask.title} crumbs={crumbs} />;
+
+  return (
+    <TitleRow
+      title={openTask.title}
+      crumbs={crumbs}
+      target={{ type: "node", node: task.data.node }}
+    />
+  );
+}

package/ui/src/branding/branding.tsx

@@ -0,0 +1,17 @@
+import { BrainCircuit } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { customLogoUrl } from "./custom-logo.ts";
+
+export function AppLogo({ className }: { className?: string }) {
+  if (customLogoUrl !== null) return <img src={customLogoUrl} alt="" className={className} />;
+  return (
+    <span
+      className={cn(
+        "flex aspect-square items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground",
+        className,
+      )}
+    >
+      <BrainCircuit aria-hidden="true" className="size-5" />
+    </span>
+  );
+}

package/ui/src/branding/custom-logo.ts

@@ -0,0 +1 @@
+export const customLogoUrl: string | null = null;

package/ui/src/branding/favicon.default.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <title>Intel</title>
+  <rect width="32" height="32" rx="8" fill="oklch(0.205 0 0)"/>
+  <path d="M10 10h12v12H10zM7 14h3m12 0h3M14 7v3m4-3v3M14 22v3m4-3v3" fill="none" stroke="oklch(0.985 0 0)" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/ui/src/branding/favicon.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <title>Intel</title>
+  <rect width="32" height="32" rx="8" fill="oklch(0.205 0 0)"/>
+  <path d="M10 10h12v12H10zM7 14h3m12 0h3M14 7v3m4-3v3M14 22v3m4-3v3" fill="none" stroke="oklch(0.985 0 0)" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/ui/src/components/ui/avatar.tsx

@@ -0,0 +1,39 @@
+import { Avatar as AvatarPrimitive } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn("relative flex size-8 shrink-0 overflow-hidden rounded-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn("flex size-full items-center justify-center rounded-full bg-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarFallback, AvatarImage };

package/ui/src/components/ui/button.tsx

@@ -0,0 +1,64 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        // The registry hard-codes the destructive label colour. `--destructive-foreground` exists
+        // and a customer theme has to be able to move it, so the token replaces the fixed colour.
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/ui/src/components/ui/collapsible.tsx

@@ -0,0 +1,20 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import type * as React from "react";
+
+function Collapsible({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return <CollapsiblePrimitive.CollapsibleTrigger data-slot="collapsible-trigger" {...props} />;
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return <CollapsiblePrimitive.CollapsibleContent data-slot="collapsible-content" {...props} />;
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };