rune-lab 0.0.1 → 0.0.2-alpha-2

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/components/layout/ThemeSelector.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    // jdaslkfjsklsajdklj
     import { themeStore } from '../../stores/theme.svelte.js';
     
     // Local state using runes
@@ -16,7 +17,7 @@
     }
 </script>
 
-<div class="theme-selector">
+<div class="relative">
     <button 
         class="btn"
         onclick={() => showDropdown = !showDropdown}
@@ -25,12 +26,12 @@
     </button>
 
     {#if showDropdown}
-        <ul class="theme-menu">
+        <ul class="absolute right-0 top-full mt-2 min-w-[150px] p-2 bg-base-100 border border-base-300 rounded-lg shadow-lg">
             {#each themes as theme}
                 <li>
                     <button
-                        class="theme-option"
-                        class:active={themeStore.currentTheme === theme.value}
+                        class="w-full flex items-center gap-2 px-2 py-2 text-left hover:bg-base-200 transition-colors duration-200 rounded-lg
+                               {themeStore.currentTheme === theme.value ? 'bg-base-300' : ''}"
                         onclick={() => handleThemeSelect(theme.value)}
                     >
                         <span>{theme.icon}</span>
@@ -40,39 +41,4 @@
             {/each}
         </ul>
     {/if}
-</div>
-
-<style>
-    .theme-selector {
-        position: relative;
-    }
-
-    .theme-menu {
-        position: absolute;
-        right: 0;
-        top: 100%;
-        margin-top: 0.5rem;
-        background: var(--background);
-        border: 1px solid var(--border);
-        border-radius: 0.5rem;
-        padding: 0.5rem;
-        min-width: 150px;
-    }
-
-    .theme-option {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem;
-        width: 100%;
-        text-align: left;
-    }
-
-    .theme-option:hover {
-        background: var(--hover);
-    }
-
-    .active {
-        background: var(--active);
-    }
-</style>
+</div>

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 { type SchemaMetadata } from "ts-forge";
+export interface DatabaseState {
+    schemas: Record<string, 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, SchemaMetadata>;
+    tables: Record<string, Record<string, any>>;
+    activeSchema: string | null;
+    activeTable: string | null;
+    showModal: boolean;
+    currentOperation: "GET" | "POST" | "PUT" | "DELETE" | null;
+    currentTables: SchemaMetadata | null;
+    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;
+export {};

package/dist/stores/db.svelte.js

@@ -0,0 +1,51 @@
+// src/lib/stores/database.svelte.ts
+import { BaseClient, TsForge } from "ts-forge";
+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 BaseClient('http://localhost:8000/');
+    forge = new 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 {};