@epoch32/visage 1.0.0 → 1.1.1

package/dist/{src/charts → charts}/index.js

@@ -848,10 +848,12 @@ class Signal {
   _value;
   _subscribers = new Set;
   _equals;
+  _onSet;
   version = 0;
-  constructor(initialValue, equals) {
+  constructor(initialValue, equals, onSet) {
     this._value = initialValue;
     this._equals = equals ?? Object.is;
+    this._onSet = onSet;
   }
   get() {
     if (currentSubscriber !== null && currentSubscriber.state !== 3 /* DISPOSED */) {
@@ -876,6 +878,9 @@ class Signal {
     }
     this._value = newValue;
     this.version++;
+    if (this._onSet) {
+      this._onSet(newValue);
+    }
     batch(() => {
       this.notify();
     });
@@ -901,11 +906,91 @@ class Signal {
     }
   }
 }
+function resolveStorage(storageOption) {
+  if (storageOption && typeof storageOption === "object") {
+    return storageOption;
+  }
+  if (storageOption === "session") {
+    try {
+      if (typeof sessionStorage !== "undefined")
+        return sessionStorage;
+    } catch {}
+    try {
+      if (typeof window !== "undefined" && window.sessionStorage) {
+        return window.sessionStorage;
+      }
+    } catch {}
+    try {
+      if (typeof globalThis !== "undefined" && globalThis.sessionStorage) {
+        return globalThis.sessionStorage;
+      }
+    } catch {}
+    return null;
+  }
+  try {
+    if (typeof localStorage !== "undefined")
+      return localStorage;
+  } catch {}
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return window.localStorage;
+    }
+  } catch {}
+  try {
+    if (typeof globalThis !== "undefined" && globalThis.localStorage) {
+      return globalThis.localStorage;
+    }
+  } catch {}
+  return null;
+}
 function signal(initialValue, optionsOrEquals) {
   const equals = typeof optionsOrEquals === "function" ? optionsOrEquals : optionsOrEquals?.equals;
   const isInternal = typeof optionsOrEquals === "object" ? optionsOrEquals?.internal : false;
   const customName = typeof optionsOrEquals === "object" ? optionsOrEquals?.name : undefined;
-  const s = new Signal(initialValue, equals);
+  const persistOption = typeof optionsOrEquals === "object" ? optionsOrEquals?.persist : undefined;
+  const persistConfig = persistOption ? typeof persistOption === "string" ? { key: persistOption } : persistOption : undefined;
+  let effectiveInitial = initialValue;
+  const storage = persistConfig ? resolveStorage(persistConfig.storage) : null;
+  const serialize = persistConfig?.serialize ?? JSON.stringify;
+  const deserialize = persistConfig?.deserialize ?? JSON.parse;
+  if (persistConfig && storage) {
+    try {
+      const stored = storage.getItem(persistConfig.key);
+      if (stored !== null) {
+        effectiveInitial = deserialize(stored);
+      }
+    } catch {}
+  }
+  let isSyncing = false;
+  const onSet = persistConfig && storage ? (val) => {
+    if (isSyncing)
+      return;
+    try {
+      storage.setItem(persistConfig.key, serialize(val));
+    } catch {}
+  } : undefined;
+  const s = new Signal(effectiveInitial, equals, onSet);
+  if (persistConfig && storage && (persistConfig.syncTabs ?? true) && typeof window !== "undefined" && typeof window.addEventListener === "function") {
+    const onStorage = (e) => {
+      if (e.key === persistConfig.key) {
+        try {
+          const nextVal = e.newValue !== null ? deserialize(e.newValue) : initialValue;
+          isSyncing = true;
+          try {
+            s.set(nextVal);
+          } finally {
+            isSyncing = false;
+          }
+        } catch {}
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    if (currentScope) {
+      currentScope.addCleanup(() => {
+        window.removeEventListener("storage", onStorage);
+      });
+    }
+  }
   const accessor = (...args) => {
     if (args.length === 0) {
       return s.get();

package/dist/charts/path.d.ts

@@ -0,0 +1,27 @@
+import type { CurveType, Point } from "./types";
+export interface PathLineOptions {
+    curve?: CurveType;
+}
+/**
+ * Generates an SVG path `d` string representing a polyline or smooth spline curve.
+ */
+export declare function pathLine(points: Point[], options?: PathLineOptions): string;
+export interface PathAreaOptions {
+    curve?: CurveType;
+}
+/**
+ * Generates an SVG path `d` string for a closed area polygon, anchored to a baseline Y coordinate.
+ */
+export declare function pathArea(points: Point[], baselineY: number, options?: PathAreaOptions): string;
+export interface ArcOptions {
+    cx: number;
+    cy: number;
+    innerRadius: number;
+    outerRadius: number;
+    startAngle: number;
+    endAngle: number;
+}
+/**
+ * Generates an SVG arc path string for a pie or donut slice.
+ */
+export declare function pathArc(options: ArcOptions): string;

package/dist/charts/scale.d.ts

@@ -0,0 +1,23 @@
+import type { BandScale, LinearScale } from "./types";
+/**
+ * Calculates human-friendly rounded tick marks across a numerical interval.
+ * Uses the standard Wilkinson-style step rounding algorithm.
+ */
+export declare function generateNiceTicks(min: number, max: number, count?: number): number[];
+export interface LinearScaleOptions {
+    clamp?: boolean;
+    nice?: boolean;
+}
+/**
+ * Creates a continuous linear mathematical scale mapping input domain to SVG pixel range.
+ */
+export declare function createLinearScale(domain: [number, number], range: [number, number], options?: LinearScaleOptions): LinearScale;
+export interface BandScaleOptions {
+    paddingInner?: number;
+    paddingOuter?: number;
+}
+/**
+ * Creates an ordinal band scale mapping categorical strings (e.g. months, labels)
+ * to partitioned SVG pixel bands (used by Bar and column charts).
+ */
+export declare function createBandScale(domain: any[], range: [number, number], options?: BandScaleOptions): BandScale;

package/dist/charts/types.d.ts

@@ -0,0 +1,43 @@
+export interface Margin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export type CurveType = "linear" | "smooth" | "step";
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface LinearScale {
+    type: "linear";
+    (val: number): number;
+    domain: [number, number];
+    range: [number, number];
+    invert: (pixel: number) => number;
+    ticks: (count?: number) => number[];
+}
+export interface BandScale {
+    type: "band";
+    (val: any): number;
+    domain: any[];
+    range: [number, number];
+    bandwidth: () => number;
+    step: () => number;
+    ticks: () => any[];
+}
+export type AnyScale = LinearScale | BandScale;
+export interface HoverState {
+    active: boolean;
+    x: number;
+    y: number;
+    index: number;
+    datum?: any;
+}
+export interface SeriesMeta {
+    id: string;
+    dataKey: string;
+    type: "line" | "area" | "bar";
+    color?: string;
+    name?: string;
+}

package/dist/devtools/DomTab.d.ts

@@ -0,0 +1,6 @@
+import type { DevToolsHub } from "./hub";
+interface DomTabProps {
+    hub: DevToolsHub;
+}
+export declare function DomTab(props: DomTabProps): import("..").JSX.Element;
+export {};

package/dist/devtools/GraphInspector.d.ts

@@ -0,0 +1,11 @@
+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 declare function GraphInspector(props: GraphInspectorProps): import("..").JSX.Element;
+export {};

package/dist/devtools/GraphTab.d.ts

@@ -0,0 +1,10 @@
+import { type WritableSignal } from "../signals";
+import type { DevToolsHub } from "./hub";
+interface GraphTabProps {
+    hub: DevToolsHub;
+    selectedId: WritableSignal<string | null>;
+    searchQuery: WritableSignal<string>;
+    formatJSON: (val: any) => string;
+}
+export declare function GraphTab(props: GraphTabProps): import("..").JSX.Element;
+export {};

package/dist/devtools/QueryTab.d.ts

@@ -0,0 +1,10 @@
+import type { WritableSignal } from "../signals";
+import type { DevToolsHub } from "./hub";
+interface QueryTabProps {
+    hub: DevToolsHub;
+    selectedId: WritableSignal<string | null>;
+    searchQuery: WritableSignal<string>;
+    formatJSON: (val: any) => string;
+}
+export declare function QueryTab(props: QueryTabProps): import("..").JSX.Element;
+export {};

package/dist/devtools/RpcTab.d.ts

@@ -0,0 +1,10 @@
+import type { WritableSignal } from "../signals";
+import type { DevToolsHub } from "./hub";
+interface RpcTabProps {
+    hub: DevToolsHub;
+    selectedId: WritableSignal<string | null>;
+    searchQuery: WritableSignal<string>;
+    formatJSON: (val: any) => string;
+}
+export declare function RpcTab(props: RpcTabProps): import("..").JSX.Element;
+export {};

package/dist/devtools/SignalsTab.d.ts

@@ -0,0 +1,10 @@
+import type { WritableSignal } from "../signals";
+import type { DevToolsHub } from "./hub";
+interface SignalsTabProps {
+    hub: DevToolsHub;
+    selectedId: WritableSignal<string | null>;
+    searchQuery: WritableSignal<string>;
+    formatJSON: (val: any) => string;
+}
+export declare function SignalsTab(props: SignalsTabProps): import("..").JSX.Element;
+export {};

package/dist/devtools/component.d.ts

@@ -0,0 +1,2 @@
+import type { DevToolsOptions } from "./types";
+export declare function VisageDevTools(props?: DevToolsOptions): import("..").JSX.Element;

package/dist/devtools/highlighter.d.ts

@@ -0,0 +1,2 @@
+export declare function highlightElement(element: Element | null): void;
+export declare function setupDomMutationHighlighter(enabledGetter: () => boolean): void;

package/dist/devtools/hub.d.ts

@@ -0,0 +1,41 @@
+import type { QueryClient } from "../query/query-client";
+import type { DevToolsTab, QueryRecord, RpcRecord, SignalRecord } from "./types";
+export declare class DevToolsHub {
+    readonly isOpen: import("..").WritableSignal<boolean>;
+    readonly activeTab: import("..").WritableSignal<DevToolsTab>;
+    readonly highlightDOM: import("..").WritableSignal<boolean>;
+    readonly searchQuery: import("..").WritableSignal<string>;
+    private _signalsMap;
+    readonly signalsList: import("..").WritableSignal<SignalRecord[]>;
+    private _queriesMap;
+    readonly queriesList: import("..").WritableSignal<QueryRecord[]>;
+    readonly rpcLogs: import("..").WritableSignal<RpcRecord[]>;
+    private _queryClients;
+    private _signalCounter;
+    constructor();
+    toggle(): void;
+    setTab(tab: DevToolsTab): void;
+    registerSignal(options: {
+        id?: string;
+        name?: string;
+        type?: "signal" | "computed";
+        getValue: () => any;
+        version: () => number;
+        dependencies?: () => string[];
+        dependents?: () => string[];
+        subscribersCount?: () => number;
+    }): string;
+    unregisterSignal(id: string): void;
+    clearSignals(): void;
+    clearQueries(): void;
+    clearAll(): void;
+    private refreshSignals;
+    attachQueryClient(client: QueryClient): void;
+    logRpcCall(record: Omit<RpcRecord, "status" | "startTime"> & {
+        status?: RpcRecord["status"];
+    }): string;
+    updateRpcCall(id: string, updates: Partial<RpcRecord>): void;
+    logRpcEvent(id: string, data: any): void;
+    clearLogs(): void;
+}
+export declare const devtoolsHub: DevToolsHub;

package/dist/devtools/index.d.ts

@@ -0,0 +1,9 @@
+import type { QueryClient } from "../query/query-client";
+export { VisageDevTools } from "./component";
+export { highlightElement } from "./highlighter";
+export { DevToolsHub, devtoolsHub } from "./hub";
+export type { DevToolsOptions, DevToolsTab, QueryRecord, RpcRecord, SignalRecord } from "./types";
+/**
+ * Connect QueryClient or RPC client to Visage DevTools
+ */
+export declare function connectDevTools(client: QueryClient): void;

package/dist/{src/devtools → devtools}/index.js

@@ -848,10 +848,12 @@ class Signal {
   _value;
   _subscribers = new Set;
   _equals;
+  _onSet;
   version = 0;
-  constructor(initialValue, equals) {
+  constructor(initialValue, equals, onSet) {
     this._value = initialValue;
     this._equals = equals ?? Object.is;
+    this._onSet = onSet;
   }
   get() {
     if (currentSubscriber !== null && currentSubscriber.state !== 3 /* DISPOSED */) {
@@ -876,6 +878,9 @@ class Signal {
     }
     this._value = newValue;
     this.version++;
+    if (this._onSet) {
+      this._onSet(newValue);
+    }
     batch(() => {
       this.notify();
     });
@@ -901,11 +906,91 @@ class Signal {
     }
   }
 }
+function resolveStorage(storageOption) {
+  if (storageOption && typeof storageOption === "object") {
+    return storageOption;
+  }
+  if (storageOption === "session") {
+    try {
+      if (typeof sessionStorage !== "undefined")
+        return sessionStorage;
+    } catch {}
+    try {
+      if (typeof window !== "undefined" && window.sessionStorage) {
+        return window.sessionStorage;
+      }
+    } catch {}
+    try {
+      if (typeof globalThis !== "undefined" && globalThis.sessionStorage) {
+        return globalThis.sessionStorage;
+      }
+    } catch {}
+    return null;
+  }
+  try {
+    if (typeof localStorage !== "undefined")
+      return localStorage;
+  } catch {}
+  try {
+    if (typeof window !== "undefined" && window.localStorage) {
+      return window.localStorage;
+    }
+  } catch {}
+  try {
+    if (typeof globalThis !== "undefined" && globalThis.localStorage) {
+      return globalThis.localStorage;
+    }
+  } catch {}
+  return null;
+}
 function signal(initialValue, optionsOrEquals) {
   const equals = typeof optionsOrEquals === "function" ? optionsOrEquals : optionsOrEquals?.equals;
   const isInternal = typeof optionsOrEquals === "object" ? optionsOrEquals?.internal : false;
   const customName = typeof optionsOrEquals === "object" ? optionsOrEquals?.name : undefined;
-  const s = new Signal(initialValue, equals);
+  const persistOption = typeof optionsOrEquals === "object" ? optionsOrEquals?.persist : undefined;
+  const persistConfig = persistOption ? typeof persistOption === "string" ? { key: persistOption } : persistOption : undefined;
+  let effectiveInitial = initialValue;
+  const storage = persistConfig ? resolveStorage(persistConfig.storage) : null;
+  const serialize = persistConfig?.serialize ?? JSON.stringify;
+  const deserialize = persistConfig?.deserialize ?? JSON.parse;
+  if (persistConfig && storage) {
+    try {
+      const stored = storage.getItem(persistConfig.key);
+      if (stored !== null) {
+        effectiveInitial = deserialize(stored);
+      }
+    } catch {}
+  }
+  let isSyncing = false;
+  const onSet = persistConfig && storage ? (val) => {
+    if (isSyncing)
+      return;
+    try {
+      storage.setItem(persistConfig.key, serialize(val));
+    } catch {}
+  } : undefined;
+  const s = new Signal(effectiveInitial, equals, onSet);
+  if (persistConfig && storage && (persistConfig.syncTabs ?? true) && typeof window !== "undefined" && typeof window.addEventListener === "function") {
+    const onStorage = (e) => {
+      if (e.key === persistConfig.key) {
+        try {
+          const nextVal = e.newValue !== null ? deserialize(e.newValue) : initialValue;
+          isSyncing = true;
+          try {
+            s.set(nextVal);
+          } finally {
+            isSyncing = false;
+          }
+        } catch {}
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    if (currentScope) {
+      currentScope.addCleanup(() => {
+        window.removeEventListener("storage", onStorage);
+      });
+    }
+  }
   const accessor = (...args) => {
     if (args.length === 0) {
       return s.get();

package/dist/devtools/styles.d.ts

@@ -0,0 +1 @@
+export declare const devtoolsStyles = "\n  .visage-devtools-root {\n    position: fixed;\n    z-index: 999999;\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    font-size: 13px;\n    color: #f1f5f9;\n    box-sizing: border-box;\n  }\n  .visage-devtools-root * {\n    box-sizing: border-box;\n  }\n  .visage-devtools-trigger {\n    position: fixed;\n    bottom: 20px;\n    left: 20px;\n    background: #0f172a;\n    color: #38bdf8;\n    border: 1px solid #334155;\n    border-radius: 9999px;\n    padding: 8px 14px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-weight: 600;\n    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 0 10px rgba(56, 189, 248, 0.2);\n    transition: all 0.2s ease;\n    z-index: 999999;\n  }\n  .visage-devtools-trigger:hover {\n    background: #1e293b;\n    border-color: #38bdf8;\n    transform: translateY(-2px);\n  }\n  .visage-devtools-drawer {\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 420px;\n    background: #090d16;\n    border-top: 1px solid #1e293b;\n    display: flex;\n    flex-direction: column;\n    box-shadow: 0 -20px 25px -5px rgba(0, 0, 0, 0.7);\n    z-index: 999999;\n  }\n  .visage-devtools-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 8px 16px;\n    background: #0f172a;\n    border-bottom: 1px solid #1e293b;\n  }\n  .visage-devtools-tabs {\n    display: flex;\n    gap: 4px;\n  }\n  .visage-devtools-tab {\n    background: transparent;\n    border: none;\n    color: #94a3b8;\n    padding: 6px 12px;\n    border-radius: 6px;\n    cursor: pointer;\n    font-size: 12px;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .visage-devtools-tab:hover {\n    color: #f1f5f9;\n    background: #1e293b;\n  }\n  .visage-devtools-tab.active {\n    color: #38bdf8;\n    background: #1e293b;\n    font-weight: 600;\n  }\n  .visage-devtools-badge {\n    background: #334155;\n    color: #f1f5f9;\n    padding: 1px 6px;\n    border-radius: 9999px;\n    font-size: 10px;\n    font-weight: 600;\n  }\n  .visage-devtools-body {\n    flex: 1;\n    display: flex;\n    overflow: hidden;\n  }\n  .visage-devtools-sidebar {\n    width: 320px;\n    border-right: 1px solid #1e293b;\n    display: flex;\n    flex-direction: column;\n    background: #0c111d;\n  }\n  .visage-devtools-search {\n    padding: 8px;\n    border-bottom: 1px solid #1e293b;\n  }\n  .visage-devtools-input {\n    width: 100%;\n    background: #090d16;\n    border: 1px solid #334155;\n    border-radius: 6px;\n    color: #f1f5f9;\n    padding: 6px 10px;\n    font-size: 12px;\n    outline: none;\n  }\n  .visage-devtools-input:focus {\n    border-color: #38bdf8;\n  }\n  .visage-devtools-list {\n    flex: 1;\n    overflow-y: auto;\n    padding: 4px;\n  }\n  .visage-devtools-item {\n    padding: 8px 10px;\n    border-radius: 6px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 2px;\n    font-size: 12px;\n  }\n  .visage-devtools-item:hover {\n    background: #1e293b;\n  }\n  .visage-devtools-item.selected {\n    background: #1e293b;\n    border-left: 3px solid #38bdf8;\n  }\n  .visage-devtools-main {\n    flex: 1;\n    padding: 16px;\n    overflow-y: auto;\n    background: #090d16;\n  }\n  .visage-devtools-json {\n    background: #050811;\n    border: 1px solid #1e293b;\n    border-radius: 6px;\n    padding: 12px;\n    font-family: \"JetBrains Mono\", Menlo, Monaco, Consolas, monospace;\n    font-size: 12px;\n    color: #38bdf8;\n    overflow-x: auto;\n    white-space: pre-wrap;\n  }\n  .visage-devtools-actions {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .visage-devtools-btn {\n    background: #1e293b;\n    border: 1px solid #334155;\n    color: #f1f5f9;\n    padding: 4px 10px;\n    border-radius: 4px;\n    font-size: 11px;\n    cursor: pointer;\n    font-weight: 500;\n  }\n  .visage-devtools-btn:hover {\n    background: #334155;\n  }\n  .visage-devtools-btn.active {\n    background: #0284c7;\n    border-color: #38bdf8;\n  }\n  /* DAG Graph Visualization */\n  .visage-graph-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    background: #050811;\n    position: relative;\n  }\n  .visage-graph-toolbar {\n    padding: 8px 16px;\n    background: #090d16;\n    border-bottom: 1px solid #1e293b;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n  }\n  .visage-graph-canvas {\n    flex: 1;\n    overflow: auto;\n    padding: 24px;\n    position: relative;\n    display: flex;\n    gap: 40px;\n  }\n  .visage-graph-column {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    min-width: 220px;\n  }\n  .visage-graph-col-header {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: #64748b;\n    margin-bottom: 4px;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n  }\n  .visage-graph-node {\n    background: #0f172a;\n    border: 1px solid #1e293b;\n    border-radius: 8px;\n    padding: 10px 12px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    position: relative;\n  }\n  .visage-graph-node:hover {\n    border-color: #38bdf8;\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(56, 189, 248, 0.15);\n  }\n  .visage-graph-node.selected {\n    border-color: #38bdf8;\n    box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.4);\n    background: #131d35;\n  }\n  .visage-graph-node.is-dependency {\n    border-color: #38bdf8;\n    box-shadow: 0 0 0 1px #38bdf8, 0 2px 8px rgba(56, 189, 248, 0.25);\n    background: #082f49;\n  }\n  .visage-graph-node.is-dependent {\n    border-color: #c084fc;\n    box-shadow: 0 0 0 1px #c084fc, 0 2px 8px rgba(192, 132, 252, 0.25);\n    background: #3b0764;\n  }\n  .visage-graph-node.is-dimmed {\n    opacity: 0.3;\n    filter: grayscale(0.5);\n  }\n  .visage-graph-node-title {\n    font-weight: 600;\n    font-size: 12px;\n    color: #f8fafc;\n    margin-bottom: 4px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n  .visage-graph-node-val {\n    font-family: monospace;\n    font-size: 11px;\n    color: #94a3b8;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    max-width: 190px;\n  }\n  .visage-graph-pulse {\n    display: inline-block;\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: #10b981;\n    box-shadow: 0 0 8px #10b981;\n  }\n  .visage-graph-pulse.computed {\n    background: #a855f7;\n    box-shadow: 0 0 8px #a855f7;\n  }\n  .visage-graph-pill {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    background: #1e293b;\n    color: #cbd5e1;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    cursor: pointer;\n    border: 1px solid #334155;\n    transition: all 0.15s ease;\n  }\n  .visage-graph-pill:hover {\n    background: #334155;\n    color: #fff;\n    border-color: #38bdf8;\n  }\n  .visage-graph-pill.source {\n    border-color: #0369a1;\n    color: #7dd3fc;\n  }\n  .visage-graph-pill.target {\n    border-color: #7e22ce;\n    color: #d8b4fe;\n  }\n";

package/dist/devtools/types.d.ts

@@ -0,0 +1,44 @@
+export type DevToolsTab = "signals" | "graph" | "query" | "rpc" | "dom" | "concepts";
+export interface SignalRecord {
+    id: string;
+    name: string;
+    type: "signal" | "computed";
+    getValue: () => any;
+    version: () => number;
+    dependencies?: () => string[];
+    dependents?: () => string[];
+    subscribersCount?: () => number;
+    lastUpdatedAt: number;
+}
+export interface QueryRecord {
+    hash: string;
+    key: any;
+    status: () => string;
+    fetchStatus: () => string;
+    data: () => any;
+    error: () => any;
+    dataUpdatedAt: () => number;
+    refetch?: () => Promise<any>;
+    invalidate?: () => void;
+}
+export interface RpcRecord {
+    id: string;
+    path: string;
+    type: "query" | "mutation" | "subscription";
+    input: any;
+    response?: any;
+    error?: any;
+    status: "pending" | "success" | "error" | "streaming";
+    startTime: number;
+    duration?: number;
+    events?: Array<{
+        timestamp: number;
+        data: any;
+    }>;
+}
+export interface DevToolsOptions {
+    position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
+    initialOpen?: boolean;
+    initialTab?: DevToolsTab;
+    highlightDOM?: boolean;
+}

package/dist/dom/async.d.ts

@@ -0,0 +1,41 @@
+import { type Child } from "./render";
+import { createResource, type Resource, type ResourceActions, SuspenseContext, type SuspenseContextValue } from "./resource";
+export { type Component, type LazyComponent, lazy } from "./lazy";
+export { createResource, type Resource, type ResourceActions, SuspenseContext, type SuspenseContextValue };
+export interface SuspenseProps {
+    fallback: Child;
+    children: Child | (() => Child);
+}
+/**
+ * Suspense boundary for fine-grained async coordination.
+ * Displays the `fallback` UI while child async resources or queries are loading.
+ *
+ * @example
+ * ```tsx
+ * <Suspense fallback={<div>Loading profile...</div>}>
+ *   <UserProfile />
+ * </Suspense>
+ * ```
+ */
+export declare function Suspense(props: SuspenseProps): any;
+export interface ErrorBoundaryProps {
+    fallback: Child | ((error: any, reset: () => void) => Child);
+    children: Child | (() => Child);
+}
+/**
+ * Catches JavaScript rendering and effect errors in descendant subtrees
+ * and displays a fallback UI instead of crashing the application.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary fallback={(err, reset) => (
+ *   <div>
+ *     <p>Something went wrong: {err.message}</p>
+ *     <button onClick={reset}>Retry</button>
+ *   </div>
+ * )}>
+ *   <RiskyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+export declare function ErrorBoundary(props: ErrorBoundaryProps): any;

package/dist/dom/control-flow.d.ts

@@ -0,0 +1,53 @@
+import { type Child, type ReactiveValue } from "./render";
+export interface ShowProps<T> {
+    when: ReactiveValue<T | false | null | undefined>;
+    fallback?: Child;
+    children: Child | ((item: () => T) => Child);
+}
+/**
+ * Conditionally renders JSX children when the `when` condition evaluates to truthy,
+ * with fine-grained reactive scope lifecycle management and automatic fallback rendering.
+ *
+ * @example
+ * ```tsx
+ * const loggedIn = signal(false);
+ *
+ * <Show when={loggedIn} fallback={<div>Please log in</div>}>
+ *   <Dashboard />
+ * </Show>
+ * ```
+ */
+export declare function Show<T>(props: ShowProps<T>): any;
+export interface ForProps<T> {
+    each: ReactiveValue<readonly T[] | undefined | null>;
+    fallback?: Child;
+    children: (item: T, index: () => number) => Child;
+}
+/**
+ * Keyed / referential list renderer with fine-grained item reconciliation.
+ *
+ * Items in the list are reused across array mutations without re-rendering existing items
+ * or tearing down their active reactive scopes.
+ *
+ * @example
+ * ```tsx
+ * const items = signal(["Apple", "Banana", "Cherry"]);
+ *
+ * <For each={items} fallback={<div>No items found</div>}>
+ *   {(item, index) => (
+ *     <li>
+ *       {index() + 1}. {item}
+ *     </li>
+ *   )}
+ * </For>
+ * ```
+ */
+export declare function For<T>(props: ForProps<T>): any;
+export interface PortalProps {
+    mount?: HTMLElement | null;
+    children: Child | (() => Child);
+}
+/**
+ * Portal renders children into a different DOM container while preserving reactive context
+ */
+export declare function Portal(props: PortalProps): any;

package/dist/dom/index.d.ts

@@ -0,0 +1,3 @@
+export { type Component, createResource, ErrorBoundary, type ErrorBoundaryProps, type LazyComponent, lazy, type Resource, type ResourceActions, Suspense, SuspenseContext, type SuspenseContextValue, type SuspenseProps } from "./async";
+export { For, type ForProps, Portal, type PortalProps, Show, type ShowProps } from "./control-flow";
+export { type Child, insertChild, isReactive, type ReactiveValue, render, resolveValue, setAttribute } from "./render";