@expressive/ui 0.0.0-stage → 0.1.0

package/dist/dialog/base.js

@@ -0,0 +1,143 @@
+import { missing } from "../piece.js";
+import { Component } from "@expressive/mvc";
+import { jsx, jsxs } from "@expressive/mvc/jsx-runtime";
+
+//#region src/dialog/base.tsx
+const STACK = [];
+const ARMED = /* @__PURE__ */ new WeakSet();
+const RESTORE = /* @__PURE__ */ new WeakMap();
+const PANEL = /* @__PURE__ */ new WeakMap();
+const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+let ID = 0;
+let LOCKS = 0;
+let overflow = "";
+const Layer = ({ children }) => children;
+/**
+* Modal dialog behavior without a look: focus trap and restore, scroll lock, dismissal and ARIA, assembled from pieces.
+*
+* Every visible piece is a placeholder that throws when rendered - a skin assigns each one it renders. `Layer` renders
+* in place by default; a skin replaces it to move the dialog out of the page. Pieces spread the matching `*Props`
+* getter onto their element to stay accessible.
+*/
+var Dialog = class extends Component {
+	open = false;
+	onClose = void 0;
+	/** Heading, and the dialog's accessible name. */
+	title = void 0;
+	/** Whether Escape, the backdrop and the close button dismiss. */
+	dismissible = true;
+	/** Prefixes the heading id. */
+	id = `dialog-${++ID}`;
+	Layer = Layer;
+	Backdrop = missing("Dialog.Backdrop");
+	Panel = missing("Dialog.Panel");
+	Header = missing("Dialog.Header");
+	Title = missing("Dialog.Title");
+	Close = missing("Dialog.Close");
+	constructor(...args) {
+		super(...args, () => {
+			this.get((current) => {
+				if (current.open) return this.enter();
+			});
+		});
+	}
+	/** For the backdrop: a press that starts and ends on it closes. */
+	get backdropProps() {
+		return {
+			onMouseDown: (event) => {
+				if (event.target === event.currentTarget) ARMED.add(this);
+				else ARMED.delete(this);
+			},
+			onClick: (event) => {
+				if (ARMED.delete(this) && event.target === event.currentTarget) this.close();
+			}
+		};
+	}
+	get panelProps() {
+		const { id, title } = this;
+		return {
+			ref: this.focusIn,
+			id: `${id}-panel`,
+			role: "dialog",
+			"aria-modal": "true",
+			"aria-labelledby": title ? `${id}-title` : void 0,
+			tabIndex: -1
+		};
+	}
+	get titleProps() {
+		return { id: `${this.id}-title` };
+	}
+	get closeProps() {
+		return {
+			type: "button",
+			"aria-label": "Close",
+			onClick: this.close
+		};
+	}
+	/** Ask to close; ignored unless `dismissible`. */
+	close() {
+		if (this.dismissible && this.onClose) this.onClose();
+	}
+	/** Escape closes; Tab goes to `trap`. Ignored unless this is the topmost open dialog. */
+	keyDown(event) {
+		if (STACK[STACK.length - 1] !== this) return;
+		if (event.key == "Escape") {
+			event.preventDefault();
+			this.close();
+		} else if (event.key == "Tab") this.trap(event);
+	}
+	/** Send keys pressed anywhere to `keyDown` while open; returns the release. Defaults to `document`. */
+	listen() {
+		document.addEventListener("keydown", this.keyDown);
+		return () => document.removeEventListener("keydown", this.keyDown);
+	}
+	/** Stop the page behind from scrolling while open; returns the release. Defaults to the body's `overflow`. */
+	lock() {
+		if (!LOCKS++) {
+			overflow = document.body.style.overflow;
+			document.body.style.overflow = "hidden";
+		}
+		return () => {
+			if (!--LOCKS) document.body.style.overflow = overflow;
+		};
+	}
+	/** Keep Tab focus inside the panel, wrapping at either end. Defaults to the DOM's focusable elements. */
+	trap(event) {
+		const panel = PANEL.get(this);
+		const items = Array.from(panel.querySelectorAll(FOCUSABLE));
+		const first = items[0] || panel;
+		const last = items[items.length - 1] || panel;
+		const active = document.activeElement;
+		if (!panel.contains(active) || (event.shiftKey ? active === first || active === panel : active === last)) {
+			event.preventDefault();
+			(event.shiftKey ? last : first).focus();
+		}
+	}
+	enter() {
+		const unlock = this.lock();
+		const release = this.listen();
+		STACK.push(this);
+		return () => {
+			release();
+			unlock();
+			STACK.splice(STACK.indexOf(this), 1);
+			RESTORE.get(this)?.focus();
+			RESTORE.delete(this);
+		};
+	}
+	/** Ref for the panel, in `panelProps`; focuses it, or its `autofocus` element. */
+	focusIn(panel) {
+		if (!panel) return;
+		PANEL.set(this, panel);
+		RESTORE.set(this, document.activeElement);
+		(panel.querySelector("[autofocus]") || panel).focus();
+	}
+	render(props) {
+		const { open, title, dismissible } = this;
+		return open && /* @__PURE__ */ jsx(this.Layer, { children: /* @__PURE__ */ jsx(this.Backdrop, { children: /* @__PURE__ */ jsxs(this.Panel, { children: [(title || dismissible) && /* @__PURE__ */ jsxs(this.Header, { children: [title && /* @__PURE__ */ jsx(this.Title, {}), dismissible && /* @__PURE__ */ jsx(this.Close, {})] }), props.children] }) }) });
+	}
+};
+
+//#endregion
+export { Dialog };
+//# sourceMappingURL=base.js.map

package/dist/dialog/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/dialog/base.tsx"],"sourcesContent":["import { Component, type Model } from '@expressive/mvc';\n\nimport { missing } from '../piece';\n\ndeclare namespace Dialog {\n  type Wrap = (props: { children: Component.Node }) => Component.Node;\n  type Part = () => Component.Node;\n  type Key = Pick<KeyboardEvent, 'key' | 'shiftKey' | 'preventDefault'>;\n}\n\nconst STACK: Dialog[] = [];\n\nconst ARMED = new WeakSet<Dialog>();\n\nconst RESTORE = new WeakMap<Dialog, HTMLElement>();\n\nconst PANEL = new WeakMap<Dialog, HTMLElement>();\n\nconst FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nlet ID = 0;\n\nlet LOCKS = 0;\n\nlet overflow = '';\n\nconst Layer = ({ children }: { children: Component.Node }): Component.Node => children;\n\n/**\n * Modal dialog behavior without a look: focus trap and restore, scroll lock, dismissal and ARIA, assembled from pieces.\n *\n * Every visible piece is a placeholder that throws when rendered - a skin assigns each one it renders. `Layer` renders\n * in place by default; a skin replaces it to move the dialog out of the page. Pieces spread the matching `*Props`\n * getter onto their element to stay accessible.\n */\nclass Dialog extends Component {\n  open = false;\n  onClose?: () => void = undefined;\n\n  /** Heading, and the dialog's accessible name. */\n  title?: string = undefined;\n\n  /** Whether Escape, the backdrop and the close button dismiss. */\n  dismissible = true;\n\n  /** Prefixes the heading id. */\n  id = `dialog-${++ID}`;\n\n  Layer: Dialog.Wrap = Layer;\n  Backdrop: Dialog.Wrap = missing('Dialog.Backdrop');\n  Panel: Dialog.Wrap = missing('Dialog.Panel');\n  Header: Dialog.Wrap = missing('Dialog.Header');\n  Title: Dialog.Part = missing('Dialog.Title');\n  Close: Dialog.Part = missing('Dialog.Close');\n\n  constructor(...args: Model.Args) {\n    super(...args, () => {\n      this.get((current) => {\n        if (current.open) return this.enter();\n      });\n    });\n  }\n\n  /** For the backdrop: a press that starts and ends on it closes. */\n  get backdropProps() {\n    return {\n      onMouseDown: (event: MouseEvent) => {\n        if (event.target === event.currentTarget) ARMED.add(this);\n        else ARMED.delete(this);\n      },\n      onClick: (event: MouseEvent) => {\n        if (ARMED.delete(this) && event.target === event.currentTarget) this.close();\n      }\n    };\n  }\n\n  get panelProps() {\n    const { id, title } = this;\n\n    return {\n      ref: this.focusIn,\n      id: `${id}-panel`,\n      role: 'dialog',\n      'aria-modal': 'true',\n      'aria-labelledby': title ? `${id}-title` : undefined,\n      tabIndex: -1\n    } as const;\n  }\n\n  get titleProps() {\n    return { id: `${this.id}-title` };\n  }\n\n  get closeProps() {\n    return { type: 'button', 'aria-label': 'Close', onClick: this.close } as const;\n  }\n\n  /** Ask to close; ignored unless `dismissible`. */\n  close() {\n    if (this.dismissible && this.onClose) this.onClose();\n  }\n\n  /** Escape closes; Tab goes to `trap`. Ignored unless this is the topmost open dialog. */\n  protected keyDown(event: Dialog.Key) {\n    if (STACK[STACK.length - 1] !== this) return;\n\n    if (event.key == 'Escape') {\n      event.preventDefault();\n      this.close();\n    } else if (event.key == 'Tab') this.trap(event);\n  }\n\n  /** Send keys pressed anywhere to `keyDown` while open; returns the release. Defaults to `document`. */\n  protected listen(): () => void {\n    document.addEventListener('keydown', this.keyDown);\n\n    return () => document.removeEventListener('keydown', this.keyDown);\n  }\n\n  /** Stop the page behind from scrolling while open; returns the release. Defaults to the body's `overflow`. */\n  protected lock(): () => void {\n    if (!LOCKS++) {\n      overflow = document.body.style.overflow;\n      document.body.style.overflow = 'hidden';\n    }\n\n    return () => {\n      if (!--LOCKS) document.body.style.overflow = overflow;\n    };\n  }\n\n  /** Keep Tab focus inside the panel, wrapping at either end. Defaults to the DOM's focusable elements. */\n  protected trap(event: Dialog.Key) {\n    const panel = PANEL.get(this)!;\n    const items = Array.from(panel.querySelectorAll<HTMLElement>(FOCUSABLE));\n    const first = items[0] || panel;\n    const last = items[items.length - 1] || panel;\n    const active = document.activeElement;\n\n    if (!panel.contains(active) || (event.shiftKey ? active === first || active === panel : active === last)) {\n      event.preventDefault();\n      (event.shiftKey ? last : first).focus();\n    }\n  }\n\n  private enter() {\n    const unlock = this.lock();\n    const release = this.listen();\n\n    STACK.push(this);\n\n    return () => {\n      release();\n      unlock();\n      STACK.splice(STACK.indexOf(this), 1);\n      RESTORE.get(this)?.focus();\n      RESTORE.delete(this);\n    };\n  }\n\n  /** Ref for the panel, in `panelProps`; focuses it, or its `autofocus` element. */\n  focusIn(panel: HTMLElement | null) {\n    if (!panel) return;\n\n    PANEL.set(this, panel);\n    RESTORE.set(this, document.activeElement as HTMLElement);\n    (panel.querySelector<HTMLElement>('[autofocus]') || panel).focus();\n  }\n\n  render(props: { children?: Component.Node }): Component.Node {\n    const { open, title, dismissible } = this;\n\n    return (\n      open && (\n        <this.Layer>\n          <this.Backdrop>\n            <this.Panel>\n              {(title || dismissible) && (\n                <this.Header>\n                  {title && <this.Title />}\n                  {dismissible && <this.Close />}\n                </this.Header>\n              )}\n              {props.children}\n            </this.Panel>\n          </this.Backdrop>\n        </this.Layer>\n      )\n    );\n  }\n}\n\nexport { Dialog };\n"],"mappings":"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"}

package/dist/dialog/dialog.d.ts

@@ -0,0 +1,69 @@
+import { Dialog as Dialog$1 } from "./base.js";
+import { Component } from "@expressive/mvc";
+
+//#region src/dialog/dialog.d.ts
+/**
+ * Modal dialog, portalled out of the page while `open`.
+ *
+ * Focus moves in on open - to an `autofocus` element, else the panel - stays trapped while open, and returns on close.
+ * The page behind stops scrolling. Escape and a press on the backdrop call `onClose` unless `dismissible` is false;
+ * only the topmost of stacked dialogs answers. Pieces - `Layer`, `Backdrop`, `Panel`, `Header`, `Title`, `Close` - are
+ * function components reading `Dialog.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 replacement `Panel` spreads `panelProps`; `Layer` portals into `into`.
+ *
+ * @example
+ * <Dialog open={this.editing} title="Rename" onClose={() => (this.editing = false)}>
+ *   <input autofocus value={this.name} />
+ * </Dialog>
+ */
+declare class Dialog extends Dialog$1 {
+  /** Where `Layer` portals: an element or a selector. */
+  into: Element | string;
+  static Layer: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Backdrop: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Panel: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Header: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Title: () => Component.Node;
+  static Close: () => Component.Node;
+  Layer: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Backdrop: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Panel: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Header: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Title: () => Component.Node;
+  Close: () => Component.Node;
+}
+//#endregion
+export { Dialog };
+//# sourceMappingURL=dialog.d.ts.map

package/dist/dialog/dialog.js

@@ -0,0 +1,108 @@
+import { Dialog as Dialog$1 } from "./base.js";
+import { Cross } from "../icons/cross.js";
+import { Portal, style } from "@expressive/dom";
+import { jsx } from "@expressive/dom/jsx-runtime";
+
+//#region src/dialog/dialog.tsx
+const Layer = ({ children }) => /* @__PURE__ */ jsx(Portal, {
+	into: Dialog.get().into,
+	children
+});
+const Backdrop = ({ children }) => /* @__PURE__ */ jsx("div", {
+	...Dialog$1.get().backdropProps,
+	children
+});
+style(Backdrop, {
+	position: "fixed",
+	inset: "0",
+	zIndex: "1000",
+	display: "grid",
+	placeItems: "center",
+	padding: "16px",
+	background: "rgb(0 0 0 / 0.4)"
+});
+const Panel = ({ children }) => /* @__PURE__ */ jsx("div", {
+	...Dialog$1.get().panelProps,
+	children
+});
+style(Panel, {
+	position: "relative",
+	boxSizing: "border-box",
+	width: "min(480px, 100%)",
+	maxHeight: "100%",
+	overflow: "auto",
+	padding: "20px 24px",
+	background: "var(--ui-surface, #fff)",
+	color: "inherit",
+	borderRadius: "10px",
+	boxShadow: "0 10px 40px rgb(0 0 0 / 0.2)",
+	outline: "0"
+});
+const Header = ({ children }) => /* @__PURE__ */ jsx("div", { children });
+style(Header, {
+	display: "flex",
+	alignItems: "center",
+	gap: "12px",
+	marginBottom: "12px"
+});
+const Title = () => {
+	const { title, titleProps } = Dialog$1.get();
+	return /* @__PURE__ */ jsx("h2", {
+		...titleProps,
+		children: title
+	});
+};
+style(Title, {
+	flex: "1",
+	margin: "0",
+	fontSize: "18px"
+});
+const Close = () => /* @__PURE__ */ jsx("button", {
+	...Dialog$1.get().closeProps,
+	children: /* @__PURE__ */ jsx(Cross, {})
+});
+style(Close, {
+	display: "flex",
+	marginLeft: "auto",
+	padding: "6px",
+	border: "0",
+	borderRadius: "4px",
+	background: "none",
+	color: "var(--ui-muted, #999)",
+	cursor: "pointer",
+	":hover": { background: "var(--ui-highlight, #deebff)" }
+});
+/**
+* Modal dialog, portalled out of the page while `open`.
+*
+* Focus moves in on open - to an `autofocus` element, else the panel - stays trapped while open, and returns on close.
+* The page behind stops scrolling. Escape and a press on the backdrop call `onClose` unless `dismissible` is false;
+* only the topmost of stacked dialogs answers. Pieces - `Layer`, `Backdrop`, `Panel`, `Header`, `Title`, `Close` - are
+* function components reading `Dialog.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 replacement `Panel` spreads `panelProps`; `Layer` portals into `into`.
+*
+* @example
+* <Dialog open={this.editing} title="Rename" onClose={() => (this.editing = false)}>
+*   <input autofocus value={this.name} />
+* </Dialog>
+*/
+var Dialog = class extends Dialog$1 {
+	/** Where `Layer` portals: an element or a selector. */
+	into = "body";
+	static Layer = Layer;
+	static Backdrop = Backdrop;
+	static Panel = Panel;
+	static Header = Header;
+	static Title = Title;
+	static Close = Close;
+	Layer = Layer;
+	Backdrop = Backdrop;
+	Panel = Panel;
+	Header = Header;
+	Title = Title;
+	Close = Close;
+};
+
+//#endregion
+export { Dialog };
+//# sourceMappingURL=dialog.js.map

package/dist/dialog/dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.js","names":["Base.Dialog"],"sources":["../../src/dialog/dialog.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport { Component } from '@expressive/mvc';\nimport { Portal, style } from '@expressive/dom';\n\nimport { Cross } from '../icons';\nimport * as Base from './base';\n\nconst Layer = ({ children }: { children: Component.Node }): Component.Node => (\n  <Portal into={Dialog.get().into}>{children}</Portal>\n);\n\nconst Backdrop = ({ children }: { children: Component.Node }): Component.Node => (\n  <div {...Base.Dialog.get().backdropProps}>{children}</div>\n);\n\nstyle(Backdrop, {\n  position: 'fixed',\n  inset: '0',\n  zIndex: '1000',\n  display: 'grid',\n  placeItems: 'center',\n  padding: '16px',\n  background: 'rgb(0 0 0 / 0.4)'\n});\n\nconst Panel = ({ children }: { children: Component.Node }): Component.Node => (\n  <div {...Base.Dialog.get().panelProps}>{children}</div>\n);\n\nstyle(Panel, {\n  position: 'relative',\n  boxSizing: 'border-box',\n  width: 'min(480px, 100%)',\n  maxHeight: '100%',\n  overflow: 'auto',\n  padding: '20px 24px',\n  background: 'var(--ui-surface, #fff)',\n  color: 'inherit',\n  borderRadius: '10px',\n  boxShadow: '0 10px 40px rgb(0 0 0 / 0.2)',\n  outline: '0'\n});\n\nconst Header = ({ children }: { children: Component.Node }): Component.Node => <div>{children}</div>;\n\nstyle(Header, {\n  display: 'flex',\n  alignItems: 'center',\n  gap: '12px',\n  marginBottom: '12px'\n});\n\nconst Title = (): Component.Node => {\n  const { title, titleProps } = Base.Dialog.get();\n\n  return <h2 {...titleProps}>{title}</h2>;\n};\n\nstyle(Title, {\n  flex: '1',\n  margin: '0',\n  fontSize: '18px'\n});\n\nconst Close = (): Component.Node => (\n  <button {...Base.Dialog.get().closeProps}>\n    <Cross />\n  </button>\n);\n\nstyle(Close, {\n  display: 'flex',\n  marginLeft: 'auto',\n  padding: '6px',\n  border: '0',\n  borderRadius: '4px',\n  background: 'none',\n  color: 'var(--ui-muted, #999)',\n  cursor: 'pointer',\n  ':hover': {\n    background: 'var(--ui-highlight, #deebff)'\n  }\n});\n\n/**\n * Modal dialog, portalled out of the page while `open`.\n *\n * Focus moves in on open - to an `autofocus` element, else the panel - stays trapped while open, and returns on close.\n * The page behind stops scrolling. Escape and a press on the backdrop call `onClose` unless `dismissible` is false;\n * only the topmost of stacked dialogs answers. Pieces - `Layer`, `Backdrop`, `Panel`, `Header`, `Title`, `Close` - are\n * function components reading `Dialog.get()`, each styled on its own; pass one as a prop or assign it in a subclass to\n * replace it. Stock pieces are statics. A replacement `Panel` spreads `panelProps`; `Layer` portals into `into`.\n *\n * @example\n * <Dialog open={this.editing} title=\"Rename\" onClose={() => (this.editing = false)}>\n *   <input autofocus value={this.name} />\n * </Dialog>\n */\nclass Dialog extends Base.Dialog {\n  /** Where `Layer` portals: an element or a selector. */\n  into: Element | string = 'body';\n\n  static Layer = Layer;\n  static Backdrop = Backdrop;\n  static Panel = Panel;\n  static Header = Header;\n  static Title = Title;\n  static Close = Close;\n\n  Layer = Layer;\n  Backdrop = Backdrop;\n  Panel = Panel;\n  Header = Header;\n  Title = Title;\n  Close = Close;\n}\n\nexport { Backdrop, Close, Dialog, Header, Layer, Panel, Title };\n"],"mappings":";;;;;;AAOA,MAAM,SAAS,EAAE,eACf,oBAAC;CAAO,MAAM,OAAO,KAAK,CAAC;CAAO;EAAkB;AAGtD,MAAM,YAAY,EAAE,eAClB,oBAAC;CAAI,YAAgB,KAAK,CAAC;CAAgB;EAAe;AAG5D,MAAM,UAAU;CACd,UAAU;CACV,OAAO;CACP,QAAQ;CACR,SAAS;CACT,YAAY;CACZ,SAAS;CACT,YAAY;CACb,CAAC;AAEF,MAAM,SAAS,EAAE,eACf,oBAAC;CAAI,YAAgB,KAAK,CAAC;CAAa;EAAe;AAGzD,MAAM,OAAO;CACX,UAAU;CACV,WAAW;CACX,OAAO;CACP,WAAW;CACX,UAAU;CACV,SAAS;CACT,YAAY;CACZ,OAAO;CACP,cAAc;CACd,WAAW;CACX,SAAS;CACV,CAAC;AAEF,MAAM,UAAU,EAAE,eAA6D,oBAAC,SAAK,WAAe;AAEpG,MAAM,QAAQ;CACZ,SAAS;CACT,YAAY;CACZ,KAAK;CACL,cAAc;CACf,CAAC;AAEF,MAAM,cAA8B;CAClC,MAAM,EAAE,OAAO,wBAA2B,KAAK;AAE/C,QAAO,oBAAC;EAAG,GAAI;YAAa;GAAW;;AAGzC,MAAM,OAAO;CACX,MAAM;CACN,QAAQ;CACR,UAAU;CACX,CAAC;AAEF,MAAM,cACJ,oBAAC;CAAO,YAAgB,KAAK,CAAC;WAC5B,oBAAC,UAAQ;EACF;AAGX,MAAM,OAAO;CACX,SAAS;CACT,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,cAAc;CACd,YAAY;CACZ,OAAO;CACP,QAAQ;CACR,UAAU,EACR,YAAY,gCACb;CACF,CAAC;;;;;;;;;;;;;;;AAgBF,IAAM,SAAN,cAAqBA,SAAY;;CAE/B,OAAyB;CAEzB,OAAO,QAAQ;CACf,OAAO,WAAW;CAClB,OAAO,QAAQ;CACf,OAAO,SAAS;CAChB,OAAO,QAAQ;CACf,OAAO,QAAQ;CAEf,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,SAAS;CACT,QAAQ;CACR,QAAQ"}

package/dist/dom.d.ts

@@ -0,0 +1,16 @@
+import { Button } from "./button/button.js";
+import { Calendar } from "./calendar/calendar.js";
+import { Dialog } from "./dialog/dialog.js";
+import { Dropzone } from "./dropzone/dropzone.js";
+import { Field, Form, Submit } from "./form/form.js";
+import { Caret } from "./icons/caret.js";
+import { Check } from "./icons/check.js";
+import { Cross } from "./icons/cross.js";
+import { Spinner } from "./icons/spinner.js";
+import { Upload } from "./icons/upload.js";
+import { Layout } from "./layout/layout.js";
+import { Popover } from "./popover/popover.js";
+import { Select } from "./select/select.js";
+import { CellProps, CellSlot, Column, HeadProps, HeadSlot } from "./table/column.js";
+import { Table } from "./table/table.js";
+export { Button, Calendar, Caret, type CellProps, type CellSlot, Check, Column, Cross, Dialog, Dropzone, Field, Form, type HeadProps, type HeadSlot, Layout, Popover, Select, Spinner, Submit, Table, Upload };

package/dist/dom.js

@@ -0,0 +1,17 @@
+import { Column } from "./table/column.js";
+import { Caret } from "./icons/caret.js";
+import { Check } from "./icons/check.js";
+import { Cross } from "./icons/cross.js";
+import { Spinner } from "./icons/spinner.js";
+import { Upload } from "./icons/upload.js";
+import { Button } from "./button/button.js";
+import { Calendar } from "./calendar/calendar.js";
+import { Dialog } from "./dialog/dialog.js";
+import { Dropzone } from "./dropzone/dropzone.js";
+import { Field, Form, Submit } from "./form/form.js";
+import { Layout } from "./layout/layout.js";
+import { Popover } from "./popover/popover.js";
+import { Select } from "./select/select.js";
+import { Table } from "./table/table.js";
+
+export { Button, Calendar, Caret, Check, Column, Cross, Dialog, Dropzone, Field, Form, Layout, Popover, Select, Spinner, Submit, Table, Upload };

package/dist/dropzone/base.d.ts

@@ -0,0 +1,77 @@
+import { Component, Model, ref } from "@expressive/mvc";
+
+//#region src/dropzone/base.d.ts
+declare namespace Dropzone {
+  type Drag = Pick<DragEvent, 'dataTransfer' | 'preventDefault' | 'stopPropagation'>;
+  type Wrap = (props: {
+    children: Component.Node;
+  }) => Component.Node;
+  type Part = () => Component.Node;
+}
+/**
+ * File drop target without a look: drag state, accept filtering, the hidden file input and messages, from pieces.
+ *
+ * `Root`, `Prompt` and `Message` are placeholders that throw when rendered - a skin assigns each, spreading
+ * `rootProps` and `promptProps`; `Message` writes `role="alert"`. `Input` is the hidden file input and needs no skin.
+ */
+declare class Dropzone extends Component {
+  onDrop?: (files: File[]) => void;
+  onReject?: (files: File[]) => void;
+  accept?: string;
+  multiple: boolean;
+  disabled: boolean;
+  label: string;
+  hint?: string;
+  /** Nested drag-enter count; above zero while files hover. */
+  depth: number;
+  /** Files turned away by the last drop or pick. */
+  rejected: File[];
+  input: ref.Object<HTMLInputElement>;
+  Root: Dropzone.Wrap;
+  Input: Dropzone.Part;
+  Prompt: Dropzone.Part;
+  Message: Dropzone.Part;
+  constructor(...args: Model.Args);
+  /** Why the last drop or pick skipped files; empty when none were. */
+  get message(): string;
+  /** For the drop target: drag handlers. */
+  get rootProps(): {
+    onDragEnter: (event: Dropzone.Drag) => void;
+    onDragOver: (event: Dropzone.Drag) => void;
+    onDragLeave: (event: Dropzone.Drag) => void;
+    onDrop: (event: Dropzone.Drag) => void;
+  };
+  /** For the hidden file input. */
+  get inputProps(): {
+    readonly ref: ref.Object<HTMLInputElement>;
+    readonly type: "file";
+    readonly tabIndex: -1;
+    readonly 'aria-hidden': "true";
+    readonly accept: string | undefined;
+    readonly multiple: boolean;
+    readonly onChange: (event: Event) => void;
+  };
+  /** For the browse button, with `active` while files hover. */
+  get promptProps(): {
+    active: boolean;
+    props: {
+      readonly type: "button";
+      readonly disabled: boolean;
+      readonly onClick: () => void;
+    };
+  };
+  /** Keep files dropped beside the target from opening in the page; returns the release. Defaults to `document`. */
+  protected listen(): () => void;
+  /** Open the file picker. */
+  browse(): void;
+  /** Sort files into accepted and rejected, and report each. */
+  receive(files: File[]): void;
+  protected enter(event: Dropzone.Drag): void;
+  protected over(event: Dropzone.Drag): void;
+  protected leave(event: Dropzone.Drag): void;
+  protected drop(event: Dropzone.Drag): void;
+  render(): Component.Node;
+}
+//#endregion
+export { Dropzone };
+//# sourceMappingURL=base.d.ts.map

package/dist/dropzone/base.js

@@ -0,0 +1,159 @@
+import { missing } from "../piece.js";
+import { Component, ref } from "@expressive/mvc";
+import { jsx, jsxs } from "@expressive/mvc/jsx-runtime";
+
+//#region src/dropzone/base.tsx
+/**
+* File drop target without a look: drag state, accept filtering, the hidden file input and messages, from pieces.
+*
+* `Root`, `Prompt` and `Message` are placeholders that throw when rendered - a skin assigns each, spreading
+* `rootProps` and `promptProps`; `Message` writes `role="alert"`. `Input` is the hidden file input and needs no skin.
+*/
+var Dropzone = class extends Component {
+	onDrop = void 0;
+	onReject = void 0;
+	accept = void 0;
+	multiple = true;
+	disabled = false;
+	label = "Drop files here or click to browse";
+	hint = void 0;
+	/** Nested drag-enter count; above zero while files hover. */
+	depth = 0;
+	/** Files turned away by the last drop or pick. */
+	rejected = [];
+	input = ref();
+	Root = missing("Dropzone.Root");
+	Input = Input;
+	Prompt = missing("Dropzone.Prompt");
+	Message = missing("Dropzone.Message");
+	constructor(...args) {
+		super(...args, () => {
+			this.get(() => this.listen());
+		});
+	}
+	/** Why the last drop or pick skipped files; empty when none were. */
+	get message() {
+		const { rejected, accept, multiple } = this;
+		const count = rejected.length;
+		if (!count) return "";
+		const reason = !multiple && count > 1 ? "only one file at a time" : `expected ${accept}`;
+		return `Skipped ${count} ${count == 1 ? "file" : "files"} - ${reason}.`;
+	}
+	/** For the drop target: drag handlers. */
+	get rootProps() {
+		return {
+			onDragEnter: this.enter,
+			onDragOver: this.over,
+			onDragLeave: this.leave,
+			onDrop: this.drop
+		};
+	}
+	/** For the hidden file input. */
+	get inputProps() {
+		const { input, accept, multiple } = this;
+		return {
+			ref: input,
+			type: "file",
+			tabIndex: -1,
+			"aria-hidden": "true",
+			accept,
+			multiple,
+			onChange: (event) => {
+				const picker = event.currentTarget;
+				const files = Array.from(picker.files || []);
+				picker.value = "";
+				this.receive(files);
+			}
+		};
+	}
+	/** For the browse button, with `active` while files hover. */
+	get promptProps() {
+		const { disabled, depth } = this;
+		return {
+			active: depth > 0,
+			props: {
+				type: "button",
+				disabled,
+				onClick: this.browse
+			}
+		};
+	}
+	/** Keep files dropped beside the target from opening in the page; returns the release. Defaults to `document`. */
+	listen() {
+		const outside = (event) => {
+			if (carriesFiles(event)) event.preventDefault();
+			if (event.type == "drop") this.depth = 0;
+		};
+		document.addEventListener("dragover", outside);
+		document.addEventListener("drop", outside);
+		return () => {
+			document.removeEventListener("dragover", outside);
+			document.removeEventListener("drop", outside);
+		};
+	}
+	/** Open the file picker. */
+	browse() {
+		if (!this.disabled) this.input.current?.click();
+	}
+	/** Sort files into accepted and rejected, and report each. */
+	receive(files) {
+		if (this.disabled || !files.length) return;
+		const accepted = this.multiple || files.length == 1 ? files.filter((file) => matches(file, this.accept)) : [];
+		const rejected = files.filter((file) => !accepted.includes(file));
+		this.rejected = rejected;
+		if (rejected.length && this.onReject) this.onReject(rejected);
+		if (accepted.length && this.onDrop) this.onDrop(accepted);
+	}
+	enter(event) {
+		event.preventDefault();
+		if (carriesFiles(event) && !this.disabled) this.depth++;
+	}
+	over(event) {
+		event.preventDefault();
+		if (event.dataTransfer) event.dataTransfer.dropEffect = this.disabled ? "none" : "copy";
+	}
+	leave(event) {
+		event.preventDefault();
+		this.depth = Math.max(0, this.depth - 1);
+	}
+	drop(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.depth = 0;
+		this.receive(Array.from(event.dataTransfer?.files || []));
+	}
+	render() {
+		const { rejected } = this;
+		return /* @__PURE__ */ jsxs(this.Root, { children: [
+			/* @__PURE__ */ jsx(this.Input, {}),
+			/* @__PURE__ */ jsx(this.Prompt, {}),
+			rejected.length > 0 && /* @__PURE__ */ jsx(this.Message, {})
+		] });
+	}
+};
+const hidden = {
+	position: "absolute",
+	width: "1px",
+	height: "1px",
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+};
+const Input = () => /* @__PURE__ */ jsx("input", {
+	...Dropzone.get().inputProps,
+	style: hidden
+});
+function carriesFiles(event) {
+	return !!event.dataTransfer && Array.from(event.dataTransfer.types).includes("Files");
+}
+function matches(file, accept) {
+	const patterns = (accept || "").split(",").map((pattern) => pattern.trim().toLowerCase()).filter(Boolean);
+	if (!patterns.length) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return patterns.some((pattern) => pattern.startsWith(".") ? name.endsWith(pattern) : pattern.endsWith("/*") ? type.startsWith(pattern.slice(0, -1)) : type == pattern);
+}
+
+//#endregion
+export { Dropzone };
+//# sourceMappingURL=base.js.map

package/dist/dropzone/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/dropzone/base.tsx"],"sourcesContent":["import { Component, ref, type Model } from '@expressive/mvc';\n\nimport { missing } from '../piece';\n\ndeclare namespace Dropzone {\n  type Drag = Pick<DragEvent, 'dataTransfer' | 'preventDefault' | 'stopPropagation'>;\n\n  type Wrap = (props: { children: Component.Node }) => Component.Node;\n  type Part = () => Component.Node;\n}\n\n/**\n * File drop target without a look: drag state, accept filtering, the hidden file input and messages, from pieces.\n *\n * `Root`, `Prompt` and `Message` are placeholders that throw when rendered - a skin assigns each, spreading\n * `rootProps` and `promptProps`; `Message` writes `role=\"alert\"`. `Input` is the hidden file input and needs no skin.\n */\nclass Dropzone extends Component {\n  onDrop?: (files: File[]) => void = undefined;\n  onReject?: (files: File[]) => void = undefined;\n\n  accept?: string = undefined;\n  multiple = true;\n  disabled = false;\n\n  label = 'Drop files here or click to browse';\n  hint?: string = undefined;\n\n  /** Nested drag-enter count; above zero while files hover. */\n  depth = 0;\n\n  /** Files turned away by the last drop or pick. */\n  rejected: File[] = [];\n\n  input = ref<HTMLInputElement>();\n\n  Root: Dropzone.Wrap = missing('Dropzone.Root');\n  Input: Dropzone.Part = Input;\n  Prompt: Dropzone.Part = missing('Dropzone.Prompt');\n  Message: Dropzone.Part = missing('Dropzone.Message');\n\n  constructor(...args: Model.Args) {\n    super(...args, () => {\n      this.get(() => this.listen());\n    });\n  }\n\n  /** Why the last drop or pick skipped files; empty when none were. */\n  get message(): string {\n    const { rejected, accept, multiple } = this;\n    const count = rejected.length;\n\n    if (!count) return '';\n\n    const reason = !multiple && count > 1 ? 'only one file at a time' : `expected ${accept}`;\n\n    return `Skipped ${count} ${count == 1 ? 'file' : 'files'} - ${reason}.`;\n  }\n\n  /** For the drop target: drag handlers. */\n  get rootProps() {\n    return {\n      onDragEnter: this.enter,\n      onDragOver: this.over,\n      onDragLeave: this.leave,\n      onDrop: this.drop\n    };\n  }\n\n  /** For the hidden file input. */\n  get inputProps() {\n    const { input, accept, multiple } = this;\n\n    return {\n      ref: input,\n      type: 'file',\n      tabIndex: -1,\n      'aria-hidden': 'true',\n      accept,\n      multiple,\n      onChange: (event: Event) => {\n        const picker = event.currentTarget as HTMLInputElement;\n        const files = Array.from(picker.files || []);\n\n        picker.value = '';\n        this.receive(files);\n      }\n    } as const;\n  }\n\n  /** For the browse button, with `active` while files hover. */\n  get promptProps() {\n    const { disabled, depth } = this;\n\n    return {\n      active: depth > 0,\n      props: { type: 'button', disabled, onClick: this.browse } as const\n    };\n  }\n\n  /** Keep files dropped beside the target from opening in the page; returns the release. Defaults to `document`. */\n  protected listen(): () => void {\n    const outside = (event: DragEvent) => {\n      if (carriesFiles(event)) event.preventDefault();\n      if (event.type == 'drop') this.depth = 0;\n    };\n\n    document.addEventListener('dragover', outside);\n    document.addEventListener('drop', outside);\n\n    return () => {\n      document.removeEventListener('dragover', outside);\n      document.removeEventListener('drop', outside);\n    };\n  }\n\n  /** Open the file picker. */\n  browse() {\n    if (!this.disabled) this.input.current?.click();\n  }\n\n  /** Sort files into accepted and rejected, and report each. */\n  receive(files: File[]) {\n    if (this.disabled || !files.length) return;\n\n    const fits = this.multiple || files.length == 1;\n    const accepted = fits ? files.filter((file) => matches(file, this.accept)) : [];\n    const rejected = files.filter((file) => !accepted.includes(file));\n\n    this.rejected = rejected;\n\n    if (rejected.length && this.onReject) this.onReject(rejected);\n    if (accepted.length && this.onDrop) this.onDrop(accepted);\n  }\n\n  protected enter(event: Dropzone.Drag) {\n    event.preventDefault();\n\n    if (carriesFiles(event) && !this.disabled) this.depth++;\n  }\n\n  protected over(event: Dropzone.Drag) {\n    event.preventDefault();\n\n    if (event.dataTransfer) event.dataTransfer.dropEffect = this.disabled ? 'none' : 'copy';\n  }\n\n  protected leave(event: Dropzone.Drag) {\n    event.preventDefault();\n    this.depth = Math.max(0, this.depth - 1);\n  }\n\n  protected drop(event: Dropzone.Drag) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.depth = 0;\n    this.receive(Array.from(event.dataTransfer?.files || []));\n  }\n\n  render(): Component.Node {\n    const { rejected } = this;\n\n    return (\n      <this.Root>\n        <this.Input />\n        <this.Prompt />\n        {rejected.length > 0 && <this.Message />}\n      </this.Root>\n    );\n  }\n}\n\nconst hidden = {\n  position: 'absolute',\n  width: '1px',\n  height: '1px',\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  whiteSpace: 'nowrap'\n} as const;\n\nconst Input = (): Component.Node => <input {...Dropzone.get().inputProps} style={hidden} />;\n\nfunction carriesFiles(event: Pick<DragEvent, 'dataTransfer'>) {\n  return !!event.dataTransfer && Array.from(event.dataTransfer.types).includes('Files');\n}\n\nfunction matches(file: File, accept?: string) {\n  const patterns = (accept || '')\n    .split(',')\n    .map((pattern) => pattern.trim().toLowerCase())\n    .filter(Boolean);\n\n  if (!patterns.length) return true;\n\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n\n  return patterns.some((pattern) =>\n    pattern.startsWith('.') ? name.endsWith(pattern) : pattern.endsWith('/*') ? type.startsWith(pattern.slice(0, -1)) : type == pattern\n  );\n}\n\nexport { Dropzone, Input };\n"],"mappings":"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"}