divhunt 2.0.0

package/addons/render/elements/front/items/self/cards/stat/styles/variants.css

@@ -0,0 +1,124 @@
+.e-5239ce65 > .holder[variant*="bg-1"]
+{
+	background: var(--dh-bg-1);
+}
+
+.e-5239ce65 > .holder[variant*="bg-2"]
+{
+	background: var(--dh-bg-2);
+}
+
+.e-5239ce65 > .holder[variant*="bg-3"]
+{
+	background: var(--dh-bg-3);
+}
+
+.e-5239ce65 > .holder[variant*="bg-4"]
+{
+	background: var(--dh-bg-4);
+}
+
+.e-5239ce65 > .holder[variant*="bg-1"]:hover
+{
+	background: var(--dh-bg-1-hover);
+}
+
+.e-5239ce65 > .holder[variant*="bg-2"]:hover
+{
+	background: var(--dh-bg-2-hover);
+}
+
+.e-5239ce65 > .holder[variant*="bg-3"]:hover
+{
+	background: var(--dh-bg-3-hover);
+}
+
+.e-5239ce65 > .holder[variant*="bg-4"]:hover
+{
+	background: var(--dh-bg-4-hover);
+}
+
+.e-5239ce65 > .holder[variant*="border"]
+{
+	border: 1px solid var(--dh-bg-3-border);
+}
+
+.e-5239ce65 > .holder[variant*="brand"]
+{
+	border-color: var(--dh-brand-border);
+	background: var(--dh-brand-opacity);
+}
+
+.e-5239ce65 > .holder[variant*="brand"] > .header > i
+{
+	color: var(--dh-brand);
+}
+
+.e-5239ce65 > .holder[variant*="brand"] > .footer > .sparkline
+{
+	color: var(--dh-brand);
+}
+
+.e-5239ce65 > .holder[variant*="blue"]
+{
+	border-color: var(--dh-blue-border);
+	background: var(--dh-blue-opacity);
+}
+
+.e-5239ce65 > .holder[variant*="blue"] > .header > i
+{
+	color: var(--dh-blue);
+}
+
+.e-5239ce65 > .holder[variant*="blue"] > .footer > .sparkline
+{
+	color: var(--dh-blue);
+}
+
+.e-5239ce65 > .holder[variant*="red"]
+{
+	border-color: var(--dh-red-border);
+	background: var(--dh-red-opacity);
+}
+
+.e-5239ce65 > .holder[variant*="red"] > .header > i
+{
+	color: var(--dh-red);
+}
+
+.e-5239ce65 > .holder[variant*="red"] > .footer > .sparkline
+{
+	color: var(--dh-red);
+}
+
+.e-5239ce65 > .holder[variant*="orange"]
+{
+	border-color: var(--dh-orange-border);
+	background: var(--dh-orange-opacity);
+}
+
+.e-5239ce65 > .holder[variant*="orange"] > .header > i
+{
+	color: var(--dh-orange);
+}
+
+.e-5239ce65 > .holder[variant*="orange"] > .footer > .sparkline
+{
+	color: var(--dh-orange);
+}
+
+.e-5239ce65 > .holder[variant*="green"]
+{
+	border-color: var(--dh-green-border);
+	background: var(--dh-green-opacity);
+}
+
+.e-5239ce65 > .holder[variant*="green"] > .header > i
+{
+	color: var(--dh-green);
+}
+
+.e-5239ce65 > .holder[variant*="green"] > .footer > .sparkline
+{
+	color: var(--dh-green);
+}

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

@@ -0,0 +1,93 @@
+/* Base */
+.e-10533634 > .holder
+{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: auto;
+    background: transparent;
+}
+
+.e-10533634 > .holder > .preview *
+{
+    pointer-events: none;
+}
+
+/* Variants - Background */
+.e-10533634 > .holder[variant*="bg-1"]
+{
+    background: var(--dh-bg-1);
+}
+
+.e-10533634 > .holder[variant*="bg-2"]
+{
+    background: var(--dh-bg-2);
+}
+
+.e-10533634 > .holder[variant*="bg-3"]
+{
+    background: var(--dh-bg-3);
+}
+
+.e-10533634 > .holder[variant*="bg-4"]
+{
+    background: var(--dh-bg-4);
+}
+
+/* Variants - Border */
+.e-10533634 > .holder[variant*="border-full"]
+{
+    border: 1px solid var(--dh-bg-2-border);
+}
+
+.e-10533634 > .holder[variant*="bg-1"][variant*="border-full"]
+{
+    border: 1px solid var(--dh-bg-1-border);
+}
+
+.e-10533634 > .holder[variant*="bg-2"][variant*="border-full"]
+{
+    border: 1px solid var(--dh-bg-2-border);
+}
+
+.e-10533634 > .holder[variant*="bg-3"][variant*="border-full"]
+{
+    border: 1px solid var(--dh-bg-3-border);
+}
+
+.e-10533634 > .holder[variant*="bg-4"][variant*="border-full"]
+{
+    border: 1px solid var(--dh-bg-4-border);
+}
+
+/* Variants - Radius */
+.e-10533634 > .holder[variant*="radius-s"]
+{
+    border-radius: var(--dh-radius-s);
+}
+
+.e-10533634 > .holder[variant*="radius-m"]
+{
+    border-radius: var(--dh-radius-m);
+}
+
+.e-10533634 > .holder[variant*="radius-l"]
+{
+    border-radius: var(--dh-radius-l);
+}
+
+/* Size */
+.e-10533634 > .holder[size="s"]
+{
+    height: 150px;
+}
+
+.e-10533634 > .holder[size="m"]
+{
+    height: 300px;
+}
+
+.e-10533634 > .holder[size="l"]
+{
+    height: 600px;
+}

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

@@ -0,0 +1,40 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+    id: 'interactive-html',
+    icon: 'code',
+    name: 'HTML Preview',
+    description: 'Displays HTML content in a scaled-down preview container. Perfect for showcasing elements and components in a thumbnail view.',
+    category: 'Content',
+    author: 'Divhunt',
+    config: {
+        html: {
+            type: 'string',
+            value: '<div>Preview</div>'
+        },
+        zoom: {
+            type: 'number',
+            value: 0.5
+        },
+        size: {
+            type: 'string',
+            value: 'm',
+            options: ['s', 'm', 'l']
+        },
+        variant: {
+            type: 'array',
+            value: [],
+            options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border-full', 'radius-s', 'radius-m', 'radius-l']
+        }
+    },
+    render: function()
+    {
+        return `
+            <div class="holder" :variant="variant.join(' ')" :size="size">
+                <div class="preview" :style="'zoom: ' + zoom">
+                    <div dh-html="html"></div>
+                </div>
+            </div>
+        `;
+    }
+});

package/addons/render/elements/front/items/self/content/markdown/markdown.css

@@ -0,0 +1,200 @@
+.e-56f2e505 .holder
+{
+	color: var(--dh-text-1);
+	font-family: var(--dh-font-primary);
+	line-height: 1.6;
+}
+
+/* Size variants */
+.e-56f2e505 .holder[variant~="size-s"] { font-size: var(--dh-size-s); }
+.e-56f2e505 .holder[variant~="size-m"] { font-size: var(--dh-size-m); }
+.e-56f2e505 .holder[variant~="size-l"] { font-size: 16px; }
+
+/* Prose variant - optimized reading */
+.e-56f2e505 .holder[variant~="prose"]
+{
+	max-width: 768px;
+	line-height: 1.75;
+}
+
+/* Headings */
+.e-56f2e505 .holder h1
+{
+	font-size: 2em;
+	font-weight: 700;
+	margin: var(--dh-spacing-l) 0 var(--dh-spacing-m);
+	color: var(--dh-text-1);
+}
+
+.e-56f2e505 .holder h2
+{
+	font-size: 1.5em;
+	font-weight: 600;
+	margin: var(--dh-spacing-l) 0 var(--dh-spacing-m);
+	color: var(--dh-text-1);
+}
+
+.e-56f2e505 .holder h3
+{
+	font-size: 1.25em;
+	font-weight: 600;
+	margin: var(--dh-spacing-m) 0 var(--dh-spacing-s);
+	color: var(--dh-text-1);
+}
+
+.e-56f2e505 .holder h4,
+.e-56f2e505 .holder h5,
+.e-56f2e505 .holder h6
+{
+	font-size: 1em;
+	font-weight: 600;
+	margin: var(--dh-spacing-m) 0 var(--dh-spacing-s);
+	color: var(--dh-text-1);
+}
+
+.e-56f2e505 .holder h1:first-child,
+.e-56f2e505 .holder h2:first-child,
+.e-56f2e505 .holder h3:first-child
+{
+	margin-top: 0;
+}
+
+/* Paragraphs */
+.e-56f2e505 .holder p
+{
+	margin: 0 0 var(--dh-spacing-m);
+	color: var(--dh-text-1);
+}
+
+.e-56f2e505 .holder p:last-child
+{
+	margin-bottom: 0;
+}
+
+/* Lists */
+.e-56f2e505 .holder ul,
+.e-56f2e505 .holder ol
+{
+	margin: 0 0 var(--dh-spacing-m);
+	padding-left: var(--dh-spacing-l);
+}
+
+.e-56f2e505 .holder li
+{
+	margin-bottom: var(--dh-spacing-s);
+}
+
+.e-56f2e505 .holder li:last-child
+{
+	margin-bottom: 0;
+}
+
+/* Links */
+.e-56f2e505 .holder a
+{
+	color: var(--dh-brand);
+	text-decoration: none;
+	transition: color 0.15s ease;
+}
+
+.e-56f2e505 .holder a:hover
+{
+	text-decoration: underline;
+}
+
+/* Code blocks */
+.e-56f2e505 .holder .code-block
+{
+	background: var(--dh-bg-3);
+	border: 1px solid var(--dh-bg-3-border);
+	border-radius: var(--dh-radius-m);
+	padding: var(--dh-spacing-m);
+	margin: var(--dh-spacing-m) 0;
+	overflow-x: auto;
+	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+	font-size: 0.9em;
+	line-height: 1.5;
+}
+
+.e-56f2e505 .holder .code-block code
+{
+	background: none;
+	padding: 0;
+	border-radius: 0;
+}
+
+/* Inline code */
+.e-56f2e505 .holder .code-inline
+{
+	background: var(--dh-bg-3);
+	padding: 2px var(--dh-spacing-x);
+	border-radius: var(--dh-radius-s);
+	font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
+	font-size: 0.9em;
+}
+
+/* Blockquotes */
+.e-56f2e505 .holder blockquote
+{
+	border-left: 3px solid var(--dh-brand);
+	padding-left: var(--dh-spacing-m);
+	margin: var(--dh-spacing-m) 0;
+	color: var(--dh-text-2);
+	font-style: italic;
+}
+
+/* Horizontal rule */
+.e-56f2e505 .holder hr
+{
+	border: none;
+	border-top: 1px solid var(--dh-bg-3-border);
+	margin: var(--dh-spacing-l) 0;
+}
+
+/* Tables */
+.e-56f2e505 .holder table
+{
+	width: 100%;
+	border-collapse: collapse;
+	margin: var(--dh-spacing-m) 0;
+}
+
+.e-56f2e505 .holder th,
+.e-56f2e505 .holder td
+{
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+	border: 1px solid var(--dh-bg-3-border);
+	text-align: left;
+}
+
+.e-56f2e505 .holder th
+{
+	background: var(--dh-bg-3);
+	font-weight: 600;
+}
+
+.e-56f2e505 .holder tr:nth-child(even)
+{
+	background: var(--dh-bg-2);
+}
+
+/* Images */
+.e-56f2e505 .holder img
+{
+	max-width: 100%;
+	height: auto;
+	border-radius: var(--dh-radius-m);
+	margin: var(--dh-spacing-m) 0;
+}
+
+/* Strong & emphasis */
+.e-56f2e505 .holder strong
+{
+	font-weight: 600;
+	color: var(--dh-text-1);
+}
+
+.e-56f2e505 .holder em
+{
+	font-style: italic;
+}

package/addons/render/elements/front/items/self/content/markdown/markdown.js

@@ -0,0 +1,120 @@
+import elements from '#elements/load.js';
+
+const parseMarkdown = function(md)
+{
+	if (!md) return '';
+
+	let html = md;
+
+	// Escape HTML
+	html = html.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+	// Code blocks (``` ```)
+	html = html.replace(/```(\w*)\n([\s\S]*?)```/g, (match, lang, code) =>
+	{
+		return `<pre class="code-block" data-lang="${lang}"><code>${code.trim()}</code></pre>`;
+	});
+
+	// Inline code (`)
+	html = html.replace(/`([^`]+)`/g, '<code class="code-inline">$1</code>');
+
+	// Headings
+	html = html.replace(/^######\s+(.+)$/gm, '<h6>$1</h6>');
+	html = html.replace(/^#####\s+(.+)$/gm, '<h5>$1</h5>');
+	html = html.replace(/^####\s+(.+)$/gm, '<h4>$1</h4>');
+	html = html.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
+	html = html.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
+	html = html.replace(/^#\s+(.+)$/gm, '<h1>$1</h1>');
+
+	// Blockquotes
+	html = html.replace(/^>\s+(.+)$/gm, '<blockquote>$1</blockquote>');
+
+	// Horizontal rule
+	html = html.replace(/^---$/gm, '<hr>');
+	html = html.replace(/^\*\*\*$/gm, '<hr>');
+
+	// Bold
+	html = html.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+	html = html.replace(/__([^_]+)__/g, '<strong>$1</strong>');
+
+	// Italic
+	html = html.replace(/\*([^*]+)\*/g, '<em>$1</em>');
+	html = html.replace(/_([^_]+)_/g, '<em>$1</em>');
+
+	// Links
+	html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+
+	// Images
+	html = html.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
+
+	// Unordered lists
+	html = html.replace(/^[\*\-]\s+(.+)$/gm, '<li>$1</li>');
+	html = html.replace(/(<li>.*<\/li>\n?)+/g, '<ul>$&</ul>');
+
+	// Ordered lists
+	html = html.replace(/^\d+\.\s+(.+)$/gm, '<li>$1</li>');
+
+	// Tables
+	html = html.replace(/^\|(.+)\|$/gm, (match, content) =>
+	{
+		const cells = content.split('|').map(cell => cell.trim());
+		if (cells.every(cell => /^[\-:]+$/.test(cell)))
+		{
+			return '<!-- table separator -->';
+		}
+		const cellTags = cells.map(cell => `<td>${cell}</td>`).join('');
+		return `<tr>${cellTags}</tr>`;
+	});
+	html = html.replace(/(<tr>.*<\/tr>\n?)+/g, '<table>$&</table>');
+	html = html.replace(/<!-- table separator -->\n?/g, '');
+
+	// Paragraphs - wrap remaining text blocks
+	html = html.split('\n\n').map(block =>
+	{
+		block = block.trim();
+		if (!block) return '';
+		if (block.startsWith('<h') ||
+			block.startsWith('<ul') ||
+			block.startsWith('<ol') ||
+			block.startsWith('<blockquote') ||
+			block.startsWith('<pre') ||
+			block.startsWith('<table') ||
+			block.startsWith('<hr'))
+		{
+			return block;
+		}
+		return `<p>${block.replace(/\n/g, '<br>')}</p>`;
+	}).join('\n');
+
+	return html;
+};
+
+elements.ItemAdd({
+	id: 'markdown',
+	icon: 'article',
+	name: 'Markdown',
+	description: 'Renders markdown content as styled HTML. Supports headings, paragraphs, lists, code blocks, blockquotes, tables, and links.',
+	category: 'Content',
+	author: 'Divhunt',
+	config: {
+		content: {
+			type: 'string',
+			value: ''
+		},
+		variant: {
+			type: 'array',
+			value: ['size-m'],
+			options: ['size-s', 'size-m', 'size-l', 'prose']
+		}
+	},
+	render: function()
+	{
+		this.parsedContent = parseMarkdown(this.content);
+
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div dh-html="parsedContent"></div>
+			</div>
+		`;
+	},
+});