tournament-brackets-ui 0.1.0

package/dist/index.css

@@ -0,0 +1 @@
+.stylesheet-module_style0__4vv-5{mso-number-format:General;mso-rotate:0;mso-background-source:auto;mso-pattern:auto;mso-generic-font-family:auto;mso-font-charset:0;mso-protection:locked visible;mso-style-name:Normal;mso-style-id:0;border:none;color:#000;font-family:Arial;font-size:10pt;font-style:normal;font-weight:400;text-align:general;text-decoration:none;vertical-align:bottom;white-space:nowrap}.stylesheet-module_groupTitle__cnZQh{font-size:24pt;text-align:left}.stylesheet-module_groupTitle__cnZQh,.stylesheet-module_teamID__8R5Q4{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;font-weight:700;vertical-align:middle}.stylesheet-module_teamID__8R5Q4{border:.5pt solid #000;border-bottom:none;font-size:11pt;text-align:center}.stylesheet-module_teamIDExpanded__daaxG{border:.5pt solid #000;border-bottom:none;font-size:14pt;font-weight:700}.stylesheet-module_borderTop__GjThE,.stylesheet-module_teamIDExpanded__daaxG{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;text-align:center;vertical-align:middle}.stylesheet-module_borderTop__GjThE{border:none;border-top:.5pt solid #000;font-size:12pt}.stylesheet-module_borderRight__2n-71{font-size:12pt}.stylesheet-module_borderRightExpanded__z81mQ,.stylesheet-module_borderRight__2n-71{mso-style-parent:style0;mso-font-charset:0;border:none;border-right:.5pt solid #000;color:#000;font-family:Arial,sans-serif;text-align:center;vertical-align:middle}.stylesheet-module_borderBottom__cX-Er{border:none;border-bottom:.5pt solid #000}.stylesheet-module_borderBottom__cX-Er,.stylesheet-module_borderLeft__D3rWO{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;font-size:12pt;text-align:center;vertical-align:middle}.stylesheet-module_borderLeft__D3rWO{border:none;border-left:.5pt solid #000}.stylesheet-module_borderTopRight__5vUDq{border:.5pt solid #000;border-bottom:none;border-left:none}.stylesheet-module_borderRightLeft__eCQ8v,.stylesheet-module_borderTopRight__5vUDq{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;font-size:12pt;text-align:center;vertical-align:middle}.stylesheet-module_borderRightLeft__eCQ8v{border:.5pt solid #000;border-bottom:none;border-top:none}.stylesheet-module_borderBottomLeft__E5-V7{border:.5pt solid #000;border-right:none;border-top:none}.stylesheet-module_borderBottomLeft__E5-V7,.stylesheet-module_borderRightBottom__7utRO{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;font-size:12pt;text-align:center;vertical-align:middle}.stylesheet-module_borderRightBottom__7utRO{border:.5pt solid #000;border-left:none;border-top:none}.stylesheet-module_borderTopLeft__-plWL{border:.5pt solid #000;border-bottom:none;border-right:none}.stylesheet-module_borderRBL__rGbvM,.stylesheet-module_borderTopLeft__-plWL{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;font-size:12pt;text-align:center;vertical-align:middle}.stylesheet-module_borderRBL__rGbvM{border:.5pt solid #000;border-top:none}.stylesheet-module_borderTRL__NPCH-{border:.5pt solid #000;border-bottom:none;font-size:12pt}.stylesheet-module_borderTRL__NPCH-,.stylesheet-module_xl00__Sa7lD,.stylesheet-module_xl01__yLun6{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;text-align:center;vertical-align:middle}.stylesheet-module_xl01__yLun6{font-size:12pt}.stylesheet-module_inlineInput__1HFnX{border:none;box-sizing:border-box;font:inherit;height:100%;line-height:1;margin:0;overflow:hidden;padding:0;resize:none;text-align:center;width:100%}.stylesheet-module_inlineInput__1HFnX::placeholder{color:#aaa;opacity:1}.stylesheet-module_winnerNameInput__-vOjU{border:none;box-sizing:border-box;font:inherit;height:100%;line-height:1;margin:0;overflow:hidden;padding:0;resize:none;width:100%}.stylesheet-module_winnerNameInput__-vOjU::placeholder{color:#aaa;opacity:1}tr{mso-height-source:auto}col{mso-width-source:auto}br{mso-data-placement:same-cell}.stylesheet-module_style0__xVYkQ{mso-number-format:General;mso-rotate:0;mso-background-source:auto;mso-pattern:auto;mso-generic-font-family:auto;mso-font-charset:0;mso-protection:locked visible;mso-style-name:Normal;mso-style-id:0}.stylesheet-module_style0__xVYkQ,td{border:none;color:#000;font-family:Arial;font-size:10pt;font-style:normal;font-weight:400;text-align:general;text-decoration:none;vertical-align:bottom;white-space:nowrap}td{mso-style-parent:style0;mso-ignore:padding;mso-generic-font-family:auto;mso-font-charset:0;mso-number-format:General;mso-background-source:auto;mso-pattern:auto;mso-protection:locked visible;mso-rotate:0;padding-left:1px;padding-right:1px;padding-top:1px}.stylesheet-module_groupTitle__vRme1{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;font-size:24pt;font-weight:700;text-align:left;vertical-align:middle}.stylesheet-module_playerName__KN3ss{mso-style-parent:style0;mso-font-charset:0;font-family:Arial,sans-serif;font-size:11pt}.stylesheet-module_playerNameExpanded__eAMxo{mso-style-parent:style0;mso-font-charset:0;border:none;border-top:.5pt solid #000;font-family:Arial,sans-serif;font-size:12pt}.stylesheet-module_playerID__uAQs-{font-size:11pt}.stylesheet-module_playerIDExpanded__CvkVS,.stylesheet-module_playerID__uAQs-{mso-style-parent:style0;mso-font-charset:0;border:.5pt solid #000;border-bottom:none;color:#000;font-family:Arial,sans-serif;font-weight:700;text-align:center;vertical-align:middle}.stylesheet-module_playerIDExpanded__CvkVS{font-size:14pt}.stylesheet-module_borderTop__iS18j{border:none;border-top:.5pt solid #000}.stylesheet-module_borderRight__zdAOR,.stylesheet-module_borderTop__iS18j{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;font-size:12pt;text-align:center;vertical-align:middle}.stylesheet-module_borderRight__zdAOR{border:none;border-right:.5pt solid #000}.stylesheet-module_borderRightExpanded__dkqZu{border:none;border-right:.5pt solid #000}.stylesheet-module_borderBottom__JV2p7,.stylesheet-module_borderRightExpanded__dkqZu{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;text-align:center;vertical-align:middle}.stylesheet-module_borderBottom__JV2p7{border:none;border-bottom:.5pt solid #000;font-size:12pt}.stylesheet-module_borderLeft__VDozX{border:none;border-left:.5pt solid #000}.stylesheet-module_borderLeft__VDozX,.stylesheet-module_borderTopRight__9CpUi{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;font-size:12pt;text-align:center;vertical-align:middle}.stylesheet-module_borderTopRight__9CpUi{border:.5pt solid #000;border-bottom:none;border-left:none}.stylesheet-module_borderRightLeft__0L1PQ{border:.5pt solid #000;border-bottom:none;border-top:none;color:windowtext}.stylesheet-module_borderBottomLeft__Fdnez,.stylesheet-module_borderRightLeft__0L1PQ{mso-style-parent:style0;mso-font-charset:0;font-family:Arial,sans-serif;font-size:12pt;text-align:center;vertical-align:middle}.stylesheet-module_borderBottomLeft__Fdnez{border:.5pt solid #000;border-right:none;border-top:none;color:#000}.stylesheet-module_borderRightBottom__iuukU{border:.5pt solid #000;border-left:none;border-top:none}.stylesheet-module_borderRightBottom__iuukU,.stylesheet-module_borderTopLeft__tgc2M{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;font-size:12pt;text-align:center;vertical-align:middle}.stylesheet-module_borderTopLeft__tgc2M{border:.5pt solid #000;border-bottom:none;border-right:none}.stylesheet-module_borderRBL__FMBKa{border:.5pt solid #000;border-top:none}.stylesheet-module_borderRBL__FMBKa,.stylesheet-module_borderTRL__G0o55{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;font-size:12pt;text-align:center;vertical-align:middle}.stylesheet-module_borderTRL__G0o55{border:.5pt solid #000;border-bottom:none}.stylesheet-module_xl00__G5zsh,.stylesheet-module_xl01__GKWBv{mso-style-parent:style0;mso-font-charset:0;color:#000;font-family:Arial,sans-serif;text-align:center;vertical-align:middle}.stylesheet-module_xl01__GKWBv{font-size:12pt}.stylesheet-module_inlineInput__XBbXk{border:none;box-sizing:border-box;font:inherit;height:100%;line-height:1;margin:0;overflow:hidden;padding:0;resize:none;text-align:center;width:100%}.stylesheet-module_inlineInput__XBbXk::placeholder{color:#aaa;opacity:1}.stylesheet-module_winnerNameInput__glf1h{border:none;box-sizing:border-box;font:inherit;height:100%;line-height:1;margin:0;overflow:hidden;padding:0;resize:none;width:100%}.stylesheet-module_winnerNameInput__glf1h::placeholder{color:#aaa;opacity:1}.stylesheet-module_tooltipWrapper__RBrHE{display:inline-block;position:relative}.stylesheet-module_tooltip__U9AoH{background:#f5f5f5;border:1px solid #0000001a;border-radius:6px;bottom:100%;box-shadow:0 2px 6px #00000014;color:#333;font-size:12px;left:50%;line-height:1.2;opacity:0;padding:6px 10px;pointer-events:none;position:absolute;transform:translateX(-50%) translateY(-15px);transition:opacity .2s ease,visibility .2s ease;visibility:hidden;white-space:nowrap;z-index:10}.stylesheet-module_tooltip__U9AoH:after{border:8px solid #0000;border-top-color:#d3d3d3;content:"";left:50%;position:absolute;top:100%;transform:translateX(-50%)}.stylesheet-module_tooltipWrapper__RBrHE:focus-within .stylesheet-module_tooltip__U9AoH{opacity:1;visibility:visible}

package/package.json

@@ -0,0 +1,87 @@
+{
+  "name": "tournament-brackets-ui",
+  "version": "0.1.0",
+  "description": "A React component library for rendering tournament brackets.",
+  "author": "Bella Huang",
+  "license": "MIT",
+  "dependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "form-data": "^4.0.4",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build-lib": "rollup -c"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest",
+      "plugin:storybook/recommended"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@babel/preset-react": "^7.27.1",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.6",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-onboarding": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/preset-create-react-app": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-webpack5": "^8.6.12",
+    "@storybook/test": "^8.6.12",
+    "ajv": "^8.16.0",
+    "ajv-keywords": "^5.1.0",
+    "eslint-plugin-storybook": "^0.12.0",
+    "htmltojsx": "^0.3.0",
+    "prop-types": "^15.8.1",
+    "rollup": "^4.50.0",
+    "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "schema-utils": "^4.2.0",
+    "storybook": "^8.6.12",
+    "webpack": "^5.99.6"
+  },
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/esm/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  }
+}

package/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/rollup.config.mjs

@@ -0,0 +1,41 @@
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import babel from "@rollup/plugin-babel";
+import postcss from "rollup-plugin-postcss";
+
+export default [
+  {
+    input: "src/index.js",
+    external: [/^react($|\/)/, /^react-dom($|\/)/],
+    plugins: [
+      peerDepsExternal(),
+      resolve({ extensions: [".mjs", ".js", ".jsx", ".json"] }),
+      commonjs(),
+      postcss({
+        modules: true,     // import stylesheet.module.css and use `styles.*`
+        extract: true,     // emits dist/style.css
+        minimize: true,
+      }),
+      babel({
+        babelHelpers: "bundled",
+        extensions: [".js", ".jsx", ".mjs"],
+        exclude: /node_modules/,
+        presets: [["@babel/preset-react", { runtime: "automatic" }]],
+      }),
+    ],
+    output: [
+      // ESM code-split directory (needed for React.lazy chunks)
+      { dir: "dist/esm", format: "esm", sourcemap: true },
+
+      // CJS single file: inline all dynamic imports here
+      {
+        file: "dist/index.cjs",
+        format: "cjs",
+        sourcemap: true,
+        exports: "named",
+        inlineDynamicImports: true,
+      },
+    ],
+  },
+];

package/src/allocatePlayers.js

@@ -0,0 +1,235 @@
+// Define a static map of bracket sizes to byes
+export const BRACKET_BYES = {
+  8: 0,
+  9: 1,
+  10: 2,
+  11: 3,
+  12: 4,
+  13: 3,
+  14: 2,
+  16: 0,
+};
+
+
+/**
+ * Pick bracket sizes (power-of-2 count, sizes in [8,9,10,11,12,13,14,16])
+ * summing to N participants.
+ */
+function pickBracketSizes(N) {
+    const ALLOWED = [8, 9, 10, 11, 12, 13, 14, 16];
+    const MIN = ALLOWED[0], MAX = ALLOWED[ALLOWED.length-1];
+  
+    let count = 1;
+    while (count * MAX < N) count <<= 1;
+  
+    if (N <= MIN * count) {
+      return Array(count).fill(MIN);
+    }
+  
+    const base = Math.floor(N / count);
+    const sizes = Array(count).fill(Math.max(MIN, Math.min(MAX, base)));
+    let extra = N - sizes.reduce((sum, s) => sum + s, 0);
+  
+    // round-robin distribute the extra slots
+    for (let i = 0; extra > 0; i = (i + 1) % count) {
+      if (sizes[i] < MAX) {
+        sizes[i]++;
+        extra--;
+      }
+    }
+    return sizes;
+  }
+  
+  /**
+   * Given an array of player-objects, reorder them so that
+   * no two players from the same club are adjacent,
+   * using a simple greedy “take the largest club that isn’t last” strategy.
+   */
+  function reorderBracketPlayers(players) {
+    // bucket by club
+    const buckets = players.reduce((acc,p) => {
+      (acc[p.club] = acc[p.club]||[]).push(p);
+      return acc;
+    }, {});
+    // turn into array of {club, list, count}
+    const clubs = Object.entries(buckets)
+      .map(([club, list]) => ({ club, list: list.slice(), count: list.length }));
+    
+    const result = [];
+    let lastClub = null;
+  
+    for (let i = 0; i < players.length; i++) {
+      // sort clubs by remaining count desc
+      clubs.sort((a,b) => b.count - a.count);
+  
+      // pick the first with count>0 and club≠lastClub
+      let idx = clubs.findIndex(c => c.count > 0 && c.club !== lastClub);
+      if (idx === -1) {
+        // forced to pick the same club
+        idx = clubs.findIndex(c => c.count > 0);
+      }
+      const pick = clubs[idx];
+      result.push(pick.list.pop());
+      pick.count--;
+      lastClub = pick.club;
+    }
+  
+    return result;
+  }
+  
+  /**
+   * Main: allocate players into brackets, then reorder inside each bracket.
+   * @param {Array<{id:string,name:string,club:string}>} players
+   * @returns {Array<{ group:number, size:number, players:Array }>}
+   */
+  function assignBrackets(players) {
+    const N = players.length;
+    const sizes = pickBracketSizes(N);
+    const bracketCount = sizes.length;
+  
+    // group players by club size descending, for spreading
+    const byClub = players.reduce((acc,p) => {
+      (acc[p.club] = acc[p.club]||[]).push(p);
+      return acc;
+    }, {});
+    const clubLists = Object.values(byClub)
+      .sort((a,b) => b.length - a.length);
+  
+    // initialize empty brackets
+    const brackets = sizes.map((sz,i) => ({
+      group: i+1,
+      size: sz,
+      players: []
+    }));
+  
+    // 1) spread club-by-club across brackets
+    let bi = 0;
+    for (let clubPlayers of clubLists) {
+      for (let p of clubPlayers) {
+        // find next bracket with room
+        while (brackets[bi].players.length >= brackets[bi].size) {
+          bi = (bi + 1) % bracketCount;
+        }
+        brackets[bi].players.push(p);
+        bi = (bi + 1) % bracketCount;
+      }
+    }
+  
+    // 2) reorder inside each bracket to avoid same-club adjacencies
+    for (let br of brackets) {
+      br.players = reorderBracketPlayers(br.players);
+    }
+  
+    return brackets;
+  }
+
+  const divisionAPlayers = [
+    { id: "P001", name: "Amina Yusuf", club: "TKC", bias: false },
+    { id: "P002", name: "Hiroki Tanaka", club: "TKC", bias: false },
+    { id: "P003", name: "Lucas Oliveira", club: "TKC", bias: true },
+    { id: "P004", name: "Priya Singh", club: "TKC", bias: false },
+    { id: "P005", name: "Li Wei", club: "TKC", bias: false },
+    { id: "P006", name: "Jamal Thompson", club: "TKC", bias: false },
+    { id: "P007", name: "Sofia García", club: "TKC", bias: true },
+    { id: "P008", name: "Viktor Johansson", club: "TKC", bias: false },
+    { id: "P009", name: "Zuri Ndlovu", club: "TKC", bias: false },
+    { id: "P010", name: "Amara Diop", club: "TKC", bias: false },
+    { id: "P011", name: "Kenji Watanabe", club: "TKC", bias: false },
+    { id: "P012", name: "María Estévez", club: "TKC", bias: false },
+    { id: "P013", name: "Oskar Lindgren", club: "TKC", bias: false },
+    { id: "P014", name: "Aisha El-Sayed", club: "TKC", bias: false },
+    { id: "P015", name: "Linh Tran", club: "TKC", bias: false },
+    { id: "P016", name: "Diego Castillo", club: "ETO", bias: false },
+    { id: "P017", name: "Fatima Al-Hassan", club: "ETO", bias: false },
+    { id: "P018", name: "Olivia Montgomery", club: "ETO", bias: false },
+    { id: "P019", name: "Thiago Oliveira", club: "ETO", bias: false },
+    { id: "P020", name: "Zara Novak", club: "ETO", bias: false },
+    { id: "P021", name: "Amina Yusuf", club: "ETO", bias: false },
+    { id: "P022", name: "Hiroki Tanaka", club: "ETO", bias: true },
+    { id: "P023", name: "Lucas Oliveira", club: "ETO", bias: false },
+    { id: "P024", name: "Priya Singh", club: "ETO", bias: false },
+    { id: "P025", name: "Li Wei", club: "ETO", bias: false },
+    { id: "P026", name: "Jamal Thompson", club: "ETO", bias: false },
+    { id: "P027", name: "Sofia García", club: "ETO", bias: false },
+    { id: "P028", name: "Viktor Johansson", club: "UOT", bias: false },
+    { id: "P029", name: "Zuri Ndlovu", club: "UOT", bias: true },
+    { id: "P030", name: "Amara Diop", club: "UOT", bias: false },
+    { id: "P031", name: "Kenji Watanabe", club: "UOT", bias: false },
+    { id: "P032", name: "María Estévez", club: "UOT", bias: false },
+    { id: "P033", name: "Oskar Lindgren", club: "UOT", bias: true },
+    { id: "P034", name: "Aisha El-Sayed", club: "UOT", bias: false },
+    { id: "P035", name: "Linh Tran", club: "UOT", bias: false },
+    { id: "P036", name: "Diego Castillo", club: "UOT", bias: false },
+    { id: "P037", name: "Fatima Al-Hassan", club: "UOT", bias: false },
+    { id: "P038", name: "Olivia Montgomery", club: "UOT", bias: false },
+    { id: "P039", name: "Thiago Oliveira", club: "JCC", bias: false },
+    { id: "P040", name: "Zara Novak", club: "JCC", bias: false },
+    { id: "P041", name: "Amina Yusuf", club: "JCC", bias: false },
+    { id: "P042", name: "Hiroki Tanaka", club: "JCC", bias: false },
+    { id: "P043", name: "Lucas Oliveira", club: "JCC", bias: false },
+    { id: "P044", name: "Priya Singh", club: "JCC", bias: true },
+    { id: "P045", name: "Li Wei", club: "JCC", bias: false },
+    { id: "P046", name: "Jamal Thompson", club: "JCC", bias: false },
+    { id: "P047", name: "Sofia García", club: "JCC", bias: false },
+    { id: "P048", name: "Viktor Johansson", club: "JCC", bias: false },
+    { id: "P049", name: "Zuri Ndlovu", club: "UWA", bias: false },
+    { id: "P050", name: "Amara Diop", club: "UWA", bias: false },
+    { id: "P051", name: "Kenji Watanabe", club: "UWA", bias: false },
+    { id: "P052", name: "María Estévez", club: "UWA", bias: false },
+    { id: "P053", name: "Oskar Lindgren", club: "UWA", bias: false },
+    { id: "P054", name: "Aisha El-Sayed", club: "UWA", bias: false },
+    { id: "P055", name: "Linh Tran", club: "UWA", bias: false },
+    { id: "P056", name: "Diego Castillo", club: "UWA", bias: false },
+    { id: "P057", name: "Fatima Al-Hassan", club: "UWA", bias: false },
+    { id: "P058", name: "Olivia Montgomery", club: "UWA", bias: false },
+    { id: "P059", name: "Thiago Oliveira", club: "TMU", bias: false },
+    { id: "P060", name: "Zara Novak", club: "TMU", bias: false },
+    { id: "P061", name: "Amina Yusuf", club: "TMU", bias: false },
+    { id: "P062", name: "Hiroki Tanaka", club: "TMU", bias: false },
+    { id: "P063", name: "Lucas Oliveira", club: "TMU", bias: false },
+    { id: "P064", name: "Priya Singh", club: "TMU", bias: false },
+    { id: "P065", name: "Li Wei", club: "TMU", bias: false },
+    { id: "P066", name: "Jamal Thompson", club: "TMU", bias: false },
+    { id: "P067", name: "Sofia García", club: "TMU", bias: false },
+    { id: "P068", name: "Viktor Johansson", club: "MAR", bias: false },
+    { id: "P069", name: "Zuri Ndlovu", club: "MAR", bias: false },
+    { id: "P070", name: "Amara Diop", club: "MAR", bias: false },
+    { id: "P071", name: "Kenji Watanabe", club: "MAR", bias: false },
+    { id: "P072", name: "María Estévez", club: "MAR", bias: true },
+    { id: "P073", name: "Oskar Lindgren", club: "MAR", bias: false },
+    { id: "P074", name: "Aisha El-Sayed", club: "MAR", bias: false },
+    { id: "P075", name: "Linh Tran", club: "MAR", bias: false },
+    { id: "P076", name: "Diego Castillo", club: "MAR", bias: false },
+    { id: "P077", name: "Fatima Al-Hassan", club: "ARC", bias: false },
+    { id: "P078", name: "Olivia Montgomery", club: "ARC", bias: false },
+    { id: "P079", name: "Thiago Oliveira", club: "ARC", bias: false },
+    { id: "P080", name: "Zara Novak", club: "ARC", bias: false },
+    { id: "P081", name: "Amina Yusuf", club: "ARC", bias: false },
+    { id: "P082", name: "Hiroki Tanaka", club: "ARC", bias: false },
+    { id: "P083", name: "Lucas Oliveira", club: "ARC", bias: false },
+    { id: "P084", name: "Priya Singh", club: "ARC", bias: false },
+    { id: "P085", name: "Li Wei", club: "ARC", bias: false },
+    { id: "P086", name: "Jamal Thompson", club: "BLU", bias: false },
+    { id: "P087", name: "Sofia García", club: "BLU", bias: false },
+    { id: "P088", name: "Viktor Johansson", club: "BLU", bias: false },
+    { id: "P089", name: "Zuri Ndlovu", club: "BLU", bias: false },
+    { id: "P090", name: "Amara Diop", club: "BLU", bias: false },
+    { id: "P091", name: "Kenji Watanabe", club: "BLU", bias: false },
+    { id: "P092", name: "María Estévez", club: "BLU", bias: false },
+    { id: "P093", name: "Oskar Lindgren", club: "BLU", bias: false },
+    { id: "P094", name: "Aisha El-Sayed", club: "BLU", bias: false },
+    { id: "P095", name: "Linh Tran", club: "GRN", bias: false },
+    { id: "P096", name: "Diego Castillo", club: "GRN", bias: false },
+    { id: "P097", name: "Fatima Al-Hassan", club: "GRN", bias: false },
+    { id: "P098", name: "Olivia Montgomery", club: "GRN", bias: false },
+    { id: "P099", name: "Thiago Oliveira", club: "GRN", bias: false },
+    { id: "P100", name: "Zara Novak", club: "GRN", bias: false },
+    { id: "P101", name: "Amina Yusuf", club: "GRN", bias: false },
+    { id: "P102", name: "Hiroki Tanaka", club: "GRN", bias: false },
+    { id: "P103", name: "Lucas Oliveira", club: "GRN", bias: false },
+  ];
+  
+  const divisionABrackets = assignBrackets(divisionAPlayers);
+  console.log("total players:", divisionAPlayers.length);
+  console.log(JSON.stringify(divisionABrackets, null, 2));
+  

package/src/components/Facades/CollapsedLeft.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { VariantFacade } from "../_internal/VariantFacade";
+const registry = {
+  teams: {
+    8:  React.lazy(() => import("../Teams/08-Team/CollapsedLeft")),
+    9:  React.lazy(() => import("../Teams/09-Team/CollapsedLeft")),
+    10: React.lazy(() => import("../Teams/10-Team/CollapsedLeft")),
+    11: React.lazy(() => import("../Teams/11-Team/CollapsedLeft")),
+    12: React.lazy(() => import("../Teams/12-Team/CollapsedLeft")),
+    13: React.lazy(() => import("../Teams/13-Team/CollapsedLeft")),
+    14: React.lazy(() => import("../Teams/14-Team/CollapsedLeft")),
+    16: React.lazy(() => import("../Teams/16-Team/CollapsedLeft")),
+  },
+  individuals: {
+    8:  React.lazy(() => import("../Individuals/08-Player/CollapsedLeft")),
+    9:  React.lazy(() => import("../Individuals/09-Player/CollapsedLeft")),
+    10: React.lazy(() => import("../Individuals/10-Player/CollapsedLeft")),
+    11: React.lazy(() => import("../Individuals/11-Player/CollapsedLeft")),
+    12: React.lazy(() => import("../Individuals/12-Player/CollapsedLeft")),
+    13: React.lazy(() => import("../Individuals/13-Player/CollapsedLeft")),
+    14: React.lazy(() => import("../Individuals/14-Player/CollapsedLeft")),
+    16: React.lazy(() => import("../Individuals/16-Player/CollapsedLeft")),
+  },
+};
+
+export default VariantFacade(registry, "CollapsedLeft");

package/src/components/Facades/CollapsedRight.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { VariantFacade } from "../_internal/VariantFacade";
+
+const registry = {
+  teams: {
+    8:  React.lazy(() => import("../Teams/08-Team/CollapsedRight")),
+    9:  React.lazy(() => import("../Teams/09-Team/CollapsedRight")),
+    10: React.lazy(() => import("../Teams/10-Team/CollapsedRight")),
+    11: React.lazy(() => import("../Teams/11-Team/CollapsedRight")),
+    12: React.lazy(() => import("../Teams/12-Team/CollapsedRight")),
+    13: React.lazy(() => import("../Teams/13-Team/CollapsedRight")),
+    14: React.lazy(() => import("../Teams/14-Team/CollapsedRight")),
+    16: React.lazy(() => import("../Teams/16-Team/CollapsedRight")),
+  },
+  individuals: {
+    8:  React.lazy(() => import("../Individuals/08-Player/CollapsedRight")),
+    9:  React.lazy(() => import("../Individuals/09-Player/CollapsedRight")),
+    10: React.lazy(() => import("../Individuals/10-Player/CollapsedRight")),
+    11: React.lazy(() => import("../Individuals/11-Player/CollapsedRight")),
+    12: React.lazy(() => import("../Individuals/12-Player/CollapsedRight")),
+    13: React.lazy(() => import("../Individuals/13-Player/CollapsedRight")),
+    14: React.lazy(() => import("../Individuals/14-Player/CollapsedRight")),
+    16: React.lazy(() => import("../Individuals/16-Player/CollapsedRight")),
+  },
+};
+
+export default VariantFacade(registry, "CollapsedRight");

package/src/components/Facades/Expanded.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { VariantFacade } from "../_internal/VariantFacade";
+
+const registry = {
+  teams: {
+    8:  React.lazy(() => import("../Teams/08-Team/Expanded")),
+    9:  React.lazy(() => import("../Teams/09-Team/Expanded")),
+    10: React.lazy(() => import("../Teams/10-Team/Expanded")),
+    11: React.lazy(() => import("../Teams/11-Team/Expanded")),
+    12: React.lazy(() => import("../Teams/12-Team/Expanded")),
+    13: React.lazy(() => import("../Teams/13-Team/Expanded")),
+    14: React.lazy(() => import("../Teams/14-Team/Expanded")),
+    16: React.lazy(() => import("../Teams/16-Team/Expanded")),
+  },
+  individuals: {
+    8:  React.lazy(() => import("../Individuals/08-Player/Expanded")),
+    9:  React.lazy(() => import("../Individuals/09-Player/Expanded")),
+    10: React.lazy(() => import("../Individuals/10-Player/Expanded")),
+    11: React.lazy(() => import("../Individuals/11-Player/Expanded")),
+    12: React.lazy(() => import("../Individuals/12-Player/Expanded")),
+    13: React.lazy(() => import("../Individuals/13-Player/Expanded")),
+    14: React.lazy(() => import("../Individuals/14-Player/Expanded")),
+    16: React.lazy(() => import("../Individuals/16-Player/Expanded")),
+  },
+};
+
+export default VariantFacade(registry, "Expanded");