@jxsuite/studio 6.1.1 → 8.0.0

package/src/surfaces/rail.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioRail",
-  "$description": "The Navigator rail: a rendering of the panel registry. The adapter hands in `groups`, every rail-able panel grouped by level with its selected state and badge, and, for the foot, `libraryVisible`/`libraryOpen` for the Library button and `settingsVisible`/`settingsOpen` for the gear. Nothing here is a list of panels. Each button prints its record's short `railLabel` under the glyph, falling back to `title`, and carries the full `title` as its accessible name and tooltip: the visible words lead the name a reader hears (WCAG 2.5.3), and the tooltip restores what a short label leaves out.",
+  "$description": "The Navigator rail: a rendering of the panel registry. The adapter hands in `groups`, every rail-able panel grouped by level with its selected state and badge. Nothing here is a list of panels. Each button prints its record's short `railLabel` under the glyph, falling back to `title`, and carries the full `title` as its accessible name and tooltip: the visible words lead the name a reader hears (WCAG 2.5.3), and the tooltip restores what a short label leaves out. The rail has no foot: the gear lives in the top bar, because the rail is drawn only in the Design workspace, and the Library button left with the Content workspace that replaces it.",
   "tagName": "div",
   "attributes": {
     "part": "rail"
@@ -23,12 +23,6 @@
       "$description": "The element draws the hairline and announces it; what the rail owns is where it sits. The rule outranks `jx-divider`'s own margin by one element in the selector, which is the sanctioned way a host retunes a kit element (ui.md §3.2) and the reason the divider's spacing is on its HOST rather than on the rule inside it.",
       "margin": "var(--jx-space-3) var(--jx-space-4)"
     },
-    "& > [part=\"foot\"]": {
-      "marginTop": "auto",
-      "display": "flex",
-      "flexDirection": "column",
-      "padding": "var(--jx-space-3) 0"
-    },
     "& jx-action-button": {
       "width": "100%"
     },
@@ -44,11 +38,6 @@
       "background": "transparent",
       "color": "var(--jx-fg)",
       "opacity": "1"
-    },
-    "& jx-action-button[data-expanded] > [part=\"control\"]": {
-      "background": "var(--jx-hover-bg)",
-      "color": "var(--jx-fg)",
-      "opacity": "1"
     }
   },
   "children": [
@@ -156,153 +145,6 @@
           }
         }
       ]
-    },
-    {
-      "tagName": "div",
-      "attributes": {
-        "part": "foot"
-      },
-      "children": [
-        {
-          "$switch": {
-            "$ref": "#/state/libraryVisible"
-          },
-          "tagName": "div",
-          "attributes": {
-            "part": "foot-library"
-          },
-          "cases": {
-            "true": {
-              "tagName": "jx-action-button",
-              "$props": {
-                "label": "Library",
-                "hint": "Library",
-                "icon": "books",
-                "stacked": true,
-                "selected": {
-                  "$ref": "#/state/libraryOpen"
-                }
-              },
-              "attributes": {
-                "data-rail-action": "library.open"
-              },
-              "onclick": {
-                "$prototype": "Function",
-                "body": [
-                  {
-                    "operator": "call",
-                    "target": {
-                      "$ref": "#/state/openLibrary"
-                    },
-                    "value": []
-                  }
-                ]
-              },
-              "children": [
-                {
-                  "tagName": "span",
-                  "textContent": "Library"
-                }
-              ]
-            }
-          }
-        },
-        {
-          "tagName": "div",
-          "attributes": {
-            "part": "foot-settings"
-          },
-          "$switch": {
-            "$ref": "#/state/settingsVisible"
-          },
-          "cases": {
-            "true": {
-              "tagName": "jx-action-button",
-              "$props": {
-                "label": "Settings",
-                "hint": "Settings",
-                "icon": "gear",
-                "stacked": true,
-                "haspopup": "menu",
-                "expanded": {
-                  "$ref": "#/state/settingsOpen"
-                }
-              },
-              "attributes": {
-                "data-rail-menu": "settings",
-                "data-expanded": "${state.settingsOpen ? '' : null}"
-              },
-              "onclick": {
-                "$prototype": "Function",
-                "body": [
-                  {
-                    "operator": "call",
-                    "target": {
-                      "$ref": "#/state/openSettings"
-                    },
-                    "value": [
-                      {
-                        "$ref": "event#/currentTarget"
-                      }
-                    ]
-                  }
-                ]
-              },
-              "onkeydown": {
-                "$prototype": "Function",
-                "body": [
-                  {
-                    "$switch": {
-                      "$ref": "event#/key"
-                    },
-                    "cases": {
-                      "ArrowUp": [
-                        {
-                          "operator": "call",
-                          "target": {
-                            "$ref": "#/state/openSettings"
-                          },
-                          "value": [
-                            {
-                              "$ref": "event#/currentTarget"
-                            }
-                          ]
-                        },
-                        {
-                          "preventDefault": true
-                        }
-                      ],
-                      "ArrowDown": [
-                        {
-                          "operator": "call",
-                          "target": {
-                            "$ref": "#/state/openSettings"
-                          },
-                          "value": [
-                            {
-                              "$ref": "event#/currentTarget"
-                            }
-                          ]
-                        },
-                        {
-                          "preventDefault": true
-                        }
-                      ]
-                    }
-                  }
-                ]
-              },
-              "children": [
-                {
-                  "tagName": "span",
-                  "textContent": "Settings"
-                }
-              ]
-            }
-          }
-        }
-      ],
-      "$description": "The two rail buttons that open no Navigator panel: the Library, which is a canvas tab rather than a panel and so sits with the other exception, above the gear."
     }
   ]
 }

package/src/surfaces/rail.ts

@@ -11,46 +11,34 @@
  * whose only name is a hover tooltip is the accessibility failure studio-ui-guidelines.md §12.3
  * names — and `aria-pressed` states the toggle-focus semantics honestly: re-picking the open panel
  * collapses its dock, which is a two-state control, not a one-way selection. The label is the
- * record's `railLabel` when it declares one (Source Control's is "Source", because the full title
- * ellipsed in the 48px label box), and the full `title` stays the accessible name and the tooltip.
+ * record's `railLabel` when it declares one (none does today: Source Control's "Source" left the
+ * rail with it), and the full `title` stays the accessible name and the tooltip.
  *
- * The foot holds the two buttons that open no Navigator panel. **Library** runs `library.open`: the
- * Library is a canvas tab, not a panel, and its button is pressed while that tab is the focused
- * one. Below it is the ⚙ **Settings** menu, a menu button rendered from the `settings/menu`
- * placement: a record joins the gear by declaring the placement and there is nothing here to update
- * in step. With no registry, or one that declares nothing for either, the foot is empty.
+ * **The rail has no foot.** It is drawn only in the Design workspace (the frame hides its column
+ * everywhere else, `shell.ts`'s `applyDockLayout`), so a control every workspace needs cannot live
+ * here: the ⚙ Settings menu moved to the top bar, and the Library button left with the Library,
+ * which the Content workspace replaces.
  *
- * What this adapter owns is the projection and the two decisions: which panel a button toggles, and
- * where the gear's menu opens. The scope is reactive, so the surface follows `shell` through one
- * effect that recomputes the projection; nothing repaints.
+ * What this adapter owns is the projection and the one decision: which panel a button toggles. The
+ * scope is reactive, so the surface follows `shell` through one effect that recomputes the
+ * projection; nothing repaints.
  *
  * @docs studio/interface
  */
 import { activityBar } from "../store";
 import { effect, effectScope, reactive } from "../reactivity";
 import { requireNavigatorPanelId, shell, toggleActivityTab } from "../shell";
-import { refreshGitStatus } from "../panels/git-panel";
+import { refreshGitStatus } from "../publish/source-control";
 import { panelContext, railGroups } from "../panels/panel-registry";
 import { registerNavigatorPanels } from "../panels/navigator-panels";
-import { activeRegistry } from "../commands/active-registry";
-import { runActiveReported } from "../commands/run-reported";
-import {
-  dismissSettingsMenu,
-  isSettingsMenuOpen,
-  openSettingsMenu,
-  SETTINGS_MENU_PLACEMENT,
-} from "../panels/settings-menu";
 import { mountSurface, registerSurface } from "../ui/surface";
-import { libraryTabId } from "../browse/library-source";
-import { activeTab } from "../workspace/workspace";
 import railDoc from "./rail.json";
 
 import type { EffectScope } from "@vue/reactivity";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { PanelRecord } from "../panels/panel-registry";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("rail", railDoc as unknown as JxDocument);
+registerSurface("rail", railDoc);
 
 /** One rail button, as the surface reads it. */
 interface RailButton {
@@ -72,15 +60,9 @@ interface RailGroupProjection {
   panels: RailButton[];
 }
 
-interface RailScope extends Record<string, unknown> {
+interface RailScope {
   groups: RailGroupProjection[];
-  settingsVisible: boolean;
-  settingsOpen: boolean;
-  libraryVisible: boolean;
-  libraryOpen: boolean;
-  openLibrary: () => void;
   toggle: (id: string) => void;
-  openSettings: (anchor: unknown) => void;
 }
 
 let _scope: EffectScope | null = null;
@@ -112,14 +94,9 @@ export function toggleRailPanel(panel: PanelRecord): void {
 }
 
 /** The rail, as the surface reads it, from the registry and the shell as they stand now. */
-function project(): {
-  groups: RailGroupProjection[];
-  settingsVisible: boolean;
-  libraryVisible: boolean;
-  libraryOpen: boolean;
-} {
+function project(): RailGroupProjection[] {
   const ctx = panelContext();
-  const groups = railGroups(ctx).map((group, index) => ({
+  return railGroups(ctx).map((group, index) => ({
     dividerAbove: index > 0,
     label: group.label,
     level: group.level,
@@ -132,41 +109,12 @@ function project(): {
       title: panel.title,
     })),
   }));
-  const registry = activeRegistry();
-  const settingsVisible =
-    registry !== null && registry.forPlacement(SETTINGS_MENU_PLACEMENT).length > 0;
-  const libraryVisible =
-    registry?.get(LIBRARY_COMMAND) !== undefined && registry.isVisible(LIBRARY_COMMAND);
-  const libraryOpen = activeTab.value?.id === libraryTabId();
-  return { groups, libraryOpen, libraryVisible, settingsVisible };
 }
 
-/** The command the Library button runs: the record decides when it can, and what opening means. */
-const LIBRARY_COMMAND = "library.open";
-
 /** The reactive scope the surface reads, made once. */
 function state(): RailScope {
-  _state ??= reactive({
+  _state ??= reactive<RailScope>({
     groups: [],
-    libraryOpen: false,
-    libraryVisible: false,
-    openLibrary: () => {
-      void runActiveReported(LIBRARY_COMMAND, undefined, "Navigator rail");
-    },
-    openSettings: (anchor: unknown) => {
-      if (!(anchor instanceof HTMLElement)) {
-        return;
-      }
-      openSettingsMenu(anchor, {
-        rerender: () => {
-          if (_state) {
-            _state.settingsOpen = isSettingsMenuOpen();
-          }
-        },
-      });
-    },
-    settingsOpen: false,
-    settingsVisible: false,
     toggle: (id: string) => {
       const panel = railGroups(panelContext())
         .flatMap((group) => group.panels)
@@ -175,19 +123,13 @@ function state(): RailScope {
         toggleRailPanel(panel);
       }
     },
-  }) as RailScope;
+  });
   return _state;
 }
 
 /** Recompute the projection from the registry and the shell; the surface follows. */
 export function renderActivityBar(): void {
-  const scope = state();
-  const next = project();
-  scope.groups = next.groups;
-  scope.settingsVisible = next.settingsVisible;
-  scope.libraryVisible = next.libraryVisible;
-  scope.libraryOpen = next.libraryOpen;
-  scope.settingsOpen = isSettingsMenuOpen();
+  state().groups = project();
   ensureMounted();
 }
 
@@ -209,9 +151,11 @@ export function mount(): void {
   _scope = effectScope();
   _scope.run(() => {
     effect(() => {
-      // Source control is PROJECT state, so the badge is fetched and drawn without reference to
-      // Any tab. The badge needs a status once. A refresh that already failed must not re-arm this:
-      // The effect re-runs on the very state the failure writes, so retrying here spins.
+      // Source control is PROJECT state, so its status is fetched without reference to any tab.
+      // No rail button draws it now; the Command Bar's Publish count does, and this is the fetch
+      // That count reads (`ctx.git.dirtyCount`). It needs a status once. A refresh that already
+      // Failed must not re-arm this: the effect re-runs on the very state the failure writes, so
+      // Retrying here spins.
       const { error, loading, status } = shell.git;
       if (!status && !loading && !error) {
         void refreshGitStatus();
@@ -222,7 +166,6 @@ export function mount(): void {
 }
 
 export function unmount(): void {
-  dismissSettingsMenu();
   _scope?.stop();
   _scope = null;
   const pending = _mount;

package/src/surfaces/reference-field.ts

@@ -25,16 +25,9 @@ import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import referenceDoc from "./reference-field.json";
 
-import type { JxDocument } from "@jxsuite/schema/types";
-import type { SurfaceHandle } from "../ui/surface";
+import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
 
-registerSurface("reference-field", referenceDoc as unknown as JxDocument);
-
-/** One row of the picker: an entry id, the empty row, or the value that is not on disk. */
-export interface ReferenceChoice {
-  value: string;
-  label: string;
-}
+registerSurface("reference-field", referenceDoc);
 
 /** What the field says right now. Every field is the flow's, never a state it derives. */
 export interface ReferenceFieldView {
@@ -50,7 +43,7 @@ export interface ReferenceFieldView {
   /** The entry id the field holds, as a string. */
   value: string;
   /** The picker's rows, in the order they are offered. Empty on a text field. */
-  options: ReferenceChoice[];
+  options: SurfaceOption[];
   /** True while the read is in flight: the picker is inert and says so in its one row. */
   disabled: boolean;
   /** A sentence under the control. Empty draws none. */
@@ -82,8 +75,7 @@ export interface ReferenceFieldSurfaceHandle {
   dispose: () => void;
 }
 
-interface ReferenceScope
-  extends Record<string, unknown>, ReferenceFieldView, ReferenceFieldActions {}
+interface ReferenceScope extends ReferenceFieldView, ReferenceFieldActions {}
 
 /** The view a freshly mounted surface starts on: a picker that has not been told anything. */
 function emptyView(): ReferenceFieldView {
@@ -112,7 +104,7 @@ export function mountReferenceFieldSurface(
   actions: ReferenceFieldActions,
 ): ReferenceFieldSurfaceHandle {
   host.textContent = "";
-  const scope = reactive<ReferenceScope>({ ...emptyView(), ...actions }) as ReferenceScope;
+  const scope: ReferenceScope = reactive<ReferenceScope>({ ...emptyView(), ...actions });
 
   /** `null` while a mount is in flight — which is a standing surface, not a missing one. */
   let handle: SurfaceHandle | null = null;
@@ -121,13 +113,17 @@ export function mountReferenceFieldSurface(
 
   const mount = (): Promise<HTMLElement> =>
     mountSurface("reference-field", scope, host).then((mounted) => {
+      /* SAFETY: `reference-field.json`'s root definition carries `tagName: "div"`, so the runtime
+         mounts an HTMLElement; a `Text` root only comes from a document whose root is a bare
+         string. */
+      const root = mounted.root as HTMLElement;
       mounting = false;
       if (disposed) {
         mounted.dispose();
-        return mounted.root as HTMLElement;
+        return root;
       }
       handle = mounted;
-      return mounted.root as HTMLElement;
+      return root;
     });
 
   const ready = mount();

package/src/surfaces/schema-builder.ts

@@ -19,7 +19,7 @@
  * Settings › Data Shapes edits the project's `$defs` and this edits a content type's `schema`, and
  * they are the same object drawn with the same six controls per row — so the two documents are the
  * same card inside a different shell, and the views are one set of types. A second declaration of
- * {@link SchemaFieldView} would be the point at which the two cards start to drift, one field at a
+ * {@link DefsFieldView} would be the point at which the two cards start to drift, one field at a
  * time, with nothing failing.
  *
  * @docs studio/data/tables
@@ -29,28 +29,18 @@ import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import builderDoc from "./schema-builder.json";
 
-import type { JxDocument } from "@jxsuite/schema/types";
-import type { SurfaceHandle } from "../ui/surface";
-import type { DefsChoice, DefsFieldView, NestedFieldView } from "./settings-defs";
+import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
+import type { DefsFieldView } from "./settings-defs";
 
-registerSurface("schema-builder", builderDoc as unknown as JxDocument);
-
-/** One row of a picker: a field type, a format, or a reference target. */
-export type SchemaFieldChoice = DefsChoice;
-
-/** One field of the object being edited, as the document draws it. */
-export type SchemaFieldView = DefsFieldView;
-
-/** One child of an `object` field. It carries its parent — a nested `$map` shadows `$map.item`. */
-export type NestedSchemaFieldView = NestedFieldView;
+registerSurface("schema-builder", builderDoc);
 
 /** Everything the document draws, as one value. */
 export interface SchemaBuilderView {
-  fields: SchemaFieldView[];
-  typeOptions: SchemaFieldChoice[];
-  formatOptions: SchemaFieldChoice[];
+  fields: DefsFieldView[];
+  typeOptions: SurfaceOption[];
+  formatOptions: SurfaceOption[];
   /** The content types a reference field can point at. Empty draws no target picker. */
-  targets: SchemaFieldChoice[];
+  targets: SurfaceOption[];
   /** Whether the foot of the list is offering the add button or the add form. */
   addState: "closed" | "open";
   addName: string;
@@ -94,7 +84,7 @@ export interface SchemaBuilderSurfaceHandle {
   dispose: () => void;
 }
 
-interface BuilderScope extends Record<string, unknown>, SchemaBuilderView, SchemaBuilderActions {}
+interface BuilderScope extends SchemaBuilderView, SchemaBuilderActions {}
 
 /** The view a freshly mounted surface starts on: no fields, and no add form. */
 function emptyView(): SchemaBuilderView {
@@ -124,7 +114,7 @@ export function mountSchemaBuilderSurface(
   actions: SchemaBuilderActions,
 ): SchemaBuilderSurfaceHandle {
   host.textContent = "";
-  const scope = reactive<BuilderScope>({ ...emptyView(), ...actions }) as BuilderScope;
+  const scope: BuilderScope = reactive<BuilderScope>({ ...emptyView(), ...actions });
 
   /** `null` while a mount is in flight — which is a standing surface, not a missing one. */
   let handle: SurfaceHandle | null = null;
@@ -133,13 +123,17 @@ export function mountSchemaBuilderSurface(
 
   const mount = (): Promise<HTMLElement> =>
     mountSurface("schema-builder", scope, host).then((mounted) => {
+      /* SAFETY: `schema-builder.json`'s root definition carries `tagName: "div"`, so the runtime
+         mounts an HTMLElement; a `Text` root only comes from a document whose root is a bare
+         string. */
+      const root = mounted.root as HTMLElement;
       mounting = false;
       if (disposed) {
         mounted.dispose();
-        return mounted.root as HTMLElement;
+        return root;
       }
       handle = mounted;
-      return mounted.root as HTMLElement;
+      return root;
     });
 
   const ready = mount();

package/src/surfaces/schema-form.json

@@ -80,6 +80,11 @@
       "gap": "var(--jx-space-1)",
       "minWidth": "0"
     },
+    "& [part=\"row\"] > [part=\"cell\"]:only-of-type > *": {
+      "$description": "A row of one cell (an item of a list of single values: a category, a picture) gives that cell the row's width, so a list reads as the fields around it do rather than as a column of stubs.",
+      "flex": "1",
+      "minWidth": "0"
+    },
     "& [part=\"row-add\"]": {
       "alignSelf": "flex-start"
     },
@@ -236,6 +241,9 @@
                       },
                       "multiline": {
                         "$ref": "$map/item/multiline"
+                      },
+                      "type": {
+                        "$ref": "$map/item/inputType"
                       }
                     },
                     "oninput": {
@@ -621,7 +629,7 @@
                     ]
                   },
                   "rows": {
-                    "$description": "An array whose items are objects with a declared shape: one row per item, one cell per declared property, a remove beside each and one add below. The alternative was the raw-JSON editor, which is what an array of anything else still gets — a shape the schema states is a shape the form can draw.",
+                    "$description": "An array whose items have a declared shape: one row per item, one cell per declared property of an object item, or one cell for a single-value item (a list of categories, a gallery of pictures), with a remove beside each and one add below. The alternative was the raw-JSON editor, which is what an array of anything else still gets: a shape the schema states is a shape the form can draw.",
                     "tagName": "span",
                     "attributes": {
                       "part": "rows",
@@ -858,7 +866,7 @@
                                     }
                                   },
                                   "control": {
-                                    "$description": "A cell a registered control owns — a relationship to another collection is the one that reaches here. The document draws the empty host and nothing inside it; `ui/schema-form.ts` mounts the control into it, by the same dispatch a FIELD host gets. An extension's control is its own surface rather than part of this one, and the seam between them is this empty node.",
+                                    "$description": "A cell a registered control owns: a relationship to another collection, or a picture (the media field). The document draws the empty host and nothing inside it; `ui/schema-form.ts` mounts the control into it, by the same dispatch a FIELD host gets. An extension's control is its own surface rather than part of this one, and the seam between them is this empty node.",
                                     "tagName": "span",
                                     "attributes": {
                                       "part": "cell-control-host",