// Icon library — reusable animated SVG icons users can pick from when adding apps.
// Each entry: { id, name, category, render: () => ... }
// All icons hook into the .tile:hover CSS pattern via shared classes.
const Icon = ({ children, cls = '' }) => (
);
const ICONS = [
// ─── Time ────────────────────────────────────────────
{ id: 'clock', name: 'Clock', category: 'time', render: () => (
)},
{ id: 'hourglass', name: 'Hourglass', category: 'time', render: () => (
)},
{ id: 'tomato', name: 'Tomato', category: 'time', render: () => (
)},
{ id: 'stopwatch', name: 'Stopwatch', category: 'time', render: () => (
)},
// ─── Money ───────────────────────────────────────────
{ id: 'coins', name: 'Stacked coins', category: 'money', render: () => (
$
)},
{ id: 'wallet', name: 'Wallet', category: 'money', render: () => (
)},
{ id: 'chart-up', name: 'Chart up', category: 'money', render: () => (
)},
// ─── Language ────────────────────────────────────────
{ id: 'eth', name: 'Eth (ð) — voiced theta', category: 'language', render: () => (
{/* Eth letter: oval body with crossed stem at top */}
)},
{ id: 'speech', name: 'Speech bubble', category: 'language', render: () => (
)},
{ id: 'globe', name: 'Globe', category: 'language', render: () => (
)},
// ─── Thinking / structure ────────────────────────────
{ id: 'graph', name: 'Argument graph', category: 'thinking', render: () => (
)},
{ id: 'brain', name: 'Brain', category: 'thinking', render: () => (
)},
{ id: 'tree', name: 'Tree', category: 'thinking', render: () => (
)},
// ─── Utility ─────────────────────────────────────────
{ id: 'arrows', name: 'Convert arrows', category: 'utility', render: () => (
)},
{ id: 'cipher', name: 'Cipher wheel', category: 'utility', render: () => (
A
N
)},
{ id: 'key', name: 'Key', category: 'utility', render: () => (
)},
{ id: 'compass', name: 'Compass', category: 'utility', render: () => (
)},
// ─── Writing ─────────────────────────────────────────
{ id: 'pencil-lines', name: 'Pencil & lines', category: 'writing', render: () => (
)},
{ id: 'bars', name: 'Bar chart', category: 'writing', render: () => (
)},
{ id: 'doc', name: 'Document', category: 'writing', render: () => (
)},
// ─── Design ──────────────────────────────────────────
{ id: 'swatches', name: 'Swatches', category: 'design', render: () => (
)},
{ id: 'palette', name: 'Palette', category: 'design', render: () => (
)},
{ id: 'eyedropper', name: 'Eyedropper', category: 'design', render: () => (
)},
// ─── Dev ─────────────────────────────────────────────
{ id: 'regex', name: 'Regex', category: 'dev', render: () => (
/.*/
)},
{ id: 'braces', name: 'Braces { }', category: 'dev', render: () => (
)},
{ id: 'terminal', name: 'Terminal', category: 'dev', render: () => (
)},
{ id: 'git', name: 'Git branch', category: 'dev', render: () => (
)},
// ─── Misc ────────────────────────────────────────────
{ id: 'sparkle', name: 'Sparkle', category: 'misc', render: () => (
)},
{ id: 'heart', name: 'Heart', category: 'misc', render: () => (
)},
{ id: 'bolt', name: 'Bolt', category: 'misc', render: () => (
)},
{ id: 'leaf', name: 'Leaf', category: 'misc', render: () => (
)},
{ id: 'star', name: 'Star', category: 'misc', render: () => (
)},
{ id: 'cube', name: 'Cube', category: 'misc', render: () => (
)},
{ id: 'wave', name: 'Wave', category: 'misc', render: () => (
)},
];
const ICON_BY_ID = Object.fromEntries(ICONS.map(i => [i.id, i]));
window.ICONS = ICONS;
window.ICON_BY_ID = ICON_BY_ID;