divhunt 2.0.0

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

@@ -0,0 +1,73 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'folders',
+	icon: 'folder',
+	name: 'Folders',
+	description: 'Folder grid with item counts and colors.',
+	category: 'Data',
+	author: 'Divhunt',
+	config: {
+		folders: {
+			type: 'array',
+			value: [
+				{
+					name: 'Projects',
+					count: 24,
+					color: 'brand'
+				},
+				{
+					name: 'Documents',
+					count: 156,
+					color: 'blue'
+				},
+				{
+					name: 'Images',
+					count: 89,
+					color: 'green'
+				},
+				{
+					name: 'Videos',
+					count: 12,
+					color: 'orange'
+				},
+				{
+					name: 'Archives',
+					count: 7,
+					color: 'red'
+				},
+				{
+					name: 'Templates',
+					count: 32,
+					color: 'brand'
+				}
+			]
+		},
+		variant: {
+			type: 'array',
+			value: ['grid'],
+			options: ['grid', 'list', 'compact', 'border']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div dh-for="folder in folders" class="folder" :color="folder.color">
+					<div class="icon-wrapper">
+						<i class="icon">folder</i>
+					</div>
+					<div class="info">
+						<div class="name">{{ folder.name }}</div>
+						<div class="count">{{ folder.count }} items</div>
+					</div>
+					<div class="actions">
+						<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/inbox/inbox.css

@@ -0,0 +1,225 @@
+/* Base */
+.e-68d92230 > .holder
+{
+	display: flex;
+	flex-direction: column;
+	background: var(--dh-bg-1);
+	border-radius: var(--dh-radius-l);
+	overflow: hidden;
+	height: 700px;
+}
+
+.e-68d92230 > .holder > .header
+{
+	padding: var(--dh-spacing-l);
+	background: var(--dh-bg-2);
+	border-bottom: 1px solid var(--dh-bg-2-border);
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	gap: var(--dh-spacing-m);
+}
+
+.e-68d92230 > .holder > .header > .info
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+	flex: 1;
+}
+
+.e-68d92230 > .holder > .header > .info > .subject
+{
+	font-size: var(--dh-size-l);
+	font-weight: 600;
+	color: var(--dh-text-1);
+	margin: 0;
+}
+
+.e-68d92230 > .holder > .header > .info > .meta
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-x);
+	font-size: var(--dh-size-s);
+}
+
+.e-68d92230 > .holder > .header > .info > .meta > .label
+{
+	color: var(--dh-text-2);
+	font-weight: 600;
+}
+
+.e-68d92230 > .holder > .header > .info > .meta > .value
+{
+	color: var(--dh-text-1);
+}
+
+.e-68d92230 > .holder > .header > .actions
+{
+	display: flex;
+	gap: var(--dh-spacing-x);
+}
+
+.e-68d92230 > .holder > .messages
+{
+	flex: 1;
+	overflow-y: auto;
+	padding: var(--dh-spacing-l);
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-l);
+	background: var(--dh-bg-1);
+}
+
+.e-68d92230 > .holder > .messages > .message
+{
+	display: flex;
+	gap: var(--dh-spacing-m);
+	animation: fadeIn 0.3s ease;
+}
+
+@keyframes fadeIn
+{
+	from
+	{
+		opacity: 0;
+		transform: translateY(8px);
+	}
+	to
+	{
+		opacity: 1;
+		transform: translateY(0);
+	}
+}
+
+.e-68d92230 > .holder > .messages > .message > .avatar
+{
+	width: 40px;
+	height: 40px;
+	border-radius: 50%;
+	background: var(--dh-bg-3);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex-shrink: 0;
+	border: 2px solid var(--dh-bg-2);
+}
+
+.e-68d92230 > .holder > .messages > .message > .avatar > .icon
+{
+	font-size: 24px;
+	color: var(--dh-text-2);
+}
+
+.e-68d92230 > .holder > .messages > .message > .avatar > img
+{
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	border-radius: 50%;
+}
+
+.e-68d92230 > .holder > .messages > .message > .content
+{
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-x);
+	flex: 1;
+	max-width: 70%;
+}
+
+.e-68d92230 > .holder > .messages > .message > .content > .msg-header
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+	padding: 0 var(--dh-spacing-x);
+}
+
+.e-68d92230 > .holder > .messages > .message > .content > .msg-header > .sender
+{
+	font-weight: 600;
+	color: var(--dh-text-1);
+	font-size: var(--dh-size-s);
+}
+
+.e-68d92230 > .holder > .messages > .message > .content > .msg-header > .time
+{
+	font-size: 11px;
+	color: var(--dh-text-2);
+}
+
+.e-68d92230 > .holder > .messages > .message > .content > .bubble
+{
+	padding: var(--dh-spacing-m);
+	background: var(--dh-bg-2);
+	border-radius: var(--dh-radius-m);
+	color: var(--dh-text-1);
+	font-size: var(--dh-size-m);
+	line-height: 1.6;
+	border: 1px solid var(--dh-bg-2-border);
+	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+	max-width: fit-content;
+}
+
+.e-68d92230 > .holder > .messages > .message[sender="me"]
+{
+	flex-direction: row-reverse;
+}
+
+.e-68d92230 > .holder > .messages > .message[sender="me"] > .content
+{
+	align-items: flex-end;
+}
+
+.e-68d92230 > .holder > .messages > .message[sender="me"] > .content > .bubble
+{
+	background: var(--dh-brand);
+	color: white;
+	border-color: var(--dh-brand-border);
+}
+
+.e-68d92230 > .holder > .composer
+{
+	padding: var(--dh-spacing-l);
+	background: var(--dh-bg-2);
+	border-top: 1px solid var(--dh-bg-2-border);
+	display: flex;
+	flex-direction: column;
+	gap: var(--dh-spacing-m);
+}
+
+.e-68d92230 > .holder > .composer > .composer-actions
+{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: var(--dh-spacing-s);
+}
+
+.e-68d92230 > .holder > .composer > .composer-actions > .left
+{
+	display: flex;
+	gap: var(--dh-spacing-x);
+}
+
+/* Variants - Border */
+.e-68d92230 > .holder[variant*="border"] { border: 1px solid var(--dh-bg-2-border); }
+
+/* Variants - Background */
+.e-68d92230 > .holder[variant*="bg-1"] { background: var(--dh-bg-1); }
+.e-68d92230 > .holder[variant*="bg-2"] { background: var(--dh-bg-2); }
+.e-68d92230 > .holder[variant*="bg-2"] > .messages { background: var(--dh-bg-1); }
+.e-68d92230 > .holder[variant*="bg-3"] { background: var(--dh-bg-3); }
+.e-68d92230 > .holder[variant*="bg-3"] > .messages { background: var(--dh-bg-2); }
+
+/* Variants - Compact */
+.e-68d92230 > .holder[variant*="compact"] { height: 800px; }
+.e-68d92230 > .holder[variant*="compact"] > .header { padding: var(--dh-spacing-m); }
+.e-68d92230 > .holder[variant*="compact"] > .header > .info > .subject { font-size: var(--dh-size-m); }
+.e-68d92230 > .holder[variant*="compact"] > .messages { padding: var(--dh-spacing-m); gap: var(--dh-spacing-m); }
+.e-68d92230 > .holder[variant*="compact"] > .messages > .message > .avatar { width: 32px; height: 32px; }
+.e-68d92230 > .holder[variant*="compact"] > .messages > .message > .avatar > .icon { font-size: 18px; }
+.e-68d92230 > .holder[variant*="compact"] > .messages > .message > .content > .bubble { padding: var(--dh-spacing-s); font-size: var(--dh-size-s); }
+.e-68d92230 > .holder[variant*="compact"] > .composer { padding: var(--dh-spacing-m); gap: var(--dh-spacing-s); }

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

@@ -0,0 +1,111 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'inbox',
+	icon: 'inbox',
+	name: 'Inbox',
+	description: 'Message inbox with sender/recipient info and reply textarea.',
+	category: 'Data',
+	author: 'Divhunt',
+	config: {
+		subject: {
+			type: 'string',
+			value: 'Project Requirements Discussion'
+		},
+		recipient: {
+			type: 'string',
+			value: 'John Smith'
+		},
+		messages: {
+			type: 'array',
+			value: [
+				{
+					sender: 'John Smith',
+					avatar: '',
+					time: '10:30 AM',
+					message: 'Hey, I wanted to discuss the new project requirements with you. Do you have time this afternoon?',
+					isMe: false
+				},
+				{
+					sender: 'Me',
+					avatar: '',
+					time: '10:32 AM',
+					message: 'Sure! I am free after 3 PM. Should we schedule a quick call?',
+					isMe: true
+				},
+				{
+					sender: 'John Smith',
+					avatar: '',
+					time: '10:35 AM',
+					message: 'Perfect! I will send you a calendar invite. Thanks!',
+					isMe: false
+				}
+			]
+		},
+		placeholder: {
+			type: 'string',
+			value: 'Type your message...'
+		},
+		variant: {
+			type: 'array',
+			value: ['border', 'compact'],
+			options: ['border', 'bg-1', 'bg-2', 'bg-3', 'compact']
+		}
+	},
+	render: function()
+	{
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div class="header">
+					<div class="info">
+						<h3 class="subject">{{ subject }}</h3>
+						<div class="meta">
+							<span class="label">To:</span>
+							<span class="value">{{ recipient }}</span>
+						</div>
+					</div>
+					<div class="actions">
+						<e-button :variant="['outline', 'size-s']">
+							<i class="icon">archive</i>
+						</e-button>
+						<e-button :variant="['outline', 'size-s']">
+							<i class="icon">delete</i>
+						</e-button>
+					</div>
+				</div>
+				<div class="messages">
+					<div dh-for="msg in messages" class="message" :sender="msg.isMe ? 'me' : 'them'">
+						<div class="avatar">
+							<i dh-if="!msg.avatar" class="icon">person</i>
+							<img dh-if="msg.avatar" :src="msg.avatar" alt="Avatar">
+						</div>
+						<div class="content">
+							<div class="msg-header">
+								<span class="sender">{{ msg.sender }}</span>
+								<span class="time">{{ msg.time }}</span>
+							</div>
+							<div class="bubble">{{ msg.message }}</div>
+						</div>
+					</div>
+				</div>
+				<div class="composer">
+					<e-textarea :placeholder="placeholder" :variant="['border']" rows="3"></e-textarea>
+					<div class="composer-actions">
+						<div class="left">
+							<e-button :variant="['ghost', 'size-s']">
+								<i class="icon">attach_file</i>
+							</e-button>
+							<e-button :variant="['ghost', 'size-s']">
+								<i class="icon">image</i>
+							</e-button>
+						</div>
+						<e-button :variant="['brand']">
+							<i class="icon">send</i>
+							Send
+						</e-button>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+});

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

@@ -0,0 +1,133 @@
+/* Base */
+.e-4ded73b > .holder
+{
+	display: flex;
+	flex-direction: column;
+	background: var(--dh-bg-1);
+	border-radius: var(--dh-radius-m);
+	overflow: auto;
+	font-family: 'Courier New', monospace;
+	font-size: var(--dh-size-s);
+}
+
+.e-4ded73b > .holder > .log-entry
+{
+	display: flex;
+	align-items: center;
+	gap: var(--dh-spacing-m);
+	padding: var(--dh-spacing-s) var(--dh-spacing-m);
+	border-bottom: 1px solid var(--dh-bg-2);
+	transition: background 0.1s ease;
+}
+
+.e-4ded73b > .holder > .log-entry:hover
+{
+	background: var(--dh-bg-2);
+}
+
+.e-4ded73b > .holder > .log-entry:last-child
+{
+	border-bottom: none;
+}
+
+.e-4ded73b > .holder > .log-entry > .timestamp
+{
+	color: var(--dh-text-2);
+	font-size: 11px;
+	min-width: 60px;
+	opacity: 0.7;
+}
+
+.e-4ded73b > .holder > .log-entry > .icon
+{
+	font-size: 16px;
+	flex-shrink: 0;
+}
+
+.e-4ded73b > .holder > .log-entry > .message
+{
+	color: var(--dh-text-1);
+	flex: 1;
+	word-break: break-word;
+}
+
+/* Log Types */
+.e-4ded73b > .holder > .log-entry[type="info"] > .icon
+{
+	color: var(--dh-blue);
+}
+
+.e-4ded73b > .holder > .log-entry[type="success"] > .icon
+{
+	color: var(--dh-green);
+}
+
+.e-4ded73b > .holder > .log-entry[type="warning"] > .icon
+{
+	color: var(--dh-orange);
+}
+
+.e-4ded73b > .holder > .log-entry[type="error"] > .icon
+{
+	color: var(--dh-red);
+}
+
+.e-4ded73b > .holder > .log-entry[type="error"] > .message
+{
+	color: var(--dh-red);
+}
+
+/* Variants - Dark */
+.e-4ded73b > .holder[variant*="dark"]
+{
+	background: var(--dh-bg-1);
+}
+
+.e-4ded73b > .holder[variant*="dark"] > .log-entry
+{
+	border-bottom-color: var(--dh-bg-2);
+}
+
+.e-4ded73b > .holder[variant*="dark"] > .log-entry:hover
+{
+	background: var(--dh-bg-2);
+}
+
+/* Variants - Light */
+.e-4ded73b > .holder[variant*="light"]
+{
+	background: var(--dh-bg-3);
+}
+
+.e-4ded73b > .holder[variant*="light"] > .log-entry
+{
+	border-bottom-color: var(--dh-bg-4);
+}
+
+.e-4ded73b > .holder[variant*="light"] > .log-entry:hover
+{
+	background: var(--dh-bg-4);
+}
+
+/* Variants - Compact */
+.e-4ded73b > .holder[variant*="compact"] > .log-entry
+{
+	padding: var(--dh-spacing-x) var(--dh-spacing-s);
+	gap: var(--dh-spacing-s);
+}
+
+.e-4ded73b > .holder[variant*="compact"] > .log-entry > .timestamp
+{
+	min-width: 50px;
+}
+
+.e-4ded73b > .holder[variant*="compact"] > .log-entry > .icon
+{
+	font-size: 14px;
+}
+
+/* Variants - Border */
+.e-4ded73b > .holder[variant*="border"]
+{
+	border: 1px solid var(--dh-bg-4);
+}

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

@@ -0,0 +1,65 @@
+import elements from '#elements/load.js';
+
+elements.ItemAdd({
+	id: 'logs',
+	icon: 'terminal',
+	name: 'Logs',
+	description: 'Console-style log viewer with syntax highlighting and filtering.',
+	category: 'Data',
+	author: 'Divhunt',
+	config: {
+		logs: {
+			type: 'array',
+			value: [
+				{
+					type: 'info',
+					timestamp: '10:23:45',
+					message: 'Server started on port 3000'
+				},
+				{
+					type: 'success',
+					timestamp: '10:23:46',
+					message: 'Database connection established'
+				},
+				{
+					type: 'warning',
+					timestamp: '10:24:12',
+					message: 'API rate limit approaching threshold'
+				},
+				{
+					type: 'error',
+					timestamp: '10:25:33',
+					message: 'Failed to connect to external service'
+				}
+			]
+		},
+		variant: {
+			type: 'array',
+			value: ['light', 'border'],
+			options: ['dark', 'light', 'compact', 'border']
+		}
+	},
+	render: function()
+	{
+		this.getIcon = (type) =>
+		{
+			const icons = {
+				info: 'info',
+				success: 'check_circle',
+				warning: 'warning',
+				error: 'error'
+			};
+			return icons[type] || 'circle';
+		};
+
+		return `
+			<div class="holder" :variant="variant.join(' ')">
+				<div dh-for="log in logs" class="log-entry" :type="log.type">
+					<span class="timestamp">{{ log.timestamp }}</span>
+					<i class="icon">{{ getIcon(log.type) }}</i>
+					<span class="message">{{ log.message }}</span>
+				</div>
+			</div>
+		`;
+	}
+});