@jxsuite/studio 6.1.1 → 8.0.0

package/src/surfaces/panel-problems.ts

@@ -25,10 +25,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import problemsDoc from "./panel-problems.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-problems", problemsDoc as unknown as JxDocument);
+registerSurface("panel-problems", problemsDoc);
 
 /** One problem, as the document draws it. Every field is a value: no records, no closures. */
 export interface ProblemRowView {
@@ -87,7 +86,7 @@ export interface ProblemsSurfaceHandle {
 }
 
 /** The scope the document reads: the projection, and the four things a row can ask for. */
-interface ProblemsScope extends Record<string, unknown> {
+interface ProblemsScope {
   hasProblems: boolean;
   clearLabel: string;
   groups: ProblemGroupView[];
@@ -117,7 +116,7 @@ export function mountProblemsSurface(
   values: ProblemsValues,
   actions: ProblemsActions,
 ): ProblemsSurfaceHandle {
-  const scope = reactive<ProblemsScope>({
+  const scope: ProblemsScope = reactive<ProblemsScope>({
     clearAll: actions.clearAll,
     clearLabel: "",
     dismissRow: actions.dismissRow,
@@ -125,7 +124,7 @@ export function mountProblemsSurface(
     hasProblems: false,
     openPath: actions.openPath,
     runAction: actions.runAction,
-  }) as ProblemsScope;
+  });
   project(scope, values);
 
   let mounted: SurfaceHandle | null = null;
@@ -143,8 +142,7 @@ export function mountProblemsSurface(
        answer is simply whether this handle is still wanted. Once mounted, the question is whether
        the root is still where it was put: a dock that repainted with another tab selected, or one
        that collapsed, had the panel body emptied out from under it. */
-    connected: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();

package/src/surfaces/panel-signals.json

@@ -8,7 +8,7 @@
     "data-refreshing": "${state.refreshing ? '' : null}"
   },
   "style": {
-    "$description": "The `.signal-*`, `.signals-*` and `.data-*` rules of `styles/inspector.css`, carried here and keyed on `part`. A signal row is `part=\"entry\"` rather than `part=\"row\"` because the value tree mounted INSIDE an open one is `surfaces/panel-data.json`, whose lines are `part=\"row\"`; two documents sharing a container may not share a part name. Three token repairs travel with them, all of the shape `surfaces/git-panel.json` describes: `--spectrum-font-size-50` and the bare `10px` literals resolved only inside `<sp-theme>` and a document is mounted outside it, so every rule that read one would silently have taken its px fallback \u2014 they are `--jx-text-sm` (11px) and `--jx-text-xs` (10px) here, at the same values \u2014 and `--spectrum-corner-radius-75` is `--jx-radius-xs`, also at its own value. ONE rule is repaired rather than moved: `.signal-badge.handler` never matched anything, because `defCategory` has returned `\"function\"` since the handler category was renamed, so a function entry's badge was the only one of five drawn untinted. The tint is keyed on the category the projection actually emits now, and `--handler` is the token it was always written against. And one is DELETED, because the kit already draws it: `.signal-del`'s hand-rolled visibility hiding is `[part=\"delete\"]`'s reveal on `:hover` and on `:focus-within` \u2014 the old rule was `:hover` alone, so tabbing to Delete moved the keyboard onto an invisible control.",
+    "$description": "The `.signal-*`, `.signals-*` and `.data-*` rules of `styles/inspector.css`, carried here and keyed on `part`. A signal row is `part=\"entry\"` rather than `part=\"row\"` because the value tree mounted INSIDE an open one is `surfaces/panel-data.json`, whose lines are `part=\"row\"`; two documents sharing a container may not share a part name. Three token repairs travel with them, all of one shape: `--spectrum-font-size-50` and the bare `10px` literals resolved only inside `<sp-theme>` and a document is mounted outside it, so every rule that read one would silently have taken its px fallback \u2014 they are `--jx-text-sm` (11px) and `--jx-text-xs` (10px) here, at the same values \u2014 and `--spectrum-corner-radius-75` is `--jx-radius-xs`, also at its own value. ONE rule is repaired rather than moved: `.signal-badge.handler` never matched anything, because `defCategory` has returned `\"function\"` since the handler category was renamed, so a function entry's badge was the only one of five drawn untinted. The tint is keyed on the category the projection actually emits now, and `--handler` is the token it was always written against. And one is DELETED, because the kit already draws it: `.signal-del`'s hand-rolled visibility hiding is `[part=\"delete\"]`'s reveal on `:hover` and on `:focus-within` \u2014 the old rule was `:hover` alone, so tabbing to Delete moved the keyboard onto an invisible control.",
     "display": "flex",
     "flexDirection": "column",
     "minHeight": "0",

package/src/surfaces/panel-signals.ts

@@ -16,7 +16,7 @@
  * field, and a table field's rows and cells — and inside the innermost one `$map/item` is the cell,
  * so a control genuinely cannot see the entry it belongs to. Each record therefore carries the
  * entry name, the field key and (for a cell) its row and column, which the flow looks straight back
- * up. That is the same answer `surfaces/git-panel.json` gives for its nested file rows.
+ * up. That is the same answer `surfaces/publish-workspace.json` gives for its nested file rows.
  *
  * **Five islands, all through `onNodeCreated`** (specs/studio-ui-guidelines.md §9.4). The
  * expression editor, the statement-card editor and the media picker are lit surfaces of their own
@@ -24,35 +24,23 @@
  * resolved-value tree is a document of its own (`surfaces/panel-data.ts`). The document renders an
  * empty host for each and the flow fills it.
  *
- * **The container is not cleared**, for the reason `surfaces/git-panel.ts` states: a panel body is
- * a node lit renders into and its comment markers are how lit finds its own content again. So the
- * document is APPENDED, and {@link SignalsSurfaceHandle.attached} is how the panel finds out that
- * the Navigator has since painted another panel over the top of it.
+ * **The container is not cleared**, because a panel body is a node lit renders into and its comment
+ * markers are how lit finds its own content again. So the document is APPENDED, and
+ * {@link SignalsSurfaceHandle.attached} is how the panel finds out that the Navigator has since
+ * painted another panel over the top of it.
  *
  * @docs studio/logic/data
  */
 
+import { isJsonObject, isString } from "@jxsuite/schema/guards";
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import signalsDoc from "./panel-signals.json";
-import type { JxDocument } from "@jxsuite/schema/types";
+import type { JsonObject, JxElement } from "@jxsuite/schema/types";
 import type { JxScope } from "@jxsuite/runtime/types";
-import type { SurfaceHandle } from "../ui/surface";
+import type { SurfaceHandle, SurfaceOption, SurfaceOptionGroup } from "../ui/surface";
 
-registerSurface("panel-signals", signalsDoc as unknown as JxDocument);
-
-/** One row of a picker, as `jx-select` reads it. */
-export interface SignalOption {
-  value: string;
-  label: string;
-}
-
-/** A named run of picker rows. `jx-select` draws both halves of a group's delimiter. */
-export interface SignalOptionGroup {
-  id: string;
-  label: string;
-  rows: SignalOption[];
-}
+registerSurface("panel-signals", signalsDoc);
 
 /** One chip of the basic parameter editor. */
 export interface SignalChipView {
@@ -158,7 +146,7 @@ export interface SignalFieldView {
   error: string;
   hasError: boolean;
   checked: boolean;
-  options: SignalOption[];
+  options: SurfaceOption[];
   /** Which island this host is for — `expression`, `statements`, `media` or `schema`. */
   slot: string;
   chips: SignalChipView[];
@@ -209,8 +197,8 @@ export interface SignalsView {
   listState: "listed" | "empty";
   emptyMessage: string;
   categories: SignalCategoryView[];
-  addOptions: SignalOption[];
-  addGroups: SignalOptionGroup[];
+  addOptions: SurfaceOption[];
+  addGroups: SurfaceOptionGroup[];
   /** What the add picker holds. Always `""` at rest — see {@link SignalsActions.addSignal}. */
   addValue: string;
 }
@@ -262,7 +250,7 @@ export interface SignalsSurfaceHandle {
   dispose: () => void;
 }
 
-interface SignalsScope extends Record<string, unknown>, SignalsView, SignalsActions {}
+interface SignalsScope extends SignalsView, SignalsActions {}
 
 /** One island's host, and what it is a host for. */
 interface IslandRecord {
@@ -272,23 +260,22 @@ interface IslandRecord {
 }
 
 /** The `part` a node was authored with, or `""` — the only thing this adapter asks about a node. */
-function partOf(def: unknown): string {
-  const attributes = (def as { attributes?: Record<string, unknown> } | null)?.attributes;
-  const part = attributes?.["part"];
-  return typeof part === "string" ? part : "";
+function partOf(def: JxElement | string): string {
+  const part = isString(def) ? undefined : def.attributes?.["part"];
+  return isString(part) ? part : "";
 }
 
 /** The `$map` item a node was rendered inside, if it was rendered inside one. */
-function mapItem(state: JxScope | undefined): Record<string, unknown> | null {
-  const map = state?.["$map"] as { item?: unknown } | undefined;
-  const item = map?.item;
-  return item !== null && typeof item === "object" ? (item as Record<string, unknown>) : null;
+function mapItem(state: JxScope | undefined): JsonObject | null {
+  const map = state?.["$map"];
+  const item = isJsonObject(map) ? map["item"] : undefined;
+  return isJsonObject(item) ? item : null;
 }
 
 /** A string field off a `$map` item, or `""`. */
-function itemString(item: Record<string, unknown> | null, field: string): string {
+function itemString(item: JsonObject | null, field: string): string {
   const value = item?.[field];
-  return typeof value === "string" ? value : "";
+  return isString(value) ? value : "";
 }
 
 /** The scope's starting shape, before the first projection lands on it. */
@@ -332,7 +319,7 @@ export function mountSignalsSurface(
   actions: SignalsActions,
   paint: SignalIslandPainter,
 ): SignalsSurfaceHandle {
-  const scope = reactive<SignalsScope>({
+  const scope: SignalsScope = reactive<SignalsScope>({
     ...emptyView(),
     ...actions,
     /* The picker never rests on what was picked. A controlled input is authoritative only while
@@ -346,7 +333,7 @@ export function mountSignalsSurface(
       actions.addSignal(type);
       scope.addValue = "";
     },
-  }) as SignalsScope;
+  });
   project(scope, view);
 
   /**
@@ -424,8 +411,7 @@ export function mountSignalsSurface(
        whether this handle is still wanted — answering no would start a second mount racing the
        first. Once mounted, the question is whether the root is still where it was put: a Navigator
        that painted another panel cleared this document out from under it. */
-    attached: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    attached: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();

package/src/surfaces/panel-stylebook-layers.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioPanelStylebookLayers",
-  "$description": "The Outline panel while the pane is showing Project Styles: the element catalogue as a list of selectable tags, and the document's own custom properties under the other tab. The adapter hands in one flat projection per row — its badge, its name, how deep it sits, whether the open file has already styled it and whether it is the selected one — so nothing here walks the catalogue tree, reads the component registry or knows what a `& tag` style key is. A row asks the host to select the compound path it was given, by that path.",
+  "$description": "The Outline panel while the pane is showing a document's Elements view: the element catalogue as a list of selectable tags. The adapter hands in one flat projection per row — its badge, its name, how deep it sits, whether the open file has already styled it and whether it is the selected one — so nothing here walks the catalogue tree, reads the component registry or knows what a `& tag` style key is. A row asks the host to select the compound path it was given, by that path. The project's CSS custom properties are not listed here: `project.json` in the Styles workspace has its own Navigator, the Styles panel (`styles-panel.json`), which lists them.",
   "tagName": "div",
   "attributes": {
     "part": "stylebook-layers"
@@ -72,9 +72,6 @@
       "fontSize": "9px",
       "textAlign": "center"
     },
-    "& [part=\"badge\"][data-kind=\"variable\"]": {
-      "fontFamily": "var(--font-mono)"
-    },
     "& [part=\"label\"]": {
       "flex": "1",
       "minWidth": "24px",
@@ -86,34 +83,6 @@
       "$description": "The file has already styled this tag. The kit's neutral disc in the accent, which is the one thing about it that was ever this surface's own.",
       "background": "var(--accent)"
     },
-    "& [part=\"value\"]": {
-      "maxWidth": "80px",
-      "overflow": "hidden",
-      "color": "var(--fg-dim)",
-      "fontSize": "var(--jx-text-sm)",
-      "textOverflow": "ellipsis",
-      "whiteSpace": "nowrap"
-    },
-    "& [part=\"empty\"]": {
-      "$description": "Drawn here rather than borrowed from `panels/empty-state.ts`, which is a lit template a document cannot call. What is kept is the pattern's rules (studio-ui-guidelines.md §11): one sentence saying what the region is for, then where its content comes from.",
-      "display": "flex",
-      "flexDirection": "column",
-      "alignItems": "center",
-      "gap": "var(--jx-space-3)",
-      "padding": "var(--jx-space-5)",
-      "textAlign": "center",
-      "color": "var(--fg-dim)",
-      "fontSize": "var(--jx-text-md)"
-    },
-    "& [part=\"empty-message\"], & [part=\"empty-detail\"]": {
-      "margin": "0",
-      "maxWidth": "28ch",
-      "lineHeight": "1.5"
-    },
-    "& [part=\"empty-detail\"]": {
-      "fontSize": "var(--jx-text-sm)",
-      "opacity": "0.8"
-    },
     "@(forced-colors: active)": {
       "& [part=\"row\"][aria-current=\"true\"]": {
         "$description": "The selected row, redrawn. Every author colour is replaced by one from the user's palette in forced colours, so the accent wash behind the row collapses into the page and the left edge is the only marker left.",
@@ -125,193 +94,91 @@
     {
       "tagName": "div",
       "attributes": {
-        "part": "tab-slot",
-        "role": "none"
+        "part": "list",
+        "data-tab": "elements"
       },
-      "style": {
-        "display": "contents"
-      },
-      "$switch": {
-        "$ref": "#/state/tab"
-      },
-      "cases": {
-        "elements": {
-          "tagName": "div",
-          "attributes": {
-            "part": "list",
-            "data-tab": "elements"
+      "children": [
+        {
+          "$prototype": "Array",
+          "items": {
+            "$ref": "#/state/rows"
+          },
+          "key": {
+            "$ref": "$map/item/key"
           },
-          "children": [
-            {
-              "$prototype": "Array",
-              "items": {
-                "$ref": "#/state/rows"
+          "map": {
+            "tagName": "button",
+            "attributes": {
+              "part": "row",
+              "type": "button",
+              "data-path": "${$map.item.key}",
+              "data-kind": "${$map.item.kind}",
+              "aria-current": "${$map.item.selected ? 'true' : null}"
+            },
+            "style": {
+              "--row-indent": {
+                "$ref": "$map/item/indent"
+              }
+            },
+            "onclick": {
+              "$prototype": "Function",
+              "body": [
+                {
+                  "operator": "call",
+                  "target": {
+                    "$ref": "#/state/selectRow"
+                  },
+                  "value": [
+                    {
+                      "$ref": "$map/item/key"
+                    }
+                  ]
+                }
+              ]
+            },
+            "children": [
+              {
+                "tagName": "span",
+                "attributes": {
+                  "part": "badge",
+                  "data-kind": "${$map.item.kind}"
+                },
+                "textContent": "${$map.item.tag}"
               },
-              "key": {
-                "$ref": "$map/item/key"
+              {
+                "tagName": "span",
+                "attributes": {
+                  "part": "label"
+                },
+                "textContent": "${$map.item.label}"
               },
-              "map": {
-                "tagName": "button",
+              {
+                "tagName": "span",
                 "attributes": {
-                  "part": "row",
-                  "type": "button",
-                  "data-path": "${$map.item.key}",
-                  "data-kind": "${$map.item.kind}",
-                  "aria-current": "${$map.item.selected ? 'true' : null}"
+                  "part": "dot-slot",
+                  "role": "none"
                 },
                 "style": {
-                  "--row-indent": {
-                    "$ref": "$map/item/indent"
-                  }
+                  "display": "contents"
                 },
-                "onclick": {
-                  "$prototype": "Function",
-                  "body": [
-                    {
-                      "operator": "call",
-                      "target": {
-                        "$ref": "#/state/selectRow"
-                      },
-                      "value": [
-                        {
-                          "$ref": "$map/item/key"
-                        }
-                      ]
-                    }
-                  ]
+                "$switch": {
+                  "$ref": "$map/item/customized"
                 },
-                "children": [
-                  {
-                    "tagName": "span",
-                    "attributes": {
-                      "part": "badge",
-                      "data-kind": "${$map.item.kind}"
-                    },
-                    "textContent": "${$map.item.tag}"
-                  },
-                  {
-                    "tagName": "span",
-                    "attributes": {
-                      "part": "label"
-                    },
-                    "textContent": "${$map.item.label}"
-                  },
-                  {
-                    "tagName": "span",
+                "cases": {
+                  "true": {
+                    "tagName": "jx-dot",
                     "attributes": {
-                      "part": "dot-slot",
-                      "role": "none"
-                    },
-                    "style": {
-                      "display": "contents"
-                    },
-                    "$switch": {
-                      "$ref": "$map/item/customized"
-                    },
-                    "cases": {
-                      "true": {
-                        "tagName": "jx-dot",
-                        "attributes": {
-                          "part": "dot",
-                          "role": "img",
-                          "aria-label": "Styled in this file"
-                        }
-                      }
+                      "part": "dot",
+                      "role": "img",
+                      "aria-label": "Styled in this file"
                     }
                   }
-                ]
-              }
-            }
-          ]
-        },
-        "variables": {
-          "tagName": "div",
-          "attributes": {
-            "part": "variables-slot",
-            "role": "none"
-          },
-          "style": {
-            "display": "contents"
-          },
-          "$switch": {
-            "$ref": "#/state/hasVariables"
-          },
-          "cases": {
-            "true": {
-              "tagName": "ul",
-              "attributes": {
-                "part": "list",
-                "data-tab": "variables"
-              },
-              "children": [
-                {
-                  "$prototype": "Array",
-                  "items": {
-                    "$ref": "#/state/variables"
-                  },
-                  "key": {
-                    "$ref": "$map/item/key"
-                  },
-                  "map": {
-                    "tagName": "li",
-                    "attributes": {
-                      "part": "row",
-                      "data-kind": "variable",
-                      "data-path": "${$map.item.name}"
-                    },
-                    "children": [
-                      {
-                        "tagName": "span",
-                        "attributes": {
-                          "part": "badge",
-                          "data-kind": "variable"
-                        },
-                        "textContent": "var"
-                      },
-                      {
-                        "tagName": "span",
-                        "attributes": {
-                          "part": "label"
-                        },
-                        "textContent": "${$map.item.name}"
-                      },
-                      {
-                        "tagName": "span",
-                        "attributes": {
-                          "part": "value"
-                        },
-                        "textContent": "${$map.item.value}"
-                      }
-                    ]
-                  }
                 }
-              ]
-            },
-            "false": {
-              "tagName": "div",
-              "attributes": {
-                "part": "empty"
-              },
-              "children": [
-                {
-                  "tagName": "p",
-                  "attributes": {
-                    "part": "empty-message"
-                  },
-                  "textContent": "No variables defined."
-                },
-                {
-                  "tagName": "p",
-                  "attributes": {
-                    "part": "empty-detail"
-                  },
-                  "textContent": "A custom property declared on this file's own style block is listed here."
-                }
-              ]
-            }
+              }
+            ]
           }
         }
-      }
+      ]
     }
   ]
 }

package/src/surfaces/panel-stylebook-layers.ts

@@ -26,10 +26,9 @@
 import { reactive } from "../reactivity";
 import { mountSurface, registerSurface } from "../ui/surface";
 import stylebookLayersDoc from "./panel-stylebook-layers.json";
-import type { JxDocument } from "@jxsuite/schema/types";
 import type { SurfaceHandle } from "../ui/surface";
 
-registerSurface("panel-stylebook-layers", stylebookLayersDoc as unknown as JxDocument);
+registerSurface("panel-stylebook-layers", stylebookLayersDoc);
 
 /**
  * One line of the catalogue, as the document draws it. Every field is a value: no records, no
@@ -56,24 +55,9 @@ export interface StylebookRowView {
   kind: string;
 }
 
-/** One custom property the open file declares. */
-export interface StylebookVariableView {
-  /** The reconcile key. Same as {@link name}; kept separate so the key never follows the label. */
-  key: string;
-  /** The property, `--accent` and its like. */
-  name: string;
-  /** Whatever it is declared as, as text. */
-  value: string;
-}
-
 /** What the panel says the surface should be showing right now. */
 export interface StylebookLayersValues {
-  /** `elements` or `variables` — `shell.stylebook.tab`, which names the `$switch` case. */
-  tab: string;
   rows: StylebookRowView[];
-  variables: StylebookVariableView[];
-  /** Whether there is anything under the variables tab: the document has no `length` to ask. */
-  hasVariables: boolean;
 }
 
 /** What a control can ask the panel to do. The one thing a row does is select itself. */
@@ -91,15 +75,11 @@ export interface StylebookLayersSurfaceHandle {
 }
 
 /** The scope the document reads: the projection, plus the one thing a row can ask for. */
-interface StylebookLayersScope
-  extends Record<string, unknown>, StylebookLayersValues, StylebookLayersActions {}
+interface StylebookLayersScope extends StylebookLayersValues, StylebookLayersActions {}
 
 /** Write a projection into the scope. */
 function project(scope: StylebookLayersScope, values: StylebookLayersValues): void {
-  scope.tab = values.tab;
   scope.rows = values.rows;
-  scope.variables = values.variables;
-  scope.hasVariables = values.hasVariables;
 }
 
 /**
@@ -116,13 +96,10 @@ export function mountStylebookLayersSurface(
   values: StylebookLayersValues,
   actions: StylebookLayersActions,
 ): StylebookLayersSurfaceHandle {
-  const scope = reactive<StylebookLayersScope>({
-    hasVariables: false,
+  const scope: StylebookLayersScope = reactive<StylebookLayersScope>({
     rows: [],
     selectRow: actions.selectRow,
-    tab: "elements",
-    variables: [],
-  }) as StylebookLayersScope;
+  });
   project(scope, values);
 
   let mounted: SurfaceHandle | null = null;
@@ -141,8 +118,7 @@ export function mountStylebookLayersSurface(
        mount racing the first. Once mounted, the question is whether the root is still where it was
        put: a Navigator that painted another panel, or the Outline's own lit branch, cleared this
        document out from under it. */
-    connected: () =>
-      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    connected: () => !disposed && (mounted === null || mounted.root.parentNode === container),
     dispose() {
       disposed = true;
       mounted?.dispose();