create-lego-one 2.0.12 → 2.0.14

package/template/docs/framework/research/01-system-blueprint.md

@@ -0,0 +1,721 @@
+# System Blueprint: Host/Consumer Architecture
+
+**Project:** Lego-One (Modern.js SaaS OS)
+**Document:** 01 - System Blueprint
+**Status:** Research Phase
+
+## Executive Summary
+
+This document provides the high-level architectural blueprint for the Lego-One Microkernel SaaS OS, defining the relationship between the Host (Kernel) and Consumers (Plugins) using Modern.js + Garfish.
+
+---
+
+## 1. Architecture Overview
+
+### 1.1 The Microkernel Pattern
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                          Lego-One SaaS OS                               │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                           │
+│  ┌───────────────────────────────────────────────────────────────────┐  │
+│  │                    KERNEL (Host App)                               │  │
+│  │  ┌─────────────────────────────────────────────────────────────┐  │  │
+│  │  │  Core Infrastructure (Never changes per plugin)             │  │  │
+│  │  │  - Authentication (PocketBase SDK)                          │  │  │
+│  │  │  - Global Layout (Sidebar, Topbar, Toasts)                  │  │  │
+│  │  │  - Router (React Router v6 via Modern.js)                   │  │  │
+│  │  │  - State Bus (Zustand + Garfish Channel)                   │  │  │
+│  │  │  - Plugin Loader (saas.config.ts reader)                    │  │  │
+│  │  └─────────────────────────────────────────────────────────────┘  │  │
+│  │                                                                     │  │
+│  │  ┌─────────────────────────────────────────────────────────────┐  │  │
+│  │  │  Shared Dependency Layer                                     │  │  │
+│  │  │  - React, ReactDOM (via Garfish)                            │  │  │
+│  │  │  - Zustand Store Bridge (__LEGO_KERNEL_STATE__)             │  │  │
+│  │  │  - UI Primitives (Radix, Shadcn components)                 │  │  │
+│  │  │  - TanStack Query v5 (shared QueryClient)                   │  │  │
+│  │  └─────────────────────────────────────────────────────────────┘  │  │
+│  └───────────────────────────────────────────────────────────────────┘  │
+│                                                                           │
+│  ┌───────────────────────────────────────────────────────────────────┐  │
+│  │                    PLUGIN BOUNDARY                                 │  │
+│  │  (Garfish.loadApp() - Dynamic Loading Interface)                  │  │
+│  └───────────────────────────────────────────────────────────────────┘  │
+│                                                                           │
+│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐     │
+│  │  Plugin A   │  │  Plugin B   │  │  Plugin C   │  │  Plugin N   │     │
+│  │ (Dashboard) │  │ (Loan Calc) │  │(Inventory)  │  │  (Stripe)   │     │
+│  │             │  │             │  │             │  │             │     │
+│  │ - Routes    │  │ - Routes    │  │ - Routes    │  │ - Routes    │     │
+│  │ - Features  │  │ - Features  │  │ - Features  │  │ - Features  │     │
+│  │ - UI        │  │ - UI        │  │ - UI        │  │ - UI        │     │
+│  └─────────────┘  └─────────────┘  └─────────────┘  └─────────────┘     │
+│       │                │                │                │              │
+│       └────────────────┴────────────────┴────────────────┘              │
+│                    Slot Injection (UI Extension)                         │
+│                                                                           │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+### 1.2 Key Design Principles
+
+| Principle | Implementation | Benefit |
+|-----------|----------------|---------|
+| **Kernel Stability** | Core infra never changes per plugin | Predictable updates, no breaking changes |
+| **Plugin Isolation** | Each plugin is a separate Modern.js app | Independent deployment, team autonomy |
+| **Shared Dependencies** | Garfish externals + Zustand bridge | Reduced bundle size, consistent state |
+| **Slot Injection** | Global registry pattern | Plugins extend host UI without modification |
+| **Bus Communication** | Garfish.channel + custom events | Decoupled messaging between apps |
+
+---
+
+## 2. Host (Kernel) Structure
+
+### 2.1 Directory Structure
+
+```
+host/
+├── modern.config.ts          # Host Modern.js config
+├── modern.runtime.ts         # Sub-app registration
+├── package.json
+├── tsconfig.json
+├── tailwind.config.js        # Global Tailwind config
+├── postcss.config.js         # Global PostCSS config
+├── src/
+│   ├── bootstrap.tsx         # App entry, shared state initialization
+│   ├── main.tsx              # ReactDOM.render
+│   ├── kernel/
+│   │   ├── shared-state-bridge.ts    # Zustand store for plugins
+│   │   ├── slot-registry.ts          # UI slot injection system
+│   │   ├── communication-bus.ts      # Garfish.channel wrapper
+│   │   └── plugin-loader.ts          # saas.config.ts reader
+│   ├── providers/
+│   │   ├── QueryProvider.tsx         # TanStack Query provider
+│   │   ├── ThemeProvider.tsx         # Shadcn theme provider
+│   │   └── PocketBaseProvider.tsx    # PocketBase SDK provider
+│   ├── layout/
+│   │   ├── AppLayout.tsx             # Main layout shell
+│   │   ├── Sidebar.tsx               # Navigation sidebar
+│   │   ├── Topbar.tsx                # Header with user menu
+│   │   └── SlotOutlet.tsx            # Renders injected plugin UI
+│   ├── routes/
+│   │   ├── layout.tsx                # Root layout wrapper
+│   │   ├── page.tsx                  # Home/landing page
+│   │   ├── login/
+│   │   │   └── page.tsx              # Auth pages
+│   │   ├── dashboard/
+│   │   │   └── $.tsx                 # Fuzzy route for dashboard plugin
+│   │   ├── apps/
+│   │   │   ├── loan/
+│   │   │   │   └── $.tsx             # Fuzzy route for loan plugin
+│   │   │   ├── inventory/
+│   │   │   │   └── $.tsx             # Fuzzy route for inventory plugin
+│   │   │   └── settings/
+│   │   │       └── page.tsx          # Global settings page
+│   │   └── _404.tsx                  # 404 page
+│   ├── components/
+│   │   ├── ui/                       # Shadcn components (shared)
+│   │   ├── auth/
+│   │   └── common/
+│   ├── hooks/
+│   │   ├── useAuth.ts                # Authentication hook
+│   │   ├── usePluginLoader.ts        # Plugin loading logic
+│   │   └── useSlotRegistry.ts        # Slot registration hook
+│   ├── lib/
+│   │   ├── pocketbase.ts             # PocketBase client init
+│   │   └── utils.ts
+│   └── types/
+│       ├── kernel.ts                 # Kernel type definitions
+│       └── plugin.ts                 # Plugin interface definitions
+└── saas.config.ts                    # Plugin manifest (user-editable)
+```
+
+### 2.2 Core Kernel Components
+
+#### 2.2.1 Plugin Loader
+
+**File:** `src/kernel/plugin-loader.ts`
+
+```typescript
+import { AppsOptions } from '@modern-js/plugin-garfish';
+
+interface SaaSConfig {
+  plugins: {
+    name: string;
+    entry: string;
+    activeWhen: string;
+    enabled: boolean;
+  }[];
+}
+
+export async function loadSaaSConfig(): Promise<AppsOptions[]> {
+  // Import user's saas.config.ts
+  const config: SaaSConfig = await import('/saas.config.ts');
+
+  // Filter enabled plugins and format for Garfish
+  return config.plugins
+    .filter((plugin) => plugin.enabled)
+    .map(({ name, entry, activeWhen }) => ({
+      name,
+      entry,
+      activeWhen,
+    }));
+}
+```
+
+#### 2.2.2 Slot Registry
+
+**File:** `src/kernel/slot-registry.ts`
+
+```typescript
+import { reactive } from '@modern-js/runtime';
+
+export type SlotName = 'sidebar:nav' | 'topbar:actions' | 'topbar:menu';
+
+export interface SlotItem {
+  id: string;
+  pluginName: string;
+  component: React.ComponentType;
+  order: number;
+  isVisible: () => boolean;
+}
+
+interface SlotRegistry {
+  slots: Record<SlotName, SlotItem[]>;
+  register: (slot: SlotName, item: SlotItem) => void;
+  unregister: (slot: SlotName, id: string) => void;
+  getItems: (slot: SlotName) => SlotItem[];
+}
+
+// Global singleton for slot registration
+export const slotRegistry: SlotRegistry = reactive({
+  slots: {
+    'sidebar:nav': [],
+    'topbar:actions': [],
+    'topbar:menu': [],
+  },
+
+  register(slot: SlotName, item: SlotItem) {
+    this.slots[slot].push(item);
+    this.slots[slot].sort((a, b) => a.order - b.order);
+  },
+
+  unregister(slot: SlotName, id: string) {
+    this.slots[slot] = this.slots[slot].filter((item) => item.id !== id);
+  },
+
+  getItems(slot: SlotName) {
+    return this.slots[slot].filter((item) => item.isVisible());
+  },
+});
+```
+
+#### 2.2.3 Communication Bus
+
+**File:** `src/kernel/communication-bus.ts`
+
+```typescript
+import { Garfish } from 'garfish';
+
+// Event types for inter-app communication
+export type BusEvent =
+  | { type: 'auth:login'; payload: { userId: string; email: string } }
+  | { type: 'auth:logout' }
+  | { type: 'toast:show'; payload: { message: string; variant: 'success' | 'error' } }
+  | { type: 'theme:change'; payload: { theme: 'light' | 'dark' } }
+  | { type: 'navigation:goto'; payload: { path: string } };
+
+// Wrapper around Garfish.channel for type safety
+export class KernelBus {
+  private channel = Garfish.channel;
+
+  // Subscribe to events
+  on(eventType: BusEvent['type'], handler: (payload: any) => void) {
+    this.channel.on(eventType, handler);
+    return () => this.channel.off(eventType, handler);
+  }
+
+  // Emit events
+  emit(event: BusEvent) {
+    this.channel.emit(event.type, event.payload);
+  }
+}
+
+export const kernelBus = new KernelBus();
+```
+
+---
+
+## 3. Plugin (Sub-App) Structure
+
+### 3.1 Directory Structure
+
+```
+packages/plugins/@lego/plugin-loan-calculator/
+├── modern.config.ts          # Plugin Modern.js config
+├── package.json
+├── tsconfig.json
+├── plugin.config.ts          # Plugin metadata (exports, slots, etc.)
+├── src/
+│   ├── App.tsx               # Plugin entry (receives basename)
+│   ├── main.tsx              # Plugin ReactDOM.render
+│   ├── pages/
+│   │   ├── IndexPage.tsx
+│   │   └── SettingsPage.tsx
+│   ├── components/
+│   │   ├── LoanCalculator.tsx
+│   │   └── ResultDisplay.tsx
+│   ├── hooks/
+│   │   ├── useKernelState.ts # Access shared kernel state
+│   │   └── useKernelBus.ts   # Emit/receive bus events
+│   ├── lib/
+│   │   └── pocketbase-helpers.ts
+│   └── types/
+│       └── plugin.ts
+└── migrations/
+    └── init.ts               # PocketBase collection initialization
+```
+
+### 3.2 Plugin Configuration
+
+**File:** `plugin.config.ts`
+
+```typescript
+import { definePluginConfig } from '@lego/kernel/plugin-config';
+
+export default definePluginConfig({
+  name: '@lego/plugin-loan-calculator',
+  version: '1.0.0',
+  displayName: 'Loan Calculator',
+  description: 'Calculate loan payments and amortization schedules',
+
+  // Plugin exports available to host
+  exports: {
+    components: {
+      LoanWidget: './src/components/LoanWidget',
+    },
+  },
+
+  // Slot injections
+  slots: {
+    'sidebar:nav': {
+      component: './src/components/SidebarLink',
+      order: 100,
+      isVisible: () => {
+        const state = window.__LEGO_KERNEL_STATE__;
+        return state?.useGlobalKernelState.getState().currentUser?.role === 'admin';
+      },
+    },
+    'topbar:actions': {
+      component: './src/components/QuickCalcButton',
+      order: 50,
+    },
+  },
+
+  // PocketBase collections required
+  collections: [
+    {
+      name: 'loan_calculations',
+      schema: './migrations/init.ts',
+    },
+  ],
+});
+```
+
+### 3.3 Plugin Entry Point
+
+**File:** `src/App.tsx`
+
+```typescript
+import { BrowserRouter, Routes, Route } from '@modern-js/runtime/router';
+import { useGarfish } from '@garfish/hooks';
+import { useEffect } from 'react';
+import pluginConfig from '../plugin.config';
+import { registerSlots } from './lib/slot-registration';
+
+export default function PluginApp({ basename }: { basename: string }) {
+  const { appInfo } = useGarfish();
+
+  useEffect(() => {
+    // Register slot injections with host
+    registerSlots(pluginConfig.slots);
+  }, []);
+
+  return (
+    <BrowserRouter basename={basename}>
+      <Routes>
+        <Route index element={<IndexPage />} />
+        <Route path="settings" element={<SettingsPage />} />
+      </Routes>
+    </BrowserRouter>
+  );
+}
+```
+
+---
+
+## 4. Communication Patterns
+
+### 4.1 Host → Plugin: Props Passing
+
+Modern.js/Garfish automatically passes the `basename` prop to plugins. For custom props:
+
+**Host Route Wrapper:**
+
+```typescript
+// src/routes/apps/loan/$.tsx
+import { useModuleApps } from '@modern-js/plugin-garfish/runtime';
+import { useAuth } from '@/hooks/useAuth';
+
+export default function LoanRoute() {
+  const { LoanCalculator } = useModuleApps();
+  const { user } = useAuth();
+
+  // Pass custom props to plugin
+  return (
+    <LoanCalculator
+      currentUser={user}
+      permissions={user.permissions}
+    />
+  );
+}
+```
+
+### 4.2 Plugin → Host: Bus Events
+
+```typescript
+// Plugin component
+import { useKernelBus } from './hooks/useKernelBus';
+
+export function LoanCalculator() {
+  const bus = useKernelBus();
+
+  const handleCalculation = () => {
+    // Trigger toast in host app
+    bus.emit({
+      type: 'toast:show',
+      payload: { message: 'Calculation complete!', variant: 'success' },
+    });
+  };
+
+  return <button onClick={handleCalculation}>Calculate</button>;
+}
+```
+
+### 4.3 Host → Plugin: State Sharing
+
+```typescript
+// Plugin component
+import { useKernelState } from './hooks/useKernelState';
+
+export function LoanCalculator() {
+  const kernelState = useKernelState();
+
+  return (
+    <div>
+      <p>Theme: {kernelState?.theme}</p>
+      <p>User: {kernelState?.currentUser?.email}</p>
+    </div>
+  );
+}
+```
+
+---
+
+## 5. Data Flow Diagrams
+
+### 5.1 Application Bootstrap Flow
+
+```
+┌─────────────┐
+│ Browser     │
+│ loads host  │
+└──────┬──────┘
+       │
+       ▼
+┌─────────────────────────────────────────────────────────────┐
+│ 1. host/main.tsx renders App.tsx                            │
+└──────┬──────────────────────────────────────────────────────┘
+       │
+       ▼
+┌─────────────────────────────────────────────────────────────┐
+│ 2. bootstrap.tsx initializes:                              │
+│    - PocketBase client                                      │
+│    - Zustand store (registers to window)                    │
+│    - Garfish.setExternal() for shared deps                 │
+│    - Reads saas.config.ts                                   │
+└──────┬──────────────────────────────────────────────────────┘
+       │
+       ▼
+┌─────────────────────────────────────────────────────────────┐
+│ 3. modern.runtime.ts registers plugins with Garfish        │
+│    - Each plugin gets name, entry, activeWhen               │
+└──────┬──────────────────────────────────────────────────────┘
+       │
+       ▼
+┌─────────────────────────────────────────────────────────────┐
+│ 4. Router matches route → Garfish.loadApp()                 │
+│    - Plugin JavaScript loaded dynamically                   │
+│    - Plugin ReactDOM.render into its container              │
+└──────┬──────────────────────────────────────────────────────┘
+       │
+       ▼
+┌─────────────────────────────────────────────────────────────┐
+│ 5. Plugin initializes:                                      │
+│    - Receives basename from host                            │
+│    - Registers slot injections                              │
+│    - Subscribes to kernel bus events                        │
+│    - Accesses shared state via window bridge                │
+└─────────────────────────────────────────────────────────────┘
+```
+
+### 5.2 Inter-Plugin Communication Flow
+
+```
+┌──────────────────┐                    ┌──────────────────┐
+│ Plugin A (Loan)  │                    │ Plugin B (Inv.) │
+│                  │                    │                  │
+│ User clicks      │                    │                  │
+│ "Sync Data"      │                    │                  │
+└────────┬─────────┘                    └────────┬─────────┘
+         │                                       │
+         │ kernelBus.emit({                     │ kernelBus.on(
+         │   type: 'data:sync',                 │   'data:sync',
+         │   payload: { ... }                   │   handler
+         │ })                                   │ )
+         │                                       │
+         └───────────────┬───────────────────────┘
+                         │
+                         ▼
+              ┌─────────────────────┐
+              │  Garfish.channel    │
+              │  (Event Bus)        │
+              └─────────────────────┘
+                         │
+                         ▼
+              ┌─────────────────────┐
+              │  Host (Kernel)      │
+              │  - Can also listen  │
+              │  - Can log events   │
+              │  - Can transform    │
+              └─────────────────────┘
+```
+
+---
+
+## 6. Update Strategy (Git Template Approach)
+
+Since the user selected **Git Template (Clone & Fork)** approach:
+
+### 6.1 Distribution Model
+
+```
+lego-one/                     (Template Repository)
+├── host/                     (Kernel - users fork this)
+├── packages/
+│   └── plugins/
+│       ├── @lego/            (Official plugins)
+│       │   ├── plugin-dashboard
+│       │   ├── plugin-auth
+│       │   └── plugin-billing
+│       └── @custom/          (User plugins - users create here)
+│           └── my-custom-plugin
+└── docs/
+
+user-saas-app/                (User forks/clones lego-one)
+├── host/                     (Modified kernel - can merge updates)
+├── packages/
+│   └── plugins/
+│       ├── @lego/            (Submodule or git subtree for updates)
+│       └── @custom/          (User's private plugins)
+└── saas.config.ts            (User's configuration)
+```
+
+### 6.2 Update Workflow
+
+1. **Initial Setup:** User clones `lego-one` template
+2. **Custom Development:** User creates plugins in `@custom/` namespace
+3. **Kernel Update:** User merges changes from `lego-one` upstream
+4. **Plugin Update:** User pulls `@lego/*` plugins via git subtree/submodule
+
+**Benefits:**
+- Users control when to update
+- No breaking API changes (kernel is stable)
+- Custom plugins isolated from official updates
+- Can cherry-pick specific changes
+
+---
+
+## 7. Development vs Production Deployment
+
+### 7.1 Key Principle
+
+**Plugins are features of ONE application, not separate applications.**
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                              DEVELOPMENT                                 │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                           │
+│  Host     : http://localhost:8080                                        │
+│  Plugin A : http://localhost:3001  ← Separate dev server                │
+│  Plugin B : http://localhost:3002  ← Separate dev server                │
+│  Plugin C : http://localhost:3003  ← Separate dev server                │
+│                                                                           │
+│  WHY? Developers can work on plugins independently                       │
+│                                                                           │
+└─────────────────────────────────────────────────────────────────────────┘
+
+┌─────────────────────────────────────────────────────────────────────────┐
+│                             PRODUCTION                                   │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                           │
+│  Single Server: https://app.yourdomain.com                               │
+│                                                                           │
+│  All plugins BUNDLED into host's dist/                                   │
+│  ├── plugins/dashboard/main.js                                           │
+│  ├── plugins/loan-calculator/main.js                                     │
+│  └── plugins/inventory/main.js                                           │
+│                                                                           │
+│  WHY? One app, one deployment, simpler operations                         │
+│                                                                           │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+### 7.2 Runtime Configuration
+
+**File:** `host/src/modern.runtime.ts`
+
+```typescript
+import { defineRuntimeConfig } from '@modern-js/runtime';
+
+const isDev = import.meta.env.MODE === 'development';
+
+export default defineRuntimeConfig({
+  masterApp: {
+    apps: [
+      {
+        name: '@lego/plugin-dashboard',
+        // Dev: Separate server │ Prod: Bundled in host
+        entry: isDev
+          ? 'http://localhost:3001'
+          : () => import('@lego/plugin-dashboard'),
+        activeWhen: '/dashboard',
+      },
+      {
+        name: '@lego/plugin-loan-calculator',
+        entry: isDev
+          ? 'http://localhost:3002'
+          : () => import('@lego/plugin-loan-calculator'),
+        activeWhen: '/apps/loan',
+      },
+      {
+        name: '@lego/plugin-inventory',
+        entry: isDev
+          ? 'http://localhost:3003'
+          : () => import('@lego/plugin-inventory'),
+        activeWhen: '/apps/inventory',
+      },
+    ],
+  },
+});
+```
+
+### 7.3 Development Workflow
+
+**Terminal 1 - Start Host:**
+```bash
+cd host
+pnpm run dev
+# Runs on http://localhost:8080
+```
+
+**Terminal 2 - Start Plugin (optional):**
+```bash
+cd packages/plugins/@lego/plugin-dashboard
+pnpm run dev
+# Runs on http://localhost:8081
+
+# OR use root script to start all at once:
+pnpm run dev:all
+```
+
+**Browser:** Navigate to `http://localhost:8080/dashboard`
+
+### 7.4 Production Build
+
+```bash
+# Single build command from root
+pnpm run build
+
+# Output:
+host/dist/
+├── html/
+│   └── index.html
+├── static/
+│   ├── js/
+│   │   ├── main-[hash].js           # Host bundle
+│   │   ├── vendor-[hash].js         # Shared deps
+│   │   └── plugins/
+│   │       ├── dashboard-[hash].js   # Plugin A bundled
+│   │       ├── loan-calc-[hash].js   # Plugin B bundled
+│   │       └── inventory-[hash].js   # Plugin C bundled
+│   └── css/
+│       └── main-[hash].css
+```
+
+**Deploy:** Single `host/dist/` folder to any static host (Vercel, Netlify, S3, etc.)
+
+### 7.5 Why This Hybrid Approach?
+
+| Aspect | Development | Production |
+|--------|-------------|------------|
+| **Servers** | Separate ports for each plugin | Single server |
+| **Hot Reload** | Plugin changes reload independently | N/A (built) |
+| **Build Time** | Fast (only what changes) | Full build |
+| **Team Workflow** | Work on plugin in isolation | N/A |
+| **Operations** | N/A | Simple (one deploy) |
+| **Cost** | N/A | Lower (one server) |
+
+**The Best of Both Worlds:**
+- ✅ Dev experience: Independent plugin development
+- ✅ Production experience: Single app deployment
+- ✅ Build tooling: Modern.js handles bundling automatically
+- ✅ No complexity: No separate deployments for plugins
+
+---
+
+## 8. Technology Stack Mapping
+
+| Layer | Technology | Purpose |
+|-------|-----------|---------|
+| **Framework** | Modern.js | Host framework, build tooling |
+| **MFE Engine** | Garfish (via plugin) | Plugin loading, sandboxing |
+| **Bundler** | Rspack | Fast builds, Rust-based |
+| **UI** | React 18 | Component rendering |
+| **Router** | React Router v6 | Routing (integrated in Modern.js) |
+| **State** | Zustand | Global state, shared via bridge |
+| **Server State** | TanStack Query v5 | API caching, mutations |
+| **Styling** | Tailwind CSS | Utility-first CSS |
+| **Components** | Shadcn UI + Radix | Component primitives |
+| **Backend** | PocketBase | BaaS, auth, database |
+| **Language** | TypeScript | Type safety |
+
+---
+
+## 9. Next Steps
+
+1. **`02-data-migration-protocol.md`**: PocketBase auto-schema synchronization
+2. **`03-host-setup.md`**: Step-by-step host initialization
+3. **`04-plugin-architecture.md`**: Plugin development patterns
+
+---
+
+## References
+
+- [Modern.js Micro Frontend Guide](https://modernjs.dev/guides/topic-detail/micro-frontend/c02-development)
+- [Garfish GitHub Repository](https://github.com/web-infra-dev/garfish)
+- [Garfish.setExternal API](https://www.garfishjs.org/api/setExternal.html)
+- [PocketBase JS Collections](https://pocketbase.io/docs/js-collections/)