divhunt 2.0.0

package/addons/float/toasts/items/elements/toast/toast.css

@@ -0,0 +1,84 @@
+.e-697495d1
+{
+    pointer-events: auto;
+}
+
+.e-697495d1 .holder
+{
+    display: flex;
+    align-items: flex-start;
+    gap: var(--dh-spacing-s);
+    padding: var(--dh-spacing-m);
+    border-radius: var(--dh-radius-m);
+    background: var(--dh-bg-3);
+    border: 1px solid var(--dh-bg-3-border);
+    min-width: 280px;
+    max-width: 400px;
+}
+
+.e-697495d1 .holder .icon
+{
+    flex-shrink: 0;
+    font-size: var(--dh-size-l);
+    color: var(--dh-text-1);
+}
+
+.e-697495d1 .holder .content
+{
+    flex: 1;
+    min-width: 0;
+}
+
+.e-697495d1 .holder .content .title
+{
+    font-weight: 600;
+    margin-bottom: var(--dh-spacing-x);
+    color: var(--dh-text-1);
+}
+
+.e-697495d1 .holder .content .message
+{
+    font-size: var(--dh-size-s);
+    color: var(--dh-text-2);
+}
+
+.e-697495d1 .holder .close
+{
+    flex-shrink: 0;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    color: var(--dh-text-2);
+    transition: color 0.2s;
+}
+
+.e-697495d1 .holder .close:hover
+{
+    color: var(--dh-text-1);
+}
+
+.e-697495d1 .holder .close .icon
+{
+    font-size: 18px;
+}
+
+.e-697495d1 .holder[variant="success"]
+{
+    border-left: 4px solid var(--dh-green);
+}
+
+.e-697495d1 .holder[variant="error"]
+{
+    border-left: 4px solid var(--dh-red);
+}
+
+.e-697495d1 .holder[variant="warning"]
+{
+    border-left: 4px solid var(--dh-orange);
+}
+
+.e-697495d1 .holder[variant="info"]
+{
+    border-left: 4px solid var(--dh-blue);
+}

package/addons/float/toasts/items/elements/toast/toast.js

@@ -0,0 +1,61 @@
+divhunt.AddonReady('elements', (elements) =>
+{
+    elements.ItemAdd({
+        id: 'toast',
+        icon: 'notifications',
+        name: 'Toast',
+        description: 'Toast notification with type variants and auto-dismiss.',
+        category: 'Feedback',
+        config: {
+            type: {
+                type: 'string',
+                value: 'info',
+                options: ['info', 'success', 'warning', 'error']
+            },
+            title: {
+                type: 'string',
+                value: null
+            },
+            message: {
+                type: 'string',
+                value: ''
+            },
+            icon: {
+                type: 'string',
+                value: null
+            },
+            closeable: {
+                type: 'boolean',
+                value: true
+            },
+            onclose: {
+                type: 'function'
+            }
+        },
+        render: function()
+        {
+            this.handleClose = () =>
+            {
+                if(this.onclose)
+                {
+                    this.onclose();
+                }
+            };
+
+            return `
+                <div class="holder" :variant="type">
+                    <i dh-if="icon" class="icon">{{ icon }}</i>
+
+                    <div class="content">
+                        <div dh-if="title" class="title">{{ title }}</div>
+                        <div dh-if="message" class="message">{{ message }}</div>
+                    </div>
+
+                    <button dh-if="closeable" class="close" dh-click="handleClose">
+                        <i class="icon">close</i>
+                    </button>
+                </div>
+            `;
+        }
+    });
+});

package/addons/float/tooltips/#register/addon.js

@@ -0,0 +1,15 @@
+const tooltips = divhunt.Addon('tooltips', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('target', ['object', null]);
+    addon.Field('text', ['string', '']);
+    addon.Field('title', ['string', null]);
+    addon.Field('icon', ['string', null]);
+    addon.Field('variant', ['string', 'default']);
+    addon.Field('position', ['object', {x: 'center', y: 'top'}]);
+    addon.Field('offset', ['object', {x: 0, y: -4}]);
+    addon.Field('show', ['boolean', true]);
+    addon.Field('overlay', ['object', null]);
+    addon.Field('onOpen', ['function', null]);
+    addon.Field('onClose', ['function', null]);
+});

package/addons/float/tooltips/item/catch/add.js

@@ -0,0 +1,7 @@
+tooltips.ItemOn('add', function(item)
+{
+    if(item.Get('show'))
+    {
+        item.Set('show', true);
+    }
+});

package/addons/float/tooltips/item/catch/remove.js

@@ -0,0 +1,26 @@
+tooltips.ItemOn('remove', function(item)
+{
+    this.overlay = () =>
+    {
+        const overlay = item.Get('overlay');
+
+        if(overlay)
+        {
+            item.Set('overlay', null);
+            overlay.Remove();
+        }
+    };
+
+    this.callback = () =>
+    {
+        const onClose = item.Get('onClose');
+
+        if(onClose)
+        {
+            onClose(item);
+        }
+    };
+
+    this.overlay();
+    this.callback();
+});

package/addons/float/tooltips/item/catch/set.js

@@ -0,0 +1,65 @@
+tooltips.ItemOn('set', function(item, key, value)
+{
+    if(key !== 'show')
+    {
+        return;
+    }
+
+    const overlays = divhunt.Addon('overlays');
+
+    if(value)
+    {
+        if(item.Get('overlay'))
+        {
+            return;
+        }
+
+        const overlay = overlays.Item({
+            id: 'tooltip-' + item.Get('id'),
+            target: item.Get('target'),
+            position: item.Get('position'),
+            offset: item.Get('offset'),
+            onClose: () => item.Set('show', false),
+            render: function()
+            {
+                this.icon = item.Get('icon');
+                this.title = item.Get('title');
+                this.text = item.Get('text');
+                this.variant = item.Get('variant');
+
+                return `<e-tooltip
+                    :icon="icon"
+                    :title="title"
+                    :text="text"
+                    :variant="variant">
+                </e-tooltip>`;
+            }
+        });
+
+        item.Set('overlay', overlay);
+
+        const onOpen = item.Get('onOpen');
+
+        if(onOpen)
+        {
+            onOpen(item);
+        }
+    }
+    else
+    {
+        const overlay = item.Get('overlay');
+
+        if(overlay)
+        {
+            item.Set('overlay', null);
+            overlay.Remove();
+
+            const onClose = item.Get('onClose');
+
+            if(onClose)
+            {
+                onClose(item);
+            }
+        }
+    }
+});

package/addons/float/tooltips/items/directives/tooltip.js

@@ -0,0 +1,74 @@
+divhunt.AddonReady('directives', function(directives)
+{
+    document.addEventListener('mouseover', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhConfig' in node && !node.dhShow)
+            {
+                node.dhShow = true;
+                node.dhItem.Set('show', true);
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+
+    document.addEventListener('mouseout', function(event)
+    {
+        let node = event.target;
+
+        while(node && node !== document)
+        {
+            if('dhConfig' in node && node.dhShow)
+            {
+                if(!node.contains(event.relatedTarget))
+                {
+                    node.dhShow = false;
+                    node.dhItem.Set('show', false);
+                }
+                break;
+            }
+
+            node = node.parentNode;
+        }
+    });
+
+    directives.ItemAdd({
+        id: 'dh-tooltip',
+        icon: 'info',
+        name: 'Tooltip',
+        description: 'Shows tooltip on hover.',
+        trigger: 'node',
+        order: 600,
+        attributes: {
+            'dh-tooltip': ['string|object']
+        },
+        code: function(data, item, compile, node)
+        {
+            const value = data['dh-tooltip'].value;
+            let config = {};
+
+            if(typeof value === 'string')
+            {
+                config.text = value;
+            }
+            else if(typeof value === 'object')
+            {
+                config = value;
+            }
+
+            config.target = node;
+            config.show = false;
+
+            const tooltips = divhunt.Addon('tooltips');
+
+            node.dhConfig = config;
+            node.dhShow = false;
+            node.dhItem = tooltips.Item(config);
+        }
+    });
+});

package/addons/float/tooltips/items/elements/tooltip.css

@@ -0,0 +1,64 @@
+.e-209772d3
+{
+    pointer-events: none;
+}
+
+.e-209772d3 .holder
+{
+    display: flex;
+    align-items: flex-start;
+    gap: var(--dh-spacing-s);
+    padding: var(--dh-spacing-s) var(--dh-spacing-m);
+    border-radius: var(--dh-radius-s);
+    background: var(--dh-bg-4);
+    border: 1px solid var(--dh-bg-4-border);
+    max-width: 280px;
+}
+
+.e-209772d3 .holder .icon
+{
+    flex-shrink: 0;
+    font-size: 16px;
+    color: var(--dh-text-2);
+}
+
+.e-209772d3 .holder .content
+{
+    flex: 1;
+    min-width: 0;
+}
+
+.e-209772d3 .holder .content .title
+{
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--dh-text-1);
+    margin-bottom: 2px;
+}
+
+.e-209772d3 .holder .content .text
+{
+    font-size: 12px;
+    color: var(--dh-text-2);
+    line-height: 1.4;
+}
+
+.e-209772d3 .holder[variant="info"] .icon
+{
+    color: var(--dh-blue);
+}
+
+.e-209772d3 .holder[variant="success"] .icon
+{
+    color: var(--dh-green);
+}
+
+.e-209772d3 .holder[variant="warning"] .icon
+{
+    color: var(--dh-orange);
+}
+
+.e-209772d3 .holder[variant="error"] .icon
+{
+    color: var(--dh-red);
+}

package/addons/float/tooltips/items/elements/tooltip.js

@@ -0,0 +1,42 @@
+divhunt.AddonReady('elements', (elements) =>
+{
+    elements.ItemAdd({
+        id: 'tooltip',
+        icon: 'info',
+        name: 'Tooltip',
+        description: 'Rich tooltip with icon, title, and text.',
+        category: 'Feedback',
+        config: {
+            variant: {
+                type: 'string',
+                value: 'default',
+                options: ['default', 'info', 'success', 'warning', 'error']
+            },
+            icon: {
+                type: 'string',
+                value: null
+            },
+            title: {
+                type: 'string',
+                value: null
+            },
+            text: {
+                type: 'string',
+                value: ''
+            }
+        },
+        render: function()
+        {
+            return `
+                <div class="holder" :variant="variant">
+                    <i dh-if="icon" class="icon">{{ icon }}</i>
+
+                    <div class="content">
+                        <div dh-if="title" class="title">{{ title }}</div>
+                        <div dh-if="text" class="text">{{ text }}</div>
+                    </div>
+                </div>
+            `;
+        }
+    });
+});

package/addons/modules/actions/front/addon.js

@@ -0,0 +1,19 @@
+import divhunt from '#divhunt';
+
+const actions = divhunt.Addon('actions', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('name', ['string', null]);
+    addon.Field('group', ['string', null]);
+    addon.Field('description', ['string', null]);
+    addon.Field('command', ['string|object', null]);
+    addon.Field('endpoint', ['string', null]);
+    addon.Field('method', ['string', 'POST']);
+    addon.Field('headers', ['object', null]);
+    addon.Field('body', ['object|string', null]);
+    addon.Field('in', ['object', null]);
+    addon.Field('out', ['object', null]);
+    addon.Field('callback', ['function', null]);
+});
+
+export default actions;

package/addons/modules/actions/front/functions/run.js

@@ -0,0 +1,230 @@
+import divhunt from '#divhunt';
+import actions from '../addon.js';
+
+actions.Fn('run', function(id, props = {})
+{
+    this.resolve = null;
+    this.item = null;
+    this.vars = divhunt.AddonGet('variables');
+    this.commands = divhunt.AddonGet('commands');
+
+    this.methods.init = async (resolve) =>
+    {
+        this.resolve = resolve;
+        this.item = this.ItemGet(id);
+
+        if(!this.item)
+        {
+            return this.methods.done(null, `Action "${id}" not found.`, 404);
+        }
+
+        props = this.methods.validate(props, 'in');
+
+        if(props === false)
+        {
+            return;
+        }
+
+        const callback = this.item.Get('callback');
+        const command = this.item.Get('command');
+
+        if(callback)
+        {
+            await this.methods.callback(callback, props);
+        }
+        else if(command)
+        {
+            await this.methods.command(command, props);
+        }
+        else
+        {
+            await this.methods.http(props);
+        }
+    };
+
+    this.methods.validate = (data, type) =>
+    {
+        const schema = this.item.Get(type);
+
+        if(!schema)
+        {
+            return data;
+        }
+
+        try
+        {
+            return divhunt.DataDefine(data, schema);
+        }
+        catch(error)
+        {
+            this.methods.done(null, error.message, type === 'in' ? 400 : 500);
+            return false;
+        }
+    };
+
+    this.methods.callback = async (fn, props) =>
+    {
+        try
+        {
+            const data = await fn(props);
+            return this.methods.done(data, 'Action executed.', 200);
+        }
+        catch(error)
+        {
+            return this.methods.done(null, error.message, 500);
+        }
+    };
+
+    this.methods.command = async (command, props) =>
+    {
+        if(!this.commands)
+        {
+            return this.methods.done(null, 'Commands addon not available.', 500);
+        }
+
+        const commandId = typeof command === 'string' ? command : command.id;
+        const merged = typeof command === 'object' ? { ...command, ...props, id: undefined } : props;
+
+        const item = this.commands.ItemGet(commandId);
+
+        if(!item)
+        {
+            return this.methods.done(null, `Command "${commandId}" not found.`, 404);
+        }
+
+        try
+        {
+            const result = await item.Fn('run', merged);
+            return this.methods.done(result.data, result.message, result.code);
+        }
+        catch(error)
+        {
+            return this.methods.done(null, error.message, 500);
+        }
+    };
+
+    this.methods.http = async (props) =>
+    {
+        const endpoint = this.item.Get('endpoint');
+
+        if(!endpoint)
+        {
+            return this.methods.done(null, `Action "${id}" has no callback, command, or endpoint.`, 400);
+        }
+
+        try
+        {
+            const url = this.methods.url(endpoint);
+            const opts = this.methods.options(props);
+            const res = await fetch(url, opts);
+
+            if(!res.ok)
+            {
+                return this.methods.done(null, `HTTP ${res.status}: ${res.statusText}`, res.status);
+            }
+
+            const data = await res.json();
+            return this.methods.done(data, 'Action executed.', 200);
+        }
+        catch(error)
+        {
+            return this.methods.done(null, error.message, 500);
+        }
+    };
+
+    this.methods.url = (endpoint) =>
+    {
+        return this.methods.process(endpoint);
+    };
+
+    this.methods.options = (props) =>
+    {
+        const method = this.item.Get('method') || 'POST';
+        const opts = { method };
+
+        opts.headers = this.methods.headers();
+        opts.body = this.methods.body(props);
+        opts.headers['Content-Type'] = opts.headers['Content-Type'] || 'application/json';
+
+        return opts;
+    };
+
+    this.methods.headers = () =>
+    {
+        const headers = this.item.Get('headers');
+        const result = {};
+
+        if(headers)
+        {
+            for(const key in headers)
+            {
+                result[key] = this.methods.process(headers[key]);
+            }
+        }
+
+        return result;
+    };
+
+    this.methods.body = (props) =>
+    {
+        let body = this.item.Get('body') || props;
+
+        if(typeof body === 'string')
+        {
+            body = this.methods.process(body);
+        }
+        else if(typeof body === 'object')
+        {
+            body = { ...body, ...props };
+
+            for(const key in body)
+            {
+                if(typeof body[key] === 'string')
+                {
+                    body[key] = this.methods.process(body[key]);
+                }
+            }
+        }
+
+        return JSON.stringify(body);
+    };
+
+    this.methods.process = (value) =>
+    {
+        if(this.vars && typeof value === 'string')
+        {
+            return this.vars.Fn('process', value);
+        }
+
+        return value;
+    };
+
+    this.methods.done = (data, message, code) =>
+    {
+        if(code >= 200 && code < 300)
+        {
+            const validated = this.methods.validate(data, 'out');
+
+            if(validated === false)
+            {
+                return;
+            }
+
+            data = validated;
+        }
+
+        this.resolve({ data, message, code });
+    };
+
+    return new Promise((resolve) =>
+    {
+        try
+        {
+            this.methods.init(resolve);
+        }
+        catch(error)
+        {
+            resolve({ data: null, message: error.message, code: 500 });
+        }
+    });
+});

package/addons/modules/actions/front/load.js

@@ -0,0 +1,5 @@
+import actions from './addon.js';
+
+import './functions/run.js';
+
+export default actions;