@atom.io/spa-devtools 0.0.0-stage → 0.0.0

package/dist/index.js

@@ -0,0 +1,904 @@
+import { jsx } from "@atom.io/spa/jsx-runtime";
+import { onCleanup, onMount, render, useId, useSetter, useTimeline, useValue } from "@atom.io/spa";
+import { IMPLICIT, createRegularAtomFamily, disposeFromStore, findInStore, isReservedIntrospectionKey, setIntoStore } from "atom.io/internal";
+import { attachIntrospectionStates } from "atom.io/introspection";
+// src/store.ts
+const locals = /* @__PURE__ */ new WeakMap();
+const introspection = /* @__PURE__ */ new WeakMap();
+function ownedAtom(store, initial) {
+	let family = locals.get(store);
+	if (!family) {
+		family = createRegularAtomFamily(store, {
+			key: `🔍 spa devtools`,
+			default: void 0
+		});
+		locals.set(store, family);
+	}
+	const token = findInStore(store, family, useId());
+	setIntoStore(store, token, initial);
+	onCleanup(() => {
+		disposeFromStore(store, token);
+	});
+	return token;
+}
+function useLocal(store, initial) {
+	const token = ownedAtom(store, initial);
+	return [useValue(token), useSetter(token)];
+}
+function useSaved(store, key, fallback) {
+	let initial = fallback;
+	try {
+		const saved = JSON.parse(localStorage.getItem(key) ?? `null`);
+		if (saved !== null && typeof saved === typeof fallback) initial = saved;
+	} catch {}
+	const [value, set] = useLocal(store, initial);
+	return [value, (next) => {
+		set(next);
+		try {
+			localStorage.setItem(key, JSON.stringify(value()));
+		} catch {}
+	}];
+}
+function useTools(store) {
+	let states = introspection.get(store);
+	if (!states) {
+		states = attachIntrospectionStates(store);
+		introspection.set(store, states);
+	}
+	let expanded = {};
+	try {
+		const saved = JSON.parse(localStorage.getItem(`🔍 spa expanded`) ?? `{}`);
+		if (saved && typeof saved === `object` && !Array.isArray(saved) && Object.values(saved).every((value) => typeof value === `boolean`)) expanded = saved;
+	} catch {}
+	const error = ownedAtom(store, ``);
+	const setError = useSetter(error);
+	return {
+		...states,
+		store,
+		error,
+		expanded: ownedAtom(store, expanded),
+		attempt(run) {
+			try {
+				run();
+				setError(``);
+			} catch (caught) {
+				setError(caught instanceof Error ? caught.message : String(caught));
+			}
+		}
+	};
+}
+function useExpanded(tools, path, initial = false) {
+	const value = useValue(tools.expanded);
+	const set = useSetter(tools.expanded);
+	const key = JSON.stringify(path);
+	const group = `all:${JSON.stringify(path.slice(0, -1))}`;
+	const read = () => value()[key] ?? value()[group] ?? initial;
+	return [read, (event) => {
+		const next = !read();
+		set((previous) => {
+			const result = { ...previous };
+			if (event.shiftKey) {
+				const parent = JSON.stringify(path.slice(0, -1));
+				for (const item of Object.keys(result)) if (item.startsWith(`[`)) {
+					const candidate = JSON.parse(item);
+					if (JSON.stringify(candidate.slice(0, -1)) === parent) Reflect.deleteProperty(result, item);
+				}
+				result[group] = next;
+			} else result[key] = next;
+			try {
+				localStorage.setItem(`🔍 spa expanded`, JSON.stringify(result));
+			} catch {}
+			return result;
+		});
+	}];
+}
+// src/value.ts
+function kind(value) {
+	if (value === null) return `null`;
+	if (Array.isArray(value)) return `array`;
+	if (typeof value === `object` && (Object.getPrototypeOf(value) === Object.prototype || Object.getPrototypeOf(value) === null)) return `object`;
+	if (typeof value === `string` || typeof value === `number` || typeof value === `boolean`) return typeof value;
+	return `other`;
+}
+function describe(value) {
+	try {
+		const seen = /* @__PURE__ */ new WeakSet();
+		return JSON.stringify(value, (_, item) => {
+			if (typeof item === `bigint`) return `${item}n`;
+			if (item instanceof Error) return `${item.name}: ${item.message}`;
+			if (item instanceof Map) return { Map: [...item] };
+			if (item instanceof Set) return { Set: [...item] };
+			if (typeof item === `object` && item !== null) {
+				if (seen.has(item)) return `[Circular]`;
+				seen.add(item);
+			}
+			return item;
+		}) ?? String(value);
+	} catch {
+		return Object.prototype.toString.call(value);
+	}
+}
+function convert(value, type) {
+	switch (type) {
+		case `null`: return null;
+		case `string`: return value == null ? `` : typeof value === `string` ? value : describe(value);
+		case `number`: {
+			const next = Array.isArray(value) ? value.length : Number(value);
+			return Number.isFinite(next) ? next : 0;
+		}
+		case `boolean`: return typeof value === `string` ? value === `true` : Boolean(value);
+		case `array`: return Array.isArray(value) ? value : value == null ? [] : typeof value === `object` ? Object.entries(value) : [value];
+		case `object`: return kind(value) === `object` ? value : Array.isArray(value) ? Object.fromEntries(value.map((item, index) => [index, item])) : value == null ? {} : { value };
+	}
+}
+// src/JsonEditor.tsx
+const TYPES = [
+	`string`,
+	`number`,
+	`boolean`,
+	`null`,
+	`array`,
+	`object`
+];
+function JsonEditor(props) {
+	const [expanded, toggle] = useExpanded(props.tools, props.path);
+	const circular = () => (props.ancestors?.includes(props.value) ?? false) || props.path.length > 50;
+	const container = () => !circular() && (kind(props.value) === `object` || kind(props.value) === `array`);
+	const entries = () => Object.entries(props.value);
+	return jsx("section", {
+		"class": "json-editor",
+		get "data-testid"() {
+			return `${props.path.join(`.`)}-state-editor`;
+		},
+		children: [jsx("header", { children: [
+			() => container() ? jsx("button", {
+				"type": "button",
+				get "aria-label"() {
+					return `Expand ${props.path.at(-1)}`;
+				},
+				get "aria-expanded"() {
+					return expanded();
+				},
+				get "onClick"() {
+					return toggle;
+				},
+				children: () => expanded() ? `▾` : `▸`
+			}) : jsx("span", { "class": "carat-spacer" }),
+			jsx("span", {
+				"class": "field-name",
+				children: () => props.label
+			}),
+			() => props.change ? jsx("select", {
+				get "aria-label"() {
+					return `Type of ${props.path.at(-1)}`;
+				},
+				get "value"() {
+					return kind(props.value);
+				},
+				"onChange": (event) => {
+					const type = event.currentTarget.value;
+					props.tools.attempt(() => {
+						props.change?.((previous) => convert(previous, type));
+					});
+				},
+				children: [jsx("option", {
+					"value": "other",
+					"disabled": true,
+					children: "other"
+				}), () => TYPES.map((type) => jsx("option", {
+					get "value"() {
+						return type;
+					},
+					children: () => type
+				}))]
+			}) : jsx("small", { children: () => kind(props.value) }),
+			() => container() ? jsx("code", {
+				get "title"() {
+					return describe(props.value);
+				},
+				children: () => describe(props.value)
+			}) : circular() ? jsx("code", { children: "[Circular]" }) : jsx(Primitive, {
+				get "value"() {
+					return props.value;
+				},
+				get "change"() {
+					return props.change;
+				},
+				get "tools"() {
+					return props.tools;
+				},
+				get "label"() {
+					return props.path.at(-1) ?? `value`;
+				}
+			}),
+			() => props.actions
+		] }), () => container() && expanded() ? jsx("section", {
+			"class": "properties",
+			children: [() => entries().map(([key]) => jsx(Property, {
+				"key": key,
+				get "name"() {
+					return key;
+				},
+				get "editor"() {
+					return props;
+				}
+			})), () => props.change ? jsx("footer", { children: [jsx("button", {
+				"type": "button",
+				"onClick": () => {
+					props.tools.attempt(() => {
+						props.change?.((previous) => {
+							if (Array.isArray(previous)) return [...previous, null];
+							const object = previous;
+							let name = `new`;
+							while (Object.hasOwn(object, name)) name += `_`;
+							return {
+								...object,
+								[name]: null
+							};
+						});
+					});
+				},
+				children: ["add ", () => Array.isArray(props.value) ? `item` : `property`]
+			}), () => Array.isArray(props.value) ? jsx("button", {
+				"type": "button",
+				"onClick": () => {
+					props.tools.attempt(() => {
+						props.change?.((previous) => [...previous].sort((a, b) => typeof a === `number` && typeof b === `number` ? a - b : describe(a).localeCompare(describe(b))));
+					});
+				},
+				children: "sort"
+			}) : null] }) : null]
+		}) : null]
+	});
+}
+function Primitive(props) {
+	const set = (value) => {
+		props.tools.attempt(() => {
+			props.change?.(() => value);
+		});
+	};
+	return jsx("span", {
+		"class": "primitive",
+		children: () => kind(props.value) === `boolean` ? jsx("input", {
+			get "aria-label"() {
+				return props.label;
+			},
+			"type": "checkbox",
+			get "checked"() {
+				return Boolean(props.value);
+			},
+			get "disabled"() {
+				return !props.change;
+			},
+			"onChange": (event) => {
+				set(event.currentTarget.checked);
+			}
+		}) : kind(props.value) === `string` || kind(props.value) === `number` ? jsx("input", {
+			get "aria-label"() {
+				return props.label;
+			},
+			"type": "text",
+			get "inputmode"() {
+				return kind(props.value) === `number` ? `decimal` : `text`;
+			},
+			get "value"() {
+				return String(props.value);
+			},
+			get "readOnly"() {
+				return !props.change;
+			},
+			"onInput": (event) => {
+				const text = event.currentTarget.value;
+				if (kind(props.value) === `string`) set(text);
+				else if (text.trim() && Number.isFinite(Number(text))) set(Number(text));
+			},
+			"onBlur": (event) => {
+				event.currentTarget.value = String(props.value);
+			}
+		}) : jsx("code", { children: () => describe(props.value) })
+	});
+}
+function Property(props) {
+	const parent = props.editor;
+	const read = () => parent.value[props.name];
+	const change = (update) => {
+		parent.change?.((previous) => {
+			if (Array.isArray(previous)) return previous.map((value, index) => index === Number(props.name) ? update(value) : value);
+			const object = previous;
+			return {
+				...object,
+				[props.name]: update(object[props.name])
+			};
+		});
+	};
+	return jsx("section", {
+		"class": "property",
+		children: jsx(JsonEditor, {
+			get "label"() {
+				return parent.change && !Array.isArray(parent.value) ? jsx("input", {
+					get "aria-label"() {
+						return `Rename ${props.name}`;
+					},
+					get "style"() {
+						return `width:calc(${Math.max(1, props.name.length)}ch + 6px)`;
+					},
+					get "value"() {
+						return props.name;
+					},
+					"onChange": (event) => {
+						const input = event.currentTarget;
+						const name = input.value;
+						parent.tools.attempt(() => {
+							parent.change?.((previous) => {
+								const object = previous;
+								if (name !== props.name && Object.hasOwn(object, name)) throw new Error(`Property "${name}" already exists`);
+								return Object.fromEntries(Object.entries(object).map(([key, value]) => [key === props.name ? name : key, value]));
+							});
+						});
+						input.value = props.name;
+					}
+				}) : jsx("strong", { children: () => props.name });
+			},
+			get "actions"() {
+				return parent.change ? jsx("button", {
+					"type": "button",
+					get "aria-label"() {
+						return `Delete ${props.name}`;
+					},
+					"onClick": () => {
+						parent.tools.attempt(() => {
+							parent.change?.((previous) => Array.isArray(previous) ? previous.filter((_, index) => index !== Number(props.name)) : Object.fromEntries(Object.entries(previous).filter(([key]) => key !== props.name)));
+						});
+					},
+					children: "×"
+				}) : null;
+			},
+			get "tools"() {
+				return parent.tools;
+			},
+			get "path"() {
+				return [...parent.path, props.name];
+			},
+			get "value"() {
+				return read();
+			},
+			get "change"() {
+				return parent.change ? change : void 0;
+			},
+			get "ancestors"() {
+				return [...parent.ancestors ?? [], parent.value];
+			}
+		})
+	});
+}
+JsonEditor.spa = true;
+Primitive.spa = true;
+Property.spa = true;
+// src/Indexes.tsx
+function StateIndex(props) {
+	const index = useValue(props.type === `atoms` ? props.tools.atomIndex : props.tools.selectorIndex);
+	return jsx("article", {
+		"class": "index",
+		"data-testid": "state-index",
+		children: () => index().size === 0 ? jsx("p", { children: [
+			"(no ",
+			() => props.type,
+			")"
+		] }) : [...index().values()].map((node) => jsx(StateNode, {
+			"key": node.key,
+			get "tools"() {
+				return props.tools;
+			},
+			get "node"() {
+				return node;
+			}
+		}))
+	});
+}
+function StateNode(props) {
+	const [open, toggle] = useExpanded(props.tools, [props.node.key]);
+	return jsx("section", {
+		"class": "node",
+		get "data-testid"() {
+			return `state-${props.node.key}`;
+		},
+		children: () => `familyMembers` in props.node ? jsx(null, { children: [jsx("header", { children: [
+			jsx("button", {
+				"type": "button",
+				get "aria-expanded"() {
+					return open();
+				},
+				get "data-testid"() {
+					return `open-close-state-family-${props.node.key}`;
+				},
+				get "onClick"() {
+					return toggle;
+				},
+				children: () => open() ? `▾` : `▸`
+			}),
+			jsx("h2", { children: () => props.node.key }),
+			jsx("small", { children: "family" })
+		] }), () => open() ? [...props.node.familyMembers.values()].map((token) => jsx(StateLeaf, {
+			"key": token.key,
+			get "tools"() {
+				return props.tools;
+			},
+			get "token"() {
+				return token;
+			}
+		})) : null] }) : jsx(StateLeaf, {
+			get "tools"() {
+				return props.tools;
+			},
+			get "token"() {
+				return props.node;
+			}
+		})
+	});
+}
+function StateLeaf(props) {
+	const read = useValue(props.token);
+	const set = !props.token.type.startsWith(`readonly`) ? useSetter(props.token) : void 0;
+	const value = () => {
+		try {
+			return read();
+		} catch (error) {
+			return error;
+		}
+	};
+	return jsx("section", {
+		"class": "state-leaf",
+		get "data-testid"() {
+			return `state-value-${props.token.key}`;
+		},
+		children: jsx(JsonEditor, {
+			get "label"() {
+				return jsx("h3", { children: () => props.token.family?.subKey ?? props.token.key });
+			},
+			get "actions"() {
+				return props.token.family ? jsx("button", {
+					"type": "button",
+					get "aria-label"() {
+						return `Dispose ${props.token.key}`;
+					},
+					"onClick": () => {
+						props.tools.attempt(() => {
+							disposeFromStore(props.tools.store, props.token);
+						});
+					},
+					children: "×"
+				}) : null;
+			},
+			get "tools"() {
+				return props.tools;
+			},
+			get "value"() {
+				return value();
+			},
+			get "change"() {
+				return set ? (update) => {
+					const next = update(read());
+					set(() => next);
+				} : void 0;
+			},
+			get "path"() {
+				return props.token.family ? [props.token.family.key, props.token.family.subKey] : [props.token.key];
+			}
+		})
+	});
+}
+function TransactionIndex(props) {
+	const index = useValue(props.tools.transactionIndex);
+	const visible = () => index().filter((token) => !isReservedIntrospectionKey(token.key));
+	return jsx("article", {
+		"class": "index",
+		"data-testid": "transaction-index",
+		children: () => visible().length === 0 ? jsx("p", { children: "(no transactions)" }) : visible().map((token) => jsx(TransactionLog, {
+			"key": token.key,
+			get "tools"() {
+				return props.tools;
+			},
+			get "token"() {
+				return token;
+			}
+		}))
+	});
+}
+function TransactionLog(props) {
+	const log = useValue(findInStore(props.tools.store, props.tools.transactionLogSelectors, props.token.key));
+	const [open, toggle] = useExpanded(props.tools, [props.token.key]);
+	return jsx("section", {
+		"class": "node",
+		get "data-testid"() {
+			return `transaction-${props.token.key}`;
+		},
+		children: [jsx("header", { children: [
+			jsx("button", {
+				"type": "button",
+				get "aria-expanded"() {
+					return open();
+				},
+				get "data-testid"() {
+					return `open-close-transaction-${props.token.key}`;
+				},
+				get "onClick"() {
+					return toggle;
+				},
+				children: () => open() ? `▾` : `▸`
+			}),
+			jsx("h2", { children: () => props.token.key }),
+			jsx("small", { children: [
+				"(",
+				() => log().length,
+				")"
+			] })
+		] }), () => open() ? log().map((event, index) => jsx(EventView, {
+			"key": index,
+			get "tools"() {
+				return props.tools;
+			},
+			get "event"() {
+				return event;
+			},
+			get "index"() {
+				return index;
+			}
+		})) : null]
+	});
+}
+function EventView(props) {
+	const [open, toggle] = useExpanded(props.tools, [
+		`event`,
+		props.event.token?.key ?? ``,
+		String(props.index)
+	], true);
+	return jsx("section", {
+		"class": "event",
+		get "data-testid"() {
+			return `${props.event.type === `transaction_outcome` ? `transaction` : `timeline`}-update-${props.event.token?.key}-${props.index}`;
+		},
+		children: [jsx("header", { children: [
+			jsx("button", {
+				"type": "button",
+				get "aria-expanded"() {
+					return open();
+				},
+				get "onClick"() {
+					return toggle;
+				},
+				children: () => open() ? `▾` : `▸`
+			}),
+			jsx("strong", { children: () => props.event.token?.key }),
+			jsx("small", { children: () => props.event.type })
+		] }), () => open() ? props.event.type === `transaction_outcome` ? jsx(null, { children: [
+			jsx("p", { children: ["params: ", jsx("code", { children: () => describe(props.event.params) })] }),
+			jsx("p", { children: ["output: ", jsx("code", { children: () => describe(props.event.output) })] }),
+			jsx("section", {
+				"class": "impact",
+				children: () => props.event.subEvents.map((event, index) => jsx(EventView, {
+					"key": index,
+					get "tools"() {
+						return props.tools;
+					},
+					get "event"() {
+						return event;
+					},
+					get "index"() {
+						return index;
+					}
+				}))
+			})
+		] }) : props.event.update ? jsx("p", { children: [
+			jsx("del", { children: () => describe(props.event.update.oldValue) }),
+			" →",
+			` `,
+			jsx("ins", { children: () => describe(props.event.update.newValue) })
+		] }) : jsx("code", { children: () => describe(props.event) }) : null]
+	});
+}
+function TimelineIndex(props) {
+	const index = useValue(props.tools.timelineIndex);
+	const groups = () => {
+		const result = /* @__PURE__ */ new Map();
+		for (const token of index()) {
+			if (isReservedIntrospectionKey(token.key) || token.key.startsWith(`👁‍🗨`)) continue;
+			const key = token.family?.key ?? ``;
+			const members = result.get(key) ?? [];
+			members.push(token);
+			result.set(key, members);
+		}
+		return [...result];
+	};
+	return jsx("article", {
+		"class": "index",
+		"data-testid": "timeline-index",
+		children: () => groups().length === 0 ? jsx("p", { children: "(no timelines)" }) : groups().map(([family, members]) => jsx("section", {
+			"key": family,
+			get "data-testid"() {
+				return family ? `timeline-family-${family}` : void 0;
+			},
+			children: [() => family ? jsx("h2", { children: () => family }) : null, () => members.map((token) => jsx(TimelineLog, {
+				"key": token.key,
+				get "tools"() {
+					return props.tools;
+				},
+				get "token"() {
+					return token;
+				}
+			}))]
+		}))
+	});
+}
+function TimelineLog(props) {
+	const controls = useTimeline(props.token);
+	const log = useValue(findInStore(props.tools.store, props.tools.timelineSelectors, props.token.key));
+	const [open, toggle] = useExpanded(props.tools, [props.token.key]);
+	return jsx("section", {
+		"class": "node",
+		get "data-testid"() {
+			return `timeline-${props.token.key}`;
+		},
+		children: [jsx("header", { children: [
+			jsx("button", {
+				"type": "button",
+				get "aria-expanded"() {
+					return open();
+				},
+				get "data-testid"() {
+					return `open-close-timeline-${props.token.key}`;
+				},
+				get "onClick"() {
+					return toggle;
+				},
+				children: () => open() ? `▾` : `▸`
+			}),
+			jsx("h2", { children: () => props.token.family?.subKey ?? props.token.key }),
+			jsx("small", { children: [
+				"(",
+				() => controls().at,
+				"/",
+				() => controls().length,
+				")"
+			] }),
+			jsx("button", {
+				"type": "button",
+				get "disabled"() {
+					return controls().at === 0;
+				},
+				"onClick": () => {
+					props.tools.attempt(controls().undo);
+				},
+				children: "undo"
+			}),
+			jsx("button", {
+				"type": "button",
+				get "disabled"() {
+					return controls().at === controls().length;
+				},
+				"onClick": () => {
+					props.tools.attempt(controls().redo);
+				},
+				children: "redo"
+			})
+		] }), () => open() ? jsx("section", { children: [() => log().history.map((event, index) => jsx("section", {
+			"key": index,
+			children: [() => index === log().at ? jsx("p", {
+				"class": "you-are-here",
+				children: "you are here"
+			}) : null, jsx(EventView, {
+				get "tools"() {
+					return props.tools;
+				},
+				get "event"() {
+					return event;
+				},
+				get "index"() {
+					return index;
+				}
+			})]
+		})), () => log().at === log().history.length ? jsx("p", {
+			"class": "you-are-here",
+			children: "you are here"
+		}) : null] }) : null]
+	});
+}
+StateIndex.spa = true;
+StateNode.spa = true;
+StateLeaf.spa = true;
+TransactionIndex.spa = true;
+TransactionLog.spa = true;
+EventView.spa = true;
+TimelineIndex.spa = true;
+TimelineLog.spa = true;
+// src/AtomIODevtools.tsx
+/** Owns a rendering root in the inspected store, independently of its parent island. */
+function AtomIODevtools(props) {
+	let host = null;
+	const attach = (element) => {
+		host = element;
+	};
+	onMount(() => {
+		const store = props.store ?? IMPLICIT.STORE;
+		const root = render(() => jsx(Panel, {
+			get "store"() {
+				return store;
+			},
+			get "hideByDefault"() {
+				return props.hideByDefault ?? false;
+			}
+		}), host, { store });
+		onCleanup(root.dispose);
+	});
+	return jsx("spa-devtools", { get "ref"() {
+		return attach;
+	} });
+}
+const VIEWS = [
+	`atoms`,
+	`selectors`,
+	`transactions`,
+	`timelines`
+];
+function Panel(props) {
+	const tools = useTools(props.store);
+	const [hidden, setHidden] = useSaved(props.store, `🔍 Devtools Are Hidden`, props.hideByDefault);
+	const [open, setOpen] = useSaved(props.store, `🔍 Devtools Are Open`, true);
+	const [selection, setSelection] = useSaved(props.store, `🔍 Devtools View`, `atoms`);
+	const view = () => VIEWS.includes(selection()) ? selection() : `atoms`;
+	const [position, setPosition] = useLocal(props.store, {
+		x: 0,
+		y: 0
+	});
+	const error = useValue(tools.error);
+	let panel = null;
+	const attach = (element) => {
+		panel = element;
+	};
+	let drag;
+	onMount(() => {
+		const shortcut = (event) => {
+			if (event.ctrlKey && event.shiftKey && event.code === `KeyA`) {
+				event.preventDefault();
+				setHidden((value) => !value);
+			}
+		};
+		const reset = () => {
+			setPosition({
+				x: 0,
+				y: 0
+			});
+		};
+		document.addEventListener(`keydown`, shortcut);
+		window.addEventListener(`resize`, reset);
+		onCleanup(() => {
+			document.removeEventListener(`keydown`, shortcut);
+			window.removeEventListener(`resize`, reset);
+		});
+	});
+	return jsx("main", {
+		get "ref"() {
+			return attach;
+		},
+		"data-css": "spa-devtools",
+		"data-testid": "atom-io-devtools",
+		get "hidden"() {
+			return hidden();
+		},
+		get "data-open"() {
+			return open();
+		},
+		get "style"() {
+			return `transform:translate(${position().x}px,${position().y}px)`;
+		},
+		children: [jsx("header", {
+			"class": "toolbar",
+			children: [
+				jsx("button", {
+					"type": "button",
+					"class": "drag-handle",
+					"aria-label": "Move debugger",
+					"title": "Drag to move; arrow keys to nudge",
+					"onPointerdown": (event) => {
+						if (event.button !== 0) return;
+						drag = {
+							id: event.pointerId,
+							startX: event.clientX,
+							startY: event.clientY,
+							...position()
+						};
+						event.currentTarget.setPointerCapture(event.pointerId);
+					},
+					"onPointermove": (event) => {
+						if (!drag || drag.id !== event.pointerId || !panel) return;
+						const rect = panel.getBoundingClientRect();
+						const next = {
+							x: drag.x + event.clientX - drag.startX,
+							y: drag.y + event.clientY - drag.startY
+						};
+						next.x = Math.max(position().x - rect.left, Math.min(next.x, position().x + window.innerWidth - rect.right));
+						next.y = Math.max(position().y - rect.top, Math.min(next.y, position().y + window.innerHeight - rect.bottom));
+						setPosition(next);
+					},
+					"onPointerup": () => {
+						drag = void 0;
+					},
+					"onPointercancel": () => {
+						drag = void 0;
+					},
+					"onKeydown": (event) => {
+						const step = {
+							ArrowLeft: [-10, 0],
+							ArrowRight: [10, 0],
+							ArrowUp: [0, -10],
+							ArrowDown: [0, 10]
+						}[event.key];
+						if (step) {
+							event.preventDefault();
+							setPosition(({ x, y }) => ({
+								x: x + step[0],
+								y: y + step[1]
+							}));
+						}
+					},
+					children: "⠿"
+				}),
+				jsx("h1", { children: "atom.io" }),
+				() => open() ? jsx("nav", {
+					"aria-label": "Debugger views",
+					children: () => VIEWS.map((name) => jsx("button", {
+						"type": "button",
+						get "aria-pressed"() {
+							return view() === name;
+						},
+						get "data-testid"() {
+							return `view-${name}`;
+						},
+						"onClick": () => {
+							setSelection(name);
+						},
+						children: () => name
+					}))
+				}) : null,
+				jsx("button", {
+					"type": "button",
+					get "aria-label"() {
+						return open() ? `Minimize debugger` : `Open debugger`;
+					},
+					"data-testid": "open-close-devtools",
+					"onClick": () => {
+						setOpen((value) => !value);
+					},
+					children: () => open() ? `−` : `🔍`
+				}),
+				jsx("button", {
+					"type": "button",
+					"aria-label": "Hide debugger (Ctrl+Shift+A)",
+					"onClick": () => {
+						setHidden(true);
+					},
+					children: "×"
+				})
+			]
+		}), () => open() ? jsx(null, { children: [() => error() ? jsx("p", {
+			"role": "alert",
+			children: () => error()
+		}) : null, () => view() === `atoms` || view() === `selectors` ? jsx(StateIndex, {
+			"key": view(),
+			get "tools"() {
+				return tools;
+			},
+			get "type"() {
+				return view();
+			}
+		}) : view() === `transactions` ? jsx(TransactionIndex, { get "tools"() {
+			return tools;
+		} }) : jsx(TimelineIndex, { get "tools"() {
+			return tools;
+		} })] }) : null]
+	});
+}
+AtomIODevtools.spa = true;
+Panel.spa = true;
+export { AtomIODevtools };
+
+//# sourceMappingURL=index.js.map