@dxos/plugin-script 0.8.4-main.3eb6e50203 → 0.8.4-main.4a85c3132b

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-script",
-  "version": "0.8.4-main.3eb6e50203",
+  "version": "0.8.4-main.4a85c3132b",
   "description": "Braneframe notebook plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -14,27 +14,27 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs",
-      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts"
     },
     "./blueprints": {
+      "source": "./src/blueprints/index.ts",
       "browser": "./dist/lib/browser/blueprints/index.mjs",
       "node": "./dist/lib/node-esm/blueprints/index.mjs",
-      "source": "./src/blueprints/index.ts",
       "types": "./dist/types/src/blueprints/index.d.ts"
     },
     "./templates": {
+      "source": "./src/templates/index.ts",
       "browser": "./dist/lib/browser/templates/index.mjs",
       "node": "./dist/lib/node-esm/templates/index.mjs",
-      "source": "./src/templates/index.ts",
       "types": "./dist/types/src/templates/index.d.ts"
     },
     "./types": {
+      "source": "./src/types/index.ts",
       "browser": "./dist/lib/browser/types/index.mjs",
       "node": "./dist/lib/node-esm/types/index.mjs",
-      "source": "./src/types/index.ts",
       "types": "./dist/types/src/types/index.d.ts"
     }
   },
@@ -68,7 +68,7 @@
     "@effect-atom/atom-react": "^0.5.0",
     "@lezer/common": "^1.2.2",
     "@lezer/highlight": "^1.2.1",
-    "@octokit/core": "^4.0.4",
+    "@octokit/core": "^7.0.6",
     "@typescript/vfs": "^1.6.0",
     "@valtown/codemirror-continue": "^2.3.1",
     "@valtown/codemirror-ts": "^2.3.1",
@@ -78,62 +78,62 @@
     "prettier": "^3.6.2",
     "react-syntax-highlighter": "^15.6.1",
     "typescript": "^5.9.3",
-    "@dxos/ai": "0.8.4-main.3eb6e50203",
-    "@dxos/app-framework": "0.8.4-main.3eb6e50203",
-    "@dxos/app-toolkit": "0.8.4-main.3eb6e50203",
-    "@dxos/assistant-toolkit": "0.8.4-main.3eb6e50203",
-    "@dxos/assistant": "0.8.4-main.3eb6e50203",
-    "@dxos/async": "0.8.4-main.3eb6e50203",
-    "@dxos/blueprints": "0.8.4-main.3eb6e50203",
-    "@dxos/client": "0.8.4-main.3eb6e50203",
-    "@dxos/client-protocol": "0.8.4-main.3eb6e50203",
-    "@dxos/compute": "0.8.4-main.3eb6e50203",
-    "@dxos/debug": "0.8.4-main.3eb6e50203",
-    "@dxos/config": "0.8.4-main.3eb6e50203",
-    "@dxos/devtools": "0.8.4-main.3eb6e50203",
-    "@dxos/echo-db": "0.8.4-main.3eb6e50203",
-    "@dxos/echo-protocol": "0.8.4-main.3eb6e50203",
-    "@dxos/echo": "0.8.4-main.3eb6e50203",
-    "@dxos/functions": "0.8.4-main.3eb6e50203",
-    "@dxos/echo-query": "0.8.4-main.3eb6e50203",
-    "@dxos/functions-runtime": "0.8.4-main.3eb6e50203",
-    "@dxos/effect": "0.8.4-main.3eb6e50203",
-    "@dxos/invariant": "0.8.4-main.3eb6e50203",
-    "@dxos/functions-simulator-cloudflare": "0.8.4-main.3eb6e50203",
-    "@dxos/log": "0.8.4-main.3eb6e50203",
-    "@dxos/keys": "0.8.4-main.3eb6e50203",
-    "@dxos/operation": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-assistant": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-automation": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-client": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-explorer": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-graph": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-deck": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-stack": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-markdown": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-theme": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-space": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-token-manager": "0.8.4-main.3eb6e50203",
-    "@dxos/react-client": "0.8.4-main.3eb6e50203",
-    "@dxos/protocols": "0.8.4-main.3eb6e50203",
-    "@dxos/react-edge-client": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-attention": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-components": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-editor": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-form": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-menu": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-list": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-mosaic": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-stack": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.3eb6e50203",
-    "@dxos/schema": "0.8.4-main.3eb6e50203",
-    "@dxos/rpc-tunnel": "0.8.4-main.3eb6e50203",
-    "@dxos/types": "0.8.4-main.3eb6e50203",
-    "@dxos/rpc": "0.8.4-main.3eb6e50203",
-    "@dxos/ui": "0.8.4-main.3eb6e50203",
-    "@dxos/util": "0.8.4-main.3eb6e50203",
-    "@dxos/vendor-quickjs": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-editor": "0.8.4-main.3eb6e50203"
+    "@dxos/app-framework": "0.8.4-main.4a85c3132b",
+    "@dxos/app-toolkit": "0.8.4-main.4a85c3132b",
+    "@dxos/assistant-toolkit": "0.8.4-main.4a85c3132b",
+    "@dxos/blueprints": "0.8.4-main.4a85c3132b",
+    "@dxos/ai": "0.8.4-main.4a85c3132b",
+    "@dxos/async": "0.8.4-main.4a85c3132b",
+    "@dxos/client": "0.8.4-main.4a85c3132b",
+    "@dxos/assistant": "0.8.4-main.4a85c3132b",
+    "@dxos/client-protocol": "0.8.4-main.4a85c3132b",
+    "@dxos/compute": "0.8.4-main.4a85c3132b",
+    "@dxos/config": "0.8.4-main.4a85c3132b",
+    "@dxos/debug": "0.8.4-main.4a85c3132b",
+    "@dxos/devtools": "0.8.4-main.4a85c3132b",
+    "@dxos/echo-db": "0.8.4-main.4a85c3132b",
+    "@dxos/effect": "0.8.4-main.4a85c3132b",
+    "@dxos/echo": "0.8.4-main.4a85c3132b",
+    "@dxos/echo-protocol": "0.8.4-main.4a85c3132b",
+    "@dxos/functions-runtime": "0.8.4-main.4a85c3132b",
+    "@dxos/functions-simulator-cloudflare": "0.8.4-main.4a85c3132b",
+    "@dxos/invariant": "0.8.4-main.4a85c3132b",
+    "@dxos/functions": "0.8.4-main.4a85c3132b",
+    "@dxos/keys": "0.8.4-main.4a85c3132b",
+    "@dxos/operation": "0.8.4-main.4a85c3132b",
+    "@dxos/log": "0.8.4-main.4a85c3132b",
+    "@dxos/echo-query": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-automation": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-assistant": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-client": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-explorer": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-deck": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-stack": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-graph": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-markdown": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-space": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-theme": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-token-manager": "0.8.4-main.4a85c3132b",
+    "@dxos/protocols": "0.8.4-main.4a85c3132b",
+    "@dxos/react-edge-client": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-components": "0.8.4-main.4a85c3132b",
+    "@dxos/react-client": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-attention": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-editor": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-form": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-list": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-mosaic": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-menu": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-stack": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.4a85c3132b",
+    "@dxos/rpc-tunnel": "0.8.4-main.4a85c3132b",
+    "@dxos/rpc": "0.8.4-main.4a85c3132b",
+    "@dxos/types": "0.8.4-main.4a85c3132b",
+    "@dxos/schema": "0.8.4-main.4a85c3132b",
+    "@dxos/ui": "0.8.4-main.4a85c3132b",
+    "@dxos/util": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-editor": "0.8.4-main.4a85c3132b",
+    "@dxos/vendor-quickjs": "0.8.4-main.4a85c3132b"
   },
   "devDependencies": {
     "@automerge/automerge": "3.2.3",
@@ -147,16 +147,16 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/config": "0.8.4-main.3eb6e50203",
-    "@dxos/echo-db": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-automation": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-testing": "0.8.4-main.3eb6e50203",
-    "@dxos/random": "0.8.4-main.3eb6e50203",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/plugin-chess": "0.8.4-main.3eb6e50203",
-    "@dxos/storybook-utils": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "vite": "^7.1.11",
+    "@dxos/config": "0.8.4-main.4a85c3132b",
+    "@dxos/echo-db": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-automation": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-chess": "0.8.4-main.4a85c3132b",
+    "@dxos/plugin-testing": "0.8.4-main.4a85c3132b",
+    "@dxos/random": "0.8.4-main.4a85c3132b",
+    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-theme": "0.8.4-main.4a85c3132b",
+    "@dxos/storybook-utils": "0.8.4-main.4a85c3132b"
   },
   "peerDependencies": {
     "@effect-atom/atom-react": "^0.5.0",
@@ -164,8 +164,8 @@
     "effect": "3.19.16",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.3eb6e50203",
-    "@dxos/ui-theme": "0.8.4-main.3eb6e50203"
+    "@dxos/react-ui": "0.8.4-main.4a85c3132b",
+    "@dxos/ui-theme": "0.8.4-main.4a85c3132b"
   },
   "publishConfig": {
     "access": "public"

package/src/blueprints/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * as ScriptBlueprint from './script-blueprint';
+export { default as ScriptBlueprint } from './script-blueprint';

package/src/blueprints/script-blueprint.ts

@@ -2,23 +2,30 @@
 // Copyright 2025 DXOS.org
 //
 
+import { type AppCapabilities } from '@dxos/app-toolkit';
 import { Blueprint, Template } from '@dxos/blueprints';
-import { type FunctionDefinition } from '@dxos/functions';
 import { trim } from '@dxos/util';
 
-export const functions: FunctionDefinition[] = [];
-export const tools: string[] = [];
+const BLUEPRINT_KEY = 'dxos.org/blueprint/script';
 
-export const Key = 'dxos.org/blueprint/script';
+const functions: AppCapabilities.BlueprintDefinition['functions'] = [];
 
-export const make = () =>
+const make = () =>
   Blueprint.make({
-    key: Key,
+    key: BLUEPRINT_KEY,
     name: 'Script',
-    tools: Blueprint.toolDefinitions({ functions, tools }),
+    tools: Blueprint.toolDefinitions({ functions, tools: [] }),
     instructions: Template.make({
       source: trim`
         You can create and update scripts which contain Typescript code.
       `,
     }),
   });
+
+const blueprint: AppCapabilities.BlueprintDefinition = {
+  key: BLUEPRINT_KEY,
+  functions,
+  make,
+};
+
+export default blueprint;

package/src/capabilities/blueprint-definition/blueprint-definition.ts

@@ -9,16 +9,9 @@ import { AppCapabilities } from '@dxos/app-toolkit';
 
 import { ScriptBlueprint } from '../../blueprints';
 
-export type BlueprintCapabilities = [
-  Capability.Capability<typeof AppCapabilities.Functions>,
-  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>,
-];
-
-const blueprintDefinition = Capability.makeModule<[], BlueprintCapabilities>(() =>
-  Effect.succeed([
-    Capability.contributes(AppCapabilities.Functions, ScriptBlueprint.functions),
-    Capability.contributes(AppCapabilities.BlueprintDefinition, ScriptBlueprint.make()),
-  ]),
-);
+const blueprintDefinition = Capability.makeModule<
+  [],
+  Capability.Capability<typeof AppCapabilities.BlueprintDefinition>[]
+>(() => Effect.succeed([Capability.contributes(AppCapabilities.BlueprintDefinition, ScriptBlueprint)]));
 
 export default blueprintDefinition;

package/src/capabilities/operation-resolver/operation-resolver.ts

@@ -12,7 +12,7 @@ import { Script } from '@dxos/functions';
 import { Operation, OperationResolver } from '@dxos/operation';
 import { TokenManagerOperation } from '@dxos/plugin-token-manager/types';
 
-import { DEPLOYMENT_DIALOG } from '../../components';
+import { DEPLOYMENT_DIALOG } from '../../constants';
 import { defaultScriptsForIntegration } from '../../meta';
 import { templates } from '../../templates';
 import { ScriptOperation } from '../../types';

package/src/capabilities/react-surface/react-surface.tsx

@@ -12,11 +12,11 @@ import { InvocationTraceContainer } from '@dxos/devtools';
 import { Obj } from '@dxos/echo';
 import { Script } from '@dxos/functions';
 import { getSpace } from '@dxos/react-client/echo';
-import { Layout } from '@dxos/react-ui';
+import { Panel } from '@dxos/react-ui';
 import { type AccessToken } from '@dxos/types';
 
+import { DEPLOYMENT_DIALOG } from '../../constants';
 import {
-  DEPLOYMENT_DIALOG,
   DeploymentDialog,
   NotebookContainer,
   ScriptContainer,
@@ -24,7 +24,7 @@ import {
   ScriptPluginSettings,
   ScriptProperties,
   TestContainer,
-} from '../../components';
+} from '../../containers';
 import { useCompiler } from '../../hooks';
 import { meta } from '../../meta';
 import { Notebook, ScriptCapabilities, type ScriptSettings } from '../../types';
@@ -96,14 +96,16 @@ export default Capability.makeModule(() =>
           const space = getSpace(data.companionTo);
           const queueDxn = space?.properties.invocationTraceQueue?.dxn;
           return (
-            <Layout.Main role={role}>
-              <InvocationTraceContainer
-                db={space?.db}
-                queueDxn={queueDxn}
-                target={data.companionTo}
-                detailAxis='block'
-              />
-            </Layout.Main>
+            <Panel.Root role={role}>
+              <Panel.Content asChild>
+                <InvocationTraceContainer
+                  db={space?.db}
+                  queueDxn={queueDxn}
+                  target={data.companionTo}
+                  detailAxis='block'
+                />
+              </Panel.Content>
+            </Panel.Root>
           );
         },
       }),

package/src/components/FrameContainer/FrameContainer.tsx

@@ -11,7 +11,7 @@ import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
 import { createProtoRpcPeer } from '@dxos/rpc';
 import { createIFramePort } from '@dxos/rpc-tunnel';
-import { baseSurface, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 export type FrameContainerProps = {
   containerUrl: string;
@@ -61,8 +61,7 @@ export const FrameContainer = ({ containerUrl, result, debug = true }: FrameCont
         <div className='relative'>
           <div
             className={mx(
-              baseSurface,
-              'flex absolute right-2 bottom-2 is-[30rem] bs-[200px] ring rounded',
+              'flex absolute right-2 bottom-2 w-[30rem] h-[200px] bg-base-surface ring rounded-sm',
               'z-20 overflow-x-hidden overflow-y-auto',
             )}
           >

package/src/components/FrameContainer/frame.html

@@ -1,25 +1,25 @@
 <html>
-<head>
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script type="importmap">
-    __IMPORT_MAP__
-  </script>
+  <head>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script type="importmap">
+      __IMPORT_MAP__
+    </script>
 
-  <script type="module">
-    import RefreshRuntime from '/@react-refresh';
-    RefreshRuntime.injectIntoGlobalHook(window);
-    window.$RefreshReg$ = () => {};
-    window.$RefreshSig$ = () => (type) => type;
-    window.__vite_plugin_react_preamble_installed__ = true;
-  </script>
-  <script type="module" src="/@vite/client"></script>
-</head>
-<body>
-  <div id="root"></div>
+    <script type="module">
+      import RefreshRuntime from '/@react-refresh';
+      RefreshRuntime.injectIntoGlobalHook(window);
+      window.$RefreshReg$ = () => {};
+      window.$RefreshSig$ = () => (type) => type;
+      window.__vite_plugin_react_preamble_installed__ = true;
+    </script>
+    <script type="module" src="/@vite/client"></script>
+  </head>
+  <body>
+    <div id="root"></div>
 
-  <!-- Prevent vite from compiling this. -->
-  <script type="module">
-    eval('import("@frame/main")');
-  </script>
-</body>
+    <!-- Prevent vite from compiling this. -->
+    <script type="module">
+      eval('import("@frame/main")');
+    </script>
+  </body>
 </html>

package/src/components/NotebookStack/NotebookCell.tsx

@@ -30,8 +30,8 @@ import { TypescriptEditor, type TypescriptEditorProps } from '../TypescriptEdito
 
 import { type NotebookMenuProps } from './NotebookMenu';
 
-const editorStyles = 'p-2 pis-3';
-const valueStyles = 'p-1 pis-3';
+const editorStyles = 'p-2 ps-3';
+const valueStyles = 'p-1 ps-3';
 
 export type NotebookCellProps = {
   db?: Database.Database;
@@ -114,12 +114,10 @@ export const NotebookCell = ({ db, graph, dragging, cell, promptResults, env }:
 
       // TODO(burdon): Remove app-framework deps (via render prop).
       return (
-        <div
-          className={mx('bs-full overflow-hidden grid', explorerGraph && !dragging && 'grid-rows-[min-content_1fr]')}
-        >
+        <div className={mx('h-full overflow-hidden grid', explorerGraph && !dragging && 'grid-rows-[min-content_1fr]')}>
           <QueryEditor
             id={cell.id}
-            classNames={[editorStyles, 'border-be border-subduedSeparator']}
+            classNames={[editorStyles, 'border-b border-subdued-separator']}
             db={db}
             value={cell.source.target.content}
             onChange={handleQueryChange}
@@ -161,13 +159,13 @@ const NotebookCellValue = ({ cell, graph }: NotebookCellProps) => {
   return (
     <div
       className={mx(
-        'flex is-full bg-groupSurface border-bs border-subduedSeparator text-description font-mono',
+        'flex w-full bg-group-surface border-y border-subdued-separator text-description font-mono',
         valueStyles,
       )}
     >
       {name && (
         <>
-          <span className='text-successText'>{name}</span>
+          <span className='text-success-text'>{name}</span>
           <span className='text-description'>&nbsp;=&nbsp;</span>
         </>
       )}
@@ -187,7 +185,7 @@ const NotebookPromptResult = ({ cell, promptResults }: NotebookCellProps) => {
   }
 
   return (
-    <div className={mx('flex is-full bg-groupSurface text-description border-bs border-subduedSeparator', valueStyles)}>
+    <div className={mx('flex w-full bg-group-surface text-description border-y border-subdued-separator', valueStyles)}>
       <NotebookTextEditor readOnly value={value} />
     </div>
   );

package/src/components/NotebookStack/NotebookStack.stories.tsx

@@ -17,18 +17,17 @@ import { translations } from '../../translations';
 
 import { NotebookStack } from './NotebookStack';
 
-// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
 const NotebookStackStory = () => {
   const notebook = useMemo(() => createNotebook(), []);
   return <NotebookStack notebook={notebook} />;
 };
 
 const meta = {
-  title: 'plugins/plugin-script/NotebookStack',
+  title: 'plugins/plugin-script/components/NotebookStack',
   component: NotebookStackStory,
   decorators: [
     withTheme(),
-    withLayout({ layout: 'column', classNames: 'is-proseMaxWidth' }),
+    withLayout({ layout: 'column', classNames: 'w-prose-max-width' }),
     withPluginManager({
       plugins: [
         ...corePlugins(),

package/src/components/NotebookStack/NotebookStack.tsx

@@ -14,7 +14,7 @@ import { type TypescriptEditorProps } from '../TypescriptEditor';
 import { NotebookCell, type NotebookCellProps } from './NotebookCell';
 import { NotebookMenu } from './NotebookMenu';
 
-const minSectionHeight = 'min-bs-[16rem]';
+const minSectionHeight = 'min-h-[16rem]';
 
 export type NotebookStackProps = ThemedClassName<
   {
@@ -51,7 +51,7 @@ const NotebookSection = ({
 
   return (
     <StackItem.Root role='section' item={cell} draggable classNames={resizable && minSectionHeight}>
-      <StackItem.Heading classNames='bs-full p-1 justify-between attention-surface'>
+      <StackItem.Heading classNames='h-full p-1 justify-between dx-attention-surface'>
         <StackItem.DragHandle asChild>
           <IconButton variant='ghost' icon='ph--dots-six-vertical--regular' iconOnly label='Drag handle' />
         </StackItem.DragHandle>
@@ -72,7 +72,7 @@ const NotebookSection = ({
       {/* TODO(burdon): Move drag preview to outer stack (uniformly). */}
       <StackItem.DragPreview>
         {({ item: cell }) => (
-          <StackItem.Content classNames='overflow-visible bg-groupSurface border border-subduedSeparator'>
+          <StackItem.Content classNames='overflow-visible bg-group-surface border border-subdued-separator'>
             <NotebookCell db={db} cell={cell} env={env} dragging />
           </StackItem.Content>
         )}

package/src/components/QueryEditor/QueryEditor.stories.tsx

@@ -8,8 +8,7 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { createDocAccessor } from '@dxos/echo-db';
 import { QuerySandbox } from '@dxos/echo-query';
 import { createObject } from '@dxos/react-client/echo';
-import { Toolbar, useAsyncEffect } from '@dxos/react-ui';
-import { Layout } from '@dxos/react-ui';
+import { Panel, Toolbar, useAsyncEffect } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { Json } from '@dxos/react-ui-syntax-highlighter';
 import { createDataExtensions } from '@dxos/ui-editor';
@@ -63,28 +62,31 @@ const DefaultStory = (props: QueryEditorProps) => {
   }, [object, sandbox]);
 
   return (
-    <Layout.Main toolbar>
-      {/* <ScriptToolbar script={script} state={{}} /> */}
-      <Toolbar.Root>
-        <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
-      </Toolbar.Root>
-      <div role='none' className='grid grid-rows-[1fr_min-content] bs-full overflow-hidden text-sm'>
-        <QueryEditor {...props} initialValue={object.content} extensions={extensions} />
-        <Json data={result} classNames='shrink-0 p-2 border-bs border-subduedSeparator' />
-      </div>
-    </Layout.Main>
+    <Panel.Root>
+      <Panel.Toolbar asChild>
+        <Toolbar.Root>
+          <Toolbar.Button onClick={handleRun}>Run</Toolbar.Button>
+        </Toolbar.Root>
+      </Panel.Toolbar>
+      <Panel.Content>
+        <div role='none' className='grid grid-rows-[1fr_min-content] h-full overflow-hidden text-sm'>
+          <QueryEditor {...props} initialValue={object.content} extensions={extensions} />
+          <Json data={result} classNames='shrink-0 p-2 border-y border-subdued-separator' />
+        </div>
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
 const meta = {
-  title: 'plugins/plugin-script/QueryEditor',
+  title: 'plugins/plugin-script/components/QueryEditor',
   component: QueryEditor,
   render: DefaultStory,
   decorators: [
     withTheme(),
     withLayout({
       layout: 'column',
-      classNames: 'is-proseMaxWidth',
+      classNames: 'w-prose-max-width',
     }),
   ],
 } satisfies Meta<typeof DefaultStory>;

package/src/components/ScriptToolbar/ScriptToolbar.stories.tsx

@@ -6,7 +6,7 @@ import { Atom, Registry } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useMemo } from 'react';
 
-import { OperationPlugin } from '@dxos/app-framework';
+import { OperationPlugin, RuntimePlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { Script } from '@dxos/functions';
 import { ClientPlugin } from '@dxos/plugin-client';
@@ -31,7 +31,6 @@ const createMockStore = (initialState: ScriptToolbarState = {}): ScriptToolbarSt
   };
 };
 
-// TODO(wittjosiah): ECHO objects don't work when passed via Storybook args.
 const ScriptToolbarStory = () => {
   const state = useMemo(() => createMockStore(), []);
   const script = useMemo(
@@ -47,14 +46,14 @@ const ScriptToolbarStory = () => {
 };
 
 const meta = {
-  title: 'plugins/plugin-script/Toolbar',
+  title: 'plugins/plugin-script/components/Toolbar',
   component: ScriptToolbarStory,
   // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
   decorators: [
     withTheme(),
-    withLayout({ classNames: 'is-proseMaxWidth' }),
+    withLayout({ classNames: 'w-prose-max-width' }),
     withPluginManager({
-      plugins: [OperationPlugin(), ClientPlugin({})],
+      plugins: [OperationPlugin(), RuntimePlugin(), ClientPlugin({})],
     }),
   ],
   parameters: {

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -10,8 +10,8 @@ import { type Script } from '@dxos/functions';
 import { ElevationProvider, useTranslation } from '@dxos/react-ui';
 import {
   type ActionGraphProps,
-  MenuProvider,
-  ToolbarMenu,
+  Menu,
+  type MenuRootProps,
   createGapSeparator,
   useMenuActions,
 } from '@dxos/react-ui-menu';
@@ -26,13 +26,13 @@ import {
 } from '../../hooks';
 import { meta } from '../../meta';
 
-export type ScriptToolbarProps = {
+export type ScriptToolbarProps = Partial<MenuRootProps> & {
   role?: string;
   script: Script.Script;
   state: ScriptToolbarStateStore;
 };
 
-export const ScriptToolbar = ({ script, role, state }: ScriptToolbarProps) => {
+export const ScriptToolbar = ({ script, role, state, ...props }: ScriptToolbarProps) => {
   const { t } = useTranslation(meta.id);
   const options = useDeployDeps({ script });
   const menu = useMemo(() => createToolbarActions({ state, script, t, ...options }), [state, script, options, t]);
@@ -40,9 +40,9 @@ export const ScriptToolbar = ({ script, role, state }: ScriptToolbarProps) => {
 
   return (
     <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-      <MenuProvider {...actions} attendableId={Obj.getDXN(script).toString()}>
-        <ToolbarMenu />
-      </MenuProvider>
+      <Menu.Root {...props} {...actions} attendableId={Obj.getDXN(script).toString()}>
+        <Menu.Toolbar />
+      </Menu.Root>
     </ElevationProvider>
   );
 };