@jxsuite/studio 6.1.0 → 6.1.2

package/src/panels/pane-context.ts

@@ -71,7 +71,9 @@ import { diffShowsCode } from "../canvas/diff-view";
 import { canRenderComparison } from "./git-diff-open";
 import { shell } from "../shell";
 import { paneRegion } from "../ui/regions";
+import { isNumber, isString } from "@jxsuite/schema/guards";
 import {
+  CANVAS_VIEWS,
   fitToScreen,
   getFit,
   resetZoom,
@@ -95,8 +97,8 @@ import { componentPropEntries, isComponentDoc } from "../component-props";
 import { mediaDisplayName } from "./shared";
 import type { CanvasView, FitMode } from "../canvas/canvas-utils";
 import { EDITOR_KIND_LABELS } from "../commands/context";
-import type { EditorKind } from "../commands/context";
 import type { ParamValues } from "../page-params";
+import type { CommandArgValues } from "../commands/command-args";
 import type { Tab } from "../tabs/tab";
 import type { ResolvedI18n } from "@jxsuite/schema/locale";
 import type { JsonValue } from "../types";
@@ -257,7 +259,7 @@ export function mount(host: HTMLElement, ctx: PaneContextCtx) {
         }
         // Read reactive properties to establish tracking — mirrors the toolbar's subset.
         void tab.doc.document;
-        void tab.doc.document?.$layout;
+        void tab.doc.document.$layout;
         void tab.doc.mode;
         void tab.documentPath;
         void tab.capabilities.modes;
@@ -360,13 +362,13 @@ function renderPane(paneId: string, host: HTMLElement) {
   }
   try {
     const tab = tabOfPane(paneId);
-    const show = Boolean(tab) && wantsContextBar(tab as Tab);
+    const show = tab !== null && wantsContextBar(tab);
     if (!show) {
       disposePane(paneId);
       applyPaneContextOffset(0, host);
       return;
     }
-    const view = viewFor(tab as Tab, paneId, _ctx);
+    const view = viewFor(tab, paneId, _ctx);
     let surface = _surfaces.get(paneId);
     if (!surface || !surface.connected()) {
       disposePane(paneId);
@@ -458,12 +460,11 @@ function openPresetMenu(paneId: string, anchor: HTMLElement): void {
  * `check-lens-mutants.ts` said so, by surviving.
  */
 function menuRow(row: PresetRow): MenuRowProjection {
-  return {
+  const projection: MenuRowProjection = {
     destructive: false,
     disabled: row.disabled !== null,
     dividerAbove: false,
     id: rowId(row),
-    ...(row.disabled === null ? {} : { requires: row.disabled }),
     run: () => {
       /* THE PANE THE MENU IS ABOUT, before the verb that resolves the focus runs.
          See {@link PresetRow.pane}: all three of these commands take the focused pane as their
@@ -476,6 +477,10 @@ function menuRow(row: PresetRow): MenuRowProjection {
     },
     title: row.label,
   };
+  if (row.disabled !== null) {
+    projection.requires = row.disabled;
+  }
+  return projection;
 }
 
 /**
@@ -487,7 +492,7 @@ function rowId(row: PresetRow): string {
   const parts = [row.command];
   for (const key of ["preset", "media", "locale"] as const) {
     const value = row.args[key];
-    if (typeof value === "string") {
+    if (isString(value)) {
       parts.push(value);
     }
   }
@@ -498,7 +503,7 @@ function rowId(row: PresetRow): string {
 export interface PresetRow {
   label: string;
   command: string;
-  args: Record<string, unknown>;
+  args: CommandArgValues;
   /**
    * The pane this row is ABOUT — the one whose ⟲ opened the menu.
    *
@@ -824,12 +829,12 @@ function localeOf(tab: Tab | null): PaneLocale | null {
 function contextAxis(tab: Tab, paneId: string, ctx: PaneContextCtx): Partial<PaneContextView> {
   const { ui } = tab.session;
   const { featureQueries, sizeBreakpoints } = ctx.parseMediaEntries(
-    getEffectiveMedia(tab.doc.document?.$media as Record<string, string> | undefined),
+    getEffectiveMedia(tab.doc.document.$media),
   );
   const schemeQueries = featureQueries.filter(({ query }) => isSchemeQuery(query));
   const plainQueries = featureQueries.filter(({ query }) => !isSchemeQuery(query));
-  const scheme = (ui.previewColorScheme ?? "auto") as string;
-  const activeMedia = (ui.activeMedia ?? null) as string | null;
+  const scheme = ui.previewColorScheme;
+  const { activeMedia } = ui;
   const sizeLabel = activeMedia ? mediaDisplayName(activeMedia) : "Base";
   const schemeLabel = SCHEMES.find(([value]) => value === scheme)?.[1] ?? "Auto";
   const locale = localeOf(tab);
@@ -843,7 +848,7 @@ function contextAxis(tab: Tab, paneId: string, ctx: PaneContextCtx): Partial<Pan
   ]
     .filter((part) => part !== null)
     .join(" · ");
-  const hasLayout = isPageDoc(tab) && Boolean(getEffectiveLayoutPath(tab.doc.document?.$layout));
+  const hasLayout = isPageDoc(tab) && Boolean(getEffectiveLayoutPath(tab.doc.document.$layout));
   const page = isPageDoc(tab);
   const params = page ? paramRows(tab) : [];
   const props = page ? [] : propRows(tab, paneId);
@@ -851,7 +856,7 @@ function contextAxis(tab: Tab, paneId: string, ctx: PaneContextCtx): Partial<Pan
      way the Context trigger says `Base · Auto` — a chevron with no reading is a control you have to
      open in order to learn whether it was worth opening. */
   const resolvingSet = page
-    ? Object.values(ui.previewParams ?? {}).filter((v) => v !== "" && v !== undefined).length
+    ? Object.values(ui.previewParams).filter((v) => v !== "").length
     : Object.keys(ui.previewProps ?? {}).length;
   const hasResolving = page ? params.length > 0 : props.length > 0;
 
@@ -965,7 +970,7 @@ const FIT_CHOICES: readonly { value: string; fit: FitMode; label: string }[] = [
 
 /** Which entry the pod shows as chosen — a numeric fit reads as "actual size" only at 1. */
 function fitChoiceValue(fit: FitMode): string {
-  if (typeof fit === "number") {
+  if (isNumber(fit)) {
     return fit === 1 ? "actual" : "";
   }
   return fit;
@@ -1006,7 +1011,7 @@ function podFor(tab: Tab, paneId: string): Partial<PaneContextView> {
      computed from the side pane's own zoom, and its "100%" button reset the primary. */
   const surface = surfaceForPane(paneId);
   if (mode === "edit") {
-    const editZoom = tab.session.ui.editZoom ?? 1;
+    const { editZoom } = tab.session.ui;
     return { podState: "shown", zoomLabel: `${Math.round(editZoom * 100)}%` };
   }
   if (!STAGE_ZOOM_MODES.has(mode)) {
@@ -1041,7 +1046,7 @@ function podFor(tab: Tab, paneId: string): Partial<PaneContextView> {
  * `__jxAutomation` had no name for it. Going through the registry makes the control and the verb
  * one thing (one definition site per action, §13) and gets the breakpoint refusal for free.
  */
-function runContextCommand(paneId: string, id: string, args: Record<string, unknown>): void {
+function runContextCommand(paneId: string, id: string, args: CommandArgValues): void {
   // THIS pane, named. The bar is drawn once per pane and the side bar's controls write the side
   // Pane's tab; a verb defaulting to the focused pane would have made the side bar edit the
   // Foreground document the moment its control became a command.
@@ -1063,7 +1068,8 @@ function actionsFor(paneId: string, ctx: PaneContextCtx): PaneContextActions {
       if (!tab) {
         return;
       }
-      const mode = modeForEditorKind(tab, kind as EditorKind);
+      const editorKind = editorKindsOf(tab).find((candidate) => candidate === kind);
+      const mode = editorKind && modeForEditorKind(tab, editorKind);
       if (!mode) {
         return;
       }
@@ -1086,8 +1092,9 @@ function actionsFor(paneId: string, ctx: PaneContextCtx): PaneContextActions {
     },
     chooseView: (value) => {
       const tab = tabNow();
-      if (tab) {
-        setCanvasView(tab, value as CanvasView, ctx.setCanvasMode);
+      const view = CANVAS_VIEWS.find((candidate) => candidate === value);
+      if (tab && view) {
+        setCanvasView(tab, view, ctx.setCanvasMode);
       }
     },
     exportFile: ctx.exportFile,
@@ -1285,7 +1292,7 @@ function paramValuesFor(tab: Tab): ParamValues | null {
  * @param {ParamValues} values
  */
 function autoSelectParams(tab: Tab, values: ParamValues) {
-  const current = tab.session.ui.previewParams ?? {};
+  const current = tab.session.ui.previewParams;
   const additions: Record<string, string> = {};
   for (const [name, list] of Object.entries(values)) {
     if (!current[name] && list.length > 0) {
@@ -1314,7 +1321,7 @@ function paramRows(tab: Tab): PaneContextView["params"] {
     label: `Preview value for [${name}]`,
     name,
     options: (values?.[name] ?? []).map((value: string) => ({ label: value, value })),
-    value: previewParams?.[name] ?? "",
+    value: previewParams[name] ?? "",
   }));
 }
 
@@ -1330,6 +1337,8 @@ function paramRows(tab: Tab): PaneContextView["params"] {
  */
 function parsePropValue(raw: string): JsonValue {
   try {
+    // SAFETY: JSON.parse only ever yields null, a boolean, a number, a string, an array or a plain
+    // Object of those, which is exactly the JsonValue union.
     return JSON.parse(raw) as JsonValue;
   } catch {
     return raw;
@@ -1347,7 +1356,7 @@ function propRows(tab: Tab, paneId: string): PaneContextView["props"] {
   }
   const { previewProps } = tab.session.ui;
   const display = (v: JsonValue | undefined) =>
-    v === undefined ? "" : typeof v === "string" ? v : JSON.stringify(v);
+    v === undefined ? "" : isString(v) ? v : JSON.stringify(v);
   return componentPropEntries(doc).map(({ name }) => ({
     key: name,
     label: `Test value for ${name}`,

package/src/panels/pane-grid.ts

@@ -62,6 +62,7 @@ import {
   dropTargetForElements,
   monitorForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { isString } from "@jxsuite/schema/guards";
 import { isTabDropSource } from "./tab-drop";
 import { rectOf } from "../utils/geometry";
 import {
@@ -100,8 +101,22 @@ export interface PaneCell {
   surface: CanvasSurface;
 }
 
-/** A cell's record, plus the disposers its stage gestures and its drop zone live behind. */
-interface CellState extends PaneCell {
+/**
+ * A cell's record while the runtime fills it in, plus the disposers its stage gestures and its drop
+ * zone live behind.
+ *
+ * Every element field starts null and is written once, when the runtime creates that box (see
+ * {@link cellPart}). The runtime creates a row's nodes depth-first inside one synchronous render
+ * pass, so by the time anything outside that pass asks, {@link isDrawnCell} holds.
+ */
+interface CellState {
+  paneId: string;
+  root: HTMLElement | null;
+  strip: HTMLElement | null;
+  chrome: HTMLElement | null;
+  stage: HTMLElement | null;
+  dropZone: HTMLElement | null;
+  surface: CanvasSurface | null;
   /** Stage-gesture disposer, live between the stage's creation and the cell's disposal. */
   releaseGestures: (() => void) | null;
   /** The drop zone's pragmatic registration, live between its creation and the cell's disposal. */
@@ -128,9 +143,22 @@ let _scope: EffectScope | null = null;
  */
 let _dragMonitor: (() => void) | null = null;
 
+/** Whether every box of a cell has been created, which is what makes it a {@link PaneCell}. */
+function isDrawnCell(cell: CellState): cell is CellState & PaneCell {
+  return (
+    cell.root !== null &&
+    cell.strip !== null &&
+    cell.chrome !== null &&
+    cell.stage !== null &&
+    cell.dropZone !== null &&
+    cell.surface !== null
+  );
+}
+
 /** The cell a pane is drawn in, or null. Test-visible, and the bootstrap's handle on the primary. */
 export function cellForPane(paneId: string): PaneCell | null {
-  return _cells.get(paneId) ?? null;
+  const cell = _cells.get(paneId);
+  return cell !== undefined && isDrawnCell(cell) ? cell : null;
 }
 
 /**
@@ -149,9 +177,9 @@ export function paneGridReady(): Promise<void> {
  * The record for a pane, created when its cell's outermost box is, and reused for the life of the
  * cell.
  *
- * Every element field is typed non-null and starts null, the same bargain `CanvasSurface` makes:
- * the runtime creates a row's nodes depth-first inside one synchronous render pass, so the record
- * is complete before anything outside that pass can hold it.
+ * Every element field starts null: the runtime creates a row's nodes depth-first inside one
+ * synchronous render pass, so the record is complete before anything outside that pass can hold it
+ * through {@link cellForPane}.
  */
 function cellState(paneId: string): CellState {
   const existing = _cells.get(paneId);
@@ -159,15 +187,15 @@ function cellState(paneId: string): CellState {
     return existing;
   }
   const cell: CellState = {
-    chrome: null as unknown as HTMLElement,
-    dropZone: null as unknown as HTMLElement,
+    chrome: null,
+    dropZone: null,
     paneId,
     releaseDropZone: null,
     releaseGestures: null,
-    root: null as unknown as HTMLElement,
-    stage: null as unknown as HTMLElement,
-    strip: null as unknown as HTMLElement,
-    surface: null as unknown as CanvasSurface,
+    root: null,
+    stage: null,
+    strip: null,
+    surface: null,
   };
   _cells.set(paneId, cell);
   return cell;
@@ -229,12 +257,16 @@ function watchPaneFocus(paneId: string, root: HTMLElement): void {
  */
 function attachStage(cell: CellState, stage: HTMLElement): void {
   cell.stage = stage;
-  cell.surface = createPaneSurface(cell.paneId);
+  const surface = createPaneSurface(cell.paneId);
+  cell.surface = surface;
   registerCanvasSurface(cell.paneId, stage);
-  cell.releaseGestures = installStageGestures(cell.surface);
+  cell.releaseGestures = installStageGestures(surface);
   scheduleCanvasRender(cell.paneId);
 }
 
+/** What a cell's drop zone reports to a drag: refused, or the pane a drop would split beside. */
+type PaneEdgeData = { type: "pane-edge-refused" } | { paneId: string; type: "pane-edge" };
+
 /**
  * The RIGHT BAND of `paneId`'s cell, and only while it is legal to drop there: the grid is still
  * under {@link MAX_PANES}, and `paneId` names the LAST pane — the one a second pane would sit
@@ -245,11 +277,7 @@ function attachStage(cell: CellState, stage: HTMLElement): void {
  * that the rest of the stage keeps ordinary canvas gestures — a drag never reaches this at all
  * unless `canDrop` already accepted it, so the band only ever competes with itself.
  */
-function edgeData(
-  paneId: string,
-  input: { clientX: number },
-  element: HTMLElement,
-): Record<string, unknown> {
+function edgeData(paneId: string, input: { clientX: number }, element: HTMLElement): PaneEdgeData {
   if (workspace.panes.length >= MAX_PANES || workspace.panes.at(-1)?.id !== paneId) {
     return { type: "pane-edge-refused" };
   }
@@ -467,7 +495,8 @@ export function mount(): void {
     },
     onDrag({ location }) {
       const [target] = location.current.dropTargets;
-      const edgePane = target?.data.type === "pane-edge" ? (target.data.paneId as string) : "";
+      const paneId = target?.data.paneId;
+      const edgePane = target?.data.type === "pane-edge" && isString(paneId) ? paneId : "";
       _surface?.drag({ armed: true, edgePane });
     },
     onDragStart() {

package/src/panels/panel-registry.ts

@@ -35,15 +35,13 @@ import { activeTab } from "../workspace/workspace";
 import type { Level } from "../commands/levels";
 import type { CommandContext } from "../commands/context";
 import type { GitDiffState } from "../types";
-import type { JxMutableNode } from "@jxsuite/schema/types";
+import type { JxMutableNode, JxStateDefinition } from "@jxsuite/schema/types";
 import type { JxPath } from "../state";
 import type { Tab, TabUi } from "../tabs/tab";
 import type { nothing, TemplateResult } from "lit-html";
-import type { renderFilesTemplate } from "../files/files";
-import type { renderGitPanel } from "./git-panel";
-import type { renderHeadTemplate } from "./head-panel";
-import type { renderImportsTemplate } from "./imports-panel";
 import type { mountSignalsPanel } from "./signals-panel";
+import type webdataJson from "../../data/webdata.json";
+import type { DockDeclaration } from "../commands/budget";
 
 /**
  * The three docks that host panels.
@@ -61,16 +59,12 @@ export type PanelDock = "navigator" | "inspector" | "bottom";
  *
  * This is `left-panel.ts`'s old `LeftPanelCtx`, moved to the registry because it is now the panel
  * CONTRACT rather than one orchestrator's private argument list. `studio.ts` still builds it: the
- * renderers it injects (the file tree, the head panel, the git panel) close over bootstrap state,
- * and injecting them is what keeps `panels/*` free of an import cycle back through `studio.ts`.
+ * hooks it injects close over bootstrap state, and injecting them is what keeps `panels/*` free of
+ * an import cycle back through `studio.ts`.
  */
 export interface NavigatorPanelDeps {
   getCanvasMode: () => string;
   setCanvasMode: (tab: Tab | null, mode: string) => void;
-  // Typed against their implementations so every call site stays checked. These are type-only
-  // Imports, so they are erased — the modules themselves are never pulled in through this file.
-  renderImportsTemplate: typeof renderImportsTemplate;
-  renderFilesTemplate: typeof renderFilesTemplate;
   /**
    * Draw the Data panel into the painted host.
    *
@@ -79,20 +73,18 @@ export interface NavigatorPanelDeps {
    * import would close a cycle through `formula-workspace.ts`. A type-only import erases.
    */
   mountSignalsPanel: typeof mountSignalsPanel;
-  renderHeadTemplate: typeof renderHeadTemplate;
-  renderGitPanel: typeof renderGitPanel;
   renderCanvas: () => void;
   /** Canvas re-render that also lets automatic `Request` entries fetch (Data panel Refresh). */
   refreshData: () => void;
-  defCategory: (def: unknown) => string;
-  defBadgeLabel: (def: unknown) => string;
+  defCategory: (def: JxStateDefinition) => string;
+  defBadgeLabel: (def: JxStateDefinition) => string;
   navigateToComponent: (path: string) => void;
-  webdata: Record<string, unknown>;
-  defaultDef: (tag: string) => Record<string, unknown>;
+  /** The bundled `data/webdata.json`, which the Elements palette builds its blocks from. */
+  webdata: typeof webdataJson;
+  defaultDef: (tag: string) => JxMutableNode;
   registerLayersDnD: () => void;
   registerElementsDnD: () => void;
   registerComponentsDnD: () => void;
-  registerFileTreeDnD: (ctx: { renderLeftPanel: () => void }) => void;
   setGitDiffState: (state: GitDiffState | null) => void;
   cloneRepository?: () => void;
 }
@@ -111,8 +103,8 @@ export interface NavigatorDocument {
   mode: string;
   /** The whole selection SET the navigator/inspector panels render against (§6.7). */
   selection: JxPath[];
-  canvas: Record<string, unknown> | null;
-  content?: { frontmatter?: Record<string, unknown> } | undefined;
+  canvas: Tab["session"]["canvas"] | null;
+  content?: { frontmatter?: Tab["doc"]["content"]["frontmatter"] } | undefined;
   documentPath?: string | null | undefined;
   ui: TabUi;
 }
@@ -215,7 +207,7 @@ export function panelContext(): CommandContext {
   ctx.project.open = projectState !== null;
   ctx.project.isMultilingual =
     (resolveI18n(projectState?.projectConfig ?? {}).i18n?.locales.length ?? 0) > 1;
-  ctx.git.dirtyCount = shell.git.status?.files?.length ?? 0;
+  ctx.git.dirtyCount = shell.git.status?.files.length ?? 0;
   ctx.document.open = activeTab.value !== null;
   return ctx;
 }
@@ -333,11 +325,10 @@ function railablePanels(): readonly PanelRecord[] {
  */
 export function railGroups(ctx: CommandContext): RailGroup[] {
   const railable = railablePanels();
-  return RAIL_GROUP_LEVELS.map(({ level, label }) => ({
-    level,
-    label,
-    panels: railable.filter((panel) => panel.level === level && isPanelVisible(panel, ctx)),
-  })).filter((group) => group.panels.length > 0);
+  return RAIL_GROUP_LEVELS.flatMap(({ level, label }) => {
+    const panels = railable.filter((panel) => panel.level === level && isPanelVisible(panel, ctx));
+    return panels.length > 0 ? [{ level, label, panels }] : [];
+  });
 }
 
 /**
@@ -355,12 +346,6 @@ export function railPanelSet(): PanelRecord[] {
   );
 }
 
-/** One tabbed region and what it declares, in `commands/budget.ts`'s shape. */
-export interface PanelDockDeclaration {
-  dock: string;
-  tabs: readonly string[];
-}
-
 /**
  * The rail's two groups as budget declarations — the `rail/*` rows `scripts/check-chrome-budget.ts`
  * counts, observed rather than written down. `commands/budget.ts` no longer carries a copy.
@@ -369,10 +354,10 @@ export interface PanelDockDeclaration {
  * to be visible in one context. Search is registered and hidden today, and it still spends its rail
  * slot — which is the point, because its arrival must not silently push the rail to five.
  */
-export function railDeclarations(): PanelDockDeclaration[] {
+export function railDeclarations(): DockDeclaration[] {
   const railable = railablePanels();
-  return RAIL_GROUP_LEVELS.map(({ level }) => ({
-    dock: `rail/${level}`,
-    tabs: railable.filter((panel) => panel.level === level).map((panel) => panel.title),
-  })).filter((declaration) => declaration.tabs.length > 0);
+  return RAIL_GROUP_LEVELS.flatMap(({ level }) => {
+    const tabs = railable.filter((panel) => panel.level === level).map((panel) => panel.title);
+    return tabs.length > 0 ? [{ dock: `rail/${level}`, tabs }] : [];
+  });
 }