feat(stylebook): add Vue Styleguidist browser-based component stylebook and inline component docs

.github/workflows/documentation-beta.yml

@@ -0,0 +1,40 @@
+name: Documentation (Beta)
+
+on:
+  push:
+    branches:
+      - beta
+
+jobs:
+  deploy-beta:
+    name: Deploy Beta Styleguide
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install and build component styleguide
+        timeout-minutes: 10
+        run: |
+          cd styleguide
+          npm ci
+          npm run build
+
+      - name: Deploy styleguide to /beta/ on GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./styleguide/build
+          publish_branch: gh-pages
+          destination_dir: beta/styleguide
+          user_name: 'github-actions[bot]'
+          user_email: 'github-actions[bot]@users.noreply.github.com'
+          keep_files: true

.github/workflows/documentation-dev.yml

@@ -0,0 +1,41 @@
+name: Documentation (Dev)
+
+on:
+  push:
+    branches:
+      - development
+
+jobs:
+  deploy-dev:
+    name: Deploy Dev Styleguide
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install and build component styleguide
+        timeout-minutes: 10
+        run: |
+          cd styleguide
+          npm ci
+          npm run build
+
+      - name: Deploy styleguide to /dev/ on GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./styleguide/build
+
+          publish_branch: gh-pages
+          destination_dir: dev/styleguide
+          user_name: 'github-actions[bot]'
+          user_email: 'github-actions[bot]@users.noreply.github.com'
+          keep_files: true

.github/workflows/documentation.yml

@@ -26,6 +26,13 @@ jobs:
         with:
           node-version: '20'
 
+      - name: Install and build component styleguide
+        timeout-minutes: 10
+        run: |
+          cd styleguide
+          npm ci
+          npm run build
+
       - name: Clear build cache and install dependencies
         timeout-minutes: 3
         run: |
@@ -43,6 +50,12 @@ jobs:
             exit 1
           fi
 
+      - name: Copy styleguide into Docusaurus build
+        run: |
+          mkdir -p docusaurus/build/styleguide
+          cp -r styleguide/build/. docusaurus/build/styleguide/
+
+
       - name: Create .nojekyll file
         run: |
           cd docusaurus/build
@@ -58,7 +71,7 @@ jobs:
           user_email: 'github-actions[bot]@users.noreply.github.com'
           force_orphan: false
           allow_empty_commit: true
-          keep_files: false
+          keep_files: true
 
       - name: Verify deployment
         run: |

.gitignore

@@ -6,3 +6,7 @@ dist/
 # Docusaurus build output
 docusaurus/build
 .docusaurus
+
+# Styleguide build output
+styleguide/build
+.styleguide

.vscode/settings.json

@@ -28,4 +28,7 @@
     "[php]": {
         "editor.defaultFormatter": "DEVSENSE.phptools-vscode"
     },
+    "[markdown]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
+    },
 }

docs/components/cn-advanced-form-dialog.md

@@ -129,11 +129,52 @@ This means the directive is self-contained — it works even if the consuming ap
 
 ---
 
+## Live demo
+
+```vue
+<template>
+  <div>
+    <button @click="open = true" style="padding: 6px 16px; border-radius: 4px; background: var(--color-primary-element); color: white; border: none; cursor: pointer;">Edit contact</button>
+    <CnAdvancedFormDialog
+      v-if="open"
+      ref="dlg"
+      :schema="schema"
+      :item="item"
+      @confirm="onConfirm"
+      @close="open = false" />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      open: false,
+      schema: {
+        title: 'Contact',
+        properties: {
+          name: { type: 'string', title: 'Name' },
+          email: { type: 'string', format: 'email', title: 'Email' },
+          notes: { type: 'string', title: 'Notes' },
+        },
+      },
+      item: { id: 1, name: 'Jane Doe', email: 'jane@example.com', notes: '' },
+    }
+  },
+  methods: {
+    async onConfirm(payload) {
+      await new Promise(r => setTimeout(r, 800))
+      this.$refs.dlg.setResult({ success: true })
+    },
+  },
+}
+</script>
+```
+
 ## Usage examples
 
 ### Standalone (emit confirm, parent saves)
 
-```vue
+```vue {static}
 <CnAdvancedFormDialog
   ref="advancedForm"
   :schema="schema"
@@ -156,7 +197,7 @@ async onConfirm(payload) {
 
 ### With CnIndexPage (useAdvancedFormDialog)
 
-```vue
+```vue {static}
 <CnIndexPage
   title="Items"
   :schema="schema"
@@ -172,7 +213,7 @@ async onConfirm(payload) {
 
 ### Custom Properties tab
 
-```vue
+```vue {static}
 <CnAdvancedFormDialog :schema="schema" :item="item" @confirm="onConfirm" @close="close">
   <template #tab-properties="{ formData, updateField, objectProperties }">
     <MyCustomPropertyGrid
@@ -186,7 +227,7 @@ async onConfirm(payload) {
 
 ### Full form override
 
-```vue
+```vue {static}
 <CnAdvancedFormDialog :schema="schema" :item="item" @confirm="onConfirm" @close="close">
   <template #form="{ formData, updateField, jsonData, updateJson, isValidJson }">
     <MyCustomForm :data="formData" @update="updateField" />

docs/components/cn-app-root.md

@@ -12,13 +12,13 @@ CnAppRoot is the full-shell convenience for the JSON manifest renderer. Apps tha
 |-------|------|-------------------|---------------|
 | `loading` | While `isLoading` is `true` | `<CnAppLoading />` | `#loading` |
 | `dependency-missing` | After loading; any entry in `manifest.dependencies` is not installed/enabled | `<CnDependencyMissing />` | `#dependency-missing` |
-| `shell` | Manifest loaded + dependencies satisfied | `<CnAppNav />` + `<router-view />` | `#menu`, `#header-actions`, `#sidebar`, `#footer` |
+| `shell` | Manifest loaded + dependencies satisfied | `<CnAppNav />` + default slot content | `#menu`, default slot, `#header-actions`, `#sidebar`, `#footer` |
 
 Dependency status is resolved by [`useAppStatus`](../utilities/composables/use-app-status.md) — one call per id in `manifest.dependencies`, cached for the page lifetime.
 
 ## Usage
 
-```vue
+```vue {static}
 <template>
   <CnAppRoot
     :manifest="manifest"
@@ -85,12 +85,13 @@ CnAppRoot calls `provide()` with the following keys; descendants `inject` these:
 
 | Slot | Scope | Default | Description |
 |------|-------|---------|-------------|
+| *(default)* | — | — | Page content area inside `NcAppContent`. In real apps, pass `<router-view />` here. |
 | `loading` | — | `<CnAppLoading />` | Shown during the loading phase |
 | `dependency-missing` | `{ dependencies }` | `<CnDependencyMissing :dependencies />` | Shown when any dependency is missing or disabled |
 | `menu` | — | `<CnAppNav :permissions />` | Replaces the default app navigation |
-| `header-actions` | — | — | Mounted inside `NcAppContent`, alongside `<router-view />` |
+| `header-actions` | — | — | Mounted inside `NcAppContent`, alongside the default slot |
 | `sidebar` | — | — | Mounted next to `NcAppContent` (e.g. for `NcAppSidebar`) |
-| `footer` | — | — | Mounted inside `NcAppContent`, after `<router-view />` |
+| `footer` | — | — | Mounted inside `NcAppContent`, after the default slot |
 
 ## Related
 

docs/components/cn-context-menu.md

@@ -34,57 +34,58 @@ Right-click context menu component that wraps NcActions with cursor positioning.
 
 ### With actions array (common case)
 
+Right-click one of the rows below:
+
 ```vue
 <template>
-  <table>
-    <tr
+  <div>
+    <div
       v-for="row in rows"
       :key="row.id"
-      @contextmenu.prevent="onContextMenu({ item: row, event: $event })">
-      <!-- cells -->
-    </tr>
-  </table>
-
-  <CnContextMenu
-    :open.sync="contextMenuOpen"
-    :actions="actions"
-    :target-item="contextMenuRow"
-    @action="onAction"
-    @close="closeContextMenu" />
+      style="padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 4px; margin-bottom: 4px; cursor: context-menu; user-select: none;"
+      @contextmenu.prevent="e => onContextMenu({ item: row, event: e })">
+      {{ row.title }}
+    </div>
+    <CnContextMenu
+      :open.sync="contextMenuOpen"
+      :actions="actions"
+      :target-item="contextMenuRow"
+      @close="closeContextMenu" />
+    <p v-if="lastAction" style="margin-top: 8px; font-size: 13px; color: var(--color-text-maxcontrast);">Last: {{ lastAction }}</p>
+  </div>
 </template>
-
 <script>
-import { CnContextMenu, useContextMenu } from '@conduction/nextcloud-vue'
-
+import { useContextMenu } from '@conduction/nextcloud-vue'
 export default {
-  components: { CnContextMenu },
-
   setup() {
     const {
       isOpen: contextMenuOpen,
       targetItem: contextMenuRow,
       open: onContextMenu,
       close: closeContextMenu,
     } = useContextMenu()
-
     return { contextMenuOpen, contextMenuRow, onContextMenu, closeContextMenu }
   },
-
-  computed: {
-    actions() {
-      return [
-        { label: 'Edit', icon: PencilIcon, handler: (row) => this.editRow(row) },
-        { label: 'Delete', icon: TrashIcon, handler: (row) => this.deleteRow(row), destructive: true },
-      ]
-    },
+  data() {
+    return {
+      lastAction: '',
+      rows: [
+        { id: 1, title: 'Item one — right-click me' },
+        { id: 2, title: 'Item two — right-click me' },
+      ],
+      actions: [
+        { label: 'Edit', handler: (row) => { this.lastAction = 'Edit: ' + row.title } },
+        { label: 'Delete', handler: (row) => { this.lastAction = 'Delete: ' + row.title }, destructive: true },
+      ],
+    }
   },
 }
 </script>
 ```
 
 ### With custom slot content
 
-```vue
+```vue {static}
 <CnContextMenu
   :open.sync="contextMenuOpen"
   @close="closeContextMenu">
@@ -101,7 +102,7 @@ export default {
 
 ### Mixed (actions array + slot)
 
-```vue
+```vue {static}
 <CnContextMenu
   :open.sync="contextMenuOpen"
   :actions="commonActions"

docs/components/cn-copy-dialog.md

@@ -44,3 +44,30 @@ Two-phase single-item copy dialog with naming pattern selector. User picks a nam
 | Method | Description |
 |--------|-------------|
 | `setResult(\{ success?, error? \})` | Set operation result |
+
+## Live demo
+
+```vue
+<template>
+  <div>
+    <button @click="open = true" style="padding: 6px 16px; border-radius: 4px; background: var(--color-primary-element); color: white; border: none; cursor: pointer;">Copy item</button>
+    <CnCopyDialog
+      v-if="open"
+      ref="dlg"
+      :item="{ id: 1, title: 'Annual Report 2024' }"
+      @confirm="onConfirm"
+      @close="open = false" />
+  </div>
+</template>
+<script>
+export default {
+  data() { return { open: false } },
+  methods: {
+    async onConfirm({ id, newName }) {
+      await new Promise(r => setTimeout(r, 800))
+      this.$refs.dlg.setResult({ success: true })
+    },
+  },
+}
+</script>
+```