solve library insert issue. also added mute functionality. now working on draggable.

src/components/Nugget.tsx

@@ -2,12 +2,13 @@ import { Button, ButtonGroup, Chip, Divider } from '@material-ui/core';
 import React, { Component, DragEvent, useEffect, useState } from 'react';
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowUp';
-import { $composition, Nugget as NuggetType, decreaseNuggetScore, increaseNuggetScore } from '../lib/prompt';
+import { $composition, Nugget as NuggetType, decreaseNuggetScore, increaseNuggetScore, togglePromptItemMute } from '../lib/prompt';
 import "./Nugget.css";
 import "./PromptItem.css"
 import { $sourceItem, cancelDrop, completeDrop, isPromptItemDropTarget, startDrag, startHoverOver } from '../store/prompt-dnd';
 import { PromptItemProps } from './PromptItem';
 import { useStore } from '@nanostores/react';
+import { VolumeMute, VolumeOff, VolumeUp } from '@mui/icons-material';
 
 export interface NuggetProps extends PromptItemProps {
     nugget: NuggetType,
@@ -28,7 +29,13 @@ export default function Nugget(props: NuggetProps) {
     const composition = useStore($composition)
     const thisId = `prompt-item-${nugget.id}`
 
-    const className = isTopLevel ? 'nugget toplevel prompt-item' : 'nugget child prompt-item';
+    const className = [...(nugget.muted === true ? ["muted"] : []), ...[
+        isTopLevel ? "toplevel" : "child",
+        "nugget",
+        "prompt-item",
+    ]].join(" ");
+
+    console.log("nugget classname: %s", className);
 
     const handleOnDragStart = () => {
         onDragStart ? onDragStart(nugget) : null;
@@ -89,6 +96,13 @@ export default function Nugget(props: NuggetProps) {
                     </Button>
                 </ButtonGroup>
             </span>
+            {isTopLevel &&
+                <span className='hide'>
+                    <Button onClick={() => togglePromptItemMute(nugget.id)}>
+                        {nugget.muted ?  <VolumeUp /> : <VolumeOff /> }
+                    </Button>
+                </span>
+            }
         </div>
     );
 }

src/components/Operation.tsx

@@ -1,13 +1,14 @@
-import { Menu, MenuItem } from "@material-ui/core";
+import { Button, Menu, MenuItem } from "@material-ui/core";
 import React, { Children, DragEvent, ReactNode, useEffect } from 'react';
 import "./Operation.css";
 import { Op } from "../lib/operator";
 import { v4 as randomUUID } from "uuid";
-import { $composition, Operation as OperationType, changeOperationOp } from "../lib/prompt";
+import { $composition, Operation as OperationType, changeOperationOp, togglePromptItemMute } from "../lib/prompt";
 import Nugget from "./Nugget";
 import { PromptItemProps } from "./PromptItem";
 import { useStore } from "@nanostores/react";
 import { $sourceItem, cancelDrop, completeDrop, startHoverOver } from "../store/prompt-dnd";
+import { VolumeUp, VolumeOff } from "@mui/icons-material";
 
 interface OperationProps extends PromptItemProps {
   operation: OperationType
@@ -84,6 +85,16 @@ function Operation(props: OperationProps) {
     handleClose();
   }
 
+
+  const className = [...(operation.muted === true ? ["muted"] : []), ...[
+    "operation",
+    operation.op,
+    "prompt-item",
+  ]].join(" ");
+
+  console.log("operation classname: %s", className);
+
+
   return (
     <div
       draggable
@@ -92,7 +103,7 @@ function Operation(props: OperationProps) {
       onDragOver={handleOnDragOver}
       onMouseEnter={handleOnMouseEnter}
       onMouseOut={handleOnMouseLeave}
-      className={`operation ${operation.op} prompt-item`}
+      className={className}
       onContextMenu={handleContextMenu}
       data-promptitem-id={operation.id}
     >
@@ -104,6 +115,11 @@ function Operation(props: OperationProps) {
           })
         }
       </div>
+      <span className='hide'>
+        <Button onClick={() => togglePromptItemMute(operation.id)}>
+          {operation.muted ? <VolumeUp /> : <VolumeOff />}
+        </Button>
+      </span>
       <Menu
         open={contextMenu !== null}
         onClose={handleClose}

src/components/PromptComposer.tsx

@@ -18,7 +18,7 @@ export interface PromptComposerProps {
 }
 
 export default function PromptComposer(props: PromptComposerProps) {
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
 
   const handleClickOpen = () => {
     setOpen(true);
@@ -28,20 +28,15 @@ export default function PromptComposer(props: PromptComposerProps) {
     setOpen(false);
   };
 
-  const handleOnInsertItem = (item: LibraryItem) => {
-    insertIntoComposition(item);
-  }
+  const composition = useStore($composition);
 
-  
-  // const composition = useStore($composition);
-  const [composition, setComposition] = useState($composition.get())
-  useEffect(() => {
-    $composition.subscribe((comp) => {
-      console.log("composition changed!");
-      setComposition(comp as Composition);
-    });
-    console.log("subscribe -- composition")
-  })
+  // const [composition, setComposition] = useState(compStore);
+
+  const handleOnInsertItem = (item: LibraryItem) => {
+    console.log("INSERT %x INTO %s", item, composition)
+    insertIntoComposition(item);
+    console.log(composition)
+  }
 
   /**
    * 

src/components/PromptItem.css

@@ -4,4 +4,8 @@
 
 .prompt-item .drag-target-hover {
     border: 1px solid blue;
+}
+
+.prompt-item.muted, .operation.muted .nugget {
+    color: gray;
 }

src/components/PromptLibrary.tsx

@@ -47,7 +47,7 @@ export function PromptLibrary(props: SimpleDialogProps) {
                     $e.stopPropagation();
                     const libItem = library.find(l => l.id === params.id) as LibItemType;
                     console.log("Inserting %o into composition", libItem);
-                    libItem ?? onInsertItem(libItem);
+                    if (libItem) onInsertItem(libItem);
                 }
                 return (
                     <Button onClick={handleClick}>
@@ -69,7 +69,14 @@ export function PromptLibrary(props: SimpleDialogProps) {
     }));
 
     return (
-        <Dialog className="prompt-library-dialog" onClose={handleClose} open={open}>
+        <Dialog
+            hideBackdrop
+            disableEnforceFocus
+            style={{ position: "initial", top: "30%", left: "30%", height: "fit-content", width: "fit-content" }}
+            className="prompt-library-dialog"
+            onClose={handleClose}
+            open={open}
+        >
             <DialogTitle>Prompt Library</DialogTitle>
             <div>
                 <DataGrid rows={rows} columns={columns} />