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/objects/Lightbox.tsx | 122 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 src/ui/objects/Lightbox.tsx

(limited to 'src/ui/objects/Lightbox.tsx')

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