@anchrd/intel-ui 0.3.0 → 0.5.0

package/src/app/tree-move/tree-move.tsx

@@ -0,0 +1,197 @@
+import { useQuery } from "@tanstack/react-query";
+import { ChevronLeft, Folder } from "lucide-react";
+import { useState } from "react";
+import type { TreeEntry } from "@/data/intel-data-provider/intel-data-provider.types.ts";
+import { Modal } from "@/modal/modal.tsx";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+// Where a row would land. `null` is the root of the shared tree; the title is carried along because
+// the dialog names the destination and the row that supplied it is not always still on screen.
+export type MoveDestination = { id: string | null; title: string };
+
+export type MoveVerdict = "ok" | "self" | "descendant" | "same-place";
+
+// The parent a row is filed under. Knowledge and Flows keep their own record (ADR-0004), so the
+// answer is read from whichever one this row is, never from a merged shape.
+export function parentOf(entry: TreeEntry): string | null {
+  return entry.type === "knowledge" ? entry.node.parentId : entry.flow.parentId;
+}
+
+/**
+ * ⚠️ The trap this ticket is built around: a node must not travel into its own descendants. The
+ * service refuses it (`move_cycle`, `knowledge.ts:421`), but a refusal that only arrives once the
+ * mouse button is already up is the one answer worse than no dragging at all — the drop has to be
+ * offered or withheld while the pointer is still moving.
+ *
+ * It costs no request. The tree already carries the ancestor path of every rendered row for its own
+ * cycle guard (`app-tree.tsx`), and "is this target inside the row I am dragging" is exactly the
+ * question that path answers: the dragged id appears above the target, or it does not.
+ */
+export function moveVerdict(input: {
+  draggedId: string;
+  draggedParentId: string | null;
+  targetId: string | null;
+  targetAncestors: ReadonlySet<string>;
+}): MoveVerdict {
+  if (input.targetId === input.draggedId) return "self";
+  if (input.targetId !== null && input.targetAncestors.has(input.draggedId)) return "descendant";
+  if (input.targetId === input.draggedParentId) return "same-place";
+  return "ok";
+}
+
+// ⚠️ Four refusals, four sentences. The service tells them apart by `code`
+// (`knowledge.ts:331/335/338/361`, `flows.ts:205–217/752`), and so does this: one message for all
+// of them would leave the reader guessing which of "you may not write there", "that is not a
+// folder", "that would be a loop" and "somebody else was faster" they have just hit.
+export function moveErrorKey(error: unknown): string {
+  const code =
+    typeof error === "object" && error !== null && "code" in error
+      ? String((error as { code: unknown }).code)
+      : null;
+  switch (code) {
+    case "knowledge_forbidden":
+    case "flow_edit_forbidden":
+      return "tree.move.failed.forbidden";
+    case "parent_not_folder":
+      return "tree.move.failed.notFolder";
+    case "move_cycle":
+      return "tree.move.failed.cycle";
+    case "update_conflict":
+    case "flow_update_conflict":
+      return "tree.move.failed.conflict";
+    case "flow_parent_not_found":
+      return "tree.move.failed.gone";
+    default:
+      return "tree.move.failed.other";
+  }
+}
+
+/**
+ * The move, named before it happens.
+ *
+ * ⚠️ Since #16 a share hangs on the folder and reaches everything beneath it (`db-grants.ts`,
+ * `nodeVerbQuery`), so moving a document is a change of who may read it — without the word "share"
+ * appearing anywhere. That is why every move is confirmed rather than performed on drop.
+ *
+ * What this deliberately does not do is name the people. `listKnowledgeGrants` answers with the
+ * grants sitting on that one folder, needs `share` on it (`knowledge.ts:459`), and says nothing
+ * about the grants above it that reach down. A list built from that would be short of exactly the
+ * entries that matter and would read as complete — "nobody is on this folder" while an ancestor
+ * opens it to the whole organization. Naming the mechanism truthfully beats enumerating it wrongly;
+ * an effective-audience answer is the server's to give, and no endpoint offers one today.
+ */
+export function MoveDialog({
+  entry,
+  initial,
+  close,
+  submit,
+}: {
+  entry: TreeEntry;
+  initial: MoveDestination | null;
+  close(): void;
+  submit(destination: MoveDestination): void;
+}) {
+  const { data, i18n } = useIntelRouterContext();
+  const [destination, setDestination] = useState<MoveDestination | null>(initial);
+  // The browsed path, root first. It is also the descendant guard for the keyboard route: the row
+  // being moved is never offered, so its subtree can never be entered in the first place.
+  const [path, setPath] = useState<MoveDestination[]>([]);
+  const here: MoveDestination = path.at(-1) ?? { id: null, title: i18n.t("tree.move.root") };
+  const level = useQuery({
+    queryKey: ["tree", here.id],
+    queryFn: async () => await data.listTreeChildren(here.id),
+    enabled: destination === null,
+  });
+  const folders = (level.data ?? []).filter(
+    (child) => child.kind === "folder" && child.id !== entry.id,
+  );
+  const verdict = moveVerdict({
+    draggedId: entry.id,
+    draggedParentId: parentOf(entry),
+    targetId: here.id,
+    targetAncestors: new Set(path.map((step) => step.id).filter((id) => id !== null)),
+  });
+
+  return (
+    <Modal title={i18n.t("tree.move.title", { title: entry.title })} close={close}>
+      {destination === null ? (
+        <div className="space-y-3">
+          <p className="text-sm text-muted-foreground">{i18n.t("tree.move.pick")}</p>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              disabled={path.length === 0}
+              onClick={() => setPath((current) => current.slice(0, -1))}
+              aria-label={i18n.t("tree.move.up")}
+              className="rounded-md border p-1 outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+            >
+              <ChevronLeft aria-hidden="true" className="size-4" />
+            </button>
+            <p className="min-w-0 flex-1 truncate text-sm font-medium">{here.title}</p>
+          </div>
+          <ul className="max-h-56 space-y-1 overflow-y-auto">
+            {level.isPending ? (
+              <li className="px-2 py-1.5 text-sm text-muted-foreground">
+                {i18n.t("common.loading")}
+              </li>
+            ) : folders.length === 0 ? (
+              <li className="px-2 py-1.5 text-sm text-muted-foreground">
+                {i18n.t("tree.move.noFolders")}
+              </li>
+            ) : (
+              folders.map((folder) => (
+                <li key={folder.id}>
+                  <button
+                    type="button"
+                    onClick={() => setPath((current) => [...current, folder])}
+                    aria-label={i18n.t("tree.move.open", { title: folder.title })}
+                    className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+                  >
+                    <Folder aria-hidden="true" className="size-4 shrink-0" />
+                    <span className="truncate">{folder.title}</span>
+                  </button>
+                </li>
+              ))
+            )}
+          </ul>
+          <button
+            type="button"
+            disabled={verdict !== "ok"}
+            onClick={() => setDestination(here)}
+            className="w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50"
+          >
+            {i18n.t("tree.move.here", { title: here.title })}
+          </button>
+          {verdict === "same-place" ? (
+            <p className="text-sm text-muted-foreground">{i18n.t("tree.move.alreadyThere")}</p>
+          ) : null}
+        </div>
+      ) : (
+        <div className="space-y-4">
+          <p className="text-sm">{i18n.t("tree.move.destination", { title: destination.title })}</p>
+          {/* Not a footnote: this is the only place the change of audience is stated, and it is
+              stated before the move, not in the audit log afterwards. */}
+          <p role="note" className="rounded-md border border-destructive/50 p-3 text-sm">
+            {i18n.t("tree.move.sharingWarning", { title: destination.title })}
+          </p>
+          <div className="flex gap-2">
+            <button
+              type="button"
+              onClick={() => setDestination(null)}
+              className="flex-1 rounded-md border px-4 py-2 text-sm font-medium outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("tree.move.elsewhere")}
+            </button>
+            <button
+              type="button"
+              onClick={() => submit(destination)}
+              className="flex-1 rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-2 focus-visible:ring-ring"
+            >
+              {i18n.t("tree.move.confirm")}
+            </button>
+          </div>
+        </div>
+      )}
+    </Modal>
+  );
+}

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

@@ -0,0 +1,103 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { ChevronsUpDown, LogOut, User, Wrench } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { SidebarMenu, 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, behind the person (#24).
+ *
+ * The three rows this used to be — the tool catalogue, the name, the sign-out — spent three lines of
+ * sidebar on things nobody opens twice a day. The name and the address stay on screen, because they
+ * are the answer to "who am I signed in as", which is a reading and not an action; the two actions
+ * move behind them.
+ *
+ * The catalogue itself is a live portal query with the signed-in user's own token (ADR-0003), so
+ * what it shows depends on who is asking.
+ */
+export function UserFooter() {
+  const { data, i18n } = useIntelRouterContext();
+  const navigate = useNavigate();
+  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)
+    : session.isPending
+      ? i18n.t("common.loading")
+      : i18n.t("shell.userUnavailable");
+  const secondary = user?.name ? user.email : null;
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            aria-label={i18n.t("shell.userMenu", { name: primary })}
+            data-slot="signed-in-user"
+            data-active={pathname === "/tools"}
+            className="flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 focus-visible:ring-sidebar-ring data-[active=true]:bg-sidebar-accent data-[state=open]:bg-sidebar-accent"
+          >
+            <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>
+            {/* Read out in both states; sighted users see it in neither. It is what tells a screen
+                reader that the name below is a name and not a heading. */}
+            <span className="sr-only">{i18n.t("shell.signedInUser")}</span>
+            <span className="grid min-w-0 flex-1 leading-tight">
+              <span className="truncate font-medium">{primary}</span>
+              {secondary ? (
+                <span className="truncate text-xs text-muted-foreground">{secondary}</span>
+              ) : null}
+            </span>
+            <ChevronsUpDown aria-hidden="true" className="ml-auto size-4 shrink-0" />
+          </DropdownMenuTrigger>
+          {/* Upwards and as wide as its trigger: it opens from the bottom edge of the screen, and
+              a menu that has to be hunted for beside its button is a menu that was not found. */}
+          <DropdownMenuContent
+            side="top"
+            align="start"
+            className="w-(--radix-dropdown-menu-trigger-width) min-w-56"
+          >
+            <DropdownMenuItem onSelect={() => void navigate({ to: "/tools" })}>
+              <Wrench aria-hidden="true" />
+              {i18n.t("nav.tools")}
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem
+              disabled={logout.isPending}
+              onSelect={() => logout.mutate()}
+              className="text-destructive focus:text-destructive"
+            >
+              <LogOut aria-hidden="true" />
+              {i18n.t("auth.signOut")}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </SidebarMenuItem>
+      {/* ⚠️ Outside the menu on purpose. Choosing sign-out closes the popup, so a refusal rendered
+          inside it would be gone in the same frame it was written — the one message that must
+          survive is the one saying you are still signed in. */}
+      {logout.isError ? (
+        <SidebarMenuItem>
+          <p role="alert" className="px-2 py-1 text-sm text-destructive">
+            {i18n.t("auth.signOutFailed")}
+          </p>
+        </SidebarMenuItem>
+      ) : null}
+    </SidebarMenu>
+  );
+}

package/src/app/view-toggle/view-toggle.tsx

@@ -0,0 +1,77 @@
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { History, Network, PencilRuler } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+import { type IntelView, viewFrom } from "@/router/selection-search.ts";
+
+const icons = { editor: PencilRuler, graph: Network, runs: History } as const;
+const labels = {
+  editor: "view.showEditor",
+  graph: "view.showGraph",
+  runs: "view.showRuns",
+} as const;
+
+/**
+ * The switch between the ways the level the sidebar has selected can be shown: editor ↔ graph
+ * everywhere (#19), and editor ↔ graph ↔ runs on a flow (#35).
+ *
+ * **Head, not row — the decision and its reason.** The switch changes how the *current view* is
+ * shown, and the current view is what the header already names in its breadcrumb; a state of the
+ * view belongs beside its name. In the tree row it would have to live inside the row's overflow
+ * menu (#24), and switching back would mean opening that menu again — a toggle that costs two
+ * clicks in one direction and two in the other is no longer a toggle. The objection the ticket
+ * raises against the header is answered by not rendering the switch where there is no graph: a
+ * document, an attachment and the tools screen never mount it, so it cannot stand there with
+ * nothing to point at.
+ *
+ * **Icon, no text.** The visible label is gone and nothing else: the accessible name is on the
+ * button and repeated as a tooltip, so the header stops growing with every new view while a screen
+ * reader still hears the whole sentence.
+ *
+ * ⚠️ It offers the views you are *not* in, one button each, rather than cycling through them. With
+ * two views that is the single toggle #19 decided on, unchanged. With three, a cycle would put the
+ * runs two clicks away from the graph and make the button's meaning depend on where you already
+ * are — every destination stays one click, and every button keeps one name.
+ */
+export function ViewToggle({ views = ["editor", "graph"] }: { views?: readonly IntelView[] }) {
+  const { i18n } = useIntelRouterContext();
+  const navigate = useNavigate();
+  const state = useRouterState({
+    select: (current) => ({
+      pathname: current.location.pathname,
+      search: current.location.search as Record<string, unknown>,
+      view: viewFrom(current.location.search),
+    }),
+  });
+  return (
+    // Its own provider: the shell supplies one, but these buttons are portalled into the header
+    // from a screen and have to keep working wherever they are mounted.
+    <TooltipProvider delayDuration={300}>
+      {views
+        .filter((view) => view !== state.view)
+        .map((view) => {
+          const label = i18n.t(labels[view]);
+          const Icon = icons[view];
+          return (
+            <Tooltip key={view}>
+              <TooltipTrigger
+                type="button"
+                aria-label={label}
+                onClick={() => {
+                  const { view: _view, ...rest } = state.search;
+                  void navigate({
+                    to: state.pathname,
+                    search: view === "editor" ? rest : { ...rest, view },
+                  });
+                }}
+                className="inline-flex size-8 items-center justify-center rounded-md border bg-background outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring"
+              >
+                <Icon aria-hidden="true" className="size-4" />
+              </TooltipTrigger>
+              <TooltipContent>{label}</TooltipContent>
+            </Tooltip>
+          );
+        })}
+    </TooltipProvider>
+  );
+}

package/src/blocknote-view/blocknote-view.tsx

@@ -1,13 +1,30 @@
+import { type DefaultReactSuggestionItem, getDefaultReactSlashMenuItems } from "@blocknote/react";
 import { BlockNoteView as LibraryBlockNoteView } from "@blocknote/shadcn";
-import type { ComponentType } from "react";
+import type { ComponentType, ReactNode } from "react";
 
 // BlockNote 0.52's generic view declaration conflicts with exactOptionalPropertyTypes even though
 // useCreateBlockNote returns its matching default editor. Keep that upstream type seam in one place.
 const CompatibleBlockNoteView = LibraryBlockNoteView as unknown as ComponentType<{
   editor: unknown;
   onChange(): void;
+  children?: ReactNode;
 }>;
 
-export function BlockNoteView(props: { editor: unknown; onChange(): void }) {
+// `children` is how BlockNote mounts its own controllers — the slash menu among them — inside the
+// editor's context. It travels through this seam rather than around it, so there is still one place
+// that knows about the library's types.
+export function BlockNoteView(props: { editor: unknown; onChange(): void; children?: ReactNode }) {
   return <CompatibleBlockNoteView {...props} />;
 }
+
+// The same seam once more: the parameter type of BlockNote's own slash-menu helper does not accept
+// an editor built from a schema of ours, because `heading`'s optional `isToggleable` prop fails the
+// library's own `PropSchema` constraint under `exactOptionalPropertyTypes`. The editor is exactly
+// what the helper wants at run time — it is the declaration that cannot say so.
+const compatibleDefaultSlashMenuItems = getDefaultReactSlashMenuItems as unknown as (
+  editor: unknown,
+) => DefaultReactSuggestionItem[];
+
+export function defaultSlashMenuItems(editor: unknown): DefaultReactSuggestionItem[] {
+  return compatibleDefaultSlashMenuItems(editor);
+}

package/src/branding/favicon.default.svg

@@ -1,5 +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.45 0.17 265)"/>
-  <path d="M10 10h12v12H10zM7 14h3m12 0h3M14 7v3m4-3v3M14 22v3m4-3v3" fill="none" stroke="oklch(0.98 0.01 265)" stroke-width="2" stroke-linecap="round"/>
+  <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/src/branding/favicon.svg

@@ -1,5 +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.45 0.17 265)"/>
-  <path d="M10 10h12v12H10zM7 14h3m12 0h3M14 7v3m4-3v3M14 22v3m4-3v3" fill="none" stroke="oklch(0.98 0.01 265)" stroke-width="2" stroke-linecap="round"/>
+  <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/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,
+};

package/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/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 };