legend-state-dev-tools 0.0.2 → 0.0.5

package/package.json

@@ -1,11 +1,26 @@
 {
   "name": "legend-state-dev-tools",
-  "version": "0.0.2",
+  "version": "0.0.5",
   "private": false,
   "workspaces": [
     "packages/*",
     "examples/*"
   ],
+  "main": "./packages/core/dist/index.js",
+  "module": "./packages/core/dist/index.mjs",
+  "types": "./packages/core/dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./packages/core/dist/index.d.ts",
+      "import": "./packages/core/dist/index.mjs",
+      "require": "./packages/core/dist/index.js",
+      "default": "./packages/core/dist/index.mjs"
+    },
+    "./packages/core/dist/styles.css": "./packages/core/dist/styles.css"
+  },
+  "files": [
+    "packages/core/dist"
+  ],
   "scripts": {
     "build": "npm run build -w packages/core",
     "dev": "npm run build && npm run dev -w examples/basic",

package/packages/core/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { ObservableParam } from '@legendapp/state';
+
+export declare interface DevTools {
+    destroy: () => void;
+}
+
+export declare interface DevToolsOptions {
+    enabled?: boolean;
+    readOnly?: boolean;
+    theme?: string;
+    rootName?: string;
+    position?: 'left' | 'right';
+}
+
+export declare function init(observable$: ObservableParam<any>, options?: DevToolsOptions): DevTools;
+
+export { }

package/packages/core/dist/index.js

@@ -0,0 +1,28 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("eta"),g=require("react/jsx-runtime"),f=require("react"),C=require("react-dom/client"),h=require("json-edit-react"),M=`<div class="lsdt-toolbar-header">
+  <div class="lsdt-toolbar-title">
+    <span class="lsdt-toolbar-indicator"></span>
+    Legend State
+  </div>
+  <button
+    class="lsdt-toggle-btn <%= it.panelVisible ? 'active' : '' %>"
+    data-action="toggle-panel"
+    title="<%= it.panelVisible ? 'Hide panel' : 'Show panel' %>"
+  >
+    <%= it.panelVisible ? 'Hide' : 'Show' %> <%= it.rootName %>
+  </button>
+</div>
+`,k=`<div class="lsdt-panel-header">
+  <h3><%= it.rootName %></h3>
+  <div class="lsdt-panel-actions">
+    <% if (it.readOnly) { %>
+      <span class="lsdt-readonly-badge">Read-only</span>
+    <% } %>
+    <button class="lsdt-close-btn" data-action="close-panel" title="Close">&times;</button>
+  </div>
+</div>
+<div class="lsdt-panel-content">
+  <div id="lsdt-json-editor-root"></div>
+</div>
+`,N=new S.Eta({autoEscape:!0,autoTrim:!1}),w={toolbar:M,panel:k};function b(n,t){const e=w[n];if(!e)return console.error(`[LSDT] Template not found: ${n}`),"";try{return N.renderString(e,t)}catch(o){return console.error(`[LSDT] Error rendering template ${n}:`,o),""}}function P(n){return b("toolbar",n)}function O(n){return b("panel",n)}const R="lsdt";function V(n,t){const e=localStorage.getItem(`${R}-${n}`);return e===null?t:e==="true"}function j(){const n=[];return{add:t=>n.push(t),run:()=>{n.forEach(t=>{try{t()}catch(e){console.error("[Legend State DevTools] Cleanup error:",e)}}),n.length=0}}}class ${constructor(t={}){this.container=null,this.isDragging=!1,this.offsetX=0,this.offsetY=0,this.isMinimized=V("toolbar-minimized",!1),this.panelVisible=!1,this.handleClick=e=>{var d;const i=e.target.closest("[data-action]");if(!i)return;i.getAttribute("data-action")==="toggle-panel"&&((d=this.onTogglePanel)==null||d.call(this))},this.handleMouseDown=e=>{if(e.target.tagName!=="BUTTON"&&(this.isDragging=!0,this.container)){this.container.classList.add("dragging");const i=this.container.getBoundingClientRect();this.offsetX=e.clientX-i.left,this.offsetY=e.clientY-i.top}},this.handleMouseMove=e=>{!this.isDragging||!this.container||(this.container.style.left=`${e.clientX-this.offsetX}px`,this.container.style.top=`${e.clientY-this.offsetY}px`,this.container.style.right="auto",this.container.style.bottom="auto")},this.handleMouseUp=()=>{var e;this.isDragging=!1,(e=this.container)==null||e.classList.remove("dragging")},this.onTogglePanel=t.onTogglePanel,this.rootName=t.rootName||"state$"}mount(){this.container||(this.container=document.createElement("div"),this.container.id="lsdt-toolbar",this.isMinimized&&this.container.classList.add("lsdt-toolbar-minimized"),document.body.appendChild(this.container),this.render(),this.attachEventListeners())}render(){if(!this.container)return;const t={isMinimized:this.isMinimized,panelVisible:this.panelVisible,rootName:this.rootName};this.container.innerHTML=P(t)}attachEventListeners(){this.container&&(this.container.addEventListener("click",this.handleClick),this.container.addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp))}setPanelVisible(t){this.panelVisible=t,this.render()}unmount(){this.container&&(this.container.removeEventListener("click",this.handleClick),this.container.removeEventListener("mousedown",this.handleMouseDown),this.container.remove(),this.container=null),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)}}class x{constructor(t={}){this.container=null,this.visible=!1,this.handleClick=e=>{var d;const i=e.target.closest("[data-action]");if(!i)return;i.getAttribute("data-action")==="close-panel"&&((d=this.onClose)==null||d.call(this))},this.rootName=t.rootName||"state$",this.readOnly=t.readOnly||!1,this.onClose=t.onClose,this.position=t.position||"right"}toggle(){this.visible?this.hide():this.show()}show(){this.visible=!0,this.container||(this.container=document.createElement("div"),this.container.id="lsdt-panel",this.position==="left"&&this.container.classList.add("lsdt-panel-left"),document.body.appendChild(this.container),this.attachEventListeners()),this.render()}hide(){var t;this.visible=!1,(t=this.container)==null||t.remove(),this.container=null}isVisible(){return this.visible}getEditorRoot(){var t;return((t=this.container)==null?void 0:t.querySelector("#lsdt-json-editor-root"))||null}render(){if(!this.container)return;const t={rootName:this.rootName,readOnly:this.readOnly};this.container.innerHTML=O(t)}attachEventListeners(){this.container&&this.container.addEventListener("click",this.handleClick)}unmount(){this.container&&(this.container.removeEventListener("click",this.handleClick),this.container.remove(),this.container=null),this.visible=!1}}function z(n,t){const e=()=>{try{return JSON.parse(JSON.stringify(n.peek()))}catch{return}};let o=null;try{o=n.onChange(()=>{const i=e();t.onSnapshot(i)},{trackingType:!1})}catch{console.warn("[Legend State DevTools] Could not subscribe to observable changes via onChange")}return{getSnapshot:e,setData:i=>{try{n.set(i)}catch(c){console.error("[Legend State DevTools] Failed to set data:",c)}},destroy:()=>{o&&(o(),o=null)}}}const q={githubDark:h.githubDarkTheme,githubLight:h.githubLightTheme,monoDark:h.monoDarkTheme,monoLight:h.monoLightTheme};class J extends f.Component{constructor(){super(...arguments),this.state={error:null}}static getDerivedStateFromError(t){return{error:t}}componentDidCatch(t,e){console.error("[Legend State DevTools] React error:",t,e)}render(){return this.state.error?f.createElement("pre",{style:{color:"#ff6b6b",padding:16,fontSize:12}},`DevTools Error: ${this.state.error.message}
+${this.state.error.stack}`):this.props.children}}function U({data:n,onEdit:t,readOnly:e,theme:o,rootName:i}){const c=q[o]??h.githubDarkTheme;return g.jsx(h.JsonEditor,{data:n,setData:t,rootName:i,theme:c,collapse:2,restrictEdit:e,restrictDelete:e,restrictAdd:e,restrictTypeSelection:e?!0:void 0})}function X(n){const[t,e]=f.useState(n.initialData);f.useEffect(()=>{n.registerUpdater(i=>{e(i)})},[]);const o=i=>{e(i),n.onEdit(i)};return g.jsx(U,{data:t,onEdit:o,readOnly:n.readOnly,theme:n.theme,rootName:n.rootName})}function B(n,t){let e=null,o=null;return e=C.createRoot(n),e.render(g.jsx(J,{children:g.jsx(X,{initialData:t.initialData,onEdit:t.onEdit,readOnly:t.readOnly,theme:t.theme,rootName:t.rootName,registerUpdater:i=>{o=i}})})),{updateData:i=>{o==null||o(i)},destroy:()=>{e&&(e.unmount(),e=null)}}}function Y(n,t={}){const{enabled:e=!0,readOnly:o=!1,theme:i="githubDark",rootName:c="state$",position:d="right"}=t;if(!e)return{destroy:()=>{}};const u=j();let s=null,r=null,l=null,a=null;s=new x({rootName:c,readOnly:o,position:d,onClose:()=>{v()}});const y=()=>{if(!s)return;s.show(),r==null||r.setPanelVisible(!0);const m=(p=10)=>{const E=s==null?void 0:s.getEditorRoot();if(!E){p>0?setTimeout(()=>m(p-1),16):console.warn("[Legend State DevTools] Could not find #lsdt-json-editor-root after retries");return}if(a)return;const D=(l==null?void 0:l.getSnapshot())??{};a=B(E,{initialData:D,onEdit:L=>{l==null||l.setData(L)},readOnly:o,theme:i,rootName:c})};m()},v=()=>{a&&(a.destroy(),a=null),s==null||s.hide(),r==null||r.setPanelVisible(!1)},T=()=>{s!=null&&s.isVisible()?v():y()};return r=new $({onTogglePanel:T,rootName:c}),r.mount(),u.add(()=>r==null?void 0:r.unmount()),l=z(n,{onSnapshot:m=>{a==null||a.updateData(m)}}),u.add(()=>l==null?void 0:l.destroy()),u.add(()=>{a&&(a.destroy(),a=null)}),u.add(()=>s==null?void 0:s.unmount()),{destroy:()=>{u.run()}}}exports.init=Y;
+//# sourceMappingURL=index.js.map

package/packages/core/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/ui/templates/toolbar.eta","../src/ui/templates/panel.eta","../src/ui/template-engine.ts","../src/ui/shared-utils.ts","../src/ui/toolbar.ts","../src/ui/panel.ts","../src/state-bridge.ts","../src/ui/json-editor-mount.tsx","../src/index.ts"],"sourcesContent":["<div class=\"lsdt-toolbar-header\">\n  <div class=\"lsdt-toolbar-title\">\n    <span class=\"lsdt-toolbar-indicator\"></span>\n    Legend State\n  </div>\n  <button\n    class=\"lsdt-toggle-btn <%= it.panelVisible ? 'active' : '' %>\"\n    data-action=\"toggle-panel\"\n    title=\"<%= it.panelVisible ? 'Hide panel' : 'Show panel' %>\"\n  >\n    <%= it.panelVisible ? 'Hide' : 'Show' %> <%= it.rootName %>\n  </button>\n</div>\n","<div class=\"lsdt-panel-header\">\n  <h3><%= it.rootName %></h3>\n  <div class=\"lsdt-panel-actions\">\n    <% if (it.readOnly) { %>\n      <span class=\"lsdt-readonly-badge\">Read-only</span>\n    <% } %>\n    <button class=\"lsdt-close-btn\" data-action=\"close-panel\" title=\"Close\">&times;</button>\n  </div>\n</div>\n<div class=\"lsdt-panel-content\">\n  <div id=\"lsdt-json-editor-root\"></div>\n</div>\n","/**\n * Eta template engine wrapper for Legend State Dev Tools\n */\nimport { Eta } from 'eta';\n\nimport toolbarTemplate from './templates/toolbar.eta';\nimport panelTemplate from './templates/panel.eta';\n\nconst eta = new Eta({\n  autoEscape: true,\n  autoTrim: false,\n});\n\nconst templates: Record<string, string> = {\n  toolbar: toolbarTemplate,\n  panel: panelTemplate,\n};\n\nexport function renderTemplate<T extends Record<string, unknown>>(\n  name: string,\n  data: T\n): string {\n  const template = templates[name];\n  if (!template) {\n    console.error(`[LSDT] Template not found: ${name}`);\n    return '';\n  }\n  try {\n    return eta.renderString(template, data);\n  } catch (error) {\n    console.error(`[LSDT] Error rendering template ${name}:`, error);\n    return '';\n  }\n}\n\nexport interface ToolbarData {\n  [key: string]: unknown;\n  isMinimized: boolean;\n  panelVisible: boolean;\n  rootName: string;\n}\n\nexport function renderToolbar(data: ToolbarData): string {\n  return renderTemplate('toolbar', data);\n}\n\nexport interface PanelData {\n  [key: string]: unknown;\n  rootName: string;\n  readOnly: boolean;\n}\n\nexport function renderPanel(data: PanelData): string {\n  return renderTemplate('panel', data);\n}\n","/**\n * Shared UI utilities for Legend State Dev Tools\n */\n\nconst STORAGE_PREFIX = 'lsdt';\n\nexport function escapeHtml(str: string): string {\n  const div = document.createElement('div');\n  div.textContent = str;\n  return div.innerHTML;\n}\n\nexport function getStoredBoolean(key: string, defaultValue: boolean): boolean {\n  const stored = localStorage.getItem(`${STORAGE_PREFIX}-${key}`);\n  if (stored === null) return defaultValue;\n  return stored === 'true';\n}\n\nexport function setStoredBoolean(key: string, value: boolean): void {\n  localStorage.setItem(`${STORAGE_PREFIX}-${key}`, String(value));\n}\n\nexport function getStoredString(key: string, defaultValue: string): string {\n  return localStorage.getItem(`${STORAGE_PREFIX}-${key}`) || defaultValue;\n}\n\nexport function setStoredString(key: string, value: string): void {\n  localStorage.setItem(`${STORAGE_PREFIX}-${key}`, value);\n}\n\nexport function createCleanup(): {\n  add: (fn: () => void) => void;\n  run: () => void;\n} {\n  const cleanupFns: (() => void)[] = [];\n  return {\n    add: (fn: () => void) => cleanupFns.push(fn),\n    run: () => {\n      cleanupFns.forEach((fn) => {\n        try {\n          fn();\n        } catch (e) {\n          console.error('[Legend State DevTools] Cleanup error:', e);\n        }\n      });\n      cleanupFns.length = 0;\n    },\n  };\n}\n","import { renderToolbar, type ToolbarData } from './template-engine';\nimport { getStoredBoolean, setStoredBoolean } from './shared-utils';\n\nexport class Toolbar {\n  private container: HTMLElement | null = null;\n  private isDragging = false;\n  private offsetX = 0;\n  private offsetY = 0;\n  private isMinimized: boolean = getStoredBoolean('toolbar-minimized', false);\n  private panelVisible = false;\n\n  private onTogglePanel?: () => void;\n  private rootName: string;\n\n  constructor(options: { onTogglePanel?: () => void; rootName?: string } = {}) {\n    this.onTogglePanel = options.onTogglePanel;\n    this.rootName = options.rootName || 'state$';\n  }\n\n  public mount(): void {\n    if (this.container) return;\n\n    this.container = document.createElement('div');\n    this.container.id = 'lsdt-toolbar';\n    if (this.isMinimized) {\n      this.container.classList.add('lsdt-toolbar-minimized');\n    }\n\n    document.body.appendChild(this.container);\n    this.render();\n    this.attachEventListeners();\n  }\n\n  private render(): void {\n    if (!this.container) return;\n\n    const data: ToolbarData = {\n      isMinimized: this.isMinimized,\n      panelVisible: this.panelVisible,\n      rootName: this.rootName,\n    };\n\n    this.container.innerHTML = renderToolbar(data);\n  }\n\n  private attachEventListeners(): void {\n    if (!this.container) return;\n\n    this.container.addEventListener('click', this.handleClick);\n    this.container.addEventListener('mousedown', this.handleMouseDown);\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private handleClick = (e: Event): void => {\n    const target = e.target as HTMLElement;\n    const actionElement = target.closest('[data-action]');\n    if (!actionElement) return;\n\n    const action = actionElement.getAttribute('data-action');\n    if (action === 'toggle-panel') {\n      this.onTogglePanel?.();\n    }\n  };\n\n  private handleMouseDown = (e: MouseEvent): void => {\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'BUTTON') return;\n\n    this.isDragging = true;\n    if (this.container) {\n      this.container.classList.add('dragging');\n      const rect = this.container.getBoundingClientRect();\n      this.offsetX = e.clientX - rect.left;\n      this.offsetY = e.clientY - rect.top;\n    }\n  };\n\n  private handleMouseMove = (e: MouseEvent): void => {\n    if (!this.isDragging || !this.container) return;\n\n    this.container.style.left = `${e.clientX - this.offsetX}px`;\n    this.container.style.top = `${e.clientY - this.offsetY}px`;\n    this.container.style.right = 'auto';\n    this.container.style.bottom = 'auto';\n  };\n\n  private handleMouseUp = (): void => {\n    this.isDragging = false;\n    this.container?.classList.remove('dragging');\n  };\n\n  public setPanelVisible(visible: boolean): void {\n    this.panelVisible = visible;\n    this.render();\n  }\n\n  public unmount(): void {\n    if (this.container) {\n      this.container.removeEventListener('click', this.handleClick);\n      this.container.removeEventListener('mousedown', this.handleMouseDown);\n      this.container.remove();\n      this.container = null;\n    }\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n  }\n}\n","import { renderPanel, type PanelData } from './template-engine';\n\nexport class Panel {\n  private container: HTMLElement | null = null;\n  private visible = false;\n  private rootName: string;\n  private readOnly: boolean;\n  private onClose?: () => void;\n  private position: 'left' | 'right';\n\n  constructor(options: {\n    rootName?: string;\n    readOnly?: boolean;\n    onClose?: () => void;\n    position?: 'left' | 'right';\n  } = {}) {\n    this.rootName = options.rootName || 'state$';\n    this.readOnly = options.readOnly || false;\n    this.onClose = options.onClose;\n    this.position = options.position || 'right';\n  }\n\n  public toggle(): void {\n    if (this.visible) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  public show(): void {\n    this.visible = true;\n\n    if (!this.container) {\n      this.container = document.createElement('div');\n      this.container.id = 'lsdt-panel';\n      if (this.position === 'left') {\n        this.container.classList.add('lsdt-panel-left');\n      }\n      document.body.appendChild(this.container);\n      this.attachEventListeners();\n    }\n\n    this.render();\n  }\n\n  public hide(): void {\n    this.visible = false;\n    this.container?.remove();\n    this.container = null;\n  }\n\n  public isVisible(): boolean {\n    return this.visible;\n  }\n\n  public getEditorRoot(): HTMLElement | null {\n    return this.container?.querySelector('#lsdt-json-editor-root') || null;\n  }\n\n  private render(): void {\n    if (!this.container) return;\n\n    const data: PanelData = {\n      rootName: this.rootName,\n      readOnly: this.readOnly,\n    };\n\n    this.container.innerHTML = renderPanel(data);\n  }\n\n  private attachEventListeners(): void {\n    if (!this.container) return;\n    this.container.addEventListener('click', this.handleClick);\n  }\n\n  private handleClick = (e: Event): void => {\n    const target = e.target as HTMLElement;\n    const actionElement = target.closest('[data-action]');\n    if (!actionElement) return;\n\n    const action = actionElement.getAttribute('data-action');\n    if (action === 'close-panel') {\n      this.onClose?.();\n    }\n  };\n\n  public unmount(): void {\n    if (this.container) {\n      this.container.removeEventListener('click', this.handleClick);\n      this.container.remove();\n      this.container = null;\n    }\n    this.visible = false;\n  }\n}\n","import type { ObservableParam } from '@legendapp/state';\n\nexport interface StateBridgeOptions {\n  onSnapshot: (snapshot: unknown) => void;\n}\n\nexport interface StateBridge {\n  getSnapshot: () => unknown;\n  setData: (newData: unknown) => void;\n  destroy: () => void;\n}\n\nexport function createStateBridge(\n  observable$: ObservableParam<any>,\n  options: StateBridgeOptions\n): StateBridge {\n  // Get initial snapshot\n  const getSnapshot = () => {\n    try {\n      return JSON.parse(JSON.stringify((observable$ as any).peek()));\n    } catch {\n      return undefined;\n    }\n  };\n\n  // Subscribe to changes using onChange\n  let dispose: (() => void) | null = null;\n  try {\n    dispose = (observable$ as any).onChange(\n      () => {\n        const snapshot = getSnapshot();\n        options.onSnapshot(snapshot);\n      },\n      { trackingType: false }\n    );\n  } catch {\n    console.warn('[Legend State DevTools] Could not subscribe to observable changes via onChange');\n  }\n\n  return {\n    getSnapshot,\n    setData: (newData: unknown) => {\n      try {\n        (observable$ as any).set(newData);\n      } catch (e) {\n        console.error('[Legend State DevTools] Failed to set data:', e);\n      }\n    },\n    destroy: () => {\n      if (dispose) {\n        dispose();\n        dispose = null;\n      }\n    },\n  };\n}\n","import React, { Component, useEffect, useState, type ErrorInfo, type ReactNode } from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\nimport { JsonEditor, githubDarkTheme, githubLightTheme, monoDarkTheme, monoLightTheme } from 'json-edit-react';\n\nconst themeMap: Record<string, object> = {\n  githubDark: githubDarkTheme,\n  githubLight: githubLightTheme,\n  monoDark: monoDarkTheme,\n  monoLight: monoLightTheme,\n};\n\nclass ErrorBoundary extends Component<\n  { children: ReactNode },\n  { error: Error | null }\n> {\n  state = { error: null as Error | null };\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n  componentDidCatch(error: Error, info: ErrorInfo) {\n    console.error('[Legend State DevTools] React error:', error, info);\n  }\n  render() {\n    if (this.state.error) {\n      return React.createElement(\n        'pre',\n        { style: { color: '#ff6b6b', padding: 16, fontSize: 12 } },\n        `DevTools Error: ${this.state.error.message}\\n${this.state.error.stack}`\n      );\n    }\n    return this.props.children;\n  }\n}\n\ninterface JsonEditorWrapperProps {\n  data: unknown;\n  onEdit: (newData: unknown) => void;\n  readOnly: boolean;\n  theme: string;\n  rootName: string;\n}\n\nfunction JsonEditorWrapper({\n  data,\n  onEdit,\n  readOnly,\n  theme,\n  rootName,\n}: JsonEditorWrapperProps) {\n  const resolvedTheme = themeMap[theme] ?? githubDarkTheme;\n  return (\n    <JsonEditor\n      data={data as Record<string, unknown>}\n      setData={onEdit as any}\n      rootName={rootName}\n      theme={resolvedTheme as any}\n      collapse={2}\n      restrictEdit={readOnly}\n      restrictDelete={readOnly}\n      restrictAdd={readOnly}\n      restrictTypeSelection={readOnly ? true : undefined}\n    />\n  );\n}\n\nexport interface JsonEditorBridge {\n  updateData: (data: unknown) => void;\n  destroy: () => void;\n}\n\n// Wrapper component that receives data via a callback registration\nfunction JsonEditorBridgeWrapper(props: {\n  initialData: unknown;\n  onEdit: (newData: unknown) => void;\n  readOnly: boolean;\n  theme: string;\n  rootName: string;\n  registerUpdater: (updater: (data: unknown) => void) => void;\n}) {\n  const [data, setData] = useState<unknown>(props.initialData);\n\n  useEffect(() => {\n    props.registerUpdater((newData: unknown) => {\n      setData(newData);\n    });\n  }, []);\n\n  const handleEdit = (newData: unknown) => {\n    setData(newData);\n    props.onEdit(newData);\n  };\n\n  return (\n    <JsonEditorWrapper\n      data={data}\n      onEdit={handleEdit}\n      readOnly={props.readOnly}\n      theme={props.theme}\n      rootName={props.rootName}\n    />\n  );\n}\n\nexport function mountJsonEditor(\n  container: HTMLElement,\n  options: {\n    initialData: unknown;\n    onEdit: (newData: unknown) => void;\n    readOnly: boolean;\n    theme: string;\n    rootName: string;\n  }\n): JsonEditorBridge {\n  let root: Root | null = null;\n  let updaterFn: ((data: unknown) => void) | null = null;\n\n  root = createRoot(container);\n  root.render(\n    <ErrorBoundary>\n    <JsonEditorBridgeWrapper\n      initialData={options.initialData}\n      onEdit={options.onEdit}\n      readOnly={options.readOnly}\n      theme={options.theme}\n      rootName={options.rootName}\n      registerUpdater={(updater) => {\n        updaterFn = updater;\n      }}\n    />\n    </ErrorBoundary>\n  );\n\n  return {\n    updateData: (data: unknown) => {\n      updaterFn?.(data);\n    },\n    destroy: () => {\n      if (root) {\n        root.unmount();\n        root = null;\n      }\n    },\n  };\n}\n","import type { ObservableParam } from '@legendapp/state';\nimport { Toolbar } from './ui/toolbar';\nimport { Panel } from './ui/panel';\nimport { createStateBridge, type StateBridge } from './state-bridge';\nimport { mountJsonEditor, type JsonEditorBridge } from './ui/json-editor-mount';\nimport { createCleanup } from './ui/shared-utils';\n\nexport interface DevToolsOptions {\n  enabled?: boolean;\n  readOnly?: boolean;\n  theme?: string;\n  rootName?: string;\n  position?: 'left' | 'right';\n}\n\nexport interface DevTools {\n  destroy: () => void;\n}\n\nexport function init(\n  observable$: ObservableParam<any>,\n  options: DevToolsOptions = {}\n): DevTools {\n  const {\n    enabled = true,\n    readOnly = false,\n    theme = 'githubDark',\n    rootName = 'state$',\n    position = 'right',\n  } = options;\n\n  if (!enabled) {\n    return { destroy: () => {} };\n  }\n\n  const cleanup = createCleanup();\n  let panel: Panel | null = null;\n  let toolbar: Toolbar | null = null;\n  let bridge: StateBridge | null = null;\n  let editorBridge: JsonEditorBridge | null = null;\n\n  // Create panel\n  panel = new Panel({\n    rootName,\n    readOnly,\n    position,\n    onClose: () => {\n      hidePanel();\n    },\n  });\n\n  const showPanel = () => {\n    if (!panel) return;\n    panel.show();\n    toolbar?.setPanelVisible(true);\n\n    // Poll for editor root element (innerHTML may not be ready immediately)\n    const tryMount = (retries = 10) => {\n      const editorRoot = panel?.getEditorRoot();\n      if (!editorRoot) {\n        if (retries > 0) {\n          setTimeout(() => tryMount(retries - 1), 16);\n        } else {\n          console.warn('[Legend State DevTools] Could not find #lsdt-json-editor-root after retries');\n        }\n        return;\n      }\n      if (editorBridge) return;\n\n      const initialData = bridge?.getSnapshot() ?? {};\n\n      editorBridge = mountJsonEditor(editorRoot, {\n        initialData,\n        onEdit: (newData: unknown) => {\n          bridge?.setData(newData);\n        },\n        readOnly,\n        theme,\n        rootName,\n      });\n    };\n    tryMount();\n  };\n\n  const hidePanel = () => {\n    if (editorBridge) {\n      editorBridge.destroy();\n      editorBridge = null;\n    }\n    panel?.hide();\n    toolbar?.setPanelVisible(false);\n  };\n\n  const togglePanel = () => {\n    if (panel?.isVisible()) {\n      hidePanel();\n    } else {\n      showPanel();\n    }\n  };\n\n  // Create toolbar\n  toolbar = new Toolbar({\n    onTogglePanel: togglePanel,\n    rootName,\n  });\n  toolbar.mount();\n  cleanup.add(() => toolbar?.unmount());\n\n  // Create state bridge\n  bridge = createStateBridge(observable$, {\n    onSnapshot: (snapshot) => {\n      editorBridge?.updateData(snapshot);\n    },\n  });\n  cleanup.add(() => bridge?.destroy());\n  cleanup.add(() => {\n    if (editorBridge) {\n      editorBridge.destroy();\n      editorBridge = null;\n    }\n  });\n  cleanup.add(() => panel?.unmount());\n\n  return {\n    destroy: () => {\n      cleanup.run();\n    },\n  };\n}\n"],"names":["toolbarTemplate","panelTemplate","eta","Eta","templates","renderTemplate","name","data","template","error","renderToolbar","renderPanel","STORAGE_PREFIX","getStoredBoolean","key","defaultValue","stored","createCleanup","cleanupFns","fn","Toolbar","options","actionElement","_a","rect","visible","Panel","createStateBridge","observable$","getSnapshot","dispose","snapshot","newData","e","themeMap","githubDarkTheme","githubLightTheme","monoDarkTheme","monoLightTheme","ErrorBoundary","Component","info","React","JsonEditorWrapper","onEdit","readOnly","theme","rootName","resolvedTheme","jsx","JsonEditor","JsonEditorBridgeWrapper","props","setData","useState","useEffect","handleEdit","mountJsonEditor","container","root","updaterFn","createRoot","updater","init","enabled","position","cleanup","panel","toolbar","bridge","editorBridge","hidePanel","showPanel","tryMount","retries","editorRoot","initialData","togglePanel"],"mappings":"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"}

package/packages/core/dist/index.mjs

@@ -0,0 +1,349 @@
+import { Eta as T } from "eta";
+import { jsx as m } from "react/jsx-runtime";
+import S, { Component as C, useState as M, useEffect as N } from "react";
+import { createRoot as k } from "react-dom/client";
+import { JsonEditor as w, monoLightTheme as P, monoDarkTheme as V, githubLightTheme as O, githubDarkTheme as v } from "json-edit-react";
+const R = `<div class="lsdt-toolbar-header">
+  <div class="lsdt-toolbar-title">
+    <span class="lsdt-toolbar-indicator"></span>
+    Legend State
+  </div>
+  <button
+    class="lsdt-toggle-btn <%= it.panelVisible ? 'active' : '' %>"
+    data-action="toggle-panel"
+    title="<%= it.panelVisible ? 'Hide panel' : 'Show panel' %>"
+  >
+    <%= it.panelVisible ? 'Hide' : 'Show' %> <%= it.rootName %>
+  </button>
+</div>
+`, $ = `<div class="lsdt-panel-header">
+  <h3><%= it.rootName %></h3>
+  <div class="lsdt-panel-actions">
+    <% if (it.readOnly) { %>
+      <span class="lsdt-readonly-badge">Read-only</span>
+    <% } %>
+    <button class="lsdt-close-btn" data-action="close-panel" title="Close">&times;</button>
+  </div>
+</div>
+<div class="lsdt-panel-content">
+  <div id="lsdt-json-editor-root"></div>
+</div>
+`, z = new T({
+  autoEscape: !0,
+  autoTrim: !1
+}), J = {
+  toolbar: R,
+  panel: $
+};
+function E(n, t) {
+  const e = J[n];
+  if (!e)
+    return console.error(`[LSDT] Template not found: ${n}`), "";
+  try {
+    return z.renderString(e, t);
+  } catch (o) {
+    return console.error(`[LSDT] Error rendering template ${n}:`, o), "";
+  }
+}
+function U(n) {
+  return E("toolbar", n);
+}
+function X(n) {
+  return E("panel", n);
+}
+const x = "lsdt";
+function B(n, t) {
+  const e = localStorage.getItem(`${x}-${n}`);
+  return e === null ? t : e === "true";
+}
+function Y() {
+  const n = [];
+  return {
+    add: (t) => n.push(t),
+    run: () => {
+      n.forEach((t) => {
+        try {
+          t();
+        } catch (e) {
+          console.error("[Legend State DevTools] Cleanup error:", e);
+        }
+      }), n.length = 0;
+    }
+  };
+}
+class j {
+  constructor(t = {}) {
+    this.container = null, this.isDragging = !1, this.offsetX = 0, this.offsetY = 0, this.isMinimized = B("toolbar-minimized", !1), this.panelVisible = !1, this.handleClick = (e) => {
+      var d;
+      const i = e.target.closest("[data-action]");
+      if (!i) return;
+      i.getAttribute("data-action") === "toggle-panel" && ((d = this.onTogglePanel) == null || d.call(this));
+    }, this.handleMouseDown = (e) => {
+      if (e.target.tagName !== "BUTTON" && (this.isDragging = !0, this.container)) {
+        this.container.classList.add("dragging");
+        const i = this.container.getBoundingClientRect();
+        this.offsetX = e.clientX - i.left, this.offsetY = e.clientY - i.top;
+      }
+    }, this.handleMouseMove = (e) => {
+      !this.isDragging || !this.container || (this.container.style.left = `${e.clientX - this.offsetX}px`, this.container.style.top = `${e.clientY - this.offsetY}px`, this.container.style.right = "auto", this.container.style.bottom = "auto");
+    }, this.handleMouseUp = () => {
+      var e;
+      this.isDragging = !1, (e = this.container) == null || e.classList.remove("dragging");
+    }, this.onTogglePanel = t.onTogglePanel, this.rootName = t.rootName || "state$";
+  }
+  mount() {
+    this.container || (this.container = document.createElement("div"), this.container.id = "lsdt-toolbar", this.isMinimized && this.container.classList.add("lsdt-toolbar-minimized"), document.body.appendChild(this.container), this.render(), this.attachEventListeners());
+  }
+  render() {
+    if (!this.container) return;
+    const t = {
+      isMinimized: this.isMinimized,
+      panelVisible: this.panelVisible,
+      rootName: this.rootName
+    };
+    this.container.innerHTML = U(t);
+  }
+  attachEventListeners() {
+    this.container && (this.container.addEventListener("click", this.handleClick), this.container.addEventListener("mousedown", this.handleMouseDown), document.addEventListener("mousemove", this.handleMouseMove), document.addEventListener("mouseup", this.handleMouseUp));
+  }
+  setPanelVisible(t) {
+    this.panelVisible = t, this.render();
+  }
+  unmount() {
+    this.container && (this.container.removeEventListener("click", this.handleClick), this.container.removeEventListener("mousedown", this.handleMouseDown), this.container.remove(), this.container = null), document.removeEventListener("mousemove", this.handleMouseMove), document.removeEventListener("mouseup", this.handleMouseUp);
+  }
+}
+class A {
+  constructor(t = {}) {
+    this.container = null, this.visible = !1, this.handleClick = (e) => {
+      var d;
+      const i = e.target.closest("[data-action]");
+      if (!i) return;
+      i.getAttribute("data-action") === "close-panel" && ((d = this.onClose) == null || d.call(this));
+    }, this.rootName = t.rootName || "state$", this.readOnly = t.readOnly || !1, this.onClose = t.onClose, this.position = t.position || "right";
+  }
+  toggle() {
+    this.visible ? this.hide() : this.show();
+  }
+  show() {
+    this.visible = !0, this.container || (this.container = document.createElement("div"), this.container.id = "lsdt-panel", this.position === "left" && this.container.classList.add("lsdt-panel-left"), document.body.appendChild(this.container), this.attachEventListeners()), this.render();
+  }
+  hide() {
+    var t;
+    this.visible = !1, (t = this.container) == null || t.remove(), this.container = null;
+  }
+  isVisible() {
+    return this.visible;
+  }
+  getEditorRoot() {
+    var t;
+    return ((t = this.container) == null ? void 0 : t.querySelector("#lsdt-json-editor-root")) || null;
+  }
+  render() {
+    if (!this.container) return;
+    const t = {
+      rootName: this.rootName,
+      readOnly: this.readOnly
+    };
+    this.container.innerHTML = X(t);
+  }
+  attachEventListeners() {
+    this.container && this.container.addEventListener("click", this.handleClick);
+  }
+  unmount() {
+    this.container && (this.container.removeEventListener("click", this.handleClick), this.container.remove(), this.container = null), this.visible = !1;
+  }
+}
+function H(n, t) {
+  const e = () => {
+    try {
+      return JSON.parse(JSON.stringify(n.peek()));
+    } catch {
+      return;
+    }
+  };
+  let o = null;
+  try {
+    o = n.onChange(
+      () => {
+        const i = e();
+        t.onSnapshot(i);
+      },
+      { trackingType: !1 }
+    );
+  } catch {
+    console.warn("[Legend State DevTools] Could not subscribe to observable changes via onChange");
+  }
+  return {
+    getSnapshot: e,
+    setData: (i) => {
+      try {
+        n.set(i);
+      } catch (c) {
+        console.error("[Legend State DevTools] Failed to set data:", c);
+      }
+    },
+    destroy: () => {
+      o && (o(), o = null);
+    }
+  };
+}
+const F = {
+  githubDark: v,
+  githubLight: O,
+  monoDark: V,
+  monoLight: P
+};
+class I extends C {
+  constructor() {
+    super(...arguments), this.state = { error: null };
+  }
+  static getDerivedStateFromError(t) {
+    return { error: t };
+  }
+  componentDidCatch(t, e) {
+    console.error("[Legend State DevTools] React error:", t, e);
+  }
+  render() {
+    return this.state.error ? S.createElement(
+      "pre",
+      { style: { color: "#ff6b6b", padding: 16, fontSize: 12 } },
+      `DevTools Error: ${this.state.error.message}
+${this.state.error.stack}`
+    ) : this.props.children;
+  }
+}
+function W({
+  data: n,
+  onEdit: t,
+  readOnly: e,
+  theme: o,
+  rootName: i
+}) {
+  const c = F[o] ?? v;
+  return /* @__PURE__ */ m(
+    w,
+    {
+      data: n,
+      setData: t,
+      rootName: i,
+      theme: c,
+      collapse: 2,
+      restrictEdit: e,
+      restrictDelete: e,
+      restrictAdd: e,
+      restrictTypeSelection: e ? !0 : void 0
+    }
+  );
+}
+function q(n) {
+  const [t, e] = M(n.initialData);
+  return N(() => {
+    n.registerUpdater((i) => {
+      e(i);
+    });
+  }, []), /* @__PURE__ */ m(
+    W,
+    {
+      data: t,
+      onEdit: (i) => {
+        e(i), n.onEdit(i);
+      },
+      readOnly: n.readOnly,
+      theme: n.theme,
+      rootName: n.rootName
+    }
+  );
+}
+function G(n, t) {
+  let e = null, o = null;
+  return e = k(n), e.render(
+    /* @__PURE__ */ m(I, { children: /* @__PURE__ */ m(
+      q,
+      {
+        initialData: t.initialData,
+        onEdit: t.onEdit,
+        readOnly: t.readOnly,
+        theme: t.theme,
+        rootName: t.rootName,
+        registerUpdater: (i) => {
+          o = i;
+        }
+      }
+    ) })
+  ), {
+    updateData: (i) => {
+      o == null || o(i);
+    },
+    destroy: () => {
+      e && (e.unmount(), e = null);
+    }
+  };
+}
+function et(n, t = {}) {
+  const {
+    enabled: e = !0,
+    readOnly: o = !1,
+    theme: i = "githubDark",
+    rootName: c = "state$",
+    position: d = "right"
+  } = t;
+  if (!e)
+    return { destroy: () => {
+    } };
+  const h = Y();
+  let s = null, r = null, l = null, a = null;
+  s = new A({
+    rootName: c,
+    readOnly: o,
+    position: d,
+    onClose: () => {
+      g();
+    }
+  });
+  const b = () => {
+    if (!s) return;
+    s.show(), r == null || r.setPanelVisible(!0);
+    const u = (f = 10) => {
+      const p = s == null ? void 0 : s.getEditorRoot();
+      if (!p) {
+        f > 0 ? setTimeout(() => u(f - 1), 16) : console.warn("[Legend State DevTools] Could not find #lsdt-json-editor-root after retries");
+        return;
+      }
+      if (a) return;
+      const D = (l == null ? void 0 : l.getSnapshot()) ?? {};
+      a = G(p, {
+        initialData: D,
+        onEdit: (L) => {
+          l == null || l.setData(L);
+        },
+        readOnly: o,
+        theme: i,
+        rootName: c
+      });
+    };
+    u();
+  }, g = () => {
+    a && (a.destroy(), a = null), s == null || s.hide(), r == null || r.setPanelVisible(!1);
+  }, y = () => {
+    s != null && s.isVisible() ? g() : b();
+  };
+  return r = new j({
+    onTogglePanel: y,
+    rootName: c
+  }), r.mount(), h.add(() => r == null ? void 0 : r.unmount()), l = H(n, {
+    onSnapshot: (u) => {
+      a == null || a.updateData(u);
+    }
+  }), h.add(() => l == null ? void 0 : l.destroy()), h.add(() => {
+    a && (a.destroy(), a = null);
+  }), h.add(() => s == null ? void 0 : s.unmount()), {
+    destroy: () => {
+      h.run();
+    }
+  };
+}
+export {
+  et as init
+};
+//# sourceMappingURL=index.mjs.map

package/packages/core/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/ui/templates/toolbar.eta","../src/ui/templates/panel.eta","../src/ui/template-engine.ts","../src/ui/shared-utils.ts","../src/ui/toolbar.ts","../src/ui/panel.ts","../src/state-bridge.ts","../src/ui/json-editor-mount.tsx","../src/index.ts"],"sourcesContent":["<div class=\"lsdt-toolbar-header\">\n  <div class=\"lsdt-toolbar-title\">\n    <span class=\"lsdt-toolbar-indicator\"></span>\n    Legend State\n  </div>\n  <button\n    class=\"lsdt-toggle-btn <%= it.panelVisible ? 'active' : '' %>\"\n    data-action=\"toggle-panel\"\n    title=\"<%= it.panelVisible ? 'Hide panel' : 'Show panel' %>\"\n  >\n    <%= it.panelVisible ? 'Hide' : 'Show' %> <%= it.rootName %>\n  </button>\n</div>\n","<div class=\"lsdt-panel-header\">\n  <h3><%= it.rootName %></h3>\n  <div class=\"lsdt-panel-actions\">\n    <% if (it.readOnly) { %>\n      <span class=\"lsdt-readonly-badge\">Read-only</span>\n    <% } %>\n    <button class=\"lsdt-close-btn\" data-action=\"close-panel\" title=\"Close\">&times;</button>\n  </div>\n</div>\n<div class=\"lsdt-panel-content\">\n  <div id=\"lsdt-json-editor-root\"></div>\n</div>\n","/**\n * Eta template engine wrapper for Legend State Dev Tools\n */\nimport { Eta } from 'eta';\n\nimport toolbarTemplate from './templates/toolbar.eta';\nimport panelTemplate from './templates/panel.eta';\n\nconst eta = new Eta({\n  autoEscape: true,\n  autoTrim: false,\n});\n\nconst templates: Record<string, string> = {\n  toolbar: toolbarTemplate,\n  panel: panelTemplate,\n};\n\nexport function renderTemplate<T extends Record<string, unknown>>(\n  name: string,\n  data: T\n): string {\n  const template = templates[name];\n  if (!template) {\n    console.error(`[LSDT] Template not found: ${name}`);\n    return '';\n  }\n  try {\n    return eta.renderString(template, data);\n  } catch (error) {\n    console.error(`[LSDT] Error rendering template ${name}:`, error);\n    return '';\n  }\n}\n\nexport interface ToolbarData {\n  [key: string]: unknown;\n  isMinimized: boolean;\n  panelVisible: boolean;\n  rootName: string;\n}\n\nexport function renderToolbar(data: ToolbarData): string {\n  return renderTemplate('toolbar', data);\n}\n\nexport interface PanelData {\n  [key: string]: unknown;\n  rootName: string;\n  readOnly: boolean;\n}\n\nexport function renderPanel(data: PanelData): string {\n  return renderTemplate('panel', data);\n}\n","/**\n * Shared UI utilities for Legend State Dev Tools\n */\n\nconst STORAGE_PREFIX = 'lsdt';\n\nexport function escapeHtml(str: string): string {\n  const div = document.createElement('div');\n  div.textContent = str;\n  return div.innerHTML;\n}\n\nexport function getStoredBoolean(key: string, defaultValue: boolean): boolean {\n  const stored = localStorage.getItem(`${STORAGE_PREFIX}-${key}`);\n  if (stored === null) return defaultValue;\n  return stored === 'true';\n}\n\nexport function setStoredBoolean(key: string, value: boolean): void {\n  localStorage.setItem(`${STORAGE_PREFIX}-${key}`, String(value));\n}\n\nexport function getStoredString(key: string, defaultValue: string): string {\n  return localStorage.getItem(`${STORAGE_PREFIX}-${key}`) || defaultValue;\n}\n\nexport function setStoredString(key: string, value: string): void {\n  localStorage.setItem(`${STORAGE_PREFIX}-${key}`, value);\n}\n\nexport function createCleanup(): {\n  add: (fn: () => void) => void;\n  run: () => void;\n} {\n  const cleanupFns: (() => void)[] = [];\n  return {\n    add: (fn: () => void) => cleanupFns.push(fn),\n    run: () => {\n      cleanupFns.forEach((fn) => {\n        try {\n          fn();\n        } catch (e) {\n          console.error('[Legend State DevTools] Cleanup error:', e);\n        }\n      });\n      cleanupFns.length = 0;\n    },\n  };\n}\n","import { renderToolbar, type ToolbarData } from './template-engine';\nimport { getStoredBoolean, setStoredBoolean } from './shared-utils';\n\nexport class Toolbar {\n  private container: HTMLElement | null = null;\n  private isDragging = false;\n  private offsetX = 0;\n  private offsetY = 0;\n  private isMinimized: boolean = getStoredBoolean('toolbar-minimized', false);\n  private panelVisible = false;\n\n  private onTogglePanel?: () => void;\n  private rootName: string;\n\n  constructor(options: { onTogglePanel?: () => void; rootName?: string } = {}) {\n    this.onTogglePanel = options.onTogglePanel;\n    this.rootName = options.rootName || 'state$';\n  }\n\n  public mount(): void {\n    if (this.container) return;\n\n    this.container = document.createElement('div');\n    this.container.id = 'lsdt-toolbar';\n    if (this.isMinimized) {\n      this.container.classList.add('lsdt-toolbar-minimized');\n    }\n\n    document.body.appendChild(this.container);\n    this.render();\n    this.attachEventListeners();\n  }\n\n  private render(): void {\n    if (!this.container) return;\n\n    const data: ToolbarData = {\n      isMinimized: this.isMinimized,\n      panelVisible: this.panelVisible,\n      rootName: this.rootName,\n    };\n\n    this.container.innerHTML = renderToolbar(data);\n  }\n\n  private attachEventListeners(): void {\n    if (!this.container) return;\n\n    this.container.addEventListener('click', this.handleClick);\n    this.container.addEventListener('mousedown', this.handleMouseDown);\n    document.addEventListener('mousemove', this.handleMouseMove);\n    document.addEventListener('mouseup', this.handleMouseUp);\n  }\n\n  private handleClick = (e: Event): void => {\n    const target = e.target as HTMLElement;\n    const actionElement = target.closest('[data-action]');\n    if (!actionElement) return;\n\n    const action = actionElement.getAttribute('data-action');\n    if (action === 'toggle-panel') {\n      this.onTogglePanel?.();\n    }\n  };\n\n  private handleMouseDown = (e: MouseEvent): void => {\n    const target = e.target as HTMLElement;\n    if (target.tagName === 'BUTTON') return;\n\n    this.isDragging = true;\n    if (this.container) {\n      this.container.classList.add('dragging');\n      const rect = this.container.getBoundingClientRect();\n      this.offsetX = e.clientX - rect.left;\n      this.offsetY = e.clientY - rect.top;\n    }\n  };\n\n  private handleMouseMove = (e: MouseEvent): void => {\n    if (!this.isDragging || !this.container) return;\n\n    this.container.style.left = `${e.clientX - this.offsetX}px`;\n    this.container.style.top = `${e.clientY - this.offsetY}px`;\n    this.container.style.right = 'auto';\n    this.container.style.bottom = 'auto';\n  };\n\n  private handleMouseUp = (): void => {\n    this.isDragging = false;\n    this.container?.classList.remove('dragging');\n  };\n\n  public setPanelVisible(visible: boolean): void {\n    this.panelVisible = visible;\n    this.render();\n  }\n\n  public unmount(): void {\n    if (this.container) {\n      this.container.removeEventListener('click', this.handleClick);\n      this.container.removeEventListener('mousedown', this.handleMouseDown);\n      this.container.remove();\n      this.container = null;\n    }\n    document.removeEventListener('mousemove', this.handleMouseMove);\n    document.removeEventListener('mouseup', this.handleMouseUp);\n  }\n}\n","import { renderPanel, type PanelData } from './template-engine';\n\nexport class Panel {\n  private container: HTMLElement | null = null;\n  private visible = false;\n  private rootName: string;\n  private readOnly: boolean;\n  private onClose?: () => void;\n  private position: 'left' | 'right';\n\n  constructor(options: {\n    rootName?: string;\n    readOnly?: boolean;\n    onClose?: () => void;\n    position?: 'left' | 'right';\n  } = {}) {\n    this.rootName = options.rootName || 'state$';\n    this.readOnly = options.readOnly || false;\n    this.onClose = options.onClose;\n    this.position = options.position || 'right';\n  }\n\n  public toggle(): void {\n    if (this.visible) {\n      this.hide();\n    } else {\n      this.show();\n    }\n  }\n\n  public show(): void {\n    this.visible = true;\n\n    if (!this.container) {\n      this.container = document.createElement('div');\n      this.container.id = 'lsdt-panel';\n      if (this.position === 'left') {\n        this.container.classList.add('lsdt-panel-left');\n      }\n      document.body.appendChild(this.container);\n      this.attachEventListeners();\n    }\n\n    this.render();\n  }\n\n  public hide(): void {\n    this.visible = false;\n    this.container?.remove();\n    this.container = null;\n  }\n\n  public isVisible(): boolean {\n    return this.visible;\n  }\n\n  public getEditorRoot(): HTMLElement | null {\n    return this.container?.querySelector('#lsdt-json-editor-root') || null;\n  }\n\n  private render(): void {\n    if (!this.container) return;\n\n    const data: PanelData = {\n      rootName: this.rootName,\n      readOnly: this.readOnly,\n    };\n\n    this.container.innerHTML = renderPanel(data);\n  }\n\n  private attachEventListeners(): void {\n    if (!this.container) return;\n    this.container.addEventListener('click', this.handleClick);\n  }\n\n  private handleClick = (e: Event): void => {\n    const target = e.target as HTMLElement;\n    const actionElement = target.closest('[data-action]');\n    if (!actionElement) return;\n\n    const action = actionElement.getAttribute('data-action');\n    if (action === 'close-panel') {\n      this.onClose?.();\n    }\n  };\n\n  public unmount(): void {\n    if (this.container) {\n      this.container.removeEventListener('click', this.handleClick);\n      this.container.remove();\n      this.container = null;\n    }\n    this.visible = false;\n  }\n}\n","import type { ObservableParam } from '@legendapp/state';\n\nexport interface StateBridgeOptions {\n  onSnapshot: (snapshot: unknown) => void;\n}\n\nexport interface StateBridge {\n  getSnapshot: () => unknown;\n  setData: (newData: unknown) => void;\n  destroy: () => void;\n}\n\nexport function createStateBridge(\n  observable$: ObservableParam<any>,\n  options: StateBridgeOptions\n): StateBridge {\n  // Get initial snapshot\n  const getSnapshot = () => {\n    try {\n      return JSON.parse(JSON.stringify((observable$ as any).peek()));\n    } catch {\n      return undefined;\n    }\n  };\n\n  // Subscribe to changes using onChange\n  let dispose: (() => void) | null = null;\n  try {\n    dispose = (observable$ as any).onChange(\n      () => {\n        const snapshot = getSnapshot();\n        options.onSnapshot(snapshot);\n      },\n      { trackingType: false }\n    );\n  } catch {\n    console.warn('[Legend State DevTools] Could not subscribe to observable changes via onChange');\n  }\n\n  return {\n    getSnapshot,\n    setData: (newData: unknown) => {\n      try {\n        (observable$ as any).set(newData);\n      } catch (e) {\n        console.error('[Legend State DevTools] Failed to set data:', e);\n      }\n    },\n    destroy: () => {\n      if (dispose) {\n        dispose();\n        dispose = null;\n      }\n    },\n  };\n}\n","import React, { Component, useEffect, useState, type ErrorInfo, type ReactNode } from 'react';\nimport { createRoot, type Root } from 'react-dom/client';\nimport { JsonEditor, githubDarkTheme, githubLightTheme, monoDarkTheme, monoLightTheme } from 'json-edit-react';\n\nconst themeMap: Record<string, object> = {\n  githubDark: githubDarkTheme,\n  githubLight: githubLightTheme,\n  monoDark: monoDarkTheme,\n  monoLight: monoLightTheme,\n};\n\nclass ErrorBoundary extends Component<\n  { children: ReactNode },\n  { error: Error | null }\n> {\n  state = { error: null as Error | null };\n  static getDerivedStateFromError(error: Error) {\n    return { error };\n  }\n  componentDidCatch(error: Error, info: ErrorInfo) {\n    console.error('[Legend State DevTools] React error:', error, info);\n  }\n  render() {\n    if (this.state.error) {\n      return React.createElement(\n        'pre',\n        { style: { color: '#ff6b6b', padding: 16, fontSize: 12 } },\n        `DevTools Error: ${this.state.error.message}\\n${this.state.error.stack}`\n      );\n    }\n    return this.props.children;\n  }\n}\n\ninterface JsonEditorWrapperProps {\n  data: unknown;\n  onEdit: (newData: unknown) => void;\n  readOnly: boolean;\n  theme: string;\n  rootName: string;\n}\n\nfunction JsonEditorWrapper({\n  data,\n  onEdit,\n  readOnly,\n  theme,\n  rootName,\n}: JsonEditorWrapperProps) {\n  const resolvedTheme = themeMap[theme] ?? githubDarkTheme;\n  return (\n    <JsonEditor\n      data={data as Record<string, unknown>}\n      setData={onEdit as any}\n      rootName={rootName}\n      theme={resolvedTheme as any}\n      collapse={2}\n      restrictEdit={readOnly}\n      restrictDelete={readOnly}\n      restrictAdd={readOnly}\n      restrictTypeSelection={readOnly ? true : undefined}\n    />\n  );\n}\n\nexport interface JsonEditorBridge {\n  updateData: (data: unknown) => void;\n  destroy: () => void;\n}\n\n// Wrapper component that receives data via a callback registration\nfunction JsonEditorBridgeWrapper(props: {\n  initialData: unknown;\n  onEdit: (newData: unknown) => void;\n  readOnly: boolean;\n  theme: string;\n  rootName: string;\n  registerUpdater: (updater: (data: unknown) => void) => void;\n}) {\n  const [data, setData] = useState<unknown>(props.initialData);\n\n  useEffect(() => {\n    props.registerUpdater((newData: unknown) => {\n      setData(newData);\n    });\n  }, []);\n\n  const handleEdit = (newData: unknown) => {\n    setData(newData);\n    props.onEdit(newData);\n  };\n\n  return (\n    <JsonEditorWrapper\n      data={data}\n      onEdit={handleEdit}\n      readOnly={props.readOnly}\n      theme={props.theme}\n      rootName={props.rootName}\n    />\n  );\n}\n\nexport function mountJsonEditor(\n  container: HTMLElement,\n  options: {\n    initialData: unknown;\n    onEdit: (newData: unknown) => void;\n    readOnly: boolean;\n    theme: string;\n    rootName: string;\n  }\n): JsonEditorBridge {\n  let root: Root | null = null;\n  let updaterFn: ((data: unknown) => void) | null = null;\n\n  root = createRoot(container);\n  root.render(\n    <ErrorBoundary>\n    <JsonEditorBridgeWrapper\n      initialData={options.initialData}\n      onEdit={options.onEdit}\n      readOnly={options.readOnly}\n      theme={options.theme}\n      rootName={options.rootName}\n      registerUpdater={(updater) => {\n        updaterFn = updater;\n      }}\n    />\n    </ErrorBoundary>\n  );\n\n  return {\n    updateData: (data: unknown) => {\n      updaterFn?.(data);\n    },\n    destroy: () => {\n      if (root) {\n        root.unmount();\n        root = null;\n      }\n    },\n  };\n}\n","import type { ObservableParam } from '@legendapp/state';\nimport { Toolbar } from './ui/toolbar';\nimport { Panel } from './ui/panel';\nimport { createStateBridge, type StateBridge } from './state-bridge';\nimport { mountJsonEditor, type JsonEditorBridge } from './ui/json-editor-mount';\nimport { createCleanup } from './ui/shared-utils';\n\nexport interface DevToolsOptions {\n  enabled?: boolean;\n  readOnly?: boolean;\n  theme?: string;\n  rootName?: string;\n  position?: 'left' | 'right';\n}\n\nexport interface DevTools {\n  destroy: () => void;\n}\n\nexport function init(\n  observable$: ObservableParam<any>,\n  options: DevToolsOptions = {}\n): DevTools {\n  const {\n    enabled = true,\n    readOnly = false,\n    theme = 'githubDark',\n    rootName = 'state$',\n    position = 'right',\n  } = options;\n\n  if (!enabled) {\n    return { destroy: () => {} };\n  }\n\n  const cleanup = createCleanup();\n  let panel: Panel | null = null;\n  let toolbar: Toolbar | null = null;\n  let bridge: StateBridge | null = null;\n  let editorBridge: JsonEditorBridge | null = null;\n\n  // Create panel\n  panel = new Panel({\n    rootName,\n    readOnly,\n    position,\n    onClose: () => {\n      hidePanel();\n    },\n  });\n\n  const showPanel = () => {\n    if (!panel) return;\n    panel.show();\n    toolbar?.setPanelVisible(true);\n\n    // Poll for editor root element (innerHTML may not be ready immediately)\n    const tryMount = (retries = 10) => {\n      const editorRoot = panel?.getEditorRoot();\n      if (!editorRoot) {\n        if (retries > 0) {\n          setTimeout(() => tryMount(retries - 1), 16);\n        } else {\n          console.warn('[Legend State DevTools] Could not find #lsdt-json-editor-root after retries');\n        }\n        return;\n      }\n      if (editorBridge) return;\n\n      const initialData = bridge?.getSnapshot() ?? {};\n\n      editorBridge = mountJsonEditor(editorRoot, {\n        initialData,\n        onEdit: (newData: unknown) => {\n          bridge?.setData(newData);\n        },\n        readOnly,\n        theme,\n        rootName,\n      });\n    };\n    tryMount();\n  };\n\n  const hidePanel = () => {\n    if (editorBridge) {\n      editorBridge.destroy();\n      editorBridge = null;\n    }\n    panel?.hide();\n    toolbar?.setPanelVisible(false);\n  };\n\n  const togglePanel = () => {\n    if (panel?.isVisible()) {\n      hidePanel();\n    } else {\n      showPanel();\n    }\n  };\n\n  // Create toolbar\n  toolbar = new Toolbar({\n    onTogglePanel: togglePanel,\n    rootName,\n  });\n  toolbar.mount();\n  cleanup.add(() => toolbar?.unmount());\n\n  // Create state bridge\n  bridge = createStateBridge(observable$, {\n    onSnapshot: (snapshot) => {\n      editorBridge?.updateData(snapshot);\n    },\n  });\n  cleanup.add(() => bridge?.destroy());\n  cleanup.add(() => {\n    if (editorBridge) {\n      editorBridge.destroy();\n      editorBridge = null;\n    }\n  });\n  cleanup.add(() => panel?.unmount());\n\n  return {\n    destroy: () => {\n      cleanup.run();\n    },\n  };\n}\n"],"names":["toolbarTemplate","panelTemplate","eta","Eta","templates","renderTemplate","name","data","template","error","renderToolbar","renderPanel","STORAGE_PREFIX","getStoredBoolean","key","defaultValue","stored","createCleanup","cleanupFns","fn","Toolbar","options","actionElement","_a","rect","visible","Panel","createStateBridge","observable$","getSnapshot","dispose","snapshot","newData","e","themeMap","githubDarkTheme","githubLightTheme","monoDarkTheme","monoLightTheme","ErrorBoundary","Component","info","React","JsonEditorWrapper","onEdit","readOnly","theme","rootName","resolvedTheme","jsx","JsonEditor","JsonEditorBridgeWrapper","props","setData","useState","useEffect","mountJsonEditor","container","root","updaterFn","createRoot","updater","init","enabled","position","cleanup","panel","toolbar","bridge","editorBridge","hidePanel","showPanel","tryMount","retries","editorRoot","initialData","togglePanel"],"mappings":"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"}

package/examples/basic/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Legend State Dev Tools - Example</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/examples/basic/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "legend-state-dev-tools-example",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build"
-  },
-  "dependencies": {
-    "@legendapp/state": "^3.0.0-beta.43",
-    "react": "^18.3.0",
-    "react-dom": "^18.3.0",
-    "json-edit-react": "^1.16.0",
-    "legend-state-dev-tools": "*"
-  },
-  "devDependencies": {
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "typescript": "^5.3.0",
-    "vite": "^6.0.0"
-  }
-}

package/examples/basic/src/App.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { observer } from '@legendapp/state/react';
-import { state$ } from './state';
-
-export const App = observer(function App() {
-  // In Legend State v3, use .get() to subscribe to values
-  const count = (state$.count as any).get();
-  const userName = (state$.user.name as any).get();
-
-  return (
-    <div style={{ padding: 40, fontFamily: 'sans-serif', maxWidth: 600 }}>
-      <h1>Legend State Dev Tools Demo</h1>
-      <p>Open the dev tools panel using the floating button at the bottom-right.</p>
-
-      <div style={{ marginTop: 24, padding: 16, background: '#f5f5f5', borderRadius: 8, color: '#1a1a1a' }}>
-        <h2>Counter: {count}</h2>
-        <button onClick={() => (state$.count as any).set((c: number) => c + 1)}>
-          Increment
-        </button>
-        <button onClick={() => (state$.count as any).set(0)} style={{ marginLeft: 8 }}>
-          Reset
-        </button>
-      </div>
-
-      <div style={{ marginTop: 24, padding: 16, background: '#f5f5f5', borderRadius: 8, color: '#1a1a1a' }}>
-        <h2>User: {userName}</h2>
-        <input
-          value={userName}
-          onChange={(e) => (state$.user.name as any).set(e.target.value)}
-          style={{ padding: '4px 8px', fontSize: 14 }}
-        />
-      </div>
-
-      <div style={{ marginTop: 24, padding: 16, background: '#f5f5f5', borderRadius: 8, color: '#1a1a1a' }}>
-        <h2>Todos</h2>
-        <button
-          onClick={() =>
-            (state$.todos as any).push({
-              id: Date.now(),
-              text: `New todo ${Date.now()}`,
-              done: false,
-            })
-          }
-        >
-          Add Todo
-        </button>
-      </div>
-    </div>
-  );
-});