@treelocator/runtime 0.5.2 → 0.6.0

package/dist/components/SettingsPanel.d.ts

@@ -0,0 +1,5 @@
+type SettingsPanelProps = {
+    onDismiss: () => void;
+};
+export declare function SettingsPanel(props: SettingsPanelProps): import("solid-js").JSX.Element;
+export {};

package/dist/components/SettingsPanel.js

@@ -0,0 +1,312 @@
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { style as _$style } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+var _tmpl$ = /*#__PURE__*/_$template(`<div role=switch style=border-radius:9px;flex-shrink:0><div style=border-radius:50%>`),
+  _tmpl$2 = /*#__PURE__*/_$template(`<div style=align-items:center;flex-shrink:0><input type=number style=border-radius:4px;font-family:inherit;font-size:11px;text-align:right><span style=font-size:11px;min-width:18px>`),
+  _tmpl$3 = /*#__PURE__*/_$template(`<div data-treelocator-settings-panel style="z-index:2147483646;max-height:400px;overflow-y:auto;backdrop-filter:blur(12px);border-radius:12px;box-shadow:0 8px 32px rgba(0, 0, 0, 0.4);font-family:system-ui, -apple-system, sans-serif;font-size:12px;pointer-events:auto"><div style="align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255, 255, 255, 0.08)"><div><div style=font-weight:600;font-size:13px>Settings</div><div style=margin-top:2px>Persisted to localStorage</div></div><div style=align-items:center><div style=border-radius:4px;font-size:11px;font-weight:600>Reset</div><div style=border-radius:4px;font-size:16px;line-height:1>&times;</div></div></div><div><div>Features</div></div><div style="border-top:1px solid rgba(255, 255, 255, 0.08)"><div>Thresholds</div><div style=font-size:11px;margin-top:8px>Defaults: sample <!>Hz, max <!>ms, jump <!>px, lag <!>ms`),
+  _tmpl$4 = /*#__PURE__*/_$template(`<div><div><div></div><div>`);
+import { For } from "solid-js";
+import { DEFAULT_SETTINGS, resetSettings, setSetting, settings } from "../hooks/useSettings";
+const TOGGLES = [{
+  key: "anomalyTracking",
+  label: "Anomaly tracking",
+  hint: "Detect jitter, jumps, stutter, stuck frames"
+}, {
+  key: "visualDiff",
+  label: "Visual diff",
+  hint: "Snapshot before/after element tree"
+}, {
+  key: "computedStyles",
+  label: "Computed styles",
+  hint: "Include styles in alt+click clipboard output"
+}, {
+  key: "computedStylesIncludeDefaults",
+  label: "Include default styles",
+  hint: "Show browser-default values like display:block and font-weight:bold"
+}];
+const NUMBERS = [{
+  key: "sampleRate",
+  label: "Sample rate",
+  hint: "Max frames per second to capture",
+  unit: "Hz",
+  min: 1,
+  max: 60,
+  step: 1
+}, {
+  key: "maxDurationMs",
+  label: "Max duration",
+  hint: "Auto-stop recording after this long",
+  unit: "ms",
+  min: 1000,
+  max: 120000,
+  step: 1000
+}, {
+  key: "jumpMinAbsolute",
+  label: "Jump threshold",
+  hint: "Minimum px delta to flag a jump",
+  unit: "px",
+  min: 1,
+  max: 1000,
+  step: 1
+}, {
+  key: "lagMinDelay",
+  label: "Lag threshold",
+  hint: "Minimum rAF delay to flag lag",
+  unit: "ms",
+  min: 1,
+  max: 1000,
+  step: 1
+}];
+const rowStyle = {
+  display: "flex",
+  "align-items": "center",
+  "justify-content": "space-between",
+  gap: "12px",
+  padding: "8px 0",
+  "border-bottom": "1px solid rgba(255, 255, 255, 0.05)"
+};
+const labelStyle = {
+  "min-width": "0",
+  flex: "1 1 auto"
+};
+const labelTitle = {
+  "font-weight": "600",
+  color: "#fff"
+};
+const labelHint = {
+  color: "#9ca3af",
+  "font-size": "11px",
+  "margin-top": "2px",
+  "line-height": "1.3"
+};
+const sectionTitleStyle = {
+  "margin-bottom": "4px",
+  color: "#9ca3af",
+  "font-size": "11px",
+  "text-transform": "uppercase",
+  "letter-spacing": "0.5px"
+};
+function Toggle(props) {
+  return (() => {
+    var _el$ = _tmpl$(),
+      _el$2 = _el$.firstChild;
+    _el$.$$click = () => props.onChange(!props.checked);
+    _$setStyleProperty(_el$, "cursor", "pointer");
+    _$setStyleProperty(_el$, "width", "32px");
+    _$setStyleProperty(_el$, "height", "18px");
+    _$setStyleProperty(_el$, "position", "relative");
+    _$setStyleProperty(_el$, "transition", "background 0.15s");
+    _$setStyleProperty(_el$2, "position", "absolute");
+    _$setStyleProperty(_el$2, "top", "2px");
+    _$setStyleProperty(_el$2, "width", "14px");
+    _$setStyleProperty(_el$2, "height", "14px");
+    _$setStyleProperty(_el$2, "background", "#fff");
+    _$setStyleProperty(_el$2, "transition", "left 0.15s");
+    _$effect(_p$ => {
+      var _v$ = props.checked,
+        _v$2 = props.checked ? "rgba(59, 130, 246, 0.6)" : "rgba(255, 255, 255, 0.12)",
+        _v$3 = props.checked ? "16px" : "2px";
+      _v$ !== _p$.e && _$setAttribute(_el$, "aria-checked", _p$.e = _v$);
+      _v$2 !== _p$.t && _$setStyleProperty(_el$, "background", _p$.t = _v$2);
+      _v$3 !== _p$.a && _$setStyleProperty(_el$2, "left", _p$.a = _v$3);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    return _el$;
+  })();
+}
+function NumberInput(props) {
+  return (() => {
+    var _el$3 = _tmpl$2(),
+      _el$4 = _el$3.firstChild,
+      _el$5 = _el$4.nextSibling;
+    _$setStyleProperty(_el$3, "display", "flex");
+    _$setStyleProperty(_el$3, "gap", "4px");
+    _el$4.$$input = e => {
+      const n = Number(e.currentTarget.value);
+      if (!Number.isFinite(n)) return;
+      const clamped = Math.min(props.max, Math.max(props.min, n));
+      props.onChange(clamped);
+    };
+    _$setStyleProperty(_el$4, "width", "72px");
+    _$setStyleProperty(_el$4, "padding", "4px 6px");
+    _$setStyleProperty(_el$4, "background", "rgba(255, 255, 255, 0.08)");
+    _$setStyleProperty(_el$4, "border", "1px solid rgba(255, 255, 255, 0.1)");
+    _$setStyleProperty(_el$4, "color", "#fff");
+    _$setStyleProperty(_el$4, "outline", "none");
+    _$setStyleProperty(_el$5, "color", "#9ca3af");
+    _$insert(_el$5, () => props.unit);
+    _$effect(_p$ => {
+      var _v$4 = props.min,
+        _v$5 = props.max,
+        _v$6 = props.step;
+      _v$4 !== _p$.e && _$setAttribute(_el$4, "min", _p$.e = _v$4);
+      _v$5 !== _p$.t && _$setAttribute(_el$4, "max", _p$.t = _v$5);
+      _v$6 !== _p$.a && _$setAttribute(_el$4, "step", _p$.a = _v$6);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined,
+      a: undefined
+    });
+    _$effect(() => _el$4.value = props.value);
+    return _el$3;
+  })();
+}
+export function SettingsPanel(props) {
+  const current = () => settings();
+  return (() => {
+    var _el$6 = _tmpl$3(),
+      _el$7 = _el$6.firstChild,
+      _el$8 = _el$7.firstChild,
+      _el$9 = _el$8.firstChild,
+      _el$0 = _el$9.nextSibling,
+      _el$1 = _el$8.nextSibling,
+      _el$10 = _el$1.firstChild,
+      _el$11 = _el$10.nextSibling,
+      _el$12 = _el$7.nextSibling,
+      _el$13 = _el$12.firstChild,
+      _el$14 = _el$12.nextSibling,
+      _el$15 = _el$14.firstChild,
+      _el$16 = _el$15.nextSibling,
+      _el$17 = _el$16.firstChild,
+      _el$23 = _el$17.nextSibling,
+      _el$18 = _el$23.nextSibling,
+      _el$24 = _el$18.nextSibling,
+      _el$20 = _el$24.nextSibling,
+      _el$25 = _el$20.nextSibling,
+      _el$21 = _el$25.nextSibling,
+      _el$26 = _el$21.nextSibling,
+      _el$22 = _el$26.nextSibling;
+    _$setStyleProperty(_el$6, "position", "fixed");
+    _$setStyleProperty(_el$6, "bottom", "180px");
+    _$setStyleProperty(_el$6, "right", "20px");
+    _$setStyleProperty(_el$6, "width", "340px");
+    _$setStyleProperty(_el$6, "background", "rgba(15, 15, 15, 0.92)");
+    _$setStyleProperty(_el$6, "border", "1px solid rgba(255, 255, 255, 0.1)");
+    _$setStyleProperty(_el$6, "color", "#e5e5e5");
+    _$setStyleProperty(_el$7, "display", "flex");
+    _$setStyleProperty(_el$7, "padding", "12px 14px 8px");
+    _$setStyleProperty(_el$9, "color", "#fff");
+    _$setStyleProperty(_el$0, "color", "#9ca3af");
+    _$setStyleProperty(_el$1, "display", "flex");
+    _$setStyleProperty(_el$1, "gap", "4px");
+    _$addEventListener(_el$10, "click", resetSettings, true);
+    _$setStyleProperty(_el$10, "cursor", "pointer");
+    _$setStyleProperty(_el$10, "padding", "4px 10px");
+    _$setStyleProperty(_el$10, "background", "rgba(255, 255, 255, 0.08)");
+    _$setStyleProperty(_el$10, "color", "#9ca3af");
+    _$addEventListener(_el$11, "click", props.onDismiss, true);
+    _$setStyleProperty(_el$11, "cursor", "pointer");
+    _$setStyleProperty(_el$11, "padding", "4px 8px");
+    _$setStyleProperty(_el$11, "color", "#9ca3af");
+    _$setStyleProperty(_el$12, "padding", "8px 14px");
+    _$insert(_el$12, _$createComponent(For, {
+      each: TOGGLES,
+      children: item => (() => {
+        var _el$27 = _tmpl$4(),
+          _el$28 = _el$27.firstChild,
+          _el$29 = _el$28.firstChild,
+          _el$30 = _el$29.nextSibling;
+        _$insert(_el$29, () => item.label);
+        _$insert(_el$30, () => item.hint);
+        _$insert(_el$27, _$createComponent(Toggle, {
+          get checked() {
+            return current()[item.key];
+          },
+          onChange: v => setSetting(item.key, v)
+        }), null);
+        _$effect(_p$ => {
+          var _v$9 = rowStyle,
+            _v$0 = labelStyle,
+            _v$1 = labelTitle,
+            _v$10 = labelHint;
+          _p$.e = _$style(_el$27, _v$9, _p$.e);
+          _p$.t = _$style(_el$28, _v$0, _p$.t);
+          _p$.a = _$style(_el$29, _v$1, _p$.a);
+          _p$.o = _$style(_el$30, _v$10, _p$.o);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        return _el$27;
+      })()
+    }), null);
+    _$setStyleProperty(_el$14, "padding", "8px 14px 12px");
+    _$insert(_el$14, _$createComponent(For, {
+      each: NUMBERS,
+      children: item => (() => {
+        var _el$31 = _tmpl$4(),
+          _el$32 = _el$31.firstChild,
+          _el$33 = _el$32.firstChild,
+          _el$34 = _el$33.nextSibling;
+        _$insert(_el$33, () => item.label);
+        _$insert(_el$34, () => item.hint);
+        _$insert(_el$31, _$createComponent(NumberInput, {
+          get value() {
+            return current()[item.key];
+          },
+          get min() {
+            return item.min;
+          },
+          get max() {
+            return item.max;
+          },
+          get step() {
+            return item.step;
+          },
+          get unit() {
+            return item.unit;
+          },
+          onChange: v => setSetting(item.key, v)
+        }), null);
+        _$effect(_p$ => {
+          var _v$11 = rowStyle,
+            _v$12 = labelStyle,
+            _v$13 = labelTitle,
+            _v$14 = labelHint;
+          _p$.e = _$style(_el$31, _v$11, _p$.e);
+          _p$.t = _$style(_el$32, _v$12, _p$.t);
+          _p$.a = _$style(_el$33, _v$13, _p$.a);
+          _p$.o = _$style(_el$34, _v$14, _p$.o);
+          return _p$;
+        }, {
+          e: undefined,
+          t: undefined,
+          a: undefined,
+          o: undefined
+        });
+        return _el$31;
+      })()
+    }), _el$16);
+    _$setStyleProperty(_el$16, "color", "#6b7280");
+    _$insert(_el$16, () => DEFAULT_SETTINGS.sampleRate, _el$23);
+    _$insert(_el$16, () => DEFAULT_SETTINGS.maxDurationMs, _el$24);
+    _$insert(_el$16, () => DEFAULT_SETTINGS.jumpMinAbsolute, _el$25);
+    _$insert(_el$16, () => DEFAULT_SETTINGS.lagMinDelay, _el$26);
+    _$effect(_p$ => {
+      var _v$7 = sectionTitleStyle,
+        _v$8 = sectionTitleStyle;
+      _p$.e = _$style(_el$13, _v$7, _p$.e);
+      _p$.t = _$style(_el$15, _v$8, _p$.t);
+      return _p$;
+    }, {
+      e: undefined,
+      t: undefined
+    });
+    return _el$6;
+  })();
+}
+_$delegateEvents(["click", "input"]);

package/dist/consoleCapture.d.ts

@@ -0,0 +1,9 @@
+export type ConsoleLevel = "log" | "info" | "warn" | "error" | "debug";
+export interface ConsoleEntry {
+    level: ConsoleLevel;
+    timestamp: number;
+    message: string;
+}
+export declare function installConsoleCapture(): void;
+export declare function getConsoleEntries(last?: number): ConsoleEntry[];
+export declare function clearConsoleEntries(): void;

package/dist/consoleCapture.js

@@ -0,0 +1,95 @@
+const MAX_ENTRIES = 500;
+const LEVELS = ["log", "info", "warn", "error", "debug"];
+const CAPTURE_FLAG = "__treelocator_console_captured__";
+const entries = [];
+function formatArg(value, seen) {
+  if (value === null) return "null";
+  if (value === undefined) return "undefined";
+  const t = typeof value;
+  if (t === "string") return value;
+  if (t === "number" || t === "boolean" || t === "bigint") return String(value);
+  if (t === "function") {
+    const name = value.name || "anonymous";
+    return `[Function: ${name}]`;
+  }
+  if (value instanceof Error) {
+    return `${value.name}: ${value.message}`;
+  }
+  if (typeof Element !== "undefined" && value instanceof Element) {
+    const el = value;
+    const id = el.id ? `#${el.id}` : "";
+    const cls = el.className && typeof el.className === "string" ? `.${el.className.trim().split(/\s+/).join(".")}` : "";
+    return `<${el.tagName.toLowerCase()}${id}${cls}>`;
+  }
+  if (t === "object") {
+    if (seen.has(value)) return "[Circular]";
+    seen.add(value);
+    try {
+      const localSeen = new WeakSet();
+      return JSON.stringify(value, (_key, v) => {
+        if (v === null || v === undefined) return v;
+        if (typeof v === "bigint") return v.toString();
+        if (typeof v === "function") return `[Function: ${v.name || "anonymous"}]`;
+        if (typeof v === "object") {
+          if (localSeen.has(v)) return "[Circular]";
+          localSeen.add(v);
+        }
+        return v;
+      });
+    } catch {
+      try {
+        return String(value);
+      } catch {
+        return "[Unserializable]";
+      }
+    }
+  }
+  return String(value);
+}
+function formatArgs(args) {
+  const seen = new WeakSet();
+  return args.map(arg => formatArg(arg, seen)).join(" ");
+}
+function pushEntry(level, args) {
+  entries.push({
+    level,
+    timestamp: Date.now(),
+    message: formatArgs(args)
+  });
+  if (entries.length > MAX_ENTRIES) {
+    entries.splice(0, entries.length - MAX_ENTRIES);
+  }
+}
+export function installConsoleCapture() {
+  if (typeof console === "undefined") return;
+  const target = console;
+  if (target[CAPTURE_FLAG]) return;
+  target[CAPTURE_FLAG] = true;
+  for (const level of LEVELS) {
+    const original = target[level];
+    if (typeof original !== "function") continue;
+    const wrapped = function (...args) {
+      try {
+        pushEntry(level, args);
+      } catch {
+        // Swallow — capture must never break logging.
+      }
+      return original.apply(this, args);
+    };
+    try {
+      target[level] = wrapped;
+    } catch {
+      // Some environments freeze console — ignore.
+    }
+  }
+}
+export function getConsoleEntries(last) {
+  if (typeof last !== "number" || !Number.isFinite(last) || last <= 0) {
+    return entries.slice();
+  }
+  const n = Math.min(Math.floor(last), entries.length);
+  return entries.slice(entries.length - n);
+}
+export function clearConsoleEntries() {
+  entries.length = 0;
+}

package/dist/functions/cssRuleInspector.d.ts

@@ -0,0 +1,83 @@
+/**
+ * CSS Rule Inspector
+ *
+ * Walks all loaded stylesheets, finds every rule that matches an element,
+ * calculates specificity, and determines which rule "wins" for each property.
+ * Designed to produce AI-friendly output for debugging CSS issues.
+ */
+export type SpecificityTuple = [number, number, number];
+export interface CSSRuleInfo {
+    selector: string;
+    property: string;
+    value: string;
+    specificity: SpecificityTuple;
+    important: boolean;
+    source: string;
+    /** Monotonic index in source order — higher = later in cascade. */
+    sourceIndex: number;
+}
+export interface CSSPropertyResult {
+    property: string;
+    value: string;
+    rules: {
+        selector: string;
+        value: string;
+        specificity: SpecificityTuple;
+        important: boolean;
+        source: string;
+        winning: boolean;
+    }[];
+}
+export interface CSSInspectionResult {
+    element: string;
+    properties: CSSPropertyResult[];
+    unreachableSheets: string[];
+}
+/**
+ * Calculate CSS specificity for a selector string.
+ *
+ * Returns [ids, classes, elements] where:
+ *   - ids:      count of #id selectors
+ *   - classes:  count of .class, [attr], :pseudo-class (except :not, :is, :where, :has)
+ *   - elements: count of element, ::pseudo-element
+ *
+ * This is a lightweight parser that handles the vast majority of real-world
+ * selectors without pulling in a full CSS parser.
+ */
+export declare function calculateSpecificity(selector: string): SpecificityTuple;
+/**
+ * Compare two specificity tuples.
+ * Returns positive if a > b, negative if a < b, 0 if equal.
+ */
+export declare function compareSpecificity(a: SpecificityTuple, b: SpecificityTuple): number;
+/**
+ * Format specificity tuple as a human-readable string.
+ */
+export declare function formatSpecificity(s: SpecificityTuple): string;
+/**
+ * Describe an element for display: tagName.class1.class2#id
+ */
+export declare function describeElement(element: Element): string;
+/**
+ * Inspect an element and return all CSS rules grouped by property,
+ * showing which rule wins for each property.
+ */
+export declare function inspectCSSRules(element: Element): CSSInspectionResult;
+/**
+ * Format CSS inspection result as a human-readable string for AI consumption.
+ *
+ * Example output:
+ *
+ *   CSS Rules for button.primary#submit
+ *   ════════════════════════════════════
+ *
+ *   color: #333
+ *     ✓ .button.primary  (0,2,0) — components.css
+ *     ✗ .button          (0,1,0) — base.css
+ *     ✗ button           (0,0,1) — reset.css
+ *
+ *   font-size: 14px
+ *     ✓ element.style    (inline) — inline
+ *     ✗ .button          (0,1,0) — base.css
+ */
+export declare function formatCSSInspection(result: CSSInspectionResult): string;