@extable/core 0.1.0

package/README.md

@@ -0,0 +1,77 @@
+# @extable/core
+
+![screenshot](../docs/public/assets/screenshot.webp)
+
+Excel-like HTML table component with a fixed column schema and built-in multi-user editing support.
+
+## Features
+
+- **Excel Familiarity** - Direct cell editing, fill handle, copy & paste, built-in filtering & sorting
+- **Performance** - HTML5 Canvas rendering for thousands of rows, with HTML table mode for testing
+- **Schema-Driven** - Centralized column definitions with validation, formatting, and formulas
+- **Edit Modes** - View-only, direct edit, or commit-based workflows
+- **Collaboration-Ready** - Row-level locking and command-stream architecture for multi-user support
+- **Framework-Agnostic** - Core library works with Vanilla JS, React, Vue, and other frameworks
+
+## Quick Start
+
+### Installation
+
+```bash
+npm install @extable/core
+```
+
+### Basic Usage
+
+```typescript
+import { ExtableCore } from "@extable/core";
+import "@extable/core/style.css";
+
+const schema = {
+  columns: [
+    { key: "id", header: "ID", type: "string", readonly: true },
+    { key: "name", header: "Name", type: "string" },
+    { key: "active", header: "Active", type: "boolean" },
+  ],
+};
+
+const data = [
+  { id: "1", name: "Alice", active: true },
+  { id: "2", name: "Bob", active: false },
+];
+
+const table = new ExtableCore({
+  root: document.getElementById("table"),
+  schema,
+  defaultData: data,
+  defaultView: {},
+});
+```
+
+## Documentation
+
+For comprehensive guides and examples, visit the [Extable Documentation](https://shibukawa.github.io/extable/).
+
+### Key Topics
+
+- [Concepts](https://shibukawa.github.io/extable/concepts/) - Design philosophy and architecture
+- [Integration Guide](https://shibukawa.github.io/extable/guides/integration) - Setup and configuration
+- [Data Format](https://shibukawa.github.io/extable/guides/data-format) - Supported column types and validation
+- [Edit Modes](https://shibukawa.github.io/extable/guides/editmode) - View-only, direct, and commit modes
+- [Core API Reference](https://shibukawa.github.io/extable/reference/core) - Complete API documentation
+- [Demos](https://shibukawa.github.io/extable/demos/) - Interactive examples
+
+## Framework Wrappers
+
+Use Extable with your favorite framework:
+
+- **React**: [@extable/react](https://www.npmjs.com/package/@extable/react)
+- **Vue**: [@extable/vue](https://www.npmjs.com/package/@extable/vue)
+
+## Repository
+
+GitHub: https://github.com/shibukawa/extable
+
+## License
+
+Apache License 2.0 - See LICENSE for details.

package/dist/address.d.ts

@@ -0,0 +1,9 @@
+import type { DataModel } from "./dataModel";
+import type { CellAddress } from "./types";
+export type ResolvedCellTarget = {
+    rowId: string;
+    colKey: string;
+    rowIndex: number;
+    colIndex: number;
+};
+export declare function resolveCellAddress(dataModel: DataModel, address: CellAddress): ResolvedCellTarget | null;

package/dist/cellValueCodec.d.ts

@@ -0,0 +1,4 @@
+import type { ColumnSchema } from "./types";
+export declare function safeParseDate(value: string): Date | null;
+export declare function safeParseTime(value: string): Date | null;
+export declare function toRawValue(raw: unknown, value: unknown, col: ColumnSchema): string | null;

package/dist/commandQueue.d.ts

@@ -0,0 +1,20 @@
+import type { Command } from "./types";
+export type CommandGroupSnapshot = {
+    batchId: string | null;
+    commands: Command[];
+};
+export declare class CommandQueue {
+    private applied;
+    private undone;
+    private cap;
+    constructor(cap?: number);
+    enqueue(command: Command): void;
+    canUndo(): boolean;
+    canRedo(): boolean;
+    listApplied(): Command[];
+    listUndoGroups(): CommandGroupSnapshot[];
+    listRedoGroups(): CommandGroupSnapshot[];
+    undo(): Command[] | null;
+    redo(): Command[] | null;
+    clear(): void;
+}

package/dist/dataModel.d.ts

@@ -0,0 +1,127 @@
+import type { CellDiagnostic, ColumnSchema, ConditionalStyleFn, InternalRow, RowObject, Schema, StyleDelta, View } from "./types";
+export declare class DataModel {
+    private schema;
+    private view;
+    private rows;
+    private baseIndexById;
+    private dataVersion;
+    private visibleRowsCache;
+    private distinctValueCache;
+    private pending;
+    private rowVersion;
+    private listeners;
+    private cellStyles;
+    private cellConditionalStyles;
+    private computedCache;
+    private conditionalCache;
+    private rowConditionalCache;
+    private formulaDiagnostics;
+    private conditionalDiagnostics;
+    private baseValidationErrors;
+    private uniqueValidationErrors;
+    private notifySuspended;
+    private notifyDirty;
+    constructor(dataset: RowObject[] | undefined, schema: Schema<any>, view: View);
+    subscribe(listener: () => void): () => boolean;
+    private notify;
+    batchUpdate(run: () => void): void;
+    setData(dataset: RowObject[] | undefined): void;
+    setSchema(schema: Schema<any>): void;
+    setView(view: View): void;
+    getSchema(): Schema<any>;
+    getColumns(): ColumnSchema<any>[];
+    getRowConditionalStyleFn(): ConditionalStyleFn | null;
+    getView(): View;
+    getDataVersion(): number;
+    getFullSchema(): Schema<any>;
+    listRows(): InternalRow[];
+    listAllRows(): InternalRow[];
+    getAllRowCount(): number;
+    private findRow;
+    getRowHeight(rowId: string): number | undefined;
+    setRowHeight(rowId: string, height: number): void;
+    setRowHeightsBulk(next: Record<string, number>): void;
+    getCell(rowId: string, key: string): unknown;
+    getRawCell(rowId: string, key: string): unknown;
+    isRowReadonly(rowId: string): boolean;
+    isColumnReadonly(colKey: string): boolean;
+    isReadonly(rowId: string, colKey: string): boolean;
+    setCell(rowId: string, key: string, value: unknown, committed: boolean): void;
+    applyPending(rowId: string): void;
+    clearPending(rowId: string): void;
+    getPending(): Map<string, Record<string, unknown>>;
+    hasPending(rowId: string, key: string): boolean;
+    insertRow(rowData: InternalRow["raw"]): string;
+    insertRowAt(rowData: InternalRow["raw"], index: number, forcedId?: string): string;
+    removeRow(rowId: string): {
+        row: InternalRow;
+        index: number;
+    } | null;
+    getDisplayIndex(rowId: string): number | null;
+    getRowIndex(rowId: string): number;
+    getBaseRowIndex(rowId: string): number;
+    getColumnIndex(colKey: string): number;
+    getColumnByIndex(colIndex: number): ColumnSchema<any, any, import("./types").ColumnType, string>;
+    getRowByIndex(rowIndex: number): InternalRow;
+    private rebuildBaseIndex;
+    private getFilterSortKey;
+    private stableValueKey;
+    private isBlankValue;
+    private resolveFilterColumnKey;
+    private getFilterCellValue;
+    private valuesFilterMatches;
+    private rowPassesColumnDiagnostics;
+    private computeRowsAfterFilter;
+    private computeVisibleRows;
+    getDistinctValuesForColumn(colKey: string): {
+        version: number;
+        values: Array<{
+            value: unknown;
+            label: string;
+        }>;
+        hasBlanks: boolean;
+        total: number;
+    };
+    private cellStyleKey;
+    private clearDiagnosticsForCell;
+    getCellDiagnostic(rowId: string, colKey: string): CellDiagnostic | null;
+    getDiagnostics(): {
+        rowId: string;
+        colKey: string;
+        diag: CellDiagnostic | null;
+    }[];
+    private getRowObjectEffective;
+    resolveCellValue(rowId: string, col: ColumnSchema): {
+        value: unknown;
+        textOverride?: string;
+        diagnostic: CellDiagnostic | null;
+    };
+    setCellConditionalStyle(rowId: string, colKey: string, fn: ConditionalStyleFn | null): void;
+    private evalConditionalStyleFn;
+    private resolveRowConditionalStyle;
+    resolveConditionalStyle(rowId: string, col: ColumnSchema): {
+        delta: StyleDelta | null;
+        diagnostic: CellDiagnostic | null;
+        forceErrorText: boolean;
+    };
+    getValidationErrors(): {
+        rowId: string;
+        colKey: string;
+        message: string;
+    }[];
+    getCellValidationMessage(rowId: string, colKey: string): string | null;
+    getCellMarker(rowId: string, colKey: string): {
+        level: "warning" | "error";
+        message: string;
+    } | null;
+    private updateValidationForCell;
+    private recomputeValidationErrors;
+    private normalizeUniqueValue;
+    private recomputeUniqueValidationForColumn;
+    getCellStyle(rowId: string, colKey: string): StyleDelta | null;
+    setCellStyle(rowId: string, colKey: string, style: StyleDelta | null): void;
+    updateColumnStyle(colKey: string, updater: ColumnSchema["style"] | ((oldValue: ColumnSchema["style"] | undefined) => ColumnSchema["style"] | undefined)): void;
+    private isEqual;
+    getRowVersion(rowId: string): number;
+    private reindexRows;
+}

package/dist/dateUtils.d.ts

@@ -0,0 +1,5 @@
+type DatePatternKind = "date" | "time" | "datetime";
+export declare function parseIsoDate(value: string): Date | null;
+export declare function formatDateLite(date: Date, pattern: string): string;
+export declare function coerceDatePattern(pattern: string | undefined, kind: DatePatternKind): string;
+export {};

package/dist/fillHandle.d.ts

@@ -0,0 +1,17 @@
+import type { DataModel } from "./dataModel";
+import type { EditMode, SelectionRange } from "./types";
+export type FillHandleMode = 'copy' | 'sequence';
+export interface FillHandleSource {
+    colKey: string;
+    colIndex: number;
+    startRowIndex: number;
+    endRowIndex: number;
+    mode: FillHandleMode;
+}
+export declare function getFillHandleSource(dataModel: DataModel, ranges: SelectionRange[]): FillHandleSource | null;
+export declare function makeFillValueGetter(dataModel: DataModel, source: FillHandleSource): ((offsetFromEnd: number) => unknown) | null;
+export declare const FILL_HANDLE_VISUAL_SIZE_PX = 12;
+export declare const FILL_HANDLE_HIT_SIZE_PX = 14;
+export declare function getFillHandleRect(cellRect: DOMRect, size?: number): DOMRect;
+export declare function isPointInRect(x: number, y: number, rect: DOMRect): boolean;
+export declare function shouldShowFillHandle(dataModel: DataModel, ranges: SelectionRange[], activeRowId: string | null, activeColKey: string | null, editMode: EditMode): boolean;

package/dist/findReplace.d.ts

@@ -0,0 +1,53 @@
+import type { DataModel } from "./dataModel";
+export type FindReplaceMode = "find" | "replace";
+export interface FindReplaceOptions {
+    caseInsensitive?: boolean;
+    regex?: boolean;
+}
+export interface FindReplaceMatch {
+    rowId: string;
+    colKey: string;
+    rowIndex: number;
+    colIndex: number;
+    start: number;
+    end: number;
+    text: string;
+}
+export interface FindReplaceState {
+    query: string;
+    replace: string;
+    mode: FindReplaceMode;
+    options: Required<FindReplaceOptions>;
+    matches: FindReplaceMatch[];
+    activeIndex: number;
+    error: string | null;
+}
+export type FindReplaceListener = (state: FindReplaceState) => void;
+export declare class FindReplaceController {
+    private dataModel;
+    private navigateToCell;
+    private applyEdit;
+    private canEdit;
+    private state;
+    private listeners;
+    private debounceId;
+    private unsubscribeData;
+    constructor(dataModel: DataModel, navigateToCell: (rowId: string, colKey: string) => void, applyEdit: (rowId: string, colKey: string, next: unknown) => void, canEdit: (rowId: string, colKey: string) => boolean);
+    destroy(): void;
+    getState(): FindReplaceState;
+    subscribe(listener: FindReplaceListener): () => boolean;
+    setMode(mode: FindReplaceMode): void;
+    setQuery(query: string): void;
+    setReplace(replace: string): void;
+    setOptions(next: FindReplaceOptions): void;
+    next(): void;
+    prev(): void;
+    activateIndex(index: number): void;
+    replaceCurrent(): void;
+    replaceAll(): void;
+    private applyReplacement;
+    private applyReplacementAllInCell;
+    private scheduleRecompute;
+    recompute(): void;
+    private setState;
+}

package/dist/geometry.d.ts

@@ -0,0 +1,5 @@
+import type { Schema, View } from "./types";
+export declare const HEADER_HEIGHT_PX = 24;
+export declare const ROW_HEADER_WIDTH_PX = 48;
+export declare const DEFAULT_ROW_HEIGHT_PX = 24;
+export declare function getColumnWidths(schema: Schema, view: View, fallbackWidth?: number): number[];

package/dist/index.css

@@ -0,0 +1 @@
+.extable-root{--extable-border: 1px solid #dadce0;--extable-accent: #3b82f6;--extable-invalid: #ef4444;--extable-header-bg: #e5e7eb;border:1px solid #d0d7de;box-sizing:border-box}.extable-root .extable-shell{display:flex;width:100%;height:100%;min-width:0;min-height:0;position:relative;font-family:Inter,Segoe UI,system-ui,-apple-system,Helvetica Neue,sans-serif;overflow:visible}.extable-root .extable-viewport{flex:1;flex-basis:0;min-width:0;min-height:0;overflow:auto;position:relative;overscroll-behavior:contain;background:#f8fafc;border:none;box-sizing:border-box}.extable-root .extable-overlay-layer{position:sticky;top:0;left:0;width:0;height:0;pointer-events:none;z-index:20}.extable-root.extable-loading .extable-shell:after{content:"";position:absolute;inset:0;background:#ffffffa6;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);z-index:20}.extable-root.extable-loading .extable-shell:before{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin-left:-14px;margin-top:-14px;border-radius:9999px;border:3px solid rgba(148,163,184,.5);border-top-color:#3b82f6e6;animation:extable-spin .9s linear infinite;z-index:21}.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]{border-collapse:collapse;width:100%;background:transparent;table-layout:fixed;font-size:14px;line-height:16px}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) thead th{position:sticky;top:0;z-index:5}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) th{position:relative;background:var(--extable-header-bg);border:1px solid #d0d7de;padding:4px 8px;font-weight:700;text-align:left}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) thead th:not(.extable-row-header):after{content:"";position:absolute;top:0;right:-3px;width:6px;height:100%;cursor:col-resize}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) td{border:1px solid #d0d7de;padding:6px 8px;min-width:80px;cursor:cell;font-weight:400}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) td:focus-within{outline:2px solid #2b7fff;outline-offset:-1px}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) td.pending{color:#b91c1c}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) input{border:none;padding:2px 4px;width:100%;box-sizing:border-box;background:#fff;font:inherit}:is(.extable-root table[data-extable-renderer=html],.extable-root table[data-extable-renderer=canvas-html-overlay]) input:focus{outline:none}.extable-root table[data-extable-renderer=canvas-html-overlay]{opacity:0}.extable-root .extable-cell{border:var(--extable-border);padding:4px 8px;position:relative}.extable-root .extable-cell.invalid{outline:1px solid var(--extable-invalid)}.extable-root .extable-diag-warning:before,.extable-root .extable-diag-error:before{content:"";position:absolute;top:0;right:0;width:10px;height:10px;background:linear-gradient(225deg,#f59e0b 50%,transparent 50%)}.extable-root .extable-diag-error:before{background:linear-gradient(225deg,#ef4444 50%,transparent 50%)}.extable-root .extable-row-header{position:sticky;left:0;background:var(--extable-header-bg);text-align:center;vertical-align:middle;line-height:24px;padding:0;border:var(--extable-border);font-weight:600;color:#334155;z-index:4;cursor:default}.extable-root .extable-corner{position:sticky;top:0;left:0;z-index:6;background:var(--extable-header-bg);padding:0}.extable-root .extable-corner:after{content:"";position:absolute;top:4px;left:4px;width:12px;height:12px;background:linear-gradient(135deg,#9ca3af 50%,transparent 50%)}.extable-root .extable-active-row-header,.extable-root .extable-active-col-header{background:#3b82f629}.extable-root .extable-selected{background:#3b82f61f!important}.extable-root td.extable-selected{cursor:cell}.extable-root td.extable-active-cell.extable-editable{cursor:text}.extable-root td.extable-active-cell.extable-readonly,.extable-root td.extable-active-cell.extable-boolean{cursor:default}.extable-root .extable-all-selected td,.extable-root .extable-all-selected th{background:#3b82f614!important}.extable-root .extable-active-cell{outline:2px solid var(--extable-accent);outline-offset:-2px;position:relative}.extable-root .extable-active-cell:after{content:"";position:absolute;width:12px;height:12px;right:1px;bottom:1px;background:var(--extable-accent);border:1px solid #ffffff;cursor:crosshair;opacity:0}.extable-root[data-extable-fill-handle="1"] .extable-active-cell:after{opacity:1}.extable-root .extable-readonly-muted{background:#f3f4f6!important;color:#94a3b8!important}.extable-root td.extable-selected.extable-readonly-muted{background:#3b82f61f!important}.extable-root .extable-all-selected td.extable-readonly-muted,.extable-root .extable-all-selected th.extable-readonly-muted{background:#3b82f614!important}.extable-root.extable-readonly-all .extable-readonly-muted{background:inherit!important;color:inherit!important}.extable-root.extable-readonly-all table[data-extable-renderer=html] tbody td,.extable-root.extable-readonly-all table[data-extable-renderer=canvas-html-overlay] tbody td{cursor:cell}.extable-root.extable-readonly-all td.extable-active-cell{cursor:cell!important}.extable-root.extable-readonly-all .extable-active-cell:after{cursor:cell}.extable-root .extable-col-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;cursor:default}.extable-root .extable-col-header-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.extable-root .extable-filter-sort-trigger{flex:0 0 auto;width:22px;height:22px;padding:0;border:1px solid rgba(148,163,184,.55);border-radius:6px;background:#ffffffb3;cursor:pointer;opacity:0;display:inline-flex;align-items:center;justify-content:center;line-height:1;color:#0f172abf}.extable-root .extable-filter-sort-trigger:hover,.extable-root .extable-filter-sort-trigger:focus-visible{opacity:1;outline:none;background:#ffffffeb;border-color:#3b82f6b3;color:#0f172aeb}.extable-root th:hover .extable-filter-sort-trigger{opacity:.55}.extable-root th[data-extable-fs-active="1"] .extable-filter-sort-trigger,.extable-root th[data-extable-sort-dir] .extable-filter-sort-trigger{opacity:.75}.extable-root th:hover[data-extable-fs-active="1"] .extable-filter-sort-trigger,.extable-root th:hover[data-extable-sort-dir] .extable-filter-sort-trigger{opacity:1}.extable-root .cell-nowrap{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.extable-root .cell-wrap{white-space:pre-wrap;text-overflow:clip;overflow-wrap:anywhere}.extable-root .align-left{text-align:left}.extable-root .align-right{text-align:right}.extable-root td[data-extable-diag-message]:hover:after{content:attr(data-extable-diag-message);position:absolute;top:6px;left:calc(100% + 10px);max-width:360px;padding:8px 10px;border-radius:10px;background:#111827;color:#f8fafc;font-size:12px;line-height:1.25;box-shadow:0 12px 28px #00000047;border:1px solid rgba(148,163,184,.35);white-space:pre-wrap;z-index:20}.extable-root td[data-extable-diag-message]:hover:before{content:"";position:absolute;top:14px;left:calc(100% + 2px);width:0;height:0;border:7px solid transparent;border-right-color:#111827;z-index:21}.extable-root .extable-context-menu{border:none;padding:6px 0;border-radius:8px;background:#fffffffa;box-shadow:0 18px 38px #00000040,0 8px 12px #0000002e;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);min-width:200px;position:fixed;margin:0;inset:auto;z-index:1000;pointer-events:auto}.extable-root .extable-context-menu::backdrop{background:transparent}.extable-root .extable-context-menu hr.extable-context-sep{border:0;border-top:1px solid #e5e7eb;margin:6px 0}.extable-root .extable-context-menu button{display:flex;gap:8px;align-items:center;width:100%;padding:8px 14px;background:transparent;border:none;font:inherit;text-align:left;cursor:pointer}.extable-root .extable-context-menu button:hover,.extable-root .extable-context-menu button:focus-visible{background:#3b82f61f;outline:none}.extable-root .extable-search-sidebar,.extable-root .extable-filter-sort-sidebar{flex:0 0 0px;width:0px;min-width:0;border-left:0px solid #e5e7eb;background:#fffffffa;border:1px solid rgba(148,163,184,.45);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;display:flex;flex-direction:column;gap:10px;padding:0;transform:translate(12px);opacity:0;pointer-events:none;transition:flex-basis .18s ease-out,width .18s ease-out,padding .18s ease-out,border-left-width .18s ease-out,opacity .18s ease-out,transform .18s ease-out}.extable-root.extable-search-open .extable-search-sidebar,.extable-root.extable-filter-sort-open .extable-filter-sort-sidebar{flex-basis:440px;width:440px;padding:12px;border-left-width:1px;opacity:1;transform:translate(0);pointer-events:auto}.extable-root .extable-search-sidebar input,.extable-root .extable-search-sidebar button{border-radius:8px;border:1px solid rgba(148,163,184,.7);background:#fff;font-family:inherit;font-size:.85rem}.extable-root .extable-search-sidebar input[type=checkbox],.extable-root .extable-filter-sort-sidebar input[type=checkbox]{width:16px;height:16px;accent-color:#0f172a;vertical-align:middle}.extable-root .extable-search-sidebar input{padding:6px 8px}.extable-root .extable-search-sidebar button{padding:6px 10px;cursor:pointer}@keyframes extable-spin{to{transform:rotate(360deg)}}.extable-root .extable-filter-sort-header{display:flex;flex-direction:column;gap:8px}.extable-root .extable-filter-sort-row{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}.extable-root .extable-filter-sort-title{font-weight:700;color:#0f172a}.extable-root .extable-filter-sort-close{width:28px;height:28px;border-radius:8px;border:1px solid rgba(148,163,184,.5);background:#fffc;cursor:pointer}.extable-root .extable-filter-sort-body{display:flex;flex-direction:column;gap:12px;min-height:0;flex:1;overflow:hidden;border:1px solid rgba(148,163,184,.35);border-radius:0;padding:10px;background:#f8fafcb3}.extable-root .extable-filter-sort-section{display:flex;flex-direction:column;gap:8px;border:1px solid rgba(148,163,184,.25);border-radius:10px;padding:10px;background:#fff}.extable-root .extable-filter-sort-section-filter{flex:1;min-height:0}.extable-root .extable-filter-sort-section-sort{flex:0 0 auto}.extable-root .extable-filter-sort-section-title{font-weight:700;color:#0f172a}.extable-root .extable-filter-sort-values{min-height:0;flex:1;overflow:auto;border:1px solid rgba(148,163,184,.35);border-radius:10px;padding:8px;background:#ffffffe6}.extable-root .extable-filter-sort-values label{display:grid;grid-template-columns:26px 1fr;gap:8px;align-items:center;padding:6px;border-radius:8px}.extable-root .extable-filter-sort-values label:hover{background:#3b82f614}.extable-root .extable-filter-sort-actions{display:flex;gap:8px;flex-wrap:nowrap}.extable-root .extable-filter-sort-actions label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.extable-root .extable-filter-sort-actions[data-align=split]{justify-content:space-between}.extable-root .extable-filter-sort-actions[data-align=split] button[data-extable-fs=select-none]{margin-right:auto}.extable-root .extable-filter-sort-actions[data-align=right]{justify-content:flex-end}.extable-root .extable-filter-sort-actions button{padding:6px 10px;border-radius:10px;border:1px solid rgba(148,163,184,.55);background:#ffffffe6;cursor:pointer}.extable-root .extable-filter-sort-actions button:hover,.extable-root .extable-filter-sort-actions button:focus-visible{outline:none;border-color:#3b82f6b3}.extable-root .extable-filter-sort-actions button[data-extable-fs=apply-filter],.extable-root .extable-filter-sort-actions button[data-active="1"]{background:#0f172a;color:#f8fafc;border-color:#0f172a}.extable-tooltip{position:absolute;pointer-events:none;z-index:9999;display:none;max-width:360px;padding:8px 10px;border-radius:10px;background:#111827;color:#f8fafc;font-size:12px;line-height:1.25;box-shadow:0 12px 28px #00000047;border:1px solid rgba(148,163,184,.35);white-space:pre-wrap}.extable-tooltip[data-visible="1"]{display:block}.extable-tooltip:after{content:"";position:absolute;top:10px;width:0;height:0;border:7px solid transparent}.extable-tooltip[data-side=right]:after{left:-14px;border-right-color:#111827}.extable-tooltip[data-side=left]:after{right:-14px;border-left-color:#111827}.extable-root .extable-search-header{display:flex;flex-direction:column;gap:8px}.extable-root .extable-search-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.extable-root .extable-search-row label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.extable-root .extable-search-label{flex:1;display:flex;gap:8px;align-items:center}.extable-root .extable-search-title{font-weight:700;color:#0f172a}.extable-root .extable-search-close{border:none;background:transparent;font-size:18px;line-height:1;padding:6px 8px;cursor:pointer}.extable-root .extable-search-status{justify-content:space-between;font-size:12px;color:#475569}.extable-root .extable-search-error{color:#b91c1c}.extable-root .extable-search-body{display:flex;flex-direction:column;gap:10px;min-height:0}.extable-root .extable-search-body label{display:inline-flex;align-items:center;gap:4px;font-size:.85rem}.extable-root .extable-search-actions{display:flex;gap:8px;flex-wrap:wrap}.extable-root .extable-search-actions button{padding:6px 10px;border-radius:8px;border:1px solid #d0d7de;background:#fff;cursor:pointer}.extable-root .extable-search-actions button:disabled{opacity:.5;cursor:default}.extable-root .extable-search-results{flex:1;min-height:0;overflow:auto;border:1px solid #e5e7eb;border-radius:10px;background:#fff;font-size:13px}.extable-root .extable-search-table{width:100%;border-collapse:collapse;font-size:13px;table-layout:fixed}.extable-root .extable-search-table th,.extable-root .extable-search-table td{border-bottom:1px solid #eef2f7;padding:6px 8px;vertical-align:middle;line-height:1.4}.extable-root .extable-search-table td{color:#1f2937}.extable-root .extable-search-table th{position:sticky;top:0;background:#fff;z-index:1;text-align:left;color:#334155;font-weight:700}.extable-root .extable-search-table th:first-child,.extable-root .extable-search-table td:first-child{width:72px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.extable-root .extable-search-table th:nth-child(2),.extable-root .extable-search-table td:nth-child(2){width:auto;min-width:0}.extable-root .extable-search-table td:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.extable-root .extable-search-result-row{cursor:pointer}.extable-root .extable-search-result-row:hover,.extable-root .extable-search-result-row:focus-visible{outline:none;background:#3b82f614}.extable-root .extable-search-result-row[data-active="1"]{background:#3b82f61f}.extable-root .extable-search-sidebar[data-extable-fr-readonly="1"] [data-extable-fr=replace-row],.extable-root .extable-search-sidebar[data-extable-fr-readonly="1"] [data-extable-fr=replace-toggle-row],.extable-root .extable-search-sidebar[data-extable-fr-readonly="1"] [data-extable-fr-only=replace]{display:none!important}.extable-root .extable-toast{border-radius:8px;padding:10px 14px;background:#19191ceb;color:#f8fafc;box-shadow:0 12px 30px #00000047,0 6px 12px #0000002e;font-size:13px;max-width:320px;line-height:1.4}.extable-root .extable-toast[data-variant=error]{background:#dc2626eb}

package/dist/index.d.ts

@@ -0,0 +1,177 @@
+import "./styles.css";
+import { type FindReplaceMode } from "./findReplace";
+import type { CoreOptions, InternalRow, NullableData, Schema, SelectionListener, SelectionSnapshot, TableConfig, TableState, TableStateListener, UndoRedoHistory, Updater, View, RowStateSnapshot, RowStateListener } from "./types";
+export * from "./types";
+export type { FindReplaceMatch, FindReplaceMode, FindReplaceOptions, FindReplaceState, } from "./findReplace";
+export { FindReplaceController } from "./findReplace";
+export interface CoreInit<T extends object = Record<string, unknown>> {
+    root: HTMLElement;
+    defaultData: NullableData<T>;
+    defaultView: View;
+    schema: Schema<any>;
+    options?: CoreOptions;
+}
+export declare class ExtableCore<T extends object = Record<string, unknown>, R extends object = T> {
+    private root;
+    private shell;
+    private viewportEl;
+    private viewportResizeObserver;
+    private dataModel;
+    private dataLoaded;
+    private loadingEnabled;
+    private commandQueue;
+    private lockManager;
+    private renderer;
+    private selectionManager;
+    private renderMode;
+    private editMode;
+    private lockMode;
+    private server?;
+    private user?;
+    private unsubscribe?;
+    private resizeHandler;
+    private scrollHandler;
+    private viewportState;
+    private rafId;
+    private contextMenu;
+    private contextMenuRowId;
+    private handleGlobalPointer;
+    private toast;
+    private toastTimer;
+    private findReplace;
+    private findReplaceSidebar;
+    private findReplaceSidebarUnsub;
+    private findReplaceEnabled;
+    private findReplaceUiEnabled;
+    private findReplaceEnableSearch;
+    private mounted;
+    private isCellReadonly;
+    private resolveRowId;
+    private filterSortSidebar;
+    private filterSortSidebarUnsub;
+    private filterSortKeydown;
+    private filterSortClickCapture;
+    private filterSortOpenEvent;
+    private filterSortActiveColumnKey;
+    private filterSortDraft;
+    private tableStateListeners;
+    private selectionListeners;
+    private lastTableState;
+    private lastSelectionSnapshot;
+    private selectionRanges;
+    private activeCell;
+    private activeErrors;
+    private rowStateListeners;
+    private lastRowStates;
+    private isSearchPanelVisible;
+    private isFilterSortPanelVisible;
+    private safeRender;
+    constructor(init: CoreInit<T>);
+    private loadInitial;
+    private applyRootDecor;
+    private applyReadonlyClass;
+    private chooseRenderer;
+    private ensureShell;
+    private getScrollHost;
+    private mount;
+    destroy(): void;
+    setRootClass(classNames: string | string[]): void;
+    setRootStyle(style: Partial<CSSStyleDeclaration>): void;
+    setData(data: NullableData<T>): void;
+    setView(view: View): void;
+    getSchema(): Schema;
+    getView(): View;
+    /**
+     * Returns the current table data (includes pending edits in commit mode and formula results).
+     * Note: This is the full dataset (not affected by view filters/sorts). Use `listRows()` for the visible rows.
+     */
+    getData(): R[];
+    /**
+     * Returns the raw dataset without pending edits and without formula results.
+     * Note: This is the full dataset (not affected by view filters/sorts). Use `listRows()` for the visible rows.
+     */
+    getRawData(): T[];
+    getCell<K extends keyof R & string>(rowId: string, colKey: K): R[K] | undefined;
+    getRowIndex(rowId: string): number;
+    getColumnIndex(colKey: string): number;
+    findRowById(rowId: string): InternalRow | null;
+    listRows(): InternalRow[];
+    getAllRows(): InternalRow[];
+    /**
+     * Returns a single row as an object (includes pending edits in commit mode and formula results).
+     * When a number is passed, it is interpreted as the base row index (not affected by view filters/sorts).
+     */
+    getRow(rowIdOrIndex: string | number): R | null;
+    private buildRow;
+    getTableData(): R[];
+    getColumnData<K extends keyof R & string>(colKey: K): R[K][];
+    getPending(): Map<string, Record<string, unknown>>;
+    getPendingRowIds(): string[];
+    hasPendingChanges(): boolean;
+    getPendingCellCount(): number;
+    getCellPending<K extends keyof R & string>(row: string | number, colKey: K): boolean;
+    getDisplayValue<K extends keyof R & string>(row: string | number, colKey: K): string;
+    insertRow(rowData: T, position?: number | string): string | null;
+    deleteRow(row: string | number): boolean;
+    private handleEdit;
+    undo(): void;
+    redo(): void;
+    getUndoRedoHistory(): UndoRedoHistory;
+    private applyInverse;
+    private applyForward;
+    commit(): Promise<RowStateSnapshot<T, R>[]>;
+    private sendCommit;
+    private handleServerEvent;
+    private applyCommand;
+    private ensureContextMenu;
+    private showContextMenu;
+    private handleContextAction;
+    private createBlankRow;
+    private closeContextMenu;
+    private ensureToast;
+    private showToast;
+    private bindViewport;
+    private unbindViewport;
+    remount(target: HTMLElement): void;
+    showSearchPanel(mode?: FindReplaceMode): void;
+    hideSearchPanel(): void;
+    toggleSearchPanel(mode?: FindReplaceMode): void;
+    private updateFindReplaceReadonlyUI;
+    getTableState(): TableState;
+    subscribeTableState(listener: TableStateListener): () => boolean;
+    private emitTableState;
+    getSelectionSnapshot(): SelectionSnapshot;
+    subscribeSelection(listener: SelectionListener): () => boolean;
+    private emitSelection;
+    private getRowStateSnapshot;
+    subscribeRowState(listener: RowStateListener<T, R>): () => boolean;
+    private emitRowState;
+    setCellValue<K extends keyof T & string>(row: number | string, colKey: K, next: Updater<T[K]>): void;
+    setValueToSelection(next: Updater<unknown>): void;
+    openFindReplaceDialog(mode?: FindReplaceMode): void;
+    closeFindReplaceDialog(): void;
+    private ensureFindReplace;
+    private ensureFindReplaceSidebar;
+    private teardownFindReplace;
+    private stableValueKey;
+    private ensureFilterSort;
+    private ensureFilterSortEscape;
+    private ensureFilterSortHeaderIntegration;
+    private ensureFilterSortSidebar;
+    showFilterSortPanel(colKey: string): void;
+    hideFilterSortPanel(): void;
+    toggleFilterSortPanel(colKey: string): void;
+    private buildFilterSortDraft;
+    private renderFilterSortSidebar;
+    private renderFilterSortValues;
+    private applyFilterSortDraft;
+    private clearFilterSortForActiveColumn;
+    private setSortForActiveColumn;
+    private clearSort;
+    private teardownFilterSort;
+    private initViewportState;
+    private updateViewportFromRoot;
+    private flushRender;
+}
+export declare function createTablePlaceholder<T extends object = Record<string, unknown>>(config: TableConfig<T>, options?: CoreOptions): ExtableCore<T, T>;
+export declare function mountTable(target: HTMLElement, core: ExtableCore): ExtableCore<Record<string, unknown>, Record<string, unknown>>;