divhunt 2.0.0

package/addons/render/tags/items/text-inline.js

@@ -0,0 +1,215 @@
+import tags from '#tags/addon.js';
+
+// Basic text formatting
+tags.Item({
+    id: 'span',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'strong',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'em',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'b',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'i',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'u',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 's',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'small',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'mark',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'del',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'ins',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+// Code and technical
+tags.Item({
+    id: 'code',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'kbd',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'var',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+// Semantic text
+tags.Item({
+    id: 'abbr',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'cite',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'dfn',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'q',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'time',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+// Subscript and superscript
+tags.Item({
+    id: 'sub',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+tags.Item({
+    id: 'sup',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline']
+    }
+});
+
+// Links
+tags.Item({
+    id: 'a',
+    closeable: true,
+    text: true,
+    nest: {
+        allowed: ['@text-inline'],
+        disallowed: ['a', '@form']
+    }
+});
+
+// Line breaks (void elements)
+tags.Item({
+    id: 'br',
+    closeable: false,
+    text: false,
+    nest: {
+        disallowed: ['*']
+    }
+});

package/addons/render/tags/load.js

@@ -0,0 +1,16 @@
+import tags from '#tags/addon.js';
+
+/* Functions */
+import '#tags/functions/groups.js';
+import '#tags/functions/validate.js';
+
+/* Items */
+import '#tags/items/text-inline.js';
+import '#tags/items/block.js';
+import '#tags/items/semantic.js';
+import '#tags/items/table.js';
+import '#tags/items/form.js';
+import '#tags/items/media.js';
+import '#tags/items/meta.js';
+
+export default tags;

package/addons/render/transforms/front/js/#register/addon.js

@@ -0,0 +1,11 @@
+const transforms = divhunt.Addon('transforms', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('icon', ['string', 'sync_alt']);
+    addon.Field('name', ['string', '']);
+    addon.Field('description', ['string', '']);
+    addon.Field('js', ['array', []]);
+    addon.Field('css', ['array', []]);
+    addon.Field('config', ['object', {}]);
+    addon.Field('code', ['function']);
+});

package/addons/render/transforms/front/js/functions/load/assets.js

@@ -0,0 +1,49 @@
+transforms.Fn('load.assets', async function(item)
+{
+    const loaded = transforms.loaded = transforms.loaded || {js: new Set(), css: new Set()};
+
+    const js = item.Get('js') || [];
+    const css = item.Get('css') || [];
+
+    const jsPromises = js.map(url =>
+    {
+        if (loaded.js.has(url))
+        {
+            return Promise.resolve();
+        }
+
+        loaded.js.add(url);
+
+        return new Promise((resolve, reject) =>
+        {
+            const script = document.createElement('script');
+            script.src = url;
+            script.async = true;
+            script.onload = resolve;
+            script.onerror = () => reject(new Error(`Failed to load script: ${url}`));
+            document.head.appendChild(script);
+        });
+    });
+
+    const cssPromises = css.map(url =>
+    {
+        if (loaded.css.has(url))
+        {
+            return Promise.resolve();
+        }
+
+        loaded.css.add(url);
+
+        return new Promise((resolve, reject) =>
+        {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = url;
+            link.onload = resolve;
+            link.onerror = () => reject(new Error(`Failed to load stylesheet: ${url}`));
+            document.head.appendChild(link);
+        });
+    });
+
+    await Promise.all([...jsPromises, ...cssPromises]);
+});

package/addons/render/transforms/front/js/items/directives/transform.js

@@ -0,0 +1,40 @@
+directives.ItemAdd({
+    id: 'dh-transform',
+    icon: 'auto_fix_high',
+    name: 'Transform',
+    description: 'Apply transform functions to elements for advanced functionality. Enables custom element behaviors and third-party integrations.',
+    trigger: 'node',
+    order: 1100,
+    type: '1',
+    code: async function(data, item, compile, node, identifier)
+    {
+        const transformer = transforms.ItemGet(node.tagName.toLowerCase());
+
+        if(!transformer)
+        {
+            return;
+        }
+
+        // Don't stop children processing - let each transform handle itself
+        // compile.children = false;
+
+        const html = node.outerHTML.replace(new RegExp(`^<${node.tagName.toLowerCase()}\\b`), `<div`) .replace(new RegExp(`</${node.tagName.toLowerCase()}>$`), `</div>`);
+        const compiled = item.Compile(html, compile.data);
+
+        data = directives.Fn('process.data', transformer.Get('config'), compiled.element.firstElementChild, compiled);
+
+        node.style.display = 'none';
+
+        await transforms.Fn('load.assets', transformer);
+
+        // Use Promise to handle async properly
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                const targetNode = compiled.element.firstElementChild;
+                transformer.Get('code').call({}, data, transformer, compile, targetNode, identifier);
+                node.replaceWith(targetNode);
+                resolve();
+            }, 0);
+        });
+    }
+});

package/addons/render/transforms/front/js/items/self/accordion.js

@@ -0,0 +1,174 @@
+divhunt.AddonReady('transforms', (transforms) =>
+{
+    transforms.ItemAdd({
+        id: 'accordion',
+        icon: 'expand_more',
+        name: 'Accordion',
+        description: 'Collapsible accordion component with multiple items. Supports single or multiple open panels with smooth animations.',
+        config: {
+            'multiple': ['boolean', false],
+            'first-open': ['boolean', true],
+            'animation-duration': ['number', 300],
+            'icon': ['boolean', true],
+            'icon-position': ['string', 'right']
+        },
+        code: function(data, item, compile, node, identifier)
+        {
+            this.setup = () =>
+            {
+                node.classList.add('accordion');
+                node.classList.add('accordion-' + identifier);
+
+                const children = Array.from(node.children);
+                const items = [];
+
+                for(let i = 0; i < children.length; i += 2)
+                {
+                    const header = children[i];
+                    const content = children[i + 1];
+
+                    if(!header || !content)
+                    {
+                        continue;
+                    }
+
+                    const wrapper = document.createElement('div');
+                    const headerWrapper = document.createElement('div');
+                    const contentWrapper = document.createElement('div');
+
+                    wrapper.className = 'accordion-item';
+                    headerWrapper.className = 'accordion-header';
+                    contentWrapper.className = 'accordion-content';
+
+                    headerWrapper.appendChild(header);
+                    contentWrapper.appendChild(content);
+
+                    wrapper.appendChild(headerWrapper);
+                    wrapper.appendChild(contentWrapper);
+
+                    items.push(wrapper);
+                }
+
+                node.innerHTML = '';
+                items.forEach(item => node.appendChild(item));
+            };
+
+            this.icons = () =>
+            {
+                if(!data['icon'].value)
+                {
+                    return;
+                }
+
+                const headers = node.querySelectorAll('.accordion-header');
+
+                headers.forEach(header =>
+                {
+                    const icon = document.createElement('span');
+                    icon.className = 'accordion-icon';
+                    icon.innerHTML = '▼';
+
+                    if(data['icon-position'].value === 'left')
+                    {
+                        header.insertBefore(icon, header.firstChild);
+                    }
+                    else
+                    {
+                        header.appendChild(icon);
+                    }
+                });
+            };
+
+            this.styles = () =>
+            {
+                const duration = data['animation-duration'].value;
+                const style = document.createElement('style');
+
+                style.textContent = `
+                    .accordion-${identifier} .accordion-content {
+                        max-height: 0;
+                        overflow: hidden;
+                        transition: max-height ${duration}ms ease-in-out;
+                    }
+                    .accordion-${identifier} .accordion-item.active .accordion-content {
+                        max-height: 2000px;
+                    }
+                    .accordion-${identifier} .accordion-header {
+                        cursor: pointer;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                    }
+                    .accordion-${identifier} .accordion-icon {
+                        transition: transform ${duration}ms ease;
+                        display: inline-block;
+                    }
+                    .accordion-${identifier} .accordion-item.active .accordion-icon {
+                        transform: rotate(180deg);
+                    }
+                `;
+
+                document.head.appendChild(style);
+            };
+
+            this.toggle = (item) =>
+            {
+                const isActive = item.classList.contains('active');
+                const content = item.querySelector('.accordion-content');
+
+                if(!data['multiple'].value)
+                {
+                    const items = node.querySelectorAll('.accordion-item');
+                    items.forEach(otherItem =>
+                    {
+                        if(otherItem !== item)
+                        {
+                            otherItem.classList.remove('active');
+                        }
+                    });
+                }
+
+                if(isActive)
+                {
+                    item.classList.remove('active');
+                }
+                else
+                {
+                    item.classList.add('active');
+                }
+            };
+
+            this.events = () =>
+            {
+                const headers = node.querySelectorAll('.accordion-header');
+
+                headers.forEach(header =>
+                {
+                    header.addEventListener('click', () =>
+                    {
+                        const item = header.parentElement;
+                        this.toggle(item);
+                    });
+                });
+            };
+
+            this.initialize = () =>
+            {
+                if(data['first-open'].value)
+                {
+                    const firstItem = node.querySelector('.accordion-item');
+                    if(firstItem)
+                    {
+                        firstItem.classList.add('active');
+                    }
+                }
+            };
+
+            this.setup();
+            this.icons();
+            this.styles();
+            this.events();
+            this.initialize();
+        }
+    });
+});

package/addons/render/transforms/front/js/items/self/chart/area.js

@@ -0,0 +1,156 @@
+divhunt.AddonReady('transforms', (transforms) =>
+{
+    transforms.ItemAdd({
+        id: 'dh-chart-area',
+        icon: 'area_chart',
+        name: 'Area Chart',
+        description: 'Filled area chart visualization. Show data trends with colored regions under the line.',
+        js: [
+            'https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js'
+        ],
+        config: {
+            'labels': ['array', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']],
+            'datasets': ['array', []],
+            'stacked': ['boolean', false],
+            'smooth': ['boolean', true],
+            'options': ['object', {}]
+        },
+        code: function(data, item, compile, node, identifier)
+        {
+            this.setup = () =>
+            {
+                node.innerHTML = '';
+                node.classList.add('dh-chart-area');
+
+                const canvas = document.createElement('canvas');
+                this.canvas = canvas;
+                node.appendChild(canvas);
+            };
+
+            this.colors = () =>
+            {
+                const style = getComputedStyle(document.body);
+
+                return {
+                    brand: style.getPropertyValue('--dh-brand').trim(),
+                    blue: style.getPropertyValue('--dh-blue').trim(),
+                    green: style.getPropertyValue('--dh-green').trim(),
+                    orange: style.getPropertyValue('--dh-orange').trim(),
+                    red: style.getPropertyValue('--dh-red').trim(),
+                    brandOpacity: style.getPropertyValue('--dh-brand-opacity').trim(),
+                    blueOpacity: style.getPropertyValue('--dh-blue-opacity').trim(),
+                    greenOpacity: style.getPropertyValue('--dh-green-opacity').trim(),
+                    orangeOpacity: style.getPropertyValue('--dh-orange-opacity').trim(),
+                    redOpacity: style.getPropertyValue('--dh-red-opacity').trim()
+                };
+            };
+
+            this.datasets = () =>
+            {
+                const datasets = data['datasets'].value;
+                const colors = this.colors();
+                const palette = [colors.brand, colors.blue, colors.green, colors.orange, colors.red];
+                const paletteOpacity = [colors.brandOpacity, colors.blueOpacity, colors.greenOpacity, colors.orangeOpacity, colors.redOpacity];
+                const smooth = data['smooth'].value;
+
+                if(datasets.length === 0)
+                {
+                    return [{
+                        label: 'Sample Data',
+                        data: [30, 45, 28, 56, 42, 65],
+                        backgroundColor: paletteOpacity[0],
+                        borderColor: palette[0],
+                        borderWidth: 2,
+                        fill: true,
+                        tension: smooth ? 0.4 : 0
+                    }];
+                }
+
+                return datasets.map((dataset, index) =>
+                {
+                    const color = palette[index % palette.length];
+                    const colorOpacity = paletteOpacity[index % paletteOpacity.length];
+
+                    return {
+                        ...dataset,
+                        backgroundColor: dataset.backgroundColor || colorOpacity,
+                        borderColor: dataset.borderColor || color,
+                        borderWidth: dataset.borderWidth || 2,
+                        fill: dataset.fill !== undefined ? dataset.fill : true,
+                        tension: dataset.tension !== undefined ? dataset.tension : (smooth ? 0.4 : 0)
+                    };
+                });
+            };
+
+            this.config = () =>
+            {
+                const style = getComputedStyle(document.body);
+                const textColor = style.getPropertyValue('--dh-text-1').trim();
+                const gridColor = style.getPropertyValue('--dh-bg-3-border').trim();
+                const stacked = data['stacked'].value;
+
+                return {
+                    type: 'line',
+                    data: {
+                        labels: data['labels'].value,
+                        datasets: this.datasets()
+                    },
+                    options: {
+                        responsive: true,
+                        maintainAspectRatio: false,
+                        interaction: {
+                            intersect: false,
+                            mode: 'index'
+                        },
+                        plugins: {
+                            legend: {
+                                labels: {
+                                    color: textColor,
+                                    font: {
+                                        family: style.getPropertyValue('--dh-font-primary').trim()
+                                    }
+                                }
+                            },
+                            filler: {
+                                propagate: false
+                            }
+                        },
+                        scales: {
+                            x: {
+                                ticks: { color: textColor },
+                                grid: { color: gridColor }
+                            },
+                            y: {
+                                stacked: stacked,
+                                ticks: { color: textColor },
+                                grid: { color: gridColor },
+                                beginAtZero: true
+                            }
+                        },
+                        ...data['options'].value
+                    }
+                };
+            };
+
+            this.initialize = () =>
+            {
+                setTimeout(() =>
+                {
+                    if(typeof Chart === 'undefined')
+                    {
+                        console.error('Chart.js library not loaded');
+                        return;
+                    }
+
+                    const context = this.canvas.getContext('2d');
+                    this.instance = new Chart(context, this.config());
+
+                    node.chart = this.instance;
+                }, 100);
+            };
+
+            this.setup();
+            this.initialize();
+        }
+    });
+});