@lapis-notes/csv 0.0.0-stage → 0.2.0

package/dist/lib/model/csv-search.js

@@ -0,0 +1,101 @@
+import { SearchQuery } from "@codemirror/search";
+import { EditorState } from "@codemirror/state";
+export function csvSearchQuery(options) {
+    return new SearchQuery({
+        search: options.search,
+        replace: options.replace ?? "",
+        caseSensitive: options.caseSensitive ?? false,
+        wholeWord: options.wholeWord ?? false,
+        regexp: options.regexp ?? false,
+    });
+}
+/** Matches in row-major order. An empty or invalid query matches nothing. */
+export function csvCellMatches(rows, query) {
+    if (!query.search || !query.valid)
+        return [];
+    const matches = [];
+    rows.forEach((row, rowIndex) => {
+        row.forEach((cell, colIndex) => {
+            const cursor = query.getCursor(EditorState.create({ doc: cell }).doc);
+            for (let next = cursor.next(); !next.done; next = cursor.next()) {
+                matches.push({
+                    row: rowIndex,
+                    col: colIndex,
+                    from: next.value.from,
+                    to: next.value.to,
+                });
+            }
+        });
+    });
+    return matches;
+}
+export function csvDocumentMatches(doc, query) {
+    if (!query.search || !query.valid)
+        return [];
+    const matches = [];
+    const cursor = query.getCursor(doc);
+    for (let next = cursor.next(); !next.done; next = cursor.next()) {
+        matches.push({ from: next.value.from, to: next.value.to });
+    }
+    return matches;
+}
+/** Replacement text for one match, including regular-expression substitutions. */
+export function searchReplacement(query, matched) {
+    const replacement = query.literal
+        ? query.replace
+        : query.replace.replace(/\\([nrt\\])/g, (_match, escape) => escape === "n"
+            ? "\n"
+            : escape === "r"
+                ? "\r"
+                : escape === "t"
+                    ? "\t"
+                    : "\\");
+    if (!query.regexp)
+        return replacement;
+    const flags = query.caseSensitive ? "" : "i";
+    return matched.replace(new RegExp(query.search, flags), replacement);
+}
+export function replaceCellText(cell, ranges, query) {
+    const ordered = [...ranges].sort((left, right) => right.from - left.from);
+    let next = cell;
+    for (const range of ordered) {
+        const matched = next.slice(range.from, range.to);
+        next =
+            next.slice(0, range.from) +
+                searchReplacement(query, matched) +
+                next.slice(range.to);
+    }
+    return next;
+}
+export function csvBodyCounts(rowCount, colCount, headerRow) {
+    return {
+        columns: colCount,
+        rows: headerRow ? Math.max(0, rowCount - 1) : rowCount,
+    };
+}
+/** Data rows that contain a match. Header matches do not count. */
+export function csvShownRowCount(rowCount, headerRow, matches) {
+    const start = headerRow ? 1 : 0;
+    const matched = new Set();
+    for (const match of matches) {
+        if (match.row >= start && match.row < rowCount)
+            matched.add(match.row);
+    }
+    return matched.size;
+}
+export function csvStatusLabel(columns, rows, shownRows) {
+    const columnLabel = columns === 1 ? "column" : "columns";
+    const rowLabel = rows === 1 ? "row" : "rows";
+    const counts = `${columns.toLocaleString()} ${columnLabel}`;
+    if (shownRows == null) {
+        return `${counts} · ${rows.toLocaleString()} ${rowLabel}`;
+    }
+    const shownLabel = shownRows === 1 ? "row" : "rows";
+    return `${counts} · Showing ${shownRows.toLocaleString()} ${shownLabel} (filtered from ${rows.toLocaleString()} total ${rowLabel})`;
+}
+export function isCsvFindShortcut(event) {
+    return ((event.metaKey || event.ctrlKey) &&
+        !event.altKey &&
+        !event.shiftKey &&
+        event.key.toLowerCase() === "f");
+}

package/dist/lib/model/csv-table-model.d.ts

@@ -0,0 +1,10 @@
+import type { CsvGrid } from "./csv-grid";
+export type CsvTableRow = {
+    id: string;
+    rowIndex: number;
+    /** 1-based visible row index in the table body (independent of grid row). */
+    displayRowNumber: number;
+    cells: string[];
+};
+export declare function rowsFromGrid(grid: CsvGrid, headerRow: boolean): CsvTableRow[];
+export declare function headerLabelsFromGrid(grid: CsvGrid, headerRow: boolean, colCount: number): string[];

package/dist/lib/model/csv-table-model.js

@@ -0,0 +1,18 @@
+export function rowsFromGrid(grid, headerRow) {
+    const all = grid.getRows();
+    const offset = headerRow ? 1 : 0;
+    return all.slice(offset).map((cells, index) => ({
+        id: `row-${offset + index}`,
+        rowIndex: offset + index,
+        displayRowNumber: index + 1,
+        cells: [...cells],
+    }));
+}
+export function headerLabelsFromGrid(grid, headerRow, colCount) {
+    return Array.from({ length: colCount }, (_, column) => {
+        if (headerRow && grid.getRowCount() > 0) {
+            return grid.getCell(0, column);
+        }
+        return `Column ${column + 1}`;
+    });
+}

package/dist/lib/model/parse-csv.d.ts

@@ -0,0 +1,10 @@
+import Papa from "papaparse";
+import type { CsvDelimiter } from "../../csv-settings";
+export type ParseCsvOptions = {
+    delimiter: CsvDelimiter;
+};
+export type ParseCsvResult = {
+    rows: string[][];
+    errors: Papa.ParseError[];
+};
+export declare function parseCsvText(text: string, options: ParseCsvOptions): ParseCsvResult;

package/dist/lib/model/parse-csv.js

@@ -0,0 +1,13 @@
+import Papa from "papaparse";
+export function parseCsvText(text, options) {
+    const trimmed = text.replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+    const parsed = Papa.parse(trimmed, {
+        delimiter: options.delimiter,
+        skipEmptyLines: false,
+    });
+    const rows = parsed.data.map((row) => row.map((cell) => (cell ?? "").toString()));
+    return {
+        rows,
+        errors: parsed.errors ?? [],
+    };
+}

package/dist/lib/model/serialize-csv.d.ts

@@ -0,0 +1,5 @@
+import type { CsvDelimiter } from "../../csv-settings";
+export type SerializeCsvOptions = {
+    delimiter: CsvDelimiter;
+};
+export declare function serializeCsvRows(rows: string[][], options: SerializeCsvOptions): string;

package/dist/lib/model/serialize-csv.js

@@ -0,0 +1,10 @@
+import Papa from "papaparse";
+export function serializeCsvRows(rows, options) {
+    return Papa.unparse(rows, {
+        delimiter: options.delimiter,
+        newline: "\n",
+        quotes: true,
+        quoteChar: '"',
+        escapeChar: '"',
+    });
+}

package/dist/lib/sheet/csv-sheet-toolbar.svelte

@@ -0,0 +1,244 @@
+<script lang="ts">
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import { Toggle } from "@lapismd/design-core/shadcn/toggle";
+  import * as Tooltip from "@lapismd/design-core/shadcn/tooltip";
+  import SheetGlyph from "./sheet-glyph.svelte";
+  import type { SheetCommand, SheetCommandId } from "./sheet-layout";
+
+  let {
+    reference,
+    commands,
+    wrap,
+    colours,
+    headerRow,
+    canUndo,
+    canRedo,
+    onAddress,
+    onCommand,
+    onWrap,
+    onColours,
+    onHeaderRow,
+    onUndo,
+    onRedo,
+  }: {
+    reference: string;
+    commands: readonly SheetCommand[];
+    wrap: boolean;
+    colours: boolean;
+    headerRow: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    onAddress: (address: string) => void;
+    onCommand: (id: SheetCommandId) => void;
+    onWrap: (wrap: boolean) => void;
+    onColours: (colours: boolean) => void;
+    onHeaderRow: (headerRow: boolean) => void;
+    onUndo: () => void;
+    onRedo: () => void;
+  } = $props();
+
+  let draft = $state<string | null>(null);
+
+  function commitAddress() {
+    if (draft == null) return;
+    const value = draft;
+    draft = null;
+    onAddress(value);
+  }
+</script>
+
+<div class="csv-sheet-toolbar" role="toolbar" aria-label="Sheet" data-sheet-toolbar>
+  <input
+    class="csv-sheet-toolbar__name"
+    data-sheet-reference
+    aria-label="Cell address"
+    value={draft ?? reference}
+    spellcheck="false"
+    onfocus={(event) => event.currentTarget.select()}
+    oninput={(event) => {
+      draft = event.currentTarget.value;
+    }}
+    onkeydown={(event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        commitAddress();
+        event.currentTarget.blur();
+      } else if (event.key === "Escape") {
+        draft = null;
+        event.currentTarget.blur();
+      }
+    }}
+    onblur={commitAddress}
+  />
+  <Tooltip.Provider delayDuration={300}>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Undo"
+            data-sheet-undo
+            disabled={!canUndo}
+            onclick={onUndo}
+          >
+            <SheetGlyph command="undo" />
+          </Button>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content side="bottom">Undo</Tooltip.Content>
+    </Tooltip.Root>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            variant="ghost"
+            size="icon-sm"
+            aria-label="Redo"
+            data-sheet-redo
+            disabled={!canRedo}
+            onclick={onRedo}
+          >
+            <SheetGlyph command="redo" />
+          </Button>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content side="bottom">Redo</Tooltip.Content>
+    </Tooltip.Root>
+    {#each commands as command (command.id)}
+      <Tooltip.Root>
+        <Tooltip.Trigger>
+          {#snippet child({ props })}
+            <Button
+              {...props}
+              variant="ghost"
+              size="icon-sm"
+              aria-label={command.label}
+              disabled={command.disabled}
+              onclick={() => onCommand(command.id)}
+            >
+              <SheetGlyph command={command.id} />
+            </Button>
+          {/snippet}
+        </Tooltip.Trigger>
+        <Tooltip.Content side="bottom">{command.label}</Tooltip.Content>
+      </Tooltip.Root>
+    {/each}
+    <span class="csv-sheet-toolbar__rule" aria-hidden="true"></span>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Toggle
+            {...props}
+            pressed={wrap}
+            size="sm"
+            variant="outline"
+            aria-label="Wrap text"
+            aria-pressed={wrap}
+            data-sheet-wrap
+            onPressedChange={(pressed) => onWrap(pressed === true)}
+          >
+            <SheetGlyph command="wrap" />
+          </Toggle>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content side="bottom">Wrap text</Tooltip.Content>
+    </Tooltip.Root>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Toggle
+            {...props}
+            pressed={colours}
+            size="sm"
+            variant="outline"
+            aria-label="Column colours"
+            aria-pressed={colours}
+            data-sheet-colours
+            onPressedChange={(pressed) => onColours(pressed === true)}
+          >
+            <SheetGlyph command="colours" />
+          </Toggle>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content side="bottom">Column colours</Tooltip.Content>
+    </Tooltip.Root>
+    <Tooltip.Root>
+      <Tooltip.Trigger>
+        {#snippet child({ props })}
+          <Toggle
+            {...props}
+            pressed={headerRow}
+            size="sm"
+            variant="outline"
+            aria-label="Header row"
+            aria-pressed={headerRow}
+            data-sheet-header
+            onPressedChange={(pressed) => onHeaderRow(pressed === true)}
+          >
+            <SheetGlyph command="header" />
+          </Toggle>
+        {/snippet}
+      </Tooltip.Trigger>
+      <Tooltip.Content side="bottom">Header row</Tooltip.Content>
+    </Tooltip.Root>
+  </Tooltip.Provider>
+</div>
+
+<style>
+  .csv-sheet-toolbar {
+    display: flex;
+    flex: none;
+    align-items: center;
+    gap: 0.25rem;
+    min-height: 2.25rem;
+    padding: 0.25rem 0.5rem;
+    border-bottom: 1px solid var(--csv-surface-border, var(--border));
+    background: var(--csv-header-background, var(--background));
+    color: var(--csv-text-color, var(--foreground));
+    font-family: var(--font-interface, var(--font-sans, ui-sans-serif, system-ui, sans-serif));
+    font-size: 13px;
+  }
+
+  .csv-sheet-toolbar__name {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 4.5rem;
+    height: 1.75rem;
+    margin-right: 0.25rem;
+    padding: 0 0.5rem;
+    border: 1px solid var(--csv-surface-border, var(--border));
+    border-radius: 0.25rem;
+    background: var(--csv-shell-background, var(--background));
+    color: inherit;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  .csv-sheet-toolbar__name:focus {
+    outline: 2px solid var(--table-selection-border-color, var(--interactive-accent, var(--accent)));
+    outline-offset: 1px;
+  }
+
+  .csv-sheet-toolbar :global(button:hover:not(:disabled)) {
+    background: color-mix(in srgb, var(--foreground) 10%, transparent);
+  }
+
+  .csv-sheet-toolbar :global(button[aria-pressed="true"]),
+  .csv-sheet-toolbar :global(button[aria-pressed="true"]:hover) {
+    background: var(--table-selection-border-color, var(--interactive-accent, var(--accent)));
+    color: var(--csv-shell-background, #fff);
+    border-color: transparent;
+  }
+
+  .csv-sheet-toolbar__rule {
+    width: 1px;
+    height: 1.25rem;
+    margin: 0 0.25rem;
+    background: var(--csv-surface-border, var(--border));
+  }
+</style>

package/dist/lib/sheet/csv-sheet-toolbar.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { SheetCommand, SheetCommandId } from "./sheet-layout";
+type $$ComponentProps = {
+    reference: string;
+    commands: readonly SheetCommand[];
+    wrap: boolean;
+    colours: boolean;
+    headerRow: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    onAddress: (address: string) => void;
+    onCommand: (id: SheetCommandId) => void;
+    onWrap: (wrap: boolean) => void;
+    onColours: (colours: boolean) => void;
+    onHeaderRow: (headerRow: boolean) => void;
+    onUndo: () => void;
+    onRedo: () => void;
+};
+declare const CsvSheetToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type CsvSheetToolbar = ReturnType<typeof CsvSheetToolbar>;
+export default CsvSheetToolbar;