RELEASING: Releasing 1 package(s)

Releases: @warkypublic/oranguru@0.0.4 [skip ci]
docs(changeset): Eslint, fixes on container rendering
2025-10-22 13:17:46 +02:00 · 2025-10-22 13:17:42 +02:00 · 2025-10-22 08:32:38 +02:00 · 2025-10-22 08:32:36 +02:00
15 changed files with 322 additions and 258 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,5 +1,17 @@
 # @warkypublic/zustandsyncstore

+## 0.0.4
+
+### Patch Changes
+
+- 0f7cf52: Eslint, fixes on container rendering
+
+## 0.0.3
+
+### Patch Changes
+
+- 79e8f1e: Fixed peer deps
+
 ## 0.0.2

 ### Patch Changes
--- a/eslint.config.js
+++ b/eslint.config.js
@ -1,35 +0,0 @@
-// For more info, see https://github.com/storybookjs/eslint-plugin-storybook#configuration-flat-config-format
-import storybook from 'eslint-plugin-storybook';
-
-import js from '@eslint/js';
-import globals from 'globals';
-import reactHooks from 'eslint-plugin-react-hooks';
-import reactRefresh from 'eslint-plugin-react-refresh';
-import tseslint from 'typescript-eslint';
-import perfectionist from 'eslint-plugin-perfectionist';
-
-export default tseslint.config(
-  {
-    ignores: ['dist'],
-  },
-  [
-    {
-      files: ['**/*.{ts,tsx}'],
-      extends: [
-        js.configs.recommended,
-        tseslint.configs.recommended,
-        reactHooks.configs['recommended-latest'],
-        reactRefresh.configs.vite,
-        perfectionist.configs['recommended-alphabetical'],
-      ],
-      languageOptions: {
-        ecmaVersion: 2020,
-        globals: globals.browser,
-      },
-      rules: {
-        '@typescript-eslint/no-explicit-any': 'warn',
-      },
-    },
-  ],
-  storybook.configs['flat/recommended']
-);
--- a/eslint.config.ts
+++ b/eslint.config.ts
@ -0,0 +1,36 @@
+import js from '@eslint/js';
+import perfectionist from 'eslint-plugin-perfectionist';
+import pluginReact from 'eslint-plugin-react';
+//import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+const config = defineConfig([
+  {
+    extends: ['js/recommended'],
+    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+
+    languageOptions: { globals: globals.browser },
+    plugins: { js },
+  },
+  // reactHooks.configs['recommended-latest'],
+  {...reactRefresh.configs.vite, ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],},
+  tseslint.configs.recommended,
+  {
+    ...pluginReact.configs.flat.recommended,
+    ignores: ['**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    rules: {...pluginReact.configs.flat.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+    }
+  },
+  perfectionist.configs['recommended-alphabetical'],
+  {
+    rules: {
+      '@typescript-eslint/no-explicit-any': 'warn',
+    },
+  },
+]);
+
+export default config;
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "@warkypublic/oranguru",
  "author": "Warky Devs",
-  "version": "0.0.2",
+  "version": "0.0.4",
  "type": "module",
  "scripts": {
    "dev": "vite",
@ -38,7 +38,7 @@
        "default": "./dist/lib.cjs.js"
      },
      "./package.json": "./package.json",
-      "./oranguru.css": "./oranguru.css"
+      "./oranguru.css": "./dist/oranguru.css"
    }
  },
  "exports": {
@ -46,16 +46,13 @@
      "types": "./src/lib.ts",
      "default": "./src/lib.ts"
    },
-    "./oranguru.css": "./oranguru.css"
+    "./oranguru.css": "./src/oranguru.css"
  },
  "dependencies": {
    "moment": "^2.30.1"
  },
  "devDependencies": {
    "@changesets/cli": "^2.29.7",
-    "postcss": "^8.5.6",
-    "postcss-preset-mantine": "^1.18.0",
-    "postcss-simple-vars": "^7.0.1",
    "@eslint/js": "^9.38.0",
    "@storybook/react-vite": "^9.1.13",
    "@testing-library/jest-dom": "^6.9.1",
@ -69,12 +66,17 @@
    "eslint": "^9.38.0",
    "eslint-config-mantine": "^4.0.3",
    "eslint-plugin-perfectionist": "^4.15.1",
+    "eslint-plugin-react": "^7.37.5",
    "eslint-plugin-react-hooks": "^7.0.0",
    "eslint-plugin-react-refresh": "^0.4.24",
    "eslint-plugin-storybook": "^9.1.13",
    "global": "^4.4.0",
    "globals": "^16.4.0",
+    "jiti": "^2.6.1",
    "jsdom": "^27.0.1",
+    "postcss": "^8.5.6",
+    "postcss-preset-mantine": "^1.18.0",
+    "postcss-simple-vars": "^7.0.1",
    "prettier": "^3.6.2",
    "prettier-eslint": "^16.4.2",
    "react": "^19.2.0",
@ -88,18 +90,18 @@
    "vitest": "^3.2.4"
  },
  "peerDependencies": {
+    "@glideapps/glide-data-grid": "^6.0.3",
    "@mantine/core": "^8.3.1",
    "@mantine/hooks": "^8.3.1",
-    "@glideapps/glide-data-grid": "^6.0.3",
    "@mantine/notifications": "^8.3.5",
+    "@tabler/icons-react": "^3.35.0",
+    "@tanstack/react-query": "^5.90.5",
    "@warkypublic/artemis-kit": "^1.0.10",
    "@warkypublic/zustandsyncstore": "^0.0.4",
+    "immer": "^10.1.3",
    "react": ">= 19.0.0",
    "react-dom": ">= 19.0.0",
    "use-sync-external-store": ">= 1.4.0",
-    "@tabler/icons-react": "^3.35.0",
-    "@tanstack/react-query": "^5.90.5",
-    "immer": "^10.1.3",
    "zustand": ">= 5.0.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -53,7 +53,7 @@ importers:
        version: 9.38.0
      '@storybook/react-vite':
        specifier: ^9.1.13
-        version: 9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.50.2)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+        version: 9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.50.2)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      '@testing-library/jest-dom':
        specifier: ^6.9.1
        version: 6.9.1
@ -74,34 +74,40 @@ importers:
        version: 19.2.2(@types/react@19.2.2)
      '@typescript-eslint/parser':
        specifier: ^8.46.2
-        version: 8.46.2(eslint@9.38.0)(typescript@5.9.3)
+        version: 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
      '@vitejs/plugin-react-swc':
        specifier: ^4.1.0
-        version: 4.1.0(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+        version: 4.1.0(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      eslint:
        specifier: ^9.38.0
-        version: 9.38.0
+        version: 9.38.0(jiti@2.6.1)
      eslint-config-mantine:
        specifier: ^4.0.3
-        version: 4.0.3(@eslint/js@9.38.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@9.38.0))(eslint-plugin-react@7.37.5(eslint@9.38.0))(eslint@9.38.0)(typescript-eslint@8.46.2(eslint@9.38.0)(typescript@5.9.3))
+        version: 4.0.3(@eslint/js@9.38.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@9.38.0(jiti@2.6.1)))(eslint-plugin-react@7.37.5(eslint@9.38.0(jiti@2.6.1)))(eslint@9.38.0(jiti@2.6.1))(typescript-eslint@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))
      eslint-plugin-perfectionist:
        specifier: ^4.15.1
-        version: 4.15.1(eslint@9.38.0)(typescript@5.9.3)
+        version: 4.15.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint-plugin-react:
+        specifier: ^7.37.5
+        version: 7.37.5(eslint@9.38.0(jiti@2.6.1))
      eslint-plugin-react-hooks:
        specifier: ^7.0.0
-        version: 7.0.0(eslint@9.38.0)
+        version: 7.0.0(eslint@9.38.0(jiti@2.6.1))
      eslint-plugin-react-refresh:
        specifier: ^0.4.24
-        version: 0.4.24(eslint@9.38.0)
+        version: 0.4.24(eslint@9.38.0(jiti@2.6.1))
      eslint-plugin-storybook:
        specifier: ^9.1.13
-        version: 9.1.13(eslint@9.38.0)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3)
+        version: 9.1.13(eslint@9.38.0(jiti@2.6.1))(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3)
      global:
        specifier: ^4.4.0
        version: 4.4.0
      globals:
        specifier: ^16.4.0
        version: 16.4.0
+      jiti:
+        specifier: ^2.6.1
+        version: 2.6.1
      jsdom:
        specifier: ^27.0.1
        version: 27.0.1(postcss@8.5.6)
@ -128,25 +134,25 @@ importers:
        version: 19.2.0(react@19.2.0)
      storybook:
        specifier: ^9.1.13
-        version: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+        version: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      typescript:
        specifier: ~5.9.3
        version: 5.9.3
      typescript-eslint:
        specifier: ^8.46.2
-        version: 8.46.2(eslint@9.38.0)(typescript@5.9.3)
+        version: 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
      vite:
        specifier: ^7.1.11
-        version: 7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
+        version: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))
      vite-plugin-dts:
        specifier: ^4.5.4
-        version: 4.5.4(@types/node@24.9.1)(rollup@4.50.2)(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+        version: 4.5.4(@types/node@24.9.1)(rollup@4.50.2)(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      vite-tsconfig-paths:
        specifier: ^5.1.4
-        version: 5.1.4(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+        version: 5.1.4(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      vitest:
        specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.9.1)(jsdom@27.0.1(postcss@8.5.6))(sugarss@5.0.1(postcss@8.5.6))
+        version: 3.2.4(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(sugarss@5.0.1(postcss@8.5.6))

 packages:

@ -2328,6 +2334,10 @@ packages:
  jackspeak@3.4.3:
    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}

+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
  jju@1.4.0:
    resolution: {integrity: sha512-8wb9Yw966OSxApiCt0K3yNJL8pnNeIv+OEq2YMidz4FKP6nonSRoOXc80iXY4JaN2FC11B9qsNmDsm+ZOfMROA==}

@ -4008,9 +4018,9 @@ snapshots:
      eslint: 8.57.1
      eslint-visitor-keys: 3.4.3

-  '@eslint-community/eslint-utils@4.9.0(eslint@9.38.0)':
+  '@eslint-community/eslint-utils@4.9.0(eslint@9.38.0(jiti@2.6.1))':
    dependencies:
-      eslint: 9.38.0
+      eslint: 9.38.0(jiti@2.6.1)
      eslint-visitor-keys: 3.4.3

  '@eslint-community/regexpp@4.12.1': {}
@ -4155,12 +4165,12 @@ snapshots:
    dependencies:
      '@sinclair/typebox': 0.27.8

-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))':
    dependencies:
      glob: 10.4.5
      magic-string: 0.30.19
      react-docgen-typescript: 2.4.0(typescript@5.9.3)
-      vite: 7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))
    optionalDependencies:
      typescript: 5.9.3

@ -4442,53 +4452,53 @@ snapshots:

  '@sinclair/typebox@0.27.8': {}

-  '@storybook/builder-vite@9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))':
+  '@storybook/builder-vite@9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))':
    dependencies:
-      '@storybook/csf-plugin': 9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))
-      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+      '@storybook/csf-plugin': 9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))
+      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      ts-dedent: 2.2.0
-      vite: 7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))

-  '@storybook/csf-plugin@9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))':
+  '@storybook/csf-plugin@9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))':
    dependencies:
-      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      unplugin: 1.16.1

  '@storybook/global@5.0.0': {}

-  '@storybook/react-dom-shim@9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))':
+  '@storybook/react-dom-shim@9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))':
    dependencies:
      react: 19.2.0
      react-dom: 19.2.0(react@19.2.0)
-      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))

-  '@storybook/react-vite@9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.50.2)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))':
+  '@storybook/react-vite@9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(rollup@4.50.2)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))':
    dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      '@rollup/pluginutils': 5.3.0(rollup@4.50.2)
-      '@storybook/builder-vite': 9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
-      '@storybook/react': 9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3)
+      '@storybook/builder-vite': 9.1.13(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
+      '@storybook/react': 9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3)
      find-up: 7.0.0
      magic-string: 0.30.19
      react: 19.2.0
      react-docgen: 8.0.1
      react-dom: 19.2.0(react@19.2.0)
      resolve: 1.22.10
-      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      tsconfig-paths: 4.2.0
-      vite: 7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))
    transitivePeerDependencies:
      - rollup
      - supports-color
      - typescript

-  '@storybook/react@9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3)':
+  '@storybook/react@9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3)':
    dependencies:
      '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))
+      '@storybook/react-dom-shim': 9.1.13(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))
      react: 19.2.0
      react-dom: 19.2.0(react@19.2.0)
-      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
    optionalDependencies:
      typescript: 5.9.3

@ -4645,15 +4655,15 @@ snapshots:

  '@types/resolve@1.20.6': {}

-  '@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0)(typescript@5.9.3))(eslint@9.38.0)(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
      '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
      '@typescript-eslint/scope-manager': 8.46.2
-      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0)(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0)(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
      '@typescript-eslint/visitor-keys': 8.46.2
-      eslint: 9.38.0
+      eslint: 9.38.0(jiti@2.6.1)
      graphemer: 1.4.0
      ignore: 7.0.5
      natural-compare: 1.4.0
@ -4675,14 +4685,14 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/parser@8.46.2(eslint@9.38.0)(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
      '@typescript-eslint/scope-manager': 8.46.2
      '@typescript-eslint/types': 8.46.2
      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
      '@typescript-eslint/visitor-keys': 8.46.2
      debug: 4.4.3
-      eslint: 9.38.0
+      eslint: 9.38.0(jiti@2.6.1)
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color
@ -4728,13 +4738,13 @@ snapshots:
    dependencies:
      typescript: 5.9.3

-  '@typescript-eslint/type-utils@8.46.2(eslint@9.38.0)(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
      '@typescript-eslint/types': 8.46.2
      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
      debug: 4.4.3
-      eslint: 9.38.0
+      eslint: 9.38.0(jiti@2.6.1)
      ts-api-utils: 2.1.0(typescript@5.9.3)
      typescript: 5.9.3
    transitivePeerDependencies:
@ -4793,24 +4803,24 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/utils@8.43.0(eslint@9.38.0)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.43.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
      '@typescript-eslint/scope-manager': 8.43.0
      '@typescript-eslint/types': 8.43.0
      '@typescript-eslint/typescript-estree': 8.43.0(typescript@5.9.3)
-      eslint: 9.38.0
+      eslint: 9.38.0(jiti@2.6.1)
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color

-  '@typescript-eslint/utils@8.46.2(eslint@9.38.0)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)':
    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
      '@typescript-eslint/scope-manager': 8.46.2
      '@typescript-eslint/types': 8.46.2
      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      eslint: 9.38.0
+      eslint: 9.38.0(jiti@2.6.1)
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color
@ -4832,11 +4842,11 @@ snapshots:

  '@ungap/structured-clone@1.3.0': {}

-  '@vitejs/plugin-react-swc@4.1.0(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))':
+  '@vitejs/plugin-react-swc@4.1.0(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))':
    dependencies:
      '@rolldown/pluginutils': 1.0.0-beta.35
      '@swc/core': 1.13.5
-      vite: 7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))
    transitivePeerDependencies:
      - '@swc/helpers'

@ -4848,13 +4858,13 @@ snapshots:
      chai: 5.3.3
      tinyrainbow: 2.0.0

-  '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))':
+  '@vitest/mocker@3.2.4(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))':
    dependencies:
      '@vitest/spy': 3.2.4
      estree-walker: 3.0.3
      magic-string: 0.30.19
    optionalDependencies:
-      vite: 7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))

  '@vitest/pretty-format@3.2.4':
    dependencies:
@ -5481,15 +5491,15 @@ snapshots:

  escape-string-regexp@4.0.0: {}

-  eslint-config-mantine@4.0.3(@eslint/js@9.38.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@9.38.0))(eslint-plugin-react@7.37.5(eslint@9.38.0))(eslint@9.38.0)(typescript-eslint@8.46.2(eslint@9.38.0)(typescript@5.9.3)):
+  eslint-config-mantine@4.0.3(@eslint/js@9.38.0)(eslint-plugin-jsx-a11y@6.10.2(eslint@9.38.0(jiti@2.6.1)))(eslint-plugin-react@7.37.5(eslint@9.38.0(jiti@2.6.1)))(eslint@9.38.0(jiti@2.6.1))(typescript-eslint@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)):
    dependencies:
      '@eslint/js': 9.38.0
-      eslint: 9.38.0
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.38.0)
-      eslint-plugin-react: 7.37.5(eslint@9.38.0)
-      typescript-eslint: 8.46.2(eslint@9.38.0)(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
+      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.38.0(jiti@2.6.1))
+      eslint-plugin-react: 7.37.5(eslint@9.38.0(jiti@2.6.1))
+      typescript-eslint: 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)

-  eslint-plugin-jsx-a11y@6.10.2(eslint@9.38.0):
+  eslint-plugin-jsx-a11y@6.10.2(eslint@9.38.0(jiti@2.6.1)):
    dependencies:
      aria-query: 5.3.2
      array-includes: 3.1.9
@ -5499,7 +5509,7 @@ snapshots:
      axobject-query: 4.1.0
      damerau-levenshtein: 1.0.8
      emoji-regex: 9.2.2
-      eslint: 9.38.0
+      eslint: 9.38.0(jiti@2.6.1)
      hasown: 2.0.2
      jsx-ast-utils: 3.3.5
      language-tags: 1.0.9
@ -5508,32 +5518,32 @@ snapshots:
      safe-regex-test: 1.1.0
      string.prototype.includes: 2.0.1

-  eslint-plugin-perfectionist@4.15.1(eslint@9.38.0)(typescript@5.9.3):
+  eslint-plugin-perfectionist@4.15.1(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
    dependencies:
      '@typescript-eslint/types': 8.43.0
-      '@typescript-eslint/utils': 8.43.0(eslint@9.38.0)(typescript@5.9.3)
-      eslint: 9.38.0
+      '@typescript-eslint/utils': 8.43.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
      natural-orderby: 5.0.0
    transitivePeerDependencies:
      - supports-color
      - typescript

-  eslint-plugin-react-hooks@7.0.0(eslint@9.38.0):
+  eslint-plugin-react-hooks@7.0.0(eslint@9.38.0(jiti@2.6.1)):
    dependencies:
      '@babel/core': 7.28.4
      '@babel/parser': 7.28.4
-      eslint: 9.38.0
+      eslint: 9.38.0(jiti@2.6.1)
      hermes-parser: 0.25.1
      zod: 4.1.12
      zod-validation-error: 4.0.2(zod@4.1.12)
    transitivePeerDependencies:
      - supports-color

-  eslint-plugin-react-refresh@0.4.24(eslint@9.38.0):
+  eslint-plugin-react-refresh@0.4.24(eslint@9.38.0(jiti@2.6.1)):
    dependencies:
-      eslint: 9.38.0
+      eslint: 9.38.0(jiti@2.6.1)

-  eslint-plugin-react@7.37.5(eslint@9.38.0):
+  eslint-plugin-react@7.37.5(eslint@9.38.0(jiti@2.6.1)):
    dependencies:
      array-includes: 3.1.9
      array.prototype.findlast: 1.2.5
@ -5541,7 +5551,7 @@ snapshots:
      array.prototype.tosorted: 1.1.4
      doctrine: 2.1.0
      es-iterator-helpers: 1.2.1
-      eslint: 9.38.0
+      eslint: 9.38.0(jiti@2.6.1)
      estraverse: 5.3.0
      hasown: 2.0.2
      jsx-ast-utils: 3.3.5
@ -5555,11 +5565,11 @@ snapshots:
      string.prototype.matchall: 4.0.12
      string.prototype.repeat: 1.0.0

-  eslint-plugin-storybook@9.1.13(eslint@9.38.0)(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3):
+  eslint-plugin-storybook@9.1.13(eslint@9.38.0(jiti@2.6.1))(storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))))(typescript@5.9.3):
    dependencies:
-      '@typescript-eslint/utils': 8.43.0(eslint@9.38.0)(typescript@5.9.3)
-      eslint: 9.38.0
-      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+      '@typescript-eslint/utils': 8.43.0(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
+      storybook: 9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
    transitivePeerDependencies:
      - supports-color
      - typescript
@ -5621,9 +5631,9 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  eslint@9.38.0:
+  eslint@9.38.0(jiti@2.6.1):
    dependencies:
-      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0)
+      '@eslint-community/eslint-utils': 4.9.0(eslint@9.38.0(jiti@2.6.1))
      '@eslint-community/regexpp': 4.12.1
      '@eslint/config-array': 0.21.1
      '@eslint/config-helpers': 0.4.1
@ -5657,6 +5667,8 @@ snapshots:
      minimatch: 3.1.2
      natural-compare: 1.4.0
      optionator: 0.9.4
+    optionalDependencies:
+      jiti: 2.6.1
    transitivePeerDependencies:
      - supports-color

@ -6143,6 +6155,8 @@ snapshots:
    optionalDependencies:
      '@pkgjs/parseargs': 0.11.0

+  jiti@2.6.1: {}
+
  jju@1.4.0: {}

  js-tokens@4.0.0: {}
@ -6908,13 +6922,13 @@ snapshots:
      es-errors: 1.3.0
      internal-slot: 1.1.0

-  storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))):
+  storybook@9.1.13(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))):
    dependencies:
      '@storybook/global': 5.0.0
      '@testing-library/jest-dom': 6.9.1
      '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
      '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      '@vitest/spy': 3.2.4
      better-opn: 3.0.2
      esbuild: 0.25.9
@ -7148,13 +7162,13 @@ snapshots:
      possible-typed-array-names: 1.1.0
      reflect.getprototypeof: 1.0.10

-  typescript-eslint@8.46.2(eslint@9.38.0)(typescript@5.9.3):
+  typescript-eslint@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3):
    dependencies:
-      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0)(typescript@5.9.3))(eslint@9.38.0)(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0)(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.46.2(@typescript-eslint/parser@8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3))(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
      '@typescript-eslint/typescript-estree': 8.46.2(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0)(typescript@5.9.3)
-      eslint: 9.38.0
+      '@typescript-eslint/utils': 8.46.2(eslint@9.38.0(jiti@2.6.1))(typescript@5.9.3)
+      eslint: 9.38.0(jiti@2.6.1)
      typescript: 5.9.3
    transitivePeerDependencies:
      - supports-color
@ -7237,13 +7251,13 @@ snapshots:

  uuid@11.1.0: {}

-  vite-node@3.2.4(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)):
+  vite-node@3.2.4(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)):
    dependencies:
      cac: 6.7.14
      debug: 4.4.3
      es-module-lexer: 1.7.0
      pathe: 2.0.3
-      vite: 7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))
    transitivePeerDependencies:
      - '@types/node'
      - jiti
@ -7258,7 +7272,7 @@ snapshots:
      - tsx
      - yaml

-  vite-plugin-dts@4.5.4(@types/node@24.9.1)(rollup@4.50.2)(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))):
+  vite-plugin-dts@4.5.4(@types/node@24.9.1)(rollup@4.50.2)(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))):
    dependencies:
      '@microsoft/api-extractor': 7.52.13(@types/node@24.9.1)
      '@rollup/pluginutils': 5.3.0(rollup@4.50.2)
@ -7271,24 +7285,24 @@ snapshots:
      magic-string: 0.30.19
      typescript: 5.9.3
    optionalDependencies:
-      vite: 7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))
    transitivePeerDependencies:
      - '@types/node'
      - rollup
      - supports-color

-  vite-tsconfig-paths@5.1.4(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))):
+  vite-tsconfig-paths@5.1.4(typescript@5.9.3)(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))):
    dependencies:
      debug: 4.4.3
      globrex: 0.1.2
      tsconfck: 3.1.6(typescript@5.9.3)
    optionalDependencies:
-      vite: 7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))
    transitivePeerDependencies:
      - supports-color
      - typescript

-  vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)):
+  vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)):
    dependencies:
      esbuild: 0.25.9
      fdir: 6.5.0(picomatch@4.0.3)
@ -7299,13 +7313,14 @@ snapshots:
    optionalDependencies:
      '@types/node': 24.9.1
      fsevents: 2.3.3
+      jiti: 2.6.1
      sugarss: 5.0.1(postcss@8.5.6)

-  vitest@3.2.4(@types/node@24.9.1)(jsdom@27.0.1(postcss@8.5.6))(sugarss@5.0.1(postcss@8.5.6)):
+  vitest@3.2.4(@types/node@24.9.1)(jiti@2.6.1)(jsdom@27.0.1(postcss@8.5.6))(sugarss@5.0.1(postcss@8.5.6)):
    dependencies:
      '@types/chai': 5.2.2
      '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6)))
+      '@vitest/mocker': 3.2.4(vite@7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6)))
      '@vitest/pretty-format': 3.2.4
      '@vitest/runner': 3.2.4
      '@vitest/snapshot': 3.2.4
@ -7323,8 +7338,8 @@ snapshots:
      tinyglobby: 0.2.15
      tinypool: 1.1.1
      tinyrainbow: 2.0.0
-      vite: 7.1.11(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
-      vite-node: 3.2.4(@types/node@24.9.1)(sugarss@5.0.1(postcss@8.5.6))
+      vite: 7.1.11(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))
+      vite-node: 3.2.4(@types/node@24.9.1)(jiti@2.6.1)(sugarss@5.0.1(postcss@8.5.6))
      why-is-node-running: 2.3.0
    optionalDependencies:
      '@types/node': 24.9.1
--- a/src/Gridler/GridlerDataGrid.tsx
+++ b/src/Gridler/GridlerDataGrid.tsx
@ -6,7 +6,7 @@ import {
  type GridColumn,
 } from '@glideapps/glide-data-grid';
 import { Group, Stack } from '@mantine/core';
-import { useMergedRef } from '@mantine/hooks';
+import { useElementSize, useMergedRef } from '@mantine/hooks';
 import React from 'react';

 import { BottomBar } from './components/BottomBar';
@ -24,6 +24,8 @@ export const GridlerDataGrid = () => {
  const ref = React.useRef<DataEditorRef | null>(null);
  const refContextActivated = React.useRef<boolean>(false);

+  const { height, ref: refWrapper, width } = useElementSize();
+
  const {
    _gridSelection,
    focused,
@ -86,18 +88,16 @@ export const GridlerDataGrid = () => {
    setStateFN('_glideref', () => {
      return r ?? undefined;
    });
+
+    const ready = getState('ready');
+    const newReady = !!(r && mounted);
+    if (ready !== newReady) {
+      setState('ready', newReady);
+    }
  });

  const theme = useGridTheme();

-  if (!mounted) {
-    return (
-      <>
-        Loading...
-        <Computer />
-      </>
-    );
-  }
  return (
    <Stack
      align="stretch"
@ -115,7 +115,7 @@ export const GridlerDataGrid = () => {
          //Yes this is a litle hacky, but it works to prevent double context menu
          if (!refContextActivated.current) {
            refContextActivated.current = true;
-            onContextClick('other', e);
+            onContextClick('other', e as any);
            setTimeout(() => {
              refContextActivated.current = false;
            }, 100);
@ -123,100 +123,112 @@ export const GridlerDataGrid = () => {
        }}
      >
        {sections?.left}
-        <DataEditor
-          cellActivationBehavior="double-click"
-          //getCelrefMergedlContent={getCellContent}
-          columns={(renderColumns as Array<GridColumn>) ?? []}
-          columnSelect="none"
-          drawFocusRing
-          getCellContent={getCellContent}
-          getCellsForSelection={getCellsForSelection}
-          getRowThemeOverride={theme.getRowThemeOverride}
-          gridSelection={_gridSelection}
-          headerHeight={headerHeight ?? 32}
-          headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }}
-          onCellContextMenu={(cell, event) => {
-            event.preventDefault();
-            if (!refContextActivated.current) {
-              refContextActivated.current = true;
-              onContextClick('cell', event, cell[0], cell[1]);
-              setTimeout(() => {
-                refContextActivated.current = false;
-              }, 100);
-            }
+        <div
+          ref={refWrapper}
+          style={{
+            flexGrow: 2,
+            height: '100%',
+            minHeight: '80px',
+            width: '100%',
          }}
-          onCellEdited={onCellEdited}
-          onColumnMoved={onColumnMoved}
-          onColumnProposeMove={onColumnProposeMove}
-          onColumnResize={onColumnResize}
-          onGridSelectionChange={(selection) => {
-            let rows = CompactSelection.empty();
-            const currentSelection = getState('_gridSelection');
-            for (const r of selection.rows) {
-              rows = rows.hasIndex(r) ? rows : rows.add(r);
-            }
-            if (selectMode === 'row' && selection.current?.range) {
-              for (
-                let y = selection.current.range.y;
-                y < selection.current.range.y + selection.current.range.height;
-                y++
-              ) {
-                rows = rows.hasIndex(y) ? rows : rows.add(y);
+        >
+          {width && width > 0 && height && height > 0 && (
+            <DataEditor
+              cellActivationBehavior="double-click"
+              //getCelrefMergedlContent={getCellContent}
+              columns={(renderColumns as Array<GridColumn>) ?? []}
+              columnSelect="none"
+              drawFocusRing
+              getCellContent={getCellContent}
+              getCellsForSelection={getCellsForSelection}
+              getRowThemeOverride={theme.getRowThemeOverride}
+              gridSelection={_gridSelection}
+              headerHeight={headerHeight ?? 32}
+              headerIcons={{ sort: SortSprite, sortdown: SortDownSprite, sortup: SortUpSprite }}
+              height={(height ?? 400) - 4}
+              onCellContextMenu={(cell, event) => {
+                event.preventDefault();
+                if (!refContextActivated.current) {
+                  refContextActivated.current = true;
+                  onContextClick('cell', event, cell[0], cell[1]);
+                  setTimeout(() => {
+                    refContextActivated.current = false;
+                  }, 100);
+                }
+              }}
+              onCellEdited={onCellEdited}
+              onColumnMoved={onColumnMoved}
+              onColumnProposeMove={onColumnProposeMove}
+              onColumnResize={onColumnResize}
+              onGridSelectionChange={(selection) => {
+                let rows = CompactSelection.empty();
+                const currentSelection = getState('_gridSelection');
+                for (const r of selection.rows) {
+                  rows = rows.hasIndex(r) ? rows : rows.add(r);
+                }
+                if (selectMode === 'row' && selection.current?.range) {
+                  for (
+                    let y = selection.current.range.y;
+                    y < selection.current.range.y + selection.current.range.height;
+                    y++
+                  ) {
+                    rows = rows.hasIndex(y) ? rows : rows.add(y);
+                  }
+                }
+
+                if (
+                  JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) ||
+                  JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows) ||
+                  JSON.stringify(currentSelection?.current) !== JSON.stringify(selection.current)
+                ) {
+                  setState('_gridSelection', { ...selection, rows });
+                  if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
+                    setState('_gridSelectionRows', rows);
+                  }
+                }
+
+                //console.log('Selection', selection);
+              }}
+              onHeaderClicked={onHeaderClicked}
+              onHeaderContextMenu={(col, event) => {
+                event.preventDefault();
+                if (!refContextActivated.current) {
+                  refContextActivated.current = true;
+                  onContextClick('header', event as any, col);
+                  setTimeout(() => {
+                    refContextActivated.current = false;
+                  }, 100);
+                }
+              }}
+              onHeaderMenuClick={onHeaderMenuClick}
+              onItemHovered={onItemHovered}
+              onVisibleRegionChanged={onVisibleRegionChanged}
+              rangeSelect="multi-rect"
+              ref={refMerged as React.Ref<DataEditorRef>}
+              rightElement={
+                <Group>
+                  {sections?.rightElementStart}
+                  <RightMenuIcon />
+                  {sections?.rightElementEnd}
+                </Group>
              }
-            }
-
-            if (
-              JSON.stringify(currentSelection?.columns) !== JSON.stringify(selection.columns) ||
-              JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows) ||
-              JSON.stringify(currentSelection?.current) !== JSON.stringify(selection.current)
-            ) {
-              setState('_gridSelection', { ...selection, rows });
-              if (JSON.stringify(currentSelection?.rows) !== JSON.stringify(rows)) {
-                setState('_gridSelectionRows', rows);
-              }
-            }
-
-            //console.log('Selection', selection);
-          }}
-          onHeaderClicked={onHeaderClicked}
-          onHeaderContextMenu={(col, event) => {
-            event.preventDefault();
-            if (!refContextActivated.current) {
-              refContextActivated.current = true;
-              onContextClick('header', event, col);
-              setTimeout(() => {
-                refContextActivated.current = false;
-              }, 100);
-            }
-          }}
-          onHeaderMenuClick={onHeaderMenuClick}
-          onItemHovered={onItemHovered}
-          onVisibleRegionChanged={onVisibleRegionChanged}
-          rangeSelect="multi-rect"
-          ref={refMerged as any}
-          rightElement={
-            <Group>
-              {sections?.rightElementStart}
-              <RightMenuIcon />
-              {sections?.rightElementEnd}
-            </Group>
-          }
-          rowHeight={rowHeight ?? 22}
-          //rowMarkersCheckboxStyle='square'
-          //rowMarkersKind='both'
-          rowMarkers={{
-            checkboxStyle: 'square',
-            kind: 'both',
-          }}
-          rows={total_rows ?? 0}
-          rowSelect="multi"
-          rowSelectionMode="auto"
-          spanRangeBehavior="default"
-          theme={theme.gridTheme}
-          width="100%"
-          {...glideProps}
-        />
-
+              rowHeight={rowHeight ?? 22}
+              //rowMarkersCheckboxStyle='square'
+              //rowMarkersKind='both'
+              rowMarkers={{
+                checkboxStyle: 'square',
+                kind: 'both',
+              }}
+              rows={total_rows ?? 0}
+              rowSelect="multi"
+              rowSelectionMode="auto"
+              spanRangeBehavior="default"
+              theme={theme.gridTheme}
+              width={width ?? 200}
+              {...glideProps}
+            />
+          )}
+        </div>
        {/* </Portal> */}
        <Computer />
        {!hasLocalData && <Pager />}
--- a/src/Gridler/components/BottomBar.tsx
+++ b/src/Gridler/components/BottomBar.tsx
@ -1,3 +1,4 @@
+/* eslint-disable react/react-in-jsx-scope */
 import { useGridlerStore } from './GridlerStore';

 export function BottomBar() {
--- a/src/Gridler/components/Computer.tsx
+++ b/src/Gridler/components/Computer.tsx
@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import { CompactSelection } from '@glideapps/glide-data-grid';
 import React, { useEffect, useRef } from 'react';

@ -7,7 +6,7 @@ import { useGridlerStore } from './GridlerStore';
 //The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
 export const Computer = React.memo(() => {
  const refFirstRun = useRef(0);
-  const refLastFilters = useRef<any>(null);
+  const refLastFilters = useRef<unknown>(null);
  const {
    _glideref,
    _gridSelectionRows,
@ -19,6 +18,7 @@ export const Computer = React.memo(() => {
    columns,
    getState,
    loadPage,
+    ready,

    setState,
    setStateFN,
@ -34,6 +34,7 @@ export const Computer = React.memo(() => {
    columns: s.columns,
    getState: s.getState,
    loadPage: s.loadPage,
+    ready: s.ready,

    setState: s.setState,
    setStateFN: s.setStateFN,
@ -47,7 +48,7 @@ export const Computer = React.memo(() => {
      const pageSize = getState('pageSize');
      const keyField = getState('keyField') ?? 'id';
      const rowIndexes = [];
-      for (const vi in values as Array<any>) {
+      for (const vi in values as Array<Record<string, unknown>>) {
        let rowIndex = -1;
        const key = String(
          typeof values?.[vi] === 'object'
@ -232,7 +233,7 @@ export const Computer = React.memo(() => {
    }
    refFirstRun.current = 1;
    loadPage(0);
-  }, [_glideref]);
+  }, [ready, loadPage]);

  // console.log('Gridler:Debug:Computer', {
  //   colFilters,
@ -245,3 +246,5 @@ export const Computer = React.memo(() => {

  return <></>;
 });
+
+Computer.displayName = 'Gridler-Computer';
--- a/src/Gridler/components/GridlerStore.tsx
+++ b/src/Gridler/components/GridlerStore.tsx
@ -1,7 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react/react-in-jsx-scope */
 /* eslint-disable react-refresh/only-export-components */
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import {
  type CellArray,
+  type CellClickedEventArgs,
  CompactSelection,
  type DataEditorProps,
  type DataEditorRef,
@ -133,7 +136,7 @@ export interface GridlerState {
    selection: Rectangle,
    abortSignal: AbortSignal
  ) => CellArray | GetCellsThunk;
-  getRowBuffer: (row: number) => any;
+  getRowBuffer: (row: number) => Record<string, any>;
  getState: <K extends keyof GridlerStoreState>(key: K) => GridlerStoreState[K];

  hasLocalData: boolean;
@ -149,7 +152,7 @@ export interface GridlerState {
    colIndex: number,
    newSizeWithGrow: number
  ) => void;
-  onContextClick: (area: string, event: any, col?: number, row?: number) => void;
+  onContextClick: (area: string, event: CellClickedEventArgs, col?: number, row?: number) => void;
  onHeaderClicked: (colIndex: number, event: HeaderClickedEventArgs) => void;
  onHeaderMenuClick: (col: number, screenPosition: Rectangle) => void;
  onItemHovered: (args: GridMouseEventArgs) => void;
@ -166,6 +169,7 @@ export interface GridlerState {
  ) => void;

  pageSize: number;
+  ready: boolean;
  reload?: () => Promise<void>;
  renderColumns?: GridlerColumns;
  setState: <K extends keyof GridlerStoreState>(
@ -190,7 +194,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
    _page_data: {},
    _visibleArea: { height: 10000, width: 1000, x: 0, y: 0 },
    _visiblePages: { height: 0, width: 0, x: 0, y: 0 },
-    addError: (err: string, ...args: Array<any>) => {
+    addError: (err: string, ...args: Array<unknown>) => {
      const s = get();
      console.log('Gridler Error', s.uniqueid, err, args);
      set(
@ -205,7 +209,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
      const state = get();
      const [col, row] = cell;

-      const buffer = state.getRowBuffer(row);
+      const buffer = state.getRowBuffer(row) as Record<string, string> | undefined;

      if (buffer !== undefined) {
        return state.toCell(buffer, col);
@ -404,7 +408,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
      }
    },

-    onContextClick: (area: string, event: any, col?: number, row?: number) => {
+    onContextClick: (area: string, event: CellClickedEventArgs, col?: number, row?: number) => {
      const s = get();
      const coldef = s.renderColumns?.[col ?? -1];

@ -490,7 +494,9 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
          ) ??
          s.getMenuItems?.(area, s, col && row ? s.getRowBuffer(row) : undefined, coldef, items) ??
          items,
+        //@ts-expect-error Check bounds
        x: event.clientX ?? event.bounds?.x,
+        //@ts-expect-error Check bounds
        y: event.clientY ?? event.bounds?.y,
      });
    },
@ -681,8 +687,8 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
        }, 100)
      );
    },
-
    pageSize: 50,
+    ready: false,
    setState: (key, value) => {
      set(
        produce((state) => {
@ -695,7 +701,7 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat
        set(
          produce((state) => {
            if (typeof value === 'function') {
-              state[key] = (value as (value: any) => any)(state[key]);
+              state[key] = (value as (value: unknown) => unknown)(state[key]);
            } else {
              reject(new Error(`Not a function ${value}`));
              throw Error(`Not a function ${value}`);
@ -799,12 +805,13 @@ const { Provider, useStore: useGridlerStore } = createSyncStore<GridlerStoreStat

    /// logic to apply the selected row.
    useEffect(() => {
+      const ready = getState('ready');
      const ref = getState('_glideref');
      const keyField = getState('keyField') ?? 'id';
      const selectedRow = getState('selectedRow') ?? props.selectedRow;
      const askAPIRowNumber = getState('askAPIRowNumber');
      let rowIndex = -1;
-      if (selectedRow && ref) {
+      if (selectedRow && ref && ready) {
        const page_data = getState('_page_data');
        const pageSize = getState('pageSize');
        for (const p in page_data) {
--- a/src/Gridler/components/Pager.tsx
+++ b/src/Gridler/components/Pager.tsx
@ -63,3 +63,5 @@ export const Pager = React.memo(() => {

  return <></>;
 });
+
+Pager.displayName = 'Gridler-Pager';
--- a/src/Gridler/components/RightMenuIcon.tsx
+++ b/src/Gridler/components/RightMenuIcon.tsx
@ -14,7 +14,7 @@ export function RightMenuIcon() {
      loading={loadingData}
      mr="xs"
      mt="2px"
-      onClick={(e) => onContextClick('menu', e)}
+      onClick={(e) => onContextClick('menu', e as any)}
      variant="subtle"
    >
      <IconMenu2 />
--- a/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx
+++ b/src/Gridler/components/adaptors/GlidlerAPIAdaptorForGoLangv2.tsx
@ -143,3 +143,5 @@ export const GlidlerAPIAdaptorForGoLangv2 = React.memo((props: APIOptions) => {

  return <></>;
 });
+
+GlidlerAPIAdaptorForGoLangv2.displayName = 'Gridler-GlidlerAPIAdaptorForGoLangv2';
--- a/src/Gridler/components/adaptors/GlidlerLocalDataAdaptor.tsx
+++ b/src/Gridler/components/adaptors/GlidlerLocalDataAdaptor.tsx
@ -27,3 +27,5 @@ export const GlidlerLocalDataAdaptor = React.memo((props: GlidlerLocalDataAdapto

  return <></>;
 });
+
+GlidlerLocalDataAdaptor.displayName = 'Gridler-GlidlerLocalDataAdaptor';
--- a/src/Gridler/stories/Examples.goapi.tsx
+++ b/src/Gridler/stories/Examples.goapi.tsx
@ -45,7 +45,7 @@ export const GridlerGoAPIExampleEventlog = () => {
  ];

  return (
-    <Stack h="60vh">
+    <Stack h="80vh">
      <h2>Demo Using Go API Adaptor</h2>
      <TextInput label="API Url" onChange={(e) => setApiUrl(e.target.value)} value={apiUrl} />
      <TextInput label="API Key" onChange={(e) => setApiKey(e.target.value)} value={apiKey} />
--- a/src/Gridler/stories/Gridler.localdata.stories.tsx
+++ b/src/Gridler/stories/Gridler.localdata.stories.tsx
@ -6,7 +6,12 @@ import { fn } from 'storybook/test';
 import { GridlerLocaldataExampleEventlog } from './Examples.localdata';

 const Renderable = (props: any) => {
-  return <Box h="100%" mih="400px" miw="400px" w='100%' > <GridlerLocaldataExampleEventlog {...props} /></Box>;
+  return (
+    <Box h="100%" mih="400px" miw="400px" w="100%">
+      {' '}
+      <GridlerLocaldataExampleEventlog {...props} />
+    </Box>
+  );
 };

 const meta = {
Author	SHA1	Message	Date
Hein	d0911d842a	RELEASING: Releasing 1 package(s) Releases: @warkypublic/oranguru@0.0.4 [skip ci]	2025-10-22 13:17:46 +02:00
Hein	0f7cf52432	docs(changeset): Eslint, fixes on container rendering	2025-10-22 13:17:42 +02:00
Hein	2f0db1f0e3	RELEASING: Releasing 1 package(s) Releases: @warkypublic/oranguru@0.0.3 [skip ci]	2025-10-22 08:32:38 +02:00
Hein	79e8f1eace	docs(changeset): Fixed peer deps	2025-10-22 08:32:36 +02:00