vitest 5

Bumps [next](https://github.com/vercel/next.js) from 16.2.4 to 16.2.6.
- [Release notes](https://github.com/vercel/next.js/releases)
- [Changelog](https://github.com/vercel/next.js/blob/canary/release.js)
- [Commits](https://github.com/vercel/next.js/compare/v16.2.4...v16.2.6)

---
updated-dependencies:
- dependency-name: next
  dependency-version: 16.2.6
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.babelrc

@@ -1,5 +0,0 @@
-{
-    "presets": [
-        "next/babel"
-    ]
-}

.eslintrc.js

@@ -1,26 +0,0 @@
-module.exports = {
-	"env": {
-		"browser": true,
-		"es6": true
-	},
-	"extends": "standard",
-	"plugins": [
-		"standard",
-		"promise",
-		"react",
-	],
-	"rules": {
-		"semi": ["error", "never"],
-		"space-before-function-paren": "off",
-		"comma-dangle": "off",
-		"no-tabs": "off",
-		"indent": ["error", "tab"],
-		"react/jsx-uses-react": "error",
-		"react/jsx-uses-vars": "error",
-	},
-	"parserOptions": {
-		"ecmaFeatures": {
-			"jsx": true
-		}
-	}
-};

.forestry/front_matter/templates/article.yml

@@ -1,15 +0,0 @@
----
-label: Article
-hide_body: false
-fields:
-- name: slug
-  type: text
-  config:
-    required: false
-  label: slug
-- name: tags
-  type: tag_list
-  default: []
-  label: tags
-pages:
-- data/articles/article-test.md

.forestry/settings.yml

@@ -1,29 +0,0 @@
----
-new_page_extension: md
-auto_deploy: false
-admin_path: ''
-webhook_url: 
-sections:
-- type: directory
-  path: data/articles
-  label: Articles
-  create: documents
-  match: "**/*"
-- type: document
-  path: data/settings.json
-  label: Settings
-upload_dir: uploads
-public_path: "/uploads"
-front_matter_path: ''
-use_front_matter_path: false
-file_template: ":year:/:filename:"
-build:
-  preview_command: gatsby build
-  publish_command: gatsby build
-  preview_output_directory: public
-  output_directory: public
-  instant_preview_command: npm run forestry:preview
-  install_dependencies_command: yarn install
-  preview_docker_image: node:10
-  mount_path: "/srv"
-  working_dir: "/srv"

.github/pull_request_template.md

@@ -0,0 +1,5 @@
+## Summary
+
+-
+
+## Closes #

.github/workflows/build-app.yaml

@@ -0,0 +1,53 @@
+name: Build Frontend and Deploy
+
+on:
+    push:
+        branches:
+            - master
+
+jobs:
+    build:
+        name: Build Image
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Login to GHCR
+              uses: docker/login-action@v3
+              with:
+                  registry: ghcr.io
+                  username: ${{ github.repository_owner }}
+                  password: ${{ secrets.PAT }}
+
+            - name: Set up QEMU
+              uses: docker/setup-qemu-action@v3
+
+            - name: set up Docker Buildx
+              id: buildx
+              uses: docker/setup-buildx-action@v3
+
+            - name: Cache Docker layers
+              uses: actions/cache@v4
+              with:
+                  path: /tmp/.buildx-cache
+                  key: ${{ runner.os }}-buildx-${{ github.sha }}
+                  restore-keys: |
+                      ${{ runner.os }}-buildx-
+
+            - name: Build and push
+              uses: docker/build-push-action@v5
+              with:
+                  context: ./
+                  file: ./apps/hudozka/Dockerfile
+                  push: true
+                  platforms: linux/amd64
+                  tags: |
+                      ghcr.io/tmshv/hudozka-app:latest
+                  cache-from: type=local,src=/tmp/.buildx-cache
+                  cache-to: type=local,dest=/tmp/.buildx-cache-new
+
+            - name: Move cache
+              run: |
+                  rm -rf /tmp/.buildx-cache
+                  mv /tmp/.buildx-cache-new /tmp/.buildx-cache

.github/workflows/build-pb.yaml

@@ -0,0 +1,31 @@
+name: Build Pocketbase and Deploy
+
+on:
+    push:
+        branches:
+            - master
+        paths:
+            - "pb/**"
+
+jobs:
+    build:
+        name: Build Image
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Login to GHCR
+              uses: docker/login-action@v3
+              with:
+                  registry: ghcr.io
+                  username: ${{ github.repository_owner }}
+                  password: ${{ secrets.PAT }}
+
+            - name: Build and Push
+              uses: docker/build-push-action@v5
+              with:
+                  push: true
+                  context: pb
+                  tags: |
+                      ghcr.io/tmshv/hudozka-pb:latest

.github/workflows/test-app.yml

@@ -0,0 +1,92 @@
+name: Test App
+
+on:
+    pull_request:
+
+jobs:
+    lint:
+        name: Lint
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 24
+                  cache: npm
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Lint
+              run: npx biome ci
+
+    test:
+        name: Test
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 24
+                  cache: npm
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Test
+              run: npm test
+
+    typecheck:
+        name: Type Check
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 24
+                  cache: npm
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Type check
+              run: npx tsc --noEmit -p apps/hudozka/tsconfig.json
+
+    build:
+        name: Build
+        needs: [lint, test, typecheck]
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: 24
+                  cache: npm
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Cache Next.js build
+              uses: actions/cache@v4
+              with:
+                  path: .next/cache
+                  key: nextjs-${{ hashFiles('package-lock.json') }}-${{ hashFiles('**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx', '**/*.css') }}
+                  restore-keys: nextjs-${{ hashFiles('package-lock.json') }}-
+
+            - name: Disable Next.js telemetry
+              run: npx next telemetry disable
+
+            - name: Build
+              run: npm run build

.gitignore

@@ -5,18 +5,28 @@ npm-debug.log
 
 private*.json
 
-/node_modules
+node_modules
 /bower_components
 /modules/hudozka-api-v1/lib
 /build
 /out
 dist
-.next
-**/env
 **/venv
 **/__pycache__
 **/*.pyc
 /coverage
 **/.vscode
 *.log
-.now
+.now
+.vercel
+.next
+tsconfig.tsbuildinfo
+.env
+
+pb/pb_data/*.db*
+pb/pb_data/storage
+
+# ralphex progress logs
+.ralphex/progress/
+
+.superpowers/

.nowignore

@@ -1,5 +0,0 @@
-.forestry
-./utils
-modules
-data
-uploads

CLAUDE.md

@@ -0,0 +1,124 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Website for the Art School of Shlisselburg ([art.shlisselburg.org](https://art.shlisselburg.org)). Content is in Russian. Built with Next.js using the App Router and PocketBase as the backend (migrated from Strapi — see `pb/` and `src/remote/pb.ts`). The project has migrated through Express → Angular 1 → React class components → Next.js (Pages Router) → Next.js (App Router); some legacy artifacts remain.
+
+## Commands
+
+From repo root (delegates to `apps/hudozka`):
+
+- `npm run dev` — dev server with Turbo (`next dev --turbo`)
+- `npm run build` — production build
+- `npm run lint` — Biome lint + format check across the whole monorepo (`biome check`)
+- `npm run format` — auto-fix lint and format issues (`biome check --write`)
+- `npm test` — run unit tests (Vitest) across every workspace
+
+Per-app:
+
+- `npm run dev -w apps/hudozka-writer` — writer UI (Vite)
+- `npm run migrate -w apps/migrate-to-pocketbase` — one-off migration script
+
+Node 24 required (see `mise.toml`). Deployed on Vercel.
+
+## Git Workflow
+
+Feature branches are named `issue-XXX` where `XXX` is the related GitHub issue number. PR descriptions should not include a test plan section.
+
+## CI/CD
+
+- `apps/hudozka/Dockerfile` — multi-stage Alpine build with standalone Next.js output, pushed to GHCR. Build context is the repo root so the workspace graph is available.
+- `.github/workflows/build-app.yaml` — builds and pushes Docker image on push to master (`file: ./apps/hudozka/Dockerfile`, `context: ./`).
+- `.github/workflows/test-app.yml` — runs lint, tests, typecheck, and build on PRs.
+
+## Code Style
+
+Biome (`biome.json`) handles formatting and linting. Style: no semicolons, double quotes, 4-space indentation, always-multiline trailing commas, LF line endings, 120-column line width. Lint scope is limited to `**/src/**/*.{ts,tsx,js}` via `files.includes`. Console calls are restricted to `console.error`/`console.warn` (full `console.*` is allowed only inside `apps/migrate-to-pocketbase`). `noDangerouslySetInnerHtml` is disabled because the site renders trusted CMS HTML. Inline `biome-ignore` / `eslint-disable` comments are not used — fix the underlying issue instead.
+
+**React components:** Use regular function declarations (not arrow functions) and `type` for props. Do not use `React.FC`.
+
+```tsx
+export type MyComponentProps = {
+    value: string
+}
+
+export function MyComponent({ value }: MyComponentProps) {
+    return <div>{value}</div>
+}
+```
+
+## Dependencies
+
+When adding or updating packages in `package.json`, do not specify the PATCH version — use `^MAJOR.MINOR.0`. The exact patch version is managed by the lockfile and `npm update`.
+
+## Architecture
+
+**App Router with SSG/ISR:** Pages are server components under `src/app/` with `export const revalidate = 30`. The root layout (`src/app/layout.tsx`) fetches menu data and passes it down. The catch-all route `src/app/[...slug]/page.tsx` handles all dynamic content pages with `generateStaticParams` and `generateMetadata`.
+
+**Server/client boundary:** Layout and page components are server components that fetch data. The `App` component (`src/components/App`) is a `"use client"` component that provides the layout chrome (navigation, breadcrumbs, footer). Content is passed as `children` from server pages through the client boundary. Components using hooks (`PageGrid`, `HomeContent`, `PageContent`, `Menu`, `MobileNavigation`, `Wrapper`) are marked `"use client"`.
+
+**Data flow:** PocketBase API → `src/remote/api.ts` fetches data via `apiGet()` generic wrapper → `src/remote/factory.ts` normalizes responses into app types (`src/types.ts`) → pages render token-based content blocks. The API layer uses a factory pattern with default-response fallbacks on failure. The legacy Strapi integration was removed (see commit "rm strapi"); `src/remote/pb.ts` is the PocketBase client.
+
+**Metadata:** Uses the Next.js Metadata API (`generateMetadata`, `export const metadata`). The `buildMetadata()` helper in `src/lib/meta.ts` bridges the app's `Meta` type to Next.js `Metadata` format.
+
+**Content tokens:** Pages are composed of flexible content blocks (tokens): `text`, `image`, `file`, `html`, `youtube`, `instagram`, `grid`. The `Token` discriminated union is defined in `src/types.ts`. Each token type maps to a renderer component in the `PageContent` client component.
+
+**State management:** Valtio for reactive state (`src/store/`). Theme/accessibility preferences in `theme` store, playback state in `play` store.
+
+## Key Directories
+
+- `apps/hudozka/src/app/` — App Router pages, layouts, route handlers (catch-all, not-found, sitemap, robots, feed)
+- `apps/hudozka/src/components/` — page-level and feature components (folder-per-component + `styles.module.css`)
+- `apps/hudozka/src/ui/` — Next/store-coupled UI that stays in the app: `Picture`, `ThemeColor`
+- `apps/hudozka/src/remote/` — PocketBase API client (`api.ts`, `factory.ts`, `types.ts`, `pb.ts`)
+- `apps/hudozka/src/store/` — Valtio stores (theme/accessibility, playback)
+- `apps/hudozka/src/hooks/` — business-coupled hooks: `useDarkTheme`, `useAccessibility`
+- `apps/hudozka/src/lib/` — app-only lib (currently just `meta.ts`)
+- `apps/hudozka/src/style/` — global CSS with CSS custom properties for theming
+- `packages/ui/` — `@hudozka/ui` — reusable primitives (Box, Button, Panel, Title, Overlay)
+- `packages/hooks/` — `@hudozka/hooks` — generic React hooks (useToggle, useLockBodyScroll, useMediaQuery, useMobile, useReducedMotion)
+- `packages/utils/` — `@hudozka/utils` — pure utilities (array, string, url, math, image, file, date)
+- `packages/text/` — `@hudozka/text` — markdown + typograf rendering
+- `apps/hudozka-writer/` — Vite-based Tiptap editor
+- `apps/migrate-to-pocketbase/` — one-off Strapi → PocketBase migration script
+- `pb/` — PocketBase instance (data, migrations)
+
+## Styling
+
+CSS Modules (`.module.css`) for component-scoped styles. Global theme via CSS custom properties in `src/style/style.css`. No utility CSS framework. Uses `classnames` package for conditional class composition.
+
+## TypeScript
+
+Path alias: `@/*` → `src/*`. Strict mode enabled. Target ES2020. `moduleDetection: "force"` in tsconfig (required because Next.js auto-generates `.next/types/validator.ts` without exports, which breaks `verbatimModuleSyntax`). Use `@/` path alias for all local imports, not `src/`. Legacy `src/` imports exist in the codebase but should not be used in new or modified code. The `@/*` path alias is only configured in `apps/hudozka/tsconfig.json`; packages under `packages/*` use short relative imports.
+
+`verbatimModuleSyntax` is enabled — use `import type` for type-only imports. When importing both values and types from the same module, use separate `import` and `import type` statements:
+
+```ts
+import { createPage } from "@/remote/factory"
+import type { Page } from "@/types"
+```
+
+## Accessibility
+
+The site has an accessibility panel with configurable font size (8-48pt), color schemes (5 presets: black-on-white, white-on-black, blue-on-blue, brown-on-yellow, green-on-brown), line height, letter spacing, image toggling, and serif/sans-serif font choice — all managed through the Valtio theme store. The theme store currently applies changes via direct DOM manipulation in a Valtio `subscribe()` callback (`src/store/theme.ts`).
+
+## Images
+
+Remote images from `hudozkacdn.tmshv.com` with `images.weserv.nl` as proxy. Blur hash encoding for progressive loading (uses `sharp` server-side). Image optimization configured in `next.config.ts` via `remotePatterns`.
+
+## Testing
+
+Vitest for unit tests. Config in `vitest.config.ts` with `@/` and `src/` path aliases. Test files are co-located with source across `src/lib/`, `src/ui/`, and `src/components/`. Covers utility functions (array, string, url, file, image, date, text, meta), UI primitives (Box, Button, Panel), and components (Breadcrumbs, YMetrika).
+
+## Known Legacy / Technical Debt
+
+Active modernization is tracked in GitHub issues #222–#238. Key items:
+
+- `src/types.ts` has `I`-prefix interfaces (`IPage`, `IMenu`, etc.) from the Angular era alongside modern `type` aliases. The `tokens` field on `IPage` is `any[]` despite a proper `Token` union type existing.
+- `src/store/theme.ts` manipulates DOM directly outside React lifecycle (sets CSS vars on `document.documentElement`, toggles `document.body` classes).
+- Two orphaned `.scss` files in `src/style/` (`tape-viewer.scss`, `vertical-image.scss`) — not imported anywhere, no SCSS preprocessor configured.
+- Some inline styles in `src/components/App/index.tsx` should be CSS modules.
+- `react-use` and `use-media` dependencies are unmaintained; only `useToggle` and `useLockBodyScroll` are used from `react-use`.
+

README.md

@@ -1,42 +1,68 @@
 # [ART.SHLISSELBURG.ORG](https://art.shlisselburg.org)
 
-Site of Art school of Shlisselburg
+Website for the Art School of Shlisselburg. Built with Next.js and powered by PocketBase (migrated from Strapi).
 
 Font: [«Shadow»](http://mishapanfilov.ru/font_shadow.html)
 
-## Usage
+## Repo layout
 
-### Build
+This is an npm-workspaces monorepo:
 
+- `apps/hudozka` — main Next.js app (art.shlisselburg.org)
+- `apps/hudozka-writer` — Vite-based content editor
+- `apps/migrate-to-pocketbase` — one-off migration script (Strapi → PocketBase)
+- `packages/ui` — `@hudozka/ui` — shared React primitives (Box, Button, Panel, Title, Overlay)
+- `packages/hooks` — `@hudozka/hooks` — generic React hooks
+- `packages/utils` — `@hudozka/utils` — pure utilities (array, string, url, math, image, file, date)
+- `packages/text` — `@hudozka/text` — markdown + typograf rendering
+- `pb/` — PocketBase instance (untouched by the monorepo migration)
+
+Common commands (from repo root):
+
+- `npm run dev` — run the web app dev server
+- `npm run build` — production build of the web app
+- `npm run lint` — lint the whole monorepo
+- `npm test` — run tests across every workspace
+- `npm run dev -w apps/hudozka-writer` — run the writer
+- `npm run migrate -w apps/migrate-to-pocketbase` — run the migration script
+
+## Development
+
+### Prerequisites
+
+- Node.js 24 (see `mise.toml`)
+
+### Getting Started
+
+1. Install dependencies
 ```bash
-$ docker build -t tmshv/hudozka .
+npm install
 ```
 
-### How to run
-
-#### Add .env file
-
-```
-MONGO_HUDOZKA_PASSWORD=<strong_password>
-HUDOZKA_DB_URI=mongodb://hudozka:strong_password@mongo:27017/hudozka?authSource=admin
-```
-
-#### Run
+2. Start development server
 ```bash
-$ docker-compose up -d
+npm run dev
 ```
 
-### How to sync data base
+The development server runs at [http://localhost:3000](http://localhost:3000) with Turbo mode enabled.
 
-Local DB to remote DB
+## Content Management
+Content is fetched from PocketBase and rendered using flexible content tokens:
+- `text` — Markdown with Russian typography (Typograf)
+- `image` — Responsive images with blur hash
+- `file` — Document downloads
+- `html` — Raw HTML embeds
+- `youtube` — Video embeds
+- `instagram` — Social media embeds
+- `grid` — Card grids
 
-```bash
-DB=hudozka
-HOST=<ip_address>
-USER=<mongo_user>
-PWD=<mongo_password>
-mongodump -d ${DB} --gzip --archive | mongorestore -h ${HOST} -u ${USER} -p ${PWD} -d ${DB} --gzip --archive
-```
+## Accessibility
+The site includes an accessibility panel with configurable:
+- Font size (8-48pt)
+- Color schemes (5 presets: black-on-white, white-on-black, blue-on-blue, brown-on-yellow, green-on-brown)
+- Line height and letter spacing
+- Image toggling
+- Font family (serif/sans-serif)
 
 ## Contributors
 - Roman Timashev ([roman@tmshv.ru](mailto:roman@tmshv.ru))

apps/hudozka-writer/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/hudozka-writer/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

apps/hudozka-writer/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hudozka Writer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/hudozka-writer/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "hudozka-writer",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tiptap/core": "^3.0.0",
+    "@tiptap/extension-blockquote": "^3.0.0",
+    "@tiptap/extension-bold": "^3.0.0",
+    "@tiptap/extension-bullet-list": "^3.0.0",
+    "@tiptap/extension-code": "^3.0.0",
+    "@tiptap/extension-code-block": "^3.0.0",
+    "@tiptap/extension-document": "^3.0.0",
+    "@tiptap/extension-hard-break": "^3.0.0",
+    "@tiptap/extension-heading": "^3.0.0",
+    "@tiptap/extension-horizontal-rule": "^3.0.0",
+    "@tiptap/extension-italic": "^3.0.0",
+    "@tiptap/extension-link": "^3.0.0",
+    "@tiptap/extension-list-item": "^3.0.0",
+    "@tiptap/extension-ordered-list": "^3.0.0",
+    "@tiptap/extension-paragraph": "^3.0.0",
+    "@tiptap/extension-strike": "^3.0.0",
+    "@tiptap/extension-text": "^3.0.0",
+    "@tiptap/markdown": "^3.0.0",
+    "@tiptap/pm": "^3.0.0",
+    "@tiptap/react": "^3.0.0",
+    "@tiptap/starter-kit": "^3.0.0",
+    "@tiptap/suggestion": "^3.22.2",
+    "pocketbase": "^0.25.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.0",
+    "@vitejs/plugin-react": "^5.2.0",
+    "typescript": "^5.9.0",
+    "vite": "^8.0.0"
+  }
+}

apps/hudozka-writer/src/App.css

@@ -0,0 +1,68 @@
+.app {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+.app-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 20px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.app-title {
+    font-weight: 600;
+}
+
+.app-slug {
+    color: #888;
+    font-family: monospace;
+}
+
+.app-header button {
+    padding: 4px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+}
+
+.app-header button:first-of-type {
+    margin-left: auto;
+}
+
+.app-main {
+    flex: 1;
+    padding: 20px;
+    max-width: 800px;
+    margin: 0 auto;
+    width: 100%;
+}
+
+.app-message {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    min-height: 100vh;
+}
+
+.app-error {
+    color: #c00;
+}
+
+.app-published-toggle {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 0.9rem;
+    cursor: pointer;
+    user-select: none;
+}
+
+.app-published-toggle input {
+    cursor: pointer;
+}

apps/hudozka-writer/src/App.tsx

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useState } from "react"
+import { Editor } from "./components/Editor"
+import { Login } from "./components/Login"
+import { pb } from "./pb"
+import type { PbPage } from "./types"
+import "./App.css"
+
+function getSlugFromUrl(): string | null {
+    const params = new URLSearchParams(window.location.search)
+    return params.get("page")
+}
+
+export function App() {
+    const [authenticated, setAuthenticated] = useState(pb.authStore.isValid)
+    const [page, setPage] = useState<PbPage | null>(null)
+    const [loading, setLoading] = useState(false)
+    const [error, setError] = useState("")
+
+    const slug = getSlugFromUrl()
+
+    const loadPage = useCallback(async (slug: string) => {
+        setLoading(true)
+        setError("")
+        try {
+            const record = await pb.collection("pages").getFirstListItem<PbPage>(`slug="${slug}"`)
+            setPage(record)
+        } catch {
+            setError(`Page "${slug}" not found`)
+        } finally {
+            setLoading(false)
+        }
+    }, [])
+
+    useEffect(() => {
+        if (authenticated && slug) {
+            loadPage(slug)
+        }
+    }, [authenticated, slug, loadPage])
+
+    function handleLogout() {
+        pb.authStore.clear()
+        setAuthenticated(false)
+        setPage(null)
+    }
+
+    async function handleDuplicate() {
+        if (!page) return
+        const newSlug = `${page.slug}-copy`
+        try {
+            const record = await pb.collection("pages").create<PbPage>({
+                title: `${page.title} (copy)`,
+                slug: newSlug,
+                excerpt: page.excerpt,
+                date: page.date,
+                cover: page.cover,
+                doc: page.doc,
+                tags: page.tags,
+                published: false,
+                draft: null,
+            })
+            window.location.search = `?page=${record.slug}`
+        } catch (err) {
+            console.error("Duplicate failed:", err)
+            alert("Duplicate failed. Check console.")
+        }
+    }
+
+    async function handleTogglePublished() {
+        if (!page) return
+        try {
+            const updated = await pb.collection("pages").update<PbPage>(page.id, {
+                published: !page.published,
+            })
+            setPage(updated)
+        } catch (err) {
+            console.error("Toggle published failed:", err)
+            alert("Toggle published failed. Check console.")
+        }
+    }
+
+    if (!authenticated) {
+        return <Login onLogin={() => setAuthenticated(true)} />
+    }
+
+    if (!slug) {
+        return (
+            <div className="app-message">
+                <p>
+                    Add <code>?page=slug</code> to the URL to edit a page.
+                </p>
+                <button type="button" onClick={handleLogout}>
+                    Logout
+                </button>
+            </div>
+        )
+    }
+
+    if (loading) {
+        return <div className="app-message">Loading...</div>
+    }
+
+    if (error) {
+        return (
+            <div className="app-message">
+                <p className="app-error">{error}</p>
+                <button type="button" onClick={handleLogout}>
+                    Logout
+                </button>
+            </div>
+        )
+    }
+
+    if (!page) {
+        return <div className="app-message">Loading...</div>
+    }
+
+    return (
+        <div className="app">
+            <header className="app-header">
+                <span className="app-title">{page.title}</span>
+                <span className="app-slug">/{page.slug}</span>
+                <label className="app-published-toggle">
+                    <input type="checkbox" checked={page.published} onChange={handleTogglePublished} />
+                    Published
+                </label>
+                <button type="button" onClick={handleDuplicate}>
+                    Duplicate
+                </button>
+                <button type="button" onClick={handleLogout}>
+                    Logout
+                </button>
+            </header>
+            <main className="app-main">
+                <Editor page={page} />
+            </main>
+        </div>
+    )
+}

apps/hudozka-writer/src/components/BlockActions.css

@@ -0,0 +1,69 @@
+.block-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2px;
+    flex-shrink: 0;
+    width: 28px;
+    padding-top: 2px;
+    user-select: none;
+}
+
+.block-action-btn {
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    border: 1px solid transparent;
+    background: none;
+    cursor: pointer;
+    font-size: 16px;
+    line-height: 1;
+    color: #ccc;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    padding: 0;
+}
+
+.block-action-btn:hover {
+    border-color: #ddd;
+    color: #666;
+    background: #f5f5f5;
+}
+
+.block-action-delete:hover {
+    border-color: #c00;
+    color: #c00;
+    background: #fff0f0;
+}
+
+.block-action-split:hover {
+    border-color: #2563eb;
+    color: #2563eb;
+    background: #eff6ff;
+}
+
+.block-drag-handle {
+    cursor: grab;
+}
+
+.block-drag-handle:active {
+    cursor: grabbing;
+}
+
+[data-node-view-wrapper] {
+    position: relative;
+}
+
+.node-view-block {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    gap: 4px;
+}
+
+.node-view-content {
+    flex: 1;
+    min-width: 0;
+}

apps/hudozka-writer/src/components/BlockActions.tsx

@@ -0,0 +1,149 @@
+import { Fragment } from "@tiptap/pm/model"
+import type { Editor } from "@tiptap/react"
+import { useCallback, useEffect } from "react"
+import "./BlockActions.css"
+
+export type BlockActionsProps = {
+    editor: Editor
+    getPos: () => number | undefined
+    showSplit?: boolean
+}
+
+export function BlockActions({ editor, getPos, showSplit }: BlockActionsProps) {
+    const getWrapper = useCallback(() => {
+        const pos = getPos()
+        if (typeof pos !== "number") return null
+        const dom = editor.view.nodeDOM(pos)
+        if (!dom || !(dom instanceof HTMLElement)) return null
+        return dom.closest("[data-node-view-wrapper]") as HTMLElement | null
+    }, [editor, getPos])
+
+    useEffect(() => {
+        const checkActive = () => {
+            const wrapper = getWrapper()
+            if (!wrapper) return
+
+            const pos = getPos()
+            if (typeof pos !== "number") {
+                wrapper.classList.remove("active-block")
+                return
+            }
+
+            const { from } = editor.state.selection
+            const resolved = editor.state.doc.resolve(from)
+            if (resolved.depth < 1) {
+                wrapper.classList.remove("active-block")
+                return
+            }
+
+            const blockPos = resolved.before(1)
+            if (blockPos === pos) {
+                wrapper.classList.add("active-block")
+            } else {
+                wrapper.classList.remove("active-block")
+            }
+        }
+
+        const handleBlur = () => {
+            const wrapper = getWrapper()
+            wrapper?.classList.remove("active-block")
+        }
+
+        checkActive()
+        editor.on("selectionUpdate", checkActive)
+        editor.on("focus", checkActive)
+        editor.on("blur", handleBlur)
+        return () => {
+            editor.off("selectionUpdate", checkActive)
+            editor.off("focus", checkActive)
+            editor.off("blur", handleBlur)
+            const wrapper = getWrapper()
+            wrapper?.classList.remove("active-block")
+        }
+    }, [editor, getPos, getWrapper])
+
+    const handleDelete = (e: React.MouseEvent) => {
+        e.preventDefault()
+        const pos = getPos()
+        if (typeof pos !== "number") return
+        const node = editor.state.doc.nodeAt(pos)
+        if (!node) return
+        editor
+            .chain()
+            .focus()
+            .deleteRange({
+                from: pos,
+                to: pos + node.nodeSize,
+            })
+            .run()
+    }
+
+    const handleSplit = (e: React.MouseEvent) => {
+        e.preventDefault()
+        const pos = getPos()
+        if (typeof pos !== "number") return
+        const node = editor.state.doc.nodeAt(pos)
+        if (!node || node.childCount < 2) return
+
+        const { from } = editor.state.selection
+        let childOffset = pos + 1
+        let splitAfter = -1
+
+        for (let i = 0; i < node.childCount; i++) {
+            const child = node.child(i)
+            const childEnd = childOffset + child.nodeSize
+            if (from >= childOffset && from < childEnd) {
+                splitAfter = i
+                break
+            }
+            childOffset = childEnd
+        }
+
+        if (splitAfter < 0 || splitAfter >= node.childCount - 1) return
+
+        const firstChildren = []
+        const secondChildren = []
+        for (let i = 0; i < node.childCount; i++) {
+            if (i <= splitAfter) {
+                firstChildren.push(node.child(i))
+            } else {
+                secondChildren.push(node.child(i))
+            }
+        }
+
+        const { schema } = editor.state
+        const textBlockType = schema.nodes.textBlock
+        const first = textBlockType.create(null, firstChildren)
+        const second = textBlockType.create(null, secondChildren)
+
+        const tr = editor.state.tr
+        tr.replaceWith(pos, pos + node.nodeSize, Fragment.from([first, second]))
+        editor.view.dispatch(tr)
+    }
+
+    return (
+        <div className="block-actions" contentEditable={false}>
+            <button
+                type="button"
+                className="block-action-btn block-action-delete"
+                title="Delete block"
+                onClick={handleDelete}
+            >
+                &times;
+            </button>
+            {showSplit && (
+                <button
+                    type="button"
+                    className="block-action-btn block-action-split"
+                    title="Split block"
+                    onClick={handleSplit}
+                >
+                    &#x2702;
+                </button>
+            )}
+            <div className="block-action-btn block-drag-handle" data-drag-handle draggable title="Drag to reorder">
+                &#x2807;
+            </div>
+        </div>
+    )
+}

apps/hudozka-writer/src/components/BlockInsert.css

@@ -0,0 +1,39 @@
+.block-insert {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding: 8px 0 8px 28px;
+}
+
+.block-insert-btn {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    border: 1px solid transparent;
+    background: none;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    color: #ccc;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.15s ease;
+    padding: 0;
+    z-index: 10;
+}
+
+.block-insert-btn:hover {
+    border-color: #ddd;
+    color: #666;
+    background: #f5f5f5;
+}
+
+.block-insert-menu {
+    position: absolute;
+    top: 12px;
+    left: 56px;
+    z-index: 50;
+}

apps/hudozka-writer/src/components/BlockInsert.tsx

@@ -0,0 +1,43 @@
+import type { Editor } from "@tiptap/react"
+import { useState } from "react"
+import { BlockMenu } from "./BlockMenu"
+import "./BlockInsert.css"
+
+export type BlockInsertProps = {
+    editor: Editor
+    getPos: () => number | undefined
+}
+
+export function BlockInsert({ editor, getPos }: BlockInsertProps) {
+    const [menuOpen, setMenuOpen] = useState(false)
+
+    const insertPos = (() => {
+        const pos = getPos()
+        if (typeof pos !== "number") return 0
+        const node = editor.state.doc.nodeAt(pos)
+        return node ? pos + node.nodeSize : 0
+    })()
+
+    const handleToggle = (e: React.MouseEvent) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setMenuOpen(!menuOpen)
+    }
+
+    const handleClose = () => {
+        setMenuOpen(false)
+    }
+
+    return (
+        <div className="block-insert" contentEditable={false}>
+            <button type="button" className="block-insert-btn" title="Add block" onClick={handleToggle}>
+                +
+            </button>
+            {menuOpen && (
+                <div className="block-insert-menu">
+                    <BlockMenu editor={editor} position={insertPos} onClose={handleClose} />
+                </div>
+            )}
+        </div>
+    )
+}

apps/hudozka-writer/src/components/BlockMenu.css

@@ -0,0 +1,24 @@
+.block-menu {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 4px 0;
+    min-width: 160px;
+    z-index: 50;
+}
+
+.block-menu-item {
+    display: block;
+    width: 100%;
+    padding: 8px 12px;
+    border: none;
+    background: none;
+    text-align: left;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.block-menu-item:hover {
+    background: #f0f4ff;
+}

apps/hudozka-writer/src/components/BlockMenu.tsx

@@ -0,0 +1,69 @@
+import type { Editor } from "@tiptap/react"
+import { generateBlockId } from "../lib/id"
+import "./BlockMenu.css"
+
+type BlockType = {
+    label: string
+    type: string
+    attrs?: Record<string, unknown>
+}
+
+const BLOCK_TYPES: BlockType[] = [
+    { label: "Text", type: "textBlock" },
+    { label: "Image", type: "imageBlock", attrs: { id: "", imageId: "", wide: false, caption: "" } },
+    { label: "File", type: "documentBlock", attrs: { id: "", fileId: "", title: "" } },
+    { label: "Embed", type: "embedBlock", attrs: { id: "", src: "" } },
+    { label: "Card Grid", type: "cardGridBlock", attrs: { id: "", items: "[]" } },
+]
+
+export type BlockMenuProps = {
+    editor: Editor
+    position: number
+    onClose: () => void
+    filter?: string
+}
+
+export function BlockMenu({ editor, position, onClose, filter }: BlockMenuProps) {
+    const filtered = filter
+        ? BLOCK_TYPES.filter(b => b.label.toLowerCase().includes(filter.toLowerCase()))
+        : BLOCK_TYPES
+
+    function handleInsert(block: BlockType) {
+        const id = generateBlockId()
+        if (block.type === "textBlock") {
+            editor
+                .chain()
+                .focus()
+                .insertContentAt(position, {
+                    type: "textBlock",
+                    content: [{ type: "paragraph" }],
+                })
+                .run()
+        } else {
+            editor
+                .chain()
+                .focus()
+                .insertContentAt(position, {
+                    type: block.type,
+                    attrs: { ...block.attrs, id },
+                })
+                .run()
+        }
+        onClose()
+    }
+
+    if (filtered.length === 0) return null
+
+    return (
+        <div className="block-menu">
+            {filtered.map(block => (
+                <button type="button" key={block.type} className="block-menu-item" onClick={() => handleInsert(block)}>
+                    {block.label}
+                </button>
+            ))}
+        </div>
+    )
+}
+
+export type { BlockType }
+export { BLOCK_TYPES }

apps/hudozka-writer/src/components/DraftBanner.css

@@ -0,0 +1,24 @@
+.draft-banner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 12px;
+    background: #fff8e1;
+    border: 1px solid #ffe082;
+    border-radius: 4px;
+    margin-bottom: 12px;
+    font-size: 0.9rem;
+}
+
+.draft-banner-discard {
+    padding: 4px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+    font-size: 0.85rem;
+}
+
+.draft-banner-discard:hover {
+    background: #f0f0f0;
+}

apps/hudozka-writer/src/components/DraftBanner.tsx

@@ -0,0 +1,16 @@
+import "./DraftBanner.css"
+
+export type DraftBannerProps = {
+    onDiscard: () => void
+}
+
+export function DraftBanner({ onDiscard }: DraftBannerProps) {
+    return (
+        <div className="draft-banner">
+            <span>You have unpublished changes</span>
+            <button type="button" onClick={onDiscard} className="draft-banner-discard">
+                Discard
+            </button>
+        </div>
+    )
+}

apps/hudozka-writer/src/components/Editor.css

@@ -0,0 +1,88 @@
+.editor {
+    width: 100%;
+}
+
+.editor-content {
+    position: relative;
+}
+
+.editor-content .tiptap {
+    outline: none;
+    min-height: 400px;
+}
+
+.editor-content .tiptap > * + * {
+    margin-top: 0.75em;
+}
+
+.editor-content .tiptap h1 {
+    font-size: 2rem;
+}
+
+.editor-content .tiptap h2 {
+    font-size: 1.5rem;
+}
+
+.editor-content .tiptap h3 {
+    font-size: 1.25rem;
+}
+
+.editor-content .tiptap blockquote {
+    border-left: 3px solid #e0e0e0;
+    padding-left: 1rem;
+    color: #666;
+}
+
+.editor-content .tiptap pre {
+    background: #f5f5f5;
+    border-radius: 4px;
+    padding: 12px;
+    font-family: monospace;
+}
+
+.editor-content .tiptap code {
+    background: #f0f0f0;
+    border-radius: 2px;
+    padding: 0.1em 0.3em;
+    font-size: 0.9em;
+}
+
+.editor-content .tiptap hr {
+    border: none;
+    border-top: 1px solid #e0e0e0;
+    margin: 1.5em 0;
+}
+
+.editor-content .tiptap a {
+    color: #2563eb;
+    text-decoration: underline;
+}
+
+.editor-content .tiptap ul,
+.editor-content .tiptap ol {
+    padding-left: 1.5em;
+}
+
+.editor-markdown {
+    width: 100%;
+    min-height: 400px;
+    padding: 16px;
+    font-family: monospace;
+    font-size: 14px;
+    line-height: 1.6;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    resize: vertical;
+    outline: none;
+    box-sizing: border-box;
+}
+
+.editor-markdown:focus {
+    border-color: #213547;
+}
+
+.editor-content .tiptap [data-node-view-wrapper].active-block > .node-view-content {
+    outline: 2px solid #d0d5dd;
+    outline-offset: 2px;
+    border-radius: 4px;
+}

apps/hudozka-writer/src/components/Editor.tsx

@@ -0,0 +1,160 @@
+import Link from "@tiptap/extension-link"
+import { Markdown } from "@tiptap/markdown"
+import { EditorContent, useEditor } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import { useCallback, useRef, useState } from "react"
+import { SlashCommands } from "../extensions/SlashCommands"
+import { docToTiptap, tiptapToDoc } from "../lib/serialize"
+import { CardGridBlock, DocumentBlock, EmbedBlock, ImageBlock, TextBlock, WriterDocument } from "../nodes"
+import { pb } from "../pb"
+import { DraftBanner } from "./DraftBanner"
+import { Toolbar } from "./Toolbar"
+import "../nodes/nodes.css"
+import "./Editor.css"
+import type { DocV1, PbPage } from "../types"
+
+function serializeDoc(doc: DocV1): string {
+    return JSON.stringify(doc)
+}
+
+export type EditorProps = {
+    page: PbPage
+}
+
+export function Editor({ page }: EditorProps) {
+    const [saving, setSaving] = useState(false)
+    const [publishing, setPublishing] = useState(false)
+    const [markdownMode, setMarkdownMode] = useState(false)
+    const [markdownText, setMarkdownText] = useState("")
+    const [dirty, setDirty] = useState(false)
+    const [hasDraft, setHasDraft] = useState(page.draft !== null)
+    const [publishedDoc, setPublishedDoc] = useState(page.doc)
+
+    const initialDoc = page.draft ?? page.doc
+    const tiptapDoc = docToTiptap(initialDoc)
+
+    const snapshotRef = useRef(serializeDoc(initialDoc))
+
+    const editor = useEditor({
+        extensions: [
+            WriterDocument,
+            StarterKit.configure({
+                document: false,
+            }),
+            TextBlock,
+            Markdown,
+            Link.configure({ openOnClick: false }),
+            ImageBlock,
+            DocumentBlock,
+            EmbedBlock,
+            CardGridBlock,
+            SlashCommands,
+        ],
+        content: tiptapDoc,
+        onUpdate: ({ editor }) => {
+            const json = editor.getJSON()
+            const doc = tiptapToDoc(json.content ?? [])
+            const current = serializeDoc(doc)
+            setDirty(current !== snapshotRef.current)
+        },
+    })
+
+    const getCurrentDoc = useCallback((): DocV1 => {
+        if (!editor) return { version: 1, blocks: [] }
+        if (markdownMode) {
+            editor.commands.setContent(markdownText, { contentType: "markdown" })
+            setMarkdownMode(false)
+        }
+        const json = editor.getJSON()
+        return tiptapToDoc(json.content ?? [])
+    }, [editor, markdownMode, markdownText])
+
+    const handleToggleMarkdown = useCallback(() => {
+        if (!editor) return
+        if (!markdownMode) {
+            const md = editor.getMarkdown()
+            setMarkdownText(md)
+            setMarkdownMode(true)
+        } else {
+            editor.commands.setContent(markdownText, { contentType: "markdown" })
+            setMarkdownMode(false)
+        }
+    }, [editor, markdownMode, markdownText])
+
+    const handleSave = useCallback(async () => {
+        if (!editor) return
+        setSaving(true)
+        try {
+            const doc = getCurrentDoc()
+            await pb.collection("pages").update(page.id, { draft: doc })
+            snapshotRef.current = serializeDoc(doc)
+            setDirty(false)
+            setHasDraft(true)
+        } catch (err) {
+            console.error("Save failed:", err)
+            alert("Save failed. Check console.")
+        } finally {
+            setSaving(false)
+        }
+    }, [editor, page.id, getCurrentDoc])
+
+    const handlePublish = useCallback(async () => {
+        if (!editor) return
+        setPublishing(true)
+        try {
+            const doc = getCurrentDoc()
+            await pb.collection("pages").update(page.id, { doc, draft: null })
+            snapshotRef.current = serializeDoc(doc)
+            setDirty(false)
+            setHasDraft(false)
+            setPublishedDoc(doc)
+        } catch (err) {
+            console.error("Publish failed:", err)
+            alert("Publish failed. Check console.")
+        } finally {
+            setPublishing(false)
+        }
+    }, [editor, page.id, getCurrentDoc])
+
+    const handleDiscard = useCallback(async () => {
+        if (!editor) return
+        try {
+            await pb.collection("pages").update(page.id, { draft: null })
+            const tiptap = docToTiptap(publishedDoc)
+            editor.commands.setContent(tiptap)
+            snapshotRef.current = serializeDoc(publishedDoc)
+            setDirty(false)
+            setHasDraft(false)
+            setMarkdownMode(false)
+        } catch (err) {
+            console.error("Discard failed:", err)
+            alert("Discard failed. Check console.")
+        }
+    }, [editor, page.id, publishedDoc])
+
+    return (
+        <div className="editor">
+            <Toolbar
+                editor={editor}
+                onSave={handleSave}
+                onPublish={handlePublish}
+                saving={saving}
+                publishing={publishing}
+                dirty={dirty}
+                hasDraft={hasDraft}
+                markdownMode={markdownMode}
+                onToggleMarkdown={handleToggleMarkdown}
+            />
+            {hasDraft && <DraftBanner onDiscard={handleDiscard} />}
+            {markdownMode ? (
+                <textarea
+                    className="editor-markdown"
+                    value={markdownText}
+                    onChange={e => setMarkdownText(e.target.value)}
+                />
+            ) : (
+                <EditorContent editor={editor} className="editor-content" />
+            )}
+        </div>
+    )
+}

apps/hudozka-writer/src/components/FilePicker.css

@@ -0,0 +1,32 @@
+.file-picker-list {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+.file-picker-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border: none;
+    background: none;
+    cursor: pointer;
+    text-align: left;
+    border-radius: 4px;
+    font-size: 0.9rem;
+}
+
+.file-picker-item:hover {
+    background: #f0f4ff;
+}
+
+.file-picker-icon {
+    font-size: 1.1rem;
+}
+
+.file-picker-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

apps/hudozka-writer/src/components/FilePicker.tsx

@@ -0,0 +1,130 @@
+import { useEffect, useRef, useState } from "react"
+import { pb } from "../pb"
+import type { PbFile } from "../types"
+import "./FilePicker.css"
+
+export type FilePickerProps = {
+    onSelect: (fileId: string) => void
+    onClose: () => void
+}
+
+export function FilePicker({ onSelect, onClose }: FilePickerProps) {
+    const [files, setFiles] = useState<PbFile[]>([])
+    const [page, setPage] = useState(1)
+    const [totalPages, setTotalPages] = useState(1)
+    const [loading, setLoading] = useState(false)
+    const [uploading, setUploading] = useState(false)
+    const [tab, setTab] = useState<"browse" | "upload">("browse")
+    const fileRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+        let cancelled = false
+        setLoading(true)
+        pb.collection("files")
+            .getList<PbFile>(page, 20, { sort: "-created" })
+            .then(result => {
+                if (cancelled) return
+                setFiles(result.items)
+                setTotalPages(result.totalPages)
+            })
+            .catch(err => {
+                if (!cancelled) console.error("Failed to load files:", err)
+            })
+            .finally(() => {
+                if (!cancelled) setLoading(false)
+            })
+        return () => {
+            cancelled = true
+        }
+    }, [page])
+
+    async function handleUpload() {
+        const file = fileRef.current?.files?.[0]
+        if (!file) return
+        setUploading(true)
+        try {
+            const record = await pb.collection("files").create<PbFile>({
+                file,
+                filename: file.name,
+            })
+            onSelect(record.id)
+        } catch (err) {
+            console.error("Upload failed:", err)
+            alert("Upload failed. Check console.")
+        } finally {
+            setUploading(false)
+        }
+    }
+
+    return (
+        <div
+            className="picker-overlay"
+            onClick={onClose}
+            onKeyDown={e => {
+                if (e.key === "Escape") onClose()
+            }}
+        >
+            <div
+                className="picker"
+                onClick={e => e.stopPropagation()}
+                onKeyDown={e => {
+                    e.stopPropagation()
+                }}
+            >
+                <div className="picker-header">
+                    <button type="button" className={tab === "browse" ? "active" : ""} onClick={() => setTab("browse")}>
+                        Browse
+                    </button>
+                    <button type="button" className={tab === "upload" ? "active" : ""} onClick={() => setTab("upload")}>
+                        Upload
+                    </button>
+                    <button type="button" className="picker-close" onClick={onClose}>
+                        ×
+                    </button>
+                </div>
+
+                {tab === "browse" && (
+                    <div className="picker-browse">
+                        {loading ? (
+                            <div className="picker-loading">Loading...</div>
+                        ) : (
+                            <div className="file-picker-list">
+                                {files.map(f => (
+                                    <button
+                                        type="button"
+                                        key={f.id}
+                                        className="file-picker-item"
+                                        onClick={() => onSelect(f.id)}
+                                    >
+                                        <span className="file-picker-icon">📎</span>
+                                        <span className="file-picker-name">{f.filename}</span>
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+                        <div className="picker-pagination">
+                            <button type="button" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>
+                                Prev
+                            </button>
+                            <span>
+                                {page} / {totalPages}
+                            </span>
+                            <button type="button" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>
+                                Next
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+                {tab === "upload" && (
+                    <div className="picker-upload">
+                        <input type="file" ref={fileRef} />
+                        <button type="button" onClick={handleUpload} disabled={uploading}>
+                            {uploading ? "Uploading..." : "Upload"}
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}

apps/hudozka-writer/src/components/ImagePicker.css

@@ -0,0 +1,127 @@
+.picker-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 100;
+}
+
+.picker {
+    background: white;
+    border-radius: 8px;
+    width: 600px;
+    max-width: 90vw;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.picker-header {
+    display: flex;
+    gap: 4px;
+    padding: 8px;
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.picker-header button {
+    padding: 4px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+}
+
+.picker-header button.active {
+    background: #213547;
+    color: white;
+    border-color: #213547;
+}
+
+.picker-close {
+    margin-left: auto !important;
+    font-size: 1.2rem;
+}
+
+.picker-browse {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+}
+
+.picker-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+    gap: 8px;
+}
+
+.picker-thumb {
+    border: 2px solid transparent;
+    border-radius: 4px;
+    padding: 0;
+    background: none;
+    cursor: pointer;
+    overflow: hidden;
+    aspect-ratio: 1;
+}
+
+.picker-thumb:hover {
+    border-color: #213547;
+}
+
+.picker-thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.picker-pagination {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    padding: 8px;
+}
+
+.picker-pagination button {
+    padding: 4px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+}
+
+.picker-pagination button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.picker-loading {
+    text-align: center;
+    padding: 40px;
+    color: #888;
+}
+
+.picker-upload {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 20px;
+    align-items: flex-start;
+}
+
+.picker-upload button {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    background: #213547;
+    color: white;
+    cursor: pointer;
+}
+
+.picker-upload button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}

apps/hudozka-writer/src/components/ImagePicker.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useRef, useState } from "react"
+import { pb } from "../pb"
+import type { PbImage } from "../types"
+import "./ImagePicker.css"
+
+export type ImagePickerProps = {
+    onSelect: (imageId: string) => void
+    onClose: () => void
+}
+
+export function ImagePicker({ onSelect, onClose }: ImagePickerProps) {
+    const [images, setImages] = useState<PbImage[]>([])
+    const [page, setPage] = useState(1)
+    const [totalPages, setTotalPages] = useState(1)
+    const [loading, setLoading] = useState(false)
+    const [uploading, setUploading] = useState(false)
+    const [tab, setTab] = useState<"browse" | "upload">("browse")
+    const fileRef = useRef<HTMLInputElement>(null)
+
+    useEffect(() => {
+        let cancelled = false
+        setLoading(true)
+        pb.collection("images")
+            .getList<PbImage>(page, 20, { sort: "-created" })
+            .then(result => {
+                if (cancelled) return
+                setImages(result.items)
+                setTotalPages(result.totalPages)
+            })
+            .catch(err => {
+                if (!cancelled) console.error("Failed to load images:", err)
+            })
+            .finally(() => {
+                if (!cancelled) setLoading(false)
+            })
+        return () => {
+            cancelled = true
+        }
+    }, [page])
+
+    async function handleUpload() {
+        const file = fileRef.current?.files?.[0]
+        if (!file) return
+        setUploading(true)
+        try {
+            const record = await pb.collection("images").create<PbImage>({
+                file,
+                filename: file.name,
+                width: 0,
+                height: 0,
+                alt: "",
+                caption: "",
+                blurhash: "",
+            })
+            onSelect(record.id)
+        } catch (err) {
+            console.error("Upload failed:", err)
+            alert("Upload failed. Check console.")
+        } finally {
+            setUploading(false)
+        }
+    }
+
+    function getThumbUrl(img: PbImage): string {
+        return pb.files.getURL(img, img.file, { thumb: "150x150" })
+    }
+
+    return (
+        <div
+            className="picker-overlay"
+            onClick={onClose}
+            onKeyDown={e => {
+                if (e.key === "Escape") onClose()
+            }}
+        >
+            <div
+                className="picker"
+                onClick={e => e.stopPropagation()}
+                onKeyDown={e => {
+                    e.stopPropagation()
+                }}
+            >
+                <div className="picker-header">
+                    <button type="button" className={tab === "browse" ? "active" : ""} onClick={() => setTab("browse")}>
+                        Browse
+                    </button>
+                    <button type="button" className={tab === "upload" ? "active" : ""} onClick={() => setTab("upload")}>
+                        Upload
+                    </button>
+                    <button type="button" className="picker-close" onClick={onClose}>
+                        ×
+                    </button>
+                </div>
+
+                {tab === "browse" && (
+                    <div className="picker-browse">
+                        {loading ? (
+                            <div className="picker-loading">Loading...</div>
+                        ) : (
+                            <div className="picker-grid">
+                                {images.map(img => (
+                                    <button
+                                        type="button"
+                                        key={img.id}
+                                        className="picker-thumb"
+                                        onClick={() => onSelect(img.id)}
+                                    >
+                                        <img src={getThumbUrl(img)} alt={img.alt || img.filename} />
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+                        <div className="picker-pagination">
+                            <button type="button" disabled={page <= 1} onClick={() => setPage(p => p - 1)}>
+                                Prev
+                            </button>
+                            <span>
+                                {page} / {totalPages}
+                            </span>
+                            <button type="button" disabled={page >= totalPages} onClick={() => setPage(p => p + 1)}>
+                                Next
+                            </button>
+                        </div>
+                    </div>
+                )}
+
+                {tab === "upload" && (
+                    <div className="picker-upload">
+                        <input type="file" accept="image/*" ref={fileRef} />
+                        <button type="button" onClick={handleUpload} disabled={uploading}>
+                            {uploading ? "Uploading..." : "Upload"}
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}

apps/hudozka-writer/src/components/Login.css

@@ -0,0 +1,45 @@
+.login {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+}
+
+.login-form {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 320px;
+}
+
+.login-form h1 {
+    font-size: 1.4rem;
+    margin-bottom: 8px;
+}
+
+.login-form input {
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+.login-form button {
+    padding: 8px 12px;
+    border: none;
+    border-radius: 4px;
+    background: #213547;
+    color: white;
+    font-size: 1rem;
+    cursor: pointer;
+}
+
+.login-form button:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+.login-error {
+    color: #c00;
+    font-size: 0.9rem;
+}

apps/hudozka-writer/src/components/Login.tsx

@@ -0,0 +1,55 @@
+import type { FormEvent } from "react"
+import { useState } from "react"
+import { pb } from "../pb"
+import "./Login.css"
+
+export type LoginProps = {
+    onLogin: () => void
+}
+
+export function Login({ onLogin }: LoginProps) {
+    const [email, setEmail] = useState("")
+    const [password, setPassword] = useState("")
+    const [error, setError] = useState("")
+    const [loading, setLoading] = useState(false)
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault()
+        setError("")
+        setLoading(true)
+        try {
+            await pb.collection("_superusers").authWithPassword(email, password)
+            onLogin()
+        } catch {
+            setError("Authentication failed")
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <div className="login">
+            <form className="login-form" onSubmit={handleSubmit}>
+                <h1>Hudozka Writer</h1>
+                {error && <p className="login-error">{error}</p>}
+                <input
+                    type="email"
+                    placeholder="Email"
+                    value={email}
+                    onChange={e => setEmail(e.target.value)}
+                    required
+                />
+                <input
+                    type="password"
+                    placeholder="Password"
+                    value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    required
+                />
+                <button type="submit" disabled={loading}>
+                    {loading ? "Signing in..." : "Sign in"}
+                </button>
+            </form>
+        </div>
+    )
+}

apps/hudozka-writer/src/components/Toolbar.css

@@ -0,0 +1,63 @@
+.toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding: 8px 0;
+    border-bottom: 1px solid #e0e0e0;
+    margin-bottom: 16px;
+    position: sticky;
+    top: 0;
+    background: white;
+    z-index: 10;
+}
+
+.toolbar-group {
+    display: flex;
+    gap: 2px;
+}
+
+.toolbar button {
+    padding: 4px 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+    font-size: 0.85rem;
+    min-width: 32px;
+}
+
+.toolbar button:hover {
+    background: #f0f0f0;
+}
+
+.toolbar button.active {
+    background: #213547;
+    color: white;
+    border-color: #213547;
+}
+
+.toolbar-actions {
+    margin-left: auto;
+    gap: 4px;
+}
+
+.toolbar-save-btn {
+    padding: 4px 16px !important;
+}
+
+.toolbar-save-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed !important;
+}
+
+.toolbar-publish-btn {
+    background: #213547 !important;
+    color: white !important;
+    border-color: #213547 !important;
+    padding: 4px 16px !important;
+}
+
+.toolbar-publish-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed !important;
+}

apps/hudozka-writer/src/components/Toolbar.tsx

@@ -0,0 +1,161 @@
+import type { Editor } from "@tiptap/react"
+import "./Toolbar.css"
+
+export type ToolbarProps = {
+    editor: Editor | null
+    onSave: () => void
+    onPublish: () => void
+    saving: boolean
+    publishing: boolean
+    dirty: boolean
+    hasDraft: boolean
+    markdownMode: boolean
+    onToggleMarkdown: () => void
+}
+
+export function Toolbar({
+    editor,
+    onSave,
+    onPublish,
+    saving,
+    publishing,
+    dirty,
+    hasDraft,
+    markdownMode,
+    onToggleMarkdown,
+}: ToolbarProps) {
+    if (!editor) return null
+
+    const canSave = dirty
+    const canPublish = dirty || hasDraft
+
+    return (
+        <div className="toolbar">
+            <div className="toolbar-group">
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleBold().run()}
+                    className={editor.isActive("bold") ? "active" : ""}
+                    title="Bold"
+                >
+                    B
+                </button>
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleItalic().run()}
+                    className={editor.isActive("italic") ? "active" : ""}
+                    title="Italic"
+                >
+                    I
+                </button>
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleStrike().run()}
+                    className={editor.isActive("strike") ? "active" : ""}
+                    title="Strikethrough"
+                >
+                    S
+                </button>
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleCode().run()}
+                    className={editor.isActive("code") ? "active" : ""}
+                    title="Inline code"
+                >
+                    &lt;/&gt;
+                </button>
+            </div>
+
+            <div className="toolbar-group">
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+                    className={editor.isActive("heading", { level: 1 }) ? "active" : ""}
+                >
+                    H1
+                </button>
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+                    className={editor.isActive("heading", { level: 2 }) ? "active" : ""}
+                >
+                    H2
+                </button>
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+                    className={editor.isActive("heading", { level: 3 }) ? "active" : ""}
+                >
+                    H3
+                </button>
+            </div>
+
+            <div className="toolbar-group">
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleBulletList().run()}
+                    className={editor.isActive("bulletList") ? "active" : ""}
+                    title="Bullet list"
+                >
+                    List
+                </button>
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleOrderedList().run()}
+                    className={editor.isActive("orderedList") ? "active" : ""}
+                    title="Numbered list"
+                >
+                    1.
+                </button>
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleBlockquote().run()}
+                    className={editor.isActive("blockquote") ? "active" : ""}
+                    title="Blockquote"
+                >
+                    &ldquo;
+                </button>
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+                    className={editor.isActive("codeBlock") ? "active" : ""}
+                    title="Code block"
+                >
+                    Code
+                </button>
+                <button
+                    type="button"
+                    onClick={() => editor.chain().focus().setHorizontalRule().run()}
+                    title="Horizontal rule"
+                >
+                    ---
+                </button>
+            </div>
+
+            <div className="toolbar-group">
+                <button
+                    type="button"
+                    onClick={onToggleMarkdown}
+                    className={markdownMode ? "active" : ""}
+                    title="Toggle markdown view"
+                >
+                    MD
+                </button>
+            </div>
+
+            <div className="toolbar-group toolbar-actions">
+                <button type="button" onClick={onSave} disabled={!canSave || saving} className="toolbar-save-btn">
+                    {saving ? "Saving..." : "Save"}
+                </button>
+                <button
+                    type="button"
+                    onClick={onPublish}
+                    disabled={!canPublish || publishing}
+                    className="toolbar-publish-btn"
+                >
+                    {publishing ? "Publishing..." : "Publish"}
+                </button>
+            </div>
+        </div>
+    )
+}

apps/hudozka-writer/src/extensions/SlashCommands.css

@@ -0,0 +1,28 @@
+.slash-command-container {
+    z-index: 50;
+}
+
+.slash-menu {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    padding: 4px 0;
+    min-width: 160px;
+}
+
+.slash-menu-item {
+    display: block;
+    width: 100%;
+    padding: 8px 12px;
+    border: none;
+    background: none;
+    text-align: left;
+    cursor: pointer;
+    font-size: 0.9rem;
+}
+
+.slash-menu-item:hover,
+.slash-menu-item--selected {
+    background: #f0f4ff;
+}

apps/hudozka-writer/src/extensions/SlashCommands.tsx

@@ -0,0 +1,264 @@
+import { Extension } from "@tiptap/core"
+import type { Node as PmNode, ResolvedPos } from "@tiptap/pm/model"
+import { Fragment } from "@tiptap/pm/model"
+import { PluginKey } from "@tiptap/pm/state"
+import type { Editor } from "@tiptap/react"
+import type { SuggestionKeyDownProps, SuggestionOptions, SuggestionProps } from "@tiptap/suggestion"
+import Suggestion from "@tiptap/suggestion"
+import { createRoot } from "react-dom/client"
+import { generateBlockId } from "../lib/id"
+import "./SlashCommands.css"
+
+type SlashCommandItem = {
+    label: string
+    type: string
+    attrs?: Record<string, unknown>
+}
+
+const ITEMS: SlashCommandItem[] = [
+    { label: "Text", type: "textBlock" },
+    { label: "Image", type: "imageBlock", attrs: { id: "", imageId: "", wide: false, caption: "" } },
+    { label: "File", type: "documentBlock", attrs: { id: "", fileId: "", title: "" } },
+    { label: "Embed", type: "embedBlock", attrs: { id: "", src: "" } },
+    { label: "Card Grid", type: "cardGridBlock", attrs: { id: "", items: "[]" } },
+]
+
+const slashCommandsPluginKey = new PluginKey("slashCommands")
+
+function findTextBlockDepth($pos: ResolvedPos): number | null {
+    for (let d = $pos.depth; d > 0; d--) {
+        if ($pos.node(d).type.name === "textBlock") {
+            return d
+        }
+    }
+    return null
+}
+
+function SlashMenu({
+    items,
+    command,
+    selectedIndex,
+}: {
+    items: SlashCommandItem[]
+    command: (item: SlashCommandItem) => void
+    selectedIndex: number
+}) {
+    if (items.length === 0) return null
+
+    return (
+        <div className="slash-menu">
+            {items.map((item, index) => (
+                <button
+                    type="button"
+                    key={item.type}
+                    className={`slash-menu-item${index === selectedIndex ? " slash-menu-item--selected" : ""}`}
+                    onClick={() => command(item)}
+                >
+                    {item.label}
+                </button>
+            ))}
+        </div>
+    )
+}
+
+export const SlashCommands = Extension.create({
+    name: "slashCommands",
+
+    addOptions() {
+        return {
+            suggestion: {
+                char: "/",
+                pluginKey: slashCommandsPluginKey,
+                startOfLine: true,
+                items: ({ query }: { query: string }) => {
+                    return ITEMS.filter(item => item.label.toLowerCase().includes(query.toLowerCase()))
+                },
+                render: () => {
+                    let container: HTMLDivElement | null = null
+                    let root: ReturnType<typeof createRoot> | null = null
+                    let selectedIndex = 0
+                    let currentItems: SlashCommandItem[] = []
+                    let currentCommand: ((item: SlashCommandItem) => void) | null = null
+
+                    function renderMenu() {
+                        if (!root || !currentCommand) return
+                        root.render(
+                            <SlashMenu items={currentItems} command={currentCommand} selectedIndex={selectedIndex} />,
+                        )
+                    }
+
+                    return {
+                        onStart: (props: SuggestionProps<SlashCommandItem, SlashCommandItem>) => {
+                            container = document.createElement("div")
+                            container.className = "slash-command-container"
+                            document.body.appendChild(container)
+                            root = createRoot(container)
+
+                            const rect = props.clientRect?.()
+                            if (rect && container) {
+                                container.style.position = "fixed"
+                                container.style.left = `${rect.left}px`
+                                container.style.top = `${rect.bottom + 4}px`
+                                container.style.zIndex = "50"
+                            }
+
+                            selectedIndex = 0
+                            currentItems = props.items
+                            currentCommand = props.command
+                            renderMenu()
+                        },
+                        onUpdate: (props: SuggestionProps<SlashCommandItem, SlashCommandItem>) => {
+                            if (!root || !container) return
+
+                            const rect = props.clientRect?.()
+                            if (rect && container) {
+                                container.style.left = `${rect.left}px`
+                                container.style.top = `${rect.bottom + 4}px`
+                            }
+
+                            currentItems = props.items
+                            currentCommand = props.command
+                            selectedIndex = 0
+                            renderMenu()
+                        },
+                        onExit: () => {
+                            root?.unmount()
+                            container?.remove()
+                            container = null
+                            root = null
+                        },
+                        onKeyDown: (props: SuggestionKeyDownProps) => {
+                            const { key } = props.event
+                            if (key === "Escape") {
+                                root?.unmount()
+                                container?.remove()
+                                container = null
+                                root = null
+                                return true
+                            }
+                            if (key === "ArrowDown") {
+                                selectedIndex = (selectedIndex + 1) % currentItems.length
+                                renderMenu()
+                                return true
+                            }
+                            if (key === "ArrowUp") {
+                                selectedIndex = (selectedIndex - 1 + currentItems.length) % currentItems.length
+                                renderMenu()
+                                return true
+                            }
+                            if (key === "Enter") {
+                                if (currentItems[selectedIndex] && currentCommand) {
+                                    currentCommand(currentItems[selectedIndex])
+                                }
+                                return true
+                            }
+                            return false
+                        },
+                    }
+                },
+                command: ({
+                    editor,
+                    range,
+                    props,
+                }: {
+                    editor: Editor
+                    range: { from: number; to: number }
+                    props: SlashCommandItem
+                }) => {
+                    // Delete the slash command text
+                    editor.chain().focus().deleteRange(range).run()
+
+                    if (props.type === "textBlock") {
+                        // Already inside a textBlock paragraph — nothing to do
+                        return
+                    }
+
+                    const { from } = editor.state.selection
+                    const id = generateBlockId()
+                    const newNode = { type: props.type, attrs: { ...props.attrs, id } }
+
+                    // Check if we're inside a textBlock
+                    const $pos = editor.state.doc.resolve(from)
+                    const textBlockDepth = findTextBlockDepth($pos)
+
+                    if (textBlockDepth === null) {
+                        // Not inside a textBlock — insert directly
+                        editor.chain().focus().insertContentAt(from, newNode).run()
+                        return
+                    }
+
+                    // Inside a textBlock — split it and insert the custom block between halves
+                    const textBlockPos = $pos.before(textBlockDepth)
+                    const textBlockNode = editor.state.doc.nodeAt(textBlockPos)
+                    if (!textBlockNode) return
+
+                    // Find which child contains the cursor
+                    let childOffset = textBlockPos + 1
+                    let splitAfter = -1
+                    for (let i = 0; i < textBlockNode.childCount; i++) {
+                        const child = textBlockNode.child(i)
+                        const childEnd = childOffset + child.nodeSize
+                        if (from >= childOffset && from <= childEnd) {
+                            // If the paragraph is empty (just deleted the slash), split before it
+                            const curChild = textBlockNode.child(i)
+                            if (curChild.content.size === 0 && i > 0) {
+                                splitAfter = i - 1
+                            } else if (curChild.content.size === 0 && i === 0) {
+                                splitAfter = -1 // cursor in empty first child
+                            } else {
+                                splitAfter = i
+                            }
+                            break
+                        }
+                        childOffset = childEnd
+                    }
+
+                    const { schema } = editor.state
+                    const textBlockType = schema.nodes.textBlock
+                    const fragments: PmNode[] = []
+
+                    // Build first textBlock (children 0..splitAfter) — skip if empty
+                    if (splitAfter >= 0) {
+                        const children = []
+                        for (let i = 0; i <= splitAfter; i++) {
+                            children.push(textBlockNode.child(i))
+                        }
+                        // Skip if all children are empty paragraphs
+                        const hasContent = children.some(c => c.content.size > 0)
+                        if (hasContent) {
+                            fragments.push(textBlockType.create(null, children))
+                        }
+                    }
+
+                    // Insert the custom block
+                    fragments.push(schema.nodes[props.type].create({ ...props.attrs, id }))
+
+                    // Build second textBlock (children after splitAfter) — skip empty
+                    const remaining = []
+                    const startIdx = splitAfter + 1
+                    for (let i = startIdx; i < textBlockNode.childCount; i++) {
+                        remaining.push(textBlockNode.child(i))
+                    }
+                    // Filter out empty paragraphs at the edges
+                    const nonEmpty = remaining.filter(c => c.content.size > 0)
+                    if (nonEmpty.length > 0) {
+                        fragments.push(textBlockType.create(null, remaining))
+                    }
+
+                    const tr = editor.state.tr
+                    tr.replaceWith(textBlockPos, textBlockPos + textBlockNode.nodeSize, Fragment.from(fragments))
+                    editor.view.dispatch(tr)
+                },
+            } satisfies Partial<SuggestionOptions<SlashCommandItem, SlashCommandItem>>,
+        }
+    },
+
+    addProseMirrorPlugins() {
+        return [
+            Suggestion({
+                editor: this.editor,
+                ...this.options.suggestion,
+            }),
+        ]
+    },
+})

apps/hudozka-writer/src/index.css

@@ -0,0 +1,16 @@
+:root {
+    font-family: system-ui, -apple-system, sans-serif;
+    line-height: 1.5;
+    color: #213547;
+    background-color: #ffffff;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    min-height: 100vh;
+}

apps/hudozka-writer/src/lib/id.ts

@@ -0,0 +1,3 @@
+export function generateBlockId(): string {
+    return crypto.randomUUID().slice(0, 8)
+}

apps/hudozka-writer/src/lib/markdown.ts

@@ -0,0 +1,14 @@
+import Link from "@tiptap/extension-link"
+import { MarkdownManager } from "@tiptap/markdown"
+import StarterKit from "@tiptap/starter-kit"
+
+let manager: MarkdownManager | null = null
+
+export function getMarkdownManager(): MarkdownManager {
+    if (!manager) {
+        manager = new MarkdownManager({
+            extensions: [StarterKit, Link],
+        })
+    }
+    return manager
+}

apps/hudozka-writer/src/lib/serialize.ts

@@ -0,0 +1,168 @@
+import type { JSONContent } from "@tiptap/core"
+import type {
+    DocV1,
+    DocV1Block,
+    DocV1BlockCardGrid,
+    DocV1BlockDocument,
+    DocV1BlockEmbed,
+    DocV1BlockImage,
+    DocV1BlockText,
+} from "../types"
+import { generateBlockId } from "./id"
+import { getMarkdownManager } from "./markdown"
+
+// -- DocV1 -> Tiptap JSON --
+
+function textBlockToTiptap(block: DocV1BlockText): JSONContent {
+    const manager = getMarkdownManager()
+    const parsed = manager.parse(block.text)
+    return {
+        type: "textBlock",
+        content: parsed.content ?? [],
+    }
+}
+
+function imageBlockToTiptap(block: DocV1BlockImage): JSONContent {
+    return {
+        type: "imageBlock",
+        attrs: {
+            id: block.id,
+            imageId: block.image,
+            wide: block.wide,
+            caption: block.caption,
+        },
+    }
+}
+
+function documentBlockToTiptap(block: DocV1BlockDocument): JSONContent {
+    return {
+        type: "documentBlock",
+        attrs: {
+            id: block.id,
+            fileId: block.file,
+            title: block.title,
+        },
+    }
+}
+
+function embedBlockToTiptap(block: DocV1BlockEmbed): JSONContent {
+    return {
+        type: "embedBlock",
+        attrs: {
+            id: block.id,
+            src: block.src,
+        },
+    }
+}
+
+function cardGridBlockToTiptap(block: DocV1BlockCardGrid): JSONContent {
+    return {
+        type: "cardGridBlock",
+        attrs: {
+            id: block.id,
+            items: JSON.stringify(block.items),
+        },
+    }
+}
+
+export function docToTiptap(doc: DocV1): JSONContent {
+    const content: JSONContent[] = []
+
+    for (const block of doc.blocks) {
+        switch (block.type) {
+            case "text":
+                content.push(textBlockToTiptap(block))
+                break
+            case "image":
+                content.push(imageBlockToTiptap(block))
+                break
+            case "document":
+                content.push(documentBlockToTiptap(block))
+                break
+            case "embed":
+                content.push(embedBlockToTiptap(block))
+                break
+            case "card-grid":
+                content.push(cardGridBlockToTiptap(block))
+                break
+        }
+    }
+
+    return {
+        type: "doc",
+        content,
+    }
+}
+
+// -- Tiptap JSON -> DocV1 --
+
+function textNodesToMarkdown(nodes: JSONContent[]): string {
+    const manager = getMarkdownManager()
+    const doc: JSONContent = { type: "doc", content: nodes }
+    return manager.serialize(doc)
+}
+
+export function tiptapToDoc(content: JSONContent[]): DocV1 {
+    const blocks: DocV1Block[] = []
+
+    for (const node of content) {
+        switch (node.type) {
+            case "textBlock": {
+                const text = textNodesToMarkdown(node.content ?? [])
+                if (text.trim()) {
+                    blocks.push({
+                        type: "text",
+                        id: generateBlockId(),
+                        text,
+                    })
+                }
+                break
+            }
+
+            case "imageBlock": {
+                const attrs = node.attrs ?? {}
+                blocks.push({
+                    type: "image",
+                    id: attrs.id ?? generateBlockId(),
+                    image: attrs.imageId ?? "",
+                    wide: attrs.wide ?? false,
+                    caption: attrs.caption ?? "",
+                })
+                break
+            }
+
+            case "documentBlock": {
+                const attrs = node.attrs ?? {}
+                blocks.push({
+                    type: "document",
+                    id: attrs.id ?? generateBlockId(),
+                    file: attrs.fileId ?? "",
+                    title: attrs.title ?? "",
+                })
+                break
+            }
+
+            case "embedBlock": {
+                const attrs = node.attrs ?? {}
+                blocks.push({
+                    type: "embed",
+                    id: attrs.id ?? generateBlockId(),
+                    src: attrs.src ?? "",
+                })
+                break
+            }
+
+            case "cardGridBlock": {
+                const attrs = node.attrs ?? {}
+                blocks.push({
+                    type: "card-grid",
+                    id: attrs.id ?? generateBlockId(),
+                    items: JSON.parse(attrs.items ?? "[]"),
+                })
+                break
+            }
+        }
+    }
+
+    return { version: 1, blocks }
+}

apps/hudozka-writer/src/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { App } from "./App"
+import "./index.css"
+
+const rootElement = document.getElementById("root")
+if (!rootElement) throw new Error("Root element #root not found")
+
+createRoot(rootElement).render(
+    <StrictMode>
+        <App />
+    </StrictMode>,
+)

apps/hudozka-writer/src/nodes/CardGridBlock.tsx

@@ -0,0 +1,90 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+import type { NodeViewProps } from "@tiptap/react"
+import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react"
+import { useEffect, useMemo, useState } from "react"
+import { BlockActions } from "../components/BlockActions"
+import { BlockInsert } from "../components/BlockInsert"
+import { pb } from "../pb"
+import type { PbPage } from "../types"
+
+type ResolvedItem = {
+    page: string
+    title: string | null
+}
+
+function CardGridBlockView({ node, editor, getPos }: NodeViewProps) {
+    const items = useMemo<Array<{ page: string }>>(() => JSON.parse(node.attrs.items || "[]"), [node.attrs.items])
+    const [resolved, setResolved] = useState<ResolvedItem[]>([])
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        if (items.length === 0) {
+            setResolved([])
+            return
+        }
+
+        setLoading(true)
+        Promise.all(
+            items.map(async item => {
+                try {
+                    const page = await pb.collection("pages").getOne<PbPage>(item.page)
+                    return { page: item.page, title: page.title }
+                } catch {
+                    return { page: item.page, title: null }
+                }
+            }),
+        ).then(results => {
+            setResolved(results)
+            setLoading(false)
+        })
+    }, [items])
+
+    return (
+        <>
+            <NodeViewWrapper className="node-view-block node-readonly-block">
+                <BlockActions editor={editor} getPos={getPos} />
+                <div className="node-view-content">
+                    <div className="node-block-label">Card Grid ({items.length})</div>
+                    {loading ? (
+                        <div className="node-block-info">Loading...</div>
+                    ) : (
+                        <ul className="node-cardgrid-list">
+                            {resolved.map(item => (
+                                <li key={item.page} className="node-cardgrid-item">
+                                    {item.title ?? item.page}
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+            </NodeViewWrapper>
+            <BlockInsert editor={editor} getPos={getPos} />
+        </>
+    )
+}
+
+export const CardGridBlock = Node.create({
+    name: "cardGridBlock",
+    group: "block",
+    atom: true,
+    draggable: true,
+
+    addAttributes() {
+        return {
+            id: { default: null },
+            items: { default: "[]" },
+        }
+    },
+
+    parseHTML() {
+        return [{ tag: "div[data-card-grid-block]" }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ["div", mergeAttributes(HTMLAttributes, { "data-card-grid-block": "" })]
+    },
+
+    addNodeView() {
+        return ReactNodeViewRenderer(CardGridBlockView)
+    },
+})

apps/hudozka-writer/src/nodes/DocumentBlock.tsx

@@ -0,0 +1,103 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+import type { NodeViewProps } from "@tiptap/react"
+import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react"
+import { useEffect, useState } from "react"
+import { BlockActions } from "../components/BlockActions"
+import { BlockInsert } from "../components/BlockInsert"
+import { FilePicker } from "../components/FilePicker"
+import { pb } from "../pb"
+import type { PbFile } from "../types"
+
+function DocumentBlockView({ node, updateAttributes, editor, getPos }: NodeViewProps) {
+    const { fileId, title } = node.attrs
+    const [filename, setFilename] = useState<string | null>(null)
+    const [showPicker, setShowPicker] = useState(false)
+
+    useEffect(() => {
+        if (!fileId) return
+        pb.collection("files")
+            .getOne<PbFile>(fileId)
+            .then(f => {
+                setFilename(f.filename)
+            })
+            .catch(() => {
+                setFilename(null)
+            })
+    }, [fileId])
+
+    function handleSelect(newFileId: string) {
+        updateAttributes({ fileId: newFileId })
+        setShowPicker(false)
+    }
+
+    return (
+        <>
+            <NodeViewWrapper className="node-view-block node-document-block">
+                <BlockActions editor={editor} getPos={getPos} />
+                <div className="node-view-content">
+                    <div className="node-block-label">File</div>
+                    {fileId ? (
+                        <button
+                            type="button"
+                            className="node-document-file"
+                            onClick={() => setShowPicker(true)}
+                            style={{ cursor: "pointer" }}
+                        >
+                            📎 {filename ?? fileId}
+                        </button>
+                    ) : (
+                        <button
+                            type="button"
+                            className="node-document-placeholder"
+                            onClick={() => setShowPicker(true)}
+                            style={{ cursor: "pointer" }}
+                        >
+                            Click to select file
+                        </button>
+                    )}
+                    <div className="node-document-controls">
+                        <input
+                            type="text"
+                            placeholder="Title"
+                            value={title || ""}
+                            onChange={e => updateAttributes({ title: e.target.value })}
+                            className="node-document-title"
+                        />
+                        <button type="button" className="node-image-pick-btn" onClick={() => setShowPicker(true)}>
+                            Pick
+                        </button>
+                    </div>
+                    {showPicker && <FilePicker onSelect={handleSelect} onClose={() => setShowPicker(false)} />}
+                </div>
+            </NodeViewWrapper>
+            <BlockInsert editor={editor} getPos={getPos} />
+        </>
+    )
+}
+
+export const DocumentBlock = Node.create({
+    name: "documentBlock",
+    group: "block",
+    atom: true,
+    draggable: true,
+
+    addAttributes() {
+        return {
+            id: { default: null },
+            fileId: { default: "" },
+            title: { default: "" },
+        }
+    },
+
+    parseHTML() {
+        return [{ tag: "div[data-document-block]" }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ["div", mergeAttributes(HTMLAttributes, { "data-document-block": "" })]
+    },
+
+    addNodeView() {
+        return ReactNodeViewRenderer(DocumentBlockView)
+    },
+})

apps/hudozka-writer/src/nodes/EmbedBlock.tsx

@@ -0,0 +1,48 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+import type { NodeViewProps } from "@tiptap/react"
+import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react"
+import { BlockActions } from "../components/BlockActions"
+import { BlockInsert } from "../components/BlockInsert"
+
+function EmbedBlockView({ node, editor, getPos }: NodeViewProps) {
+    return (
+        <>
+            <NodeViewWrapper className="node-view-block node-readonly-block">
+                <BlockActions editor={editor} getPos={getPos} />
+                <div className="node-view-content">
+                    <div className="node-block-label">Embed</div>
+                    <div className="node-block-info">
+                        <code>{node.attrs.src}</code>
+                    </div>
+                </div>
+            </NodeViewWrapper>
+            <BlockInsert editor={editor} getPos={getPos} />
+        </>
+    )
+}
+
+export const EmbedBlock = Node.create({
+    name: "embedBlock",
+    group: "block",
+    atom: true,
+    draggable: true,
+
+    addAttributes() {
+        return {
+            id: { default: null },
+            src: { default: "" },
+        }
+    },
+
+    parseHTML() {
+        return [{ tag: "div[data-embed-block]" }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ["div", mergeAttributes(HTMLAttributes, { "data-embed-block": "" })]
+    },
+
+    addNodeView() {
+        return ReactNodeViewRenderer(EmbedBlockView)
+    },
+})

apps/hudozka-writer/src/nodes/ImageBlock.tsx

@@ -0,0 +1,113 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+import type { NodeViewProps } from "@tiptap/react"
+import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react"
+import { useEffect, useState } from "react"
+import { BlockActions } from "../components/BlockActions"
+import { BlockInsert } from "../components/BlockInsert"
+import { ImagePicker } from "../components/ImagePicker"
+import { pb } from "../pb"
+import type { PbImage } from "../types"
+
+function ImageBlockView({ node, updateAttributes, editor, getPos }: NodeViewProps) {
+    const { imageId, wide, caption } = node.attrs
+    const [thumbnail, setThumbnail] = useState<string | null>(null)
+    const [showPicker, setShowPicker] = useState(false)
+
+    useEffect(() => {
+        if (!imageId) return
+        pb.collection("images")
+            .getOne<PbImage>(imageId)
+            .then(img => {
+                const url = pb.files.getURL(img, img.file, { thumb: "300x200" })
+                setThumbnail(url)
+            })
+            .catch(() => {
+                setThumbnail(null)
+            })
+    }, [imageId])
+
+    function handleSelect(newImageId: string) {
+        updateAttributes({ imageId: newImageId })
+        setShowPicker(false)
+    }
+
+    return (
+        <>
+            <NodeViewWrapper className="node-view-block node-image-block">
+                <BlockActions editor={editor} getPos={getPos} />
+                <div className="node-view-content">
+                    <div className="node-block-label">Image</div>
+                    {thumbnail ? (
+                        <button
+                            type="button"
+                            className="node-image-thumb-button"
+                            onClick={() => setShowPicker(true)}
+                            style={{ cursor: "pointer", padding: 0, border: 0, background: "none" }}
+                        >
+                            <img src={thumbnail} alt={caption || "image"} className="node-image-thumb" />
+                        </button>
+                    ) : (
+                        <button
+                            type="button"
+                            className="node-image-placeholder"
+                            onClick={() => setShowPicker(true)}
+                            style={{ cursor: "pointer" }}
+                        >
+                            {imageId ? "Loading..." : "Click to select image"}
+                        </button>
+                    )}
+                    <div className="node-image-controls">
+                        <label>
+                            <input
+                                type="checkbox"
+                                checked={wide}
+                                onChange={e => updateAttributes({ wide: e.target.checked })}
+                            />
+                            Wide
+                        </label>
+                        <input
+                            type="text"
+                            placeholder="Caption"
+                            value={caption || ""}
+                            onChange={e => updateAttributes({ caption: e.target.value })}
+                            className="node-image-caption"
+                        />
+                        <button type="button" className="node-image-pick-btn" onClick={() => setShowPicker(true)}>
+                            Pick
+                        </button>
+                    </div>
+                    {showPicker && <ImagePicker onSelect={handleSelect} onClose={() => setShowPicker(false)} />}
+                </div>
+            </NodeViewWrapper>
+            <BlockInsert editor={editor} getPos={getPos} />
+        </>
+    )
+}
+
+export const ImageBlock = Node.create({
+    name: "imageBlock",
+    group: "block",
+    atom: true,
+    draggable: true,
+
+    addAttributes() {
+        return {
+            id: { default: null },
+            imageId: { default: "" },
+            wide: { default: false },
+            caption: { default: "" },
+        }
+    },
+
+    parseHTML() {
+        return [{ tag: "div[data-image-block]" }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ["div", mergeAttributes(HTMLAttributes, { "data-image-block": "" })]
+    },
+
+    addNodeView() {
+        return ReactNodeViewRenderer(ImageBlockView)
+    },
+})

apps/hudozka-writer/src/nodes/TextBlock.tsx

@@ -0,0 +1,37 @@
+import { mergeAttributes, Node } from "@tiptap/core"
+import type { NodeViewProps } from "@tiptap/react"
+import { NodeViewContent, NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react"
+import { BlockActions } from "../components/BlockActions"
+import { BlockInsert } from "../components/BlockInsert"
+
+function TextBlockView({ editor, getPos }: NodeViewProps) {
+    return (
+        <>
+            <NodeViewWrapper className="node-view-block node-text-block">
+                <BlockActions editor={editor} getPos={getPos} />
+                <NodeViewContent className="node-view-content" />
+            </NodeViewWrapper>
+            <BlockInsert editor={editor} getPos={getPos} />
+        </>
+    )
+}
+
+export const TextBlock = Node.create({
+    name: "textBlock",
+    group: "block",
+    content: "(paragraph | heading | bulletList | orderedList | blockquote | codeBlock | horizontalRule)+",
+    draggable: true,
+    defining: true,
+
+    parseHTML() {
+        return [{ tag: "div[data-text-block]" }]
+    },
+
+    renderHTML({ HTMLAttributes }) {
+        return ["div", mergeAttributes(HTMLAttributes, { "data-text-block": "" }), 0]
+    },
+
+    addNodeView() {
+        return ReactNodeViewRenderer(TextBlockView)
+    },
+})

apps/hudozka-writer/src/nodes/WriterDocument.ts

@@ -0,0 +1,7 @@
+import { Node } from "@tiptap/core"
+
+export const WriterDocument = Node.create({
+    name: "doc",
+    topNode: true,
+    content: "(textBlock | imageBlock | documentBlock | embedBlock | cardGridBlock)+",
+})

apps/hudozka-writer/src/nodes/index.ts

@@ -0,0 +1,6 @@
+export { CardGridBlock } from "./CardGridBlock"
+export { DocumentBlock } from "./DocumentBlock"
+export { EmbedBlock } from "./EmbedBlock"
+export { ImageBlock } from "./ImageBlock"
+export { TextBlock } from "./TextBlock"
+export { WriterDocument } from "./WriterDocument"

apps/hudozka-writer/src/nodes/nodes.css

@@ -0,0 +1,109 @@
+.node-block-label {
+    font-size: 0.7rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: #888;
+    margin-bottom: 4px;
+}
+
+.node-image-block > .node-view-content,
+.node-readonly-block > .node-view-content,
+.node-document-block > .node-view-content {
+    border: 1px solid #e0e0e0;
+    border-radius: 6px;
+    padding: 12px;
+    background: #fafafa;
+}
+
+.node-image-thumb {
+    max-width: 100%;
+    max-height: 200px;
+    border-radius: 4px;
+    object-fit: cover;
+}
+
+.node-image-placeholder {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f0f0f0;
+    border-radius: 4px;
+    color: #888;
+}
+
+.node-image-controls {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin-top: 8px;
+}
+
+.node-image-caption {
+    flex: 1;
+    padding: 4px 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.9rem;
+}
+
+.node-block-info {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+}
+
+.node-block-info code {
+    font-size: 0.8rem;
+    color: #666;
+}
+
+.node-image-pick-btn {
+    padding: 2px 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+    font-size: 0.85rem;
+}
+
+.node-document-file {
+    padding: 8px;
+    background: #f0f0f0;
+    border-radius: 4px;
+    font-size: 0.9rem;
+}
+
+.node-document-placeholder {
+    padding: 8px;
+    background: #f0f0f0;
+    border-radius: 4px;
+    color: #888;
+    text-align: center;
+}
+
+.node-document-controls {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    margin-top: 8px;
+}
+
+.node-document-title {
+    flex: 1;
+    padding: 4px 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 0.9rem;
+}
+
+.node-cardgrid-list {
+    margin: 4px 0 0;
+    padding-left: 20px;
+    font-size: 0.9rem;
+}
+
+.node-cardgrid-item {
+    color: #444;
+    line-height: 1.6;
+}

apps/hudozka-writer/src/pb.ts

@@ -0,0 +1,7 @@
+import PocketBase from "pocketbase"
+
+// Default to same origin; override via env for dev
+const url = import.meta.env.VITE_PB_URL ?? "http://127.0.0.1:8090"
+
+export const pb = new PocketBase(url)
+pb.autoCancellation(false)

apps/hudozka-writer/src/types.ts

@@ -0,0 +1,85 @@
+// -- PocketBase record base --
+
+export type PbRecord = {
+    id: string
+    collectionId: string
+    collectionName: string
+    created: string
+    updated: string
+}
+
+// -- PocketBase collection types --
+
+export type PbImage = PbRecord & {
+    file: string
+    filename: string
+    width: number
+    height: number
+    blurhash: string
+    alt: string
+    caption: string
+}
+
+export type PbFile = PbRecord & {
+    file: string
+    filename: string
+}
+
+export type PbPage = PbRecord & {
+    title: string
+    slug: string
+    excerpt: string
+    date: string
+    cover: string
+    doc: DocV1
+    tags: string[]
+    published: boolean
+    draft: DocV1 | null
+}
+
+// -- DocV1 document format --
+
+export type DocV1BlockText = {
+    type: "text"
+    id: string
+    text: string
+}
+
+export type DocV1BlockImage = {
+    type: "image"
+    id: string
+    image: string
+    wide: boolean
+    caption: string
+}
+
+export type DocV1BlockDocument = {
+    type: "document"
+    id: string
+    file: string
+    title: string
+}
+
+export type DocV1BlockEmbed = {
+    type: "embed"
+    id: string
+    src: string
+}
+
+export type DocV1BlockCardGridItem = {
+    page: string
+    layout: "small" | "medium" | "big"
+}
+
+export type DocV1BlockCardGrid = {
+    type: "card-grid"
+    id: string
+    items: DocV1BlockCardGridItem[]
+}
+
+export type DocV1Block = DocV1BlockText | DocV1BlockImage | DocV1BlockDocument | DocV1BlockEmbed | DocV1BlockCardGrid
+
+export type DocV1 = {
+    version: 1
+    blocks: DocV1Block[]
+}

apps/hudozka-writer/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

apps/hudozka-writer/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src", "vite.config.ts"]
+}

apps/hudozka-writer/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+
+export default defineConfig({
+    plugins: [react()],
+})

apps/hudozka/.dockerignore

@@ -0,0 +1,5 @@
+modules
+.vercel
+.next
+.github
+node_modules

apps/hudozka/.env.example

@@ -0,0 +1,3 @@
+APP_CARD_DEFAULT_IMAGE=https://art.shlisselburg.org/static/img/main.jpg
+NEXT_PUBLIC_YMETRIKA_ACCOUNT=XXX
+POCKETBASE_URL=http://127.0.0.1:8090

apps/hudozka/.env.local

@@ -0,0 +1 @@
+POCKETBASE_URL=http://127.0.0.1:8090

apps/hudozka/Dockerfile

@@ -0,0 +1,59 @@
+FROM node:24.12.0-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Copy workspace manifests (root + every workspace) to leverage npm ci caching.
+COPY package.json package-lock.json ./
+COPY apps/hudozka/package.json ./apps/hudozka/
+COPY apps/hudozka-writer/package.json ./apps/hudozka-writer/
+COPY apps/migrate-to-pocketbase/package.json ./apps/migrate-to-pocketbase/
+COPY packages/ ./packages/
+
+RUN npm ci
+RUN npm install --os=linux --libc=musl --cpu=x64 sharp --workspace apps/hudozka
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build -w apps/hudozka
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder --chown=nextjs:nodejs /app/apps/hudozka/public ./apps/hudozka/public
+
+# Set the correct permission for prerender cache
+RUN mkdir -p apps/hudozka/.next
+RUN chown nextjs:nodejs apps/hudozka/.next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/apps/hudozka/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/apps/hudozka/.next/static ./apps/hudozka/.next/static
+
+USER nextjs
+
+EXPOSE 3000
+ENV PORT=3000
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+ENV HOSTNAME="0.0.0.0"
+WORKDIR /app/apps/hudozka
+CMD ["node", "server.js"]

apps/hudozka/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/hudozka/next.config.ts

@@ -0,0 +1,18 @@
+import type { NextConfig } from "next"
+import path from "node:path"
+
+const config: NextConfig = {
+    output: "standalone",
+    outputFileTracingRoot: path.join(process.cwd(), "../../"),
+    trailingSlash: false,
+    images: {
+        unoptimized: true,
+        remotePatterns: [
+            { hostname: "hudozka.shlisselburg.org" },
+            { hostname: "images.weserv.nl" },
+            { hostname: "127.0.0.1" },
+        ],
+    },
+}
+
+export default config

apps/hudozka/package.json

@@ -0,0 +1,43 @@
+{
+    "name": "hudozka",
+    "private": true,
+    "version": "7.0.0",
+    "type": "module",
+    "description": "",
+    "scripts": {
+        "start": "next start",
+        "dev": "next dev --turbo",
+        "build": "next build",
+        "lint": "biome check",
+        "format": "biome check --write",
+        "test": "vitest run"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/tmshv/hudozka"
+    },
+    "author": "Roman Timashev",
+    "license": "ISC",
+    "dependencies": {
+        "@hudozka/hooks": "*",
+        "@hudozka/text": "*",
+        "@hudozka/ui": "*",
+        "@hudozka/utils": "*",
+        "@radix-ui/react-navigation-menu": "^1.2.0",
+        "@radix-ui/react-tooltip": "^1.2.0",
+        "classnames": "^2.5.0",
+        "dangerously-set-html-content": "^1.1.0",
+        "next": "^16.2.6",
+        "pocketbase": "^0.26.0",
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0",
+        "react-icons": "^5.5.0",
+        "sharp": "^0.34.0",
+        "valtio": "^2.3.0"
+    },
+    "overrides": {
+        "dangerously-set-html-content": {
+            "react": "$react"
+        }
+    }
+}

apps/hudozka/src/app/[...slug]/loading.tsx

@@ -0,0 +1,3 @@
+export default function Loading() {
+    return <div>loading...</div>
+}

apps/hudozka/src/app/[...slug]/page.tsx

@@ -0,0 +1,71 @@
+import { tail } from "@hudozka/utils"
+import type { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { App } from "@/components/App"
+import { PageContent } from "@/components/PageContent"
+import { buildMetadata, MetaBuilder } from "@/lib/meta"
+import { getPageBySlug, getUrls } from "@/remote/api"
+
+export const revalidate = 30
+export const dynamicParams = true
+
+export async function generateStaticParams() {
+    const urls = await getUrls()
+    return urls.map(path => ({
+        slug: tail(path.split("/")),
+    }))
+}
+
+type Props = {
+    params: Promise<{ slug: string[] }>
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+    const { slug } = await params
+    const slugPath = `/${slug.join("/")}`
+    const page = await getPageBySlug(slugPath)
+    if (!page) {
+        return {}
+    }
+
+    const m = new MetaBuilder()
+        .setImage(page.cover)
+        .setTitle(page.title)
+        .setDescription(page.description ?? undefined)
+        .build()
+    return buildMetadata(m)
+}
+
+export default async function SlugPage({ params }: Props) {
+    const { slug } = await params
+    const slugPath = `/${slug.join("/")}`
+    const page = await getPageBySlug(slugPath)
+    if (!page) {
+        notFound()
+    }
+
+    const breadcrumbSize = page.breadcrumb?.length ?? 0
+    const breadcrumbs = breadcrumbSize < 2 ? [] : (page.breadcrumb ?? [])
+
+    return (
+        <App
+            contentStyle={{
+                marginTop: "var(--size-l)",
+                marginBottom: "var(--size-xl)",
+            }}
+            breadcrumbs={breadcrumbs}
+        >
+            <PageContent
+                tags={page.tags}
+                date={page.date}
+                tokens={page.tokens}
+                documentSignature={{
+                    date: "20.01.2021г.",
+                    person: "Тимашева Марина Геннадьевна",
+                    position: "Директор",
+                    signature: "0ac4ea89753a4ba9893799442325fb41",
+                }}
+            />
+        </App>
+    )
+}

apps/hudozka/src/app/feed.json/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from "next/server"
+import { siteUrl } from "@/const"
+import { getRecentPages } from "@/remote/api"
+
+export async function GET() {
+    const pages = await getRecentPages()
+
+    const feed = {
+        version: "https://jsonfeed.org/version/1.1",
+        title: "Шлиссельбургская ДХШ",
+        home_page_url: siteUrl,
+        feed_url: `${siteUrl}/feed.json`,
+        items: pages.map(page => ({
+            id: `${siteUrl}${page.url}`,
+            url: `${siteUrl}${page.url}`,
+            title: page.title,
+            date_published: new Date(page.date).toISOString(),
+            summary: page.excerpt,
+        })),
+    }
+
+    return NextResponse.json(feed)
+}

apps/hudozka/src/app/layout.tsx

@@ -0,0 +1,72 @@
+import "src/style/style.css"
+import "src/style/content.css"
+import "src/style/article.css"
+import "src/style/marker/marker-table.css"
+import "src/style/kazimir/video.css"
+
+import type { Metadata, Viewport } from "next"
+import { Roboto } from "next/font/google"
+import Script from "next/script"
+import { YMetrika } from "@/components/YMetrika"
+
+const roboto = Roboto({
+    weight: ["300", "900"],
+    subsets: ["cyrillic", "latin"],
+    display: "swap",
+})
+
+export const metadata: Metadata = {
+    verification: {
+        google: ["8BxOTw-Q02DS2KAdcGcnIMwiPZ58DVB18XpOfRibCcg", "A-TEemUw4hHpULUDCd6xhxfHnyRbgKtss90JGKXnSpw"],
+        other: {
+            "yandex-verification": "643c7dac144b9dac",
+            "msvalidate.01": "E878301FE3E3F12D233A6B1156889601",
+            "proculture-verification": "79110940fd847c3cfe52392ed68f3210",
+        },
+    },
+    icons: {
+        icon: { url: "/static/graphics/favicon-32.png", type: "image/png" },
+        apple: [
+            { url: "/static/graphics/favicon-57.png", sizes: "57x57" },
+            { url: "/static/graphics/favicon-72.png", sizes: "72x72" },
+            { url: "/static/graphics/favicon-114.png", sizes: "114x114" },
+            { url: "/static/graphics/favicon-144.png", sizes: "144x144" },
+        ],
+    },
+    other: {
+        "apple-mobile-web-app-capable": "yes",
+        referrer: "unsafe-url",
+    },
+    alternates: {
+        types: {
+            "application/feed+json": "/feed.json",
+        },
+    },
+}
+
+export const viewport: Viewport = {
+    width: "device-width",
+    maximumScale: 1,
+    themeColor: [
+        { media: "(prefers-color-scheme: light)", color: "white" },
+        { media: "(prefers-color-scheme: dark)", color: "hsl(240, 10%, 10%)" },
+    ],
+}
+
+export const revalidate = 30
+
+export default async function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="ru" className={roboto.className}>
+            <head>
+                {process.env.NEXT_PUBLIC_YMETRIKA_ACCOUNT && (
+                    <YMetrika account={Number(process.env.NEXT_PUBLIC_YMETRIKA_ACCOUNT)} />
+                )}
+            </head>
+            <body>
+                {children}
+                <Script src="https://culturaltracking.ru/static/js/spxl.js?pixelId=27154" data-pixel-id="27154" />
+            </body>
+        </html>
+    )
+}

apps/hudozka/src/app/not-found.tsx

@@ -0,0 +1,10 @@
+import { App } from "@/components/App"
+import { NotFound } from "@/components/NotFound"
+
+export default function NotFoundPage() {
+    return (
+        <App>
+            <NotFound />
+        </App>
+    )
+}

apps/hudozka/src/app/page.tsx

@@ -0,0 +1,23 @@
+import type { Metadata } from "next"
+import { App } from "@/components/App"
+import { HomeContent } from "@/components/HomeContent"
+import { buildMetadata, MetaBuilder } from "@/lib/meta"
+import { getHomeCards } from "@/remote/api"
+
+export const revalidate = 30
+
+export async function generateMetadata(): Promise<Metadata> {
+    const title = "Шлиссельбургская ДХШ"
+    const m = new MetaBuilder().setTitle(title).setData({ url: "/" }).build()
+    return buildMetadata(m)
+}
+
+export default async function HomePage() {
+    const items = await getHomeCards()
+
+    return (
+        <App showAuthor>
+            <HomeContent items={items} />
+        </App>
+    )
+}

apps/hudozka/src/app/robots.ts

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from "next"
+import { siteUrl } from "@/const"
+
+export default function robots(): MetadataRoute.Robots {
+    return {
+        rules: {
+            userAgent: "*",
+            allow: "/",
+        },
+        host: siteUrl,
+        sitemap: `${siteUrl}/sitemap.xml`,
+    }
+}

apps/hudozka/src/app/sitemap.ts

@@ -0,0 +1,34 @@
+import type { MetadataRoute } from "next"
+import { siteUrl } from "@/const"
+import { getAllTagSlugs, getUrls } from "@/remote/api"
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+    const [urls, tagSlugs] = await Promise.all([getUrls(), getAllTagSlugs()])
+
+    const staticPages: MetadataRoute.Sitemap = [
+        {
+            url: siteUrl,
+            changeFrequency: "daily",
+        },
+        {
+            url: `${siteUrl}/collective`,
+            changeFrequency: "daily",
+        },
+        {
+            url: `${siteUrl}/tags`,
+            changeFrequency: "weekly",
+        },
+    ]
+
+    const dynamicPages: MetadataRoute.Sitemap = urls.map(path => ({
+        url: `${siteUrl}${path}`,
+        changeFrequency: "daily",
+    }))
+
+    const tagPages: MetadataRoute.Sitemap = tagSlugs.map(slug => ({
+        url: `${siteUrl}/tags/${slug}`,
+        changeFrequency: "weekly",
+    }))
+
+    return [...staticPages, ...dynamicPages, ...tagPages]
+}

apps/hudozka/src/app/tags/[slug]/page.tsx

@@ -0,0 +1,98 @@
+import { Title } from "@hudozka/ui"
+import type { Metadata } from "next"
+import { notFound } from "next/navigation"
+import { App } from "@/components/App"
+import { PageGrid } from "@/components/PageGrid"
+import { Pagination } from "@/components/Pagination"
+import { menu } from "@/const"
+import { buildMetadata, MetaBuilder } from "@/lib/meta"
+import { getAllTagSlugs, getPagesByTag } from "@/remote/api"
+
+export const revalidate = 30
+export const dynamicParams = true
+
+const PER_PAGE = 24
+
+export async function generateStaticParams() {
+    const slugs = await getAllTagSlugs()
+    return slugs.map(slug => ({ slug }))
+}
+
+type Props = {
+    params: Promise<{ slug: string }>
+    searchParams: Promise<{ page?: string }>
+}
+
+function parsePage(value: string | undefined): number {
+    const n = Number.parseInt(value ?? "1", 10)
+    return Number.isFinite(n) && n >= 1 ? n : 1
+}
+
+export async function generateMetadata({ params, searchParams }: Props): Promise<Metadata> {
+    const [{ slug }, sp] = await Promise.all([params, searchParams])
+    const page = parsePage(sp.page)
+
+    const listing = await getPagesByTag(slug, page, PER_PAGE)
+    if (!listing) {
+        return {}
+    }
+
+    const titleBase = `${listing.tag.name} — метка`
+    const title = page > 1 ? `${titleBase}, страница ${page}` : titleBase
+
+    const meta = new MetaBuilder().setTitle(title).setDescription(`Записи с меткой «${listing.tag.name}».`).build()
+
+    const metadata = buildMetadata(meta)
+    if (page > 1) {
+        return { ...metadata, robots: { index: false, follow: true } }
+    }
+    return metadata
+}
+
+export default async function TagPage({ params, searchParams }: Props) {
+    const [{ slug }, sp] = await Promise.all([params, searchParams])
+    const page = parsePage(sp.page)
+
+    const listing = await getPagesByTag(slug, page, PER_PAGE)
+    if (!listing) {
+        notFound()
+    }
+
+    const totalPages = Math.max(1, Math.ceil(listing.total / listing.perPage))
+    if (listing.total > 0 && page > totalPages) {
+        notFound()
+    }
+
+    const breadcrumbs = [
+        { name: menu[0].name, href: "/" },
+        { name: "Метки", href: "/tags" },
+        { name: listing.tag.name, href: listing.tag.href },
+    ]
+
+    return (
+        <App
+            contentStyle={{
+                marginTop: "var(--size-l)",
+                marginBottom: "var(--size-xl)",
+            }}
+            breadcrumbs={breadcrumbs}
+        >
+            <Title level={1} style={{ marginBottom: "var(--size-l)" }}>
+                {listing.tag.name}
+            </Title>
+            {listing.items.length === 0 ? (
+                <p>Пока нет записей.</p>
+            ) : (
+                <>
+                    <PageGrid items={listing.items} />
+                    <Pagination
+                        basePath={listing.tag.href}
+                        page={listing.page}
+                        total={listing.total}
+                        perPage={listing.perPage}
+                    />
+                </>
+            )}
+        </App>
+    )
+}

apps/hudozka/src/app/tags/page.tsx

@@ -0,0 +1,38 @@
+import { Title } from "@hudozka/ui"
+import type { Metadata } from "next"
+import { App } from "@/components/App"
+import { TagsIndex } from "@/components/TagsIndex"
+import { menu } from "@/const"
+import { buildMetadata, MetaBuilder } from "@/lib/meta"
+import { getAllTagsWithCounts } from "@/remote/api"
+
+export const revalidate = 30
+
+export async function generateMetadata(): Promise<Metadata> {
+    const meta = new MetaBuilder().setTitle("Метки").setDescription("Список всех меток сайта.").build()
+    return buildMetadata(meta)
+}
+
+export default async function TagsIndexPage() {
+    const tags = await getAllTagsWithCounts()
+
+    const breadcrumbs = [
+        { name: menu[0].name, href: "/" },
+        { name: "Метки", href: "/tags" },
+    ]
+
+    return (
+        <App
+            contentStyle={{
+                marginTop: "var(--size-l)",
+                marginBottom: "var(--size-xl)",
+            }}
+            breadcrumbs={breadcrumbs}
+        >
+            <Title level={1} style={{ marginBottom: "var(--size-l)" }}>
+                Метки
+            </Title>
+            <TagsIndex items={tags} />
+        </App>
+    )
+}