@exxatdesignux/ui 0.2.18 → 0.2.19

package/template/components/app-route-loading.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+
+import { PageLoadingByVariant } from "@/components/templates/page-loading-shell"
+import { resolvePageLoadingVariant } from "@/lib/page-loading-variant"
+
+/**
+ * Route-level loading UI — keeps `SidebarInset` + header chrome; skeleton matches destination template.
+ */
+export function AppRouteLoading() {
+  const pathname = usePathname()
+  return <PageLoadingByVariant variant={resolvePageLoadingVariant(pathname)} />
+}

package/template/components/app-sidebar.tsx

@@ -105,11 +105,22 @@ function normalizedLocationHash(locationHash: string): string {
   return locationHash.startsWith("#") ? locationHash.slice(1) : locationHash
 }
 
+/**
+ * Paths where a sibling sidebar row uses `#fragment` on the same pathname
+ * (e.g. Settings vs Tokens & themes). The plain-path row must not stay active
+ * when the hash belongs to that sibling.
+ */
+const NAV_EXCLUSIVE_HASH_BY_PATH: Readonly<Record<string, readonly string[]>> = {
+  "/settings": ["appearance"],
+  "/help": ["more"],
+}
+
 /**
  * Whether `pathname` (+ optional `location.hash`) matches a sidebar `href`.
  * When several links share the same path (e.g. `/settings`), disambiguate with `#fragment`
  * in each `href` — those rows use the `frag !== null` branch below.
- * For `href` without `#…`, an in-page hash (e.g. QB view tabs) does not clear the match.
+ * For `href` without `#…`, an in-page hash (e.g. QB view tabs) does not clear the match,
+ * except when the hash is reserved for a hash-sibling row on that path.
  */
 function isNavActive(pathname: string, url: string, locationHash = ""): boolean {
   const pathOnly = navUrlPath(url)
@@ -131,7 +142,13 @@ function isNavActive(pathname: string, url: string, locationHash = ""): boolean
 
   if (pathOnly === "/") return pathname === "/" && h === ""
   /** Exact path match — ignore `location.hash` when the nav `href` has no `#…` fragment (QB view tabs use hash). */
-  if (pathname === pathOnly) return true
+  if (pathname === pathOnly) {
+    if (h !== "") {
+      const exclusive = NAV_EXCLUSIVE_HASH_BY_PATH[pathOnly]
+      if (exclusive?.includes(h)) return false
+    }
+    return true
+  }
   // Design system library — active on hub and detail routes.
   if (pathOnly === "/library") {
     return pathname.startsWith("/library/")
@@ -827,60 +844,58 @@ function ProductLogoButton() {
 
   return (
     <DropdownMenu>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <DropdownMenuTrigger asChild>
-            <SidebarMenuButton
-              size="lg"
-              className={cn(
-                "py-2 text-sidebar-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
-                expandedOrMobile &&
-                  "h-auto min-h-12 !overflow-visible items-center [&>span:last-child]:!overflow-visible [&>span:last-child]:!whitespace-normal [&>span:last-child]:text-clip",
-                "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center",
-                iconRail &&
-                  "group-data-[collapsible=icon]:!size-9 group-data-[collapsible=icon]:!min-h-9 group-data-[collapsible=icon]:!max-h-9 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:overflow-visible",
-              )}
-              aria-label={`Current product: ${current.label}. Switch product`}
-              suppressHydrationWarning
-            >
-              {iconRail ? (
-                // Match the school selector footprint in the icon rail (32px frame,
-                // 28px mark — same visual weight as the avatar with inset padding).
-                <span className="flex size-8 shrink-0 items-center justify-center">
-                  <ExxatProductMark product={current.id} className="size-7" />
-                </span>
-              ) : (
-                <span className="flex min-h-0 min-w-0 flex-1 items-stretch gap-2">
-                  <span
-                    className="flex min-h-0 min-w-0 flex-1 items-center justify-start overflow-visible"
-                    aria-hidden="true"
-                  >
-                    <ExxatProductLogo
-                      product={current.id}
-                      variant="mutedSuffix"
-                      className="w-auto max-w-[min(100%,280px)] object-left object-contain"
-                    />
-                  </span>
-                  <span
-                    className="flex w-6 shrink-0 items-center justify-center self-stretch text-muted-foreground"
-                    aria-hidden="true"
-                  >
-                    <i
-                      className="fa-light fa-chevron-down block text-xs leading-none"
-                      aria-hidden="true"
-                    />
-                  </span>
-                </span>
-              )}
-            </SidebarMenuButton>
-          </DropdownMenuTrigger>
-        </TooltipTrigger>
-        <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile}>
-          {current.label}
-        </TooltipContent>
-      </Tooltip>
+      <DropdownMenuTrigger asChild>
+        <SidebarMenuButton
+          size="lg"
+          tooltip={iconRail ? current.label : undefined}
+          className={cn(
+            "py-2 text-sidebar-foreground data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground",
+            expandedOrMobile &&
+              "h-auto min-h-12 !overflow-visible items-center [&>span:last-child]:!overflow-visible [&>span:last-child]:!whitespace-normal [&>span:last-child]:text-clip",
+            "group-data-[collapsible=icon]:items-center group-data-[collapsible=icon]:justify-center",
+            iconRail &&
+              "group-data-[collapsible=icon]:!size-9 group-data-[collapsible=icon]:!min-h-9 group-data-[collapsible=icon]:!max-h-9 group-data-[collapsible=icon]:!p-0 group-data-[collapsible=icon]:overflow-visible",
+          )}
+          aria-label={`Current product: ${current.label}. Switch product`}
+          suppressHydrationWarning
+        >
+          {iconRail ? (
+            // Match the school selector footprint in the icon rail (32px frame,
+            // 28px mark — same visual weight as the avatar with inset padding).
+            <span className="flex size-8 shrink-0 items-center justify-center">
+              <ExxatProductMark product={current.id} className="size-7" />
+            </span>
+          ) : (
+            <span className="flex min-h-0 min-w-0 flex-1 items-stretch gap-2">
+              <span
+                className="flex min-h-0 min-w-0 flex-1 items-center justify-start overflow-visible"
+                aria-hidden="true"
+              >
+                <ExxatProductLogo
+                  product={current.id}
+                  variant="mutedSuffix"
+                  className="w-auto max-w-[min(100%,280px)] object-left object-contain"
+                />
+              </span>
+              <span
+                className="flex w-6 shrink-0 items-center justify-center self-stretch text-muted-foreground"
+                aria-hidden="true"
+              >
+                <i
+                  className="fa-light fa-chevron-down block text-xs leading-none"
+                  aria-hidden="true"
+                />
+              </span>
+            </span>
+          )}
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
 
-      <DropdownMenuContent align="start" side="right" sideOffset={8}>
+      <DropdownMenuContent
+        align="start"
+        side={iconRail ? "right" : "bottom"}
+        sideOffset={iconRail ? 8 : 4}
+      >
         <DropdownMenuLabel className="text-xs text-muted-foreground">
           Switch product
         </DropdownMenuLabel>

package/template/components/data-views/index.ts

@@ -1,15 +1,12 @@
 /**
  * Central exports for list-page data surfaces and shared view chrome.
  *
- * **Pattern:** `ListPageTemplate` + `PlacementsTable` (or any hub-specific `*-table.tsx`) — one `useTableState`, one toolbar,
+ * **Pattern:** `ListPageTemplate` + hub `*-table.tsx` — one `useTableState`, one toolbar,
  * table | list | board | dashboard from the same component (`AGENTS.md` §4, `docs/data-views-pattern.md`).
  *
  * **View UI:** `ViewSegmentedControl` matches the template’s views toolbar (`bg-muted/60` pills).
  */
 
-export { PlacementsTable } from "@/components/placements-table"
-export type { PlacementsTableProps, PlacementsTableHandle } from "@/components/placements-table"
-export type { PlacementLifecycleTabId } from "@/lib/placement-lifecycle"
 export type { DataListViewType } from "@/lib/data-list-view"
 export { DATA_LIST_VIEW_TILES, dataListViewIcon, dataListViewLabel } from "@/lib/data-list-view"
 
@@ -39,6 +36,7 @@ export {
 export {
   ListPageSplitHubChrome,
   LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE,
+  LIST_PAGE_CALENDAR_HEIGHT_STYLE,
   type ListPageSplitHubChromeProps,
 } from "@/components/data-views/list-page-split-hub-chrome"
 
@@ -63,8 +61,7 @@ export {
   type OutlineTreeSurface,
 } from "@/components/data-views/outline-tree-menu"
 
-export { QuestionBankFolderTreeBranch } from "@/components/data-views/question-bank-folder-tree-branch"
-export type { QuestionBankFolderTreeBranchProps } from "@/components/data-views/question-bank-folder-tree-branch"
+/** Question-bank nav only — import from `@/components/data-views/question-bank-folder-tree-branch`. */
 
 export {
   LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
@@ -83,10 +80,12 @@ export {
   type FolderDetailsShellProps,
 } from "@/components/folder-details-shell"
 
+/** Hub-specific tree+inspector — import from `@/components/hub-tree-panel-view` (not generic DS). */
+
 export {
-  HubTreePanelView,
-  type HubTreePanelViewProps,
-} from "@/components/hub-tree-panel-view"
+  ListPageFolderColumnsPanel,
+  type ListPageFolderColumnsPanelProps,
+} from "@/components/data-views/list-page-folder-columns-panel"
 
 export {
   ListPageTreePanelShell,
@@ -103,6 +102,35 @@ export {
 /** Generic folder icon-grid — reusable across all list hubs. */
 export { FolderGridView, type FolderGridViewProps } from "@/components/data-views/folder-grid-view"
 
+/** Month calendar — same `tableState.rows` as table / list / board. */
+export {
+  ListPageCalendarView,
+  type ListPageCalendarViewProps,
+} from "@/components/data-views/list-page-calendar-view"
+
+/** Hub view router — switch on `DataListViewRenderKind`; missing renderer = explicit empty state. */
+export {
+  ListPageConnectedViewBody,
+  ListPageViewNotConfigured,
+  type ListPageConnectedViewBodyProps,
+  type ListPageConnectedViewRenderers,
+} from "@/components/data-views/list-page-connected-view-body"
+
+export {
+  DATA_LIST_VIEW_REGISTRY,
+  dataListViewDefinition,
+  dataListViewTilesForHub,
+  showsListPageHubMetricsStrip,
+  isDataListViewTypeSupported,
+} from "@/lib/data-list-view-registry"
+
+export {
+  defineHubViewRenderers,
+  hubRenderKindsForSupported,
+  type HubConnectedViewRenderers,
+  type HubRenderKindForViews,
+} from "@/lib/hub-connected-view-renderers"
+
 /** Generic vertical row list — used by every hub's "list" tab. Composes
  *  `ListPageBoardCard layout="row"` via a `renderRow` prop. */
 export { DataRowList, type DataRowListProps } from "@/components/data-views/data-row-list"