@homefile/components-v2 2.60.0 → 2.60.2

package/dist/components/forms/readOnly/ReadOnlyDynamicForm.js

@@ -26,7 +26,17 @@ function toSafeValue(value) {
     return value;
 }
 export const ReadOnlyDynamicForm = ({ form: fields, onClick, onEdit, }) => {
-    return (_jsx(Box, { bg: "lightBlue.1", overflow: "scroll", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
+    return (
+    // `overflow="auto"`, not `"scroll"`. `scroll` reserves a scrollbar gutter on
+    // BOTH axes whether or not there is anything to scroll — measured at 15px
+    // each in Chrome with classic (non-overlay) scrollbars. That gutter is
+    // inside the box, so every field rendered here stops 15px short of the
+    // panel's right edge and a dead 15px band runs along the bottom, which is
+    // what showed up as the item card and warranty banner "not filling the
+    // panel". Nothing in this form scrolls sideways, so the horizontal gutter
+    // was pure loss. `auto` shows each bar only when that axis actually
+    // overflows and reserves nothing otherwise.
+    _jsx(Box, { bg: "lightBlue.1", overflow: "auto", children: fields === null || fields === void 0 ? void 0 : fields.map((field) => {
             const { children = [], icon, id, name, type } = field;
             const value = toSafeValue(field.value);
             const baseProps = {

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyAppliances.js

@@ -1,23 +1,67 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Text, Flex, Stack, IconButton, Box, Image, SimpleGrid } from '@chakra-ui/react';
+import { Text, Flex, Stack, IconButton, Box, Image, SimpleGrid, Grid } from '@chakra-ui/react';
 import { Edit } from '../../../../../components';
 import { colors } from '../../../../../theme/colors';
 import { formatCurrency } from '../../../../../utils';
 // Dashed rule between sections (XD: light gray dashed).
 const DashedRule = () => (_jsx(Box, { borderBottom: "1px dashed", borderColor: "lightGray.2" }));
 // Brand / Model# / Serial# row — label #6C7679, value #464646 (XD).
-const DetailRow = ({ label, value }) => (_jsxs(Flex, { children: [_jsx(Text, { w: "35%", fontFamily: "secondary", fontSize: "14px", lineHeight: "18px", color: "#6C7679", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "18px", color: "gray.3", children: value != null ? String(value) : '' })] }));
+//
+// The label column sizes to its content with a floor, rather than taking a
+// fixed 35%: a real label is "Brand/Manufacturer:" (a schema key in ~50 places
+// across the platform, so it cannot simply be shortened), and 35% of a narrow
+// drawer is not wide enough for it. The percentage broke it mid-word into
+// "Brand/Manufact" + "urer:". `keep-all` stops the mid-word break outright,
+// so a label that still outgrows the column wraps at a natural boundary.
+// Values arrive from different extractors with inconsistent casing — a brand
+// comes back "Maytag", a product type "front-load washing machine" — so the
+// column reads as a ransom note. Capitalize the FIRST character only and leave
+// the rest of the string untouched: that makes the column consistent without
+// rewriting the data, and keeps model numbers like "NC501" or "DCC-3400"
+// exactly as extracted (title-casing them would produce "Nc501").
+const leadCap = (s) => s.length > 0 ? s[0].toUpperCase() + s.slice(1) : s;
+// Renders as TWO grid cells rather than a self-contained row, so every label
+// shares one column and every value starts on the same left edge.
+//
+// Each row previously sized its own label independently, so the value column
+// was ragged — the longest label ("Avg Retail Price Range:") pushed its own
+// value right while the others sat further left. A fixed percentage was the
+// original spec and broke the opposite way, wrapping "Brand/Manufacturer:"
+// mid-word. A shared `max-content` column solves both: it is exactly as wide
+// as the longest label, so nothing wraps and everything aligns.
+const DetailRow = ({ label, value }) => (_jsxs(_Fragment, { children: [_jsx(Text, { wordBreak: "keep-all", fontFamily: "secondary", fontSize: "14px", lineHeight: "18px", color: "#6C7679", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "18px", color: "gray.3", children: value != null ? leadCap(String(value)) : '' })] }));
+// A value-row amount is currency-formatted only when it IS a single number.
+//
+// Catalog-resolved prices arrive as RANGE strings ("$229-$249") because that is
+// what can honestly be established for a model. formatCurrency runs Number() on
+// its input, and Number("$229-$249") is NaN, so formatting one prints "$NaN" on
+// the owner's card. A non-numeric amount is already human-readable — render it
+// as-is rather than mangling it.
+const formatValueAmount = (value) => {
+    if (value == null || value === '')
+        return '';
+    const numeric = typeof value === 'number' ? value : Number(String(value).replace(/[$,\s]/g, ''));
+    return Number.isFinite(numeric)
+        ? formatCurrency({ value: numeric })
+        : String(value);
+};
 // Retail Price / Est Replacement Cost — label left #6C7679, value right #464646.
-const ValueRow = ({ label, value, bold, }) => (_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "16px", lineHeight: "20px", color: "#6C7679", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "16px", lineHeight: "20px", color: "gray.3", fontWeight: bold ? 'bold' : 'normal', children: value != null && value !== ''
-                ? formatCurrency({ value: value })
-                : '' })] }));
+const ValueRow = ({ label, value, bold, }) => (_jsxs(Flex, { justify: "space-between", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "16px", lineHeight: "20px", color: "#6C7679", children: label }), _jsx(Text, { fontFamily: "secondary", fontSize: "16px", lineHeight: "20px", color: "gray.3", fontWeight: bold ? 'bold' : 'normal', children: formatValueAmount(value) })] }));
 export const ReadOnlyAppliances = ({ description, id, name, children = [], onEdit, value, }) => {
     var _a;
     const imageField = children.find(({ type }) => type === 'images');
     const images = (_a = imageField === null || imageField === void 0 ? void 0 : imageField.value) !== null && _a !== void 0 ? _a : [];
-    const [mainImage, setMainImage] = useState(images[0]);
+    // The chosen thumbnail is stored; the displayed image is DERIVED from it.
+    //
+    // `useState(images[0])` captured the first image only on the first render —
+    // and images arrive after that render, so the card kept showing an empty
+    // <Image> (a broken-picture box) until something else forced a re-render.
+    // Deriving means there is no second copy of "which image" to go stale, and a
+    // selection that is no longer in the list falls back instead of blanking.
+    const [chosenImage, setChosenImage] = useState(undefined);
+    const mainImage = chosenImage && images.includes(chosenImage) ? chosenImage : images[0];
     const detailFields = children.filter(({ type }) => type === 'text');
     const valueFields = children.filter(({ type }) => type === 'currency');
-    return (_jsxs(Stack, { spacing: "base", p: "base", bg: "neutral.white", mt: "2px", children: [(name || onEdit) && (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", children: [_jsx(Text, { fontFamily: "primary", fontSize: "12px", letterSpacing: "0", color: "#525458", textTransform: "uppercase", children: name }), onEdit && (_jsx(IconButton, { "aria-label": "Edit appliance", variant: "ghost", w: "fit-content", minW: "auto", h: "auto", p: "0", flexShrink: 0, icon: _jsx(Edit, { size: 18, stroke: colors.blue[3] }), onClick: () => onEdit(id) }))] })), _jsxs(Flex, { gap: "base", align: "stretch", children: [_jsxs(Flex, { direction: "column", gap: "base", flexShrink: 0, w: "174px", children: [_jsx(Image, { src: mainImage, alt: "home item", boxSize: "174px", objectFit: "cover" }), images.length > 0 && (_jsx(SimpleGrid, { columns: 4, spacing: "2", children: images.map((image) => (_jsx(Box, { as: "button", backgroundImage: image, backgroundSize: "cover", backgroundPosition: "center", boxSize: "34px", onClick: () => setMainImage(image) }, image))) }))] }), _jsxs(Stack, { flex: "1", spacing: "base", children: [_jsxs(Stack, { spacing: "13px", children: [_jsx(Text, { fontFamily: "primary", fontWeight: "600", fontSize: "22px", lineHeight: "15px", letterSpacing: "0", color: "gray.3", children: value }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "15px", color: "gray.3", children: description })] }), _jsx(DashedRule, {}), detailFields.length > 0 && (_jsx(Stack, { spacing: "0", children: detailFields.map((field) => (_jsx(DetailRow, { label: field.name ? `${field.name}:` : undefined, value: field.value }, `${field.id}-${field.name}`))) })), valueFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx(DashedRule, {}), _jsx(Stack, { spacing: "0", children: valueFields.map((field, i) => (_jsx(ValueRow, { label: field.name, value: field.value, bold: i === valueFields.length - 1 }, `${field.id}-${field.name}`))) })] }))] })] })] }));
+    return (_jsxs(Stack, { spacing: "base", p: "base", bg: "neutral.white", mt: "2px", children: [(name || onEdit) && (_jsxs(Flex, { justify: "space-between", align: "center", w: "full", children: [_jsx(Text, { fontFamily: "primary", fontSize: "12px", letterSpacing: "0", color: "#525458", textTransform: "uppercase", children: name }), onEdit && (_jsx(IconButton, { "aria-label": "Edit appliance", variant: "ghost", w: "fit-content", minW: "auto", h: "auto", p: "0", flexShrink: 0, icon: _jsx(Edit, { size: 18, stroke: colors.blue[3] }), onClick: () => onEdit(id) }))] })), _jsxs(Flex, { gap: "base", align: "stretch", children: [_jsxs(Flex, { direction: "column", gap: "base", flexShrink: 0, w: "174px", children: [_jsx(Image, { src: mainImage, alt: "home item", boxSize: "174px", objectFit: "cover" }), images.length > 0 && (_jsx(SimpleGrid, { columns: 4, spacing: "2", children: images.map((image) => (_jsx(Box, { as: "button", backgroundImage: image, backgroundSize: "cover", backgroundPosition: "center", boxSize: "34px", onClick: () => setChosenImage(image) }, image))) }))] }), _jsxs(Stack, { flex: "1", spacing: "base", children: [_jsxs(Stack, { spacing: "13px", children: [_jsx(Text, { fontFamily: "primary", fontWeight: "600", fontSize: "22px", lineHeight: "26px", letterSpacing: "0", color: "gray.3", children: value }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", lineHeight: "15px", color: "gray.3", children: description })] }), _jsx(DashedRule, {}), detailFields.length > 0 && (_jsx(Grid, { templateColumns: "max-content 1fr", columnGap: "base", rowGap: "0", alignItems: "start", children: detailFields.map((field) => (_jsx(DetailRow, { label: field.name ? `${field.name}:` : undefined, value: field.value }, `${field.id}-${field.name}`))) })), valueFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx(DashedRule, {}), _jsx(Stack, { spacing: "0", children: valueFields.map((field, i) => (_jsx(ValueRow, { label: field.name, value: field.value, bold: i === valueFields.length - 1 }, `${field.id}-${field.name}`))) })] }))] })] })] }));
 };

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyWarrantyBanner.d.ts

@@ -1,2 +1,2 @@
 import { ReadOnlyWarrantyBannerI } from '../../../../../interfaces';
-export declare const ReadOnlyWarrantyBanner: ({ icon, value, state, link, }: ReadOnlyWarrantyBannerI) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ReadOnlyWarrantyBanner: ({ icon, value, state, link, onAction, actionLabel, }: ReadOnlyWarrantyBannerI) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/forms/readOnly/fields/homeItem/ReadOnlyWarrantyBanner.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex, Image, Link, Text } from '@chakra-ui/react';
+import { t } from 'i18next';
+import { Box, Circle, Flex, Image, Link, Text } from '@chakra-ui/react';
+import { ArrowLeft } from '../../../../../components';
 import { fieldIcons } from '../../../../../helpers';
+import { colors } from '../../../../../theme/colors';
 /**
  * Warranty-status banner. Built to the EXACT CSS from the "Read Only Item" XD
  * (dev/spec mode), under-warranty artboard:
@@ -25,18 +28,48 @@ import { fieldIcons } from '../../../../../helpers';
 const STATE = {
     underWarranty: { bg: '#F2F9F2', badge: '#E0EBE0', icon: 'warranty' },
     expired: { bg: 'lightGray.1', badge: 'lightGray.2', icon: 'warranty' }, // TODO: swap to the expired icon
+    // EXACT CSS from the unknown-warranty XD artboard (Matt, 09-21) — no longer
+    // provisional. Light blue reads INFORMATIONAL: deliberately neither the
+    // green of "covered" nor the gray of "lapsed", because the point of the
+    // state is that we do not know which it is.
+    //   container #DEEDF7 · badge #BFDCEF · "?" #5F7482 Poppins SemiBold 29px
+    unverified: { bg: '#DEEDF7', badge: '#BFDCEF', icon: 'warranty' },
     recall: { bg: 'error.1', badge: 'error.2', icon: 'warranty' }, // TODO: swap to the recall icon
 };
-export const ReadOnlyWarrantyBanner = ({ icon, value, state = 'underWarranty', link, }) => {
+export const ReadOnlyWarrantyBanner = ({ icon, value, 
+// Defaults to the NEUTRAL state, not to "covered". The only production
+// caller spreads field data (ReadOnlyDynamicForm), so a warranty field that
+// arrives without an explicit state used to assert coverage by omission —
+// the same fail-unsafe default as the STATE lookup below. Callers that mean
+// "under warranty" must say so.
+state = 'unverified', link, onAction, actionLabel, }) => {
     var _a;
     // No data → render nothing. Never fabricate a status (critical for recall).
     if (!value)
         return null;
-    const s = (_a = STATE[state]) !== null && _a !== void 0 ? _a : STATE.underWarranty;
+    // Fail SAFE on an unrecognised state: degrade to "we don't know", never to
+    // "you are covered". This is not hypothetical — a caller on a NEWER build
+    // than the installed package can send a state this copy has no key for (e.g.
+    // 'unverified' against 2.60.0), and a green fallback would assert coverage
+    // the data cannot support. Neutral is the only defensible default.
+    const s = (_a = STATE[state]) !== null && _a !== void 0 ? _a : STATE.unverified;
     // Field-provided icon overrides; otherwise the state's own (swappable) icon.
     const iconKey = icon !== null && icon !== void 0 ? icon : s.icon;
     const bannerIcon = iconKey ? fieldIcons[iconKey] : '';
-    return (_jsxs(Flex, { align: "center", gap: "10px", minH: "76px", pl: "10px", pr: "base", bg: s.bg, mt: "2px", children: [_jsx(Flex, { align: "center", justify: "center", flexShrink: 0, boxSize: "45px", borderRadius: "full", bg: s.badge, children: state === 'recall' ? (
-                // Extra-bold Poppins "!" sized to the internal icon (~29px).
-                _jsx(Text, { fontFamily: "primary", fontWeight: "extrabold", fontSize: "29px", lineHeight: "1", color: "neutral.white", children: "!" })) : (bannerIcon && (_jsx(Image, { src: bannerIcon, alt: "warranty status", w: "27px", h: "29px", objectFit: "contain" }))) }), link ? (_jsx(Link, { href: link, isExternal: true, fontFamily: "primary", fontSize: "16px", lineHeight: "20px", letterSpacing: "0", color: "gray.3", sx: { textWrap: 'balance' }, children: String(value) })) : (_jsx(Text, { fontFamily: "primary", fontSize: "16px", lineHeight: "20px", letterSpacing: "0", color: "gray.3", sx: { textWrap: 'balance' }, children: String(value) }))] }));
+    // States drawn as a typographic glyph rather than an image asset. Both are
+    // punctuation the brand face already carries, so neither needs an icon file.
+    const glyph = state === 'recall' ? '!' : state === 'unverified' ? '?' : '';
+    // Band height is 64px, down from the XD's 76px (Matt, 2026-09-21) — it read as
+    // too deep above the item card in the live panel. Nothing else drove that
+    // height: the badge is 45px and two lines of 16px/20px copy are 40px, so 76px
+    // was a floor with ~15px of dead space above and below. 64px leaves ~9px
+    // around the badge and still clears two lines without clipping. Below ~53px
+    // the badge would start touching the edges.
+    return (_jsxs(Flex, { align: "center", gap: "10px", minH: "64px", pl: "10px", pr: "base", bg: s.bg, mt: "2px", children: [_jsx(Flex, { align: "center", justify: "center", flexShrink: 0, boxSize: "45px", borderRadius: "full", bg: s.badge, children: glyph ? (
+                // Typographic glyph sized to the internal icon (29px): "!" for
+                // recall, "?" for unverified. Recall keeps extra-bold white on its
+                // saturated badge; unverified is exact XD — Poppins SemiBold (600)
+                // in #5F7482, a desaturated slate that reads on the pale badge
+                // without competing with the message.
+                _jsx(Text, { fontFamily: "primary", fontWeight: state === 'recall' ? 'extrabold' : '600', fontSize: "29px", lineHeight: "1", color: state === 'recall' ? 'neutral.white' : '#5F7482', children: glyph })) : (bannerIcon && (_jsx(Image, { src: bannerIcon, alt: "warranty status", w: "27px", h: "29px", objectFit: "contain" }))) }), link ? (_jsx(Link, { href: link, isExternal: true, fontFamily: "primary", fontSize: "16px", lineHeight: "20px", letterSpacing: "0", color: "gray.3", sx: { textWrap: 'balance' }, children: String(value) })) : (_jsx(Text, { fontFamily: "primary", fontSize: "16px", lineHeight: "20px", letterSpacing: "0", color: "gray.3", sx: { textWrap: 'balance' }, children: String(value) })), onAction && (_jsx(Circle, { as: "button", type: "button", onClick: onAction, "aria-label": actionLabel !== null && actionLabel !== void 0 ? actionLabel : t('buttons.forward'), size: "40px", bg: "neutral.white", flexShrink: 0, ml: "auto", transition: "all 0.2s ease-in-out", _hover: { boxShadow: 'lg' }, children: _jsx(Box, { transform: "rotate(180deg)", lineHeight: "0", children: _jsx(ArrowLeft, { stroke: colors.blue[2], size: 24 }) }) }))] }));
 };

package/dist/interfaces/forms/readOnly/homeItem/ReadOnlyWarrantyBanner.interface.d.ts

@@ -1,22 +1,39 @@
 import { IconTypes, ValueTypes } from '../../../../interfaces';
 /**
- * The three warranty states the banner can render. Derived upstream from the
- * item's purchase date + parsed warranty term (see tickets #356/#357):
+ * The warranty states the banner can render. Derived upstream from the item's
+ * purchase date + parsed warranty term (see tickets #356/#357):
  * - `underWarranty` — still covered
  * - `expired` — warranty term has lapsed
+ * - `unverified` — the TERM is known but the purchase DATE is not, so no
+ *   expiry can be computed and neither "covered" nor "lapsed" is knowable
  * - `recall` — an active manufacturer recall
  *
  * HONESTY: `recall` must ONLY be passed with REAL recall data. There is no
  * recall data source in the platform today (#357), so callers must not pass
  * state="recall" until one exists — the banner never fabricates an alert.
+ *
+ * HONESTY: `unverified` is the DEFAULT-CORRECT state for catalog warranty
+ * data, and callers should reach for it rather than dressing the gap up as a
+ * status. We hold the term on most products (warranty_parts is populated on
+ * 68/91) but an item carries only `createdAt` — when WE first saw it, not when
+ * the owner bought it. Passing `underWarranty` there would assert coverage the
+ * user may not have, which is the most damaging thing this banner can do;
+ * passing `expired` borrows a lapsed-looking palette for something we simply
+ * do not know. `unverified` claims only what is true: this is the term, and
+ * the start date is missing.
  */
-export type WarrantyBannerState = 'underWarranty' | 'expired' | 'recall';
+export type WarrantyBannerState = 'underWarranty' | 'expired' | 'unverified' | 'recall';
 export interface ReadOnlyWarrantyBannerI {
     /** Status message, e.g. "This item is under the manufacturer's warranty till 2030." */
     value?: ValueTypes;
     /** `fieldIcons` key for the badge glyph (e.g. 'boc-warranty'). */
     icon?: IconTypes;
-    /** Which state to render. Defaults to `underWarranty`. */
+    /**
+     * Which state to render. Defaults to `unverified`, and an unrecognised
+     * value falls back to it too — the banner degrades to "we don't know",
+     * never to "you are covered". Pass `underWarranty` explicitly when coverage
+     * is actually known.
+     */
     state?: WarrantyBannerState;
     /**
      * Optional destination for the banner. Down the road: a recall notice on
@@ -24,4 +41,14 @@ export interface ReadOnlyWarrantyBannerI {
      * message becomes a link.
      */
     link?: string;
+    /**
+     * In-app action for the banner, rendered as the circular arrow button at the
+     * right edge (unknown-warranty XD). Distinct from `link`, which is an
+     * external href — "add your receipt" opens a panel, it does not navigate
+     * away. The button renders ONLY when this is supplied, so states and callers
+     * without an action are unchanged.
+     */
+    onAction?: () => void;
+    /** Accessible label for that button. Defaults to a generic action label. */
+    actionLabel?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.60.0",
+  "version": "2.60.2",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",