@rvx/ui 0.1.7 → 0.1.8

package/src/components/layer.tsx

@@ -1,4 +1,4 @@
-import { Context, ContextKey, DeriveContext, Expression, extract, get, memo, sig, Signal, teardown, uncapture, untrack, watch, wrapContext } from "rvx";
+import { Context, Expression, get, Inject, memo, sig, Signal, teardown, uncapture, untrack, watch } from "rvx";
 
 import { Action, handleActionEvent, keyFor } from "../common/events.js";
 
@@ -13,7 +13,7 @@ interface LayerInstance {
 	autoFocusFallback: Element | undefined;
 }
 
-export const LAYER = Symbol.for("rvx-ui:layer-handle") as ContextKey<LayerHandle>;
+export const LAYER = new Context<LayerHandle>();
 
 const LAYERS = sig<LayerInstance[]>([
 	{
@@ -35,19 +35,16 @@ uncapture(() => watch(LAYERS, layers => {
  * Render content inside the root layer.
  */
 export function RootLayer(props: {
-	children: (ctx: Context) => unknown;
+	children: () => unknown;
 }): unknown {
 	const layer = LAYERS.value[0];
 	const root = <div
 		style={{ display: "contents" }}
 		inert={layer.inert}
 	>
-		<DeriveContext>
-			{ctx => {
-				ctx.set(LAYER, new Handle(layer));
-				return props.children(ctx);
-			}}
-		</DeriveContext>
+		<Inject context={LAYER} value={new Handle(layer)}>
+			{props.children}
+		</Inject>
 	</div> as HTMLDivElement;
 	layer.roots.push(root);
 	teardown(() => {
@@ -67,7 +64,7 @@ export function RootLayer(props: {
  * When disposed, focus is moved back to the previously focused element.
  */
 export function Layer(props: {
-	children: (ctx: Context) => unknown;
+	children: () => unknown;
 
 	/**
 	 * If true, all layers below this one are marked as inert until the current context is disposed.
@@ -145,12 +142,9 @@ export function Layer(props: {
 		style={{ display: "contents" }}
 		inert={() => layer.inert.value || !enabled()}
 	>
-		<DeriveContext>
-			{ctx => {
-				ctx.set(LAYER, new Handle(layer));
-				return props.children(ctx);
-			}}
-		</DeriveContext>
+		<Inject context={LAYER} value={new Handle(layer)}>
+			{props.children}
+		</Inject>
 	</div> as HTMLElement;
 	layer.roots.push(root);
 	return root;
@@ -213,14 +207,14 @@ export interface LayerHandle {
  * Reactively check if the layer in the current context (or the root layer if there is none) is inert.
  */
 export function isInertLayer(): boolean {
-	return extract(LAYER)?.inert ?? untrack(() => LAYERS.value[0]).inert.value;
+	return LAYER.current?.inert ?? untrack(() => LAYERS.value[0]).inert.value;
 }
 
 /**
  * Reactively check if the layer in the current context (or the root layer if there is none) is the top layer.
  */
 export function isTopLayer(): boolean {
-	return extract(LAYER)?.top ?? LAYERS.value.length === 1;
+	return LAYER.current?.top ?? LAYERS.value.length === 1;
 }
 
 function instanceContains(instance: LayerInstance, node: Node): boolean {
@@ -253,7 +247,7 @@ class Handle implements LayerHandle {
 	useEvent<K extends keyof WindowEventMap>(type: K, listener: (event: WindowEventMap[K]) => void, options?: boolean | AddEventListenerOptions): void;
 	useEvent(type: string, listener: (event: Event) => void, options?: boolean | AddEventListenerOptions): void;
 	useEvent(type: string, listener: (event: Event) => void, options?: boolean | AddEventListenerOptions): void {
-		const wrapper = wrapContext((event: Event): void => {
+		const wrapper = Context.wrap((event: Event): void => {
 			if (this.top) {
 				listener(event);
 			}

package/src/components/link.tsx

@@ -1,6 +1,5 @@
-import { ClassValue, Expression, extract, get, map, optionalString, StyleValue } from "rvx";
+import { ClassValue, Expression, get, map, optionalString, StyleValue } from "rvx";
 import { isPending } from "rvx/async";
-
 import { Action, handleActionEvent, keyFor } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { separated } from "../common/types.js";
@@ -72,7 +71,7 @@ export function Link(props: {
 
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	const disabled = () => isPending() || get(props.disabled);
 
 	function action(event: Event) {

package/src/components/page.tsx

@@ -1,5 +1,4 @@
-import { ClassValue, Expression, extract, StyleValue } from "rvx";
-
+import { ClassValue, Expression, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 import { Column } from "./column.js";
 
@@ -11,7 +10,7 @@ export function Page(props: {
 	style?: StyleValue;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <div
 		role={props.role}
 		id={props.id}

package/src/components/popout.tsx

@@ -1,5 +1,5 @@
-import { captureSelf, Emitter, Event as RvxEvent, Expression, extract, get, getContext, ReadonlyContext, render, runInContext, sig, teardown, TeardownHook, untrack, View, viewNodes } from "rvx";
-
+import { captureSelf, Context, Expression, get, render, sig, teardown, TeardownHook, untrack, View, viewNodes } from "rvx";
+import { Emitter, Event as RvxEvent } from "rvx/event";
 import { PASSIVE_ACTION_EVENT } from "../common/events.js";
 import { axisEquals, Direction, DOWN, flip, getBlockStart, getInlineStart, getSize, getWindowSize, getWindowSpaceAround, INSET, LEFT, RIGHT, ScriptDirection, UP, WritingMode } from "../common/writing-mode.js";
 import { LAYER, Layer } from "./layer.js";
@@ -132,7 +132,6 @@ interface Instance {
  * Utility to create automatically placed floating content like popovers or dropdowns.
  */
 export class Popout {
-	#context: ReadonlyContext | undefined;
 	#placement: Expression<PopoutPlacement>;
 	#alignment: Expression<PopoutAlignment>;
 	#content: PopoutContent;
@@ -149,7 +148,6 @@ export class Popout {
 	 * The popout hides automatically when the current context is disposed.
 	 */
 	constructor(options: PopoutOptions) {
-		this.#context = getContext();
 		this.#placement = options.placement;
 		this.#alignment = options.alignment;
 		this.#content = options.content;
@@ -167,6 +165,71 @@ export class Popout {
 		return this.#visible.value;
 	}
 
+	#createInstance = Context.wrap((writingMode: WritingMode, scriptDir: ScriptDirection): Instance => {
+		return captureSelf(dispose => {
+			const instance: Instance = this.#instance = {
+				dispose,
+				content: undefined!,
+				view: undefined!,
+				observer: undefined!,
+				sizeReference: undefined,
+			};
+
+			instance.view = render(<Layer>
+				{() => {
+					const layer = LAYER.current!;
+					const onForeignEvent = (event: Event): void => {
+						if (event.target instanceof Node) {
+							if (layer.stackContains(event.target)) {
+								return;
+							}
+							const args = this.#instanceArgs;
+							if (args !== undefined) {
+								for (const node of viewNodes(args.anchor)) {
+									if (node === event.target || node.contains(event.target)) {
+										return;
+									}
+								}
+							}
+						}
+						this.hide();
+					};
+
+					this.#foreignEvents.forEach(t => window.addEventListener(t, onForeignEvent, { passive: true, capture: true }));
+					teardown(() => {
+						this.#foreignEvents.forEach(t => window.removeEventListener(t, onForeignEvent, { capture: true }));
+					});
+
+					instance!.content = <div style={{
+						"position": "fixed",
+						"writing-mode": writingMode,
+					}} dir={scriptDir}>
+						{this.#content({
+							popout: this,
+							onPlacement: this.#onPlacement.event,
+							placement: () => this.#placementState.value,
+							setSizeReference: target => {
+								instance!.sizeReference = target;
+							},
+						})}
+					</div> as HTMLElement;
+					return instance!.content;
+				}}
+			</Layer>);
+			document.body.appendChild(instance.view.take());
+
+			instance.observer = new ResizeObserver(entries => {
+				const args = this.#instanceArgs;
+				const size = entries[entries.length - 1]?.borderBoxSize[0];
+				if (args !== undefined && size !== undefined && (size.blockSize !== args.contentBlockSize || size.inlineSize !== args.contentInlineSize)) {
+					this.show(args.anchor, args.pointerEvent);
+				}
+			});
+			instance.observer.observe(instance.content, { box: "border-box" });
+			return instance;
+		});
+	});
+
 	/**
 	 * Show the popout or recalculate placement if already visible.
 	 *
@@ -223,69 +286,7 @@ export class Popout {
 		// Ensure that there is a popout content instance:
 		let instance = this.#instance;
 		if (instance === undefined) {
-			runInContext(this.#context, () => {
-				captureSelf(dispose => {
-					instance = this.#instance = {
-						dispose,
-						content: undefined!,
-						view: undefined!,
-						observer: undefined!,
-						sizeReference: undefined,
-					};
-
-					instance.view = render(<Layer>
-						{() => {
-							const layer = extract(LAYER)!;
-							const onForeignEvent = (event: Event): void => {
-								if (event.target instanceof Node) {
-									if (layer.stackContains(event.target)) {
-										return;
-									}
-									const args = this.#instanceArgs;
-									if (args !== undefined) {
-										for (const node of viewNodes(args.anchor)) {
-											if (node === event.target || node.contains(event.target)) {
-												return;
-											}
-										}
-									}
-								}
-								this.hide();
-							};
-
-							this.#foreignEvents.forEach(t => window.addEventListener(t, onForeignEvent, { passive: true, capture: true }));
-							teardown(() => {
-								this.#foreignEvents.forEach(t => window.removeEventListener(t, onForeignEvent, { capture: true }));
-							});
-
-							instance!.content = <div style={{
-								"position": "fixed",
-								"writing-mode": writingMode,
-							}} dir={scriptDir}>
-								{this.#content({
-									popout: this,
-									onPlacement: this.#onPlacement.event,
-									placement: () => this.#placementState.value,
-									setSizeReference: target => {
-										instance!.sizeReference = target;
-									},
-								})}
-							</div> as HTMLElement;
-							return instance!.content;
-						}}
-					</Layer>);
-					document.body.appendChild(instance.view.take());
-
-					instance.observer = new ResizeObserver(entries => {
-						const args = this.#instanceArgs;
-						const size = entries[entries.length - 1]?.borderBoxSize[0];
-						if (args !== undefined && size !== undefined && (size.blockSize !== args.contentBlockSize || size.inlineSize !== args.contentInlineSize)) {
-							this.show(args.anchor, args.pointerEvent);
-						}
-					});
-					instance.observer.observe(instance.content, { box: "border-box" });
-				});
-			});
+			instance = this.#createInstance(writingMode!, scriptDir!);
 		}
 
 		const placementArgs: PopoutPlacementArgs = { gap: 0 };

package/src/components/popover.tsx

@@ -1,5 +1,5 @@
-import { ClassValue, Expression, extract, get, Inject, map, render, sig, StyleValue, SVG, uniqueId, watch, XMLNS } from "rvx";
-
+import { ClassValue, Expression, get, Inject, map, render, sig, StyleValue, SVG, watch, XMLNS } from "rvx";
+import { uniqueId } from "rvx/id";
 import { Action } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { DOWN, getSize, getXY, LEFT, RIGHT, UP } from "../common/writing-mode.js";
@@ -76,8 +76,8 @@ export function createPopover(props: {
 		placement: map(props.placement, v => v ?? "block"),
 		alignment: map(props.alignment, v => v ?? "center"),
 		content: ({ popout, onPlacement, placement, setSizeReference }) => {
-			const theme = extract(THEME);
-			const layer = extract(LAYER)!;
+			const theme = THEME.current;
+			const layer = LAYER.current!;
 			const spikeTransform = sig("");
 
 			layer.useHotkey("escape", () => {
@@ -113,7 +113,7 @@ export function createPopover(props: {
 
 			const spikeArea = <div class={theme?.popover_spike_area}>
 				<div class={theme?.popover_spike} style={{ transform: spikeTransform }}>
-					<Inject key={XMLNS} value={SVG}>
+					<Inject context={XMLNS} value={SVG}>
 						{() => {
 							return <svg viewBox="0 0 16 16" preserveAspectRatio="none">
 								<path d="M0,16 L8,0 L16,16 Z" />

package/src/components/radio-buttons.tsx

@@ -1,9 +1,9 @@
-import { ClassValue, Expression, extract, For, get, map, optionalString, Signal, string, StyleValue, uniqueId } from "rvx";
+import { ClassValue, Expression, For, get, map, optionalString, Signal, string, StyleValue } from "rvx";
 import { isPending } from "rvx/async";
-
 import { THEME } from "../common/theme.js";
 import { Text } from "./text.js";
 import { validatorFor } from "./validation.js";
+import { uniqueId } from "rvx/id";
 
 export interface RadioOption<T> {
 	value: T;
@@ -26,7 +26,7 @@ export function RadioButtons<T>(props: {
 	children?: never;
 }): unknown {
 	const group = uniqueId();
-	const theme = extract(THEME);
+	const theme = THEME.current;
 
 	const disabled = props.value instanceof Signal
 		? () => isPending() || get(props.disabled)

package/src/components/row.tsx

@@ -1,5 +1,4 @@
-import { ClassValue, Expression, extract, get, StyleValue } from "rvx";
-
+import { ClassValue, Expression, get, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 import { SizeContext } from "../common/types.js";
 
@@ -12,7 +11,7 @@ export function Row(props: {
 	style?: StyleValue;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <div
 		class={[
 			theme?.row,

package/src/components/scroll-view.tsx

@@ -1,5 +1,4 @@
-import { ClassValue, extract, sig, StyleValue, teardown } from "rvx";
-
+import { ClassValue, sig, StyleValue, teardown } from "rvx";
 import { debounceEvent } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { axisEquals, DOWN, getBlockStart, getSize, RIGHT, UP, WritingMode } from "../common/writing-mode.js";
@@ -9,7 +8,7 @@ export function ScrollView(props: {
 	style?: StyleValue;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	const vertical = sig<boolean | undefined>(undefined);
 	const scrollbarComp = sig(0);
 	const startIndicator = sig(false);

package/src/components/text-input.tsx

@@ -1,6 +1,5 @@
-import { ClassValue, Expression, extract, get, optionalString, Signal, StyleValue } from "rvx";
+import { ClassValue, Expression, get, optionalString, Signal, StyleValue } from "rvx";
 import { isPending, waitFor } from "rvx/async";
-
 import { keyFor } from "../common/events.js";
 import { THEME } from "../common/theme.js";
 import { validatorFor } from "./validation.js";
@@ -64,7 +63,7 @@ export function TextInput(props: ({
 	"aria-label"?: Expression<string | undefined>;
 	"aria-labelledby"?: Expression<string | undefined>;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	const disabled = () => isPending() || get(props.disabled);
 
 	const validator = props.value instanceof Signal ? validatorFor(props.value) : undefined;

package/src/components/text.tsx

@@ -1,5 +1,4 @@
-import { ClassValue, Expression, extract, StyleValue } from "rvx";
-
+import { ClassValue, Expression, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 
 export function Text(props: {
@@ -8,7 +7,7 @@ export function Text(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <div
 		class={[
 			theme?.text,

package/src/components/validation.tsx

@@ -1,16 +1,17 @@
-import { ClassValue, ContextKey, Emitter, Event, Expression, extract, For, map, sig, Signal, StyleValue, teardown, trigger, TriggerPipe, uniqueId, untrack } from "rvx";
+import { ClassValue, Context, Expression, For, map, sig, Signal, StyleValue, teardown, trigger, TriggerPipe, untrack } from "rvx";
 import { TaskSlot } from "rvx/async";
-
 import { THEME } from "../common/theme.js";
 import { Collapse } from "./collapse.js";
 import { Text } from "./text.js";
+import { uniqueId } from "rvx/id";
+import { Emitter, Event } from "rvx/event";
 
 const VALIDATORS = new WeakMap<object, Validator>();
 
 /**
- * Context key for validation options used by new validators.
+ * Context for validation options used by new validators.
  */
-export const VALIDATION = Symbol.for("rvx-ui:validation") as ContextKey<ValidationOptions>;
+export const VALIDATION = new Context<ValidationOptions>();
 
 /**
  * Defines when accessed signals trigger automatic validation.
@@ -30,10 +31,9 @@ export class Validator {
 	#signalTrigger: ValidationSignalTrigger;
 	#rules = sig<ValidationRuleEntry[]>([]);
 	#invalid = sig(false);
-	#cycle = 0;
 
 	constructor() {
-		const options = extract(VALIDATION);
+		const options = VALIDATION.current;
 		this.#signalTrigger = options?.signalTrigger ?? "if-validated";
 	}
 
@@ -98,7 +98,6 @@ export class Validator {
 	}
 
 	async #validate(sideEffect: boolean, signal?: AbortSignal): Promise<boolean> {
-		this.#cycle++;
 		const rules = untrack(() => this.#rules.value);
 		for (let i = 0; i < rules.length; i++) {
 			if (signal?.aborted) {
@@ -143,7 +142,6 @@ export class Validator {
 	 * Reset this validator to it's initial state.
 	 */
 	reset(): void {
-		this.#cycle++;
 		this.#invalid.value = false;
 		const rules = untrack(() => this.#rules.value);
 		for (let i = 0; i < rules.length; i++) {
@@ -238,7 +236,7 @@ export function ValidationMessage(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <Collapse
 		visible={map(props.visible, v => v ?? true)}
 		alert={props.alert}

package/src/components/value.tsx

@@ -1,5 +1,4 @@
-import { ClassValue, Expression, extract, StyleValue } from "rvx";
-
+import { ClassValue, Expression, StyleValue } from "rvx";
 import { THEME } from "../common/theme.js";
 
 export function Value(props: {
@@ -8,7 +7,7 @@ export function Value(props: {
 	id?: Expression<string | undefined>;
 	children?: unknown;
 }): unknown {
-	const theme = extract(THEME);
+	const theme = THEME.current;
 	return <span
 		class={[
 			theme?.value,

package/src/index.tsx

@@ -10,8 +10,8 @@ export * from "./components/collapse.js";
 export * from "./components/column.js";
 export * from "./components/control-group.js";
 export * from "./components/dialog.js";
-export * from "./components/dropdown.js";
 export * from "./components/dropdown-input.js";
+export * from "./components/dropdown.js";
 export * from "./components/flex-space.js";
 export * from "./components/heading.js";
 export * from "./components/label.js";
@@ -23,7 +23,7 @@ export * from "./components/popover.js";
 export * from "./components/radio-buttons.js";
 export * from "./components/row.js";
 export * from "./components/scroll-view.js";
-export * from "./components/text.js";
 export * from "./components/text-input.js";
+export * from "./components/text.js";
 export * from "./components/validation.js";
 export * from "./components/value.js";

package/src/test.tsx

@@ -1,2 +1,3 @@
 export * from "./common/theme-test.js";
+export * from "./components/checkbox-test.js";
 export * from "./components/collapse-test.js";

package/src/theme/base.scss

@@ -12,6 +12,9 @@ $root-size: 14px;
 	font-size: #{math.div(1rem, 16px) * $root-size};
 	line-height: 1;
 
+	--accent: rgb(0, 192, 255);
+	accent-color: var(--accent);
+
 	--content-column-gap: #{px(16)};
 	--content-row-gap: #{px(16)};
 	--content-radius: #{px(8)};
@@ -20,8 +23,9 @@ $root-size: 14px;
 
 	--control-column-gap: #{px(8)};
 	--control-row-gap: #{px(8)};
-	--control-radius: #{px(4)};
-	--control-border: #{px(1)};
+	--control-radius: #{px(5)};
+	--control-border: #{px(2)};
+	--control-shadow: 0 0 #{px(3)} rgba(0, 0, 0, .5);
 	--control-disabled: opacity(.5);
 	@include common.define-quad(control-pad, px(8), px(10));
 
@@ -33,17 +37,18 @@ $root-size: 14px;
 	--space-gap: #{px(6)};
 
 	--layout-transition: .15s ease;
+	--color-transition: .1s ease;
 }
 
 @include common.theme((
 	bg: (
-		dark: rgb(32, 32, 32),
+		dark: rgb(36, 36, 36),
 	),
 	fg: (
 		dark: white,
 	),
 	focus-outline: (
-		dark: var(--control-border) dashed rgb(0, 127, 255),
+		dark: var(--control-border) dashed var(--accent),
 	),
 ));
 
@@ -65,5 +70,5 @@ body {
 }
 
 ::selection {
-	background-color: rgba(0, 100, 200, .7);
+	background-color: rgba(0, 150, 200, .6);
 }