@lnsy/data-table 0.1.0

package/LICENSE

@@ -0,0 +1,26 @@
+The Unlicense
+
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package/README.md

@@ -0,0 +1,229 @@
+# @lnsy/data-table
+
+A dependency-free tabular data component (`<data-table>`) built on vanilla
+JS, CSS and HTML — no jspreadsheet, no grid library.
+
+One custom element, three presentation modes, all backed by the same data
+model and formula engine.
+
+## Features
+
+### Three modes, one engine
+
+Pick a presentation with the `mode` attribute. The data model, formulas and
+`[[wikilinks]]` behave identically in all three:
+
+| Mode | Attribute | What you get |
+| --- | --- | --- |
+| Spreadsheet | `mode="spreadsheet"` (default) | Full grid with A/B/C column headers and numbered rows, a formula bar, range selection, in-cell editing, and resizable columns and rows. |
+| Table | `mode="table"` | Searchable, sortable record table. The first data row becomes the header; click a header to sort ascending/descending (numeric-aware); a live counter shows filtered vs. total records. |
+| List | `mode="list"` | Searchable single-column list built from the first column; empty cells are skipped. |
+
+### Spreadsheet editing
+
+- Click to select; drag or Shift+Arrow to extend a range selection; arrow
+  keys and Tab/Shift+Tab move the active cell.
+- Double-click, press Enter, or just start typing to edit a cell. Enter
+  commits and moves down, Tab/Shift+Tab commits and moves sideways, Escape
+  cancels.
+- Delete/Backspace clears the selection.
+- Drag the edge of a column or row header to resize it; double-click the
+  edge to snap back to the default size.
+- The formula bar shows the raw contents of the active cell (formulas
+  included), and cells that contain formulas are visually flagged.
+- `read-only` disables all editing while keeping selection, navigation and
+  copy.
+
+### Formulas
+
+Cells starting with `=` are evaluated by the built-in, dependency-free
+formula engine (`src/formula.js`):
+
+```text
+=SUM(A1:A5)                 =IF(A1>2, "yes", "no")
+=A1&B1                      =ROUND(A1*B1, 2)
+=IFERROR(HTTP(…), "n/a")    =CONCAT("Q", 1)
+```
+
+- **References** — `A1`, absolute `\$B\$2`, and ranges `A1:B10` (ranges are
+  valid inside functions).
+- **Operators** — `+ - * / ^ %` (modulo), `&` (string concat), and
+  comparisons `= <> < > <= >=`, with parentheses and unary minus.
+- **Literals** — numbers, `"strings"` (escape `"` as `""`), `TRUE`/`FALSE`.
+
+| Category | Functions |
+| --- | --- |
+| Math | `SUM`, `AVERAGE`/`AVG`, `MIN`, `MAX`, `COUNT`, `COUNTA`, `ABS`, `ROUND`, `FLOOR`, `CEILING`/`CEIL`, `SQRT`, `POWER`/`POW`, `MOD` |
+| Text | `CONCAT`/`CONCATENATE`, `LEN`, `UPPER`, `LOWER`, `TRIM` |
+| Logic | `IF`, `IFERROR`, `AND`, `OR`, `NOT` |
+| Date | `TODAY`, `NOW` |
+
+`IF` and `IFERROR` short-circuit: only the taken branch is evaluated, which
+matters when a branch hits the network. Circular references are detected and
+reported as `#CIRCULAR!`; other errors surface as `#SYNTAX!`, `#NAME?`,
+`#HTTP!` or `#NOENDPOINT!`.
+
+### Live data from formulas
+
+Formulas can fetch over HTTP, with dotted-path extraction into the parsed
+JSON (numeric segments index arrays):
+
+```text
+=HTTP("https://api.example.com/status")
+=HTTP("https://api.frankfurter.app/latest?from=USD", "rates.EUR")
+=HTTPJSON("https://…", "items.0.name")
+=ENDPOINT("rates", "rates.EUR")
+```
+
+- `HTTP(url)` returns the response body (text, or stringified JSON); pass a
+  second argument to extract a value from the parsed JSON.
+- `HTTPJSON(url, path)` always parses the body as JSON.
+- `ENDPOINT("name", path?)` reads a URL registered from JavaScript:
+
+```js
+table.setEndpoints({ rates: 'https://api.frankfurter.app/latest?from=USD' });
+```
+
+Responses are cached for 30 seconds and concurrent identical requests are
+deduplicated; failed requests are only cached for 3 seconds so retries
+happen quickly.
+
+### Wikilinks
+
+`[[Page Name]]` and `[[Page Name|label]]` render as links inside any cell:
+
+- Set `wikilink-base-url="https://…/"` and links open
+  `${base}${encodeURIComponent(target)}` in a new tab.
+- Otherwise, clicking a link dispatches a bubbling `wikilink-navigate` event
+  with `{ detail: { target } }`, which the host application can handle
+  (routing, filtering, opening a panel…).
+
+### Copy & paste
+
+Ctrl/Cmd+C/X/V work inside the grid and interoperate with Excel, Numbers
+and Google Sheets via tab-separated values. Pasting a multi-cell block
+expands the grid to fit. Programmatic equivalents: `selectionToTSV()`,
+`copySelection()` and `pasteText(text)`.
+
+### File I/O
+
+The helpers in `src/file-io.js` load, save, import and export an element's
+data. Wire them to your own buttons or menus; they operate on any
+`<data-table>` instance:
+
+| Function | Direction | Format |
+| --- | --- | --- |
+| `saveLSS(table, filename)` / `loadLSS(table, file)` | export / import | Native `.lss` (JSON; keeps formulas as `=…` strings; reads older v1/v2 files) |
+| `exportCSV(table, filename)` / `importCSV(table, file)` | export / import | CSV (export writes computed values, like spreadsheet apps) |
+| `exportJSON(table, filename)` / `importJSON(table, file)` | export / import | JSON two-dimensional array |
+| `importSpreadsheetFile(table, file)` | import | XLSX, XLS and ODS |
+
+These helpers are the package's only code that uses an npm dependency
+(`xlsx`, for the spreadsheet import); the component itself has none.
+
+### Theming
+
+Styles ship as `@lnsy/data-table/data-table.css`, scoped to the component
+(`data-table`, `.dt-*`, `a.wikilink`) so nothing leaks into your page. The
+look is driven by CSS custom properties defined in the package's
+`styles/variables.css` — a "dataroom" theme (warm paper, dark-red accents)
+with an automatic dark scheme via `prefers-color-scheme`. Import that file
+or define your own values for the properties (e.g. `--selection-bg`,
+`--grid-cell-height`) to re-theme the component.
+
+Single sheet by design.
+
+## Install
+
+```bash
+npm install @lnsy/data-table
+```
+
+## Usage
+
+Import the module (this registers the `<data-table>` custom element) and the
+stylesheet:
+
+```js
+import '@lnsy/data-table';
+import '@lnsy/data-table/data-table.css';
+```
+
+Then use the element anywhere in your HTML:
+
+```html
+<data-table id="grid" mode="spreadsheet" rows="20" cols="8"></data-table>
+```
+
+The class is also exported for programmatic use:
+
+```js
+import DataTable from '@lnsy/data-table';
+```
+
+### Attributes
+
+| Attribute           | Values                             | Default        |
+| ------------------- | ---------------------------------- | -------------- |
+| `mode`              | `spreadsheet` \| `table` \| `list` | `spreadsheet`  |
+| `read-only`         | boolean                            | off            |
+| `rows` / `cols`     | integers (spreadsheet mode)        | 50 / 12        |
+| `wikilink-base-url` | URL prefix for `[[wikilinks]]`     | —              |
+
+### Events
+
+| Event               | Fired when                    | `detail`                 |
+| ------------------- | ----------------------------- | ------------------------ |
+| `change`            | any cell is edited            | `{ row, col, value }`    |
+| `selection-change`  | the active cell moves         | `{ row, col }`           |
+| `wikilink-navigate` | a `[[wikilink]]` is clicked   | `{ target }`             |
+
+### Element API
+
+```js
+const table = document.querySelector('data-table');
+
+table.setData([['name', 'qty'], ['nails', '100']]); // replace the contents
+table.getData();              // deep copy of the raw grid
+table.getComputedValue(1, 1); // formula-evaluated cell value
+table.setCellValue(1, 1, '=A1*2');
+table.setEndpoints({ rates: 'https://api.frankfurter.app/latest?from=USD' });
+await table.recalculate();    // re-run every formula and re-render
+table.insertRow();            // append a row (insertRow(5) appends five)
+table.insertColumn();         // append a column
+table.clearSelection();       // blank every cell in the selection
+table.selectionToTSV();       // TSV of the current selection
+table.pasteText('a\tb\nc\td'); // write a TSV block at the active cell
+```
+
+## Development
+
+This repository is the package's development home; the npm package itself
+only exports `<data-table>` (see `src/index.js`). The demo pages, command
+panel wiring and file menus live in the root `index.js` and are not part of
+the published package.
+
+```bash
+npm install        # install dependencies
+npm start          # dev server on http://localhost:3000
+npm run build      # production bundle in dist/
+npm run test:unit  # vitest unit tests (tests/unit/)
+npm test           # playwright end-to-end tests (tests/e2e/)
+```
+
+Demo pages: `demo.html` links to one demo per feature (endpoints, wikilinks,
+copy-paste, file I/O, table/list modes, live chart).
+
+## Publishing
+
+```bash
+npm version patch   # or minor / major
+npm publish         # prepublishOnly builds and runs the unit tests
+```
+
+Verify the package contents with `npm pack --dry-run`: only `src/`,
+`styles/`, `README.md` and `LICENSE` ship.
+
+## License
+
+[Unlicense](LICENSE) — public domain.

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "@lnsy/data-table",
+  "version": "0.1.0",
+  "description": "A dependency-free <data-table> web component: spreadsheet, table and list modes with formulas, endpoint lookups, wikilinks and file I/O.",
+  "main": "src/index.js",
+  "module": "src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./data-table.css": "./src/data-table.css"
+  },
+  "type": "module",
+  "author": "Lindsey Mysse <lindsey@example.com>",
+  "license": "Unlicense",
+  "keywords": [
+    "data-table",
+    "spreadsheet",
+    "custom-elements",
+    "web-component",
+    "vanilla-js",
+    "grid",
+    "formulas"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lnsy-dev/data-table.git"
+  },
+  "bugs": {
+    "url": "https://github.com/lnsy-dev/data-table/issues"
+  },
+  "homepage": "https://github.com/lnsy-dev/data-table#readme",
+  "files": [
+    "src/",
+    "styles/",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "test": "playwright test",
+    "test:ui": "playwright test --ui",
+    "test:prod": "npm run build && playwright test --project=production",
+    "test:unit": "vitest run",
+    "test:mutation": "stryker run",
+    "start": "webpack serve",
+    "build": "NODE_ENV=production webpack build",
+    "prepublishOnly": "npm run build && npm run test:unit"
+  },
+  "dependencies": {
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@lnsy/charts": "file:../charts",
+    "@lnsy/command-panel": "^0.1.0",
+    "@playwright/test": "^1.62.1",
+    "@stryker-mutator/core": "^9.6.1",
+    "@stryker-mutator/vitest-runner": "^9.6.1",
+    "@swc/core": "^1.9.3",
+    "copy-webpack-plugin": "^14.0.0",
+    "css-loader": "^7.1.2",
+    "cssnano": "^7.1.2",
+    "dotenv": "^17.2.2",
+    "happy-dom": "^20.14.0",
+    "html-webpack-plugin": "^5.6.3",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.5.6",
+    "postcss-loader": "^8.2.0",
+    "serve": "^14.2.6",
+    "style-loader": "^4.0.0",
+    "swc-loader": "^0.2.6",
+    "vitest": "^3.2.7",
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "^5.2.3"
+  }
+}

package/src/data-table.css

@@ -0,0 +1,327 @@
+/*
+
+  <data-table> component stylesheet.
+
+  Ships with the @lnsy/data-table npm package. Everything here is scoped to
+  the component (data-table, .dt-*, a.wikilink) and the body classes it sets
+  during column/row resizing.
+
+  The rules consume the theme custom properties from the aaron-rss
+  dataroom theme (--border, --surface, --surface-alt, --muted, --accent,
+  --secondary, --font-ui, --font-mono, …), which this file imports. Light
+  and dark schemes come from variables.css via `prefers-color-scheme`.
+  Page-level styles (fonts, body, headings, buttons) stay in the host
+  application's CSS.
+
+*/
+
+@import '../styles/variables.css';
+
+data-table {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: 0.85rem;
+}
+
+data-table:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.dt-root {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* ── Formula bar ──────────────────────────────────────────── */
+
+.dt-formula-bar {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  border: 1px solid var(--border);
+  background: var(--background-light);
+  box-shadow: var(--box-shadow-inset);
+}
+
+.dt-cell-ref {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 4.5rem;
+  padding: 0 0.75rem;
+  font-family: var(--font-ui);
+  font-weight: var(--font-weight-bold);
+  color: var(--accent);
+  border-right: 1px solid var(--border);
+}
+
+.dt-formula-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--foreground);
+  font-family: var(--font-mono);
+  font-size: 0.9rem;
+  padding: 0.35rem 0.6rem;
+}
+
+.dt-formula-input:focus {
+  outline: none;
+}
+
+/* ── Toolbar (table/list modes) ───────────────────────────── */
+
+.dt-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.dt-toolbar label {
+  font-family: var(--font-ui);
+  color: var(--muted);
+  letter-spacing: 0.05em;
+}
+
+.dt-toolbar input[type='search'] {
+  flex: 1;
+  max-width: 24rem;
+  padding: 0.3rem 0.6rem;
+  border: 1px solid var(--border);
+  background: var(--background-light);
+  box-shadow: var(--box-shadow-inset);
+  color: var(--foreground);
+  font-family: var(--font-body);
+  font-size: 0.85rem;
+}
+
+.dt-toolbar input[type='search']:focus {
+  outline: none;
+  border-color: var(--accent);
+}
+
+.dt-count {
+  font-family: var(--font-ui);
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+/* ── Grid ─────────────────────────────────────────────────── */
+
+.dt-grid-scroll {
+  overflow: auto;
+  border: 1px solid var(--border);
+  max-height: 80vh;
+  background: var(--surface);
+}
+
+table.dt-grid {
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  width: max-content;
+  min-width: 100%;
+}
+
+.dt-grid th,
+.dt-grid td {
+  border-right: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  padding: 0 0.5rem;
+  height: var(--grid-cell-height);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.dt-grid th {
+  font-family: var(--font-ui);
+  font-weight: var(--font-weight-semibold);
+  font-size: 0.78rem;
+  letter-spacing: 0.04em;
+  text-align: center;
+  color: var(--muted);
+  background: var(--surface-alt);
+  position: sticky;
+  user-select: none;
+}
+
+.dt-grid thead th {
+  top: 0;
+  z-index: 2;
+}
+
+.dt-grid .dt-row-header {
+  left: 0;
+  z-index: 1;
+  min-width: 3rem;
+}
+
+.dt-grid thead th.dt-corner {
+  left: 0;
+  top: 0;
+  z-index: 3;
+  min-width: 3rem;
+}
+
+.dt-grid td.dt-cell {
+  cursor: cell;
+  background: var(--surface);
+}
+
+.dt-grid tbody tr:nth-child(even) td.dt-cell {
+  background: var(--interactive-hover);
+}
+
+.dt-grid td.dt-in-range {
+  background: var(--selection-bg) !important;
+}
+
+.dt-grid td.dt-active {
+  outline: 2px solid var(--neutral-1);
+  outline-offset: -2px;
+  background: var(--surface) !important;
+}
+
+.dt-has-formula {
+  color: var(--secondary);
+}
+
+/* Cell editor */
+.dt-editor {
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: var(--background-light);
+  color: var(--foreground);
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+.dt-editor:focus {
+  outline: none;
+}
+
+/* Sortable headers (table mode) */
+th.dt-sortable {
+  cursor: pointer;
+}
+
+th.dt-sortable:hover {
+  color: var(--accent);
+}
+
+th.dt-sorted {
+  color: var(--accent);
+}
+
+/* ── Column & row resizing (spreadsheet mode) ─────────────── */
+
+/* Hover state on a resizable edge: accent line + resize cursor. */
+th.dt-col-resize {
+  cursor: col-resize;
+}
+
+th.dt-row-resize {
+  cursor: row-resize;
+}
+
+th.dt-col-resize::after,
+th.dt-row-resize::after {
+  content: '';
+  position: absolute;
+  background: var(--accent);
+  opacity: 0.55;
+  pointer-events: none;
+}
+
+th.dt-col-resize::after {
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+}
+
+th.dt-row-resize::after {
+  left: 0;
+  bottom: -3px;
+  height: 6px;
+  width: 100%;
+}
+
+/* Keep the cursor consistent while dragging past the header. */
+body.dt-resizing {
+  user-select: none;
+}
+
+body.dt-col-resizing,
+body.dt-col-resizing * {
+  cursor: col-resize !important;
+}
+
+body.dt-row-resizing,
+body.dt-row-resizing * {
+  cursor: row-resize !important;
+}
+
+/* ── Footer / status ──────────────────────────────────────── */
+
+.dt-footer {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  font-family: var(--font-ui);
+  font-size: 0.8rem;
+  color: var(--muted);
+}
+
+.dt-status {
+  color: var(--accent);
+}
+
+/* ── Wikilinks inside cells ───────────────────────────────── */
+
+a.wikilink {
+  color: var(--color-link);
+  font-weight: var(--font-weight-bold);
+  text-decoration: underline dotted;
+  text-decoration-color: var(--neutral-2);
+  text-underline-offset: 0.2em;
+  cursor: pointer;
+}
+
+a.wikilink:hover {
+  color: var(--highlight-bright);
+  text-decoration-style: solid;
+}
+
+/* ── List mode ────────────────────────────────────────────── */
+
+ul.dt-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  border: 1px solid var(--border);
+  background: var(--surface);
+}
+
+ul.dt-list li {
+  position: relative;
+  padding: 0.45rem 1rem 0.45rem 2.2rem;
+  border-bottom: 1px solid var(--border);
+}
+
+ul.dt-list li:last-child {
+  border-bottom: none;
+}
+
+ul.dt-list li::before {
+  content: '☞';
+  position: absolute;
+  left: 0.8rem;
+  color: var(--color-link);
+}