@svgrid/enterprise 3.0.1 → 3.0.2

package/dist/SvSheetRibbon.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { GridCommandContext } from '@svgrid/grid/shortcuts';
+import { type RibbonTab, type RibbonActionId } from './sheet/ribbon.js';
+type Props = {
+    /**
+     * How to reach the grid. A getter rather than the context itself because
+     * the context is rebuilt per call and the ribbon needs a live one at the
+     * moment a button is pressed, not the one that existed at mount.
+     */
+    cmd: () => GridCommandContext | null;
+    /** Called after any action that changed something, so the host re-renders. */
+    onChange?: () => void;
+    /** Actions the ribbon does not run itself, because they need chrome. */
+    onAction?: (action: RibbonActionId, cmd: GridCommandContext) => void;
+    /** Which of `onAction`'s toggles are currently on. The host owns that
+     *  state (there is no store here to read it from), so it reports it. */
+    activeActions?: ReadonlyArray<RibbonActionId>;
+    tabs?: ReadonlyArray<RibbonTab>;
+    /** Start on a tab other than the first. */
+    tab?: string;
+    /**
+     * Actions to leave off the ribbon: a button nobody answers is worse
+     * than no button. A group with nothing left in it goes too.
+     */
+    without?: ReadonlyArray<RibbonActionId>;
+    /**
+     * Excel's collapsed ribbon: the tabs alone. A click on a tab shows the
+     * band over the sheet until a command runs or the pointer leaves;
+     * double-clicking a tab, the chevron and Ctrl+F1 toggle it.
+     */
+    collapsed?: boolean;
+};
+declare const SvSheetRibbon: import("svelte").Component<Props, {}, "tab" | "collapsed">;
+type SvSheetRibbon = ReturnType<typeof SvSheetRibbon>;
+export default SvSheetRibbon;

package/dist/SvSheetSizeDialog.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  /**
+   * Excel's Column Width and Row Height boxes: one number, OK, Cancel. The
+   * shell opens it from the column letter's and the row number's menus and
+   * applies the size to every column or row the selection spans.
+   */
+  import { SvModal } from '@svgrid/grid'
+
+  type Props = {
+    open?: boolean
+    title: string
+    label: string
+    value: number
+    onApply: (px: number) => void
+    onClose?: () => void
+  }
+
+  let { open = $bindable(false), title, label, value, onApply, onClose }: Props = $props()
+
+  let draft = $state('')
+  let input = $state<HTMLInputElement | null>(null)
+
+  $effect(() => {
+    if (!open) return
+    draft = String(Math.round(value))
+    queueMicrotask(() => { input?.focus(); input?.select() })
+  })
+
+  const px = $derived(Number(draft))
+  const valid = $derived(Number.isFinite(px) && px >= 4 && px <= 2000)
+
+  function ok() {
+    if (!valid) return
+    onApply(Math.round(px))
+    open = false
+    onClose?.()
+  }
+
+  function close() {
+    open = false
+    onClose?.()
+  }
+</script>
+
+<SvModal bind:open onClose={onClose} {title} size="sm">
+  <form class="sv-sheet-dialog" onsubmit={(e) => { e.preventDefault(); ok() }}>
+    <label class="field auto">
+      <span>{label}</span>
+      <input bind:this={input} type="number" min="4" max="2000" bind:value={draft} />
+    </label>
+  </form>
+  {#snippet footer()}
+    <div class="sv-sheet-dialog-buttons">
+      <button type="button" class="btn primary" onclick={ok} disabled={!valid}>OK</button>
+      <button type="button" class="btn" onclick={close}>Cancel</button>
+    </div>
+  {/snippet}
+</SvModal>

package/dist/SvSheetSizeDialog.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    open?: boolean;
+    title: string;
+    label: string;
+    value: number;
+    onApply: (px: number) => void;
+    onClose?: () => void;
+};
+declare const SvSheetSizeDialog: import("svelte").Component<Props, {}, "open">;
+type SvSheetSizeDialog = ReturnType<typeof SvSheetSizeDialog>;
+export default SvSheetSizeDialog;

package/dist/SvSheetTabs.svelte

@@ -0,0 +1,441 @@
+<script lang="ts">
+  /**
+   * The sheet tab strip along the bottom of a workbook.
+   *
+   * Owns no workbook state of its own: it renders what the workbook reports
+   * and calls back, so the keyboard shortcuts and the tabs cannot disagree
+   * about which sheet is active.
+   */
+  import type { Workbook } from './sheet/workbook'
+  import { isValidSheetName } from './sheet/workbook'
+
+  type Props = {
+    workbook: Workbook
+    /** Called after any change, so the consumer can re-render. */
+    onChange?: () => void
+    /**
+     * Called after a sheet is renamed or removed, before `onChange`. Anything
+     * the consumer keeps per sheet and keys by name - the shell keeps a
+     * format store per sheet - has to follow the rename or drop the entry,
+     * and the workbook itself has no event for either.
+     */
+    onRename?: (from: string, to: string) => void
+    onRemove?: (name: string) => void
+    /** Off hides the add button and the context actions. */
+    editable?: boolean
+    /**
+     * Bump this whenever the workbook is mutated from OUTSIDE the strip - the
+     * Ctrl+PageUp/PageDown shortcuts, or app code calling `addSheet`.
+     *
+     * A `Workbook` is a plain object, not `$state`, so reading `workbook.sheets`
+     * creates no reactive dependency and the strip would otherwise render once
+     * and then show whatever the sheet list was at mount. Pass the same counter
+     * `onChange` increments.
+     */
+    version?: number
+  }
+
+  let { workbook, onChange, onRename, onRemove, editable = true, version = 0 }: Props = $props()
+
+  let renaming = $state<string | null>(null)
+  let draft = $state('')
+  let error = $state<string | null>(null)
+  let dragging = $state<string | null>(null)
+
+  // The strip's own mutations do not go through the consumer's counter, so it
+  // keeps one of its own and reads both.
+  let localVersion = $state(0)
+
+  const sheets = $derived.by(() => {
+    void version
+    void localVersion
+    return workbook.sheets
+  })
+  const activeSheet = $derived.by(() => {
+    void version
+    void localVersion
+    return workbook.active
+  })
+
+  function changed() {
+    localVersion += 1
+    onChange?.()
+  }
+
+  function select(name: string) {
+    workbook.setActive(name)
+    changed()
+  }
+
+  function startRename(name: string) {
+    if (!editable) return
+    renaming = name
+    draft = name
+    error = null
+  }
+
+  function commitRename() {
+    const from = renaming
+    if (from === null) return
+    const to = draft.trim()
+    renaming = null
+    if (to === '' || to === from) return
+    if (!isValidSheetName(to)) {
+      error = `"${to}" is not a valid sheet name`
+      return
+    }
+    if (!workbook.renameSheet(from, to)) {
+      error = `a sheet named "${to}" already exists`
+      return
+    }
+    error = null
+    onRename?.(from, to)
+    changed()
+  }
+
+  function add() {
+    workbook.addSheet()
+    changed()
+  }
+
+  function remove(name: string) {
+    // The workbook refuses to remove the last sheet; reflect that rather than
+    // showing a button that does nothing.
+    if (!workbook.removeSheet(name)) return
+    onRemove?.(name)
+    changed()
+  }
+
+  // ---- Excel's right-click menu on a tab ------------------------------------
+  let menu = $state<{ name: string; x: number; y: number } | null>(null)
+
+  function openMenu(event: MouseEvent, name: string) {
+    if (!editable) return
+    event.preventDefault()
+    select(name)
+    menu = { name, x: event.clientX, y: event.clientY }
+  }
+  /**
+   * The tabs sit at the foot of the sheet, so a menu dropped from the click
+   * runs off the bottom of the window; it opens upward from the click, as
+   * Excel's does, and is pulled back inside at the right edge.
+   */
+  function keepMenuInView(node: HTMLElement, _at: { x: number; y: number } | null) {
+    const fit = () => {
+      const box = node.getBoundingClientRect()
+      if (!menu) return
+      const x = Math.max(8, Math.min(menu.x, window.innerWidth - box.width - 8))
+      const y = menu.y + box.height > window.innerHeight - 8 ? Math.max(8, menu.y - box.height) : menu.y
+      if (x !== menu.x || y !== menu.y) menu = { ...menu, x, y }
+    }
+    fit()
+    return { update: fit }
+  }
+
+  function moveBy(name: string, delta: -1 | 1) {
+    const at = workbook.sheets.indexOf(name)
+    const to = at + delta
+    if (at < 0 || to < 0 || to >= workbook.sheets.length) return
+    workbook.moveSheet(name, to)
+    changed()
+  }
+
+  function insertBefore(name: string) {
+    const at = workbook.sheets.indexOf(name)
+    const added = workbook.addSheet(undefined, Math.max(at, 0))
+    workbook.setActive(added)
+    changed()
+  }
+
+  // ---- the scroll arrows, for more tabs than fit --------------------------
+  // Excel greys each arrow until it can move something: with every tab in
+  // view both are grey, and at either end of a long strip the arrow that
+  // points off it is. Read from the strip's scroll box after every scroll,
+  // resize and tab change.
+  let strip = $state<HTMLDivElement | null>(null)
+  let canLeft = $state(false)
+  let canRight = $state(false)
+  function measureStrip() {
+    const el = strip
+    if (!el) { canLeft = false; canRight = false; return }
+    canLeft = el.scrollLeft > 1
+    canRight = el.scrollLeft + el.clientWidth < el.scrollWidth - 1
+  }
+  $effect(() => {
+    const el = strip
+    if (!el) return
+    void version
+    void sheets
+    measureStrip()
+    const ro = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measureStrip)
+    ro?.observe(el)
+    el.addEventListener('scroll', measureStrip)
+    return () => { ro?.disconnect(); el.removeEventListener('scroll', measureStrip) }
+  })
+  function scrollTabs(delta: number) {
+    strip?.scrollBy({ left: delta, behavior: 'smooth' })
+  }
+
+  function onDrop(target: string) {
+    const moved = dragging
+    dragging = null
+    if (!moved || moved === target) return
+    const to = workbook.sheets.indexOf(target)
+    if (to < 0) return
+    workbook.moveSheet(moved, to)
+    changed()
+  }
+
+  /** Left and right arrows move between tabs, which is what a tablist owes a
+   *  keyboard user; the shortcut layer's Ctrl+PageUp/Down does the same from
+   *  anywhere in the grid. */
+  function onTabKey(event: KeyboardEvent, name: string) {
+    const at = sheets.indexOf(name)
+    if (event.key === 'ArrowRight' && at < sheets.length - 1) {
+      event.preventDefault()
+      select(sheets[at + 1]!)
+    } else if (event.key === 'ArrowLeft' && at > 0) {
+      event.preventDefault()
+      select(sheets[at - 1]!)
+    } else if (event.key === 'F2') {
+      event.preventDefault()
+      startRename(name)
+    }
+  }
+</script>
+
+<svelte:window
+  onpointerdown={(e) => { if (menu && !(e.target as HTMLElement).closest('.sheet-menu')) menu = null }}
+  onkeydown={(e) => { if (e.key === 'Escape') menu = null }}
+/>
+
+<div class="sv-sheet-tabs">
+  <!-- Excel's tab-scrolling arrows: always drawn, greyed until they can move something. -->
+  <div class="nav">
+    <button type="button" class="nav-btn" tabindex="-1" aria-label="Scroll tabs left" disabled={!canLeft} onclick={() => scrollTabs(-120)}>
+      <svg viewBox="0 0 8 8" width="8" height="8"><path d="M5.5 1L2.5 4l3 3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" /></svg>
+    </button>
+    <button type="button" class="nav-btn" tabindex="-1" aria-label="Scroll tabs right" disabled={!canRight} onclick={() => scrollTabs(120)}>
+      <svg viewBox="0 0 8 8" width="8" height="8"><path d="M2.5 1l3 3-3 3" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" /></svg>
+    </button>
+  </div>
+
+  <div role="tablist" aria-label="Sheets" class="tabs" bind:this={strip}>
+    {#each sheets as name (name)}
+      {@const isActive = name === activeSheet}
+      <!-- role="presentation" so the tablist still OWNS the role="tab"
+           button: an unmarked wrapper div between them breaks the ARIA
+           tablist / tab relationship. -->
+      <div
+        role="presentation"
+        class="tab"
+        class:active={isActive}
+        class:dragging={dragging === name}
+        draggable={editable}
+        ondragstart={() => (dragging = name)}
+        ondragover={(e) => e.preventDefault()}
+        ondrop={() => onDrop(name)}
+        ondragend={() => (dragging = null)}
+        oncontextmenu={(e) => openMenu(e, name)}
+      >
+        {#if renaming === name}
+          <!-- svelte-ignore a11y_autofocus -->
+          <input
+            class="rename"
+            aria-label="Sheet name"
+            autofocus
+            value={draft}
+            oninput={(e) => (draft = e.currentTarget.value)}
+            onblur={commitRename}
+            onkeydown={(e) => {
+              if (e.key === 'Enter') { e.preventDefault(); commitRename() }
+              if (e.key === 'Escape') { e.preventDefault(); renaming = null }
+            }}
+          />
+        {:else}
+          <button
+            type="button"
+            role="tab"
+            aria-selected={isActive}
+            tabindex={isActive ? 0 : -1}
+            onclick={() => select(name)}
+            ondblclick={() => startRename(name)}
+            onkeydown={(e) => onTabKey(e, name)}
+          >{name}</button>
+        {/if}
+      </div>
+    {/each}
+  </div>
+
+  {#if editable}
+    <button type="button" class="add" aria-label="New sheet" title="New sheet (Shift+F11)" onclick={add}>
+      <svg viewBox="0 0 10 10" width="10" height="10" aria-hidden="true"><path d="M5 1.5v7M1.5 5h7" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" /></svg>
+    </button>
+  {/if}
+
+  {#if error}
+    <span class="error" role="alert">{error}</span>
+  {/if}
+</div>
+
+{#if menu}
+  <!--
+    The sheet menu Excel opens on right-click. Delete lives here and nowhere
+    on the tab face, so a stray click cannot remove a sheet.
+  -->
+  <div class="sheet-menu" role="menu" aria-label={`${menu.name} sheet`} style:left={`${menu.x}px`} style:top={`${menu.y}px`} use:keepMenuInView={menu}>
+    <button type="button" role="menuitem" onclick={() => { insertBefore(menu!.name); menu = null }}>Insert...</button>
+    <button type="button" role="menuitem" disabled={sheets.length < 2} onclick={() => { remove(menu!.name); menu = null }}>Delete</button>
+    <button type="button" role="menuitem" onclick={() => { startRename(menu!.name); menu = null }}>Rename</button>
+    <div class="sep" role="separator"></div>
+    <button type="button" role="menuitem" disabled={sheets.indexOf(menu.name) === 0} onclick={() => { moveBy(menu!.name, -1); menu = null }}>Move Left</button>
+    <button type="button" role="menuitem" disabled={sheets.indexOf(menu.name) === sheets.length - 1} onclick={() => { moveBy(menu!.name, 1); menu = null }}>Move Right</button>
+  </div>
+{/if}
+
+<style>
+  .sv-sheet-tabs {
+    display: flex;
+    align-items: stretch;
+    height: 26px;
+    font-family: var(--sg-font, "Segoe UI", system-ui, sans-serif);
+    font-size: 12px;
+    background: var(--sg-header-bg, #f3f3f3);
+    border-top: 1px solid var(--sg-border, #d1d1d1);
+    color: var(--sg-fg, #242424);
+  }
+
+  .nav {
+    display: flex;
+    align-items: center;
+    padding: 0 4px 0 6px;
+    gap: 2px;
+    color: var(--sg-muted, #616161);
+  }
+  .nav-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 18px;
+    padding: 0;
+    border: 0;
+    border-radius: 2px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+  .nav-btn:hover:not(:disabled) { background: var(--sg-row-hover-bg, #e6e6e6); color: var(--sg-fg, #242424); }
+  .nav-btn:disabled { opacity: 0.35; cursor: default; }
+
+  .tabs {
+    display: flex;
+    align-items: stretch;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+  .tabs::-webkit-scrollbar { display: none; }
+
+  /* Excel's tabs: grey strip, the active one lifted to white with the accent
+     drawn as a line along its bottom edge and its name in the accent. */
+  .tab {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    min-width: 64px;
+    border-right: 1px solid var(--sg-border, #d1d1d1);
+  }
+  .tab:first-child { border-left: 1px solid var(--sg-border, #d1d1d1); }
+  .tab.active {
+    background: var(--sg-bg, #fff);
+    box-shadow: inset 0 -2px 0 0 var(--sg-accent, #107c41);
+  }
+  .tab.active button {
+    color: var(--sg-accent, #107c41);
+    font-weight: 600;
+  }
+  .tab:not(.active):hover { background: var(--sg-row-hover-bg, #e9e9e9); }
+  .tab.dragging { opacity: 0.5; }
+  button[role='tab'] {
+    flex: 1 1 auto;
+    font: inherit;
+    border: 0;
+    background: transparent;
+    color: var(--sg-muted, #444);
+    padding: 0 12px;
+    cursor: pointer;
+    white-space: nowrap;
+    text-align: center;
+  }
+  button[role='tab']:focus-visible {
+    outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #107c41));
+    outline-offset: -2px;
+  }
+
+  .add {
+    align-self: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 18px;
+    margin-left: 6px;
+    padding: 0;
+    border: 1px solid var(--sg-border, #c8c6c4);
+    border-radius: 50%;
+    background: var(--sg-bg, #fff);
+    color: var(--sg-muted, #616161);
+    cursor: pointer;
+  }
+  .add:hover { color: var(--sg-fg, #242424); border-color: var(--sg-muted, #8a8886); }
+  .add:focus-visible {
+    outline: 2px solid var(--sg-focus-ring, var(--sg-accent, #107c41));
+    outline-offset: 1px;
+  }
+
+  .rename {
+    font: inherit;
+    width: 92px;
+    margin: 2px 4px;
+    border: 1px solid var(--sg-accent, #107c41);
+    border-radius: 2px;
+    padding: 1px 4px;
+    background: var(--sg-input-bg, var(--sg-bg, #fff));
+    color: var(--sg-fg, #242424);
+  }
+  .error {
+    align-self: center;
+    margin-left: 8px;
+    color: var(--sg-danger, #dc2626);
+    font-size: 12px;
+  }
+
+  .sheet-menu {
+    position: fixed;
+    z-index: 1000;
+    min-width: 150px;
+    padding: 4px;
+    font-family: var(--sg-font, "Segoe UI", system-ui, sans-serif);
+    font-size: 12px;
+    background: var(--sg-bg, #fff);
+    color: var(--sg-fg, #242424);
+    border: 1px solid var(--sg-border, #d1d1d1);
+    border-radius: 4px;
+    box-shadow: 0 8px 24px rgb(0 0 0 / 0.14);
+  }
+  .sheet-menu button {
+    display: block;
+    width: 100%;
+    padding: 5px 10px;
+    font: inherit;
+    text-align: left;
+    border: 0;
+    border-radius: 3px;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+  }
+  .sheet-menu button:hover:not(:disabled) { background: var(--sg-row-hover-bg, #f0f0f0); }
+  .sheet-menu button:disabled { opacity: 0.4; cursor: default; }
+  .sheet-menu .sep { height: 1px; margin: 4px 6px; background: var(--sg-border, #e0e0e0); }
+</style>

package/dist/SvSheetTabs.svelte.d.ts

@@ -0,0 +1,36 @@
+/**
+   * The sheet tab strip along the bottom of a workbook.
+   *
+   * Owns no workbook state of its own: it renders what the workbook reports
+   * and calls back, so the keyboard shortcuts and the tabs cannot disagree
+   * about which sheet is active.
+   */
+import type { Workbook } from './sheet/workbook.js';
+type Props = {
+    workbook: Workbook;
+    /** Called after any change, so the consumer can re-render. */
+    onChange?: () => void;
+    /**
+     * Called after a sheet is renamed or removed, before `onChange`. Anything
+     * the consumer keeps per sheet and keys by name - the shell keeps a
+     * format store per sheet - has to follow the rename or drop the entry,
+     * and the workbook itself has no event for either.
+     */
+    onRename?: (from: string, to: string) => void;
+    onRemove?: (name: string) => void;
+    /** Off hides the add button and the context actions. */
+    editable?: boolean;
+    /**
+     * Bump this whenever the workbook is mutated from OUTSIDE the strip - the
+     * Ctrl+PageUp/PageDown shortcuts, or app code calling `addSheet`.
+     *
+     * A `Workbook` is a plain object, not `$state`, so reading `workbook.sheets`
+     * creates no reactive dependency and the strip would otherwise render once
+     * and then show whatever the sheet list was at mount. Pass the same counter
+     * `onChange` increments.
+     */
+    version?: number;
+};
+declare const SvSheetTabs: import("svelte").Component<Props, {}, "">;
+type SvSheetTabs = ReturnType<typeof SvSheetTabs>;
+export default SvSheetTabs;

package/dist/SvSheetTabs.test-harness.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Test-only harness for SvSheetTabs.
+ *
+ * `mount()` takes a plain props object, and a plain object's fields are not
+ * reactive, so a test cannot change a prop after mounting and see the
+ * component respond. This box holds the props in `$state` so it can - which is
+ * what proves the strip follows an OUTSIDE workbook mutation (Ctrl+PageUp and
+ * friends) rather than only its own button clicks.
+ *
+ * Runes only compile in `.svelte.ts`, hence the separate file. The `.test.`
+ * segment keeps it out of the published tarball (tools/strip-dist-tests.mjs)
+ * and out of vitest's `*.dom.test.ts` include.
+ */
+export declare function reactiveProps<T extends Record<string, unknown>>(initial: T): {
+    props: T;
+    set(patch: Partial<T>): void;
+};

package/dist/SvSheetTabs.test-harness.svelte.js

@@ -0,0 +1,22 @@
+/**
+ * Test-only harness for SvSheetTabs.
+ *
+ * `mount()` takes a plain props object, and a plain object's fields are not
+ * reactive, so a test cannot change a prop after mounting and see the
+ * component respond. This box holds the props in `$state` so it can - which is
+ * what proves the strip follows an OUTSIDE workbook mutation (Ctrl+PageUp and
+ * friends) rather than only its own button clicks.
+ *
+ * Runes only compile in `.svelte.ts`, hence the separate file. The `.test.`
+ * segment keeps it out of the published tarball (tools/strip-dist-tests.mjs)
+ * and out of vitest's `*.dom.test.ts` include.
+ */
+export function reactiveProps(initial) {
+    const box = $state({ ...initial });
+    return {
+        props: box,
+        set(patch) {
+            Object.assign(box, patch);
+        },
+    };
+}