Init

32 files changed, 1045 insertions, 0 deletions

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>
+);