@anchrd/intel-ui 0.3.0 → 0.5.0

package/components.json

@@ -3,7 +3,13 @@
   "style": "new-york",
   "rsc": false,
   "tsx": true,
-  "tailwind": { "css": "src/styles.css", "baseColor": "neutral", "cssVariables": true },
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
   "aliases": {
     "components": "@/components",
     "utils": "@/lib/utils",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {
@@ -40,9 +40,11 @@
     "@xyflow/react": "^12.11.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "colorjs.io": "^0.7.1",
     "graphology": "^0.26.0",
     "lucide-react": "^1.25.0",
+    "radix-ui": "^1.6.7",
     "react": "^19.2.0",
     "react-aria-components": "^1.19.0",
     "react-dom": "^19.2.0",

package/src/app/action-slot/action-slot.tsx

@@ -0,0 +1,23 @@
+import type * as React from "react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+
+// A bar owns a place for actions, and whoever owns the action renders into it from wherever its
+// state happens to live. Two such places exist: `header-actions` in the shell, beside the
+// breadcrumb, for what belongs to the area; and `title-actions` in the title line of an open
+// document, for what belongs to that one document (#24).
+//
+// ⚠️ The slot lives above the component that fills it, so it is not in the document while that
+// component first renders. Looking it up in an effect costs one extra render and is the only order
+// that works; reading it during render finds nothing on the first paint.
+export function ActionSlot({
+  name = "header-actions",
+  children,
+}: {
+  name?: string;
+  children: React.ReactNode;
+}) {
+  const [slot, setSlot] = useState<Element | null>(null);
+  useEffect(() => setSlot(document.querySelector(`[data-slot="${name}"]`)), [name]);
+  return slot ? createPortal(children, slot) : null;
+}

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

@@ -0,0 +1,71 @@
+import { Link } from "@tanstack/react-router";
+import { AppTree } from "@/app/app-tree/app-tree.tsx";
+import { SidebarResizeHandle } from "@/app/sidebar-resize-handle/sidebar-resize-handle.tsx";
+import { UserFooter } from "@/app/user-footer/user-footer.tsx";
+import { AppLogo } from "@/branding/branding.tsx";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar";
+import { useIntelRouterContext } from "@/router/router-context.ts";
+
+// One tree is the whole navigation: documents and flows side by side in the folder they share, with
+// no Knowledge or Flows entry above them (ADR-0004). Tools stay below, next to the user, because
+// they come live from the portal and have no tree.
+export function AppSidebar({
+  width,
+  onWidthChange,
+}: {
+  width: number;
+  onWidthChange(width: number): void;
+}) {
+  const { i18n } = useIntelRouterContext();
+  // `offcanvas` rather than `icon`: the icon rail is the mode for a list of equal entries with one
+  // icon each, and a tree says what it says through indentation, disclosure arrows and nesting —
+  // none of which survives 48px. Collapsing exists to free the canvas, so the sidebar goes.
+  //
+  // ⚠️ Offcanvas only moves the panel out of sight; it stays in the document and keeps its focus
+  // order, so a keyboard would still walk through an invisible tree. The shell therefore unmounts
+  // the panel's content itself — the registry file is off limits. On a narrow screen the sidebar is
+  // an overlay driven by `openMobile`, and `state` says nothing about it, hence the `isMobile` arm.
+  const { state, isMobile } = useSidebar();
+  const showPanel = isMobile || state === "expanded";
+
+  return (
+    <Sidebar collapsible="offcanvas" variant="inset">
+      {!showPanel ? null : (
+        <>
+          <SidebarHeader>
+            <SidebarMenu>
+              <SidebarMenuItem>
+                <SidebarMenuButton size="lg" asChild>
+                  <Link to="/knowledge">
+                    <AppLogo className="size-8" />
+                    <span className="font-semibold">{i18n.t("app.name")}</span>
+                  </Link>
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            </SidebarMenu>
+          </SidebarHeader>
+          <SidebarContent aria-label={i18n.t("nav.primary")}>
+            <AppTree />
+          </SidebarContent>
+          <SidebarFooter>
+            <UserFooter />
+          </SidebarFooter>
+          <SidebarResizeHandle
+            width={width}
+            label={i18n.t("shell.resizeSidebar")}
+            onWidthChange={onWidthChange}
+          />
+        </>
+      )}
+    </Sidebar>
+  );
+}