@svgrid/enterprise 3.0.1 → 3.0.3

package/dist/SvSheet.svelte.d.ts

@@ -0,0 +1,215 @@
+/**
+   * The spreadsheet shell: everything between the ribbon and the sheet tabs.
+   *
+   *   SvSheetRibbon      Home / Insert / Formulas / Data
+   *   SvFormulaBar       Name Box + fx, showing the RAW text of the active cell
+   *   SvGrid             A..Z column headers over the built-in 1..N gutter
+   *   SvSheetTabs        sheet tabs
+   *   status bar         Sum / Average / Count of the selection, as Excel has
+   *
+   * Composition, not a second grid. Every part here already existed and was
+   * being re-assembled by hand in four separate demos; the value of the
+   * component is that the wiring BETWEEN them is done once and correctly -
+   * the formula bar shows the raw text rather than the computed value, the
+   * format store is keyed by row id so sorting cannot strand formatting, the
+   * ribbon and the keyboard run the same actions, and the tab strip is told
+   * when a shortcut moved the active sheet.
+   *
+   *   <SvSheet workbook={wb} />
+   *
+   * That is the whole required API. Everything else is opt-out.
+   */
+import { type SvGridApi, type TableFeatures } from '@svgrid/grid';
+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
+ * letter, as well as its position.
+ *
+ * It would be tempting to keep the values only in the workbook and let the
+ * cell snippet read them, since the snippet is what paints. That does not
+ * work, and not only for rendering: the grid's own machinery reads
+ * `row[field]`, so an empty row object means `cmd.getCellValue` returns
+ * undefined for every cell, and then Ctrl+Arrow thinks the sheet is blank,
+ * AutoSum finds no run to total, and the inline editor has nothing to open
+ * on. The workbook stays authoritative; this is its projection.
+ */
+type SheetRow = {
+    id: string;
+    index: number;
+} & Record<string, string | number>;
+type SheetApi = SvGridApi<TableFeatures, SheetRow>;
+type Props = {
+    /**
+     * The document to edit: the workbook plus everything a sheet keeps beside
+     * its cells (formats, sizes, hidden lines, frozen panes, comments). Build
+     * one with `createSheetDocument` to save it, restore it or listen to it
+     * outside the component; without it the shell makes its own from
+     * `workbook` or `data` and hands it back through `onReady`.
+     */
+    document?: SheetDocument;
+    /** The workbook to edit. One is created from `data` when absent. */
+    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;
+    /**
+     * Grid viewport height in pixels, or `'100%'` to fill the parent.
+     *
+     * The chrome around the grid - ribbon, formula bar, tabs, status bar -
+     * is about 290px tall, so a fixed grid height is a fixed component
+     * height with that added on. In a flex column that is too tall for the
+     * space, the tab strip is what gets pushed under whatever comes next.
+     * With `'100%'` the component is a flex item that fills its column and
+     * the grid takes whatever the chrome leaves.
+     */
+    height?: number | '100%';
+    /** Default column width. */
+    columnWidth?: number;
+    /** Row height in pixels. Excel's is 20 at 100%; 22 fits the grid's 13px font. */
+    rowHeight?: number;
+    /**
+     * `theme` (the default) paints the shell with the host's `--sg-*`
+     * tokens, so it follows whatever theme the app around it runs, as the
+     * grid does. `excel` pins Excel's own palette and geometry, light or
+     * dark with the page, for an app that wants it to read as Excel
+     * whatever the theme.
+     */
+    look?: 'excel' | 'theme';
+    /**
+     * Per-column overrides, keyed by column letter: `{ A: 150 }`.
+     *
+     * A sheet's first column usually holds labels and the rest hold numbers,
+     * so one width for all of them truncates the only column that needs the
+     * room. Columns stay drag-resizable either way.
+     */
+    columnWidths?: Readonly<Record<string, number>>;
+    /**
+     * Cell formats to start with, keyed by A1 address: `{ B2: { bold: true },
+     * 'E13': { numFmt: '0.0%' } }`.
+     *
+     * A bare address formats the sheet that is active when the shell mounts.
+     * Qualify it to reach another sheet, the way a formula would:
+     * `{ 'Orders!F2': { numFmt: '$#,##0.00' }, "'Price list'!C2": ... }`.
+     * Formats are per sheet, as they are in Excel; a fill on Summary!C5 says
+     * nothing about Orders!C5.
+     *
+     * Without this the sheet can only be formatted by hand after it loads,
+     * which makes it impossible to ship a document that opens looking the way
+     * it was saved. Applied once at mount; after that the stores own it.
+     */
+    formats?: Readonly<Record<string, CellFormatEntry>>;
+    /**
+     * 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;
+    showTabs?: boolean;
+    showStatusBar?: boolean;
+    /**
+     * Every action the ribbon, the cell menu, the formula bar and the
+     * shortcuts raise. The shell has a dialog of its own for Find and
+     * Replace, Paste Special, Format Cells and Insert Function; a handler
+     * that returns `true` has taken the action over and the shell's dialog
+     * 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
+     * size, a hidden line, a frozen pane, a sheet, a comment, or a structural
+     * edit. Called once per tick with every reason since the last call, so a
+     * paste of forty cells is one call; the natural place for an autosave
+     * (`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

@@ -0,0 +1,283 @@
+<script lang="ts">
+  /**
+   * 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, 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
+    /** 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 { 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(() => {
+      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)) 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" 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>
+  .sv-sheet-comment {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    width: 260px;
+    padding: 8px;
+    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: 40px;
+    padding: 6px 8px;
+    font: inherit;
+    line-height: 1.4;
+    color: inherit;
+    background: var(--sg-bg, #fff);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 3px;
+  }
+  textarea:focus-visible {
+    outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #107c41));
+    outline-offset: -1px;
+  }
+</style>

package/dist/SvSheetComment.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { CommentThread } from './sheet/comments.js';
+type Props = {
+    /** 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;
+    /** 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>;
+export default SvSheetComment;