@exxatdesignux/ui 0.2.14 → 0.2.16

package/template/components/data-views/outline-tree-menu.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+/**
+ * Central outline-tree chrome — mirrors shadcn/ui **Sidebar** file-tree structure
+ * (`SidebarMenu` → `SidebarMenuItem` + `Collapsible` → `SidebarMenuSub` → rows) without
+ * coupling to `useSidebar`.
+ *
+ * - **`guideLayout="inset"`** — same rhythm as `SidebarMenuSub` (`mx-3.5` + `translate-x-px`).
+ * - **`guideLayout="chevronRail"`** — use with **`OutlineTreeCollapsibleContentRail`**: a **`w-6`**
+ *   spacer lines up the vertical guide with the **horizontal center** of a **`size-8`** chevron
+ *   when the folder row uses **`px-2`** (8px padding + 16px half of 32px chevron hit target).
+ *
+ * @see packages/ui/src/components/ui/sidebar.tsx — `SidebarMenuSub`, `SidebarMenuSubItem`
+ */
+
+import * as React from "react"
+import { CollapsibleContent } from "@/components/ui/collapsible"
+import { cn } from "@/lib/utils"
+
+export type OutlineTreeSurface = "sidebar" | "panel"
+
+export type OutlineTreeGuideLayout = "inset" | "chevronRail"
+
+const outlineTreeSubInsetClass: Record<OutlineTreeSurface, string> = {
+  sidebar:
+    "mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 rtl:-translate-x-px",
+  panel:
+    "mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-border/60 px-2.5 py-0.5 rtl:-translate-x-px",
+}
+
+const outlineTreeSubChevronRailClass: Record<OutlineTreeSurface, string> = {
+  sidebar:
+    "flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-sidebar-border py-0.5 ps-2.5",
+  panel: "flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-border/60 py-0.5 ps-2.5",
+}
+
+/** Pull row content onto the guide line — matches `SidebarMenuSubButton` horizontal nudge (inset layout only). */
+export const OUTLINE_TREE_SUB_ROW_SHIFT_CLASS = "-translate-x-px rtl:translate-x-px"
+
+/** `CollapsibleContent` row: spacer width = `px-2` (8px) + half of `size-8` chevron (16px) → guide under chevron center. */
+export const OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS = "flex min-w-0 w-full"
+
+/** Spacer column — keep in sync with folder row `px-2` + `size-8` chevron. */
+export const OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS = "w-6 shrink-0"
+
+/** Wrap `OutlineTreeSub` with `guideLayout="chevronRail"` so the vertical border meets the chevron center. */
+export function OutlineTreeCollapsibleContentRail({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof CollapsibleContent>) {
+  return (
+    <CollapsibleContent
+      className={cn(OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS, className)}
+      {...props}
+    >
+      <div className={OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS} aria-hidden />
+      {children}
+    </CollapsibleContent>
+  )
+}
+
+/** Nested list under a folder — vertical guide + indent. */
+export function OutlineTreeSub({
+  surface = "panel",
+  guideLayout = "inset",
+  className,
+  ...props
+}: React.ComponentProps<"ul"> & {
+  surface?: OutlineTreeSurface
+  guideLayout?: OutlineTreeGuideLayout
+}) {
+  return (
+    <ul
+      data-slot="outline-tree-sub"
+      data-guide-layout={guideLayout}
+      className={cn(
+        guideLayout === "inset" && outlineTreeSubInsetClass[surface],
+        guideLayout === "chevronRail" && outlineTreeSubChevronRailClass[surface],
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Root or nested branch list — matches `SidebarMenu` spacing. */
+export function OutlineTreeMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="outline-tree-menu"
+      className={cn("flex w-full min-w-0 list-none flex-col gap-0", className)}
+      {...props}
+    />
+  )
+}
+
+/** Expandable folder row wrapper — matches `SidebarMenuItem`. */
+export function OutlineTreeMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="outline-tree-menu-item"
+      className={cn("group/menu-item relative min-w-0 w-full list-none", className)}
+      {...props}
+    />
+  )
+}
+
+/** Leaf / nested row inside `OutlineTreeSub` — matches `SidebarMenuSubItem`. */
+export function OutlineTreeSubItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="outline-tree-sub-item"
+      className={cn("group/menu-sub-item relative min-w-0 w-full list-none", className)}
+      {...props}
+    />
+  )
+}
+
+export interface OutlineTreeLeafButtonProps extends React.ComponentProps<"button"> {
+  surface?: OutlineTreeSurface
+  isActive?: boolean
+  /** Inset `OutlineTreeSub` only — nudge like `SidebarMenuSubButton`. Ignored when parent uses `chevronRail`. */
+  subGuideAlign?: boolean
+}
+
+/** Selectable leaf row (file / terminal row) — `SidebarMenuSubButton`–aligned rhythm. */
+export function OutlineTreeLeafButton({
+  surface = "panel",
+  isActive = false,
+  subGuideAlign = false,
+  className,
+  ...props
+}: OutlineTreeLeafButtonProps) {
+  return (
+    <button
+      type="button"
+      data-active={isActive || undefined}
+      className={cn(
+        "flex min-h-8 w-full min-w-0 cursor-pointer select-none items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm outline-none ring-ring focus-visible:ring-2 focus-visible:ring-inset [&>svg]:size-4 [&>svg]:shrink-0",
+        subGuideAlign && OUTLINE_TREE_SUB_ROW_SHIFT_CLASS,
+        surface === "panel" &&
+          cn(
+            "text-foreground hover:bg-muted/50",
+            isActive && "bg-accent font-medium text-accent-foreground",
+          ),
+        surface === "sidebar" &&
+          cn(
+            "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+            isActive && "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
+          ),
+        className,
+      )}
+      {...props}
+    />
+  )
+}

package/template/components/data-views/question-bank-folder-tree-branch.tsx

@@ -0,0 +1,210 @@
+"use client"
+
+/**
+ * Question bank **Folders** tree — shared outline primitives (`OutlineTree*`) so the rail
+ * matches `HubTreePanelView` and shadcn sidebar file-tree rhythm.
+ */
+
+import * as React from "react"
+import Link from "next/link"
+import { Collapsible, CollapsibleTrigger } from "@/components/ui/collapsible"
+import { Button } from "@/components/ui/button"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Tip } from "@/components/ui/tip"
+import { cn } from "@/lib/utils"
+import {
+  OutlineTreeCollapsibleContentRail,
+  OutlineTreeMenuItem,
+  OutlineTreeSub,
+} from "@/components/data-views/outline-tree-menu"
+import type { QuestionBankFolder } from "@/lib/mock/question-bank-folders"
+import { QUESTION_BANK_FOLDER_ICON_COLORS } from "@/lib/mock/question-bank-folders"
+import {
+  isQuestionBankNavActive,
+  questionBankHubScopeHref,
+  type QuestionBankNavState,
+} from "@/lib/question-bank-nav"
+
+export interface QuestionBankFolderTreeBranchProps {
+  folder: QuestionBankFolder
+  folders: QuestionBankFolder[]
+  pathname: string
+  hubSearchParams: URLSearchParams
+  nav: QuestionBankNavState
+  canManageFolders: boolean
+  canManageAccess: boolean
+  onAddSubfolder: (parentId: string) => void
+  onCustomizeFolder: (folder: QuestionBankFolder) => void
+  onManageAccess: () => void
+  onDeleteFolder: (folder: QuestionBankFolder) => void
+}
+
+export function QuestionBankFolderTreeBranch({
+  folder,
+  folders,
+  pathname,
+  hubSearchParams,
+  nav,
+  canManageFolders,
+  canManageAccess,
+  onAddSubfolder,
+  onCustomizeFolder,
+  onManageAccess,
+  onDeleteFolder,
+}: QuestionBankFolderTreeBranchProps) {
+  const childFolders = React.useMemo(
+    () =>
+      folders
+        .filter(f => f.parentId === folder.id)
+        .sort((a, b) => a.name.localeCompare(b.name)),
+    [folders, folder.id],
+  )
+
+  const hasSubfolders = childFolders.length > 0
+  const isRootFolder = folder.parentId === null
+
+  const folderHref = questionBankHubScopeHref(pathname, hubSearchParams, {
+    scope: "folder",
+    folderId: folder.id,
+  })
+  const folderActive = isQuestionBankNavActive(pathname, nav, "folder", folder.id)
+
+  return (
+    <Collapsible defaultOpen={isRootFolder} className="group/collapsible">
+      <div
+        className={cn(
+          "group/row flex min-w-0 items-center rounded-md px-2 transition-colors",
+          folderActive
+            ? "bg-sidebar-accent font-medium text-sidebar-accent-foreground ring-1 ring-inset ring-sidebar-border/80"
+            : "text-sidebar-foreground hover:bg-sidebar-accent/50",
+        )}
+      >
+        {hasSubfolders ? (
+          <CollapsibleTrigger asChild>
+            <button
+              type="button"
+              className="flex size-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={`${folder.name} — expand or collapse`}
+            >
+              <i
+                className="fa-light fa-chevron-right text-xs transition-transform duration-150 group-data-[state=open]/collapsible:rotate-90"
+                aria-hidden
+              />
+            </button>
+          </CollapsibleTrigger>
+        ) : (
+          <div className="size-8 shrink-0" aria-hidden />
+        )}
+        <Tip label={folder.name} side="right">
+          <Link
+            href={folderHref}
+            scroll={false}
+            aria-current={folderActive ? "page" : undefined}
+            className={cn(
+              "flex min-w-0 flex-1 items-center gap-2 py-1.5 text-left text-sm transition-colors",
+              "rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+              !folderActive && "text-sidebar-foreground",
+            )}
+          >
+            <i
+              className={cn(
+                "fa-light inline-flex size-4 shrink-0 items-center justify-center text-sm leading-none",
+                folder.icon,
+                QUESTION_BANK_FOLDER_ICON_COLORS[folder.colorKey],
+              )}
+              aria-hidden
+            />
+            <span className="min-w-0 flex-1 truncate leading-tight">{folder.name}</span>
+            {hasSubfolders ? (
+              <span className="shrink-0 text-xs tabular-nums text-muted-foreground">{childFolders.length}</span>
+            ) : null}
+          </Link>
+        </Tip>
+        {canManageFolders ? (
+          <DropdownMenu>
+            <Tip label={`Folder actions for ${folder.name}`} side="right">
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  size="icon-xs"
+                  variant="ghost"
+                  aria-label={`Folder actions for ${folder.name}`}
+                  className="shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/row:opacity-100 group-focus-within/row:opacity-100"
+                  onClick={event => event.stopPropagation()}
+                >
+                  <i className="fa-light fa-ellipsis text-xs" aria-hidden="true" />
+                </Button>
+              </DropdownMenuTrigger>
+            </Tip>
+            <DropdownMenuContent align="end">
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onAddSubfolder(folder.id), 0)
+                }}
+              >
+                <i className="fa-light fa-plus text-xs" aria-hidden="true" />
+                Add folder
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onSelect={() => {
+                  window.setTimeout(() => onCustomizeFolder(folder), 0)
+                }}
+              >
+                <i className="fa-light fa-wand-magic-sparkles text-xs" aria-hidden="true" />
+                Customize
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                disabled={!canManageAccess}
+                onSelect={() => {
+                  window.setTimeout(() => onManageAccess(), 0)
+                }}
+              >
+                <i className="fa-light fa-user-gear text-xs" aria-hidden="true" />
+                Manage access
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                variant="destructive"
+                onSelect={() => {
+                  window.setTimeout(() => onDeleteFolder(folder), 0)
+                }}
+              >
+                <i className="fa-light fa-trash text-xs" aria-hidden="true" />
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+      </div>
+      {hasSubfolders ? (
+        <OutlineTreeCollapsibleContentRail>
+          <OutlineTreeSub surface="sidebar" guideLayout="chevronRail">
+            {childFolders.map(child => (
+              <OutlineTreeMenuItem key={child.id}>
+                <QuestionBankFolderTreeBranch
+                  folder={child}
+                  folders={folders}
+                  pathname={pathname}
+                  hubSearchParams={hubSearchParams}
+                  nav={nav}
+                  canManageFolders={canManageFolders}
+                  canManageAccess={canManageAccess}
+                  onAddSubfolder={onAddSubfolder}
+                  onCustomizeFolder={onCustomizeFolder}
+                  onManageAccess={onManageAccess}
+                  onDeleteFolder={onDeleteFolder}
+                />
+              </OutlineTreeMenuItem>
+            ))}
+          </OutlineTreeSub>
+        </OutlineTreeCollapsibleContentRail>
+      ) : null}
+    </Collapsible>
+  )
+}

package/template/components/exxat-product-logo.tsx

@@ -3,7 +3,9 @@
 /**
  * Inline product wordmarks — "Exxat" letters are gray (#273441) on light,
  * soft grey (#A8B2BA) on dark/HC; product name letters (One/Prism) use
- * brand pink (#E31B79) by default. The circular mark + gradient are unchanged.
+ * brand pink (#E31B79) by default.
+ *
+ * **Circular mark** (`ExxatProductMark`): always the Exxat One mark; wordmarks stay per-product.
  *
  * `variant="mutedSuffix"` (sidebar / switcher): in **dark** mode only, the full wordmark
  * uses one `muted-foreground`. In **light** mode the original pink + grey wordmark is kept.
@@ -168,12 +170,16 @@ function ExxatOneLogo({
 function ExxatOneMark({ className, ...props }: React.ComponentProps<"svg">) {
   const ready = useBrowserPaintReady()
   const paint0 = useMarkGradientId("one-mark")
-  const sharedClass = cn("block shrink-0", className)
+  const sharedClass = cn(
+    "box-border block aspect-square size-7 shrink-0 flex-none object-contain",
+    className,
+  )
 
   if (!ready) {
     return (
       <svg
         viewBox="0 8.25 147 147"
+        preserveAspectRatio="xMidYMid meet"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
         data-product-logo-mark
@@ -188,6 +194,7 @@ function ExxatOneMark({ className, ...props }: React.ComponentProps<"svg">) {
   return (
     <svg
       viewBox="0 8.25 147 147"
+      preserveAspectRatio="xMidYMid meet"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       data-product-logo-mark
@@ -229,81 +236,13 @@ function ExxatOneMark({ className, ...props }: React.ComponentProps<"svg">) {
   )
 }
 
-function ExxatPrismMark({ className, ...props }: React.ComponentProps<"svg">) {
-  const ready = useBrowserPaintReady()
-  const paint0 = useMarkGradientId("prism-mark")
-  const sharedClass = cn("block shrink-0", className)
-
-  if (!ready) {
-    return (
-      <svg
-        viewBox="0 8.25 147 147"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        data-product-logo-mark
-        className={sharedClass}
-        aria-hidden
-        suppressHydrationWarning
-        {...props}
-      />
-    )
-  }
-
-  return (
-    <svg
-      viewBox="0 8.25 147 147"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      data-product-logo-mark
-      className={sharedClass}
-      aria-hidden
-      suppressHydrationWarning
-      {...props}
-    >
-      <path
-        d="M73.4939 155.238C114.084 155.238 146.988 122.334 146.988 81.7439C146.988 41.1544 114.084 8.25 73.4939 8.25C32.9044 8.25 0 41.1544 0 81.7439C0 122.334 32.9044 155.238 73.4939 155.238Z"
-        fill={`url(#${paint0})`}
-      />
-      <path
-        d="M0.490234 89.3652C3.79023 115.675 23.9702 136.725 49.8502 141.355L84.4302 110.265V98.6852H71.5502L84.4302 87.1052V75.5252H71.5502L84.4302 63.9452V52.3652H41.6602L0.490234 89.3652Z"
-        fill="#BE1E6D"
-      />
-      <path d="M84.4397 110.265H41.6597L48.3497 98.6851H84.4397V110.265Z" fill="white" />
-      <path d="M84.4397 63.935H48.3497L41.6597 52.355H84.4397V63.935Z" fill="white" />
-      <path d="M84.44 87.0951H55.04L58.38 81.3051L55.04 75.5151H84.44V87.0951Z" fill="white" />
-      <path d="M32.3198 75.5151H55.0398L48.3498 63.9351H32.3198V75.5151Z" fill="white" />
-      <path d="M32.3198 98.6852H48.3498L55.0398 87.0952H32.3198V98.6852Z" fill="white" />
-      <defs>
-        <linearGradient
-          id={paint0}
-          x1="23.38"
-          y1="125.015"
-          x2="96.57"
-          y2="39.8551"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop offset="0.04" stopColor="#E21C79" />
-          <stop offset="0.65" stopColor="#E21E7B" />
-          <stop offset="0.73" stopColor="#E42880" />
-          <stop offset="0.88" stopColor="#E9448E" />
-          <stop offset="1" stopColor="#EF609D" />
-        </linearGradient>
-      </defs>
-    </svg>
-  )
-}
-
 export interface ExxatProductMarkProps {
   product: Product
   className?: string
 }
 
-export function ExxatProductMark({ product, className }: ExxatProductMarkProps) {
-  return product === "exxat-prism" ? (
-    <ExxatPrismMark className={className} />
-  ) : (
-    <ExxatOneMark className={className} />
-  )
+export function ExxatProductMark({ product: _product, className }: ExxatProductMarkProps) {
+  return <ExxatOneMark className={className} />
 }
 
 function ExxatPrismLogo({

package/template/components/folder-details-shell.tsx

@@ -102,7 +102,7 @@ export function FolderDetailsShell({
 
   return (
     <div className="flex h-full min-h-0 flex-col overflow-hidden bg-card">
-      <header className="shrink-0 border-b border-border/60 bg-muted/10 px-4 pb-4 pt-4">
+      <header className="shrink-0 border-b border-border/60 bg-card px-4 pb-4 pt-4">
         <div className="flex items-start justify-between gap-3">
           <div className="flex min-w-0 flex-1 items-start gap-3">
             <OsFolderGlyph