@homefile/components-v2 2.59.2 → 2.60.0

package/dist/components/myProfile/details/HomiSms.js

@@ -3,33 +3,63 @@ import { t } from 'i18next';
 import { Controller, useForm, useWatch } from 'react-hook-form';
 import { useEffect, useState } from 'react';
 import * as yup from 'yup';
-import { Stack, Flex, Img, Text, Box, FormControl, FormLabel, Switch, Checkbox, Button, } from '@chakra-ui/react';
+import { Stack, Flex, Img, Text, Box, FormControl, FormLabel, Switch, Link, } from '@chakra-ui/react';
 import { SMS } from '../../../assets/images';
 import { ControlledInput, Loading } from '../../../components';
-export const HomiSms = ({ mode = 'full', sms = '', loading, onChange, onSave, }) => {
-    var _a;
+import { formatPhone, toPhoneDigits } from '../../../utils';
+// "Enable Homi SMS Messaging" account setting. The ON/OFF toggle IS the enable
+// — no separate SMS checkbox (redundant). The toggle is controllable
+// (`enabled`) so it reflects real state, e.g. ON with the user's number for
+// accounts Homi created via SMS. The phone is disabled until enabled and is
+// pre-filled by the app from the 2FA-SMS number when present. A consent link
+// (`consentUrl`) points to the SMS messaging consent language (legal's
+// content). Saving is IMPLICIT — flipping the toggle saves immediately, and the
+// number saves on blur once valid — so there is no Save button.
+// `mode='phone-only'` renders just the phone field for flows that only need the
+// number.
+export const HomiSms = ({ mode = 'full', enabled = false, phone = '', consentUrl, loading, onChange, onSave, }) => {
     const isPhoneOnly = mode === 'phone-only';
-    const { control, handleSubmit } = useForm({
-        defaultValues: { sms },
-    });
+    const { control, trigger } = useForm({ defaultValues: { phone } });
     const values = useWatch({ control });
-    const smsValue = (_a = values === null || values === void 0 ? void 0 : values.sms) !== null && _a !== void 0 ? _a : '';
-    const [isEnabled, setIsEnabled] = useState(false);
-    const [isSmsEnabled, setIsSmsEnabled] = useState(true);
-    const showButtons = isPhoneOnly
-        ? smsValue !== sms
-        : smsValue !== sms || isEnabled || !isSmsEnabled;
-    const handlePhoneValidation = (value) => {
-        if (isPhoneOnly)
-            return yup.string().required().min(10).max(10).isValidSync(value);
-        if (isEnabled && isSmsEnabled)
-            return yup.string().required().min(10).max(10).isValidSync(value);
-        return true;
-    };
+    const [isEnabled, setIsEnabled] = useState(enabled);
+    const isPhoneValid = (value) => yup.string().required().min(10).max(10).isValidSync(value);
+    // Optional live-change listener.
+    useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange({ enabled: isEnabled, phone: values.phone });
+    }, [onChange, values, isEnabled]);
+    // Enabling requires a phone number: turning it on surfaces the required
+    // error until a valid number is entered.
     useEffect(() => {
-        if (onChange && values) {
-            onChange({ sms: values.sms });
+        if (isEnabled)
+            trigger('phone');
+    }, [isEnabled, trigger]);
+    // Implicit save: the toggle saves the instant it flips; the number saves on
+    // blur once it is valid. No Save button. Turning ON only persists `enabled`
+    // once there is a valid number (otherwise the error shows and the save waits
+    // for the number's blur); turning OFF always saves immediately.
+    const handleToggle = (checked) => {
+        setIsEnabled(checked);
+        if (!checked)
+            onSave === null || onSave === void 0 ? void 0 : onSave({ enabled: false, phone: values.phone });
+        else if (isPhoneValid(values.phone))
+            onSave === null || onSave === void 0 ? void 0 : onSave({ enabled: true, phone: values.phone });
+    };
+    const handlePhoneBlur = (value, fieldBlur) => {
+        fieldBlur === null || fieldBlur === void 0 ? void 0 : fieldBlur();
+        // Cleared number → DELETE it, and turn messaging off (it can't be on
+        // without a number). This is distinct from toggling off, which pauses
+        // messaging but keeps the number. The 2FA number is unaffected either way.
+        if (toPhoneDigits(value).length === 0) {
+            setIsEnabled(false);
+            onSave === null || onSave === void 0 ? void 0 : onSave({ enabled: false, phone: '' });
+            return;
         }
-    }, [onChange, values]);
-    return (_jsxs(Box, { position: "relative", children: [loading && _jsx(Loading, {}), _jsxs(Stack, { bg: "lightBlue.2", px: "base", py: "4", spacing: "4", children: [_jsxs(Stack, { spacing: "3", children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsxs(Flex, { gap: "base", align: "center", children: [_jsx(Img, { src: SMS, alt: t('myProfile.details.homiSmsAlt') }), _jsx(Text, { fontSize: "sm", textTransform: "uppercase", children: t('myProfile.details.homiSmsTitle') })] }), !isPhoneOnly && (_jsxs(FormControl, { display: "flex", alignItems: "center", w: "fit-content", children: [_jsx(FormLabel, { htmlFor: "homi-sms", mb: "0", fontSize: "sm", children: isEnabled ? 'ON' : 'OFF' }), _jsx(Switch, { id: "homi-sms", size: "lg", isChecked: isEnabled, onChange: (e) => setIsEnabled(e.target.checked) })] }))] }), _jsx(Text, { fontFamily: "secondary", lineHeight: "1.2", children: t('myProfile.details.homiSmsSubtitle') })] }), _jsxs(Flex, { gap: "base", align: "center", justify: "space-between", children: [!isPhoneOnly && (_jsx(Checkbox, { size: "md", isChecked: isSmsEnabled, onChange: (e) => setIsSmsEnabled(e.target.checked), isDisabled: !isEnabled, children: _jsx(Text, { variant: "info", fontWeight: "normal", children: "SMS" }) })), _jsx(Box, { w: isPhoneOnly ? '100%' : '75%', children: _jsx(Controller, { name: "sms", control: control, rules: { validate: handlePhoneValidation }, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(ControlledInput, { placeholder: t('myProfile.placeholders.sms'), onChange: onChange, onBlur: onBlur, value: value !== null && value !== void 0 ? value : '', type: "tel", hasError: invalid, errorMessage: `${t('forms.invalid')} ${t('forms.phone')}`, isDisabled: !isPhoneOnly && (!isEnabled || !isSmsEnabled) })) }) })] }), showButtons && onSave && (_jsx(Box, { w: "75%", alignSelf: "end", children: _jsx(Button, { variant: "secondaryFooter", type: "submit", bg: "neutral.white", fontWeight: "medium", onClick: handleSubmit(onSave), children: t('buttons.save').toUpperCase() }) }))] })] }));
+        if (!isPhoneValid(value))
+            return;
+        if (isPhoneOnly)
+            onSave === null || onSave === void 0 ? void 0 : onSave({ phone: value });
+        else if (isEnabled)
+            onSave === null || onSave === void 0 ? void 0 : onSave({ enabled: isEnabled, phone: value });
+    };
+    return (_jsxs(Box, { position: "relative", children: [loading && _jsx(Loading, {}), _jsxs(Stack, { bg: "lightBlue.2", px: "base", py: "4", spacing: "4", children: [_jsxs(Stack, { spacing: "3", children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsxs(Flex, { gap: "base", align: "center", children: [_jsx(Img, { src: SMS, alt: t('myProfile.details.homiSmsAlt') }), _jsx(Text, { fontSize: "sm", textTransform: "uppercase", children: t('myProfile.details.homiSmsTitle') })] }), !isPhoneOnly && (_jsxs(FormControl, { display: "flex", alignItems: "center", w: "fit-content", children: [_jsx(FormLabel, { htmlFor: "homi-sms", mb: "0", fontSize: "sm", children: isEnabled ? 'ON' : 'OFF' }), _jsx(Switch, { id: "homi-sms", size: "lg", isChecked: isEnabled, onChange: (e) => handleToggle(e.target.checked) })] }))] }), !isPhoneOnly && (_jsxs(Stack, { spacing: "1", children: [_jsx(Text, { fontFamily: "secondary", lineHeight: "1.2", children: t('myProfile.details.homiSmsSubtitle') }), consentUrl && (_jsx(Link, { href: consentUrl, isExternal: true, w: "fit-content", fontFamily: "secondary", fontSize: "sm", color: "blue.2", textDecoration: "underline", children: t('myProfile.details.homiSmsConsent') }))] }))] }), _jsx(Controller, { name: "phone", control: control, rules: { validate: (value) => isPhoneOnly || !isEnabled || isPhoneValid(value) }, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(ControlledInput, { placeholder: t('myProfile.placeholders.sms'), onChange: (e) => onChange(toPhoneDigits(e.target.value)), onBlur: () => handlePhoneBlur(value, onBlur), value: formatPhone(value), type: "tel", hasError: invalid, errorMessage: `${t('forms.invalid')} ${t('forms.phone')}`, isDisabled: !isPhoneOnly && !isEnabled })) })] })] }));
 };

package/dist/components/myProfile/details/TwoFactorSetting.js

@@ -4,6 +4,7 @@ import { Controller } from 'react-hook-form';
 import { Stack, Flex, Img, Text, Box, FormControl, FormLabel, Switch, Button, } from '@chakra-ui/react';
 import { Security } from '../../../assets/images';
 import { ControlledInput, Loading, RadioButton, TextInput, } from '../../../components';
+import { formatPhone, toPhoneDigits } from '../../../utils';
 import { useTwoFactorSetting } from '../../../hooks';
 export const TwoFactorSetting = ({ defaultValue = 'email', email = '', loading, onChange, onSave, sms = '', twoFactor, }) => {
     const { altText, control, emailRadio, group, handleEmailValidation, handlePhoneValidation, handleSubmit, is2faEnabled, radioValue, showButtons, smsRadio, } = useTwoFactorSetting({
@@ -17,5 +18,5 @@ export const TwoFactorSetting = ({ defaultValue = 'email', email = '', loading,
     return (_jsxs(Box, { position: "relative", children: [loading && _jsx(Loading, {}), _jsxs(Stack, { bg: "lightBlue.1", px: "base", py: "4", spacing: "8", children: [_jsxs(Stack, { spacing: "4", children: [_jsxs(Flex, { align: "center", justify: "space-between", children: [_jsxs(Flex, { gap: "base", align: "center", children: [_jsx(Img, { src: Security, alt: altText }), _jsx(Text, { fontSize: "sm", textTransform: "uppercase", children: t('myProfile.details.2FactorTitle') })] }), _jsx(Controller, { name: "2fa", control: control, render: ({ field: { value, onChange, onBlur } }) => {
                                             const label = value ? 'ON' : 'OFF';
                                             return (_jsxs(FormControl, { display: "flex", alignItems: "center", w: "fit-content", children: [_jsx(FormLabel, { htmlFor: "2fa", mb: "0", fontSize: "sm", children: label }), _jsx(Switch, { id: "2fa", size: "lg", isChecked: value, onChange: onChange, onBlur: onBlur })] }));
-                                        } })] }), _jsx(Text, { fontFamily: "secondary", lineHeight: "1.2", children: t('myProfile.details.2FactorSubtitle') })] }), _jsxs(Stack, Object.assign({}, group, { spacing: "4", children: [_jsxs(Flex, { gap: "base", align: "center", justify: "space-between", children: [_jsx(RadioButton, Object.assign({}, emailRadio, { isDisabled: !is2faEnabled, children: "Email" })), _jsx(Box, { w: "75%", children: _jsx(Controller, { name: "email", control: control, rules: { validate: handleEmailValidation }, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(TextInput, { placeholder: t('myProfile.placeholders.email'), handleChange: onChange, onBlur: onBlur, value: value, hasError: invalid, errorMessage: `${t('forms.invalid')} ${t('forms.email')}`, isDisabled: true })) }) })] }), _jsxs(Flex, { gap: "base", align: "center", justify: "space-between", children: [_jsx(RadioButton, Object.assign({}, smsRadio, { isDisabled: !is2faEnabled, children: "SMS" })), _jsx(Box, { w: "75%", children: _jsx(Controller, { name: "sms", control: control, rules: { validate: handlePhoneValidation }, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(ControlledInput, { placeholder: t('myProfile.placeholders.sms'), onChange: onChange, onBlur: onBlur, value: value, type: "number", hasError: invalid, errorMessage: `${t('forms.invalid')} ${t('forms.phone')}`, isDisabled: radioValue === 'email' || !is2faEnabled })) }) })] }), _jsx(Box, { w: "75%", alignSelf: "end", children: showButtons && (_jsx(Button, { variant: "secondaryFooter", type: "submit", bg: "neutral.white", fontWeight: "medium", onClick: handleSubmit(onSave), children: t('buttons.save').toUpperCase() })) })] }))] })] }));
+                                        } })] }), _jsx(Text, { fontFamily: "secondary", lineHeight: "1.2", children: t('myProfile.details.2FactorSubtitle') })] }), _jsxs(Stack, Object.assign({}, group, { spacing: "4", children: [_jsxs(Flex, { gap: "base", align: "center", justify: "space-between", children: [_jsx(RadioButton, Object.assign({}, emailRadio, { isDisabled: !is2faEnabled, children: "Email" })), _jsx(Box, { w: "75%", children: _jsx(Controller, { name: "email", control: control, rules: { validate: handleEmailValidation }, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(TextInput, { placeholder: t('myProfile.placeholders.email'), handleChange: onChange, onBlur: onBlur, value: value, hasError: invalid, errorMessage: `${t('forms.invalid')} ${t('forms.email')}`, isDisabled: true })) }) })] }), _jsxs(Flex, { gap: "base", align: "center", justify: "space-between", children: [_jsx(RadioButton, Object.assign({}, smsRadio, { isDisabled: !is2faEnabled, children: "SMS" })), _jsx(Box, { w: "75%", children: _jsx(Controller, { name: "sms", control: control, rules: { validate: handlePhoneValidation }, render: ({ field: { value, onBlur, onChange }, fieldState: { invalid }, }) => (_jsx(ControlledInput, { placeholder: t('myProfile.placeholders.sms'), onChange: (e) => onChange(toPhoneDigits(e.target.value)), onBlur: onBlur, value: formatPhone(value), type: "tel", hasError: invalid, errorMessage: `${t('forms.invalid')} ${t('forms.phone')}`, isDisabled: radioValue === 'email' || !is2faEnabled })) }) })] }), _jsx(Box, { w: "75%", alignSelf: "end", children: showButtons && (_jsx(Button, { variant: "secondaryFooter", type: "submit", bg: "neutral.white", fontWeight: "medium", onClick: handleSubmit(onSave), children: t('buttons.save').toUpperCase() })) })] }))] })] }));
 };

package/dist/components/rooms/RoomHeader.d.ts

@@ -1,2 +1,2 @@
 import { RoomHeaderI } from '../../interfaces';
-export declare const RoomHeader: ({ isDeleteDisabled, onClickDelete, onSubmit, room, roomAmount, disabled, }: RoomHeaderI) => import("react/jsx-runtime").JSX.Element;
+export declare const RoomHeader: ({ isDeleteDisabled, onClickDelete, onSubmit, room, roomAmount, roomEstimatedAmount, disabled, }: RoomHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/rooms/RoomHeader.js

@@ -4,9 +4,9 @@ import { Box, Flex, Center, Image, IconButton, Text, Show, Button, } from '@chak
 import { TextInput, TrashIcon, Edit } from '../../components';
 import { roomIcons } from '../../helpers';
 import { useRoomHeader } from '../../hooks';
-export const RoomHeader = ({ isDeleteDisabled, onClickDelete, onSubmit, room, roomAmount, disabled, }) => {
-    const { formattedAmount, handleChange, handleClick, inputValue, isEditing } = useRoomHeader({ onSubmit, room, roomAmount });
+export const RoomHeader = ({ isDeleteDisabled, onClickDelete, onSubmit, room, roomAmount, roomEstimatedAmount, disabled, }) => {
+    const { formattedAmount, formattedEstimatedAmount, hasEstimate, handleChange, handleClick, inputValue, isEditing, } = useRoomHeader({ onSubmit, room, roomAmount, roomEstimatedAmount });
     return (_jsx(Box, { w: "full", bg: "lightBlue.4", py: "2", px: "base", "data-testid": "room-header", children: _jsxs(Flex, { justify: "space-between", align: "center", children: [_jsxs(Flex, { w: "fit-content", children: [_jsx(Center, { h: "2.3rem", minW: "2.6rem", mr: "2", children: _jsx(Image, { alt: room.name, maxH: "2rem", src: roomIcons[room.type], w: "auto" }) }), _jsx(TextInput, { fontWeight: isEditing ? 'regular' : 'medium', fontSize: "1.25rem", fontFamily: "primary", handleChange: handleChange, height: "full", id: room.name, isDisabled: !isEditing || disabled, placeholder: "", value: isEditing && !disabled
                                 ? inputValue || ''
-                                : (inputValue === null || inputValue === void 0 ? void 0 : inputValue.toUpperCase()) || '' }), isEditing && !disabled ? (_jsx(Button, { variant: "tertiary", onClick: handleClick, ml: "2", children: t('roomHeader.saveBtn') })) : (_jsx(IconButton, { "aria-label": t('ariaLabels.edit'), icon: _jsx(Edit, {}), maxW: "fit-content", onClick: handleClick, px: "2", variant: "menuIconWithShadow", id: "customizeRoomName", disabled: disabled }))] }), _jsxs(Flex, { align: "center", gap: "6", children: [_jsxs(Flex, { align: "center", gap: "6", id: "trackRoomValue", bg: "lightBlue.4", children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Text, { fontWeight: "medium", variant: "caption", children: t('roomHeader.roomValue').toUpperCase() }) }), _jsx(Text, { variant: "titleBolder", children: formattedAmount }), _jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Box, { h: "5", w: "1px", bg: "lightBlue.6" }) })] }), _jsx(IconButton, { "aria-label": t('ariaLabels.delete'), icon: _jsx(TrashIcon, {}), maxW: "fit-content", onClick: () => onClickDelete(room._id), disabled: isDeleteDisabled, px: "1", variant: "menuIconWithShadow" })] })] }) }));
+                                : (inputValue === null || inputValue === void 0 ? void 0 : inputValue.toUpperCase()) || '' }), isEditing && !disabled ? (_jsx(Button, { variant: "tertiary", onClick: handleClick, ml: "2", children: t('roomHeader.saveBtn') })) : (_jsx(IconButton, { "aria-label": t('ariaLabels.edit'), icon: _jsx(Edit, {}), maxW: "fit-content", onClick: handleClick, px: "2", variant: "menuIconWithShadow", id: "customizeRoomName", disabled: disabled }))] }), _jsxs(Flex, { align: "center", gap: "6", children: [_jsxs(Flex, { align: "center", gap: "6", id: "trackRoomValue", bg: "lightBlue.4", children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Text, { fontWeight: "medium", variant: "caption", children: t('roomHeader.roomValue').toUpperCase() }) }), _jsx(Text, { variant: "titleBolder", children: formattedAmount }), _jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Box, { h: "5", w: "1px", bg: "lightBlue.6" }) })] }), hasEstimate && (_jsxs(Flex, { align: "center", gap: "6", id: "trackRoomEstimatedValue", bg: "lightBlue.4", children: [_jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Text, { fontWeight: "medium", variant: "caption", children: t('roomHeader.estValue').toUpperCase() }) }), _jsx(Text, { variant: "titleBolder", children: formattedEstimatedAmount }), _jsx(Show, { breakpoint: "(min-width: 600px)", children: _jsx(Box, { h: "5", w: "1px", bg: "lightBlue.6" }) })] })), _jsx(IconButton, { "aria-label": t('ariaLabels.delete'), icon: _jsx(TrashIcon, {}), maxW: "fit-content", onClick: () => onClickDelete(room._id), disabled: isDeleteDisabled, px: "1", variant: "menuIconWithShadow" })] })] }) }));
 };

package/dist/components/wizard/ControlledWizard.d.ts

@@ -1,4 +1,4 @@
 import { ControlledWizardI } from '../../interfaces';
 import { PropsWithChildren } from 'react';
-export declare function ControlledWizard<Key extends string = string>({ bodyWidth, steps, height, headerBlink, footerBlink, ...props }: ControlledWizardI<Key>): import("react/jsx-runtime").JSX.Element | null;
+export declare function ControlledWizard<Key extends string = string>({ bodyWidth, steps, height, headerBlink, footerBlink, transition, ...props }: ControlledWizardI<Key>): import("react/jsx-runtime").JSX.Element | null;
 export declare const WizardBodyPadding: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/ControlledWizard.js

@@ -12,10 +12,12 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, Stack } from '@chakra-ui/react';
 import { AnimatePresence, motion } from 'framer-motion';
+import { usePrefersReducedMotion } from '../../hooks';
 const MotionBox = motion.create(typeof Box);
 export function ControlledWizard(_a) {
     var _b, _c;
-    var { bodyWidth = '80%', steps, height = '700px', headerBlink, footerBlink } = _a, props = __rest(_a, ["bodyWidth", "steps", "height", "headerBlink", "footerBlink"]);
+    var { bodyWidth = '80%', steps, height = '700px', headerBlink, footerBlink, transition = 'crossfade' } = _a, props = __rest(_a, ["bodyWidth", "steps", "height", "headerBlink", "footerBlink", "transition"]);
+    const prefersReducedMotion = usePrefersReducedMotion();
     const isKeyed = 'stepKey' in props;
     const current = isKeyed
         ? (_b = steps.find((s) => s.key === props.stepKey)) !== null && _b !== void 0 ? _b : steps[0]
@@ -75,10 +77,47 @@ export function ControlledWizard(_a) {
             transition: { duration: 0.18 },
         },
     };
+    // Directional (Typeform-style) body transition: horizontal slide + a subtle
+    // enter-flip (POC). Reduced motion collapses every transition to a plain fade.
+    const directionalBodyVariants = {
+        initial: { opacity: 0, x: 74, rotateY: 38 },
+        animate: {
+            opacity: 1,
+            x: 0,
+            rotateY: 0,
+            transition: { duration: 0.55, ease: [0.5, 0, 0.15, 1] },
+        },
+        exit: {
+            opacity: 0,
+            x: -74,
+            transition: { duration: 0.3, ease: [0.5, 0, 0.15, 1] },
+        },
+    };
+    const reducedVariants = {
+        initial: { opacity: 0 },
+        animate: { opacity: 1, transition: { duration: 0.2 } },
+        exit: { opacity: 0, transition: { duration: 0.15 } },
+    };
+    const effectiveHeaderVariants = prefersReducedMotion
+        ? reducedVariants
+        : headerVariants;
+    const effectiveBodyVariants = prefersReducedMotion
+        ? reducedVariants
+        : transition === 'directional'
+            ? directionalBodyVariants
+            : bodyVariants;
+    const effectiveFooterVariants = prefersReducedMotion
+        ? reducedVariants
+        : footerVariants;
     if (!current)
         return null;
-    return (_jsxs(Stack, { shadow: "md", h: height, bg: "white", overflow: "hidden", spacing: "0", children: [_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: headerVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", flexShrink: 0, children: current.header }, `h-${motionKey}`) }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: bodyVariants, initial: "initial", animate: "animate", exit: "exit", flex: "1", display: "flex", minH: "0", children: _jsx(Flex, { direction: "column", flex: "auto", overflowY: "auto", minH: "0", children: _jsx(Flex, { justify: "center", h: "full", w: "full", children: _jsx(Box, { w: bodyWidth, children: current.body({ setStep, setStepKey }) }) }) }) }, `b-${motionKey}`) }), current.footer && (_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: footerVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", flexShrink: 0, bg: "white", borderTopWidth: "1px", borderColor: "lightBlue.3", children: _jsx(Flex, { justify: "center", py: { base: '4', md: '5' }, children: _jsx(Box, { w: bodyWidth, children: current.footer }) }) }, `f-${motionKey}`) }))] }));
+    return (_jsxs(Stack, { shadow: "md", h: height, bg: "white", borderRadius: "10px", overflow: "hidden", spacing: "0", sx: { perspective: '1100px' }, children: [_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: effectiveHeaderVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", flexShrink: 0, children: current.header }, `h-${motionKey}`) }), _jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: effectiveBodyVariants, initial: "initial", animate: "animate", exit: "exit", flex: "1", display: "flex", minH: "0", children: _jsx(Flex, { direction: "column", flex: "auto", overflowY: "auto", 
+                        // overflowY:auto alone coerces overflow-x to auto too (CSS: one axis
+                        // can't stay visible when the other scrolls), so a full-bleed step
+                        // (e.g. the success header's negative mx) produced a horizontal
+                        // scrollbar. Clip X explicitly — no step should scroll sideways.
+                        overflowX: "hidden", minH: "0", px: "1", pb: "2", children: _jsx(Flex, { justify: "center", h: "full", w: "full", children: _jsx(Box, { w: bodyWidth, children: current.body({ setStep, setStepKey }) }) }) }) }, `b-${motionKey}`) }), current.footer && (_jsx(AnimatePresence, { mode: "wait", children: _jsx(Box, { as: MotionBox, variants: effectiveFooterVariants, initial: "initial", animate: "animate", exit: "exit", w: "full", flexShrink: 0, bg: "white", borderTopWidth: "1px", borderColor: "lightBlue.3", children: _jsx(Flex, { justify: "center", py: { base: '4', md: '5' }, children: _jsx(Box, { w: bodyWidth, children: current.footer }) }) }, `f-${motionKey}`) }))] }));
 }
 export const WizardBodyPadding = ({ children }) => {
-    return _jsx(Box, { py: { base: '4', md: '8' }, children: children });
+    return (_jsx(Box, { pt: { base: '4', md: '8' }, pb: { base: '64px', md: '104px' }, children: children }));
 };

package/dist/components/wizard/WizardInitialOptions.js

@@ -6,16 +6,16 @@ import { fieldIcons, setOptionButtonStyles } from '../../helpers';
 export const WizardInitialOptions = ({ form, title, callback, style = 'wizard', }) => {
     const { control } = useFormContext();
     const isWizard = style === 'wizard';
-    return (_jsxs(Stack, { spacing: "base", bg: "lightBlue.1", p: "base", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title }), _jsx(SimpleGrid, { columns: { base: 1, md: isWizard ? 2 : 1 }, spacing: { base: 1, md: isWizard ? 'base' : 1 }, children: form.map((field) => {
+    return (_jsxs(Stack, { spacing: "base", children: [title && (_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title })), _jsx(SimpleGrid, { columns: { base: 1, md: isWizard ? 2 : 1 }, spacing: { base: 1, md: isWizard ? 'base' : 1 }, children: form.map((field) => {
                     const { id, value, label, icon, description } = field;
                     return (_jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
                             const iconSrc = icon
                                 ? fieldIcons[icon]
                                 : undefined;
-                            return (_jsxs(Container, { position: "relative", children: [value && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-4px", left: "-2px", boxShadow: "lg", borderRadius: "full" })), _jsxs(Stack, Object.assign({ as: "button", p: "base", w: "full", onClick: () => {
+                            return (_jsxs(Container, { position: "relative", boxShadow: "none", children: [value && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-6px", left: "-6px", boxShadow: "lg", borderRadius: "full", zIndex: 1 })), _jsxs(Stack, Object.assign({ as: "button", p: "base", w: "full", border: "1px solid", borderColor: value ? 'green.1' : 'transparent', borderRadius: "8px", boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)", onClick: () => {
                                             onChange(!value);
                                             callback === null || callback === void 0 ? void 0 : callback(Object.assign(Object.assign({}, field), { value: !value }));
-                                        } }, setOptionButtonStyles(value), { children: [_jsxs(Flex, { gap: "2", w: "full", align: "center", children: [_jsx(Image, { src: iconSrc, alt: "icon", h: "16px", w: "auto" }), label && (_jsx(Text, { fontWeight: "bold", fontSize: "sm", textTransform: "capitalize", fontFamily: "secondary", children: label }))] }), _jsx(Text, { fontFamily: "secondary", textAlign: "left", children: description })] }))] }));
+                                        } }, setOptionButtonStyles(value), { children: [_jsxs(Flex, { gap: "2", w: "full", align: "center", children: [_jsx(Image, { src: iconSrc, alt: "icon", h: "16px", w: "auto" }), label && (_jsx(Text, { fontWeight: "600", fontSize: "sm", textTransform: "capitalize", fontFamily: "primary", children: label }))] }), _jsx(Text, { fontFamily: "secondary", textAlign: "left", children: description })] }))] }));
                         } }, id));
                 }) })] }));
 };

package/dist/components/wizard/WizardSelectCard.d.ts

@@ -0,0 +1,14 @@
+import { DynamicFormI } from '../../interfaces';
+/**
+ * WizardSelectCard — the learn-the-basics wizard's selectable icon tile.
+ *
+ * Deliberately its OWN component, separate from the legacy `WizardStepOptions`
+ * (which the deprecated HomeAssistant setup wizard still renders). Design:
+ *  - fixed 80x80 square tiles that auto-fit across the row
+ *  - a green outline + a corner check (top-left, poking out) when selected
+ *  - a soft shadow, no gray container
+ *
+ * Same field-shape/RHF contract as the other option fields so the shared
+ * DynamicForm engine can route to it, but the legacy card is left as-is.
+ */
+export declare const WizardSelectCard: ({ form, title, callback }: DynamicFormI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/WizardSelectCard.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Center, Flex, Image, Stack, Text } from '@chakra-ui/react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { CheckInCircle } from '../../assets/images';
+import { fieldIcons, setOptionButtonStyles } from '../../helpers';
+/**
+ * WizardSelectCard — the learn-the-basics wizard's selectable icon tile.
+ *
+ * Deliberately its OWN component, separate from the legacy `WizardStepOptions`
+ * (which the deprecated HomeAssistant setup wizard still renders). Design:
+ *  - fixed 80x80 square tiles that auto-fit across the row
+ *  - a green outline + a corner check (top-left, poking out) when selected
+ *  - a soft shadow, no gray container
+ *
+ * Same field-shape/RHF contract as the other option fields so the shared
+ * DynamicForm engine can route to it, but the legacy card is left as-is.
+ */
+export const WizardSelectCard = ({ form, title, callback }) => {
+    const { control } = useFormContext();
+    return (_jsxs(Stack, { spacing: "base", children: [title && (_jsx(Text, { fontFamily: "secondary", fontSize: "sm", children: title })), _jsx(Flex, { flexWrap: "wrap", gap: "base", children: form.map((field) => {
+                    const { id, value, label, icon } = field;
+                    return (_jsx(Controller, { control: control, name: id, defaultValue: value, render: ({ field: { value, onChange } }) => {
+                            const iconSrc = icon
+                                ? fieldIcons[icon]
+                                : undefined;
+                            return (_jsxs(Box, { position: "relative", boxSize: "80px", children: [value && (_jsx(Image, { src: CheckInCircle, alt: "check", w: "22px", h: "auto", position: "absolute", top: "-6px", left: "-6px", boxShadow: "lg", borderRadius: "full", zIndex: 1 })), _jsxs(Stack, Object.assign({ as: "button", py: "1", spacing: "1", w: "full", h: "full", justify: "center", border: "1px solid", borderColor: value ? 'green.1' : 'transparent', borderRadius: "8px", boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)", onClick: () => {
+                                            onChange(!value);
+                                            callback === null || callback === void 0 ? void 0 : callback(Object.assign(Object.assign({}, field), { value: !value }));
+                                        } }, setOptionButtonStyles(value), { children: [_jsx(Center, { h: "38px", flexShrink: 0, w: "100%", alignItems: "flex-end", children: _jsx(Image, { src: iconSrc, alt: "icon", boxSize: "36px", objectFit: "contain" }) }), _jsx(Flex, { h: "26px", flexShrink: 0, px: "1", pt: "2px", w: "100%", justify: "center", align: "center", children: _jsx(Text, { fontFamily: "primary", fontSize: "11px", fontWeight: "500", color: "gray.3", textTransform: "uppercase", textAlign: "center", lineHeight: "1", noOfLines: 2, children: label }) })] }))] }));
+                        } }, id));
+                }) })] }));
+};

package/dist/components/wizard/WizardStepPrompt.d.ts

@@ -0,0 +1,11 @@
+import { WizardStepPromptI } from '../../interfaces';
+/**
+ * WizardStepPrompt — the conversational (Typeform) step header for the setup
+ * wizard: a step marker, Homi's bold prompt, and an optional supporting line.
+ * Left-aligned, white. Structure is fixed; the copy is Homi-authored (passed
+ * in as props), never hardcoded.
+ *
+ * Baked-in type treatment (from the approved POC): 30px semibold Poppins
+ * headline, 16px Assistant subtitle in body-copy grey with tight line-height.
+ */
+export declare const WizardStepPrompt: ({ marker, title, subtitle, }: WizardStepPromptI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/WizardStepPrompt.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack, Text } from '@chakra-ui/react';
+/**
+ * WizardStepPrompt — the conversational (Typeform) step header for the setup
+ * wizard: a step marker, Homi's bold prompt, and an optional supporting line.
+ * Left-aligned, white. Structure is fixed; the copy is Homi-authored (passed
+ * in as props), never hardcoded.
+ *
+ * Baked-in type treatment (from the approved POC): 30px semibold Poppins
+ * headline, 16px Assistant subtitle in body-copy grey with tight line-height.
+ */
+export const WizardStepPrompt = ({ marker, title, subtitle, }) => (_jsxs(Stack, { spacing: "3", pt: "8", children: [marker != null && (_jsx(Text, { fontFamily: "primary", fontWeight: "semibold", fontSize: "sm", color: "blue.2", children: marker })), _jsx(Text, { fontFamily: "primary", fontWeight: "semibold", fontSize: "28px", lineHeight: "1.15", color: "gray.4", 
+            // text-wrap: balance evens out line lengths on the (mind-authored,
+            // variable-length) headline — no hand-tuning needed. Graceful no-op
+            // on older browsers.
+            sx: { textWrap: 'balance' }, children: title }), subtitle && (_jsx(Text, { fontFamily: "secondary", fontSize: "16px", lineHeight: "1.3", color: "gray.3", 
+            // text-wrap: pretty prevents widows/orphans on the supporting line.
+            // Required for dynamic copy: the mind authors this, so CSS (not
+            // sentence-tuning) has to keep every generated variant clean.
+            sx: { textWrap: 'pretty' }, children: subtitle }))] }));

package/dist/components/wizard/WizardSuccessHeader.d.ts

@@ -1,2 +1,2 @@
 import { WizardSuccessHeaderI } from '../../interfaces';
-export declare const WizardSuccessHeader: ({ title, subtitle, address, name, image, }: WizardSuccessHeaderI) => import("react/jsx-runtime").JSX.Element;
+export declare const WizardSuccessHeader: ({ bg, title, subtitle, address, name, image, }: WizardSuccessHeaderI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/wizard/WizardSuccessHeader.js

@@ -4,8 +4,8 @@ import { Center, Show, Stack, Text, Box, Flex, Container, Image, } from '@chakra
 import { ContainerHeader, Logo } from '../../components';
 import { randomImages } from '../../utils';
 import { useMyHomeCard } from '../../hooks';
-export const WizardSuccessHeader = ({ title, subtitle, address, name, image, }) => {
-    return (_jsx(Center, { w: "full", bg: "lightGreen.1", minH: "212px", children: _jsxs(Stack, { w: "full", spacing: "0", align: "center", children: [_jsx(Show, { below: "md", children: _jsx(Logo, {}) }), _jsxs(Flex, { gap: "8", w: "80%", align: "center", pt: { base: '0', md: '8' }, direction: { base: 'column', md: 'row' }, children: [_jsx(Box, { maxW: "205px", children: _jsx(WizardHomeCard, { address: address, name: name, image: image }) }), _jsxs(Stack, { spacing: "2", children: [_jsxs(Text, { fontSize: "xl", fontWeight: "semibold", color: "green.1", children: [t('ariaLabels.success'), "!"] }), _jsx(Text, { fontSize: { base: '2xl', md: '3xl' }, lineHeight: "shorter", children: title }), subtitle && _jsx(Text, { fontFamily: "secondary", children: subtitle }), _jsx(Show, { below: "md", children: _jsx(Box, { h: "6" }) })] })] })] }) }));
+export const WizardSuccessHeader = ({ bg = 'lightGreen.1', title, subtitle, address, name, image, }) => {
+    return (_jsx(Center, { w: "full", bg: bg, minH: "212px", children: _jsxs(Stack, { w: "full", spacing: "0", align: "center", children: [_jsx(Show, { below: "md", children: _jsx(Logo, {}) }), _jsxs(Flex, { gap: "8", w: "80%", align: "center", pt: { base: '0', md: '8' }, direction: { base: 'column', md: 'row' }, children: [_jsx(Box, { maxW: "205px", children: _jsx(WizardHomeCard, { address: address, name: name, image: image }) }), _jsxs(Stack, { spacing: "2", children: [_jsxs(Text, { fontSize: "xl", fontWeight: "semibold", color: "green.1", children: [t('ariaLabels.success'), "!"] }), _jsx(Text, { fontSize: { base: '2xl', md: '3xl' }, lineHeight: "shorter", children: title }), subtitle && _jsx(Text, { fontFamily: "secondary", children: subtitle }), _jsx(Show, { below: "md", children: _jsx(Box, { h: "6" }) })] })] })] }) }));
 };
 const WizardHomeCard = ({ address, name, image, }) => {
     const { imageUrl } = useMyHomeCard({

package/dist/components/wizard/index.d.ts

@@ -1,7 +1,9 @@
 export * from './ControlledWizard';
 export * from './WizardInitialOptions';
 export * from './WizardStepOptions';
+export * from './WizardSelectCard';
 export * from './WizardStepGoal';
+export * from './WizardStepPrompt';
 export * from './WizardSteps';
 export * from './WizardSuccessHeader';
 export * from './WizardTextHeader';

package/dist/components/wizard/index.js

@@ -1,7 +1,9 @@
 export * from './ControlledWizard';
 export * from './WizardInitialOptions';
 export * from './WizardStepOptions';
+export * from './WizardSelectCard';
 export * from './WizardStepGoal';
+export * from './WizardStepPrompt';
 export * from './WizardSteps';
 export * from './WizardSuccessHeader';
 export * from './WizardTextHeader';

package/dist/helpers/forms/dynamicForm.helper.js

@@ -1,4 +1,7 @@
 import { Paint, Receipt, Barcode, GoldenBars, Heart, Rating, Notes, Book, ImgIcon, Registry, ShareWith, Calendar, Contacts, Tools2, Billing, Calc, CheckPen, GenericField, Price, Battery2, Co2, Detector, Electricity, Sprinkler, SixtyEight, DropCalendar, MobileDrop, SolarPanel, Calendar2, Drop, Wind, Foundation, Heater, Light, Plate, Pool, Closet, Structure, GlassWater, Roof2, Target, CircleFace, Pressure, WindowCleaning, RoofCleaning, HolidayLights, GutterCleaning, HomeCleaning, HouseWashing, PressureWasher, BookOpened, Company2, AADisease, AADressing, AALawn, AAMowing, AAWeed, AApest, FilterSize, Wallet, Fire, Plant, LifePreserver, BOCFilter, BOCGreen, BOCRenovation, BOCRepair, BOCService, BOCWarranty, MRBoxes, MRClock, MRCouch, MRHand, MRMakeReady, MRRental, Cleaning, GearTime, YellowFolder, Warranty, Flower, Jacuzzi, MagnifyingGlassPerson, TPlumberDrain, TPlumberEmergency, TPlumberExcavation, TPlumberGeneral, TPlumberWater, PNMSlab, PNMTreatment, PNMWaterHeater, HMCeilingFan, HMDrill, HMFaucet, HMHanging, HMSecurity, HMTV, IlHome, IlHvac, IlPower, IlSolar, IlTools } from '../../assets/images';
+// Relative (not the @/ alias): tsc-alias does not rewrite direct static-asset
+// imports, so an @/ alias here survives into dist unresolved and breaks Vite.
+import PdfIcon from '../../assets/images/pdf-icon.svg';
 import { CookTop, Dishwasher, Dryer, Freezer, Fridge, Hood, Microwave, Oven, Range, Washer, tankWater, tanklessWater, } from '../../assets/images/appliances';
 import { BatterySmokeDetector, Co2Detector, FireExtinguisher, Furnace, HeatPump, InWall, LandscapeLights, Other, SprinklerSystem, SprinklerSystem2, WiredSmokeDetector, } from '../../assets/images/home-assistant';
 export const fieldIcons = {
@@ -67,6 +70,7 @@ export const fieldIcons = {
     'tank-water': tankWater,
     'tankless-water': tanklessWater,
     'wired-smoke-detector': WiredSmokeDetector,
+    pdf: PdfIcon,
     barcode: Barcode,
     battery: Battery2,
     billing: Billing,

package/dist/hooks/folderPanel/useDisplayFiles.js

@@ -1,14 +1,23 @@
 import { useState, useEffect } from 'react';
+// Extensions we can render directly as an <img> thumbnail. A file is treated as
+// an image by its extension rather than by bucket name: image uploads land in
+// `homefile-images` in production but in `homefile-test` in non-prod, so gating
+// on a single bucket name silently hid thumbnails outside production. Every
+// storage bucket is public-read and the object key is `<fileName>.<extension>`,
+// so the public URL is derivable from the file's own stored bucketName.
+const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'webp', 'gif'];
 export const useDisplayFiles = ({ files, title }) => {
     const [fileExtension, updateFileExtension] = useState("");
     const [imageUrl, updateImageUrl] = useState("");
     useEffect(() => {
+        var _a;
         if (files && files.length > 0) {
             const firstFile = files[0];
             updateFileExtension(firstFile.extension);
-            if (firstFile.bucketName === "homefile-images") {
+            const ext = `${(_a = firstFile.extension) !== null && _a !== void 0 ? _a : ""}`.toLowerCase();
+            if (firstFile.bucketName && firstFile.fileName && IMAGE_EXTENSIONS.includes(ext)) {
                 const storageUrl = import.meta.env.VITE_STORAGE_URL;
-                updateImageUrl(`${storageUrl}/${firstFile === null || firstFile === void 0 ? void 0 : firstFile.bucketName}/${firstFile === null || firstFile === void 0 ? void 0 : firstFile.fileName}.${firstFile === null || firstFile === void 0 ? void 0 : firstFile.extension}`);
+                updateImageUrl(`${storageUrl}/${firstFile.bucketName}/${firstFile.fileName}.${firstFile.extension}`);
             }
             else {
                 updateImageUrl("");

package/dist/hooks/forms/useAddressStored.js

@@ -76,8 +76,14 @@ export const useAddressStored = ({ proxy = addressProxy, setIsDirty, }) => {
     };
     const handleCityAndState = () => __awaiter(void 0, void 0, void 0, function* () {
         const { city, state } = yield getAddress(fields.zip);
-        fields.city = city;
-        fields.state = state;
+        // Only fill from the zip lookup when it actually returns values. A failed or
+        // empty lookup must NOT wipe city/state we already have — e.g. values seeded
+        // from a saved home when opening the Edit Home panel (the lookup for an
+        // existing zip can come back empty and was blanking the fields).
+        if (city)
+            fields.city = city;
+        if (state)
+            fields.state = state;
     });
     const handleCleanProxy = () => proxy.setFields({
         apartmentNumber: '',

package/dist/hooks/index.d.ts

@@ -32,5 +32,7 @@ export * from './useComponentStyles';
 export * from './useCustomToast';
 export * from './useFileUploader';
 export * from './useImage';
+export * from './useDirtySave';
 export * from './useWindowDimensions';
 export * from './valueMonitor';
+export * from './motion';

package/dist/hooks/index.js

@@ -32,5 +32,7 @@ export * from './useComponentStyles';
 export * from './useCustomToast';
 export * from './useFileUploader';
 export * from './useImage';
+export * from './useDirtySave';
 export * from './useWindowDimensions';
 export * from './valueMonitor';
+export * from './motion';

package/dist/hooks/motion/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePrefersReducedMotion';
+export * from './useCountUp';

package/dist/hooks/motion/index.js

@@ -0,0 +1,2 @@
+export * from './usePrefersReducedMotion';
+export * from './useCountUp';

package/dist/hooks/motion/useCountUp.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Counts a number up to `target` over `duration` ms — a direct port of the
+ * POC's implementation: `duration = 1100ms`, ease-out-cubic, a
+ * `requestAnimationFrame` loop, and `toLocaleString()` formatting. Respects
+ * reduced motion (jumps straight to the target, no animation). Returns the
+ * formatted display string.
+ *
+ * Narrow utility — NOT a general animation engine (Eli's over-engineering flag).
+ */
+export declare const useCountUp: (target: number, duration?: number, easing?: (p: number) => number) => string;

package/dist/hooks/motion/useCountUp.js

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from 'react';
+import { usePrefersReducedMotion } from './usePrefersReducedMotion';
+// ease-out-cubic (POC): 1 - (1 - p)^3
+const easeOutCubic = (p) => 1 - Math.pow(1 - p, 3);
+/**
+ * Counts a number up to `target` over `duration` ms — a direct port of the
+ * POC's implementation: `duration = 1100ms`, ease-out-cubic, a
+ * `requestAnimationFrame` loop, and `toLocaleString()` formatting. Respects
+ * reduced motion (jumps straight to the target, no animation). Returns the
+ * formatted display string.
+ *
+ * Narrow utility — NOT a general animation engine (Eli's over-engineering flag).
+ */
+export const useCountUp = (target, duration = 1100, easing = easeOutCubic) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const [value, setValue] = useState(prefersReducedMotion ? target : 0);
+    const rafRef = useRef(undefined);
+    useEffect(() => {
+        if (prefersReducedMotion) {
+            setValue(target);
+            return;
+        }
+        let start = null;
+        const step = (timestamp) => {
+            if (start === null)
+                start = timestamp;
+            const progress = Math.min((timestamp - start) / duration, 1);
+            setValue(Math.round(target * easing(progress)));
+            if (progress < 1)
+                rafRef.current = requestAnimationFrame(step);
+        };
+        rafRef.current = requestAnimationFrame(step);
+        return () => {
+            if (rafRef.current)
+                cancelAnimationFrame(rafRef.current);
+        };
+    }, [target, duration, easing, prefersReducedMotion]);
+    return value.toLocaleString();
+};

package/dist/hooks/motion/usePrefersReducedMotion.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The single house hook for JS / framer-motion reduced-motion gating.
+ *
+ * A thin wrapper over framer-motion's built-in `useReducedMotion()` (already a
+ * dependency, SSR-safe, purpose-built). framer-motion returns `boolean | null`
+ * (`null` before it can read the media query); we coerce to a definite boolean,
+ * defaulting to motion-allowed (`false`).
+ *
+ * NOTE: the 3 existing CSS `@media (prefers-reduced-motion: reduce)` blocks
+ * (Stars / Birds / HomeMonitorButton) are a DIFFERENT mechanism (they gate CSS
+ * animations declaratively) and stay as-is — this hook is only for JS-driven
+ * (framer-motion) motion. One hook; no fourth reduced-motion implementation.
+ */
+export declare const usePrefersReducedMotion: () => boolean;

package/dist/hooks/motion/usePrefersReducedMotion.js

@@ -0,0 +1,15 @@
+import { useReducedMotion } from 'framer-motion';
+/**
+ * The single house hook for JS / framer-motion reduced-motion gating.
+ *
+ * A thin wrapper over framer-motion's built-in `useReducedMotion()` (already a
+ * dependency, SSR-safe, purpose-built). framer-motion returns `boolean | null`
+ * (`null` before it can read the media query); we coerce to a definite boolean,
+ * defaulting to motion-allowed (`false`).
+ *
+ * NOTE: the 3 existing CSS `@media (prefers-reduced-motion: reduce)` blocks
+ * (Stars / Birds / HomeMonitorButton) are a DIFFERENT mechanism (they gate CSS
+ * animations declaratively) and stay as-is — this hook is only for JS-driven
+ * (framer-motion) motion. One hook; no fourth reduced-motion implementation.
+ */
+export const usePrefersReducedMotion = () => { var _a; return (_a = useReducedMotion()) !== null && _a !== void 0 ? _a : false; };

package/dist/hooks/rooms/useRoomHeader.d.ts

@@ -4,9 +4,12 @@ interface UseRoomHeaderI {
     onSubmit: (room: RoomItemI) => void;
     room: RoomItemI;
     roomAmount: string;
+    roomEstimatedAmount?: string;
 }
-export declare const useRoomHeader: ({ onSubmit, room: { _id, name, type, active, home }, roomAmount, }: UseRoomHeaderI) => {
+export declare const useRoomHeader: ({ onSubmit, room: { _id, name, type, active, home }, roomAmount, roomEstimatedAmount, }: UseRoomHeaderI) => {
     formattedAmount: string;
+    formattedEstimatedAmount: string;
+    hasEstimate: boolean;
     handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
     handleClick: () => void;
     inputValue: string | null;

package/dist/hooks/rooms/useRoomHeader.js

@@ -1,9 +1,15 @@
 import { useState, useEffect } from 'react';
 import { formatCurrency } from '../../utils';
-export const useRoomHeader = ({ onSubmit, room: { _id, name, type, active, home }, roomAmount, }) => {
+export const useRoomHeader = ({ onSubmit, room: { _id, name, type, active, home }, roomAmount, roomEstimatedAmount, }) => {
     const [isEditing, setIsEditing] = useState(false);
     const [inputValue, setInputValue] = useState(null);
     const formattedAmount = formatCurrency({ value: roomAmount });
+    // Estimated value renders only when there is a real (non-zero) estimate —
+    // honest-empty until the enrichment side emits the est-value-field tag.
+    const hasEstimate = Number(roomEstimatedAmount) > 0;
+    const formattedEstimatedAmount = formatCurrency({
+        value: roomEstimatedAmount !== null && roomEstimatedAmount !== void 0 ? roomEstimatedAmount : 0,
+    });
     useEffect(() => {
         setInputValue(name);
     }, [name]);
@@ -19,6 +25,8 @@ export const useRoomHeader = ({ onSubmit, room: { _id, name, type, active, home
     };
     return {
         formattedAmount,
+        formattedEstimatedAmount,
+        hasEstimate,
         handleChange,
         handleClick,
         inputValue,