@larose-ui/devtools 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 laRose contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.d.ts

@@ -0,0 +1,46 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { LaRoseRuntimeContext } from '@larose-ui/core';
+import { UIEvent } from '@larose-ui/observability';
+
+interface DevToolsPanelProps {
+    defaultOpen?: boolean;
+}
+declare function DevToolsPanel({ defaultOpen }: DevToolsPanelProps): react.JSX.Element | null;
+declare function DevToolsProvider({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+
+interface ComponentPerformanceSummary {
+    renderCount: number;
+    lastRenderMs: number | null;
+    avgRenderMs: number | null;
+    threshold: string | null;
+}
+declare function getComponentPerformance(events: UIEvent[]): ComponentPerformanceSummary;
+
+interface ReactComponentInfo {
+    displayName: string;
+    props: Record<string, string>;
+}
+declare function resolveReactComponentInfo(domNode: Element): ReactComponentInfo | null;
+
+interface InspectedElement {
+    name: string;
+    source: 'observed' | 'observed-form' | 'provider' | 'component';
+    dataset: Record<string, string>;
+    tagName: string;
+    domNode?: Element;
+    react?: ReactComponentInfo | null;
+}
+declare function useComponentInspector(active: boolean): {
+    hovered: InspectedElement | null;
+    selected: InspectedElement | null;
+    clearSelection: () => void;
+};
+declare function InspectorOverlay({ target, }: {
+    target: InspectedElement | null;
+}): react.JSX.Element | null;
+declare function buildInspectorReadout(element: InspectedElement, runtime: LaRoseRuntimeContext | null, performance?: ComponentPerformanceSummary | null): string[];
+
+export { type ComponentPerformanceSummary, DevToolsPanel, type DevToolsPanelProps, DevToolsProvider, type InspectedElement, InspectorOverlay, type ReactComponentInfo, buildInspectorReadout, getComponentPerformance, resolveReactComponentInfo, useComponentInspector };

package/dist/index.js

@@ -0,0 +1,568 @@
+// src/DevToolsPanel.tsx
+import { useEffect as useEffect2, useMemo, useState as useState2 } from "react";
+import {
+  useOptionalRuntime,
+  useOptionalRuntimeEvents,
+  useTheme,
+  useNetwork,
+  useBreakpoint,
+  useI18n,
+  useEnvironment
+} from "@larose-ui/runtime";
+import { usePermissions } from "@larose-ui/permissions";
+import { useOptionalObservability } from "@larose-ui/observability";
+
+// src/ComponentInspector.tsx
+import { useCallback, useEffect, useState } from "react";
+
+// src/reactFiber.ts
+var PROP_SKIP = /* @__PURE__ */ new Set(["children", "ref", "key", "dangerouslySetInnerHTML"]);
+var MAX_PROP_LEN = 80;
+function getFiberKey(node) {
+  return Object.keys(node).find(
+    (key) => key.startsWith("__reactFiber$") || key.startsWith("__reactInternalInstance$")
+  );
+}
+function getFiberFromDOM(node) {
+  const key = getFiberKey(node);
+  if (!key) return null;
+  return node[key] ?? null;
+}
+function getComponentName(type) {
+  if (!type || typeof type === "string") return null;
+  if (typeof type === "function") {
+    const fn = type;
+    return fn.displayName || fn.name || null;
+  }
+  if (typeof type === "object") {
+    const obj = type;
+    if (obj.render) {
+      return obj.render.displayName || obj.render.name || null;
+    }
+    if (obj.displayName) return obj.displayName;
+  }
+  return null;
+}
+function findNearestComponentFiber(fiber) {
+  let current = fiber;
+  while (current) {
+    const name = getComponentName(current.type);
+    if (name) return current;
+    current = current.return ?? null;
+  }
+  return null;
+}
+function sanitizeFiberProps(props) {
+  if (!props) return {};
+  const out = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (PROP_SKIP.has(key) || key.startsWith("__")) continue;
+    out[key] = formatPropValue(value);
+  }
+  return out;
+}
+function formatPropValue(value) {
+  if (value === null) return "null";
+  if (value === void 0) return "undefined";
+  if (typeof value === "string") return truncate(value);
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  if (typeof value === "function") return "[Function]";
+  try {
+    return truncate(JSON.stringify(value));
+  } catch {
+    return "[Object]";
+  }
+}
+function truncate(value) {
+  if (value.length <= MAX_PROP_LEN) return value;
+  return `${value.slice(0, MAX_PROP_LEN - 3)}...`;
+}
+function resolveReactComponentInfo(domNode) {
+  const hostFiber = getFiberFromDOM(domNode);
+  if (!hostFiber) return null;
+  const componentFiber = findNearestComponentFiber(hostFiber);
+  if (!componentFiber) return null;
+  const displayName = getComponentName(componentFiber.type);
+  if (!displayName) return null;
+  return {
+    displayName,
+    props: sanitizeFiberProps(componentFiber.memoizedProps)
+  };
+}
+
+// src/ComponentInspector.tsx
+import { jsx } from "react/jsx-runtime";
+var INSPECTABLE_SELECTOR = "[data-lr-observed], [data-lr-observed-form], [data-lr-provider], [data-lr-component]";
+function useComponentInspector(active) {
+  const [hovered, setHovered] = useState(null);
+  const [selected, setSelected] = useState(null);
+  const resolveElement = useCallback((target) => {
+    const el = target.closest(INSPECTABLE_SELECTOR);
+    if (!el) return null;
+    const observed = el.getAttribute("data-lr-observed");
+    const observedForm = el.getAttribute("data-lr-observed-form");
+    const component = el.getAttribute("data-lr-component");
+    const name = observed ?? observedForm ?? component ?? (el.hasAttribute("data-lr-provider") ? "LaRoseProvider" : "unknown");
+    const source = observed ? "observed" : observedForm ? "observed-form" : el.hasAttribute("data-lr-provider") ? "provider" : "component";
+    const dataset = {};
+    for (const attr of el.attributes) {
+      if (attr.name.startsWith("data-lr-")) {
+        dataset[attr.name] = attr.value;
+      }
+    }
+    return {
+      name,
+      source,
+      dataset,
+      tagName: el.tagName.toLowerCase(),
+      domNode: el,
+      react: resolveReactComponentInfo(el)
+    };
+  }, []);
+  useEffect(() => {
+    if (!active) {
+      setHovered(null);
+      return;
+    }
+    const onMove = (event) => {
+      const target = event.target;
+      if (target.closest("[data-lr-devtools]")) {
+        setHovered(null);
+        return;
+      }
+      const info = resolveElement(target);
+      setHovered(info);
+    };
+    const onClick = (event) => {
+      const target = event.target;
+      if (target.closest("[data-lr-devtools]")) return;
+      const info = resolveElement(target);
+      if (info) {
+        event.preventDefault();
+        event.stopPropagation();
+        setSelected(info);
+      }
+    };
+    document.addEventListener("mousemove", onMove, true);
+    document.addEventListener("click", onClick, true);
+    return () => {
+      document.removeEventListener("mousemove", onMove, true);
+      document.removeEventListener("click", onClick, true);
+    };
+  }, [active, resolveElement]);
+  return { hovered, selected, clearSelection: () => setSelected(null) };
+}
+function InspectorOverlay({
+  target
+}) {
+  if (!target || typeof document === "undefined") return null;
+  const el = target.domNode ?? document.querySelector(
+    `[data-lr-observed="${target.name}"], [data-lr-observed-form="${target.name}"], [data-lr-component="${target.name}"], [data-lr-provider]`
+  );
+  if (!el || !(el instanceof HTMLElement)) return null;
+  const rect = el.getBoundingClientRect();
+  const style = {
+    position: "fixed",
+    top: rect.top - 2,
+    left: rect.left - 2,
+    width: rect.width + 4,
+    height: rect.height + 4,
+    border: "2px solid var(--lr-color-primary, #2563eb)",
+    borderRadius: 4,
+    pointerEvents: "none",
+    zIndex: 9998,
+    boxShadow: "0 0 0 1px rgba(37, 99, 235, 0.3)"
+  };
+  return /* @__PURE__ */ jsx("div", { "data-lr-inspector-overlay": true, style });
+}
+function buildInspectorReadout(element, runtime, performance) {
+  const lines = [
+    `${element.name}`,
+    `\u251C\u2500\u2500 Source: ${element.source}`,
+    `\u251C\u2500\u2500 Tag: ${element.tagName}`
+  ];
+  if (element.react) {
+    lines.push(`\u251C\u2500\u2500 React: ${element.react.displayName}`);
+    const propEntries = Object.entries(element.react.props);
+    if (propEntries.length > 0) {
+      lines.push("\u251C\u2500\u2500 Props:");
+      for (const [key, value] of propEntries.slice(0, 12)) {
+        lines.push(`\u2502   ${key}=${value}`);
+      }
+      if (propEntries.length > 12) {
+        lines.push(`\u2502   \u2026 +${propEntries.length - 12} more`);
+      }
+    }
+  }
+  if (performance && performance.renderCount > 0) {
+    lines.push(`\u251C\u2500\u2500 Renders: ${performance.renderCount}`);
+    if (performance.lastRenderMs !== null) {
+      lines.push(
+        `\u251C\u2500\u2500 Last render: ${performance.lastRenderMs.toFixed(1)}ms (${performance.threshold ?? "unknown"})`
+      );
+    }
+    if (performance.avgRenderMs !== null) {
+      lines.push(`\u251C\u2500\u2500 Avg render: ${performance.avgRenderMs.toFixed(1)}ms`);
+    }
+  }
+  if (runtime) {
+    lines.push(`\u251C\u2500\u2500 Session: ${runtime.session}`);
+    lines.push(`\u251C\u2500\u2500 Environment: ${runtime.environment}`);
+    lines.push(`\u251C\u2500\u2500 Network: ${runtime.network.condition}${runtime.network.rtt ? ` (${runtime.network.rtt}ms)` : ""}`);
+    lines.push(`\u251C\u2500\u2500 Tenant: ${runtime.tenant?.id ?? "none"}`);
+    lines.push(`\u251C\u2500\u2500 Locale: ${runtime.locale.locale} (${runtime.locale.dir})`);
+    lines.push(`\u251C\u2500\u2500 Theme: ${runtime.theme.mode} / ${runtime.theme.density}`);
+    lines.push(`\u251C\u2500\u2500 Permissions: ${runtime.permissions.granted.length} granted`);
+    lines.push(`\u251C\u2500\u2500 Features: ${Object.keys(runtime.features.flags).length} active`);
+    lines.push(`\u2514\u2500\u2500 API version: ${runtime.version.api ?? "unknown"}`);
+  }
+  const dataAttrs = Object.entries(element.dataset);
+  if (dataAttrs.length > 0) {
+    lines.push("Dataset:");
+    for (const [key, value] of dataAttrs) {
+      lines.push(`  ${key}=${value}`);
+    }
+  }
+  return lines;
+}
+
+// src/componentPerformance.ts
+function getComponentPerformance(events) {
+  const perfEvents = events.filter((event) => event.type === "performance");
+  if (perfEvents.length === 0) {
+    return {
+      renderCount: 0,
+      lastRenderMs: null,
+      avgRenderMs: null,
+      threshold: null
+    };
+  }
+  const renderTimes = perfEvents.map((event) => event.metadata?.renderTimeMs).filter((value) => typeof value === "number");
+  const last = perfEvents.at(-1);
+  if (!last) {
+    return {
+      renderCount: 0,
+      lastRenderMs: null,
+      avgRenderMs: null,
+      threshold: null
+    };
+  }
+  const lastRenderMs = typeof last.metadata?.renderTimeMs === "number" ? last.metadata.renderTimeMs : null;
+  const threshold = typeof last.metadata?.threshold === "string" ? last.metadata.threshold : null;
+  const avgRenderMs = renderTimes.length > 0 ? renderTimes.reduce((sum, ms) => sum + ms, 0) / renderTimes.length : null;
+  return {
+    renderCount: perfEvents.length,
+    lastRenderMs,
+    avgRenderMs,
+    threshold
+  };
+}
+
+// src/DevToolsPanel.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+function DevToolsPanel({ defaultOpen = false }) {
+  const [open, setOpen] = useState2(defaultOpen);
+  const [tab, setTab] = useState2("context");
+  const [inspectMode, setInspectMode] = useState2(false);
+  const runtime = useOptionalRuntime();
+  const runtimeEvents = useOptionalRuntimeEvents();
+  const [timeline, setTimeline] = useState2([]);
+  const { hovered, selected, clearSelection } = useComponentInspector(inspectMode);
+  const theme = useTheme();
+  const { locale, dir } = useI18n();
+  const network = useNetwork();
+  const { breakpoint, width } = useBreakpoint();
+  const environment = useEnvironment();
+  const { permissions } = usePermissions();
+  const observability = useOptionalObservability();
+  const journey = observability?.getJourney(20) ?? [];
+  const rageAnalyses = observability?.getRageClickAnalyses() ?? [];
+  const performanceSummary = useMemo(() => {
+    if (!selected || !observability) return null;
+    const events = observability.collector.getEvents({ component: selected.name });
+    return getComponentPerformance(events);
+  }, [selected, observability]);
+  useEffect2(() => {
+    if (!runtimeEvents) return;
+    setTimeline(runtimeEvents.getTimeline(25));
+    return runtimeEvents.subscribe(() => setTimeline(runtimeEvents.getTimeline(25)));
+  }, [runtimeEvents]);
+  if (process.env.NODE_ENV === "production") return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2(InspectorOverlay, { target: inspectMode ? hovered ?? selected : null }),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        "aria-label": "Toggle laRose DevTools",
+        style: toggleStyle,
+        children: "laRose"
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("aside", { "data-lr-devtools": true, style: panelStyle, children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 4, marginBottom: 8 }, children: [
+        /* @__PURE__ */ jsx2(TabButton, { active: tab === "context", onClick: () => {
+          setTab("context");
+          setInspectMode(false);
+        }, children: "Context" }),
+        /* @__PURE__ */ jsxs(TabButton, { active: tab === "timeline", onClick: () => {
+          setTab("timeline");
+          setInspectMode(false);
+        }, children: [
+          "Timeline (",
+          timeline.length,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx2(
+          TabButton,
+          {
+            active: tab === "inspector",
+            onClick: () => setTab("inspector"),
+            children: "Inspector"
+          }
+        ),
+        /* @__PURE__ */ jsxs(TabButton, { active: tab === "journey", onClick: () => {
+          setTab("journey");
+          setInspectMode(false);
+        }, children: [
+          "Journey (",
+          journey.length,
+          ")"
+        ] })
+      ] }),
+      tab === "inspector" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 8 }, children: [
+          /* @__PURE__ */ jsx2(
+            "input",
+            {
+              type: "checkbox",
+              checked: inspectMode,
+              onChange: (e) => setInspectMode(e.target.checked)
+            }
+          ),
+          "Select mode"
+        ] }),
+        !selected && /* @__PURE__ */ jsx2("p", { style: { color: "var(--lr-color-text-muted, #666)", margin: "0 0 8px" }, children: "Click a laRose component on the page to inspect it." }),
+        selected && buildInspectorReadout(selected, runtime, performanceSummary).map((line) => /* @__PURE__ */ jsx2("div", { style: { lineHeight: 1.5 }, children: line }, line)),
+        selected && /* @__PURE__ */ jsx2(
+          "button",
+          {
+            type: "button",
+            onClick: clearSelection,
+            style: { marginTop: 8, fontSize: 11, cursor: "pointer" },
+            children: "Clear selection"
+          }
+        )
+      ] }),
+      tab === "context" && runtime && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx2(Section, { title: "Session", children: runtime.session }),
+        /* @__PURE__ */ jsx2(Section, { title: "Tenant", children: runtime.tenant?.name ?? runtime.tenant?.id ?? "none" }),
+        /* @__PURE__ */ jsx2(Section, { title: "User", children: runtime.user?.name ?? runtime.user?.id ?? "none" }),
+        /* @__PURE__ */ jsx2(Section, { title: "Environment", children: runtime.environment }),
+        /* @__PURE__ */ jsxs(Section, { title: "Theme", children: [
+          runtime.theme.mode,
+          " / ",
+          runtime.theme.density,
+          runtime.theme.tenantId ? ` \xB7 ${runtime.theme.tenantId}` : ""
+        ] }),
+        /* @__PURE__ */ jsxs(Section, { title: "Locale", children: [
+          runtime.locale.locale,
+          " (",
+          runtime.locale.dir,
+          ") \xB7 ",
+          runtime.timezone
+        ] }),
+        /* @__PURE__ */ jsxs(Section, { title: "Network", children: [
+          runtime.network.condition,
+          " \xB7 online=",
+          String(runtime.network.online),
+          runtime.network.rtt !== void 0 ? ` \xB7 ${runtime.network.rtt}ms` : ""
+        ] }),
+        /* @__PURE__ */ jsxs(Section, { title: "Offline", children: [
+          runtime.offline.status,
+          " \xB7 queue=",
+          runtime.offline.queueLength
+        ] }),
+        /* @__PURE__ */ jsx2(Section, { title: "Permissions", children: runtime.permissions.granted.length ? runtime.permissions.granted.join(", ") : "none" }),
+        /* @__PURE__ */ jsx2(Section, { title: "Features", children: Object.keys(runtime.features.flags).length ? Object.entries(runtime.features.flags).map(([k, v]) => `${k}:${v.enabled ? "on" : "off"}`).join(", ") : "none" }),
+        /* @__PURE__ */ jsxs(Section, { title: "Version", children: [
+          "fe=",
+          runtime.version.frontend,
+          runtime.version.api ? ` \xB7 api=${runtime.version.api}` : ""
+        ] }),
+        /* @__PURE__ */ jsxs(Section, { title: "A11y", children: [
+          "reducedMotion=",
+          String(runtime.accessibility.reducedMotion),
+          " \xB7 highContrast=",
+          String(runtime.accessibility.highContrast)
+        ] })
+      ] }),
+      tab === "context" && !runtime && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(Section, { title: "Theme", children: [
+          "mode=",
+          theme.theme,
+          " density=",
+          theme.density,
+          theme.tenantId ? ` tenant=${theme.tenantId}` : ""
+        ] }),
+        /* @__PURE__ */ jsxs(Section, { title: "Locale", children: [
+          locale,
+          " (",
+          dir,
+          ")"
+        ] }),
+        /* @__PURE__ */ jsx2(Section, { title: "Environment", children: environment }),
+        /* @__PURE__ */ jsxs(Section, { title: "Network", children: [
+          network.condition,
+          " (online=",
+          String(network.online),
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs(Section, { title: "Responsive", children: [
+          breakpoint,
+          " (",
+          width,
+          "px)"
+        ] }),
+        /* @__PURE__ */ jsx2(Section, { title: "Permissions", children: permissions.length ? permissions.join(", ") : "none" })
+      ] }),
+      tab === "timeline" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: [
+        timeline.length === 0 && /* @__PURE__ */ jsx2("span", { style: { color: "var(--lr-color-text-muted, #666)" }, children: "No events yet" }),
+        timeline.slice().reverse().map((event, index) => /* @__PURE__ */ jsxs("div", { style: { lineHeight: 1.4 }, children: [
+          /* @__PURE__ */ jsx2("span", { style: { color: "var(--lr-color-text-muted, #888)" }, children: formatTime(event.timestamp) }),
+          " ",
+          event.type,
+          event.metadata && Object.keys(event.metadata).length > 0 && /* @__PURE__ */ jsxs("span", { style: { color: "var(--lr-color-text-muted, #666)" }, children: [
+            " ",
+            JSON.stringify(event.metadata)
+          ] })
+        ] }, `${event.timestamp}-${index}`))
+      ] }),
+      tab === "journey" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+        !observability && /* @__PURE__ */ jsx2("span", { style: { color: "var(--lr-color-text-muted, #666)" }, children: "ObservabilityProvider required" }),
+        observability && journey.length === 0 && /* @__PURE__ */ jsx2("span", { style: { color: "var(--lr-color-text-muted, #666)" }, children: "No journey steps yet" }),
+        journey.slice().reverse().map((step) => /* @__PURE__ */ jsxs("div", { style: { lineHeight: 1.4 }, children: [
+          /* @__PURE__ */ jsx2("span", { style: { color: "var(--lr-color-text-muted, #888)" }, children: formatTime(step.timestamp) }),
+          " ",
+          "[",
+          step.kind,
+          "] ",
+          step.label,
+          step.context?.network && /* @__PURE__ */ jsxs("span", { style: { color: "var(--lr-color-text-muted, #666)" }, children: [
+            " ",
+            "\xB7 net=",
+            step.context.network
+          ] })
+        ] }, step.id)),
+        rageAnalyses.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: 8 }, children: [
+          /* @__PURE__ */ jsx2("strong", { children: "Rage click analysis" }),
+          rageAnalyses.slice().reverse().slice(0, 3).map((analysis) => /* @__PURE__ */ jsxs("div", { style: { marginTop: 4 }, children: [
+            analysis.component,
+            " (",
+            analysis.clickCount,
+            "x)",
+            analysis.likelyCauses.map((cause) => /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { color: "var(--lr-color-text-muted, #666)", paddingLeft: 8 },
+                children: [
+                  "\u2192 ",
+                  cause.type,
+                  ": ",
+                  cause.label,
+                  " (",
+                  cause.confidence,
+                  ")"
+                ]
+              },
+              `${cause.type}-${cause.label}`
+            ))
+          ] }, `${analysis.component}-${analysis.timestamp}`))
+        ] })
+      ] }),
+      observability && tab === "context" && /* @__PURE__ */ jsxs(Section, { title: "Observability", children: [
+        observability.collector.getEvents().length,
+        " UX events tracked"
+      ] })
+    ] })
+  ] });
+}
+function formatTime(timestamp) {
+  return new Date(timestamp).toLocaleTimeString(void 0, { hour12: false });
+}
+function TabButton({
+  active,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      onClick,
+      style: {
+        flex: 1,
+        padding: "4px 6px",
+        fontSize: 11,
+        fontWeight: 600,
+        border: "1px solid var(--lr-color-border, #ccc)",
+        borderRadius: 4,
+        background: active ? "var(--lr-color-primary, #2563eb)" : "var(--lr-color-surface, #fff)",
+        color: active ? "var(--lr-color-text-inverse, #fff)" : "inherit",
+        cursor: "pointer"
+      },
+      children
+    }
+  );
+}
+function Section({ title, children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { marginBottom: 8 }, children: [
+    /* @__PURE__ */ jsx2("strong", { style: { display: "block", marginBottom: 2 }, children: title }),
+    /* @__PURE__ */ jsx2("div", { style: { color: "var(--lr-color-text-muted, #666)" }, children })
+  ] });
+}
+var toggleStyle = {
+  position: "fixed",
+  bottom: 16,
+  left: 16,
+  zIndex: 9999,
+  padding: "8px 12px",
+  borderRadius: 8,
+  border: "1px solid var(--lr-color-border, #ccc)",
+  background: "var(--lr-color-surface-elevated, #fff)",
+  cursor: "pointer",
+  fontSize: 12,
+  fontWeight: 600
+};
+var panelStyle = {
+  position: "fixed",
+  bottom: 56,
+  left: 16,
+  zIndex: 9999,
+  width: 360,
+  maxHeight: "60vh",
+  overflow: "auto",
+  padding: 12,
+  borderRadius: 8,
+  border: "1px solid var(--lr-color-border, #ccc)",
+  background: "var(--lr-color-surface-elevated, #fff)",
+  fontSize: 12,
+  fontFamily: "monospace",
+  boxShadow: "0 4px 12px rgba(0,0,0,0.15)"
+};
+function DevToolsProvider({ children }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    children,
+    /* @__PURE__ */ jsx2(DevToolsPanel, {})
+  ] });
+}
+export {
+  DevToolsPanel,
+  DevToolsProvider,
+  InspectorOverlay,
+  buildInspectorReadout,
+  getComponentPerformance,
+  resolveReactComponentInfo,
+  useComponentInspector
+};

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@larose-ui/devtools",
+  "version": "0.1.0",
+  "description": "In-app DevTools inspector for laRose UI platform",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@larose-ui/core": "0.1.0",
+    "@larose-ui/observability": "0.1.0",
+    "@larose-ui/runtime": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "@larose-ui/permissions": "0.1.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "jsdom": "^25.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8",
+    "@larose-ui/permissions": "0.1.0",
+    "@larose-ui/testing": "0.1.0"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/larose-ui/larose.git",
+    "directory": "packages/devtools"
+  },
+  "keywords": [
+    "larose",
+    "react",
+    "ui-platform",
+    "design-system",
+    "saas"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "clean": "rm -rf dist"
+  }
+}