@jxsuite/studio 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -18,6 +18,7 @@
     "dist/workers",
     "index.html",
     "canvas.html",
+    "styles",
     "fonts"
   ],
   "type": "module",
@@ -28,6 +29,7 @@
     "./base64": "./src/utils/base64.ts",
     "./directory-picker": "./src/services/directory-picker.ts",
     "./import-client": "./src/services/import-client.ts",
+    "./github-auth": "./src/github/github-auth.ts",
     "./platforms/cloud": "./src/platforms/cloud.ts",
     "./preview-navigate": "./src/canvas/preview-navigate.ts"
   },
@@ -46,16 +48,16 @@
     "upgrade": "bunx npm-check-updates -u && bun install"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
-    "@jxsuite/ai": "^0.34.0",
-    "@jxsuite/collab": "^0.6.0",
-    "@jxsuite/create": "^1.2.2",
-    "@jxsuite/formulas": "^0.0.6",
-    "@jxsuite/markup": "^0.4.2",
-    "@jxsuite/protocol": "^1.0.0",
-    "@jxsuite/runtime": "^1.3.2",
-    "@jxsuite/schema": "^1.5.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.1.0",
+    "@jxsuite/ai": "^0.35.0",
+    "@jxsuite/collab": "^0.7.0",
+    "@jxsuite/create": "^1.3.0",
+    "@jxsuite/formulas": "^0.0.7",
+    "@jxsuite/markup": "^0.4.3",
+    "@jxsuite/protocol": "^1.1.0",
+    "@jxsuite/runtime": "^2.0.0",
+    "@jxsuite/schema": "^1.6.0",
     "@spectrum-web-components/accordion": "^1.12.2",
     "@spectrum-web-components/action-bar": "1.12.2",
     "@spectrum-web-components/action-button": "^1.12.2",
@@ -92,7 +94,7 @@
     "@spectrum-web-components/toast": "^1.12.2",
     "@spectrum-web-components/tooltip": "^1.12.2",
     "@spectrum-web-components/underlay": "^1.12.2",
-    "@vue/reactivity": "3.5.40",
+    "@vue/reactivity": "3.5.41",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
     "lit": "^3.3.3",
@@ -103,11 +105,11 @@
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.11.1",
+    "@happy-dom/global-registrator": "^20.11.2",
     "@types/mdast": "^4.0.4",
-    "@webref/css": "^8.7.1",
+    "@webref/css": "^8.7.2",
     "@webref/elements": "^2.7.1",
-    "@webref/idl": "^3.82.1"
+    "@webref/idl": "^3.82.2"
   },
   "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/about/about-modal.ts

@@ -14,6 +14,7 @@ import { openModal } from "../ui/layers";
 import { getPlatform } from "../platform";
 import { APP_NAME, BUILD_DATE, GIT_COMMIT, LINKS, VERSION } from "../version";
 import type { AppInfo, PackageInfo } from "../types";
+import type { Command, CommandRegistry } from "../commands/registry";
 
 let _handle: ReturnType<typeof openModal> | null = null;
 
@@ -106,16 +107,7 @@ function renderPackages(): TemplateResult {
 function renderModal() {
   const tpl = html`
     <sp-underlay open @close=${closeAboutModal}></sp-underlay>
-    <div
-      class="about-modal"
-      role="dialog"
-      aria-label="About ${APP_NAME}"
-      @keydown=${(e: KeyboardEvent) => {
-        if (e.key === "Escape") {
-          closeAboutModal();
-        }
-      }}
-    >
+    <div class="about-modal">
       <div class="settings-modal-header">
         <h2 class="settings-modal-title">About ${APP_NAME}</h2>
         <sp-action-button quiet size="s" @click=${closeAboutModal} title="Close">
@@ -151,6 +143,45 @@ function renderModal() {
   if (_handle) {
     _handle.update(tpl);
   } else {
-    _handle = openModal(tpl);
+    _handle = openModal(tpl, { label: `About ${APP_NAME}`, onDismiss: closeAboutModal });
   }
 }
+
+/**
+ * `Help: About` — the record the rail footer's hand-authored button used to be.
+ *
+ * The rail foot carries **Preferences** and nothing else (plan §3.2 ②). About is not a view you
+ * switch to and it is opened roughly once in an app's lifetime, so it costs a rail slot it cannot
+ * repay; as a record it stays reachable by name from the palette, which is where a thing you look
+ * for by name belongs.
+ */
+export function aboutCommands(): Command[] {
+  return [
+    {
+      id: "help.about",
+      title: `About ${APP_NAME}`,
+      category: "Help",
+      level: "application",
+      menus: ["palette"],
+      group: "9_help",
+      run: () => {
+        openAboutModal();
+      },
+    },
+  ];
+}
+
+/**
+ * Register the About verb on the app registry.
+ *
+ * `appCommandSet()` is the projection CI counts and `docs/studio/interface/commands.md` is
+ * generated from — it is NOT what the running app registers. P4 composed `help.about` into that set
+ * only, and deleted the rail's About button in the same change, so About became unreachable in the
+ * app while every check reported it present. The two roots have to agree.
+ *
+ * @param {CommandRegistry} registry
+ * @returns {void}
+ */
+export function registerAboutCommands(registry: CommandRegistry): void {
+  registry.registerAll(aboutCommands());
+}

package/src/browse/library-commands.ts

@@ -0,0 +1,240 @@
+/**
+ * The Library's verbs.
+ *
+ * Every piece of Library state a person can reach is reachable here, which is the difference
+ * between this and the Manage view it replaces. That view's category filter, its search box and its
+ * grid/table switch existed ONLY as buttons inside a modal, so `scripts/screenshots/automation.ts`
+ * carried a hand-maintained `BROWSE_CATEGORY_LABELS` table and pressed the buttons through an XPath
+ * matched on their rendered text — plan §13's exact complaint. `library.setCategory` is the same
+ * action the button runs, and the button is now a rendering of the record.
+ *
+ * Every setter is idempotent and names the STATE it reaches, never a delta: there is no
+ * `library.toggleLayout`, because a toggle against unstated state is what silently inverted
+ * eighteen manifest steps when a default flipped.
+ */
+
+import {
+  argsSchema,
+  enumArg,
+  enumProperty,
+  optionalStringArg,
+  stringProperty,
+} from "../commands/command-args";
+import { openLibraryTab } from "../grid/grid-open";
+import {
+  LIBRARY_CATEGORY_KEYS,
+  LIBRARY_LAYOUTS,
+  LIBRARY_LAYOUT_LABELS,
+  projectLocales,
+} from "./library-model";
+import {
+  createLibraryEntry,
+  libraryNewEntries,
+  refreshLibrary,
+  setLibraryCategory,
+  setLibraryLayout,
+  setLibraryLocale,
+  setLibrarySearch,
+} from "./library-pane";
+import type { LibraryLayout } from "./library-model";
+import type { AnyCommand, CommandRegistry } from "../commands/registry";
+
+/** Every value `library.setLocale` accepts: the project's own locales, plus "all" for none of them. */
+function localeChoices(): string[] {
+  return ["all", ...projectLocales()];
+}
+
+/** The Library's command records. */
+export function libraryCommands(): AnyCommand[] {
+  return [
+    {
+      category: "Project",
+      id: "library.open",
+      // ⌘⇧E — §9.1's "File: Browse Library (⌘⇧E)". The Library is the content surface for a site
+      // With a collection, and it was reachable only by palette search and one overflow menu item.
+      keybinding: "mod+shift+e",
+      level: "project",
+      menus: ["commandbar/overflow", "palette", "context/file"],
+      group: "1_file",
+      requires: "an open project",
+      when: (ctx) => ctx.project.open,
+      aiTool: {
+        description:
+          "Open the Library — every page, layout, component, content entry and media file in " +
+          "the project, as a browsable tab.",
+        name: "open_library",
+      },
+      run: () => {
+        openLibraryTab();
+      },
+      title: "Open Library",
+    },
+    {
+      args: argsSchema({
+        category: enumProperty(
+          LIBRARY_CATEGORY_KEYS,
+          'Which category the Library lists. "all" clears the category filter.',
+        ),
+      }),
+      category: "Project",
+      id: "library.setCategory",
+      level: "project",
+      menus: ["palette"],
+      group: "1_file",
+      requires: "an open project",
+      when: (ctx) => ctx.project.open,
+      aiTool: {
+        description: "Filter the Library to one category of project file.",
+        name: "set_library_category",
+      },
+      run: (_ctx, args) => {
+        const key = enumArg("library.setCategory", args, "category", LIBRARY_CATEGORY_KEYS);
+        setLibraryCategory(key);
+      },
+      title: "Library: Show Category",
+    },
+    {
+      args: argsSchema({
+        layout: enumProperty(
+          LIBRARY_LAYOUTS,
+          `How the Library arranges its items — ${LIBRARY_LAYOUTS.map(
+            (layout) => LIBRARY_LAYOUT_LABELS[layout],
+          ).join(", ")}.`,
+        ),
+      }),
+      category: "Project",
+      id: "library.setLayout",
+      level: "project",
+      menus: ["palette"],
+      group: "1_file",
+      requires: "an open project",
+      when: (ctx) => ctx.project.open,
+      aiTool: {
+        description: "Choose the Library's layout: table, cards, media, calendar or board.",
+        name: "set_library_layout",
+      },
+      run: (_ctx, args) => {
+        const layout = enumArg<LibraryLayout>("library.setLayout", args, "layout", LIBRARY_LAYOUTS);
+        setLibraryLayout(layout);
+      },
+      title: "Library: Set Layout",
+    },
+    {
+      args: {
+        additionalProperties: false,
+        properties: {
+          query: stringProperty("Text matched against each file's name and path. Empty clears it."),
+        },
+        type: "object",
+      },
+      category: "Project",
+      id: "library.setSearch",
+      level: "project",
+      menus: ["palette"],
+      group: "1_file",
+      requires: "an open project",
+      when: (ctx) => ctx.project.open,
+      aiTool: {
+        description: "Filter the Library's items by a text query over name and path.",
+        name: "set_library_search",
+      },
+      run: (_ctx, args) => {
+        setLibrarySearch(optionalStringArg("library.setSearch", args, "query") ?? "");
+      },
+      title: "Library: Filter Files",
+    },
+    {
+      args: argsSchema({
+        locale: {
+          /*
+           * A getter, for the reason `content/entry-commands.ts` gives at length: this record is
+           * built at module scope, before any project is open, so `enum: localeChoices()` would
+           * freeze at `["all"]` and the palette would offer that forever. The getter is read when
+           * the prompt opens and when the AI tool list is serialised.
+           */
+          get enum() {
+            return localeChoices();
+          },
+          description:
+            'Which language the Library lists, as a BCP 47 tag the project declares. "all" ' +
+            "clears the language filter.",
+          type: "string",
+        },
+      }),
+      category: "Project",
+      id: "library.setLocale",
+      level: "project",
+      menus: ["palette"],
+      group: "1_file",
+      requires: "a project with more than one locale",
+      // A monolingual project has no facet to set: the Library draws no picker, and offering the
+      // Verb would name a value space with one member in it.
+      when: (ctx) => ctx.project.open && ctx.project.isMultilingual,
+      aiTool: {
+        description:
+          "Filter the Library to the files under one language's directory. Files outside a " +
+          "locale directory — which under prefix-except-default includes the default language's " +
+          "own pages — are not in any language's list.",
+        name: "set_library_locale",
+      },
+      run: (_ctx, args) => {
+        const choice = enumArg("library.setLocale", args, "locale", localeChoices());
+        setLibraryLocale(choice === "all" ? "" : choice);
+      },
+      title: "Library: Show Language",
+    },
+    {
+      category: "Project",
+      id: "library.refresh",
+      level: "project",
+      menus: ["palette"],
+      group: "1_file",
+      requires: "an open project",
+      when: (ctx) => ctx.project.open,
+      aiTool: {
+        description: "Re-scan the project's files and rebuild the Library's listing.",
+        name: "refresh_library",
+      },
+      run: () => refreshLibrary(),
+      title: "Library: Rescan Files",
+    },
+    {
+      args: {
+        additionalProperties: false,
+        properties: {
+          type: stringProperty(
+            'What to create: "page", "layout", "component", or "collection:<name>" for a ' +
+              "content collection this project declares.",
+          ),
+        },
+        required: ["type"],
+        type: "object",
+      },
+      category: "Project",
+      id: "library.newEntry",
+      level: "project",
+      menus: ["palette"],
+      group: "1_file",
+      requires: "an open project",
+      when: (ctx) => ctx.project.open,
+      undo: "project",
+      aiTool: {
+        description:
+          "Create a page, layout, component or content entry in the directory its kind belongs " +
+          "to, then open it.",
+        name: "new_library_entry",
+      },
+      run: async (_ctx, args) => {
+        const declared = libraryNewEntries().map((entry) => entry.key);
+        const key = enumArg("library.newEntry", args, "type", declared);
+        await createLibraryEntry(key);
+      },
+      title: "Library: New Entry",
+    },
+  ];
+}
+
+/** Register the Library's verbs. */
+export function registerLibraryCommands(registry: CommandRegistry): void {
+  registry.registerAll(libraryCommands());
+}