// guide-modal.jsx — Guided onboarding tour
const { useState: _gd_us, useEffect: _gd_ue } = React;
// ── Illustrations ──────────────────────────────────────────────────────────────
function _IllusWelcome() {
return (
);
}
function _IllusLibrary() {
const cols = ['var(--c-essence)', 'var(--c-pattern)', 'var(--c-perspective)', 'var(--c-function)', 'var(--c-consist)'];
function Card({ x, y, filled }) {
return (
{[0,1,2,3,4].map(i => (
))}
);
}
return (
);
}
function _IllusLayers() {
const layers = [
{ color: 'var(--c-consist)', pct: 1.00 },
{ color: 'var(--c-function)', pct: 0.82 },
{ color: 'var(--c-perspective)', pct: 0.64 },
{ color: 'var(--c-pattern)', pct: 0.46 },
{ color: 'var(--c-essence)', pct: 0.28 },
];
const TW = 248;
return (
);
}
function _IllusViews() {
return (
);
}
function _IllusCards() {
const angles = [-18, -9, 0, 9, 18];
const opacities = [0.25, 0.45, 0.75, 0.45, 0.25];
return (
);
}
function _IllusCardTypes() {
function CardBase() {
return ;
}
return (
);
}
// ── Slide definitions ──────────────────────────────────────────────────────────
const _GD_SLIDES = [
{
bg: 'linear-gradient(150deg, color-mix(in oklab, var(--c-nucleus) 14%, var(--bg-sunk)) 0%, var(--bg-sunk) 100%)',
Illus: _IllusWelcome,
tag: '01 / 06',
title: 'Understanding, not just knowing',
body: 'Senes helps you truly understand concepts — not just collect information about them. Each concept you explore is built through five structured layers, from what something is made of all the way to your own crystallized insight.',
},
{
bg: 'linear-gradient(150deg, color-mix(in oklab, var(--c-consist) 13%, var(--bg-sunk)) 0%, var(--bg-sunk) 100%)',
Illus: _IllusLibrary,
tag: '02 / 06',
title: 'Your concept library',
body: 'The Library is your home. Browse and search all your concepts, filter by completion, and add new ones with a quick phrase. The five-dot indicator on each card shows how deeply you\'ve explored that concept.',
},
{
bg: 'linear-gradient(150deg, color-mix(in oklab, var(--c-function) 13%, var(--bg-sunk)) 0%, var(--bg-sunk) 100%)',
Illus: _IllusLayers,
tag: '03 / 06',
title: 'Build understanding in layers',
body: 'Every concept has five layers. Start with what it\'s made of (Consist) and how it works (Function). Add raw Perspectives — observations and experiences. Group them into Patterns. Then crystallize everything into an Essence — your own definition of what this concept truly means.',
},
{
bg: 'linear-gradient(150deg, color-mix(in oklab, var(--c-pattern) 13%, var(--bg-sunk)) 0%, var(--bg-sunk) 100%)',
Illus: _IllusViews,
tag: '04 / 06',
title: 'See your knowledge as a system',
body: 'Switch between three visual views. Solar shows how perspectives and patterns orbit toward an essence. Graph maps every link between concepts, letting you see your whole knowledge web. Group clusters related concepts by theme, state, or category.',
},
{
bg: 'linear-gradient(150deg, color-mix(in oklab, var(--c-function) 13%, var(--bg-sunk)) 0%, var(--bg-sunk) 100%)',
Illus: _IllusCardTypes,
tag: '05 / 06',
title: 'Five types of cards',
body: 'Cards come in five forms. Note captures free-form text. Image stores a photo or drawing. Quote saves a passage that stayed with you. Link previews any URL with its title and image. Video embeds a clip directly in your concept.',
},
{
bg: 'linear-gradient(150deg, color-mix(in oklab, var(--c-perspective) 13%, var(--bg-sunk)) 0%, var(--bg-sunk) 100%)',
Illus: _IllusCards,
tag: '06 / 06',
title: 'Every insight becomes a card',
body: 'Each element of a concept — a perspective, a pattern, an image, a quote, a link — can become a flashcard. Open the Card view from any concept page to review, deepen, and build on what you\'ve understood.',
},
];
// ── Component ──────────────────────────────────────────────────────────────────
function GuideModal({ onClose }) {
const [idx, setIdx] = _gd_us(0);
function go(n) { setIdx(Math.max(0, Math.min(_GD_SLIDES.length - 1, n))); }
_gd_ue(() => {
function onKey(e) {
if (e.key === 'ArrowRight' || e.key === 'ArrowDown') go(idx + 1);
if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') go(idx - 1);
if (e.key === 'Escape') onClose();
}
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [idx]);
const slide = _GD_SLIDES[idx];
const isLast = idx === _GD_SLIDES.length - 1;
return (
{ if (e.target === e.currentTarget) onClose(); }}
>