@argus-table/react 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Joessst-Dev and Argus Table contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+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 OR COPYRIGHT HOLDERS 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.

package/README.md

@@ -1,3 +1,98 @@
-# Temporary Holding Version
+# @argus-table/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React components for [`<argus-table>`](https://www.npmjs.com/package/argus-table): `<ArgusTable>` and `<ArgusColumn>`, with typed props and typed events. The row type is inferred from `data`.
+
+**[Docs and live examples](https://joessst-dev.github.io/argus-table/)** · [GitHub](https://github.com/Joessst-Dev/argus-table)
+
+## Install
+
+```bash
+npm i @argus-table/react @argus-table/themes
+```
+
+`argus-table` comes with it. React 18.3 or 19 is a peer dependency.
+
+## A first table
+
+```tsx
+import { ArgusTable, type ColumnDef } from '@argus-table/react';
+import '@argus-table/themes/default.css';
+
+interface Order {
+  id: string;
+  customer: string;
+  total: number;
+}
+
+const columns: ColumnDef<Order>[] = [
+  { id: 'id', header: 'Order', accessor: 'id', width: 90, pin: 'start' },
+  { id: 'customer', header: 'Customer', accessor: 'customer', width: { flex: 1 }, sortable: true },
+  { id: 'total', header: 'Total', accessor: 'total', width: 110, align: 'end', sortable: true },
+];
+
+export function Orders({ orders }: { orders: Order[] }) {
+  return (
+    <ArgusTable
+      aria-label="Orders"
+      style={{ height: 400 }}
+      columns={columns}
+      data={orders}
+      getRowId={(order) => order.id}
+      onRowClick={(e) => console.log(e.detail.row)} // e.detail.row is an Order
+    />
+  );
+}
+```
+
+- **Props** set the element's properties: `columns`, `data`, `dataSource`, `pinnedRows`, `getRowId`, `rowHeight`, `density`, `overscan`, `sorting`, `columnSizing` and `columnOrder`. Other props (`aria-label`, `className`, `style`, …) go to the element as usual.
+- **Events** are `on*` props that get the element's `CustomEvent`: `onSortChange`, `onColumnResize`, `onColumnReorder`, `onCellClick`, `onRowClick`, `onRangeChange` and `onLoadError`. The details are in the [`argus-table` README](https://www.npmjs.com/package/argus-table).
+- **Cells:** a column's `cell` function returns a string, a number, a DOM node or a Lit template. React elements in cells are planned.
+- **Height:** the table virtualizes its rows, so it needs a bounded height. Its default is 400 px.
+
+## Controlled state
+
+`sorting`, `columnSizing` and `columnOrder` work like a controlled input. Leave the prop out and the table keeps the state itself. Set it, and the table shows what you pass and only proposes changes through the event:
+
+```tsx
+const [sorting, setSorting] = useState<SortState>([]);
+
+<ArgusTable
+  columns={columns}
+  data={orders}
+  sorting={sorting}
+  onSortChange={(e) => setSorting(e.detail.sorting)}
+/>;
+```
+
+## Methods
+
+A `ref` gives you the element, with `refresh()`, `scrollToRow(index)` and `autosizeColumns(ids?)`:
+
+```tsx
+const table = useRef<ArgusTableElement<Order>>(null);
+
+<ArgusTable ref={table} columns={columns} data={orders} />;
+// later
+await table.current?.scrollToRow(0);
+```
+
+## Columns as children
+
+`<ArgusColumn>` renders an `<argus-column>`, so columns can come from a `.map()`. Changing, adding, removing or moving one keeps the widths, the order and the sort:
+
+```tsx
+<ArgusTable<Order> data={orders}>
+  <ArgusColumn columnId="id" header="Order" accessor="id" width={90} pin="start" />
+  <ArgusColumn<Order> columnId="total" header="Total" accessor={(o) => o.total} sortable />
+</ArgusTable>
+```
+
+A non-empty `columns` prop wins over the children.
+
+## Server rendering
+
+The modules start with `'use client'`, so they work in React Server Components apps such as the Next.js App Router. On the server the table renders as an empty `<argus-table>` and fills in once the browser has loaded it.
+
+## License
+
+MIT

package/dist/generated/elements.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ArgusTable as ArgusTableElement, ArgusColumn as ArgusColumnElement } from 'argus-table';
+import type { CellClickDetail, ColumnReorderDetail, ColumnResizeDetail, LoadErrorDetail, RangeChangeDetail, RowClickDetail, SortChangeDetail } from 'argus-table';
+/** The properties of `<argus-table>` that `<ArgusTable>` sets on the element. */
+export type ArgusTableElementProps<T = unknown> = Partial<Pick<ArgusTableElement<T>, 'columns' | 'data' | 'dataSource' | 'pinnedRows' | 'getRowId' | 'rowHeight' | 'density' | 'overscan' | 'sorting' | 'columnSizing' | 'columnOrder'>>;
+/** The event props of `<ArgusTable>`: each gets the element's `CustomEvent`. */
+export interface ArgusTableEventProps<T = unknown> {
+    /** `argus-sort-change`: A sortable header was clicked, or activated with Enter or Space. `detail: { sorting }`: the new order, or the proposed one when `sorting` is controlled. */
+    onSortChange?: (event: CustomEvent<SortChangeDetail>) => void;
+    /** `argus-column-resize`: A column was resized: by dragging its handle, with Alt+Arrow on its header, by a double-click on its handle (fit to content) or by `autosizeColumns()`. `detail: { columnId, width, sizing }`: the new widths, or the proposed ones when `columnSizing` is controlled. Fires on every frame of a drag, and once per column that `autosizeColumns()` changes. */
+    onColumnResize?: (event: CustomEvent<ColumnResizeDetail>) => void;
+    /** `argus-column-reorder`: A column was moved: by dragging its header, or with Alt+Shift+Arrow on its focused header. Columns move within their own group (start-pinned, scrolling, end-pinned). `detail: { columnId, order }`: the new order, or the proposed one when `columnOrder` is controlled. Fires once per move, on drop. */
+    onColumnReorder?: (event: CustomEvent<ColumnReorderDetail>) => void;
+    /** `argus-cell-click`: A body or pinned-row cell was clicked, or Enter was pressed on it. `detail: { row, columnId, value, pinned? }`; `pinned` is `'top'` or `'bottom'` for a pinned row. Fires before `argus-row-click`. */
+    onCellClick?: (event: CustomEvent<CellClickDetail<T>>) => void;
+    /** `argus-row-click`: A body or pinned row was clicked, or Enter was pressed on one of its cells. `detail: { row, rowId, index, pinned? }`; for a pinned row, `index` is its index in its list. */
+    onRowClick?: (event: CustomEvent<RowClickDetail<T>>) => void;
+    /** `argus-range-change`: The visible rows changed. `detail: { start, end }` (row indices, inclusive). */
+    onRangeChange?: (event: CustomEvent<RangeChangeDetail>) => void;
+    /** `argus-load-error`: A `dataSource` page failed to load: `getRows()` rejected or threw. `detail: { error, start, end }` (`end` exclusive). The rows show a Retry button. */
+    onLoadError?: (event: CustomEvent<LoadErrorDetail>) => void;
+}
+/** Props of `<ArgusTable>`: element properties, event handlers and the usual HTML attributes. */
+export type ArgusTableProps<T = unknown> = Omit<React.HTMLAttributes<ArgusTableElement<T>>, keyof ArgusTableElementProps<T> | keyof ArgusTableEventProps<T>> & ArgusTableElementProps<T> & ArgusTableEventProps<T> & {
+    /** The `<argus-table>` element, for its methods. */
+    ref?: React.Ref<ArgusTableElement<T>>;
+};
+/** `<argus-table>` as a React component. */
+export declare const ArgusTable: <T = unknown>(props: ArgusTableProps<T>) => React.ReactElement | null;
+/** The properties of `<argus-column>` that `<ArgusColumn>` sets on the element. */
+export type ArgusColumnElementProps<T = unknown> = Partial<Pick<ArgusColumnElement<T>, 'columnId' | 'header' | 'accessor' | 'cell' | 'width' | 'minWidth' | 'maxWidth' | 'pin' | 'align' | 'sortable' | 'resizable' | 'reorderable'>>;
+/** Props of `<ArgusColumn>`: element properties and the usual HTML attributes. */
+export type ArgusColumnProps<T = unknown> = Omit<React.HTMLAttributes<ArgusColumnElement<T>>, keyof ArgusColumnElementProps<T>> & ArgusColumnElementProps<T> & {
+    /** The `<argus-column>` element. */
+    ref?: React.Ref<ArgusColumnElement<T>>;
+};
+/** `<argus-column>` as a React component. */
+export declare const ArgusColumn: <T = unknown>(props: ArgusColumnProps<T>) => React.ReactElement | null;

package/dist/generated/elements.js

@@ -0,0 +1,41 @@
+"use client";
+import { ownEvents } from "../own-events.js";
+import * as React from "react";
+import { createComponent } from "@lit/react";
+import { ArgusColumn, ArgusTable } from "argus-table";
+// src/generated/elements.ts
+/** `<argus-table>` as a React component. */
+var ArgusTable$1 = ownEvents(createComponent({
+	tagName: "argus-table",
+	elementClass: ArgusTable,
+	react: React,
+	events: {
+		onSortChange: "argus-sort-change",
+		onColumnResize: "argus-column-resize",
+		onColumnReorder: "argus-column-reorder",
+		onCellClick: "argus-cell-click",
+		onRowClick: "argus-row-click",
+		onRangeChange: "argus-range-change",
+		onLoadError: "argus-load-error"
+	},
+	displayName: "ArgusTable"
+}), [
+	"onSortChange",
+	"onColumnResize",
+	"onColumnReorder",
+	"onCellClick",
+	"onRowClick",
+	"onRangeChange",
+	"onLoadError"
+], "ArgusTable");
+/** `<argus-column>` as a React component. */
+var ArgusColumn$1 = createComponent({
+	tagName: "argus-column",
+	elementClass: ArgusColumn,
+	react: React,
+	events: {},
+	displayName: "ArgusColumn"
+});
+export { ArgusColumn$1 as ArgusColumn, ArgusTable$1 as ArgusTable };
+
+//# sourceMappingURL=elements.js.map

package/dist/generated/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","names":["ArgusTable","ArgusTableElement","ArgusColumn","ArgusColumnElement"],"sources":["../../src/generated/elements.ts"],"sourcesContent":["// Generated by tools/generate-wrappers from argus-table's Custom Elements Manifest.\n// Don't edit by hand: run `pnpm --filter @argus-table/react generate`.\nimport * as React from 'react';\nimport { createComponent } from '@lit/react';\nimport { ArgusTable as ArgusTableElement, ArgusColumn as ArgusColumnElement } from 'argus-table';\nimport type {\n  CellClickDetail,\n  ColumnReorderDetail,\n  ColumnResizeDetail,\n  LoadErrorDetail,\n  RangeChangeDetail,\n  RowClickDetail,\n  SortChangeDetail,\n} from 'argus-table';\nimport { ownEvents } from '../own-events.js';\n\n/** The properties of `<argus-table>` that `<ArgusTable>` sets on the element. */\nexport type ArgusTableElementProps<T = unknown> = Partial<\n  Pick<\n    ArgusTableElement<T>,\n    | 'columns'\n    | 'data'\n    | 'dataSource'\n    | 'pinnedRows'\n    | 'getRowId'\n    | 'rowHeight'\n    | 'density'\n    | 'overscan'\n    | 'sorting'\n    | 'columnSizing'\n    | 'columnOrder'\n  >\n>;\n\n/** The event props of `<ArgusTable>`: each gets the element's `CustomEvent`. */\nexport interface ArgusTableEventProps<T = unknown> {\n  /** `argus-sort-change`: A sortable header was clicked, or activated with Enter or Space. `detail: { sorting }`: the new order, or the proposed one when `sorting` is controlled. */\n  onSortChange?: (event: CustomEvent<SortChangeDetail>) => void;\n  /** `argus-column-resize`: A column was resized: by dragging its handle, with Alt+Arrow on its header, by a double-click on its handle (fit to content) or by `autosizeColumns()`. `detail: { columnId, width, sizing }`: the new widths, or the proposed ones when `columnSizing` is controlled. Fires on every frame of a drag, and once per column that `autosizeColumns()` changes. */\n  onColumnResize?: (event: CustomEvent<ColumnResizeDetail>) => void;\n  /** `argus-column-reorder`: A column was moved: by dragging its header, or with Alt+Shift+Arrow on its focused header. Columns move within their own group (start-pinned, scrolling, end-pinned). `detail: { columnId, order }`: the new order, or the proposed one when `columnOrder` is controlled. Fires once per move, on drop. */\n  onColumnReorder?: (event: CustomEvent<ColumnReorderDetail>) => void;\n  /** `argus-cell-click`: A body or pinned-row cell was clicked, or Enter was pressed on it. `detail: { row, columnId, value, pinned? }`; `pinned` is `'top'` or `'bottom'` for a pinned row. Fires before `argus-row-click`. */\n  onCellClick?: (event: CustomEvent<CellClickDetail<T>>) => void;\n  /** `argus-row-click`: A body or pinned row was clicked, or Enter was pressed on one of its cells. `detail: { row, rowId, index, pinned? }`; for a pinned row, `index` is its index in its list. */\n  onRowClick?: (event: CustomEvent<RowClickDetail<T>>) => void;\n  /** `argus-range-change`: The visible rows changed. `detail: { start, end }` (row indices, inclusive). */\n  onRangeChange?: (event: CustomEvent<RangeChangeDetail>) => void;\n  /** `argus-load-error`: A `dataSource` page failed to load: `getRows()` rejected or threw. `detail: { error, start, end }` (`end` exclusive). The rows show a Retry button. */\n  onLoadError?: (event: CustomEvent<LoadErrorDetail>) => void;\n}\n\n/** Props of `<ArgusTable>`: element properties, event handlers and the usual HTML attributes. */\nexport type ArgusTableProps<T = unknown> = Omit<\n  React.HTMLAttributes<ArgusTableElement<T>>,\n  keyof ArgusTableElementProps<T> | keyof ArgusTableEventProps<T>\n> &\n  ArgusTableElementProps<T> &\n  ArgusTableEventProps<T> & {\n    /** The `<argus-table>` element, for its methods. */\n    ref?: React.Ref<ArgusTableElement<T>>;\n  };\n\n/** `<argus-table>` as a React component. */\nexport const ArgusTable = ownEvents(\n  createComponent({\n    tagName: 'argus-table',\n    elementClass: ArgusTableElement,\n    react: React,\n    events: {\n      onSortChange: 'argus-sort-change',\n      onColumnResize: 'argus-column-resize',\n      onColumnReorder: 'argus-column-reorder',\n      onCellClick: 'argus-cell-click',\n      onRowClick: 'argus-row-click',\n      onRangeChange: 'argus-range-change',\n      onLoadError: 'argus-load-error',\n    },\n    displayName: 'ArgusTable',\n  }),\n  [\n    'onSortChange',\n    'onColumnResize',\n    'onColumnReorder',\n    'onCellClick',\n    'onRowClick',\n    'onRangeChange',\n    'onLoadError',\n  ],\n  'ArgusTable',\n) as unknown as <T = unknown>(props: ArgusTableProps<T>) => React.ReactElement | null;\n\n/** The properties of `<argus-column>` that `<ArgusColumn>` sets on the element. */\nexport type ArgusColumnElementProps<T = unknown> = Partial<\n  Pick<\n    ArgusColumnElement<T>,\n    | 'columnId'\n    | 'header'\n    | 'accessor'\n    | 'cell'\n    | 'width'\n    | 'minWidth'\n    | 'maxWidth'\n    | 'pin'\n    | 'align'\n    | 'sortable'\n    | 'resizable'\n    | 'reorderable'\n  >\n>;\n\n/** Props of `<ArgusColumn>`: element properties and the usual HTML attributes. */\nexport type ArgusColumnProps<T = unknown> = Omit<\n  React.HTMLAttributes<ArgusColumnElement<T>>,\n  keyof ArgusColumnElementProps<T>\n> &\n  ArgusColumnElementProps<T> & {\n    /** The `<argus-column>` element. */\n    ref?: React.Ref<ArgusColumnElement<T>>;\n  };\n\n/** `<argus-column>` as a React component. */\nexport const ArgusColumn = createComponent({\n  tagName: 'argus-column',\n  elementClass: ArgusColumnElement,\n  react: React,\n  events: {},\n  displayName: 'ArgusColumn',\n}) as unknown as <T = unknown>(props: ArgusColumnProps<T>) => React.ReactElement | null;\n"],"mappings":";;;;;;;AAgEA,IAAaA,eAAa,UACxB,gBAAgB;CACd,SAAS;CACT,cAAcC;CACd,OAAO;CACP,QAAQ;EACN,cAAc;EACd,gBAAgB;EAChB,iBAAiB;EACjB,aAAa;EACb,YAAY;EACZ,eAAe;EACf,aAAa;CACf;CACA,aAAa;AACf,CAAC,GACD;CACE;CACA;CACA;CACA;CACA;CACA;CACA;AACF,GACA,YACF;;AAgCA,IAAaC,gBAAc,gBAAgB;CACzC,SAAS;CACT,cAAcC;CACd,OAAO;CACP,QAAQ,CAAC;CACT,aAAa;AACf,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { ArgusColumn, ArgusTable } from './generated/elements.js';
+export type { ArgusColumnElementProps, ArgusColumnProps, ArgusTableElementProps, ArgusTableEventProps, ArgusTableProps, } from './generated/elements.js';
+export type { ArgusColumn as ArgusColumnElement, ArgusTable as ArgusTableElement, } from 'argus-table';
+export type { CellClickDetail, CellContent, CellContext, ColumnAlign, ColumnDef, ColumnOrderState, ColumnPin, ColumnReorderDetail, ColumnResizeDetail, ColumnSizingState, ColumnWidth, DataSource, Density, LoadErrorDetail, PinnedRows, RangeChangeDetail, RowClickDetail, RowPin, RowsRequest, RowsResponse, SortChangeDetail, SortItem, SortState, } from 'argus-table';

package/dist/index.js

@@ -0,0 +1,2 @@
+"use client";
+export { ArgusColumn, ArgusTable } from "./generated/elements.js";

package/dist/own-events.d.ts

@@ -0,0 +1,3 @@
+import { type ElementType } from 'react';
+/** Wraps a @lit/react component so that its event props only see the element's own events. */
+export declare function ownEvents(component: ElementType, eventProps: readonly string[], displayName: string): import("react").ForwardRefExoticComponent<Omit<Record<string, unknown>, "ref"> & import("react").RefAttributes<unknown>>;

package/dist/own-events.js

@@ -0,0 +1,38 @@
+"use client";
+import { createElement, forwardRef } from "react";
+// src/own-events.ts
+/** One wrapper per handler, so @lit/react sees the same function on every render. */
+var wrappers = /* @__PURE__ */ new WeakMap();
+/**
+* A handler that only runs for the element's own events. The table's events
+* bubble, so those of a table nested in a cell also pass the outer table.
+*/
+function own(handler) {
+	let wrapper = wrappers.get(handler);
+	if (!wrapper) {
+		wrapper = (event) => {
+			if (event.target === event.currentTarget) handler(event);
+		};
+		wrappers.set(handler, wrapper);
+	}
+	return wrapper;
+}
+/** Wraps a @lit/react component so that its event props only see the element's own events. */
+function ownEvents(component, eventProps, displayName) {
+	const wrapped = forwardRef((props, ref) => {
+		const next = {
+			...props,
+			ref
+		};
+		for (const key of eventProps) {
+			const handler = next[key];
+			if (typeof handler === "function") next[key] = own(handler);
+		}
+		return createElement(component, next);
+	});
+	wrapped.displayName = displayName;
+	return wrapped;
+}
+export { ownEvents };
+
+//# sourceMappingURL=own-events.js.map

package/dist/own-events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"own-events.js","names":[],"sources":["../src/own-events.ts"],"sourcesContent":["import { createElement, forwardRef, type ElementType } from 'react';\n\ntype Handler = (event: Event) => void;\n\n/** One wrapper per handler, so @lit/react sees the same function on every render. */\nconst wrappers = new WeakMap<Handler, Handler>();\n\n/**\n * A handler that only runs for the element's own events. The table's events\n * bubble, so those of a table nested in a cell also pass the outer table.\n */\nfunction own(handler: Handler): Handler {\n  let wrapper = wrappers.get(handler);\n  if (!wrapper) {\n    wrapper = (event) => {\n      if (event.target === event.currentTarget) handler(event);\n    };\n    wrappers.set(handler, wrapper);\n  }\n  return wrapper;\n}\n\n/** Wraps a @lit/react component so that its event props only see the element's own events. */\nexport function ownEvents(\n  component: ElementType,\n  eventProps: readonly string[],\n  displayName: string,\n) {\n  const wrapped = forwardRef<unknown, Record<string, unknown>>((props, ref) => {\n    const next: Record<string, unknown> = { ...props, ref };\n    for (const key of eventProps) {\n      const handler = next[key];\n      if (typeof handler === 'function') next[key] = own(handler as Handler);\n    }\n    return createElement(component, next);\n  });\n  wrapped.displayName = displayName;\n  return wrapped;\n}\n"],"mappings":";;;;AAKA,IAAM,2BAAW,IAAI,QAA0B;;;;;AAM/C,SAAS,IAAI,SAA2B;CACtC,IAAI,UAAU,SAAS,IAAI,OAAO;CAClC,IAAI,CAAC,SAAS;EACZ,WAAW,UAAU;GACnB,IAAI,MAAM,WAAW,MAAM,eAAe,QAAQ,KAAK;EACzD;EACA,SAAS,IAAI,SAAS,OAAO;CAC/B;CACA,OAAO;AACT;;AAGA,SAAgB,UACd,WACA,YACA,aACA;CACA,MAAM,UAAU,YAA8C,OAAO,QAAQ;EAC3E,MAAM,OAAgC;GAAE,GAAG;GAAO;EAAI;EACtD,KAAK,MAAM,OAAO,YAAY;GAC5B,MAAM,UAAU,KAAK;GACrB,IAAI,OAAO,YAAY,YAAY,KAAK,OAAO,IAAI,OAAkB;EACvE;EACA,OAAO,cAAc,WAAW,IAAI;CACtC,CAAC;CACD,QAAQ,cAAc;CACtB,OAAO;AACT"}

package/package.json

@@ -1,6 +1,61 @@
 {
   "name": "@argus-table/react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.2.0",
+  "description": "React components for argus-table: typed props and events for <argus-table> and <argus-column>.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Joessst-Dev/argus-table.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "nx": {
+    "name": "react",
+    "implicitDependencies": [
+      "generate-wrappers"
+    ]
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "dependencies": {
+    "@lit/react": "^1.0.8",
+    "argus-table": "0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@arethetypeswrong/cli": "^0.18.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitest/browser-playwright": "^5.1.0",
+    "playwright": "1.63.0",
+    "publint": "^0.3.25",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "vite": "^8.3.5",
+    "vitest": "^5.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json && publint --strict && attw --pack . --profile esm-only",
+    "generate": "node ../../tools/generate-wrappers/src/cli.ts react",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "lint": "node ../../tools/generate-wrappers/src/cli.ts react --check && eslint .",
+    "test": "vitest run"
+  }
 }