gis-view-webgl2 0.1.0 → 0.1.2

package/docs/demos/DemoShell.vue

@@ -1,337 +1,666 @@
-<script setup>
-/**
- * 演示外壳：分组页签 + 一句说明 + 当前演示（动态组件）。
- *
- * 每个演示都是一个独立组件（BasicDemo / LabelDemo / ... / GisViewDemo），
- * 切到哪个才 import 哪个 —— 综合示例那份最大，不点进去就不会下载。
- * 组件卸载即销毁各自的视图（各演示自己 onBeforeUnmount destroy()），来回切不会漏画布。
- *
- * 外壳只管「怎么找演示」：页签按 DEMO_GROUPS 分组、每句说明旁边给一条对应文档的直达链接、
- * 地址栏可点播（`?demo=labels`）、记不住地址就接着上次看的（localStorage），
- * 键盘 `[` / `]` 前后翻页签（焦点在输入框里时不抢键）。
- */
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
-import { DEFAULT_DEMO_ID, DEMO_GROUPS, DEMOS } from './demos.js'
-
-const publicBase = String(import.meta.env?.BASE_URL ?? '/').replace(/\/?$/, '/')
-/** 外壳顶部的五个常驻入口：看文档、查 API、跑步进代码、看拆解、跑自测，都不用先离开当前演示 */
-const quickLinks = [
-	{ label: '文档中心', href: `${publicBase}docs/index.html`, title: '按章节阅读全部文档' },
-	{ label: 'API 速查', href: `${publicBase}docs/api/index.html`, title: '搜索实例方法、属性与 options' },
-	{ label: '调试页', href: `${publicBase}docs/playground/index.html`, title: '在可运行实例上改代码' },
-	{ label: '分步演示', href: `${publicBase}docs/steps/index.html`, title: '从空画布到完整组件的十三步' },
-	{ label: '自测', href: `${publicBase}docs/steps/selftest-demos.html`, title: '打开演示页的 PASS / FAIL 清单' }
-]
-
-/** 地址栏可以点播：`?demo=labels` 直接进标签演示（文档里给链接、自测页切页签都靠它） */
-const requestedId = typeof window === 'undefined' ? '' : new URLSearchParams(window.location.search).get('demo')
-/** 上次看过的演示：地址栏没点播时接着它；读不出来（隐私模式 / 禁掉存储）就当没记过 */
-const DEMO_STORAGE_KEY = 'gis-view:last-demo'
-const storedId = (() => {
-	try {
-		return window.localStorage.getItem(DEMO_STORAGE_KEY) ?? ''
-	}
-	catch {
-		return ''
-	}
-})()
-const currentId = ref(
-	DEMOS.some(item => item.id === requestedId) ? requestedId
-		: DEMOS.some(item => item.id === storedId) ? storedId
-			: DEFAULT_DEMO_ID
-)
-const current = computed(() => DEMOS.find(item => item.id === currentId.value) ?? DEMOS[0])
-/** 按 DEMO_GROUPS 的次序把演示分组：外壳一个循环画出「组名 + 组里的页签」 */
+<script setup>
+/**
+ * 演示外壳：分组页签 + 一句说明 + 当前演示（动态组件）。
+ *
+ * 每个演示都是一个独立组件（BasicDemo / LabelDemo / ... / GisViewDemo），
+ * 切到哪个才 import 哪个 —— 综合示例那份最大，不点进去就不会下载。
+ * 组件卸载即销毁各自的视图（各演示自己 onBeforeUnmount destroy()），来回切不会漏画布。
+ *
+ * 外壳只管「怎么找演示」：页签按 DEMO_GROUPS 分组、每句说明旁边给一条对应文档的直达链接、
+ * 地址栏可点播（`?demo=labels`）、记不住地址就接着上次看的（localStorage），
+ * 键盘 `[` / `]` 前后翻页签（焦点在输入框里时不抢键）。
+ */
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { DEFAULT_DEMO_ID, DEMO_GROUPS, DEMOS } from './demos.js'
+
+const publicBase = String(import.meta.env?.BASE_URL ?? '/').replace(/\/?$/, '/')
+/** 外壳顶部的五个常驻入口：看文档、查 API、跑步进代码、看拆解、跑自测，都不用先离开当前演示 */
+const quickLinks = [
+	{ label: '文档中心', href: `${publicBase}docs/index.html`, title: '按章节阅读全部文档' },
+	{ label: 'API 速查', href: `${publicBase}docs/api/index.html`, title: '搜索实例方法、属性与 options' },
+	{ label: '调试页', href: `${publicBase}docs/playground/index.html`, title: '在可运行实例上改代码' },
+	{ label: '分步演示', href: `${publicBase}docs/steps/index.html`, title: '从空画布到完整组件的十三步' },
+	{ label: '自测', href: `${publicBase}docs/steps/selftest-demos.html`, title: '打开演示页的 PASS / FAIL 清单' }
+]
+
+/** 地址栏可以点播：`?demo=labels` 直接进标签演示（文档里给链接、自测页切页签都靠它） */
+const requestedId = typeof window === 'undefined' ? '' : new URLSearchParams(window.location.search).get('demo')
+/** 上次看过的演示：地址栏没点播时接着它；读不出来（隐私模式 / 禁掉存储）就当没记过 */
+const DEMO_STORAGE_KEY = 'gis-view:last-demo'
+const storedId = (() => {
+	try {
+		return window.localStorage.getItem(DEMO_STORAGE_KEY) ?? ''
+	}
+	catch {
+		return ''
+	}
+})()
+const currentId = ref(
+	DEMOS.some(item => item.id === requestedId) ? requestedId
+		: DEMOS.some(item => item.id === storedId) ? storedId
+			: DEFAULT_DEMO_ID
+)
+const current = computed(() => DEMOS.find(item => item.id === currentId.value) ?? DEMOS[0])
+const currentIndex = computed(() => Math.max(0, DEMOS.findIndex(item => item.id === current.value.id)))
+const currentGroup = computed(() => DEMO_GROUPS.find(group => group.id === current.value.group) ?? DEMO_GROUPS[0])
+/** 上一个 / 下一步：按钮与键盘共用，到了头尾就绕回另一端 */
+const stepDemo = (step) => {
+	const next = DEMOS[(currentIndex.value + step + DEMOS.length) % DEMOS.length]
+	currentId.value = next.id
+}
+/** 按 DEMO_GROUPS 的次序把演示分组：外壳一个循环画出「组名 + 组里的页签」 */
 const groupedDemos = computed(() => DEMO_GROUPS
 	.map(group => ({ ...group, items: DEMOS.filter(item => item.group === group.id) }))
 	.filter(group => group.items.length > 0))
+/** 分组按钮：切到该组的第一项；当前项本来就在这组时保持不动 */
+const selectGroup = (group) => {
+	if (!group.items.some(item => item.id === currentId.value) && group.items[0]) {
+		currentId.value = group.items[0].id
+	}
+}
 const loaded = shallowRef(null)
 const loading = ref(true)
+const loadError = ref('')
 let requestSeq = 0
-
-watch(currentId, async () => {
-	const seq = (requestSeq += 1)
-	loading.value = true
-	loaded.value = null
-	const module = await current.value.component()
-	// 加载期间用户又切了页签：这一份迟到的结果直接丢掉，别把当前演示顶掉
-	if (seq !== requestSeq) {
-		return
+/** 已经拉过的演示模块：切回来直接用缓存，失败的那一条删掉，重试时重新请求 */
+const moduleCache = new Map()
+const loadDemoModule = (demo) => {
+	let task = moduleCache.get(demo.id)
+	if (!task) {
+		task = Promise.resolve()
+			.then(() => demo.component())
+			.then(module => module.default ?? module)
+		moduleCache.set(demo.id, task)
+		task.catch(() => {
+			if (moduleCache.get(demo.id) === task) {
+				moduleCache.delete(demo.id)
+			}
+		})
 	}
-	loaded.value = module.default ?? module
-	loading.value = false
-}, { immediate: true })
-
-/** 组件自己报一句读数（比如「已加载 N 个节点」）：外壳只负责显示，不掺和演示内部 */
-const notice = ref('')
-const notify = (text) => {
-	notice.value = text ?? ''
+	return task
 }
-// 切演示时把上一份的读数清掉，免得看着像新演示报的
-watch(currentId, () => { notice.value = '' })
-
-// 切页签时把当前演示写进地址栏：刷新 / 分享链接还停在同一个演示上
-watch(currentId, (id) => {
-	if (typeof window === 'undefined') {
+/** 当前演示加载完之后，空闲时把前后两份也拉下来：首次切过去不用再等网络 */
+let idleHandle = 0
+const clearIdleWarmup = () => {
+	if (!idleHandle) {
 		return
 	}
-	const url = new URL(window.location.href)
-	url.searchParams.set('demo', id)
-	window.history.replaceState(null, '', url)
-	try {
-		window.localStorage.setItem(DEMO_STORAGE_KEY, id)
+	if (typeof window.cancelIdleCallback === 'function') {
+		window.cancelIdleCallback(idleHandle)
 	}
-	catch {
-		// 存不了就算了：只是少一次「接着上次看」的回忆
+	else {
+		window.clearTimeout(idleHandle)
 	}
-}, { immediate: true })
-/**
- * 键盘翻页签：`[` / `]` 前后一个（到头绕回）。焦点在输入框 / 可编辑元素里时不抢键 ——
- * 演示面板里到处是输入框，抢键会让「打一个方括号」变成切演示。
- */
-const handleDemoKeys = (event) => {
-	if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
+	idleHandle = 0
+}
+const warmAdjacentDemos = () => {
+	clearIdleWarmup()
+	if (typeof window === 'undefined') {
 		return
 	}
-	if (event.key !== '[' && event.key !== ']') {
-		return
+	const run = () => {
+		idleHandle = 0
+		const next = DEMOS[(currentIndex.value + 1) % DEMOS.length]
+		const previous = DEMOS[(currentIndex.value - 1 + DEMOS.length) % DEMOS.length]
+		for (const demo of [next, previous]) {
+			if (demo && demo.id !== current.value.id) {
+				loadDemoModule(demo).catch(() => {})
+			}
+		}
 	}
-	const target = event.target
-	if (target instanceof HTMLElement && (target.isContentEditable || target.closest('input, textarea, select'))) {
-		return
+	idleHandle = typeof window.requestIdleCallback === 'function'
+		? window.requestIdleCallback(run, { timeout: 2500 })
+		: window.setTimeout(run, 600)
+}
+
+const loadCurrent = async () => {
+	clearIdleWarmup()
+	const seq = (requestSeq += 1)
+	loading.value = true
+	loadError.value = ''
+	loaded.value = null
+	try {
+		const component = await loadDemoModule(current.value)
+		// 加载期间用户又切了页签：这一份迟到的结果直接丢掉，别把当前演示顶掉
+		if (seq !== requestSeq) {
+			return
+		}
+		loaded.value = component
+		loading.value = false
+		warmAdjacentDemos()
 	}
-	const step = event.key === ']' ? 1 : -1
-	const at = DEMOS.findIndex(item => item.id === currentId.value)
-	const next = DEMOS[(at + step + DEMOS.length) % DEMOS.length]
-	currentId.value = next.id
+	catch (error) {
+		if (seq !== requestSeq) {
+			return
+		}
+		loadError.value = error instanceof Error ? error.message : String(error)
+		loading.value = false
+	}
+}
+watch(currentId, loadCurrent, { immediate: true })
+/** 断网 / 部署路径写错这类失败之后不用刷新整页：清掉这一条的缓存再拉一次 */
+const retryCurrent = () => {
+	moduleCache.delete(currentId.value)
+	loadCurrent()
 }
+
+/** 组件自己报一句读数（比如「已加载 N 个节点」）：外壳只负责显示，不掺和演示内部 */
+const notice = ref('')
+const notify = (text) => {
+	notice.value = text ?? ''
+}
+// 切演示时把上一份的读数清掉，免得看着像新演示报的
+watch(currentId, () => { notice.value = '' })
+
+// 切页签时把当前演示写进地址栏：刷新 / 分享链接还停在同一个演示上
+watch(currentId, (id) => {
+	if (typeof window === 'undefined') {
+		return
+	}
+	const url = new URL(window.location.href)
+	url.searchParams.set('demo', id)
+	window.history.replaceState(null, '', url)
+	try {
+		window.localStorage.setItem(DEMO_STORAGE_KEY, id)
+	}
+	catch {
+		// 存不了就算了：只是少一次「接着上次看」的回忆
+	}
+}, { immediate: true })
+/**
+ * 键盘翻页签：`[` / `]` 前后一个（到头绕回）。焦点在输入框 / 可编辑元素里时不抢键 ——
+ * 演示面板里到处是输入框，抢键会让「打一个方括号」变成切演示。
+ */
+const handleDemoKeys = (event) => {
+	if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) {
+		return
+	}
+	if (event.key !== '[' && event.key !== ']') {
+		return
+	}
+	const target = event.target
+	if (target instanceof HTMLElement && (target.isContentEditable || target.closest('input, textarea, select'))) {
+		return
+	}
+	const step = event.key === ']' ? 1 : -1
+	stepDemo(step)
+}
 onMounted(() => window.addEventListener('keydown', handleDemoKeys))
 onBeforeUnmount(() => {
 	requestSeq += 1
+	clearIdleWarmup()
 	window.removeEventListener('keydown', handleDemoKeys)
 })
 </script>
 
 <template>
-	<section class="demo-shell">
+	<section class="demo-shell" :aria-busy="loading">
 		<div class="demo-shell__sticky">
-			<nav class="demo-shell__tabs" aria-label="功能演示">
-				<div v-for="group in groupedDemos" :key="group.id" class="demo-shell__group">
+			<nav class="demo-shell__groups" aria-label="演示分组">
+				<button
+					v-for="group in groupedDemos"
+					:key="group.id"
+					type="button"
+					class="demo-shell__group-tab"
+					:class="{ 'demo-shell__group-tab--active': group.id === currentGroup.id }"
+					:aria-pressed="group.id === currentGroup.id"
+					:data-demo-group="group.id"
+					:title="`${group.label}（${group.items.length} 个演示）`"
+					@click="selectGroup(group)"
+				>
 					<span class="demo-shell__group-label">{{ group.label }}</span>
+					<span class="demo-shell__group-count">{{ group.items.length }}</span>
+				</button>
+			</nav>
+			<nav class="demo-shell__tabs" aria-label="当前分组的演示">
+				<div
+					v-for="group in groupedDemos"
+					:key="group.id"
+					class="demo-shell__group"
+					:class="{ 'demo-shell__group--active': group.id === currentGroup.id }"
+				>
 					<button
-						v-for="item in group.items"
-						:key="item.id"
-						type="button"
-						class="demo-shell__tab"
-						:class="{ 'demo-shell__tab--active': item.id === currentId }"
-						:aria-current="item.id === currentId ? 'page' : undefined"
-						:title="item.blurb"
-						@click="currentId = item.id"
-					>
+						v-for="item in group.items"
+						:key="item.id"
+						type="button"
+						class="demo-shell__tab"
+						:class="{ 'demo-shell__tab--active': item.id === currentId }"
+						:aria-current="item.id === currentId ? 'page' : undefined"
+						:title="item.blurb"
+						@click="currentId = item.id"
+					>
 						{{ item.title }}
 					</button>
 				</div>
-			</nav>
-			<div class="demo-shell__quick" aria-label="快捷入口">
-				<span class="demo-shell__quick-label">快速入口</span>
-				<a
-					v-for="link in quickLinks"
-					:key="link.href"
-					class="demo-shell__quick-link"
-					:href="link.href"
-					:title="link.title"
-					target="_blank"
-					rel="noreferrer"
-				>{{ link.label }}</a>
-			</div>
-		</div>
-		<p class="demo-shell__blurb">
-			<strong>{{ current.title }}</strong>
-			<span>{{ current.blurb }}</span>
-			<span v-if="notice" class="demo-shell__notice">{{ notice }}</span>
-			<a class="demo-shell__doc" :href="current.doc.href" target="_blank" rel="noreferrer">对应文档 · {{ current.doc.label }}</a>
-			<span class="demo-shell__keys">[ / ] 切换</span>
+			</nav>
+			<div class="demo-shell__quick" aria-label="快捷入口">
+				<span class="demo-shell__quick-label">快速入口</span>
+				<a
+					v-for="link in quickLinks"
+					:key="link.href"
+					class="demo-shell__quick-link"
+					:href="link.href"
+					:title="link.title"
+					target="_blank"
+					rel="noreferrer"
+				>{{ link.label }}</a>
+			</div>
+		</div>
+		<p class="demo-shell__blurb">
+			<span class='demo-shell__eyebrow'>{{ currentGroup.label }} · {{ currentIndex + 1 }} / {{ DEMOS.length }}</span>
+			<strong>{{ current.title }}</strong>
+			<span>{{ current.blurb }}</span>
+			<span class='demo-shell__step'>
+				<button type='button' class='demo-shell__step-btn' data-demo='demo-prev' title='上一个演示（[）' @click='stepDemo(-1)'>← 上一项</button>
+				<button type='button' class='demo-shell__step-btn' data-demo='demo-next' title='下一个演示（]）' @click='stepDemo(1)'>下一项 →</button>
+			</span>
+			<span v-if="notice" class="demo-shell__notice">{{ notice }}</span>
+			<a class="demo-shell__doc" :href="current.doc.href" target="_blank" rel="noreferrer">对应文档 · {{ current.doc.label }}</a>
+			<span class="demo-shell__keys">[ / ] 切换</span>
+		</p>
+		<component :is="loaded" v-if="loaded" :key="current.id" @notice="notify" />
+		<p v-else-if="loading" class="demo-shell__loading" aria-live="polite">
+			<span class="demo-shell__spinner" aria-hidden="true"></span>
+			正在加载「{{ current.title }}」…
 		</p>
-		<component :is="loaded" v-if="loaded" @notice="notify" />
-		<p v-else-if="loading" class="demo-shell__loading">正在加载「{{ current.title }}」…</p>
+		<div v-else-if="loadError" class="demo-shell__error" role="alert">
+			<strong>「{{ current.title }}」加载失败</strong>
+			<p>{{ loadError }}</p>
+			<button type="button" class="demo-shell__retry" @click="retryCurrent">重新加载</button>
+			<span class="demo-shell__error-hint">检查网络或部署路径后重试，不会影响其它页签。</span>
+		</div>
 	</section>
 </template>
-
-<style scoped>
-.demo-shell {
-	min-width: 0;
-	max-width: 100%;
-}
-
-.demo-shell__sticky {
-	position: sticky;
-	top: 0;
-	z-index: 20;
+
+<style scoped>
+.demo-shell {
+	min-width: 0;
+	max-width: 100%;
+}
+
+.demo-shell__sticky {
+	position: sticky;
+	top: 0;
+	z-index: 20;
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+	min-width: 0;
+	max-width: 100%;
+	margin: -4px -10px 9px;
+	padding: 8px 10px 9px;
+	border: 1px solid rgba(214, 224, 236, 0.9);
+	border-radius: 10px;
+	background: rgba(244, 247, 251, 0.94);
+	box-shadow: 0 6px 22px rgba(31, 62, 105, 0.1);
+	backdrop-filter: blur(10px);
+}
+
+.demo-shell__tabs {
 	display: flex;
-	flex-direction: column;
+	align-items: center;
 	gap: 6px;
 	min-width: 0;
 	max-width: 100%;
-	margin: -4px -10px 9px;
-	padding: 8px 10px 9px;
-	border: 1px solid rgba(214, 224, 236, 0.9);
-	border-radius: 10px;
-	background: rgba(244, 247, 251, 0.94);
-	box-shadow: 0 6px 22px rgba(31, 62, 105, 0.1);
-	backdrop-filter: blur(10px);
+	padding-top: 2px;
 }
 
-.demo-shell__tabs {
+.demo-shell__groups {
 	display: flex;
 	align-items: center;
 	flex-wrap: wrap;
-	gap: 6px 14px;
+	gap: 4px;
 	min-width: 0;
-	max-width: 100%;
 }
 
-.demo-shell__group {
-	display: flex;
+.demo-shell__group-tab {
+	display: inline-flex;
 	align-items: center;
 	gap: 6px;
-}
-
-.demo-shell__group-label {
-	padding: 1px 7px;
-	border-radius: 4px;
-	background: #eef2f7;
-	color: #8a9ab4;
-	font-size: 11px;
-	line-height: 18px;
-	white-space: nowrap;
-}
-
-.demo-shell__tab {
-	padding: 7px 13px;
+	padding: 3px 9px 3px 7px;
 	border: 1px solid #d6e0ec;
 	border-radius: 999px;
 	background: #fff;
-	color: #2f5e94;
-	font-size: 13px;
+	color: var(--demo-group);
+	font: inherit;
+	font-size: 12px;
+	line-height: 1.6;
 	cursor: pointer;
+	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
 }
 
-.demo-shell__tab:hover {
-	background: #eef4fc;
+.demo-shell__group-tab:hover {
+	border-color: var(--demo-group);
+	background: var(--demo-group-soft);
 }
 
-.demo-shell__tab--active {
-	border-color: #3678bf;
-	background: #3678bf;
+.demo-shell__group-tab--active {
+	border-color: var(--demo-group);
+	background: var(--demo-group);
 	color: #fff;
 	font-weight: 600;
 }
 
-.demo-shell__quick {
-	display: flex;
+.demo-shell__group-tab:nth-child(1) {
+	--demo-group: #3678bf;
+	--demo-group-soft: #eaf2fc;
+}
+
+.demo-shell__group-tab:nth-child(2) {
+	--demo-group: #2f8668;
+	--demo-group-soft: #e7f5ef;
+}
+
+.demo-shell__group-tab:nth-child(3) {
+	--demo-group: #7959bd;
+	--demo-group-soft: #f0ebfb;
+}
+
+.demo-shell__group-tab:nth-child(4) {
+	--demo-group: #a86418;
+	--demo-group-soft: #fbf1e4;
+}
+
+.demo-shell__group-tab:nth-child(5) {
+	--demo-group: #b24b5d;
+	--demo-group-soft: #fbecef;
+}
+
+.demo-shell__group-tab:nth-child(6) {
+	--demo-group: #4c5f91;
+	--demo-group-soft: #ebeff7;
+}
+
+.demo-shell__group {
+	display: none;
 	align-items: center;
 	flex-wrap: wrap;
-	gap: 5px;
-	padding-top: 6px;
-	border-top: 1px dashed #dce6f1;
+	gap: 6px;
+	--demo-group: #3678bf;
+	--demo-group-soft: #eaf2fc;
 }
 
-.demo-shell__quick-label {
-	margin-right: 2px;
-	color: #93a2b9;
-	font-size: 11px;
-	white-space: nowrap;
+.demo-shell__group--active {
+	display: flex;
 }
-
-.demo-shell__quick-link {
-	padding: 2px 8px;
+
+.demo-shell__group:nth-child(1) {
+	--demo-group: #3678bf;
+	--demo-group-soft: #eaf2fc;
+}
+
+.demo-shell__group:nth-child(2) {
+	--demo-group: #2f8668;
+	--demo-group-soft: #e7f5ef;
+}
+
+.demo-shell__group:nth-child(3) {
+	--demo-group: #7959bd;
+	--demo-group-soft: #f0ebfb;
+}
+
+.demo-shell__group:nth-child(4) {
+	--demo-group: #a86418;
+	--demo-group-soft: #fbf1e4;
+}
+
+.demo-shell__group:nth-child(5) {
+	--demo-group: #b24b5d;
+	--demo-group-soft: #fbecef;
+}
+
+.demo-shell__group:nth-child(6) {
+	--demo-group: #4c5f91;
+	--demo-group-soft: #ebeff7;
+}
+
+.demo-shell__group-count {
+	min-width: 16px;
+	padding: 0 4px;
 	border-radius: 999px;
-	background: #eaf2fc;
-	color: #2f5e94;
-	font-size: 11px;
-	text-decoration: none;
-	transition: background 0.12s ease, color 0.12s ease;
+	background: var(--demo-group-soft);
+	color: var(--demo-group);
+	font-size: 10px;
+	line-height: 16px;
+	text-align: center;
+	font-variant-numeric: tabular-nums;
 }
 
-.demo-shell__quick-link:hover {
-	background: #3678bf;
+.demo-shell__group-tab--active .demo-shell__group-count {
+	background: rgba(255, 255, 255, 0.2);
 	color: #fff;
 }
-
-.demo-shell__blurb {
+
+.demo-shell__tab {
+	padding: 7px 13px;
+	border: 1px solid #d6e0ec;
+	border-radius: 999px;
+	background: #fff;
+	color: var(--demo-group);
+	font-size: 13px;
+	cursor: pointer;
+}
+
+.demo-shell__tab:hover {
+	background: var(--demo-group-soft);
+}
+
+.demo-shell__tab--active {
+	border-color: var(--demo-group);
+	background: var(--demo-group);
+	color: #fff;
+	font-weight: 600;
+}
+
+.demo-shell__quick {
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 5px;
+	padding-top: 6px;
+	border-top: 1px dashed #dce6f1;
+}
+
+.demo-shell__quick-label {
+	margin-right: 2px;
+	color: #93a2b9;
+	font-size: 11px;
+	white-space: nowrap;
+}
+
+.demo-shell__quick-link {
+	padding: 2px 8px;
+	border-radius: 999px;
+	background: #eaf2fc;
+	color: #2f5e94;
+	font-size: 11px;
+	text-decoration: none;
+	transition: background 0.12s ease, color 0.12s ease;
+}
+
+.demo-shell__quick-link:hover {
+	background: #3678bf;
+	color: #fff;
+}
+
+.demo-shell__blurb {
+	display: flex;
+	align-items: baseline;
+	flex-wrap: wrap;
+	gap: 8px;
+	margin: 0 0 12px;
+	color: #71809d;
+	font-size: 13px;
+	line-height: 1.6;
+}
+
+.demo-shell__blurb strong {
+	color: #17233d;
+	font-size: 14px;
+}
+
+.demo-shell__eyebrow {
+	padding: 1px 8px;
+	border-radius: 999px;
+	background: #eaf2fc;
+	color: #5a7296;
+	font-size: 11px;
+	line-height: 1.8;
+	font-variant-numeric: tabular-nums;
+	white-space: nowrap;
+}
+
+.demo-shell__step {
+	display: inline-flex;
+	gap: 4px;
+}
+
+.demo-shell__step-btn {
+	padding: 2px 8px;
+	border: 1px solid #d6e0ec;
+	border-radius: 999px;
+	background: #fff;
+	color: #2f5e94;
+	font-size: 11px;
+	line-height: 1.7;
+	cursor: pointer;
+}
+
+.demo-shell__step-btn:hover {
+	background: #eef4fc;
+}
+
+.demo-shell__notice {
+	padding: 2px 8px;
+	border-radius: 999px;
+	background: #eaf2fc;
+	color: #2f5e94;
+	font-size: 11px;
+}
+
+.demo-shell__doc {
+	color: #3678bf;
+	font-size: 12px;
+	text-decoration: none;
+}
+
+.demo-shell__doc:hover {
+	text-decoration: underline;
+}
+
+.demo-shell__keys {
+	margin-left: auto;
+	padding: 1px 8px;
+	border: 1px solid #e2e8f1;
+	border-radius: 999px;
+	color: #9aa7bc;
+	font-size: 11px;
+	white-space: nowrap;
+}
+
+.demo-shell__loading {
 	display: flex;
-	align-items: baseline;
-	flex-wrap: wrap;
-	gap: 8px;
-	margin: 0 0 12px;
-	color: #71809d;
+	align-items: center;
+	justify-content: center;
+	gap: 9px;
+	margin: 0;
+	padding: 28px;
+	border: 1px dashed #d6e0ec;
+	border-radius: 10px;
+	background: #fff;
+	color: #8191a8;
+	font-size: 13px;
+	text-align: center;
+}
+
+.demo-shell__spinner {
+	width: 14px;
+	height: 14px;
+	border: 2px solid #c8d9ee;
+	border-top-color: #3678bf;
+	border-radius: 50%;
+	animation: demo-shell-spin 0.7s linear infinite;
+}
+
+@keyframes demo-shell-spin {
+	to {
+		transform: rotate(1turn);
+	}
+}
+
+.demo-shell__error {
+	margin: 0;
+	padding: 20px;
+	border: 1px solid #efcccc;
+	border-radius: 10px;
+	background: #fff8f8;
+	color: #874242;
 	font-size: 13px;
-	line-height: 1.6;
+	line-height: 1.7;
 }
 
-.demo-shell__blurb strong {
-	color: #17233d;
+.demo-shell__error strong {
+	color: #9c2f2f;
 	font-size: 14px;
 }
 
-.demo-shell__notice {
-	padding: 2px 8px;
-	border-radius: 999px;
-	background: #eaf2fc;
-	color: #2f5e94;
-	font-size: 11px;
+.demo-shell__error p {
+	margin: 6px 0 12px;
+	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
+	font-size: 12px;
+	overflow-wrap: anywhere;
 }
 
-.demo-shell__doc {
-	color: #3678bf;
+.demo-shell__retry {
+	padding: 6px 13px;
+	border: 1px solid #b84949;
+	border-radius: 999px;
+	background: #b84949;
+	color: #fff;
 	font-size: 12px;
-	text-decoration: none;
+	cursor: pointer;
 }
 
-.demo-shell__doc:hover {
-	text-decoration: underline;
+.demo-shell__retry:hover {
+	background: #9e3939;
 }
 
-.demo-shell__keys {
-	margin-left: auto;
-	padding: 1px 8px;
-	border: 1px solid #e2e8f1;
-	border-radius: 999px;
-	color: #9aa7bc;
+.demo-shell__error-hint {
+	margin-left: 10px;
+	color: #a46d6d;
 	font-size: 11px;
-	white-space: nowrap;
-}
-
-.demo-shell__loading {
-	margin: 0;
-	padding: 28px;
-	border: 1px dashed #d6e0ec;
-	border-radius: 10px;
-	background: #fff;
-	color: #8191a8;
-	font-size: 13px;
-	text-align: center;
 }
 
 @media (max-width: 760px) {
-	.demo-shell__sticky {
-		position: static;
-		margin: -4px 0 9px;
-	}
-
-	.demo-shell__tabs {
+	.demo-shell__sticky {
+		position: static;
+		margin: -4px 0 9px;
+	}
+
+	.demo-shell__groups {
 		flex-wrap: nowrap;
 		width: 100%;
 		overflow-x: auto;
 		padding-bottom: 3px;
 	}
 
-	.demo-shell__group {
+	.demo-shell__group-tab {
 		flex: none;
 	}
 
-	.demo-shell__keys {
-		margin-left: 0;
-	}
-}
-</style>
+	.demo-shell__tabs {
+		flex-wrap: nowrap;
+		width: 100%;
+		overflow-x: auto;
+		padding-bottom: 3px;
+	}
+
+	.demo-shell__group {
+		flex: none;
+	}
+
+	.demo-shell__keys {
+		margin-left: 0;
+	}
+}
+</style>