Mount an editor

<script setup lang="ts">
// Vue 3 SFC — the honest minimum: load one node, frame it. Xen is the default theme.
import { XenolithGraph } from '@xenolithengine/graph-vue'
import { buildMount } from '@xenolithengine/demo/mount'
</script>

<template>
  <div class="app" style="position:absolute;inset:0;">
    <XenolithGraph class="xeno" :resize-to-window="false" @ready="buildMount" />
  </div>
</template>

<!-- Svelte 5 — the honest minimum: the use:xenolith action mounts the editor, on:ready hands
     you the live editor for one-shot seed work (register, insert, frame). -->
<script lang="ts">
  import { xenolith } from '@xenolithengine/graph-svelte'
  import { buildMount } from '@xenolithengine/demo/mount'
</script>

<div
  use:xenolith={{ resizeToWindow: false }}
  on:ready={(e) => buildMount(e.detail)}
  style="position:absolute;inset:0"
></div>

// Solid — the honest minimum: the use:xenolith directive mounts the editor; on:ready (colon
// names are native in Solid) hands you the live editor for one-shot seed work.
import { xenolith } from '@xenolithengine/graph-solid'
import { buildMount } from '@xenolithengine/demo/mount'

export function MountDemo() {
  return (
    <div
      use:xenolith={{ resizeToWindow: false }}
      on:ready={(e) => buildMount(e.detail)}
      style="position:absolute;inset:0"
    />
  )
}

// Angular standalone host component — mount. Provides the XenolithGraphService per editor,
// mounts into a #host div from ngAfterViewInit, and does the imperative seed work on the
// resolved editor. The host component is YOURS — compiled by your Angular CLI; the adapter
// ships no components (Angular libraries need ng-packagr partial compilation), only the
// decorator-free service.
import { AfterViewInit, Component, ElementRef, OnDestroy, inject, viewChild } from '@angular/core'
import { XenolithGraphService } from '@xenolithengine/graph-angular'
import { buildMount } from '@xenolithengine/demo/mount'

@Component({
  selector: 'mount-demo',
  standalone: true,
  providers: [XenolithGraphService],
  template: `
    <div class="app" style="position:absolute;inset:0;">
      <div #host class="xeno" style="position:absolute;inset:0;"></div>
    </div>
  `,
})
export class MountDemoComponent implements AfterViewInit, OnDestroy {
  private graph = inject(XenolithGraphService)
  private host = viewChild.required<ElementRef<HTMLDivElement>>('host')

  async ngAfterViewInit(): Promise<void> {
    const editor = await this.graph.mount(this.host().nativeElement, { resizeToWindow: false })
    buildMount(editor)
  }

  ngOnDestroy(): void { this.graph.destroy() }
}