@kupcad/ui 0.0.0-stage → 0.1.1

package/src/PreviewPanel.svelte

@@ -0,0 +1,372 @@
+<!--
+  @component
+  A language server's preview: the model of the document the host says it shows, as the
+  server's viewport socket sends it, with its parameters beside it. The panel's values go to the
+  host (a ViewerHost: the VS Code extension, the desktop app), which gives them to the server;
+  the frame that comes back is of a run with them. Why the run failed and what it warned of are
+  listed under the model: one with a line, clicked, is shown in the script's editor. The
+  document's presets are above its parameters: one applied, or the panel's values saved as one.
+  The console under the model keeps each run (what it printed, its warnings and its error) and
+  the host's log, as OpenSCAD's does. The parameters' column and the console are resized by the
+  bars beside them, and the column hidden by the toolbar's Parameters button (for the model's
+  width); their sizes, the column and the view's panel (the Panel button's) hidden or not, and
+  the console folded or not are kept in the host's `settings`, and follow them as they are set;
+  how the view looks too (the pane's view.* keys). A host's own shortcuts (`shortcuts`) are
+  listed before the viewer's in the dialog the pane's bottom bar opens (`shortcutsOpen`).
+-->
+<script>
+  import { onMount, untrack } from 'svelte';
+  import { errorText } from '@kupcad/protocol';
+  import ConsolePanel from './ConsolePanel.svelte';
+  import ExportMenu from './ExportMenu.svelte';
+  import { appendLines, linesOfLog, linesOfRun } from './console.js';
+  import { plainValues } from './values.svelte.js';
+  import ParamsPanel from './ParamsPanel.svelte';
+  import { memorySettings, sizeSetting } from './settings.js';
+  import Splitter from './Splitter.svelte';
+  import ViewerPane from './ViewerPane.svelte';
+  import { toBase64 } from './base64.js';
+  import { problemsOf, runStatusOf } from './run-status.js';
+  import { connectViewport } from './viewport-socket.js';
+
+  /** @import { ExportFormat, ParamValues, Preview, ShownDocument, ViewerHost } from '@kupcad/protocol/types' */
+  /** @import { ViewerOptions } from './viewer/types.js' */
+  /** @import { ConsoleLine } from './console.js' */
+  /** @import { Problem } from './run-status.js' */
+  /** @import { Settings } from './settings.js' */
+  /** @import { ShortcutGroup } from './shortcuts.js' */
+
+  /**
+   * @typedef {object} Props
+   * @property {ViewerHost} host
+   * @property {string | null} viewportUrl the language server's socket, once it is up
+   * @property {typeof connectViewport} [connect]
+   * @property {ViewerOptions} [viewerOptions] what the viewer is made with
+   * @property {boolean} [presets] whether the host keeps presets, which the panel then offers
+   * @property {boolean} [console] whether the console shows under the model
+   * @property {Settings} [settings] where the panes' sizes, and how the view looks, are kept; by
+   *   default the page's memory
+   * @property {readonly ShortcutGroup[]} [shortcuts] the host's own, listed before the viewer's
+   * @property {boolean} [shortcutsOpen] whether the shortcuts' dialog shows; bindable
+   */
+
+  /** @type {Props} */
+  let {
+    host,
+    viewportUrl,
+    connect = connectViewport,
+    viewerOptions = {},
+    presets: offersPresets = true,
+    console: showsConsole = true,
+    settings = memorySettings(),
+    shortcuts = [],
+    shortcutsOpen = $bindable(false),
+  } = $props();
+
+  /**
+   * The settings' keys: the parameters' width and whether they show, whether the view's panel
+   * shows, the console's height and whether it is open.
+   */
+  const KEYS = {
+    params: 'preview.params',
+    paramsOpen: 'preview.paramsOpen',
+    panelOpen: 'preview.panelOpen',
+    console: 'preview.console',
+    open: 'preview.consoleOpen',
+  };
+  const id = $props.id();
+  // As the settings have them; a size dragged is the pane's own until the drag is done
+  let paramsWidth = $derived(sizeSetting(settings, KEYS.params, 288));
+  const paramsOpen = $derived(settings.get(KEYS.paramsOpen) !== false);
+  const panelOpen = $derived(settings.get(KEYS.panelOpen) !== false);
+  let consoleHeight = $derived(sizeSetting(settings, KEYS.console, 144));
+  const consoleOpen = $derived(settings.get(KEYS.open) !== false);
+
+  let shown = $state(/** @type {ShownDocument | null} */ (null));
+  let preview = $state(/** @type {Preview | null} */ (null));
+  let connected = $state(false);
+  let overrides = $state(/** @type {ParamValues} */ ({}));
+  let presets = $state(/** @type {string[]} */ ([]));
+  /** Why the viewer can't show the frame's model, until the next frame. */
+  let unshown = $state('');
+  let consoleLines = $state(/** @type {ConsoleLine[]} */ ([]));
+  /** The header of the run the console has last: a frame sent again is the same run. */
+  let lastRun = '';
+
+  const header = $derived(preview?.header ?? null);
+  /** How the shown document's run went, for the pane's status line. */
+  const run = $derived(shown ? runStatusOf(header) : null);
+  const problems = $derived(problemsOf(header));
+  const parameters = $derived(header?.params.schema.parameters ?? []);
+  const status = $derived(statusOf());
+
+  function statusOf() {
+    if (!viewportUrl) return 'Waiting for the KupCAD language server…';
+    if (!connected) return 'Connecting to the language server…';
+    if (!shown) return 'Open a .kup file to see its model.';
+    if (!preview) return `Running ${shown.name}…`;
+    if (unshown) return `The model can't be shown: ${unshown}`;
+    return null;
+  }
+
+  onMount(() => {
+    const stopListening = host.listen((message) => {
+      // The host holds the values and presets of every document: it says the shown one's
+      // with each document, and again when they change
+      if (message.type === 'log') {
+        consoleLines = appendLines(consoleLines, linesOfLog(message.text));
+      } else if (message.type === 'document') {
+        if (message.document?.uri !== shown?.uri) preview = null;
+        shown = message.document;
+        overrides = {};
+        presets = [];
+      } else if (message.uri !== shown?.uri) {
+        return;
+      } else if (message.type === 'overrides') {
+        overrides = message.values;
+      } else {
+        presets = message.names;
+      }
+    });
+    return stopListening;
+  });
+
+  // The socket of the server up now: one started again (it ended) has another, and the panel
+  // keeps what it shows and its console across it
+  $effect(() => {
+    const url = viewportUrl;
+    if (!url) return;
+    const disconnect = untrack(() =>
+      connect(url, {
+        open: () => host.post({ type: 'ready' }),
+        state: (open) => (connected = open),
+        frame: (next) => {
+          // The socket sends every viewer the frame of the document the server shows: one of
+          // another (late, or with none shown here) isn't this page's
+          if (!shown || next.header.document !== shown.uri) return;
+          preview = next;
+          unshown = '';
+          const thisRun = JSON.stringify(next.header);
+          if (thisRun !== lastRun) {
+            lastRun = thisRun;
+            consoleLines = appendLines(consoleLines, linesOfRun(next.header, shown.name));
+          }
+        },
+        problem: (message) => host.post({ type: 'problem', message }),
+      }),
+    );
+    return () => {
+      disconnect();
+      connected = false;
+    };
+  });
+
+  /** @param {ParamValues} values */
+  function changed(values) {
+    if (shown) host.post({ type: 'setParams', uri: shown.uri, values });
+  }
+
+  /** @param {Event & { currentTarget: HTMLSelectElement }} event */
+  function applyPreset(event) {
+    const name = event.currentTarget.value;
+    event.currentTarget.value = '';
+    if (shown && name) host.post({ type: 'applyPreset', uri: shown.uri, name });
+  }
+
+  function savePreset() {
+    if (shown) host.post({ type: 'savePreset', uri: shown.uri, values: plainValues(overrides) });
+  }
+
+  /**
+   * Asks the host to export the shown document in `format`, with its values.
+   * @param {ExportFormat} format
+   */
+  function exportShown(format) {
+    if (shown) host.post({ type: 'export', uri: shown.uri, format });
+  }
+
+  /**
+   * Asks the host to show the script where `problem` was, in its editor.
+   * @param {Problem} problem
+   */
+  function revealProblem(problem) {
+    if (!shown || problem.line === null) return;
+    host.post({ type: 'reveal', uri: shown.uri, line: problem.line, column: problem.column ?? 1 });
+  }
+
+  /**
+   * Shows the script where a console line names, in its editor.
+   * @param {ConsoleLine} line
+   */
+  function revealLine(line) {
+    if (!shown || line.line === null) return;
+    host.post({ type: 'reveal', uri: shown.uri, line: line.line, column: line.column ?? 1 });
+  }
+
+  /** @param {Blob} image */
+  async function screenshot(image) {
+    host.post({ type: 'screenshot', png: toBase64(new Uint8Array(await image.arrayBuffer())) });
+  }
+
+  /** @param {unknown} error the viewer's: a model it can't show */
+  function failed(error) {
+    unshown = errorText(error);
+    host.post({ type: 'problem', message: unshown });
+  }
+</script>
+
+<div class="kc-preview">
+  <section class="view">
+    <div class="model">
+      <ViewerPane
+        model={preview?.model ?? null}
+        subject={shown?.uri ?? null}
+        options={viewerOptions}
+        bind:panel={() => panelOpen, (open) => settings.set(KEYS.panelOpen, open)}
+        {settings}
+        {shortcuts}
+        bind:shortcutsOpen
+        status={run}
+        {problems}
+        onproblem={revealProblem}
+        onscreenshot={screenshot}
+        onerror={failed}
+      >
+        {#snippet actions()}
+          {#if shown}
+            <ExportMenu kind={preview?.model.kind ?? 'none'} onexport={exportShown} />
+          {/if}
+        {/snippet}
+        {#snippet toggles()}
+          {#if header && parameters.length > 0}
+            <button
+              type="button"
+              class="kc-control"
+              aria-controls="{id}-params"
+              aria-expanded={paramsOpen}
+              onclick={() => settings.set(KEYS.paramsOpen, !paramsOpen)}
+            >
+              Parameters
+            </button>
+          {/if}
+        {/snippet}
+      </ViewerPane>
+      {#if status}
+        <p class="notice">{status}</p>
+      {/if}
+    </div>
+    {#if showsConsole}
+      {#if consoleOpen}
+        <Splitter
+          between="rows"
+          pane="after"
+          bind:size={consoleHeight}
+          min={48}
+          label="Resize the console"
+          onchange={(size) => settings.set(KEYS.console, size)}
+        />
+      {/if}
+      <ConsolePanel
+        lines={consoleLines}
+        height={consoleHeight}
+        bind:open={() => consoleOpen, (open) => settings.set(KEYS.open, open)}
+        onreveal={revealLine}
+        onclear={() => (consoleLines = [])}
+      />
+    {/if}
+  </section>
+  {#if header && parameters.length > 0}
+    {#if paramsOpen}
+      <Splitter
+        pane="after"
+        bind:size={paramsWidth}
+        min={200}
+        max={640}
+        label="Resize the parameters"
+        onchange={(size) => settings.set(KEYS.params, size)}
+      />
+    {/if}
+    <!-- Hidden, not gone: what its fields hold stays, and the toggle has it to control -->
+    <aside
+      class="params"
+      id="{id}-params"
+      aria-label="Parameters"
+      hidden={!paramsOpen}
+      style:width="{paramsWidth}px"
+    >
+      {#if offersPresets}
+        <div class="presets">
+          <select
+            class="kc-control"
+            aria-label="Preset"
+            disabled={presets.length === 0}
+            onchange={applyPreset}
+          >
+            <option value="" selected disabled>
+              {presets.length > 0 ? 'Apply a preset…' : 'No presets'}
+            </option>
+            {#each presets as name (name)}
+              <option value={name}>{name}</option>
+            {/each}
+          </select>
+          <button type="button" class="kc-control" onclick={savePreset}>Save as preset…</button>
+        </div>
+      {/if}
+      <ParamsPanel
+        schema={header.params.schema}
+        values={header.params.values}
+        error={header.error}
+        bind:overrides
+        onchange={changed}
+      />
+    </aside>
+  {/if}
+</div>
+
+<style>
+  .kc-preview {
+    display: flex;
+    height: 100%;
+    background: var(--kc-bg);
+    font-family: var(--kc-font);
+    font-size: var(--kc-font-size);
+    color: var(--kc-fg);
+  }
+  .view {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-width: 0;
+  }
+  .model {
+    position: relative;
+    flex: 1;
+    min-height: 0;
+  }
+  /* No space at its top: the parameters' bar, held there as they scroll, has its own */
+  .params {
+    flex: none;
+    overflow: auto;
+    padding: 0 var(--kc-gap) var(--kc-gap);
+    border-left: 1px solid var(--kc-border);
+  }
+  .presets {
+    display: flex;
+    gap: 4px;
+    /* The column gives no space at its top */
+    padding-top: var(--kc-gap);
+    margin-bottom: var(--kc-gap);
+  }
+  .presets select {
+    flex: 1;
+    min-width: 0;
+  }
+  .notice {
+    position: absolute;
+    inset: 50% 0 auto;
+    margin: 0;
+    text-align: center;
+    color: var(--kc-muted);
+    pointer-events: none;
+  }
+</style>

package/src/ShortcutsDialog.svelte

@@ -0,0 +1,170 @@
+<!--
+  @component
+  The keys and the pointer's moves a person can't see on the screen, by group (a host's own, the
+  viewer's: `VIEWER_SHORTCUTS`), in a modal dialog while `open` (bindable). Escape or its close
+  button closes it, and the focus goes back to what had it when it opened.
+-->
+<script>
+  /** @import { ShortcutGroup } from './shortcuts.js' */
+
+  /**
+   * @typedef {object} Props
+   * @property {readonly ShortcutGroup[]} groups
+   * @property {boolean} [open] whether it shows; bindable
+   */
+
+  /** @type {Props} */
+  let { groups, open = $bindable(false) } = $props();
+
+  const id = $props.id();
+  /** @type {HTMLDialogElement} */
+  let dialog;
+  /** What had the focus when it opened, given it back when it closes. */
+  let before = /** @type {HTMLElement | null} */ (null);
+
+  $effect(() => {
+    if (open && !dialog.open) {
+      const active = document.activeElement;
+      before = active instanceof HTMLElement ? active : null;
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  });
+
+  /** It closed: by Escape, its button, or `open` set false. */
+  function closed() {
+    open = false;
+    before?.focus();
+    before = null;
+  }
+
+  /** @param {KeyboardEvent} event */
+  function keydown(event) {
+    // A browser's modal dialog closes on Escape by itself; a webview's may not
+    if (event.key !== 'Escape') return;
+    event.preventDefault();
+    dialog.close();
+  }
+</script>
+
+<dialog
+  class="kc-shortcuts"
+  aria-labelledby="{id}-title"
+  bind:this={dialog}
+  onclose={closed}
+  onkeydown={keydown}
+>
+  <header>
+    <h2 id="{id}-title">Keyboard shortcuts</h2>
+    <button type="button" class="close" aria-label="Close" onclick={() => dialog.close()}>
+      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" /></svg>
+    </button>
+  </header>
+  {#each groups as group, index (index)}
+    <section aria-labelledby="{id}-group-{index}">
+      <h3 id="{id}-group-{index}">{group.title}</h3>
+      {#if group.note}<p class="note">{group.note}</p>{/if}
+      <dl>
+        {#each group.keys as [keys, what], at (at)}
+          <div class="row">
+            <dt><kbd>{keys}</kbd></dt>
+            <dd>{what}</dd>
+          </div>
+        {/each}
+      </dl>
+    </section>
+  {/each}
+</dialog>
+
+<style>
+  .kc-shortcuts {
+    width: min(32em, calc(100vw - 32px));
+    max-height: calc(100vh - 64px);
+    padding: 16px 20px;
+    font-family: var(--kc-font);
+    font-size: var(--kc-font-size);
+    color: var(--kc-fg);
+    background: var(--kc-bg);
+    border: 1px solid var(--kc-border);
+    border-radius: calc(var(--kc-radius) * 2);
+  }
+  .kc-shortcuts::backdrop {
+    background: rgb(0 0 0 / 0.35);
+  }
+  header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+  h2 {
+    margin: 0;
+    font-size: 1.25em;
+  }
+  h3 {
+    margin: 12px 0 4px;
+    font-size: 1em;
+  }
+  .close {
+    display: grid;
+    place-items: center;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    color: var(--kc-muted);
+    background: none;
+    border: none;
+    border-radius: var(--kc-radius);
+    cursor: pointer;
+  }
+  .close:hover {
+    color: var(--kc-fg);
+    background: var(--kc-hover);
+  }
+  .close:focus-visible {
+    outline: 2px solid var(--kc-focus);
+    outline-offset: -2px;
+  }
+  .close svg {
+    width: 16px;
+    height: 16px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.75;
+    stroke-linecap: round;
+  }
+  .note {
+    margin: 0 0 4px;
+    color: var(--kc-muted);
+  }
+  /* The group's keys in a column as wide as its widest, what each does beside it: a row is
+     its two cells, a line under each */
+  dl {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+    margin: 0;
+  }
+  .row {
+    display: contents;
+  }
+  dt,
+  dd {
+    margin: 0;
+    padding: 3px 0;
+    border-bottom: 1px solid var(--kc-border);
+  }
+  dt {
+    padding-right: 16px;
+  }
+  kbd {
+    font-family: var(--kc-code-font, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+    font-size: 0.92em;
+    padding: 1px 5px;
+    color: var(--kc-section-fg);
+    background: var(--kc-section-bg);
+    border: 1px solid var(--kc-border);
+    border-radius: var(--kc-radius);
+    white-space: nowrap;
+  }
+</style>

package/src/Splitter.svelte

@@ -0,0 +1,148 @@
+<!--
+  @component
+  The bar between two panes, which resizes one of them: dragged, or with the arrow keys (by
+  16 px, 64 with Shift; Home and End for its least and most), and double-clicked back to the
+  size it started with. `size` (bindable) is the pane's width for a bar between columns, its
+  height for one between rows, in CSS pixels, kept between `min` and `max`; the pane is the one
+  before the bar or after it (`pane`). `onchange` gets the size once a drag or a key is done,
+  for the host to keep.
+-->
+<script>
+  import { untrack } from 'svelte';
+
+  /**
+   * @typedef {object} Props
+   * @property {number} size the pane's size; bindable
+   * @property {'columns' | 'rows'} [between] what the bar is between
+   * @property {'before' | 'after'} [pane] which pane it sizes: the one before it (left, above)
+   *   or after it
+   * @property {number} [min]
+   * @property {number} [max]
+   * @property {string} label what it resizes, for a screen reader
+   * @property {(size: number) => void} [onchange]
+   */
+
+  /** @type {Props} */
+  let {
+    size = $bindable(),
+    between = 'columns',
+    pane = 'before',
+    min = 120,
+    max = Number.POSITIVE_INFINITY,
+    label,
+    onchange,
+  } = $props();
+
+  /** A key's step, and with Shift. */
+  const STEP = 16;
+  const LONG_STEP = 64;
+  const first = untrack(() => size);
+  /** Where a drag started: the pointer, and the size then. */
+  let drag = $state(/** @type {{ at: number, from: number } | null} */ (null));
+
+  const clamp = (/** @type {number} */ value) =>
+    Math.round(Math.min(Math.max(value, min), Math.max(min, max)));
+  /** +1 when moving right (or down) grows the pane, -1 when it shrinks it. */
+  const sign = $derived(pane === 'before' ? 1 : -1);
+  const along = (/** @type {PointerEvent} */ event) =>
+    between === 'columns' ? event.clientX : event.clientY;
+
+  /** @param {number} next */
+  function settle(next) {
+    size = clamp(next);
+    onchange?.(size);
+  }
+
+  /** @param {PointerEvent & { currentTarget: HTMLElement }} event */
+  function down(event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    drag = { at: along(event), from: size };
+  }
+
+  /** @param {PointerEvent} event */
+  function move(event) {
+    if (drag) size = clamp(drag.from + sign * (along(event) - drag.at));
+  }
+
+  function up() {
+    if (!drag) return;
+    drag = null;
+    onchange?.(size);
+  }
+
+  /** @param {KeyboardEvent} event */
+  function key(event) {
+    const step = event.shiftKey ? LONG_STEP : STEP;
+    const [less, more] =
+      between === 'columns' ? ['ArrowLeft', 'ArrowRight'] : ['ArrowUp', 'ArrowDown'];
+    if (event.key === less) settle(size - sign * step);
+    else if (event.key === more) settle(size + sign * step);
+    else if (event.key === 'Home') settle(min);
+    else if (event.key === 'End' && Number.isFinite(max)) settle(max);
+    else return;
+    event.preventDefault();
+  }
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions (a focusable separator is ARIA's splitter, a widget) -->
+<div
+  class="kc-splitter {between}"
+  class:dragging={drag !== null}
+  role="separator"
+  tabindex="0"
+  aria-label={label}
+  aria-orientation={between === 'columns' ? 'vertical' : 'horizontal'}
+  aria-valuenow={size}
+  aria-valuemin={min}
+  aria-valuemax={Number.isFinite(max) ? max : undefined}
+  onpointerdown={down}
+  onpointermove={move}
+  onpointerup={up}
+  onpointercancel={up}
+  onkeydown={key}
+  ondblclick={() => settle(first)}
+></div>
+
+<style>
+  /* No room of its own: the panes keep their borders, and the bar lies over the one between
+     them, a grip wider than it, which shows its line when used */
+  .kc-splitter {
+    position: relative;
+    flex: none;
+    z-index: 1;
+    touch-action: none;
+    outline: none;
+  }
+  .columns {
+    width: 0;
+    cursor: col-resize;
+  }
+  .rows {
+    height: 0;
+    cursor: row-resize;
+  }
+  .kc-splitter::before,
+  .kc-splitter::after {
+    content: '';
+    position: absolute;
+  }
+  .columns::after {
+    inset: 0 -4px;
+  }
+  .rows::after {
+    inset: -4px 0;
+  }
+  .columns::before {
+    inset: 0 -1px;
+  }
+  .rows::before {
+    inset: -1px 0;
+  }
+  .kc-splitter:hover::before,
+  .kc-splitter:focus-visible::before,
+  .dragging::before {
+    background: var(--kc-accent);
+  }
+</style>