@dxos/plugin-deck 0.7.5-main.b19bfc8 → 0.7.5-main.d9d2d4e

package/dist/types/src/translations.d.ts

@@ -7,6 +7,8 @@ declare const _default: {
             'collapse navigation sidebar label': string;
             'open complementary sidebar label': string;
             'close complementary sidebar label': string;
+            'sidebar title': string;
+            'complementary sidebar title': string;
             'plugin error message': string;
             'content fallback message': string;
             'content fallback description': string;

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAoDE"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAsDE"}

package/dist/types/src/types.d.ts

@@ -1,6 +1,7 @@
 import { S } from '@dxos/echo-schema';
 import { type Node } from '@dxos/plugin-graph';
 import { type Label } from '@dxos/react-ui';
+import { type Position } from '@dxos/util';
 export declare const NewPlankPositions: readonly ["start", "end"];
 export type NewPlankPositioning = (typeof NewPlankPositions)[number];
 export declare const OverscrollOptions: readonly ["none", "centering"];
@@ -9,6 +10,11 @@ export type Panel = {
     id: string;
     label: Label;
     icon: string;
+    position?: Position;
+    /**
+     * If true, the panel will now be wrapped in a scroll area.
+     */
+    fixed?: boolean;
     filter?: (node: Node) => boolean;
 };
 export declare const DeckSettingsSchema: S.mutable<S.Struct<{

package/dist/types/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-deck",
-  "version": "0.7.5-main.b19bfc8",
+  "version": "0.7.5-main.d9d2d4e",
   "description": "DXOS Surface plugin for the main application layout.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -35,29 +35,29 @@
     "@preact/signals-core": "^1.6.0",
     "effect": "^3.12.3",
     "immer": "^10.1.1",
-    "@dxos/app-framework": "0.7.5-main.b19bfc8",
-    "@dxos/artifact": "0.7.5-main.b19bfc8",
-    "@dxos/async": "0.7.5-main.b19bfc8",
-    "@dxos/echo-schema": "0.7.5-main.b19bfc8",
-    "@dxos/echo-signals": "0.7.5-main.b19bfc8",
-    "@dxos/debug": "0.7.5-main.b19bfc8",
-    "@dxos/invariant": "0.7.5-main.b19bfc8",
-    "@dxos/live-object": "0.7.5-main.b19bfc8",
-    "@dxos/keyboard": "0.7.5-main.b19bfc8",
-    "@dxos/local-storage": "0.7.5-main.b19bfc8",
-    "@dxos/log": "0.7.5-main.b19bfc8",
-    "@dxos/plugin-attention": "0.7.5-main.b19bfc8",
-    "@dxos/plugin-client": "0.7.5-main.b19bfc8",
-    "@dxos/plugin-graph": "0.7.5-main.b19bfc8",
-    "@dxos/plugin-theme": "0.7.5-main.b19bfc8",
-    "@dxos/plugin-observability": "0.7.5-main.b19bfc8",
-    "@dxos/react-client": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui-form": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui-stack": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui-attention": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui-text-tooltip": "0.7.5-main.b19bfc8",
-    "@dxos/util": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui-tabs": "0.7.5-main.b19bfc8"
+    "@dxos/app-framework": "0.7.5-main.d9d2d4e",
+    "@dxos/artifact": "0.7.5-main.d9d2d4e",
+    "@dxos/debug": "0.7.5-main.d9d2d4e",
+    "@dxos/async": "0.7.5-main.d9d2d4e",
+    "@dxos/invariant": "0.7.5-main.d9d2d4e",
+    "@dxos/echo-schema": "0.7.5-main.d9d2d4e",
+    "@dxos/keyboard": "0.7.5-main.d9d2d4e",
+    "@dxos/live-object": "0.7.5-main.d9d2d4e",
+    "@dxos/echo-signals": "0.7.5-main.d9d2d4e",
+    "@dxos/log": "0.7.5-main.d9d2d4e",
+    "@dxos/plugin-graph": "0.7.5-main.d9d2d4e",
+    "@dxos/local-storage": "0.7.5-main.d9d2d4e",
+    "@dxos/plugin-attention": "0.7.5-main.d9d2d4e",
+    "@dxos/plugin-client": "0.7.5-main.d9d2d4e",
+    "@dxos/plugin-observability": "0.7.5-main.d9d2d4e",
+    "@dxos/react-client": "0.7.5-main.d9d2d4e",
+    "@dxos/plugin-theme": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui-attention": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui-form": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui-tabs": "0.7.5-main.d9d2d4e",
+    "@dxos/util": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui-text-tooltip": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui-stack": "0.7.5-main.d9d2d4e"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -66,16 +66,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8",
-    "@dxos/storybook-utils": "0.7.5-main.b19bfc8"
+    "@dxos/react-ui": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui-theme": "0.7.5-main.d9d2d4e",
+    "@dxos/storybook-utils": "0.7.5-main.d9d2d4e"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.5-main.b19bfc8",
-    "@dxos/react-ui": "0.7.5-main.b19bfc8"
+    "@dxos/react-ui": "0.7.5-main.d9d2d4e",
+    "@dxos/react-ui-theme": "0.7.5-main.d9d2d4e"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/state.ts

@@ -69,6 +69,7 @@ export default () => {
   state
     .prop({ key: 'sidebarState', type: LocalStorageStore.enum<SidebarState>() })
     .prop({ key: 'complementarySidebarState', type: LocalStorageStore.enum<SidebarState>() })
+    .prop({ key: 'complementarySidebarPanel', type: LocalStorageStore.string({ allowUndefined: true }) })
     .prop({ key: 'decks', type: LocalStorageStore.json<Record<string, Deck>>() })
     .prop({ key: 'activeDeck', type: LocalStorageStore.string() })
     .prop({ key: 'previousDeck', type: LocalStorageStore.string() });

package/src/capabilities/tools.ts

@@ -13,6 +13,8 @@ import { defineTool, ToolResult } from '@dxos/artifact';
 import { S } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
 
+import { meta } from '../meta';
+
 // TODO(burdon): Factor out.
 declare global {
   interface ToolContextExtensions {
@@ -23,11 +25,14 @@ declare global {
 
 export default () =>
   contributes(Capabilities.Tools, [
-    defineTool({
+    defineTool(meta.id, {
       name: 'show',
       // TODO(ZaymonFC): We should update the prompt to teach the LLM the difference between object ids and fully qualified ids.
-      description:
-        'Show an item in the app. Use this tool to open an artifact. When supplying IDs to show, they must be fully qualified like space:object.',
+      description: `
+        Show an item in the app. Use this tool to open an artifact. 
+        When supplying IDs to show, they must be fully qualified like space:object.
+      `,
+      caption: 'Showing item...',
       // TODO(wittjosiah): Refactor Layout/Navigation/Deck actions so that they can be used directly.
       schema: S.Struct({
         id: S.String.annotations({

package/src/components/DeckLayout/ComplementarySidebar.tsx

@@ -2,7 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useCallback, useEffect, useMemo, useState, type MouseEvent } from 'react';
+import React, {
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type MouseEvent,
+  Fragment,
+} from 'react';
 
 import {
   createIntent,
@@ -13,9 +21,17 @@ import {
   useCapability,
   useIntentDispatcher,
 } from '@dxos/app-framework';
-import { Main, useTranslation, toLocalizedString, IconButton, ScrollArea } from '@dxos/react-ui';
+import {
+  Main,
+  useTranslation,
+  toLocalizedString,
+  IconButton,
+  ScrollArea as NaturalScrollArea,
+  type Label,
+} from '@dxos/react-ui';
 import { useAttended } from '@dxos/react-ui-attention';
 import { Tabs } from '@dxos/react-ui-tabs';
+import { byPosition } from '@dxos/util';
 
 import { PlankContentError } from './PlankError';
 import { PlankLoading } from './PlankLoading';
@@ -23,12 +39,15 @@ import { ToggleComplementarySidebarButton } from './SidebarButton';
 import { DeckCapabilities } from '../../capabilities';
 import { useNode } from '../../hooks';
 import { DECK_PLUGIN } from '../../meta';
+import { type Panel } from '../../types';
 import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
 
 export type ComplementarySidebarProps = {
   current?: string;
 };
 
+const label = ['complementary sidebar title', { ns: DECK_PLUGIN }] satisfies Label;
+
 export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
@@ -41,13 +60,15 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
   const hoistStatusbar = useHoistStatusbar(breakpoint);
 
   const panels = useCapabilities(DeckCapabilities.ComplementaryPanel);
-  const availablePanels = panels.filter((panel) => {
-    if (!node || !panel.filter) {
-      return true;
-    }
+  const availablePanels = panels
+    .filter((panel) => {
+      if (!node || !panel.filter) {
+        return true;
+      }
 
-    return panel.filter(node);
-  });
+      return panel.filter(node);
+    })
+    .toSorted(byPosition);
   const activePanelId = availablePanels.find((panel) => panel.id === current)?.id ?? availablePanels[0]?.id;
   const [internalValue, setInternalValue] = useState(activePanelId);
 
@@ -83,6 +104,7 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
   // TODO(burdon): Scroll area should be controlled by surface.
   return (
     <Main.ComplementarySidebar
+      label={label}
       classNames={[
         topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',
         hoistStatusbar && 'block-end-[--statusbar-size]',
@@ -137,37 +159,72 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
             classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] pbs-[env(safe-area-inset-top)]'
             {...(layout.complementarySidebarState !== 'expanded' && { inert: 'true' })}
           >
-            {panel.id === activePanelId && data && (
-              <>
-                <h2 className='flex items-center pli-2 border-separator border-be'>
-                  {toLocalizedString(panel.label, t)}
-                </h2>
-                <ScrollArea.Root>
-                  <ScrollArea.Viewport>
-                    <Surface
-                      role={`complementary--${activePanelId}`}
-                      data={data}
-                      fallback={PlankContentError}
-                      placeholder={<PlankLoading />}
-                    />
-                  </ScrollArea.Viewport>
-                  <ScrollArea.Scrollbar orientation='vertical'>
-                    <ScrollArea.Thumb />
-                  </ScrollArea.Scrollbar>
-                </ScrollArea.Root>
-                {!hoistStatusbar && (
-                  <div
-                    role='contentinfo'
-                    className='flex flex-wrap justify-center items-center border-bs border-separator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]'
-                  >
-                    <Surface role='status-bar--r1-footer' limit={1} />
-                  </div>
-                )}
-              </>
-            )}
+            <ComplementarySidebarPanel
+              panel={panel}
+              activePanelId={activePanelId}
+              data={data}
+              hoistStatusbar={hoistStatusbar}
+            />
           </Tabs.Tabpanel>
         ))}
       </Tabs.Root>
     </Main.ComplementarySidebar>
   );
 };
+
+type ComplementarySidebarPanelProps = {
+  panel: Panel;
+  activePanelId: string;
+  data?: {
+    id: string;
+    subject: any;
+    workspace: string;
+    popoverAnchorId?: string;
+  };
+  hoistStatusbar: boolean;
+};
+
+const ScrollArea = ({ children }: PropsWithChildren) => {
+  return (
+    <NaturalScrollArea.Root>
+      <NaturalScrollArea.Viewport>{children}</NaturalScrollArea.Viewport>
+      <NaturalScrollArea.Scrollbar orientation='vertical'>
+        <NaturalScrollArea.Thumb />
+      </NaturalScrollArea.Scrollbar>
+    </NaturalScrollArea.Root>
+  );
+};
+
+const ComplementarySidebarPanel = ({ panel, activePanelId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
+  const { t } = useTranslation(DECK_PLUGIN);
+
+  if (panel.id !== activePanelId || !data) {
+    return null;
+  }
+
+  const Wrapper = panel.fixed ? Fragment : ScrollArea;
+
+  return (
+    <>
+      <h2 className='flex items-center pli-2 border-separator border-be font-medium'>
+        {toLocalizedString(panel.label, t)}
+      </h2>
+      <Wrapper>
+        <Surface
+          role={`complementary--${activePanelId}`}
+          data={data}
+          fallback={PlankContentError}
+          placeholder={<PlankLoading />}
+        />
+      </Wrapper>
+      {!hoistStatusbar && (
+        <div
+          role='contentinfo'
+          className='flex flex-wrap justify-center items-center border-bs border-separator pbs-1 pbe-[max(env(safe-area-inset-bottom),0.25rem)]'
+        >
+          <Surface role='status-bar--r1-footer' limit={1} />
+        </div>
+      )}
+    </>
+  );
+};

package/src/components/DeckLayout/Sidebar.tsx

@@ -5,11 +5,14 @@
 import React, { useMemo } from 'react';
 
 import { Surface, useCapability } from '@dxos/app-framework';
-import { Main } from '@dxos/react-ui';
+import { type Label, Main } from '@dxos/react-ui';
 
 import { DeckCapabilities } from '../../capabilities';
+import { DECK_PLUGIN } from '../../meta';
 import { layoutAppliesTopbar, useBreakpoints, useHoistStatusbar } from '../../util';
 
+const label = ['sidebar title', { ns: DECK_PLUGIN }] satisfies Label;
+
 export const Sidebar = () => {
   const { popoverAnchorId, activeDeck: current } = useCapability(DeckCapabilities.DeckState);
   const breakpoint = useBreakpoints();
@@ -23,6 +26,7 @@ export const Sidebar = () => {
 
   return (
     <Main.NavigationSidebar
+      label={label}
       classNames={[
         'grid',
         topbar && 'block-start-[calc(env(safe-area-inset-top)+var(--rail-size))]',

package/src/translations.ts

@@ -14,6 +14,8 @@ export default [
         'collapse navigation sidebar label': 'Minimize sidebar',
         'open complementary sidebar label': 'Open context sidebar',
         'close complementary sidebar label': 'Minimize context sidebar',
+        'sidebar title': 'Navigation sidebar',
+        'complementary sidebar title': 'Context sidebar',
         'plugin error message': 'Content failed to render.',
         'content fallback message': 'Unsupported',
         'content fallback description':

package/src/types.ts

@@ -6,6 +6,7 @@ import { LayoutAction } from '@dxos/app-framework';
 import { S } from '@dxos/echo-schema';
 import { type Node } from '@dxos/plugin-graph';
 import { type Label } from '@dxos/react-ui';
+import { type Position } from '@dxos/util';
 
 import { DECK_PLUGIN } from './meta';
 
@@ -20,6 +21,11 @@ export type Panel = {
   id: string;
   label: Label;
   icon: string;
+  position?: Position;
+  /**
+   * If true, the panel will now be wrapped in a scroll area.
+   */
+  fixed?: boolean;
   filter?: (node: Node) => boolean;
 };
 

package/dist/lib/browser/chunk-CYE6QZBQ.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { LayoutAction } from '@dxos/app-framework';\nimport { S } from '@dxos/echo-schema';\nimport { type Node } from '@dxos/plugin-graph';\nimport { type Label } from '@dxos/react-ui';\n\nimport { DECK_PLUGIN } from './meta';\n\n// TODO(Zan): In the future we should consider adding new planks adjacent to the attended plank.\nexport const NewPlankPositions = ['start', 'end'] as const;\nexport type NewPlankPositioning = (typeof NewPlankPositions)[number];\n\nexport const OverscrollOptions = ['none', 'centering'] as const;\nexport type Overscroll = (typeof OverscrollOptions)[number];\n\nexport type Panel = {\n  id: string;\n  label: Label;\n  icon: string;\n  filter?: (node: Node) => boolean;\n};\n\nexport const DeckSettingsSchema = S.mutable(\n  S.Struct({\n    showHints: S.Boolean,\n    enableNativeRedirect: S.Boolean,\n    enableIdeStyleStatusbar: S.Boolean,\n    newPlankPositioning: S.Literal(...NewPlankPositions),\n    overscroll: S.Literal(...OverscrollOptions),\n  }),\n);\n\nexport type DeckSettingsProps = S.Schema.Type<typeof DeckSettingsSchema>;\n\nconst LayoutMode = S.Union(S.Literal('deck'), S.Literal('solo'), S.Literal('fullscreen'));\nexport const isLayoutMode = (value: any): value is LayoutMode => S.is(LayoutMode)(value);\nexport type LayoutMode = S.Schema.Type<typeof LayoutMode>;\n\nexport const PlankSizing = S.Record({ key: S.String, value: S.Number });\nexport type PlankSizing = S.Schema.Type<typeof PlankSizing>;\n\nexport const Deck = S.Struct({\n  initialized: S.Boolean.annotations({\n    description: \"If false, the deck has not yet left solo mode and new planks should be solo'd.\",\n  }),\n  active: S.mutable(S.Array(S.String)),\n  inactive: S.mutable(S.Array(S.String)),\n  solo: S.optional(S.String),\n  fullscreen: S.Boolean,\n  plankSizing: S.mutable(PlankSizing),\n});\nexport type Deck = S.Schema.Type<typeof Deck>;\n\nexport const DeckState = S.mutable(\n  S.Struct({\n    sidebarState: S.Literal('closed', 'collapsed', 'expanded'),\n    complementarySidebarState: S.Literal('closed', 'collapsed', 'expanded'),\n    complementarySidebarPanel: S.optional(S.String),\n\n    dialogOpen: S.Boolean,\n    /**\n     * Data to be passed to the dialog Surface.\n     */\n    dialogContent: S.optional(S.Any),\n    dialogBlockAlign: S.optional(S.Literal('start', 'center', 'end')),\n    dialogType: S.optional(S.Literal('default', 'alert')),\n\n    popoverOpen: S.Boolean,\n    popoverSide: S.optional(S.Literal('top', 'right', 'bottom', 'left')),\n    /**\n     * Data to be passed to the popover Surface.\n     */\n    popoverContent: S.optional(S.Any),\n    popoverAnchorId: S.optional(S.String),\n\n    toasts: S.mutable(S.Array(LayoutAction.Toast)),\n    currentUndoId: S.optional(S.String),\n\n    activeDeck: S.String,\n    previousDeck: S.String,\n    decks: S.mutable(S.Record({ key: S.String, value: S.mutable(Deck) })),\n    previousMode: S.mutable(S.Record({ key: S.String, value: LayoutMode })),\n    deck: S.mutable(Deck),\n\n    /**\n     * The identifier of a component to scroll into view when it is mounted.\n     */\n    scrollIntoView: S.optional(S.String),\n  }),\n);\n\nexport type DeckState = S.Schema.Type<typeof DeckState>;\n\nexport const getMode = (deck: Deck): LayoutMode => {\n  if (deck.solo) {\n    return deck.fullscreen ? 'fullscreen' : 'solo';\n  }\n\n  return 'deck';\n};\n\n// NOTE: Chosen from RFC 1738’s `safe` characters: http://www.faqs.org/rfcs/rfc1738.html\nexport const SLUG_PATH_SEPARATOR = '~';\n\nexport const DECK_ACTION = `${DECK_PLUGIN}/action`;\n\nexport namespace DeckAction {\n  const PartAdjustmentSchema = S.Union(\n    S.Literal('close').annotations({ description: 'Close the plank.' }),\n    S.Literal('solo').annotations({ description: 'Solo the plank.' }),\n    S.Literal('increment-start').annotations({ description: 'Move the plank towards the start of the deck.' }),\n    S.Literal('increment-end').annotations({ description: 'Move the plank towards the end of the deck.' }),\n  );\n  export type PartAdjustment = S.Schema.Type<typeof PartAdjustmentSchema>;\n  export const Adjustment = S.mutable(S.Struct({ id: S.String, type: PartAdjustmentSchema }));\n  export type Adjustment = S.Schema.Type<typeof Adjustment>;\n\n  /**\n   * An atomic transaction to apply to the deck, describing which element to move to which location.\n   */\n  export class Adjust extends S.TaggedClass<Adjust>()(`${DECK_ACTION}/adjust`, {\n    input: Adjustment,\n    output: S.Void,\n  }) {}\n\n  export class UpdatePlankSize extends S.TaggedClass<UpdatePlankSize>()(`${DECK_ACTION}/update-plank-size`, {\n    input: S.Struct({\n      id: S.String,\n      size: S.Number,\n    }),\n    output: S.Void,\n  }) {}\n}\n"],
-  "mappings": "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",
-  "names": ["LayoutAction", "S", "NewPlankPositions", "OverscrollOptions", "DeckSettingsSchema", "S", "mutable", "Struct", "showHints", "Boolean", "enableNativeRedirect", "enableIdeStyleStatusbar", "newPlankPositioning", "Literal", "overscroll", "LayoutMode", "Union", "isLayoutMode", "value", "is", "PlankSizing", "Record", "key", "String", "Number", "Deck", "initialized", "annotations", "description", "active", "Array", "inactive", "solo", "optional", "fullscreen", "plankSizing", "DeckState", "sidebarState", "complementarySidebarState", "complementarySidebarPanel", "dialogOpen", "dialogContent", "Any", "dialogBlockAlign", "dialogType", "popoverOpen", "popoverSide", "popoverContent", "popoverAnchorId", "toasts", "LayoutAction", "Toast", "currentUndoId", "activeDeck", "previousDeck", "decks", "previousMode", "deck", "scrollIntoView", "getMode", "SLUG_PATH_SEPARATOR", "DECK_ACTION", "DECK_PLUGIN", "DeckAction", "PartAdjustmentSchema", "Adjustment", "id", "type", "Adjust", "TaggedClass", "input", "output", "Void", "UpdatePlankSize", "size"]
-}