@jxsuite/studio 6.1.2 → 8.0.0

package/src/surfaces/collections-panel.ts

@@ -0,0 +1,168 @@
+/// <reference lib="dom" />
+/**
+ * The Collections panel surface: the Content workspace's Navigator, as a Jx document over the kit
+ * (`specs/studio.md` §22.5).
+ *
+ * This is the adapter. `panels/collections-panel.ts` keeps every decision — which collections the
+ * project has and how many entries each holds, which saved grid views sit under them, whether an
+ * entry is being written and which collection it is in, what each entry is called and whether it is
+ * a draft — and hands this module one projection whose every field is already a string. The
+ * document draws one of three bodies (no project, the collection list, one collection's entries),
+ * chosen by one word.
+ *
+ * @docs studio/projects/browse
+ */
+
+import { reactive } from "../reactivity";
+import { mountSurface, registerSurface } from "../ui/surface";
+import collectionsPanelDoc from "./collections-panel.json";
+import type { SurfaceHandle } from "../ui/surface";
+
+registerSurface("collections-panel", collectionsPanelDoc);
+
+/** One saved grid view under a collection. */
+export interface CollectionViewRow {
+  /** The view's identity across repaints: the collection key and the view's name. */
+  key: string;
+  name: string;
+}
+
+/** One collection in the list. */
+export interface CollectionRow {
+  key: string;
+  title: string;
+  /** Its entry count, already a string ("12"), or "" while the scan runs. */
+  count: string;
+  /** `"true"` for the collection the Content home is showing. */
+  selected: "true" | "false";
+  views: CollectionViewRow[];
+}
+
+/** One entry in the entries list. */
+export interface CollectionEntryRow {
+  path: string;
+  title: string;
+  /** "Draft", "Published", or "". */
+  status: string;
+  /** Whether a thumbnail is drawn, or the document glyph. */
+  art: "image" | "glyph";
+  thumb: string;
+  /** `"true"` for the entry being written. */
+  selected: "true" | "false";
+  /** The language it is written in, by its autonym ("français"), or "" in a one-language collection. */
+  locale: string;
+  /** That language's tag, for the label's own `lang`; "" with no language. */
+  lang: string;
+}
+
+/** Everything the document draws. */
+export interface CollectionsPanelValues {
+  /** `none` asks for a project; `list` draws the collections; `entries` draws one collection's. */
+  body: "none" | "list" | "entries";
+  collections: CollectionRow[];
+  /** The collection whose entries are listed, for the back row: "Posts". */
+  backTitle: string;
+  backCount: string;
+  entriesState: "loading" | "empty" | "listed";
+  entries: CollectionEntryRow[];
+  /** The create row under the entries: "New post". */
+  newLabel: string;
+}
+
+/** What a control can ask the panel to do. Every one is a decision the flow owns. */
+export interface CollectionsPanelActions {
+  /** Show a collection in the Content home. */
+  showCollection: (key: string) => void;
+  /** Open a collection's grid on one of its saved views. */
+  applyView: (key: string, name: string) => void;
+  /** **+ New collection**: Add new › Collection. */
+  newCollection: () => void;
+  /** **‹ <Collection>**: back to the collection in the Content home. */
+  back: () => void;
+  /** Open an entry where it is written. */
+  openEntry: (path: string) => void;
+  /** **+ New <item>**: Add new › Entry in this collection. */
+  newEntry: () => void;
+}
+
+export interface CollectionsPanelSurfaceHandle {
+  readonly ready: Promise<unknown>;
+  /** Whether the mounted root is still where it was put. */
+  connected: () => boolean;
+  update: (values: CollectionsPanelValues) => void;
+  dispose: () => void;
+}
+
+interface CollectionsPanelScope extends CollectionsPanelValues, CollectionsPanelActions {}
+
+/** The scope's shape before the first projection lands on it. */
+export function emptyCollectionsPanelValues(): CollectionsPanelValues {
+  return {
+    backTitle: "",
+    backCount: "",
+    body: "none",
+    collections: [],
+    entries: [],
+    entriesState: "loading",
+    newLabel: "",
+  };
+}
+
+/** Write a projection in, field by field, so an unchanged field is inert. */
+function project(scope: CollectionsPanelScope, values: CollectionsPanelValues): void {
+  scope.body = values.body;
+  scope.collections = values.collections;
+  scope.backTitle = values.backTitle;
+  scope.backCount = values.backCount;
+  scope.entriesState = values.entriesState;
+  scope.entries = values.entries;
+  scope.newLabel = values.newLabel;
+}
+
+/**
+ * Mount the Collections panel into `container`, the content box the Navigator painted.
+ *
+ * @param container Where the document goes.
+ * @param values What it shows to begin with.
+ * @param actions What its controls do.
+ */
+export function mountCollectionsPanelSurface(
+  container: HTMLElement,
+  values: CollectionsPanelValues,
+  actions: CollectionsPanelActions,
+): CollectionsPanelSurfaceHandle {
+  const scope: CollectionsPanelScope = reactive<CollectionsPanelScope>({
+    ...emptyCollectionsPanelValues(),
+    ...actions,
+  });
+  project(scope, values);
+
+  let mounted: SurfaceHandle | null = null;
+  let disposed = false;
+  const ready = mountSurface("collections-panel", scope, container).then((surface) => {
+    if (disposed) {
+      surface.dispose();
+      return surface;
+    }
+    mounted = surface;
+    return surface;
+  });
+
+  return {
+    connected: () => {
+      if (disposed) {
+        return false;
+      }
+      const root = mounted?.root;
+      // A mount still in flight is not yet in the container, and is not a reason to remount.
+      return root === undefined ? true : container.contains(root);
+    },
+    dispose() {
+      disposed = true;
+      mounted?.dispose();
+      mounted = null;
+    },
+    ready,
+    update: (next) => project(scope, next),
+  };
+}

package/src/surfaces/commandbar.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://jxsuite.com/schema/v1",
   "$id": "StudioCommandBar",
-  "$description": "The Command Bar: a rendering of the command registry. The adapter hands in `primary` (what declared commandbar/primary), `docks` (the three dock toggles), `layouts`, the Command Center's `segments`, the collaboration `presence` and `csd` (which window-control layout, if any). Nothing here decides what an action is called.",
+  "$description": "The Command Bar: a rendering of the command registry. The adapter hands in `primary` (what declared commandbar/primary), `docks` (the three dock toggles), `workspaces` (the five workspaces, with `workspace` selected), `settingsVisible`/`settingsOpen` for the gear that renders the settings/menu placement, the Command Center's `segments`, the collaboration `presence` and `csd` (which window-control layout, if any). Nothing here decides what an action is called.",
   "tagName": "div",
   "attributes": {
     "part": "bar"
@@ -21,7 +21,7 @@
       "flex": "1",
       "flexShrink": "999"
     },
-    "& [part=\"csd-lead\"], & [part=\"csd-trail\"], & [part=\"menu-slot\"], & [part=\"layouts-slot\"], & [part=\"presence-slot\"]": {
+    "& [part=\"csd-lead\"], & [part=\"csd-trail\"], & [part=\"menu-slot\"], & [part=\"workspaces-slot\"], & [part=\"presence-slot\"], & [part=\"settings-slot\"]": {
       "display": "contents"
     },
     "& [part=\"window-controls\"]": {
@@ -69,35 +69,39 @@
       "color": "rgba(0, 0, 0, 0.5)",
       "--jx-icon-size": "8px"
     },
-    "& [part=\"layouts\"]": {
-      "display": "flex",
-      "alignItems": "center",
+    "& [part=\"workspaces\"]": {
+      "$description": "The kit's tablist, retuned for a 36px band: no rule under the strip (the band's own border is the floor), and the tabs sit on the band's centre line rather than on a strip edge.",
+      "flexShrink": "0",
+      "borderBottom": "none",
       "gap": "2px",
-      "flexShrink": "0"
+      "fontSize": "var(--jx-text-sm)"
     },
-    "& [part=\"layout\"]": {
+    "& [part=\"workspace\"]": {
       "padding": "2px var(--jx-space-3)",
-      "border": "none",
       "borderRadius": "var(--jx-radius-sm)",
-      "background": "none",
       "color": "var(--jx-fg-dim)",
-      "font": "inherit",
-      "fontSize": "var(--jx-text-sm)",
-      "cursor": "pointer",
       "whiteSpace": "nowrap",
+      "--jx-icon-size": "14px",
       ":hover": {
         "background": "var(--jx-hover-bg)",
         "color": "var(--jx-fg)"
-      },
-      ":focus-visible": {
-        "outline": "var(--jx-focus-ring)",
-        "outlineOffset": "-2px"
       }
     },
-    "& [part=\"layout\"][data-active]": {
+    "& [part=\"workspace\"][aria-selected=\"true\"]": {
       "color": "var(--jx-fg)",
       "background": "var(--jx-hover-bg)"
     },
+    "& [part=\"workspace-badge\"]": {
+      "$description": "The count of unpublished changes on the Publish tab. Decorative: the tab's tooltip says what it counts, and the badge is not drawn at zero.",
+      "minWidth": "16px",
+      "padding": "0 4px",
+      "borderRadius": "8px",
+      "background": "var(--jx-accent)",
+      "color": "var(--jx-accent-fg)",
+      "fontSize": "var(--jx-text-xs)",
+      "lineHeight": "16px",
+      "textAlign": "center"
+    },
     "& [part=\"center\"]": {
       "display": "flex",
       "alignItems": "center",
@@ -229,7 +233,21 @@
       },
       "& [part=\"primary\"] jx-button > [part=\"control\"]": {
         "gap": "0"
+      },
+      "& [part=\"workspace\"] > [part=\"label\"]": {
+        "display": "none"
       }
+    },
+    "& [part=\"workspaces-group\"]": {
+      "$description": "The tablist and the quick-publish chevron, as one item of the band, so the chevron never wraps away from the Publish tab it belongs to.",
+      "display": "flex",
+      "alignItems": "center",
+      "flexShrink": "0",
+      "gap": "2px"
+    },
+    "& [part=\"quick-publish\"]": {
+      "--jx-icon-size": "12px",
+      "marginLeft": "-2px"
     }
   },
   "children": [
@@ -262,7 +280,7 @@
               },
               "attributes": {
                 "data-control": "close",
-                "class": "electrobun-webkit-app-region-no-drag"
+                "class": "app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -287,7 +305,7 @@
               },
               "attributes": {
                 "data-control": "minimize",
-                "class": "electrobun-webkit-app-region-no-drag"
+                "class": "app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -312,7 +330,7 @@
               },
               "attributes": {
                 "data-control": "maximize",
-                "class": "electrobun-webkit-app-region-no-drag"
+                "class": "app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -355,7 +373,7 @@
           },
           "attributes": {
             "data-menu": "studio",
-            "class": "electrobun-webkit-app-region-no-drag"
+            "class": "app-region-no-drag"
           },
           "onclick": {
             "$prototype": "Function",
@@ -407,99 +425,153 @@
     {
       "tagName": "div",
       "attributes": {
-        "part": "layouts-slot",
+        "part": "workspaces-slot",
         "role": "none"
       },
       "$switch": {
-        "$ref": "#/state/layoutsVisible"
+        "$ref": "#/state/workspacesVisible"
       },
       "cases": {
         "true": {
           "tagName": "div",
           "attributes": {
-            "part": "layouts",
-            "role": "tablist",
-            "aria-label": "Layouts"
+            "part": "workspaces-group",
+            "role": "none"
           },
           "children": [
             {
-              "$prototype": "Array",
-              "items": {
-                "$ref": "#/state/layouts"
+              "tagName": "jx-tabs",
+              "attributes": {
+                "part": "workspaces",
+                "selected": "${state.workspace}",
+                "class": "app-region-no-drag"
               },
-              "key": {
-                "$ref": "$map/item/id"
+              "$props": {
+                "label": "Workspaces",
+                "activation": "manual"
               },
-              "map": {
-                "tagName": "button",
-                "attributes": {
-                  "part": "layout",
-                  "type": "button",
-                  "role": "tab",
-                  "aria-selected": "${$map.item.active ? 'true' : 'false'}",
-                  "data-layout": "${$map.item.id}",
-                  "data-active": "${$map.item.active ? '' : null}",
-                  "title": "${$map.item.title}",
-                  "class": "electrobun-webkit-app-region-no-drag"
-                },
-                "textContent": "${$map.item.name}",
-                "onclick": {
-                  "$prototype": "Function",
-                  "body": [
-                    {
-                      "operator": "call",
-                      "target": {
-                        "$ref": "#/state/setLayout"
-                      },
-                      "value": [
+              "children": [
+                {
+                  "$prototype": "Array",
+                  "items": {
+                    "$ref": "#/state/workspaces"
+                  },
+                  "key": {
+                    "$ref": "$map/item/id"
+                  },
+                  "map": {
+                    "tagName": "jx-tab",
+                    "attributes": {
+                      "part": "workspace",
+                      "value": "${$map.item.id}",
+                      "label": "${$map.item.title}",
+                      "title": "${$map.item.tooltip}",
+                      "aria-description": "${$map.item.description || null}",
+                      "data-workspace": "${$map.item.id}"
+                    },
+                    "onclick": {
+                      "$prototype": "Function",
+                      "body": [
                         {
-                          "$ref": "$map/item/id"
+                          "operator": "call",
+                          "target": {
+                            "$ref": "#/state/setWorkspace"
+                          },
+                          "value": [
+                            {
+                              "$ref": "$map/item/id"
+                            }
+                          ]
                         }
                       ]
-                    }
-                  ]
-                },
-                "ondblclick": {
-                  "$prototype": "Function",
-                  "body": [
-                    {
-                      "operator": "call",
-                      "target": {
-                        "$ref": "#/state/renameLayout"
+                    },
+                    "children": [
+                      {
+                        "tagName": "jx-icon",
+                        "attributes": {
+                          "slot": "icon"
+                        },
+                        "$props": {
+                          "name": {
+                            "$ref": "$map/item/icon"
+                          }
+                        }
                       },
-                      "value": [
-                        {
-                          "$ref": "$map/item/id"
+                      {
+                        "tagName": "span",
+                        "attributes": {
+                          "slot": "status",
+                          "part": "workspace-badge-slot"
+                        },
+                        "style": {
+                          "display": "contents"
+                        },
+                        "$switch": {
+                          "$ref": "$map/item/hasBadge"
+                        },
+                        "cases": {
+                          "true": {
+                            "tagName": "span",
+                            "attributes": {
+                              "part": "workspace-badge",
+                              "aria-hidden": "true"
+                            },
+                            "textContent": "${$map.item.badge}"
+                          }
                         }
-                      ]
-                    }
-                  ]
+                      }
+                    ]
+                  }
                 }
-              }
+              ]
             },
             {
-              "tagName": "jx-action-button",
-              "$props": {
-                "label": "Save layout",
-                "hint": "Save the current arrangement as a layout",
-                "icon": "plus",
-                "size": "sm"
-              },
+              "tagName": "div",
               "attributes": {
-                "part": "layout-add",
-                "class": "electrobun-webkit-app-region-no-drag"
+                "part": "quick-slot",
+                "role": "none"
               },
-              "onclick": {
-                "$prototype": "Function",
-                "body": [
-                  {
-                    "operator": "call",
-                    "target": {
-                      "$ref": "#/state/saveLayout"
+              "style": {
+                "display": "contents"
+              },
+              "$switch": {
+                "$ref": "#/state/quickVisible"
+              },
+              "cases": {
+                "true": {
+                  "tagName": "jx-action-button",
+                  "$description": "`publish.quick`, drawn beside the Publish tab rather than inside it (studio.md §22.2): a tab that sometimes opened a dialog would be a tab whose activation means two things. It sits after the tablist, which ends on Publish, so it is the control beside that tab.",
+                  "attributes": {
+                    "part": "quick-publish",
+                    "class": "app-region-no-drag",
+                    "data-command": "publish.quick"
+                  },
+                  "$props": {
+                    "icon": "caret-down",
+                    "size": "sm",
+                    "quiet": true,
+                    "label": "Quick publish",
+                    "hint": {
+                      "$ref": "#/state/quickTooltip"
                     },
-                    "value": []
+                    "haspopup": "dialog",
+                    "disabled": {
+                      "$ref": "#/state/quickDisabled"
+                    }
+                  },
+                  "onclick": {
+                    "$prototype": "Function",
+                    "body": [
+                      {
+                        "operator": "call",
+                        "target": {
+                          "$ref": "#/state/run"
+                        },
+                        "value": ["publish.quick"]
+                      }
+                    ]
                   }
-                ]
+                }
               }
             }
           ]
@@ -518,7 +590,7 @@
         "part": "center",
         "role": "group",
         "aria-label": "Command Center",
-        "class": "electrobun-webkit-app-region-no-drag"
+        "class": "app-region-no-drag"
       },
       "onclick": {
         "$prototype": "Function",
@@ -586,7 +658,7 @@
                   "type": "button",
                   "data-segment": "${$map.item.key}",
                   "title": "${$map.item.title}",
-                  "class": "electrobun-webkit-app-region-no-drag"
+                  "class": "app-region-no-drag"
                 },
                 "textContent": "${$map.item.label}",
                 "onclick": {
@@ -672,7 +744,7 @@
             },
             "attributes": {
               "data-command-id": "${$map.item.id}",
-              "class": "electrobun-webkit-app-region-no-drag"
+              "class": "app-region-no-drag"
             },
             "onclick": {
               "$prototype": "Function",
@@ -830,6 +902,79 @@
         }
       }
     },
+    {
+      "tagName": "div",
+      "attributes": {
+        "part": "settings-slot",
+        "role": "none"
+      },
+      "$switch": {
+        "$ref": "#/state/settingsVisible"
+      },
+      "cases": {
+        "true": {
+          "tagName": "jx-action-button",
+          "$props": {
+            "label": "Settings",
+            "hint": "Settings",
+            "icon": "gear",
+            "size": "sm",
+            "haspopup": "menu",
+            "expanded": {
+              "$ref": "#/state/settingsOpen"
+            }
+          },
+          "attributes": {
+            "data-menu": "settings",
+            "class": "app-region-no-drag"
+          },
+          "onclick": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "operator": "call",
+                "target": {
+                  "$ref": "#/state/openSettings"
+                },
+                "value": [
+                  {
+                    "$ref": "event#/currentTarget"
+                  }
+                ]
+              }
+            ]
+          },
+          "onkeydown": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "$switch": {
+                  "$ref": "event#/key"
+                },
+                "cases": {
+                  "ArrowDown": [
+                    {
+                      "operator": "call",
+                      "target": {
+                        "$ref": "#/state/openSettings"
+                      },
+                      "value": [
+                        {
+                          "$ref": "event#/currentTarget"
+                        }
+                      ]
+                    },
+                    {
+                      "preventDefault": true
+                    }
+                  ]
+                }
+              }
+            ]
+          }
+        }
+      }
+    },
     {
       "tagName": "div",
       "attributes": {
@@ -872,7 +1017,7 @@
             },
             "attributes": {
               "data-command-id": "${$map.item.id}",
-              "class": "electrobun-webkit-app-region-no-drag"
+              "class": "app-region-no-drag"
             },
             "onchange": {
               "$prototype": "Function",
@@ -922,7 +1067,7 @@
               },
               "attributes": {
                 "data-control": "minimize",
-                "class": "electrobun-webkit-app-region-no-drag"
+                "class": "app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -947,7 +1092,7 @@
               },
               "attributes": {
                 "data-control": "maximize",
-                "class": "electrobun-webkit-app-region-no-drag"
+                "class": "app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",
@@ -972,7 +1117,7 @@
               },
               "attributes": {
                 "data-control": "close",
-                "class": "electrobun-webkit-app-region-no-drag"
+                "class": "app-region-no-drag"
               },
               "onclick": {
                 "$prototype": "Function",