@exxatdesignux/ui 0.2.15 → 0.2.16

package/template/components/templates/dedicated-search-landing-template.tsx

@@ -3,6 +3,8 @@
 import * as React from "react"
 
 import { ListPageViewFrame } from "@/components/data-views"
+import { DotPattern } from "@/components/ui/dot-pattern"
+import { cn } from "@/lib/utils"
 
 export interface DedicatedSearchLandingTemplateProps {
   /** Page title — string or rich node (e.g. styled heading). */
@@ -20,6 +22,67 @@ export interface DedicatedSearchLandingTemplateProps {
 const DEFAULT_GUTTER =
   "mx-auto flex min-h-[min(72vh,36rem)] w-full min-w-0 flex-col justify-center gap-0 px-6 py-8 sm:px-8 sm:py-10 md:px-12 md:py-12 lg:px-16"
 
+/** Feather into page white / header so the hero never reads as a hard horizontal slab. */
+const HERO_BACKDROP_MASK =
+  "[mask-image:linear-gradient(to_bottom,transparent_0%,black_5%,black_95%,transparent_100%)] [-webkit-mask-image:linear-gradient(to_bottom,transparent_0%,black_5%,black_95%,transparent_100%)]"
+
+/**
+ * Soft blurred blobs using only Ask Leo surface tints (`--leo-surface-tint-a|b` in `globals.css`).
+ */
+function DedicatedSearchLandingBackdrop() {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        "pointer-events-none absolute inset-0 -z-10 select-none overflow-hidden",
+        HERO_BACKDROP_MASK,
+      )}
+    >
+      <div
+        className="absolute -left-[20%] -top-[30%] h-[min(54vmin,27rem)] w-[min(54vmin,27rem)] rounded-full blur-[76px]"
+        style={{
+          background: "radial-gradient(circle at 42% 36%, var(--leo-surface-tint-b) 0%, transparent 68%)",
+        }}
+      />
+      <div
+        className="absolute -right-[12%] top-[2%] h-[min(46vmin,23rem)] w-[min(46vmin,23rem)] rounded-full blur-[68px]"
+        style={{
+          background: "radial-gradient(circle at 48% 48%, var(--leo-surface-tint-a) 0%, transparent 66%)",
+        }}
+      />
+      <div
+        className="absolute bottom-[-16%] left-[14%] h-[min(50vmin,25rem)] w-[min(50vmin,25rem)] rounded-full blur-[84px]"
+        style={{
+          background: "radial-gradient(circle at 44% 40%, var(--leo-surface-tint-b) 0%, transparent 70%)",
+        }}
+      />
+      <div
+        className="absolute bottom-[4%] right-[6%] h-[min(40vmin,20rem)] w-[min(40vmin,20rem)] rounded-full blur-[60px]"
+        style={{
+          background: "radial-gradient(circle at 52% 44%, var(--leo-surface-tint-a) 0%, transparent 72%)",
+        }}
+      />
+      <div
+        className="absolute left-[36%] top-[32%] h-[min(38vmin,19rem)] w-[min(38vmin,19rem)] -translate-x-1/2 rounded-full blur-[74px]"
+        style={{
+          background: "radial-gradient(circle at 50% 50%, var(--leo-surface-tint-b) 0%, transparent 68%)",
+        }}
+      />
+
+      {/* Static dot field — same primitive as `AiThinkingOverlay` (no motion here). */}
+      <DotPattern
+        width={15}
+        height={15}
+        cr={0.65}
+        className={cn(
+          "absolute inset-0 opacity-[0.34] mix-blend-multiply dark:opacity-[0.22] dark:mix-blend-soft-light",
+          "fill-[color-mix(in_oklch,var(--brand-color)_14%,var(--background))]",
+        )}
+      />
+    </div>
+  )
+}
+
 /**
  * Centered dedicated-search landing — empty `?q=` shell (hero title + composer + optional trailing).
  */
@@ -32,27 +95,30 @@ export function DedicatedSearchLandingTemplate({
   gutterClassName = DEFAULT_GUTTER,
 }: DedicatedSearchLandingTemplateProps) {
   return (
-    <ListPageViewFrame
-      maxWidthClassName={maxWidthClassName}
-      className={frameClassName}
-      gutterClassName={gutterClassName}
-    >
-      <header className="min-w-0">
-        {typeof title === "string" ? (
-          <h1
-            className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl"
-            style={{ fontFamily: "var(--font-heading)" }}
-          >
-            {title}
-          </h1>
-        ) : (
-          title
-        )}
-      </header>
+    <div className="relative isolate min-w-0 w-full overflow-hidden">
+      <DedicatedSearchLandingBackdrop />
+      <ListPageViewFrame
+        maxWidthClassName={maxWidthClassName}
+        className={cn("relative z-10", frameClassName)}
+        gutterClassName={gutterClassName}
+      >
+        <header className="min-w-0">
+          {typeof title === "string" ? (
+            <h1
+              className="text-balance text-3xl font-semibold tracking-tight text-foreground sm:text-4xl"
+              style={{ fontFamily: "var(--font-heading)" }}
+            >
+              {title}
+            </h1>
+          ) : (
+            title
+          )}
+        </header>
 
-      <div className="min-w-0 mt-6 sm:mt-8">{composer}</div>
+        <div className="min-w-0 mt-6 sm:mt-8">{composer}</div>
 
-      {trailing ? <div className="min-w-0 mt-10 sm:mt-12 md:mt-14 lg:mt-16">{trailing}</div> : null}
-    </ListPageViewFrame>
+        {trailing ? <div className="min-w-0 mt-10 sm:mt-12 md:mt-14 lg:mt-16">{trailing}</div> : null}
+      </ListPageViewFrame>
+    </div>
   )
 }

package/template/components/templates/list-page.tsx

@@ -320,9 +320,7 @@ export function ListPageTemplate({
             const count    = getTabCount?.(tab.filterId)
             const tabInner = (
               <>
-                {isActive ? (
-                  <i className={`fa-light ${tab.icon} text-xs`} aria-hidden="true" />
-                ) : null}
+                <i className={cn("fa-light shrink-0 text-xs", tab.icon)} aria-hidden="true" />
                 {tab.label}
                 {count !== undefined && (
                   <span

package/template/components/templates/nested-secondary-panel-shell.tsx

@@ -14,8 +14,8 @@ export interface NestedSecondaryPanelShellProps {
 }
 
 /**
- * Shared chrome for a nested hub rail — full width vs icon rail, aligned with primary sidebar tokens.
- * Domain panels render their header + nav inside `children`.
+ * Shared chrome for a nested hub rail — full width vs icon rail.
+ * Fill uses `--secondary-panel-bg` (soft brand wash on `--background`).
  */
 export function NestedSecondaryPanelShell({
   open,
@@ -34,7 +34,7 @@ export function NestedSecondaryPanelShell({
         "transition-[width,margin,opacity] duration-200 ease-linear",
         open
           ? cn(
-              "shrink-0 m-2 mx-2 rounded-xl ring-1 ring-sidebar-border shadow-sm relative md:sticky md:top-2",
+              "shrink-0 m-2 mx-2 rounded-xl ring-1 ring-border shadow-sm relative md:sticky md:top-2 bg-[var(--secondary-panel-bg)]",
               compact
                 ? "w-12 min-w-12 max-w-12 h-[min(calc(100svh-2rem),800px)] md:h-[min(calc(100svh-1rem),800px)]"
                 : "w-64 min-w-64 max-w-64 h-[min(calc(100svh-2rem),800px)] md:h-[min(calc(100svh-1rem),800px)]",
@@ -42,7 +42,6 @@ export function NestedSecondaryPanelShell({
           : "h-0 min-h-0 shrink overflow-hidden border-0 p-0 m-0 min-w-0 w-0 max-w-0 opacity-0 pointer-events-none",
         className,
       )}
-      style={open ? { backgroundColor: "var(--secondary-panel-bg, #FAFBFF)" } : undefined}
     >
       <div
         className={cn(

package/template/docs/collaboration-access-pattern.md

@@ -2,6 +2,8 @@
 
 Shared UI for **who can access a hub** (face stack in the header) and **inviting people** (floating sheet). **Reference:** Question bank — `QuestionBankPageHeader`, `QuestionBankClient`, `InviteCollaboratorsDrawer`.
 
+**Folder-scoped question bank:** When the library URL selects a folder (`?scope=folder&folderId=`), the same header **⋯ More** menu also exposes **Customize folder** (name / color / icon) via **`QuestionBankNewFolderSheet`** mounted on **`QuestionBankClient`** so it works on every view tab. See **`docs/question-bank-hub-header-pattern.md`** and **`.cursor/rules/exxat-question-bank-hub-header.mdc`**.
+
 ## When to use
 
 - A list hub or library is **shared** across people (not a private directory).

package/template/docs/question-bank-hub-header-pattern.md

@@ -0,0 +1,25 @@
+# Question bank hub header — folder scope + Customize folder
+
+**Audience:** Engineers extending the question bank library hub (`QuestionBankClient`, `QuestionBankPageHeader`, URL scope).
+
+## Problem
+
+The library uses **`ListPageTemplate`** with multiple **view tabs** (table, panel, tree, …). **`QuestionBankNewFolderSheet`** (customize mode) is also used inside **`QuestionBankTable`** for some views (e.g. panel columns). If **Customize folder** exists only there, users on **table** or other tabs **cannot** open the sheet from a consistent chrome entry point when the URL is scoped to a folder (`?scope=folder&folderId=…`).
+
+## Pattern
+
+1. **`QuestionBankPageHeader`** exposes optional **`onCustomizeFolder?: () => void`**. When **`navState.scope === "folder"`** and **`navState.folderId`** is set, the hub client passes a callback that opens customize mode for the matching **`QuestionBankFolder`**.
+2. **`QuestionBankClient`** (or equivalent hub client) mounts **`QuestionBankNewFolderSheet`** **once** beside **`SecondaryPanelHubTemplate` / `ListPageTemplate`**, with local state for **`open`** and **`customizingFolder`**. Saving updates **`folders`** the same way as table-embedded customize flows.
+3. The header **⋯ More** menu order stays aligned with **§4.7**: **Invite people** (when collaboration variant) → **Customize folder** (when folder-scoped) → **Export** → **Show / hide metric section** (when applicable).
+
+## References
+
+| Piece | Location |
+|-------|-----------|
+| Header prop + menu item | `components/question-bank-page-header.tsx` |
+| Client wiring + sheet | `components/question-bank-client.tsx` |
+| URL scope | `lib/question-bank-nav.ts` (`parseQuestionBankNav`, `QuestionBankNavState`) |
+| Sheet UI | `components/question-bank-new-folder-sheet.tsx` |
+
+**Cursor rule:** `.cursor/rules/exxat-question-bank-hub-header.mdc`  
+**Handbook:** `AGENTS.md` §4.6 (folder-scoped hub chrome).

package/template/hooks/use-secondary-panel-hub-nav.ts

@@ -36,6 +36,11 @@ export interface UseSecondaryPanelHubNavOptions<TNav> {
   canonicalHref?: (searchParams: URLSearchParams) => string | null
   /** Re-open the secondary panel when the user returns to the default scope (e.g. All questions). */
   shouldReopenPanel?: (nav: TNav) => boolean
+  /**
+   * When set, auto-reopen only runs on these pathnames (e.g. library hub, not dedicated search landings).
+   * Omit to keep legacy behavior: any {@link hubPathnames} match may reopen the panel.
+   */
+  reopenPanelOnPathnames?: readonly string[]
 }
 
 /**
@@ -48,6 +53,7 @@ export function useSecondaryPanelHubNav<TNav>({
   parseNav,
   canonicalHref,
   shouldReopenPanel,
+  reopenPanelOnPathnames,
 }: UseSecondaryPanelHubNavOptions<TNav>) {
   const pathname = usePathname()
   const router = useRouter()
@@ -90,9 +96,19 @@ export function useSecondaryPanelHubNav<TNav>({
 
   React.useEffect(() => {
     if (!isHubPath || !shouldReopenPanel?.(navState)) return
+    if (reopenPanelOnPathnames?.length && !reopenPanelOnPathnames.includes(pathname)) return
     if (activePanel === panelId) return
     openPanel(panelId)
-  }, [activePanel, isHubPath, navState, openPanel, panelId, shouldReopenPanel])
+  }, [
+    activePanel,
+    isHubPath,
+    navState,
+    openPanel,
+    panelId,
+    pathname,
+    reopenPanelOnPathnames,
+    shouldReopenPanel,
+  ])
 
   return { navState, searchParamsKey, hubPathname, hubBasePath, pathname, isHubPath }
 }

package/template/lib/mock/navigation.tsx

@@ -7,6 +7,11 @@ import type * as React from "react"
 
 import { logoDevUrl } from "@/lib/logo-dev"
 import { stockPortraitUrl } from "@/lib/stock-portrait"
+import {
+  QUESTION_BANK_ENTRY_PATH,
+  QUESTION_BANK_HUB_FIND_PATH,
+  QUESTION_BANK_LIBRARY_PATH,
+} from "@/lib/question-bank-nav"
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -97,10 +102,34 @@ export const NAV_PRIMARY: NavLinkItem[] = [
   {
     key: "question-bank",
     title: "Question bank",
-    url: "/question-bank",
+    url: QUESTION_BANK_ENTRY_PATH,
     icon:       <i className="fa-light fa-books" aria-hidden="true" />,
     iconActive: <i className="fa-solid fa-books" aria-hidden="true" />,
     secondaryPanel: "question-bank",
+    primaryHubChildKey: "question-bank-hub",
+    children: [
+      {
+        key: "question-bank-hub",
+        title: "Question hub",
+        url: QUESTION_BANK_ENTRY_PATH,
+        icon:       <i className="fa-light fa-sparkles" aria-hidden="true" />,
+        iconActive: <i className="fa-solid fa-sparkles" aria-hidden="true" />,
+      },
+      {
+        key: "question-bank-search",
+        title: "Search",
+        url: QUESTION_BANK_HUB_FIND_PATH,
+        icon:       <i className="fa-light fa-magnifying-glass" aria-hidden="true" />,
+        iconActive: <i className="fa-solid fa-magnifying-glass" aria-hidden="true" />,
+      },
+      {
+        key: "question-bank-library",
+        title: "Library",
+        url: QUESTION_BANK_LIBRARY_PATH,
+        icon:       <i className="fa-light fa-table-list" aria-hidden="true" />,
+        iconActive: <i className="fa-solid fa-table-list" aria-hidden="true" />,
+      },
+    ],
   },
   {
     key: "data-list",

package/template/lib/question-bank-nav.ts

@@ -54,6 +54,32 @@ export function isQuestionBankDedicatedSearchPathname(pathname: string): boolean
   return pathname === QUESTION_BANK_LIST_PATH || pathname === QUESTION_BANK_HUB_FIND_PATH
 }
 
+/**
+ * Whether a secondary-nav row (All / My / folder / Search) matches the current URL + parsed nav.
+ * Used by `QuestionBankSecondaryNav` and the folder tree branch.
+ */
+export function isQuestionBankNavActive(
+  pathname: string,
+  nav: QuestionBankNavState,
+  scope: QuestionBankNavScope,
+  folderId?: string | null,
+): boolean {
+  const p = pathname.length > 1 && pathname.endsWith("/") ? pathname.slice(0, -1) : pathname
+  if (!QUESTION_BANK_LIBRARY_HUB_PATHS.includes(p)) return false
+  if (scope === "all") {
+    if (isQuestionBankDedicatedSearchPathname(pathname)) return false
+    return nav.scope === "all"
+  }
+  if (scope === "my") {
+    if (isQuestionBankDedicatedSearchPathname(pathname)) return false
+    return nav.scope === "my"
+  }
+  if (scope === "folder" && folderId) {
+    return nav.scope === "folder" && nav.folderId === folderId
+  }
+  return false
+}
+
 /** Default secondary-nav selection — All questions (no `scope` query). */
 export const QUESTION_BANK_DEFAULT_NAV: QuestionBankNavState = {
   scope: "all",

package/template/package.json

@@ -42,7 +42,7 @@
     "cmdk": "^1.1.1",
     "lucide-react": "^0.577.0",
     "motion": "^12.38.0",
-    "next": "16.2.4",
+    "next": "16.2.6",
     "next-themes": "^0.4.6",
     "react": "^19.2.4",
     "react-day-picker": "^9.14.0",
@@ -60,7 +60,7 @@
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
-    "@next/bundle-analyzer": "^16.2.1",
+    "@next/bundle-analyzer": "16.2.6",
     "@tailwindcss/postcss": "^4.2.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -69,7 +69,7 @@
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^4.7.0",
     "eslint": "^9.39.4",
-    "eslint-config-next": "16.1.7",
+    "eslint-config-next": "16.2.6",
     "jsdom": "^26.1.0",
     "pm2": "^6.0.14",
     "postcss": "^8",

package/template/components/command-menu-01.tsx

@@ -1,133 +0,0 @@
-"use client";
-
-import {
-  IconBell,
-  IconBolt,
-  IconCalendar,
-  IconChartBar,
-  IconChartPie,
-  IconClock,
-  IconFileText,
-  IconHelp,
-  IconKeyboard,
-  IconLayoutDashboard,
-  IconLayoutKanban,
-  IconLogout,
-  IconMessage,
-  IconPalette,
-  IconSettings,
-  IconSquareCheck,
-  IconTarget,
-  IconTrendingUp,
-  IconUsers,
-} from "@tabler/icons-react";
-import { useEffect, useState } from "react";
-import { Button } from "@/components/ui/button";
-import {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "@/components/ui/command";
-import { Kbd } from "@/components/ui/kbd";
-
-const workspaceItems = [
-  { icon: IconLayoutDashboard, label: "Dashboard" },
-  { icon: IconLayoutKanban, label: "Projects" },
-  { icon: IconSquareCheck, label: "Tasks" },
-  { icon: IconCalendar, label: "Calendar" },
-  { icon: IconUsers, label: "Team members" },
-  { icon: IconMessage, label: "Messages" },
-  { icon: IconFileText, label: "Documents" },
-  { icon: IconBell, label: "Notifications" },
-  { icon: IconClock, label: "Time tracking" },
-  { icon: IconTarget, label: "Goals" },
-];
-
-const analyticsItems = [
-  { icon: IconChartBar, label: "Overview" },
-  { icon: IconTrendingUp, label: "Performance" },
-  { icon: IconChartPie, label: "Reports" },
-  { icon: IconBolt, label: "Insights" },
-];
-
-const settingsItems = [
-  { icon: IconSettings, label: "Preferences" },
-  { icon: IconPalette, label: "Appearance" },
-  { icon: IconKeyboard, label: "Keyboard shortcuts" },
-  { icon: IconHelp, label: "Help & support" },
-  { icon: IconLogout, label: "Sign out" },
-];
-
-export function CommandMenu01() {
-  const [open, setOpen] = useState(true);
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault();
-        setOpen((prev) => !prev);
-      }
-    };
-
-    document.addEventListener("keydown", down);
-    return () => document.removeEventListener("keydown", down);
-  }, []);
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)} variant="outline">
-        Open Command Menu
-      </Button>
-
-      <CommandDialog onOpenChange={setOpen} open={open} showCloseButton={false}>
-        <Command className="rounded-none border-0 bg-transparent shadow-none">
-          <CommandInput
-            className="h-12"
-            placeholder="Type a command or search..."
-          />
-          <CommandList className="min-h-[min(420px,50vh)] max-h-[min(560px,65vh)]">
-            <CommandEmpty>No results found.</CommandEmpty>
-            <CommandGroup heading="Workspace">
-              {workspaceItems.map((item) => (
-                <CommandItem key={item.label}>
-                  <item.icon className="me-2 h-5 w-5" />
-                  <span>{item.label}</span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-            <CommandGroup heading="Analytics">
-              {analyticsItems.map((item) => (
-                <CommandItem key={item.label}>
-                  <item.icon className="me-2 h-5 w-5" />
-                  <span>{item.label}</span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-            <CommandGroup heading="Settings">
-              {settingsItems.map((item) => (
-                <CommandItem key={item.label}>
-                  <item.icon className="me-2 h-5 w-5" />
-                  <span>{item.label}</span>
-                </CommandItem>
-              ))}
-            </CommandGroup>
-          </CommandList>
-        </Command>
-        <div className="flex h-12 items-center justify-end border-t px-3">
-          <button
-            className="flex items-center gap-1 text-muted-foreground text-sm hover:text-foreground"
-            onClick={() => setOpen(false)}
-            type="button"
-          >
-            <span>Close</span>
-            <Kbd className="ms-1">Esc</Kbd>
-          </button>
-        </div>
-      </CommandDialog>
-    </>
-  );
-}