@expressive/ui 0.0.0-stage → 0.1.0

package/dist/select/select.js

@@ -0,0 +1,219 @@
+import { Select as Select$1 } from "./base.js";
+import { Caret } from "../icons/caret.js";
+import { Cross } from "../icons/cross.js";
+import { Portal, style } from "@expressive/dom";
+import { jsx, jsxs } from "@expressive/dom/jsx-runtime";
+
+//#region src/select/select.tsx
+const Root = ({ children }) => {
+	const { disabled } = Select$1.get();
+	return /* @__PURE__ */ jsx("div", {
+		_disabled: disabled,
+		children
+	});
+};
+style(Root, {
+	position: "relative",
+	_disabled: {
+		opacity: "0.6",
+		pointerEvents: "none"
+	}
+});
+const Control = ({ children }) => {
+	const { focused, controlProps } = Select$1.get();
+	return /* @__PURE__ */ jsx("div", {
+		...controlProps,
+		_focused: focused,
+		children
+	});
+};
+style(Control, {
+	display: "flex",
+	alignItems: "center",
+	minHeight: "38px",
+	background: "var(--ui-surface, #fff)",
+	border: "1px solid var(--ui-line, #ccc)",
+	borderRadius: "4px",
+	cursor: "default",
+	transition: "border-color 100ms, box-shadow 100ms",
+	_focused: {
+		borderColor: "var(--ui-accent, #2684ff)",
+		boxShadow: "0 0 0 1px var(--ui-accent, #2684ff)"
+	}
+});
+const Values = ({ children }) => /* @__PURE__ */ jsx("div", { children });
+style(Values, {
+	position: "relative",
+	flex: "1",
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: "4px",
+	minWidth: "0",
+	padding: "2px 8px"
+});
+const Chip = ({ option }) => {
+	const { removeProps } = Select$1.get();
+	return /* @__PURE__ */ jsxs("span", { children: [option.label, /* @__PURE__ */ jsx("button", {
+		...removeProps(option),
+		children: /* @__PURE__ */ jsx(Cross, {})
+	})] });
+};
+style(Chip, {
+	display: "inline-flex",
+	alignItems: "center",
+	minWidth: "0",
+	paddingLeft: "6px",
+	borderRadius: "3px",
+	background: "var(--ui-chip, #e6e6e6)",
+	fontSize: "85%",
+	_button: {
+		display: "flex",
+		marginLeft: "2px",
+		padding: "3px",
+		border: "0",
+		borderRadius: "3px",
+		background: "none",
+		color: "inherit",
+		cursor: "pointer"
+	}
+});
+const Value = ({ option }) => /* @__PURE__ */ jsx("span", { children: option.label });
+style(Value, {
+	position: "absolute",
+	left: "10px",
+	right: "8px",
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap",
+	pointerEvents: "none"
+});
+const Input = () => /* @__PURE__ */ jsx("input", { ...Select$1.get().inputProps });
+style(Input, {
+	flex: "1",
+	width: "0",
+	minWidth: "2px",
+	margin: "0",
+	padding: "4px 0",
+	border: "0",
+	outline: "0",
+	background: "none",
+	color: "inherit",
+	font: "inherit"
+});
+const indicator = {
+	display: "flex",
+	alignSelf: "stretch",
+	alignItems: "center",
+	padding: "0 8px",
+	border: "0",
+	background: "none",
+	color: "var(--ui-muted, #999)",
+	cursor: "pointer"
+};
+const Clear = () => /* @__PURE__ */ jsx("button", {
+	...Select$1.get().clearProps,
+	children: /* @__PURE__ */ jsx(Cross, {})
+});
+style(Clear, indicator);
+const Toggle = () => {
+	const { open, toggleProps } = Select$1.get();
+	return /* @__PURE__ */ jsx("button", {
+		...toggleProps,
+		children: /* @__PURE__ */ jsx(Caret, { _open: open })
+	});
+};
+style(Toggle, indicator, {
+	borderLeft: "1px solid var(--ui-line, #ccc)",
+	margin: "8px 0",
+	_open: { transform: "rotate(180deg)" }
+});
+const Layer = ({ children }) => /* @__PURE__ */ jsx(Portal, {
+	into: "body",
+	children
+});
+const Menu = ({ children }) => /* @__PURE__ */ jsx("ul", {
+	...Select$1.get().menuProps,
+	children
+});
+style(Menu, {
+	position: "fixed",
+	zIndex: "1000",
+	boxSizing: "border-box",
+	maxHeight: "300px",
+	overflowY: "auto",
+	margin: "0",
+	padding: "4px 0",
+	listStyle: "none",
+	background: "var(--ui-surface, #fff)",
+	borderRadius: "4px",
+	boxShadow: "0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1)"
+});
+const Option = ({ option, index }) => {
+	const { active, selected, props } = Select$1.get().optionProps(option, index);
+	return /* @__PURE__ */ jsx("li", {
+		...props,
+		_active: active,
+		_selected: selected,
+		children: option.label
+	});
+};
+style(Option, {
+	padding: "8px 12px",
+	cursor: "default",
+	userSelect: "none",
+	_active: { background: "var(--ui-highlight, #deebff)" },
+	_selected: {
+		background: "var(--ui-accent, #2684ff)",
+		color: "#fff"
+	}
+});
+const Empty = () => /* @__PURE__ */ jsx("li", { children: "No options" });
+style(Empty, {
+	padding: "8px 12px",
+	color: "var(--ui-muted, #999)",
+	textAlign: "center"
+});
+/**
+* Combobox with search, single or multiple selection, keyboard navigation and live announcements.
+*
+* Pieces - `Root`, `Control`, `Values`, `Chip`, `Value`, `Input`, `Clear`, `Toggle`, `Layer`, `Menu`, `Option`,
+* `Empty` - are function components reading `Select.get()`, each styled on its own; pass one as a prop or assign it
+* in a subclass to replace it. Stock pieces are statics. `Layer` portals the menu to the body, so a dialog or a
+* scrolling container does not clip it; the menu sits under the control, flips above when only that fits, and
+* follows scroll and resize.
+*
+* @example
+* <label htmlFor="role">Role</label>
+* <Select id="role" options={roles} value={this.role} onChange={(role) => (this.role = role)} />
+*/
+var Select = class extends Select$1 {
+	static Root = Root;
+	static Control = Control;
+	static Values = Values;
+	static Chip = Chip;
+	static Value = Value;
+	static Input = Input;
+	static Clear = Clear;
+	static Toggle = Toggle;
+	static Layer = Layer;
+	static Menu = Menu;
+	static Option = Option;
+	static Empty = Empty;
+	Root = Root;
+	Control = Control;
+	Values = Values;
+	Chip = Chip;
+	Value = Value;
+	Input = Input;
+	Clear = Clear;
+	Toggle = Toggle;
+	Layer = Layer;
+	Menu = Menu;
+	Option = Option;
+	Empty = Empty;
+};
+
+//#endregion
+export { Select };
+//# sourceMappingURL=select.js.map

package/dist/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":["Base.Select"],"sources":["../../src/select/select.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport { Component } from '@expressive/mvc';\nimport { Portal, style } from '@expressive/dom';\n\nimport { Caret, Cross } from '../icons';\nimport * as Base from './base';\n\ndeclare namespace Select {\n  type Option<T = unknown> = Base.Select.Option<T>;\n  type Value = Base.Select.Value;\n  type Key = Base.Select.Key;\n}\n\nconst Root = ({ children }: { children: Component.Node }): Component.Node => {\n  const { disabled } = Base.Select.get();\n\n  return <div _disabled={disabled}>{children}</div>;\n};\n\nstyle(Root, {\n  position: 'relative',\n  _disabled: {\n    opacity: '0.6',\n    pointerEvents: 'none'\n  }\n});\n\nconst Control = ({ children }: { children: Component.Node }): Component.Node => {\n  const { focused, controlProps } = Base.Select.get();\n\n  return <div {...controlProps} _focused={focused}>{children}</div>;\n};\n\nstyle(Control, {\n  display: 'flex',\n  alignItems: 'center',\n  minHeight: '38px',\n  background: 'var(--ui-surface, #fff)',\n  border: '1px solid var(--ui-line, #ccc)',\n  borderRadius: '4px',\n  cursor: 'default',\n  transition: 'border-color 100ms, box-shadow 100ms',\n  _focused: {\n    borderColor: 'var(--ui-accent, #2684ff)',\n    boxShadow: '0 0 0 1px var(--ui-accent, #2684ff)'\n  }\n});\n\nconst Values = ({ children }: { children: Component.Node }): Component.Node => <div>{children}</div>;\n\nstyle(Values, {\n  position: 'relative',\n  flex: '1',\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  gap: '4px',\n  minWidth: '0',\n  padding: '2px 8px'\n});\n\nconst Chip = ({ option }: { option: Select.Option }): Component.Node => {\n  const { removeProps } = Base.Select.get();\n\n  return (\n    <span>\n      {option.label}\n      <button {...removeProps(option)}>\n        <Cross />\n      </button>\n    </span>\n  );\n};\n\nstyle(Chip, {\n  display: 'inline-flex',\n  alignItems: 'center',\n  minWidth: '0',\n  paddingLeft: '6px',\n  borderRadius: '3px',\n  background: 'var(--ui-chip, #e6e6e6)',\n  fontSize: '85%',\n  _button: {\n    display: 'flex',\n    marginLeft: '2px',\n    padding: '3px',\n    border: '0',\n    borderRadius: '3px',\n    background: 'none',\n    color: 'inherit',\n    cursor: 'pointer'\n  }\n});\n\nconst Value = ({ option }: { option: Select.Option }): Component.Node => <span>{option.label}</span>;\n\nstyle(Value, {\n  position: 'absolute',\n  left: '10px',\n  right: '8px',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n  pointerEvents: 'none'\n});\n\nconst Input = (): Component.Node => <input {...Base.Select.get().inputProps} />;\n\nstyle(Input, {\n  flex: '1',\n  width: '0',\n  minWidth: '2px',\n  margin: '0',\n  padding: '4px 0',\n  border: '0',\n  outline: '0',\n  background: 'none',\n  color: 'inherit',\n  font: 'inherit'\n});\n\nconst indicator = {\n  display: 'flex',\n  alignSelf: 'stretch',\n  alignItems: 'center',\n  padding: '0 8px',\n  border: '0',\n  background: 'none',\n  color: 'var(--ui-muted, #999)',\n  cursor: 'pointer'\n};\n\nconst Clear = (): Component.Node => (\n  <button {...Base.Select.get().clearProps}>\n    <Cross />\n  </button>\n);\n\nstyle(Clear, indicator);\n\nconst Toggle = (): Component.Node => {\n  const { open, toggleProps } = Base.Select.get();\n\n  return (\n    <button {...toggleProps}>\n      <Caret _open={open} />\n    </button>\n  );\n};\n\nstyle(Toggle, indicator, {\n  borderLeft: '1px solid var(--ui-line, #ccc)',\n  margin: '8px 0',\n  _open: {\n    transform: 'rotate(180deg)'\n  }\n});\n\nconst Layer = ({ children }: { children: Component.Node }): Component.Node => <Portal into=\"body\">{children}</Portal>;\n\nconst Menu = ({ children }: { children: Component.Node }): Component.Node => (\n  <ul {...Base.Select.get().menuProps}>{children}</ul>\n);\n\nstyle(Menu, {\n  position: 'fixed',\n  zIndex: '1000',\n  boxSizing: 'border-box',\n  maxHeight: '300px',\n  overflowY: 'auto',\n  margin: '0',\n  padding: '4px 0',\n  listStyle: 'none',\n  background: 'var(--ui-surface, #fff)',\n  borderRadius: '4px',\n  boxShadow: '0 0 0 1px rgba(0, 0, 0, 0.1), 0 4px 11px rgba(0, 0, 0, 0.1)'\n});\n\nconst Option = ({ option, index }: { option: Select.Option; index: number }): Component.Node => {\n  const { active, selected, props } = Base.Select.get().optionProps(option, index);\n\n  return (\n    <li {...props} _active={active} _selected={selected}>\n      {option.label}\n    </li>\n  );\n};\n\nstyle(Option, {\n  padding: '8px 12px',\n  cursor: 'default',\n  userSelect: 'none',\n  _active: {\n    background: 'var(--ui-highlight, #deebff)'\n  },\n  _selected: {\n    background: 'var(--ui-accent, #2684ff)',\n    color: '#fff'\n  }\n});\n\nconst Empty = (): Component.Node => <li>No options</li>;\n\nstyle(Empty, {\n  padding: '8px 12px',\n  color: 'var(--ui-muted, #999)',\n  textAlign: 'center'\n});\n\n/**\n * Combobox with search, single or multiple selection, keyboard navigation and live announcements.\n *\n * Pieces - `Root`, `Control`, `Values`, `Chip`, `Value`, `Input`, `Clear`, `Toggle`, `Layer`, `Menu`, `Option`,\n * `Empty` - are function components reading `Select.get()`, each styled on its own; pass one as a prop or assign it\n * in a subclass to replace it. Stock pieces are statics. `Layer` portals the menu to the body, so a dialog or a\n * scrolling container does not clip it; the menu sits under the control, flips above when only that fits, and\n * follows scroll and resize.\n *\n * @example\n * <label htmlFor=\"role\">Role</label>\n * <Select id=\"role\" options={roles} value={this.role} onChange={(role) => (this.role = role)} />\n */\nclass Select extends Base.Select {\n  static Root = Root;\n  static Control = Control;\n  static Values = Values;\n  static Chip = Chip;\n  static Value = Value;\n  static Input = Input;\n  static Clear = Clear;\n  static Toggle = Toggle;\n  static Layer = Layer;\n  static Menu = Menu;\n  static Option = Option;\n  static Empty = Empty;\n\n  Root = Root;\n  Control = Control;\n  Values = Values;\n  Chip = Chip;\n  Value = Value;\n  Input = Input;\n  Clear = Clear;\n  Toggle = Toggle;\n  Layer = Layer;\n  Menu = Menu;\n  Option = Option;\n  Empty = Empty;\n}\n\nexport { Chip, Clear, Control, Empty, Input, Layer, Menu, Option, Root, Select, Toggle, Value, Values };\n"],"mappings":"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"}

package/dist/table/base.d.ts

@@ -0,0 +1,96 @@
+import { CellSlot, Field, HeadSlot } from "./column.js";
+import { Component, Model } from "@expressive/mvc";
+
+//#region src/table/base.d.ts
+declare namespace Table {
+  interface RowProps<T = any> {
+    data: T;
+    index: number;
+    children: Component.Node;
+  }
+  type Press = Pick<MouseEvent, 'target' | 'currentTarget'>;
+  type Key = Press & Pick<KeyboardEvent, 'key' | 'preventDefault'>;
+  /** A piece: a function component, or a Component class taking the same props. */
+  type Slot<P> = ((props: P) => Component.Node) | (new (...args: any[]) => Model & {
+    render(props: P): Component.Node;
+  });
+  type Wrap = Slot<{
+    children: Component.Node;
+  }>;
+  type Line<T = any> = Slot<RowProps<T>>;
+  type Fill = Slot<{
+    span: number;
+  }>;
+}
+/**
+ * One row: pressing, selection and its ARIA, read off the enclosing `Table`.
+ *
+ * `render` is abstract - a skin extends this and renders the row element, spreading `attrs`.
+ */
+declare class Row<T = any> extends Component {
+  protected table: Table<T>;
+  data: T;
+  index: number;
+  get pressable(): boolean;
+  get selected(): boolean;
+  /** For the row's element: `aria-current` when selected; with `onPress`, focusable and pressed by click, Enter and Space. */
+  get attrs(): {
+    'aria-current': "true" | undefined;
+    readonly tabIndex?: undefined;
+    readonly onClick?: undefined;
+    readonly onKeyDown?: undefined;
+  } | {
+    readonly tabIndex: 0;
+    readonly 'aria-current': "true" | undefined;
+    readonly onClick: (event: Table.Press) => void;
+    readonly onKeyDown: (event: Table.Key) => void;
+  };
+  press(): void;
+  click(event: Table.Press): void;
+  keyDown(event: Table.Key): void;
+  /** Whether a press landed on a control inside the row, which keeps the press. Defaults to the DOM's `closest`. */
+  protected nested(event: Table.Press): boolean;
+  render(_props: {
+    children: Component.Node;
+  }): Component.Node;
+}
+/**
+ * Data table behavior without a look: columns declared as `Column` children, row keys, pressing and selection,
+ * assembled from pieces.
+ *
+ * Every visible piece but `Empty` is a placeholder that throws when rendered - a skin assigns each one it renders. `Row` is
+ * a Component class - one per row, so a change re-renders only the rows it touches; a skin extends it and spreads `attrs`.
+ * `Head` writes `scope="col"` itself and applies the column's `size`.
+ */
+declare class Table<T = any> extends Component {
+  data: readonly T[];
+  /** Stable identity per row; defaults to the row object itself, else the index. */
+  rowKey?: (row: T, index: number) => string | number;
+  onPress?: (row: T, index: number) => void;
+  /** Row to mark selected, compared by identity. */
+  selected?: T;
+  /** Shown in place of rows when `data` is empty. */
+  empty: Component.Node;
+  static Root: Table.Wrap;
+  static Header: Table.Wrap;
+  static Body: Table.Wrap;
+  static Head: HeadSlot;
+  static Row: typeof Row<any>;
+  static Cell: CellSlot;
+  static Empty: Table.Fill;
+  Root: Table.Wrap;
+  Header: Table.Wrap;
+  Body: Table.Wrap;
+  Head: HeadSlot<T>;
+  Row: Table.Line<T>;
+  Cell: CellSlot<T>;
+  Empty: Table.Fill;
+  /** A cell's content when its column has no `format`. */
+  value(row: T, field: Field<T>): Component.Node;
+  render(props: {
+    children?: Component.Node;
+  }): Component.Node;
+}
+//#endregion
+export { Row, Table };
+//# sourceMappingURL=base.d.ts.map

package/dist/table/base.js

@@ -0,0 +1,154 @@
+import { missing, none } from "../piece.js";
+import { Column } from "./column.js";
+import { Component, get } from "@expressive/mvc";
+import { Fragment, childrenOf, jsx, jsxs, propsOf, typeOf } from "@expressive/mvc/jsx-runtime";
+
+//#region src/table/base.tsx
+const CONTROL = "a, button, input, select, textarea, label, summary";
+const IDS = /* @__PURE__ */ new WeakMap();
+let ROWS = 0;
+/**
+* One row: pressing, selection and its ARIA, read off the enclosing `Table`.
+*
+* `render` is abstract - a skin extends this and renders the row element, spreading `attrs`.
+*/
+var Row = class extends Component {
+	table = get(Table);
+	data = void 0;
+	index = 0;
+	get pressable() {
+		return !!this.table.onPress;
+	}
+	get selected() {
+		const { selected } = this.table;
+		return selected !== void 0 && this.data === selected;
+	}
+	/** For the row's element: `aria-current` when selected; with `onPress`, focusable and pressed by click, Enter and Space. */
+	get attrs() {
+		const { pressable, selected } = this;
+		const current = selected ? "true" : void 0;
+		if (!pressable) return { "aria-current": current };
+		return {
+			tabIndex: 0,
+			"aria-current": current,
+			onClick: this.click,
+			onKeyDown: this.keyDown
+		};
+	}
+	press() {
+		this.table.onPress(this.data, this.index);
+	}
+	click(event) {
+		if (!this.nested(event)) this.press();
+	}
+	keyDown(event) {
+		if (event.target !== event.currentTarget || event.key != "Enter" && event.key != " ") return;
+		event.preventDefault();
+		this.press();
+	}
+	/** Whether a press landed on a control inside the row, which keeps the press. Defaults to the DOM's `closest`. */
+	nested(event) {
+		const control = event.target.closest(CONTROL);
+		return !!control && control !== event.currentTarget;
+	}
+	render(_props) {
+		return missing("Table.Row")();
+	}
+};
+/**
+* Data table behavior without a look: columns declared as `Column` children, row keys, pressing and selection,
+* assembled from pieces.
+*
+* Every visible piece but `Empty` is a placeholder that throws when rendered - a skin assigns each one it renders. `Row` is
+* a Component class - one per row, so a change re-renders only the rows it touches; a skin extends it and spreads `attrs`.
+* `Head` writes `scope="col"` itself and applies the column's `size`.
+*/
+var Table = class extends Component {
+	data = [];
+	/** Stable identity per row; defaults to the row object itself, else the index. */
+	rowKey = void 0;
+	onPress = void 0;
+	/** Row to mark selected, compared by identity. */
+	selected = void 0;
+	/** Shown in place of rows when `data` is empty. */
+	empty = "No rows";
+	static Root = missing("Table.Root");
+	static Header = missing("Table.Header");
+	static Body = missing("Table.Body");
+	static Head = missing("Table.Head");
+	static Row = Row;
+	static Cell = missing("Table.Cell");
+	static Empty = none;
+	Root = kind(this).Root;
+	Header = kind(this).Header;
+	Body = kind(this).Body;
+	Head = kind(this).Head;
+	Row = kind(this).Row;
+	Cell = kind(this).Cell;
+	Empty = kind(this).Empty;
+	/** A cell's content when its column has no `format`. */
+	value(row, field) {
+		return row && typeof row == "object" ? row[field.id] : null;
+	}
+	render(props) {
+		const { data, rowKey, Head, Row, Cell } = this;
+		const fields = resolve(props.children);
+		return /* @__PURE__ */ jsxs(this.Root, { children: [/* @__PURE__ */ jsx(this.Header, { children: fields.map((field) => {
+			return /* @__PURE__ */ jsx(field.Head || Head, {
+				field,
+				className: field.className,
+				children: field.name
+			}, field.id || field.index);
+		}) }), /* @__PURE__ */ jsxs(this.Body, { children: [data.length == 0 && /* @__PURE__ */ jsx(this.Empty, { span: fields.length }), data.map((row, index) => /* @__PURE__ */ jsx(Row, {
+			data: row,
+			index,
+			children: fields.map((field) => {
+				return /* @__PURE__ */ jsx(field.Cell || Cell, {
+					field,
+					data: row,
+					className: field.className,
+					children: field.format ? field.format(row, index) : this.value(row, field)
+				}, field.id || field.index);
+			})
+		}, rowKey ? rowKey(row, index) : identity(row, index)))] })] });
+	}
+};
+function identity(row, index) {
+	if (!row || typeof row != "object") return index;
+	let id = IDS.get(row);
+	if (id === void 0) IDS.set(row, id = ++ROWS);
+	return `#${id}`;
+}
+function kind(table) {
+	return table.constructor;
+}
+function resolve(children) {
+	const fields = [];
+	for (const node of flatten(children)) {
+		const type = typeOf(node);
+		if (type !== Column && !(typeof type == "function" && type.prototype instanceof Column)) continue;
+		const props = propsOf(node);
+		const name = props.name ?? "";
+		fields.push({
+			name,
+			id: props.id || (typeof name == "string" ? name.toLowerCase() : ""),
+			className: props.className || "",
+			index: fields.length,
+			Cell: props.Cell,
+			Head: props.Head,
+			format: props.format,
+			size: props.size
+		});
+	}
+	return fields;
+}
+function flatten(children) {
+	const out = [];
+	for (const node of childrenOf(children)) if (typeOf(node) === Fragment) out.push(...flatten(propsOf(node).children));
+	else out.push(node);
+	return out;
+}
+
+//#endregion
+export { Row, Table };
+//# sourceMappingURL=base.js.map

package/dist/table/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/table/base.tsx"],"sourcesContent":["import { Component, get, type Model } from '@expressive/mvc';\nimport { Fragment, childrenOf, propsOf, typeOf } from '@expressive/mvc/jsx-runtime';\n\nimport { missing, none } from '../piece';\nimport { Column, type CellSlot, type Field, type HeadSlot } from './column';\n\ndeclare namespace Table {\n  interface RowProps<T = any> {\n    data: T;\n    index: number;\n    children: Component.Node;\n  }\n\n  type Press = Pick<MouseEvent, 'target' | 'currentTarget'>;\n  type Key = Press & Pick<KeyboardEvent, 'key' | 'preventDefault'>;\n\n  /** A piece: a function component, or a Component class taking the same props. */\n  type Slot<P> = ((props: P) => Component.Node) | (new (...args: any[]) => Model & { render(props: P): Component.Node });\n\n  type Wrap = Slot<{ children: Component.Node }>;\n  type Line<T = any> = Slot<RowProps<T>>;\n  type Fill = Slot<{ span: number }>;\n}\n\nconst CONTROL = 'a, button, input, select, textarea, label, summary';\n\nconst IDS = new WeakMap<object, number>();\n\nlet ROWS = 0;\n\n/**\n * One row: pressing, selection and its ARIA, read off the enclosing `Table`.\n *\n * `render` is abstract - a skin extends this and renders the row element, spreading `attrs`.\n */\nclass Row<T = any> extends Component {\n  protected table = get(Table) as Table<T>;\n\n  data: T = undefined as T;\n  index = 0;\n\n  get pressable(): boolean {\n    return !!this.table.onPress;\n  }\n\n  get selected(): boolean {\n    const { selected } = this.table;\n\n    return selected !== undefined && this.data === selected;\n  }\n\n  /** For the row's element: `aria-current` when selected; with `onPress`, focusable and pressed by click, Enter and Space. */\n  get attrs() {\n    const { pressable, selected } = this;\n    const current = selected ? ('true' as const) : undefined;\n\n    if (!pressable) return { 'aria-current': current };\n\n    return { tabIndex: 0, 'aria-current': current, onClick: this.click, onKeyDown: this.keyDown } as const;\n  }\n\n  press() {\n    this.table.onPress!(this.data, this.index);\n  }\n\n  click(event: Table.Press) {\n    if (!this.nested(event)) this.press();\n  }\n\n  keyDown(event: Table.Key) {\n    if (event.target !== event.currentTarget || (event.key != 'Enter' && event.key != ' ')) return;\n\n    event.preventDefault();\n    this.press();\n  }\n\n  /** Whether a press landed on a control inside the row, which keeps the press. Defaults to the DOM's `closest`. */\n  protected nested(event: Table.Press): boolean {\n    const control = (event.target as Element).closest(CONTROL);\n\n    return !!control && control !== event.currentTarget;\n  }\n\n  render(_props: { children: Component.Node }): Component.Node {\n    return missing('Table.Row')();\n  }\n}\n\n\n/**\n * Data table behavior without a look: columns declared as `Column` children, row keys, pressing and selection,\n * assembled from pieces.\n *\n * Every visible piece but `Empty` is a placeholder that throws when rendered - a skin assigns each one it renders. `Row` is\n * a Component class - one per row, so a change re-renders only the rows it touches; a skin extends it and spreads `attrs`.\n * `Head` writes `scope=\"col\"` itself and applies the column's `size`.\n */\nclass Table<T = any> extends Component {\n  data: readonly T[] = [];\n\n  /** Stable identity per row; defaults to the row object itself, else the index. */\n  rowKey?: (row: T, index: number) => string | number = undefined;\n\n  onPress?: (row: T, index: number) => void = undefined;\n\n  /** Row to mark selected, compared by identity. */\n  selected?: T = undefined;\n\n  /** Shown in place of rows when `data` is empty. */\n  empty: Component.Node = 'No rows';\n\n  static Root: Table.Wrap = missing('Table.Root');\n  static Header: Table.Wrap = missing('Table.Header');\n  static Body: Table.Wrap = missing('Table.Body');\n  static Head: HeadSlot = missing('Table.Head');\n  static Row: typeof Row<any> = Row;\n  static Cell: CellSlot = missing('Table.Cell');\n  static Empty: Table.Fill = none;\n\n  Root = kind(this).Root;\n  Header = kind(this).Header;\n  Body = kind(this).Body;\n  Head: HeadSlot<T> = kind(this).Head;\n  Row: Table.Line<T> = kind(this).Row;\n  Cell: CellSlot<T> = kind(this).Cell;\n  Empty = kind(this).Empty;\n\n  /** A cell's content when its column has no `format`. */\n  value(row: T, field: Field<T>): Component.Node {\n    return row && typeof row == 'object' ? (row as any)[field.id] : null;\n  }\n\n  render(props: { children?: Component.Node }): Component.Node {\n    const { data, rowKey, Head, Row, Cell } = this;\n    const fields = resolve<T>(props.children);\n\n    return (\n      <this.Root>\n        <this.Header>\n          {fields.map((field) => {\n            const Slot = field.Head || Head;\n\n            return (\n              <Slot key={field.id || field.index} field={field} className={field.className}>\n                {field.name}\n              </Slot>\n            );\n          })}\n        </this.Header>\n        <this.Body>\n          {data.length == 0 && <this.Empty span={fields.length} />}\n          {data.map((row, index) => (\n            <Row key={rowKey ? rowKey(row, index) : identity(row, index)} data={row} index={index}>\n              {fields.map((field) => {\n                const Slot = field.Cell || Cell;\n\n                return (\n                  <Slot key={field.id || field.index} field={field} data={row} className={field.className}>\n                    {field.format ? field.format(row, index) : this.value(row, field)}\n                  </Slot>\n                );\n              })}\n            </Row>\n          ))}\n        </this.Body>\n      </this.Root>\n    );\n  }\n}\n\nfunction identity(row: unknown, index: number): string | number {\n  if (!row || typeof row != 'object') return index;\n\n  let id = IDS.get(row);\n\n  if (id === undefined) IDS.set(row, (id = ++ROWS));\n\n  return `#${id}`;\n}\n\nfunction kind(table: Table) {\n  return table.constructor as typeof Table;\n}\n\nfunction resolve<T>(children: Component.Node): Field<T>[] {\n  const fields: Field<T>[] = [];\n\n  for (const node of flatten(children)) {\n    const type = typeOf(node);\n\n    if (type !== Column && !(typeof type == 'function' && type.prototype instanceof Column)) continue;\n\n    const props = propsOf(node) as Partial<Field<T>>;\n    const name = props.name ?? '';\n\n    fields.push({\n      name,\n      id: props.id || (typeof name == 'string' ? name.toLowerCase() : ''),\n      className: props.className || '',\n      index: fields.length,\n      Cell: props.Cell,\n      Head: props.Head,\n      format: props.format,\n      size: props.size\n    });\n  }\n\n  return fields;\n}\n\nfunction flatten(children: Component.Node): Component.Node[] {\n  const out: Component.Node[] = [];\n\n  for (const node of childrenOf(children))\n    if (typeOf(node) === Fragment) out.push(...flatten((propsOf(node) as any).children));\n    else out.push(node);\n\n  return out;\n}\n\nexport { Row, Table };\n"],"mappings":";;;;;;AAwBA,MAAM,UAAU;AAEhB,MAAM,sBAAM,IAAI,SAAyB;AAEzC,IAAI,OAAO;;;;;;AAOX,IAAM,MAAN,cAA2B,UAAU;CACnC,AAAU,QAAQ,IAAI,MAAM;CAE5B,OAAU;CACV,QAAQ;CAER,IAAI,YAAqB;AACvB,SAAO,CAAC,CAAC,KAAK,MAAM;;CAGtB,IAAI,WAAoB;EACtB,MAAM,EAAE,aAAa,KAAK;AAE1B,SAAO,aAAa,UAAa,KAAK,SAAS;;;CAIjD,IAAI,QAAQ;EACV,MAAM,EAAE,WAAW,aAAa;EAChC,MAAM,UAAU,WAAY,SAAmB;AAE/C,MAAI,CAAC,UAAW,QAAO,EAAE,gBAAgB,SAAS;AAElD,SAAO;GAAE,UAAU;GAAG,gBAAgB;GAAS,SAAS,KAAK;GAAO,WAAW,KAAK;GAAS;;CAG/F,QAAQ;AACN,OAAK,MAAM,QAAS,KAAK,MAAM,KAAK,MAAM;;CAG5C,MAAM,OAAoB;AACxB,MAAI,CAAC,KAAK,OAAO,MAAM,CAAE,MAAK,OAAO;;CAGvC,QAAQ,OAAkB;AACxB,MAAI,MAAM,WAAW,MAAM,iBAAkB,MAAM,OAAO,WAAW,MAAM,OAAO,IAAM;AAExF,QAAM,gBAAgB;AACtB,OAAK,OAAO;;;CAId,AAAU,OAAO,OAA6B;EAC5C,MAAM,UAAW,MAAM,OAAmB,QAAQ,QAAQ;AAE1D,SAAO,CAAC,CAAC,WAAW,YAAY,MAAM;;CAGxC,OAAO,QAAsD;AAC3D,SAAO,QAAQ,YAAY,EAAE;;;;;;;;;;;AAajC,IAAM,QAAN,cAA6B,UAAU;CACrC,OAAqB,EAAE;;CAGvB,SAAsD;CAEtD,UAA4C;;CAG5C,WAAe;;CAGf,QAAwB;CAExB,OAAO,OAAmB,QAAQ,aAAa;CAC/C,OAAO,SAAqB,QAAQ,eAAe;CACnD,OAAO,OAAmB,QAAQ,aAAa;CAC/C,OAAO,OAAiB,QAAQ,aAAa;CAC7C,OAAO,MAAuB;CAC9B,OAAO,OAAiB,QAAQ,aAAa;CAC7C,OAAO,QAAoB;CAE3B,OAAO,KAAK,KAAK,CAAC;CAClB,SAAS,KAAK,KAAK,CAAC;CACpB,OAAO,KAAK,KAAK,CAAC;CAClB,OAAoB,KAAK,KAAK,CAAC;CAC/B,MAAqB,KAAK,KAAK,CAAC;CAChC,OAAoB,KAAK,KAAK,CAAC;CAC/B,QAAQ,KAAK,KAAK,CAAC;;CAGnB,MAAM,KAAQ,OAAiC;AAC7C,SAAO,OAAO,OAAO,OAAO,WAAY,IAAY,MAAM,MAAM;;CAGlE,OAAO,OAAsD;EAC3D,MAAM,EAAE,MAAM,QAAQ,MAAM,KAAK,SAAS;EAC1C,MAAM,SAAS,QAAW,MAAM,SAAS;AAEzC,SACE,qBAAC,KAAK,mBACJ,oBAAC,KAAK,oBACH,OAAO,KAAK,UAAU;AAGrB,UACE,oBAHW,MAAM,QAAQ;IAGkB;IAAO,WAAW,MAAM;cAChE,MAAM;MADE,MAAM,MAAM,MAAM,MAEtB;IAET,GACU,EACd,qBAAC,KAAK,mBACH,KAAK,UAAU,KAAK,oBAAC,KAAK,SAAM,MAAM,OAAO,SAAU,EACvD,KAAK,KAAK,KAAK,UACd,oBAAC;GAA6D,MAAM;GAAY;aAC7E,OAAO,KAAK,UAAU;AAGrB,WACE,oBAHW,MAAM,QAAQ;KAGkB;KAAO,MAAM;KAAK,WAAW,MAAM;eAC3E,MAAM,SAAS,MAAM,OAAO,KAAK,MAAM,GAAG,KAAK,MAAM,KAAK,MAAM;OADxD,MAAM,MAAM,MAAM,MAEtB;KAET;KATM,SAAS,OAAO,KAAK,MAAM,GAAG,SAAS,KAAK,MAAM,CAUtD,CACN,IACQ,IACF;;;AAKlB,SAAS,SAAS,KAAc,OAAgC;AAC9D,KAAI,CAAC,OAAO,OAAO,OAAO,SAAU,QAAO;CAE3C,IAAI,KAAK,IAAI,IAAI,IAAI;AAErB,KAAI,OAAO,OAAW,KAAI,IAAI,KAAM,KAAK,EAAE,KAAM;AAEjD,QAAO,IAAI;;AAGb,SAAS,KAAK,OAAc;AAC1B,QAAO,MAAM;;AAGf,SAAS,QAAW,UAAsC;CACxD,MAAM,SAAqB,EAAE;AAE7B,MAAK,MAAM,QAAQ,QAAQ,SAAS,EAAE;EACpC,MAAM,OAAO,OAAO,KAAK;AAEzB,MAAI,SAAS,UAAU,EAAE,OAAO,QAAQ,cAAc,KAAK,qBAAqB,QAAS;EAEzF,MAAM,QAAQ,QAAQ,KAAK;EAC3B,MAAM,OAAO,MAAM,QAAQ;AAE3B,SAAO,KAAK;GACV;GACA,IAAI,MAAM,OAAO,OAAO,QAAQ,WAAW,KAAK,aAAa,GAAG;GAChE,WAAW,MAAM,aAAa;GAC9B,OAAO,OAAO;GACd,MAAM,MAAM;GACZ,MAAM,MAAM;GACZ,QAAQ,MAAM;GACd,MAAM,MAAM;GACb,CAAC;;AAGJ,QAAO;;AAGT,SAAS,QAAQ,UAA4C;CAC3D,MAAM,MAAwB,EAAE;AAEhC,MAAK,MAAM,QAAQ,WAAW,SAAS,CACrC,KAAI,OAAO,KAAK,KAAK,SAAU,KAAI,KAAK,GAAG,QAAS,QAAQ,KAAK,CAAS,SAAS,CAAC;KAC/E,KAAI,KAAK,KAAK;AAErB,QAAO"}

package/dist/table/column.d.ts

@@ -0,0 +1,53 @@
+import { Component, Model } from "@expressive/mvc";
+
+//#region src/table/column.d.ts
+interface CellProps<T = any> {
+  field: Field<T>;
+  data: T;
+  className?: string;
+  children?: Component.Node;
+}
+interface HeadProps<T = any> {
+  field: Field<T>;
+  className?: string;
+  children?: Component.Node;
+}
+type Slot<P> = ((props: P) => Component.Node) | (new (...args: any[]) => Model & {
+  render(props: P): Component.Node;
+});
+type CellSlot<T = any> = Slot<CellProps<T>>;
+type HeadSlot<T = any> = Slot<HeadProps<T>>;
+/**
+ * Declares a column of the enclosing `Table`. Renders nothing - the table reads its props.
+ *
+ * Without `format`, a cell shows the row's property named by `id`, which defaults to the lowercased `name`.
+ */
+declare class Column<T = any> extends Component {
+  /** Header text; `false` for an empty header. */
+  name: string | false;
+  id: string;
+  className: string;
+  /** Replaces the table's `Cell` for this column. */
+  Cell?: CellSlot<T>;
+  /** Replaces the table's `Head` for this column. */
+  Head?: HeadSlot<T>;
+  /** Per-row content. */
+  format?: (row: T, index: number) => Component.Node;
+  /** Column width: a number in pixels, or any CSS length. Unset, the table sizes it from content. */
+  size?: number | string;
+  render(): Component.Node;
+}
+/** A Column element's props, resolved by its `Table`. */
+interface Field<T = any> {
+  id: string;
+  name: string | false;
+  className: string;
+  index: number;
+  Cell?: CellSlot<T>;
+  Head?: HeadSlot<T>;
+  format?: (row: T, index: number) => Component.Node;
+  size?: number | string;
+}
+//#endregion
+export { type CellProps, type CellSlot, Column, type Field, type HeadProps, type HeadSlot };
+//# sourceMappingURL=column.d.ts.map

package/dist/table/column.js

@@ -0,0 +1,29 @@
+import { Component } from "@expressive/mvc";
+
+//#region src/table/column.ts
+/**
+* Declares a column of the enclosing `Table`. Renders nothing - the table reads its props.
+*
+* Without `format`, a cell shows the row's property named by `id`, which defaults to the lowercased `name`.
+*/
+var Column = class extends Component {
+	/** Header text; `false` for an empty header. */
+	name = "";
+	id = "";
+	className = "";
+	/** Replaces the table's `Cell` for this column. */
+	Cell = void 0;
+	/** Replaces the table's `Head` for this column. */
+	Head = void 0;
+	/** Per-row content. */
+	format = void 0;
+	/** Column width: a number in pixels, or any CSS length. Unset, the table sizes it from content. */
+	size = void 0;
+	render() {
+		return null;
+	}
+};
+
+//#endregion
+export { Column };
+//# sourceMappingURL=column.js.map

package/dist/table/column.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"column.js","names":[],"sources":["../../src/table/column.ts"],"sourcesContent":["import { Component, type Model } from '@expressive/mvc';\n\ninterface CellProps<T = any> {\n  field: Field<T>;\n  data: T;\n  className?: string;\n  children?: Component.Node;\n}\n\ninterface HeadProps<T = any> {\n  field: Field<T>;\n  className?: string;\n  children?: Component.Node;\n}\n\ntype Slot<P> = ((props: P) => Component.Node) | (new (...args: any[]) => Model & { render(props: P): Component.Node });\n\ntype CellSlot<T = any> = Slot<CellProps<T>>;\ntype HeadSlot<T = any> = Slot<HeadProps<T>>;\n\n/**\n * Declares a column of the enclosing `Table`. Renders nothing - the table reads its props.\n *\n * Without `format`, a cell shows the row's property named by `id`, which defaults to the lowercased `name`.\n */\nclass Column<T = any> extends Component {\n  /** Header text; `false` for an empty header. */\n  name: string | false = '';\n  id = '';\n  className = '';\n\n  /** Replaces the table's `Cell` for this column. */\n  Cell?: CellSlot<T> = undefined;\n\n  /** Replaces the table's `Head` for this column. */\n  Head?: HeadSlot<T> = undefined;\n\n  /** Per-row content. */\n  format?: (row: T, index: number) => Component.Node = undefined;\n\n  /** Column width: a number in pixels, or any CSS length. Unset, the table sizes it from content. */\n  size?: number | string = undefined;\n\n  render(): Component.Node {\n    return null;\n  }\n}\n\n/** A Column element's props, resolved by its `Table`. */\ninterface Field<T = any> {\n  id: string;\n  name: string | false;\n  className: string;\n  index: number;\n  Cell?: CellSlot<T>;\n  Head?: HeadSlot<T>;\n  format?: (row: T, index: number) => Component.Node;\n  size?: number | string;\n}\n\nexport { Column };\nexport type { CellProps, HeadProps, CellSlot, HeadSlot, Field };\n"],"mappings":";;;;;;;;AAyBA,IAAM,SAAN,cAA8B,UAAU;;CAEtC,OAAuB;CACvB,KAAK;CACL,YAAY;;CAGZ,OAAqB;;CAGrB,OAAqB;;CAGrB,SAAqD;;CAGrD,OAAyB;CAEzB,SAAyB;AACvB,SAAO"}

package/dist/table/table.d.ts

@@ -0,0 +1,41 @@
+import { CellProps, CellSlot, Column, Field, HeadProps, HeadSlot } from "./column.js";
+import { Row as Row$1, Table as Table$1 } from "./base.js";
+import { Component } from "@expressive/mvc";
+
+//#region src/table/table.d.ts
+declare namespace Table {
+  type RowProps<T = any> = Table$1.RowProps<T>;
+}
+declare class Row<T = any> extends Row$1<T> {
+  render({
+    children
+  }: {
+    children: Component.Node;
+  }): Component.Node;
+}
+/**
+ * Data table whose columns are declared as `Column` children.
+ *
+ * Pieces - `Root`, `Header`, `Body`, `Head`, `Row`, `Cell`, `Empty` - are function components reading `Table.get()`,
+ * each styled on its own; pass one as a prop or assign it in a subclass to replace it. Stock pieces are statics. A
+ * `Column` can also bring its own `Head` or `Cell`. With `onPress`, rows are focusable and respond to click, Enter
+ * and Space; `selected` marks one.
+ *
+ * @example
+ * <Table data={people} rowKey={(person) => person.id}>
+ *   <Column name="Name" />
+ *   <Column name="Age" format={(person) => `${person.age} yrs`} />
+ * </Table>
+ */
+declare class Table<T = any> extends Table$1<T> {
+  static Root: Table$1.Wrap;
+  static Header: Table$1.Wrap;
+  static Body: Table$1.Wrap;
+  static Head: HeadSlot;
+  static Row: typeof Row<any>;
+  static Cell: CellSlot;
+  static Empty: Table$1.Fill;
+}
+//#endregion
+export { Table };
+//# sourceMappingURL=table.d.ts.map