// ui.jsx — small shared primitives
const { useEffect, useState, useRef, useMemo, useCallback } = React;
function Logo({ size = 18 }) {
return (
);
}
// Type tag — "CONSIST", "PERSPECTIVE 02", etc.
function Tag({ kind, children, style }) {
return (
{children}
);
}
// 5-dot progress indicator — Consist, Function, Perspective, Pattern, Essence
function Dots({ concept, size = 6 }) {
const f = window.levelsFilled(concept);
const order = [
{ key: "consist", cls: "f-consist", filled: f.consist },
{ key: "function", cls: "f-function", filled: f.function },
{ key: "perspective", cls: "f-perspective", filled: f.perspective },
{ key: "pattern", cls: "f-pattern", filled: f.pattern },
{ key: "essence", cls: "f-essence", filled: f.essence },
];
return (
{order.map((d) => (
))}
);
}
// IconButton with svg slot
function IconBtn({ children, onClick, title, active }) {
return (
);
}
// Tiny icons (stroke-based; system prompt says no complex SVG, simple geometric ok)
const Icons = {
Sun: (s = 14) => (
),
Moon: (s = 14) => (
),
Search: (s = 14) => (
),
Plus: (s = 14) => (
),
ArrowL: (s = 14) => (
),
Edit: (s = 14) => (
),
Eye: (s = 14) => (
),
Planet: (s = 14) => (
),
Pause: (s = 14) => (
),
Play: (s = 14) => (
),
Grid: (s = 14) => (
),
Trash: (s = 14) => (
),
Link: (s = 14) => (
),
Sliders: (s = 14) => (
),
Graph: (s = 14) => (
),
};
// Minimal placeholder image (subtly-striped) used in onboarding / empty states
function StripePlaceholder({ label, h = 120 }) {
return (
{label}
);
}
Object.assign(window, { Logo, Tag, Dots, IconBtn, Icons, StripePlaceholder });