matterviz 0.4.2 → 0.4.3

package/dist/file-viewer/JsonBrowser.svelte

@@ -0,0 +1,1043 @@
+<script lang="ts">
+  // Split-pane browser for navigating and visualizing structured JSON data.
+  // Left sidebar shows a JsonTree for navigating the file's JSON structure.
+  // Right canvas renders one or more visualization panels in a split layout.
+  // Users can click tree nodes to render in the main panel, or drag nodes
+  // to specific edges to create horizontal/vertical splits.
+  import BrillouinZone from '../brillouin/BrillouinZone.svelte'
+  import ConvexHull from '../convex-hull/ConvexHull.svelte'
+  import type { PhaseData } from '../convex-hull/types'
+  import FermiSurface from '../fermi-surface/FermiSurface.svelte'
+  import { is_fermi_surface_data } from '../fermi-surface/types'
+  import type { VolumetricData } from '../isosurface/types'
+  import JsonTree from '../layout/json-tree/JsonTree.svelte'
+  import IsobaricBinaryPhaseDiagram from '../phase-diagram/IsobaricBinaryPhaseDiagram.svelte'
+  import type { PhaseDiagramData } from '../phase-diagram/types'
+  import { merge, type DefaultSettings } from '../settings'
+  import Bands from '../spectral/Bands.svelte'
+  import BandsAndDos from '../spectral/BandsAndDos.svelte'
+  import Dos from '../spectral/Dos.svelte'
+  import type { BaseBandStructure, DosInput } from '../spectral/types'
+  import type { AnyStructure, LatticeType } from '../structure'
+  import {
+    is_optimade_raw,
+    normalize_fractional_coords,
+    parse_optimade_from_raw,
+  } from '../structure/parse'
+  import { build_structure_props_from_settings as structure_props } from '../structure/prop-groups'
+  import Structure from '../structure/Structure.svelte'
+  import type { XrdPattern } from '../xrd'
+  import XrdPlot from '../xrd/XrdPlot.svelte'
+  import { mount, unmount } from 'svelte'
+  import {
+    detect_view_type,
+    resolve_path,
+    scan_renderable_paths,
+    TYPE_COLORS,
+    TYPE_LABELS,
+  } from './detect'
+  import type { RenderableType } from './detect'
+  import PlotPanel from './PlotPanel.svelte'
+
+  let {
+    value,
+    defaults,
+    filename,
+  }: {
+    value: unknown
+    defaults?: DefaultSettings
+    filename?: string
+  } = $props()
+
+  // === Panel state ===
+  // Each panel holds a mounted component. Panels are arranged in a flat list
+  // with split info (direction) between consecutive panels.
+  // Panel sizing is stored as a parallel array of flex weights.
+  interface PanelInfo {
+    id: string
+    data_path: string
+    detected_type: RenderableType
+    val: unknown
+    component: ReturnType<typeof mount> | null
+    element: HTMLElement | null
+  }
+
+  type SplitDirection = `horizontal` | `vertical`
+
+  let panels = $state<PanelInfo[]>([])
+  let panel_sizes = $state<number[]>([]) // flex weight per panel (parallel to panels[])
+  let split_directions = $state<SplitDirection[]>([]) // direction between panels[i] and panels[i+1]
+
+  // Debounce timer for rapid clicks (cleaned up when component is destroyed)
+  let select_timer: ReturnType<typeof setTimeout> | undefined
+  let destroyed = false
+  $effect(() => () => {
+    destroyed = true
+    if (select_timer) clearTimeout(select_timer)
+  })
+
+  // Unmount all imperatively mounted panels when this component is destroyed
+  // (prevents leaked WebGL contexts, Three.js renderers, etc.)
+  $effect(() => () => {
+    for (let idx = 0; idx < panels.length; idx++) {
+      unmount_panel(idx)
+    }
+  })
+
+  // Scan for renderable paths asynchronously to avoid blocking the UI on large JSON files.
+  // Uses requestIdleCallback to yield to the main thread during tree rendering.
+  let renderable_paths = $state(new Map<string, { type: RenderableType; label: string }>())
+  let auto_rendered = false
+  $effect(() => {
+    const current_value = value
+    const idle_handle = requestIdleCallback(() => {
+      renderable_paths = scan_renderable_paths(current_value)
+      // Auto-render if the root value itself is a single renderable type
+      // (avoids forcing the user to click for single-type JSON files)
+      if (!auto_rendered && renderable_paths.has(``)) {
+        auto_rendered = true
+        const info = renderable_paths.get(``)
+        if (info) replace_or_add_panel(``, info.type, current_value)
+      }
+    })
+    return () => cancelIdleCallback(idle_handle)
+  })
+
+  // === Draggable sidebar divider ===
+  let sidebar_width = $state(320)
+  let is_sidebar_dragging = $state(false)
+
+  // Generic drag cleanup helper -- in a webview iframe the cursor can leave the
+  // document entirely, so we listen for mouseup, blur, and pointerleave to ensure
+  // the drag always terminates.
+  function start_drag(on_move: (event: MouseEvent) => void, on_done: () => void): void {
+    let cleaned_up = false
+    function cleanup(): void {
+      if (cleaned_up) return
+      cleaned_up = true
+      on_done()
+      globalThis.removeEventListener(`mousemove`, on_move)
+      globalThis.removeEventListener(`mouseup`, cleanup)
+      globalThis.removeEventListener(`blur`, cleanup)
+      document.documentElement.removeEventListener(`mouseleave`, cleanup)
+    }
+    globalThis.addEventListener(`mousemove`, on_move)
+    globalThis.addEventListener(`mouseup`, cleanup)
+    globalThis.addEventListener(`blur`, cleanup)
+    document.documentElement.addEventListener(`mouseleave`, cleanup)
+  }
+
+  function on_sidebar_divider_mousedown(event: MouseEvent): void {
+    event.preventDefault()
+    is_sidebar_dragging = true
+    const start_x = event.clientX
+    const start_width = sidebar_width
+    start_drag(
+      (move_event) => {
+        const delta = move_event.clientX - start_x
+        sidebar_width = Math.max(150, Math.min(start_width + delta, window.innerWidth * 0.6))
+      },
+      () => {
+        is_sidebar_dragging = false
+      },
+    )
+  }
+
+  // === Drag-and-drop from tree ===
+  let drop_zone = $state<`top` | `bottom` | `left` | `right` | `center` | null>(null)
+  let drop_target_panel_idx = $state<number>(-1)
+  let canvas_element: HTMLElement | undefined = $state()
+
+  let sidebar_element: HTMLElement | undefined = $state()
+
+  // Strip internal suffix used to register multiple renderable types at the same path
+  function strip_type_suffix(path: string): string {
+    const idx = path.indexOf(`\u0000`)
+    return idx !== -1 ? path.slice(0, idx) : path
+  }
+
+  // Convert a data path (relative to JSON root) to the tree path used by JsonTree
+  function data_to_tree_path(data_path: string): string {
+    const clean = strip_type_suffix(data_path)
+    return filename ? (clean ? `${filename}.${clean}` : filename) : clean
+  }
+
+  // Build a map of tree paths that are renderable (for fast draggable lookup).
+  // Skip synthetic suffix paths (\x00...) since those have their own badge drag handlers.
+  let renderable_tree_paths = $derived(
+    new Map(
+      [...renderable_paths]
+        .filter(([data_path]) => !data_path.includes(`\u0000`))
+        .map(([data_path, info]) => [data_to_tree_path(data_path), { data_path, ...info }]),
+    ),
+  )
+
+  // Mark renderable tree nodes as draggable via attribute (no per-node listeners)
+  function mark_draggable_nodes(): void {
+    if (!sidebar_element) return
+    for (const node of sidebar_element.querySelectorAll(`[data-path]`)) {
+      const el = node as HTMLElement
+      const tree_path = el.getAttribute(`data-path`) ?? ``
+      el.draggable = renderable_tree_paths.has(tree_path)
+    }
+  }
+
+  // Single delegated dragstart handler on sidebar (no per-node listeners needed)
+  $effect(() => {
+    if (!sidebar_element) return
+    function on_dragstart(event: DragEvent): void {
+      if (!event.dataTransfer) {
+        event.preventDefault()
+        return
+      }
+      const origin = event.target
+      if (!(origin instanceof HTMLElement)) return
+      // If dragging a badge directly, use its own data attributes
+      const badge = origin.closest(`.renderable-badge`) as HTMLElement | null
+      if (badge) {
+        const data_path = badge.dataset.renderable_path ?? ``
+        const detected_type = badge.dataset.renderable_type ?? ``
+        event.dataTransfer.setData(`text/plain`, JSON.stringify({ data_path, detected_type }))
+        event.dataTransfer.effectAllowed = `copy`
+        return
+      }
+      // Otherwise dragging a tree node -- look up from tree path
+      const target = origin.closest(`[data-path]`) as HTMLElement | null
+      if (!target) return
+      const tree_path = target.getAttribute(`data-path`) ?? ``
+      const info = renderable_tree_paths.get(tree_path)
+      if (!info) {
+        event.preventDefault()
+        return
+      }
+      event.dataTransfer.setData(
+        `text/plain`,
+        JSON.stringify({ data_path: info.data_path, detected_type: info.type }),
+      )
+      event.dataTransfer.effectAllowed = `copy`
+    }
+    sidebar_element.addEventListener(`dragstart`, on_dragstart)
+    return () => sidebar_element?.removeEventListener(`dragstart`, on_dragstart)
+  })
+
+  // === Badge injection ===
+  function apply_badges(): void {
+    if (!sidebar_element || renderable_paths.size === 0) return
+    for (const existing of sidebar_element.querySelectorAll(`.renderable-badge`)) {
+      existing.remove()
+    }
+    for (const [data_path, info] of renderable_paths) {
+      const node = sidebar_element.querySelector(
+        `[data-path="${CSS.escape(data_to_tree_path(data_path))}"]`,
+      )
+      if (!node) continue
+      const colon_el = node.querySelector(`.colon`)
+      const insert_after = colon_el ?? node.querySelector(`.node-key`) ?? node
+      const badge = document.createElement(`span`)
+      badge.className = `renderable-badge`
+      badge.textContent = info.label
+      badge.title = `Drag to canvas or click to render`
+      badge.dataset.renderable_path = data_path
+      badge.dataset.renderable_type = info.type
+      badge.style.background = TYPE_COLORS[info.type]
+      badge.draggable = true
+      insert_after.after(badge)
+    }
+  }
+
+  // Delegated click handler for badges (avoids per-badge listeners that leak on re-render)
+  // Uses capture phase to intercept before tree node fold/select handlers
+  $effect(() => {
+    if (!sidebar_element) return
+    function on_badge_click(event: MouseEvent): void {
+      const origin = event.target
+      if (!(origin instanceof HTMLElement)) return
+      const badge = origin.closest(`.renderable-badge`) as HTMLElement | null
+      if (!badge) return
+      event.stopPropagation()
+      event.preventDefault()
+      const raw_path = badge.dataset.renderable_path ?? ``
+      const data_path = strip_type_suffix(raw_path)
+      const detected_type = badge.dataset.renderable_type
+      if (!detected_type || !(detected_type in TYPE_LABELS)) return
+      const val = resolve_path(value, data_path)
+      if (val !== undefined)
+        replace_or_add_panel(data_path, detected_type as RenderableType, val)
+    }
+    sidebar_element.addEventListener(`click`, on_badge_click, true)
+    return () => sidebar_element?.removeEventListener(`click`, on_badge_click, true)
+  })
+
+  // Escape key closes all panels, returning to the overview
+  $effect(() => {
+    if (panels.length === 0) return
+    function on_keydown(event: KeyboardEvent): void {
+      if (event.key !== `Escape`) return
+      const target = event.target
+      if (
+        target instanceof HTMLElement &&
+        [`INPUT`, `SELECT`, `TEXTAREA`].includes(target.tagName)
+      )
+        return
+      close_all_panels()
+    }
+    globalThis.addEventListener(`keydown`, on_keydown)
+    return () => globalThis.removeEventListener(`keydown`, on_keydown)
+  })
+
+  // Re-apply badges + draggable attributes when tree DOM changes.
+  // Guard with a flag so our own badge DOM mutations don't re-trigger the observer,
+  // and coalesce rapid mutations into a single rAF.
+  let applying_badges = false
+  $effect(() => {
+    if (!sidebar_element) return
+    let pending_raf: number | null = null
+    function schedule_refresh(): void {
+      if (pending_raf) return
+      pending_raf = requestAnimationFrame(() => {
+        pending_raf = null
+        if (applying_badges) return
+        applying_badges = true
+        try {
+          apply_badges()
+          mark_draggable_nodes()
+        } finally {
+          applying_badges = false
+        }
+      })
+    }
+    schedule_refresh()
+    const observer = new MutationObserver(schedule_refresh)
+    observer.observe(sidebar_element, { childList: true, subtree: true })
+    return () => {
+      observer.disconnect()
+      if (pending_raf) cancelAnimationFrame(pending_raf)
+    }
+  })
+
+  // === Panel management ===
+
+  const make_panel_id = (): string => `panel_${crypto.randomUUID()}`
+
+  // Click replaces the single/first panel; drag adds a split
+  function replace_or_add_panel(
+    data_path: string,
+    detected_type: RenderableType,
+    val: unknown,
+  ): void {
+    if (panels.length === 0) {
+      panels = [
+        { id: make_panel_id(), data_path, detected_type, val, component: null, element: null },
+      ]
+      panel_sizes = [1]
+    } else {
+      unmount_panel(0)
+      panels[0] = {
+        id: make_panel_id(),
+        data_path,
+        detected_type,
+        val,
+        component: null,
+        element: null,
+      }
+      panels = [...panels] // trigger reactivity
+    }
+    requestAnimationFrame(() => mount_all_panels())
+  }
+
+  function add_panel_with_split(
+    data_path: string,
+    detected_type: RenderableType,
+    val: unknown,
+    target_idx: number,
+    zone: `top` | `bottom` | `left` | `right`,
+  ): void {
+    const new_panel: PanelInfo = {
+      id: make_panel_id(),
+      data_path,
+      detected_type,
+      val,
+      component: null,
+      element: null,
+    }
+    const direction: SplitDirection =
+      zone === `top` || zone === `bottom` ? `vertical` : `horizontal`
+    const insert_before = zone === `top` || zone === `left`
+
+    if (panels.length === 0) {
+      panels = [new_panel]
+      panel_sizes = [1]
+    } else {
+      const new_panels = [...panels]
+      const new_sizes = [...panel_sizes]
+      const new_dirs = [...split_directions]
+      const insert_idx = insert_before ? target_idx : target_idx + 1
+      // Split the target panel's size in half: new panel gets half, target keeps half
+      const target_size = new_sizes[target_idx] ?? 1
+      new_sizes[target_idx] = target_size / 2
+      new_panels.splice(insert_idx, 0, new_panel)
+      new_sizes.splice(insert_idx, 0, target_size / 2)
+      // Add direction between the two panels
+      new_dirs.splice(target_idx, 0, direction)
+      panels = new_panels
+      panel_sizes = new_sizes
+      split_directions = new_dirs
+    }
+    requestAnimationFrame(() => mount_all_panels())
+  }
+
+  function close_panel(idx: number): void {
+    unmount_panel(idx)
+    const new_panels = [...panels]
+    const new_sizes = [...panel_sizes]
+    const new_dirs = [...split_directions]
+    // Give the closed panel's size to its neighbor
+    const closed_size = new_sizes[idx] ?? 0
+    const neighbor_idx = idx > 0 ? idx - 1 : idx + 1
+    if (neighbor_idx < new_sizes.length) new_sizes[neighbor_idx] += closed_size
+    new_panels.splice(idx, 1)
+    new_sizes.splice(idx, 1)
+    // Remove the adjacent split direction
+    if (new_dirs.length > 0) {
+      const dir_idx = Math.min(idx, new_dirs.length - 1)
+      new_dirs.splice(dir_idx, 1)
+    }
+    panels = new_panels
+    panel_sizes = new_sizes
+    split_directions = new_dirs
+  }
+
+  function close_all_panels(): void {
+    for (let idx = panels.length - 1; idx >= 0; idx--) unmount_panel(idx)
+    panels = []
+    panel_sizes = []
+    split_directions = []
+  }
+
+  function unmount_panel(idx: number): void {
+    const panel = panels[idx]
+    if (panel?.component) {
+      try {
+        unmount(panel.component)
+      } catch (error) {
+        console.error(`JsonBrowser: unmount failed:`, error)
+      }
+      panel.component = null
+    }
+    if (panel?.element) panel.element.innerHTML = ``
+  }
+
+  // === Component mounting ===
+
+  function prepare_structure(val: unknown): unknown {
+    if (is_optimade_raw(val)) {
+      const result = parse_optimade_from_raw(val)
+      if (result) return result
+    }
+    const record = val as Record<string, unknown>
+    if (Array.isArray(record.sites) && record.lattice) {
+      return normalize_fractional_coords(
+        val as Parameters<typeof normalize_fractional_coords>[0],
+      )
+    }
+    return val
+  }
+
+  // Merge defaults once (reused across all panel mounts)
+  const merged_defaults = $derived(merge(defaults))
+  const common_props = { fullscreen_toggle: false, style: `height:100%` }
+
+  function mount_into(
+    target: HTMLElement,
+    val: unknown,
+    detected_type: RenderableType,
+    panel_id?: string,
+  ): ReturnType<typeof mount> | null {
+    const onclose =
+      panel_id !== undefined
+        ? () => {
+            const idx = panels.findIndex((panel) => panel.id === panel_id)
+            if (idx === -1) return
+            if (panels.length > 1) close_panel(idx)
+            else close_all_panels()
+          }
+        : undefined
+    target.innerHTML = ``
+    // Force layout so Three.js gets real dimensions
+    void target.offsetHeight
+
+    const structure_mount_props = {
+      allow_file_drop: false,
+      enable_tips: false,
+      ...structure_props(merged_defaults),
+      ...common_props,
+    }
+
+    try {
+      if (detected_type === `structure`) {
+        return mount(Structure, {
+          target,
+          props: {
+            structure: prepare_structure(val) as AnyStructure,
+            ...structure_mount_props,
+          },
+        })
+      } else if (detected_type === `fermi_surface` || detected_type === `band_grid`) {
+        const props: Record<string, unknown> = { allow_file_drop: false, ...common_props }
+        if (is_fermi_surface_data(val as Parameters<typeof is_fermi_surface_data>[0])) {
+          props.fermi_data = val
+        } else props.band_data = val
+        return mount(FermiSurface, { target, props })
+      } else if (detected_type === `convex_hull`) {
+        return mount(ConvexHull, {
+          target,
+          props: { entries: val as PhaseData[], ...common_props },
+        })
+      } else if (detected_type === `phase_diagram`) {
+        return mount(IsobaricBinaryPhaseDiagram, {
+          target,
+          props: { data: val as PhaseDiagramData, ...common_props },
+        })
+      } else if (detected_type === `volumetric`) {
+        const vol_data = val as { lattice: LatticeType }
+        return mount(Structure, {
+          target,
+          props: {
+            structure: { sites: [], lattice: vol_data.lattice } as AnyStructure,
+            volumetric_data: [val as VolumetricData],
+            ...structure_mount_props,
+          },
+        })
+      } else if (detected_type === `bands_and_dos`) {
+        const data = val as Record<string, unknown>
+        // Support both { band_structure, dos } wrapper and combined-fields format
+        const band_data = (data.band_structure ?? val) as BaseBandStructure
+        const dos_data = (data.dos ?? val) as DosInput
+        return mount(BandsAndDos, {
+          target,
+          props: { band_structs: band_data, doses: dos_data, ...common_props },
+        })
+      } else if (detected_type === `band_structure`) {
+        return mount(Bands, {
+          target,
+          props: {
+            band_structs: val as BaseBandStructure,
+            ...common_props,
+            padding: { b: 60 },
+          },
+        })
+      } else if (detected_type === `dos`) {
+        return mount(Dos, {
+          target,
+          props: { doses: val as DosInput, ...common_props, padding: { b: 60 } },
+        })
+      } else if (detected_type === `brillouin_zone`) {
+        const bz_val = val as Record<string, unknown>
+        const bz_props: Record<string, unknown> = { allow_file_drop: false, ...common_props }
+        if (bz_val.structure) bz_props.structure = prepare_structure(bz_val.structure)
+        // Pass pre-computed BZ data (vertices, faces, edges) if present
+        if (bz_val.vertices && bz_val.faces) bz_props.bz_data = bz_val
+        return mount(BrillouinZone, { target, props: bz_props })
+      } else if (detected_type === `xrd`) {
+        return mount(XrdPlot, {
+          target,
+          props: { patterns: val as XrdPattern, allow_file_drop: false, ...common_props },
+        })
+      } else if (detected_type === `table`) {
+        return mount(PlotPanel, {
+          target,
+          props: { data: val, initial_type: `table`, onclose, ...common_props },
+        })
+      } else if (detected_type === `plot`) {
+        return mount(PlotPanel, { target, props: { data: val, onclose, ...common_props } })
+      }
+    } catch (error) {
+      console.error(`JsonBrowser: mount failed for ${detected_type}:`, error)
+    }
+    return null
+  }
+
+  function mount_all_panels(): void {
+    for (const panel of panels) {
+      if (panel.component) continue // already mounted
+      const el = document.querySelector<HTMLElement>(`#${panel.id}`)
+      if (!el) continue
+      panel.element = el
+      panel.component = mount_into(el, panel.val, panel.detected_type, panel.id)
+    }
+  }
+
+  // === Drop zone detection ===
+
+  function get_drop_zone(
+    event: DragEvent,
+    rect: DOMRect,
+  ): `top` | `bottom` | `left` | `right` | `center` {
+    const rel_x = (event.clientX - rect.left) / rect.width
+    const rel_y = (event.clientY - rect.top) / rect.height
+    const edge_threshold = 0.25
+    if (rel_y < edge_threshold) return `top`
+    if (rel_y > 1 - edge_threshold) return `bottom`
+    if (rel_x < edge_threshold) return `left`
+    if (rel_x > 1 - edge_threshold) return `right`
+    return `center`
+  }
+
+  function on_canvas_dragover(event: DragEvent): void {
+    event.preventDefault()
+    if (event.dataTransfer) event.dataTransfer.dropEffect = `copy`
+    if (!canvas_element) return
+    // Default to center/first panel; override if cursor is inside a specific panel
+    drop_zone = `center`
+    drop_target_panel_idx = 0
+    const panel_els = canvas_element.querySelectorAll(`.viz-panel`)
+    for (let idx = 0; idx < panel_els.length; idx++) {
+      const rect = panel_els[idx].getBoundingClientRect()
+      if (
+        event.clientX >= rect.left &&
+        event.clientX <= rect.right &&
+        event.clientY >= rect.top &&
+        event.clientY <= rect.bottom
+      ) {
+        drop_zone = get_drop_zone(event, rect)
+        drop_target_panel_idx = idx
+        break
+      }
+    }
+    // Prevent mixed-axis splits until nested layouts are supported
+    if (split_directions.length > 0) {
+      const layout = split_directions[0]
+      if (layout === `vertical` && (drop_zone === `left` || drop_zone === `right`)) {
+        drop_zone = `center`
+      } else if (layout === `horizontal` && (drop_zone === `top` || drop_zone === `bottom`)) {
+        drop_zone = `center`
+      }
+    }
+  }
+
+  function on_canvas_dragleave(event: DragEvent): void {
+    // Only clear if leaving the canvas entirely
+    if (canvas_element && !canvas_element.contains(event.relatedTarget as Node)) {
+      drop_zone = null
+      drop_target_panel_idx = -1
+    }
+  }
+
+  function on_canvas_drop(event: DragEvent): void {
+    event.preventDefault()
+    const raw = event.dataTransfer?.getData(`text/plain`)
+    // Capture the already-computed drop state before clearing it
+    const zone = drop_zone
+    const target_idx = Math.max(0, drop_target_panel_idx)
+    drop_zone = null
+    drop_target_panel_idx = -1
+    if (!raw) return
+    try {
+      const parsed = JSON.parse(raw) as { data_path: string; detected_type: RenderableType }
+      const data_path = strip_type_suffix(parsed.data_path)
+      const { detected_type } = parsed
+      if (!detected_type || !(detected_type in TYPE_LABELS)) return
+      const val = resolve_path(value, data_path)
+      if (val === undefined) return
+      if (panels.length === 0 || zone === `center` || !zone) {
+        replace_or_add_panel(data_path, detected_type, val)
+      } else {
+        add_panel_with_split(data_path, detected_type, val, target_idx, zone)
+      }
+    } catch (error) {
+      console.error(`JsonBrowser: drop failed:`, error)
+    }
+  }
+
+  // === Panel split divider dragging ===
+  let split_dragging_idx = $state(-1)
+
+  function on_split_divider_mousedown(event: MouseEvent, split_idx: number): void {
+    event.preventDefault()
+    split_dragging_idx = split_idx
+    const direction = split_directions[split_idx]
+    if (!direction) return
+    const panel_container = canvas_element?.querySelector(
+      `.panel-container`,
+    ) as HTMLElement | null
+    if (!panel_container) return
+    const container_rect = panel_container.getBoundingClientRect()
+
+    const is_vertical = direction === `vertical`
+    const start_pos = is_vertical ? event.clientY : event.clientX
+    const container_size = is_vertical ? container_rect.height : container_rect.width
+    // Total flex of the two adjacent panels
+    const left_idx = split_idx
+    const right_idx = split_idx + 1
+    const total_flex = (panel_sizes[left_idx] ?? 1) + (panel_sizes[right_idx] ?? 1)
+    const start_left_size = panel_sizes[left_idx] ?? total_flex / 2
+
+    start_drag(
+      (move_event) => {
+        const current_pos = is_vertical ? move_event.clientY : move_event.clientX
+        const delta_fraction = (current_pos - start_pos) / container_size
+        const delta_flex = delta_fraction * total_flex
+        const new_left = Math.max(
+          total_flex * 0.1,
+          Math.min(total_flex * 0.9, start_left_size + delta_flex),
+        )
+        panel_sizes[left_idx] = new_left
+        panel_sizes[right_idx] = total_flex - new_left
+      },
+      () => {
+        split_dragging_idx = -1
+      },
+    )
+  }
+
+  // === Helpers ===
+
+  function strip_root_prefix(path: string): string {
+    if (!filename || !path.startsWith(filename)) return path
+    const stripped = path.slice(filename.length)
+    return stripped.startsWith(`.`) ? stripped.slice(1) : stripped
+  }
+
+  function handle_select(path: string, val: unknown): void {
+    const data_path = strip_root_prefix(path)
+    if (select_timer) clearTimeout(select_timer)
+    select_timer = setTimeout(() => {
+      if (destroyed) return // component was destroyed while timer was pending
+      const detected = detect_view_type(val)
+      if (detected) replace_or_add_panel(data_path, detected, val)
+    }, 150)
+  }
+
+  // The first split direction determines the flex layout direction
+  let layout_direction = $derived(
+    split_directions.length > 0 ? split_directions[0] : `vertical`,
+  )
+
+  const type_color = (key: string) => TYPE_COLORS[key as RenderableType] ?? `#888`
+</script>
+
+{#snippet type_list(header: string, extra_style?: string)}
+  <div class="type-list" style={extra_style ?? ``}>
+    <p class="type-list-header">{header}</p>
+    {#each Object.entries(TYPE_LABELS) as [type_key, label] (type_key)}
+      <span class="type-tag" style="border-color: {type_color(type_key)}44;">
+        <span class="chip-dot" style="background: {type_color(type_key)};"></span>
+        {label}
+      </span>
+    {/each}
+  </div>
+{/snippet}
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="json-browser" class:dragging={is_sidebar_dragging || split_dragging_idx >= 0}>
+  <aside class="sidebar" bind:this={sidebar_element} style="width: {sidebar_width}px">
+    <JsonTree
+      {value}
+      root_label={filename}
+      default_fold_level={1}
+      onselect={handle_select}
+      show_header
+    />
+  </aside>
+
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div class="divider sidebar-divider" onmousedown={on_sidebar_divider_mousedown}></div>
+
+  <!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="canvas"
+    bind:this={canvas_element}
+    ondragover={on_canvas_dragover}
+    ondragleave={on_canvas_dragleave}
+    ondrop={on_canvas_drop}
+  >
+    {#if panels.length === 0}
+      <!-- Placeholder when no panels -->
+      <div class="placeholder">
+        {#if renderable_paths.size === 0}
+          <p class="placeholder-title">No renderable data found</p>
+          <p class="placeholder-sub">
+            This JSON file doesn't contain recognized visualization data.
+          </p>
+          {@render type_list(`Recognized types:`)}
+        {:else}
+          <p class="placeholder-title">Click or drag a data node to visualize it</p>
+          <p class="placeholder-sub">
+            Found {renderable_paths.size} renderable item{renderable_paths.size === 1
+              ? ``
+              : `s`}. Click to render, or drag to an edge to create a split view.
+          </p>
+          <div
+            style="margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;"
+          >
+            {#each [...renderable_paths] as [data_path, info] (data_path)}
+              <button
+                type="button"
+                class="renderable-chip"
+                style="background: {type_color(info.type)}22; border: 1px solid {type_color(
+                  info.type,
+                )}66;"
+                onclick={() => {
+                  const clean_path = strip_type_suffix(data_path)
+                  const val = resolve_path(value, clean_path)
+                  if (val !== undefined) {
+                    replace_or_add_panel(clean_path, info.type, val)
+                  }
+                }}
+              >
+                <span class="chip-dot" style="background: {type_color(info.type)};"></span>
+                {info.label}: <code>{strip_type_suffix(data_path) || `root`}</code>
+              </button>
+            {/each}
+          </div>
+          {@render type_list(`All recognized types:`, `margin-top: 20px`)}
+        {/if}
+      </div>
+    {:else}
+      <!-- Panel layout -->
+      <div
+        class="panel-container"
+        class:vertical={layout_direction === `vertical`}
+        class:horizontal={layout_direction === `horizontal`}
+      >
+        {#each panels as panel, idx (panel.id)}
+          {#if idx > 0 && split_directions[idx - 1]}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              class="split-divider"
+              class:vertical={split_directions[idx - 1] === `vertical`}
+              class:horizontal={split_directions[idx - 1] === `horizontal`}
+              class:active={split_dragging_idx === idx - 1}
+              onmousedown={(event) => on_split_divider_mousedown(event, idx - 1)}
+            ></div>
+          {/if}
+          <div class="viz-panel" style="flex: {panel_sizes[idx] ?? 1}">
+            <div class="panel-mount" id={panel.id}></div>
+            <!-- Panel label -->
+            <div class="panel-label" style="background: {TYPE_COLORS[panel.detected_type]}cc;">
+              {TYPE_LABELS[panel.detected_type]}: {strip_type_suffix(panel.data_path)}
+            </div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+
+    <!-- Drop zone overlay -->
+    {#if drop_zone && drop_zone !== `center`}
+      <div class="drop-indicator {drop_zone}"></div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .json-browser {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    background: var(--vscode-editor-background, #1e1e1e);
+    color: var(--vscode-editor-foreground, #d4d4d4);
+  }
+  .json-browser.dragging {
+    user-select: none;
+  }
+  .sidebar {
+    flex-shrink: 0;
+    min-width: 150px;
+    max-width: 60%;
+    overflow: auto;
+    padding: 4px;
+  }
+  .divider {
+    width: 5px;
+    flex-shrink: 0;
+    background: var(--vscode-panel-border, rgba(255, 255, 255, 0.1));
+    cursor: col-resize;
+    transition: background 0.15s;
+  }
+  .divider:hover,
+  .json-browser.dragging .sidebar-divider {
+    background: var(--vscode-focusBorder, #007fd4);
+  }
+  .canvas {
+    flex: 1;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    min-width: 200px;
+  }
+  /* === Panel layout === */
+  .panel-container {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+  .panel-container.vertical {
+    flex-direction: column;
+  }
+  .panel-container.horizontal {
+    flex-direction: row;
+  }
+  .viz-panel {
+    position: relative;
+    overflow: hidden;
+    min-width: 100px;
+    min-height: 80px;
+  }
+  .panel-mount {
+    width: 100%;
+    height: 100%;
+  }
+  .panel-label {
+    position: absolute;
+    bottom: 4px;
+    left: 4px;
+    z-index: 10;
+    font-size: 10px;
+    padding: 2px 6px;
+    border-radius: 3px;
+    color: white;
+    opacity: 0.7;
+    pointer-events: none;
+    white-space: nowrap;
+    max-width: calc(100% - 16px);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  /* === Split dividers === */
+  .split-divider {
+    flex-shrink: 0;
+    background: var(--vscode-panel-border, rgba(255, 255, 255, 0.15));
+    transition: background 0.15s;
+    z-index: 5;
+  }
+  .split-divider.vertical {
+    height: 5px;
+    cursor: row-resize;
+  }
+  .split-divider.horizontal {
+    width: 5px;
+    cursor: col-resize;
+  }
+  .split-divider:hover,
+  .split-divider.active {
+    background: var(--vscode-focusBorder, #007fd4);
+  }
+  /* === Drop zone indicators === */
+  .drop-indicator {
+    position: absolute;
+    background: rgba(0, 127, 212, 0.25);
+    border: 2px solid var(--vscode-focusBorder, #007fd4);
+    z-index: 20;
+    pointer-events: none;
+    transition: all 0.1s;
+  }
+  .drop-indicator.top {
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 40%;
+  }
+  .drop-indicator.bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 40%;
+  }
+  .drop-indicator.left {
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 40%;
+  }
+  .drop-indicator.right {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 40%;
+  }
+  /* === Placeholder === */
+  .placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    opacity: 0.8;
+    padding: 2rem;
+    text-align: center;
+  }
+  .placeholder-title {
+    font-size: 16px;
+    margin-bottom: 8px;
+    font-weight: 500;
+  }
+  .placeholder-sub {
+    font-size: 13px;
+    opacity: 0.65;
+    max-width: 400px;
+    line-height: 1.5;
+  }
+  .type-list {
+    margin-top: 16px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    justify-content: center;
+    align-items: center;
+  }
+  .type-list-header {
+    width: 100%;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    opacity: 0.5;
+    margin-bottom: 4px;
+  }
+  .type-tag {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 3px 8px;
+    border-radius: 10px;
+    font-size: 11px;
+    border: 1px solid;
+    opacity: 0.7;
+  }
+  .renderable-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: 12px;
+    font-size: 12px;
+    cursor: pointer;
+    color: inherit;
+    transition: opacity 0.15s;
+  }
+  .renderable-chip:hover {
+    opacity: 0.8;
+  }
+  .renderable-chip code {
+    font-size: 11px;
+    opacity: 0.8;
+  }
+  .chip-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+  }
+  /* Badges are injected imperatively — use :global so Svelte doesn't strip the rule */
+  :global(.renderable-badge) {
+    font-size: 9px;
+    padding: 1px 4px;
+    margin-left: 4px;
+    border-radius: 3px;
+    color: white;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: grab;
+    flex-shrink: 0;
+  }
+</style>