@jxsuite/studio 6.1.1 → 8.0.0

package/src/surfaces/statusbar.ts

@@ -47,6 +47,8 @@ import { attachJumpBarHost, mountJumpBar, unmountJumpBar } from "../panels/jump-
 import { shell } from "../shell";
 import { effect, effectScope, reactive } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
+import { PROJECT_STYLES_VIEW } from "../style/project-styles";
+import { stylebookTarget } from "../style/stylebook-target";
 import { activeRegistry } from "../commands/active-registry";
 import { runReported } from "../commands/run-reported";
 import { deployStatusItem } from "../publish/deploy-checklist";
@@ -54,12 +56,12 @@ import { collabState } from "../collab/collab-state";
 import { problemCount, problems } from "../services/notify";
 import { mountSurface, registerSurface } from "../ui/surface";
 import statusbarDoc from "./statusbar.json";
+import type { CommandArgValues } from "../commands/command-args";
 import type { CommandRegistry } from "../commands/registry";
 import type { EffectScope } from "@vue/reactivity";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("statusbar", statusbarDoc as unknown as JxDocument);
+registerSurface("statusbar", statusbarDoc);
 
 let _scope: EffectScope | null = null;
 
@@ -72,7 +74,7 @@ interface StatusItem {
   label: string;
   /** Extra context for the tooltip. The command's own title and chord are added to it. */
   title?: string;
-  args?: Record<string, unknown>;
+  args?: CommandArgValues;
 }
 
 /** One item as the surface reads it: a button that runs a command through `run`, or a readout. */
@@ -85,7 +87,7 @@ interface ProjectedItem {
   disabled: boolean;
   /** For a button: what `run` runs. */
   command: string | null;
-  args: Record<string, unknown> | undefined;
+  args: CommandArgValues | undefined;
 }
 
 interface ProjectedField {
@@ -147,9 +149,10 @@ function projectField(
   items: readonly (StatusItem | null)[],
 ): ProjectedField | null {
   const region = `statusbar/${id}`;
-  const live = items
-    .map((item) => (item === null ? null : projectItem(registry, region, item)))
-    .filter((item): item is ProjectedItem => item !== null);
+  const live = items.flatMap((item) => {
+    const projected = item === null ? null : projectItem(registry, region, item);
+    return projected === null ? [] : [projected];
+  });
   if (live.length === 0) {
     return null;
   }
@@ -163,6 +166,14 @@ export function aheadBehindLabel(ahead: number, behind: number): string {
   return `${ahead > 0 ? ` ↑${ahead}` : ""}${behind > 0 ? ` ↓${behind}` : ""}`;
 }
 
+/** "No changes", "1 changed file", "3 changed files": what the branch item's tooltip states. */
+export function changedFilesLabel(count: number): string {
+  if (count === 0) {
+    return "No changes";
+  }
+  return count === 1 ? "1 changed file" : `${count} changed files`;
+}
+
 function projectField_(registry: CommandRegistry | null): ProjectedField | null {
   const project = projectState;
   const { status } = shell.git;
@@ -182,11 +193,16 @@ function projectField_(registry: CommandRegistry | null): ProjectedField | null
        — and adjacent duplicate chrome is what the chrome budget (studio-ui-guidelines.md §12.2)
        forbids. `tests/statusbar.test.ts` pins the pairing from both ends, so deleting the
        checklist's repo step fails there rather than quietly taking the state off the bar. */
+    /* `publish.open { tab: "review" }` rather than the bare workspace setter: the setter's title
+       is "Switch Workspace", which says nothing about where a branch item goes, and the Publish
+       workspace remembers its last sub-tab, so a click from a count of changes could land on
+       Hosting. Review changes is the tab that count is a count of. */
     status?.isRepo === true && status.branch
       ? {
-          command: "panel.focus.git",
+          args: { tab: "review" },
+          command: "publish.open",
           label: `⑂ ${status.branch}${aheadBehindLabel(status.ahead, status.behind)}`,
-          title: `${status.files.length} changed file(s)`,
+          title: `${changedFilesLabel(status.files.length)} on ${status.branch}`,
         }
       : null,
     // Where the project stands with shipping — ambient state, so it belongs beside the branch and
@@ -202,7 +218,7 @@ function projectField_(registry: CommandRegistry | null): ProjectedField | null
           args: { tab: "problems" },
           command: "view.setBottomTab",
           label: `⚠ ${count}`,
-          title: `${count} problem(s)`,
+          title: count === 1 ? "1 problem" : `${count} problems`,
         }
       : null,
     /* `collab.showStatus` — "what is happening in this document?" — because that is the question a
@@ -232,28 +248,36 @@ function projectField_(registry: CommandRegistry | null): ProjectedField | null
  * states it permanently, with its ancestors, one field to the left.
  */
 function selectionField(registry: CommandRegistry | null): ProjectedField | null {
-  const paths = activeTab.value?.session.selection ?? [];
-  if (paths.length > 0) {
-    // A document selection owns the field even when it prints nothing: the Stylebook's selector
-    // Below would otherwise appear while an element is picked, which is two answers to one question.
-    return paths.length > 1
+  const tab = activeTab.value;
+  /* The Stylebook's selection is what the Style panel is editing, and it is a selection OF the
+     Stylebook canvas, so it is the field's content exactly while the focused tab draws that canvas,
+     and never elsewhere. It outlives a workspace switch (coming back to Styles finds `h1` still
+     picked), but a Content page or the Publish home is not editing `h1`, and the field used to say
+     it was there. The Style panel gates on the same mode (`panels/style-panel.ts`).
+
+     It also wins over the document selection here, because in that mode the document selection is
+     not the author's: picking a tag clears it (`selectStylebookTag`), so the "a single selection
+     prints nothing" rule below hid the rule being edited in the one place it applied. The command
+     bar and the Inspector header ask the same question through `stylebookTarget`. */
+  if (tab?.session.ui.canvasMode === PROJECT_STYLES_VIEW) {
+    const target = stylebookTarget(tab);
+    return target
       ? projectField(registry, "selection", [
           {
             command: null,
-            label: `${paths.length} selected`,
-            title: `${paths.length} elements are selected; the trail names the primary`,
+            label: target.replaceAll(" ", " › "),
+            title: "The style rule being edited",
           },
         ])
       : null;
   }
-  // The stylebook's own selection is a selection: it is what the Style panel is editing, and it is
-  // The only thing in this field when no document node is picked.
-  return shell.stylebook.selection
+  const paths = tab?.session.selection ?? [];
+  return paths.length > 1
     ? projectField(registry, "selection", [
         {
           command: null,
-          label: shell.stylebook.selection.replaceAll(" ", " › "),
-          title: "The style rule being edited",
+          label: `${paths.length} selected`,
+          title: `${paths.length} elements are selected; the trail names the primary`,
         },
       ])
     : null;
@@ -266,7 +290,7 @@ function present(fields: readonly (ProjectedField | null)[]): ProjectedField[] {
   return fields.filter((field): field is ProjectedField => field !== null);
 }
 
-interface StatusbarScope extends Record<string, unknown> {
+interface StatusbarScope {
   /** The fields before the DOCUMENT slot: PROJECT. */
   leading: ProjectedField[];
   /** Whether the DOCUMENT slot has a trail to show. */
@@ -282,7 +306,7 @@ let _handle: SurfaceHandle | null = null;
 
 /** The reactive scope the surface reads, made once. */
 function state(): StatusbarScope {
-  _state ??= reactive({
+  _state ??= reactive<StatusbarScope>({
     hasDocument: false,
     leading: [],
     run: (key: string) => {
@@ -291,11 +315,11 @@ function state(): StatusbarScope {
         .find((i) => i.key === key);
       const registry = activeRegistry();
       if (item?.command && registry) {
-        void runReported(registry, item.command, item.args as never, "Status Bar");
+        void runReported(registry, item.command, item.args, "Status Bar");
       }
     },
     trailing: [],
-  }) as StatusbarScope;
+  });
   return _state;
 }
 
@@ -306,17 +330,19 @@ function state(): StatusbarScope {
  * is the same hand-over the pane grid gives the tab strip and the context bar.
  */
 function ensureMounted(): void {
-  if (_mount || !statusbarEl) {
+  // The host is captured, so the mount callback below reads the element this call checked.
+  const host = statusbarEl;
+  if (_mount || !host) {
     return;
   }
-  const mount = mountSurface("statusbar", state(), statusbarEl);
+  const mount = mountSurface("statusbar", state(), host);
   _mount = mount;
   void mount.then((handle) => {
     if (_mount !== mount) {
       return;
     }
     _handle = handle;
-    attachJumpBarHost(statusbarEl.querySelector<HTMLElement>('[part="trail"]'));
+    attachJumpBarHost(host.querySelector<HTMLElement>('[part="trail"]'));
   });
 }
 
@@ -349,6 +375,7 @@ export function mountStatusbar(): void {
       // Reading it here is what repaints the bar from a skeleton into the real thing.
       void activeRegistry();
       void shell.stylebook.selection;
+      void activeTab.value?.session.ui.canvasMode;
       void shell.git.status;
       void problems.length;
       const tab = activeTab.value;

package/src/surfaces/style-panel.ts

@@ -22,13 +22,15 @@
  * @docs studio/design/style-inspector
  */
 
+import { isString } from "@jxsuite/schema/guards";
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import stylePanelDoc from "./style-panel.json";
-import type { JxDocument, JxElement } from "@jxsuite/schema/types";
+import type { JxElement } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
+import type { ColorTokenView } from "../ui/color-selector";
 
-registerSurface("style-panel", stylePanelDoc as unknown as JxDocument);
+registerSurface("style-panel", stylePanelDoc);
 
 // ─── The projection ──────────────────────────────────────────────────────────
 
@@ -58,19 +60,6 @@ export type StyleRowKind =
 /** How the provenance chip is drawn: not at all, as a control, or as a statement. */
 export type StyleChipControl = "none" | "button" | "text";
 
-/**
- * One colour the project has named, as the row's palette draws it.
- *
- * `value` is the reference and `color` is the literal behind it, and they are two fields because
- * they are two things: choosing a swatch commits `var(--color-accent)`, while the chip is only how
- * that reads on screen. `label` is what a reader hears — a swatch is never named by its hex.
- */
-export interface StyleTokenView extends Record<string, unknown> {
-  value: string;
-  color: string;
-  label: string;
-}
-
 /**
  * One keyword a `keywords` row lists under its field.
  *
@@ -78,7 +67,7 @@ export interface StyleTokenView extends Record<string, unknown> {
  * — and the two stay separate because the field holds the value: a combobox row's label is a
  * courtesy, never a second spelling the reader could end up with.
  */
-export interface StyleOptionView extends Record<string, unknown> {
+export interface StyleOptionView {
   value: string;
   label: string;
   /** A muted note at the end of the row — a font token's own name beside its display name. */
@@ -97,7 +86,7 @@ export interface StyleOptionView extends Record<string, unknown> {
 }
 
 /** One value of a button-group row. */
-export interface StyleButtonView extends Record<string, unknown> {
+export interface StyleButtonView {
   /** The owning row's key — a nested `$map` shadows `$map.item`, so the row carries it here. */
   row: string;
   /** The CSS value this button commits, and the button's identity in the repeater. */
@@ -130,7 +119,7 @@ export interface StyleButtonView extends Record<string, unknown> {
  * `prop` is the name a reader, the region grammar and the inspector see. The two are different on
  * purpose: one coordinate's `color` and another's are two rows with one name.
  */
-export interface StyleRowView extends Record<string, unknown> {
+export interface StyleRowView {
   key: string;
   prop: string;
   label: string;
@@ -177,7 +166,7 @@ export interface StyleRowView extends Record<string, unknown> {
   choicesHint: string;
   buttons: StyleButtonView[];
   /** The palette a colour row offers inside its picker, and whether it has one to offer. */
-  tokens: StyleTokenView[];
+  tokens: ColorTokenView[];
   hasTokens: boolean;
   overflowSelected: boolean;
   expanded: boolean;
@@ -190,7 +179,7 @@ export interface StyleRowView extends Record<string, unknown> {
 }
 
 /** One accordion section. */
-export interface StyleSectionView extends Record<string, unknown> {
+export interface StyleSectionView {
   key: string;
   label: string;
   open: boolean;
@@ -236,14 +225,14 @@ export interface StylePanelActions {
   /** The provenance chip, a custom pair's remove and a nested rule's remove are one verb. */
   chipClick: (key: string) => void;
   /** Open the Value Source picker under the chip that was pressed. */
-  pickSource: (key: string, anchor: unknown) => void;
+  pickSource: (key: string, anchor: EventTarget | null) => void;
   /** Open the row's list of offerable values under the button that was pressed. */
-  pickChoice: (key: string, anchor: unknown) => void;
+  pickChoice: (key: string, anchor: EventTarget | null) => void;
   pressButton: (key: string, value: string) => void;
   toggleShorthand: (key: string) => void;
   renameCustom: (key: string, name: string) => void;
   /** Enter in the add-a-property field. Given the field too, because it is emptied on success. */
-  addCustom: (key: string, field: unknown) => void;
+  addCustom: (key: string, field: EventTarget | null) => void;
   openNested: (key: string) => void;
   addNested: () => void;
 }
@@ -264,12 +253,12 @@ export interface StylePanelSurface {
 }
 
 /** The scope the document reads: the view plus the actions, flat. */
-interface StylePanelScope extends Record<string, unknown>, StylePanelView, StylePanelActions {}
+interface StylePanelScope extends StylePanelView, StylePanelActions {}
 
 /** A node definition's `part`, as written in the document. */
 function partOf(def: JxElement | string): string {
-  const part = typeof def === "string" ? undefined : def.attributes?.["part"];
-  return typeof part === "string" ? part : "";
+  const part = isString(def) ? undefined : def.attributes?.["part"];
+  return isString(part) ? part : "";
 }
 
 /** Write a whole view into the scope. Assignment only — the mount is never rebuilt for a repaint. */
@@ -300,7 +289,7 @@ export function mountStylePanelSurface(
   actions: StylePanelActions,
   hosts: StyleHostSink,
 ): StylePanelSurface {
-  const scope = reactive<StylePanelScope>({
+  const scope: StylePanelScope = reactive<StylePanelScope>({
     ...actions,
     emptyActionLabel: "",
     emptyMessage: "",
@@ -308,7 +297,7 @@ export function mountStylePanelSurface(
     hasEmptyAction: false,
     sections: [],
     view: "empty",
-  }) as StylePanelScope;
+  });
   project(scope, view);
 
   host.replaceChildren();
@@ -334,9 +323,7 @@ export function mountStylePanelSurface(
        dock that redrew took the tab's root away without telling anyone. */
     connected: () =>
       !disposed &&
-      (mounted === null
-        ? host.childNodes.length === 0
-        : (mounted.root as Node).parentNode === host),
+      (mounted === null ? host.childNodes.length === 0 : mounted.root.parentNode === host),
     dispose() {
       disposed = true;
       hosts.target(null);

package/src/surfaces/stylebook-chrome.ts

@@ -29,10 +29,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import chromeDoc from "./stylebook-chrome.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("stylebook-chrome", chromeDoc as unknown as JxDocument);
+registerSurface("stylebook-chrome", chromeDoc);
 
 /** What the bar says right now. Every field is the panel's own wording, never a value it derives. */
 export interface StylebookChromeView {
@@ -64,8 +63,7 @@ export interface StylebookChromeSurface {
   update: (view: StylebookChromeView) => void;
 }
 
-interface StylebookChromeScope
-  extends Record<string, unknown>, StylebookChromeView, StylebookChromeActions {}
+interface StylebookChromeScope extends StylebookChromeView, StylebookChromeActions {}
 
 /**
  * Create the bar's surface, mounted into a host of its own.
@@ -84,7 +82,7 @@ export function createStylebookChromeSurface(
 ): StylebookChromeSurface {
   const host = document.createElement("div");
   host.style.display = "contents";
-  const scope = reactive({ ...view, ...actions }) as StylebookChromeScope;
+  const scope: StylebookChromeScope = reactive<StylebookChromeScope>({ ...view, ...actions });
 
   /** `null` while a mount is in flight — which is a standing surface, not a missing one. */
   let handle: SurfaceHandle | null = null;