@jxsuite/studio 1.3.0 → 1.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -11,7 +11,10 @@
   "files": [
     "*.js",
     "src",
-    "dist"
+    "dist",
+    "index.html",
+    "canvas.html",
+    "fonts"
   ],
   "type": "module",
   "exports": {
@@ -38,14 +41,14 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
-    "@jxsuite/ai": "^0.33.0",
-    "@jxsuite/collab": "^0.4.1",
-    "@jxsuite/create": "^1.1.1",
-    "@jxsuite/formulas": "^0.0.3",
-    "@jxsuite/markup": "^0.3.1",
-    "@jxsuite/protocol": "^0.5.1",
-    "@jxsuite/runtime": "^1.2.0",
-    "@jxsuite/schema": "^1.2.0",
+    "@jxsuite/ai": "^0.34.0",
+    "@jxsuite/collab": "^0.5.1",
+    "@jxsuite/create": "^1.2.1",
+    "@jxsuite/formulas": "^0.0.5",
+    "@jxsuite/markup": "^0.4.1",
+    "@jxsuite/protocol": "^0.6.1",
+    "@jxsuite/runtime": "^1.3.1",
+    "@jxsuite/schema": "^1.4.0",
     "@spectrum-web-components/accordion": "^1.12.2",
     "@spectrum-web-components/action-bar": "1.12.2",
     "@spectrum-web-components/action-button": "^1.12.2",
@@ -93,7 +96,7 @@
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.10.6",
+    "@happy-dom/global-registrator": "^20.11.1",
     "@types/mdast": "^4.0.4",
     "@webref/css": "^8.7.0",
     "@webref/elements": "^2.7.1",

package/src/editor/convert-to-component.ts

@@ -204,7 +204,7 @@ function promptComponentName(defaultName: string) {
           <sp-textfield
             placeholder="my-component"
             value=${value}
-            ?negative=${Boolean(error)}
+            ?invalid=${Boolean(error)}
             @input=${onInput}
             @keydown=${onKeydown}
             ${ref((el) => {

package/src/editor/convert-to-repeater.ts

@@ -200,7 +200,7 @@ async function promptRepeaterConfig(defs: Record<string, unknown>) {
                       size="s"
                       placeholder="myItems"
                       .value=${newDefName}
-                      ?negative=${Boolean(error)}
+                      ?invalid=${Boolean(error)}
                       @input=${(e: Event) => {
                         newDefName = (e.target as HTMLInputElement).value || "";
                         error = "";

package/src/new-project/add-repo-modal.ts

@@ -1,20 +1,29 @@
 /// <reference lib="dom" />
 /**
- * Add Existing Repository modal — a filterable picker over `platform.listRepos` (every repo the
- * platform's account link can reach, personal and organization). Choosing a repo runs
- * `platform.importProject`, which adopts it as a Jx project (probes project.json, tags + catalogues
- * it) and resolves with the catalogue root key; the caller opens it through the same path as a
- * recent project. Repos without a project.json fail with the backend's structured message, shown
- * inline.
+ * Repository picker modal — a filterable picker over `platform.listRepos` (every repo the
+ * platform's account link can reach, personal and organization). Two modes share the dialog:
+ *
+ * - "add" (Add Existing Repository): the unfiltered adoption path.
+ * - "open" (Open Project on `openProjectPicker: "repo-list"` platforms): only write-access
+ *   repositories, Jx-tagged ones first.
+ *
+ * Choosing a repo runs `platform.importProject`, which adopts it as a Jx project (probes
+ * project.json, tags + catalogues it) and resolves with the catalogue root key; the caller opens it
+ * through the same path as a recent project. Repos without a project.json fail with the backend's
+ * structured message, shown inline.
  */
 
 import { html, nothing } from "lit-html";
 import { errorMessage } from "@jxsuite/schema/parse";
+import { getAccountStatus, needsAppInstall } from "../account-status";
 import { getPlatform } from "../platform";
 import { openModal } from "../ui/layers";
 import type { RepoInfo } from "../types";
 
+type PickerMode = "add" | "open";
+
 let _handle: ReturnType<typeof openModal> | null = null;
+let _mode: PickerMode = "add";
 let _repos: RepoInfo[] | null = null;
 let _filter = "";
 let _error = "";
@@ -28,11 +37,29 @@ export function platformSupportsAddRepo(): boolean {
   return typeof platform.listRepos === "function" && typeof platform.importProject === "function";
 }
 
-/** Open the picker. Resolves with the imported project's catalogue root key, or null when cancelled. */
+/** True when the active platform routes Open Project through this repo picker. */
+export function platformUsesRepoPicker(): boolean {
+  return getPlatform().openProjectPicker === "repo-list" && platformSupportsAddRepo();
+}
+
+/**
+ * Open the adoption picker. Resolves with the imported project's catalogue root key, or null when
+ * cancelled.
+ */
 export function openAddRepoModal(): Promise<{ root: string } | null> {
+  return openPicker("add");
+}
+
+/** Open Project as a repo picker (write-access repositories only). Null when cancelled. */
+export function openProjectPickerModal(): Promise<{ root: string } | null> {
+  return openPicker("open");
+}
+
+function openPicker(mode: PickerMode): Promise<{ root: string } | null> {
   if (_handle) {
     return Promise.resolve(null);
   }
+  _mode = mode;
   _repos = null;
   _filter = "";
   _error = "";
@@ -104,7 +131,13 @@ async function chooseRepo(repo: RepoInfo) {
 
 function visibleRepos(): RepoInfo[] {
   const query = _filter.trim().toLowerCase();
-  const repos = _repos ?? [];
+  let repos = _repos ?? [];
+  if (_mode === "open") {
+    // Open Project offers only repos the user can write to; Jx-tagged repos surface first.
+    // The topic is an accelerator, not ground truth — untagged repos still open via importProject.
+    const writable = repos.filter((r) => r.permission === "admin" || r.permission === "write");
+    repos = [...writable.filter((r) => r.isJxProject), ...writable.filter((r) => !r.isJxProject)];
+  }
   return query ? repos.filter((r) => r.fullName.toLowerCase().includes(query)) : repos;
 }
 
@@ -129,17 +162,43 @@ function repoRowTpl(repo: RepoInfo) {
   `;
 }
 
+function emptyTpl() {
+  if (_filter) {
+    return html`<div class="add-repo-empty">No repositories match the filter.</div>`;
+  }
+  if (_mode === "open" && (_repos ?? []).length > 0) {
+    return html`<div class="add-repo-empty">
+      No repositories with write access. Widen the Jx Suite GitHub App's repository access, or ask a
+      repository admin for write access.
+    </div>`;
+  }
+  if (needsAppInstall()) {
+    return html`<div class="add-repo-empty">
+      No repositories are reachable yet.
+      <a
+        class="add-repo-install"
+        href=${getAccountStatus()?.appInstallUrl ?? "#"}
+        target="_blank"
+        rel="noreferrer"
+      >
+        Install the Jx Suite GitHub App
+      </a>
+      to grant repository access, then reopen this dialog.
+    </div>`;
+  }
+  return html`<div class="add-repo-empty">
+    No repositories are reachable. Install the GitHub App (or widen its repository access) and try
+    again.
+  </div>`;
+}
+
 function bodyTpl() {
   if (_repos === null) {
     return html`<div class="add-repo-empty">Loading repositories…</div>`;
   }
   const repos = visibleRepos();
   if (repos.length === 0) {
-    return html`<div class="add-repo-empty">
-      ${_filter
-        ? "No repositories match the filter."
-        : "No repositories are reachable. Install the GitHub App (or widen its repository access) and try again."}
-    </div>`;
+    return emptyTpl();
   }
   return html`<div class="add-repo-list">${repos.map((repo) => repoRowTpl(repo))}</div>`;
 }
@@ -156,7 +215,9 @@ function renderModal() {
       }}
     >
       <div class="new-project-modal-header">
-        <h2 class="new-project-modal-title">Add existing repository</h2>
+        <h2 class="new-project-modal-title">
+          ${_mode === "open" ? "Open Project" : "Add existing repository"}
+        </h2>
         <sp-action-button quiet size="s" @click=${closeAddRepoModal} title="Close">
           <sp-icon-close slot="icon"></sp-icon-close>
         </sp-action-button>

package/src/new-project/new-project-modal.ts

@@ -58,6 +58,12 @@ let _paramsSeededFor = "";
 
 let _error = "";
 
+/**
+ * Inline validation error shown at the Project Name field (the global strip is for backend
+ * failures).
+ */
+let _nameError = "";
+
 /** GitHub-App install link carried by a structured needs_installation_access failure. */
 let _errorInstallUrl = "";
 
@@ -66,6 +72,15 @@ function captureError(error: unknown) {
   _errorInstallUrl = installUrlOf(error) ?? "";
 }
 
+/** After a failed submit, bring the params step back to the top and focus the name field. */
+function focusNameField() {
+  requestAnimationFrame(() => {
+    const body = document.querySelector(".new-project-modal-body");
+    body?.scrollTo?.(0, 0);
+    body?.querySelector<HTMLElement>("sp-textfield")?.focus?.();
+  });
+}
+
 let _creating = false;
 
 /** Starter templates offered in the picker (empty until loaded / on platforms without starters). */
@@ -99,7 +114,7 @@ function credsForm() {
  *
  * @returns {Promise<{ root: string; config: object } | null>}
  */
-export function openNewProjectModal(): Promise<{
+export function openNewProjectModal(options?: { tab?: "template" | "starter" }): Promise<{
   root: string;
   config: ProjectConfig;
 } | null> {
@@ -113,13 +128,14 @@ export function openNewProjectModal(): Promise<{
     name: "",
     url: "",
   };
-  _tab = "template";
+  _tab = options?.tab ?? "template";
   _step = "source";
   _template = "blank";
   _starter = "";
   _agentPrompt = "";
   _paramsSeededFor = "";
   _error = "";
+  _nameError = "";
   _errorInstallUrl = "";
   _creating = false;
   _starters = [];
@@ -215,6 +231,9 @@ function renderModal() {
   const onInput =
     (field: "name" | "description" | "url" | "adapter" | "directory") => (e: Event) => {
       _form[field] = (e.target as HTMLInputElement).value;
+      if (field === "name") {
+        _nameError = "";
+      }
       if (field === "name" && !_form.directory) {
         // Auto-derive directory slug from name while user hasn't manually typed one
         _dirDerived = true;
@@ -301,6 +320,7 @@ function renderModal() {
     }
     _step = "source";
     _error = "";
+    _nameError = "";
     renderModal();
   };
 
@@ -308,8 +328,9 @@ function renderModal() {
 
   const onSubmit = async () => {
     if (!_form.name.trim()) {
-      _error = "Project name is required";
+      _nameError = "Project name is required";
       renderModal();
+      focusNameField();
       return;
     }
     if (!_form.directory.trim()) {
@@ -318,6 +339,7 @@ function renderModal() {
 
     _creating = true;
     _error = "";
+    _nameError = "";
     renderModal();
 
     try {
@@ -337,8 +359,9 @@ function renderModal() {
 
   const onAgentSubmit = async () => {
     if (!_form.name.trim()) {
-      _error = "Project name is required";
+      _nameError = "Project name is required";
       renderModal();
+      focusNameField();
       return;
     }
     if (!_form.directory.trim()) {
@@ -347,6 +370,7 @@ function renderModal() {
 
     _creating = true;
     _error = "";
+    _nameError = "";
     renderModal();
 
     try {
@@ -468,9 +492,14 @@ function renderModal() {
       <sp-textfield
         placeholder="My Site"
         .value=${_form.name}
+        ?invalid=${Boolean(_nameError)}
         @input=${onInput("name")}
         style="width: 100%"
-      ></sp-textfield>
+      >
+        ${_nameError
+          ? html`<sp-help-text slot="negative-help-text">${_nameError}</sp-help-text>`
+          : ""}
+      </sp-textfield>
     </label>
 
     <label class="new-project-field">
@@ -601,19 +630,17 @@ function renderModal() {
             </div>
           `
         : ""}
-      <div class="new-project-modal-body">
-        ${bodyTpl()}
-        ${_tab !== "import" && _error
-          ? html`<div class="new-project-error">
-              ${_error}
-              ${_errorInstallUrl
-                ? html`<a href=${_errorInstallUrl} target="_blank" rel="noreferrer">
-                    Install the Jx Suite GitHub App →
-                  </a>`
-                : ""}
-            </div>`
-          : ""}
-      </div>
+      <div class="new-project-modal-body">${bodyTpl()}</div>
+      ${_tab !== "import" && _error
+        ? html`<div class="new-project-error new-project-error--global">
+            ${_error}
+            ${_errorInstallUrl
+              ? html`<a href=${_errorInstallUrl} target="_blank" rel="noreferrer">
+                  Install the Jx Suite GitHub App →
+                </a>`
+              : ""}
+          </div>`
+        : ""}
       <div class="new-project-modal-footer">${footerTpl()}</div>
     </div>
   `;

package/src/panels/welcome-screen.ts

@@ -15,7 +15,7 @@ import { platformSupportsClone } from "./git-panel";
 interface WelcomeCtx {
   openProject: () => void;
   openRecentProject: (root: string) => void;
-  openNewProject: () => void;
+  openNewProject: (options?: { tab?: "starter" }) => void;
   cloneRepository: () => void;
   addExistingRepo: () => void;
 }
@@ -59,6 +59,20 @@ export function renderWelcome(host: HTMLElement) {
               </svg>
               New Project...
             </button>
+            <button class="welcome-action" @click=${() => ctx.openNewProject({ tab: "starter" })}>
+              <svg
+                class="welcome-action-icon"
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="currentColor"
+              >
+                <path
+                  d="M1 1h6v6H1V1zm1 1v4h4V2H2zm7-1h6v6H9V1zm1 1v4h4V2h-4zM1 9h6v6H1V9zm1 1v4h4v-4H2zm7-1h6v6H9V9zm1 1v4h4v-4h-4z"
+                />
+              </svg>
+              Start from an Example...
+            </button>
             <button class="welcome-action" @click=${() => ctx.openProject()}>
               <svg
                 class="welcome-action-icon"

package/src/platforms/cloud.ts

@@ -209,6 +209,9 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
     id: "cloud",
     projectRoot: root,
     canvasUrl: "/canvas.html",
+    /* Open Project routes through Studio's repo picker (write-access repos via listRepos +
+       importProject) — sessions are URL-bound, so openProject() below never opens a dialog. */
+    openProjectPicker: "repo-list",
 
     async activate() {
       if (!project) {
@@ -377,9 +380,8 @@ export function createCloudPlatform(project: CloudProject | null): StudioPlatfor
 
     /**
      * The project's format registry, served by the session gateway (the dev server's `GET
-     * /__studio/formats` under this session's base path). Part-4 cleanup: the cloud ProjectSession
-     * does not serve the route yet, so this degrades to an empty registry (only .json documents
-     * open) until the backend lands it.
+     * /__studio/formats` under this session's base path). Degrades to an empty registry (only .json
+     * documents open) against backends that predate the route.
      */
     async listFormats() {
       try {

package/src/studio.ts

@@ -155,7 +155,11 @@ import { hydrateProjectList } from "./project-list";
 import { addRecentProject, hydrateRecentProjects, removeRecentProject } from "./recent-projects";
 import { hydrateSettings } from "./services/settings-store";
 import { initWelcome } from "./panels/welcome-screen";
-import { openAddRepoModal } from "./new-project/add-repo-modal";
+import {
+  openAddRepoModal,
+  openProjectPickerModal,
+  platformUsesRepoPicker,
+} from "./new-project/add-repo-modal";
 import { openNewProjectModal } from "./new-project/new-project-modal";
 import type { DocumentStackEntry, GitDiffState } from "./types";
 import type { Tab } from "./tabs/tab";
@@ -546,8 +550,8 @@ initWelcome({
     }
   },
   cloneRepository: () => cloneRepository({ openRecentProject }),
-  openNewProject: async () => {
-    const result = await openNewProjectModal();
+  openNewProject: async (options) => {
+    const result = await openNewProjectModal(options);
     if (result) {
       void openRecentProject(result.root);
     }
@@ -888,6 +892,19 @@ function loadProject() {
   return _loadProject();
 }
 async function openProject() {
+  // Repo-list platforms (cloud) pick from the user's writable repositories instead of a
+  // Backend dialog; the choice opens through the same path as a recent project.
+  if (platformUsesRepoPicker()) {
+    const picked = await openProjectPickerModal();
+    if (picked) {
+      // The catalogue may have gained an entry; refresh it before navigating into the project.
+      void hydrateProjectList().then(() => {
+        render();
+      });
+      void openRecentProject(picked.root);
+    }
+    return;
+  }
   const result = await _openProject({
     renderActivityBar: () => renderActivityBar(),
     renderLeftPanel,

package/src/types.ts

@@ -127,6 +127,14 @@ export interface StudioPlatform {
     config: ProjectConfig;
     handle: { root: string; name: string; projectConfig: ProjectConfig };
   } | null>;
+  /**
+   * How "Open Project" picks a project. Absent: `openProject()` owns picking (native dialog /
+   * showDirectoryPicker). `"repo-list"`: Studio shows its repository picker over `listRepos` +
+   * `importProject` (write-access repositories) and opens the choice through the recent-projects
+   * path — `openProject()` is never called. Cloud sets this: its sessions are URL-bound, so there
+   * is no backend dialog to delegate to.
+   */
+  openProjectPicker?: "repo-list";
   probeRootProject: () => Promise<{
     meta: { root: string; name: string };
     info: {