= new Set(["D40", "D45", "D60"]);
+
+export function isChartTypeId(value: string): value is ChartTypeId {
+ return (CHART_TYPE_ORDER as readonly string[]).includes(value);
+}
+
export const VIMSHOTTARI_ORDER = [
"Ketu",
"Venus",
@@ -147,6 +188,10 @@ export const CHART_VIEW_COPY = {
waitingChart: "这一张盘还没拿到。",
waitingLayer: "这一栏还没拿到。",
waitingVarga: "这一分盘还没拿到。",
+ chartTypeSheetTitle: "星盘类型",
+ chartTypeMenu: "全部盘型",
+ chartTypeSheetClose: "关闭星盘类型",
+ precisionHint: "这张盘每格不到一度，出生时间差两三分钟就可能换一格。先做生时校正再看，会更稳。",
unauthenticated: "请先登录后再看星盘。",
incomplete: "还没有可用来排盘的出生资料。把日期、时间和地点填进星盘资料后，打开就能看见盘。",
profileEntryTitle: "还没有星盘资料",
diff --git a/frontend/tests/chart-type-picker.test.tsx b/frontend/tests/chart-type-picker.test.tsx
new file mode 100644
index 00000000..d8f4eaba
--- /dev/null
+++ b/frontend/tests/chart-type-picker.test.tsx
@@ -0,0 +1,129 @@
+import assert from "node:assert/strict";
+import { readFileSync } from "node:fs";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import test from "node:test";
+
+import { ChartTypePicker } from "../src/components/chart-page/chart-type-picker.tsx";
+import { ChartVedicTab } from "../src/components/chart-page/chart-vedic-tab.tsx";
+import { assembleChartView } from "../src/lib/chart-view-load.ts";
+import type { ChartViewOk } from "../src/lib/chart-view-contract.ts";
+import { CHART_TYPE_ORDER, CHART_VIEW_COPY, VARGA_CHIP_ORDER, type ChartTypeId } from "../src/lib/chart-view-labels.ts";
+import { cssDeclarations } from "./css-contract-test-support.ts";
+import { createClientLifecycleHarness } from "./react-client-lifecycle-test-support.ts";
+
+Object.assign(globalThis, { React });
+
+const golden = JSON.parse(readFileSync(new URL("./fixtures/chart-view-golden.json", import.meta.url), "utf8"));
+const globalStyles = readFileSync(new URL("../src/app/globals.css", import.meta.url), "utf8");
+
+const profile = {
+ name: "示例",
+ date: "1990-06-15",
+ time: "12:00",
+ placeLabel: "北京",
+ latitude: 39.9042,
+ longitude: 116.4074,
+ timezoneOffset: 8,
+ timezoneId: "Asia/Shanghai",
+ ayanamsa: "raman",
+ birthTimeStatus: "confirmed",
+};
+
+async function vargaView(birthTimeStatus = "confirmed"): Promise<{ view: ChartViewOk; divisions: unknown }> {
+ let divisions: unknown = null;
+ const result = await assembleChartView({
+ userId: "user-1",
+ profile: { ...profile, birthTimeStatus },
+ asOf: "2026-09-15",
+ layers: ["varga"],
+ postEngine: async (path, body) => {
+ if (path === "/api/chart") return { status: "ok", payload: golden.chart };
+ if (path === "/api/varga_full") { divisions = body.divisions; return { status: "ok", payload: golden.varga_full }; }
+ return { status: "http_error", path, elapsedMs: 1, httpStatus: 500 };
+ },
+ });
+ assert.equal(result.body.status, "ok");
+ return { view: result.body as ChartViewOk, divisions };
+}
+
+test("the strip lists all 23 chart types in the decided order with a pinned 全部盘型 button", () => {
+ assert.deepEqual([...CHART_TYPE_ORDER], [
+ "D1", "D9", "MOON", "BHAVA", "TRANSIT",
+ "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D10", "D11", "D12",
+ "D16", "D20", "D24", "D27", "D30", "D40", "D45", "D60",
+ ]);
+ const markup = renderToStaticMarkup(React.createElement(ChartTypePicker, { current: "D1", onSelect: () => {} }));
+ const strip = markup.match(/([\s\S]*?)<\/div>/)?.[1] ?? "";
+ const labels = [...strip.matchAll(/]*>([^<]*)<\/button>/g)].map((match) => match[1]);
+ assert.deepEqual(labels, ["本命", "D9", "月亮", "Bhava", "行运", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D10", "D11", "D12", "D16", "D20", "D24", "D27", "D30", "D40", "D45", "D60"]);
+ assert.match(strip, /aria-selected="true"[^>]*>本命