foldkit-mixins-data-grid 0.2.14 → 0.3.0

package/dist/marks.js

@@ -0,0 +1,90 @@
+import { GridSlots } from "./slots.js";
+import { ref } from "./style.js";
+import { Attr, Layers, Slot, SlotView, Slots, Style } from "foldkit-mixins";
+// src/marks.ts
+/**
+* The marks an editable grid over a server shows on a cell, by name, styled
+* on the theme's tokens, with a legend drawn from the same rules: an edit not
+* sent, one saved that the read rows do not show yet, one the server refused,
+* one another device's later edit replaced, and another device's focus.
+* `CellMark.name` stays any string; these are the shared ones.
+*/
+const GridMarks = [
+	"pending",
+	"saved",
+	"refused",
+	"replaced",
+	"peer"
+];
+/** A dot in the top end corner, filled or hollow: an edit on its way. */
+const dot = (color, hollow) => ({ backgroundImage: hollow ? `radial-gradient(circle at calc(100% - 6px) 6px, transparent 2px, ${color} 2.5px, ${color} 3.5px, transparent 4px)` : `radial-gradient(circle at calc(100% - 6px) 6px, ${color} 3px, transparent 3.5px)` });
+/** A 2px inset edge, and a ground: something that needs reading. */
+const edge = (color, ground) => ({
+	backgroundImage: "none",
+	boxShadow: `inset 0 0 0 ${ref.border.thick} ${color}`,
+	...ground === void 0 ? {} : { background: ground }
+});
+const looks = {
+	pending: dot(ref.info.default, false),
+	saved: dot(ref.success.ink, true),
+	refused: edge(ref.error.ink, ref.error.subtle),
+	replaced: edge(ref.warning.ink),
+	peer: edge(`var(--fk-grid-peer, ${ref.secondary.default})`, ref.secondary.subtle)
+};
+/** Each mark's rule on an element carrying `data-mark`, and an outline where colour is forced. */
+const marked = Style.compose(...GridMarks.map((mark) => Style.nest(`&[data-mark="${mark}"]`, looks[mark])), Style.at("@media (forced-colors: active)", Style.nest("&[data-mark]", { outline: `${ref.border.thick} solid CanvasText` })));
+const GridLegendSlots = Slots.define({
+	/** The list: labelled, so a screen reader names what the marks are. */
+	legend: Slot.make({ attributes: [Attr.AriaLabel] }),
+	/** One mark and its words. */
+	legendItem: Slot.make({}),
+	/** The mark drawn small, as the cells draw it (`data-mark`), hidden from screen readers. */
+	legendSwatch: Slot.make({})
+});
+const words = {
+	label: "What the marks on a cell mean",
+	marks: {
+		pending: "Not sent yet",
+		saved: "Saved, not yet in the table",
+		refused: "Not saved",
+		replaced: "Replaced by another device",
+		peer: "Another device is here"
+	}
+};
+/**
+* A legend of the marks, each beside a swatch drawn by the same rules as the
+* cells (`GridMarkStyle` styles both), so the two cannot drift apart.
+*/
+const GridLegend = () => SlotView.forMessages().define(GridLegendSlots, (input, slots, h) => {
+	const said = input.words ?? words;
+	return h.ul(slots.legend.attrs([h.AriaLabel(said.label)]), (input.marks ?? GridMarks).map((mark) => h.li(slots.legendItem.attrs([]), [h.span(slots.legendSwatch.attrs([h.DataAttribute("mark", mark), h.AriaHidden(true)]), []), said.marks[mark]])));
+});
+/** The marks on the grid's cells. Attach after `GridStyle`, whose plain dot it replaces by name. */
+const GridMarkStyle = Style.forSlots(GridSlots)({ cell: marked }, { layer: Layers.standard.layer("components") });
+/** The legend's look, its swatches drawn by the cells' own rules. */
+const GridLegendStyle = Style.forSlots(GridLegendSlots)({
+	legend: {
+		display: "flex",
+		flexWrap: "wrap",
+		gap: `${ref.space["2xs"]} ${ref.space.md}`,
+		listStyle: "none",
+		margin: "0",
+		padding: "0",
+		fontSize: ref.size.xs,
+		color: ref.text.muted
+	},
+	legendItem: {
+		display: "inline-flex",
+		alignItems: "center",
+		gap: ref.space.xs
+	},
+	legendSwatch: Style.compose(Style.inline({
+		display: "inline-block",
+		width: "12px",
+		height: "12px",
+		borderRadius: ref.radius.xs
+	}), marked)
+}, { layer: Layers.standard.layer("components") });
+export { GridLegend, GridLegendSlots, GridLegendStyle, GridMarkStyle, GridMarks };
+
+//# sourceMappingURL=marks.js.map

package/dist/marks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marks.js","names":[],"sources":["../src/marks.ts"],"sourcesContent":["/**\n * The marks an editable grid over a server shows on a cell, by name, styled\n * on the theme's tokens, with a legend drawn from the same rules: an edit not\n * sent, one saved that the read rows do not show yet, one the server refused,\n * one another device's later edit replaced, and another device's focus.\n * `CellMark.name` stays any string; these are the shared ones.\n */\nimport { Attr, Layers, Slot, Slots, SlotView, Style } from 'foldkit-mixins'\nimport type { Html } from 'foldkit/html'\nimport { GridSlots } from './slots.js'\nimport { ref } from './style.js'\n\nexport const GridMarks = ['pending', 'saved', 'refused', 'replaced', 'peer'] as const\nexport type GridMark = (typeof GridMarks)[number]\n\n/** A dot in the top end corner, filled or hollow: an edit on its way. */\nconst dot = (color: string, hollow: boolean) => ({\n  backgroundImage: hollow\n    ? `radial-gradient(circle at calc(100% - 6px) 6px, transparent 2px, ${color} 2.5px, ${color} 3.5px, transparent 4px)`\n    : `radial-gradient(circle at calc(100% - 6px) 6px, ${color} 3px, transparent 3.5px)`,\n})\n/** A 2px inset edge, and a ground: something that needs reading. */\nconst edge = (color: string, ground?: string) => ({\n  backgroundImage: 'none',\n  boxShadow: `inset 0 0 0 ${ref.border.thick} ${color}`,\n  ...(ground === undefined ? {} : { background: ground }),\n})\n\n// Edges use the families' ink, which keeps 3:1 against the base surface; a\n// peer's colour can be the application's, per person, through --fk-grid-peer.\nconst looks: Readonly<Record<GridMark, Record<string, string>>> = {\n  pending: dot(ref.info.default, false),\n  saved: dot(ref.success.ink, true),\n  refused: edge(ref.error.ink, ref.error.subtle),\n  replaced: edge(ref.warning.ink),\n  peer: edge(`var(--fk-grid-peer, ${ref.secondary.default})`, ref.secondary.subtle),\n}\n\n/** Each mark's rule on an element carrying `data-mark`, and an outline where colour is forced. */\nconst marked = Style.compose(\n  ...GridMarks.map(mark => Style.nest(`&[data-mark=\"${mark}\"]`, looks[mark])),\n  // Forced colours drop box shadows and backgrounds: an outline still says it.\n  Style.at(\n    '@media (forced-colors: active)',\n    Style.nest('&[data-mark]', { outline: `${ref.border.thick} solid CanvasText` }),\n  ),\n)\n\nexport const GridLegendSlots = Slots.define({\n  /** The list: labelled, so a screen reader names what the marks are. */\n  legend: Slot.make({ attributes: [Attr.AriaLabel] }),\n  /** One mark and its words. */\n  legendItem: Slot.make({}),\n  /** The mark drawn small, as the cells draw it (`data-mark`), hidden from screen readers. */\n  legendSwatch: Slot.make({}),\n})\n\n/** The words for each mark, and the legend's own label. */\nexport interface GridLegendWords {\n  readonly label: string\n  readonly marks: Readonly<Record<GridMark, string>>\n}\n\nconst words: GridLegendWords = {\n  label: 'What the marks on a cell mean',\n  marks: {\n    pending: 'Not sent yet',\n    saved: 'Saved, not yet in the table',\n    refused: 'Not saved',\n    replaced: 'Replaced by another device',\n    peer: 'Another device is here',\n  },\n}\n\nexport interface GridLegendInput {\n  /** The marks to explain, in order; all five when omitted. */\n  readonly marks?: ReadonlyArray<GridMark>\n  readonly words?: GridLegendWords\n}\n\n/**\n * A legend of the marks, each beside a swatch drawn by the same rules as the\n * cells (`GridMarkStyle` styles both), so the two cannot drift apart.\n */\nexport const GridLegend = <Message>() =>\n  SlotView.forMessages<Message>().define(\n    GridLegendSlots,\n    (input: GridLegendInput, slots, h): Html => {\n      const said = input.words ?? words\n      return h.ul(\n        slots.legend.attrs([h.AriaLabel(said.label)]),\n        (input.marks ?? GridMarks).map(mark =>\n          h.li(slots.legendItem.attrs([]), [\n            h.span(\n              slots.legendSwatch.attrs([h.DataAttribute('mark', mark), h.AriaHidden(true)]),\n              [],\n            ),\n            said.marks[mark],\n          ]),\n        ),\n      )\n    },\n  )\n\n/** The marks on the grid's cells. Attach after `GridStyle`, whose plain dot it replaces by name. */\nexport const GridMarkStyle = Style.forSlots(GridSlots)(\n  { cell: marked },\n  { layer: Layers.standard.layer('components') },\n)\n\n/** The legend's look, its swatches drawn by the cells' own rules. */\nexport const GridLegendStyle = Style.forSlots(GridLegendSlots)(\n  {\n    legend: {\n      display: 'flex',\n      flexWrap: 'wrap',\n      gap: `${ref.space['2xs']} ${ref.space.md}`,\n      listStyle: 'none',\n      margin: '0',\n      padding: '0',\n      fontSize: ref.size.xs,\n      color: ref.text.muted,\n    },\n    legendItem: { display: 'inline-flex', alignItems: 'center', gap: ref.space.xs },\n    legendSwatch: Style.compose(\n      Style.inline({\n        display: 'inline-block',\n        width: '12px',\n        height: '12px',\n        borderRadius: ref.radius.xs,\n      }),\n      marked,\n    ),\n  },\n  { layer: Layers.standard.layer('components') },\n)\n"],"mappings":";;;;;;;;;;;AAYA,MAAa,YAAY;CAAC;CAAW;CAAS;CAAW;CAAY;AAAM;;AAI3E,MAAM,OAAO,OAAe,YAAqB,EAC/C,iBAAiB,SACb,oEAAoE,MAAM,UAAU,MAAM,4BAC1F,mDAAmD,MAAM,0BAC/D;;AAEA,MAAM,QAAQ,OAAe,YAAqB;CAChD,iBAAiB;CACjB,WAAW,eAAe,IAAI,OAAO,MAAM,GAAG;CAC9C,GAAI,WAAW,KAAA,IAAY,CAAC,IAAI,EAAE,YAAY,OAAO;AACvD;AAIA,MAAM,QAA4D;CAChE,SAAS,IAAI,IAAI,KAAK,SAAS,KAAK;CACpC,OAAO,IAAI,IAAI,QAAQ,KAAK,IAAI;CAChC,SAAS,KAAK,IAAI,MAAM,KAAK,IAAI,MAAM,MAAM;CAC7C,UAAU,KAAK,IAAI,QAAQ,GAAG;CAC9B,MAAM,KAAK,uBAAuB,IAAI,UAAU,QAAQ,IAAI,IAAI,UAAU,MAAM;AAClF;;AAGA,MAAM,SAAS,MAAM,QACnB,GAAG,UAAU,KAAI,SAAQ,MAAM,KAAK,gBAAgB,KAAK,KAAK,MAAM,KAAK,CAAC,GAE1E,MAAM,GACJ,kCACA,MAAM,KAAK,gBAAgB,EAAE,SAAS,GAAG,IAAI,OAAO,MAAM,mBAAmB,CAAC,CAChF,CACF;AAEA,MAAa,kBAAkB,MAAM,OAAO;;CAE1C,QAAQ,KAAK,KAAK,EAAE,YAAY,CAAC,KAAK,SAAS,EAAE,CAAC;;CAElD,YAAY,KAAK,KAAK,CAAC,CAAC;;CAExB,cAAc,KAAK,KAAK,CAAC,CAAC;AAC5B,CAAC;AAQD,MAAM,QAAyB;CAC7B,OAAO;CACP,OAAO;EACL,SAAS;EACT,OAAO;EACP,SAAS;EACT,UAAU;EACV,MAAM;CACR;AACF;;;;;AAYA,MAAa,mBACX,SAAS,YAAqB,CAAC,CAAC,OAC9B,kBACC,OAAwB,OAAO,MAAY;CAC1C,MAAM,OAAO,MAAM,SAAS;CAC5B,OAAO,EAAE,GACP,MAAM,OAAO,MAAM,CAAC,EAAE,UAAU,KAAK,KAAK,CAAC,CAAC,IAC3C,MAAM,SAAS,UAAA,CAAW,KAAI,SAC7B,EAAE,GAAG,MAAM,WAAW,MAAM,CAAC,CAAC,GAAG,CAC/B,EAAE,KACA,MAAM,aAAa,MAAM,CAAC,EAAE,cAAc,QAAQ,IAAI,GAAG,EAAE,WAAW,IAAI,CAAC,CAAC,GAC5E,CAAC,CACH,GACA,KAAK,MAAM,KACb,CAAC,CACH,CACF;AACF,CACF;;AAGF,MAAa,gBAAgB,MAAM,SAAS,SAAS,CAAC,CACpD,EAAE,MAAM,OAAO,GACf,EAAE,OAAO,OAAO,SAAS,MAAM,YAAY,EAAE,CAC/C;;AAGA,MAAa,kBAAkB,MAAM,SAAS,eAAe,CAAC,CAC5D;CACE,QAAQ;EACN,SAAS;EACT,UAAU;EACV,KAAK,GAAG,IAAI,MAAM,OAAO,GAAG,IAAI,MAAM;EACtC,WAAW;EACX,QAAQ;EACR,SAAS;EACT,UAAU,IAAI,KAAK;EACnB,OAAO,IAAI,KAAK;CAClB;CACA,YAAY;EAAE,SAAS;EAAe,YAAY;EAAU,KAAK,IAAI,MAAM;CAAG;CAC9E,cAAc,MAAM,QAClB,MAAM,OAAO;EACX,SAAS;EACT,OAAO;EACP,QAAQ;EACR,cAAc,IAAI,OAAO;CAC3B,CAAC,GACD,MACF;AACF,GACA,EAAE,OAAO,OAAO,SAAS,MAAM,YAAY,EAAE,CAC/C"}

package/dist/moreOnScroll.d.ts

@@ -0,0 +1,12 @@
+import { GridSlots } from "./slots.js";
+import { GridInput } from "./view.js";
+import { SlotView } from "foldkit-mixins";
+/**
+ * Sends the grid's `onMore` as its More button comes within 200px of the
+ * grid's visible box, and again after each load while the button stays
+ * there; the button stays for the keyboard. Nothing is asked while the rows'
+ * source is busy. Attach it to a grid's view:
+ * `DataGridView<Message>().define(Grid).pipe(MoreOnScroll)`.
+ */
+export declare const MoreOnScroll: <Row, Id extends string, GridMessage, Message>(view: SlotView.SlotView<typeof GridSlots, GridInput<Row, Id, GridMessage, Message>, Message>) => SlotView.SlotView<typeof GridSlots, GridInput<Row, Id, GridMessage, Message>, Message>;
+//# sourceMappingURL=moreOnScroll.d.ts.map

package/dist/moreOnScroll.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"moreOnScroll.d.ts","names":[],"sources":["../src/moreOnScroll.ts"],"mappings":";;;;;;;;;;qBAaa,eAAgB,KAAK,mBAAmB,aAAa,SAAO,MACjE,SAAS,gBAAgB,WAAW,UAAU,KAAK,IAAI,aAAa,UAAU,aACnF,SAAS,gBAAgB,WAAW,UAAU,KAAK,IAAI,aAAa,UAAU"}

package/dist/moreOnScroll.js

@@ -0,0 +1,17 @@
+import * as Mount from "foldkit/mount";
+import { GridSlots } from "./slots.js";
+import { isBusy } from "./view.js";
+import { Behavior } from "foldkit-mixins";
+import { Nearing } from "./nearEnd.js";
+// src/moreOnScroll.ts
+/**
+* Sends the grid's `onMore` as its More button comes within 200px of the
+* grid's visible box, and again after each load while the button stays
+* there; the button stays for the keyboard. Nothing is asked while the rows'
+* source is busy. Attach it to a grid's view:
+* `DataGridView<Message>().define(Grid).pipe(MoreOnScroll)`.
+*/
+const MoreOnScroll = (view) => Behavior.attach(Behavior.forSlots(GridSlots)({ more: Behavior.slot({ mount: (input) => Mount.mapMessage(Nearing({ watching: !isBusy(input.status) }), () => input.onMore) }) }, { name: "MoreOnScroll" }))(view);
+export { MoreOnScroll };
+
+//# sourceMappingURL=moreOnScroll.js.map

package/dist/moreOnScroll.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"moreOnScroll.js","names":[],"sources":["../src/moreOnScroll.ts"],"sourcesContent":["import { Behavior, type SlotView } from 'foldkit-mixins'\nimport * as Mount from 'foldkit/mount'\nimport { Nearing } from './nearEnd.js'\nimport { GridSlots } from './slots.js'\nimport { isBusy, type GridInput } from './view.js'\n\n/**\n * Sends the grid's `onMore` as its More button comes within 200px of the\n * grid's visible box, and again after each load while the button stays\n * there; the button stays for the keyboard. Nothing is asked while the rows'\n * source is busy. Attach it to a grid's view:\n * `DataGridView<Message>().define(Grid).pipe(MoreOnScroll)`.\n */\nexport const MoreOnScroll = <Row, Id extends string, GridMessage, Message>(\n  view: SlotView.SlotView<typeof GridSlots, GridInput<Row, Id, GridMessage, Message>, Message>,\n): SlotView.SlotView<typeof GridSlots, GridInput<Row, Id, GridMessage, Message>, Message> =>\n  Behavior.attach(\n    Behavior.forSlots(GridSlots)<GridInput<Row, Id, GridMessage, Message>, Message>(\n      {\n        more: Behavior.slot({\n          // The view keys the button by the rows loaded and whether a load is\n          // in flight, so this starts afresh after each load and, still in\n          // view, asks again. It is drawn only when there is an `onMore`.\n          mount: input =>\n            Mount.mapMessage(Nearing({ watching: !isBusy(input.status) }), () => input.onMore!),\n        }),\n      },\n      { name: 'MoreOnScroll' },\n    ),\n  )(view)\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAa,gBACX,SAEA,SAAS,OACP,SAAS,SAAS,SAAS,CAAC,CAC1B,EACE,MAAM,SAAS,KAAK,EAIlB,QAAO,UACL,MAAM,WAAW,QAAQ,EAAE,UAAU,CAAC,OAAO,MAAM,MAAM,EAAE,CAAC,SAAS,MAAM,MAAO,EACtF,CAAC,EACH,GACA,EAAE,MAAM,eAAe,CACzB,CACF,CAAC,CAAC,IAAI"}

package/dist/nearEnd.d.ts

@@ -0,0 +1,15 @@
+import { Schema } from "effect";
+import * as Mount from "foldkit/mount";
+export declare const NearEnd: Schema.TaggedStruct<"NearEnd", {}>;
+/**
+ * The element coming within 200px of the grid's visible box: one report each
+ * time it comes in, measured against the scroll container it sits in, not
+ * the page. Not `watching` (a load in flight), or no observer (SSR, an old
+ * browser), it reports nothing.
+ */
+export declare const Nearing: Mount.MountDefinitionWithArgs<"DataGridNearEnd", {
+  watching: Schema.Boolean;
+}, {
+  readonly _tag: "NearEnd";
+}>;
+//# sourceMappingURL=nearEnd.d.ts.map

package/dist/nearEnd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nearEnd.d.ts","names":[],"sources":["../src/nearEnd.ts"],"mappings":";;qBAGa,SAAO,OAAA;;;;;;;qBAgBP,SAAO,MAAA"}

package/dist/nearEnd.js

@@ -0,0 +1,33 @@
+import { Effect, Queue, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+// src/nearEnd.ts
+const NearEnd = Schema.TaggedStruct("NearEnd", {});
+/** How far ahead of the end the next rows are asked for, so they arrive before they are needed. */
+const ahead = "200px";
+/**
+* The element coming within 200px of the grid's visible box: one report each
+* time it comes in, measured against the scroll container it sits in, not
+* the page. Not `watching` (a load in flight), or no observer (SSR, an old
+* browser), it reports nothing.
+*/
+const Nearing = Mount.defineStream("DataGridNearEnd", {
+	args: { watching: Schema.Boolean },
+	messages: [NearEnd],
+	execute: ({ element, watching }) => Stream.callback((queue) => Effect.gen(function* () {
+		const Observer = globalThis.IntersectionObserver;
+		if (!watching || Observer === void 0) return;
+		yield* Effect.acquireRelease(Effect.sync(() => {
+			const observer = new Observer((entries) => {
+				if (entries.some((entry) => entry.isIntersecting)) Queue.offerUnsafe(queue, NearEnd.make({}));
+			}, {
+				root: element.closest("[role=\"grid\"]"),
+				rootMargin: ahead
+			});
+			observer.observe(element);
+			return observer;
+		}), (observer) => Effect.sync(() => observer.disconnect()));
+	}))
+});
+export { NearEnd, Nearing };
+
+//# sourceMappingURL=nearEnd.js.map

package/dist/nearEnd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nearEnd.js","names":[],"sources":["../src/nearEnd.ts"],"sourcesContent":["import { Effect, Queue, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\n\nexport const NearEnd = Schema.TaggedStruct('NearEnd', {})\n\ntype ObserverCtor = new (\n  callback: IntersectionObserverCallback,\n  options?: IntersectionObserverInit,\n) => IntersectionObserver\n\n/** How far ahead of the end the next rows are asked for, so they arrive before they are needed. */\nconst ahead = '200px'\n\n/**\n * The element coming within 200px of the grid's visible box: one report each\n * time it comes in, measured against the scroll container it sits in, not\n * the page. Not `watching` (a load in flight), or no observer (SSR, an old\n * browser), it reports nothing.\n */\nexport const Nearing = Mount.defineStream('DataGridNearEnd', {\n  args: { watching: Schema.Boolean },\n  messages: [NearEnd],\n  execute: ({ element, watching }) =>\n    Stream.callback<typeof NearEnd.Type>(queue =>\n      Effect.gen(function* () {\n        const Observer = (globalThis as { IntersectionObserver?: ObserverCtor })\n          .IntersectionObserver\n        if (!watching || Observer === undefined) return\n        yield* Effect.acquireRelease(\n          Effect.sync(() => {\n            const observer = new Observer(\n              entries => {\n                if (entries.some(entry => entry.isIntersecting)) {\n                  Queue.offerUnsafe(queue, NearEnd.make({}))\n                }\n              },\n              { root: element.closest('[role=\"grid\"]'), rootMargin: ahead },\n            )\n            observer.observe(element)\n            return observer\n          }),\n          observer => Effect.sync(() => observer.disconnect()),\n        )\n      }),\n    ),\n})\n"],"mappings":";;;AAGA,MAAa,UAAU,OAAO,aAAa,WAAW,CAAC,CAAC;;AAQxD,MAAM,QAAQ;;;;;;;AAQd,MAAa,UAAU,MAAM,aAAa,mBAAmB;CAC3D,MAAM,EAAE,UAAU,OAAO,QAAQ;CACjC,UAAU,CAAC,OAAO;CAClB,UAAU,EAAE,SAAS,eACnB,OAAO,UAA8B,UACnC,OAAO,IAAI,aAAa;EACtB,MAAM,WAAY,WACf;EACH,IAAI,CAAC,YAAY,aAAa,KAAA,GAAW;EACzC,OAAO,OAAO,eACZ,OAAO,WAAW;GAChB,MAAM,WAAW,IAAI,UACnB,YAAW;IACT,IAAI,QAAQ,MAAK,UAAS,MAAM,cAAc,GAC5C,MAAM,YAAY,OAAO,QAAQ,KAAK,CAAC,CAAC,CAAC;GAE7C,GACA;IAAE,MAAM,QAAQ,QAAQ,iBAAe;IAAG,YAAY;GAAM,CAC9D;GACA,SAAS,QAAQ,OAAO;GACxB,OAAO;EACT,CAAC,IACD,aAAY,OAAO,WAAW,SAAS,WAAW,CAAC,CACrD;CACF,CAAC,CACH;AACJ,CAAC"}

package/dist/press.d.ts

@@ -0,0 +1,31 @@
+import { Schema } from "effect";
+import * as Mount from "foldkit/mount";
+export declare const CellClicked: Schema.TaggedStruct<"CellClicked", {
+  /** The clicked gridcell's DOM id. */
+  readonly cell: Schema.String;
+  readonly shiftKey: Schema.Boolean;
+  /** Ctrl, or Meta on a Mac: a toggle. */
+  readonly toggleKey: Schema.Boolean;
+}>;
+/**
+ * Clicks on a grid's cells, with their modifier keys, and the fill handle's
+ * drag (`fillDragOn`), from listeners on the element that holds the cells
+ * rather than one per cell: one Mount, since an element holds one. A click
+ * outside a gridcell, on the fill handle, or ending a fill reports nothing;
+ * what a click means is the grid's update.
+ */
+export declare const CellPress: Mount.MountDefinitionNoArgs<"DataGridCellPress", {
+  readonly _tag: "CellClicked";
+  readonly cell: string;
+  readonly shiftKey: boolean;
+  readonly toggleKey: boolean;
+} | {
+  readonly _tag: "FillDragStarted";
+} | {
+  readonly _tag: "FillDraggedOver";
+  readonly cell: string;
+} | {
+  readonly _tag: "FillDragEnded";
+  readonly completed: boolean;
+}>;
+//# sourceMappingURL=press.d.ts.map

package/dist/press.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"press.d.ts","names":[],"sources":["../src/press.ts"],"mappings":";;qBAUa,aAAW,OAAA;;;;;;;;;;;;;;qBAqBX,WAAS,MAAA"}

package/dist/press.js

@@ -0,0 +1,53 @@
+import { Effect, Queue, Schema, Stream } from "effect";
+import * as Mount from "foldkit/mount";
+import { FillDragEnded, FillDragStarted, FillDraggedOver, fillDragOn } from "./fillDrag.js";
+// src/press.ts
+const CellClicked = Schema.TaggedStruct("CellClicked", {
+	/** The clicked gridcell's DOM id. */
+	cell: Schema.String,
+	shiftKey: Schema.Boolean,
+	/** Ctrl, or Meta on a Mac: a toggle. */
+	toggleKey: Schema.Boolean
+});
+/**
+* Clicks on a grid's cells, with their modifier keys, and the fill handle's
+* drag (`fillDragOn`), from listeners on the element that holds the cells
+* rather than one per cell: one Mount, since an element holds one. A click
+* outside a gridcell, on the fill handle, or ending a fill reports nothing;
+* what a click means is the grid's update.
+*/
+const CellPress = Mount.defineStream("DataGridCellPress", {
+	messages: [
+		CellClicked,
+		FillDragStarted,
+		FillDraggedOver,
+		FillDragEnded
+	],
+	execute: ({ element }) => Stream.callback((queue) => Effect.acquireRelease(Effect.sync(() => {
+		const fill = fillDragOn(element, (fact) => Queue.offerUnsafe(queue, fact));
+		const listener = (event) => {
+			if (fill.owns(event)) return;
+			const from = event.target;
+			if (!(from instanceof Element)) return;
+			const cell = from.closest("[role=\"gridcell\"]");
+			if (cell === null || !element.contains(cell) || cell.id === "") return;
+			const modified = event;
+			Queue.offerUnsafe(queue, CellClicked.make({
+				cell: cell.id,
+				shiftKey: modified.shiftKey === true,
+				toggleKey: modified.ctrlKey === true || modified.metaKey === true
+			}));
+		};
+		element.addEventListener("click", listener);
+		return {
+			listener,
+			fill
+		};
+	}), ({ listener, fill }) => Effect.sync(() => {
+		element.removeEventListener("click", listener);
+		fill.dispose();
+	})))
+});
+export { CellClicked, CellPress };
+
+//# sourceMappingURL=press.js.map

package/dist/press.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"press.js","names":[],"sources":["../src/press.ts"],"sourcesContent":["import { Effect, Queue, Schema, Stream } from 'effect'\nimport * as Mount from 'foldkit/mount'\nimport {\n  FillDragEnded,\n  FillDragStarted,\n  FillDraggedOver,\n  type FillFact,\n  fillDragOn,\n} from './fillDrag.js'\n\nexport const CellClicked = Schema.TaggedStruct('CellClicked', {\n  /** The clicked gridcell's DOM id. */\n  cell: Schema.String,\n  shiftKey: Schema.Boolean,\n  /** Ctrl, or Meta on a Mac: a toggle. */\n  toggleKey: Schema.Boolean,\n})\n\ntype Modified = Event & {\n  readonly shiftKey?: boolean\n  readonly ctrlKey?: boolean\n  readonly metaKey?: boolean\n}\n\n/**\n * Clicks on a grid's cells, with their modifier keys, and the fill handle's\n * drag (`fillDragOn`), from listeners on the element that holds the cells\n * rather than one per cell: one Mount, since an element holds one. A click\n * outside a gridcell, on the fill handle, or ending a fill reports nothing;\n * what a click means is the grid's update.\n */\nexport const CellPress = Mount.defineStream('DataGridCellPress', {\n  messages: [CellClicked, FillDragStarted, FillDraggedOver, FillDragEnded],\n  execute: ({ element }) =>\n    Stream.callback<typeof CellClicked.Type | FillFact>(queue =>\n      Effect.acquireRelease(\n        Effect.sync(() => {\n          const fill = fillDragOn(element, fact => Queue.offerUnsafe(queue, fact))\n          const listener = (event: Event) => {\n            if (fill.owns(event)) return\n            const from = event.target\n            if (!(from instanceof Element)) return\n            const cell = from.closest('[role=\"gridcell\"]')\n            if (cell === null || !element.contains(cell) || cell.id === '') return\n            const modified = event as Modified\n            Queue.offerUnsafe(\n              queue,\n              CellClicked.make({\n                cell: cell.id,\n                shiftKey: modified.shiftKey === true,\n                toggleKey: modified.ctrlKey === true || modified.metaKey === true,\n              }),\n            )\n          }\n          element.addEventListener('click', listener)\n          return { listener, fill }\n        }),\n        ({ listener, fill }) =>\n          Effect.sync(() => {\n            element.removeEventListener('click', listener)\n            fill.dispose()\n          }),\n      ),\n    ),\n})\n"],"mappings":";;;;AAUA,MAAa,cAAc,OAAO,aAAa,eAAe;;CAE5D,MAAM,OAAO;CACb,UAAU,OAAO;;CAEjB,WAAW,OAAO;AACpB,CAAC;;;;;;;;AAeD,MAAa,YAAY,MAAM,aAAa,qBAAqB;CAC/D,UAAU;EAAC;EAAa;EAAiB;EAAiB;CAAa;CACvE,UAAU,EAAE,cACV,OAAO,UAA6C,UAClD,OAAO,eACL,OAAO,WAAW;EAChB,MAAM,OAAO,WAAW,UAAS,SAAQ,MAAM,YAAY,OAAO,IAAI,CAAC;EACvE,MAAM,YAAY,UAAiB;GACjC,IAAI,KAAK,KAAK,KAAK,GAAG;GACtB,MAAM,OAAO,MAAM;GACnB,IAAI,EAAE,gBAAgB,UAAU;GAChC,MAAM,OAAO,KAAK,QAAQ,qBAAmB;GAC7C,IAAI,SAAS,QAAQ,CAAC,QAAQ,SAAS,IAAI,KAAK,KAAK,OAAO,IAAI;GAChE,MAAM,WAAW;GACjB,MAAM,YACJ,OACA,YAAY,KAAK;IACf,MAAM,KAAK;IACX,UAAU,SAAS,aAAa;IAChC,WAAW,SAAS,YAAY,QAAQ,SAAS,YAAY;GAC/D,CAAC,CACH;EACF;EACA,QAAQ,iBAAiB,SAAS,QAAQ;EAC1C,OAAO;GAAE;GAAU;EAAK;CAC1B,CAAC,IACA,EAAE,UAAU,WACX,OAAO,WAAW;EAChB,QAAQ,oBAAoB,SAAS,QAAQ;EAC7C,KAAK,QAAQ;CACf,CAAC,CACL,CACF;AACJ,CAAC"}

package/dist/slots.d.ts

@@ -0,0 +1,85 @@
+import { Attr, Capability, Event, Slot, Slots } from "foldkit-mixins";
+export declare const GridSlots: Slots.Contract<{
+  /** The scroll container: `role="grid"`, the one tab stop, and the keyboard. */
+  readonly root: Slot.UnnamedSlot<Capability.Capability<"Focusable", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly [Event.EventToken<"keydown">], readonly [Attr.AttrToken<"role">, Attr.AttrToken<"aria-label">, Attr.AttrToken<"aria-rowcount">, Attr.AttrToken<"aria-colcount">, Attr.AttrToken<"aria-activedescendant">], readonly Slot.RequirementName[], boolean>;
+  /** The header row's group; it stays at the top while the body scrolls. */
+  readonly header: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  readonly headerRow: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /**
+   * One per drawn column. `data-pinned` is `start` or `end` on a pinned
+   * column; while a header is dragged it has `data-dragging` and follows the
+   * pointer by a `transform`, and the shown neighbour it would land beside
+   * has `data-drop`, `before` or `after`.
+   */
+  readonly headerCell: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /**
+   * A column's resize handle at its end edge: a `role="separator"` with its
+   * width as `aria-valuenow`, dragged with the pointer, or stepped with the
+   * arrow keys once focused. It is out of the tab order, so the grid stays
+   * one tab stop. Only resizable columns have one.
+   */
+  readonly resizeHandle: Slot.UnnamedSlot<Capability.Capability<"Focusable", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly [Event.EventToken<"keydown">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  readonly body: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /** One per drawn row; `aria-rowindex` is its place among every row, drawn or not. */
+  readonly row: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /** One per drawn cell; `data-focused` marks the current one, `data-pinned` a pinned one. */
+  readonly cell: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly [Event.EventToken<"mousedown">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /** A row counted but not loaded yet, drawn at its height for a skeleton to style. */
+  readonly placeholder: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /**
+   * The text field a cell is edited in, drawn in place of its content while
+   * the edit lasts; `aria-invalid` when the column refused the draft.
+   */
+  readonly editor: Slot.UnnamedSlot<Capability.Capability<"TextInput", readonly [Capability.Capability<"Focusable", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>]>, readonly [Event.EventToken<"input">, Event.EventToken<"keydown">, Event.EventToken<"blur">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /**
+   * Why the column refused a draft, shown below the field while the edit
+   * lasts; the field names it with `aria-describedby`.
+   */
+  readonly editorError: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /**
+   * The editor of a column whose schema's text is one of a few literals,
+   * drawn in place of the cell's content while the edit lasts, like
+   * `editor`: a `role="combobox"` showing the draft, its options in
+   * `choiceList` (or, with `choiceEditor: 'native'`, a `select`).
+   */
+  readonly choice: Slot.UnnamedSlot<Capability.Capability<"Focusable", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly [Event.EventToken<"change">, Event.EventToken<"keydown">, Event.EventToken<"blur">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /**
+   * A choice's options, `role="listbox"`, below the cell, or above it when
+   * the cell is low in the view (`data-place="above"`).
+   */
+  readonly choiceList: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /** One literal a `choice` offers: `role="option"`, `aria-selected` on the draft. */
+  readonly choiceOption: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly [Event.EventToken<"click">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /** Said in place of rows when there are none: empty, loading, or failed. */
+  readonly status: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /**
+   * The button on a column's header that opens its menu, when the view is
+   * given `columnMenu`: `aria-haspopup="menu"` and `aria-expanded`, out of
+   * the tab order like the grid's other controls.
+   */
+  readonly menuButton: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly [Attr.AttrToken<"aria-label">], readonly Slot.RequirementName[], boolean>;
+  /**
+   * A column's open menu, below its header: a `role="menu"` that takes focus
+   * and points at its active item with `aria-activedescendant`, as the grid
+   * points at its cell. Focus leaving it closes it.
+   */
+  readonly menu: Slot.UnnamedSlot<Capability.Capability<"Focusable", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly [Event.EventToken<"keydown">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /** One of a menu's items; `data-active` marks the one the keyboard is on. */
+  readonly menuItem: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly [Event.EventToken<"click">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /**
+   * The button on a sortable column's header: a click sends its sort Message.
+   * `data-sort` is `asc` or `desc` while the column is sorted.
+   */
+  readonly sort: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /**
+   * The square at the end corner of the range, or of the focused cell, in a
+   * grid that edits: dragged, it fills the cells it is drawn over. Pointer
+   * only and hidden from assistive technology; Ctrl+D and Ctrl+R fill by key.
+   */
+  readonly fillHandle: Slot.UnnamedSlot<Capability.Capability<"Base", readonly []>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  /** Below the rows: a failure that left them on screen, and the More button. */
+  readonly footer: Slot.UnnamedSlot<Capability.Capability<"Container", readonly [Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>]>, readonly Slot.EventName[], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  readonly retry: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+  readonly more: Slot.UnnamedSlot<Capability.Capability<"Interactive", readonly [Capability.Capability<"Base", readonly []>]>, readonly [Event.EventToken<"click">], readonly Slot.AttributeName[], readonly Slot.RequirementName[], boolean>;
+}>;
+//# sourceMappingURL=slots.d.ts.map

package/dist/slots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slots.d.ts","names":[],"sources":["../src/slots.ts"],"mappings":";qBA8Ba,WAAS,MAAA"}