@cs2dak/react 1.0.0 → 1.1.0

package/LICENSE

@@ -1,3 +1,10 @@
+Licensing note / 适用范围
+-------------------------
+The MIT License below applies to this repository EXCEPT apps/dak-studio/,
+which is licensed under the GNU AGPL-3.0-only (see apps/dak-studio/LICENSE).
+Ecosystem packages (@cs2dak/*, python exporter) are MIT; the DAK Studio
+product is AGPL. Third-party attributions: THIRD-PARTY-NOTICES.md.
+
 MIT License
 
 Copyright (c) 2026 Starfie1d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cs2dak/react",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "license": "MIT",
   "exports": {
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "lucide-react": "^0.468.0",
-    "@cs2dak/contract": "1.0.0",
-    "@cs2dak/presentation": "1.0.0",
-    "@cs2dak/maps": "0.2.1"
+    "@cs2dak/contract": "1.1.0",
+    "@cs2dak/presentation": "2.0.0",
+    "@cs2dak/maps": "1.0.0"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/components/DataTable.tsx

@@ -0,0 +1,272 @@
+import { useCallback, useMemo, useState, type ReactNode } from "react";
+import { Pagination } from "./Pagination";
+
+/**
+ * 产品中立的通用数据表：列配置 → 客户端排序（升/降切换）→ 可选分页 → 渲染。
+ *
+ * 设计目标：取代仓库里 4 套各自为政的排序实现（stu-col-sortable / stu-sort-header /
+ * dak-col-sortable / 一堆静态表）。**只下沉逻辑与结构，样式靠 classes 预设注入**——
+ * 这样 DAK Studio 的表保留 `stu-*` 长相（STUDIO_TABLE_CLASSES），React 原生用法走
+ * `dak-*`（DAK_TABLE_CLASSES），两套设计语言不互相污染。
+ *
+ * 纯展示：不查数据库、不跑分析，只吃 rows + 列配置。复杂单元格（按钮/证据链/着色）
+ * 通过列的 `render(row)` 自定义；行级交互通过 `onRowClick` / `rowClassName` /
+ * `rowProps`（hover 联动等特例）。
+ */
+
+export type SortDirection = "asc" | "desc";
+
+/** 热力图色调：供列 `heat` 回调返回，由 classes.heatCell 映射为 CSS class。 */
+export type HeatTone = "high" | "mid" | "low" | "neutral";
+
+export interface DataTableColumn<T> {
+  key: string;
+  /** 表头内容（可含 ⓘ 等节点）。 */
+  label: ReactNode;
+  /** 数字列右对齐 + 等宽。默认 false（左对齐文本列）。 */
+  numeric?: boolean;
+  /** 该列可点排序。需配 `sortValue`。 */
+  sortable?: boolean;
+  /** 排序取值；返回 null 始终排在末尾。 */
+  sortValue?: (row: T) => number | string | null;
+  /** 自定义单元格渲染；优先于 `format`。 */
+  render?: (row: T) => ReactNode;
+  /** 简单文本单元格。 */
+  format?: (row: T) => ReactNode;
+  /** 表头 title 提示。 */
+  title?: string;
+  /** 可选热力着色：返回色阶名，套用 classes.heatCell。 */
+  heat?: (row: T) => HeatTone | undefined;
+  /** 单元格附加 class。 */
+  cellClassName?: (row: T) => string | undefined;
+}
+
+export interface DataTableClasses {
+  table: string;
+  numeric: string;
+  sortable: string;
+  sortableActive: string;
+  rowClickable?: string;
+  /** 热力单元格 class 生成器（可选）。 */
+  heatCell?: (tone: HeatTone) => string;
+  /** 内部分页控件 class。 */
+  pagination?: string;
+}
+
+/** DAK Studio 表（Tactical Slate / stu-*）。CSS 在 studio.css。 */
+export const STUDIO_TABLE_CLASSES: DataTableClasses = {
+  table: "stu-mini-table",
+  numeric: "stu-num",
+  sortable: "stu-col-sortable",
+  sortableActive: "stu-col-sortable",
+  rowClickable: "stu-row-clickable",
+  heatCell: (tone) => `stu-heat-cell stu-heat-${tone}`,
+  pagination: "stu-pagination",
+};
+
+/** React 包原生表（dak-*）。CSS 在 theme.css。 */
+export const DAK_TABLE_CLASSES: DataTableClasses = {
+  table: "dak-table",
+  numeric: "dak-mono",
+  sortable: "dak-col-sortable",
+  sortableActive: "dak-col-sorted",
+  rowClickable: "dak-row-clickable",
+  pagination: "dak-pagination",
+};
+
+export interface DataTableProps<T> {
+  columns: DataTableColumn<T>[];
+  rows: T[];
+  rowKey: (row: T) => string;
+  classes?: DataTableClasses;
+  /** 初始排序列 key；缺省不排序（保留 rows 原序）。 */
+  initialSortKey?: string;
+  initialSortDirection?: SortDirection;
+  /** 设置后启用分页。 */
+  pageSize?: number;
+  /** 受控分页：外部指定当前页（用于 hover 联动等场景）。缺省走内部 state。 */
+  page?: number;
+  onPageChange?: (page: number) => void;
+  paginationMaxButtons?: number;
+  /** 分页信息文字生成器（接收行总数）。 */
+  paginationInfo?: (total: number) => string;
+  onRowClick?: (row: T) => void;
+  rowClassName?: (row: T) => string | undefined;
+  /** 行级额外属性（hover 联动等特例）。 */
+  rowProps?: (row: T) => React.HTMLAttributes<HTMLTableRowElement>;
+  /** 首列前置一个序号列（如排行榜的 #）。 */
+  showRank?: boolean;
+}
+
+/**
+ * 通用排序切换 hook：同 key 切换升/降，换 key 默认降序。
+ * DataTable、SeasonLeaderboard、RoundRobinStage 共用同一模式。
+ */
+export function useSortable<K extends string>(initialKey: K, initialDesc = true) {
+  const [sortKey, setSortKey] = useState<K>(initialKey);
+  const [sortDesc, setSortDesc] = useState(initialDesc);
+
+  const handleSort = useCallback((key: K) => {
+    setSortKey((prev) => {
+      if (key === prev) setSortDesc((d) => !d);
+      else setSortDesc(true);
+      return key;
+    });
+  }, []);
+
+  /** 外部重置排序列（如切换 view 时）。 */
+  const resetSort = useCallback((key: K) => {
+    setSortKey(key);
+    setSortDesc(true);
+  }, []);
+
+  return { sortKey, sortDesc, handleSort, resetSort };
+}
+
+export function DataTable<T>({
+  columns,
+  rows,
+  rowKey,
+  classes = DAK_TABLE_CLASSES,
+  initialSortKey,
+  initialSortDirection = "desc",
+  pageSize,
+  page,
+  onPageChange,
+  paginationMaxButtons = 8,
+  paginationInfo,
+  onRowClick,
+  rowClassName,
+  rowProps,
+  showRank = false,
+}: DataTableProps<T>) {
+  const [sortKey, setSortKey] = useState<string | null>(initialSortKey ?? null);
+  const [sortDesc, setSortDesc] = useState(initialSortDirection === "desc");
+  const [internalPage, setInternalPage] = useState(0);
+  const controlled = page !== undefined;
+  const currentPage = controlled ? page : internalPage;
+  const setPage = controlled ? (onPageChange ?? (() => {})) : setInternalPage;
+
+  function handleSort(key: string) {
+    if (sortKey === key) setSortDesc((d) => !d);
+    else {
+      setSortKey(key);
+      setSortDesc(true);
+    }
+    setPage(0);
+  }
+
+  const sortedRows = useMemo(() => {
+    if (sortKey == null) return rows;
+    const col = columns.find((c) => c.key === sortKey);
+    if (!col?.sortValue) return rows;
+    const dir = sortDesc ? 1 : -1;
+    return [...rows].sort((a, b) => {
+      const va = col.sortValue!(a);
+      const vb = col.sortValue!(b);
+      if (va == null && vb == null) return 0;
+      if (va == null) return 1; // null 始终末尾
+      if (vb == null) return -1;
+      if (typeof va === "string" || typeof vb === "string") {
+        return String(va).localeCompare(String(vb)) * dir;
+      }
+      return (vb - va) * dir;
+    });
+  }, [rows, columns, sortKey, sortDesc]);
+
+  const totalPages = pageSize ? Math.max(1, Math.ceil(sortedRows.length / pageSize)) : 1;
+  const safePage = Math.min(currentPage, totalPages - 1);
+  const pageRows = pageSize
+    ? sortedRows.slice(safePage * pageSize, (safePage + 1) * pageSize)
+    : sortedRows;
+
+  const arrow = (key: string) => (sortKey === key ? (sortDesc ? " ↓" : " ↑") : "");
+
+  return (
+    <>
+      {pageSize != null && (
+        <Pagination
+          page={safePage}
+          totalPages={totalPages}
+          onChange={setPage}
+          maxButtons={paginationMaxButtons}
+          info={paginationInfo?.(sortedRows.length)}
+          className={classes.pagination}
+        />
+      )}
+      <table className={classes.table}>
+        <thead>
+          <tr>
+            {showRank && <th className={classes.numeric}>#</th>}
+            {columns.map((col) => {
+              const active = sortKey === col.key;
+              const thClass = [
+                col.numeric ? classes.numeric : "",
+                col.sortable ? classes.sortable : "",
+                col.sortable && active ? classes.sortableActive : "",
+              ]
+                .filter(Boolean)
+                .join(" ");
+              return (
+                <th
+                  key={col.key}
+                  className={thClass || undefined}
+                  title={col.title}
+                  aria-sort={active ? (sortDesc ? "descending" : "ascending") : undefined}
+                  onClick={col.sortable ? () => handleSort(col.key) : undefined}
+                >
+                  {col.label}
+                  {col.sortable ? arrow(col.key) : ""}
+                </th>
+              );
+            })}
+          </tr>
+        </thead>
+        <tbody>
+          {pageRows.map((row, i) => {
+            const extra = rowProps?.(row) ?? {};
+            return (
+              <tr
+                key={rowKey(row)}
+                {...extra}
+                className={[onRowClick ? classes.rowClickable : "", rowClassName?.(row) ?? "", extra.className ?? ""]
+                  .filter(Boolean)
+                  .join(" ") || undefined}
+                onClick={onRowClick ? () => onRowClick(row) : extra.onClick}
+                tabIndex={onRowClick ? 0 : extra.tabIndex}
+                role={onRowClick ? "button" : extra.role}
+                onKeyDown={
+                  onRowClick
+                    ? (e) => {
+                        if (e.key === "Enter" || e.key === " ") {
+                          e.preventDefault();
+                          onRowClick(row);
+                        }
+                      }
+                    : extra.onKeyDown
+                }
+              >
+                {showRank && <td className={classes.numeric}>{safePage * (pageSize ?? 0) + i + 1}</td>}
+                {columns.map((col) => {
+                  const tone = col.heat?.(row);
+                  const cellClass = [
+                    col.numeric ? classes.numeric : "",
+                    tone && classes.heatCell ? classes.heatCell(tone) : "",
+                    col.cellClassName?.(row) ?? "",
+                  ]
+                    .filter(Boolean)
+                    .join(" ");
+                  return (
+                    <td key={col.key} className={cellClass || undefined}>
+                      {col.render ? col.render(row) : col.format ? col.format(row) : null}
+                    </td>
+                  );
+                })}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </>
+  );
+}

package/src/components/EconomyPanel.tsx

@@ -1,23 +1,24 @@
-import type { EconomyPoint } from "@cs2dak/contract";
+import type { EconomyPoint, EconomyType } from "@cs2dak/contract";
 import { ECONOMY_LABEL_SHORT } from "@cs2dak/presentation";
 
 export interface EconomyPanelProps {
   points: EconomyPoint[];
   teamAName: string;
   teamBName: string;
+  /** 点击回合卡跳转到该回合的 2D 回放。 */
+  onJumpRound?: (roundNumber: number) => void;
 }
 
 const width = 760;
 const height = 260;
 const pad = { left: 48, right: 18, top: 24, bottom: 34 };
-const economyColors = {
+const economyColors: Record<EconomyType, string> = {
   pistol: "rgba(255, 198, 77, 0.18)",
   eco: "rgba(104, 115, 129, 0.18)",
   semi: "rgba(73, 182, 255, 0.16)",
   force: "rgba(255, 122, 33, 0.18)",
-  full: "rgba(83, 215, 126, 0.16)",
-  conversion: "rgba(83, 215, 126, 0.16)"
-} as const;
+  full: "rgba(83, 215, 126, 0.16)"
+};
 
 const upsetLabels: Record<string, string> = {
   eco: "ECO翻",
@@ -35,11 +36,11 @@ function getUpsetType(point: EconomyPoint): "eco" | "semi" | "force" | null {
   const winnerEco = point.winnerTeamKey === "teamA" ? point.teamAEconomy : point.teamBEconomy;
   const loserEco  = point.winnerTeamKey === "teamA" ? point.teamBEconomy : point.teamAEconomy;
   if (winnerEco !== "eco" && winnerEco !== "semi" && winnerEco !== "force") return null;
-  if (loserEco !== "full" && loserEco !== "conversion") return null;
+  if (loserEco !== "full") return null;
   return winnerEco;
 }
 
-export function EconomyPanel({ points, teamAName, teamBName }: EconomyPanelProps) {
+export function EconomyPanel({ points, teamAName, teamBName, onJumpRound }: EconomyPanelProps) {
   const maxValue = Math.max(1, ...points.flatMap((point) => [point.teamA, point.teamB]));
   const xFor = (index: number) => pad.left + (index / Math.max(points.length - 1, 1)) * (width - pad.left - pad.right);
   const yFor = (value: number) => pad.top + (1 - value / maxValue) * (height - pad.top - pad.bottom);
@@ -113,8 +114,12 @@ export function EconomyPanel({ points, teamAName, teamBName }: EconomyPanelProps
           const upsetType = getUpsetType(point);
           return (
             <div
-              className={`dak-economy-round${upsetType ? " dak-economy-round-upset" : ""}`}
+              className={`dak-economy-round${upsetType ? " dak-economy-round-upset" : ""}${onJumpRound ? " dak-economy-round-clickable" : ""}`}
               key={point.roundNumber}
+              role={onJumpRound ? "button" : undefined}
+              tabIndex={onJumpRound ? 0 : undefined}
+              onClick={onJumpRound ? () => onJumpRound(point.roundNumber) : undefined}
+              onKeyDown={onJumpRound ? (event) => { if (event.key === "Enter" || event.key === " ") { event.preventDefault(); onJumpRound(point.roundNumber); } } : undefined}
             >
               <b>R{point.roundNumber}</b>
               {upsetType && (

package/src/components/EventBracket.tsx

@@ -0,0 +1,204 @@
+import type { BracketCell, ElimModel, SwissModel } from "@cs2dak/contract";
+
+// ── 内部接口 ──────────────────────────────────────────────────────────────
+
+interface CellHandlers {
+  onOpenMatch?: (entryId: string) => void;
+  onSelectCell?: (key: string) => void;
+  selectedKey?: string | null;
+}
+
+// ── MatchBox（DOM 模式） ──────────────────────────────────────────────────
+
+function MatchBox({ cell, onOpenMatch, onSelectCell, selectedKey }: { cell: BracketCell } & CellHandlers) {
+  if (cell.empty) {
+    return (
+      <button type="button" className={`dak-eb-box dak-eb-box-empty${selectedKey === cell.key ? " dak-eb-box-sel" : ""}`} onClick={() => onSelectCell?.(cell.key)}>
+        + 附加 demo
+      </button>
+    );
+  }
+  const openId = cell.entryIds?.[0];
+  const onClick = () => (openId && onOpenMatch ? onOpenMatch(openId) : onSelectCell?.(cell.key));
+  const interactive = Boolean((openId && onOpenMatch) || onSelectCell);
+  return (
+    <div
+      className={`dak-eb-box${selectedKey === cell.key ? " dak-eb-box-sel" : ""}${interactive ? " dak-eb-box-click" : ""}`}
+      role={interactive ? "button" : undefined}
+      onClick={interactive ? onClick : undefined}
+    >
+      <div className={`dak-eb-team${cell.winner === "A" ? " dak-eb-win" : cell.winner === "B" ? " dak-eb-lose" : ""}`}>
+        <span>{cell.teamA ?? "—"}</span>
+        <b>{cell.scoreA ?? (cell.teamA ? "" : "")}</b>
+      </div>
+      <div className={`dak-eb-team${cell.winner === "B" ? " dak-eb-win" : cell.winner === "A" ? " dak-eb-lose" : ""}`}>
+        <span>{cell.teamB ?? "—"}</span>
+        <b>{cell.scoreB ?? ""}</b>
+      </div>
+      {cell.date && <div className="dak-eb-date">{new Date(cell.date).toLocaleDateString("zh-CN")}</div>}
+    </div>
+  );
+}
+
+// ── SwissBracket ──────────────────────────────────────────────────────────
+
+/** 瑞士轮 Buchholz 图：按轮次成列，列内按战绩组（高战绩在上），右侧晋级（绿）/ 淘汰（红）终列。 */
+export function SwissBracket({
+  model,
+  onAddToGroup,
+  ...handlers
+}: { model: SwissModel; onAddToGroup?: (slotId: string) => void } & CellHandlers) {
+  return (
+    <div className="dak-eb dak-eb-swiss">
+      {model.columns.map((col, colIndex) => (
+        <div key={`col-${colIndex}-${col.round}`} className="dak-eb-col">
+          <div className="dak-eb-col-head">第 {col.round} 轮</div>
+          <div className="dak-eb-col-body">
+          {col.groups.map((group) => (
+            <div key={`${col.round}-${group.record}`} className="dak-eb-group">
+              <div className="dak-eb-group-head">{group.record}</div>
+              {group.matches.map((cell) => <MatchBox key={cell.key} cell={cell} {...handlers} />)}
+              {group.addSlotId && (
+                <button type="button" className="dak-eb-add" onClick={() => onAddToGroup?.(group.addSlotId!)}>+ 添加比赛</button>
+              )}
+            </div>
+          ))}
+          </div>
+        </div>
+      ))}
+      {(model.advanced.length > 0 || model.eliminated.length > 0) && (
+        <div className="dak-eb-col dak-eb-outcomes">
+          <div className="dak-eb-col-head">结果</div>
+          {model.advanced.length > 0 && (
+            <div className="dak-eb-outcome dak-eb-advanced">
+              <div className="dak-eb-group-head">晋级 ({model.advanced.length})</div>
+              {model.advanced.map((row, index) => <div key={`adv-${index}-${row.team}`} className="dak-eb-outcome-row"><span>{row.team}</span><b>{row.record}</b></div>)}
+            </div>
+          )}
+          {model.eliminated.length > 0 && (
+            <div className="dak-eb-outcome dak-eb-eliminated">
+              <div className="dak-eb-group-head">淘汰 ({model.eliminated.length})</div>
+              {model.eliminated.map((row, index) => <div key={`eli-${index}-${row.team}`} className="dak-eb-outcome-row"><span>{row.team}</span><b>{row.record}</b></div>)}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ── ElimBracket ───────────────────────────────────────────────────────────
+
+const laneLabels = { single: "淘汰赛", winner: "胜者组", loser: "败者组", grand: "总决赛" } as const;
+
+/**
+ * 淘汰赛 bracket。
+ * - 无 nodes（单败 / 制作器）：DOM 列布局，MatchBox 可点击。
+ * - 有 nodes（双败 / GSL）：SVG lane-aware 布局 + 晋级连线，节点可点击。
+ */
+export function ElimBracket({ model, ...handlers }: { model: ElimModel } & CellHandlers) {
+  const { nodes } = model;
+
+  // ── SVG lane-aware 模式（双败 / GSL，有 bracketNodes） ──────────────────
+  if (nodes && nodes.length > 0) {
+    const rounds = [...new Set(nodes.map((node) => node.round))].sort((a, b) => a - b);
+    const roundIndex = new Map(rounds.map((round, index) => [round, index]));
+    const lanes = (["winner", "loser", "grand", "single"] as const).filter((lane) => nodes.some((node) => node.lane === lane));
+    // 预分组：O(N) 建 Map，替代嵌套循环中 O(L*R*N) 的 nodes.filter()
+    const nodesByLaneRound = new Map<string, typeof nodes>();
+    const nodeById = new Map(nodes.map((node) => [node.id, node] as const));
+    for (const node of nodes) {
+      const key = `${node.lane}|${node.round}`;
+      const group = nodesByLaneRound.get(key);
+      if (group) group.push(node);
+      else nodesByLaneRound.set(key, [node]);
+    }
+    const maxPerRound = Math.max(1, ...rounds.map((round) => {
+      let count = 0;
+      for (const lane of lanes) count += (nodesByLaneRound.get(`${lane}|${round}`)?.length ?? 0);
+      return count;
+    }));
+    const laneMode = lanes.length > 1;
+    const laneHeight = Math.max(150, maxPerRound * 52);
+    const width = Math.max(520, rounds.length * 260 + (laneMode ? 86 : 0));
+    const height = laneMode ? lanes.length * laneHeight : Math.max(180, maxPerRound * 82);
+    const positions = new Map<string, { x: number; y: number }>();
+    for (const [laneIndex, lane] of lanes.entries()) {
+      for (const round of rounds) {
+        const rows = nodesByLaneRound.get(`${lane}|${round}`) ?? [];
+        rows.forEach((node, index) => positions.set(node.id, {
+          x: (roundIndex.get(round) ?? 0) * 260 + (laneMode ? 86 : 12),
+          y: laneMode ? laneIndex * laneHeight + ((index + 0.5) * laneHeight) / rows.length : ((index + 0.5) * height) / rows.length,
+        }));
+      }
+    }
+    // 按 node id 查找对应的 BracketCell（已在 columns 中）
+    const cellById = new Map<string, BracketCell>();
+    for (const col of model.columns) {
+      for (const cell of col.matches) cellById.set(cell.key, cell);
+    }
+    const label = model.columns.length > 0 ? model.columns.map((c) => c.label).join(" · ") : "淘汰赛";
+
+    return <div className="dak-bracket-diagram" role="img" aria-label={`${label} 胜败晋级关系`}>
+      <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`}>
+        {laneMode && lanes.map((lane, index) => <g key={lane}>
+          {index > 0 && <line className="dak-bracket-lane-separator" x1="0" x2={width} y1={index * laneHeight} y2={index * laneHeight} />}
+          <text className="dak-bracket-lane-label" x="12" y={index * laneHeight + 24}>{laneLabels[lane]}</text>
+        </g>)}
+        {/* 晋级连线 */}
+        {nodes.flatMap((node) => {
+          const from = positions.get(node.id)!;
+          return ([{ target: node.nextWinNodeId, loss: false }, { target: node.nextLossNodeId, loss: true }] as const).flatMap(({ target, loss }) => {
+            const to = target ? positions.get(target) : null;
+            if (!to) return [];
+            const startX = from.x + 210;
+            const endX = to.x;
+            const midX = (startX + endX) / 2;
+            return <path key={`${node.id}-${target}-${loss ? "loss" : "win"}`} className={loss ? "dak-bracket-edge dak-bracket-edge-loss" : "dak-bracket-edge"} d={`M ${startX} ${from.y} C ${midX} ${from.y}, ${midX} ${to.y}, ${endX} ${to.y}`}><title>{`${node.label} ${loss ? "败者" : "胜者"}进入 ${nodeById.get(target!)?.label ?? target}`}</title></path>;
+          });
+        })}
+        {/* 节点 */}
+        {nodes.map((node) => {
+          const position = positions.get(node.id)!;
+          const cell = cellById.get(node.id);
+          const openId = cell?.entryIds?.[0];
+          const interactive = Boolean((openId && handlers.onOpenMatch) || handlers.onSelectCell);
+          const score = cell
+            ? (cell.teamA || cell.teamB) ? `${cell.teamA ?? "—"} ${cell.scoreA ?? ""} : ${cell.teamB ?? "—"} ${cell.scoreB ?? ""}` : "待导入"
+            : "待导入";
+          const isSelected = handlers.selectedKey === node.id;
+          return <g
+            key={node.id}
+            transform={`translate(${position.x} ${position.y - 25})`}
+            role={interactive ? "button" : undefined}
+            tabIndex={interactive ? 0 : undefined}
+            style={{ cursor: interactive ? "pointer" : undefined }}
+            onClick={interactive ? () => {
+              if (openId && handlers.onOpenMatch) handlers.onOpenMatch(openId);
+              else handlers.onSelectCell?.(node.id);
+            } : undefined}
+          >
+            <rect className="dak-bracket-box" width="210" height="50" rx="4" />
+            <rect className={`dak-bracket-box${isSelected ? " dak-eb-box-sel" : ""}`} width="210" height="50" rx="4" fill="transparent" />
+            <text className="dak-bracket-box-title" x="10" y="19">{node.label}</text>
+            <text className="dak-bracket-box-match" x="10" y="38">{score}</text>
+          </g>;
+        })}
+      </svg>
+    </div>;
+  }
+
+  // ── DOM 列模式（单败 / 制作器，无 nodes） ───────────────────────────────
+  return (
+    <div className="dak-eb dak-eb-elim">
+      {model.columns.map((col) => (
+        <div key={col.round} className="dak-eb-col dak-eb-elim-col">
+          <div className="dak-eb-col-head">{col.label}</div>
+          <div className="dak-eb-col-body dak-eb-elim-matches">
+            {col.matches.map((cell) => <MatchBox key={cell.key} cell={cell} {...handlers} />)}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/HeatmapCanvas.tsx

@@ -9,7 +9,7 @@
  * This replaces the previous DOM-span approach which could not render true density.
  */
 import type { DemoViewModel, GrenadeType, HeatmapPoint, Side, TeamKey } from "@cs2dak/contract";
-import { getMapCalibration, worldToRadar } from "@cs2dak/maps";
+import { getMapCalibration, worldToRadar, hasLowerLevel, levelAt, type MapLevel } from "@cs2dak/maps";
 import { useEffect, useMemo, useRef, useState } from "react";
 
 // ── HeatmapRenderer (adapted from simpleheat / CS Demo Manager, BSD-2-Clause) ─
@@ -172,6 +172,9 @@ export function HeatmapCanvas({ map, points, players, mode: controlledMode, onMo
 
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const calibration = getMapCalibration(map.name);
+  // de_nuke / de_vertigo 双层：按 z 高度把点位拆到上下层分别渲染
+  const dualLevel = !!(calibration && hasLowerLevel(calibration) && map.lowerRadarImageUrl);
+  const [level, setLevel] = useState<MapLevel>("upper");
 
   const counts = useMemo(() => ({
     death:   points.filter((p) => p.kind === "death").length,
@@ -189,6 +192,7 @@ export function HeatmapCanvas({ map, points, players, mode: controlledMode, onMo
         if (sideFilter !== "all" && p.side !== sideFilter) return false;
         if (mode === "grenade" && !matchesGrenadeFilter(p.grenadeType, grenadeFilter)) return false;
         if (selectedSteamIds.size > 0 && p.steamId64 && !selectedSteamIds.has(p.steamId64)) return false;
+        if (dualLevel && levelAt(p.z, cal) !== level) return false;
         return true;
       })
       .flatMap((p) => {
@@ -199,7 +203,7 @@ export function HeatmapCanvas({ map, points, players, mode: controlledMode, onMo
           (radar.y / cal.radarSize) * CANVAS_SIZE,
         ] as [number, number]];
       });
-  }, [points, mode, sideFilter, grenadeFilter, selectedSteamIds, calibration]);
+  }, [points, mode, sideFilter, grenadeFilter, selectedSteamIds, calibration, dualLevel, level]);
 
   // Per-point stamp alpha following CS Demo Manager's approach: target ~10 overlapping
   // events to fully saturate a spot. Floor at 0.1 so isolated events are faintly visible.
@@ -243,6 +247,22 @@ export function HeatmapCanvas({ map, points, players, mode: controlledMode, onMo
               {MODE_LABELS[kind]} <span>{counts[kind]}</span>
             </button>
           ))}
+          {dualLevel && (
+            <div className="dak-heatmap-side-filter" role="radiogroup" aria-label="地图层级">
+              {(["upper", "lower"] as const).map((nextLevel) => (
+                <button
+                  key={nextLevel}
+                  type="button"
+                  role="radio"
+                  aria-checked={level === nextLevel}
+                  className={level === nextLevel ? "dak-sf-chip dak-sf-chip-active" : "dak-sf-chip"}
+                  onClick={() => setLevel(nextLevel)}
+                >
+                  {nextLevel === "upper" ? "上层" : "下层"}
+                </button>
+              ))}
+            </div>
+          )}
           <div className="dak-heatmap-side-filter" role="radiogroup" aria-label="阵营">
             {(["all", "ct", "t"] as const).map((s) => (
               <button
@@ -306,7 +326,10 @@ export function HeatmapCanvas({ map, points, players, mode: controlledMode, onMo
       {/* ── Radar image + canvas ── */}
       <div
         className="dak-heatmap"
-        style={map.radarImageUrl ? { backgroundImage: `url(${map.radarImageUrl})` } : undefined}
+        style={(() => {
+          const url = dualLevel && level === "lower" ? map.lowerRadarImageUrl : map.radarImageUrl;
+          return url ? { backgroundImage: `url(${url})` } : undefined;
+        })()}
       >
         {!map.radarImageUrl && <SchematicRadar mapName={map.name} />}
         <canvas ref={canvasRef} className="dak-heatmap-canvas" aria-hidden="true" />

package/src/components/KillFeed.tsx

@@ -34,6 +34,7 @@ export function KillFeed({ kills, currentTick, tickrate }: KillFeedProps) {
             {k.throughSmoke && <b className="dak-kf-badge dak-kf-smk">SMK</b>}
             {k.noScope && <b className="dak-kf-badge dak-kf-ns">NS</b>}
             {k.flashAssist && <b className="dak-kf-badge dak-kf-fa">FA</b>}
+            {k.wallbang && <b className="dak-kf-badge dak-kf-wb">WB</b>}
           </span>
         </div>
       ))}