/* primitives.jsx — Quill UI atoms (Gamma DS, mobile-tuned) → window.Q. * Load after icons.jsx. const { Button, Badge, Sheet, ... } = window.Q; */ (function () { const { useState, useEffect, useRef, useMemo, useCallback } = React; const { Icon, NitaMark } = window.Icons; const REDUCE = () => window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches; /* Framed (desktop mockup): fixed offsets clear the fake status bar / island / home indicator. Frameless (real phone, window.NITA_FRAMELESS from the index.html boot script): fold the measured real safe-area insets (window.NITA_SAFE) in instead — no fake chrome to clear. */ const NSAFE = window.NITA_SAFE || { top: 0, bottom: 0 }; const SAFE_TOP = window.NITA_FRAMELESS ? Math.max(20, Math.round(NSAFE.top) + 8) // clears the REAL status bar (standalone) or just breathes (browser) : 56; // clears fake status bar + dynamic island const TABBAR_H = window.NITA_FRAMELESS ? 76 + Math.round(NSAFE.bottom) // dock height + real home-indicator inset : 76; // bottom tab bar height incl. fake home indicator /* ── Background scroll lock (overlays) ─────────────────────────── While any sheet / fullscreen viewer is mounted the screens behind it must not scroll. Counter-based so stacked overlays (sheet over sheet) nest correctly and the lock always releases on unmount; the actual freeze is html.q-locked .q-screen { overflow-y: hidden } (index.html). */ let scrollLocks = 0; const useScrollLock = (active) => { useEffect(() => { if (!active) return; scrollLocks++; document.documentElement.classList.add("q-locked"); /* An overlay taking the stage also dismisses any open swipe-row actions beneath it, so they never linger under the scrim. */ if (closeOpenSwipe) closeOpenSwipe(); return () => { scrollLocks = Math.max(0, scrollLocks - 1); if (scrollLocks === 0) document.documentElement.classList.remove("q-locked"); }; }, [active]); }; /* ── Status-bar tint (dark fullscreen overlays) ─────────────────── The device status bar (ios-frame.jsx) floats above every app layer and reads --ios-status-color. Dark overlays (A4 viewer, receipt viewer) flip it white while mounted; counter-based like useScrollLock so stacked overlays release correctly. */ let statusTints = 0; const useStatusBarLight = (active) => { useEffect(() => { if (!active) return; statusTints++; document.documentElement.style.setProperty("--ios-status-color", "#fff"); return () => { statusTints = Math.max(0, statusTints - 1); if (statusTints === 0) document.documentElement.style.removeProperty("--ios-status-color"); }; }, [active]); }; /* ── Sparkle (AI signal) ─────────────────────────────────────── */ const Sparkle = ({ size = 13, color = "var(--color-primary)", style }) => ( ); /* ── Button ──────────────────────────────────────────────────── */ const BTN = { /* primary = warm ink: the ONE human CTA voice (sage stays AI-only, gold stays money-only — there is no gold button) */ primary: { backgroundColor: "var(--color-text-1)", color: "var(--color-bg)", border: "none" }, secondary: { background: "var(--color-surface-1)", color: "var(--color-text-1)", border: "1.4px solid var(--color-border-strong)" }, ghost: { background: "transparent", color: "var(--color-text-2)", border: "none" }, outline: { background: "transparent", color: "var(--color-text-1)", border: "1.4px solid var(--color-border-strong)" }, danger: { backgroundColor: "var(--color-error)", color: "var(--color-error-fg)", border: "none" }, ai: { backgroundColor: "var(--color-primary)", color: "var(--color-primary-fg)", border: "none" }, }; const RAISED = { primary: 1, danger: 1, ai: 1 }; const Button = ({ variant = "secondary", size = "md", full, children, onClick, style = {}, disabled, icon, type }) => { const h = { sm: 32, md: 40, lg: 48 }[size]; const fs = { sm: 13, md: 14, lg: 15 }[size]; const px = { sm: 12, md: 16, lg: 20 }[size]; return ( ); }; const IconButton = ({ name, size = 40, iconSize = 19, onClick, label, style = {}, active, color }) => ( ); /* ── Icon button with an unread-count chip ─────────────────────── Terracotta chip = attention (never gold); identical to IconButton at count 0. The chip is decorative — the count lives in the computed aria-label so screen readers hear one announcement. */ const BadgedIconButton = ({ name, label, count, onClick, size }) => { const n = Number(count) || 0; const aria = n > 0 ? window.t("notif.bell.aria", { count: n }) : label; return ( {n > 0 && ( )} ); }; /* ── File download (CSV/FEC exports) — mechanics live in app/download.js (window.NITA_SAVE); the tester build swaps that file for a clipboard-copy variant so the shipped HTML never contains the blob-download pattern mail scanners flag. ─────── */ const downloadFile = (name, content, mime) => { try { if (window.NITA_SAVE) window.NITA_SAVE(name, content, mime); } catch (e) {} }; /* ── QR code (real, scannable) ───────────────────────────────── */ const QR = ({ value, size = 120, color = "hsl(35 20% 12%)", bg = "#fff", quiet = 2, style }) => { const model = useMemo(() => { try { const q = window.qrcode(0, "M"); q.addData(value || " "); q.make(); return q; } catch (e) { return null; } }, [value]); if (!model) return
; const count = model.getModuleCount(); const total = count + quiet * 2; const rects = []; for (let r = 0; r < count; r++) for (let c = 0; c < count; c++) if (model.isDark(r, c)) rects.push(`M${c + quiet} ${r + quiet}h1v1h-1z`); return ( ); }; /* ── Toggle / switch ─────────────────────────────────────────── */ const Toggle = ({ checked, onChange, label }) => ( /* 40px-tall hit target (negative margin keeps the 28px layout footprint); the visible 46x28 pill is unchanged. */ ); /* ── Status pill / badge ─────────────────────────────────────── */ const STATUS = { draft: { c: "var(--color-text-3)", key: "st.draft" }, sent: { c: "var(--color-info)", key: "st.sent" }, paid: { c: "var(--color-success)", key: "st.paid" }, overdue: { c: "var(--color-accent)", key: "st.overdue" }, partial: { c: "var(--color-info)", key: "st.partial" }, quote: { c: "var(--color-text-2)", key: "st.quote" }, accepted: { c: "var(--color-success)", key: "st.accepted" }, declined: { c: "var(--color-error)", key: "st.declined" }, expired: { c: "var(--color-warning)", key: "st.expired" }, issued: { c: "var(--color-text-3)", key: "st.issued" }, /* viewed is derived, never stored; label reuses det.t.viewed */ viewed: { c: "var(--color-info)", key: "det.t.viewed" }, }; const StatusPill = ({ status, label, solid }) => { const s = STATUS[status] || STATUS.draft; const txt = label || window.t(s.key); if (solid) { return ( {txt} ); } return ( {txt} ); }; const Badge = ({ tone = "neutral", children, ai, style }) => { const T = { neutral: { color: "var(--color-text-3)", borderColor: "var(--color-border-strong)" }, primary: { color: "var(--color-primary)", borderColor: "var(--color-primary)" }, accent: { color: "var(--color-accent)", borderColor: "var(--color-accent)" }, gold: { color: "var(--color-gold)", borderColor: "var(--color-gold)" }, success: { color: "var(--color-success)", borderColor: "var(--color-success)" }, info: { color: "var(--color-info)", borderColor: "var(--color-info)" }, }[tone]; return ( {ai && }{children} ); }; /* ── Avatar (initials) ───────────────────────────────────────── */ const TONES = ["155 26% 46%", "30 58% 50%", "205 55% 45%", "38 60% 42%", "280 30% 50%"]; const Avatar = ({ name = "", size = 36, square }) => { /* Initials come only from tokens that start with a letter or digit, so "Hudson & Gray" -> "HG" (never "H&"). */ const init = name.split(" ").filter(w => /^[\p{L}\p{N}]/u.test(w)).slice(0, 2).map(n => n[0]).join("").toUpperCase(); const tone = TONES[(name.charCodeAt(0) || 0) % TONES.length]; return (
= 4.5:1 on the 16% tint behind them. */ background: `hsl(${tone} / 0.16)`, color: `color-mix(in oklab, hsl(${tone}) 55%, var(--color-text-1))`, display: "flex", alignItems: "center", justifyContent: "center", fontSize: size * 0.38, fontWeight: 700, flexShrink: 0, fontFamily: "var(--font-sans)", }}>{init}
); }; /* ── Money ───────────────────────────────────────────────────── */ const Money = ({ amount, currency = "EUR", size = 14, weight = 600, color = "var(--color-gold)", cents = true, style }) => ( {window.fmtMoney(amount, currency, { cents })} ); /* ── Display money (Fraunces serif gold — the single voice for all amounts rendered at 22px or larger; no tabular figures in Fraunces, so no fontFeatureSettings) ─────────────────────────────────── */ const MoneyDisplay = ({ amount, currency = "EUR", size = 24, weight = 600, color = "var(--color-gold)", cents = true, style }) => ( {window.fmtMoney(amount, currency, { cents })} ); /* ── Animated number (eased count-up; money-formatted) ───────── animKey gives the count-up session memory (MF-1c): once a keyed amount has played, remounting at the same value renders it still — real value changes (mark paid) animate as before. */ const seenAmounts = new Map(); const AnimatedNumber = ({ amount, currency = "EUR", size = 14, weight = 600, color = "var(--color-gold)", cents = true, duration = 750, animKey, style }) => { const seen = animKey != null && seenAmounts.get(animKey) === amount; const [disp, setDisp] = useState(amount); const prevRef = useRef(seen ? amount : null); /* null => first mount, count up from 0 */ const rafRef = useRef(null); useEffect(() => { const from = prevRef.current == null ? 0 : prevRef.current; prevRef.current = amount; if (animKey != null) seenAmounts.set(animKey, amount); if (REDUCE() || from === amount) { setDisp(amount); return; } const t0 = performance.now(); const tick = (now) => { const p = Math.min(1, (now - t0) / duration); const e = 1 - Math.pow(1 - p, 3); setDisp(from + (amount - from) * e); if (p < 1) rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [amount, duration]); return ; }; /* ── Paid celebration burst (one-shot gold/sage particles) ───── */ const PaidBurst = ({ size = 130 }) => ( ); /* ── SwipeRow (drag left to reveal actions; touch + mouse) ──── actions: [{ icon, label, tone: success|error|accent|info|neutral, onPress }] Only one row open at a time. Tap anywhere while open closes it. */ let closeOpenSwipe = null; /* iOS convention: when a tap lands on row B while row A's actions are revealed, that tap only dismisses A. onDown sets this module flag when it closes a sibling; the row's next click is swallowed instead of navigating. */ let swallowNextRowClick = false; /* fg is theme-aware: --color-primary-fg is dark ink in the dark theme (where these tone bgs are light) and near-white in the light theme, keeping labels >= 4.5:1 on every tone in both themes. */ const SWIPE_TONES = { success: { bg: "var(--color-success)", fg: "var(--color-primary-fg)" }, error: { bg: "var(--color-error)", fg: "var(--color-primary-fg)" }, accent: { bg: "var(--color-accent)", fg: "var(--color-primary-fg)" }, info: { bg: "var(--color-info)", fg: "var(--color-primary-fg)" }, neutral: { bg: "var(--color-surface-3)", fg: "var(--color-text-1)" }, }; const SwipeRow = ({ actions = [], children, onClick, last, style }) => { const ACTION_W = 74; const W = actions.length * ACTION_W; const [x, setX] = useState(0); const [animated, setAnimated] = useState(true); const d = useRef({ down: false, captured: false, sx: 0, sy: 0, base: 0, axis: null, moved: false, lx: 0, lt: 0, vx: 0 }); const xRef = useRef(0); xRef.current = x; const close = useCallback(() => { setAnimated(true); setX(0); /* Deregister: a stale closeOpenSwipe would make every later onDown think a sibling is still open (and swallow that tap's click). */ if (closeOpenSwipe === close) closeOpenSwipe = null; }, []); useEffect(() => () => { if (closeOpenSwipe === close) closeOpenSwipe = null; }, [close]); const onDown = (e) => { if (!W) return; /* Yield the left edge to the shell's swipe-back gesture. */ const r = e.currentTarget.getBoundingClientRect(); if (e.clientX - r.left < 28) return; d.current = { down: true, captured: false, sx: e.clientX, sy: e.clientY, base: xRef.current, axis: null, moved: false, lx: e.clientX, lt: performance.now(), vx: 0 }; if (closeOpenSwipe && closeOpenSwipe !== close) { closeOpenSwipe(); swallowNextRowClick = true; } else swallowNextRowClick = false; /* clear any unconsumed flag from a cancelled tap */ }; const onMove = (e) => { const s = d.current; if (!s.down) return; const dx = e.clientX - s.sx, dy = e.clientY - s.sy; if (!s.axis && (Math.abs(dx) > 7 || Math.abs(dy) > 7)) s.axis = Math.abs(dx) > Math.abs(dy) ? "x" : "y"; if (s.axis !== "x") return; if (!s.captured) { try { e.currentTarget.setPointerCapture(e.pointerId); } catch (err) {} s.captured = true; setAnimated(false); } s.moved = true; const now = performance.now(); s.vx = (e.clientX - s.lx) / Math.max(1, now - s.lt); s.lx = e.clientX; s.lt = now; let nx = s.base + dx; if (nx > 0) nx = nx * 0.18; /* rubber right */ if (nx < -W) nx = -W + (nx + W) * 0.18; /* rubber past actions */ setX(nx); }; const onUp = () => { const s = d.current; if (!s.down) return; s.down = false; if (s.axis === "x") { const open = xRef.current < -W / 2 || s.vx < -0.4; setAnimated(true); if (open && !(s.vx > 0.4)) { setX(-W); closeOpenSwipe = close; } else { setX(0); if (closeOpenSwipe === close) closeOpenSwipe = null; } } }; const onRowClick = (e) => { if (swallowNextRowClick) { swallowNextRowClick = false; e.preventDefault(); e.stopPropagation(); d.current.moved = false; return; } if (d.current.moved) { e.preventDefault(); e.stopPropagation(); d.current.moved = false; return; } if (xRef.current !== 0) { e.stopPropagation(); close(); return; } if (onClick) onClick(e); }; return (
{actions.map((a, i) => { const tn = SWIPE_TONES[a.tone] || SWIPE_TONES.neutral; return ( ); })}
{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(e); } }) : undefined} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 16px", background: "var(--color-bg)", touchAction: "pan-y", position: "relative", transform: `translateX(${x}px)`, transition: animated ? "transform .3s var(--spring)" : "none", cursor: onClick ? "pointer" : "default", ...style, }}>{children}
); }; /* ── Kicker / section label ──────────────────────────────────── */ const Kicker = ({ children, style, color = "var(--color-text-3)" }) => (
{children}
); /* ── AI kicker (sparkle + sage mono label) ──────────────────── */ const AiKicker = ({ children, style }) => (
{children}
); /* ── Card ────────────────────────────────────────────────────── */ const Card = ({ children, ai, dashed, onClick, style = {}, pad = 16 }) => (
{ if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick(e); } }) : undefined} style={{ background: "var(--color-surface-0)", borderRadius: "var(--radius-lg)", border: ai ? "1.4px solid var(--color-primary)" : dashed ? "1.4px dashed var(--color-border-strong)" : "1.4px solid var(--color-border-strong)", boxShadow: ai ? "0 8px 24px color-mix(in oklab, var(--color-primary) 10%, transparent)" : dashed ? "none" : "var(--elev-1)", padding: pad, cursor: onClick ? "pointer" : "default", transition: "transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s cubic-bezier(.32,.72,0,1)", ...style, }}>{children}
); /* ── Field (label + control) ─────────────────────────────────── */ const Field = ({ label, children, hint, style }) => ( ); /* outline stays on so :focus-visible (gamma.css) draws the standardized terracotta keyboard-focus ring — only the resting border is styled here. The onFocus/onBlur handlers paint a pointer-focus border tint; the ring is what keyboard users see. */ const inputBase = { width: "100%", height: 44, padding: "0 14px", fontSize: 15, fontFamily: "var(--font-sans)", color: "var(--color-text-1)", background: "var(--color-surface-0)", border: "1.4px solid var(--color-border-strong)", borderRadius: "var(--radius-md)", transition: "border-color .15s", }; /* Input: explicitly pull the props we OWN (style/border behaviour) and the non-DOM/handled ones (mono, right) out of ...rest, plus inputMode — which is re-applied explicitly so it reaches the element while NEVER leaking an unstyled raw box or tripping React's attribute warning. Caller onFocus/ onBlur compose with (don't clobber) the border-tint handlers. */ const Input = ({ value, onChange, placeholder, type = "text", mono, right, inputMode, onFocus, onBlur, style = {}, ...rest }) => ( { e.target.style.borderColor = "var(--color-primary)"; if (onFocus) onFocus(e); }} onBlur={e => { e.target.style.borderColor = "var(--color-border-strong)"; if (onBlur) onBlur(e); }} style={{ ...inputBase, fontFamily: mono ? "var(--font-mono)" : "var(--font-sans)", textAlign: right ? "right" : "left", ...style }} {...rest} /> ); const Textarea = ({ value, onChange, placeholder, rows = 3, onFocus, onBlur, style = {}, ...rest }) => (