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

package/dist/menu/menu.state.d.ts

@@ -0,0 +1,54 @@
+export interface MenuItemData {
+  readonly value: string;
+  readonly label: string;
+  readonly shortcut?: string | undefined;
+  readonly disabled?: boolean | undefined;
+  readonly checked?: boolean | undefined;
+  readonly children?: readonly MenuEntry[] | undefined;
+}
+export interface MenuSeparatorData {
+  readonly separator: true;
+}
+export interface MenuGroupData {
+  readonly group: string;
+  readonly items: readonly MenuEntry[];
+}
+export type MenuEntry = MenuItemData | MenuSeparatorData | MenuGroupData;
+export interface MenuRow {
+  readonly value: string;
+  readonly label: string;
+  readonly shortcut: string;
+  readonly disabled: boolean;
+  readonly checked: boolean | undefined;
+  readonly children: readonly MenuEntry[];
+}
+export interface MenuBlock {
+  readonly id: string;
+  readonly label: string | null;
+  readonly rows: readonly MenuRow[];
+  readonly separator: boolean;
+}
+export interface MenuArgs {
+  items?: string | readonly MenuEntry[];
+  loopFocus?: boolean;
+  closeOnSelect?: boolean;
+  typeahead?: boolean;
+  composite?: boolean;
+}
+export type MenuState = "closed" | "open";
+export interface MenuContext {
+  highlightedValue: string | null;
+  openSubmenu: string | null;
+  anchorPoint: {
+    x: number;
+    y: number;
+  } | null;
+  loopFocus: boolean;
+  closeOnSelect: boolean;
+  typeahead: boolean;
+  composite: boolean;
+  readonly entries: readonly MenuEntry[];
+}
+export declare function entriesOf(raw: unknown): readonly MenuEntry[];
+export declare function initial(args?: MenuArgs, _authored?: (name: string) => boolean): MenuContext;
+//# sourceMappingURL=menu.state.d.ts.map

package/dist/menu/menu.state.js

@@ -0,0 +1,55 @@
+import { coerceJsonArray, isRecord } from "@spinjs/runtime";
+// src/menu/menu.state.ts
+function parseEntry(raw) {
+	if (!isRecord(raw)) return void 0;
+	const record = raw;
+	if (record["separator"] === true) return { separator: true };
+	const group = record["group"];
+	const items = record["items"];
+	if (typeof group === "string" && Array.isArray(items)) return {
+		group,
+		items: items.flatMap((item) => {
+			const entry = parseEntry(item);
+			return entry === void 0 ? [] : [entry];
+		})
+	};
+	const value = record["value"];
+	const label = record["label"];
+	if (typeof value !== "string" || typeof label !== "string") return void 0;
+	const row = {
+		value,
+		label
+	};
+	if (typeof record["shortcut"] === "string") row.shortcut = record["shortcut"];
+	if (typeof record["disabled"] === "boolean") row.disabled = record["disabled"];
+	if (typeof record["checked"] === "boolean") row.checked = record["checked"];
+	if (Array.isArray(record["children"])) row.children = record["children"].flatMap((child) => {
+		const entry = parseEntry(child);
+		return entry === void 0 ? [] : [entry];
+	});
+	return row;
+}
+function entriesOf(raw) {
+	const source = Array.isArray(raw) ? raw : typeof raw === "string" ? coerceJsonArray(raw, []) : [];
+	const entries = [];
+	for (const item of source) {
+		const entry = parseEntry(item);
+		if (entry !== void 0) entries.push(entry);
+	}
+	return entries;
+}
+function initial(args = {}, _authored = () => false) {
+	return {
+		highlightedValue: null,
+		openSubmenu: null,
+		anchorPoint: null,
+		loopFocus: args.loopFocus === true,
+		closeOnSelect: args.closeOnSelect ?? true,
+		typeahead: args.typeahead ?? true,
+		composite: args.composite ?? true,
+		entries: entriesOf(args.items)
+	};
+}
+export { entriesOf, initial };
+
+//# sourceMappingURL=menu.state.js.map

package/dist/mode-picker/examples/basic.html

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { modePicker } from "../mode-picker.presentation.js";
+
+const machine = modePicker({ defaultValue: "system" });
+</script>
+
+<button
+  class={["bare inline-flex items-center justify-center rounded-lg border border-solid border-border bg-surface p-1 text-sm text-text transition-colors hover:bg-surface-raised", { "opacity-50 cursor-not-allowed": machine.disabled }]}
+  {...machine.getTriggerProps()}
+>
+  <span class="inline-flex h-4 w-4 items-center justify-center" {...machine.getIconProps()}>
+    <span class="inline-block i-lucide-sun icon-sm" show={machine.singleMode ? machine.resolvedMode === "light" : machine.next === "light"}></span>
+    <span class="inline-block i-lucide-moon icon-sm" show={machine.singleMode ? machine.resolvedMode === "dark" : machine.next === "dark"}></span>
+    <span class="inline-block i-lucide-monitor icon-sm" show={!machine.singleMode && machine.next === "system"}></span>
+  </span>
+  <span class="sr-only">{machine.label}</span>
+</button>

package/dist/mode-picker/examples/minimal.html

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { modePicker } from "../mode-picker.presentation.js";
+
+const machine = modePicker({ hideWhenSingle: true, defaultValue: "system" });
+</script>
+
+<button
+  class={["bare inline-flex h-8 w-8 items-center justify-center rounded-md text-text-muted transition-colors hover:bg-surface hover:text-text", { "opacity-50 cursor-not-allowed": machine.disabled }]}
+  {...machine.getTriggerProps()}
+>
+  <span class="inline-flex h-4 w-4 items-center justify-center" {...machine.getIconProps()}>
+    <span class="inline-block i-lucide-sun h-4 w-4" show={machine.singleMode ? machine.resolvedMode === "light" : machine.next === "light"}></span>
+    <span class="inline-block i-lucide-moon h-4 w-4" show={machine.singleMode ? machine.resolvedMode === "dark" : machine.next === "dark"}></span>
+    <span class="inline-block i-lucide-monitor h-4 w-4" show={!machine.singleMode && machine.next === "system"}></span>
+  </span>
+  <span class="sr-only">{machine.label}</span>
+</button>

package/dist/mode-picker/examples/pill.html

@@ -0,0 +1,17 @@
+<script lang="ts">
+import { modePicker } from "../mode-picker.presentation.js";
+
+const machine = modePicker({ defaultValue: "system" });
+</script>
+
+<button
+  class={["bare inline-flex items-center gap-2 rounded-full border border-solid border-border bg-surface px-3 py-1 text-sm text-text transition-colors hover:bg-surface-raised", { "opacity-50 cursor-not-allowed": machine.disabled }]}
+  {...machine.getTriggerProps()}
+>
+  <span class="inline-flex h-4 w-4 items-center justify-center" {...machine.getIconProps()}>
+    <span class="inline-block i-lucide-sun h-4 w-4" show={machine.singleMode ? machine.resolvedMode === "light" : machine.value === "light"}></span>
+    <span class="inline-block i-lucide-moon h-4 w-4" show={machine.singleMode ? machine.resolvedMode === "dark" : machine.value === "dark"}></span>
+    <span class="inline-block i-lucide-monitor h-4 w-4" show={!machine.singleMode && machine.value === "system"}></span>
+  </span>
+  <span {...machine.getLabelProps()}>{machine.singleMode ? machine.resolvedMode : machine.value}</span>
+</button>

package/dist/mode-picker/mode-picker.events.d.ts

@@ -0,0 +1,20 @@
+import { ModeChoice, ResolvedMode } from "./mode-picker.state.js";
+import { EventUnion } from "@spinjs/runtime/fsm";
+export interface ModePickerEvents {
+  "CYCLE": {};
+  "VALUE.SET": {
+    readonly value: ModeChoice;
+  };
+  "MODES.SET": {
+    readonly modes: readonly string[] | string;
+  };
+  "SYSTEM.SET": {
+    readonly systemMode: ResolvedMode;
+  };
+}
+export type ModePickerEvent = EventUnion<ModePickerEvents>;
+export type ModePickerValueChange = {
+  readonly value: ModeChoice;
+  readonly resolvedMode: ResolvedMode;
+};
+//# sourceMappingURL=mode-picker.events.d.ts.map

package/dist/mode-picker/mode-picker.events.js

@@ -0,0 +1 @@
+export {};

package/dist/mode-picker/mode-picker.machine.d.ts

@@ -0,0 +1,5 @@
+import { ModePickerArgs, ModePickerContext, ModePickerState } from "./mode-picker.state.js";
+import { ModePickerEvents } from "./mode-picker.events.js";
+import { Machine } from "@spinjs/runtime/fsm";
+export declare function modePicker(args?: ModePickerArgs, authored?: (name: string) => boolean): Machine<ModePickerContext, ModePickerEvents, ModePickerState>;
+//# sourceMappingURL=mode-picker.machine.d.ts.map

package/dist/mode-picker/mode-picker.machine.js

@@ -0,0 +1,29 @@
+import { initial } from "./mode-picker.state.js";
+import { canCycle, cycle, setModes, setSystem, setValue } from "./mode-picker.transitions.js";
+import { createMachine } from "@spinjs/runtime/fsm";
+// src/mode-picker/mode-picker.machine.ts
+/** Mode-picker machine: a single idle state cycling light → dark → system. */
+function modePicker(args = {}, authored = () => false) {
+	return createMachine({
+		id: "mode-picker",
+		initial: "idle",
+		context: initial(args, authored),
+		fields: {
+			value: { event: "VALUE.SET" },
+			modes: { event: "MODES.SET" },
+			systemMode: { event: "SYSTEM.SET" }
+		},
+		states: { idle: { on: {
+			CYCLE: {
+				cond: canCycle,
+				assign: cycle
+			},
+			"VALUE.SET": { assign: setValue },
+			"MODES.SET": { assign: setModes },
+			"SYSTEM.SET": { assign: setSystem }
+		} } }
+	});
+}
+export { modePicker };
+
+//# sourceMappingURL=mode-picker.machine.js.map

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

@@ -0,0 +1,129 @@
+import { ModeChoice, ModePickerArgs, ModePickerContext, ResolvedMode } from "./mode-picker.state.js";
+import { ModePickerEvents, ModePickerValueChange } from "./mode-picker.events.js";
+import { ApiOf, ViewFor } from "@spinjs/runtime";
+type Ctx = ModePickerContext;
+type ScopeLike = ViewFor<ModePickerContext, ModePickerEvents, "idle">;
+export declare const def: {
+  name: string;
+  machine: (args: ModePickerArgs, authored: (name: string) => boolean) => import("@spinjs/runtime").Machine<ModePickerContext, ModePickerEvents, "idle">;
+  start: "idle";
+  scalars: string[];
+  parts: {
+    root: {
+      attrs: (scope: ScopeLike) => {
+        "data-mode": ResolvedMode;
+        "data-choice": ModeChoice;
+        "data-single-mode": string | undefined;
+        hidden: boolean | undefined;
+      };
+    };
+    trigger: {
+      attrs: (scope: ScopeLike) => {
+        type: string;
+        disabled: boolean | undefined;
+        hidden: boolean | undefined;
+        "aria-label": string;
+        title: string;
+        "data-mode": ModeChoice;
+        "data-resolved-mode": ResolvedMode;
+        "data-single-mode": string | undefined;
+        onClick: () => void;
+      };
+    };
+    icon: {
+      attrs: (scope: ScopeLike) => {
+        "data-mode": ModeChoice;
+        "data-resolved-mode": ResolvedMode;
+      };
+    };
+    label: {
+      attrs: (scope: ScopeLike) => {
+        "data-mode": ModeChoice;
+      };
+    };
+  };
+  commands: {
+    cycle: {
+      event: () => {
+        type: "CYCLE";
+      };
+    };
+    setValue: {
+      event: ([value]: [value: ModeChoice]) => {
+        type: "VALUE.SET";
+        value: ModeChoice;
+      };
+    };
+    setModes: {
+      event: ([modes]: [modes: readonly string[] | string]) => {
+        type: "MODES.SET";
+        modes: string | readonly string[];
+      };
+    };
+  };
+  readers: {
+    value: {
+      read: (context: Ctx) => ModeChoice;
+    };
+    resolvedMode: {
+      read: (context: Ctx) => ResolvedMode;
+    };
+    modes: {
+      read: (context: Ctx) => readonly string[];
+    };
+    singleMode: {
+      read: (context: Ctx) => boolean;
+    };
+    disabled: {
+      read: (context: Ctx) => boolean;
+    };
+    hidden: {
+      read: (context: Ctx) => boolean;
+    };
+    label: {
+      read: (context: Ctx) => string;
+    };
+    next: {
+      read: (context: Ctx) => ModeChoice;
+    };
+  };
+  methods: {
+    getModes: {
+      call: (context: Ctx) => readonly string[];
+    };
+  };
+  events: {
+    "value-change": {
+      prop: string;
+      watch: (context: Ctx) => ("light" | "dark" | "system")[];
+      detail: (watched: readonly unknown[]) => {
+        value: ModeChoice;
+        resolvedMode: ResolvedMode;
+      };
+    };
+  };
+  establish: (props: Record<string, unknown>) => ({
+    type: string;
+  } & Record<string, unknown>)[];
+  settled: ({ after, props, root, send }: {
+    readonly event: import("@spinjs/runtime").AnyEvent;
+    readonly before: {
+      readonly context: ModePickerContext;
+      readonly state: "idle";
+    };
+    readonly after: {
+      readonly context: ModePickerContext;
+      readonly state: "idle";
+    };
+    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 ModePickerApi = ApiOf<typeof def>;
+export declare const modePicker: import("@spinjs/runtime").DefinedComponent<ModePickerApi, ModePickerArgs>;
+export type { ModeChoice, ModePickerArgs, ModePickerValueChange, ResolvedMode };
+//# sourceMappingURL=mode-picker.presentation.d.ts.map

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

@@ -0,0 +1,175 @@
+import { isSingleMode, nextModeChoice, readRuntimeModes, resolveEffectiveMode } from "./mode-picker.state.js";
+import { modePicker as modePicker$1 } from "./mode-picker.machine.js";
+import { ariaHidden, defineComponent } from "@spinjs/runtime";
+// src/mode-picker/mode-picker.presentation.ts
+function readStored(storageKey) {
+	try {
+		const raw = localStorage.getItem(storageKey);
+		return raw === "light" || raw === "dark" || raw === "system" ? raw : null;
+	} catch {
+		return null;
+	}
+}
+const observedRoots = /* @__PURE__ */ new WeakSet();
+function prefersDark() {
+	return typeof matchMedia === "function" && matchMedia("(prefers-color-scheme: dark)").matches;
+}
+function observeSystem(root, send) {
+	if (typeof matchMedia !== "function") return;
+	if (observedRoots.has(root)) return;
+	observedRoots.add(root);
+	const query = matchMedia("(prefers-color-scheme: dark)");
+	query.addEventListener("change", () => {
+		send({
+			type: "SYSTEM.SET",
+			systemMode: query.matches ? "dark" : "light"
+		});
+	});
+}
+const modesObservedRoots = /* @__PURE__ */ new WeakSet();
+function observeModes(root, send) {
+	if (typeof MutationObserver !== "function") return;
+	if (modesObservedRoots.has(root)) return;
+	modesObservedRoots.add(root);
+	const head = docOf(root)?.head;
+	if (head === void 0 || head === null) return;
+	new MutationObserver(() => {
+		const declared = readRuntimeModes(root);
+		if (declared.length > 0) send({
+			type: "MODES.SET",
+			modes: declared
+		});
+	}).observe(head, {
+		childList: true,
+		subtree: true,
+		characterData: true
+	});
+}
+/** The document the component lives in, via its own root — never the global. */
+function docOf(root) {
+	return root.ownerDocument ?? null;
+}
+function writeDocument(root, mode) {
+	const doc = docOf(root);
+	if (doc !== null) doc.documentElement.dataset["mode"] = mode;
+}
+const def = {
+	name: "mode-picker",
+	machine: (args, authored) => modePicker$1(args, authored),
+	start: "idle",
+	scalars: [
+		"hideWhenSingle",
+		"storageKey",
+		"syncDocument"
+	],
+	parts: {
+		root: { attrs: (scope) => {
+			const single = isSingleMode(scope.context.modes);
+			return {
+				"data-mode": resolveEffectiveMode(scope.context.value, scope.context.modes, scope.context.systemMode),
+				"data-choice": scope.context.value,
+				"data-single-mode": scope.attr(single),
+				hidden: scope.context.hideWhenSingle && single ? true : void 0
+			};
+		} },
+		trigger: { attrs: (scope) => {
+			const ctx = scope.context;
+			const single = isSingleMode(ctx.modes);
+			const resolved = resolveEffectiveMode(ctx.value, ctx.modes, ctx.systemMode);
+			return {
+				type: "button",
+				disabled: single ? true : void 0,
+				hidden: ctx.hideWhenSingle && single ? true : void 0,
+				"aria-label": single ? `Only ${ctx.modes[0] ?? "light"} mode` : `Switch to ${nextModeChoice(ctx.value)} mode`,
+				title: single ? `Only ${ctx.modes[0] ?? "light"} mode` : `Switch to ${nextModeChoice(ctx.value)} mode`,
+				"data-mode": ctx.value,
+				"data-resolved-mode": resolved,
+				"data-single-mode": scope.attr(single),
+				onClick: () => {
+					scope.send({ type: "CYCLE" });
+				}
+			};
+		} },
+		icon: { attrs: (scope) => {
+			const resolved = resolveEffectiveMode(scope.context.value, scope.context.modes, scope.context.systemMode);
+			return {
+				...ariaHidden(true),
+				"data-mode": scope.context.value,
+				"data-resolved-mode": resolved
+			};
+		} },
+		label: { attrs: (scope) => ({ "data-mode": scope.context.value }) }
+	},
+	commands: {
+		cycle: { event: () => ({ type: "CYCLE" }) },
+		setValue: { event: ([value]) => ({
+			type: "VALUE.SET",
+			value
+		}) },
+		setModes: { event: ([modes]) => ({
+			type: "MODES.SET",
+			modes
+		}) }
+	},
+	readers: {
+		value: { read: (context) => context.value },
+		resolvedMode: { read: (context) => resolveEffectiveMode(context.value, context.modes, context.systemMode) },
+		modes: { read: (context) => context.modes },
+		singleMode: { read: (context) => isSingleMode(context.modes) },
+		disabled: { read: (context) => isSingleMode(context.modes) },
+		hidden: { read: (context) => context.hideWhenSingle && isSingleMode(context.modes) },
+		label: { read: (context) => isSingleMode(context.modes) ? `Only ${context.modes[0] ?? "light"} mode` : `Switch to ${nextModeChoice(context.value)} mode` },
+		next: { read: (context) => nextModeChoice(context.value) }
+	},
+	methods: { getModes: { call: (context) => context.modes } },
+	events: { "value-change": {
+		prop: "onValueChange",
+		watch: (context) => [context.value, resolveEffectiveMode(context.value, context.modes, context.systemMode)],
+		detail: (watched) => ({
+			value: watched[0],
+			resolvedMode: watched[1]
+		})
+	} },
+	establish: (props) => {
+		const out = [];
+		if (props["syncDocument"] !== false && typeof localStorage !== "undefined") {
+			const stored = readStored(typeof props["storageKey"] === "string" && props["storageKey"].length > 0 ? props["storageKey"] : "spin:mode");
+			if (stored !== null) out.push({
+				type: "VALUE.SET",
+				value: stored
+			});
+		}
+		out.push({
+			type: "SYSTEM.SET",
+			systemMode: prefersDark() ? "dark" : "light"
+		});
+		return out;
+	},
+	settled: ({ after, props, root, send }) => {
+		const node = root();
+		observeSystem(node, send);
+		if (props["modes"] === void 0) {
+			observeModes(node, send);
+			const declared = readRuntimeModes(node);
+			const current = after.context.modes;
+			if (!(declared.length === current.length && declared.every((mode, index) => mode === current[index])) && declared.length > 0) send({
+				type: "MODES.SET",
+				modes: declared
+			});
+			else if (current.length === 0) send({
+				type: "MODES.SET",
+				modes: ["light", "dark"]
+			});
+		}
+		if (props["syncDocument"] === false) return;
+		const ctx = after.context;
+		writeDocument(node, resolveEffectiveMode(ctx.value, ctx.modes, ctx.systemMode));
+		try {
+			localStorage.setItem(ctx.storageKey, ctx.value);
+		} catch {}
+	}
+};
+const modePicker = defineComponent(def);
+export { def, modePicker };
+
+//# sourceMappingURL=mode-picker.presentation.js.map

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

@@ -0,0 +1,27 @@
+export type ModeChoice = "light" | "dark" | "system";
+export type ResolvedMode = "light" | "dark";
+export interface ModePickerArgs {
+  readonly value?: ModeChoice;
+  readonly defaultValue?: ModeChoice;
+  readonly modes?: readonly string[] | string;
+  readonly systemMode?: ResolvedMode;
+  readonly hideWhenSingle?: boolean;
+  readonly storageKey?: string;
+  readonly syncDocument?: boolean;
+}
+export interface ModePickerContext {
+  readonly value: ModeChoice;
+  readonly modes: readonly string[];
+  readonly systemMode: ResolvedMode;
+  readonly hideWhenSingle: boolean;
+  readonly storageKey: string;
+  readonly syncDocument: boolean;
+}
+export type ModePickerState = "idle";
+export declare const CYCLE_ORDER: readonly ModeChoice[];
+export declare function nextModeChoice(current: ModeChoice): ModeChoice;
+export declare function isSingleMode(modes: readonly string[]): boolean;
+export declare function resolveEffectiveMode(value: ModeChoice, modes: readonly string[], systemMode: ResolvedMode): ResolvedMode;
+export declare function readRuntimeModes(root?: Element): readonly string[];
+export declare function initial(args: ModePickerArgs, authored: (name: string) => boolean): ModePickerContext;
+//# sourceMappingURL=mode-picker.state.d.ts.map

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

@@ -0,0 +1,56 @@
+// src/mode-picker/mode-picker.state.ts
+const CYCLE_ORDER = [
+	"light",
+	"dark",
+	"system"
+];
+function nextModeChoice(current) {
+	if (current === "light") return "dark";
+	if (current === "dark") return "system";
+	return "light";
+}
+function isSingleMode(modes) {
+	return modes.length <= 1;
+}
+function resolveEffectiveMode(value, modes, systemMode) {
+	if (isSingleMode(modes)) return modes[0] === "dark" ? "dark" : "light";
+	if (value === "system") return systemMode;
+	return value;
+}
+function parseModes(raw) {
+	if (raw === void 0) return null;
+	if (typeof raw === "string") return raw.split(/[\s,]+/).filter((m) => m.length > 0);
+	return [...raw].filter((m) => m.length > 0);
+}
+function readRuntimeModes(root) {
+	if (typeof document === "undefined") return ["light", "dark"];
+	const node = root ?? document.documentElement;
+	const raw = getComputedStyle(node).getPropertyValue("--spin-modes").trim();
+	if (raw.length === 0) return [];
+	return raw.split(/\s+/).filter((m) => m.length > 0);
+}
+const VALID = [
+	"light",
+	"dark",
+	"system"
+];
+function parseChoice(raw) {
+	return typeof raw === "string" && VALID.includes(raw) ? raw : null;
+}
+function initial(args, authored) {
+	const written = (field) => authored(field) || args[field] !== void 0;
+	const value = written("value") ? parseChoice(args.value) ?? "system" : parseChoice(args.defaultValue) ?? "system";
+	const authoredModes = parseModes(args.modes);
+	const systemMode = args.systemMode === "dark" ? "dark" : "light";
+	return {
+		value,
+		modes: authoredModes ?? [],
+		systemMode,
+		hideWhenSingle: written("hideWhenSingle") ? args.hideWhenSingle === true : false,
+		storageKey: typeof args.storageKey === "string" && args.storageKey.length > 0 ? args.storageKey : "spin:mode",
+		syncDocument: written("syncDocument") ? args.syncDocument !== false : true
+	};
+}
+export { CYCLE_ORDER, initial, isSingleMode, nextModeChoice, readRuntimeModes, resolveEffectiveMode };
+
+//# sourceMappingURL=mode-picker.state.js.map

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

@@ -0,0 +1,11 @@
+import { ModePickerContext } from "./mode-picker.state.js";
+import { ModePickerEvents } from "./mode-picker.events.js";
+import { AssignFor } from "@spinjs/runtime/fsm";
+type ModePickerAssign<K extends keyof ModePickerEvents = keyof ModePickerEvents> = AssignFor<ModePickerContext, ModePickerEvents, K>;
+export declare const cycle: ModePickerAssign<"CYCLE">;
+export declare const setValue: ModePickerAssign<"VALUE.SET">;
+export declare const setModes: ModePickerAssign<"MODES.SET">;
+export declare const setSystem: ModePickerAssign<"SYSTEM.SET">;
+export declare const canCycle: (ctx: ModePickerContext) => boolean;
+export {};
+//# sourceMappingURL=mode-picker.transitions.d.ts.map

package/dist/mode-picker/mode-picker.transitions.js

@@ -0,0 +1,32 @@
+import { isSingleMode, nextModeChoice } from "./mode-picker.state.js";
+// src/mode-picker/mode-picker.transitions.ts
+const cycle = (ctx) => {
+	if (isSingleMode(ctx.modes)) return {};
+	return { value: nextModeChoice(ctx.value) };
+};
+const VALID = [
+	"light",
+	"dark",
+	"system"
+];
+const setValue = (_ctx, event) => {
+	const value = event.value;
+	if (typeof value !== "string" || !VALID.includes(value)) return {};
+	return { value };
+};
+const setModes = (ctx, event) => {
+	const raw = event.modes;
+	const next = typeof raw === "string" ? raw.split(/[\s,]+/).filter((m) => m.length > 0) : Array.isArray(raw) ? raw.filter((m) => typeof m === "string" && m.length > 0) : null;
+	if (next === null) return {};
+	const current = ctx.modes;
+	return next.length === current.length && next.every((mode, index) => mode === current[index]) ? {} : { modes: next };
+};
+const setSystem = (_ctx, event) => {
+	const mode = event.systemMode;
+	if (mode !== "light" && mode !== "dark") return {};
+	return { systemMode: mode };
+};
+const canCycle = (ctx) => !isSingleMode(ctx.modes);
+export { canCycle, cycle, setModes, setSystem, setValue };
+
+//# sourceMappingURL=mode-picker.transitions.js.map