@expressive/ui 0.0.0-stage → 0.1.0

package/dist/layout/base.js

@@ -0,0 +1,158 @@
+import { missing } from "../piece.js";
+import { Component, get } from "@expressive/mvc";
+import { Fragment, childrenOf, jsx, jsxs, propsOf, typeOf } from "@expressive/mvc/jsx-runtime";
+
+//#region src/layout/base.tsx
+/**
+* Resizable panes without a look: weights, pointer and keyboard resizing and ARIA, assembled from pieces.
+*
+* `Root` wraps the panes and spreads `rootProps`, styled by `arrange`. `Handle` sits between neighbors and spreads
+* `handleProps(index)`. Both are placeholders that throw when rendered, and `arrange` throws when called - a skin
+* supplies all three.
+*/
+var Layout = class Layout extends Component {
+	/** `row` puts panes side by side. Defaults to across the parent `Layout`, else `row`. */
+	direction = void 0;
+	/** Initial weights per pane; read until the first resize, or when the pane count changes. */
+	sizes = void 0;
+	/** Handle thickness in pixels. */
+	gap = 8;
+	/** Smallest a pane can be dragged, in pixels. */
+	min = 40;
+	/** Weights after a resize. */
+	weights = [];
+	/** Index of the handle being dragged. */
+	dragging = void 0;
+	Root = missing("Layout.Root");
+	Handle = missing("Layout.Handle");
+	parent = get(Layout, false);
+	constructor(...args) {
+		super(...args, () => () => DRAG.get(this)?.());
+	}
+	/** Panes in the last render. */
+	panes = 0;
+	get row() {
+		const { direction, parent } = this;
+		return direction ? direction == "row" : parent ? !parent.row : true;
+	}
+	/** For the element holding the panes: its ref, and the style `arrange` gives current weights. */
+	get rootProps() {
+		const { row, gap, weights, sizes, panes } = this;
+		return {
+			ref: this.bind,
+			style: this.arrange(initial(panes, weights, sizes), row, gap)
+		};
+	}
+	/** For the separator after pane `index`: role, orientation, position as a percentage, focus and resize handlers. */
+	get handleProps() {
+		const { row, panes, weights, sizes } = this;
+		const current = initial(panes, weights, sizes);
+		const total = current.reduce((sum, weight) => sum + weight, 0);
+		return (index) => ({
+			role: "separator",
+			"aria-orientation": row ? "vertical" : "horizontal",
+			"aria-label": "Resize",
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": Math.round(current.slice(0, index + 1).reduce((sum, weight) => sum + weight, 0) / total * 100),
+			tabIndex: 0,
+			onPointerDown: (event) => this.grab(index, event),
+			onKeyDown: (event) => this.nudge(index, event)
+		});
+	}
+	/** Style for the root laying panes out by `weights` along the axis, `gap` pixels apart. A skin supplies it. */
+	arrange(weights, row, gap) {
+		throw new Error("Layout.arrange has no default - a skin supplies one.");
+	}
+	/** Length of the root along the axis, in pixels. Defaults to the DOM's layout. */
+	measure() {
+		const rect = MOUNT.get(this).getBoundingClientRect();
+		return this.row ? rect.width : rect.height;
+	}
+	/**
+	* Report pointer moves to `move` until release or cancel, then call `end`; returns a stop for unmount mid-drag.
+	* Defaults to `document`.
+	*/
+	follow(move, end) {
+		const stop = () => {
+			document.removeEventListener("pointermove", move);
+			document.removeEventListener("pointerup", up);
+			document.removeEventListener("pointercancel", up);
+		};
+		const up = () => {
+			stop();
+			end();
+		};
+		document.addEventListener("pointermove", move);
+		document.addEventListener("pointerup", up);
+		document.addEventListener("pointercancel", up);
+		return stop;
+	}
+	/** Move the handle after pane `index` by `delta` pixels. */
+	resize(index, delta) {
+		const pixels = this.pixels();
+		const pair = pixels[index] + pixels[index + 1];
+		const before = Math.min(Math.max(pixels[index] + delta, this.min), pair - this.min);
+		pixels[index] = before;
+		pixels[index + 1] = pair - before;
+		this.weights = pixels;
+	}
+	pixels() {
+		const weights = initial(this.panes, this.weights, this.sizes);
+		const space = this.measure() - this.gap * (weights.length - 1);
+		const total = weights.reduce((sum, weight) => sum + weight, 0);
+		return weights.map((weight) => weight * space / total);
+	}
+	bind(element) {
+		if (element) MOUNT.set(this, element);
+	}
+	/** Start dragging the handle after pane `index`, from pointer down. */
+	grab(index, event) {
+		if (event.button !== 0) return;
+		event.preventDefault();
+		let last = this.row ? event.clientX : event.clientY;
+		this.dragging = index;
+		DRAG.set(this, this.follow((event) => {
+			const at = this.row ? event.clientX : event.clientY;
+			if (at != last) this.resize(index, at - last);
+			last = at;
+		}, () => {
+			this.dragging = void 0;
+			DRAG.delete(this);
+		}));
+	}
+	/** Move the handle after pane `index` by 10px per arrow key along the axis. */
+	nudge(index, event) {
+		const back = this.row ? "ArrowLeft" : "ArrowUp";
+		const forward = this.row ? "ArrowRight" : "ArrowDown";
+		if (event.key != back && event.key != forward) return;
+		event.preventDefault();
+		this.resize(index, event.key == back ? -10 : 10);
+	}
+	render(props) {
+		const { dragging } = this;
+		const panes = flatten(props.children);
+		this.panes = panes.length;
+		return /* @__PURE__ */ jsx(this.Root, { children: panes.map((pane, index) => jsxs(Fragment, { children: [index > 0 && /* @__PURE__ */ jsx(this.Handle, {
+			index: index - 1,
+			active: dragging === index - 1
+		}), pane] }, index)) });
+	}
+};
+function initial(count, weights, sizes) {
+	if (weights.length == count) return weights.slice();
+	if (sizes && sizes.length == count) return sizes.slice();
+	return Array.from({ length: count }, () => 1);
+}
+const MOUNT = /* @__PURE__ */ new WeakMap();
+const DRAG = /* @__PURE__ */ new WeakMap();
+function flatten(children) {
+	const out = [];
+	for (const node of childrenOf(children)) if (typeOf(node) === Fragment) out.push(...flatten(propsOf(node).children));
+	else out.push(node);
+	return out;
+}
+
+//#endregion
+export { Layout };
+//# sourceMappingURL=base.js.map

package/dist/layout/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/layout/base.tsx"],"sourcesContent":["import { Component, get, type Model } from '@expressive/mvc';\nimport { Fragment, childrenOf, jsxs, propsOf, typeOf } from '@expressive/mvc/jsx-runtime';\n\nimport { missing } from '../piece';\n\ndeclare namespace Layout {\n  type Direction = 'row' | 'column';\n\n  interface HandleProps {\n    /** Index of the pane before this handle. */\n    index: number;\n    /** True while this handle is being dragged. */\n    active: boolean;\n  }\n\n  type Key = Pick<KeyboardEvent, 'key' | 'preventDefault'>;\n  type Point = Pick<PointerEvent, 'clientX' | 'clientY'>;\n  type Pointer = Point & Pick<PointerEvent, 'button' | 'preventDefault'>;\n  type Style = Record<string, string>;\n\n  type Root = (props: { children: Component.Node }) => Component.Node;\n  type Handle = (props: HandleProps) => Component.Node;\n}\n\n/**\n * Resizable panes without a look: weights, pointer and keyboard resizing and ARIA, assembled from pieces.\n *\n * `Root` wraps the panes and spreads `rootProps`, styled by `arrange`. `Handle` sits between neighbors and spreads\n * `handleProps(index)`. Both are placeholders that throw when rendered, and `arrange` throws when called - a skin\n * supplies all three.\n */\nclass Layout extends Component {\n  /** `row` puts panes side by side. Defaults to across the parent `Layout`, else `row`. */\n  direction?: Layout.Direction = undefined;\n\n  /** Initial weights per pane; read until the first resize, or when the pane count changes. */\n  sizes?: readonly number[] = undefined;\n\n  /** Handle thickness in pixels. */\n  gap = 8;\n\n  /** Smallest a pane can be dragged, in pixels. */\n  min = 40;\n\n  /** Weights after a resize. */\n  weights: number[] = [];\n\n  /** Index of the handle being dragged. */\n  dragging?: number = undefined;\n\n  Root: Layout.Root = missing('Layout.Root');\n  Handle: Layout.Handle = missing('Layout.Handle');\n\n  protected parent?: Layout = get(Layout, false);\n\n  constructor(...args: Model.Args) {\n    super(...args, () => () => DRAG.get(this)?.());\n  }\n\n  /** Panes in the last render. */\n  protected panes = 0;\n\n  get row(): boolean {\n    const { direction, parent } = this;\n\n    return direction ? direction == 'row' : parent ? !parent.row : true;\n  }\n\n  /** For the element holding the panes: its ref, and the style `arrange` gives current weights. */\n  get rootProps() {\n    const { row, gap, weights, sizes, panes } = this;\n\n    return { ref: this.bind, style: this.arrange(initial(panes, weights, sizes), row, gap) };\n  }\n\n  /** For the separator after pane `index`: role, orientation, position as a percentage, focus and resize handlers. */\n  get handleProps() {\n    const { row, panes, weights, sizes } = this;\n    const current = initial(panes, weights, sizes);\n    const total = current.reduce((sum, weight) => sum + weight, 0);\n\n    return (index: number) =>\n      ({\n        role: 'separator',\n        'aria-orientation': row ? 'vertical' : 'horizontal',\n        'aria-label': 'Resize',\n        'aria-valuemin': 0,\n        'aria-valuemax': 100,\n        'aria-valuenow': Math.round((current.slice(0, index + 1).reduce((sum, weight) => sum + weight, 0) / total) * 100),\n        tabIndex: 0,\n        onPointerDown: (event: Layout.Pointer) => this.grab(index, event),\n        onKeyDown: (event: Layout.Key) => this.nudge(index, event)\n      }) as const;\n  }\n\n  /** Style for the root laying panes out by `weights` along the axis, `gap` pixels apart. A skin supplies it. */\n  protected arrange(weights: number[], row: boolean, gap: number): Layout.Style {\n    throw new Error('Layout.arrange has no default - a skin supplies one.');\n  }\n\n  /** Length of the root along the axis, in pixels. Defaults to the DOM's layout. */\n  protected measure(): number {\n    const rect = MOUNT.get(this)!.getBoundingClientRect();\n\n    return this.row ? rect.width : rect.height;\n  }\n\n  /**\n   * Report pointer moves to `move` until release or cancel, then call `end`; returns a stop for unmount mid-drag.\n   * Defaults to `document`.\n   */\n  protected follow(move: (event: Layout.Point) => void, end: () => void): () => void {\n    const stop = () => {\n      document.removeEventListener('pointermove', move);\n      document.removeEventListener('pointerup', up);\n      document.removeEventListener('pointercancel', up);\n    };\n\n    const up = () => {\n      stop();\n      end();\n    };\n\n    document.addEventListener('pointermove', move);\n    document.addEventListener('pointerup', up);\n    document.addEventListener('pointercancel', up);\n\n    return stop;\n  }\n\n  /** Move the handle after pane `index` by `delta` pixels. */\n  resize(index: number, delta: number) {\n    const pixels = this.pixels();\n    const pair = pixels[index] + pixels[index + 1];\n    const before = Math.min(Math.max(pixels[index] + delta, this.min), pair - this.min);\n\n    pixels[index] = before;\n    pixels[index + 1] = pair - before;\n\n    this.weights = pixels;\n  }\n\n  private pixels() {\n    const weights = initial(this.panes, this.weights, this.sizes);\n    const space = this.measure() - this.gap * (weights.length - 1);\n    const total = weights.reduce((sum, weight) => sum + weight, 0);\n\n    return weights.map((weight) => (weight * space) / total);\n  }\n\n  private bind(element: HTMLElement | null) {\n    if (element) MOUNT.set(this, element);\n  }\n\n  /** Start dragging the handle after pane `index`, from pointer down. */\n  grab(index: number, event: Layout.Pointer) {\n    if (event.button !== 0) return;\n\n    event.preventDefault();\n\n    let last = this.row ? event.clientX : event.clientY;\n\n    this.dragging = index;\n    DRAG.set(this, this.follow(\n      (event) => {\n        const at = this.row ? event.clientX : event.clientY;\n\n        if (at != last) this.resize(index, at - last);\n\n        last = at;\n      },\n      () => {\n        this.dragging = undefined;\n        DRAG.delete(this);\n      }\n    ));\n  }\n\n  /** Move the handle after pane `index` by 10px per arrow key along the axis. */\n  nudge(index: number, event: Layout.Key) {\n    const back = this.row ? 'ArrowLeft' : 'ArrowUp';\n    const forward = this.row ? 'ArrowRight' : 'ArrowDown';\n\n    if (event.key != back && event.key != forward) return;\n\n    event.preventDefault();\n    this.resize(index, event.key == back ? -10 : 10);\n  }\n\n  render(props: { children?: Component.Node }): Component.Node {\n    const { dragging } = this;\n    const panes = flatten(props.children);\n\n    this.panes = panes.length;\n\n    return (\n      <this.Root>\n        {panes.map((pane, index) =>\n          jsxs(\n            Fragment,\n            {\n              children: [\n                index > 0 && <this.Handle index={index - 1} active={dragging === index - 1} />,\n                pane\n              ]\n            },\n            index\n          )\n        )}\n      </this.Root>\n    );\n  }\n}\n\nfunction initial(count: number, weights: readonly number[], sizes?: readonly number[]): number[] {\n  if (weights.length == count) return weights.slice();\n  if (sizes && sizes.length == count) return sizes.slice();\n\n  return Array.from({ length: count }, () => 1);\n}\n\nconst MOUNT = new WeakMap<Layout, HTMLElement>();\n\nconst DRAG = new WeakMap<Layout, () => void>();\n\nfunction flatten(children: Component.Node): Component.Node[] {\n  const out: Component.Node[] = [];\n\n  for (const node of childrenOf(children))\n    if (typeOf(node) === Fragment) out.push(...flatten((propsOf(node) as any).children));\n    else out.push(node);\n\n  return out;\n}\n\nexport { Layout };\n"],"mappings":"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"}

package/dist/layout/layout.d.ts

@@ -0,0 +1,53 @@
+import { Layout as Layout$1 } from "./base.js";
+import { Component } from "@expressive/mvc";
+
+//#region src/layout/layout.d.ts
+declare namespace Layout {
+  type Direction = Layout$1.Direction;
+  type HandleProps = Layout$1.HandleProps;
+}
+/**
+ * Resizable panes: each child is a pane, with a draggable handle between neighbors.
+ *
+ * Panes share space by weight - `sizes`, else equal - and keep at least `min` pixels. A nested `Layout` runs
+ * across its parent unless given a `direction`. Handles are focusable separators: arrow keys move them by 10px.
+ * Pieces - `Root`, `Handle` - are function components reading `Layout.get()`, each styled on its own; pass one as
+ * a prop or assign it in a subclass to replace it, spreading `rootProps` or `handleProps(index)`. Stock
+ * pieces are statics.
+ *
+ * @example
+ * <Layout sizes={[1, 3]}>
+ *   <nav>…</nav>
+ *   <Layout>
+ *     <main>…</main>
+ *     <footer>…</footer>
+ *   </Layout>
+ * </Layout>
+ */
+declare class Layout extends Layout$1 {
+  static Root: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  static Handle: ({
+    index,
+    active
+  }: Layout.HandleProps) => Component.Node;
+  Root: ({
+    children
+  }: {
+    children: Component.Node;
+  }) => Component.Node;
+  Handle: ({
+    index,
+    active
+  }: Layout.HandleProps) => Component.Node;
+  protected arrange(weights: number[], row: boolean, gap: number): {
+    [x: string]: string;
+    display: string;
+  };
+}
+//#endregion
+export { Layout };
+//# sourceMappingURL=layout.d.ts.map

package/dist/layout/layout.js

@@ -0,0 +1,80 @@
+import { Layout as Layout$1 } from "./base.js";
+import { style } from "@expressive/dom";
+import { jsx } from "@expressive/dom/jsx-runtime";
+
+//#region src/layout/layout.tsx
+const Root = ({ children }) => /* @__PURE__ */ jsx("div", {
+	...Layout$1.get().rootProps,
+	children
+});
+style(Root, {
+	minWidth: "0",
+	minHeight: "0",
+	height: "100%"
+});
+const Handle = ({ index, active }) => {
+	const { row, handleProps } = Layout$1.get();
+	return /* @__PURE__ */ jsx("div", {
+		...handleProps(index),
+		_row: row,
+		_active: active,
+		children: active && /* @__PURE__ */ jsx("div", { _mask: true })
+	});
+};
+style(Handle, {
+	position: "relative",
+	cursor: "row-resize",
+	outline: "0",
+	touchAction: "none",
+	_row: { cursor: "col-resize" },
+	"::after": {
+		content: "\"\"",
+		position: "absolute",
+		inset: "2px",
+		borderRadius: "4px",
+		transition: "background 100ms"
+	},
+	":hover::after": { background: "var(--ui-highlight, #deebff)" },
+	":focus-visible::after": { background: "var(--ui-accent, #2684ff)" },
+	_active: { "::after": { background: "var(--ui-accent, #2684ff)" } },
+	_mask: {
+		position: "fixed",
+		inset: "0",
+		zIndex: "1000"
+	}
+});
+/**
+* Resizable panes: each child is a pane, with a draggable handle between neighbors.
+*
+* Panes share space by weight - `sizes`, else equal - and keep at least `min` pixels. A nested `Layout` runs
+* across its parent unless given a `direction`. Handles are focusable separators: arrow keys move them by 10px.
+* Pieces - `Root`, `Handle` - are function components reading `Layout.get()`, each styled on its own; pass one as
+* a prop or assign it in a subclass to replace it, spreading `rootProps` or `handleProps(index)`. Stock
+* pieces are statics.
+*
+* @example
+* <Layout sizes={[1, 3]}>
+*   <nav>…</nav>
+*   <Layout>
+*     <main>…</main>
+*     <footer>…</footer>
+*   </Layout>
+* </Layout>
+*/
+var Layout = class extends Layout$1 {
+	static Root = Root;
+	static Handle = Handle;
+	Root = Root;
+	Handle = Handle;
+	arrange(weights, row, gap) {
+		const tracks = weights.map((weight) => `minmax(0, ${weight}fr)`).join(` ${gap}px `);
+		return {
+			display: "grid",
+			[row ? "gridTemplateColumns" : "gridTemplateRows"]: tracks
+		};
+	}
+};
+
+//#endregion
+export { Layout };
+//# sourceMappingURL=layout.js.map

package/dist/layout/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","names":["Base.Layout"],"sources":["../../src/layout/layout.tsx"],"sourcesContent":["/** @jsxImportSource @expressive/dom */\nimport { Component } from '@expressive/mvc';\nimport { style } from '@expressive/dom';\n\nimport * as Base from './base';\n\ndeclare namespace Layout {\n  type Direction = Base.Layout.Direction;\n  type HandleProps = Base.Layout.HandleProps;\n}\n\nconst Root = ({ children }: { children: Component.Node }): Component.Node => (\n  <div {...Base.Layout.get().rootProps}>{children}</div>\n);\n\nstyle(Root, {\n  minWidth: '0',\n  minHeight: '0',\n  height: '100%'\n});\n\nconst Handle = ({ index, active }: Layout.HandleProps): Component.Node => {\n  const { row, handleProps } = Base.Layout.get();\n\n  return (\n    <div {...handleProps(index)} _row={row} _active={active}>\n      {active && <div _mask />}\n    </div>\n  );\n};\n\nstyle(Handle, {\n  position: 'relative',\n  cursor: 'row-resize',\n  outline: '0',\n  touchAction: 'none',\n  _row: {\n    cursor: 'col-resize'\n  },\n  '::after': {\n    content: '\"\"',\n    position: 'absolute',\n    inset: '2px',\n    borderRadius: '4px',\n    transition: 'background 100ms'\n  },\n  ':hover::after': {\n    background: 'var(--ui-highlight, #deebff)'\n  },\n  ':focus-visible::after': {\n    background: 'var(--ui-accent, #2684ff)'\n  },\n  _active: {\n    '::after': {\n      background: 'var(--ui-accent, #2684ff)'\n    }\n  },\n  _mask: {\n    position: 'fixed',\n    inset: '0',\n    zIndex: '1000'\n  }\n});\n\n/**\n * Resizable panes: each child is a pane, with a draggable handle between neighbors.\n *\n * Panes share space by weight - `sizes`, else equal - and keep at least `min` pixels. A nested `Layout` runs\n * across its parent unless given a `direction`. Handles are focusable separators: arrow keys move them by 10px.\n * Pieces - `Root`, `Handle` - are function components reading `Layout.get()`, each styled on its own; pass one as\n * a prop or assign it in a subclass to replace it, spreading `rootProps` or `handleProps(index)`. Stock\n * pieces are statics.\n *\n * @example\n * <Layout sizes={[1, 3]}>\n *   <nav>…</nav>\n *   <Layout>\n *     <main>…</main>\n *     <footer>…</footer>\n *   </Layout>\n * </Layout>\n */\nclass Layout extends Base.Layout {\n  static Root = Root;\n  static Handle = Handle;\n\n  Root = Root;\n  Handle = Handle;\n\n  protected arrange(weights: number[], row: boolean, gap: number) {\n    const tracks = weights.map((weight) => `minmax(0, ${weight}fr)`).join(` ${gap}px `);\n\n    return { display: 'grid', [row ? 'gridTemplateColumns' : 'gridTemplateRows']: tracks };\n  }\n}\n\nexport { Handle, Layout, Root };\n"],"mappings":";;;;;AAWA,MAAM,QAAQ,EAAE,eACd,oBAAC;CAAI,YAAgB,KAAK,CAAC;CAAY;EAAe;AAGxD,MAAM,MAAM;CACV,UAAU;CACV,WAAW;CACX,QAAQ;CACT,CAAC;AAEF,MAAM,UAAU,EAAE,OAAO,aAAiD;CACxE,MAAM,EAAE,KAAK,yBAA4B,KAAK;AAE9C,QACE,oBAAC;EAAI,GAAI,YAAY,MAAM;EAAE,MAAM;EAAK,SAAS;YAC9C,UAAU,oBAAC,SAAI,cAAQ;GACpB;;AAIV,MAAM,QAAQ;CACZ,UAAU;CACV,QAAQ;CACR,SAAS;CACT,aAAa;CACb,MAAM,EACJ,QAAQ,cACT;CACD,WAAW;EACT,SAAS;EACT,UAAU;EACV,OAAO;EACP,cAAc;EACd,YAAY;EACb;CACD,iBAAiB,EACf,YAAY,gCACb;CACD,yBAAyB,EACvB,YAAY,6BACb;CACD,SAAS,EACP,WAAW,EACT,YAAY,6BACb,EACF;CACD,OAAO;EACL,UAAU;EACV,OAAO;EACP,QAAQ;EACT;CACF,CAAC;;;;;;;;;;;;;;;;;;;AAoBF,IAAM,SAAN,cAAqBA,SAAY;CAC/B,OAAO,OAAO;CACd,OAAO,SAAS;CAEhB,OAAO;CACP,SAAS;CAET,AAAU,QAAQ,SAAmB,KAAc,KAAa;EAC9D,MAAM,SAAS,QAAQ,KAAK,WAAW,aAAa,OAAO,KAAK,CAAC,KAAK,IAAI,IAAI,KAAK;AAEnF,SAAO;GAAE,SAAS;IAAS,MAAM,wBAAwB,qBAAqB;GAAQ"}

package/dist/piece.js

@@ -0,0 +1,13 @@
+//#region src/piece.ts
+/** Placeholder for a piece a skin must provide; throws naming it when rendered. */
+function missing(piece) {
+	return () => {
+		throw new Error(`${piece} has no default - assign one in a subclass or pass it as a prop.`);
+	};
+}
+/** Default for a piece a skin may leave out. */
+const none = () => null;
+
+//#endregion
+export { missing, none };
+//# sourceMappingURL=piece.js.map

package/dist/piece.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"piece.js","names":[],"sources":["../src/piece.ts"],"sourcesContent":["import type { Component } from '@expressive/mvc';\n\n/** Placeholder for a piece a skin must provide; throws naming it when rendered. */\nexport function missing(piece: string) {\n  return (): Component.Node => {\n    throw new Error(`${piece} has no default - assign one in a subclass or pass it as a prop.`);\n  };\n}\n\n/** Default for a piece a skin may leave out. */\nexport const none = (): Component.Node => null;\n"],"mappings":";;AAGA,SAAgB,QAAQ,OAAe;AACrC,cAA6B;AAC3B,QAAM,IAAI,MAAM,GAAG,MAAM,kEAAkE;;;;AAK/F,MAAa,aAA6B"}

package/dist/popover/base.d.ts

@@ -0,0 +1,94 @@
+import { Place, Side } from "./place.js";
+import { Component, Model } from "@expressive/mvc";
+
+//#region src/popover/base.d.ts
+declare namespace Popover {
+  export { Place, Side };
+  export type Wrap = (props: {
+    children: Component.Node;
+  }) => Component.Node;
+  export type Part = () => Component.Node;
+}
+/**
+ * Anchored, non-modal panel behavior without a look: toggling, placement, 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 panel out of the page. `Arrow` renders nothing unless assigned.
+ * Pieces spread the matching `*Props` getter onto their element to stay accessible and placed.
+ */
+declare class Popover extends Component {
+  /** Content of the button. */
+  label: Component.Node;
+  open: boolean;
+  onToggle?: (open: boolean) => void;
+  /** Preferred side of the button. */
+  side: Popover.Side;
+  /** The button's id; prefixes the panel's. */
+  id: string;
+  /** Where the panel sits, once measured. */
+  place?: Popover.Place;
+  Trigger: Popover.Part;
+  Layer: Popover.Wrap;
+  Panel: Popover.Wrap;
+  Arrow: Popover.Part;
+  constructor(...args: Model.Args);
+  get triggerProps(): {
+    readonly ref: (element: HTMLElement | null) => void;
+    readonly type: "button";
+    readonly id: string;
+    readonly 'aria-haspopup': "dialog";
+    readonly 'aria-expanded': boolean;
+    readonly 'aria-controls': string | undefined;
+    readonly onClick: () => void;
+  };
+  /** For the panel: hidden at the origin until measured, then at `place`. */
+  get panelProps(): {
+    readonly ref: (element: HTMLElement | null) => void;
+    readonly id: `${string}-panel`;
+    readonly role: "dialog";
+    readonly 'aria-labelledby': string;
+    readonly tabIndex: -1;
+    readonly style: {
+      left: string;
+      top: string;
+      opacity?: undefined;
+    } | {
+      left: string;
+      top: string;
+      opacity: string;
+    };
+  };
+  /** For the arrow, once placed, with `above` for styling. */
+  get arrowProps(): {
+    readonly above: boolean;
+    readonly props: {
+      readonly 'aria-hidden': "true";
+      readonly style: {
+        readonly left: `${number}px`;
+      };
+    };
+  };
+  toggle(): void;
+  /** Close, returning focus to the button when `restore`. */
+  close(restore?: boolean): void;
+  private change;
+  /**
+   * Close on a press outside, Escape or focus leaving, and follow scroll and resize, while open; returns the release.
+   * Defaults to `document` and `window`.
+   */
+  protected listen(): () => void;
+  /** Where the panel fits beside the button, or `undefined` before both mount. Defaults to the DOM's layout. */
+  protected measure(): Popover.Place | undefined;
+  /** Re-measure and move the panel when its place changed; for a `listen` that follows layout. */
+  protected reposition(): void;
+  /** Ref for the element the panel anchors to, in `triggerProps`. */
+  anchor(element: HTMLElement | null): void;
+  /** Ref for the panel, in `panelProps`. */
+  mount(element: HTMLElement | null): void;
+  render(props: {
+    children?: Component.Node;
+  }): Component.Node;
+}
+//#endregion
+export { Popover };
+//# sourceMappingURL=base.d.ts.map

package/dist/popover/base.js

@@ -0,0 +1,176 @@
+import { missing, none } from "../piece.js";
+import { place } from "./place.js";
+import { Component } from "@expressive/mvc";
+import { Fragment, jsx, jsxs } from "@expressive/mvc/jsx-runtime";
+
+//#region src/popover/base.tsx
+const TRIGGER = /* @__PURE__ */ new WeakMap();
+const PANEL = /* @__PURE__ */ new WeakMap();
+let ID = 0;
+const Layer = ({ children }) => children;
+/**
+* Anchored, non-modal panel behavior without a look: toggling, placement, 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 panel out of the page. `Arrow` renders nothing unless assigned.
+* Pieces spread the matching `*Props` getter onto their element to stay accessible and placed.
+*/
+var Popover = class extends Component {
+	/** Content of the button. */
+	label = "Open";
+	open = false;
+	onToggle = void 0;
+	/** Preferred side of the button. */
+	side = "below";
+	/** The button's id; prefixes the panel's. */
+	id = `popover-${++ID}`;
+	/** Where the panel sits, once measured. */
+	place = void 0;
+	Trigger = missing("Popover.Trigger");
+	Layer = Layer;
+	Panel = missing("Popover.Panel");
+	Arrow = none;
+	constructor(...args) {
+		super(...args, () => {
+			this.get(({ open }) => {
+				if (open) return this.listen();
+			});
+		});
+	}
+	get triggerProps() {
+		const { id, open } = this;
+		return {
+			ref: this.anchor,
+			type: "button",
+			id,
+			"aria-haspopup": "dialog",
+			"aria-expanded": open,
+			"aria-controls": open ? `${id}-panel` : void 0,
+			onClick: this.toggle
+		};
+	}
+	/** For the panel: hidden at the origin until measured, then at `place`. */
+	get panelProps() {
+		const { id, place } = this;
+		return {
+			ref: this.mount,
+			id: `${id}-panel`,
+			role: "dialog",
+			"aria-labelledby": id,
+			tabIndex: -1,
+			style: place ? {
+				left: `${place.left}px`,
+				top: `${place.top}px`
+			} : {
+				left: "0px",
+				top: "0px",
+				opacity: "0"
+			}
+		};
+	}
+	/** For the arrow, once placed, with `above` for styling. */
+	get arrowProps() {
+		const { arrow, side } = this.place || {
+			arrow: 0,
+			side: "below"
+		};
+		return {
+			above: side == "above",
+			props: {
+				"aria-hidden": "true",
+				style: { left: `${arrow - 5}px` }
+			}
+		};
+	}
+	toggle() {
+		this.change(!this.open);
+	}
+	/** Close, returning focus to the button when `restore`. */
+	close(restore) {
+		if (!this.open) return;
+		this.change(false);
+		if (restore) TRIGGER.get(this)?.focus();
+	}
+	change(open) {
+		this.open = open;
+		this.place = void 0;
+		if (this.onToggle) this.onToggle(open);
+	}
+	/**
+	* Close on a press outside, Escape or focus leaving, and follow scroll and resize, while open; returns the release.
+	* Defaults to `document` and `window`.
+	*/
+	listen() {
+		const inside = (target) => target instanceof Node && [TRIGGER.get(this), PANEL.get(this)].some((element) => element?.contains(target));
+		const press = (event) => {
+			if (!inside(event.target)) this.close();
+		};
+		const key = (event) => {
+			if (event.key == "Escape") {
+				event.preventDefault();
+				event.stopPropagation();
+				this.close(true);
+			}
+		};
+		const leave = (event) => {
+			if (event.relatedTarget && !inside(event.relatedTarget)) this.close();
+		};
+		const move = () => this.reposition();
+		document.addEventListener("pointerdown", press, true);
+		document.addEventListener("keydown", key, true);
+		document.addEventListener("focusout", leave);
+		window.addEventListener("resize", move);
+		window.addEventListener("scroll", move, true);
+		return () => {
+			document.removeEventListener("pointerdown", press, true);
+			document.removeEventListener("keydown", key, true);
+			document.removeEventListener("focusout", leave);
+			window.removeEventListener("resize", move);
+			window.removeEventListener("scroll", move, true);
+		};
+	}
+	/** Where the panel fits beside the button, or `undefined` before both mount. Defaults to the DOM's layout. */
+	measure() {
+		const trigger = TRIGGER.get(this);
+		const panel = PANEL.get(this);
+		if (!trigger || !panel) return;
+		return place({
+			anchor: trigger.getBoundingClientRect(),
+			width: panel.offsetWidth,
+			height: panel.offsetHeight,
+			view: {
+				left: 0,
+				top: 0,
+				width: window.innerWidth,
+				height: window.innerHeight
+			},
+			side: this.side
+		});
+	}
+	/** Re-measure and move the panel when its place changed; for a `listen` that follows layout. */
+	reposition() {
+		const next = this.measure();
+		if (!next) return;
+		const { place: last } = this;
+		if (!last || last.left != next.left || last.top != next.top || last.side != next.side || last.arrow != next.arrow) this.place = next;
+	}
+	/** Ref for the element the panel anchors to, in `triggerProps`. */
+	anchor(element) {
+		if (element) TRIGGER.set(this, element);
+	}
+	/** Ref for the panel, in `panelProps`. */
+	mount(element) {
+		if (!element) return;
+		PANEL.set(this, element);
+		this.reposition();
+		(element.querySelector("[autofocus]") || element).focus();
+	}
+	render(props) {
+		const { open, place } = this;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(this.Trigger, {}), open && /* @__PURE__ */ jsx(this.Layer, { children: /* @__PURE__ */ jsxs(this.Panel, { children: [place && /* @__PURE__ */ jsx(this.Arrow, {}), props.children] }) })] });
+	}
+};
+
+//#endregion
+export { Popover };
+//# sourceMappingURL=base.js.map

package/dist/popover/base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base.js","names":[],"sources":["../../src/popover/base.tsx"],"sourcesContent":["import { Component, type Model } from '@expressive/mvc';\n\nimport { missing, none } from '../piece';\nimport { place, type Place, type Side } from './place';\n\ndeclare namespace Popover {\n  export { Place, Side };\n\n  export type Wrap = (props: { children: Component.Node }) => Component.Node;\n  export type Part = () => Component.Node;\n}\n\nconst TRIGGER = new WeakMap<Popover, HTMLElement>();\n\nconst PANEL = new WeakMap<Popover, HTMLElement>();\n\nlet ID = 0;\n\nconst Layer = ({ children }: { children: Component.Node }): Component.Node => children;\n\n/**\n * Anchored, non-modal panel behavior without a look: toggling, placement, 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 panel out of the page. `Arrow` renders nothing unless assigned.\n * Pieces spread the matching `*Props` getter onto their element to stay accessible and placed.\n */\nclass Popover extends Component {\n  /** Content of the button. */\n  label: Component.Node = 'Open';\n\n  open = false;\n  onToggle?: (open: boolean) => void = undefined;\n\n  /** Preferred side of the button. */\n  side: Popover.Side = 'below';\n\n  /** The button's id; prefixes the panel's. */\n  id = `popover-${++ID}`;\n\n  /** Where the panel sits, once measured. */\n  place?: Popover.Place = undefined;\n\n  Trigger: Popover.Part = missing('Popover.Trigger');\n  Layer: Popover.Wrap = Layer;\n  Panel: Popover.Wrap = missing('Popover.Panel');\n  Arrow: Popover.Part = none;\n\n  constructor(...args: Model.Args) {\n    super(...args, () => {\n      this.get(({ open }) => {\n        if (open) return this.listen();\n      });\n    });\n  }\n\n  get triggerProps() {\n    const { id, open } = this;\n\n    return {\n      ref: this.anchor,\n      type: 'button',\n      id,\n      'aria-haspopup': 'dialog',\n      'aria-expanded': open,\n      'aria-controls': open ? `${id}-panel` : undefined,\n      onClick: this.toggle\n    } as const;\n  }\n\n  /** For the panel: hidden at the origin until measured, then at `place`. */\n  get panelProps() {\n    const { id, place } = this;\n\n    return {\n      ref: this.mount,\n      id: `${id}-panel`,\n      role: 'dialog',\n      'aria-labelledby': id,\n      tabIndex: -1,\n      style: place ? { left: `${place.left}px`, top: `${place.top}px` } : { left: '0px', top: '0px', opacity: '0' }\n    } as const;\n  }\n\n  /** For the arrow, once placed, with `above` for styling. */\n  get arrowProps() {\n    const { arrow, side } = this.place || { arrow: 0, side: 'below' };\n\n    return {\n      above: side == 'above',\n      props: { 'aria-hidden': 'true', style: { left: `${arrow - 5}px` } }\n    } as const;\n  }\n\n  toggle() {\n    this.change(!this.open);\n  }\n\n  /** Close, returning focus to the button when `restore`. */\n  close(restore?: boolean) {\n    if (!this.open) return;\n\n    this.change(false);\n\n    if (restore) TRIGGER.get(this)?.focus();\n  }\n\n  private change(open: boolean) {\n    this.open = open;\n    this.place = undefined;\n\n    if (this.onToggle) this.onToggle(open);\n  }\n\n  /**\n   * Close on a press outside, Escape or focus leaving, and follow scroll and resize, while open; returns the release.\n   * Defaults to `document` and `window`.\n   */\n  protected listen(): () => void {\n    const inside = (target: EventTarget | null) =>\n      target instanceof Node && [TRIGGER.get(this), PANEL.get(this)].some((element) => element?.contains(target));\n\n    const press = (event: Event) => {\n      if (!inside(event.target)) this.close();\n    };\n\n    const key = (event: KeyboardEvent) => {\n      if (event.key == 'Escape') {\n        event.preventDefault();\n        event.stopPropagation();\n        this.close(true);\n      }\n    };\n\n    const leave = (event: FocusEvent) => {\n      if (event.relatedTarget && !inside(event.relatedTarget)) this.close();\n    };\n\n    const move = () => this.reposition();\n\n    document.addEventListener('pointerdown', press, true);\n    document.addEventListener('keydown', key, true);\n    document.addEventListener('focusout', leave);\n    window.addEventListener('resize', move);\n    window.addEventListener('scroll', move, true);\n\n    return () => {\n      document.removeEventListener('pointerdown', press, true);\n      document.removeEventListener('keydown', key, true);\n      document.removeEventListener('focusout', leave);\n      window.removeEventListener('resize', move);\n      window.removeEventListener('scroll', move, true);\n    };\n  }\n\n  /** Where the panel fits beside the button, or `undefined` before both mount. Defaults to the DOM's layout. */\n  protected measure(): Popover.Place | undefined {\n    const trigger = TRIGGER.get(this);\n    const panel = PANEL.get(this);\n\n    if (!trigger || !panel) return;\n\n    return place({\n      anchor: trigger.getBoundingClientRect(),\n      width: panel.offsetWidth,\n      height: panel.offsetHeight,\n      view: { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight },\n      side: this.side\n    });\n  }\n\n  /** Re-measure and move the panel when its place changed; for a `listen` that follows layout. */\n  protected reposition() {\n    const next = this.measure();\n\n    if (!next) return;\n\n    const { place: last } = this;\n\n    if (!last || last.left != next.left || last.top != next.top || last.side != next.side || last.arrow != next.arrow)\n      this.place = next;\n  }\n\n  /** Ref for the element the panel anchors to, in `triggerProps`. */\n  anchor(element: HTMLElement | null) {\n    if (element) TRIGGER.set(this, element);\n  }\n\n  /** Ref for the panel, in `panelProps`. */\n  mount(element: HTMLElement | null) {\n    if (!element) return;\n\n    PANEL.set(this, element);\n    this.reposition();\n    (element.querySelector<HTMLElement>('[autofocus]') || element).focus();\n  }\n\n  render(props: { children?: Component.Node }): Component.Node {\n    const { open, place } = this;\n\n    return (\n      <>\n        <this.Trigger />\n        {open && (\n          <this.Layer>\n            <this.Panel>\n              {place && <this.Arrow />}\n              {props.children}\n            </this.Panel>\n          </this.Layer>\n        )}\n      </>\n    );\n  }\n}\n\nexport { Popover };\n"],"mappings":";;;;;;AAYA,MAAM,0BAAU,IAAI,SAA+B;AAEnD,MAAM,wBAAQ,IAAI,SAA+B;AAEjD,IAAI,KAAK;AAET,MAAM,SAAS,EAAE,eAA6D;;;;;;;;AAS9E,IAAM,UAAN,cAAsB,UAAU;;CAE9B,QAAwB;CAExB,OAAO;CACP,WAAqC;;CAGrC,OAAqB;;CAGrB,KAAK,WAAW,EAAE;;CAGlB,QAAwB;CAExB,UAAwB,QAAQ,kBAAkB;CAClD,QAAsB;CACtB,QAAsB,QAAQ,gBAAgB;CAC9C,QAAsB;CAEtB,YAAY,GAAG,MAAkB;AAC/B,QAAM,GAAG,YAAY;AACnB,QAAK,KAAK,EAAE,WAAW;AACrB,QAAI,KAAM,QAAO,KAAK,QAAQ;KAC9B;IACF;;CAGJ,IAAI,eAAe;EACjB,MAAM,EAAE,IAAI,SAAS;AAErB,SAAO;GACL,KAAK,KAAK;GACV,MAAM;GACN;GACA,iBAAiB;GACjB,iBAAiB;GACjB,iBAAiB,OAAO,GAAG,GAAG,UAAU;GACxC,SAAS,KAAK;GACf;;;CAIH,IAAI,aAAa;EACf,MAAM,EAAE,IAAI,UAAU;AAEtB,SAAO;GACL,KAAK,KAAK;GACV,IAAI,GAAG,GAAG;GACV,MAAM;GACN,mBAAmB;GACnB,UAAU;GACV,OAAO,QAAQ;IAAE,MAAM,GAAG,MAAM,KAAK;IAAK,KAAK,GAAG,MAAM,IAAI;IAAK,GAAG;IAAE,MAAM;IAAO,KAAK;IAAO,SAAS;IAAK;GAC9G;;;CAIH,IAAI,aAAa;EACf,MAAM,EAAE,OAAO,SAAS,KAAK,SAAS;GAAE,OAAO;GAAG,MAAM;GAAS;AAEjE,SAAO;GACL,OAAO,QAAQ;GACf,OAAO;IAAE,eAAe;IAAQ,OAAO,EAAE,MAAM,GAAG,QAAQ,EAAE,KAAK;IAAE;GACpE;;CAGH,SAAS;AACP,OAAK,OAAO,CAAC,KAAK,KAAK;;;CAIzB,MAAM,SAAmB;AACvB,MAAI,CAAC,KAAK,KAAM;AAEhB,OAAK,OAAO,MAAM;AAElB,MAAI,QAAS,SAAQ,IAAI,KAAK,EAAE,OAAO;;CAGzC,AAAQ,OAAO,MAAe;AAC5B,OAAK,OAAO;AACZ,OAAK,QAAQ;AAEb,MAAI,KAAK,SAAU,MAAK,SAAS,KAAK;;;;;;CAOxC,AAAU,SAAqB;EAC7B,MAAM,UAAU,WACd,kBAAkB,QAAQ,CAAC,QAAQ,IAAI,KAAK,EAAE,MAAM,IAAI,KAAK,CAAC,CAAC,MAAM,YAAY,SAAS,SAAS,OAAO,CAAC;EAE7G,MAAM,SAAS,UAAiB;AAC9B,OAAI,CAAC,OAAO,MAAM,OAAO,CAAE,MAAK,OAAO;;EAGzC,MAAM,OAAO,UAAyB;AACpC,OAAI,MAAM,OAAO,UAAU;AACzB,UAAM,gBAAgB;AACtB,UAAM,iBAAiB;AACvB,SAAK,MAAM,KAAK;;;EAIpB,MAAM,SAAS,UAAsB;AACnC,OAAI,MAAM,iBAAiB,CAAC,OAAO,MAAM,cAAc,CAAE,MAAK,OAAO;;EAGvE,MAAM,aAAa,KAAK,YAAY;AAEpC,WAAS,iBAAiB,eAAe,OAAO,KAAK;AACrD,WAAS,iBAAiB,WAAW,KAAK,KAAK;AAC/C,WAAS,iBAAiB,YAAY,MAAM;AAC5C,SAAO,iBAAiB,UAAU,KAAK;AACvC,SAAO,iBAAiB,UAAU,MAAM,KAAK;AAE7C,eAAa;AACX,YAAS,oBAAoB,eAAe,OAAO,KAAK;AACxD,YAAS,oBAAoB,WAAW,KAAK,KAAK;AAClD,YAAS,oBAAoB,YAAY,MAAM;AAC/C,UAAO,oBAAoB,UAAU,KAAK;AAC1C,UAAO,oBAAoB,UAAU,MAAM,KAAK;;;;CAKpD,AAAU,UAAqC;EAC7C,MAAM,UAAU,QAAQ,IAAI,KAAK;EACjC,MAAM,QAAQ,MAAM,IAAI,KAAK;AAE7B,MAAI,CAAC,WAAW,CAAC,MAAO;AAExB,SAAO,MAAM;GACX,QAAQ,QAAQ,uBAAuB;GACvC,OAAO,MAAM;GACb,QAAQ,MAAM;GACd,MAAM;IAAE,MAAM;IAAG,KAAK;IAAG,OAAO,OAAO;IAAY,QAAQ,OAAO;IAAa;GAC/E,MAAM,KAAK;GACZ,CAAC;;;CAIJ,AAAU,aAAa;EACrB,MAAM,OAAO,KAAK,SAAS;AAE3B,MAAI,CAAC,KAAM;EAEX,MAAM,EAAE,OAAO,SAAS;AAExB,MAAI,CAAC,QAAQ,KAAK,QAAQ,KAAK,QAAQ,KAAK,OAAO,KAAK,OAAO,KAAK,QAAQ,KAAK,QAAQ,KAAK,SAAS,KAAK,MAC1G,MAAK,QAAQ;;;CAIjB,OAAO,SAA6B;AAClC,MAAI,QAAS,SAAQ,IAAI,MAAM,QAAQ;;;CAIzC,MAAM,SAA6B;AACjC,MAAI,CAAC,QAAS;AAEd,QAAM,IAAI,MAAM,QAAQ;AACxB,OAAK,YAAY;AACjB,GAAC,QAAQ,cAA2B,cAAc,IAAI,SAAS,OAAO;;CAGxE,OAAO,OAAsD;EAC3D,MAAM,EAAE,MAAM,UAAU;AAExB,SACE,4CACE,oBAAC,KAAK,YAAU,EACf,QACC,oBAAC,KAAK,mBACJ,qBAAC,KAAK,oBACH,SAAS,oBAAC,KAAK,UAAQ,EACvB,MAAM,YACI,GACF,IAEd"}

package/dist/popover/place.d.ts

@@ -0,0 +1,12 @@
+//#region src/popover/place.d.ts
+type Side = 'below' | 'above';
+interface Place {
+  left: number;
+  top: number;
+  side: Side;
+  /** Arrow center from the box's left edge. */
+  arrow: number;
+}
+//#endregion
+export { Place, Side };
+//# sourceMappingURL=place.d.ts.map