@indexeddb-orm/idb-orm 0.0.1

package/svelte-demo-app/src/routes/+layout.svelte

@@ -0,0 +1,228 @@
+<script>
+  import { onMount, setContext } from 'svelte';
+  import { 
+    users, 
+    tabIndex, 
+    mobileOpen, 
+    syncStatus, 
+    userStats, 
+    allUsers, 
+    allPosts, 
+    allProfiles, 
+    postStats,
+    loadUsers,
+    loadLiveQueryData
+  } from '../stores/appStore.js';
+  import MainInfo from '../components/MainInfo.svelte';
+  import Actions from '../components/Actions.svelte';
+  import LiveQueryDemo from '../components/LiveQueryDemo.svelte';
+  import TypeScriptDemo from '../components/TypeScriptDemo.svelte';
+  import PostsLiveQueryDemo from '../components/PostsLiveQueryDemo.svelte';
+  import CloudSyncDemo from '../components/CloudSyncDemo.svelte';
+
+  // Set context for child components
+  setContext('users', users);
+  setContext('tabIndex', tabIndex);
+  setContext('mobileOpen', mobileOpen);
+  setContext('syncStatus', syncStatus);
+  setContext('userStats', userStats);
+  setContext('allUsers', allUsers);
+  setContext('allPosts', allPosts);
+  setContext('allProfiles', allProfiles);
+  setContext('postStats', postStats);
+
+  onMount(() => {
+    loadUsers();
+    loadLiveQueryData();
+  });
+</script>
+
+<div class="app">
+  <header class="app-header">
+    <button class="menu-toggle" on:click={() => mobileOpen.update(open => !open)}>
+      ☰
+    </button>
+    <h1>Dexie ORM Demo</h1>
+  </header>
+
+  <nav class="sidebar" class:open={$mobileOpen}>
+    <div class="nav-items">
+      <button 
+        class="nav-item" 
+        class:active={$tabIndex === 0}
+        on:click={() => tabIndex.set(0)}
+      >
+        Admin
+      </button>
+      <button 
+        class="nav-item" 
+        class:active={$tabIndex === 1}
+        on:click={() => tabIndex.set(1)}
+      >
+        Cloud Sync
+      </button>
+    </div>
+  </nav>
+
+  <main class="main-content">
+    <div class="content">
+      {#if $tabIndex === 0}
+        <MainInfo />
+        <Actions />
+        <LiveQueryDemo />
+        <TypeScriptDemo />
+        <PostsLiveQueryDemo />
+      {/if}
+      {#if $tabIndex === 1}
+        <CloudSyncDemo />
+      {/if}
+    </div>
+  </main>
+</div>
+
+<style>
+  .app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  }
+
+  .app-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: #1976d2;
+    color: white;
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    z-index: 1001;
+  }
+
+  .menu-toggle {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 1.5rem;
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 4px;
+    transition: background-color 0.2s;
+  }
+
+  .menu-toggle:hover {
+    background: rgba(255,255,255,0.1);
+  }
+
+  .app-header h1 {
+    margin: 0;
+    font-size: 1.5rem;
+  }
+
+  .sidebar {
+    position: fixed;
+    top: 80px;
+    left: -250px;
+    width: 250px;
+    height: calc(100vh - 80px);
+    background: white;
+    border-right: 1px solid #ddd;
+    transition: left 0.3s ease;
+    z-index: 1000;
+    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
+  }
+
+  .sidebar.open {
+    left: 0;
+  }
+
+  .nav-items {
+    padding: 20px 0 0 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .nav-item {
+    background: none;
+    border: none;
+    padding: 16px 24px;
+    text-align: left;
+    cursor: pointer;
+    font-size: 1rem;
+    color: #333;
+    transition: all 0.2s;
+    border-left: 3px solid transparent;
+  }
+
+  .nav-item:hover {
+    background: #f5f5f5;
+  }
+
+  .nav-item.active {
+    background: #e3f2fd;
+    color: #1976d2;
+    border-left-color: #1976d2;
+  }
+
+  .main-content {
+    flex: 1;
+    margin-top: 80px;
+    margin-left: 0;
+    transition: margin-left 0.3s ease;
+  }
+
+  .content {
+    padding: 24px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  /* Desktop styles */
+  @media (min-width: 768px) {
+    .menu-toggle {
+      display: none;
+    }
+
+    .sidebar {
+      position: fixed;
+      top: 80px;
+      left: 0;
+      width: 250px;
+      height: calc(100vh - 80px);
+      box-shadow: 2px 0 4px rgba(0,0,0,0.1);
+      border-right: 1px solid #ddd;
+    }
+
+    .app {
+      flex-direction: row;
+    }
+
+    .main-content {
+      margin-left: 250px;
+      margin-top: 80px;
+      flex: 1;
+    }
+
+    .nav-items {
+      padding: 20px 0;
+    }
+  }
+
+  /* Mobile overlay */
+  @media (max-width: 767px) {
+    .sidebar.open::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0,0,0,0.5);
+      z-index: -1;
+    }
+  }
+</style>

package/svelte-demo-app/src/routes/+page.js

@@ -0,0 +1,3 @@
+// Disable SSR for this page to allow IndexedDB to work
+export const ssr = false;
+export const prerender = false;