@dxos/plugin-script 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

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

@@ -2,46 +2,63 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { Rx } from '@effect-rx/rx-react';
+import { Option, pipe } from 'effect';
+
+import { Capabilities, contributes, type PluginContext } from '@dxos/app-framework';
 import { isInstanceOf } from '@dxos/echo-schema';
 import { ScriptType } from '@dxos/functions';
 import { PLANK_COMPANION_TYPE, ATTENDABLE_PATH_SEPARATOR } from '@dxos/plugin-deck/types';
-import { createExtension, type Node } from '@dxos/plugin-graph';
+import { createExtension } from '@dxos/plugin-graph';
 
 import { meta } from '../meta';
 
-export default (context: PluginsContext) =>
+export default (context: PluginContext) =>
   contributes(Capabilities.AppGraphBuilder, [
     createExtension({
       id: `${meta.id}/execute`,
-      filter: (node): node is Node<ScriptType> => isInstanceOf(ScriptType, node.data),
-      connector: ({ node }) => [
-        {
-          id: [node.id, 'execute'].join(ATTENDABLE_PATH_SEPARATOR),
-          type: PLANK_COMPANION_TYPE,
-          data: 'execute',
-          properties: {
-            label: ['script test label', { ns: meta.id }],
-            icon: 'ph--terminal--regular',
-            disposition: 'hidden',
-          },
-        },
-      ],
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (isInstanceOf(ScriptType, node.data) ? Option.some(node) : Option.none())),
+            Option.map((node) => [
+              {
+                id: [node.id, 'execute'].join(ATTENDABLE_PATH_SEPARATOR),
+                type: PLANK_COMPANION_TYPE,
+                data: 'execute',
+                properties: {
+                  label: ['script test label', { ns: meta.id }],
+                  icon: 'ph--terminal--regular',
+                  disposition: 'hidden',
+                },
+              },
+            ]),
+            Option.getOrElse(() => []),
+          ),
+        ),
     }),
     createExtension({
       id: `${meta.id}/logs`,
-      filter: (node): node is Node<ScriptType> => isInstanceOf(ScriptType, node.data),
-      connector: ({ node }) => [
-        {
-          id: [node.id, 'logs'].join(ATTENDABLE_PATH_SEPARATOR),
-          type: PLANK_COMPANION_TYPE,
-          data: 'logs',
-          properties: {
-            label: ['script logs label', { ns: meta.id }],
-            icon: 'ph--clock-countdown--regular',
-            disposition: 'hidden',
-          },
-        },
-      ],
+      connector: (node) =>
+        Rx.make((get) =>
+          pipe(
+            get(node),
+            Option.flatMap((node) => (isInstanceOf(ScriptType, node.data) ? Option.some(node) : Option.none())),
+            Option.map((node) => [
+              {
+                id: [node.id, 'logs'].join(ATTENDABLE_PATH_SEPARATOR),
+                type: PLANK_COMPANION_TYPE,
+                data: 'logs',
+                properties: {
+                  label: ['script logs label', { ns: meta.id }],
+                  icon: 'ph--clock-countdown--regular',
+                  disposition: 'hidden',
+                },
+              },
+            ]),
+            Option.getOrElse(() => []),
+          ),
+        ),
     }),
   ]);

package/src/capabilities/artifact-definition.ts

@@ -2,15 +2,17 @@
 // Copyright 2025 DXOS.org
 //
 
+import { Schema } from 'effect';
+
+import { createTool, ToolResult } from '@dxos/ai';
 import { Capabilities, contributes, createIntent, type PromiseIntentDispatcher } from '@dxos/app-framework';
-import { defineArtifact, defineTool, ToolResult } from '@dxos/artifact';
+import { ArtifactId, defineArtifact } from '@dxos/artifact';
 import { createArtifactElement } from '@dxos/assistant';
-import { ObjectId, S } from '@dxos/echo-schema';
-import { ScriptType } from '@dxos/functions/types';
+import { ScriptType } from '@dxos/functions';
 import { invariant } from '@dxos/invariant';
 import { SpaceAction } from '@dxos/plugin-space/types';
-import { create, makeRef, type Space } from '@dxos/react-client/echo';
-import { TextType } from '@dxos/schema';
+import { Filter, live, makeRef, type Space } from '@dxos/react-client/echo';
+import { DataType } from '@dxos/schema';
 
 import { meta } from '../meta';
 // TODO(burdon): Factor out.
@@ -71,28 +73,28 @@ export default () => {
       <apis>
         export function defineFunction(params: { 
           description: string, 
-          inputSchema: S.Schema, 
-          outputSchema: S.Schema, 
+          inputSchema: Schema.Schema, 
+          outputSchema: Schema.Schema, 
           handler: (params: { event: { data: TInput } }) => Promise<TOutput> 
         }): FunctionDefinition
         /**
          * Effect Schema
          */
-        export const S; 
+        export const Schema; 
 
         // Examples: 
 
-        S.String
-        S.Number
-        S.Boolean
-        S.Struct({
-          from: S.String.annotations({ description: 'The source currency' }),
-          to: S.String.annotations({ description: 'The target currency' }),
+        Schema.String
+        Schema.Number
+        Schema.Boolean
+        Schema.Struct({
+          from: Schema.String.annotations({ description: 'The source currency' }),
+          to: Schema.String.annotations({ description: 'The target currency' }),
         })
-        S.Array(S.String)
-        S.Union(S.String, S.Number)
-        S.optional(S.String)
-        S.String.annotations({ description: 'The source currency' })
+        Schema.Array(Schema.String)
+        Schema.Union(Schema.String, Schema.Number)
+        Schema.optional(Schema.String)
+        Schema.String.annotations({ description: 'The source currency' })
       </apis>
 
       <handler_function>
@@ -113,13 +115,13 @@ export default () => {
         export default defineFunction({
           description: 'Returns the exchange rate between two currencies.',
 
-          inputSchema: S.Struct({
-            from: S.String.annotations({ description: 'The source currency' }),
-            to: S.String.annotations({ description: 'The target currency' }),
+          inputSchema: Schema.Struct({
+            from: Schema.String.annotations({ description: 'The source currency' }),
+            to: Schema.String.annotations({ description: 'The target currency' }),
           }),
 
-          outputSchema: S.Struct({
-            rate: S.String.annotations({ description: 'The exchange rate' }),
+          outputSchema: Schema.Struct({
+            rate: Schema.String.annotations({ description: 'The exchange rate' }),
           }),
 
           handler: async ({
@@ -139,23 +141,23 @@ export default () => {
   `,
     schema: ScriptType,
     tools: [
-      defineTool(meta.id, {
+      createTool(meta.id, {
         name: 'create',
         description: 'Create a new script. Returns the artifact definition for the script',
         caption: 'Creating script...',
-        schema: S.Struct({
-          name: S.String.annotations({ description: 'The name of the script' }),
-          code: S.String.annotations({
+        schema: Schema.Struct({
+          name: Schema.String.annotations({ description: 'The name of the script' }),
+          code: Schema.String.annotations({
             description: 'The full code of the script in JavaScript or TypeScript. Must be valid executable code.',
           }),
         }),
         execute: async ({ name, code }, { extensions }) => {
           invariant(extensions?.space, 'No space');
           invariant(extensions?.dispatch, 'No intent dispatcher');
-          const script = create(ScriptType, {
+          const script = live(ScriptType, {
             name,
             source: makeRef(
-              create(TextType, {
+              live(DataType.Text, {
                 content: code,
               }),
             ),
@@ -172,17 +174,17 @@ export default () => {
           return ToolResult.Success(createArtifactElement(script.id));
         },
       }),
-      defineTool(meta.id, {
+      createTool(meta.id, {
         name: 'inspect',
         description: 'Inspect a script. Returns the artifact definition for the script',
         caption: 'Inspecting script...',
-        schema: S.Struct({
-          id: ObjectId,
+        schema: Schema.Struct({
+          id: ArtifactId,
         }),
         execute: async ({ id }, { extensions }) => {
           invariant(extensions?.space, 'No space');
 
-          const script = (await extensions.space.db.query({ id }).first()) as ScriptType;
+          const script = (await extensions.space.db.query(Filter.ids(id)).first()) as ScriptType;
           const { content } = await script.source.load();
 
           return ToolResult.Success({
@@ -191,20 +193,20 @@ export default () => {
           });
         },
       }),
-      defineTool(meta.id, {
+      createTool(meta.id, {
         name: 'update',
         description: 'Update a script. Returns the artifact definition for the script',
         caption: 'Updating script...',
-        schema: S.Struct({
-          id: ObjectId,
-          code: S.String.annotations({
+        schema: Schema.Struct({
+          id: ArtifactId,
+          code: Schema.String.annotations({
             description: 'The full code of the script in JavaScript or TypeScript. Must be valid executable code.',
           }),
         }),
         execute: async ({ id, code }, { extensions }) => {
           invariant(extensions?.space, 'No space');
 
-          const script = (await extensions.space.db.query({ id }).first()) as ScriptType;
+          const script = (await extensions.space.db.query(Filter.ids(id)).first()) as ScriptType;
           const source = await script.source.load();
           if (!source) {
             return ToolResult.Error('Script not found');

package/src/capabilities/intent-resolver.ts

@@ -3,13 +3,13 @@
 //
 
 import { Octokit } from '@octokit/core';
-import { isNotNullable } from 'effect/Predicate';
+import { Predicate } from 'effect';
 
 import { contributes, Capabilities, createResolver, createIntent, LayoutAction } from '@dxos/app-framework';
-import { ScriptType } from '@dxos/functions/types';
-import { create, makeRef } from '@dxos/live-object';
+import { ScriptType } from '@dxos/functions';
+import { live, makeRef } from '@dxos/live-object';
 import { TokenManagerAction } from '@dxos/plugin-token-manager/types';
-import { TextType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 
 import { DEPLOYMENT_DIALOG } from '../components';
 import { defaultScriptsForIntegration } from '../meta';
@@ -47,9 +47,9 @@ export default () =>
 
         return {
           data: {
-            object: create(ScriptType, {
+            object: live(ScriptType, {
               name,
-              source: makeRef(create(TextType, { content })),
+              source: makeRef(live(DataType.Text, { content })),
             }),
           },
         };
@@ -60,7 +60,7 @@ export default () =>
       resolve: async ({ accessToken }) => {
         const scriptTemplates = (defaultScriptsForIntegration[accessToken.source] ?? [])
           .map((id) => templates.find((t) => t.id === id))
-          .filter(isNotNullable);
+          .filter(Predicate.isNotNullable);
 
         if (scriptTemplates.length > 0) {
           return {

package/src/capabilities/react-surface.tsx

@@ -5,25 +5,24 @@
 import React from 'react';
 
 import { Capabilities, contributes, createSurface, useCapability } from '@dxos/app-framework';
-import { InvocationTracePanel } from '@dxos/devtools';
+import { InvocationTraceContainer } from '@dxos/devtools';
 import { isInstanceOf } from '@dxos/echo-schema';
-import { ScriptType } from '@dxos/functions/types';
+import { ScriptType } from '@dxos/functions';
 import { SettingsStore } from '@dxos/local-storage';
 import { getSpace } from '@dxos/react-client/echo';
 import { StackItem } from '@dxos/react-ui-stack';
-import { type AccessTokenType } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 
 import { ScriptCapabilities } from './capabilities';
 import {
   ScriptContainer,
   ScriptPluginSettings,
   ScriptObjectSettings,
-  TestPanel,
   ScriptProperties,
   DeploymentDialog,
   DEPLOYMENT_DIALOG,
+  TestContainer,
 } from '../components';
-import { useDeployState, useToolbarState } from '../hooks';
 import { meta } from '../meta';
 import { type ScriptSettingsProps } from '../types';
 
@@ -64,16 +63,7 @@ export default () =>
       role: 'article',
       filter: (data): data is { companionTo: ScriptType } =>
         isInstanceOf(ScriptType, data.companionTo) && data.subject === 'execute',
-      component: ({ data, role }) => {
-        // TODO(wittjosiah): Decouple hooks from toolbar state.
-        const state = useToolbarState();
-        useDeployState({ state, script: data.companionTo });
-        return (
-          <StackItem.Content role={role}>
-            <TestPanel functionUrl={state.functionUrl} />
-          </StackItem.Content>
-        );
-      },
+      component: ({ data, role }) => <TestContainer script={data.companionTo} role={role} />,
     }),
     createSurface({
       id: `${meta.id}/companion/logs`,
@@ -84,7 +74,7 @@ export default () =>
         const space = getSpace(data.companionTo);
         return (
           <StackItem.Content role={role}>
-            <InvocationTracePanel space={space} script={data.companionTo} detailAxis='block' />
+            <InvocationTraceContainer space={space} script={data.companionTo} detailAxis='block' />
           </StackItem.Content>
         );
       },
@@ -92,7 +82,7 @@ export default () =>
     createSurface({
       id: DEPLOYMENT_DIALOG,
       role: 'dialog',
-      filter: (data): data is { props: { accessToken: AccessTokenType; scriptTemplates: any } } =>
+      filter: (data): data is { props: { accessToken: DataType.AccessToken; scriptTemplates: any } } =>
         data.component === DEPLOYMENT_DIALOG,
       component: ({ data }) => <DeploymentDialog {...data.props} />,
     }),

package/src/capabilities/settings.ts

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

package/src/compiler/compiler.ts

@@ -23,7 +23,7 @@ export class Compiler {
 
   constructor(private readonly _options: ts.CompilerOptions = defaultOptions) {}
 
-  async initialize() {
+  async initialize(): Promise<void> {
     if (this._env) {
       return;
     }
@@ -40,12 +40,12 @@ export class Compiler {
     return this._env;
   }
 
-  setFile(fileName: string, content: string) {
+  setFile(fileName: string, content: string): void {
     invariant(this._fsMap, 'File system map not initialized.');
     this.environment.createFile(fileName, content);
   }
 
-  compile(fileName: string) {
+  compile(fileName: string): ts.EmitOutput {
     return this.environment.languageService.getEmitOutput(fileName);
   }
 }

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

@@ -33,7 +33,7 @@ const meta: Meta = {
   title: 'plugins/plugin-script/DeploymentDialog',
   component: DeploymentDialog,
   parameters: { translations },
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
 };
 
 export default meta;

package/src/components/DeploymentDialog/DeploymentDialog.tsx

@@ -7,7 +7,7 @@ import React, { useEffect, useMemo } from 'react';
 import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { getSpace } from '@dxos/react-client/echo';
 import { Button, Dialog, Icon, useTranslation } from '@dxos/react-ui';
-import { type AccessTokenType } from '@dxos/schema';
+import { type DataType } from '@dxos/schema';
 
 import { useCreateAndDeployScriptTemplates } from '../../hooks/useCreateAndDeployScriptTemplates';
 import { SCRIPT_PLUGIN } from '../../meta';
@@ -21,7 +21,7 @@ export const DEPLOYMENT_DIALOG = `${SCRIPT_PLUGIN}/deployment/dialog`;
 //   - Pending / onError states.
 
 type DeploymentDialogProps = {
-  accessToken: AccessTokenType;
+  accessToken: DataType.AccessToken;
   scriptTemplates: Template[];
 };
 

package/src/components/ScriptContainer.tsx

@@ -4,7 +4,7 @@
 
 import React, { useMemo } from 'react';
 
-import { type ScriptType } from '@dxos/functions/types';
+import { type ScriptType } from '@dxos/functions';
 import { createDocAccessor, getSpace } from '@dxos/react-client/echo';
 import { useIdentity } from '@dxos/react-client/halo';
 import { type ThemedClassName } from '@dxos/react-ui';
@@ -57,7 +57,7 @@ export const ScriptContainer = ({
   );
 
   return (
-    <StackItem.Content toolbar classNames='divide-y divide-separator'>
+    <StackItem.Content toolbar>
       <ScriptToolbar state={state} role={role} script={script} />
       <TypescriptEditor
         id={script.id}

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

@@ -24,7 +24,7 @@ export const Default = {
 const meta: Meta = {
   title: 'plugins/plugin-script/Toolbar',
   component: ScriptToolbar,
-  decorators: [withTheme, withLayout({ tooltips: true })],
+  decorators: [withTheme, withLayout()],
 };
 
 export default meta;

package/src/components/ScriptToolbar/ScriptToolbar.tsx

@@ -2,21 +2,24 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback } from 'react';
+import { Rx } from '@effect-rx/rx-react';
+import React, { useMemo } from 'react';
 
-import { type ScriptType } from '@dxos/functions/types';
+import { type ScriptType } from '@dxos/functions';
 import { fullyQualifiedId } from '@dxos/react-client/echo';
-import { ElevationProvider, type ThemedClassName } from '@dxos/react-ui';
+import { ElevationProvider, useTranslation, type ThemedClassName } from '@dxos/react-ui';
 import { stackItemContentToolbarClassNames } from '@dxos/react-ui-editor';
-import { createGapSeparator, MenuProvider, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
+import { createGapSeparator, MenuProvider, rxFromSignal, ToolbarMenu, useMenuActions } from '@dxos/react-ui-menu';
 
 import {
+  type CreateDeployOptions,
   type ScriptToolbarState,
   createDeploy,
   createFormat,
   createTemplateSelect,
-  useToolbarAction,
+  useDeployDeps,
 } from '../../hooks';
+import { SCRIPT_PLUGIN } from '../../meta';
 
 export type ScriptToolbarProps = ThemedClassName<{
   role?: string;
@@ -24,26 +27,32 @@ export type ScriptToolbarProps = ThemedClassName<{
   state: ScriptToolbarState;
 }>;
 
-const createToolbar = (state: ScriptToolbarState) => {
-  const templateSelect = createTemplateSelect();
-  const format = createFormat();
-  const gap = createGapSeparator();
-  const deploy = createDeploy(state);
-  return {
-    nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],
-    edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],
-  };
-};
+const createToolbar = ({ state, script, ...options }: CreateDeployOptions) =>
+  Rx.make((get) =>
+    get(
+      rxFromSignal(() => {
+        const templateSelect = createTemplateSelect(script);
+        const format = createFormat(script);
+        const gap = createGapSeparator();
+        const deploy = createDeploy({ state, script, ...options });
+        return {
+          nodes: [...templateSelect.nodes, ...format.nodes, ...gap.nodes, ...deploy.nodes],
+          edges: [...templateSelect.edges, ...format.edges, ...gap.edges, ...deploy.edges],
+        };
+      }),
+    ),
+  );
 
 export const ScriptToolbar = ({ script, role, state, classNames }: ScriptToolbarProps) => {
-  const handleAction = useToolbarAction({ state, script });
-  const toolbarCreator = useCallback(() => createToolbar(state), [state]);
+  const { t } = useTranslation(SCRIPT_PLUGIN);
+  const options = useDeployDeps({ script });
+  const toolbarCreator = useMemo(() => createToolbar({ state, script, t, ...options }), [state, script, options, t]);
   const menu = useMenuActions(toolbarCreator);
 
   return (
     <div role='none' className={stackItemContentToolbarClassNames(role)}>
       <ElevationProvider elevation={role === 'section' ? 'positioned' : 'base'}>
-        <MenuProvider {...menu} onAction={handleAction} attendableId={fullyQualifiedId(script)}>
+        <MenuProvider {...menu} attendableId={fullyQualifiedId(script)}>
           <ToolbarMenu classNames={classNames} />
         </MenuProvider>
       </ElevationProvider>

package/src/components/Settings/ScriptObjectSettings.tsx

@@ -6,12 +6,12 @@ import { Octokit } from '@octokit/core';
 import React, { type ChangeEvent, useCallback, useEffect, useState } from 'react';
 
 import { createIntent, SettingsAction, useIntentDispatcher } from '@dxos/app-framework';
-import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions/types';
+import { FunctionType, type ScriptType, getInvocationUrl, getUserFunctionUrlInMetadata } from '@dxos/functions';
 import { log } from '@dxos/log';
 import { useClient } from '@dxos/react-client';
-import { Filter, getMeta, getSpace, useQuery } from '@dxos/react-client/echo';
+import { Filter, getMeta, getSpace, Ref, useQuery } from '@dxos/react-client/echo';
 import { Button, Clipboard, Input, useControlledState, useTranslation } from '@dxos/react-ui';
-import { AccessTokenType } from '@dxos/schema';
+import { DataType } from '@dxos/schema';
 
 import { SCRIPT_PLUGIN } from '../../meta';
 
@@ -48,7 +48,7 @@ const Binding = ({ object }: ScriptObjectSettingsProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
   const client = useClient();
   const space = getSpace(object);
-  const [fn] = useQuery(space, Filter.schema(FunctionType, { source: object }));
+  const [fn] = useQuery(space, Filter.type(FunctionType, { source: Ref.make(object) }));
 
   const functionPath = fn && getUserFunctionUrlInMetadata(getMeta(fn));
   const functionUrl =
@@ -112,7 +112,7 @@ const Publishing = ({ object }: ScriptObjectSettingsProps) => {
   const { t } = useTranslation(SCRIPT_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const space = getSpace(object);
-  const [githubToken] = useQuery(space, Filter.schema(AccessTokenType, { source: 'github.com' }));
+  const [githubToken] = useQuery(space, Filter.type(DataType.AccessToken, { source: 'github.com' }));
   const gistKey = getMeta(object).keys.find(({ source }) => source === 'github.com');
   const [gistUrl, setGistUrl] = useState<string | undefined>();
 

package/src/components/TestPanel/TestContainer.tsx

@@ -0,0 +1,21 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React from 'react';
+
+import { type ScriptType } from '@dxos/functions';
+import { StackItem } from '@dxos/react-ui-stack';
+
+import { TestPanel } from './TestPanel';
+import { useDeployState, useToolbarState } from '../../hooks';
+
+export const TestContainer = ({ script, role }: { script: ScriptType; role: string }) => {
+  const state = useToolbarState();
+  useDeployState({ state, script });
+  return (
+    <StackItem.Content role={role}>
+      <TestPanel functionUrl={state.functionUrl} />
+    </StackItem.Content>
+  );
+};

package/src/components/TestPanel/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './TestContainer';
 export * from './TestPanel';

package/src/components/TypescriptEditor/TypescriptEditor.tsx

@@ -18,7 +18,6 @@ import {
   autocomplete,
   createBasicExtensions,
   createThemeExtensions,
-  editorFullWidth,
   type EditorInputMode,
   editorMonospace,
   EditorView,
@@ -64,15 +63,10 @@ export const TypescriptEditor = ({
         createThemeExtensions({
           themeMode,
           syntaxHighlighting: true,
-          slots: {
-            content: { className: editorFullWidth },
-          },
         }),
         // NOTE: Not using default editor gutter because folding for code works best right beside text.
         EditorView.theme({
           '.cm-gutters': {
-            // Match margin from content.
-            marginTop: '16px',
             background: 'var(--dx-baseSurface)',
           },
         }),