@live-change/frontend-template 0.9.198 → 0.9.200

package/.cursor/skills/live-change-frontend-range-list.md

@@ -0,0 +1,129 @@
+---
+name: live-change-frontend-range-list
+description: Build paginated scrollable lists with RangeViewer, rangeBuckets and .with()
+---
+
+# Skill: live-change-frontend-range-list (Claude Code)
+
+Use this skill when you build **paginated, scrollable lists** backed by DAO ranges in a LiveChange frontend.
+
+## When to use
+
+- You need a list that loads items in pages (infinite scroll).
+- The list is backed by a DAO range view (e.g. `articlesByCreatedAt`).
+- You want to attach related objects to each item via `.with()`.
+
+## Step 1 – Define the path function
+
+The path function receives a `range` object (with `gt`, `gte`, `lt`, `lte`, `limit`, `reverse`) and returns a DAO path.
+
+Use `reverseRange()` to display items newest-first:
+
+```javascript
+import { reverseRange } from '@live-change/vue3-ssr'
+
+function articlesPathRange(range) {
+  return path.blog.articlesByCreatedAt({ ...reverseRange(range) })
+}
+```
+
+## Step 2 – Attach related objects with `.with()`
+
+Chain `.with()` calls to load related data for each item:
+
+```javascript
+function articlesPathRange(range) {
+  return path.blog.articlesByCreatedAt({ ...reverseRange(range) })
+    .with(article => path.userIdentification.identification({
+      sessionOrUserType: article.authorType,
+      sessionOrUser: article.author
+    }).bind('authorProfile'))
+    .with(article => path.blog.articleStats({ article: article.id }).bind('stats'))
+}
+```
+
+Each `.with()` call:
+- receives a proxy of the item,
+- builds a path to the related data,
+- calls `.bind('fieldName')` to attach the result under that field name.
+
+Nested `.with()` is also supported:
+
+```javascript
+function eventsPathRange(range) {
+  return path.myService.allEvents({ ...reverseRange(range) })
+    .with(event => path.myService.eventState({ event: event.id }).bind('state')
+      .with(state => path.myService.roundPairs({ event: event.id, round: state.round }).bind('roundPairs'))
+    )
+}
+```
+
+## Step 3 – Use `<RangeViewer>` in the template
+
+```vue
+<template>
+  <RangeViewer
+    :pathFunction="articlesPathRange"
+    :canLoadTop="false"
+    canDropBottom
+    loadBottomSensorSize="3000px"
+    dropBottomSensorSize="5000px"
+  >
+    <template #empty>
+      <p class="text-center text-surface-500 my-4">No articles yet.</p>
+    </template>
+    <template #default="{ item: article }">
+      <Card class="mb-2">
+        <template #content>
+          <h3>{{ article.title }}</h3>
+          <p class="text-sm text-surface-500">By {{ article.authorProfile?.firstName }}</p>
+        </template>
+      </Card>
+    </template>
+  </RangeViewer>
+</template>
+```
+
+Key props:
+
+| Prop | Default | Description |
+|---|---|---|
+| `pathFunction` | required | `(range) => path` – builds the DAO path for a given range |
+| `bucketSize` | `20` | Items per page |
+| `canLoadTop` / `canLoadBottom` | `true` | Whether loading in each direction is allowed |
+| `canDropTop` / `canDropBottom` | `false` | Whether to drop pages that scrolled far out of view |
+| `loadBottomSensorSize` | `'500px'` | How far before the bottom to trigger loading (increase for smoother UX) |
+| `dropBottomSensorSize` | `'5000px'` | How far to keep before dropping |
+| `frozen` | `false` | Pause live updates |
+
+Slots:
+
+| Slot | Props | Description |
+|---|---|---|
+| `default` | `{ item, bucket, itemIndex, bucketIndex }` | Render each item |
+| `empty` | – | Shown when there are no items |
+| `loadingTop` / `loadingBottom` | – | Loading spinners |
+| `changedTop` / `changedBottom` | – | Indicators when data changed while frozen |
+
+## Step 4 – Low-level `rangeBuckets` (optional)
+
+For advanced control, use `rangeBuckets` directly:
+
+```javascript
+import { rangeBuckets, reverseRange } from '@live-change/vue3-ssr'
+
+const { buckets, loadBottom, dropTop, freeze, unfreeze } = await rangeBuckets(
+  (range) => path.blog.articlesByCreatedAt({ ...reverseRange(range) }),
+  { bucketSize: 20 }
+)
+```
+
+Iterate in the template:
+
+```vue
+<template v-for="(bucket, bi) in buckets.value" :key="bi">
+  <div v-for="(item, ii) in bucket.data.value" :key="item.id">
+    <!-- render item -->
+  </div>
+</template>
+```

package/.cursor/skills/live-change-frontend-ssr-setup.md

@@ -0,0 +1,120 @@
+---
+name: live-change-frontend-ssr-setup
+description: Set up SSR entry points, router, PrimeVue theme and Suspense data loading
+---
+
+# Skill: live-change-frontend-ssr-setup
+
+Ten skill opisuje **konfigurację frontendu** opartego o live-change-stack:
+
+- entry-client / entry-server,
+- router i meta `signedIn`,
+- konfigurację PrimeVue / motywu.
+
+## 1. Entry points – klient i serwer
+
+1. W projekcie frontendowym upewnij się, że masz dwa entry points:
+   - `entry-client.js` (lub `.ts`),
+   - `entry-server.js` (lub `.ts`).
+
+2. Skorzystaj z helperów z `@live-change/frontend-base`:
+
+```js
+// entry-client.js
+import { clientEntry } from '@live-change/frontend-base/client-entry.js'
+import App from './App.vue'
+import { createRouter } from './router.js'
+import { config } from './config.js'
+
+export default clientEntry(App, createRouter, config)
+```
+
+```js
+// entry-server.js
+import { serverEntry, sitemapEntry } from '@live-change/frontend-base/server-entry.js'
+import App from './App.vue'
+import { createRouter, routerSitemap } from './router.js'
+import { config } from './config.js'
+
+export const render = serverEntry(App, createRouter, config)
+export const sitemap = sitemapEntry(App, createRouter, routerSitemap, config)
+```
+
+## 2. Router – `vite-plugin-pages` + meta `signedIn`
+
+1. Użyj `vite-plugin-pages` do generowania tras z `src/pages/`.
+2. Dodaj blok `<route>` w plikach stron, np.:
+
+```vue
+<route>
+  { "name": "devices", "meta": { "signedIn": true } }
+</route>
+```
+
+3. W routerze dodaj guard logowania (jeśli go nie ma):
+
+```js
+router.beforeEach((to) => {
+  if(to.meta.signedIn && !isLoggedIn()) {
+    localStorage.setItem('redirectAfterLogin', to.fullPath)
+    return { name: 'user:signIn' }
+  }
+})
+```
+
+Funkcja `isLoggedIn()` może opierać się na stanie sesji/usera w store lub prostym sprawdzeniu tokena/ciasteczek.
+
+## 3. Konfiguracja PrimeVue – motyw i opcje
+
+1. W pliku `config.js` skonfiguruj PrimeVue:
+
+```js
+import { definePreset } from '@primevue/themes'
+import Aura from '@primevue/themes/aura'
+
+const MyPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: '{indigo.50}',
+      100: '{indigo.100}',
+      200: '{indigo.200}',
+      300: '{indigo.300}',
+      400: '{indigo.400}',
+      500: '{indigo.500}',
+      600: '{indigo.600}',
+      700: '{indigo.700}',
+      800: '{indigo.800}',
+      900: '{indigo.900}',
+      950: '{indigo.950}'
+    }
+  }
+})
+
+export const config = {
+  theme: {
+    preset: MyPreset,
+    options: {
+      darkModeSelector: '.app-dark-mode'
+    }
+  }
+}
+```
+
+2. Upewnij się, że App.vue używa tego configu przez globalną konfigurację PrimeVue (zgodnie z template’em live-change-stack).
+
+## 4. Globalne komponenty i formularze
+
+1. W `App.vue` zarejestruj globalne komponenty używane często w projekcie:
+   - auto-form components,
+   - globalne layouty, jeśli są.
+
+2. Dzięki temu na stronach używasz np. `<command-form>` bez lokalnego importu.
+
+## 5. SSR i `live/path` + Suspense
+
+1. Upewnij się, że root aplikacji (np. `ViewRoot`) opakowuje strony w `<Suspense>`.
+2. Strony powinny:
+   - używać `await Promise.all([live(path()....)])` w `script setup`,
+   - korzystać z `.value` w template,
+   - nie wykonywać pobierania danych w `onMounted`.
+

package/README.md

@@ -0,0 +1,71 @@
+---
+title: @live-change/frontend-template
+---
+
+## @live-change/frontend-template
+
+`@live-change/frontend-template` to **szablon kompletnej aplikacji frontendowej** Live Change:
+
+- gotowy SSR + SPA oparty o `@live-change/frontend-base` i `@live-change/vue3-ssr`
+- zintegrowane moduły: `user-frontend`, `security`, `content`, `blog`, `task`, `upload`, `url`, `video-call`, `peer-connection`, `auto-form` i inne
+- standardowa struktura katalogów i skrypty `package.json`
+
+Szablon jest punktem startowym dla nowych projektów (np. `family-tree`, `speed-dating` zostały na nim oparte).
+
+### Najważniejsze zależności
+
+W `package.json` szablonu znajdziesz m.in.:
+
+- `@live-change/frontend-base`
+- `@live-change/frontend-auto-form`
+- `@live-change/vue3-components`
+- `@live-change/vue3-ssr`
+- frontendy: `user-frontend`, `access-control-frontend`, `content-frontend`, `image-frontend`, `task-frontend`, `upload-frontend`, `url-frontend`, `wysiwyg-frontend`, `blog-frontend`, `video-call-frontend`, `peer-connection-frontend`
+
+### Skrypty uruchomieniowe
+
+Typowe skrypty (uproszczony przegląd):
+
+- `memDev` / `localDev` / `dev` – tryby deweloperskie z różną konfiguracją DB
+- `ssrDev` – dev SSR
+- `serveAll` / `serveAllMem` – produkcyjny SSR z API i usługami
+- `apiServer`, `devApiServer`, `memApiServer` – warianty samego API
+- `build`, `build:client`, `build:ssr`, `build:server`, `build:spa` – budowanie frontu i serwera
+- `prerender*` – generowanie statycznych stron
+
+Są one spójne z opisem w dokumentacji serwera (`server/01-getting-started.md`).
+
+### Struktura projektu na bazie szablonu
+
+Typowy projekt zaczynający z `frontend-template` ma:
+
+- `server/app.config.js` – lista usług i konfiguracja klienta
+- `server/services.list.js` – eksport definicji usług
+- `server/start.js` – start CLI (opisany w dokumentacji serwera)
+- `front/src` – kod frontendu:
+  - `App.vue`
+  - `router.js`
+  - `config.js` (i18n, tematy, integracje)
+  - `pages/*` – strony routingu (`vite-plugin-pages`)
+  - `components/*` – komponenty wspólne
+
+W `front/src/config.js` łączysz lokalizacje `frontend-base`, `frontend-auto-form` i innych modułów, podobnie jak w:
+
+- `family-tree/front/src/config.js`
+- `speed-dating/front/src/config.js`
+
+### Praca z szablonem
+
+Typowy flow tworzenia nowej aplikacji:
+
+1. Tworzysz nowy pakiet oparty o `@live-change/frontend-template` (lub kopiujesz repo).
+2. Aktualizujesz `server/app.config.js` i `server/services.list.js`, aby włączyć tylko potrzebne usługi.
+3. Dostosowujesz `front/src/config.js` (temat, i18n, integracje analityki).
+4. Tworzysz nowe strony w `front/src/pages` oraz komponenty w `front/src/components`.
+5. Korzystasz z:
+   - `@live-change/vue3-ssr` do pracy z DAO,
+   - `@live-change/vue3-components` do logiki i formularzy,
+   - `@live-change/frontend-auto-form` do CRUD-ów.
+
+Dokładny „manual” tego flow znajdzie się w sekcji `frontend/01-getting-started.md` dokumentacji.
+

package/front/src/router.js

@@ -10,7 +10,7 @@ import {
 
 import { dbAdminRoutes } from "@live-change/db-admin"
 import { autoFormRoutes } from "@live-change/frontend-auto-form"
-import { taskAdminRoutes } from "@live-change/task-frontend"
+import { taskAdminRoutes, cronAdminRoutes } from "@live-change/task-frontend"
 import { userRoutes } from "@live-change/user-frontend"
 import { catchAllPagesRoute, contentEditRoutes, pagesSitemap } from "@live-change/content-frontend"
 
@@ -27,6 +27,7 @@ export function routes(config = {}) {
     ...contentEditRoutes({ ...config }),
 
     ...taskAdminRoutes({ ...config, prefix: '/_task' }),
+    ...cronAdminRoutes({ ...config, prefix: '/_cron' }),
     ...dbAdminRoutes({ prefix: '/_db', route: r => ({ ...r, meta: { ...r.meta, raw: true }}) }),
     ...catchAllPagesRoute({ ...config }),
   ]

package/opencode.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://opencode.ai/config.json",
+  "instructions": [
+    ".claude/rules/live-change-backend-architecture.md",
+    ".claude/rules/live-change-backend-actions-views-triggers.md",
+    ".claude/rules/live-change-backend-models-and-relations.md",
+    ".claude/rules/live-change-service-structure.md",
+    ".claude/rules/live-change-frontend-vue-primevue.md"
+  ]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/frontend-template",
-  "version": "0.9.198",
+  "version": "0.9.200",
   "scripts": {
     "memDev": "tsx --inspect --expose-gc server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
     "localDevInit": "tsx server/start.js localDev --enableSessions --initScript ./init.js --dbAccess",
@@ -45,54 +45,56 @@
     "@codemirror/language": "6.10.1",
     "@dotenvx/dotenvx": "0.27.0",
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "@live-change/access-control-frontend": "^0.9.198",
-    "@live-change/access-control-service": "^0.9.198",
-    "@live-change/agreement-service": "^0.9.198",
-    "@live-change/backup-service": "^0.9.198",
-    "@live-change/blog-frontend": "^0.9.198",
-    "@live-change/blog-service": "^0.9.198",
-    "@live-change/cli": "^0.9.198",
-    "@live-change/content-frontend": "^0.9.198",
-    "@live-change/content-service": "^0.9.198",
-    "@live-change/dao": "^0.9.198",
-    "@live-change/dao-vue3": "^0.9.198",
-    "@live-change/dao-websocket": "^0.9.198",
-    "@live-change/db-client": "^0.9.198",
-    "@live-change/draft-service": "^0.9.198",
-    "@live-change/email-service": "^0.9.198",
-    "@live-change/framework": "^0.9.198",
-    "@live-change/frontend-auto-form": "^0.9.198",
-    "@live-change/frontend-base": "^0.9.198",
-    "@live-change/geoip-service": "^0.9.198",
-    "@live-change/google-authentication-service": "^0.9.198",
-    "@live-change/image-frontend": "^0.9.198",
-    "@live-change/linkedin-authentication-service": "^0.9.198",
-    "@live-change/locale-settings-service": "^0.9.198",
-    "@live-change/notification-service": "^0.9.198",
-    "@live-change/password-authentication-service": "^0.9.198",
-    "@live-change/peer-connection-frontend": "^0.9.198",
-    "@live-change/peer-connection-service": "^0.9.198",
-    "@live-change/prosemirror-service": "^0.9.198",
-    "@live-change/secret-code-service": "^0.9.198",
-    "@live-change/secret-link-service": "^0.9.198",
-    "@live-change/security-service": "^0.9.198",
-    "@live-change/session-service": "^0.9.198",
-    "@live-change/task-frontend": "^0.9.198",
-    "@live-change/task-service": "^0.9.198",
-    "@live-change/timer-service": "^0.9.198",
-    "@live-change/upload-frontend": "^0.9.198",
-    "@live-change/upload-service": "^0.9.198",
-    "@live-change/url-frontend": "^0.9.198",
-    "@live-change/url-service": "^0.9.198",
-    "@live-change/user-frontend": "^0.9.198",
-    "@live-change/user-identification-service": "^0.9.198",
-    "@live-change/user-service": "^0.9.198",
-    "@live-change/video-call-frontend": "^0.9.198",
-    "@live-change/video-call-service": "^0.9.198",
-    "@live-change/vote-service": "^0.9.198",
-    "@live-change/vue3-components": "^0.9.198",
-    "@live-change/vue3-ssr": "^0.9.198",
-    "@live-change/wysiwyg-frontend": "^0.9.198",
+    "@live-change/access-control-frontend": "^0.9.200",
+    "@live-change/access-control-service": "^0.9.200",
+    "@live-change/agreement-service": "^0.9.200",
+    "@live-change/backup-service": "^0.9.200",
+    "@live-change/blog-frontend": "^0.9.200",
+    "@live-change/blog-service": "^0.9.200",
+    "@live-change/cli": "^0.9.200",
+    "@live-change/content-frontend": "^0.9.200",
+    "@live-change/content-service": "^0.9.200",
+    "@live-change/cron-service": "^0.9.200",
+    "@live-change/dao": "^0.9.200",
+    "@live-change/dao-vue3": "^0.9.200",
+    "@live-change/dao-websocket": "^0.9.200",
+    "@live-change/db-client": "^0.9.200",
+    "@live-change/draft-service": "^0.9.200",
+    "@live-change/email-service": "^0.9.200",
+    "@live-change/framework": "^0.9.200",
+    "@live-change/frontend-auto-form": "^0.9.200",
+    "@live-change/frontend-base": "^0.9.200",
+    "@live-change/geoip-service": "^0.9.200",
+    "@live-change/google-authentication-service": "^0.9.200",
+    "@live-change/image-frontend": "^0.9.200",
+    "@live-change/linkedin-authentication-service": "^0.9.200",
+    "@live-change/locale-settings-service": "^0.9.200",
+    "@live-change/notification-service": "^0.9.200",
+    "@live-change/password-authentication-service": "^0.9.200",
+    "@live-change/peer-connection-frontend": "^0.9.200",
+    "@live-change/peer-connection-service": "^0.9.200",
+    "@live-change/prosemirror-service": "^0.9.200",
+    "@live-change/scope-service": "^0.9.200",
+    "@live-change/secret-code-service": "^0.9.200",
+    "@live-change/secret-link-service": "^0.9.200",
+    "@live-change/security-service": "^0.9.200",
+    "@live-change/session-service": "^0.9.200",
+    "@live-change/task-frontend": "^0.9.200",
+    "@live-change/task-service": "^0.9.200",
+    "@live-change/timer-service": "^0.9.200",
+    "@live-change/upload-frontend": "^0.9.200",
+    "@live-change/upload-service": "^0.9.200",
+    "@live-change/url-frontend": "^0.9.200",
+    "@live-change/url-service": "^0.9.200",
+    "@live-change/user-frontend": "^0.9.200",
+    "@live-change/user-identification-service": "^0.9.200",
+    "@live-change/user-service": "^0.9.200",
+    "@live-change/video-call-frontend": "^0.9.200",
+    "@live-change/video-call-service": "^0.9.200",
+    "@live-change/vote-service": "^0.9.200",
+    "@live-change/vue3-components": "^0.9.200",
+    "@live-change/vue3-ssr": "^0.9.200",
+    "@live-change/wysiwyg-frontend": "^0.9.200",
     "@vueuse/core": "^12.3.0",
     "codeceptjs-assert": "^0.0.5",
     "compression": "^1.7.5",
@@ -125,5 +127,5 @@
   "author": "Michał Łaszczewski <michal@laszczewski.pl>",
   "license": "ISC",
   "description": "",
-  "gitHead": "7e485dcbaa2af7fb17052a40238210dc8bdf0c09"
+  "gitHead": "a509834e600a546297faa7d1534b6f52e66d2e66"
 }

package/server/app.config.js

@@ -4,12 +4,43 @@ dotenv.config()
 import App from "@live-change/framework"
 const app = App.app()
 
+import { fileURLToPath } from 'url'
+import { dirname, join } from 'path'
+import { accessSync, readFileSync } from 'fs'
+
+const packageJsonPath = dirname(fileURLToPath(import.meta.url))
+  .split('/').map((part, i, arr) =>
+    join(arr.slice(0, arr.length - i).join('/'), 'package.json')
+  ).find(p => { try { accessSync(p); return true } catch(e) { return false }})
+const packageJson = packageJsonPath ? JSON.parse(readFileSync(packageJsonPath, 'utf-8')) : {}
+
+const name = packageJson.name ?? "Example"
+const brandName = process.env.BRAND_NAME || (name[0].toUpperCase() + name.slice(1))
+const homepage = process.env.BASE_HREF ?? packageJson.homepage
+const brandDomain = process.env.BRAND_DOMAIN ||
+  (homepage && homepage.match(/https\:\/\/([^\/]+)/)?.[1]) || 'example.com'
+const baseHref = process.env.BASE_HREF || homepage || 'http://localhost:8001'
+const version = process.env.VERSION || packageJson.version
+
+const clientConfig = {
+  version,
+  name, brandName, brandDomain, homepage, baseHref
+}
+const baseAppConfig = {
+  ...clientConfig,
+  clientConfig: { ...clientConfig },
+}
+
 const contactTypes = ['email']
 
 import securityConfig from './security.config.js'
 import documentTypePage from './page.documentType.js'
 
 app.config = {
+  ...baseAppConfig,
+  clientConfig: {
+    ...baseAppConfig.clientConfig,
+  },
   services: [
     {
       name: 'timer',
@@ -42,6 +73,10 @@ app.config = {
       name: 'accessControl',
       createSessionOnUpdate: true,
       contactTypes,
+      indexed: true,
+    },
+    {
+      name: 'scope'
     },
     {
       name: 'security',

package/server/services.list.js

@@ -7,6 +7,7 @@ import userIdentification from '@live-change/user-identification-service'
 import identicon from '@live-change/identicon-service'
 import localeSettings from '@live-change/locale-settings-service'
 import accessControl from '@live-change/access-control-service'
+import scope from '@live-change/scope-service'
 import security from '@live-change/security-service'
 import notification from '@live-change/notification-service'
 import upload from '@live-change/upload-service'
@@ -37,6 +38,7 @@ export {
   identicon,
   localeSettings,
   accessControl,
+  scope,
   security,
   notification,
   upload,