react-riichi-mahjong-tiles 1.1.0 → 2.0.0

package/.idea/AugmentWebviewStateStore.xml

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AugmentWebviewStateStore">
+    <option name="stateMap">
+      <map>
+        <entry key="CHAT_STATE" value="[[&quot;currentConversationId&quot;,&quot;pins&quot;,&quot;agentExecutionMode&quot;,&quot;isPanelCollapsed&quot;,&quot;displayedAnnouncements&quot;,&quot;conversations&quot;,&quot;a|0|1|2|3|4|5&quot;,&quot;f88227ef-9462-4552-aa27-bf2a08426783&quot;,&quot;o|&quot;,&quot;manual&quot;,&quot;b|F&quot;,&quot;a|&quot;,&quot;a|7&quot;,&quot;id&quot;,&quot;createdAtIso&quot;,&quot;lastInteractedAtIso&quot;,&quot;selectedModelId&quot;,&quot;requestIds&quot;,&quot;isPinned&quot;,&quot;isShareable&quot;,&quot;extraData&quot;,&quot;personaType&quot;,&quot;rootTaskUuid&quot;,&quot;feedbackStates&quot;,&quot;toolUseStates&quot;,&quot;chatHistory&quot;,&quot;draftExchange&quot;,&quot;a|D|E|F|G|H|I|J|K|L|M|N|O|P|Q&quot;,&quot;2026-01-24T08:17:16.897Z&quot;,&quot;2026-01-24T10:08:20.549Z&quot;,&quot;claude-opus-4-5&quot;,&quot;isAgentConversation&quot;,&quot;a|V&quot;,&quot;b|T&quot;,&quot;o|W|X&quot;,&quot;n|0&quot;,&quot;9f0edefb-d0f4-4684-9f04-60eb14610c23&quot;,&quot;request_id&quot;,&quot;uuid&quot;,&quot;chatItemType&quot;,&quot;status&quot;,&quot;fromTimestamp&quot;,&quot;toTimestamp&quot;,&quot;seen_state&quot;,&quot;a|b|c|d|e|f|g|h&quot;,&quot;69871810-7600-430b-868f-58b26bd45199&quot;,&quot;1323d4c0-1075-434b-a206-359144ab351a&quot;,&quot;agentic-checkpoint-delimiter&quot;,&quot;success&quot;,&quot;n|V9Crnev&quot;,&quot;seen&quot;,&quot;o|i|j|k|l|m|Z|n|o&quot;,&quot;exchangeUuid&quot;,&quot;timestamp&quot;,&quot;request_message&quot;,&quot;a|d|q|r|s|e|h&quot;,&quot;exchange-pointer&quot;,&quot;4b7e8ef4-6bf6-4424-8a3e-5aea620f253b&quot;,&quot;2026-01-24T08:17:24.160Z&quot;,&quot;Provide a short summary of this project&quot;,&quot;o|t|u|v|w|x|m|o&quot;,&quot;575329e6-8598-4bbe-a25a-3d3d26adb027&quot;,&quot;2026-01-24T08:18:49.529Z&quot;,&quot;I need to publish a new version of the `react-riichi-mahjong-tiles` npm package to the npm registry. Please provide step-by-step instructions that include:\n\n1. How to build the library for distribution (using the existing build scripts)\n2. How to update the version number in `package.json` (following semantic versioning)\n3. What files will be included/excluded in the published package (based on `.npmignore`)\n4. The exact npm/yarn commands needed to publish the package\n5. Any prerequisites I need (npm account, authentication, permissions)\n6. How to verify the package was published successfully\n7. Any best practices or common pitfalls to avoid when publishing\n\nPlease tailor the instructions specifically to this project's configuration and build setup.&quot;,&quot;o|t|u|z|10|11|m|o&quot;,&quot;6b83d1d8-7f20-45c8-af3d-56e2e3c2eac6&quot;,&quot;2026-01-24T08:18:52.433Z&quot;,&quot;&quot;,&quot;o|t|u|13|14|15|m|o&quot;,&quot;d3b550bc-1663-4947-8d59-81914c35807b&quot;,&quot;2026-01-24T08:18:54.721Z&quot;,&quot;o|t|u|17|18|15|m|o&quot;,&quot;676a4d98-1d0c-4064-bdf1-72823efd2849&quot;,&quot;2026-01-24T08:29:50.382Z&quot;,&quot;I tried to run the storybook script, but got this error. How to fix?\n\node:internal/crypto/hash:101\r\n  this[kHandle] = new _Hash(algorithm, xofLen, algorithmId, getHashCache());\r\n                  ^\r\n\r\nError: error:0308010C:digital envelope routines::unsupported\r\n    at new Hash (node:internal/crypto/hash:101:19)\r\n    at Object.createHash (node:crypto:139:10)\r\n    at module.exports (C:\\code\\react-riichi-mahjong-tiles\\node_modules\\webpack\\lib\\util\\createHash.js:135:53)\r\n    at NormalModule._initBuildHash (C:\\code\\react-riichi-mahjong-tiles\\node_modules\\webpack\\lib\\NormalModule.js:417:16)\r\n    at handleParseError (C:\\code\\react-riichi-mahjong-tiles\\node_modules\\webpack\\lib\\NormalModule.js:471:10)\r\n    at C:\\code\\react-riichi-mahjong-tiles\\node_modules\\webpack\\lib\\NormalModule.js:503:5\r\n    at C:\\code\\react-riichi-mahjong-tiles\\node_modules\\webpack\\lib\\NormalModule.js:358:12\r\n    at C:\\code\\react-riichi-mahjong-tiles\\node_modules\\loader-runner\\lib\\LoaderRunner.js:373:3\r\n    at iterateNormalLoaders (C:\\code\\react-riichi-mahjong-tiles\\node_modules\\loader-runner\\lib\\LoaderRunner.js:214:10)\r\n    at C:\\code\\react-riichi-mahjong-tiles\\node_modules\\loader-runner\\lib\\LoaderRunner.js:205:4 {\r\n  opensslErrorStack: [\r\n    'error:03000086:digital envelope routines::initialization error',\r\n    'error:0308010C:digital envelope routines::unsupported'\r\n  ],\r\n  library: 'digital envelope routines',\r\n  reason: 'unsupported',\r\n  code: 'ERR_OSSL_EVP_UNSUPPORTED'\r\n}\r\n\r\nNode.js v22.22.0\r\nerror Command failed with exit code 1.&quot;,&quot;o|t|u|1A|1B|1C|m|o&quot;,&quot;aa7f1110-0bde-4fbd-8f4f-bf0b93c0fadf&quot;,&quot;2026-01-24T08:35:06.093Z&quot;,&quot;Update the `.storybook/main.js` configuration file to be compatible with Storybook 8.6.14 (the latest version currently installed in this project). The configuration should:\n\n1. Use the modern Storybook 10.x configuration format and API\n2. Update the `framework` field to use the new framework package structure (e.g., `@storybook/react-webpack5` instead of the deprecated `@storybook/react`)\n3. Ensure SVGR webpack loader configuration is properly set up to handle SVG files as React components (using the `@svgr/webpack` package that's already installed at version 8.1.0)\n4. Update the `webpackFinal` function to be compatible with Webpack 5 (since Storybook 8.x uses Webpack 5 by default, not Webpack 4)\n5. Remove any deprecated configuration options that are no longer supported in Storybook 8.x\n6. Ensure the stories glob patterns remain unchanged to continue loading stories from the `../stories/**/*.stories.@(js|jsx|ts|tsx)` paths\n7. Keep the existing addons (`@storybook/addon-links`, `@storybook/addon-essentials`, `@storybook/addon-interactions`) but update their configuration syntax if needed for Storybook 8.x\n\nThe goal is to resolve the Node.js 22 OpenSSL compatibility error by migrating from the old Webpack 4-based Storybook setup to the modern Webpack 5-based Storybook 8.x setup, while maintaining the ability to import and display SVG files as React components in stories.&quot;,&quot;o|t|u|1E|1F|1G|m|o&quot;,&quot;93ba84a8-e8bc-408e-ba0c-1a5fd2cc3357&quot;,&quot;2026-01-24T08:35:08.569Z&quot;,&quot;o|t|u|1I|1J|15|m|o&quot;,&quot;6177df80-7b73-4f28-a3c5-dd13d2e32b2a&quot;,&quot;2026-01-24T08:35:11.038Z&quot;,&quot;o|t|u|1L|1M|15|m|o&quot;,&quot;dd4cae8d-fcb1-4a3e-9633-31792aebdd20&quot;,&quot;2026-01-24T08:35:25.607Z&quot;,&quot;o|t|u|1O|1P|15|m|o&quot;,&quot;ed6914a1-e16a-4c19-9a32-bd1b02390bce&quot;,&quot;2026-01-24T08:35:32.008Z&quot;,&quot;o|t|u|1R|1S|15|m|o&quot;,&quot;d7eb31f1-016d-4f56-868a-51ad049db015&quot;,&quot;2026-01-24T08:35:40.910Z&quot;,&quot;o|t|u|1U|1V|15|m|o&quot;,&quot;10503083-9f01-49d6-8e45-f93c2db69f91&quot;,&quot;2026-01-24T08:35:52.568Z&quot;,&quot;o|t|u|1X|1Y|15|m|o&quot;,&quot;8de54851-35fd-4de7-afc3-9502b04e5ca4&quot;,&quot;2026-01-24T08:35:56.866Z&quot;,&quot;o|t|u|1a|1b|15|m|o&quot;,&quot;a3d6ad3f-0568-45f7-8053-bb91390f8dad&quot;,&quot;a29f1010-9537-4306-b6d8-65718c833281&quot;,&quot;n|V9CwYNM&quot;,&quot;o|i|1d|1e|l|m|n|1f|o&quot;,&quot;462875ff-7643-4a58-bdbb-327b1cd82643&quot;,&quot;2026-01-24T08:40:29.723Z&quot;,&quot;info =&gt; Starting preview..\r\ninfo Addon-docs: using MDX3\r\ninfo =&gt; Using implicit CSS loaders\r\ninfo =&gt; Using default Webpack5 setup\r\n&lt;i&gt; [webpack-dev-middleware] wait until bundle finished\r\nERROR in ./stories/Dark.stories.tsx 10:24\r\nModule parse failed: Unexpected token (10:24)\r\nFile was processed with these loaders:\r\n * ./node_modules/@storybook/csf-plugin/dist/webpack-loader.js\r\n * ./node_modules/@storybook/builder-webpack5/dist/loaders/export-order-loader.js\r\nYou may need an additional loader to handle the result of these loaders.\r\n|   title: 'Dark',\r\n|   component: Man1Black,\r\n&gt;   decorators: [Story =&gt; &lt;div style={{\r\n|     width: 200,\r\n|     borderRadius: '8px',\r\n @ ./stories/ lazy ^\\.\\/.*$ include: (?%21.*node_modules)(?:[\\\\/]stories(?:[\\\\/](?%21\\.)(?:(?:(?%21(?:^%7C[\\\\/])\\.).)*?)[\\\\/]%7C[\\\\/]%7C$)(?%21\\.)(?=.)[^\\\\/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$ chunkName: [request] namespace object ./Dark.stories.tsx ./Dark.stories\r\n @ ./storybook-stories.js 10:11-14:5\r\n @ ./storybook-config-entry.js 7:0-50 28:31-39 35:2-38:4 37:31-39 35:58-38:3\r\n\r\nERROR in ./stories/Light.stories.tsx 10:24\r\nModule parse failed: Unexpected token (10:24)\r\nFile was processed with these loaders:\r\n * ./node_modules/@storybook/csf-plugin/dist/webpack-loader.js\r\n * ./node_modules/@storybook/builder-webpack5/dist/loaders/export-order-loader.js\r\nYou may need an additional loader to handle the result of these loaders.\r\n|   title: 'Light',\r\n|   component: Man1,\r\n&gt;   decorators: [Story =&gt; &lt;div style={{\r\n|     width: 200,\r\n|     borderRadius: '8px',\r\n @ ./stories/ lazy ^\\.\\/.*$ include: (?%21.*node_modules)(?:[\\\\/]stories(?:[\\\\/](?%21\\.)(?:(?:(?%21(?:^%7C[\\\\/])\\.).)*?)[\\\\/]%7C[\\\\/]%7C$)(?%21\\.)(?=.)[^\\\\/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$ chunkName: [request] namespace object ./Light.stories.tsx ./Light.stories\r\n @ ./storybook-stories.js 10:11-14:5\r\n @ ./storybook-config-entry.js 7:0-50 28:31-39 35:2-38:4 37:31-39 35:58-38:3\r\n\r\npreview compiled with 2 errors\r\n=&gt; Failed to build the preview\r\n99% end closing watch compilationWARN Force closed preview build\r\nSB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.\r\nRun Storybook with --debug-webpack for more information.\r\n    at starter (.\\node_modules\\@storybook\\builder-webpack5\\dist\\index.js:1:24163)\r\n    at starter.next (&lt;anonymous&gt;)\r\n    at Module.start (.\\node_modules\\@storybook\\builder-webpack5\\dist\\index.js:1:26142)\r\n    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)\r\n    at async storybookDevServer (.\\node_modules\\@storybook\\core\\dist\\core-server\\index.cjs:36423:79)\r\n    at async buildOrThrow (.\\node_modules\\@storybook\\core\\dist\\core-server\\index.cjs:35049:12)\r\n    at async buildDevStandalone (.\\node_modules\\@storybook\\core\\dist\\core-server\\index.cjs:37628:78)\r\n    at async withTelemetry (.\\node_modules\\@storybook\\core\\dist\\core-server\\index.cjs:35788:12)\r\n    at async dev (.\\node_modules\\@storybook\\core\\dist\\cli\\bin\\index.cjs:5874:3)\r\n    at async s.&lt;anonymous&gt; (.\\node_modules\\@storybook\\core\\dist\\cli\\bin\\index.cjs:6052:74)\r\n\r\nWARN Broken build, fix the error above.\r\nWARN You may need to refresh the browser.&quot;,&quot;o|t|u|1h|1i|1j|m|o&quot;,&quot;45b0cb35-99f0-44ae-b8ad-6d3f6df318f6&quot;,&quot;2026-01-24T08:40:33.390Z&quot;,&quot;o|t|u|1l|1m|15|m|o&quot;,&quot;b7308955-e72a-42d3-8cae-6ca22b1d09b8&quot;,&quot;2026-01-24T08:40:46.887Z&quot;,&quot;o|t|u|1o|1p|15|m|o&quot;,&quot;19686e19-cb0f-4723-a6d0-5e1ac0d8450a&quot;,&quot;2026-01-24T08:40:58.655Z&quot;,&quot;o|t|u|1r|1s|15|m|o&quot;,&quot;4e38e2b5-bdb1-49be-be48-934422551612&quot;,&quot;2026-01-24T08:41:04.860Z&quot;,&quot;o|t|u|1u|1v|15|m|o&quot;,&quot;c8a2370e-eeb0-47b7-be35-aa8cce2d43f1&quot;,&quot;2026-01-24T08:41:09.273Z&quot;,&quot;o|t|u|1x|1y|15|m|o&quot;,&quot;bf48fc5c-80fd-4bf4-8c9a-bd8bf6544d19&quot;,&quot;0ef48515-25f1-4826-a2b8-ae46a20a6793&quot;,&quot;n|V9Cxqb2&quot;,&quot;o|i|20|21|l|m|1f|22|o&quot;,&quot;7d66f45c-1f56-407d-8b89-c40f33692191&quot;,&quot;2026-01-24T08:42:24.201Z&quot;,&quot;yarn run v1.22.22\r\nwarning package.json: License should be a valid SPDX license expression\r\n$ storybook dev -p 6006\r\n@storybook/core v8.6.15\r\n\r\nWARN The following packages are incompatible with Storybook 8.6.15 as they depend on different major versions of Storybook packages:\r\nWARN - @storybook/addon-essentials@8.6.14 (8.6.15 available!)\r\nWARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/essentials\r\nWARN - @storybook/addon-interactions@8.6.14 (8.6.15 available!)\r\nWARN  Repo: https://github.com/storybookjs/storybook/tree/next/code/addons/interactions\r\nWARN\r\nWARN\r\nWARN Please consider updating your packages or contacting the maintainers for compatibility details.\r\nWARN For more on Storybook 8 compatibility, see the linked GitHub issue:\r\nWARN https://github.com/storybookjs/storybook/issues/26031\r\ninfo =&gt; Starting manager..\r\ninfo =&gt; Starting preview..\r\ninfo Addon-docs: using MDX3\r\ninfo =&gt; Using implicit CSS loaders\r\ninfo =&gt; Using default Webpack5 setup\r\n&lt;i&gt; [webpack-dev-middleware] wait until bundle finished\r\n10% building 0/2 entries 5/6 dependencies 0/4 modulesinfo Using tsconfig paths for react-docgen\r\nERROR in ./stories/Dark.stories.tsx 10:24\r\nModule parse failed: Unexpected token (10:24)\r\nFile was processed with these loaders:\r\n * ./node_modules/@storybook/csf-plugin/dist/webpack-loader.js\r\n * ./node_modules/@storybook/builder-webpack5/dist/loaders/export-order-loader.js\r\nYou may need an additional loader to handle the result of these loaders.\r\n|   title: 'Dark',\r\n|   component: Man1Black,\r\n&gt;   decorators: [Story =&gt; &lt;div style={{\r\n|     width: 200,\r\n|     borderRadius: '8px',\r\n @ ./stories/ lazy ^\\.\\/.*$ include: (?%21.*node_modules)(?:[\\\\/]stories(?:[\\\\/](?%21\\.)(?:(?:(?%21(?:^%7C[\\\\/])\\.).)*?)[\\\\/]%7C[\\\\/]%7C$)(?%21\\.)(?=.)[^\\\\/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$ chunkName: [request] namespace object ./Dark.stories.tsx ./Dark.stories\r\n @ ./storybook-stories.js 10:11-14:5\r\n @ ./storybook-config-entry.js 7:0-50 28:31-39 35:2-38:4 37:31-39 35:58-38:3\r\n\r\nERROR in ./stories/Light.stories.tsx 10:24\r\nModule parse failed: Unexpected token (10:24)\r\nFile was processed with these loaders:\r\n * ./node_modules/@storybook/csf-plugin/dist/webpack-loader.js\r\n * ./node_modules/@storybook/builder-webpack5/dist/loaders/export-order-loader.js\r\nYou may need an additional loader to handle the result of these loaders.\r\n|   title: 'Light',\r\n|   component: Man1,\r\n&gt;   decorators: [Story =&gt; &lt;div style={{\r\n|     width: 200,\r\n|     borderRadius: '8px',\r\n @ ./stories/ lazy ^\\.\\/.*$ include: (?%21.*node_modules)(?:[\\\\/]stories(?:[\\\\/](?%21\\.)(?:(?:(?%21(?:^%7C[\\\\/])\\.).)*?)[\\\\/]%7C[\\\\/]%7C$)(?%21\\.)(?=.)[^\\\\/]*?\\.stories\\.(js%7Cjsx%7Cts%7Ctsx))$ chunkName: [request] namespace object ./Light.stories.tsx ./Light.stories\r\n @ ./storybook-stories.js 10:11-14:5\r\n @ ./storybook-config-entry.js 7:0-50 28:31-39 35:2-38:4 37:31-39 35:58-38:3\r\n\r\npreview compiled with 2 errors\r\n=&gt; Failed to build the preview\r\n99% end closing watch compilationWARN Force closed preview build\r\nSB_BUILDER-WEBPACK5_0003 (WebpackCompilationError): There were problems when compiling your code with Webpack.\r\nRun Storybook with --debug-webpack for more information.\r\n    at starter (.\\node_modules\\@storybook\\builder-webpack5\\dist\\index.js:1:24163)\r\n    at starter.next (&lt;anonymous&gt;)\r\n    at Module.start (.\\node_modules\\@storybook\\builder-webpack5\\dist\\index.js:1:26142)\r\n    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)\r\n    at async storybookDevServer (.\\node_modules\\@storybook\\core\\dist\\core-server\\index.cjs:36423:79)\r\n    at async buildOrThrow (.\\node_modules\\@storybook\\core\\dist\\core-server\\index.cjs:35049:12)\r\n    at async buildDevStandalone (.\\node_modules\\@storybook\\core\\dist\\core-server\\index.cjs:37628:78)\r\n    at async withTelemetry (.\\node_modules\\@storybook\\core\\dist\\core-server\\index.cjs:35788:12)\r\n    at async dev (.\\node_modules\\@storybook\\core\\dist\\cli\\bin\\index.cjs:5874:3)\r\n    at async s.&lt;anonymous&gt; (.\\node_modules\\@storybook\\core\\dist\\cli\\bin\\index.cjs:6052:74)\r\n\r\nWARN Broken build, fix the error above.\r\nWARN You may need to refresh the browser.\r\n\r\nerror Command failed with exit code 1.&quot;,&quot;o|t|u|24|25|26|m|o&quot;,&quot;0088f2ca-43b8-4e3b-ac14-c9f2427e4533&quot;,&quot;2026-01-24T08:42:40.496Z&quot;,&quot;o|t|u|28|29|15|m|o&quot;,&quot;930b90bf-1b59-4e53-8789-a2a230a6a160&quot;,&quot;2026-01-24T08:42:45.173Z&quot;,&quot;o|t|u|2B|2C|15|m|o&quot;,&quot;30a7b654-f4eb-4b5a-8de5-dffae28d50e2&quot;,&quot;2026-01-24T08:42:59.137Z&quot;,&quot;o|t|u|2E|2F|15|m|o&quot;,&quot;2f60f506-c20b-4e22-afb9-3655ea93107b&quot;,&quot;4ede475c-5d2c-4b6d-b6cf-af23fde9face&quot;,&quot;n|V9CyIJ6&quot;,&quot;o|i|2H|2I|l|m|22|2J|o&quot;,&quot;01d22ec4-2add-479b-8f1b-dc62c04a5f2c&quot;,&quot;2026-01-24T08:44:18.665Z&quot;,&quot;Now story book starts! But instead of rendering the svg components, it renders error. Rework how the svgs are exported to make this work.\n\nElement type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.\r\nThe component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:\r\n\r\nMissing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.\r\nMisconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.\r\nMissing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.\r\nError: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.\r\n    at createFiberFromTypeAndProps (http://localhost:6006/vendors-node_modules_react-dom_client_js.iframe.bundle.js:5030:28)\r\n    at createFiberFromElement (http://localhost:6006/vendors-node_modules_react-dom_client_js.iframe.bundle.js:5044:14)\r\n    at reconcileChildFibersImpl (http://localhost:6006/vendors-node_modules_react-dom_client_js.iframe.bundle.js:6929:31)\r\n    at http://localhost:6006/vendors-node_modules_react-dom_client_js.iframe.bundle.js:7107:33\r\n    at reconcileChildren (http://localhost:6006/vendors-node_modules_react-dom_client_js.iframe.bundle.js:9710:13)\r\n    at updateFunctionComponent (http://localhost:6006/vendors-node_modules_react-dom_client_js.iframe.bundle.js:10191:7)\r\n    at beginWork (http://localhost:6006/vendors-node_modules_react-dom_client_js.iframe.bundle.js:11787:18)\r\n    at runWithFiberInDEV (http://localhost:6006/vendors-node_modules_react-dom_client_js.iframe.bundle.js:881:30)\r\n    at performUnitOfWork (http://localhost:6006/vendors-node_modules_react-dom_client_js.iframe.bundle.js:17650:22)\r\n    at workLoopSync (http://localhost:6006/vendors-node_modules_react-dom_client_js.iframe.bundle.js:17478:41)&quot;,&quot;o|t|u|2L|2M|2N|m|o&quot;,&quot;d03bcda3-9215-4d70-aaac-2bbe486f6e7b&quot;,&quot;2026-01-24T08:44:22.711Z&quot;,&quot;o|t|u|2P|2Q|15|m|o&quot;,&quot;baa64d41-871b-404b-946f-803802268697&quot;,&quot;2026-01-24T08:44:33.787Z&quot;,&quot;o|t|u|2S|2T|15|m|o&quot;,&quot;81e898e4-27e5-4ee2-ab98-fb49d9b92e99&quot;,&quot;2026-01-24T08:44:36.349Z&quot;,&quot;o|t|u|2V|2W|15|m|o&quot;,&quot;1a46cf04-ff3f-4538-bc86-4cd04f3762e3&quot;,&quot;1f8cd8a6-0fd5-408f-94c3-f3385695d43b&quot;,&quot;n|V9Cyhe0&quot;,&quot;o|i|2Y|2Z|l|m|2J|2a|o&quot;,&quot;da3731dd-7faa-43bb-979b-546214e5cfa1&quot;,&quot;2026-01-24T08:45:22.898Z&quot;,&quot;instead of using the ReactComponent import syntax, can the imports be changed to use the default import way?&quot;,&quot;o|t|u|2c|2d|2e|m|o&quot;,&quot;c5828790-8850-41fe-9d94-abadc964b5b5&quot;,&quot;2026-01-24T08:45:57.067Z&quot;,&quot;o|t|u|2g|2h|15|m|o&quot;,&quot;c0730c16-75de-4bd5-9798-9054df7622f2&quot;,&quot;2026-01-24T08:46:06.170Z&quot;,&quot;o|t|u|2j|2k|15|m|o&quot;,&quot;21e366b1-090f-4efd-9089-652c3702a174&quot;,&quot;2026-01-24T08:46:09.192Z&quot;,&quot;o|t|u|2m|2n|15|m|o&quot;,&quot;e3c3ad1d-a654-4910-9889-e926f2bbe3d4&quot;,&quot;aadf86aa-cc62-4a26-8102-39409b773cf5&quot;,&quot;n|V9Cz63k&quot;,&quot;o|i|2p|2q|l|m|2a|2r|o&quot;,&quot;767dcd1d-a094-4d70-8f8b-5d16657237e6&quot;,&quot;2026-01-24T08:47:28.914Z&quot;,&quot;Update @/README.md to contain instructions how to use the repo and scripts all the way tot he point of releasing the npm package&quot;,&quot;o|t|u|2t|2u|2v|m|o&quot;,&quot;4c6ca4cb-50d9-4192-a55c-8a49615f6f79&quot;,&quot;2026-01-24T08:47:31.452Z&quot;,&quot;o|t|u|2x|2y|15|m|o&quot;,&quot;3a333f71-353b-4f2a-a300-1a16f10ac79f&quot;,&quot;2026-01-24T08:47:34.116Z&quot;,&quot;o|t|u|30|31|15|m|o&quot;,&quot;4b938a4d-28ad-402e-967c-342b3dbc3c7b&quot;,&quot;2026-01-24T08:47:57.431Z&quot;,&quot;o|t|u|33|34|15|m|o&quot;,&quot;28ac0299-a161-485e-b909-8dc89a1ef11a&quot;,&quot;cc453ea0-1eda-43df-97f7-2818529415cc&quot;,&quot;n|V9CzY1K&quot;,&quot;o|i|36|37|l|m|2r|38|o&quot;,&quot;de4bb82b-cc83-4b51-9b00-97f73e7273a4&quot;,&quot;2026-01-24T08:51:18.792Z&quot;,&quot;I want to add TypeScript type definitions to the `react-riichi-mahjong-tiles` npm package so that consumers who use TypeScript get proper type checking and autocomplete for the exported components (Man1, Pin5Dora, TonBlack, etc.).\n\nCurrently, the package is built from JavaScript source files (`src/index.js`) using Rollup, and the SVG files are transformed into React components via SVGR. The package exports all tile components as named exports.\n\nPlease help me:\n1. Add TypeScript declaration files (`.d.ts`) to the package\n2. Configure the build process to generate or include these type definitions\n3. Update `package.json` to reference the type definitions so TypeScript consumers can use them\n4. Ensure the types correctly represent that each exported component is a React SVG component\n\nThe goal is that when someone installs the package and imports components like `import { Man1, TonBlack } from 'react-riichi-mahjong-tiles'`, their TypeScript IDE will recognize these as valid React components with proper typing.&quot;,&quot;o|t|u|3A|3B|3C|m|o&quot;,&quot;33a65fd8-c671-4c8f-a0b7-dec48ee30671&quot;,&quot;2026-01-24T08:51:22.377Z&quot;,&quot;o|t|u|3E|3F|15|m|o&quot;,&quot;2ed50dc3-4be3-4793-8f93-a1dc9fffb861&quot;,&quot;2026-01-24T08:51:37.802Z&quot;,&quot;o|t|u|3H|3I|15|m|o&quot;,&quot;531e596e-ea41-4934-9286-5d6d0dd668af&quot;,&quot;2026-01-24T08:51:46.199Z&quot;,&quot;o|t|u|3K|3L|15|m|o&quot;,&quot;cb9d3ce9-fdc6-47ef-8d39-41279f602cac&quot;,&quot;2026-01-24T08:51:50.358Z&quot;,&quot;o|t|u|3N|3O|15|m|o&quot;,&quot;a63d0c43-fcd1-4810-9405-9486a839fff7&quot;,&quot;2026-01-24T08:52:06.366Z&quot;,&quot;o|t|u|3Q|3R|15|m|o&quot;,&quot;3b50579d-a7e1-4a61-81b6-192fa31d2b36&quot;,&quot;2026-01-24T08:52:09.491Z&quot;,&quot;o|t|u|3T|3U|15|m|o&quot;,&quot;c47f4bfe-9d0b-4b7c-a33e-2199464d37ce&quot;,&quot;2026-01-24T08:52:18.762Z&quot;,&quot;o|t|u|3W|3X|15|m|o&quot;,&quot;e7b7aa2d-2fe0-49c0-944a-c400a0edf682&quot;,&quot;2026-01-24T08:52:26.026Z&quot;,&quot;o|t|u|3Z|3a|15|m|o&quot;,&quot;2e342831-7788-4c40-9059-0c237e068555&quot;,&quot;2026-01-24T08:52:29.429Z&quot;,&quot;o|t|u|3c|3d|15|m|o&quot;,&quot;37dbaeca-4222-4b7f-9fd6-ce3bab863ec7&quot;,&quot;3627b32c-8dea-4e6f-b253-b53c6f647e8e&quot;,&quot;n|V9D0i7g&quot;,&quot;o|i|3f|3g|l|m|38|3h|o&quot;,&quot;d32c0ba7-eeab-4a06-8174-b604be098383&quot;,&quot;2026-01-24T08:55:08.758Z&quot;,&quot;I need to verify the build output of the `react-riichi-mahjong-tiles` package. Specifically:\n\n1. Check whether the `dist/` folder contains the SVG files from `src/svgs/white_tiles/` and `src/svgs/black_tiles/` directories\n2. Explain how the SVG files are processed during the build (are they bundled into the JavaScript files via SVGR, or copied as separate .svg files?)\n3. Verify that the current Rollup configuration correctly handles the SVG assets so they are available in the published npm package\n4. If the SVGs are not being included properly, explain what changes are needed to ensure consumers of the package can use all the tile components\n\nContext: The package uses SVGR to transform SVG files into React components during the Rollup build process. I want to confirm that the build output in `dist/` contains everything needed for the package to work when published to npm.&quot;,&quot;o|t|u|3j|3k|3l|m|o&quot;,&quot;3fc05534-d0f5-49c1-99f4-a4412eaa2f0f&quot;,&quot;2026-01-24T08:55:12.180Z&quot;,&quot;o|t|u|3n|3o|15|m|o&quot;,&quot;d6fd24b4-1514-40d4-abd5-63c4689f2925&quot;,&quot;2026-01-24T08:55:28.662Z&quot;,&quot;o|t|u|3q|3r|15|m|o&quot;,&quot;09c32f01-3c0e-4397-aa21-0e51d6b6abb4&quot;,&quot;2026-01-24T08:55:32.266Z&quot;,&quot;o|t|u|3t|3u|15|m|o&quot;,&quot;11324e1a-4518-4e7c-ad58-6e1baed500d1&quot;,&quot;2026-01-24T08:56:35.850Z&quot;,&quot;o|t|u|3w|3x|15|m|o&quot;,&quot;3c8659d8-ac41-48cc-afda-0c5864ebc102&quot;,&quot;2026-01-24T09:07:51.376Z&quot;,&quot;o|t|u|3z|40|15|m|o&quot;,&quot;e3241031-f64c-440a-8f58-fa7b68fd08cc&quot;,&quot;2026-01-24T09:08:37.594Z&quot;,&quot;o|t|u|42|43|15|m|o&quot;,&quot;b86ec99b-d148-4ab4-9aad-05940abf992f&quot;,&quot;f35ee0bb-d7a6-4598-941d-64fcf06c1ccc&quot;,&quot;n|V9D4zAK&quot;,&quot;o|i|45|46|l|m|3h|47|o&quot;,&quot;85b8f4e2-f1b5-4de1-8583-54e910a707e7&quot;,&quot;2026-01-24T09:12:07.306Z&quot;,&quot;I want to test the `react-riichi-mahjong-tiles` npm package locally before publishing it to npm, to ensure it works correctly for consumers. Specifically, I need to:\n\n1. Create a test React application (or use an existing one) that will act as a consumer of the package\n2. Install the local package build from the `dist/` folder into the test application without publishing to npm\n3. Import and use the tile components (e.g., `Man1`, `TonBlack`, `Pin5Dora`) in the test application\n4. Verify that:\n   - The components render correctly as SVG elements\n   - TypeScript autocomplete and type checking work properly (if using TypeScript)\n   - All props (width, height, className, style, etc.) are properly typed and functional\n   - Both CommonJS and ES module imports work as expected\n\nPlease provide step-by-step instructions for testing the package locally, including:\n- How to link or install the local package (using `npm link`, `yarn link`, or direct file path installation)\n- How to set up a minimal test application\n- Example code to verify the components work correctly\n- Any potential issues to watch out for when testing locally vs. the published package&quot;,&quot;o|t|u|49|4A|4B|m|o&quot;,&quot;7504fca3-ac12-4e9a-bc06-2bee0b532443&quot;,&quot;2026-01-24T09:12:11.150Z&quot;,&quot;o|t|u|4D|4E|15|m|o&quot;,&quot;7ba52cf1-9dc9-437d-abe3-1042b0686d14&quot;,&quot;2026-01-24T09:14:03.581Z&quot;,&quot;Can I create the react testing app inside this repo, so that it would be easily available for any other developer as well?&quot;,&quot;o|t|u|4G|4H|4I|m|o&quot;,&quot;e109836a-9d91-4917-80e7-5fa72b88576e&quot;,&quot;2026-01-24T09:14:10.451Z&quot;,&quot;o|t|u|4K|4L|15|m|o&quot;,&quot;7b482a24-4023-4524-99fc-3ac64d79e8c7&quot;,&quot;2026-01-24T09:15:20.816Z&quot;,&quot;o|t|u|4N|4O|15|m|o&quot;,&quot;c3a358f5-9392-40ef-b6d9-30dd0c33c44b&quot;,&quot;2026-01-24T09:16:02.989Z&quot;,&quot;o|t|u|4Q|4R|15|m|o&quot;,&quot;d0131b64-f42c-47eb-8817-a05702cb5796&quot;,&quot;2026-01-24T09:16:55.644Z&quot;,&quot;o|t|u|4T|4U|15|m|o&quot;,&quot;4c2c1a62-78e4-4f4a-ba64-a8151abd6ddc&quot;,&quot;e85478e8-9264-4441-acc1-671f31eb53f0&quot;,&quot;n|V9D70aK&quot;,&quot;o|i|4W|4X|l|m|47|4Y|o&quot;,&quot;bec0a7e9-1dab-4a19-8905-8c2224c4f9ea&quot;,&quot;2026-01-24T09:19:40.587Z&quot;,&quot;In the test app I get the following error from the components:\n\nTS2786: Man1 cannot be used as a JSX component.\r\nIts type MahjongTileComponent is not a valid JSX element type.\r\nType FunctionComponent&lt;SVGProps&lt;SVGSVGElement&gt;&gt; is not assignable to type\r\n(props: any, deprecatedLegacyContext?: any) =&gt; ReactNode\r\nType ReactNode | Promise&lt;ReactNode&gt; is not assignable to type ReactNode\r\nType bigint is not assignable to type ReactNode&quot;,&quot;o|t|u|4a|4b|4c|m|o&quot;,&quot;e1c63a01-7251-42b9-98b2-dfdc087becce&quot;,&quot;2026-01-24T09:19:44.943Z&quot;,&quot;o|t|u|4e|4f|15|m|o&quot;,&quot;4e65c4d4-7503-4e96-ad3b-22322b1fecb1&quot;,&quot;2026-01-24T09:20:39.193Z&quot;,&quot;o|t|u|4h|4i|15|m|o&quot;,&quot;9a88eb2b-a59f-4f1a-9053-9cb81df65f59&quot;,&quot;2026-01-24T09:21:55.825Z&quot;,&quot;o|t|u|4k|4l|15|m|o&quot;,&quot;25313196-aee2-4d12-9e1b-9d2476b32d7b&quot;,&quot;2026-01-24T09:22:48.025Z&quot;,&quot;o|t|u|4n|4o|15|m|o&quot;,&quot;68e30808-ce2c-4049-ba81-cad6e07b7c0e&quot;,&quot;49b24121-fbe5-4659-a06a-7eafabeda194&quot;,&quot;n|V9D8Vk5&quot;,&quot;o|i|4q|4r|l|m|4Y|4s|o&quot;,&quot;31398c1c-efb5-4eb0-8de9-c2207e1bbc0c&quot;,&quot;2026-01-24T09:27:56.424Z&quot;,&quot;Edit the test-app @/test-app/src/App.tsx so that the different steps 1-5 (rendering all of the svgs) have maximum width. On normal copmputer screen it could show then side by side with flexbox&quot;,&quot;o|t|u|4u|4v|4w|m|o&quot;,&quot;a8f8b60a-0fa4-4045-a120-ca20db731545&quot;,&quot;2026-01-24T09:27:59.125Z&quot;,&quot;o|t|u|4y|4z|15|m|o&quot;,&quot;be7f79a2-e971-4ade-8e47-c32c4f486eef&quot;,&quot;2026-01-24T09:28:59.041Z&quot;,&quot;o|t|u|51|52|15|m|o&quot;,&quot;9283be42-b308-4793-a057-1a6855658504&quot;,&quot;2026-01-24T09:29:36.105Z&quot;,&quot;o|t|u|54|55|15|m|o&quot;,&quot;eef46326-0ddb-48f8-bdcf-958ba5eabc19&quot;,&quot;18723ebd-235b-44d0-913e-b9f17e116203&quot;,&quot;n|V9DACnN&quot;,&quot;o|i|57|58|l|m|4s|59|o&quot;,&quot;ab1c6f53-2e93-47fc-8111-c5bba266c4c0&quot;,&quot;2026-01-24T09:34:04.134Z&quot;,&quot;I've noticed that when I run the `yarn build-lib` script to build the library, the `dist/` folder is not being cleaned/emptied before the new build runs. This means any old or stale files from previous builds remain in the `dist/` folder.\n\nQuestions:\n1. Is this the expected behavior for the current Rollup configuration, or should the `dist/` folder be cleaned before each build?\n2. If it should be cleaned, what's the best practice for adding a clean step to the build process? Should I:\n   - Add a Rollup plugin like `rollup-plugin-delete` or `rollup-plugin-clean`?\n   - Add a pre-build script in `package.json` that runs `rimraf dist` or similar before the Rollup build?\n   - Use some other approach?\n3. Are there any potential issues with stale files remaining in `dist/` when publishing the package to npm?\n\nPlease review the current `rollup.config.js` and `package.json` build configuration and recommend the best solution for ensuring a clean build output.&quot;,&quot;o|t|u|5B|5C|5D|m|o&quot;,&quot;a85c29f8-d160-4800-b8a3-9c5f243623bf&quot;,&quot;2026-01-24T09:34:07.459Z&quot;,&quot;o|t|u|5F|5G|15|m|o&quot;,&quot;25805532-2220-43b9-9f8f-64259f1ecae1&quot;,&quot;2026-01-24T09:35:12.144Z&quot;,&quot;yes&quot;,&quot;o|t|u|5I|5J|5K|m|o&quot;,&quot;dacf92a8-e071-46aa-8654-11b5f2188b7f&quot;,&quot;2026-01-24T09:35:22.016Z&quot;,&quot;o|t|u|5M|5N|15|m|o&quot;,&quot;9120fb51-c096-42b1-ba9b-40088afbf3ce&quot;,&quot;2026-01-24T09:36:09.555Z&quot;,&quot;o|t|u|5P|5Q|15|m|o&quot;,&quot;a|d|q|s|e&quot;,&quot;73a106e9-caab-484d-8ab5-548178d34296&quot;,&quot;o|5S|u|5T|15|m&quot;,&quot;f8546f10-3f38-4f84-a7f6-340b7a647135&quot;,&quot;85e95e09-ee16-4247-9f75-edc6cd9a58c5&quot;,&quot;n|V9DBpmk&quot;,&quot;o|i|5V|5W|l|m|59|5X|o&quot;,&quot;9a159662-b52f-44eb-a807-c4eee725a05b&quot;,&quot;2026-01-24T09:37:59.164Z&quot;,&quot;I have a question about the TypeScript type definitions in this project:\n\nWhen I run `yarn build-lib`, the `src/index.d.ts` file gets copied to `dist/index.d.ts` by the Rollup build process (via the `rollup-plugin-copy` plugin).\n\nMy question is: Is the **source file** `src/index.d.ts` automatically generated/updated from the actual component code in `src/`, or do I need to manually update `src/index.d.ts` whenever I add new tile components or make changes to the component structure?\n\nIf it needs to be updated manually, what's the process for keeping it in sync with the actual components?&quot;,&quot;o|t|u|5Z|5a|5b|m|o&quot;,&quot;a652162e-ee62-445d-b113-aae17793a433&quot;,&quot;2026-01-24T09:38:02.063Z&quot;,&quot;o|t|u|5d|5e|15|m|o&quot;,&quot;eb43578d-c5cb-4f71-a334-3bb9ee019a98&quot;,&quot;2026-01-24T09:39:28.485Z&quot;,&quot;Just update readme to include step about updating the type declarations. That should be enough as the svgs should not change&quot;,&quot;o|t|u|5g|5h|5i|m|o&quot;,&quot;29129125-d0d7-4b9d-8fa1-811ee4ae1ca3&quot;,&quot;2026-01-24T09:39:31.615Z&quot;,&quot;o|t|u|5k|5l|15|m|o&quot;,&quot;ba0bb66e-d8de-4ebb-bcc3-fb7c5728335a&quot;,&quot;2026-01-24T09:40:25.902Z&quot;,&quot;o|t|u|5n|5o|15|m|o&quot;,&quot;200e6476-6169-44a7-8930-199211457c79&quot;,&quot;c6b056d3-888b-4ee0-83c7-93265c8de20f&quot;,&quot;n|V9DCup9&quot;,&quot;o|i|5q|5r|l|m|5X|5s|o&quot;,&quot;4e2cb391-d335-4432-809f-1d2d8172c4b6&quot;,&quot;2026-01-24T09:43:30.848Z&quot;,&quot;In the file `test-app/src/App.tsx`, add three new sections to display the black variants of Man, Pin, and Sou tiles (similar to how the white/light variants are currently displayed in sections 1-3).\n\nRequirements:\n1. Add three new sections:\n   - Man Tiles (Dark) - displaying Man1Black through Man9Black plus Man5DoraBlack\n   - Pin Tiles (Dark) - displaying Pin1Black through Pin9Black plus Pin5DoraBlack\n   - Sou Tiles (Dark) - displaying Sou1Black through Sou9Black plus Sou5DoraBlack\n\n2. Ordering: Place these new sections so that all light/white tile sections (1-5) come first, followed by all black tile sections. The final order should be:\n   - Section 1: Man Tiles (light)\n   - Section 2: Pin Tiles (light)\n   - Section 3: Sou Tiles (light)\n   - Section 4: Honor Tiles (Light)\n   - Section 5: Honor Tiles (Dark)\n   - Section 6: Man Tiles (Dark) - NEW\n   - Section 7: Pin Tiles (Dark) - NEW\n   - Section 8: Sou Tiles (Dark) - NEW\n   - Then continue with the existing sections 6-10 (Custom Size Props, className Prop, etc.) - renumber these as needed\n\n3. Use the same `tileSectionStyle` and `tileContainerStyle` as the existing tile sections\n4. Include these new sections in the same flexbox container (`tileSectionsContainerStyle`) as sections 1-5\n5. Update section numbers accordingly throughout the file\n6. Make sure to import the black tile components at the top of the file if they're not already imported&quot;,&quot;o|t|u|5u|5v|5w|m|o&quot;,&quot;cd938011-355e-4aa2-aa2f-5eeeea241723&quot;,&quot;2026-01-24T09:43:33.726Z&quot;,&quot;o|t|u|5y|5z|15|m|o&quot;,&quot;e020de91-f457-41d0-a1c8-536f04eb33c4&quot;,&quot;2026-01-24T09:44:48.993Z&quot;,&quot;o|t|u|61|62|15|m|o&quot;,&quot;6e9e9dda-020d-4f2e-8568-e1cf245f1811&quot;,&quot;c56cadb8-12a4-40db-9c15-c4caa58502ce&quot;,&quot;n|V9DE2wN&quot;,&quot;o|i|64|65|l|m|5s|66|o&quot;,&quot;de26caa7-65f4-4c66-8f2b-f5ec73374bfe&quot;,&quot;2026-01-24T09:48:38.513Z&quot;,&quot;I've noticed rendering issues with three specific black tile variants: `Pin1Black`, `Pin2Black`, and `Sou1Black`. These tiles appear to have visual problems that the other black tiles don't have.\n\nI suspect the issue is related to CSS class naming conflicts within the SVG files themselves. Specifically, I believe:\n1. The black variant SVG files (`src/svgs/black_tiles/Pin1.svg`, `src/svgs/black_tiles/Pin2.svg`, `src/svgs/black_tiles/Sou1.svg`) may contain identical CSS class names to their white/light counterparts\n2. This class naming conflict was previously fixed in the light variants (`src/svgs/white_tiles/Pin1.svg`, `src/svgs/white_tiles/Pin2.svg`, `src/svgs/white_tiles/Sou1.svg`)\n3. The same fix was not applied to the black variants\n\nPlease:\n1. Compare the SVG source code of these three tiles between their light and black variants:\n   - `src/svgs/white_tiles/Pin1.svg` vs `src/svgs/black_tiles/Pin1.svg`\n   - `src/svgs/white_tiles/Pin2.svg` vs `src/svgs/black_tiles/Pin2.svg`\n   - `src/svgs/white_tiles/Sou1.svg` vs `src/svgs/black_tiles/Sou1.svg`\n2. Look specifically for CSS class name definitions (e.g., `class=\&quot;cls-1\&quot;`, `class=\&quot;cls-2\&quot;`, etc.) and `&lt;style&gt;` blocks within the SVG files\n3. Identify if the black variants have class naming conflicts that were already resolved in the light variants\n4. If conflicts are found, apply the same fixes from the light variants to the black variants to ensure unique class names&quot;,&quot;o|t|u|68|69|6A|m|o&quot;,&quot;2b397fa3-ea43-4f99-b95d-125d1ca6f7c2&quot;,&quot;2026-01-24T09:48:43.533Z&quot;,&quot;o|t|u|6C|6D|15|m|o&quot;,&quot;723be6e3-92c1-4aa2-b477-13839af8de8a&quot;,&quot;2026-01-24T09:51:19.126Z&quot;,&quot;o|t|u|6F|6G|15|m|o&quot;,&quot;8f848ccf-8b32-4840-a42c-0c7e55e3fe7d&quot;,&quot;8330f487-6373-41a8-9534-f0893b54f136&quot;,&quot;n|V9DFhmZ&quot;,&quot;o|i|6I|6J|l|m|66|6K|o&quot;,&quot;2fa5018d-f711-425e-b195-428e2a2dadf7&quot;,&quot;2026-01-24T09:55:05.873Z&quot;,&quot;I'm still experiencing the same rendering issues with the three black tile variants (`Pin1Black`, `Pin2Black`, and `Sou1Black`) even after the SVG ID conflicts were fixed by adding `_black` suffixes to the IDs in the black variant SVG files.\n\nTo verify the fix was applied correctly and troubleshoot further:\n\n1. First, confirm that the changes to the three SVG files (`src/svgs/black_tiles/Pin1.svg`, `src/svgs/black_tiles/Pin2.svg`, and `src/svgs/black_tiles/Sou1.svg`) were saved correctly by viewing the current content of these files.\n\n2. Since the library needs to be rebuilt for the changes to take effect, run `yarn build-lib` in the root directory to regenerate the distribution files with the updated SVG components.\n\n3. Then navigate to the test app and reinstall dependencies to pick up the rebuilt library: `cd test-app &amp;&amp; yarn install`\n\n4. Finally, run the test app with `yarn dev` to verify if the rendering issues are resolved.\n\nIf the issues persist after rebuilding, please:\n- Check if there are any other black tile variants (beyond Pin1, Pin2, and Sou1) that might have similar ID conflicts\n- Examine the browser's developer console for any errors\n- Inspect the rendered DOM to see if the ID conflicts still exist or if there are other issues\n\nWhat specific symptoms are you still seeing with these three tiles?&quot;,&quot;o|t|u|6M|6N|6O|m|o&quot;,&quot;d8d8e998-4311-492d-8d09-d08608c68b76&quot;,&quot;2026-01-24T09:55:11.215Z&quot;,&quot;o|t|u|6Q|6R|15|m|o&quot;,&quot;cf0fa672-2f0c-457c-8bcb-ab5e9d802288&quot;,&quot;2026-01-24T09:56:09.331Z&quot;,&quot;o|t|u|6T|6U|15|m|o&quot;,&quot;a|b|e|d&quot;,&quot;cfc146cc-a781-4989-a54e-1db4581a7b69&quot;,&quot;cancelled&quot;,&quot;agentic-turn-delimiter&quot;,&quot;o|6W|6X|6Y|6Z&quot;,&quot;54ccd5b3-7361-4dee-bdda-7d2b0b076dbd&quot;,&quot;2026-01-24T10:08:20.563Z&quot;,&quot;I am trying to publish with npm publish but got the following error\n\nnpm notice total files: 22\r\nnpm notice\r\nnpm notice Publishing to https://registry.npmjs.org/ with tag latest and default access\r\nnpm error code E403\r\nnpm error 403 403 Forbidden - PUT https://registry.npmjs.org/react-riichi-mahjong-tiles - Two-factor authentication or granular access token with bypass 2fa enabled is required to publish packages.\r\nnpm error 403 In most cases, you or one of your dependencies are requesting\r\nnpm error 403 a package version that is forbidden by your security policy, or\r\nnpm error 403 on a server you do not have access to.\r\nnpm error A complete log of this run can be found in: C:\\Users\\maija.heiskanen\\AppData\\Local\\npm-cache\\_logs\\2026-01-24T10_07_44_041Z-debug-0.log&quot;,&quot;o|t|u|6b|6c|6d|m|o&quot;,&quot;a|p|y|12|16|19|1D|1H|1K|1N|1Q|1T|1W|1Z|1c|1g|1k|1n|1q|1t|1w|1z|23|27|2A|2D|2G|2K|2O|2R|2U|2X|2b|2f|2i|2l|2o|2s|2w|2z|32|35|39|3D|3G|3J|3M|3P|3S|3V|3Y|3b|3e|3i|3m|3p|3s|3v|3y|41|44|48|4C|4F|4J|4M|4P|4S|4V|4Z|4d|4g|4j|4m|4p|4t|4x|50|53|56|5A|5E|5H|5L|5O|5R|5U|5Y|5c|5f|5j|5m|5p|5t|5x|60|63|67|6B|6E|6H|6L|6P|6S|6V|6a|6e&quot;,&quot;rich_text_json_repr&quot;,&quot;a|s|6g|e&quot;,&quot;type&quot;,&quot;content&quot;,&quot;a|6i|6j&quot;,&quot;doc&quot;,&quot;a|6i&quot;,&quot;paragraph&quot;,&quot;o|6m|6n&quot;,&quot;a|6o&quot;,&quot;o|6k|6l|6p&quot;,&quot;draft&quot;,&quot;o|6h|15|6q|6r&quot;,&quot;o|R|7|S|T|U|B|A|A|Y|Z|a|8|8|6f|6s&quot;,&quot;o|C|6t&quot;,&quot;o|6|7|8|9|A|B|6u&quot;],&quot;6v&quot;]" />
+      </map>
+    </option>
+  </component>
+</project>

package/.idea/codeStyles/Project.xml

@@ -0,0 +1,66 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <HTMLCodeStyleSettings>
+      <option name="HTML_SPACE_INSIDE_EMPTY_TAG" value="true" />
+    </HTMLCodeStyleSettings>
+    <JSCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </JSCodeStyleSettings>
+    <TypeScriptCodeStyleSettings version="0">
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="SPACE_BEFORE_FUNCTION_LEFT_PARENTH" value="false" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+      <option name="ENFORCE_TRAILING_COMMA" value="WhenMultiline" />
+      <option name="USE_EXPLICIT_JS_EXTENSION" value="ALWAYS_JS" />
+      <option name="SPACES_WITHIN_OBJECT_LITERAL_BRACES" value="true" />
+      <option name="SPACES_WITHIN_IMPORTS" value="true" />
+    </TypeScriptCodeStyleSettings>
+    <VueCodeStyleSettings>
+      <option name="INTERPOLATION_NEW_LINE_AFTER_START_DELIMITER" value="false" />
+      <option name="INTERPOLATION_NEW_LINE_BEFORE_END_DELIMITER" value="false" />
+    </VueCodeStyleSettings>
+    <codeStyleSettings language="HTML">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="CONTINUATION_INDENT_SIZE" value="4" />
+      </indentOptions>
+    </codeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="SOFT_MARGINS" value="80" />
+    </codeStyleSettings>
+    <codeStyleSettings language="SCSS">
+      <indentOptions>
+        <option name="INDENT_SIZE" value="4" />
+      </indentOptions>
+      <arrangement>
+        <rules>
+          <section>
+            <rule>
+              <match>
+                <NAME>.*</NAME>
+              </match>
+              <order>BY_NAME</order>
+            </rule>
+          </section>
+        </rules>
+      </arrangement>
+    </codeStyleSettings>
+    <codeStyleSettings language="TypeScript">
+      <option name="SOFT_MARGINS" value="80" />
+    </codeStyleSettings>
+    <codeStyleSettings language="Vue">
+      <option name="SOFT_MARGINS" value="80" />
+      <indentOptions>
+        <option name="INDENT_SIZE" value="4" />
+        <option name="TAB_SIZE" value="4" />
+      </indentOptions>
+    </codeStyleSettings>
+  </code_scheme>
+</component>

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

package/.idea/copilot.data.migration.agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/copilot.data.migration.ask2agent.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Ask2AgentMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/copilot.data.migration.edit.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="EditMigrationStateService">
+    <option name="migrationStatus" value="COMPLETED" />
+  </component>
+</project>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/react-riichi-mahjong-tiles.iml" filepath="$PROJECT_DIR$/.idea/react-riichi-mahjong-tiles.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/prettier.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="PrettierConfiguration">
+    <option name="myConfigurationMode" value="AUTOMATIC" />
+    <option name="myRunOnSave" value="true" />
+  </component>
+</project>

package/.idea/react-riichi-mahjong-tiles.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/README.md

@@ -1,3 +1,212 @@
-# React Riichi Mahjong tiles
+# React Riichi Mahjong Tiles
 
-`yarn add react-riichi-mahjong-tiles`
+Riichi Mahjong tiles as React SVG components. Includes all standard tiles in both light (white) and dark (black) variants.
+
+## Installation
+
+```bash
+yarn add react-riichi-mahjong-tiles
+# or
+npm install react-riichi-mahjong-tiles
+```
+
+## Usage
+
+```jsx
+import { Man1, Pin5Dora, TonBlack } from 'react-riichi-mahjong-tiles';
+
+function MyComponent() {
+    return (
+        <div>
+            <Man1 />
+            <Pin5Dora />
+            <TonBlack />
+        </div>
+    );
+}
+```
+
+## Available Tiles
+
+### Light (White) Tiles
+
+| Category         | Tiles                                                     |
+| ---------------- | --------------------------------------------------------- |
+| Man (Characters) | `Man1` - `Man9`, `Man5Dora`                               |
+| Pin (Circles)    | `Pin1` - `Pin9`, `Pin5Dora`                               |
+| Sou (Bamboo)     | `Sou1` - `Sou9`, `Sou5Dora`                               |
+| Winds            | `Ton` (East), `Nan` (South), `Shaa` (West), `Pei` (North) |
+| Dragons          | `Chun` (Red), `Haku` (White), `Hatsu` (Green)             |
+| Other            | `Blank`                                                   |
+
+### Dark (Black) Tiles
+
+All tiles above are also available with a `Black` suffix (e.g., `Man1Black`, `TonBlack`, `ChunBlack`).
+
+---
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+ (tested with Node.js 22)
+- Yarn package manager
+
+### Setup
+
+```bash
+# Clone the repository
+git clone https://github.com/MaijaHeiskanen/react-riichi-mahjong-tiles.git
+cd react-riichi-mahjong-tiles
+
+# Install dependencies
+yarn install
+```
+
+### Available Scripts
+
+| Script                 | Description                             |
+| ---------------------- | --------------------------------------- |
+| `yarn storybook`       | Start Storybook dev server on port 6006 |
+| `yarn build-storybook` | Build static Storybook for deployment   |
+| `yarn build-lib`       | Build the library for distribution      |
+
+### Adding New Tile Components
+
+When adding new SVG tile components, you need to update **two files**:
+
+1. **`src/index.js`** - Add the import/export for the new SVG:
+
+    ```javascript
+    export { default as NewTile } from './svgs/white_tiles/new_tile.svg';
+    ```
+
+2. **`src/index.d.ts`** - Add the corresponding TypeScript type declaration:
+    ```typescript
+    export const NewTile: MahjongTileComponent;
+    ```
+
+> **Note:** The type definitions in `src/index.d.ts` are manually maintained and must be kept in sync with the actual exports in `src/index.js`.
+
+### Running Storybook
+
+Storybook provides a visual preview of all tile components:
+
+```bash
+yarn storybook
+```
+
+Open http://localhost:6006 to view the component library.
+
+### Testing the Package Locally
+
+A test React app is included in the `test-app/` folder to verify the package works correctly before publishing:
+
+```bash
+# First, build the library
+yarn build-lib
+
+# Then install and run the test app
+cd test-app
+yarn install
+yarn dev
+```
+
+Open http://localhost:5173 to see all tile components in action. The test app imports the package using a local file reference and tests:
+
+- All tile categories (Man, Pin, Sou, Winds, Dragons)
+- Custom sizing with `width` and `height` props
+- Custom styling with `className` and `style` props
+- Event handlers like `onClick`
+- TypeScript type checking
+
+---
+
+## Publishing to npm
+
+### Prerequisites
+
+1. **npm account**: Create one at [npmjs.com/signup](https://www.npmjs.com/signup)
+2. **Authentication**: Log in from your terminal:
+    ```bash
+    npm login
+    ```
+3. **Permissions**: You must be the package owner or a collaborator
+
+### Step 1: Build the Library
+
+```bash
+yarn build-lib
+```
+
+This creates the distribution files in the `dist/` folder:
+
+- `dist/index.js` - CommonJS bundle
+- `dist/index.es.js` - ES module bundle
+
+### Step 2: Update Version
+
+Use semantic versioning to bump the version:
+
+```bash
+# Patch release (bug fixes): 1.0.0 → 1.0.1
+npm version patch
+
+# Minor release (new features): 1.0.0 → 1.1.0
+npm version minor
+
+# Major release (breaking changes): 1.0.0 → 2.0.0
+npm version major
+```
+
+### Step 3: Verify Package Contents
+
+Preview what will be published:
+
+```bash
+npm publish --dry-run
+```
+
+**Included in package:**
+
+- `dist/` (built library)
+- `package.json`
+- `README.md`
+- `LICENSE.md`
+
+**Excluded (via `.npmignore`):**
+
+- `.storybook/`
+- `stories/`
+- `src/`
+- `node_modules/`
+
+### Step 4: Publish
+
+```bash
+npm publish
+```
+
+### Step 5: Push to Git
+
+```bash
+git push && git push --tags
+```
+
+### Step 6: Verify
+
+```bash
+# Check the registry
+npm view react-riichi-mahjong-tiles
+
+# Test installation
+npx create-react-app test-app
+cd test-app
+npm install react-riichi-mahjong-tiles
+```
+
+---
+
+## License
+
+[CC BY 4.0](LICENSE.md) - Original SVG artwork by [FluffyStuff](https://github.com/FluffyStuff/riichi-mahjong-tiles)

package/dist/index.d.ts

@@ -0,0 +1,106 @@
+import { SVGProps } from 'react';
+
+/** SVG React component type for Mahjong tiles */
+export type MahjongTileComponent = (
+    props: SVGProps<SVGSVGElement>
+) => JSX.Element;
+
+// White tiles - Man (Characters)
+export const Man1: MahjongTileComponent;
+export const Man2: MahjongTileComponent;
+export const Man3: MahjongTileComponent;
+export const Man4: MahjongTileComponent;
+export const Man5: MahjongTileComponent;
+export const Man5Dora: MahjongTileComponent;
+export const Man6: MahjongTileComponent;
+export const Man7: MahjongTileComponent;
+export const Man8: MahjongTileComponent;
+export const Man9: MahjongTileComponent;
+
+// White tiles - Pin (Circles)
+export const Pin1: MahjongTileComponent;
+export const Pin2: MahjongTileComponent;
+export const Pin3: MahjongTileComponent;
+export const Pin4: MahjongTileComponent;
+export const Pin5: MahjongTileComponent;
+export const Pin5Dora: MahjongTileComponent;
+export const Pin6: MahjongTileComponent;
+export const Pin7: MahjongTileComponent;
+export const Pin8: MahjongTileComponent;
+export const Pin9: MahjongTileComponent;
+
+// White tiles - Sou (Bamboo)
+export const Sou1: MahjongTileComponent;
+export const Sou2: MahjongTileComponent;
+export const Sou3: MahjongTileComponent;
+export const Sou4: MahjongTileComponent;
+export const Sou5: MahjongTileComponent;
+export const Sou5Dora: MahjongTileComponent;
+export const Sou6: MahjongTileComponent;
+export const Sou7: MahjongTileComponent;
+export const Sou8: MahjongTileComponent;
+export const Sou9: MahjongTileComponent;
+
+// White tiles - Winds
+export const Ton: MahjongTileComponent;
+export const Nan: MahjongTileComponent;
+export const Shaa: MahjongTileComponent;
+export const Pei: MahjongTileComponent;
+
+// White tiles - Dragons
+export const Chun: MahjongTileComponent;
+export const Haku: MahjongTileComponent;
+export const Hatsu: MahjongTileComponent;
+
+// White tiles - Other
+export const Blank: MahjongTileComponent;
+
+// Black tiles - Man (Characters)
+export const Man1Black: MahjongTileComponent;
+export const Man2Black: MahjongTileComponent;
+export const Man3Black: MahjongTileComponent;
+export const Man4Black: MahjongTileComponent;
+export const Man5Black: MahjongTileComponent;
+export const Man5DoraBlack: MahjongTileComponent;
+export const Man6Black: MahjongTileComponent;
+export const Man7Black: MahjongTileComponent;
+export const Man8Black: MahjongTileComponent;
+export const Man9Black: MahjongTileComponent;
+
+// Black tiles - Pin (Circles)
+export const Pin1Black: MahjongTileComponent;
+export const Pin2Black: MahjongTileComponent;
+export const Pin3Black: MahjongTileComponent;
+export const Pin4Black: MahjongTileComponent;
+export const Pin5Black: MahjongTileComponent;
+export const Pin5DoraBlack: MahjongTileComponent;
+export const Pin6Black: MahjongTileComponent;
+export const Pin7Black: MahjongTileComponent;
+export const Pin8Black: MahjongTileComponent;
+export const Pin9Black: MahjongTileComponent;
+
+// Black tiles - Sou (Bamboo)
+export const Sou1Black: MahjongTileComponent;
+export const Sou2Black: MahjongTileComponent;
+export const Sou3Black: MahjongTileComponent;
+export const Sou4Black: MahjongTileComponent;
+export const Sou5Black: MahjongTileComponent;
+export const Sou5DoraBlack: MahjongTileComponent;
+export const Sou6Black: MahjongTileComponent;
+export const Sou7Black: MahjongTileComponent;
+export const Sou8Black: MahjongTileComponent;
+export const Sou9Black: MahjongTileComponent;
+
+// Black tiles - Winds
+export const TonBlack: MahjongTileComponent;
+export const NanBlack: MahjongTileComponent;
+export const ShaaBlack: MahjongTileComponent;
+export const PeiBlack: MahjongTileComponent;
+
+// Black tiles - Dragons
+export const ChunBlack: MahjongTileComponent;
+export const HakuBlack: MahjongTileComponent;
+export const HatsuBlack: MahjongTileComponent;
+
+// Black tiles - Other
+export const BlankBlack: MahjongTileComponent;