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