@anchrd/intel-ui 0.4.0 → 0.5.0

package/src/app/app.tsx

@@ -36,7 +36,17 @@ export function App() {
   const [width, setWidth] = useState(stored.width);
 
   return (
+    // ⚠️ `h-svh` is what keeps the box inside the screen. The registry's wrapper only carries
+    // `min-h-svh`, so its height follows its content — and the inset, an `inset` variant with a
+    // margin all round, then stands 16px taller than the viewport at best and grows with a long
+    // document at worst. Both times the lower border and its two rounded corners end up under the
+    // fold and the whole page scrolls. With a definite height the inset stretches to
+    // `100svh - 16px`, and the overflow below belongs to the container around the outlet, which
+    // already carries `min-h-0 overflow-auto` for exactly that. Set here rather than in
+    // `components/ui/sidebar.tsx`: that is registry code and an edit in it is silently gone at the
+    // next sync.
     <SidebarProvider
+      className="h-svh"
       open={open}
       onOpenChange={(next) => {
         setOpen(next);
@@ -55,7 +65,12 @@ export function App() {
           `min-width: auto`, so it never shrinks below its content's min-content width. One wide
           child (a flow canvas, a table of raw JSON) would widen the page instead of scrolling
           inside its own container. Learned in gate, GATE-76 D. */}
-      <SidebarInset className="min-w-0 md:border">
+      {/* `overflow-hidden` is the second half of the rounding: the box is rounded but nothing
+          clipped its children, so an opaque panel inside it — the flow editor's inspector carries
+          `bg-card` — painted its own square corner over the rounded one. Invisible in the light
+          theme, where card and background are the same white, and plain to see in the dark one.
+          Scrolling is unaffected: the container around the outlet below owns it. */}
+      <SidebarInset className="min-w-0 overflow-hidden md:border">
         <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
           <SidebarTrigger className="-ml-1" aria-label={i18n.t("shell.toggleSidebar")} />
           <Separator orientation="vertical" className="mr-2 data-[orientation=vertical]:h-4" />
@@ -76,7 +91,7 @@ export function App() {
               ) : null}
             </BreadcrumbList>
           </Breadcrumb>
-          {/* The bar for area-owned actions. A screen renders into it through `HeaderActions`;
+          {/* The bar for area-owned actions. A screen renders into it through `ActionSlot`;
               search is the shell's own, because it has to open from every screen alike and belongs
               to none of them. It stays first, so a screen's actions line up to its right. */}
           <div data-slot="header-actions" className="ml-auto flex items-center gap-2">

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

@@ -40,7 +40,8 @@ export function SidebarResizeHandle({
         "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.
+        // Collapsed there is no sidebar left to drag. The shell already unmounts the whole panel
+        // then; this keeps the handle from reappearing should it ever be mounted collapsed.
         "group-data-[state=collapsed]:hidden",
       )}
       onPointerDown={(event) => {

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

@@ -1,15 +1,31 @@
 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 { 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: 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.
+/**
+ * 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({
@@ -18,59 +34,70 @@ export function UserFooter() {
   });
 
   const user = session.data ?? null;
-  const primary = user ? (user.name ?? user.email) : 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>
-        <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"))}
+        <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>
-            {secondary ? (
-              <span className="truncate text-xs text-muted-foreground">{secondary}</span>
-            ) : null}
-          </span>
-        </div>
+            <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 text-sm text-destructive">
+          <p role="alert" className="px-2 py-1 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/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/dropdown-menu.tsx

@@ -1,3 +1,4 @@
+import { Check, ChevronRight } from "lucide-react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import type * as React from "react";
 import { cn } from "@/lib/utils";
@@ -61,6 +62,78 @@ function DropdownMenuItem({
   );
 }
 
+function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      className={cn(
+        "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRight aria-hidden="true" className="ml-auto" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.SubContent
+        data-slot="dropdown-menu-sub-content"
+        className={cn(
+          "z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+          className,
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return <DropdownMenuPrimitive.RadioGroup data-slot="dropdown-menu-radio-group" {...props} />;
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <Check aria-hidden="true" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+}
+
 function DropdownMenuSeparator({
   className,
   ...props
@@ -79,6 +152,11 @@ export {
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
   DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 };