@chan.run/design 0.1.0

package/dist/index.mjs

@@ -0,0 +1,2035 @@
+import { Badge, Box, Card, Center, Code, Flex, Grid, HStack, Heading, IconButton, Text, createSystem, defaultConfig, defineConfig, defineSlotRecipe, useSlotRecipe } from "@chakra-ui/react";
+import { useTheme } from "next-themes";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ColorModeButton.tsx
+function ColorModeButton(props) {
+	const { resolvedTheme, setTheme } = useTheme();
+	const [mounted, setMounted] = useState(false);
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+	const isDark = resolvedTheme === "dark";
+	return /* @__PURE__ */ jsx(Flex, {
+		as: "button",
+		"aria-label": isDark ? "Switch to light mode" : "Switch to dark mode",
+		onClick: () => setTheme(isDark ? "light" : "dark"),
+		w: "34px",
+		h: "34px",
+		bg: "chan.bg.card",
+		border: "1px solid",
+		borderColor: "chan.border",
+		borderRadius: "8px",
+		align: "center",
+		justify: "center",
+		cursor: "pointer",
+		flexShrink: 0,
+		transition: "background 0.15s, border-color 0.15s",
+		_hover: { bg: "chan.bg.hover" },
+		position: "relative",
+		_before: {
+			content: "\"\"",
+			position: "absolute",
+			inset: "-5px"
+		},
+		...props,
+		children: renderIcon(mounted, isDark)
+	});
+}
+function renderIcon(mounted, isDark) {
+	if (!mounted) return null;
+	if (isDark) return /* @__PURE__ */ jsx(MoonIcon, {});
+	return /* @__PURE__ */ jsx(SunIcon, {});
+}
+function SunIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		style: { color: "var(--chakra-colors-chan-text-dim)" },
+		children: [/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "4"
+		}), /* @__PURE__ */ jsx("path", { d: "M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41" })]
+	});
+}
+function MoonIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		style: { color: "var(--chakra-colors-chan-text-dim)" },
+		children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+	});
+}
+//#endregion
+//#region src/components/Splash.tsx
+function Splash({ open, children, orientation = "vertical", size = "md", holdMs = 0, revealMs = 1e3 }) {
+	const styles = useSlotRecipe({ key: "splash" })({
+		orientation,
+		size
+	});
+	const [phase, setPhase] = useState(open ? "visible" : "gone");
+	useEffect(() => {
+		if (open) {
+			setPhase("visible");
+			return;
+		}
+		const splitTimer = setTimeout(() => setPhase("splitting"), holdMs);
+		const goneTimer = setTimeout(() => setPhase("gone"), holdMs + revealMs);
+		return () => {
+			clearTimeout(splitTimer);
+			clearTimeout(goneTimer);
+		};
+	}, [
+		open,
+		holdMs,
+		revealMs
+	]);
+	if (phase === "gone") return null;
+	const splitting = phase === "splitting";
+	const panelStartStyle = computePanelOffset({
+		orientation,
+		side: "start",
+		splitting
+	});
+	const panelEndStyle = computePanelOffset({
+		orientation,
+		side: "end",
+		splitting
+	});
+	const transitionDuration = `${revealMs}ms`;
+	let pointerEvents = "auto";
+	if (splitting) pointerEvents = "none";
+	return /* @__PURE__ */ jsxs(Box, {
+		css: styles.root,
+		style: { pointerEvents },
+		children: [/* @__PURE__ */ jsx(Box, {
+			css: styles.panelStart,
+			style: {
+				...panelStartStyle,
+				transitionDuration
+			},
+			children: /* @__PURE__ */ jsx(Box, {
+				css: styles.hub,
+				children
+			})
+		}), /* @__PURE__ */ jsx(Box, {
+			css: styles.panelEnd,
+			style: {
+				...panelEndStyle,
+				transitionDuration
+			}
+		})]
+	});
+}
+function computePanelOffset({ orientation, side, splitting }) {
+	if (!splitting) return {
+		top: 0,
+		left: 0,
+		bottom: 0,
+		right: 0
+	};
+	if (orientation === "vertical" && side === "start") return { top: "-100%" };
+	if (orientation === "vertical" && side === "end") return { bottom: "-100%" };
+	if (orientation === "horizontal" && side === "start") return { left: "-100%" };
+	return { right: "-100%" };
+}
+//#endregion
+//#region src/components/slides/DeckCard.tsx
+function DeckCard({ slug, title, date, description, tags = [], slideCount, onClick }) {
+	return /* @__PURE__ */ jsxs(Card.Root, {
+		bg: "chan.bg.card",
+		borderWidth: "1px",
+		borderColor: "chan.border",
+		borderRadius: "sm",
+		cursor: onClick ? "pointer" : "default",
+		transition: "background 0.15s, border-color 0.15s",
+		_hover: onClick ? {
+			bg: "chan.bg.hover",
+			borderColor: "chan.orange.border"
+		} : {},
+		onClick: () => onClick?.(slug),
+		role: onClick ? "link" : void 0,
+		children: [/* @__PURE__ */ jsxs(Card.Body, {
+			gap: "3",
+			p: "5",
+			children: [
+				/* @__PURE__ */ jsx(Card.Title, {
+					fontFamily: "display",
+					fontWeight: 800,
+					fontSize: "18px",
+					letterSpacing: "0.02em",
+					color: "chan.text",
+					children: title
+				}),
+				/* @__PURE__ */ jsx(Card.Description, {
+					fontFamily: "body",
+					fontSize: "xs",
+					color: "chan.text.dim",
+					lineHeight: "1.6",
+					children: description
+				}),
+				tags.length > 0 && /* @__PURE__ */ jsx(HStack, {
+					gap: "2",
+					flexWrap: "wrap",
+					children: tags.map((tag) => /* @__PURE__ */ jsx(Badge, {
+						variant: "outline",
+						fontSize: "8px",
+						fontFamily: "body",
+						letterSpacing: "0.1em",
+						textTransform: "uppercase",
+						color: "chan.text.faint",
+						borderColor: "chan.border",
+						px: "2",
+						children: tag
+					}, tag))
+				})
+			]
+		}), /* @__PURE__ */ jsx(Card.Footer, {
+			borderTopWidth: "1px",
+			borderColor: "chan.border.soft",
+			px: "5",
+			py: "3",
+			children: /* @__PURE__ */ jsxs(Flex, {
+				w: "full",
+				justify: "space-between",
+				align: "center",
+				children: [/* @__PURE__ */ jsx(Text, {
+					fontFamily: "body",
+					fontSize: "8px",
+					color: "chan.text.faint",
+					letterSpacing: "0.12em",
+					textTransform: "uppercase",
+					children: date
+				}), /* @__PURE__ */ jsxs(Text, {
+					fontFamily: "body",
+					fontSize: "8px",
+					color: "chan.text.faint",
+					letterSpacing: "0.12em",
+					children: [slideCount, /* @__PURE__ */ jsx(Box, {
+						as: "span",
+						ml: "1",
+						children: slideCount === 1 ? "SLIDE" : "SLIDES"
+					})]
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/slides/slide-elements.tsx
+/** Pick safe HTML attributes for Chakra components */
+function pick(props) {
+	const safe = {};
+	for (const [key, value] of Object.entries(props)) if (key === "children" || key === "id" || key === "className" || key.startsWith("aria-") || key.startsWith("data-")) safe[key] = value;
+	return safe;
+}
+function SlideH2(props) {
+	return /* @__PURE__ */ jsx(Heading, {
+		as: "h2",
+		fontFamily: "display",
+		fontWeight: 800,
+		fontSize: "28px",
+		letterSpacing: "0.02em",
+		color: "chan.text",
+		mb: "4",
+		lineHeight: "1.15",
+		...pick(props)
+	});
+}
+function SlideH3(props) {
+	return /* @__PURE__ */ jsx(Heading, {
+		as: "h3",
+		fontFamily: "display",
+		fontWeight: 700,
+		fontSize: "22px",
+		color: "chan.text",
+		mb: "3",
+		lineHeight: "1.2",
+		...pick(props)
+	});
+}
+function SlideP(props) {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "p",
+		fontFamily: "body",
+		fontSize: "15px",
+		lineHeight: "1.7",
+		color: "chan.text.dim",
+		mb: "3",
+		...pick(props)
+	});
+}
+function SlideStrong(props) {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "strong",
+		fontWeight: 500,
+		color: "chan.text",
+		...pick(props)
+	});
+}
+function SlideEm(props) {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "em",
+		fontStyle: "italic",
+		...pick(props)
+	});
+}
+function SlideUl(props) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: "ul",
+		fontFamily: "body",
+		fontSize: "15px",
+		lineHeight: "1.8",
+		color: "chan.text.dim",
+		pl: "5",
+		mb: "3",
+		css: {
+			"& > li": { listStyleType: "disc" },
+			"& > li::marker": { color: "chan.orange" }
+		},
+		...pick(props)
+	});
+}
+function SlideOl(props) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: "ol",
+		fontFamily: "body",
+		fontSize: "15px",
+		lineHeight: "1.8",
+		color: "chan.text.dim",
+		pl: "5",
+		mb: "3",
+		css: {
+			"& > li": { listStyleType: "decimal" },
+			"& > li::marker": { color: "chan.orange" }
+		},
+		...pick(props)
+	});
+}
+function SlideLi(props) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: "li",
+		mb: "1",
+		pl: "1",
+		...pick(props)
+	});
+}
+function SlideBlockquote(props) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: "blockquote",
+		borderLeft: "3px solid",
+		borderColor: "chan.orange",
+		pl: "4",
+		py: "1",
+		mb: "3",
+		css: { "& > p": {
+			marginBottom: 0,
+			color: "chan.text.dim"
+		} },
+		...pick(props)
+	});
+}
+function SlideInlineCode(props) {
+	return /* @__PURE__ */ jsx(Code, {
+		fontFamily: "body",
+		fontSize: "0.85em",
+		px: "1.5",
+		py: "0.5",
+		bg: "chan.bg.code",
+		border: "1px solid",
+		borderColor: "chan.border",
+		borderRadius: "xs",
+		color: "chan.orange",
+		variant: "plain",
+		...pick(props)
+	});
+}
+function SlidePre(props) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: "pre",
+		bg: "chan.bg.code",
+		borderRadius: "xs",
+		border: "1px solid",
+		borderColor: "chan.border",
+		p: "4",
+		overflow: "auto",
+		mb: "3",
+		fontFamily: "body",
+		fontSize: "13px",
+		lineHeight: "1.6",
+		color: "chan.text.dim",
+		css: { "& code": {
+			background: "none",
+			padding: 0,
+			border: "none",
+			color: "inherit"
+		} },
+		...pick(props)
+	});
+}
+function SlideImg(props) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: "img",
+		maxW: "100%",
+		borderRadius: "xs",
+		border: "1px solid",
+		borderColor: "chan.border",
+		mb: "3",
+		...pick(props)
+	});
+}
+function SlideHr(props) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: "hr",
+		border: "none",
+		borderTop: "1px solid",
+		borderColor: "chan.border",
+		my: "6",
+		...pick(props)
+	});
+}
+function TitleH2(props) {
+	return /* @__PURE__ */ jsx(Heading, {
+		as: "h2",
+		fontFamily: "display",
+		fontWeight: 900,
+		fontSize: "48px",
+		letterSpacing: "0.04em",
+		textTransform: "uppercase",
+		color: "chan.text",
+		textAlign: "center",
+		lineHeight: "1.1",
+		mb: "3",
+		...pick(props)
+	});
+}
+function TitleP(props) {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "p",
+		fontFamily: "body",
+		fontSize: "14px",
+		color: "chan.text.dim",
+		textAlign: "center",
+		letterSpacing: "0.06em",
+		...pick(props)
+	});
+}
+function SectionH2(props) {
+	return /* @__PURE__ */ jsx(Heading, {
+		as: "h2",
+		fontFamily: "display",
+		fontWeight: 800,
+		fontSize: "36px",
+		letterSpacing: "0.03em",
+		textTransform: "uppercase",
+		color: "chan.text",
+		textAlign: "center",
+		lineHeight: "1.2",
+		mb: "2",
+		...pick(props)
+	});
+}
+function SectionP(props) {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "p",
+		fontFamily: "body",
+		fontSize: "14px",
+		color: "chan.text.faint",
+		textAlign: "center",
+		...pick(props)
+	});
+}
+function QuoteBlockquote(props) {
+	return /* @__PURE__ */ jsx(Box, {
+		as: "blockquote",
+		position: "relative",
+		textAlign: "center",
+		css: { "& > p": {
+			marginBottom: 0,
+			fontFamily: "body",
+			fontSize: "20px",
+			lineHeight: 1.6,
+			color: "chan.text",
+			fontStyle: "italic"
+		} },
+		...pick(props)
+	});
+}
+function QuoteP(props) {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "p",
+		fontFamily: "body",
+		fontSize: "20px",
+		lineHeight: "1.6",
+		color: "chan.text",
+		textAlign: "center",
+		fontStyle: "italic",
+		...pick(props)
+	});
+}
+//#endregion
+//#region src/components/slides/SlideComponents.ts
+const defaultComponents = {
+	h2: SlideH2,
+	h3: SlideH3,
+	p: SlideP,
+	strong: SlideStrong,
+	em: SlideEm,
+	ul: SlideUl,
+	ol: SlideOl,
+	li: SlideLi,
+	blockquote: SlideBlockquote,
+	code: SlideInlineCode,
+	pre: SlidePre,
+	img: SlideImg,
+	hr: SlideHr
+};
+const layoutOverrides = {
+	title: {
+		h2: TitleH2,
+		p: TitleP
+	},
+	section: {
+		h2: SectionH2,
+		p: SectionP
+	},
+	quote: {
+		blockquote: QuoteBlockquote,
+		p: QuoteP
+	}
+};
+/**
+* Get a component mapping for rendering slide markdown content.
+*
+* Each layout has specific overrides for visual treatment:
+* - `default` — standard content slide
+* - `title` — large centered heading, uppercase
+* - `section` — centered divider heading
+* - `quote` — large italic centered text
+* - `blank` — same as default (layout wrapper handles blank)
+*/
+function getSlideComponents(layout = "default") {
+	const overrides = layoutOverrides[layout] ?? {};
+	return {
+		...defaultComponents,
+		...overrides
+	};
+}
+//#endregion
+//#region src/components/slides/SlideControls.tsx
+function ChevronLeft() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "18",
+		height: "18",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
+	});
+}
+function ChevronRight() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "18",
+		height: "18",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		children: /* @__PURE__ */ jsx("polyline", { points: "9 6 15 12 9 18" })
+	});
+}
+function ExpandIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		width: "16",
+		height: "16",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		children: [
+			/* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+			/* @__PURE__ */ jsx("polyline", { points: "9 21 3 21 3 15" }),
+			/* @__PURE__ */ jsx("line", {
+				x1: "21",
+				y1: "3",
+				x2: "14",
+				y2: "10"
+			}),
+			/* @__PURE__ */ jsx("line", {
+				x1: "3",
+				y1: "21",
+				x2: "10",
+				y2: "14"
+			})
+		]
+	});
+}
+function SlideControls({ currentSlide, totalSlides, onSlideChange, onTogglePresent, isPresenting }) {
+	const isFirst = currentSlide === 0;
+	const isLast = currentSlide === totalSlides - 1;
+	return /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		justify: "center",
+		gap: "4",
+		py: "3",
+		children: [
+			/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Previous slide",
+				variant: "ghost",
+				size: "sm",
+				disabled: isFirst,
+				onClick: () => onSlideChange(currentSlide - 1),
+				color: isFirst ? "chan.text.faint" : "chan.text.dim",
+				_hover: isFirst ? {} : {
+					bg: "chan.bg.hover",
+					color: "chan.text"
+				},
+				minW: "touchTarget",
+				minH: "touchTarget",
+				children: /* @__PURE__ */ jsx(ChevronLeft, {})
+			}),
+			/* @__PURE__ */ jsxs(Text, {
+				fontFamily: "body",
+				fontSize: "xs",
+				color: "chan.text.faint",
+				letterSpacing: "0.1em",
+				minW: "60px",
+				textAlign: "center",
+				children: [
+					currentSlide + 1,
+					/* @__PURE__ */ jsx(Box, {
+						as: "span",
+						mx: "1",
+						color: "chan.border",
+						children: "/"
+					}),
+					totalSlides
+				]
+			}),
+			/* @__PURE__ */ jsx(IconButton, {
+				"aria-label": "Next slide",
+				variant: "ghost",
+				size: "sm",
+				disabled: isLast,
+				onClick: () => onSlideChange(currentSlide + 1),
+				color: isLast ? "chan.text.faint" : "chan.text.dim",
+				_hover: isLast ? {} : {
+					bg: "chan.bg.hover",
+					color: "chan.text"
+				},
+				minW: "touchTarget",
+				minH: "touchTarget",
+				children: /* @__PURE__ */ jsx(ChevronRight, {})
+			}),
+			onTogglePresent && /* @__PURE__ */ jsx(IconButton, {
+				"aria-label": isPresenting ? "Exit presentation" : "Present fullscreen",
+				variant: "ghost",
+				size: "sm",
+				onClick: onTogglePresent,
+				color: "chan.text.faint",
+				_hover: {
+					bg: "chan.bg.hover",
+					color: "chan.text"
+				},
+				minW: "touchTarget",
+				minH: "touchTarget",
+				ml: "2",
+				children: /* @__PURE__ */ jsx(ExpandIcon, {})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/components/slides/SlideLayout.tsx
+const sharedCss = {
+	"& pre, & pre.shiki, & pre[class*='shiki']": {
+		whiteSpace: "pre-wrap !important",
+		wordBreak: "break-word",
+		fontSize: "0.75em",
+		lineHeight: 1.6,
+		overflow: "auto",
+		maxHeight: "55%",
+		padding: "0.8em",
+		borderRadius: "6px",
+		background: "var(--chakra-colors-chan\\.bg\\.code) !important"
+	},
+	"& pre code, & pre.shiki code": {
+		whiteSpace: "pre-wrap !important",
+		wordBreak: "break-word",
+		display: "block"
+	},
+	"& pre .line": { display: "block" },
+	"& pre span[style]": {
+		color: "var(--shiki-dark) !important",
+		fontWeight: "var(--shiki-dark-font-weight) !important"
+	}
+};
+function DefaultLayout({ children }) {
+	return /* @__PURE__ */ jsx(Box, {
+		w: "full",
+		h: "full",
+		p: "8",
+		overflow: "auto",
+		css: sharedCss,
+		children
+	});
+}
+function TitleLayout({ children }) {
+	return /* @__PURE__ */ jsx(Center, {
+		w: "full",
+		h: "full",
+		flexDirection: "column",
+		css: sharedCss,
+		children
+	});
+}
+function SectionLayout({ children }) {
+	return /* @__PURE__ */ jsx(Center, {
+		w: "full",
+		h: "full",
+		flexDirection: "column",
+		css: sharedCss,
+		children
+	});
+}
+function QuoteLayout({ children }) {
+	return /* @__PURE__ */ jsx(Center, {
+		w: "full",
+		h: "full",
+		px: "10",
+		css: sharedCss,
+		children: /* @__PURE__ */ jsx(Flex, {
+			direction: "column",
+			align: "center",
+			maxW: "640px",
+			children
+		})
+	});
+}
+function BlankLayout({ children }) {
+	return /* @__PURE__ */ jsx(Box, {
+		w: "full",
+		h: "full",
+		css: sharedCss,
+		children
+	});
+}
+const layouts = {
+	default: DefaultLayout,
+	title: TitleLayout,
+	section: SectionLayout,
+	quote: QuoteLayout,
+	blank: BlankLayout
+};
+const CANVAS_W = 960;
+const CANVAS_H = 600;
+function useSlideScale(containerRef) {
+	const [scale, setScale] = useState(1);
+	const recalc = useCallback(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const scaleX = el.clientWidth / CANVAS_W;
+		const scaleY = el.clientHeight / CANVAS_H;
+		setScale(Math.min(scaleX, scaleY));
+	}, [containerRef]);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		recalc();
+		const observer = new ResizeObserver(recalc);
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [containerRef, recalc]);
+	return scale;
+}
+function SlideLayoutComponent({ layout, children }) {
+	const LayoutComponent = layouts[layout] ?? layouts.default;
+	const containerRef = useRef(null);
+	const scale = useSlideScale(containerRef);
+	return /* @__PURE__ */ jsx(Box, {
+		ref: containerRef,
+		w: "full",
+		h: "full",
+		bg: "chan.bg.card",
+		borderRadius: "sm",
+		overflow: "hidden",
+		position: "relative",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		children: /* @__PURE__ */ jsx(Box, {
+			w: `${CANVAS_W}px`,
+			h: `${CANVAS_H}px`,
+			flexShrink: 0,
+			style: {
+				transform: `scale(${scale})`,
+				transformOrigin: "center center"
+			},
+			children: /* @__PURE__ */ jsx(LayoutComponent, { children })
+		})
+	});
+}
+//#endregion
+//#region src/components/slides/SlideViewer.tsx
+function SlideViewer({ slides, currentSlide, onSlideChange, isPresenting = false, onTogglePresent }) {
+	const slide = slides[currentSlide];
+	if (!slide) return null;
+	return /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		w: "full",
+		h: "full",
+		bg: "chan.bg",
+		children: [/* @__PURE__ */ jsx(Box, {
+			flex: "1",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center",
+			p: isPresenting ? "0" : "4",
+			children: /* @__PURE__ */ jsx(Box, {
+				w: "full",
+				maxW: isPresenting ? "100%" : "960px",
+				aspectRatio: isPresenting ? void 0 : "16 / 10",
+				h: isPresenting ? "full" : void 0,
+				children: /* @__PURE__ */ jsx(SlideLayoutComponent, {
+					layout: slide.layout,
+					children: slide.children
+				})
+			})
+		}), !isPresenting && /* @__PURE__ */ jsx(SlideControls, {
+			currentSlide,
+			totalSlides: slides.length,
+			onSlideChange,
+			onTogglePresent,
+			isPresenting
+		})]
+	});
+}
+//#endregion
+//#region src/components/Wordmark.tsx
+function Wordmark({ fontSize = "20px", color = "chan.text", pulseDot, ...rest }) {
+	const dotProps = pulseDot ? {
+		animation: "chan-pulse",
+		display: "inline-block"
+	} : {};
+	return /* @__PURE__ */ jsxs(Text, {
+		textStyle: "chan.wordmark",
+		fontSize,
+		color,
+		...rest,
+		children: [
+			"CHAN",
+			/* @__PURE__ */ jsx(Box, {
+				as: "span",
+				color: "chan.orange",
+				...dotProps,
+				children: "."
+			}),
+			"RUN"
+		]
+	});
+}
+//#endregion
+//#region src/components/Topbar.tsx
+function HamburgerButton({ onClick }) {
+	return /* @__PURE__ */ jsxs(Flex, {
+		as: "button",
+		"aria-label": "Open menu",
+		onClick,
+		w: "34px",
+		h: "34px",
+		bg: "chan.bg.card",
+		border: "1px solid",
+		borderColor: "chan.border",
+		borderRadius: "8px",
+		direction: "column",
+		align: "center",
+		justify: "center",
+		gap: "4px",
+		cursor: "pointer",
+		flexShrink: 0,
+		transition: "background 0.15s, border-color 0.15s",
+		_hover: {
+			bg: "chan.bg.hover",
+			borderColor: "chan.border"
+		},
+		position: "relative",
+		_before: {
+			content: "\"\"",
+			position: "absolute",
+			inset: "-5px"
+		},
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				w: "14px",
+				h: "1.5px",
+				bg: "chan.text.dim",
+				borderRadius: "full"
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				w: "14px",
+				h: "1.5px",
+				bg: "chan.text.dim",
+				borderRadius: "full"
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				w: "14px",
+				h: "1.5px",
+				bg: "chan.text.dim",
+				borderRadius: "full"
+			})
+		]
+	});
+}
+function Topbar({ onMenuOpen }) {
+	return /* @__PURE__ */ jsxs(Flex, {
+		as: "header",
+		display: {
+			base: "flex",
+			md: "none"
+		},
+		position: "fixed",
+		top: 0,
+		left: 0,
+		right: 0,
+		h: "topbar",
+		bg: "chan.bg.soft",
+		borderBottom: "1px solid",
+		borderColor: "chan.border",
+		align: "center",
+		justify: "space-between",
+		px: "18px",
+		zIndex: 80,
+		children: [/* @__PURE__ */ jsx(Wordmark, {}), /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: "8px",
+			children: [/* @__PURE__ */ jsx(ColorModeButton, {}), onMenuOpen && /* @__PURE__ */ jsx(HamburgerButton, { onClick: onMenuOpen })]
+		})]
+	});
+}
+//#endregion
+//#region src/TokenShowcase.tsx
+function Swatch({ name, token, hex }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		borderRadius: "sm",
+		border: "1px solid",
+		borderColor: "chan.border",
+		overflow: "hidden",
+		children: [/* @__PURE__ */ jsx(Box, {
+			h: "44px",
+			bg: hex
+		}), /* @__PURE__ */ jsxs(Box, {
+			p: "8px 10px",
+			bg: "chan.bg.card",
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					fontSize: "9px",
+					letterSpacing: "0.04em",
+					color: "chan.text",
+					children: name
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					fontSize: "8px",
+					letterSpacing: "0.06em",
+					color: "chan.text.faint",
+					mt: "1px",
+					children: hex
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					fontSize: "7.5px",
+					letterSpacing: "0.06em",
+					color: "chan.orange",
+					mt: "2px",
+					children: token
+				})
+			]
+		})]
+	});
+}
+function SectionTitle({ id, title }) {
+	return /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		gap: "14px",
+		mb: "24px",
+		pb: "12px",
+		borderBottom: "1px solid",
+		borderColor: "chan.border",
+		children: [/* @__PURE__ */ jsx(Text, {
+			fontSize: "8px",
+			letterSpacing: "0.22em",
+			textTransform: "uppercase",
+			color: "chan.orange",
+			children: id
+		}), /* @__PURE__ */ jsx(Heading, {
+			fontFamily: "display",
+			fontWeight: "700",
+			fontSize: "28px",
+			letterSpacing: "0.04em",
+			textTransform: "uppercase",
+			color: "chan.text",
+			children: title
+		})]
+	});
+}
+function SubHead({ children }) {
+	return /* @__PURE__ */ jsx(Text, {
+		fontSize: "8px",
+		letterSpacing: "0.2em",
+		textTransform: "uppercase",
+		color: "chan.orange",
+		mb: "14px",
+		mt: "32px",
+		children
+	});
+}
+function TypeRow({ label, children }) {
+	return /* @__PURE__ */ jsxs(Flex, {
+		align: "baseline",
+		gap: "20px",
+		p: "18px 20px",
+		borderBottom: "1px solid",
+		borderColor: "chan.border.soft",
+		children: [/* @__PURE__ */ jsx(Text, {
+			fontSize: "8px",
+			letterSpacing: "0.12em",
+			textTransform: "uppercase",
+			color: "chan.text.faint",
+			minW: "72px",
+			flexShrink: 0,
+			pt: "3px",
+			children: label
+		}), /* @__PURE__ */ jsx(Box, {
+			flex: "1",
+			lineHeight: "1.1",
+			children
+		})]
+	});
+}
+function SpaceRow({ token, px, use }) {
+	return /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		gap: "12px",
+		bg: "chan.bg.card",
+		border: "1px solid",
+		borderColor: "chan.border",
+		borderRadius: "xs",
+		p: "10px 16px",
+		children: [
+			/* @__PURE__ */ jsx(Text, {
+				fontSize: "9px",
+				letterSpacing: "0.1em",
+				color: "chan.orange",
+				minW: "80px",
+				children: token
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				fontSize: "9px",
+				letterSpacing: "0.08em",
+				color: "chan.text.dim",
+				minW: "36px",
+				children: px
+			}),
+			/* @__PURE__ */ jsx(Box, {
+				flex: "1",
+				h: "8px",
+				bg: "chan.bg",
+				borderRadius: "2px",
+				overflow: "hidden",
+				children: /* @__PURE__ */ jsx(Box, {
+					h: "100%",
+					bg: "chan.orange.bg",
+					borderRight: "2px solid",
+					borderColor: "chan.orange",
+					w: `${Math.min(parseInt(px, 10) / 72 * 100, 100)}%`
+				})
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				fontSize: "8px",
+				letterSpacing: "0.06em",
+				color: "chan.text.faint",
+				minW: "160px",
+				textAlign: "right",
+				children: use
+			})
+		]
+	});
+}
+function RadiusDemo({ label, value }) {
+	return /* @__PURE__ */ jsxs(Box, {
+		textAlign: "center",
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				w: "80px",
+				h: "80px",
+				border: "1px solid",
+				borderColor: "chan.border",
+				bg: "chan.bg.card",
+				borderRadius: value,
+				mx: "auto",
+				mb: "8px"
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				fontSize: "9px",
+				color: "chan.orange",
+				letterSpacing: "0.1em",
+				children: label
+			}),
+			/* @__PURE__ */ jsx(Text, {
+				fontSize: "8px",
+				color: "chan.text.faint",
+				mt: "2px",
+				children: value
+			})
+		]
+	});
+}
+function BadgeDemo({ label, bg, color, borderColor }) {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		display: "inline-block",
+		fontSize: "7.5px",
+		letterSpacing: "0.14em",
+		textTransform: "uppercase",
+		p: "3px 8px",
+		borderRadius: "3px",
+		bg,
+		color,
+		border: "1px solid",
+		borderColor,
+		children: label
+	});
+}
+function ButtonDemo({ label, bg, color, borderColor }) {
+	return /* @__PURE__ */ jsx(Text, {
+		as: "button",
+		display: "inline-flex",
+		alignItems: "center",
+		p: "9px 16px",
+		borderRadius: "xs",
+		fontFamily: "body",
+		fontSize: "10px",
+		letterSpacing: "0.1em",
+		textTransform: "uppercase",
+		fontWeight: "500",
+		cursor: "pointer",
+		bg,
+		color,
+		border: borderColor ? "1px solid" : "none",
+		borderColor,
+		children: label
+	});
+}
+function TokenShowcase() {
+	return /* @__PURE__ */ jsxs(Box, {
+		maxW: "860px",
+		mx: "auto",
+		p: "64px 40px 120px",
+		fontFamily: "body",
+		children: [
+			/* @__PURE__ */ jsxs(Box, {
+				pb: "64px",
+				borderBottom: "1px solid",
+				borderColor: "chan.border",
+				mb: "64px",
+				children: [
+					/* @__PURE__ */ jsx(Text, {
+						fontSize: "9px",
+						letterSpacing: "0.2em",
+						textTransform: "uppercase",
+						color: "chan.text.faint",
+						mb: "48px",
+						children: "chan.run / design tokens"
+					}),
+					/* @__PURE__ */ jsxs(Heading, {
+						fontFamily: "display",
+						fontWeight: "900",
+						fontSize: "clamp(48px, 8vw, 72px)",
+						lineHeight: "0.88",
+						letterSpacing: "-0.01em",
+						textTransform: "uppercase",
+						mb: "24px",
+						color: "chan.text",
+						children: [
+							"TOKEN",
+							/* @__PURE__ */ jsx("br", {}),
+							/* @__PURE__ */ jsx(Text, {
+								as: "span",
+								color: "chan.orange",
+								children: "SHOWCASE"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						fontSize: "12px",
+						lineHeight: "1.9",
+						color: "chan.text.dim",
+						maxW: "520px",
+						children: "Visual reference for all design tokens defined in the @chan.run/design package. Every color, font, spacing, and radius value rendered for verification."
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				mb: "72px",
+				children: [
+					/* @__PURE__ */ jsx(SectionTitle, {
+						id: "01",
+						title: "Color Tokens"
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Backgrounds" }),
+					/* @__PURE__ */ jsxs(Grid, {
+						templateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
+						gap: "8px",
+						mb: "24px",
+						children: [
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Base",
+								token: "chan.bg",
+								hex: "#0a0a08"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Canvas",
+								token: "chan.bg.soft",
+								hex: "#111110"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Card",
+								token: "chan.bg.card",
+								hex: "#161614"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Hover",
+								token: "chan.bg.hover",
+								hex: "#1d1d1a"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Sidebar",
+								token: "chan.bg.sidebar",
+								hex: "#0f0f0d"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Brand Orange" }),
+					/* @__PURE__ */ jsxs(Grid, {
+						templateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
+						gap: "8px",
+						mb: "24px",
+						children: [
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Orange",
+								token: "chan.orange",
+								hex: "#ff4d00"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Dim",
+								token: "chan.orange.dim",
+								hex: "#cc3d00"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Glow",
+								token: "chan.orange.glow",
+								hex: "#ff6a2a"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Bg tint",
+								token: "chan.orange.bg",
+								hex: "rgba(255,77,0,0.08)"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Border",
+								token: "chan.orange.border",
+								hex: "rgba(255,77,0,0.20)"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Text" }),
+					/* @__PURE__ */ jsxs(Grid, {
+						templateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
+						gap: "8px",
+						mb: "24px",
+						children: [
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Primary",
+								token: "chan.text",
+								hex: "#f0ece4"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Dim",
+								token: "chan.text.dim",
+								hex: "#7a7870"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Faint",
+								token: "chan.text.faint",
+								hex: "#3a3a36"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Borders" }),
+					/* @__PURE__ */ jsxs(Grid, {
+						templateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
+						gap: "8px",
+						mb: "24px",
+						children: [
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Default",
+								token: "chan.border",
+								hex: "#242420"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Soft",
+								token: "chan.border.soft",
+								hex: "#1a1a18"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Sidebar",
+								token: "chan.border.sidebar",
+								hex: "#1e1e1c"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Semantic" }),
+					/* @__PURE__ */ jsxs(Grid, {
+						templateColumns: "repeat(auto-fill, minmax(110px, 1fr))",
+						gap: "8px",
+						mb: "24px",
+						children: [
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Green",
+								token: "chan.green",
+								hex: "#3a8c5c"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Yellow",
+								token: "chan.yellow",
+								hex: "#a88000"
+							}),
+							/* @__PURE__ */ jsx(Swatch, {
+								name: "Danger",
+								token: "chan.danger",
+								hex: "#d06060"
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				mb: "72px",
+				children: [
+					/* @__PURE__ */ jsx(SectionTitle, {
+						id: "02",
+						title: "Typography"
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Barlow Condensed — Display" }),
+					/* @__PURE__ */ jsxs(Box, {
+						bg: "chan.bg.card",
+						border: "1px solid",
+						borderColor: "chan.border",
+						borderRadius: "sm",
+						overflow: "hidden",
+						mb: "8px",
+						children: [
+							/* @__PURE__ */ jsx(TypeRow, {
+								label: "Hero / 900",
+								children: /* @__PURE__ */ jsx(Text, {
+									fontFamily: "display",
+									fontWeight: "900",
+									fontSize: "clamp(40px, 7vw, 72px)",
+									textTransform: "uppercase",
+									color: "chan.text",
+									children: "TOOLS THAT RUN"
+								})
+							}),
+							/* @__PURE__ */ jsx(TypeRow, {
+								label: "Title / 800",
+								children: /* @__PURE__ */ jsx(Text, {
+									fontFamily: "display",
+									fontWeight: "800",
+									fontSize: "clamp(32px, 5vw, 48px)",
+									textTransform: "uppercase",
+									color: "chan.text",
+									children: "ONE PLACE FOR EVERY TOOL"
+								})
+							}),
+							/* @__PURE__ */ jsx(TypeRow, {
+								label: "Section / 700",
+								children: /* @__PURE__ */ jsx(Text, {
+									fontFamily: "display",
+									fontWeight: "700",
+									fontSize: "28px",
+									textTransform: "uppercase",
+									color: "chan.text",
+									children: "Products · Open Source · About"
+								})
+							}),
+							/* @__PURE__ */ jsx(TypeRow, {
+								label: "Card / 700",
+								children: /* @__PURE__ */ jsx(Text, {
+									fontFamily: "display",
+									fontWeight: "700",
+									fontSize: "21px",
+									textTransform: "uppercase",
+									color: "chan.text",
+									children: "RESTUNNEL"
+								})
+							}),
+							/* @__PURE__ */ jsx(TypeRow, {
+								label: "Small / 700",
+								children: /* @__PURE__ */ jsx(Text, {
+									fontFamily: "display",
+									fontWeight: "700",
+									fontSize: "17px",
+									textTransform: "uppercase",
+									color: "chan.text",
+									children: "MISE-MSVC"
+								})
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "IBM Plex Mono — Body" }),
+					/* @__PURE__ */ jsxs(Box, {
+						bg: "chan.bg.card",
+						border: "1px solid",
+						borderColor: "chan.border",
+						borderRadius: "sm",
+						overflow: "hidden",
+						mb: "8px",
+						children: [
+							/* @__PURE__ */ jsx(TypeRow, {
+								label: "Body / 400",
+								children: /* @__PURE__ */ jsx(Text, {
+									fontFamily: "body",
+									fontWeight: "400",
+									fontSize: "13px",
+									color: "chan.text.dim",
+									children: "We build tools that work, document them, and ship them. No noise. No vaporware."
+								})
+							}),
+							/* @__PURE__ */ jsx(TypeRow, {
+								label: "Small / 400",
+								children: /* @__PURE__ */ jsx(Text, {
+									fontFamily: "body",
+									fontWeight: "400",
+									fontSize: "11px",
+									color: "chan.text.dim",
+									children: "Route datacenter traffic through personal devices using Noise Protocol encryption."
+								})
+							}),
+							/* @__PURE__ */ jsx(TypeRow, {
+								label: "Meta / 400",
+								children: /* @__PURE__ */ jsx(Text, {
+									fontFamily: "body",
+									fontWeight: "400",
+									fontSize: "10px",
+									color: "chan.text.dim",
+									children: "Hub-and-spoke · SOCKS5 / HTTP proxy output · Residential IP"
+								})
+							}),
+							/* @__PURE__ */ jsx(TypeRow, {
+								label: "Label / 500",
+								children: /* @__PURE__ */ jsx(Text, {
+									fontFamily: "body",
+									fontWeight: "500",
+									fontSize: "9px",
+									letterSpacing: "0.15em",
+									textTransform: "uppercase",
+									color: "chan.text.faint",
+									children: "PRODUCT STUDIO · CHIANG MAI · 18°N 98°E"
+								})
+							}),
+							/* @__PURE__ */ jsx(TypeRow, {
+								label: "Light / 300",
+								children: /* @__PURE__ */ jsx(Text, {
+									fontFamily: "body",
+									fontWeight: "300",
+									fontSize: "12px",
+									color: "chan.text.dim",
+									children: "Secondary content and supporting metadata."
+								})
+							})
+						]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				mb: "72px",
+				children: [
+					/* @__PURE__ */ jsx(SectionTitle, {
+						id: "03",
+						title: "Spacing & Layout"
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Spacing Scale (8px grid)" }),
+					/* @__PURE__ */ jsxs(Flex, {
+						direction: "column",
+						gap: "6px",
+						mb: "24px",
+						children: [
+							/* @__PURE__ */ jsx(SpaceRow, {
+								token: "--space-1",
+								px: "4px",
+								use: "Icon gap, tight inline spacing"
+							}),
+							/* @__PURE__ */ jsx(SpaceRow, {
+								token: "--space-2",
+								px: "8px",
+								use: "Badge padding, small gaps"
+							}),
+							/* @__PURE__ */ jsx(SpaceRow, {
+								token: "--space-3",
+								px: "12px",
+								use: "Button padding, nav item gap"
+							}),
+							/* @__PURE__ */ jsx(SpaceRow, {
+								token: "--space-4",
+								px: "16px",
+								use: "Card padding (sm), grid gap"
+							}),
+							/* @__PURE__ */ jsx(SpaceRow, {
+								token: "--space-5",
+								px: "24px",
+								use: "Card padding, sidebar padding"
+							}),
+							/* @__PURE__ */ jsx(SpaceRow, {
+								token: "--space-6",
+								px: "32px",
+								use: "Section element spacing"
+							}),
+							/* @__PURE__ */ jsx(SpaceRow, {
+								token: "--space-7",
+								px: "48px",
+								use: "Section header margin"
+							}),
+							/* @__PURE__ */ jsx(SpaceRow, {
+								token: "--space-8",
+								px: "56px",
+								use: "Section horizontal padding"
+							}),
+							/* @__PURE__ */ jsx(SpaceRow, {
+								token: "--space-9",
+								px: "64px",
+								use: "Hero padding top"
+							}),
+							/* @__PURE__ */ jsx(SpaceRow, {
+								token: "--space-10",
+								px: "72px",
+								use: "Between major chapters"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Border Radius" }),
+					/* @__PURE__ */ jsxs(Flex, {
+						gap: "32px",
+						mb: "24px",
+						children: [
+							/* @__PURE__ */ jsx(RadiusDemo, {
+								label: "--radius-xs",
+								value: "5px"
+							}),
+							/* @__PURE__ */ jsx(RadiusDemo, {
+								label: "--radius-sm",
+								value: "10px"
+							}),
+							/* @__PURE__ */ jsx(RadiusDemo, {
+								label: "--radius-md",
+								value: "18px"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Layout Sizes" }),
+					/* @__PURE__ */ jsx(Box, {
+						bg: "chan.bg.card",
+						border: "1px solid",
+						borderColor: "chan.border",
+						borderRadius: "sm",
+						overflow: "hidden",
+						children: [
+							["Sidebar width", "256px"],
+							["Mobile topbar", "52px"],
+							["Mobile bottom nav", "58px"],
+							["Touch target min", "44px"]
+						].map(([label, value]) => /* @__PURE__ */ jsxs(Flex, {
+							p: "10px 16px",
+							borderBottom: "1px solid",
+							borderColor: "chan.border.soft",
+							justify: "space-between",
+							children: [/* @__PURE__ */ jsx(Text, {
+								fontSize: "10px",
+								color: "chan.text.dim",
+								children: label
+							}), /* @__PURE__ */ jsx(Text, {
+								fontSize: "10px",
+								color: "chan.orange",
+								letterSpacing: "0.06em",
+								children: value
+							})]
+						}, label))
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				mb: "72px",
+				children: [
+					/* @__PURE__ */ jsx(SectionTitle, {
+						id: "04",
+						title: "Components"
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Badges" }),
+					/* @__PURE__ */ jsxs(Flex, {
+						gap: "8px",
+						mb: "24px",
+						flexWrap: "wrap",
+						children: [
+							/* @__PURE__ */ jsx(BadgeDemo, {
+								label: "Active",
+								bg: "chan.orange.bg",
+								color: "chan.orange",
+								borderColor: "chan.orange.border"
+							}),
+							/* @__PURE__ */ jsx(BadgeDemo, {
+								label: "In Dev",
+								bg: "chan.yellow.bg",
+								color: "chan.yellow",
+								borderColor: "chan.yellow.border"
+							}),
+							/* @__PURE__ */ jsx(BadgeDemo, {
+								label: "Planned",
+								bg: "chan.bg.hover.subtle",
+								color: "chan.text.faint",
+								borderColor: "chan.border"
+							}),
+							/* @__PURE__ */ jsx(BadgeDemo, {
+								label: "Stable",
+								bg: "chan.green.bg",
+								color: "chan.green",
+								borderColor: "chan.green.border"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Buttons" }),
+					/* @__PURE__ */ jsxs(Flex, {
+						gap: "8px",
+						mb: "24px",
+						flexWrap: "wrap",
+						children: [
+							/* @__PURE__ */ jsx(ButtonDemo, {
+								label: "Primary",
+								bg: "chan.orange",
+								color: "chan.bg"
+							}),
+							/* @__PURE__ */ jsx(ButtonDemo, {
+								label: "Secondary",
+								bg: "transparent",
+								color: "chan.text",
+								borderColor: "chan.border"
+							}),
+							/* @__PURE__ */ jsx(ButtonDemo, {
+								label: "Ghost",
+								bg: "transparent",
+								color: "chan.orange",
+								borderColor: "chan.orange.border"
+							}),
+							/* @__PURE__ */ jsx(ButtonDemo, {
+								label: "Danger",
+								bg: "chan.danger.bg",
+								color: "chan.danger",
+								borderColor: "chan.danger.border"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(SubHead, { children: "Status Indicators" }),
+					/* @__PURE__ */ jsx(Flex, {
+						gap: "8px",
+						mb: "24px",
+						flexWrap: "wrap",
+						children: [
+							{
+								label: "Live",
+								color: "chan.orange",
+								bg: "chan.orange.bg",
+								border: "chan.orange.border"
+							},
+							{
+								label: "Operational",
+								color: "chan.green",
+								bg: "chan.green.bg",
+								border: "chan.green.border"
+							},
+							{
+								label: "Degraded",
+								color: "chan.yellow",
+								bg: "chan.yellow.bg",
+								border: "chan.yellow.border"
+							},
+							{
+								label: "Offline",
+								color: "chan.text.faint",
+								bg: "chan.bg.hover.subtle",
+								border: "chan.border"
+							}
+						].map((s) => /* @__PURE__ */ jsxs(Flex, {
+							align: "center",
+							gap: "7px",
+							p: "5px 12px",
+							borderRadius: "3px",
+							fontSize: "9px",
+							letterSpacing: "0.12em",
+							textTransform: "uppercase",
+							border: "1px solid",
+							borderColor: s.border,
+							bg: s.bg,
+							color: s.color,
+							children: [/* @__PURE__ */ jsx(Box, {
+								w: "5px",
+								h: "5px",
+								borderRadius: "full",
+								bg: s.color
+							}), s.label]
+						}, s.label))
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Flex, {
+				pt: "40px",
+				borderTop: "1px solid",
+				borderColor: "chan.border",
+				justify: "space-between",
+				align: "center",
+				children: [/* @__PURE__ */ jsx(Text, {
+					fontSize: "9px",
+					letterSpacing: "0.12em",
+					color: "chan.text.faint",
+					children: "@chan.run/design token showcase"
+				}), /* @__PURE__ */ jsx(Text, {
+					fontSize: "9px",
+					letterSpacing: "0.12em",
+					color: "chan.orange",
+					children: "chan.run"
+				})]
+			})
+		]
+	});
+}
+const system = createSystem(defaultConfig, defineConfig({
+	globalCss: { body: {
+		bg: "{colors.chan.bg}",
+		color: "{colors.chan.text}",
+		fontFamily: "{fonts.body}"
+	} },
+	theme: {
+		tokens: {
+			colors: {
+				"chan.palette.dark.bg": { value: "#0a0a08" },
+				"chan.palette.dark.bg.soft": { value: "#111110" },
+				"chan.palette.dark.bg.card": { value: "#161614" },
+				"chan.palette.dark.bg.code": { value: "#131311" },
+				"chan.palette.dark.bg.hover": { value: "#1d1d1a" },
+				"chan.palette.dark.bg.sidebar": { value: "#0f0f0d" },
+				"chan.palette.dark.border": { value: "#242420" },
+				"chan.palette.dark.border.soft": { value: "#1a1a18" },
+				"chan.palette.dark.border.sidebar": { value: "#1e1e1c" },
+				"chan.palette.dark.text": { value: "#f0ece4" },
+				"chan.palette.dark.text.dim": { value: "color-mix(in srgb, #f0ece4 50%, transparent)" },
+				"chan.palette.dark.text.faint": { value: "color-mix(in srgb, #f0ece4 30%, transparent)" },
+				"chan.palette.dark.bg.hover.subtle": { value: "rgba(255, 255, 255, 0.03)" },
+				"chan.palette.light.bg": { value: "#fafaf7" },
+				"chan.palette.light.bg.soft": { value: "#f3f1ec" },
+				"chan.palette.light.bg.card": { value: "#ebe8e1" },
+				"chan.palette.light.bg.code": { value: "#efece4" },
+				"chan.palette.light.bg.hover": { value: "#e2ded5" },
+				"chan.palette.light.bg.sidebar": { value: "#f5f3ed" },
+				"chan.palette.light.border": { value: "#d5d1c6" },
+				"chan.palette.light.border.soft": { value: "#e2ded4" },
+				"chan.palette.light.border.sidebar": { value: "#dcd8cd" },
+				"chan.palette.light.text": { value: "#1a1a16" },
+				"chan.palette.light.text.dim": { value: "color-mix(in srgb, #1a1a16 60%, transparent)" },
+				"chan.palette.light.text.faint": { value: "color-mix(in srgb, #1a1a16 40%, transparent)" },
+				"chan.palette.light.bg.hover.subtle": { value: "rgba(0, 0, 0, 0.04)" },
+				"chan.orange": { value: "#ff4d00" },
+				"chan.orange.dim": { value: "#cc3d00" },
+				"chan.orange.glow": { value: "#ff6a2a" },
+				"chan.orange.bg": { value: "rgba(255, 77, 0, 0.08)" },
+				"chan.orange.border": { value: "rgba(255, 77, 0, 0.20)" },
+				"chan.green": { value: "#3a8c5c" },
+				"chan.green.bg": { value: "rgba(58, 140, 92, 0.08)" },
+				"chan.green.border": { value: "rgba(58, 140, 92, 0.20)" },
+				"chan.yellow": { value: "#a88000" },
+				"chan.yellow.bg": { value: "rgba(200, 160, 0, 0.07)" },
+				"chan.yellow.border": { value: "rgba(200, 160, 0, 0.15)" },
+				"chan.danger": { value: "#d06060" },
+				"chan.danger.bg": { value: "rgba(180, 40, 40, 0.12)" },
+				"chan.danger.border": { value: "rgba(180, 40, 40, 0.20)" },
+				"chan.orange.glow.bg": { value: "rgba(255, 77, 0, 0.06)" }
+			},
+			fonts: {
+				display: { value: "'Barlow Condensed', sans-serif" },
+				body: { value: "'IBM Plex Mono', monospace" }
+			},
+			radii: {
+				xs: { value: "5px" },
+				sm: { value: "10px" },
+				md: { value: "18px" }
+			},
+			spacing: {
+				1: { value: "4px" },
+				2: { value: "8px" },
+				3: { value: "12px" },
+				4: { value: "16px" },
+				5: { value: "24px" },
+				6: { value: "32px" },
+				7: { value: "48px" },
+				8: { value: "56px" },
+				9: { value: "64px" },
+				10: { value: "72px" }
+			},
+			sizes: {
+				sidebar: { value: "256px" },
+				topbar: { value: "52px" },
+				bottomNav: { value: "58px" },
+				touchTarget: { value: "44px" },
+				docsContent: { value: "768px" },
+				docsLayout: { value: "1080px" },
+				toc: { value: "200px" }
+			},
+			easings: { cinematic: { value: "cubic-bezier(0.16, 1, 0.3, 1)" } },
+			animations: { "chan-pulse": { value: "chan-pulse 2.5s ease-in-out infinite" } }
+		},
+		keyframes: {
+			"chan-pulse": {
+				"0%, 100%": { opacity: .35 },
+				"50%": { opacity: 1 }
+			},
+			"line-draw": { to: { width: "65%" } },
+			"border-sweep": {
+				"0%": {
+					opacity: 0,
+					backgroundPositionX: "0%"
+				},
+				"15%": { opacity: 1 },
+				"100%": {
+					opacity: 1,
+					backgroundPositionX: "50%"
+				}
+			},
+			"clip-up": { to: {
+				opacity: 1,
+				transform: "translateY(0)"
+			} },
+			"fade-up": { to: {
+				opacity: 1,
+				transform: "translateY(0)"
+			} }
+		},
+		textStyles: {
+			"chan.wordmark": { value: {
+				fontFamily: "{fonts.display}",
+				fontWeight: 800,
+				letterSpacing: "0.05em",
+				textTransform: "uppercase",
+				lineHeight: 1
+			} },
+			"chan.label": { value: {
+				fontFamily: "{fonts.body}",
+				fontSize: "8px",
+				letterSpacing: "0.12em",
+				textTransform: "uppercase"
+			} },
+			"chan.nav": { value: {
+				fontFamily: "{fonts.body}",
+				fontSize: "10.5px",
+				letterSpacing: "0.07em",
+				textTransform: "uppercase",
+				fontWeight: 500
+			} },
+			"chan.navGroup": { value: {
+				fontFamily: "{fonts.body}",
+				fontSize: "7.5px",
+				letterSpacing: "0.22em",
+				textTransform: "uppercase"
+			} }
+		},
+		slotRecipes: { splash: defineSlotRecipe({
+			className: "chan-splash",
+			slots: [
+				"root",
+				"panelStart",
+				"panelEnd",
+				"hub"
+			],
+			base: {
+				root: {
+					position: "fixed",
+					inset: 0,
+					display: "flex",
+					zIndex: 1e4
+				},
+				panelStart: {
+					flex: 1,
+					position: "relative",
+					bg: "chan.bg.soft",
+					transitionProperty: "top, left",
+					transitionTimingFunction: "ease-in-out"
+				},
+				panelEnd: {
+					flex: 1,
+					position: "relative",
+					bg: "chan.bg.soft",
+					transitionProperty: "bottom, right",
+					transitionTimingFunction: "ease-in-out"
+				},
+				hub: {
+					position: "absolute",
+					bg: "chan.bg.card",
+					border: "1px solid",
+					borderColor: "chan.border",
+					borderRadius: "md",
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					zIndex: 1,
+					width: "var(--splash-hub-w)"
+				}
+			},
+			variants: {
+				orientation: {
+					vertical: {
+						root: { flexDirection: "column" },
+						panelStart: {
+							borderBottom: "2px solid",
+							borderColor: "chan.border"
+						},
+						panelEnd: {
+							borderTop: "2px solid",
+							borderColor: "chan.border"
+						},
+						hub: {
+							bottom: 0,
+							left: "50%",
+							transform: "translate(-50%, 50%)"
+						}
+					},
+					horizontal: {
+						root: { flexDirection: "row" },
+						panelStart: {
+							borderRight: "2px solid",
+							borderColor: "chan.border"
+						},
+						panelEnd: {
+							borderLeft: "2px solid",
+							borderColor: "chan.border"
+						},
+						hub: {
+							right: 0,
+							top: "50%",
+							transform: "translate(50%, -50%)"
+						}
+					}
+				},
+				size: {
+					sm: { hub: {
+						"--splash-hub-w": "180px",
+						px: 4,
+						py: 3
+					} },
+					md: { hub: {
+						"--splash-hub-w": "240px",
+						px: 5,
+						py: 4
+					} },
+					lg: { hub: {
+						"--splash-hub-w": "320px",
+						px: 6,
+						py: 5
+					} }
+				}
+			},
+			defaultVariants: {
+				orientation: "vertical",
+				size: "md"
+			}
+		}) },
+		semanticTokens: { colors: {
+			"chan.bg": { value: {
+				_light: "{colors.chan.palette.light.bg}",
+				_dark: "{colors.chan.palette.dark.bg}"
+			} },
+			"chan.bg.soft": { value: {
+				_light: "{colors.chan.palette.light.bg.soft}",
+				_dark: "{colors.chan.palette.dark.bg.soft}"
+			} },
+			"chan.bg.card": { value: {
+				_light: "{colors.chan.palette.light.bg.card}",
+				_dark: "{colors.chan.palette.dark.bg.card}"
+			} },
+			"chan.bg.code": { value: {
+				_light: "{colors.chan.palette.light.bg.code}",
+				_dark: "{colors.chan.palette.dark.bg.code}"
+			} },
+			"chan.bg.hover": { value: {
+				_light: "{colors.chan.palette.light.bg.hover}",
+				_dark: "{colors.chan.palette.dark.bg.hover}"
+			} },
+			"chan.bg.sidebar": { value: {
+				_light: "{colors.chan.palette.light.bg.sidebar}",
+				_dark: "{colors.chan.palette.dark.bg.sidebar}"
+			} },
+			"chan.bg.hover.subtle": { value: {
+				_light: "{colors.chan.palette.light.bg.hover.subtle}",
+				_dark: "{colors.chan.palette.dark.bg.hover.subtle}"
+			} },
+			"chan.border": { value: {
+				_light: "{colors.chan.palette.light.border}",
+				_dark: "{colors.chan.palette.dark.border}"
+			} },
+			"chan.border.soft": { value: {
+				_light: "{colors.chan.palette.light.border.soft}",
+				_dark: "{colors.chan.palette.dark.border.soft}"
+			} },
+			"chan.border.sidebar": { value: {
+				_light: "{colors.chan.palette.light.border.sidebar}",
+				_dark: "{colors.chan.palette.dark.border.sidebar}"
+			} },
+			"chan.text": { value: {
+				_light: "{colors.chan.palette.light.text}",
+				_dark: "{colors.chan.palette.dark.text}"
+			} },
+			"chan.text.dim": { value: {
+				_light: "{colors.chan.palette.light.text.dim}",
+				_dark: "{colors.chan.palette.dark.text.dim}"
+			} },
+			"chan.text.faint": { value: {
+				_light: "{colors.chan.palette.light.text.faint}",
+				_dark: "{colors.chan.palette.dark.text.faint}"
+			} },
+			bg: {
+				DEFAULT: { value: "{colors.chan.bg}" },
+				subtle: { value: "{colors.chan.bg.soft}" },
+				muted: { value: "{colors.chan.bg.card}" }
+			},
+			fg: {
+				DEFAULT: { value: "{colors.chan.text}" },
+				muted: { value: "{colors.chan.text.dim}" },
+				subtle: { value: "{colors.chan.text.faint}" }
+			},
+			border: {
+				DEFAULT: { value: "{colors.chan.border}" },
+				muted: { value: "{colors.chan.border.soft}" }
+			}
+		} }
+	}
+}));
+//#endregion
+export { ColorModeButton, DeckCard, SlideControls, SlideLayoutComponent as SlideLayout, SlideViewer, Splash, TokenShowcase, Topbar, Wordmark, getSlideComponents, system };