@logixjs/devtools-react 0.0.1

package/dist/LogixDevtools.d.cts

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as Logix from '@logixjs/core';
+
+interface LogixDevtoolsProps {
+    readonly position?: 'bottom-left' | 'bottom-right';
+    readonly initialOpen?: boolean;
+    /**
+     * Optional: provide a StateTraitProgram for the currently selected moduleId,
+     * so Devtools can render StateTraitGraph in the Inspector panel and coordinate with the Timeline.
+     * - If not provided, the Graph section only shows a placeholder and does not affect Timeline / Inspector behavior.
+     */
+    readonly getProgramForModule?: (moduleId: string) => Logix.StateTrait.StateTraitProgram<any> | undefined;
+}
+declare const LogixDevtools: React.FC<LogixDevtoolsProps>;
+
+export { LogixDevtools };

package/dist/LogixDevtools.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as Logix from '@logixjs/core';
+
+interface LogixDevtoolsProps {
+    readonly position?: 'bottom-left' | 'bottom-right';
+    readonly initialOpen?: boolean;
+    /**
+     * Optional: provide a StateTraitProgram for the currently selected moduleId,
+     * so Devtools can render StateTraitGraph in the Inspector panel and coordinate with the Timeline.
+     * - If not provided, the Graph section only shows a placeholder and does not affect Timeline / Inspector behavior.
+     */
+    readonly getProgramForModule?: (moduleId: string) => Logix.StateTrait.StateTraitProgram<any> | undefined;
+}
+declare const LogixDevtools: React.FC<LogixDevtoolsProps>;
+
+export { LogixDevtools };

package/dist/LogixDevtools.js

@@ -0,0 +1,8 @@
+import {
+  LogixDevtools
+} from "./chunk-WTZBDE4J.js";
+import "./chunk-FNWHBEXD.js";
+import "./chunk-CZWYV2AZ.js";
+export {
+  LogixDevtools
+};

package/dist/StateTraitGraphView.cjs

@@ -0,0 +1,186 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/StateTraitGraphView.tsx
+var StateTraitGraphView_exports = {};
+__export(StateTraitGraphView_exports, {
+  StateTraitGraphView: () => StateTraitGraphView
+});
+module.exports = __toCommonJS(StateTraitGraphView_exports);
+
+// src/style.ts
+var import_meta = {};
+var styleMarkerAttribute = "data-logix-devtools-style";
+var ensureDevtoolsStyles = () => {
+  if (typeof document === "undefined") return;
+  const existing = document.querySelector(`link[${styleMarkerAttribute}="true"]`);
+  if (existing) return;
+  let href;
+  try {
+    href = new URL("./style.css", import_meta.url).toString();
+  } catch {
+    return;
+  }
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = href;
+  link.setAttribute(styleMarkerAttribute, "true");
+  document.head.appendChild(link);
+};
+
+// src/internal/ui/graph/StateTraitGraphView.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var StateTraitGraphView = ({
+  program,
+  onSelectNode,
+  selectedFieldPath
+}) => {
+  if (!program) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: "text-xs px-3 py-2",
+        style: {
+          color: "var(--dt-text-muted)",
+          backgroundColor: "var(--dt-bg-surface)"
+        },
+        children: "No StateTraitProgram available for this module."
+      }
+    );
+  }
+  const { graph } = program;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: "text-[10px] font-mono px-3 py-2 space-y-2 overflow-auto",
+      style: {
+        backgroundColor: "var(--dt-bg-surface)",
+        color: "var(--dt-text-primary)"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[9px] uppercase tracking-wide mb-1", style: { color: "var(--dt-text-muted)" }, children: "StateTraitGraph" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-[9px] mb-1", style: { color: "var(--dt-text-secondary)" }, children: [
+            "Nodes (",
+            graph.nodes.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "space-y-0.5", children: graph.nodes.map((node) => {
+            const fieldPath = node.field.path;
+            const label = node.meta?.label;
+            const tags = node.meta?.tags ?? [];
+            const handleClick = () => {
+              if (onSelectNode) {
+                onSelectNode(fieldPath);
+              }
+            };
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "flex items-center justify-between gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: handleClick,
+                className: "flex-1 flex items-center justify-between gap-2 text-left hover:bg-[var(--dt-bg-element)] rounded px-1 py-0.5 transition-colors",
+                style: selectedFieldPath === fieldPath ? {
+                  backgroundColor: "var(--dt-info-bg)",
+                  boxShadow: "0 0 0 1px var(--dt-info)"
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex flex-col gap-0.5 min-w-0", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "truncate", children: label ?? fieldPath }),
+                    label ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[9px] truncate", style: { color: "var(--dt-text-muted)" }, children: fieldPath }) : null
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[9px]", style: { color: "var(--dt-text-muted)" }, children: [
+                    node.traits.map((t) => t.kind).join(", ") || "\u2014",
+                    tags.length > 0 ? ` \xB7 #${tags.join(" #")}` : ""
+                  ] })
+                ]
+              }
+            ) }, node.id);
+          }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-[9px] mt-2 mb-1", style: { color: "var(--dt-text-secondary)" }, children: [
+            "Resources (",
+            graph.resources.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "space-y-0.5", children: graph.resources.map((res) => {
+            const label = res.meta?.label;
+            const tags = res.meta?.tags ?? [];
+            const conflicts = res.metaConflicts ?? [];
+            return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "min-w-0 flex-1 truncate", children: [
+                res.resourceId,
+                label ? ` \xB7 ${label}` : ""
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-[9px] flex items-center gap-2", style: { color: "var(--dt-text-muted)" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                  "owners: ",
+                  res.ownerFields.length
+                ] }),
+                tags.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+                  "#",
+                  tags.join(" #")
+                ] }) : null,
+                conflicts.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "span",
+                  {
+                    className: "px-1 rounded",
+                    style: {
+                      color: "var(--dt-danger)",
+                      backgroundColor: "var(--dt-danger-bg)",
+                      boxShadow: "0 0 0 1px var(--dt-danger-border)"
+                    },
+                    title: "Multiple conflicting meta declarations detected for this resource id.",
+                    children: [
+                      "meta-conflict+",
+                      conflicts.length
+                    ]
+                  }
+                ) : null
+              ] })
+            ] }, res.resourceId);
+          }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-[9px] mt-2 mb-1", style: { color: "var(--dt-text-secondary)" }, children: [
+            "Edges (",
+            graph.edges.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "space-y-0.5", children: graph.edges.map((edge) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+              edge.from,
+              " \u2192 ",
+              edge.to
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-[9px]", style: { color: "var(--dt-text-muted)" }, children: edge.kind })
+          ] }, edge.id)) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/StateTraitGraphView.tsx
+ensureDevtoolsStyles();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  StateTraitGraphView
+});

package/dist/StateTraitGraphView.d.cts

@@ -0,0 +1,22 @@
+import React from 'react';
+import * as Logix from '@logixjs/core';
+
+interface StateTraitGraphViewProps {
+    /**
+     * Program output from Debug.getModuleTraits(module).
+     * - If not provided, the component only renders a placeholder.
+     */
+    readonly program?: Logix.StateTrait.StateTraitProgram<any>;
+    /**
+     * Optional: notify the caller when the user clicks a field node,
+     * so the caller can coordinate the EffectOp timeline (e.g. filter by fieldPath).
+     */
+    readonly onSelectNode?: (fieldPath: string) => void;
+    /**
+     * Optional: the currently selected fieldPath to highlight in the graph.
+     */
+    readonly selectedFieldPath?: string;
+}
+declare const StateTraitGraphView: React.FC<StateTraitGraphViewProps>;
+
+export { StateTraitGraphView };

package/dist/StateTraitGraphView.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import * as Logix from '@logixjs/core';
+
+interface StateTraitGraphViewProps {
+    /**
+     * Program output from Debug.getModuleTraits(module).
+     * - If not provided, the component only renders a placeholder.
+     */
+    readonly program?: Logix.StateTrait.StateTraitProgram<any>;
+    /**
+     * Optional: notify the caller when the user clicks a field node,
+     * so the caller can coordinate the EffectOp timeline (e.g. filter by fieldPath).
+     */
+    readonly onSelectNode?: (fieldPath: string) => void;
+    /**
+     * Optional: the currently selected fieldPath to highlight in the graph.
+     */
+    readonly selectedFieldPath?: string;
+}
+declare const StateTraitGraphView: React.FC<StateTraitGraphViewProps>;
+
+export { StateTraitGraphView };

package/dist/StateTraitGraphView.js

@@ -0,0 +1,7 @@
+import "./chunk-AELNVFJN.js";
+import {
+  StateTraitGraphView
+} from "./chunk-CZWYV2AZ.js";
+export {
+  StateTraitGraphView
+};

package/dist/chunk-AELNVFJN.js

@@ -0,0 +1,6 @@
+import {
+  ensureDevtoolsStyles
+} from "./chunk-CZWYV2AZ.js";
+
+// src/StateTraitGraphView.tsx
+ensureDevtoolsStyles();

package/dist/chunk-CZWYV2AZ.js

@@ -0,0 +1,157 @@
+// src/style.ts
+var styleMarkerAttribute = "data-logix-devtools-style";
+var ensureDevtoolsStyles = () => {
+  if (typeof document === "undefined") return;
+  const existing = document.querySelector(`link[${styleMarkerAttribute}="true"]`);
+  if (existing) return;
+  let href;
+  try {
+    href = new URL("./style.css", import.meta.url).toString();
+  } catch {
+    return;
+  }
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = href;
+  link.setAttribute(styleMarkerAttribute, "true");
+  document.head.appendChild(link);
+};
+
+// src/internal/ui/graph/StateTraitGraphView.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var StateTraitGraphView = ({
+  program,
+  onSelectNode,
+  selectedFieldPath
+}) => {
+  if (!program) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "text-xs px-3 py-2",
+        style: {
+          color: "var(--dt-text-muted)",
+          backgroundColor: "var(--dt-bg-surface)"
+        },
+        children: "No StateTraitProgram available for this module."
+      }
+    );
+  }
+  const { graph } = program;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "text-[10px] font-mono px-3 py-2 space-y-2 overflow-auto",
+      style: {
+        backgroundColor: "var(--dt-bg-surface)",
+        color: "var(--dt-text-primary)"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "text-[9px] uppercase tracking-wide mb-1", style: { color: "var(--dt-text-muted)" }, children: "StateTraitGraph" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-[9px] mb-1", style: { color: "var(--dt-text-secondary)" }, children: [
+            "Nodes (",
+            graph.nodes.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: graph.nodes.map((node) => {
+            const fieldPath = node.field.path;
+            const label = node.meta?.label;
+            const tags = node.meta?.tags ?? [];
+            const handleClick = () => {
+              if (onSelectNode) {
+                onSelectNode(fieldPath);
+              }
+            };
+            return /* @__PURE__ */ jsx("li", { className: "flex items-center justify-between gap-2", children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: handleClick,
+                className: "flex-1 flex items-center justify-between gap-2 text-left hover:bg-[var(--dt-bg-element)] rounded px-1 py-0.5 transition-colors",
+                style: selectedFieldPath === fieldPath ? {
+                  backgroundColor: "var(--dt-info-bg)",
+                  boxShadow: "0 0 0 1px var(--dt-info)"
+                } : void 0,
+                children: [
+                  /* @__PURE__ */ jsxs("span", { className: "flex flex-col gap-0.5 min-w-0", children: [
+                    /* @__PURE__ */ jsx("span", { className: "truncate", children: label ?? fieldPath }),
+                    label ? /* @__PURE__ */ jsx("span", { className: "text-[9px] truncate", style: { color: "var(--dt-text-muted)" }, children: fieldPath }) : null
+                  ] }),
+                  /* @__PURE__ */ jsxs("span", { className: "text-[9px]", style: { color: "var(--dt-text-muted)" }, children: [
+                    node.traits.map((t) => t.kind).join(", ") || "\u2014",
+                    tags.length > 0 ? ` \xB7 #${tags.join(" #")}` : ""
+                  ] })
+                ]
+              }
+            ) }, node.id);
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-[9px] mt-2 mb-1", style: { color: "var(--dt-text-secondary)" }, children: [
+            "Resources (",
+            graph.resources.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: graph.resources.map((res) => {
+            const label = res.meta?.label;
+            const tags = res.meta?.tags ?? [];
+            const conflicts = res.metaConflicts ?? [];
+            return /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-2", children: [
+              /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate", children: [
+                res.resourceId,
+                label ? ` \xB7 ${label}` : ""
+              ] }),
+              /* @__PURE__ */ jsxs("span", { className: "text-[9px] flex items-center gap-2", style: { color: "var(--dt-text-muted)" }, children: [
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "owners: ",
+                  res.ownerFields.length
+                ] }),
+                tags.length > 0 ? /* @__PURE__ */ jsxs("span", { children: [
+                  "#",
+                  tags.join(" #")
+                ] }) : null,
+                conflicts.length > 0 ? /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    className: "px-1 rounded",
+                    style: {
+                      color: "var(--dt-danger)",
+                      backgroundColor: "var(--dt-danger-bg)",
+                      boxShadow: "0 0 0 1px var(--dt-danger-border)"
+                    },
+                    title: "Multiple conflicting meta declarations detected for this resource id.",
+                    children: [
+                      "meta-conflict+",
+                      conflicts.length
+                    ]
+                  }
+                ) : null
+              ] })
+            ] }, res.resourceId);
+          }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-[9px] mt-2 mb-1", style: { color: "var(--dt-text-secondary)" }, children: [
+            "Edges (",
+            graph.edges.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: graph.edges.map((edge) => /* @__PURE__ */ jsxs("li", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("span", { children: [
+              edge.from,
+              " \u2192 ",
+              edge.to
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "text-[9px]", style: { color: "var(--dt-text-muted)" }, children: edge.kind })
+          ] }, edge.id)) })
+        ] })
+      ]
+    }
+  );
+};
+
+export {
+  ensureDevtoolsStyles,
+  StateTraitGraphView
+};

package/dist/chunk-FNWHBEXD.js

@@ -0,0 +1,123 @@
+// src/internal/snapshot/index.ts
+import * as Logix from "@logixjs/core";
+import { Context, Effect, Layer, Stream } from "effect";
+var clearDevtoolsEvents = Logix.Debug.clearDevtoolsEvents;
+var setInstanceLabel = Logix.Debug.setInstanceLabel;
+var getInstanceLabel = Logix.Debug.getInstanceLabel;
+var snapshotOverride;
+var snapshotOverrideInfo;
+var overrideSnapshotToken = Number.MIN_SAFE_INTEGER;
+var nextOverrideSnapshotToken = () => {
+  overrideSnapshotToken += 1;
+  return overrideSnapshotToken;
+};
+var isRecord = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+var asNonEmptyString = (value) => typeof value === "string" && value.length > 0 ? value : void 0;
+var asNonNegativeInt = (value) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
+  const n = Math.floor(value);
+  return n >= 0 ? n : void 0;
+};
+var normalizeTxnSeqFromTxnId = (txnId, instanceId) => {
+  if (!txnId) return void 0;
+  const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const m = instanceId ? txnId.match(new RegExp(`^${escapeRe(instanceId)}::t(\\d+)$`)) : txnId.match(/::t(\d+)$/);
+  if (!m) return void 0;
+  const n = Number(m[1]);
+  return Number.isFinite(n) && n >= 0 ? Math.floor(n) : void 0;
+};
+var normalizeDevtoolsSnapshot = (snapshot) => {
+  const events = snapshot.events.map((e, index) => {
+    if (!isRecord(e)) {
+      return e;
+    }
+    const instanceId = asNonEmptyString(e.instanceId);
+    const txnId = asNonEmptyString(e.txnId);
+    const txnSeq = asNonNegativeInt(e.txnSeq) ?? normalizeTxnSeqFromTxnId(txnId, instanceId) ?? 0;
+    const eventSeq = asNonNegativeInt(e.eventSeq) ?? index + 1;
+    const eventId = asNonEmptyString(e.eventId) ?? (instanceId ? `${instanceId}::e${eventSeq}` : `unknown::e${eventSeq}`);
+    const patched = { ...e, eventId, eventSeq, txnSeq };
+    if (!patched.txnId && instanceId && txnSeq > 0) {
+      patched.txnId = `${instanceId}::t${txnSeq}`;
+    }
+    return patched;
+  });
+  return { ...snapshot, events };
+};
+var listeners = /* @__PURE__ */ new Set();
+var unsubscribeCore;
+var notify = () => {
+  for (const listener of listeners) {
+    listener();
+  }
+};
+var ensureCoreSubscribed = () => {
+  if (unsubscribeCore) return;
+  unsubscribeCore = Logix.Debug.subscribeDevtoolsSnapshot(() => {
+    if (snapshotOverride) return;
+    notify();
+  });
+};
+var hasDevtoolsSnapshotOverride = () => snapshotOverride != null;
+var getDevtoolsSnapshotOverrideInfo = () => snapshotOverrideInfo;
+var setDevtoolsSnapshotOverride = (snapshot, info) => {
+  snapshotOverride = normalizeDevtoolsSnapshot({
+    ...snapshot,
+    snapshotToken: nextOverrideSnapshotToken()
+  });
+  snapshotOverrideInfo = info;
+  notify();
+};
+var clearDevtoolsSnapshotOverride = () => {
+  snapshotOverride = void 0;
+  snapshotOverrideInfo = void 0;
+  notify();
+};
+var getDevtoolsSnapshot = () => snapshotOverride ?? Logix.Debug.getDevtoolsSnapshot();
+var getDevtoolsSnapshotToken = () => getDevtoolsSnapshot().snapshotToken;
+var subscribeDevtoolsSnapshot = (listener) => {
+  listeners.add(listener);
+  ensureCoreSubscribed();
+  return () => {
+    listeners.delete(listener);
+    if (listeners.size === 0 && unsubscribeCore) {
+      unsubscribeCore();
+      unsubscribeCore = void 0;
+    }
+  };
+};
+var subscribeDevtoolsSnapshotToken = subscribeDevtoolsSnapshot;
+var devtoolsLayer = Logix.Debug.devtoolsHubLayer();
+var DevtoolsSnapshotStore = class extends Context.Tag("Logix/DevtoolsSnapshotStore")() {
+};
+var devtoolsSnapshotService = {
+  get: Effect.sync(() => getDevtoolsSnapshot()),
+  changes: Stream.async((emit) => {
+    const listener = () => {
+      emit.single(getDevtoolsSnapshot());
+    };
+    const unsubscribe = subscribeDevtoolsSnapshot(listener);
+    return Effect.sync(unsubscribe);
+  })
+};
+var devtoolsSnapshotLayer = Layer.succeed(
+  DevtoolsSnapshotStore,
+  devtoolsSnapshotService
+);
+
+export {
+  clearDevtoolsEvents,
+  setInstanceLabel,
+  getInstanceLabel,
+  hasDevtoolsSnapshotOverride,
+  getDevtoolsSnapshotOverrideInfo,
+  setDevtoolsSnapshotOverride,
+  clearDevtoolsSnapshotOverride,
+  getDevtoolsSnapshot,
+  getDevtoolsSnapshotToken,
+  subscribeDevtoolsSnapshot,
+  subscribeDevtoolsSnapshotToken,
+  devtoolsLayer,
+  DevtoolsSnapshotStore,
+  devtoolsSnapshotLayer
+};