opshot 0.1.0

package/README.md

@@ -0,0 +1,173 @@
+<p align="center"><img src="https://raw.githubusercontent.com/visionsofparadise/opshot/main/logo.svg" width="200" alt="The React logo holding a smoking revolver" /></p>
+
+# opshot
+
+Plain-object state for React: mutate it directly, re-render only the components that read what changed, and track every change operation.
+
+- **Self-contained**: a state carries its data, its methods, and its own subscription; pass it around like any object.
+- **Reactive reads**: components read plain properties, and reads are tracked per component: a component re-renders only when a property it read changes.
+- **Safe mutation**: write by mutating the actual object directly inside `mutate`.
+- **Ops events**: every mutation emits its changes as `{ do, undo }` JSON Patch pairs, ready for history, sync, and persistence.
+
+## Install
+
+```sh
+npm install opshot
+```
+
+## Quick start
+
+```tsx
+import { useCreateState } from "opshot/react";
+
+const Counter = () => {
+	const counter = useCreateState({ count: 0 });
+
+	// Mutate the object directly: assignments, push, delete all work.
+	const increment = () => counter.op.mutate((proxy) => proxy.count++);
+
+	return <button onClick={increment}>{counter.count}</button>;
+};
+```
+
+## Creating state
+
+```tsx
+import { ref } from "opshot";
+import { useCreateState } from "opshot/react";
+
+const Player = () => {
+	const player = useCreateState((mutate, get) => ({
+		position: 0,
+
+		// ref() keeps a value out of reactivity and ops.
+		element: ref(new Audio()),
+
+		// get() reads the current values.
+		seek: (position: number) => {
+			get().element.currentTime = position;
+
+			mutate((proxy) => (proxy.position = position));
+		},
+	}));
+
+	// ...
+};
+```
+
+## state.op
+
+Everything opshot attaches lives under one reserved key, `op`.
+
+```ts
+// The write path. An optional second argument is passed to every subscriber.
+counter.op.mutate((proxy) => {}, { transactionKey: "drag" });
+
+// Hears every op this state emits; returns an unsubscribe.
+const unsubscribe = counter.op.subscribe((state, ops, options) => {
+	// ...
+});
+
+// State references are not reliable for equality: every mutation produces a new one. Use this instead.
+counter.op.isSameState(other);
+
+// True while a mutate callback is running.
+counter.op.isMutating;
+
+// The current values as your plain object, op stripped: for serializing and reads outside render.
+counter.op.unwrap();
+
+// The underlying valtio proxy, typed object: an escape hatch.
+counter.op.proxy;
+```
+
+## Ops
+
+```ts
+const unsubscribe = counter.op.subscribe((state, ops, options) => {
+	// state: the snapshot these ops produced
+	// ops: [{
+	//   do:   { op: "replace", path: "/count", value: 1 },
+	//   undo: { op: "replace", path: "/count", value: 0 },
+	// }]
+});
+```
+
+An op is a pair of [RFC 6902](https://datatracker.ietf.org/doc/html/rfc6902) patch operations, each half carrying its own value, so any JSON Patch tool applies and inverts them.
+
+A subscriber must not write to the state it subscribes to; writing to a different state is fine.
+
+Ops cost nothing until someone listens: a state with no subscribers, on itself or its group, skips computing them entirely.
+
+## Groups
+
+A group creates states and hears every op from the states it created: one stream for history, sync, and persistence.
+
+```tsx
+import { useEffect } from "react";
+import { useCreateGroup, useCreateState } from "opshot/react";
+
+const Editor = () => {
+	// A lifetime-stable group.
+	const group = useCreateGroup();
+
+	// Created through the group, so its ops reach the group's subscribers.
+	const doc = useCreateState({ items: new Array<string>() }, group);
+
+	useEffect(
+		() =>
+			// Fires for doc and every other state the group created.
+			group.subscribe((state, ops, options) => {
+				// ...
+			}),
+		[group],
+	);
+
+	// ...
+};
+```
+
+## resnapshot
+
+A component re-renders when a property it read changes. Reads belong to the nearest subscribed component above them: `useCreateState` subscribes the component that created the state, and `resnapshot` subscribes the component it wraps.
+
+This is a lever for bounding re-renders. Here `CounterButton` is plain, so its `count` read belongs to `App`, and every click re-renders `App` and everything under it:
+
+```tsx
+import type { State } from "opshot";
+import { useCreateState } from "opshot/react";
+
+interface Counter {
+	title: string;
+	count: number;
+}
+
+// Every click re-renders App and its whole subtree.
+const App = () => {
+	const counter = useCreateState<Counter>({ title: "Hits", count: 0 });
+
+	return (
+		<>
+			<h1>{counter.title}</h1>
+			<CounterButton counter={counter} />
+		</>
+	);
+};
+
+const CounterButton = ({ counter }: { counter: State<Counter> }) => (
+	<button onClick={() => counter.op.mutate((proxy) => proxy.count++)}>{counter.count}</button>
+);
+```
+
+Wrapping `CounterButton` in `resnapshot` subscribes it, so its `count` read becomes its own. A click now re-renders `CounterButton` alone:
+
+```tsx
+import { resnapshot } from "opshot/react";
+
+// A click re-renders only CounterButton. A title change would still re-render App.
+const CounterButton = resnapshot<{ counter: State<Counter> }>(({ counter }) => (
+	<button onClick={() => counter.op.mutate((proxy) => proxy.count++)}>{counter.count}</button>
+));
+```
+
+Subscribed components re-render independently: had `App` also read `count`, both would re-render.

package/dist/index.d.ts

@@ -0,0 +1,47 @@
+import { Snapshot } from 'valtio/vanilla';
+export { Snapshot, ref } from 'valtio/vanilla';
+
+type PatchOperation = {
+    readonly op: "add";
+    readonly path: string;
+    readonly value: unknown;
+} | {
+    readonly op: "replace";
+    readonly path: string;
+    readonly value: unknown;
+} | {
+    readonly op: "remove";
+    readonly path: string;
+};
+interface Op {
+    readonly do: PatchOperation;
+    readonly undo: PatchOperation;
+}
+declare function diffSnapshots(before: unknown, after: unknown): Array<Op>;
+
+type MutateOptions = Record<string, unknown>;
+type Mutate<T extends object> = (callback: (proxy: T) => void, options?: MutateOptions) => void;
+type StateListener<T extends object> = (state: State<T>, ops: Array<Op>, options: MutateOptions) => void;
+interface OpshotHandle<T extends object> {
+    readonly proxy: object;
+    readonly isMutating: boolean;
+    readonly mutate: Mutate<T>;
+    readonly subscribe: (listener: StateListener<T>) => () => void;
+    readonly isSameState: (other: unknown) => boolean;
+    readonly unwrap: () => Snapshot<T>;
+}
+type State<T extends object> = Snapshot<T> & {
+    readonly op: OpshotHandle<T>;
+};
+type DefineCallback<T extends object> = (mutate: Mutate<T>, get: () => State<T>) => T;
+type Define<T extends object> = DefineCallback<T> | T;
+declare function createState<T extends object>(define: Define<T>): State<T>;
+declare function isState(value: unknown): value is State<object>;
+
+interface Group {
+    createState<T extends object>(define: Define<T>): State<T>;
+    subscribe(listener: StateListener<object>): () => void;
+}
+declare function createGroup(): Group;
+
+export { type Define, type DefineCallback, type Group, type Mutate, type MutateOptions, type Op, type OpshotHandle, type PatchOperation, type State, type StateListener, createGroup, createState, diffSnapshots, isState };

package/dist/index.js

@@ -0,0 +1,145 @@
+import { unstable_getInternalStates, ref, proxy, snapshot } from 'valtio/vanilla';
+export { ref } from 'valtio/vanilla';
+
+// src/index.ts
+var { refSet } = unstable_getInternalStates();
+var isPlainArray = (value) => Array.isArray(value) && !refSet.has(value);
+var isPlainObject = (value) => {
+  if (typeof value !== "object" || value === null || Array.isArray(value) || refSet.has(value)) return false;
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+};
+var isCloneable = (value) => isPlainObject(value) || isPlainArray(value);
+var cloneValue = (value) => {
+  if (isPlainArray(value)) return value.map(cloneValue);
+  if (isPlainObject(value)) {
+    return Object.fromEntries(Object.entries(value).map(([key, child]) => [key, cloneValue(child)]));
+  }
+  return value;
+};
+var toPointer = (path) => {
+  if (path.length === 0) return "";
+  return `/${path.map((segment) => String(segment).replaceAll("~", "~0").replaceAll("/", "~1")).join("/")}`;
+};
+var removing = (pointer) => ({ op: "remove", path: pointer });
+var carrying = (op, pointer, value) => {
+  if (!isCloneable(value)) return { op, path: pointer, value };
+  return {
+    op,
+    path: pointer,
+    get value() {
+      return cloneValue(value);
+    }
+  };
+};
+var addPair = (pointer, after) => ({ do: carrying("add", pointer, after), undo: removing(pointer) });
+var removePair = (pointer, before) => ({ do: removing(pointer), undo: carrying("add", pointer, before) });
+var replacePair = (pointer, before, after) => ({
+  do: carrying("replace", pointer, after),
+  undo: carrying("replace", pointer, before)
+});
+var diffValue = (before, after, path, ops) => {
+  if (Object.is(before, after)) return;
+  if (isPlainArray(before) && isPlainArray(after)) {
+    if (before.length !== after.length) {
+      ops.push(replacePair(toPointer(path), before, after));
+      return;
+    }
+    for (let index = 0; index < after.length; index++) diffValue(before[index], after[index], [...path, index], ops);
+    return;
+  }
+  if (isPlainObject(before) && isPlainObject(after)) {
+    for (const key of /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)])) {
+      if (!Object.hasOwn(before, key)) ops.push(addPair(toPointer([...path, key]), after[key]));
+      else if (!Object.hasOwn(after, key)) ops.push(removePair(toPointer([...path, key]), before[key]));
+      else diffValue(before[key], after[key], [...path, key], ops);
+    }
+    return;
+  }
+  ops.push(replacePair(toPointer(path), before, after));
+};
+function diffSnapshots(before, after) {
+  const ops = [];
+  diffValue(before, after, [], ops);
+  return ops;
+}
+
+// src/createState.ts
+var stateBrand = /* @__PURE__ */ Symbol.for("opshot.state");
+var hasOwn = (value, key) => Object.hasOwn(value, key);
+function createState(define) {
+  return createGroupState(define);
+}
+function createGroupState(define, groupListeners) {
+  const callback = typeof define === "function" ? define : () => define;
+  const listeners = /* @__PURE__ */ new Set();
+  const created = {};
+  const requireProxy = () => {
+    const { proxied } = created;
+    if (!proxied) throw new Error("opshot: called during createState definition");
+    return proxied;
+  };
+  const get = () => snapshot(requireProxy());
+  const mutate = (callback2, options = {}) => {
+    const proxied = requireProxy();
+    if (handle.isMutating) throw new Error("opshot: nested mutate on the same state");
+    handle.isMutating = true;
+    const before = snapshot(proxied);
+    try {
+      callback2(proxied);
+    } finally {
+      handle.isMutating = false;
+    }
+    const after = snapshot(proxied);
+    if (before === after) return;
+    if (listeners.size === 0 && (groupListeners?.size ?? 0) === 0) return;
+    const ops = diffSnapshots(before, after);
+    if (ops.length === 0) return;
+    for (const listener of [...groupListeners ?? []]) listener(after, ops, options);
+    for (const listener of [...listeners]) listener(after, ops, options);
+  };
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  };
+  const isSameState = (other) => isState(other) && other.op === handle;
+  const unwrap = () => {
+    const { op, ...rest } = get();
+    return rest;
+  };
+  const literal = callback(mutate, get);
+  if (Object.hasOwn(literal, "op")) throw new Error('opshot: "op" is a reserved key on a state');
+  const base = Object.create(Reflect.getPrototypeOf(literal));
+  Object.defineProperties(base, Object.getOwnPropertyDescriptors(literal));
+  const handle = { proxy: base, isMutating: false, mutate, subscribe, isSameState, unwrap, [stateBrand]: true };
+  Object.defineProperty(base, "op", { value: ref(handle), enumerable: true, writable: false, configurable: false });
+  created.proxied = proxy(base);
+  handle.proxy = created.proxied;
+  return get();
+}
+function isState(value) {
+  if (typeof value !== "object" || value === null || !hasOwn(value, "op")) return false;
+  const handle = value.op;
+  if (typeof handle !== "object" || handle === null || !hasOwn(handle, stateBrand)) return false;
+  return handle[stateBrand] === true;
+}
+
+// src/createGroup.ts
+function createGroup() {
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    createState(define) {
+      return createGroupState(define, listeners);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+
+export { createGroup, createState, diffSnapshots, isState };

package/dist/react.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { Group, Define, State } from './index.js';
+import 'valtio/vanilla';
+
+declare function resnapshot<P extends object>(component: FC<P>): FC<P>;
+declare const useCreateGroup: () => Group;
+declare const useCreateState: <T extends object>(define: Define<T>, group?: Group) => State<T>;
+
+export { resnapshot, useCreateGroup, useCreateState };

package/dist/react.js

@@ -0,0 +1,267 @@
+import { isChanged, createProxy } from 'proxy-compare';
+import { memo, useState, useMemo, useRef, useCallback, useSyncExternalStore, useLayoutEffect } from 'react';
+import { unstable_getInternalStates, snapshot, subscribe, ref, proxy } from 'valtio/vanilla';
+
+// src/react.tsx
+var { refSet } = unstable_getInternalStates();
+var isPlainArray = (value) => Array.isArray(value) && !refSet.has(value);
+var isPlainObject = (value) => {
+  if (typeof value !== "object" || value === null || Array.isArray(value) || refSet.has(value)) return false;
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+};
+var isCloneable = (value) => isPlainObject(value) || isPlainArray(value);
+var cloneValue = (value) => {
+  if (isPlainArray(value)) return value.map(cloneValue);
+  if (isPlainObject(value)) {
+    return Object.fromEntries(Object.entries(value).map(([key, child]) => [key, cloneValue(child)]));
+  }
+  return value;
+};
+var toPointer = (path) => {
+  if (path.length === 0) return "";
+  return `/${path.map((segment) => String(segment).replaceAll("~", "~0").replaceAll("/", "~1")).join("/")}`;
+};
+var removing = (pointer) => ({ op: "remove", path: pointer });
+var carrying = (op, pointer, value) => {
+  if (!isCloneable(value)) return { op, path: pointer, value };
+  return {
+    op,
+    path: pointer,
+    get value() {
+      return cloneValue(value);
+    }
+  };
+};
+var addPair = (pointer, after) => ({ do: carrying("add", pointer, after), undo: removing(pointer) });
+var removePair = (pointer, before) => ({ do: removing(pointer), undo: carrying("add", pointer, before) });
+var replacePair = (pointer, before, after) => ({
+  do: carrying("replace", pointer, after),
+  undo: carrying("replace", pointer, before)
+});
+var diffValue = (before, after, path, ops) => {
+  if (Object.is(before, after)) return;
+  if (isPlainArray(before) && isPlainArray(after)) {
+    if (before.length !== after.length) {
+      ops.push(replacePair(toPointer(path), before, after));
+      return;
+    }
+    for (let index = 0; index < after.length; index++) diffValue(before[index], after[index], [...path, index], ops);
+    return;
+  }
+  if (isPlainObject(before) && isPlainObject(after)) {
+    for (const key of /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)])) {
+      if (!Object.hasOwn(before, key)) ops.push(addPair(toPointer([...path, key]), after[key]));
+      else if (!Object.hasOwn(after, key)) ops.push(removePair(toPointer([...path, key]), before[key]));
+      else diffValue(before[key], after[key], [...path, key], ops);
+    }
+    return;
+  }
+  ops.push(replacePair(toPointer(path), before, after));
+};
+function diffSnapshots(before, after) {
+  const ops = [];
+  diffValue(before, after, [], ops);
+  return ops;
+}
+
+// src/createState.ts
+var stateBrand = /* @__PURE__ */ Symbol.for("opshot.state");
+var hasOwn = (value, key) => Object.hasOwn(value, key);
+function createState(define) {
+  return createGroupState(define);
+}
+function createGroupState(define, groupListeners) {
+  const callback = typeof define === "function" ? define : () => define;
+  const listeners = /* @__PURE__ */ new Set();
+  const created = {};
+  const requireProxy = () => {
+    const { proxied } = created;
+    if (!proxied) throw new Error("opshot: called during createState definition");
+    return proxied;
+  };
+  const get = () => snapshot(requireProxy());
+  const mutate = (callback2, options = {}) => {
+    const proxied = requireProxy();
+    if (handle.isMutating) throw new Error("opshot: nested mutate on the same state");
+    handle.isMutating = true;
+    const before = snapshot(proxied);
+    try {
+      callback2(proxied);
+    } finally {
+      handle.isMutating = false;
+    }
+    const after = snapshot(proxied);
+    if (before === after) return;
+    if (listeners.size === 0 && (groupListeners?.size ?? 0) === 0) return;
+    const ops = diffSnapshots(before, after);
+    if (ops.length === 0) return;
+    for (const listener of [...groupListeners ?? []]) listener(after, ops, options);
+    for (const listener of [...listeners]) listener(after, ops, options);
+  };
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  };
+  const isSameState = (other) => isState(other) && other.op === handle;
+  const unwrap = () => {
+    const { op, ...rest } = get();
+    return rest;
+  };
+  const literal = callback(mutate, get);
+  if (Object.hasOwn(literal, "op")) throw new Error('opshot: "op" is a reserved key on a state');
+  const base = Object.create(Reflect.getPrototypeOf(literal));
+  Object.defineProperties(base, Object.getOwnPropertyDescriptors(literal));
+  const handle = { proxy: base, isMutating: false, mutate, subscribe, isSameState, unwrap, [stateBrand]: true };
+  Object.defineProperty(base, "op", { value: ref(handle), enumerable: true, writable: false, configurable: false });
+  created.proxied = proxy(base);
+  handle.proxy = created.proxied;
+  return get();
+}
+function isState(value) {
+  if (typeof value !== "object" || value === null || !hasOwn(value, "op")) return false;
+  const handle = value.op;
+  if (typeof handle !== "object" || handle === null || !hasOwn(handle, stateBrand)) return false;
+  return handle[stateBrand] === true;
+}
+
+// src/createGroup.ts
+function createGroup() {
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    createState(define) {
+      return createGroupState(define, listeners);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    }
+  };
+}
+
+// src/react.tsx
+function shouldTraverse(value) {
+  if (value === null || typeof value !== "object") return false;
+  if (Array.isArray(value)) return true;
+  const prototype = Object.getPrototypeOf(value);
+  return prototype === Object.prototype || prototype === null;
+}
+function findSnapshotPaths(value, path = [], paths = []) {
+  if (isState(value)) {
+    paths.push(path);
+    return paths;
+  }
+  if (!shouldTraverse(value)) return paths;
+  if (Array.isArray(value)) {
+    value.forEach((item, index) => {
+      findSnapshotPaths(item, [...path, index], paths);
+    });
+  } else {
+    for (const [key, propertyValue] of Object.entries(value)) {
+      if (key === "children") continue;
+      findSnapshotPaths(propertyValue, [...path, key], paths);
+    }
+  }
+  return paths;
+}
+function getAtPath(object, path) {
+  let current = object;
+  for (const segment of path) {
+    if (current === null || current === void 0) return void 0;
+    current = current[segment];
+  }
+  return current;
+}
+function setAtPath(object, path, value) {
+  if (path.length === 0) return value;
+  const head = path[0];
+  if (head === void 0) throw new Error("setAtPath: non-empty path yielded no head segment");
+  const tail = path.slice(1);
+  const current = object[head];
+  const updated = setAtPath(current, tail, value);
+  if (Array.isArray(object)) {
+    const clone = [...object];
+    clone[head] = updated;
+    return clone;
+  }
+  return { ...object, [head]: updated };
+}
+var targetCache = /* @__PURE__ */ new WeakMap();
+function useResnapshotAll(snapshots) {
+  const lastRendered = useRef([]);
+  const lastReturned = useRef([]);
+  const nextProxies = snapshots.map((snap) => snap.op.proxy);
+  const [proxies, setProxies] = useState(nextProxies);
+  const isStale = proxies.length !== nextProxies.length || proxies.some((proxied, index) => proxied !== nextProxies[index]);
+  if (isStale) setProxies(nextProxies);
+  const trackings = useMemo(() => proxies.map(() => ({ affected: /* @__PURE__ */ new WeakMap(), proxyCache: /* @__PURE__ */ new WeakMap() })), [proxies]);
+  const getSnapshot = useCallback(() => {
+    const next = proxies.map((proxied) => snapshot(proxied));
+    const last = lastReturned.current;
+    if (last.length === next.length && last.every((snap, index) => snap === next[index])) return last;
+    lastReturned.current = next;
+    return next;
+  }, [proxies]);
+  const subscribe$1 = useCallback(
+    (callback) => {
+      const unsubscribes = proxies.map(
+        (proxied, index) => subscribe(proxied, () => {
+          const prev = lastRendered.current[index];
+          const tracking = trackings[index];
+          if (prev && tracking && prev !== snapshot(proxied)) {
+            if (!tracking.affected.has(prev)) return;
+            try {
+              if (!isChanged(prev, snapshot(proxied), tracking.affected, /* @__PURE__ */ new WeakMap())) return;
+            } catch {
+            }
+          }
+          callback();
+        })
+      );
+      return () => {
+        for (const unsubscribe of unsubscribes) unsubscribe();
+      };
+    },
+    [proxies, trackings]
+  );
+  const freshSnapshots = useSyncExternalStore(subscribe$1, getSnapshot);
+  useLayoutEffect(() => {
+    lastRendered.current = freshSnapshots;
+  });
+  const trackedSnapshots = useMemo(
+    () => freshSnapshots.map((snap, index) => {
+      const tracking = trackings[index];
+      if (!tracking) return snap;
+      return createProxy(snap, tracking.affected, tracking.proxyCache, targetCache);
+    }),
+    [freshSnapshots, trackings]
+  );
+  return isStale ? snapshots : trackedSnapshots;
+}
+function resnapshot(component) {
+  const componentName = component.displayName ?? component.name;
+  const Resnapshotted = (props) => {
+    const snapshotPaths = useMemo(() => findSnapshotPaths(props), [props]);
+    const staleSnapshots = useMemo(() => snapshotPaths.map((path) => getAtPath(props, path)).filter(isState), [props, snapshotPaths]);
+    const freshSnapshots = useResnapshotAll(staleSnapshots);
+    const freshProps = useMemo(() => {
+      if (freshSnapshots === staleSnapshots) return props;
+      return snapshotPaths.reduce((acc, path, index) => setAtPath(acc, path, freshSnapshots[index]), props);
+    }, [props, snapshotPaths, staleSnapshots, freshSnapshots]);
+    return component(freshProps);
+  };
+  Resnapshotted.displayName = `resnapshot(${componentName === "" ? "Anonymous" : componentName})`;
+  return memo(Resnapshotted);
+}
+var useCreateGroup = () => useState(() => createGroup())[0];
+var useCreateState = (define, group) => {
+  const created = useState(() => group ? group.createState(define) : createState(define))[0];
+  const [fresh] = useResnapshotAll([created]);
+  return fresh;
+};
+
+export { resnapshot, useCreateGroup, useCreateState };

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "opshot",
+  "version": "0.1.0",
+  "description": "Valtio state with snapshot reads, one mutate write path, and snapshot-diff ops",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./react": {
+      "import": "./dist/react.js",
+      "types": "./dist/react.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Matt Cavender",
+  "license": "ISC",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/visionsofparadise/opshot.git"
+  },
+  "scripts": {
+    "check": "concurrently \"eslint . --fix --cache --format ./agent-eslint.js\" \"tsc --noEmit --pretty false 2>&1 | node ./agent-tsc.js\"",
+    "check:verbose": "concurrently \"eslint . --cache\" \"tsc --noEmit\"",
+    "lint": "eslint . --fix --cache --format ./agent-eslint.js",
+    "lint:verbose": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "unit": "vitest run unit",
+    "build": "tsup --config tsup.config.ts"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "proxy-compare": "^3.0.1",
+    "valtio": "2.3.2"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.5",
+    "@stylistic/eslint-plugin": "^5.10.0",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.17",
+    "concurrently": "^10.0.3",
+    "eslint": "^9.39.5",
+    "eslint-plugin-barrel-files": "^3.0.1",
+    "eslint-plugin-check-file": "^3.3.1",
+    "eslint-plugin-import-x": "^4.17.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "fast-json-patch": "^3.1.1",
+    "globals": "^17.7.0",
+    "jsdom": "^29.1.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.64.0",
+    "vitest": "^4.1.10"
+  }
+}