@epoch32/visage 0.0.0-stage → 1.0.0

package/src/devtools/DomTab.tsx

@@ -0,0 +1,134 @@
+import { Switch } from "../ui/switch";
+import type { DevToolsHub } from "./hub";
+
+interface DomTabProps {
+  hub: DevToolsHub;
+}
+
+export function DomTab(props: DomTabProps) {
+  return (
+    <div style={{ flex: 1, padding: "24px", overflowY: "auto", background: "#090d16" }}>
+      <div style={{ maxWidth: "700px", margin: "0 auto" }}>
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            marginBottom: "20px"
+          }}
+        >
+          <div>
+            <h3
+              style={{ margin: "0 0 6px 0", color: "#f8fafc", fontSize: "16px", fontWeight: 700 }}
+            >
+              Real-Time DOM Mutation Highlighter
+            </h3>
+            <p style={{ margin: 0, color: "#94a3b8", fontSize: "13px", lineHeight: 1.5 }}>
+              Visage uses zero Virtual DOM and fine-grained reactivity. Only exact text nodes and
+              attributes update in-place.
+            </p>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+            <span
+              style={{
+                fontSize: "11px",
+                fontWeight: 700,
+                letterSpacing: "0.04em",
+                color: () => (props.hub.highlightDOM() ? "#10b981" : "#64748b")
+              }}
+            >
+              {() => (props.hub.highlightDOM() ? "ENABLED" : "DISABLED")}
+            </span>
+            <Switch
+              checked={props.hub.highlightDOM}
+              onCheckedChange={(val) => props.hub.highlightDOM.set(val)}
+            />
+          </div>
+        </div>
+
+        <div
+          style={{
+            background: "#0c111d",
+            border: "1px solid #1e293b",
+            borderRadius: "8px",
+            padding: "16px",
+            marginBottom: "20px"
+          }}
+        >
+          <h4 style={{ margin: "0 0 10px 0", color: "#38bdf8", fontSize: "13px", fontWeight: 600 }}>
+            Usage Instructions:
+          </h4>
+          <ul
+            style={{
+              margin: 0,
+              paddingLeft: "20px",
+              color: "#cbd5e1",
+              fontSize: "13px",
+              lineHeight: 1.6
+            }}
+          >
+            <li>Toggle the switch above to enable visual flashing outlines across your app.</li>
+            <li>Interact with buttons, form inputs, tabs, and modals in your application.</li>
+            <li>
+              Notice that <strong>only the exact updated node flashes</strong> without re-rendering
+              the whole component or tree.
+            </li>
+          </ul>
+        </div>
+
+        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "12px" }}>
+          <div
+            style={{
+              background: "#0c111d",
+              border: "1px solid #1e293b",
+              borderRadius: "8px",
+              padding: "14px"
+            }}
+          >
+            <div
+              style={{
+                fontWeight: 700,
+                color: "#f87171",
+                marginBottom: "6px",
+                fontSize: "12px",
+                textTransform: "uppercase",
+                letterSpacing: "0.04em"
+              }}
+            >
+              Virtual DOM Model
+            </div>
+            <p style={{ margin: 0, color: "#94a3b8", fontSize: "12px", lineHeight: 1.5 }}>
+              State changes re-run entire component functions, allocate temporary Virtual DOM nodes,
+              and diff tree structures.
+            </p>
+          </div>
+          <div
+            style={{
+              background: "#0c111d",
+              border: "1px solid #1e293b",
+              borderRadius: "8px",
+              padding: "14px"
+            }}
+          >
+            <div
+              style={{
+                fontWeight: 700,
+                color: "#34d399",
+                marginBottom: "6px",
+                fontSize: "12px",
+                textTransform: "uppercase",
+                letterSpacing: "0.04em"
+              }}
+            >
+              Visage Reactive Engine
+            </div>
+            <p style={{ margin: 0, color: "#94a3b8", fontSize: "12px", lineHeight: 1.5 }}>
+              Component functions execute once during mounting. Signals push direct in-place
+              mutations at native DOM speed.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/devtools/GraphInspector.tsx

@@ -0,0 +1,196 @@
+import { Show } from "../dom";
+import type { WritableSignal } from "../signals";
+import type { SignalRecord } from "./types";
+
+interface GraphInspectorProps {
+  selectedNode: () => SignalRecord | null;
+  selectedId: WritableSignal<string | null>;
+  getDependencies: (node: SignalRecord) => SignalRecord[];
+  getDependents: (node: SignalRecord) => SignalRecord[];
+  formatJSON: (val: any) => string;
+}
+
+export function GraphInspector(props: GraphInspectorProps) {
+  return (
+    <div
+      style={{
+        width: "320px",
+        borderLeft: "1px solid #1e293b",
+        background: "#090d16",
+        padding: "16px",
+        overflowY: "auto"
+      }}
+    >
+      <Show
+        when={props.selectedNode}
+        fallback={
+          <div
+            style={{
+              color: "#64748b",
+              textAlign: "center",
+              marginTop: "30px",
+              fontSize: "12px",
+              lineHeight: 1.6
+            }}
+          >
+            <p>
+              Select any DAG node to inspect live dependencies, downstream subscribers, and reactive
+              version history.
+            </p>
+            <div
+              style={{
+                marginTop: "16px",
+                padding: "12px",
+                background: "#0f172a",
+                borderRadius: "6px",
+                textAlign: "left"
+              }}
+            >
+              <div
+                style={{ color: "#94a3b8", fontWeight: 600, marginBottom: "4px", fontSize: "11px" }}
+              >
+                Legend:
+              </div>
+              <div style={{ color: "#38bdf8", fontSize: "11px" }}>
+                [SIG] Upstream Source Signals
+              </div>
+              <div style={{ color: "#c084fc", fontSize: "11px" }}>[CMP] Derived Computeds</div>
+            </div>
+          </div>
+        }
+      >
+        {(node: () => SignalRecord) => {
+          const deps = () => props.getDependencies(node());
+          const targets = () => props.getDependents(node());
+
+          return (
+            <div>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "flex-start",
+                  marginBottom: "12px"
+                }}
+              >
+                <div>
+                  <h4 style={{ margin: "0 0 2px 0", color: "#f1f5f9", fontSize: "15px" }}>
+                    {() => node().name}
+                  </h4>
+                  <span style={{ fontSize: "11px", color: "#64748b" }}>ID: {() => node().id}</span>
+                </div>
+                <button
+                  type="button"
+                  class="visage-devtools-btn"
+                  onClick={() => props.selectedId.set(null)}
+                  title="Clear Selection"
+                >
+                  Clear
+                </button>
+              </div>
+
+              <div style={{ display: "flex", gap: "6px", marginBottom: "16px" }}>
+                <span
+                  class="visage-devtools-badge"
+                  style={{
+                    background: () => (node().type === "computed" ? "#581c87" : "#0369a1"),
+                    color: "#fff"
+                  }}
+                >
+                  {() => node().type.toUpperCase()}
+                </span>
+                <span class="visage-devtools-badge">VERSION: {() => node().version()}</span>
+              </div>
+
+              {/* Current Value */}
+              <div style={{ fontSize: "12px", color: "#94a3b8", marginBottom: "6px" }}>
+                Live Value:
+              </div>
+              <pre class="visage-devtools-json" style={{ marginBottom: "16px" }}>
+                {() => props.formatJSON(node().getValue())}
+              </pre>
+
+              {/* Upstream Dependencies (Inputs) */}
+              <div style={{ marginBottom: "16px" }}>
+                <div
+                  style={{
+                    fontSize: "11px",
+                    fontWeight: 700,
+                    textTransform: "uppercase",
+                    color: "#38bdf8",
+                    marginBottom: "6px"
+                  }}
+                >
+                  Upstream Inputs ({() => deps().length})
+                </div>
+                {() =>
+                  deps().length > 0 ? (
+                    <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+                      {deps().map((d) => (
+                        <div
+                          class="visage-graph-pill source"
+                          style={{
+                            width: "100%",
+                            justifyContent: "space-between",
+                            padding: "6px 8px"
+                          }}
+                          onClick={() => props.selectedId.set(d.id)}
+                        >
+                          <span>{d.name}</span>
+                          <span style={{ color: "#94a3b8" }}>v{d.version()}</span>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div style={{ fontSize: "11px", color: "#64748b" }}>
+                      None (Root Reactive Source)
+                    </div>
+                  )
+                }
+              </div>
+
+              {/* Downstream Consumers (Outputs) */}
+              <div>
+                <div
+                  style={{
+                    fontSize: "11px",
+                    fontWeight: 700,
+                    textTransform: "uppercase",
+                    color: "#c084fc",
+                    marginBottom: "6px"
+                  }}
+                >
+                  Downstream Consumers ({() => targets().length})
+                </div>
+                {() =>
+                  targets().length > 0 ? (
+                    <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
+                      {targets().map((t) => (
+                        <div
+                          class="visage-graph-pill target"
+                          style={{
+                            width: "100%",
+                            justifyContent: "space-between",
+                            padding: "6px 8px"
+                          }}
+                          onClick={() => props.selectedId.set(t.id)}
+                        >
+                          <span>{t.name}</span>
+                          <span style={{ color: "#94a3b8" }}>v{t.version()}</span>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div style={{ fontSize: "11px", color: "#64748b" }}>
+                      None (Leaf / UI Consumer)
+                    </div>
+                  )
+                }
+              </div>
+            </div>
+          );
+        }}
+      </Show>
+    </div>
+  );
+}

package/src/devtools/GraphTab.tsx

@@ -0,0 +1,315 @@
+import { For } from "../dom";
+import { createSignal, type WritableSignal } from "../signals";
+import { GraphInspector } from "./GraphInspector";
+import type { DevToolsHub } from "./hub";
+import type { SignalRecord } from "./types";
+
+interface GraphTabProps {
+  hub: DevToolsHub;
+  selectedId: WritableSignal<string | null>;
+  searchQuery: WritableSignal<string>;
+  formatJSON: (val: any) => string;
+}
+
+export function GraphTab(props: GraphTabProps) {
+  const [filterType, setFilterType] = createSignal<"all" | "signal" | "computed">("all", {
+    internal: true
+  });
+  const [hoveredId, setHoveredId] = createSignal<string | null>(null, { internal: true });
+
+  const allSignals = () => props.hub.signalsList();
+
+  const getDependencies = (node: SignalRecord): SignalRecord[] => {
+    const depIds = node.dependencies ? node.dependencies() : [];
+    if (depIds.length === 0) return [];
+    return allSignals().filter((s) => depIds.includes(s.id));
+  };
+
+  const getDependents = (node: SignalRecord): SignalRecord[] => {
+    const directDependents = node.dependents ? node.dependents() : [];
+    return allSignals().filter(
+      (s) => directDependents.includes(s.id) || s.dependencies?.().includes(node.id)
+    );
+  };
+
+  const activeFocusId = () => hoveredId() ?? props.selectedId();
+
+  const focusedDeps = () => {
+    const id = activeFocusId();
+    if (!id) return [];
+    const node = allSignals().find((s) => s.id === id);
+    if (!node) return [];
+    return getDependencies(node).map((s) => s.id);
+  };
+
+  const focusedTargets = () => {
+    const id = activeFocusId();
+    if (!id) return [];
+    const node = allSignals().find((s) => s.id === id);
+    if (!node) return [];
+    return getDependents(node).map((s) => s.id);
+  };
+
+  const filteredSignals = () =>
+    allSignals().filter((s) => {
+      const q = props.searchQuery().toLowerCase().trim();
+      const matchQuery = !q || s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q);
+      const matchType = filterType() === "all" || s.type === filterType();
+      return matchQuery && matchType;
+    });
+
+  const stateSignals = () => filteredSignals().filter((s) => s.type === "signal");
+  const computedSignals = () => filteredSignals().filter((s) => s.type === "computed");
+
+  const selectedNode = () => {
+    const id = props.selectedId();
+    if (!id) return null;
+    return allSignals().find((s) => s.id === id) ?? null;
+  };
+
+  return (
+    <div class="visage-graph-container">
+      {/* Top Toolbar */}
+      <div class="visage-graph-toolbar">
+        <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
+          <input
+            class="visage-devtools-input"
+            style={{ width: "200px" }}
+            placeholder="Filter DAG graph..."
+            value={props.searchQuery}
+            onInput={(e: any) => props.searchQuery.set(e.target.value)}
+          />
+
+          <div style={{ display: "flex", gap: "4px" }}>
+            <button
+              type="button"
+              class={() => `visage-devtools-btn ${filterType() === "all" ? "active" : ""}`}
+              onClick={() => setFilterType("all")}
+            >
+              All ({() => filteredSignals().length})
+            </button>
+            <button
+              type="button"
+              class={() => `visage-devtools-btn ${filterType() === "signal" ? "active" : ""}`}
+              onClick={() => setFilterType("signal")}
+            >
+              Signals ({() => stateSignals().length})
+            </button>
+            <button
+              type="button"
+              class={() => `visage-devtools-btn ${filterType() === "computed" ? "active" : ""}`}
+              onClick={() => setFilterType("computed")}
+            >
+              Computeds ({() => computedSignals().length})
+            </button>
+          </div>
+        </div>
+
+        <div
+          style={{
+            fontSize: "11px",
+            color: "#64748b",
+            display: "flex",
+            gap: "14px",
+            alignItems: "center"
+          }}
+        >
+          <span style={{ color: "#38bdf8" }}>[SIG] Upstream</span>
+          <span style={{ color: "#c084fc" }}>[CMP] Derived</span>
+          <span style={{ color: "#10b981" }}>Glitch-Free DAG</span>
+        </div>
+      </div>
+
+      {/* Main Reactive Canvas */}
+      <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
+        <div class="visage-graph-canvas">
+          {/* Column 1: Root Reactive State (Sources) */}
+          <div class="visage-graph-column">
+            <div class="visage-graph-col-header">
+              <span class="visage-graph-pulse" />
+              <span>Reactive Sources ({() => stateSignals().length})</span>
+            </div>
+
+            <For each={stateSignals}>
+              {(node: SignalRecord) => {
+                const isSelected = () => props.selectedId() === node.id;
+                const isDep = () => focusedDeps().includes(node.id);
+                const isTarget = () => focusedTargets().includes(node.id);
+                const isDimmed = () =>
+                  activeFocusId() !== null && !isSelected() && !isDep() && !isTarget();
+
+                const dependents = () => getDependents(node);
+
+                return (
+                  <div
+                    class={() =>
+                      `visage-graph-node ${isSelected() ? "selected" : ""} ${isDep() ? "is-dependency" : ""} ${isTarget() ? "is-dependent" : ""} ${isDimmed() ? "is-dimmed" : ""}`
+                    }
+                    onClick={() => props.selectedId.set(node.id)}
+                    onMouseEnter={() => setHoveredId(node.id)}
+                    onMouseLeave={() => setHoveredId(null)}
+                  >
+                    <div class="visage-graph-node-title">
+                      <span
+                        style={{
+                          color: "#f8fafc",
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: "6px"
+                        }}
+                      >
+                        <span
+                          style={{
+                            fontSize: "9px",
+                            fontWeight: 700,
+                            padding: "1px 4px",
+                            borderRadius: "3px",
+                            background: "#082f49",
+                            color: "#38bdf8",
+                            border: "1px solid #0369a1"
+                          }}
+                        >
+                          SIG
+                        </span>
+                        <span>{node.name}</span>
+                      </span>
+                      <span class="visage-devtools-badge">v{() => node.version()}</span>
+                    </div>
+
+                    <div class="visage-graph-node-val">{() => JSON.stringify(node.getValue())}</div>
+
+                    <div
+                      style={{ marginTop: "8px", display: "flex", flexWrap: "wrap", gap: "4px" }}
+                    >
+                      {() =>
+                        dependents().length > 0 ? (
+                          <span style={{ fontSize: "10px", color: "#94a3b8" }}>
+                            {dependents().length} consumer{dependents().length > 1 ? "s" : ""}
+                          </span>
+                        ) : (
+                          <span style={{ fontSize: "10px", color: "#475569" }}>Root State</span>
+                        )
+                      }
+                    </div>
+                  </div>
+                );
+              }}
+            </For>
+          </div>
+
+          {/* Connectors Visual Divider */}
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              color: "#334155",
+              fontSize: "14px",
+              fontWeight: 700,
+              padding: "0 10px"
+            }}
+          >
+            <span>&gt;</span>
+          </div>
+
+          {/* Column 2: Derived Computeds */}
+          <div class="visage-graph-column">
+            <div class="visage-graph-col-header">
+              <span class="visage-graph-pulse computed" />
+              <span>Derived Computeds ({() => computedSignals().length})</span>
+            </div>
+
+            <For each={computedSignals}>
+              {(node: SignalRecord) => {
+                const isSelected = () => props.selectedId() === node.id;
+                const isDep = () => focusedDeps().includes(node.id);
+                const isTarget = () => focusedTargets().includes(node.id);
+                const isDimmed = () =>
+                  activeFocusId() !== null && !isSelected() && !isDep() && !isTarget();
+
+                const deps = () => getDependencies(node);
+
+                return (
+                  <div
+                    class={() =>
+                      `visage-graph-node ${isSelected() ? "selected" : ""} ${isDep() ? "is-dependency" : ""} ${isTarget() ? "is-dependent" : ""} ${isDimmed() ? "is-dimmed" : ""}`
+                    }
+                    onClick={() => props.selectedId.set(node.id)}
+                    onMouseEnter={() => setHoveredId(node.id)}
+                    onMouseLeave={() => setHoveredId(null)}
+                  >
+                    <div class="visage-graph-node-title">
+                      <span
+                        style={{
+                          color: "#f8fafc",
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: "6px"
+                        }}
+                      >
+                        <span
+                          style={{
+                            fontSize: "9px",
+                            fontWeight: 700,
+                            padding: "1px 4px",
+                            borderRadius: "3px",
+                            background: "#3b0764",
+                            color: "#c084fc",
+                            border: "1px solid #581c87"
+                          }}
+                        >
+                          CMP
+                        </span>
+                        <span>{node.name}</span>
+                      </span>
+                      <span
+                        class="visage-devtools-badge"
+                        style={{ background: "#581c87", color: "#fff" }}
+                      >
+                        v{() => node.version()}
+                      </span>
+                    </div>
+
+                    <div class="visage-graph-node-val">{() => JSON.stringify(node.getValue())}</div>
+
+                    <div
+                      style={{ marginTop: "8px", display: "flex", flexWrap: "wrap", gap: "4px" }}
+                    >
+                      {() =>
+                        deps().length > 0 ? (
+                          deps().map((d) => (
+                            <span
+                              class="visage-graph-pill source"
+                              onClick={(e: MouseEvent) => {
+                                e.stopPropagation();
+                                props.selectedId.set(d.id);
+                              }}
+                            >
+                              in: {d.name}
+                            </span>
+                          ))
+                        ) : (
+                          <span style={{ fontSize: "10px", color: "#64748b" }}>Memoized</span>
+                        )
+                      }
+                    </div>
+                  </div>
+                );
+              }}
+            </For>
+          </div>
+        </div>
+
+        {/* Modular Node Detail Side Inspector */}
+        <GraphInspector
+          selectedNode={selectedNode}
+          selectedId={props.selectedId}
+          getDependencies={getDependencies}
+          getDependents={getDependents}
+          formatJSON={props.formatJSON}
+        />
+      </div>
+    </div>
+  );
+}