@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/theme-picker/theme-picker.presentation.d.ts

@@ -0,0 +1,198 @@
+import { ThemePickerArgs, ThemePickerContext, ThemePickerItem, ThemePickerState } from "./theme-picker.state.js";
+import { ThemePickerEvents, ThemePickerOpenChange, ThemePickerValueChange } from "./theme-picker.events.js";
+import { ApiOf, SlotViewFor, ViewFor } from "@spinjs/runtime";
+type Ctx = ThemePickerContext;
+type ScopeLike = ViewFor<ThemePickerContext, ThemePickerEvents, ThemePickerState>;
+type SlotLike = SlotViewFor<ThemePickerItem, ThemePickerContext, ThemePickerEvents, ThemePickerState>;
+export declare const def: {
+  name: string;
+  machine: (args: ThemePickerArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ThemePickerContext, ThemePickerEvents, ThemePickerState>;
+  start: "closed";
+  scalars: string[];
+  reconcile: ({ context, parsed, send }: {
+    readonly context: ThemePickerContext;
+    readonly state: "open" | "closed";
+    readonly parsed: Record<string, unknown>;
+    readonly authored: (name: string) => boolean;
+    readonly send: (event: {
+      type: string;
+    } & Record<string, unknown>) => void;
+  }) => boolean;
+  parts: {
+    root: {
+      attrs: () => {};
+    };
+    trigger: {
+      attrs: (scope: ScopeLike) => {
+        onClick: () => void;
+        onKeyDown: (event: KeyboardEvent) => void;
+        type: string;
+      };
+    };
+    triggerLabel: {
+      attrs: () => {};
+    };
+    triggerSwatch: {
+      attrs: (scope: ScopeLike) => {
+        "data-swatch-theme": string;
+      };
+    };
+    triggerIndicator: {
+      attrs: () => {
+        [x: string]: import("@spinjs/runtime").AriaValue;
+      };
+    };
+    positioner: {
+      attrs: (scope: ScopeLike) => {
+        "use:anchor": {
+          placement: string;
+          offset: number;
+        };
+        hidden: boolean | undefined;
+      };
+    };
+    content: {
+      attrs: (scope: ScopeLike) => {
+        hidden: boolean | undefined;
+        tabIndex: number;
+        onKeyDown: (event: KeyboardEvent) => void;
+        "use:dismissable": {
+          onOutside: () => void;
+          onEscape: () => void;
+        };
+        role: string;
+      };
+    };
+    list: {
+      attrs: () => {
+        role: string;
+      };
+    };
+  };
+  slots: {
+    item: {
+      indexes: (context: Ctx) => readonly ThemePickerItem[];
+      attrs: (scope: SlotLike) => {
+        "data-value": string;
+        "aria-disabled": string | undefined;
+        onClick: () => void;
+        onPointermove: () => void;
+        id: string;
+        role: string;
+      };
+    };
+    itemLabel: {
+      indexes: (context: Ctx) => readonly ThemePickerItem[];
+      attrs: () => {};
+    };
+    itemSwatch: {
+      indexes: (context: Ctx) => readonly ThemePickerItem[];
+      attrs: (scope: SlotLike) => {
+        "data-swatch-theme": string;
+      };
+    };
+    itemIndicator: {
+      indexes: (context: Ctx) => readonly ThemePickerItem[];
+      attrs: () => {
+        [x: string]: import("@spinjs/runtime").AriaValue;
+      };
+    };
+  };
+  commands: {
+    select: {
+      event: ([value]: [value: string]) => {
+        type: "ITEM.SELECT";
+        value: string;
+      };
+    };
+    setValue: {
+      event: ([value]: [value: string]) => {
+        type: "VALUE.SET";
+        value: string;
+      };
+    };
+    setThemes: {
+      event: ([themes]: [themes: readonly unknown[] | string]) => {
+        type: "THEMES.SET";
+        themes: string | readonly unknown[];
+      };
+    };
+  };
+  readers: {
+    open: {
+      read: (_context: Ctx, state: ThemePickerState) => state is "open";
+    };
+    value: {
+      read: (context: Ctx) => string;
+    };
+    highlightedValue: {
+      read: (context: Ctx) => string;
+    };
+    items: {
+      read: (context: Ctx) => readonly ThemePickerItem[];
+    };
+    selectedItem: {
+      read: (context: Ctx) => ThemePickerItem;
+    };
+    empty: {
+      read: (context: Ctx) => boolean;
+    };
+  };
+  methods: {
+    getItemState: {
+      call: (context: Ctx, _state: "open" | "closed", [item]: [item: ThemePickerItem]) => {
+        value: string;
+        selected: boolean;
+        highlighted: boolean;
+        disabled: boolean;
+        dualMode: boolean;
+      };
+    };
+    getItems: {
+      call: (context: Ctx) => readonly ThemePickerItem[];
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: Ctx) => string[];
+      detail: (watched: readonly unknown[], _event: {
+        readonly type: string;
+      } | undefined, _props: Record<string, unknown> | undefined, context?: Ctx) => {
+        value: string;
+        item: ThemePickerItem;
+      };
+    };
+    "open-change": {
+      prop: string;
+      watch: (_context: Ctx, state: ThemePickerState) => ThemePickerState[];
+      detail: (watched: readonly unknown[]) => {
+        open: boolean;
+      };
+    };
+  };
+  establish: (props: Record<string, unknown>) => ({
+    type: string;
+  } & Record<string, unknown>)[];
+  settled: ({ after, before, event, focus, id, props, root, send }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: ThemePickerContext;
+      readonly state: "open" | "closed";
+    };
+    readonly after: {
+      readonly context: ThemePickerContext;
+      readonly state: "open" | "closed";
+    };
+    readonly props: Record<string, unknown>;
+    readonly root: () => Element;
+    readonly id: (part: string, slot?: unknown) => string;
+    readonly focus: (part: string, slot?: unknown) => void;
+    readonly measure: (part: string, slot?: unknown) => DOMRect | null;
+    readonly send: (event: import("@spinjs/runtime").AnyEvent) => void;
+  }) => void;
+};
+export type ThemePickerApi = ApiOf<typeof def>;
+export declare const themePicker: import("@spinjs/runtime").DefinedComponent<ThemePickerApi, ThemePickerArgs>;
+export type { ThemePickerArgs, ThemePickerItem, ThemePickerOpenChange, ThemePickerState, ThemePickerValueChange };
+//# sourceMappingURL=theme-picker.presentation.d.ts.map

package/dist/theme-picker/theme-picker.presentation.js

@@ -0,0 +1,306 @@
+import { discoverRuntimeThemes, parseThemes } from "./theme-picker.state.js";
+import { themePicker as themePicker$1 } from "./theme-picker.machine.js";
+import { ariaHidden, defineComponent, disclosureTrigger, listSurface, optionRow } from "@spinjs/runtime";
+// src/theme-picker/theme-picker.presentation.ts
+function selectedItem(ctx) {
+	const found = ctx.themes.find((item) => item.value === ctx.value);
+	if (found !== void 0) return found;
+	const first = ctx.themes[0];
+	if (first !== void 0) return first;
+	return {
+		value: ctx.value,
+		label: ctx.value,
+		modes: ["light", "dark"],
+		disabled: false,
+		index: 0
+	};
+}
+function onTriggerKeydown(scope, event) {
+	switch (event.key) {
+		case "ArrowDown":
+		case "Enter":
+		case " ":
+			event.preventDefault();
+			scope.send({ type: "OPEN" });
+			break;
+		case "ArrowUp":
+			event.preventDefault();
+			scope.send({ type: "OPEN" });
+			scope.send({ type: "HIGHLIGHT.LAST" });
+	}
+}
+function onContentKeydown(scope, event) {
+	switch (event.key) {
+		case "ArrowDown":
+			event.preventDefault();
+			scope.send({ type: "HIGHLIGHT.NEXT" });
+			break;
+		case "ArrowUp":
+			event.preventDefault();
+			scope.send({ type: "HIGHLIGHT.PREV" });
+			break;
+		case "Home":
+			event.preventDefault();
+			scope.send({ type: "HIGHLIGHT.FIRST" });
+			break;
+		case "End":
+			event.preventDefault();
+			scope.send({ type: "HIGHLIGHT.LAST" });
+			break;
+		case "Enter":
+			event.preventDefault();
+			scope.send({
+				type: "ITEM.SELECT",
+				value: scope.context.highlightedValue
+			});
+			break;
+		case "Escape":
+			event.preventDefault();
+			scope.send({ type: "CLOSE" });
+	}
+}
+const def = {
+	name: "theme-picker",
+	machine: (args, authored) => themePicker$1(args, authored),
+	start: "closed",
+	scalars: ["storageKey", "syncDocument"],
+	reconcile: ({ context, parsed, send }) => {
+		if (parsed["themes"] === void 0) {
+			if (context.themes.length > 0) return false;
+			const discovered = discoverRuntimeThemes();
+			if (discovered.length === 0) return false;
+			send({
+				type: "THEMES.SET",
+				themes: discovered.map((item) => ({
+					value: item.value,
+					label: item.label,
+					modes: [...item.modes],
+					disabled: item.disabled
+				}))
+			});
+			return true;
+		}
+		const next = parseThemes(parsed["themes"]);
+		if (next === null) return false;
+		if (next.length === context.themes.length && next.every((item, index) => {
+			const current = context.themes[index];
+			return current !== void 0 && current.value === item.value && current.label === item.label && current.disabled === item.disabled;
+		})) return false;
+		send({
+			type: "THEMES.SET",
+			themes: next.map((item) => ({
+				value: item.value,
+				label: item.label,
+				modes: [...item.modes],
+				disabled: item.disabled
+			}))
+		});
+		return true;
+	},
+	parts: {
+		root: { attrs: () => ({}) },
+		trigger: { attrs: (scope) => {
+			const open = scope.state === "open";
+			return {
+				type: "button",
+				...disclosureTrigger(scope, {
+					expanded: open,
+					hasPopup: "listbox",
+					controls: { part: "content" }
+				}),
+				onClick: () => scope.send({ type: "TRIGGER.CLICK" }),
+				onKeyDown: (event) => onTriggerKeydown(scope, event)
+			};
+		} },
+		triggerLabel: { attrs: () => ({}) },
+		triggerSwatch: { attrs: (scope) => ({ "data-swatch-theme": scope.context.value }) },
+		triggerIndicator: { attrs: () => ({ ...ariaHidden(true) }) },
+		positioner: { attrs: (scope) => {
+			return {
+				"use:anchor": {
+					placement: "bottom",
+					offset: 8
+				},
+				hidden: !(scope.state === "open") ? true : void 0
+			};
+		} },
+		content: { attrs: (scope) => {
+			const open = scope.state === "open";
+			const ctx = scope.context;
+			return {
+				role: "listbox",
+				...listSurface(scope, { activeDescendant: ctx.highlightedValue.length > 0 ? {
+					part: "item",
+					slot: ctx.highlightedValue
+				} : void 0 }),
+				hidden: !open ? true : void 0,
+				tabIndex: 0,
+				onKeyDown: (event) => onContentKeydown(scope, event),
+				"use:dismissable": {
+					onOutside: () => scope.send({ type: "CLOSE" }),
+					onEscape: () => scope.send({ type: "CLOSE" })
+				}
+			};
+		} },
+		list: { attrs: () => ({ role: "group" }) }
+	},
+	slots: {
+		item: {
+			indexes: (context) => context.themes,
+			attrs: (scope) => {
+				const row = scope.slot;
+				const selected = scope.context.value === row.value;
+				return {
+					id: scope.id("item", row.value),
+					role: "option",
+					...optionRow({ selected: selected ? "true" : "false" }),
+					"data-value": row.value,
+					"aria-disabled": row.disabled ? "true" : void 0,
+					onClick: () => {
+						if (row.disabled) return;
+						scope.send({
+							type: "ITEM.SELECT",
+							value: row.value
+						});
+					},
+					onPointermove: () => {
+						if (row.disabled) return;
+						scope.send({
+							type: "HIGHLIGHT.SET",
+							value: row.value
+						});
+					}
+				};
+			}
+		},
+		itemLabel: {
+			indexes: (context) => context.themes,
+			attrs: () => ({})
+		},
+		itemSwatch: {
+			indexes: (context) => context.themes,
+			attrs: (scope) => ({ "data-swatch-theme": scope.slot.value })
+		},
+		itemIndicator: {
+			indexes: (context) => context.themes,
+			attrs: () => ({ ...ariaHidden(true) })
+		}
+	},
+	commands: {
+		select: { event: ([value]) => ({
+			type: "ITEM.SELECT",
+			value
+		}) },
+		setValue: { event: ([value]) => ({
+			type: "VALUE.SET",
+			value
+		}) },
+		setThemes: { event: ([themes]) => ({
+			type: "THEMES.SET",
+			themes
+		}) }
+	},
+	readers: {
+		open: { read: (_context, state) => state === "open" },
+		value: { read: (context) => context.value },
+		highlightedValue: { read: (context) => context.highlightedValue },
+		items: { read: (context) => context.themes },
+		selectedItem: { read: (context) => selectedItem(context) },
+		empty: { read: (context) => context.themes.length === 0 }
+	},
+	methods: {
+		getItemState: { call: (context, _state, [item]) => {
+			const row = item ?? {
+				value: "",
+				label: "",
+				modes: [],
+				disabled: true,
+				index: -1
+			};
+			return {
+				value: row.value,
+				selected: context.value === row.value,
+				highlighted: context.highlightedValue === row.value,
+				disabled: row.disabled,
+				dualMode: row.modes.length > 1
+			};
+		} },
+		getItems: { call: (context) => context.themes }
+	},
+	events: {
+		"value-change": {
+			prop: "onValueChange",
+			watch: (context) => [context.value],
+			detail: (watched, _event, _props, context) => ({
+				value: watched[0],
+				item: context === void 0 ? {
+					value: watched[0],
+					label: watched[0],
+					modes: ["light", "dark"],
+					disabled: false,
+					index: 0
+				} : selectedItem(context)
+			})
+		},
+		"open-change": {
+			prop: "onOpenChange",
+			watch: (_context, state) => [state],
+			detail: (watched) => ({ open: watched[0] === "open" })
+		}
+	},
+	establish: (props) => {
+		const out = [];
+		if (props["syncDocument"] !== false && typeof localStorage !== "undefined") {
+			const key = typeof props["storageKey"] === "string" && props["storageKey"].length > 0 ? props["storageKey"] : "spin:theme";
+			try {
+				const stored = localStorage.getItem(key);
+				if (typeof stored === "string" && stored.length > 0) out.push({
+					type: "VALUE.SET",
+					value: stored
+				});
+			} catch {}
+		}
+		return out;
+	},
+	settled: ({ after, before, event, focus, id, props, root, send }) => {
+		const node = root();
+		if (props["themes"] === void 0 && after.context.themes.length === 0) {
+			const discovered = discoverRuntimeThemes(node);
+			if (discovered.length > 0) send({
+				type: "THEMES.SET",
+				themes: discovered
+			});
+		}
+		if (before.state !== after.state) {
+			if (after.state === "open") focus("content");
+			else {
+				const active = (node.ownerDocument ?? void 0)?.activeElement ?? null;
+				if (event.type === "ITEM.SELECT" || active instanceof Element && active.id !== id("trigger") && node.contains(active)) focus("trigger");
+			}
+		}
+		if (props["syncDocument"] === false) return;
+		try {
+			const rootEl = (node.ownerDocument ?? void 0)?.documentElement;
+			if (rootEl !== void 0) {
+				const stored = localStorage.getItem(after.context.storageKey);
+				if (after.context.value.length > 0) rootEl.dataset["theme"] = after.context.value;
+				else if (stored !== null && stored.length > 0) send({
+					type: "VALUE.SET",
+					value: stored
+				});
+				else {
+					const documented = rootEl.dataset["theme"];
+					if (typeof documented === "string" && documented.length > 0) send({
+						type: "VALUE.SET",
+						value: documented
+					});
+				}
+				localStorage.setItem(after.context.storageKey, after.context.value);
+			}
+		} catch {}
+	}
+};
+const themePicker = defineComponent(def);
+export { def, themePicker };
+
+//# sourceMappingURL=theme-picker.presentation.js.map

package/dist/theme-picker/theme-picker.state.d.ts

@@ -0,0 +1,40 @@
+export interface ThemePickerItem {
+  readonly value: string;
+  readonly label: string;
+  readonly modes: readonly string[];
+  readonly disabled: boolean;
+  readonly index: number;
+}
+export type ThemePickerThemeArg = string | {
+  readonly value: string;
+  readonly label?: string;
+  readonly modes?: readonly string[];
+  readonly disabled?: boolean;
+};
+export interface ThemePickerArgs {
+  readonly value?: string;
+  readonly defaultValue?: string;
+  readonly themes?: readonly ThemePickerThemeArg[] | string;
+  readonly open?: boolean;
+  readonly storageKey?: string;
+  readonly syncDocument?: boolean;
+}
+export interface ThemePickerContext {
+  readonly value: string;
+  readonly themes: readonly ThemePickerItem[];
+  readonly highlightedValue: string;
+  readonly storageKey: string;
+  readonly syncDocument: boolean;
+}
+export type ThemePickerState = "closed" | "open";
+export declare function parseThemes(raw: unknown): ThemePickerItem[] | null;
+/**
+ * The themes the stylesheet serves, read from the CSS the app generated.
+ * `--spin-themes` names them; each `[data-theme="<name>"]` block carries
+ * its own `--spin-modes`. A stylesheet the preset did not generate (or one
+ * the browser cannot read) answers nothing, and the caller falls back to
+ * the authored themes.
+ */
+export declare function discoverRuntimeThemes(root?: Element): ThemePickerItem[];
+export declare function initial(args: ThemePickerArgs, authored: (name: string) => boolean): ThemePickerContext;
+//# sourceMappingURL=theme-picker.state.d.ts.map

package/dist/theme-picker/theme-picker.state.js

@@ -0,0 +1,108 @@
+// src/theme-picker/theme-picker.state.ts
+function parseThemeArg(raw, index) {
+	if (typeof raw === "string" && raw.length > 0) return {
+		value: raw,
+		label: raw,
+		modes: ["light", "dark"],
+		disabled: false,
+		index
+	};
+	if (typeof raw === "object" && raw !== null) {
+		const record = raw;
+		const value = record["value"];
+		if (typeof value !== "string" || value.length === 0) return null;
+		const label = record["label"];
+		const modes = record["modes"];
+		return {
+			value,
+			label: typeof label === "string" && label.length > 0 ? label : value,
+			modes: Array.isArray(modes) ? modes.filter((m) => typeof m === "string" && m.length > 0) : ["light", "dark"],
+			disabled: record["disabled"] === true,
+			index
+		};
+	}
+	return null;
+}
+function parseThemes(raw) {
+	if (typeof raw === "string") {
+		try {
+			const parsed = JSON.parse(raw);
+			if (Array.isArray(parsed)) {
+				const out = [];
+				parsed.forEach((entry, index) => {
+					const item = parseThemeArg(entry, index);
+					if (item !== null) out.push(item);
+				});
+				return out;
+			}
+		} catch {}
+		return raw.split(/[\s,]+/).filter((n) => n.length > 0).map((value, index) => ({
+			value,
+			label: value,
+			modes: ["light", "dark"],
+			disabled: false,
+			index
+		}));
+	}
+	if (!Array.isArray(raw)) return null;
+	const out = [];
+	raw.forEach((entry, index) => {
+		const item = parseThemeArg(entry, index);
+		if (item !== null) out.push(item);
+	});
+	return out;
+}
+/**
+* The themes the stylesheet serves, read from the CSS the app generated.
+* `--spin-themes` names them; each `[data-theme="<name>"]` block carries
+* its own `--spin-modes`. A stylesheet the preset did not generate (or one
+* the browser cannot read) answers nothing, and the caller falls back to
+* the authored themes.
+*/
+function discoverRuntimeThemes(root) {
+	if (typeof document === "undefined") return [];
+	const node = root ?? document.documentElement;
+	const named = getComputedStyle(node).getPropertyValue("--spin-themes").trim().split(/\s+/).filter((n) => n.length > 0);
+	if (named.length === 0) return [];
+	return named.map((value, index) => {
+		const probe = document.createElement("div");
+		probe.setAttribute("data-theme", value);
+		probe.style.position = "absolute";
+		probe.style.visibility = "hidden";
+		node.appendChild(probe);
+		const modes = getComputedStyle(probe).getPropertyValue("--spin-modes").trim().split(/\s+/).filter((m) => m.length > 0);
+		probe.remove();
+		return {
+			value,
+			label: value,
+			modes: modes.length > 0 ? modes : ["light", "dark"],
+			disabled: false,
+			index
+		};
+	});
+}
+function readStored(storageKey) {
+	try {
+		const raw = localStorage.getItem(storageKey);
+		return typeof raw === "string" && raw.length > 0 ? raw : null;
+	} catch {
+		return null;
+	}
+}
+function initial(args, authored) {
+	const written = (field) => authored(field) || args[field] !== void 0;
+	const parsed = parseThemes(args.themes) ?? [];
+	const value = written("value") || written("defaultValue") ? typeof args.value === "string" && args.value.length > 0 ? args.value : typeof args.defaultValue === "string" && args.defaultValue.length > 0 ? args.defaultValue : "" : "";
+	const storageKey = typeof args.storageKey === "string" && args.storageKey.length > 0 ? args.storageKey : "spin:theme";
+	const seeded = (typeof localStorage !== "undefined" ? readStored(storageKey) : null) ?? value;
+	return {
+		value: seeded,
+		themes: parsed,
+		highlightedValue: seeded,
+		storageKey,
+		syncDocument: written("syncDocument") ? args.syncDocument !== false : true
+	};
+}
+export { discoverRuntimeThemes, initial, parseThemes };
+
+//# sourceMappingURL=theme-picker.state.js.map

package/dist/theme-picker/theme-picker.transitions.d.ts

@@ -0,0 +1,17 @@
+import { ThemePickerContext } from "./theme-picker.state.js";
+import { ThemePickerEvents } from "./theme-picker.events.js";
+import { AssignFor, GuardFor } from "@spinjs/runtime/fsm";
+type ThemePickerAssign<K extends keyof ThemePickerEvents = keyof ThemePickerEvents> = AssignFor<ThemePickerContext, ThemePickerEvents, K>;
+type ThemePickerGuard<K extends keyof ThemePickerEvents = keyof ThemePickerEvents> = GuardFor<ThemePickerContext, ThemePickerEvents, K>;
+export declare const moveNext: ThemePickerAssign<"HIGHLIGHT.NEXT">;
+export declare const movePrev: ThemePickerAssign<"HIGHLIGHT.PREV">;
+export declare const moveFirst: ThemePickerAssign<"HIGHLIGHT.FIRST">;
+export declare const moveLast: ThemePickerAssign<"HIGHLIGHT.LAST">;
+export declare const setHighlight: ThemePickerAssign<"HIGHLIGHT.SET">;
+export declare const selectItem: ThemePickerAssign<"ITEM.SELECT">;
+export declare const setValue: ThemePickerAssign<"VALUE.SET">;
+export declare const setThemes: ThemePickerAssign<"THEMES.SET">;
+export declare const selectEnabled: ThemePickerGuard<"ITEM.SELECT">;
+export declare const hasEnabled: ThemePickerGuard;
+export {};
+//# sourceMappingURL=theme-picker.transitions.d.ts.map