app.config.ts

@@ -7,6 +7,10 @@ export default defineConfig({
         html: {
             cspNonce: 'KAAS_IS_AWESOME',
         },
+        // css: {
+        //     postcss: {
+        //     },
+        // },
         plugins: [
             solidSvg()
             // VitePWA({

bunfig.toml

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

package.json

@@ -2,14 +2,14 @@
   "name": "calque",
   "dependencies": {
     "@solidjs/meta": "^0.29.4",
-    "@solidjs/router": "^0.15.1",
+    "@solidjs/router": "^0.15.2",
     "@solidjs/start": "^1.0.10",
     "dexie": "^4.0.10",
     "iterator-helpers-polyfill": "^3.0.1",
     "sitemap": "^8.0.0",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.9.3",
-    "ts-pattern": "^5.5.0",
+    "ts-pattern": "^5.6.0",
     "vinxi": "^0.4.3"
   },
   "engines": {

src/app.css

@@ -22,18 +22,19 @@
   --surface-600: oklch(from var(--surface-500) calc(l + .025) c h);
   --surface-700: oklch(from var(--surface-600) calc(l + .025) c h);
 
-  --text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h));
-  --text-2: oklch(from var(--text-1) calc(l + .1) c h);
-
   --info: light-dark(oklch(.71 .17 249), oklch(.71 .17 249));
   --fail: light-dark(oklch(.64 .21 25.3), oklch(.64 .21 25.3));
   --warn: light-dark(oklch(.82 .18 78.9), oklch(.82 .18 78.9));
   --succ: light-dark(oklch(.86 .28 150), oklch(.86 .28 150));
 
-  --radii-s: .125em;
-  --radii-m: .25em;
-  --radii-l: .5em;
-  --radii-xl: 1em;
+  --text-1: light-dark(oklch(from var(--primary-500) .2 .02 h), oklch(from var(--primary-500) .9 .02 h));
+  --text-2: oklch(from var(--text-1) calc(l + .1) c h);
+
+  --text-lighter: 100;
+  --text-light: 300;
+  --text-normal: 500;
+  --text-bold: 700;
+  --text-bolder: 900;
 
   --text-s: .8rem;
   --text-m: 1rem;
@@ -41,6 +42,12 @@
   --text-xl: 1.6rem;
   --text-xxl: 2rem;
 
+  --radii-s: .125em;
+  --radii-m: .25em;
+  --radii-l: .5em;
+  --radii-xl: 1em;
+
+  --padding-xs: .125em;
   --padding-s: .25em;
   --padding-m: .5em;
   --padding-l: .75em;
@@ -144,6 +151,36 @@ 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);
+}
+
+kbd {
+  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);
+  display: inline-block;
+  font-size: var(--text-s);
+  font-weight: var(--text-bold);
+  line-height: 1;
+  padding: var(--padding-xs) var(--padding-s);
+  white-space: nowrap;
+}
+
+samp {
+  display: inline-block;
+}
+
 @property --hue {
   syntax: '<angle>';
   inherits: false;

src/components/colorschemepicker.module.css

@@ -8,6 +8,7 @@
     padding: var(--padding-s);
 
     & select {
+        flex: 1 1 auto;
         border: none;
         background-color: inherit;
         border-radius: var(--radii-m);

src/components/filetree.tsx

@@ -71,14 +71,14 @@ export const Tree: Component<{ entries: Entry[], children: readonly [(folder: Ac
 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'))}>{
+    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={{ value: file() }} ondblclick={() => context?.open(file().meta)}><AiFillFile /> {props.children[1](file)}</span>
+                file => <span use:selectable={{ key: file().id, value: file() }} ondblclick={() => context?.open(file().meta)}><AiFillFile /> {props.children[1](file)}</span>
             }</Show>
         </>
     }</For>

src/components/grid/grid.tsx

@@ -0,0 +1,124 @@
+import { Accessor, createContext, createEffect, createMemo, createSignal, JSX, useContext } from "solid-js";
+import { Mutation } from "~/utilities";
+import { SelectionMode, Table, Column as TableColumn, TableApi, DataSet, CellRenderer as TableCellRenderer } from "~/components/table";
+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>[], rows: 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 rows = createMemo(() => props.rows);
+    const columns = createMemo(() => props.columns as TableColumn<T>[]);
+    const mutations = createMemo(() => rows().mutations());
+
+    const ctx: GridContextType<T> = {
+        mutations,
+        selection: createMemo(() => table()?.selection() ?? []),
+
+        mutate<K extends keyof T>(row: number, column: K, value: T[K]) {
+            rows().mutate(row, column, value);
+        },
+
+        remove(indices: number[]) {
+            rows().remove(indices);
+            table()?.clear();
+        },
+
+        insert(row: T, at?: number) {
+            rows().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={rows()} columns={columns()} selectionMode={SelectionMode.Multiple}>{
+            cellRenderers()
+        }</Table>
+    </GridContext.Provider>;
+};
+
+function Api<T extends Record<string, any>>(props: { api: undefined | ((api: GridApi<T>) => any), table?: TableApi<T> }) {
+    const gridContext = useGrid();
+
+    const api = createMemo<GridApi<T> | undefined>(() => {
+        const table = props.table;
+
+        if (!table) {
+            return;
+        }
+
+        return {
+            ...table,
+            mutations: gridContext.mutations,
+            remove(rows: number[]) {
+                gridContext.remove(rows);
+            },
+            insert(row: T, at?: number) {
+                gridContext.insert(row, at);
+            },
+            addColumn(column: keyof T): void {
+                // gridContext.addColumn(column, value);
+            },
+        };
+    });
+
+    createEffect(() => {
+        const value = api();
+
+        if (value) {
+            props.api?.(value);
+        }
+    });
+
+    return null;
+};

src/components/grid/index.tsx

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

src/components/prompt.tsx

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

src/components/table/dataset.spec.ts

@@ -0,0 +1,133 @@
+import { describe, expect, it } from "bun:test";
+import { createDataSet } from "./dataset";
+
+interface DataEntry {
+    id: string;
+    name: string;
+    amount: number;
+};
+const defaultData: 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({ data: 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({ data: defaultData }))
+        });
+
+        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/components/table/dataset.ts

@@ -0,0 +1,155 @@
+import { Accessor, createEffect, createMemo } from "solid-js";
+import { createStore, NotWrappable, produce, StoreSetter, unwrap } from "solid-js/store";
+import { CustomPartial } from "solid-js/store/types/store.js";
+import { deepCopy, deepDiff, 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>> {
+    data: T[];
+    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: 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 sorting = createMemo(() => state.sorting);
+    const grouping = createMemo(() => state.grouping);
+
+    const set: DataSet<T> = {
+        data,
+        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/components/table/index.tsx

@@ -0,0 +1,5 @@
+
+export type { Column, TableApi, CellRenderer, CellRenderers } from './table';
+export type { DataSet, DataSetGroupNode, DataSetRowNode, DataSetNode, SortingFunction, SortOptions, GroupingFunction, GroupOptions } from './dataset';
+export { SelectionMode, Table } from './table';
+export { createDataSet } from './dataset';

src/components/table/table.module.css

@@ -0,0 +1,241 @@
+@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;
+        }
+
+        & details > summary {
+            inset-inline-start: 2em;
+            grid-column: 2;
+        }
+    }
+}
+
+@keyframes header-scroll-shadow {
+    from {
+        box-shadow: none;
+    }
+
+    to {
+        box-shadow: var(--shadow);
+    }
+}
+
+@keyframes column-scroll-shadow {
+    from {
+        background: linear-gradient(90deg, transparent, transparent);
+    }
+
+    to {
+        background: linear-gradient(90deg, var(--shadow-color), transparent);
+    }
+}

src/components/table/table.spec.tsx

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'bun:test';
+import { render } from "@solidjs/testing-library"
+import { Table } from './table';
+import { createDataSet } from './dataset';
+
+type TableItem = {};
+
+// describe('<Table />', () => {
+//     it('should render', async () => {
+//         const dataset = createDataSet<TableItem>([]);
+//         const result = render(() => <Table rows={dataset} columns={[]} />);
+
+//         expect(true).toBe(true);
+//     });
+// });

src/components/table/table.tsx

@@ -0,0 +1,274 @@
+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 './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;
+    clear(): 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} rows={rows()} />
+        </SelectionProvider>
+    </TableContext.Provider>;
+};
+
+type InnerTableProps<T extends Record<string, any>> = { class?: string, summary?: string, rows: 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.rows.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();
+        },
+        clear() {
+            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 <>{content}</>;
+                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

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

src/components/tabs.tsx

@@ -95,19 +95,12 @@ export const Tab: ParentComponent<{ id: string, label: string, closable?: boolea
     const context = useTabs();
     const resolved = children(() => props.children);
     const isActive = context.isActive(props.id);
-    const [ref, setRef] = createSignal();
-
-    // const isActive = context.register(props.id, props.label, {
-    //     closable: props.closable ?? false,
-    //     ref: ref,
-    // });
 
     return <div
-        ref={setRef()}
         id={props.id}
+        class={css.tab}
         data-tab-label={props.label}
         data-tab-closable={props.closable}
-        style="display: contents;"
     >
         <Show when={isActive()}>
             <Command.Context for={context.onClose() ?? noop} with={[props.id]}>{resolved()}</Command.Context>

src/features/command/contextMenu.tsx

@@ -1,4 +1,4 @@
-import { Accessor, Component, createContext, createEffect, createMemo, createSignal, createUniqueId, For, JSX, ParentComponent, splitProps, useContext } from "solid-js";
+import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, JSX, ParentComponent, splitProps, useContext } from "solid-js";
 import { CommandType } from "./index";
 import css from "./contextMenu.module.css";
 
@@ -62,11 +62,11 @@ const Menu: Component<{ children: (command: CommandType) => JSX.Element }> = (pr
         command();
     };
 
-    return <ul ref={setRoot} class={css.menu} style={`position-anchor: ${context.target()?.style.getPropertyValue('anchor-name')};`} popover ontoggle={onToggle}>
+    return <menu ref={setRoot} class={css.menu} 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>
-    </ul>;
+    </menu>;
 };
 
 const Handle: ParentComponent<Record<string, any>> = (props) => {
@@ -75,7 +75,7 @@ const Handle: ParentComponent<Record<string, any>> = (props) => {
     const context = useContext(ContextMenu)!;
     const [handle, setHandle] = createSignal<HTMLElement>();
 
-    return <span {...rest} ref={setHandle} style={`anchor-name: --context-menu-handle-${createUniqueId()};`} oncontextmenu={(e) => {
+    return <span {...rest} ref={setHandle} style={`anchor-name: --context-menu-${createUniqueId()};`} oncontextmenu={(e) => {
         e.preventDefault();
 
         context.show(handle()!);
@@ -84,4 +84,7 @@ const Handle: ParentComponent<Record<string, any>> = (props) => {
     }}>{local.children}</span>;
 };
 
+let handleCounter = 0;
+const createUniqueId = () => `handle-${handleCounter++}`
+
 export const Context = { Root, Menu, Handle };

src/features/command/index.tsx

@@ -1,9 +1,9 @@
-import { Accessor, children, Component, createContext, createEffect, createMemo, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
+import { Accessor, children, Component, createContext, createEffect, createMemo, For, JSX, ParentComponent, ParentProps, Show, useContext } from 'solid-js';
 
 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;
+    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;
 }
 
 const CommandContext = createContext<CommandContextType>();
@@ -13,16 +13,16 @@ 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 commands = new Set<CommandType<any>>();
 
     const context = {
-        set(c: CommandType<any[]>[]): void {
+        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 {
+        addContextualArguments<T extends (...args: any[]) => any = any>(command: CommandType<T>, target: EventTarget, args: Accessor<Parameters<T>>): void {
             if (contextualArguments.has(command) === false) {
                 contextualArguments.set(command, new WeakMap());
             }
@@ -30,8 +30,8 @@ const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
             contextualArguments.get(command)?.set(target, args);
         },
 
-        execute<T extends any[] = any[]>(command: CommandType<T>, event: Event): boolean | undefined {
-            const args = ((): T => {
+        execute<T extends (...args: any[]) => any = any>(command: CommandType<T>, event: Event): boolean | undefined {
+            const args = ((): Parameters<T> => {
 
                 const contexts = contextualArguments.get(command);
 
@@ -45,7 +45,8 @@ const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
                     return [] as any;
                 }
 
-                const args = contexts.get(element)! as Accessor<T>;
+                const args = contexts.get(element)! as Accessor<Parameters<T>>;
+
                 return args();
             })();
 
@@ -84,9 +85,9 @@ const Root: ParentComponent<{ commands: CommandType[] }> = (props) => {
     </CommandContext.Provider>;
 };
 
-const Add: Component<{ command: CommandType<any[]> } | { commands: CommandType<any[]>[] }> = (props) => {
+const Add: Component<{ command: CommandType<any> } | { commands: CommandType<any>[] }> = (props) => {
     const context = useCommands();
-    const commands = createMemo<CommandType<any[]>[]>(() => props.commands ?? [props.command]);
+    const commands = createMemo<CommandType<any>[]>(() => props.commands ?? [props.command]);
 
     createEffect(() => {
         context?.set(commands());
@@ -95,7 +96,7 @@ const Add: Component<{ command: CommandType<any[]> } | { commands: CommandType<a
     return undefined;
 };
 
-const Context = <T extends any[] = any[]>(props: ParentProps<{ for: CommandType<T>, with: T }>): JSX.Element => {
+const Context = <T extends (...args: any[]) => 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);
@@ -114,19 +115,27 @@ const Context = <T extends any[] = any[]>(props: ParentProps<{ for: CommandType<
 };
 
 const Handle: Component<{ command: CommandType }> = (props) => {
-    return <>
+    return <samp>
         {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+' : '';
+                const modifier = shortcut().modifier;
+                const modifierMap: Record<number, string> = {
+                    [Modifier.Shift]: 'Shft',
+                    [Modifier.Control]: 'Ctrl',
+                    [Modifier.Meta]: 'Meta',
+                    [Modifier.Alt]: 'Alt',
+                };
 
-                return <sub>{ctrl}{shift}{meta}{alt}{shortcut().key}</sub>;
+                return <>&nbsp;
+                    <For each={Object.values(Modifier).filter((m): m is number => typeof m === 'number').filter(m => modifier & m)}>{
+                        (m) => <><kbd>{modifierMap[m]}</kbd>+</>
+                    }</For>
+                    <kbd>{shortcut().key}</kbd>
+                </>;
             }
         }</Show>
-    </>;
+    </samp>;
 };
 
 export const Command = { Root, Handle, Add, Context };
@@ -139,17 +148,19 @@ export enum Modifier {
     Alt = 1 << 3,
 }
 
-export interface CommandType<TArgs extends any[] = []> {
-    (...args: TArgs): any;
+export interface CommandType<T extends (...args: any[]) => any = any> {
+    (...args: Parameters<T>): Promise<ReturnType<T>>;
     label: string;
     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 = <TArgs extends any[] = []>(label: string, command: (...args: TArgs) => any, shortcut?: CommandType['shortcut']): CommandType<TArgs> => {
-    return Object.defineProperties(command as CommandType<TArgs>, {
+export const createCommand = <T extends (...args: any[]) => any>(label: string, command: T, shortcut?: CommandType['shortcut']): CommandType<T> => {
+    return Object.defineProperties(((...args: Parameters<T>) => command(...args)) as any, {
         label: {
             value: label,
             configurable: false,
@@ -159,18 +170,24 @@ export const createCommand = <TArgs extends any[] = []>(label: string, command:
             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, () => { });
+                return createCommand(label, command, shortcut);
             },
             configurable: false,
             writable: false,
         },
-}) as CommandType & { withLabel(label: string): CommandType };
+        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', () => { });
 
 export { Context } from './contextMenu';

src/features/file/grid.module.css

@@ -1,21 +1,4 @@
-.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 {
+.textarea {
     resize: vertical;
     min-block-size: max(2em, 100%);
     max-block-size: 50em;
@@ -34,95 +17,3 @@
         text-decoration: yellow underline;
     }
 }
-
-    & .cell {
-        display: grid;
-        padding: .5em;
-        border: 1px solid transparent;
-        border-radius: var(--radii-m);
-
-        &:has(textarea:focus) {
-            border-color: var(--info);
-        }
-
-        & > span {
-            align-self: center;
-        }
-    }
-
-    & :is(.header, .main, .footer) {
-        grid-column: span calc(2 + var(--columns));
-        display: grid;
-        grid-template-columns: subgrid;
-    }
-
-    & .header {
-        position: sticky;
-        inset-block-start: 0;
-        background-color: var(--surface-600);
-        border-block-end: 1px solid var(--surface-300);
-    }
-
-    & .row {
-        --bg: var(--text);
-        --alpha: 0;
-        grid-column: span calc(2 + var(--columns));
-        display: grid;
-        grid-template-columns: subgrid;
-        border: 1px solid transparent;
-        background-color: color(from var(--bg) srgb r g b / var(--alpha));
-
-        &:has(> .cell > :checked) {
-            --bg: var(--info);
-            --alpha: .1;
-            border-color: var(--bg);
-
-            & span {
-                font-variation-settings: 'GRAD' 1000;
-            }
-
-            & + :has(> .cell> :checked) {
-                border-block-start-color: transparent;
-            }
-
-            &:has(+ .row > .cell > :checked) {
-                border-block-end-color: transparent;
-            }
-        }
-
-        &:hover {
-            --alpha: .2 !important;
-        }
-    }
-
-    & details {
-        display: contents;
-
-        &::details-content {
-            grid-column: span calc(2 + var(--columns));
-            display: grid;
-            grid-template-columns: subgrid;
-        }
-
-        &:not([open])::details-content {
-            display: none;
-        }
-
-        & > summary {
-            grid-column: 2 / span calc(1 + var(--columns));
-            padding: .5em;
-            padding-inline-start: calc(var(--depth) * 1em + .5em);
-
-        }
-
-        & > .row > .cell > span {
-            padding-inline-start: calc(var(--depth) * 1em);
-        }
-    }
-}
-
-@property --depth {
-    syntax: "<number>";
-    inherits: false;
-    initial-value: 0;
-}

src/features/file/grid.tsx

@@ -1,229 +1,74 @@
-import { Accessor, Component, createContext, createEffect, createMemo, createSignal, For, ParentComponent, Show, useContext } from "solid-js";
-import { createStore, produce, unwrap } from "solid-js/store";
-import { SelectionProvider, useSelection, selectable } from "../selectable";
-import { debounce, deepCopy, deepDiff, Mutation } from "~/utilities";
-import css from './grid.module.css';
-
-selectable // prevents removal of import
-
-interface Leaf extends Record<string, string> { }
-export interface Entry extends Record<string, Entry | Leaf> { }
-
-type Rows = Map<string, Record<string, string>>;
-type SelectionItem = { key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> };
-
-export interface GridContextType {
-    readonly rows: Accessor<Record<string, Record<string, string>>>;
-    readonly mutations: Accessor<Mutation[]>;
-    readonly selection: Accessor<SelectionItem[]>;
-    mutate(prop: string, lang: string, value: string): void;
-    remove(props: string[]): void;
-    insert(prop: string): void;
-}
+import { Accessor, Component, createEffect, createMemo, createSignal } from "solid-js";
+import { debounce, Mutation } from "~/utilities";
+import { Column, GridApi as GridCompApi, Grid as GridComp } from "~/components/grid";
+import { createDataSet, DataSetNode, DataSetRowNode } from "~/components/table";
+import { SelectionItem } from "../selectable";
+import css from "./grid.module.css"
 
+export type Entry = { key: string } & { [lang: string]: string };
 export interface GridApi {
-    readonly selection: Accessor<Record<string, Record<string, string>>>;
-    readonly rows: Accessor<Record<string, Record<string, string>>>;
     readonly mutations: Accessor<Mutation[]>;
-    selectAll(): void;
-    clear(): void;
-    remove(keys: string[]): void;
-    insert(prop: string): void;
+    readonly selection: Accessor<SelectionItem<number, Entry>[]>;
+    remove(indices: number[]): void;
+    addKey(key: string): void;
+    addLocale(locale: string): 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.map<R>(r => ({ ...r, _key: r.value.key }))) as any;
 }
 
-const GridContext = createContext<GridContextType>();
-
-const isLeaf = (entry: Entry | Leaf): entry is Leaf => Object.values(entry).some(v => typeof v === 'string');
-const useGrid = () => useContext(GridContext)!;
-
-export const Grid: Component<{ class?: string, columns: string[], rows: Rows, api?: (api: GridApi) => any }> = (props) => {
-    const [selection, setSelection] = createSignal<SelectionItem[]>([]);
-    const [state, setState] = createStore<{ rows: Record<string, Record<string, string>>, snapshot: Rows, numberOfRows: number }>({
-        rows: {},
-        snapshot: new Map,
-        numberOfRows: 0,
-    });
-
-    const mutations = createMemo(() => {
-        // enumerate all values to make sure the memo is recalculated on any change
-        Object.values(state.rows).map(entry => Object.values(entry));
-
-        return deepDiff(state.snapshot, state.rows).toArray();
-    });
-    const rows = createMemo(() => Object.fromEntries(Object.entries(state.rows).map(([key, row]) => [key, unwrap(row)] as const)));
-
-    createEffect(() => {
-        setState('rows', Object.fromEntries(deepCopy(props.rows).entries()));
-        setState('snapshot', props.rows);
-    });
-
-    createEffect(() => {
-        setState('numberOfRows', Object.keys(state.rows).length);
-    });
-
-    const ctx: GridContextType = {
-        rows,
-        mutations,
-        selection,
-
-        mutate(prop: string, lang: string, value: string) {
-            setState('rows', prop, lang, value);
+export function Grid(props: { class?: string, rows: Entry[], locales: string[], api?: (api: GridApi) => any }) {
+    const rows = createMemo(() => createDataSet<Entry>(props.rows, { group: { by: 'key', with: groupBy } }));
+    const locales = createMemo(() => props.locales);
+    const columns = createMemo<Column<Entry>[]>(() => [
+        {
+            id: 'key',
+            label: 'Key',
+            renderer: ({ value }) => value.split('.').at(-1),
         },
+        ...locales().map<Column<Entry>>(lang => ({
+            id: lang,
+            label: lang,
+            renderer: ({ row, column, value, mutate }) => {
+                const entry = rows().value[row]!;
 
-        remove(props: string[]) {
-            setState('rows', produce(rows => {
-                for (const prop of props) {
-                    delete rows[prop];
-                }
-
-                return rows;
-            }));
+                return <TextArea row={row} key={entry.key} lang={String(column)} value={value} oninput={e => mutate(e.data ?? '')} />;
             },
-
-        insert(prop: string) {
-            setState('rows', produce(rows => {
-                rows[prop] = Object.fromEntries(props.columns.slice(1).map(lang => [lang, '']));
-
-                return rows
         }))
-        },
-    };
+    ]);
 
-    return <GridContext.Provider value={ctx}>
-        <SelectionProvider selection={setSelection} multiSelect>
-            <Api api={props.api} />
-
-            <_Grid class={props.class} columns={props.columns} rows={rows()} />
-        </SelectionProvider>
-    </GridContext.Provider>;
-};
-
-const _Grid: Component<{ class?: string, columns: string[], rows: Record<string, Record<string, string>> }> = (props) => {
-    const columnCount = createMemo(() => props.columns.length - 1);
-    const root = createMemo<Entry>(() => Object.entries(props.rows)
-        .reduce((aggregate, [key, value]) => {
-            let obj: any = aggregate;
-            const parts = key.split('.');
-
-            for (const [i, part] of parts.entries()) {
-                if (Object.hasOwn(obj, part) === false) {
-                    obj[part] = {};
-                }
-
-                if (i === (parts.length - 1)) {
-                    obj[part] = value;
-                }
-                else {
-                    obj = obj[part];
-                }
-            }
-
-            return aggregate;
-        }, {}));
-
-    return <section class={`${css.table} ${props.class}`} style={{ '--columns': columnCount() }}>
-        <Head headers={props.columns} />
-
-        <main class={css.main}>
-            <Row entry={root()} />
-        </main>
-    </section>
-};
-
-const Api: Component<{ api: undefined | ((api: GridApi) => any) }> = (props) => {
-    const gridContext = useGrid();
-    const selectionContext = useSelection<{ key: string, value: Accessor<Record<string, string>>, element: WeakRef<HTMLElement> }>();
-
-    const api: GridApi = {
-        selection: createMemo(() => {
-            const selection = selectionContext.selection();
-
-            return Object.fromEntries(selection.map(({ key, value }) => [key, value()] as const));
-        }),
-        rows: gridContext.rows,
-        mutations: gridContext.mutations,
-        selectAll() {
-            selectionContext.selectAll();
-        },
-        clear() {
-            selectionContext.clear();
-        },
-        remove(props: string[]) {
-            gridContext.remove(props);
-        },
-        insert(prop: string) {
-            gridContext.insert(prop);
-        },
-    };
+    const [api, setApi] = createSignal<GridCompApi<Entry>>();
 
     createEffect(() => {
-        props.api?.(api);
+        const r = rows();
+
+        props.api?.({
+            mutations: r.mutations,
+            selection: createMemo(() => api()?.selection() ?? []),
+            remove: r.remove,
+            addKey(key) {
+                r.insert({ key, ...Object.fromEntries(locales().map(l => [l, ''])) });
+            },
+            addLocale(locale) {
+                r.mutateEach(entry => ({ ...entry, [locale]: '' }));
+            },
+        });
     });
 
-    return null;
+    return <GridComp rows={rows()} columns={columns()} api={setApi} />;
 };
 
-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 TextArea: Component<{ row: number, key: string, lang: string, value: string, oninput?: (event: InputEvent) => any }> = (props) => {
     const [element, setElement] = createSignal<HTMLTextAreaElement>();
 
     const resize = () => {
@@ -250,10 +95,11 @@ const TextArea: Component<{ key: string, value: string, lang: string, oninput?:
 
     return <textarea
         ref={setElement}
+        class={css.textarea}
         value={props.value}
         lang={props.lang}
         placeholder={`${props.key} in ${props.lang}`}
-        name={`${props.key}:${props.lang}`}
+        name={`${props.row}[${props.lang}]`}
         spellcheck={true}
         wrap="soft"
         onkeyup={onKeyUp}

src/features/menu/index.module.css

@@ -1,4 +1,7 @@
 .root {
+    margin: 0;
+    padding: 0;
+
     & > div {
         display: contents;
     }

src/features/menu/index.tsx

@@ -1,4 +1,4 @@
-import { Accessor, Component, For, JSX, Match, ParentComponent, Setter, Show, Switch, children, createContext, createEffect, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, useContext } from "solid-js";
+import { Accessor, Component, For, JSX, Match, ParentComponent, Setter, Show, Switch, children, createContext, createEffect, createMemo, createSignal, mergeProps, useContext } from "solid-js";
 import { Portal } from "solid-js/web";
 import { createStore } from "solid-js/store";
 import { CommandType, Command, useCommands } from "../command";
@@ -75,9 +75,9 @@ const useMenu = () => {
     return context;
 }
 
-type ItemProps = { label: string, children: JSX.Element } | { command: CommandType };
+type ItemProps<T extends (...args: any[]) => any> = { label: string, children: JSX.Element } | { command: CommandType<T> };
 
-const Item: Component<ItemProps> = (props) => {
+function Item<T extends (...args: any[]) => any>(props: ItemProps<T>) {
     const id = createUniqueId();
 
     if (props.command) {
@@ -182,7 +182,7 @@ const Root: ParentComponent<{}> = (props) => {
 const Mount: Component = (props) => {
     const menu = useMenu();
 
-    return <div class={css.root} ref={menu.setRef} />;
+    return <menu class={css.root} ref={menu.setRef} />;
 };
 
 export const Menu = { Mount, Root, Item, Separator } as const;
@@ -233,7 +233,7 @@ export const CommandPalette: Component<{ api?: (api: CommandPaletteApi) => any,
     };
 
     return <dialog ref={setRoot} class={css.commandPalette} onClose={() => setOpen(false)}>
-        <SearchableList<CommandType> items={context.commands()} keySelector={item => item.label} context={setSearch} onSubmit={onSubmit}>{
+        <SearchableList title="command palette" 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>
@@ -258,6 +258,7 @@ interface SearchContext<T> {
 
 interface SearchableListProps<T> {
     items: T[];
+    title?: string;
     keySelector(item: T): string;
     filter?: (item: T, search: string) => boolean;
     children(item: T, context: SearchContext<T>): JSX.Element;
@@ -303,7 +304,7 @@ function SearchableList<T>(props: SearchableListProps<T>): JSX.Element {
     createEffect(() => {
         const length = results().length - 1;
 
-        setSelected(current => current !== undefined ? Math.min(current, length) : undefined);
+        setSelected(current => Math.min(current, length));
     });
 
     const onKeyDown = (e: KeyboardEvent) => {
@@ -333,17 +334,22 @@ function SearchableList<T>(props: SearchableListProps<T>): JSX.Element {
         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" />
+    return <search title={props.title}>
+        <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" enterkeyhint="go" />
 
             <output for={`search-${id}`}>
                 <For each={results()}>{
                     (result, index) => <div classList={{ [css.selected]: index() === selected() }}>{props.children(result, ctx)}</div>
                 }</For>
             </output>
-    </form>;
+        </form>
+    </search>;
 };
 
+let keyCounter = 0;
+const createUniqueId = () => `key-${keyCounter++}`;
+
 declare module "solid-js" {
     namespace JSX {
         interface HTMLAttributes<T> {

src/features/selectable/index.module.css

@@ -3,3 +3,8 @@
         background-color: color(from var(--info) xyz x y z / .2);
     }
 }
+
+.root {
+    display: contents !important;
+    all: inherit;
+}

src/features/selectable/index.tsx

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

src/global.d.ts

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

src/routes/(editor).tsx

@@ -1,5 +1,5 @@
 import { Link, Meta, Title } from "@solidjs/meta";
-import { Component, createMemo, createSignal, createUniqueId, ErrorBoundary, ParentProps, Show } from "solid-js";
+import { Component, createMemo, createSignal, ParentProps, Show } from "solid-js";
 import { FilesProvider } from "~/features/file";
 import { CommandPalette, CommandPaletteApi, Menu, MenuProvider } from "~/features/menu";
 import { A, RouteDefinition, useBeforeLeave } from "@solidjs/router";
@@ -89,11 +89,15 @@ export default function Editor(props: ParentProps) {
             </nav>
 
             <section>
-                <ErrorBoundary fallback={err => <ErrorComp error={err} />}>
                 <FilesProvider>
                     {props.children}
                 </FilesProvider>
-                </ErrorBoundary>
+
+                {/* <ErrorBoundary fallback={err => <ErrorComp error={err} />}>
+                    <FilesProvider>
+                        {props.children}
+                    </FilesProvider>
+                </ErrorBoundary> */}
             </section>
         </main>
 
@@ -109,6 +113,11 @@ const ErrorComp: Component<{ error: Error }> = (props) => {
             cause => <>{cause().description}</>
         }</Show>
 
+        {props.error.stack}
+
         <a href="/">Return to start</a>
     </div>;
 };
+
+let keyCounter = 0;
+const createUniqueId = () => `key-${keyCounter++}`;

src/routes/(editor)/edit.tsx

@@ -1,11 +1,11 @@
 import { Component, createEffect, createMemo, createSignal, For, onMount, ParentProps, Setter, Show } from "solid-js";
-import { filter, MutarionKind, Mutation, splitAt } from "~/utilities";
+import { Created, 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, load, useFiles } from "~/features/file";
 import { Command, CommandType, Context, createCommand, Modifier, noop, useCommands } from "~/features/command";
-import { GridApi } from "~/features/file/grid";
+import { Entry, GridApi } from "~/features/file/grid";
 import { Tab, Tabs } from "~/components/tabs";
 import { isServer } from "solid-js/web";
 import { Prompt, PromptApi } from "~/components/prompt";
@@ -38,7 +38,8 @@ async function* walk(directory: FileSystemDirectoryHandle, path: string[] = []):
 };
 
 
-interface Entries extends Map<string, Record<string, { value: string, handle: FileSystemFileHandle, id: string }>> { }
+// interface Entries extends Map<string, Record<string, { value: string, handle: FileSystemFileHandle, id: string }>> { };
+interface Entries extends Map<string, { key: string, } & Record<string, { value: string, handle: FileSystemFileHandle, id: string }>> { };
 
 export default function Edit(props: ParentProps) {
     const filesContext = useFiles();
@@ -91,7 +92,8 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
     const [active, setActive] = createSignal<string>();
     const [contents, setContents] = createSignal<Map<string, Map<string, string>>>(new Map());
     const [tree, setFiles] = createSignal<FolderEntry>(emptyFolder);
-    const [prompt, setPrompt] = createSignal<PromptApi>();
+    const [newKeyPrompt, setNewKeyPrompt] = createSignal<PromptApi>();
+    const [newLanguagePrompt, setNewLanguagePrompt] = createSignal<PromptApi>();
 
     const tab = createMemo(() => {
         const name = active();
@@ -99,25 +101,32 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
         return tabs().find(t => t.handle.name === name);
     });
     const api = createMemo(() => tab()?.api());
-    const mutations = createMemo<(Mutation & { file?: { value: string, handle: FileSystemFileHandle, id: string } })[]>(() => tabs().flatMap(tab => {
+    const mutations = createMemo<(Mutation & { lang: string, file?: { value: string, handle: FileSystemFileHandle, id: string } })[]>(() => tabs().flatMap(tab => {
         const entries = tab.entries();
         const files = tab.files();
         const mutations = tab.api()?.mutations() ?? [];
 
-        return mutations.flatMap(m => {
+        return mutations.flatMap((m): any => {
+            const [index, lang] = splitAt(m.key, m.key.indexOf('.'));
+
             switch (m.kind) {
                 case MutarionKind.Update: {
-                    const [key, lang] = splitAt(m.key, m.key.lastIndexOf('.'));
-
-                    return { kind: MutarionKind.Update, key, file: entries.get(key)?.[lang] };
+                    const entry = entries.get(index as any)!;
+                    return { kind: MutarionKind.Update, key: entry.key, lang, file: files.get(lang)! };
                 }
 
                 case MutarionKind.Create: {
-                    return Object.entries(m.value).map(([lang, value]) => ({ kind: MutarionKind.Create, key: m.key, file: files.get(lang)!, value }));
+                    if (typeof m.value === 'object') {
+                        return Object.entries(m.value).map(([lang, value]) => ({ kind: MutarionKind.Create, key: m.key, lang, file: files.get(lang)!, value }));
+                    }
+
+                    const entry = entries.get(index as any)!;
+                    return { kind: MutarionKind.Create, key: entry.key, lang, file: undefined, value: m.value };
                 }
 
                 case MutarionKind.Delete: {
-                    return files.values().map(file => ({ kind: MutarionKind.Delete, key: m.key, file })).toArray();
+                    const entry = entries.get(index as any)!;
+                    return files.values().map(file => ({ kind: MutarionKind.Delete, key: entry.key, file })).toArray();
                 }
 
                 default: throw new Error('unreachable code');
@@ -137,8 +146,35 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
         }
 
         const groupedByFileId = Object.groupBy(muts, m => m.file?.id ?? 'undefined');
+        const newFiles = Object.entries(Object.groupBy((groupedByFileId['undefined'] ?? []) as (Created & { lang: string, file: undefined })[], m => m.lang)).map(([lang, mutations]) => {
+            const data = mutations!.reduce((aggregate, { key, value }) => {
+                let obj = aggregate;
+                const i = key.lastIndexOf('.');
 
-        return entries.map(({ id, handle }) => {
+                if (i !== -1) {
+                    const [k, lastPart] = splitAt(key, i);
+
+                    for (const part of k.split('.')) {
+                        if (!Object.hasOwn(obj, part)) {
+                            obj[part] = {};
+                        }
+
+                        obj = obj[part];
+                    }
+
+                    obj[lastPart] = value;
+                }
+                else {
+                    obj[key] = value;
+                }
+
+                return aggregate;
+            }, {} as Record<string, any>);
+
+            return [{ existing: false, name: lang }, data] as const;
+        })
+
+        const existingFiles = entries.map(({ id, handle }) => {
             const existing = new Map(files.get(id)!);
             const mutations = groupedByFileId[id]!;
 
@@ -158,7 +194,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
             }
 
             return [
-                handle,
+                { existing: true, handle },
                 existing.entries().reduce((aggregate, [key, value]) => {
                     let obj = aggregate;
                     const i = key.lastIndexOf('.');
@@ -183,7 +219,9 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
                     return aggregate;
                 }, {} as Record<string, any>)
             ] as const;
-        }).toArray();
+        }).toArray() as (readonly [({ existing: true, handle: FileSystemFileHandle } | { existing: false, name: string }), Record<string, any>])[];
+
+        return existingFiles.concat(newFiles);
     });
 
     createEffect(() => {
@@ -208,7 +246,10 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
             filesContext.remove(id);
         }, { key: 'w', modifier: Modifier.Control | (isInstalledPWA ? Modifier.None : Modifier.Alt) }),
         save: createCommand('save', async () => {
-            await Promise.allSettled(mutatedData().map(async ([handle, data]) => {
+            await Promise.allSettled(mutatedData().map(async ([file, data]) => {
+                // TODO :: add the newly created file to the known files list to that the save file picker is not shown again on subsequent saves
+                const handle = file.existing ? file.handle : await window.showSaveFilePicker({ suggestedName: file.name, excludeAcceptAllOption: true, types: [{ description: 'JSON file', accept: { 'application/json': ['.json'] } }] });
+
                 const stream = await handle.createWritable({ keepExistingData: false });
 
                 stream.write(JSON.stringify(data, null, 4));
@@ -243,19 +284,28 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
                 return;
             }
 
-            remove(Object.keys(selection()));
+            remove(selection().map(s => s.key));
         }, { key: 'delete', modifier: Modifier.None }),
         inserNewKey: createCommand('insert new key', async () => {
-            const formData = await prompt()?.showModal();
+            const formData = await newKeyPrompt()?.showModal();
             const key = formData?.get('key')?.toString();
 
             if (!key) {
                 return;
             }
 
-            api()?.insert(key);
+            api()?.addKey(key);
+        }),
+        inserNewLanguage: createCommand('insert new language', 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}>
@@ -293,8 +343,12 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
             </Menu.Item>
         </Menu.Root>
 
-        <Prompt api={setPrompt} title="Which key do you want to create?" description={<>hint: use <code>.</code> to denote nested keys,<br /> i.e. <code>this.is.some.key</code> would be a key that is four levels deep</>}>
-            <input name="key" value="this.is.an.awesome.key" placeholder="name of new key ()" />
+        <Prompt api={setNewKeyPrompt} title="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="name of new key ()" value="keyF.some.deeper.nested.value" />
+        </Prompt>
+
+        <Prompt api={setNewLanguagePrompt}>
+            <input name="locale" placeholder="locale code, i.e. en-GB" value="fr-FR" />
         </Prompt>
 
         <Sidebar as="aside" label={tree().name} class={css.sidebar}>
@@ -317,11 +371,7 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
 
         <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>
@@ -331,8 +381,8 @@ const Editor: Component<{ root: FileSystemDirectoryHandle }> = (props) => {
 
 const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<GridApi | undefined>, entries?: Setter<Entries> }> = (props) => {
     const [entries, setEntries] = createSignal<Entries>(new Map());
-    const [columns, setColumns] = createSignal<string[]>([]);
-    const [rows, setRows] = createSignal<Map<string, Record<string, string>>>(new Map);
+    const [locales, setLocales] = createSignal<string[]>([]);
+    const [rows, setRows] = createSignal<Entry[]>([]);
     const [api, setApi] = createSignal<GridApi>();
 
     createEffect(() => {
@@ -362,9 +412,10 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
                     return { id, handle, lang, entries };
                 }
             );
-            const languages = new Set(contents.map(c => c.lang));
             const template = contents.map(({ lang, handle }) => [lang, { handle, value: '' }]);
 
+            setLocales(contents.map(({ lang }) => lang));
+
             const merged = contents.reduce((aggregate, { id, handle, lang, entries }) => {
                 for (const [key, value] of entries.entries()) {
                     if (!aggregate.has(key)) {
@@ -377,13 +428,12 @@ const Content: Component<{ directory: FileSystemDirectoryHandle, api?: Setter<Gr
                 return aggregate;
             }, new Map<string, Record<string, { id: string, value: string, handle: FileSystemFileHandle }>>());
 
-            setColumns(['key', ...languages]);
-            setEntries(merged);
-            setRows(new Map(merged.entries().map(([key, langs]) => [key, Object.fromEntries(Object.entries(langs).map(([lang, { value }]) => [lang, value]))] as const)));
+            setEntries(new Map(merged.entries().map(([key, langs], i) => [i.toString(), { key, ...langs }])) as Entries);
+            setRows(merged.entries().map(([key, langs]) => ({ key, ...Object.fromEntries(Object.entries(langs).map(([lang, { value }]) => [lang, value])) } as Entry)).toArray());
         })();
     });
 
-    return <Grid columns={columns()} rows={rows()} api={setApi} />;
+    return <Grid rows={rows()} locales={locales()} api={setApi} />;
 };
 
 const Blank: Component<{ open: CommandType }> = (props) => {

src/routes/(editor)/experimental.css

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

src/routes/(editor)/experimental.tsx

@@ -1,132 +1,22 @@
-import { Component, createEffect, createMemo, createResource, createSignal, For, lazy, onMount, Suspense } from "solid-js";
-import { useFiles } from "~/features/file";
+
+import { ParentProps } from "solid-js";
 import { Menu } from "~/features/menu";
-import { createCommand, Modifier } from "~/features/command";
-import { emptyFolder, FolderEntry, Tree, walk } from "~/components/filetree";
-import { createStore, produce } from "solid-js/store";
-import { Tab, Tabs } from "~/components/tabs";
-import "./experimental.css";
-import { selectable, SelectionProvider } from "~/features/selectable";
+import { createCommand } from "~/features/command";
+import { useNavigate } from "@solidjs/router";
 
-interface ExperimentalState {
-  files: File[];
-  numberOfFiles: number;
-}
+export default function Experimental(props: ParentProps) {
+  const navigate = useNavigate();
 
-export default function Experimental() {
-  const files = useFiles();
-  const [tree, setTree] = createSignal<FolderEntry>(emptyFolder);
-  const [state, setState] = createStore<ExperimentalState>({
-    files: [],
-    numberOfFiles: 0,
-  });
-  const [showHiddenFiles, setShowHiddenFiles] = createSignal<boolean>(false);
-  const filters = createMemo<RegExp[]>(() => showHiddenFiles() ? [/^node_modules$/] : [/^node_modules$/, /^\..+$/]);
-  const [root, { mutate, refetch }] = createResource(() => files?.get('root'));
-
-  createEffect(() => {
-    setState('numberOfFiles', state.files.length);
+  const goTo = createCommand('go to', (to: string) => {
+    navigate(`/experimental/${to}`);
   });
 
-  // Since the files are stored in indexedDb we need to refetch on the client in order to populate on page load
-  onMount(() => {
-    refetch();
-  });
-
-  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 (
-    <>
+  return <>
     <Menu.Root>
-        <Menu.Item label="file">
-          <Menu.Item label="open" command={commands.open} />
-
-          <Menu.Item label="open folder" command={commands.openFolder} />
-
-          <Menu.Item label="save" command={commands.save} />
-
-          <Menu.Item label="save all" command={commands.saveAll} />
-        </Menu.Item>
+      <Menu.Item command={goTo.withLabel('table').with('table')} />
+      <Menu.Item command={goTo.withLabel('grid').with('grid')} />
     </Menu.Root>
 
-      <section class="index">
-        <aside>
-          <label><input type="checkbox" on:input={() => setShowHiddenFiles(v => !v)} />Show hidden files</label>
-          <Tree entries={tree().entries} open={open}>{
-            file => file().name
-          }</Tree>
-        </aside>
-
-        <section>
-          <Tabs>
-            <For each={state.files}>{
-              file => <Tab label={file.name}>
-                <Content file={file} />
-              </Tab>
-            }</For>
-          </Tabs>
-        </section>
-      </section>
-    </>
-  );
+    {props.children}
+  </>;
 }
-
-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/experimental.data.ts

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

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

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

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

@@ -0,0 +1,118 @@
+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 { debounce, MutarionKind, Mutation } from '~/utilities';
+import { createDataSet, Table } from '~/components/table';
+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 onclick={() => api()?.insert({ id: crypto.randomUUID(), name: '', address: '', country: '', currency: '', email: '', phone: '' })}>add row</button>
+                <button 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} rows={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/table.module.css

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

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

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

src/routes/editor.module.css

@@ -144,11 +144,6 @@
     }
 }
 
-/* ::view-transition-old(menu),
-::view-transition-new(menu) {
-    z-index: 1;
-} */
-
 ::view-transition-old(content) {
     animation-name: slide-left;
 }

src/utilities.spec.ts

@@ -265,7 +265,7 @@ describe('utilities', () => {
             const actual = first(deepDiff(a, b));
 
             // Arrange 
-            expect(actual).toEqual({ kind: MutarionKind.Delete, key: 'key' });
+            expect(actual).toEqual({ kind: MutarionKind.Delete, key: 'key', original: 'value' });
         });
 
         it('should yield a mutation of type update when the value of a key in `a` is not equal to the value of the same key in `b`', async () => {
@@ -302,8 +302,8 @@ describe('utilities', () => {
 
             // Arrange 
             expect(actual).toEqual([
-                { kind: MutarionKind.Delete, key: 'key2' },
-                { kind: MutarionKind.Delete, key: 'key3' },
+                { kind: MutarionKind.Delete, key: 'key2', original: 'value2' },
+                { kind: MutarionKind.Delete, key: 'key3', original: 'value3' },
             ]);
         });
 
@@ -332,7 +332,7 @@ describe('utilities', () => {
 
             // Arrange 
             expect(actual).toEqual([
-                { kind: MutarionKind.Delete, key: 'key2_old' },
+                { kind: MutarionKind.Delete, key: 'key2_old', original: 'value2' },
                 { kind: MutarionKind.Create, key: 'key2_new', value: 'value2' },
             ]);
         });
@@ -361,7 +361,7 @@ describe('utilities', () => {
 
             // Arrange
             expect(actual).toEqual([
-                { kind: MutarionKind.Delete, key: 'key.2' },
+                { kind: MutarionKind.Delete, key: 'key.2', original: 2 },
                 { kind: MutarionKind.Create, key: 'key.5', value: 5 },
             ]);
         });

src/utilities.ts

@@ -54,10 +54,10 @@ export enum MutarionKind {
     Update = 'updated',
     Delete = 'deleted',
 }
-type Created = { kind: MutarionKind.Create, value: any };
-type Updated = { kind: MutarionKind.Update, value: any, original: any };
-type Deleted = { kind: MutarionKind.Delete };
-export type Mutation = { key: string } & (Created | Updated | Deleted);
+export type Created = { kind: MutarionKind.Create, key: string, value: any };
+export type Updated = { kind: MutarionKind.Update, key: string, value: any, original: any };
+export type Deleted = { kind: MutarionKind.Delete, key: string, original: any };
+export type Mutation = Created | Updated | Deleted;
 
 export function* deepDiff<T1 extends object, T2 extends object>(a: T1, b: T2, path: string[] = []): Generator<Mutation, void, unknown> {
     if (!isIterable(a) || !isIterable(b)) {
@@ -74,7 +74,7 @@ export function* deepDiff<T1 extends object, T2 extends object>(a: T1, b: T2, pa
         }
 
         if (keyA && keyB === undefined) {
-            yield { key: path.concat(keyA.toString()).join('.'), kind: MutarionKind.Delete };
+            yield { key: path.concat(keyA.toString()).join('.'), kind: MutarionKind.Delete, original: valueA };
 
             continue;
         }
@@ -93,7 +93,7 @@ export function* deepDiff<T1 extends object, T2 extends object>(a: T1, b: T2, pa
 
         yield ((): Mutation => {
             if (valueA === null || valueA === undefined) return { key, kind: MutarionKind.Create, value: valueB };
-            if (valueB === null || valueB === undefined) return { key, kind: MutarionKind.Delete };
+            if (valueB === null || valueB === undefined) return { key, kind: MutarionKind.Delete, original: valueA };
 
             return { key, kind: MutarionKind.Update, value: valueB, original: valueA };
         })();
@@ -181,7 +181,7 @@ const bufferredIterator = <T extends readonly [string | number, any]>(subject: I
         done = res.done ?? false;
 
         if (!done) {
-            buffer.push(res.value)
+            buffer.push(res.value);
         }
     };