// Hive member-app — shared UI primitives (web recreations of the RN components)
const { useState, useRef, useEffect } = React;
// ── Animated CRT scanlines + flicker overlay ──────────────────
function Scanlines({ corners = false }) {
return (
{corners && (
N-SEA
0X-88
T-MINUS_0
V0.9
)}
);
}
function cornerStyle(pos) {
return {
position: "absolute", zIndex: 31, fontFamily: "var(--font-sans)",
fontSize: 9, letterSpacing: "var(--ls-wide)", color: "var(--text-dim)",
pointerEvents: "none", ...pos,
};
}
// ── Section label "// LABEL" ──────────────────────────────────
function SectionLabel({ children, tone = "green", slash = true, style }) {
return (
{slash ? "// " : ""}{children}
);
}
// ── Screen header (HIVE / FEED · sub) ─────────────────────────
function ScreenHeader({ label, sub }) {
return (
{label}
{sub ? {sub} : null}
);
}
// ── Glitch button ─────────────────────────────────────────────
function GlitchButton({ title = "ENTER", onClick, block = true, style }) {
const [hot, setHot] = useState(false);
return (
);
}
// ── Genre chip (toggle) ───────────────────────────────────────
function GenreChip({ label, selected, onPress }) {
return (
);
}
// ── Genre tag (read-only) ─────────────────────────────────────
function Tag({ label, color = "var(--accent-secondary)" }) {
return (
{label}
);
}
// ── Corner-bracket frame ──────────────────────────────────────
function CornerFrame({ children, color = "var(--accent-primary)", size = 12, thickness = 1.5, bordered = false, padding = "var(--sp-lg)", style }) {
const c = (extra) => ({ position: "absolute", width: size, height: size, borderColor: color, borderStyle: "solid", borderWidth: 0, ...extra });
return (
{children}
);
}
// ── Floating pill tab bar (adaptive to tab count) ─────────────
function TabBar({ active, onChange, tabs = ["FEED", "PASSES", "PROFILE"], badges = {} }) {
const idx = Math.max(0, tabs.indexOf(active));
const many = tabs.length >= 4;
return (
{tabs.map((t) => {
const on = t === active;
return (
);
})}
);
}
// ── Avatar — square monogram tile (collective / member) ───────
function Avatar({ name = "", size = 40, glow = false, color = "var(--accent-primary)" }) {
const initials = name.replace(/^@/, "").split(/[\s.]+/).map((w) => w[0] || "").join("").slice(0, 2).toUpperCase();
return (
{initials}
);
}
// ── StatusBadge — bracketed state readout ─────────────────────
const STATUS_TONE = {
member: "var(--accent-primary)", approved: "var(--accent-primary)", synced: "var(--accent-primary)", active: "var(--accent-primary)", used: "var(--text-dim)",
invited: "var(--accent-secondary)", pending: "var(--accent-secondary)", applied: "var(--accent-secondary)",
declined: "var(--text-secondary)", blocked: "var(--text-secondary)", "not connected": "var(--text-dim)",
};
function StatusBadge({ status, style }) {
const color = STATUS_TONE[status] || "var(--text-secondary)";
return (
[{status}]
);
}
// ── ListRow — generic tappable row with hairline ──────────────
function ListRow({ avatar, title, subtitle, right, onPress, accent = false, dim = false, style }) {
return (
{accent &&
}
{avatar}
{title}
{subtitle ?
{subtitle}
: null}
{right ?
{right}
: null}
{cells.map((on, i) => )}
);
}
// ── ChatBubble ────────────────────────────────────────────────
function ChatBubble({ from, text, time }) {
const mine = from === "me";
return (
);
}
// Standard scroll container for a screen (clears status bar + tab bar)
function Screen({ children, pad = true, bottom = 120 }) {
return (
{children}
);
}
Object.assign(window, {
Scanlines, SectionLabel, ScreenHeader, GlitchButton, GenreChip, Tag, CornerFrame, TabBar, Screen,
Avatar, StatusBadge, ListRow, BackButton, QRBlock, ChatBubble,
});