import { ExpertreeCanvas } from '@expertrees/react'
import type { SkillGraph } from '@expertrees/core'

const graph: SkillGraph = {
  id: 'my-skills',
  label: 'My Skills',
  nodes: [
    { id: 'eng',   label: 'Engineering', depth: 0, childIds: ['fe', 'be'] },
    { id: 'fe',    label: 'Frontend',    depth: 1, parentId: 'eng', childIds: ['react'] },
    { id: 'be',    label: 'Backend',     depth: 1, parentId: 'eng' },
    { id: 'react', label: 'React',       depth: 2, parentId: 'fe' },
  ],
  edges: [],
}

export function App() {
  return (
    <ExpertreeCanvas
      data={graph}
      style={{ width: '100%', height: '600px' }}
      on={{
        'node:click':    node => console.log(node),
        'context:enter': (node, stack) => console.log('entered', node.label),
      }}
    />
  )
}

import { useRef } from 'react'
import { ExpertreeCanvas, type ExpertreeCanvasHandle } from '@expertrees/react'

export function App() {
  const ref = useRef<ExpertreeCanvasHandle>(null)

  return (
    <>
      <ExpertreeCanvas ref={ref} data={graph} style={{ width: '100%', height: '600px' }} />
      <button onClick={() => ref.current?.setNodeState('react', 'unlocked')}>
        Unlock React
      </button>
      <button onClick={() => ref.current?.goBack()}>Back</button>
    </>
  )
}

import { useExpertree } from '@expertrees/react'
import type { SkillGraph } from '@expertrees/core'

declare const graph: SkillGraph

export function SkillMap() {
  const {
    canvasRef,
    hoveredNode,
    selectedNode,
    zoom,
    navigationStack,
    canGoBack,
    goBack,
    jumpToNavDepth,
    setNodeState,
  } = useExpertree({
    data: graph,
    on: { 'node:click': node => console.log(node) },
  })

  return (
    <div style={{ position: 'relative', width: '100%', height: '600px' }}>
      <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />

      {/* Breadcrumbs */}
      <nav style={{ position: 'absolute', top: 8, left: 8 }}>
        {navigationStack.map((frame, i) => (
          <button key={frame.nodeId ?? 'root'} onClick={() => jumpToNavDepth(i + 1)}>
            {frame.label}
          </button>
        ))}
      </nav>

      {/* Side panel */}
      {hoveredNode && (
        <aside style={{ position: 'absolute', right: 0, top: 0 }}>
          <h3>{hoveredNode.label}</h3>
        </aside>
      )}
    </div>
  )
}