@safagayret/bemirror 1.0.0

package/public/js/app.js

@@ -0,0 +1,1008 @@
+let state = { projects: [] }
+let activeIds = { project: null, entity: null, endpoint: null }
+let treeSearchQuery = ''
+let editors = {
+  payload: null,
+  params: null,
+  response: null,
+  prodResp: null,
+  headers: null,
+  variables: null,
+}
+let variables = {}
+
+let importBuffer = null
+
+const ICON_PROJ = `<svg class="icon"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg>`
+const ICON_ENT = `<svg class="icon"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>`
+const ARROW = `<svg class="arrow"><path d="M9 5l7 7-7 7"></path></svg>`
+const EXPORT_ICON = `<svg><path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>`
+const TRASH_ICON = `<svg><path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>`
+const PLUS_ICON = `<svg><path d="M12 4v16m8-8H4"></path></svg>`
+const EDIT_ICON = `<svg><path d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>`
+const LINK_ICON = `<svg><path d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>`
+
+document.addEventListener('DOMContentLoaded', async () => {
+  initEditors()
+  bindGlobalEvents()
+  setupTabs()
+  await loadData()
+
+  // Show About modal on first visit
+  if (!localStorage.getItem('bemirror_about_shown')) {
+    document.getElementById('modalAbout').style.display = 'flex'
+    localStorage.setItem('bemirror_about_shown', 'true')
+  }
+})
+
+function initEditors() {
+  const commonAceConfig = {
+    theme: 'ace/theme/tomorrow_night_eighties',
+    mode: 'ace/mode/json',
+    tabSize: 2,
+    useSoftTabs: true,
+    showPrintMargin: false,
+  }
+  editors.payload = ace.edit('editorPayload', commonAceConfig)
+  editors.params = ace.edit('editorParams', commonAceConfig)
+  editors.headers = ace.edit('editorHeaders', commonAceConfig)
+  editors.variables = ace.edit('editorVariables', commonAceConfig)
+  editors.response = ace.edit('editorResponse', commonAceConfig)
+  editors.prodResp = ace.edit('editorProdResponse', commonAceConfig)
+  editors.prodResp.setReadOnly(true)
+
+  // Auto-Prettier Feature (JSON formatting on blur)
+  const formatJSON = (editor) => {
+    try {
+      const val = editor.getValue()
+      if (!val.trim()) return
+      const obj = JSON.parse(val)
+      editor.setValue(JSON.stringify(obj, null, 2), -1)
+    } catch (e) {
+      /* Ignore invalid JSON */
+    }
+  }
+
+  editors.payload.on('blur', () => formatJSON(editors.payload))
+  editors.params.on('blur', () => formatJSON(editors.params))
+  editors.headers.on('blur', () => formatJSON(editors.headers))
+  editors.variables.on('blur', () => formatJSON(editors.variables))
+  editors.response.on('blur', () => formatJSON(editors.response))
+}
+
+function setupTabs() {
+  const btns = document.querySelectorAll('.tab-btn')
+  btns.forEach((btn) => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('.tab-btn').forEach((b) => b.classList.remove('active'))
+      document.querySelectorAll('.tab-pane').forEach((p) => p.classList.remove('active'))
+      btn.classList.add('active')
+      const targetPane = document.getElementById(btn.getAttribute('data-tab'))
+      targetPane.classList.add('active')
+
+      // Fix ACE editor not rendering when container becomes visible
+      if (editors.params) editors.params.resize()
+      if (editors.payload) editors.payload.resize()
+      if (editors.headers) editors.headers.resize()
+    })
+  })
+}
+
+const generateId = () => Math.random().toString(36).substr(2, 9)
+const slugify = (str) => {
+  if (!str) return 'unknown'
+  return str
+    .toString()
+    .replace(/([a-z])([A-Z])/g, '$1-$2') // CamelCase / PascalCase to kebab-case
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '')
+    .replace(/[\s_-]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+function matchesTreeSearch(text) {
+  if (!treeSearchQuery) return true
+  return text.toString().toLowerCase().includes(treeSearchQuery)
+}
+
+function getFilteredProjects() {
+  if (!treeSearchQuery) return state.projects
+  return state.projects
+    .map((proj) => {
+      const projectMatches = matchesTreeSearch(proj.name)
+      const entities = (proj.entities || [])
+        .map((ent) => {
+          const entityMatches = matchesTreeSearch(ent.name)
+          const endpoints = (ent.endpoints || []).filter((ep) => {
+            return matchesTreeSearch(ep.path) || matchesTreeSearch(ep.method || '')
+          })
+          if (entityMatches) {
+            return {
+              ...ent,
+              endpoints: ent.endpoints || [],
+            }
+          }
+          if (endpoints.length) {
+            return {
+              ...ent,
+              endpoints,
+            }
+          }
+          return null
+        })
+        .filter(Boolean)
+
+      if (projectMatches) {
+        return {
+          ...proj,
+          entities: proj.entities || [],
+        }
+      }
+      if (entities.length) {
+        return {
+          ...proj,
+          entities,
+        }
+      }
+      return null
+    })
+    .filter(Boolean)
+}
+
+function getDemoProject() {
+  return {
+    projects: [
+      {
+        id: 'p-demo123',
+        name: 'Demo Project',
+        baseUrl: 'https://api.democorp.local',
+        entities: [
+          {
+            id: 'e-users',
+            name: 'Users',
+            endpoints: [
+              {
+                id: 'ep-u1',
+                method: 'GET',
+                path: '/profile',
+                statusCode: 200,
+                delay: 150,
+                expectedParams: '',
+                expectedPayload: '',
+                responseBody: JSON.stringify(
+                  { id: 1, name: 'John Doe', role: 'admin', status: 'active' },
+                  null,
+                  2,
+                ),
+              },
+              {
+                id: 'ep-u2',
+                method: 'POST',
+                path: '/create',
+                statusCode: 201,
+                delay: 300,
+                expectedParams: '',
+                expectedPayload: JSON.stringify(
+                  { name: 'Jane', email: 'jane@example.com' },
+                  null,
+                  2,
+                ),
+                responseBody: JSON.stringify(
+                  { success: true, userId: 2, message: 'User created' },
+                  null,
+                  2,
+                ),
+              },
+              {
+                id: 'ep-u3',
+                method: 'DELETE',
+                path: '/1',
+                statusCode: 204,
+                delay: 100,
+                expectedParams: '',
+                expectedPayload: '',
+                responseBody: '',
+              },
+            ],
+          },
+          {
+            id: 'e-posts',
+            name: 'Posts',
+            endpoints: [
+              {
+                id: 'ep-p1',
+                method: 'GET',
+                path: '/all',
+                statusCode: 200,
+                delay: 400,
+                expectedParams: JSON.stringify({ page: '1' }, null, 2),
+                expectedPayload: '',
+                responseBody: JSON.stringify(
+                  {
+                    data: [
+                      { id: 101, title: 'Hello World' },
+                      { id: 102, title: 'Mocking APIs' },
+                    ],
+                    total: 2,
+                  },
+                  null,
+                  2,
+                ),
+              },
+              {
+                id: 'ep-p2',
+                method: 'PATCH',
+                path: '/101',
+                statusCode: 200,
+                delay: 200,
+                expectedParams: '',
+                expectedPayload: JSON.stringify({ title: 'Updated Title' }, null, 2),
+                responseBody: JSON.stringify(
+                  { id: 101, title: 'Updated Title', updatedAt: '2024-01-01T12:00:00Z' },
+                  null,
+                  2,
+                ),
+              },
+            ],
+          },
+          {
+            id: 'e-prods',
+            name: 'Products',
+            endpoints: [
+              {
+                id: 'ep-pr1',
+                method: 'GET',
+                path: '/search',
+                statusCode: 200,
+                delay: 350,
+                expectedParams: JSON.stringify({ q: 'laptop' }, null, 2),
+                expectedPayload: '',
+                responseBody: JSON.stringify(
+                  { results: [{ id: 'p-45', name: 'Pro Laptop', price: 1299.99 }] },
+                  null,
+                  2,
+                ),
+              },
+              {
+                id: 'ep-pr2',
+                method: 'GET',
+                path: '/p-45',
+                statusCode: 200,
+                delay: 100,
+                expectedParams: '',
+                expectedPayload: '',
+                responseBody: JSON.stringify(
+                  {
+                    id: 'p-45',
+                    name: 'Pro Laptop',
+                    description: '16GB RAM, 512GB SSD',
+                    inStock: true,
+                  },
+                  null,
+                  2,
+                ),
+              },
+            ],
+          },
+          {
+            id: 'e-orders',
+            name: 'Orders',
+            endpoints: [
+              {
+                id: 'ep-o1',
+                method: 'POST',
+                path: '/checkout',
+                statusCode: 200,
+                delay: 600,
+                expectedParams: '',
+                expectedPayload: JSON.stringify({ productId: 'p-45', qty: 1 }, null, 2),
+                responseBody: JSON.stringify(
+                  { orderId: 'ORD-99812', status: 'processing', estimatedDelivery: '3 days' },
+                  null,
+                  2,
+                ),
+              },
+              {
+                id: 'ep-o2',
+                method: 'GET',
+                path: '/ORD-99812/status',
+                statusCode: 200,
+                delay: 150,
+                expectedParams: '',
+                expectedPayload: '',
+                responseBody: JSON.stringify(
+                  { orderId: 'ORD-99812', status: 'shipped', tracking: 'UPS-12345' },
+                  null,
+                  2,
+                ),
+              },
+            ],
+          },
+          {
+            id: 'e-settings',
+            name: 'Settings',
+            endpoints: [
+              {
+                id: 'ep-s1',
+                method: 'GET',
+                path: '/preferences',
+                statusCode: 200,
+                delay: 50,
+                expectedParams: '',
+                expectedPayload: '',
+                responseBody: JSON.stringify(
+                  { theme: 'dark', notifications: true, language: 'en' },
+                  null,
+                  2,
+                ),
+              },
+              {
+                id: 'ep-s2',
+                method: 'PUT',
+                path: '/preferences',
+                statusCode: 200,
+                delay: 250,
+                expectedParams: '',
+                expectedPayload: JSON.stringify({ theme: 'light' }, null, 2),
+                responseBody: JSON.stringify(
+                  { theme: 'light', notifications: true, language: 'en', updated: true },
+                  null,
+                  2,
+                ),
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  }
+}
+
+function startOnboarding() {
+  if (window.driver) {
+    const driverObj = window.driver.js.driver({
+      showProgress: true,
+      steps: [
+        {
+          element: '#btnNewProject',
+          popover: {
+            title: 'Create a Project',
+            description: 'Start by creating your first mock API project here.',
+            side: 'right',
+            align: 'start',
+          },
+        },
+        {
+          element: '.sidebar',
+          popover: {
+            title: 'Organize APIs',
+            description:
+              'Your projects, entities, and endpoints will appear in this tree structure.',
+            side: 'right',
+            align: 'start',
+          },
+        },
+        {
+          element: '.sidebar-actions',
+          popover: {
+            title: 'Import & Export',
+            description: 'Share your mock data with teammates easily using these global actions.',
+            side: 'bottom',
+            align: 'start',
+          },
+        },
+        {
+          element: '#btnVariables',
+          popover: {
+            title: 'Manage Variables',
+            description:
+              'Define global variables like base URLs or credentials for use in your endpoints.',
+            side: 'bottom',
+            align: 'start',
+          },
+        },
+      ],
+      onDestroyStarted: () => {
+        if (!driverObj.hasNextStep() || confirm('Are you sure you want to skip the tour?')) {
+          localStorage.setItem('bemirror_tour_done', 'true')
+          driverObj.destroy()
+        }
+      },
+    })
+    driverObj.drive()
+  }
+}
+
+async function loadData() {
+  try {
+    const response = await fetch('/api/data')
+    const serverData = await response.json()
+    state = serverData && serverData.projects ? serverData : { projects: [] }
+
+    // Load variables
+    const varsResponse = await fetch('/api/variables')
+    variables = await varsResponse.json()
+
+    renderTree()
+    updateMainPanel()
+  } catch (e) {
+    document.getElementById('projectTree').innerHTML =
+      `<div class="loading-state text-danger">Data Load Error</div>`
+  }
+}
+
+async function syncData() {
+  try {
+    await fetch('/api/data', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(state),
+    })
+  } catch (e) {
+    console.error('Failed to sync', e)
+  }
+}
+
+async function syncVariables() {
+  try {
+    await fetch('/api/variables', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(variables),
+    })
+  } catch (e) {
+    console.error('Failed to sync variables', e)
+  }
+}
+
+function triggerDownload(dataObj, filename) {
+  const dataStr =
+    'data:text/json;charset=utf-8,' + encodeURIComponent(JSON.stringify(dataObj, null, 2))
+  const a = document.createElement('a')
+  a.href = dataStr
+  a.download = filename
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+
+window.exportSpecificNode = (type, projId, entId) => {
+  const p = JSON.parse(JSON.stringify(state.projects.find((x) => x.id === projId)))
+  if (!p) return
+  if (type === 'project') {
+    triggerDownload({ projects: [p] }, `bemirror_project_${slugify(p.name)}.json`)
+  } else if (type === 'entity') {
+    const e = p.entities.find((x) => x.id === entId)
+    if (!e) return
+    p.entities = [e]
+    triggerDownload({ projects: [p] }, `bemirror_${slugify(p.name)}_${slugify(e.name)}.json`)
+  }
+}
+
+window.renameNode = async (type, projId, entId) => {
+  const p = state.projects.find((x) => x.id === projId)
+  if (type === 'project') {
+    const newName = prompt(`Rename Project '${p.name}':`, p.name)
+    if (newName && newName.trim() !== p.name) {
+      p.name = newName.trim()
+      await syncData()
+      renderTree()
+    }
+  } else if (type === 'entity') {
+    const e = p.entities.find((x) => x.id === entId)
+    if (!e) return
+    const newName = prompt(`Rename Entity '${e.name}':`, e.name)
+    if (newName && newName.trim() !== e.name) {
+      e.name = newName.trim()
+      await syncData()
+      renderTree()
+    }
+  }
+}
+
+window.setBaseUrl = async (projId) => {
+  const p = state.projects.find((x) => x.id === projId)
+  const newUrl = prompt(
+    `Set Prod Base URL for Project '${p.name}'\nExample: https://api.production.com\nLeave empty to clear:`,
+    p.baseUrl || '',
+  )
+  if (newUrl !== null) {
+    p.baseUrl = newUrl.trim()
+    await syncData()
+    if (activeIds.project === projId) openEndpointEditor() // Refresh UI if active
+  }
+}
+
+function renderTree() {
+  const treeContainer = document.getElementById('projectTree')
+  if (state.projects.length === 0) {
+    treeContainer.innerHTML = `<div class="loading-state">No projects yet.<br>Click the + icon to start.</div>`
+    return
+  }
+
+  const visibleProjects = getFilteredProjects()
+  if (visibleProjects.length === 0) {
+    treeContainer.innerHTML = `<div class="loading-state">No matching projects, entities, or endpoints.</div>`
+    return
+  }
+
+  let html = ''
+  visibleProjects.forEach((proj) => {
+    html += `
+    <div class="tree-node expanded" data-type="project" data-id="${proj.id}">
+      <div class="tree-row">
+        ${ARROW} ${ICON_PROJ} <span class="tree-label">${proj.name}</span>
+        <div class="tree-actions">
+           <button class="btn-icon" title="Edit Base URL" onclick="event.stopPropagation(); setBaseUrl('${proj.id}')">${LINK_ICON}</button>
+           <button class="btn-icon" title="Rename Project" onclick="event.stopPropagation(); renameNode('project', '${proj.id}')">${EDIT_ICON}</button>
+           <button class="btn-icon" title="Export Project" onclick="event.stopPropagation(); exportSpecificNode('project', '${proj.id}')">${EXPORT_ICON}</button>
+           <button class="btn-icon" title="Add Entity" onclick="event.stopPropagation(); addEntity('${proj.id}')">${PLUS_ICON}</button>
+           <button class="btn-icon text-danger" title="Delete Project" onclick="event.stopPropagation(); deleteNode('project', '${proj.id}')">${TRASH_ICON}</button>
+        </div>
+      </div>
+      <div class="tree-children">
+    `
+    ;(proj.entities || []).forEach((ent) => {
+      html += `
+        <div class="tree-node expanded" data-type="entity" data-id="${ent.id}">
+          <div class="tree-row">
+            ${ARROW} ${ICON_ENT} <span class="tree-label">${ent.name}</span>
+            <div class="tree-actions">
+               <button class="btn-icon" title="Rename Entity" onclick="event.stopPropagation(); renameNode('entity', '${proj.id}', '${ent.id}')">${EDIT_ICON}</button>
+               <button class="btn-icon" title="Export Entity" onclick="event.stopPropagation(); exportSpecificNode('entity', '${proj.id}', '${ent.id}')">${EXPORT_ICON}</button>
+               <button class="btn-icon" title="Add Endpoint" onclick="event.stopPropagation(); addEndpoint('${proj.id}', '${ent.id}')">${PLUS_ICON}</button>
+               <button class="btn-icon text-danger" title="Delete Entity" onclick="event.stopPropagation(); deleteNode('entity', '${proj.id}', '${ent.id}')">${TRASH_ICON}</button>
+            </div>
+          </div>
+          <div class="tree-children">
+      `
+      ;(ent.endpoints || []).forEach((ep) => {
+        const isActive = activeIds.endpoint === ep.id ? 'active' : ''
+        html += `
+            <div class="tree-node" data-type="endpoint">
+              <div class="tree-row ${isActive}" onclick="event.stopPropagation(); selectEndpoint('${proj.id}', '${ent.id}', '${ep.id}')">
+                <span class="no-arrow"></span>
+                <span class="method-badge ${ep.method.toLowerCase()}">${ep.method}</span>
+                <span class="tree-label">${ep.path}</span>
+              </div>
+            </div>
+        `
+      })
+      html += `</div></div>`
+    })
+    html += `</div></div>`
+  })
+  treeContainer.innerHTML = html
+
+  document.querySelectorAll('.tree-row').forEach((row) => {
+    row.addEventListener('click', function () {
+      const node = this.closest('.tree-node')
+      if (node.dataset.type !== 'endpoint') node.classList.toggle('expanded')
+    })
+  })
+}
+
+function updateMainPanel() {
+  const ws = document.getElementById('welcomeScreen')
+  const es = document.getElementById('editorScreen')
+  if (!activeIds.endpoint) {
+    ws.style.display = 'flex'
+    es.style.display = 'none'
+  } else {
+    ws.style.display = 'none'
+    es.style.display = 'flex'
+    openEndpointEditor()
+  }
+}
+
+// CRUD
+window.addEntity = async (projectId) => {
+  const name = prompt('Enter Entity Name (e.g. Settings):')
+  if (!name) return
+  const proj = state.projects.find((p) => p.id === projectId)
+  if (!proj.entities) proj.entities = []
+  proj.entities.push({ id: generateId(), name, endpoints: [] })
+  await syncData()
+  renderTree()
+}
+
+window.addEndpoint = async (projectId, entityId) => {
+  const proj = state.projects.find((p) => p.id === projectId)
+  const ent = proj.entities.find((e) => e.id === entityId)
+  if (!ent.endpoints) ent.endpoints = []
+  const ep = {
+    id: generateId(),
+    method: 'GET',
+    path: '/new',
+    statusCode: 200,
+    delay: 0,
+    expectedParams: '',
+    expectedPayload: '',
+    responseBody: '{"success": true}',
+  }
+  ent.endpoints.push(ep)
+  await syncData()
+  activeIds = { project: projectId, entity: entityId, endpoint: ep.id }
+  renderTree()
+  updateMainPanel()
+}
+
+window.deleteNode = async (type, projId, entId) => {
+  if (!confirm(`Are you sure you want to delete this ${type}?`)) return
+  const projIndex = state.projects.findIndex((p) => p.id === projId)
+  if (type === 'project') {
+    state.projects.splice(projIndex, 1)
+    if (activeIds.project === projId) activeIds.endpoint = null
+  } else if (type === 'entity') {
+    state.projects[projIndex].entities = state.projects[projIndex].entities.filter(
+      (e) => e.id !== entId,
+    )
+    if (activeIds.entity === entId) activeIds.endpoint = null
+  }
+  await syncData()
+  renderTree()
+  updateMainPanel()
+}
+
+window.selectEndpoint = (projId, entId, epId) => {
+  activeIds = { project: projId, entity: entId, endpoint: epId }
+  renderTree()
+  updateMainPanel()
+}
+
+const getActiveEndpointData = () =>
+  state.projects
+    .find((p) => p.id === activeIds.project)
+    ?.entities.find((e) => e.id === activeIds.entity)
+    ?.endpoints.find((ep) => ep.id === activeIds.endpoint)
+
+function computeLiveUrl(proj, ent, epObj) {
+  const base = `${window.location.origin}/mock/${slugify(proj.name)}/${slugify(ent.name)}`
+  const finalPath = epObj.path.startsWith('/') ? epObj.path : '/' + epObj.path
+  return base + finalPath
+}
+
+function openEndpointEditor() {
+  const ep = getActiveEndpointData()
+  const p = state.projects.find((p) => p.id === activeIds.project)
+  const e = p.entities.find((e) => e.id === activeIds.entity)
+  if (!ep) return
+
+  document.getElementById('editorBreadcrumbs').innerText = `${p.name}  >  ${e.name}`
+
+  const fullUrl = computeLiveUrl(p, e, ep)
+  document.getElementById('liveUrlLink').innerText = fullUrl
+  document.getElementById('liveUrlLink').href = fullUrl
+
+  // Prod URL Auto-Assignment based on Base URL
+  const bUrl = (p.baseUrl || '').replace(/\/$/, '')
+  const fPath = ep.path.startsWith('/') ? ep.path : '/' + ep.path
+  const eSlug = slugify(e.name)
+  document.getElementById('prodUrlInput').value = bUrl ? `${bUrl}/${eSlug}${fPath}` : ''
+
+  document.getElementById('epId').value = ep.id
+  document.getElementById('method').value = ep.method
+  document.getElementById('path').value = ep.path
+  document.getElementById('statusCode').value = ep.statusCode || 200
+  document.getElementById('delay').value = ep.delay || 0
+
+  editors.payload.setValue(ep.expectedPayload || '', -1)
+  editors.params.setValue(ep.expectedParams || '', -1)
+  editors.headers.setValue(JSON.stringify(ep.headers || [], null, 2), -1)
+  editors.response.setValue(ep.responseBody || '', -1)
+
+  // Populate authorization
+  const auth = ep.authorization || { type: 'None', value: '' }
+  document.getElementById('authType').value = auth.type
+  document.getElementById('authValue').value = auth.value
+}
+
+document.getElementById('endpointForm').addEventListener('submit', async (ev) => {
+  ev.preventDefault()
+  const ep = getActiveEndpointData()
+  const p = state.projects.find((p) => p.id === activeIds.project)
+  const e = p.entities.find((e) => e.id === activeIds.entity)
+
+  ep.method = document.getElementById('method').value
+  let rawPath = document.getElementById('path').value
+  if (!rawPath.startsWith('/')) rawPath = '/' + rawPath
+  ep.path = rawPath
+  ep.statusCode = parseInt(document.getElementById('statusCode').value, 10)
+  ep.delay = parseInt(document.getElementById('delay').value, 10)
+  ep.expectedPayload = editors.payload.getValue()
+  ep.expectedParams = editors.params.getValue()
+  ep.responseBody = editors.response.getValue()
+
+  // Save authorization
+  ep.authorization = {
+    type: document.getElementById('authType').value,
+    value: document.getElementById('authValue').value,
+  }
+
+  // Save headers
+  try {
+    ep.headers = JSON.parse(editors.headers.getValue() || '[]')
+  } catch (e) {
+    ep.headers = []
+  }
+
+  const fullUrl = computeLiveUrl(p, e, ep)
+  document.getElementById('liveUrlLink').innerText = fullUrl
+  document.getElementById('liveUrlLink').href = fullUrl
+
+  const bUrl = (p.baseUrl || '').replace(/\/$/, '')
+  const eSlug = slugify(e.name)
+  document.getElementById('prodUrlInput').value = bUrl ? `${bUrl}/${eSlug}${ep.path}` : ''
+
+  const btn = document.getElementById('saveEndpointBtn')
+  const originalHtml = btn.innerHTML
+  btn.innerHTML = '✓ Saved Successfully!'
+  btn.style.background = 'var(--success)'
+  await syncData()
+  renderTree()
+  setTimeout(() => {
+    btn.innerHTML = originalHtml
+    btn.style.background = 'var(--accent)'
+  }, 1500)
+})
+
+document.getElementById('btnDeleteEndpoint').addEventListener('click', async () => {
+  if (!confirm('Are you sure you want to delete this endpoint?')) return
+  const proj = state.projects.find((p) => p.id === activeIds.project)
+  const ent = proj.entities.find((e) => e.id === activeIds.entity)
+  ent.endpoints = ent.endpoints.filter((ep) => ep.id !== activeIds.endpoint)
+  activeIds.endpoint = null
+  await syncData()
+  renderTree()
+  updateMainPanel()
+})
+
+// Global Buttons & Modal Handling
+function bindGlobalEvents() {
+  const treeSearch = document.getElementById('treeSearch')
+  if (treeSearch) {
+    treeSearch.addEventListener('input', (e) => {
+      treeSearchQuery = e.target.value.trim().toLowerCase()
+      renderTree()
+    })
+  }
+
+  // Global Shortcuts
+  document.addEventListener('keydown', (e) => {
+    if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
+      const editorScreen = document.getElementById('editorScreen')
+      if (editorScreen && editorScreen.style.display !== 'none') {
+        e.preventDefault()
+        document.getElementById('saveEndpointBtn').click()
+      }
+    }
+  })
+
+  // Mobile menu toggle
+  const mobileMenuBtn = document.getElementById('btnMobileMenu')
+  if (mobileMenuBtn) {
+    mobileMenuBtn.addEventListener('click', () => {
+      document.querySelector('.sidebar').classList.toggle('mobile-open')
+    })
+  }
+
+  document.getElementById('btnNewProject').addEventListener('click', async () => {
+    const name = prompt('Project Name (e.g. My Next API):')
+    if (!name) return
+    state.projects.push({ id: `p-${generateId()}`, name, entities: [] })
+    await syncData()
+    renderTree()
+  })
+  document
+    .getElementById('btnCreateFirstProject')
+    .addEventListener('click', () => document.getElementById('btnNewProject').click())
+  document.getElementById('btnExport').addEventListener('click', () => {
+    document.getElementById('modalExport').style.display = 'flex'
+  })
+
+  document.getElementById('btnExportDownload').addEventListener('click', () => {
+    triggerDownload(state, 'bemirror_export_fully.json')
+    document.getElementById('modalExport').style.display = 'none'
+  })
+
+  document.getElementById('btnExportCopy').addEventListener('click', () => {
+    navigator.clipboard.writeText(JSON.stringify(state, null, 2)).then(() => {
+      const btn = document.getElementById('btnExportCopy')
+      const oldText = btn.innerHTML
+      btn.innerHTML = '✓ Copied!'
+      setTimeout(() => {
+        btn.innerHTML = oldText
+        document.getElementById('modalExport').style.display = 'none'
+      }, 1500)
+    })
+  })
+
+  document.getElementById('btnAbout').addEventListener('click', () => {
+    document.getElementById('modalAbout').style.display = 'flex'
+  })
+
+  document.getElementById('btnVariables').addEventListener('click', () => {
+    editors.variables.setValue(JSON.stringify(variables, null, 2), -1)
+    document.getElementById('modalVariables').style.display = 'flex'
+  })
+
+  document.getElementById('btnSaveVariables').addEventListener('click', async () => {
+    try {
+      const newVars = JSON.parse(editors.variables.getValue())
+      variables = newVars
+      await syncVariables()
+      document.getElementById('modalVariables').style.display = 'none'
+      alert('Variables saved successfully!')
+    } catch (e) {
+      alert('Invalid JSON format. Please check your variables.')
+    }
+  })
+
+  document.getElementById('btnImport').addEventListener('click', () => {
+    document.getElementById('importPasteArea').value = ''
+    document.getElementById('modalImport').style.display = 'flex'
+  })
+
+  document.getElementById('fileImportAdvanced').addEventListener('change', (e) => {
+    const file = e.target.files[0]
+    if (!file) {
+      document.getElementById('fileImportStatus').innerText = 'No file selected.'
+      return
+    }
+    document.getElementById('fileImportStatus').innerText = `Selected: ${file.name}`
+    const reader = new FileReader()
+    reader.onload = (ev) => {
+      try {
+        const imported = JSON.parse(ev.target.result)
+        if (!imported.projects) throw new Error('Missing projects array')
+        importBuffer = imported.projects
+      } catch (err) {
+        alert('Invalid JSON format. Check your import file.')
+        importBuffer = null
+        document.getElementById('fileImportStatus').innerText = 'Invalid file.'
+      }
+    }
+    reader.readAsText(file)
+  })
+
+  document.getElementById('btnExecuteImport').addEventListener('click', async () => {
+    const pasteVal = document.getElementById('importPasteArea').value.trim()
+    if (pasteVal) {
+      try {
+        const parsed = JSON.parse(pasteVal)
+        if (parsed.projects) {
+          importBuffer = parsed.projects
+        } else {
+          throw new Error('Missing projects array in pasted JSON')
+        }
+      } catch (e) {
+        return alert('Invalid pasted JSON format.')
+      }
+    }
+
+    if (!importBuffer) {
+      return alert('Please upload a valid JSON file or paste valid JSON code.')
+    }
+
+    const strategy = document.querySelector('input[name="importStrategy"]:checked').value
+    if (strategy === 'overwrite') {
+      state.projects = importBuffer
+    } else {
+      state.projects = [...state.projects, ...importBuffer]
+    }
+
+    await syncData()
+    renderTree()
+    updateMainPanel()
+    document.getElementById('modalImport').style.display = 'none'
+    importBuffer = null
+    document.getElementById('fileImportAdvanced').value = ''
+    document.getElementById('fileImportStatus').innerText = 'No file selected.'
+    document.getElementById('importPasteArea').value = ''
+  })
+
+  // Export as cURL command
+  document.getElementById('btnCopyCurl').addEventListener('click', () => {
+    const ep = getActiveEndpointData()
+    if (!ep) return
+    const p = state.projects.find((p) => p.id === activeIds.project)
+    const e = p.entities.find((e) => e.id === activeIds.entity)
+
+    let finalUrl = computeLiveUrl(p, e, ep)
+    if (ep.expectedParams) {
+      try {
+        const pg = JSON.parse(ep.expectedParams)
+        const pStr = new URLSearchParams(pg).toString()
+        if (pStr) finalUrl += '?' + pStr
+      } catch (err) {}
+    }
+
+    let cmd = `curl -X ${ep.method} "${finalUrl}"`
+    if (ep.expectedPayload && ['POST', 'PUT', 'PATCH'].includes(ep.method)) {
+      cmd += ` \\\n  -H "Content-Type: application/json"`
+      cmd += ` \\\n  -d '${ep.expectedPayload.trim().replace(/'/g, "'\\''")}'`
+    }
+
+    navigator.clipboard.writeText(cmd).then(() => {
+      const btn = document.getElementById('btnCopyCurl')
+      btn.innerText = '✓ Copied!'
+      setTimeout(() => (btn.innerText = 'Copy cURL'), 2000)
+    })
+  })
+
+  // Export as JS fetch command
+  document.getElementById('btnCopyFetch').addEventListener('click', () => {
+    const ep = getActiveEndpointData()
+    if (!ep) return
+    const p = state.projects.find((p) => p.id === activeIds.project)
+    const e = p.entities.find((e) => e.id === activeIds.entity)
+
+    let finalUrl = computeLiveUrl(p, e, ep)
+    if (ep.expectedParams) {
+      try {
+        const pg = JSON.parse(ep.expectedParams)
+        const pStr = new URLSearchParams(pg).toString()
+        if (pStr) finalUrl += '?' + pStr
+      } catch (err) {}
+    }
+
+    let cmd = `fetch("${finalUrl}", {\n  method: "${ep.method}"`
+
+    if (ep.expectedPayload && ['POST', 'PUT', 'PATCH'].includes(ep.method)) {
+      cmd += `,\n  headers: {\n    "Content-Type": "application/json"\n  },\n`
+      let safePayload = ep.expectedPayload.trim()
+      if (!safePayload) safePayload = '{}'
+      cmd += `  body: JSON.stringify(${safePayload})\n`
+    } else {
+      cmd += `\n`
+    }
+    cmd += `})\n.then(res => {\n  const contentType = res.headers.get("content-type");\n  if (contentType && contentType.indexOf("application/json") !== -1) {\n    return res.json();\n  } else {\n    return res.text();\n  }\n})\n.then(data => console.log("Response:", data))\n.catch(err => console.error("Error:", err));`
+
+    navigator.clipboard.writeText(cmd).then(() => {
+      const btn = document.getElementById('btnCopyFetch')
+      btn.innerText = '✓ Copied!'
+      setTimeout(() => (btn.innerText = 'Copy fetch'), 2000)
+    })
+  })
+
+  // Prod URL HTTP Client logic
+  document.getElementById('btnSendProd').addEventListener('click', async () => {
+    const url = document.getElementById('prodUrlInput').value.trim()
+    if (!url) return alert('Please enter a Production URL first.')
+    const ep = getActiveEndpointData()
+
+    document.getElementById('prodResponseWrapper').style.display = 'block'
+    editors.prodResp.setValue('Sending request...', -1)
+    document.getElementById('prodStatus').innerText = 'Pending'
+    document.getElementById('prodTime').innerText = '--'
+
+    try {
+      const res = await fetch('/api/proxy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          url: url,
+          method: ep.method,
+          params: editors.params.getValue(),
+          payload: editors.payload.getValue(),
+        }),
+      })
+      const data = await res.json()
+
+      if (data.error && !data.status) {
+        document.getElementById('prodStatus').innerText = 'ERROR'
+        editors.prodResp.setValue(JSON.stringify(data.error, null, 2), -1)
+      } else {
+        document.getElementById('prodStatus').innerText = data.status + ' Http St'
+        document.getElementById('prodTime').innerText = data.time + 'ms'
+        let outputStr =
+          typeof data.body === 'object' ? JSON.stringify(data.body, null, 2) : data.body
+        editors.prodResp.setValue(outputStr, -1)
+      }
+    } catch (err) {
+      document.getElementById('prodStatus').innerText = 'CRASH'
+      editors.prodResp.setValue('Network or proxy engine error.', -1)
+    }
+  })
+}