divhunt 2.0.4 → 2.0.6

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

@@ -1,200 +0,0 @@
-.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

@@ -1,120 +0,0 @@
-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>
-		`;
-	},
-});

package/addons/render/elements/front/items/self/data/comments/comments.css

@@ -1,253 +0,0 @@
-/* Base */
-.e-2452c60a> .holder
-{
-	display: flex;
-	flex-direction: column;
-	background: var(--dh-bg-1);
-	border-radius: var(--dh-radius-l);
-	overflow: hidden;
-}
-
-.e-2452c60a> .holder > .comment-wrapper
-{
-	display: flex;
-	flex-direction: column;
-	border-bottom: 1px solid var(--dh-bg-2-border);
-}
-
-.e-2452c60a> .holder > .comment-wrapper:last-child
-{
-	border-bottom: none;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment
-{
-	display: flex;
-	gap: var(--dh-spacing-m);
-	padding: var(--dh-spacing-l);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .avatar
-{
-	width: 40px;
-	height: 40px;
-	border-radius: 50%;
-	background: var(--dh-bg-3);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .avatar > .icon
-{
-	font-size: 24px;
-	color: var(--dh-text-2);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .avatar > img
-{
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	border-radius: 50%;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .content
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--dh-spacing-s);
-	flex: 1;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .content > .header
-{
-	display: flex;
-	align-items: center;
-	gap: var(--dh-spacing-s);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .content > .header > .author
-{
-	font-weight: 600;
-	color: var(--dh-text-1);
-	font-size: var(--dh-size-m);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .content > .header > .time
-{
-	font-size: var(--dh-size-s);
-	color: var(--dh-text-2);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .content > .text
-{
-	color: var(--dh-text-1);
-	font-size: var(--dh-size-m);
-	line-height: 1.6;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .content > .actions
-{
-	display: flex;
-	align-items: center;
-	gap: var(--dh-spacing-m);
-	margin-top: var(--dh-spacing-x);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .content > .actions > .action
-{
-	display: flex;
-	align-items: center;
-	gap: var(--dh-spacing-x);
-	padding: var(--dh-spacing-x) var(--dh-spacing-s);
-	border-radius: var(--dh-radius-s);
-	color: var(--dh-text-2);
-	font-size: var(--dh-size-s);
-	cursor: pointer;
-	transition: all 0.2s ease;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .content > .actions > .action:hover
-{
-	background: var(--dh-bg-2);
-	color: var(--dh-brand);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .comment > .content > .actions > .action > .icon
-{
-	font-size: 18px;
-}
-
-/* Replies */
-.e-2452c60a> .holder > .comment-wrapper > .replies
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--dh-spacing-m);
-	padding: var(--dh-spacing-m) var(--dh-spacing-l) var(--dh-spacing-l) calc(var(--dh-spacing-l) + 40px + var(--dh-spacing-m));
-	background: var(--dh-bg-2);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply
-{
-	display: flex;
-	gap: var(--dh-spacing-m);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .avatar
-{
-	width: 32px;
-	height: 32px;
-	border-radius: 50%;
-	background: var(--dh-bg-3);
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .avatar > .icon
-{
-	font-size: 18px;
-	color: var(--dh-text-2);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .avatar > img
-{
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	border-radius: 50%;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content
-{
-	display: flex;
-	flex-direction: column;
-	gap: var(--dh-spacing-x);
-	flex: 1;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .header
-{
-	display: flex;
-	align-items: center;
-	gap: var(--dh-spacing-x);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .header > .author
-{
-	font-weight: 600;
-	color: var(--dh-text-1);
-	font-size: var(--dh-size-s);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .header > .time
-{
-	font-size: 12px;
-	color: var(--dh-text-2);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .text
-{
-	color: var(--dh-text-1);
-	font-size: var(--dh-size-s);
-	line-height: 1.6;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .actions
-{
-	display: flex;
-	align-items: center;
-	gap: var(--dh-spacing-m);
-	margin-top: var(--dh-spacing-x);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .actions > .action
-{
-	display: flex;
-	align-items: center;
-	gap: var(--dh-spacing-x);
-	padding: var(--dh-spacing-x) var(--dh-spacing-s);
-	border-radius: var(--dh-radius-s);
-	color: var(--dh-text-2);
-	font-size: 12px;
-	cursor: pointer;
-	transition: all 0.2s ease;
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .actions > .action:hover
-{
-	background: var(--dh-bg-3);
-	color: var(--dh-brand);
-}
-
-.e-2452c60a> .holder > .comment-wrapper > .replies > .reply > .content > .actions > .action > .icon
-{
-	font-size: 16px;
-}
-
-/* Variants - Border */
-.e-2452c60a> .holder[variant*="border"]
-{
-	border: 1px solid var(--dh-bg-2-border);
-}
-
-/* Variants - Background */
-.e-2452c60a> .holder[variant*="bg-1"] { background: var(--dh-bg-1); }
-.e-2452c60a> .holder[variant*="bg-2"] { background: var(--dh-bg-2); }
-.e-2452c60a> .holder[variant*="bg-3"] { background: var(--dh-bg-3); }
-
-/* Variants - Compact */
-.e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment { padding: var(--dh-spacing-m); gap: var(--dh-spacing-s); }
-.e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .avatar { width: 32px; height: 32px; }
-.e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .avatar > .icon { font-size: 18px; }
-.e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .content > .header > .author,
-.e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .content > .text { font-size: var(--dh-size-s); }
-.e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .content > .actions > .action { padding: var(--dh-spacing-x); }
-.e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .comment > .content > .actions > .action > .icon { font-size: 16px; }
-.e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .replies { padding: var(--dh-spacing-s) var(--dh-spacing-m) var(--dh-spacing-m) calc(var(--dh-spacing-m) + 32px + var(--dh-spacing-s)); }
-.e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .replies > .reply > .avatar { width: 28px; height: 28px; }
-.e-2452c60a> .holder[variant*="compact"] > .comment-wrapper > .replies > .reply > .avatar > .icon { font-size: 16px; }

package/addons/render/elements/front/items/self/data/comments/comments.js

@@ -1,134 +0,0 @@
-import elements from '#elements/load.js';
-
-elements.ItemAdd({
-	id: 'comments',
-	icon: 'comment',
-	name: 'Comments',
-	description: 'Comment thread with replies, likes, and timestamps.',
-	category: 'Data',
-	author: 'Divhunt',
-	config: {
-		comments: {
-			type: 'array',
-			value: [
-				{
-					author: 'Sarah Johnson',
-					avatar: '',
-					time: '2 hours ago',
-					text: 'This looks great! I really like the new design direction. The colors are much more vibrant.',
-					likes: 12,
-					replies: [
-						{
-							author: 'John Doe',
-							avatar: '',
-							time: '1 hour ago',
-							text: 'I agree! The color palette is perfect.',
-							likes: 5
-						},
-						{
-							author: 'Jane Smith',
-							avatar: '',
-							time: '30 minutes ago',
-							text: 'Thanks for the feedback everyone!',
-							likes: 3
-						}
-					]
-				},
-				{
-					author: 'Mike Chen',
-					avatar: '',
-					time: '5 hours ago',
-					text: 'Can we adjust the spacing on mobile? It feels a bit cramped on smaller screens.',
-					likes: 8,
-					replies: [
-						{
-							author: 'Sarah Johnson',
-							avatar: '',
-							time: '4 hours ago',
-							text: 'Good point, I will look into that.',
-							likes: 4
-						}
-					]
-				},
-				{
-					author: 'Emma Davis',
-					avatar: '',
-					time: '1 day ago',
-					text: 'Great work team! This is exactly what we needed. Looking forward to the next iteration.',
-					likes: 24,
-					replies: []
-				}
-			]
-		},
-		variant: {
-			type: 'array',
-			value: ['border'],
-			options: ['border', 'bg-1', 'bg-2', 'bg-3', 'compact']
-		}
-	},
-	render: function()
-	{
-		this.state = this.state || {};
-		this.state.expandedComments = this.state.expandedComments || {};
-
-		this.toggleReplies = (commentId) =>
-		{
-			this.state.expandedComments[commentId] = !this.state.expandedComments[commentId];
-			this.Update();
-		};
-
-		return `
-			<div class="holder" :variant="variant.join(' ')">
-				<div dh-for="comment in comments" class="comment-wrapper">
-					<div class="comment">
-						<div class="avatar">
-							<i dh-if="!comment.avatar" class="icon">person</i>
-							<img dh-if="comment.avatar" :src="comment.avatar" alt="Avatar">
-						</div>
-						<div class="content">
-							<div class="header">
-								<span class="author">{{ comment.author }}</span>
-								<span class="time">{{ comment.time }}</span>
-							</div>
-							<div class="text">{{ comment.text }}</div>
-							<div class="actions">
-								<div class="action">
-									<i class="icon">thumb_up</i>
-									<span>{{ comment.likes }}</span>
-								</div>
-								<div class="action" dh-if="comment.replies.length > 0" dh-click="toggleReplies(comment.author + comment.time)">
-									<i class="icon">{{ state.expandedComments[comment.author + comment.time] ? 'expand_less' : 'expand_more' }}</i>
-									<span>{{ comment.replies.length }} {{ comment.replies.length === 1 ? 'reply' : 'replies' }}</span>
-								</div>
-								<div class="action">
-									<i class="icon">more_horiz</i>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div dh-if="state.expandedComments[comment.author + comment.time] && comment.replies.length > 0" class="replies">
-						<div dh-for="reply in comment.replies" class="reply">
-							<div class="avatar">
-								<i dh-if="!reply.avatar" class="icon">person</i>
-								<img dh-if="reply.avatar" :src="reply.avatar" alt="Avatar">
-							</div>
-							<div class="content">
-								<div class="header">
-									<span class="author">{{ reply.author }}</span>
-									<span class="time">{{ reply.time }}</span>
-								</div>
-								<div class="text">{{ reply.text }}</div>
-								<div class="actions">
-									<div class="action">
-										<i class="icon">thumb_up</i>
-										<span>{{ reply.likes }}</span>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		`;
-	}
-});