@jxsuite/studio 6.1.2 → 8.0.0

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

@@ -55,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. */
@@ -94,10 +79,7 @@ interface StylebookLayersScope extends StylebookLayersValues, StylebookLayersAct
 
 /** 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;
 }
 
 /**
@@ -115,11 +97,8 @@ export function mountStylebookLayersSurface(
   actions: StylebookLayersActions,
 ): StylebookLayersSurfaceHandle {
   const scope: StylebookLayersScope = reactive<StylebookLayersScope>({
-    hasVariables: false,
     rows: [],
     selectRow: actions.selectRow,
-    tab: "elements",
-    variables: [],
   });
   project(scope, values);
 

package/src/surfaces/preferences.json

@@ -206,6 +206,21 @@
       "flex": "1",
       "color": "var(--fg-dim)",
       "minWidth": "0"
+    },
+    "& [part=\"appearance\"]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "gap": "var(--jx-space-5)"
+    },
+    "& [part=\"developer-row\"]": {
+      "display": "flex",
+      "flexDirection": "column",
+      "gap": "var(--jx-space-1)"
+    },
+    "& [part=\"developer-note\"]": {
+      "margin": "0",
+      "fontSize": "var(--jx-text-sm)",
+      "color": "var(--fg-dim)"
     }
   },
   "children": [
@@ -295,70 +310,127 @@
                 "appearance": {
                   "tagName": "div",
                   "attributes": {
-                    "part": "theme-row"
+                    "part": "appearance"
                   },
                   "children": [
                     {
-                      "tagName": "span",
+                      "tagName": "div",
                       "attributes": {
-                        "part": "theme-label"
+                        "part": "theme-row"
                       },
-                      "textContent": "Theme"
+                      "children": [
+                        {
+                          "tagName": "span",
+                          "attributes": {
+                            "part": "theme-label"
+                          },
+                          "textContent": "Theme"
+                        },
+                        {
+                          "tagName": "jx-action-group",
+                          "attributes": {
+                            "part": "themes"
+                          },
+                          "$props": {
+                            "selects": "single",
+                            "compact": true,
+                            "label": "Theme"
+                          },
+                          "children": [
+                            {
+                              "$prototype": "Array",
+                              "items": {
+                                "$ref": "#/state/themes"
+                              },
+                              "key": {
+                                "$ref": "$map/item/value"
+                              },
+                              "map": {
+                                "tagName": "jx-action-button",
+                                "attributes": {
+                                  "part": "theme",
+                                  "data-theme": "${$map.item.value}"
+                                },
+                                "$props": {
+                                  "size": "sm",
+                                  "checked": {
+                                    "$ref": "$map/item/checked"
+                                  }
+                                },
+                                "onclick": {
+                                  "$prototype": "Function",
+                                  "body": [
+                                    {
+                                      "operator": "call",
+                                      "target": {
+                                        "$ref": "#/state/setTheme"
+                                      },
+                                      "value": [
+                                        {
+                                          "$ref": "$map/item/value"
+                                        }
+                                      ]
+                                    }
+                                  ]
+                                },
+                                "children": [
+                                  {
+                                    "tagName": "span",
+                                    "textContent": "${$map.item.label}"
+                                  }
+                                ]
+                              }
+                            }
+                          ]
+                        }
+                      ]
                     },
                     {
-                      "tagName": "jx-action-group",
+                      "tagName": "div",
                       "attributes": {
-                        "part": "themes"
-                      },
-                      "$props": {
-                        "selects": "single",
-                        "compact": true,
-                        "label": "Theme"
+                        "part": "developer-row"
                       },
                       "children": [
                         {
-                          "$prototype": "Array",
-                          "items": {
-                            "$ref": "#/state/themes"
+                          "tagName": "jx-switch",
+                          "attributes": {
+                            "part": "developer-panels"
                           },
-                          "key": {
-                            "$ref": "$map/item/value"
+                          "$props": {
+                            "size": "sm",
+                            "checked": {
+                              "$ref": "#/state/developerPanels"
+                            }
                           },
-                          "map": {
-                            "tagName": "jx-action-button",
-                            "attributes": {
-                              "part": "theme",
-                              "data-theme": "${$map.item.value}"
-                            },
-                            "$props": {
-                              "size": "sm",
-                              "checked": {
-                                "$ref": "$map/item/checked"
-                              }
-                            },
-                            "onclick": {
-                              "$prototype": "Function",
-                              "body": [
-                                {
-                                  "operator": "call",
-                                  "target": {
-                                    "$ref": "#/state/setTheme"
-                                  },
-                                  "value": [
-                                    {
-                                      "$ref": "$map/item/value"
-                                    }
-                                  ]
-                                }
-                              ]
-                            },
-                            "children": [
+                          "onchange": {
+                            "$prototype": "Function",
+                            "body": [
                               {
-                                "tagName": "span",
-                                "textContent": "${$map.item.label}"
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/setDeveloperPanels"
+                                },
+                                "value": [
+                                  {
+                                    "$ref": "event#/target/checked"
+                                  }
+                                ]
                               }
                             ]
-                          }
+                          },
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "textContent": "Show developer panels"
+                            }
+                          ]
+                        },
+                        {
+                          "tagName": "p",
+                          "attributes": {
+                            "part": "developer-note"
+                          },
+                          "textContent": "Puts Files and Packages on the Design rail. Both stay in the command palette either way."
                         }
                       ]
                     }

package/src/surfaces/preferences.ts

@@ -111,6 +111,8 @@ export interface PreferencesView {
   sectionTitle: string;
   sectionBlurb: string;
   themes: PreferencesThemeRow[];
+  /** Whether **Show developer panels** is on: Files and Packages on the Design rail (§5.1). */
+  developerPanels: boolean;
   accounts: PreferencesAccountRow[];
   /** Why there is no keyboard sheet at all. Empty means there is one. */
   keyboardEmpty: string;
@@ -138,6 +140,8 @@ export interface PreferencesSurfaceOptions {
   view: PreferencesView;
   onSelectSection: (id: string) => void;
   onSetTheme: (value: string) => void;
+  /** The **Show developer panels** switch moved. */
+  onSetDeveloperPanels: (show: boolean) => void;
   /** One account button was pressed, named by its `"<account>/<action>"` key. */
   onAccountAction: (key: string) => void;
   onKeyQuery: (value: string) => void;
@@ -177,6 +181,7 @@ interface PreferencesFlags {
 interface PreferencesScope extends PreferencesView, PreferencesFlags {
   selectSection: (id: string) => void;
   setTheme: (value: string) => void;
+  setDeveloperPanels: (show: boolean) => void;
   runAccountAction: (key: string) => void;
   setKeyQuery: (value: string) => void;
   toggleKeystroke: () => void;
@@ -265,6 +270,9 @@ export function openPreferencesSurface(
       scope.keyQuery = value;
       options.onKeyQuery(value);
     },
+    setDeveloperPanels: (show: boolean) => {
+      options.onSetDeveloperPanels(show);
+    },
     setTheme: (value: string) => {
       options.onSetTheme(value);
     },