@quario/editor

The banded document designer. Takes your quario() instance as a property and hands the edited definition back on every change. Its design surface is the same layout the viewer paints. It sits on @quario/landing, the package the two surface elements share, which a host never imports.

Registering the element

signature

const TAG: 'quario-editor'

Import @quario/editor/register to define the element, or import QuarioEditor and define it yourself.

`QuarioEditor`

A LitElement. Set properties as element properties, not attributes.

Property	Type	Meaning
`schema`	`ReportSchema`	The definition under edit.
`instance`	`Quario`	The instance it plans and renders through.
`functions`	`Record<string, (...args: never[]) => unknown>`	The registry the definition may call.
`data`	`unknown`	Sample data for the preview.
`page`	`EditorPage`	Page geometry.
`fonts`	`EditorFonts`	TrueType families for measurement.
`colorScheme`	`'light'`, `'dark'`, `'auto'`	Chrome only.

signature

get renderComplete(): Promise<boolean>

Events

signature

interface QuarioEditorEventMap {
  change: CustomEvent<EditorChangeDetail>
  error: CustomEvent<EditorErrorDetail>
}

interface EditorChangeDetail {
  schema: ReportSchema
  problems: readonly Problem[]
  warnings: readonly Warning[]
}

interface EditorErrorDetail {
  error: unknown
  kind: 'mount-render' | 'update-render' | 'host-option'
}

Every change carries the edited definition alongside the problems and the warnings the same traversal found. Nothing that gates on problems should gate on warnings: a document carrying only warnings compiles and renders.

Types

signature

type EditorPage = LayoutPage
type EditorFonts = LayoutFonts

@quario/editor

Registering the element

QuarioEditor

Events

Types

The definition, edited in place.

`QuarioEditor`