npm - @indexeddb-orm/idb-orm - Versions diffs - 0.0.1 - Mend

@indexeddb-orm/idb-orm 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (216) hide show

package/.vscode/extensions.json +5 -0
package/README.md +1280 -0
package/angular-demo-app/README.md +84 -0
package/angular-demo-app/angular.json +109 -0
package/angular-demo-app/package-lock.json +14215 -0
package/angular-demo-app/package.json +41 -0
package/angular-demo-app/src/app/app.component.ts +481 -0
package/angular-demo-app/src/app/app.routes.ts +8 -0
package/angular-demo-app/src/app/components/actions.component.ts +202 -0
package/angular-demo-app/src/app/components/cloud-sync-demo.component.ts +296 -0
package/angular-demo-app/src/app/components/live-query-demo.component.ts +307 -0
package/angular-demo-app/src/app/components/main-info.component.ts +148 -0
package/angular-demo-app/src/app/components/posts-live-query-demo.component.ts +336 -0
package/angular-demo-app/src/app/components/typescript-demo.component.ts +268 -0
package/angular-demo-app/src/entities/post-tag.entity.ts +25 -0
package/angular-demo-app/src/entities/post.entity.ts +49 -0
package/angular-demo-app/src/entities/profile.entity.ts +42 -0
package/angular-demo-app/src/entities/tag.entity.ts +36 -0
package/angular-demo-app/src/entities/user.entity.ts +59 -0
package/angular-demo-app/src/favicon.ico +1 -0
package/angular-demo-app/src/index.html +16 -0
package/angular-demo-app/src/main.ts +13 -0
package/angular-demo-app/src/services/app-logic.service.ts +449 -0
package/angular-demo-app/src/services/cloud-sync.service.ts +95 -0
package/angular-demo-app/src/services/database.service.ts +26 -0
package/angular-demo-app/src/services/live-query.service.ts +63 -0
package/angular-demo-app/src/services/posts-live-query.service.ts +86 -0
package/angular-demo-app/src/services/typescript-demo.service.ts +59 -0
package/angular-demo-app/src/styles.scss +50 -0
package/angular-demo-app/tsconfig.app.json +13 -0
package/angular-demo-app/tsconfig.json +34 -0
package/angular-demo-app/tsconfig.spec.json +13 -0
package/dist/Database.d.ts +206 -0
package/dist/Database.js +288 -0
package/dist/decorators/Column.d.ts +79 -0
package/dist/decorators/Column.js +236 -0
package/dist/decorators/Entity.d.ts +32 -0
package/dist/decorators/Entity.js +44 -0
package/dist/decorators/Relation.d.ts +70 -0
package/dist/decorators/Relation.js +120 -0
package/dist/decorators/index.d.ts +3 -0
package/dist/decorators/index.js +3 -0
package/dist/errors/ValidationError.d.ts +4 -0
package/dist/errors/ValidationError.js +8 -0
package/dist/index.d.ts +8 -0
package/dist/index.js +7 -0
package/dist/metadata/Column.d.ts +8 -0
package/dist/metadata/Column.js +44 -0
package/dist/metadata/Entity.d.ts +11 -0
package/dist/metadata/Entity.js +21 -0
package/dist/metadata/Relation.d.ts +20 -0
package/dist/metadata/Relation.js +74 -0
package/dist/metadata/index.d.ts +3 -0
package/dist/metadata/index.js +3 -0
package/dist/services/AggregationService.d.ts +38 -0
package/dist/services/AggregationService.js +229 -0
package/dist/services/BaseEntity.d.ts +32 -0
package/dist/services/BaseEntity.js +62 -0
package/dist/services/CloudSyncService.d.ts +100 -0
package/dist/services/CloudSyncService.js +196 -0
package/dist/services/DecoratorUtils.d.ts +12 -0
package/dist/services/DecoratorUtils.js +10 -0
package/dist/services/EntityFactory.d.ts +25 -0
package/dist/services/EntityFactory.js +27 -0
package/dist/services/EntityRegistry.d.ts +61 -0
package/dist/services/EntityRegistry.js +56 -0
package/dist/services/EntitySchema.d.ts +56 -0
package/dist/services/EntitySchema.js +125 -0
package/dist/services/MigrationManager.d.ts +70 -0
package/dist/services/MigrationManager.js +181 -0
package/dist/services/RelationLoader.d.ts +66 -0
package/dist/services/RelationLoader.js +310 -0
package/dist/services/SchemaBuilder.d.ts +68 -0
package/dist/services/SchemaBuilder.js +191 -0
package/dist/services/index.d.ts +7 -0
package/dist/services/index.js +7 -0
package/dist/types.d.ts +152 -0
package/dist/types.js +1 -0
package/dist/utils/logger.d.ts +12 -0
package/dist/utils/logger.js +16 -0
package/eslint.config.js +49 -0
package/homepage/favicon.svg +36 -0
package/homepage/index.html +1725 -0
package/package.json +78 -0
package/react-demo-app/README.md +61 -0
package/react-demo-app/eslint.config.js +60 -0
package/react-demo-app/index.html +13 -0
package/react-demo-app/package-lock.json +4955 -0
package/react-demo-app/package.json +39 -0
package/react-demo-app/src/App.tsx +172 -0
package/react-demo-app/src/assets/react.svg +1 -0
package/react-demo-app/src/components/Actions.tsx +171 -0
package/react-demo-app/src/components/CloudSyncDemo.tsx +191 -0
package/react-demo-app/src/components/LiveQueryDemo.tsx +122 -0
package/react-demo-app/src/components/MainInfo.tsx +75 -0
package/react-demo-app/src/components/PostsLiveQueryDemo.tsx +185 -0
package/react-demo-app/src/components/TypeScriptDemo.tsx +190 -0
package/react-demo-app/src/database/Database.ts +30 -0
package/react-demo-app/src/entities/Post.ts +48 -0
package/react-demo-app/src/entities/PostTag.ts +26 -0
package/react-demo-app/src/entities/Profile.ts +41 -0
package/react-demo-app/src/entities/Tag.ts +35 -0
package/react-demo-app/src/entities/User.ts +61 -0
package/react-demo-app/src/hooks/useAppLogic.ts +565 -0
package/react-demo-app/src/hooks/useCloudSyncDemo.ts +84 -0
package/react-demo-app/src/hooks/useLiveQueryDemo.ts +68 -0
package/react-demo-app/src/hooks/usePostsLiveQueryDemo.ts +64 -0
package/react-demo-app/src/hooks/useTypeScriptDemo.ts +43 -0
package/react-demo-app/src/index.css +26 -0
package/react-demo-app/src/main.tsx +18 -0
package/react-demo-app/src/migrations/001-add-user-email-index.ts +17 -0
package/react-demo-app/src/migrations/002-add-post-category.ts +37 -0
package/react-demo-app/src/migrations/index.ts +8 -0
package/react-demo-app/src/vite-env.d.ts +1 -0
package/react-demo-app/tsconfig.app.json +22 -0
package/react-demo-app/tsconfig.json +6 -0
package/react-demo-app/vite.config.ts +10 -0
package/src/Database.ts +405 -0
package/src/errors/ValidationError.ts +9 -0
package/src/index.ts +13 -0
package/src/metadata/Column.ts +74 -0
package/src/metadata/Entity.ts +42 -0
package/src/metadata/Relation.ts +121 -0
package/src/metadata/index.ts +5 -0
package/src/services/AggregationService.ts +348 -0
package/src/services/BaseEntity.ts +77 -0
package/src/services/CloudSyncService.ts +248 -0
package/src/services/EntityFactory.ts +35 -0
package/src/services/EntityRegistry.ts +109 -0
package/src/services/EntitySchema.ts +154 -0
package/src/services/MigrationManager.ts +276 -0
package/src/services/RelationLoader.ts +532 -0
package/src/services/SchemaBuilder.ts +237 -0
package/src/services/index.ts +7 -0
package/src/types.d.ts +1 -0
package/src/types.ts +169 -0
package/src/utils/logger.ts +40 -0
package/svelte-demo-app/README.md +61 -0
package/svelte-demo-app/package-lock.json +3000 -0
package/svelte-demo-app/package.json +30 -0
package/svelte-demo-app/src/app.d.ts +12 -0
package/svelte-demo-app/src/app.html +13 -0
package/svelte-demo-app/src/components/Actions.svelte +121 -0
package/svelte-demo-app/src/components/CloudSyncDemo.svelte +333 -0
package/svelte-demo-app/src/components/LiveQueryDemo.svelte +191 -0
package/svelte-demo-app/src/components/MainInfo.svelte +133 -0
package/svelte-demo-app/src/components/PostsLiveQueryDemo.svelte +330 -0
package/svelte-demo-app/src/components/TypeScriptDemo.svelte +251 -0
package/svelte-demo-app/src/database/Database.ts +29 -0
package/svelte-demo-app/src/entities/Post.ts +46 -0
package/svelte-demo-app/src/entities/PostTag.ts +22 -0
package/svelte-demo-app/src/entities/Profile.ts +39 -0
package/svelte-demo-app/src/entities/Tag.ts +33 -0
package/svelte-demo-app/src/entities/User.ts +62 -0
package/svelte-demo-app/src/lib/database/Database.ts +30 -0
package/svelte-demo-app/src/lib/entities/Post.ts +47 -0
package/svelte-demo-app/src/lib/entities/PostTag.ts +23 -0
package/svelte-demo-app/src/lib/entities/Profile.ts +40 -0
package/svelte-demo-app/src/lib/entities/Tag.ts +34 -0
package/svelte-demo-app/src/lib/entities/User.ts +59 -0
package/svelte-demo-app/src/lib/index.ts +7 -0
package/svelte-demo-app/src/lib/migrations/001-add-user-email-index.ts +17 -0
package/svelte-demo-app/src/lib/migrations/002-add-post-category.ts +37 -0
package/svelte-demo-app/src/lib/migrations/index.ts +8 -0
package/svelte-demo-app/src/migrations/001-add-user-email-index.ts +17 -0
package/svelte-demo-app/src/migrations/002-add-post-category.ts +37 -0
package/svelte-demo-app/src/migrations/index.ts +8 -0
package/svelte-demo-app/src/routes/+layout.js +3 -0
package/svelte-demo-app/src/routes/+layout.svelte +228 -0
package/svelte-demo-app/src/routes/+page.js +3 -0
package/svelte-demo-app/src/routes/+page.svelte +1305 -0
package/svelte-demo-app/src/stores/appStore.js +603 -0
package/svelte-demo-app/svelte.config.js +18 -0
package/svelte-demo-app/tsconfig.json +14 -0
package/svelte-demo-app/vite.config.ts +6 -0
package/tests/aggregation.e2e.test.ts +87 -0
package/tests/base-entity.e2e.test.ts +47 -0
package/tests/database-api.e2e.test.ts +177 -0
package/tests/decorators.e2e.test.ts +40 -0
package/tests/entity-schema.e2e.test.ts +58 -0
package/tests/relation-loader-table-names.test.ts +192 -0
package/tests/relations.e2e.test.ts +178 -0
package/tests/zod-runtime.e2e.test.ts +69 -0
package/tsconfig.json +21 -0
package/vitest.config.ts +21 -0
package/vitest.setup.ts +27 -0
package/vue-demo-app/README.md +61 -0
package/vue-demo-app/index.html +13 -0
package/vue-demo-app/package-lock.json +1537 -0
package/vue-demo-app/package.json +27 -0
package/vue-demo-app/src/App.vue +100 -0
package/vue-demo-app/src/components/Actions.vue +135 -0
package/vue-demo-app/src/components/CloudSyncDemo.vue +139 -0
package/vue-demo-app/src/components/LiveQueryDemo.vue +122 -0
package/vue-demo-app/src/components/MainInfo.vue +80 -0
package/vue-demo-app/src/components/PostsLiveQueryDemo.vue +136 -0
package/vue-demo-app/src/components/TypeScriptDemo.vue +133 -0
package/vue-demo-app/src/database/Database.ts +29 -0
package/vue-demo-app/src/entities/Post.ts +48 -0
package/vue-demo-app/src/entities/PostTag.ts +24 -0
package/vue-demo-app/src/entities/Profile.ts +41 -0
package/vue-demo-app/src/entities/Tag.ts +35 -0
package/vue-demo-app/src/entities/User.ts +61 -0
package/vue-demo-app/src/main.ts +29 -0
package/vue-demo-app/src/migrations/001-add-user-email-index.ts +23 -0
package/vue-demo-app/src/migrations/002-add-post-category.ts +46 -0
package/vue-demo-app/src/migrations/index.ts +14 -0
package/vue-demo-app/src/services/useAppLogic.ts +565 -0
package/vue-demo-app/src/services/useCloudSyncDemo.ts +84 -0
package/vue-demo-app/src/services/useLiveQueryDemo.ts +82 -0
package/vue-demo-app/src/services/usePostsLiveQueryDemo.ts +77 -0
package/vue-demo-app/src/services/useTypeScriptDemo.ts +56 -0
package/vue-demo-app/src/vite-env.d.ts +1 -0
package/vue-demo-app/tsconfig.json +25 -0
package/vue-demo-app/tsconfig.node.json +10 -0
package/vue-demo-app/vite.config.ts +16 -0

package/homepage/index.html ADDED Viewed

@@ -0,0 +1,1725 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>IndexedDB ORM</title>
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #333;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+        }
+        .tabs {
+            display: flex;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 15px;
+            padding: 5px;
+            margin-bottom: 30px;
+            backdrop-filter: blur(10px);
+        }
+        .tab {
+            flex: 1;
+            padding: 15px 20px;
+            text-align: center;
+            background: transparent;
+            border: none;
+            color: white;
+            font-weight: 500;
+            border-radius: 10px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .tab.active {
+            background: rgba(255, 255, 255, 0.2);
+            backdrop-filter: blur(10px);
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .header {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 20px;
+            padding: 40px;
+            margin-bottom: 30px;
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+            text-align: center;
+        }
+        .header h1 {
+            font-size: 3.5rem;
+            font-weight: 700;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 20px;
+        }
+        .header .subtitle {
+            font-size: 1.3rem;
+            color: #666;
+            margin-bottom: 30px;
+        }
+        .badges {
+            display: flex;
+            gap: 15px;
+            justify-content: center;
+            flex-wrap: wrap;
+            margin-bottom: 30px;
+        }
+        .badge {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            padding: 8px 16px;
+            border-radius: 25px;
+            font-size: 0.9rem;
+            font-weight: 500;
+            text-decoration: none;
+            transition: transform 0.3s ease;
+        }
+        .badge:hover {
+            transform: translateY(-2px);
+        }
+        .install-section {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        .install-section h2 {
+            color: #333;
+            margin-bottom: 20px;
+            font-size: 2rem;
+        }
+        .code-block {
+            background: #2d3748;
+            color: #e2e8f0;
+            padding: 20px;
+            border-radius: 10px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+            font-size: 0.9rem;
+            overflow-x: auto;
+            margin: 20px 0;
+            position: relative;
+            line-height: 1.5;
+            white-space: pre;
+        }
+        .code-block::before {
+            content: '';
+            display: none;
+        }
+        .code-block.typescript {
+            background: #1e1e1e;
+            color: #d4d4d4;
+            border: 1px solid #3c3c3c;
+        }
+        .code-block.typescript .keyword {
+            color: #569cd6;
+        }
+        .code-block.typescript .string {
+            color: #ce9178;
+        }
+        .code-block.typescript .comment {
+            color: #6a9955;
+        }
+        .code-block.typescript .function {
+            color: #dcdcaa;
+        }
+        .code-block.typescript .type {
+            color: #4ec9b0;
+        }
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 20px;
+            margin: 30px 0;
+        }
+        .feature-card {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 25px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+            transition: transform 0.3s ease;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+        }
+        .feature-card h3 {
+            color: #333;
+            margin-bottom: 15px;
+            font-size: 1.3rem;
+        }
+        .feature-card p {
+            color: #666;
+            line-height: 1.6;
+        }
+        .section {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        .section h2 {
+            color: #333;
+            margin-bottom: 20px;
+            font-size: 2rem;
+            border-bottom: 3px solid #667eea;
+            padding-bottom: 10px;
+        }
+        .demo-apps {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 20px;
+            margin: 20px 0;
+        }
+        .demo-app {
+            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
+            border-radius: 12px;
+            padding: 20px;
+            border-left: 4px solid #667eea;
+            transition: transform 0.3s ease;
+        }
+        .demo-app:hover {
+            transform: translateY(-3px);
+        }
+        .demo-app h4 {
+            color: #333;
+            margin-bottom: 10px;
+            font-size: 1.2rem;
+        }
+        .demo-app .framework {
+            color: #667eea;
+            font-weight: 600;
+            font-size: 0.9rem;
+            margin-bottom: 8px;
+        }
+        .demo-app .features {
+            color: #666;
+            font-size: 0.9rem;
+            margin-bottom: 15px;
+        }
+        .demo-app .run-command {
+            background: #2d3748;
+            color: #e2e8f0;
+            padding: 8px 12px;
+            border-radius: 6px;
+            font-family: monospace;
+            font-size: 0.8rem;
+            margin-top: 10px;
+        }
+        .demo-link {
+            display: inline-block;
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            padding: 6px 12px;
+            border-radius: 15px;
+            text-decoration: none;
+            font-size: 0.8rem;
+            font-weight: 500;
+            margin-top: 10px;
+            transition: transform 0.3s ease;
+        }
+        .demo-link:hover {
+            transform: translateY(-2px);
+        }
+        .contact-section {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            color: #333;
+            border-radius: 15px;
+            padding: 30px;
+            text-align: center;
+            margin-top: 30px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        .contact-section h2 {
+            margin-bottom: 0;
+            font-size: 2rem;
+        }
+        .contact-links {
+            margin-top: 20px;
+        }
+        .contact-links {
+            display: flex;
+            gap: 20px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .contact-link {
+            background: linear-gradient(135deg, #667eea, #764ba2);
+            color: white;
+            padding: 12px 24px;
+            border-radius: 25px;
+            text-decoration: none;
+            font-weight: 500;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
+        }
+        .contact-link:hover {
+            transform: translateY(-2px);
+        }
+        .notes-section {
+            margin: 30px 0;
+        }
+        .note-card {
+            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
+            border-radius: 12px;
+            padding: 20px;
+            margin: 15px 0;
+            border-left: 4px solid #667eea;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
+        }
+        .note-card h4 {
+            color: #2d3748;
+            margin: 0 0 10px 0;
+            font-size: 1.1rem;
+            font-weight: 600;
+        }
+        .note-card p {
+            color: #4a5568;
+            margin: 0 0 15px 0;
+            line-height: 1.6;
+        }
+        .note-card code {
+            background: rgba(102, 126, 234, 0.1);
+            color: #667eea;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
+            font-size: 0.9em;
+        }
+        .api-section {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 30px;
+            margin-bottom: 30px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+        }
+        .api-method {
+            background: #f8fafc;
+            border-left: 4px solid #667eea;
+            padding: 15px;
+            margin: 10px 0;
+            border-radius: 0 8px 8px 0;
+        }
+        .api-method .method-name {
+            font-family: monospace;
+            font-weight: bold;
+            color: #667eea;
+            font-size: 1.1rem;
+        }
+        .api-method .method-desc {
+            color: #666;
+            margin-top: 5px;
+        }
+        .api-method .method-example {
+            color: #888;
+            font-size: 0.9rem;
+            margin-top: 8px;
+            font-style: italic;
+            background: #f8f9fa;
+            padding: 8px;
+            border-radius: 4px;
+            border-left: 3px solid #667eea;
+        }
+        @media (max-width: 768px) {
+            .header h1 {
+                font-size: 2.5rem;
+            }
+            .badges {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 10px;
+                max-width: 300px;
+                margin: 0 auto;
+            }
+            .contact-links {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                gap: 10px;
+                max-width: 300px;
+                margin: 0 auto;
+            }
+            .contact-links .contact-link:nth-child(3) {
+                grid-column: 1 / -1;
+                justify-self: center;
+                max-width: 150px;
+                margin-top: 10px;
+            }
+            .container {
+                padding: 10px;
+            }
+            .header {
+                padding: 20px;
+                margin-bottom: 20px;
+            }
+            .tabs {
+                margin-bottom: 20px;
+                position: sticky;
+                top: 0;
+                z-index: 100;
+                background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
+                backdrop-filter: blur(15px);
+                border-radius: 15px;
+                padding: 5px;
+                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+                border: 1px solid rgba(255, 255, 255, 0.3);
+            }
+            .tab {
+                padding: 12px 16px;
+                font-size: 0.9rem;
+                font-weight: 600;
+                color: white;
+                transition: all 0.3s ease;
+            }
+            .tab.active {
+                background: rgba(255, 255, 255, 0.3);
+                backdrop-filter: blur(10px);
+                color: white;
+                font-weight: 700;
+            }
+            .tab:hover {
+                background: rgba(255, 255, 255, 0.2);
+                color: white;
+            }
+            .section {
+                padding: 20px;
+                margin-bottom: 20px;
+            }
+            .features-grid {
+                grid-template-columns: 1fr;
+                gap: 15px;
+            }
+            .demo-apps {
+                grid-template-columns: 1fr;
+                gap: 15px;
+            }
+            .demo-app {
+                padding: 15px;
+            }
+            .api-method {
+                padding: 12px;
+            }
+            .code-block {
+                padding: 15px;
+                font-size: 0.8rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="tabs">
+            <button class="tab active" onclick="showTab('overview')">Overview</button>
+            <button class="tab" onclick="showTab('manual')">Manual</button>
+            <button class="tab" onclick="showTab('api')">API Reference</button>
+        </div>
+        <div class="header">
+            <h1>IndexedDB ORM</h1>
+            <p class="subtitle">TypeScript ORM wrapper for IndexedDB with Zod runtime validation, built on top of Dexie.js</p>
+            <div class="badges">
+                <a href="https://github.com/radommaciej/idb-orm" class="badge">GitHub</a>
+                <a href="https://www.npmjs.com/package/idb-orm" class="badge">NPM</a>
+                <a href="mailto:indexeddborm@gmail.com" class="badge">Contact</a>
+                <span class="badge">MIT License</span>
+            </div>
+        </div>
+        <div id="overview" class="tab-content active">
+            <div class="install-section">
+                <h2>Installation</h2>
+                <div class="code-block">npm install idb-orm</div>
+            </div>
+        <div class="section">
+            <h2>Features</h2>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <h3>TypeScript Support</h3>
+                    <p>Full type safety with generics and IntelliSense support. Write type-safe database operations with complete IDE assistance.</p>
+                </div>
+                <div class="feature-card">
+                    <h3>Zod Validation</h3>
+                    <p>Runtime validation with Zod schemas. Ensure data integrity with powerful validation rules and clear error messages.</p>
+                </div>
+                <div class="feature-card">
+                    <h3>Config-based Entities</h3>
+                    <p>Define entities with a simple `defineEntity()` - clean, functional approach to entity definition.</p>
+                </div>
+                <div class="feature-card">
+                    <h3>Dexie Compatibility</h3>
+                    <p>All Dexie.js operations supported. Leverage the full power of Dexie with additional ORM capabilities.</p>
+                </div>
+                <div class="feature-card">
+                    <h3>Clean API</h3>
+                    <p>Simple and intuitive API design. Focus on your business logic, not database complexity.</p>
+                </div>
+                <div class="feature-card">
+                    <h3>Relations & Aggregations</h3>
+                    <p>Support for entity relationships and powerful aggregation operations. Build complex queries with ease.</p>
+                </div>
+            </div>
+        </div>
+        <div class="section">
+            <h2>Quick Start</h2>
+            <h3>1. Define Entities</h3>
+            <div class="code-block">
+import { BaseEntity, defineEntity } from 'idb-orm';
+import { z } from 'zod';
+const UserSchema = z.object({
+  id: z.number().optional(),
+  name: z.string().min(2),
+  email: z.string().email(),
+  age: z.number().min(18)
+});
+export class UserEntity extends BaseEntity {
+  name!: string;
+  email!: string;
+  age!: number;
+}
+defineEntity(UserEntity, {
+  tableName: 'users',
+  schema: UserSchema,
+  columns: {
+    name: { required: true, indexed: true },
+    email: { required: true, unique: true },
+    age: { indexed: true }
+  }
+});
+            </div>
+            <h3>2. Create Database</h3>
+            <div class="code-block">
+import { Database } from 'idb-orm';
+export const db = Database.createDatabase({
+  name: 'MyApp',
+  version: 1,
+  entities: [UserEntity]
+});
+            </div>
+            <h3>3. Use in Your App</h3>
+            <div class="code-block">
+// Create and save
+const user = new UserEntity();
+user.name = 'John Doe';
+user.email = 'john@example.com';
+user.age = 25;
+await db.getRepository(UserEntity).add(user);
+// Query with full type safety
+const users = await db.getRepository(UserEntity)
+  .where('age')
+  .above(18)
+  .toArray();
+            </div>
+        </div>
+        <div class="section">
+            <h2>Example Applications</h2>
+            <p>Comprehensive demo applications showcasing all features across different frameworks:</p>
+            <div class="demo-apps">
+                <div class="demo-app">
+                    <h4>React Demo App</h4>
+                    <div class="framework">React 19 + TypeScript</div>
+                    <div class="features">Material-UI, Live queries, Cloud sync, Aggregations</div>
+                    <div class="run-command">cd react-demo-app && npm install && npm run dev</div>
+                    <a href="https://github.com/radommaciej/idb-orm/tree/main/react-demo-app" class="demo-link">View Source</a>
+                </div>
+                <div class="demo-app">
+                    <h4>Vue Demo App</h4>
+                    <div class="framework">Vue 3 + TypeScript</div>
+                    <div class="features">Vuetify 3, Reactive components, Entity management</div>
+                    <div class="run-command">cd vue-demo-app && npm install && npm run dev</div>
+                    <a href="https://github.com/radommaciej/idb-orm/tree/main/vue-demo-app" class="demo-link">View Source</a>
+                </div>
+                <div class="demo-app">
+                    <h4>Svelte Demo App</h4>
+                    <div class="framework">SvelteKit + TypeScript</div>
+                    <div class="features">Material-UI, Server-side rendering, Live queries</div>
+                    <div class="run-command">cd svelte-demo-app && npm install && npm run dev</div>
+                    <a href="https://github.com/radommaciej/idb-orm/tree/main/svelte-demo-app" class="demo-link">View Source</a>
+                </div>
+                <div class="demo-app">
+                    <h4>Angular Demo App</h4>
+                    <div class="framework">Angular 17 + TypeScript</div>
+                    <div class="features">Angular Material, Services, Dependency injection</div>
+                    <div class="run-command">cd angular-demo-app && npm install && npm start</div>
+                    <a href="https://github.com/radommaciej/idb-orm/tree/main/angular-demo-app" class="demo-link">View Source</a>
+                </div>
+            </div>
+        </div>
+        </div>
+        <div id="manual" class="tab-content">
+            <div class="section">
+                <h2>Complete Manual</h2>
+                <h3>Notes</h3>
+                <div class="notes-section">
+                    <div class="note-card">
+                        <h4>⚠️ Dexie Dependencies</h4>
+                        <p><strong>Important:</strong> This library includes Dexie.js internally. To ensure that <code>liveQuery</code> works properly, you need to configure Vite to dedupe Dexie.</p>
+                        <div class="code-block typescript">
+<pre><code>// In your vite.config.ts, add:
+import { defineConfig } from 'vite';
+export default defineConfig({
+  resolve: {
+    dedupe: ['dexie'],
+  },
+  // ... other config
+});
+// This ensures liveQuery works correctly
+// Without dedupe, liveQuery may not function properly</code></pre>
+                        </div>
+                    </div>
+                    <div class="note-card">
+                        <h4>🏗️ Built on Dexie.js</h4>
+                        <p><strong>Foundation:</strong> This library is built on top of <a href="https://dexie.org" target="_blank" rel="noopener">Dexie.js</a> - a powerful wrapper for IndexedDB. All Dexie.js methods and features are available through the <code>db</code> object.</p>
+                        <div class="code-block typescript">
+<pre><code>// All Dexie.js methods work with our library
+const db = await Database.createDatabase({...});
+// Direct Dexie.js operations
+await db.transaction('rw', db.users, async () => {
+    await db.users.add({ name: 'John', email: 'john@example.com' });
+});
+// Dexie.js query methods
+const users = await db.users
+    .where('age')
+    .above(18)
+    .and(user => user.name.startsWith('J'))
+    .toArray();
+// Dexie.js liveQuery (reactive queries)
+import { liveQuery } from 'dexie';
+const observableUsers = liveQuery(() =>
+    db.users.where('active').equals(true).toArray()
+);</code></pre>
+                        </div>
+                        <p><strong>Benefits:</strong> You get all the power of Dexie.js plus our ORM features like entity validation, relations, and cloud sync.</p>
+                    </div>
+                    <div class="note-card">
+                        <h4>🔧 Cloud Sync Setup Steps</h4>
+                        <p>To enable cloud synchronization, you need to complete several setup steps:</p>
+                        <div class="code-block typescript">
+<pre><code>// 1. Install Dexie Cloud addon
+npm install dexie-cloud-addon
+// 2. Configure your database with cloud sync
+const db = await Database.createDatabase({
+    name: 'MyAppDB',
+    version: 1,
+    entities: [User, Post],
+    cloudSync: {
+        appId: 'your-app-id',
+        serverUrl: 'https://your-server.com',
+        // ... other cloud config
+    }
+});
+// 3. Enable cloud sync after database creation
+await db.enableCloudSync();</code></pre>
+                        </div>
+                    </div>
+                    <div class="note-card">
+                        <h4>📊 Index Requirements for Queries</h4>
+                        <p><strong>Critical:</strong> When searching by any field, you MUST create an index on that field. Queries without proper indexes will fail.</p>
+                        <div class="code-block typescript">
+const UserSchema = z.object({
+    id: z.number(),
+    name: z.string(),
+    email: z.string(),
+    age: z.number()
+});
+defineEntity(User, {
+    schema: UserSchema,
+    indexes: [
+        { key: 'email' },        // Required for email queries
+        { key: 'age' },          // Required for age queries
+        { key: 'name' }          // Required for name queries
+    ]
+});</code></pre>
+                        </div>
+                    </div>
+                    <div class="note-card">
+                        <h4>🔄 Schema Changes & Migrations</h4>
+                        <p>When changing entity schemas, you need to handle migrations properly. The library provides two strategies for schema changes.</p>
+                        <div class="code-block typescript">
+<pre><code>// Strategy 1: Selective reset (recommended)
+const db = await Database.createDatabase({
+    name: 'MyAppDB',
+    version: 2, // Increment version
+    entities: [User, Post],
+    onSchemaChangeStrategy: 'selective' // Only affected tables are reset
+});
+// Strategy 2: Full reset (use with caution)
+onSchemaChangeStrategy: 'all' // All data is lost</code></pre>
+                        </div>
+                    </div>
+                    <div class="note-card">
+                        <h4>🔍 Compound Indexes for Complex Queries</h4>
+                        <p>For queries involving multiple fields, you need compound indexes. Single field indexes won't work for multi-field queries.</p>
+                        <div class="code-block typescript">
+defineEntity(Post, {
+    schema: PostSchema,
+    compoundIndexes: [
+        { key: ['category', 'status'] },
+        { key: ['authorId', 'createdAt'] }
+    ]
+});</code></pre>
+                        </div>
+                    </div>
+                </div>
+                <h3>Usage</h3>
+                <h4>1. Define Entities</h4>
+                <div class="code-block typescript">
+import { BaseEntity, defineEntity } from 'idb-orm';
+import { z } from 'zod';
+// Zod schema for validation
+const UserSchema = z.object({
+  id: z.number().optional(),
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  email: z.string().email('Invalid email format'),
+  age: z.number().min(18, 'Must be at least 18 years old'),
+  createdAt: z.number(),
+  updatedAt: z.number(),
+  isActive: z.boolean().default(true),
+  tags: z.array(z.string()).default([]),
+  metadata: z.record(z.string(), z.unknown()).default({}),
+});
+export class UserEntity extends BaseEntity {
+  name!: string;
+  email!: string;
+  age!: number;
+  createdAt!: number;
+  updatedAt!: number;
+  isActive!: boolean;
+  tags!: string[];
+  metadata!: Record<string, unknown>;
+}
+defineEntity(UserEntity, {
+  tableName: 'users',
+  schema: UserSchema,
+  columns: {
+    name: { required: true, indexed: true },
+    email: { required: true, unique: true },
+    age: { indexed: true },
+    createdAt: { indexed: true },
+    updatedAt: { indexed: true },
+    isActive: { indexed: true },
+    tags: {},
+    metadata: {},
+  },
+});
+                </div>
+                <h4>2. Create Database</h4>
+                <div class="code-block typescript">
+import { Database } from 'idb-orm';
+import { UserEntity } from './entities/User';
+import { PostEntity } from './entities/Post';
+export const db = Database.createDatabase({
+  name: 'MyApp',
+  version: 1,
+  entities: [UserEntity, PostEntity],
+  config: {
+    onSchemaChangeStrategy: 'all',
+    cloudSync: {
+      databaseUrl: 'https://your-sync-server.com',
+      enableOfflineSupport: true,
+      syncInterval: 30000
+    }
+  },
+});
+                </div>
+                <h4>3. Basic CRUD Operations</h4>
+                <div class="code-block typescript">
+// Create new entity with validation in one call
+import { newEntity } from 'idb-orm';
+const newUser = newEntity(UserEntity, {
+  name: 'John Doe',
+  email: 'john@example.com',
+  age: 25,
+  createdAt: Date.now(),
+  updatedAt: Date.now(),
+  tags: ['developer'],
+  metadata: { source: 'manual' },
+});
+// Save to database
+await db.getRepository(UserEntity).add(newUser);
+// Query with full Dexie.js API
+const activeUsers = await db.getRepository(UserEntity)
+  .where('isActive')
+  .equals(true)
+  .toArray();
+                </div>
+                <h4>4. Entity Relations</h4>
+                <div class="code-block typescript">
+// Define entities with relations
+defineEntity(UserEntity, {
+  tableName: 'users',
+  schema: UserSchema,
+  columns: { /* ... */ },
+  relations: {
+    posts: {
+      type: 'one-to-many',
+      target: PostEntity,
+      foreignKey: 'authorId'
+    },
+    profile: {
+      type: 'one-to-one',
+      target: ProfileEntity,
+      foreignKey: 'userId'
+    }
+  }
+});
+// Load relations
+const userWithPosts = await db.loadRelations({
+  entity: user,
+  entityClass: UserEntity,
+  relationNames: ['posts', 'profile']
+});
+// Load specific relation
+const userPosts = await db.loadRelationByName({
+  entity: user,
+  entityClass: UserEntity,
+  relationName: 'posts'
+});
+                </div>
+                <h4>5. Reactive Queries with liveQuery</h4>
+                <p>Use Dexie's <code>liveQuery</code> for reactive data that automatically updates when the database changes. Works with all major frameworks:</p>
+                <h5>React Example</h5>
+                <div class="code-block typescript">
+<pre><code>import { liveQuery } from 'dexie';
+import { useObservable } from 'dexie-react-hooks';
+import { Database } from 'indexed-db-orm';
+import { User } from './entities/User';
+function UserList() {
+  const users = useObservable(
+    liveQuery(() => {
+      const userRepo = db.getRepository(User);
+      return userRepo.where('active').equals(true).toArray();
+    })
+  );
+  return (
+    <div>
+      {users?.map(user => (
+        <div key={user.id}>{user.name}</div>
+      ))}
+    </div>
+  );
+}</code></pre>
+                </div>
+                <h5>Vue Example</h5>
+                <div class="code-block typescript">
+<pre><code>import { liveQuery } from 'dexie';
+import { ref, onMounted, onUnmounted } from 'vue';
+import { Database } from 'indexed-db-orm';
+import { User } from './entities/User';
+export default {
+  setup() {
+    const users = ref<User[]>([]);
+    let subscription;
+    onMounted(() => {
+      subscription = liveQuery(() => {
+        const userRepo = db.getRepository(User);
+        return userRepo.where('active').equals(true).toArray();
+      }).subscribe(result => {
+        users.value = result;
+      });
+    });
+    onUnmounted(() => {
+      subscription?.unsubscribe();
+    });
+    return { users };
+  }
+};</code></pre>
+                </div>
+                <h5>Svelte Example</h5>
+                <div class="code-block typescript">
+<pre><code>import { liveQuery } from 'dexie';
+import { onMount, onDestroy } from 'svelte';
+import { Database } from 'indexed-db-orm';
+import { User } from './entities/User';
+let users: User[] = [];
+let subscription;
+onMount(() => {
+  subscription = liveQuery(() => {
+    const userRepo = db.getRepository(User);
+    return userRepo.where('active').equals(true).toArray();
+  }).subscribe(result => {
+    users = result;
+  });
+});
+onDestroy(() => {
+  subscription?.unsubscribe();
+});</code></pre>
+                </div>
+                <h5>Angular Example</h5>
+                <div class="code-block typescript">
+<pre><code>import { liveQuery } from 'dexie';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { Database } from 'indexed-db-orm';
+import { User } from './entities/User';
+@Component({
+  selector: 'app-user-list',
+  template: '<div *ngFor="let user of users">{{user.name}}</div>'
+})
+export class UserListComponent implements OnInit, OnDestroy {
+  users: User[] = [];
+  private subscription?: Subscription;
+  ngOnInit() {
+    this.subscription = liveQuery(() => {
+      const userRepo = db.getRepository(User);
+      return userRepo.where('active').equals(true).toArray();
+    }).subscribe(result => {
+      this.users = result;
+    });
+  }
+  ngOnDestroy() {
+    this.subscription?.unsubscribe();
+  }
+}</code></pre>
+                </div>
+                <h4>6. Advanced Queries and Aggregation</h4>
+                <div class="code-block typescript">
+// Aggregation operations
+const result = await db.aggregate({
+  entityClass: PostEntity,
+  options: {
+    where: { category: 'tech' },
+    sort: { field: 'views', direction: 'desc' },
+    limit: 10,
+    count: true,
+    sum: ['views'],
+    avg: ['likes'],
+    groupBy: ['category']
+  }
+});
+// Complex filtering and sorting
+const topPosts = await db.getRepository(PostEntity)
+  .where('published')
+  .equals(true)
+  .and(post => post.views > 100)
+  .orderBy('views')
+  .reverse()
+  .limit(5)
+  .toArray();
+                </div>
+                <h4>6. Entity Validation</h4>
+                <div class="code-block typescript">
+// Manual validation
+const user = new UserEntity();
+user.name = 'A'; // Too short
+user.email = 'invalid-email'; // Invalid format
+const result = user.validate();
+if (!result.isValid) {
+  console.log(result.errors);
+  // ['name: Name must be at least 2 characters', 'email: Invalid email format']
+}
+// Validation with error throwing
+try {
+  user.validateOrThrow();
+} catch (error) {
+  console.log('Validation failed:', error.message);
+}
+// Initialize with validation
+const validUser = new UserEntity().init({
+  name: 'John Doe',
+  email: 'john@example.com',
+  age: 25
+});
+                </div>
+                <h4>7. Database Management</h4>
+                <div class="code-block typescript">
+// Check for schema changes
+const hasChanges = await db.checkSchemaChanges();
+if (hasChanges) {
+  await db.performSelectiveReset(); // Reset only changed tables
+  // or
+  await db.resetDatabase(); // Reset entire database
+}
+// Clear all data
+await db.clearAllData();
+// Run migrations
+await db.runMigrations([
+  {
+    version: 2,
+    name: 'Add user profiles',
+    up: async (db) => {
+      // Migration logic for version 2
+    }
+  }
+]);
+                </div>
+                <h4>8. Cloud Synchronization</h4>
+                <div class="code-block typescript">
+// Enable cloud sync
+await db.enableCloudSync({
+  databaseUrl: 'https://your-sync-server.com',
+  enableOfflineSupport: true,
+  syncInterval: 30000
+});
+// Manual sync
+await db.sync();
+// Check sync status
+const status = db.getSyncStatus();
+console.log('Sync enabled:', status.enabled);
+console.log('Last sync:', status.lastSync);
+// Sync specific tables
+await db.syncTables(['users', 'posts']);
+// Disable cloud sync
+db.disableCloudSync();
+                </div>
+                <h4>9. Compound Indexes</h4>
+                <div class="code-block typescript">
+// Define entity with compound indexes
+defineEntity(UserEntity, {
+  tableName: 'users',
+  schema: UserSchema,
+  columns: {
+    name: { indexed: true },
+    email: { indexed: true, unique: true },
+    age: { indexed: true },
+    isActive: { indexed: true },
+  },
+  compoundIndexes: [
+    {
+      columns: ['name', 'email'],
+      unique: false,
+      name: 'name_email_index'
+    },
+    {
+      columns: ['age', 'isActive'],
+      unique: false,
+      name: 'age_active_index'
+    }
+  ]
+});
+// Query using compound index
+const users = await db.getRepository(UserEntity)
+  .where(['name', 'email'])
+  .equals(['John Doe', 'john@example.com'])
+  .toArray();
+const activeAdults = await db.getRepository(UserEntity)
+  .where(['age', 'isActive'])
+  .above([18, 1])
+  .toArray();
+                </div>
+            </div>
+        </div>
+        <div id="api" class="tab-content">
+            <div class="api-section">
+                <h2>Complete API Reference</h2>
+                <p>Complete reference of all methods with JSDoc documentation from the library.</p>
+                <h3>Core Classes</h3>
+                <h4>Database</h4>
+                <p>Main database class extending Dexie with ORM capabilities.</p>
+                <h5>Static Methods:</h5>
+                <div class="api-method">
+                    <div class="method-name">Database.createDatabase(params)</div>
+                    <div class="method-desc">Create database with entity registration</div>
+                    <div class="method-example">const db = Database.createDatabase({ name: 'app-db', version: 1, entities: [User, Post] });</div>
+                </div>
+                <h5>Instance Methods:</h5>
+                <div class="api-method">
+                    <div class="method-name">getRepository&lt;T&gt;(entityClass)</div>
+                    <div class="method-desc">Get repository for entity (TypeORM style)</div>
+                    <div class="method-example">const users = db.getRepository(User); const id = await users.add({ name: 'Ann' } as User);</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">aggregate&lt;T&gt;(params)</div>
+                    <div class="method-desc">Perform aggregation on entity data</div>
+                    <div class="method-example">const result = await db.aggregate({ entityClass: Post, options: { where: { category: 'tech' } } });</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">clearAllData()</div>
+                    <div class="method-desc">Clear all data from database</div>
+                    <div class="method-example">await db.clearAllData();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">resetDatabase()</div>
+                    <div class="method-desc">Reset database when schema changes</div>
+                    <div class="method-example">await db.resetDatabase();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">checkSchemaChanges()</div>
+                    <div class="method-desc">Check if schema has changed and reset if needed</div>
+                    <div class="method-example">const changed = await db.checkSchemaChanges();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">performSelectiveReset()</div>
+                    <div class="method-desc">Manually perform selective reset for changed tables only</div>
+                    <div class="method-example">await db.performSelectiveReset();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">runMigrations(migrations)</div>
+                    <div class="method-desc">Run migrations for schema changes</div>
+                    <div class="method-example">await db.runMigrations(migrations);</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getTypedTable&lt;T&gt;(entityClass)</div>
+                    <div class="method-desc">Get typed table for entity</div>
+                    <div class="method-example">const posts = db.getTypedTable(Post);</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getTableForEntity&lt;T&gt;(entityClass)</div>
+                    <div class="method-desc">Get table with proper typing for specific entity</div>
+                    <div class="method-example">const users = db.getTableForEntity(User);</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getEntities()</div>
+                    <div class="method-desc">Get all entities</div>
+                    <div class="method-example">const all = db.getEntities();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getEntity(tableName)</div>
+                    <div class="method-desc">Get entity by table name</div>
+                    <div class="method-example">const UserClass = db.getEntity('users');</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">loadRelations&lt;T&gt;(params)</div>
+                    <div class="method-desc">Load relations for an entity</div>
+                    <div class="method-example">const userWithRelations = await db.loadRelations({ entity: user, entityClass: User, relationNames: ['posts'] });</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">loadRelationByName&lt;T, K&gt;(params)</div>
+                    <div class="method-desc">Load a specific relation by name</div>
+                    <div class="method-example">const posts = await db.loadRelationByName({ entity: { id: userId }, entityClass: User, relationName: 'posts' });</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">saveWithRelations&lt;T&gt;(params)</div>
+                    <div class="method-desc">Save entity with relations</div>
+                    <div class="method-example">const saved = await db.saveWithRelations({ entity: user, entityClass: User });</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">deleteWithRelations&lt;T&gt;(params)</div>
+                    <div class="method-desc">Delete entity with cascade handling for relations</div>
+                    <div class="method-example">await db.deleteWithRelations({ entity: user, entityClass: User });</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">sync()</div>
+                    <div class="method-desc">Manual sync with cloud</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getSyncStatus()</div>
+                    <div class="method-desc">Get sync status</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">enableCloudSync(config)</div>
+                    <div class="method-desc">Enable cloud sync (if not already enabled)</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">disableCloudSync()</div>
+                    <div class="method-desc">Disable cloud sync</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">isCloudSyncEnabled()</div>
+                    <div class="method-desc">Check if cloud sync is enabled</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getCloudSyncConfig()</div>
+                    <div class="method-desc">Get cloud sync configuration</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">syncTables(tableNames)</div>
+                    <div class="method-desc">Force sync specific tables</div>
+                </div>
+                <h4>BaseEntity&lt;TKey&gt;</h4>
+                <p>Base class for all entities with validation capabilities.</p>
+                <div class="api-method">
+                    <div class="method-name">validate(): ValidationResult</div>
+                    <div class="method-desc">Validate entity data against its schema</div>
+                    <div class="method-example">const result = user.validate(); if (!result.isValid) console.error(result.errors);</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">validateOrThrow(): void</div>
+                    <div class="method-desc">Validate entity data and throw error if invalid</div>
+                    <div class="method-example">user.validateOrThrow(); // throws ValidationError on invalid data</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">init(data): this</div>
+                    <div class="method-desc">Initialize entity with data and validate</div>
+                    <div class="method-example">const user = new User().init({ name: 'Alice' });</div>
+                </div>
+                <h4>EntitySchema&lt;T&gt;</h4>
+                <p>Schema management for entities.</p>
+                <div class="api-method">
+                    <div class="method-name">getTableName(): string</div>
+                    <div class="method-desc">Get the table name for this entity</div>
+                    <div class="method-example">const schema = new EntitySchema(User); const table = schema.getTableName(); // 'users'</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getSchema(): ZodSchema | undefined</div>
+                    <div class="method-desc">Get the Zod schema for this entity</div>
+                    <div class="method-example">const schema = new EntitySchema(User, userZodSchema); const zod = schema.getSchema();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getColumns(): Record&lt;string, unknown&gt;</div>
+                    <div class="method-desc">Get column metadata for this entity</div>
+                    <div class="method-example">const cols = new EntitySchema(User).getColumns(); // cols.name.required === true</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">validate(data): ValidationResult</div>
+                    <div class="method-desc">Validate data against entity schema</div>
+                    <div class="method-example">const { isValid, errors } = new EntitySchema(User, userSchema).validate({ name: 'Alice' });</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">create(data?): T</div>
+                    <div class="method-desc">Create a new instance of the entity</div>
+                    <div class="method-example">const user = new EntitySchema(User).create({ name: 'Bob' });</div>
+                </div>
+                <h4>AggregationService</h4>
+                <p>Service for performing aggregation operations on entity data.</p>
+                <div class="api-method">
+                    <div class="method-name">aggregate&lt;T&gt;(entityClass, options)</div>
+                    <div class="method-desc">Perform aggregation operations on entity data</div>
+                    <div class="method-example">const result = await aggregationService.aggregate(Post, { where: { category: 'tech' }, sort: { field: 'views', direction: 'desc' }, limit: 10, count: true, sum: ['views'] });</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">loadRelation(entity, relationMeta)</div>
+                    <div class="method-desc">Load a specific relation based on metadata</div>
+                    <div class="method-example">const related = await (aggregationService as any).loadRelation(record, { type: 'one-to-many', target: Post, foreignKey: 'authorId' });</div>
+                </div>
+                <h4>RelationLoader</h4>
+                <p>Service for loading and saving entity relations.</p>
+                <div class="api-method">
+                    <div class="method-name">loadRelations&lt;T&gt;(entity, entityClass, relationNames?)</div>
+                    <div class="method-desc">Load relations for an entity</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">loadRelationByName&lt;T, K&gt;(entity, entityClass, relationName)</div>
+                    <div class="method-desc">Load a specific relation by name</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">loadRelation&lt;T&gt;(entity, relationMeta)</div>
+                    <div class="method-desc">Load a specific relation based on metadata</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">saveWithRelations&lt;T&gt;(entity, entityClass)</div>
+                    <div class="method-desc">Save entity with all its relations</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">deleteWithRelations&lt;T&gt;(entity, entityClass)</div>
+                    <div class="method-desc">Delete entity with cascade handling for relations</div>
+                </div>
+                <h4>SchemaBuilder</h4>
+                <p>Service for building IndexedDB schemas from entities.</p>
+                <div class="api-method">
+                    <div class="method-name">buildSchema(entities)</div>
+                    <div class="method-desc">Build indexeddb schema from entities</div>
+                    <div class="method-example">const schema = SchemaBuilder.buildSchema([User, Post]);</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">buildTableSchemas(entities)</div>
+                    <div class="method-desc">Build detailed table schemas for comparison</div>
+                    <div class="method-example">const tables = SchemaBuilder.buildTableSchemas([User, Post]);</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">generateSchemaHash(schema)</div>
+                    <div class="method-desc">Generate hash for schema to detect changes</div>
+                    <div class="method-example">const hash = SchemaBuilder.generateSchemaHash(schema);</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">compareSchemas(oldSchemas, newSchemas)</div>
+                    <div class="method-desc">Compare two schema arrays and return changes</div>
+                    <div class="method-example">const changes = SchemaBuilder.compareSchemas(oldSchemas, newSchemas);</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">storeTableSchemas(dbName, tableSchemas)</div>
+                    <div class="method-desc">Store table schemas in localStorage</div>
+                    <div class="method-example">SchemaBuilder.storeTableSchemas('app-db', tables);</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getStoredTableSchemas(dbName)</div>
+                    <div class="method-desc">Get stored table schemas from localStorage</div>
+                    <div class="method-example">const tables = SchemaBuilder.getStoredTableSchemas('app-db');</div>
+                </div>
+                <h4>CloudSyncService</h4>
+                <p>Service for cloud synchronization functionalities.</p>
+                <div class="api-method">
+                    <div class="method-name">initializeCloudSync(config)</div>
+                    <div class="method-desc">Initialize cloud synchronization with configuration</div>
+                    <div class="method-example">await cloudService.initializeCloudSync({ databaseUrl: 'https://example.cloud', enableOfflineSupport: true, syncInterval: 30000 });</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">stopPeriodicSync()</div>
+                    <div class="method-desc">Stop periodic synchronization</div>
+                    <div class="method-example">cloudService.stopPeriodicSync();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">sync()</div>
+                    <div class="method-desc">Perform manual synchronization</div>
+                    <div class="method-example">await cloudService.sync();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getSyncStatus()</div>
+                    <div class="method-desc">Get current synchronization status</div>
+                    <div class="method-example">const { enabled, lastSync, isOnline } = cloudService.getSyncStatus();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">enableCloudSync(config)</div>
+                    <div class="method-desc">Enable cloud synchronization</div>
+                    <div class="method-example">await cloudService.enableCloudSync({ databaseUrl: 'https://example.cloud' });</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">disableCloudSync()</div>
+                    <div class="method-desc">Disable cloud synchronization</div>
+                    <div class="method-example">cloudService.disableCloudSync();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">isCloudSyncEnabled()</div>
+                    <div class="method-desc">Check if cloud sync is currently enabled</div>
+                    <div class="method-example">if (cloudService.isCloudSyncEnabled()) { // ... }</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">getCloudSyncConfig()</div>
+                    <div class="method-desc">Get current cloud sync configuration</div>
+                    <div class="method-example">const cfg = cloudService.getCloudSyncConfig();</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">syncTables(tableNames)</div>
+                    <div class="method-desc">Synchronize specific tables</div>
+                    <div class="method-example">await cloudService.syncTables(['users', 'posts']);</div>
+                </div>
+                <h4>MigrationManager</h4>
+                <p>Service for managing database migrations.</p>
+                <div class="api-method">
+                    <div class="method-name">runMigrations(migrations, db)</div>
+                    <div class="method-desc">Run database migrations</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">performSelectiveReset(entities, db)</div>
+                    <div class="method-desc">Perform selective reset for changed tables only</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">resetDatabase(db)</div>
+                    <div class="method-desc">Reset entire database by clearing all data</div>
+                </div>
+                <div class="api-method">
+                    <div class="method-name">checkSchemaChanges(entities, db)</div>
+                    <div class="method-desc">Check if schema has changed and reset database if needed</div>
+                </div>
+                <h3>Entity Definition</h3>
+                <h4>defineEntity(EntityClass, options)</h4>
+                <p>Define entity metadata without decorators. Registers table name, schema, columns, indexes and relations for a given class so the ORM can work without TypeScript decorators.</p>
+                <h5>Parameters:</h5>
+                <ul>
+                    <li><strong>EntityClass</strong> - The entity constructor/class</li>
+                    <li><strong>options</strong> - Metadata describing table, schema, columns, indexes and relations</li>
+                </ul>
+                <h5>Options:</h5>
+                <div class="code-block typescript">
+interface DefineEntityOptions {
+  tableName?: string;           // Custom table name
+  schema?: ZodSchema;           // Zod validation schema
+  timestamps?: boolean;         // Enable timestamps
+  columns?: Record&lt;string, ColumnConfig&gt;;
+  relations?: Record&lt;string, RelationConfig&gt;;
+  compoundIndexes?: { name?: string; unique?: boolean; columns: string[] }[];
+}
+                </div>
+                <h5>Example:</h5>
+                <div class="code-block typescript">
+defineEntity(UserEntity, {
+  tableName: 'users',
+  columns: {
+    name: { required: true, indexed: true },
+    email: { required: true, unique: true },
+  },
+  relations: {
+    posts: { type: 'one-to-many', target: PostEntity, foreignKey: 'authorId' }
+  }
+});
+                </div>
+                <h4>newEntity(EntityClass, data)</h4>
+                <p>Create a new entity instance and validate it in a single call. This helper instantiates the provided entity class, assigns the given partial data, and immediately validates it using the entity's `init` method (which calls `validateOrThrow` under the hood).</p>
+                <h5>Parameters:</h5>
+                <ul>
+                    <li><strong>EntityClass</strong> - Entity constructor (must have a zero-arg constructor)</li>
+                    <li><strong>data</strong> - Partial entity data to assign before validation</li>
+                </ul>
+                <h5>Returns:</h5>
+                <p>A fully initialized and validated entity instance</p>
+                <h5>Throws:</h5>
+                <p>ValidationError if validation fails according to the entity schema</p>
+                <h5>Example:</h5>
+                <div class="code-block typescript">
+const user = newEntity(User, { name: 'Alice' });
+// user is validated; throws if required fields are missing or invalid
+                </div>
+                <h3>Type Definitions</h3>
+                <h4>EntityConstructor&lt;T&gt;</h4>
+                <div class="code-block typescript">
+interface EntityConstructor&lt;T extends BaseEntity = BaseEntity&gt; {
+  new (): T;
+  schema?: ZodSchema;
+  tableName?: string;
+}
+                </div>
+                <h4>ColumnConfig</h4>
+                <div class="code-block typescript">
+type ColumnConfig = {
+  required?: boolean;
+  unique?: boolean;
+  indexed?: boolean;
+  default?: unknown | (() =&gt; unknown);
+};
+                </div>
+                <h4>RelationConfig</h4>
+                <div class="code-block typescript">
+type RelationConfig = {
+  type: 'one-to-one' | 'one-to-many' | 'many-to-many';
+  target: ClassConstructor | string;
+  foreignKey?: string;
+  joinTable?: string;
+  cascade?: boolean;
+  eager?: boolean;
+};
+                </div>
+                <h4>ValidationResult</h4>
+                <div class="code-block typescript">
+interface ValidationResult {
+  isValid: boolean;
+  errors: string[];
+}
+                </div>
+                <h4>DatabaseConfig</h4>
+                <div class="code-block typescript">
+interface DatabaseConfig {
+  name: string;
+  version: number;
+  entities: EntityConstructor[];
+  onSchemaChangeStrategy?: 'selective' | 'all';
+  migrations?: Migration[];
+  cloudSync?: CloudSyncConfig;
+}
+                </div>
+                <h4>CloudSyncConfig</h4>
+                <div class="code-block typescript">
+interface CloudSyncConfig {
+  databaseUrl: string;
+  enableOfflineSupport?: boolean;
+  syncInterval?: number;
+}
+                </div>
+                <h4>Migration</h4>
+                <div class="code-block typescript">
+interface Migration {
+  version: number;
+  name: string;
+  up: (db: Dexie) =&gt; Promise&lt;void&gt;;
+  down?: (db: Dexie) =&gt; Promise&lt;void&gt;;
+}
+                </div>
+                <h4>AggregationOptions&lt;T&gt;</h4>
+                <div class="code-block typescript">
+interface AggregationOptions&lt;T extends BaseEntity&gt; {
+  where?: Partial&lt;T&gt;;
+  count?: boolean;
+  sum?: (keyof T)[];
+  avg?: (keyof T)[];
+  min?: (keyof T)[];
+  max?: (keyof T)[];
+  groupBy?: keyof T;
+  include?: string[];
+  limit?: number;
+  sort?: {
+    field: keyof T;
+    direction: 'asc' | 'desc';
+  };
+}
+                </div>
+                <h4>AggregationResult</h4>
+                <div class="code-block typescript">
+interface AggregationResult {
+  count?: number;
+  sum?: Record&lt;string, number&gt;;
+  avg?: Record&lt;string, number&gt;;
+  min?: Record&lt;string, number&gt;;
+  max?: Record&lt;string, number&gt;;
+  groups?: Array&lt;{
+    key: unknown;
+    count: number;
+    sum?: Record&lt;string, number&gt;;
+    avg?: Record&lt;string, number&gt;;
+    min?: Record&lt;string, number&gt;;
+    max?: Record&lt;string, number&gt;;
+  }&gt;;
+  data?: unknown[];
+}
+                </div>
+                <h3>Error Classes</h3>
+                <h4>ValidationError</h4>
+                <p>Error thrown when entity validation fails.</p>
+                <h5>Properties:</h5>
+                <ul>
+                    <li><strong>message: string</strong> - Error message</li>
+                    <li><strong>errors: string[]</strong> - Array of validation errors</li>
+                </ul>
+                <h3>Schema Change Strategies</h3>
+                <h4>'selective'</h4>
+                <p>Only resets tables that have schema changes, preserving data in unchanged tables.</p>
+                <h4>'all'</h4>
+                <p>Resets the entire database when any schema change is detected.</p>
+                <h3>Cloud Sync Status</h3>
+                <div class="code-block typescript">
+interface SyncStatus {
+  enabled: boolean;
+  lastSync?: Date;
+  isOnline?: boolean;
+}
+                </div>
+            </div>
+        </div>
+        <div class="contact-section">
+            <h2>Get Started Today</h2>
+            <p>Ready to build powerful IndexedDB applications with full TypeScript support?</p>
+            <div class="contact-links">
+                <a href="https://github.com/radommaciej/idb-orm" class="contact-link">View on GitHub</a>
+                <a href="https://www.npmjs.com/package/idb-orm" class="contact-link">Install from NPM</a>
+                <a href="mailto:indexeddborm@gmail.com" class="contact-link">Contact Author</a>
+            </div>
+            <p style="margin-top: 20px; opacity: 0.8;">
+                Created by <strong>Maciej Radom</strong> | MIT License
+            </p>
+        </div>
+    </div>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
+    <script>
+        function showTab(tabName) {
+            // Hide all tab contents
+            const tabContents = document.querySelectorAll('.tab-content');
+            tabContents.forEach(content => {
+                content.classList.remove('active');
+            });
+            // Remove active class from all tabs
+            const tabs = document.querySelectorAll('.tab');
+            tabs.forEach(tab => {
+                tab.classList.remove('active');
+            });
+            // Show selected tab content
+            document.getElementById(tabName).classList.add('active');
+            // Add active class to clicked tab
+            event.target.classList.add('active');
+        }
+    </script>
+</body>
+</html>