@exxatdesignux/ui 0.0.6 → 0.0.7

package/template/components/leo-insight-indicator.tsx

@@ -0,0 +1,364 @@
+"use client"
+
+/**
+ * LeoInsightIndicator — reusable AI insight chip + popover.
+ *
+ * Usage:
+ *   <LeoInsightIndicator insight={leoInsight} chartTitle="Placement Trends" />
+ *   <LeoInsightIndicator insight={leoInsight} chartTitle="..." triggerLayout="plot-marker" />
+ *
+ * Two trigger layouts:
+ *   "toolbar"     — compact "Insight" pill in a card header corner (default)
+ *   "plot-marker" — sits above an anchored data point on the chart canvas
+ *
+ * Palette is brand-only. Direction is communicated via icon SHAPE + kind LABEL
+ * + signed delta value (never colour alone — WCAG 1.4.1).
+ */
+
+import * as React from "react"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+import { Button } from "@/components/ui/button"
+import { Kbd } from "@/components/ui/kbd"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+import { AskLeoShortcutKbds, useAskLeo } from "@/components/ask-leo-sidebar"
+import { cn } from "@/lib/utils"
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Types
+// ─────────────────────────────────────────────────────────────────────────────
+
+/** Optional anchor for drawing Leo on the plot (reference line + marker). */
+export type ChartLeoInsightAnchor = {
+  /** Categorical value on the chart's X axis (e.g. month label). */
+  xValue: string
+  /** Fixed Y in data space; overrides yDataKeys / yCombine when set. */
+  yValue?: number
+  /** Row keys to combine; required when yValue is omitted. */
+  yDataKeys?: string[]
+  /** How to derive Y from yDataKeys: top of stacked bars = "sum", overlaid lines = "max". */
+  yCombine?: "max" | "sum"
+}
+
+/**
+ * Semantic kind of the insight — drives color, icon, and chip label.
+ * Defaults to "anomaly" when unset.
+ */
+export type ChartLeoInsightKind = "spike" | "dip" | "anomaly" | "trend"
+
+/** Smart scan copy for a chart — opens in a popover; CTA can prefill Ask Leo. */
+export type ChartLeoInsight = {
+  /** Short attention line (what stands out). */
+  headline: string
+  /** Plain-language explanation. */
+  explanation: string
+  /** Overrides the default prompt sent to Ask Leo. */
+  askLeoPrompt?: string
+  /**
+   * When set, pair with `ChartLeoPlotInsightOverlay` for an on-point pulse
+   * + guide line + chip positioned directly on the chart.
+   */
+  anchor?: ChartLeoInsightAnchor
+  /** Semantic shape of the insight. Defaults to "anomaly". */
+  kind?: ChartLeoInsightKind
+  /** Magnitude chip, e.g. `{ value: "-24%", label: "vs last Dec" }`. */
+  delta?: { value: string; label?: string }
+  /** 2–4 supporting facts shown as bullets in the popover. */
+  bullets?: string[]
+  /** Optional secondary quick-actions alongside the Ask Leo CTA. */
+  actions?: Array<{
+    label: string
+    icon?: string
+    onSelect?: () => void
+    href?: string
+  }>
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Internal constants
+// ─────────────────────────────────────────────────────────────────────────────
+
+const LEO_KIND_META: Record<ChartLeoInsightKind, { icon: string; label: string }> = {
+  spike:   { icon: "fa-arrow-trend-up",   label: "Spike"   },
+  dip:     { icon: "fa-arrow-trend-down", label: "Dip"     },
+  anomaly: { icon: "fa-wave-pulse",       label: "Anomaly" },
+  trend:   { icon: "fa-sparkles",         label: "Insight" },
+}
+
+export const LEO_TOKENS = {
+  dotClass:    "bg-brand",
+  iconClass:   "text-brand",
+  softBgClass: "bg-brand/10",
+  borderClass: "border-brand/50",
+  cssVar:      "var(--brand-color)",
+} as const
+
+function resolveLeoMeta(insight: ChartLeoInsight) {
+  return LEO_KIND_META[insight.kind ?? "anomaly"]
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Component
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Reusable Leo insight chip + popover.
+ *
+ * Renders a pill trigger button that opens a Radix Popover containing:
+ *   - Header: "Leo spotted" serif label + kind chip + close button
+ *   - Body: headline, delta label, explanation, optional bullets
+ *   - Footer: optional secondary actions + full-width "Ask Leo" CTA
+ */
+export function LeoInsightIndicator({
+  insight,
+  chartTitle,
+  triggerLayout = "toolbar",
+}: {
+  insight: ChartLeoInsight
+  chartTitle: string
+  triggerLayout?: "toolbar" | "plot-marker"
+}) {
+  const { openWithPrompt } = useAskLeo()
+  const [open, setOpen] = React.useState(false)
+  const titleId = React.useId()
+  const descriptionId = React.useId()
+
+  const defaultPrompt =
+    insight.askLeoPrompt ??
+    `For the chart "${chartTitle}": ${insight.headline} — ${insight.explanation} What should we do next?`
+
+  const meta = resolveLeoMeta(insight)
+  const isPlot = triggerLayout === "plot-marker"
+  const deltaValue = insight.delta?.value
+
+  const directionLabel =
+    insight.kind === "dip"     ? "decreased" :
+    insight.kind === "spike"   ? "increased" :
+    insight.kind === "anomaly" ? "anomaly detected" : "insight"
+
+  const ariaFull = deltaValue
+    ? `Leo insight: ${directionLabel} ${deltaValue}. ${insight.headline}.`
+    : `Leo insight: ${insight.headline}.`
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <button
+          type="button"
+          aria-label={ariaFull}
+          aria-expanded={open}
+          aria-haspopup="dialog"
+          className={cn(
+            // WCAG 2.5.5 Target Size (AA): 28×28 min.
+            "relative inline-flex h-7 min-h-7 shrink-0 items-center gap-1.5 rounded-full border bg-card px-2.5 text-xs font-semibold shadow-sm",
+            "text-foreground",
+            LEO_TOKENS.borderClass,
+            "transition-[transform,background-color] duration-150",
+            "hover:-translate-y-[0.5px] hover:bg-card",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          )}
+        >
+          {/* Soft brand fill */}
+          <span
+            aria-hidden
+            className={cn("pointer-events-none absolute inset-0 rounded-full", LEO_TOKENS.softBgClass)}
+          />
+          <i
+            className={cn("fa-solid", meta.icon, "relative text-[12px]", LEO_TOKENS.iconClass)}
+            aria-hidden="true"
+          />
+          {deltaValue ? (
+            <span className="relative tabular-nums">{deltaValue}</span>
+          ) : !isPlot ? (
+            <span className="relative hidden sm:inline">Insight</span>
+          ) : null}
+        </button>
+      </PopoverTrigger>
+
+      <PopoverContent
+        className={cn(
+          "relative w-[min(20rem,calc(100vw-1.5rem))] overflow-hidden p-0",
+          "border border-border bg-background shadow-xl",
+          "hc:border-border hc:bg-card hc:shadow-none",
+          "forced-colors:border forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:shadow-none",
+        )}
+        align={isPlot ? "center" : "end"}
+        side={isPlot ? "top" : "bottom"}
+        sideOffset={isPlot ? 12 : 6}
+        aria-labelledby={titleId}
+        aria-describedby={descriptionId}
+      >
+        {/* Ambient brand glow */}
+        <div
+          aria-hidden
+          className="pointer-events-none absolute inset-0 forced-colors:hidden"
+          style={{
+            background:
+              "radial-gradient(ellipse 120% 80% at 50% 100%, oklch(from var(--brand-color) l c h / 0.08) 0%, transparent 68%)",
+          }}
+        />
+
+        {/* Screen-reader announcement */}
+        <span className="sr-only">
+          {`Leo spotted a ${meta.label.toLowerCase()}${deltaValue ? ` of ${deltaValue}` : ""}: ${insight.headline}`}
+        </span>
+
+        <div className="relative">
+          {/* ── Header ─────────────────────────────────────────────────── */}
+          <div className="flex items-center gap-2.5 border-b border-border px-3.5 pb-3 pt-3">
+            <span
+              aria-hidden
+              className="inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-brand/10"
+            >
+              <i className="fa-duotone fa-solid fa-star-christmas text-[11px] text-brand" aria-hidden="true" />
+            </span>
+
+            {/* Serif "Leo spotted" heading */}
+            <h1
+              className="text-base font-bold leading-tight tracking-tight text-foreground"
+              style={{ fontFamily: "var(--font-heading)" }}
+            >
+              Leo spotted
+            </h1>
+
+            {/* Kind + delta chip */}
+            <span
+              className={cn(
+                "ml-auto inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[11px] font-semibold text-foreground",
+                LEO_TOKENS.softBgClass,
+                LEO_TOKENS.borderClass,
+              )}
+            >
+              <i
+                className={cn("fa-solid", meta.icon, "text-[10px]", LEO_TOKENS.iconClass)}
+                aria-hidden="true"
+              />
+              <span>{meta.label}</span>
+              {deltaValue ? (
+                <>
+                  <span aria-hidden className="text-muted-foreground">·</span>
+                  <span className="tabular-nums">{deltaValue}</span>
+                </>
+              ) : null}
+            </span>
+
+            {/* Close — WCAG 2.5.5: 28×28 target + Tooltip */}
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  aria-label="Close insight"
+                  onClick={() => setOpen(false)}
+                  className={cn(
+                    "inline-flex size-7 min-h-7 min-w-7 shrink-0 items-center justify-center rounded-md text-muted-foreground",
+                    "transition-colors hover:bg-muted hover:text-foreground",
+                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+                  )}
+                >
+                  <i className="fa-solid fa-xmark text-[12px]" aria-hidden="true" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="top" className="flex items-center gap-1.5">
+                <span>Close</span>
+                <Kbd>Esc</Kbd>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+
+          {/* ── Body ───────────────────────────────────────────────────── */}
+          <div className="px-3.5 pb-3 pt-3">
+            <h3
+              id={titleId}
+              className="text-[13px] font-semibold leading-snug text-foreground"
+            >
+              {insight.headline}
+            </h3>
+            {insight.delta?.label ? (
+              <p className="mt-0.5 text-[11px] text-muted-foreground">
+                {insight.delta.label}
+              </p>
+            ) : null}
+            <p
+              id={descriptionId}
+              className="mt-2 text-[12.5px] leading-relaxed text-foreground"
+            >
+              {insight.explanation}
+            </p>
+
+            {insight.bullets && insight.bullets.length > 0 ? (
+              <ul className="mt-3 space-y-1.5">
+                {insight.bullets.map((b, i) => (
+                  <li
+                    key={i}
+                    className="flex items-start gap-2 text-[12px] leading-snug text-foreground"
+                  >
+                    <span
+                      aria-hidden
+                      className={cn(
+                        "mt-1.5 inline-block size-1.5 shrink-0 rounded-full",
+                        LEO_TOKENS.dotClass,
+                      )}
+                    />
+                    <span className="min-w-0 flex-1">{b}</span>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+          </div>
+
+          {/* ── Footer ─────────────────────────────────────────────────── */}
+          <div className="flex flex-col gap-1.5 border-t border-border px-2.5 py-2">
+            {insight.actions?.map((a) => {
+              const content = (
+                <>
+                  {a.icon ? (
+                    <i className={cn("fa-light", a.icon, "text-[11px]")} aria-hidden="true" />
+                  ) : null}
+                  <span>{a.label}</span>
+                </>
+              )
+              return (
+                <Button
+                  key={a.label}
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 min-h-8 w-full justify-center gap-1.5 px-2 text-[11.5px] text-foreground hover:text-foreground"
+                  onClick={() => {
+                    setOpen(false)
+                    a.onSelect?.()
+                  }}
+                  asChild={!!a.href}
+                >
+                  {a.href ? <a href={a.href}>{content}</a> : content}
+                </Button>
+              )
+            })}
+            <Button
+              type="button"
+              size="sm"
+              className="h-8 min-h-8 w-full justify-center gap-1.5 px-3 text-[11.5px]"
+              onClick={() => {
+                setOpen(false)
+                openWithPrompt(defaultPrompt)
+              }}
+            >
+              <i
+                className="fa-duotone fa-solid fa-star-christmas text-[11px] text-primary-foreground"
+                aria-hidden="true"
+              />
+              <span>Ask Leo</span>
+              <AskLeoShortcutKbds
+                variant="bare"
+                className="ml-0.5 hidden sm:inline-flex"
+              />
+            </Button>
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}

package/template/components/leo-typing-dots.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+/**
+ * Leo "thinking" dots.
+ *
+ * Character arc embedded in motion:
+ *   1. Enter — dots fade in from below, staggered.
+ *   2. Slow phase (~900 ms) — very gentle, meditative pulse. Almost still.
+ *      This is the "hmm, let me think…" moment.
+ *   3. Fast phase — suddenly switches to an energetic, high-amplitude pulse.
+ *      The "oh! I'm working on it" moment.
+ *   4. Exit — instead of vanishing, each dot continues its motion while
+ *      floating upward and fading. Feels like thoughts dispersing into an
+ *      answer. Runs inside an `<AnimatePresence>` at the call site.
+ *
+ * Used in the Ask Leo sidebar while a reply is pending; can be reused for
+ * any "thinking" affordance.
+ */
+
+import * as React from "react"
+import { motion, useReducedMotion, type Variants } from "motion/react"
+import { cn } from "@/lib/utils"
+
+type Phase = "slow" | "fast"
+
+// Each dot reads its index from `custom` so its delay is a clean function of
+// position, not hard-coded — keeps the stagger readable.
+const dotVariants: Variants = {
+  // Slow: barely moving, meditative. Duration long, amplitudes tiny.
+  slow: (i: number) => ({
+    opacity: [0.55, 0.8, 0.55],
+    scale:   [0.9, 1.0, 0.9],
+    y: 0,
+    transition: {
+      duration: 2.8,
+      repeat: Infinity,
+      ease: [0.45, 0.05, 0.5, 1],
+      delay: i * 0.32,
+    },
+  }),
+  // Fast: energetic, high-amplitude, "processing at full speed".
+  fast: (i: number) => ({
+    opacity: [0.6, 1, 0.6],
+    scale:   [0.72, 1.28, 0.72],
+    y: 0,
+    transition: {
+      duration: 0.9,
+      repeat: Infinity,
+      ease: "easeInOut",
+      delay: i * 0.14,
+    },
+  }),
+}
+
+export type LeoTypingDotsProps = {
+  className?: string
+  /** `status` = polite live region; `decorative` = aria-hidden only. */
+  variant?: "status" | "decorative"
+  /** Announced when variant is `status`. */
+  statusLabel?: string
+}
+
+export function LeoTypingDots({
+  className,
+  variant = "status",
+  statusLabel = "Leo is thinking",
+}: LeoTypingDotsProps) {
+  const reduced = useReducedMotion() ?? false
+  const [phase, setPhase] = React.useState<Phase>("slow")
+
+  React.useEffect(() => {
+    if (reduced) return
+    // After the slow "settling" period, snap to the fast tempo.
+    const t = setTimeout(() => setPhase("fast"), 900)
+    return () => clearTimeout(t)
+  }, [reduced])
+
+  const ariaProps = variant === "decorative"
+    ? ({ "aria-hidden": true } as const)
+    : ({ role: "status", "aria-live": "polite" } as const)
+
+  return (
+    <motion.span
+      {...ariaProps}
+      className={cn("inline-flex items-center gap-1", className)}
+      // Container fades together on the way out. Each dot's exit adds the motion.
+      initial={reduced ? false : { opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={reduced ? { opacity: 0 } : {
+        opacity: 0,
+        transition: { duration: 0.6, ease: [0.4, 0, 0.2, 1] },
+      }}
+    >
+      {variant === "status" && <span className="sr-only">{statusLabel}</span>}
+      {[0, 1, 2].map(i => (
+        <motion.span
+          key={i}
+          aria-hidden
+          className="inline-block size-1.5 rounded-full bg-brand"
+          custom={i}
+          variants={dotVariants}
+          initial={reduced ? false : { opacity: 0, scale: 0.5, y: 4 }}
+          animate={reduced ? { opacity: 0.9, scale: 1 } : phase}
+          // Exit: keep pulsing once more, float up, fade. Staggered so they
+          // leave in a little wave rather than simultaneously.
+          exit={reduced ? { opacity: 0 } : {
+            opacity: [0.9, 1, 0],
+            scale:   [1, 1.35, 0.3],
+            y:       [0, -4, -14],
+            transition: {
+              duration: 0.55,
+              delay: i * 0.06,
+              times: [0, 0.35, 1],
+              ease: [0.3, 0, 0.2, 1],
+            },
+          }}
+        />
+      ))}
+    </motion.span>
+  )
+}

package/template/components/list-hub-status-badge.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+/**
+ * Consistent status chip for list hubs (Team, Compliance, Question bank, future entities).
+ * Pair label + tint + icon from `lib/list-status-badges.ts`; do not hand-roll Badge markup per page.
+ */
+
+import * as React from "react"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+/** Table column + list view rows — same shell as Team / Compliance / Question bank grids. */
+export const LIST_HUB_STATUS_BADGE_TABLE_SHELL =
+  "inline-flex items-center gap-1 text-xs font-medium"
+
+/** Kanban card badge row — fixed height, no default outline border clash. */
+export const LIST_HUB_STATUS_BADGE_BOARD_SHELL =
+  "inline-flex h-6 items-center gap-1 border-0 px-2 py-1 text-xs font-medium leading-none shadow-none"
+
+export interface ListHubStatusBadgeProps {
+  label: string
+  /** Tails from `*_STATUS_BADGE_CLASS` in `@/lib/list-status-badges` */
+  tintClassName: string
+  /** Font Awesome icon class suffix, e.g. `fa-circle-check` (paired with `fa-light` here). */
+  icon: string
+  /** `table` — DataTable cells and list rows; `board` — `ListPageBoardCardBadgeRow`. */
+  surface?: "table" | "board"
+  className?: string
+}
+
+export function ListHubStatusBadge({
+  label,
+  tintClassName,
+  icon,
+  surface = "table",
+  className,
+}: ListHubStatusBadgeProps) {
+  return (
+    <Badge
+      variant="outline"
+      className={cn(
+        surface === "board" ? LIST_HUB_STATUS_BADGE_BOARD_SHELL : LIST_HUB_STATUS_BADGE_TABLE_SHELL,
+        tintClassName,
+        className,
+      )}
+    >
+      <i className={`fa-light ${icon} text-[11px]`} aria-hidden="true" />
+      {label}
+    </Badge>
+  )
+}

package/template/components/list-page-dashboard-charts.tsx

@@ -0,0 +1,18 @@
+"use client"
+
+/**
+ * List-page **dashboard** view — thin alias over {@link DashboardReportCharts}.
+ * Uses a single-row KPI strip (`metricsSingleRow`) for dense hubs.
+ */
+
+import * as React from "react"
+import {
+  DashboardReportCharts,
+  type DashboardReportChartsProps,
+} from "@/components/dashboard-report-charts"
+
+export type ListPageDashboardChartsProps = Omit<DashboardReportChartsProps, "metricsSingleRow">
+
+export function ListPageDashboardCharts(props: ListPageDashboardChartsProps) {
+  return <DashboardReportCharts {...props} metricsSingleRow />
+}

package/template/components/nav-documents.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import {
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  useSidebar,
+} from "@/components/ui/sidebar"
+
+export function NavDocuments({
+  items,
+}: {
+  items: {
+    name: string
+    url: string
+    icon: React.ReactNode
+  }[]
+}) {
+  const { isMobile } = useSidebar()
+
+  return (
+    <SidebarGroup
+      className="group-data-[collapsible=icon]:hidden"
+      role="group"
+      aria-labelledby="nav-documents-section-label"
+    >
+      <SidebarGroupLabel id="nav-documents-section-label">Documents</SidebarGroupLabel>
+      <SidebarMenu>
+        {items.map((item) => (
+          <SidebarMenuItem key={item.name}>
+            <SidebarMenuButton asChild>
+              <a href={item.url}>
+                {item.icon}
+                <span>{item.name}</span>
+              </a>
+            </SidebarMenuButton>
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <SidebarMenuAction
+                  showOnHover
+                  suppressHydrationWarning
+                  className="rounded-sm data-[state=open]:bg-accent"
+                >
+                  <i className="fa-light fa-ellipsis" aria-hidden="true" />
+                  <span className="sr-only">More</span>
+                </SidebarMenuAction>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                className="w-24 rounded-lg"
+                side={isMobile ? "bottom" : "right"}
+                align={isMobile ? "end" : "start"}
+              >
+                <DropdownMenuItem>
+                  <i className="fa-light fa-folder" aria-hidden="true" />
+                  <span>Open</span>
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <i className="fa-light fa-share-nodes" aria-hidden="true" />
+                  <span>Share</span>
+                </DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                  <i className="fa-light fa-trash" aria-hidden="true" />
+                  <span>Delete</span>
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </SidebarMenuItem>
+        ))}
+        <SidebarMenuItem>
+          <SidebarMenuButton className="text-sidebar-foreground/70">
+            <i className="fa-light fa-ellipsis text-sidebar-foreground/70" aria-hidden="true" />
+            <span>More</span>
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    </SidebarGroup>
+  )
+}