@jxsuite/studio 0.34.0 → 0.36.0

package/src/new-project/templates.ts

@@ -0,0 +1,61 @@
+/**
+ * The built-in project templates shown on the New Project modal's Template tab. The ids are the
+ * contract with `@jxsuite/create/templates` (createProject validates them server-side); the copy
+ * here is presentation only. Hardcoded rather than imported: `@jxsuite/create` is a Node CLI
+ * package and Studio runs in the browser.
+ */
+
+export interface TemplateInfo {
+  id: string;
+  name: string;
+  tagline: string;
+  /** Glyph shown in the card's preview area. */
+  glyph: string;
+  /** The template's default $media map (mirrors @jxsuite/create's mediaForTemplate). */
+  media: Record<string, string>;
+}
+
+const DESKTOP_FIRST_MEDIA = {
+  "--": "1280px",
+  "--lg": "(max-width: 1024px)",
+  "--md": "(max-width: 768px)",
+  "--sm": "(max-width: 640px)",
+};
+
+const MOBILE_FIRST_MEDIA = {
+  "--": "375px",
+  "--sm": "(min-width: 640px)",
+  "--md": "(min-width: 768px)",
+  "--lg": "(min-width: 1024px)",
+};
+
+export const PROJECT_TEMPLATES: readonly TemplateInfo[] = [
+  {
+    glyph: "+",
+    id: "blank",
+    media: DESKTOP_FIRST_MEDIA,
+    name: "Blank",
+    tagline: "Start from scratch",
+  },
+  {
+    glyph: "🖥",
+    id: "desktop-first",
+    media: DESKTOP_FIRST_MEDIA,
+    name: "Desktop First",
+    tagline: "Max-width breakpoints",
+  },
+  {
+    glyph: "📱",
+    id: "mobile-first",
+    media: MOBILE_FIRST_MEDIA,
+    name: "Mobile First",
+    tagline: "Min-width breakpoints",
+  },
+  {
+    glyph: "📲",
+    id: "mobile-app",
+    media: MOBILE_FIRST_MEDIA,
+    name: "Mobile App",
+    tagline: "App shell with bottom navigation",
+  },
+];

package/src/packages/ensure-deps.ts

@@ -7,8 +7,14 @@
 
 import { getPlatform } from "../platform";
 import { showProgressModal } from "../ui/progress-modal";
+import { shouldInstallAutomation } from "../services/automation";
 
 export async function ensureDependenciesInstalled(): Promise<void> {
+  // Automation/screenshot runs open projects read-only to drive the canvas — they must never mutate
+  // The project on disk (a `bun install` would litter node_modules/bun.lock into starter templates).
+  if (shouldInstallAutomation(location.search)) {
+    return;
+  }
   const platform = getPlatform();
   if (!platform.dependenciesNeedInstall || !platform.installDependencies) {
     return;

package/src/packages/pull-package-sync.ts

@@ -0,0 +1,339 @@
+/// <reference lib="dom" />
+/**
+ * Pull orchestration that keeps project sync from being blocked by Studio's own automated package
+ * updates. The on-open @jxsuite update rewrites package.json and bun.lock without committing, so a
+ * teammate pushing the same update makes a later `git pull` refuse to merge. Since those local
+ * changes are machine-generated and reproducible, we discard them, pull, and re-run the package
+ * sync (re-apply the update if the pulled project is still behind, or `bun install` if the pull
+ * brought it). Detection is state-based (git status + content comparison against `@{u}`), never git
+ * stderr parsing, so it works identically across backends and locales.
+ */
+
+import { errorMessage } from "@jxsuite/schema/parse";
+import { getPlatform } from "../platform";
+import { showConfirmDialog } from "../ui/layers";
+import { showProgressModal } from "../ui/progress-modal";
+import { statusMessage } from "../panels/statusbar";
+import { applyJxsuiteUpdate, checkJxsuiteUpdate } from "./jxsuite-update";
+import type { GitStatusResult } from "../types";
+
+const PKG_PATHS = ["package.json", "bun.lock", "bun.lockb"];
+
+/** Untracked markers across backends: desktop porcelain v1 emits "??", server porcelain v2 "U". */
+const UNTRACKED_STATUSES = new Set(["??", "U"]);
+
+/** Above this many dirty files, skip the per-file upstream comparison and leave the error as-is. */
+const MAX_CONFLICT_SCAN = 25;
+
+const JXSUITE_PREFIX = "@jxsuite/";
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function sortKeys(value: unknown): unknown {
+  if (Array.isArray(value)) {
+    return value.map((entry) => sortKeys(entry));
+  }
+  if (isRecord(value)) {
+    const out: Record<string, unknown> = {};
+    for (const key of Object.keys(value).toSorted()) {
+      out[key] = sortKeys(value[key]);
+    }
+    return out;
+  }
+  return value;
+}
+
+/** Replace every @jxsuite/* version in dependencies/devDependencies so they compare equal. */
+function maskJxsuiteVersions(pkg: Record<string, unknown>): Record<string, unknown> {
+  const out = { ...pkg };
+  for (const section of ["dependencies", "devDependencies"]) {
+    const deps = out[section];
+    if (!isRecord(deps)) {
+      continue;
+    }
+    const masked = { ...deps };
+    for (const name of Object.keys(masked)) {
+      if (name.startsWith(JXSUITE_PREFIX)) {
+        masked[name] = "*";
+      }
+    }
+    out[section] = masked;
+  }
+  return out;
+}
+
+/**
+ * True when the working package.json differs from the HEAD copy only in the version strings of
+ * jxsuite-scoped entries — i.e. exactly what Studio's automated update writes. Added/removed deps
+ * or any other edit means a human touched the file.
+ */
+export function isAutomatedPackageDiff(
+  headText: string | null,
+  workingText: string | null,
+): boolean {
+  if (headText === null || workingText === null) {
+    return false;
+  }
+  let head: unknown;
+  let working: unknown;
+  try {
+    head = JSON.parse(headText);
+    working = JSON.parse(workingText);
+  } catch {
+    return false;
+  }
+  if (!isRecord(head) || !isRecord(working)) {
+    return false;
+  }
+  return (
+    JSON.stringify(sortKeys(maskJxsuiteVersions(head))) ===
+    JSON.stringify(sortKeys(maskJxsuiteVersions(working)))
+  );
+}
+
+async function tryShow(path: string, ref: string): Promise<string | null> {
+  try {
+    return await getPlatform().gitShow({ path, ref });
+  } catch {
+    return null;
+  }
+}
+
+async function tryRead(path: string): Promise<string | null> {
+  try {
+    return await getPlatform().readFile(path);
+  } catch {
+    return null;
+  }
+}
+
+export interface PackagePullPlan {
+  /** Tracked dirty package files whose upstream (@{u}) content differs from HEAD. */
+  discard: string[];
+  /** Untracked package files that exist at @{u} ("untracked would be overwritten" case). */
+  removeUntracked: string[];
+  /** Whether the package.json working copy diverges from HEAD only by automated @jxsuite bumps. */
+  automated: boolean;
+}
+
+/**
+ * Decide which local package files stand in the way of a merge. Only files the upstream actually
+ * changed can block the pull, so files whose @{u} content matches HEAD are left alone.
+ */
+export async function planPackageDiscard(status: GitStatusResult): Promise<PackagePullPlan> {
+  const discard: string[] = [];
+  const removeUntracked: string[] = [];
+  let automated = true;
+  for (const path of PKG_PATHS) {
+    const entries = status.files.filter((f) => f.path === path);
+    if (entries.length === 0) {
+      continue;
+    }
+    const upstream = await tryShow(path, "@{u}");
+    if (entries.every((f) => UNTRACKED_STATUSES.has(f.status))) {
+      if (upstream !== null) {
+        removeUntracked.push(path);
+      }
+      continue;
+    }
+    const head = await tryShow(path, "HEAD");
+    if (upstream === null || upstream === head) {
+      continue;
+    }
+    discard.push(path);
+    if (path === "package.json") {
+      automated &&= isAutomatedPackageDiff(head, await tryRead(path));
+    }
+  }
+  return { automated, discard, removeUntracked };
+}
+
+function planIsEmpty(plan: PackagePullPlan): boolean {
+  return plan.discard.length === 0 && plan.removeUntracked.length === 0;
+}
+
+/** True when a dirty non-package file also differs upstream — recovery can't unblock that pull. */
+async function otherFilesConflict(status: GitStatusResult): Promise<boolean> {
+  const paths = [
+    ...new Set(status.files.filter((f) => !PKG_PATHS.includes(f.path)).map((f) => f.path)),
+  ];
+  if (paths.length > MAX_CONFLICT_SCAN) {
+    return true;
+  }
+  for (const path of paths) {
+    const upstream = await tryShow(path, "@{u}");
+    if (upstream !== null && upstream !== (await tryShow(path, "HEAD"))) {
+      return true;
+    }
+  }
+  return false;
+}
+
+async function applyDiscard(plan: PackagePullPlan): Promise<void> {
+  const platform = getPlatform();
+  if (plan.discard.length > 0) {
+    // Unstage unconditionally: desktop porcelain v1 doesn't report a staged flag.
+    // Restoring an unstaged tracked file is a no-op.
+    await platform.gitUnstage(plan.discard);
+    await platform.gitDiscard(plan.discard);
+  }
+  for (const path of plan.removeUntracked) {
+    await platform.deleteFile(path);
+  }
+}
+
+/**
+ * Bring packages back in line after a pull that touched (or followed a discard of) package files:
+ * re-apply the @jxsuite update if the pulled project is still behind, otherwise `bun install` so
+ * node_modules matches the pulled lockfile. Never throws — a successful pull must not turn into an
+ * error banner; failures surface through the progress modal.
+ */
+async function syncPackagesAfterPull(): Promise<void> {
+  const platform = getPlatform();
+  let check: Awaited<ReturnType<typeof checkJxsuiteUpdate>> = null;
+  try {
+    check = await checkJxsuiteUpdate();
+  } catch {
+    check = null;
+  }
+  if (check && platform.setPackageVersions) {
+    // No re-prompt: the discarded local changes came from an update the user already accepted.
+    await applyJxsuiteUpdate(check.outdated, check.target);
+    return;
+  }
+  if (!platform.installDependencies) {
+    return;
+  }
+  const progress = showProgressModal({
+    status: "Running bun install…",
+    title: "Syncing dependencies",
+  });
+  try {
+    const result = await platform.installDependencies();
+    if (result.ok) {
+      progress.done();
+    } else {
+      progress.fail(result.log ?? "bun install failed");
+    }
+  } catch (error) {
+    progress.fail(errorMessage(error));
+  }
+}
+
+/**
+ * Discard per plan, pull, and re-sync. A discard is always followed by a package re-sync — even
+ * when the pull fails — so the project is never stranded without the update it had before.
+ */
+async function discardPullAndSync(plan: PackagePullPlan): Promise<void> {
+  const platform = getPlatform();
+  try {
+    await applyDiscard(plan);
+  } catch (error) {
+    throw new Error(`Could not reset local package files: ${errorMessage(error)}`, {
+      cause: error,
+    });
+  }
+  try {
+    await platform.gitPull();
+  } catch (error) {
+    await syncPackagesAfterPull();
+    throw error;
+  }
+  statusMessage("Local package updates were superseded by pulled changes");
+  await syncPackagesAfterPull();
+}
+
+async function recoverAfterFailedPull(original: unknown): Promise<void> {
+  const platform = getPlatform();
+  let status: GitStatusResult;
+  try {
+    status = await platform.gitStatus();
+  } catch {
+    throw original;
+  }
+  if (!(status.behind > 0)) {
+    throw original;
+  }
+  const plan = await planPackageDiscard(status);
+  if (planIsEmpty(plan) || (await otherFilesConflict(status))) {
+    throw original;
+  }
+  if (!plan.automated) {
+    const confirmed = await showConfirmDialog(
+      "Discard local package changes?",
+      "package.json / bun.lock have local edits that conflict with incoming changes. Discard them, pull, and re-sync packages?",
+      { confirmLabel: "Discard and pull", destructive: true },
+    );
+    if (!confirmed) {
+      throw original;
+    }
+  }
+  await discardPullAndSync(plan);
+}
+
+async function snapshotPackageFiles(): Promise<(string | null)[]> {
+  return Promise.all(PKG_PATHS.map((path) => tryRead(path)));
+}
+
+/**
+ * Pull with automatic recovery from conflicts caused by Studio's own package updates. Throws only
+ * when the pull genuinely fails for reasons recovery can't (or shouldn't) fix.
+ */
+export async function pullWithPackageSync(): Promise<void> {
+  const platform = getPlatform();
+  const before = await snapshotPackageFiles();
+
+  // Preemptive: fetch so `behind` is current, then reset automated package edits that would
+  // Block the merge — manual package.json edits fall through to the plain pull + confirm path.
+  let status: GitStatusResult | null = null;
+  try {
+    await platform.gitFetch();
+    status = await platform.gitStatus();
+  } catch {
+    status = null; // Offline or status failure — the plain pull will report the real error
+  }
+  if (status && status.behind > 0) {
+    const plan = await planPackageDiscard(status);
+    if (!planIsEmpty(plan) && plan.automated) {
+      await discardPullAndSync(plan);
+      return;
+    }
+  }
+
+  try {
+    await platform.gitPull();
+  } catch (error) {
+    await recoverAfterFailedPull(error);
+    return;
+  }
+  const after = await snapshotPackageFiles();
+  if (before.some((content, i) => content !== after[i])) {
+    await syncPackagesAfterPull();
+  }
+}
+
+/**
+ * Pull remote changes as soon as a project opens, ahead of the install check and update prompt, so
+ * a session starts from the current remote state. Never throws and never blocks the open — failures
+ * (offline, no upstream, unrelated conflicts) surface as a status message only.
+ */
+export async function autoSyncProjectOnOpen(): Promise<void> {
+  const platform = getPlatform();
+  let status: GitStatusResult;
+  try {
+    status = await platform.gitStatus();
+  } catch {
+    return;
+  }
+  if (!status?.isRepo || (status.remotes?.length ?? 0) === 0) {
+    return;
+  }
+  statusMessage("Syncing project…");
+  try {
+    await pullWithPackageSync();
+  } catch (error) {
+    statusMessage(`Sync skipped: ${errorMessage(error)}`);
+  }
+}

package/src/panels/ai-chat/attached-context.ts

@@ -0,0 +1,49 @@
+/**
+ * Attached-context.js — the composer's "attach context" message-content convention.
+ *
+ * Attached context (current page, selected element) is embedded into the user message
+ * content after a delimiter line: it's the only channel the LLM sees (the streaming
+ * payload carries message content only) and it persists with the session for free.
+ * The chat view splits the content back apart to show chips instead of the raw block.
+ *
+ * The delimiter is a soft convention — a model echoing it would at worst render stray
+ * chips (no security impact; assistant markdown is sanitized separately).
+ *
+ * @license MIT
+ */
+
+export const ATTACHED_CONTEXT_DELIMITER = "---- attached context ----";
+
+export interface ContextChip {
+  kind: "page" | "selection";
+  /** Short chip label, e.g. the page path or `<h1>`. */
+  label: string;
+  /** The context line embedded into the message content. */
+  detail: string;
+}
+
+/** Serialize the composer text plus attached-context chips into one message content. */
+export function buildMessageWithContext(text: string, chips: ContextChip[]): string {
+  if (chips.length === 0) {
+    return text;
+  }
+  const lines = chips.map((c) => c.detail).join("\n");
+  return `${text}\n\n${ATTACHED_CONTEXT_DELIMITER}\n${lines}`;
+}
+
+/** Split a user message back into its typed body and any attached-context lines. */
+export function splitAttachedContext(content: string): { body: string; contextLines: string[] } {
+  const idx = content.indexOf(`\n\n${ATTACHED_CONTEXT_DELIMITER}\n`);
+  if (idx === -1) {
+    return { body: content, contextLines: [] };
+  }
+  const body = content.slice(0, idx);
+  const rest = content.slice(idx + ATTACHED_CONTEXT_DELIMITER.length + 3);
+  return {
+    body,
+    contextLines: rest
+      .split("\n")
+      .map((l) => l.trim())
+      .filter((l) => l.length > 0),
+  };
+}

package/src/panels/ai-chat/chat-markdown.ts

@@ -0,0 +1,38 @@
+/**
+ * Chat-markdown.js — memoized markdown rendering for assistant chat messages.
+ *
+ * Wraps @jxsuite/parser/md-html (sanitized markdown → HTML) with a per-message cache
+ * keyed by message id + content length, so re-renders during streaming only re-parse
+ * the message that actually grew. The HTML goes through unsafeHTML, which is safe here
+ * because md-html sanitizes (raw HTML dropped, javascript: URLs stripped).
+ *
+ * @license MIT
+ */
+
+import { html } from "lit-html";
+import type { TemplateResult } from "lit-html";
+import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
+import { markdownToHtml } from "@jxsuite/parser/md-html";
+
+const cache = new Map<string, { len: number; html: string }>();
+
+/**
+ * Render a message's markdown content, memoized by message id.
+ *
+ * @param {string} id - Stable message id (cache key).
+ * @param {string} content
+ * @returns {TemplateResult}
+ */
+export function renderMarkdown(id: string, content: string): TemplateResult {
+  let entry = cache.get(id);
+  if (!entry || entry.len !== content.length) {
+    entry = { len: content.length, html: markdownToHtml(content) };
+    cache.set(id, entry);
+  }
+  return html`<div class="ai-msg-md">${unsafeHTML(entry.html)}</div>`;
+}
+
+/** Drop all cached renders (call on session switch / new chat). */
+export function clearMarkdownCache() {
+  cache.clear();
+}