@larose/pi-web 0.3.0

package/src/client/markdown.ts

@@ -0,0 +1,98 @@
+import { Marked, type Tokens } from "marked";
+
+const fallbackOrigin = "http://localhost";
+const safeLinkProtocols = new Set(["http:", "https:", "mailto:"]);
+const safeImageProtocols = new Set(["http:", "https:"]);
+
+interface NormalizedUrl {
+  href: string;
+  protocol: string;
+  sameOrigin: boolean;
+}
+
+function escapeHtml(value: string): string {
+  return value
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+function currentOrigin(): string {
+  return typeof window === "undefined" ? fallbackOrigin : window.location.origin;
+}
+
+function normalizeUrl(value: string, origin: string): NormalizedUrl | undefined {
+  try {
+    const base = new URL(origin);
+    const url = new URL(value, base);
+
+    return {
+      href: url.href,
+      protocol: url.protocol.toLowerCase(),
+      sameOrigin: url.origin === base.origin,
+    };
+  } catch {
+    return undefined;
+  }
+}
+
+function titleAttribute(title: string | null | undefined): string {
+  return title === null || title === undefined ? "" : ` title="${escapeHtml(title)}"`;
+}
+
+function renderLink(
+  token: Tokens.Link,
+  origin: string,
+  parseInline: (tokens: Tokens.Link["tokens"]) => string,
+): string {
+  const label = parseInline(token.tokens);
+  const url = normalizeUrl(token.href, origin);
+
+  if (!url || !safeLinkProtocols.has(url.protocol)) {
+    return `<span class="markdown-unsafe-link">${label}</span>`;
+  }
+
+  return `<a href="${escapeHtml(url.href)}"${titleAttribute(token.title)} target="_blank" rel="noopener noreferrer">${label}</a>`;
+}
+
+function renderImage(token: Tokens.Image, origin: string): string {
+  const alt = token.text || "image";
+  const escapedAlt = escapeHtml(alt);
+  const url = normalizeUrl(token.href, origin);
+
+  if (!url || !safeImageProtocols.has(url.protocol)) {
+    return `<span class="markdown-image-unavailable">${escapedAlt}</span>`;
+  }
+
+  if (!url.sameOrigin) {
+    return `<a class="markdown-external-image" href="${escapeHtml(url.href)}"${titleAttribute(token.title)} target="_blank" rel="noopener noreferrer">Open image: ${escapedAlt}</a>`;
+  }
+
+  return `<img class="markdown-image" src="${escapeHtml(url.href)}" alt="${escapedAlt}"${titleAttribute(token.title)}>`;
+}
+
+export function renderMarkdown(source: string, origin = currentOrigin()): string {
+  try {
+    const parser = new Marked({
+      async: false,
+      gfm: true,
+      renderer: {
+        html(token): string {
+          return escapeHtml(token.text);
+        },
+        link(token): string {
+          return renderLink(token, origin, (tokens) => this.parser.parseInline(tokens));
+        },
+        image(token): string {
+          return renderImage(token, origin);
+        },
+      },
+    });
+
+    return parser.parse(source, { async: false });
+  } catch {
+    return `<pre class="markdown-fallback">${escapeHtml(source)}</pre>`;
+  }
+}

package/src/client/message-queue.ts

@@ -0,0 +1,67 @@
+export interface MessageQueue {
+  steering: string[];
+  followUp: string[];
+}
+
+export function copyMessageQueue(queue: MessageQueue | undefined): MessageQueue {
+  return {
+    steering: [...(queue?.steering ?? [])],
+    followUp: [...(queue?.followUp ?? [])],
+  };
+}
+
+export function messageQueueFromEvent(event: Record<string, unknown>): MessageQueue {
+  return {
+    steering: Array.isArray(event.steering)
+      ? event.steering.filter((message): message is string => typeof message === "string")
+      : [],
+    followUp: Array.isArray(event.followUp)
+      ? event.followUp.filter((message): message is string => typeof message === "string")
+      : [],
+  };
+}
+
+export function removedSteeringPrefix(previous: MessageQueue, next: MessageQueue): string[] {
+  const removedCount = previous.steering.length - next.steering.length;
+  if (removedCount <= 0) {
+    return [];
+  }
+
+  const unchangedRemainder = next.steering.every(
+    (message, index) => previous.steering[index + removedCount] === message,
+  );
+  return unchangedRemainder ? previous.steering.slice(0, removedCount) : [];
+}
+
+export function steeringQueueGrew(previous: MessageQueue, next: MessageQueue): boolean {
+  if (next.steering.length <= previous.steering.length) {
+    return false;
+  }
+
+  return previous.steering.every((message, index) => next.steering[index] === message);
+}
+
+export function reconcileMessageQueue(
+  previous: MessageQueue,
+  next: MessageQueue,
+  discardRemoved = false,
+): { queue: MessageQueue; dequeuedSteering: string[] } {
+  return {
+    queue: copyMessageQueue(next),
+    dequeuedSteering: discardRemoved ? [] : removedSteeringPrefix(previous, next),
+  };
+}
+
+export function withoutSteeringMessage(
+  queue: MessageQueue,
+  index: number,
+  expectedMessage: string,
+): MessageQueue | undefined {
+  if (!Number.isSafeInteger(index) || index < 0 || queue.steering[index] !== expectedMessage) {
+    return undefined;
+  }
+
+  const next = copyMessageQueue(queue);
+  next.steering.splice(index, 1);
+  return next;
+}

package/src/client/path-combobox.ts

@@ -0,0 +1,271 @@
+export interface PathComboboxSuggestion {
+  value: string;
+  label: string;
+  detail?: string;
+  source: "recent" | "server";
+}
+
+export interface PathComboboxOptions {
+  input: HTMLInputElement;
+  list: HTMLElement;
+  status: HTMLElement;
+  toggle: HTMLButtonElement;
+  shortcuts(): PathComboboxSuggestion[];
+  load(value: string, signal: AbortSignal): Promise<PathComboboxSuggestion[]>;
+  commit(value: string): unknown | Promise<unknown>;
+}
+
+let nextComboboxId = 0;
+
+function uniqueSuggestions(suggestions: readonly PathComboboxSuggestion[]): PathComboboxSuggestion[] {
+  const values = new Set<string>();
+  return suggestions.filter((suggestion) => {
+    if (values.has(suggestion.value)) {
+      return false;
+    }
+    values.add(suggestion.value);
+    return true;
+  });
+}
+
+export class PathCombobox {
+  private readonly options: PathComboboxOptions;
+  private readonly optionIdPrefix: string;
+  private suggestions: PathComboboxSuggestion[] = [];
+  private activeIndex = -1;
+  private generation = 0;
+  private request: AbortController | null = null;
+  private openState = false;
+  private loading = false;
+  private disabled = false;
+
+  constructor(options: PathComboboxOptions) {
+    this.options = options;
+    this.optionIdPrefix = `path-combobox-option-${++nextComboboxId}`;
+
+    options.input.setAttribute("role", "combobox");
+    options.input.setAttribute("aria-autocomplete", "list");
+    options.input.setAttribute("aria-controls", options.list.id);
+    options.input.setAttribute("aria-expanded", "false");
+    options.input.setAttribute("aria-haspopup", "listbox");
+    options.toggle.setAttribute("aria-controls", options.list.id);
+    options.list.setAttribute("role", "listbox");
+    options.list.setAttribute("aria-label", "Directory suggestions");
+
+    options.input.addEventListener("focus", () => this.open());
+    options.input.addEventListener("click", () => {
+      const end = options.input.value.length;
+      options.input.setSelectionRange(end, end);
+    });
+    options.input.addEventListener("input", () => {
+      this.activeIndex = -1;
+      this.openState = true;
+      this.render();
+      void this.refresh();
+    });
+    options.input.addEventListener("keydown", (event) => this.handleKeydown(event));
+    options.input.addEventListener("blur", () => {
+      window.setTimeout(() => this.close(), 0);
+    });
+    options.toggle.addEventListener("click", () => {
+      if (this.disabled) {
+        return;
+      }
+
+      if (this.openState) {
+        this.close();
+      } else {
+        options.input.focus();
+        if (!this.openState) {
+          this.open();
+        }
+      }
+    });
+  }
+
+  setValue(value: string): void {
+    this.options.input.value = value;
+  }
+
+  value(): string {
+    return this.options.input.value;
+  }
+
+  setDisabled(disabled: boolean): void {
+    this.disabled = disabled;
+    this.options.input.disabled = disabled;
+    this.options.toggle.disabled = disabled;
+    if (disabled) {
+      this.close();
+    }
+  }
+
+  refreshShortcuts(): void {
+    if (this.openState) {
+      void this.refresh();
+    }
+  }
+
+  close(): void {
+    this.openState = false;
+    this.activeIndex = -1;
+    this.request?.abort();
+    this.request = null;
+    this.options.input.removeAttribute("aria-activedescendant");
+    this.render();
+  }
+
+  private open(): void {
+    if (this.disabled) {
+      return;
+    }
+
+    this.openState = true;
+    this.render();
+    void this.refresh();
+  }
+
+  private async refresh(): Promise<void> {
+    const generation = ++this.generation;
+    this.request?.abort();
+    const request = new AbortController();
+    this.request = request;
+    const shortcuts = this.options.shortcuts();
+    const value = this.options.input.value.trim();
+
+    this.loading = Boolean(value);
+    this.suggestions = shortcuts;
+    this.options.status.textContent = this.loading ? "Loading folders…" : "";
+    this.render();
+    if (!value) {
+      this.loading = false;
+      this.options.status.textContent = shortcuts.length > 0 ? `${shortcuts.length} recent paths` : "Enter a path";
+      return;
+    }
+
+    try {
+      const loaded = await this.options.load(value, request.signal);
+      if (generation !== this.generation || request.signal.aborted) {
+        return;
+      }
+
+      this.suggestions = uniqueSuggestions([...shortcuts, ...loaded]);
+      this.options.status.textContent =
+        this.suggestions.length > 0 ? `${this.suggestions.length} paths available` : "No matching directories";
+    } catch (error) {
+      if (generation !== this.generation || request.signal.aborted) {
+        return;
+      }
+
+      this.suggestions = shortcuts;
+      this.options.status.textContent = error instanceof Error ? error.message : "Could not browse directories";
+    } finally {
+      if (generation === this.generation) {
+        this.loading = false;
+        this.request = null;
+        this.render();
+      }
+    }
+  }
+
+  private render(): void {
+    this.options.input.setAttribute("aria-expanded", String(this.openState));
+    this.options.input.setAttribute("aria-busy", String(this.loading));
+    this.options.toggle.setAttribute("aria-expanded", String(this.openState));
+    this.options.list.hidden = !this.openState;
+    if (!this.openState) {
+      this.options.list.replaceChildren();
+      return;
+    }
+
+    const fragment = document.createDocumentFragment();
+    let previousSource: PathComboboxSuggestion["source"] | null = null;
+    for (const [index, suggestion] of this.suggestions.entries()) {
+      if (suggestion.source !== previousSource) {
+        const heading = document.createElement("li");
+        heading.className = "path-combobox-heading";
+        heading.textContent = suggestion.source === "recent" ? "Recent" : "Folders";
+        heading.setAttribute("role", "presentation");
+        fragment.append(heading);
+        previousSource = suggestion.source;
+      }
+
+      const item = document.createElement("li");
+      item.className = "path-combobox-option";
+      item.id = `${this.optionIdPrefix}-${index}`;
+      item.setAttribute("role", "option");
+      item.setAttribute("aria-selected", String(index === this.activeIndex));
+      item.append(Object.assign(document.createElement("strong"), { textContent: suggestion.label }));
+      if (suggestion.detail) {
+        item.append(Object.assign(document.createElement("span"), { textContent: suggestion.detail }));
+      }
+      item.addEventListener("mousedown", (event) => event.preventDefault());
+      item.addEventListener("click", () => this.choose(index));
+      fragment.append(item);
+    }
+
+    if (this.suggestions.length === 0 && !this.loading) {
+      const empty = document.createElement("li");
+      empty.className = "path-combobox-empty";
+      empty.textContent = "No directories found";
+      empty.setAttribute("role", "presentation");
+      fragment.append(empty);
+    }
+
+    this.options.list.replaceChildren(fragment);
+  }
+
+  private choose(index: number): void {
+    const suggestion = this.suggestions[index];
+    if (!suggestion) {
+      return;
+    }
+
+    this.options.input.value = suggestion.value;
+    this.close();
+    void this.options.commit(suggestion.value);
+  }
+
+  private moveActive(offset: number): void {
+    if (this.suggestions.length === 0) {
+      return;
+    }
+
+    this.activeIndex =
+      this.activeIndex < 0
+        ? offset > 0
+          ? 0
+          : this.suggestions.length - 1
+        : (this.activeIndex + offset + this.suggestions.length) % this.suggestions.length;
+    this.options.input.setAttribute("aria-activedescendant", `${this.optionIdPrefix}-${this.activeIndex}`);
+    this.render();
+    document.getElementById(`${this.optionIdPrefix}-${this.activeIndex}`)?.scrollIntoView({ block: "nearest" });
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!this.openState) {
+        this.open();
+      }
+      this.moveActive(event.key === "ArrowDown" ? 1 : -1);
+      return;
+    }
+
+    if (event.key === "Escape" && this.openState) {
+      event.preventDefault();
+      this.close();
+      return;
+    }
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      if (this.openState && this.activeIndex >= 0) {
+        this.choose(this.activeIndex);
+      } else {
+        this.close();
+        void this.options.commit(this.options.input.value);
+      }
+    }
+  }
+}