@exxatdesignux/ui 0.2.9 → 0.2.11

package/template/components/hub-tree-panel-view.tsx

@@ -16,7 +16,7 @@ import {
   PencilLine,
   X,
 } from "lucide-react"
-import { ListHubStatusBadge, LIST_HUB_INSPECTOR_CHIP_SHELL } from "@/components/list-hub-status-badge"
+import { LIST_HUB_INSPECTOR_CHIP_SHELL } from "@/components/list-hub-status-badge"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
@@ -35,10 +35,8 @@ import { QuestionBankNewFolderSheet } from "@/components/question-bank-new-folde
 import type {
   QuestionBankItem,
   QuestionBankDifficulty,
-  QuestionBankStatus,
 } from "@/lib/mock/question-bank"
 import type { QuestionBankFolder, QuestionBankFolderColorKey } from "@/lib/mock/question-bank-folders"
-import { QUESTION_BANK_STATUS_BADGE_CLASS, QUESTION_BANK_STATUS_ICON } from "@/lib/list-status-badges"
 import { formatDateUS } from "@/lib/date-filter"
 import {
   deriveBloomLevel,
@@ -56,13 +54,6 @@ const DIFFICULTY_LABEL: Record<QuestionBankDifficulty, string> = {
   hard: "Hard",
 }
 
-/** Inspector header label — “Saved” for published matches reviewer checklist language. */
-const INSPECTOR_STATUS_LABEL: Record<QuestionBankStatus, string> = {
-  published: "Saved",
-  draft: "Draft",
-  in_review: "In review",
-}
-
 // ============================================================================
 // TreeItem — recursive folder/question renderer using Collapsible
 // ============================================================================
@@ -181,7 +172,12 @@ function TreeItem({
                       isSelected ? "fill-current opacity-80" : "text-muted-foreground",
                     )}
                   />
-                  <span className="truncate leading-tight">{question.stem}</span>
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate leading-tight">{question.stem}</span>
+                    <span className="block truncate font-mono text-[11px] text-muted-foreground">
+                      {question.questionId}
+                    </span>
+                  </span>
                 </button>
               </div>
             )
@@ -268,12 +264,7 @@ function DetailsPanel({ selectedItemId, folders, questions, onClearSelection }:
       <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-3">
           <div className="flex items-start justify-between gap-3">
-            <ListHubStatusBadge
-              surface="detail"
-              label={INSPECTOR_STATUS_LABEL[question.status]}
-              tintClassName={QUESTION_BANK_STATUS_BADGE_CLASS[question.status]}
-              icon={QUESTION_BANK_STATUS_ICON[question.status]}
-            />
+            <p className="font-mono text-xs text-muted-foreground">{question.questionId}</p>
             {onClearSelection ? (
               <Tip label="Close details" side="bottom">
                 <Button
@@ -299,16 +290,9 @@ function DetailsPanel({ selectedItemId, folders, questions, onClearSelection }:
                 </Button>
               </span>
             </Tip>
-            <Tip
-              label={
-                question.status === "draft"
-                  ? "Already a draft."
-                  : "Revert connects when your assessments API is wired."
-              }
-              side="bottom"
-            >
+            <Tip label="Revert connects when your assessments API is wired." side="bottom">
               <span className="inline-flex">
-                <Button type="button" variant="outline" size="sm" className="gap-1.5" disabled={question.status === "draft"}>
+                <Button type="button" variant="outline" size="sm" className="gap-1.5" disabled>
                   <Hourglass className="size-3.5" aria-hidden />
                   Revert to draft
                 </Button>

package/template/components/invite-collaborators-drawer.tsx

@@ -0,0 +1,453 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+import { devLog } from "@/lib/dev-log"
+import {
+  COLLABORATOR_ACCESS_ICON_LIGHT,
+  COLLABORATOR_ACCESS_LABELS,
+  INVITE_COLLABORATOR_ACCESS_OPTIONS,
+  ROSTER_COLLABORATOR_ACCESS_OPTIONS,
+  canRemoveCollaboratorFromRoster,
+  canSetCollaboratorAccessRole,
+  collaboratorRemoveBlockedReason,
+  type CollaboratorAccessRole,
+  type InviteCollaboratorAccessRole,
+} from "@/lib/collaborator-access"
+import { initialsFromDisplayName } from "@/lib/initials-from-name"
+import { cn } from "@/lib/utils"
+import type { PageHeaderCollaborator } from "@/components/page-header"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Field, FieldDescription, FieldGroup, FieldLabel } from "@/components/ui/field"
+import { InputGroup, InputGroupAddon, InputGroupInput } from "@/components/ui/input-group"
+import { Tip } from "@/components/ui/tip"
+import { Kbd, KbdGroup } from "@/components/ui/kbd"
+import { Shortcut } from "@/components/ui/dropdown-menu"
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormMessage,
+} from "@/components/ui/form"
+
+const inviteSchema = z.object({
+  email: z.string().min(1, "Email is required").email("Enter a valid email address"),
+  access: z.enum(["editor", "commenter", "viewer"]),
+})
+
+type InviteForm = z.infer<typeof inviteSchema>
+
+export type InviteCollaboratorFormValues = InviteForm
+
+export interface InviteCollaboratorsDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  collaborators: PageHeaderCollaborator[]
+  resourceLabel?: string
+  onInvite?: (values: InviteCollaboratorFormValues) => void
+  onCollaboratorAccessChange?: (id: string, access: CollaboratorAccessRole) => void
+  onCollaboratorRemove?: (id: string) => void
+}
+
+function collaboratorAccessLabel(access: PageHeaderCollaborator["access"]) {
+  if (!access) return "Viewer"
+  return COLLABORATOR_ACCESS_LABELS[access]
+}
+
+function isOverlaySelectorSheetTarget(target: EventTarget | null) {
+  return (
+    target instanceof Element
+    && target.closest(
+      '[data-slot="popover-content"], [data-slot="popover-trigger"], [data-slot="dropdown-menu-content"], [data-slot="dropdown-menu-trigger"]',
+    ) != null
+  )
+}
+
+function CollaboratorAccessChipSelector({
+  value,
+  onValueChange,
+  options,
+  ariaLabel,
+  triggerId,
+  triggerClassName,
+  isOptionDisabled,
+}: {
+  value: string
+  onValueChange: (value: string) => void
+  options: readonly { value: string; label: string }[]
+  ariaLabel: string
+  triggerId?: string
+  triggerClassName?: string
+  isOptionDisabled?: (value: string) => boolean
+}) {
+  const [open, setOpen] = React.useState(false)
+  const selected = options.find(option => option.value === value)
+  const selectedLabel = selected?.label ?? value
+  const selectedIcon = COLLABORATOR_ACCESS_ICON_LIGHT[value as CollaboratorAccessRole]
+
+  return (
+    <Popover open={open} onOpenChange={setOpen} modal={false}>
+      <PopoverTrigger asChild>
+        <Badge
+          asChild
+          variant="secondary"
+          className={cn("font-normal hover:bg-secondary/80", triggerClassName)}
+        >
+          <button
+            type="button"
+            id={triggerId}
+            data-slot="popover-trigger"
+            aria-label={ariaLabel}
+            aria-haspopup="listbox"
+            aria-expanded={open}
+          >
+            <i className={cn("fa-light", selectedIcon)} aria-hidden="true" />
+            {selectedLabel}
+            <i
+              className="fa-light fa-chevron-down text-muted-foreground"
+              data-icon="inline-end"
+              aria-hidden="true"
+            />
+          </button>
+        </Badge>
+      </PopoverTrigger>
+      <PopoverContent align="end" sideOffset={4} className="w-44 p-1">
+        <div role="listbox" aria-label={ariaLabel} className="flex flex-col gap-0.5">
+          {options.map(option => {
+            const isSelected = option.value === value
+            const isDisabled = isOptionDisabled?.(option.value) ?? false
+            const optionIcon = COLLABORATOR_ACCESS_ICON_LIGHT[option.value as CollaboratorAccessRole]
+
+            return (
+              <button
+                key={option.value}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                disabled={isDisabled}
+                onClick={() => {
+                  if (isDisabled || isSelected) return
+                  onValueChange(option.value)
+                  setOpen(false)
+                }}
+                className={cn(
+                  "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm",
+                  isSelected
+                    ? "bg-accent text-accent-foreground"
+                    : "text-foreground hover:bg-interactive-hover",
+                  isDisabled && "cursor-not-allowed opacity-50",
+                )}
+              >
+                <i className={cn("fa-light", optionIcon, "text-muted-foreground")} aria-hidden="true" />
+                <span className="min-w-0 flex-1">{option.label}</span>
+                {isSelected ? (
+                  <i className="fa-light fa-check text-muted-foreground" aria-hidden="true" />
+                ) : null}
+              </button>
+            )
+          })}
+        </div>
+      </PopoverContent>
+    </Popover>
+  )
+}
+
+export function InviteCollaboratorsDrawer({
+  open,
+  onOpenChange,
+  collaborators,
+  resourceLabel = "this library",
+  onInvite,
+  onCollaboratorAccessChange,
+  onCollaboratorRemove,
+}: InviteCollaboratorsDrawerProps) {
+  const form = useForm<InviteForm>({
+    resolver: zodResolver(inviteSchema),
+    defaultValues: {
+      email: "",
+      access: "editor",
+    },
+  })
+  const inviteAccess = form.watch("access")
+  const [isSubmitting, setIsSubmitting] = React.useState(false)
+  const [removeTarget, setRemoveTarget] = React.useState<PageHeaderCollaborator | null>(null)
+
+  React.useEffect(() => {
+    if (!open) {
+      form.reset()
+      setIsSubmitting(false)
+      setRemoveTarget(null)
+    }
+  }, [open, form])
+
+  function confirmRemove() {
+    if (!removeTarget) return
+    onCollaboratorRemove?.(removeTarget.id)
+    setRemoveTarget(null)
+  }
+
+  async function onSubmit(values: InviteForm) {
+    setIsSubmitting(true)
+    await new Promise(resolve => window.setTimeout(resolve, 600))
+    devLog("Invite collaborator:", values)
+    onInvite?.(values)
+    setIsSubmitting(false)
+    onOpenChange(false)
+    form.reset()
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        data-slot="invite-collaborators-drawer"
+        side="right"
+        showCloseButton={false}
+        showOverlay={false}
+        className="w-80 sm:max-w-80 p-0 gap-0 flex flex-col border border-border shadow-xl rounded-xl"
+        style={{ top: "0.5rem", bottom: "0.5rem", right: "0.5rem", height: "calc(100vh - 1rem)" }}
+        onPointerDownOutside={event => {
+          if (isOverlaySelectorSheetTarget(event.target)) {
+            event.preventDefault()
+          }
+        }}
+        onInteractOutside={event => {
+          if (isOverlaySelectorSheetTarget(event.target)) {
+            event.preventDefault()
+          }
+        }}
+      >
+        <div className="flex items-center justify-between gap-3 px-4 pt-5 pb-3">
+          <SheetTitle className="text-base font-semibold leading-tight">Collaborators</SheetTitle>
+          <Tip label="Close" side="bottom">
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label="Close"
+              onClick={() => onOpenChange(false)}
+            >
+              <i className="fa-light fa-xmark" aria-hidden="true" />
+            </Button>
+          </Tip>
+        </div>
+
+        <p className="px-4 pb-3 text-sm text-muted-foreground -mt-1">
+          Manage who can access {resourceLabel}.
+        </p>
+
+        <div className="flex flex-1 flex-col gap-6 overflow-y-auto px-4 pb-4">
+          <Form {...form}>
+            <form
+              id="invite-collaborators-form"
+              onSubmit={form.handleSubmit(onSubmit)}
+            >
+              <FieldGroup>
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <Field data-invalid={!!form.formState.errors.email}>
+                      <FieldLabel htmlFor="invite-collaborator-email">Invite by email</FieldLabel>
+                      <InputGroup>
+                        <FormControl>
+                          <InputGroupInput
+                            {...field}
+                            id="invite-collaborator-email"
+                            type="email"
+                            inputMode="email"
+                            autoComplete="email"
+                            placeholder="name@example.com"
+                            aria-required="true"
+                            aria-invalid={!!form.formState.errors.email}
+                          />
+                        </FormControl>
+                        <InputGroupAddon align="inline-end">
+                          <CollaboratorAccessChipSelector
+                            value={inviteAccess}
+                            onValueChange={value =>
+                              form.setValue("access", value as InviteCollaboratorAccessRole, {
+                                shouldDirty: true,
+                                shouldValidate: true,
+                              })}
+                            options={INVITE_COLLABORATOR_ACCESS_OPTIONS}
+                            ariaLabel="Access level"
+                            triggerId="invite-collaborator-access"
+                          />
+                        </InputGroupAddon>
+                      </InputGroup>
+                      <FieldDescription>name@example.com</FieldDescription>
+                      <FormMessage />
+                    </Field>
+                  )}
+                />
+              </FieldGroup>
+              <Button
+                type="submit"
+                className="w-full"
+                disabled={isSubmitting}
+              >
+                {isSubmitting ? (
+                  <>
+                    <i className="fa-light fa-spinner-third fa-spin" aria-hidden="true" />
+                    Sending…
+                  </>
+                ) : (
+                  <>
+                    <i className="fa-light fa-user-plus" aria-hidden="true" />
+                    Send invite
+                    <KbdGroup className="ml-1.5"><Kbd variant="bare">⏎</Kbd></KbdGroup>
+                  </>
+                )}
+              </Button>
+            </form>
+          </Form>
+
+          <section aria-labelledby="invite-collaborators-list-heading" className="flex flex-col gap-3">
+            <h2
+              id="invite-collaborators-list-heading"
+              className="text-sm font-medium leading-none"
+            >
+              People with access
+            </h2>
+            <ul className="rounded-lg border border-border divide-y divide-border">
+              {collaborators.map(person => {
+                const access = person.access ?? "viewer"
+                const removeBlocked = onCollaboratorRemove
+                  ? collaboratorRemoveBlockedReason(person, collaborators)
+                  : undefined
+                const canRemove = onCollaboratorRemove && !removeBlocked
+
+                return (
+                  <li
+                    key={person.id}
+                    className="flex items-start gap-3 px-3 py-2.5"
+                  >
+                    <Avatar size="sm" shape="circle" className="mt-0.5 shrink-0">
+                      {person.imageUrl ? (
+                        <AvatarImage src={person.imageUrl} alt="" referrerPolicy="no-referrer" />
+                      ) : null}
+                      <AvatarFallback className="text-xs font-semibold">
+                        {(person.initials ?? initialsFromDisplayName(person.name)).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="min-w-0 flex-1">
+                      <p className="truncate text-sm font-medium text-foreground">{person.name}</p>
+                      {person.email ? (
+                        <p className="truncate text-xs text-muted-foreground">{person.email}</p>
+                      ) : null}
+                      {person.roles && person.roles.length > 0 ? (
+                        <div className="mt-1.5 flex flex-wrap gap-1">
+                          {person.roles.map(role => (
+                            <Badge key={role} variant="outline" className="font-normal">
+                              {role}
+                            </Badge>
+                          ))}
+                        </div>
+                      ) : null}
+                    </div>
+                    <div className="flex shrink-0 items-center gap-1 self-start pt-0.5">
+                      {access === "owner" || !onCollaboratorAccessChange ? (
+                        <Badge variant="secondary" className="shrink-0 font-normal">
+                          <i
+                            className={cn("fa-light", COLLABORATOR_ACCESS_ICON_LIGHT[access])}
+                            aria-hidden="true"
+                          />
+                          {collaboratorAccessLabel(person.access)}
+                        </Badge>
+                      ) : (
+                        <CollaboratorAccessChipSelector
+                          value={access}
+                          onValueChange={value =>
+                            onCollaboratorAccessChange(person.id, value as CollaboratorAccessRole)}
+                          options={ROSTER_COLLABORATOR_ACCESS_OPTIONS}
+                          ariaLabel={`Access for ${person.name}`}
+                          triggerId={`collaborator-access-${person.id}`}
+                          isOptionDisabled={value =>
+                            value !== access
+                            && !canSetCollaboratorAccessRole(person, collaborators, value as CollaboratorAccessRole)}
+                        />
+                      )}
+                      {onCollaboratorRemove ? (
+                        <Tip
+                          side="bottom"
+                          label={removeBlocked ?? "Remove access"}
+                        >
+                          <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon-sm"
+                            className="shrink-0"
+                            aria-label={`Remove access for ${person.name}`}
+                            disabled={!canRemove}
+                            onClick={() => setRemoveTarget(person)}
+                          >
+                            <i className="fa-light fa-xmark" aria-hidden="true" />
+                          </Button>
+                        </Tip>
+                      ) : null}
+                    </div>
+                  </li>
+                )
+              })}
+            </ul>
+          </section>
+        </div>
+
+        <Shortcut keys="Enter" disabled={isSubmitting} onInvoke={() => form.handleSubmit(onSubmit)()} />
+
+      </SheetContent>
+
+      <Dialog open={removeTarget != null} onOpenChange={open => { if (!open) setRemoveTarget(null) }}>
+        <DialogContent className="max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Remove access</DialogTitle>
+            <DialogDescription>
+              {removeTarget
+                ? `${removeTarget.name} will lose access to ${resourceLabel}.`
+                : null}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter className="gap-2 sm:gap-2">
+            <Button type="button" variant="outline" onClick={() => setRemoveTarget(null)}>
+              Cancel
+              <KbdGroup className="ml-1.5"><Kbd variant="bare">Esc</Kbd></KbdGroup>
+            </Button>
+            <Button
+              type="button"
+              variant="destructive"
+              onClick={confirmRemove}
+              disabled={!removeTarget || !canRemoveCollaboratorFromRoster(removeTarget, collaborators)}
+            >
+              Remove
+              <KbdGroup className="ml-1.5"><Kbd variant="bare">⏎</Kbd></KbdGroup>
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      <Shortcut keys="Enter" disabled={!removeTarget} onInvoke={confirmRemove} />
+    </Sheet>
+  )
+}

package/template/components/key-metrics.tsx

@@ -9,7 +9,8 @@
  *
  * AA checklist:
  *  ✓ Trend text never relies on colour alone — icon + label (WCAG 1.4.1)
- *  ✓ Trend icons have aria-hidden; sr-only label carries meaning (1.1.1)
+ *  ✓ `trend` matches signed change; `trendPolarity` flips sentiment when “up” is bad (see `docs/kpi-trend-pattern.md`)
+ *  ✓ Trend icons have aria-hidden; chip `aria-label` uses `metricTrendAriaQualifier` (1.1.1)
  *  ✓ Select has accessible label via aria-label (4.1.2)
  *  ✓ Insight action button has descriptive text (4.1.2)
  *  ✓ Decorative dividers are aria-hidden (1.1.1)
@@ -66,6 +67,44 @@ function InsightAskLeoTooltip({
 
 /* ── Types ────────────────────────────────────────────────────────────────── */
 
+/**
+ * Whether an **up** arrow should read as “good news” for tinting and assistive text.
+ * - **`higher_is_better`** (default) — revenue, pass rate, approved count: up = favorable.
+ * - **`lower_is_better`** — defects, overdue, **low PBI / quality flags**: more flags + up arrow = unfavorable.
+ * - **`informational`** — volume or mix only; keep arrows **muted** (direction without value judgment).
+ */
+export type MetricTrendPolarity = "higher_is_better" | "lower_is_better" | "informational"
+
+export type MetricTrendTone = "positive" | "negative" | "muted"
+
+/** Maps `trend` + polarity to semantic tone for colours (arrow direction still follows `trend`). */
+export function metricTrendTone(
+  trend: "up" | "down" | "neutral",
+  polarity: MetricTrendPolarity = "higher_is_better",
+): MetricTrendTone {
+  if (trend === "neutral") return "muted"
+  if (polarity === "informational") return "muted"
+  if (polarity === "higher_is_better") {
+    return trend === "up" ? "positive" : "negative"
+  }
+  return trend === "up" ? "negative" : "positive"
+}
+
+/** Short clause for `aria-label` on the trend chip (paired with the delta string). */
+export function metricTrendAriaQualifier(
+  trend: "up" | "down" | "neutral",
+  polarity: MetricTrendPolarity = "higher_is_better",
+): string {
+  if (trend === "neutral") return "no net change"
+  if (polarity === "informational") {
+    return trend === "up" ? "increased" : "decreased"
+  }
+  if (polarity === "higher_is_better") {
+    return trend === "up" ? "increased, favorable" : "decreased, unfavorable"
+  }
+  return trend === "up" ? "increased, unfavorable" : "decreased, favorable"
+}
+
 export interface MetricItem {
   /** Unique identifier for React keying */
   id: string
@@ -75,8 +114,13 @@ export interface MetricItem {
   value: string | number
   /** Change delta — e.g. "+5", "-3", "+12" */
   delta: string | number
-  /** Visual + semantic trend direction */
+  /** Visual trend direction (arrow follows the signed change in the underlying metric). */
   trend: "up" | "down" | "neutral"
+  /**
+   * How to **tint** the trend chip. Omit = **`higher_is_better`** (legacy behaviour).
+   * Arrows always match `trend`; sentiment colours flip for **`lower_is_better`**.
+   */
+  trendPolarity?: MetricTrendPolarity
   /** Makes the cell a link */
   href?: string
   /** Makes the cell a button */
@@ -185,11 +229,12 @@ const DEFAULT_PERIODS: PeriodOption[] = [
 /* ── Sub-components ───────────────────────────────────────────────────────── */
 
 /** Single KPI cell inside the metrics grid */
-function MetricCell({
+const MetricCell = React.memo(function MetricCell({
   label,
   value,
   delta,
   trend,
+  trendPolarity = "higher_is_better",
   href,
   onClick,
   metricVariant = "default",
@@ -198,6 +243,7 @@ function MetricCell({
 }: Omit<MetricItem, "id"> & { dense?: boolean; edgeGutter?: boolean }) {
   const isUp       = trend === "up"
   const isDown     = trend === "down"
+  const tone        = metricTrendTone(trend, trendPolarity)
   const isInteractive = !!(href || onClick)
   const isHero     = metricVariant === "hero"
 
@@ -248,11 +294,11 @@ function MetricCell({
           className={cn(
             "inline-flex items-center gap-1 font-medium leading-none",
             dense ? "text-xs sm:text-xs" : "text-xs sm:text-sm",
-            isUp   && "text-chart-2",
-            isDown && "text-destructive",
-            !isUp && !isDown && "text-muted-foreground"
+            tone === "positive" && "text-chart-2",
+            tone === "negative" && "text-destructive",
+            tone === "muted" && "text-muted-foreground",
           )}
-          aria-label={`${isUp ? "up" : isDown ? "down" : "no change"} ${delta}`}
+          aria-label={`${metricTrendAriaQualifier(trend, trendPolarity)} ${delta}`}
         >
           {isUp   && <i className="fa-light fa-arrow-trend-up text-[0.8rem]"   aria-hidden="true" />}
           {isDown && <i className="fa-light fa-arrow-trend-down text-[0.8rem]" aria-hidden="true" />}
@@ -292,7 +338,7 @@ function MetricCell({
   }
 
   return <div className={sharedClass}>{inner}</div>
-}
+})
 
 /** Body line for rail: `description`, else optional `statement` */
 function insightRailBody(insight: MetricInsight): string {

package/template/components/nav-documents.tsx

@@ -56,7 +56,7 @@ export function NavDocuments({
                 </SidebarMenuAction>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                className="w-24 rounded-lg"
+                className="rounded-lg"
                 side={isMobile ? "bottom" : "right"}
                 align={isMobile ? "end" : "start"}
               >

package/template/components/new-placement-form.tsx

@@ -33,7 +33,7 @@ import { z } from "zod"
 
 import { cn } from "@/lib/utils"
 import { devLog } from "@/lib/dev-log"
-import { formatDateUS } from "@/lib/date-filter"
+import { formatDateFromDate } from "@/lib/date-filter"
 
 import {
   Form,
@@ -883,8 +883,8 @@ function Step5({
         </ReviewSection>
 
         <ReviewSection title="Schedule" icon="fa-calendar-days" onEdit={() => goToStep(3)}>
-          <ReviewRow label="Start Date"   value={data.startDate ? formatDateUS(data.startDate.toISOString()) : undefined} />
-          <ReviewRow label="End Date"     value={data.endDate   ? formatDateUS(data.endDate.toISOString())   : undefined} />
+          <ReviewRow label="Start Date"   value={data.startDate ? formatDateFromDate(data.startDate) : undefined} />
+          <ReviewRow label="End Date"     value={data.endDate   ? formatDateFromDate(data.endDate)   : undefined} />
           <ReviewRow label="Duration"     value={data.duration} />
           <ReviewRow label="Hours / Week" value={data.hoursPerWeek ? `${data.hoursPerWeek} hrs` : undefined} />
           <ReviewRow label="Shift"        value={data.shift} />