rune-lab 0.0.1 → 0.0.2-alpha-1

package/dist/components/UIShowcase.svelte

@@ -58,8 +58,6 @@
   ];
 </script>
 
-<ThemeSelector />
-
 <div class="min-h-screen bg-base-200 p-4">
   <!-- Header with Theme Demo -->
   <div class="text-center mb-8 hero bg-base-100 rounded-box p-8">
@@ -70,6 +68,7 @@
         <div class="flex justify-center gap-2">
           <button class="btn btn-primary" onclick={() => modalOpen = true}>Open Modal</button>
           <button class="btn btn-secondary" onclick={() => drawerOpen = true}>Open Drawer</button>
+          <ThemeSelector />
         </div>
       </div>
     </div>

package/dist/components/dt/Altharun.svelte

@@ -0,0 +1,96 @@
+<!-- Altharun (from Old Norse "aldir" = age, wisdom) -->
+<!-- src/lib/components/data/Altharun.svelte -->
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { databaseStore } from 'rune-lab';
+
+    onMount(async () => {
+        await databaseStore.init();
+    });
+    
+    // Debug the schemas whenever they change
+    $effect(() => {
+        console.log('Current schemas:', Object.keys(databaseStore.schemas));
+        if (databaseStore.activeSchema) {
+            console.log('Active schema tables:', 
+                Object.keys(databaseStore.schemas[databaseStore.activeSchema]));
+        }
+    });
+</script>
+
+<div class="container mx-auto px-4 py-8">
+    <h1 class="text-3xl font-bold mb-8">Database Management</h1>
+
+    {#each Object.keys(databaseStore.schemas) as schemaName}
+        {@const currentSchema = databaseStore.schemas[schemaName]}
+        <div class="mb-6">
+            <button
+                class="w-full flex items-center justify-between p-4 bg-base-200 rounded-lg"
+                onclick={() => databaseStore.toggleSchema(schemaName)}
+            >
+                <span class="text-xl font-semibold">{schemaName}</span>
+                <span class="transform transition-transform duration-200" 
+                      class:rotate-180={databaseStore.activeSchema === schemaName}>
+                    ▼
+                </span>
+            </button>
+
+            {#if databaseStore.activeSchema === schemaName && currentSchema}
+                <div class="mt-4 space-y-2 pl-4">
+                    {#each Object.keys(currentSchema) as tableName}
+                        <div class="card bg-base-100 shadow-lg hover:shadow-xl transition-all">
+                            <div class="card-body">
+                                <div class="flex justify-between items-center mb-4">
+                                    <h3 class="card-title text-xl">{tableName}</h3>
+                                    <span class="badge badge-outline">{currentSchema[tableName].columns.length} columns</span>
+                                </div>
+
+                                <div class="overflow-x-auto">
+                                    <table class="table table-sm w-full">
+                                        <thead>
+                                            <tr>
+                                                <th>Column</th>
+                                                <th>Type</th>
+                                                <th class="text-center">Key</th>
+                                                <th class="text-center">Required</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody>
+                                            {#each currentSchema[tableName].columns as column}
+                                                <tr class="hover">
+                                                    <td class="font-mono">{column.name}</td>
+                                                    <td class="text-sm opacity-75">{column.type}</td>
+                                                    <td class="text-center">
+                                                        {#if column.is_primary_key}
+                                                            <span class="badge badge-primary badge-sm">PK</span>
+                                                        {:else if column.is_foreign_key}
+                                                            <span class="badge badge-secondary badge-sm">FK</span>
+                                                        {/if}
+                                                    </td>
+                                                    <td class="text-center">
+                                                        {#if column.is_primary_key || !column.nullable}
+                                                            <span class="text-error">*</span>
+                                                        {/if}
+                                                    </td>
+                                                </tr>
+                                            {/each}
+                                        </tbody>
+                                    </table>
+                                </div>
+
+                                <div class="card-actions justify-end mt-4">
+                                    <button 
+                                        class="btn btn-sm btn-primary"
+                                        onclick={() => databaseStore.setActiveTable(schemaName, tableName)}
+                                    >
+                                        Manage Table
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+        </div>
+    {/each}
+</div>

package/dist/components/dt/Altharun.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Altharun: import("svelte").Component<Record<string, never>, {}, "">;
+type Altharun = ReturnType<typeof Altharun>;
+export default Altharun;

package/dist/components/dt/Kyntharil.svelte

@@ -0,0 +1,337 @@
+<!-- Kyntharil (from Old Norse "kyn" = kind, kin + suffix -tharil suggesting evolution) -->
+<!-- src/lib/components/dt/Kyntharil.svelte -->
+<script lang="ts">
+    import { Gear, Database, User, X } from 'phosphor-svelte';
+    import { appData } from '../../stores/app.svelte.js';
+    import { apiStore } from '../../stores/api.svelte.js';
+    import { authStore } from '../../stores/auth.svelte.js';
+
+    // Local state management with runes
+    let isOpen = $state(false);
+    let activeTab = $state('app');
+    let testApiConnection = $state(false);
+    let showToast = $state(false);
+    let toastMessage = $state('');
+    let toastType = $state<'success' | 'error'>('success');
+
+    // Form states using runes
+    let appForm = $state({
+        name: appData.name,
+        version: appData.version,
+        description: appData.description,
+        author: appData.author
+    });
+
+    let apiForm = $state({
+        URL: apiStore.URL,
+        VERSION: apiStore.VERSION,
+        TIMEOUT: apiStore.TIMEOUT
+    });
+
+    let authForm = $state({
+        id: authStore.user?.id || '',
+        name: authStore.user?.name || '',
+        email: authStore.user?.email || '',
+        role: authStore.user?.role || 'user'
+    });
+
+    // Toast handler
+    function displayToast(message: string, type: 'success' | 'error' = 'success') {
+        toastMessage = message;
+        toastType = type;
+        showToast = true;
+        setTimeout(() => showToast = false, 3000);
+    }
+
+    // Form submission handlers
+    function handleAppSubmit() {
+        appData.init(appForm);
+        displayToast('App settings updated successfully');
+    }
+
+    async function handleApiSubmit() {
+        apiStore.init(apiForm);
+        if (testApiConnection) {
+            try {
+                await apiStore.checkConnection();
+                displayToast(
+                    apiStore.IS_CONNECTED ? 'API connected successfully' : 'API connection failed', 
+                    apiStore.IS_CONNECTED ? 'success' : 'error'
+                );
+            } catch (error) {
+                displayToast('API connection check failed', 'error');
+            }
+        }
+    }
+
+    function handleAuthSubmit() {
+        if (authStore.isAuthenticated) {
+            authStore.login({
+                id: authForm.id,
+                name: authForm.name,
+                email: authForm.email,
+                role: authForm.role as 'admin' | 'staff' | 'user'
+            });
+            displayToast('Auth settings updated successfully');
+        } else {
+            displayToast('Please log in first', 'error');
+        }
+    }
+
+    // Tab configuration
+    const tabs = [
+        { id: 'app', icon: Gear, label: 'App Settings' },
+        { id: 'api', icon: Database, label: 'API Configuration' },
+        { id: 'auth', icon: User, label: 'Auth Management' }
+    ];
+</script>
+
+<div class="fixed bottom-4 right-4 z-50">
+    <!-- Toggle Button -->
+    <button
+        class="btn btn-circle btn-lg btn-primary"
+        onclick={() => isOpen = !isOpen}
+        aria-label="Toggle Store Manager"
+    >
+        <Gear size={24} class={isOpen ? 'animate-spin' : ''} />
+    </button>
+
+    <!-- Manager Panel -->
+    {#if isOpen}
+        <div class="fixed inset-0 bg-base-300 bg-opacity-50 backdrop-blur-sm">
+            <div class="absolute right-0 top-0 h-full w-96 bg-base-100 shadow-xl">
+                <!-- Header -->
+                <div class="flex items-center justify-between p-4 border-b border-base-200">
+                    <h2 class="text-xl font-bold">Store Manager</h2>
+                    <button
+                        class="btn btn-ghost btn-circle"
+                        onclick={() => isOpen = false}
+                        aria-label="Close"
+                    >
+                        <X size={20} />
+                    </button>
+                </div>
+
+                <!-- Tabs -->
+                <div class="tabs tabs-boxed m-4">
+                    {#each tabs as tab}
+                        <button
+                            class="tab flex-1 {activeTab === tab.id ? 'tab-active' : ''}"
+                            onclick={() => activeTab = tab.id}
+                        >
+                            <tab.icon size={16} class="mr-2" />
+                            {tab.label}
+                        </button>
+                    {/each}
+                </div>
+
+                <!-- Content -->
+                <div class="p-4">
+                    {#if activeTab === 'app'}
+                        <form class="space-y-4" onsubmit={handleAppSubmit}>
+                            <div class="form-control">
+                                <label class="label" for="app-name">
+                                    <span class="label-text">App Name</span>
+                                </label>
+                                <input
+                                    id="app-name"
+                                    type="text"
+                                    class="input input-bordered"
+                                    bind:value={appForm.name}
+                                />
+                            </div>
+
+                            <div class="form-control">
+                                <label class="label" for="app-version">
+                                    <span class="label-text">Version</span>
+                                </label>
+                                <input
+                                    id="app-version"
+                                    type="text"
+                                    class="input input-bordered"
+                                    bind:value={appForm.version}
+                                />
+                            </div>
+
+                            <div class="form-control">
+                                <label class="label" for="app-description">
+                                    <span class="label-text">Description</span>
+                                </label>
+                            </div>
+
+                            <div class="form-control">
+                                <label class="label" for="app-author">
+                                    <span class="label-text">Author</span>
+                                </label>
+                                <input
+                                    id="app-author"
+                                    type="text"
+                                    class="input input-bordered"
+                                    bind:value={appForm.author}
+                                />
+                            </div>
+
+                            <button type="submit" class="btn btn-primary w-full">
+                                Update App Settings
+                            </button>
+                        </form>
+
+                    {:else if activeTab === 'api'}
+                        <form class="space-y-4" onsubmit={handleApiSubmit}>
+                            <div class="form-control">
+                                <label class="label" for="api-url">
+                                    <span class="label-text">API URL</span>
+                                </label>
+                                <input
+                                    id="api-url"
+                                    type="url"
+                                    class="input input-bordered"
+                                    bind:value={apiForm.URL}
+                                />
+                            </div>
+
+                            <div class="form-control">
+                                <label class="label" for="api-version">
+                                    <span class="label-text">API Version</span>
+                                </label>
+                                <input
+                                    id="api-version"
+                                    type="text"
+                                    class="input input-bordered"
+                                    bind:value={apiForm.VERSION}
+                                />
+                            </div>
+
+                            <div class="form-control">
+                                <label class="label" for="api-timeout">
+                                    <span class="label-text">Timeout (ms)</span>
+                                </label>
+                                <input
+                                    id="api-timeout"
+                                    type="number"
+                                    class="input input-bordered"
+                                    bind:value={apiForm.TIMEOUT}
+                                />
+                            </div>
+
+                            <div class="form-control">
+                                <label class="label cursor-pointer">
+                                    <span class="label-text">Test connection after update</span>
+                                    <input
+                                        type="checkbox"
+                                        class="toggle toggle-primary"
+                                        bind:checked={testApiConnection}
+                                    />
+                                </label>
+                            </div>
+
+                            <div class="flex gap-2">
+                                <button type="submit" class="btn btn-primary flex-1">
+                                    Update API Settings
+                                </button>
+                                <button
+                                    type="button"
+                                    class="btn btn-outline"
+                                    onclick={() => apiStore.checkConnection()}
+                                >
+                                    Test Connection
+                                </button>
+                            </div>
+                        </form>
+
+                    {:else if activeTab === 'auth'}
+                        <form class="space-y-4" onsubmit={handleAuthSubmit}>
+                            <div class="form-control">
+                                <label class="label" for="auth-id">
+                                    <span class="label-text">User ID</span>
+                                </label>
+                                <input
+                                    id="auth-id"
+                                    type="text"
+                                    class="input input-bordered"
+                                    bind:value={authForm.id}
+                                />
+                            </div>
+
+                            <div class="form-control">
+                                <label class="label" for="auth-name">
+                                    <span class="label-text">Name</span>
+                                </label>
+                                <input
+                                    id="auth-name"
+                                    type="text"
+                                    class="input input-bordered"
+                                    bind:value={authForm.name}
+                                />
+                            </div>
+
+                            <div class="form-control">
+                                <label class="label" for="auth-email">
+                                    <span class="label-text">Email</span>
+                                </label>
+                                <input
+                                    id="auth-email"
+                                    type="email"
+                                    class="input input-bordered"
+                                    bind:value={authForm.email}
+                                />
+                            </div>
+
+                            <div class="form-control">
+                                <label class="label" for="auth-role">
+                                    <span class="label-text">Role</span>
+                                </label>
+                                <select
+                                    id="auth-role"
+                                    class="select select-bordered"
+                                    bind:value={authForm.role}
+                                >
+                                    <option value="user">User</option>
+                                    <option value="staff">Staff</option>
+                                    <option value="admin">Admin</option>
+                                </select>
+                            </div>
+
+                            <div class="flex gap-2">
+                                <button type="submit" class="btn btn-primary flex-1">
+                                    Update Auth Settings
+                                </button>
+                                <button
+                                    type="button"
+                                    class="btn btn-outline"
+                                    onclick={() => authStore.logout()}
+                                >
+                                    Logout
+                                </button>
+                            </div>
+                        </form>
+                    {/if}
+                </div>
+
+                <!-- Status Bar -->
+                <div class="absolute bottom-0 w-full p-4 bg-base-200 border-t border-base-300">
+                    <div class="flex items-center justify-between text-sm">
+                        <div class="flex items-center gap-2">
+                            <div class="badge badge-sm {apiStore.IS_CONNECTED ? 'badge-success' : 'badge-error'}">
+                                API {apiStore.IS_CONNECTED ? 'Connected' : 'Disconnected'}
+                            </div>
+                            <div class="badge badge-sm {authStore.isAuthenticated ? 'badge-success' : 'badge-error'}">
+                                {authStore.isAuthenticated ? 'Authenticated' : 'Not Authenticated'}
+                            </div>
+                        </div>
+                        <span class="opacity-50">v{appData.version}</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    {/if}
+
+    <!-- Toast Notification -->
+    {#if showToast}
+        <div class="toast toast-end">
+            <div class="alert alert-{toastType}">
+                <span>{toastMessage}</span>
+            </div>
+        </div>
+    {/if}
+</div>

package/dist/components/dt/Kyntharil.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Kyntharil: import("svelte").Component<Record<string, never>, {}, "">;
+type Kyntharil = ReturnType<typeof Kyntharil>;
+export default Kyntharil;

package/dist/components/layout/Footer.svelte

@@ -1,115 +1,88 @@
 <!-- src/lib/components/layout/Footer.svelte -->
 <script lang="ts">
     import { appData } from '../../stores/app.svelte.js';
+    import { footerStore } from '../../stores/layout/footer.svelte.js';
 
-    // Define footer section types
-    interface FooterLink {
-        text: string;
-        href: string;
-    }
-
-    interface FooterSection {
-        title: string;
-        links: FooterLink[];
-    }
-
-    // Footer sections configuration
-    const footerSections: FooterSection[] = [
-        {
-            title: "Product",
-            links: [
-                { text: "Features", href: "/features" },
-                { text: "Docs", href: "/docs" },
-                { text: "API", href: "/api" },
-                { text: "Pricing", href: "/pricing" }
-            ]
-        },
-        {
-            title: "Company",
-            links: [
-                { text: "About", href: "/about" },
-                { text: "Blog", href: "/blog" },
-                { text: "Careers", href: "/careers" },
-                { text: "Contact", href: "/contact" }
-            ]
-        },
-        {
-            title: "Resources",
-            links: [
-                { text: "Community", href: "/community" },
-                { text: "Help Center", href: "/help" },
-                { text: "Status", href: "/status" },
-                { text: "Terms", href: "/terms" }
-            ]
-        }
-    ];
-
+    // Use $derived for reactive configuration
+    let config = $derived(footerStore.config);
+    
     // Current year for copyright
     const currentYear = new Date().getFullYear();
 </script>
 
-<footer class="footer p-10 bg-base-200 text-base-content">
-    <!-- Logo and company info -->
-    <aside class="flex flex-col items-start gap-4">
-        <img 
-            src="/favicon.png" 
-            alt="{appData.name} Logo" 
-            class="h-12 w-12 rounded-lg hover:animate-pulse"
-        />
-        <div>
-            <h2 class="text-lg font-bold">{appData.name}</h2>
-            <p class="text-sm opacity-75">
-                Building better software<br/>
-                since {currentYear}
-            </p>
-        </div>
+{#if config.sections.length > 0}
+    <footer class="footer p-10 bg-base-200 text-base-content">
+        <!-- Logo and company info -->
+        <aside class="flex flex-col items-start gap-4">
+            <img 
+                src="/favicon.png" 
+                alt="{appData.name} Logo" 
+                class="h-12 w-12 rounded-lg hover:animate-pulse"
+            />
+            <div>
+                <h2 class="text-lg font-bold">{appData.name}</h2>
+                <p class="text-sm opacity-75">
+                    Building better software<br/>
+                    since {currentYear}
+                </p>
+            </div>
 
-        <!-- Social media links -->
-        <div class="flex gap-4">
-            <a 
-                href="https://github.com/Yrrrrrf" 
-                aria-label="Visit my GitHub profile"
-                class="btn btn-circle btn-ghost btn-sm hover:text-primary"
-            >
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
-                </svg>
-            </a>
-            <a 
-                href="https://twitter.com" 
-                aria-label="Visit my Twitter profile"
-                class="btn btn-circle btn-ghost btn-sm hover:text-primary"
-            >
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
-                </svg>
-            </a>
-            <a 
-                href="https://linkedin.com" 
-                aria-label="Visit my LinkedIn profile"
-                class="btn btn-circle btn-ghost btn-sm hover:text-primary"
-            >
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
-                    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
-                </svg>
-            </a>
-        </div>
+            <!-- Social media links -->
+            {#if config.showSocialLinks}
+                <div class="flex gap-4">
+                    {#if config.socialLinks.github}
+                        <a href={config.socialLinks.github}
+                        class="btn btn-circle btn-ghost btn-sm hover:text-primary"
+                        aria-label="Visit GitHub profile">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                            </svg>
+                        </a>
+                    {/if}
+                    
+                    {#if config.socialLinks.twitter}
+                        <a href={config.socialLinks.twitter}
+                        class="btn btn-circle btn-ghost btn-sm hover:text-primary"
+                        aria-label="Visit Twitter profile">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+                            </svg>
+                        </a>
+                    {/if}
+                    
+                    {#if config.socialLinks.linkedin}
+                        <a href={config.socialLinks.linkedin}
+                        class="btn btn-circle btn-ghost btn-sm hover:text-primary"
+                        aria-label="Visit LinkedIn profile">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 24 24">
+                                <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+                            </svg>
+                        </a>
+                    {/if}
+                </div>
+            {/if}
+        </aside>
 
-    <!-- Navigation sections -->
-    {#each footerSections as section}
-        <nav>
-            <h6 class="footer-title">{section.title}</h6>
-            {#each section.links as link}
-                <a href={link.href} class="link link-hover">{link.text}</a>
-            {/each}
-        </nav>
-    {/each}
-</footer>
+        <!-- Navigation sections -->
+        {#each config.sections as section}
+            <nav>
+                <h6 class="footer-title">{section.title}</h6>
+                {#each section.links as link}
+                    <a href={link.href} class="link link-hover">{link.text}</a>
+                {/each}
+            </nav>
+        {/each}
+    </footer>
 
-<!-- Copyright footer -->
-<footer class="footer footer-center p-4 bg-base-300 text-base-content">
-    <aside class="flex flex-col items-center gap-2">
-        <p>Copyright © {currentYear} {appData.name} - All rights reserved</p>
-        <p class="text-sm opacity-75">Version {appData.version}</p>
-    </aside>
-</footer>
+    <!-- Copyright footer -->
+    {#if config.showCopyright}
+        <footer class="footer footer-center p-4 bg-base-300 text-base-content">
+            <aside class="flex flex-col items-center gap-2">
+                <p>Copyright © {currentYear} {appData.name} - All rights reserved</p>
+                {#if config.showVersion}
+                    <p class="text-sm opacity-75">Version {appData.version}</p>
+                {/if}
+            </aside>
+        </footer>
+    {/if}
+{/if}

package/dist/components/layout/Footer.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Footer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Footer = InstanceType<typeof Footer>;
+declare const Footer: import("svelte").Component<Record<string, never>, {}, "">;
+type Footer = ReturnType<typeof Footer>;
 export default Footer;

package/dist/components/layout/NavBar.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+    import { 
+        MagnifyingGlass, 
+        Gear, 
+        User, 
+        // Pills, 
+        // Activity,
+        SignIn,
+        SignOut,
+        Bell,
+        ShoppingCart
+    } from 'phosphor-svelte';
+    
+    // Import stores
+    import { appData } from '../../stores/app.svelte.js';
+    import { authStore } from '../../stores/auth.svelte.js';
+    import { themeStore } from '../../stores/theme.svelte.js';
+
+    // Optional components you can import
+    import ThemeSelector from './ThemeSelector.svelte';
+
+    // State using Runes
+    let isSearchActive = $state(false);
+    let searchQuery = $state('');
+    let notificationCount = $state(3);
+
+    // Navigation items with proper typing
+    type NavItem = {
+        icon: any; // PhosphorIcon type
+        label: string;
+        path: string;
+        requiresAuth: boolean;
+    };
+
+    function handleSearch(e: KeyboardEvent) {
+        if (e.key === 'Enter' && searchQuery.trim()) {
+            // Handle search - you might want to emit an event
+            isSearchActive = false;
+        } else if (e.key === 'Escape') {
+            isSearchActive = false;
+        }
+    }
+
+    function handleLogin() {
+        // Example login
+        authStore.login({
+            id: '1',
+            name: 'Test User',
+            email: 'test@example.com',
+            role: 'staff'
+        });
+    }
+</script>
+
+<nav class="navbar bg-base-100">
+    <!-- Logo Section -->
+    <div class="flex-1">
+        <a href="/" class="btn btn-ghost normal-case text-xl gap-2">
+            <div class="w-10 h-10">
+                <img 
+                    src="/favicon.png" 
+                    alt="{appData.name} Logo"
+                    class="w-full h-full object-contain rounded-full hover:animate-spin"
+                />
+            </div>
+            <span>{appData.name}</span>
+        </a>
+    </div>
+
+    <div class="flex-none gap-2">
+
+        <!-- Search -->
+        {#if isSearchActive}
+            <div class="form-control">
+                <input
+                    type="text"
+                    placeholder="Search..."
+                    bind:value={searchQuery}
+                    onkeydown={handleSearch}
+                    class="input input-bordered"
+                />
+            </div>
+        {:else}
+            <button 
+                class="btn btn-ghost btn-circle"
+                onclick={() => isSearchActive = true}
+                aria-label="Search"
+            >
+                <MagnifyingGlass size={20} weight="bold" />
+            </button>
+        {/if}
+
+        <!-- Authenticated Content -->
+        {#if authStore.isAuthenticated}
+            <!-- Notifications -->
+            <div class="dropdown dropdown-end">
+                <button class="btn btn-ghost btn-circle" aria-label="Notifications">
+                    <div class="indicator">
+                        <Bell size={20} weight="bold" />
+                        {#if notificationCount > 0}
+                            <span class="badge badge-sm indicator-item">{notificationCount}</span>
+                        {/if}
+                    </div>
+                </button>
+            </div>
+
+            <!-- User Menu -->
+            <div class="dropdown dropdown-end">
+                <button class="btn btn-ghost btn-circle avatar" aria-label="User menu">
+                    <div class="w-10 rounded-full">
+                        <img src="https://api.dicebear.com/7.x/avataaars/svg?seed={authStore.user?.name}" alt="User avatar" />
+                    </div>
+                </button>
+                <ul class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
+                    <li><a href="/profile"><User size={16} weight="bold" /> Profile</a></li>
+                    <li><a href="/settings"><Gear size={16} weight="bold" /> Settings</a></li>
+                    <li><button onclick={() => authStore.logout()}><SignOut size={16} weight="bold" /> Logout</button></li>
+                </ul>
+            </div>
+        {:else}
+            <!-- Login Button -->
+            <button class="btn btn-primary btn-sm" onclick={handleLogin}>
+                <SignIn size={16} weight="bold" />
+                Sign In
+            </button>
+        {/if}
+
+        <!-- Theme Selector -->
+         <!-- if isAuthenticated show the theme selector -->
+        {#if authStore.isAuthenticated}
+            <ThemeSelector />
+        {/if}
+    </div>
+</nav>

package/dist/components/layout/NavBar.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const NavBar: import("svelte").Component<Record<string, never>, {}, "">;
+type NavBar = ReturnType<typeof NavBar>;
+export default NavBar;

package/dist/index.d.ts

@@ -1,7 +1,13 @@
 export { default as UIShowcase } from './components/UIShowcase.svelte';
-export { appData, type AppData } from './stores/app.svelte.js';
-export { apiStore, type ApiStore } from './stores/api.svelte.js';
+export { default as Altharun } from './components/dt/Altharun.svelte';
+export { default as Kyntharil } from './components/dt/Kyntharil.svelte';
+export { default as NavBar } from './components/layout/NavBar.svelte';
 export { default as UrlDisplay } from './components/layout/URLDisplay.svelte';
 export { default as Footer } from './components/layout/Footer.svelte';
 export { themeStore } from './stores/theme.svelte.js';
 export { default as ThemeSelector } from './components/layout/ThemeSelector.svelte';
+export { footerStore, type FooterLink, type FooterConfig, type FooterSection } from './stores/layout/footer.svelte.js';
+export { appData, type AppData } from './stores/app.svelte.js';
+export { apiStore, type ApiStore } from './stores/api.svelte.js';
+export { authStore, type AuthState } from './stores/auth.svelte.js';
+export { databaseStore, type DatabaseState, } from './stores/db.svelte.js';

package/dist/index.js

@@ -2,10 +2,15 @@
 // * UI Library entry point...
 // ^ UI Showcase
 export { default as UIShowcase } from './components/UIShowcase.svelte';
-// ^ App related components
-export { appData } from './stores/app.svelte.js';
-export { apiStore } from './stores/api.svelte.js';
+// * RUENES OF...
+// * Kyntharil 
+// *    from Old Norse "kyn" = kind, kin + suffix -tharil suggesting evolution
+export { default as Altharun } from './components/dt/Altharun.svelte';
+// * Altharun
+// *    from Old Norse "aldir" = age, wisdom
+export { default as Kyntharil } from './components/dt/Kyntharil.svelte';
 // layout related components
+export { default as NavBar } from './components/layout/NavBar.svelte';
 export { default as UrlDisplay } from './components/layout/URLDisplay.svelte';
 export { default as Footer } from './components/layout/Footer.svelte';
 // ^ data related components
@@ -23,3 +28,14 @@ export { default as ThemeSelector } from './components/layout/ThemeSelector.svel
 // export * from './components/tools/qr.js';
 // export * from './components/tools/uuid.js';
 // export * from './components/tools/validate.js';
+// * I don't know if this is some allusion or something...
+// * But I think that if I import this later, (I mean, at last)
+// * This fix some of the problems with the store management...
+// * I don't know why, but it works...
+// todo: investigate why this works...
+// ^ App related components
+export { footerStore } from './stores/layout/footer.svelte.js';
+export { appData } from './stores/app.svelte.js';
+export { apiStore } from './stores/api.svelte.js';
+export { authStore } from './stores/auth.svelte.js';
+export { databaseStore, } from './stores/db.svelte.js';

package/dist/stores/app.svelte.js

@@ -12,7 +12,7 @@ class AppStore {
             this.description = data.description;
         if (data.author)
             this.author = data.author;
-        // console.clear();
+        console.clear();
         console.log('🔮 App initialized:', {
             name: this.name,
             version: this.version,

package/dist/stores/auth.svelte.d.ts

@@ -0,0 +1,19 @@
+export interface User {
+    id: string;
+    name: string;
+    email: string;
+    role: 'admin' | 'staff' | 'user';
+}
+export interface AuthState {
+    isAuthenticated: boolean;
+    user: User | null;
+}
+declare class AuthStore {
+    isAuthenticated: boolean;
+    user: User | null;
+    login(user: User): void;
+    logout(): void;
+    init(initialState?: Partial<AuthState>): void;
+}
+export declare const authStore: AuthStore;
+export {};

package/dist/stores/auth.svelte.js

@@ -0,0 +1,26 @@
+// src/lib/stores/auth.svelte.ts
+class AuthStore {
+    isAuthenticated = $state(false);
+    user = $state(null);
+    login(user) {
+        this.isAuthenticated = true;
+        this.user = user;
+        console.log('🔐 User logged in:', user);
+    }
+    logout() {
+        this.isAuthenticated = false;
+        this.user = null;
+        console.log('👋 User logged out');
+    }
+    init(initialState) {
+        if (initialState?.isAuthenticated)
+            this.isAuthenticated = initialState.isAuthenticated;
+        if (initialState?.user)
+            this.user = initialState.user;
+        console.log('🔑 Auth initialized:', {
+            isAuthenticated: this.isAuthenticated,
+            user: this.user
+        });
+    }
+}
+export const authStore = new AuthStore();

package/dist/stores/db.svelte.d.ts

@@ -0,0 +1,27 @@
+import { forge as f, crud, base, t_types as t } from 'ts-forge';
+export { f, crud, base, t };
+export interface DatabaseState {
+    schemas: Record<string, f.SchemaMetadata>;
+    tables: Record<string, Record<string, any>>;
+    activeSchema: string | null;
+    activeTable: string | null;
+    showModal: boolean;
+    currentOperation: 'POST' | 'GET' | 'PUT' | 'DELETE' | null;
+}
+declare class DatabaseStore {
+    schemas: Record<string, f.SchemaMetadata>;
+    tables: Record<string, Record<string, any>>;
+    activeSchema: string | null;
+    activeTable: string | null;
+    showModal: boolean;
+    currentOperation: "GET" | "POST" | "PUT" | "DELETE" | null;
+    currentTables: any;
+    toggleSchema(schema: string): void;
+    private baseClient;
+    private forge;
+    setActiveTable(schema: string, table: string): void;
+    setOperation(operation: DatabaseState['currentOperation']): void;
+    handleCrudOperation(operation: DatabaseState['currentOperation']): Promise<void>;
+    init(): Promise<void>;
+}
+export declare const databaseStore: DatabaseStore;

package/dist/stores/db.svelte.js

@@ -0,0 +1,52 @@
+// src/lib/stores/database.svelte.ts
+import { forge as f, crud, base, t_types as t } from 'ts-forge';
+export { f, crud, base, t };
+class DatabaseStore {
+    // Core state with proper initialization
+    schemas = $state({});
+    tables = $state({});
+    activeSchema = $state(null);
+    activeTable = $state(null);
+    showModal = $state(false);
+    currentOperation = $state(null);
+    // Change this derived state
+    currentTables = $derived(this.activeSchema ? this.schemas[this.activeSchema] : null);
+    toggleSchema(schema) {
+        // Simple toggle, don't clear if already active
+        this.activeSchema = schema;
+        console.log('Active schema:', this.activeSchema, 'Tables:', this.schemas[schema]);
+    }
+    // Base client
+    baseClient = new base.BaseClient('http://localhost:8000/');
+    forge = new f.TsForge(this.baseClient);
+    // Table management
+    setActiveTable(schema, table) {
+        this.activeSchema = schema;
+        this.activeTable = table;
+        console.log('Set active:', { schema, table });
+    }
+    // CRUD operations
+    setOperation(operation) {
+        this.currentOperation = operation;
+        this.showModal = !!operation;
+    }
+    async handleCrudOperation(operation) {
+        this.setOperation(operation);
+    }
+    // Initialize the store
+    async init() {
+        try {
+            await this.forge.init();
+            this.schemas = this.forge.schemaLookup;
+            console.log('Database store initialized:', {
+                schemas: Object.keys(this.schemas)
+            });
+        }
+        catch (error) {
+            console.error('Database store initialization failed:', error);
+            throw error;
+        }
+    }
+}
+// Export singleton instance
+export const databaseStore = new DatabaseStore();

package/dist/stores/layout/footer.svelte.d.ts

@@ -0,0 +1,35 @@
+export interface FooterLink {
+    text: string;
+    href: string;
+}
+export interface FooterSection {
+    title: string;
+    links: FooterLink[];
+}
+export interface FooterConfig {
+    sections: FooterSection[];
+    socialLinks: {
+        github?: string;
+        twitter?: string;
+        linkedin?: string;
+    };
+    showSocialLinks: boolean;
+    showVersion: boolean;
+    showCopyright: boolean;
+}
+declare class FooterStore {
+    private _config;
+    get config(): FooterConfig;
+    init(config: Partial<FooterConfig>): this;
+    reset(): this;
+    addSection(section: FooterSection): this;
+    updateSection(index: number, section: FooterSection): this;
+    removeSection(index: number): this;
+    clearSections(): this;
+    updateSocialLinks(links: Partial<FooterConfig['socialLinks']>): this;
+    showSocialLinks(show: boolean): this;
+    showVersion(show: boolean): this;
+    showCopyright(show: boolean): this;
+}
+export declare const footerStore: FooterStore;
+export {};

package/dist/stores/layout/footer.svelte.js

@@ -0,0 +1,73 @@
+// src/lib/stores/footer.svelte.ts
+const defaultConfig = {
+    sections: [],
+    socialLinks: {},
+    showSocialLinks: false,
+    showVersion: false,
+    showCopyright: false
+};
+class FooterStore {
+    // State management with runes
+    _config = $state({ ...defaultConfig });
+    // Getter for the config to avoid direct state access
+    get config() {
+        return this._config;
+    }
+    // Initialize with custom configuration
+    init(config) {
+        this._config = {
+            sections: config.sections || [],
+            socialLinks: config.socialLinks || {},
+            showSocialLinks: config.showSocialLinks ?? false,
+            showVersion: config.showVersion ?? false,
+            showCopyright: config.showCopyright ?? false
+        };
+        return this;
+    }
+    // Set default state
+    reset() {
+        this._config = { ...defaultConfig };
+        return this;
+    }
+    // Section management
+    addSection(section) {
+        this._config.sections = [...this._config.sections, section];
+        return this;
+    }
+    updateSection(index, section) {
+        if (index >= 0 && index < this._config.sections.length) {
+            const newSections = [...this._config.sections];
+            newSections[index] = section;
+            this._config.sections = newSections;
+        }
+        return this;
+    }
+    removeSection(index) {
+        this._config.sections = this._config.sections.filter((_, i) => i !== index);
+        return this;
+    }
+    clearSections() {
+        this._config.sections = [];
+        return this;
+    }
+    // Social links management
+    updateSocialLinks(links) {
+        this._config.socialLinks = { ...this._config.socialLinks, ...links };
+        return this;
+    }
+    // Show/Hide features
+    showSocialLinks(show) {
+        this._config.showSocialLinks = show;
+        return this;
+    }
+    showVersion(show) {
+        this._config.showVersion = show;
+        return this;
+    }
+    showCopyright(show) {
+        this._config.showCopyright = show;
+        return this;
+    }
+}
+// Export singleton instance
+export const footerStore = new FooterStore();

package/package.json

@@ -1,74 +1,75 @@
-{
-	"name": "rune-lab",
-	"version": "0.0.1",
-	"type": "module",
-	"license": "MIT",
-	"author": "Yrrrrrf <fer.rezac@outlook.com>",
-	"repository": {
-	  "type": "git",
-	  "url": "git+https://github.com/Yrrrrrf/rune-lab.git"
-	},
-	"keywords": [
-	  "svelte",
-	  "components",
-	  "ui",
-	  "daisyui",
-	  "tailwind"
-	],
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js",
-			"default": "./dist/index.js"
-		},
-		"./themes": {
-			"types": "./dist/theme/static.d.ts",
-			"default": "./dist/theme/static.js"
-		}
-	},
-	"files": [
-		"dist",
-		"dist/stores/const/themes.js"
-	],
-	"svelte": "./dist/index.js",
-	"scripts": {
-		"build": "svelte-kit sync && svelte-package",
-		"check": "svelte-check --tsconfig ./tsconfig.json",
-		"dev": "vite dev",
-		"watch": "bun watch.ts",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-	},
-	"sideEffects": [
-		"**/*.css"
-	],
-	"types": "./dist/index.d.ts",
-	"peerDependencies": {
-		"svelte": "^5.0.0",
-		"tailwindcss": "^3.4.9",
-		"daisyui": "^4.12.23"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^3.0.0",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0",
-		"autoprefixer": "^10.4.20",
-		"daisyui": "^4.12.23",
-		"publint": "^0.2.0",
-		"svelte": "^5.0.0",
-		"svelte-check": "^4.0.0",
-		"tailwindcss": "^3.4.9",
-		"typescript": "^5.0.0",
-		"vite": "^5.4.11"
-	},
-	"dependencies": {
-		"@tailwindcss/container-queries": "^0.1.1",
-		"@tailwindcss/forms": "^0.5.9",
-		"@tailwindcss/typography": "^0.5.15",
-		"@types/bun": "^1.1.14",
-		"phosphor-svelte": "^3.0.1"
-	}
-}
+{
+	"name": "rune-lab",
+	"version": "0.0.2-alpha-1",
+	"type": "module",
+	"license": "MIT",
+	"author": "Yrrrrrf <fer.rezac@outlook.com>",
+	"repository": {
+	  "type": "git",
+	  "url": "git+https://github.com/Yrrrrrf/rune-lab.git"
+	},
+	"keywords": [
+	  "svelte",
+	  "components",
+	  "ui",
+	  "daisyui",
+	  "tailwind"
+	],
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./themes": {
+			"types": "./dist/theme/static.d.ts",
+			"default": "./dist/theme/static.js"
+		}
+	},
+	"files": [
+		"dist",
+		"dist/stores/const/themes.js"
+	],
+	"svelte": "./dist/index.js",
+	"scripts": {
+		"build": "svelte-kit sync && svelte-package",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"dev": "vite dev",
+		"watch": "bun watch.ts",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"types": "./dist/index.d.ts",
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"tailwindcss": "^3.4.9",
+		"daisyui": "^4.12.23"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/package": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
+		"autoprefixer": "^10.4.20",
+		"daisyui": "^4.12.23",
+		"publint": "^0.2.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"tailwindcss": "^3.4.9",
+		"typescript": "^5.0.0",
+		"vite": "^5.4.11"
+	},
+	"dependencies": {
+		"@tailwindcss/container-queries": "^0.1.1",
+		"@tailwindcss/forms": "^0.5.9",
+		"@tailwindcss/typography": "^0.5.15",
+		"@types/bun": "^1.1.14",
+		"phosphor-svelte": "^3.0.1",
+		"ts-forge": "0.0.3"
+	}
+}