@lovett/ui 0.0.10 → 0.1.0

package/src/calculator-shell-v2.tsx

@@ -11,6 +11,9 @@
  *   layout="shell" (default) — a single contained card (radius 24,
  *     --shell-shadow): flat header + padded body + bordered footer.
  *     For compact calculators.
+ *   Responsive (ADR-145 amendment): header / body / footer tighten to
+ *     16px padding below `sm` and the footer wraps, so a calculator reads
+ *     on a phone without the shell owning any width logic.
  *   layout="open" — the header becomes a rounded banner and the Frames
  *     sit directly on the page in a vertical stack; the footer is
  *     borderless/transparent. Scales to long forms (funnels).
@@ -21,17 +24,18 @@
  * `[lead, accentWord]` tuple for explicit control. No completion ring.
  *
  * Data seam (D9): `prefill` + `benchmarkSlot` are accepted but STUBBED
- * this ADR — `prefill` is typed and not read. Per ADR-076 Amendment 1 E,
- * `benchmarkSlot` now renders a muted "Benchmark unavailable in manual
- * mode" placeholder when absent (was: nothing). The live data wiring is a
- * separate future ADR.
+ * this ADR — `prefill` is typed and not read; `benchmarkSlot` renders only
+ * when a caller passes one. (ADR-076 Amendment 1 E's "Benchmark unavailable
+ * in manual mode" placeholder was retired by owner directive 2026-09-04 —
+ * ADR-145 amendment: a permanent "unavailable" strip on every calculator
+ * read as broken, not promising.) The live data wiring is a separate
+ * future ADR.
  *
  * Amendment 1 additions (2026-06-05):
  *   - `assumptions` (B) — manual-vs-connected inputs, "directional planning
  *     math, not observed performance," and the config/formula version.
  *     Rendered as a compact hover popover in the FOOTER (next to the footer
  *     note), not a body strip, so honest framing never lengthens the shell.
- *   - benchmark placeholder (E) — see above.
  *   - `copyReport` (F) — the footer Copy action emits a structured
  *     mini-report (inputs + result + StatRow chain + assumptions +
  *     benchmark status), not the bare number. Shell-owned so every
@@ -39,7 +43,7 @@
  */
 
 import { useState, type CSSProperties, type ReactNode } from 'react'
-import { BarChart3, Copy, Info } from 'lucide-react'
+import { Copy, Info } from 'lucide-react'
 import { Button } from './button'
 import { toast } from './toast'
 
@@ -90,8 +94,8 @@ export interface CalculatorShellV2Props {
   copyReport?: string | (() => string)
   /** STUBBED (D9) — typed, not read this ADR. */
   prefill?: CalcPrefill
-  /** "vs. benchmark" rail. When absent, the shell renders a muted
-   *  "Benchmark unavailable in manual mode" placeholder (Amendment 1 E). */
+  /** "vs. benchmark" rail. Rendered only when provided (the Amendment 1 E
+   *  placeholder is retired — ADR-145 amendment). */
   benchmarkSlot?: ReactNode
 }
 
@@ -119,29 +123,6 @@ function HeaderTitle({ title }: { title: string | [string, string] }) {
   )
 }
 
-/** Muted rail shown in place of `benchmarkSlot` until the benchmark data
- *  layer exists (Amendment 1 E) — reinforces the data-backed promise. */
-function BenchmarkPlaceholder() {
-  return (
-    <div
-      className="flex items-center"
-      style={{
-        gap: 10,
-        padding: '12px 16px',
-        borderRadius: 'var(--radius-lg)',
-        background: 'rgb(var(--muted))',
-        border: '1px dashed rgb(var(--border))',
-        color: 'rgb(var(--text-muted))',
-      }}
-    >
-      <BarChart3 size={15} />
-      <span style={{ fontSize: 12, fontWeight: 500 }}>
-        Benchmark unavailable in manual mode
-      </span>
-    </div>
-  )
-}
-
 /** Footer assumptions affordance (Amendment 1 B). A compact "Assumptions"
  *  trigger that reveals the full disclaimer in a hover/focus popover. The
  *  popover is absolutely positioned, so it never lengthens the shell — the
@@ -237,10 +218,9 @@ export function CalculatorShellV2({
 
   const header = (
     <header
-      className="flex items-center"
+      className="flex items-center px-4 py-4 sm:px-6 sm:py-5"
       style={{
         gap: 16,
-        padding: '20px 24px',
         background: 'rgb(var(--brand-ink))',
         borderRadius: isOpen ? 'var(--radius-xl)' : 0,
       }}
@@ -260,7 +240,8 @@ export function CalculatorShellV2({
       </span>
       <div className="flex-1 min-w-0">
         <div
-          className="font-semibold uppercase"
+          className="font-semibold uppercase truncate"
+          title={eyebrow}
           style={{
             fontFamily: 'var(--font-mono)',
             fontSize: 11,
@@ -287,10 +268,9 @@ export function CalculatorShellV2({
 
   const footer = (
     <footer
-      className="flex items-center"
+      className="flex flex-wrap items-center px-4 py-4 sm:px-6"
       style={{
         gap: 12,
-        padding: '16px 24px',
         borderTop: isOpen ? 'none' : '1px solid rgb(var(--border))',
         marginTop: isOpen ? 4 : 0,
         background: isOpen ? 'transparent' : 'rgb(var(--bg-card))',
@@ -336,7 +316,7 @@ export function CalculatorShellV2({
     <>
       {inputs}
       {result}
-      {benchmarkSlot ?? <BenchmarkPlaceholder />}
+      {benchmarkSlot}
     </>
   )
 
@@ -367,8 +347,8 @@ export function CalculatorShellV2({
         >
           {header}
           <div
-            className="flex flex-col"
-            style={{ padding: 'var(--space-6)', gap: 'var(--space-4)' }}
+            className="flex flex-col p-4 sm:p-6"
+            style={{ gap: 'var(--space-4)' }}
           >
             {body}
           </div>