@svgrid/enterprise 3.0.2 → 3.1.0

package/dist/SvSheet.svelte.d.ts

@@ -24,6 +24,10 @@ import type { GridCommandContext } from '@svgrid/grid/shortcuts';
 import type { Workbook, SheetData } from './sheet/workbook.js';
 import { type SheetDocument, type SheetState, type SheetChangeReason } from './sheet/document.js';
 import { type CellFormatEntry } from './sheet/format-store.js';
+import { type SheetPresence } from './sheet/presence.js';
+import { type SheetLocalization } from './sheet/messages.js';
+import { type GridSheetSpec } from './sheet/sheet-kinds.js';
+import { type Rect } from './sheet/rects.js';
 import type { RibbonActionId } from './sheet/ribbon.js';
 /**
  * A grid row carries the RAW text of every cell on it, keyed by column
@@ -55,6 +59,15 @@ type Props = {
     workbook?: Workbook;
     /** Seed sheets, when not supplying a workbook. */
     data?: ReadonlyArray<SheetData>;
+    /**
+     * Tabs that are a bound table rather than a cell grid, by name.
+     *
+     * Each one keeps records instead of cells and renders as a grid, and
+     * its records are projected into the workbook's cells, so
+     * `=SUM(Orders!D2:D99)` on a cell tab reads it like any other sheet.
+     * A name here that `data` does not list is added as a new tab.
+     */
+    gridSheets?: Record<string, GridSheetSpec>;
     /** Minimum grid size, so a sparse sheet still looks like a sheet. */
     rows?: number;
     columns?: number;
@@ -105,11 +118,27 @@ type Props = {
      */
     formats?: Readonly<Record<string, CellFormatEntry>>;
     /**
-     * Ribbon buttons the shell has nothing behind: Insert > Table and
-     * Insert > Chart. Left off unless listed here, which says the
-     * application answers them in `onAction`.
+     * Kept for the applications that passed it: the shell answers Insert >
+     * Table and Insert > Chart itself now, so nothing has to be listed
+     * here. An application that wants its own can still take either over
+     * through `onAction`.
+     *
+     * @deprecated Both buttons are always on.
      */
     extras?: ReadonlyArray<'insert-table' | 'insert-chart'>;
+    /**
+     * The shell's language: `text` overrides any of its strings (the
+     * ribbon's, the dialogs', the status bar's; see `SheetMessages`) and
+     * `locale` formats the status bar's numbers and the grid's own
+     * matching. Unset keys stay English, so a partial map is fine.
+     */
+    localization?: SheetLocalization;
+    /**
+     * Who signs a comment: the name a new comment and a reply carry, the
+     * way Excel signs a threaded comment with the signed-in user. Unset,
+     * a new comment is a plain note and a reply carries its time alone.
+     */
+    commentAuthor?: string;
     /** Hide any part of the chrome. */
     showRibbon?: boolean;
     showFormulaBar?: boolean;
@@ -123,6 +152,17 @@ type Props = {
      * stays closed, so an application can put its own in their place.
      */
     onAction?: (action: RibbonActionId, cmd: GridCommandContext) => void | boolean;
+    /**
+     * A button drawn in a cell was pressed. `action` is the region's own
+     * `action`, or its id when it has none, so a sheet can tell one column
+     * of buttons from another.
+     */
+    onCellAction?: (event: {
+        row: number;
+        col: number;
+        action: string;
+        sheet: string;
+    }) => void;
     onReady?: (api: SheetApi, document: SheetDocument) => void;
     /**
      * Something the user did landed in the document: a cell, a format, a
@@ -132,11 +172,44 @@ type Props = {
      * (`getState()`, debounced). Undo and redo report too.
      */
     onChange?: (reasons: ReadonlyArray<SheetChangeReason>) => void;
+    /**
+     * Other people on this workbook: each one's sheet, selection, name and
+     * colour, drawn over the cells as a coloured box with a tag.
+     *
+     * Presence is not part of the document and is never saved: a cursor
+     * belongs to a session. It comes in as a prop so the transport stays
+     * the application's, and `createDeltaStream` carries it for an
+     * application that wants one wire for both.
+     */
+    presence?: ReadonlyArray<SheetPresence>;
+    /**
+     * Where THIS user is, every time it moves: the sheet, the selection and
+     * the active cell. What an application broadcasts as its own presence.
+     */
+    onPresence?: (me: {
+        sheet: string;
+        rect: Rect;
+        active: {
+            row: number;
+            col: number;
+        };
+    }) => void;
 };
 declare const SvSheet: import("svelte").Component<Props, {
     getState: () => SheetState;
     setState: (state: SheetState) => void;
+    open: (file: Blob & {
+        name?: string;
+    }) => Promise<void>;
+    toXlsx: () => Promise<Blob>;
+    toOds: () => Promise<Blob>;
+    toXls: () => Blob;
+    toCsv: () => string;
+    printHtml: () => string;
+    print: () => void;
+    newWorkbook: () => void;
     refresh: () => void;
+    act: (action: RibbonActionId) => void;
 }, "">;
 type SvSheet = ReturnType<typeof SvSheet>;
 export default SvSheet;

package/dist/SvSheetChartSetup.svelte

@@ -0,0 +1,151 @@
+<script lang="ts">
+  /**
+   * Excel's Chart Design tab, as the one dialog the sheet needs: the chart
+   * type, its title, whether the range's first row and column are labels,
+   * whether a series is a column of the range or a row, and stacking.
+   * Opened by a double-click on a chart or by Chart Setup on the ribbon
+   * while one is selected. Delete removes the chart.
+   */
+  import { useSheetText } from './sheet-text'
+  import { SvModal } from '@svgrid/grid'
+  import {
+    SHEET_CHART_TYPES, SHEET_CHART_TRENDS, copyObject,
+    type SheetChartObject, type SheetChartType, type SheetChartTrend,
+  } from './sheet/objects'
+  import { colToLetters } from './sheet/address'
+
+  type Props = {
+    open?: boolean
+    /** The chart as it stands. */
+    chart: SheetChartObject
+    /**
+     * The series it is drawing, by the labels the range gives them: what
+     * the secondary-axis list offers. The dialog has the chart, not the
+     * cells, so the shell reads them off the drawing.
+     */
+    seriesLabels?: ReadonlyArray<string>
+    onApply: (chart: SheetChartObject) => void
+    onDelete: () => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), chart, seriesLabels = [], onApply, onDelete, onClose }: Props = $props()
+  const t = useSheetText()
+
+  let type = $state<SheetChartType>('bar')
+  let title = $state('')
+  let headers = $state(true)
+  let series = $state<'columns' | 'rows'>('columns')
+  let stacked = $state(false)
+  let trend = $state<SheetChartTrend | ''>('')
+  let secondary = $state('')
+  let first = $state<HTMLSelectElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    type = chart.type
+    title = chart.title ?? ''
+    headers = chart.headers
+    series = chart.series
+    stacked = Boolean(chart.stacked)
+    trend = chart.trend ?? ''
+    secondary = chart.secondary ?? ''
+    queueMicrotask(() => first?.focus())
+  })
+
+  const rangeText = $derived.by(() => {
+    const [r1, c1, r2, c2] = chart.range
+    return `${colToLetters(c1)}${r1 + 1}:${colToLetters(c2)}${r2 + 1}`
+  })
+  /** Stacking means nothing on a pie or a scatter. */
+  const stackable = $derived(type === 'bar' || type === 'area' || type === 'line')
+  /** A pie has one axis and no trend to draw over it. */
+  const twoAxes = $derived(type !== 'pie')
+
+  function ok() {
+    const next = copyObject(chart) as SheetChartObject
+    next.type = type
+    next.headers = headers
+    next.series = series
+    if (title.trim()) next.title = title.trim()
+    else delete next.title
+    if (stacked && stackable) next.stacked = true
+    else delete next.stacked
+    // A pie has one axis and no line to trend, so neither setting survives
+    // a change to one: keeping a hidden setting is how a dialog lies.
+    if (trend && twoAxes) next.trend = trend
+    else delete next.trend
+    // A second axis means nothing on a pie, and nothing for a series that
+    // is no longer there.
+    if (secondary && twoAxes && seriesLabels.includes(secondary)) next.secondary = secondary
+    else delete next.secondary
+    open = false
+    onApply(next)
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} title={t('chartSetup.title')} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <div class="where">{t('chartSetup.range', { range: rangeText })}</div>
+    <label class="field">
+      <span>{t('chartSetup.type')}</span>
+      <select bind:this={first} bind:value={type}>
+        {#each SHEET_CHART_TYPES as kind (kind)}<option value={kind}>{t(`chartSetup.type.${kind}`)}</option>{/each}
+      </select>
+    </label>
+    <label class="field">
+      <span>{t('chartSetup.chartTitle')}</span>
+      <input type="text" bind:value={title} spellcheck="false" placeholder={t('chartSetup.titlePlaceholder')} />
+    </label>
+    <label class="field">
+      <span>{t('chartSetup.series')}</span>
+      <select bind:value={series}>
+        <option value="columns">{t('chartSetup.series.columns')}</option>
+        <option value="rows">{t('chartSetup.series.rows')}</option>
+      </select>
+    </label>
+    {#if twoAxes}
+      <label class="field">
+        <span>{t('chartSetup.trend')}</span>
+        <select bind:value={trend}>
+          <option value="">{t('chartSetup.trend.none')}</option>
+          {#each SHEET_CHART_TRENDS as kind (kind)}<option value={kind}>{t(`chartSetup.trend.${kind}`)}</option>{/each}
+        </select>
+      </label>
+      {#if seriesLabels.length > 1}
+        <label class="field">
+          <span>{t('chartSetup.secondary')}</span>
+          <select bind:value={secondary}>
+            <option value="">{t('chartSetup.secondary.none')}</option>
+            {#each seriesLabels as label (label)}<option value={label}>{label}</option>{/each}
+          </select>
+        </label>
+      {/if}
+    {/if}
+    <div class="checks">
+      <label class="check"><input type="checkbox" bind:checked={headers} /> {t('chartSetup.headers')}</label>
+      {#if stackable}
+        <label class="check"><input type="checkbox" bind:checked={stacked} /> {t('chartSetup.stacked')}</label>
+      {/if}
+    </div>
+    <p class="hint">{t('chartSetup.hint')}</p>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn" onclick={() => { open = false; onDelete() }}>{t('delete')}</button>
+      <span class="spacer"></span>
+      <button type="button" class="btn primary" onclick={ok}>{t('ok')}</button>
+      <button type="button" class="btn" onclick={close}>{t('cancel')}</button>
+    </div>
+  {/snippet}
+</SvModal>
+
+<style>
+  .spacer { flex: 1; }
+</style>

package/dist/SvSheetChartSetup.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type SheetChartObject } from './sheet/objects.js';
+type Props = {
+    open?: boolean;
+    /** The chart as it stands. */
+    chart: SheetChartObject;
+    /**
+     * The series it is drawing, by the labels the range gives them: what
+     * the secondary-axis list offers. The dialog has the chart, not the
+     * cells, so the shell reads them off the drawing.
+     */
+    seriesLabels?: ReadonlyArray<string>;
+    onApply: (chart: SheetChartObject) => void;
+    onDelete: () => void;
+    onClose?: () => void;
+};
+declare const SvSheetChartSetup: import("svelte").Component<Props, {}, "open">;
+type SvSheetChartSetup = ReturnType<typeof SvSheetChartSetup>;
+export default SvSheetChartSetup;

package/dist/SvSheetComment.svelte

@@ -1,62 +1,201 @@
 <script lang="ts">
   /**
-   * The comment editor: Excel's note box, opened by New Comment, Edit
-   * Comment, Shift+F2 and the cell menu. A textarea over the text, Save,
-   * and Delete when there is something to delete. As in Excel the text is
-   * kept whatever closes the box: Escape and a click elsewhere save what
-   * was typed, which is why every keystroke is reported through `onDraft`
-   * and the shell saves the draft on dismissal. Ctrl+Enter saves too.
-   * The shell mounts it inside the popover anchored to the cell.
+   * The comment box: Excel's note editor for a new comment, and its
+   * threaded comment card once one is there. New: a textarea over the
+   * text, Save, and the text kept whatever closes the box (Escape and a
+   * click elsewhere included), which is why every keystroke is reported
+   * through `onDraft` and the shell saves the draft on dismissal;
+   * Ctrl+Enter saves too. Existing: the first entry with its author and
+   * time, the replies under it, Edit and Delete on each, a reply box,
+   * and Resolve / Reopen in the head. Replies, edits and the resolved
+   * state go out whole through `onUpdate`; the first text through
+   * `onSave`, as before; Delete removes the thread. The shell mounts it
+   * inside the popover anchored to the cell.
    */
+  import { useSheetText } from './sheet-text'
+  import type { CommentThread, CommentEntry } from './sheet/comments'
+
   type Props = {
-    /** The comment as it is, empty for a new one. */
+    /** The comment as it is, null for a new one. */
+    thread: CommentThread | null
+    /** The first text as it stands, the draft the box opens on. */
     text: string
     /** A1 of the cell, for the heading. */
     address: string
-    /** Every change of the text, so the shell can keep it on dismissal. */
+    /** Who signs a reply, when the application says. */
+    author?: string
+    /** For the times. */
+    locale?: string
+    /** Every change of the first text, so the shell can keep it on dismissal. */
     onDraft: (text: string) => void
     onSave: (text: string) => void
     onDelete: () => void
+    /** A reply, an edited or deleted reply, or Resolve / Reopen: the whole thread as it should be. */
+    onUpdate: (thread: CommentThread) => void
   }
 
-  let { text, address, onDraft, onSave, onDelete }: Props = $props()
+  let { thread, text, address, author, locale, onDraft, onSave, onDelete, onUpdate }: Props = $props()
+  const t = useSheetText()
 
   let draft = $state('')
+  let editingRoot = $state(false)
+  let reply = $state('')
+  let editingReply = $state<number | null>(null)
+  let replyDraft = $state('')
   let box = $state<HTMLTextAreaElement | null>(null)
+  let replyBox = $state<HTMLTextAreaElement | null>(null)
 
   $effect(() => {
     draft = text
+    editingRoot = false
+    editingReply = null
+    reply = ''
     queueMicrotask(() => {
-      if (!box) return
-      box.focus()
-      box.setSelectionRange(box.value.length, box.value.length)
+      const target = thread ? replyBox : box
+      if (!target) return
+      target.focus()
+      target.setSelectionRange(target.value.length, target.value.length)
     })
   })
 
+  const composing = $derived(!thread || editingRoot)
+
+  function when(at: string | undefined): string {
+    if (!at) return ''
+    const ms = Date.parse(at)
+    if (!Number.isFinite(ms)) return ''
+    try {
+      return new Date(ms).toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'short' })
+    } catch {
+      return new Date(ms).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })
+    }
+  }
+
+  const stamp = (): Pick<CommentEntry, 'author' | 'at'> => ({ ...(author ? { author } : {}), at: new Date().toISOString() })
+
+  function saveRoot() {
+    editingRoot = false
+    onSave(draft)
+  }
+
+  function postReply() {
+    const body = reply.trim()
+    if (!thread || !body) return
+    onUpdate({ ...thread, replies: [...(thread.replies ?? []), { text: body, ...stamp() }] })
+    reply = ''
+  }
+
+  function saveReply(index: number) {
+    if (!thread) return
+    const body = replyDraft.trim()
+    const replies = (thread.replies ?? []).map((r, i) => (i === index ? { ...r, text: body } : r)).filter((r) => r.text)
+    editingReply = null
+    onUpdate({ ...thread, replies })
+  }
+
+  function deleteReply(index: number) {
+    if (!thread) return
+    onUpdate({ ...thread, replies: (thread.replies ?? []).filter((_, i) => i !== index) })
+  }
+
+  function setResolved(resolved: boolean) {
+    if (!thread) return
+    const next = { ...thread }
+    if (resolved) next.resolved = true
+    else delete next.resolved
+    onUpdate(next)
+  }
+
   function onKeyDown(event: KeyboardEvent) {
-    if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) { event.preventDefault(); onSave(draft) }
+    if (event.key !== 'Enter' || !(event.ctrlKey || event.metaKey)) return
+    event.preventDefault()
+    const target = event.target
+    if (target === replyBox) postReply()
+    else if (editingReply !== null) saveReply(editingReply)
+    else if (composing) saveRoot()
   }
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div class="sv-sheet-comment" role="dialog" aria-label="Comment on {address}" onkeydown={onKeyDown}>
-  <div class="head">{address}</div>
-  <textarea
-    bind:this={box}
-    bind:value={draft}
-    oninput={() => onDraft(draft)}
-    rows="4"
-    aria-label="Comment"
-    placeholder="Type a comment"
-    spellcheck="false"
-  ></textarea>
-  <div class="sv-sheet-dialog-buttons">
-    <span class="keys">Ctrl+Enter saves</span>
-    <button type="button" class="btn primary" onclick={() => onSave(draft)}>Save</button>
-    {#if text}
-      <button type="button" class="btn" onclick={onDelete}>Delete</button>
+<div class="sv-sheet-comment" class:threaded={!!thread} role="dialog" tabindex="-1" aria-label={t('commentOn', { address })} onkeydown={onKeyDown}>
+  <div class="head">
+    <span>{address}</span>
+    {#if thread}
+      {#if thread.resolved}
+        <span class="badge">{t('commentResolved')}</span>
+        <button type="button" class="link" onclick={() => setResolved(false)}>{t('commentReopen')}</button>
+      {:else}
+        <button type="button" class="link" onclick={() => setResolved(true)}>{t('commentResolve')}</button>
+      {/if}
     {/if}
   </div>
+  {#if composing}
+    <textarea
+      bind:this={box}
+      bind:value={draft}
+      oninput={() => onDraft(draft)}
+      rows="4"
+      aria-label={t('comment')}
+      placeholder={t('commentPlaceholder')}
+      spellcheck="false"
+    ></textarea>
+    <div class="sv-sheet-dialog-buttons">
+      <span class="keys">{t('commentSaves')}</span>
+      <button type="button" class="btn primary" onclick={saveRoot}>{t('save')}</button>
+      {#if thread}
+        <button type="button" class="btn" onclick={() => { draft = text; onDraft(text); editingRoot = false }}>{t('cancel')}</button>
+      {:else if text}
+        <button type="button" class="btn" onclick={onDelete}>{t('delete')}</button>
+      {/if}
+    </div>
+  {:else if thread}
+    <div class="entry root">
+      <div class="who">
+        {#if thread.author}<span class="author">{thread.author}</span>{/if}
+        {#if thread.at}<span class="when">{when(thread.at)}</span>{/if}
+      </div>
+      <div class="text">{thread.text}</div>
+      <div class="actions">
+        <button type="button" class="link" onclick={() => { editingRoot = true; queueMicrotask(() => box?.focus()) }}>{t('commentEdit')}</button>
+        <button type="button" class="link" onclick={onDelete}>{t('delete')}</button>
+      </div>
+    </div>
+    {#each thread.replies ?? [] as entry, i (i)}
+      <div class="entry reply">
+        <div class="who">
+          {#if entry.author}<span class="author">{entry.author}</span>{/if}
+          {#if entry.at}<span class="when">{when(entry.at)}</span>{/if}
+        </div>
+        {#if editingReply === i}
+          <textarea bind:value={replyDraft} rows="3" aria-label={t('commentReply')} spellcheck="false"></textarea>
+          <div class="actions">
+            <button type="button" class="link" onclick={() => saveReply(i)}>{t('save')}</button>
+            <button type="button" class="link" onclick={() => (editingReply = null)}>{t('cancel')}</button>
+          </div>
+        {:else}
+          <div class="text">{entry.text}</div>
+          <div class="actions">
+            <button type="button" class="link" onclick={() => { editingReply = i; replyDraft = entry.text }}>{t('commentEdit')}</button>
+            <button type="button" class="link" onclick={() => deleteReply(i)}>{t('delete')}</button>
+          </div>
+        {/if}
+      </div>
+    {/each}
+    {#if !thread.resolved}
+      <textarea
+        bind:this={replyBox}
+        bind:value={reply}
+        rows="2"
+        aria-label={t('commentReply')}
+        placeholder={t('commentReplyPlaceholder')}
+        spellcheck="false"
+      ></textarea>
+      <div class="sv-sheet-dialog-buttons">
+        <span class="keys">{t('commentPosts')}</span>
+        <button type="button" class="btn primary" onclick={postReply} disabled={!reply.trim()}>{t('commentReply')}</button>
+      </div>
+    {/if}
+  {/if}
 </div>
 
 <style>
@@ -69,20 +208,66 @@
     font-size: 12px;
     color: var(--sg-fg, #242424);
   }
+  .sv-sheet-comment.threaded {
+    width: 300px;
+    max-height: 360px;
+    overflow-y: auto;
+  }
   .head {
+    display: flex;
+    align-items: center;
+    gap: 8px;
     font-weight: 600;
     color: var(--sg-muted, #616161);
   }
+  .head .link { margin-left: auto; }
+  .badge {
+    padding: 1px 6px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--sg-on-accent, #fff);
+    background: var(--sg-accent, #107c41);
+    border-radius: 9px;
+  }
   .keys {
     margin-right: auto;
     font-size: 11px;
     color: var(--sg-muted, #616161);
   }
+  .entry {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+    padding: 6px 0;
+    border-top: 1px solid var(--sg-border, #e5e5e5);
+  }
+  .entry.root { border-top: 0; padding-top: 0; }
+  .entry.reply { padding-left: 12px; }
+  .who {
+    display: flex;
+    gap: 8px;
+    align-items: baseline;
+    font-size: 11px;
+    color: var(--sg-muted, #616161);
+  }
+  .author { font-weight: 600; color: var(--sg-fg, #242424); }
+  .text { white-space: pre-wrap; overflow-wrap: anywhere; }
+  .actions { display: flex; gap: 10px; }
+  .link {
+    padding: 0;
+    font: inherit;
+    font-size: 11px;
+    color: var(--sg-accent, #107c41);
+    background: none;
+    border: 0;
+    cursor: pointer;
+  }
+  .link:hover { text-decoration: underline; }
   textarea {
     width: 100%;
     box-sizing: border-box;
     resize: vertical;
-    min-height: 64px;
+    min-height: 40px;
     padding: 6px 8px;
     font: inherit;
     line-height: 1.4;

package/dist/SvSheetComment.svelte.d.ts

@@ -1,21 +1,21 @@
-/**
- * The comment editor: Excel's note box, opened by New Comment, Edit
- * Comment, Shift+F2 and the cell menu. A textarea over the text, Save,
- * and Delete when there is something to delete. As in Excel the text is
- * kept whatever closes the box: Escape and a click elsewhere save what
- * was typed, which is why every keystroke is reported through `onDraft`
- * and the shell saves the draft on dismissal. Ctrl+Enter saves too.
- * The shell mounts it inside the popover anchored to the cell.
- */
+import type { CommentThread } from './sheet/comments.js';
 type Props = {
-    /** The comment as it is, empty for a new one. */
+    /** The comment as it is, null for a new one. */
+    thread: CommentThread | null;
+    /** The first text as it stands, the draft the box opens on. */
     text: string;
     /** A1 of the cell, for the heading. */
     address: string;
-    /** Every change of the text, so the shell can keep it on dismissal. */
+    /** Who signs a reply, when the application says. */
+    author?: string;
+    /** For the times. */
+    locale?: string;
+    /** Every change of the first text, so the shell can keep it on dismissal. */
     onDraft: (text: string) => void;
     onSave: (text: string) => void;
     onDelete: () => void;
+    /** A reply, an edited or deleted reply, or Resolve / Reopen: the whole thread as it should be. */
+    onUpdate: (thread: CommentThread) => void;
 };
 declare const SvSheetComment: import("svelte").Component<Props, {}, "">;
 type SvSheetComment = ReturnType<typeof SvSheetComment>;