@exxatdesignux/ui 0.2.15 → 0.2.17

package/template/components/folder-details-shell.tsx

@@ -102,7 +102,7 @@ export function FolderDetailsShell({
 
   return (
     <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-4">
+      <header className="shrink-0 border-b border-border/60 bg-card px-4 pb-4 pt-4">
         <div className="flex items-start justify-between gap-3">
           <div className="flex min-w-0 flex-1 items-start gap-3">
             <OsFolderGlyph

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

@@ -19,7 +19,7 @@ import {
 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"
+import { Collapsible, CollapsibleTrigger } from "@/components/ui/collapsible"
 import { Separator } from "@/components/ui/separator"
 import { Tip } from "@/components/ui/tip"
 import {
@@ -28,6 +28,14 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 import { cn } from "@/lib/utils"
+import {
+  OutlineTreeCollapsibleContentRail,
+  OutlineTreeLeafButton,
+  OutlineTreeMenu,
+  OutlineTreeMenuItem,
+  OutlineTreeSub,
+  OutlineTreeSubItem,
+} from "@/components/data-views/outline-tree-menu"
 import { ListPageTreePanelShell } from "@/components/data-views/list-page-tree-panel-shell"
 import { ListPageSplitDetailsPlaceholder } from "@/components/data-views/list-page-split-details-placeholder"
 import { ListPageTreeColumnHeader } from "@/components/data-views/list-page-tree-column-header"
@@ -63,7 +71,6 @@ interface TreeItemProps {
   folders: QuestionBankFolder[]
   questions: QuestionBankItem[]
   selectedItemId: string | null
-  depth?: number
   onSelectItem: (itemId: string) => void
 }
 
@@ -72,7 +79,6 @@ function TreeItem({
   folders,
   questions,
   selectedItemId,
-  depth = 0,
   onSelectItem,
 }: TreeItemProps) {
   const childFolders = folders
@@ -83,38 +89,40 @@ function TreeItem({
 
   const hasChildren = childFolders.length > 0 || childQuestions.length > 0
   const isFolderSelected = selectedItemId === folder.id
-  const indent = depth * 12
 
   return (
-    <Collapsible>
-      {/* Folder row */}
-      <div className="group flex items-center hover:bg-muted/50">
-        <div style={{ width: indent }} className="shrink-0" />
-
-        {/* Expand chevron or spacer */}
+    <Collapsible className="group/collapsible">
+      {/* Folder row — chevron column + row body (icons align with shadcn tree pattern) */}
+      <div
+        className={cn(
+          "flex min-h-8 items-center rounded-md px-2 hover:bg-muted/50",
+          isFolderSelected && "bg-accent text-accent-foreground",
+        )}
+      >
         {hasChildren ? (
           <CollapsibleTrigger asChild>
             <button
               type="button"
-              className="flex h-8 w-5 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none"
+              className="flex size-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label={folder.name ? `${folder.name} — expand or collapse` : "Expand or collapse folder"}
             >
-              <ChevronRightIcon className="h-3.5 w-3.5 transition-transform duration-150 group-data-[state=open]:rotate-90 [[data-state=open]_&]:rotate-90" />
+              <ChevronRightIcon
+                className="h-3.5 w-3.5 shrink-0 transition-transform duration-150 group-data-[state=open]/collapsible:rotate-90"
+                aria-hidden
+              />
             </button>
           </CollapsibleTrigger>
         ) : (
-          <div className="w-5 shrink-0" />
+          <div className="size-8 shrink-0" aria-hidden />
         )}
 
-        {/* Folder button */}
         <button
           type="button"
           onClick={() => onSelectItem(folder.id)}
           className={cn(
-            "flex flex-1 items-center gap-2 py-1.5 pr-3 text-left text-sm transition-colors duration-75",
+            "flex min-w-0 flex-1 items-center gap-2 py-1.5 pr-3 text-left text-sm transition-colors duration-75",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-            isFolderSelected
-              ? "bg-accent text-accent-foreground"
-              : "text-foreground",
+            !isFolderSelected && "text-foreground",
           )}
           aria-selected={isFolderSelected}
           role="option"
@@ -134,55 +142,51 @@ function TreeItem({
         </button>
       </div>
 
-      {/* Children */}
       {hasChildren && (
-        <CollapsibleContent>
-          {childFolders.map(child => (
-            <TreeItem
-              key={child.id}
-              folder={child}
-              folders={folders}
-              questions={questions}
-              selectedItemId={selectedItemId}
-              depth={depth + 1}
-              onSelectItem={onSelectItem}
-            />
-          ))}
-          {childQuestions.map(question => {
-            const isSelected = selectedItemId === question.id
-            return (
-              <div key={question.id} className="group flex items-center hover:bg-muted/50">
-                <div style={{ width: indent + 12 + 20 }} className="shrink-0" />
-                <button
-                  type="button"
-                  onClick={() => onSelectItem(question.id)}
-                  className={cn(
-                    "flex flex-1 items-center gap-2 py-1.5 pr-3 text-left text-sm transition-colors duration-75",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
-                    isSelected
-                      ? "bg-accent text-accent-foreground"
-                      : "text-foreground",
-                  )}
-                  aria-selected={isSelected}
-                  role="option"
-                >
-                  <FileIcon
-                    className={cn(
-                      "h-3.5 w-3.5 shrink-0",
-                      isSelected ? "fill-current opacity-80" : "text-muted-foreground",
-                    )}
-                  />
-                  <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}
+        <OutlineTreeCollapsibleContentRail>
+          <OutlineTreeSub surface="panel" guideLayout="chevronRail">
+            {childFolders.map(child => (
+              <OutlineTreeMenuItem key={child.id}>
+                <TreeItem
+                  folder={child}
+                  folders={folders}
+                  questions={questions}
+                  selectedItemId={selectedItemId}
+                  onSelectItem={onSelectItem}
+                />
+              </OutlineTreeMenuItem>
+            ))}
+            {childQuestions.map(question => {
+              const isSelected = selectedItemId === question.id
+              return (
+                <OutlineTreeSubItem key={question.id}>
+                  <OutlineTreeLeafButton
+                    surface="panel"
+                    isActive={isSelected}
+                    onClick={() => onSelectItem(question.id)}
+                    aria-selected={isSelected}
+                    role="option"
+                    className="h-auto min-h-8 items-start py-1.5"
+                  >
+                    <FileIcon
+                      className={cn(
+                        "mt-0.5 shrink-0",
+                        isSelected ? "fill-current opacity-80" : "text-muted-foreground",
+                      )}
+                      aria-hidden
+                    />
+                    <span className="min-w-0 flex-1 text-left">
+                      <span className="block truncate leading-tight">{question.stem}</span>
+                      <span className="block truncate font-mono text-[11px] text-muted-foreground">
+                        {question.questionId}
+                      </span>
                     </span>
-                  </span>
-                </button>
-              </div>
-            )
-          })}
-        </CollapsibleContent>
+                  </OutlineTreeLeafButton>
+                </OutlineTreeSubItem>
+              )
+            })}
+          </OutlineTreeSub>
+        </OutlineTreeCollapsibleContentRail>
       )}
     </Collapsible>
   )
@@ -262,7 +266,7 @@ function DetailsPanel({ selectedItemId, folders, questions, onClearSelection }:
 
     return (
       <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">
+        <header className="shrink-0 border-b border-border/60 bg-card px-4 pb-4 pt-3">
           <div className="flex items-start justify-between gap-3">
             <p className="font-mono text-xs text-muted-foreground">{question.questionId}</p>
             {onClearSelection ? (
@@ -517,8 +521,8 @@ function DetailsPanel({ selectedItemId, folders, questions, onClearSelection }:
   }
 
   return (
-    <div className="flex h-full min-h-0 flex-col items-center justify-center bg-gradient-to-b from-muted/25 to-card px-6 py-10 text-center text-muted-foreground">
-      <div className="mb-3 flex size-12 items-center justify-center rounded-xl border border-border/60 bg-muted/20">
+    <div className="flex h-full min-h-0 flex-col items-center justify-center bg-card px-6 py-10 text-center text-muted-foreground">
+      <div className="mb-3 flex size-12 items-center justify-center rounded-xl border border-border/60 bg-card">
         <FileIcon className="size-6 opacity-50" aria-hidden />
       </div>
       <p className="text-sm font-medium text-foreground">Item not found</p>
@@ -615,23 +619,27 @@ export function HubTreePanelView({
               }
             />
 
-            <div className="min-h-0 flex-1 overflow-y-auto py-1" role="listbox" aria-label="Folder tree">
+            <OutlineTreeMenu
+              className="min-h-0 flex-1 overflow-y-auto py-1"
+              role="listbox"
+              aria-label="Folder tree"
+            >
               {rootFolders.length === 0 ? (
-                <p className="px-3 py-4 text-sm text-muted-foreground">No folders</p>
+                <li className="list-none px-3 py-4 text-sm text-muted-foreground">No folders</li>
               ) : (
                 rootFolders.map(folder => (
-                  <TreeItem
-                    key={folder.id}
-                    folder={folder}
-                    folders={folders}
-                    questions={items}
-                    selectedItemId={selectedItemId}
-                    depth={0}
-                    onSelectItem={setSelectedItemId}
-                  />
+                  <OutlineTreeMenuItem key={folder.id}>
+                    <TreeItem
+                      folder={folder}
+                      folders={folders}
+                      questions={items}
+                      selectedItemId={selectedItemId}
+                      onSelectItem={setSelectedItemId}
+                    />
+                  </OutlineTreeMenuItem>
                 ))
               )}
-            </div>
+            </OutlineTreeMenu>
           </>
         }
         details={

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

@@ -1,7 +1,7 @@
 "use client"
 
 import * as React from "react"
-import { useForm } from "react-hook-form"
+import { useForm, useWatch } from "react-hook-form"
 import { z } from "zod"
 import { zodResolver } from "@hookform/resolvers/zod"
 
@@ -191,7 +191,9 @@ export function InviteCollaboratorsDrawer({
       access: "editor",
     },
   })
-  const inviteAccess = form.watch("access")
+  // `useWatch` is memoization-friendly (returns a stable reactive value)
+  // unlike `form.watch()`, which the React Compiler can't memoize safely.
+  const inviteAccess = useWatch({ control: form.control, name: "access" })
   const [isSubmitting, setIsSubmitting] = React.useState(false)
   const [removeTarget, setRemoveTarget] = React.useState<PageHeaderCollaborator | null>(null)
 
@@ -226,7 +228,7 @@ export function InviteCollaboratorsDrawer({
         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"
+        className="z-[80] 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)) {

package/template/components/key-metrics.tsx

@@ -5,7 +5,7 @@
  *
  * Variants:
  *   "card"  (default) — shadcn Card wrapper with brand gradient fill
- *   "flat"            — full-width brand gradient band, no card chrome
+ *   "flat"            — full-width soft tint band (brand-tint → background) + bottom glow, no card chrome
  *
  * AA checklist:
  *  ✓ Trend text never relies on colour alone — icon + label (WCAG 1.4.1)
@@ -198,23 +198,53 @@ export interface KeyMetricsProps {
   className?: string
 }
 
-/** Wrap KPI columns when the strip is narrow (high zoom, 5+ tiles) instead of squeezing cells. */
-const METRICS_GRID_TEMPLATE =
-  "repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr))"
-
-/** Equal columns in one row — up to 4 KPIs beside an insight rail without premature wrap. */
-function metricsRowColumns(
-  rowLength: number,
-  metricsSingleRow: boolean,
-  metricsHalfWidthLayout: boolean,
-): string {
-  if (metricsHalfWidthLayout) {
-    return `repeat(${rowLength}, minmax(0, 1fr))`
-  }
-  if (metricsSingleRow) {
-    return rowLength > 4 ? METRICS_GRID_TEMPLATE : `repeat(${rowLength}, minmax(0, 1fr))`
+/**
+ * KPI grid column step patterns — Tailwind v4 container-query classes.
+ *
+ * We deliberately AVOID `repeat(auto-fit, minmax(...))` here because it
+ * produces awkward "N + leftover" layouts at intermediate widths (e.g. 3
+ * tiles in row 1 + 1 lonely tile in row 2 for a 4-KPI strip). Instead we
+ * step the column count through values that evenly divide the row size:
+ * 1 → 2 → 4 for a 4-KPI strip (3 is skipped on purpose).
+ *
+ * The breakpoints are container-query based (`@[Xrem]:…`) so they react to
+ * the metrics strip's OWN width, not the viewport — that's what makes the
+ * 2×2 fallback kick in when the primary sidebar + secondary panel are
+ * both open and the strip column is ~360 px wide, even on a 1280 px display.
+ *
+ * `metricsHalfWidthLayout` = strip shares its row with the insight rail
+ * (3fr / 2fr split). Tighter breakpoints because available width is ~60%
+ * of the section.
+ */
+function metricsRowColumnsClass(rowLength: number, metricsHalfWidthLayout: boolean): string {
+  const half = metricsHalfWidthLayout
+  switch (rowLength) {
+    case 1:
+      return "grid-cols-1"
+    case 2:
+      return half
+        ? "grid-cols-1 @[14rem]:grid-cols-2"
+        : "grid-cols-1 @[18rem]:grid-cols-2"
+    case 3:
+      // 3 tiles divide evenly already — step 1 → 3.
+      return half
+        ? "grid-cols-1 @[18rem]:grid-cols-3"
+        : "grid-cols-1 @[24rem]:grid-cols-3"
+    case 4:
+      // Step 1 → 2 (2×2 grid) → 4. Skip 3 — that's the awkward 3+1 layout.
+      // Aggressive 4-col thresholds so the strip fits all four tiles even
+      // when the primary sidebar + secondary panel + insight rail are all
+      // expanded (typical question-bank layout puts the KPI grid at ~27rem).
+      return half
+        ? "grid-cols-1 @[14rem]:grid-cols-2 @[26rem]:grid-cols-4"
+        : "grid-cols-1 @[18rem]:grid-cols-2 @[30rem]:grid-cols-4"
+    default:
+      // 5+ KPIs (`exxat-kpi-max-four` caps the strip at 4, but key-metrics
+      // is a generic primitive — fall back to a sensible step). 1 → 2 → 3 → 6.
+      return half
+        ? "grid-cols-1 @[14rem]:grid-cols-2 @[26rem]:grid-cols-3 @[40rem]:grid-cols-6"
+        : "grid-cols-1 @[18rem]:grid-cols-2 @[30rem]:grid-cols-3 @[56rem]:grid-cols-6"
   }
-  return `repeat(${rowLength}, minmax(0, 1fr))`
 }
 
 /* ── Default data ─────────────────────────────────────────────────────────── */
@@ -484,6 +514,8 @@ interface InnerProps {
   metricsHalfWidthLayout?: boolean
   /** Opaque fill behind each KPI cell when using hairline grid gaps (below `lg`). */
   metricsCellSurfaceClassName?: string
+  /** Flat list-page band: softer dividers + tinted cells on a lavender-tinted surface */
+  surfaceVariant?: "default" | "flat"
 }
 
 function KeyMetricsInner({
@@ -502,7 +534,12 @@ function KeyMetricsInner({
   metricsSingleRow = false,
   metricsHalfWidthLayout = false,
   metricsCellSurfaceClassName = "bg-background",
+  surfaceVariant = "default",
 }: InnerProps) {
+  const isFlatBand = surfaceVariant === "flat"
+  const metricsGridClassName = isFlatBand
+    ? "gap-0 bg-transparent [&>*:not(:last-child)]:border-r [&>*:not(:last-child)]:border-foreground/[0.055]"
+    : "gap-px bg-border"
   /** Side-by-side KPI + insight rail (md+). Disabled for half-width dashboard cards — insight stacks below. */
   const insightSideBySide = insight && !insightFullWidth && !metricsHalfWidthLayout
   const stackedRailInsight = insight && !insightFullWidth && metricsHalfWidthLayout
@@ -566,28 +603,26 @@ function KeyMetricsInner({
           */}
           {metricsHalfWidthLayout ? (
             <div
-              className="grid grid-cols-2 divide-x divide-border lg:hidden"
-              style={
+              className={cn(
+                "@container/metrics-strip grid lg:hidden",
                 metricsSingleRow
-                  ? {
-                      gridTemplateColumns: metricsRowColumns(
-                        metrics.length,
-                        metricsSingleRow,
-                        metricsHalfWidthLayout,
-                      ),
-                    }
-                  : undefined
-              }
+                  ? metricsRowColumnsClass(metrics.length, /* half */ true)
+                  : "grid-cols-2",
+                metricsGridClassName,
+              )}
             >
               {metrics.map((m) => (
-                <MetricCell key={m.id} {...m} dense />
+                <div key={m.id} className={cn("min-w-0", metricsCellSurfaceClassName)}>
+                  <MetricCell {...m} dense edgeGutter={false} />
+                </div>
               ))}
             </div>
           ) : (
             <div
               className={cn(
-                "grid gap-px bg-border lg:hidden",
-                "grid-cols-1 md:grid-cols-2",
+                "@container/metrics-strip grid lg:hidden",
+                metricsRowColumnsClass(metrics.length, /* half */ false),
+                metricsGridClassName,
               )}
             >
               {metrics.map((m) => (
@@ -598,25 +633,32 @@ function KeyMetricsInner({
             </div>
           )}
 
-          {/* lg+: row-by-row 3-col with horizontal separator between rows */}
-          <div className="hidden lg:block">
+          {/*
+            lg+: row-by-row container-queried grid. Uses a `gap-px + bg` hairline
+            instead of `divide-x` so dividers render correctly when the row wraps
+            from 4-across to a 2×2 grid (the awkward 3+1 layout is skipped — see
+            `metricsRowColumnsClass`).
+          */}
+          <div className="@container/metrics-strip hidden lg:block">
             {rows.map((row, rowIdx) => (
               <React.Fragment key={rowIdx}>
                 {rowIdx > 0 && (
-                  <Separator aria-hidden="true" className="my-1" />
+                  <Separator
+                    aria-hidden="true"
+                    className={cn("my-1", isFlatBand && "bg-foreground/[0.055]")}
+                  />
                 )}
                 <div
-                  className="grid divide-x divide-border"
-                  style={{
-                    gridTemplateColumns: metricsRowColumns(
-                      row.length,
-                      metricsSingleRow,
-                      metricsHalfWidthLayout,
-                    ),
-                  }}
+                  className={cn(
+                    "grid",
+                    metricsRowColumnsClass(row.length, metricsHalfWidthLayout),
+                    metricsGridClassName,
+                  )}
                 >
                   {row.map((m) => (
-                    <MetricCell key={m.id} {...m} dense={metricsHalfWidthLayout} />
+                    <div key={m.id} className={cn("min-w-0", metricsCellSurfaceClassName)}>
+                      <MetricCell {...m} dense={metricsHalfWidthLayout} edgeGutter={false} />
+                    </div>
                   ))}
                 </div>
               </React.Fragment>
@@ -628,11 +670,20 @@ function KeyMetricsInner({
         {insight && (
           <>
             {insightFullWidth ? (
-              <Separator aria-hidden="true" className="my-4 w-full" />
+              <Separator
+                aria-hidden="true"
+                className={cn("my-4 w-full", isFlatBand && "bg-foreground/[0.06]")}
+              />
             ) : stackedRailInsight ? (
-              <Separator aria-hidden="true" className="my-4 w-full" />
+              <Separator
+                aria-hidden="true"
+                className={cn("my-4 w-full", isFlatBand && "bg-foreground/[0.06]")}
+              />
             ) : (
-              <Separator aria-hidden="true" className="my-3 lg:hidden" />
+              <Separator
+                aria-hidden="true"
+                className={cn("my-3 lg:hidden", isFlatBand && "bg-foreground/[0.055]")}
+              />
             )}
 
             <div
@@ -641,7 +692,10 @@ function KeyMetricsInner({
                 /* Divider + padding replace vertical Separator so grid stays 2 columns */
                 insightSideBySide &&
                   !insightFullWidth &&
-                  "lg:h-full lg:border-l lg:border-border lg:pl-6"
+                  cn(
+                    "lg:h-full lg:border-l lg:pl-6",
+                    isFlatBand ? "lg:border-border/40" : "lg:border-border",
+                  )
               )}
             >
               {insight && !insightFullWidth ? (
@@ -801,7 +855,8 @@ export function KeyMetrics({
         return out
       })()
 
-  const metricsCellSurfaceClassName = variant === "flat" ? "bg-background" : "bg-card"
+  const metricsCellSurfaceClassName =
+    variant === "flat" ? "bg-transparent" : "bg-card"
 
   const innerProps: InnerProps = {
     title,
@@ -817,6 +872,7 @@ export function KeyMetrics({
     metricsSingleRow,
     metricsHalfWidthLayout,
     metricsCellSurfaceClassName,
+    surfaceVariant: variant === "flat" ? "flat" : "default",
   }
 
   /*
@@ -849,6 +905,15 @@ export function KeyMetrics({
       "radial-gradient(ellipse 110% 90% at 50% 100%, oklch(from var(--brand-color) l c h / 0.13) 0%, transparent 65%)",
   }
 
+  /** List-page KPI band: soft tint → page bg + gentle lift (avoids a hard line into the toolbar). */
+  const flatBandStyle: React.CSSProperties = {
+    background: [
+      "radial-gradient(ellipse 118% 70% at 50% 100%, oklch(from var(--brand-color) l c h / 0.11) 0%, transparent 60%)",
+      "linear-gradient(180deg, var(--key-metrics-flat-grad-top) 0%, var(--key-metrics-flat-grad-mid) 48%, var(--background) 100%)",
+    ].join(", "),
+    boxShadow: "0 18px 42px -26px color-mix(in oklch, var(--brand-color) 10%, transparent)",
+  }
+
   /* ── Card variant — ChartCard-style chrome ───────────────────────────── */
   if (variant === "card") {
     return (
@@ -917,12 +982,12 @@ export function KeyMetrics({
     )
   }
 
-  /* ── Flat variant — full-width bottom-glow band ───────────────────────── */
+  /* ── Flat variant — soft tint band + bottom glow (no sharp cut to content below) ── */
   return (
     <section
       aria-label={title}
-      className={cn("w-full py-5", className)}
-      style={glowStyle}
+      className={cn("relative w-full overflow-hidden pt-5 pb-6", className)}
+      style={flatBandStyle}
     >
       <KeyMetricsInner
         {...innerProps}

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

@@ -25,6 +25,7 @@ import { useRouter } from "next/navigation"
 import {
   useForm,
   useFormContext,
+  useWatch,
   type ControllerRenderProps,
   type Resolver,
 } from "react-hook-form"
@@ -64,7 +65,6 @@ import {
 import { RadioGroup, RadioGroupItem, RadioGroupLabel } from "@/components/ui/radio-group"
 import { Card, CardHeader, CardTitle, CardAction, CardContent } from "@/components/ui/card"
 import { Kbd, KbdGroup } from "@/components/ui/kbd"
-import { Tip } from "@/components/ui/tip"
 import { Shortcut } from "@/components/ui/dropdown-menu"
 import { useModKeyLabel, useAltKeyLabel } from "@/hooks/use-mod-key-label"
 
@@ -967,7 +967,9 @@ export function NewPlacementForm() {
     router.push("/data-list")
   }
 
-  const formData = form.watch()
+  // `useWatch` is memoization-friendly (returns a stable reactive value)
+  // unlike `form.watch()`, which the React Compiler can't memoize safely.
+  const formData = useWatch({ control: form.control })
   const mod = useModKeyLabel()
   const alt = useAltKeyLabel()