@rindle/react-devtools 0.1.6

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,47 @@
+# @rindle/react-devtools
+
+A floating, **dev-only** React panel for the [Rindle](https://github.com/rindle-sh/rindle) in-browser
+devtools — the UI over [`@rindle/devtools`](../devtools). It renders the mutation **timeline** (the
+fork/rebase loop, with the snap-back highlight), the **queries** inspector, and the live **delta**
+stream ([`DEBUG-TOOLS-BROWSER-DESIGN.md`](../../designs/DEBUG-TOOLS-BROWSER-DESIGN.md) §4).
+
+Pure React + inline styles — no CSS import, no build step beyond `tsc`.
+
+## Usage
+
+Mount the panel once near your app root, and attach a client — both behind a dev flag so they
+tree-shake out of production:
+
+```tsx
+import { RindleDevtools } from "@rindle/react-devtools";
+
+function Root() {
+  return (
+    <>
+      <App />
+      {import.meta.env.DEV && <RindleDevtools />}
+    </>
+  );
+}
+```
+
+```ts
+// somewhere during dev bootstrap, after createRindleClient:
+if (import.meta.env.DEV) {
+  const { attachDevtools } = await import("@rindle/devtools");
+  attachDevtools(app);
+}
+```
+
+The panel auto-discovers the most recently attached client through the global hub. It starts as a
+small `🌊 Rindle` launcher in the bottom-right; click to open.
+
+### Props
+
+| Prop          | Type           | Default | Description |
+| ------------- | -------------- | ------- | ----------- |
+| `core`        | `DevtoolsCore` | —       | Bind to a specific core instead of auto-discovering. |
+| `defaultOpen` | `boolean`      | `false` | Open the panel on first mount. |
+
+You can also drive the core directly (`attachDevtools` is re-exported here for convenience). The data
+logic lives in `@rindle/devtools`; this package is only the rendering.

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type DevtoolsCore } from "@rindle/devtools";
+export interface RindleDevtoolsProps {
+    /** Bind to a specific core. Omit to auto-discover the most recently attached client via the
+     *  global hub (the common case). */
+    core?: DevtoolsCore;
+    /** Open the panel on first mount. Default false (starts as the launcher button). */
+    defaultOpen?: boolean;
+}
+/** The floating Rindle devtools panel. Renders just a launcher until a client is attached via
+ *  `attachDevtools(app)`. */
+export declare function RindleDevtools({ core: explicit, defaultOpen }: RindleDevtoolsProps): ReactNode;
+export { getDevtoolsCore, getDevtoolsHub, attachDevtools } from "@rindle/devtools";
+export type { DevtoolsCore, DevtoolsState } from "@rindle/devtools";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAIL,KAAK,YAAY,EAMlB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,mBAAmB;IAClC;wCACoC;IACpC,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oFAAoF;IACpF,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;6BAC6B;AAC7B,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAmB,EAAE,EAAE,mBAAmB,GAAG,SAAS,CAWtG;AAgUD,OAAO,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACnF,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,188 @@
+// @rindle/react-devtools — a floating, dev-only panel over `@rindle/devtools`
+// (DEBUG-TOOLS-BROWSER-DESIGN.md §6.1). It discovers a running client through the global hub (or an
+// explicit `core` prop) and renders the §4 panes: the mutation TIMELINE (the fork/rebase loop, with
+// the snap-back highlight), the QUERIES inspector, and the live DELTA stream. Pure React + inline
+// styles — no CSS import. Like `@rindle/react` it uses `createElement` rather than JSX (Node's test
+// runner strips TS types but not JSX). Mount it once near your app root in development:
+//
+//   {import.meta.env.DEV && createElement(RindleDevtools)}
+//
+// and attach a client in dev: `import("@rindle/devtools").then(d => d.attachDevtools(app))`.
+import { createElement as h, useCallback, useMemo, useState, useSyncExternalStore } from "react";
+import { getDevtoolsHub, } from "@rindle/devtools";
+/** The floating Rindle devtools panel. Renders just a launcher until a client is attached via
+ *  `attachDevtools(app)`. */
+export function RindleDevtools({ core: explicit, defaultOpen = false }) {
+    const core = useDiscoveredCore(explicit);
+    const [open, setOpen] = useState(defaultOpen);
+    if (!open) {
+        return h("div", { style: S.launcher }, h("button", { type: "button", style: S.launchBtn, onClick: () => setOpen(true), title: "Open Rindle devtools" }, "🌊 Rindle"));
+    }
+    return h(Panel, { core, onClose: () => setOpen(false) });
+}
+/** Discover the active core: an explicit prop wins; otherwise track the global hub's latest core,
+ *  re-rendering when a client attaches/detaches (so the panel can be mounted before the app). */
+function useDiscoveredCore(explicit) {
+    const hub = useMemo(() => getDevtoolsHub(), []);
+    const subscribe = useCallback((cb) => hub.subscribe(cb), [hub]);
+    const latest = useCallback(() => hub.cores[hub.cores.length - 1], [hub]);
+    const discovered = useSyncExternalStore(subscribe, latest, () => undefined);
+    return explicit ?? discovered;
+}
+function Panel({ core, onClose }) {
+    const [tab, setTab] = useState("timeline");
+    return h("div", { style: S.panel }, h("div", { style: S.header }, h("strong", { style: { fontSize: 12 } }, "🌊 Rindle devtools"), h("div", { style: { flex: 1 } }), h("button", { type: "button", style: S.iconBtn, onClick: onClose, title: "Close" }, "✕")), core
+        ? h(CorePanel, { core, tab, setTab })
+        : h("div", { style: S.empty }, "No Rindle client attached. ", h("br"), "Call ", h("code", { style: S.code }, "attachDevtools(app)"), " from ", h("code", { style: S.code }, "@rindle/devtools"), " in dev."));
+}
+function CorePanel({ core, tab, setTab }) {
+    const subscribe = useCallback((cb) => core.subscribe(cb), [core]);
+    const getState = useCallback(() => core.getState(), [core]);
+    const state = useSyncExternalStore(subscribe, getState, getState);
+    const pendingCount = state.timeline.filter((t) => t.state === "pending").length;
+    return h("div", { style: { display: "contents" } }, h("div", { style: S.tabs }, h(TabButton, { active: tab === "timeline", onClick: () => setTab("timeline") }, "Timeline ", pendingCount > 0 ? h("span", { style: S.dot }, pendingCount) : null), h(TabButton, { active: tab === "queries", onClick: () => setTab("queries") }, "Queries ", h("span", { style: S.count }, state.queries.length)), h(TabButton, { active: tab === "deltas", onClick: () => setTab("deltas") }, "Deltas ", h("span", { style: S.count }, state.deltas.length))), h("div", { style: S.body }, tab === "timeline" ? h(TimelinePane, { state, core }) : null, tab === "queries" ? h(QueriesPane, { state }) : null, tab === "deltas" ? h(DeltasPane, { state, core }) : null));
+}
+// --- Timeline (§4.1) ---------------------------------------------------------
+function TimelinePane({ state, core }) {
+    if (!state.capabilities.optimistic) {
+        return h("div", { style: S.empty }, "This backend has no optimistic loop — the mutation timeline is empty.");
+    }
+    const rows = [...state.timeline].reverse(); // newest first
+    const o = state.optimistic;
+    return h("div", null, h("div", { style: S.toolbar }, h("span", { style: S.muted }, `confirmed lmid ${o?.confirmedLmid ?? 0} · next mid ${o?.nextMid ?? 1}${o && o.bufferedFrames > 0 ? ` · ${o.bufferedFrames} buffered` : ""}`), h("div", { style: { flex: 1 } }), h("button", { type: "button", style: S.smallBtn, onClick: () => core.clearHistory() }, "clear settled")), rows.length === 0
+        ? h("div", { style: S.empty }, "No mutations yet. Invoke a mutator to watch the fork/rebase loop.")
+        : rows.map((t) => h(TimelineRow, { key: t.id, t })));
+}
+function TimelineRow({ t }) {
+    const [open, setOpen] = useState(false);
+    const elapsed = (t.settledAt ?? Date.now()) - t.invokedAt;
+    return h("div", { style: S.row }, h("div", { style: S.rowHead, onClick: () => setOpen((v) => !v) }, h(StateBadge, { state: t.state }), h("span", { style: S.mono }, t.name), h("span", { style: S.muted }, t.mid != null ? `mid ${t.mid}` : t.folded ? "folding…" : "—"), t.folded ? h("span", { style: S.tag }, "folded") : null, t.reconciledWithChurn
+        ? h("span", { style: S.warn, title: "View churn coincided with this confirmation — a possible snap-back (prediction diverged from the server)." }, "⚡ snap-back?")
+        : null, h("div", { style: { flex: 1 } }), h("span", { style: S.muted }, fmtMs(elapsed))), open
+        ? h("div", { style: S.rowBody }, h(KV, { k: "args", v: h("pre", { style: S.pre }, safeJson(t.args)) }), h(KV, { k: "tables", v: t.tables.join(", ") || "—" }), h(KV, { k: "affects queries", v: t.affectedQueries.length ? t.affectedQueries.map((q) => `#${q}`).join(", ") : "—" }), t.fold
+            ? h(KV, {
+                k: "fold",
+                v: `${t.fold.foldKey} — debounce ${t.fold.debounceMs}ms${t.fold.maxWaitMs ? `, maxWait ${t.fold.maxWaitMs}ms` : ""}${t.fold.deferAcrossWrites ? ", deferAcrossWrites" : ""}${t.fold.flushed ? " (flushed)" : ""}`,
+            })
+            : null)
+        : null);
+}
+// --- Queries (§4.2) ----------------------------------------------------------
+function QueriesPane({ state }) {
+    if (state.queries.length === 0)
+        return h("div", { style: S.empty }, "No materialized views are mounted.");
+    return h("div", null, state.queries.map((q) => h(QueryRow, { key: q.qid, q })));
+}
+function QueryRow({ q }) {
+    const [open, setOpen] = useState(false);
+    return h("div", { style: S.row }, h("div", { style: S.rowHead, onClick: () => setOpen((v) => !v) }, h("span", { style: S.muted }, `#${q.qid}`), h(ResultBadge, { rt: q.resultType }), q.pending ? h("span", { style: S.tagPending }, "pending") : null, h("span", { style: S.mono, title: q.summary }, q.summary), h("div", { style: { flex: 1 } }), h("span", { style: S.muted }, `${q.rowCount} rows`)), open
+        ? h("div", { style: S.rowBody }, h(KV, { k: "ast", v: h("pre", { style: S.pre }, safeJson(q.ast)) }), h(KV, { k: "reads tables", v: q.tables.join(", ") }), h(KV, { k: `sample (${q.sample.length}/${q.rowCount})`, v: h("pre", { style: S.pre }, safeJson(q.sample)) }))
+        : null);
+}
+// --- Delta stream (§4.3) -----------------------------------------------------
+const DELTA_KINDS = ["hello", "snapshot", "add", "remove", "edit"];
+function DeltasPane({ state, core }) {
+    const [paused, setPaused] = useState(false);
+    const [frozen, setFrozen] = useState([]);
+    const [hidden, setHidden] = useState(() => new Set());
+    const live = state.deltas;
+    const shown = paused ? frozen : live;
+    const rows = shown.filter((d) => !hidden.has(d.kind)).slice(-300).reverse();
+    const toggleKind = (k) => setHidden((prev) => {
+        const next = new Set(prev);
+        if (next.has(k))
+            next.delete(k);
+        else
+            next.add(k);
+        return next;
+    });
+    return h("div", null, h("div", { style: S.toolbar }, ...DELTA_KINDS.map((k) => h("button", {
+        key: k,
+        type: "button",
+        style: { ...S.chip, ...(hidden.has(k) ? S.chipOff : null) },
+        onClick: () => toggleKind(k),
+        title: hidden.has(k) ? `show ${k}` : `hide ${k}`,
+    }, k)), h("div", { style: { flex: 1 } }), h("button", {
+        type: "button",
+        style: S.smallBtn,
+        onClick: () => {
+            if (!paused)
+                setFrozen(live.slice());
+            setPaused((p) => !p);
+        },
+    }, paused ? "▶ resume" : "⏸ pause"), h("button", { type: "button", style: S.smallBtn, onClick: () => core.clearDeltas() }, "clear")), rows.length === 0
+        ? h("div", { style: S.empty }, `No deltas${hidden.size ? " match the filter" : " yet"}.`)
+        : rows.map((d) => h("div", { key: d.seq, style: S.deltaRow }, h("span", { style: S.muted }, `#${d.qid}`), h(DeltaBadge, { kind: d.kind }), h("span", { style: S.mono }, d.label))));
+}
+// --- small components --------------------------------------------------------
+function TabButton({ active, onClick, children }) {
+    return h("button", { type: "button", style: { ...S.tab, ...(active ? S.tabActive : null) }, onClick }, children);
+}
+function KV({ k, v }) {
+    return h("div", { style: S.kv }, h("span", { style: S.kvKey }, k), h("span", { style: S.kvVal }, v));
+}
+const STATE_COLOR = { pending: "#d9a106", confirmed: "#2ea043", dropped: "#cf3b3b" };
+function StateBadge({ state }) {
+    return h("span", { style: { ...S.badge, background: STATE_COLOR[state] } }, state);
+}
+function ResultBadge({ rt }) {
+    const color = rt === "complete" ? "#2ea043" : rt === "error" ? "#cf3b3b" : "#6b7785";
+    return h("span", { style: { ...S.badge, background: color } }, rt);
+}
+const DELTA_COLOR = { hello: "#6b7785", snapshot: "#8957e5", add: "#2ea043", remove: "#cf3b3b", edit: "#1f6feb" };
+function DeltaBadge({ kind }) {
+    return h("span", { style: { ...S.badge, background: DELTA_COLOR[kind] } }, kind);
+}
+// --- formatting --------------------------------------------------------------
+function fmtMs(ms) {
+    if (ms < 1000)
+        return `${Math.round(ms)}ms`;
+    if (ms < 60000)
+        return `${(ms / 1000).toFixed(1)}s`;
+    return `${Math.round(ms / 1000)}s`;
+}
+function safeJson(v) {
+    try {
+        return JSON.stringify(v, null, 2) ?? String(v);
+    }
+    catch {
+        return String(v);
+    }
+}
+// --- styles (inline; no CSS dependency) --------------------------------------
+const mono = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+const S = {
+    launcher: { position: "fixed", bottom: 12, right: 12, zIndex: 2147483000 },
+    launchBtn: { font: `600 12px ${mono}`, color: "#e6edf3", background: "#161b22", border: "1px solid #30363d", borderRadius: 8, padding: "6px 10px", cursor: "pointer", boxShadow: "0 2px 8px rgba(0,0,0,.35)" },
+    panel: { position: "fixed", bottom: 12, right: 12, width: 440, maxWidth: "calc(100vw - 24px)", height: "60vh", maxHeight: 640, display: "flex", flexDirection: "column", font: `12px ${mono}`, color: "#e6edf3", background: "#0d1117", border: "1px solid #30363d", borderRadius: 10, boxShadow: "0 8px 32px rgba(0,0,0,.5)", zIndex: 2147483000, overflow: "hidden" },
+    header: { display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", borderBottom: "1px solid #21262d" },
+    iconBtn: { background: "transparent", color: "#8b949e", border: "none", cursor: "pointer", fontSize: 13 },
+    tabs: { display: "flex", gap: 2, padding: "6px 8px 0", borderBottom: "1px solid #21262d" },
+    tab: { font: `600 11px ${mono}`, color: "#8b949e", background: "transparent", border: "none", borderBottom: "2px solid transparent", padding: "6px 10px", cursor: "pointer" },
+    tabActive: { color: "#e6edf3", borderBottom: "2px solid #1f6feb" },
+    body: { flex: 1, overflowY: "auto", padding: "6px 8px" },
+    toolbar: { display: "flex", alignItems: "center", gap: 6, padding: "4px 2px 8px", flexWrap: "wrap" },
+    row: { borderBottom: "1px solid #161b22" },
+    rowHead: { display: "flex", alignItems: "center", gap: 6, padding: "5px 4px", cursor: "pointer" },
+    rowBody: { padding: "2px 4px 8px 4px", display: "flex", flexDirection: "column", gap: 3 },
+    deltaRow: { display: "flex", alignItems: "center", gap: 6, padding: "3px 4px", borderBottom: "1px solid #161b22" },
+    badge: { font: `600 10px ${mono}`, color: "#fff", borderRadius: 4, padding: "1px 5px", textTransform: "uppercase" },
+    tag: { font: `10px ${mono}`, color: "#c9a0ff", border: "1px solid #3b2d57", borderRadius: 4, padding: "0 4px" },
+    tagPending: { font: `10px ${mono}`, color: "#f0c552", border: "1px solid #5a4a16", borderRadius: 4, padding: "0 4px" },
+    warn: { font: `600 10px ${mono}`, color: "#f0883e" },
+    mono: { fontFamily: mono, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+    muted: { color: "#6e7681", fontSize: 11, whiteSpace: "nowrap" },
+    count: { color: "#6e7681" },
+    dot: { background: "#d9a106", color: "#0d1117", borderRadius: 8, padding: "0 5px", marginLeft: 2, fontWeight: 700 },
+    empty: { color: "#6e7681", padding: 16, textAlign: "center", lineHeight: 1.6 },
+    smallBtn: { font: `11px ${mono}`, color: "#c9d1d9", background: "#21262d", border: "1px solid #30363d", borderRadius: 5, padding: "2px 7px", cursor: "pointer" },
+    chip: { font: `10px ${mono}`, color: "#c9d1d9", background: "#161b22", border: "1px solid #30363d", borderRadius: 10, padding: "1px 8px", cursor: "pointer" },
+    chipOff: { color: "#484f58", textDecoration: "line-through" },
+    kv: { display: "flex", gap: 6, alignItems: "baseline" },
+    kvKey: { color: "#6e7681", minWidth: 96, flexShrink: 0 },
+    kvVal: { color: "#c9d1d9", wordBreak: "break-word", flex: 1 },
+    pre: { margin: 0, padding: "4px 6px", background: "#161b22", borderRadius: 5, maxHeight: 180, overflow: "auto", whiteSpace: "pre-wrap" },
+    code: { background: "#161b22", borderRadius: 4, padding: "0 4px" },
+};
+export { getDevtoolsCore, getDevtoolsHub, attachDevtools } from "@rindle/devtools";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@rindle/react-devtools",
+  "version": "0.1.6",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rindle-sh/rindle.git",
+    "directory": "packages/react-devtools"
+  },
+  "type": "module",
+  "description": "React floating panel for the Rindle in-browser devtools: mutation timeline, queries inspector, delta stream over @rindle/devtools (DEBUG-TOOLS-BROWSER-DESIGN.md). Dev-only; tree-shakes out of production.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "@rindle/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "dependencies": {
+    "@rindle/devtools": "0.1.6"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/jsdom": "^21.1.0",
+    "jsdom": "^25.0.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "typescript": "^5.7.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "test": "tsc --noEmit && node --conditions=@rindle/source --test test/*.test.ts"
+  }
+}

package/src/index.ts

@@ -0,0 +1,368 @@
+// @rindle/react-devtools — a floating, dev-only panel over `@rindle/devtools`
+// (DEBUG-TOOLS-BROWSER-DESIGN.md §6.1). It discovers a running client through the global hub (or an
+// explicit `core` prop) and renders the §4 panes: the mutation TIMELINE (the fork/rebase loop, with
+// the snap-back highlight), the QUERIES inspector, and the live DELTA stream. Pure React + inline
+// styles — no CSS import. Like `@rindle/react` it uses `createElement` rather than JSX (Node's test
+// runner strips TS types but not JSX). Mount it once near your app root in development:
+//
+//   {import.meta.env.DEV && createElement(RindleDevtools)}
+//
+// and attach a client in dev: `import("@rindle/devtools").then(d => d.attachDevtools(app))`.
+
+import { createElement as h, useCallback, useMemo, useState, useSyncExternalStore } from "react";
+import type { CSSProperties, ReactNode } from "react";
+import {
+  getDevtoolsHub,
+  type DeltaEntry,
+  type DeltaKind,
+  type DevtoolsCore,
+  type DevtoolsState,
+  type MutationState,
+  type QueryEntry,
+  type ResultType,
+  type TimelineEntry,
+} from "@rindle/devtools";
+
+export interface RindleDevtoolsProps {
+  /** Bind to a specific core. Omit to auto-discover the most recently attached client via the
+   *  global hub (the common case). */
+  core?: DevtoolsCore;
+  /** Open the panel on first mount. Default false (starts as the launcher button). */
+  defaultOpen?: boolean;
+}
+
+/** The floating Rindle devtools panel. Renders just a launcher until a client is attached via
+ *  `attachDevtools(app)`. */
+export function RindleDevtools({ core: explicit, defaultOpen = false }: RindleDevtoolsProps): ReactNode {
+  const core = useDiscoveredCore(explicit);
+  const [open, setOpen] = useState(defaultOpen);
+  if (!open) {
+    return h(
+      "div",
+      { style: S.launcher },
+      h("button", { type: "button", style: S.launchBtn, onClick: () => setOpen(true), title: "Open Rindle devtools" }, "🌊 Rindle"),
+    );
+  }
+  return h(Panel, { core, onClose: () => setOpen(false) });
+}
+
+/** Discover the active core: an explicit prop wins; otherwise track the global hub's latest core,
+ *  re-rendering when a client attaches/detaches (so the panel can be mounted before the app). */
+function useDiscoveredCore(explicit?: DevtoolsCore): DevtoolsCore | undefined {
+  const hub = useMemo(() => getDevtoolsHub(), []);
+  const subscribe = useCallback((cb: () => void) => hub.subscribe(cb), [hub]);
+  const latest = useCallback(() => hub.cores[hub.cores.length - 1], [hub]);
+  const discovered = useSyncExternalStore(subscribe, latest, () => undefined);
+  return explicit ?? discovered;
+}
+
+type Tab = "timeline" | "queries" | "deltas";
+
+function Panel({ core, onClose }: { core: DevtoolsCore | undefined; onClose: () => void }): ReactNode {
+  const [tab, setTab] = useState<Tab>("timeline");
+  return h(
+    "div",
+    { style: S.panel },
+    h(
+      "div",
+      { style: S.header },
+      h("strong", { style: { fontSize: 12 } }, "🌊 Rindle devtools"),
+      h("div", { style: { flex: 1 } }),
+      h("button", { type: "button", style: S.iconBtn, onClick: onClose, title: "Close" }, "✕"),
+    ),
+    core
+      ? h(CorePanel, { core, tab, setTab })
+      : h(
+          "div",
+          { style: S.empty },
+          "No Rindle client attached. ",
+          h("br"),
+          "Call ",
+          h("code", { style: S.code }, "attachDevtools(app)"),
+          " from ",
+          h("code", { style: S.code }, "@rindle/devtools"),
+          " in dev.",
+        ),
+  );
+}
+
+function CorePanel({ core, tab, setTab }: { core: DevtoolsCore; tab: Tab; setTab: (t: Tab) => void }): ReactNode {
+  const subscribe = useCallback((cb: () => void) => core.subscribe(cb), [core]);
+  const getState = useCallback(() => core.getState(), [core]);
+  const state = useSyncExternalStore(subscribe, getState, getState);
+  const pendingCount = state.timeline.filter((t) => t.state === "pending").length;
+
+  return h(
+    "div",
+    { style: { display: "contents" } },
+    h(
+      "div",
+      { style: S.tabs },
+      h(TabButton, { active: tab === "timeline", onClick: () => setTab("timeline") }, "Timeline ", pendingCount > 0 ? h("span", { style: S.dot }, pendingCount) : null),
+      h(TabButton, { active: tab === "queries", onClick: () => setTab("queries") }, "Queries ", h("span", { style: S.count }, state.queries.length)),
+      h(TabButton, { active: tab === "deltas", onClick: () => setTab("deltas") }, "Deltas ", h("span", { style: S.count }, state.deltas.length)),
+    ),
+    h(
+      "div",
+      { style: S.body },
+      tab === "timeline" ? h(TimelinePane, { state, core }) : null,
+      tab === "queries" ? h(QueriesPane, { state }) : null,
+      tab === "deltas" ? h(DeltasPane, { state, core }) : null,
+    ),
+  );
+}
+
+// --- Timeline (§4.1) ---------------------------------------------------------
+
+function TimelinePane({ state, core }: { state: DevtoolsState; core: DevtoolsCore }): ReactNode {
+  if (!state.capabilities.optimistic) {
+    return h("div", { style: S.empty }, "This backend has no optimistic loop — the mutation timeline is empty.");
+  }
+  const rows = [...state.timeline].reverse(); // newest first
+  const o = state.optimistic;
+  return h(
+    "div",
+    null,
+    h(
+      "div",
+      { style: S.toolbar },
+      h(
+        "span",
+        { style: S.muted },
+        `confirmed lmid ${o?.confirmedLmid ?? 0} · next mid ${o?.nextMid ?? 1}${o && o.bufferedFrames > 0 ? ` · ${o.bufferedFrames} buffered` : ""}`,
+      ),
+      h("div", { style: { flex: 1 } }),
+      h("button", { type: "button", style: S.smallBtn, onClick: () => core.clearHistory() }, "clear settled"),
+    ),
+    rows.length === 0
+      ? h("div", { style: S.empty }, "No mutations yet. Invoke a mutator to watch the fork/rebase loop.")
+      : rows.map((t) => h(TimelineRow, { key: t.id, t })),
+  );
+}
+
+function TimelineRow({ t }: { t: TimelineEntry }): ReactNode {
+  const [open, setOpen] = useState(false);
+  const elapsed = (t.settledAt ?? Date.now()) - t.invokedAt;
+  return h(
+    "div",
+    { style: S.row },
+    h(
+      "div",
+      { style: S.rowHead, onClick: () => setOpen((v) => !v) },
+      h(StateBadge, { state: t.state }),
+      h("span", { style: S.mono }, t.name),
+      h("span", { style: S.muted }, t.mid != null ? `mid ${t.mid}` : t.folded ? "folding…" : "—"),
+      t.folded ? h("span", { style: S.tag }, "folded") : null,
+      t.reconciledWithChurn
+        ? h(
+            "span",
+            { style: S.warn, title: "View churn coincided with this confirmation — a possible snap-back (prediction diverged from the server)." },
+            "⚡ snap-back?",
+          )
+        : null,
+      h("div", { style: { flex: 1 } }),
+      h("span", { style: S.muted }, fmtMs(elapsed)),
+    ),
+    open
+      ? h(
+          "div",
+          { style: S.rowBody },
+          h(KV, { k: "args", v: h("pre", { style: S.pre }, safeJson(t.args)) }),
+          h(KV, { k: "tables", v: t.tables.join(", ") || "—" }),
+          h(KV, { k: "affects queries", v: t.affectedQueries.length ? t.affectedQueries.map((q) => `#${q}`).join(", ") : "—" }),
+          t.fold
+            ? h(KV, {
+                k: "fold",
+                v: `${t.fold.foldKey} — debounce ${t.fold.debounceMs}ms${t.fold.maxWaitMs ? `, maxWait ${t.fold.maxWaitMs}ms` : ""}${
+                  t.fold.deferAcrossWrites ? ", deferAcrossWrites" : ""
+                }${t.fold.flushed ? " (flushed)" : ""}`,
+              })
+            : null,
+        )
+      : null,
+  );
+}
+
+// --- Queries (§4.2) ----------------------------------------------------------
+
+function QueriesPane({ state }: { state: DevtoolsState }): ReactNode {
+  if (state.queries.length === 0) return h("div", { style: S.empty }, "No materialized views are mounted.");
+  return h("div", null, state.queries.map((q) => h(QueryRow, { key: q.qid, q })));
+}
+
+function QueryRow({ q }: { q: QueryEntry }): ReactNode {
+  const [open, setOpen] = useState(false);
+  return h(
+    "div",
+    { style: S.row },
+    h(
+      "div",
+      { style: S.rowHead, onClick: () => setOpen((v) => !v) },
+      h("span", { style: S.muted }, `#${q.qid}`),
+      h(ResultBadge, { rt: q.resultType }),
+      q.pending ? h("span", { style: S.tagPending }, "pending") : null,
+      h("span", { style: S.mono, title: q.summary }, q.summary),
+      h("div", { style: { flex: 1 } }),
+      h("span", { style: S.muted }, `${q.rowCount} rows`),
+    ),
+    open
+      ? h(
+          "div",
+          { style: S.rowBody },
+          h(KV, { k: "ast", v: h("pre", { style: S.pre }, safeJson(q.ast)) }),
+          h(KV, { k: "reads tables", v: q.tables.join(", ") }),
+          h(KV, { k: `sample (${q.sample.length}/${q.rowCount})`, v: h("pre", { style: S.pre }, safeJson(q.sample)) }),
+        )
+      : null,
+  );
+}
+
+// --- Delta stream (§4.3) -----------------------------------------------------
+
+const DELTA_KINDS: DeltaKind[] = ["hello", "snapshot", "add", "remove", "edit"];
+
+function DeltasPane({ state, core }: { state: DevtoolsState; core: DevtoolsCore }): ReactNode {
+  const [paused, setPaused] = useState(false);
+  const [frozen, setFrozen] = useState<DeltaEntry[]>([]);
+  const [hidden, setHidden] = useState<Set<DeltaKind>>(() => new Set());
+
+  const live = state.deltas;
+  const shown = paused ? frozen : live;
+  const rows = shown.filter((d) => !hidden.has(d.kind)).slice(-300).reverse();
+
+  const toggleKind = (k: DeltaKind) =>
+    setHidden((prev) => {
+      const next = new Set(prev);
+      if (next.has(k)) next.delete(k);
+      else next.add(k);
+      return next;
+    });
+
+  return h(
+    "div",
+    null,
+    h(
+      "div",
+      { style: S.toolbar },
+      ...DELTA_KINDS.map((k) =>
+        h(
+          "button",
+          {
+            key: k,
+            type: "button",
+            style: { ...S.chip, ...(hidden.has(k) ? S.chipOff : null) },
+            onClick: () => toggleKind(k),
+            title: hidden.has(k) ? `show ${k}` : `hide ${k}`,
+          },
+          k,
+        ),
+      ),
+      h("div", { style: { flex: 1 } }),
+      h(
+        "button",
+        {
+          type: "button",
+          style: S.smallBtn,
+          onClick: () => {
+            if (!paused) setFrozen(live.slice());
+            setPaused((p) => !p);
+          },
+        },
+        paused ? "▶ resume" : "⏸ pause",
+      ),
+      h("button", { type: "button", style: S.smallBtn, onClick: () => core.clearDeltas() }, "clear"),
+    ),
+    rows.length === 0
+      ? h("div", { style: S.empty }, `No deltas${hidden.size ? " match the filter" : " yet"}.`)
+      : rows.map((d) =>
+          h(
+            "div",
+            { key: d.seq, style: S.deltaRow },
+            h("span", { style: S.muted }, `#${d.qid}`),
+            h(DeltaBadge, { kind: d.kind }),
+            h("span", { style: S.mono }, d.label),
+          ),
+        ),
+  );
+}
+
+// --- small components --------------------------------------------------------
+
+function TabButton({ active, onClick, children }: { active: boolean; onClick: () => void; children?: ReactNode }): ReactNode {
+  return h("button", { type: "button", style: { ...S.tab, ...(active ? S.tabActive : null) }, onClick }, children);
+}
+
+function KV({ k, v }: { k: string; v: ReactNode }): ReactNode {
+  return h("div", { style: S.kv }, h("span", { style: S.kvKey }, k), h("span", { style: S.kvVal }, v));
+}
+
+const STATE_COLOR: Record<MutationState, string> = { pending: "#d9a106", confirmed: "#2ea043", dropped: "#cf3b3b" };
+function StateBadge({ state }: { state: MutationState }): ReactNode {
+  return h("span", { style: { ...S.badge, background: STATE_COLOR[state] } }, state);
+}
+
+function ResultBadge({ rt }: { rt: ResultType }): ReactNode {
+  const color = rt === "complete" ? "#2ea043" : rt === "error" ? "#cf3b3b" : "#6b7785";
+  return h("span", { style: { ...S.badge, background: color } }, rt);
+}
+
+const DELTA_COLOR: Record<DeltaKind, string> = { hello: "#6b7785", snapshot: "#8957e5", add: "#2ea043", remove: "#cf3b3b", edit: "#1f6feb" };
+function DeltaBadge({ kind }: { kind: DeltaKind }): ReactNode {
+  return h("span", { style: { ...S.badge, background: DELTA_COLOR[kind] } }, kind);
+}
+
+// --- formatting --------------------------------------------------------------
+
+function fmtMs(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${Math.round(ms / 1000)}s`;
+}
+
+function safeJson(v: unknown): string {
+  try {
+    return JSON.stringify(v, null, 2) ?? String(v);
+  } catch {
+    return String(v);
+  }
+}
+
+// --- styles (inline; no CSS dependency) --------------------------------------
+
+const mono = "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace";
+const S: Record<string, CSSProperties> = {
+  launcher: { position: "fixed", bottom: 12, right: 12, zIndex: 2147483000 },
+  launchBtn: { font: `600 12px ${mono}`, color: "#e6edf3", background: "#161b22", border: "1px solid #30363d", borderRadius: 8, padding: "6px 10px", cursor: "pointer", boxShadow: "0 2px 8px rgba(0,0,0,.35)" },
+  panel: { position: "fixed", bottom: 12, right: 12, width: 440, maxWidth: "calc(100vw - 24px)", height: "60vh", maxHeight: 640, display: "flex", flexDirection: "column", font: `12px ${mono}`, color: "#e6edf3", background: "#0d1117", border: "1px solid #30363d", borderRadius: 10, boxShadow: "0 8px 32px rgba(0,0,0,.5)", zIndex: 2147483000, overflow: "hidden" },
+  header: { display: "flex", alignItems: "center", gap: 8, padding: "8px 10px", borderBottom: "1px solid #21262d" },
+  iconBtn: { background: "transparent", color: "#8b949e", border: "none", cursor: "pointer", fontSize: 13 },
+  tabs: { display: "flex", gap: 2, padding: "6px 8px 0", borderBottom: "1px solid #21262d" },
+  tab: { font: `600 11px ${mono}`, color: "#8b949e", background: "transparent", border: "none", borderBottom: "2px solid transparent", padding: "6px 10px", cursor: "pointer" },
+  tabActive: { color: "#e6edf3", borderBottom: "2px solid #1f6feb" },
+  body: { flex: 1, overflowY: "auto", padding: "6px 8px" },
+  toolbar: { display: "flex", alignItems: "center", gap: 6, padding: "4px 2px 8px", flexWrap: "wrap" },
+  row: { borderBottom: "1px solid #161b22" },
+  rowHead: { display: "flex", alignItems: "center", gap: 6, padding: "5px 4px", cursor: "pointer" },
+  rowBody: { padding: "2px 4px 8px 4px", display: "flex", flexDirection: "column", gap: 3 },
+  deltaRow: { display: "flex", alignItems: "center", gap: 6, padding: "3px 4px", borderBottom: "1px solid #161b22" },
+  badge: { font: `600 10px ${mono}`, color: "#fff", borderRadius: 4, padding: "1px 5px", textTransform: "uppercase" },
+  tag: { font: `10px ${mono}`, color: "#c9a0ff", border: "1px solid #3b2d57", borderRadius: 4, padding: "0 4px" },
+  tagPending: { font: `10px ${mono}`, color: "#f0c552", border: "1px solid #5a4a16", borderRadius: 4, padding: "0 4px" },
+  warn: { font: `600 10px ${mono}`, color: "#f0883e" },
+  mono: { fontFamily: mono, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" },
+  muted: { color: "#6e7681", fontSize: 11, whiteSpace: "nowrap" },
+  count: { color: "#6e7681" },
+  dot: { background: "#d9a106", color: "#0d1117", borderRadius: 8, padding: "0 5px", marginLeft: 2, fontWeight: 700 },
+  empty: { color: "#6e7681", padding: 16, textAlign: "center", lineHeight: 1.6 },
+  smallBtn: { font: `11px ${mono}`, color: "#c9d1d9", background: "#21262d", border: "1px solid #30363d", borderRadius: 5, padding: "2px 7px", cursor: "pointer" },
+  chip: { font: `10px ${mono}`, color: "#c9d1d9", background: "#161b22", border: "1px solid #30363d", borderRadius: 10, padding: "1px 8px", cursor: "pointer" },
+  chipOff: { color: "#484f58", textDecoration: "line-through" },
+  kv: { display: "flex", gap: 6, alignItems: "baseline" },
+  kvKey: { color: "#6e7681", minWidth: 96, flexShrink: 0 },
+  kvVal: { color: "#c9d1d9", wordBreak: "break-word", flex: 1 },
+  pre: { margin: 0, padding: "4px 6px", background: "#161b22", borderRadius: 5, maxHeight: 180, overflow: "auto", whiteSpace: "pre-wrap" },
+  code: { background: "#161b22", borderRadius: 4, padding: "0 4px" },
+};
+
+export { getDevtoolsCore, getDevtoolsHub, attachDevtools } from "@rindle/devtools";
+export type { DevtoolsCore, DevtoolsState } from "@rindle/devtools";