foldkit-mixins-data-grid 0.2.15 → 0.3.0

package/dist/style.js

@@ -0,0 +1,224 @@
+import { GridSlots } from "./slots.js";
+import { Layers, Style } from "foldkit-mixins";
+import { Theme } from "foldkit-mixins/theme";
+// src/style.ts
+/**
+* The grid's default look, for a page that ships `foldkit-mixins/theme`'s
+* tokens and palette. It only paints: the geometry the virtual window
+* depends on is the view's, and the slots refuse a Style that sets it.
+*/
+/** The tokens the grid's styles draw with; the marks' too (`marks.ts`). */
+const ref = Theme.ref(Theme.standard());
+const line = `${ref.border.thin} solid ${ref.outline.subtle}`;
+const faint = `${ref.border.thin} solid color-mix(in oklch, ${ref.outline.subtle} 55%, transparent)`;
+const pinnedEdge = [Style.nest("&[data-pinned-edge=\"start\"]", { borderInlineEnd: `${ref.border.thick} solid ${ref.outline.default}` }), Style.nest("&[data-pinned-edge=\"end\"]", { borderInlineStart: `${ref.border.thick} solid ${ref.outline.default}` })];
+const field = Style.compose(Style.self({
+	background: ref.surface.base,
+	border: "none",
+	caretColor: ref.outline.focus,
+	color: "inherit",
+	font: "inherit",
+	outline: `${ref.border.thick} solid ${ref.outline.focus}`,
+	outlineOffset: `calc(-1 * ${ref.border.thick})`,
+	paddingInline: ref.space.sm
+}), Style.media("(pointer: coarse)", { fontSize: "max(1rem, 1em)" }));
+const refused = Style.nest("&[aria-invalid=\"true\"]", {
+	outlineColor: ref.error.default,
+	caretColor: ref.error.default
+});
+/** Every piece is in the `components` layer, so an application's own layer wins. */
+const GridStyle = Style.forSlots(GridSlots)({
+	root: Style.compose(Style.self({
+		background: ref.surface.base,
+		color: ref.text.default,
+		fontVariantNumeric: "tabular-nums"
+	}), Style.pseudo(":focus-visible", { outline: `${ref.border.thick} solid ${ref.outline.focus}` })),
+	header: Style.self({
+		zIndex: "2",
+		background: ref.surface.muted
+	}),
+	headerCell: Style.compose(Style.self({
+		alignItems: "center",
+		background: ref.surface.muted,
+		borderBlockEnd: line,
+		display: "flex",
+		fontSize: ref.size.sm,
+		fontWeight: ref.weight.semibold,
+		paddingInline: ref.space.sm,
+		whiteSpace: "nowrap",
+		userSelect: "none"
+	}), Style.nest("&[data-pinned]", { zIndex: "1" }), ...pinnedEdge, Style.nest("&[aria-readonly=\"true\"]::before", {
+		background: ref.text.muted,
+		content: "\"\"",
+		flex: "none",
+		height: "0.75em",
+		marginInlineEnd: ref.space["2xs"],
+		mask: `${ref.icon.lock} center / contain no-repeat`,
+		width: "0.75em"
+	}), Style.nest("&[data-dragging]", {
+		zIndex: "3",
+		background: ref.surface.default,
+		opacity: "0.9",
+		cursor: "grabbing"
+	}), Style.nest("&[data-drop=\"before\"]", { borderInlineStart: `${ref.border.thick} solid ${ref.outline.focus}` }), Style.nest("&[data-drop=\"after\"]", { borderInlineEnd: `${ref.border.thick} solid ${ref.outline.focus}` })),
+	cell: Style.compose(Style.self({
+		alignItems: "center",
+		borderBlockEnd: line,
+		borderInlineEnd: faint,
+		display: "flex",
+		overflow: "hidden",
+		paddingInline: ref.space.sm,
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	}), Style.nest("&[data-pinned]", {
+		background: ref.surface.base,
+		zIndex: "1"
+	}), ...pinnedEdge, Style.nest("&[data-editable]", { cursor: "text" }), Style.nest("&[aria-readonly=\"true\"]", {
+		color: ref.text.muted,
+		cursor: "default"
+	}), Style.nest("&[data-editing]", {
+		boxShadow: ref.shadow.md,
+		overflow: "visible",
+		paddingInline: "0",
+		zIndex: "2"
+	}), Style.nest("&[data-focused=\"true\"]", {
+		outline: `${ref.border.thick} solid ${ref.outline.focus}`,
+		outlineOffset: `calc(-1 * ${ref.border.thick})`
+	}), Style.nest("&[data-fill=\"target\"]", {
+		outline: `${ref.border.thin} dashed ${ref.outline.focus}`,
+		outlineOffset: `calc(-1 * ${ref.border.thin})`
+	}), Style.nest("&[data-mark]", { backgroundImage: `radial-gradient(circle at calc(100% - 6px) 6px, ${ref.outline.focus} 3px, transparent 3.5px)` })),
+	editor: Style.compose(field, refused),
+	choice: Style.compose(field, refused, Style.self({
+		display: "flex",
+		alignItems: "center",
+		cursor: "default"
+	})),
+	choiceList: Style.compose(Style.self({
+		zIndex: "3",
+		minWidth: "100%",
+		maxHeight: "16rem",
+		overflowY: "auto",
+		margin: "0",
+		padding: ref.space["3xs"],
+		listStyle: "none",
+		background: ref.surface.base,
+		border: `${ref.border.thin} solid ${ref.outline.default}`,
+		borderRadius: ref.radius.md,
+		boxShadow: ref.shadow.lg
+	})),
+	choiceOption: Style.compose(Style.self({
+		padding: `${ref.space["2xs"]} ${ref.space.sm}`,
+		borderRadius: ref.radius.sm,
+		cursor: "pointer",
+		whiteSpace: "nowrap"
+	}), Style.nest("&:hover", { background: ref.surface.subtle }), Style.nest("&[aria-selected=\"true\"]", {
+		background: ref.accent.subtle,
+		color: ref.accent.ink
+	}), Style.media("(pointer: coarse)", {
+		minHeight: "44px",
+		display: "flex",
+		alignItems: "center"
+	})),
+	editorError: Style.self({
+		background: ref.error.default,
+		borderRadius: ref.radius.md,
+		boxShadow: ref.shadow.lg,
+		color: ref.error["on-fill"],
+		fontSize: ref.size.xs,
+		fontWeight: ref.weight.medium,
+		insetInlineStart: "0",
+		paddingBlock: ref.space["3xs"],
+		paddingInline: ref.space.xs,
+		pointerEvents: "none",
+		position: "absolute",
+		top: `calc(100% + ${ref.space["3xs"]})`,
+		whiteSpace: "nowrap",
+		zIndex: "5"
+	}),
+	resizeHandle: Style.compose(Style.self({
+		background: `linear-gradient(to right, transparent calc(100% - 1px), color-mix(in oklch, ${ref.outline.subtle} 70%, transparent) calc(100% - 1px))`,
+		WebkitTouchCallout: "none"
+	}), Style.pseudo(":hover", { background: `linear-gradient(to right, transparent calc(100% - 2px), ${ref.outline.focus} calc(100% - 2px))` }), Style.at("@media (pointer: coarse)", Style.nest("&::before", {
+		content: "\"\"",
+		position: "absolute",
+		insetBlock: "0",
+		insetInlineStart: "-12px",
+		insetInlineEnd: "-4px"
+	}))),
+	fillHandle: Style.compose(Style.self({
+		width: "7px",
+		height: "7px",
+		background: ref.outline.focus,
+		border: `1px solid ${ref.surface.base}`,
+		cursor: "crosshair",
+		zIndex: "3",
+		touchAction: "none",
+		WebkitTouchCallout: "none"
+	}), Style.at("@media (pointer: coarse)", Style.nest("&::before", {
+		content: "\"\"",
+		position: "absolute",
+		inset: "-18px"
+	}))),
+	menuButton: Style.compose(Style.self({
+		background: "none",
+		border: "none",
+		color: ref.text.muted,
+		cursor: "pointer",
+		marginInlineStart: "auto",
+		minBlockSize: "1.5rem",
+		minInlineSize: "1.5rem",
+		paddingInline: ref.space.xs
+	}), Style.nest("&[aria-expanded=\"true\"]", { color: ref.text.default })),
+	menu: Style.compose(Style.self({
+		background: ref.surface.base,
+		border: line,
+		borderRadius: ref.radius.md,
+		fontWeight: ref.weight.normal,
+		minWidth: "10rem",
+		paddingBlock: ref.space.xs,
+		zIndex: "4"
+	}), Style.pseudo(":focus-visible", { outline: `${ref.border.thick} solid ${ref.outline.focus}` })),
+	menuItem: Style.compose(Style.self({
+		cursor: "pointer",
+		paddingBlock: ref.space.xs,
+		paddingInline: ref.space.sm
+	}), Style.nest("&[data-active=\"true\"]", { background: ref.surface.muted })),
+	sort: Style.compose(Style.self({
+		alignItems: "center",
+		background: "none",
+		border: "none",
+		color: "inherit",
+		cursor: "pointer",
+		display: "inline-flex",
+		font: "inherit",
+		gap: ref.space.xs,
+		minBlockSize: "1.5rem",
+		minWidth: "0",
+		overflow: "hidden",
+		padding: "0",
+		textOverflow: "ellipsis",
+		whiteSpace: "nowrap"
+	}), Style.nest("&::after", {
+		borderBlockEnd: `1.5px solid currentColor`,
+		borderInlineEnd: `1.5px solid currentColor`,
+		content: "\"\"",
+		flex: "none",
+		height: "0.4em",
+		opacity: "0",
+		transform: "translateY(-0.15em) rotate(45deg)",
+		transition: `opacity ${ref.motion.fast} ${ref.motion.ease}, transform calc(${ref.motion.fast} * ${ref.knob.travel}) ${ref.motion.ease}`,
+		width: "0.4em"
+	}), Style.nest("&:hover::after", { opacity: "0.35" }), Style.nest("&[data-sort=\"desc\"]::after", { opacity: "1" }), Style.nest("&[data-sort=\"asc\"]::after", {
+		opacity: "1",
+		transform: "translateY(0.1em) rotate(-135deg)"
+	})),
+	placeholder: Style.self({ background: ref.surface.subtle }),
+	status: Style.self({
+		color: ref.text.muted,
+		padding: ref.space.md
+	})
+}, { layer: Layers.standard.layer("components") });
+export { GridStyle, ref };
+
+//# sourceMappingURL=style.js.map

package/dist/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","names":[],"sources":["../src/style.ts"],"sourcesContent":["/**\n * The grid's default look, for a page that ships `foldkit-mixins/theme`'s\n * tokens and palette. It only paints: the geometry the virtual window\n * depends on is the view's, and the slots refuse a Style that sets it.\n */\nimport { Layers, Style } from 'foldkit-mixins'\nimport { Theme } from 'foldkit-mixins/theme'\nimport { GridSlots } from './slots.js'\n\n/** The tokens the grid's styles draw with; the marks' too (`marks.ts`). */\nexport const ref = Theme.ref(Theme.standard())\n\nconst line = `${ref.border.thin} solid ${ref.outline.subtle}`\n// Between columns: barely there, so rows read across and columns still part.\nconst faint = `${ref.border.thin} solid color-mix(in oklch, ${ref.outline.subtle} 55%, transparent)`\n// Where the pinned columns end and the scrolling ones pass under them.\nconst pinnedEdge = [\n  Style.nest('&[data-pinned-edge=\"start\"]', {\n    borderInlineEnd: `${ref.border.thick} solid ${ref.outline.default}`,\n  }),\n  Style.nest('&[data-pinned-edge=\"end\"]', {\n    borderInlineStart: `${ref.border.thick} solid ${ref.outline.default}`,\n  }),\n] as const\n\n// The field an edit is typed in fills its cell, the cell lifted off the grid\n// (below), so an edit does not look like a cell that only has focus.\nconst field = Style.compose(\n  Style.self({\n    background: ref.surface.base,\n    border: 'none',\n    caretColor: ref.outline.focus,\n    color: 'inherit',\n    font: 'inherit',\n    outline: `${ref.border.thick} solid ${ref.outline.focus}`,\n    outlineOffset: `calc(-1 * ${ref.border.thick})`,\n    paddingInline: ref.space.sm,\n  }),\n  // At least 16px on a touch screen, where iOS zooms into any smaller focused field.\n  Style.media('(pointer: coarse)', { fontSize: 'max(1rem, 1em)' }),\n)\n// A draft the column refuses: the field in the error colour.\nconst refused = Style.nest('&[aria-invalid=\"true\"]', {\n  outlineColor: ref.error.default,\n  caretColor: ref.error.default,\n})\n\n/** Every piece is in the `components` layer, so an application's own layer wins. */\nexport const GridStyle = Style.forSlots(GridSlots)(\n  {\n    root: Style.compose(\n      Style.self({\n        background: ref.surface.base,\n        color: ref.text.default,\n        fontVariantNumeric: 'tabular-nums',\n      }),\n      Style.pseudo(':focus-visible', { outline: `${ref.border.thick} solid ${ref.outline.focus}` }),\n    ),\n    // Above the body's cells, pinned ones included, as it sticks to the top.\n    header: Style.self({ zIndex: '2', background: ref.surface.muted }),\n    headerCell: Style.compose(\n      Style.self({\n        alignItems: 'center',\n        background: ref.surface.muted,\n        borderBlockEnd: line,\n        display: 'flex',\n        fontSize: ref.size.sm,\n        fontWeight: ref.weight.semibold,\n        paddingInline: ref.space.sm,\n        // A label stays on one line, however narrow the column: it is cut, not wrapped.\n        whiteSpace: 'nowrap',\n        // A drag that began on a header's text would otherwise select it.\n        userSelect: 'none',\n      }),\n      Style.nest('&[data-pinned]', { zIndex: '1' }),\n      ...pinnedEdge,\n      // A column that does not edit, in a grid where others do: a padlock before its label.\n      Style.nest('&[aria-readonly=\"true\"]::before', {\n        background: ref.text.muted,\n        content: '\"\"',\n        flex: 'none',\n        height: '0.75em',\n        marginInlineEnd: ref.space['2xs'],\n        mask: `${ref.icon.lock} center / contain no-repeat`,\n        width: '0.75em',\n      }),\n      Style.nest('&[data-dragging]', {\n        zIndex: '3',\n        background: ref.surface.default,\n        opacity: '0.9',\n        cursor: 'grabbing',\n      }),\n      Style.nest('&[data-drop=\"before\"]', {\n        borderInlineStart: `${ref.border.thick} solid ${ref.outline.focus}`,\n      }),\n      Style.nest('&[data-drop=\"after\"]', {\n        borderInlineEnd: `${ref.border.thick} solid ${ref.outline.focus}`,\n      }),\n    ),\n    cell: Style.compose(\n      Style.self({\n        alignItems: 'center',\n        borderBlockEnd: line,\n        borderInlineEnd: faint,\n        display: 'flex',\n        overflow: 'hidden',\n        paddingInline: ref.space.sm,\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap',\n      }),\n      // A pinned cell is drawn over the cells scrolling under it, so it needs a ground.\n      Style.nest('&[data-pinned]', { background: ref.surface.base, zIndex: '1' }),\n      ...pinnedEdge,\n      // A text cursor says a double-click edits; the edited cell gives its\n      // padding to the field.\n      Style.nest('&[data-editable]', { cursor: 'text' }),\n      // Its cells, muted, with the ordinary pointer: there is nothing to type into.\n      Style.nest('&[aria-readonly=\"true\"]', { color: ref.text.muted, cursor: 'default' }),\n      // On the cell, which clips what is in it.\n      Style.nest('&[data-editing]', {\n        boxShadow: ref.shadow.md,\n        // Its error shows below it, past the cell.\n        overflow: 'visible',\n        paddingInline: '0',\n        zIndex: '2',\n      }),\n      Style.nest('&[data-focused=\"true\"]', {\n        outline: `${ref.border.thick} solid ${ref.outline.focus}`,\n        outlineOffset: `calc(-1 * ${ref.border.thick})`,\n      }),\n      // The cells a fill being dragged will write.\n      Style.nest('&[data-fill=\"target\"]', {\n        outline: `${ref.border.thin} dashed ${ref.outline.focus}`,\n        outlineOffset: `calc(-1 * ${ref.border.thin})`,\n      }),\n      // A marked cell gets a dot in its top end corner. A background image,\n      // after the pinned ground in the source, so a pinned cell keeps it, and\n      // no geometry; an application styles its own marks by name.\n      Style.nest('&[data-mark]', {\n        backgroundImage: `radial-gradient(circle at calc(100% - 6px) 6px, ${ref.outline.focus} 3px, transparent 3.5px)`,\n      }),\n    ),\n    editor: Style.compose(field, refused),\n    // The combobox reads as the field it replaces: its draft on the line,\n    // and room for the list it opens.\n    choice: Style.compose(\n      field,\n      refused,\n      Style.self({ display: 'flex', alignItems: 'center', cursor: 'default' }),\n    ),\n    // Placed by the view (`position` is the Slot's), below the cell or above it.\n    choiceList: Style.compose(\n      Style.self({\n        zIndex: '3',\n        minWidth: '100%',\n        maxHeight: '16rem',\n        overflowY: 'auto',\n        margin: '0',\n        padding: ref.space['3xs'],\n        listStyle: 'none',\n        background: ref.surface.base,\n        border: `${ref.border.thin} solid ${ref.outline.default}`,\n        borderRadius: ref.radius.md,\n        boxShadow: ref.shadow.lg,\n      }),\n    ),\n    choiceOption: Style.compose(\n      Style.self({\n        padding: `${ref.space['2xs']} ${ref.space.sm}`,\n        borderRadius: ref.radius.sm,\n        cursor: 'pointer',\n        whiteSpace: 'nowrap',\n      }),\n      Style.nest('&:hover', { background: ref.surface.subtle }),\n      Style.nest('&[aria-selected=\"true\"]', {\n        background: ref.accent.subtle,\n        color: ref.accent.ink,\n      }),\n      // A finger needs a target this tall.\n      Style.media('(pointer: coarse)', {\n        minHeight: '44px',\n        display: 'flex',\n        alignItems: 'center',\n      }),\n    ),\n    // Below the field, over the rows beneath: why the column refused the draft.\n    editorError: Style.self({\n      background: ref.error.default,\n      borderRadius: ref.radius.md,\n      boxShadow: ref.shadow.lg,\n      color: ref.error['on-fill'],\n      fontSize: ref.size.xs,\n      fontWeight: ref.weight.medium,\n      insetInlineStart: '0',\n      paddingBlock: ref.space['3xs'],\n      paddingInline: ref.space.xs,\n      pointerEvents: 'none',\n      position: 'absolute',\n      top: `calc(100% + ${ref.space['3xs']})`,\n      whiteSpace: 'nowrap',\n      zIndex: '5',\n    }),\n    // The edge a column is resized by: the faint line between headers, which\n    // darkens and thickens under the pointer, or while dragged.\n    resizeHandle: Style.compose(\n      Style.self({\n        background: `linear-gradient(to right, transparent calc(100% - 1px), color-mix(in oklch, ${ref.outline.subtle} 70%, transparent) calc(100% - 1px))`,\n        WebkitTouchCallout: 'none',\n      }),\n      Style.pseudo(':hover', {\n        background: `linear-gradient(to right, transparent calc(100% - 2px), ${ref.outline.focus} calc(100% - 2px))`,\n      }),\n      // A finger needs more than the 8px a pointer takes: 24px, the line still at its end.\n      Style.at(\n        '@media (pointer: coarse)',\n        Style.nest('&::before', {\n          content: '\"\"',\n          position: 'absolute',\n          insetBlock: '0',\n          insetInlineStart: '-12px',\n          insetInlineEnd: '-4px',\n        }),\n      ),\n    ),\n    fillHandle: Style.compose(\n      Style.self({\n        width: '7px',\n        height: '7px',\n        background: ref.outline.focus,\n        border: `1px solid ${ref.surface.base}`,\n        cursor: 'crosshair',\n        zIndex: '3',\n        // The drag is the fill's, not a pan of the grid, and a held press no callout of iOS's.\n        touchAction: 'none',\n        WebkitTouchCallout: 'none',\n      }),\n      // On a touch screen, a 44px target around the 7px square it draws.\n      Style.at(\n        '@media (pointer: coarse)',\n        Style.nest('&::before', { content: '\"\"', position: 'absolute', inset: '-18px' }),\n      ),\n    ),\n    menuButton: Style.compose(\n      Style.self({\n        background: 'none',\n        border: 'none',\n        color: ref.text.muted,\n        cursor: 'pointer',\n        marginInlineStart: 'auto',\n        // A finger's target, however small the glyph.\n        minBlockSize: '1.5rem',\n        minInlineSize: '1.5rem',\n        paddingInline: ref.space.xs,\n      }),\n      Style.nest('&[aria-expanded=\"true\"]', { color: ref.text.default }),\n    ),\n    menu: Style.compose(\n      Style.self({\n        background: ref.surface.base,\n        border: line,\n        borderRadius: ref.radius.md,\n        fontWeight: ref.weight.normal,\n        minWidth: '10rem',\n        paddingBlock: ref.space.xs,\n        zIndex: '4',\n      }),\n      Style.pseudo(':focus-visible', { outline: `${ref.border.thick} solid ${ref.outline.focus}` }),\n    ),\n    menuItem: Style.compose(\n      Style.self({ cursor: 'pointer', paddingBlock: ref.space.xs, paddingInline: ref.space.sm }),\n      Style.nest('&[data-active=\"true\"]', { background: ref.surface.muted }),\n    ),\n    // The header's label, as text: the direction is drawn after it.\n    sort: Style.compose(\n      Style.self({\n        alignItems: 'center',\n        background: 'none',\n        border: 'none',\n        color: 'inherit',\n        cursor: 'pointer',\n        display: 'inline-flex',\n        font: 'inherit',\n        gap: ref.space.xs,\n        // A finger's target in height; its width is the label's.\n        minBlockSize: '1.5rem',\n        minWidth: '0',\n        overflow: 'hidden',\n        padding: '0',\n        textOverflow: 'ellipsis',\n        whiteSpace: 'nowrap',\n      }),\n      // A small chevron, drawn from two borders, after the label. Its place is\n      // kept while unsorted, so sorting moves nothing; it shows faintly under\n      // the pointer, to say the label sorts.\n      Style.nest('&::after', {\n        borderBlockEnd: `1.5px solid currentColor`,\n        borderInlineEnd: `1.5px solid currentColor`,\n        content: '\"\"',\n        flex: 'none',\n        height: '0.4em',\n        opacity: '0',\n        transform: 'translateY(-0.15em) rotate(45deg)',\n        transition: `opacity ${ref.motion.fast} ${ref.motion.ease}, transform calc(${ref.motion.fast} * ${ref.knob.travel}) ${ref.motion.ease}`,\n        width: '0.4em',\n      }),\n      Style.nest('&:hover::after', { opacity: '0.35' }),\n      Style.nest('&[data-sort=\"desc\"]::after', { opacity: '1' }),\n      Style.nest('&[data-sort=\"asc\"]::after', {\n        opacity: '1',\n        transform: 'translateY(0.1em) rotate(-135deg)',\n      }),\n    ),\n    placeholder: Style.self({ background: ref.surface.subtle }),\n    status: Style.self({ color: ref.text.muted, padding: ref.space.md }),\n  },\n  { layer: Layers.standard.layer('components') },\n)\n"],"mappings":"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"}

package/dist/view.d.ts

@@ -0,0 +1,140 @@
+import { Option } from "effect";
+import { GridSlots } from "./slots.js";
+import { SlotView } from "foldkit-mixins";
+import { CellAddress, ColumnSpec, ColumnState, DataGridOf, Direction, RowModel, RowSelection, RowStatus, Viewport } from "foldkit-data-grid";
+import { Html, HtmlBuilder } from "foldkit/html";
+export interface GridWords {
+  /** In place of rows when there are none. Default `No rows.` */
+  readonly empty?: string;
+  /** While the first rows are awaited. Default `Loading…`. */
+  readonly loading?: string;
+  /** When the read failed. `{message}` is the failure's. Default `{message}`. */
+  readonly failed?: string;
+  /** On the button that asks again after a failure. Default `Try again`. */
+  readonly retry?: string;
+  /** On the button that loads more rows. Default `More`. */
+  readonly more?: string;
+  /** The name of a column's menu button. `{column}` is its header. Default `{column} menu`. */
+  readonly menu?: string;
+  /** Menu items. `{column}` in `show` is the hidden column's header. */
+  readonly pinStart?: string;
+  readonly pinEnd?: string;
+  readonly unpin?: string;
+  readonly hide?: string;
+  readonly show?: string;
+}
+/** How a column is sorted, and the Message that sorts it next: `foldkit-crud`'s `Sort` gives these. */
+export interface ColumnSort<Message> {
+  readonly direction?: 'asc' | 'desc' | undefined;
+  readonly message: Message;
+}
+/**
+ * A state the application gives one cell, such as an edit not yet saved. The
+ * grid draws its `name` as `data-mark` on the cell's Slot, for a style, and
+ * its `description` as the cell's `aria-description`, for a screen reader,
+ * and its `title`, shown on hover.
+ */
+export interface CellMark {
+  readonly name: string;
+  readonly description: string;
+}
+/** What the grid's view reads, and what the application gives it. */
+export interface GridInput<Row, Id extends string, GridMessage, Message> {
+  /** The `DataGrid` Model as placed in the parent. */
+  readonly state: {
+    readonly focus: {
+      readonly current: Option.Option<CellAddress<Id>>;
+      readonly header: Option.Option<Id>;
+    };
+    readonly viewport: Viewport;
+    readonly columns: ColumnState<Id>;
+    readonly selection: {
+      readonly rows: RowSelection;
+      readonly anchor: Option.Option<string>;
+      readonly cells: Option.Option<{
+        readonly anchor: CellAddress<Id>;
+        readonly focus: CellAddress<Id>;
+      }>;
+    };
+    readonly editing: Option.Option<{
+      readonly address: CellAddress<Id>;
+      readonly draft: string;
+      readonly error: Option.Option<string>;
+    }>;
+    readonly dragging: Option.Option<{
+      readonly column: Id;
+      readonly delta: number;
+    }>;
+    readonly menu: Option.Option<{
+      readonly column: Id;
+      readonly active: number;
+    }>;
+    readonly filling: Option.Option<{
+      readonly source: {
+        readonly anchor: CellAddress<Id>;
+        readonly focus: CellAddress<Id>;
+      };
+      readonly to: CellAddress<Id>;
+    }>;
+  };
+  /** The application's rows, in its order; the view draws them through `state.columns`. */
+  readonly rows: RowModel<Row>;
+  /** Lifts the grid's own Messages into the parent's: the placement's wrapper. */
+  readonly wrap: (message: GridMessage) => Message;
+  /** The grid's accessible name. */
+  readonly label: string;
+  readonly rowHeight: number;
+  readonly headerHeight: number;
+  readonly overscan?: {
+    readonly rows?: number;
+    readonly columns?: number;
+  };
+  readonly direction?: Direction;
+  /** Draws one cell; by default the column's value, as text. */
+  readonly cell?: (column: Id, row: Row, h: HtmlBuilder<Message>) => Html | string;
+  /** A cell's mark, if it has one; asked only for the cells drawn. */
+  readonly marks?: (address: CellAddress<Id>) => Option.Option<CellMark>;
+  /**
+   * How a choice column is edited: a list the grid draws, styled with the
+   * page (`list`, the default), or the platform's own `select` (`native`),
+   * whose picker suits a touch screen better. Pass `native` from a media
+   * fact in the Model, such as a coarse pointer; the view reads no media.
+   */
+  readonly choiceEditor?: 'list' | 'native';
+  readonly words?: GridWords;
+  /**
+   * Where the rows' source stands (`GridCrud.status` for a Remote page).
+   * Default `Ready`. The grid holds no loading state: the source's owner does.
+   */
+  readonly status?: RowStatus;
+  /** Asks again after a failure; given, a failed grid shows a button that sends it. */
+  readonly onRetry?: Message;
+  /**
+   * Loads more rows; given, a grid whose count is not known yet shows a button
+   * that sends it. Attach `MoreOnScroll` to send it as the end comes into view.
+   */
+  readonly onMore?: Message;
+  /**
+   * A menu button on each header, opening the column's menu: pin it to the
+   * start or the end or unpin it, hide it, or show a hidden column. On a
+   * focused header Alt+ArrowDown, Shift+F10 or the menu key opens it.
+   */
+  readonly columnMenu?: boolean;
+  /** The columns that sort, each with its direction and its Message. */
+  readonly sort?: { readonly [K in Id]?: ColumnSort<Message>; };
+}
+/** Whether the rows' source is reading: the grid says so, and asks for nothing more. */
+export declare const isBusy: (status: RowStatus | undefined) => boolean;
+declare const view: <Message>() => {
+  /**
+   * The view of one `DataGrid`. It draws the grid's columns' headers and the
+   * window of cells `VirtualGrid.window` picks for the placed viewport, and
+   * sends the grid's Messages through `wrap`: `Moved` for a key, with the
+   * scroll that reveals the cell, `Focused` for the pointer, `Measured` from
+   * the scroll container. Attach Style and Behavior to the result.
+   */
+  define: <Row, Specs extends Record<string, ColumnSpec<Row, unknown>>>(grid: DataGridOf<Row, Specs>) => SlotView.SlotView<typeof GridSlots, GridInput<Row, keyof Specs & string, typeof grid.Message.Type, Message>, Message>;
+};
+export declare const DataGridView: typeof view;
+export {};
+//# sourceMappingURL=view.d.ts.map

package/dist/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","names":[],"sources":["../src/view.ts"],"mappings":";;;;;iBAkCiB;;WAEN;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;;WAEA;WACA;WACA;WACA;WACA;;;iBAIM,WAAW;WACjB;WACA,SAAS;;;;;;;;iBASH;WACN;WACA;;;iBAIM,UAAU,KAAK,mBAAmB,aAAa;;WAErD;aACE;eACE,SAAS,OAAO,OAAO,YAAY;eACnC,QAAQ,OAAO,OAAO;;aAExB,UAAU;aACV,SAAS,YAAY;aACrB;eACE,MAAM;eACN,QAAQ,OAAO;eACf,OAAO,OAAO;iBACZ,QAAQ,YAAY;iBACpB,OAAO,YAAY;;;aAGvB,SAAS,OAAO;eACd,SAAS,YAAY;eACrB;eACA,OAAO,OAAO;;aAEhB,UAAU,OAAO;eAAkB,QAAQ;eAAa;;aACxD,MAAM,OAAO;eAAkB,QAAQ;eAAa;;aACpD,SAAS,OAAO;eACd;iBAAmB,QAAQ,YAAY;iBAAc,OAAO,YAAY;;eACxE,IAAI,YAAY;;;;WAIpB,MAAM,SAAS;;WAEf,OAAO,SAAS,gBAAgB;;WAEhC;WACA;WACA;WACA;aAAsB;aAAwB;;WAC9C,YAAY;;WAEZ,QAAQ,QAAQ,IAAI,KAAK,KAAK,GAAG,YAAY,aAAa;;WAE1D,SAAS,SAAS,YAAY,QAAQ,OAAO,OAAO;;;;;;;WAOpD;WACA,QAAQ;;;;;WAKR,SAAS;;WAET,UAAU;;;;;WAKV,SAAS;;;;;;WAMT;;WAEA,mBAAmB,KAAK,MAAM,WAAW;;;qBAMvC,SAAM,QAAY;cA8CzB,OAAQ;;;;;;;;EAQZ,SAAS,KAAK,cAAc,eAAe,WAAW,gBAAc,MAC5D,WAAW,KAAK,WACrB,SAAS,gBACH,WACP,UAAU,WAAW,uBAAuB,KAAK,QAAQ,MAAM,UAC/D;;qBAitCS,qBAAY"}