// DSYouHub.jsx — Meridian · Navigation 2.0 "You" hub primitives // // Ported from AXIS-10 (screens/YouTab.jsx + YouAreas.jsx). "You" is no // longer a bottom tab — it opens from the top-right avatar and presents a // sheet that routes to FOUR areas: About you · Settings · Systems · // Integrations. // // This file owns the reusable, DS-prefixed grouped-list primitives plus // the landing menu sheet: // DSHubGroup — titled section: header + hint, wraps rows in a card // DSHubRow — tappable list row: icon · label · sublabel · value/ // chip/status · chevron. Supports `action` + `danger`. // DSHubToggleRow — list row with a trailing DSToggle // DSAreaHeader — back chevron + title for pushed area screens // DSYouAreaCard — large area entry card (icon · title · desc · status) // DSYouMenu — the landing sheet (profile header + 4 area cards + // Sign out + version footer) // DSHubGlyphs (G) — the shared 24×24 stroke glyph map // DSGly — the glyph wrapper component // // Depends on window globals: M, DSChip, DSToggle, DSCard. References // window.DSYouAvatar (authored in DSNav2.jsx) for the monogram avatar when // available, falling back to an inline monogram tile. // ── DSGly — shared glyph wrapper (24×24, currentColor, stroke 2) ── function DSGly({ children, size = 18 }) { return ( ); } // ── DSHubGlyphs — the `G` map ──────────────────────────────────── const DSHubGlyphs = { // areas about: (s) => , settings: (s) => , systems: (s) => , plug: (s) => , // rows bell: (s) => , moon: (s) => , recap: (s) => , user: (s) => , at: (s) => , mail: (s) => , phone: (s) => , key: (s) => , shield: (s) => , devices: (s) => , lock: (s) => , signout: (s) => , sparkle: (s) => , image: (s) => , download: (s) => , trash: (s) => , scale: (s) => , life: (s) => , admin: (s) => , heart: (s) => , calendar: (s) => , doc: (s) => , chat: (s) => , leaf: (s) => , activity: (s) => , mood: (s) => , today: (s) => , chevron: (s) => , }; const G = DSHubGlyphs; // ───────────────────────────────────────────────────────────────── // Grouped-list primitives // ───────────────────────────────────────────────────────────────── // DSHubGroup — titled section. Header (title + optional hint) above a card // that contains the rows. Rows draw their own dividers; pass `isLast` to the // final child to drop its hairline. function DSHubGroup({ title, hint, children, style }) { return (
{title && (
{title}
{hint &&
{hint}
}
)} {children}
); } // DSHubRow — the workhorse list row. // icon key into DSHubGlyphs // label primary text · sublabel — secondary line // value trailing text · chip — render value in an accent DSChip // pos trailing value with a green status dot // danger crisis-tinted (destructive) treatment // action accent treatment (call-to-action label, no chevron) // trailing override the trailing slot entirely (e.g. a DSButton) // isLast drop the bottom hairline function DSHubRow({ icon, label, sublabel, value, pos, chip, danger, action, trailing, isLast, onClick }) { const accent = action && !danger; const labelColor = danger ? M.crisis : accent ? M.axis : M.ink; const showChevron = !action && trailing === undefined; return (
{icon && ( {G[icon] ? G[icon](17) : null} )}
{label}
{sublabel && (
{sublabel}
)}
{trailing !== undefined ? trailing : chip ? {value} : pos ? ( {value} ) : value ? ( {value} ) : null} {showChevron && ( {G.chevron(16)} )}
); } // DSHubToggleRow — list row with a trailing DSToggle. Self-contained state. function DSHubToggleRow({ icon, label, sublabel, defaultOn = false, isLast }) { const [on, setOn] = React.useState(defaultOn); return (
{G[icon] ? G[icon](17) : null}
{label}
{sublabel &&
{sublabel}
}
); } // DSAreaHeader — back chevron + title, used by every pushed area screen. function DSAreaHeader({ title, onBack }) { return (
{title}
); } // ───────────────────────────────────────────────────────────────── // You menu — landing sheet pieces // ───────────────────────────────────────────────────────────────── // DSYouAreaCard — large area entry card: icon tile · title · desc · status. function DSYouAreaCard({ icon, title, desc, status, onClick }) { return ( {})} style={{ marginBottom: 12 }}>
{G[icon] ? G[icon](22) : null}
{title}
{desc}
{status && ( {status} )} {G.chevron(18)}
); } // Monogram avatar for the profile header. Prefers window.DSYouAvatar (from // DSNav2.jsx) when present; otherwise renders an inline ink monogram tile. function YouProfileAvatar({ monogram = 'EH', size = 54 }) { if (typeof window !== 'undefined' && window.DSYouAvatar) { return ; } return (
{monogram}
); } // The sheet's inner content — profile header + 4 area cards + sign out + footer. function DSYouMenuBody({ name = 'Eleanor Halton', memberSince = 'Member since March 2024', monogram = 'EH', version = 'Axis · v1.3.2', onSignOut, onArea, }) { return ( <> {/* profile header */}
{name} Verified
{memberSince}
{/* FOUR areas, in order */} onArea('about'))} /> onArea('settings'))} /> onArea('systems'))} /> onArea('integrations'))} />
{version}
); } // DSYouMenu — the landing sheet, presented over a dimmed scrim. Pass // `chrome={false}` to render just the sheet card (no scrim) for embedding. function DSYouMenu({ chrome = true, onClose, ...bodyProps }) { const sheet = (
You
); if (!chrome) return sheet; return (
{/* scrim */}
{sheet}
); } Object.assign(window, { DSGly, DSHubGlyphs, DSHubGroup, DSHubRow, DSHubToggleRow, DSAreaHeader, DSYouAreaCard, DSYouMenuBody, DSYouMenu, });