@jxsuite/studio 2.0.1 → 2.1.0

package/dist/chunks/studio-vcetc91k.js

@@ -0,0 +1,659 @@
+import {
+  getRecentFiles,
+  getRecentProjects,
+  openFileInTab,
+  trackRecentFile
+} from "./studio-94m77tgk.js";
+import {
+  live
+} from "./studio-xmvbhg31.js";
+import {
+  activeRegistry,
+  activeTab,
+  getLayerSlot
+} from "./studio-41exgzhq.js";
+import {
+  classMap
+} from "./studio-ckwz4d3x.js";
+import {
+  ref
+} from "./studio-p471gg5n.js";
+import {
+  html,
+  nothing,
+  render
+} from "./studio-5x5774ak.js";
+import {
+  flattenTree,
+  nodeLabel,
+  projectState
+} from "./studio-cjm7fdjf.js";
+import {
+  documentExtensions,
+  formatByExtension,
+  loadFormats
+} from "./studio-adn0z1k3.js";
+import {
+  getPlatform
+} from "./studio-sas7mt3k.js";
+
+// src/panels/quick-search.ts
+var PALETTE_MODES = [
+  {
+    mode: "files",
+    prefix: "",
+    chip: "Files",
+    placeholder: "Go to a file…",
+    description: "Open a file by any part of its path — pgblog finds pages/blog/index.md."
+  },
+  {
+    mode: "commands",
+    prefix: ">",
+    chip: "Commands",
+    placeholder: "Run a command…",
+    description: "Run anything Studio can do, with its keyboard shortcut printed beside it."
+  },
+  {
+    mode: "nodes",
+    prefix: "@",
+    chip: "Symbols",
+    placeholder: "Go to an element in this document…",
+    description: "Select an element in the open document by its Outline name."
+  },
+  {
+    mode: "projects",
+    prefix: "",
+    chip: "Recent Projects",
+    placeholder: "Open a recent project…",
+    description: "Reopen a project you have had open before."
+  },
+  {
+    mode: "picker",
+    prefix: "?",
+    chip: "Modes",
+    placeholder: "Type ? for modes, > for commands, @ for elements…",
+    description: "List these modes."
+  }
+];
+var MODE_SPEC = new Map(PALETTE_MODES.map((spec) => [spec.mode, spec]));
+var PREFIXED_MODES = PALETTE_MODES.filter((spec) => spec.prefix !== "");
+function modeSpec(mode) {
+  return MODE_SPEC.get(mode) ?? PALETTE_MODES[0];
+}
+function resolvePaletteMode(requested, raw, projectOpen) {
+  const prefixed = PREFIXED_MODES.find((spec) => raw.startsWith(spec.prefix));
+  if (prefixed) {
+    return resolvePaletteMode(prefixed.mode, raw.slice(1), projectOpen);
+  }
+  let mode = requested;
+  if (mode === "picker" && raw.trim() !== "") {
+    mode = "files";
+  }
+  if (mode === "files" && !projectOpen) {
+    mode = "projects";
+  }
+  return { mode, query: raw };
+}
+var BOUNDARY = new Set(["/", "-", "_", ".", " "]);
+function fuzzyScore(text, query) {
+  if (query === "") {
+    return 0;
+  }
+  const haystack = text.toLowerCase();
+  const needle = query.toLowerCase();
+  const basenameStart = haystack.lastIndexOf("/") + 1;
+  let score = 0;
+  let cursor = 0;
+  let previousIndex = -2;
+  for (const char of needle) {
+    const index = haystack.indexOf(char, cursor);
+    if (index === -1) {
+      return null;
+    }
+    if (index === previousIndex + 1) {
+      score += 8;
+    }
+    if (index === 0 || BOUNDARY.has(haystack[index - 1] ?? "")) {
+      score += 6;
+    }
+    if (index >= basenameStart) {
+      score += 4;
+    }
+    previousIndex = index;
+    cursor = index + 1;
+  }
+  return score - previousIndex * 0.01 - haystack.length * 0.001;
+}
+function rankBy(items, query, key) {
+  const scored = [];
+  for (const [index, item] of items.entries()) {
+    const score = fuzzyScore(key(item), query);
+    if (score !== null) {
+      scored.push({ index, item, score });
+    }
+  }
+  return scored.toSorted((a, b) => b.score - a.score || a.index - b.index).map((entry) => entry.item);
+}
+function paletteArgs(command) {
+  const schema = command.args;
+  const properties = schema?.properties;
+  if (!schema || !properties) {
+    return { kind: "none" };
+  }
+  const names = Object.keys(properties);
+  if (names.length !== 1) {
+    return { kind: "unsupported" };
+  }
+  const name = names[0];
+  const property = properties[name];
+  if (property.enum) {
+    return {
+      kind: "choice",
+      name,
+      choices: property.enum.map((value) => ({ label: String(value), value }))
+    };
+  }
+  if (property.type === "boolean") {
+    return {
+      kind: "choice",
+      name,
+      choices: [
+        { label: "on", value: true },
+        { label: "off", value: false }
+      ]
+    };
+  }
+  return { kind: "unsupported" };
+}
+var QUICK_SEARCH_LISTBOX_ID = "quick-search-listbox";
+function optionId(index) {
+  return `quick-search-option-${index}`;
+}
+var RECENT_COMMANDS_KEY = "jx-studio-recent-commands";
+var RECENT_COMMANDS_MAX = 6;
+function getRecentCommands() {
+  try {
+    const raw = JSON.parse(localStorage.getItem(RECENT_COMMANDS_KEY) || "[]");
+    return Array.isArray(raw) ? raw.filter((id) => typeof id === "string") : [];
+  } catch {
+    return [];
+  }
+}
+function trackRecentCommand(id) {
+  const next = [id, ...getRecentCommands().filter((known) => known !== id)].slice(0, RECENT_COMMANDS_MAX);
+  try {
+    localStorage.setItem(RECENT_COMMANDS_KEY, JSON.stringify(next));
+  } catch {}
+}
+var _ctx = null;
+var _open = false;
+var _requested = "picker";
+var _query = "";
+var _selectedIndex = 0;
+var _files = null;
+var _loading = false;
+var _pending = null;
+function getContainer() {
+  return getLayerSlot("popover", "quick-search");
+}
+function initQuickSearch(ctx) {
+  _ctx = ctx ?? null;
+}
+function openQuickSearch(mode = "files") {
+  _open = true;
+  _requested = mode;
+  _query = "";
+  _selectedIndex = 0;
+  _pending = null;
+  _files = null;
+  renderOverlay();
+  ensureFiles();
+}
+function closeQuickSearch() {
+  _open = false;
+  _pending = null;
+  renderOverlay();
+}
+function isQuickSearchOpen() {
+  return _open;
+}
+function scopeRoot() {
+  return projectState ? projectState.projectRoot ?? null : null;
+}
+function hasProject() {
+  return projectState != null;
+}
+function current() {
+  return resolvePaletteMode(_requested, _query, hasProject());
+}
+function dirPart(path) {
+  const parts = path.split("/");
+  parts.pop();
+  return parts.length > 0 ? parts.join("/") : "";
+}
+function shortenPath(path) {
+  if (path.startsWith("/home/")) {
+    return `~/${path.split("/").slice(3).join("/")}`;
+  }
+  return path;
+}
+async function ensureFiles() {
+  if (!_open || _files !== null || _loading || !hasProject()) {
+    return;
+  }
+  _loading = true;
+  renderOverlay();
+  try {
+    await loadFormats();
+    const hits = await getPlatform().searchFiles("", documentExtensions());
+    _files = hits.map((hit) => ({
+      kind: "file",
+      path: hit.path,
+      name: hit.name ?? hit.path.split("/").pop() ?? "",
+      detail: dirPart(hit.path),
+      recent: false
+    }));
+  } catch {
+    _files = [];
+  }
+  _loading = false;
+  renderOverlay();
+}
+function fileRows(query) {
+  if (query.trim() === "") {
+    return getRecentFiles(scopeRoot() ?? undefined).map((file) => ({
+      kind: "file",
+      path: file.path,
+      name: file.name,
+      detail: dirPart(file.path),
+      recent: true
+    }));
+  }
+  return rankBy(_files ?? [], query.trim(), (row) => row.path);
+}
+function projectRows(query) {
+  const rows = getRecentProjects().map((project) => ({
+    kind: "project",
+    root: project.root,
+    name: project.name,
+    detail: shortenPath(project.root)
+  }));
+  return rankBy(rows, query.trim(), (row) => `${row.name}/${row.root}`);
+}
+function commandRows(registry, query) {
+  const recents = getRecentCommands();
+  const rows = [];
+  for (const command of registry.visible()) {
+    if (paletteArgs(command).kind === "unsupported") {
+      continue;
+    }
+    if (!(command.menus ?? ["palette"]).includes("palette")) {
+      continue;
+    }
+    rows.push({
+      kind: "command",
+      id: command.id,
+      name: `${command.category}: ${command.title}`,
+      detail: registry.disabledReason(command.id) ?? "",
+      chord: registry.keymap.formatBinding(command.id) ?? "",
+      enabled: registry.isEnabled(command.id),
+      recent: recents.includes(command.id)
+    });
+  }
+  const ranked = rankBy(rows, query.trim(), (row) => row.name);
+  if (query.trim() !== "") {
+    return ranked;
+  }
+  const pinned = recents.map((id) => ranked.find((row) => row.id === id)).filter((row) => row !== undefined);
+  return [...pinned, ...ranked.filter((row) => !pinned.includes(row))];
+}
+function nodeRows(query) {
+  const tab = activeTab.value;
+  if (!tab) {
+    return [];
+  }
+  const rows = flattenTree(tab.doc.document).map((row) => ({
+    kind: "node",
+    path: row.path,
+    name: row.nodeType === "text" ? String(row.node).slice(0, 60) : nodeLabel(row.node),
+    detail: row.nodeType
+  }));
+  return rankBy(rows, query.trim(), (row) => row.name);
+}
+function modeRows() {
+  return PALETTE_MODES.filter((spec) => spec.mode !== "picker").map((spec) => ({
+    kind: "mode",
+    mode: spec.mode,
+    name: spec.chip,
+    detail: spec.description,
+    chord: spec.prefix
+  }));
+}
+function argRows(query) {
+  const pending = _pending;
+  const rows = pending.choices.map((choice) => ({
+    kind: "arg",
+    commandId: pending.command.id,
+    argName: pending.name,
+    value: choice.value,
+    name: choice.label,
+    detail: `${pending.command.title} → ${pending.name}`
+  }));
+  return rankBy(rows, query.trim(), (row) => row.name);
+}
+function currentRows() {
+  const { mode, query } = current();
+  if (_pending) {
+    return { rows: argRows(query), showingRecent: false };
+  }
+  switch (mode) {
+    case "commands": {
+      const registry = activeRegistry();
+      return {
+        rows: registry ? commandRows(registry, query) : [],
+        showingRecent: query.trim() === ""
+      };
+    }
+    case "nodes": {
+      return { rows: nodeRows(query), showingRecent: false };
+    }
+    case "projects": {
+      return { rows: projectRows(query), showingRecent: query.trim() === "" };
+    }
+    case "picker": {
+      return { rows: modeRows(), showingRecent: false };
+    }
+    default: {
+      return { rows: fileRows(query), showingRecent: query.trim() === "" };
+    }
+  }
+}
+function onInput(e) {
+  const raw = e.target.value;
+  const prefixed = PREFIXED_MODES.find((spec) => raw.startsWith(spec.prefix));
+  if (prefixed) {
+    _requested = prefixed.mode;
+    _query = raw.slice(1);
+  } else {
+    _query = raw;
+  }
+  _selectedIndex = 0;
+  renderOverlay();
+  ensureFiles();
+}
+function clearMode() {
+  _requested = "picker";
+  _pending = null;
+  _selectedIndex = 0;
+  renderOverlay();
+}
+function onKeydown(e) {
+  const { rows } = currentRows();
+  switch (e.key) {
+    case "ArrowDown": {
+      e.preventDefault();
+      _selectedIndex = Math.min(_selectedIndex + 1, rows.length - 1);
+      renderOverlay();
+      break;
+    }
+    case "ArrowUp": {
+      e.preventDefault();
+      _selectedIndex = Math.max(_selectedIndex - 1, 0);
+      renderOverlay();
+      break;
+    }
+    case "Enter": {
+      e.preventDefault();
+      if (rows[_selectedIndex]) {
+        selectRow(rows[_selectedIndex]);
+      }
+      break;
+    }
+    case "Backspace": {
+      if (_query === "" && (_pending || _requested !== "picker")) {
+        e.preventDefault();
+        clearMode();
+      }
+      break;
+    }
+    case "Escape": {
+      e.preventDefault();
+      closeQuickSearch();
+      break;
+    }
+    default: {
+      break;
+    }
+  }
+}
+function enterMode(mode) {
+  _requested = mode;
+  _query = "";
+  _selectedIndex = 0;
+  renderOverlay();
+  ensureFiles();
+}
+function runCommand(command, args) {
+  const registry = activeRegistry();
+  if (!registry) {
+    return;
+  }
+  trackRecentCommand(command.id);
+  closeQuickSearch();
+  const report = (error) => {
+    console.error(`palette: command "${command.id}" failed`, error);
+  };
+  try {
+    Promise.resolve(registry.run(command.id, args)).catch(report);
+  } catch (error) {
+    report(error);
+  }
+}
+function selectRow(row) {
+  switch (row.kind) {
+    case "project": {
+      closeQuickSearch();
+      _ctx?.openRecentProject(row.root);
+      return;
+    }
+    case "file": {
+      closeQuickSearch();
+      trackRecentFile({ name: row.name, path: row.path, root: scopeRoot() ?? "" });
+      openFileInTab(row.path);
+      return;
+    }
+    case "mode": {
+      enterMode(row.mode);
+      return;
+    }
+    case "node": {
+      const registry = activeRegistry();
+      closeQuickSearch();
+      registry?.run("selection.set", { path: row.path });
+      return;
+    }
+    case "arg": {
+      runCommand(_pending.command, { [row.argName]: row.value });
+      return;
+    }
+    default: {
+      selectCommandRow(row);
+    }
+  }
+}
+function selectCommandRow(row) {
+  const registry = activeRegistry();
+  const command = registry?.get(row.id);
+  if (!registry || !command || !row.enabled) {
+    return;
+  }
+  const args = paletteArgs(command);
+  if (args.kind === "choice") {
+    _pending = { choices: args.choices, command, name: args.name };
+    _query = "";
+    _selectedIndex = 0;
+    renderOverlay();
+    return;
+  }
+  runCommand(command);
+}
+function fileIcon(name) {
+  const ext = name.split(".").pop()?.toLowerCase();
+  if (ext === "json") {
+    return html`<sp-icon-file-code size="s"></sp-icon-file-code>`;
+  }
+  if (ext && formatByExtension(ext)) {
+    return html`<sp-icon-file-txt size="s"></sp-icon-file-txt>`;
+  }
+  return html`<sp-icon-document size="s"></sp-icon-document>`;
+}
+function rowIcon(row) {
+  switch (row.kind) {
+    case "project": {
+      return html`<sp-icon-folder-open size="s"></sp-icon-folder-open>`;
+    }
+    case "file": {
+      return fileIcon(row.name);
+    }
+    case "command": {
+      return html`<sp-icon-play size="s"></sp-icon-play>`;
+    }
+    case "node": {
+      return html`<sp-icon-layers size="s"></sp-icon-layers>`;
+    }
+    default: {
+      return html`<sp-icon-chevron-right size="s"></sp-icon-chevron-right>`;
+    }
+  }
+}
+function rowTrailing(row, showingRecent) {
+  if (row.kind === "command" && row.chord) {
+    return html`<kbd class="palette-chord">${row.chord}</kbd>`;
+  }
+  if (row.kind === "mode" && row.chord) {
+    return html`<kbd class="palette-chord">${row.chord}</kbd>`;
+  }
+  if (row.kind === "command" && row.recent) {
+    return html`<span class="quick-search-badge">recent</span>`;
+  }
+  return showingRecent ? html`<span class="quick-search-badge">recent</span>` : nothing;
+}
+function chipTemplate(mode) {
+  const label = _pending ? _pending.command.title : modeSpec(mode).chip;
+  if (!_pending && mode === "picker") {
+    return nothing;
+  }
+  return html`
+    <span class="palette-chip">
+      ${label}
+      <button
+        class="palette-chip-remove"
+        type="button"
+        title="Clear mode (Backspace)"
+        aria-label="Clear mode"
+        @click=${clearMode}
+      >
+        ×
+      </button>
+    </span>
+  `;
+}
+function emptyHint(mode, query) {
+  if (_loading) {
+    return "Reading the project's files…";
+  }
+  if (query.trim() !== "") {
+    return "No results";
+  }
+  switch (mode) {
+    case "projects": {
+      return "No recent projects — open one to get started";
+    }
+    case "nodes": {
+      return "Open a document to jump to its elements";
+    }
+    case "commands": {
+      return "Type to find any command in Studio";
+    }
+    default: {
+      return modeSpec(mode).placeholder;
+    }
+  }
+}
+function renderOverlay() {
+  const container = getContainer();
+  if (!_open) {
+    render(nothing, container);
+    return;
+  }
+  const { mode, query } = current();
+  const { rows, showingRecent } = currentRows();
+  const spec = modeSpec(mode);
+  const placeholder = _pending ? `Choose a ${_pending.name}…` : spec.placeholder;
+  const sectionLabel = _pending ? `${_pending.command.title} — ${_pending.name}` : mode === "projects" ? "Recent projects" : mode === "commands" ? "Recently used" : "Recently opened";
+  const tpl = html`
+    <div class="quick-search-overlay" @click=${closeQuickSearch}>
+      <div class="quick-search-panel" @click=${(e) => e.stopPropagation()}>
+        <div class="palette-input-row">
+          ${chipTemplate(mode)}
+          <input
+            class="quick-search-input"
+            type="text"
+            role="combobox"
+            aria-controls=${QUICK_SEARCH_LISTBOX_ID}
+            aria-expanded=${rows.length > 0}
+            aria-activedescendant=${rows.length > 0 ? optionId(_selectedIndex) : nothing}
+            aria-autocomplete="list"
+            aria-label=${placeholder}
+            placeholder=${placeholder}
+            .value=${live(_query)}
+            @input=${onInput}
+            @keydown=${onKeydown}
+            ${ref((el) => {
+    if (el) {
+      requestAnimationFrame(() => el.focus());
+    }
+  })}
+          />
+        </div>
+        <div class="quick-search-results" role="listbox" id=${QUICK_SEARCH_LISTBOX_ID}>
+          ${rows.length === 0 ? html`<div class="quick-search-empty">${emptyHint(mode, query)}</div>` : nothing}
+          ${showingRecent && rows.length > 0 ? html`<div class="quick-search-section-label">${sectionLabel}</div>` : nothing}
+          ${rows.map((row, i) => html`
+              <div
+                class=${classMap({
+    "quick-search-item": true,
+    disabled: row.kind === "command" && !row.enabled,
+    selected: i === _selectedIndex
+  })}
+                role="option"
+                id=${optionId(i)}
+                aria-selected=${i === _selectedIndex}
+                aria-disabled=${row.kind === "command" && !row.enabled}
+                @click=${() => selectRow(row)}
+                @mouseenter=${() => {
+    _selectedIndex = i;
+    renderOverlay();
+  }}
+              >
+                <span class="quick-search-icon">${rowIcon(row)}</span>
+                <span class="quick-search-name">${row.name}</span>
+                <span class="quick-search-path">${row.detail}</span>
+                ${rowTrailing(row, showingRecent)}
+              </div>
+            `)}
+        </div>
+        <div class="palette-hint">
+          <kbd>↑↓</kbd> move · <kbd>↵</kbd> run · <kbd>?</kbd> modes · <kbd>&gt;</kbd> commands ·
+          <kbd>@</kbd> elements
+        </div>
+      </div>
+    </div>
+  `;
+  render(tpl, container);
+}
+
+export { PALETTE_MODES, modeSpec, resolvePaletteMode, fuzzyScore, rankBy, paletteArgs, getRecentCommands, initQuickSearch, openQuickSearch, closeQuickSearch, isQuickSearchOpen };
+
+//# debugId=D01DE0145FC9DB1664756E2164756E21
+//# sourceMappingURL=studio-vcetc91k.js.map