Merge pull request #60 from chris-kruining/renovate/actions-checkout-5.x

Update resource Microsoft.App/containerApps to 2025-01-01

.dockerignore

@@ -0,0 +1,17 @@
+# Hidden files
+.coverage
+.github
+.git
+.gitignore
+.vscode
+
+# Folders
+examples
+node_modules
+infrastructure
+docs
+
+# Files
+GitVersion.yml
+README.md
+renovate.json

.github/workflows/app.yml

@@ -27,28 +27,27 @@ jobs:
       semver: ${{ steps.gitversion.outputs.SemVer }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           fetch-depth: 0
       - name: Install GitVersion
-        uses: gittools/actions/gitversion/setup@v3.0.3
+        uses: gittools/actions/gitversion/setup@v4.1.0
         with:
-          versionSpec: "5.x"
+          versionSpec: "6.x"
       - name: Determine Version
         id: gitversion
-        uses: gittools/actions/gitversion/execute@v3.0.3
-        with:
-          useConfigFile: true
+        uses: gittools/actions/gitversion/execute@v4.1.0
 
   build_and_publish:
     name: Build & Publish
     runs-on: ubuntu-latest
     needs: versionize
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
 
       - name: Build container images
         run: |
+          echo 'SESSION_SECRET=${{ secrets.SESSION_PASSWORD }}' > .env
           docker build . --file Dockerfile --tag ${{ secrets.ACR_LOGIN_SERVER }}/$IMAGE_NAME:${{needs.versionize.outputs.semver}}
           docker build . --file Dockerfile --tag ${{ secrets.ACR_LOGIN_SERVER }}/$IMAGE_NAME:latest
 
@@ -72,7 +71,7 @@ jobs:
       matrix:
         environment: [ 'prd' ]
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           sparse-checkout: |
             infrastructure
@@ -85,13 +84,13 @@ jobs:
           subscription-id: ${{ secrets.CALQUE_PRD_SUBSCRIPTION_ID }}
 
       - name: Deploy bicep
-        uses: Azure/cli@v2
+        uses: azure/cli@v2
         with:
-          azcliversion: 2.66.0
-          inlineScript: |
-            az deployment sub create \
-              --location westeurope \
-              --template-file infrastructure/main.bicep \
-              --parameters infrastructure/params/${{ matrix.environment }}.bicepparam \
-              --parameters version=${{needs.versionize.outputs.semver}} \
-              --parameters registryUrl=${{ secrets.ACR_LOGIN_SERVER }}
+          azcliversion: 2.75.0
+          inlineScript: >-
+            az deployment sub create
+            --location westeurope
+            --template-file infrastructure/main.bicep
+            --parameters infrastructure/params/${{ matrix.environment }}.bicepparam
+            --parameters version=${{needs.versionize.outputs.semver}}
+            --parameters registryUrl=${{ secrets.ACR_LOGIN_SERVER }}

Dockerfile

@@ -1,34 +1,35 @@
-FROM oven/bun:1 AS base
+FROM docker.io/imbios/bun-node:latest-23-alpine AS base
 WORKDIR /usr/src/app
 
 FROM base AS install
 RUN mkdir -p /temp/dev
-COPY package.json bun.lockb /temp/dev
+COPY package.json bun.lock /temp/dev
+COPY patches/ /temp/dev/patches/
 RUN cd /temp/dev && bun install --frozen-lockfile
 
 RUN mkdir -p /temp/prod
-COPY package.json bun.lockb /temp/prod/
+COPY package.json bun.lock /temp/prod/
+COPY patches/ /temp/prod/patches/
 RUN cd /temp/prod && bun install --frozen-lockfile --production
 
 FROM base AS prerelease
 COPY --from=install /temp/dev/node_modules node_modules
 COPY . .
-RUN echo "SESSION_SECRET=$(head -c 64 /dev/random | base64)" > .env
 
 ENV NODE_ENV=production
 ENV SERVER_PRESET=bun
-RUN bun test
 RUN chmod +x node_modules/.bin/*
-RUN bun run build
+RUN bun run test:ci
+RUN bun --bun run build
 
 FROM base AS release
 COPY --from=install /temp/prod/node_modules node_modules
 COPY --from=prerelease /usr/src/app/.env .
-COPY --from=prerelease /usr/src/app/bun.lockb .
+COPY --from=prerelease /usr/src/app/bun.lock .
 COPY --from=prerelease /usr/src/app/package.json .
 COPY --from=prerelease /usr/src/app/.vinxi .vinxi
 COPY --from=prerelease /usr/src/app/.output .output
 
 USER bun
 EXPOSE 3000
-ENTRYPOINT [ "bun", "run", "start" ]
+ENTRYPOINT [ "bun", "--bun", "run", "start" ]

GitVersion.yml

@@ -1,20 +0,0 @@
-assembly-versioning-scheme: MajorMinorPatch
-assembly-file-versioning-scheme: MajorMinorPatchTag
-assembly-informational-format: "{InformationalVersion}"
-mode: Mainline
-tag-prefix: "[vV]"
-continuous-delivery-fallback-tag: ci
-major-version-bump-message: '\+semver:\s?(breaking|major)'
-minor-version-bump-message: '\+semver:\s?(feature|minor)'
-patch-version-bump-message: '\+semver:\s?(fix|patch)'
-no-bump-message: '\+semver:\s?(none|skip)'
-legacy-semver-padding: 4
-build-metadata-padding: 4
-commits-since-version-source-padding: 4
-commit-message-incrementing: Enabled
-branches: {}
-ignore:
-  sha: []
-increment: Inherit
-commit-date-format: yyyy-MM-dd
-merge-message-formats: {}

README.md

@@ -1,32 +1,15 @@
-# SolidStart
+# Calque
 
-Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
+Domain name ideas:
 
-## Creating a project
+- calque.tools
+- calque.cloud
+- calque.studio
 
-```bash
-# create a new project in the current directory
-npm init solid@latest
+Or maybe change the name of the app...
 
-# create a new project in my-app
-npm init solid@latest my-app
-```
+Ideas suggested so far:
 
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-Solid apps are built with _presets_, which optimise your project for deployment to different environments.
-
-By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.
-
-## This project was created with the [Solid CLI](https://solid-cli.netlify.app)
+- Rosetta
+- g11n
+- Glyphs

app.config.ts

@@ -1,72 +1,32 @@
 import { defineConfig } from '@solidjs/start/config';
-import solidSvg from 'vite-plugin-solid-svg'
-// import { VitePWA } from 'vite-plugin-pwa'
+import solidSvg from 'vite-plugin-solid-svg';
+import devtools from 'solid-devtools/vite';
 
 export default defineConfig({
     vite: {
+        resolve: {
+            alias: [
+                { find: '@', replacement: 'F:\\Github\\calque\\node_modules\\' },
+            ],
+        },
         html: {
             cspNonce: 'KAAS_IS_AWESOME',
         },
+        // css: {
+        //     postcss: {
+        //     },
+        // },
         plugins: [
-            solidSvg()
-            // VitePWA({
-            //     strategies: 'injectManifest',
-            //     registerType: 'autoUpdate',
-            //     injectRegister: false,
-
-            //     workbox: {
-            //         globPatterns: ['**/*.{js,css,html,svg,png,svg,ico}'],
-            //         cleanupOutdatedCaches: true,
-            //         clientsClaim: true,
-            //     },
-            //     injectManifest: {
-            //         globPatterns: ['**/*.{js,css,html,svg,png,svg,ico}'],
-            //     },
-
-            //     manifest: {
-            //         name: 'Calque - manage your i18n files',
-            //         short_name: 'KAAS',
-            //         description: 'Simple tool for maitaining i18n files',
-            //         icons: [
-            //             {
-            //                 src: '/images/favicon.dark.svg',
-            //                 type: 'image/svg+xml',
-            //                 sizes: 'any'
-            //             }
-            //         ],
-            //         display_override: ['window-controls-overlay'],
-            //         screenshots: [
-            //             {
-            //                 src: '/images/screenshots/narrow.png',
-            //                 type: 'image/png',
-            //                 sizes: '538x1133',
-            //                 form_factor: 'narrow'
-            //             },
-            //             {
-            //                 src: '/images/screenshots/wide.png',
-            //                 type: 'image/png',
-            //                 sizes: '2092x1295',
-            //                 form_factor: 'wide'
-            //             }
-            //         ],
-            //         file_handlers: [
-            //             {
-            //                 action: '/edit',
-            //                 accept: {
-            //                     'text/*': [
-            //                         '.json'
-            //                     ]
-            //                 }
-            //             }
-            //         ]
-            //     },
-
-            //     devOptions: {
-            //         enabled: true,
-            //         type: 'module',
-            //         navigateFallback: 'index.html',
-            //     },
-            // }),
+            devtools({
+                autoname: true,
+            }),
+            solidSvg(),
+            {
+                name: 'temp',
+                configResolved(config) {
+                    console.log(config.resolve.alias);
+                },
+            }
         ],
     },
     solid: {

bunfig.toml

@@ -1,5 +1,6 @@
 [test]
 coverage = true
+coverageSkipTestFiles = true
 coverageReporter = ['text', 'lcov']
 coverageDir = './.coverage'
 preload = "./test.config.ts"

infrastructure/app.bicep

@@ -9,7 +9,7 @@ param registryUrl string
 
 var appName = 'app'
 
-resource environment 'Microsoft.App/managedEnvironments@2024-03-01' = {
+resource environment 'Microsoft.App/managedEnvironments@2025-01-01' = {
   name: 'cea-${context.locationAbbreviation}-${context.environment}-${context.projectName}'
   location: context.location
   properties: {
@@ -29,7 +29,7 @@ resource environment 'Microsoft.App/managedEnvironments@2024-03-01' = {
   }
 }
 
-resource app 'Microsoft.App/containerApps@2024-03-01' = {
+resource app 'Microsoft.App/containerApps@2025-01-01' = {
   name: 'ca-${context.locationAbbreviation}-${context.environment}-${context.projectName}-app'
   location: context.location
   identity: {

infrastructure/main.bicep

@@ -19,7 +19,7 @@ var context = {
   deployedAt: deployedAt
 }
 
-resource calqueResourceGroup 'Microsoft.Resources/resourceGroups@2024-07-01' = {
+resource calqueResourceGroup 'Microsoft.Resources/resourceGroups@2025-04-01' = {
   name: 'rg-${locationAbbreviation}-${environment}-${projectName}'
   location: location
 }

infrastructure/registry.bicep

@@ -4,7 +4,7 @@ targetScope = 'resourceGroup'
 
 param context Context
 
-resource registry 'Microsoft.ContainerRegistry/registries@2023-07-01' = {
+resource registry 'Microsoft.ContainerRegistry/registries@2025-04-01' = {
   name: 'acr${context.locationAbbreviation}${context.environment}${context.projectName}'
   location: context.location
   sku: {

package.json

@@ -1,39 +1,66 @@
 {
   "name": "calque",
+  "type": "module",
+  "engines": {
+    "node": ">=18",
+    "bun": ">=1"
+  },
   "dependencies": {
+    "@solid-primitives/clipboard": "^1.6.2",
+    "@solid-primitives/destructure": "^0.2.2",
+    "@solid-primitives/i18n": "^2.2.1",
+    "@solid-primitives/scheduled": "^1.5.2",
+    "@solid-primitives/selection": "^0.1.3",
+    "@solid-primitives/storage": "^4.3.3",
+    "@solid-primitives/timer": "^1.4.2",
     "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.1",
-    "@solidjs/start": "^1.0.10",
-    "dexie": "^4.0.10",
+    "@solidjs/router": "^0.15.3",
+    "@solidjs/start": "^1.1.7",
+    "dexie": "^4.0.11",
+    "flag-icons": "^7.5.0",
     "iterator-helpers-polyfill": "^3.0.1",
+    "rehype-parse": "^9.0.1",
+    "rehype-remark": "^10.0.1",
+    "rehype-stringify": "^10.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
+    "remark-stringify": "^11.0.0",
     "sitemap": "^8.0.0",
     "solid-icons": "^1.1.0",
-    "solid-js": "^1.9.3",
-    "ts-pattern": "^5.5.0",
-    "vinxi": "^0.4.3"
+    "solid-js": "^1.9.7",
+    "ts-pattern": "^5.7.1",
+    "unified": "^11.0.5",
+    "unist-util-find": "^3.0.0",
+    "unist-util-visit": "^5.0.0",
+    "vinxi": "^0.5.8"
   },
-  "engines": {
-    "node": ">=18"
+  "devDependencies": {
+    "@happy-dom/global-registrator": "^18.0.1",
+    "@sinonjs/fake-timers": "^14.0.0",
+    "@solidjs/testing-library": "^0.8.10",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/sinonjs__fake-timers": "^8.1.5",
+    "@types/wicg-file-system-access": "^2023.10.6",
+    "@vitest/coverage-istanbul": "3.2.4",
+    "@vitest/coverage-v8": "3.2.4",
+    "bun-types": "^1.2.19",
+    "jsdom": "^26.1.0",
+    "solid-devtools": "^0.34.3",
+    "vite-plugin-solid": "^2.11.7",
+    "vite-plugin-solid-svg": "^0.8.1",
+    "vitest": "^3.2.4",
+    "workbox-window": "^7.3.0"
   },
   "scripts": {
     "dev": "vinxi dev",
     "build": "vinxi build",
     "start": "vinxi start",
-    "version": "vinxi version"
+    "version": "vinxi version",
+    "test": "vitest --coverage",
+    "test:ci": "vitest run"
   },
-  "type": "module",
-  "devDependencies": {
-    "@happy-dom/global-registrator": "^15.11.7",
-    "@sinonjs/fake-timers": "^13.0.5",
-    "@solidjs/testing-library": "^0.8.10",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/sinonjs__fake-timers": "^8.1.5",
-    "@types/wicg-file-system-access": "^2023.10.5",
-    "bun-types": "^1.1.38",
-    "jsdom": "^25.0.1",
-    "vite-plugin-pwa": "^0.21.1",
-    "vite-plugin-solid-svg": "^0.8.1",
-    "workbox-window": "^7.3.0"
+  "patchedDependencies": {
+    "@tanstack/directive-functions-plugin@1.119.2": "patches/@tanstack%2Fdirective-functions-plugin@1.119.2.patch"
   }
 }

patches/@tanstack%2Fdirective-functions-plugin@1.119.2.patch

@@ -0,0 +1,14 @@
+diff --git a/dist/esm/index.js b/dist/esm/index.js
+index 813fa63450583316c537cadd46db0c6fce055ac7..205b03d0ae77bfe3ee93f42b0e3d4b5f453502ec 100644
+--- a/dist/esm/index.js
++++ b/dist/esm/index.js
+@@ -13,6 +13,9 @@ function TanStackDirectiveFunctionsPlugin(opts) {
+       ROOT = config.root;
+     },
+     transform(code, id) {
++      if (id.startsWith('/@')) {
++        id = `@/${id.slice(2)}`;
++      }
+       var _a;
+       const url = pathToFileURL(id);
+       url.searchParams.delete("v");

src/app.css

@@ -2,19 +2,19 @@
   --hue: 182.77deg;
   --accent-ofset: 180;
 
-  --primary-100: oklch(from var(--primary-500) .95 c h);
-  --primary-300: oklch(from var(--primary-500) .9 c h);
-  --primary-500: light-dark(oklch(.7503 0.117 var(--hue)), oklch(.8549 0.1149 var(--hue)));
-  --primary-600: oklch(from var(--primary-500) .7 c h);
-  --primary-700: oklch(from var(--primary-500) .6 c h);
-  --primary-900: oklch(from var(--primary-500) .35 calc(c + .15) h);
+  --primary-100: oklch(from var(--primary-500) .35 c h);
+  --primary-300: oklch(from var(--primary-500) .6 c h);
+  --primary-500: light-dark(oklch(.7 0.117 var(--hue)), oklch(.7 0.1149 var(--hue)));
+  --primary-600: oklch(from var(--primary-500) .85 c h);
+  --primary-700: oklch(from var(--primary-500) .9 c h);
+  --primary-900: oklch(from var(--primary-500) .95 calc(c + .15) h);
 
-  --secondary-100: oklch(from var(--primary-500) .95 c calc(h + var(--accent-ofset)));
-  --secondary-300: oklch(from var(--primary-500) .9 c calc(h + var(--accent-ofset)));
-  --secondary-500: oklch(from var(--primary-500) .85 c calc(h + var(--accent-ofset)));
-  --secondary-600: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
-  --secondary-700: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
-  --secondary-900: oklch(from var(--primary-500) .35 calc(c + .15) calc(h + var(--accent-ofset)));
+  --secondary-100: oklch(from var(--primary-500) .35 c calc(h + var(--accent-ofset)));
+  --secondary-300: oklch(from var(--primary-500) .6 c calc(h + var(--accent-ofset)));
+  --secondary-500: oklch(from var(--primary-500) .7 c calc(h + var(--accent-ofset)));
+  --secondary-600: oklch(from var(--primary-500) .85 c calc(h + var(--accent-ofset)));
+  --secondary-700: oklch(from var(--primary-500) .9 c calc(h + var(--accent-ofset)));
+  --secondary-900: oklch(from var(--primary-500) .95 calc(c + .15) calc(h + var(--accent-ofset)));
 
   --surface-300: light-dark(oklch(from var(--primary-500) .9 .02 h), oklch(from var(--primary-500) .2 .02 h));
   --surface-400: oklch(from var(--surface-300) calc(l + .025) c h);
@@ -22,25 +22,33 @@
   --surface-600: oklch(from var(--surface-500) calc(l + .025) c h);
   --surface-700: oklch(from var(--surface-600) calc(l + .025) c h);
 
-  --text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h));
-  --text-2: oklch(from var(--text-1) calc(l + .1) c h);
-
   --info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249));
   --fail: light-dark(oklch(.64 .21 25.3), oklch(.64 .21 25.3));
   --warn: light-dark(oklch(.82 .18 78.9), oklch(.82 .18 78.9));
   --succ: light-dark(oklch(.86 .28 150), oklch(.86 .28 150));
 
-  --radii-s: .125em;
-  --radii-m: .25em;
-  --radii-l: .5em;
-  --radii-xl: 1em;
+  --text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h));
+  --text-2: oklch(from var(--text-1) calc(l + .1) c h);
 
+  --text-lighter: 100;
+  --text-light: 300;
+  --text-normal: 500;
+  --text-bold: 700;
+  --text-bolder: 900;
+
+  --text-xs: .7rem;
   --text-s: .8rem;
   --text-m: 1rem;
   --text-l: 1.25rem;
   --text-xl: 1.6rem;
   --text-xxl: 2rem;
 
+  --radii-s: .125em;
+  --radii-m: .25em;
+  --radii-l: .5em;
+  --radii-xl: 1em;
+
+  --padding-xs: .125em;
   --padding-s: .25em;
   --padding-m: .5em;
   --padding-l: .75em;
@@ -144,6 +152,65 @@ code {
   border-radius: var(--radii-m);
 }
 
+ins {
+  background-color: oklch(from var(--succ) l c h / .1);
+  color: oklch(from var(--succ) .1 .2 h);
+}
+
+del {
+  background-color: oklch(from var(--fail) l c h / .1);
+  color: oklch(from var(--fail) .1 .2 h);
+}
+
+blockquote {
+  position: relative;
+  padding: var(--padding-m);
+  padding-inline-start: calc(.5em + var(--padding-m));
+
+  &::before {
+    content: '';
+    display: block;
+
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    inline-size: .5em;
+    block-size: 100%;
+    background-color: var(--primary-600);
+  }
+}
+
+kbd {
+  display: inline-block;
+  background-color: var(--surface-600);
+  border-radius: var(--radii-m);
+  border: 1px solid var(--surface-500);
+  box-shadow:
+    0 1px 1px rgba(0, 0, 0, 0.2),
+    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+  color: var(--text-2);
+  font-size: var(--text-xs);
+  line-height: 1;
+  padding: var(--padding-xs) var(--padding-s);
+  white-space: nowrap;
+}
+
+samp {
+  display: inline-block;
+}
+
+[contenteditable][data-placeholder]:not(:focus):empty::before {
+  content: attr(data-placeholder);
+  color: oklch(from var(--text-2) l c h / .6)
+}
+
+@supports ((scrollbar-width: auto) and (scrollbar-width: auto)) {
+  :root {
+    scrollbar-color: var(--surface-300) transparent;
+    scrollbar-width: auto;
+  }
+}
+
 @property --hue {
   syntax: '<angle>';
   inherits: false;

src/app.tsx

@@ -2,8 +2,9 @@ import { MetaProvider } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Suspense } from "solid-js";
+import { ThemeProvider } from "./features/theme";
+import { I18nProvider } from "./features/i18n";
 import "./app.css";
-import { ThemeProvider } from "./components/colorschemepicker";
 
 export default function App() {
   return (
@@ -11,9 +12,11 @@ export default function App() {
       root={props => (
         <MetaProvider>
           <ThemeProvider>
-            <Suspense>{props.children}</Suspense>
+            <I18nProvider>
+              <Suspense>{props.children}</Suspense>
+            </I18nProvider>
           </ThemeProvider>
-        </MetaProvider>
+        </ MetaProvider>
       )}
     >
       <FileRoutes />

src/components/colorschemepicker.module.css

@@ -1,29 +0,0 @@
-.picker {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-    background-color: inherit;
-    border: 1px solid transparent;
-    border-radius: var(--radii-m);
-    padding: var(--padding-s);
-
-    & select {
-        border: none;
-        background-color: inherit;
-        border-radius: var(--radii-m);
-
-        &:focus {
-            outline: none;
-        }
-    }
-
-    &:has(:focus-visible) {
-        border-color: var(--info);
-    }
-}
-
-.hue {
-    display: flex;
-    flex-flow: row;
-    align-items: center;
-}

src/components/colorschemepicker.spec.tsx

@@ -1,15 +0,0 @@
-import { describe, it, expect } from 'bun:test';
-import { render } from "@solidjs/testing-library"
-import { ColorSchemePicker } from "./colorschemepicker";
-
-// describe('<ColorSchemePicker />', () => {
-//     it('should render', async () => {
-//         const { getByLabelText } = render(() => <ColorSchemePicker />);
-
-//         const kaas = getByLabelText('Color scheme picker');
-
-//         console.log(kaas);
-
-//         expect(true).toBe(true);
-//     });
-// });

src/components/dropdown/index.module.css

@@ -0,0 +1,95 @@
+.box {
+    display: contents;
+
+    &:has(> :popover-open) > .button {
+        background-color: var(--surface-500);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
+
+.button {
+    position: relative;
+    display: grid;
+    grid-template-columns: inherit;
+    place-items: center start;
+
+    /* Make sure the height of the button does not collapse when it is empty */
+    block-size: 1em;
+    box-sizing: content-box;
+
+    padding: var(--padding-m);
+    background-color: transparent;
+    border: none;
+    border-radius: var(--radii-m);
+    font-size: 1rem;
+
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--surface-700);
+    }
+
+    &:has(> .caret) {
+        padding-inline-end: calc(1em + (2 * var(--padding-m)));
+    }
+
+    & > .caret {
+        position: absolute;
+        inset-inline-end: var(--padding-m);
+        inset-block-start: 50%;
+        translate: 0 -50%;
+        inline-size: 1em;
+    }
+}
+
+.dialog {
+    display: none;
+    position: relative;
+    grid-template-columns: inherit;
+
+    inset-inline-start: anchor(start);
+    inset-block-start: anchor(end);
+    position-try-fallbacks: flip-block, flip-inline;
+
+    /* inline-size: anchor-size(self-inline); */
+    background-color: var(--surface-500);
+    padding: var(--padding-m);
+    border: none;
+    box-shadow: var(--shadow-2);
+
+    &:popover-open {
+        display: grid;
+    }
+
+    & > header {
+        display: grid;
+        grid-column: 1 / -1;
+
+        gap: var(--padding-s);
+    }
+
+    & > main {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        row-gap: var(--padding-s);
+    }
+}
+
+.option {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    place-items: center start;
+
+    border-radius: var(--radii-m);
+    padding: var(--padding-s);
+    margin-inline: calc(-1 * var(--padding-s));
+
+    cursor: pointer;
+
+    &.selected {
+        background-color: oklch(from var(--info) l c h / .1);
+    }
+}

src/components/dropdown/index.tsx

@@ -0,0 +1,52 @@
+import { createMemo, createSignal, For, JSX, Setter, createEffect, Show, ParentProps, children } from "solid-js";
+import { FaSolidAngleDown } from "solid-icons/fa";
+import css from './index.module.css';
+
+export interface DropdownApi {
+    show(): void;
+    hide(): void;
+}
+
+interface DropdownProps {
+    api?: (api: DropdownApi) => any,
+    id: string;
+    class?: string;
+    open?: boolean;
+    showCaret?: boolean;
+    text: JSX.Element;
+    children: JSX.Element;
+}
+
+export function Dropdown(props: DropdownProps) {
+    const [dialog, setDialog] = createSignal<HTMLDialogElement>();
+    const [open, setOpen] = createSignal<boolean>(props.open ?? false);
+
+    createEffect(() => {
+        dialog()?.[open() ? 'showPopover' : 'hidePopover']();
+    });
+
+    createEffect(() => {
+        props.api?.({
+            show() {
+                dialog()?.showPopover();
+            },
+            hide() {
+                dialog()?.hidePopover();
+            },
+        });
+    });
+
+    return <section class={`${css.box} ${props.class}`}>
+        <button id={`${props.id}_button`} popoverTarget={`${props.id}_dialog`} class={css.button}>
+            {props.text}
+
+            <Show when={props.showCaret}>
+                <FaSolidAngleDown class={css.caret} />
+            </Show>
+        </button>
+
+        <dialog ref={setDialog} id={`${props.id}_dialog`} anchor={`${props.id}_button`} popover class={css.dialog} onToggle={e => setOpen(e.newState === 'open')}>
+            {props.children}
+        </dialog>
+    </section>;
+}

src/components/error/error.module.css

@@ -0,0 +1,16 @@
+.error {
+    display: grid;
+    place-content: center;
+
+    background: repeating-linear-gradient(-45deg,
+            color(from var(--fail) xyz x y z / .05),
+            color(from var(--fail) xyz x y z / .05) 10px,
+            color(from var(--fail) xyz x y z / .25) 10px,
+            color(from var(--fail) xyz x y z / .25) 12px,
+            color(from var(--fail) xyz x y z / .05) 12px);
+    color: var(--text-2);
+    border: 1px solid var(--fail);
+    border-radius: var(--radii-m);
+
+    margin: var(--padding-l);
+}

src/components/error/error.tsx

@@ -0,0 +1,16 @@
+import { Component, Show } from "solid-js";
+import css from './error.module.css';
+
+export const ErrorComp: Component<{ error: Error }> = (props) => {
+    return <div class={css.error}>
+        <b>{props.error.message}</b>
+
+        <Show when={props.error.cause}>{
+            cause => <>{cause().description}</>
+        }</Show>
+
+        {props.error.stack}
+
+        <a href="/">Return to start</a>
+    </div>;
+};

src/components/error/index.tsx

@@ -0,0 +1 @@
+export { ErrorComp } from './error';

src/components/filetree.tsx

@@ -1,101 +0,0 @@
-import { Accessor, Component, createContext, createSignal, For, JSX, Show, useContext } from "solid-js";
-import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
-import { SelectionProvider, selectable } from "~/features/selectable";
-import css from "./filetree.module.css";
-import { debounce } from "~/utilities";
-
-selectable;
-
-export interface FileEntry {
-    name: string;
-    id: string;
-    kind: 'file';
-    handle: FileSystemFileHandle;
-    directory: FileSystemDirectoryHandle;
-    meta: File;
-}
-
-export interface FolderEntry {
-    name: string;
-    id: string;
-    kind: 'folder';
-    handle: FileSystemDirectoryHandle;
-    entries: Entry[];
-}
-
-export type Entry = FileEntry | FolderEntry;
-
-export const emptyFolder: FolderEntry = { name: '', id: '', kind: 'folder', entries: [], handle: undefined as unknown as FileSystemDirectoryHandle } as const;
-
-export async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [], depth = 0): AsyncGenerator<Entry, void, never> {
-    if (depth === 10) {
-        return;
-    }
-
-    for await (const handle of directory.values()) {
-        if (filters.some(f => f.test(handle.name))) {
-            continue;
-        }
-
-        const id = await handle.getUniqueId();
-
-        if (handle.kind === 'file') {
-            yield { name: handle.name, id, handle, kind: 'file', meta: await handle.getFile(), directory };
-        }
-        else {
-            yield { name: handle.name, id, handle, kind: 'folder', entries: await Array.fromAsync(walk(handle, filters, depth + 1)) };
-        }
-    }
-}
-
-interface TreeContextType {
-    open(file: File): void;
-}
-
-const TreeContext = createContext<TreeContextType>();
-
-export const Tree: Component<{ entries: Entry[], children: readonly [(folder: Accessor<FolderEntry>) => JSX.Element, (file: Accessor<FileEntry>) => JSX.Element], open?: TreeContextType['open'] }> = (props) => {
-    const [, setSelection] = createSignal<object[]>([]);
-
-    const context = {
-        open: props.open ?? (() => { }),
-    };
-
-    return <SelectionProvider selection={setSelection}>
-        <TreeContext.Provider value={context}>
-            <div class={css.root}><_Tree entries={props.entries} children={props.children} /></div>
-        </TreeContext.Provider>
-    </SelectionProvider>;
-}
-
-const _Tree: Component<{ entries: Entry[], children: readonly [(folder: Accessor<FolderEntry>) => JSX.Element, (file: Accessor<FileEntry>) => JSX.Element] }> = (props) => {
-    const context = useContext(TreeContext);
-
-    return <For each={props.entries.sort(sort_by('kind'))}>{
-        entry => <>
-            <Show when={entry.kind === 'folder' ? entry : undefined}>{
-                folder => <Folder folder={folder()} children={props.children} />
-            }</Show>
-
-            <Show when={entry.kind === 'file' ? entry : undefined}>{
-                file => <span use:selectable={{ value: file() }} ondblclick={() => context?.open(file().meta)}><AiFillFile /> {props.children[1](file)}</span>
-            }</Show>
-        </>
-    }</For>
-}
-
-const Folder: Component<{ folder: FolderEntry, children: readonly [(folder: Accessor<FolderEntry>) => JSX.Element, (file: Accessor<FileEntry>) => JSX.Element] }> = (props) => {
-    const [open, setOpen] = createSignal(true);
-
-    return <details open={open()} ontoggle={() => debounce(() => setOpen(o => !o), 1)}>
-        <summary><Show when={open()} fallback={<AiFillFolder />}><AiFillFolderOpen /></Show> {props.children[0](() => props.folder)}</summary>
-        <_Tree entries={props.folder.entries} children={props.children} />
-    </details>;
-};
-
-const sort_by = (key: string) => (objA: Record<string, any>, objB: Record<string, any>) => {
-    const a = objA[key];
-    const b = objB[key];
-
-    return Number(a < b) - Number(b < a);
-};

src/components/grid/grid.tsx

@@ -0,0 +1,125 @@
+import { Accessor, createContext, createEffect, createMemo, createSignal, JSX, useContext } from "solid-js";
+import { Mutation } from "~/utilities";
+import { SelectionMode, Table, Column as TableColumn, TableApi, CellRenderer as TableCellRenderer } from "~/components/table";
+import { DataSet } from "~/features/dataset";
+import css from './grid.module.css';
+
+export interface CellRenderer<T extends Record<string, any>, K extends keyof T> {
+    (cell: Parameters<TableCellRenderer<T, K>>[0] & { mutate: (next: T[K]) => any }): JSX.Element;
+}
+
+export interface Column<T extends Record<string, any>> extends Omit<TableColumn<T>, 'renderer'> {
+    renderer?: CellRenderer<T, keyof T>;
+}
+
+export interface GridApi<T extends Record<string, any>> extends TableApi<T> {
+    readonly mutations: Accessor<Mutation[]>;
+    remove(keys: number[]): void;
+    insert(row: T, at?: number): void;
+    addColumn(column: keyof T): void;
+}
+
+interface GridContextType<T extends Record<string, any>> {
+    readonly mutations: Accessor<Mutation[]>;
+    readonly selection: TableApi<T>['selection'];
+    mutate<K extends keyof T>(row: number, column: K, value: T[K]): void;
+    remove(rows: number[]): void;
+    insert(row: T, at?: number): void;
+    addColumn(column: keyof T, value: T[keyof T]): void;
+}
+
+const GridContext = createContext<GridContextType<any>>();
+
+const useGrid = () => useContext(GridContext)!;
+
+type GridProps<T extends Record<string, any>> = { class?: string, groupBy?: keyof T, columns: Column<T>[], data: DataSet<T>, api?: (api: GridApi<T>) => any };
+
+export function Grid<T extends Record<string, any>>(props: GridProps<T>) {
+    const [table, setTable] = createSignal<TableApi<T>>();
+
+    const data = createMemo(() => props.data);
+    const columns = createMemo(() => props.columns as TableColumn<T>[]);
+    const mutations = createMemo(() => data().mutations());
+
+    const ctx: GridContextType<T> = {
+        mutations,
+        selection: createMemo(() => table()?.selection() ?? []),
+
+        mutate<K extends keyof T>(row: number, column: K, value: T[K]) {
+            data().mutate(row, column, value);
+        },
+
+        remove(indices: number[]) {
+            data().remove(indices);
+            table()?.clearSelection();
+        },
+
+        insert(row: T, at?: number) {
+            data().insert(row, at);
+        },
+
+        addColumn(column: keyof T, value: T[keyof T]): void {
+            // setState('rows', { from: 0, to: state.rows.length - 1 }, column as any, value);
+        },
+    };
+
+    const cellRenderers = createMemo(() => Object.fromEntries(
+        props.columns
+            .filter(c => c.renderer !== undefined)
+            .map(c => {
+                const Editor: CellRenderer<T, keyof T> = ({ row, column, value }) => {
+                    const mutate = (next: T[keyof T]) => {
+                        ctx.mutate(row, column, next);
+                    };
+
+                    return c.renderer!({ row, column, value, mutate });
+                };
+
+                return [c.id, Editor] as const;
+            })
+    ) as any);
+
+    return <GridContext.Provider value={ctx}>
+        <Api api={props.api} table={table()} />
+
+        <Table api={setTable} class={`${css.grid} ${props.class}`} rows={data()} columns={columns()} selectionMode={SelectionMode.Multiple}>{
+            cellRenderers()
+        }</Table>
+    </GridContext.Provider>;
+};
+
+function Api<T extends Record<string, any>>(props: { api: undefined | ((api: GridApi<T>) => any), table?: TableApi<T> }) {
+    const gridContext = useGrid();
+
+    const api = createMemo<GridApi<T> | undefined>(() => {
+        const table = props.table;
+
+        if (!table) {
+            return;
+        }
+
+        return {
+            ...table,
+            mutations: gridContext.mutations,
+            remove(rows: number[]) {
+                gridContext.remove(rows);
+            },
+            insert(row: T, at?: number) {
+                gridContext.insert(row, at);
+            },
+            addColumn(column: keyof T): void {
+                gridContext.addColumn(column, value);
+            },
+        };
+    });
+
+    createEffect(() => {
+        const value = api();
+
+        if (value) {
+            props.api?.(value);
+        }
+    });
+
+    return null;
+};

src/components/grid/index.tsx

@@ -0,0 +1,4 @@
+
+export type { DataSetRowNode, DataSetGroupNode, DataSetNode, SelectionMode, SortingFunction, SortOptions, GroupingFunction, GroupOptions } from '../table';
+export type { GridApi, Column, CellRenderer as CellEditor } from './grid';
+export { Grid } from './grid';

src/components/prompt.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal, createUniqueId, JSX, onMount, ParentComponent, Show } from "solid-js";
+import { createEffect, createSignal, JSX, ParentComponent, Show } from "solid-js";
 import css from './prompt.module.css';
 
 export interface PromptApi {
@@ -72,4 +72,7 @@ export const Prompt: ParentComponent<{ api: (api: PromptApi) => any, title?: str
             </footer>
         </form>
     </dialog>;
-};
+};
+
+let idCounter = 0;
+const createUniqueId = () => `prompt-${idCounter++}`;

src/components/select/index.module.css

@@ -0,0 +1,95 @@
+.box {
+    display: contents;
+
+    &:has(> :popover-open) > .button {
+        background-color: var(--surface-500);
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+}
+
+.button {
+    position: relative;
+    display: grid;
+    grid-template-columns: inherit;
+    place-items: center start;
+
+    /* Make sure the height of the button does not collapse when it is empty */
+    block-size: 1em;
+    box-sizing: content-box;
+
+    padding: var(--padding-m);
+    background-color: transparent;
+    border: none;
+    border-radius: var(--radii-m);
+    font-size: 1rem;
+
+    cursor: pointer;
+
+    &:hover {
+        background-color: var(--surface-700);
+    }
+
+    &:has(> .caret) {
+        padding-inline-end: calc(1em + (2 * var(--padding-m)));
+    }
+
+    & > .caret {
+        position: absolute;
+        inset-inline-end: var(--padding-m);
+        inset-block-start: 50%;
+        translate: 0 -50%;
+        inline-size: 1em;
+    }
+}
+
+.dialog {
+    display: none;
+    position: relative;
+    grid-template-columns: inherit;
+
+    inset-inline-start: anchor(start);
+    inset-block-start: anchor(end);
+    position-try-fallbacks: flip-block, flip-inline;
+
+    /* inline-size: anchor-size(self-inline); */
+    background-color: var(--surface-500);
+    padding: var(--padding-m);
+    border: none;
+    box-shadow: var(--shadow-2);
+
+    &:popover-open {
+        display: grid;
+    }
+
+    & > header {
+        display: grid;
+        grid-column: 1 / -1;
+
+        gap: var(--padding-s);
+    }
+
+    & > main {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        row-gap: var(--padding-s);
+    }
+}
+
+.option {
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-column: 1 / -1;
+    place-items: center start;
+
+    border-radius: var(--radii-m);
+    padding: var(--padding-s);
+    margin-inline: calc(-1 * var(--padding-s));
+
+    cursor: pointer;
+
+    &.selected {
+        background-color: oklch(from var(--info) l c h / .1);
+    }
+}

src/components/select/index.tsx

@@ -0,0 +1,67 @@
+import { createMemo, createSignal, For, JSX, Setter, createEffect, Show } from "solid-js";
+import { Dropdown, DropdownApi } from "../dropdown";
+import css from './index.module.css';
+
+interface SelectProps<T, K extends string> {
+    id: string;
+    class?: string;
+    value: K;
+    setValue?: Setter<K>;
+    values: Record<K, T>;
+    open?: boolean;
+    showCaret?: boolean;
+    children: (key: K, value: T) => JSX.Element;
+    filter?: (query: string, key: K, value: T) => boolean;
+}
+
+export function Select<T, K extends string>(props: SelectProps<T, K>) {
+    const [dropdown, setDropdown] = createSignal<DropdownApi>();
+    const [key, setKey] = createSignal<K>(props.value);
+    const [query, setQuery] = createSignal<string>('');
+
+    const showCaret = createMemo(() => props.showCaret ?? true);
+    const values = createMemo(() => {
+        let entries = Object.entries<T>(props.values) as [K, T][];
+        const filter = props.filter;
+        const q = query();
+
+        if (filter) {
+            entries = entries.filter(([k, v]) => filter(q, k, v));
+        }
+
+        return entries;
+    });
+
+    createEffect(() => {
+        props.setValue?.(() => key());
+    });
+
+    const text = <Show when={key()}>{
+        key => {
+            const value = createMemo(() => props.values[key()]);
+
+            return <>{props.children(key(), value())}</>;
+        }
+    }</Show>
+
+    return <Dropdown api={setDropdown} id={props.id} class={`${css.box} ${props.class}`} showCaret={showCaret()} open={props.open} text={text}>
+        <Show when={props.filter !== undefined}>
+            <header>
+                <input value={query()} onInput={e => setQuery(e.target.value)} />
+            </header>
+        </Show>
+
+        <main>
+            <For each={values()}>{
+                ([k, v]) => {
+                    const selected = createMemo(() => key() === k);
+
+                    return <span class={`${css.option} ${selected() ? css.selected : ''}`} onpointerdown={() => {
+                        setKey(() => k);
+                        dropdown()?.hide();
+                    }}>{props.children(k, v)}</span>;
+                }
+            }</For>
+        </main>
+    </Dropdown>
+}

src/components/table/index.tsx

@@ -0,0 +1,3 @@
+
+export type { Column, TableApi, CellRenderer, CellRenderers } from './table';
+export { SelectionMode, Table } from './table';

src/components/table/table.module.css

@@ -0,0 +1,236 @@
+@property --depth {
+    syntax: "<number>";
+    inherits: true;
+    initial-value: 0;
+}
+
+.table {
+    --shadow-color: oklch(0 0 0 / .05);
+    --shadow: var(--shadow-color) 0 0 2em;
+
+    position: relative;
+    display: block grid;
+    grid-template-columns: repeat(var(--columns), minmax(max-content, auto));
+    align-content: start;
+    block-size: 100%;
+    padding-inline: 1px;
+    margin-inline: -1px;
+    overflow: auto;
+    background-color: inherit;
+    isolation: isolate;
+
+    & .cell {
+        display: block grid;
+        align-items: center;
+        padding: var(--padding-m);
+        border: 1px solid transparent;
+        border-radius: var(--radii-m);
+        background: inherit;
+        white-space: nowrap;
+    }
+
+    & :is(.cell:first-child, .checkbox + .cell) {
+        position: sticky;
+        inset-inline-start: 1px;
+        padding-inline-start: calc(var(--depth, 0) * (1em + var(--padding-s)) + var(--padding-m));
+        z-index: 1;
+
+        &::after {
+            content: '';
+            position: absolute;
+            inset-inline-start: 100%;
+            inset-block-start: -2px;
+            display: block;
+            inline-size: 2em;
+            block-size: calc(3px + 100%);
+            animation: column-scroll-shadow linear both;
+            animation-timeline: scroll(inline);
+            animation-range: 0 2em;
+            pointer-events: none;
+        }
+    }
+
+    & .checkbox {
+        display: grid;
+        place-items: center;
+        position: sticky;
+        inset-inline-start: 1px;
+        background: inherit;
+        padding: var(--padding-m);
+        z-index: 1;
+    }
+
+    & .caption {
+        position: sticky;
+        inset-inline-start: 0;
+    }
+
+    & :is(.header, .main, .footer) {
+        grid-column: 1 / -1;
+        display: block grid;
+        grid-template-columns: subgrid;
+        background-color: inherit;
+    }
+
+    & .row {
+        --alpha: 0;
+        grid-column: 1 / -1;
+        display: block grid;
+        grid-template-columns: subgrid;
+        border: 1px solid transparent;
+        background-color: inherit;
+        background-image: linear-gradient(0deg, oklch(from var(--info) l c h / var(--alpha)), oklch(from var(--info) l c h / var(--alpha)));
+
+        &:has(> .checkbox > :checked) {
+            --alpha: .1;
+            border-color: var(--info);
+
+            & span {
+                font-variation-settings: 'GRAD' 1000;
+            }
+
+            & + :has(> .checkbox > :checked) {
+                border-block-start-color: transparent;
+            }
+
+            &:has(+ .row > .checkbox > :checked) {
+                border-block-end-color: transparent;
+            }
+        }
+
+        &:hover {
+            --alpha: .2 !important;
+        }
+    }
+
+    & .header {
+        position: sticky;
+        inset-block-start: 0;
+        border-block-end: 1px solid var(--surface-300);
+        z-index: 2;
+        animation: header-scroll-shadow linear both;
+        animation-timeline: scroll();
+        animation-range: 0 2em;
+        font-weight: var(--text-bold);
+
+        & > tr {
+            all: inherit;
+            display: contents;
+
+            & > .cell {
+                grid-auto-flow: column;
+                justify-content: space-between;
+
+                & > svg {
+                    transition: opacity .15s ease-in-out;
+                }
+
+                &:not(.sorted):not(:hover) > svg {
+                    opacity: 0;
+                }
+            }
+        }
+    }
+
+    & .main {
+        background-color: inherit;
+    }
+
+    & .footer {
+        position: sticky;
+        inset-block-end: 0;
+        border-block-start: 1px solid var(--surface-300);
+        z-index: 2;
+        animation: header-scroll-shadow linear both reverse;
+        animation-timeline: scroll();
+        animation-range: calc(100% - 2em) 100%;
+        font-weight: var(--text-bold);
+    }
+
+    & .group {
+        display: contents;
+        background-color: inherit;
+
+        & > td {
+            display: contents;
+            background-color: inherit;
+
+            & > table {
+                grid-column: 1 / -1;
+                grid-template-columns: subgrid;
+                background-color: inherit;
+                overflow: visible;
+
+                & > .header {
+                    border-block-end-color: transparent;
+                    animation: none;
+
+                    & .cell {
+                        justify-content: start;
+                        column-gap: var(--padding-s);
+
+                        & > label {
+                            --state: 0;
+                            display: contents;
+                            cursor: pointer;
+
+                            & input[type="checkbox"] {
+                                display: none;
+                            }
+
+                            & > svg {
+                                rotate: calc(var(--state) * -.25turn);
+                                transition: rotate .3s ease-in-out;
+                                inline-size: 1em;
+                                aspect-ratio: 1;
+                                opacity: 1 !important;
+                            }
+
+                            &:has(input:not(:checked)) {
+                                --state: 1;
+                            }
+                        }
+                    }
+                }
+
+                & > .main {
+                    block-size: calc-size(auto, size);
+                    transition: block-size .3s ease-in-out;
+                    overflow: clip;
+                }
+
+                &:has(> .header input:not(:checked)) > .main {
+                    block-size: 0;
+                }
+            }
+        }
+    }
+
+    &.selectable {
+        grid-template-columns: 2em repeat(var(--columns), minmax(max-content, auto));
+
+        & :is(.cell:first-child, .checkbox + .cell) {
+            inset-inline-start: 2em;
+        }
+    }
+}
+
+@keyframes header-scroll-shadow {
+    from {
+        box-shadow: none;
+    }
+
+    to {
+        box-shadow: var(--shadow);
+    }
+}
+
+@keyframes column-scroll-shadow {
+    from {
+        background: linear-gradient(90deg, transparent, transparent);
+    }
+
+    to {
+        background: linear-gradient(90deg, var(--shadow-color), transparent);
+    }
+}

src/components/table/table.spec.tsx

@@ -0,0 +1,44 @@
+import { describe, expect } from 'vitest';
+import { render } from "@solidjs/testing-library"
+import { Table } from './table';
+import { createDataSet } from '~/features/dataset';
+import { createSignal } from 'solid-js';
+import { it } from '~/test-helpers';
+
+describe('`<Table />`', () => {
+    it('should render', async () => {
+        const result = render(() => {
+            const [data] = createSignal([]);
+            const dataset = createDataSet(data);
+
+            return <Table rows={dataset} columns={[]} />;
+        });
+
+        expect(true).toBe(true);
+    });
+
+    it('should render with groups', async () => {
+        const result = render(() => {
+            const [data] = createSignal([
+                { id: '1', name: 'a first name', amount: 30, group: 'a' },
+                { id: '2', name: 'a second name', amount: 20, group: 'a' },
+                { id: '3', name: 'a third name', amount: 10, group: 'a' },
+                { id: '4', name: 'a first name', amount: 30, group: 'b' },
+                { id: '5', name: 'a second name', amount: 20, group: 'b' },
+                { id: '6', name: 'a third name', amount: 10, group: 'b' },
+            ]);
+            const dataset = createDataSet(data, {
+                group: { by: 'group' }
+            });
+
+            return <Table rows={dataset} columns={[
+                { id: 'id', label: 'id' },
+                { id: 'name', label: 'name' },
+                { id: 'amount', label: 'amount' },
+                { id: 'group', label: 'group' },
+            ]} />;
+        });
+
+        expect(true).toBe(true);
+    });
+});

src/components/table/table.tsx

@@ -0,0 +1,273 @@
+import { Accessor, createContext, createEffect, createMemo, createSignal, For, JSX, Match, Show, Switch, useContext } from "solid-js";
+import { selectable, SelectionItem, SelectionProvider, useSelection } from "~/features/selectable";
+import { DataSetRowNode, DataSetNode, DataSet } from '~/features/dataset';
+import { FaSolidAngleDown, FaSolidSort, FaSolidSortDown, FaSolidSortUp } from "solid-icons/fa";
+import css from './table.module.css';
+
+selectable;
+
+export type CellRenderer<T extends Record<string, any>, K extends keyof T> = (cell: { row: number, column: K, value: T[K] }) => JSX.Element;
+export type CellRenderers<T extends Record<string, any>> = { [K in keyof T]?: CellRenderer<T, K> };
+
+export interface Column<T extends Record<string, any>> {
+    id: keyof T,
+    label: string,
+    sortable?: boolean,
+    group?: string,
+    renderer?: CellRenderer<T, keyof T>,
+    readonly groupBy?: (rows: DataSetRowNode<keyof T, T>[]) => DataSetNode<keyof T, T>[],
+};
+
+export interface TableApi<T extends Record<string, any>> {
+    readonly selection: Accessor<SelectionItem<number, T>[]>;
+    readonly rows: Accessor<DataSet<T>>;
+    readonly columns: Accessor<Column<T>[]>;
+    selectAll(): void;
+    clearSelection(): void;
+}
+
+interface TableContextType<T extends Record<string, any>> {
+    readonly rows: Accessor<DataSet<T>>,
+    readonly columns: Accessor<Column<T>[]>,
+    readonly selection: Accessor<SelectionItem<number, T>[]>,
+    readonly selectionMode: Accessor<SelectionMode>,
+    readonly cellRenderers: Accessor<CellRenderers<T>>,
+}
+
+const TableContext = createContext<TableContextType<any>>();
+
+const useTable = <T extends Record<string, any>>() => useContext(TableContext)! as TableContextType<T>
+
+export enum SelectionMode {
+    None,
+    Single,
+    Multiple
+}
+type TableProps<T extends Record<string, any>> = {
+    class?: string,
+    summary?: string,
+    rows: DataSet<T>,
+    columns: Column<T>[],
+    selectionMode?: SelectionMode,
+    children?: CellRenderers<T>,
+    api?: (api: TableApi<T>) => any,
+};
+
+export function Table<T extends Record<string, any>>(props: TableProps<T>) {
+    const [selection, setSelection] = createSignal<SelectionItem<number, T>[]>([]);
+
+    const rows = createMemo(() => props.rows);
+    const columns = createMemo<Column<T>[]>(() => props.columns ?? []);
+    const selectionMode = createMemo(() => props.selectionMode ?? SelectionMode.None);
+    const cellRenderers = createMemo<CellRenderers<T>>(() => props.children ?? {});
+
+    const context: TableContextType<T> = {
+        rows,
+        columns,
+        selection,
+        selectionMode,
+        cellRenderers,
+    };
+
+    return <TableContext.Provider value={context}>
+        <SelectionProvider selection={setSelection} multiSelect={props.selectionMode === SelectionMode.Multiple}>
+            <Api api={props.api} />
+
+            <InnerTable class={props.class} summary={props.summary} data={rows()} />
+        </SelectionProvider>
+    </TableContext.Provider>;
+};
+
+type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, data: DataSet<T> };
+
+function InnerTable<T extends Record<string, any>>(props: InnerTableProps<T>) {
+    const table = useTable<T>();
+
+    const selectable = createMemo(() => table.selectionMode() !== SelectionMode.None);
+    const columnCount = createMemo(() => table.columns().length);
+
+    return <table class={`${css.table} ${selectable() ? css.selectable : ''} ${props.class}`} style={{ '--columns': columnCount() }}>
+        {/* <Show when={(props.summary?.length ?? 0) > 0 ? props.summary : undefined}>{
+            summary => {
+                return <caption class={css.caption}>{summary()}</caption>;
+            }
+        }</Show> */}
+
+        <Groups />
+        <Head />
+
+        <tbody class={css.main}>
+            <For each={props.data.nodes() as DataSetNode<number, T>[]}>{
+                node => <Node node={node} depth={0} />
+            }</For>
+        </tbody>
+
+        {/* <Show when={true}>
+            <tfoot class={css.footer}>
+                <tr>
+                    <td colSpan={columnCount()}>FOOTER</td>
+                </tr>
+            </tfoot>
+        </Show> */}
+    </table>
+};
+
+function Api<T extends Record<string, any>>(props: { api: undefined | ((api: TableApi<T>) => any) }) {
+    const table = useTable<T>();
+    const selectionContext = useSelection<number, T>();
+
+    const api: TableApi<T> = {
+        selection: selectionContext.selection,
+        rows: table.rows,
+        columns: table.columns,
+        selectAll() {
+            selectionContext.selectAll();
+        },
+        clearSelection() {
+            selectionContext.clear();
+        },
+    };
+
+    createEffect(() => {
+        props.api?.(api);
+    });
+
+    return null;
+};
+
+function Groups(props: {}) {
+    const table = useTable();
+
+    const groups = createMemo(() => {
+        return new Set(table.columns().map(c => c.group).filter(g => g !== undefined)).values().toArray();
+    });
+
+    return <For each={groups()}>{
+        group => <colgroup span="1" data-group-name={group} />
+    }</For>
+}
+
+function Head(props: {}) {
+    const table = useTable();
+    const context = useSelection();
+
+    return <thead class={css.header}>
+        <tr>
+            <Show when={table.selectionMode() !== SelectionMode.None}>
+                <th class={css.checkbox}>
+                    <input
+                        type="checkbox"
+                        checked={context.selection().length > 0 && context.selection().length === context.length()}
+                        indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
+                        on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
+                    />
+                </th>
+            </Show>
+
+            <For each={table.columns()}>{
+                ({ id, label, sortable }) => {
+                    const sort = createMemo(() => table.rows().sorting);
+                    const by = String(id);
+
+                    const onPointerDown = (e: PointerEvent) => {
+                        if (sortable !== true) {
+                            return;
+                        }
+
+                        table.rows().sort(current => {
+                            if (current?.by !== by) {
+                                return { by, reversed: false };
+                            }
+
+                            if (current.reversed === true) {
+                                return undefined;
+                            }
+
+                            return { by, reversed: true };
+                        });
+                    };
+
+                    return <th scope="col" class={`${css.cell} ${sort()?.by === by ? css.sorted : ''}`} onpointerdown={onPointerDown}>
+                        {label}
+
+                        <Switch>
+                            <Match when={sortable && sort()?.by !== by}><FaSolidSort /></Match>
+                            <Match when={sortable && sort()?.by === by && sort()?.reversed !== true}><FaSolidSortUp /></Match>
+                            <Match when={sortable && sort()?.by === by && sort()?.reversed === true}><FaSolidSortDown /></Match>
+                        </Switch>
+                    </th>;
+                }
+            }</For>
+        </tr>
+    </thead>;
+};
+
+function Node<K extends number | string, T extends Record<string, any>>(props: { node: DataSetNode<K, T>, depth: number, groupedBy?: keyof T }) {
+    return <Switch>
+        <Match when={props.node.kind === 'row' ? props.node : undefined}>{
+            row => <Row key={row().key} value={row().value} depth={props.depth} groupedBy={props.groupedBy} />
+        }</Match>
+
+        <Match when={props.node.kind === 'group' ? props.node : undefined}>{
+            group => <Group key={group().key} groupedBy={group().groupedBy} nodes={group().nodes} depth={props.depth} />
+        }</Match>
+    </Switch>;
+}
+
+function Row<K extends number | string, T extends Record<string, any>>(props: { key: K, value: T, depth: number, groupedBy?: keyof T }) {
+    const table = useTable<T>();
+    const context = useSelection<K, T>();
+    const columns = table.columns;
+
+    const isSelected = context.isSelected(props.key);
+
+    return <tr class={css.row} style={{ '--depth': props.depth }} use:selectable={{ value: props.value, key: props.key }}>
+        <Show when={table.selectionMode() !== SelectionMode.None}>
+            <th class={css.checkbox}>
+                <input type="checkbox" checked={isSelected()} on:input={() => context.select([props.key])} on:pointerdown={e => e.stopPropagation()} />
+            </th>
+        </Show>
+
+        <For each={columns()}>{
+            ({ id }) => {
+                const content = table.cellRenderers()[id]?.({ row: props.key as number, column: id, value: props.value[id] }) ?? props.value[id];
+
+                return <td class={css.cell}>{content}</td>;
+            }
+        }</For>
+    </tr>;
+};
+
+function Group<K extends number | string, T extends Record<string, any>>(props: { key: K, groupedBy: keyof T, nodes: DataSetNode<K, T>[], depth: number }) {
+    const table = useTable();
+
+    return <tr class={css.group}>
+        <td colSpan={table.columns().length}>
+            <table class={css.table}>
+                <thead class={css.header}>
+                    <tr><th class={css.cell} colSpan={table.columns().length} style={{ '--depth': props.depth }}>
+                        <label>
+                            <input type="checkbox" checked name="collapse" />
+                            <FaSolidAngleDown />
+
+                            {String(props.key)}</label>
+                    </th></tr>
+                </thead>
+
+                <tbody class={css.main}>
+                    <For each={props.nodes}>{
+                        node => <Node node={node} depth={props.depth + 1} groupedBy={props.groupedBy} />
+                    }</For>
+                </tbody>
+            </table>
+        </td>
+    </tr>;
+};
+
+declare module "solid-js" {
+    namespace JSX {
+        interface HTMLAttributes<T> {
+            indeterminate?: boolean | undefined;
+        }
+    }
+}

src/components/tabs.module.css

@@ -58,47 +58,16 @@
                 color: var(--text-1);
             }
         }
+
+        &:empty {
+            display: none;
+        }
     }
 
     .tab {
-        position: absolute;
-        grid-area: 2 / 1 / span 1 / span 1;
-        inline-size: 100%;
-        block-size: 100%;
-
-        &:not(.active) {
-            display: none;
-        }
-
-        & > summary {
-            grid-row: 1 / 1;
-
-            padding: var(--padding-s) var(--padding-m);
-
-            &::marker {
-                content: none;
-            }
-        }
-
-        &::details-content {
-            grid-area: 2 / 1 / span 1 / span var(--tab-count);
-            display: none;
-            grid: 100% / 100%;
-            inline-size: 100%;
-            block-size: 100%;
-
-            overflow: auto;
-        }
-
-        &[open] {
-            & > summary {
-                background-color: var(--surface-600);
-            }
-
-            &::details-content {
-                display: grid;
-            }
-        }
+        display: contents;
+        background-color: var(--surface-600);
+        color: var(--text-1);
     }
 }
 

src/components/tabs.tsx

@@ -1,12 +1,13 @@
-import { Accessor, children, createContext, createEffect, createMemo, createSignal, For, JSX, onCleanup, ParentComponent, Setter, Show, useContext } from "solid-js";
+import { Accessor, children, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Setter, Show, useContext } from "solid-js";
 import { Command, CommandType, noop, useCommands } from "~/features/command";
 import { AiOutlineClose } from "solid-icons/ai";
 import css from "./tabs.module.css";
 
+type CloseTabCommandType = CommandType<(id: string) => any>;
 interface TabsContextType {
     activate(id: string | undefined): void;
     isActive(id: string): Accessor<boolean>;
-    readonly onClose: Accessor<CommandType<[string]> | undefined>
+    readonly onClose: Accessor<CloseTabCommandType | undefined>
 }
 
 const TabsContext = createContext<TabsContextType>();
@@ -21,11 +22,11 @@ const useTabs = () => {
     return context!;
 }
 
-export const Tabs: ParentComponent<{ class?: string, active?: Setter<string | undefined>, onClose?: CommandType<[string]> }> = (props) => {
-    const [active, setActive] = createSignal<string | undefined>(undefined);
+export const Tabs: ParentComponent<{ class?: string, active?: string, setActive?: Setter<string | undefined>, onClose?: CloseTabCommandType }> = (props) => {
+    const [active, setActive] = createSignal<string | undefined>(props.active);
 
     createEffect(() => {
-        props.active?.(active());
+        props.setActive?.(active());
     });
 
     const ctx = {
@@ -45,17 +46,13 @@ export const Tabs: ParentComponent<{ class?: string, active?: Setter<string | un
     </TabsContext.Provider >;
 }
 
-const _Tabs: ParentComponent<{ class?: string, active: string | undefined, onClose?: CommandType<[string]> }> = (props) => {
+const _Tabs: ParentComponent<{ class?: string, active: string | undefined, onClose?: CloseTabCommandType }> = (props) => {
     const commandsContext = useCommands();
     const tabsContext = useTabs();
 
     const resolved = children(() => props.children);
     const tabs = createMemo(() => resolved.toArray().filter(c => c instanceof HTMLElement).map(({ id, dataset }, i) => ({ id, label: dataset.tabLabel ?? '', options: { closable: Boolean(dataset.tabClosable ?? 'false') } })));
 
-    createEffect(() => {
-        tabsContext.activate(tabs().at(-1)?.id);
-    });
-
     const onClose = (e: Event) => {
         if (!commandsContext || !props.onClose) {
             return;
@@ -67,7 +64,7 @@ const _Tabs: ParentComponent<{ class?: string, active: string | undefined, onClo
     return <div class={`${css.tabs} ${props.class}`}>
         <header>
             <For each={tabs()}>{
-                ({ id, label, options: { closable } }) => <Command.Context for={props.onClose} with={[id]}>
+                ({ id, label, options: { closable } }) => <Command.Context for={props.onClose!} with={[id]}>
                     <span class={css.handle} classList={{ [css.active]: props.active === id }}>
                         <button onpointerdown={(e) => {
                             if (closable && e.pointerType === 'mouse' && e.button === 1) {
@@ -95,19 +92,12 @@ export const Tab: ParentComponent<{ id: string, label: string, closable?: boolea
     const context = useTabs();
     const resolved = children(() => props.children);
     const isActive = context.isActive(props.id);
-    const [ref, setRef] = createSignal();
-
-    // const isActive = context.register(props.id, props.label, {
-    //     closable: props.closable ?? false,
-    //     ref: ref,
-    // });
 
     return <div
-        ref={setRef()}
         id={props.id}
+        class={css.tab}
         data-tab-label={props.label}
         data-tab-closable={props.closable}
-        style="display: contents;"
     >
         <Show when={isActive()}>
             <Command.Context for={context.onClose() ?? noop} with={[props.id]}>{resolved()}</Command.Context>

src/components/textarea/grammarChecker.ts

@@ -0,0 +1,10 @@
+
+
+const regex = /\w+\s+\w+/gi;
+export function defaultChecker(subject: string, lang: string): [number, number][] {
+    return [];
+
+    return Array.from<RegExpExecArray>(subject.matchAll(regex)).filter(() => Math.random() >= .5).map(({ 0: match, index }) => {
+        return [index, index + match.length - 1];
+    });
+}

src/components/textarea/index.ts

@@ -0,0 +1,3 @@
+
+
+export { Textarea } from './textarea';

src/components/textarea/spellChecker.ts

@@ -0,0 +1,10 @@
+
+
+const regex = /\w+/gi;
+export function defaultChecker(subject: string, lang: string): [number, number][] {
+    return [];
+
+    return Array.from<RegExpExecArray>(subject.matchAll(regex)).filter(() => Math.random() >= .5).map(({ 0: match, index }) => {
+        return [index, index + match.length - 1];
+    });
+}

src/components/textarea/textarea.module.css

@@ -0,0 +1,61 @@
+.textarea {
+    display: block;
+    overflow: clip auto;
+    resize: block;
+
+    white-space: wrap;
+    min-block-size: max(2em, 100%);
+    max-block-size: 50em;
+
+    unicode-bidi: plaintext;
+    cursor: text;
+
+    & ::highlight(search-results) {
+        background-color: var(--secondary-900);
+    }
+
+    & ::highlight(spelling-error) {
+        text-decoration-line: spelling-error;
+    }
+
+    & ::highlight(grammar-error) {
+        text-decoration-line: grammar-error;
+    }
+}
+
+.search {
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-start: 0;
+}
+
+.suggestions {
+    position-anchor: --suggestions;
+
+    position: fixed;
+    inset-inline-start: anchor(start);
+    inset-block-start: anchor(end);
+    position-try-fallbacks: flip-block, flip-inline;
+
+    margin: 0;
+    padding: var(--padding-m) 0;
+    border: 1px solid var(--surface-300);
+    background-color: var(--surface-600);
+    box-shadow: var(--shadow-2);
+    list-style: none;
+
+    display: none;
+    grid-auto-flow: row;
+
+    &:popover-open {
+        display: block grid;
+    }
+
+    & > li {
+        padding: var(--padding-m);
+
+        &:hover {
+            background-color: oklch(from var(--info) l c h / .5);
+        }
+    }
+}

src/components/textarea/textarea.tsx

@@ -0,0 +1,218 @@
+import { Component, createEffect, createMemo, createSignal, For, on, onMount, untrack } from 'solid-js';
+import { debounce } from '@solid-primitives/scheduled';
+import { createSelection, getTextNodes } from '@solid-primitives/selection';
+import { createSource } from '~/features/source';
+import { isServer } from 'solid-js/web';
+import css from './textarea.module.css';
+
+interface TextareaProps {
+    class?: string;
+    value: string;
+    lang: string;
+    placeholder?: string;
+    oninput?: (next: string) => any;
+    spellChecker?: any;
+    grammarChecker?: any;
+}
+
+export function Textarea(props: TextareaProps) {
+    const [selection, setSelection] = createSelection();
+    const [editorRef, setEditorRef] = createSignal<HTMLElement>();
+    let mounted = false;
+
+    const source = createSource(props.value);
+
+    createEffect(on(() => [props.oninput, source.in] as const, ([oninput, text]) => {
+        if (!mounted) {
+            return;
+        }
+
+        oninput?.(text);
+    }));
+
+    onMount((() => {
+        mounted = true;
+    }));
+
+    createEffect(() => {
+        source.in = props.value;
+    });
+
+    const mutate = debounce(() => {
+        const [, start, end] = selection();
+        const ref = editorRef();
+
+        if (ref) {
+            source.out = ref.innerHTML;
+
+            ref.style.height = `1px`;
+            ref.style.height = `${2 + ref.scrollHeight}px`;
+
+            setSelection([ref, start, end]);
+        }
+    }, 300);
+
+    onMount(() => {
+        new MutationObserver(mutate).observe(editorRef()!, {
+            subtree: true,
+            childList: true,
+            characterData: true,
+        });
+    });
+
+    createEffect(() => {
+        createHighlights(editorRef()!, 'spelling-error', source.spellingErrors);
+    });
+
+    createEffect(() => {
+        createHighlights(editorRef()!, 'grammar-error', source.grammarErrors);
+    });
+
+    createEffect(() => {
+        createHighlights(editorRef()!, 'search-results', source.queryResults);
+    });
+
+    return <>
+        <Suggestions />
+        <input class={css.search} type="search" oninput={e => source.query = e.target.value} />
+        <div
+            ref={setEditorRef}
+            class={`${css.textarea} ${props.class}`}
+            contentEditable
+            dir="auto"
+            lang={props.lang}
+            innerHTML={source.out}
+            data-placeholder={props.placeholder ?? ''}
+            on:keydown={e => e.stopPropagation()}
+            on:pointerdown={e => e.stopPropagation()}
+        />
+    </>;
+}
+
+const Suggestions: Component = () => {
+    const [selection] = createSelection();
+    const [suggestionRef, setSuggestionRef] = createSignal<HTMLElement>();
+    const [suggestions, setSuggestions] = createSignal<string[]>([]);
+
+    const marker = createMemo(() => {
+        if (isServer) {
+            return;
+        }
+
+        const [n] = selection();
+        const s = window.getSelection();
+
+        if (n === null || s === null || s.rangeCount < 1) {
+            return;
+        }
+
+        return (findMarkerNode(s.getRangeAt(0)?.commonAncestorContainer) ?? undefined) as HTMLElement | undefined;
+    });
+
+    createEffect<HTMLElement | undefined>((prev) => {
+        if (prev) {
+            prev.style.setProperty('anchor-name', null);
+        }
+
+        const m = marker();
+        const ref = untrack(() => suggestionRef()!);
+
+        if (m === undefined) {
+            if (ref.matches(':popover-open')) {
+                ref.hidePopover();
+            }
+
+            return;
+        }
+
+        m.style.setProperty('anchor-name', '--suggestions');
+
+        if (ref.matches(':not(:popover-open)')) {
+            ref.showPopover();
+        }
+
+        ref.focus()
+
+        return m;
+    });
+
+    createEffect(() => {
+        marker();
+
+        setSuggestions(Array(Math.ceil(Math.random() * 5)).fill('').map((_, i) => `suggestion ${i}`));
+    });
+
+    const onPointerDown = (e: PointerEvent) => {
+        marker()?.replaceWith(document.createTextNode(e.target.textContent));
+    };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+        console.log(e);
+    }
+
+    return <menu ref={setSuggestionRef} class={css.suggestions} popover="manual" onkeydown={onKeyDown}>
+        <For each={suggestions()}>{
+            suggestion => <li onpointerdown={onPointerDown}>{suggestion}</li>
+        }</For>
+    </menu>;
+};
+
+const findMarkerNode = (node: Node | null) => {
+    while (node !== null) {
+        if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).hasAttribute('data-marker')) {
+            break;
+        }
+
+        node = node.parentNode;
+    }
+
+    return node;
+};
+
+const spellChecker = checker(/\w+/gi);
+const grammarChecker = checker(/\w+\s+\w+/gi);
+
+function checker(regex: RegExp) {
+    return (subject: string, lang: string): [number, number][] => {
+        // return [];
+
+        const threshold = .75//.99;
+
+        return Array.from<RegExpExecArray>(subject.matchAll(regex)).filter(() => Math.random() >= threshold).map(({ 0: match, index }) => {
+            return [index, index + match.length] as const;
+        });
+    }
+}
+
+const createHighlights = (node: Node, type: string, ranges: [number, number][]) => {
+    queueMicrotask(() => {
+        const nodes = getTextNodes(node);
+
+        CSS.highlights.set(type, new Highlight(...ranges.map(([start, end]) => indicesToRange(start, end, nodes))));
+    });
+};
+
+const indicesToRange = (start: number, end: number, textNodes: Node[]) => {
+    const [startNode, startPos] = getRangeArgs(start, textNodes);
+    const [endNode, endPos] = start === end ? [startNode, startPos] : getRangeArgs(end, textNodes);
+
+    const range = new Range();
+
+    if (startNode && endNode && startPos !== -1 && endPos !== -1) {
+        range.setStart(startNode, startPos);
+        range.setEnd(endNode, endPos);
+    }
+
+    return range;
+}
+
+const getRangeArgs = (offset: number, texts: Node[]): [node: Node | null, offset: number] =>
+    texts.reduce(
+        ([node, pos], text) =>
+            node
+                ? [node, pos]
+                : pos <= (text as Text).data.length
+                    ? [text, pos]
+                    : [null, pos - (text as Text).data.length],
+        [null, offset] as [node: Node | null, pos: number],
+    );

src/entry-client.tsx

@@ -1,4 +1,5 @@
 // @refresh reload
 import { mount, StartClient } from "@solidjs/start/client";
+import 'solid-devtools';
 
 mount(() => <StartClient />, document.body);

src/features/command/command.ts

@@ -0,0 +1,51 @@
+import { DictionaryKey } from "../i18n";
+
+export enum Modifier {
+    None = 0,
+    Shift = 1 << 0,
+    Control = 1 << 1,
+    Meta = 1 << 2,
+    Alt = 1 << 3,
+}
+
+export interface CommandType<T extends (...args: any[]) => any = (...args: any[]) => any> {
+    (...args: Parameters<T>): (ReturnType<T> extends Promise<any> ? ReturnType<T> : Promise<ReturnType<T>>);
+    label: DictionaryKey;
+    shortcut?: {
+        key: string;
+        modifier: Modifier;
+    };
+    withLabel(label: string): CommandType<T>;
+    with<A extends any[], B extends any[]>(this: (this: ThisParameterType<T>, ...args: [...A, ...B]) => ReturnType<T>, ...args: A): CommandType<(...args: B) => ReturnType<T>>;
+}
+
+export const createCommand = <T extends (...args: any[]) => any>(label: DictionaryKey, command: T, shortcut?: CommandType['shortcut']): CommandType<T> => {
+    return Object.defineProperties(((...args: Parameters<T>) => command(...args)) as any, {
+        label: {
+            value: label,
+            configurable: false,
+            writable: false,
+        },
+        shortcut: {
+            value: shortcut ? { key: shortcut.key.toLowerCase(), modifier: shortcut.modifier } : undefined,
+            configurable: false,
+            writable: false,
+        },
+        withLabel: {
+            value(label: DictionaryKey) {
+                return createCommand(label, command, shortcut);
+            },
+            configurable: false,
+            writable: false,
+        },
+        with: {
+            value<A extends any[], B extends any[]>(this: (this: ThisParameterType<T>, ...args: [...A, ...B]) => ReturnType<T>, ...args: A): CommandType<(...args: B) => ReturnType<T>> {
+                return createCommand(label, command.bind(undefined, ...args), shortcut);
+            },
+            configurable: false,
+            writable: false,
+        }
+    });
+};
+
+export const noop = createCommand('noop' as any, () => { }); 

src/features/command/context.tsx

@@ -0,0 +1,181 @@
+import { Accessor, children, Component, createContext, createEffect, createMemo, For, JSX, Match, ParentComponent, ParentProps, Show, Switch, useContext } from 'solid-js';
+import { useI18n } from '../i18n';
+import { createStore } from 'solid-js/store';
+import { CommandType, Modifier } from './command';
+import { BsCommand, BsOption, BsShift, BsWindows } from 'solid-icons/bs';
+
+interface CommandContextType {
+    readonly commands: Accessor<CommandType[]>;
+    set(commands: CommandType<any>[]): void;
+    addContextualArguments<T extends (...args: any[]) => any = any>(command: CommandType<T>, target: EventTarget, args: Accessor<Parameters<T>>): void;
+    execute<T extends (...args: any[]) => any = any>(command: CommandType<T>, event: Event): void;
+}
+
+interface CommandContextStateType {
+    commands: CommandType[];
+    contextualArguments: Map<CommandType, WeakMap<EventTarget, Accessor<any[]>>>;
+}
+
+const CommandContext = createContext<CommandContextType>();
+
+export const useCommands = () => useContext(CommandContext);
+
+const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
+    const [store, setStore] = createStore<CommandContextStateType>({ commands: [], contextualArguments: new Map() });
+
+    const context = {
+        commands: createMemo(() => store.commands),
+
+        set(commands: CommandType<any>[]): void {
+            setStore('commands', existing => new Set([...existing, ...commands]).values().toArray());
+        },
+
+        addContextualArguments<T extends (...args: any[]) => any = any>(command: CommandType<T>, target: EventTarget, args: Accessor<Parameters<T>>): void {
+            setStore('contextualArguments', prev => {
+                if (prev.has(command) === false) {
+                    prev.set(command, new WeakMap());
+                }
+
+                prev.get(command)?.set(target, args);
+
+                return new Map(prev);
+            })
+        },
+
+        execute<T extends (...args: any[]) => any = any>(command: CommandType<T>, event: Event): boolean | undefined {
+            const args = ((): Parameters<T> => {
+                const contexts = store.contextualArguments.get(command);
+
+                if (contexts === undefined) {
+                    return [] as any;
+                }
+
+                const element = event.composedPath().find(el => contexts.has(el));
+
+                if (element === undefined) {
+                    return [] as any;
+                }
+
+                const args = contexts.get(element)! as Accessor<Parameters<T>>;
+
+                return args();
+            })();
+
+            event.preventDefault();
+            event.stopPropagation();
+
+            command(...args);
+
+            return false;
+        },
+    };
+
+    createEffect(() => {
+        context.set(props.commands ?? []);
+    });
+
+    const listener = (e: KeyboardEvent) => {
+        if (!e.key) {
+            return;
+        }
+
+        const key = e.key.toLowerCase();
+        const modifiers =
+            (e.shiftKey ? 1 : 0) << 0 |
+            (e.ctrlKey ? 1 : 0) << 1 |
+            (e.metaKey ? 1 : 0) << 2 |
+            (e.altKey ? 1 : 0) << 3;
+
+        const command = store.commands.values().find(c => c.shortcut?.key === key && (c.shortcut.modifier === undefined || c.shortcut.modifier === modifiers));
+
+        if (command === undefined) {
+            return;
+        }
+
+        return context.execute(command, e);
+    };
+
+    return <CommandContext.Provider value={context}>
+        <div tabIndex={0} style="display: contents;" onKeyDown={listener}>{props.children}</div>
+    </CommandContext.Provider>;
+};
+
+const Add: Component<{ command: CommandType, commands: undefined } | { commands: CommandType[] }> = (props) => {
+    const context = useCommands();
+    const commands = createMemo<CommandType[]>(() => props.commands ?? [props.command]);
+
+    createEffect(() => {
+        context?.set(commands());
+    });
+
+    return undefined;
+};
+
+const Context = <T extends (...args: any[]) => any = (...args: any[]) => any>(props: ParentProps<{ for: CommandType<T>, with: Parameters<T> }>): JSX.Element => {
+    const resolved = children(() => props.children);
+    const context = useCommands();
+    const args = createMemo(() => props.with);
+
+    createEffect(() => {
+        const children = resolved();
+
+        if (Array.isArray(children) || !(children instanceof Element)) {
+            return;
+        }
+
+        context?.addContextualArguments(props.for, children, args);
+    });
+
+    return <>{resolved()}</>;
+};
+
+const Handle: Component<{ command: CommandType }> = (props) => {
+    const { t } = useI18n();
+
+    const isMac = false;
+    const isWindows = false;
+
+    return <>
+        {String(t(props.command.label) ?? props.command.label)}
+
+        <Show when={props.command.shortcut}>{
+            shortcut => {
+                const modifier = shortcut().modifier;
+
+                const title: Record<number, string> = {
+                    [Modifier.Shift]: 'shift',
+                    [Modifier.Control]: 'control',
+                    [Modifier.Meta]: 'meta',
+                    [Modifier.Alt]: 'alt',
+                };
+
+                return <samp>
+                    <For each={Object.values(Modifier).filter((m): m is number => typeof m === 'number').filter(m => modifier & m)}>{
+                        (m) => <><kbd title={title[m]}>
+                            <Switch>
+                                <Match when={m === Modifier.Shift}>
+                                    <BsShift />
+                                </Match>
+
+                                <Match when={m === Modifier.Control}>
+                                    <Show when={isMac} fallback="Ctrl"><BsCommand /></Show>
+                                </Match>
+
+                                <Match when={m === Modifier.Meta}>
+                                    <Show when={isWindows} fallback="Meta"><BsWindows /></Show>
+                                </Match>
+
+                                <Match when={m === Modifier.Alt}>
+                                    <Show when={isMac} fallback="Alt"><BsOption /></Show>
+                                </Match>
+                            </Switch>
+                        </kbd>+</>
+                    }</For>
+                    <kbd>{shortcut().key.toUpperCase()}</kbd>
+                </samp>;
+            }
+        }</Show>
+    </>;
+};
+
+export const Command = { Root, Handle, Add, Context };

src/features/command/contextMenu.module.css

@@ -5,11 +5,11 @@
     place-content: start;
 
     inset-inline-start: anchor(start);
-    inset-block-start: anchor(end);
+    inset-block-start: anchor(start);
 
     margin: 0;
     gap: var(--padding-m);
-    padding: var(--padding-m) 0;
+    padding: var(--padding-m);
     font-size: var(--text-s);
 
     background-color: var(--surface-700);
@@ -24,6 +24,7 @@
         align-items: center;
 
         padding: var(--padding-s) var(--padding-m);
+        border-radius: var(--radii-m);
 
         & > sub {
             color: var(--text-2);

src/features/command/contextMenu.tsx

@@ -1,27 +1,28 @@
-import { Accessor, Component, createContext, createEffect, createMemo, createSignal, createUniqueId, For, JSX, ParentComponent, splitProps, useContext } from "solid-js";
-import { CommandType } from "./index";
+import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, JSX, ParentComponent, splitProps, useContext } from "solid-js";
+import { CommandType } from "./command";
 import css from "./contextMenu.module.css";
+import { useCommands } from "./context";
 
 interface ContextMenuType {
     readonly commands: Accessor<CommandType[]>;
-    readonly target: Accessor<HTMLElement | undefined>;
-    show(element: HTMLElement): void;
+    readonly event: Accessor<Event | undefined>;
+    show(event: Event): void;
     hide(): void;
 }
 
 const ContextMenu = createContext<ContextMenuType>()
 
-const Root: ParentComponent<{ commands: CommandType<any[]>[] }> = (props) => {
-    const [target, setTarget] = createSignal<HTMLElement>();
+const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
+    const [event, setEvent] = createSignal<Event>();
 
-    const context = {
+    const context: ContextMenuType = {
         commands: createMemo(() => props.commands),
-        target,
-        show(element: HTMLElement) {
-            setTarget(element);
+        event,
+        show(event) {
+            setEvent(event);
         },
         hide() {
-            setTarget(undefined);
+            setEvent(undefined);
         },
     };
 
@@ -32,17 +33,19 @@ const Root: ParentComponent<{ commands: CommandType<any[]>[] }> = (props) => {
 
 const Menu: Component<{ children: (command: CommandType) => JSX.Element }> = (props) => {
     const context = useContext(ContextMenu)!;
+    const commandContext = useCommands();
     const [root, setRoot] = createSignal<HTMLElement>();
+    const [pos, setPos] = createSignal([0, 0]);
 
     createEffect(() => {
-        const target = context.target();
+        const event = context.event();
         const menu = root();
 
-        if (!menu) {
+        if (!menu || window.getComputedStyle(menu).display === '') {
             return;
         }
 
-        if (target) {
+        if (event) {
             menu.showPopover();
         }
         else {
@@ -50,6 +53,12 @@ const Menu: Component<{ children: (command: CommandType) => JSX.Element }> = (pr
         }
     });
 
+    createEffect(() => {
+        const { offsetX = 0, offsetY = 0 } = (context.event() ?? {}) as MouseEvent;
+
+        setPos([offsetX, offsetY]);
+    });
+
     const onToggle = (e: ToggleEvent) => {
         if (e.newState === 'closed') {
             context.hide();
@@ -57,31 +66,32 @@ const Menu: Component<{ children: (command: CommandType) => JSX.Element }> = (pr
     };
 
     const onCommand = (command: CommandType) => (e: PointerEvent) => {
+        commandContext?.execute(command, context.event()!);
         context.hide();
-
-        command();
     };
 
-    return <ul ref={setRoot} class={css.menu} style={`position-anchor: ${context.target()?.style.getPropertyValue('anchor-name')};`} popover ontoggle={onToggle}>
+    return <menu ref={setRoot} class={css.menu} anchor={context.event()?.target?.id} style={`translate: ${pos()[0]}px ${pos()[1]}px;`} popover ontoggle={onToggle}>
         <For each={context.commands()}>{
             command => <li onpointerdown={onCommand(command)}>{props.children(command)}</li>
         }</For>
-    </ul>;
+    </menu>;
 };
 
 const Handle: ParentComponent<Record<string, any>> = (props) => {
     const [local, rest] = splitProps(props, ['children']);
 
     const context = useContext(ContextMenu)!;
-    const [handle, setHandle] = createSignal<HTMLElement>();
 
-    return <span {...rest} ref={setHandle} style={`anchor-name: --context-menu-handle-${createUniqueId()};`} oncontextmenu={(e) => {
+    return <span {...rest} id={`context-menu-handle-${createUniqueId()};`} oncontextmenu={(e) => {
         e.preventDefault();
 
-        context.show(handle()!);
+        context.show(e);
 
         return false;
     }}>{local.children}</span>;
 };
 
+let handleCounter = 0;
+const createUniqueId = () => `${handleCounter++}`;
+
 export const Context = { Root, Menu, Handle };

src/features/command/index.tsx

@@ -1,176 +1,7 @@
-import { Accessor, children, Component, createContext, createEffect, createMemo, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
+export type { CommandType } from './command';
+export type { CommandPaletteApi } from './palette';
 
-interface CommandContextType {
-    set(commands: CommandType<any[]>[]): void;
-    addContextualArguments<T extends any[] = any[]>(command: CommandType<T>, target: EventTarget, args: Accessor<T>): void;
-    execute<TArgs extends any[] = []>(command: CommandType<TArgs>, event: Event): void;
-}
-
-const CommandContext = createContext<CommandContextType>();
-
-export const useCommands = () => useContext(CommandContext);
-
-const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
-    // const commands = () => props.commands ?? [];
-    const contextualArguments = new Map<CommandType, WeakMap<EventTarget, Accessor<any[]>>>();
-    const commands = new Set<CommandType<any[]>>();
-
-    const context = {
-        set(c: CommandType<any[]>[]): void {
-            for (const command of c) {
-                commands.add(command);
-            }
-        },
-
-        addContextualArguments<T extends any[] = any[]>(command: CommandType<T>, target: EventTarget, args: Accessor<T>): void {
-            if (contextualArguments.has(command) === false) {
-                contextualArguments.set(command, new WeakMap());
-            }
-
-            contextualArguments.get(command)?.set(target, args);
-        },
-
-        execute<T extends any[] = any[]>(command: CommandType<T>, event: Event): boolean | undefined {
-            const args = ((): T => {
-
-                const contexts = contextualArguments.get(command);
-
-                if (contexts === undefined) {
-                    return [] as any;
-                }
-
-                const element = event.composedPath().find(el => contexts.has(el));
-
-                if (element === undefined) {
-                    return [] as any;
-                }
-
-                const args = contexts.get(element)! as Accessor<T>;
-                return args();
-            })();
-
-            event.preventDefault();
-            event.stopPropagation();
-
-            command(...args);
-
-            return false;
-        },
-    };
-
-    createEffect(() => {
-        context.set(props.commands ?? []);
-    });
-
-    const listener = (e: KeyboardEvent) => {
-        const key = e.key.toLowerCase();
-        const modifiers =
-            (e.shiftKey ? 1 : 0) << 0 |
-            (e.ctrlKey ? 1 : 0) << 1 |
-            (e.metaKey ? 1 : 0) << 2 |
-            (e.altKey ? 1 : 0) << 3;
-
-        const command = commands.values().find(c => c.shortcut?.key === key && (c.shortcut.modifier === undefined || c.shortcut.modifier === modifiers));
-
-        if (command === undefined) {
-            return;
-        }
-
-        return context.execute(command, e);
-    };
-
-    return <CommandContext.Provider value={context}>
-        <div tabIndex={0} style="display: contents;" onKeyDown={listener}>{props.children}</div>
-    </CommandContext.Provider>;
-};
-
-const Add: Component<{ command: CommandType<any[]> } | { commands: CommandType<any[]>[] }> = (props) => {
-    const context = useCommands();
-    const commands = createMemo<CommandType<any[]>[]>(() => props.commands ?? [props.command]);
-
-    createEffect(() => {
-        context?.set(commands());
-    });
-
-    return undefined;
-};
-
-const Context = <T extends any[] = any[]>(props: ParentProps<{ for: CommandType<T>, with: T }>): JSX.Element => {
-    const resolved = children(() => props.children);
-    const context = useCommands();
-    const args = createMemo(() => props.with);
-
-    createEffect(() => {
-        const children = resolved();
-
-        if (Array.isArray(children) || !(children instanceof Element)) {
-            return;
-        }
-
-        context?.addContextualArguments(props.for, children, args);
-    });
-
-    return <>{resolved()}</>;
-};
-
-const Handle: Component<{ command: CommandType }> = (props) => {
-    return <>
-        {props.command.label}
-        <Show when={props.command.shortcut}>{
-            shortcut => {
-                const shift = shortcut().modifier & Modifier.Shift ? 'Shft+' : '';
-                const ctrl = shortcut().modifier & Modifier.Control ? 'Ctrl+' : '';
-                const meta = shortcut().modifier & Modifier.Meta ? 'Meta+' : '';
-                const alt = shortcut().modifier & Modifier.Alt ? 'Alt+' : '';
-
-                return <sub>{ctrl}{shift}{meta}{alt}{shortcut().key}</sub>;
-            }
-        }</Show>
-    </>;
-};
-
-export const Command = { Root, Handle, Add, Context };
-
-export enum Modifier {
-    None = 0,
-    Shift = 1 << 0,
-    Control = 1 << 1,
-    Meta = 1 << 2,
-    Alt = 1 << 3,
-}
-
-export interface CommandType<TArgs extends any[] = []> {
-    (...args: TArgs): any;
-    label: string;
-    shortcut?: {
-        key: string;
-        modifier: Modifier;
-    };
-}
-
-export const createCommand = <TArgs extends any[] = []>(label: string, command: (...args: TArgs) => any, shortcut?: CommandType['shortcut']): CommandType<TArgs> => {
-    return Object.defineProperties(command as CommandType<TArgs>, {
-        label: {
-            value: label,
-            configurable: false,
-            writable: false,
-        },
-        shortcut: {
-            value: shortcut ? { key: shortcut.key.toLowerCase(), modifier: shortcut.modifier } : undefined,
-            configurable: false,
-            writable: false,
-        }
-    });
-};
-
-export const noop = Object.defineProperties(createCommand('noop', () => { }), {
-    withLabel: {
-        value(label: string) {
-            return createCommand(label, () => { });
-        },
-        configurable: false,
-        writable: false,
-    },
-}) as CommandType & { withLabel(label: string): CommandType };
-
-export { Context } from './contextMenu';
+export { createCommand, noop, Modifier } from './command';
+export { useCommands, Command } from './context';
+export { Context } from './contextMenu';
+export { CommandPalette } from './palette';

src/features/command/palette.module.css

@@ -0,0 +1,43 @@
+.commandPalette {
+    display: none;
+    background-color: var(--surface-700);
+    color: var(--text-1);
+    gap: var(--padding-m);
+    padding: var(--padding-l);
+    border: 1px solid var(--surface-500);
+
+    &[open] {
+        display: grid;
+    }
+
+    &::backdrop {
+        background-color: color(from var(--surface-700) xyz x y z / .2);
+        backdrop-filter: blur(.25em);
+        pointer-events: all !important;
+    }
+}
+
+.search {
+    display: grid;
+    gap: var(--padding-m);
+
+    & > input {
+        background-color: var(--surface-600);
+        color: var(--text-1);
+        border: none;
+        padding: var(--padding-m);
+    }
+
+    & > output {
+        display: contents;
+        color: var(--text-2);
+
+        & > .selected {
+            background-color: color(from var(--info) xyz x y z / .5);
+        }
+
+        & ::highlight(command-pelette-query) {
+            background-color: var(--secondary-900);
+        }
+    }
+}

src/features/command/palette.tsx

@@ -0,0 +1,191 @@
+import { Accessor, Component, createEffect, createMemo, createSignal, For, JSX, Show } from "solid-js";
+import { useI18n } from "../i18n";
+import { CommandType } from "./command";
+import { useCommands } from "./context";
+import css from "./palette.module.css";
+import { split_by_filter } from "~/utilities";
+import { getTextNodes } from "@solid-primitives/selection";
+
+export interface CommandPaletteApi {
+    readonly open: Accessor<boolean>;
+    show(): void;
+    hide(): void;
+}
+
+export const CommandPalette: Component<{ api?: (api: CommandPaletteApi) => any, onSubmit?: SubmitHandler<CommandType> }> = (props) => {
+    const [open, setOpen] = createSignal<boolean>(false);
+    const [root, setRoot] = createSignal<HTMLDialogElement>();
+    const [search, setSearch] = createSignal<SearchContext<CommandType>>();
+    const context = useCommands();
+    const { t } = useI18n();
+
+    if (!context) {
+        console.log('context is missing...');
+    }
+
+    const api = {
+        open,
+        show() {
+            setOpen(true);
+        },
+        hide() {
+            setOpen(false);
+        },
+    };
+
+    createEffect(() => {
+        props.api?.(api);
+    });
+
+
+    createEffect(() => {
+        const isOpen = open();
+
+        if (isOpen) {
+            search()?.clear();
+            root()?.showModal();
+        } else {
+            root()?.close();
+        }
+    });
+
+    const onSubmit = (command: CommandType) => {
+        setOpen(false);
+        props.onSubmit?.(command);
+
+        command();
+    };
+
+    return <dialog ref={setRoot} class={css.commandPalette} onClose={() => setOpen(false)}>
+        <SearchableList title="command palette" items={context.commands()} keySelector={item => (t(item.label) ?? item.label) as string} context={setSearch} onSubmit={onSubmit}>{
+            (item) => {
+                return <>{t(item.label) ?? item.label}</>;
+            }
+        }</SearchableList>
+    </dialog>;
+};
+
+interface SubmitHandler<T> {
+    (item: T): any;
+}
+
+interface SearchContext<T> {
+    readonly filter: Accessor<string>;
+    readonly results: Accessor<T[]>;
+    readonly value: Accessor<T | undefined>;
+    searchFor(term: string): void;
+    clear(): void;
+}
+
+interface SearchableListProps<T> {
+    items: T[];
+    title?: string;
+    keySelector(item: T): string;
+    filter?: (item: T, search: string) => boolean;
+    children(item: T): JSX.Element;
+    context?: (context: SearchContext<T>) => any,
+    onSubmit?: SubmitHandler<T>;
+}
+
+function SearchableList<T>(props: SearchableListProps<T>): JSX.Element {
+    const [term, setTerm] = createSignal<string>('');
+    const [selected, setSelected] = createSignal<number>(0);
+    const [outputRef, setOutputRef] = createSignal<HTMLElement>();
+    const id = createUniqueId();
+
+    const results = createMemo(() => {
+        const search = term();
+
+        if (search === '') {
+            return [];
+        }
+
+        return props.items.filter(item => props.filter ? props.filter(item, search) : props.keySelector(item).toLowerCase().includes(search.toLowerCase()));
+    });
+
+    const value = createMemo(() => results().at(selected()));
+
+    const ctx = {
+        filter: term,
+        results,
+        value,
+        searchFor(term: string) {
+            setTerm(term);
+        },
+        clear() {
+            setTerm('');
+            setSelected(0);
+        },
+    };
+
+    createEffect(() => {
+        props.context?.(ctx);
+    });
+
+    createEffect(() => {
+        const length = results().length - 1;
+
+        setSelected(current => Math.min(current, length));
+    });
+
+    createEffect(() => {
+        const filter = term();
+        const regexp = new RegExp(filter, 'gi');
+        const ref = outputRef()!;
+
+        const ranges = getTextNodes(ref).flatMap(node => {
+            return node.textContent!.matchAll(regexp).map(({ index }) => {
+                const range = new Range();
+
+                range.setStart(node, index);
+                range.setEnd(node, index + filter.length);
+
+                return range;
+            }).toArray();
+        });
+
+        CSS.highlights.set('command-pelette-query', new Highlight(...ranges));
+    });
+
+    const onKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'ArrowUp') {
+            setSelected(current => Math.max(0, current - 1));
+
+            e.preventDefault();
+        }
+
+        if (e.key === 'ArrowDown') {
+            setSelected(current => Math.min(results().length - 1, current + 1));
+
+            e.preventDefault();
+        }
+    };
+
+    const onSubmit = (e: SubmitEvent) => {
+        e.preventDefault();
+
+        const v = value();
+
+        if (v === undefined) {
+            return;
+        }
+
+        ctx.clear();
+        props.onSubmit?.(v);
+    };
+
+    return <search title={props.title}>
+        <form method="dialog" class={css.search} onkeydown={onKeyDown} onsubmit={onSubmit}>
+            <input id={`search-${id}`} value={term()} onInput={(e) => setTerm(e.target.value)} placeholder="start typing for command" autofocus autocomplete="off" enterkeyhint="go" />
+
+            <output ref={setOutputRef} for={`search-${id}`}>
+                <For each={results()}>{
+                    (result, index) => <div class={`${index() === selected() ? css.selected : ''}`}>{props.children(result)}</div>
+                }</For>
+            </output>
+        </form>
+    </search>;
+};
+
+let keyCounter = 0;
+const createUniqueId = () => `key-${keyCounter++}`;

src/features/dataset/index.spec.ts

@@ -0,0 +1,170 @@
+// import { describe, expect, it } from "bun:test";
+import "@testing-library/jest-dom/vitest";
+import { createDataSet } from "./index";
+import { createEffect, createSignal } from "solid-js";
+import { testEffect, } from "@solidjs/testing-library";
+import { describe, expect } from "vitest";
+import { it } from '~/test-helpers';
+
+interface DataEntry {
+    id: string;
+    name: string;
+    amount: number;
+};
+const [defaultData] = createSignal<DataEntry[]>([
+    { id: '1', name: 'a first name', amount: 30 },
+    { id: '2', name: 'a second name', amount: 20 },
+    { id: '3', name: 'a third name', amount: 10 },
+]);
+
+describe('dataset', () => {
+    describe('createDataset', () => {
+        it('can create an instance', async () => {
+            // Arrange
+
+            // Act
+            const actual = createDataSet(defaultData);
+
+            // Assert
+            expect(actual).toMatchObject({ value: defaultData() })
+        });
+
+        it('can sort by a property', async () => {
+            // Arrange
+
+            // Act
+            const actual = createDataSet(defaultData, { sort: { by: 'amount', reversed: false } });
+
+            // Assert
+            expect(actual.nodes()).toEqual([
+                expect.objectContaining({ key: 2 }),
+                expect.objectContaining({ key: 1 }),
+                expect.objectContaining({ key: 0 }),
+            ])
+        });
+
+        it('can group by a property', async () => {
+            // Arrange
+
+            // Act
+            const actual = createDataSet(defaultData, { group: { by: 'name' } });
+
+            // Assert
+            expect(actual).toEqual(expect.objectContaining({ value: defaultData() }))
+        });
+
+        it('update if the source value changes', () => {
+            // Arrange
+            const [data, setData] = createSignal([
+                { id: '1', name: 'a first name', amount: 30 },
+                { id: '2', name: 'a second name', amount: 20 },
+                { id: '3', name: 'a third name', amount: 10 },
+            ]);
+            const dataset = createDataSet(data);
+
+            dataset.mutateEach(item => ({ ...item, amount: item.amount * 2 }));
+
+            // Act
+            setData([
+                { id: '4', name: 'a first name', amount: 30 },
+                { id: '5', name: 'a second name', amount: 20 },
+                { id: '6', name: 'a third name', amount: 10 },
+            ]);
+
+            // Assert
+            return testEffect(done =>
+                createEffect(() => {
+                    expect(dataset.value).toEqual([
+                        { id: '4', name: 'a first name', amount: 60 },
+                        { id: '5', name: 'a second name', amount: 40 },
+                        { id: '6', name: 'a third name', amount: 20 },
+                    ])
+
+                    done()
+                })
+            );
+        });
+
+        describe('mutate', () => {
+            it('mutates the value', async () => {
+                // Arrange
+                const dataset = createDataSet(defaultData);
+
+                // Act
+                dataset.mutate(0, 'amount', 100);
+
+                // Assert
+                expect(dataset.value[0]!.amount).toBe(100);
+            });
+        });
+
+        describe('mutateEach', () => {
+            it('mutates all the entries', async () => {
+                // Arrange
+                const dataset = createDataSet(defaultData);
+
+                // Act
+                dataset.mutateEach(entry => ({ ...entry, amount: entry.amount + 5 }));
+
+                // Assert
+                expect(dataset.value).toEqual([
+                    expect.objectContaining({ amount: 35 }),
+                    expect.objectContaining({ amount: 25 }),
+                    expect.objectContaining({ amount: 15 }),
+                ]);
+            });
+        });
+
+        describe('remove', () => {
+            it('removes the 2nd entry', async () => {
+                // Arrange
+                const dataset = createDataSet(defaultData);
+
+                // Act
+                dataset.remove([1]);
+
+                // Assert
+                expect(dataset.value[1]).toBeUndefined();
+            });
+        });
+
+        describe('insert', () => {
+            it('adds an entry to the dataset', async () => {
+                // Arrange
+                const dataset = createDataSet(defaultData);
+
+                // Act
+                dataset.insert({ id: '4', name: 'name', amount: 100 });
+
+                // Assert
+                expect(dataset.value[3]).toEqual({ id: '4', name: 'name', amount: 100 });
+            });
+        });
+
+        describe('sort', () => {
+            it('can set the sorting', async () => {
+                // Arrange
+                const dataset = createDataSet(defaultData);
+
+                // Act
+                dataset.sort({ by: 'id', reversed: true });
+
+                // Assert
+                expect(dataset.sorting).toEqual({ by: 'id', reversed: true });
+            });
+        });
+
+        describe('group', () => {
+            it('can set the grouping', async () => {
+                // Arrange
+                const dataset = createDataSet(defaultData);
+
+                // Act
+                dataset.group({ by: 'id' });
+
+                // Assert
+                expect(dataset.grouping).toEqual({ by: 'id' });
+            });
+        });
+    });
+});

src/features/dataset/index.ts

@@ -0,0 +1,216 @@
+import { Accessor, createEffect, createMemo, untrack } from "solid-js";
+import { createStore } from "solid-js/store";
+import { CustomPartial } from "solid-js/store/types/store.js";
+import { deepCopy, deepDiff, MutarionKind, Mutation } from "~/utilities";
+
+export type DataSetRowNode<K, T> = { kind: 'row', key: K, value: T }
+export type DataSetGroupNode<K, T> = { kind: 'group', key: K, groupedBy: keyof T, nodes: DataSetNode<K, T>[] };
+export type DataSetNode<K, T> = DataSetRowNode<K, T> | DataSetGroupNode<K, T>;
+
+export interface SortingFunction<T> {
+    (a: T, b: T): -1 | 0 | 1;
+}
+export interface SortOptions<T extends Record<string, any>> {
+    by: keyof T;
+    reversed: boolean;
+    with?: SortingFunction<T>;
+}
+
+export interface GroupingFunction<K, T> {
+    (nodes: DataSetRowNode<K, T>[]): DataSetNode<K, T>[];
+}
+export interface GroupOptions<T extends Record<string, any>> {
+    by: keyof T;
+    with?: GroupingFunction<number, T>;
+}
+interface DataSetState<T extends Record<string, any>> {
+    value: (T | undefined)[];
+    snapshot: (T | undefined)[];
+    sorting?: SortOptions<T>;
+    grouping?: GroupOptions<T>;
+}
+
+export type Setter<T> =
+    | T
+    | CustomPartial<T>
+    | ((prevState: T) => T | CustomPartial<T>);
+
+export interface DataSet<T extends Record<string, any>> {
+    nodes: Accessor<DataSetNode<keyof T, T>[]>;
+    mutations: Accessor<Mutation[]>;
+    readonly value: (T | undefined)[];
+    readonly sorting: SortOptions<T> | undefined;
+    readonly grouping: GroupOptions<T> | undefined;
+
+    mutate<K extends keyof T>(index: number, prop: K, value: T[K]): void;
+    mutateEach(setter: (value: T) => T): void;
+    remove(indices: number[]): void;
+    insert(item: T, at?: number): void;
+
+    sort(options: Setter<SortOptions<T> | undefined>): DataSet<T>;
+    group(options: Setter<GroupOptions<T> | undefined>): DataSet<T>;
+}
+
+const defaultComparer = <T>(a: T, b: T) => a < b ? -1 : a > b ? 1 : 0;
+function defaultGroupingFunction<T>(groupBy: keyof T): GroupingFunction<number, T> {
+    return <K>(nodes: DataSetRowNode<K, T>[]): DataSetNode<K, T>[] => Object.entries(Object.groupBy(nodes, r => r.value[groupBy] as PropertyKey))
+        .map(([key, nodes]) => ({ kind: 'group', key, groupedBy: groupBy, nodes: nodes! } as DataSetGroupNode<K, T>));
+}
+
+export const createDataSet = <T extends Record<string, any>>(data: Accessor<T[]>, initialOptions?: { sort?: SortOptions<T>, group?: GroupOptions<T> }): DataSet<T> => {
+    const [state, setState] = createStore<DataSetState<T>>({
+        value: deepCopy(data()),
+        snapshot: data(),
+        sorting: initialOptions?.sort,
+        grouping: initialOptions?.group,
+    });
+
+    const nodes = createMemo(() => {
+        const sorting = state.sorting;
+        const grouping = state.grouping;
+
+        let value: DataSetNode<number, T>[] = state.value
+            .map<DataSetRowNode<number, T> | undefined>((value, key) => value === undefined ? undefined : ({ kind: 'row', key, value }))
+            .filter(node => node !== undefined);
+
+        if (sorting) {
+            const comparer = sorting.with ?? defaultComparer;
+
+            value = value.filter(entry => entry.kind === 'row').toSorted((a, b) => comparer(a.value[sorting.by], b.value[sorting.by]));
+
+            if (sorting.reversed) {
+                value.reverse();
+            }
+        }
+
+        if (grouping) {
+            const implementation = grouping.with ?? defaultGroupingFunction(grouping.by);
+
+            value = implementation(value as DataSetRowNode<number, T>[]);
+        }
+
+        return value as DataSetNode<keyof T, T>[];
+    });
+
+    const mutations = createMemo(() => {
+        // enumerate all values to make sure the memo is recalculated on any change
+        Object.values(state.value).map(entry => Object.values(entry ?? {}));
+
+        return deepDiff(state.snapshot, state.value).toArray();
+    });
+
+    const apply = (data: T[], mutations: Mutation[]) => {
+        for (const mutation of mutations) {
+            const path = mutation.key.split('.');
+
+            switch (mutation.kind) {
+                case MutarionKind.Create: {
+                    let v: any = data;
+                    for (const part of path.slice(0, -1)) {
+                        if (v[part] === undefined) {
+                            v[part] = {};
+                        }
+
+                        v = v[part];
+                    }
+
+                    v[path.at(-1)!] = mutation.value;
+
+                    break;
+                }
+
+                case MutarionKind.Delete: {
+                    let v: any = data;
+                    for (const part of path.slice(0, -1)) {
+                        if (v === undefined) {
+                            break;
+                        }
+
+                        v = v[part];
+                    }
+
+                    if (v !== undefined) {
+                        delete v[path.at(-1)!];
+                    }
+
+                    break;
+                }
+
+                case MutarionKind.Update: {
+                    let v: any = data;
+                    for (const part of path.slice(0, -1)) {
+                        if (v === undefined) {
+                            break;
+                        }
+
+                        v = v[part];
+                    }
+
+                    if (v !== undefined) {
+                        v[path.at(-1)!] = mutation.value;
+                    }
+
+                    break;
+                }
+            }
+        }
+
+        return data;
+    };
+
+    createEffect(() => {
+        const next = data();
+        const nextValue = apply(deepCopy(next), untrack(() => mutations()));
+
+        setState('value', nextValue);
+        setState('snapshot', next);
+    });
+
+    const set: DataSet<T> = {
+        nodes,
+        get value() {
+            return state.value;
+        },
+        mutations,
+        get sorting() {
+            return state.sorting;
+        },
+        get grouping() {
+            return state.grouping;
+        },
+
+        mutate(index, prop, value) {
+            setState('value', index, prop as any, value);
+        },
+
+        mutateEach(setter) {
+            setState('value', value => value.map(i => i === undefined ? undefined : setter(i)));
+        },
+
+        remove(indices) {
+            setState('value', value => value.map((item, i) => indices.includes(i) ? undefined : item));
+        },
+
+        insert(item, at) {
+            if (at === undefined) {
+                setState('value', state.value.length, item);
+            } else {
+
+            }
+        },
+
+        sort(options) {
+            setState('sorting', options);
+
+            return set;
+        },
+
+        group(options) {
+            setState('grouping', options)
+
+            return set;
+        },
+    };
+
+    return set;
+};

src/features/file/context.tsx

@@ -0,0 +1,165 @@
+import Dexie, { EntityTable } from "dexie";
+import { Accessor, createContext, createMemo, createResource, InitializedResource, onCleanup, onMount, ParentComponent, useContext } from "solid-js";
+import { createStore } from "solid-js/store";
+import { isServer } from "solid-js/web";
+
+const ROOT = '__root__';
+
+interface FileEntity {
+    key: string;
+    handle: FileSystemDirectoryHandle;
+}
+
+type Store = Dexie & {
+    files: EntityTable<FileEntity, 'key'>;
+};
+
+interface InternalFilesContextType {
+    onChange(hook: (key: string, handle: FileSystemDirectoryHandle) => any): void;
+    set(key: string, handle: FileSystemDirectoryHandle): Promise<void>;
+    get(key: string): Promise<FileSystemDirectoryHandle | undefined>;
+    remove(...keys: string[]): Promise<void>;
+    keys(): Promise<string[]>;
+    entries(): Promise<FileEntity[]>;
+    list(): Promise<FileSystemDirectoryHandle[]>;
+}
+
+interface FilesContextType {
+    readonly files: Accessor<FileEntity[]>,
+    readonly root: Accessor<FileSystemDirectoryHandle | undefined>,
+    readonly loading: Accessor<boolean>,
+
+    open(directory: FileSystemDirectoryHandle): Promise<void>;
+    close(): Promise<void>;
+    get(key: string): Accessor<FileSystemDirectoryHandle | undefined>
+    set(key: string, handle: FileSystemDirectoryHandle): Promise<void>;
+    remove(key: string): Promise<void>;
+}
+
+const FilesContext = createContext<FilesContextType>();
+
+const clientContext = (): InternalFilesContextType => {
+    const db = new Dexie('Files') as Store;
+
+    db.version(1).stores({
+        files: 'key, handle'
+    });
+
+    return {
+        onChange(hook: (key: string, handle: FileSystemDirectoryHandle) => any) {
+            const callHook = (key: string, handle: FileSystemDirectoryHandle) => {
+                if (!key || key === ROOT) {
+                    return;
+                }
+
+                setTimeout(() => hook(key, handle), 1);
+            };
+
+            db.files.hook('creating', (_: string, { key, handle }: FileEntity) => { callHook(key, handle); });
+            db.files.hook('deleting', (_: string, { key, handle }: FileEntity = { key: undefined!, handle: undefined! }) => callHook(key, handle));
+            db.files.hook('updating', (_1: Object, _2: string, { key, handle }: FileEntity) => callHook(key, handle));
+        },
+
+        async set(key: string, handle: FileSystemDirectoryHandle) {
+            await db.files.put({ key, handle });
+        },
+        async get(key: string) {
+            return (await db.files.get(key))?.handle;
+        },
+        async remove(...keys: string[]) {
+            await Promise.all(keys.map(key => db.files.delete(key)));
+        },
+        async keys() {
+            return (await db.files.where('key').notEqual(ROOT).toArray()).map(f => f.key);
+        },
+        async entries() {
+            return await db.files.where('key').notEqual(ROOT).toArray();
+        },
+        async list() {
+            const files = await db.files.where('key').notEqual(ROOT).toArray();
+
+            return files.map(f => f.handle)
+        },
+    }
+};
+
+const serverContext = (): InternalFilesContextType => ({
+    onChange(hook: (key: string, handle: FileSystemDirectoryHandle) => any) {
+
+    },
+    set(key: string, handle: FileSystemDirectoryHandle) {
+        return Promise.resolve();
+    },
+    get(key: string) {
+        return Promise.resolve(undefined);
+    },
+    remove(...keys: string[]) {
+        return Promise.resolve(undefined);
+    },
+    keys() {
+        return Promise.resolve([]);
+    },
+    entries() {
+        return Promise.resolve([]);
+    },
+    list() {
+        return Promise.resolve([]);
+    },
+});
+
+export const FilesProvider: ParentComponent = (props) => {
+    const internal = isServer ? serverContext() : clientContext();
+
+    const [state, setState] = createStore<{ loading: boolean, openedFiles: FileEntity[], root: FileSystemDirectoryHandle | undefined }>({ loading: true, openedFiles: [], root: undefined });
+
+    internal.onChange(async () => {
+        setState('openedFiles', await internal.entries());
+    });
+
+    onMount(() => {
+        (async () => {
+            const [root, openedFiles] = await Promise.all([
+                internal.get(ROOT),
+                internal.entries(),
+            ]);
+
+            setState(prev => ({ ...prev, loading: false, root, openedFiles }));
+        })();
+    });
+
+    const context: FilesContextType = {
+        files: createMemo(() => state.openedFiles),
+        root: createMemo(() => state.root),
+        loading: createMemo(() => state.loading),
+
+        async open(directory: FileSystemDirectoryHandle) {
+            await internal.remove(...(await internal.keys()));
+
+            setState('root', directory);
+
+            await internal.set(ROOT, directory);
+        },
+
+        async close() {
+            setState('root', undefined);
+
+            await internal.remove(ROOT);
+        },
+
+        get(key: string): Accessor<FileSystemDirectoryHandle | undefined> {
+            return createMemo(() => state.openedFiles.find(entity => entity.key === key)?.handle);
+        },
+
+        async set(key: string, handle: FileSystemDirectoryHandle) {
+            await internal.set(key, handle);
+        },
+
+        async remove(key: string) {
+            await internal.remove(key);
+        },
+    };
+
+    return <FilesContext.Provider value={context}>{props.children}</FilesContext.Provider>;
+}
+
+export const useFiles = () => useContext(FilesContext)!;

src/features/file/grid.module.css

@@ -1,128 +1,14 @@
-.table {
-    position: relative;
-    display: grid;
-    grid-template-columns: 2em minmax(10em, max-content) repeat(var(--columns), auto);
-    align-content: start;
-    padding-inline: 1px;
-    margin-inline: -1px;
-
-    block-size: 100%;
-    overflow: clip auto;
-
+.textarea {
     background-color: var(--surface-600);
+    color: var(--text-1);
+    border: 1px solid var(--text-2);
+    border-radius: var(--radii-m);
+    padding: var(--padding-s);
 
-    & input[type="checkbox"] {
-        margin: .1em;
+    overflow: auto !important;
+    max-inline-size: 30em;
+
+    & * {
+        white-space: nowrap;
     }
-
-    & textarea {
-        resize: vertical;
-        min-block-size: max(2em, 100%);
-        max-block-size: 50em;
-
-        background-color: var(--surface-600);
-        color: var(--text-1);
-        border-color: var(--text-2);
-        border-radius: var(--radii-s);
-
-        &:has(::spelling-error, ::grammar-error) {
-            border-color: var(--fail);
-        }
-
-        & ::spelling-error {
-            outline: 1px solid var(--fail);
-            text-decoration: yellow underline;
-        }
-    }
-
-    & .cell {
-        display: grid;
-        padding: .5em;
-        border: 1px solid transparent;
-        border-radius: var(--radii-m);
-
-        &:has(textarea:focus) {
-            border-color: var(--info);
-        }
-
-        & > span {
-            align-self: center;
-        }
-    }
-
-    & :is(.header, .main, .footer) {
-        grid-column: span calc(2 + var(--columns));
-        display: grid;
-        grid-template-columns: subgrid;
-    }
-
-    & .header {
-        position: sticky;
-        inset-block-start: 0;
-        background-color: var(--surface-600);
-        border-block-end: 1px solid var(--surface-300);
-    }
-
-    & .row {
-        --bg: var(--text);
-        --alpha: 0;
-        grid-column: span calc(2 + var(--columns));
-        display: grid;
-        grid-template-columns: subgrid;
-        border: 1px solid transparent;
-        background-color: color(from var(--bg) srgb r g b / var(--alpha));
-
-        &:has(> .cell > :checked) {
-            --bg: var(--info);
-            --alpha: .1;
-            border-color: var(--bg);
-
-            & span {
-                font-variation-settings: 'GRAD' 1000;
-            }
-
-            & + :has(> .cell> :checked) {
-                border-block-start-color: transparent;
-            }
-
-            &:has(+ .row > .cell > :checked) {
-                border-block-end-color: transparent;
-            }
-        }
-
-        &:hover {
-            --alpha: .2 !important;
-        }
-    }
-
-    & details {
-        display: contents;
-
-        &::details-content {
-            grid-column: span calc(2 + var(--columns));
-            display: grid;
-            grid-template-columns: subgrid;
-        }
-
-        &:not([open])::details-content {
-            display: none;
-        }
-
-        & > summary {
-            grid-column: 2 / span calc(1 + var(--columns));
-            padding: .5em;
-            padding-inline-start: calc(var(--depth) * 1em + .5em);
-
-        }
-
-        & > .row > .cell > span {
-            padding-inline-start: calc(var(--depth) * 1em);
-        }
-    }
-}
-
-@property --depth {
-    syntax: "<number>";
-    inherits: false;
-    initial-value: 0;
 }

src/features/file/grid.tsx

@@ -1,263 +1,111 @@
-import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
-import { createStore, produce, unwrap } from "solid-js/store";
-import { SelectionProvider, useSelection, selectable } from "../selectable";
-import { debounce, deepCopy, deepDiff, Mutation } from "~/utilities";
-import css from './grid.module.css';
-
-selectable // prevents removal of import
-
-interface Leaf extends Record<string, string> { }
-export interface Entry extends Record<string, Entry | Leaf> { }
-
-type Rows = Map<string, Record<string, string>>;
-type SelectionItem = { key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> };
-
-export interface GridContextType {
-    readonly rows: Accessor<Record<string, Record<string, string>>>;
-    readonly mutations: Accessor<Mutation[]>;
-    readonly selection: Accessor<SelectionItem[]>;
-    mutate(prop: string, lang: string, value: string): void;
-    remove(props: string[]): void;
-    insert(prop: string): void;
-}
+import { Accessor, Component, createEffect, createMemo, createSignal, For, JSX, Show, untrack } from "solid-js";
+import { decode, Mutation } from "~/utilities";
+import { Column, GridApi as GridCompApi, Grid as GridComp } from "~/components/grid";
+import { createDataSet, DataSetNode, DataSetRowNode } from "~/features/dataset";
+import { SelectionItem } from "../selectable";
+import { useI18n } from "../i18n";
+import { debounce } from "@solid-primitives/scheduled";
+import css from "./grid.module.css"
+import { Textarea } from "~/components/textarea";
 
+export type Entry = { key: string } & { [lang: string]: string };
 export interface GridApi {
-    readonly selection: Accessor<Record<string, Record<string, string>>>;
-    readonly rows: Accessor<Record<string, Record<string, string>>>;
     readonly mutations: Accessor<Mutation[]>;
+    readonly selection: Accessor<SelectionItem<number, Entry>[]>;
+    remove(indices: number[]): void;
+    addKey(key: string): void;
+    addLocale(locale: string): void;
     selectAll(): void;
-    clear(): void;
-    remove(keys: string[]): void;
-    insert(prop: string): void;
+    clearSelection(): void;
+};
+
+const groupBy = (rows: DataSetRowNode<number, Entry>[]) => {
+    type R = DataSetRowNode<number, Entry> & { _key: string };
+
+    const group = (nodes: R[]): DataSetNode<number, Entry>[] => Object
+        .entries(Object.groupBy(nodes, r => r._key.split('.').at(0)!) as Record<number, R[]>)
+        .map<any>(([key, nodes]) => nodes.at(0)?._key === key
+            ? nodes[0]
+            : ({ kind: 'group', key, groupedBy: 'key', nodes: group(nodes.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) })
+        );
+
+    return group(rows.filter(r => r.value.key).map<R>(r => ({ ...r, _key: r.value.key }))) as any;
 }
 
-const GridContext = createContext<GridContextType>();
+export function Grid(props: { class?: string, rows: Entry[], locales: string[], api?: (api: GridApi) => any, children?: (key: string) => JSX.Element }) {
+    const { t } = useI18n();
 
-const isLeaf = (entry: Entry | Leaf): entry is Leaf => Object.values(entry).some(v => typeof v === 'string');
-const useGrid = () => useContext(GridContext)!;
-
-export const Grid: Component<{ class?: string, columns: string[], rows: Rows, api?: (api: GridApi) => any }> = (props) => {
-    const [selection, setSelection] = createSignal<SelectionItem[]>([]);
-    const [state, setState] = createStore<{ rows: Record<string, Record<string, string>>, snapshot: Rows, numberOfRows: number }>({
-        rows: {},
-        snapshot: new Map,
-        numberOfRows: 0,
-    });
-
-    const mutations = createMemo(() => {
-        // enumerate all values to make sure the memo is recalculated on any change
-        Object.values(state.rows).map(entry => Object.values(entry));
-
-        return deepDiff(state.snapshot, state.rows).toArray();
-    });
-    const rows = createMemo(() => Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, unwrap(row)] as const)));
-
-    createEffect(() => {
-        setState('rows', Object.fromEntries(deepCopy(props.rows).entries()));
-        setState('snapshot', props.rows);
-    });
-
-    createEffect(() => {
-        setState('numberOfRows', Object.keys(state.rows).length);
-    });
-
-    const ctx: GridContextType = {
-        rows,
-        mutations,
-        selection,
-
-        mutate(prop: string, lang: string, value: string) {
-            setState('rows', prop, lang, value);
+    const [addedLocales, setAddedLocales] = createSignal<string[]>([]);
+    const rows = createDataSet<Entry>(() => props.rows, { group: { by: 'key', with: groupBy } });
+    const locales = createMemo(() => [...props.locales, ...addedLocales()]);
+    const columns = createMemo<Column<Entry>[]>(() => [
+        {
+            id: 'key',
+            label: t('feature.file.grid.key'),
+            renderer: ({ value }) => props.children?.(value) ?? value.split('.').at(-1),
         },
+        ...locales().toSorted().map<Column<Entry>>(lang => ({
+            id: lang,
+            label: lang,
+            renderer: ({ row, column, value, mutate }) => {
+                const lang = String(column);
+                const { key } = rows.value[row]!;
 
-        remove(props: string[]) {
-            setState('rows', produce(rows => {
-                for (const prop of props) {
-                    delete rows[prop];
-                }
-
-                return rows;
-            }));
-        },
-
-        insert(prop: string) {
-            setState('rows', produce(rows => {
-                rows[prop] = Object.fromEntries(props.columns.slice(1).map(lang => [lang, '']));
-
-                return rows
-            }))
-        },
-    };
-
-    return <GridContext.Provider value={ctx}>
-        <SelectionProvider selection={setSelection} multiSelect>
-            <Api api={props.api} />
-
-            <_Grid class={props.class} columns={props.columns} rows={rows()} />
-        </SelectionProvider>
-    </GridContext.Provider>;
-};
-
-const _Grid: Component<{ class?: string, columns: string[], rows: Record<string, Record<string, string>> }> = (props) => {
-    const columnCount = createMemo(() => props.columns.length - 1);
-    const root = createMemo<Entry>(() => Object.entries(props.rows)
-        .reduce((aggregate, [key, value]) => {
-            let obj: any = aggregate;
-            const parts = key.split('.');
-
-            for (const [i, part] of parts.entries()) {
-                if (Object.hasOwn(obj, part) === false) {
-                    obj[part] = {};
-                }
-
-                if (i === (parts.length - 1)) {
-                    obj[part] = value;
-                }
-                else {
-                    obj = obj[part];
-                }
-            }
-
-            return aggregate;
-        }, {}));
-
-    return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
-        <Head headers={props.columns} />
-
-        <main class={css.main}>
-            <Row entry={root()} />
-        </main>
-    </section>
-};
-
-const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) => {
-    const gridContext = useGrid();
-    const selectionContext = useSelection<{ key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> }>();
-
-    const api: GridApi = {
-        selection: createMemo(() => {
-            const selection = selectionContext.selection();
-
-            return Object.fromEntries(selection.map(({ key, value }) => [key, value()] as const));
-        }),
-        rows: gridContext.rows,
-        mutations: gridContext.mutations,
-        selectAll() {
-            selectionContext.selectAll();
-        },
-        clear() {
-            selectionContext.clear();
-        },
-        remove(props: string[]) {
-            gridContext.remove(props);
-        },
-        insert(prop: string) {
-            gridContext.insert(prop);
-        },
-    };
-
-    createEffect(() => {
-        props.api?.(api);
-    });
-
-    return null;
-};
-
-const Head: Component<{ headers: string[] }> = (props) => {
-    const context = useSelection();
-
-    return <header class={css.header}>
-        <div class={css.cell}>
-            <input
-                type="checkbox"
-                checked={context.selection().length > 0 && context.selection().length === context.length()}
-                indeterminate={context.selection().length !== 0 && context.selection().length !== context.length()}
-                on:input={(e: InputEvent) => e.target.checked ? context.selectAll() : context.clear()}
-            />
-        </div>
-
-        <For each={props.headers}>{
-            header => <span class={css.cell}>{header}</span>
-        }</For>
-    </header>;
-};
-
-const Row: Component<{ entry: Entry, path?: string[] }> = (props) => {
-    const grid = useGrid();
-
-    return <For each={Object.entries(props.entry)}>{
-        ([key, value]) => {
-            const values = Object.entries(value);
-            const path = [...(props.path ?? []), key];
-            const k = path.join('.');
-            const context = useSelection();
-
-            const isSelected = context.isSelected(k);
-
-            return <Show when={isLeaf(value)} fallback={<Group key={key} entry={value as Entry} path={path} />}>
-                <div class={css.row} use:selectable={{ value, key: k }}>
-                    <div class={css.cell}>
-                        <input type="checkbox" checked={isSelected()} on:input={() => context.select([k])} on:pointerdown={e => e.stopPropagation()} />
-                    </div>
-
-                    <div class={css.cell}>
-                        <span style={{ '--depth': path.length - 1 }}>{key}</span>
-                    </div>
-
-                    <For each={values}>{
-                        ([lang, value]) => <div class={css.cell}>
-                            <TextArea key={k} value={value} lang={lang} oninput={(e) => grid.mutate(k, lang, e.data ?? '')} />
-                        </div>
-                    }</For>
-                </div>
-            </Show>;
-        }
-    }</For>
-};
-
-const Group: Component<{ key: string, entry: Entry, path: string[] }> = (props) => {
-    return <details open>
-        <summary style={{ '--depth': props.path.length - 1 }}>{props.key}</summary>
-
-        <Row entry={props.entry} path={props.path} />
-    </details>;
-};
-
-const TextArea: Component<{ key: string, value: string, lang: string, oninput?: (event: InputEvent) => any }> = (props) => {
-    const [element, setElement] = createSignal<HTMLTextAreaElement>();
-
-    const resize = () => {
-        const el = element();
-
-        if (!el) {
-            return;
-        }
-
-        el.style.height = `1px`;
-        el.style.height = `${2 + element()!.scrollHeight}px`;
-    };
-
-    const mutate = debounce(() => {
-        props.oninput?.(new InputEvent('input', {
-            data: element()?.value.trim(),
+                return <Textarea
+                    class={css.textarea}
+                    value={value ?? ''}
+                    lang={lang}
+                    oninput={next => mutate(next)}
+                    placeholder={`${key} in ${lang}`}
+                />
+            },
         }))
-    }, 300);
+    ]);
 
-    const onKeyUp = (e: KeyboardEvent) => {
-        resize();
-        mutate();
-    };
+    const [api, setApi] = createSignal<GridCompApi<Entry>>();
 
-    return <textarea
-        ref={setElement}
+    // Normalize dataset in order to make sure all the files have the correct structure
+    // createEffect(() => {
+    //     // For tracking
+    //     props.rows;
+
+    //     rows.mutateEach(({ key, ...locales }) => ({ key, ...Object.fromEntries(Object.entries(locales).map(([locale, value]) => [locale, value ?? ''])) }))
+    // });
+
+    // createEffect(() => {
+    //     const l = addedLocales();
+
+    //     rows.mutateEach(({ key, ...rest }) => ({ key, ...rest, ...Object.fromEntries(l.map(locale => [locale, rest[locale] ?? ''])) }));
+    // });
+
+    createEffect(() => {
+        props.api?.({
+            mutations: rows.mutations,
+            selection: createMemo(() => api()?.selection() ?? []),
+            remove: rows.remove,
+            addKey(key) {
+                rows.insert({ key, ...Object.fromEntries(locales().map(l => [l, ''])) });
+            },
+            addLocale(locale) {
+                setAddedLocales(locales => new Set([...locales, locale]).values().toArray())
+            },
+            selectAll() {
+                api()?.selectAll();
+            },
+            clearSelection() {
+                api()?.clearSelection();
+            },
+        });
+    });
+
+    return <GridComp data={rows} columns={columns()} api={setApi} />;
+};
+
+const TextArea: Component<{ row: number, key: string, lang: string, value: string, oninput?: (next: string) => any }> = (props) => {
+    return <Textarea
+        class={css.textarea}
         value={props.value}
         lang={props.lang}
-        placeholder={`${props.key} in ${props.lang}`}
-        name={`${props.key}:${props.lang}`}
-        spellcheck={true}
-        wrap="soft"
-        onkeyup={onKeyUp}
-        on:keydown={e => e.stopPropagation()}
-        on:pointerdown={e => e.stopPropagation()}
+        oninput={props.oninput}
     />
 };

src/features/file/helpers.ts

@@ -0,0 +1,290 @@
+import { Accessor, createEffect, from, createSignal } from "solid-js";
+import { json } from "./parser";
+import { filter } from "~/utilities";
+import { isServer } from "solid-js/web";
+import { installIntoGlobal } from 'iterator-helpers-polyfill';
+import { debounce } from "@solid-primitives/scheduled";
+
+installIntoGlobal();
+
+interface Files extends Record<string, { handle: FileSystemFileHandle, file: File }> { }
+interface Contents extends Map<string, Map<string, string>> { }
+
+export const read = (file: File): Promise<Map<string, string> | undefined> => {
+    switch (file.type) {
+        case 'application/json': return json.load(file.text());
+
+        default: return Promise.resolve(undefined);
+    }
+};
+
+export const readFiles = (directory: Accessor<FileSystemDirectoryHandle | undefined>): Accessor<Files> => {
+    return (!isServer && 'FileSystemObserver' in window) ? readFiles__observer(directory) : readFiles__polled(directory)
+};
+
+const readFiles__polled = (directory: Accessor<FileSystemDirectoryHandle | undefined>): Accessor<Files> => {
+    return createPolled<FileSystemDirectoryHandle | undefined, Files>(directory, async (directory, prev) => {
+        if (!directory) {
+            return prev;
+        }
+
+        const next: Files = Object.fromEntries(await Array.fromAsync(
+            filter(directory.values(), (handle): handle is FileSystemFileHandle => handle.kind === 'file' && handle.name.endsWith('.json')),
+            async handle => [await handle.getUniqueId(), { file: await handle.getFile(), handle }]
+        ));
+
+        const keysPrev = Object.keys(prev);
+        const keysNext = Object.keys(next);
+
+        if (keysPrev.length !== keysNext.length) {
+            return next;
+        }
+
+        if (keysPrev.some(prev => keysNext.includes(prev) === false)) {
+            return next;
+        }
+
+        if (Object.entries(prev).every(([id, { file }]) => next[id].file.lastModified === file.lastModified) === false) {
+            return next;
+        }
+
+        return prev;
+    }, { interval: 1000, initialValue: {} });
+};
+
+const readFiles__observer = (directory: Accessor<FileSystemDirectoryHandle | undefined>): Accessor<Files> => {
+    const [files, setFiles] = createSignal<Files>({});
+
+    const observer = new FileSystemObserver(debounce(async records => {
+        for (const record of records) {
+            switch (record.type) {
+                case 'modified': {
+                    if (record.changedHandle.kind === 'file') {
+                        const handle = record.changedHandle as FileSystemFileHandle;
+                        const id = await handle.getUniqueId();
+                        const file = await handle.getFile();
+
+                        setFiles(prev => ({ ...prev, [id]: { file, handle } }));
+                    }
+
+                    break;
+                }
+
+                default: {
+                    console.log(record);
+
+                    break;
+                }
+            }
+        }
+    }, 10));
+
+    createEffect<FileSystemDirectoryHandle | undefined>((last = undefined) => {
+        if (last) {
+            observer.unobserve(last);
+        }
+
+        const dir = directory();
+
+        if (!dir) {
+            return;
+        }
+
+        observer.observe(dir);
+
+        (async () => {
+            setFiles(Object.fromEntries(
+                await dir.values()
+                    .filter((handle): handle is FileSystemFileHandle => handle.kind === 'file' && handle.name.endsWith('.json'))
+                    .map(async handle => [await handle.getUniqueId(), { file: await handle.getFile(), handle }] as const)
+                    .toArray()
+            ));
+        })();
+
+        return dir;
+    });
+
+    return files;
+};
+
+const HANDLE = Symbol('handle');
+const LAST_MODIFIED = Symbol('lastModified');
+export const contentsOf = (directory: Accessor<FileSystemDirectoryHandle | undefined>): Accessor<Contents> => {
+    return (!isServer && 'FileSystemObserver' in window) ? contentsOf__observer(directory) : contentsOf__polled(directory)
+};
+
+const contentsOf__observer = (directory: Accessor<FileSystemDirectoryHandle | undefined>): Accessor<Contents> => {
+    const [contents, setContents] = createSignal<Contents>(new Map);
+
+    const observer = new FileSystemObserver(debounce(async records => {
+        for (const record of records) {
+            switch (record.type) {
+                case 'modified': {
+                    if (record.changedHandle.kind === 'file') {
+                        const handle = record.changedHandle as FileSystemFileHandle;
+                        const id = await handle.getUniqueId();
+                        const file = await handle.getFile();
+                        const entries = (await read(file))!;
+                        entries[LAST_MODIFIED] = file.lastModified;
+
+                        setContents(prev => new Map([...prev, [id, entries]]));
+                    }
+
+                    break;
+                }
+
+                default: {
+                    console.log(record);
+
+                    break;
+                }
+            }
+        }
+    }, 10));
+
+    createEffect<FileSystemDirectoryHandle | undefined>((last = undefined) => {
+        if (last) {
+            observer.unobserve(last);
+        }
+
+        const dir = directory();
+
+        if (!dir) {
+            return;
+        }
+
+        observer.observe(dir);
+
+        (async () => {
+            setContents(new Map(await walk(dir).map(async ({ id, file }) => {
+                const entries = (await read(file))!;
+                entries[LAST_MODIFIED] = file.lastModified;
+
+                return [id, entries] as const;
+            }).toArray()));
+        })();
+
+        return dir;
+    });
+
+    return contents;
+};
+
+const contentsOf__polled = (directory: Accessor<FileSystemDirectoryHandle | undefined>): Accessor<Contents> => {
+    return createPolled<FileSystemDirectoryHandle | undefined, Contents>(directory, async (directory, prev) => {
+        if (!directory) {
+            return prev;
+        }
+
+        const files = await Array.fromAsync(walk(directory));
+
+        const next = async () => new Map(await Promise.all(files.map(async ({ id, file }) => {
+            const entries = (await read(file))!;
+            entries[LAST_MODIFIED] = file.lastModified;
+
+            return [id, entries] as const;
+        })));
+
+        if (files.length !== prev.size) {
+            return next();
+        }
+
+        if (files.every(({ id }) => prev.has(id)) === false) {
+            return next();
+        }
+
+        if (files.every(({ id, file }) => prev.get(id)![LAST_MODIFIED] === file.lastModified) === false) {
+            return next();
+        }
+
+        return prev;
+    }, { interval: 1000, initialValue: new Map() });
+};
+
+function createPolled<S, T>(source: Accessor<S>, callback: (source: S, prev: T) => T | Promise<T>, options: { interval: number, initialValue: T }): Accessor<T> {
+    const { interval, initialValue } = options;
+    const [value, setValue] = createSignal(initialValue);
+    const tick = createTicker(interval);
+
+    createEffect(() => {
+        tick();
+        const s = source();
+
+        (async () => {
+            const prev = value();
+            const next: T = await callback(s, prev);
+
+            setValue(() => next);
+        })();
+    });
+
+    return value;
+};
+
+function createTicker(interval: number): Accessor<boolean> {
+    return from(set => {
+        const ref = setInterval(() => set((v = true) => !v), interval);
+
+        return () => clearInterval(ref);
+    }) as Accessor<boolean>;
+}
+
+async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []): AsyncGenerator<{ id: string, handle: FileSystemFileHandle, path: string[], file: File }, void, never> {
+    for await (const handle of directory.values()) {
+        if (handle.kind === 'directory') {
+            yield* walk(handle, [...path, handle.name]);
+
+            continue;
+        }
+
+        if (!handle.name.endsWith('.json')) {
+            continue;
+        }
+
+        const id = await handle.getUniqueId();
+        const file = await handle.getFile();
+
+        yield { id, handle, path, file };
+    }
+};
+
+declare global {
+    interface Map<K, V> {
+        [HANDLE]: FileSystemFileHandle;
+        [LAST_MODIFIED]: number;
+    }
+
+    type FileSystemObserverCallback = (
+        records: FileSystemChangeRecord[],
+        observer: FileSystemObserver
+    ) => void;
+
+    interface FileSystemObserverObserveOptions {
+        recursive?: boolean;
+    }
+
+    type FileSystemChangeType = 'appeared' | 'disappeared' | 'modified' | 'moved' | 'unknown' | 'errored';
+
+    interface FileSystemChangeRecord {
+        readonly changedHandle: FileSystemHandle;
+        readonly relativePathComponents: ReadonlyArray<string>;
+        readonly type: FileSystemChangeType;
+        readonly relativePathMovedFrom?: ReadonlyArray<string>;
+    }
+
+    interface FileSystemObserver {
+        observe(
+            handle: FileSystemHandle,
+            options?: FileSystemObserverObserveOptions
+        ): Promise<void>;
+        unobserve(handle: FileSystemHandle): void;
+        disconnect(): void;
+    }
+
+    interface FileSystemObserverConstructor {
+        new(callback: FileSystemObserverCallback): FileSystemObserver;
+        readonly prototype: FileSystemObserver;
+    }
+
+    var FileSystemObserver: FileSystemObserverConstructor;
+}

src/features/file/index.tsx

@@ -1,169 +1,7 @@
-import Dexie, { EntityTable } from "dexie";
-import { Accessor, createContext, createMemo, onMount, ParentComponent, useContext } from "solid-js";
-import { createStore } from "solid-js/store";
-import { isServer } from "solid-js/web";
-import * as json from './parser/json';
-
-const ROOT = '__root__';
-
-interface FileEntity {
-    key: string;
-    handle: FileSystemDirectoryHandle;
-}
-
-type Store = Dexie & {
-    files: EntityTable<FileEntity, 'key'>;
-};
-
-interface InternalFilesContextType {
-    onChange(hook: (key: string, handle: FileSystemDirectoryHandle) => any): void;
-    set(key: string, handle: FileSystemDirectoryHandle): Promise<void>;
-    get(key: string): Promise<FileSystemDirectoryHandle | undefined>;
-    remove(...keys: string[]): Promise<void>;
-    keys(): Promise<string[]>;
-    entries(): Promise<FileEntity[]>;
-    list(): Promise<FileSystemDirectoryHandle[]>;
-}
-
-interface FilesContextType {
-    readonly files: Accessor<FileEntity[]>,
-    readonly root: Accessor<FileSystemDirectoryHandle | undefined>,
-
-    open(directory: FileSystemDirectoryHandle): void;
-    get(key: string): Accessor<FileSystemDirectoryHandle | undefined>
-    set(key: string, handle: FileSystemDirectoryHandle): Promise<void>;
-    remove(key: string): Promise<void>;
-}
-
-const FilesContext = createContext<FilesContextType>();
-
-const clientContext = (): InternalFilesContextType => {
-    const db = new Dexie('Files') as Store;
-
-    db.version(1).stores({
-        files: 'key, handle'
-    });
-
-    return {
-        onChange(hook: (key: string, handle: FileSystemDirectoryHandle) => any) {
-            const callHook = (key: string, handle: FileSystemDirectoryHandle) => {
-                if (!key || key === ROOT) {
-                    return;
-                }
-
-                setTimeout(() => hook(key, handle), 1);
-            };
-
-            db.files.hook('creating', (_: string, { key, handle }: FileEntity) => { callHook(key, handle); });
-            db.files.hook('deleting', (_: string, { key, handle }: FileEntity = { key: undefined!, handle: undefined! }) => callHook(key, handle));
-            db.files.hook('updating', (_1: Object, _2: string, { key, handle }: FileEntity) => callHook(key, handle));
-        },
-
-        async set(key: string, handle: FileSystemDirectoryHandle) {
-            await db.files.put({ key, handle });
-        },
-        async get(key: string) {
-            return (await db.files.get(key))?.handle;
-        },
-        async remove(...keys: string[]) {
-            await Promise.all(keys.map(key => db.files.delete(key)));
-        },
-        async keys() {
-            return (await db.files.where('key').notEqual(ROOT).toArray()).map(f => f.key);
-        },
-        async entries() {
-            return await db.files.where('key').notEqual(ROOT).toArray();
-        },
-        async list() {
-            const files = await db.files.where('key').notEqual(ROOT).toArray();
-
-            return files.map(f => f.handle)
-        },
-    }
-};
-
-const serverContext = (): InternalFilesContextType => ({
-    onChange(hook: (key: string, handle: FileSystemDirectoryHandle) => any) {
-
-    },
-    set(key: string, handle: FileSystemDirectoryHandle) {
-        return Promise.resolve();
-    },
-    get(key: string) {
-        return Promise.resolve(undefined);
-    },
-    remove(...keys: string[]) {
-        return Promise.resolve(undefined);
-    },
-    keys() {
-        return Promise.resolve([]);
-    },
-    entries() {
-        return Promise.resolve([]);
-    },
-    list() {
-        return Promise.resolve([]);
-    },
-});
-
-export const FilesProvider: ParentComponent = (props) => {
-    const internal = isServer ? serverContext() : clientContext();
-
-    const [state, setState] = createStore<{ openedFiles: FileEntity[], root: FileSystemDirectoryHandle | undefined }>({ openedFiles: [], root: undefined });
-
-    internal.onChange(async () => {
-        setState('openedFiles', await internal.entries());
-    });
-
-    onMount(() => {
-        (async () => {
-            const [root, files] = await Promise.all([
-                internal.get(ROOT),
-                internal.entries(),
-            ]);
-
-            setState('root', root);
-            setState('openedFiles', files);
-        })();
-    });
-
-    const context: FilesContextType = {
-        files: createMemo(() => state.openedFiles),
-        root: createMemo(() => state.root),
-
-        async open(directory: FileSystemDirectoryHandle) {
-            await internal.remove(...(await internal.keys()));
-
-            setState('root', directory);
-
-            await internal.set(ROOT, directory);
-        },
-
-        get(key: string): Accessor<FileSystemDirectoryHandle | undefined> {
-            return createMemo(() => state.openedFiles.find(entity => entity.key === key)?.handle);
-        },
-
-        async set(key: string, handle: FileSystemDirectoryHandle) {
-            await internal.set(key, handle);
-        },
-
-        async remove(key: string) {
-            await internal.remove(key);
-        },
-    };
-
-    return <FilesContext.Provider value={context}>{props.children}</FilesContext.Provider>;
-}
-
-export const useFiles = () => useContext(FilesContext)!;
-
-export const load = (file: File): Promise<Map<string, string> | undefined> => {
-    switch (file.type) {
-        case 'application/json': return json.load(file.stream())
-
-        default: return Promise.resolve(undefined);
-    }
-};
 
+export { read, readFiles } from './helpers';
+export { useFiles, FilesProvider } from './context';
 export { Grid } from './grid';
+export { TreeProvider, Tree, useTree } from './tree';
+
 export type { Entry } from './grid';

src/features/file/parser/index.ts

@@ -0,0 +1 @@
+export * as json from './json';

src/features/file/parser/json.ts

@@ -1,199 +1,20 @@
+import { decode } from "~/utilities";
 
-export async function load(stream: ReadableStream<Uint8Array>): Promise<Map<string, string>> {
-    return new Map(await Array.fromAsync(parse(stream), ({ key, value }) => [key, value]));
-}
+export async function load(text: Promise<string>): Promise<Map<string, string>> {
+    const source = JSON.parse(await text);
+    const result = new Map();
+    const candidates = Object.entries(source);
 
-interface Entry {
-    key: string;
-    value: string;
-}
+    while (candidates.length !== 0) {
+        const [ key, value ] = candidates.shift()!;
 
-interface State {
-    (token: Token): State;
-    entry?: Entry
-}
-
-const states = {
-    none(): State {
-        return (token: Token) => {
-            if (token.kind === 'braceOpen') {
-                return states.object();
-            }
-
-            return states.none;
-        };
-    },
-    object({ path = [], expect = 'key' }: Partial<{ path: string[], expect: 'key' | 'colon' | 'value' }> = {}): State {
-        return (token: Token) => {
-            switch (expect) {
-                case 'key': {
-                    if (token.kind === 'braceClose') {
-                        return states.object({
-                            path: path.slice(0, -1),
-                            expect: 'key',
-                        });
-                    }
-                    else if (token.kind === 'string') {
-                        return states.object({
-                            path: [...path, token.value],
-                            expect: 'colon'
-                        });
-                    }
-
-                    return states.error(`Expected a key, got ${token.kind} instead`);
-                }
-
-                case 'colon': {
-                    if (token.kind !== 'colon') {
-                        return states.error(`Expected a ':', got ${token.kind} instead`);
-                    }
-
-                    return states.object({
-                        path,
-                        expect: 'value'
-                    });
-                }
-
-                case 'value': {
-                    if (token.kind === 'braceOpen') {
-                        return states.object({
-                            path,
-                            expect: 'key',
-                        });
-                    }
-                    else if (token.kind === 'string') {
-                        const next = states.object({
-                            path: path.slice(0, -1),
-                            expect: 'key',
-                        });
-
-                        next.entry = { key: path.join('.'), value: token.value };
-
-                        return next
-                    }
-
-                    return states.error(`Invalid value type found '${token.kind}'`);
-                }
-            }
-
-            return states.none();
+        if (typeof value !== 'object' || value === null || value === undefined) {
+            result.set(key, decode(value as string));
         }
-    },
-    error(message: string): State {
-        throw new Error(message);
-
-        return states.none();
-    },
-} as const;
-
-async function* parse(stream: ReadableStream<Uint8Array>): AsyncGenerator<any, void, unknown> {
-    let state = states.none();
-
-    for await (const token of tokenize(read(toGenerator(stream)))) {
-        try {
-            state = state(token);
-        }
-        catch (e) {
-            console.error(e);
-
-            break;
-        }
-
-        if (state.entry) {
-            yield state.entry;
+        else {
+            candidates.unshift(...Object.entries(value).map<[string, any]>(([ k, v ]) => [`${key}.${k}`, v]));
         }
     }
-}
 
-async function* take<T>(iterable: AsyncIterable<T>, numberToTake: number): AsyncGenerator<T, void, unknown> {
-    let i = 0;
-    for await (const entry of iterable) {
-        yield entry;
-
-        i++;
-
-        if (i === numberToTake) {
-            break;
-        }
-    }
-}
-
-type Token = { start: number, length: number } & (
-    | { kind: 'braceOpen' }
-    | { kind: 'braceClose' }
-    | { kind: 'colon' }
-    | { kind: 'string', value: string }
-);
-
-async function* tokenize(characters: AsyncIterable<number>): AsyncGenerator<Token, void, unknown> {
-    let buffer: string = '';
-    let clearBuffer = false;
-    let start = 0;
-    let i = 0;
-
-    for await (const character of characters) {
-        if (buffer.length === 0) {
-            start = i;
-        }
-
-        buffer += String.fromCharCode(character);
-        const length = buffer.length;
-
-        if (buffer === '{') {
-            yield { kind: 'braceOpen', start, length };
-            clearBuffer = true;
-        }
-        else if (buffer === '}') {
-            yield { kind: 'braceClose', start, length };
-            clearBuffer = true;
-        }
-        else if (buffer === ':') {
-            yield { kind: 'colon', start, length };
-            clearBuffer = true;
-        }
-        else if (buffer.length > 1 && buffer.startsWith('"') && buffer.endsWith('"') && buffer.at(-2) !== '\\') {
-            yield { kind: 'string', start, length, value: buffer.slice(1, buffer.length - 1) };
-            clearBuffer = true;
-        }
-        else if (buffer === ',') {
-            clearBuffer = true;
-        }
-        else if (buffer.trim() === '') {
-            clearBuffer = true;
-        }
-
-        if (clearBuffer) {
-            buffer = '';
-            clearBuffer = false;
-        }
-
-        i++;
-    }
-}
-
-async function* read(chunks: AsyncIterable<Uint8Array>): AsyncGenerator<number, void, unknown> {
-    for await (const chunk of chunks) {
-        for (const character of chunk) {
-            yield character;
-        }
-    }
-}
-
-async function* toGenerator<T>(stream: ReadableStream<T>): AsyncGenerator<T, void, unknown> {
-    const reader = stream.getReader();
-
-    try {
-        while (true) {
-            const { done, value } = await reader.read();
-
-            if (done) {
-                break;
-            }
-
-            yield value;
-        }
-    }
-    finally {
-        reader.releaseLock();
-    }
+    return result;
 }

src/features/file/tree.tsx

@@ -0,0 +1,169 @@
+import { Accessor, children, Component, createContext, createEffect, createMemo, createResource, createSignal, For, InitializedResource, JSX, onCleanup, ParentComponent, Setter, Show, useContext } from "solid-js";
+import { AiFillFile, AiFillFolder, AiFillFolderOpen } from "solid-icons/ai";
+import { SelectionProvider, selectable } from "~/features/selectable";
+import { debounce } from "@solid-primitives/scheduled";
+import css from "./tree.module.css";
+
+selectable;
+
+export interface FileEntry {
+    name: string;
+    id: string;
+    kind: 'file';
+    handle: FileSystemFileHandle;
+    directory: FileSystemDirectoryHandle;
+    meta: File;
+}
+
+export interface FolderEntry {
+    name: string; handle
+    id: string;
+    kind: 'folder';
+    handle: FileSystemDirectoryHandle;
+    entries: Entry[];
+}
+
+export type Entry = FileEntry | FolderEntry;
+
+export const emptyFolder: FolderEntry = { name: '', id: '', kind: 'folder', entries: [], handle: undefined as unknown as FileSystemDirectoryHandle } as const;
+
+export async function* walk(directory: FileSystemDirectoryHandle, filters: RegExp[] = [], depth = 0): AsyncGenerator<Entry, void, never> {
+    if (depth === 10) {
+        return;
+    }
+
+    for await (const handle of directory.values()) {
+        if (filters.some(f => f.test(handle.name))) {
+            continue;
+        }
+
+        const id = await handle.getUniqueId();
+
+        if (handle.kind === 'file') {
+            yield { name: handle.name, id, handle, kind: 'file', meta: await handle.getFile(), directory };
+        }
+        else {
+            yield { name: handle.name, id, handle, kind: 'folder', entries: await Array.fromAsync(walk(handle, filters, depth + 1)) };
+        }
+    }
+}
+
+interface TreeContextType {
+    readonly tree: Accessor<FolderEntry>;
+    readonly name: Accessor<string>;
+    readonly open: Accessor<boolean>;
+    readonly setOpen: Setter<boolean>;
+
+    onOpen(file: File): void;
+}
+
+const TreeContext = createContext<TreeContextType>();
+
+export const TreeProvider: ParentComponent<{ directory: FileSystemDirectoryHandle, onOpen?: (file: File) => void }> = (props) => {
+    const [open, setOpen] = createSignal(false);
+    const tree = readTree(() => props.directory);
+
+    const context = {
+        tree,
+        name: createMemo(() => props.directory.name),
+        open,
+        setOpen,
+
+        onOpen(file: File) {
+            props.onOpen?.(file);
+        },
+    };
+
+    return <TreeContext.Provider value={context}>
+        {props.children}
+    </TreeContext.Provider>;
+}
+
+export const useTree = () => {
+    const context = useContext(TreeContext);
+
+    if (!context) {
+        throw new Error('`useTree` is called outside of a <TreeProvider />');
+    }
+
+    return context;
+}
+
+export const Tree: Component<{
+    children: readonly [(folder: Accessor<FolderEntry>) => JSX.Element, (file: Accessor<FileEntry>) => JSX.Element]
+}> = (props) => {
+    const [, setSelection] = createSignal<object[]>([]);
+    const context = useTree();
+
+    return <SelectionProvider selection={setSelection}>
+        <div class={css.root}><_Tree entries={context.tree().entries} children={props.children} /></div>
+    </SelectionProvider>;
+}
+
+const _Tree: Component<{ entries: Entry[], children: readonly [(folder: Accessor<FolderEntry>) => JSX.Element, (file: Accessor<FileEntry>) => JSX.Element] }> = (props) => {
+    const context = useTree();
+
+    return <For each={props.entries.toSorted(sort_by('kind'))}>{
+        entry => <>
+            <Show when={entry.kind === 'folder' ? entry : undefined}>{
+                folder => <Folder folder={folder()} children={props.children} />
+            }</Show>
+
+            <Show when={entry.kind === 'file' ? entry : undefined}>{
+                file => <span use:selectable={{ key: file().id, value: file() }} ondblclick={() => context.onOpen(file().meta)}><AiFillFile /> {props.children[1](file)}</span>
+            }</Show>
+        </>
+    }</For>
+}
+
+const Folder: Component<{ folder: FolderEntry, children: readonly [(folder: Accessor<FolderEntry>) => JSX.Element, (file: Accessor<FileEntry>) => JSX.Element] }> = (props) => {
+    const [open, setOpen] = createSignal(true);
+
+    return <details open={open()} ontoggle={() => debounce(() => setOpen(o => !o), 1)}>
+        <summary><Show when={open()} fallback={<AiFillFolder />}><AiFillFolderOpen /></Show> {props.children[0](() => props.folder)}</summary>
+        <_Tree entries={props.folder.entries} children={props.children} />
+    </details>;
+};
+
+const sort_by = (key: string) => (objA: Record<string, any>, objB: Record<string, any>) => {
+    const a = objA[key];
+    const b = objB[key];
+
+    return Number(a < b) - Number(b < a);
+};
+
+const readTree = (directory: Accessor<FileSystemDirectoryHandle>): Accessor<FolderEntry> => {
+    const [entries, { refetch }] = createResource<Entry[]>(async (_, { value: prev }) => {
+        const dir = directory();
+
+        prev ??= [];
+        const next: Entry[] = await Array.fromAsync(walk(dir));
+
+        const prevEntries = flatten(prev).map(e => e.id).toSorted();
+        const nextEntries = flatten(next).map(e => e.id).toSorted();
+
+        if (prevEntries.length !== nextEntries.length) {
+            return next;
+        }
+
+        if (prevEntries.some((entry, i) => entry !== nextEntries[i])) {
+            return next;
+        }
+
+        return prev;
+    }, { initialValue: [] })
+
+    const interval = setInterval(() => {
+        refetch();
+    }, 1000);
+
+    onCleanup(() => {
+        clearInterval(interval);
+    });
+
+    return createMemo<FolderEntry>(() => ({ name: directory().name, id: '', kind: 'folder', handle: directory(), entries: entries.latest }));
+};
+
+const flatten = (entries: Entry[]): Entry[] => {
+    return entries.flatMap(entry => entry.kind === 'folder' ? [entry, ...flatten(entry.entries)] : entry)
+}

src/features/i18n/constants.ts

@@ -0,0 +1,9 @@
+import { Locale } from "./context";
+
+import Flag_en_GB from 'flag-icons/flags/4x3/gb.svg';
+import Flag_nl_NL from 'flag-icons/flags/4x3/nl.svg';
+
+export const locales: Record<Locale, { label: string, flag: any }> = {
+    'en-GB': { label: 'English', flag: Flag_en_GB },
+    'nl-NL': { label: 'Nederlands', flag: Flag_nl_NL },
+} as const;

src/features/i18n/context.tsx

@@ -0,0 +1,61 @@
+import { Accessor, createContext, createMemo, createSignal, ParentComponent, Setter, useContext } from 'solid-js';
+import { translator, flatten, Translator, Flatten } from "@solid-primitives/i18n";
+import { makePersisted } from '@solid-primitives/storage';
+import en from '~/i18n/en-GB.json';
+import nl from '~/i18n/nl-NL.json';
+
+type RawDictionary = typeof en;
+export type Dictionary = Flatten<RawDictionary>;
+export type DictionaryKey = keyof Dictionary;
+export type Locale = 'en-GB' | 'nl-NL';
+
+const dictionaries = {
+    'en-GB': en,
+    'nl-NL': nl,
+} as const;
+
+interface I18nContextType {
+    readonly t: Translator<Dictionary>;
+    readonly locale: Accessor<Locale>;
+    readonly setLocale: Setter<Locale>;
+    readonly dictionaries: Accessor<Record<Locale, RawDictionary>>;
+    readonly availableLocales: Accessor<Locale[]>;
+}
+
+const I18nContext = createContext<I18nContextType>();
+
+export const I18nProvider: ParentComponent = (props) => {
+    const [locale, setLocale, initLocale] = makePersisted(createSignal<Locale>('en-GB'), { name: 'locale' });
+    const dictionary = createMemo(() => flatten(dictionaries[locale()]));
+    const t = translator(dictionary);
+
+    const ctx: I18nContextType = {
+        t,
+        locale,
+        setLocale,
+        dictionaries: createMemo(() => dictionaries),
+        availableLocales: createMemo(() => Object.keys(dictionaries) as Locale[]),
+    };
+
+    return <I18nContext.Provider value={ctx}>{props.children}</I18nContext.Provider>
+};
+
+export const useI18n = () => {
+    const context = useContext(I18nContext);
+
+    if (!context) {
+        throw new Error(`'useI18n' is called outside the scope of an <I18nProvider />`);
+    }
+
+    return { t: context.t, locale: context.locale };
+};
+
+export const internal_useI18n = () => {
+    const context = useContext(I18nContext);
+
+    if (!context) {
+        throw new Error(`'useI18n' is called outside the scope of an <I18nProvider />`);
+    }
+
+    return context;
+};

src/features/i18n/index.tsx

@@ -0,0 +1,3 @@
+export type { Dictionary, DictionaryKey } from './context';
+export { I18nProvider, useI18n } from './context';
+export { LocalePicker } from './picker';

src/features/i18n/picker.module.css

@@ -0,0 +1,7 @@
+.box {
+    grid-template-columns: 1fr;
+}
+
+.flag {
+    inline-size: 1em;
+}

src/features/i18n/picker.tsx

@@ -0,0 +1,23 @@
+import { Component } from "solid-js";
+import { internal_useI18n } from "./context";
+import { locales } from "./constants";
+import { Select } from "~/components/select";
+import { Dynamic } from "solid-js/web";
+import css from './picker.module.css';
+
+interface LocalePickerProps { }
+
+export const LocalePicker: Component<LocalePickerProps> = (props) => {
+    const { locale, setLocale } = internal_useI18n();
+
+    return <Select
+        id="locale-picker"
+        class={css.box}
+        value={locale()}
+        setValue={setLocale}
+        values={locales}
+        showCaret={false}
+    >
+        {(locale, { flag, label }) => <Dynamic component={flag} lang={locale} aria-label={label} class={css.flag} />}
+    </Select>
+};

src/features/menu/index.module.css

@@ -1,10 +1,15 @@
 .root {
+    display: grid;
+    grid-auto-flow: column;
+    margin: 0;
+    padding: 0;
+
     & > div {
         display: contents;
     }
 }
 
-.item {
+:is(.item, .child > button) {
     padding: var(--padding-m) var(--padding-l);
 
     background-color: inherit;
@@ -19,26 +24,12 @@
     }
 }
 
-.child {
-    position: fixed;
-    inset-inline-start: anchor(self-start);
-    inset-block-start: anchor(end);
-
+.child > dialog {
     grid-template-columns: auto auto;
     place-content: start;
 
     gap: var(--padding-m);
     padding: var(--padding-m) 0;
-    inline-size: max-content;
-
-    background-color: var(--surface-500);
-    border: 1px solid var(--surface-300);
-    border-block-start-width: 0;
-    margin: unset;
-
-    &:popover-open {
-        display: grid;
-    }
 
     & > .separator {
         grid-column: span 2;
@@ -58,58 +49,5 @@
         &:hover {
             background-color: var(--surface-600);
         }
-
-        & > sub {
-            color: var(--text-2);
-            text-align: end;
-        }
-    }
-}
-
-:popover-open + .item {
-    background-color: var(--surface-500);
-}
-
-.commandPalette {
-    display: none;
-    background-color: var(--surface-700);
-    color: var(--text-1);
-    gap: var(--padding-m);
-    padding: var(--padding-l);
-    border: 1px solid var(--surface-500);
-
-    &[open] {
-        display: grid;
-    }
-
-    &::backdrop {
-        background-color: color(from var(--surface-700) xyz x y z / .2);
-        backdrop-filter: blur(.25em);
-        pointer-events: all !important;
-    }
-}
-
-.search {
-    display: grid;
-    gap: var(--padding-m);
-
-    & > input {
-        background-color: var(--surface-600);
-        color: var(--text-1);
-        border: none;
-        padding: var(--padding-m);
-    }
-
-    & > output {
-        display: contents;
-        color: var(--text-2);
-
-        & > .selected {
-            background-color: color(from var(--info) xyz x y z / .5);
-        }
-
-        & b {
-            color: var(--text-1);
-        }
     }
 }

src/features/menu/index.tsx

@@ -1,8 +1,9 @@
-import { Accessor, Component, For, JSX, Match, ParentComponent, Setter, Show, Switch, children, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, useContext } from "solid-js";
+import { Accessor, Component, For, JSX, Match, ParentComponent, Setter, Show, Switch, children, createContext, createEffect, createMemo, createSignal, mergeProps, useContext } from "solid-js";
 import { Portal } from "solid-js/web";
 import { createStore } from "solid-js/store";
 import { CommandType, Command, useCommands } from "../command";
 import css from "./index.module.css";
+import { Dropdown, DropdownApi } from "~/components/dropdown";
 
 export interface MenuContextType {
     ref: Accessor<Node | undefined>;
@@ -75,9 +76,9 @@ const useMenu = () => {
     return context;
 }
 
-type ItemProps = { label: string, children: JSX.Element } | { command: CommandType };
+type ItemProps<T extends (...args: any[]) => any> = { label: string, children: JSX.Element, command?: undefined } | { command: CommandType<T> };
 
-const Item: Component<ItemProps> = (props) => {
+function Item<T extends (...args: any[]) => any>(props: ItemProps<T>) {
     const id = createUniqueId();
 
     if (props.command) {
@@ -102,77 +103,39 @@ const Separator: Component = (props) => {
 const Root: ParentComponent<{}> = (props) => {
     const menuContext = useMenu();
     const commandContext = useCommands();
-    const [current, setCurrent] = createSignal<HTMLElement>();
     const items = children(() => props.children).toArray() as unknown as (Item | ItemWithChildren)[];
 
-    menuContext.addItems(items)
-
-    const close = () => {
-        const el = current();
-
-        if (el) {
-            el.hidePopover();
-
-            setCurrent(undefined);
-        }
-    };
-
-    const onExecute = (command?: CommandType) => {
-        return command
-            ? (e: Event) => {
-                close();
-
-                return commandContext?.execute(command, e);
-            }
-            : () => { }
-    };
-
-    const Child: Component<{ command: CommandType }> = (props) => {
-        return <button class={css.item} type="button" onpointerdown={onExecute(props.command)}>
-            <Command.Handle command={props.command} />
-        </button>
-    };
+    menuContext.addItems(items);
 
     return <Portal mount={menuContext.ref()}>
         <For each={items}>{
             item => <Switch>
                 <Match when={item.kind === 'node' ? item as ItemWithChildren : undefined}>{
-                    item => <>
-                        <div
-                            class={css.child}
-                            id={`child-${item().id}`}
-                            style={`position-anchor: --menu-${item().id};`}
-                            popover
-                            on:toggle={(e: ToggleEvent) => {
-                                if (e.newState === 'open' && e.target !== null) {
-                                    return setCurrent(e.target as HTMLElement);
-                                }
-                            }}
-                        >
+                    item => {
+                        const [dropdown, setDropdown] = createSignal<DropdownApi>();
+
+                        return <Dropdown api={setDropdown} class={css.child} id={`child-${item().id}`} text={item().label}>
                             <For each={item().children}>{
                                 child => <Switch>
                                     <Match when={child.kind === 'leaf' ? child as Item : undefined}>{
-                                        item => <Child command={item().command} />
+                                        item => <button class={css.item} type="button" onpointerdown={e => {
+                                            commandContext?.execute(item().command, e);
+                                            dropdown()?.hide();
+                                        }}>
+                                            <Command.Handle command={item().command} />
+                                        </button>
                                     }</Match>
 
                                     <Match when={child.kind === 'separator'}><hr class={css.separator} /></Match>
-                                </Switch>
-                            }</For>
-                        </div>
-
-                        <button
-                            class={css.item}
-                            type="button"
-                            popovertarget={`child-${item().id}`}
-                            style={`anchor-name: --menu-${item().id};`}
-                        >
-                            {item().label}
-                        </button>
-                    </>
+                                </Switch>}</For>
+                        </Dropdown>;
+                    }
                 }</Match>
 
                 <Match when={item.kind === 'leaf' ? item as Item : undefined}>{
-                    item => <Child command={item().command} />
+                    item => <button class={css.item} type="button" onpointerdown={e => commandContext?.execute(item().command, e)}>
+                        <Command.Handle command={item().command} />
+                    </button>
                 }</Match>
             </Switch>
         }</For>
@@ -182,167 +145,13 @@ const Root: ParentComponent<{}> = (props) => {
 const Mount: Component = (props) => {
     const menu = useMenu();
 
-    return <div class={css.root} ref={menu.setRef} />;
+    return <menu class={css.root} ref={menu.setRef} />;
 };
 
 export const Menu = { Mount, Root, Item, Separator } as const;
 
-export interface CommandPaletteApi {
-    readonly open: Accessor<boolean>;
-    show(): void;
-    hide(): void;
-}
-
-export const CommandPalette: Component<{ api?: (api: CommandPaletteApi) => any, onSubmit?: SubmitHandler<CommandType> }> = (props) => {
-    const [open, setOpen] = createSignal<boolean>(false);
-    const [root, setRoot] = createSignal<HTMLDialogElement>();
-    const [search, setSearch] = createSignal<SearchContext<CommandType>>();
-    const context = useMenu();
-
-    const api = {
-        open,
-        show() {
-            setOpen(true);
-        },
-        hide() {
-            setOpen(false);
-        },
-    };
-
-    createEffect(() => {
-        props.api?.(api);
-    });
-
-
-    createEffect(() => {
-        const isOpen = open();
-
-        if (isOpen) {
-            search()?.clear();
-            root()?.showModal();
-        } else {
-            root()?.close();
-        }
-    });
-
-    const onSubmit = (command: CommandType) => {
-        setOpen(false);
-        props.onSubmit?.(command);
-
-        command();
-    };
-
-    return <dialog ref={setRoot} class={css.commandPalette} onClose={() => setOpen(false)}>
-        <SearchableList<CommandType> items={context.commands()} keySelector={item => item.label} context={setSearch} onSubmit={onSubmit}>{
-            (item, ctx) => <For each={item.label.split(ctx.filter())}>{
-                (part, index) => <>
-                    <Show when={index() !== 0}><b>{ctx.filter()}</b></Show>
-                    {part}
-                </>
-            }</For>
-        }</SearchableList>
-    </dialog>;
-};
-
-interface SubmitHandler<T> {
-    (item: T): any;
-}
-
-interface SearchContext<T> {
-    readonly filter: Accessor<string>;
-    readonly results: Accessor<T[]>;
-    readonly value: Accessor<T | undefined>;
-    searchFor(term: string): void;
-    clear(): void;
-}
-
-interface SearchableListProps<T> {
-    items: T[];
-    keySelector(item: T): string;
-    filter?: (item: T, search: string) => boolean;
-    children(item: T, context: SearchContext<T>): JSX.Element;
-    context?: (context: SearchContext<T>) => any,
-    onSubmit?: SubmitHandler<T>;
-}
-
-function SearchableList<T>(props: SearchableListProps<T>): JSX.Element {
-    const [term, setTerm] = createSignal<string>('');
-    const [input, setInput] = createSignal<HTMLInputElement>();
-    const [selected, setSelected] = createSignal<number>(0);
-    const id = createUniqueId();
-
-    const results = createMemo(() => {
-        const search = term();
-
-        if (search === '') {
-            return [];
-        }
-
-        return props.items.filter(item => props.filter ? props.filter(item, search) : props.keySelector(item).includes(search));
-    });
-
-    const value = createMemo(() => results().at(selected()));
-
-    const ctx = {
-        filter: term,
-        results,
-        value,
-        searchFor(term: string) {
-            setTerm(term);
-        },
-        clear() {
-            setTerm('');
-            setSelected(0);
-        },
-    };
-
-    createEffect(() => {
-        props.context?.(ctx);
-    });
-
-    createEffect(() => {
-        const length = results().length - 1;
-
-        setSelected(current => current !== undefined ? Math.min(current, length) : undefined);
-    });
-
-    const onKeyDown = (e: KeyboardEvent) => {
-        if (e.key === 'ArrowUp') {
-            setSelected(current => Math.max(0, current - 1));
-
-            e.preventDefault();
-        }
-
-        if (e.key === 'ArrowDown') {
-            setSelected(current => Math.min(results().length - 1, current + 1));
-
-            e.preventDefault();
-        }
-    };
-
-    const onSubmit = (e: SubmitEvent) => {
-        e.preventDefault();
-
-        const v = value();
-
-        if (v === undefined) {
-            return;
-        }
-
-        ctx.clear();
-        props.onSubmit?.(v);
-    };
-
-    return <form method="dialog" class={css.search} onkeydown={onKeyDown} onsubmit={onSubmit}>
-        <input id={`search-${id}`} ref={setInput} value={term()} oninput={(e) => setTerm(e.target.value)} placeholder="start typing for command" autofocus autocomplete="off" />
-
-        <output for={`search-${id}`}>
-            <For each={results()}>{
-                (result, index) => <div classList={{ [css.selected]: index() === selected() }}>{props.children(result, ctx)}</div>
-            }</For>
-        </output>
-    </form>;
-};
+let keyCounter = 0;
+const createUniqueId = () => `key-${keyCounter++}`;
 
 declare module "solid-js" {
     namespace JSX {

src/features/selectable/index.module.css

@@ -2,4 +2,9 @@
     &[data-selected="true"] {
         background-color: color(from var(--info) xyz x y z / .2);
     }
+}
+
+.root {
+    display: contents !important;
+    all: inherit;
 }

src/features/selectable/index.tsx

@@ -1,4 +1,4 @@
-import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, createUniqueId, onCleanup, onMount, ParentComponent, Setter, Signal, useContext } from "solid-js";
+import { Accessor, children, createContext, createEffect, createMemo, createRenderEffect, createSignal, onCleanup, onMount, ParentComponent, ParentProps, Signal, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
 import { isServer } from "solid-js/web";
 import css from "./index.module.css";
@@ -16,45 +16,54 @@ enum SelectionMode {
     Toggle,
 }
 
-export interface SelectionContextType<T extends object = object> {
-    readonly selection: Accessor<T[]>;
+export interface SelectionItem<K, T> {
+    key: K;
+    value: Accessor<T>;
+    element: WeakRef<HTMLElement>;
+};
+
+export interface SelectionContextType<K, T extends object> {
+    readonly selection: Accessor<SelectionItem<K, T>[]>;
     readonly length: Accessor<number>;
-    select(selection: string[], options?: Partial<{ mode: SelectionMode }>): void;
+    select(selection: K[], options?: Partial<{ mode: SelectionMode }>): void;
     selectAll(): void;
     clear(): void;
-    isSelected(key: string): Accessor<boolean>;
+    isSelected(key: K): Accessor<boolean>;
 }
-interface InternalSelectionContextType {
+interface InternalSelectionContextType<K, T extends object> {
     readonly latest: Signal<HTMLElement | undefined>,
     readonly modifier: Signal<Modifier>,
     readonly selectables: Signal<HTMLElement[]>,
-    add(key: string, value: object, element: HTMLElement): void;
+    readonly keyMap: Map<string, K>,
+    add(key: K, value: Accessor<T>, element: HTMLElement): string;
 }
-export interface SelectionHandler<T extends object = object> {
+export interface SelectionHandler<T extends object> {
     (selection: T[]): any;
 }
 
-const SelectionContext = createContext<SelectionContextType>();
-const InternalSelectionContext = createContext<InternalSelectionContextType>();
+const SelectionContext = createContext<SelectionContextType<any, any>>();
+const InternalSelectionContext = createContext<InternalSelectionContextType<any, any>>();
 
-export function useSelection<T extends object = object>(): SelectionContextType<T> {
+export function useSelection<K, T extends object = object>() {
     const context = useContext(SelectionContext);
 
     if (context === undefined) {
         throw new Error('selection context is used outside of a provider');
     }
 
-    return context as SelectionContextType<T>;
+    return context as SelectionContextType<K, T>;
 };
-const useInternalSelection = () => useContext(InternalSelectionContext)!;
-
-interface State {
-    selection: string[];
-    data: { key: string, value: Accessor<any>, element: WeakRef<HTMLElement> }[];
+function useInternalSelection<K, T extends object>() {
+    return useContext(InternalSelectionContext)! as InternalSelectionContextType<K, T>;
 }
 
-export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler, multiSelect?: true }> = (props) => {
-    const [state, setState] = createStore<State>({ selection: [], data: [] });
+interface State<K, T extends object> {
+    selection: K[];
+    data: SelectionItem<K, T>[];
+}
+
+export function SelectionProvider<K, T extends object>(props: ParentProps<{ selection?: SelectionHandler<T>, multiSelect?: boolean }>) {
+    const [state, setState] = createStore<State<K, T>>({ selection: [], data: [] });
     const selection = createMemo(() => state.data.filter(({ key }) => state.selection.includes(key)));
     const length = createMemo(() => state.data.length);
 
@@ -62,7 +71,7 @@ export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler,
         props.selection?.(selection().map(({ value }) => value()));
     });
 
-    const context: SelectionContextType = {
+    const context: SelectionContextType<K, T> = {
         selection,
         length,
         select(selection, { mode = SelectionMode.Normal } = {}) {
@@ -91,18 +100,32 @@ export const SelectionProvider: ParentComponent<{ selection?: SelectionHandler,
         },
         clear() {
             setState('selection', []);
+            internal.modifier[1](Modifier.None);
+            internal.latest[1](undefined);
         },
-        isSelected(key: string) {
+        isSelected(key) {
             return createMemo(() => state.selection.includes(key));
         },
     };
 
-    const internal: InternalSelectionContextType = {
+    const keyIdMap = new Map<K, string>();
+    const idKeyMap = new Map<string, K>();
+    const internal: InternalSelectionContextType<K, T> = {
         modifier: createSignal<Modifier>(Modifier.None),
         latest: createSignal<HTMLElement>(),
         selectables: createSignal<HTMLElement[]>([]),
-        add(key: string, value: Accessor<any>, element: HTMLElement) {
-            setState('data', data => [...data, { key, value, element: new WeakRef(element) }]);
+        keyMap: idKeyMap,
+        add(key, value, element) {
+            if (keyIdMap.has(key) === false) {
+                const id = createUniqueId();
+
+                keyIdMap.set(key, id);
+                idKeyMap.set(id, key);
+
+                setState('data', state.data.length, { key, value, element: new WeakRef(element) });
+            }
+
+            return keyIdMap.get(key)!;
         },
     };
 
@@ -177,34 +200,34 @@ const Root: ParentComponent = (props) => {
         });
     };
 
-    return <div ref={setRoot} tabIndex={0} onKeyDown={onKeyboardEvent} onKeyUp={onKeyboardEvent} style={{ 'display': 'contents' }}>{c()}</div>;
+    return <div ref={setRoot} tabIndex={0} onKeyDown={onKeyboardEvent} onKeyUp={onKeyboardEvent} class={css.root}>{c()}</div>;
 };
 
-export const selectable = (element: HTMLElement, options: Accessor<{ value: object, key?: string }>) => {
-    const context = useSelection();
-    const internal = useInternalSelection();
+export function selectable<K, T extends object>(element: HTMLElement, options: Accessor<{ value: T, key: K }>) {
+    const context = useSelection<K, T>();
+    const internal = useInternalSelection<K, T>();
 
-    const key = options().key ?? createUniqueId();
+    const key = options().key;
     const value = createMemo(() => options().value);
     const isSelected = context.isSelected(key);
 
-    internal.add(key, value, element);
+    const selectionKey = internal.add(key, value, element);
 
-    const createRange = (a?: HTMLElement, b?: HTMLElement): string[] => {
+    const createRange = (a?: HTMLElement, b?: HTMLElement): K[] => {
         if (!a && !b) {
             return [];
         }
 
         if (!a) {
-            return [b!.dataset.selecatableKey!];
+            return [b!.dataset.selectionKey! as K];
         }
 
         if (!b) {
-            return [a!.dataset.selecatableKey!];
+            return [a!.dataset.selectionKey! as K];
         }
 
         if (a === b) {
-            return [a!.dataset.selecatableKey!];
+            return [a!.dataset.selectionKey! as K];
         }
 
         const nodes = internal.selectables[0]();
@@ -212,7 +235,7 @@ export const selectable = (element: HTMLElement, options: Accessor<{ value: obje
         const bIndex = nodes.indexOf(b);
         const selection = nodes.slice(Math.min(aIndex, bIndex), Math.max(aIndex, bIndex) + 1);
 
-        return selection.map(n => n.dataset.selectionKey!);
+        return selection.map(n => internal.keyMap.get(n.dataset.selectionKey!)!);
     };
 
     createRenderEffect(() => {
@@ -256,13 +279,16 @@ export const selectable = (element: HTMLElement, options: Accessor<{ value: obje
     });
 
     element.classList.add(css.selectable);
-    element.dataset.selectionKey = key;
+    element.dataset.selectionKey = selectionKey;
 };
 
+let keyCounter = 0;
+const createUniqueId = () => `key-${keyCounter++}`;
+
 declare module "solid-js" {
     namespace JSX {
         interface Directives {
-            selectable: { value: object, key?: string };
+            selectable: { value: object, key: any };
         }
     }
 }

src/features/source/index.ts

@@ -0,0 +1,4 @@
+
+export type { Source } from './source';
+
+export { createSource } from './source';

src/features/source/source.spec.ts

@@ -0,0 +1,49 @@
+import { describe, expect } from "vitest";
+import { createSource } from "./source";
+import { it } from "~/test-helpers";
+import { testEffect } from "@solidjs/testing-library";
+import { createEffect, createSignal } from "solid-js";
+
+describe('Source', () => {
+    describe('Source', () => {
+        it('should return a `Source`', () => {
+            // Arrange
+
+            // Act
+            const actual = createSource('');
+
+            // Assert
+            expect(actual.out).toBe('');
+        });
+
+        it('should transform the input format to output format', () => {
+            // Arrange
+            const given = '**text**\n';
+            const expected = '<p><strong>text</strong></p>';
+
+            // Act
+            const actual = createSource(given);
+
+            // Assert
+            expect(actual.out).toBe(expected);
+        });
+
+        it('should contain query results', () => {
+            // Arrange
+            const expected: [number, number][] = [[8, 9], [12, 13], [15, 16]];
+            const source = createSource('this is a seachable string');
+
+            // Act
+            source.query = 'a';
+
+            // Assert
+            return testEffect(done => {
+                createEffect(() => {
+                    expect(source.queryResults).toEqual(expected);
+
+                    done()
+                });
+            });
+        });
+    });
+});

src/features/source/source.ts

@@ -0,0 +1,154 @@
+import { createEffect, onMount } from "solid-js";
+import { createStore } from "solid-js/store";
+import { unified } from 'unified'
+import { Text, Root } from 'hast'
+import { visit } from "unist-util-visit";
+import { decode } from "~/utilities";
+import remarkParse from 'remark-parse'
+import remarkRehype from 'remark-rehype'
+import remarkStringify from 'remark-stringify'
+import rehypeParse from 'rehype-parse'
+import rehypeRemark from 'rehype-remark'
+import rehypeStringify from 'rehype-stringify'
+
+interface SourceStore {
+    in: string;
+    out: string;
+    plain: string;
+    query: string;
+    metadata: {
+        spellingErrors: [number, number][];
+        grammarErrors: [number, number][];
+        queryResults: [number, number][];
+    };
+}
+
+export interface Source {
+    in: string;
+    out: string;
+    query: string;
+    readonly spellingErrors: [number, number][];
+    readonly grammarErrors: [number, number][];
+    readonly queryResults: [number, number][];
+}
+
+// TODO :: make this configurable, right now we can only do markdown <--> html.
+const inToOutProcessor = unified().use(remarkParse).use(remarkRehype).use(rehypeStringify);
+const outToInProcessor = unified().use(rehypeParse).use(rehypeRemark).use(remarkStringify, { bullet: '-' });
+
+export function createSource(initalValue: string): Source {
+    const ast = inToOutProcessor.runSync(inToOutProcessor.parse(initalValue));
+    const out = String(inToOutProcessor.stringify(ast));
+    const plain = String(unified().use(plainTextStringify).stringify(ast));
+
+    const [store, setStore] = createStore<SourceStore>({ in: initalValue, out, plain, query: '', metadata: { spellingErrors: [], grammarErrors: [], queryResults: [] } });
+
+    createEffect(() => {
+        const value = store.plain;
+
+        setStore('metadata', {
+            spellingErrors: spellChecker(value, ''),
+            grammarErrors: grammarChecker(value, ''),
+        });
+    });
+
+    createEffect(() => {
+        setStore('metadata', 'queryResults', findMatches(store.plain, store.query).toArray());
+    });
+
+    return {
+        get in() {
+            return store.in;
+        },
+        set in(next) {
+            const ast = inToOutProcessor.runSync(inToOutProcessor.parse(next));
+
+            setStore({
+                in: next,
+                out: String(inToOutProcessor.stringify(ast)),
+                plain: String(unified().use(plainTextStringify).stringify(ast)),
+            });
+        },
+
+        get out() {
+            return store.out;
+        },
+        set out(next) {
+            const ast = outToInProcessor.parse(next);
+
+            setStore({
+                in: String(outToInProcessor.stringify(outToInProcessor.runSync(ast))).trim(),
+                out: next,
+                plain: String(unified().use(plainTextStringify).stringify(ast)),
+            });
+        },
+
+        get query() {
+            return store.query;
+        },
+        set query(next) {
+            setStore('query', next)
+        },
+
+        get spellingErrors() {
+            return store.metadata.spellingErrors;
+        },
+
+        get grammarErrors() {
+            return store.metadata.grammarErrors;
+        },
+
+        get queryResults() {
+            return store.metadata.queryResults;
+        },
+    };
+}
+
+function plainTextStringify() {
+    this.compiler = function (tree: Root) {
+        const nodes: string[] = [];
+
+        visit(tree, n => n.type === 'text', (n) => {
+            nodes.push((n as Text).value);
+        });
+
+        return decode(nodes.join(''));
+    };
+}
+
+function* findMatches(text: string, query: string): Generator<[number, number], void, unknown> {
+    if (query.length < 1) {
+        return;
+    }
+
+    let startIndex = 0;
+
+    while (startIndex < text.length) {
+        const index = text.indexOf(query, startIndex);
+
+        if (index === -1) {
+            break;
+        }
+
+        const end = index + query.length;
+
+        yield [index, end];
+
+        startIndex = end;
+    }
+}
+
+const spellChecker = checker(/\w+/gi);
+const grammarChecker = checker(/\w+\s+\w+/gi);
+
+function checker(regex: RegExp) {
+    return (subject: string, lang: string): [number, number][] => {
+        return [];
+
+        const threshold = .75//.99;
+
+        return Array.from<RegExpExecArray>(subject.matchAll(regex)).filter(() => Math.random() >= threshold).map(({ 0: match, index }) => {
+            return [index, index + match.length] as const;
+        });
+    }
+}

src/features/theme/context.tsx

@@ -1,9 +1,8 @@
-import { Component, createContext, createEffect, createResource, For, ParentComponent, Show, Suspense, useContext } from "solid-js";
-import css from './colorschemepicker.module.css';
-import { CgDarkMode } from "solid-icons/cg";
 import { action, query, useAction } from "@solidjs/router";
-import { useSession } from "vinxi/http";
+import { createContext, createEffect, createResource, ParentComponent, Show, Suspense, useContext } from "solid-js";
 import { createStore } from "solid-js/store";
+import { useSession } from "vinxi/http";
+
 
 export enum ColorScheme {
     Auto = 'light dark',
@@ -11,8 +10,6 @@ export enum ColorScheme {
     Dark = 'dark',
 }
 
-const colorSchemes = Object.entries(ColorScheme) as readonly [keyof typeof ColorScheme, ColorScheme][];
-
 export interface State {
     colorScheme: ColorScheme;
     hue: number;
@@ -49,7 +46,7 @@ interface ThemeContextType {
 
 const ThemeContext = createContext<ThemeContextType>();
 
-const useStore = () => useContext(ThemeContext)!;
+export const useStore = () => useContext(ThemeContext)!;
 
 export const useTheme = () => {
     const ctx = useContext(ThemeContext);
@@ -82,30 +79,4 @@ export const ThemeProvider: ParentComponent = (props) => {
             </ThemeContext.Provider>;
         }}</Show>
     </Suspense>;
-};
-
-export const ColorSchemePicker: Component = (props) => {
-    const { theme, setColorScheme, setHue } = useStore();
-
-    return <>
-        <label class={css.picker} aria-label="Color scheme picker">
-            <CgDarkMode />
-
-            <select name="color-scheme-picker" onInput={(e) => {
-                if (e.target.value !== theme.colorScheme) {
-                    const nextValue = (e.target.value ?? ColorScheme.Auto) as ColorScheme;
-
-                    setColorScheme(nextValue);
-                }
-            }}>
-                <For each={colorSchemes}>{
-                    ([label, value]) => <option value={value} selected={value === theme.colorScheme}>{label}</option>
-                }</For>
-            </select>
-        </label>
-
-        <label class={css.hue} aria-label="Hue slider">
-            <input type="range" min="0" max="360" value={theme.hue} onInput={e => setHue(e.target.valueAsNumber)} />
-        </label>
-    </>;
 };

src/features/theme/index.ts

@@ -0,0 +1,2 @@
+export { useTheme, getState, ThemeProvider, ColorScheme } from './context';
+export { ColorSchemePicker } from './picker';

src/features/theme/picker.module.css

@@ -0,0 +1,9 @@
+.picker {
+    grid-template-columns: auto 1fr;
+}
+
+.hue {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+}

src/features/theme/picker.tsx

@@ -0,0 +1,41 @@
+import { WiMoonAltFirstQuarter, WiMoonAltFull, WiMoonAltNew } from "solid-icons/wi";
+import { Component, createEffect, createSignal, Match, Switch } from "solid-js";
+import { Select } from "~/components/select";
+import { ColorScheme, useStore } from "./context";
+import css from './picker.module.css';
+
+const colorSchemes: Record<ColorScheme, keyof typeof ColorScheme> = Object.fromEntries(Object.entries(ColorScheme).map(([k, v]) => [v, k] as const)) as any;
+
+export const ColorSchemePicker: Component = (props) => {
+    const { theme, setColorScheme, setHue } = useStore();
+    const [scheme, setScheme] = createSignal<ColorScheme>(theme.colorScheme);
+
+    createEffect(() => {
+        const next = scheme();
+
+        if (!next) {
+            return;
+        }
+
+        setColorScheme(next);
+    });
+
+    return <>
+        <label aria-label="Color scheme picker">
+            <Select id="color-scheme-picker" class={css.picker} value={theme.colorScheme} setValue={setScheme} values={colorSchemes}>{
+                (k, v) => <>
+                    <Switch>
+                        <Match when={k === ColorScheme.Auto}><WiMoonAltFirstQuarter /></Match>
+                        <Match when={k === ColorScheme.Light}><WiMoonAltNew /></Match>
+                        <Match when={k === ColorScheme.Dark}><WiMoonAltFull /></Match>
+                    </Switch>
+                    {v}
+                </>
+            }</Select>
+        </label>
+
+        <label class={css.hue} aria-label="Hue slider">
+            <input type="range" min="0" max="360" value={theme.hue} onInput={e => setHue(e.target.valueAsNumber)} />
+        </label>
+    </>;
+};

src/global.d.ts

@@ -2,4 +2,12 @@
 
 interface FileSystemHandle {
     getUniqueId(): Promise<string>;
-}
+}
+
+// declare module "solid-js" {
+//     namespace JSX {
+//         interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+//             indeterminate?: boolean;
+//         }
+//     }
+// }

src/i18n/en-GB.json

@@ -0,0 +1,54 @@
+{
+    "shell": {
+        "command": {
+            "openCommandPalette": "Open command palette"
+        }
+    },
+    "page": {
+        "welcome": {
+            "title": "Hi, welcome!",
+            "subtitle": "Lets get started",
+            "edit": "Start editing",
+            "instructions": "Read the **instructions**",
+            "about": "Abut this app"
+        },
+        "edit": {
+            "menu": {
+                "file": "File",
+                "edit": "Edit",
+                "selection": "Selection"
+            },
+            "command": {
+                "open": "Open folder",
+                "close": "Close folder",
+                "closeTab": "Close tab",
+                "save": "Save",
+                "saveAs": "Save as ...",
+                "selectAll": "Select all",
+                "clearSelection": "Clear selection",
+                "insertKey": "Insert new key",
+                "insertLanguage": "Insert new language",
+                "delete": "Delete selected items",
+                "copyKey": "Copy key"
+            },
+            "prompt": {
+                "newKey": {
+                    "title": "Which key do you want to create?",
+                    "placeholder": "Name of the new key",
+                    "description": "Hint: use `.` to denote nested keys,\ni.e. `this.is.some.key` would be a key that is four levels deep."
+                },
+                "newLanguage": {
+                    "title": "Which language do you want to add?",
+                    "placeholder": "Locale code, i.e. en-GB for Britisch English"
+                }
+            }
+        }
+    },
+    "feature": {
+        "file": {
+            "grid": {
+                "key": "Key"
+            }
+        }
+    }
+}

src/i18n/nl-NL.json

@@ -0,0 +1,54 @@
+{
+    "shell": {
+        "command": {
+            "openCommandPalette": "Open commando palet"
+        }
+    },
+    "page": {
+        "welcome": {
+            "title": "Hoi, welkom!",
+            "subtitle": "Laten we beginnen",
+            "edit": "Begin met bewerken",
+            "instructions": "Lees de instructies",
+            "about": "Over deze app"
+        },
+        "edit": {
+            "menu": {
+                "file": "Bestand",
+                "edit": "Bewerken",
+                "selection": "Selectie"
+            },
+            "command": {
+                "open": "Map openen",
+                "close": "Map sluiten",
+                "closeTab": "Tabblad sluiten",
+                "save": "Opslaan",
+                "saveAs": "Opslaan als ...",
+                "selectAll": "Selecteer alles",
+                "clearSelection": "Selectie leeg maken",
+                "insertKey": "Voeg nieuwe sleutel toe",
+                "insertLanguage": "Voeg nieuwe taal toe",
+                "delete": "Verwijder geselecteerde items",
+                "copyKey": "Kopieer sleutel"
+            },
+            "prompt": {
+                "newKey": {
+                    "title": "Welke sleutel wil je toevoegen?",
+                    "placeholder": "Naam van de nieuwe sleutel",
+                    "description": "Hint: gebruik een `.` voor geneste sleutels,\nbijv. `this.is.some.key` is een sleutel die vier lagen diep is."
+                },
+                "newLanguage": {
+                    "title": "Welke taal wil je toevoegen?",
+                    "placeholder": "Landcode, bijv. en-GB voor Brits Engels"
+                }
+            }
+        }
+    },
+    "feature": {
+        "file": {
+            "grid": {
+                "key": "Sleutel"
+            }
+        }
+    }
+}

src/routes/(editor).tsx

@@ -1,13 +1,16 @@
 import { Link, Meta, Title } from "@solidjs/meta";
-import { Component, createMemo, createSignal, createUniqueId, ErrorBoundary, ParentProps, Show } from "solid-js";
+import { Component, createMemo, createSignal, ErrorBoundary, ParentProps, Show } from "solid-js";
 import { FilesProvider } from "~/features/file";
-import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
+import { Menu, MenuProvider } from "~/features/menu";
 import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router";
-import { createCommand, Modifier } from "~/features/command";
-import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/components/colorschemepicker";
+import { CommandPalette, CommandPaletteApi, createCommand, Modifier } from "~/features/command";
 import { getRequestEvent } from "solid-js/web";
 import { HttpHeader } from "@solidjs/start";
 import { FaSolidPalette } from "solid-icons/fa";
+import { LocalePicker } from "~/features/i18n";
+import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/features/theme";
+import { Dropdown } from "~/components/dropdown";
+import { ErrorComp } from "~/components/error";
 import css from "./editor.module.css";
 
 const event = getRequestEvent();
@@ -23,14 +26,11 @@ export default function Editor(props: ParentProps) {
     const themeMenuId = createUniqueId();
 
     const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
-    const lightness = createMemo(() => {
-        const scheme = theme.colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme.colorScheme;
-
-        return scheme === ColorScheme.Light ? .9 : .2;
-    });
+    const colorScheme = createMemo(() => (theme.colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme.colorScheme) ?? 'light dark');
+    const lightness = createMemo(() => colorScheme() === ColorScheme.Light ? .9 : .2);
 
     const commands = [
-        createCommand('open command palette', () => {
+        createCommand('shell.command.openCommandPalette', () => {
             commandPalette()?.show();
         }, { key: 'p', modifier: Modifier.Control | Modifier.Shift }),
     ];
@@ -53,12 +53,12 @@ export default function Editor(props: ParentProps) {
         <Title>Calque</Title>
         <Meta name="description" content="Simple tool for managing translation files" />
 
-        <Meta name="color-scheme" content={theme.colorScheme} />
-        <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme.hue})`} />
+        <Meta name="color-scheme" content={colorScheme()} />
+        <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme.hue ?? 0})`} />
 
         <style>{`
             :root {
-                --hue: ${theme.hue}deg !important;
+                --hue: ${theme.hue ?? 0}deg !important;
             }
         `}</style>
 
@@ -68,7 +68,7 @@ export default function Editor(props: ParentProps) {
 
         <main class={css.layout} inert={commandPalette()?.open()}>
             <nav class={css.menu}>
-                <A class={css.logo} href="/">
+                <A class={css.logo} href="/welcome">
                     <picture>
                         <source srcset="/images/favicon.dark.svg" media="screen and (prefers-color-scheme: dark)" />
                         <source srcset="/images/favicon.light.svg" media="screen and (prefers-color-scheme: light)" />
@@ -79,15 +79,11 @@ export default function Editor(props: ParentProps) {
                 <Menu.Mount />
 
                 <section class={css.right}>
-                    <div class={css.themeMenu}>
-                        <button class={css.themeMenuButton} id={`${themeMenuId}-button`} popoverTarget={`${themeMenuId}-dialog`} title="Open theme picker menu">
-                            <FaSolidPalette />
-                        </button>
+                    <LocalePicker />
 
-                        <dialog class={css.themeMenuDialog} id={`${themeMenuId}-dialog`} popover anchor={`${themeMenuId}-button`}>
-                            <ColorSchemePicker />
-                        </dialog>
-                    </div>
+                    <Dropdown id={themeMenuId} class={css.themeMenu} text={<FaSolidPalette />}>
+                        <ColorSchemePicker />
+                    </Dropdown>
                 </section>
             </nav>
 
@@ -104,14 +100,5 @@ export default function Editor(props: ParentProps) {
     </MenuProvider>
 }
 
-const ErrorComp: Component<{ error: Error }> = (props) => {
-    return <div class={css.error}>
-        <b>{props.error.message}</b>
-
-        <Show when={props.error.cause}>{
-            cause => <>{cause().description}</>
-        }</Show>
-
-        <a href="/">Return to start</a>
-    </div>;
-};
+let keyCounter = 0;
+const createUniqueId = () => `key-${keyCounter++}`;

src/routes/(editor)/edit.tsx

@@ -1,44 +1,24 @@
-import { Component, createEffect, createMemo, createSignal, For, onMount, ParentProps, Setter, Show } from "solid-js";
-import { filter, MutarionKind, Mutation, splitAt } from "~/utilities";
+import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, ParentProps, Setter, Show } from "solid-js";
+import { Created, MutarionKind, Mutation, splitAt } from "~/utilities";
 import { Sidebar } from "~/components/sidebar";
-import { emptyFolder, FolderEntry, walk as fileTreeWalk, Tree } from "~/components/filetree";
 import { Menu } from "~/features/menu";
-import { Grid, load, useFiles } from "~/features/file";
-import { Command, CommandType, Context, createCommand, Modifier, noop, useCommands } from "~/features/command";
-import { GridApi } from "~/features/file/grid";
+import { Grid, read, readFiles, TreeProvider, Tree, useFiles } from "~/features/file";
+import { Command, CommandType, Context, createCommand, Modifier } from "~/features/command";
+import { Entry, GridApi } from "~/features/file/grid";
 import { Tab, Tabs } from "~/components/tabs";
 import { isServer } from "solid-js/web";
 import { Prompt, PromptApi } from "~/components/prompt";
 import EditBlankImage from '~/assets/edit-blank.svg'
+import { useI18n } from "~/features/i18n";
+import { makePersisted } from "@solid-primitives/storage";
+import { writeClipboard } from "@solid-primitives/clipboard";
+import { destructure } from "@solid-primitives/destructure";
+import { contentsOf } from "~/features/file/helpers";
 import css from "./edit.module.css";
 
 const isInstalledPWA = !isServer && window.matchMedia('(display-mode: standalone)').matches;
 
-async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []): AsyncGenerator<{ id: string, handle: FileSystemFileHandle, path: string[], lang: string, entries: Map<string, string> }, void, never> {
-    for await (const handle of directory.values()) {
-        if (handle.kind === 'directory') {
-            yield* walk(handle, [...path, handle.name]);
-
-            continue;
-        }
-
-        if (!handle.name.endsWith('.json')) {
-            continue;
-        }
-
-        const id = await handle.getUniqueId();
-        const file = await handle.getFile();
-        const lang = file.name.split('.').at(0)!;
-        const entries = await load(file);
-
-        if (entries !== undefined) {
-            yield { id, handle, path, lang, entries };
-        }
-    }
-};
-
-
-interface Entries extends Map<string, Record<string, { value: string, handle: FileSystemFileHandle, id: string }>> { }
+interface Entries extends Map<string, { key: string, } & Record<string, { value: string, handle: FileSystemFileHandle, id: string }>> { };
 
 export default function Edit(props: ParentProps) {
     const filesContext = useFiles();
@@ -56,42 +36,33 @@ export default function Edit(props: ParentProps) {
         }
     });
 
-    const open = createCommand('open folder', async () => {
+    const open = createCommand('page.edit.command.open', async () => {
         const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
 
         filesContext.open(directory);
     }, { key: 'o', modifier: Modifier.Control });
 
-    return <Context.Root commands={[open]}>
-        <Show when={filesContext.root()} fallback={<Blank open={open} />}>{
-            root => <Editor root={root()} />
-        }</Show>
-    </Context.Root>;
+    return <Show when={filesContext.root()} fallback={<Blank open={open} />}>{
+        root => <Editor root={root()} />
+    }</Show>;
 }
 
 const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
     const filesContext = useFiles();
+    const { t } = useI18n();
 
     const tabs = createMemo(() => filesContext.files().map(({ key, handle }) => {
         const [api, setApi] = createSignal<GridApi>();
         const [entries, setEntries] = createSignal<Entries>(new Map());
-        const [files, setFiles] = createSignal<Map<string, { id: string, handle: FileSystemFileHandle }>>(new Map());
-
-        (async () => {
-            const files = await Array.fromAsync(
-                filter(handle.values(), entry => entry.kind === 'file'),
-                async file => [file.name.split('.').at(0)!, { handle: file, id: await file.getUniqueId() }] as const
-            );
-
-            setFiles(new Map(files));
-        })();
+        const __files = readFiles(() => handle);
+        const files = createMemo(() => new Map(Object.entries(__files()).map(([id, { file, handle }]) => [file.name.split('.').at(0)!, { handle, id }])));
 
         return ({ key, handle, api, setApi, entries, setEntries, files });
     }));
-    const [active, setActive] = createSignal<string>();
-    const [contents, setContents] = createSignal<Map<string, Map<string, string>>>(new Map());
-    const [tree, setFiles] = createSignal<FolderEntry>(emptyFolder);
-    const [prompt, setPrompt] = createSignal<PromptApi>();
+    const [active, setActive] = makePersisted(createSignal<string>(), { name: 'edit__aciveTab' });
+    const [newKeyPrompt, setNewKeyPrompt] = createSignal<PromptApi>();
+    const [newLanguagePrompt, setNewLanguagePrompt] = createSignal<PromptApi>();
+    const contents = contentsOf(() => props.root);
 
     const tab = createMemo(() => {
         const name = active();
@@ -99,25 +70,34 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
         return tabs().find(t => t.handle.name === name);
     });
     const api = createMemo(() => tab()?.api());
-    const mutations = createMemo<(Mutation & { file?: { value: string, handle: FileSystemFileHandle, id: string } })[]>(() => tabs().flatMap(tab => {
+    const mutations = createMemo<(Mutation & { lang: string, file?: { value: string, handle: FileSystemFileHandle, id: string } })[]>(() => tabs().flatMap(tab => {
         const entries = tab.entries();
         const files = tab.files();
         const mutations = tab.api()?.mutations() ?? [];
 
-        return mutations.flatMap(m => {
+        return mutations.flatMap((m): any => {
+            const [index, lang] = splitAt(m.key, m.key.indexOf('.'));
+            const file = files.get(lang);
+
             switch (m.kind) {
                 case MutarionKind.Update: {
-                    const [key, lang] = splitAt(m.key, m.key.lastIndexOf('.'));
-
-                    return { kind: MutarionKind.Update, key, file: entries.get(key)?.[lang] };
+                    const entry = entries.get(index as any)!;
+                    return { kind: MutarionKind.Update, key: entry.key, lang, file, value: m.value };
                 }
 
                 case MutarionKind.Create: {
-                    return Object.entries(m.value).map(([lang, value]) => ({ kind: MutarionKind.Create, key: m.key, file: files.get(lang)!, value }));
+                    if (typeof m.value === 'object') {
+                        const { key, ...locales } = m.value;
+                        return Object.entries(locales).map(([lang, value]) => ({ kind: MutarionKind.Create, key, lang, file, value }));
+                    }
+
+                    const entry = entries.get(index as any)!;
+                    return { kind: MutarionKind.Create, key: entry.key, lang, file, value: m.value };
                 }
 
                 case MutarionKind.Delete: {
-                    return files.values().map(file => ({ kind: MutarionKind.Delete, key: m.key, file })).toArray();
+                    const entry = entries.get(index as any)!;
+                    return files.values().map(file => ({ kind: MutarionKind.Delete, key: entry.key, file })).toArray();
                 }
 
                 default: throw new Error('unreachable code');
@@ -137,8 +117,35 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
         }
 
         const groupedByFileId = Object.groupBy(muts, m => m.file?.id ?? 'undefined');
+        const newFiles = Object.entries(Object.groupBy((groupedByFileId['undefined'] ?? []) as (Created & { lang: string, file: undefined })[], m => m.lang)).map(([lang, mutations]) => {
+            const data = mutations!.reduce((aggregate, { key, value }) => {
+                let obj = aggregate;
+                const i = key.lastIndexOf('.');
 
-        return entries.map(({ id, handle }) => {
+                if (i !== -1) {
+                    const [k, lastPart] = splitAt(key, i);
+
+                    for (const part of k.split('.')) {
+                        if (!Object.hasOwn(obj, part)) {
+                            obj[part] = {};
+                        }
+
+                        obj = obj[part];
+                    }
+
+                    obj[lastPart] = value;
+                }
+                else {
+                    obj[key] = value;
+                }
+
+                return aggregate;
+            }, {} as Record<string, any>);
+
+            return [{ existing: false, name: lang }, data] as const;
+        })
+
+        const existingFiles = entries.map(({ id, handle }) => {
             const existing = new Map(files.get(id)!);
             const mutations = groupedByFileId[id]!;
 
@@ -158,7 +165,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
             }
 
             return [
-                handle,
+                { existing: true, handle },
                 existing.entries().reduce((aggregate, [key, value]) => {
                     let obj = aggregate;
                     const i = key.lastIndexOf('.');
@@ -183,32 +190,28 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
                     return aggregate;
                 }, {} as Record<string, any>)
             ] as const;
-        }).toArray();
-    });
+        }).toArray() as (readonly [({ existing: true, handle: FileSystemFileHandle } | { existing: false, name: string }), Record<string, any>])[];
 
-    createEffect(() => {
-        const directory = props.root;
-
-        (async () => {
-            setContents(new Map(await Array.fromAsync(walk(directory), ({ id, entries }) => [id, entries] as const)))
-            setFiles({ name: directory.name, id: '', kind: 'folder', handle: directory, entries: await Array.fromAsync(fileTreeWalk(directory)) });
-        })();
+        return existingFiles.concat(newFiles);
     });
 
     const commands = {
-        open: createCommand('open folder', async () => {
+        open: createCommand('page.edit.command.open', async () => {
             const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
 
             await filesContext.open(directory);
         }, { key: 'o', modifier: Modifier.Control }),
-        close: createCommand('close folder', async () => {
-            filesContext.remove('__root__');
+        close: createCommand('page.edit.command.close', async () => {
+            await filesContext.close();
         }),
-        closeTab: createCommand('close tab', async (id: string) => {
+        closeTab: createCommand('page.edit.command.closeTab', async (id: string) => {
             filesContext.remove(id);
         }, { key: 'w', modifier: Modifier.Control | (isInstalledPWA ? Modifier.None : Modifier.Alt) }),
-        save: createCommand('save', async () => {
-            await Promise.allSettled(mutatedData().map(async ([handle, data]) => {
+        save: createCommand('page.edit.command.save', async () => {
+            await Promise.allSettled(mutatedData().map(async ([file, data]) => {
+                // TODO :: add the newly created file to the known files list to that the save file picker is not shown again on subsequent saves
+                const handle = file.existing ? file.handle : await window.showSaveFilePicker({ suggestedName: file.name, excludeAcceptAllOption: true, types: [{ description: 'JSON file', accept: { 'application/json': ['.json'] } }] });
+
                 const stream = await handle.createWritable({ keepExistingData: false });
 
                 stream.write(JSON.stringify(data, null, 4));
@@ -216,7 +219,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
                 stream.close();
             }));
         }, { key: 's', modifier: Modifier.Control }),
-        saveAs: createCommand('save as', (handle?: FileSystemFileHandle) => {
+        saveAs: createCommand('page.edit.command.saveAs', (handle?: FileSystemFileHandle) => {
             console.log('save as ...', handle);
 
             window.showSaveFilePicker({
@@ -230,98 +233,106 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
             });
 
         }, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
-        selectAll: createCommand('select all', () => {
+        selectAll: createCommand('page.edit.command.selectAll', () => {
             api()?.selectAll();
         }, { key: 'a', modifier: Modifier.Control }),
-        clearSelection: createCommand('clear selection', () => {
-            api()?.clear();
+        clearSelection: createCommand('page.edit.command.clearSelection', () => {
+            api()?.clearSelection();
         }),
-        delete: createCommand('delete selected items', () => {
+        delete: createCommand('page.edit.command.delete', () => {
             const { selection, remove } = api() ?? {};
 
             if (!selection || !remove) {
                 return;
             }
 
-            remove(Object.keys(selection()));
+            remove(selection().map(s => s.key));
         }, { key: 'delete', modifier: Modifier.None }),
-        inserNewKey: createCommand('insert new key', async () => {
-            const formData = await prompt()?.showModal();
+        insertKey: createCommand('page.edit.command.insertKey', async () => {
+            const formData = await newKeyPrompt()?.showModal();
             const key = formData?.get('key')?.toString();
 
             if (!key) {
                 return;
             }
 
-            api()?.insert(key);
+            api()?.addKey(key);
+        }),
+        insertLanguage: createCommand('page.edit.command.insertLanguage', async () => {
+            const formData = await newLanguagePrompt()?.showModal();
+            const locale = formData?.get('locale')?.toString();
+
+            if (!locale) {
+                return;
+            }
+
+            api()?.addLocale(locale);
         }),
-        inserNewLanguage: noop.withLabel('insert new language'),
     } as const;
 
     return <div class={css.root}>
         <Command.Add commands={[commands.saveAs, commands.closeTab]} />
 
-        <Context.Menu>{
-            command => <Command.Handle command={command} />
-        }</Context.Menu>
-
         <Menu.Root>
-            <Menu.Item label="file">
+            <Menu.Item label={t('page.edit.menu.file')}>
                 <Menu.Item command={commands.open} />
 
-                <Menu.Item command={commands.save} />
+                <Menu.Item command={commands.close} />
 
                 <Menu.Separator />
 
-                <Menu.Item command={commands.close} />
+                <Menu.Item command={commands.save} />
             </Menu.Item>
 
-            <Menu.Item label="edit">
-                <Menu.Item command={commands.inserNewKey} />
+            <Menu.Item label={t('page.edit.menu.edit')}>
+                <Menu.Item command={commands.insertKey} />
 
-                <Menu.Item command={commands.inserNewLanguage} />
+                <Menu.Item command={commands.insertLanguage} />
 
                 <Menu.Separator />
 
                 <Menu.Item command={commands.delete} />
             </Menu.Item>
 
-            <Menu.Item label="selection">
+            <Menu.Item label={t('page.edit.menu.selection')}>
                 <Menu.Item command={commands.selectAll} />
 
                 <Menu.Item command={commands.clearSelection} />
             </Menu.Item>
         </Menu.Root>
 
-        <Prompt api={setPrompt} title="Which key do you want to create?" description={<>hint: use <code>.</code> to denote nested keys,<br /> i.e. <code>this.is.some.key</code> would be a key that is four levels deep</>}>
-            <input name="key" value="this.is.an.awesome.key" placeholder="name of new key ()" />
+        <Prompt api={setNewKeyPrompt} title={t('page.edit.prompt.newKey.title')} description={t('page.edit.prompt.newKey.description')}>
+            <input name="key" placeholder={t('page.edit.prompt.newKey.placeholder')} />
         </Prompt>
 
-        <Sidebar as="aside" label={tree().name} class={css.sidebar}>
-            <Tree entries={tree().entries}>{[
-                folder => {
-                    return <span onDblClick={() => {
-                        filesContext?.set(folder().name, folder().handle);
-                    }}>{folder().name}</span>;
-                },
-                file => {
-                    const mutated = createMemo(() => mutatedFiles().values().find(({ id }) => id === file().id) !== undefined);
+        <Prompt api={setNewLanguagePrompt} title={t('page.edit.prompt.newLanguage.title')}>
+            <input name="locale" placeholder={t('page.edit.prompt.newLanguage.placeholder')} />
+        </Prompt>
 
-                    return <Context.Handle classList={{ [css.mutated]: mutated() }} onDblClick={() => {
-                        const folder = file().directory;
-                        filesContext?.set(folder.name, folder);
-                    }}>{file().name}</Context.Handle>;
-                },
-            ] as const}</Tree>
-        </Sidebar>
+        <TreeProvider directory={props.root}>
+            <Sidebar as="aside" label={props.root.name} class={css.sidebar}>
+                <Tree>{[
+                    folder => {
+                        return <span onDblClick={() => {
+                            filesContext?.set(folder().name, folder().handle);
+                        }}>{folder().name}</span>;
+                    },
+                    file => {
+                        const mutated = createMemo(() => mutatedFiles().values().find(({ id }) => id === file().id) !== undefined);
 
-        <Tabs class={css.content} active={setActive} onClose={commands.closeTab}>
+                        return <span class={`${mutated() ? css.mutated : ''}`} onDblClick={() => {
+                            const folder = file().directory;
+                            filesContext?.set(folder.name, folder);
+                            setActive(folder.name);
+                        }}>{file().name}</span>;
+                    },
+                ] as const}</Tree>
+            </Sidebar>
+        </TreeProvider>
+
+        <Tabs class={css.content} active={active()} setActive={setActive} onClose={commands.closeTab}>
             <For each={tabs()}>{
-                ({ key, handle, setApi, setEntries }) => <Tab
-                    id={key}
-                    label={handle.name}
-                    closable
-                >
+                ({ key, handle, setApi, setEntries }) => <Tab id={key} label={handle.name} closable>
                     <Content directory={handle} api={setApi} entries={setEntries} />
                 </Tab>
             }</For>
@@ -330,60 +341,66 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
 };
 
 const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<GridApi | undefined>, entries?: Setter<Entries> }> = (props) => {
-    const [entries, setEntries] = createSignal<Entries>(new Map());
-    const [columns, setColumns] = createSignal<string[]>([]);
-    const [rows, setRows] = createSignal<Map<string, Record<string, string>>>(new Map);
+    const [locales, setLocales] = createSignal<string[]>([]);
     const [api, setApi] = createSignal<GridApi>();
 
+    const files = readFiles(() => props.directory);
+    // const __contents = contentsOf(() => props.directory);
+    const [contents] = createResource(files, (files) => Promise.all(Object.entries(files).map(async ([id, { file, handle }]) => ({ id, handle, lang: file.name.split('.').at(0)!, entries: (await read(file))! }))), { initialValue: [] });
+
+    const [entries, rows] = destructure(() => {
+        const template = contents.latest.map(({ lang, handle }) => [lang, { handle, value: null }]);
+        const merged = contents.latest.reduce((aggregate, { id, handle, lang, entries }) => {
+            for (const [key, value] of entries.entries()) {
+                if (!aggregate.has(key)) {
+                    aggregate.set(key, Object.fromEntries(template));
+                }
+
+                aggregate.get(key)![lang] = { value, handle, id };
+            }
+
+            return aggregate;
+        }, new Map<string, Record<string, { id: string, value: string, handle: FileSystemFileHandle }>>());
+
+        const rows = merged.entries().map(([key, langs]) => ({ key, ...Object.fromEntries(Object.entries(langs).map(([lang, { value }]) => [lang, value])) } as Entry)).toArray();
+
+        return [
+            new Map(merged.entries().map(([key, langs], i) => [i.toString(), { key, ...langs }])) as Entries,
+            rows
+        ] as const;
+    });
+
+    createEffect(() => {
+        setLocales(contents.latest.map(({ lang }) => lang));
+    });
+
     createEffect(() => {
         props.entries?.(entries());
     });
 
     createEffect(() => {
-        props.api?.(api());
-    });
+        const a = api();
 
-    createEffect(() => {
-        const directory = props.directory;
-
-        if (!directory) {
+        if (!a) {
             return;
         }
 
-        (async () => {
-            const contents = await Array.fromAsync(
-                filter(directory.values(), (handle): handle is FileSystemFileHandle => handle.kind === 'file' && handle.name.endsWith('.json')),
-                async handle => {
-                    const id = await handle.getUniqueId();
-                    const file = await handle.getFile();
-                    const lang = file.name.split('.').at(0)!;
-                    const entries = (await load(file))!;
-
-                    return { id, handle, lang, entries };
-                }
-            );
-            const languages = new Set(contents.map(c => c.lang));
-            const template = contents.map(({ lang, handle }) => [lang, { handle, value: '' }]);
-
-            const merged = contents.reduce((aggregate, { id, handle, lang, entries }) => {
-                for (const [key, value] of entries.entries()) {
-                    if (!aggregate.has(key)) {
-                        aggregate.set(key, Object.fromEntries(template));
-                    }
-
-                    aggregate.get(key)![lang] = { value, handle, id };
-                }
-
-                return aggregate;
-            }, new Map<string, Record<string, { id: string, value: string, handle: FileSystemFileHandle }>>());
-
-            setColumns(['key', ...languages]);
-            setEntries(merged);
-            setRows(new Map(merged.entries().map(([key, langs]) => [key, Object.fromEntries(Object.entries(langs).map(([lang, { value }]) => [lang, value]))] as const)));
-        })();
+        props.api?.(a);
     });
 
-    return <Grid columns={columns()} rows={rows()} api={setApi} />;
+    const copyKey = createCommand('page.edit.command.copyKey', (key: string) => writeClipboard(key));
+
+    return <Grid rows={rows()} locales={locales()} api={setApi}>{
+        key => {
+            return <Context.Root commands={[copyKey.with(key)]}>
+                <Context.Menu>{
+                    command => <Command.Handle command={command} />
+                }</Context.Menu>
+
+                <Context.Handle>{key.split('.').at(-1)!}</Context.Handle>
+            </Context.Root>;
+        }
+    }</Grid>;
 };
 
 const Blank: Component<{ open: CommandType }> = (props) => {

src/routes/(editor)/experimental.css

@@ -1,27 +0,0 @@
-section.index {
-    display: grid;
-    grid: 100% / auto minmax(0, 1fr);
-    inline-size: 100%;
-    block-size: 100%;
-
-    & > aside {
-        overflow: clip auto;
-        resize: horizontal;
-
-        min-inline-size: 300px;
-        max-inline-size: 75vw;
-        block-size: 100%;
-        padding: 1em;
-        padding-block-start: 1.5em;
-        padding-inline-end: 1em;
-    }
-
-    & > section {
-        display: grid;
-        grid: 100% / 100%;
-        inline-size: 100%;
-        block-size: 100%;
-
-        padding-inline: 1em;
-    }
-}

src/routes/(editor)/experimental.tsx

@@ -1,132 +1,28 @@
-import { Component, createEffect, createMemo, createResource, createSignal, For, lazy, onMount, Suspense } from "solid-js";
-import { useFiles } from "~/features/file";
+
+import { ErrorBoundary, ParentProps } from "solid-js";
 import { Menu } from "~/features/menu";
-import { createCommand, Modifier } from "~/features/command";
-import { emptyFolder, FolderEntry, Tree, walk } from "~/components/filetree";
-import { createStore, produce } from "solid-js/store";
-import { Tab, Tabs } from "~/components/tabs";
-import "./experimental.css";
-import { selectable, SelectionProvider } from "~/features/selectable";
+import { createCommand } from "~/features/command";
+import { useNavigate } from "@solidjs/router";
+import { ErrorComp } from "~/components/error";
 
-interface ExperimentalState {
-  files: File[];
-  numberOfFiles: number;
-}
+export default function Experimental(props: ParentProps) {
+  const navigate = useNavigate();
 
-export default function Experimental() {
-  const files = useFiles();
-  const [tree, setTree] = createSignal<FolderEntry>(emptyFolder);
-  const [state, setState] = createStore<ExperimentalState>({
-    files: [],
-    numberOfFiles: 0,
-  });
-  const [showHiddenFiles, setShowHiddenFiles] = createSignal<boolean>(false);
-  const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [/^node_modules$/, /^\..+$/]);
-  const [root, { mutate, refetch }] = createResource(() => files?.get('root'));
-
-  createEffect(() => {
-    setState('numberOfFiles', state.files.length);
+  const goTo = createCommand('go to', (to: string) => {
+    navigate(`/experimental/${to}`);
   });
 
-  // Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
-  onMount(() => {
-    refetch();
-  });
+  return <>
+    <Menu.Root>
+      <Menu.Item command={goTo.withLabel('table').with('table')} />
+      <Menu.Item command={goTo.withLabel('grid').with('grid')} />
+      <Menu.Item command={goTo.withLabel('context-menu').with('context-menu')} />
+      <Menu.Item command={goTo.withLabel('formatter').with('formatter')} />
+      <Menu.Item command={goTo.withLabel('file-system-observer').with('file-system-observer')} />
+    </Menu.Root>
 
-  createEffect(async () => {
-    const directory = root();
-
-    if (root.state === 'ready' && directory?.kind === 'directory') {
-      const entries = await Array.fromAsync(walk(directory, filters()));
-
-      setTree({ name: '', kind: 'folder', entries });
-    }
-  });
-
-  const open = async (file: File) => {
-    setState('files', produce(files => {
-      files.push(file);
-    }));
-  };
-
-  const commands = {
-    open: createCommand('open', async () => {
-      const [fileHandle] = await window.showOpenFilePicker({
-        types: [
-          {
-            description: "JSON File(s)",
-            accept: {
-              "application/json": [".json", ".jsonp", ".jsonc"],
-            },
-          }
-        ],
-        excludeAcceptAllOption: true,
-        multiple: true,
-      });
-      const file = await fileHandle.getFile();
-      const text = await file.text();
-
-      console.log(fileHandle, file, text);
-    }, { key: 'o', modifier: Modifier.Control }),
-    openFolder: createCommand('openFolder', async () => {
-      const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
-      const entries = await Array.fromAsync(walk(directory, filters()));
-
-      files.set('root', directory);
-      mutate(directory);
-
-      setTree({ name: '', kind: 'folder', entries });
-    }),
-    save: createCommand('save', () => {
-      console.log('save');
-    }, { key: 's', modifier: Modifier.Control }),
-    saveAll: createCommand('save all', () => {
-      console.log('save all');
-    }, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
-  } as const;
-
-  return (
-    <>
-      <Menu.Root>
-        <Menu.Item label="file">
-          <Menu.Item label="open" command={commands.open} />
-
-          <Menu.Item label="open folder" command={commands.openFolder} />
-
-          <Menu.Item label="save" command={commands.save} />
-
-          <Menu.Item label="save all" command={commands.saveAll} />
-        </Menu.Item>
-      </Menu.Root>
-
-      <section class="index">
-        <aside>
-          <label><input type="checkbox" on:input={() => setShowHiddenFiles(v => !v)} />Show hidden files</label>
-          <Tree entries={tree().entries} open={open}>{
-            file => file().name
-          }</Tree>
-        </aside>
-
-        <section>
-          <Tabs>
-            <For each={state.files}>{
-              file => <Tab label={file.name}>
-                <Content file={file} />
-              </Tab>
-            }</For>
-          </Tabs>
-        </section>
-      </section>
-    </>
-  );
-}
-
-const Content: Component<{ file: File }> = (props) => {
-  const [content] = createResource(async () => {
-    return await props.file.text();
-  });
-
-  return <Suspense fallback={'loading'}>
-    <pre>{content()}</pre>
-  </Suspense>
-};
+    <ErrorBoundary fallback={e => <ErrorComp error={e} />}>
+      {props.children}
+    </ErrorBoundary>
+  </>;
+}

src/routes/(editor)/experimental/context-menu.module.css

@@ -0,0 +1,43 @@
+.root {
+    display: grid;
+    grid: 100% / auto minmax(0, 1fr);
+    inline-size: 100%;
+    block-size: 100%;
+
+    & .sidebar {
+        z-index: 1;
+        padding: var(--padding-xl);
+        background-color: var(--surface-300);
+        max-inline-size: 25vw;
+        overflow: auto;
+
+        & > ul {
+            padding: 0;
+            margin: 0;
+        }
+
+        & fieldset {
+            display: flex;
+            flex-flow: column;
+            gap: var(--padding-m);
+        }
+
+        ol {
+            margin-block: 0;
+        }
+    }
+
+    & .content {
+        display: block grid;
+        place-content: start;
+        background-color: var(--surface-500);
+        border-top-left-radius: var(--radii-xl);
+        padding: var(--padding-m);
+
+        & > fieldset {
+            border-radius: var(--radii-l);
+            overflow: auto;
+            background-color: inherit;
+        }
+    }
+}

src/routes/(editor)/experimental/context-menu.tsx

@@ -0,0 +1,37 @@
+import { Sidebar } from "~/components/sidebar";
+import { Command, Context, createCommand, Modifier } from "~/features/command";
+import { createSignal } from "solid-js";
+import css from './context-menu.module.css';
+
+export default function ContextMenu(props: {}) {
+    const [message, setMessage] = createSignal('');
+
+    const commands = {
+        back: createCommand('Back', () => setMessage('Back command is triggered'), { key: '[', modifier: Modifier.Control }),
+        forward: createCommand('Forward', () => setMessage('forward command is triggered'), { key: ']', modifier: Modifier.Control }),
+        reload: createCommand('Reload', () => setMessage('reload command is triggered'), { key: 'r', modifier: Modifier.Control }),
+        showBookmarks: createCommand('Show bookmarks', () => setMessage('showBookmarks command is triggered'), { key: 'b', modifier: Modifier.Control }),
+        showFullUrls: createCommand('Show full URL\'s', () => setMessage('showFullUrls command is triggered')),
+        allModifiers: createCommand('shell.command.openCommandPalette', () => setMessage('allModifiers command is triggered'), { key: 'a', modifier: Modifier.Alt | Modifier.Control | Modifier.Meta | Modifier.Shift }),
+    };
+
+    return <div class={css.root}>
+        <Sidebar as="aside" label={'Options'} class={css.sidebar}>
+            <fieldset>
+                <legend>Message</legend>
+
+                <p>{message()}</p>
+            </fieldset>
+        </Sidebar>
+
+        <div class={css.content}>
+            <Context.Root commands={Object.values(commands)}>
+                <Context.Menu>{
+                    command => <Command.Handle command={command} />
+                }</Context.Menu>
+
+                <Context.Handle>Right click on me</Context.Handle>
+            </Context.Root>
+        </div>
+    </div >;
+}

src/routes/(editor)/experimental/experimental.data.ts

@@ -0,0 +1,912 @@
+export type Person = {
+    id: string;
+    name: string;
+    email: string;
+    address: string;
+    currency: string;
+    phone: string;
+    country: string;
+};
+
+export const people: Person[] = [
+    {
+        id: "7E93E245-EE6D-5A81-90A3-1F63E8B31113",
+        name: "Aladdin Richmond",
+        email: "nascetur.ridiculus@yahoo.com",
+        address: "203-9878 Proin St.",
+        currency: "$39.50",
+        phone: "1-516-798-6726",
+        country: "Germany"
+    },
+    {
+        id: "50FA295F-C669-3AE3-392E-87911D9566D8",
+        name: "Kameko Webb",
+        email: "feugiat@hotmail.couk",
+        address: "Ap #791-3349 Mauris St.",
+        currency: "$1.21",
+        phone: "(972) 378-6843",
+        country: "Australia"
+    },
+    {
+        id: "86897ADA-2CF8-62C6-ED8B-8E24932DE6B8",
+        name: "Evan Long",
+        email: "tellus@hotmail.org",
+        address: "548-2713 Nibh Road",
+        currency: "$55.04",
+        phone: "1-743-381-8967",
+        country: "Canada"
+    },
+    {
+        id: "FDBC2C9A-81A5-C3CC-91D3-E936816909D8",
+        name: "Cally Patterson",
+        email: "sapien.gravida.non@google.edu",
+        address: "6474 Id, Rd.",
+        currency: "$0.30",
+        phone: "1-862-278-5241",
+        country: "Ukraine"
+    },
+    {
+        id: "45EFC33E-B344-9C76-F78A-4EA576CD6D18",
+        name: "Felicia Mueller",
+        email: "quisque.tincidunt.pede@protonmail.ca",
+        address: "P.O. Box 949, 7307 Aliquam Ave",
+        currency: "$28.99",
+        phone: "1-888-656-7311",
+        country: "Italy"
+    },
+    {
+        id: "B6ED5A94-6157-FA7F-469E-63C36EB1EC22",
+        name: "Macaulay Chavez",
+        email: "sollicitudin.adipiscing@yahoo.ca",
+        address: "P.O. Box 700, 9974 Enim Av.",
+        currency: "$95.78",
+        phone: "1-264-726-6039",
+        country: "South Korea"
+    },
+    {
+        id: "D80364DF-6859-D9B4-58D7-233762921461",
+        name: "Alika Dyer",
+        email: "natoque@icloud.org",
+        address: "Ap #394-5599 Condimentum. Road",
+        currency: "$67.94",
+        phone: "(146) 668-7705",
+        country: "Norway"
+    },
+    {
+        id: "0E8229F4-B50B-7F0C-3C7D-F8E896D565DC",
+        name: "Azalia Blevins",
+        email: "neque.pellentesque.massa@aol.ca",
+        address: "Ap #664-6708 Morbi Street",
+        currency: "$5.59",
+        phone: "(106) 821-6698",
+        country: "France"
+    },
+    {
+        id: "567BBCF4-EC5E-C0AC-0171-6A68498D3B92",
+        name: "Germane Alston",
+        email: "est.ac@google.net",
+        address: "577-7395 Arcu Avenue",
+        currency: "$79.29",
+        phone: "(467) 344-8586",
+        country: "Singapore"
+    },
+    {
+        id: "DDDDCBB1-CB9F-72C5-474F-679CD38C86F8",
+        name: "Tallulah Owen",
+        email: "nisl.arcu@protonmail.com",
+        address: "3116 Vitae Avenue",
+        currency: "$5.67",
+        phone: "1-605-230-2916",
+        country: "Peru"
+    },
+    {
+        id: "C1B44A11-1834-1C5A-10A9-DC0CDFDD16B0",
+        name: "Amaya Middleton",
+        email: "in@protonmail.couk",
+        address: "9826 Mollis. Street",
+        currency: "$58.29",
+        phone: "(666) 884-1184",
+        country: "Spain"
+    },
+    {
+        id: "A6888F02-1339-9D11-3D37-0D2AF0747075",
+        name: "Ian Fletcher",
+        email: "velit.quisque.varius@hotmail.edu",
+        address: "2660 In Rd.",
+        currency: "$72.36",
+        phone: "(667) 360-6873",
+        country: "India"
+    },
+    {
+        id: "4EB83854-E9CB-E1BD-519D-752D15EBC41C",
+        name: "Hadassah Benton",
+        email: "sagittis@outlook.ca",
+        address: "Ap #543-4861 Integer Rd.",
+        currency: "$45.30",
+        phone: "(724) 824-1341",
+        country: "Singapore"
+    },
+    {
+        id: "93052C01-0D9B-A134-6E95-B1B69EC83CD3",
+        name: "Stephanie Wells",
+        email: "mauris.integer@aol.com",
+        address: "8920 Dictum. Av.",
+        currency: "$86.21",
+        phone: "(883) 909-3324",
+        country: "Philippines"
+    },
+    {
+        id: "3CAE3983-576E-4C74-38FB-B6D7F451994E",
+        name: "Tashya Albert",
+        email: "in@yahoo.couk",
+        address: "520-2552 Sodales Av.",
+        currency: "$9.36",
+        phone: "1-546-322-0227",
+        country: "United States"
+    },
+    {
+        id: "47438DC3-3F85-C579-811F-26AACFA3A53F",
+        name: "Lance Caldwell",
+        email: "vitae.aliquet@protonmail.net",
+        address: "6956 Enim Rd.",
+        currency: "$1.25",
+        phone: "(652) 257-5587",
+        country: "Norway"
+    },
+    {
+        id: "48BBA3D6-D98D-28EA-5B5F-131D9CA48648",
+        name: "Abigail Murphy",
+        email: "proin.vel.nisl@google.net",
+        address: "957-5726 Felis Ave",
+        currency: "$48.30",
+        phone: "(804) 473-5412",
+        country: "Canada"
+    },
+    {
+        id: "599E2BDB-2207-ADE6-835B-61C68EDCF99D",
+        name: "Carson Dennis",
+        email: "aliquet@google.edu",
+        address: "372-7110 Nonummy Street",
+        currency: "$51.26",
+        phone: "1-881-863-8682",
+        country: "Norway"
+    },
+    {
+        id: "1BE3A1CC-1A28-95B2-1244-A6D75962B68C",
+        name: "Colette Peters",
+        email: "facilisis.facilisis@protonmail.com",
+        address: "291-5335 Suspendisse St.",
+        currency: "$85.13",
+        phone: "(373) 952-2326",
+        country: "Brazil"
+    },
+    {
+        id: "4EEE4884-F579-9878-ADD4-EE5185825AE1",
+        name: "Hector Martin",
+        email: "et.malesuada@google.org",
+        address: "P.O. Box 990, 2093 Quis Ave",
+        currency: "$71.70",
+        phone: "(879) 203-0238",
+        country: "Brazil"
+    },
+    {
+        id: "C51BB636-9B83-5A85-2ABA-1B0C27CD850F",
+        name: "Heather Cline",
+        email: "dapibus.quam@outlook.ca",
+        address: "1397 Lacinia. Av.",
+        currency: "$59.53",
+        phone: "1-655-744-2096",
+        country: "Italy"
+    },
+    {
+        id: "3B3A3BE1-9965-A3D2-74BE-87933D2F830A",
+        name: "Nicholas Mccray",
+        email: "consectetuer.cursus@hotmail.edu",
+        address: "Ap #243-4984 Vitae St.",
+        currency: "$99.27",
+        phone: "1-476-397-4156",
+        country: "Canada"
+    },
+    {
+        id: "C3750CA9-AB01-A4C3-74A3-7272C5252F83",
+        name: "Whitney Vang",
+        email: "enim.etiam@aol.couk",
+        address: "P.O. Box 834, 9396 Odio Street",
+        currency: "$24.57",
+        phone: "1-308-724-1444",
+        country: "Germany"
+    },
+    {
+        id: "EBB92007-1878-F358-C880-77C13A392443",
+        name: "Ezra Joyce",
+        email: "montes.nascetur.ridiculus@aol.edu",
+        address: "P.O. Box 615, 1455 Natoque St.",
+        currency: "$98.17",
+        phone: "1-287-541-2616",
+        country: "Australia"
+    },
+    {
+        id: "5EAB2CEA-4B5B-D53A-D65C-1FB7266674ED",
+        name: "Bruce Flores",
+        email: "vel.venenatis@protonmail.com",
+        address: "675-1394 Nunc Street",
+        currency: "$29.46",
+        phone: "1-584-584-0467",
+        country: "Brazil"
+    },
+    {
+        id: "7F2CADB9-5D82-A1C8-7404-B689D4988B92",
+        name: "Scarlet Sloan",
+        email: "massa.mauris.vestibulum@protonmail.net",
+        address: "Ap #539-6639 Non, Av.",
+        currency: "$21.24",
+        phone: "1-571-712-8158",
+        country: "Colombia"
+    },
+    {
+        id: "47FD8B85-FB91-B1A4-4F77-89CC76EB511B",
+        name: "Jana Levine",
+        email: "diam.proin.dolor@icloud.com",
+        address: "516-4289 Fringilla, Avenue",
+        currency: "$90.51",
+        phone: "1-723-413-3072",
+        country: "Spain"
+    },
+    {
+        id: "73454085-A828-4E62-17A2-6CDC81EF7C88",
+        name: "Quinn Eaton",
+        email: "suspendisse.aliquet@hotmail.couk",
+        address: "Ap #670-5636 Tempus Road",
+        currency: "$32.21",
+        phone: "(335) 623-1450",
+        country: "South Africa"
+    },
+    {
+        id: "222A395E-1FFA-A8F2-75AB-6DB2473E226B",
+        name: "Shelby Carter",
+        email: "sem@icloud.com",
+        address: "644-6798 Ultricies Rd.",
+        currency: "$67.00",
+        phone: "1-916-384-3689",
+        country: "Norway"
+    },
+    {
+        id: "191DA217-A9B2-4B0F-7267-0EDB99BB1DE4",
+        name: "Minerva Huff",
+        email: "vestibulum.nec@hotmail.ca",
+        address: "Ap #604-9554 Ac, St.",
+        currency: "$70.01",
+        phone: "(402) 741-9663",
+        country: "Indonesia"
+    },
+    {
+        id: "AE1D16C1-25A7-7EBB-4A5D-E2E44C6675D8",
+        name: "Rana Alvarado",
+        email: "nulla@outlook.couk",
+        address: "Ap #458-608 Aliquam Avenue",
+        currency: "$5.73",
+        phone: "1-724-725-3887",
+        country: "Brazil"
+    },
+    {
+        id: "42088D15-FBAC-D55B-5637-26092571ACA0",
+        name: "Nadine Nieves",
+        email: "luctus@google.edu",
+        address: "Ap #644-2122 Sed Ave",
+        currency: "$69.56",
+        phone: "(275) 674-9316",
+        country: "Ukraine"
+    },
+    {
+        id: "8556BF71-F3D4-CD25-9E46-4188BBB77FE7",
+        name: "Hiram Bauer",
+        email: "nunc.sed.orci@outlook.org",
+        address: "Ap #792-8032 Est Rd.",
+        currency: "$66.52",
+        phone: "(294) 744-1754",
+        country: "Germany"
+    },
+    {
+        id: "EBEDFEDF-C343-CA7B-99DD-08C550E2AC2F",
+        name: "Nash Fletcher",
+        email: "pede.cras@yahoo.edu",
+        address: "582-9734 Et, Ave",
+        currency: "$74.50",
+        phone: "1-654-581-9096",
+        country: "Turkey"
+    },
+    {
+        id: "66945E12-6ABA-435E-DBB2-55072D213951",
+        name: "Ria Valentine",
+        email: "parturient.montes.nascetur@outlook.com",
+        address: "Ap #152-9476 Curabitur Av.",
+        currency: "$35.43",
+        phone: "1-632-584-4728",
+        country: "India"
+    },
+    {
+        id: "3E085CC0-253B-ABE1-1C3C-E7325A77DEC3",
+        name: "Lamar Cline",
+        email: "amet.nulla@hotmail.couk",
+        address: "Ap #381-4841 Dis Rd.",
+        currency: "$69.78",
+        phone: "(561) 267-5896",
+        country: "Chile"
+    },
+    {
+        id: "ED793F77-16A8-11B2-410B-1AFA3943DABB",
+        name: "Adam Glenn",
+        email: "tempus.scelerisque@aol.couk",
+        address: "P.O. Box 132, 8775 Neque. St.",
+        currency: "$85.83",
+        phone: "(143) 918-7499",
+        country: "Nigeria"
+    },
+    {
+        id: "D36366C9-573D-5293-A1CC-93F842AE07D8",
+        name: "Oleg Vargas",
+        email: "tortor.nunc@outlook.com",
+        address: "204-9848 Erat, Street",
+        currency: "$67.26",
+        phone: "1-428-932-9180",
+        country: "Canada"
+    },
+    {
+        id: "B6C8E515-2112-F28E-594D-1B7C0D7B47F1",
+        name: "Melissa York",
+        email: "pede.malesuada.vel@yahoo.ca",
+        address: "146-3278 Lacus, Av.",
+        currency: "$15.71",
+        phone: "(161) 547-1183",
+        country: "Spain"
+    },
+    {
+        id: "C7661679-B0CC-85E7-FAD6-FDCD6BB97E5D",
+        name: "Drake Wolfe",
+        email: "cras.interdum@protonmail.couk",
+        address: "317-4048 Magna. Street",
+        currency: "$69.44",
+        phone: "(253) 698-1881",
+        country: "Vietnam"
+    },
+    {
+        id: "C6D4011F-84C2-6EDA-3D95-9D83CA97C25E",
+        name: "Deacon Ayala",
+        email: "nec.cursus@outlook.couk",
+        address: "410-6611 Nec Road",
+        currency: "$89.08",
+        phone: "(335) 769-5622",
+        country: "Poland"
+    },
+    {
+        id: "48B0C5DE-5E7E-D1A2-1366-2DBE82623331",
+        name: "Martha Rasmussen",
+        email: "sed.sem.egestas@aol.ca",
+        address: "Ap #719-7379 Sem Avenue",
+        currency: "$34.26",
+        phone: "1-432-647-6289",
+        country: "Italy"
+    },
+    {
+        id: "83DEBC19-D86B-7A0B-CBC6-C1AC57A9B4D8",
+        name: "Griffin English",
+        email: "nascetur@hotmail.edu",
+        address: "Ap #410-5614 Enim Rd.",
+        currency: "$61.15",
+        phone: "(745) 862-7525",
+        country: "Germany"
+    },
+    {
+        id: "9FAB9263-858B-3F7D-C34B-D0C955ECE98E",
+        name: "Lael Hall",
+        email: "libero.proin@icloud.org",
+        address: "Ap #387-807 Dui. Rd.",
+        currency: "$51.40",
+        phone: "1-323-462-5570",
+        country: "Peru"
+    },
+    {
+        id: "410DF3DD-2374-4225-3878-5BDD2CD8497E",
+        name: "Dale Watson",
+        email: "ridiculus.mus.proin@google.org",
+        address: "355-5985 Nunc. Avenue",
+        currency: "$81.86",
+        phone: "(826) 263-8128",
+        country: "New Zealand"
+    },
+    {
+        id: "91134C51-B2C7-AA9E-C8BE-7940E8CEF347",
+        name: "Tallulah Maxwell",
+        email: "id.erat@aol.edu",
+        address: "Ap #539-2080 In Rd.",
+        currency: "$57.72",
+        phone: "1-533-213-5545",
+        country: "United Kingdom"
+    },
+    {
+        id: "45823C44-F871-CE46-D919-8794F37F0071",
+        name: "Nevada Stewart",
+        email: "fusce.dolor@outlook.com",
+        address: "P.O. Box 316, 2949 Consequat Road",
+        currency: "$50.13",
+        phone: "(702) 428-5341",
+        country: "Sweden"
+    },
+    {
+        id: "58963DE5-F784-DD1A-132D-F7C483DD56DE",
+        name: "Jennifer Leon",
+        email: "ut.nisi@yahoo.couk",
+        address: "Ap #978-9336 Nunc Av.",
+        currency: "$21.85",
+        phone: "(719) 554-6625",
+        country: "India"
+    },
+    {
+        id: "2D9B4BDE-D17D-17DF-8DDF-61C8CD2283A1",
+        name: "Harlan Ramirez",
+        email: "ac.mattis@icloud.ca",
+        address: "7405 Eget, St.",
+        currency: "$1.95",
+        phone: "(693) 365-2698",
+        country: "Pakistan"
+    },
+    {
+        id: "4E36276F-C276-CEE6-19E9-A921ACDDFADD",
+        name: "Carla Browning",
+        email: "ut.erat@aol.com",
+        address: "Ap #565-6003 Donec Rd.",
+        currency: "$43.23",
+        phone: "(298) 504-0724",
+        country: "Russian Federation"
+    },
+    {
+        id: "A749736E-4CBD-BCD1-AF11-CCA0F63180CA",
+        name: "David Mcclain",
+        email: "ante@icloud.couk",
+        address: "P.O. Box 310, 3364 Justo. Rd.",
+        currency: "$61.66",
+        phone: "(723) 657-8468",
+        country: "France"
+    },
+    {
+        id: "01C396C4-A15E-6794-215D-DA52CDB4E5AA",
+        name: "Camilla Lee",
+        email: "in.lobortis@aol.net",
+        address: "992-836 Ligula Rd.",
+        currency: "$35.30",
+        phone: "(516) 554-6659",
+        country: "China"
+    },
+    {
+        id: "E77218AB-D486-64C1-A4E4-7AA0D98DCE35",
+        name: "Patience Mathis",
+        email: "eleifend.cras.sed@yahoo.net",
+        address: "Ap #369-2958 Amet Av.",
+        currency: "$85.55",
+        phone: "1-523-874-1312",
+        country: "Turkey"
+    },
+    {
+        id: "C32448D3-6F0E-9C12-BAE5-9B7C596E24D0",
+        name: "Celeste Wall",
+        email: "metus.aliquam@outlook.couk",
+        address: "507-285 Enim Rd.",
+        currency: "$83.85",
+        phone: "(467) 528-6086",
+        country: "Poland"
+    },
+    {
+        id: "44EB92FF-0EF2-7B8F-D75F-570A3984D6BC",
+        name: "Sophia Mcpherson",
+        email: "aliquam.adipiscing@icloud.org",
+        address: "7824 At St.",
+        currency: "$50.48",
+        phone: "(358) 574-8679",
+        country: "South Africa"
+    },
+    {
+        id: "7A78595B-C0D2-10AC-6DC4-AE4434749C72",
+        name: "Ivy Snyder",
+        email: "non.luctus.sit@outlook.couk",
+        address: "864-8907 Mi St.",
+        currency: "$74.71",
+        phone: "1-786-486-7004",
+        country: "Norway"
+    },
+    {
+        id: "8AAB498C-D43D-6247-C7E1-48D2050B7E7A",
+        name: "Castor Wyatt",
+        email: "cras.lorem@outlook.net",
+        address: "Ap #319-7577 Non Avenue",
+        currency: "$29.70",
+        phone: "1-852-883-4757",
+        country: "Costa Rica"
+    },
+    {
+        id: "8E249A37-BEDF-9F12-7347-64181E74DDCE",
+        name: "Abdul Ferguson",
+        email: "non.luctus@protonmail.couk",
+        address: "P.O. Box 241, 8266 Nullam Av.",
+        currency: "$91.19",
+        phone: "(487) 915-8836",
+        country: "Ukraine"
+    },
+    {
+        id: "BD1B5AC0-04E7-72A7-E3B6-ACD4B0E245BC",
+        name: "Nola Mccormick",
+        email: "mauris@google.couk",
+        address: "137-819 Odio Av.",
+        currency: "$28.48",
+        phone: "1-321-139-1401",
+        country: "Turkey"
+    },
+    {
+        id: "5FC03423-7AB8-9CD4-D293-BB428EA492B4",
+        name: "Chester Alvarez",
+        email: "dolor@google.net",
+        address: "7516 Sapien. Street",
+        currency: "$66.38",
+        phone: "(265) 314-5742",
+        country: "China"
+    },
+    {
+        id: "997CA808-2B44-6EFB-8B34-E808D7F015E4",
+        name: "Francesca Albert",
+        email: "nullam.feugiat.placerat@hotmail.org",
+        address: "Ap #685-8227 Dui Rd.",
+        currency: "$17.43",
+        phone: "(783) 405-9149",
+        country: "Brazil"
+    },
+    {
+        id: "DB8E94E7-D8B5-441D-F5E2-A3C7E4EC2242",
+        name: "Felix Key",
+        email: "et@yahoo.couk",
+        address: "Ap #884-7678 Pede. Rd.",
+        currency: "$21.65",
+        phone: "(624) 280-8172",
+        country: "Costa Rica"
+    },
+    {
+        id: "BECB4581-D4DC-CB3A-9F57-B4F8E2685D5E",
+        name: "Brett Merritt",
+        email: "et.malesuada@outlook.org",
+        address: "799-9827 Eget Av.",
+        currency: "$70.27",
+        phone: "(737) 937-3228",
+        country: "Canada"
+    },
+    {
+        id: "8E4B65B8-DF13-A727-56CD-A77A90A244D8",
+        name: "Gil Petty",
+        email: "risus.at@outlook.ca",
+        address: "907-9582 Consectetuer Ave",
+        currency: "$2.68",
+        phone: "(165) 557-5518",
+        country: "Singapore"
+    },
+    {
+        id: "CB0BBC36-C3A7-6A31-14E7-DC0160643CBD",
+        name: "Zephania Callahan",
+        email: "viverra.maecenas.iaculis@hotmail.org",
+        address: "P.O. Box 611, 4935 Nec Street",
+        currency: "$36.33",
+        phone: "1-273-539-6366",
+        country: "Russian Federation"
+    },
+    {
+        id: "2B37AE08-69E7-49F1-B332-D5913E889901",
+        name: "Knox Wynn",
+        email: "sollicitudin.adipiscing.ligula@outlook.ca",
+        address: "726-9675 Libero. Road",
+        currency: "$22.38",
+        phone: "(908) 614-6537",
+        country: "Netherlands"
+    },
+    {
+        id: "DC8A4453-862C-DAEB-5B5A-670D3D2B71E2",
+        name: "Quemby Glass",
+        email: "mollis.integer@hotmail.edu",
+        address: "Ap #904-5448 Pellentesque Street",
+        currency: "$15.17",
+        phone: "1-585-578-2949",
+        country: "Peru"
+    },
+    {
+        id: "31694084-A3AE-631B-E518-59E57D87A21B",
+        name: "Xenos Henson",
+        email: "eleifend.vitae@yahoo.couk",
+        address: "119-5443 Fusce Avenue",
+        currency: "$27.14",
+        phone: "(982) 316-5425",
+        country: "Indonesia"
+    },
+    {
+        id: "4EF7ED08-8079-AED6-799B-21643E113739",
+        name: "Boris Moon",
+        email: "sagittis@outlook.com",
+        address: "Ap #308-4697 Mus. St.",
+        currency: "$77.35",
+        phone: "1-175-312-2554",
+        country: "Ireland"
+    },
+    {
+        id: "395F41C5-3EEC-48BE-6E7B-39D4AF93EA25",
+        name: "Driscoll Martinez",
+        email: "aliquam.gravida@hotmail.net",
+        address: "3165 In Rd.",
+        currency: "$59.31",
+        phone: "1-526-571-4474",
+        country: "Germany"
+    },
+    {
+        id: "A3BA8E46-BC26-257C-C65C-7F2A555E229A",
+        name: "Cullen Vang",
+        email: "vestibulum.ut@protonmail.org",
+        address: "147-8366 Purus Road",
+        currency: "$91.46",
+        phone: "1-554-746-5663",
+        country: "South Africa"
+    },
+    {
+        id: "7E493C34-3376-9D34-4991-A388D6C78173",
+        name: "August Payne",
+        email: "placerat.eget.venenatis@yahoo.org",
+        address: "Ap #986-7302 Enim Road",
+        currency: "$82.53",
+        phone: "(758) 727-4871",
+        country: "Spain"
+    },
+    {
+        id: "951EBFF6-DFAE-4787-2533-87EACB888149",
+        name: "Kasper Mcgowan",
+        email: "ligula.nullam.feugiat@protonmail.ca",
+        address: "307-6319 In St.",
+        currency: "$34.64",
+        phone: "(873) 238-3336",
+        country: "Pakistan"
+    },
+    {
+        id: "41566BA0-85BA-1BD9-9D9F-C59B36927799",
+        name: "Cole Wells",
+        email: "lacus.vestibulum@yahoo.edu",
+        address: "741-9677 Maecenas Avenue",
+        currency: "$52.67",
+        phone: "(835) 174-6985",
+        country: "Vietnam"
+    },
+    {
+        id: "50B0CAAA-8084-5E4A-0355-47E222498588",
+        name: "Oscar Hicks",
+        email: "rhoncus.donec.est@hotmail.edu",
+        address: "6575 Vel, Ave",
+        currency: "$78.07",
+        phone: "(440) 215-2323",
+        country: "United Kingdom"
+    },
+    {
+        id: "A94E3BA4-5A35-973E-3E98-627CDCF27D6C",
+        name: "Flynn Moss",
+        email: "libero.est@yahoo.ca",
+        address: "P.O. Box 634, 7418 Enim Ave",
+        currency: "$60.94",
+        phone: "1-888-848-3281",
+        country: "Sweden"
+    },
+    {
+        id: "C68478BE-22E4-B832-C486-C51A497ABBD7",
+        name: "Courtney Crane",
+        email: "fusce.aliquet.magna@aol.couk",
+        address: "8896 Tempus Road",
+        currency: "$69.05",
+        phone: "1-426-784-7273",
+        country: "Australia"
+    },
+    {
+        id: "D8DB4622-C6A9-2FB1-93D8-E2117308E42A",
+        name: "Camilla Carr",
+        email: "nisl.elementum.purus@icloud.net",
+        address: "Ap #818-1429 Tellus Rd.",
+        currency: "$5.90",
+        phone: "(171) 515-2419",
+        country: "Chile"
+    },
+    {
+        id: "99451145-24E3-D782-2EDA-A124314F3061",
+        name: "Maite Roberson",
+        email: "eu@hotmail.net",
+        address: "4400 Aliquet, Avenue",
+        currency: "$81.83",
+        phone: "1-863-927-1813",
+        country: "France"
+    },
+    {
+        id: "C62B5ACA-7521-0918-DD24-64B2AABA1E75",
+        name: "Carissa Robertson",
+        email: "lacus.cras@google.edu",
+        address: "Ap #780-4027 Mattis Av.",
+        currency: "$36.42",
+        phone: "(528) 889-8825",
+        country: "Chile"
+    },
+    {
+        id: "691ACDCE-7733-5E71-C2A7-E1D415290226",
+        name: "Mason Cook",
+        email: "augue.porttitor@icloud.com",
+        address: "4469 Molestie St.",
+        currency: "$61.49",
+        phone: "1-415-113-6364",
+        country: "India"
+    },
+    {
+        id: "4E843992-77C3-2A53-2174-562D7365AC40",
+        name: "Christen Gallegos",
+        email: "sed.tortor.integer@icloud.ca",
+        address: "Ap #124-8627 Litora Rd.",
+        currency: "$83.39",
+        phone: "(329) 802-7735",
+        country: "Canada"
+    },
+    {
+        id: "7419E34B-D769-3D93-C594-1069700ECBEE",
+        name: "Raymond Rivas",
+        email: "condimentum@protonmail.net",
+        address: "Ap #771-8621 Ultrices. St.",
+        currency: "$91.04",
+        phone: "(418) 581-0485",
+        country: "Costa Rica"
+    },
+    {
+        id: "5E612210-D8ED-7F6A-F6A6-F902C59621C6",
+        name: "Jamal Trevino",
+        email: "pulvinar.arcu.et@google.net",
+        address: "367-7229 Sollicitudin Road",
+        currency: "$68.33",
+        phone: "(975) 631-8740",
+        country: "Italy"
+    },
+    {
+        id: "32E1DBE7-DA55-45D3-C6BF-BCDE81318482",
+        name: "Kevin Mills",
+        email: "risus.donec@protonmail.couk",
+        address: "7216 Etiam St.",
+        currency: "$44.60",
+        phone: "1-760-366-1613",
+        country: "Ireland"
+    },
+    {
+        id: "2C40DA8C-C67A-ACC8-BB1E-13CACF5B241A",
+        name: "Vincent Mays",
+        email: "sollicitudin@protonmail.net",
+        address: "Ap #743-5638 Dolor. Ave",
+        currency: "$40.33",
+        phone: "(292) 913-1705",
+        country: "Belgium"
+    },
+    {
+        id: "79DDDC92-C413-E3B9-713F-DBE6CC4E22C1",
+        name: "Jason Briggs",
+        email: "adipiscing.fringilla@outlook.com",
+        address: "P.O. Box 540, 6283 Vivamus Road",
+        currency: "$31.57",
+        phone: "(412) 677-7838",
+        country: "Ireland"
+    },
+    {
+        id: "5362D327-9F33-9465-DB25-5749BB7AA28B",
+        name: "Heather Graham",
+        email: "mauris.sit.amet@yahoo.ca",
+        address: "4115 Purus. Ave",
+        currency: "$2.13",
+        phone: "(426) 284-8161",
+        country: "Ukraine"
+    },
+    {
+        id: "875E833E-EA72-67EE-BE2E-9D6191C985E9",
+        name: "Sade Mcdowell",
+        email: "cras@hotmail.ca",
+        address: "2547 Eu St.",
+        currency: "$83.65",
+        phone: "(551) 907-3525",
+        country: "United States"
+    },
+    {
+        id: "4B9C5FAA-0A47-FE44-B242-A1D5B43D31E6",
+        name: "Simon Alvarez",
+        email: "quis.turpis@yahoo.net",
+        address: "P.O. Box 173, 2312 Lectus. Av.",
+        currency: "$83.26",
+        phone: "1-291-238-9787",
+        country: "Belgium"
+    },
+    {
+        id: "9C3E1E9B-48F2-1EC5-237D-806ADBB3199C",
+        name: "Sawyer Wilkins",
+        email: "volutpat@google.org",
+        address: "4179 Metus St.",
+        currency: "$97.12",
+        phone: "1-783-726-6155",
+        country: "Indonesia"
+    },
+    {
+        id: "E790F9CA-B5D1-3853-D6ED-86D5D0FAAB11",
+        name: "Beverly Mccarthy",
+        email: "cursus.luctus.ipsum@google.edu",
+        address: "Ap #584-8322 Ipsum Avenue",
+        currency: "$46.59",
+        phone: "(319) 278-1819",
+        country: "Ireland"
+    },
+    {
+        id: "7AA9047F-A442-4517-8236-C6954E61384E",
+        name: "Colleen Mcconnell",
+        email: "nonummy.fusce@outlook.couk",
+        address: "851-3527 Purus. Avenue",
+        currency: "$62.37",
+        phone: "1-515-785-6715",
+        country: "United States"
+    },
+    {
+        id: "24F34B47-6CD5-C56B-DD8F-B7F7929EFCB2",
+        name: "Laurel Holden",
+        email: "nonummy.ultricies@icloud.couk",
+        address: "483-446 Purus. Rd.",
+        currency: "$33.65",
+        phone: "(901) 974-1583",
+        country: "Colombia"
+    },
+    {
+        id: "EE624558-D145-5746-B1E5-A32BB85BB937",
+        name: "Deirdre Hooper",
+        email: "integer.tincidunt.aliquam@protonmail.com",
+        address: "Ap #130-8592 Ornare. St.",
+        currency: "$89.93",
+        phone: "1-385-432-3554",
+        country: "Spain"
+    },
+    {
+        id: "6943CA38-76D9-2969-26B3-888EDB31ACA1",
+        name: "Dacey Charles",
+        email: "blandit.viverra.donec@protonmail.org",
+        address: "595-9926 A Rd.",
+        currency: "$72.81",
+        phone: "(816) 671-3696",
+        country: "Philippines"
+    },
+    {
+        id: "1BC6B91E-B082-A9EA-A82D-BE3E7871549B",
+        name: "Mari Cote",
+        email: "dictum@protonmail.org",
+        address: "4262 Sociosqu Avenue",
+        currency: "$95.18",
+        phone: "(357) 638-7278",
+        country: "United States"
+    },
+    {
+        id: "2985D71C-031D-B67A-F4D7-D60241487C95",
+        name: "Otto Ortega",
+        email: "aenean.eget@yahoo.net",
+        address: "930-5830 Pellentesque St.",
+        currency: "$89.39",
+        phone: "(517) 383-2271",
+        country: "China"
+    },
+    {
+        id: "98346A89-D597-A761-EE22-6CD8E4E618B3",
+        name: "Noah Mccoy",
+        email: "volutpat.ornare.facilisis@protonmail.org",
+        address: "668-3532 Egestas. Rd.",
+        currency: "$14.19",
+        phone: "1-626-963-3589",
+        country: "China"
+    },
+    {
+        id: "AB5BF476-B345-492B-C7B7-A73A3181B490",
+        name: "Alyssa Davidson",
+        email: "vitae.nibh.donec@icloud.couk",
+        address: "Ap #874-2115 Enim Av.",
+        currency: "$73.44",
+        phone: "(313) 657-3807",
+        country: "Canada"
+    }
+];

src/routes/(editor)/experimental/file-system-observer.tsx

@@ -0,0 +1,32 @@
+import { createEffect, createSignal, on } from "solid-js";
+import { readFiles } from "~/features/file";
+import { contentsOf } from "~/features/file/helpers";
+
+export default function FileObserver(props: {}) {
+    const [dir, setDir] = createSignal<FileSystemDirectoryHandle>();
+
+    const files = readFiles(dir);
+    const contents = contentsOf(dir);
+
+    const open = async () => {
+        const handle = await window.showDirectoryPicker();
+
+        setDir(handle)
+    };
+
+    createEffect(() => {
+        console.log('dir', dir());
+    });
+
+    createEffect(() => {
+        console.log('files', files());
+    });
+
+    createEffect(() => {
+        console.log('contents', contents());
+    });
+
+    return <div>
+        <button onclick={open}>Select folder</button>
+    </div>;
+}

src/routes/(editor)/experimental/formatter.module.css

@@ -0,0 +1,22 @@
+.root {
+    position: relative;
+    margin: 1em;
+    padding: .5em;
+    gap: 1em;
+    display: grid;
+
+    grid: 100% / repeat(2, minmax(0, 1fr));
+
+    inline-size: calc(100% - 2em);
+    block-size: calc(100% - 2em);
+
+    place-content: start;
+    background-color: var(--surface-500);
+    border-radius: var(--radii-xl);
+
+    & > :is(textarea, .textarea) {
+        overflow: auto;
+        padding: .5em;
+        background-color: transparent;
+    }
+}

src/routes/(editor)/experimental/formatter.tsx

@@ -0,0 +1,43 @@
+import { createSignal } from "solid-js";
+import { debounce } from "@solid-primitives/scheduled";
+import { Textarea } from "~/components/textarea";
+import css from './formatter.module.css';
+
+const tempVal = `
+# Header
+
+this is **a string** that contains bolded text
+
+this is *a string* that contains italicized text
+
+> Dorothy followed her through many of the beautiful rooms in her castle.
+
+> Dorothy followed her through many of the beautiful rooms in her castle.
+>
+> > The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
+
+> #### The quarterly results look great!
+>
+> - Revenue was off the chart.
+> - Profits were higher than ever.
+>
+> *Everything* is going according to **plan**.
+
+- First item
+- Second item
+- Third item
+- Fourth item
+`;
+
+export default function Formatter(props: {}) {
+    const [value, setValue] = createSignal(tempVal);
+
+    const onInput = debounce((e: InputEvent) => {
+        setValue((e.target! as HTMLTextAreaElement).value);
+    }, 300);
+
+    return <div class={css.root}>
+        <textarea oninput={onInput}>{value()}</textarea>
+        <Textarea class={css.textarea} value={value()} oninput={setValue} lang="en-GB" />
+    </div>;
+}

src/routes/(editor)/experimental/grid.module.css

@@ -0,0 +1,47 @@
+.root {
+    display: grid;
+    grid: 100% / auto minmax(0, 1fr);
+    inline-size: 100%;
+    block-size: 100%;
+
+    & .sidebar {
+        z-index: 1;
+        padding: var(--padding-xl);
+        background-color: var(--surface-300);
+        max-inline-size: 25vw;
+        overflow: auto;
+
+        & > ul {
+            padding: 0;
+            margin: 0;
+        }
+
+        & fieldset {
+            display: flex;
+            flex-flow: column;
+            gap: var(--padding-m);
+        }
+
+        ol {
+            margin-block: 0;
+        }
+    }
+
+    & .content {
+        display: block grid;
+        grid: 1fr 1fr / 100%;
+        background-color: var(--surface-500);
+        border-top-left-radius: var(--radii-xl);
+        padding: var(--padding-m);
+
+        & .table {
+            border-radius: inherit;
+        }
+
+        & > fieldset {
+            border-radius: var(--radii-l);
+            overflow: auto;
+            background-color: inherit;
+        }
+    }
+}

src/routes/(editor)/experimental/grid.tsx

@@ -0,0 +1,120 @@
+import { Sidebar } from '~/components/sidebar';
+import { CellEditor, Column, DataSetGroupNode, DataSetNode, DataSetRowNode, Grid, GridApi } from '~/components/grid';
+import { people, Person } from './experimental.data';
+import { Component, createEffect, createMemo, createSignal, For, Match, Switch } from 'solid-js';
+import { MutarionKind, Mutation } from '~/utilities';
+import { Table } from '~/components/table';
+import { createDataSet } from '~/features/dataset';
+import { debounce } from '@solid-primitives/scheduled';
+import css from './grid.module.css';
+
+export default function GridExperiment() {
+    const editor: CellEditor<any, any> = ({ value, mutate }) => <input value={value} oninput={debounce(e => mutate(e.target.value.trim()), 300)} />
+
+    const columns: Column<Person>[] = [
+        {
+            id: 'id',
+            label: '#',
+            groupBy(rows: DataSetRowNode<Person>[]) {
+                const group = (nodes: (DataSetRowNode<Person> & { _key: string })[]): DataSetNode<Person>[] => nodes.every(n => n._key.includes('.') === false)
+                    ? nodes
+                    : Object.entries(Object.groupBy(nodes, r => String(r._key).split('.').at(0)!))
+                        .map<DataSetGroupNode<Person>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'id', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
+
+                return group(rows.map(row => ({ ...row, _key: row.value.id })));
+            },
+        },
+        {
+            id: 'name',
+            label: 'Name',
+            sortable: true,
+            renderer: editor,
+        },
+        {
+            id: 'email',
+            label: 'Email',
+            sortable: true,
+            renderer: editor,
+        },
+        {
+            id: 'address',
+            label: 'Address',
+            sortable: true,
+            renderer: editor,
+        },
+        {
+            id: 'currency',
+            label: 'Currency',
+            sortable: true,
+            renderer: editor,
+        },
+        {
+            id: 'phone',
+            label: 'Phone',
+            sortable: true,
+            renderer: editor,
+        },
+        {
+            id: 'country',
+            label: 'Country',
+            sortable: true,
+            renderer: editor,
+        },
+    ];
+
+    const [api, setApi] = createSignal<GridApi<Person>>();
+
+    const mutations = createMemo(() => api()?.mutations() ?? [])
+
+    const rows = createDataSet(() => people.slice(0, 20), {
+        // group: { by: 'country' },
+        sort: { by: 'name', reversed: false },
+    });
+
+    return <div class={css.root}>
+        <Sidebar as="aside" label={'Grid options'} class={css.sidebar}>
+            <fieldset>
+                <legend>Commands</legend>
+
+                <button name="insert row" onclick={() => api()?.insert({ id: crypto.randomUUID(), name: '', address: '', country: '', currency: '', email: '', phone: '' })}>add row</button>
+                <button name="delete selected items" onclick={() => api()?.remove(api()?.selection()?.map(i => i.key as any) ?? [])} disabled={api()?.selection().length === 0}>Remove {api()?.selection().length} items</button>
+            </fieldset>
+
+            <fieldset>
+                <legend>Selection ({api()?.selection().length})</legend>
+
+                <ol>
+                    <For each={api()?.selection()}>{
+                        item => <li value={item.key}>{item.value().name}</li>
+                    }</For>
+                </ol>
+            </fieldset>
+        </Sidebar>
+
+        <div class={css.content}>
+            <Grid class={css.table} api={setApi} data={rows} columns={columns} groupBy="country" />
+
+            <fieldset class={css.mutaions}>
+                <legend>Mutations ({mutations().length})</legend>
+
+                <Mutations mutations={mutations()} />
+            </fieldset>
+        </div>
+    </div >;
+}
+
+type M = { kind: MutarionKind, key: string, original?: any, value?: any };
+const Mutations: Component<{ mutations: Mutation[] }> = (props) => {
+    const columns: Column<M>[] = [{ id: 'key', label: 'Key' }, { id: 'original', label: 'Old' }, { id: 'value', label: 'New' }];
+
+    const rows = createMemo(() => createDataSet<M>(props.mutations));
+
+    createEffect(() => {
+        rows().group({ by: 'kind' });
+    });
+
+    return <Table rows={rows()} columns={columns}>{{
+        original: ({ value }) => value ? <del><pre>{JSON.stringify(value, null, 2)}</pre></del> : null,
+        value: ({ value }) => value ? <ins><pre>{JSON.stringify(value, null, 2)}</pre></ins> : null,
+    }}</Table>
+};

src/routes/(editor)/experimental/index.tsx

@@ -0,0 +1,5 @@
+
+
+export default function Index(props: {}) {
+    return <></>;
+} 

src/routes/(editor)/experimental/table.module.css

@@ -0,0 +1,36 @@
+.root {
+    display: grid;
+    grid: 100% / auto minmax(0, 1fr);
+    inline-size: 100%;
+    block-size: 100%;
+
+    & .sidebar {
+        z-index: 1;
+        padding: var(--padding-xl);
+        background-color: var(--surface-300);
+
+        & > ul {
+            padding: 0;
+            margin: 0;
+        }
+
+        & fieldset {
+            display: flex;
+            flex-flow: column;
+            gap: var(--padding-m);
+        }
+    }
+
+    & .content {
+        background-color: var(--surface-500);
+        border-top-left-radius: var(--radii-xl);
+
+        & > header {
+            padding-inline-start: var(--padding-l);
+        }
+
+        & .table {
+            border-radius: inherit;
+        }
+    }
+}

src/routes/(editor)/experimental/table.tsx

@@ -0,0 +1,135 @@
+import { Sidebar } from '~/components/sidebar';
+import { Column, SelectionMode, Table } from '~/components/table';
+import { createDataSet, DataSetGroupNode, DataSetNode, DataSetRowNode, GroupOptions, SortOptions } from '~/features/dataset';
+import { createStore } from 'solid-js/store';
+import { Person, people } from './experimental.data';
+import { createEffect, createMemo, For } from 'solid-js';
+import css from './table.module.css';
+
+export default function TableExperiment() {
+    const columns: Column<Person>[] = [
+        {
+            id: 'id',
+            label: '#',
+            groupBy(rows: DataSetRowNode<keyof Person, Person>[]) {
+                const group = (nodes: (DataSetRowNode<keyof Person, Person> & { _key: string })[]): DataSetNode<keyof Person, Person>[] => nodes.every(n => n._key.includes('.') === false)
+                    ? nodes
+                    : Object.entries(Object.groupBy(nodes, r => String(r._key).split('.').at(0)!))
+                        .map<DataSetGroupNode<keyof Person, Person>>(([key, nodes]) => ({ kind: 'group', key, groupedBy: 'id', nodes: group(nodes!.map(n => ({ ...n, _key: n._key.slice(key.length + 1) }))) }));
+
+                return group(rows.map(row => ({ ...row, _key: row.value.id })));
+            },
+        },
+        {
+            id: 'name',
+            label: 'Name',
+            sortable: true,
+        },
+        {
+            id: 'email',
+            label: 'Email',
+            sortable: true,
+        },
+        {
+            id: 'address',
+            label: 'Address',
+            sortable: true,
+        },
+        {
+            id: 'currency',
+            label: 'Currency',
+            sortable: true,
+        },
+        {
+            id: 'phone',
+            label: 'Phone',
+            sortable: true,
+        },
+        {
+            id: 'country',
+            label: 'Country',
+            sortable: true,
+        },
+    ];
+
+    const [store, setStore] = createStore<{ selectionMode: SelectionMode, grouping?: GroupOptions<Person>, sorting?: SortOptions<Person> }>({
+        selectionMode: SelectionMode.None,
+        grouping: { by: 'country' },
+        sorting: { by: 'country', reversed: false },
+    });
+
+    const rows = createMemo(() => createDataSet(() => people, {
+        group: { by: 'country' },
+        sort: { by: 'country', reversed: false },
+    }));
+
+    createEffect(() => {
+        rows().group(store.grouping);
+    });
+
+    createEffect(() => {
+        rows().sort(store.sorting);
+    });
+
+    createEffect(() => {
+        setStore('sorting', rows().sorting);
+    });
+
+    createEffect(() => {
+        setStore('grouping', rows().grouping);
+    });
+
+    return <div class={css.root}>
+        <Sidebar as="aside" label={'Filters'} class={css.sidebar}>
+            <fieldset>
+                <legend>table properties</legend>
+
+                <label>
+                    Selection mode
+
+                    <select value={store.selectionMode} oninput={e => setStore('selectionMode', Number.parseInt(e.target.value))}>
+                        <option value={SelectionMode.None}>None</option>
+                        <option value={SelectionMode.Single}>Single</option>
+                        <option value={SelectionMode.Multiple}>Multiple</option>
+                    </select>
+                </label>
+
+                <label>
+                    Group by
+
+                    <select value={store.grouping?.by ?? ''} oninput={e => setStore('grouping', e.target.value ? { by: e.target.value as keyof Person } : undefined)}>
+                        <option value=''>None</option>
+                        <For each={columns}>{
+                            column => <option value={column.id}>{column.label}</option>
+                        }</For>
+                    </select>
+                </label>
+            </fieldset>
+
+            <fieldset>
+                <legend>table sorting</legend>
+
+                <label>
+                    by
+
+                    <select value={store.sorting?.by ?? ''} oninput={e => setStore('sorting', prev => e.target.value ? { by: e.target.value as keyof Person, reversed: prev?.reversed } : undefined)}>
+                        <option value=''>None</option>
+                        <For each={columns}>{
+                            column => <option value={column.id}>{column.label}</option>
+                        }</For>
+                    </select>
+                </label>
+
+                <label>
+                    reversed
+
+                    <input type="checkbox" checked={store.sorting?.reversed ?? false} oninput={e => setStore('sorting', prev => prev !== undefined ? { by: prev.by, reversed: e.target.checked || undefined } : undefined)} />
+                </label>
+            </fieldset>
+        </Sidebar>
+
+        <div class={css.content}>
+            <Table class={css.table} rows={rows()} columns={columns} selectionMode={store.selectionMode} />
+        </div>
+    </div >;
+}

src/routes/(editor)/index.module.css

@@ -1,18 +0,0 @@
-.main {
-    display: grid;
-    place-content: center;
-    gap: var(--padding-m);
-
-    & > :is(.primary, .secondary) {
-        display: grid;
-        grid: 3em / repeat(5, 3em);
-    }
-
-    ul {
-        display: flex;
-        flex-flow: column;
-        gap: var(--padding-s);
-        padding-inline-start: var(--padding-l);
-        margin: 0;
-    }
-}

src/routes/(editor)/index.tsx

@@ -1,22 +1,23 @@
-import { A } from "@solidjs/router";
-import LandingImage from '../../assets/landing.svg'
-import css from "./index.module.css";
-
+import { useNavigate } from "@solidjs/router";
+import { createEffect } from "solid-js";
+import { isServer } from "solid-js/web";
+import { useFiles } from "~/features/file/context";
 
 export default function Index() {
-  return (
-    <main class={css.main}>
-      <LandingImage />
+  const navigate = useNavigate();
+  const files = useFiles();
 
-      <h1>Hi, welcome!</h1>
-      <b>Lets get started</b>
+  createEffect(() => {
+    const root = files.root();
 
-      <ul>
-        <li><A href="/edit">Start editing</A></li>
-        {/* <li><A href="/experimental">Try new features</A></li> */}
-        <li><A href="/instructions">Read the instructions</A></li>
-        <li><A href="/about">About this app</A></li>
-      </ul>
-    </main>
-  );
+    if (isServer) {
+      return;
+    }
+
+    navigate(root !== undefined ? '/edit' : '/welcome');
+  });
+
+  return <section style="display: grid; place-content: center;">
+    <span>Loading, one moment please</span>
+  </section>;
 }

src/routes/(editor)/welcome.module.css

@@ -0,0 +1,34 @@
+.main {
+    display: grid;
+    place-content: center;
+    gap: var(--padding-m);
+
+    & > :is(.primary, .secondary) {
+        display: grid;
+        grid: 3em / repeat(5, 3em);
+    }
+
+    & > h1 {
+        margin-block-end: 0;
+    }
+
+    ul {
+        display: flex;
+        flex-flow: column;
+        gap: var(--padding-s);
+        padding-inline-start: var(--padding-l);
+
+        @media (hover) and (prefers-reduced-motion: no-preference) {
+            & > li {
+                transform-origin: left center;
+                transition: opacity .2s ease-in-out .1s, transform .1s ease-in-out .1s;
+            }
+
+            &:has(> li:hover) > li:not(:hover),
+            &:has(> li:focus-within) > li:not(:focus-within) {
+                opacity: .25;
+                transform: scale(.9);
+            }
+        }
+    }
+}