/packages/gui/src/docs/components/Preview.astro at 80acc21c27c7b5b8d9a47081a49ff9b65254d6c7

---
// SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com>
// SPDX-License-Identifier: AGPL-3.0-only

import ThemeOverride from "./ThemeOverride.astro";

interface Props {
	title?: string;
	colorScheme?: "dark" | "light";
	contrast?: "more" | "no-preference";
}

const { colorScheme, contrast, size, title, padding, ...rest } = Astro.props;

const style = size ? `--_width:${size[0]}px;--_height:${size[1]}px` : undefined;
const canvasStyle = size ? `aspect-ratio:${size[0]} / ${size[1]}` : undefined;
---

<style>
	.preview {
		display: flex;
		flex-direction: column;
		border: 1px solid oklch(var(--color-border) / var(--alpha-border-medium));

		border-radius: 4px;
		overflow: hidden;
	}

	.preview.fullscreen {
		position: fixed;
		inset: 0;
		margin: 0;
		border: none;

		background-color: oklch(var(--color-bg));
		border-radius: 0;
		z-index: 999;
	}

	.canvas {
		--_grid-color-value: oklch(
			var(--color-border)
			/
			var(--alpha-border-subtle)
		);
		flex: 1;
		display: block;
		box-sizing: border-box;
	}
	.preview.fullscreen > .canvas {
		min-height: 0;
		height: auto !important;
		flex-basis: 100% !important;

		background-image:
			linear-gradient(
				var(--_grid-color-value) 0.5px,
				transparent 0.5px,
				transparent calc(100% - 0.5px),
				var(--_grid-color-value) calc(100% - 0.5px)
			),
			linear-gradient(
			90deg,
			var(--_grid-color-value) 0.5px,
			transparent 0.5px,
			transparent calc(100% - 0.5px),
			var(--_grid-color-value) calc(100% - 0.5px)
		);
		background-size: var(--space-px-12) var(--space-px-12);
	}
	.preview.fullscreen > .canvas:has(.override.container) {
		position: relative;
		aspect-ratio: auto !important;

		overflow: auto;
	}

	.override {
		display: block;
		font-size: 1rem;
		line-height: 1.5;
		font-family: var(--font-sans);
		font-weight: var(--font-regular);
		box-sizing: border-box;

		background-color: oklch(var(--color-bg));
		color: oklch(var(--color-fg) / var(--alpha-fg-medium));
	}

	.override.padded {
		padding: var(--space-px-7);
	}

	.override.container {
		container-type: size;
		width: var(--_width);
		height: var(--_height);

		transform-origin: top left;
	}

	.preview.fullscreen .override:not(.container) {
		width: 100%;
		height: 100%;
	}
	.preview.fullscreen .override.container {
		position: absolute;
		top: 50%;
		left: 50%;

		box-shadow: var(--space-px-1) var(--space-px-1) var(--space-px-6)
			oklch(0% 0% 0deg / 15%);

		transform: translate(-50%, -50%) !important;
	}

	.header {
		display: block;
		padding: var(--space-px-5);
		font-size: var(--font-sm);
		font-weight: bold;
		border-bottom: 1px solid
			oklch(var(--color-border) / var(--alpha-border-subtle));

		background-color: oklch(var(--color-fg) / 2%);
		color: oklch(var(--color-fg) / var(--alpha-fg-medium));
	}

	.footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: var(--space-px-3);
		border-top: 1px solid
			oklch(var(--color-border) / var(--alpha-border-subtle));
		font-family: var(--font-mono);
		font-size: var(--font-xs);
		padding: var(--space-px-4);

		background-color: oklch(var(--color-fg) / 2%);
		color: oklch(var(--color-fg) / var(--alpha-fg-subtle));
	}

	.fullscreen-button {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		width: var(--space-px-9);
		height: var(--space-px-9);

		cursor: pointer;
	}
	.fullscreen-button:focus-visible {
		color: oklch(var(--color-focus));
	}

	.fullscreen-button-icon {
		rotate: 45deg;
	}

	.fullscreen-button-label {
		opacity: 0;
		position: absolute;
		top: 0;
		left: 0;
		width: 1px;
		height: 1px;

		overflow: hidden;
		white-space: nowrap;
	}

	.footer > code {
		flex-shrink: 1;
	}
</style>

<script>
let fullscreenTarget = null;

document.addEventListener("keydown", (event) => {
	if (
		event.isComposing ||
		event.key !== "Escape" ||
		!fullscreenTarget ||
		!(fullscreenTarget instanceof HTMLButtonElement)
	) {
		return;
	}

	event.preventDefault();
	event.stopPropagation();
	fullscreenTarget.click();
});

function toggleFullscreen({ container, trigger, icon }) {
	if (container.classList.contains("fullscreen")) {
		container.classList.remove("fullscreen");
		icon.textContent = "←→";
		trigger.title = "全画面表示";
		fullscreenTarget = null;
	} else {
		container.classList.add("fullscreen");
		icon.textContent = "→←";
		trigger.title = "全画面表示をやめる";
		fullscreenTarget = trigger;
	}
}

for (const button of document.getElementsByClassName("fullscreen-button")) {
	button.addEventListener("click", (event) => {
		event.preventDefault();
		event.stopPropagation();

		const container = button.parentElement?.parentElement;
		if (!container || !container.classList.contains("preview")) {
			return;
		}

		const icon = button.querySelector(".fullscreen-button-icon");

		if (typeof document.startViewTransition === "function") {
			container.style.viewTransitionName = "preview";

			const transition = document.startViewTransition(() => {
				toggleFullscreen({
					container,
					trigger: button,
					icon,
				});
			});

			transition.finished.then(() => {
				container.style.viewTransitionName = "";
			});
		} else {
			toggleFullscreen({
				container,
				trigger: button,
				icon,
			});
		}
	});
}

function resizeOverride(el) {
	if (!el) {
		return;
	}

	const width = parseInt(el.getAttribute("data-width"), 10);
	const height = parseInt(el.getAttribute("data-height"), 10);

	const rect = el.getBoundingClientRect();
	const parent = el.parentElement.getBoundingClientRect();

	const scale = parent.width / width;
	el.style.transform = `scale(${scale})`;

	const canvasHeight = height * scale;
	el.parentElement.style.flexBasis = `${canvasHeight}px`;
	el.parentElement.style.height = `${canvasHeight}px`;
}

const observer = new ResizeObserver((entries) => {
	for (const entry of entries) {
		resizeOverride(
			entry.target.querySelector("docs-theme-override.override.container"),
		);
	}
});

for (const container of document.querySelectorAll(
	"docs-theme-override.override.container",
)) {
	resizeOverride(container);

	observer.observe(container.parentElement.parentElement);
}
</script>

<div {...rest} class="preview">
	{
		title && (
			<div class="header">
				{title}
			</div>
		)
	}
	<div class="canvas" style={canvasStyle}>
		<ThemeOverride
			class:list={["override", { padded: padding !== "no", container: !!size }]}
			color-scheme={colorScheme}
			contrast={contrast}
			style={style}
			data-width={size?.[0]}
			data-height={size?.[1]}
		>
			<slot />
		</ThemeOverride>
	</div>
	<div class="footer">
		<button class="fullscreen-button" title="全画面表示">
			<span class="fullscreen-button-icon">←→</span>
		</button>
		{
			(colorScheme || contrast) && (
				<code>
					{colorScheme && <span>(prefers-color-scheme: {colorScheme})</span>}
					{colorScheme && contrast ? <span> and </span> : null}
					{contrast && <span>(prefers-contrast: {contrast})</span>}
				</code>
			)
		}
	</div>
</div>