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.tsxBlame705 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;
	119	}>
	120	> = ({ children, action, method = "POST", csrfToken, class: cls }) => (
	121	<form method={method.toLowerCase() as any} action={action} class={cls \|\| ""}>
	122	{csrfToken && <input type="hidden" name="_csrf" value={csrfToken} />}
	123	{children}
	124	</form>
	125	);
	126
	127	export const FormGroup: FC<
	128	PropsWithChildren<{ label?: string; htmlFor?: string; hint?: string }>
	129	> = ({ children, label, htmlFor, hint }) => (
	130	<div class="form-group">
	131	{label && <label for={htmlFor}>{label}</label>}
	132	{children}
	133	{hint && <Text size={12} muted>{hint}</Text>}
	134	</div>
	135	);
	136
	137	export const Input: FC<{
	138	name: string;
	139	type?: string;
	140	id?: string;
	141	value?: string;
	142	placeholder?: string;
	143	required?: boolean;
	144	disabled?: boolean;
	145	pattern?: string;
	146	autocomplete?: string;
	147	autofocus?: boolean;
bb0f894Claude	148	minLength?: number;
	149	maxLength?: number;
45e31d0Claude	150	style?: string;
2c3ba6ecopilot-swe-agent[bot]	151	"aria-label"?: string;
45e31d0Claude	152	}> = (props) => (
	153	<input
	154	type={props.type \|\| "text"}
	155	id={props.id \|\| props.name}
	156	name={props.name}
	157	value={props.value}
	158	placeholder={props.placeholder}
	159	required={props.required}
	160	disabled={props.disabled}
	161	pattern={props.pattern}
	162	autocomplete={props.autocomplete}
	163	autofocus={props.autofocus}
bb0f894Claude	164	minLength={props.minLength}
	165	maxLength={props.maxLength}
45e31d0Claude	166	class={props.disabled ? "input-disabled" : ""}
	167	style={props.style}
2c3ba6ecopilot-swe-agent[bot]	168	aria-label={props["aria-label"] \|\| props.placeholder \|\| props.name}
45e31d0Claude	169	/>
	170	);
	171
	172	export const TextArea: FC<{
	173	name: string;
	174	id?: string;
	175	rows?: number;
	176	placeholder?: string;
	177	required?: boolean;
	178	value?: string;
	179	mono?: boolean;
	180	style?: string;
	181	}> = (props) => (
	182	<textarea
	183	id={props.id \|\| props.name}
	184	name={props.name}
	185	rows={props.rows \|\| 6}
	186	placeholder={props.placeholder}
	187	required={props.required}
	188	style={`${props.mono ? "font-family:var(--font-mono);font-size:13px;" : ""}${props.style \|\| ""}`}
	189	>
	190	{props.value}
	191	</textarea>
	192	);
	193
	194	export const Select: FC<
	195	PropsWithChildren<{ name: string; id?: string; value?: string }>
	196	> = ({ children, name, id, value }) => (
	197	<select id={id \|\| name} name={name} value={value}>
	198	{children}
	199	</select>
	200	);
	201
	202	// ─── Feedback Components ────────────────────────────────────────────────────
	203
	204	export const Alert: FC<
	205	PropsWithChildren<{ variant: "error" \| "success" \| "warning" \| "info" }>
	206	> = ({ children, variant }) => {
	207	const cls =
	208	variant === "error" ? "auth-error" :
	209	variant === "success" ? "auth-success" :
	210	variant === "warning" ? "alert-warning" :
	211	"alert-info";
	212	return <div class={cls}>{children}</div>;
	213	};
	214
	215	export const EmptyState: FC<
	216	PropsWithChildren<{ title?: string; icon?: string }>
	217	> = ({ children, title, icon }) => (
	218	<div class="empty-state">
	219	{icon && <div style="font-size:48px;margin-bottom:12px">{icon}</div>}
	220	{title && <h2>{title}</h2>}
	221	{children}
	222	</div>
	223	);
	224
	225	export const Badge: FC<
	226	PropsWithChildren<{
	227	variant?: "default" \| "open" \| "closed" \| "merged" \| "success" \| "danger" \| "warning";
	228	style?: string;
	229	}>
	230	> = ({ children, variant = "default", style }) => {
	231	const cls =
	232	variant === "open" ? "badge-open" :
	233	variant === "closed" ? "badge-closed" :
	234	variant === "merged" ? "badge-merged" :
	235	variant === "success" ? "badge-success" :
	236	variant === "danger" ? "badge-danger" :
	237	variant === "warning" ? "badge-warning" :
	238	"badge";
	239	return <span class={`issue-badge ${cls}`} style={style}>{children}</span>;
	240	};
	241
	242	// ─── Card Components ────────────────────────────────────────────────────────
	243
	244	export const Card: FC<PropsWithChildren<{ class?: string; style?: string }>> = ({
	245	children,
	246	class: cls,
	247	style,
	248	}) => (
	249	<div class={`card${cls ? ` ${cls}` : ""}`} style={style}>
	250	{children}
	251	</div>
	252	);
	253
	254	export const CardMeta: FC<PropsWithChildren> = ({ children }) => (
	255	<div class="card-meta">{children}</div>
	256	);
	257
	258	// ─── Navigation Components ──────────────────────────────────────────────────
	259
	260	export const TabNav: FC<{
	261	tabs: Array<{ label: string; href: string; active?: boolean; count?: number }>;
	262	}> = ({ tabs }) => (
	263	<div class="repo-nav">
	264	{tabs.map((tab) => (
	265	<a href={tab.href} class={tab.active ? "active" : ""}>
	266	{tab.label}
	267	{tab.count !== undefined && (
	268	<span class="tab-count">{tab.count}</span>
	269	)}
	270	</a>
	271	))}
	272	</div>
	273	);
	274
	275	export const FilterTabs: FC<{
	276	tabs: Array<{ label: string; href: string; active?: boolean }>;
	277	}> = ({ tabs }) => (
	278	<div class="issue-tabs">
	279	{tabs.map((tab) => (
	280	<a href={tab.href} class={tab.active ? "active" : ""}>
	281	{tab.label}
	282	</a>
	283	))}
	284	</div>
	285	);
	286
	287	// ─── Page Layout Components ─────────────────────────────────────────────────
	288
	289	export const PageHeader: FC<
	290	PropsWithChildren<{ title: string; actions?: any }>
	291	> = ({ title, actions, children }) => (
	292	<Flex justify="space-between" align="center" style="margin-bottom:20px">
	293	<h2>{title}</h2>
	294	{actions}
	295	{children}
	296	</Flex>
	297	);
	298
	299	export const Section: FC<
	300	PropsWithChildren<{ title?: string; style?: string }>
	301	> = ({ children, title, style }) => (
	302	<div style={`margin-bottom:24px;${style \|\| ""}`}>
	303	{title && <h3 style="margin-bottom:12px">{title}</h3>}
	304	{children}
	305	</div>
	306	);
	307
	308	export const Container: FC<
	309	PropsWithChildren<{ maxWidth?: number; class?: string }>
	310	> = ({ children, maxWidth = 800, class: cls }) => (
	311	<div class={cls \|\| ""} style={`max-width:${maxWidth}px`}>
	312	{children}
	313	</div>
	314	);
	315
	316	// ─── Data Display Components ────────────────────────────────────────────────
	317
	318	export const StatGroup: FC<{
	319	stats: Array<{ label: string; value: string \| number; color?: string }>;
	320	}> = ({ stats }) => (
	321	<Flex gap={24} wrap>
	322	{stats.map((stat) => (
	323	<div>
	324	<div style={`font-size:24px;font-weight:700;${stat.color ? `color:${stat.color};` : ""}`}>
	325	{stat.value}
	326	</div>
	327	<Text size={13} muted>{stat.label}</Text>
	328	</div>
	329	))}
	330	</Flex>
	331	);
	332
	333	export const KeyValue: FC<{ label: string; value: string \| number }> = ({
	334	label,
	335	value,
	336	}) => (
	337	<Flex justify="space-between" align="center" style="padding:8px 0;border-bottom:1px solid var(--border)">
	338	<Text size={14} muted>{label}</Text>
	339	<Text size={14}>{String(value)}</Text>
	340	</Flex>
	341	);
	342
	343	export const DataTable: FC<{
	344	headers: string[];
	345	rows: Array<Array<string \| any>>;
	346	class?: string;
	347	}> = ({ headers, rows, class: cls }) => (
	348	<table class={cls \|\| "file-table"}>
	349	<thead>
	350	<tr>
	351	{headers.map((h) => (
	352	<th style="padding:8px 16px;text-align:left;font-size:13px;color:var(--text-muted);border-bottom:1px solid var(--border)">{h}</th>
	353	))}
	354	</tr>
	355	</thead>
	356	<tbody>
	357	{rows.map((row) => (
	358	<tr>
	359	{row.map((cell) => (
	360	<td style="padding:8px 16px;font-size:14px">{cell}</td>
	361	))}
	362	</tr>
	363	))}
	364	</tbody>
	365	</table>
	366	);
	367
	368	// ─── List Components ────────────────────────────────────────────────────────
	369
	370	export const ListItem: FC<
	371	PropsWithChildren<{ style?: string }>
	372	> = ({ children, style }) => (
	373	<div class="issue-item" style={style}>
	374	{children}
	375	</div>
	376	);
	377
	378	export const List: FC<PropsWithChildren<{ class?: string }>> = ({ children, class: cls }) => (
	379	<div class={cls \|\| "issue-list"}>
	380	{children}
	381	</div>
	382	);
	383
	384	// ─── Code Display ───────────────────────────────────────────────────────────
	385
	386	export const CodeBlock: FC<{
	387	code: string;
	388	language?: string;
	389	showLineNumbers?: boolean;
	390	}> = ({ code, showLineNumbers = true }) => {
	391	const lines = code.split("\n");
	392	if (lines[lines.length - 1] === "") lines.pop();
	393	return (
	394	<div class="blob-code">
	395	<table>
	396	<tbody>
	397	{lines.map((line, i) => (
	398	<tr>
	399	{showLineNumbers && <td class="line-num">{i + 1}</td>}
	400	<td class="line-content">{line}</td>
	401	</tr>
	402	))}
	403	</tbody>
	404	</table>
	405	</div>
	406	);
	407	};
	408
	409	export const InlineCode: FC<PropsWithChildren> = ({ children }) => (
	410	<code style="font-size:12px;background:var(--bg-tertiary);padding:2px 6px;border-radius:3px;font-family:var(--font-mono)">
	411	{children}
	412	</code>
	413	);
	414
	415	export const CopyBlock: FC<{
	416	text: string;
	417	label?: string;
	418	}> = ({ text, label }) => (
	419	<Flex gap={8} align="center" class="copy-block">
	420	{label && <Text size={13} muted>{label}</Text>}
	421	<code
	422	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"
	423	data-copy={text}
	424	>
	425	{text}
	426	</code>
	427	<button
	428	type="button"
	429	class="btn btn-sm copy-btn"
	430	data-clipboard={text}
	431	title="Copy to clipboard"
	432	>
	433	Copy
	434	</button>
	435	</Flex>
	436	);
	437
	438	// ─── Notification Components ────────────────────────────────────────────────
	439
	440	export const NotificationBell: FC<{ count: number; href: string }> = ({
	441	count,
	442	href,
	443	}) => (
	444	<a href={href} class="notification-bell" title="Notifications">
	445	<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
	446	<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" />
	447	</svg>
	448	{count > 0 && <span class="notification-count">{count > 99 ? "99+" : count}</span>}
	449	</a>
	450	);
	451
	452	// ─── Profile Components ─────────────────────────────────────────────────────
	453
	454	export const Avatar: FC<{
	455	name: string;
	456	url?: string;
	457	size?: number;
	458	}> = ({ name, url, size = 40 }) => {
	459	if (url) {
	460	return (
	461	<img
	462	src={url}
	463	alt={name}
ea52715copilot-swe-agent[bot]	464	width={size}
	465	height={size}
45e31d0Claude	466	style={`width:${size}px;height:${size}px;border-radius:50%;object-fit:cover`}
	467	loading="lazy"
	468	/>
	469	);
	470	}
	471	return (
	472	<div
	473	class="user-avatar"
	474	style={`width:${size}px;height:${size}px;font-size:${size * 0.4}px`}
	475	>
	476	{name[0].toUpperCase()}
	477	</div>
	478	);
	479	};
	480
	481	export const UserCard: FC<{
	482	username: string;
	483	displayName?: string \| null;
	484	bio?: string \| null;
	485	avatarUrl?: string \| null;
	486	}> = ({ username, displayName, bio, avatarUrl }) => (
	487	<div class="user-profile">
	488	<Avatar name={displayName \|\| username} url={avatarUrl \|\| undefined} size={96} />
	489	<div class="user-info">
	490	<h2>{displayName \|\| username}</h2>
	491	<div class="username">@{username}</div>
	492	{bio && <div class="bio">{bio}</div>}
	493	</div>
	494	</div>
	495	);
	496
	497	// ─── Onboarding Components ──────────────────────────────────────────────────
	498
	499	export const StepIndicator: FC<{
	500	steps: Array<{ label: string; completed: boolean; active: boolean }>;
	501	}> = ({ steps }) => (
	502	<Flex gap={0} align="center" class="step-indicator">
	503	{steps.map((step, i) => (
	504	<>
	505	{i > 0 && <div class="step-line" data-completed={step.completed \|\| steps[i - 1]?.completed ? "true" : "false"} />}
	506	<Flex direction="column" align="center" gap={4}>
	507	<div
	508	class={`step-circle${step.completed ? " step-completed" : ""}${step.active ? " step-active" : ""}`}
	509	>
	510	{step.completed ? "\u2713" : i + 1}
	511	</div>
	512	<Text size={12} muted={!step.active}>{step.label}</Text>
	513	</Flex>
	514	</>
	515	))}
	516	</Flex>
	517	);
	518
	519	export const WelcomeHero: FC<
	520	PropsWithChildren<{ title: string; subtitle?: string }>
	521	> = ({ children, title, subtitle }) => (
	522	<div class="welcome-hero">
	523	<h1>{title}</h1>
	524	{subtitle && <p class="hero-subtitle">{subtitle}</p>}
	525	{children}
	526	</div>
	527	);
	528
	529	export const FeatureCard: FC<{
	530	icon: string;
	531	title: string;
	532	description: string;
	533	href?: string;
	534	}> = ({ icon, title, description, href }) => {
	535	const content = (
	536	<Card class="feature-card">
	537	<div class="feature-icon">{icon}</div>
	538	<h3>{title}</h3>
	539	<Text size={13} muted>{description}</Text>
	540	</Card>
	541	);
	542	return href ? <a href={href} style="text-decoration:none">{content}</a> : content;
	543	};
	544
	545	// ─── Search Components ──────────────────────────────────────────────────────
	546
	547	export const SearchBar: FC<{
	548	action: string;
	549	value?: string;
	550	placeholder?: string;
	551	name?: string;
	552	}> = ({ action, value, placeholder = "Search...", name = "q" }) => (
	553	<form method="get" action={action} style="margin-bottom:20px">
	554	<Flex gap={8}>
	555	<input
	556	type="text"
	557	name={name}
	558	value={value}
	559	placeholder={placeholder}
	560	class="search-input"
	561	autocomplete="off"
	562	/>
	563	<Button type="submit" variant="primary">Search</Button>
	564	</Flex>
	565	</form>
	566	);
	567
	568	export const SearchResults: FC<{
	569	query: string;
	570	count: number;
	571	}> = ({ query, count }) => (
	572	<p style="font-size:14px;color:var(--text-muted);margin-bottom:16px">
	573	{count} result{count !== 1 ? "s" : ""} for{" "}
	574	<strong style="color:var(--text)">"{query}"</strong>
	575	</p>
	576	);
	577
	578	// ─── Markdown Content ───────────────────────────────────────────────────────
	579
	580	export const MarkdownContent: FC<{ html: string }> = ({ html: htmlContent }) => (
	581	<div class="markdown-body">
	582	{html([htmlContent] as unknown as TemplateStringsArray)}
	583	</div>
	584	);
	585
	586	// ─── Comment Components ─────────────────────────────────────────────────────
	587
	588	export const CommentBox: FC<{
	589	author: string;
	590	date: string \| Date;
	591	body: string;
	592	isAi?: boolean;
	593	}> = ({ author, date, body, isAi }) => {
	594	const dateStr = typeof date === "string" ? date : date.toISOString();
	595	return (
	596	<div class={`issue-comment-box${isAi ? " ai-review" : ""}`}>
	597	<div class="comment-header">
	598	<Flex gap={8} align="center">
	599	<strong>{author}</strong>
	600	{isAi && <Badge variant="default" style="font-size:11px">AI Review</Badge>}
	601	<Text size={13} muted>commented {formatRelative(dateStr)}</Text>
	602	</Flex>
	603	</div>
	604	<MarkdownContent html={body} />
	605	</div>
	606	);
	607	};
	608
	609	export const CommentForm: FC<{
	610	action: string;
	611	csrfToken?: string;
	612	placeholder?: string;
	613	submitLabel?: string;
	614	extraActions?: any;
	615	}> = ({ action, csrfToken, placeholder = "Leave a comment... (Markdown supported)", submitLabel = "Comment", extraActions }) => (
	616	<div style="margin-top:20px">
	617	<Form action={action} csrfToken={csrfToken}>
	618	<FormGroup>
	619	<div class="comment-editor">
	620	<div class="editor-tabs">
	621	<button type="button" class="editor-tab active" data-tab="write">Write</button>
	622	<button type="button" class="editor-tab" data-tab="preview">Preview</button>
	623	</div>
	624	<TextArea
	625	name="body"
	626	rows={6}
	627	required
	628	placeholder={placeholder}
	629	mono
	630	/>
	631	<div class="editor-preview" style="display:none" />
	632	</div>
	633	</FormGroup>
	634	<Flex gap={8}>
	635	<Button type="submit" variant="primary">{submitLabel}</Button>
	636	{extraActions}
	637	</Flex>
	638	</Form>
	639	</div>
	640	);
	641
	642	// ─── Tooltip Component ──────────────────────────────────────────────────────
	643
	644	export const Tooltip: FC<PropsWithChildren<{ text: string }>> = ({
	645	children,
	646	text,
	647	}) => (
	648	<span class="tooltip-wrapper" data-tooltip={text}>
	649	{children}
	650	</span>
	651	);
	652
	653	// ─── Loading & Progress ─────────────────────────────────────────────────────
	654
	655	export const Spinner: FC<{ size?: number }> = ({ size = 20 }) => (
	656	<div
	657	class="spinner"
	658	style={`width:${size}px;height:${size}px`}
	659	/>
	660	);
	661
	662	export const ProgressBar: FC<{ value: number; max?: number; color?: string }> = ({
	663	value,
	664	max = 100,
	665	color,
	666	}) => (
	667	<div class="progress-bar">
	668	<div
	669	class="progress-fill"
	670	style={`width:${(value / max) * 100}%;${color ? `background:${color};` : ""}`}
	671	/>
	672	</div>
	673	);
	674
	675	// ─── Keyboard Shortcut Hint ─────────────────────────────────────────────────
	676
	677	export const Kbd: FC<PropsWithChildren> = ({ children }) => (
	678	<kbd class="kbd">{children}</kbd>
	679	);
	680
	681	// ─── Utility Functions ──────────────────────────────────────────────────────
	682
	683	export function formatRelative(dateStr: string \| Date): string {
	684	const date = typeof dateStr === "string" ? new Date(dateStr) : dateStr;
	685	const now = new Date();
	686	const diffMs = now.getTime() - date.getTime();
	687	const diffMins = Math.floor(diffMs / 60000);
	688	if (diffMins < 1) return "just now";
	689	if (diffMins < 60) return `${diffMins}m ago`;
	690	const diffHours = Math.floor(diffMins / 60);
	691	if (diffHours < 24) return `${diffHours}h ago`;
	692	const diffDays = Math.floor(diffHours / 24);
	693	if (diffDays < 30) return `${diffDays}d ago`;
	694	return date.toLocaleDateString("en-US", {
	695	month: "short",
	696	day: "numeric",
	697	year: "numeric",
	698	});
	699	}
	700
	701	export function formatSize(bytes: number): string {
	702	if (bytes < 1024) return `${bytes} B`;
	703	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
	704	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
	705	}