Merge branch 'main' into feature/swap-to-tricep-for-iac

.dockerignore

@@ -1,17 +0,0 @@
-# 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,27 +27,34 @@ jobs:
       semver: ${{ steps.gitversion.outputs.SemVer }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v5
+        uses: actions/checkout@v4
         with:
           fetch-depth: 0
       - name: Install GitVersion
-        uses: gittools/actions/gitversion/setup@v4.1.0
+        uses: gittools/actions/gitversion/setup@v3.0.3
         with:
-          versionSpec: "6.x"
+          versionSpec: "5.x"
       - name: Determine Version
         id: gitversion
-        uses: gittools/actions/gitversion/execute@v4.1.0
+        uses: gittools/actions/gitversion/execute@v3.0.3
+        with:
+          useConfigFile: true
 
   build_and_publish:
     name: Build & Publish
     runs-on: ubuntu-latest
     needs: versionize
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
+
+      - name: Test bicep
+        uses: Azure/cli@v2
+        with:
+          inlineScript: |
+            az bicep build --file ./infrastructure/main.bicep --stdout
 
       - 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
 
@@ -71,7 +78,7 @@ jobs:
       matrix:
         environment: [ 'prd' ]
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v4
         with:
           sparse-checkout: |
             infrastructure
@@ -84,13 +91,12 @@ jobs:
           subscription-id: ${{ secrets.CALQUE_PRD_SUBSCRIPTION_ID }}
 
       - name: Deploy bicep
-        uses: azure/cli@v2
+        uses: Azure/cli@v2
         with:
-          azcliversion: 2.75.0
+          inlineScript: |
-          inlineScript: >-
+            az deployment sub create \
-            az deployment sub create
+              --location westeurope \
-            --location westeurope
+              --template-file infrastructure/main.bicep \
-            --template-file infrastructure/main.bicep
+              --parameters infrastructure/params/${{ matrix.environment }}.bicepparam \
-            --parameters infrastructure/params/${{ matrix.environment }}.bicepparam
+              --parameters version=${{needs.versionize.outputs.semver}} \
-            --parameters version=${{needs.versionize.outputs.semver}}
               --parameters registryUrl=${{ secrets.ACR_LOGIN_SERVER }}

Dockerfile

@@ -1,35 +1,34 @@
-FROM docker.io/imbios/bun-node:latest-23-alpine AS base
+FROM oven/bun:1 AS base
 WORKDIR /usr/src/app
 
 FROM base AS install
 RUN mkdir -p /temp/dev
-COPY package.json bun.lock /temp/dev
+COPY package.json bun.lockb /temp/dev
-COPY patches/ /temp/dev/patches/
 RUN cd /temp/dev && bun install --frozen-lockfile
 
 RUN mkdir -p /temp/prod
-COPY package.json bun.lock /temp/prod/
+COPY package.json bun.lockb /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 test:ci
+RUN bun run build
-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.lock .
+COPY --from=prerelease /usr/src/app/bun.lockb .
 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", "--bun", "run", "start" ]
+ENTRYPOINT [ "bun", "run", "start" ]

GitVersion.yml

@@ -0,0 +1,20 @@
+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,15 +1,32 @@
-# Calque
+# SolidStart
 
-Domain name ideas:
+Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);
 
-- calque.tools
+## Creating a project
-- calque.cloud
-- calque.studio
 
-Or maybe change the name of the app...
+```bash
+# create a new project in the current directory
+npm init solid@latest
 
-Ideas suggested so far:
+# create a new project in my-app
+npm init solid@latest my-app
+```
 
-- Rosetta
+## Developing
-- g11n
+
-- Glyphs
+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)

app.config.ts

@@ -1,32 +1,72 @@
 import { defineConfig } from '@solidjs/start/config';
-import solidSvg from 'vite-plugin-solid-svg';
+import solidSvg from 'vite-plugin-solid-svg'
-import devtools from 'solid-devtools/vite';
+// import { VitePWA } from 'vite-plugin-pwa'
 
 export default defineConfig({
     vite: {
-        resolve: {
-            alias: [
-                { find: '@', replacement: 'F:\\Github\\calque\\node_modules\\' },
-            ],
-        },
         html: {
             cspNonce: 'KAAS_IS_AWESOME',
         },
-        // css: {
-        //     postcss: {
-        //     },
-        // },
         plugins: [
-            devtools({
+            solidSvg()
-                autoname: true,
+            // VitePWA({
-            }),
+            //     strategies: 'injectManifest',
-            solidSvg(),
+            //     registerType: 'autoUpdate',
-            {
+            //     injectRegister: false,
-                name: 'temp',
+
-                configResolved(config) {
+            //     workbox: {
-                    console.log(config.resolve.alias);
+            //         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',
+            //     },
+            // }),
         ],
     },
     solid: {

bunfig.toml

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

infrastructure/app.bicep

@@ -1,4 +1,15 @@
-import { Context } from 'types.bicep'
+import { Context } from 'br/Tricep:types:latest'
+import { with_name } from 'br/Tricep:common/context:latest'
+import { with_managed_identity } from 'br/Tricep:common/identity:latest'
+import {
+  container_app_environment
+  container_app
+  container
+  with_public_access
+  with_app_logs
+  with_auto_scaling
+  with_environment
+} from 'br/Tricep:recommended/app/container-app:latest'
 
 targetScope = 'resourceGroup'
 
@@ -9,50 +20,26 @@ param registryUrl string
 
 var appName = 'app'
 
-resource environment 'Microsoft.App/managedEnvironments@2025-01-01' = {
+var environmentConfig = container_app_environment(with_name(context, appName), [])
-  name: 'cea-${context.locationAbbreviation}-${context.environment}-${context.projectName}'
+var appConfig = container_app(
-  location: context.location
+  context,
-  properties: {
+  [
-    appLogsConfiguration: {
+    container({
-      destination: 'azure-monitor'
+      name: '${context.project}-${appName}'
+      image: '${registryUrl}/${context.project}-${appName}:${version}'
+    })
+  ],
+  [
+    with_managed_identity()
+    with_environment(environment.id)
+    with_auto_scaling(0, 1, {
+      ruleName: {
+        concurrentRequests: '10'
       }
-    peerAuthentication: {
+    })
-      mtls: {
+    with_public_access({
-        enabled: false
+      port: 3000
-      }
+      cors: {
-    }
-    peerTrafficConfiguration: {
-      encryption: {
-        enabled: false
-      }
-    }
-  }
-}
-
-resource app 'Microsoft.App/containerApps@2025-01-01' = {
-  name: 'ca-${context.locationAbbreviation}-${context.environment}-${context.projectName}-app'
-  location: context.location
-  identity: {
-    type: 'SystemAssigned'
-  }
-  properties: {
-    environmentId: environment.id
-
-    configuration: {
-      activeRevisionsMode: 'Single'
-
-      ingress: {
-        external: true
-        targetPort: 3000
-        transport: 'auto'
-        allowInsecure: false
-        traffic: [
-          {
-            weight: 100
-            latestRevision: true
-          }
-        ]
-        corsPolicy: {
         allowedOrigins: [
           // 'https://localhost:3000'
           '*'
@@ -62,7 +49,10 @@ resource app 'Microsoft.App/containerApps@2025-01-01' = {
         allowedMethods: ['Get, POST']
         maxAge: 0
       }
-      }
+    })
+    {
+      properties: {
+        configuration: {
           registries: [
             {
               identity: 'system'
@@ -70,32 +60,22 @@ resource app 'Microsoft.App/containerApps@2025-01-01' = {
             }
           ]
         }
+      }
+    }
+  ]
+)
 
-    template: {
+resource environment 'Microsoft.App/managedEnvironments@2024-03-01' = {
-      containers: [
+  name: environmentConfig.name
-        {
+  location: environmentConfig.location
-          image: '${registryUrl}/${context.projectName}-${appName}:${version}'
+  tags: environmentConfig.tags
-          name: '${context.projectName}-${appName}'
+  properties: environmentConfig.properties
-          resources: {
+}
-            cpu: json('0.25')
+
-            memory: '0.5Gi'
+resource app 'Microsoft.App/containerApps@2024-03-01' = {
-          }
+  name: appConfig.name
-        }
+  location: appConfig.location
-      ]
+  tags: appConfig.tags
-      scale: {
+  identity: appConfig.identity
-        minReplicas: 1
+  properties: appConfig.properties
-        maxReplicas: 2
-        rules: [
-          {
-            name: 'http-rule'
-            http: {
-              metadata: {
-                concurrentRequests: '50'
-              }
-            }
-          }
-        ]
-      }
-    }
-  }
 }

infrastructure/bicepconfig.json

@@ -1,11 +1,18 @@
 {
     "experimentalFeaturesEnabled": {
-        "assertions": true,
+        "resourceTypedParamsAndOutputs": true
-        "testFramework": true,
+    },
-        "extensibility": true,
+    "moduleAliases": {
-        "resourceDerivedTypes": true,
+        "br": {
-        "resourceTypedParamsAndOutputs": true,
+            "Tricep": {
-        "sourceMapping": true,
+                "registry": "acreuwprdtricep.azurecr.io"
-        "symbolicNameCodegen": true
+            }
+        }
+    },
+    "cloud": {
+        "currentProfile": "AzureCloud",
+        "credentialPrecedence": [
+            "AzureCLI"
+        ]
     }
 }

infrastructure/main.bicep

@@ -1,8 +1,8 @@
-import { Context } from 'types.bicep'
+import { create_context } from 'br/Tricep:common/context:latest'
+import { resource_group } from 'br/Tricep:recommended/resources/resource-group:latest'
 
 targetScope = 'subscription'
 
-param locationAbbreviation string
 param location string
 param environment string
 param projectName string
@@ -11,17 +11,21 @@ param version string
 param registryUrl string
 param deployedAt string = utcNow('yyyyMMdd')
 
-var context = {
+var context = create_context({
-  locationAbbreviation: locationAbbreviation
+  project: projectName
+  nameConventionTemplate: '$type-$environment-$location-$project'
   location: location
   environment: environment
-  projectName: projectName
   deployedAt: deployedAt
-}
+  tenant: tenant()
+  tags: {}
+})
 
-resource calqueResourceGroup 'Microsoft.Resources/resourceGroups@2025-04-01' = {
+var resourceGroupConfig = resource_group(context, [])
-  name: 'rg-${locationAbbreviation}-${environment}-${projectName}'
+
-  location: location
+resource calqueResourceGroup 'Microsoft.Resources/resourceGroups@2024-07-01' = {
+  name: resourceGroupConfig.name
+  location: resourceGroupConfig.location
 }
 
 module monitoring 'monitoring.bicep' = {

infrastructure/monitoring.bicep

@@ -1,11 +1,18 @@
-import { Context } from 'types.bicep'
+import { Context } from 'br/Tricep:types:latest'
+import { with_managed_identity } from 'br/Tricep:common/identity:latest'
+import { log_analytics } from 'br/Tricep:recommended/operational-insights/log-analytics:latest'
 
 targetScope = 'resourceGroup'
 
 param context Context
 
-// resource monitoring 'Microsoft.___/___@___' = {
+var logAnalyticsConfig = log_analytics(context, [
-//   name: '___-${context.locationAbbreviation}-${context.environment}-${context.projectName}'
+  with_managed_identity()
-//   location: context.location
+])
-//   properties: {}
+
-// }
+resource monitoring 'Microsoft.OperationalInsights/workspaces@2023-09-01' = {
+  name: logAnalyticsConfig.name
+  location: logAnalyticsConfig.location
+  tags: logAnalyticsConfig.tags
+  properties: logAnalyticsConfig.properties
+}

infrastructure/params/prd.bicepparam

@@ -1,6 +1,5 @@
 using '../main.bicep'
 
-param locationAbbreviation = 'euw'
 param location = 'westeurope'
 param environment = 'prd'
 param projectName = 'calque'

infrastructure/registry.bicep

@@ -1,18 +1,14 @@
-import { Context } from 'types.bicep'
+import { Context } from 'br/Tricep:types:latest'
+import { with_managed_identity } from 'br/Tricep:common/identity:latest'
+import { container_registry } from 'br/Tricep:recommended/container-registry/container-registry:latest'
 
 targetScope = 'resourceGroup'
 
 param context Context
 
-resource registry 'Microsoft.ContainerRegistry/registries@2025-04-01' = {
+var registryConfig = container_registry(context, [
-  name: 'acr${context.locationAbbreviation}${context.environment}${context.projectName}'
+  with_managed_identity()
-  location: context.location
+  {
-  sku: {
-    name: 'Basic'
-  }
-  identity: {
-    type: 'SystemAssigned'
-  }
     properties: {
       adminUserEnabled: true
       dataEndpointEnabled: false
@@ -20,4 +16,14 @@ resource registry 'Microsoft.ContainerRegistry/registries@2025-04-01' = {
         status: 'disabled'
       }
     }
+  }
+])
+
+resource registry 'Microsoft.ContainerRegistry/registries@2023-07-01' = {
+  name: registryConfig.name
+  location: registryConfig.location
+  tags: registryConfig.tags
+  sku: registryConfig.sku
+  identity: registryConfig.identity
+  properties: registryConfig.properties
 }

infrastructure/repro.bicep

@@ -0,0 +1,12 @@
+import {
+  container
+  resources_xxs
+} from 'br/Tricep:recommended/app/container-app:latest'
+
+targetScope = 'resourceGroup'
+
+var container1 = container({
+  name: 'name'
+  image: 'registry/project-app:latest'
+  resources: resources_xxs
+})

infrastructure/types.bicep

@@ -1,12 +0,0 @@
-@export()
-type Context = {
-  @minLength(2)
-  locationAbbreviation: string
-  @minLength(2)
-  location: string
-  @minLength(3)
-  environment: string
-  @minLength(2)
-  projectName: string
-  deployedAt: string
-}

package.json

@@ -1,66 +1,39 @@
 {
   "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.3",
+    "@solidjs/router": "^0.15.1",
-    "@solidjs/start": "^1.1.7",
+    "@solidjs/start": "^1.0.10",
-    "dexie": "^4.0.11",
+    "dexie": "^4.0.10",
-    "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.7",
+    "solid-js": "^1.9.3",
-    "ts-pattern": "^5.7.1",
+    "ts-pattern": "^5.5.0",
-    "unified": "^11.0.5",
+    "vinxi": "^0.4.3"
-    "unist-util-find": "^3.0.0",
-    "unist-util-visit": "^5.0.0",
-    "vinxi": "^0.5.8"
   },
-  "devDependencies": {
+  "engines": {
-    "@happy-dom/global-registrator": "^18.0.1",
+    "node": ">=18"
-    "@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"
   },
-  "patchedDependencies": {
+  "type": "module",
-    "@tanstack/directive-functions-plugin@1.119.2": "patches/@tanstack%2Fdirective-functions-plugin@1.119.2.patch"
+  "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"
   }
 }

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

@@ -1,14 +0,0 @@
-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) .35 c h);
+  --primary-100: oklch(from var(--primary-500) .95 c h);
-  --primary-300: oklch(from var(--primary-500) .6 c h);
+  --primary-300: oklch(from var(--primary-500) .9 c h);
-  --primary-500: light-dark(oklch(.7 0.117 var(--hue)), oklch(.7 0.1149 var(--hue)));
+  --primary-500: light-dark(oklch(.7503 0.117 var(--hue)), oklch(.8549 0.1149 var(--hue)));
-  --primary-600: oklch(from var(--primary-500) .85 c h);
+  --primary-600: oklch(from var(--primary-500) .7 c h);
-  --primary-700: oklch(from var(--primary-500) .9 c h);
+  --primary-700: oklch(from var(--primary-500) .6 c h);
-  --primary-900: oklch(from var(--primary-500) .95 calc(c + .15) h);
+  --primary-900: oklch(from var(--primary-500) .35 calc(c + .15) h);
 
-  --secondary-100: oklch(from var(--primary-500) .35 c calc(h + var(--accent-ofset)));
+  --secondary-100: oklch(from var(--primary-500) .95 c calc(h + var(--accent-ofset)));
-  --secondary-300: oklch(from var(--primary-500) .6 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) .7 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) .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) .9 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) .95 calc(c + .15) calc(h + var(--accent-ofset)));
+  --secondary-900: oklch(from var(--primary-500) .35 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,33 +22,25 @@
   --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));
 
-  --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;
+  --text-s: .8rem;
+  --text-m: 1rem;
+  --text-l: 1.25rem;
+  --text-xl: 1.6rem;
+  --text-xxl: 2rem;
+
   --padding-s: .25em;
   --padding-m: .5em;
   --padding-l: .75em;
@@ -152,65 +144,6 @@ 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,9 +2,8 @@ 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 (
@@ -12,11 +11,9 @@ export default function App() {
       root={props => (
         <MetaProvider>
           <ThemeProvider>
-            <I18nProvider>
             <Suspense>{props.children}</Suspense>
-            </I18nProvider>
           </ThemeProvider>
-        </ MetaProvider>
+        </MetaProvider>
       )}
     >
       <FileRoutes />

src/components/colorschemepicker.module.css

@@ -0,0 +1,29 @@
+.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

@@ -0,0 +1,15 @@
+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/colorschemepicker.tsx

@@ -1,8 +1,9 @@
+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 { createContext, createEffect, createResource, ParentComponent, Show, Suspense, useContext } from "solid-js";
-import { createStore } from "solid-js/store";
 import { useSession } from "vinxi/http";
-
+import { createStore } from "solid-js/store";
 
 export enum ColorScheme {
     Auto = 'light dark',
@@ -10,6 +11,8 @@ export enum ColorScheme {
     Dark = 'dark',
 }
 
+const colorSchemes = Object.entries(ColorScheme) as readonly [keyof typeof ColorScheme, ColorScheme][];
+
 export interface State {
     colorScheme: ColorScheme;
     hue: number;
@@ -46,7 +49,7 @@ interface ThemeContextType {
 
 const ThemeContext = createContext<ThemeContextType>();
 
-export const useStore = () => useContext(ThemeContext)!;
+const useStore = () => useContext(ThemeContext)!;
 
 export const useTheme = () => {
     const ctx = useContext(ThemeContext);
@@ -80,3 +83,29 @@ export const ThemeProvider: ParentComponent = (props) => {
         }}</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/components/dropdown/index.module.css

@@ -1,95 +0,0 @@
-.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

@@ -1,52 +0,0 @@
-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

@@ -1,16 +0,0 @@
-.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

@@ -1,16 +0,0 @@
-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

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

src/components/filetree.tsx

@@ -0,0 +1,101 @@
+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

@@ -1,125 +0,0 @@
-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

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

src/components/select/index.module.css

@@ -1,95 +0,0 @@
-.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

@@ -1,67 +0,0 @@
-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

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

src/components/table/table.module.css

@@ -1,236 +0,0 @@
-@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

@@ -1,44 +0,0 @@
-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

@@ -1,273 +0,0 @@
-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,16 +58,47 @@
                 color: var(--text-1);
             }
         }
-
-        &:empty {
-            display: none;
-        }
     }
 
     .tab {
-        display: contents;
+        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);
-        color: var(--text-1);
+            }
+
+            &::details-content {
+                display: grid;
+            }
+        }
     }
 }
 

src/components/tabs.tsx

@@ -1,13 +1,12 @@
-import { Accessor, children, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Setter, Show, useContext } from "solid-js";
+import { Accessor, children, createContext, createEffect, createMemo, createSignal, For, JSX, onCleanup, 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<CloseTabCommandType | undefined>
+    readonly onClose: Accessor<CommandType<[string]> | undefined>
 }
 
 const TabsContext = createContext<TabsContextType>();
@@ -22,11 +21,11 @@ const useTabs = () => {
     return context!;
 }
 
-export const Tabs: ParentComponent<{ class?: string, active?: string, setActive?: Setter<string | undefined>, onClose?: CloseTabCommandType }> = (props) => {
+export const Tabs: ParentComponent<{ class?: string, active?: Setter<string | undefined>, onClose?: CommandType<[string]> }> = (props) => {
-    const [active, setActive] = createSignal<string | undefined>(props.active);
+    const [active, setActive] = createSignal<string | undefined>(undefined);
 
     createEffect(() => {
-        props.setActive?.(active());
+        props.active?.(active());
     });
 
     const ctx = {
@@ -46,13 +45,17 @@ export const Tabs: ParentComponent<{ class?: string, active?: string, setActive?
     </TabsContext.Provider >;
 }
 
-const _Tabs: ParentComponent<{ class?: string, active: string | undefined, onClose?: CloseTabCommandType }> = (props) => {
+const _Tabs: ParentComponent<{ class?: string, active: string | undefined, onClose?: CommandType<[string]> }> = (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;
@@ -64,7 +67,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) {
@@ -92,12 +95,19 @@ 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

@@ -1,10 +0,0 @@
-
-
-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

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

src/components/textarea/spellChecker.ts

@@ -1,10 +0,0 @@
-
-
-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

@@ -1,61 +0,0 @@
-.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

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

src/features/command/command.ts

@@ -1,51 +0,0 @@
-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

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

src/features/command/index.tsx

@@ -1,7 +1,176 @@
-export type { CommandType } from './command';
+import { Accessor, children, Component, createContext, createEffect, createMemo, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
-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 { createCommand, noop, Modifier } from './command';
-export { useCommands, Command } from './context';
 export { Context } from './contextMenu';
-export { CommandPalette } from './palette';

src/features/command/palette.module.css

@@ -1,43 +0,0 @@
-.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

@@ -1,191 +0,0 @@
-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

@@ -1,170 +0,0 @@
-// 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

@@ -1,216 +0,0 @@
-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

@@ -1,165 +0,0 @@
-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,14 +1,128 @@
-.textarea {
+.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;
+
+    background-color: var(--surface-600);
+
+    & input[type="checkbox"] {
+        margin: .1em;
+    }
+
+    & textarea {
+        resize: vertical;
+        min-block-size: max(2em, 100%);
+        max-block-size: 50em;
+
         background-color: var(--surface-600);
         color: var(--text-1);
-    border: 1px solid var(--text-2);
+        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);
-    padding: var(--padding-s);
 
-    overflow: auto !important;
+        &:has(textarea:focus) {
-    max-inline-size: 30em;
+            border-color: var(--info);
+        }
 
-    & * {
+        & > span {
-        white-space: nowrap;
+            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,111 +1,263 @@
-import { Accessor, Component, createEffect, createMemo, createSignal, For, JSX, Show, untrack } from "solid-js";
+import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
-import { decode, Mutation } from "~/utilities";
+import { createStore, produce, unwrap } from "solid-js/store";
-import { Column, GridApi as GridCompApi, Grid as GridComp } from "~/components/grid";
+import { SelectionProvider, useSelection, selectable } from "../selectable";
-import { createDataSet, DataSetNode, DataSetRowNode } from "~/features/dataset";
+import { debounce, deepCopy, deepDiff, Mutation } from "~/utilities";
-import { SelectionItem } from "../selectable";
+import css from './grid.module.css';
-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 };
+selectable // prevents removal of import
-export interface GridApi {
+
+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<number, Entry>[]>;
+    readonly selection: Accessor<SelectionItem[]>;
-    remove(indices: number[]): void;
+    mutate(prop: string, lang: string, value: string): void;
-    addKey(key: string): void;
+    remove(props: string[]): void;
-    addLocale(locale: string): void;
+    insert(prop: string): void;
-    selectAll(): 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;
 }
 
-export function Grid(props: { class?: string, rows: Entry[], locales: string[], api?: (api: GridApi) => any, children?: (key: string) => JSX.Element }) {
+export interface GridApi {
-    const { t } = useI18n();
+    readonly selection: Accessor<Record<string, Record<string, string>>>;
+    readonly rows: Accessor<Record<string, Record<string, string>>>;
+    readonly mutations: Accessor<Mutation[]>;
+    selectAll(): void;
+    clear(): void;
+    remove(keys: string[]): void;
+    insert(prop: string): void;
+}
 
-    const [addedLocales, setAddedLocales] = createSignal<string[]>([]);
+const GridContext = createContext<GridContextType>();
-    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]!;
 
-                return <Textarea
+const isLeaf = (entry: Entry | Leaf): entry is Leaf => Object.values(entry).some(v => typeof v === 'string');
-                    class={css.textarea}
+const useGrid = () => useContext(GridContext)!;
-                    value={value ?? ''}
-                    lang={lang}
-                    oninput={next => mutate(next)}
-                    placeholder={`${key} in ${lang}`}
-                />
-            },
-        }))
-    ]);
 
-    const [api, setApi] = createSignal<GridCompApi<Entry>>();
+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,
+    });
 
-    // Normalize dataset in order to make sure all the files have the correct structure
+    const mutations = createMemo(() => {
-    // createEffect(() => {
+        // enumerate all values to make sure the memo is recalculated on any change
-    //     // For tracking
+        Object.values(state.rows).map(entry => Object.values(entry));
-    //     props.rows;
 
-    //     rows.mutateEach(({ key, ...locales }) => ({ key, ...Object.fromEntries(Object.entries(locales).map(([locale, value]) => [locale, value ?? ''])) }))
+        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(() => {
-    //     const l = addedLocales();
-
-    //     rows.mutateEach(({ key, ...rest }) => ({ key, ...rest, ...Object.fromEntries(l.map(locale => [locale, rest[locale] ?? ''])) }));
-    // });
 
     createEffect(() => {
-        props.api?.({
+        setState('rows', Object.fromEntries(deepCopy(props.rows).entries()));
-            mutations: rows.mutations,
+        setState('snapshot', props.rows);
-            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} />;
+    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);
+        },
+
+        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 TextArea: Component<{ row: number, key: string, lang: string, value: string, oninput?: (next: string) => any }> = (props) => {
+const _Grid: Component<{ class?: string, columns: string[], rows: Record<string, Record<string, string>> }> = (props) => {
-    return <Textarea
+    const columnCount = createMemo(() => props.columns.length - 1);
-        class={css.textarea}
+    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(),
+        }))
+    }, 300);
+
+    const onKeyUp = (e: KeyboardEvent) => {
+        resize();
+        mutate();
+    };
+
+    return <textarea
+        ref={setElement}
         value={props.value}
         lang={props.lang}
-        oninput={props.oninput}
+        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()}
     />
 };

src/features/file/helpers.ts

@@ -1,290 +0,0 @@
-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,7 +1,169 @@
+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

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

src/features/file/parser/json.ts

@@ -1,20 +1,199 @@
-import { decode } from "~/utilities";
 
-export async function load(text: Promise<string>): Promise<Map<string, string>> {
+export async function load(stream: ReadableStream<Uint8Array>): Promise<Map<string, string>> {
-    const source = JSON.parse(await text);
+    return new Map(await Array.fromAsync(parse(stream), ({ key, value }) => [key, value]));
-    const result = new Map();
+}
-    const candidates = Object.entries(source);
+
-
+interface Entry {
-    while (candidates.length !== 0) {
+    key: string;
-        const [ key, value ] = candidates.shift()!;
+    value: string;
-
+}
-        if (typeof value !== 'object' || value === null || value === undefined) {
+
-            result.set(key, decode(value as string));
+interface State {
-        }
+    (token: Token): State;
-        else {
+    entry?: Entry
-            candidates.unshift(...Object.entries(value).map<[string, any]>(([ k, v ]) => [`${key}.${k}`, v]));
+}
-        }
+
-    }
+const states = {
-
+    none(): State {
-    return result;
+        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();
+        }
+    },
+    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;
+        }
+    }
+}
+
+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();
+    }
 }

src/features/file/tree.tsx

@@ -1,169 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,61 +0,0 @@
-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

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

src/features/i18n/picker.module.css

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

src/features/i18n/picker.tsx

@@ -1,23 +0,0 @@
-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,15 +1,10 @@
 .root {
-    display: grid;
-    grid-auto-flow: column;
-    margin: 0;
-    padding: 0;
-
     & > div {
         display: contents;
     }
 }
 
-:is(.item, .child > button) {
+.item {
     padding: var(--padding-m) var(--padding-l);
 
     background-color: inherit;
@@ -24,12 +19,26 @@
     }
 }
 
-.child > dialog {
+.child {
+    position: fixed;
+    inset-inline-start: anchor(self-start);
+    inset-block-start: anchor(end);
+
     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;
@@ -49,5 +58,58 @@
         &: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,9 +1,8 @@
-import { Accessor, Component, For, JSX, Match, ParentComponent, Setter, Show, Switch, children, createContext, createEffect, createMemo, createSignal, mergeProps, useContext } from "solid-js";
+import { Accessor, Component, For, JSX, Match, ParentComponent, Setter, Show, Switch, children, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, 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>;
@@ -76,9 +75,9 @@ const useMenu = () => {
     return context;
 }
 
-type ItemProps<T extends (...args: any[]) => any> = { label: string, children: JSX.Element, command?: undefined } | { command: CommandType<T> };
+type ItemProps = { label: string, children: JSX.Element } | { command: CommandType };
 
-function Item<T extends (...args: any[]) => any>(props: ItemProps<T>) {
+const Item: Component<ItemProps> = (props) => {
     const id = createUniqueId();
 
     if (props.command) {
@@ -103,39 +102,77 @@ 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);
+    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>
+    };
 
     return <Portal mount={menuContext.ref()}>
         <For each={items}>{
             item => <Switch>
                 <Match when={item.kind === 'node' ? item as ItemWithChildren : undefined}>{
-                    item => {
+                    item => <>
-                        const [dropdown, setDropdown] = createSignal<DropdownApi>();
+                        <div
-
+                            class={css.child}
-                        return <Dropdown api={setDropdown} class={css.child} id={`child-${item().id}`} text={item().label}>
+                            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);
+                                }
+                            }}
+                        >
                             <For each={item().children}>{
                                 child => <Switch>
                                     <Match when={child.kind === 'leaf' ? child as Item : undefined}>{
-                                        item => <button class={css.item} type="button" onpointerdown={e => {
+                                        item => <Child command={item().command} />
-                                            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>
+                                </Switch>
-                        </Dropdown>;
+                            }</For>
-                    }
+                        </div>
+
+                        <button
+                            class={css.item}
+                            type="button"
+                            popovertarget={`child-${item().id}`}
+                            style={`anchor-name: --menu-${item().id};`}
+                        >
+                            {item().label}
+                        </button>
+                    </>
                 }</Match>
 
                 <Match when={item.kind === 'leaf' ? item as Item : undefined}>{
-                    item => <button class={css.item} type="button" onpointerdown={e => commandContext?.execute(item().command, e)}>
+                    item => <Child command={item().command} />
-                        <Command.Handle command={item().command} />
-                    </button>
                 }</Match>
             </Switch>
         }</For>
@@ -145,13 +182,167 @@ const Root: ParentComponent<{}> = (props) => {
 const Mount: Component = (props) => {
     const menu = useMenu();
 
-    return <menu class={css.root} ref={menu.setRef} />;
+    return <div class={css.root} ref={menu.setRef} />;
 };
 
 export const Menu = { Mount, Root, Item, Separator } as const;
 
-let keyCounter = 0;
+export interface CommandPaletteApi {
-const createUniqueId = () => `key-${keyCounter++}`;
+    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>;
+};
 
 declare module "solid-js" {
     namespace JSX {

src/features/selectable/index.module.css

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

src/features/source/index.ts

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

src/features/source/source.spec.ts

@@ -1,49 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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/index.ts

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

src/features/theme/picker.module.css

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

src/features/theme/picker.tsx

@@ -1,41 +0,0 @@
-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

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

src/i18n/en-GB.json

@@ -1,54 +0,0 @@
-{
-    "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

@@ -1,54 +0,0 @@
-{
-    "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,16 +1,13 @@
 import { Link, Meta, Title } from "@solidjs/meta";
-import { Component, createMemo, createSignal, ErrorBoundary, ParentProps, Show } from "solid-js";
+import { Component, createMemo, createSignal, createUniqueId, ErrorBoundary, ParentProps, Show } from "solid-js";
 import { FilesProvider } from "~/features/file";
-import { Menu, MenuProvider } from "~/features/menu";
+import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
 import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router";
-import { CommandPalette, CommandPaletteApi, createCommand, Modifier } from "~/features/command";
+import { createCommand, Modifier } from "~/features/command";
+import { ColorScheme, ColorSchemePicker, getState, useTheme } from "~/components/colorschemepicker";
 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();
@@ -26,11 +23,14 @@ export default function Editor(props: ParentProps) {
     const themeMenuId = createUniqueId();
 
     const [commandPalette, setCommandPalette] = createSignal<CommandPaletteApi>();
-    const colorScheme = createMemo(() => (theme.colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme.colorScheme) ?? 'light dark');
+    const lightness = createMemo(() => {
-    const lightness = createMemo(() => colorScheme() === ColorScheme.Light ? .9 : .2);
+        const scheme = theme.colorScheme === ColorScheme.Auto ? event?.request.headers.get('Sec-CH-Prefers-Color-Scheme') : theme.colorScheme;
+
+        return scheme === ColorScheme.Light ? .9 : .2;
+    });
 
     const commands = [
-        createCommand('shell.command.openCommandPalette', () => {
+        createCommand('open command palette', () => {
             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={colorScheme()} />
+        <Meta name="color-scheme" content={theme.colorScheme} />
-        <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme.hue ?? 0})`} />
+        <Meta name="theme-color" content={`oklch(${lightness()} .02 ${theme.hue})`} />
 
         <style>{`
             :root {
-                --hue: ${theme.hue ?? 0}deg !important;
+                --hue: ${theme.hue}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="/welcome">
+                <A class={css.logo} href="/">
                     <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,11 +79,15 @@ export default function Editor(props: ParentProps) {
                 <Menu.Mount />
 
                 <section class={css.right}>
-                    <LocalePicker />
+                    <div class={css.themeMenu}>
+                        <button class={css.themeMenuButton} id={`${themeMenuId}-button`} popoverTarget={`${themeMenuId}-dialog`} title="Open theme picker menu">
+                            <FaSolidPalette />
+                        </button>
 
-                    <Dropdown id={themeMenuId} class={css.themeMenu} text={<FaSolidPalette />}>
+                        <dialog class={css.themeMenuDialog} id={`${themeMenuId}-dialog`} popover anchor={`${themeMenuId}-button`}>
                             <ColorSchemePicker />
-                    </Dropdown>
+                        </dialog>
+                    </div>
                 </section>
             </nav>
 
@@ -100,5 +104,14 @@ export default function Editor(props: ParentProps) {
     </MenuProvider>
 }
 
-let keyCounter = 0;
+const ErrorComp: Component<{ error: Error }> = (props) => {
-const createUniqueId = () => `key-${keyCounter++}`;
+    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>;
+};

src/routes/(editor)/edit.tsx

@@ -1,24 +1,44 @@
-import { Component, createEffect, createMemo, createResource, createSignal, For, onMount, ParentProps, Setter, Show } from "solid-js";
+import { Component, createEffect, createMemo, createSignal, For, onMount, ParentProps, Setter, Show } from "solid-js";
-import { Created, MutarionKind, Mutation, splitAt } from "~/utilities";
+import { filter, 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, read, readFiles, TreeProvider, Tree, useFiles } from "~/features/file";
+import { Grid, load, useFiles } from "~/features/file";
-import { Command, CommandType, Context, createCommand, Modifier } from "~/features/command";
+import { Command, CommandType, Context, createCommand, Modifier, noop, useCommands } from "~/features/command";
-import { Entry, GridApi } from "~/features/file/grid";
+import { 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;
 
-interface Entries extends Map<string, { key: string, } & Record<string, { value: string, handle: FileSystemFileHandle, id: string }>> { };
+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 }>> { }
 
 export default function Edit(props: ParentProps) {
     const filesContext = useFiles();
@@ -36,33 +56,42 @@ export default function Edit(props: ParentProps) {
         }
     });
 
-    const open = createCommand('page.edit.command.open', async () => {
+    const open = createCommand('open folder', async () => {
         const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
 
         filesContext.open(directory);
     }, { key: 'o', modifier: Modifier.Control });
 
-    return <Show when={filesContext.root()} fallback={<Blank open={open} />}>{
+    return <Context.Root commands={[open]}>
+        <Show when={filesContext.root()} fallback={<Blank open={open} />}>{
             root => <Editor root={root()} />
-    }</Show>;
+        }</Show>
+    </Context.Root>;
 }
 
 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 = readFiles(() => handle);
+        const [files, setFiles] = createSignal<Map<string, { id: string, handle: FileSystemFileHandle }>>(new Map());
-        const files = createMemo(() => new Map(Object.entries(__files()).map(([id, { file, handle }]) => [file.name.split('.').at(0)!, { handle, id }])));
+
+        (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));
+        })();
 
         return ({ key, handle, api, setApi, entries, setEntries, files });
     }));
-    const [active, setActive] = makePersisted(createSignal<string>(), { name: 'edit__aciveTab' });
+    const [active, setActive] = createSignal<string>();
-    const [newKeyPrompt, setNewKeyPrompt] = createSignal<PromptApi>();
+    const [contents, setContents] = createSignal<Map<string, Map<string, string>>>(new Map());
-    const [newLanguagePrompt, setNewLanguagePrompt] = createSignal<PromptApi>();
+    const [tree, setFiles] = createSignal<FolderEntry>(emptyFolder);
-    const contents = contentsOf(() => props.root);
+    const [prompt, setPrompt] = createSignal<PromptApi>();
 
     const tab = createMemo(() => {
         const name = active();
@@ -70,34 +99,25 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
         return tabs().find(t => t.handle.name === name);
     });
     const api = createMemo(() => tab()?.api());
-    const mutations = createMemo<(Mutation & { lang: string, file?: { value: string, handle: FileSystemFileHandle, id: string } })[]>(() => tabs().flatMap(tab => {
+    const mutations = createMemo<(Mutation & { 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): any => {
+        return mutations.flatMap(m => {
-            const [index, lang] = splitAt(m.key, m.key.indexOf('.'));
-            const file = files.get(lang);
-
             switch (m.kind) {
                 case MutarionKind.Update: {
-                    const entry = entries.get(index as any)!;
+                    const [key, lang] = splitAt(m.key, m.key.lastIndexOf('.'));
-                    return { kind: MutarionKind.Update, key: entry.key, lang, file, value: m.value };
+
+                    return { kind: MutarionKind.Update, key, file: entries.get(key)?.[lang] };
                 }
 
                 case MutarionKind.Create: {
-                    if (typeof m.value === 'object') {
+                    return Object.entries(m.value).map(([lang, value]) => ({ kind: MutarionKind.Create, key: m.key, file: files.get(lang)!, value }));
-                        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: {
-                    const entry = entries.get(index as any)!;
+                    return files.values().map(file => ({ kind: MutarionKind.Delete, key: m.key, file })).toArray();
-                    return files.values().map(file => ({ kind: MutarionKind.Delete, key: entry.key, file })).toArray();
                 }
 
                 default: throw new Error('unreachable code');
@@ -117,35 +137,8 @@ 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('.');
 
-                if (i !== -1) {
+        return entries.map(({ id, handle }) => {
-                    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]!;
 
@@ -165,7 +158,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
             }
 
             return [
-                { existing: true, handle },
+                handle,
                 existing.entries().reduce((aggregate, [key, value]) => {
                     let obj = aggregate;
                     const i = key.lastIndexOf('.');
@@ -190,28 +183,32 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
                     return aggregate;
                 }, {} as Record<string, any>)
             ] as const;
-        }).toArray() as (readonly [({ existing: true, handle: FileSystemFileHandle } | { existing: false, name: string }), Record<string, any>])[];
+        }).toArray();
+    });
 
-        return existingFiles.concat(newFiles);
+    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)) });
+        })();
     });
 
     const commands = {
-        open: createCommand('page.edit.command.open', async () => {
+        open: createCommand('open folder', async () => {
             const directory = await window.showDirectoryPicker({ mode: 'readwrite' });
 
             await filesContext.open(directory);
         }, { key: 'o', modifier: Modifier.Control }),
-        close: createCommand('page.edit.command.close', async () => {
+        close: createCommand('close folder', async () => {
-            await filesContext.close();
+            filesContext.remove('__root__');
         }),
-        closeTab: createCommand('page.edit.command.closeTab', async (id: string) => {
+        closeTab: createCommand('close tab', async (id: string) => {
             filesContext.remove(id);
         }, { key: 'w', modifier: Modifier.Control | (isInstalledPWA ? Modifier.None : Modifier.Alt) }),
-        save: createCommand('page.edit.command.save', async () => {
+        save: createCommand('save', async () => {
-            await Promise.allSettled(mutatedData().map(async ([file, data]) => {
+            await Promise.allSettled(mutatedData().map(async ([handle, 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));
@@ -219,7 +216,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
                 stream.close();
             }));
         }, { key: 's', modifier: Modifier.Control }),
-        saveAs: createCommand('page.edit.command.saveAs', (handle?: FileSystemFileHandle) => {
+        saveAs: createCommand('save as', (handle?: FileSystemFileHandle) => {
             console.log('save as ...', handle);
 
             window.showSaveFilePicker({
@@ -233,85 +230,75 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
             });
 
         }, { key: 's', modifier: Modifier.Control | Modifier.Shift }),
-        selectAll: createCommand('page.edit.command.selectAll', () => {
+        selectAll: createCommand('select all', () => {
             api()?.selectAll();
         }, { key: 'a', modifier: Modifier.Control }),
-        clearSelection: createCommand('page.edit.command.clearSelection', () => {
+        clearSelection: createCommand('clear selection', () => {
-            api()?.clearSelection();
+            api()?.clear();
         }),
-        delete: createCommand('page.edit.command.delete', () => {
+        delete: createCommand('delete selected items', () => {
             const { selection, remove } = api() ?? {};
 
             if (!selection || !remove) {
                 return;
             }
 
-            remove(selection().map(s => s.key));
+            remove(Object.keys(selection()));
         }, { key: 'delete', modifier: Modifier.None }),
-        insertKey: createCommand('page.edit.command.insertKey', async () => {
+        inserNewKey: createCommand('insert new key', async () => {
-            const formData = await newKeyPrompt()?.showModal();
+            const formData = await prompt()?.showModal();
             const key = formData?.get('key')?.toString();
 
             if (!key) {
                 return;
             }
 
-            api()?.addKey(key);
+            api()?.insert(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={t('page.edit.menu.file')}>
+            <Menu.Item label="file">
                 <Menu.Item command={commands.open} />
 
-                <Menu.Item command={commands.close} />
+                <Menu.Item command={commands.save} />
 
                 <Menu.Separator />
 
-                <Menu.Item command={commands.save} />
+                <Menu.Item command={commands.close} />
             </Menu.Item>
 
-            <Menu.Item label={t('page.edit.menu.edit')}>
+            <Menu.Item label="edit">
-                <Menu.Item command={commands.insertKey} />
+                <Menu.Item command={commands.inserNewKey} />
 
-                <Menu.Item command={commands.insertLanguage} />
+                <Menu.Item command={commands.inserNewLanguage} />
 
                 <Menu.Separator />
 
                 <Menu.Item command={commands.delete} />
             </Menu.Item>
 
-            <Menu.Item label={t('page.edit.menu.selection')}>
+            <Menu.Item label="selection">
                 <Menu.Item command={commands.selectAll} />
 
                 <Menu.Item command={commands.clearSelection} />
             </Menu.Item>
         </Menu.Root>
 
-        <Prompt api={setNewKeyPrompt} title={t('page.edit.prompt.newKey.title')} description={t('page.edit.prompt.newKey.description')}>
+        <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" placeholder={t('page.edit.prompt.newKey.placeholder')} />
+            <input name="key" value="this.is.an.awesome.key" placeholder="name of new key ()" />
         </Prompt>
 
-        <Prompt api={setNewLanguagePrompt} title={t('page.edit.prompt.newLanguage.title')}>
+        <Sidebar as="aside" label={tree().name} class={css.sidebar}>
-            <input name="locale" placeholder={t('page.edit.prompt.newLanguage.placeholder')} />
+            <Tree entries={tree().entries}>{[
-        </Prompt>
-
-        <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);
@@ -320,19 +307,21 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
                 file => {
                     const mutated = createMemo(() => mutatedFiles().values().find(({ id }) => id === file().id) !== undefined);
 
-                        return <span class={`${mutated() ? css.mutated : ''}`} onDblClick={() => {
+                    return <Context.Handle classList={{ [css.mutated]: mutated() }} onDblClick={() => {
                         const folder = file().directory;
                         filesContext?.set(folder.name, folder);
-                            setActive(folder.name);
+                    }}>{file().name}</Context.Handle>;
-                        }}>{file().name}</span>;
                 },
             ] as const}</Tree>
         </Sidebar>
-        </TreeProvider>
 
-        <Tabs class={css.content} active={active()} setActive={setActive} onClose={commands.closeTab}>
+        <Tabs class={css.content} active={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>
@@ -341,16 +330,42 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
 };
 
 const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<GridApi | undefined>, entries?: Setter<Entries> }> = (props) => {
-    const [locales, setLocales] = createSignal<string[]>([]);
+    const [entries, setEntries] = createSignal<Entries>(new Map());
+    const [columns, setColumns] = createSignal<string[]>([]);
+    const [rows, setRows] = createSignal<Map<string, Record<string, string>>>(new Map);
     const [api, setApi] = createSignal<GridApi>();
 
-    const files = readFiles(() => props.directory);
+    createEffect(() => {
-    // const __contents = contentsOf(() => props.directory);
+        props.entries?.(entries());
-    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(() => {
+    createEffect(() => {
-        const template = contents.latest.map(({ lang, handle }) => [lang, { handle, value: null }]);
+        props.api?.(api());
-        const merged = contents.latest.reduce((aggregate, { id, handle, lang, entries }) => {
+    });
+
+    createEffect(() => {
+        const directory = props.directory;
+
+        if (!directory) {
+            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));
@@ -362,45 +377,13 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
                 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();
+            setColumns(['key', ...languages]);
-
+            setEntries(merged);
-        return [
+            setRows(new Map(merged.entries().map(([key, langs]) => [key, Object.fromEntries(Object.entries(langs).map(([lang, { value }]) => [lang, value]))] as const)));
-            new Map(merged.entries().map(([key, langs], i) => [i.toString(), { key, ...langs }])) as Entries,
+        })();
-            rows
-        ] as const;
     });
 
-    createEffect(() => {
+    return <Grid columns={columns()} rows={rows()} api={setApi} />;
-        setLocales(contents.latest.map(({ lang }) => lang));
-    });
-
-    createEffect(() => {
-        props.entries?.(entries());
-    });
-
-    createEffect(() => {
-        const a = api();
-
-        if (!a) {
-            return;
-        }
-
-        props.api?.(a);
-    });
-
-    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

@@ -0,0 +1,27 @@
+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,28 +1,132 @@
-
+import { Component, createEffect, createMemo, createResource, createSignal, For, lazy, onMount, Suspense } from "solid-js";
-import { ErrorBoundary, ParentProps } from "solid-js";
+import { useFiles } from "~/features/file";
 import { Menu } from "~/features/menu";
-import { createCommand } from "~/features/command";
+import { createCommand, Modifier } from "~/features/command";
-import { useNavigate } from "@solidjs/router";
+import { emptyFolder, FolderEntry, Tree, walk } from "~/components/filetree";
-import { ErrorComp } from "~/components/error";
+import { createStore, produce } from "solid-js/store";
+import { Tab, Tabs } from "~/components/tabs";
+import "./experimental.css";
+import { selectable, SelectionProvider } from "~/features/selectable";
 
-export default function Experimental(props: ParentProps) {
+interface ExperimentalState {
-  const navigate = useNavigate();
+  files: File[];
+  numberOfFiles: number;
+}
 
-  const goTo = createCommand('go to', (to: string) => {
+export default function Experimental() {
-    navigate(`/experimental/${to}`);
+  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);
   });
 
-  return <>
+  // Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
+  onMount(() => {
+    refetch();
+  });
+
+  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 command={goTo.withLabel('table').with('table')} />
+        <Menu.Item label="file">
-      <Menu.Item command={goTo.withLabel('grid').with('grid')} />
+          <Menu.Item label="open" command={commands.open} />
-      <Menu.Item command={goTo.withLabel('context-menu').with('context-menu')} />
+
-      <Menu.Item command={goTo.withLabel('formatter').with('formatter')} />
+          <Menu.Item label="open folder" command={commands.openFolder} />
-      <Menu.Item command={goTo.withLabel('file-system-observer').with('file-system-observer')} />
+
+          <Menu.Item label="save" command={commands.save} />
+
+          <Menu.Item label="save all" command={commands.saveAll} />
+        </Menu.Item>
       </Menu.Root>
 
-    <ErrorBoundary fallback={e => <ErrorComp error={e} />}>
+      <section class="index">
-      {props.children}
+        <aside>
-    </ErrorBoundary>
+          <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>
+};

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

@@ -1,43 +0,0 @@
-.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

@@ -1,37 +0,0 @@
-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

@@ -1,912 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,22 +0,0 @@
-.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

@@ -1,43 +0,0 @@
-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

@@ -1,47 +0,0 @@
-.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

@@ -1,120 +0,0 @@
-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

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