@indexeddb-orm/idb-orm 0.0.1

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

@@ -0,0 +1,1305 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { page } from '$app/stores';
+  import { getContext } from 'svelte';
+  import { db } from '$lib/database/Database';
+  import { newEntity } from 'idb-orm';
+  import { UserEntity } from '$lib/entities/User';
+  import { PostEntity } from '$lib/entities/Post';
+  import { ProfileEntity } from '$lib/entities/Profile';
+
+  // Get stores from layout
+  const users = getContext('users');
+  const tabIndex = getContext('tabIndex');
+  const mobileOpen = getContext('mobileOpen');
+  const syncStatus = getContext('syncStatus');
+  const userStats = getContext('userStats');
+  const allUsers = getContext('allUsers');
+  const allPosts = getContext('allPosts');
+  const allProfiles = getContext('allProfiles');
+  const postStats = getContext('postStats');
+
+  // Get functions from layout
+  const setTabIndex = getContext('setTabIndex');
+  const toggleMobileOpen = getContext('toggleMobileOpen');
+  const loadUsers = getContext('loadUsers');
+  const addUser = getContext('addUser');
+  const testZodValidation = getContext('testZodValidation');
+  const testSchemaMigration = getContext('testSchemaMigration');
+  const toggleAutoReset = getContext('toggleAutoReset');
+  const testRelations = getContext('testRelations');
+  const testTransactions = getContext('testTransactions');
+  const testCompoundIndexes = getContext('testCompoundIndexes');
+  const testAggregations = getContext('testAggregations');
+  const clearAll = getContext('clearAll');
+
+  // Tabs configuration
+  const tabs = [
+    { key: 'admin', label: 'Admin' },
+    { key: 'cloud-sync', label: 'Cloud Sync' }
+  ];
+
+  // Initialize data on mount
+  onMount(async () => {
+    await loadUsers();
+  });
+</script>
+
+<!-- Material-UI App Bar -->
+<header class="app-bar">
+  <div class="toolbar">
+    <button 
+      class="mobile-menu-button" 
+      on:click={toggleMobileOpen}
+      aria-label="open drawer"
+    >
+      <svg class="menu-icon" viewBox="0 0 24 24">
+        <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
+      </svg>
+    </button>
+    <h1 class="title">Dexie ORM Demo</h1>
+  </div>
+</header>
+
+<div class="main-layout">
+  <!-- Mobile Drawer -->
+  <div class="mobile-drawer" class:open={$mobileOpen}>
+    <nav class="drawer-content">
+      <ul class="nav-list">
+        {#each tabs as tab, index}
+          <li>
+            <button 
+              class="nav-item" 
+              class:active={$tabIndex === index}
+              on:click={() => {
+                setTabIndex(index);
+                toggleMobileOpen();
+              }}
+            >
+              {tab.label}
+            </button>
+          </li>
+        {/each}
+      </ul>
+    </nav>
+  </div>
+
+  <!-- Desktop Drawer -->
+  <aside class="desktop-drawer">
+    <nav class="drawer-content">
+      <ul class="nav-list">
+        {#each tabs as tab, index}
+          <li>
+            <button 
+              class="nav-item" 
+              class:active={$tabIndex === index}
+              on:click={() => setTabIndex(index)}
+            >
+              {tab.label}
+            </button>
+          </li>
+        {/each}
+      </ul>
+    </nav>
+  </aside>
+
+  <!-- Main Content -->
+  <main class="main-content">
+    {#if $tabIndex === 0}
+      <!-- Admin Tab Content - 1:1 with React -->
+      <div class="tab-content">
+        <!-- Main Info - Material-UI Paper -->
+        <div class="main-info">
+          <div class="info-card">
+            <div class="info-header">
+              <svg class="info-icon" viewBox="0 0 24 24">
+                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+              </svg>
+              <h2>Dexie ORM for IndexedDB — Overview</h2>
+            </div>
+            <p class="info-description">
+              TypeScript ORM built on the latest Dexie 4 with first-class type safety and Zod runtime validation.
+            </p>
+            <div class="info-features">
+              <div class="feature">
+                <svg class="feature-icon" viewBox="0 0 24 24">
+                  <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0L19.2 12l-4.6-4.6L16 6l6 6-6 6-1.4-1.4z"/>
+                </svg>
+                <span><strong>Entity config</strong> via defineEntity()</span>
+              </div>
+              <div class="feature">
+                <svg class="feature-icon" viewBox="0 0 24 24">
+                  <path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/>
+                </svg>
+                <span><strong>Automatic schema</strong> with PK, indexes, unique</span>
+              </div>
+              <div class="feature">
+                <svg class="feature-icon" viewBox="0 0 24 24">
+                  <path d="M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A1.5 1.5 0 0 0 18.54 7H16c-.8 0-1.54.5-1.85 1.26L12.5 14H10v8h2v-6h2.5l2.5 6H20zM12.5 11.5c.83 0 1.5-.67 1.5-1.5s-.67-1.5-1.5-1.5S11 9.17 11 10s.67 1.5 1.5 1.5z"/>
+                </svg>
+                <span><strong>Relations</strong> with helpers</span>
+              </div>
+              <div class="feature">
+                <svg class="feature-icon" viewBox="0 0 24 24">
+                  <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+                </svg>
+                <span><strong>Zod validation</strong> at runtime</span>
+              </div>
+              <div class="feature">
+                <svg class="feature-icon" viewBox="0 0 24 24">
+                  <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
+                </svg>
+                <span><strong>Aggregations</strong> (count, avg, sum)</span>
+              </div>
+              <div class="feature">
+                <svg class="feature-icon" viewBox="0 0 24 24">
+                  <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
+                </svg>
+                <span><strong>Live queries</strong> with useLiveQuery()</span>
+              </div>
+              <div class="feature">
+                <svg class="feature-icon" viewBox="0 0 24 24">
+                  <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4z"/>
+                </svg>
+                <span><strong>TypeScript</strong> full type safety</span>
+              </div>
+              <div class="feature">
+                <svg class="feature-icon" viewBox="0 0 24 24">
+                  <path d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
+                </svg>
+                <span><strong>Cloud sync</strong> with Dexie Cloud</span>
+              </div>
+            </div>
+            <div class="info-button-section">
+              <button class="info-button">
+                <svg class="button-icon" viewBox="0 0 24 24">
+                  <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
+                </svg>
+                View full documentation
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Admin Actions - 1:1 z React Material-UI -->
+        <div class="admin-section">
+          <h2 class="admin-title">Admin Actions</h2>
+          <div class="actions-grid">
+            <button class="action-button outlined" on:click={addUser}>
+              <svg class="action-icon" viewBox="0 0 24 24">
+                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+              </svg>
+              Add User
+            </button>
+
+            <button class="action-button outlined" on:click={testZodValidation}>
+              <svg class="action-icon" viewBox="0 0 24 24">
+                <path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
+              </svg>
+              Test Zod
+            </button>
+
+            <button class="action-button outlined" on:click={testSchemaMigration}>
+              <svg class="action-icon" viewBox="0 0 24 24">
+                <path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/>
+              </svg>
+              Schema
+            </button>
+
+            <button class="action-button outlined" on:click={toggleAutoReset}>
+              <svg class="action-icon" viewBox="0 0 24 24">
+                <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
+              </svg>
+              Auto-Reset
+            </button>
+
+            <button class="action-button outlined" on:click={testRelations}>
+              <svg class="action-icon" viewBox="0 0 24 24">
+                <path d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>
+              </svg>
+              Relations
+            </button>
+
+            <button class="action-button outlined" on:click={testTransactions}>
+              <svg class="action-icon" viewBox="0 0 24 24">
+                <path d="M13 10V3L4 14h7v7l9-11h-7z"/>
+              </svg>
+              Transactions
+            </button>
+
+            <button class="action-button outlined" on:click={testCompoundIndexes}>
+              <svg class="action-icon" viewBox="0 0 24 24">
+                <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+              </svg>
+              Indexes
+            </button>
+
+            <button class="action-button outlined" on:click={testAggregations}>
+              <svg class="action-icon" viewBox="0 0 24 24">
+                <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
+              </svg>
+              Aggregations
+            </button>
+
+            <button class="action-button outlined clear-button" on:click={clearAll}>
+              <svg class="action-icon" viewBox="0 0 24 24">
+                <path d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+              </svg>
+              Clear All
+            </button>
+          </div>
+        </div>
+
+        <!-- Users Section - 1:1 z React Material-UI Paper -->
+        {#if $users.length > 0}
+          <div class="users-section">
+            <h3 class="users-title">Users ({$users.length})</h3>
+            <div class="users-stack">
+              {#each $users as user}
+                <div class="user-paper">
+                  <strong>{user.name}</strong> ({user.email})<br />
+                  Age: {user.age}, Tags: {user.tags?.join(', ') || 'none'}
+                </div>
+              {/each}
+            </div>
+          </div>
+        {/if}
+
+        <!-- Live Query Demo - 1:1 z React -->
+        <div class="live-query-demo">
+          <div class="demo-card">
+            <div class="demo-header">
+              <svg class="demo-icon" viewBox="0 0 24 24">
+                <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
+              </svg>
+              <h2>Live Query Demo</h2>
+            </div>
+            
+            <div class="demo-grid">
+              <div class="demo-section">
+                <div class="section-card">
+                  <h3 class="section-title">
+                    <svg class="section-icon" viewBox="0 0 24 24">
+                      <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
+                    </svg>
+                    Statistics
+                  </h3>
+                  <div class="stats-grid">
+                    <div class="stat-item">
+                      <span class="stat-label">Total Users:</span>
+                      <span class="stat-value">{$allUsers.length}</span>
+                    </div>
+                    <div class="stat-item">
+                      <span class="stat-label">Adult Users:</span>
+                      <span class="stat-value">{$allUsers.filter(u => u.age >= 18).length}</span>
+                    </div>
+                    <div class="stat-item">
+                      <span class="stat-label">First User:</span>
+                      <span class="stat-value">{$allUsers[0]?.name || 'None'}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="demo-section">
+                <div class="section-card">
+                  <h3 class="section-title">
+                    <svg class="section-icon" viewBox="0 0 24 24">
+                      <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+                    </svg>
+                    Users with Profiles
+                  </h3>
+                  <div class="users-list">
+                    {#each $allUsers.slice(0, 3) as user}
+                      <div class="user-item">
+                        <strong>{user.name}</strong> ({user.email})
+                      </div>
+                    {/each}
+                  </div>
+                </div>
+              </div>
+
+              <div class="demo-section">
+                <div class="section-card">
+                  <h3 class="section-title">
+                    <svg class="section-icon" viewBox="0 0 24 24">
+                      <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
+                    </svg>
+                    Posts
+                  </h3>
+                  <div class="posts-list">
+                    {#each $allPosts.slice(0, 3) as post}
+                      <div class="post-item">
+                        <strong>{post.title}</strong>
+                        <span class="post-status" class:published={post.published}>
+                          {post.published ? 'Published' : 'Draft'}
+                        </span>
+                      </div>
+                    {/each}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- TypeScript Demo - 1:1 z React -->
+        <div class="typescript-demo">
+          <div class="demo-card typescript-card">
+            <div class="demo-header">
+              <svg class="demo-icon" viewBox="0 0 24 24">
+                <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4z"/>
+              </svg>
+              <h2>TypeScript Demo</h2>
+            </div>
+            
+            <div class="demo-content">
+              <h3 class="section-title">
+                <svg class="section-icon" viewBox="0 0 24 24">
+                  <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+                </svg>
+                Users
+              </h3>
+              <div class="users-list">
+                {#each $allUsers.slice(0, 3) as user}
+                  <div class="user-item clickable" on:click={() => console.log('User clicked:', user)}>
+                    <strong>{user.name}</strong> ({user.email})
+                  </div>
+                {/each}
+              </div>
+
+              <h3 class="section-title">
+                <svg class="section-icon" viewBox="0 0 24 24">
+                  <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
+                </svg>
+                Posts
+              </h3>
+              <div class="posts-list">
+                {#each $allPosts.slice(0, 3) as post}
+                  <div class="post-item clickable" on:click={() => console.log('Post clicked:', post)}>
+                    <strong>{post.title}</strong>
+                    <span class="post-status" class:published={post.published}>
+                      {post.published ? 'Published' : 'Draft'}
+                    </span>
+                  </div>
+                {/each}
+              </div>
+
+              <h3 class="section-title">
+                <svg class="section-icon" viewBox="0 0 24 24">
+                  <path d="M12 2C13.1 2 14 2.9 14 4C14 5.1 13.1 6 12 6C10.9 6 10 5.1 10 4C10 2.9 10.9 2 12 2ZM21 9V7L15 1H5C3.89 1 3 1.89 3 3V7H1V9H3V11H1V13H3V15H1V17H3V19C3 20.11 3.89 21 5 21H19C20.11 21 21 20.11 21 19V17H23V15H21V13H23V11H21V9H23V7H21V9Z"/>
+                </svg>
+                Profiles
+              </h3>
+              <div class="profiles-list">
+                {#each $allProfiles.slice(0, 3) as profile}
+                  <div class="profile-item clickable" on:click={() => console.log('Profile clicked:', profile)}>
+                    <strong>{profile.bio || 'No bio'}</strong>
+                  </div>
+                {/each}
+              </div>
+
+              <div class="ide-test">
+                <h4>IDE Test</h4>
+                <p>Hover over the items above to see TypeScript intellisense in action!</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Posts Live Query Demo - 1:1 z React -->
+        <div class="posts-live-query-demo">
+          <div class="demo-card posts-card">
+            <div class="demo-header">
+              <svg class="demo-icon" viewBox="0 0 24 24">
+                <path d="M14,2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2M18,20H6V4H13V9H18V20Z"/>
+              </svg>
+              <h2>Posts Live Query Demo</h2>
+            </div>
+            
+            <div class="demo-content">
+              <h3 class="section-title">
+                <svg class="section-icon" viewBox="0 0 24 24">
+                  <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
+                </svg>
+                Post Statistics
+              </h3>
+              <div class="stats-grid">
+                <div class="stat-item">
+                  <span class="stat-label">Total Posts:</span>
+                  <span class="stat-value">{$postStats.total}</span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-label">Published:</span>
+                  <span class="stat-value">{$postStats.published}</span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-label">Total Likes:</span>
+                  <span class="stat-value">{$postStats.totalLikes}</span>
+                </div>
+              </div>
+
+              <h3 class="section-title">
+                <svg class="section-icon" viewBox="0 0 24 24">
+                  <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/>
+                </svg>
+                All Posts
+              </h3>
+              <div class="posts-list">
+                {#each $allPosts.slice(0, 5) as post}
+                  <div class="post-item">
+                    <strong>{post.title}</strong>
+                    <span class="post-status" class:published={post.published}>
+                      {post.published ? 'Published' : 'Draft'}
+                    </span>
+                    <span class="post-likes">{post.likes || 0} likes</span>
+                  </div>
+                {/each}
+              </div>
+
+              <div class="note-section">
+                <h4>
+                  <svg class="note-icon" viewBox="0 0 24 24">
+                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                  </svg>
+                  Note
+                </h4>
+                <p>This demonstrates advanced live queries with posts, including statistics and filtering.</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {:else if $tabIndex === 1}
+        <!-- Cloud Sync Tab Content - 1:1 z React -->
+        <div class="tab-content">
+          <div class="cloud-sync-demo">
+            <div class="cloud-sync-card">
+              <h2>Cloud Sync Demo</h2>
+              <p class="cloud-sync-description">
+                <strong>Dexie Cloud Addon Integration:</strong> Cloud synchronization demo
+              </p>
+
+              <div class="cloud-sync-grid">
+                <div class="sync-status-section">
+                  <h3 class="section-title">
+                    <svg class="section-icon" viewBox="0 0 24 24">
+                      <path d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"/>
+                    </svg>
+                    Sync status
+                  </h3>
+                  <div class="status-card">
+                    <p>
+                      <strong>Enabled:</strong> {$syncStatus.enabled ? 'Yes' : 'No'}
+                    </p>
+                    <p>
+                      <strong>Online:</strong> {$syncStatus.isOnline !== undefined ? ($syncStatus.isOnline ? 'Yes' : 'No') : 'Unknown'}
+                    </p>
+                    <p>
+                      <strong>Last sync:</strong> {$syncStatus.lastSync ? new Date($syncStatus.lastSync).toLocaleString() : 'Never'}
+                    </p>
+                  </div>
+                </div>
+
+                <div class="sync-controls-section">
+                  <h3 class="section-title">
+                    <svg class="section-icon" viewBox="0 0 24 24">
+                      <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
+                    </svg>
+                    Sync controls
+                  </h3>
+                  <div class="controls-buttons">
+                    <button 
+                      class="sync-button manual" 
+                      on:click={() => alert('Sync manually')}
+                      disabled={!$syncStatus.enabled}
+                    >
+                      Sync manually
+                    </button>
+
+                    <button 
+                      class="sync-button tables" 
+                      on:click={() => alert('Sync tables (users, posts)')}
+                      disabled={!$syncStatus.enabled}
+                    >
+                      Sync tables (users, posts)
+                    </button>
+
+                    {#if !$syncStatus.enabled}
+                      <button 
+                        class="sync-button enable" 
+                        on:click={() => alert('Enable cloud sync')}
+                      >
+                        Enable cloud sync
+                      </button>
+                    {:else}
+                      <button 
+                        class="sync-button disable" 
+                        on:click={() => alert('Disable cloud sync')}
+                      >
+                        Disable cloud sync
+                      </button>
+                    {/if}
+                  </div>
+                </div>
+              </div>
+
+              <div class="instructions-section">
+                <h4 class="instructions-title">
+                  <svg class="instructions-icon" viewBox="0 0 24 24">
+                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                  </svg>
+                  Instructions:
+                </h4>
+                <ol class="instructions-list">
+                  <li>
+                    <strong>Install dexie-cloud-addon:</strong> <code>npm install dexie-cloud-addon</code>
+                  </li>
+                  <li>
+                    <strong>Configure database URL</strong> in <code>demo-app/src/database/Database.ts</code>
+                  </li>
+                  <li>
+                    <strong>Enable cloud sync</strong> using the button above
+                  </li>
+                  <li>
+                    <strong>Test sync</strong> – add data and verify it synchronizes
+                  </li>
+                </ol>
+              </div>
+
+              <div class="configuration-section">
+                <strong>Configuration:</strong> Cloud sync is configured in Database.ts with automatic sync every 30 seconds.
+                <br />
+                <strong>Offline Support:</strong> The app works offline and syncs when connection is restored.
+                <br />
+                <strong>Reactivity:</strong> All changes are automatically synchronized with the cloud!
+              </div>
+            </div>
+          </div>
+        </div>
+    {/if}
+  </main>
+</div>
+
+<style>
+  /* Global styles for full width */
+  :global(body), :global(html) {
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  :global(#app) {
+    width: 100%;
+    height: 100%;
+  }
+
+  /* Material-UI App Bar */
+  .app-bar {
+    background-color: #1976d2;
+    color: white;
+    box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
+    z-index: 1000;
+    width: 100%;
+    position: static;
+  }
+
+  .toolbar {
+    display: flex;
+    align-items: center;
+    padding: 0 16px;
+    height: 64px;
+  }
+
+  .mobile-menu-button {
+    display: none;
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+    padding: 8px;
+    margin-right: 16px;
+  }
+
+  .menu-icon {
+    width: 24px;
+    height: 24px;
+    fill: currentColor;
+  }
+
+  .title {
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin: 0;
+    flex-grow: 1;
+  }
+
+  .main-layout {
+    display: flex;
+    flex: 1;
+    width: 100%;
+    min-height: calc(100vh - 64px);
+  }
+
+  /* Material-UI Drawer */
+  .mobile-drawer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 240px;
+    background: white;
+    box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12);
+    z-index: 1001;
+    transform: translateX(-100%);
+    transition: transform 0.3s ease;
+    padding-top: 64px;
+  }
+
+  .mobile-drawer.open {
+    transform: translateX(0);
+  }
+
+  .desktop-drawer {
+    display: none;
+    width: 240px;
+    background: white;
+    box-shadow: 0px 8px 10px -5px rgba(0,0,0,0.2), 0px 16px 24px 2px rgba(0,0,0,0.14), 0px 6px 30px 5px rgba(0,0,0,0.12);
+    flex-shrink: 0;
+  }
+
+  .drawer-content {
+    padding: 16px 0;
+  }
+
+  .nav-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .nav-item {
+    display: block;
+    width: 100%;
+    padding: 12px 24px;
+    border: none;
+    background: none;
+    text-align: left;
+    cursor: pointer;
+    color: #666;
+    transition: background-color 0.2s;
+  }
+
+  .nav-item:hover {
+    background-color: #f5f5f5;
+  }
+
+  .nav-item.active {
+    background-color: #e3f2fd;
+    color: #1976d2;
+    font-weight: 500;
+  }
+
+  .main-content {
+    flex-grow: 1;
+    padding: 24px;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  .tab-content {
+    width: 100%;
+  }
+
+  /* Material-UI Paper for Main Info */
+  .main-info {
+    margin-bottom: 24px;
+  }
+
+  .info-card {
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 16px;
+    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
+  }
+
+  .info-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .info-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    fill: #1976d2;
+  }
+
+  .info-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: #1976d2;
+  }
+
+  .info-description {
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.6);
+    margin-bottom: 16px;
+    line-height: 1.43;
+  }
+
+  .info-features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .feature {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .feature-icon {
+    width: 16px;
+    height: 16px;
+    fill: #1976d2;
+  }
+
+  .feature span {
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.87);
+  }
+
+  .info-button-section {
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #e0e0e0;
+  }
+
+  .info-button {
+    display: inline-flex;
+    align-items: center;
+    padding: 6px 16px;
+    background: transparent;
+    color: #1976d2;
+    border: 1px solid #1976d2;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    transition: background-color 0.2s;
+  }
+
+  .info-button:hover {
+    background-color: rgba(25, 118, 210, 0.04);
+  }
+
+  .button-icon {
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    fill: currentColor;
+  }
+
+  /* Admin Actions - 1:1 z React Material-UI */
+  .admin-section {
+    margin-bottom: 24px;
+  }
+
+  .admin-title {
+    font-size: 1.5rem;
+    font-weight: 400;
+    margin: 0 0 16px 0;
+    color: rgba(0, 0, 0, 0.87);
+    line-height: 1.33;
+  }
+
+  .actions-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(5, auto);
+    gap: 8px;
+    margin-bottom: 16px;
+  }
+
+  .action-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px 16px;
+    border: 1px solid rgba(25, 118, 210, 0.5);
+    background: transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #1976d2;
+    text-transform: uppercase;
+    transition: all 0.2s;
+    min-height: 36px;
+  }
+
+  .action-button.outlined {
+    border: 1px solid rgba(25, 118, 210, 0.5);
+    background: transparent;
+    color: #1976d2;
+  }
+
+  .action-button.outlined:hover {
+    background: rgba(25, 118, 210, 0.04);
+    border-color: #1976d2;
+  }
+
+  .action-button.clear-button {
+    /* Clear All będzie w linii z innymi przyciskami */
+  }
+
+  .action-icon {
+    width: 18px;
+    height: 18px;
+    fill: currentColor;
+  }
+
+  /* Users Section - 1:1 z React Material-UI */
+  .users-section {
+    margin-top: 24px;
+  }
+
+  .users-title {
+    font-size: 1.25rem;
+    font-weight: 500;
+    margin: 0 0 8px 0;
+    color: rgba(0, 0, 0, 0.87);
+    line-height: 1.6;
+  }
+
+  .users-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .user-paper {
+    background: white;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: 4px;
+    padding: 12px;
+    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
+    font-size: 0.875rem;
+    line-height: 1.43;
+  }
+
+  /* Cloud Sync Demo - 1:1 z React */
+  .cloud-sync-demo {
+    margin: 24px 0;
+  }
+
+  .cloud-sync-card {
+    border: 2px solid #2196f3;
+    padding: 20px;
+    margin: 20px 0;
+    border-radius: 8px;
+    background-color: #e3f2fd;
+  }
+
+  .cloud-sync-card h2 {
+    margin: 0 0 16px 0;
+    font-size: 1.5rem;
+    font-weight: 500;
+    color: #1976d2;
+  }
+
+  .cloud-sync-description {
+    color: #666;
+    margin-bottom: 20px;
+    font-size: 0.875rem;
+    line-height: 1.43;
+  }
+
+  .cloud-sync-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+    margin-bottom: 20px;
+  }
+
+  .sync-status-section, .sync-controls-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 12px 0;
+    font-size: 1rem;
+    font-weight: 500;
+    color: #1976d2;
+  }
+
+  .section-icon {
+    width: 20px;
+    height: 20px;
+    fill: #1976d2;
+  }
+
+  .status-card {
+    background-color: white;
+    padding: 15px;
+    border-radius: 4px;
+    border: 1px solid #ddd;
+  }
+
+  .status-card p {
+    margin: 0 0 8px 0;
+    font-size: 0.875rem;
+    line-height: 1.43;
+  }
+
+  .status-card p:last-child {
+    margin-bottom: 0;
+  }
+
+  .controls-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .sync-button {
+    padding: 10px 15px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.875rem;
+    font-weight: 500;
+    transition: background-color 0.2s;
+  }
+
+  .sync-button.manual {
+    background-color: #4caf50;
+    color: white;
+  }
+
+  .sync-button.manual:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+
+  .sync-button.tables {
+    background-color: #ff9800;
+    color: white;
+  }
+
+  .sync-button.tables:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+
+  .sync-button.enable {
+    background-color: #2196f3;
+    color: white;
+  }
+
+  .sync-button.disable {
+    background-color: #f44336;
+    color: white;
+  }
+
+  .instructions-section {
+    background-color: #fff3e0;
+    padding: 15px;
+    border-radius: 4px;
+    border: 1px solid #ffb74d;
+    margin-bottom: 15px;
+  }
+
+  .instructions-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 16px 0;
+    font-size: 1rem;
+    font-weight: 500;
+    color: #1976d2;
+  }
+
+  .instructions-icon {
+    width: 16px;
+    height: 16px;
+    fill: #1976d2;
+  }
+
+  .instructions-list {
+    margin: 10px 0;
+    padding-left: 20px;
+    font-size: 0.875rem;
+    line-height: 1.43;
+  }
+
+  .instructions-list li {
+    margin-bottom: 8px;
+  }
+
+  .instructions-list code {
+    background-color: #f5f5f5;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.8rem;
+  }
+
+  .configuration-section {
+    margin-top: 15px;
+    font-size: 0.9em;
+    color: #666;
+    background-color: #e8f5e8;
+    padding: 10px;
+    border-radius: 4px;
+    line-height: 1.43;
+  }
+
+  /* Responsive Design */
+  @media (max-width: 768px) {
+    .cloud-sync-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  /* Live Query Demo */
+  .live-query-demo {
+    margin: 24px 0;
+  }
+
+  .demo-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 16px;
+  }
+
+  .demo-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 8px;
+    fill: #1976d2;
+  }
+
+  .demo-header h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: #1976d2;
+  }
+
+  .demo-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 16px;
+    margin-top: 16px;
+  }
+
+  .demo-section {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .section-card {
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 16px;
+    box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .section-title {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 1rem;
+    font-weight: 500;
+    margin: 0 0 12px 0;
+    color: rgba(0, 0, 0, 0.87);
+  }
+
+  .stats-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .stat-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 4px 0;
+    border-bottom: 1px solid #e0e0e0;
+  }
+
+  .stat-label {
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  .stat-value {
+    color: #1976d2;
+    font-weight: 500;
+  }
+
+  .user-item, .post-item, .profile-item {
+    padding: 8px 0;
+    border-bottom: 1px solid #e0e0e0;
+    font-size: 0.875rem;
+  }
+
+  .user-item:last-child, .post-item:last-child, .profile-item:last-child {
+    border-bottom: none;
+  }
+
+  .clickable {
+    cursor: pointer;
+    transition: background-color 0.2s;
+  }
+
+  .clickable:hover {
+    background-color: rgba(25, 118, 210, 0.04);
+  }
+
+  .post-status {
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 500;
+    background-color: #f44336;
+    color: white;
+    margin-left: 8px;
+  }
+
+  .post-status.published {
+    background-color: #4caf50;
+  }
+
+  .post-likes {
+    color: #666;
+    font-size: 0.75rem;
+    margin-left: 8px;
+  }
+
+  /* TypeScript Demo - kolorowe tło jak w React */
+  .typescript-demo {
+    margin: 24px 0;
+  }
+
+  .typescript-card {
+    border: 2px solid #ff9800;
+    background-color: #fff8e1;
+    border-radius: 8px;
+  }
+
+  .ide-test {
+    margin-top: 16px;
+    padding: 12px;
+    background-color: rgba(255, 152, 0, 0.1);
+    border-radius: 4px;
+  }
+
+  .ide-test h4 {
+    margin: 0 0 8px 0;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+
+  .ide-test p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  /* Posts Live Query Demo - kolorowe tło jak w React */
+  .posts-live-query-demo {
+    margin: 24px 0;
+  }
+
+  .posts-card {
+    border: 2px solid #9c27b0;
+    background-color: #faf5ff;
+    border-radius: 8px;
+  }
+
+  .note-section {
+    margin-top: 16px;
+    padding: 12px;
+    background-color: rgba(156, 39, 176, 0.1);
+    border-radius: 4px;
+  }
+
+  .note-section h4 {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin: 0 0 8px 0;
+    font-size: 1rem;
+    font-weight: 500;
+  }
+
+  .note-icon {
+    width: 16px;
+    height: 16px;
+    fill: #9c27b0;
+  }
+
+  .note-section p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: rgba(0, 0, 0, 0.6);
+  }
+
+  /* Responsive Design - 1:1 z React Material-UI */
+  @media (min-width: 600px) {
+    .actions-grid {
+      grid-template-columns: repeat(3, 1fr);
+      grid-template-rows: repeat(3, auto);
+    }
+  }
+
+  @media (min-width: 960px) {
+    .mobile-menu-button {
+      display: none;
+    }
+
+    .desktop-drawer {
+      display: block;
+    }
+
+    .main-content {
+      width: 100%;
+    }
+
+    .actions-grid {
+      grid-template-columns: repeat(4, 1fr);
+      grid-template-rows: repeat(3, auto);
+    }
+
+    .demo-grid {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  @media (min-width: 1200px) {
+    .actions-grid {
+      grid-template-columns: repeat(5, 1fr);
+      grid-template-rows: repeat(2, auto);
+    }
+  }
+</style>