@jxsuite/studio 6.1.2 → 8.0.1

package/src/surfaces/commandbar.ts

@@ -7,7 +7,8 @@
  * a command, so what the document is handed is a PROJECTION of the registry rather than a list of
  * buttons: `primary` is `forPlacement("commandbar/primary")` (capped at five by
  * `scripts/check-chrome-budget.ts`), `docks` is the three dock records with the shell's state
- * beside them, `layouts` is the project's own layout record, and the ⬢ Studio menu is
+ * beside them, `workspaces` is the five-workspace switcher with `shell.workspace` selected, the ⚙
+ * gear is the `settings/menu` placement, and the ⬢ Studio menu is
  * `forPlacement("commandbar/overflow")` opened on the `menu` surface. With no project open the same
  * document renders; the records' own `when` clauses empty it (§13.1: enablement is a predicate with
  * a sentence, never a second template).
@@ -24,22 +25,23 @@
  *   is the platform's.
  *
  * **Retired, with a name, a chord and a residue** (`studio-ui-guidelines.md` §12.2): Open Project +
- * New Project + recents → the pill and `Project: Open Recent…`; `Manage` → `File: Browse Library`;
- * `Publish` → the `Publish:` family; `Sync Project` → Source Control. The five-mode switcher lives
- * in the pane context bar and is reachable as `View: Set Canvas Mode` in the palette.
+ * New Project + recents → the pill and `Project: Open Recent…`; `Manage` → the Content workspace
+ * (`view.setWorkspace { workspace: "content" }`, ⌘2); `Publish` → the `Publish:` family; `Sync
+ * Project` → Source Control. The five-mode switcher lives in the pane context bar and is reachable
+ * as `View: Set Canvas Mode` in the palette.
  *
  * @docs studio/interface
  */
 
 import { presenceProjection } from "../collab/presence-chips";
 import { effect, effectScope, reactive } from "../reactivity";
-import { activeTab } from "../workspace/workspace";
+import { activeTab, workspace } from "../workspace/workspace";
 import { primarySelection } from "../tabs/selection";
+import { stylebookTarget } from "../style/stylebook-target";
 import { shell } from "../shell";
 import { openQuickSearch } from "../panels/quick-search";
-import { showPromptDialog } from "../ui/layers";
 import { getPlatform, hasPlatform } from "../platform";
-import { getPreviewNavigateHandler } from "../canvas/preview-navigate";
+import { openUrlExternally } from "../canvas/preview-navigate";
 import { armPreviewOverlay, flushPreviewOverlay } from "../preview/preview-overlay";
 import { documentUrlPattern, dynamicRouteParams } from "../page-params";
 import { getNodeAtPath, nodeLabel, projectState } from "../store";
@@ -49,6 +51,14 @@ import { notify } from "../services/notify";
 import { mountSurface, registerSurface } from "../ui/surface";
 import { rectOf } from "../utils/geometry";
 import { openMenu } from "./menu";
+import {
+  dismissSettingsMenu,
+  isSettingsMenuOpen,
+  openSettingsMenu,
+  SETTINGS_MENU_PLACEMENT,
+} from "../panels/settings-menu";
+import { WORKSPACES } from "../workspace/workspace-ids";
+import type { WorkspaceId } from "../workspace/workspace-ids";
 import commandbarDoc from "./commandbar.json";
 import type { PresenceProjection } from "../collab/presence-chips";
 import type { MenuHandle, MenuRowProjection } from "./menu";
@@ -121,12 +131,22 @@ export interface DockProjection {
   disabled: boolean;
 }
 
-/** One layout tab. */
-export interface LayoutTabProjection {
-  id: string;
-  name: string;
-  active: boolean;
+/** One workspace tab. */
+export interface WorkspaceTabProjection {
+  id: WorkspaceId;
   title: string;
+  icon: string;
+  /** The tab's tooltip: its title and chord, plus what its badge counts. */
+  tooltip: string;
+  /** The count drawn beside the title; empty for none, which hides the badge. */
+  badge: string;
+  /**
+   * What the badge counts, in words, as the tab's `aria-description`; empty for none. The badge is
+   * decorative, so this is how the count reaches a screen reader: the tab's NAME stays its title,
+   * which is what the label draws.
+   */
+  description: string;
+  hasBadge: boolean;
 }
 
 /** One segment of the address bar. */
@@ -149,8 +169,16 @@ interface CommandBarScope {
   csd: WindowControlLayout;
   menuVisible: boolean;
   menuOpen: boolean;
-  layoutsVisible: boolean;
-  layouts: LayoutTabProjection[];
+  workspacesVisible: boolean;
+  workspaces: WorkspaceTabProjection[];
+  /** The selected workspace tab's value: `shell.workspace`. */
+  workspace: string;
+  /** The quick-publish chevron beside the Publish tab: `publish.quick`, drawn when registered. */
+  quickVisible: boolean;
+  quickDisabled: boolean;
+  quickTooltip: string;
+  settingsVisible: boolean;
+  settingsOpen: boolean;
   segments: SegmentProjection[];
   chord: string;
   hasChord: boolean;
@@ -161,9 +189,8 @@ interface CommandBarScope {
   run: (id: string) => void;
   openSegment: (key: SegmentProjection["key"]) => void;
   openPicker: () => void;
-  setLayout: (id: string) => void;
-  renameLayout: (id: string) => void;
-  saveLayout: () => void;
+  setWorkspace: (id: string) => void;
+  openSettings: (anchor: EventTarget | null) => void;
   openStudioMenu: (opener: HTMLElement) => void;
   windowControl: (action: keyof WindowControls) => void;
 }
@@ -193,6 +220,9 @@ const DOCKS = [
   { dock: "bottom", icon: "rows", id: "view.toggleBottomDock", mirror: false },
 ] as const;
 
+/** The record the chevron beside the Publish tab renders. */
+const QUICK_PUBLISH = "publish.quick";
+
 /** The palette mode each segment of the address opens. */
 const SEGMENT_MODES = { document: "files", project: "projects", selection: "nodes" } as const;
 
@@ -279,22 +309,6 @@ export function openInBrowserTarget(tab: Tab | null): BrowserTarget {
   return { path: route === "/" ? "/" : trailingSlash === "always" ? `${route}/` : route };
 }
 
-/**
- * Hand a URL to the user's real browser.
- *
- * Reuses the seam the desktop launchers already register for Preview link clicks
- * (`canvas/preview-navigate.ts`), which routes through the OS rather than navigating a webview with
- * no address bar; the browser build falls back to a new tab.
- */
-function openUrlExternally(url: string) {
-  const override = getPreviewNavigateHandler();
-  if (override) {
-    override(url);
-    return;
-  }
-  window.open(url, "_blank", "noopener,noreferrer");
-}
-
 /**
  * Run `View: Open in Browser`, reporting the blocking reason when there is one.
  *
@@ -496,11 +510,21 @@ export function documentSegmentLabel(tab: Tab | null): string {
   return root && trimmed.startsWith(`${root}/`) ? trimmed.slice(root.length + 1) : trimmed;
 }
 
-/** The selection's label — the Outline's own `nodeLabel`, so the two never disagree. */
+/**
+ * The selection's label — the Outline's own `nodeLabel`, so the two never disagree.
+ *
+ * In the Styles workspace's Elements view the selection is a TAG (`stylebookTarget`), and the
+ * segment names it the way the status bar and the Style body do: `project.json › h1`, not the root
+ * node of the catalogue's document.
+ */
 export function selectionSegmentLabel(tab: Tab | null): string {
   if (shell.layoutSelection) {
     return "layout";
   }
+  const tag = stylebookTarget(tab);
+  if (tag) {
+    return tag.replaceAll(" ", " › ");
+  }
   const paths = tab?.session.selection ?? [];
   const selection = primarySelection(paths);
   if (!tab || !selection) {
@@ -514,30 +538,6 @@ export function selectionSegmentLabel(tab: Tab | null): string {
   return nodeLabel(getNodeAtPath(tab.doc.document, selection));
 }
 
-/** Ask for a name, then run the command. Exported for the same reason `runOpenInBrowser` is. */
-export async function saveLayoutPrompt(registry: CommandRegistry): Promise<void> {
-  const name = await showPromptDialog("Save layout", {
-    confirmLabel: "Save",
-    message: "Remembers this project's Navigator panel, dock widths and Inspector tab.",
-    placeholder: "Layout name",
-  });
-  if (name) {
-    await runReported(registry, "view.saveLayout", { name }, "Command Bar");
-  }
-}
-
-/** The double-click gesture, routed through the command so the rename has one implementation. */
-export async function renameLayoutPrompt(
-  registry: CommandRegistry,
-  layout: string,
-  current: string,
-): Promise<void> {
-  const name = await showPromptDialog("Rename layout", { confirmLabel: "Rename", value: current });
-  if (name) {
-    await runReported(registry, "view.renameLayout", { layout, name }, "Command Bar");
-  }
-}
-
 interface WindowControls {
   minimize: () => void;
   maximize: () => void;
@@ -549,13 +549,13 @@ function windowControls(): WindowControls | undefined {
   if (platform == null || !("windowControls" in platform)) {
     return undefined;
   }
-  /* SAFETY: the PAL interface deliberately leaves `windowControls` undeclared; the one adapter that
-     adds it is the desktop launcher's (`packages/desktop/src/platform.ts`), whose object carries the
-     `close`, `maximize` and `minimize` functions this bar calls. */
+  /* SAFETY: the PAL interface deliberately leaves `windowControls` undeclared; the adapters that add
+     it is the desktop launcher's (`chromium/platform.ts` under the Electron shell), whose objects carry the `close`,
+     `maximize` and `minimize` functions this bar calls. */
   return platform.windowControls as WindowControls | undefined;
 }
 
-// ─── The Command Center pill, the layout tabs and the docks, projected ───────
+// ─── The Command Center pill, the workspace tabs and the docks, projected ────
 
 /**
  * `◈ project › document › selection`: four facts about where you are, in non-collapsible chrome
@@ -584,25 +584,35 @@ function projectSegments(tab: Tab | null): SegmentProjection[] {
 }
 
 /**
- * `Write · Design · Build · Ship · +` — named arrangements, as plain-text tabs.
+ * `Design · Content · Media · Styles · Publish`: the five workspaces, as a tablist.
  *
- * Each tab RUNS `view.setLayout`, so the click, the palette row and an agent all take the same
- * path; double-clicking one renames it, and `+` saves whatever is on screen now. **A layout
- * reconfigures; it never removes**: every panel stays on the rail, on its chord and in the palette
- * after any layout is applied.
+ * Each tab RUNS `view.setWorkspace`, so the click, ⌘1–5, the palette row and a script all take the
+ * same path, and the selected tab is `shell.workspace` rather than a second record of it. Publish
+ * carries the count of uncommitted changes, which is what the workspace is there to deal with; at
+ * zero the badge is not drawn, because "0" is a number a reader has to read to learn nothing.
  */
-function projectLayouts(registry: CommandRegistry | null): LayoutTabProjection[] {
+function projectWorkspaces(registry: CommandRegistry | null): WorkspaceTabProjection[] {
   // `get` first: a registry that has not been handed the shell's records yet (the skeleton the bar
   // Paints before the bootstrap composes them) has no verb to ask about.
-  if (!registry?.get("view.setLayout") || !registry.isEnabled("view.setLayout")) {
+  if (!registry?.get("view.setWorkspace") || !registry.isEnabled("view.setWorkspace")) {
     return [];
   }
-  return shell.layouts.map((preset) => ({
-    active: preset.id === shell.layout,
-    id: preset.id,
-    name: preset.name,
-    title: `${preset.name} layout — double-click to rename`,
-  }));
+  const dirty = shell.git.status?.files.length ?? 0;
+  return WORKSPACES.map((entry) => {
+    const badge = entry.id === "publish" && dirty > 0 ? String(dirty) : "";
+    const chord = registry.keymap.formatBinding(`workspace.focus.${entry.id}`);
+    const named = chord ? `${entry.title} (${chord})` : entry.title;
+    const description = badge ? `${badge} unpublished ${dirty === 1 ? "change" : "changes"}` : "";
+    return {
+      badge,
+      description,
+      hasBadge: badge !== "",
+      icon: entry.icon,
+      id: entry.id,
+      title: entry.title,
+      tooltip: description ? `${named}, ${description}` : named,
+    };
+  });
 }
 
 /** The primary verb cluster: exactly what declared `commandbar/primary`, in the registry's order. */
@@ -734,8 +744,6 @@ function state(): CommandBarScope {
     csd: "none",
     docks: [],
     hasChord: false,
-    layouts: [],
-    layoutsVisible: false,
     menuOpen: false,
     menuVisible: false,
     openPicker: () => {
@@ -744,36 +752,46 @@ function state(): CommandBarScope {
     openSegment: (key) => {
       openQuickSearch(SEGMENT_MODES[key]);
     },
+    openSettings: (anchor: EventTarget | null) => {
+      if (!(anchor instanceof HTMLElement)) {
+        return;
+      }
+      openSettingsMenu(anchor, {
+        rerender: () => {
+          if (_state) {
+            _state.settingsOpen = isSettingsMenuOpen();
+          }
+        },
+      });
+    },
     openStudioMenu,
     presence: NO_PRESENCE,
     presenceVisible: false,
     primary: [],
-    renameLayout: (id) => {
-      const registry = activeRegistry();
-      const preset = shell.layouts.find((layout) => layout.id === id);
-      if (registry && preset) {
-        void renameLayoutPrompt(registry, id, preset.name);
-      }
-    },
     run: (id) => {
       const registry = activeRegistry();
       if (registry?.isEnabled(id)) {
         void runReported(registry, id, undefined, "Command Bar");
       }
     },
-    saveLayout: () => {
-      const registry = activeRegistry();
-      if (registry) {
-        void saveLayoutPrompt(registry);
-      }
-    },
     segments: [],
-    setLayout: (id) => {
-      void runActiveReported("view.setLayout", { layout: id }, "Command Bar");
+    /* Run from each tab's CLICK, not from the strip's `change`: `jx-tabs` dispatches no change for
+       the tab already selected, and activating the selected workspace again is how an author gets
+       its home back after closing it. Enter and Space click the tab too (manual activation). */
+    setWorkspace: (id) => {
+      void runActiveReported("view.setWorkspace", { workspace: id }, "Command Bar");
     },
+    settingsOpen: false,
+    settingsVisible: false,
     windowControl: (action) => {
       windowControls()?.[action]();
     },
+    quickDisabled: true,
+    quickTooltip: "",
+    quickVisible: false,
+    workspace: "",
+    workspaces: [],
+    workspacesVisible: false,
   });
   return _state;
 }
@@ -789,8 +807,20 @@ function project(): void {
   const controls = windowControls();
   scope.csd = controls ? (isMacPlatform() ? "mac" : "other") : "none";
   scope.menuVisible = registry !== null;
-  scope.layouts = projectLayouts(registry);
-  scope.layoutsVisible = scope.layouts.length > 0;
+  scope.workspaces = projectWorkspaces(registry);
+  scope.workspacesVisible = scope.workspaces.length > 0;
+  scope.workspace = shell.workspace;
+  /* The chevron is a rendering of `publish.quick`, beside the tablist that ends on Publish
+     (studio.md §22.2): drawn only with the tabs and only while the registry shows the record, and
+     disabled with its own reason rather than hidden when the project is not a repository. */
+  const quick = QUICK_PUBLISH;
+  scope.quickVisible =
+    scope.workspacesVisible && registry?.get(quick) !== undefined && registry.isVisible(quick);
+  scope.quickDisabled = !scope.quickVisible || !registry?.isEnabled(quick);
+  scope.quickTooltip = registry && scope.quickVisible ? commandTooltip(registry, quick) : "";
+  scope.settingsVisible =
+    registry !== null && registry.forPlacement(SETTINGS_MENU_PLACEMENT).length > 0;
+  scope.settingsOpen = isSettingsMenuOpen();
   scope.segments = projectSegments(tab);
   scope.chord = registry?.keymap.formatBinding("palette.open") ?? "";
   scope.hasChord = scope.chord !== "";
@@ -817,7 +847,7 @@ export function mount(rootEl: HTMLElement, _ctx: ToolbarCtx = {}): void {
   unmount();
   _rootEl = rootEl;
   if (windowControls()) {
-    rootEl.classList.add("electrobun-webkit-app-region-drag");
+    rootEl.classList.add("app-region-drag");
   }
   _scope = effectScope();
   _scope.run(() => {
@@ -830,10 +860,14 @@ export function mount(rootEl: HTMLElement, _ctx: ToolbarCtx = {}): void {
       void shell.docks.bottom.collapsed;
       void shell.git.status;
       void shell.layoutSelection;
-      // The layout tabs are a rendering of the project's own record, so the band repaints when a
-      // Layout is saved, renamed or deleted from anywhere.
-      void shell.layout;
-      void shell.layouts;
+      // The pill's selection segment names a Styles specimen's tag (`selectionSegmentLabel`).
+      void shell.stylebook.selection;
+      // The workspace tabs follow the shell, so a switch made by a chord, a script or a tab's
+      // Activation repaints the selected tab.
+      void shell.workspace;
+      // The project opening is what makes the workspace tabs (and the pill's project name) live:
+      // `projectState` is not reactive, and the reactive root it is opened beside is.
+      void workspace.projectRoot;
       // The registry itself is reactive state: it is composed AFTER this mount runs, and reading it
       // Here is what repaints the band from a skeleton into the real bar.
       void activeRegistry();
@@ -866,6 +900,7 @@ export function mount(rootEl: HTMLElement, _ctx: ToolbarCtx = {}): void {
 
 export function unmount(): void {
   _menu?.close();
+  dismissSettingsMenu();
   _scope?.stop();
   _scope = null;
   const pending = _mount;

package/src/surfaces/empty-state.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioEmptyState",
-  "$description": "The one empty-state pattern (studio-ui-guidelines.md §11), as the document every region draws it from. Nine surfaces had already copied it into their own JSON — `git-panel.json`, `logic-panel.json`, `panel-outline.json` and the rest each carry a `[part=\"empty\"]` block written from the same rules — because `panels/empty-state.ts` is a lit template a document cannot call. This is the copy those were waiting for: the region that has NO document of its own hands its box to this one instead of rendering the helper, so a shell with three surfaces still lit and eight converted has one empty state rather than two. The copy rules stay where they are stated, in `panels/empty-state.ts`'s header: one sentence saying what the region is FOR, the action that fills it, and one shared verb across equivalent surfaces. Nothing here decides any of them — the adapter is handed a message, an optional second sentence and a list of buttons, and this draws exactly that.",
+  "$description": "The one empty-state pattern (studio-ui-guidelines.md §11), as the document every region draws it from. Nine surfaces had already copied it into their own JSON — the Source Control panel's (since folded into `publish-workspace.json`), `logic-panel.json`, `panel-outline.json` and the rest each carry a `[part=\"empty\"]` block written from the same rules — because `panels/empty-state.ts` is a lit template a document cannot call. This is the copy those were waiting for: the region that has NO document of its own hands its box to this one instead of rendering the helper, so a shell with three surfaces still lit and eight converted has one empty state rather than two. The copy rules stay where they are stated, in `panels/empty-state.ts`'s header: one sentence saying what the region is FOR, the action that fills it, and one shared verb across equivalent surfaces. Nothing here decides any of them — the adapter is handed a message, an optional second sentence and a list of buttons, and this draws exactly that.",
   "tagName": "div",
   "attributes": {
     "part": "empty",

package/src/surfaces/entry-editor.json

@@ -56,6 +56,13 @@
       "color": "var(--fg-dim)",
       "fontSize": "var(--jx-text-md)",
       "lineHeight": "1.5"
+    },
+    "& [part=\"record-nav\"]": {
+      "display": "flex",
+      "alignItems": "center",
+      "gap": "var(--jx-space-2)",
+      "color": "var(--fg-dim)",
+      "fontSize": "var(--jx-text-sm)"
     }
   },
   "children": [
@@ -102,6 +109,135 @@
                   },
                   "textContent": "${state.collection}"
                 },
+                {
+                  "tagName": "div",
+                  "attributes": {
+                    "part": "record-slot",
+                    "role": "none"
+                  },
+                  "style": {
+                    "display": "contents"
+                  },
+                  "$switch": {
+                    "$ref": "#/state/recordNav"
+                  },
+                  "cases": {
+                    "shown": {
+                      "$description": "A record of a file-backed collection (a CSV row): which row of the file this is, the rows either side of it, and the grid that shows them all. A file entry has no neighbours to step to, so it draws none of this.",
+                      "tagName": "div",
+                      "attributes": {
+                        "part": "record-nav",
+                        "role": "group",
+                        "aria-label": "Records"
+                      },
+                      "children": [
+                        {
+                          "tagName": "jx-action-button",
+                          "attributes": {
+                            "part": "previous"
+                          },
+                          "$props": {
+                            "size": "sm",
+                            "quiet": true,
+                            "label": "Previous record",
+                            "hint": "Previous record",
+                            "disabled": {
+                              "$ref": "#/state/previousDisabled"
+                            }
+                          },
+                          "onclick": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/showPrevious"
+                                },
+                                "value": []
+                              }
+                            ]
+                          },
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "textContent": "‹ Previous"
+                            }
+                          ]
+                        },
+                        {
+                          "tagName": "span",
+                          "attributes": {
+                            "part": "place"
+                          },
+                          "textContent": "${state.place}"
+                        },
+                        {
+                          "tagName": "jx-action-button",
+                          "attributes": {
+                            "part": "next"
+                          },
+                          "$props": {
+                            "size": "sm",
+                            "quiet": true,
+                            "label": "Next record",
+                            "hint": "Next record",
+                            "disabled": {
+                              "$ref": "#/state/nextDisabled"
+                            }
+                          },
+                          "onclick": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/showNext"
+                                },
+                                "value": []
+                              }
+                            ]
+                          },
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "textContent": "Next ›"
+                            }
+                          ]
+                        },
+                        {
+                          "tagName": "jx-action-button",
+                          "attributes": {
+                            "part": "grid"
+                          },
+                          "$props": {
+                            "size": "sm",
+                            "quiet": true,
+                            "label": "Edit in grid",
+                            "hint": "Every record of the file, as a table"
+                          },
+                          "onclick": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/openGrid"
+                                },
+                                "value": []
+                              }
+                            ]
+                          },
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "textContent": "Edit in grid"
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  }
+                },
                 {
                   "tagName": "div",
                   "attributes": {

package/src/surfaces/entry-editor.ts

@@ -64,6 +64,12 @@ export interface EntryEditorView {
   note: string;
   /** The `empty` stage's first sentence, naming the document it is about. */
   emptyLine: string;
+  /** Whether the entry is a record of a file (a CSV row), which draws its place and its neighbours. */
+  recordNav: "hidden" | "shown";
+  /** Its place among the file's records: "3 of 11". */
+  place: string;
+  previousDisabled: boolean;
+  nextDisabled: boolean;
 }
 
 /** What the reader can do here. Both are decisions the editor owns. */
@@ -72,6 +78,10 @@ export interface EntryEditorActions {
   setDraft: (draft: boolean) => void;
   /** Open Project Settings › Content types — the door out of the `empty` stage. */
   openContentTypes: () => void;
+  /** A record: show the file's previous record, its next one, or the whole file in its grid. */
+  showPrevious: () => void;
+  showNext: () => void;
+  openGrid: () => void;
 }
 
 /** The node the document renders empty for somebody else to fill. */
@@ -105,6 +115,10 @@ function project(scope: EntryEditorScope, view: EntryEditorView): void {
   scope.noteState = view.noteState;
   scope.note = view.note;
   scope.emptyLine = view.emptyLine;
+  scope.recordNav = view.recordNav;
+  scope.place = view.place;
+  scope.previousDisabled = view.previousDisabled;
+  scope.nextDisabled = view.nextDisabled;
 }
 
 /** The `part` a node was authored with, or `""` — the only thing this adapter asks about a node. */
@@ -141,11 +155,18 @@ export function mountEntryEditorSurface(
     emptyLine: "",
     fieldsRegion: "",
     name: "",
+    nextDisabled: true,
     note: "",
     noteState: "hidden",
     openContentTypes: actions.openContentTypes,
+    openGrid: actions.openGrid,
+    place: "",
+    previousDisabled: true,
+    recordNav: "hidden",
     region: "",
     setDraft: actions.setDraft,
+    showNext: actions.showNext,
+    showPrevious: actions.showPrevious,
     stage: "empty",
   });
   project(scope, view);