legend-state-dev-tools 0.0.1 → 0.0.4

package/packages/core/src/ui/panel.ts

@@ -1,96 +0,0 @@
-import { renderPanel, type PanelData } from './template-engine';
-
-export class Panel {
-  private container: HTMLElement | null = null;
-  private visible = false;
-  private rootName: string;
-  private readOnly: boolean;
-  private onClose?: () => void;
-  private position: 'left' | 'right';
-
-  constructor(options: {
-    rootName?: string;
-    readOnly?: boolean;
-    onClose?: () => void;
-    position?: 'left' | 'right';
-  } = {}) {
-    this.rootName = options.rootName || 'state$';
-    this.readOnly = options.readOnly || false;
-    this.onClose = options.onClose;
-    this.position = options.position || 'right';
-  }
-
-  public toggle(): void {
-    if (this.visible) {
-      this.hide();
-    } else {
-      this.show();
-    }
-  }
-
-  public show(): void {
-    this.visible = true;
-
-    if (!this.container) {
-      this.container = document.createElement('div');
-      this.container.id = 'lsdt-panel';
-      if (this.position === 'left') {
-        this.container.classList.add('lsdt-panel-left');
-      }
-      document.body.appendChild(this.container);
-      this.attachEventListeners();
-    }
-
-    this.render();
-  }
-
-  public hide(): void {
-    this.visible = false;
-    this.container?.remove();
-    this.container = null;
-  }
-
-  public isVisible(): boolean {
-    return this.visible;
-  }
-
-  public getEditorRoot(): HTMLElement | null {
-    return this.container?.querySelector('#lsdt-json-editor-root') || null;
-  }
-
-  private render(): void {
-    if (!this.container) return;
-
-    const data: PanelData = {
-      rootName: this.rootName,
-      readOnly: this.readOnly,
-    };
-
-    this.container.innerHTML = renderPanel(data);
-  }
-
-  private attachEventListeners(): void {
-    if (!this.container) return;
-    this.container.addEventListener('click', this.handleClick);
-  }
-
-  private handleClick = (e: Event): void => {
-    const target = e.target as HTMLElement;
-    const actionElement = target.closest('[data-action]');
-    if (!actionElement) return;
-
-    const action = actionElement.getAttribute('data-action');
-    if (action === 'close-panel') {
-      this.onClose?.();
-    }
-  };
-
-  public unmount(): void {
-    if (this.container) {
-      this.container.removeEventListener('click', this.handleClick);
-      this.container.remove();
-      this.container = null;
-    }
-    this.visible = false;
-  }
-}

package/packages/core/src/ui/shared-utils.ts

@@ -1,49 +0,0 @@
-/**
- * Shared UI utilities for Legend State Dev Tools
- */
-
-const STORAGE_PREFIX = 'lsdt';
-
-export function escapeHtml(str: string): string {
-  const div = document.createElement('div');
-  div.textContent = str;
-  return div.innerHTML;
-}
-
-export function getStoredBoolean(key: string, defaultValue: boolean): boolean {
-  const stored = localStorage.getItem(`${STORAGE_PREFIX}-${key}`);
-  if (stored === null) return defaultValue;
-  return stored === 'true';
-}
-
-export function setStoredBoolean(key: string, value: boolean): void {
-  localStorage.setItem(`${STORAGE_PREFIX}-${key}`, String(value));
-}
-
-export function getStoredString(key: string, defaultValue: string): string {
-  return localStorage.getItem(`${STORAGE_PREFIX}-${key}`) || defaultValue;
-}
-
-export function setStoredString(key: string, value: string): void {
-  localStorage.setItem(`${STORAGE_PREFIX}-${key}`, value);
-}
-
-export function createCleanup(): {
-  add: (fn: () => void) => void;
-  run: () => void;
-} {
-  const cleanupFns: (() => void)[] = [];
-  return {
-    add: (fn: () => void) => cleanupFns.push(fn),
-    run: () => {
-      cleanupFns.forEach((fn) => {
-        try {
-          fn();
-        } catch (e) {
-          console.error('[Legend State DevTools] Cleanup error:', e);
-        }
-      });
-      cleanupFns.length = 0;
-    },
-  };
-}

package/packages/core/src/ui/template-engine.ts

@@ -1,55 +0,0 @@
-/**
- * Eta template engine wrapper for Legend State Dev Tools
- */
-import { Eta } from 'eta';
-
-import toolbarTemplate from './templates/toolbar.eta';
-import panelTemplate from './templates/panel.eta';
-
-const eta = new Eta({
-  autoEscape: true,
-  autoTrim: false,
-});
-
-const templates: Record<string, string> = {
-  toolbar: toolbarTemplate,
-  panel: panelTemplate,
-};
-
-export function renderTemplate<T extends Record<string, unknown>>(
-  name: string,
-  data: T
-): string {
-  const template = templates[name];
-  if (!template) {
-    console.error(`[LSDT] Template not found: ${name}`);
-    return '';
-  }
-  try {
-    return eta.renderString(template, data);
-  } catch (error) {
-    console.error(`[LSDT] Error rendering template ${name}:`, error);
-    return '';
-  }
-}
-
-export interface ToolbarData {
-  [key: string]: unknown;
-  isMinimized: boolean;
-  panelVisible: boolean;
-  rootName: string;
-}
-
-export function renderToolbar(data: ToolbarData): string {
-  return renderTemplate('toolbar', data);
-}
-
-export interface PanelData {
-  [key: string]: unknown;
-  rootName: string;
-  readOnly: boolean;
-}
-
-export function renderPanel(data: PanelData): string {
-  return renderTemplate('panel', data);
-}

package/packages/core/src/ui/templates/panel.eta

@@ -1,12 +0,0 @@
-<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>

package/packages/core/src/ui/templates/toolbar.eta

@@ -1,13 +0,0 @@
-<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>

package/packages/core/src/ui/toolbar.ts

@@ -1,108 +0,0 @@
-import { renderToolbar, type ToolbarData } from './template-engine';
-import { getStoredBoolean, setStoredBoolean } from './shared-utils';
-
-export class Toolbar {
-  private container: HTMLElement | null = null;
-  private isDragging = false;
-  private offsetX = 0;
-  private offsetY = 0;
-  private isMinimized: boolean = getStoredBoolean('toolbar-minimized', false);
-  private panelVisible = false;
-
-  private onTogglePanel?: () => void;
-  private rootName: string;
-
-  constructor(options: { onTogglePanel?: () => void; rootName?: string } = {}) {
-    this.onTogglePanel = options.onTogglePanel;
-    this.rootName = options.rootName || 'state$';
-  }
-
-  public mount(): void {
-    if (this.container) return;
-
-    this.container = document.createElement('div');
-    this.container.id = 'lsdt-toolbar';
-    if (this.isMinimized) {
-      this.container.classList.add('lsdt-toolbar-minimized');
-    }
-
-    document.body.appendChild(this.container);
-    this.render();
-    this.attachEventListeners();
-  }
-
-  private render(): void {
-    if (!this.container) return;
-
-    const data: ToolbarData = {
-      isMinimized: this.isMinimized,
-      panelVisible: this.panelVisible,
-      rootName: this.rootName,
-    };
-
-    this.container.innerHTML = renderToolbar(data);
-  }
-
-  private attachEventListeners(): void {
-    if (!this.container) return;
-
-    this.container.addEventListener('click', this.handleClick);
-    this.container.addEventListener('mousedown', this.handleMouseDown);
-    document.addEventListener('mousemove', this.handleMouseMove);
-    document.addEventListener('mouseup', this.handleMouseUp);
-  }
-
-  private handleClick = (e: Event): void => {
-    const target = e.target as HTMLElement;
-    const actionElement = target.closest('[data-action]');
-    if (!actionElement) return;
-
-    const action = actionElement.getAttribute('data-action');
-    if (action === 'toggle-panel') {
-      this.onTogglePanel?.();
-    }
-  };
-
-  private handleMouseDown = (e: MouseEvent): void => {
-    const target = e.target as HTMLElement;
-    if (target.tagName === 'BUTTON') return;
-
-    this.isDragging = true;
-    if (this.container) {
-      this.container.classList.add('dragging');
-      const rect = this.container.getBoundingClientRect();
-      this.offsetX = e.clientX - rect.left;
-      this.offsetY = e.clientY - rect.top;
-    }
-  };
-
-  private handleMouseMove = (e: MouseEvent): void => {
-    if (!this.isDragging || !this.container) return;
-
-    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';
-  };
-
-  private handleMouseUp = (): void => {
-    this.isDragging = false;
-    this.container?.classList.remove('dragging');
-  };
-
-  public setPanelVisible(visible: boolean): void {
-    this.panelVisible = visible;
-    this.render();
-  }
-
-  public unmount(): void {
-    if (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);
-  }
-}

package/packages/core/tsconfig.json

@@ -1,9 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./dist",
-    "rootDir": "./src"
-  },
-  "include": ["src/**/*"],
-  "exclude": ["dist/**/*"]
-}

package/packages/core/vite.config.ts

@@ -1,71 +0,0 @@
-import { defineConfig } from 'vite';
-import { resolve } from 'path';
-import { copyFileSync } from 'fs';
-import dts from 'vite-plugin-dts';
-
-export default defineConfig({
-  plugins: [
-    {
-      name: 'eta-raw-loader',
-      transform(code, id) {
-        if (id.endsWith('.eta')) {
-          return {
-            code: `export default ${JSON.stringify(code)};`,
-            map: null,
-          };
-        }
-      },
-    },
-    dts({
-      include: ['src/**/*.ts', 'src/**/*.tsx'],
-      exclude: ['src/**/*.test.ts'],
-      rollupTypes: true,
-      insertTypesEntry: true,
-    }),
-    {
-      name: 'copy-styles',
-      closeBundle() {
-        copyFileSync(
-          resolve(__dirname, 'src/styles.css'),
-          resolve(__dirname, 'dist/styles.css')
-        );
-      },
-    },
-  ],
-  build: {
-    lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
-      name: 'LegendStateDevTools',
-      formats: ['es', 'cjs'],
-      fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.js'),
-    },
-    rollupOptions: {
-      external: [
-        'react',
-        'react-dom',
-        'react-dom/client',
-        'react/jsx-runtime',
-        'eta',
-        'json-edit-react',
-        '@legendapp/state',
-      ],
-      output: {
-        globals: {
-          react: 'React',
-          'react-dom': 'ReactDOM',
-          'react-dom/client': 'ReactDOMClient',
-          eta: 'Eta',
-          'json-edit-react': 'JsonEditReact',
-          '@legendapp/state': 'LegendState',
-        },
-      },
-    },
-    outDir: 'dist',
-    emptyOutDir: true,
-    sourcemap: true,
-    minify: 'esbuild',
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx', '.eta'],
-  },
-});

package/tsconfig.json

@@ -1,17 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "moduleResolution": "bundler",
-    "strict": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "declaration": true,
-    "declarationMap": true,
-    "jsx": "react-jsx"
-  },
-  "exclude": ["examples/**/*", "node_modules/**/*", "**/dist/**/*"]
-}