);
}
// Variant B · Classic chrome — Win95 / DOS-window feel. Title text on the
// left with a small app glyph, a single beveled [×] close button on the
// right glowing red. No traffic lights.
function ExTitleBarMacOS({ theme, breadcrumb, onBack }) {
return ;
}
function ExTitleBarClassic({ theme, breadcrumb, onBack }) {
const c = theme;
return (
■
matrix.fs — {breadcrumb}
);
}
// Variant C · TUI box — single-row ASCII box top with bracketed sections.
function ExTitleBarTUI({ theme, breadcrumb, onBack }) {
const c = theme;
return (
);
}
// Variant D · Dots — 5-dot proficiency indicator. Most visually compact
// way to convey "how well" without numbers.
function SkillsDots({ theme }) {
const c = theme;
return (
);
}
// Variant F · Tags + fill — chips have an internal gradient fill that
// represents proficiency (% width). Looks like a progress bar inside the
// chip itself. One signal: shape + horizontal fill amount.
function SkillsTagsFill({ theme }) {
const c = theme;
return (
);
}
// Variant G · Mini bar — refines D direction. Continuous CSS bar instead
// of discrete dots; sits right under the skill name. More precise.
function SkillsMiniBar({ theme }) {
const c = theme;
return (
);
}
// Variant H · Tree (pure) — ASCII filesystem tree. Cleaned up: tier tags
// removed per user pref, the tree carries itself.
function SkillsTree({ theme }) {
const c = theme;
return (
{item}
)} />;
}
// Shared chrome for all tree variants. Takes a renderLeaf({item, idx, catIdx})
// callback that returns the leaf row's inner JSX (after the connector glyph).
function SkillsTreeBase({ theme, prompt, sectionLabel, renderLeaf, extraOverlay, cols = 2 }) {
const c = theme;
return (
{/* CSS multi-column flow so categories pack tightly within each
column without grid-row gaps. `break-inside: avoid` on each
category keeps a label + its leaves together. */}
{SKILLS.map((cat, ci) => (
├── {cat.label}/
{cat.items.map((item, ii) => {
const last = ii === cat.items.length - 1;
return (
{`│ ${last ? '└──' : '├──'} `}
{renderLeaf({ item, ii, ci, cat, last })}
);
})}
))}
{extraOverlay}
);
}
// Variant I · Tree + hex addresses — memory-dump look
function SkillsTreeHex({ theme }) {
const c = theme;
// Build a stable address index across all leaves at render time.
let addr = 0x1F2A;
const addrFor = {};
SKILLS.forEach((cat) => {
cat.items.forEach((item) => {
addr += 0x10;
addrFor[`${cat.label}::${item}`] = '0x' + addr.toString(16).toUpperCase().padStart(4, '0');
});
});
return (
(
<>
{addrFor[`${cat.label}::${item}`]}{' '}{item}
)}
/>
);
}
// Variant J · Tree + systemd status — service-status vibe
function SkillsTreeStatus({ theme }) {
const c = theme;
return (
(
<>
{item}[ OK ]
)}
/>
);
}
// Variant K · Tree + live glitch — at most one char on one item flickers
// to katakana ~every 1.3s, holds for 250ms, then clears. Subtle "alive"
// feel without crowding the screen.
function SkillsTreeGlitch({ theme, cols = 2 }) {
const c = theme;
const charset = (RAIN_CHARS[c.chars] || RAIN_CHARS.classic).split('');
const [glitchMap, setGlitchMap] = useEx({});
useExFX(() => {
// Flatten all leaf strings once; pick one at random per tick.
const allItems = [];
SKILLS.forEach((cat) => cat.items.forEach((item) => allItems.push(item)));
let clearTimer;
const iv = setInterval(() => {
const item = allItems[Math.floor(Math.random() * allItems.length)];
const charIdx = Math.floor(Math.random() * item.length);
const ch = charset[Math.floor(Math.random() * charset.length)];
setGlitchMap({ [item]: { charIdx, ch } });
clearTimeout(clearTimer);
clearTimer = setTimeout(() => setGlitchMap({}), 250);
}, 1300);
return () => { clearInterval(iv); clearTimeout(clearTimer); };
}, []);
return (
{
const g = glitchMap[item];
if (!g) return {item};
return (
{item.slice(0, g.charIdx)}
{g.ch}
{item.slice(g.charIdx + 1)}
);
}}
cols={cols}
/>
);
}
// Variant L · Tree + scanning cursor — single highlighted row traverses
// through all leaves automatically.
function SkillsTreeScan({ theme }) {
const c = theme;
// Build a flat list of (catIdx, itemIdx) for the cursor to step through.
const allKeys = [];
SKILLS.forEach((cat, ci) => {
cat.items.forEach((_, ii) => allKeys.push(`${ci}-${ii}`));
});
const [cursorKey, setCursorKey] = useEx(allKeys[0]);
useExFX(() => {
let idx = 0;
const iv = setInterval(() => {
idx = (idx + 1) % allKeys.length;
setCursorKey(allKeys[idx]);
}, 320);
return () => clearInterval(iv);
}, []);
return (
{
const isCursor = `${ci}-${ii}` === cursorKey;
return (
<>
{item}
{isCursor && (
◀
)}
);
}}
/>
);
}
// Variant I · Stars — familiar ★★★★☆ pattern. Reads instantly, no
// learning curve. Pairs well with the terminal aesthetic via mono glyphs.
function SkillsStars({ theme }) {
const c = theme;
return (
);
}
// Original single-row helper kept for reference but unused.
function SkillRow_unused({ label, pct, theme }) {
const c = theme;
const blocks = 18;
const filled = Math.round((pct / 100) * blocks);
return (
{label}
{'█'.repeat(filled)}{'░'.repeat(blocks - filled)}
{pct}%
);
}
function ProjectsView({ theme }) {
const c = theme;
const [open, setOpen] = useEx(null);
const [selected, setSelected] = useEx(0);
// Same up/down/Enter navigation as the root file listing. Up/Down change
// the highlighted row; Enter expands or collapses it; Esc-style exit is
// handled higher up in the explorer. We intentionally don't trap focus —
// the input listener is window-scoped and only consumes keys when this
// view is mounted.
useExFX(() => {
const onKey = (e) => {
if (e.key === 'ArrowDown') {
e.preventDefault();
setSelected((i) => Math.min(PROJECTS.length - 1, i + 1));
} else if (e.key === 'ArrowUp') {
e.preventDefault();
setSelected((i) => Math.max(0, i - 1));
} else if (e.key === 'Enter') {
e.preventDefault();
const id = PROJECTS[selected]?.id;
if (id != null) setOpen((o) => (o === id ? null : id));
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [selected]);
return (
total {PROJECTS.length} · use ↑↓ Enter to navigate, or click a row.
{PROJECTS.map((p, i) => {
const isOpen = open === p.id;
const isFocus = i === selected;
return (