@dxos/react-ui-canvas-compute 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/dist/lib/browser/index.mjs

@@ -305,33 +305,33 @@ var nodeFactory = {
   [NODE_INPUT]: () => createNode(NODE_INPUT),
   [NODE_OUTPUT]: () => createNode(NODE_OUTPUT),
   // Extensions.
-  ["text-to-image"]: () => createNode("text-to-image"),
-  ["and"]: () => createNode("and"),
-  ["append"]: () => createNode("append"),
-  ["audio"]: () => createNode("audio"),
-  ["beacon"]: () => createNode("beacon"),
-  ["chat"]: () => createNode("chat"),
-  ["constant"]: (shape) => createNode("constant", {
+  "text-to-image": () => createNode("text-to-image"),
+  and: () => createNode("and"),
+  append: () => createNode("append"),
+  audio: () => createNode("audio"),
+  beacon: () => createNode("beacon"),
+  chat: () => createNode("chat"),
+  constant: (shape) => createNode("constant", {
     value: shape.value
   }),
-  ["make-queue"]: () => createNode("make-queue"),
-  ["database"]: () => createNode("database"),
-  ["gpt"]: () => createNode("gpt"),
-  ["gpt-realtime"]: () => createNode("gpt-realtime"),
-  ["if"]: () => createNode("if"),
-  ["if-else"]: () => createNode("if-else"),
-  ["function"]: () => createNode("function"),
-  ["json"]: () => createNode("json"),
-  ["json-transform"]: () => createNode("json-transform"),
-  ["not"]: () => createNode("not"),
-  ["or"]: () => createNode("or"),
-  ["queue"]: () => createNode("queue"),
-  ["rng"]: () => createNode("rng"),
-  ["reducer"]: () => createNode("reducer"),
-  ["scope"]: () => createNode("scope"),
-  ["surface"]: () => createNode("surface"),
-  ["switch"]: () => createNode("switch"),
-  ["template"]: (shape) => {
+  "make-queue": () => createNode("make-queue"),
+  database: () => createNode("database"),
+  gpt: () => createNode("gpt"),
+  "gpt-realtime": () => createNode("gpt-realtime"),
+  if: () => createNode("if"),
+  "if-else": () => createNode("if-else"),
+  function: () => createNode("function"),
+  json: () => createNode("json"),
+  "json-transform": () => createNode("json-transform"),
+  not: () => createNode("not"),
+  or: () => createNode("or"),
+  queue: () => createNode("queue"),
+  rng: () => createNode("rng"),
+  reducer: () => createNode("reducer"),
+  scope: () => createNode("scope"),
+  surface: () => createNode("surface"),
+  switch: () => createNode("switch"),
+  template: (shape) => {
     const node = createNode("template", {
       valueType: shape.valueType,
       value: shape.text
@@ -339,9 +339,9 @@ var nodeFactory = {
     node.inputSchema = JsonSchema.toJsonSchema(getTemplateInputSchema(node));
     return node;
   },
-  ["text"]: () => createNode("text"),
-  ["thread"]: () => createNode("thread"),
-  ["trigger"]: () => createNode(NODE_INPUT)
+  text: () => createNode("text"),
+  thread: () => createNode("thread"),
+  trigger: () => createNode(NODE_INPUT)
 };
 var createNode = (type, props) => ({
   id: Obj2.ID.random(),
@@ -463,7 +463,7 @@ var ComputeGraphController = class extends Resource {
       } catch (err) {
         log.catch(err, void 0, {
           F: __dxlog_file4,
-          L: 229,
+          L: 230,
           S: this,
           C: (f, a) => f(...a)
         });
@@ -556,7 +556,7 @@ var ComputeGraphController = class extends Resource {
       event
     }, {
       F: __dxlog_file4,
-      L: 376,
+      L: 377,
       S: this,
       C: (f, a) => f(...a)
     });
@@ -644,7 +644,7 @@ var footerHeight = 32;
 var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, status, open, onAction }, forwardedRef) => {
   invariant4(shape.type, void 0, {
     F: __dxlog_file5,
-    L: 30,
+    L: 29,
     S: void 0,
     A: [
       "shape.type",
@@ -657,9 +657,9 @@ var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, stat
   const { debug } = useEditorContext();
   return /* @__PURE__ */ React.createElement("div", {
     ref: forwardedRef,
-    className: "flex flex-col bs-full is-full justify-between"
+    className: "flex flex-col h-full w-full justify-between"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex shrink-0 is-full justify-between items-center bs-[32px] bg-hoverSurface"
+    className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-input-surface"
   }, /* @__PURE__ */ React.createElement(Icon, {
     icon,
     classNames: "mx-2"
@@ -678,11 +678,11 @@ var Box = /* @__PURE__ */ forwardRef(({ children, classNames, shape, title, stat
       onAction?.("run");
     }
   })), /* @__PURE__ */ React.createElement("div", {
-    className: mx("flex flex-col bs-full grow overflow-hidden", classNames)
+    className: mx("flex flex-col h-full grow overflow-hidden", classNames)
   }, children), /* @__PURE__ */ React.createElement("div", {
-    className: "flex shrink-0 is-full justify-between items-center bs-[32px] bg-hoverSurface"
+    className: "flex shrink-0 w-full justify-between items-center h-[32px] bg-input-surface"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "grow pli-2 text-sm truncate"
+    className: "grow px-2 text-sm truncate"
   }, debug ? shape.id : status), openable && /* @__PURE__ */ React.createElement(IconButton, {
     classNames: "p-1",
     variant: "ghost",
@@ -785,7 +785,7 @@ var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchem
     className: "flex flex-col"
   }, inputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
     key: name2,
-    className: "pli-2 truncate text-sm font-mono items-center",
+    className: "px-2 truncate text-sm font-mono items-center",
     style: {
       height: rowHeight
     }
@@ -793,7 +793,7 @@ var FunctionBody = ({ shape, name, content, inputSchema = VoidInput, outputSchem
     className: "flex flex-col"
   }, outputs?.map(({ name: name2 }) => /* @__PURE__ */ React2.createElement("div", {
     key: name2,
-    className: "pli-2 truncate text-sm font-mono items-center text-right",
+    className: "px-2 truncate text-sm font-mono items-center text-right",
     style: {
       height: rowHeight
     }
@@ -829,7 +829,7 @@ var TypeSelect = ({ value, onValueChange }) => {
     onValueChange
   }, /* @__PURE__ */ React3.createElement(Select.TriggerButton, {
     variant: "ghost",
-    classNames: "is-full !pli-0"
+    classNames: "w-full px-0!"
   }), /* @__PURE__ */ React3.createElement(Select.Portal, null, /* @__PURE__ */ React3.createElement(Select.Content, null, /* @__PURE__ */ React3.createElement(Select.ScrollUpButton, null), /* @__PURE__ */ React3.createElement(Select.Viewport, null, ComputeValueType.literals.map((type) => /* @__PURE__ */ React3.createElement(Select.Option, {
     key: type,
     value: type
@@ -922,12 +922,12 @@ var AudioComponent = ({ shape }) => {
     active
   ]);
   return /* @__PURE__ */ React6.createElement("div", {
-    className: "flex is-full justify-center items-center"
+    className: "flex w-full justify-center items-center"
   }, /* @__PURE__ */ React6.createElement(Icon2, {
     icon: active ? "ph--microphone--regular" : "ph--microphone-slash--regular",
     classNames: [
       "transition opacity-20 duration-1000",
-      active && "opacity-100 text-red-500"
+      active && "opacity-100 text-error-text"
     ],
     size: 8,
     onClick: () => setActive(!active)
@@ -969,7 +969,7 @@ var BeaconComponent = ({ shape }) => {
   const input = runtime.inputs[DEFAULT_INPUT3];
   const value = input?.type === "executed" ? input.value : false;
   return /* @__PURE__ */ React7.createElement("div", {
-    className: "flex is-full justify-center items-center"
+    className: "flex w-full justify-center items-center"
   }, /* @__PURE__ */ React7.createElement(Icon3, {
     icon: "ph--sun--regular",
     classNames: [
@@ -1018,7 +1018,7 @@ var defineShape = ({ type, name, icon, symbol: Symbol, createShape: createShape2
   // Be careful not to name component factories with a capital letter.
   component: () => {
     return /* @__PURE__ */ React8.createElement("div", {
-      className: "flex is-full justify-center items-center"
+      className: "flex w-full justify-center items-center"
     }, /* @__PURE__ */ React8.createElement(Symbol, null));
   },
   createShape: createShape2,
@@ -1045,7 +1045,7 @@ var createSymbol = (pathConstructor, inputs) => ({
   });
   return /* @__PURE__ */ React8.createElement("svg", {
     viewBox: `0 0 ${width} ${height}`,
-    className: "is-full bs-full"
+    className: "w-full h-full"
   }, getAnchorPoints({
     x: 0,
     y: centerY
@@ -1435,6 +1435,7 @@ var functionShape = {
 import * as Schema12 from "effect/Schema";
 import React13, { useEffect as useEffect4, useState as useState6 } from "react";
 import { GptInput, GptOutput } from "@dxos/conductor";
+import { ScrollArea } from "@dxos/react-ui";
 var GptShape = Schema12.extend(ComputeShape, Schema12.Struct({
   type: Schema12.Literal("gpt")
 }));
@@ -1483,9 +1484,10 @@ var GptComponent = ({ shape }) => {
   ]);
   return /* @__PURE__ */ React13.createElement(FunctionBody, {
     shape,
-    content: /* @__PURE__ */ React13.createElement("div", {
-      className: "pli-2 plb-1 overflow-y-auto"
-    }, text),
+    content: /* @__PURE__ */ React13.createElement(ScrollArea.Root, {
+      orientation: "vertical",
+      thin: true
+    }, /* @__PURE__ */ React13.createElement(ScrollArea.Viewport, null, text)),
     status: `${tokens} tokens`,
     inputSchema: meta.input,
     outputSchema: meta.output
@@ -1634,6 +1636,7 @@ var ifElseShape = {
 import * as Schema15 from "effect/Schema";
 import React16, { Fragment } from "react";
 import { DEFAULT_OUTPUT as DEFAULT_OUTPUT4, QueueInput, QueueOutput } from "@dxos/conductor";
+import { ScrollArea as ScrollArea2 } from "@dxos/react-ui";
 import { mx as mx2 } from "@dxos/ui-theme";
 var QueueShape = Schema15.extend(ComputeShape, Schema15.Struct({
   type: Schema15.Literal("queue")
@@ -1658,15 +1661,17 @@ var QueueComponent = ({ shape }) => {
     shape,
     status: `${items.length} items`,
     onAction: handleAction
-  }, /* @__PURE__ */ React16.createElement("div", {
-    className: "flex flex-col is-full overflow-y-auto divide-y divide-separator"
+  }, /* @__PURE__ */ React16.createElement(ScrollArea2.Root, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React16.createElement(ScrollArea2.Viewport, {
+    classNames: "divide-y divide-separator"
   }, [
     ...items
   ].map((item, i) => /* @__PURE__ */ React16.createElement(QueueItem, {
     key: i,
-    classNames: "p-1 pli-2",
+    classNames: "p-1 px-2",
     item
-  }))));
+  })))));
 };
 var QueueItem = ({ classNames, item }) => {
   if (typeof item !== "object") {
@@ -1675,7 +1680,7 @@ var QueueItem = ({ classNames, item }) => {
     }, item);
   }
   return /* @__PURE__ */ React16.createElement("div", {
-    className: mx2("grid grid-cols-[80px,1fr]", classNames)
+    className: mx2("grid grid-cols-[80px_1fr]", classNames)
   }, Object.entries(item).map(([key, value]) => /* @__PURE__ */ React16.createElement(Fragment, {
     key
   }, /* @__PURE__ */ React16.createElement("div", {
@@ -1791,7 +1796,7 @@ var ScopeComponent = ({ shape }) => {
   const active = input?.type === "executed" ? input.value : false;
   const { getAverage } = useAudioStream(active);
   return /* @__PURE__ */ React18.createElement("div", {
-    className: "flex is-full justify-center items-center bg-black"
+    className: "flex w-full justify-center items-center bg-black"
   }, /* @__PURE__ */ React18.createElement(Chaos, {
     active,
     getValue: getAverage,
@@ -1818,8 +1823,9 @@ var scopeShape = {
 // src/shapes/Surface.tsx
 import * as Schema18 from "effect/Schema";
 import React19 from "react";
-import { Surface } from "@dxos/app-framework/react";
+import { Surface } from "@dxos/app-framework/ui";
 import { DEFAULT_INPUT as DEFAULT_INPUT6 } from "@dxos/conductor";
+import { Card } from "@dxos/react-ui";
 import { createAnchorMap as createAnchorMap9 } from "@dxos/react-ui-canvas-editor";
 var SurfaceShape = Schema18.extend(ComputeShape, Schema18.Struct({
   type: Schema18.Literal("surface")
@@ -1844,13 +1850,13 @@ var SurfaceComponent = ({ shape }) => {
   return /* @__PURE__ */ React19.createElement(Box, {
     shape,
     onAction: handleAction
-  }, value !== null && /* @__PURE__ */ React19.createElement(Surface, {
-    role: "card--extrinsic",
+  }, /* @__PURE__ */ React19.createElement(Card.Root, null, value !== null && /* @__PURE__ */ React19.createElement(Surface.Surface, {
+    role: "card--content",
     data: {
       value
     },
     limit: 1
-  }));
+  })));
 };
 var surfaceShape = {
   type: "surface",
@@ -1893,7 +1899,7 @@ var SwitchComponent = ({ shape }) => {
     value
   ]);
   return /* @__PURE__ */ React20.createElement("div", {
-    className: "flex is-full justify-center items-center",
+    className: "flex w-full justify-center items-center",
     onClick: (ev) => ev.stopPropagation()
   }, /* @__PURE__ */ React20.createElement(Input2.Root, null, /* @__PURE__ */ React20.createElement(Input2.Switch, {
     checked: value,
@@ -2072,6 +2078,7 @@ var textShape = {
 import * as Schema23 from "effect/Schema";
 import React24, { useEffect as useEffect7, useRef as useRef6 } from "react";
 import { createInputSchema as createInputSchema2, createOutputSchema as createOutputSchema2 } from "@dxos/conductor";
+import { ScrollArea as ScrollArea3 } from "@dxos/react-ui";
 import { Message as Message2 } from "@dxos/types";
 import { mx as mx3 } from "@dxos/ui-theme";
 var InputSchema2 = createInputSchema2(Message2.Message);
@@ -2099,19 +2106,22 @@ var ThreadComponent = ({ shape }) => {
   ]);
   return /* @__PURE__ */ React24.createElement(Box, {
     shape
-  }, /* @__PURE__ */ React24.createElement("div", {
-    ref: scrollRef,
-    className: "flex flex-col is-full overflow-y-auto gap-2 p-2"
+  }, /* @__PURE__ */ React24.createElement(ScrollArea3.Root, {
+    orientation: "vertical"
+  }, /* @__PURE__ */ React24.createElement(ScrollArea3.Viewport, {
+    classNames: "gap-2 p-2",
+    ref: scrollRef
   }, [
     ...items
   ].map((item, i) => /* @__PURE__ */ React24.createElement(ThreadItem, {
     key: i,
     item
-  }))));
+  })))));
 };
 var ThreadItem = ({ classNames, item }) => {
   if (typeof item !== "object") {
     return /* @__PURE__ */ React24.createElement("div", {
+      role: "none",
       className: mx3(classNames)
     }, item);
   }
@@ -2119,7 +2129,7 @@ var ThreadItem = ({ classNames, item }) => {
   return /* @__PURE__ */ React24.createElement("div", {
     className: mx3("flex", classNames, role === "user" && "justify-end")
   }, /* @__PURE__ */ React24.createElement("div", {
-    className: mx3("block rounded-md p-1 pli-2 text-sm", role === "user" ? "bg-blue-100 dark:bg-blue-800" : role === "system" ? "bg-red-100, dark:bg-red-800" : "whitespace-pre-wrap bg-neutral-50 dark:bg-neutral-800")
+    className: mx3("block rounded-md p-1 px-2 text-sm", role === "user" ? "bg-blue-100 dark:bg-blue-800" : role === "system" ? "bg-red-100, dark:bg-red-800" : "whitespace-pre-wrap bg-neutral-50 dark:bg-neutral-800")
   }, message));
 };
 var threadShape = {
@@ -2170,14 +2180,14 @@ var textToImageShape = {
 import * as Schema25 from "effect/Schema";
 import React26, { useEffect as useEffect8 } from "react";
 import { VoidInput as VoidInput3 } from "@dxos/conductor";
-import { Filter as Filter2, Obj as Obj4, Query, Ref as Ref3, Type } from "@dxos/echo";
+import { Filter as Filter2, Obj as Obj4, Query, Ref as Ref3 } from "@dxos/echo";
 import { Trigger, TriggerEvent } from "@dxos/functions";
 import { DXN, SpaceId } from "@dxos/keys";
 import { useSpace } from "@dxos/react-client/echo";
 import { Select as Select2 } from "@dxos/react-ui";
 var TriggerShape = Schema25.extend(ComputeShape, Schema25.Struct({
   type: Schema25.Literal("trigger"),
-  functionTrigger: Schema25.optional(Type.Ref(Trigger.Trigger))
+  functionTrigger: Schema25.optional(Ref3.Ref(Trigger.Trigger))
 }));
 var createTrigger = (props) => {
   const functionTrigger = Trigger.make({
@@ -2244,7 +2254,7 @@ var TriggerKindSelect = ({ value, onValueChange }) => {
     onValueChange
   }, /* @__PURE__ */ React26.createElement(Select2.TriggerButton, {
     variant: "ghost",
-    classNames: "is-full !pli-0"
+    classNames: "w-full px-0!"
   }), /* @__PURE__ */ React26.createElement(Select2.Portal, null, /* @__PURE__ */ React26.createElement(Select2.Content, null, /* @__PURE__ */ React26.createElement(Select2.ScrollUpButton, null), /* @__PURE__ */ React26.createElement(Select2.Viewport, null, Trigger.Kinds.map((kind) => /* @__PURE__ */ React26.createElement(Select2.Option, {
     key: kind,
     value: kind
@@ -2412,7 +2422,7 @@ var GptRealtimeComponent = ({ shape }) => {
     }
   };
   return /* @__PURE__ */ React27.createElement("div", {
-    className: "flex is-full justify-center items-center"
+    className: "flex w-full justify-center items-center"
   }, /* @__PURE__ */ React27.createElement(Icon5, {
     icon: isReady ? "ph--waveform--regular" : isLive ? "ph--pulse--regular" : "ph--play--regular",
     size: 16,