I need an ast.

src/components/IComposable.tsx

@@ -0,0 +1,5 @@
+import { Component, ReactComponentElement, ReactInstance, ReactNode } from "react";
+
+export type Composable =  {
+
+} & ReactNode

src/components/Nugget.css

@@ -0,0 +1,13 @@
+.nugget {
+    border: 1px solid slategray;
+    border-radius: 10pt;
+    display: inline-flex;
+    margin: 10pt;
+}
+
+.nugget > .text, .nugget > .score, .nugget.buttons {
+    display: flex;
+    padding: 4pt;
+    margin-top: 10pt;
+    vertical-align: text-bottom;
+}

src/components/Nugget.tsx

@@ -0,0 +1,27 @@
+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 "./Nugget.css";
+
+export default function Nugget({ text, initialScore }: { text: string, initialScore?: number }) {
+    const [score, setScore] = useState(initialScore || 0);
+    return (
+        <div className='nugget'>
+            <span className='text'>{text}</span>
+            <Divider orientation="vertical" variant="middle" flexItem />
+            <span className='score'>{score > 0 ? "+" + score : score}</span>
+            <span className='buttons'>
+            <ButtonGroup size="small" orientation='vertical'>
+                <Button onClick={() => setScore(score + 1)}>
+                    <KeyboardArrowUpIcon />
+                </Button>
+                <Button onClick={() => setScore(score - 1)}>
+                    <KeyboardArrowDownIcon />
+                </Button>
+            </ButtonGroup>
+            </span>
+        </div>
+    );
+}

src/components/Operation.css

@@ -0,0 +1,16 @@
+.operation {
+    display: inline-block;
+}
+
+.operation .title {
+    padding: 4pt;
+    margin: 4pt;
+    text-align: left;
+}
+
+.operation .nuggets {
+    display: inline-flex;
+    background-color: #ffdddd;
+    border: 1px solid coral;
+    border-radius: 10pt;
+}

src/components/Operation.tsx

@@ -0,0 +1,77 @@
+import { Badge, Chip, Menu, MenuItem } from "@material-ui/core";
+import Nugget from "./Nugget";
+import React, { Children, Component, ReactNode, ReactPropTypes } from 'react';
+import { Composable } from "./IComposable";
+import "./Operation.css";
+
+enum Op {
+    JOINED = "joined",
+    AND = "and",
+    SWAPPED = "swaped",
+    SWAP = "swap",
+    BLENDED = "blended",
+    BLEND = "blend",
+}
+
+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 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 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>
+);
+}
+
+export { Operation, Op };

src/components/PromptArea.tsx

@@ -0,0 +1,21 @@
+import { Button, ButtonGroup, Chip } from '@material-ui/core';
+import React, { Children, Component, ReactNode } from 'react';
+import Nugget from './Nugget';
+import { Operation } from './Operation';
+// import { Composable } from './IComposable';
+
+type Composable = (typeof Nugget) | (typeof Operation);
+
+export default function PromptArea({ children }: { children?: any }) {
+    return (
+        <div>
+            {
+                Children.map(children, child => {
+                    return (<div>
+                        {child as ReactNode}
+                    </div>)
+                })
+            }
+        </div>
+    );
+}