reqwise-core 1.0.0 → 1.1.0

package/src/index.ts

@@ -1,24 +0,0 @@
-export * from './types'
-import storageDefault from './storage'
-import filterDefault from './filter'
-import i18nDefault from './i18n'
-import ReqwiseClientDefault from './client'
-
-export { storageDefault as storage }
-export { filterDefault as filter }
-export { i18nDefault as i18n }
-export { ReqwiseClientDefault as ReqwiseClient }
-
-const _default = {
-	storage: storageDefault,
-	filter: filterDefault,
-	i18n: i18nDefault,
-	ReqwiseClient: ReqwiseClientDefault,
-}
-
-export default _default
-
-import panel from './panel'
-import renderer from './renderer'
-
-export { panel, renderer }

package/src/panel.ts

@@ -1,446 +0,0 @@
-import styles from './styles'
-import i18n from './i18n'
-import { BANNER_DATA_URI, LOGO_DATA_URI } from './images'
-
-type Placement = 'right' | 'left' | 'top' | 'bottom'
-
-export interface PanelConfig {
-  defaultOpen?: boolean
-  placement?: Placement
-  hotkey?: string
-  theme?: 'dark' | 'light' | 'auto'
-}
-
-type RendererFn = (container: HTMLElement) => void
-
-const STYLE_ID = 'reqwise-styles'
-const PANEL_ID = 'reqwise-panel'
-const TOGGLE_ID = 'reqwise-toggle'
-
-function isBrowser() {
-  return typeof document !== 'undefined' && typeof window !== 'undefined'
-}
-
-function parseHotkey(h?: string) {
-  if (!h) return null
-  const parts = h.toLowerCase().split('+').map(p => p.trim())
-  return parts
-}
-
-function matchHotkey(parts: string[] | null, ev: KeyboardEvent) {
-  if (!parts) return false
-  const key = parts.find(p => !['ctrl', 'control', 'shift', 'alt', 'meta'].includes(p))
-  const needCtrl = parts.includes('ctrl') || parts.includes('control')
-  const needShift = parts.includes('shift')
-  const needAlt = parts.includes('alt')
-  const needMeta = parts.includes('meta')
-  if (needCtrl !== ev.ctrlKey) return false
-  if (needShift !== ev.shiftKey) return false
-  if (needAlt !== ev.altKey) return false
-  if (needMeta !== ev.metaKey) return false
-  if (key) return ev.key.toLowerCase() === key
-  return false
-}
-
-export const panel = (() => {
-  let mounted = false
-  let open = false
-  let cfg: PanelConfig = {}
-  let renderer: RendererFn | null = null
-  let hotkeyParts: string[] | null = null
-  let _clickOutsideHandler: ((ev: Event)=>void) | null = null
-  let _storageUnsub: (() => void) | null = null
-  let _scale = 1
-  let _sizeSteps = 0
-  const SIZE_STEP_PX = 5
-
-  function injectStyles() {
-    try {
-      if (!isBrowser()) return
-      if (document.getElementById(STYLE_ID)) return
-      const s = document.createElement('style')
-      s.id = STYLE_ID
-      s.textContent = styles
-      document.head.appendChild(s)
-    } catch (e) {
-      console.error('[reqwise] injectStyles error', e)
-    }
-  }
-
-  function removeStyles() {
-    try {
-      if (!isBrowser()) return
-      const s = document.getElementById(STYLE_ID)
-      if (s && s.parentNode) s.parentNode.removeChild(s)
-    } catch (e) {
-      console.error('[reqwise] removeStyles error', e)
-    }
-  }
-
-  function createPanelElement(): HTMLElement | null {
-    if (!isBrowser()) return null
-    if (document.getElementById(PANEL_ID)) return document.getElementById(PANEL_ID) as HTMLElement
-    const aside = document.createElement('aside')
-    aside.id = PANEL_ID
-    aside.className = `placement-${cfg.placement || 'right'}`
-    aside.setAttribute('role', 'region')
-    aside.setAttribute('aria-hidden', String(!cfg.defaultOpen))
-
-    const header = document.createElement('div')
-    header.className = 'rq-header'
-
-    const left = document.createElement('div')
-    left.className = 'rq-header-left'
-    // Use package-embedded banner image (data URI)
-    const banner = document.createElement('img')
-    banner.className = 'rq-banner'
-    banner.alt = 'Reqwise'
-    banner.src = BANNER_DATA_URI
-    banner.style.width = '140px'
-    banner.style.height = '42px'
-    banner.style.objectFit = 'cover'
-    left.appendChild(banner)
-    header.appendChild(left)
-
-    const right = document.createElement('div')
-    right.className = 'rq-header-right'
-
-    // Zoom controls (zoom out, zoom in) - placed to the left of language button
-    const zoomControls = document.createElement('div')
-    zoomControls.className = 'rq-zoom-controls'
-    const zoomOutBtn = document.createElement('button')
-    zoomOutBtn.className = 'rq-zoom-btn rq-zoom-out'
-    zoomOutBtn.setAttribute('aria-label', 'Zoom out')
-    zoomOutBtn.innerHTML = '<span>-</span>'
-    const zoomInBtn = document.createElement('button')
-    zoomInBtn.className = 'rq-zoom-btn rq-zoom-in'
-    zoomInBtn.setAttribute('aria-label', 'Zoom in')
-    zoomInBtn.innerHTML = '<span>+</span>'
-    zoomControls.appendChild(zoomOutBtn)
-    zoomControls.appendChild(zoomInBtn)
-
-    const langBtn = document.createElement('button')
-    langBtn.className = 'rq-lang-btn'
-    langBtn.id = 'rq-lang-btn'
-    langBtn.setAttribute('aria-label', 'Select language')
-    langBtn.innerHTML = '<span class="rq-world">🌐</span>'
-    // append zoom controls then language button
-    right.appendChild(zoomControls)
-    right.appendChild(langBtn)
-
-    const dropdown = document.createElement('div')
-    dropdown.className = 'rq-lang-dropdown'
-    dropdown.style.display = 'none'
-
-      try {
-      const langs = i18n.availableLanguages()
-      const current = i18n.getLanguage()
-      langs.forEach((l) => {
-        const item = document.createElement('button')
-        item.className = 'rq-lang-item'
-        ;(item as any).dataset.lang = l
-        // show human friendly language name
-        item.textContent = i18n.languageDisplayName(l as any)
-        if (current === l) item.classList.add('selected')
-        item.addEventListener('click', (ev) => {
-          try {
-            i18n.setLanguage(l as any)
-          } catch (e) {}
-          const items = dropdown.querySelectorAll('.rq-lang-item')
-          items.forEach(it => it.classList.remove('selected'))
-          item.classList.add('selected')
-          dropdown.style.display = 'none'
-          try {
-            const body = aside.querySelector('.rq-body') as HTMLElement | null
-            if (renderer && body) renderer(body)
-          } catch (e) {}
-        })
-        dropdown.appendChild(item)
-      })
-    } catch (e) {}
-
-    right.appendChild(dropdown)
-
-    langBtn.addEventListener('click', (ev) => {
-      try {
-        const showing = dropdown.style.display !== 'none'
-        dropdown.style.display = showing ? 'none' : 'block'
-        // install/remove outside click handler
-        if (!showing) {
-          _clickOutsideHandler = (event: Event) => {
-            const path = (event as any).composedPath ? (event as any).composedPath() : null
-            if (path && path.indexOf(dropdown) >= 0) return
-            if (path && path.indexOf(langBtn) >= 0) return
-            dropdown.style.display = 'none'
-            if (_clickOutsideHandler) {
-              document.removeEventListener('click', _clickOutsideHandler)
-              _clickOutsideHandler = null
-            }
-          }
-          document.addEventListener('click', _clickOutsideHandler)
-        } else {
-          if (_clickOutsideHandler) {
-            document.removeEventListener('click', _clickOutsideHandler)
-            _clickOutsideHandler = null
-          }
-        }
-      } catch (e) {}
-    })
-
-    header.appendChild(right)
-    aside.appendChild(header)
-
-    const body = document.createElement('div')
-    body.className = 'rq-body'
-    // Create structure placeholders for tabs and content
-    // Renderer will populate these with actual tabs and content
-    body.innerHTML = '<div class="rq-tabs"></div><div class="rq-main"></div>'
-
-    // Wrap header+body so we can apply global scale transform without affecting panel translate
-    const wrapper = document.createElement('div')
-    wrapper.className = 'rq-scale-wrapper'
-    wrapper.appendChild(header)
-    wrapper.appendChild(body)
-    aside.appendChild(wrapper)
-
-    // add invisible corner handles to show resize cursor when hovered
-    try {
-      const cornerNames = ['top-left', 'top-right', 'bottom-left', 'bottom-right']
-      cornerNames.forEach((name) => {
-        const h = document.createElement('div')
-        h.className = `rq-corner-handle rq-corner-${name}`
-        aside.appendChild(h)
-      })
-    } catch (e) {}
-
-    document.body.appendChild(aside)
-    return aside
-  }
-
-  function createToggle() {
-    if (!isBrowser()) return null
-    if (document.getElementById(TOGGLE_ID)) return document.getElementById(TOGGLE_ID) as HTMLElement
-    const btn = document.createElement('button')
-    btn.id = TOGGLE_ID
-    btn.className = 'rq-toggle'
-    btn.setAttribute('aria-label', 'Toggle Reqwise DevTools')
-    
-    // Create logo/icon container using package-embedded image (data URI)
-    const logo = document.createElement('img')
-    logo.alt = 'Reqwise'
-    logo.src = LOGO_DATA_URI
-    logo.style.width = '32px'
-    logo.style.height = '32px'
-    logo.style.objectFit = 'contain'
-    
-    // Add text label
-    const label = document.createElement('span')
-    label.style.fontSize = '13px'
-    label.style.fontWeight = '600'
-    // initial count placeholder; will be updated by storage.subscribe
-    label.textContent = 'Reqwise (0)'
-    label.style.fontSize = '13px'
-    label.style.fontWeight = '600'
-    label.style.marginLeft = '8px'
-    
-    btn.appendChild(logo)
-    btn.appendChild(label)
-    btn.addEventListener('click', () => toggle())
-    // Append toggle inside the panel so it stays glued to its corner and moves with the panel
-    const p = document.getElementById(PANEL_ID)
-    if (p) {
-      p.appendChild(btn)
-    } else {
-      // fallback to body if panel not yet present
-      document.body.appendChild(btn)
-    }
-
-    // size-step helper: adjust many px-based properties across all elements inside aside
-    function applySizeSteps() {
-      try {
-        const pp = document.getElementById(PANEL_ID)
-        if (!pp) return
-        const all = pp.querySelectorAll<HTMLElement>('*')
-        const cssProps = [
-          'font-size','padding-top','padding-right','padding-bottom','padding-left',
-          'margin-top','margin-right','margin-bottom','margin-left',
-          'border-top-left-radius','border-top-right-radius','border-bottom-left-radius','border-bottom-right-radius',
-          'gap'
-        ]
-        all.forEach((el) => {
-          const cs = window.getComputedStyle(el)
-          cssProps.forEach((prop) => {
-            try {
-              const propKey = `rqOrig_${prop.replace(/-/g, '_')}`
-              const cur = cs.getPropertyValue(prop)
-              if (!cur || cur === 'auto' || cur === 'normal') return
-              // only adjust px values
-              if (!cur.endsWith('px')) return
-              if (!(propKey in (el.dataset as any))) {
-                ;(el.dataset as any)[propKey] = cur
-              }
-              const orig = parseFloat((el.dataset as any)[propKey])
-              if (isNaN(orig)) return
-              const next = orig + _sizeSteps * SIZE_STEP_PX
-              // clamp per property category
-              let clamped = next
-              if (prop === 'font-size') {
-                clamped = Math.max(8, Math.min(next, 72))
-              } else if (prop.startsWith('padding') || prop.startsWith('margin') || prop === 'gap') {
-                clamped = Math.max(0, next)
-              } else if (prop.includes('border') && prop.endsWith('radius')) {
-                clamped = Math.max(0, next)
-              }
-              el.style.setProperty(prop, `${clamped}px`)
-            } catch (e) {}
-          })
-        })
-      } catch (e) {}
-    }
-
-    // wire zoom buttons (size-step) if present
-    try {
-      const p = document.getElementById(PANEL_ID)
-      const zoomOut = p ? p.querySelector('.rq-zoom-out') as HTMLElement | null : null
-      const zoomIn = p ? p.querySelector('.rq-zoom-in') as HTMLElement | null : null
-      if (zoomOut) zoomOut.addEventListener('click', () => { _sizeSteps = Math.max(_sizeSteps - 1, -10); applySizeSteps() })
-      if (zoomIn) zoomIn.addEventListener('click', () => { _sizeSteps = Math.min(_sizeSteps + 1, 10); applySizeSteps() })
-    } catch (e) {}
-
-    // subscribe to storage updates to keep the count live (lazy dynamic import)
-    try {
-      import('./storage.js').then((storageModule:any) => {
-        try {
-          if (storageModule && typeof storageModule.subscribe === 'function') {
-            _storageUnsub = storageModule.subscribe((items: any[]) => {
-              try { label.textContent = `Reqwise (${(items || []).length})` } catch (e) {}
-            })
-          }
-          // set initial count if getEntries exists
-          if (storageModule && typeof storageModule.getEntries === 'function') {
-            try { const initial = storageModule.getEntries(); label.textContent = `Reqwise (${(initial || []).length})` } catch (e) {}
-          }
-        } catch (e) {}
-      }).catch(()=>{})
-    } catch (e) {}
-
-    return btn
-  }
-
-  function removeToggle() {
-    if (!isBrowser()) return
-    const b = document.getElementById(TOGGLE_ID)
-    if (b && b.parentNode) b.parentNode.removeChild(b)
-  }
-
-  function applyTheme() {
-    if (!isBrowser()) return
-    if (cfg.theme === 'light') document.documentElement.setAttribute('data-rq-theme', 'light')
-    else if (cfg.theme === 'dark') document.documentElement.setAttribute('data-rq-theme', 'dark')
-    else document.documentElement.removeAttribute('data-rq-theme')
-  }
-
-  function mount(config?: PanelConfig) {
-    try {
-      if (!isBrowser()) return
-      if (mounted) return
-      cfg = { defaultOpen: false, placement: 'right', hotkey: 'ctrl+shift+e', theme: 'auto', ...(config || {}) }
-      hotkeyParts = parseHotkey(cfg.hotkey)
-      injectStyles()
-      applyTheme()
-      createPanelElement()
-      createToggle()
-      // Ensure renderer runs at least once to populate structure and register subscriptions
-      try {
-        const p = document.getElementById(PANEL_ID)
-        if (renderer && p) {
-          const body = p.querySelector('.rq-body') as HTMLElement | null
-          if (body) {
-            try { renderer(body) } catch (e) { console.error('[reqwise] renderer error', e) }
-          }
-        }
-      } catch (e) {}
-      open = !!cfg.defaultOpen
-      setOpenState(open)
-      window.addEventListener('keydown', onKeydown)
-      mounted = true
-    } catch (e) {
-      console.error('[reqwise] mount error', e)
-    }
-  }
-
-  function onKeydown(ev: KeyboardEvent) {
-    try {
-      if (matchHotkey(hotkeyParts, ev)) {
-        ev.preventDefault()
-        toggle()
-      }
-    } catch (e) {
-      console.error('[reqwise] hotkey handler', e)
-    }
-  }
-
-  function setOpenState(next: boolean) {
-    try {
-      const p = document.getElementById(PANEL_ID)
-      const t = document.getElementById(TOGGLE_ID)
-      open = !!next
-      if (p) {
-        p.classList.toggle('rq-closed', !open)
-        p.setAttribute('aria-hidden', String(!open))
-      }
-      // Toggle button'da hep logo + label gözüksün (text değişmesin)
-      // call renderer with rq-body container if present
-      if (open && renderer && p) {
-        const body = p.querySelector('.rq-body') as HTMLElement | null
-        if (body) {
-          try { renderer(body) } catch (e) { console.error('[reqwise] renderer error', e) }
-        }
-      }
-    } catch (e) {
-      console.error('[reqwise] setOpenState error', e)
-    }
-  }
-
-  function openPanel() { setOpenState(true) }
-  function closePanel() { setOpenState(false) }
-  function toggle() { setOpenState(!open) }
-
-  function unmount() {
-    try {
-      if (!isBrowser()) return
-      if (!mounted) return
-      window.removeEventListener('keydown', onKeydown)
-      const p = document.getElementById(PANEL_ID)
-      if (p && p.parentNode) p.parentNode.removeChild(p)
-      removeToggle()
-      removeStyles()
-      if (_storageUnsub) { try { _storageUnsub(); _storageUnsub = null } catch (e) {} }
-      mounted = false
-      open = false
-      renderer = null
-    } catch (e) {
-      console.error('[reqwise] unmount error', e)
-    }
-  }
-
-  function setRenderer(r: RendererFn) {
-    renderer = r
-  }
-
-  function isMounted() { return mounted }
-  function isOpen() { return open }
-
-  return {
-    mount,
-    unmount,
-    open: openPanel,
-    close: closePanel,
-    toggle,
-    setRenderer,
-    isMounted,
-    isOpen
-  }
-})()
-
-export default panel