hyperchess-board-ui 0.1.0

package/dist/web-component/hyperchess-board.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Framework-agnostic custom element wrapping a HyperChess board.
+ *
+ * Usage: `<hyperchess-board-ui hfen="..." theme="modern"></hyperchess-board-ui>`
+ *
+ * Importing this module has a side effect: the element is registered as
+ * `hyperchess-board-ui` at the bottom of the file, guarded so a duplicate import
+ * cannot throw. Markup and styles live in an open shadow root, so page CSS does
+ * not leak in and the element can be styled only through its `:host` and any
+ * custom properties it inherits.
+ *
+ * Board rendering itself is still a placeholder; only the attribute plumbing and
+ * shadow-root scaffolding are implemented.
+ */
+export declare class HyperchessBoard extends HTMLElement {
+    private hfen;
+    private theme;
+    private root;
+    /**
+     * Attach the shadow root. Per the custom-element spec no attributes may be
+     * read here, so the defaults above stand until `connectedCallback` runs.
+     */
+    constructor();
+    /**
+     * Adopt the `hfen` and `theme` attributes, if present, and paint for the first
+     * time. Absent or empty attributes leave the defaults in place.
+     */
+    connectedCallback(): void;
+    /** Attributes that trigger `attributeChangedCallback`; anything not listed
+     * here is inert after the element is connected. */
+    static get observedAttributes(): string[];
+    /**
+     * Re-render when a watched attribute changes, skipping no-op writes so that
+     * re-setting an attribute to its current value does not cost a repaint.
+     *
+     * @param name - Attribute that changed; one of `observedAttributes`.
+     * @param oldValue - Previous value, `null` if the attribute was absent.
+     * @param newValue - Incoming value.
+     */
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    /**
+     * Rebuild the shadow root's contents from scratch.
+     *
+     * Replacing `innerHTML` wholesale discards any existing nodes, so nothing may
+     * hold a reference to a rendered square across a render.
+     */
+    private render;
+}
+//# sourceMappingURL=hyperchess-board.d.ts.map

package/dist/web-component/hyperchess-board.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyperchess-board.d.ts","sourceRoot":"","sources":["../../src/web-component/hyperchess-board.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;GAaG;AACH,qBAAa,eAAgB,SAAQ,WAAW;IAC9C,OAAO,CAAC,IAAI,CAAsG;IAClH,OAAO,CAAC,KAAK,CAAoB;IAKjC,OAAO,CAAC,IAAI,CAAa;IAEzB;;;OAGG;;IAMH;;;OAGG;IACH,iBAAiB;IAOjB;uDACmD;IACnD,MAAM,KAAK,kBAAkB,aAE5B;IAED;;;;;;;OAOG;IACH,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;IAYzE;;;;;OAKG;IACH,OAAO,CAAC,MAAM;CA0Bf"}

package/dist/web-component/hyperchess-board.js

@@ -0,0 +1,102 @@
+// SPDX-License-Identifier: GPL-3.0-or-later
+// HyperChess Core — hyperchess-board-ui
+// File: packages/board/src/web-component/hyperchess-board-ui.ts
+// Version: 1.0.0
+// Copyright (c) 2026 HyperChess Developer Team
+/**
+ * Framework-agnostic custom element wrapping a HyperChess board.
+ *
+ * Usage: `<hyperchess-board-ui hfen="..." theme="modern"></hyperchess-board-ui>`
+ *
+ * Importing this module has a side effect: the element is registered as
+ * `hyperchess-board-ui` at the bottom of the file, guarded so a duplicate import
+ * cannot throw. Markup and styles live in an open shadow root, so page CSS does
+ * not leak in and the element can be styled only through its `:host` and any
+ * custom properties it inherits.
+ *
+ * Board rendering itself is still a placeholder; only the attribute plumbing and
+ * shadow-root scaffolding are implemented.
+ */
+export class HyperchessBoard extends HTMLElement {
+    /**
+     * Attach the shadow root. Per the custom-element spec no attributes may be
+     * read here, so the defaults above stand until `connectedCallback` runs.
+     */
+    constructor() {
+        super();
+        this.hfen = '12/abcdefghijkl/mnopqrstuvwx/12/12/12/12/12/12/MNOPQRSTUVWX/ABCDEFGHIJKL/12 w KQkq - 0 1';
+        this.theme = 'modern';
+        this.root = this.attachShadow({ mode: 'open' });
+    }
+    /**
+     * Adopt the `hfen` and `theme` attributes, if present, and paint for the first
+     * time. Absent or empty attributes leave the defaults in place.
+     */
+    connectedCallback() {
+        this.hfen = this.getAttribute('hfen') || this.hfen;
+        this.theme = this.getAttribute('theme') || this.theme;
+        this.render();
+    }
+    /** Attributes that trigger `attributeChangedCallback`; anything not listed
+     * here is inert after the element is connected. */
+    static get observedAttributes() {
+        return ['hfen', 'theme'];
+    }
+    /**
+     * Re-render when a watched attribute changes, skipping no-op writes so that
+     * re-setting an attribute to its current value does not cost a repaint.
+     *
+     * @param name - Attribute that changed; one of `observedAttributes`.
+     * @param oldValue - Previous value, `null` if the attribute was absent.
+     * @param newValue - Incoming value.
+     */
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (oldValue === newValue)
+            return;
+        if (name === 'hfen') {
+            this.hfen = newValue;
+            this.render();
+        }
+        else if (name === 'theme') {
+            this.theme = newValue;
+            this.render();
+        }
+    }
+    /**
+     * Rebuild the shadow root's contents from scratch.
+     *
+     * Replacing `innerHTML` wholesale discards any existing nodes, so nothing may
+     * hold a reference to a rendered square across a render.
+     */
+    render() {
+        this.root.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+
+        .board {
+          display: grid;
+          grid-template-columns: repeat(12, 1fr);
+          gap: 0;
+          aspect-ratio: 1;
+          background: #f0d9b5;
+          border: 1px solid #999;
+        }
+      </style>
+
+      <div class="board">
+        <!-- Board rendering coming in Phase 3.0.4 -->
+        <div style="grid-column: 1 / -1; padding: 20px; text-align: center;">
+          Board rendering coming soon
+        </div>
+      </div>
+    `;
+    }
+}
+// Register the custom element
+if (!customElements.get('hyperchess-board-ui')) {
+    customElements.define('hyperchess-board-ui', HyperchessBoard);
+}
+//# sourceMappingURL=hyperchess-board.js.map

package/dist/web-component/hyperchess-board.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hyperchess-board.js","sourceRoot":"","sources":["../../src/web-component/hyperchess-board.ts"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,wCAAwC;AACxC,gEAAgE;AAChE,iBAAiB;AACjB,+CAA+C;AAE/C;;;;;;;;;;;;;GAaG;AACH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAS9C;;;OAGG;IACH;QACE,KAAK,EAAE,CAAC;QAbF,SAAI,GAAW,0FAA0F,CAAC;QAC1G,UAAK,GAAW,QAAQ,CAAC;QAa/B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IAClD,CAAC;IAED;;;OAGG;IACH,iBAAiB;QACf,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC;QACnD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC;QAEtD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED;uDACmD;IACnD,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3B,CAAC;IAED;;;;;;;OAOG;IACH,wBAAwB,CAAC,IAAY,EAAE,QAAgB,EAAE,QAAgB;QACvE,IAAI,QAAQ,KAAK,QAAQ;YAAE,OAAO;QAElC,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YACpB,IAAI,CAAC,IAAI,GAAG,QAAQ,CAAC;YACrB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;aAAM,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;YACtB,IAAI,CAAC,MAAM,EAAE,CAAC;QAChB,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACK,MAAM;QACZ,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG;;;;;;;;;;;;;;;;;;;;;;;KAuBrB,CAAC;IACJ,CAAC;CACF;AAED,8BAA8B;AAC9B,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,qBAAqB,CAAC,EAAE,CAAC;IAC/C,cAAc,CAAC,MAAM,CAAC,qBAAqB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC"}

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "hyperchess-board-ui",
+  "version": "0.1.0",
+  "description": "HyperChess 2D board component for all frameworks",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/React/index.js",
+      "types": "./dist/React/index.d.ts"
+    },
+    "./vue": {
+      "import": "./dist/Vue/index.js",
+      "types": "./dist/Vue/index.d.ts"
+    },
+    "./web-component": {
+      "import": "./dist/web-component/index.js",
+      "types": "./dist/web-component/index.d.ts"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "vue": ">=3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "hyperchess-core": "0.1.0",
+    "hyperchess-theme": "0.1.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.2.0",
+    "vitest": "^0.34.0"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "hyperchess",
+    "chess",
+    "board",
+    "component",
+    "react",
+    "vue",
+    "web-component"
+  ],
+  "author": "HyperChess Contributors",
+  "license": "GPL-3.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KyrpyDev/hyperchess-core.git",
+    "directory": "packages/board"
+  },
+  "homepage": "https://github.com/KyrpyDev/hyperchess-core#readme",
+  "bugs": {
+    "url": "https://github.com/KyrpyDev/hyperchess-core/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}