@zveltio/components 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 liviumarianiordache
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# Svelto Components - Final Clean
+
+**84 componente** | Un singur navbar: SmartNavbar
+
+## Navigation
+
+**SmartNavbar** - navbar universal cu toate funcțiile:
+- Employee UI (ex-IntranetNavbar logic)
+- Partners UI (ex-PartnersNavbar logic)
+- Public/Guest UI (ex-PublicNavbar logic)
+- User menu integrat (ex-UserDropdown)
+- Poziție configurabilă: top/bottom/left/right
+- Theme toggle integrat
+- Mobile responsive
+- Nested navigation
+- Role filtering
+
+**Navigation (3):**
+- SmartNavbar ← folosește DOAR pe acesta
+- NavLink
+- NavGroup
+
+## Layout (5)
+Header, Sidebar, Navbar, Breadcrumbs, PageLayout
+
+## Common (34)
+Button, Input, Select, Modal, Card, Loading, Alert, Avatar, Badge, Checkbox, Divider, Drawer, DynamicDataTable, Pagination, PermissionGuard, SearchableSelect, SecureField, StatusBadge, Toaster, Tooltip, TrustBadge, ConfirmationDialog, EmptyState, LoadingSkeleton, PendingIndicator, TeamChat, Stat, Indicator, MapView, AddressInput, ExportActions, ThemeToggle, ViewSwitcher, WorkflowActions
+
+## Alte Categorii
+Admin (9) | AI (5) | Views (16) | Charts (2) | Dashboard (2) | Forms (1) | Reports (3) | Attachments (1) | Audit (2) | Pages (1)
+
+## Features
+- Svelte 5 Runes
+- Props-based
+- DaisyUI/Tailwind
+- Zero duplicate navbars
+
+## License
+MIT

package/admin/ColumnList/ColumnList.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	/**
+	 * ColumnList - Table columns editor
+	 */
+	interface Column {
+		name: string;
+		type: string;
+		nullable: boolean;
+		default_value?: string;
+		is_primary?: boolean;
+		is_unique?: boolean;
+	}
+
+	let {
+		columns = $bindable<Column[]>([]),
+		dataTypes = ['text', 'varchar', 'integer', 'bigint', 'decimal', 'boolean', 'date', 'timestamp', 'uuid', 'jsonb']
+	}: {
+		columns?: Column[];
+		dataTypes?: string[];
+	} = $props();
+
+	function addColumn() {
+		columns = [...columns, { name: '', type: 'text', nullable: true }];
+	}
+
+	function removeColumn(index: number) {
+		columns = columns.filter((_, i) => i !== index);
+	}
+</script>
+
+<div>
+	<div class="flex items-center justify-between mb-3">
+		<h3 class="font-semibold">Columns</h3>
+		<button class="btn btn-sm btn-primary" onclick={addColumn}>+ Add Column</button>
+	</div>
+
+	<div class="space-y-2">
+		{#each columns as col, i}
+			<div class="grid grid-cols-12 gap-2 items-center p-3 bg-base-200 rounded-lg">
+				<input
+					type="text"
+					bind:value={col.name}
+					placeholder="name"
+					class="col-span-4 input input-sm input-bordered font-mono"
+				/>
+				<select bind:value={col.type} class="col-span-3 select select-sm select-bordered">
+					{#each dataTypes as t}
+						<option value={t}>{t}</option>
+					{/each}
+				</select>
+				<div class="col-span-4 flex gap-2 text-xs">
+					<label class="flex items-center gap-1 cursor-pointer">
+						<input type="checkbox" bind:checked={col.nullable} class="checkbox checkbox-xs" />
+						Null
+					</label>
+					<label class="flex items-center gap-1 cursor-pointer">
+						<input type="checkbox" bind:checked={col.is_unique} class="checkbox checkbox-xs" />
+						Unique
+					</label>
+				</div>
+				<button class="col-span-1 btn btn-xs btn-ghost text-error" onclick={() => removeColumn(i)}>✕</button>
+			</div>
+		{/each}
+		{#if columns.length === 0}
+			<div class="text-center py-4 text-sm opacity-50">No columns</div>
+		{/if}
+	</div>
+</div>

package/admin/ColumnList/component.json

@@ -0,0 +1,13 @@
+{
+  "name": "ColumnList",
+  "category": "admin",
+  "description": "Editable list of table columns",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "columns": "$bindable<Column[]>",
+    "dataTypes": "string[] - Available data types"
+  }
+}

package/admin/MetadataSettings/MetadataSettings.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	/**
+	 * MetadataSettings - Table metadata editor (display name, menu group, audit)
+	 */
+	interface Metadata {
+		displayName?: string;
+		menuGroup?: string;
+		isLoggable?: boolean;
+		icon?: string;
+	}
+
+	let {
+		metadata = $bindable<Metadata>({})
+	}: {
+		metadata?: Metadata;
+	} = $props();
+</script>
+
+<div class="space-y-4 p-4 bg-base-200 rounded-lg">
+	<h4 class="font-semibold">Table Metadata</h4>
+	
+	<div class="form-control">
+		<label class="label"><span class="label-text-alt">Display Name</span></label>
+		<input
+			type="text"
+			bind:value={metadata.displayName}
+			placeholder="User Profiles"
+			class="input input-sm input-bordered"
+		/>
+	</div>
+
+	<div class="form-control">
+		<label class="label"><span class="label-text-alt">Menu Group</span></label>
+		<input
+			type="text"
+			bind:value={metadata.menuGroup}
+			placeholder="Administration"
+			class="input input-sm input-bordered"
+		/>
+	</div>
+
+	<div class="form-control">
+		<label class="label"><span class="label-text-alt">Icon</span></label>
+		<input
+			type="text"
+			bind:value={metadata.icon}
+			placeholder="Users"
+			class="input input-sm input-bordered"
+		/>
+	</div>
+
+	<div class="form-control">
+		<label class="label cursor-pointer justify-start gap-2">
+			<input
+				type="checkbox"
+				bind:checked={metadata.isLoggable}
+				class="toggle toggle-sm toggle-primary"
+			/>
+			<span class="label-text">Enable Audit Log</span>
+		</label>
+	</div>
+</div>

package/admin/MetadataSettings/component.json

@@ -0,0 +1,9 @@
+{
+  "name": "MetadataSettings",
+  "category": "admin",
+  "description": "Table metadata editor (display name, menu group, audit logging)",
+  "dependencies": {"packages": [], "components": []},
+  "props": {
+    "metadata": "$bindable<Metadata> - {displayName?, menuGroup?, isLoggable?, icon?}"
+  }
+}

package/admin/RelationshipManager/RelationshipManager.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	/**
+	 * RelationshipManager - Foreign key relationship viewer
+	 */
+	interface Constraint {
+		constraint_type: string;
+		constraint_name: string;
+		column_name?: string;
+		foreign_table?: string;
+		foreign_column?: string;
+		definition?: string;
+	}
+
+	let {
+		tableName,
+		constraints = []
+	}: {
+		tableName: string;
+		constraints: Constraint[];
+	} = $props();
+
+	const foreignKeys = $derived(constraints.filter(c => c.constraint_type === 'FOREIGN KEY'));
+	const uniqueConstraints = $derived(constraints.filter(c => c.constraint_type === 'UNIQUE'));
+	const checkConstraints = $derived(constraints.filter(c => c.constraint_type === 'CHECK'));
+</script>
+
+<div class="space-y-4">
+	<div class="flex items-center gap-2">
+		<h3 class="font-semibold">Relationships & Constraints</h3>
+		<span class="badge badge-sm">{constraints.length}</span>
+	</div>
+
+	<div class="alert alert-info">
+		<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+		</svg>
+		<span class="text-sm">Viewing existing constraints. Full editor coming soon.</span>
+	</div>
+
+	{#if foreignKeys.length > 0}
+		<div>
+			<h4 class="text-xs uppercase font-bold opacity-50 mb-2">Foreign Keys ({foreignKeys.length})</h4>
+			<div class="space-y-2">
+				{#each foreignKeys as fk}
+					<div class="p-3 bg-base-200 rounded-lg">
+						<div class="font-mono text-sm font-bold">{fk.constraint_name}</div>
+						{#if fk.definition}
+							<div class="text-xs opacity-60 mt-1">{fk.definition}</div>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if uniqueConstraints.length > 0}
+		<div>
+			<h4 class="text-xs uppercase font-bold opacity-50 mb-2">Unique Constraints ({uniqueConstraints.length})</h4>
+			<div class="space-y-2">
+				{#each uniqueConstraints as uc}
+					<div class="p-3 bg-base-200 rounded-lg">
+						<div class="font-mono text-sm">{uc.constraint_name}</div>
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if checkConstraints.length > 0}
+		<div>
+			<h4 class="text-xs uppercase font-bold opacity-50 mb-2">Check Constraints ({checkConstraints.length})</h4>
+			<div class="space-y-2">
+				{#each checkConstraints as cc}
+					<div class="p-3 bg-base-200 rounded-lg">
+						<div class="font-mono text-sm">{cc.constraint_name}</div>
+						{#if cc.definition}<div class="text-xs opacity-60 mt-1">{cc.definition}</div>{/if}
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+
+	{#if constraints.length === 0}
+		<div class="text-center py-8 text-sm opacity-50">No constraints defined</div>
+	{/if}
+</div>

package/admin/RelationshipManager/component.json

@@ -0,0 +1,10 @@
+{
+  "name": "RelationshipManager",
+  "category": "admin",
+  "description": "Foreign key and constraint viewer",
+  "dependencies": {"packages": [], "components": []},
+  "props": {
+    "tableName": "string",
+    "constraints": "Constraint[]"
+  }
+}

package/admin/RoleManager/RoleManager.svelte

@@ -0,0 +1,167 @@
+<script lang="ts">
+	/**
+	 * RoleManager - RBAC role management UI
+	 * Standalone, callback-based
+	 */
+	
+	interface Role {
+		id: string;
+		name: string;
+		description: string;
+		allowed_for: 'INTERNAL' | 'PARTNER';
+		parent_role_id?: string | null;
+	}
+	
+	let {
+		roles = [],
+		onSave,
+		onDelete
+	}: {
+		roles: Role[];
+		onSave: (role: Omit<Role, 'id'> | Role) => Promise<void>;
+		onDelete: (roleId: string) => Promise<void>;
+	} = $props();
+
+	let isModalOpen = $state(false);
+	let editingRole = $state<Partial<Role> | null>(null);
+	let saving = $state(false);
+
+	function openNew() {
+		editingRole = {
+			name: '',
+			description: '',
+			allowed_for: 'INTERNAL',
+			parent_role_id: null
+		};
+		isModalOpen = true;
+	}
+
+	function openEdit(role: Role) {
+		editingRole = { ...role };
+		isModalOpen = true;
+	}
+
+	async function handleSave() {
+		if (!editingRole) return;
+		saving = true;
+		try {
+			await onSave(editingRole as Role);
+			isModalOpen = false;
+			editingRole = null;
+		} finally {
+			saving = false;
+		}
+	}
+
+	async function handleDelete(roleId: string) {
+		if (!confirm('Delete this role?')) return;
+		await onDelete(roleId);
+	}
+</script>
+
+<div class="p-4">
+	<div class="flex items-center justify-between mb-4">
+		<h2 class="text-2xl font-bold">Roles</h2>
+		<button class="btn btn-primary" onclick={openNew}>
+			+ New Role
+		</button>
+	</div>
+
+	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+		{#each roles as role}
+			<div class="card bg-base-100 border border-base-200 shadow-sm hover:shadow-md transition">
+				<div class="card-body p-4">
+					<div class="flex items-start justify-between">
+						<div class="flex items-center gap-2">
+							<div class="avatar placeholder">
+								<div class="w-10 rounded-full bg-primary text-primary-content">
+									<span class="text-sm">{role.name.substring(0, 2).toUpperCase()}</span>
+								</div>
+							</div>
+							<div>
+								<h3 class="font-bold">{role.name}</h3>
+								<span class="badge badge-xs {role.allowed_for === 'INTERNAL' ? 'badge-primary' : 'badge-secondary'}">
+									{role.allowed_for}
+								</span>
+							</div>
+						</div>
+						<div class="dropdown dropdown-end">
+							<button tabindex="0" class="btn btn-ghost btn-xs btn-square">
+								<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
+								</svg>
+							</button>
+							<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-32">
+								<li><button onclick={() => openEdit(role)}>Edit</button></li>
+								<li><button class="text-error" onclick={() => handleDelete(role.id)}>Delete</button></li>
+							</ul>
+						</div>
+					</div>
+
+					<p class="text-sm opacity-70 mt-2">{role.description || '—'}</p>
+
+					{#if role.parent_role_id}
+						<div class="text-xs text-info mt-2">
+							Parent: {roles.find(r => r.id === role.parent_role_id)?.name || 'Unknown'}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<!-- Modal -->
+{#if isModalOpen && editingRole}
+	<dialog class="modal modal-open">
+		<div class="modal-box">
+			<h3 class="font-bold text-lg mb-4">{editingRole.id ? 'Edit' : 'Create'} Role</h3>
+
+			<div class="space-y-3">
+				<div class="form-control">
+					<label class="label"><span class="label-text">Name</span></label>
+					<input
+						type="text"
+						bind:value={editingRole.name}
+						class="input input-bordered"
+						placeholder="Administrator"
+					/>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Type</span></label>
+					<select bind:value={editingRole.allowed_for} class="select select-bordered">
+						<option value="INTERNAL">Internal (Employee)</option>
+						<option value="PARTNER">Partner (External)</option>
+					</select>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Parent Role</span></label>
+					<select bind:value={editingRole.parent_role_id} class="select select-bordered">
+						<option value={null}>— None (Top Level) —</option>
+						{#each roles.filter(r => r.id !== editingRole?.id) as r}
+							<option value={r.id}>{r.name}</option>
+						{/each}
+					</select>
+				</div>
+
+				<div class="form-control">
+					<label class="label"><span class="label-text">Description</span></label>
+					<textarea
+						bind:value={editingRole.description}
+						class="textarea textarea-bordered"
+						placeholder="Role description..."
+					></textarea>
+				</div>
+			</div>
+
+			<div class="modal-action">
+				<button class="btn" onclick={() => isModalOpen = false} disabled={saving}>Cancel</button>
+				<button class="btn btn-primary" onclick={handleSave} disabled={saving}>
+					{#if saving}Saving...{:else}Save{/if}
+				</button>
+			</div>
+		</div>
+	</dialog>
+{/if}

package/admin/RoleManager/component.json

@@ -0,0 +1,17 @@
+{
+  "name": "RoleManager",
+  "category": "admin",
+  "description": "RBAC role management with hierarchy support",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "roles": "Role[] - List of roles",
+    "onSave": "(role: Role) => Promise<void> - Save callback",
+    "onDelete": "(roleId: string) => Promise<void> - Delete callback"
+  },
+  "types": {
+    "Role": "{id: string; name: string; description: string; allowed_for: 'INTERNAL' | 'PARTNER'; parent_role_id?: string | null}"
+  }
+}

package/admin/TableDesigner/TableDesigner.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+let {
+    tableName = $bindable(''),
+    columns = $bindable([]),
+    onSave
+}: {
+    tableName?: string;
+    columns?: any[];
+    onSave: (data: any) => Promise<void>;
+} = $props();
+
+function addColumn() {
+    columns = [...columns, { name: '', type: 'text', nullable: true }];
+}
+</script>
+
+<div class="space-y-4">
+    <input bind:value={tableName} placeholder="Table Name" class="input input-bordered w-full" />
+    
+    <div class="space-y-2">
+        {#each columns as col, i}
+            <div class="flex gap-2">
+                <input bind:value={col.name} placeholder="Column Name" class="input input-bordered flex-1" />
+                <select bind:value={col.type} class="select select-bordered">
+                    <option>text</option>
+                    <option>number</option>
+                    <option>boolean</option>
+                    <option>date</option>
+                </select>
+                <button class="btn btn-error btn-square" onclick={() => columns = columns.filter((_, idx) => idx !== i)}>✕</button>
+            </div>
+        {/each}
+    </div>
+    
+    <button class="btn btn-primary" onclick={addColumn}>+ Add Column</button>
+    <button class="btn btn-success" onclick={() => onSave({ tableName, columns })}>Save</button>
+</div>

package/admin/TableDesigner/component.json

@@ -0,0 +1,14 @@
+{
+  "name": "TableDesigner",
+  "category": "admin",
+  "description": "TableDesigner - Svelte 5 component",
+  "dependencies": {
+    "packages": [],
+    "components": []
+  },
+  "props": {
+    "tableName": "$bindable<string>",
+    "columns": "$bindable<Array>",
+    "onSave": "function"
+  }
+}

package/ai/AIFeedback/AIFeedback.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	let {
+		onFeedback
+	}: {
+		onFeedback: (type: 'positive' | 'negative', comment?: string) => Promise<void>;
+	} = $props();
+
+	let showComment = $state(false);
+	let comment = $state('');
+	let submitted = $state(false);
+
+	async function handleFeedback(type: 'positive' | 'negative') {
+		await onFeedback(type, comment || undefined);
+		submitted = true;
+		setTimeout(() => {
+			submitted = false;
+			showComment = false;
+			comment = '';
+		}, 2000);
+	}
+</script>
+
+<div class="flex items-center gap-2">
+	{#if !submitted}
+		<span class="text-xs opacity-60">Was this helpful?</span>
+		<button class="btn btn-xs btn-ghost" onclick={() => handleFeedback('positive')} title="Helpful">👍</button>
+		<button class="btn btn-xs btn-ghost" onclick={() => { showComment = true; }} title="Not helpful">👎</button>
+		
+		{#if showComment}
+			<div class="flex gap-1">
+				<input
+					type="text"
+					bind:value={comment}
+					placeholder="Optional feedback..."
+					class="input input-xs input-bordered w-40"
+				/>
+				<button class="btn btn-xs btn-primary" onclick={() => handleFeedback('negative')}>Send</button>
+			</div>
+		{/if}
+	{:else}
+		<span class="text-xs text-success">✓ Thank you!</span>
+	{/if}
+</div>

package/ai/AIInsightWidget/AIInsightWidget.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	interface Insight {
+		title: string;
+		description: string;
+		confidence?: number;
+		category?: string;
+	}
+
+	let {
+		insights = [],
+		loading = false,
+		onRefresh = null
+	}: {
+		insights: Insight[];
+		loading?: boolean;
+		onRefresh?: (() => Promise<void>) | null;
+	} = $props();
+</script>
+
+<div class="card bg-base-100 border border-base-200">
+	<div class="card-body">
+		<div class="flex items-center justify-between mb-4">
+			<h3 class="card-title text-sm">AI Insights</h3>
+			{#if onRefresh}
+				<button class="btn btn-xs btn-ghost" onclick={onRefresh} disabled={loading}>
+					<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 {loading ? 'animate-spin' : ''}" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+						<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+					</svg>
+				</button>
+			{/if}
+		</div>
+
+		{#if loading}
+			<div class="flex justify-center py-4"><span class="loading loading-spinner"></span></div>
+		{:else if insights.length === 0}
+			<p class="text-sm opacity-60 text-center py-4">No insights available</p>
+		{:else}
+			<div class="space-y-3">
+				{#each insights as insight}
+					<div class="p-3 bg-base-200 rounded-lg">
+						<div class="flex items-start justify-between mb-1">
+							<h4 class="font-semibold text-sm">{insight.title}</h4>
+							{#if insight.confidence}
+								<span class="badge badge-xs">{Math.round(insight.confidence * 100)}%</span>
+							{/if}
+						</div>
+						<p class="text-xs opacity-70">{insight.description}</p>
+						{#if insight.category}
+							<span class="badge badge-xs badge-primary mt-2">{insight.category}</span>
+						{/if}
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</div>