@pieai/swimmer-ui-kit 2.14.0 → 3.0.0-rc.1

package/dist/preview.js

@@ -0,0 +1,1993 @@
+"use client";
+import { _ as e, b as t, d as n, f as r, g as i, h as a, i as o, l as s, m as c, p as l, t as u, u as d, v as ee, y as te } from "./LiquidGroup-BXw1tv9H.js";
+import { C as f, D as p, E as ne, F as m, I as h, L as g, P as _, R as re, S as ie, T as v, _ as ae, a as y, b, c as oe, d as x, f as S, g as se, h as ce, i as le, l as ue, m as C, n as de, o as w, p as fe, r as T, s as pe, t as E, u as D, v as me, w as O, x as k, y as he, z as A } from "./GameStageTile-BcFCu22b.js";
+import { f as j, i as M, m as N } from "./reducedMotion-B8kv-v64.js";
+import { createContext as P, createElement as F, useContext as I, useEffect as L, useRef as R, useState as z } from "react";
+import { Fragment as B, jsx as V, jsxs as H } from "react/jsx-runtime";
+//#region src/preview/GameUiPreview/previewStates.ts
+var U = [
+	{
+		id: "history-human-long",
+		kind: "human",
+		meta: "Round 2 · public table",
+		speaker: "Mika",
+		text: "This answer feels rehearsed because it names every possibility but never risks a real preference."
+	},
+	{
+		id: "history-zh-long",
+		kind: "mystery",
+		meta: "第 2 局 · 桌边发言",
+		speaker: "Noa",
+		text: "这段回答太顺了，像是在把所有安全选项都摆出来，却故意不留下能被追问的破绽。"
+	},
+	{
+		id: "history-system",
+		kind: "system",
+		meta: "Reveal soon",
+		speaker: "Table",
+		text: "Three votes are locked. One more read can still change the pact."
+	}
+], W = {
+	en: {
+		triggerLabel: "EN",
+		langMenuLabel: "Preview language",
+		heroTitle: "Flat game UI kit",
+		heroBody: "React 19 + TypeScript UI with standard CSS. Flat droplet controls, one liquid main action, and inline line icons. Product state and language remain host-owned.",
+		sections: {
+			tokens: "Tokens",
+			icons: "Line icons",
+			typography: "Typography scale",
+			components: "Component surface",
+			forms: "Forms, inputs and status",
+			overlayGlass: "Overlay glass HUD",
+			liquid: "Liquid surface",
+			liquidMetal: "Liquid metal CTA",
+			firstSession: "First-session shell",
+			responsive: "Responsive proof targets"
+		},
+		tokenGroups: {
+			colors: "colors",
+			semantic: "semantic",
+			typography: "typography",
+			spacing: "spacing",
+			radius: "radius",
+			scrollbars: "scrollbars",
+			elevation: "elevation",
+			motion: "motion",
+			overlayGlass: "overlay glass",
+			liquidMetal: "liquid metal",
+			liquidGooey: "liquid gooey Move",
+			layers: "layers",
+			targets: "targets",
+			assetSizing: "asset sizing"
+		},
+		iconsIntro: "48 semantic names, one inline SVG line family. Icons inherit text colour; sizes are 16, 20 and 24 pixels. No image requests or initialization.",
+		tiles: {
+			daily: {
+				badge: "solo",
+				kicker: "Daily",
+				title: "Daily Turing Challenge",
+				summary: "Read one case, pick the AI, share the result."
+			},
+			portal: {
+				badge: "free guests",
+				kicker: "Portal",
+				title: "Tavern Portal",
+				summary: "Enter a code, resume a table, or open your own."
+			},
+			host: {
+				kicker: "Host Gate",
+				title: "Open my own table",
+				summary: "Only hosts see account and battery checks. Guests never do."
+			}
+		},
+		forms: {
+			formsTitle: "Join a table",
+			roomCodeLabel: "Room code",
+			roomCodeHint: "Ask the host for the 6-character code.",
+			roomCodePlaceholder: "74X8VB",
+			nameLabel: "Display name",
+			namePlaceholder: "How should the table see you?",
+			readLabel: "Your read",
+			readPlaceholder: "Type why this one feels human…",
+			readError: "A read needs at least a few words.",
+			rememberLabel: "Remember me on this device",
+			displayTitle: "Players and status",
+			revealLabel: "Reveal countdown",
+			batteryLabel: "Batteries",
+			emptyTitle: "No open tables yet",
+			emptyBody: "Be the first to host. Guests join free through your invite.",
+			emptyCta: "Open my own table",
+			guestName: "Guest 74"
+		},
+		type: {
+			kicker: "Round status",
+			h1: "One of us isn’t.",
+			h2: "Read the table, vote, reveal.",
+			body: "Flat UI text remains DOM-rendered for localization and accessibility while the game world stays visible underneath.",
+			small: "Reduced-motion keeps texture, shadow, and hierarchy but removes non-essential movement."
+		},
+		buttons: {
+			panelTitle: "Buttons and controls",
+			openTable: "Open my own table",
+			useCode: "Use room code",
+			continueHost: "Continue as host",
+			readyUp: "Ready up",
+			leaveTable: "Leave table",
+			waiting: "Waiting",
+			settingsTip: "Compact settings affordance",
+			copyInvite: "Copy invite",
+			aiBadge: "AI?",
+			readyBadge: "Ready",
+			hostGateBadge: "Host gate",
+			segmentedLabel: "Preview mode",
+			segDaily: "Daily",
+			segLive: "Live room",
+			segTokens: "Tokens",
+			tabsPortal: "Portal",
+			tabsVote: "Vote",
+			tabsHistory: "History",
+			radialLabel: "Emote wheel",
+			wave: "Wave",
+			think: "Think",
+			doubt: "Doubt",
+			sliderLabel: "Effects volume",
+			toggleLabel: "Sound on"
+		},
+		liquid: {
+			body: "The brand’s own surface. `surface=\"liquid\"` is a second axis on GameButton, not a variant — tone still says what the action means, so a destructive action can be liquid too. The silhouette behind is what deforms; the real button never does, so the hit target, the focus ring and the text stay exactly where they were. Press one.",
+			surfacesTitle: "Flat and liquid, same tone",
+			disabledTitle: "Disabled",
+			disabledBody: "A disabled control drops the liquid entirely. Liquid is how this kit says “press me”, and putting that on something that cannot be pressed is a lie told loudly.",
+			moreTitle: "The rest of the vocabulary",
+			moreBody: "Twelve named forms, each a measured bundle of blur, contrast, outline, spring and shadow — a behaviour to pick rather than a physics configuration to tune. They live on their own page now, with every form live at two sizes, on every tone, and its knobs written out beside it.",
+			moreLink: "Open the Liquid page",
+			press: "hold to press"
+		},
+		liquidMetal: {
+			body: "For the few screens that take money or a yes: checkout, sign-up, badge unlock, landing CTA. Not for reading, queues, or the map — a moving rim is a tax you pay every glance, and the aesthetic-usability effect is strongest in the first seconds. More than two of these on a page means the page is the wrong place.",
+			cssTitle: "CSS renderer · zero WebGL context",
+			webglTitle: "WebGL renderer · when the budget allows",
+			cta: "Become a member"
+		},
+		hud: {
+			label: "Persistent HUD cluster",
+			youAre: "You are",
+			roleValue: "Resistance",
+			rolePrivate: "private",
+			room: "Room",
+			reveal: "Reveal",
+			tools: "HUD tools",
+			history: "History",
+			settings: "Settings",
+			calloutA: "Too perfect.",
+			calloutB: "Maybe.",
+			emote: "😀 Emote",
+			sendRead: "Send read"
+		},
+		modals: {
+			dialogTitle: "Host Gate",
+			dialogBody: "Open your own table as host. Guests join free through your invite link or code.",
+			actionsLabel: "Host gate actions",
+			confirm: "Confirm host table",
+			back: "Back to Portal",
+			panelTitle: "Toast / loading / error",
+			toastOk: "Seat confirmed. Waiting for the table host.",
+			toastErr: "That room code expired. Ask for a fresh Portal link.",
+			loading: "Opening the tavern portal…",
+			loadingErr: "The portal could not reach the tavern."
+		},
+		firstSession: {
+			controls: "First session controls",
+			emote: "Emote",
+			goalLabel: "Goal",
+			goalValue: "Find the AI",
+			streak: "Daily",
+			guest: "guest",
+			history: "History",
+			hud: "First session HUD",
+			input: "Type a read",
+			moveBadge: "Move",
+			move: "Drag to inspect the table",
+			roomLabel: "Room",
+			roomValue: "Portal",
+			roleLabel: "Role",
+			roleValue: "Guest",
+			settings: "Settings",
+			shell: "First session shell",
+			timerLabel: "Timer",
+			tools: "Player tools",
+			wardrobe: "Wardrobe",
+			playerName: "Guest 74",
+			obBadge: "First table",
+			obBody: "The package keeps onboarding copy injectable so the host app owns product language and routing.",
+			obSkip: "Skip",
+			obStart: "Start playing",
+			obTitle: "Learn the table in 30 seconds",
+			obMoveT: "Move",
+			obMoveB: "Look around the flat table.",
+			obReadT: "Read",
+			obReadB: "Notice who sounds too clean.",
+			obVoteT: "Vote",
+			obVoteB: "Lock your guess before reveal."
+		},
+		responsive: {
+			desktop: "desktop",
+			mobileLandscape: "mobile landscape"
+		},
+		historyLabel: "Round history",
+		history: U
+	},
+	"zh-CN": {
+		triggerLabel: "中",
+		langMenuLabel: "预览语言",
+		heroTitle: "平面水滴游戏 UI 套件",
+		heroBody: "React 19 + TypeScript 组件与标准 CSS。普通控件是平面水滴，主操作是液体，图标是内联线条；产品状态和语言仍由宿主负责。",
+		sections: {
+			tokens: "设计令牌",
+			icons: "线条图标",
+			typography: "字号层级",
+			components: "组件总览",
+			forms: "表单、输入与状态",
+			overlayGlass: "叠加玻璃 HUD",
+			liquid: "液体表面",
+			liquidMetal: "液态金属 CTA",
+			firstSession: "首次会话外壳",
+			responsive: "响应式验证目标"
+		},
+		tokenGroups: {
+			colors: "颜色",
+			semantic: "语义",
+			typography: "字体",
+			spacing: "间距",
+			radius: "圆角",
+			scrollbars: "滚动条",
+			elevation: "阴影",
+			motion: "动效",
+			overlayGlass: "叠加玻璃",
+			liquidMetal: "液态金属",
+			liquidGooey: "液态胶 Move",
+			layers: "层级",
+			targets: "触控目标",
+			assetSizing: "资源尺寸"
+		},
+		iconsIntro: "48 个语义名字，一套内联 SVG 线条。颜色跟随文字，尺寸为 16、20、24 像素，不加载图片，也不需要初始化。",
+		tiles: {
+			daily: {
+				badge: "单人",
+				kicker: "每日",
+				title: "每日图灵挑战",
+				summary: "读一个案例,指认 AI,分享结果。"
+			},
+			portal: {
+				badge: "免费加入",
+				kicker: "传送门",
+				title: "酒馆传送门",
+				summary: "输入房号、恢复牌桌,或自己开一桌。"
+			},
+			host: {
+				kicker: "房主门槛",
+				title: "开我自己的牌桌",
+				summary: "只有房主看到账号与电量校验,客人永远看不到。"
+			}
+		},
+		forms: {
+			formsTitle: "加入牌桌",
+			roomCodeLabel: "房间号",
+			roomCodeHint: "向房主要 6 位房间号。",
+			roomCodePlaceholder: "74X8VB",
+			nameLabel: "显示昵称",
+			namePlaceholder: "牌桌上别人怎么称呼你?",
+			readLabel: "你的判断",
+			readPlaceholder: "说说为什么觉得这个是真人…",
+			readError: "判断至少要写几个字。",
+			rememberLabel: "在此设备上记住我",
+			displayTitle: "玩家与状态",
+			revealLabel: "揭晓倒计时",
+			batteryLabel: "电量",
+			emptyTitle: "还没有开放的牌桌",
+			emptyBody: "来当第一个房主吧。客人通过你的邀请免费加入。",
+			emptyCta: "开我自己的牌桌",
+			guestName: "访客 74"
+		},
+		type: {
+			kicker: "回合状态",
+			h1: "我们之中有\"假\"的。",
+			h2: "读牌桌、投票、揭晓。",
+			body: "平面水滴 UI 文字始终由 DOM 渲染,方便本地化与无障碍,而游戏世界仍透在下方可见。",
+			small: "降低动效会保留质感、阴影与层次,只去掉非必要的运动。"
+		},
+		buttons: {
+			panelTitle: "按钮与控件",
+			openTable: "开我自己的牌桌",
+			useCode: "用房间号",
+			continueHost: "以房主继续",
+			readyUp: "准备就绪",
+			leaveTable: "离开牌桌",
+			waiting: "等待中",
+			settingsTip: "紧凑的设置入口",
+			copyInvite: "复制邀请",
+			aiBadge: "AI?",
+			readyBadge: "就绪",
+			hostGateBadge: "房主门槛",
+			segmentedLabel: "预览模式",
+			segDaily: "每日",
+			segLive: "在线房",
+			segTokens: "令牌",
+			tabsPortal: "传送门",
+			tabsVote: "投票",
+			tabsHistory: "历史",
+			radialLabel: "表情轮盘",
+			wave: "挥手",
+			think: "思考",
+			doubt: "怀疑",
+			sliderLabel: "音效音量",
+			toggleLabel: "声音开"
+		},
+		liquid: {
+			body: "品牌自己的表面。`surface=\"liquid\"` 是 GameButton 上的第二个轴，不是一种 variant——色调仍然负责说明这个动作是什么意思，所以危险动作也可以是液体的。变形的是后面那层轮廓，真正的按钮从不变形，点击区、焦点环和文字都停在原地。按一下试试。",
+			surfacesTitle: "同一色调，扁平与液体",
+			disabledTitle: "禁用",
+			disabledBody: "禁用的控件完全不穿液体。液体是这套 UI 说「按我」的方式，把这句话放在按不动的东西上，是大声说一句假话。",
+			moreTitle: "词汇表的其余部分",
+			moreBody: "十二个命名形态，每一个都是一组实测过的 blur / contrast / 外形 / 弹簧 / 阴影——挑的是一种行为，不是一组物理参数。它们现在有自己的页面：每个形态都是活的，两种尺寸、每一种色调，旋钮就写在旁边。",
+			moreLink: "打开液体页",
+			press: "按住看看"
+		},
+		liquidMetal: {
+			body: "只用在掏钱或拍板的那几屏：付款、注册、徽章解锁、落地页主按钮。阅读、复习队列、3D 地图一个都不要加——会流动的边框在干活面上是每一次都要付的税。美观可用性效应在第一印象最强、随使用次数衰减。一页出现两个以上，就是用错了地方。",
+			cssTitle: "CSS 渲染器 · 零 WebGL 上下文",
+			webglTitle: "WebGL 渲染器 · 预算允许时",
+			cta: "成为会员"
+		},
+		hud: {
+			label: "常驻 HUD 集群",
+			youAre: "你的身份",
+			roleValue: "反抗军",
+			rolePrivate: "私密",
+			room: "房间",
+			reveal: "揭晓",
+			tools: "HUD 工具",
+			history: "历史",
+			settings: "设置",
+			calloutA: "太完美了。",
+			calloutB: "也许吧。",
+			emote: "😀 表情",
+			sendRead: "发送判断"
+		},
+		modals: {
+			dialogTitle: "房主门槛",
+			dialogBody: "以房主身份开自己的牌桌。客人通过你的邀请链接或房号免费加入。",
+			actionsLabel: "房主门槛操作",
+			confirm: "确认开桌",
+			back: "返回传送门",
+			panelTitle: "提示 / 加载 / 错误",
+			toastOk: "座位已确认,正在等待房主。",
+			toastErr: "该房号已过期,请向房主要新的传送门链接。",
+			loading: "正在开启酒馆传送门…",
+			loadingErr: "传送门无法连到酒馆。"
+		},
+		firstSession: {
+			controls: "首次会话控件",
+			emote: "表情",
+			goalLabel: "目标",
+			goalValue: "找出 AI",
+			streak: "连续",
+			guest: "访客",
+			history: "历史",
+			hud: "首次会话 HUD",
+			input: "输入判断",
+			moveBadge: "移动",
+			move: "拖动以查看牌桌",
+			roomLabel: "房间",
+			roomValue: "传送门",
+			roleLabel: "身份",
+			roleValue: "客人",
+			settings: "设置",
+			shell: "首次会话外壳",
+			timerLabel: "计时",
+			tools: "玩家工具",
+			wardrobe: "衣橱",
+			playerName: "访客 74",
+			obBadge: "第一桌",
+			obBody: "套件让引导文案可注入,所以由宿主 App 掌管产品语言与路由。",
+			obSkip: "跳过",
+			obStart: "开始游戏",
+			obTitle: "30 秒学会这一桌",
+			obMoveT: "移动",
+			obMoveB: "环顾这张平面水滴牌桌。",
+			obReadT: "研判",
+			obReadB: "留意谁说得太干净。",
+			obVoteT: "投票",
+			obVoteB: "揭晓前锁定你的判断。"
+		},
+		responsive: {
+			desktop: "桌面",
+			mobileLandscape: "手机横屏"
+		},
+		historyLabel: "回合历史",
+		history: [
+			{
+				id: "history-human-long",
+				kind: "human",
+				meta: "第 2 局 · 公开桌",
+				speaker: "Mika",
+				text: "这个回答像背稿——把每种可能都点了一遍,却从不押一个真实的偏好。"
+			},
+			{
+				id: "history-zh-long",
+				kind: "mystery",
+				meta: "第 2 局 · 桌边发言",
+				speaker: "Noa",
+				text: "这段回答太顺了,像是在把所有安全选项都摆出来,却故意不留下能被追问的破绽。"
+			},
+			{
+				id: "history-system",
+				kind: "system",
+				meta: "即将揭晓",
+				speaker: "牌桌",
+				text: "三票已锁定。再读一轮,仍可能改写这份密约。"
+			}
+		]
+	}
+}, G = P(W.en), K = () => I(G);
+//#endregion
+//#region src/preview/GameUiPreview/sections/ButtonStates.tsx
+function ge() {
+	let { buttons: e } = K();
+	return /* @__PURE__ */ H(y, {
+		title: e.panelTitle,
+		tone: "strong",
+		children: [
+			/* @__PURE__ */ H("div", {
+				className: "game-ui-component-row",
+				children: [
+					/* @__PURE__ */ V(p, {
+						variant: "primary",
+						children: e.openTable
+					}),
+					/* @__PURE__ */ V(p, {
+						variant: "secondary",
+						children: e.useCode
+					}),
+					/* @__PURE__ */ V(p, {
+						variant: "ghost",
+						children: e.continueHost
+					}),
+					/* @__PURE__ */ V(p, {
+						variant: "success",
+						children: e.readyUp
+					}),
+					/* @__PURE__ */ V(p, {
+						variant: "danger",
+						children: e.leaveTable
+					}),
+					/* @__PURE__ */ V(p, {
+						disabled: !0,
+						variant: "secondary",
+						children: e.waiting
+					})
+				]
+			}),
+			/* @__PURE__ */ H("div", {
+				className: "game-ui-component-row",
+				children: [
+					/* @__PURE__ */ V(ue, {
+						label: e.settingsTip,
+						children: /* @__PURE__ */ V(O, {
+							label: e.settingsTip,
+							children: /* @__PURE__ */ V(k, {
+								icon: "settings",
+								size: "sm"
+							})
+						})
+					}),
+					/* @__PURE__ */ V(O, {
+						label: e.copyInvite,
+						children: /* @__PURE__ */ V(k, {
+							icon: "copy",
+							size: "sm"
+						})
+					}),
+					/* @__PURE__ */ V(C, {
+						tone: "ai",
+						children: e.aiBadge
+					}),
+					/* @__PURE__ */ V(C, {
+						tone: "success",
+						children: e.readyBadge
+					}),
+					/* @__PURE__ */ V(C, {
+						tone: "warning",
+						children: e.hostGateBadge
+					})
+				]
+			}),
+			/* @__PURE__ */ V(he, {
+				activeId: "live",
+				label: e.segmentedLabel,
+				options: [
+					{
+						id: "daily",
+						label: e.segDaily
+					},
+					{
+						id: "live",
+						label: e.segLive
+					},
+					{
+						id: "tokens",
+						label: e.segTokens
+					}
+				]
+			}),
+			/* @__PURE__ */ V(ae, {
+				activeId: "portal",
+				tabs: [
+					{
+						id: "portal",
+						label: e.tabsPortal
+					},
+					{
+						id: "vote",
+						label: e.tabsVote
+					},
+					{
+						id: "history",
+						label: e.tabsHistory
+					}
+				]
+			}),
+			/* @__PURE__ */ V(de, {
+				items: [
+					{
+						id: "wave",
+						label: e.wave
+					},
+					{
+						id: "think",
+						label: e.think
+					},
+					{
+						id: "doubt",
+						label: e.doubt
+					}
+				],
+				label: e.radialLabel
+			}),
+			/* @__PURE__ */ V(me, {
+				label: e.sliderLabel,
+				max: 100,
+				min: 0,
+				value: 68
+			}),
+			/* @__PURE__ */ V(ce, {
+				checked: !0,
+				label: e.toggleLabel
+			})
+		]
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/FirstSessionSamples.tsx
+function _e() {
+	let { firstSession: e } = K();
+	return /* @__PURE__ */ H("div", {
+		className: "game-ui-first-session-preview",
+		children: [/* @__PURE__ */ V("div", { className: "game-ui-first-session-world" }), /* @__PURE__ */ V("div", {
+			className: "game-ui-first-session-modal-slot",
+			children: /* @__PURE__ */ V(le, {
+				open: !0,
+				onDismiss: () => void 0,
+				labels: {
+					badge: e.obBadge,
+					body: e.obBody,
+					skip: e.obSkip,
+					start: e.obStart,
+					title: e.obTitle,
+					steps: [
+						{
+							title: e.obMoveT,
+							body: e.obMoveB
+						},
+						{
+							title: e.obReadT,
+							body: e.obReadB
+						},
+						{
+							title: e.obVoteT,
+							body: e.obVoteB
+						}
+					]
+				}
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/FormsAndDisplay.tsx
+function ve() {
+	let { forms: e } = K();
+	return /* @__PURE__ */ H("div", {
+		className: "game-ui-preview-two-up",
+		children: [/* @__PURE__ */ H(y, {
+			title: e.formsTitle,
+			tone: "strong",
+			children: [
+				/* @__PURE__ */ V(v, {
+					hint: e.roomCodeHint,
+					label: e.roomCodeLabel,
+					children: /* @__PURE__ */ V(f, { placeholder: e.roomCodePlaceholder })
+				}),
+				/* @__PURE__ */ V(v, {
+					label: e.nameLabel,
+					required: !0,
+					children: /* @__PURE__ */ V(f, { placeholder: e.namePlaceholder })
+				}),
+				/* @__PURE__ */ V(v, {
+					error: e.readError,
+					label: e.readLabel,
+					children: /* @__PURE__ */ V(se, {
+						invalid: !0,
+						placeholder: e.readPlaceholder
+					})
+				}),
+				/* @__PURE__ */ V(ne, {
+					defaultChecked: !0,
+					label: e.rememberLabel
+				})
+			]
+		}), /* @__PURE__ */ H(y, {
+			title: e.displayTitle,
+			tone: "strong",
+			children: [
+				/* @__PURE__ */ H("div", {
+					className: "game-ui-component-row",
+					children: [
+						/* @__PURE__ */ V(T, {
+							name: "Mika Ono",
+							status: "online"
+						}),
+						/* @__PURE__ */ V(T, {
+							name: "River",
+							size: "lg",
+							status: "busy"
+						}),
+						/* @__PURE__ */ V(T, {
+							name: "Noa",
+							status: "away"
+						}),
+						/* @__PURE__ */ V(T, {
+							name: e.guestName,
+							size: "sm"
+						})
+					]
+				}),
+				/* @__PURE__ */ V(x, {
+					label: e.revealLabel,
+					showValue: !0,
+					value: 64
+				}),
+				/* @__PURE__ */ V(x, {
+					label: e.batteryLabel,
+					max: 20,
+					showValue: !0,
+					value: 14
+				}),
+				/* @__PURE__ */ V(fe, {
+					action: /* @__PURE__ */ V(p, {
+						variant: "primary",
+						children: e.emptyCta
+					}),
+					description: e.emptyBody,
+					icon: "scroll",
+					title: e.emptyTitle
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/HudAndStage.tsx
+function q() {
+	let { hud: e, tiles: t } = K();
+	return /* @__PURE__ */ H("div", {
+		className: "game-ui-stage-demo",
+		children: [/* @__PURE__ */ H("div", {
+			"aria-label": "Flat world HUD preview",
+			className: "game-ui-stage-world",
+			children: [
+				/* @__PURE__ */ H(w, {
+					label: e.tools,
+					children: [/* @__PURE__ */ V(O, {
+						label: e.history,
+						children: /* @__PURE__ */ V(k, {
+							icon: "scroll",
+							size: "sm"
+						})
+					}), /* @__PURE__ */ V(O, {
+						label: e.settings,
+						children: /* @__PURE__ */ V(k, {
+							icon: "settings",
+							size: "sm"
+						})
+					})]
+				}),
+				/* @__PURE__ */ H("div", {
+					"aria-hidden": "true",
+					className: "game-ui-table-prop",
+					children: [
+						/* @__PURE__ */ V("span", { className: "game-ui-seat is-host" }),
+						/* @__PURE__ */ V("span", { className: "game-ui-seat is-guest-a" }),
+						/* @__PURE__ */ V("span", { className: "game-ui-seat is-guest-b" }),
+						/* @__PURE__ */ V("span", {
+							className: "game-ui-seat-callout is-a",
+							children: e.calloutA
+						}),
+						/* @__PURE__ */ V("span", {
+							className: "game-ui-seat-callout is-b",
+							children: e.calloutB
+						})
+					]
+				}),
+				/* @__PURE__ */ H("div", {
+					className: "game-ui-input-strip",
+					children: [/* @__PURE__ */ V(p, {
+						variant: "secondary",
+						children: e.emote
+					}), /* @__PURE__ */ V(p, {
+						variant: "primary",
+						children: e.sendRead
+					})]
+				})
+			]
+		}), /* @__PURE__ */ H("div", {
+			className: "game-ui-stage-sidecar",
+			children: [
+				/* @__PURE__ */ V(E, {
+					badge: t.daily.badge,
+					icon: "scroll",
+					kicker: t.daily.kicker,
+					selected: !0,
+					summary: t.daily.summary,
+					title: t.daily.title,
+					tone: "daily"
+				}),
+				/* @__PURE__ */ V(E, {
+					badge: t.portal.badge,
+					icon: "portal",
+					kicker: t.portal.kicker,
+					summary: t.portal.summary,
+					title: t.portal.title,
+					tone: "portal"
+				}),
+				/* @__PURE__ */ V(E, {
+					icon: "energy",
+					kicker: t.host.kicker,
+					summary: t.host.summary,
+					title: t.host.title,
+					tone: "host"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/IconGallery.tsx
+function ye() {
+	return /* @__PURE__ */ V("div", {
+		className: "game-ui-icon-grid",
+		"aria-label": "全部线条图标",
+		children: ie.map((e) => /* @__PURE__ */ H("figure", {
+			className: "game-ui-icon-cell",
+			children: [/* @__PURE__ */ V(k, {
+				icon: e,
+				size: "lg"
+			}), /* @__PURE__ */ V("figcaption", { children: e })]
+		}, e))
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/LiquidSurfaceShowcase.tsx
+function be() {
+	let { liquid: e } = K();
+	return /* @__PURE__ */ H("div", {
+		className: "game-ui-liquid-showcase",
+		children: [
+			/* @__PURE__ */ V(y, {
+				title: e.surfacesTitle,
+				tone: "strong",
+				children: /* @__PURE__ */ V("div", {
+					className: "game-ui-liquid-showcase__grid",
+					children: [
+						"primary",
+						"secondary",
+						"success",
+						"danger"
+					].map((t) => /* @__PURE__ */ H("div", {
+						className: "game-ui-liquid-showcase__pair",
+						children: [
+							/* @__PURE__ */ V(p, {
+								variant: t,
+								children: t
+							}),
+							/* @__PURE__ */ V(p, {
+								variant: t,
+								children: t
+							}),
+							/* @__PURE__ */ V("small", { children: e.press })
+						]
+					}, t))
+				})
+			}),
+			/* @__PURE__ */ H(y, {
+				title: e.disabledTitle,
+				tone: "strong",
+				children: [/* @__PURE__ */ V("p", {
+					className: "game-ui-small-copy",
+					children: e.disabledBody
+				}), /* @__PURE__ */ V("div", {
+					className: "game-ui-liquid-showcase__grid",
+					children: /* @__PURE__ */ H("div", {
+						className: "game-ui-liquid-showcase__pair",
+						children: [/* @__PURE__ */ V(p, {
+							disabled: !0,
+							variant: "primary",
+							children: "flat"
+						}), /* @__PURE__ */ V(p, {
+							disabled: !0,
+							variant: "primary",
+							children: "liquid"
+						})]
+					})
+				})]
+			}),
+			/* @__PURE__ */ H(y, {
+				title: e.moreTitle,
+				tone: "strong",
+				children: [/* @__PURE__ */ V("p", {
+					className: "game-ui-small-copy",
+					children: e.moreBody
+				}), /* @__PURE__ */ V("p", { children: /* @__PURE__ */ H("a", {
+					className: "game-ui-liquid-showcase__link",
+					href: "liquid.html",
+					children: [e.moreLink, " →"]
+				}) })]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/ModalAndStates.tsx
+function xe() {
+	let { modals: e } = K();
+	return /* @__PURE__ */ H("div", {
+		className: "game-ui-preview-two-up",
+		children: [/* @__PURE__ */ H(oe, {
+			title: e.dialogTitle,
+			children: [/* @__PURE__ */ V("p", { children: e.dialogBody }), /* @__PURE__ */ H(w, {
+				label: e.actionsLabel,
+				children: [/* @__PURE__ */ V(p, {
+					variant: "primary",
+					children: e.confirm
+				}), /* @__PURE__ */ V(p, {
+					variant: "ghost",
+					children: e.back
+				})]
+			})]
+		}), /* @__PURE__ */ H(y, {
+			title: e.panelTitle,
+			tone: "strong",
+			children: [
+				/* @__PURE__ */ V(D, {
+					tone: "success",
+					children: e.toastOk
+				}),
+				/* @__PURE__ */ V(D, {
+					tone: "danger",
+					children: e.toastErr
+				}),
+				/* @__PURE__ */ V(S, { label: e.loading }),
+				/* @__PURE__ */ V(S, {
+					label: e.loadingErr,
+					tone: "error"
+				})
+			]
+		})]
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/OverlayGlassCompare.tsx
+function Se() {
+	let { hud: e, buttons: t } = K(), n = (n) => {
+		let r = n === "glass";
+		return /* @__PURE__ */ H("div", {
+			"aria-label": r ? "Overlay glass HUD" : "Default flat HUD",
+			className: [
+				"game-ui-stage-world",
+				"game-ui-overlay-glass-proof",
+				r ? A.scopeClass : void 0
+			].filter(Boolean).join(" "),
+			...r ? {
+				[A.toneAttr]: A.toneGlass,
+				[A.densityAttr]: A.densityCompact
+			} : {},
+			children: [/* @__PURE__ */ H(w, {
+				label: e.tools,
+				children: [/* @__PURE__ */ V(O, {
+					label: e.history,
+					children: /* @__PURE__ */ V(k, {
+						icon: "scroll",
+						size: "sm"
+					})
+				}), /* @__PURE__ */ V(O, {
+					label: e.settings,
+					children: /* @__PURE__ */ V(k, {
+						icon: "settings",
+						size: "sm"
+					})
+				})]
+			}), /* @__PURE__ */ H(y, {
+				title: t.panelTitle,
+				children: [/* @__PURE__ */ H("div", {
+					className: "game-ui-preview-actions",
+					children: [
+						/* @__PURE__ */ V(C, {
+							tone: "ai",
+							children: t.aiBadge
+						}),
+						/* @__PURE__ */ V(C, {
+							tone: "success",
+							children: t.readyBadge
+						}),
+						/* @__PURE__ */ V(x, {
+							label: e.reveal,
+							value: 68
+						})
+					]
+				}), /* @__PURE__ */ H("div", {
+					className: "game-ui-input-strip",
+					children: [
+						/* @__PURE__ */ V(p, {
+							variant: "secondary",
+							children: e.emote
+						}),
+						/* @__PURE__ */ V(p, {
+							variant: "primary",
+							children: e.sendRead
+						}),
+						/* @__PURE__ */ V(p, {
+							variant: "ghost",
+							children: t.leaveTable
+						})
+					]
+				})]
+			})]
+		});
+	};
+	return /* @__PURE__ */ H("div", {
+		className: "game-ui-overlay-glass-compare",
+		children: [/* @__PURE__ */ H("article", {
+			className: "game-ui-overlay-glass-column",
+			children: [/* @__PURE__ */ H("header", { children: [/* @__PURE__ */ V("strong", { children: "Default flat" }), /* @__PURE__ */ V("span", {
+				className: "game-ui-small-copy",
+				children: "parchment surfaces · 44px floor"
+			})] }), n("flat")]
+		}), /* @__PURE__ */ H("article", {
+			className: "game-ui-overlay-glass-column",
+			children: [/* @__PURE__ */ H("header", { children: [/* @__PURE__ */ V("strong", { children: "Overlay glass + compact" }), /* @__PURE__ */ H("span", {
+				className: "game-ui-small-copy",
+				children: [
+					A.toneAttr,
+					"=\"",
+					A.toneGlass,
+					"\" ·",
+					" ",
+					A.densityAttr,
+					"=\"",
+					A.densityCompact,
+					"\""
+				]
+			})] }), n("glass")]
+		})]
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/ResponsiveProofFrames.tsx
+function Ce() {
+	let { responsive: e } = K();
+	return /* @__PURE__ */ H("div", {
+		className: "game-ui-proof-frames",
+		children: [/* @__PURE__ */ H("article", {
+			className: "game-ui-proof-frame is-desktop",
+			children: [/* @__PURE__ */ H("header", { children: [/* @__PURE__ */ V(C, { children: e.desktop }), /* @__PURE__ */ V("strong", { children: "1440×900" })] }), /* @__PURE__ */ V(q, {})]
+		}), /* @__PURE__ */ H("article", {
+			className: "game-ui-proof-frame is-mobile-landscape",
+			children: [/* @__PURE__ */ H("header", { children: [/* @__PURE__ */ V(C, { children: e.mobileLandscape }), /* @__PURE__ */ V("strong", { children: "844×390" })] }), /* @__PURE__ */ V(q, {})]
+		})]
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/TokenGroup.tsx
+var we = [
+	{
+		id: "semantic",
+		tokens: e
+	},
+	{
+		id: "typography",
+		tokens: t
+	},
+	{
+		id: "spacing",
+		tokens: ee
+	},
+	{
+		id: "radius",
+		tokens: a
+	},
+	{
+		id: "scrollbars",
+		tokens: i
+	},
+	{
+		id: "elevation",
+		tokens: d
+	},
+	{
+		id: "motion",
+		tokens: l
+	},
+	{
+		id: "overlayGlass",
+		tokens: c
+	},
+	{
+		id: "liquidGooey",
+		tokens: r
+	},
+	{
+		id: "layers",
+		tokens: n
+	},
+	{
+		id: "targets",
+		tokens: te
+	},
+	{
+		id: "assetSizing",
+		tokens: s
+	}
+];
+function Te({ id: e, label: t, tokens: n }) {
+	return /* @__PURE__ */ H("article", {
+		className: "game-ui-token-card",
+		children: [/* @__PURE__ */ V("h3", { children: t }), /* @__PURE__ */ V("div", {
+			className: "game-ui-token-grid",
+			children: Object.entries(n).map(([t, n]) => /* @__PURE__ */ H("div", {
+				className: "game-ui-token-row",
+				children: [/* @__PURE__ */ V("span", { children: t }), /* @__PURE__ */ V("code", { children: String(n) })]
+			}, `${e}-${t}`))
+		})]
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/TokenSwatches.tsx
+function Ee() {
+	return /* @__PURE__ */ V("div", {
+		"aria-label": "Flat color swatches",
+		className: "game-ui-swatch-grid",
+		children: Object.entries(e).map(([e, t]) => /* @__PURE__ */ H("figure", {
+			className: "game-ui-swatch",
+			children: [/* @__PURE__ */ V("span", { style: { background: t } }), /* @__PURE__ */ H("figcaption", { children: [/* @__PURE__ */ V("strong", { children: e }), /* @__PURE__ */ V("code", { children: t })] })]
+		}, e))
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/sections/TypographyScale.tsx
+function De() {
+	let { type: e } = K();
+	return /* @__PURE__ */ H("div", {
+		className: "game-ui-type-scale",
+		children: [
+			/* @__PURE__ */ V("p", {
+				className: "game-ui-type-kicker",
+				children: e.kicker
+			}),
+			/* @__PURE__ */ V("h1", { children: e.h1 }),
+			/* @__PURE__ */ V("h2", { children: e.h2 }),
+			/* @__PURE__ */ V("p", { children: e.body }),
+			/* @__PURE__ */ V("small", { children: e.small })
+		]
+	});
+}
+//#endregion
+//#region src/preview/GameUiPreview/GameUiPreview.tsx
+function Oe({ title: e, body: t }) {
+	let [n, r] = z("en"), i = W[n], a = e && n === "en" ? e : i.heroTitle, o = t && n === "en" ? t : i.heroBody;
+	return L(() => (document.documentElement.dataset.gameUiPreview = "reference", () => {
+		delete document.documentElement.dataset.gameUiPreview;
+	}), []), /* @__PURE__ */ V(G.Provider, {
+		value: i,
+		children: /* @__PURE__ */ H("main", {
+			"aria-label": "Swimmer UI Kit preview",
+			className: "game-ui-preview game-ui-preview-canvas",
+			children: [
+				/* @__PURE__ */ H("header", {
+					className: "game-ui-preview-hero",
+					children: [
+						/* @__PURE__ */ V(C, {
+							tone: "ai",
+							children: "@pieai/swimmer-ui-kit"
+						}),
+						/* @__PURE__ */ V(b, {
+							currentLabel: i.triggerLabel,
+							label: i.langMenuLabel,
+							onSelect: (e) => r(e),
+							options: [{
+								id: "en",
+								label: "English",
+								meta: "DOM UI labels"
+							}, {
+								id: "zh-CN",
+								label: "简体中文",
+								meta: "Host app owned copy"
+							}],
+							value: n
+						}),
+						/* @__PURE__ */ V("h1", { children: a }),
+						/* @__PURE__ */ V("p", { children: o })
+					]
+				}),
+				/* @__PURE__ */ H("section", {
+					"aria-labelledby": "game-ui-preview-start-title",
+					className: "game-ui-preview-section game-ui-preview-start",
+					children: [
+						/* @__PURE__ */ V("h2", {
+							id: "game-ui-preview-start-title",
+							children: n === "zh-CN" ? "从这里开始：选组件" : "Start here: choose a component"
+						}),
+						/* @__PURE__ */ H("nav", {
+							"aria-label": n === "zh-CN" ? "按用途找组件" : "Find a component by task",
+							className: "game-ui-preview-two-up",
+							children: [
+								/* @__PURE__ */ V("a", {
+									className: "game-ui-liquid-showcase__link",
+									href: "#game-ui-preview-cta-title",
+									children: n === "zh-CN" ? "主按钮 / 液体 CTA" : "Primary button / liquid CTA"
+								}),
+								/* @__PURE__ */ V("a", {
+									className: "game-ui-liquid-showcase__link",
+									href: "#game-ui-preview-forms-title",
+									children: n === "zh-CN" ? "表单与输入" : "Forms and inputs"
+								}),
+								/* @__PURE__ */ V("a", {
+									className: "game-ui-liquid-showcase__link",
+									href: "#game-ui-preview-components-title",
+									children: n === "zh-CN" ? "控件与面板" : "Controls and panels"
+								}),
+								/* @__PURE__ */ V("a", {
+									className: "game-ui-liquid-showcase__link",
+									href: "#game-ui-preview-liquid-title",
+									children: n === "zh-CN" ? "液体表面与形态入口" : "Liquid surfaces and forms"
+								})
+							]
+						}),
+						/* @__PURE__ */ H("h3", {
+							id: "game-ui-preview-cta-title",
+							children: ["GameButton · ", n === "zh-CN" ? "主操作按钮" : "Primary action"]
+						}),
+						/* @__PURE__ */ V("p", {
+							className: "game-ui-small-copy",
+							children: n === "zh-CN" ? "variant 说用途，surface 说表面。开始、继续、进入课程不需要先学物理参数。点击示例只展示交互，不会导航。" : "variant chooses the tone; surface chooses the material. Start, continue or enter a course without learning physics knobs. These examples do not navigate."
+						}),
+						/* @__PURE__ */ H("div", {
+							className: "game-ui-preview-two-up",
+							children: [/* @__PURE__ */ H(y, {
+								title: n === "zh-CN" ? "普通主按钮" : "Ordinary primary action",
+								children: [/* @__PURE__ */ V(p, {
+									variant: "primary",
+									children: n === "zh-CN" ? "开始学习" : "Start learning"
+								}), /* @__PURE__ */ V("pre", { children: /* @__PURE__ */ V("code", { children: "<GameButton variant=\"primary\">Start learning</GameButton>" }) })]
+							}), /* @__PURE__ */ H(y, {
+								title: n === "zh-CN" ? "全宽液体主按钮" : "Full-width liquid CTA",
+								children: [/* @__PURE__ */ V(p, {
+									fullWidth: !0,
+									variant: "primary",
+									children: n === "zh-CN" ? "进入课程" : "Enter course"
+								}), /* @__PURE__ */ V("pre", { children: /* @__PURE__ */ V("code", { children: "<GameButton variant=\"primary\"\n  surface=\"liquid\" fullWidth>\n  Enter course\n</GameButton>" }) })]
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ H("section", {
+					"aria-labelledby": "game-ui-preview-token-title",
+					className: "game-ui-preview-section",
+					children: [
+						/* @__PURE__ */ V("h2", {
+							id: "game-ui-preview-token-title",
+							children: i.sections.tokens
+						}),
+						/* @__PURE__ */ V(Ee, {}),
+						/* @__PURE__ */ V("div", {
+							className: "game-ui-token-ledger",
+							children: we.map((e) => /* @__PURE__ */ V(Te, {
+								id: e.id,
+								label: i.tokenGroups[e.id] ?? e.id,
+								tokens: e.tokens
+							}, e.id))
+						})
+					]
+				}),
+				/* @__PURE__ */ H("section", {
+					"aria-labelledby": "game-ui-preview-icons-title",
+					className: "game-ui-preview-section",
+					children: [
+						/* @__PURE__ */ V("h2", {
+							id: "game-ui-preview-icons-title",
+							children: i.sections.icons
+						}),
+						/* @__PURE__ */ V("p", {
+							className: "game-ui-small-copy",
+							children: i.iconsIntro
+						}),
+						/* @__PURE__ */ V(ye, {})
+					]
+				}),
+				/* @__PURE__ */ H("section", {
+					"aria-labelledby": "game-ui-preview-type-title",
+					className: "game-ui-preview-section",
+					children: [/* @__PURE__ */ V("h2", {
+						id: "game-ui-preview-type-title",
+						children: i.sections.typography
+					}), /* @__PURE__ */ V(De, {})]
+				}),
+				/* @__PURE__ */ H("section", {
+					"aria-labelledby": "game-ui-preview-components-title",
+					className: "game-ui-preview-section",
+					children: [
+						/* @__PURE__ */ V("h2", {
+							id: "game-ui-preview-components-title",
+							children: i.sections.components
+						}),
+						/* @__PURE__ */ V(ge, {}),
+						/* @__PURE__ */ V(q, {}),
+						/* @__PURE__ */ V(xe, {}),
+						/* @__PURE__ */ V(pe, {
+							entries: i.history,
+							label: i.historyLabel
+						})
+					]
+				}),
+				/* @__PURE__ */ H("section", {
+					"aria-labelledby": "game-ui-preview-forms-title",
+					className: "game-ui-preview-section",
+					children: [/* @__PURE__ */ V("h2", {
+						id: "game-ui-preview-forms-title",
+						children: i.sections.forms
+					}), /* @__PURE__ */ V(ve, {})]
+				}),
+				/* @__PURE__ */ H("section", {
+					"aria-labelledby": "game-ui-preview-overlay-glass-title",
+					className: "game-ui-preview-section",
+					children: [
+						/* @__PURE__ */ V("h2", {
+							id: "game-ui-preview-overlay-glass-title",
+							children: i.sections.overlayGlass
+						}),
+						/* @__PURE__ */ V("p", {
+							className: "game-ui-small-copy",
+							children: "Official HUD-on-scene tone: dark translucent glass, thin light border, no flat cast shadow, compact density. Use on any container that wraps scene-overlay chrome (3D tavern, cinematic stage). Nest inside light or dark theme."
+						}),
+						/* @__PURE__ */ V(Se, {})
+					]
+				}),
+				/* @__PURE__ */ H("section", {
+					"aria-labelledby": "game-ui-preview-liquid-title",
+					className: "game-ui-preview-section",
+					children: [
+						/* @__PURE__ */ V("h2", {
+							id: "game-ui-preview-liquid-title",
+							children: i.sections.liquid
+						}),
+						/* @__PURE__ */ V("p", {
+							className: "game-ui-small-copy",
+							children: i.liquid.body
+						}),
+						/* @__PURE__ */ V(be, {})
+					]
+				}),
+				/* @__PURE__ */ H("section", {
+					"aria-labelledby": "game-ui-preview-first-session-title",
+					className: "game-ui-preview-section",
+					children: [/* @__PURE__ */ V("h2", {
+						id: "game-ui-preview-first-session-title",
+						children: i.sections.firstSession
+					}), /* @__PURE__ */ V(_e, {})]
+				}),
+				/* @__PURE__ */ H("section", {
+					"aria-labelledby": "game-ui-preview-responsive-title",
+					className: "game-ui-preview-section",
+					children: [/* @__PURE__ */ V("h2", {
+						id: "game-ui-preview-responsive-title",
+						children: i.sections.responsive
+					}), /* @__PURE__ */ V(Ce, {})]
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/preview/LiquidPreview/copy.ts
+var ke = {
+	en: {
+		triggerLabel: "English",
+		langMenuLabel: "Page language",
+		heroTitle: "Liquid",
+		heroBody: "A named look is a tested bundle of physics under a word that says what it means, so picking one is choosing a behaviour instead of configuring a filter. Every form below is live — trigger it.",
+		heroRule: "One liquid element per screen, carrying one layer of intent. Liquid appears on a state change the user caused; there is no ambient, idle or decorative liquid, and gooey on a static solid block reads as damage rather than as material.",
+		sections: {
+			shelf: "The vocabulary",
+			sizes: "The same form at two sizes",
+			tones: "The material on every fill",
+			states: "Rest, engaged, disabled — against the flat control",
+			knobs: "What the knobs actually do"
+		},
+		shelfBody: "Choose one body and one relationship to inspect. A body form goes into LiquidSurface; a relationship describes the space between siblings and needs LiquidGroup. The tone and finish pickers update the selected experiments, without mounting all twelve and exhausting the animation budget.",
+		bodies: "Bodies",
+		groups: "Relationships",
+		bodiesHint: "One silhouette. LiquidSurface draws these.",
+		groupsHint: "Two or more. The caller arranges the items; the goo does the neck.",
+		trigger: "Trigger",
+		reset: "Reset",
+		pulse: "Pulse",
+		sizesBody: "A form fixes its amplitude once, and then lands on a 56px button and a 14px meter. It survives that because the pour is clamped to a share of the shorter side — without the clamp the same bold number that gives a button its shape dissolves a meter into a worm.",
+		control: "Control · 132×56",
+		meter: "Meter · 200×14",
+		clamped: "poured",
+		tonesBody: "The material is lit, not painted, so it reads differently against a dark accent and a pale tint. Both have to work: tone says what an action means, and a destructive action is allowed to be liquid. Flip the theme in the bar above to check the other half — a shadow that is correct on cream is not automatically correct on brown.",
+		flat: "flat",
+		liquid: "liquid",
+		statesBody: "The flat control is the reference the liquid one has to stand next to. Both carry weight: the flat button has a solid lip and a cast shadow, the liquid body has a seat and a cast that follow its poured outline and tighten when it is pressed.",
+		rest: "Rest",
+		engaged: "Engaged",
+		disabled: "Disabled",
+		disabledNote: "A disabled control drops the liquid entirely rather than muting it. Liquid is how this kit says “press me”, and putting that on something that cannot be pressed is a lie told loudly.",
+		knobsBody: "Four numbers and a shadow. None of them is a look on its own, which is why forms exist — but a form you are about to override is a form you need these for.",
+		knobRows: [
+			["blur", "The merge radius: how far apart two silhouettes can be and still see each other as one body. A form about joining wants it large; a form about one crisp control wants it small."],
+			["contrast", "Not a look. The alpha crossing is pinned at 5/12 of the ramp, so contrast sets the edge WIDTH in pixels and nothing else: 2.5628 × blur ÷ contrast. Below about 1.3px the edge is thinner than the pixel drawing it, and the kit quietly lowers the contrast rather than letting that ship."],
+			["blob", "How far the outline pours outward, in px. Outward-only by construction, so the silhouette always contains the control’s own box and no amplitude can eat a label’s padding. This is path data, not a filter — exact at every device ratio."],
+			["lobes", "How many swells go round the outline. 2 is lazy, 5 is busy."],
+			["gloss", "Volume. The edge says “liquid” as an outline; this is what makes the inside of the body look like a material instead of a flat sticker."],
+			["shadow", "The ground. A tight, barely-offset seat says the body is touching; a wide low cast gives it height. A body with weight and no shadow is the one thing the eye refuses."]
+		],
+		tonePicker: "Tone",
+		edgeNote: "edge",
+		lobesNote: "lobes",
+		engagedKnob: "engaged",
+		noShadow: "none — the caller owns the ground"
+	},
+	"zh-CN": {
+		triggerLabel: "简体中文",
+		langMenuLabel: "页面语言",
+		heroTitle: "液体",
+		heroBody: "一个命名的形态，是一整套已经调好的物理参数，外面套一个能说清它是什么意思的词。所以选形态是在选一种行为，而不是在配一组滤镜。下面每一个都是活的——点一下试试。",
+		heroRule: "一屏只放一个液体元素，只承载一层意图。液体只在用户造成的状态变化上出现；没有环境液体、待机液体或者装饰性液体。把胶质效果放在一块不动的实心方块上，看起来是坏了，不是材质。",
+		sections: {
+			shelf: "词汇表",
+			sizes: "同一个形态，两个尺寸",
+			tones: "每一种填色下的材质",
+			states: "静止、触发、禁用——和扁平控件并排",
+			knobs: "这些旋钮到底在控制什么"
+		},
+		shelfBody: "先选一个单体和一个多体关系查看。单体交给 LiquidSurface；关系描述兄弟元素之间的空隙，需要用 LiquidGroup 自己排布。色调与材质选择器改变当前实验，不把十二个同时挂载而耗尽动效预算。",
+		bodies: "单体",
+		groups: "关系",
+		bodiesHint: "一个轮廓。LiquidSurface 画的就是这些。",
+		groupsHint: "两个或更多。元素由调用方排布，胶质负责它们之间的颈。",
+		trigger: "触发",
+		reset: "复位",
+		pulse: "弹一下",
+		sizesBody: "一个形态只定一次振幅，然后它要同时落在 56px 的按钮和 14px 的进度条上。它扛得住，是因为外溢被夹在短边的一个比例内——没有这个夹子，同一个让按钮有形状的大数字，会把进度条化成一条虫。",
+		control: "控件 · 132×56",
+		meter: "进度条 · 200×14",
+		clamped: "实际外溢",
+		tonesBody: "材质是打光打出来的，不是涂出来的，所以它在深色主色和浅色淡彩上读起来不一样。两边都得成立：色调负责说明这个动作是什么意思，而危险动作也可以是液体的。用上面那栏切主题看另一半——在米色上对的阴影，在棕色上不会自动也对。",
+		flat: "扁平",
+		liquid: "液体",
+		statesBody: "扁平控件是液体控件必须并排站着接受比较的那个参照。两边都有重量：扁平按钮有一道实心的唇和一层投影，液体身体有一道贴地的接触影和一层扩散影，都跟着它自己倒出来的轮廓走，被按下时会收紧。",
+		rest: "静止",
+		engaged: "触发",
+		disabled: "禁用",
+		disabledNote: "禁用的控件完全不穿液体，而不是把它调暗。液体是这套 UI 说「按我」的方式，把这句话放在按不动的东西上，是大声说一句假话。",
+		knobsBody: "四个数字加一层阴影。单看每一个都不是一种「样子」，这正是形态存在的理由——但如果你正打算覆写某个形态，你就需要看懂它们。",
+		knobRows: [
+			["blur", "融合半径：两个轮廓离多远还能互相认作同一个身体。讲「合并」的形态要大，讲「一个清晰控件」的形态要小。"],
+			["contrast", "它不是一种样子。alpha 的跨越点被钉在斜坡的 5/12 处，所以 contrast 决定的只有边缘的宽度，单位是像素：2.5628 × blur ÷ contrast。低于约 1.3px，边缘就比画它的那个像素还细，这时 kit 会悄悄把 contrast 压下来，而不是让它这样发出去。"],
+			["blob", "轮廓向外倒出去多远，单位 px。构造上只向外，所以轮廓永远包住控件自己的盒子，再大的振幅也吃不到文字的内边距。这是路径数据，不是滤镜——在任何设备像素比下都是精确的。"],
+			["lobes", "轮廓上有几个鼓包。2 是懒散，5 是热闹。"],
+			["gloss", "体积。边缘用轮廓说「液体」；这个数负责让身体内部看起来是一种材质，而不是一张压平的贴纸。"],
+			["shadow", "地面。一层几乎没有偏移的紧贴影说明它正接触着地面；一层又宽又低的扩散影给它高度。一个有重量却没有影子的身体，是眼睛唯一不肯接受的东西。"]
+		],
+		tonePicker: "色调",
+		edgeNote: "边缘",
+		lobesNote: "个鼓包",
+		engagedKnob: "触发时",
+		noShadow: "无 —— 地面由调用方决定"
+	}
+}, J = [
+	"primary",
+	"secondary",
+	"success",
+	"danger"
+], Ae = {
+	width: 132,
+	height: 56
+};
+//#endregion
+//#region src/preview/LiquidPreview/useFormEngagement.ts
+function Y() {
+	let [e, t] = z(/* @__PURE__ */ new Set()), n = R(/* @__PURE__ */ new Map());
+	return L(() => {
+		let e = n.current;
+		return () => {
+			for (let t of e.values()) clearTimeout(t);
+			e.clear();
+		};
+	}, []), [e, (e) => {
+		let r = e === "ripple";
+		t((t) => {
+			let n = new Set(t);
+			return n.has(e) ? n.delete(e) : n.add(e), n;
+		}), r && (clearTimeout(n.current.get(e)), n.current.set(e, setTimeout(() => {
+			t((t) => {
+				let n = new Set(t);
+				return n.delete(e), n;
+			});
+		}, 520)));
+	}];
+}
+//#endregion
+//#region src/preview/LiquidPreview/BodyStage.tsx
+var X = {
+	primary: "var(--game-ui-accent)",
+	secondary: "var(--game-ui-accent-pale)",
+	success: "var(--game-ui-success)",
+	danger: "var(--game-ui-danger)",
+	ghost: "var(--game-ui-accent-pale)"
+};
+function Z({ form: e, engaged: t, fill: n = "var(--game-ui-accent)", style: r = Ae, radius: i = 999 }) {
+	return /* @__PURE__ */ V(_, {
+		active: t,
+		fill: n,
+		form: e,
+		radius: i,
+		children: /* @__PURE__ */ V("span", {
+			className: "game-ui-liquid-page__body",
+			style: r
+		})
+	});
+}
+//#endregion
+//#region src/preview/LiquidPreview/GroupStage.tsx
+function je({ form: e, engaged: t, fill: n }) {
+	let r = g(e), i = re(e), a = {
+		blur: r.blur,
+		contrast: r.contrast,
+		filterPadding: r.filterPadding,
+		fill: n,
+		gloss: r.gloss
+	}, o = {
+		...i.effect === void 0 ? {} : { effect: i.effect },
+		...i.morph === void 0 ? {} : { morph: i.morph },
+		...i.transition === void 0 ? {} : { transition: i.transition },
+		...r.blob > 0 ? { blob: {
+			amplitude: r.blob,
+			lobes: r.lobes
+		} } : {}
+	}, s = (e) => ({
+		width: e,
+		height: e,
+		display: "block"
+	});
+	if (e === "merge" || e === "split") {
+		let n = e === "merge" ? t ? 0 : 30 : t ? 32 : 0;
+		return /* @__PURE__ */ H(u, {
+			...a,
+			"aria-hidden": "true",
+			className: "game-ui-liquid-page__stage",
+			children: [/* @__PURE__ */ V(u.Item, {
+				...o,
+				radius: 999,
+				x: -n,
+				children: /* @__PURE__ */ V("span", { style: s(46) })
+			}), /* @__PURE__ */ V(u.Item, {
+				...o,
+				radius: 999,
+				x: n,
+				children: /* @__PURE__ */ V("span", { style: s(46) })
+			})]
+		});
+	}
+	if (e === "follow") return /* @__PURE__ */ H("span", {
+		className: "game-ui-liquid-page__rail",
+		children: [/* @__PURE__ */ V(u, {
+			...a,
+			"aria-hidden": "true",
+			className: "game-ui-liquid-page__stage",
+			children: /* @__PURE__ */ V(u.Item, {
+				...o,
+				radius: 14,
+				x: t ? 62 : -62,
+				children: /* @__PURE__ */ V("span", { style: {
+					width: 62,
+					height: 34,
+					display: "block"
+				} })
+			})
+		}), /* @__PURE__ */ H("span", {
+			"aria-hidden": "true",
+			className: "game-ui-liquid-page__rail-slots",
+			children: [
+				/* @__PURE__ */ V("span", {
+					"data-on": t ? void 0 : "true",
+					children: "one"
+				}),
+				/* @__PURE__ */ V("span", { children: "two" }),
+				/* @__PURE__ */ V("span", {
+					"data-on": t ? "true" : void 0,
+					children: "three"
+				})
+			]
+		})]
+	});
+	let c = [
+		[-46, -13],
+		[-19, 11],
+		[5, -15],
+		[29, 9],
+		[50, -7]
+	], l = .24;
+	return /* @__PURE__ */ V(u, {
+		...a,
+		"aria-hidden": "true",
+		className: "game-ui-liquid-page__stage",
+		children: c.map(([e, n], r) => /* @__PURE__ */ F(u.Item, {
+			...o,
+			key: r,
+			delay: r * 40,
+			radius: 999,
+			x: t ? e * l : e,
+			y: t ? n * l : n
+		}, /* @__PURE__ */ V("span", { style: s(22) })))
+	});
+}
+//#endregion
+//#region src/preview/LiquidPreview/FormStage.tsx
+function Me({ form: e, engaged: t, fill: n }) {
+	return m[e].kind === "body" ? /* @__PURE__ */ V(Z, {
+		engaged: t,
+		fill: n,
+		form: e
+	}) : /* @__PURE__ */ V(je, {
+		engaged: t,
+		fill: n,
+		form: e
+	});
+}
+//#endregion
+//#region src/preview/LiquidPreview/Knobs.tsx
+function Q(e) {
+	return e === void 0 ? null : o(e).map((e) => {
+		let t = /(\d+(?:\.\d+)?)%/.exec(e.color)?.[1];
+		return `${e.y}/${e.blur}${t === void 0 ? "" : ` · ${t}%`}`;
+	}).join("  +  ");
+}
+function Ne({ form: e, copy: t }) {
+	let { blur: n, contrast: r, blob: i, lobes: a, gloss: o, shadow: s } = m[e].group, c = N(n, r), l = 2.5628 * n / c, u = Q(s), d = Q(s);
+	return /* @__PURE__ */ H("dl", {
+		className: "game-ui-liquid-page__knobs",
+		children: [
+			/* @__PURE__ */ V("dt", { children: "blur" }),
+			/* @__PURE__ */ V("dd", { children: n }),
+			/* @__PURE__ */ V("dt", { children: "contrast" }),
+			/* @__PURE__ */ H("dd", { children: [r, /* @__PURE__ */ H("span", {
+				className: "game-ui-liquid-page__derived",
+				children: [
+					" ",
+					"· ",
+					t.edgeNote,
+					" ",
+					l.toFixed(2),
+					"px",
+					c < r ? ` → ${j}px` : ""
+				]
+			})] }),
+			/* @__PURE__ */ V("dt", { children: "blob" }),
+			/* @__PURE__ */ H("dd", { children: [i, i > 0 ? /* @__PURE__ */ H("span", {
+				className: "game-ui-liquid-page__derived",
+				children: [
+					" ",
+					"· ",
+					a,
+					" ",
+					t.lobesNote
+				]
+			}) : null] }),
+			/* @__PURE__ */ V("dt", { children: "gloss" }),
+			/* @__PURE__ */ V("dd", { children: o }),
+			/* @__PURE__ */ V("dt", { children: "shadow" }),
+			/* @__PURE__ */ H("dd", { children: [u ?? t.noShadow, u === null ? null : /* @__PURE__ */ V("span", {
+				className: "game-ui-liquid-page__derived",
+				children: " · y/blur"
+			})] }),
+			d === null ? null : /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("dt", { children: t.engagedKnob }), /* @__PURE__ */ V("dd", { children: d })] })
+		]
+	});
+}
+//#endregion
+//#region src/preview/LiquidPreview/Shelf.tsx
+function $({ kind: e, copy: t, tone: n }) {
+	let [r, i] = Y(), a = h.filter((t) => m[t].kind === e), [o, s] = z(() => a[0]);
+	return /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("div", {
+		className: "game-ui-liquid-demo-controls",
+		role: "group",
+		"aria-label": e === "body" ? "单体形态" : "多体形态",
+		children: a.map((e) => /* @__PURE__ */ V(p, {
+			"aria-pressed": o === e,
+			onClick: () => s(e),
+			children: e
+		}, e))
+	}), /* @__PURE__ */ V("div", {
+		className: "game-ui-liquid-page__shelf",
+		children: a.filter((e) => e === o).map((e) => {
+			let a = r.has(e);
+			return /* @__PURE__ */ H(y, {
+				className: "game-ui-liquid-page__tile",
+				tone: "strong",
+				children: [
+					/* @__PURE__ */ V("div", {
+						className: "game-ui-liquid-page__stage-slot",
+						children: /* @__PURE__ */ V(Me, {
+							engaged: a,
+							fill: X[n],
+							form: e
+						})
+					}),
+					/* @__PURE__ */ V("h4", { children: e }),
+					/* @__PURE__ */ V("p", {
+						className: "game-ui-liquid-page__prose",
+						children: m[e].summary
+					}),
+					/* @__PURE__ */ V(p, {
+						onClick: () => i(e),
+						variant: "ghost",
+						children: e === "ripple" ? t.pulse : a ? t.reset : t.trigger
+					}),
+					/* @__PURE__ */ V(Ne, {
+						copy: t,
+						form: e
+					})
+				]
+			}, e);
+		})
+	})] });
+}
+//#endregion
+//#region src/preview/LiquidPreview/Sizes.tsx
+function Pe({ copy: e }) {
+	let [t, n] = Y(), r = h.filter((e) => m[e].kind === "body"), [i, a] = z("press"), o = (e, t) => Math.min(e, t * M).toFixed(2);
+	return /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("div", {
+		className: "game-ui-liquid-demo-controls",
+		role: "group",
+		"aria-label": "尺寸对照的形态",
+		children: r.map((e) => /* @__PURE__ */ V(p, {
+			"aria-pressed": i === e,
+			onClick: () => a(e),
+			children: e
+		}, e))
+	}), /* @__PURE__ */ V("div", {
+		className: "game-ui-liquid-page__sizes",
+		children: r.filter((e) => e === i).map((r) => {
+			let i = t.has(r), { blob: a } = m[r].group;
+			return /* @__PURE__ */ H(y, {
+				className: "game-ui-liquid-page__size-row",
+				tone: "strong",
+				children: [/* @__PURE__ */ H("header", { children: [/* @__PURE__ */ V("h4", { children: r }), /* @__PURE__ */ V(p, {
+					onClick: () => n(r),
+					variant: "ghost",
+					children: r === "ripple" ? e.pulse : i ? e.reset : e.trigger
+				})] }), /* @__PURE__ */ H("div", {
+					className: "game-ui-liquid-page__size-pair",
+					children: [/* @__PURE__ */ H("div", { children: [/* @__PURE__ */ V("div", {
+						className: "game-ui-liquid-page__stage-slot",
+						children: /* @__PURE__ */ V(Z, {
+							engaged: i,
+							form: r
+						})
+					}), /* @__PURE__ */ H("small", { children: [
+						e.control,
+						" · ",
+						e.clamped,
+						" ",
+						o(a, 56),
+						"px"
+					] })] }), /* @__PURE__ */ H("div", { children: [/* @__PURE__ */ V("div", {
+						className: "game-ui-liquid-page__stage-slot game-ui-liquid-page__stage-slot--thin",
+						children: /* @__PURE__ */ V(Z, {
+							engaged: i,
+							form: r,
+							style: {
+								width: 200,
+								height: 14
+							}
+						})
+					}), /* @__PURE__ */ H("small", { children: [
+						e.meter,
+						" · ",
+						e.clamped,
+						" ",
+						o(a, 14),
+						"px"
+					] })] })]
+				})]
+			}, r);
+		})
+	})] });
+}
+//#endregion
+//#region src/preview/LiquidPreview/Tones.tsx
+function Fe({ copy: e }) {
+	let [t, n] = z("primary"), [r, i] = z(null);
+	return /* @__PURE__ */ H(B, { children: [/* @__PURE__ */ V("div", {
+		className: "game-ui-liquid-demo-controls",
+		role: "group",
+		"aria-label": "颜色对照",
+		children: J.map((e) => /* @__PURE__ */ V(p, {
+			"aria-pressed": t === e,
+			onClick: () => n(e),
+			children: e
+		}, e))
+	}), /* @__PURE__ */ V("div", {
+		className: "game-ui-liquid-page__tones",
+		children: J.filter((e) => e === t).map((t) => /* @__PURE__ */ H(y, {
+			className: "game-ui-liquid-page__tone",
+			tone: "strong",
+			children: [
+				/* @__PURE__ */ V("h4", { children: t }),
+				/* @__PURE__ */ V(p, {
+					variant: t,
+					children: e.flat
+				}),
+				/* @__PURE__ */ V("span", {
+					onPointerCancel: () => i(null),
+					onPointerDown: () => i(t),
+					onPointerLeave: () => i(null),
+					onPointerUp: () => i(null),
+					children: /* @__PURE__ */ V(p, {
+						variant: t,
+						children: e.liquid
+					})
+				}),
+				/* @__PURE__ */ V("small", { children: r === t ? e.engaged : e.rest })
+			]
+		}, t))
+	})] });
+}
+//#endregion
+//#region src/preview/LiquidPreview/States.tsx
+function Ie({ copy: e }) {
+	let [t, n] = z(!1), [r, i] = z(0);
+	return /* @__PURE__ */ H(y, {
+		className: "game-ui-liquid-page__states",
+		title: e.rest,
+		children: [
+			/* @__PURE__ */ V("p", { children: "按住观察轮廓，松开回弹；文字和点击位置保持不动。" }),
+			/* @__PURE__ */ V(p, {
+				variant: "primary",
+				disabled: t,
+				onClick: () => i((e) => e + 1),
+				children: e.liquid
+			}),
+			/* @__PURE__ */ V(p, {
+				"aria-pressed": t,
+				onClick: () => n((e) => !e),
+				children: e.disabled
+			}),
+			/* @__PURE__ */ V("output", {
+				"aria-live": "polite",
+				children: r
+			})
+		]
+	});
+}
+//#endregion
+//#region src/preview/LiquidPreview/LiquidPreview.tsx
+function Le() {
+	let [e, t] = z("zh-CN"), [n, r] = z(() => typeof window > "u" ? "shelf" : /liquid-(sizes|tones|states|knobs)-title/.exec(window.location.hash)?.[1] ?? "shelf"), [i, a] = z("primary"), o = ke[e];
+	return L(() => (document.documentElement.dataset.gameUiPreview = "reference", () => {
+		delete document.documentElement.dataset.gameUiPreview;
+	}), []), /* @__PURE__ */ V(B, { children: /* @__PURE__ */ H("main", {
+		"aria-label": "Swimmer UI Kit liquid surface",
+		className: "game-ui-preview game-ui-preview-canvas game-ui-liquid-page",
+		children: [
+			/* @__PURE__ */ H("header", {
+				className: "game-ui-preview-hero",
+				children: [
+					/* @__PURE__ */ V(C, {
+						tone: "ai",
+						children: "@pieai/swimmer-ui-kit"
+					}),
+					/* @__PURE__ */ V(b, {
+						currentLabel: o.triggerLabel,
+						label: o.langMenuLabel,
+						onSelect: (e) => t(e),
+						options: [{
+							id: "en",
+							label: "English",
+							meta: "Page copy"
+						}, {
+							id: "zh-CN",
+							label: "简体中文",
+							meta: "页面文案"
+						}],
+						value: e
+					}),
+					/* @__PURE__ */ V("h1", { children: o.heroTitle }),
+					/* @__PURE__ */ V("p", { children: o.heroBody }),
+					/* @__PURE__ */ V("p", {
+						className: "game-ui-liquid-page__rule",
+						children: o.heroRule
+					}),
+					/* @__PURE__ */ V("p", { children: /* @__PURE__ */ V("a", {
+						href: "/",
+						children: "先选成品控件：按钮、开关、进度、下拉 →"
+					}) })
+				]
+			}),
+			/* @__PURE__ */ H("section", {
+				className: "game-ui-preview-section",
+				"aria-label": "材料实验选择",
+				children: [
+					/* @__PURE__ */ V("p", { children: "这里展示的是动作形态，不是成品控件。只挂载当前实验，保留两组共享动效预算，不把其余示例静默降级。" }),
+					/* @__PURE__ */ V("p", { children: "同一套涟的薄液体材质；这里只比较动作，不再选择不同厚度或高光皮肤。" }),
+					/* @__PURE__ */ V("div", {
+						className: "game-ui-liquid-demo-controls",
+						role: "group",
+						"aria-label": "材料实验类别",
+						children: [
+							"shelf",
+							"sizes",
+							"tones",
+							"states",
+							"knobs"
+						].map((e) => /* @__PURE__ */ V(p, {
+							"aria-pressed": n === e,
+							onClick: () => {
+								r(e), window.history.replaceState(null, "", `#liquid-${e}-title`);
+							},
+							children: o.sections[e]
+						}, e))
+					})
+				]
+			}),
+			n === "shelf" && /* @__PURE__ */ H("section", {
+				"aria-labelledby": "liquid-shelf-title",
+				className: "game-ui-preview-section",
+				children: [
+					/* @__PURE__ */ V("h2", {
+						id: "liquid-shelf-title",
+						children: o.sections.shelf
+					}),
+					/* @__PURE__ */ V("p", {
+						className: "game-ui-liquid-page__prose",
+						children: o.shelfBody
+					}),
+					/* @__PURE__ */ H("div", {
+						className: "game-ui-liquid-page__tone-picker",
+						role: "group",
+						"aria-label": o.tonePicker,
+						children: [/* @__PURE__ */ V("span", { children: o.tonePicker }), J.map((e) => /* @__PURE__ */ V(p, {
+							"aria-pressed": i === e,
+							onClick: () => a(e),
+							variant: "secondary",
+							children: e
+						}, e))]
+					}),
+					/* @__PURE__ */ H("h3", { children: [
+						o.bodies,
+						" ",
+						/* @__PURE__ */ V("small", {
+							className: "game-ui-liquid-page__hint",
+							children: o.bodiesHint
+						})
+					] }),
+					/* @__PURE__ */ V($, {
+						copy: o,
+						kind: "body",
+						tone: i
+					}),
+					/* @__PURE__ */ H("h3", { children: [
+						o.groups,
+						" ",
+						/* @__PURE__ */ V("small", {
+							className: "game-ui-liquid-page__hint",
+							children: o.groupsHint
+						})
+					] }),
+					/* @__PURE__ */ V($, {
+						copy: o,
+						kind: "group",
+						tone: i
+					})
+				]
+			}),
+			n === "sizes" && /* @__PURE__ */ H("section", {
+				"aria-labelledby": "liquid-sizes-title",
+				className: "game-ui-preview-section",
+				children: [
+					/* @__PURE__ */ V("h2", {
+						id: "liquid-sizes-title",
+						children: o.sections.sizes
+					}),
+					/* @__PURE__ */ V("p", {
+						className: "game-ui-liquid-page__prose",
+						children: o.sizesBody
+					}),
+					/* @__PURE__ */ V(Pe, { copy: o })
+				]
+			}),
+			n === "tones" && /* @__PURE__ */ H("section", {
+				"aria-labelledby": "liquid-tones-title",
+				className: "game-ui-preview-section",
+				children: [
+					/* @__PURE__ */ V("h2", {
+						id: "liquid-tones-title",
+						children: o.sections.tones
+					}),
+					/* @__PURE__ */ V("p", {
+						className: "game-ui-liquid-page__prose",
+						children: o.tonesBody
+					}),
+					/* @__PURE__ */ V(Fe, { copy: o })
+				]
+			}),
+			n === "states" && /* @__PURE__ */ H("section", {
+				"aria-labelledby": "liquid-states-title",
+				className: "game-ui-preview-section",
+				children: [
+					/* @__PURE__ */ V("h2", {
+						id: "liquid-states-title",
+						children: o.sections.states
+					}),
+					/* @__PURE__ */ V("p", {
+						className: "game-ui-liquid-page__prose",
+						children: o.statesBody
+					}),
+					/* @__PURE__ */ V(Ie, { copy: o })
+				]
+			}),
+			n === "knobs" && /* @__PURE__ */ H("section", {
+				"aria-labelledby": "liquid-knobs-title",
+				className: "game-ui-preview-section",
+				children: [
+					/* @__PURE__ */ V("h2", {
+						id: "liquid-knobs-title",
+						children: o.sections.knobs
+					}),
+					/* @__PURE__ */ V("p", {
+						className: "game-ui-liquid-page__prose",
+						children: o.knobsBody
+					}),
+					/* @__PURE__ */ V("dl", {
+						className: "game-ui-liquid-page__glossary",
+						children: o.knobRows.map(([e, t]) => /* @__PURE__ */ H("div", { children: [/* @__PURE__ */ V("dt", { children: e }), /* @__PURE__ */ V("dd", { children: t })] }, e))
+					})
+				]
+			})
+		]
+	}) });
+}
+//#endregion
+export { U as GAME_UI_PREVIEW_MESSAGES, Oe as GameUiPreview, Le as LiquidPreview };