@homefile/components-v2 2.59.1 → 2.60.0

package/dist/components/homeItems/ViewingHomeItemBody.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Stack } from '@chakra-ui/react';
+import { AddDocuments, ReadOnlyDynamicForm, ReadOnlyHistory, ReadOnlyOverview, TabsHeader, } from '../../components';
+// History dates are display strings like "01 23 2017" → millis for sorting.
+const toTime = (s) => {
+    if (!s)
+        return 0;
+    const [m, d, y] = s.trim().split(/\s+/).map(Number);
+    return new Date(y || 0, (m || 1) - 1, d || 1).getTime();
+};
+// The tabbed body of the read-only item view — Details / Specs / History off
+// ONE report[] (each field's `tab` says where it renders; absent = 'details').
+// Rendered without any drawer chrome so it can be hosted either by
+// ViewingHomeItemPanel (its own Drawer) or dropped into the app's existing
+// read-only slot in the RoomItem panel. The pencil (onEdit) flows through to
+// the Details tab's item card, which toggles to the existing edit form.
+export const ViewingHomeItemBody = ({ form, onClick, onEdit, }) => {
+    const byTab = (tab) => { var _a; return (_a = form === null || form === void 0 ? void 0 : form.filter((field) => { var _a; return ((_a = field.tab) !== null && _a !== void 0 ? _a : 'details') === tab; })) !== null && _a !== void 0 ? _a : []; };
+    const renderTab = (tab) => (_jsx(ReadOnlyDynamicForm, { form: byTab(tab), onClick: onClick, onEdit: onEdit }));
+    // Specs / History are hidden-until-data: a tab appears only when the item
+    // actually has fields for it. A real item today has only Details (backend
+    // report[] is flat); the richer tabs light up as their feeders land. We
+    // never show a visibly empty tab (honesty — no fabricated blocks).
+    const specsFields = byTab('specs');
+    // History: an Add-documents zone on top, then the events newest-first on a
+    // timeline. The rail is a darker left band (#E9EDEF) over the lighter content
+    // (lightBlue.1); the node circles sit on the band's right edge. Rendered
+    // directly (not via ReadOnlyDynamicForm, whose opaque bg would hide the band).
+    const historyEvents = [...byTab('history')].sort((a, b) => toTime(b.label) - toTime(a.label));
+    const history = (_jsxs(Flex, { direction: "column", bg: "lightBlue.1", minH: "100%", children: [_jsx(AddDocuments, {}), _jsxs(Box, { position: "relative", flex: "1", children: [_jsx(Box, { position: "absolute", left: "0", top: "0", bottom: "0", w: "131px", bg: "#E9EDEF" }), _jsx(Box, { position: "relative", children: historyEvents.map((event) => (_jsx(ReadOnlyHistory, Object.assign({}, event), event.id))) })] })] }));
+    // Specs: collapsible section cards inset 13px, 13px apart (XD).
+    const specs = (_jsx(Stack, { px: "base", pt: "base", pb: "base", spacing: "base", align: "stretch", children: specsFields.map((section) => (_jsx(ReadOnlyOverview, Object.assign({}, section), section.id))) }));
+    // Details is always present (the item card); History / Specs join only when
+    // they carry real data. History sits next to Details (people check it often);
+    // Specs is the occasional reference, so it moves to the right.
+    const tabs = [{ label: 'Details', component: renderTab('details') }];
+    if (historyEvents.length > 0)
+        tabs.push({ label: 'History', component: history });
+    const rightTabs = specsFields.length > 0 ? [{ label: 'Specs', component: specs }] : [];
+    return _jsx(TabsHeader, { tabList: tabs, rightTabList: rightTabs });
+};

package/dist/components/homeItems/ViewingHomeItemPanel.js

@@ -1,24 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Box, Divider, DrawerContent, DrawerHeader } from '@chakra-ui/react';
-import { PanelHeader, ReadOnlyDynamicForm, TabsHeader } from '../../components';
+import { Divider, DrawerBody, DrawerContent, DrawerHeader } from '@chakra-ui/react';
+import { PanelHeader, ViewingHomeItemBody } from '../../components';
 import { Painting } from '../../assets/images';
+import { fieldIcons } from '../../helpers';
+// Read-only item view as a standalone Drawer: the panel SHELL (own width,
+// programmatic header, close button) wrapping the tabbed body. The same body
+// is also dropped into the app's existing read-only slot (RoomItem panel),
+// where that panel supplies the chrome instead — so the tabbed content lives
+// in ViewingHomeItemBody and this file is only the Drawer wrapper.
 export const ViewingHomeItemPanel = ({ form, onClick, onClose, onEdit, }) => {
-    const tabs = [
-        {
-            label: t('contacts.details'),
-            component: _jsx("div", {}),
-        },
-        {
-            label: t('contacts.permissions'),
-            component: _jsx("div", {}),
-        },
-    ];
-    const rightTabs = [
-        {
-            label: 'History',
-            component: _jsx("div", {}),
-        },
-    ];
-    return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: onClose, title: t('homeItems.title'), icon: Painting }), _jsx(Divider, {}), _jsx(Box, { pt: "1", bg: "neutral.white", children: _jsx(TabsHeader, { tabList: tabs, rightTabList: rightTabs }) })] }), _jsx(ReadOnlyDynamicForm, { form: form, onClick: onClick, onEdit: onEdit })] }));
+    // Header reflects the item being viewed: its name + appliance icon (e.g.
+    // "Viewing Refrigerator" with the fridge icon), from the primary item field.
+    const primaryItem = form === null || form === void 0 ? void 0 : form.find((field) => field.type === 'appliances' || field.name === 'Appliances');
+    const itemName = (primaryItem === null || primaryItem === void 0 ? void 0 : primaryItem.value) ? String(primaryItem.value) : 'Home Item';
+    const itemIcon = (primaryItem === null || primaryItem === void 0 ? void 0 : primaryItem.icon) ? fieldIcons[primaryItem.icon] : Painting;
+    return (
+    // Panel owns its width: full on mobile, 600px on desktop (XD design is
+    // 500px; widened for breathing room). Overrides the Drawer `size`.
+    _jsxs(DrawerContent, { bg: "lightBlue.1", w: { base: '100%', md: '600px' }, maxW: { base: '100%', md: '600px' }, children: [_jsxs(DrawerHeader, { p: "0", children: [_jsx(PanelHeader, { handleCloseButton: onClose, title: `${t('homeItems.viewing', 'Viewing')} ${itemName}`, icon: itemIcon }), _jsx(Divider, {})] }), _jsx(DrawerBody, { p: "0", children: _jsx(ViewingHomeItemBody, { form: form, onClick: onClick, onEdit: onEdit }) })] }));
 };

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

@@ -2,4 +2,5 @@ export * from './HomeItemList';
 export * from './HomeItemListHeader';
 export * from './HomeItemManualInfo';
 export * from './ProductRadioCardContent';
+export * from './ViewingHomeItemBody';
 export * from './ViewingHomeItemPanel';

package/dist/components/homeItems/index.js

@@ -2,4 +2,5 @@ export * from './HomeItemList';
 export * from './HomeItemListHeader';
 export * from './HomeItemManualInfo';
 export * from './ProductRadioCardContent';
+export * from './ViewingHomeItemBody';
 export * from './ViewingHomeItemPanel';

package/dist/components/homi/HomiPresence.d.ts

@@ -0,0 +1,2 @@
+import { HomiPresenceI } from '../../interfaces';
+export declare const HomiPresence: ({ state, label, }: HomiPresenceI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homi/HomiPresence.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Flex, Text, chakra } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import { usePrefersReducedMotion } from '../../hooks';
+// Chakra-styled motion element (the idiomatic Chakra + framer-motion pattern):
+// takes Chakra style props AND framer-motion's animate/transition.
+const MotionBox = chakra(motion.div);
+// Reusable "Homi is here" presence chip (presentation-only — no authority or
+// meaning; per Kai it is NOT onboarding-scoped). POC `.homichip`: a 15×15
+// brand-blue dot with a white inset ring + a 6×6 green status corner dot, and
+// the label beside it. The green dot "breathes" — a subtle opacity-only idle
+// pulse (~2.6s), reduced-motion gated via the house hook; ONLY the green dot
+// pulses ("a breath, not a blink").
+//
+// NOTE: `state` (guiding|working) is a v1 semantic prop; the chip + pulse render
+// the same for both today (Eli's spec details no per-state visual). Any
+// per-state visual differentiation is a POC/Kai/Gabi verification item — flagged,
+// not fabricated. Exact green token is likewise a Gabi fidelity check.
+export const HomiPresence = ({ state = 'guiding', label = 'Homi', }) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    return (_jsxs(Flex, { align: "center", gap: "2", "data-homi-state": state, children: [_jsxs(Box, { position: "relative", w: "15px", h: "15px", flexShrink: 0, children: [_jsx(Box, { w: "15px", h: "15px", borderRadius: "full", bg: "blue.2", boxShadow: "inset 0 0 0 2px #fff" }), _jsx(MotionBox, Object.assign({ position: "absolute", bottom: "-1px", right: "-1px", w: "6px", h: "6px", borderRadius: "full", bg: "#34C759", boxShadow: "0 0 0 1.5px #fff" }, (prefersReducedMotion
+                        ? {}
+                        : {
+                            animate: { opacity: [1, 0.4, 1] },
+                            transition: {
+                                duration: 2.6,
+                                repeat: Infinity,
+                                ease: 'easeInOut',
+                            },
+                        })))] }), _jsx(Text, { fontSize: "sm", fontFamily: "secondary", color: "gray.3", children: label })] }));
+};

package/dist/components/homi/HomiVoice.d.ts

@@ -0,0 +1,2 @@
+import { TextProps } from '@chakra-ui/react';
+export declare const HomiVoice: (props: TextProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homi/HomiVoice.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@chakra-ui/react';
+// Deliberately trivial marker: wraps text Homi "speaks" with a data attribute.
+// Presentation/marker ONLY — no logic (a future live-indicator seam, NOT the
+// seam itself). Resist scope growth (Eli).
+export const HomiVoice = (props) => (_jsx(Text, Object.assign({ as: "span", "data-homi-voice": true }, props)));

package/dist/components/homi/ProgressBar.d.ts

@@ -0,0 +1,2 @@
+import { ProgressBarI } from '../../interfaces';
+export declare const ProgressBar: ({ value, color, trackColor, }: ProgressBarI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homi/ProgressBar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@chakra-ui/react';
+// Thin (4px) progress track + fill; the fill width eases (0.55s, POC easing).
+// A plain full-width bar — the consumer positions it (e.g. the wizard shell
+// pins it to the bottom). Direct port of the POC progress atom.
+export const ProgressBar = ({ value, color = 'blue.2', trackColor = 'lightBlue.3', }) => {
+    const pct = Math.min(Math.max(value, 0), 1) * 100;
+    return (_jsx(Box, { w: "full", h: "4px", bg: trackColor, overflow: "hidden", children: _jsx(Box, { h: "full", bg: color, w: `${pct}%`, transition: "width 0.55s cubic-bezier(0.5, 0, 0.15, 1)" }) }));
+};

package/dist/components/homi/RevealValueCard.d.ts

@@ -0,0 +1,2 @@
+import { RevealValueCardI } from '../../interfaces';
+export declare const RevealValueCard: ({ value, valuePrefix, facts, subvals, thumbs, }: RevealValueCardI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homi/RevealValueCard.js

@@ -0,0 +1,23 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Box, Flex, Grid, Image, Text, chakra } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import { useCountUp, usePrefersReducedMotion } from '../../hooks';
+const MotionBox = chakra(motion.div);
+// The reveal payoff — "here's what I already know about your home." Composes raw
+// Box/Text tokens per Eli's spec: green card, a pop-in on reveal
+// (scale .92→1.02→1, 0.55s @0.3s delay), a 34px Poppins-700 tabular-nums hero
+// value that counts up (useCountUp), a 2-col facts grid, an optional subvals
+// row, and 30×30 thumbnails. A-PATH ONLY — never rendered on the not-on-list
+// (B) path (nothing was found; showing a value there would fabricate).
+// NOTE exact green + border tokens are a Gabi POC-fidelity check.
+export const RevealValueCard = ({ value, valuePrefix = '$', facts = [], subvals = [], thumbs = [], }) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const counted = useCountUp(value);
+    return (_jsxs(MotionBox, Object.assign({ bg: "#EAF7EF", borderRadius: "12px", p: "base", w: "full", maxW: "440px" }, (prefersReducedMotion
+        ? {}
+        : {
+            initial: { scale: 0.92 },
+            animate: { scale: [0.92, 1.02, 1] },
+            transition: { duration: 0.55, delay: 0.3, ease: 'easeOut' },
+        }), { children: [_jsxs(Text, { fontFamily: "primary", fontWeight: "700", fontSize: "34px", lineHeight: "1.1", color: "gray.4", sx: { fontVariantNumeric: 'tabular-nums' }, children: [valuePrefix, counted] }), facts.length > 0 && (_jsx(Grid, { templateColumns: "1fr 1fr", gap: "7px 26px", mt: "3", pt: "3", borderTop: "1px solid", borderColor: "rgba(0,0,0,0.08)", children: facts.map((fact) => (_jsxs(Flex, { justify: "space-between", gap: "2", children: [_jsx(Text, { fontFamily: "secondary", fontSize: "14px", color: "gray.3", children: fact.label }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", fontWeight: "600", color: "gray.4", children: fact.value })] }, fact.label))) })), subvals.length > 0 && (_jsx(Flex, { mt: "3", gap: "6", wrap: "wrap", children: subvals.map((sub) => (_jsxs(Box, { children: [_jsx(Text, { fontFamily: "secondary", fontSize: "12px", color: "gray.3", children: sub.label }), _jsx(Text, { fontFamily: "secondary", fontSize: "14px", fontWeight: "600", color: "gray.4", children: sub.value })] }, sub.label))) })), thumbs.length > 0 && (_jsx(Flex, { mt: "3", gap: "2", children: thumbs.map((thumb) => (_jsx(Image, { src: thumb, alt: "", boxSize: "30px", borderRadius: "7px", objectFit: "cover", transition: "transform 0.15s", _hover: { transform: 'scale(1.1)' } }, thumb))) }))] })));
+};

package/dist/components/homi/StaggerReveal.d.ts

@@ -0,0 +1,2 @@
+import { StaggerRevealI } from '../../interfaces';
+export declare const StaggerReveal: ({ children, stagger, delay, spacing, }: StaggerRevealI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/homi/StaggerReveal.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
+import { Box, chakra } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import { usePrefersReducedMotion } from '../../hooks';
+const MotionDiv = chakra(motion.div);
+// Staggers its children's entrance — each rises + fades in, one after another
+// (POC: rise 0.5s, ~0.07 between children). Reduced-motion renders them plainly.
+// A narrow motion wrapper over static children — not an animation engine.
+// `spacing` lays the children out as a column with a gap (like a Stack), so it
+// can replace a Stack while adding the per-item build.
+export const StaggerReveal = ({ children, stagger = 0.07, delay = 0.05, spacing, }) => {
+    const prefersReducedMotion = usePrefersReducedMotion();
+    if (prefersReducedMotion)
+        return (_jsx(Box, { display: "flex", flexDirection: "column", gap: spacing, children: children }));
+    const container = {
+        hidden: {},
+        show: { transition: { staggerChildren: stagger, delayChildren: delay } },
+    };
+    const item = {
+        hidden: { opacity: 0, y: 16 },
+        show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: 'easeOut' } },
+    };
+    return (_jsx(MotionDiv, Object.assign({ display: "flex", flexDirection: "column", gap: spacing }, {
+        variants: container,
+        initial: 'hidden',
+        animate: 'show',
+    }, { children: Children.map(children, (child) => isValidElement(child) ? (_jsx(MotionDiv, Object.assign({}, { variants: item }, { children: child }))) : (child)) })));
+};

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

@@ -0,0 +1,5 @@
+export * from './HomiPresence';
+export * from './HomiVoice';
+export * from './ProgressBar';
+export * from './RevealValueCard';
+export * from './StaggerReveal';

package/dist/components/homi/index.js

@@ -0,0 +1,5 @@
+export * from './HomiPresence';
+export * from './HomiVoice';
+export * from './ProgressBar';
+export * from './RevealValueCard';
+export * from './StaggerReveal';

package/dist/components/inboxTile/InboxForwardBanner.js

@@ -3,5 +3,5 @@ import { t } from 'i18next';
 import { AspectRatio, Flex, Text, Image, chakra } from '@chakra-ui/react';
 import { FileIt } from '../../assets/images';
 export const InboxForwardBanner = () => {
-    return (_jsxs(Flex, { p: "base", gap: "base", align: "center", bg: "#FAE6AF", id: "forwardReceipts", children: [_jsx(AspectRatio, { ratio: 1, minW: "35px", h: "auto", children: _jsx(Image, { src: FileIt, alt: "IA" }) }), _jsxs(Text, { variant: "home", lineHeight: "1.2", children: [t('inbox.forwardTo'), _jsx(chakra.span, { fontFamily: "secondary", fontSize: "sm", lineHeight: "1", color: "neutral.black", fontWeight: "bold", display: "inline", children: "fileit@homefile.com." })] })] }));
+    return (_jsxs(Flex, { p: "base", gap: "base", align: "center", bg: "#FAE6AF", id: "forwardReceipts", children: [_jsx(AspectRatio, { ratio: 1, minW: "35px", h: "auto", children: _jsx(Image, { src: FileIt, alt: "IA" }) }), _jsxs(Text, { variant: "home", lineHeight: "1.2", children: [t('inbox.forwardTo'), _jsx(chakra.a, { href: "mailto:fileit@homefile.com", fontFamily: "secondary", fontSize: "sm", lineHeight: "1", color: "neutral.black", fontWeight: "600", display: "inline", cursor: "pointer", _hover: { textDecoration: 'underline' }, children: "fileit@homefile.com" }), '.'] })] }));
 };

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from './addItemWizard';
 export * from './animations';
+export * from './homi';
 export * from './appliances';
 export * from './appBar';
 export * from './badge';
@@ -17,6 +18,7 @@ export * from './footers';
 export * from './forms';
 export * from './headers';
 export * from './help';
+export * from './history';
 export * from './homeAssistant';
 export * from './homeBoard';
 export * from './homeItems';

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export * from './addItemWizard';
 export * from './animations';
+export * from './homi';
 export * from './appliances';
 export * from './appBar';
 export * from './badge';
@@ -17,6 +18,7 @@ export * from './footers';
 export * from './forms';
 export * from './headers';
 export * from './help';
+export * from './history';
 export * from './homeAssistant';
 export * from './homeBoard';
 export * from './homeItems';

package/dist/components/inputs/InlineEditField.d.ts

@@ -0,0 +1,2 @@
+import { InlineEditFieldI } from '../../interfaces';
+export declare const InlineEditField: ({ value: initial, onSave, placeholder, }: InlineEditFieldI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/InlineEditField.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Button, Flex, Input, Text } from '@chakra-ui/react';
+import { t } from 'i18next';
+import { useDirtySave } from '../../hooks';
+// Prepopulated, edit-in-place field whose Save appears ONLY when the value
+// changes (the proven TwoFactorSetting dirty-gate, via useDirtySave), with a
+// transient "Saved ✓" flash after saving. POC styling (living spec): a bordered
+// rounded box — NOT a bare underline — Poppins 600 19px, focus-within blue ring.
+export const InlineEditField = ({ value: initial, onSave, placeholder, }) => {
+    const { value, setValue, isDirty, justSaved, save } = useDirtySave(initial, onSave);
+    return (_jsxs(Flex, { align: "center", gap: "2", children: [_jsx(Box, { flex: "1", border: "1px solid", borderColor: "lightGray.2", borderRadius: "8px", px: "3", transition: "box-shadow 0.15s, border-color 0.15s", _focusWithin: {
+                    borderColor: 'blue.2',
+                    boxShadow: '0 0 0 3px rgba(36,136,198,0.18)',
+                }, children: _jsx(Input, { variant: "unstyled", value: value, onChange: (e) => setValue(e.target.value), placeholder: placeholder, fontFamily: "primary", fontWeight: "600", fontSize: "19px", color: "gray.4", h: "44px" }) }), isDirty && (_jsx(Button, { variant: "secondaryFooter", bg: "neutral.white", fontWeight: "medium", onClick: save, children: t('buttons.save').toUpperCase() })), justSaved && !isDirty && (_jsx(Text, { fontFamily: "secondary", fontSize: "sm", color: "#34C759", children: "Saved \u2713" }))] }));
+};

package/dist/components/inputs/RadioCard.d.ts

@@ -3,6 +3,8 @@ import { UseRadioProps } from '@chakra-ui/react';
 type RadioCardVariant = 'default' | 'bg-violet';
 interface RadioCardProps extends UseRadioProps {
     variant?: RadioCardVariant;
+    /** Optional lettered key badge (the "press A/B" cue); inverts on checked. */
+    keyBadge?: string;
 }
-export declare const RadioCard: ({ variant, children, ...radioProps }: PropsWithChildren<RadioCardProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioCard: ({ variant, keyBadge, children, ...radioProps }: PropsWithChildren<RadioCardProps>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/RadioCard.js

@@ -13,8 +13,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Flex, useRadio } from '@chakra-ui/react';
 import { isSafari } from '../../utils';
 export const RadioCard = (_a) => {
-    var { variant = 'default', children } = _a, radioProps = __rest(_a, ["variant", "children"]);
-    const { getInputProps, getRadioProps } = useRadio(radioProps);
+    var { variant = 'default', keyBadge, children } = _a, radioProps = __rest(_a, ["variant", "keyBadge", "children"]);
+    const { getInputProps, getRadioProps, state } = useRadio(radioProps);
     const input = getInputProps();
     const checkbox = getRadioProps();
     const stylesByVariant = {
@@ -73,5 +73,5 @@ export const RadioCard = (_a) => {
     };
     const containerStyles = stylesByVariant[variant].container;
     const indicatorStyles = stylesByVariant[variant].indicator;
-    return (_jsxs(Box, { as: "label", children: [_jsx("input", Object.assign({}, input)), _jsx(Box, Object.assign({}, checkbox, { cursor: "pointer" }, containerStyles, { children: _jsxs(Flex, { align: "center", gap: "base", minH: "40px", children: [_jsx(Box, Object.assign({}, checkbox, indicatorStyles)), children] }) }))] }));
+    return (_jsxs(Box, { as: "label", children: [_jsx("input", Object.assign({}, input)), _jsx(Box, Object.assign({}, checkbox, { cursor: "pointer" }, containerStyles, { children: _jsxs(Flex, { align: "center", gap: "base", minH: "40px", children: [_jsx(Box, Object.assign({}, checkbox, indicatorStyles)), children, keyBadge && (_jsx(Flex, { align: "center", justify: "center", ml: "auto", boxSize: "24px", flexShrink: 0, borderRadius: "5px", border: "1px solid", borderColor: state.isChecked ? 'blue.2' : 'lightBlue.5', bg: state.isChecked ? 'blue.2' : 'transparent', color: state.isChecked ? 'neutral.white' : 'gray.3', fontFamily: "primary", fontWeight: "600", fontSize: "12px", children: keyBadge }))] }) }))] }));
 };

package/dist/components/inputs/TextInput.d.ts

@@ -1,2 +1,2 @@
 import { InputI } from '../../interfaces';
-export declare const TextInput: ({ autoCapitalize, autoCorrect, errorMessage, handleChange, hasError, id, isDisabled, label, placeholder, value, type, showLabel, hint, ...props }: InputI) => import("react/jsx-runtime").JSX.Element;
+export declare const TextInput: ({ autoCapitalize, autoCorrect, errorMessage, handleChange, hasError, id, isDisabled, label, placeholder, value, type, showLabel, hint, variant, ...props }: InputI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/TextInput.js

@@ -9,14 +9,21 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { FormControl, Text, Input } from '@chakra-ui/react';
 import { LabeledField } from '../../components';
 export const TextInput = (_a) => {
-    var _b;
-    var { autoCapitalize = 'on', autoCorrect = 'on', errorMessage, handleChange, hasError, id, isDisabled, label, placeholder, value = '', type = 'text', showLabel = true, hint } = _a, props = __rest(_a, ["autoCapitalize", "autoCorrect", "errorMessage", "handleChange", "hasError", "id", "isDisabled", "label", "placeholder", "value", "type", "showLabel", "hint"]);
+    var _b, _c;
+    var { autoCapitalize = 'on', autoCorrect = 'on', errorMessage, handleChange, hasError, id, isDisabled, label, placeholder, value = '', type = 'text', showLabel = true, hint, variant = 'default' } = _a, props = __rest(_a, ["autoCapitalize", "autoCorrect", "errorMessage", "handleChange", "hasError", "id", "isDisabled", "label", "placeholder", "value", "type", "showLabel", "hint", "variant"]);
     const error = hasError && !isDisabled;
     const isFilled = String(value).trim().length > 0 && showLabel;
     const placeholderToUse = isFilled ? '' : ((_b = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _b !== void 0 ? _b : '');
-    return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: showLabel ? (label !== null && label !== void 0 ? label : placeholder) : undefined, isFilled: isFilled, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholderToUse, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled })) }), error && (_jsx(Text, { variant: "error", my: "1", children: errorMessage })), hint && !error && (_jsx(Text, { variant: "hint", my: "1", children: hint }))] }));
+    const messages = (_jsxs(_Fragment, { children: [error && (_jsx(Text, { variant: "error", my: "1", children: errorMessage })), hint && !error && (_jsx(Text, { variant: "hint", my: "1", children: hint }))] }));
+    // Conversational (Typeform-style): a bare bottom-border input — no floating
+    // LabeledField wrapper — larger type, a 44pt tap target via padding, blue
+    // focus underline.
+    if (variant === 'conversational') {
+        return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: (_c = placeholder !== null && placeholder !== void 0 ? placeholder : label) !== null && _c !== void 0 ? _c : '', value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled, variant: "unstyled", fontFamily: "primary", fontSize: "18px", h: "auto", py: "2.5", borderRadius: "0", borderBottom: "2px solid", borderColor: error ? 'red.500' : 'lightGray.2', _focus: { borderColor: 'blue.2' }, _placeholder: { color: 'gray.2' } })), messages] }));
+    }
+    return (_jsxs(FormControl, { isInvalid: error, children: [_jsx(LabeledField, { label: showLabel ? (label !== null && label !== void 0 ? label : placeholder) : undefined, isFilled: isFilled, children: _jsx(Input, Object.assign({}, props, { autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, id: id, placeholder: placeholderToUse, value: value, type: type, onChange: handleChange, isInvalid: error, isDisabled: isDisabled })) }), messages] }));
 };

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

@@ -1,4 +1,5 @@
 export * from './ControlledInput';
+export * from './InlineEditField';
 export * from './DatePicker';
 export * from './DateRangePicker';
 export * from './EditFileUploader';

package/dist/components/inputs/index.js

@@ -1,4 +1,5 @@
 export * from './ControlledInput';
+export * from './InlineEditField';
 export * from './DatePicker';
 export * from './DateRangePicker';
 export * from './EditFileUploader';

package/dist/components/myHomes/HomeDetailsContent.js

@@ -17,5 +17,5 @@ import { House } from '../../assets/images';
 export const HomeDetailsContent = (_a) => {
     var props = __rest(_a, []);
     const { handleClose, isLoading, children, showFooter, footerButtons } = props;
-    return (_jsxs(DrawerContent, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { icon: House, handleCloseButton: handleClose, title: t("myHomes.details.header") }) }), _jsx(DrawerBody, { padding: "0 0 6rem 0", bg: "bg.surface", children: _jsx(Box, { children: isLoading ? (_jsx(Loading, {})) : (_jsxs(_Fragment, { children: [_jsx(HomeCard, Object.assign({}, props)), children] })) }) }), _jsx(DrawerFooter, { children: _jsx(FooterDrawer, { isOpen: showFooter, children: footerButtons }) })] }));
+    return (_jsxs(DrawerContent, { bg: "bg.surface", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { icon: House, handleCloseButton: handleClose, title: t("myHomes.details.header") }) }), _jsx(DrawerBody, { padding: "0 0 6rem 0", bg: "bg.surface", children: _jsx(Box, { children: isLoading ? (_jsx(Loading, {})) : (_jsxs(_Fragment, { children: [_jsx(HomeCard, Object.assign({}, props)), children] })) }) }), _jsx(DrawerFooter, { bg: "bg.surface", p: "0", children: _jsx(FooterDrawer, { isOpen: showFooter, children: footerButtons }) })] }));
 };

package/dist/components/myHomes/IncludePublicRecords.d.ts

@@ -1,6 +1,18 @@
 import { ChangeEvent } from 'react';
 export interface IncludePublicRecordsI {
+    /** Retained for compat; the light disclosure variant has no consent gate. */
     isChecked?: boolean;
     onSelectRecords?: (event: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const IncludePublicRecords: ({ isChecked, onSelectRecords, }: IncludePublicRecordsI) => import("react/jsx-runtime").JSX.Element;
+/**
+ * IncludePublicRecords — a single-line, always-visible public-records
+ * DISCLOSURE. No checkbox, no consent gate, no expander: Homi is INFORMING the
+ * user what he'll pull, not asking permission. One plain, casual sentence in
+ * his voice.
+ *
+ * Accuracy (Dana-cleared, informational-not-consent): taxes + lot size are
+ * public records; the value is an ESTIMATE (AVM), so it's sourced from "public
+ * records and public data" and is never called a public record on its own.
+ * The only guardrail here is factual accuracy of the sourcing claim.
+ */
+export declare const IncludePublicRecords: (_props: IncludePublicRecordsI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/IncludePublicRecords.js

@@ -1,6 +1,16 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { t } from 'i18next';
-import { Box, Checkbox, Flex, Stack, Text } from '@chakra-ui/react';
-export const IncludePublicRecords = ({ isChecked, onSelectRecords, }) => {
-    return (_jsx(Box, { borderRadius: "md", bg: "lightViolet.1", p: "base", children: _jsxs(Flex, { gap: "base", align: "start", children: [_jsx(Checkbox, { isChecked: isChecked, onChange: onSelectRecords }), _jsxs(Stack, { children: [_jsx(Text, { fontFamily: "secondary", children: t('myHomes.select.include') }), _jsx(Text, { variant: "home", color: "gray.2", children: t('myHomes.select.description') })] })] }) }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '@chakra-ui/react';
+/**
+ * IncludePublicRecords — a single-line, always-visible public-records
+ * DISCLOSURE. No checkbox, no consent gate, no expander: Homi is INFORMING the
+ * user what he'll pull, not asking permission. One plain, casual sentence in
+ * his voice.
+ *
+ * Accuracy (Dana-cleared, informational-not-consent): taxes + lot size are
+ * public records; the value is an ESTIMATE (AVM), so it's sourced from "public
+ * records and public data" and is never called a public record on its own.
+ * The only guardrail here is factual accuracy of the sourcing claim.
+ */
+export const IncludePublicRecords = (_props) => (_jsx(Text, { fontFamily: "secondary", fontSize: "sm", color: "gray.3", 
+    // text-wrap: pretty keeps the sentence free of widows without hand-tuning.
+    sx: { textWrap: 'pretty' }, children: "I\u2019ll pull the basics on your home \u2014 its taxes, lot size, and an estimate of its value \u2014 from public records and public data, so you don\u2019t have to enter them by hand." }));

package/dist/components/myHomes/edithome/EditHomeDetails.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { t } from 'i18next';
-import { Stack, Divider } from '@chakra-ui/react';
-import { AddressStored, TextInput } from '../../../components';
+import { Box, Stack, Divider, Text } from '@chakra-ui/react';
+import { TextInput } from '../../../components';
 import { useEditHomeDetails } from '../../../hooks';
 import { useSnapshot } from 'valtio';
 import { addressProxy, homeCardProxy, homeDetailsProxy } from '../../../proxies';
@@ -15,7 +15,16 @@ export const EditHomeDetails = ({ address, externalLink, name, setIsDirty, }) =>
     const { fields, validations } = useSnapshot(homeDetailsProxy, { sync: true });
     const { fields: addressFields } = useSnapshot(addressProxy, { sync: true });
     const homeCard = homeCardProxy;
+    // Keep the (seeded) address flowing into the save proxy even though it is not
+    // editable here — otherwise saving a name change would blank the address.
     const allFields = Object.assign(Object.assign({}, fields), addressFields);
     homeCard.setFields(allFields);
-    return (_jsxs(Stack, { spacing: "base", p: "base", bg: "neutral.white", children: [_jsx(TextInput, { errorMessage: `${t('myHomes.form.name')} ${t('forms.required')}`, hasError: !validations.isNameValid, id: "projectName", placeholder: t('myHomes.form.projectName'), handleChange: (event) => handleChange(event, 'name'), value: fields.name, onBlurCapture: handleNameValidation }), externalLink && (_jsx(TextInput, { id: "externalLink", placeholder: t('myHomes.form.externalLink'), handleChange: (event) => handleChange(event, 'externalLink'), value: String(fields.externalLink) })), _jsx(Divider, {}), _jsx(AddressStored, { setIsDirty: setIsDirty })] }));
+    const streetLine = [address.number, address.street].filter(Boolean).join(' ');
+    const cityLine = [
+        [address.city, address.state].filter(Boolean).join(', '),
+        address.zip,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return (_jsxs(Stack, { spacing: "base", p: "base", bg: "neutral.white", children: [_jsx(TextInput, { errorMessage: `${t('myHomes.form.name')} ${t('forms.required')}`, hasError: !validations.isNameValid, id: "projectName", placeholder: t('myHomes.form.editHomeName'), handleChange: (event) => handleChange(event, 'name'), value: fields.name, onBlurCapture: handleNameValidation }), externalLink && (_jsx(TextInput, { id: "externalLink", placeholder: t('myHomes.form.externalLink'), handleChange: (event) => handleChange(event, 'externalLink'), value: String(fields.externalLink) })), _jsx(Divider, {}), _jsxs(Box, { children: [_jsx(Text, { fontFamily: "secondary", fontSize: "xs", color: "gray.3", textTransform: "uppercase", mb: "1", children: t('myHomes.section1') }), address.apartmentNumber && (_jsx(Text, { fontFamily: "secondary", fontSize: "md", color: "gray.4", children: address.apartmentNumber })), _jsx(Text, { fontFamily: "secondary", fontSize: "md", color: "gray.4", children: streetLine }), _jsx(Text, { fontFamily: "secondary", fontSize: "md", color: "gray.4", children: cityLine })] })] }));
 };

package/dist/components/myHomes/steps/NewHomeDetails.d.ts

@@ -1,2 +1,2 @@
 import { AddHomeContentI } from '../../../interfaces';
-export declare const NewHomeDetails: ({ values, isLoading }: AddHomeContentI) => import("react/jsx-runtime").JSX.Element;
+export declare const NewHomeDetails: ({ values, isLoading, showName, }: AddHomeContentI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myHomes/steps/NewHomeDetails.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSnapshot } from 'valtio';
 import { t } from 'i18next';
 import { Stack, Center, Divider } from '@chakra-ui/react';
@@ -7,10 +7,10 @@ import { firstHomeProxy } from '../../../proxies';
 import { useAddHouseContent } from '../../../hooks';
 import { BeatLoader } from 'react-spinners';
 import { up } from './MyHomeDetails';
-export const NewHomeDetails = ({ values, isLoading }) => {
+export const NewHomeDetails = ({ values, isLoading, showName = true, }) => {
     const { handleErrorMessage, handleNameChange, handleNameValidation, handleSelectRecords, } = useAddHouseContent(values);
     const { name, isNameValid, searchRecords } = useSnapshot(firstHomeProxy, {
         sync: true,
     });
-    return (_jsxs(Stack, { spacing: "base", children: [isLoading && (_jsx(Center, { h: "4rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !isLoading && (_jsxs(Stack, { spacing: "base", children: [_jsx(TextInput, { errorMessage: handleErrorMessage(), hasError: !isNameValid, id: "homeName", placeholder: t('myHomes.form.homeName'), handleChange: handleNameChange, onBlurCapture: handleNameValidation, value: name }), _jsx(Divider, { borderStyle: "dashed", borderColor: "lightBlue.6" }), _jsx(AddressStored, {})] })), _jsx(WrapperWithShadow, { animation: up, fadeDelay: 0.2, isWizard: true, padding: "0", pb: "0", children: _jsx(IncludePublicRecords, { isChecked: searchRecords, onSelectRecords: handleSelectRecords }) })] }));
+    return (_jsxs(Stack, { spacing: "base", children: [isLoading && (_jsx(Center, { h: "4rem", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })), !isLoading && (_jsxs(Stack, { spacing: "base", children: [showName && (_jsxs(_Fragment, { children: [_jsx(TextInput, { errorMessage: handleErrorMessage(), hasError: !isNameValid, id: "homeName", placeholder: t('myHomes.form.homeName'), handleChange: handleNameChange, onBlurCapture: handleNameValidation, value: name }), _jsx(Divider, { borderStyle: "dashed", borderColor: "lightBlue.6" })] })), _jsx(AddressStored, {})] })), _jsx(WrapperWithShadow, { animation: up, fadeDelay: 0.2, isWizard: true, padding: "0", pb: "0", children: _jsx(IncludePublicRecords, { isChecked: searchRecords, onSelectRecords: handleSelectRecords }) })] }));
 };

package/dist/components/myProfile/MyProfileBody.d.ts

@@ -1,2 +1,2 @@
 import { MyProfileBodyI } from '../../interfaces';
-export declare const MyProfileBody: ({ account, details, email, isLoading, payment, rolePermissions, }: MyProfileBodyI) => import("react/jsx-runtime").JSX.Element;
+export declare const MyProfileBody: ({ account, details, defaultIndex, email, isLoading, payment, rolePermissions, }: MyProfileBodyI) => import("react/jsx-runtime").JSX.Element;

package/dist/components/myProfile/MyProfileBody.js

@@ -3,7 +3,7 @@ import { t } from 'i18next';
 import { Center, DrawerBody } from '@chakra-ui/react';
 import { BeatLoader } from 'react-spinners';
 import { TabsHeader } from '../headers';
-export const MyProfileBody = ({ account, details, email, isLoading, payment, rolePermissions, }) => {
+export const MyProfileBody = ({ account, details, defaultIndex, email, isLoading, payment, rolePermissions, }) => {
     const tabs = [
         {
             label: t('myProfile.tabs.tab1'),
@@ -26,5 +26,5 @@ export const MyProfileBody = ({ account, details, email, isLoading, payment, rol
             component: rolePermissions,
         },
     ].filter((tab) => tab.component);
-    return (_jsx(DrawerBody, { p: "0", children: isLoading ? (_jsx(Center, { h: "4rem", bg: "neutral.white", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })) : (_jsx(TabsHeader, { tabList: tabs })) }));
+    return (_jsx(DrawerBody, { p: "0", children: isLoading ? (_jsx(Center, { h: "4rem", bg: "neutral.white", children: _jsx(BeatLoader, { color: "gray", size: 8 }) })) : (_jsx(TabsHeader, { tabList: tabs, defaultIndex: defaultIndex })) }));
 };

package/dist/components/myProfile/details/HomiSms.d.ts

@@ -1,2 +1,2 @@
 import { HomiSmsI } from '../../../interfaces';
-export declare const HomiSms: ({ mode, sms, loading, onChange, onSave, }: HomiSmsI) => import("react/jsx-runtime").JSX.Element;
+export declare const HomiSms: ({ mode, enabled, phone, consentUrl, loading, onChange, onSave, }: HomiSmsI) => import("react/jsx-runtime").JSX.Element;