settled on typings. Now working on ui interaction flow.

package.json

@@ -8,6 +8,7 @@
     "@material-ui/core": "^4.12.4",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
+    "@nano-sql/core": "^2.3.7",
     "@reduxjs/toolkit": "^2.2.1",
     "@testing-library/dom": "^9.3.4",
     "@testing-library/jest-dom": "^5.17.0",

pnpm-lock.yaml

@@ -20,6 +20,9 @@ dependencies:
   '@mui/material':
     specifier: ^5.15.10
     version: 5.15.10(@emotion/react@11.11.3)(@emotion/styled@11.11.0)(@types/react@18.2.57)(react-dom@18.2.0)(react@18.2.0)
+  '@nano-sql/core':
+    specifier: ^2.3.7
+    version: 2.3.7
   '@reduxjs/toolkit':
     specifier: ^2.2.1
     version: 2.2.1(react-redux@9.1.0)(react@18.2.0)
@@ -2494,6 +2497,20 @@ packages:
       react-is: 18.2.0
     dev: false
 
+  /@nano-sql/core@2.3.7:
+    resolution: {integrity: sha512-B9nniPPRhPf5Hf2cyvy72SNEg4iKQEW6pig9nwrM4DJlmOMZudifOMPBoJuK6JcTaLATIOGRPkclfosNUALnLQ==}
+    hasBin: true
+    dependencies:
+      fast-deep-equal: 2.0.1
+      levenshtein-edit-distance: 2.0.5
+      really-small-events: 1.1.0
+      snap-db: 1.1.6
+    optionalDependencies:
+      chalk: 2.4.2
+      chokidar: 3.6.0
+      command-line-args: 5.2.1
+    dev: false
+
   /@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1:
     resolution: {integrity: sha512-54/JRvkLIzzDWshCWfuhadfrfZVPiElY8Fcgmg1HroEly/EDSszzhBAsarCux+D/kOslTRquNzuyGSmUSTTHGg==}
     dependencies:
@@ -3624,6 +3641,13 @@ packages:
       dequal: 2.0.3
     dev: false
 
+  /array-back@3.1.0:
+    resolution: {integrity: sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==}
+    engines: {node: '>=6'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /array-buffer-byte-length@1.0.1:
     resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
     engines: {node: '>= 0.4'}
@@ -3985,6 +4009,7 @@ packages:
   /binary-extensions@2.2.0:
     resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
     engines: {node: '>=8'}
+    requiresBuild: true
     dev: false
 
   /bluebird@3.7.2:
@@ -4285,6 +4310,18 @@ packages:
       delayed-stream: 1.0.0
     dev: false
 
+  /command-line-args@5.2.1:
+    resolution: {integrity: sha512-H4UfQhZyakIjC74I9d34fGYDwk3XpSr17QhEd0Q3I9Xq1CETHo4Hcuo87WyWHpAF1aSLjLRf5lD9ZGX2qStUvg==}
+    engines: {node: '>=4.0.0'}
+    requiresBuild: true
+    dependencies:
+      array-back: 3.1.0
+      find-replace: 3.0.0
+      lodash.camelcase: 4.3.0
+      typical: 4.0.0
+    dev: false
+    optional: true
+
   /commander@2.20.3:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: false
@@ -5673,6 +5710,10 @@ packages:
       - supports-color
     dev: false
 
+  /fast-deep-equal@2.0.1:
+    resolution: {integrity: sha512-bCK/2Z4zLidyB4ReuIsvALH6w31YfAQDmXMqMx6FyfHqvBxtjC0eRumeSu4Bs3XtXwpyIywtSTrVT99BxY1f9w==}
+    dev: false
+
   /fast-deep-equal@3.1.3:
     resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==}
     dev: false
@@ -5775,6 +5816,15 @@ packages:
       pkg-dir: 4.2.0
     dev: false
 
+  /find-replace@3.0.0:
+    resolution: {integrity: sha512-6Tb2myMioCAgv5kfvP5/PkZZ/ntTpVK39fHY7WkWBgvbeE+VHd/tZuZ4mrC+bxh4cfOZeYKVPaJIZtZXV7GNCQ==}
+    engines: {node: '>=4.0.0'}
+    requiresBuild: true
+    dependencies:
+      array-back: 3.1.0
+    dev: false
+    optional: true
+
   /find-root@1.1.0:
     resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
     dev: false
@@ -6472,6 +6522,7 @@ packages:
   /is-binary-path@2.1.0:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
+    requiresBuild: true
     dependencies:
       binary-extensions: 2.2.0
     dev: false
@@ -7559,6 +7610,11 @@ packages:
     engines: {node: '>=6'}
     dev: false
 
+  /levenshtein-edit-distance@2.0.5:
+    resolution: {integrity: sha512-Yuraz7QnMX/JENJU1HA6UtdsbhRzoSFnGpVGVryjQgHtl2s/YmVgmNYkVs5yzVZ9aAvQR9wPBUH3lG755ylxGA==}
+    hasBin: true
+    dev: false
+
   /levn@0.3.0:
     resolution: {integrity: sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==}
     engines: {node: '>= 0.8.0'}
@@ -7630,6 +7686,12 @@ packages:
       p-locate: 5.0.0
     dev: false
 
+  /lodash.camelcase@4.3.0:
+    resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /lodash.debounce@4.0.8:
     resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==}
     dev: false
@@ -9447,10 +9509,15 @@ packages:
   /readdirp@3.6.0:
     resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
     engines: {node: '>=8.10.0'}
+    requiresBuild: true
     dependencies:
       picomatch: 2.3.1
     dev: false
 
+  /really-small-events@1.1.0:
+    resolution: {integrity: sha512-iyh4pULyDYBMecekEYcP3ToJD3ZUdIPfZV9nx1C1lJfMguElkDAZvEMJegy8uE7eIROCuLsqh5r44fVro9nKFg==}
+    dev: false
+
   /recursive-readdir@2.2.3:
     resolution: {integrity: sha512-8HrF5ZsXk5FAH9dgsx3BlUer73nIhuj+9OrQwEbLTPOBzGkL1lsFCR01am+v+0m2Cmbs1nP12hLDl5FA7EszKA==}
     engines: {node: '>=6.0.0'}
@@ -9962,6 +10029,10 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /snap-db@1.1.6:
+    resolution: {integrity: sha512-KxsO5RnY70J48f6poy0qVm2WS8ZbqG0PUVP2fjd7dvlaCMZ/DxtDv5fhhIVwkP2lOmNQ9QsTFfDuCA7N+TF3qg==}
+    dev: false
+
   /sockjs@0.3.24:
     resolution: {integrity: sha512-GJgLTZ7vYb/JtPSSZ10hsOYIvEYsjbNU+zPdIHcUaWVNUEPivzxku31865sSSud0Da0W4lEeOPlmw93zLQchuQ==}
     dependencies:
@@ -10667,6 +10738,13 @@ packages:
     hasBin: true
     dev: false
 
+  /typical@4.0.0:
+    resolution: {integrity: sha512-VAH4IvQ7BDFYglMd7BPRDfLgxZZX4O4TFcRDA6EN5X7erNJJq+McIEp8np9aVtxrCJ6qx4GTYVfOWNjcqwZgRw==}
+    engines: {node: '>=8'}
+    requiresBuild: true
+    dev: false
+    optional: true
+
   /unbox-primitive@1.0.2:
     resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==}
     dependencies:

src/components/LibraryItem.tsx

@@ -0,0 +1,27 @@
+import { Composable } from "./IComposable";
+import { LibraryItem as LibItem } from "../lib/prompt";
+import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
+import { Button } from "@material-ui/core";
+
+export interface StyleProps {
+    item: LibItem
+    onAddItem: (item: LibItem) => void;
+}
+
+export function LibraryItem(props: StyleProps) {
+    const { item, onAddItem } = props
+    return (
+        <div>
+            <Button onClick={() => onAddItem(item)}>
+                <AddCircleOutlineOutlinedIcon/>
+            </Button>
+            <span>
+                {
+                    item.name ? (
+                        <div className={`catetory-${item.category}`}>{item.name} - {item.prompt}</div>
+                    ) : (<div>{item.prompt}</div>)
+                }
+            </span>
+        </div>
+    ) as Composable;
+};

src/components/Nugget.tsx

@@ -2,6 +2,7 @@ import { Button, ButtonGroup, Chip, Divider } from '@material-ui/core';
 import React, { Component, useState } from 'react';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowUp';
+import {Composable} from "./IComposable"
 
 import "./Nugget.css";
 
@@ -23,5 +24,5 @@ export default function Nugget({ text, initialScore }: { text: string, initialSc
             </ButtonGroup>
             </span>
         </div>
-    );
+    ) as Composable;
 }

src/components/Operation.tsx

@@ -3,16 +3,17 @@ import React, { Children, ReactNode } from 'react';
 import "./Operation.css";
 import { Op } from "../lib/operator";
 import { randomUUID } from "crypto";
+import { Composable } from "./IComposable";
 
 
-function Operation({ children, initialOp }: { children: ReactNode[], initialOp: Op}) {
+function Operation({ children, initialOp }: { children: ReactNode[], initialOp: Op }) {
   const [op, setOp] = React.useState(initialOp);
   const [contextMenu, setContextMenu] = React.useState<{
     mouseX: number;
     mouseY: number;
   } | null>(null);
 
-      const [id, ] = React.useState(randomUUID);
+  const [id,] = React.useState(randomUUID);
 
   const handleContextMenu = (event: React.MouseEvent) => {
     event.preventDefault();
@@ -33,7 +34,7 @@ function Operation({ children, initialOp }: { children: ReactNode[], initialOp:
     setContextMenu(null);
   };
 
-      const changeOperator = (opV : string) => {
+  const changeOperator = (opV: string) => {
     setOp(opV as unknown as Op);
     handleClose();
   }
@@ -65,7 +66,7 @@ function Operation({ children, initialOp }: { children: ReactNode[], initialOp:
         })}
       </Menu>
     </div>
-);
+  ) as Composable;
 }
 
 export { Operation, Op };

src/components/PromptArea.tsx

@@ -18,9 +18,13 @@ export default function PromptArea({ children }: { children?: any }) {
 
   const handleClose = (value: string) => {
     setOpen(false);
-    setSelectedValue(value);
+    // setSelectedValue(value);
   };
 
+  const handleComposableClicked = (composable : Composable) => {
+    setSelectedComposable(composable);
+  }
+
     return (
         <div>
             <Button className="add-button">

src/components/PromptLibrary.tsx

@@ -1,42 +1,36 @@
-import { Dialog, DialogTitle, List, ListItem, ListItemAvatar, Avatar, ListItemText } from "@material-ui/core";
-import { blue } from "@material-ui/core/colors";
-import ListItemButton from "@mui/material/ListItemButton";
-
-export type Category = {
-    id: string,
-    label: string,
-    color?: string,
-}
-
-const categories = [
-    { id: "style", label: "Styles", color: "blue" },
-    { id: "subject", label: "Subjects", color: "black" },
-    { id: "vibes", label: "Vibes", color: "gold" },
-    { id: "mediums", label: "Mediums", color: "black" },
-] as Category[];
+import { Dialog, DialogTitle } from "@material-ui/core";
+import { Composable } from "./IComposable";
+import { Library as PromptLibraryType, LibraryItem as LibItemType } from "../lib/prompt";
+import { LibraryItem } from "./LibraryItem";
 
 export interface SimpleDialogProps {
     open: boolean;
-    selectedValue: string;
-    onClose: (value: string) => void;
+    onClose: (composable: Composable) => void,
+    library: PromptLibraryType,
+    onAddItem : (item : LibItemType) => void,
 }
 
 export function PromptLibrary(props: SimpleDialogProps) {
-    const { onClose, selectedValue, open } = props;
+    const { onClose, library, open, onAddItem } = props;
 
     const handleClose = () => {
-        onClose(selectedValue);
+        // onClose(selectedValue);
     };
 
-    const handleNuggetClick = (value: string) => {
-        onClose(value);
+    const handleNuggetClick = (composable : Composable) => {
+        onClose(composable);
     };
 
+    const handleOnAddItem = (item : LibItemType) => {
+    }
+
     return (
         <Dialog onClose={handleClose} open={open}>
             <DialogTitle>Prompt Library</DialogTitle>
             <div>
-                Prompt Library
+                {
+                    library.map(item => <LibraryItem item={item} onAddItem={handleOnAddItem} />)
+                }
             </div>
         </Dialog>
     );

src/lib/prompt.ts

@@ -0,0 +1,113 @@
+import { nSQL } from "@nano-sql/core";
+import { Op } from "./operator";
+import { RocksDB } from "@nano-sql/adapter-rocksdb";
+import tables from "./schema.json";
+import { uuid } from "@nano-sql/core/lib/utilities";
+
+type Id = string;
+
+type IdAble = {
+    id: Id,
+}
+
+export enum Category {
+    subject = "subject",
+    style = "style",
+    vibes = "vibes",
+    medium = "medium",
+}
+
+export type LibraryItem = {
+    id: Id,
+    name?: string,
+    prompt: string,
+    category: Category,
+}
+
+export type Library = Array<LibraryItem>;
+
+export type Nugget = IdAble & {
+    item: LibraryItem,
+    score: number,
+}
+
+export type Operation = IdAble & {
+    op: Op,
+    items: Array<Nugget>
+}
+
+export type PromptItem = Operation | Nugget
+
+export type PromptArea = Array<PromptItem>;
+
+export async function getDb() {
+    return new Promise((resolve, reject) => {
+        // typical setup
+        nSQL().createDatabase({
+            id: "my_db", // can be anything that's a string
+            mode: new RocksDB(),
+            tables: [
+                {
+                    "name": "library_item",
+                    "model": {
+                        "id:uuid": { "pk": true },
+                        "name:string": {},
+                        "prompt:string": { notNull: true },
+                        "category:string": { notNull: true, }
+                    }
+                },
+                {
+                    "name": "nugget",
+                    "model": {
+                        "id:uuid": { "pk": true },
+                        "library_item:uuid": {},
+                        "score:number": {}
+                    }
+                },
+                {
+                    "name": "operation",
+                    "model": {
+                        "id:uuid": { pk: true },
+                        "op:string": {},
+                        "items:array": {}
+                    }
+                },
+                {
+                    "name": "library",
+                    "model": {
+                        "item:uuid": {},
+                    }
+                },
+                {
+                    "name": "prompt_area",
+                    "model": {
+                        "type:string": {notNull: true},
+                        "item:obj": {notNull: true},
+                    }
+                }
+            ],
+            version: 1, // current schema/database version
+            onVersionUpdate: (prevVersion) => { // migrate versions
+                return new Promise((res, rej) => {
+                    switch (prevVersion) {
+                        case 1:
+                            // migrate v1 to v2
+                            res(2);
+                            break;
+                        case 2:
+                            // migrate v2 to v3
+                            res(3);
+                            break;
+                    }
+
+                });
+
+            }
+        }).then((db) => {
+            resolve(db)
+        }).catch((err) => {
+            reject(err);
+        })
+    });
+
+}

src/lib/schema.json

@@ -0,0 +1,27 @@
+[
+    {
+        "name": "library_item",
+        "model": {
+            "id:uuid": {"pk": true},
+            "name:string": {},
+            "prompt:string": {},
+            "type:string": {}
+        }
+    },
+    {
+        "name": "nugget",
+        "model": {
+            "id:uuid": {"pk": true},
+            "library_item:uuid": {},
+            "score:number": {}
+        }
+    },
+    {
+        "name": "operation",
+        "model": {
+            "id:uuid": {"pk": true},
+            "op:string": {},
+            "items:array": {}
+        }
+    }
+]