@nuforge/editor 0.1.0

package/dist/react.cjs

@@ -0,0 +1,259 @@
+'use client';
+'use strict';
+
+var react$1 = require('@nuforge/react');
+var react = require('react');
+var reactDom = require('react-dom');
+require('@nuforge/types');
+
+function dropPositionFromPointer(clientY, rect, opts = {}) {
+    const ratio = rect.height > 0 ? (clientY - rect.top) / rect.height : 0;
+    if (opts.allowInside) {
+        if (ratio < 0.25)
+            return 'before';
+        if (ratio > 0.75)
+            return 'after';
+        return 'inside';
+    }
+    return ratio < 0.5 ? 'before' : 'after';
+}
+
+const decorate = (view) => ({ 'data-nu-id': view.template?.id });
+const EditorView = react.memo(function EditorView({ view, }) {
+    const renderChildren = (views) => views.map((child) => react.createElement(EditorView, { key: child.key, view: child }));
+    return react$1.createViewElement(view, renderChildren, decorate);
+});
+const EditorFrame = react$1.observer(function EditorFrame({ frame }) {
+    return react.createElement(react.Fragment, null, frame.view.children.map((view) => react.createElement(EditorView, { key: view.key, view })));
+});
+function templateIdFromElement(target) {
+    return (target
+        ?.closest('[data-nu-id]')
+        ?.getAttribute('data-nu-id') ?? null);
+}
+const DEFAULT_CANVAS_CSS = `
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body { margin: 0; }
+  body { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; color: #111; line-height: 1.5; padding: 28px; }
+  h1 { font-size: 2rem; font-weight: 700; margin: .5em 0; }
+  h2 { font-size: 1.5rem; font-weight: 600; margin: .6em 0; }
+  h3 { font-size: 1.2rem; font-weight: 600; margin: .7em 0; }
+  p { margin: .8em 0; }
+  ul { list-style: disc; padding-left: 1.5em; margin: .8em 0; }
+  ol { list-style: decimal; padding-left: 1.5em; margin: .8em 0; }
+  a { color: #2563eb; text-decoration: underline; }
+  button { border: 1px solid #d4d4d8; border-radius: 6px; padding: 4px 12px; background: #fafafa; cursor: pointer; font: inherit; }
+  button:hover { background: #f4f4f5; }
+  input, textarea, select { border: 1px solid #d4d4d8; border-radius: 6px; padding: 4px 8px; font: inherit; }
+  section { display: flex; align-items: center; gap: .75rem; margin: .8em 0; }
+  img { max-width: 100%; }
+  [data-nu-id] { cursor: default; }
+`;
+function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0, onSelect, onHover, onDropOnNode, baseCss = DEFAULT_CANVAS_CSS, srcDoc, className, containerClassName, renderBox, }) {
+    const iframeRef = react.useRef(null);
+    const [doc, setDoc] = react.useState(null);
+    const [tick, setTick] = react.useState(0);
+    const [selected, setSelected] = react.useState(null);
+    const [hovered, setHovered] = react.useState(null);
+    const [selectedLabel, setSelectedLabel] = react.useState(null);
+    const [drop, setDrop] = react.useState(null);
+    react.useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe) {
+            return;
+        }
+        const setup = () => {
+            const d = iframe.contentDocument;
+            if (!d?.body) {
+                return;
+            }
+            if (!d.getElementById('nu-base-style')) {
+                const style = d.createElement('style');
+                style.id = 'nu-base-style';
+                style.textContent = baseCss;
+                d.head.appendChild(style);
+            }
+            setDoc(d);
+        };
+        setup();
+        iframe.addEventListener('load', setup);
+        return () => iframe.removeEventListener('load', setup);
+    }, [baseCss]);
+    react.useEffect(() => {
+        if (!doc) {
+            return;
+        }
+        const onClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onSelect?.(templateIdFromElement(e.target));
+        };
+        const onMove = (e) => onHover?.(templateIdFromElement(e.target));
+        const onLeave = () => onHover?.(null);
+        const onScroll = () => setTick((x) => x + 1);
+        doc.addEventListener('click', onClick, true);
+        doc.addEventListener('mousemove', onMove);
+        doc.addEventListener('mouseleave', onLeave);
+        doc.addEventListener('scroll', onScroll, true);
+        return () => {
+            doc.removeEventListener('click', onClick, true);
+            doc.removeEventListener('mousemove', onMove);
+            doc.removeEventListener('mouseleave', onLeave);
+            doc.removeEventListener('scroll', onScroll, true);
+        };
+    }, [doc, onSelect, onHover]);
+    react.useEffect(() => {
+        if (!doc || !onDropOnNode) {
+            return;
+        }
+        const rectFor = (id) => {
+            const el = doc.querySelector(`[data-nu-id="${id}"]`);
+            return el?.getBoundingClientRect() ?? null;
+        };
+        const onDragOver = (ev) => {
+            const e = ev;
+            const id = templateIdFromElement(e.target);
+            const r = id ? rectFor(id) : null;
+            if (!id || !r) {
+                setDrop(null);
+                return;
+            }
+            e.preventDefault();
+            setDrop({
+                rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+                position: dropPositionFromPointer(e.clientY, r, { allowInside: true }),
+            });
+        };
+        const onDropEvent = (ev) => {
+            const e = ev;
+            e.preventDefault();
+            const id = templateIdFromElement(e.target);
+            const r = id ? rectFor(id) : null;
+            if (id && r) {
+                onDropOnNode(id, dropPositionFromPointer(e.clientY, r, { allowInside: true }), e);
+            }
+            setDrop(null);
+        };
+        const onDragLeave = () => setDrop(null);
+        doc.addEventListener('dragover', onDragOver);
+        doc.addEventListener('drop', onDropEvent);
+        doc.addEventListener('dragleave', onDragLeave);
+        return () => {
+            doc.removeEventListener('dragover', onDragOver);
+            doc.removeEventListener('drop', onDropEvent);
+            doc.removeEventListener('dragleave', onDragLeave);
+        };
+    }, [doc, onDropOnNode]);
+    react.useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe) {
+            return;
+        }
+        const observer = new ResizeObserver(() => setTick((x) => x + 1));
+        observer.observe(iframe);
+        if (doc?.documentElement) {
+            observer.observe(doc.documentElement);
+        }
+        return () => observer.disconnect();
+    }, [doc]);
+    const rectOf = (id) => {
+        if (!doc || !id) {
+            return null;
+        }
+        const el = doc.querySelector(`[data-nu-id="${id}"]`);
+        if (!el) {
+            return null;
+        }
+        const r = el.getBoundingClientRect();
+        return { top: r.top, left: r.left, width: r.width, height: r.height };
+    };
+    const labelOf = (id) => {
+        if (!doc || !id) {
+            return null;
+        }
+        const el = doc.querySelector(`[data-nu-id="${id}"]`);
+        return el ? el.tagName.toLowerCase() : null;
+    };
+    react.useLayoutEffect(() => {
+        setSelected(rectOf(selectedId));
+        setHovered(hoveredId && hoveredId !== selectedId ? rectOf(hoveredId) : null);
+        setSelectedLabel(labelOf(selectedId));
+    }, [selectedId, hoveredId, revision, tick, doc]);
+    return react.createElement('div', { className: containerClassName, style: { position: 'relative' } }, react.createElement('iframe', { ref: iframeRef, title: 'nuforge preview', className, srcDoc }, doc?.body
+        ? reactDom.createPortal(react.createElement(EditorFrame, { frame }), doc.body)
+        : null), renderBox
+        ? react.createElement('div', {
+            style: {
+                position: 'absolute',
+                inset: 0,
+                pointerEvents: 'none',
+                overflow: 'hidden',
+            },
+        }, renderBox({ selected, hovered, selectedLabel, drop }))
+        : null);
+}
+function useStructureRevision(editor) {
+    const [rev, setRev] = react.useState(0);
+    react.useEffect(() => editor.onStructureChange(() => setRev((r) => r + 1)), [editor]);
+    return rev;
+}
+function useEditorRevision(editor) {
+    const [rev, setRev] = react.useState(0);
+    react.useEffect(() => editor.onChange(() => setRev((r) => r + 1)), [editor]);
+    return rev;
+}
+function PropFields({ fields, values, onChange, className, }) {
+    return react.createElement('div', { className, 'data-nu-propfields': '' }, fields.map((field) => react.createElement(PropFieldControl, {
+        key: field.name,
+        field,
+        value: values[field.name],
+        onChange,
+    })));
+}
+function PropFieldControl({ field, value, onChange, }) {
+    const id = `nu-field-${field.name}`;
+    const label = field.label ?? field.name;
+    let control;
+    switch (field.type) {
+        case 'boolean':
+            control = react.createElement('input', {
+                id,
+                type: 'checkbox',
+                checked: Boolean(value),
+                onChange: (e) => onChange(field.name, e.target.checked),
+            });
+            break;
+        case 'number':
+            control = react.createElement('input', {
+                id,
+                type: 'number',
+                value: value === undefined ? '' : Number(value),
+                onChange: (e) => onChange(field.name, e.target.valueAsNumber),
+            });
+            break;
+        case 'enum':
+            control = react.createElement('select', {
+                id,
+                value: value === undefined ? '' : String(value),
+                onChange: (e) => onChange(field.name, e.target.value),
+            }, (field.options ?? []).map((opt) => react.createElement('option', { key: opt, value: opt }, opt)));
+            break;
+        default:
+            control = react.createElement('input', {
+                id,
+                type: 'text',
+                value: value === undefined ? '' : String(value),
+                placeholder: field.type === 'expression' ? 'expression' : undefined,
+                onChange: (e) => onChange(field.name, e.target.value),
+            });
+    }
+    return react.createElement('label', { htmlFor: id, 'data-nu-field': field.name }, react.createElement('span', null, label), control);
+}
+
+exports.DEFAULT_CANVAS_CSS = DEFAULT_CANVAS_CSS;
+exports.EditorFrame = EditorFrame;
+exports.IframeCanvas = IframeCanvas;
+exports.PropFields = PropFields;
+exports.templateIdFromElement = templateIdFromElement;
+exports.useEditorRevision = useEditorRevision;
+exports.useStructureRevision = useStructureRevision;

package/dist/react.d.ts

@@ -0,0 +1,155 @@
+import { Nu, Frame } from '@nuforge/core';
+import { ReactNode } from 'react';
+import * as t from '@nuforge/types';
+import { MutationEntry } from '@nuforge/reactivity';
+
+interface PropSchemaField {
+    name: string;
+    type: 'string' | 'number' | 'boolean' | 'expression' | 'enum';
+    label?: string;
+    default?: string | number | boolean;
+    options?: string[];
+}
+interface Block {
+    id: string;
+    label: string;
+    icon?: string;
+    category?: string;
+    create: () => t.Template;
+    props?: PropSchemaField[];
+}
+declare class BlockRegistry {
+    private readonly blocks;
+    constructor(initial?: Block[]);
+    register(block: Block): void;
+    get(id: string): Block | undefined;
+    all(): Block[];
+    byCategory(): Record<string, Block[]>;
+}
+
+interface Command {
+    id: string;
+    label: string;
+    shortcut?: string;
+    run: (editor: Editor) => void;
+}
+declare class CommandRegistry {
+    private readonly editor;
+    private readonly commands;
+    constructor(editor: Editor);
+    register(command: Command): void;
+    get(id: string): Command | undefined;
+    all(): Command[];
+    run(id: string): void;
+}
+
+type DropPosition = 'before' | 'after' | 'inside';
+
+interface CreateEditorOptions {
+    blocks?: Block[];
+    defaultBlocks?: boolean;
+}
+declare class Editor {
+    readonly nu: Nu;
+    readonly blocks: BlockRegistry;
+    readonly commands: CommandRegistry;
+    constructor(nu: Nu, opts?: CreateEditorOptions);
+    insertNode(parent: t.Template, child: t.Template, index?: number): void;
+    removeNode(node: t.Template): boolean;
+    moveNode(dragged: t.Template, target: t.Template, position: DropPosition): boolean;
+    private clipboardNode;
+    copyNode(node: t.Template): void;
+    cutNode(node: t.Template): boolean;
+    canPaste(): boolean;
+    pasteNode(target: t.Template, position?: DropPosition): t.Template | null;
+    duplicateNode(node: t.Template): t.Template | null;
+    insertNodeAt(node: t.Template, target: t.Template, position: DropPosition): t.Template | null;
+    insertBlockAt(blockId: string, target: t.Template, position: DropPosition): t.Template | null;
+    private insertCloneRelativeTo;
+    updateProps(node: t.Template, props: Record<string, t.Expression>): void;
+    setProp(node: t.Template, key: string, expr: t.Expression): void;
+    removeProp(node: t.Template, key: string): void;
+    setExpression(node: t.Template, key: string, source: string): boolean;
+    setText(node: t.Template, value: string): boolean;
+    setTag(node: t.TagTemplate, tag: string): void;
+    addClass(node: t.Template, name: string): void;
+    setClassCondition(node: t.Template, name: string, source: string): boolean;
+    removeClass(node: t.Template, name: string): void;
+    setCondition(node: t.Template, source: string): boolean;
+    clearCondition(node: t.Template): void;
+    setEach(node: t.Template, iterator: string, alias?: string, indexName?: string): boolean;
+    clearEach(node: t.Template): void;
+    addState(component: t.NuComponent, name?: string, init?: string): t.Val;
+    removeState(component: t.NuComponent, val: t.Val): void;
+    setStateInit(val: t.Val, source: string): boolean;
+    addComponentProp(component: t.NuComponent, name?: string, init?: string): t.ComponentProp;
+    removeComponentProp(component: t.NuComponent, prop: t.ComponentProp): void;
+    setComponentPropInit(prop: t.ComponentProp, source: string): boolean;
+    insertBlock(blockId: string, parent: t.Template, index?: number): t.Template | null;
+    private uniqueName;
+    addComponent(name?: string): t.NuComponent;
+    renameComponent(component: t.NuComponent, name: string): boolean;
+    removeComponent(component: t.NuComponent): boolean;
+    duplicateComponent(component: t.NuComponent): t.NuComponent;
+    private walkTemplates;
+    getComponents(): t.NuComponent[];
+    getComponent(name: string): t.NuComponent | undefined;
+    getRootTemplate(name: string): t.Template | null;
+    getChildren(node: t.Template): t.Template[];
+    getSiblings(node: t.Template): t.Template[];
+    getNodeIndex(node: t.Template): number;
+    getNodePath(node: t.Type): Array<string | number>;
+    onChange(cb: (entries: MutationEntry[]) => void): () => void;
+    onStructureChange(cb: () => void): () => void;
+    private spliceFromParent;
+    private applyMove;
+    private insertRelativeTo;
+}
+
+interface Rect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+declare const EditorFrame: (props: {
+    frame: Frame;
+}) => ReactNode;
+declare function templateIdFromElement(target: EventTarget | null): string | null;
+declare const DEFAULT_CANVAS_CSS = "\n  *, *::before, *::after { box-sizing: border-box; }\n  html, body { margin: 0; }\n  body { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; color: #111; line-height: 1.5; padding: 28px; }\n  h1 { font-size: 2rem; font-weight: 700; margin: .5em 0; }\n  h2 { font-size: 1.5rem; font-weight: 600; margin: .6em 0; }\n  h3 { font-size: 1.2rem; font-weight: 600; margin: .7em 0; }\n  p { margin: .8em 0; }\n  ul { list-style: disc; padding-left: 1.5em; margin: .8em 0; }\n  ol { list-style: decimal; padding-left: 1.5em; margin: .8em 0; }\n  a { color: #2563eb; text-decoration: underline; }\n  button { border: 1px solid #d4d4d8; border-radius: 6px; padding: 4px 12px; background: #fafafa; cursor: pointer; font: inherit; }\n  button:hover { background: #f4f4f5; }\n  input, textarea, select { border: 1px solid #d4d4d8; border-radius: 6px; padding: 4px 8px; font: inherit; }\n  section { display: flex; align-items: center; gap: .75rem; margin: .8em 0; }\n  img { max-width: 100%; }\n  [data-nu-id] { cursor: default; }\n";
+interface IframeCanvasProps {
+    frame: Frame;
+    selectedId?: string | null;
+    hoveredId?: string | null;
+    revision?: number;
+    onSelect?: (id: string | null) => void;
+    onHover?: (id: string | null) => void;
+    onDropOnNode?: (targetId: string, position: DropPosition, event: DragEvent) => void;
+    baseCss?: string;
+    srcDoc?: string;
+    className?: string;
+    containerClassName?: string;
+    renderBox?: (rects: {
+        selected: Rect | null;
+        hovered: Rect | null;
+        selectedLabel: string | null;
+        drop: {
+            rect: Rect;
+            position: DropPosition;
+        } | null;
+    }) => ReactNode;
+}
+declare function IframeCanvas({ frame, selectedId, hoveredId, revision, onSelect, onHover, onDropOnNode, baseCss, srcDoc, className, containerClassName, renderBox, }: IframeCanvasProps): ReactNode;
+declare function useStructureRevision(editor: Pick<Editor, 'onStructureChange'>): number;
+declare function useEditorRevision(editor: Pick<Editor, 'onChange'>): number;
+type PropFieldValue = string | number | boolean | undefined;
+interface PropFieldsProps {
+    fields: PropSchemaField[];
+    values: Record<string, PropFieldValue>;
+    onChange: (name: string, value: string | number | boolean) => void;
+    className?: string;
+}
+declare function PropFields({ fields, values, onChange, className, }: PropFieldsProps): ReactNode;
+
+export { DEFAULT_CANVAS_CSS, EditorFrame, IframeCanvas, PropFields, templateIdFromElement, useEditorRevision, useStructureRevision };
+export type { IframeCanvasProps, PropFieldValue, PropFieldsProps, Rect };

package/dist/react.mjs

@@ -0,0 +1,251 @@
+'use client';
+import { createViewElement, observer } from '@nuforge/react';
+import { memo, createElement, Fragment, useRef, useState, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import '@nuforge/types';
+
+function dropPositionFromPointer(clientY, rect, opts = {}) {
+    const ratio = rect.height > 0 ? (clientY - rect.top) / rect.height : 0;
+    if (opts.allowInside) {
+        if (ratio < 0.25)
+            return 'before';
+        if (ratio > 0.75)
+            return 'after';
+        return 'inside';
+    }
+    return ratio < 0.5 ? 'before' : 'after';
+}
+
+const decorate = (view) => ({ 'data-nu-id': view.template?.id });
+const EditorView = memo(function EditorView({ view, }) {
+    const renderChildren = (views) => views.map((child) => createElement(EditorView, { key: child.key, view: child }));
+    return createViewElement(view, renderChildren, decorate);
+});
+const EditorFrame = observer(function EditorFrame({ frame }) {
+    return createElement(Fragment, null, frame.view.children.map((view) => createElement(EditorView, { key: view.key, view })));
+});
+function templateIdFromElement(target) {
+    return (target
+        ?.closest('[data-nu-id]')
+        ?.getAttribute('data-nu-id') ?? null);
+}
+const DEFAULT_CANVAS_CSS = `
+  *, *::before, *::after { box-sizing: border-box; }
+  html, body { margin: 0; }
+  body { font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; color: #111; line-height: 1.5; padding: 28px; }
+  h1 { font-size: 2rem; font-weight: 700; margin: .5em 0; }
+  h2 { font-size: 1.5rem; font-weight: 600; margin: .6em 0; }
+  h3 { font-size: 1.2rem; font-weight: 600; margin: .7em 0; }
+  p { margin: .8em 0; }
+  ul { list-style: disc; padding-left: 1.5em; margin: .8em 0; }
+  ol { list-style: decimal; padding-left: 1.5em; margin: .8em 0; }
+  a { color: #2563eb; text-decoration: underline; }
+  button { border: 1px solid #d4d4d8; border-radius: 6px; padding: 4px 12px; background: #fafafa; cursor: pointer; font: inherit; }
+  button:hover { background: #f4f4f5; }
+  input, textarea, select { border: 1px solid #d4d4d8; border-radius: 6px; padding: 4px 8px; font: inherit; }
+  section { display: flex; align-items: center; gap: .75rem; margin: .8em 0; }
+  img { max-width: 100%; }
+  [data-nu-id] { cursor: default; }
+`;
+function IframeCanvas({ frame, selectedId = null, hoveredId = null, revision = 0, onSelect, onHover, onDropOnNode, baseCss = DEFAULT_CANVAS_CSS, srcDoc, className, containerClassName, renderBox, }) {
+    const iframeRef = useRef(null);
+    const [doc, setDoc] = useState(null);
+    const [tick, setTick] = useState(0);
+    const [selected, setSelected] = useState(null);
+    const [hovered, setHovered] = useState(null);
+    const [selectedLabel, setSelectedLabel] = useState(null);
+    const [drop, setDrop] = useState(null);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe) {
+            return;
+        }
+        const setup = () => {
+            const d = iframe.contentDocument;
+            if (!d?.body) {
+                return;
+            }
+            if (!d.getElementById('nu-base-style')) {
+                const style = d.createElement('style');
+                style.id = 'nu-base-style';
+                style.textContent = baseCss;
+                d.head.appendChild(style);
+            }
+            setDoc(d);
+        };
+        setup();
+        iframe.addEventListener('load', setup);
+        return () => iframe.removeEventListener('load', setup);
+    }, [baseCss]);
+    useEffect(() => {
+        if (!doc) {
+            return;
+        }
+        const onClick = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            onSelect?.(templateIdFromElement(e.target));
+        };
+        const onMove = (e) => onHover?.(templateIdFromElement(e.target));
+        const onLeave = () => onHover?.(null);
+        const onScroll = () => setTick((x) => x + 1);
+        doc.addEventListener('click', onClick, true);
+        doc.addEventListener('mousemove', onMove);
+        doc.addEventListener('mouseleave', onLeave);
+        doc.addEventListener('scroll', onScroll, true);
+        return () => {
+            doc.removeEventListener('click', onClick, true);
+            doc.removeEventListener('mousemove', onMove);
+            doc.removeEventListener('mouseleave', onLeave);
+            doc.removeEventListener('scroll', onScroll, true);
+        };
+    }, [doc, onSelect, onHover]);
+    useEffect(() => {
+        if (!doc || !onDropOnNode) {
+            return;
+        }
+        const rectFor = (id) => {
+            const el = doc.querySelector(`[data-nu-id="${id}"]`);
+            return el?.getBoundingClientRect() ?? null;
+        };
+        const onDragOver = (ev) => {
+            const e = ev;
+            const id = templateIdFromElement(e.target);
+            const r = id ? rectFor(id) : null;
+            if (!id || !r) {
+                setDrop(null);
+                return;
+            }
+            e.preventDefault();
+            setDrop({
+                rect: { top: r.top, left: r.left, width: r.width, height: r.height },
+                position: dropPositionFromPointer(e.clientY, r, { allowInside: true }),
+            });
+        };
+        const onDropEvent = (ev) => {
+            const e = ev;
+            e.preventDefault();
+            const id = templateIdFromElement(e.target);
+            const r = id ? rectFor(id) : null;
+            if (id && r) {
+                onDropOnNode(id, dropPositionFromPointer(e.clientY, r, { allowInside: true }), e);
+            }
+            setDrop(null);
+        };
+        const onDragLeave = () => setDrop(null);
+        doc.addEventListener('dragover', onDragOver);
+        doc.addEventListener('drop', onDropEvent);
+        doc.addEventListener('dragleave', onDragLeave);
+        return () => {
+            doc.removeEventListener('dragover', onDragOver);
+            doc.removeEventListener('drop', onDropEvent);
+            doc.removeEventListener('dragleave', onDragLeave);
+        };
+    }, [doc, onDropOnNode]);
+    useEffect(() => {
+        const iframe = iframeRef.current;
+        if (!iframe) {
+            return;
+        }
+        const observer = new ResizeObserver(() => setTick((x) => x + 1));
+        observer.observe(iframe);
+        if (doc?.documentElement) {
+            observer.observe(doc.documentElement);
+        }
+        return () => observer.disconnect();
+    }, [doc]);
+    const rectOf = (id) => {
+        if (!doc || !id) {
+            return null;
+        }
+        const el = doc.querySelector(`[data-nu-id="${id}"]`);
+        if (!el) {
+            return null;
+        }
+        const r = el.getBoundingClientRect();
+        return { top: r.top, left: r.left, width: r.width, height: r.height };
+    };
+    const labelOf = (id) => {
+        if (!doc || !id) {
+            return null;
+        }
+        const el = doc.querySelector(`[data-nu-id="${id}"]`);
+        return el ? el.tagName.toLowerCase() : null;
+    };
+    useLayoutEffect(() => {
+        setSelected(rectOf(selectedId));
+        setHovered(hoveredId && hoveredId !== selectedId ? rectOf(hoveredId) : null);
+        setSelectedLabel(labelOf(selectedId));
+    }, [selectedId, hoveredId, revision, tick, doc]);
+    return createElement('div', { className: containerClassName, style: { position: 'relative' } }, createElement('iframe', { ref: iframeRef, title: 'nuforge preview', className, srcDoc }, doc?.body
+        ? createPortal(createElement(EditorFrame, { frame }), doc.body)
+        : null), renderBox
+        ? createElement('div', {
+            style: {
+                position: 'absolute',
+                inset: 0,
+                pointerEvents: 'none',
+                overflow: 'hidden',
+            },
+        }, renderBox({ selected, hovered, selectedLabel, drop }))
+        : null);
+}
+function useStructureRevision(editor) {
+    const [rev, setRev] = useState(0);
+    useEffect(() => editor.onStructureChange(() => setRev((r) => r + 1)), [editor]);
+    return rev;
+}
+function useEditorRevision(editor) {
+    const [rev, setRev] = useState(0);
+    useEffect(() => editor.onChange(() => setRev((r) => r + 1)), [editor]);
+    return rev;
+}
+function PropFields({ fields, values, onChange, className, }) {
+    return createElement('div', { className, 'data-nu-propfields': '' }, fields.map((field) => createElement(PropFieldControl, {
+        key: field.name,
+        field,
+        value: values[field.name],
+        onChange,
+    })));
+}
+function PropFieldControl({ field, value, onChange, }) {
+    const id = `nu-field-${field.name}`;
+    const label = field.label ?? field.name;
+    let control;
+    switch (field.type) {
+        case 'boolean':
+            control = createElement('input', {
+                id,
+                type: 'checkbox',
+                checked: Boolean(value),
+                onChange: (e) => onChange(field.name, e.target.checked),
+            });
+            break;
+        case 'number':
+            control = createElement('input', {
+                id,
+                type: 'number',
+                value: value === undefined ? '' : Number(value),
+                onChange: (e) => onChange(field.name, e.target.valueAsNumber),
+            });
+            break;
+        case 'enum':
+            control = createElement('select', {
+                id,
+                value: value === undefined ? '' : String(value),
+                onChange: (e) => onChange(field.name, e.target.value),
+            }, (field.options ?? []).map((opt) => createElement('option', { key: opt, value: opt }, opt)));
+            break;
+        default:
+            control = createElement('input', {
+                id,
+                type: 'text',
+                value: value === undefined ? '' : String(value),
+                placeholder: field.type === 'expression' ? 'expression' : undefined,
+                onChange: (e) => onChange(field.name, e.target.value),
+            });
+    }
+    return createElement('label', { htmlFor: id, 'data-nu-field': field.name }, createElement('span', null, label), control);
+}
+
+export { DEFAULT_CANVAS_CSS, EditorFrame, IframeCanvas, PropFields, templateIdFromElement, useEditorRevision, useStructureRevision };