From c1e28224aa2e1450031669d9a7e359b63e04687d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 19:40:59 +0200
Subject: Init

---
 src/ui/base/BaseLayout.tsx          | 134 ++++++++++++++++++++++++++++++++++++
 src/ui/components/Logo.tsx          |  34 +++++++++
 src/ui/components/ReleaseCard.tsx   |  47 +++++++++++++
 src/ui/components/SiteFooter.tsx    |  39 +++++++++++
 src/ui/components/SiteHeader.tsx    | 121 ++++++++++++++++++++++++++++++++
 src/ui/components/SiteNav.tsx       |  38 ++++++++++
 src/ui/layouts/CardList.tsx         |  52 ++++++++++++++
 src/ui/layouts/Container.tsx        |  33 +++++++++
 src/ui/layouts/EmojiGrid.tsx        |  40 +++++++++++
 src/ui/layouts/HList.tsx            |  44 ++++++++++++
 src/ui/layouts/SplitView.tsx        |  27 ++++++++
 src/ui/layouts/SplitViewPanel.tsx   |  33 +++++++++
 src/ui/objects/ActionButton.tsx     |  61 ++++++++++++++++
 src/ui/objects/Alert.tsx            |  21 ++++++
 src/ui/objects/Avatar.tsx           |  69 +++++++++++++++++++
 src/ui/objects/Badge.tsx            |  19 +++++
 src/ui/objects/Body.tsx             |  21 ++++++
 src/ui/objects/Button.tsx           |  26 +++++++
 src/ui/objects/Card.tsx             |  47 +++++++++++++
 src/ui/objects/CardBody.tsx         |  32 +++++++++
 src/ui/objects/CardFooter.tsx       |  11 +++
 src/ui/objects/CardImage.tsx        |  40 +++++++++++
 src/ui/objects/CollapseCard.tsx     |  27 ++++++++
 src/ui/objects/ContentImage.tsx     |  15 ++++
 src/ui/objects/Deflist.tsx          |   7 ++
 src/ui/objects/Dialog.tsx           |  41 +++++++++++
 src/ui/objects/Divider.tsx          |  51 ++++++++++++++
 src/ui/objects/Emoji.tsx            |  21 ++++++
 src/ui/objects/Figure.tsx           |  13 ++++
 src/ui/objects/FigureCaption.tsx    |  11 +++
 src/ui/objects/Heading.tsx          |  49 +++++++++++++
 src/ui/objects/Icon.tsx             |  20 ++++++
 src/ui/objects/Lightbox.tsx         | 122 ++++++++++++++++++++++++++++++++
 src/ui/objects/LoadingIndicator.tsx |  10 +++
 src/ui/objects/Navbar.tsx           |  37 ++++++++++
 src/ui/objects/NavbarItem.tsx       |  33 +++++++++
 src/ui/objects/PlaceholderBox.tsx   |  11 +++
 src/ui/objects/SideNav.tsx          |  14 ++++
 src/ui/objects/SideNavItem.tsx      |  33 +++++++++
 src/ui/objects/StatusIndicator.tsx  |  18 +++++
 src/ui/objects/Tab.tsx              |  14 ++++
 src/ui/objects/Tabbar.tsx           |  43 ++++++++++++
 src/ui/objects/TextField.tsx        |  62 +++++++++++++++++
 src/ui/objects/Thumbnail.tsx        |  46 +++++++++++++
 44 files changed, 1687 insertions(+)
 create mode 100644 src/ui/base/BaseLayout.tsx
 create mode 100644 src/ui/components/Logo.tsx
 create mode 100644 src/ui/components/ReleaseCard.tsx
 create mode 100644 src/ui/components/SiteFooter.tsx
 create mode 100644 src/ui/components/SiteHeader.tsx
 create mode 100644 src/ui/components/SiteNav.tsx
 create mode 100644 src/ui/layouts/CardList.tsx
 create mode 100644 src/ui/layouts/Container.tsx
 create mode 100644 src/ui/layouts/EmojiGrid.tsx
 create mode 100644 src/ui/layouts/HList.tsx
 create mode 100644 src/ui/layouts/SplitView.tsx
 create mode 100644 src/ui/layouts/SplitViewPanel.tsx
 create mode 100644 src/ui/objects/ActionButton.tsx
 create mode 100644 src/ui/objects/Alert.tsx
 create mode 100644 src/ui/objects/Avatar.tsx
 create mode 100644 src/ui/objects/Badge.tsx
 create mode 100644 src/ui/objects/Body.tsx
 create mode 100644 src/ui/objects/Button.tsx
 create mode 100644 src/ui/objects/Card.tsx
 create mode 100644 src/ui/objects/CardBody.tsx
 create mode 100644 src/ui/objects/CardFooter.tsx
 create mode 100644 src/ui/objects/CardImage.tsx
 create mode 100644 src/ui/objects/CollapseCard.tsx
 create mode 100644 src/ui/objects/ContentImage.tsx
 create mode 100644 src/ui/objects/Deflist.tsx
 create mode 100644 src/ui/objects/Dialog.tsx
 create mode 100644 src/ui/objects/Divider.tsx
 create mode 100644 src/ui/objects/Emoji.tsx
 create mode 100644 src/ui/objects/Figure.tsx
 create mode 100644 src/ui/objects/FigureCaption.tsx
 create mode 100644 src/ui/objects/Heading.tsx
 create mode 100644 src/ui/objects/Icon.tsx
 create mode 100644 src/ui/objects/Lightbox.tsx
 create mode 100644 src/ui/objects/LoadingIndicator.tsx
 create mode 100644 src/ui/objects/Navbar.tsx
 create mode 100644 src/ui/objects/NavbarItem.tsx
 create mode 100644 src/ui/objects/PlaceholderBox.tsx
 create mode 100644 src/ui/objects/SideNav.tsx
 create mode 100644 src/ui/objects/SideNavItem.tsx
 create mode 100644 src/ui/objects/StatusIndicator.tsx
 create mode 100644 src/ui/objects/Tab.tsx
 create mode 100644 src/ui/objects/Tabbar.tsx
 create mode 100644 src/ui/objects/TextField.tsx
 create mode 100644 src/ui/objects/Thumbnail.tsx

(limited to 'src/ui')

diff --git a/src/ui/base/BaseLayout.tsx b/src/ui/base/BaseLayout.tsx
new file mode 100644
index 0000000..c57d41e
--- /dev/null
+++ b/src/ui/base/BaseLayout.tsx
@@ -0,0 +1,134 @@
+// @ts-types="corvos/mod.ts"
+import { getGenerator, type Select } from "corvos/mod.ts";
+
+import site from "@/corvos.config.ts";
+
+import { SiteFooter } from "../components/SiteFooter.tsx";
+import { SiteNav } from "../components/SiteNav.tsx";
+import { Lightbox } from "../objects/Lightbox.tsx";
+
+export interface Props {
+	page: Select<typeof site, ".html">;
+	image?: string;
+	theme?: "l1" | "l2" | null;
+	children?: JSX.Element;
+	class?: unknown;
+}
+
+export const BaseLayout = site.$.component(
+	async ({ page, theme = "l1", image: imageUrl, children, class: cls }: Props, pages) => {
+		const query = site.$.query(pages);
+
+		const stylesheet = await site.load("styles/style.scss");
+		const script = await site.load("scripts/script.ts");
+		const fonts = await site.glob("assets/**.woff2");
+		const favicon = await site.load("assets/favicon.svg");
+		const image = await site.load(
+			imageUrl ?? "https://strapi.volpeon.ink/uploads/icon_7999cf625e.png",
+		);
+
+		const feeds = query.type(".rss").many();
+
+		return (
+			<>
+				{{ __html: "<!DOCTYPE html>" }}
+				<html lang="en">
+					<head>
+						<meta charset="utf-8" />
+						<meta content="light dark" name="color-scheme" />
+						<meta content="width=device-width, initial-scale=1" name="viewport" />
+						<meta content="scale" name="text-scale" />
+						<link href={site.$.url("sitemap.xml")} rel="sitemap" />
+						<link href={favicon.url} rel="icon" type="image/svg+xml" />
+						{fonts.map((font) => (
+							<link as="font" href={font.url} rel="preload" type="font/woff2" />
+						))}
+
+						<style>@layer scope, theme, object, layout, component, utility;</style>
+						<link rel="stylesheet" href={stylesheet.url} />
+						<script src={script.url} defer />
+						{feeds.map((feed) => (
+							<link
+								rel="alternate"
+								href={feed.url}
+								title={feed.data.title}
+								type="application/rss+xml"
+							/>
+						))}
+						<title>
+							{page.data.title}
+							{page.data.type === "home" ? "" : " · Corvos"}
+						</title>
+
+						<meta property="og:type" content="website" />
+						<meta property="og:site_name" content="Corvos" />
+						<meta property="og:locale" content="en" />
+						{"description" in page.data && page.data.description && (
+							<>
+								<meta property="og:description" content={page.data.description} />
+								<meta name="description" content={page.data.description} />
+							</>
+						)}
+						<meta property="og:url" content={site.$.url("", true)} />
+						<meta property="og:image" content={image.url} />
+						<meta name="twitter:card" content={imageUrl ? "summary_large_image" : "summary"} />
+						<meta name="generator" content={getGenerator()} />
+					</head>
+					<body class:list={["t-no-js", { [`t-${theme}`]: theme }, cls]}>
+						{children}
+
+						<SiteFooter />
+						<SiteNav url={page.url} />
+						<Lightbox />
+						<svg
+							version="1.1"
+							xmlns="http://www.w3.org/2000/svg"
+							xmlns:xlink="http://www.w3.org/1999/xlink"
+							class="u-d-none"
+						>
+							<title>Loading indicator</title>
+							<symbol id="loading-indicator" viewBox="0 0 50 50">
+								<circle
+									cx="25"
+									cy="25"
+									r="20"
+									fill="none"
+									stroke="currentColor"
+									stroke-width=".4em"
+									stroke-linecap="round"
+									stroke-dasharray="1 200"
+									stroke-dashoffset="0"
+									stroke-miterlimit="10"
+									transform-origin="center center"
+								>
+									<animate
+										attributeName="stroke-dasharray"
+										keyTimes="0;0.5;1"
+										values="1 200;89 200;89 200"
+										dur="2s"
+										repeatCount="indefinite"
+									/>
+									<animate
+										attributeName="stroke-dashoffset"
+										keyTimes="0;0.5;1"
+										values="0;-35;-124"
+										dur="2s"
+										repeatCount="indefinite"
+									/>
+									<animateTransform
+										attributeName="transform"
+										type="rotate"
+										from="0"
+										to="360"
+										dur="1.3s"
+										repeatCount="indefinite"
+									/>
+								</circle>
+							</symbol>
+						</svg>
+					</body>
+				</html>
+			</>
+		);
+	},
+);
diff --git a/src/ui/components/Logo.tsx b/src/ui/components/Logo.tsx
new file mode 100644
index 0000000..a9ec9be
--- /dev/null
+++ b/src/ui/components/Logo.tsx
@@ -0,0 +1,34 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import site from "@/corvos.config.ts";
+
+export type Props = HTMLAttributes<"a"> & {
+	size?: "sm" | "lg";
+	variant?: "static-black" | "static-white";
+};
+
+export const Logo = async ({ size, variant, class: cls, ...props }: Props) => {
+	const symbols = await site.load("assets/symbols.svg");
+
+	return (
+		<a
+			aria-label="Home"
+			class:list={[
+				"c-logo",
+				{
+					[`c-logo--${size}`]: size,
+					[`c-logo--${variant}`]: variant,
+				},
+				cls,
+			]}
+			href={site.$.url()}
+			rel="home"
+			{...props}
+		>
+			<svg class="c-logo__img">
+				<title>Logo</title>
+				<use href={`${symbols.url}#logo${size === "sm" ? "-sm" : ""}`} />
+			</svg>
+		</a>
+	);
+};
diff --git a/src/ui/components/ReleaseCard.tsx b/src/ui/components/ReleaseCard.tsx
new file mode 100644
index 0000000..bffe256
--- /dev/null
+++ b/src/ui/components/ReleaseCard.tsx
@@ -0,0 +1,47 @@
+import type { Select } from "corvos";
+
+import type site from "@/corvos.config.ts";
+
+import { CardBody } from "$/ui/objects/CardBody.tsx";
+import { Heading } from "$/ui/objects/Heading.tsx";
+
+import { Card, type Props as CardProps } from "../objects/Card.tsx";
+
+export type Props = CardProps<"a"> & {
+	"heading-level": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+	"page": Select<typeof site, ".html", { type: "release" }>;
+};
+
+export const ReleaseCard = ({ "heading-level": headingLevel, page, ...props }: Props) => {
+	return (
+		<Card
+			as="a"
+			class="c-with-visited-indicator h-entry u-url"
+			horizontal
+			href={page.url}
+			{...props}
+		>
+			<CardBody class="c-with-visited-indicator__indicator u-pie-0" />
+
+			<CardBody main>
+				<Heading as={headingLevel} class="p-name">
+					<span class="u-mie-100">{page.data.title}</span>
+				</Heading>
+			</CardBody>
+
+			<CardBody as="small" class="u-c-mute u-d-none@sm-lo">
+				<ul class="l-hlist l-hlist--separated">
+					<li class="l-hlist__item">
+						<time class="dt-published" datetime={page.data.date.toISOString()}>
+							{page.data.date.toLocaleDateString(undefined, {
+								day: "numeric",
+								month: "short",
+								year: "numeric",
+							})}
+						</time>
+					</li>
+				</ul>
+			</CardBody>
+		</Card>
+	);
+};
diff --git a/src/ui/components/SiteFooter.tsx b/src/ui/components/SiteFooter.tsx
new file mode 100644
index 0000000..8bada2e
--- /dev/null
+++ b/src/ui/components/SiteFooter.tsx
@@ -0,0 +1,39 @@
+import site from "@/corvos.config.ts";
+
+import { Container } from "../layouts/Container.tsx";
+import { Divider } from "../objects/Divider.tsx";
+import { Logo } from "./Logo.tsx";
+
+export const SiteFooter = async () => {
+	const symbols = await site.load("assets/symbols.svg");
+
+	return (
+		<footer class="c-site-footer">
+			<div class="c-site-footer__banner">
+				<svg class="c-site-footer__banner-img">
+					<use href={`${symbols.url}#site-footer`} />
+				</svg>
+
+				<svg class="c-site-footer__banner-bg">
+					<use href={`${symbols.url}#site-footer-bg`} />
+				</svg>
+			</div>
+
+			<div class="c-site-footer__content-wrap t-static-white">
+				<Container class="c-site-footer__content" fixed="150" pad-block pad-inline>
+					<div class="c-site-footer__sections">
+						<section class="c-site-footer__section s-links s-links--mark-external s-links--static-white">
+							Developed by <a href="https://volpeon.ink/">Volpeon</a>
+						</section>
+					</div>
+
+					<Divider class="c-site-footer__divider" level="quiet" variant="static-white" />
+
+					<section class="c-site-footer__logo">
+						<Logo size="lg" variant="static-white" />
+					</section>
+				</Container>
+			</div>
+		</footer>
+	);
+};
diff --git a/src/ui/components/SiteHeader.tsx b/src/ui/components/SiteHeader.tsx
new file mode 100644
index 0000000..17831a1
--- /dev/null
+++ b/src/ui/components/SiteHeader.tsx
@@ -0,0 +1,121 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { nav } from "../../data/nav.ts";
+import { ActionButton } from "../objects/ActionButton.tsx";
+import { Navbar } from "../objects/Navbar.tsx";
+import { NavbarItem } from "../objects/NavbarItem.tsx";
+import { Logo } from "./Logo.tsx";
+
+export type Props = HTMLAttributes<"header"> & {
+	"url": string;
+	"mode"?: "compact" | "none";
+	"at-end"?: boolean;
+	"hidden"?: boolean;
+	"sm"?: JSX.Element;
+	"end"?: JSX.Element;
+	"children"?: JSX.Element;
+};
+
+export const SiteHeader = ({
+	children,
+	sm,
+	url,
+	mode,
+	"at-end": atEnd,
+	hidden,
+	end,
+	class: cls,
+	...props
+}: Props) => {
+	const navItems = nav.map((item) => ({
+		...item,
+		selected: new RegExp(`^${item.url.replace("/#", "/")}`).test(url),
+	}));
+
+	const parent = navItems
+		.filter((item) => item.url !== url)
+		.reduce(
+			(parent: (typeof navItems)[number] | undefined, item) =>
+				item.selected && item.url.length > (parent?.url.length ?? 0) ? item : parent,
+			undefined,
+		);
+	const selected = navItems.reduce(
+		(sel, item) => (item.selected && item.url.length > sel.url.length ? item : sel),
+		{
+			icon: "",
+			label: "Back",
+			selected: true,
+			url: "/",
+		},
+	);
+
+	const variant = atEnd ? "static-white" : undefined;
+
+	return (
+		<header
+			class:list={[
+				"c-site-header",
+				"l-media",
+				{ "c-site-header--end": atEnd, "c-site-header--hidden": hidden },
+				cls,
+			]}
+			{...props}
+		>
+			<Logo class="c-site-header__logo l-media__block" variant={variant} />
+
+			{mode !== "none" && (
+				<>
+					<Navbar aria-label="Mainmenu" class="c-site-header__nav l-media__block" variant={variant}>
+						{mode === "compact" ? (
+							<NavbarItem
+								href={selected.url}
+								pre={<Icon icon="arrow-left" variant="bold" />}
+								selected
+							>
+								{selected.label}
+							</NavbarItem>
+						) : (
+							navItems
+								.filter((item) => item.url !== "/" && !item.hidden)
+								.map((item) => (
+									<NavbarItem as="a" href={item.url} selected={item.selected}>
+										{item.label}
+									</NavbarItem>
+								))
+						)}
+					</Navbar>
+
+					{parent && (
+						<ActionButton
+							align-block
+							class="c-site-header__back l-media__block"
+							href={parent.url}
+							icon={<Icon icon="arrow-left" variant="bold" />}
+							level="quiet"
+							pill
+						/>
+					)}
+				</>
+			)}
+
+			{children}
+
+			{sm && <div class="c-site-header__slot c-site-header__slot--sm">{sm}</div>}
+
+			{end && (
+				<>
+					<div class="c-site-header__spacer" />
+					<div class="c-site-header__slot c-site-header__slot--end">{end}</div>
+				</>
+			)}
+
+			<Logo
+				class="c-site-header__logo c-site-header__logo--sm l-media__block"
+				size="sm"
+				variant={variant}
+			/>
+		</header>
+	);
+};
diff --git a/src/ui/components/SiteNav.tsx b/src/ui/components/SiteNav.tsx
new file mode 100644
index 0000000..7518e3c
--- /dev/null
+++ b/src/ui/components/SiteNav.tsx
@@ -0,0 +1,38 @@
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { nav } from "../../data/nav.ts";
+import { Navbar } from "../objects/Navbar.tsx";
+import { NavbarItem } from "../objects/NavbarItem.tsx";
+
+export interface Props {
+	url: string;
+}
+
+export const SiteNav = ({ url }: Props) => {
+	const navItems = nav
+		.filter((item) => !item.hidden)
+		.map((item) => ({
+			...item,
+			selected: item.url === "/" ? item.url === url : new RegExp(`^${item.url}`).test(url),
+		}));
+
+	return (
+		<>
+			<div class="c-site-nav-placeholder"></div>
+
+			<footer class="c-site-nav">
+				<Navbar aria-label="Mainmenu" quiet variant="static-white">
+					{navItems.map((item) => (
+						<NavbarItem
+							href={item.url}
+							icon={<Icon icon={item.icon} variant={item.selected ? "fill" : "regular"} />}
+							selected={item.selected}
+						>
+							{item.label}
+						</NavbarItem>
+					))}
+				</Navbar>
+			</footer>
+		</>
+	);
+};
diff --git a/src/ui/layouts/CardList.tsx b/src/ui/layouts/CardList.tsx
new file mode 100644
index 0000000..96ae642
--- /dev/null
+++ b/src/ui/layouts/CardList.tsx
@@ -0,0 +1,52 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"ul"> & {
+	"layout"?:
+		| "merge"
+		| "grid"
+		| "grid-sm"
+		| "grid-xs"
+		| "flex"
+		| "flex-sm"
+		| "flex-xs"
+		| "masonry"
+		| "masonry-h"
+		| "masonry-h-sm";
+	"quiet"?: boolean;
+	"border"?: boolean;
+	"interactive"?: boolean;
+	"no-shadow"?: boolean;
+	"no-flush"?: boolean;
+	"keyboard-nav"?: boolean;
+};
+
+export const CardList = ({
+	layout,
+	quiet,
+	border,
+	interactive,
+	"no-shadow": noShadow,
+	"no-flush": noFlush,
+	"keyboard-nav": keyboardNav,
+	class: cls,
+	...props
+}: Props) => (
+	<div
+		class:list={[
+			"l-card-list",
+			{
+				[`l-card-list--${layout}`]: layout,
+				"l-card-list--interactive": interactive,
+				"l-card-list--no-flush": noFlush,
+				"l-card-list--quiet": quiet,
+				"l-card-list--borderless": !border,
+				"l-card-list--shadow": layout === "merge" && !noShadow,
+				"js-keyboard-nav": keyboardNav,
+			},
+			cls,
+		]}
+		data-keyboard-nav-item=".l-card-list__card"
+		data-keyboard-nav-mode="grid"
+		{...props}
+	/>
+);
diff --git a/src/ui/layouts/Container.tsx b/src/ui/layouts/Container.tsx
new file mode 100644
index 0000000..7ce7ed5
--- /dev/null
+++ b/src/ui/layouts/Container.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	"as": Tag;
+	"pad-inline"?: boolean;
+	"pad-block"?: boolean;
+	"size"?: "sm";
+	"fixed"?: boolean | "150" | "200";
+}>;
+
+export const Container = <T extends HTMLTag = "div">({
+	as: Tag = "div" as T,
+	class: cls,
+	"pad-inline": padInline,
+	"pad-block": padBlock,
+	fixed,
+	size,
+	...props
+}: Props<T>) => (
+	<Tag
+		class:list={[
+			"l-container",
+			{
+				"l-container--pad-i": padInline,
+				"l-container--pad-b": padBlock,
+				[`l-container--${size}`]: size,
+				[`l-container--fixed${typeof fixed === "boolean" ? "" : `-${fixed}`}`]: fixed,
+			},
+			cls,
+		]}
+		{...props}
+	/>
+);
diff --git a/src/ui/layouts/EmojiGrid.tsx b/src/ui/layouts/EmojiGrid.tsx
new file mode 100644
index 0000000..5dc9266
--- /dev/null
+++ b/src/ui/layouts/EmojiGrid.tsx
@@ -0,0 +1,40 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"ul"> & {
+	id: string;
+	sprite: {
+		variants: { size: number; space: number }[];
+		wrap: number;
+	};
+	count: number;
+};
+
+export const EmojiGrid = ({ id, sprite, count, class: cls, ...props }: Props) => {
+	const size = sprite.variants[0]?.size ?? 48;
+	const space = sprite.variants[0]?.space ?? 2;
+	const { wrap } = sprite;
+
+	const src = `/emojis/${id}/sprite48.avif`;
+	const srcset = `/emojis/${id}/sprite48.avif 1x, /emojis/${id}/sprite96.avif 2x`;
+
+	const offsetX = (i: number) => -1 * (size + space) * (i % wrap);
+	const offsetY = (i: number) => -1 * (size + space) * Math.floor(i / wrap);
+
+	return (
+		<ul class:list={["l-emoji-grid", cls]} style={{ "--emoji-size": `${size}px` }} {...props}>
+			{[...Array(count).keys()].map((i) => (
+				<li>
+					<img
+						alt=""
+						class="l-emoji-grid__emoji"
+						src={src}
+						srcset={srcset}
+						width={size}
+						height={size}
+						style={{ "object-position": `${offsetX(i)}px ${offsetY(i)}px` }}
+					/>
+				</li>
+			))}
+		</ul>
+	);
+};
diff --git a/src/ui/layouts/HList.tsx b/src/ui/layouts/HList.tsx
new file mode 100644
index 0000000..c1d870a
--- /dev/null
+++ b/src/ui/layouts/HList.tsx
@@ -0,0 +1,44 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import type { Props as ActionButtonProps } from "../objects/ActionButton.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	"as"?: Tag;
+	"pill"?: boolean;
+	"icon"?: boolean;
+	"separated"?: boolean;
+	"size"?: "gapless" | "sm" | "lg" | "xl";
+	"buttons-size"?: ActionButtonProps<Tag>["size"];
+	"buttons"?: boolean;
+}>;
+
+export const HList = <T extends HTMLTag = "ul">({
+	as: Tag = "ul" as T,
+	pill,
+	icon,
+	separated,
+	size,
+	"buttons-size": buttonsSize,
+	buttons,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		class:list={[
+			"l-hlist",
+			{
+				"l-hlist--pill": pill,
+				"l-hlist--icon": icon,
+				"l-hlist--separated": separated,
+				[`l-hlist--${size}`]: size,
+				[`l-hlist--buttons-${buttonsSize}`]: buttonsSize,
+				"l-hlist--buttons": buttons,
+			},
+			"js-keyboard-nav",
+			cls,
+		]}
+		data-keyboard-nav-item="li > :first-child"
+		data-keyboard-nav-mode="nav"
+		{...props}
+	/>
+);
diff --git a/src/ui/layouts/SplitView.tsx b/src/ui/layouts/SplitView.tsx
new file mode 100644
index 0000000..81a55d1
--- /dev/null
+++ b/src/ui/layouts/SplitView.tsx
@@ -0,0 +1,27 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	"as": Tag;
+	"gapless"?: boolean;
+	"wrap-reverse"?: boolean;
+}>;
+
+export const SplitView = <T extends HTMLTag = "div">({
+	as: Tag = "div" as T,
+	gapless,
+	"wrap-reverse": wrapReverse,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		class:list={[
+			"l-split-view",
+			{
+				"l-split-view--gapless": gapless,
+				"l-split-view--wrap-reverse": wrapReverse,
+			},
+			cls,
+		]}
+		{...props}
+	/>
+);
diff --git a/src/ui/layouts/SplitViewPanel.tsx b/src/ui/layouts/SplitViewPanel.tsx
new file mode 100644
index 0000000..7f04b44
--- /dev/null
+++ b/src/ui/layouts/SplitViewPanel.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	as: Tag;
+	sticky?: boolean;
+	side?: "25";
+	min?: "50" | "100" | "200";
+	fill?: boolean;
+}>;
+
+export const SplitViewPanel = <T extends HTMLTag = "div">({
+	as: Tag = "div" as T,
+	sticky,
+	side,
+	min,
+	fill,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		class:list={[
+			"l-split-view__panel",
+			{
+				"l-split-view__panel--sticky": sticky,
+				[`l-split-view__panel--side-${side}`]: side,
+				[`l-split-view__panel--min-${min}`]: min,
+				"l-split-view__panel--fill": fill,
+			},
+			cls,
+		]}
+		{...props}
+	/>
+);
diff --git a/src/ui/objects/ActionButton.tsx b/src/ui/objects/ActionButton.tsx
new file mode 100644
index 0000000..76f859f
--- /dev/null
+++ b/src/ui/objects/ActionButton.tsx
@@ -0,0 +1,61 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	"as"?: Tag;
+	"label-as"?: string;
+	"pill"?: boolean;
+	"icon"?: JSX.Element;
+	"pre"?: JSX.Element;
+	"post"?: JSX.Element;
+	"highlighted"?: boolean;
+	"selected"?: boolean;
+	"wide"?: boolean;
+	"justify"?: boolean;
+	"align-block"?: boolean;
+	"level"?: "button" | "badge" | "quiet";
+	"variant"?: "accent" | "positive" | "negative" | "warning" | "static-black" | "static-white";
+	"size"?: "xs" | "sm" | "lg" | "xl";
+	"children"?: JSX.Element;
+}>;
+
+export const ActionButton = <T extends HTMLTag = "a">({
+	children,
+	as: Tag = "a" as T,
+	"label-as": Label = "span",
+	pill,
+	pre,
+	post,
+	wide,
+	justify,
+	icon,
+	"align-block": alignBlock,
+	highlighted,
+	selected,
+	level,
+	variant,
+	size,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		class:list={[
+			"o-button",
+			{
+				"o-button--pill": pill,
+				"o-button--wide": wide,
+				"o-button--justify": justify,
+				"o-button--icon": icon,
+				"o-button--align-block": alignBlock,
+				"is-highlighted": highlighted,
+				"is-selected": selected,
+				[`o-button--${level}`]: level && level !== "button",
+				[`o-button--${variant}`]: variant,
+				[`o-button--${size}`]: size,
+			},
+			cls,
+		]}
+		{...props}
+	>
+		{pre} {icon ?? <Label class="o-button__label">{children}</Label>} {post}
+	</Tag>
+);
diff --git a/src/ui/objects/Alert.tsx b/src/ui/objects/Alert.tsx
new file mode 100644
index 0000000..f590e18
--- /dev/null
+++ b/src/ui/objects/Alert.tsx
@@ -0,0 +1,21 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	as?: Tag;
+	icon?: JSX.Element;
+	variant?: "accent" | "positive" | "negative" | "warning";
+}>;
+
+export const Alert = <T extends HTMLTag = "div">({
+	children,
+	as: Tag = "div" as T,
+	variant,
+	icon,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag class:list={["o-alert", { [`o-alert--${variant}`]: variant }, cls]} {...props}>
+		{icon && <span class="u-mie-100">{icon}</span>}
+		{children}
+	</Tag>
+);
diff --git a/src/ui/objects/Avatar.tsx b/src/ui/objects/Avatar.tsx
new file mode 100644
index 0000000..459af12
--- /dev/null
+++ b/src/ui/objects/Avatar.tsx
@@ -0,0 +1,69 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import { StatusIndicator } from "$/ui/objects/StatusIndicator.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	"as"?: Tag;
+	"src"?: string;
+	"icon"?: JSX.Element;
+	"children"?: JSX.Element;
+	"class"?: string;
+	"circle"?: boolean;
+	"placeholder"?: boolean;
+	"color"?: `hsl(${number}, ${number}%, ${number}%)`;
+	"color2"?: `hsl(${number}, ${number}%, ${number}%)`;
+	"color-angle"?: number | `${number}`;
+	"size"?: "xs" | "sm" | "lg" | "xl" | "xxl" | "xxxl";
+	"status"?: "accent" | "positive" | "negative" | "warning";
+}>;
+
+const hslRegex = /^hsl\(([\d.]+), ([\d.]+%), ([\d.]+%)\)$/;
+
+export const Avatar = <T extends HTMLTag = "div">({
+	children,
+	as: Tag = "div" as T,
+	src,
+	icon,
+	circle,
+	placeholder,
+	color,
+	color2,
+	"color-angle": colorAngle,
+	size,
+	status,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		class:list={[
+			"o-avatar",
+			{
+				"o-avatar--circle": circle,
+				"o-avatar--placeholder": placeholder,
+				"o-avatar--colored": color && !color2,
+				"o-avatar--colored-gradient": color && !!color2,
+				[`o-avatar--${size}`]: !!size,
+			},
+			cls,
+		]}
+		style={{
+			"--o-avatar--bg-angle": colorAngle,
+			"--o-avatar--bg-color--h": color?.match(hslRegex)?.[1],
+			"--o-avatar--bg-color--l": color?.match(hslRegex)?.[3],
+			"--o-avatar--bg-color--s": color?.match(hslRegex)?.[2],
+			"--o-avatar--bg-color-2--h": color2?.match(hslRegex)?.[1],
+			"--o-avatar--bg-color-2--l": color2?.match(hslRegex)?.[3],
+			"--o-avatar--bg-color-2--s": color2?.match(hslRegex)?.[2],
+		}}
+		{...props}
+	>
+		{status && <StatusIndicator class="o-avatar__status" status={status} />}
+		{icon && <div class="o-avatar__icon u-ai-end u-jc-end">{icon}</div>}
+
+		{src ? (
+			<img alt="" class="o-avatar__content" src={src} />
+		) : (
+			<span class="o-avatar__content">{children}</span>
+		)}
+	</Tag>
+);
diff --git a/src/ui/objects/Badge.tsx b/src/ui/objects/Badge.tsx
new file mode 100644
index 0000000..e98ef0d
--- /dev/null
+++ b/src/ui/objects/Badge.tsx
@@ -0,0 +1,19 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import type { Props as ActionButtonProps } from "./ActionButton.tsx";
+
+import { ActionButton } from "./ActionButton.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	as?: Tag;
+	variant?: ActionButtonProps<Tag>["variant"];
+	pill?: boolean;
+	selected?: boolean;
+	size?: ActionButtonProps<Tag>["size"];
+	children?: JSX.Element;
+}>;
+
+export const Badge = <T extends HTMLTag = "span">({ as = "span" as T, ...props }: Props<T>) => (
+	// deno-lint-ignore no-explicit-any
+	<ActionButton as={as} level="badge" {...(props as any)} />
+);
diff --git a/src/ui/objects/Body.tsx b/src/ui/objects/Body.tsx
new file mode 100644
index 0000000..149662c
--- /dev/null
+++ b/src/ui/objects/Body.tsx
@@ -0,0 +1,21 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"div">;
+
+export const Body = ({ class: cls, ...props }: Props) => (
+	<div
+		class:list={[
+			"s-body",
+			"s-headings",
+			"s-headings--display",
+			"s-links",
+			"s-links--colored",
+			"s-code",
+			"s-figures",
+			"s-blockquotes",
+			"s-lists",
+			cls,
+		]}
+		{...props}
+	/>
+);
diff --git a/src/ui/objects/Button.tsx b/src/ui/objects/Button.tsx
new file mode 100644
index 0000000..68e1776
--- /dev/null
+++ b/src/ui/objects/Button.tsx
@@ -0,0 +1,26 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+import type { Props as ActionButtonProps } from "./ActionButton.tsx";
+
+import { ActionButton } from "./ActionButton.tsx";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	as?: Tag;
+	variant?: "primary" | ActionButtonProps<Tag>["variant"];
+	size?: ActionButtonProps<Tag>["size"];
+	wide?: boolean;
+	justify?: boolean;
+	children?: JSX.Element;
+}>;
+
+export const Button = <T extends HTMLTag = "a">({ as = "a" as T, variant, ...props }: Props<T>) => (
+	<ActionButton
+		as={as}
+		label-as={variant ? "strong" : "span"}
+		pill
+		selected={!!variant}
+		variant={variant === "primary" ? undefined : variant}
+		// deno-lint-ignore no-explicit-any
+		{...(props as any)}
+	/>
+);
diff --git a/src/ui/objects/Card.tsx b/src/ui/objects/Card.tsx
new file mode 100644
index 0000000..fd565e1
--- /dev/null
+++ b/src/ui/objects/Card.tsx
@@ -0,0 +1,47 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	"as"?: Tag;
+	"list"?: boolean;
+	"quiet"?: boolean;
+	"thumbnail"?: boolean;
+	"border"?: boolean;
+	"no-shadow"?: boolean;
+	"horizontal"?: boolean;
+	"interactive"?: boolean;
+	"highlight"?: boolean;
+	"children"?: JSX.Element;
+}>;
+
+export const Card = <T extends HTMLTag = "article">({
+	as: Tag = "article" as T,
+	list,
+	quiet,
+	thumbnail,
+	border,
+	"no-shadow": noShadow,
+	horizontal,
+	interactive,
+	highlight,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		class:list={[
+			"o-card",
+			{
+				"l-card-list__card": list,
+				"o-card--borderless": !border,
+				"o-card--horizontal": horizontal,
+				"o-card--interactive": interactive,
+				"o-card--highlight": highlight,
+				"o-card--quiet": quiet,
+				"o-card--collapsible": Tag === "details",
+				"o-card--shadow": !noShadow,
+				"o-card--thumbnail": thumbnail,
+			},
+			cls,
+		]}
+		{...props}
+	/>
+);
diff --git a/src/ui/objects/CardBody.tsx b/src/ui/objects/CardBody.tsx
new file mode 100644
index 0000000..aa5df3d
--- /dev/null
+++ b/src/ui/objects/CardBody.tsx
@@ -0,0 +1,32 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	"as"?: Tag;
+	"list"?: boolean;
+	"main"?: boolean;
+	"no-mbs-neutralize"?: boolean;
+	"children"?: JSX.Element;
+}>;
+
+export const CardBody = <T extends HTMLTag = "div">({
+	as: Tag = "div" as T,
+	list,
+	main,
+	"no-mbs-neutralize": noMbsNeutralize,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		class:list={[
+			"o-card__body",
+			{
+				"o-card__body--main": main,
+				"o-card__header": Tag === "summary",
+				"l-card-list__card-body": list,
+				"o-card__body--no-mbs-neutralize": noMbsNeutralize,
+			},
+			cls,
+		]}
+		{...props}
+	/>
+);
diff --git a/src/ui/objects/CardFooter.tsx b/src/ui/objects/CardFooter.tsx
new file mode 100644
index 0000000..63d74d0
--- /dev/null
+++ b/src/ui/objects/CardFooter.tsx
@@ -0,0 +1,11 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	as?: Tag;
+}>;
+
+export const CardFooter = <T extends HTMLTag = "div">({
+	as: Tag = "div" as T,
+	class: cls,
+	...props
+}: Props<T>) => <Tag class:list={["o-card__footer", cls]} {...props} />;
diff --git a/src/ui/objects/CardImage.tsx b/src/ui/objects/CardImage.tsx
new file mode 100644
index 0000000..12b9735
--- /dev/null
+++ b/src/ui/objects/CardImage.tsx
@@ -0,0 +1,40 @@
+import type { Props as ImageProps } from "corvos/plugins/images.ts";
+import type { CSSProperties } from "https://cdn.jsdelivr.net/gh/oscarotero/ssx@0.1.14/css.ts";
+
+import { Image } from "corvos/plugins/images.ts";
+
+export type Props = ImageProps & {
+	"list"?: boolean;
+	"img-class"?: unknown;
+	"img-style"?: CSSProperties;
+	"aspect"?: `${number} / ${number}`;
+	"content-class"?: unknown;
+	"children"?: JSX.Element;
+};
+
+export const CardImage = ({
+	children,
+	list,
+	"img-class": imgClass,
+	aspect,
+	"content-class": contentClass,
+	alt,
+	class: cls,
+	style,
+	"img-style": imgStyle,
+	...props
+}: Props) => (
+	<div class:list={["o-card__image", cls]} style={style}>
+		<Image
+			class:list={["o-card__image-img", { "l-card-list__card-image": list }, imgClass]}
+			style={{
+				"aspect-ratio": aspect,
+				"block-size": aspect ? "auto" : undefined,
+				...imgStyle,
+			}}
+			alt={alt}
+			{...props}
+		/>
+		{children && <div class:list={["o-card__image-overlay", contentClass]}>{children}</div>}
+	</div>
+);
diff --git a/src/ui/objects/CollapseCard.tsx b/src/ui/objects/CollapseCard.tsx
new file mode 100644
index 0000000..27e1ce2
--- /dev/null
+++ b/src/ui/objects/CollapseCard.tsx
@@ -0,0 +1,27 @@
+import { Card, type Props as CardProps } from "./Card.tsx";
+import { CardBody } from "./CardBody.tsx";
+import { Heading } from "./Heading.tsx";
+
+export type Props = CardProps<"details"> & {
+	"heading-level": "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+	"title"?: JSX.Element;
+	"header"?: JSX.Element;
+};
+
+export const CollapseCard = ({
+	"heading-level": headingLevel,
+	children,
+	title,
+	header,
+	...props
+}: Props) => (
+	<Card as="details" {...props}>
+		<CardBody as="summary">
+			<Heading as={headingLevel} class="u-mbs-0" level="lg">
+				{title}
+			</Heading>
+			{header}
+		</CardBody>
+		<CardBody>{children}</CardBody>
+	</Card>
+);
diff --git a/src/ui/objects/ContentImage.tsx b/src/ui/objects/ContentImage.tsx
new file mode 100644
index 0000000..ef45f89
--- /dev/null
+++ b/src/ui/objects/ContentImage.tsx
@@ -0,0 +1,15 @@
+import type { ClassValue } from "corvos/deps/clsx.ts";
+import type { Props as ImageProps } from "corvos/plugins/images.ts";
+
+import { Image } from "corvos/plugins/images.ts";
+
+export type Props = Omit<ImageProps, "src"> & {
+	"src"?: string;
+	"img-class"?: ClassValue;
+};
+
+export const ContentImage = ({ src, "img-class": imgClass, ...props }: Props) => (
+	<a href={src} data-lightbox {...props}>
+		<Image src={src} width="1400" class:list={imgClass} />
+	</a>
+);
diff --git a/src/ui/objects/Deflist.tsx b/src/ui/objects/Deflist.tsx
new file mode 100644
index 0000000..53d60d6
--- /dev/null
+++ b/src/ui/objects/Deflist.tsx
@@ -0,0 +1,7 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"dl">;
+
+export const Deflist = ({ class: cls, ...props }: Props) => (
+	<dl class={`o-deflist ${cls ?? ""}`} {...props} />
+);
diff --git a/src/ui/objects/Dialog.tsx b/src/ui/objects/Dialog.tsx
new file mode 100644
index 0000000..8ab6c4f
--- /dev/null
+++ b/src/ui/objects/Dialog.tsx
@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { Container } from "../layouts/Container.tsx";
+import { ActionButton } from "./ActionButton.tsx";
+import { Divider } from "./Divider.tsx";
+import { Heading } from "./Heading.tsx";
+
+export type Props = HTMLAttributes<"dialog"> & {
+	title: string;
+	divider?: boolean;
+	children?: JSX.Element;
+};
+
+export const Dialog = ({ children, title, divider, class: cls, ...props }: Props) => (
+	<dialog popover="auto" class:list={["o-dialog is-modal", cls]} closedby="any" {...props}>
+		<Container fixed class="o-dialog__content">
+			<header class="o-dialog__header">
+				<Heading as="h1" class="u-mbs-0" level="xxl">
+					{title}
+				</Heading>
+
+				<ActionButton
+					command="close"
+					commandfor={props.id}
+					as="button"
+					pill
+					size="lg"
+					level="quiet"
+					icon={<Icon icon="x" variant="bold" />}
+					class="u-mis-auto"
+				/>
+			</header>
+
+			{divider && <Divider level="faint" class="o-dialog__divider" />}
+
+			<div class="o-dialog__body">{children}</div>
+		</Container>
+	</dialog>
+);
diff --git a/src/ui/objects/Divider.tsx b/src/ui/objects/Divider.tsx
new file mode 100644
index 0000000..8f7efcd
--- /dev/null
+++ b/src/ui/objects/Divider.tsx
@@ -0,0 +1,51 @@
+import type { HTMLAttributes, HTMLTag } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"div" | "hr"> & {
+	"level"?: "strong" | "medium" | "quiet" | "faint";
+	"variant"?: "static-black" | "static-white";
+	"vertical"?: boolean | "dot";
+	"label-as"?: HTMLTag;
+	"children"?: JSX.Element;
+};
+
+export const Divider = ({
+	children,
+	level = "strong",
+	variant,
+	vertical,
+	"label-as": Label = "span",
+	class: cls,
+	...props
+}: Props) =>
+	children ? (
+		<div
+			class:list={[
+				"o-divider",
+				"o-divider--labelled",
+				`o-divider--${level}`,
+				{
+					[`o-divider--${variant}`]: variant,
+					"o-divider--vertical": vertical === true,
+					"o-divider--dot": vertical === "dot",
+				},
+				cls,
+			]}
+			{...props}
+		>
+			<Label class="o-divider__label u-mbs-0">{children}</Label>
+		</div>
+	) : (
+		<hr
+			class:list={[
+				"o-divider",
+				`o-divider--${level}`,
+				{
+					[`o-divider--${variant}`]: variant,
+					"o-divider--vertical": vertical === true,
+					"o-divider--dot": vertical === "dot",
+				},
+				cls,
+			]}
+			{...props}
+		/>
+	);
diff --git a/src/ui/objects/Emoji.tsx b/src/ui/objects/Emoji.tsx
new file mode 100644
index 0000000..f04f776
--- /dev/null
+++ b/src/ui/objects/Emoji.tsx
@@ -0,0 +1,21 @@
+import site from "@/corvos.config.ts";
+
+export interface Props {
+	pack: string;
+	emoji: string;
+	size?: "125" | "150" | "200";
+	class?: string;
+}
+
+export const Emoji = site.$.component(
+	({ pack, emoji, size, class: cls, ...props }: Props, pages) => {
+		const query = site.$.query(pages);
+		const sprite = query.type(".svg").match({ emojiPack: pack }).one();
+
+		return (
+			<svg class:list={["o-emoji o-emoji--sprite", { [`o-emoji--${size}`]: size }, cls]} {...props}>
+				<use href={`${sprite.url}#${emoji}`} />
+			</svg>
+		);
+	},
+);
diff --git a/src/ui/objects/Figure.tsx b/src/ui/objects/Figure.tsx
new file mode 100644
index 0000000..7f5e20a
--- /dev/null
+++ b/src/ui/objects/Figure.tsx
@@ -0,0 +1,13 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"figure"> & {
+	children?: JSX.Element;
+	caption?: JSX.Element;
+};
+
+export const Figure = ({ children, caption, class: cls, ...props }: Props) => (
+	<figure class:list={["o-figure", cls]} {...props}>
+		{children}
+		{caption && <figcaption class="o-figure__caption">{caption}</figcaption>}
+	</figure>
+);
diff --git a/src/ui/objects/FigureCaption.tsx b/src/ui/objects/FigureCaption.tsx
new file mode 100644
index 0000000..4112170
--- /dev/null
+++ b/src/ui/objects/FigureCaption.tsx
@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"figcaption"> & {
+	children?: JSX.Element;
+};
+
+export const FigureCaption = ({ children, class: cls, ...props }: Props) => (
+	<figcaption class:list={["o-figure__caption", cls]} {...props}>
+		{children}
+	</figcaption>
+);
diff --git a/src/ui/objects/Heading.tsx b/src/ui/objects/Heading.tsx
new file mode 100644
index 0000000..089de3a
--- /dev/null
+++ b/src/ui/objects/Heading.tsx
@@ -0,0 +1,49 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	as: Tag;
+	level?: "xxl" | "xl" | "lg" | "md" | "sm" | "xs";
+	variant?: "static-black" | "static-white";
+	display?: boolean;
+	highlight?: boolean;
+	children?: JSX.Element;
+}>;
+
+const levelTagMap = {
+	lg: "h3",
+	md: "h4",
+	sm: "h5",
+	xl: "h2",
+	xs: "h6",
+	xxl: "h1",
+} as const;
+
+export const Heading = <T extends HTMLTag = "div">({
+	as,
+	children,
+	display,
+	level,
+	variant,
+	highlight,
+	class: cls,
+	...props
+}: Props<T>) => {
+	const Tag = as ?? (level ? levelTagMap[level] : "strong");
+	return (
+		<Tag
+			class:list={[
+				"o-heading",
+				{
+					[`o-heading--${level}`]: level,
+					[`o-heading--${variant}`]: variant,
+					"o-heading--display": display,
+					"u-c-heading": Tag === "strong",
+				},
+				cls,
+			]}
+			{...props}
+		>
+			{highlight ? <span class="o-heading__highlight">{children}</span> : children}
+		</Tag>
+	);
+};
diff --git a/src/ui/objects/Icon.tsx b/src/ui/objects/Icon.tsx
new file mode 100644
index 0000000..e8af718
--- /dev/null
+++ b/src/ui/objects/Icon.tsx
@@ -0,0 +1,20 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import site from "@/corvos.config.ts";
+
+export type Props = HTMLAttributes<"svg"> & {
+	icon: Parameters<typeof site.$.icon>[0];
+	variant?: Parameters<typeof site.$.icon>[1];
+};
+
+export const Icon = ({ icon, variant, class: cls, ...props }: Props) => (
+	<svg
+		aria-hidden="true"
+		class:list={["o-icon", cls]}
+		height="1.142857143em"
+		width="1.142857143em"
+		{...props}
+	>
+		<use href={site.$.icon(icon, variant)} />
+	</svg>
+);
diff --git a/src/ui/objects/Lightbox.tsx b/src/ui/objects/Lightbox.tsx
new file mode 100644
index 0000000..00268cc
--- /dev/null
+++ b/src/ui/objects/Lightbox.tsx
@@ -0,0 +1,122 @@
+/** Biome-ignore-all lint/a11y/useValidAnchor: <explanation> */
+/** Biome-ignore-all lint/a11y/useAltText: <explanation> */
+
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { ActionButton } from "./ActionButton.tsx";
+import { LoadingIndicator } from "./LoadingIndicator.tsx";
+import { Thumbnail } from "./Thumbnail.tsx";
+
+export type Props = HTMLAttributes<"dialog">;
+
+export const Lightbox = ({ class: cls, ...props }: Props) => (
+	<dialog
+		class:list={["o-lightbox o-lightbox--static-black is-modal t-static-white", cls]}
+		closedby="any"
+		x-id="['lightbox']"
+		x-bind:id="$id('lightbox')"
+		x-data="lightbox"
+		x-on:close="handleClose"
+		x-on:touchstart="handleTouchStart"
+		x-on:touchend="handleTouchEnd"
+		{...{
+			"x-on:keydown.document.capture": "handleKeyDown",
+		}}
+		{...props}
+	>
+		<div x-show="items.length > 1" class="o-lightbox__info">
+			<small class="u-mis-100 u-mie-200 u-d-none@sm-lo">
+				<strong x-text="current + 1"></strong> <span class="u-c-mute-more u-mi-50">&#x2044;</span>{" "}
+				<strong x-text="items.length"></strong>
+			</small>
+			<ActionButton
+				x-on:click="prev"
+				as="button"
+				pill
+				level="quiet"
+				icon={<Icon icon="caret-left" variant="bold" />}
+				variant="static-white"
+			/>
+			<ActionButton
+				x-on:click="next"
+				as="button"
+				pill
+				level="quiet"
+				icon={<Icon icon="caret-right" variant="bold" />}
+				variant="static-white"
+			/>
+		</div>
+
+		<div class="o-lightbox__controls">
+			<ActionButton
+				x-show="zoomedFull"
+				x-on:click="toggleZoom"
+				as="button"
+				class="u-mie-100"
+				pill
+				level="quiet"
+				icon={<Icon icon="magnifying-glass-minus" variant="bold" />}
+				variant="static-white"
+			/>
+			<ActionButton
+				x-show="!zoomedFull"
+				x-on:click="toggleZoom"
+				as="button"
+				class="u-mie-100"
+				pill
+				level="quiet"
+				icon={<Icon icon="magnifying-glass-plus" variant="bold" />}
+				variant="static-white"
+			/>
+			<ActionButton
+				x-bind:commandfor="$id('lightbox')"
+				command="close"
+				as="button"
+				pill
+				level="quiet"
+				icon={<Icon icon="x" variant="bold" />}
+				variant="static-white"
+			/>
+		</div>
+
+		<img
+			class="o-lightbox__img"
+			x-ref="img"
+			x-bind:src="currentItem?.src ?? ''"
+			x-bind:srcset="currentItem?.srcset ?? ''"
+			x-bind:alt="currentItem?.alt ?? ''"
+			x-on:load="loading = false"
+			x-on:mousemove="handleMouseMove"
+			x-on:touchmove="handleTouchMove"
+			x-on:dblclick="handleDoubleClick"
+			x-bind:class="{ 'is-hidden': loading }"
+			x-bind:style="{ transform: `translate(${offsetX}px, ${offsetY}px) scale(${zoom})` }"
+			{...{
+				"x-on:mousedown.prevent": "handleMouseDown",
+				"x-on:mouseup.window": "handleMouseUp",
+				"x-on:wheel.prevent": "handleScroll",
+			}}
+		/>
+
+		<div class="o-lightbox__placeholder">
+			<LoadingIndicator />
+		</div>
+
+		<div class="o-lightbox__thumbnails" x-show="items.length > 1" x-ref="thumbnails">
+			<template x-for="(item, i) in items">
+				<Thumbnail
+					class="o-lightbox__thumbnail"
+					variant="static-white"
+					x-bind:src="item.thumbnail ?? item.src"
+					x-bind:srcset="item.srcset"
+					x-bind:alt="item.alt"
+					x-bind:href="item.src"
+					x-bind:class="{ 'is-selected': i === current }"
+					{...{ "x-on:click.prevent": "current = i" }}
+				/>
+			</template>
+		</div>
+	</dialog>
+);
diff --git a/src/ui/objects/LoadingIndicator.tsx b/src/ui/objects/LoadingIndicator.tsx
new file mode 100644
index 0000000..325cbb3
--- /dev/null
+++ b/src/ui/objects/LoadingIndicator.tsx
@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"svg">;
+
+export const LoadingIndicator = (props: Props) => (
+	<svg height="50" width="50" {...props}>
+		<title>Loading indicator</title>
+		<use href="#loading-indicator" />
+	</svg>
+);
diff --git a/src/ui/objects/Navbar.tsx b/src/ui/objects/Navbar.tsx
new file mode 100644
index 0000000..4439e58
--- /dev/null
+++ b/src/ui/objects/Navbar.tsx
@@ -0,0 +1,37 @@
+/** Biome-ignore-all lint/a11y/noNoninteractiveElementToInteractiveRole: <explanation> */
+
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"nav"> & {
+	"adapt"?: boolean;
+	"quiet"?: boolean;
+	"align-block"?: boolean;
+	"variant"?: "static-black" | "static-white";
+};
+
+export const Navbar = ({
+	adapt,
+	quiet,
+	"align-block": alignBlock,
+	variant,
+	class: cls,
+	...props
+}: Props) => (
+	<nav
+		class:list={[
+			"o-navbar",
+			{
+				"o-navbar--adapt": adapt,
+				"o-navbar--quiet": quiet,
+				"o-navbar--align-block": alignBlock,
+				[`o-navbar--${variant}`]: variant,
+			},
+			"js-keyboard-nav",
+			cls,
+		]}
+		data-keyboard-nav-item=".o-navbar__item"
+		data-keyboard-nav-mode="nav"
+		role="menubar"
+		{...props}
+	/>
+);
diff --git a/src/ui/objects/NavbarItem.tsx b/src/ui/objects/NavbarItem.tsx
new file mode 100644
index 0000000..c0e347f
--- /dev/null
+++ b/src/ui/objects/NavbarItem.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	as: Tag;
+	icon?: JSX.Element;
+	pre?: JSX.Element;
+	post?: JSX.Element;
+	selected?: boolean;
+}>;
+
+export const NavbarItem = <T extends HTMLTag = "a">({
+	children,
+	as: Tag = "a" as T,
+	icon,
+	pre,
+	post,
+	selected,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		aria-current={selected ? "page" : undefined}
+		class:list={["o-navbar__item", { "is-selected": selected }, cls]}
+		role="menuitem"
+		{...props}
+	>
+		{icon && <div class="o-navbar__item-label">{children}</div>}
+
+		<div class="o-navbar__item-content">
+			{pre} {icon ?? <span class="o-navbar__item-content-text">{children}</span>} {post}
+		</div>
+	</Tag>
+);
diff --git a/src/ui/objects/PlaceholderBox.tsx b/src/ui/objects/PlaceholderBox.tsx
new file mode 100644
index 0000000..d64866f
--- /dev/null
+++ b/src/ui/objects/PlaceholderBox.tsx
@@ -0,0 +1,11 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	as: Tag;
+}>;
+
+export const PlaceholderBox = <T extends HTMLTag = "div">({
+	as: Tag = "div" as T,
+	class: cls,
+	...props
+}: Props<T>) => <Tag class:list={["o-placeholder-box u-ta-center u-c-mute", cls]} {...props} />;
diff --git a/src/ui/objects/SideNav.tsx b/src/ui/objects/SideNav.tsx
new file mode 100644
index 0000000..f96ce7a
--- /dev/null
+++ b/src/ui/objects/SideNav.tsx
@@ -0,0 +1,14 @@
+/** Biome-ignore-all lint/a11y/noNoninteractiveElementToInteractiveRole: <explanation> */
+
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"nav">;
+
+export const SideNav = ({ class: cls, ...props }: Props) => (
+	<nav
+		class:list={["o-side-nav", "js-keyboard-nav", cls]}
+		data-keyboard-nav-item=".o-side-nav__item"
+		data-keyboard-nav-mode="list"
+		{...props}
+	/>
+);
diff --git a/src/ui/objects/SideNavItem.tsx b/src/ui/objects/SideNavItem.tsx
new file mode 100644
index 0000000..fb8f523
--- /dev/null
+++ b/src/ui/objects/SideNavItem.tsx
@@ -0,0 +1,33 @@
+import type { HTMLTag, Polymorphic } from "corvos/plugins/jsx.ts";
+
+export type Props<Tag extends HTMLTag> = Polymorphic<{
+	as: Tag;
+	icon?: JSX.Element;
+	pre?: JSX.Element;
+	post?: JSX.Element;
+	selected?: boolean;
+}>;
+
+export const SideNavItem = <T extends HTMLTag = "a">({
+	children,
+	as: Tag = "a" as T,
+	icon,
+	pre,
+	post,
+	selected,
+	class: cls,
+	...props
+}: Props<T>) => (
+	<Tag
+		aria-current={selected ? "location" : undefined}
+		class:list={["o-side-nav__item", { "is-selected": selected }, cls]}
+		role="menuitem"
+		{...props}
+	>
+		{icon && <div class="l-media__block o-side-nav__icon-slot">{icon}</div>}
+
+		<div class="l-media__block l-media__block--main">
+			{pre} {children} {post}
+		</div>
+	</Tag>
+);
diff --git a/src/ui/objects/StatusIndicator.tsx b/src/ui/objects/StatusIndicator.tsx
new file mode 100644
index 0000000..06b6481
--- /dev/null
+++ b/src/ui/objects/StatusIndicator.tsx
@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"div"> & {
+	status?: "accent" | "positive" | "negative" | "warning";
+};
+
+export const StatusIndicator = ({ status, class: cls, ...props }: Props) => (
+	<div
+		class:list={[
+			"o-status-indicator",
+			{
+				[`is-${status}`]: status,
+			},
+			cls,
+		]}
+		{...props}
+	/>
+);
diff --git a/src/ui/objects/Tab.tsx b/src/ui/objects/Tab.tsx
new file mode 100644
index 0000000..15c1e5d
--- /dev/null
+++ b/src/ui/objects/Tab.tsx
@@ -0,0 +1,14 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"a"> & {
+	selected?: boolean;
+};
+
+export const Tab = ({ selected, class: cls, ...props }: Props) => (
+	<a
+		aria-selected={`${selected}`}
+		class:list={["o-tabbar__tab", { "is-selected": selected }, cls]}
+		role="tab"
+		{...props}
+	/>
+);
diff --git a/src/ui/objects/Tabbar.tsx b/src/ui/objects/Tabbar.tsx
new file mode 100644
index 0000000..58c58fa
--- /dev/null
+++ b/src/ui/objects/Tabbar.tsx
@@ -0,0 +1,43 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"nav"> & {
+	"variant"?: "accent";
+	"quiet"?: boolean;
+	"adapt"?: boolean;
+	"tabs-class"?: unknown;
+};
+
+export const Tabbar = ({
+	children,
+	variant,
+	quiet,
+	adapt,
+	"tabs-class": tabsClass,
+	class: cls,
+	...props
+}: Props) => (
+	<nav
+		class:list={[
+			"o-tabbar",
+			{
+				[`o-tabbar--${variant}`]: variant,
+				"o-tabbar--quiet": quiet,
+				"o-tabbar--adapt": adapt,
+			},
+			"js-keyboard-nav",
+			cls,
+		]}
+		data-keyboard-nav-item=".o-tabbar__tab"
+		data-keyboard-nav-mode="nav"
+		{...props}
+	>
+		<div
+			aria-label={props["aria-label"]}
+			aria-orientation="horizontal"
+			class:list={["o-tabbar__tabs", tabsClass]}
+			role="tablist"
+		>
+			{children}
+		</div>
+	</nav>
+);
diff --git a/src/ui/objects/TextField.tsx b/src/ui/objects/TextField.tsx
new file mode 100644
index 0000000..dc7893a
--- /dev/null
+++ b/src/ui/objects/TextField.tsx
@@ -0,0 +1,62 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+export type Props = HTMLAttributes<"input"> & {
+	"pre"?: JSX.Element;
+	"post"?: JSX.Element;
+	"invalid"?: boolean;
+	"pill"?: boolean;
+	"x-model"?: string;
+};
+
+export const TextField = ({
+	pre,
+	post,
+	disabled,
+	invalid,
+	pill,
+	placeholder,
+	readonly,
+	value,
+	pattern,
+	required,
+	"x-model": xModel,
+	class: cls,
+	...props
+}: Props) => {
+	const extended = !!pre || !!post;
+
+	return (
+		<div
+			class:list={[
+				"o-text-field",
+				{
+					"is-disabled": disabled,
+					"is-invalid": invalid,
+					"l-media": extended,
+					"l-media--gapless": extended,
+					"o-text-field--extended": extended,
+					"o-text-field--pill": pill,
+				},
+				cls,
+			]}
+			{...props}
+		>
+			{pre}{" "}
+			<input
+				class="o-text-field__native"
+				class:list={{
+					"l-media__block": extended,
+					"l-media__block--main": extended,
+				}}
+				disabled={disabled}
+				pattern={pattern}
+				placeholder={placeholder}
+				readonly={readonly}
+				required={required}
+				value={value}
+				x-model={xModel}
+			/>{" "}
+			{post} <div class="o-text-field__bg"></div>
+		</div>
+	);
+};
diff --git a/src/ui/objects/Thumbnail.tsx b/src/ui/objects/Thumbnail.tsx
new file mode 100644
index 0000000..4ef76d3
--- /dev/null
+++ b/src/ui/objects/Thumbnail.tsx
@@ -0,0 +1,46 @@
+import type { Props as ImageProps } from "corvos/plugins/images.ts";
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Image } from "corvos/plugins/images.ts";
+
+export type Props = HTMLAttributes<"a"> &
+	ImageProps & {
+		"x-bind:src"?: string;
+		"x-bind:srcset"?: string;
+		"x-bind:alt"?: string;
+		"variant"?: "static-black" | "static-white";
+	};
+
+export const Thumbnail = ({
+	src,
+	srcset,
+	alt,
+	"x-bind:src": xbindSrc,
+	"x-bind:srcset": xbindSrcset,
+	"x-bind:alt": xbindAlt,
+	variant,
+	class: cls,
+	widths,
+	width,
+	height,
+	densities,
+	"no-transform": noTransform,
+	...props
+}: Props) => (
+	<a class:list={["o-thumbnail", { [`o-thumbnail--${variant}`]: variant }, cls]} {...props}>
+		<Image
+			class="o-thumbnail__image"
+			src={src}
+			srcset={srcset}
+			widths={widths as undefined}
+			width={width}
+			height={height}
+			densities={densities}
+			no-transform={noTransform}
+			alt={alt}
+			x-bind:src={xbindSrc}
+			x-bind:srcset={xbindSrcset}
+			x-bind:alt={xbindAlt}
+		/>
+	</a>
+);
-- 
cgit v1.3.1