@nuforge/editor 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 nuforge authors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,693 @@
+'use strict';
+
+var t = require('@nuforge/types');
+var parser = require('@nuforge/parser');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var t__namespace = /*#__PURE__*/_interopNamespaceDefault(t);
+
+function lit(value) {
+    return t__namespace.literal({ value });
+}
+function text(value) {
+    return t__namespace.tagTemplate({
+        tag: 'text',
+        props: { text: lit(value) },
+        children: [],
+    });
+}
+function el(tag, props = {}, children = []) {
+    return t__namespace.tagTemplate({ tag, props, children });
+}
+
+function defineBlock(block) {
+    return block;
+}
+class BlockRegistry {
+    blocks = new Map();
+    constructor(initial = []) {
+        for (const block of initial) {
+            this.register(block);
+        }
+    }
+    register(block) {
+        this.blocks.set(block.id, block);
+    }
+    get(id) {
+        return this.blocks.get(id);
+    }
+    all() {
+        return [...this.blocks.values()];
+    }
+    byCategory() {
+        const out = {};
+        for (const block of this.blocks.values()) {
+            const key = block.category ?? 'Elements';
+            (out[key] ??= []).push(block);
+        }
+        return out;
+    }
+}
+const DEFAULT_BLOCKS = [
+    { id: 'box', label: 'Box', icon: 'square', create: () => el('div') },
+    { id: 'text', label: 'Text', icon: 'type', create: () => text('Text') },
+    {
+        id: 'heading',
+        label: 'Heading',
+        icon: 'heading',
+        create: () => el('h2', {}, [text('Heading')]),
+    },
+    {
+        id: 'paragraph',
+        label: 'Paragraph',
+        icon: 'pilcrow',
+        create: () => el('p', {}, [text('Paragraph text')]),
+    },
+    {
+        id: 'button',
+        label: 'Button',
+        icon: 'mouse-pointer-click',
+        create: () => el('button', {}, [text('Button')]),
+    },
+    {
+        id: 'container',
+        label: 'Container',
+        icon: 'box',
+        create: () => el('section', {}, [el('h3', {}, [text('Section')])]),
+    },
+];
+
+class CommandRegistry {
+    editor;
+    commands = new Map();
+    constructor(editor) {
+        this.editor = editor;
+    }
+    register(command) {
+        this.commands.set(command.id, command);
+    }
+    get(id) {
+        return this.commands.get(id);
+    }
+    all() {
+        return [...this.commands.values()];
+    }
+    run(id) {
+        this.commands.get(id)?.run(this.editor);
+    }
+}
+
+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';
+}
+function templateLabel(node) {
+    if (node instanceof t__namespace.TagTemplate) {
+        return node.tag;
+    }
+    if (node instanceof t__namespace.ComponentTemplate) {
+        return node.component.name;
+    }
+    if (node instanceof t__namespace.SlotTemplate) {
+        return node.name ? `slot: ${node.name}` : 'slot';
+    }
+    if (t__namespace.is(node, t__namespace.FragmentTemplate)) {
+        return 'fragment';
+    }
+    return 'node';
+}
+function templateChildren(node) {
+    return (node.children ?? []).filter((child) => child instanceof t__namespace.Type);
+}
+function isTextTemplate(node) {
+    return node instanceof t__namespace.TagTemplate && node.tag === 'text';
+}
+function textPreview(node) {
+    if (!isTextTemplate(node)) {
+        return null;
+    }
+    const expr = node.props.text;
+    if (expr instanceof t__namespace.Literal) {
+        return String(expr.value);
+    }
+    return '{…}';
+}
+function canHaveChildren(node) {
+    if (!node || isTextTemplate(node)) {
+        return false;
+    }
+    return (node instanceof t__namespace.TagTemplate ||
+        node instanceof t__namespace.ComponentTemplate ||
+        t__namespace.is(node, t__namespace.FragmentTemplate));
+}
+function isAncestorOf(nu, ancestor, node) {
+    let parent = nu.getParentNode(node);
+    while (parent) {
+        if (parent === ancestor) {
+            return true;
+        }
+        parent = nu.getParentNode(parent);
+    }
+    return false;
+}
+
+class Editor {
+    nu;
+    blocks;
+    commands;
+    constructor(nu, opts = {}) {
+        this.nu = nu;
+        const base = opts.defaultBlocks === false ? [] : DEFAULT_BLOCKS;
+        this.blocks = new BlockRegistry([...base, ...(opts.blocks ?? [])]);
+        this.commands = new CommandRegistry(this);
+        this.commands.register({
+            id: 'undo',
+            label: 'Undo',
+            shortcut: 'mod+z',
+            run: (e) => e.nu.undo(),
+        });
+        this.commands.register({
+            id: 'redo',
+            label: 'Redo',
+            shortcut: 'mod+shift+z',
+            run: (e) => e.nu.redo(),
+        });
+    }
+    insertNode(parent, child, index) {
+        const kids = parent.children;
+        if (!Array.isArray(kids)) {
+            return;
+        }
+        this.nu.change(() => {
+            if (index === undefined || index >= kids.length) {
+                kids.push(child);
+            }
+            else {
+                kids.splice(Math.max(0, index), 0, child);
+            }
+        });
+    }
+    removeNode(node) {
+        let ok = false;
+        this.nu.change(() => {
+            ok = this.spliceFromParent(node);
+        });
+        return ok;
+    }
+    moveNode(dragged, target, position) {
+        if (dragged === target || isAncestorOf(this.nu, dragged, target)) {
+            return false;
+        }
+        let ok = false;
+        this.nu.change(() => {
+            ok = this.applyMove(dragged, target, position);
+        });
+        return ok;
+    }
+    clipboardNode = null;
+    copyNode(node) {
+        this.clipboardNode = node;
+    }
+    cutNode(node) {
+        this.copyNode(node);
+        return this.removeNode(node);
+    }
+    canPaste() {
+        return this.clipboardNode !== null;
+    }
+    pasteNode(target, position = 'after') {
+        if (!this.clipboardNode) {
+            return null;
+        }
+        return this.insertCloneRelativeTo(this.clipboardNode, target, position);
+    }
+    duplicateNode(node) {
+        return this.insertCloneRelativeTo(node, node, 'after');
+    }
+    insertNodeAt(node, target, position) {
+        let ok = false;
+        this.nu.change(() => {
+            ok = this.insertRelativeTo(node, target, position);
+        });
+        return ok ? (this.nu.getNodeFromId(node.id) ?? null) : null;
+    }
+    insertBlockAt(blockId, target, position) {
+        const block = this.blocks.get(blockId);
+        if (!block) {
+            return null;
+        }
+        return this.insertNodeAt(block.create(), target, position);
+    }
+    insertCloneRelativeTo(source, target, position) {
+        const clone = t__namespace.clone(source, { replaceExistingId: true });
+        let ok = false;
+        this.nu.change(() => {
+            ok = this.insertRelativeTo(clone, target, position);
+        });
+        return ok ? (this.nu.getNodeFromId(clone.id) ?? null) : null;
+    }
+    updateProps(node, props) {
+        this.nu.change(() => {
+            for (const [key, value] of Object.entries(props)) {
+                node.props[key] = value;
+            }
+        });
+    }
+    setProp(node, key, expr) {
+        this.nu.change(() => {
+            node.props[key] = expr;
+        });
+    }
+    removeProp(node, key) {
+        this.nu.change(() => {
+            delete node.props[key];
+        });
+    }
+    setExpression(node, key, source) {
+        let expr;
+        try {
+            expr = parser.Parser.parseExpression(source);
+        }
+        catch {
+            return false;
+        }
+        this.setProp(node, key, expr);
+        return true;
+    }
+    setText(node, value) {
+        const expr = node.props?.text;
+        if (!(expr instanceof t__namespace.Literal)) {
+            return false;
+        }
+        this.nu.change(() => {
+            expr.value = value;
+        });
+        return true;
+    }
+    setTag(node, tag) {
+        const clean = tag.trim();
+        if (!clean) {
+            return;
+        }
+        this.nu.change(() => {
+            node.tag = clean;
+        });
+    }
+    addClass(node, name) {
+        const clean = name.trim();
+        if (!clean) {
+            return;
+        }
+        this.nu.change(() => {
+            const tag = node;
+            if (!tag.classList) {
+                tag.classList = t__namespace.objectExpression({ properties: {} });
+            }
+            tag.classList.properties[clean] = t__namespace.literal({ value: true });
+        });
+    }
+    setClassCondition(node, name, source) {
+        let expr;
+        try {
+            expr = parser.Parser.parseExpression(source);
+        }
+        catch {
+            return false;
+        }
+        this.nu.change(() => {
+            const tag = node;
+            if (tag.classList) {
+                tag.classList.properties[name] = expr;
+            }
+        });
+        return true;
+    }
+    removeClass(node, name) {
+        this.nu.change(() => {
+            const tag = node;
+            if (!tag.classList) {
+                return;
+            }
+            delete tag.classList.properties[name];
+            if (Object.keys(tag.classList.properties).length === 0) {
+                tag.classList = null;
+            }
+        });
+    }
+    setCondition(node, source) {
+        let expr;
+        try {
+            expr = parser.Parser.parseExpression(source);
+        }
+        catch {
+            return false;
+        }
+        this.nu.change(() => {
+            node.if = expr;
+        });
+        return true;
+    }
+    clearCondition(node) {
+        this.nu.change(() => {
+            node.if = null;
+        });
+    }
+    setEach(node, iterator, alias = 'item', indexName) {
+        let expr;
+        try {
+            expr = parser.Parser.parseExpression(iterator);
+        }
+        catch {
+            return false;
+        }
+        this.nu.change(() => {
+            node.each = t__namespace.elementEach({
+                alias: t__namespace.elementEachAlias({ name: alias || 'item' }),
+                index: indexName ? t__namespace.elementEachIndex({ name: indexName }) : null,
+                iterator: expr,
+            });
+        });
+        return true;
+    }
+    clearEach(node) {
+        this.nu.change(() => {
+            node.each = null;
+        });
+    }
+    addState(component, name = 'value', init = '0') {
+        const taken = new Set(component.state.map((v) => v.name));
+        let unique = name;
+        let i = 2;
+        while (taken.has(unique)) {
+            unique = `${name}${i}`;
+            i += 1;
+        }
+        let initExpr;
+        try {
+            initExpr = parser.Parser.parseExpression(init);
+        }
+        catch {
+            initExpr = t__namespace.literal({ value: 0 });
+        }
+        this.nu.change(() => {
+            component.state.push(t__namespace.val({ name: unique, init: initExpr }));
+        });
+        return component.state.find((v) => v.name === unique);
+    }
+    removeState(component, val) {
+        this.nu.change(() => {
+            const i = component.state.findIndex((v) => v.id === val.id);
+            if (i >= 0) {
+                component.state.splice(i, 1);
+            }
+        });
+    }
+    setStateInit(val, source) {
+        let expr;
+        try {
+            expr = parser.Parser.parseExpression(source);
+        }
+        catch {
+            return false;
+        }
+        this.nu.change(() => {
+            val.init = expr;
+        });
+        return true;
+    }
+    addComponentProp(component, name = 'prop', init) {
+        const taken = new Set(component.props.map((p) => p.name));
+        let unique = name;
+        let i = 2;
+        while (taken.has(unique)) {
+            unique = `${name}${i}`;
+            i += 1;
+        }
+        let initExpr;
+        if (init) {
+            try {
+                initExpr = parser.Parser.parseExpression(init);
+            }
+            catch {
+                initExpr = undefined;
+            }
+        }
+        this.nu.change(() => {
+            component.props.push(t__namespace.componentProp({ name: unique, init: initExpr }));
+        });
+        return component.props.find((p) => p.name === unique);
+    }
+    removeComponentProp(component, prop) {
+        this.nu.change(() => {
+            const i = component.props.findIndex((p) => p.id === prop.id);
+            if (i >= 0) {
+                component.props.splice(i, 1);
+            }
+        });
+    }
+    setComponentPropInit(prop, source) {
+        let expr;
+        try {
+            expr = parser.Parser.parseExpression(source);
+        }
+        catch {
+            return false;
+        }
+        this.nu.change(() => {
+            prop.init = expr;
+        });
+        return true;
+    }
+    insertBlock(blockId, parent, index) {
+        const block = this.blocks.get(blockId);
+        if (!block || !canHaveChildren(parent)) {
+            return null;
+        }
+        const created = block.create();
+        this.insertNode(parent, created, index);
+        return created;
+    }
+    uniqueName(base) {
+        const taken = new Set(this.getComponents().map((c) => c.name));
+        if (!taken.has(base)) {
+            return base;
+        }
+        let i = 2;
+        while (taken.has(`${base}${i}`)) {
+            i += 1;
+        }
+        return `${base}${i}`;
+    }
+    addComponent(name = 'Page') {
+        const unique = this.uniqueName(name);
+        const component = t__namespace.nuComponent({
+            name: unique,
+            props: [],
+            state: [],
+            template: el('div', {}, [text(unique)]),
+        });
+        this.nu.change(() => {
+            this.nu.state.program.components.push(component);
+        });
+        return this.getComponent(unique);
+    }
+    renameComponent(component, name) {
+        const clean = name.trim();
+        if (!clean ||
+            this.getComponents().some((c) => c !== component && c.name === clean)) {
+            return false;
+        }
+        const old = component.name;
+        this.nu.change(() => {
+            component.name = clean;
+            for (const c of this.getComponents()) {
+                this.walkTemplates(c.template, (tpl) => {
+                    if (tpl instanceof t__namespace.ComponentTemplate && tpl.component.name === old) {
+                        tpl.component.name = clean;
+                    }
+                });
+            }
+        });
+        return true;
+    }
+    removeComponent(component) {
+        const comps = this.nu.state.program.components;
+        let ok = false;
+        this.nu.change(() => {
+            const i = comps.findIndex((c) => c.id === component.id);
+            if (i >= 0) {
+                comps.splice(i, 1);
+                ok = true;
+            }
+        });
+        return ok;
+    }
+    duplicateComponent(component) {
+        const copy = t__namespace.clone(component, { replaceExistingId: true });
+        const name = this.uniqueName(`${component.name}Copy`);
+        copy.name = name;
+        this.nu.change(() => {
+            this.nu.state.program.components.push(copy);
+        });
+        return this.getComponent(name);
+    }
+    walkTemplates(node, fn) {
+        if (!node) {
+            return;
+        }
+        fn(node);
+        for (const child of templateChildren(node)) {
+            this.walkTemplates(child, fn);
+        }
+    }
+    getComponents() {
+        return this.nu.state.program.components.filter((c) => c instanceof t__namespace.NuComponent);
+    }
+    getComponent(name) {
+        return this.getComponents().find((c) => c.name === name);
+    }
+    getRootTemplate(name) {
+        return this.getComponent(name)?.template ?? null;
+    }
+    getChildren(node) {
+        return templateChildren(node);
+    }
+    getSiblings(node) {
+        const parent = this.nu.getParentNode(node);
+        return parent ? templateChildren(parent) : [];
+    }
+    getNodeIndex(node) {
+        return this.getSiblings(node).indexOf(node);
+    }
+    getNodePath(node) {
+        const out = [];
+        let current = node;
+        let loc = this.nu.getNodeLocation(current);
+        while (loc && loc.parent !== current) {
+            out.unshift(...loc.path);
+            current = loc.parent;
+            loc = this.nu.getNodeLocation(current);
+        }
+        return out;
+    }
+    onChange(cb) {
+        return this.nu.listenToMutations(cb);
+    }
+    onStructureChange(cb) {
+        return this.nu.listenToMutations((entries) => {
+            if (entries.some((e) => Array.isArray(e.target))) {
+                cb();
+            }
+        });
+    }
+    spliceFromParent(node) {
+        const parent = this.nu.getParentNode(node);
+        const kids = parent?.children;
+        if (!Array.isArray(kids)) {
+            return false;
+        }
+        const index = kids.indexOf(node);
+        if (index < 0) {
+            return false;
+        }
+        kids.splice(index, 1);
+        return true;
+    }
+    applyMove(dragged, target, position) {
+        const oldParent = this.nu.getParentNode(dragged);
+        const oldKids = oldParent?.children;
+        if (!Array.isArray(oldKids)) {
+            return false;
+        }
+        if (position === 'inside') {
+            if (!canHaveChildren(target)) {
+                return false;
+            }
+            const destKids = target.children;
+            const oi = oldKids.indexOf(dragged);
+            if (oi >= 0) {
+                oldKids.splice(oi, 1);
+            }
+            destKids.push(dragged);
+            return true;
+        }
+        const newParent = this.nu.getParentNode(target);
+        const destKids = newParent?.children;
+        if (!Array.isArray(destKids)) {
+            return false;
+        }
+        const oi = oldKids.indexOf(dragged);
+        if (oi >= 0) {
+            oldKids.splice(oi, 1);
+        }
+        let ti = destKids.indexOf(target);
+        if (ti < 0) {
+            ti = destKids.length - 1;
+        }
+        destKids.splice(position === 'after' ? ti + 1 : ti, 0, dragged);
+        return true;
+    }
+    insertRelativeTo(node, target, position) {
+        if (position === 'inside') {
+            if (!canHaveChildren(target)) {
+                return false;
+            }
+            target.children.push(node);
+            return true;
+        }
+        const parent = this.nu.getParentNode(target);
+        const kids = parent?.children;
+        if (!Array.isArray(kids)) {
+            return false;
+        }
+        let ti = kids.indexOf(target);
+        if (ti < 0) {
+            ti = kids.length - 1;
+        }
+        kids.splice(position === 'after' ? ti + 1 : ti, 0, node);
+        return true;
+    }
+}
+function createEditor(nu, opts) {
+    return new Editor(nu, opts);
+}
+
+exports.BlockRegistry = BlockRegistry;
+exports.CommandRegistry = CommandRegistry;
+exports.DEFAULT_BLOCKS = DEFAULT_BLOCKS;
+exports.Editor = Editor;
+exports.canHaveChildren = canHaveChildren;
+exports.createEditor = createEditor;
+exports.defineBlock = defineBlock;
+exports.dropPositionFromPointer = dropPositionFromPointer;
+exports.el = el;
+exports.isAncestorOf = isAncestorOf;
+exports.isTextTemplate = isTextTemplate;
+exports.lit = lit;
+exports.templateChildren = templateChildren;
+exports.templateLabel = templateLabel;
+exports.text = text;
+exports.textPreview = textPreview;