@dxos/plugin-script 0.8.4-main.dedc0f3 → 0.8.4-main.ead640a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-script",
-  "version": "0.8.4-main.dedc0f3",
+  "version": "0.8.4-main.ead640a",
   "description": "Braneframe notebook plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -44,18 +44,18 @@
     "src"
   ],
   "dependencies": {
-    "@codemirror/autocomplete": "^6.18.7",
+    "@codemirror/autocomplete": "^6.19.0",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/language": "^6.11.3",
     "@codemirror/lint": "^6.8.5",
     "@codemirror/state": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.3",
-    "@codemirror/view": "^6.38.2",
+    "@codemirror/view": "^6.38.4",
     "@lezer/common": "^1.2.2",
     "@lezer/highlight": "^1.2.1",
     "@octokit/core": "^4.0.4",
     "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@preact/signals-core": "^1.12.1",
     "@typescript/vfs": "^1.6.0",
     "@valtown/codemirror-continue": "^2.3.1",
     "@valtown/codemirror-ts": "^2.2.0",
@@ -64,72 +64,76 @@
     "esbuild-wasm": "^0.16.14",
     "prettier": "^3.6.2",
     "react-syntax-highlighter": "^15.6.1",
-    "typescript": "^5.9.2",
-    "@dxos/ai": "0.8.4-main.dedc0f3",
-    "@dxos/assistant": "0.8.4-main.dedc0f3",
-    "@dxos/client": "0.8.4-main.dedc0f3",
-    "@dxos/client-protocol": "0.8.4-main.dedc0f3",
-    "@dxos/app-framework": "0.8.4-main.dedc0f3",
-    "@dxos/blueprints": "0.8.4-main.dedc0f3",
-    "@dxos/compute": "0.8.4-main.dedc0f3",
-    "@dxos/async": "0.8.4-main.dedc0f3",
-    "@dxos/debug": "0.8.4-main.dedc0f3",
-    "@dxos/devtools": "0.8.4-main.dedc0f3",
-    "@dxos/echo-protocol": "0.8.4-main.dedc0f3",
-    "@dxos/echo": "0.8.4-main.dedc0f3",
-    "@dxos/echo-schema": "0.8.4-main.dedc0f3",
-    "@dxos/functions": "0.8.4-main.dedc0f3",
-    "@dxos/invariant": "0.8.4-main.dedc0f3",
-    "@dxos/keys": "0.8.4-main.dedc0f3",
-    "@dxos/live-object": "0.8.4-main.dedc0f3",
-    "@dxos/local-storage": "0.8.4-main.dedc0f3",
-    "@dxos/log": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-client": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-deck": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-explorer": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-graph": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-markdown": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-space": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-theme": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-stack": "0.8.4-main.dedc0f3",
-    "@dxos/plugin-token-manager": "0.8.4-main.dedc0f3",
-    "@dxos/protocols": "0.8.4-main.dedc0f3",
-    "@dxos/react-client": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-attention": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-editor": "0.8.4-main.dedc0f3",
-    "@dxos/react-edge-client": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-form": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-menu": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-stack": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-list": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.dedc0f3",
-    "@dxos/rpc-tunnel": "0.8.4-main.dedc0f3",
-    "@dxos/schema": "0.8.4-main.dedc0f3",
-    "@dxos/rpc": "0.8.4-main.dedc0f3",
-    "@dxos/util": "0.8.4-main.dedc0f3"
+    "typescript": "^5.9.3",
+    "@dxos/ai": "0.8.4-main.ead640a",
+    "@dxos/assistant": "0.8.4-main.ead640a",
+    "@dxos/blueprints": "0.8.4-main.ead640a",
+    "@dxos/client": "0.8.4-main.ead640a",
+    "@dxos/client-protocol": "0.8.4-main.ead640a",
+    "@dxos/async": "0.8.4-main.ead640a",
+    "@dxos/compute": "0.8.4-main.ead640a",
+    "@dxos/debug": "0.8.4-main.ead640a",
+    "@dxos/devtools": "0.8.4-main.ead640a",
+    "@dxos/app-framework": "0.8.4-main.ead640a",
+    "@dxos/functions": "0.8.4-main.ead640a",
+    "@dxos/echo": "0.8.4-main.ead640a",
+    "@dxos/echo-query": "0.8.4-main.ead640a",
+    "@dxos/echo-protocol": "0.8.4-main.ead640a",
+    "@dxos/invariant": "0.8.4-main.ead640a",
+    "@dxos/live-object": "0.8.4-main.ead640a",
+    "@dxos/local-storage": "0.8.4-main.ead640a",
+    "@dxos/log": "0.8.4-main.ead640a",
+    "@dxos/plugin-assistant": "0.8.4-main.ead640a",
+    "@dxos/plugin-deck": "0.8.4-main.ead640a",
+    "@dxos/plugin-explorer": "0.8.4-main.ead640a",
+    "@dxos/keys": "0.8.4-main.ead640a",
+    "@dxos/plugin-graph": "0.8.4-main.ead640a",
+    "@dxos/plugin-space": "0.8.4-main.ead640a",
+    "@dxos/plugin-markdown": "0.8.4-main.ead640a",
+    "@dxos/plugin-stack": "0.8.4-main.ead640a",
+    "@dxos/plugin-theme": "0.8.4-main.ead640a",
+    "@dxos/plugin-token-manager": "0.8.4-main.ead640a",
+    "@dxos/protocols": "0.8.4-main.ead640a",
+    "@dxos/react-client": "0.8.4-main.ead640a",
+    "@dxos/react-edge-client": "0.8.4-main.ead640a",
+    "@dxos/react-ui-components": "0.8.4-main.ead640a",
+    "@dxos/react-ui-attention": "0.8.4-main.ead640a",
+    "@dxos/react-ui-editor": "0.8.4-main.ead640a",
+    "@dxos/react-ui-form": "0.8.4-main.ead640a",
+    "@dxos/react-ui-list": "0.8.4-main.ead640a",
+    "@dxos/react-ui-menu": "0.8.4-main.ead640a",
+    "@dxos/react-ui-stack": "0.8.4-main.ead640a",
+    "@dxos/react-ui-syntax-highlighter": "0.8.4-main.ead640a",
+    "@dxos/rpc": "0.8.4-main.ead640a",
+    "@dxos/rpc-tunnel": "0.8.4-main.ead640a",
+    "@dxos/plugin-client": "0.8.4-main.ead640a",
+    "@dxos/schema": "0.8.4-main.ead640a",
+    "@dxos/util": "0.8.4-main.ead640a",
+    "@dxos/vendor-quickjs": "0.8.4-main.ead640a"
   },
   "devDependencies": {
-    "@effect-rx/rx-react": "0.38.0",
-    "@effect/platform": "0.90.2",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.17.7",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "7.1.1",
-    "@dxos/random": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
-    "@dxos/storybook-utils": "0.8.4-main.dedc0f3"
+    "@effect-rx/rx-react": "0.42.4",
+    "@effect/platform": "0.92.1",
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.1",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/echo-db": "0.8.4-main.ead640a",
+    "@dxos/random": "0.8.4-main.ead640a",
+    "@dxos/react-ui": "0.8.4-main.ead640a",
+    "@dxos/react-ui-theme": "0.8.4-main.ead640a",
+    "@dxos/storybook-utils": "0.8.4-main.ead640a"
   },
   "peerDependencies": {
     "@effect-rx/rx-react": "^0.34.1",
     "@effect/platform": "^0.80.12",
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.dedc0f3",
-    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui-theme": "0.8.4-main.ead640a",
+    "@dxos/react-ui": "0.8.4-main.ead640a"
   },
   "publishConfig": {
     "access": "public"

package/src/ScriptPlugin.tsx

@@ -2,14 +2,13 @@
 // Copyright 2023 DXOS.org
 //
 
-import { Schema } from 'effect';
-
 import { Capabilities, Events, contributes, createIntent, defineModule, definePlugin } from '@dxos/app-framework';
 import { Ref } from '@dxos/echo';
 import { ScriptType } from '@dxos/functions';
 import { ClientEvents } from '@dxos/plugin-client';
 import { SpaceCapabilities } from '@dxos/plugin-space';
 import { defineObjectForm } from '@dxos/plugin-space/types';
+import { isNonNullable } from '@dxos/util';
 
 import {
   AppGraphBuilder,
@@ -22,71 +21,97 @@ import {
 import { ScriptEvents } from './events';
 import { meta } from './meta';
 import { translations } from './translations';
-import { ScriptAction } from './types';
+import { Notebook, ScriptAction } from './types';
 
-export const ScriptPlugin = () =>
-  definePlugin(meta, [
-    defineModule({
-      id: `${meta.id}/module/settings`,
-      activatesOn: Events.SetupSettings,
-      activate: ScriptSettings,
-    }),
-    defineModule({
-      id: `${meta.id}/module/compiler`,
-      activatesOn: ScriptEvents.SetupCompiler,
-      activate: Compiler,
-    }),
-    defineModule({
-      id: `${meta.id}/module/translations`,
-      activatesOn: Events.SetupTranslations,
-      activate: () => contributes(Capabilities.Translations, translations),
-    }),
-    defineModule({
-      id: `${meta.id}/module/metadata`,
-      activatesOn: Events.SetupMetadata,
-      activate: () =>
-        contributes(Capabilities.Metadata, {
-          id: ScriptType.typename,
-          metadata: {
-            icon: 'ph--code--regular',
-            // TODO(wittjosiah): Move out of metadata.
-            loadReferences: async (script: ScriptType) => await Ref.Array.loadAll([script.source]),
-          },
+export const ScriptPlugin = definePlugin(meta, () => [
+  defineModule({
+    id: `${meta.id}/module/settings`,
+    activatesOn: Events.SetupSettings,
+    activate: ScriptSettings,
+  }),
+  defineModule({
+    id: `${meta.id}/module/compiler`,
+    activatesOn: ScriptEvents.SetupCompiler,
+    activate: Compiler,
+  }),
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations),
+  }),
+  defineModule({
+    id: `${meta.id}/module/metadata`,
+    activatesOn: Events.SetupMetadata,
+    activate: () => [
+      contributes(Capabilities.Metadata, {
+        id: ScriptType.typename,
+        metadata: {
+          icon: 'ph--code--regular',
+          iconClassName: 'text-skySurfaceText',
+          // TODO(wittjosiah): Move out of metadata.
+          loadReferences: async (script: ScriptType) => await Ref.Array.loadAll([script.source]),
+        },
+      }),
+      contributes(Capabilities.Metadata, {
+        id: Notebook.Notebook.typename,
+        metadata: {
+          icon: 'ph--notebook--regular',
+          iconClassName: 'text-skySurfaceText',
+          // TODO(wittjosiah): Move out of metadata.
+          loadReferences: async (notebook: Notebook.Notebook) =>
+            await Ref.Array.loadAll(
+              notebook.cells.flatMap((cell) => [cell.script, cell.view, cell.chat].filter(isNonNullable)) as any,
+            ),
+        },
+      }),
+    ],
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events.SetupAppGraph,
+    activate: AppGraphBuilder,
+  }),
+  defineModule({
+    id: `${meta.id}/module/script/object-form`,
+    activatesOn: ClientEvents.SetupSchema,
+    activate: () =>
+      contributes(
+        SpaceCapabilities.ObjectForm,
+        defineObjectForm({
+          objectSchema: ScriptType,
+          formSchema: ScriptAction.ScriptProps,
+          getIntent: (props, options) => createIntent(ScriptAction.CreateScript, { ...props, space: options.space }),
+        }),
+      ),
+  }),
+  defineModule({
+    id: `${meta.id}/module/notebook/object-form`,
+    activatesOn: ClientEvents.SetupSchema,
+    activate: () =>
+      contributes(
+        SpaceCapabilities.ObjectForm,
+        defineObjectForm({
+          objectSchema: Notebook.Notebook,
+          formSchema: ScriptAction.NotebookProps,
+          getIntent: (props, options) => createIntent(ScriptAction.CreateNotebook, { ...props, space: options.space }),
         }),
-    }),
-    defineModule({
-      id: `${meta.id}/module/app-graph-builder`,
-      activatesOn: Events.SetupAppGraph,
-      activate: AppGraphBuilder,
-    }),
-    defineModule({
-      id: `${meta.id}/module/object-form`,
-      activatesOn: ClientEvents.SetupSchema,
-      activate: () =>
-        contributes(
-          SpaceCapabilities.ObjectForm,
-          defineObjectForm({
-            objectSchema: ScriptType,
-            formSchema: ScriptAction.CreateScriptSchema.pipe(Schema.omit('initialTemplateId')),
-            getIntent: (props, options) => createIntent(ScriptAction.Create, { ...props, space: options.space }),
-          }),
-        ),
-    }),
-    defineModule({
-      id: `${meta.id}/module/react-surface`,
-      activatesOn: Events.SetupReactSurface,
-      // TODO(wittjosiah): Should occur before the script editor is loaded when surfaces activation is more granular.
-      activatesBefore: [ScriptEvents.SetupCompiler],
-      activate: ReactSurface,
-    }),
-    defineModule({
-      id: `${meta.id}/module/intent-resolver`,
-      activatesOn: Events.SetupIntentResolver,
-      activate: IntentResolver,
-    }),
-    defineModule({
-      id: `${meta.id}/module/blueprint`,
-      activatesOn: Events.SetupArtifactDefinition,
-      activate: BlueprintDefinition,
-    }),
-  ]);
+      ),
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.SetupReactSurface,
+    // TODO(wittjosiah): Should occur before the script editor is loaded when surfaces activation is more granular.
+    activatesBefore: [ScriptEvents.SetupCompiler],
+    activate: ReactSurface,
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntentResolver,
+    activate: IntentResolver,
+  }),
+  defineModule({
+    id: `${meta.id}/module/blueprint`,
+    activatesOn: Events.SetupArtifactDefinition,
+    activate: BlueprintDefinition,
+  }),
+]);

package/src/capabilities/app-graph-builder.ts

@@ -3,7 +3,8 @@
 //
 
 import { Rx } from '@effect-rx/rx-react';
-import { Option, pipe } from 'effect';
+import * as Function from 'effect/Function';
+import * as Option from 'effect/Option';
 
 import { Capabilities, type PluginContext, contributes } from '@dxos/app-framework';
 import { Obj } from '@dxos/echo';
@@ -19,7 +20,7 @@ export default (context: PluginContext) =>
       id: `${meta.id}/execute`,
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (Obj.instanceOf(ScriptType, node.data) ? Option.some(node) : Option.none())),
             Option.map((node) => [
@@ -42,7 +43,7 @@ export default (context: PluginContext) =>
       id: `${meta.id}/logs`,
       connector: (node) =>
         Rx.make((get) =>
-          pipe(
+          Function.pipe(
             get(node),
             Option.flatMap((node) => (Obj.instanceOf(ScriptType, node.data) ? Option.some(node) : Option.none())),
             Option.map((node) => [

package/src/capabilities/artifact-definition.ts

@@ -5,7 +5,7 @@
 // ISSUE(burdon): defineArtifact
 // @ts-nocheck
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
 import { ToolResult, createTool } from '@dxos/ai';
 import { Capabilities, type PromiseIntentDispatcher, contributes, createIntent } from '@dxos/app-framework';

package/src/capabilities/intent-resolver.ts

@@ -3,7 +3,7 @@
 //
 
 import { Octokit } from '@octokit/core';
-import { Predicate } from 'effect';
+import * as Predicate from 'effect/Predicate';
 
 import { Capabilities, LayoutAction, contributes, createIntent, createResolver } from '@dxos/app-framework';
 import { Obj, Ref } from '@dxos/echo';
@@ -14,12 +14,12 @@ import { DataType } from '@dxos/schema';
 import { DEPLOYMENT_DIALOG } from '../components';
 import { defaultScriptsForIntegration } from '../meta';
 import { templates } from '../templates';
-import { ScriptAction } from '../types';
+import { Notebook, ScriptAction } from '../types';
 
 export default () =>
   contributes(Capabilities.IntentResolver, [
     createResolver({
-      intent: ScriptAction.Create,
+      intent: ScriptAction.CreateScript,
       resolve: async ({ name, gistUrl, initialTemplateId }) => {
         let content = templates[0].source;
 
@@ -41,7 +41,7 @@ export default () =>
           const template = templates.find((template) => template.id === initialTemplateId);
           if (template) {
             content = template.source;
-            name = template.name;
+            name = name || template.name;
           }
         }
 
@@ -52,6 +52,16 @@ export default () =>
         };
       },
     }),
+    createResolver({
+      intent: ScriptAction.CreateNotebook,
+      resolve: async ({ name }) => {
+        return {
+          data: {
+            object: Obj.make(Notebook.Notebook, { name, cells: [] }),
+          },
+        };
+      },
+    }),
     createResolver({
       intent: TokenManagerAction.AccessTokenCreated,
       resolve: async ({ accessToken }) => {

package/src/capabilities/react-surface.tsx

@@ -16,6 +16,7 @@ import { type DataType } from '@dxos/schema';
 import {
   DEPLOYMENT_DIALOG,
   DeploymentDialog,
+  NotebookContainer,
   ScriptContainer,
   ScriptObjectSettings,
   ScriptPluginSettings,
@@ -23,7 +24,7 @@ import {
   TestContainer,
 } from '../components';
 import { meta } from '../meta';
-import { type ScriptSettingsProps } from '../types';
+import { Notebook, type ScriptSettings } from '../types';
 
 import { ScriptCapabilities } from './capabilities';
 
@@ -32,21 +33,32 @@ export default () =>
     createSurface({
       id: `${meta.id}/plugin-settings`,
       role: 'article',
-      filter: (data): data is { subject: SettingsStore<ScriptSettingsProps> } =>
+      filter: (data): data is { subject: SettingsStore<ScriptSettings> } =>
         data.subject instanceof SettingsStore && data.subject.prefix === meta.id,
       component: ({ data: { subject } }) => <ScriptPluginSettings settings={subject.value} />,
     }),
     createSurface({
-      id: `${meta.id}/article`,
-      role: 'article',
+      id: `${meta.id}/script/article`,
+      role: ['article', 'section'],
       filter: (data): data is { subject: ScriptType } => Obj.instanceOf(ScriptType, data.subject),
       component: ({ data, role }) => {
         const compiler = useCapability(ScriptCapabilities.Compiler);
         // TODO(dmaretskyi): Since settings store is not reactive, this would break on the script plugin being enabled without a page reload.
-        const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettingsProps>(meta.id)?.value;
+        const settings = useCapability(Capabilities.SettingsStore).getStore<ScriptSettings>(meta.id)?.value;
         return <ScriptContainer role={role} script={data.subject} settings={settings} env={compiler.environment} />;
       },
     }),
+    createSurface({
+      id: `${meta.id}/notebook/article`,
+      role: 'article',
+      filter: (data): data is { subject: Notebook.Notebook } => Obj.instanceOf(Notebook.Notebook, data.subject),
+      component: ({ data, role }) => {
+        const compiler = useCapability(ScriptCapabilities.Compiler);
+        return <NotebookContainer role={role} notebook={data.subject} env={compiler.environment} />;
+      },
+    }),
+    // TODO(burdon): Standardize PluginSettings vs ObjectSettings.
+    // TODO(burdon): Why is ScriptProperties different from ScriptObjectSettings?
     createSurface({
       id: `${meta.id}/companion/base-settings`,
       role: 'base-object-settings',

package/src/capabilities/settings.ts

@@ -6,16 +6,16 @@ import { Capabilities, contributes } from '@dxos/app-framework';
 import { live } from '@dxos/live-object';
 
 import { meta } from '../meta';
-import { ScriptSettingsSchema } from '../types';
+import { ScriptSettings } from '../types';
 
 export default () => {
-  const settings = live(ScriptSettingsSchema, {
+  const settings = live<ScriptSettings>({
     editorInputMode: 'vscode',
   });
 
   return contributes(Capabilities.Settings, {
     prefix: meta.id,
-    schema: ScriptSettingsSchema,
+    schema: ScriptSettings,
     value: settings,
   });
 };

package/src/components/DeploymentDialog/DeploymentDialog.stories.tsx

@@ -2,15 +2,16 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { IntentPlugin } from '@dxos/app-framework';
+import { withPluginManager } from '@dxos/app-framework/testing';
 import { Obj } from '@dxos/echo';
+import { ClientPlugin } from '@dxos/plugin-client';
 import { Dialog } from '@dxos/react-ui';
+import { withTheme } from '@dxos/react-ui/testing';
 import { DataType } from '@dxos/schema';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 
 import { translations } from '../../translations';
 
@@ -29,7 +30,8 @@ const meta = {
   component: DeploymentDialog,
   render: DefaultStory,
   parameters: { translations },
-  decorators: [withTheme, withLayout()],
+  // TODO(wittjosiah): Try to write story which does not depend on plugin manager.
+  decorators: [withTheme, withPluginManager({ plugins: [IntentPlugin(), ClientPlugin({})] })],
 } satisfies Meta<typeof DefaultStory>;
 
 export default meta;

package/src/components/DeploymentDialog/DeploymentDialog.tsx

@@ -10,10 +10,10 @@ import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
 import { type DataType } from '@dxos/schema';
 
 import { useCreateAndDeployScriptTemplates } from '../../hooks/useCreateAndDeployScriptTemplates';
-import { SCRIPT_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { type Template } from '../../templates';
 
-export const DEPLOYMENT_DIALOG = `${SCRIPT_PLUGIN}/deployment/dialog`;
+export const DEPLOYMENT_DIALOG = `${meta.id}/deployment/dialog`;
 
 // TODO(ZaymonFC):
 //  - Show activity and feedback to the user.
@@ -26,7 +26,7 @@ export type DeploymentDialogProps = {
 };
 
 export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDialogProps) => {
-  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const space = useMemo(() => getSpace(accessToken), [accessToken]);
 
   // TODO(ZaymonFC): Thinking further. All of this should get moved to intents to run async in the background.
@@ -41,12 +41,12 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
         createIntent(LayoutAction.AddToast, {
           part: 'toast',
           subject: {
-            id: `${SCRIPT_PLUGIN}/deployment-success`,
+            id: `${meta.id}/deployment-success`,
             icon: 'ph--check--regular',
             duration: Infinity,
-            title: ['script deployment toast label', { ns: SCRIPT_PLUGIN, count: scriptTemplates.length }],
-            description: ['script deployment toast description', { ns: SCRIPT_PLUGIN, count: scriptTemplates.length }],
-            closeLabel: ['script deployment toast close label', { ns: SCRIPT_PLUGIN, count: scriptTemplates.length }],
+            title: ['script deployment toast label', { ns: meta.id, count: scriptTemplates.length }],
+            description: ['script deployment toast description', { ns: meta.id, count: scriptTemplates.length }],
+            closeLabel: ['script deployment toast close label', { ns: meta.id, count: scriptTemplates.length }],
           },
         }),
       );
@@ -58,18 +58,12 @@ export const DeploymentDialog = ({ accessToken, scriptTemplates }: DeploymentDia
         createIntent(LayoutAction.AddToast, {
           part: 'toast',
           subject: {
-            id: `${SCRIPT_PLUGIN}/deployment-error`,
+            id: `${meta.id}/deployment-error`,
             icon: 'ph--warning--regular',
             duration: Infinity,
-            title: ['script deployment error toast label', { ns: SCRIPT_PLUGIN, count: scriptTemplates.length }],
-            description: [
-              'script deployment error toast description',
-              { ns: SCRIPT_PLUGIN, count: scriptTemplates.length },
-            ],
-            closeLabel: [
-              'script deployment error toast close label',
-              { ns: SCRIPT_PLUGIN, count: scriptTemplates.length },
-            ],
+            title: ['script deployment error toast label', { ns: meta.id, count: scriptTemplates.length }],
+            description: ['script deployment error toast description', { ns: meta.id, count: scriptTemplates.length }],
+            closeLabel: ['script deployment error toast close label', { ns: meta.id, count: scriptTemplates.length }],
           },
         }),
       );

package/src/components/NotebookContainer.stories.tsx

@@ -0,0 +1,32 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withClientProvider } from '@dxos/react-client/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { createNotebook } from '../testing';
+import { translations } from '../translations';
+
+import { NotebookContainer } from './NotebookContainer';
+
+const meta = {
+  title: 'plugins/plugin-script/NotebookContainer',
+  component: NotebookContainer,
+  decorators: [withTheme, withLayout({ container: 'column', classNames: 'is-prose' }), withClientProvider()],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof NotebookContainer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    notebook: createNotebook(),
+  },
+};