// witness-primitives.jsx — reusable parts for The Witness UI const { useState, useEffect, useRef, useMemo } = React; // ───────────────────────────────────────────────────────────── // Panel — base raised metal surface function WPanel({ children, style = {}, base = W.iron, density = 1, intensity = 0.6, angle = 87, ...rest }) { return (
{children}
); } // Sunken inset — for fields, value wells function WInset({ children, style = {}, ...rest }) { return (
{children}
); } // ───────────────────────────────────────────────────────────── // IdentityAxis — the core visual. // `progress` 0..1; as it climbs, the bar transitions from faint translucent // hairline to thick deeply embossed gold etched bar. function IdentityAxis({ progress = 0, hours = 0, cap = 1000, label = "IDENTITY", subtitle = "", orientation = "h", height = 14, showHours = true, flashTick = 0, }) { const p = Math.max(0, Math.min(1, progress)); // The "etch depth" grows with progress. const fillIntensity = 0.5 + p * 0.9; const fillDensity = 0.6 + p * 1.2; return (
{label && (
{label}
{showHours && (
{hours.toFixed(1)} / {cap.toFixed(0)} h
)}
)} {/* The bar */}
{/* Empty track tick marks */}
{/* Filled mass */}
{/* Brushed hairlines on top */}
{/* Etched edge of the fill — the "engraving" line */} {p > 0 && p < 1 && (
)} {/* Flash on increment */} {flashTick > 0 && (
)}
{subtitle && (
{subtitle}
)}
); } // ───────────────────────────────────────────────────────────── // MonoStat — high-precision data block function MonoStat({ label, value, unit, accent = false, size = "md", align = "left", }) { const sz = { sm: 18, md: 26, lg: 38, xl: 56 }[size] || 26; return (
{label && (
{label}
)}
{value} {unit && ( {unit} )}
); } // ───────────────────────────────────────────────────────────── // SerialNum — small label like "№ 0241" or "SN-A-014" function SerialNum({ children, style = {} }) { return ( {children} ); } // ───────────────────────────────────────────────────────────── // PrioTag — A/B/C priority. A = gold, B = brushed steel, C = engraved void. function PrioTag({ p = "A" }) { const isA = p === "A", isB = p === "B"; const bg = isA ? brushedGold({ intensity: 1 }) : isB ? "linear-gradient(180deg, #4a4c52, #2a2b30)" : "linear-gradient(180deg, #0d0e10, #06070a)"; const fg = isA ? W.onAccent : isB ? "#dcdad3" : W.textLo; return (
{p}
); } // ───────────────────────────────────────────────────────────── // Checkbox — engraved square with gold etched check function WCheck({ checked = false, onChange, size = 22 }) { return ( ); } // ───────────────────────────────────────────────────────────── // WToggle — chunky engraved toggle (heavier than iOS default) function WToggle({ on, onChange }) { return ( ); } // ───────────────────────────────────────────────────────────── // WCapsule — frosted graphite pill button. // Three variants — primary (slightly lighter, white text), default (subdued), // ghost (outline only). Pair with an optional `label` above for the IOST-style // meta caption (e.g. "ENTER STRICT MODE" → button "LOCK & FOCUS"). function WCapsule({ children, onClick, label, hint, variant = "default", size = "md", leading, trailing, style = {}, fullWidth = false, }) { const dims = { sm: { padY: 7, padX: 16, font: 10, gap: 8 }, md: { padY: 10, padX: 22, font: 11, gap: 9 }, lg: { padY: 13, padX: 30, font: 12, gap: 11 }, }[size]; const fills = { primary: { background: `linear-gradient(180deg, rgba(${W.midRGB},0.04) 0%, rgba(0,0,0,0.45) 100%)`, border: `0.5px solid rgba(${W.midRGB},0.7)`, boxShadow: `inset 0 0 14px rgba(${W.midRGB},0.07)`, color: W.accentHi, }, default: { background: "transparent", border: "0.5px solid rgba(255,255,255,0.16)", boxShadow: "none", color: W.text, }, ghost: { background: "transparent", border: "0.5px solid rgba(255,255,255,0.10)", boxShadow: "none", color: "rgba(232,230,224,0.55)", }, }[variant]; const wrap = { display: fullWidth ? "flex" : "inline-flex", flexDirection: "column", alignItems: "center", gap: 10, width: fullWidth ? "100%" : undefined, }; return (
{label && (
{label}
)} {hint && (
{hint}
)}
); } // ───────────────────────────────────────────────────────────── // TomatoGlyph — tomato icon using currentColor so the tab bar controls // inactive (grey) → active (amber) exactly like the other tab icons. function TomatoGlyph({ size = 22 }) { return ( {/* stem */} {/* leaf */} {/* body */} {/* inner highlight */} ); } // ───────────────────────────────────────────────────────────── // WModeToggle — 3-icon tab bar in a dark rounded container. // Active tab = solid flat accent fill. No metallic brushing. function WModeToggle({ mode = "list", onChange, onSettings }) { const tabs = [ { id: "list", icon: ( ), }, { id: "goals", icon: ( ), }, { id: "pomodoro", icon: , }, ]; return (
{tabs.map((tab) => { const on = mode === tab.id; return ( ); })}
); } // ───────────────────────────────────────────────────────────── // WCategoryHeader — top header showing the current filter, with a // chevron-down. Tapping (or pulling down on the screen) opens the sheet. function WCategoryHeader({ title, count, onOpen, sheetOpen }) { return ( ); } // ───────────────────────────────────────────────────────────── // WCategorySheet — pull-down drawer with category list. The host owns // open/close state; this just renders the visual. Drag handle is the bar // across the top — also clickable to dismiss. The whole sheet is // translucent and sits over a scrim that darkens the underlying content. function WCategorySheet({ open, onClose, sectionLabel, items = [], activeId, onPick, hint, addLabel, onAdd, }) { return (
{/* Scrim */}
{/* Sheet */}
{/* drag handle */}
{sectionLabel}
{items.map((it) => { const on = activeId === it.id; return ( ); })}
{addLabel && (
)} {hint && (
{hint}
)}
); } // ───────────────────────────────────────────────────────────── // WSegmentBar — horizontal swipeable pill bar at top of the screen. // List mode: fixed segments (已過期/今天/未來七天/蒐集箱). // Goals mode: user-defined categories + an "add" tail pill. function WSegmentBar({ items, activeId, onPick, onAdd, addLabel }) { const scrollRef = React.useRef(null); return (
{items.map((it) => { const on = activeId === it.id; return ( ); })} {addLabel && ( )}
); } // ───────────────────────────────────────────────────────────── // WDivider — hairline rule function WDivider({ style = {} }) { return (
); } // Status bar replacement for our dark frames — wrapper that sets time + style function WStatusBar({ time = "04:41" }) { return (
{time} {/* island clearance */}
{/* signal */} {[2.5, 5, 7.5, 10].map((h, i) => ( ))} {/* battery */}
); } // ───────────────────────────────────────────────────────────── // WBottomNav — bottom navigation, engraved tabs function WBottomNav({ active = "list", onChange }) { const items = [ { id: "list", label: "LEDGER", glyph: ( ), }, { id: "goals", label: "AXES", glyph: ( ), }, { id: "identity", label: "WITNESS", glyph: ( ), }, { id: "settings", label: "RECORD", glyph: ( ), }, ]; return (
{items.map((it) => { const on = active === it.id; return ( ); })}
); } // Frame keyframes for flash if ( typeof document !== "undefined" && !document.getElementById("witness-anim") ) { const s = document.createElement("style"); s.id = "witness-anim"; s.textContent = ` @keyframes witness-flash { 0%{opacity:0}20%{opacity:1}100%{opacity:0;transform:translateX(40%)} } @keyframes witness-pulse { 0%,100%{opacity:0.6}50%{opacity:1} } @keyframes witness-breathe { 0%,100%{transform:scale(1);opacity:0.55} 50%{transform:scale(1.04);opacity:0.85} } @keyframes witness-engrave { from{opacity:0;transform:translateY(2px)} to{opacity:1;transform:none} } @keyframes witness-tick { 0%,100%{opacity:0.5}50%{opacity:1} } @keyframes sugg-in { from{opacity:0;transform:translateY(-6px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} } `; document.head.appendChild(s); } Object.assign(window, { WPanel, WInset, IdentityAxis, MonoStat, SerialNum, PrioTag, WCheck, WToggle, WCapsule, TomatoGlyph, WModeToggle, WCategoryHeader, WCategorySheet, WSegmentBar, WDivider, WStatusBar, WBottomNav, });