// Shared components & icons for TeachCue
// Exports to window so other scripts can use.
const { useState, useEffect, useRef, useMemo } = React;
// ─────────────────────────────────────────────────────────────
// Icons — minimal SF-style strokes
// ─────────────────────────────────────────────────────────────
const I = {
plus: (p) => ,
back: (p) => ,
close: (p) => ,
chevR: (p) => ,
chevD: (p) => ,
record: (p) => ,
play: (p) => ,
pause: (p) => ,
stop: (p) => ,
mic: (p) => ,
camera: (p) => ,
flip: (p) => ,
image: (p) => ,
sparkle: (p) => ,
text: (p) => ,
folder: (p) => ,
share: (p) => ,
download: (p) => ,
check: (p) => ,
dot: (p) => ,
more: (p) => ,
wand: (p) => ,
grid: (p) => ,
list: (p) => ,
search: (p) => ,
aspect916: (p) => ,
aspect169: (p) => ,
aspect11: (p) => ,
rotate: (p) => ,
duplicate: (p) => ,
trash: (p) => ,
sliders: (p) => ,
layer: (p) => ,
globe: (p) => ,
book: (p) => ,
tiktok: (p) => ,
youtube: (p) => ,
instagram: (p) => ,
airdrop: (p) => ,
copy: (p) => ,
furigana: (p) => ,
palette: (p) => ,
type: (p) => ,
align: (p) => ,
pip: (p) => ,
card: (p) => ,
full: (p) => ,
tweaks: (p) => ,
};
// ─────────────────────────────────────────────────────────────
// Primitives
// ─────────────────────────────────────────────────────────────
function Chip({ children, active, onClick, icon, tone="default" }) {
const bg = active
? (tone === "accent" ? 'color-mix(in oklab, var(--accent) 22%, transparent)' : 'rgba(255,255,255,0.08)')
: 'transparent';
const bd = active
? (tone === "accent" ? 'var(--accent)' : 'var(--border-strong)')
: 'var(--border)';
const fg = active && tone === "accent" ? 'var(--accent)' : 'var(--text)';
return (
);
}
function Pill({ children, color="var(--accent)" }) {
return (
{children}
);
}
function SectionHead({ label, trailing }) {
return (
);
}
function PrimaryBtn({ children, onClick, disabled, icon, style={} }) {
return (
);
}
function GhostBtn({ children, onClick, icon, style={}, flex }) {
return (
);
}
// Striped placeholder (for AI imagery, hero slots)
function StripePlaceholder({ label="IMAGE", h=120, rounded=10, hint }) {
return (
);
}
// Ruby-text rendering (furigana above base)
function RubyText({ pairs, baseSize=22, color="#fff" }) {
// pairs: [{b: base, r: ruby}]
return (
{pairs.map((p, i) => (
{p.r && {p.r}}
{!p.r && ⠀}
{p.b}
))}
);
}
// Tiny animated waveform
function Waveform({ bars=28, height=22, color="var(--accent)" }) {
const arr = Array.from({length: bars});
return (
);
}
// Haptic feedback (visual only — brief scale)
function useHaptic() {
return () => {
if (navigator.vibrate) navigator.vibrate(8);
};
}
Object.assign(window, {
I, Chip, Pill, SectionHead, PrimaryBtn, GhostBtn, StripePlaceholder, RubyText, Waveform, useHaptic
});