settled on typings. Now working on ui interaction flow.

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,69 +3,70 @@ 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}) {
-    const [op, setOp] = React.useState(initialOp);
-    const [contextMenu, setContextMenu] = React.useState<{
-        mouseX: number;
-        mouseY: number;
-      } | null>(null);
+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();
-        setContextMenu(
-          contextMenu === null
-            ? {
-                mouseX: event.clientX + 2,
-                mouseY: event.clientY - 6,
-              }
-            : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
-              // Other native context menus might behave different.
-              // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
-              null,
-        );
-      };
-    
-      const handleClose = () => {
-        setContextMenu(null);
-      };
+  const handleContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault();
+    setContextMenu(
+      contextMenu === null
+        ? {
+          mouseX: event.clientX + 2,
+          mouseY: event.clientY - 6,
+        }
+        : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu
+        // Other native context menus might behave different.
+        // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus.
+        null,
+    );
+  };
 
-      const changeOperator = (opV : string) => {
-        setOp(opV as unknown as Op);
-        handleClose();
-      }
+  const handleClose = () => {
+    setContextMenu(null);
+  };
 
-    return (
-        <div className="operation" onContextMenu={handleContextMenu}>
-            <div className="title">{op}</div>
-            <div className="nuggets">
-                {Children.map(children, child => {
-                    return (<div>
-                        {child}
-                    </div>)
-                })}
-            </div>
-            <Menu
-            open={contextMenu !== null}
-            onClose={handleClose}
-            anchorReference="anchorPosition"
-            anchorPosition={
-            contextMenu !== null
-                ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
-                : undefined
-            }
-        >
-            {Object.values(Op).map((v) => {
-                return (
-                    <MenuItem onClick={() => changeOperator(v)}>{v}</MenuItem>
-                )
-            })}
-        </Menu>
-        </div>
-);
+  const changeOperator = (opV: string) => {
+    setOp(opV as unknown as Op);
+    handleClose();
+  }
+
+  return (
+    <div className="operation" onContextMenu={handleContextMenu}>
+      <div className="title">{op}</div>
+      <div className="nuggets">
+        {Children.map(children, child => {
+          return (<div>
+            {child}
+          </div>)
+        })}
+      </div>
+      <Menu
+        open={contextMenu !== null}
+        onClose={handleClose}
+        anchorReference="anchorPosition"
+        anchorPosition={
+          contextMenu !== null
+            ? { top: contextMenu.mouseY, left: contextMenu.mouseX }
+            : undefined
+        }
+      >
+        {Object.values(Op).map((v) => {
+          return (
+            <MenuItem onClick={() => changeOperator(v)}>{v}</MenuItem>
+          )
+        })}
+      </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>
     );