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/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 +++++++++++++++++++++++++
 6 files changed, 229 insertions(+)
 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

(limited to 'src/ui/layouts')

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}
+	/>
+);
-- 
cgit v1.3.1