Blame · Line-by-line history

`ui.tsx`

Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.

ui.tsxBlame737 lines · 2 contributors

Normal view Raw

45e31d0Claude	1	/**
	2	* Core UI Component Library — gluecron design system.
	3	*
	4	* Pure components. No raw HTML in routes. Every visual element
	5	* is a composable, typed, reusable component.
	6	*/
	7
	8	import type { FC, PropsWithChildren } from "hono/jsx";
	9	import { html } from "hono/html";
	10
	11	// ─── Primitive Components ───────────────────────────────────────────────────
	12
	13	/** Flex container with gap and alignment */
	14	export const Flex: FC<
	15	PropsWithChildren<{
	16	direction?: "row" \| "column";
	17	gap?: number;
	18	align?: string;
	19	justify?: string;
	20	wrap?: boolean;
	21	class?: string;
	22	style?: string;
	23	}>
	24	> = ({ children, direction = "row", gap = 0, align, justify, wrap, class: cls, style }) => (
	25	<div
	26	class={cls \|\| ""}
	27	style={`display:flex;flex-direction:${direction};${gap ? `gap:${gap}px;` : ""}${align ? `align-items:${align};` : ""}${justify ? `justify-content:${justify};` : ""}${wrap ? "flex-wrap:wrap;" : ""}${style \|\| ""}`}
	28	>
	29	{children}
	30	</div>
	31	);
	32
	33	/** Grid container */
	34	export const Grid: FC<
	35	PropsWithChildren<{ cols?: string; gap?: number; class?: string }>
	36	> = ({ children, cols = "repeat(auto-fill, minmax(340px, 1fr))", gap = 16, class: cls }) => (
	37	<div class={cls \|\| "card-grid"} style={`display:grid;grid-template-columns:${cols};gap:${gap}px;`}>
	38	{children}
	39	</div>
	40	);
	41
	42	/** Spacer element */
	43	export const Spacer: FC<{ size?: number }> = ({ size = 16 }) => (
	44	<div style={`height:${size}px`} />
	45	);
	46
	47	/** Text with semantic styling */
	48	export const Text: FC<
	49	PropsWithChildren<{
	50	size?: number;
	51	color?: string;
	52	weight?: number \| string;
	53	mono?: boolean;
	54	muted?: boolean;
	55	style?: string;
	56	}>
	57	> = ({ children, size, color, weight, mono, muted, style }) => (
	58	<span
	59	style={`${size ? `font-size:${size}px;` : ""}${color ? `color:${color};` : ""}${weight ? `font-weight:${weight};` : ""}${mono ? "font-family:var(--font-mono);" : ""}${muted ? "color:var(--text-muted);" : ""}${style \|\| ""}`}
	60	>
	61	{children}
	62	</span>
	63	);
	64
	65	// ─── Buttons ────────────────────────────────────────────────────────────────
	66
	67	export const Button: FC<
	68	PropsWithChildren<{
	69	variant?: "default" \| "primary" \| "danger" \| "success" \| "ghost";
	70	size?: "sm" \| "md" \| "lg";
	71	type?: "button" \| "submit" \| "reset";
	72	disabled?: boolean;
	73	formaction?: string;
	74	class?: string;
	75	}>
	76	> = ({ children, variant = "default", size = "md", type = "button", disabled, formaction, class: cls }: any) => {
	77	const variantCls =
	78	variant === "primary" ? " btn-primary" :
	79	variant === "danger" ? " btn-danger" :
	80	variant === "success" ? " btn-success" :
	81	variant === "ghost" ? " btn-ghost" : "";
	82	const sizeCls = size === "sm" ? " btn-sm" : size === "lg" ? " btn-lg" : "";
	83	return (
	84	<button
	85	type={type}
	86	class={`btn${variantCls}${sizeCls}${cls ? ` ${cls}` : ""}`}
	87	disabled={disabled}
	88	formaction={formaction}
	89	>
	90	{children}
	91	</button>
	92	);
	93	};
	94
	95	export const LinkButton: FC<
	96	PropsWithChildren<{
	97	href: string;
	98	variant?: "default" \| "primary" \| "danger" \| "success";
	99	size?: "sm" \| "md";
	100	}>
	101	> = ({ children, href, variant = "default", size = "md" }) => {
	102	const variantCls = variant === "primary" ? " btn-primary" : variant === "danger" ? " btn-danger" : variant === "success" ? " btn-success" : "";
	103	const sizeCls = size === "sm" ? " btn-sm" : "";
	104	return (
	105	<a href={href} class={`btn${variantCls}${sizeCls}`}>
	106	{children}
	107	</a>
	108	);
	109	};
	110
	111	// ─── Forms ──────────────────────────────────────────────────────────────────
	112
	113	export const Form: FC<
	114	PropsWithChildren<{
	115	action: string;
	116	method?: string;
	117	csrfToken?: string;
	118	class?: string;
2316901Claude	119	id?: string;
	120	encType?: string;
45e31d0Claude	121	}>
2316901Claude	122	> = ({ children, action, method = "POST", csrfToken, class: cls, id, encType }) => (
	123	<form
	124	method={method.toLowerCase() as any}
	125	action={action}
	126	class={cls \|\| ""}
	127	id={id}
	128	enctype={encType as any}
	129	>
45e31d0Claude	130	{csrfToken && <input type="hidden" name="_csrf" value={csrfToken} />}
	131	{children}
	132	</form>
	133	);
	134
	135	export const FormGroup: FC<
	136	PropsWithChildren<{ label?: string; htmlFor?: string; hint?: string }>
	137	> = ({ children, label, htmlFor, hint }) => (
	138	<div class="form-group">
	139	{label && <label for={htmlFor}>{label}</label>}
	140	{children}
	141	{hint && <Text size={12} muted>{hint}</Text>}
	142	</div>
	143	);
	144
	145	export const Input: FC<{
	146	name: string;
	147	type?: string;
	148	id?: string;
	149	value?: string;
	150	placeholder?: string;
	151	required?: boolean;
	152	disabled?: boolean;
	153	pattern?: string;
	154	autocomplete?: string;
	155	autofocus?: boolean;
bb0f894Claude	156	minLength?: number;
	157	maxLength?: number;
45e31d0Claude	158	style?: string;
2c3ba6ecopilot-swe-agent[bot]	159	"aria-label"?: string;
45e31d0Claude	160	}> = (props) => (
	161	<input
	162	type={props.type \|\| "text"}
	163	id={props.id \|\| props.name}
	164	name={props.name}
	165	value={props.value}
	166	placeholder={props.placeholder}
	167	required={props.required}
	168	disabled={props.disabled}
	169	pattern={props.pattern}
	170	autocomplete={props.autocomplete}
	171	autofocus={props.autofocus}
bb0f894Claude	172	minLength={props.minLength}
	173	maxLength={props.maxLength}
45e31d0Claude	174	class={props.disabled ? "input-disabled" : ""}
	175	style={props.style}
2c3ba6ecopilot-swe-agent[bot]	176	aria-label={props["aria-label"] \|\| props.placeholder \|\| props.name}
45e31d0Claude	177	/>
	178	);
	179
	180	export const TextArea: FC<{
	181	name: string;
	182	id?: string;
	183	rows?: number;
	184	placeholder?: string;
	185	required?: boolean;
	186	value?: string;
	187	mono?: boolean;
	188	style?: string;
	189	}> = (props) => (
	190	<textarea
	191	id={props.id \|\| props.name}
	192	name={props.name}
	193	rows={props.rows \|\| 6}
	194	placeholder={props.placeholder}
	195	required={props.required}
	196	style={`${props.mono ? "font-family:var(--font-mono);font-size:13px;" : ""}${props.style \|\| ""}`}
	197	>
	198	{props.value}
	199	</textarea>
	200	);
	201
	202	export const Select: FC<
	203	PropsWithChildren<{ name: string; id?: string; value?: string }>
	204	> = ({ children, name, id, value }) => (
	205	<select id={id \|\| name} name={name} value={value}>
	206	{children}
	207	</select>
	208	);
	209
	210	// ─── Feedback Components ────────────────────────────────────────────────────
	211
	212	export const Alert: FC<
	213	PropsWithChildren<{ variant: "error" \| "success" \| "warning" \| "info" }>
	214	> = ({ children, variant }) => {
	215	const cls =
	216	variant === "error" ? "auth-error" :
	217	variant === "success" ? "auth-success" :
	218	variant === "warning" ? "alert-warning" :
	219	"alert-info";
	220	return <div class={cls}>{children}</div>;
	221	};
	222
	223	export const EmptyState: FC<
	224	PropsWithChildren<{ title?: string; icon?: string }>
	225	> = ({ children, title, icon }) => (
	226	<div class="empty-state">
	227	{icon && <div style="font-size:48px;margin-bottom:12px">{icon}</div>}
	228	{title && <h2>{title}</h2>}
	229	{children}
	230	</div>
	231	);
	232
	233	export const Badge: FC<
	234	PropsWithChildren<{
	235	variant?: "default" \| "open" \| "closed" \| "merged" \| "success" \| "danger" \| "warning";
	236	style?: string;
	237	}>
	238	> = ({ children, variant = "default", style }) => {
	239	const cls =
	240	variant === "open" ? "badge-open" :
	241	variant === "closed" ? "badge-closed" :
	242	variant === "merged" ? "badge-merged" :
	243	variant === "success" ? "badge-success" :
	244	variant === "danger" ? "badge-danger" :
	245	variant === "warning" ? "badge-warning" :
	246	"badge";
	247	return <span class={`issue-badge ${cls}`} style={style}>{children}</span>;
	248	};
	249
	250	// ─── Card Components ────────────────────────────────────────────────────────
	251
c63b860Claude	252	/**
	253	* Card — the canonical panel primitive.
	254	*
	255	* Block O3: extended with `padding` and `variant` props so every "panel"
	256	* style across the app maps to a single CSS contract.
	257	*/
	258	export const Card: FC<
	259	PropsWithChildren<{
	260	padding?: "none" \| "sm" \| "md" \| "lg";
	261	variant?: "default" \| "elevated" \| "gradient";
	262	class?: string;
	263	style?: string;
	264	}>
	265	> = ({ children, padding, variant, class: cls, style }) => {
	266	const padCls =
	267	padding === "none" ? " card-p-none" :
	268	padding === "sm" ? " card-p-sm" :
	269	padding === "md" ? " card-p-md" :
	270	padding === "lg" ? " card-p-lg" :
	271	"";
	272	const variantCls =
	273	variant === "elevated" ? " card-elevated" :
	274	variant === "gradient" ? " card-gradient" :
	275	"";
	276	return (
	277	<div
	278	class={`card${padCls}${variantCls}${cls ? ` ${cls}` : ""}`}
	279	style={style}
	280	>
	281	{children}
	282	</div>
	283	);
	284	};
45e31d0Claude	285
	286	export const CardMeta: FC<PropsWithChildren> = ({ children }) => (
	287	<div class="card-meta">{children}</div>
	288	);
	289
	290	// ─── Navigation Components ──────────────────────────────────────────────────
	291
	292	export const TabNav: FC<{
	293	tabs: Array<{ label: string; href: string; active?: boolean; count?: number }>;
	294	}> = ({ tabs }) => (
	295	<div class="repo-nav">
	296	{tabs.map((tab) => (
	297	<a href={tab.href} class={tab.active ? "active" : ""}>
	298	{tab.label}
	299	{tab.count !== undefined && (
	300	<span class="tab-count">{tab.count}</span>
	301	)}
	302	</a>
	303	))}
	304	</div>
	305	);
	306
	307	export const FilterTabs: FC<{
	308	tabs: Array<{ label: string; href: string; active?: boolean }>;
	309	}> = ({ tabs }) => (
	310	<div class="issue-tabs">
	311	{tabs.map((tab) => (
	312	<a href={tab.href} class={tab.active ? "active" : ""}>
	313	{tab.label}
	314	</a>
	315	))}
	316	</div>
	317	);
	318
	319	// ─── Page Layout Components ─────────────────────────────────────────────────
	320
	321	export const PageHeader: FC<
	322	PropsWithChildren<{ title: string; actions?: any }>
	323	> = ({ title, actions, children }) => (
	324	<Flex justify="space-between" align="center" style="margin-bottom:20px">
	325	<h2>{title}</h2>
	326	{actions}
	327	{children}
	328	</Flex>
	329	);
	330
	331	export const Section: FC<
	332	PropsWithChildren<{ title?: string; style?: string }>
	333	> = ({ children, title, style }) => (
	334	<div style={`margin-bottom:24px;${style \|\| ""}`}>
	335	{title && <h3 style="margin-bottom:12px">{title}</h3>}
	336	{children}
	337	</div>
	338	);
	339
	340	export const Container: FC<
	341	PropsWithChildren<{ maxWidth?: number; class?: string }>
	342	> = ({ children, maxWidth = 800, class: cls }) => (
	343	<div class={cls \|\| ""} style={`max-width:${maxWidth}px`}>
	344	{children}
	345	</div>
	346	);
	347
	348	// ─── Data Display Components ────────────────────────────────────────────────
	349
	350	export const StatGroup: FC<{
	351	stats: Array<{ label: string; value: string \| number; color?: string }>;
	352	}> = ({ stats }) => (
	353	<Flex gap={24} wrap>
	354	{stats.map((stat) => (
	355	<div>
	356	<div style={`font-size:24px;font-weight:700;${stat.color ? `color:${stat.color};` : ""}`}>
	357	{stat.value}
	358	</div>
	359	<Text size={13} muted>{stat.label}</Text>
	360	</div>
	361	))}
	362	</Flex>
	363	);
	364
	365	export const KeyValue: FC<{ label: string; value: string \| number }> = ({
	366	label,
	367	value,
	368	}) => (
	369	<Flex justify="space-between" align="center" style="padding:8px 0;border-bottom:1px solid var(--border)">
	370	<Text size={14} muted>{label}</Text>
	371	<Text size={14}>{String(value)}</Text>
	372	</Flex>
	373	);
	374
	375	export const DataTable: FC<{
	376	headers: string[];
	377	rows: Array<Array<string \| any>>;
	378	class?: string;
	379	}> = ({ headers, rows, class: cls }) => (
	380	<table class={cls \|\| "file-table"}>
	381	<thead>
	382	<tr>
	383	{headers.map((h) => (
	384	<th style="padding:8px 16px;text-align:left;font-size:13px;color:var(--text-muted);border-bottom:1px solid var(--border)">{h}</th>
	385	))}
	386	</tr>
	387	</thead>
	388	<tbody>
	389	{rows.map((row) => (
	390	<tr>
	391	{row.map((cell) => (
	392	<td style="padding:8px 16px;font-size:14px">{cell}</td>
	393	))}
	394	</tr>
	395	))}
	396	</tbody>
	397	</table>
	398	);
	399
	400	// ─── List Components ────────────────────────────────────────────────────────
	401
	402	export const ListItem: FC<
	403	PropsWithChildren<{ style?: string }>
	404	> = ({ children, style }) => (
	405	<div class="issue-item" style={style}>
	406	{children}
	407	</div>
	408	);
	409
	410	export const List: FC<PropsWithChildren<{ class?: string }>> = ({ children, class: cls }) => (
	411	<div class={cls \|\| "issue-list"}>
	412	{children}
	413	</div>
	414	);
	415
	416	// ─── Code Display ───────────────────────────────────────────────────────────
	417
	418	export const CodeBlock: FC<{
	419	code: string;
	420	language?: string;
	421	showLineNumbers?: boolean;
	422	}> = ({ code, showLineNumbers = true }) => {
	423	const lines = code.split("\n");
	424	if (lines[lines.length - 1] === "") lines.pop();
	425	return (
	426	<div class="blob-code">
	427	<table>
	428	<tbody>
	429	{lines.map((line, i) => (
	430	<tr>
	431	{showLineNumbers && <td class="line-num">{i + 1}</td>}
	432	<td class="line-content">{line}</td>
	433	</tr>
	434	))}
	435	</tbody>
	436	</table>
	437	</div>
	438	);
	439	};
	440
	441	export const InlineCode: FC<PropsWithChildren> = ({ children }) => (
	442	<code style="font-size:12px;background:var(--bg-tertiary);padding:2px 6px;border-radius:3px;font-family:var(--font-mono)">
	443	{children}
	444	</code>
	445	);
	446
	447	export const CopyBlock: FC<{
	448	text: string;
	449	label?: string;
	450	}> = ({ text, label }) => (
	451	<Flex gap={8} align="center" class="copy-block">
	452	{label && <Text size={13} muted>{label}</Text>}
	453	<code
	454	style="flex:1;padding:8px 12px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);font-family:var(--font-mono);font-size:13px;overflow-x:auto"
	455	data-copy={text}
	456	>
	457	{text}
	458	</code>
	459	<button
	460	type="button"
	461	class="btn btn-sm copy-btn"
	462	data-clipboard={text}
	463	title="Copy to clipboard"
	464	>
	465	Copy
	466	</button>
	467	</Flex>
	468	);
	469
	470	// ─── Notification Components ────────────────────────────────────────────────
	471
	472	export const NotificationBell: FC<{ count: number; href: string }> = ({
	473	count,
	474	href,
	475	}) => (
	476	<a href={href} class="notification-bell" title="Notifications">
	477	<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
	478	<path d="M8 16a2 2 0 002-2H6a2 2 0 002 2zM8 1.918l-.797.161A4.002 4.002 0 004 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 00-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 111.99 0A5.002 5.002 0 0113 6c0 .88.32 4.2 1.22 6z" />
	479	</svg>
	480	{count > 0 && <span class="notification-count">{count > 99 ? "99+" : count}</span>}
	481	</a>
	482	);
	483
	484	// ─── Profile Components ─────────────────────────────────────────────────────
	485
	486	export const Avatar: FC<{
	487	name: string;
	488	url?: string;
	489	size?: number;
	490	}> = ({ name, url, size = 40 }) => {
	491	if (url) {
	492	return (
	493	<img
	494	src={url}
	495	alt={name}
ea52715copilot-swe-agent[bot]	496	width={size}
	497	height={size}
45e31d0Claude	498	style={`width:${size}px;height:${size}px;border-radius:50%;object-fit:cover`}
	499	loading="lazy"
	500	/>
	501	);
	502	}
	503	return (
	504	<div
	505	class="user-avatar"
	506	style={`width:${size}px;height:${size}px;font-size:${size * 0.4}px`}
	507	>
	508	{name[0].toUpperCase()}
	509	</div>
	510	);
	511	};
	512
	513	export const UserCard: FC<{
	514	username: string;
	515	displayName?: string \| null;
	516	bio?: string \| null;
	517	avatarUrl?: string \| null;
	518	}> = ({ username, displayName, bio, avatarUrl }) => (
	519	<div class="user-profile">
	520	<Avatar name={displayName \|\| username} url={avatarUrl \|\| undefined} size={96} />
	521	<div class="user-info">
	522	<h2>{displayName \|\| username}</h2>
	523	<div class="username">@{username}</div>
	524	{bio && <div class="bio">{bio}</div>}
	525	</div>
	526	</div>
	527	);
	528
	529	// ─── Onboarding Components ──────────────────────────────────────────────────
	530
	531	export const StepIndicator: FC<{
	532	steps: Array<{ label: string; completed: boolean; active: boolean }>;
	533	}> = ({ steps }) => (
	534	<Flex gap={0} align="center" class="step-indicator">
	535	{steps.map((step, i) => (
	536	<>
	537	{i > 0 && <div class="step-line" data-completed={step.completed \|\| steps[i - 1]?.completed ? "true" : "false"} />}
	538	<Flex direction="column" align="center" gap={4}>
	539	<div
	540	class={`step-circle${step.completed ? " step-completed" : ""}${step.active ? " step-active" : ""}`}
	541	>
	542	{step.completed ? "\u2713" : i + 1}
	543	</div>
	544	<Text size={12} muted={!step.active}>{step.label}</Text>
	545	</Flex>
	546	</>
	547	))}
	548	</Flex>
	549	);
	550
	551	export const WelcomeHero: FC<
	552	PropsWithChildren<{ title: string; subtitle?: string }>
	553	> = ({ children, title, subtitle }) => (
	554	<div class="welcome-hero">
	555	<h1>{title}</h1>
	556	{subtitle && <p class="hero-subtitle">{subtitle}</p>}
	557	{children}
	558	</div>
	559	);
	560
	561	export const FeatureCard: FC<{
	562	icon: string;
	563	title: string;
	564	description: string;
	565	href?: string;
	566	}> = ({ icon, title, description, href }) => {
	567	const content = (
	568	<Card class="feature-card">
	569	<div class="feature-icon">{icon}</div>
	570	<h3>{title}</h3>
	571	<Text size={13} muted>{description}</Text>
	572	</Card>
	573	);
	574	return href ? <a href={href} style="text-decoration:none">{content}</a> : content;
	575	};
	576
	577	// ─── Search Components ──────────────────────────────────────────────────────
	578
	579	export const SearchBar: FC<{
	580	action: string;
	581	value?: string;
	582	placeholder?: string;
	583	name?: string;
	584	}> = ({ action, value, placeholder = "Search...", name = "q" }) => (
	585	<form method="get" action={action} style="margin-bottom:20px">
	586	<Flex gap={8}>
	587	<input
	588	type="text"
	589	name={name}
	590	value={value}
	591	placeholder={placeholder}
	592	class="search-input"
	593	autocomplete="off"
	594	/>
	595	<Button type="submit" variant="primary">Search</Button>
	596	</Flex>
	597	</form>
	598	);
	599
	600	export const SearchResults: FC<{
	601	query: string;
	602	count: number;
	603	}> = ({ query, count }) => (
	604	<p style="font-size:14px;color:var(--text-muted);margin-bottom:16px">
	605	{count} result{count !== 1 ? "s" : ""} for{" "}
	606	<strong style="color:var(--text)">"{query}"</strong>
	607	</p>
	608	);
	609
	610	// ─── Markdown Content ───────────────────────────────────────────────────────
	611
	612	export const MarkdownContent: FC<{ html: string }> = ({ html: htmlContent }) => (
	613	<div class="markdown-body">
	614	{html([htmlContent] as unknown as TemplateStringsArray)}
	615	</div>
	616	);
	617
	618	// ─── Comment Components ─────────────────────────────────────────────────────
	619
	620	export const CommentBox: FC<{
	621	author: string;
	622	date: string \| Date;
	623	body: string;
	624	isAi?: boolean;
	625	}> = ({ author, date, body, isAi }) => {
	626	const dateStr = typeof date === "string" ? date : date.toISOString();
	627	return (
	628	<div class={`issue-comment-box${isAi ? " ai-review" : ""}`}>
	629	<div class="comment-header">
	630	<Flex gap={8} align="center">
	631	<strong>{author}</strong>
	632	{isAi && <Badge variant="default" style="font-size:11px">AI Review</Badge>}
	633	<Text size={13} muted>commented {formatRelative(dateStr)}</Text>
	634	</Flex>
	635	</div>
	636	<MarkdownContent html={body} />
	637	</div>
	638	);
	639	};
	640
	641	export const CommentForm: FC<{
	642	action: string;
	643	csrfToken?: string;
	644	placeholder?: string;
	645	submitLabel?: string;
	646	extraActions?: any;
	647	}> = ({ action, csrfToken, placeholder = "Leave a comment... (Markdown supported)", submitLabel = "Comment", extraActions }) => (
	648	<div style="margin-top:20px">
	649	<Form action={action} csrfToken={csrfToken}>
	650	<FormGroup>
	651	<div class="comment-editor">
	652	<div class="editor-tabs">
	653	<button type="button" class="editor-tab active" data-tab="write">Write</button>
	654	<button type="button" class="editor-tab" data-tab="preview">Preview</button>
	655	</div>
	656	<TextArea
	657	name="body"
	658	rows={6}
	659	required
	660	placeholder={placeholder}
	661	mono
	662	/>
	663	<div class="editor-preview" style="display:none" />
	664	</div>
	665	</FormGroup>
	666	<Flex gap={8}>
	667	<Button type="submit" variant="primary">{submitLabel}</Button>
	668	{extraActions}
	669	</Flex>
	670	</Form>
	671	</div>
	672	);
	673
	674	// ─── Tooltip Component ──────────────────────────────────────────────────────
	675
	676	export const Tooltip: FC<PropsWithChildren<{ text: string }>> = ({
	677	children,
	678	text,
	679	}) => (
	680	<span class="tooltip-wrapper" data-tooltip={text}>
	681	{children}
	682	</span>
	683	);
	684
	685	// ─── Loading & Progress ─────────────────────────────────────────────────────
	686
	687	export const Spinner: FC<{ size?: number }> = ({ size = 20 }) => (
	688	<div
	689	class="spinner"
	690	style={`width:${size}px;height:${size}px`}
	691	/>
	692	);
	693
	694	export const ProgressBar: FC<{ value: number; max?: number; color?: string }> = ({
	695	value,
	696	max = 100,
	697	color,
	698	}) => (
	699	<div class="progress-bar">
	700	<div
	701	class="progress-fill"
	702	style={`width:${(value / max) * 100}%;${color ? `background:${color};` : ""}`}
	703	/>
	704	</div>
	705	);
	706
	707	// ─── Keyboard Shortcut Hint ─────────────────────────────────────────────────
	708
	709	export const Kbd: FC<PropsWithChildren> = ({ children }) => (
	710	<kbd class="kbd">{children}</kbd>
	711	);
	712
	713	// ─── Utility Functions ──────────────────────────────────────────────────────
	714
	715	export function formatRelative(dateStr: string \| Date): string {
	716	const date = typeof dateStr === "string" ? new Date(dateStr) : dateStr;
	717	const now = new Date();
	718	const diffMs = now.getTime() - date.getTime();
	719	const diffMins = Math.floor(diffMs / 60000);
	720	if (diffMins < 1) return "just now";
	721	if (diffMins < 60) return `${diffMins}m ago`;
	722	const diffHours = Math.floor(diffMins / 60);
	723	if (diffHours < 24) return `${diffHours}h ago`;
	724	const diffDays = Math.floor(diffHours / 24);
	725	if (diffDays < 30) return `${diffDays}d ago`;
	726	return date.toLocaleDateString("en-US", {
	727	month: "short",
	728	day: "numeric",
	729	year: "numeric",
	730	});
	731	}
	732
	733	export function formatSize(bytes: number): string {
	734	if (bytes < 1024) return `${bytes} B`;
	735	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
	736	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
	737	}