@graph-render/tournament-tree 1.0.1

package/src/constants/index.ts

@@ -0,0 +1,2 @@
+export * from './node';
+export * from './tournament';

package/src/constants/node.ts

@@ -0,0 +1,96 @@
+import type { SquashPlayer } from '../types/squash';
+
+export const NODE_DIMENSIONS = {
+  WIDTH: 280,
+  HEIGHT: 112,
+} as const;
+
+export const THEME_COLORS_LIGHT = {
+  BASE_BG: '#ffffff',
+  SURFACE_BG: '#f7f6f3',
+  HEADER_BG: '#ffffff',
+  HEADER_TITLE: '#2d2d2d',
+  HEADER_MUTED: '#6b6b6b',
+  HEADER_BORDER: '#ece9e2',
+  ICON_BG: '#7c9070',
+  ICON_FG: '#ffffff',
+  BADGE_BG: '#f1eee8',
+  BADGE_DOT: '#7c9070',
+  BADGE_TEXT: '#6b6b6b',
+  HOVER_BG: '#faf8f2',
+  CREST_BG: '#c9b8a8',
+  CREST_TEXT: '#5d4d3f',
+  WINNER_CREST_BG: '#7c9070',
+  WINNER_CREST_TEXT: '#ffffff',
+  ROW_BG: '#ffffff',
+  ROW_BG_WINNER: '#ffffff',
+  ROW_HOVER_BG: '#f7f3ec',
+  FOREGROUND: '#2d2d2d',
+  MUTED_TEXT: '#8e8e93',
+  DARK_TEXT: '#2d2d2d',
+  BORDER: '#f0efec',
+  DARK_BORDER: '#e5e4e1',
+  CARD_BORDER: '#d9d6cf',
+  WINNER_ACCENT: '#2d2d2d',
+  WINNING_SCORE: '#2d2d2d',
+  LIVE_WINNING_SCORE: '#2d2d2d',
+  LIVE_INDICATOR: '#d97706',
+  UPCOMING_TEXT: '#b0aba3',
+  EDGE_COLOR: '#d9d6cf',
+  LABEL_TEXT: '#8e8e93',
+  TOOLBAR_BG: '#f7f3ec',
+  TOOLBAR_BORDER: '#e4ded2',
+  TOOLBAR_ICON: '#4b5563',
+  TOOLBAR_ICON_ACTIVE: '#2d2d2d',
+  SHADOW: '0 20px 48px rgba(45, 45, 45, 0.08)',
+  CARD_SHADOW: '0 10px 24px rgba(45, 45, 45, 0.06)',
+} as const;
+
+export const THEME_COLORS_DARK = {
+  BASE_BG: '#1f242b',
+  SURFACE_BG: '#191e24',
+  HEADER_BG: '#232931',
+  HEADER_TITLE: '#f7f5ef',
+  HEADER_MUTED: '#c4beb1',
+  HEADER_BORDER: '#313844',
+  ICON_BG: '#7c9070',
+  ICON_FG: '#ffffff',
+  BADGE_BG: '#232b33',
+  BADGE_DOT: '#9ab08d',
+  BADGE_TEXT: '#d8d2c7',
+  HOVER_BG: '#242b33',
+  CREST_BG: '#53473e',
+  CREST_TEXT: '#efe7db',
+  WINNER_CREST_BG: '#8da180',
+  WINNER_CREST_TEXT: '#09120a',
+  ROW_BG: '#232931',
+  ROW_BG_WINNER: '#232931',
+  ROW_HOVER_BG: '#2a313a',
+  FOREGROUND: '#f7f5ef',
+  MUTED_TEXT: '#a7aaaf',
+  DARK_TEXT: '#f7f5ef',
+  BORDER: '#313844',
+  DARK_BORDER: '#47515f',
+  CARD_BORDER: '#5d6470',
+  WINNER_ACCENT: '#f7f5ef',
+  WINNING_SCORE: '#f7f5ef',
+  LIVE_WINNING_SCORE: '#f7f5ef',
+  LIVE_INDICATOR: '#f59e0b',
+  UPCOMING_TEXT: '#70757d',
+  EDGE_COLOR: '#5d6470',
+  LABEL_TEXT: '#a7aaaf',
+  TOOLBAR_BG: '#232b33',
+  TOOLBAR_BORDER: '#38424d',
+  TOOLBAR_ICON: '#d7d1c6',
+  TOOLBAR_ICON_ACTIVE: '#ffffff',
+  SHADOW: '0 22px 54px rgba(0, 0, 0, 0.28)',
+  CARD_SHADOW: '0 12px 32px rgba(0, 0, 0, 0.24)',
+} as const;
+
+// Default to light theme
+export const THEME_COLORS = THEME_COLORS_LIGHT;
+
+export const DEFAULT_PLAYERS: SquashPlayer[] = [
+  { name: 'TBD', seed: 0 },
+  { name: 'TBD', seed: 0 },
+];

package/src/constants/tournament.ts

@@ -0,0 +1,54 @@
+import type { GraphConfig } from '@graph-render/types';
+import { LayoutType, LayoutDirection, EdgeType } from '@graph-render/types';
+import { NODE_DIMENSIONS } from './node';
+
+export const DEFAULT_TOURNAMENT_CONFIG: Readonly<GraphConfig> = {
+  layout: LayoutType.Tree,
+  layoutDirection: LayoutDirection.LTR,
+  width: 1600,
+  height: 1200,
+  padding: 40,
+  defaultEdgeType: EdgeType.Undirected,
+  routingStyle: 'orthogonal',
+  curveEdges: false,
+  curveStrength: 0,
+  forceRightToLeft: true,
+  hoverHighlight: false,
+  hoverEdgeColor: '#7c9070',
+  hoverNodeInColor: '#7c9070',
+  hoverNodeOutColor: '#7c9070',
+  hoverNodeBothColor: '#7c9070',
+  theme: {
+    background: '#f7f6f3',
+    edgeColor: '#d9d6cf',
+    edgeWidth: 2,
+    nodeGap: 72,
+    fontFamily: '"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif',
+  },
+  fixedNodeSize: {
+    width: NODE_DIMENSIONS.WIDTH,
+    height: NODE_DIMENSIONS.HEIGHT,
+  },
+  labelOffset: 46,
+  labelPillBackground: 'transparent',
+  labelPillBorderColor: 'transparent',
+  labelPillTextColor: '#444b55',
+} as const;
+
+export const DARK_TOURNAMENT_CONFIG: Readonly<GraphConfig> = {
+  ...DEFAULT_TOURNAMENT_CONFIG,
+  hoverEdgeColor: '#9ab08d',
+  hoverNodeInColor: '#9ab08d',
+  hoverNodeOutColor: '#9ab08d',
+  hoverNodeBothColor: '#9ab08d',
+  labelPillBackground: 'transparent',
+  labelPillBorderColor: 'transparent',
+  labelPillTextColor: '#d8d2c7',
+  theme: {
+    background: '#191e24',
+    edgeColor: '#5d6470',
+    edgeWidth: 2,
+    nodeGap: 72,
+    fontFamily: '"Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif',
+  },
+} as const;

package/src/contexts/BracketThemeContext.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { THEME_COLORS_LIGHT, THEME_COLORS_DARK } from '../constants';
+
+export type ThemeMode = 'light' | 'dark';
+
+type ThemeColors = typeof THEME_COLORS_LIGHT | typeof THEME_COLORS_DARK;
+
+interface BracketThemeContextValue {
+  mode: ThemeMode;
+  colors: ThemeColors;
+}
+
+const BracketThemeContext = React.createContext<BracketThemeContextValue>({
+  mode: 'light',
+  colors: THEME_COLORS_LIGHT,
+});
+
+export const useBracketTheme = () => React.useContext(BracketThemeContext);
+
+interface BracketThemeProviderProps {
+  mode: ThemeMode;
+  children: React.ReactNode;
+}
+
+export const BracketThemeProvider: React.FC<BracketThemeProviderProps> = ({ mode, children }) => {
+  const value = React.useMemo(
+    () => ({
+      mode,
+      colors: mode === 'dark' ? THEME_COLORS_DARK : THEME_COLORS_LIGHT,
+    }),
+    [mode]
+  );
+
+  return <BracketThemeContext.Provider value={value}>{children}</BracketThemeContext.Provider>;
+};

package/src/index.ts

@@ -0,0 +1,12 @@
+export { SquashNode } from './components/SquashNode';
+export { TournamentBracket } from './components/TournamentBracket';
+export { BracketToolbar } from './components/BracketToolbar';
+export { injectTournamentPathKeys } from './utils/pathKeys';
+export {
+  roundLabelsForGraph,
+  roundLabelsForMatchCount,
+  roundLabelsForRoundCount,
+} from './utils/roundLabels';
+export { BracketThemeProvider, useBracketTheme } from './contexts/BracketThemeContext';
+export type { ThemeMode } from './contexts/BracketThemeContext';
+export type { SquashNodeRenderMode, TournamentBracketProps } from './types';

package/src/types/index.ts

@@ -0,0 +1,2 @@
+export * from './squash';
+export * from './tournament';

package/src/types/squash.ts

@@ -0,0 +1,21 @@
+import type { NodeData, PositionedNode } from '@graph-render/types';
+
+export interface SquashPlayer {
+  name: string;
+  seed?: number;
+  country?: string;
+}
+
+export type MatchStatus = 'completed' | 'live' | 'upcoming';
+
+export interface SquashMatchMeta {
+  stage?: string;
+  players?: SquashPlayer[];
+  sets?: number[][];
+  tiebreaks?: (number[] | null)[]; // Tiebreak scores for each set, null if no tiebreak
+  status?: MatchStatus;
+  currentSet?: number; // For live matches, which set is being played
+}
+
+export type SquashNodeData = NodeData<unknown, SquashMatchMeta, string>;
+export type SquashPositionedNode = PositionedNode<unknown, SquashMatchMeta, string>;

package/src/types/tournament.ts

@@ -0,0 +1,14 @@
+import type { GraphConfig, VertexComponent, NxGraphInput } from '@graph-render/types';
+
+export type SquashNodeRenderMode = 'svg' | 'html' | 'export' | 'server';
+
+export interface TournamentBracketProps {
+  graph: NxGraphInput;
+  config?: Partial<GraphConfig>;
+  vertexComponent?: VertexComponent;
+  nodeRenderMode?: SquashNodeRenderMode;
+  title?: string;
+  badgeText?: string;
+  showToolbar?: boolean;
+  onInvalidNode?: (nodeId: string, error: Error) => void;
+}

package/src/utils/pathKeys.ts

@@ -0,0 +1,50 @@
+import type { NxGraphInput } from '@graph-render/types';
+
+/**
+ * Enrich tournament nodes with a generic `meta.pathKeys` array derived from
+ * `meta.players[*].name` so shared graph path traversal can follow players
+ * across rounds.
+ */
+export function injectTournamentPathKeys(graph: NxGraphInput): NxGraphInput {
+  if (!graph.nodes) {
+    return graph;
+  }
+
+  let changed = false;
+  const nextNodes: typeof graph.nodes = {};
+
+  for (const [id, attrs] of Object.entries(graph.nodes)) {
+    const players = (attrs.meta as Record<string, unknown> | undefined)?.players;
+    if (!Array.isArray(players) || players.length === 0) {
+      nextNodes[id] = attrs;
+      continue;
+    }
+
+    const names = players
+      .map((player) => {
+        if (
+          player &&
+          typeof player === 'object' &&
+          typeof (player as Record<string, unknown>).name === 'string'
+        ) {
+          return ((player as Record<string, unknown>).name as string).trim();
+        }
+
+        return '';
+      })
+      .filter(Boolean);
+
+    if (names.length === 0) {
+      nextNodes[id] = attrs;
+      continue;
+    }
+
+    changed = true;
+    nextNodes[id] = {
+      ...attrs,
+      meta: { ...(attrs.meta as object | undefined), pathKeys: names } as Record<string, unknown>,
+    };
+  }
+
+  return changed ? { ...graph, nodes: nextNodes } : graph;
+}

package/src/utils/roundLabels.ts

@@ -0,0 +1,110 @@
+import type { NxGraphInput } from '@graph-render/types';
+
+function buildOutgoingMap(graph: NxGraphInput): Map<string, string[]> {
+  const outgoing = new Map<string, string[]>();
+
+  Object.entries(graph.adj).forEach(([source, neighbors]) => {
+    outgoing.set(source, Object.keys(neighbors));
+    Object.keys(neighbors).forEach((target) => {
+      if (!outgoing.has(target)) {
+        outgoing.set(target, []);
+      }
+    });
+  });
+
+  Object.keys(graph.nodes ?? {}).forEach((nodeId) => {
+    if (!outgoing.has(nodeId)) {
+      outgoing.set(nodeId, []);
+    }
+  });
+
+  return outgoing;
+}
+
+function inferRoundCount(graph: NxGraphInput): number {
+  const outgoing = buildOutgoingMap(graph);
+  if (!outgoing.size) {
+    return 0;
+  }
+
+  const inDegree = new Map(Array.from(outgoing.keys(), (nodeId) => [nodeId, 0]));
+  outgoing.forEach((targets) => {
+    targets.forEach((target) => {
+      inDegree.set(target, (inDegree.get(target) ?? 0) + 1);
+    });
+  });
+
+  const roots = Array.from(inDegree.entries())
+    .filter(([, degree]) => degree === 0)
+    .map(([nodeId]) => nodeId);
+
+  if (!roots.length) {
+    return 0;
+  }
+
+  const queue = [...roots];
+  const levels = new Map<string, number>(roots.map((nodeId) => [nodeId, 0]));
+
+  for (let index = 0; index < queue.length; index += 1) {
+    const current = queue[index];
+    const level = levels.get(current) ?? 0;
+
+    (outgoing.get(current) ?? []).forEach((target) => {
+      const nextLevel = level + 1;
+      const existing = levels.get(target);
+      if (existing == null || nextLevel > existing) {
+        levels.set(target, nextLevel);
+      }
+
+      inDegree.set(target, (inDegree.get(target) ?? 0) - 1);
+      if ((inDegree.get(target) ?? 0) === 0) {
+        queue.push(target);
+      }
+    });
+  }
+
+  const maxLevel = Math.max(...levels.values());
+  return Number.isFinite(maxLevel) ? maxLevel + 1 : 0;
+}
+
+/**
+ * Derive round labels from the number of rounds.
+ * Example: 4 rounds -> ["1/8", "1/4", "1/2", "Final"].
+ */
+export function roundLabelsForRoundCount(roundCount: number): string[] {
+  if (!Number.isFinite(roundCount) || roundCount <= 0) return [];
+
+  return Array.from({ length: roundCount }, (_, idx) => {
+    const remaining = roundCount - idx;
+    if (remaining === 1) {
+      return 'FINAL';
+    }
+
+    if (remaining === 2) {
+      return 'SEMIFINALS';
+    }
+
+    if (remaining === 3) {
+      return 'QUARTERFINALS';
+    }
+
+    return `ROUND OF ${2 ** (remaining - 1)}`;
+  });
+}
+
+/**
+ * Derive round labels from the number of matches (nodes).
+ * Example: 15 matches -> 4 rounds => ["1/8", "1/4", "1/2", "Final"].
+ */
+export function roundLabelsForMatchCount(matchCount: number): string[] {
+  if (!Number.isFinite(matchCount) || matchCount <= 0) return [];
+  const rounds = Math.max(1, Math.ceil(Math.log2(matchCount + 1)));
+  return roundLabelsForRoundCount(rounds);
+}
+
+/**
+ * Convenience helper to derive labels directly from a graph definition.
+ */
+export function roundLabelsForGraph(graph: NxGraphInput): string[] {
+  return roundLabelsForRoundCount(inferRoundCount(graph));
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.react.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "./dist",
+    "noEmit": false,
+    "emitDeclarationOnly": false,
+    "allowImportingTsExtensions": false,
+    "useDefineForClassFields": true
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"],
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "../types" },
+    { "path": "../core-graph-render" },
+    { "path": "../react-graph-render" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "composite": true,
+    "allowSyntheticDefaultImports": true,
+    "types": []
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      entry: './src/index.ts',
+      name: 'ReactTournamentTree',
+      formats: ['es'],
+      fileName: () => 'index.js',
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', '@graph-render/react', '@graph-render/types'],
+    },
+  },
+  server: {
+    port: 5173,
+    open: true,
+  },
+});