// app-shell.jsx — shared primitives, icons, tokens for all app screens
// Loaded BEFORE the screen files. Exports to window.
const T = {
bg: '#fafafa',
surface: '#ffffff',
surface2: '#f4f4f5',
surface3: '#f9fafb',
border: '#e5e7eb',
borderStrong: '#d1d5db',
ink: '#0f172a',
ink2: '#334155',
ink3: '#64748b',
ink4: '#94a3b8',
inkMute: '#cbd5e1',
ok: '#15803d',
warn: '#a16207',
bad: '#991b1b',
serif: "'Newsreader', 'Source Serif 4', Georgia, serif",
sans: "'Geist', ui-sans-serif, system-ui, sans-serif",
mono: "'Geist Mono', ui-monospace, Menlo, monospace",
};
// ─────────────────────────────────────────────────────────── Icons
const Icon = ({ name, size = 16, stroke = 1.4, color = 'currentColor' }) => {
const s = { width: size, height: size, stroke: color, fill: 'none', strokeWidth: stroke, strokeLinecap: 'round', strokeLinejoin: 'round' };
switch (name) {
case 'search': return ;
case 'plus': return ;
case 'chevR': return ;
case 'chevD': return ;
case 'chevL': return ;
case 'sparkle': return ;
case 'check': return ;
case 'x': return ;
case 'doc': return ;
case 'blocks': return ;
case 'people': return ;
case 'gear': return ;
case 'map': return ;
case 'down': return ;
case 'up': return ;
case 'grip': return ;
case 'more': return ;
case 'edit': return ;
case 'export': return ;
case 'preview': return ;
case 'pin': return ;
case 'filter': return ;
case 'arr-r': return ;
case 'arr-l': return ;
case 'home': return ;
case 'pl': return ;
case 'chevU': return ;
case 'brand': return ;
case 'building': return ;
case 'mail': return ;
case 'lock': return ;
case 'sun': return ;
case 'trash': return ;
default: return null;
}
};
// ─────────────────────────────────────────────────────────── App shell
const AppShell = ({ children, breadcrumbs = [], activeNav = 'operaty', rightChrome, navCollapsed = false }) => (
{/* Topbar */}
Szacownia
{breadcrumbs.length > 0 &&
}
{breadcrumbs.length > 0 &&
}
{rightChrome}
Szukaj operatów, bloków…
JK
{/* Sidebar */}
{/* Content */}
{children}
{!collapsed && {label}}
{!collapsed && badge && {badge}}
);
const Breadcrumb = ({ items }) => (
{items.map((it, i) => (
{i > 0 && }
{it}
))}
);
// ─────────────────────────────────────────────────────────── Primitives
const Caps = ({ children, style }) => (
{children}
);
const Pill = ({ children, tone = 'neutral' }) => {
const dot = { neutral: T.ink3, ok: T.ok, warn: T.warn, bad: T.bad }[tone];
return (
{children}
);
};
const Btn = ({ children, variant = 'primary', size = 'md', icon, ...rest }) => {
const h = size === 'sm' ? 28 : 34;
const fs = size === 'sm' ? 12.5 : 13.5;
const px = size === 'sm' ? 10 : 14;
const styles = {
primary: { background: T.ink, color: '#fff', border: '1px solid transparent' },
ghost: { background: 'transparent', color: T.ink, border: `1px solid ${T.borderStrong}` },
quiet: { background: 'transparent', color: T.ink2, border: '1px solid transparent' },
danger: { background: 'transparent', color: T.bad, border: `1px solid ${T.border}` },
}[variant];
return (
);
};
const Card = ({ children, style }) => (
{children}
);
const Hr = ({ vertical, style }) => (
vertical
?
:
);
// Export to window
Object.assign(window, { T, Icon, AppShell, NavItem, Breadcrumb, Caps, Pill, Btn, Card, Hr });