@hienlh/ppm 0.23.10 → 0.23.11

package/src/web/lib/design/api-design-settings.ts

@@ -0,0 +1,48 @@
+import { api } from "@/lib/api-client";
+import type { SlashItem } from "@/components/chat/slash-command-picker";
+
+/** The skills one design-capable provider can load, as listed for the `/` picker. */
+export interface DesignProviderSkills {
+  id: string;
+  name: string;
+  runtime: "claude" | "codex";
+  items: SlashItem[];
+  /** False when the provider's list could not be read, so `items` says nothing. */
+  available: boolean;
+}
+
+export interface DesignSettings {
+  instructions: string;
+  maxBytes: number;
+  providers: DesignProviderSkills[];
+}
+
+/**
+ * Settings → Design. `projectName` only widens the skill lists to that project's own
+ * skills; the instructions themselves are global. `fresh` makes the server re-read the
+ * skill lists instead of answering from its caches.
+ */
+export async function getDesignSettings(projectName?: string, opts: { fresh?: boolean } = {}): Promise<DesignSettings> {
+  const query = new URLSearchParams();
+  if (projectName) query.set("project", projectName);
+  if (opts.fresh) query.set("fresh", "1");
+  const qs = query.size > 0 ? `?${query}` : "";
+  const data = await api.get<Partial<DesignSettings> | null>(`/api/settings/design${qs}`);
+  return {
+    instructions: typeof data?.instructions === "string" ? data.instructions : "",
+    maxBytes: typeof data?.maxBytes === "number" ? data.maxBytes : 8 * 1024,
+    providers: Array.isArray(data?.providers)
+      ? data.providers.map((p) => ({ ...p, items: Array.isArray(p.items) ? p.items : [], available: p.available !== false }))
+      : [],
+  };
+}
+
+/** The lists that were actually read, for decisions that must not treat "unknown" as "none". */
+export function readSkillLists(settings: DesignSettings): DesignProviderSkills["items"][] {
+  return settings.providers.filter((p) => p.available).map((p) => p.items);
+}
+
+export async function saveDesignInstructions(instructions: string): Promise<string> {
+  const data = await api.put<{ instructions: string }>("/api/settings/design", { instructions });
+  return data.instructions;
+}

package/src/web/lib/design/api-design-systems.ts

@@ -0,0 +1,49 @@
+import { api, projectUrl } from "@/lib/api-client";
+import type {
+  DesignPlatform, DesignSummary, DesignSystemStaleInfo, DesignSystemSummary,
+} from "../../../shared/design-types";
+
+/**
+ * The declared-apps REST surface (`/api/project/:name/designs/systems`): list, declare, edit,
+ * remove, its stale check, and getting-or-creating its showcase.
+ */
+
+const base = (projectName: string) => `${projectUrl(projectName)}/designs/systems`;
+const one = (projectName: string, id: string) => `${base(projectName)}/${encodeURIComponent(id)}`;
+
+export function listDesignSystems(projectName: string): Promise<DesignSystemSummary[]> {
+  return api.get<DesignSystemSummary[]>(base(projectName));
+}
+
+export function getDesignSystem(projectName: string, id: string): Promise<DesignSystemSummary> {
+  return api.get<DesignSystemSummary>(one(projectName, id));
+}
+
+export interface DesignSystemInput {
+  id?: string;
+  label: string;
+  root: string;
+  platform: DesignPlatform;
+}
+
+export function createDesignSystem(projectName: string, input: DesignSystemInput): Promise<DesignSystemSummary> {
+  return api.post<DesignSystemSummary>(base(projectName), input);
+}
+
+export function updateDesignSystem(
+  projectName: string, id: string, input: Partial<DesignSystemInput>,
+): Promise<DesignSystemSummary> {
+  return api.patch<DesignSystemSummary>(one(projectName, id), input);
+}
+
+export function deleteDesignSystem(projectName: string, id: string, deleteFiles: boolean): Promise<void> {
+  return api.del(`${one(projectName, id)}?confirm=${encodeURIComponent(id)}${deleteFiles ? "&deleteFiles=1" : ""}`);
+}
+
+export function designSystemStaleness(projectName: string, id: string): Promise<DesignSystemStaleInfo> {
+  return api.get<DesignSystemStaleInfo>(`${one(projectName, id)}/stale`);
+}
+
+export function ensureShowcaseDesign(projectName: string, id: string): Promise<DesignSummary> {
+  return api.post<DesignSummary>(`${one(projectName, id)}/showcase`, {});
+}

package/src/web/lib/design/api-designs.ts

@@ -1,7 +1,5 @@
 import { api, projectUrl } from "@/lib/api-client";
-import type {
-  DesignKind, DesignSnapshotInfo, DesignSummary, DesignSystemStatus,
-} from "../../../shared/design-types";
+import type { DesignKind, DesignSnapshotInfo, DesignSummary, DesignSystemSummary } from "../../../shared/design-types";
 import type { RestoreResult } from "../../../services/design/design-restore.service";
 
 /**
@@ -12,7 +10,8 @@ import type { RestoreResult } from "../../../services/design/design-restore.serv
 
 export interface DesignList {
   designs: DesignSummary[];
-  system: DesignSystemStatus;
+  /** Every app of the project, `default` first; see `src/web/lib/design/api-design-systems.ts`. */
+  systems: DesignSystemSummary[];
 }
 
 export interface DesignPreviewCapability {
@@ -33,12 +32,12 @@ export interface DesignProvider {
 const base = (projectName: string) => `${projectUrl(projectName)}/designs`;
 const one = (projectName: string, slug: string) => `${base(projectName)}/${encodeURIComponent(slug)}`;
 
-/** Normalised at the boundary: every caller renders `designs` straight into a list. */
+/** Normalised at the boundary: every caller renders `designs`/`systems` straight into a list. */
 export async function listDesigns(projectName: string): Promise<DesignList> {
   const data = await api.get<Partial<DesignList> | null>(base(projectName));
   return {
     designs: Array.isArray(data?.designs) ? data.designs : [],
-    system: { designMd: !!data?.system?.designMd, tokensCss: !!data?.system?.tokensCss },
+    systems: Array.isArray(data?.systems) ? data.systems : [],
   };
 }
 
@@ -46,7 +45,9 @@ export function getDesign(projectName: string, slug: string): Promise<DesignSumm
   return api.get<DesignSummary>(one(projectName, slug));
 }
 
-export function createDesign(projectName: string, input: { title: string; kind: DesignKind }): Promise<DesignSummary> {
+export function createDesign(
+  projectName: string, input: { title: string; kind: DesignKind; system?: string },
+): Promise<DesignSummary> {
   return api.post<DesignSummary>(base(projectName), input);
 }
 
@@ -67,10 +68,13 @@ export function restoreDesignSnapshot(projectName: string, slug: string, id: str
   return api.post<RestoreResult>(`${one(projectName, slug)}/history/${encodeURIComponent(id)}/restore`);
 }
 
-/** Mint a canvas token, or refresh `token` (which may hand back a rotated successor). */
-export function requestCanvasPreview(projectName: string, slug: string, token?: string): Promise<DesignPreviewCapability> {
+/**
+ * Mint a canvas token, or refresh `token` (which may hand back a rotated successor). The
+ * URL comes back for `entry`, one of the design's variants, or the entry page when omitted.
+ */
+export function requestCanvasPreview(projectName: string, slug: string, token?: string, entry?: string): Promise<DesignPreviewCapability> {
   return api.post<DesignPreviewCapability>("/api/design-preview", {
-    projectName, slug, purpose: "canvas", ...(token ? { token } : {}),
+    projectName, slug, purpose: "canvas", ...(token ? { token } : {}), ...(entry ? { entry } : {}),
   });
 }
 

package/src/web/lib/design/design-change-filter.ts

@@ -25,3 +25,15 @@ export function classifyDesignChange(path: string, slug: string): DesignChange {
   if (rest === "design.json") return "manifest";
   return "reload";
 }
+
+/**
+ * Whether a change may add or remove a variant: an HTML page at the top of the design folder
+ * other than the entry. The server lists only variants whose file exists, so an agent writing
+ * `design.json` before `variant-2.html` leaves the switcher one page short until the page
+ * itself lands — which is when the list has to be fetched again.
+ */
+export function mayChangeVariants(path: string, slug: string, entry: string): boolean {
+  if (classifyDesignChange(path, slug) !== "reload") return false;
+  const rest = path.replaceAll("\\", "/").replace(/^(\.\/|\/)+/, "").slice(`designs/${slug}/`.length);
+  return !rest.includes("/") && /\.html?$/i.test(rest) && rest.toLowerCase() !== entry.toLowerCase();
+}

package/src/web/lib/design/design-export-client.ts

@@ -91,9 +91,11 @@ export function saveBlobAsFile(blob: Blob, filename: string, doc: Document = doc
 
 export type DesignViewPurpose = "print" | "standalone";
 
-/** A 10-minute, non-refreshable token for the print view or the standalone tab. */
-export async function mintDesignView(projectName: string, slug: string, purpose: DesignViewPurpose): Promise<{ url: string; expiresAt: number }> {
-  const cap = await api.post<{ url: string; expiresAt: number }>("/api/design-preview", { projectName, slug, purpose });
+/** A 10-minute, non-refreshable token for the print view or the standalone tab, of page `entry`. */
+export async function mintDesignView(projectName: string, slug: string, purpose: DesignViewPurpose, entry?: string): Promise<{ url: string; expiresAt: number }> {
+  const cap = await api.post<{ url: string; expiresAt: number }>("/api/design-preview", {
+    projectName, slug, purpose, ...(entry ? { entry } : {}),
+  });
   if (typeof cap?.url !== "string" || !cap.url.startsWith("/api/design-preview/content/")) {
     throw new Error("The server returned no preview address");
   }

package/src/web/lib/design/design-handoff-prompt.ts

@@ -16,10 +16,14 @@ export interface HandoffInput {
   title: string;
   kind: DesignKind;
   entry: string;
+  /** The design's app; defaults to the implicit "default" system at the project root. */
+  system?: string;
 }
 
 const SLUG_RE = /^[a-z0-9][a-z0-9-]{0,62}$/;
 const ENTRY_RE = /^[A-Za-z0-9._/-]{1,200}\.html?$/;
+const SYSTEM_RE = /^[a-z0-9][a-z0-9-]{0,62}$/;
+const DEFAULT_SYSTEM_ID = "default";
 
 /** One line, no markup-ish characters, at most 80 characters: the title is agent-written. */
 function safeTitle(title: string): string {
@@ -31,6 +35,8 @@ export function buildHandoffPrompt(input: HandoffInput): string {
   if (!SLUG_RE.test(input.slug)) throw new Error("Invalid design slug");
   const entry = ENTRY_RE.test(input.entry) && !input.entry.split("/").some((s) => s === ".." || s.startsWith("."))
     ? input.entry : "index.html";
+  const systemId = input.system && SYSTEM_RE.test(input.system) ? input.system : DEFAULT_SYSTEM_ID;
+  const sysDir = systemId === DEFAULT_SYSTEM_ID ? "designs/" : `designs/systems/${systemId}/`;
   const dir = `designs/${input.slug}/`;
   const what = input.kind === "slides" ? "a slide deck" : "a page";
   return [
@@ -38,8 +44,9 @@ export function buildHandoffPrompt(input: HandoffInput): string {
     "",
     "The design is a static reference: plain HTML and CSS, possibly with CDN scripts, made to be looked at, not shipped.",
     "",
-    "1. Read `designs/DESIGN.md` and `designs/tokens.css` (when they exist) for the design system, then the design's own files.",
+    `1. Read \`${sysDir}DESIGN.md\` and \`${sysDir}tokens.css\` (when they exist) for the design system, then the design's own files.`,
     "2. Build it in the project's actual stack, components and styling conventions. Map the design tokens onto the project's theme instead of copying raw values, and do not copy CDN usage; use the project's own dependencies.",
+    `   If the page links \`../systems/${systemId}/kit/app.css\`, its class names and markup are the app's own — they map 1:1 to source, so read the component files \`${sysDir}DESIGN.md\`'s map lists for the screens it touches and edit those, rather than re-deriving the styling from what the design looks like.`,
     "3. Before changing anything, list the files you will create or change and wait for my go-ahead.",
     "4. Leave `designs/` untouched.",
     "",

package/src/web/lib/design/design-system-banner-state.ts

@@ -0,0 +1,42 @@
+import type { DesignSystemStaleInfo, DesignSystemSummary } from "../../../shared/design-types";
+
+/**
+ * Whether a design tab shows the "refresh the design system" banner.
+ *
+ * Kept pure (no React, no storage) so the decision is testable. Setting a system up is no
+ * longer offered here: a design's own first turn does that itself (`design-instructions.ts`),
+ * so the only thing left for this banner to ever offer is re-running it once it is stale.
+ */
+
+export type DesignSystemBannerKind = "refresh";
+
+export interface DesignSystemBannerInput {
+  system: DesignSystemSummary | null;
+  stale: DesignSystemStaleInfo | null;
+  /** Kinds the user dismissed for this app on this device. */
+  dismissed: readonly DesignSystemBannerKind[];
+  /** A turn is running in this tab: a refresh in progress must not be offered again. */
+  isStreaming: boolean;
+}
+
+export function designSystemBannerKind(input: DesignSystemBannerInput): DesignSystemBannerKind | null {
+  const { system, stale, dismissed, isStreaming } = input;
+  if (!system || isStreaming) return null;
+  const kind: DesignSystemBannerKind | null = stale && !stale.unknown && stale.stale ? "refresh" : null;
+  return kind && !dismissed.includes(kind) ? kind : null;
+}
+
+/** localStorage key of the dismissals for one app of one project. */
+export function designSystemBannerKey(projectName: string, systemId: string): string {
+  return `ppm.design.systemBanner.${projectName}/${systemId}`;
+}
+
+export function parseDismissed(raw: string | null): DesignSystemBannerKind[] {
+  if (!raw) return [];
+  try {
+    const value: unknown = JSON.parse(raw);
+    return Array.isArray(value) ? value.filter((k): k is DesignSystemBannerKind => k === "refresh") : [];
+  } catch {
+    return [];
+  }
+}

package/src/web/lib/design/design-system-status-label.ts

@@ -0,0 +1,10 @@
+import type { DesignSystemStaleInfo, DesignSystemSummary } from "../../../shared/design-types";
+
+/** "not set up" / "ready" / "may be outdated (N UI files changed)", shared by the sidebar's
+ * "Design systems" group and Settings → Design's "Apps in this project" list. */
+export function designSystemStatusLabel(system: DesignSystemSummary, stale: DesignSystemStaleInfo | null): string {
+  if (!system.hasDesignMd) return "Not set up";
+  if (stale && !stale.unknown && stale.stale) return `May be outdated (${stale.changedFiles ?? "?"} UI files changed)`;
+  if (system.builtFrom) return `Built ${new Date(system.builtFrom.at).toLocaleDateString()}`;
+  return "Ready";
+}

package/src/web/lib/design/design-view-prefs.ts

@@ -3,7 +3,8 @@ import { isDesignLayoutOverride, type DesignLayoutOverride } from "./design-layo
 
 /**
  * How this device likes its design tabs laid out: the layout picked from the toolbar's
- * menu, the chat pane's share of the split and the device frame last chosen per design.
+ * menu, the chat pane's share of the split, and the device frame and variant last chosen per
+ * design.
  *
  * Device-local on purpose (plain localStorage, never the server prefs): a desktop that
  * likes a wide chat and a Tablet frame says nothing about what a phone should show.
@@ -23,12 +24,25 @@ export interface DesignViewPrefs {
   chatPercent: number;
   /** `<project>/<slug>` → frame, oldest first. */
   frames: Record<string, DeviceFrameId>;
+  /** `<project>/<slug>` → the variant file on screen, oldest first. Checked against the list on use. */
+  variants: Record<string, string>;
 }
 
 export function defaultDesignViewPrefs(): DesignViewPrefs {
-  return { layout: "auto", chatPercent: DEFAULT_CHAT_PERCENT, frames: {} };
+  return { layout: "auto", chatPercent: DEFAULT_CHAT_PERCENT, frames: {}, variants: {} };
 }
 
+/** Newest-last entries of a stored map, the ones failing `keep` dropped, at most MAX_REMEMBERED_FRAMES. */
+function rememberedMap<T>(value: unknown, keep: (v: unknown) => v is T): Record<string, T> {
+  const out: Record<string, T> = {};
+  if (!value || typeof value !== "object" || Array.isArray(value)) return out;
+  const entries = Object.entries(value as Record<string, unknown>).filter((e): e is [string, T] => e[0].length <= 300 && keep(e[1]));
+  for (const [key, v] of entries.slice(-MAX_REMEMBERED_FRAMES)) out[key] = v;
+  return out;
+}
+
+const isStoredVariant = (v: unknown): v is string => typeof v === "string" && v.length <= 120;
+
 export function clampChatPercent(value: unknown): number {
   if (typeof value !== "number" || !Number.isFinite(value)) return DEFAULT_CHAT_PERCENT;
   return Math.min(MAX_CHAT_PERCENT, Math.max(MIN_CHAT_PERCENT, Math.round(value)));
@@ -44,14 +58,12 @@ export function parseDesignViewPrefs(raw: string | null): DesignViewPrefs {
   }
   if (!data || typeof data !== "object" || Array.isArray(data)) return defaultDesignViewPrefs();
   const obj = data as Record<string, unknown>;
-  const frames: Record<string, DeviceFrameId> = {};
-  if (obj.frames && typeof obj.frames === "object" && !Array.isArray(obj.frames)) {
-    const entries = Object.entries(obj.frames as Record<string, unknown>)
-      .filter((e): e is [string, DeviceFrameId] => e[0].length <= 300 && isDeviceFrameId(e[1]));
-    for (const [key, frame] of entries.slice(-MAX_REMEMBERED_FRAMES)) frames[key] = frame;
-  }
   const layout = isDesignLayoutOverride(obj.layout) ? obj.layout : "auto";
-  return { layout, chatPercent: clampChatPercent(obj.chatPercent), frames };
+  return {
+    layout, chatPercent: clampChatPercent(obj.chatPercent),
+    frames: rememberedMap(obj.frames, isDeviceFrameId),
+    variants: rememberedMap(obj.variants, isStoredVariant),
+  };
 }
 
 export function designFrameKey(projectName: string, slug: string): string {
@@ -65,6 +77,18 @@ export function withFrame(prefs: DesignViewPrefs, key: string, frame: DeviceFram
   return { ...prefs, frames: Object.fromEntries(entries.slice(-MAX_REMEMBERED_FRAMES)) };
 }
 
+/** Remember the variant on screen for a design, newest last, trimming the oldest. */
+export function withVariant(prefs: DesignViewPrefs, key: string, file: string): DesignViewPrefs {
+  const entries = Object.entries(prefs.variants).filter(([k]) => k !== key);
+  entries.push([key, file]);
+  return { ...prefs, variants: Object.fromEntries(entries.slice(-MAX_REMEMBERED_FRAMES)) };
+}
+
+export function withoutVariant(prefs: DesignViewPrefs, key: string): DesignViewPrefs {
+  if (!(key in prefs.variants)) return prefs;
+  return { ...prefs, variants: Object.fromEntries(Object.entries(prefs.variants).filter(([k]) => k !== key)) };
+}
+
 export function withChatPercent(prefs: DesignViewPrefs, percent: number): DesignViewPrefs {
   return { ...prefs, chatPercent: clampChatPercent(percent) };
 }

package/src/web/lib/design/last-used-design-system.ts

@@ -0,0 +1,22 @@
+/**
+ * Which app the New Design dialog preselects, remembered per project on this device only
+ * (like `lspEnabled`) — the choice is a UI convenience, not something worth a server round
+ * trip or syncing across devices.
+ */
+const KEY_PREFIX = "ppm-design-last-system:";
+
+export function getLastUsedDesignSystem(projectName: string): string | null {
+  try {
+    return localStorage.getItem(KEY_PREFIX + projectName);
+  } catch {
+    return null;
+  }
+}
+
+export function setLastUsedDesignSystem(projectName: string, systemId: string): void {
+  try {
+    localStorage.setItem(KEY_PREFIX + projectName, systemId);
+  } catch {
+    // Storage may be unavailable (private mode, quota); the picker just falls back to "default".
+  }
+}

package/src/web/lib/design/run-design-system-setup.ts

@@ -0,0 +1,52 @@
+import { toast } from "sonner";
+import { buildDesignSystemInitPrompt } from "../../../shared/design-system-init-prompt";
+import { ensureShowcaseDesign, getDesignSystem } from "./api-design-systems";
+import { openDesignTab } from "./open-design-tab";
+import { autoSendToDesignChat, deliverToDesignChat } from "./deliver-to-design-chat";
+
+/** How long a just-opened tab's composer may still be mounting before its first render lands. */
+const MOUNT_RETRY_MS = 2000;
+const MOUNT_RETRY_INTERVAL_MS = 50;
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+/**
+ * Auto-sends only once a listener actually acks the event (the composer is mounted): a tab
+ * just opened by this same call has not rendered yet, and `autoSendToDesignChat` answers
+ * "none" — not "chip" — for an address nothing is listening on yet, which would otherwise
+ * drop the brief silently rather than degrade to a chip.
+ */
+async function autoSendOnceMounted(tabId: string, text: string, label: string): Promise<"sent" | "chip"> {
+  const deadline = Date.now() + MOUNT_RETRY_MS;
+  for (;;) {
+    const outcome = autoSendToDesignChat(tabId, text, label);
+    if (outcome !== "none") return outcome;
+    if (Date.now() >= deadline) break;
+    await sleep(MOUNT_RETRY_INTERVAL_MS);
+  }
+  // Still nothing listening after the deadline: fall back to a prefill the user sends
+  // themselves, the same degrade `deliverToDesignChat` already uses elsewhere.
+  deliverToDesignChat(tabId, text, label);
+  return "chip";
+}
+
+/**
+ * "Set up design system", from the canvas More menu or the New Design dialog's "Set up
+ * first" step: get-or-create the app's showcase design, open its tab, and auto-send the
+ * setup brief there — auto-sent because the user just clicked a button asking for exactly
+ * this, not typed it themselves. A composer that is mid-turn (or still mounting) gets it as
+ * a chip instead, never interrupting a running send or racing the new tab's first render.
+ */
+export async function runDesignSystemSetup(projectName: string, systemId: string): Promise<void> {
+  const [showcase, system] = await Promise.all([
+    ensureShowcaseDesign(projectName, systemId),
+    getDesignSystem(projectName, systemId),
+  ]);
+  const tabId = openDesignTab({ projectName, slug: showcase.slug, title: showcase.title });
+  const prompt = buildDesignSystemInitPrompt(system);
+  if ((await autoSendOnceMounted(tabId, prompt, "Set up design system")) === "chip") {
+    toast.info("Setup brief added to the chat", { description: "Review and send it there." });
+  }
+}

package/src/web/lib/send-to-chat.ts

@@ -94,9 +94,14 @@ export function resolveSelectedChatTabId(projectName?: string | null): string |
  *
  * `newTab` skips the first two: the text always starts a fresh, plain chat as an editable
  * draft. For a brief that must not land in whatever conversation (or design session) the
- * user happened to select last.
+ * user happened to select last. Only a new tab may also carry an image (a data URL, e.g. a
+ * canvas screenshot): the composer of a *live* tab has its own paste/drop path for that, and
+ * bolting a second one onto the cross-tab event would duplicate it for no live caller.
  */
-export function sendToChat(opts: { text: string; label?: string; projectName?: string | null; newTab?: boolean }): void {
+export function sendToChat(opts: {
+  text: string; label?: string; projectName?: string | null; newTab?: boolean;
+  imageDataUrl?: string; imageName?: string;
+}): void {
   const { text, label, projectName } = opts;
   if (!text.trim()) return;
 
@@ -126,7 +131,11 @@ export function sendToChat(opts: { text: string; label?: string; projectName?: s
     type: "chat",
     title: "Chat",
     projectId: null,
-    metadata: { ...(projectName ? { projectName } : {}), pendingMessage: text },
+    metadata: {
+      ...(projectName ? { projectName } : {}),
+      pendingMessage: text,
+      ...(opts.imageDataUrl ? { pendingAttachmentDataUrl: opts.imageDataUrl, pendingAttachmentName: opts.imageName } : {}),
+    },
     closable: true,
   });
 }

package/src/web/lib/slash-trigger.ts

@@ -0,0 +1,27 @@
+/**
+ * The `/` trigger of a slash picker, shared by every text box that offers one (the chat
+ * composer, the design-instructions editor), so they agree on what opens the picker and
+ * what a pick replaces.
+ */
+
+/** A `/` opens a query only at the start of the text or after whitespace. */
+const QUERY_AT_END_RE = /(?:^|\s)\/(\S*)$/;
+
+/** The query typed after a `/` that ends `textBefore` (the text left of the caret), or null. */
+export function slashQueryBefore(textBefore: string): string | null {
+  const match = textBefore.match(QUERY_AT_END_RE);
+  return match ? (match[1] ?? "") : null;
+}
+
+/**
+ * `textBefore` with its trailing `/query` replaced by `token` and a space, keeping the
+ * whitespace that preceded the `/`. Unchanged when there is no such query.
+ */
+export function replaceSlashQuery(textBefore: string, token: string): string {
+  return textBefore.replace(/(?:^|\s)\/\S*$/, (match) => `${match.startsWith("/") ? "" : match[0]}${token} `);
+}
+
+/** `textBefore` with its trailing `/query` removed, keeping the whitespace before it. */
+export function stripSlashQuery(textBefore: string): string {
+  return textBefore.replace(/(?:^|\s)\/\S*$/, (match) => (match.startsWith("/") ? "" : match[0]!));
+}

package/vite.config.ts

@@ -1,4 +1,5 @@
-import { defineConfig } from "vite";
+import { realpathSync } from "node:fs";
+import { defineConfig, searchForWorkspaceRoot } from "vite";
 import react from "@vitejs/plugin-react";
 import tailwindcss from "@tailwindcss/vite";
 import { VitePWA } from "vite-plugin-pwa";
@@ -104,5 +105,15 @@ export default defineConfig({
         ws: true,
       },
     },
+    fs: {
+      // A git worktree's `node_modules` is often a junction back to the main checkout's (to
+      // avoid a second install), so its *real* path sits outside the worktree root that Vite's
+      // default allow-list computes. A deep import resolved through the junction — a font, a
+      // lazy chunk such as the design canvas's screenshot library — then 403s as if it were
+      // missing. Trusting node_modules' own resolved target fixes that without widening the
+      // allow-list to anything else on disk; where node_modules is a real directory (no
+      // junction) this just repeats an already-allowed path.
+      allow: [searchForWorkspaceRoot(process.cwd()), realpathSync(resolve(process.cwd(), "node_modules"))],
+    },
   },
 });

package/dist/web/assets/_basePickBy-Bw69zEQE.js

@@ -1 +0,0 @@
-import{A as e,B as t,C as n,E as r,H as i,M as a,U as o,V as s,k as c,p as l,w as u,z as d}from"./isArrayLikeObject-Brn5jPfX.js";import{A as f,C as p,D as m,M as h,N as g,S as _,T as v,f as y,h as b,u as x,w as S}from"./_baseUniq-DAyolJ43.js";var C=/\s/;function w(e){for(var t=e.length;t--&&C.test(e.charAt(t)););return t}var ee=/^\s+/;function T(e){return e&&e.slice(0,w(e)+1).replace(ee,``)}var E=NaN,D=/^[-+]0x[0-9a-f]+$/i,O=/^0b[01]+$/i,k=/^0o[0-7]+$/i,A=parseInt;function j(e){if(typeof e==`number`)return e;if(g(e))return E;if(t(e)){var n=typeof e.valueOf==`function`?e.valueOf():e;e=t(n)?n+``:n}if(typeof e!=`string`)return e===0?e:+e;e=T(e);var r=O.test(e);return r||k.test(e)?A(e.slice(2),r?2:8):D.test(e)?E:+e}var M=1/0,N=17976931348623157e292;function P(e){return e?(e=j(e),e===M||e===-M?(e<0?-1:1)*N:e===e?e:0):e===0?e:0}function F(e){var t=P(e),n=t%1;return t===t?n?t-n:t:0}function I(e){return e!=null&&e.length?_(e,1):[]}var L=Object.prototype,R=L.hasOwnProperty,z=r(function(t,r){t=Object(t);var i=-1,a=r.length,o=a>2?r[2]:void 0;for(o&&n(r[0],r[1],o)&&(a=1);++i<a;)for(var s=r[i],c=l(s),u=-1,d=c.length;++u<d;){var f=c[u],p=t[f];(p===void 0||e(p,L[f])&&!R.call(t,f))&&(t[f]=s[f])}return t});function B(e){var t=e==null?0:e.length;return t?e[t-1]:void 0}function V(e){return function(t,n,r){var i=Object(t);if(!u(t)){var a=y(n,3);t=m(t),n=function(e){return a(i[e],e,i)}}var o=e(t,n,r);return o>-1?i[a?t[o]:o]:void 0}}var H=Math.max;function U(e,t,n){var r=e==null?0:e.length;if(!r)return-1;var i=n==null?0:F(n);return i<0&&(i=H(r+i,0)),f(e,y(t,3),i)}var W=V(U);function G(e,t){var n=-1,r=u(e)?Array(e.length):[];return x(e,function(e,i,a){r[++n]=t(e,i,a)}),r}function K(e,t){return(s(e)?h:G)(e,y(t,3))}var q=Object.prototype.hasOwnProperty;function J(e,t){return e!=null&&q.call(e,t)}function Y(e,t){return e!=null&&b(e,t,J)}var X=`[object String]`;function Z(e){return typeof e==`string`||!s(e)&&i(e)&&o(e)==X}function Q(e,t){return e<t}function $(e,t,n){for(var r=-1,i=e.length;++r<i;){var a=e[r],o=t(a);if(o!=null&&(s===void 0?o===o&&!g(o):n(o,s)))var s=o,c=a}return c}function te(e){return e&&e.length?$(e,d,Q):void 0}function ne(e,n,r,i){if(!t(e))return e;n=v(n,e);for(var o=-1,s=n.length,l=s-1,u=e;u!=null&&++o<s;){var d=S(n[o]),f=r;if(d===`__proto__`||d===`constructor`||d===`prototype`)return e;if(o!=l){var p=u[d];f=i?i(p,d,u):void 0,f===void 0&&(f=t(p)?p:a(n[o+1])?[]:{})}c(u,d,f),u=u[d]}return e}function re(e,t,n){for(var r=-1,i=t.length,a={};++r<i;){var o=t[r],s=p(e,o);n(s,o)&&ne(a,v(o,e),s)}return a}export{Z as a,G as c,z as d,I as f,Q as i,W as l,P as m,te as n,Y as o,F as p,$ as r,K as s,re as t,B as u};

package/dist/web/assets/_baseUniq-DAyolJ43.js

@@ -1 +0,0 @@
-import{A as e,B as t,F as n,H as r,M as i,O as a,T as o,U as s,V as c,W as l,_ as u,a as d,b as f,c as p,d as m,g as h,h as g,i as _,k as v,l as y,n as ee,o as b,p as x,r as te,s as ne,u as re,v as ie,w as S,y as C,z as w}from"./isArrayLikeObject-Brn5jPfX.js";import{i as ae,n as T,r as E}from"./isEmpty-BDA3VnUk.js";var oe=`[object Symbol]`;function D(e){return typeof e==`symbol`||r(e)&&s(e)==oe}function O(e,t){for(var n=-1,r=e==null?0:e.length,i=Array(r);++n<r;)i[n]=t(e[n],n,e);return i}var se=1/0,ce=l?l.prototype:void 0,le=ce?ce.toString:void 0;function ue(e){if(typeof e==`string`)return e;if(c(e))return O(e,ue)+``;if(D(e))return le?le.call(e):``;var t=e+``;return t==`0`&&1/e==-se?`-0`:t}function de(){}function fe(e,t){for(var n=-1,r=e==null?0:e.length;++n<r&&t(e[n],n,e)!==!1;);return e}function pe(e,t,n,r){for(var i=e.length,a=n+(r?1:-1);r?a--:++a<i;)if(t(e[a],a,e))return a;return-1}function me(e){return e!==e}function he(e,t,n){for(var r=n-1,i=e.length;++r<i;)if(e[r]===t)return r;return-1}function ge(e,t,n){return t===t?he(e,t,n):pe(e,me,n)}function _e(e,t){return!!(e!=null&&e.length)&&ge(e,t,0)>-1}function k(e){return S(e)?g(e):ae(e)}var ve=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,ye=/^\w*$/;function A(e,t){if(c(e))return!1;var n=typeof e;return n==`number`||n==`symbol`||n==`boolean`||e==null||D(e)?!0:ye.test(e)||!ve.test(e)||t!=null&&e in Object(t)}var be=500;function xe(e){var t=re(e,function(e){return n.size===be&&n.clear(),e}),n=t.cache;return t}var Se=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,Ce=/\\(\\)?/g,we=xe(function(e){var t=[];return e.charCodeAt(0)===46&&t.push(``),e.replace(Se,function(e,n,r,i){t.push(r?i.replace(Ce,`$1`):n||e)}),t});function j(e){return e==null?``:ue(e)}function M(e,t){return c(e)?e:A(e,t)?[e]:we(j(e))}var Te=1/0;function N(e){if(typeof e==`string`||D(e))return e;var t=e+``;return t==`0`&&1/e==-Te?`-0`:t}function P(e,t){t=M(t,e);for(var n=0,r=t.length;e!=null&&n<r;)e=e[N(t[n++])];return n&&n==r?e:void 0}function Ee(e,t,n){var r=e==null?void 0:P(e,t);return r===void 0?n:r}function F(e,t){for(var n=-1,r=t.length,i=e.length;++n<r;)e[i+n]=t[n];return e}var I=l?l.isConcatSpreadable:void 0;function De(e){return c(e)||f(e)||!!(I&&e&&e[I])}function L(e,t,n,r,i){var a=-1,o=e.length;for(n||=De,i||=[];++a<o;){var s=e[a];t>0&&n(s)?t>1?L(s,t-1,n,r,i):F(i,s):r||(i[i.length]=s)}return i}function Oe(e,t,n,r){var i=-1,a=e==null?0:e.length;for(r&&a&&(n=e[++i]);++i<a;)n=t(n,e[i],i,e);return n}function ke(e,t){return e&&a(t,k(t),e)}function Ae(e,t){return e&&a(t,x(t),e)}function R(e,t){for(var n=-1,r=e==null?0:e.length,i=0,a=[];++n<r;){var o=e[n];t(o,n,e)&&(a[i++]=o)}return a}function z(){return[]}var je=Object.prototype.propertyIsEnumerable,B=Object.getOwnPropertySymbols,V=B?function(e){return e==null?[]:(e=Object(e),R(B(e),function(t){return je.call(e,t)}))}:z;function Me(e,t){return a(e,V(e),t)}var Ne=Object.getOwnPropertySymbols?function(e){for(var t=[];e;)F(t,V(e)),e=y(e);return t}:z;function Pe(e,t){return a(e,Ne(e),t)}function Fe(e,t,n){var r=t(e);return c(e)?r:F(r,n(e))}function H(e){return Fe(e,k,V)}function Ie(e){return Fe(e,x,Ne)}var Le=Object.prototype.hasOwnProperty;function Re(e){var t=e.length,n=new e.constructor(t);return t&&typeof e[0]==`string`&&Le.call(e,`index`)&&(n.index=e.index,n.input=e.input),n}function ze(e,t){var n=t?d(e.buffer):e.buffer;return new e.constructor(n,e.byteOffset,e.byteLength)}var Be=/\w*$/;function Ve(e){var t=new e.constructor(e.source,Be.exec(e));return t.lastIndex=e.lastIndex,t}var He=l?l.prototype:void 0,Ue=He?He.valueOf:void 0;function We(e){return Ue?Object(Ue.call(e)):{}}var Ge=`[object Boolean]`,Ke=`[object Date]`,qe=`[object Map]`,Je=`[object Number]`,Ye=`[object RegExp]`,Xe=`[object Set]`,Ze=`[object String]`,Qe=`[object Symbol]`,$e=`[object ArrayBuffer]`,et=`[object DataView]`,tt=`[object Float32Array]`,nt=`[object Float64Array]`,rt=`[object Int8Array]`,it=`[object Int16Array]`,at=`[object Int32Array]`,ot=`[object Uint8Array]`,st=`[object Uint8ClampedArray]`,ct=`[object Uint16Array]`,lt=`[object Uint32Array]`;function ut(e,t,n){var r=e.constructor;switch(t){case $e:return d(e);case Ge:case Ke:return new r(+e);case et:return ze(e,n);case tt:case nt:case rt:case it:case at:case ot:case st:case ct:case lt:return _(e,n);case qe:return new r;case Je:case Ze:return new r(e);case Ye:return Ve(e);case Xe:return new r;case Qe:return We(e)}}var dt=`[object Map]`;function ft(e){return r(e)&&T(e)==dt}var pt=u&&u.isMap,mt=pt?ie(pt):ft,ht=`[object Set]`;function gt(e){return r(e)&&T(e)==ht}var _t=u&&u.isSet,vt=_t?ie(_t):gt,yt=1,bt=2,xt=4,St=`[object Arguments]`,Ct=`[object Array]`,wt=`[object Boolean]`,Tt=`[object Date]`,Et=`[object Error]`,Dt=`[object Function]`,Ot=`[object GeneratorFunction]`,kt=`[object Map]`,At=`[object Number]`,jt=`[object Object]`,Mt=`[object RegExp]`,Nt=`[object Set]`,Pt=`[object String]`,Ft=`[object Symbol]`,It=`[object WeakMap]`,Lt=`[object ArrayBuffer]`,Rt=`[object DataView]`,zt=`[object Float32Array]`,Bt=`[object Float64Array]`,Vt=`[object Int8Array]`,Ht=`[object Int16Array]`,Ut=`[object Int32Array]`,Wt=`[object Uint8Array]`,Gt=`[object Uint8ClampedArray]`,Kt=`[object Uint16Array]`,qt=`[object Uint32Array]`,U={};U[St]=U[Ct]=U[Lt]=U[Rt]=U[wt]=U[Tt]=U[zt]=U[Bt]=U[Vt]=U[Ht]=U[Ut]=U[kt]=U[At]=U[jt]=U[Mt]=U[Nt]=U[Pt]=U[Ft]=U[Wt]=U[Gt]=U[Kt]=U[qt]=!0,U[Et]=U[Dt]=U[It]=!1;function W(e,r,i,a,o,s){var l,u=r&yt,d=r&bt,f=r&xt;if(i&&(l=o?i(e,a,o,s):i(e)),l!==void 0)return l;if(!t(e))return e;var m=c(e);if(m){if(l=Re(e),!u)return n(e,l)}else{var h=T(e),g=h==Dt||h==Ot;if(C(e))return ne(e,u);if(h==jt||h==St||g&&!o){if(l=d||g?{}:te(e),!u)return d?Pe(e,Ae(l,e)):Me(e,ke(l,e))}else{if(!U[h])return o?e:{};l=ut(e,h,u)}}s||=new p;var _=s.get(e);if(_)return _;s.set(e,l),vt(e)?e.forEach(function(t){l.add(W(t,r,i,t,e,s))}):mt(e)&&e.forEach(function(t,n){l.set(n,W(t,r,i,n,e,s))});var y=m?void 0:(f?d?Ie:H:d?x:k)(e);return fe(y||e,function(t,n){y&&(n=t,t=e[n]),v(l,n,W(t,r,i,n,e,s))}),l}var Jt=`__lodash_hash_undefined__`;function Yt(e){return this.__data__.set(e,Jt),this}function Xt(e){return this.__data__.has(e)}function G(e){var t=-1,n=e==null?0:e.length;for(this.__data__=new m;++t<n;)this.add(e[t])}G.prototype.add=G.prototype.push=Yt,G.prototype.has=Xt;function Zt(e,t){for(var n=-1,r=e==null?0:e.length;++n<r;)if(t(e[n],n,e))return!0;return!1}function K(e,t){return e.has(t)}var Qt=1,$t=2;function en(e,t,n,r,i,a){var o=n&Qt,s=e.length,c=t.length;if(s!=c&&!(o&&c>s))return!1;var l=a.get(e),u=a.get(t);if(l&&u)return l==t&&u==e;var d=-1,f=!0,p=n&$t?new G:void 0;for(a.set(e,t),a.set(t,e);++d<s;){var m=e[d],h=t[d];if(r)var g=o?r(h,m,d,t,e,a):r(m,h,d,e,t,a);if(g!==void 0){if(g)continue;f=!1;break}if(p){if(!Zt(t,function(e,t){if(!K(p,t)&&(m===e||i(m,e,n,r,a)))return p.push(t)})){f=!1;break}}else if(!(m===h||i(m,h,n,r,a))){f=!1;break}}return a.delete(e),a.delete(t),f}function tn(e){var t=-1,n=Array(e.size);return e.forEach(function(e,r){n[++t]=[r,e]}),n}function q(e){var t=-1,n=Array(e.size);return e.forEach(function(e){n[++t]=e}),n}var nn=1,rn=2,an=`[object Boolean]`,on=`[object Date]`,sn=`[object Error]`,cn=`[object Map]`,ln=`[object Number]`,un=`[object RegExp]`,dn=`[object Set]`,fn=`[object String]`,pn=`[object Symbol]`,mn=`[object ArrayBuffer]`,hn=`[object DataView]`,gn=l?l.prototype:void 0,J=gn?gn.valueOf:void 0;function _n(t,n,r,i,a,o,s){switch(r){case hn:if(t.byteLength!=n.byteLength||t.byteOffset!=n.byteOffset)return!1;t=t.buffer,n=n.buffer;case mn:return!(t.byteLength!=n.byteLength||!o(new b(t),new b(n)));case an:case on:case ln:return e(+t,+n);case sn:return t.name==n.name&&t.message==n.message;case un:case fn:return t==n+``;case cn:var c=tn;case dn:var l=i&nn;if(c||=q,t.size!=n.size&&!l)return!1;var u=s.get(t);if(u)return u==n;i|=rn,s.set(t,n);var d=en(c(t),c(n),i,a,o,s);return s.delete(t),d;case pn:if(J)return J.call(t)==J.call(n)}return!1}var vn=1,yn=Object.prototype.hasOwnProperty;function bn(e,t,n,r,i,a){var o=n&vn,s=H(e),c=s.length;if(c!=H(t).length&&!o)return!1;for(var l=c;l--;){var u=s[l];if(!(o?u in t:yn.call(t,u)))return!1}var d=a.get(e),f=a.get(t);if(d&&f)return d==t&&f==e;var p=!0;a.set(e,t),a.set(t,e);for(var m=o;++l<c;){u=s[l];var h=e[u],g=t[u];if(r)var _=o?r(g,h,u,t,e,a):r(h,g,u,e,t,a);if(!(_===void 0?h===g||i(h,g,n,r,a):_)){p=!1;break}m||=u==`constructor`}if(p&&!m){var v=e.constructor,y=t.constructor;v!=y&&`constructor`in e&&`constructor`in t&&!(typeof v==`function`&&v instanceof v&&typeof y==`function`&&y instanceof y)&&(p=!1)}return a.delete(e),a.delete(t),p}var xn=1,Sn=`[object Arguments]`,Cn=`[object Array]`,Y=`[object Object]`,wn=Object.prototype.hasOwnProperty;function Tn(e,t,n,r,i,a){var o=c(e),s=c(t),l=o?Cn:T(e),u=s?Cn:T(t);l=l==Sn?Y:l,u=u==Sn?Y:u;var d=l==Y,f=u==Y,m=l==u;if(m&&C(e)){if(!C(t))return!1;o=!0,d=!1}if(m&&!d)return a||=new p,o||h(e)?en(e,t,n,r,i,a):_n(e,t,l,n,r,i,a);if(!(n&xn)){var g=d&&wn.call(e,`__wrapped__`),_=f&&wn.call(t,`__wrapped__`);if(g||_){var v=g?e.value():e,y=_?t.value():t;return a||=new p,i(v,y,n,r,a)}}return m?(a||=new p,bn(e,t,n,r,i,a)):!1}function X(e,t,n,i,a){return e===t?!0:e==null||t==null||!r(e)&&!r(t)?e!==e&&t!==t:Tn(e,t,n,i,X,a)}var En=1,Dn=2;function On(e,t,n,r){var i=n.length,a=i,o=!r;if(e==null)return!a;for(e=Object(e);i--;){var s=n[i];if(o&&s[2]?s[1]!==e[s[0]]:!(s[0]in e))return!1}for(;++i<a;){s=n[i];var c=s[0],l=e[c],u=s[1];if(o&&s[2]){if(l===void 0&&!(c in e))return!1}else{var d=new p;if(r)var f=r(l,u,c,e,t,d);if(!(f===void 0?X(u,l,En|Dn,r,d):f))return!1}}return!0}function kn(e){return e===e&&!t(e)}function An(e){for(var t=k(e),n=t.length;n--;){var r=t[n],i=e[r];t[n]=[r,i,kn(i)]}return t}function Z(e,t){return function(n){return n==null?!1:n[e]===t&&(t!==void 0||e in Object(n))}}function jn(e){var t=An(e);return t.length==1&&t[0][2]?Z(t[0][0],t[0][1]):function(n){return n===e||On(n,e,t)}}function Mn(e,t){return e!=null&&t in Object(e)}function Nn(e,t,n){t=M(t,e);for(var r=-1,a=t.length,s=!1;++r<a;){var l=N(t[r]);if(!(s=e!=null&&n(e,l)))break;e=e[l]}return s||++r!=a?s:(a=e==null?0:e.length,!!a&&o(a)&&i(l,a)&&(c(e)||f(e)))}function Pn(e,t){return e!=null&&Nn(e,t,Mn)}var Fn=1,In=2;function Ln(e,t){return A(e)&&kn(t)?Z(N(e),t):function(n){var r=Ee(n,e);return r===void 0&&r===t?Pn(n,e):X(t,r,Fn|In)}}function Rn(e){return function(t){return t?.[e]}}function zn(e){return function(t){return P(t,e)}}function Bn(e){return A(e)?Rn(N(e)):zn(e)}function Q(e){return typeof e==`function`?e:e==null?w:typeof e==`object`?c(e)?Ln(e[0],e[1]):jn(e):Bn(e)}function Vn(e,t){return e&&ee(e,t,k)}function Hn(e,t){return function(n,r){if(n==null)return n;if(!S(n))return e(n,r);for(var i=n.length,a=t?i:-1,o=Object(n);(t?a--:++a<i)&&r(o[a],a,o)!==!1;);return n}}var $=Hn(Vn);function Un(e,t,n){for(var r=-1,i=e==null?0:e.length;++r<i;)if(n(t,e[r]))return!0;return!1}function Wn(e){return typeof e==`function`?e:w}function Gn(e,t){return(c(e)?fe:$)(e,Wn(t))}function Kn(e,t){var n=[];return $(e,function(e,r,i){t(e,r,i)&&n.push(e)}),n}function qn(e,t){return(c(e)?R:Kn)(e,Q(t,3))}function Jn(e,t){return O(t,function(t){return e[t]})}function Yn(e){return e==null?[]:Jn(e,k(e))}function Xn(e){return e===void 0}function Zn(e,t,n,r,i){return i(e,function(e,i,a){n=r?(r=!1,e):t(n,e,i,a)}),n}function Qn(e,t,n){var r=c(e)?Oe:Zn,i=arguments.length<3;return r(e,Q(t,4),n,i,$)}var $n=E&&1/q(new E([,-0]))[1]==1/0?function(e){return new E(e)}:de,er=200;function tr(e,t,n){var r=-1,i=_e,a=e.length,o=!0,s=[],c=s;if(n)o=!1,i=Un;else if(a>=er){var l=t?null:$n(e);if(l)return q(l);o=!1,i=K,c=new G}else c=t?[]:s;outer:for(;++r<a;){var u=e[r],d=t?t(u):u;if(u=n||u!==0?u:0,o&&d===d){for(var f=c.length;f--;)if(c[f]===d)continue outer;t&&c.push(d),s.push(u)}else i(c,d,n)||(c!==s&&c.push(d),s.push(u))}return s}export{pe as A,P as C,k as D,j as E,O as M,D as N,_e as O,L as S,M as T,Zt as _,qn as a,Ie as b,Wn as c,Vn as d,Q as f,K as g,Nn as h,Yn as i,de as j,ge as k,Un as l,Pn as m,Qn as n,Kn as o,Rn as p,Xn as r,Gn as s,tr as t,$ as u,G as v,N as w,R as x,W as y};