@exxatdesignux/ui 0.2.9 → 0.2.11

package/template/components/data-view-dashboard-charts.tsx

@@ -67,12 +67,16 @@ import {
   KEY_METRICS_KPI_COUNT_DEFAULT,
   KEY_METRICS_KPI_COUNT_MAX,
   KEY_METRICS_KPI_COUNT_MIN,
-  mergeDashboardLayoutGeneric,
 } from "@/lib/dashboard-layout-merge"
 import {
-  loadDataViewLayout as loadStoredDataViewLayout,
-  saveDataViewLayout as saveStoredDataViewLayout,
-} from "@/lib/data-view-dashboard-storage"
+  type ChartType,
+  type DashboardCardDef,
+  KEY_METRICS_CARD_ID,
+  ALL_DASHBOARD_CARDS,
+  DEFAULT_SPANS,
+  DEFAULT_CHART_TYPES,
+  applyVisibleReorder,
+} from "@/lib/data-view-dashboard-placements-layout"
 import { cn } from "@/lib/utils"
 import {
   ChartContainer,
@@ -87,6 +91,19 @@ import {
   CHART_KBD_ACTIVE_PIE_SHAPE,
 } from "@/lib/chart-keyboard-selection"
 
+export type { ChartType, ChartTypeOption, DashboardCardDef, DashboardLayout } from "@/lib/data-view-dashboard-placements-layout"
+export {
+  KEY_METRICS_CARD_ID,
+  ALL_DASHBOARD_CARDS,
+  DEFAULT_VISIBLE_CARDS,
+  DEFAULT_SPANS,
+  DEFAULT_CHART_TYPES,
+  loadDashboardLayout,
+  mergeDashboardLayout,
+  saveDashboardLayout,
+  applyVisibleReorder,
+} from "@/lib/data-view-dashboard-placements-layout"
+
 /* ── Chart colour tokens ───────────────────────────────────────────────── */
 
 const STATUS_COLORS: Record<string, string> = {
@@ -117,32 +134,16 @@ const READINESS_COLORS: Record<string, string> = {
 const BAR_CFG: ChartConfig  = { value: { label: "Placements", color: "var(--primary)" } }
 const AREA_CFG: ChartConfig = { count: { label: "Starting", color: "var(--color-chart-1)" } }
 
-/* ── Chart types available per card ───────────────────────────────────── */
-
-export type ChartType = "bar" | "horizontal-bar" | "pie" | "area" | "line" | "radial" | "stacked-bar"
-
-export interface ChartTypeOption {
-  type: ChartType
-  label: string
-  icon: string
-}
-
-/* ── Card definitions ──────────────────────────────────────────────────── */
-
-export interface DashboardCardDef {
-  id: string
-  title: string
-  description: string
-  /** Default grid column span: 1 = half width, 2 = full width */
-  defaultSpan: 1 | 2
-  /** Default chart type (unused when chartTypes is empty) */
-  defaultChartType: ChartType
-  /** Available chart types; empty = KPI / non-chart block (no type switcher) */
-  chartTypes: ChartTypeOption[]
-}
+const CHART_MARGIN = { top: 8, right: 8, left: 0, bottom: 0 } as const
+const CHART_MARGIN_HORIZONTAL = { top: 8, right: 8, left: 4, bottom: 0 } as const
 
-/** Virtual “card” for the KPI strip — reorderable with charts in edit mode */
-export const KEY_METRICS_CARD_ID = "key-metrics"
+const PALETTE_COLORS = [
+  "var(--color-chart-1)",
+  "var(--color-chart-2)",
+  "var(--color-chart-3)",
+  "var(--color-chart-4)",
+  "var(--color-chart-5)",
+] as const
 
 /** Demo Leo “smart scan” copy per chart (swap for model output when wired). */
 const PLACEMENTS_CHART_LEO_INSIGHTS: Partial<Record<string, ChartLeoInsight>> = {
@@ -173,181 +174,6 @@ const PLACEMENTS_CHART_LEO_INSIGHTS: Partial<Record<string, ChartLeoInsight>> =
   },
 }
 
-export const ALL_DASHBOARD_CARDS: DashboardCardDef[] = [
-  {
-    id: KEY_METRICS_CARD_ID,
-    title: "Key metrics",
-    description: "Summary KPIs for filtered placements",
-    defaultSpan: 1,
-    defaultChartType: "bar",
-    chartTypes: [],
-  },
-  {
-    id: "status-pipeline",
-    title: "Status Pipeline",
-    description: "Where placements are in the workflow",
-    defaultSpan: 1,
-    defaultChartType: "bar",
-    chartTypes: [
-      { type: "bar", label: "Bar", icon: "fa-light fa-chart-bar" },
-      { type: "horizontal-bar", label: "Horizontal Bar", icon: "fa-light fa-chart-bar fa-rotate-90" },
-      { type: "pie", label: "Donut", icon: "fa-light fa-chart-pie" },
-    ],
-  },
-  {
-    id: "program-mix",
-    title: "Placements by Program",
-    description: "Distribution across active programs",
-    defaultSpan: 1,
-    defaultChartType: "pie",
-    chartTypes: [
-      { type: "pie", label: "Donut", icon: "fa-light fa-chart-pie" },
-      { type: "bar", label: "Bar", icon: "fa-light fa-chart-bar" },
-      { type: "horizontal-bar", label: "Horizontal Bar", icon: "fa-light fa-chart-bar fa-rotate-90" },
-    ],
-  },
-  {
-    id: "compliance-status",
-    title: "Compliance Status",
-    description: "Document readiness for upcoming placements",
-    defaultSpan: 1,
-    defaultChartType: "horizontal-bar",
-    chartTypes: [
-      { type: "horizontal-bar", label: "Horizontal Bar", icon: "fa-light fa-chart-bar fa-rotate-90" },
-      { type: "bar", label: "Bar", icon: "fa-light fa-chart-bar" },
-      { type: "pie", label: "Donut", icon: "fa-light fa-chart-pie" },
-    ],
-  },
-  {
-    id: "readiness-overview",
-    title: "Student Readiness",
-    description: "How prepared students are for their placements",
-    defaultSpan: 1,
-    defaultChartType: "bar",
-    chartTypes: [
-      { type: "bar", label: "Bar", icon: "fa-light fa-chart-bar" },
-      { type: "horizontal-bar", label: "Horizontal Bar", icon: "fa-light fa-chart-bar fa-rotate-90" },
-      { type: "pie", label: "Donut", icon: "fa-light fa-chart-pie" },
-    ],
-  },
-  {
-    id: "progress-tracker",
-    title: "Ongoing Progress",
-    description: "How far along each ongoing placement is",
-    defaultSpan: 2,
-    defaultChartType: "stacked-bar",
-    chartTypes: [
-      { type: "stacked-bar", label: "Stacked Bar", icon: "fa-light fa-layer-group" },
-      { type: "bar", label: "Bar", icon: "fa-light fa-chart-bar" },
-    ],
-  },
-  {
-    id: "site-utilisation",
-    title: "Site Utilisation",
-    description: "Which clinical sites have the most placements",
-    defaultSpan: 1,
-    defaultChartType: "horizontal-bar",
-    chartTypes: [
-      { type: "horizontal-bar", label: "Horizontal Bar", icon: "fa-light fa-chart-bar fa-rotate-90" },
-      { type: "bar", label: "Bar", icon: "fa-light fa-chart-bar" },
-      { type: "pie", label: "Donut", icon: "fa-light fa-chart-pie" },
-    ],
-  },
-  {
-    id: "completion-outcomes",
-    title: "Completion Outcomes",
-    description: "Pass rate and average ratings for completed placements",
-    defaultSpan: 1,
-    defaultChartType: "radial",
-    chartTypes: [
-      { type: "radial", label: "Radial", icon: "fa-light fa-circle-notch" },
-      { type: "bar", label: "Bar", icon: "fa-light fa-chart-bar" },
-    ],
-  },
-  {
-    id: "upcoming-timeline",
-    title: "Upcoming Start Dates",
-    description: "New placements starting in the next 8 weeks",
-    defaultSpan: 2,
-    defaultChartType: "area",
-    chartTypes: [
-      { type: "area", label: "Area", icon: "fa-light fa-chart-area" },
-      { type: "line", label: "Line", icon: "fa-light fa-chart-line" },
-      { type: "bar", label: "Bar", icon: "fa-light fa-chart-bar" },
-    ],
-  },
-]
-
-export const DEFAULT_VISIBLE_CARDS = ALL_DASHBOARD_CARDS.map(c => c.id)
-export const DEFAULT_SPANS: Record<string, 1 | 2> = Object.fromEntries(ALL_DASHBOARD_CARDS.map(c => [c.id, c.defaultSpan]))
-export const DEFAULT_CHART_TYPES: Record<string, ChartType> = Object.fromEntries(ALL_DASHBOARD_CARDS.map(c => [c.id, c.defaultChartType]))
-
-/* ── Persistence (centralized bundle — see `lib/data-view-dashboard-storage`) ─ */
-
-export interface DashboardLayout {
-  visible: string[]
-  order: string[]
-  spans?: Record<string, 1 | 2>
-  chartTypes?: Record<string, ChartType>
-  /** Key metrics card: show first N KPIs (1–4). */
-  keyMetricsKpiCount?: number
-}
-
-export function loadDashboardLayout(): DashboardLayout | null {
-  const v = loadStoredDataViewLayout("placements")
-  if (!v) return null
-  return {
-    visible: v.visible,
-    order: v.order,
-    spans: v.spans,
-    chartTypes: v.chartTypes as Record<string, ChartType> | undefined,
-    keyMetricsKpiCount: v.keyMetricsKpiCount,
-  }
-}
-
-/** Merge saved layout with defaults so every card id has span + chart type. */
-export function mergeDashboardLayout(saved: DashboardLayout | null): DashboardLayout {
-  const defaults = {
-    visible: [...DEFAULT_VISIBLE_CARDS],
-    order: ALL_DASHBOARD_CARDS.map(c => c.id),
-    spans: { ...DEFAULT_SPANS },
-    chartTypes: { ...DEFAULT_CHART_TYPES } as Record<string, string>,
-    keyMetricsKpiCount: KEY_METRICS_KPI_COUNT_DEFAULT,
-  }
-  const ids = ALL_DASHBOARD_CARDS.map(c => c.id)
-  const m = mergeDashboardLayoutGeneric(saved, defaults, ids)
-  return {
-    visible: m.visible,
-    order: m.order,
-    spans: m.spans as Record<string, 1 | 2>,
-    chartTypes: m.chartTypes as Record<string, ChartType>,
-    keyMetricsKpiCount: m.keyMetricsKpiCount,
-  }
-}
-
-export function saveDashboardLayout(layout: DashboardLayout) {
-  saveStoredDataViewLayout("placements", {
-    visible: layout.visible,
-    order: layout.order,
-    spans: layout.spans,
-    chartTypes: layout.chartTypes as Record<string, string> | undefined,
-    keyMetricsKpiCount: layout.keyMetricsKpiCount,
-  })
-}
-
-/** Rebuild full `cardOrder` after reordering only the visible subset (order of hidden ids is preserved). */
-export function applyVisibleReorder(
-  fullOrder: string[],
-  visible: Set<string>,
-  newVisibleOrder: string[],
-): string[] {
-  let vi = 0
-  return fullOrder.map(id => {
-    if (!visible.has(id)) return id
-    return newVisibleOrder[vi++]!
-  })
-}
-
 /* ── Individual chart renderers (ChartFigure + ChartDataTable from charts-overview) ─ */
 /* Keyboard highlight: `CHART_KBD_*` — same ring-on-active pattern as `charts-overview`. */
 
@@ -378,7 +204,7 @@ function StatusPipelineChart({ rows, chartType }: { rows: Placement[]; chartType
             <HBarChartRenderer data={data} colored activeIndex={activeIndex} />
           ) : (
             <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
-              <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={data} margin={CHART_MARGIN}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis allowDecimals={false} width={32} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -417,7 +243,11 @@ function ProgramMixChart({ rows, chartType }: { rows: Placement[]; chartType: Ch
       .sort((a, b) => b.value - a.value)
   }, [rows])
 
-  const colors = ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)", "var(--color-chart-5)"]
+  const colors = PALETTE_COLORS
+  const coloredData = React.useMemo(
+    () => data.map((d, i) => ({ ...d, fill: colors[i % colors.length] })),
+    [data, colors],
+  )
 
   if (data.length === 0) return <EmptyChart />
 
@@ -429,7 +259,7 @@ function ProgramMixChart({ rows, chartType }: { rows: Placement[]; chartType: Ch
         <>
           {chartType === "bar" ? (
             <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
-              <BarChart data={data.map((d, i) => ({ ...d, fill: colors[i % colors.length] }))} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={coloredData} margin={CHART_MARGIN}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis allowDecimals={false} width={32} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -441,15 +271,15 @@ function ProgramMixChart({ rows, chartType }: { rows: Placement[]; chartType: Ch
                   activeBar={CHART_KBD_ACTIVE_BAR}
                   activeIndex={activeIndex ?? undefined}
                 >
-                  {data.map((_, i) => (
-                    <Cell key={i} fill={colors[i % colors.length]} />
+                  {coloredData.map((d, i) => (
+                    <Cell key={i} fill={d.fill} />
                   ))}
                 </Bar>
               </BarChart>
             </ChartContainer>
           ) : chartType === "horizontal-bar" ? (
             <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
-              <BarChart data={data.map((d, i) => ({ ...d, fill: colors[i % colors.length] }))} layout="vertical" margin={{ top: 8, right: 8, left: 4, bottom: 0 }}>
+              <BarChart data={coloredData} layout="vertical" margin={CHART_MARGIN_HORIZONTAL}>
                 <CartesianGrid horizontal={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis type="category" dataKey="name" width={100} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -461,14 +291,14 @@ function ProgramMixChart({ rows, chartType }: { rows: Placement[]; chartType: Ch
                   activeBar={CHART_KBD_ACTIVE_BAR}
                   activeIndex={activeIndex ?? undefined}
                 >
-                  {data.map((_, i) => (
-                    <Cell key={i} fill={colors[i % colors.length]} />
+                  {coloredData.map((d, i) => (
+                    <Cell key={i} fill={d.fill} />
                   ))}
                 </Bar>
               </BarChart>
             </ChartContainer>
           ) : (
-            <PieChartRenderer data={data.map((d, i) => ({ ...d, fill: colors[i % colors.length] }))} activeIndex={activeIndex} />
+            <PieChartRenderer data={coloredData} activeIndex={activeIndex} />
           )}
           <ChartDataTable
             caption="Placements by Program data"
@@ -505,7 +335,7 @@ function ComplianceChart({ rows, chartType }: { rows: Placement[]; chartType: Ch
         <>
           {chartType === "bar" ? (
             <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
-              <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={data} margin={CHART_MARGIN}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis allowDecimals={false} width={32} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -567,7 +397,7 @@ function ReadinessChart({ rows, chartType }: { rows: Placement[]; chartType: Cha
             <HBarChartRenderer data={data} colored activeIndex={activeIndex} />
           ) : (
             <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
-              <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={data} margin={CHART_MARGIN}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis allowDecimals={false} width={32} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -624,7 +454,7 @@ function ProgressTrackerChart({ rows, chartType }: { rows: Placement[]; chartTyp
         <>
           {chartType === "bar" ? (
             <ChartContainer config={cfg} className="h-[220px] w-full">
-              <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={data} margin={CHART_MARGIN}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis allowDecimals={false} width={32} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -651,7 +481,7 @@ function ProgressTrackerChart({ rows, chartType }: { rows: Placement[]; chartTyp
             </ChartContainer>
           ) : (
             <ChartContainer config={cfg} className="h-[220px] w-full">
-              <BarChart data={data} layout="vertical" margin={{ top: 8, right: 8, left: 4, bottom: 0 }}>
+              <BarChart data={data} layout="vertical" margin={CHART_MARGIN_HORIZONTAL}>
                 <CartesianGrid horizontal={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis type="category" dataKey="name" width={72} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -701,10 +531,15 @@ function SiteUtilisationChart({ rows, chartType }: { rows: Placement[]; chartTyp
       .slice(0, 8)
   }, [rows])
 
+  const colors = PALETTE_COLORS
+  const coloredData = React.useMemo(
+    () => data.map((d, i) => ({ ...d, fill: colors[i % colors.length] })),
+    [data, colors],
+  )
+
   if (data.length === 0) return <EmptyChart />
 
   const summary = `Top ${data.length} sites. Busiest: ${data[0].name} with ${data[0].value} placements.`
-  const colors = ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)", "var(--color-chart-5)"]
 
   return (
     <ChartFigure label="Site Utilisation" summary={summary} dataLength={data.length}>
@@ -712,7 +547,7 @@ function SiteUtilisationChart({ rows, chartType }: { rows: Placement[]; chartTyp
         <>
           {chartType === "bar" ? (
             <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
-              <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={data} margin={CHART_MARGIN}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis allowDecimals={false} width={32} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -732,10 +567,10 @@ function SiteUtilisationChart({ rows, chartType }: { rows: Placement[]; chartTyp
               </BarChart>
             </ChartContainer>
           ) : chartType === "pie" ? (
-            <PieChartRenderer data={data.map((d, i) => ({ ...d, fill: colors[i % colors.length] }))} activeIndex={activeIndex} />
+            <PieChartRenderer data={coloredData} activeIndex={activeIndex} />
           ) : (
             <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
-              <BarChart data={data} layout="vertical" margin={{ top: 8, right: 8, left: 4, bottom: 0 }}>
+              <BarChart data={data} layout="vertical" margin={CHART_MARGIN_HORIZONTAL}>
                 <CartesianGrid horizontal={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis type="category" dataKey="name" width={130} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -792,7 +627,7 @@ function CompletionOutcomesChart({ rows, chartType }: { rows: Placement[]; chart
         {(activeIndex) => (
           <>
             <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
-              <BarChart data={barData} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+              <BarChart data={barData} margin={CHART_MARGIN}>
                 <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                 <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                 <YAxis allowDecimals={false} width={32} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} domain={[0, 100]} />
@@ -923,7 +758,7 @@ function UpcomingTimelineChart({ rows, chartType }: { rows: Placement[]; chartTy
           {chartType === "line" ? (
             <div className="relative w-full">
               <ChartContainer config={AREA_CFG} className="h-[200px] w-full">
-                <LineChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                <LineChart data={data} margin={CHART_MARGIN}>
                   <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                   <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                   <YAxis allowDecimals={false} width={32} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -961,7 +796,7 @@ function UpcomingTimelineChart({ rows, chartType }: { rows: Placement[]; chartTy
           ) : chartType === "bar" ? (
             <div className="relative w-full">
               <ChartContainer config={AREA_CFG} className="h-[200px] w-full">
-                <BarChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                <BarChart data={data} margin={CHART_MARGIN}>
                   <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                   <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                   <YAxis allowDecimals={false} width={32} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -989,7 +824,7 @@ function UpcomingTimelineChart({ rows, chartType }: { rows: Placement[]; chartTy
           ) : (
             <div className="relative w-full">
               <ChartContainer config={AREA_CFG} className="h-[200px] w-full">
-                <AreaChart data={data} margin={{ top: 8, right: 8, left: 0, bottom: 0 }}>
+                <AreaChart data={data} margin={CHART_MARGIN}>
                   <CartesianGrid vertical={false} strokeDasharray="3 3" className="stroke-border" />
                   <XAxis dataKey="name" tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
                   <YAxis allowDecimals={false} width={32} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
@@ -1052,7 +887,7 @@ function PieChartRenderer({
   data: { name: string; value: number; fill?: string }[]
   activeIndex?: number | null
 }) {
-  const colors = ["var(--color-chart-1)", "var(--color-chart-2)", "var(--color-chart-3)", "var(--color-chart-4)", "var(--color-chart-5)"]
+  const colors = PALETTE_COLORS
   return (
     <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
       <PieChart>
@@ -1091,7 +926,7 @@ function HBarChartRenderer({
 }) {
   return (
     <ChartContainer config={BAR_CFG} className="h-[220px] w-full">
-      <BarChart data={data} layout="vertical" margin={{ top: 8, right: 8, left: 4, bottom: 0 }}>
+      <BarChart data={data} layout="vertical" margin={CHART_MARGIN_HORIZONTAL}>
         <CartesianGrid horizontal={false} strokeDasharray="3 3" className="stroke-border" />
         <XAxis type="number" allowDecimals={false} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />
         <YAxis type="category" dataKey="name" width={120} tick={{ fontSize: 11 }} tickLine={false} axisLine={false} />

package/template/components/dedicated-search-recents.tsx

@@ -0,0 +1,96 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+
+import { Button } from "@/components/ui/button"
+import { Tip } from "@/components/ui/tip"
+import type { DedicatedSearchRecentsController } from "@/lib/dedicated-search-recents"
+
+export interface DedicatedSearchRecentsProps {
+  recents: Pick<DedicatedSearchRecentsController, "read" | "record" | "clear" | "eventName">
+  searchParamsKey: string
+  replacePath: string
+  patchSearchParams: (current: URLSearchParams, submittedText: string) => URLSearchParams
+  sectionTitle?: string
+  clearLabel?: string
+}
+
+/**
+ * Recent query rows — reads storage only after mount so SSR and first client paint match (no hydration drift).
+ */
+export function DedicatedSearchRecents({
+  recents,
+  searchParamsKey,
+  replacePath,
+  patchSearchParams,
+  sectionTitle = "Recently searched",
+  clearLabel = "Clear",
+}: DedicatedSearchRecentsProps) {
+  const router = useRouter()
+  const [items, setItems] = React.useState<string[]>([])
+
+  React.useEffect(() => {
+    const sync = () => setItems(recents.read())
+    sync()
+    window.addEventListener(recents.eventName, sync)
+    window.addEventListener("storage", sync)
+    return () => {
+      window.removeEventListener(recents.eventName, sync)
+      window.removeEventListener("storage", sync)
+    }
+  }, [recents])
+
+  const runQuery = React.useCallback(
+    (q: string) => {
+      recents.record(q)
+      const next = patchSearchParams(new URLSearchParams(searchParamsKey), q)
+      const qs = next.toString()
+      router.replace(qs ? `${replacePath}?${qs}` : replacePath, { scroll: false })
+    },
+    [patchSearchParams, recents, replacePath, router, searchParamsKey],
+  )
+
+  if (items.length === 0) {
+    return null
+  }
+
+  const headingId = "dedicated-search-recents-heading"
+
+  return (
+    <section className="min-w-0" aria-labelledby={headingId}>
+      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2">
+        <h2 id={headingId} className="text-base font-semibold tracking-tight text-foreground">
+          {sectionTitle}
+        </h2>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-auto min-h-6 shrink-0 px-2 py-1 text-sm text-muted-foreground"
+          onClick={() => recents.clear()}
+        >
+          {clearLabel}
+        </Button>
+      </div>
+      <div className="mt-2 divide-y divide-border overflow-hidden rounded-xl border border-border bg-card sm:mt-2.5">
+        {items.map((q, i) => (
+          <div key={`${q}-${i}`} className="min-w-0">
+            <Tip side="bottom" label={`Run this search again — ${q}`}>
+              <button
+                type="button"
+                aria-label={`Run this search again — ${q}`}
+                className="flex w-full min-h-11 items-center gap-3 px-4 py-3 text-left text-sm transition-colors hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset sm:px-5 sm:py-3.5"
+                onClick={() => runQuery(q)}
+              >
+                <i className="fa-light fa-clock-rotate-left size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+                <span className="min-w-0 flex-1 truncate font-medium text-foreground">{q}</span>
+                <i className="fa-light fa-chevron-right shrink-0 text-xs text-muted-foreground" aria-hidden="true" />
+              </button>
+            </Tip>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}

package/template/components/dedicated-search-url-composer.tsx

@@ -0,0 +1,112 @@
+"use client"
+
+import * as React from "react"
+import { useRouter } from "next/navigation"
+
+import { AskLeoComposer } from "@/components/ask-leo-composer"
+import { cn } from "@/lib/utils"
+
+export interface DedicatedSearchUrlComposerProps {
+  /** Serialized `URLSearchParams` for the active route (stable string from parent). */
+  searchParamsKey: string
+  /** Base path for `router.replace` (no query). */
+  replacePath: string
+  /**
+   * Merge submitted text into the next query string. Hub supplies domain rules
+   * (e.g. preserve `scope=` / toggles while updating `q=`).
+   */
+  patchSearchParams: (current: URLSearchParams, submittedText: string) => URLSearchParams
+  /** Optional — record a successful non-empty submission (e.g. recents). */
+  onRecordSubmission?: (trimmed: string) => void
+  /** `hero` — centered landing; `default` — inset under a list header. */
+  layout?: "default" | "hero"
+  animatedPlaceholders: readonly string[] | string[]
+  animatedPlaceholderIntervalMs?: number
+  animatedPlaceholderMaxLines?: 1 | 2
+  placeholder?: string
+  inputLabel?: string
+  submitAppearance?: "search" | "send"
+  submitButtonAriaLabel?: string
+  /** Screen-reader-only instructions for the field (not the sole format hint). */
+  srOnlyDescription: React.ReactNode
+  composerClassName?: string
+}
+
+/**
+ * AI-styled composer that updates the URL via `router.replace` — does not open Ask Leo.
+ */
+export function DedicatedSearchUrlComposer({
+  searchParamsKey,
+  replacePath,
+  patchSearchParams,
+  onRecordSubmission,
+  layout = "default",
+  animatedPlaceholders,
+  animatedPlaceholderIntervalMs = 4800,
+  animatedPlaceholderMaxLines = 2,
+  placeholder = "Search…",
+  inputLabel = "Search",
+  submitAppearance = "search",
+  submitButtonAriaLabel = "Run search",
+  srOnlyDescription,
+  composerClassName,
+}: DedicatedSearchUrlComposerProps) {
+  const router = useRouter()
+  const sp = React.useMemo(() => new URLSearchParams(searchParamsKey), [searchParamsKey])
+  const qFromUrl = sp.get("q") ?? ""
+  const [value, setValue] = React.useState(qFromUrl)
+  const [expanded, setExpanded] = React.useState(false)
+
+  React.useEffect(() => {
+    setValue(qFromUrl)
+  }, [qFromUrl])
+
+  const onSubmit = React.useCallback(
+    (message: string) => {
+      const trimmed = message.trim()
+      if (trimmed) onRecordSubmission?.(trimmed)
+      const next = patchSearchParams(new URLSearchParams(searchParamsKey), trimmed)
+      const qs = next.toString()
+      router.replace(qs ? `${replacePath}?${qs}` : replacePath, { scroll: false })
+    },
+    [onRecordSubmission, patchSearchParams, replacePath, router, searchParamsKey],
+  )
+
+  return (
+    <div className={cn(layout === "hero" ? "min-w-0" : "px-4 pb-3 lg:px-6")}>
+      <p className="sr-only">{srOnlyDescription}</p>
+      <div
+        className={cn(
+          "min-w-0 max-w-full border border-[color:var(--control-border)] bg-card shadow-sm transition-[border-radius,padding,box-shadow] duration-200 ease-out",
+          layout === "hero" && "shadow-md",
+          expanded
+            ? layout === "hero"
+              ? "rounded-2xl p-1.5 shadow-md"
+              : "rounded-2xl p-1.5 shadow-md"
+            : layout === "hero"
+              ? "rounded-2xl px-1.5 py-1.5 sm:px-2 sm:py-2"
+              : "rounded-full px-1 py-1",
+        )}
+      >
+        <AskLeoComposer
+          value={value}
+          onChange={setValue}
+          onSubmit={onSubmit}
+          onExpandedChange={setExpanded}
+          animatedPlaceholders={[...animatedPlaceholders]}
+          animatedPlaceholderIntervalMs={animatedPlaceholderIntervalMs}
+          animatedPlaceholderMaxLines={animatedPlaceholderMaxLines}
+          leadingSlot="ai-mark"
+          inputLabel={inputLabel}
+          submitAppearance={submitAppearance}
+          submitButtonAriaLabel={submitButtonAriaLabel}
+          placeholder={placeholder}
+          className={cn(
+            "[&_form>div]:rounded-none [&_form>div]:border-0 [&_form>div]:bg-transparent [&_form>div]:shadow-none",
+            composerClassName,
+          )}
+        />
+      </div>
+    </div>
+  )
+}

package/template/components/getting-started.tsx

@@ -237,7 +237,7 @@ function ChecklistVariant() {
                 <i className="fa-light fa-ellipsis-vertical" aria-hidden="true" />
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="end" className="w-44">
+            <DropdownMenuContent align="end">
               <DropdownMenuItem onSelect={() => setDismissed(true)}>
                 <i className="fa-light fa-box-archive me-2 text-xs" aria-hidden="true" />
                 Dismiss