@jxsuite/studio 3.0.0 → 4.1.0

package/src/ui/cf-account-picker.ts

@@ -0,0 +1,200 @@
+/// <reference lib="dom" />
+/**
+ * Cf-account-picker.ts — "which Cloudflare account?", the question nothing in Studio asked.
+ *
+ * A Cloudflare grant can reach several accounts, and the broker stores exactly one id per
+ * connection. Until one is chosen every Cloudflare-backed call answers `cf_account_required`, so a
+ * multi-account user finished the hosted OAuth flow and landed in a state that reads as connected
+ * and behaves as broken: the assistant 401s, publishing 401s, and no surface says why. The broker
+ * has had `/cf/accounts` and `/cf/select-account` the whole time; this is the first caller.
+ *
+ * ONE picker, invoked wherever a connect resolves account-less — the assistant's managed-connect
+ * CTA, the publish panel, and a button on the Preferences row. A second picker per surface is how
+ * three surfaces end up disagreeing about what "connected" means.
+ *
+ * Cloud-only by construction: the PAL members it drives are the brokered ones, so a platform
+ * holding a pasted API token (desktop, dev server) keeps its own local account field and this
+ * resolves null without opening anything.
+ *
+ * @docs studio/ai
+ * @license MIT
+ */
+
+import { html, render as litRender, nothing } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
+import type { TemplateResult } from "lit-html";
+import { getPlatform, hasPlatform } from "../platform";
+import { notifyCredentialsChanged } from "../settings/preferences-accounts";
+import { showDialog } from "./layers";
+import { overlayRegion } from "./regions";
+import type { CfAccountSummary } from "../types";
+
+/** Whether this platform brokers the connection, and so can be asked which accounts it reaches. */
+function canPick(): boolean {
+  if (!hasPlatform()) {
+    return false;
+  }
+  const platform = getPlatform();
+  return Boolean(platform.cfAccounts && platform.cfSelectAccount);
+}
+
+/**
+ * Ask which Cloudflare account this connection should use, and store the answer.
+ *
+ * Resolves the chosen account, or null — dismissed, or a platform that does not broker connections
+ * at all. A caller treats null as "still unusable" rather than as a failure: nothing was changed,
+ * and the surface that opened this is the one that knows what to say about it.
+ *
+ * @returns {Promise<CfAccountSummary | null>}
+ */
+export function openCfAccountPicker(): Promise<CfAccountSummary | null> {
+  if (!canPick()) {
+    return Promise.resolve(null);
+  }
+  return showDialog<CfAccountSummary | null>(
+    (done) => {
+      let accounts: CfAccountSummary[] = [];
+      let loading = true;
+      /** The last refusal — a listing that failed, or an account the broker would not accept. */
+      let failure = "";
+      /** The id being committed, so its own row can say so rather than the whole list going grey. */
+      let choosing = "";
+      let settled = false;
+      let wrapperEl: HTMLElement | null = null;
+
+      function finish(account: CfAccountSummary | null): void {
+        settled = true;
+        done(account);
+      }
+
+      function repaint(): void {
+        /* Resolved lazily, and only while the dialog is still up: `done` releases the slot, so a
+           late `load()` landing after a dismissal would otherwise paint into a detached host. */
+        const host = settled ? null : wrapperEl?.parentElement;
+        if (host) {
+          litRender(build(), host);
+        }
+      }
+
+      async function load(): Promise<void> {
+        loading = true;
+        failure = "";
+        repaint();
+        try {
+          accounts = (await getPlatform().cfAccounts?.()) ?? [];
+        } catch (error) {
+          failure = error instanceof Error ? error.message : String(error);
+        }
+        loading = false;
+        repaint();
+      }
+
+      async function choose(account: CfAccountSummary): Promise<void> {
+        choosing = account.id;
+        failure = "";
+        repaint();
+        try {
+          await getPlatform().cfSelectAccount?.({ id: account.id, name: account.name });
+        } catch (error) {
+          failure = error instanceof Error ? error.message : String(error);
+          choosing = "";
+          repaint();
+          return;
+        }
+        /* The stored account is a credential like any other: the assistant's gate, the publish
+           panel and the Preferences row all re-read from the same announcement. */
+        notifyCredentialsChanged();
+        finish(account);
+      }
+
+      function listTpl(): TemplateResult | typeof nothing {
+        if (loading) {
+          return html`<p class="cf-account-picker-empty">Reading your Cloudflare accounts…</p>`;
+        }
+        /* Nothing to show and a reason why. The retry is offered only here: a commit that was
+           refused (below) keeps the list, because listing again is not what would fix it. */
+        if (accounts.length === 0) {
+          return html`
+            <p class="cf-account-picker-empty">
+              ${
+                failure
+                  ? `Cloudflare could not be reached: ${failure}`
+                  : "This Cloudflare login reaches no accounts. Create one at dash.cloudflare.com, then try again."
+              }
+            </p>
+            ${
+              failure
+                ? html`<sp-button
+                    size="s"
+                    treatment="outline"
+                    @click=${() => {
+                      void load();
+                    }}
+                  >
+                    Try again
+                  </sp-button>`
+                : nothing
+            }
+          `;
+        }
+        /* The row shape is Preferences › Accounts', deliberately reused: this IS an account list,
+           and a second stylesheet entry for the same shape is how two lists drift apart. */
+        return html`
+          ${failure ? html`<p class="cf-account-picker-error">${failure}</p>` : nothing}
+          <div class="prefs-accounts">
+            ${accounts.map(
+              (account) => html`
+                <div class="prefs-account" data-account=${account.id}>
+                  <div class="prefs-account-text">
+                    <span class="prefs-account-label">${account.name}</span>
+                    <span class="prefs-account-detail">${account.id}</span>
+                  </div>
+                  <sp-button
+                    size="s"
+                    variant="accent"
+                    ?disabled=${choosing !== ""}
+                    @click=${() => {
+                      void choose(account);
+                    }}
+                  >
+                    ${choosing === account.id ? "Selecting…" : "Use this account"}
+                  </sp-button>
+                </div>
+              `,
+            )}
+          </div>
+        `;
+      }
+
+      function build(): TemplateResult {
+        return html`
+          <sp-dialog-wrapper
+            open
+            underlay
+            headline="Choose a Cloudflare account"
+            cancel-label="Cancel"
+            @cancel=${() => finish(null)}
+            @close=${() => finish(null)}
+            ${ref((el?: Element) => {
+              if (el) {
+                wrapperEl = el as HTMLElement;
+              }
+            })}
+          >
+            <div class="cf-account-picker">
+              <p class="cf-account-picker-lede">
+                Your Cloudflare login reaches more than one account. Publishing and the assistant
+                both run against the one you pick; you can change it in Preferences › Accounts.
+              </p>
+              ${listTpl()}
+            </div>
+          </sp-dialog-wrapper>
+        `;
+      }
+
+      void load();
+      return build();
+    },
+    { region: overlayRegion("dialog", "cf-accounts") },
+  );
+}

package/src/ui/choice-field.ts

@@ -0,0 +1,72 @@
+/**
+ * `choiceField` — one labelled choice, rendered the way every Spectrum picker in Studio is.
+ *
+ * It exists so the New File dialog's format picker and the Convert dialog's target picker are the
+ * SAME control rather than two that drift: same divider idiom for a sentinel row, same `live()`
+ * guard, same "one kind is not a choice" collapse to static text.
+ *
+ * **It imports lit only.** Both callers live in modules the other imports — `ui/layers.ts` is
+ * imported by `format/convert-file.ts`, which also wants this fragment — so a shared control that
+ * reached into either would be a cycle, and `import/no-cycle` is an error here.
+ *
+ * `.value=${live(...)}` is not stylistic. `sp-picker` writes its own `value` when the reader picks
+ * a row, so lit's dirty check sees the value it last committed and skips the re-commit that would
+ * put the control back where the model says it is. `scripts/check-lit-conventions.ts` fails on the
+ * unguarded form.
+ */
+
+import { html, nothing } from "lit-html";
+import { live } from "lit-html/directives/live.js";
+import type { TemplateResult } from "lit-html";
+
+/** One row of a {@link choiceField}. */
+export interface ChoiceOption {
+  value: string;
+  label: string;
+  /** Draw an `sp-menu-divider` immediately before this row — how a sentinel row is set apart. */
+  dividerBefore?: boolean;
+}
+
+/** What a {@link choiceField} renders and reports. */
+export interface ChoiceSpec {
+  label: string;
+  options: readonly ChoiceOption[];
+  value: string;
+  onChange: (next: string) => void;
+}
+
+/**
+ * A labelled picker, or static text when there is nothing to choose.
+ *
+ * The collapse is the rule `panels/pane-context.ts` already states about editor kinds: **one kind
+ * is not a choice**. A picker whose menu holds a single row is a control that cannot do anything,
+ * and drawing it invites the reader to open it and find out.
+ *
+ * @param spec - The label, the rows, the current value and the change sink.
+ * @returns The fragment, for a caller's own template.
+ */
+export function choiceField(spec: ChoiceSpec): TemplateResult {
+  const current = spec.options.find((option) => option.value === spec.value);
+  if (spec.options.length < 2) {
+    return html`<div class="choice-row">
+      <sp-field-label size="s">${spec.label}</sp-field-label>
+      <span class="choice-static">${current?.label ?? spec.value}</span>
+    </div>`;
+  }
+  return html`<div class="choice-row">
+    <sp-field-label size="s">${spec.label}</sp-field-label>
+    <sp-picker
+      size="s"
+      label=${spec.label}
+      .value=${live(spec.value)}
+      @change=${(e: Event) => spec.onChange((e.target as HTMLInputElement).value)}
+    >
+      ${spec.options.map(
+        (option) =>
+          html`${
+              option.dividerBefore === true ? html`<sp-menu-divider></sp-menu-divider>` : nothing
+            }<sp-menu-item value=${option.value}>${option.label}</sp-menu-item>`,
+      )}
+    </sp-picker>
+  </div>`;
+}

package/src/ui/layers.ts

@@ -15,10 +15,12 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
 import { repeat } from "lit-html/directives/repeat.js";
+import { choiceField } from "./choice-field";
 import { overlayRegion, REGION_ATTR } from "./regions";
 import { dismiss, toasts } from "../services/notify";
 import { activeRegistry } from "../commands/active-registry";
 import { effect, effectScope } from "../reactivity";
+import type { ChoiceOption } from "./choice-field";
 import type { Notification, Severity } from "../services/notify";
 import type { EffectScope } from "@vue/reactivity";
 import type { TemplateResult } from "lit-html";
@@ -338,6 +340,31 @@ export function showSaveDiscardDialog(
   );
 }
 
+/**
+ * A picker rendered above the field, whose selection the dialog OWNS.
+ *
+ * Owned, not merely displayed: the choice reaches `validate` as its second argument, and picking a
+ * row re-runs it. That is the whole reason this lives here rather than being smuggled in through
+ * `message` — `check` and `rerender` are private to {@link showPromptDialog}, so a caller-built
+ * control could change the selection but could never make the field's refusal catch up with it. The
+ * New File dialog's format picker is exactly that case: switching from Markdown to JSON changes
+ * whether the typed name is already taken, with no keystroke to notice.
+ */
+export interface PromptChoice {
+  /** Label above the picker. */
+  label: string;
+  /**
+   * The rows, re-read on EVERY render rather than captured once. A snapshot taken when the options
+   * object is built freezes a list the project can still be loading — the same defect
+   * `content/entry-commands.ts`'s `derivedEnumProperty` exists to prevent one layer up.
+   */
+  options: () => readonly ChoiceOption[];
+  /** Which row starts selected. */
+  initial: string;
+  /** Told what was picked, for a caller keeping its own derived state. */
+  onChange?: (next: string) => void;
+}
+
 /** Options accepted by {@link showPromptDialog}. */
 export interface PromptDialogOptions {
   /** Label on the confirming button. */
@@ -346,17 +373,21 @@ export interface PromptDialogOptions {
   cancelLabel?: string;
   /** Explanatory copy rendered above the text field. */
   message?: string | TemplateResult;
-  /** Placeholder shown while the field is empty. */
-  placeholder?: string;
+  /** Placeholder shown while the field is empty. Read on every render, so it may follow the choice. */
+  placeholder?: string | (() => string);
   /** How much of the pre-filled value to select once the field takes focus. */
   select?: "all" | "stem" | "none";
   /**
    * Validate the raw field value. Return an empty string when valid, or a message to show as
    * negative help text (which also blocks confirmation). Defaults to "must not be blank".
+   *
+   * `chosen` is the {@link PromptChoice} selection, or `""` when the dialog offers no choice.
    */
-  validate?: (value: string) => string;
+  validate?: (value: string, chosen: string) => string;
   /** Pre-filled value. */
   value?: string;
+  /** A picker above the field whose selection this dialog owns. */
+  choice?: PromptChoice;
 }
 
 /**
@@ -375,6 +406,7 @@ export function showPromptDialog(
 ): Promise<string | null> {
   const {
     cancelLabel = "Cancel",
+    choice,
     confirmLabel = "OK",
     message,
     placeholder = "",
@@ -384,12 +416,22 @@ export function showPromptDialog(
   } = opts;
 
   const check = (candidate: string) =>
-    validate ? validate(candidate) : candidate.trim() ? "" : "Enter a value.";
+    validate ? validate(candidate, chosen) : candidate.trim() ? "" : "Enter a value.";
 
   let value = initialValue;
+  let chosen = choice?.initial ?? "";
   let error = "";
   let wrapperEl: HTMLElement | null = null;
   let focusRequested = false;
+  /*
+   * Whether the reader has typed yet.
+   *
+   * A dialog opens with a valid prefill and NO error, and picking a format must not be the thing
+   * that first paints one under a field nobody has touched — "untitled" is not yet a mistake. So a
+   * pick refreshes an error that is already showing and never mints the first one; the confirm
+   * still refuses, because `confirm()` runs `check` unconditionally.
+   */
+  let touched = false;
 
   return showDialog<string | null>((done) => {
     function rerender() {
@@ -411,6 +453,7 @@ export function showPromptDialog(
     }
 
     function onInput(e: Event) {
+      touched = true;
       value = (e.target as HTMLInputElement).value || "";
       const next = check(value);
       if (next !== error) {
@@ -419,6 +462,23 @@ export function showPromptDialog(
       }
     }
 
+    /**
+     * Take a pick, and re-render UNCONDITIONALLY.
+     *
+     * `onInput` re-renders only when the error string changed, which is right for a keystroke: the
+     * template it would rebuild is identical. A pick is not that. It can change the placeholder,
+     * the picker's own selected row, and — for the New File dialog — whether the composed filename
+     * is already taken, all with the error text unchanged. Comparing error strings here would leave
+     * a dialog showing "about.md already exists" after the reader switched the format to JSON.
+     */
+    function onPick(next: string) {
+      chosen = next;
+      choice?.onChange?.(next);
+      const candidate = check(value);
+      error = touched || error ? candidate : "";
+      rerender();
+    }
+
     function onKeydown(e: KeyboardEvent) {
       if (e.key === "Enter") {
         confirm();
@@ -472,9 +532,27 @@ export function showPromptDialog(
             // Spectrum resets <p> margins to 0, so without this the copy sits flush on the field.
             message ? html`<p style="margin:0 0 8px">${message}</p>` : nothing
           }
+          ${
+            /*
+             * Above the field, and in ONE template position in every mode.
+             *
+             * The `sp-textfield` below must never move or be rebuilt by a conditional branch: lit
+             * would commit a new element, `onFieldRef` would fire again, the `focusRequested` latch
+             * would refuse to re-focus it, and the caret would be stranded mid-name. Only the
+             * placeholder, the validation rules and the help text vary between modes.
+             */
+            choice
+              ? choiceField({
+                  label: choice.label,
+                  onChange: onPick,
+                  options: choice.options(),
+                  value: chosen,
+                })
+              : nothing
+          }
           <sp-textfield
             style="width:100%"
-            placeholder=${placeholder}
+            placeholder=${typeof placeholder === "function" ? placeholder() : placeholder}
             value=${value}
             ?invalid=${Boolean(error)}
             @input=${onInput}

package/src/utils/studio-utils.ts

@@ -4,8 +4,8 @@
  * These are all side-effect-free functions used by style/properties/events panels.
  */
 
-import { defaultContentFormat, formatByName } from "../format/format-host";
-import type { ContentSectionEntry } from "../types";
+import { collectionForFile } from "../content/collection-match";
+import { defaultContentFormat } from "../format/format-host";
 import type { ProjectConfig } from "@jxsuite/schema/types";
 
 /**
@@ -117,15 +117,6 @@ export function abbreviateValue(val: string) {
   return map[val] || val;
 }
 
-/**
- * The placeholder a content type's `source` may carry to say "one directory per locale".
- *
- * Held here rather than imported out of the parser extension's content loader ({@link
- * file://../../../../extensions/parser/src/content-loader.ts}): that module reads the filesystem
- * and this one runs in a browser. It is also an extension, and core may not import one.
- */
-const LOCALE_PLACEHOLDER = "{locale}";
-
 /**
  * True when a schema `format` names a MEDIA reference.
  *
@@ -184,8 +175,14 @@ export function inferInputType(entry: Record<string, unknown>) {
 }
 
 /**
- * Match a document path to a content type and return its schema. Compares the content type's
- * `source` directory against the document path prefix, using `format` for extension matching.
+ * Match a document path to a content type and return its schema.
+ *
+ * Delegates to `content/collection-match.ts`, which is the ONE matcher — the reason it takes a
+ * config rather than reading `projectState`. Two rules are added here and belong here, because they
+ * are about the FORM rather than about membership: a collection that declares no `schema` has no
+ * fields to draw, and a file whose extension is not the collection's is not one of its entries.
+ * Membership itself — the `{locale}` expansion, the recursive subdirectory, the single-file
+ * catalogue, longest-source-wins — is the matcher's, and is no longer restated here.
  *
  * @param {string | null} documentPath — project-relative path (e.g. "content/products/widget.md")
  * @param {ProjectConfig | null | undefined} projectConfig — parsed project.json
@@ -198,47 +195,20 @@ export function findContentTypeSchema(
   if (!documentPath || !projectConfig?.content) {
     return null;
   }
-  // Content-type `source` prefixes are always forward-slash. The desktop platform can hand us
-  // OS-native backslash paths on Windows, so normalize before prefix matching.
-  const docPath = documentPath.replaceAll("\\", "/");
-  for (const [name, def] of Object.entries(
-    projectConfig.content as Record<string, ContentSectionEntry>,
-  )) {
-    if (!def.source || !def.schema) {
-      continue;
-    }
-    const src = def.source.replace(/^\.\//, "").replace(/\/$/, "");
-    const hasExt = src.includes(".") && !src.endsWith("/") && !src.includes(LOCALE_PLACEHOLDER);
-    if (hasExt) {
-      if (docPath === src || docPath.endsWith(`/${src}`)) {
-        return { name, schema: def.schema };
-      }
-    } else {
-      const ext =
-        def.format === "json"
-          ? ".json"
-          : (formatByName(def.format)?.extensions[0] ??
-            defaultContentFormat()?.extensions[0] ??
-            ".json");
-      /* A localized source is N directories, one content type: `content/posts/{locale}` matches
-         `content/posts/fr/hello.md` and carries the SAME schema, because a translation is the same
-         post. Without this the placeholder was compared literally, matched no path anybody has, and
-         a translated entry showed no frontmatter fields at all. */
-      const prefix = src.includes(LOCALE_PLACEHOLDER)
-        ? new RegExp(
-            `^${src
-              .split(LOCALE_PLACEHOLDER)
-              .map((part) => part.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw`\$&`))
-              .join("[^/]+")}/`,
-          )
-        : null;
-      const matches = prefix ? prefix.test(docPath) : docPath.startsWith(`${src}/`);
-      if (matches && docPath.endsWith(ext)) {
-        return { name, schema: def.schema };
-      }
+  const match = collectionForFile(documentPath, projectConfig);
+  if (!match || !match.def.schema) {
+    return null;
+  }
+  /* A single-file source is matched AS that file, so its extension is settled by construction.
+     A directory-backed one is not: a `.json` sitting beside `.md` posts is somebody else's file,
+     and drawing the collection's fields over it would invite edits nothing will ever read. */
+  if (!match.fileBacked) {
+    const ext = match.ext ?? defaultContentFormat()?.extensions[0] ?? ".json";
+    if (!documentPath.toLowerCase().endsWith(ext.toLowerCase())) {
+      return null;
     }
   }
-  return null;
+  return { name: match.name, schema: match.def.schema };
 }
 
 /**

package/styles/forced-colors.css

@@ -48,6 +48,13 @@
     outline-offset: -2px;
   }
 
+  /* The rail's gear while its menu is open. That state is drawn with a `background`, which this
+     mode re-forces to the system canvas — so it says nothing. An outline says it instead. */
+  .rail-item--menu-open {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+
   /* The drop target. A 3px translucent ring is invisible here twice over — shadow and alpha. */
   .drop-target,
   .is-drop-target {