@jxsuite/studio 0.33.0 → 0.35.0

package/src/panels/tab-bar.ts

@@ -1,20 +1,23 @@
 /// <reference lib="dom" />
 /**
- * Tab bar — a per-tab contextual action bar rendered between the tab strip and the edit content.
- * Standardizes Back/breadcrumb navigation, media feature toggles, and mode actions (Code-mode
- * Export) into a single bar shared identically by every edit mode.
+ * Tab bar — a persistent per-tab settings bar rendered between the tab strip and the edit content.
+ * Standardizes Back/breadcrumb navigation, the view settings cluster (preview toggle, layout
+ * visibility, dynamic route-param pickers — shown in the edit/design base modes), media feature
+ * toggles, and mode actions (Code-mode Export) into a single bar shared by every edit mode.
  *
  * Follows the same module shape as tab-strip.ts: mount(host, ctx) → effectScope/effect → render().
- * The bar collapses (renders `nothing`, so `#tab-bar:empty` hides the row) when there is nothing
- * contextual to show.
+ * The bar renders `nothing` (so `#tab-bar:empty` hides the row) only when no tab is active.
  */
 
 import { html, render as litRender, nothing } from "lit-html";
-import { updateUi } from "../store";
+import { projectState, updateUi } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
-import { getEffectiveMedia } from "../site-context";
+import { getEffectiveLayoutPath, getEffectiveMedia } from "../site-context";
+import { dynamicRouteParams, loadParamValues, pagePathsDef } from "../page-params";
 import { mediaDisplayName } from "./shared";
+import type { ParamValues } from "../page-params";
+import type { Tab } from "../tabs/tab";
 import type { DocumentStackEntry, FunctionEditDef } from "../types";
 import type { EffectScope } from "@vue/reactivity";
 import type { TemplateResult } from "lit-html";
@@ -59,12 +62,16 @@ export function mount(host: HTMLElement, ctx: TabBarCtx) {
       if (tab) {
         // Read reactive properties to establish tracking — mirrors the toolbar's subset
         void tab.doc.document;
+        void tab.doc.document?.$layout;
         void tab.doc.mode;
         void tab.documentPath;
         void tab.session.documentStack.length;
         void tab.session.ui.canvasMode;
         void tab.session.ui.editingFunction;
         void tab.session.ui.featureToggles;
+        void tab.session.ui.preview;
+        void tab.session.ui.previewParams;
+        void tab.session.ui.showLayout;
       }
       render();
     });
@@ -143,6 +150,55 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
     `;
   }
 
+  // ── Right region: view settings cluster (edit/design base modes only) ──
+  // Gates on the BASE mode (not the effective mode): the cluster stays visible while the preview
+  // Toggle is on so it can be toggled back off.
+  const baseMode = S.ui.canvasMode;
+  const isPage = Boolean(
+    S.documentPath &&
+    projectState?.isSiteProject &&
+    (S.documentPath.startsWith("pages/") || S.documentPath.startsWith("./pages/")),
+  );
+  let settingsTpl: TemplateResult | typeof nothing = nothing;
+  if (!editing && (baseMode === "edit" || baseMode === "design")) {
+    const canPreview = tab.capabilities.modes.includes("preview");
+    const hasLayout = isPage && Boolean(getEffectiveLayoutPath(S.document?.$layout));
+    const pickersTpl = isPage ? paramPickersTpl(tab) : nothing;
+    const previewTpl = canPreview
+      ? html`
+          <sp-action-button
+            toggles
+            size="s"
+            title="Preview resolved values"
+            ?selected=${Boolean(S.ui.preview)}
+            @click=${() => updateUi("preview", !S.ui.preview)}
+          >
+            <sp-icon-preview slot="icon"></sp-icon-preview>
+            Preview
+          </sp-action-button>
+        `
+      : nothing;
+    const layoutTpl = hasLayout
+      ? html`
+          <sp-action-button
+            toggles
+            size="s"
+            title="Show layout elements"
+            ?selected=${S.ui.showLayout !== false}
+            @click=${() => updateUi("showLayout", S.ui.showLayout === false)}
+          >
+            Layout
+          </sp-action-button>
+        `
+      : nothing;
+    if (pickersTpl !== nothing || previewTpl !== nothing || layoutTpl !== nothing) {
+      settingsTpl = html`
+        ${pickersTpl}
+        <sp-action-group compact size="s">${layoutTpl} ${previewTpl}</sp-action-group>
+      `;
+    }
+  }
+
   // ── Right region: media feature toggles ──
   const { featureQueries } = ctx.parseMediaEntries(getEffectiveMedia(S.document?.$media));
   const togglesTpl =
@@ -183,16 +239,106 @@ function tabBarTemplate(ctx: TabBarCtx): TemplateResult | typeof nothing {
         `
       : nothing;
 
-  // Collapse the bar entirely when there is nothing contextual to show.
-  if (navTpl === nothing && togglesTpl === nothing && exportTpl === nothing) {
-    return nothing;
-  }
-
   return html`
     <div class="tab-bar">
       ${navTpl}
       <div class="tb-spacer"></div>
-      ${togglesTpl} ${exportTpl}
+      ${settingsTpl} ${togglesTpl} ${exportTpl}
     </div>
   `;
 }
+
+// ── Dynamic route-param pickers ──────────────────────────────────────────────
+// Candidate values load asynchronously (ContentCollection resolution / data-file read); the module
+// Caches the last result per (documentPath, $paths) and re-renders when it lands — the same lazy
+// Fill pattern as head-panel's loadLayoutEntries. When values arrive, any param without a chosen
+// Value auto-selects the first candidate (matching the compiler, whose first expanded route is the
+// First path entry).
+
+let _paramValues: ParamValues | null = null;
+
+let _paramValuesKey: string | null = null;
+
+/**
+ * @param {Tab} tab
+ * @returns {ParamValues | null} — null while loading (or when the doc declares no params)
+ */
+function paramValuesFor(tab: Tab): ParamValues | null {
+  const pathsDef = pagePathsDef({
+    document: tab.doc.document,
+    frontmatter: tab.doc.content.frontmatter,
+  });
+  if (!pathsDef && dynamicRouteParams(tab.documentPath).length === 0) {
+    return null;
+  }
+  const key = `${tab.documentPath ?? ""}::${JSON.stringify(pathsDef)}`;
+  if (_paramValuesKey === key) {
+    return _paramValues;
+  }
+  _paramValuesKey = key;
+  _paramValues = null;
+  void loadParamValues(tab.documentPath, pathsDef).then((values) => {
+    if (_paramValuesKey !== key || activeTab.value !== tab) {
+      return;
+    }
+    _paramValues = values;
+    autoSelectParams(tab, values);
+    render();
+  });
+  return _paramValues;
+}
+
+/**
+ * @param {Tab} tab
+ * @param {ParamValues} values
+ */
+function autoSelectParams(tab: Tab, values: ParamValues) {
+  const current = tab.session.ui.previewParams ?? {};
+  const additions: Record<string, string> = {};
+  for (const [name, list] of Object.entries(values)) {
+    if (!current[name] && list.length > 0) {
+      additions[name] = list[0]!;
+    }
+  }
+  if (Object.keys(additions).length > 0) {
+    updateUi("previewParams", { ...current, ...additions });
+  }
+}
+
+/**
+ * @param {Tab} tab
+ * @returns {TemplateResult | typeof nothing}
+ */
+function paramPickersTpl(tab: Tab): TemplateResult | typeof nothing {
+  const values = paramValuesFor(tab);
+  const names = new Set(dynamicRouteParams(tab.documentPath));
+  for (const name of Object.keys(values ?? {})) {
+    names.add(name);
+  }
+  if (names.size === 0) {
+    return nothing;
+  }
+  const { previewParams } = tab.session.ui;
+  return html`
+    ${[...names].map(
+      (name) => html`
+        <sp-picker
+          size="s"
+          quiet
+          class="tab-bar-param"
+          label=${name}
+          title=${`Preview value for [${name}]`}
+          value=${previewParams?.[name] ?? ""}
+          @change=${(e: Event) => {
+            const { value } = e.target as HTMLInputElement;
+            updateUi("previewParams", { ...tab.session.ui.previewParams, [name]: value });
+          }}
+        >
+          ${(values?.[name] ?? []).map(
+            (v: string) => html`<sp-menu-item value=${v}>${v}</sp-menu-item>`,
+          )}
+        </sp-picker>
+      `,
+    )}
+  `;
+}

package/src/panels/toolbar.ts

@@ -305,7 +305,6 @@ function minimalToolbarTemplate(ctx: ToolbarCtx) {
 const modes = [
   { iconTag: "sp-icon-edit", key: "edit", label: "Edit" },
   { iconTag: "sp-icon-artboard", key: "design", label: "Design" },
-  { iconTag: "sp-icon-preview", key: "preview", label: "Preview" },
   { iconTag: "sp-icon-code", key: "source", label: "Code" },
   { iconTag: "sp-icon-brush", key: "stylebook", label: "Stylebook" },
 ];
@@ -333,7 +332,9 @@ function toolbarTemplate() {
     selection: tab.session.selection,
     ui: tab.session.ui,
   };
-  const canvasMode = ctx.getCanvasMode();
+  // Base mode, not the effective mode: the switcher keeps Edit/Design highlighted while the
+  // Tab-bar preview toggle is on (preview is no longer a switchable mode).
+  const { canvasMode } = tab.session.ui;
 
   const modeSwitcherTpl = html`
     <sp-action-group selects="single" size="s" compact>

package/src/platforms/devserver.ts

@@ -8,8 +8,16 @@
  * See spec/desktop.md §8 for the full specification.
  */
 
+import { streamImport } from "../services/import-client";
 import type { ProjectConfig } from "@jxsuite/schema/types";
-import type { DirEntry, FsEvent, RenameResult } from "../types";
+import type {
+  DirEntry,
+  FsEvent,
+  ImportProgressEvent,
+  ImportSiteOptions,
+  RenameResult,
+  StarterInfo,
+} from "../types";
 
 /** A directory entry from the server, tolerating extra wire fields. */
 type WireDirEntry = DirEntry & Record<string, unknown>;
@@ -215,6 +223,9 @@ export function createDevServerPlatform() {
       url?: string;
       adapter?: string;
       directory: string;
+      starter?: string;
+      template?: string;
+      design?: Record<string, unknown>;
     }) {
       const res = await fetch("/__studio/create-project", {
         body: JSON.stringify(opts),
@@ -228,6 +239,24 @@ export function createDevServerPlatform() {
       return await res.json();
     },
 
+    /** List starter templates from the dev server. */
+    async listStarters(): Promise<StarterInfo[]> {
+      const res = await fetch("/__studio/starters");
+      if (!res.ok) {
+        throw new Error("Failed to load starters");
+      }
+      return await readJson<StarterInfo[]>(res);
+    },
+
+    /** AI-guided site import: NDJSON progress stream from the dev server's import endpoint. */
+    async importSite(
+      opts: ImportSiteOptions,
+      onProgress: (evt: ImportProgressEvent) => void,
+      signal?: AbortSignal,
+    ) {
+      return await streamImport("/__studio/import-site", opts, onProgress, signal);
+    },
+
     // ─── File operations ──────────────────────────────────────────────────
 
     /** @param {string} dir */
@@ -588,6 +617,21 @@ export function createDevServerPlatform() {
       return schema;
     },
 
+    // ─── Class resolution (dev-proxy) ─────────────────────────────────────
+
+    /** @param {Record<string, unknown>} body */
+    async resolveClass(body: Record<string, unknown>) {
+      const res = await fetch("/__jx_resolve__", {
+        body: JSON.stringify(body),
+        headers: { "content-type": "application/json" },
+        method: "POST",
+      });
+      if (!res.ok) {
+        throw new Error(`Class resolution failed: ${res.status}`);
+      }
+      return await readJson<unknown>(res);
+    },
+
     // ─── Git operations ──────────────────────────────────────────────────
 
     async gitStatus() {

package/src/services/agent-seed.ts

@@ -0,0 +1,91 @@
+/// <reference lib="dom" />
+/**
+ * Agent-seed.ts — cross-window handoff of a pending AI assistant prompt.
+ *
+ * The New Project flow stores the user's project brief here; the Studio window that opens the
+ * project consumes it and seeds the Assistant tab. localStorage (not module state) is deliberate:
+ * on desktop the new project opens in a NEW window, and the per-root localStorage key is the
+ * cross-window channel (precedent: the chat-history key `jx-ai-chat-history:<root>`).
+ *
+ * @license MIT
+ */
+
+const PENDING_PROMPT_PREFIX = "jx.ai.pendingAgentPrompt";
+
+/** Entries older than this are considered stale and dropped on read. */
+const MAX_AGE_MS = 15 * 60 * 1000;
+
+function storageKey(root: string) {
+  return `${PENDING_PROMPT_PREFIX}:${root}`;
+}
+
+/**
+ * Read the pending entry for a project root, dropping stale or malformed entries.
+ *
+ * @param {string} root
+ * @returns {{ prompt: string; ts: number } | null}
+ */
+function readEntry(root: string): { prompt: string; ts: number } | null {
+  try {
+    const raw = globalThis.localStorage?.getItem(storageKey(root));
+    if (!raw) {
+      return null;
+    }
+    const parsed = JSON.parse(raw) as { prompt?: unknown; ts?: unknown };
+    const valid =
+      typeof parsed.prompt === "string" &&
+      typeof parsed.ts === "number" &&
+      Date.now() - parsed.ts <= MAX_AGE_MS;
+    if (!valid) {
+      // Stale or malformed — remove so it never seeds a later session.
+      globalThis.localStorage?.removeItem(storageKey(root));
+      return null;
+    }
+    return { prompt: parsed.prompt as string, ts: parsed.ts as number };
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Store a pending assistant prompt for the project at `root`.
+ *
+ * @param {string} root
+ * @param {string} prompt
+ */
+export function setPendingAgentPrompt(root: string, prompt: string): void {
+  try {
+    globalThis.localStorage?.setItem(storageKey(root), JSON.stringify({ prompt, ts: Date.now() }));
+  } catch {
+    /* LocalStorage unavailable — the prompt is simply not handed off. */
+  }
+}
+
+/**
+ * Whether a fresh (younger than 15 min) pending prompt exists for `root`.
+ *
+ * @param {string} root
+ */
+export function hasPendingAgentPrompt(root: string): boolean {
+  return readEntry(root) !== null;
+}
+
+/**
+ * Read AND delete the pending prompt for `root` (consume-on-read keeps repeated renders
+ * idempotent). Returns null when there is no fresh entry.
+ *
+ * @param {string} root
+ * @returns {string | null}
+ */
+export function consumePendingAgentPrompt(root: string): string | null {
+  const entry = readEntry(root);
+  if (!entry) {
+    return null;
+  }
+  try {
+    globalThis.localStorage?.removeItem(storageKey(root));
+  } catch {
+    /* LocalStorage unavailable — nothing to delete. */
+  }
+  return entry.prompt;
+}

package/src/services/ai-models.ts

@@ -0,0 +1,64 @@
+/// <reference lib="dom" />
+/**
+ * Ai-models.js — available-model listing from the studio AI proxy.
+ *
+ * Fetches the proxy's /models endpoint (the chat endpoint's sibling), forwarding the
+ * stored API key as X-Api-Key and the endpoint override as X-Api-Base-URL so the proxy
+ * lists models from the user's chosen provider. Shared by the credentials form and the
+ * chat composer's model picker; results are cached module-wide until invalidated (e.g.
+ * after credentials change).
+ *
+ * @license MIT
+ */
+
+import { getPlatform } from "../platform";
+import { getBaseUrl, getOpenAiKey } from "./ai-settings";
+
+export interface AiModel {
+  id: string;
+  name: string;
+}
+
+let cache: AiModel[] | null = null;
+
+/** Drop the cached model list (call after credentials/endpoint changes). */
+export function invalidateModelCache() {
+  cache = null;
+}
+
+/**
+ * Fetch the models available through the AI proxy. Returns the cached list when present unless
+ * `force` is set; throws on HTTP/network failure (callers surface the error).
+ *
+ * @param {{ apiKey?: string; baseUrl?: string; force?: boolean }} [opts] - Credential overrides for
+ *   drafts not yet saved to ai-settings.
+ * @returns {Promise<AiModel[]>}
+ */
+export async function fetchAvailableModels(
+  opts: { apiKey?: string; baseUrl?: string; force?: boolean } = {},
+): Promise<AiModel[]> {
+  if (cache && !opts.force) {
+    return cache;
+  }
+  const plat = getPlatform();
+  const chatUrl = await Promise.resolve(plat.aiChatUrl());
+  const modelsUrl = chatUrl.replace(/\/chat$/, "/models");
+
+  const headers: Record<string, string> = {};
+  const apiKey = opts.apiKey || getOpenAiKey();
+  if (apiKey) {
+    headers["X-Api-Key"] = apiKey;
+  }
+  const baseUrl = opts.baseUrl || getBaseUrl();
+  if (baseUrl) {
+    headers["X-Api-Base-URL"] = baseUrl;
+  }
+
+  const resp = await fetch(modelsUrl, { headers });
+  if (!resp.ok) {
+    throw new Error(`HTTP ${resp.status}`);
+  }
+  const data = (await resp.json()) as { models?: { id: string; name?: string }[] };
+  cache = (data.models || []).map((m) => ({ id: m.id, name: m.name || m.id }));
+  return cache;
+}