@anchrd/intel-ui 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anchrd/intel-ui",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "license": "UNLICENSED",
   "repository": {

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

@@ -11,6 +11,7 @@ import {
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
+  useSidebar,
 } from "@/components/ui/sidebar";
 import { useIntelRouterContext } from "@/router/router-context.ts";
 
@@ -25,32 +26,46 @@ export function AppSidebar({
   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="icon" variant="inset">
-      <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 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>
   );
 }