@exxatdesignux/ui 0.2.16 → 0.2.18

package/template/components/key-metrics.tsx

@@ -198,23 +198,88 @@ 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,
+/**
+ * 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.
+ */
+/**
+ * Flat KPI hairlines — cell borders only (no grid gap fill / no surface).
+ * Four tiles: default 4-across verticals; 2×2 hairlines only when @container is narrow.
+ */
+function flatMetricsHairlineClass(
+  itemCount: number,
   metricsHalfWidthLayout: boolean,
 ): string {
-  if (metricsHalfWidthLayout) {
-    return `repeat(${rowLength}, minmax(0, 1fr))`
+  if (itemCount <= 1) return "gap-0"
+
+  const childBorder = "[&>*]:border-[color:var(--key-metrics-flat-divider)]"
+
+  if (itemCount === 2) {
+    return cn("gap-0", childBorder, "[&>*:first-child]:border-r")
+  }
+
+  if (itemCount === 4) {
+    const narrow2x2 = metricsHalfWidthLayout
+      ? "@[max-width:25.99rem]"
+      : "@[max-width:29.99rem]"
+    return cn(
+      "gap-0",
+      childBorder,
+      /* Wide strip (matches `@[30rem]:grid-cols-4`) — verticals between all tiles, no horizontal */
+      "[&>*:not(:last-child)]:border-r",
+      /* Narrow strip (`@[18rem]`–`@[30rem]` 2×2) */
+      `${narrow2x2}:[&>*:not(:last-child)]:border-r-0`,
+      `${narrow2x2}:[&>*:nth-child(odd)]:border-r`,
+      `${narrow2x2}:[&>*:not(:nth-last-child(-n+2))]:border-b`,
+    )
   }
-  if (metricsSingleRow) {
-    return rowLength > 4 ? METRICS_GRID_TEMPLATE : `repeat(${rowLength}, minmax(0, 1fr))`
+
+  return cn("gap-0", childBorder, "[&>*:not(:last-child)]:border-r")
+}
+
+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 +572,9 @@ function KeyMetricsInner({
   surfaceVariant = "default",
 }: InnerProps) {
   const isFlatBand = surfaceVariant === "flat"
+  const metricsGridClassName = isFlatBand
+    ? flatMetricsHairlineClass(metrics.length, metricsHalfWidthLayout)
+    : "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 +639,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,31 +668,31 @@ 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={cn("my-1", isFlatBand && "bg-foreground/[0.055]")}
-                  />
+                {rowIdx > 0 && !isFlatBand && (
+                  <Separator aria-hidden="true" className="my-1" />
                 )}
                 <div
                   className={cn(
-                    "grid divide-x",
-                    isFlatBand ? "divide-border/40" : "divide-border",
+                    "grid",
+                    metricsRowColumnsClass(row.length, metricsHalfWidthLayout),
+                    isFlatBand
+                      ? flatMetricsHairlineClass(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>
@@ -665,8 +727,9 @@ function KeyMetricsInner({
                 insightSideBySide &&
                   !insightFullWidth &&
                   cn(
-                    "lg:h-full lg:border-l lg:pl-6",
-                    isFlatBand ? "lg:border-border/40" : "lg:border-border",
+                    "lg:h-full lg:pl-6",
+                    /* Flat band: insight card ring is the divider — skip `border-l` (double line). */
+                    !isFlatBand && "lg:border-l lg:border-border",
                   )
               )}
             >
@@ -828,7 +891,9 @@ export function KeyMetrics({
       })()
 
   const metricsCellSurfaceClassName =
-    variant === "flat" ? "bg-[var(--key-metrics-flat-cell-bg)]" : "bg-card"
+    variant === "flat"
+      ? "bg-transparent"
+      : "bg-card dark:bg-transparent"
 
   const innerProps: InnerProps = {
     title,
@@ -872,18 +937,13 @@ export function KeyMetrics({
    * ─────────────────────────────────────────────────────────────────────────
    */
   const glowStyle: React.CSSProperties = {
-    /* oklch relative color: inherit brand hue/chroma/lightness, set alpha only */
-    background:
-      "radial-gradient(ellipse 110% 90% at 50% 100%, oklch(from var(--brand-color) l c h / 0.13) 0%, transparent 65%)",
+    background: "var(--key-metrics-card-glow-radial)",
   }
 
-  /** List-page KPI band: soft tint → page bg + gentle lift (avoids a hard line into the toolbar). */
+  /** List-page KPI band — transparent; only `--key-metrics-flat-band-radial` glow. */
   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)",
+    background: "var(--key-metrics-flat-band-radial)",
+    boxShadow: "var(--key-metrics-flat-band-shadow)",
   }
 
   /* ── Card variant — ChartCard-style chrome ───────────────────────────── */
@@ -954,11 +1014,11 @@ export function KeyMetrics({
     )
   }
 
-  /* ── Flat variant — soft tint band + bottom glow (no sharp cut to content below) ── */
+  /* ── Flat variant — no surface; bottom brand glow only ── */
   return (
     <section
       aria-label={title}
-      className={cn("relative w-full overflow-hidden pt-5 pb-6", className)}
+      className={cn("relative w-full overflow-hidden pt-5 pb-8", className)}
       style={flatBandStyle}
     >
       <KeyMetricsInner
@@ -997,7 +1057,7 @@ export function KeyMetricsContent({
       showHeader={false}
       insightCompact={insightCompact}
       insightFullWidth={insightFullWidth}
-      metricsCellSurfaceClassName="bg-card"
+      metricsCellSurfaceClassName="bg-card dark:bg-transparent"
     />
   )
 }

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