divhunt 2.0.0

package/addons/render/elements/front/items/self/preview/html/html.css

@@ -0,0 +1,377 @@
+/* ============================================
+   PREVIEW HTML - Premium component showcase
+   ============================================ */
+
+.e-dbe4fa6 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	background: var(--dh-bg-1);
+	border-radius: var(--dh-radius-l);
+	overflow: hidden;
+	transition: box-shadow 0.2s ease;
+}
+
+.e-dbe4fa6 > .holder:hover
+{
+	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
+}
+
+
+/* ============================================
+   HEADER
+   ============================================ */
+
+.e-dbe4fa6 > .holder > .header
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+	background: var(--dh-bg-2);
+	border-bottom: 1px solid var(--dh-bg-1-border);
+}
+
+.e-dbe4fa6 > .holder > .header > .title
+{
+	font-size: var(--dh-size-s);
+	font-weight: 600;
+	color: var(--dh-text-2);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.e-dbe4fa6 > .holder > .header > .actions
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+}
+
+
+/* ============================================
+   PREVIEW AREA
+   ============================================ */
+
+.e-dbe4fa6 > .holder > .preview
+{
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	min-height: 140px;
+	padding: var(--dh-spacing-l);
+	overflow: hidden;
+}
+
+/* Grid background - separate layer for animation */
+.e-dbe4fa6 > .holder > .preview > .grid
+{
+	position: absolute;
+	inset: 0;
+	background-image:
+		linear-gradient(var(--dh-bg-1-border) 1px, transparent 1px),
+		linear-gradient(90deg, var(--dh-bg-1-border) 1px, transparent 1px);
+	background-size: 24px 24px;
+	background-position: center center;
+	opacity: 0.6;
+	transition: opacity 0.3s ease;
+}
+
+.e-dbe4fa6 > .holder:hover > .preview > .grid
+{
+	opacity: 1;
+}
+
+/* Content container */
+.e-dbe4fa6 > .holder > .preview > .content
+{
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: var(--dh-spacing-m);
+}
+
+/* Alignment */
+.e-dbe4fa6 > .holder > .preview[align="start"]
+{
+	justify-content: flex-start;
+}
+
+.e-dbe4fa6 > .holder > .preview[align="center"]
+{
+	justify-content: center;
+}
+
+.e-dbe4fa6 > .holder > .preview[align="end"]
+{
+	justify-content: flex-end;
+}
+
+/* Resize handle */
+.e-dbe4fa6 > .holder > .preview > .resize-handle
+{
+	position: absolute;
+	right: 0;
+	top: 50%;
+	transform: translateY(-50%);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 20px;
+	height: 40px;
+	background: var(--dh-bg-2);
+	border-left: 1px solid var(--dh-bg-1-border);
+	border-radius: var(--dh-radius-s) 0 0 var(--dh-radius-s);
+	cursor: ew-resize;
+	opacity: 0;
+	transition: opacity 0.2s ease;
+}
+
+.e-dbe4fa6 > .holder > .preview > .resize-handle > i
+{
+	font-size: 16px;
+	color: var(--dh-text-3);
+	transform: rotate(90deg);
+}
+
+.e-dbe4fa6 > .holder:hover > .preview > .resize-handle
+{
+	opacity: 1;
+}
+
+
+/* ============================================
+   CODE BLOCK
+   ============================================ */
+
+.e-dbe4fa6 > .holder > .code
+{
+	display: flex;
+	flex-direction: column;
+	background: var(--dh-bg-3);
+	border-top: 1px solid var(--dh-bg-1-border);
+}
+
+.e-dbe4fa6 > .holder > .code > .code-header
+{
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+	border-bottom: 1px solid var(--dh-bg-3-border);
+}
+
+.e-dbe4fa6 > .holder > .code > .code-header > .label
+{
+	font-size: 10px;
+	font-weight: 600;
+	color: var(--dh-text-3);
+	text-transform: uppercase;
+	letter-spacing: 0.5px;
+}
+
+.e-dbe4fa6 > .holder > .code > pre
+{
+	margin: 0;
+	padding: var(--dh-spacing-m);
+	overflow-x: auto;
+}
+
+.e-dbe4fa6 > .holder > .code > pre > code
+{
+	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+	font-size: 12px;
+	line-height: 1.6;
+	color: var(--dh-text-2);
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+
+/* ============================================
+   VARIANTS - Backgrounds
+   ============================================ */
+
+/* bg-1 (default) */
+.e-dbe4fa6 > .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+}
+
+/* bg-2 */
+.e-dbe4fa6 > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-2"] > .header
+{
+	background: var(--dh-bg-3);
+	border-bottom-color: var(--dh-bg-2-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-2"] > .preview > .grid
+{
+	background-image:
+		linear-gradient(var(--dh-bg-2-border) 1px, transparent 1px),
+		linear-gradient(90deg, var(--dh-bg-2-border) 1px, transparent 1px);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-2"] > .code
+{
+	background: var(--dh-bg-4);
+	border-top-color: var(--dh-bg-2-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-2"] > .code > .code-header
+{
+	border-bottom-color: var(--dh-bg-4-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-2"] > .preview > .resize-handle
+{
+	background: var(--dh-bg-3);
+	border-left-color: var(--dh-bg-2-border);
+}
+
+/* bg-3 */
+.e-dbe4fa6 > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-3"] > .header
+{
+	background: var(--dh-bg-4);
+	border-bottom-color: var(--dh-bg-3-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-3"] > .preview > .grid
+{
+	background-image:
+		linear-gradient(var(--dh-bg-3-border) 1px, transparent 1px),
+		linear-gradient(90deg, var(--dh-bg-3-border) 1px, transparent 1px);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-3"] > .code
+{
+	background: var(--dh-bg-4);
+	border-top-color: var(--dh-bg-3-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-3"] > .code > .code-header
+{
+	border-bottom-color: var(--dh-bg-4-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-3"] > .preview > .resize-handle
+{
+	background: var(--dh-bg-4);
+	border-left-color: var(--dh-bg-3-border);
+}
+
+/* bg-4 */
+.e-dbe4fa6 > .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-4"] > .preview > .grid
+{
+	background-image:
+		linear-gradient(var(--dh-bg-4-border) 1px, transparent 1px),
+		linear-gradient(90deg, var(--dh-bg-4-border) 1px, transparent 1px);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-4"] > .header
+{
+	background: var(--dh-bg-3);
+	border-bottom-color: var(--dh-bg-4-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-4"] > .code
+{
+	background: var(--dh-bg-3);
+	border-top-color: var(--dh-bg-4-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-4"] > .code > .code-header
+{
+	border-bottom-color: var(--dh-bg-3-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-4"] > .preview > .resize-handle
+{
+	background: var(--dh-bg-3);
+	border-left-color: var(--dh-bg-4-border);
+}
+
+
+/* ============================================
+   VARIANTS - Border
+   ============================================ */
+
+.e-dbe4fa6 > .holder[variant*="border"]
+{
+	border: 1px solid var(--dh-bg-1-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-2"][variant*="border"]
+{
+	border-color: var(--dh-bg-2-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-3"][variant*="border"]
+{
+	border-color: var(--dh-bg-3-border);
+}
+
+.e-dbe4fa6 > .holder[variant*="bg-4"][variant*="border"]
+{
+	border-color: var(--dh-bg-4-border);
+}
+
+
+/* ============================================
+   VARIANTS - Compact
+   ============================================ */
+
+.e-dbe4fa6 > .holder[variant*="compact"] > .preview
+{
+	min-height: 80px;
+	padding: var(--dh-spacing-m);
+}
+
+.e-dbe4fa6 > .holder[variant*="compact"] > .code > pre
+{
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+}
+
+
+/* ============================================
+   VARIANTS - Dots pattern
+   ============================================ */
+
+.e-dbe4fa6 > .holder[variant*="dots"] > .preview > .grid
+{
+	background-image: radial-gradient(circle, var(--dh-bg-1-border) 1px, transparent 1px);
+	background-size: 16px 16px;
+}
+
+.e-dbe4fa6 > .holder[variant*="dots"][variant*="bg-2"] > .preview > .grid
+{
+	background-image: radial-gradient(circle, var(--dh-bg-2-border) 1px, transparent 1px);
+}
+
+.e-dbe4fa6 > .holder[variant*="dots"][variant*="bg-3"] > .preview > .grid
+{
+	background-image: radial-gradient(circle, var(--dh-bg-3-border) 1px, transparent 1px);
+}
+
+.e-dbe4fa6 > .holder[variant*="dots"][variant*="bg-4"] > .preview > .grid
+{
+	background-image: radial-gradient(circle, var(--dh-bg-4-border) 1px, transparent 1px);
+}

package/addons/render/elements/front/items/self/preview/html/html.js

@@ -0,0 +1,107 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'preview-html',
+	icon: 'preview',
+	name: 'Preview HTML',
+	description: 'Premium preview container with grid background, code display, and interactive controls.',
+	category: 'Preview',
+	author: 'Divhunt',
+	example: '<e-preview-html code="<e-button text=\'Button\'></e-button>"></e-preview-html>',
+	config: {
+		title: {
+			type: 'string',
+			value: ''
+		},
+		html: {
+			type: 'string',
+			value: ''
+		},
+		code: {
+			type: 'string',
+			value: ''
+		},
+		copy: {
+			type: 'boolean',
+			value: true
+		},
+		copyable: {
+			type: 'boolean',
+			value: true
+		},
+		align: {
+			type: 'string',
+			value: 'center',
+			options: ['start', 'center', 'end']
+		},
+		variant: {
+			type: 'array',
+			value: ['bg-1', 'border'],
+			options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'compact', 'dots']
+		}
+	},
+	render: function()
+	{
+		this.copied = false;
+
+		this.copy = async () =>
+		{
+			if(!this.code || this.copied)
+			{
+				return;
+			}
+
+			try
+			{
+				await navigator.clipboard.writeText(this.code);
+				this.copied = true;
+
+				setTimeout(() =>
+				{
+					this.copied = false;
+				}, 2000);
+			}
+			catch(e)
+			{
+				console.error('Failed to copy:', e);
+			}
+		};
+
+		const header = `
+			<div dh-if="title" class="header">
+				<span class="title">{{ title }}</span>
+				<div class="actions">
+					<e-button dh-if="copyable && code" :icon="copied ? 'check' : 'content_copy'" :_click="copy" :variant="['ghost', 'size-s', 'icon-only']"></e-button>
+				</div>
+			</div>
+		`;
+
+		const preview = `
+			<div class="preview" :align="align">
+				<div class="grid"></div>
+				<div class="content">
+					<span dh-if="html" dh-html="html"></span>
+					<slot dh-if="!html" name="html"></slot>
+				</div>
+			</div>
+		`;
+
+		const codeBlock = `
+			<div dh-if="copy && code" class="code">
+				<div class="code-header">
+					<span class="label">HTML</span>
+					<e-button dh-if="copyable && !title" :icon="copied ? 'check' : 'content_copy'" :text="copied ? 'Copied!' : 'Copy'" :_click="copy" :variant="['ghost', 'size-s']"></e-button>
+				</div>
+				<pre><code>{{ code }}</code></pre>
+			</div>
+		`;
+
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				${header}
+				${preview}
+				${codeBlock}
+			</div>
+		`;
+	}
+});

package/addons/render/html/addon.js

@@ -0,0 +1,13 @@
+import divhunt from '#framework/load.js';
+
+const html = divhunt.Addon('html', (addon) =>
+{
+    addon.Field('id', ['string']);
+    addon.Field('tag', ['string', 'div']);
+    addon.Field('position', ['string', 'head']);
+    addon.Field('parent', ['string']);
+    addon.Field('content', ['string']);
+    addon.Field('attributes', ['object', {}]);
+});
+
+export default html;

package/addons/render/html/functions/render.js

@@ -0,0 +1,85 @@
+import html from '#html/addon.js';
+
+html.Fn('render', function(context = {})
+{
+    this.methods.init = () =>
+    {
+        const sections = { head: [], body: [] };
+        const sortedItems = this.methods.getSortedItems();
+
+        sortedItems.forEach(item => this.methods.processItem(item, sections));
+
+        if (typeof context.head === 'function') sections.head.push(context.head());
+        if (typeof context.body === 'function') sections.body.push(context.body());
+
+        return this.methods.buildHTML(sections);
+    };
+
+    this.methods.getSortedItems = () =>
+    {
+        return Object.values(this.Items()).sort((a, b) =>
+            (a.Get('priority') || 0) - (b.Get('priority') || 0)
+        );
+    };
+
+    this.methods.processItem = (item, sections) =>
+    {
+        const position = item.Get('position').toLowerCase();
+        const content = item.Fn('render');
+
+        if (content && sections[position])
+        {
+            sections[position].push(content);
+        }
+    };
+
+    this.methods.resolveAttributeValue = (item, attrName, value, visited = new Set()) =>
+    {
+        if (value !== 'inherit')
+        {
+            return value;
+        }
+
+        if (visited.has(item.Get('id')))
+        {
+            return undefined;
+        }
+
+        visited.add(item.Get('id'));
+
+        const parentId = item.Get('parent');
+
+        if (!parentId)
+        {
+            return undefined;
+        }
+
+        const parentItem = this.ItemGet(parentId);
+
+        if (!parentItem)
+        {
+            return undefined;
+        }
+
+        const parentAttrs = parentItem.Get('attributes');
+        const parentValue = parentAttrs[attrName];
+
+        return this.methods.resolveAttributeValue(parentItem, attrName, parentValue, visited);
+    };
+
+    this.methods.buildHTML = (sections) =>
+    {
+        return `<!DOCTYPE html>
+<html lang="en">
+    <head>
+        ${sections.head.join('')}
+    </head>
+
+    <body>
+        ${sections.body.join('')}
+    </body>
+</html>`;
+    };
+
+    return this.methods.init();
+});

package/addons/render/html/item/functions/render.js

@@ -0,0 +1,66 @@
+import html from '#html/addon.js';
+import tags from '#tags/load.js';
+
+html.Fn('item.render', function(item)
+{
+    this.methods.init = () =>
+    {
+        const tag = tags.ItemGet(item.Get('tag'));
+
+        if (!tag)
+        {
+            return '';
+        }
+
+        return this.methods.element(item, tag);
+    };
+
+    this.methods.element = (item, tag) =>
+    {
+        const parts = [];
+
+        parts.push('<');
+        parts.push(tag.Get('id'));
+        parts.push(this.methods.attributes(item));
+        parts.push('>');
+
+        if (tag.Get('closeable'))
+        {
+            const content = item.Get('content');
+
+            if (content)
+            {
+                parts.push(content);
+            }
+            
+            parts.push('</');
+            parts.push(tag.Get('id'));
+            parts.push('>');
+        }
+
+        return parts.join('');
+    };
+
+    this.methods.attributes = (item) =>
+    {
+        const attrs = item.Get('attributes');
+        const parts = [];
+
+        Object.entries(attrs).forEach(([key, value]) =>
+        {
+            parts.push(' ');
+            parts.push(this.divhunt.StringSanitize(key));
+            
+            if (value !== null && value !== undefined && value !== '')
+            {
+                parts.push('="');
+                parts.push(this.divhunt.StringSanitize(value));
+                parts.push('"');
+            }
+        });
+
+        return parts.join('');
+    };
+
+    return this.methods.init();
+});

package/addons/render/html/items/assets/favicon.js

@@ -0,0 +1,12 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'asset-favicon',
+    tag: 'link',
+    position: 'head',
+    priority: -60,
+    attributes: {
+        rel: 'icon',
+        href: 'https://global.divhunt.com/8d22353625863e105650b3a64f324eaf_40492.png'
+    }
+});

package/addons/render/html/items/fonts/outfit.js

@@ -0,0 +1,12 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'font-outfit',
+    tag: 'link',
+    position: 'head',
+    priority: -40,
+    attributes: {
+        href: 'https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200..800&display=swap',
+        rel: 'stylesheet'
+    }
+});

package/addons/render/html/items/fonts/preconnect.js

@@ -0,0 +1,24 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'font-preconnect-api',
+    tag: 'link',
+    position: 'head',
+    priority: -50,
+    attributes: {
+        rel: 'preconnect',
+        href: 'https://fonts.googleapis.com'
+    }
+});
+
+html.Item({
+    id: 'font-preconnect-static',
+    tag: 'link',
+    position: 'head',
+    priority: -49,
+    attributes: {
+        rel: 'preconnect',
+        href: 'https://fonts.gstatic.com',
+        crossorigin: null
+    }
+});

package/addons/render/html/items/meta/charset.js

@@ -0,0 +1,11 @@
+import html from '#html/addon.js';
+
+html.Item({
+    id: 'meta-charset',
+    tag: 'meta',
+    position: 'head',
+    priority: -100,
+    attributes: {
+        charset: 'UTF-8'
+    }
+});