@expressive/ui 0.0.0-stage → 0.1.0

package/dist/dropzone/dropzone.d.ts

@@ -0,0 +1,38 @@
+import { Dropzone as Dropzone$1 } from "./base.js";
+import { Component } from "@expressive/mvc";
+
+//#region src/dropzone/dropzone.d.ts
+declare namespace Dropzone {
+  type Drag = Dropzone$1.Drag;
+}
+/**
+ * Drop target for files, with a click-to-browse fallback.
+ *
+ * Files not matching `accept` - extensions (`.pdf`), MIME types (`image/png`) or wildcards (`image/*`) - go to
+ * `onReject` and are counted in a message; browsers enforce `accept` only in the picker, not on drops. Without
+ * `multiple`, a drop of several files is rejected whole. While mounted, files dropped beside it do not navigate
+ * the page away. Pieces - `Root`, `Prompt`, `Message` - are function components reading `Dropzone.get()`, each
+ * styled on its own; pass one as a prop or assign it in a subclass to replace it. Stock pieces are statics.
+ *
+ * @example
+ * <Dropzone accept="image/*" hint="PNG or JPG, up to 5MB" onDrop={(files) => this.upload(files)} />
+ */
+declare class Dropzone extends Dropzone$1 {
+  static Root: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Prompt: () => Component.Node;
+  static Message: () => Component.Node;
+  Root: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Prompt: () => Component.Node;
+  Message: () => Component.Node;
+}
+//#endregion
+export { Dropzone };
+//# sourceMappingURL=dropzone.d.ts.map

package/dist/dropzone/dropzone.js

@@ -0,0 +1,92 @@
+import { Dropzone as Dropzone$1 } from "./base.js";
+import { Upload } from "../icons/upload.js";
+import { style } from "@expressive/dom";
+import { jsx, jsxs } from "@expressive/dom/jsx-runtime";
+
+//#region src/dropzone/dropzone.tsx
+const Root = ({ children }) => /* @__PURE__ */ jsx("div", {
+	...Dropzone$1.get().rootProps,
+	children
+});
+style(Root, {
+	display: "flex",
+	flexDirection: "column",
+	gap: "8px"
+});
+const Prompt = () => {
+	const { label, hint, promptProps } = Dropzone$1.get();
+	const { active, props } = promptProps;
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		_active: active,
+		children: [
+			/* @__PURE__ */ jsx(Upload, {}),
+			/* @__PURE__ */ jsx("span", { children: label }),
+			hint && /* @__PURE__ */ jsx("small", { children: hint })
+		]
+	});
+};
+style(Prompt, {
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center",
+	gap: "6px",
+	width: "100%",
+	padding: "28px 20px",
+	border: "1px dashed var(--ui-line, #ccc)",
+	borderRadius: "8px",
+	background: "var(--ui-surface, #fff)",
+	color: "var(--ui-muted, #999)",
+	font: "inherit",
+	cursor: "pointer",
+	transition: "border-color 100ms, background 100ms, color 100ms",
+	":hover": { borderColor: "var(--ui-accent, #2684ff)" },
+	":focus-visible": {
+		outline: "2px solid var(--ui-accent, #2684ff)",
+		outlineOffset: "2px"
+	},
+	":disabled": {
+		opacity: "0.5",
+		cursor: "not-allowed"
+	},
+	_span: { color: "var(--ui-text, inherit)" },
+	_small: { fontSize: "12px" },
+	_active: {
+		borderColor: "var(--ui-accent, #2684ff)",
+		background: "var(--ui-highlight, #deebff)",
+		color: "var(--ui-accent, #2684ff)"
+	}
+});
+const Message = () => /* @__PURE__ */ jsx("p", {
+	role: "alert",
+	children: Dropzone$1.get().message
+});
+style(Message, {
+	margin: "0",
+	color: "var(--ui-danger, #e5484d)",
+	fontSize: "13px"
+});
+/**
+* Drop target for files, with a click-to-browse fallback.
+*
+* Files not matching `accept` - extensions (`.pdf`), MIME types (`image/png`) or wildcards (`image/*`) - go to
+* `onReject` and are counted in a message; browsers enforce `accept` only in the picker, not on drops. Without
+* `multiple`, a drop of several files is rejected whole. While mounted, files dropped beside it do not navigate
+* the page away. Pieces - `Root`, `Prompt`, `Message` - are function components reading `Dropzone.get()`, each
+* styled on its own; pass one as a prop or assign it in a subclass to replace it. Stock pieces are statics.
+*
+* @example
+* <Dropzone accept="image/*" hint="PNG or JPG, up to 5MB" onDrop={(files) => this.upload(files)} />
+*/
+var Dropzone = class extends Dropzone$1 {
+	static Root = Root;
+	static Prompt = Prompt;
+	static Message = Message;
+	Root = Root;
+	Prompt = Prompt;
+	Message = Message;
+};
+
+//#endregion
+export { Dropzone };
+//# sourceMappingURL=dropzone.js.map

package/dist/dropzone/dropzone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropzone.js","names":["Base.Dropzone"],"sources":["../../src/dropzone/dropzone.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport { Upload } from '../icons';\nimport * as Base from './base';\n\ndeclare namespace Dropzone {\n  type Drag = Base.Dropzone.Drag;\n}\n\nconst Root = ({ children }: { children: Component.Node }): Component.Node => (\n  <div {...Base.Dropzone.get().rootProps}>{children}</div>\n);\n\nstyle(Root, {\n  display: 'flex',\n  flexDirection: 'column',\n  gap: '8px'\n});\n\nconst Prompt = (): Component.Node => {\n  const { label, hint, promptProps } = Base.Dropzone.get();\n  const { active, props } = promptProps;\n\n  return (\n    <button {...props} _active={active}>\n      <Upload />\n      <span>{label}</span>\n      {hint && <small>{hint}</small>}\n    </button>\n  );\n};\n\nstyle(Prompt, {\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'center',\n  gap: '6px',\n  width: '100%',\n  padding: '28px 20px',\n  border: '1px dashed var(--ui-line, #ccc)',\n  borderRadius: '8px',\n  background: 'var(--ui-surface, #fff)',\n  color: 'var(--ui-muted, #999)',\n  font: 'inherit',\n  cursor: 'pointer',\n  transition: 'border-color 100ms, background 100ms, color 100ms',\n  ':hover': {\n    borderColor: 'var(--ui-accent, #2684ff)'\n  },\n  ':focus-visible': {\n    outline: '2px solid var(--ui-accent, #2684ff)',\n    outlineOffset: '2px'\n  },\n  ':disabled': {\n    opacity: '0.5',\n    cursor: 'not-allowed'\n  },\n  _span: {\n    color: 'var(--ui-text, inherit)'\n  },\n  _small: {\n    fontSize: '12px'\n  },\n  _active: {\n    borderColor: 'var(--ui-accent, #2684ff)',\n    background: 'var(--ui-highlight, #deebff)',\n    color: 'var(--ui-accent, #2684ff)'\n  }\n});\n\nconst Message = (): Component.Node => <p role=\"alert\">{Base.Dropzone.get().message}</p>;\n\nstyle(Message, {\n  margin: '0',\n  color: 'var(--ui-danger, #e5484d)',\n  fontSize: '13px'\n});\n\n/**\n * Drop target for files, with a click-to-browse fallback.\n *\n * Files not matching `accept` - extensions (`.pdf`), MIME types (`image/png`) or wildcards (`image/*`) - go to\n * `onReject` and are counted in a message; browsers enforce `accept` only in the picker, not on drops. Without\n * `multiple`, a drop of several files is rejected whole. While mounted, files dropped beside it do not navigate\n * the page away. Pieces - `Root`, `Prompt`, `Message` - are function components reading `Dropzone.get()`, each\n * styled on its own; pass one as a prop or assign it in a subclass to replace it. Stock pieces are statics.\n *\n * @example\n * <Dropzone accept=\"image/*\" hint=\"PNG or JPG, up to 5MB\" onDrop={(files) => this.upload(files)} />\n */\nclass Dropzone extends Base.Dropzone {\n  static Root = Root;\n  static Prompt = Prompt;\n  static Message = Message;\n\n  Root = Root;\n  Prompt = Prompt;\n  Message = Message;\n}\n\nexport { Dropzone, Message, Prompt, Root };\n"],"mappings":";;;;;;AAWA,MAAM,QAAQ,EAAE,eACd,oBAAC;CAAI,cAAkB,KAAK,CAAC;CAAY;EAAe;AAG1D,MAAM,MAAM;CACV,SAAS;CACT,eAAe;CACf,KAAK;CACN,CAAC;AAEF,MAAM,eAA+B;CACnC,MAAM,EAAE,OAAO,MAAM,2BAA8B,KAAK;CACxD,MAAM,EAAE,QAAQ,UAAU;AAE1B,QACE,qBAAC;EAAO,GAAI;EAAO,SAAS;;GAC1B,oBAAC,WAAS;GACV,oBAAC,oBAAM,QAAa;GACnB,QAAQ,oBAAC,qBAAO,OAAa;;GACvB;;AAIb,MAAM,QAAQ;CACZ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;CACP,SAAS;CACT,QAAQ;CACR,cAAc;CACd,YAAY;CACZ,OAAO;CACP,MAAM;CACN,QAAQ;CACR,YAAY;CACZ,UAAU,EACR,aAAa,6BACd;CACD,kBAAkB;EAChB,SAAS;EACT,eAAe;EAChB;CACD,aAAa;EACX,SAAS;EACT,QAAQ;EACT;CACD,OAAO,EACL,OAAO,2BACR;CACD,QAAQ,EACN,UAAU,QACX;CACD,SAAS;EACP,aAAa;EACb,YAAY;EACZ,OAAO;EACR;CACF,CAAC;AAEF,MAAM,gBAAgC,oBAAC;CAAE,MAAK;sBAAuB,KAAK,CAAC;EAAY;AAEvF,MAAM,SAAS;CACb,QAAQ;CACR,OAAO;CACP,UAAU;CACX,CAAC;;;;;;;;;;;;;AAcF,IAAM,WAAN,cAAuBA,WAAc;CACnC,OAAO,OAAO;CACd,OAAO,SAAS;CAChB,OAAO,UAAU;CAEjB,OAAO;CACP,SAAS;CACT,UAAU"}

package/dist/form/base.d.ts

@@ -0,0 +1,157 @@
+import { Button } from "../button/base.js";
+import { Component, Model } from "@expressive/mvc";
+
+//#region src/form/base.d.ts
+declare namespace Form {
+  /** The fields a subclass declares. */
+  type Values<T extends Form> = { [K in Exclude<keyof T, keyof Form>]: T[K] };
+  /** `false` or a message fails; anything else passes. */
+  type Check = boolean | string | void | undefined;
+  type Wrap = (props: {
+    children?: Component.Node;
+  }) => Component.Node;
+  type Fail = (props: {
+    error: Error;
+  }) => Component.Node;
+}
+declare namespace Field {
+  type Wrap = (props: {
+    children?: Component.Node;
+  }) => Component.Node;
+  type Part = () => Component.Node;
+}
+/**
+ * Form behavior without a look: values from declared fields, validation, submit and ARIA, assembled from pieces.
+ *
+ * `Root` and `Failure` are placeholders that throw when rendered - a skin assigns them. `Root` spreads `formProps`
+ * onto a `<form>`; `Failure` shows its `error` as an alert.
+ */
+declare class Form extends Component {
+  onSubmit?: (values: any) => unknown;
+  pending: boolean;
+  error?: Error;
+  Root: Form.Wrap;
+  Failure: Form.Fail;
+  constructor(...args: Model.Args);
+  get formProps(): {
+    readonly noValidate: true;
+    readonly 'aria-busy': boolean;
+    readonly onSubmit: (event?: {
+      preventDefault(): void;
+    }) => Promise<void>;
+  };
+  /** Current values, keyed by field. */
+  values(): Form.Values<this>;
+  /** Values that differ from the last successful submit, or from the start; `undefined` when none. */
+  changed(): Partial<Form.Values<this>> | undefined;
+  /** Restore values from the last successful submit and clear messages. */
+  reset(): void;
+  /** Check every field; resolves the ones that fail. */
+  invalid(): Promise<Field[]>;
+  /** Handle valid values; defaults to `onSubmit`. */
+  submit(values: Form.Values<this>): unknown;
+  /** Bring a field that failed into view on submit. Defaults to focusing the element with its `id`. */
+  protected reveal(field: Field): void;
+  send(event?: {
+    preventDefault(): void;
+  }): Promise<void>;
+  render(props: {
+    children?: Component.Node;
+  }): Component.Node;
+}
+/**
+ * Field behavior without a look: binding to the enclosing `Form`'s field `name`, checks and ARIA, assembled from
+ * pieces.
+ *
+ * Every piece is a placeholder that throws when rendered - a skin assigns each one. Pieces spread the matching
+ * `*Props` getter onto their element to stay accessible.
+ */
+declare class Field<T = any> extends Component {
+  name: string;
+  /** Defaults to `name`, split into words. */
+  label?: string;
+  type: string;
+  multiline: boolean;
+  placeholder?: string;
+  hint?: string;
+  optional: boolean;
+  disabled: boolean;
+  validate?: (value: T, form: Form) => Form.Check | Promise<Form.Check>;
+  /** Shown while the field fails a check. */
+  message?: string;
+  /** The input's id, for a `<label htmlFor>`. */
+  id: string;
+  form: Form;
+  Root: Field.Wrap;
+  Label: Field.Part;
+  Control: Field.Part;
+  Message: Field.Part;
+  constructor(...args: Model.Args);
+  get value(): T;
+  /** For the label element, with its `text`. */
+  get labelProps(): {
+    text: string;
+    props: {
+      htmlFor: string;
+    };
+  };
+  /**
+   * For the control: a textarea when `multiline`, else an input of `type`. A number field writes numbers.
+   *
+   * `failed` is for styling.
+   */
+  get controlProps(): {
+    failed: boolean;
+    props: {
+      type: string;
+      checked: boolean;
+      onChange: (event: Event) => void;
+      id: string;
+      name: string;
+      disabled: boolean;
+      'aria-required': boolean;
+      'aria-invalid': boolean;
+      'aria-describedby': string | undefined;
+    };
+  } | {
+    failed: boolean;
+    props: {
+      type: string | undefined;
+      placeholder: string | undefined;
+      value: string;
+      onInput: (event: Event) => void;
+      id: string;
+      name: string;
+      disabled: boolean;
+      'aria-required': boolean;
+      'aria-invalid': boolean;
+      'aria-describedby': string | undefined;
+    };
+  };
+  /** For the message element, with its `text` and `failed` for styling. */
+  get messageProps(): {
+    text: string | undefined;
+    failed: boolean;
+    props: {
+      id: string;
+    };
+  };
+  /** Write a value to the form, rechecking if this field has failed. */
+  update(value: T): void;
+  /** Run the required check and `validate`; resolves whether the field passes. */
+  check(): Promise<boolean>;
+  render(): Component.Node;
+}
+/**
+ * Submit button for the enclosing `Form`; shows pending while it submits.
+ *
+ * Its pieces are `Button`'s.
+ */
+declare class Submit extends Button {
+  type: "submit";
+  form: Form;
+  constructor(...args: Model.Args);
+}
+//#endregion
+export { Field, Form, Submit };
+//# sourceMappingURL=base.d.ts.map

package/dist/form/base.js

@@ -0,0 +1,243 @@
+import { missing } from "../piece.js";
+import { Button } from "../button/base.js";
+import { Component, get } from "@expressive/mvc";
+import { jsx, jsxs } from "@expressive/mvc/jsx-runtime";
+
+//#region src/form/base.tsx
+const BASE = /* @__PURE__ */ new WeakMap();
+const FIELDS = /* @__PURE__ */ new WeakMap();
+const SAVED = /* @__PURE__ */ new WeakMap();
+let ID = 0;
+/**
+* Form behavior without a look: values from declared fields, validation, submit and ARIA, assembled from pieces.
+*
+* `Root` and `Failure` are placeholders that throw when rendered - a skin assigns them. `Root` spreads `formProps`
+* onto a `<form>`; `Failure` shows its `error` as an alert.
+*/
+var Form = class extends Component {
+	onSubmit = void 0;
+	pending = false;
+	error = void 0;
+	Root = missing("Form.Root");
+	Failure = missing("Form.Failure");
+	constructor(...args) {
+		super(...args, () => {
+			SAVED.set(this, this.values());
+		});
+		BASE.set(this, new Set(Object.keys(this)));
+	}
+	get formProps() {
+		return {
+			noValidate: true,
+			"aria-busy": this.pending,
+			onSubmit: this.send
+		};
+	}
+	/** Current values, keyed by field. */
+	values() {
+		const base = BASE.get(this);
+		const values = {};
+		for (const key of Object.keys(this)) if (!base.has(key) && !computed(this, key)) values[key] = this[key];
+		return values;
+	}
+	/** Values that differ from the last successful submit, or from the start; `undefined` when none. */
+	changed() {
+		const saved = SAVED.get(this);
+		const values = this.values();
+		const changed = {};
+		for (const key in values) if (values[key] !== saved[key]) changed[key] = values[key];
+		return Object.keys(changed).length ? changed : void 0;
+	}
+	/** Restore values from the last successful submit and clear messages. */
+	reset() {
+		Object.assign(this, SAVED.get(this));
+		this.error = void 0;
+		for (const field of FIELDS.get(this) || []) field.message = void 0;
+	}
+	/** Check every field; resolves the ones that fail. */
+	async invalid() {
+		const fields = [...FIELDS.get(this) || []];
+		const passed = await Promise.all(fields.map((field) => field.check()));
+		return fields.filter((_, index) => !passed[index]);
+	}
+	/** Handle valid values; defaults to `onSubmit`. */
+	submit(values) {
+		return this.onSubmit && this.onSubmit(values);
+	}
+	/** Bring a field that failed into view on submit. Defaults to focusing the element with its `id`. */
+	reveal(field) {
+		document.getElementById(field.id)?.focus();
+	}
+	async send(event) {
+		if (event) event.preventDefault();
+		if (this.pending) return;
+		this.error = void 0;
+		const [first] = await this.invalid();
+		if (first) {
+			this.reveal(first);
+			return;
+		}
+		const values = this.values();
+		this.pending = true;
+		try {
+			await this.submit(values);
+			SAVED.set(this, values);
+		} catch (error) {
+			this.error = error instanceof Error ? error : new Error(String(error));
+		}
+		this.pending = false;
+	}
+	render(props) {
+		const { error } = this;
+		return /* @__PURE__ */ jsxs(this.Root, { children: [props.children, error && /* @__PURE__ */ jsx(this.Failure, { error })] });
+	}
+};
+/**
+* Field behavior without a look: binding to the enclosing `Form`'s field `name`, checks and ARIA, assembled from
+* pieces.
+*
+* Every piece is a placeholder that throws when rendered - a skin assigns each one. Pieces spread the matching
+* `*Props` getter onto their element to stay accessible.
+*/
+var Field = class extends Component {
+	name = "";
+	/** Defaults to `name`, split into words. */
+	label = void 0;
+	type = "text";
+	multiline = false;
+	placeholder = void 0;
+	hint = void 0;
+	optional = false;
+	disabled = false;
+	validate = void 0;
+	/** Shown while the field fails a check. */
+	message = void 0;
+	/** The input's id, for a `<label htmlFor>`. */
+	id = `field-${++ID}`;
+	form = get(Form);
+	Root = missing("Field.Root");
+	Label = missing("Field.Label");
+	Control = missing("Field.Control");
+	Message = missing("Field.Message");
+	constructor(...args) {
+		super(...args, () => {
+			this.get(({ form }) => {
+				const fields = FIELDS.get(form.is) || /* @__PURE__ */ new Set();
+				FIELDS.set(form.is, fields.add(this));
+				return () => fields.delete(this);
+			});
+		});
+	}
+	get value() {
+		return this.form[this.name];
+	}
+	/** For the label element, with its `text`. */
+	get labelProps() {
+		const { id, label, name } = this;
+		return {
+			text: label ?? words(name),
+			props: { htmlFor: id }
+		};
+	}
+	/**
+	* For the control: a textarea when `multiline`, else an input of `type`. A number field writes numbers.
+	*
+	* `failed` is for styling.
+	*/
+	get controlProps() {
+		const { id, name, type, multiline, placeholder, disabled, optional, message, hint, value } = this;
+		const common = {
+			id,
+			name,
+			disabled,
+			"aria-required": !optional,
+			"aria-invalid": !!message,
+			"aria-describedby": message || hint ? `${id}-message` : void 0
+		};
+		if (type == "checkbox") return {
+			failed: !!message,
+			props: {
+				...common,
+				type,
+				checked: !!value,
+				onChange: (event) => this.update(event.currentTarget.checked)
+			}
+		};
+		return {
+			failed: !!message,
+			props: {
+				...common,
+				type: multiline ? void 0 : type,
+				placeholder,
+				value: String(value ?? ""),
+				onInput: (event) => {
+					const input = event.currentTarget;
+					this.update(typeof value == "number" ? input.valueAsNumber : input.value);
+				}
+			}
+		};
+	}
+	/** For the message element, with its `text` and `failed` for styling. */
+	get messageProps() {
+		const { id, message, hint } = this;
+		return {
+			text: message || hint,
+			failed: !!message,
+			props: { id: `${id}-message` }
+		};
+	}
+	/** Write a value to the form, rechecking if this field has failed. */
+	update(value) {
+		this.form[this.name] = value;
+		if (this.message) this.check();
+	}
+	/** Run the required check and `validate`; resolves whether the field passes. */
+	async check() {
+		const { value, optional, validate, form } = this;
+		const empty = value === void 0 || value === null || value === "" || value === false;
+		let result = optional || !empty || "Required";
+		if (result === true && validate && !(optional && empty)) result = await validate(value, form);
+		this.message = result === false ? "Invalid" : typeof result == "string" ? result : void 0;
+		return !this.message;
+	}
+	render() {
+		const { message, hint, type } = this;
+		const check = type == "checkbox";
+		return /* @__PURE__ */ jsxs(this.Root, { children: [
+			!check && /* @__PURE__ */ jsx(this.Label, {}),
+			/* @__PURE__ */ jsx(this.Control, {}),
+			check && /* @__PURE__ */ jsx(this.Label, {}),
+			(message || hint) && /* @__PURE__ */ jsx(this.Message, {})
+		] });
+	}
+};
+/**
+* Submit button for the enclosing `Form`; shows pending while it submits.
+*
+* Its pieces are `Button`'s.
+*/
+var Submit = class extends Button {
+	type = "submit";
+	form = get(Form);
+	constructor(...args) {
+		super(...args, () => {
+			this.get(({ form }) => {
+				this.pending = form.pending;
+			});
+		});
+	}
+};
+function words(name) {
+	return name.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (first) => first.toUpperCase());
+}
+function computed(target, key) {
+	for (let proto = Object.getPrototypeOf(target); proto; proto = Object.getPrototypeOf(proto)) {
+		const descriptor = Object.getOwnPropertyDescriptor(proto, key);
+		if (descriptor) return !!descriptor.get;
+	}
+	return false;
+}
+
+//#endregion
+export { Field, Form, Submit };
+//# sourceMappingURL=base.js.map

package/dist/form/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/form/base.tsx"],"sourcesContent":["import { Component, get, type Model } from '@expressive/mvc';\n\nimport { Button } from '../button/base';\nimport { missing } from '../piece';\n\ndeclare namespace Form {\n  /** The fields a subclass declares. */\n  type Values<T extends Form> = { [K in Exclude<keyof T, keyof Form>]: T[K] };\n\n  /** `false` or a message fails; anything else passes. */\n  type Check = boolean | string | void | undefined;\n\n  type Wrap = (props: { children?: Component.Node }) => Component.Node;\n  type Fail = (props: { error: Error }) => Component.Node;\n}\n\ndeclare namespace Field {\n  type Wrap = (props: { children?: Component.Node }) => Component.Node;\n  type Part = () => Component.Node;\n}\n\nconst BASE = new WeakMap<Form, Set<string>>();\n\nconst FIELDS = new WeakMap<Form, Set<Field>>();\n\nconst SAVED = new WeakMap<Form, Record<string, unknown>>();\n\nlet ID = 0;\n\n/**\n * Form behavior without a look: values from declared fields, validation, submit and ARIA, assembled from pieces.\n *\n * `Root` and `Failure` are placeholders that throw when rendered - a skin assigns them. `Root` spreads `formProps`\n * onto a `<form>`; `Failure` shows its `error` as an alert.\n */\nclass Form extends Component {\n  onSubmit?: (values: any) => unknown = undefined;\n\n  pending = false;\n  error?: Error = undefined;\n\n  Root: Form.Wrap = missing('Form.Root');\n  Failure: Form.Fail = missing('Form.Failure');\n\n  constructor(...args: Model.Args) {\n    super(...args, () => {\n      SAVED.set(this, this.values());\n    });\n\n    BASE.set(this, new Set(Object.keys(this)));\n  }\n\n  get formProps() {\n    return { noValidate: true, 'aria-busy': this.pending, onSubmit: this.send } as const;\n  }\n\n  /** Current values, keyed by field. */\n  values(): Form.Values<this> {\n    const base = BASE.get(this)!;\n    const values: Record<string, unknown> = {};\n\n    for (const key of Object.keys(this)) if (!base.has(key) && !computed(this, key)) values[key] = (this as any)[key];\n\n    return values as Form.Values<this>;\n  }\n\n  /** Values that differ from the last successful submit, or from the start; `undefined` when none. */\n  changed(): Partial<Form.Values<this>> | undefined {\n    const saved = SAVED.get(this)!;\n    const values = this.values() as Record<string, unknown>;\n    const changed: Record<string, unknown> = {};\n\n    for (const key in values) if (values[key] !== saved[key]) changed[key] = values[key];\n\n    return Object.keys(changed).length ? (changed as Partial<Form.Values<this>>) : undefined;\n  }\n\n  /** Restore values from the last successful submit and clear messages. */\n  reset() {\n    Object.assign(this, SAVED.get(this));\n    this.error = undefined;\n\n    for (const field of FIELDS.get(this) || []) field.message = undefined;\n  }\n\n  /** Check every field; resolves the ones that fail. */\n  async invalid(): Promise<Field[]> {\n    const fields = [...(FIELDS.get(this) || [])];\n    const passed = await Promise.all(fields.map((field) => field.check()));\n\n    return fields.filter((_, index) => !passed[index]);\n  }\n\n  /** Handle valid values; defaults to `onSubmit`. */\n  submit(values: Form.Values<this>): unknown {\n    return this.onSubmit && this.onSubmit(values);\n  }\n\n  /** Bring a field that failed into view on submit. Defaults to focusing the element with its `id`. */\n  protected reveal(field: Field) {\n    document.getElementById(field.id)?.focus();\n  }\n\n  async send(event?: { preventDefault(): void }) {\n    if (event) event.preventDefault();\n    if (this.pending) return;\n\n    this.error = undefined;\n\n    const [first] = await this.invalid();\n\n    if (first) {\n      this.reveal(first);\n      return;\n    }\n\n    const values = this.values();\n\n    this.pending = true;\n\n    try {\n      await this.submit(values);\n      SAVED.set(this, values);\n    } catch (error) {\n      this.error = error instanceof Error ? error : new Error(String(error));\n    }\n\n    this.pending = false;\n  }\n\n  render(props: { children?: Component.Node }): Component.Node {\n    const { error } = this;\n\n    return (\n      <this.Root>\n        {props.children}\n        {error && <this.Failure error={error} />}\n      </this.Root>\n    );\n  }\n}\n\n/**\n * Field behavior without a look: binding to the enclosing `Form`'s field `name`, checks and ARIA, assembled from\n * pieces.\n *\n * Every piece is a placeholder that throws when rendered - a skin assigns each one. Pieces spread the matching\n * `*Props` getter onto their element to stay accessible.\n */\nclass Field<T = any> extends Component {\n  name = '';\n\n  /** Defaults to `name`, split into words. */\n  label?: string = undefined;\n\n  type = 'text';\n  multiline = false;\n  placeholder?: string = undefined;\n  hint?: string = undefined;\n  optional = false;\n  disabled = false;\n\n  validate?: (value: T, form: Form) => Form.Check | Promise<Form.Check> = undefined;\n\n  /** Shown while the field fails a check. */\n  message?: string = undefined;\n\n  /** The input's id, for a `<label htmlFor>`. */\n  id = `field-${++ID}`;\n\n  form = get(Form);\n\n  Root: Field.Wrap = missing('Field.Root');\n  Label: Field.Part = missing('Field.Label');\n  Control: Field.Part = missing('Field.Control');\n  Message: Field.Part = missing('Field.Message');\n\n  constructor(...args: Model.Args) {\n    super(...args, () => {\n      this.get(({ form }) => {\n        const fields = FIELDS.get(form.is) || new Set();\n\n        FIELDS.set(form.is, fields.add(this));\n\n        return () => fields.delete(this);\n      });\n    });\n  }\n\n  get value(): T {\n    return (this.form as any)[this.name];\n  }\n\n  /** For the label element, with its `text`. */\n  get labelProps() {\n    const { id, label, name } = this;\n\n    return { text: label ?? words(name), props: { htmlFor: id } };\n  }\n\n  /**\n   * For the control: a textarea when `multiline`, else an input of `type`. A number field writes numbers.\n   *\n   * `failed` is for styling.\n   */\n  get controlProps() {\n    const { id, name, type, multiline, placeholder, disabled, optional, message, hint, value } = this;\n    const common = {\n      id,\n      name,\n      disabled,\n      'aria-required': !optional,\n      'aria-invalid': !!message,\n      'aria-describedby': message || hint ? `${id}-message` : undefined\n    };\n\n    if (type == 'checkbox')\n      return {\n        failed: !!message,\n        props: {\n          ...common,\n          type,\n          checked: !!value,\n          onChange: (event: Event) => this.update((event.currentTarget as HTMLInputElement).checked as T)\n        }\n      };\n\n    return {\n      failed: !!message,\n      props: {\n        ...common,\n        type: multiline ? undefined : type,\n        placeholder,\n        value: String(value ?? ''),\n        onInput: (event: Event) => {\n          const input = event.currentTarget as HTMLInputElement;\n\n          this.update((typeof value == 'number' ? input.valueAsNumber : input.value) as T);\n        }\n      }\n    };\n  }\n\n  /** For the message element, with its `text` and `failed` for styling. */\n  get messageProps() {\n    const { id, message, hint } = this;\n\n    return { text: message || hint, failed: !!message, props: { id: `${id}-message` } };\n  }\n\n  /** Write a value to the form, rechecking if this field has failed. */\n  update(value: T) {\n    (this.form as any)[this.name] = value;\n\n    if (this.message) this.check();\n  }\n\n  /** Run the required check and `validate`; resolves whether the field passes. */\n  async check(): Promise<boolean> {\n    const { value, optional, validate, form } = this;\n    const empty = value === undefined || value === null || value === '' || value === (false as T);\n    let result: Form.Check = optional || !empty || 'Required';\n\n    if (result === true && validate && !(optional && empty)) result = await validate(value, form);\n\n    this.message = result === false ? 'Invalid' : typeof result == 'string' ? result : undefined;\n\n    return !this.message;\n  }\n\n  render(): Component.Node {\n    const { message, hint, type } = this;\n    const check = type == 'checkbox';\n\n    return (\n      <this.Root>\n        {!check && <this.Label />}\n        <this.Control />\n        {check && <this.Label />}\n        {(message || hint) && <this.Message />}\n      </this.Root>\n    );\n  }\n}\n\n/**\n * Submit button for the enclosing `Form`; shows pending while it submits.\n *\n * Its pieces are `Button`'s.\n */\nclass Submit extends Button {\n  type = 'submit' as const;\n\n  form = get(Form);\n\n  constructor(...args: Model.Args) {\n    super(...args, () => {\n      this.get(({ form }) => {\n        this.pending = form.pending;\n      });\n    });\n  }\n}\n\nfunction words(name: string) {\n  return name.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/^./, (first) => first.toUpperCase());\n}\n\nfunction computed(target: object, key: string) {\n  for (let proto = Object.getPrototypeOf(target); proto; proto = Object.getPrototypeOf(proto)) {\n    const descriptor = Object.getOwnPropertyDescriptor(proto, key);\n\n    if (descriptor) return !!descriptor.get;\n  }\n\n  return false;\n}\n\nexport { Field, Form, Submit };\n"],"mappings":"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"}