@exxatdesignux/ui 0.0.6 → 0.0.7

package/template/fontawesome-subset.manifest.json

@@ -0,0 +1,190 @@
+{
+  "kitId": "d9bd5774e0",
+  "generatedAt": "2026-04-23T07:50:58.982Z",
+  "sourcePaths": [
+    "apps/web/{app,components,lib,contexts,hooks}",
+    "packages/ui/src"
+  ],
+  "stylesDetected": [
+    "duotone",
+    "light",
+    "solid"
+  ],
+  "duotoneNote": "Icons used as fa-duotone fa-solid … require Duotone + Solid in Kit settings (e.g. star-christmas).",
+  "iconCount": 166,
+  "icons": [
+    "arrow-down",
+    "arrow-down-az",
+    "arrow-down-to-line",
+    "arrow-left",
+    "arrow-left-to-line",
+    "arrow-right",
+    "arrow-right-from-bracket",
+    "arrow-right-to-line",
+    "arrow-rotate-right",
+    "arrow-trend-down",
+    "arrow-trend-up",
+    "arrow-up",
+    "arrow-up-arrow-down",
+    "arrow-up-az",
+    "arrow-up-right",
+    "arrow-up-right-from-square",
+    "arrows-rotate",
+    "arrows-up-down",
+    "ban",
+    "bell",
+    "book-open",
+    "books",
+    "border-all",
+    "box-archive",
+    "briefcase",
+    "building",
+    "bullseye",
+    "calendar",
+    "calendar-check",
+    "calendar-clock",
+    "calendar-day",
+    "calendar-days",
+    "calendar-week",
+    "calendar-xmark",
+    "certificate",
+    "chart-area",
+    "chart-bar",
+    "chart-column",
+    "chart-line",
+    "chart-mixed",
+    "chart-pie",
+    "check",
+    "chevron-down",
+    "chevron-left",
+    "chevron-right",
+    "chevron-up",
+    "chevrons-left",
+    "chevrons-right",
+    "circle",
+    "circle-1",
+    "circle-2",
+    "circle-3",
+    "circle-check",
+    "circle-dot",
+    "circle-exclamation",
+    "circle-half-stroke",
+    "circle-info",
+    "circle-notch",
+    "circle-play",
+    "circle-question",
+    "circle-user",
+    "circle-xmark",
+    "clipboard-check",
+    "clipboard-list",
+    "clock",
+    "clock-rotate-left",
+    "comments",
+    "copy",
+    "credit-card",
+    "database",
+    "down-to-line",
+    "download",
+    "ellipsis",
+    "ellipsis-vertical",
+    "envelope",
+    "envelope-open",
+    "eye",
+    "eye-slash",
+    "file",
+    "file-chart-column",
+    "file-check",
+    "file-csv",
+    "file-excel",
+    "file-lines",
+    "file-pdf",
+    "file-pen",
+    "file-signature",
+    "filter",
+    "flag",
+    "folder",
+    "folder-tree",
+    "font",
+    "gear",
+    "graduation-cap",
+    "grid-2",
+    "grip-dots-vertical",
+    "hashtag",
+    "headset",
+    "hospital",
+    "hourglass-half",
+    "house-laptop",
+    "layer-group",
+    "link",
+    "list",
+    "list-check",
+    "list-ol",
+    "location-dot",
+    "magnifying-glass",
+    "map-location",
+    "maximize",
+    "microphone",
+    "minus",
+    "moon",
+    "note-sticky",
+    "octagon-xmark",
+    "palette",
+    "paper-plane-top",
+    "paperclip",
+    "pen",
+    "pen-field",
+    "pen-ruler",
+    "pen-to-square",
+    "phone",
+    "play",
+    "plug",
+    "plus",
+    "robot",
+    "rocket-launch",
+    "rotate",
+    "rotate-left",
+    "route",
+    "share-nodes",
+    "shield-check",
+    "sidebar",
+    "sigma",
+    "signal",
+    "sitemap",
+    "sliders",
+    "spinner",
+    "spinner-third",
+    "square-plus",
+    "star",
+    "star-christmas",
+    "stethoscope",
+    "sun",
+    "sun-bright",
+    "table",
+    "table-columns",
+    "table-list",
+    "tag",
+    "text-width",
+    "thumbtack-slash",
+    "trash",
+    "triangle-exclamation",
+    "up-to-line",
+    "user",
+    "user-check",
+    "user-doctor",
+    "user-gear",
+    "user-graduate",
+    "user-magnifying-glass",
+    "user-nurse",
+    "user-plus",
+    "user-tie",
+    "users",
+    "xmark"
+  ],
+  "kitSteps": [
+    "Open https://fontawesome.com/kits and select this kit.",
+    "Settings → Icon Selection → By Icon → add every name from `icons` (search in FA).",
+    "Settings → Icon Selection → By Style → enable only: Light, Solid, and Duotone if duotone icons are used.",
+    "Save the kit, then verify the app (hard refresh). Missing icons show as empty squares.",
+    "Re-run `pnpm fa:subset-audit` after adding icons and commit the updated manifest."
+  ]
+}

package/template/hooks/use-app-theme.ts

@@ -0,0 +1 @@
+export * from "../../../packages/ui/src/hooks/use-app-theme"

package/template/hooks/use-coach-mark.ts

@@ -0,0 +1 @@
+export * from "../../../packages/ui/src/hooks/use-coach-mark"

package/template/hooks/use-mobile.ts

@@ -0,0 +1 @@
+export * from "../../../packages/ui/src/hooks/use-mobile"

package/template/hooks/use-mod-key-label.ts

@@ -0,0 +1 @@
+export * from "../../../packages/ui/src/hooks/use-mod-key-label"

package/template/lib/ask-leo-route-context.ts

@@ -0,0 +1,133 @@
+/**
+ * Route-derived defaults for Ask Leo when no page calls `useAskLeoPageContext`.
+ * Keeps titles and starters aligned with primary nav (not raw URL segments).
+ */
+
+export interface AskLeoRouteContextPayload {
+  title: string
+  description?: string
+  suggestions?: string[]
+  data?: Record<string, unknown>
+}
+
+/** Fallback starters when a page provides no `suggestions`. */
+export const ASK_LEO_GENERIC_SUGGESTIONS = [
+  "Which students are at risk of non-compliance?",
+  "Show me placements ending this month",
+  "Summarize placement progress",
+  "Compare this cycle vs. last cycle",
+]
+
+export function getAskLeoRouteContext(pathname: string | null): AskLeoRouteContextPayload {
+  if (!pathname || pathname === "/") {
+    return {
+      title: "Dashboard",
+      description: "Overview of metrics, charts, and AI insights.",
+      suggestions: [
+        "What changed in my key metrics this week?",
+        "Summarize tasks and insights I should act on",
+        "Explain the trend on the main placement chart",
+      ],
+    }
+  }
+
+  if (pathname.startsWith("/dashboard")) {
+    return {
+      title: "Dashboard",
+      description: "Overview of metrics, charts, and AI insights.",
+      suggestions: [
+        "What changed in my key metrics this week?",
+        "Summarize tasks and insights I should act on",
+        "Which chart should I look at first for placement health?",
+      ],
+    }
+  }
+
+  if (pathname.startsWith("/data-list")) {
+    return {
+      title: "Placements",
+      description: "List, filter, and export placement records — table, board, and dashboard views.",
+      suggestions: [
+        "Which placements end in the next 30 days?",
+        "Summarize placements by site for this lifecycle tab",
+        "What filters would narrow this list to at-risk students?",
+      ],
+    }
+  }
+
+  if (pathname.startsWith("/team")) {
+    return {
+      title: "Team",
+      description: "Directory and workload for coordinators and faculty.",
+      suggestions: [
+        "Who owns the most active placements?",
+        "Summarize team workload by program",
+      ],
+    }
+  }
+
+  if (pathname.startsWith("/compliance")) {
+    return {
+      title: "Compliance",
+      description: "Compliance tracking and outstanding requirements.",
+      suggestions: [
+        "List items due this week",
+        "Which students have outstanding compliance tasks?",
+      ],
+    }
+  }
+
+  if (pathname.startsWith("/question-bank")) {
+    return {
+      title: "Question bank",
+      description: "Assessment and question library.",
+      suggestions: [
+        "Suggest questions for a clinical reasoning quiz",
+        "How do I filter by difficulty or topic?",
+      ],
+    }
+  }
+
+  if (pathname.startsWith("/rotations")) {
+    return {
+      title: "Rotations",
+      description: "Rotation schedules and capacity.",
+      suggestions: [
+        "Summarize rotation blocks for this term",
+        "Which sites have open capacity?",
+      ],
+    }
+  }
+
+  if (pathname.startsWith("/settings")) {
+    return {
+      title: "Settings",
+      description: "Appearance, banner, and guided tours for this browser.",
+      suggestions: [
+        "How do I reset onboarding tours?",
+        "Where is high contrast configured?",
+      ],
+    }
+  }
+
+  if (pathname.startsWith("/help")) {
+    return {
+      title: "Get help",
+      description: "Exxat Help Center and support resources.",
+      suggestions: [
+        "Where do I find training articles?",
+        "How do I contact support?",
+      ],
+    }
+  }
+
+  const last = pathname.split("/").filter(Boolean).pop() ?? "this page"
+  const title = last
+    .replace(/[-_]/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+
+  return {
+    title,
+    suggestions: ASK_LEO_GENERIC_SUGGESTIONS,
+  }
+}

package/template/lib/chart-keyboard-selection.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vitest"
+
+import { CHART_KBD_ACTIVE_BAR, CHART_KBD_ACTIVE_PIE_SHAPE } from "./chart-keyboard-selection"
+
+describe("chart-keyboard-selection", () => {
+  it("exports bar active styling for Recharts", () => {
+    expect(CHART_KBD_ACTIVE_BAR).toMatchObject({
+      stroke: "var(--ring)",
+      strokeWidth: 2,
+      fillOpacity: 1,
+    })
+  })
+
+  it("exports pie active shape for Recharts", () => {
+    expect(CHART_KBD_ACTIVE_PIE_SHAPE).toMatchObject({
+      stroke: "var(--ring)",
+      strokeWidth: 3,
+    })
+  })
+})

package/template/lib/chart-keyboard-selection.ts

@@ -0,0 +1,17 @@
+/**
+ * Keyboard selection styling for Recharts — matches `charts-overview` (dashboard gallery)
+ * so Data view dashboards use the same ring-on-active pattern instead of opacity-only dimming.
+ */
+
+/** Passed to `<Bar activeBar={…} activeIndex={…} />` */
+export const CHART_KBD_ACTIVE_BAR = {
+  stroke: "var(--ring)",
+  strokeWidth: 2,
+  fillOpacity: 1,
+} as const
+
+/** Passed to `<Pie activeShape={…} activeIndex={…} />` (see DonutChartContent) */
+export const CHART_KBD_ACTIVE_PIE_SHAPE = {
+  strokeWidth: 3,
+  stroke: "var(--ring)",
+} as const

package/template/lib/chart-line-dash.ts

@@ -0,0 +1,16 @@
+/**
+ * Per-series stroke dash patterns for multi-line Recharts — supplements hue (WCAG 1.4.1).
+ * Index 0 = solid; later series use distinct patterns so lines stay distinguishable in grayscale / CVD.
+ */
+export const CHART_LINE_STROKE_DASH = [
+  undefined,
+  "6 4",
+  "2 3",
+  "10 3 2 3",
+  "8 4 2 4 2 4",
+] as const
+
+export function chartLineStrokeDash(seriesIndex: number): string | undefined {
+  const i = ((seriesIndex % CHART_LINE_STROKE_DASH.length) + CHART_LINE_STROKE_DASH.length) % CHART_LINE_STROKE_DASH.length
+  return CHART_LINE_STROKE_DASH[i] as string | undefined
+}

package/template/lib/coach-mark-registry.ts

@@ -0,0 +1,68 @@
+/**
+ * Coach Mark Registry — central definition of all coach mark flows.
+ *
+ * Used by:
+ *   • Settings page to list/reset/preview flows
+ *   • Individual pages to look up their flow steps
+ */
+
+export interface CoachMarkFlowDef {
+  /** Unique flow ID — matches the key in localStorage */
+  id: string
+  /** Human-readable name shown in settings */
+  name: string
+  /** Short description of what the tour covers */
+  description: string
+  /** Which page this flow runs on */
+  page: string
+  /** Page URL (for "Preview" navigation) */
+  pageUrl: string
+  /** Number of steps */
+  stepCount: number
+}
+
+export const COACH_MARK_FLOWS: CoachMarkFlowDef[] = [
+  {
+    id: "dashboard-tour",
+    name: "Dashboard Tour",
+    description:
+      "Introduces the dashboard — key metrics, AI insights, Ask Leo, and view switching.",
+    page: "Dashboard",
+    pageUrl: "/dashboard",
+    stepCount: 4,
+  },
+  {
+    id: "placements-views-tour",
+    name: "Views & Properties Tour",
+    description:
+      "Walks through view tabs, customisation, adding views, search, filters, and the Properties panel.",
+    page: "Placements",
+    pageUrl: "/data-list",
+    stepCount: 6,
+  },
+  {
+    id: "placements-dashboard-customize",
+    name: "Customize dashboard (Placements)",
+    description:
+      "Highlights Edit layout on the Data view dashboard toolbar — drag widgets, chart types, and width.",
+    page: "Placements",
+    pageUrl: "/data-list",
+    stepCount: 1,
+  },
+  {
+    id: "team-dashboard-customize",
+    name: "Customize dashboard (Team)",
+    description: "Same as Placements — Edit layout for the Team Data dashboard.",
+    page: "Team",
+    pageUrl: "/team",
+    stepCount: 1,
+  },
+  {
+    id: "compliance-dashboard-customize",
+    name: "Customize dashboard (Compliance)",
+    description: "Same as Placements — Edit layout for the Compliance Data dashboard.",
+    page: "Compliance",
+    pageUrl: "/compliance",
+    stepCount: 1,
+  },
+]

package/template/lib/command-menu-config.ts

@@ -0,0 +1,127 @@
+/**
+ * Command palette (⌘K) — types, static groups, and `buildCommandMenuConfig()`.
+ * Optional **`dataGroups`** can be passed from the app shell when you want searchable row data.
+ */
+
+export type CommandMenuItem = {
+  id: string
+  label: string
+  /** cmdk filter keywords */
+  keywords?: string
+  /** Font Awesome classes for link rows */
+  icon?: string
+  /** Navigate to this in-app route */
+  href?: string
+  /** If set, opens Ask Leo with this prompt (no navigation) */
+  askLeoPrompt?: string
+}
+
+export type CommandMenuGroup = {
+  id: string
+  heading: string
+  items: CommandMenuItem[]
+  /**
+   * When true, this group is not rendered until the user types a non-empty search.
+   * Use for large row indexes (e.g. placements) so the palette does not list every record on open.
+   */
+  searchOnly?: boolean
+}
+
+export type CommandMenuConfig = {
+  /** cmdk accessible name */
+  commandLabel: string
+  dialogTitle: string
+  dialogDescription: string
+  inputPlaceholder: string
+  inputAriaLabel: string
+  emptyMessage: string
+  closeMenuAriaLabel: string
+  groups: CommandMenuGroup[]
+}
+
+const COMMAND_MENU_SHELL: Omit<CommandMenuConfig, "groups"> = {
+  commandLabel: "Command menu",
+  dialogTitle: "Search",
+  dialogDescription:
+    "Search pages and components, or use AI suggestions. Use arrow keys to move through results, Enter to open, Escape to close.",
+  inputPlaceholder: "Search or ask Leo anything…",
+  inputAriaLabel: "Search pages, components, or ask Leo",
+  emptyMessage: "No results found.",
+  closeMenuAriaLabel: "Close command menu",
+}
+
+/** AI prompts, navigation, library, and patterns — fixed product chrome (not row data). */
+const STATIC_COMMAND_GROUPS: CommandMenuGroup[] = [
+  {
+    id: "ai",
+    heading: "AI suggestions",
+    items: [
+      {
+        id: "ai-compliance",
+        label: "Which students are at risk of non-compliance?",
+        keywords: "leo ai assistant compliance students risk",
+        askLeoPrompt: "Which students are at risk of non-compliance?",
+      },
+      {
+        id: "ai-placements-month",
+        label: "Show me placements ending this month",
+        keywords: "leo ai placements calendar month",
+        askLeoPrompt: "Show me placements ending this month",
+      },
+      {
+        id: "ai-summarize",
+        label: "Summarize placement progress",
+        keywords: "leo ai summary placements progress",
+        askLeoPrompt: "Summarize placement progress",
+      },
+      {
+        id: "ai-compare-cycle",
+        label: "Compare this cycle vs. last cycle",
+        keywords: "leo ai compare cycle trend",
+        askLeoPrompt: "Compare this cycle vs. last cycle",
+      },
+    ],
+  },
+  {
+    id: "navigation",
+    heading: "Navigation",
+    items: [
+      { id: "nav-dashboard", icon: "fa-light fa-grid-2", label: "Dashboard", href: "/dashboard" },
+      {
+        id: "nav-question-bank",
+        icon: "fa-light fa-books",
+        label: "Question bank",
+        href: "/question-bank",
+        keywords: "assessment items exam quiz",
+      },
+      { id: "nav-placements", icon: "fa-light fa-user-graduate", label: "Placements", href: "/data-list" },
+      { id: "nav-rotations", icon: "fa-light fa-arrows-rotate", label: "Rotations", href: "/rotations" },
+      { id: "nav-team", icon: "fa-light fa-users", label: "Team", href: "/team" },
+      { id: "nav-compliance", icon: "fa-light fa-shield-check", label: "Compliance", href: "/compliance" },
+      { id: "nav-settings", icon: "fa-light fa-gear", label: "Settings", href: "/settings" },
+    ],
+  },
+]
+
+export type BuildCommandMenuConfigOptions = {
+  /**
+   * Searchable row groups from your data layer (mock or API). Omitted or empty = no data rows.
+   * Order: inserted after AI suggestions, before Navigation / Components / Patterns.
+   */
+  dataGroups?: CommandMenuGroup[]
+}
+
+/**
+ * Merge shell copy + static product groups with optional **`dataGroups`** from the app.
+ */
+export function buildCommandMenuConfig(
+  options: BuildCommandMenuConfigOptions = {},
+): CommandMenuConfig {
+  const { dataGroups = [] } = options
+  const [aiGroup, ...staticRest] = STATIC_COMMAND_GROUPS
+
+  return {
+    ...COMMAND_MENU_SHELL,
+    groups: [aiGroup, ...dataGroups, ...staticRest],
+  }
+}

package/template/lib/command-menu-search-data.ts

@@ -0,0 +1,44 @@
+/**
+ * Searchable ⌘K rows from mock/API data. Wire new sources here — not in `command-menu-config.ts`.
+ */
+
+import type { CommandMenuGroup, CommandMenuItem } from "@/lib/command-menu-config"
+import { ALL_PLACEMENTS } from "@/lib/mock/placements"
+
+function placementSearchItems(): CommandMenuItem[] {
+  return ALL_PLACEMENTS.map((p) => {
+    const nameParts = p.student.trim().split(/\s+/)
+    return {
+      id: `placement-${p.id}`,
+      label: `${p.student} — ${p.internship}`,
+      icon: "fa-light fa-user-graduate",
+      href: "/data-list",
+      keywords: [
+        p.student,
+        ...nameParts,
+        p.program,
+        p.site,
+        p.internship,
+        p.specialization,
+        p.email,
+        p.supervisor,
+        p.status,
+        p.compliance,
+      ]
+        .filter(Boolean)
+        .join(" "),
+    }
+  })
+}
+
+/** Placements (student names, sites, programs, …) — passed as `dataGroups` in the app layout. */
+export function getCommandMenuSearchDataGroups(): CommandMenuGroup[] {
+  return [
+    {
+      id: "placements",
+      heading: "Placements",
+      items: placementSearchItems(),
+      searchOnly: true,
+    },
+  ]
+}

package/template/lib/conditional-rule-match.ts

@@ -0,0 +1,32 @@
+import type { ConditionalRule } from "@/components/table-properties/types"
+
+/** First matching conditional rule background for a row (same logic as DataTable cells). */
+export function getConditionalRowBackground<T extends Record<string, unknown>>(
+  row: T,
+  rules: ConditionalRule[] | undefined,
+): string | undefined {
+  if (!rules?.length) return undefined
+  for (const rule of rules) {
+    const cellVal = String(row[rule.fieldKey as keyof T] ?? "")
+    const v = cellVal.trim()
+    switch (rule.operator) {
+      case "is":
+        if (rule.values.length > 0 && rule.values.includes(v)) return rule.bgColor
+        break
+      case "is_not":
+        if (rule.values.length > 0 && !rule.values.includes(v)) return rule.bgColor
+        break
+      case "contains":
+        if (rule.values.length > 0 && rule.values.some(val => v.toLowerCase().includes(val.toLowerCase())))
+          return rule.bgColor
+        break
+      case "not_contains":
+        if (rule.values.length > 0 && !rule.values.some(val => v.toLowerCase().includes(val.toLowerCase())))
+          return rule.bgColor
+        break
+      default:
+        break
+    }
+  }
+  return undefined
+}

package/template/lib/dashboard-customize-coach-mark.ts

@@ -0,0 +1,18 @@
+/**
+ * Shared coach-mark step for **Data** view dashboard — Edit layout (Placements, Team, Compliance).
+ * Targets the toolbar pen-ruler control (`aria-label="Edit dashboard layout"`).
+ */
+
+import type { CoachMarkStep } from "@/hooks/use-coach-mark"
+
+export const DASHBOARD_CUSTOMIZE_COACH_STEPS: CoachMarkStep[] = [
+  {
+    id: "dashboard-customize-edit",
+    target: "[aria-label='Edit dashboard layout']",
+    side: "bottom",
+    align: "end",
+    title: "Customize your dashboard",
+    description:
+      "Turn on Edit layout to drag widgets, change chart types, resize to full width, and show or hide cards. Changes save automatically for this hub.",
+  },
+]