// Low-level primitives shared across views.
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Alt / Option (⌥) glyph — flat, minimal stroke drawing.
function AltGlyph({ size = 40, color = "currentColor", withWordmark = false }) {
const s = size;
return (
);
}
// Small inline Alt glyph for use in body copy
function AltGlyphInline({ size = 14, color = "currentColor" }) {
return (
);
}
// Keycap — single key rendered as a flat, minimal keycap. Label can be
// a string or a ReactNode (use for the Alt key).
function Keycap({ label, width = 52, height = 52, pressed = false, soft = false, style = {} }) {
const isGlyph = typeof label !== "string";
return (
{isGlyph ? (
{label}
) : (
{label}
)}
);
}
// Pill — reusable button
function Pill({ children, onClick, active, icon, compact, title }) {
return (
);
}
// IconButton — square-ish ghost button
function IconButton({ icon, onClick, title, size = 28, active }) {
const [hover, setHover] = useState(false);
return (
);
}
// Field — labeled input row (right panel style)
function Field({ label, children, hint }) {
return (
{label && (
{label}
)}
{children}
{hint && (
{hint}
)}
{children}
);
}
// Switch
function Toggle({ on, onChange, size = "md" }) {
const w = size === "sm" ? 30 : 36;
const h = size === "sm" ? 18 : 20;
const knob = h - 4;
return (
);
}
// Segmented — pill-inside-shell, two options
function Segmented({ options, value, onChange }) {
return (
{options.map((o) => {
const active = o.value === value;
return (
);
})}
);
}
// Tabs — underline
function Tabs({ tabs, value, onChange }) {
return (
{tabs.map((t) => {
const active = t.value === value;
return (
);
})}
);
}
Object.assign(window, { Keycap, AltGlyph, AltGlyphInline, Pill, IconButton, Field, InputShell, Toggle, Segmented, Tabs });