divhunt 2.0.0

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

@@ -0,0 +1,253 @@
+/* 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

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

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

@@ -0,0 +1,116 @@
+/* Base */
+.e-68acba21 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	background: var(--dh-bg-1);
+	border-radius: var(--dh-radius-l);
+	overflow: hidden;
+}
+
+.e-68acba21 > .holder > .file
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-m);
+	padding: var(--dh-spacing-m);
+	border-bottom: 1px solid var(--dh-bg-2-border);
+	transition: background 0.2s ease;
+	cursor: pointer;
+}
+
+.e-68acba21 > .holder > .file:last-child
+{
+	border-bottom: none;
+}
+
+.e-68acba21 > .holder > .file:hover
+{
+	background: var(--dh-bg-2);
+}
+
+.e-68acba21 > .holder > .file > .icon-wrapper
+{
+	width: 48px;
+	height: 48px;
+	border-radius: var(--dh-radius-m);
+	background: var(--dh-bg-2);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+}
+
+.e-68acba21 > .holder > .file > .icon-wrapper > .icon
+{
+	font-size: 24px;
+	color: var(--dh-brand);
+}
+
+.e-68acba21 > .holder > .file > .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+	flex: 1;
+	min-width: 0;
+}
+
+.e-68acba21 > .holder > .file > .info > .name
+{
+	font-weight: 600;
+	color: var(--dh-text-1);
+	font-size: var(--dh-size-m);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.e-68acba21 > .holder > .file > .info > .meta
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+}
+
+.e-68acba21 > .holder > .file > .info > .meta > .separator
+{
+	opacity: 0.5;
+}
+
+.e-68acba21 > .holder > .file > .actions
+{
+	display: flex;
+	gap: var(--dh-spacing-x);
+	opacity: 0;
+	transition: opacity 0.2s ease;
+}
+
+.e-68acba21 > .holder > .file:hover > .actions
+{
+	opacity: 1;
+}
+
+/* Variants - Border */
+.e-68acba21 > .holder[variant*="border"] { border: 1px solid var(--dh-bg-2-border); }
+
+/* Variants - Background */
+.e-68acba21 > .holder[variant*="bg-1"] { background: var(--dh-bg-1); }
+.e-68acba21 > .holder[variant*="bg-2"] { background: var(--dh-bg-2); }
+.e-68acba21 > .holder[variant*="bg-3"] { background: var(--dh-bg-3); }
+
+/* Variants - Compact */
+.e-68acba21 > .holder[variant*="compact"] > .file { padding: var(--dh-spacing-s) var(--dh-spacing-m); gap: var(--dh-spacing-s); }
+.e-68acba21 > .holder[variant*="compact"] > .file > .icon-wrapper { width: 36px; height: 36px; }
+.e-68acba21 > .holder[variant*="compact"] > .file > .icon-wrapper > .icon { font-size: 20px; }
+.e-68acba21 > .holder[variant*="compact"] > .file > .info > .name { font-size: var(--dh-size-s); }
+
+/* Variants - Grid */
+.e-68acba21 > .holder[variant*="grid"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--dh-spacing-m); padding: var(--dh-spacing-m); }
+.e-68acba21 > .holder[variant*="grid"] > .file { flex-direction: column; align-items: center; text-align: center; padding: var(--dh-spacing-l); border: 1px solid var(--dh-bg-2-border); border-radius: var(--dh-radius-m); background: var(--dh-bg-2); }
+.e-68acba21 > .holder[variant*="grid"] > .file > .icon-wrapper { width: 64px; height: 64px; }
+.e-68acba21 > .holder[variant*="grid"] > .file > .icon-wrapper > .icon { font-size: 32px; }
+.e-68acba21 > .holder[variant*="grid"] > .file > .info { align-items: center; text-align: center; }
+.e-68acba21 > .holder[variant*="grid"] > .file > .actions { margin-top: var(--dh-spacing-s); }

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

@@ -0,0 +1,85 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'files',
+	icon: 'description',
+	name: 'Files',
+	description: 'File list with icons, sizes, and actions.',
+	category: 'Data',
+	author: 'Divhunt',
+	config: {
+		files: {
+			type: 'array',
+			value: [
+				{
+					name: 'Project Proposal.pdf',
+					type: 'pdf',
+					size: '2.4 MB',
+					modified: '2 hours ago',
+					icon: 'picture_as_pdf'
+				},
+				{
+					name: 'Design Mockups.fig',
+					type: 'figma',
+					size: '8.1 MB',
+					modified: 'Yesterday',
+					icon: 'palette'
+				},
+				{
+					name: 'Budget Spreadsheet.xlsx',
+					type: 'excel',
+					size: '156 KB',
+					modified: '3 days ago',
+					icon: 'table_chart'
+				},
+				{
+					name: 'Meeting Notes.docx',
+					type: 'word',
+					size: '45 KB',
+					modified: '1 week ago',
+					icon: 'description'
+				},
+				{
+					name: 'Presentation.pptx',
+					type: 'powerpoint',
+					size: '12.3 MB',
+					modified: '2 weeks ago',
+					icon: 'slideshow'
+				}
+			]
+		},
+		variant: {
+			type: 'array',
+			value: ['border'],
+			options: ['border', 'bg-1', 'bg-2', 'bg-3', 'compact', 'grid']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div dh-for="file in files" class="file">
+					<div class="icon-wrapper">
+						<i class="icon">{{ file.icon }}</i>
+					</div>
+					<div class="info">
+						<div class="name">{{ file.name }}</div>
+						<div class="meta">
+							<span class="size">{{ file.size }}</span>
+							<span class="separator">•</span>
+							<span class="modified">{{ file.modified }}</span>
+						</div>
+					</div>
+					<div class="actions">
+						<e-button :variant="['ghost', 'size-s']">
+							<i class="icon">download</i>
+						</e-button>
+						<e-button :variant="['ghost', 'size-s']">
+							<i class="icon">more_vert</i>
+						</e-button>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+});

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

@@ -0,0 +1,104 @@
+/* Base */
+.e-55cd111> .holder
+{
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+	gap: var(--dh-spacing-m);
+}
+
+.e-55cd111> .holder > .folder
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-m);
+	padding: var(--dh-spacing-l);
+	background: var(--dh-bg-2);
+	border: 1px solid var(--dh-bg-2-border);
+	border-radius: var(--dh-radius-l);
+	cursor: pointer;
+	transition: all 0.2s ease;
+	position: relative;
+}
+
+.e-55cd111> .holder > .folder:hover
+{
+	transform: translateY(-2px);
+	border-color: var(--dh-brand);
+}
+
+.e-55cd111> .holder > .folder > .icon-wrapper
+{
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 64px;
+	height: 64px;
+	border-radius: var(--dh-radius-m);
+	background: var(--dh-bg-3);
+}
+
+.e-55cd111> .holder > .folder > .icon-wrapper > .icon
+{
+	font-size: 36px;
+	color: var(--dh-brand);
+}
+
+.e-55cd111> .holder > .folder > .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+	flex: 1;
+}
+
+.e-55cd111> .holder > .folder > .info > .name
+{
+	font-weight: 600;
+	color: var(--dh-text-1);
+	font-size: var(--dh-size-m);
+}
+
+.e-55cd111> .holder > .folder > .info > .count
+{
+	font-size: var(--dh-size-s);
+	color: var(--dh-text-2);
+}
+
+.e-55cd111> .holder > .folder > .actions
+{
+	position: absolute;
+	top: var(--dh-spacing-m);
+	right: var(--dh-spacing-m);
+	opacity: 0;
+	transition: opacity 0.2s ease;
+}
+
+.e-55cd111> .holder > .folder:hover > .actions
+{
+	opacity: 1;
+}
+
+/* Folder Colors */
+.e-55cd111> .holder > .folder[color="brand"] > .icon-wrapper > .icon { color: var(--dh-brand); }
+.e-55cd111> .holder > .folder[color="blue"] > .icon-wrapper > .icon { color: var(--dh-blue); }
+.e-55cd111> .holder > .folder[color="green"] > .icon-wrapper > .icon { color: var(--dh-green); }
+.e-55cd111> .holder > .folder[color="orange"] > .icon-wrapper > .icon { color: var(--dh-orange); }
+.e-55cd111> .holder > .folder[color="red"] > .icon-wrapper > .icon { color: var(--dh-red); }
+
+/* Variants - List */
+.e-55cd111> .holder[variant*="list"] { display: flex; flex-direction: column; gap: 0; }
+.e-55cd111> .holder[variant*="list"] > .folder { flex-direction: row; align-items: center; gap: var(--dh-spacing-m); border-radius: 0; border-left: none; border-right: none; border-top: none; }
+.e-55cd111> .holder[variant*="list"] > .folder:last-child { border-bottom: none; }
+.e-55cd111> .holder[variant*="list"] > .folder > .icon-wrapper { width: 48px; height: 48px; }
+.e-55cd111> .holder[variant*="list"] > .folder > .icon-wrapper > .icon { font-size: 28px; }
+.e-55cd111> .holder[variant*="list"] > .folder:hover { transform: none; background: var(--dh-bg-3); }
+
+/* Variants - Compact */
+.e-55cd111> .holder[variant*="compact"] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--dh-spacing-s); }
+.e-55cd111> .holder[variant*="compact"] > .folder { padding: var(--dh-spacing-m); gap: var(--dh-spacing-s); }
+.e-55cd111> .holder[variant*="compact"] > .folder > .icon-wrapper { width: 48px; height: 48px; }
+.e-55cd111> .holder[variant*="compact"] > .folder > .icon-wrapper > .icon { font-size: 28px; }
+.e-55cd111> .holder[variant*="compact"] > .folder > .info > .name { font-size: var(--dh-size-s); }
+
+/* Variants - Border */
+.e-55cd111> .holder[variant*="border"] { border: 1px solid var(--dh-bg-2-border); border-radius: var(--dh-radius-l); padding: var(--dh-spacing-m); background: var(--dh-bg-1); }