@jxsuite/studio 6.1.1 → 6.1.2

package/src/surfaces/statements.ts

@@ -26,25 +26,20 @@
  * @docs studio/logic/statements
  */
 
+import { isJsonObject, isString } from "@jxsuite/schema/guards";
 import { reactive } from "../reactivity";
 import { REGION_ATTR } from "../ui/regions";
 import { mountSurface, registerSurface } from "../ui/surface";
 import statementsDoc from "./statements.json";
-import type { JxDocument, JxElement } from "@jxsuite/schema/types";
+import type { JxElement } from "@jxsuite/schema/types";
 import type { JxScope } from "@jxsuite/runtime/types";
-import type { SurfaceHandle } from "../ui/surface";
+import type { SurfaceHandle, SurfaceOption } from "../ui/surface";
 
-registerSurface("statements", statementsDoc as unknown as JxDocument);
+registerSurface("statements", statementsDoc);
 
 /** Which control one operand of a statement draws. The flow picks it; the document switches on it. */
 export type StatementFieldKind = "control" | "text" | "select" | "flags";
 
-/** A closed list of choices, in the shape the kit's select reads. */
-export interface StatementOption {
-  value: string;
-  label: string;
-}
-
 /** One `eventInit` flag of a `dispatchEvent` statement. */
 export interface StatementFlagView {
   /** `<row>::<prop>::<flag>` — self-contained, because a third `$map` shadows both above it. */
@@ -64,7 +59,7 @@ export interface StatementFieldView {
   /** What a `text` or `select` control holds. Empty for the other two kinds. */
   value: string;
   placeholder: string;
-  options: StatementOption[];
+  options: SurfaceOption[];
   flags: StatementFlagView[];
 }
 
@@ -119,7 +114,7 @@ export interface StatementIslands {
   controlSlot: (id: string, host: HTMLElement) => void;
 }
 
-interface StatementScope extends Record<string, unknown>, StatementActions {
+interface StatementScope extends StatementActions {
   rows: StatementRowView[];
 }
 
@@ -171,7 +166,7 @@ export function renderStatementsSurface(
      region is a fact about the HOST — who is drawing this editor — not about the document inside
      it, so it should be true the moment the host is claimed rather than a frame later. */
   host.setAttribute(REGION_ATTR, region);
-  const scope = reactive({ ...actions, rows }) as StatementScope;
+  const scope: StatementScope = reactive<StatementScope>({ ...actions, rows });
   const record: Mounted = { disposed: false, handle: null, scope };
   mounts.set(host, record);
   /* No race to arbitrate: a repaint arriving while this is in flight takes the branch above — a
@@ -200,16 +195,16 @@ export function renderStatementsSurface(
 
 /** The `part` a node was rendered with, or "". */
 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 : "";
 }
 
 /** The `key` of the `$map` item a node was rendered inside, or "". */
 function itemKey(state: JxScope | undefined): string {
-  const item = (state?.["$map"] as { item?: unknown } | undefined)?.item;
-  const key =
-    item !== null && typeof item === "object" ? (item as Record<string, unknown>).key : "";
-  return typeof key === "string" ? key : "";
+  const map = state?.["$map"];
+  const item = isJsonObject(map) ? map["item"] : undefined;
+  const key = isJsonObject(item) ? item["key"] : "";
+  return isString(key) ? key : "";
 }
 
 /**

package/src/surfaces/statusbar.ts

@@ -54,12 +54,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 +72,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 +85,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 +147,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;
   }
@@ -266,7 +267,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 +283,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 +292,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 +307,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"]'));
   });
 }
 

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;

package/src/surfaces/tab-strip.ts

@@ -28,20 +28,21 @@
  * @docs studio/interface
  */
 
+import { isJsonObject, isString } from "@jxsuite/schema/guards";
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import tabStripDoc from "./tab-strip.json";
-import type { JxDocument, JxElement } from "@jxsuite/schema/types";
+import type { JxElement } from "@jxsuite/schema/types";
 import type { JxScope } from "@jxsuite/runtime/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("tab-strip", tabStripDoc as unknown as JxDocument);
+registerSurface("tab-strip", tabStripDoc);
 
 /**
  * One chip, as the document draws it. Every field is a value: the document asks no question about a
  * tab, and there is no branch in it that a projection has not already decided.
  */
-export interface TabChipView extends Record<string, unknown> {
+export interface TabChipView {
   /** The tab id: the repeater's key, the tab's `value`, and what every action is addressed with. */
   key: string;
   /** The shortest suffix that tells this document apart, or a page's route. */
@@ -107,7 +108,7 @@ export interface TabStripActions {
   /** The chevron, or a derived pane's ✕. The anchor is the button that was pressed. */
   openTrailing: (anchor: HTMLElement | null) => void;
   /** A wheel over the strip. A host function in handler position, so it takes the event. */
-  wheel: (scope: unknown, event: WheelEvent) => void;
+  wheel: (scope: JxScope, event: WheelEvent) => void;
   /** A chip element exists. `panels/tab-strip.ts` makes it a pragmatic drag source and drop target. */
   chipHost: (element: HTMLElement, id: string) => void;
   /**
@@ -146,20 +147,20 @@ export interface TabStripSurface {
 }
 
 /** The scope `tab-strip.json` reads. */
-interface TabStripScope
-  extends Record<string, unknown>, TabStripValues, TabStripActions, TabStripDragState {}
+interface TabStripScope extends TabStripValues, TabStripActions, TabStripDragState {}
 
 /** The `part` a node's definition carries, or `""` for a text node or an unmarked element. */
 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 : "";
 }
 
 /** The tab id a mapped `jx-tab` node was rendered for, read from the row scope, or `""`. */
 function mappedChipKey(state: JxScope | undefined): string {
-  const map = state?.["$map"] as { item?: { key?: unknown } } | undefined;
-  const key = map?.item?.key;
-  return typeof key === "string" ? key : "";
+  const map = state?.["$map"];
+  const item = isJsonObject(map) ? map["item"] : undefined;
+  const key = isJsonObject(item) ? item["key"] : undefined;
+  return isString(key) ? key : "";
 }
 
 /**
@@ -178,13 +179,13 @@ export function mountTabStripSurface(
   values: TabStripValues,
   actions: TabStripActions,
 ): TabStripSurface {
-  const scope = reactive<TabStripScope>({
+  const scope: TabStripScope = reactive<TabStripScope>({
     ...values,
     ...actions,
     dragKey: "",
     dropIndex: -1,
     dropTail: false,
-  }) as TabStripScope;
+  });
 
   host.replaceChildren();
   let mounted: SurfaceHandle | null = null;

package/src/surfaces/target-line.ts

@@ -46,11 +46,10 @@ import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import { openMenu } from "./menu";
 import targetLineDoc from "./target-line.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { MenuHandle, MenuRowProjection } from "./menu";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("target-line", targetLineDoc as unknown as JxDocument);
+registerSurface("target-line", targetLineDoc);
 
 /** The region the line stamps on itself, so a shot can crop it. */
 const REGION = "inspector/target";
@@ -108,7 +107,7 @@ export const BASE_SELECTOR_LABEL = "base rule";
 // ─── The projection ──────────────────────────────────────────────────────────
 
 /** One word of the sentence, as the document reads it. */
-interface ProjectedSegment extends Record<string, unknown> {
+interface ProjectedSegment {
   key: string;
   label: string;
   title: string;
@@ -119,7 +118,7 @@ interface ProjectedSegment extends Record<string, unknown> {
 }
 
 /** The scope `target-line.json` reads. */
-interface TargetLineScope extends Record<string, unknown> {
+interface TargetLineScope {
   region: string;
   segments: ProjectedSegment[];
   selectorLabel: string;
@@ -201,7 +200,7 @@ function scope(): TargetLineScope {
     toggleLabel: "Show affected",
     warn: false,
     warningText: "",
-  }) as TargetLineScope;
+  });
   return _scope;
 }
 
@@ -311,11 +310,11 @@ export function openSelectorMenu(): void {
       },
       title: BASE_SELECTOR_LABEL,
     },
-    ...selector.options.map((option, index) => ({
+    ...selector.options.map((option, index): MenuRowProjection => ({
       /* What the ● in the old menu said: this element already DECLARES this rule. Where you are is
          stated once, by the trigger's own label — a row that carried both facts would be two
          answers on one line. */
-      checked: (selector.declared.has(option) ? "true" : "false") as "true" | "false",
+      checked: selector.declared.has(option) ? "true" : "false",
       destructive: false,
       disabled: false,
       dividerAbove: index === 0,

package/src/surfaces/welcome.ts

@@ -24,16 +24,15 @@ import { runOfferedAction } from "../account/action-flow";
 import { platformSupportsAddRepo } from "../new-project/add-repo-modal";
 import { getProjectList } from "../project-list";
 import { reactive } from "../reactivity";
-import { now } from "../services/clock";
+import { MINUTE, now } from "../services/clock";
 import { clearRecentProjects, getRecentProjects, removeRecentProject } from "../recent-projects";
 import { platformSupportsClone } from "../panels/git-panel";
 import { mountSurface, registerSurface } from "../ui/surface";
 import welcomeDoc from "./welcome.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 import type { AccountNotice, OfferedAction } from "../types";
 
-registerSurface("welcome", welcomeDoc as unknown as JxDocument);
+registerSurface("welcome", welcomeDoc);
 
 interface WelcomeCtx {
   openProject: () => void;
@@ -122,7 +121,6 @@ export function recentLocations(
   return labels;
 }
 
-const MINUTE = 60_000;
 const HOUR = 60 * MINUTE;
 const DAY = 24 * HOUR;
 
@@ -195,7 +193,7 @@ interface CatalogueRow {
   detail: string;
 }
 
-interface WelcomeScope extends Record<string, unknown> {
+interface WelcomeScope {
   actions: StartAction[];
   installNeeded: boolean;
   installUrl: string;
@@ -292,7 +290,7 @@ function noticeAction(key: string): OfferedAction | null {
 
 /** The reactive scope the surface reads, made once. */
 function state(): WelcomeScope {
-  _state ??= reactive({
+  _state ??= reactive<WelcomeScope>({
     actions: [],
     catalogue: [],
     clear: () => {
@@ -342,7 +340,7 @@ function state(): WelcomeScope {
         }
       }
     },
-  }) as WelcomeScope;
+  });
   return _state;
 }
 

package/src/tabs/patch-ops.ts

@@ -7,6 +7,7 @@
 
 // oxlint-disable-next-line unicorn/prefer-export-from -- JxDocOpPair is also used locally (TransactionRecord)
 import type { JxDocOpPair } from "@jxsuite/schema/doc-ops";
+import type { JxDocumentValue, JxMutableNode } from "@jxsuite/schema/types";
 import type { JxPath } from "../state";
 import type { Tab } from "./tab.js";
 
@@ -48,8 +49,8 @@ export type { JxDocOpPair };
  */
 export interface JxFmOp {
   field: string;
-  before?: unknown;
-  after?: unknown;
+  before?: JxDocumentValue | undefined;
+  after?: JxDocumentValue | undefined;
 }
 
 /** Everything recorded during one transaction. */
@@ -82,7 +83,7 @@ export interface PatchConsumer {
    * was consumed by whichever pane's effect ran first, so the second full-rendered every patched
    * edit while the skip counter reported one skip.
    */
-  markConsumed: (docRef: object, tab: Tab) => void;
+  markConsumed: (docRef: JxMutableNode, tab: Tab) => void;
   /**
    * Apply the batch to all ready canvas panels. Throws on any failure (caller escalates). `record`
    * carries the value-carrying `docOps` the iframe consumer posts across the frame boundary; the