@exxatdesignux/ui 0.2.16 → 0.2.17

package/template/components/key-metrics.tsx

@@ -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 ─────────────────────────────────────────────────────────── */
@@ -507,6 +537,9 @@ function KeyMetricsInner({
   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
@@ -571,31 +604,25 @@ function KeyMetricsInner({
           {metricsHalfWidthLayout ? (
             <div
               className={cn(
-                "grid grid-cols-2 divide-x lg:hidden",
-                isFlatBand ? "divide-border/40" : "divide-border",
-              )}
-              style={
+                "@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 lg:hidden",
-                "grid-cols-1 md:grid-cols-2",
-                isFlatBand ? "bg-foreground/[0.04]" : "bg-border",
+                "@container/metrics-strip grid lg:hidden",
+                metricsRowColumnsClass(metrics.length, /* half */ false),
+                metricsGridClassName,
               )}
             >
               {metrics.map((m) => (
@@ -606,8 +633,13 @@ 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 && (
@@ -618,19 +650,15 @@ function KeyMetricsInner({
                 )}
                 <div
                   className={cn(
-                    "grid divide-x",
-                    isFlatBand ? "divide-border/40" : "divide-border",
+                    "grid",
+                    metricsRowColumnsClass(row.length, metricsHalfWidthLayout),
+                    metricsGridClassName,
                   )}
-                  style={{
-                    gridTemplateColumns: metricsRowColumns(
-                      row.length,
-                      metricsSingleRow,
-                      metricsHalfWidthLayout,
-                    ),
-                  }}
                 >
                   {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>
@@ -828,7 +856,7 @@ export function KeyMetrics({
       })()
 
   const metricsCellSurfaceClassName =
-    variant === "flat" ? "bg-[var(--key-metrics-flat-cell-bg)]" : "bg-card"
+    variant === "flat" ? "bg-transparent" : "bg-card"
 
   const innerProps: InnerProps = {
     title,

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()