Link 20 more demo pages to their docs, and lint the paths (#2869)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>

.agents/skills/demo-pages/SKILL.md

@@ -0,0 +1,120 @@
+---
+name: demo-pages
+description: >-
+  Build or update a Tabler demo page under `preview/pages/*.astro` — the pages
+  that show a component's variants side by side. Use whenever the user asks to
+  add, extend, or clean up a preview/demo page, and on your own after adding a
+  new `shared/ui` component that has no page showing it. Covers the page
+  skeleton, the header (title, description, docs link, actions), the card grid,
+  heading levels, and how to verify the result in the browser.
+---
+
+# Write a Tabler demo page
+
+Demo pages live in `preview/pages/*.astro` and are served at `/<name>` in dev, `/<name>.html` in the build. Each one shows the variants of a single component so a reader can compare them at a glance. They are not documentation — the prose is one line per card; the depth lives in `docs/content/**` (see the `write-docs` skill).
+
+## 1. Page skeleton
+
+```astro
+---
+import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
+import Card from '@ui/Card.astro'
+import CardBody from '@ui/CardBody.astro'
+import CardTitle from '@ui/CardTitle.astro'
+import CardSubtitle from '@ui/CardSubtitle.astro'
+import DocsLink from '@ui/DocsLink.astro'
+---
+
+<DefaultLayout title="Badges" pageMenu="base.badges" description="Badges highlight a count, status, or short label attached to text, buttons, or menu items.">
+  <DocsLink slot="page-header-actions" path="/ui/components/badge" />
+
+  <div class="row row-cards">
+    <div class="col-md-6 col-lg-4">
+      <Card>
+        <CardBody>
+          <CardTitle>Basic</CardTitle>
+          <CardSubtitle>One sentence on what this variant is for.</CardSubtitle>
+          …
+        </CardBody>
+      </Card>
+    </div>
+  </div>
+</DefaultLayout>
+```
+
+- `title` — browser title. It also becomes the page header, so **do not repeat it in a `pageHeader` prop**; `pageHeader` exists only for a header that differs from the browser title (`title="Dashboard" pageHeader="Boxed layout"`), or as `pageHeader={false}` for a page with no header at all.
+- `description` — renders under the page title *and* fills `<meta name="description">`. One sentence, present tense, says what the component is for.
+- `pageMenu` — the menu entry to highlight, e.g. `base.badges`. Match an existing key in `shared/data/menu.json`.
+- Never hand-roll a title block inside the page body. The page header is the layout's job.
+
+## 2. Page header extras
+
+Anything to the right of the title goes in the `page-header-actions` slot, as a direct child of `<DefaultLayout>`:
+
+```astro
+<DocsLink slot="page-header-actions" path="/ui/components/badge" />
+```
+
+- **Docs link:** `path` is the page's path under `docs/content/**` without the extension — `docs/content/ui/components/badge.mdx` → `/ui/components/badge`. Add one whenever a matching docs page exists.
+- **Check the path with `pnpm run check-docs-links`.** It resolves every `<DocsLink path="…">` against `docs/content/**` and fails on a typo, so you do not need a browser for this.
+- If you do open the link, use `docs-dev.tabler.io`, which serves `dev`. `docs.tabler.io` serves the last release and still has the pre-content-collection urls, so a valid page can 404 there. A 404 on production alone is never a reason to change a path.
+- **Prebuilt action groups** (`HeaderActionsButtons`, `HeaderActionsPrint`, `HeaderActionsPhotos`, …) live in `shared/components/layout/` and go in the same slot: `<HeaderActionsButtons slot="page-header-actions" />`. There is no `actions="buttons"` prop any more.
+
+## 3. Card grid
+
+- One card per variant, in `<div class="row row-cards">` with `col-*` wrappers. Keep column widths consistent down the page.
+- `CardTitle` names the variant in 1-3 words. `CardSubtitle` explains it in one sentence, naming the prop or class it demonstrates: "Add `showClose` to let users close the alert."
+- Put the class or prop in `<code>` inside the subtitle. Readers scan for the token.
+- Never write `<h3 class="card-title">` or `<div class="card-subtitle">` by hand — use the components, which also keep the heading level right.
+
+## 4. Heading levels
+
+`CardTitle` and `CardHeader` render `h2`, directly under the page `h1`. Pass `as="h3"` only for a card nested under its own `h2` section heading. Do not introduce raw `<h3>`/`<h4>` headings for card titles; that is what made pages mix levels before.
+
+## 5. Spacing between inline elements
+
+Use the list wrappers instead of margin utilities on each child:
+
+| Wrapper | For |
+| --- | --- |
+| `<ButtonList>` | rows of buttons |
+| `<BadgeList>` | rows of badges |
+| `<TagList>` | rows of tags |
+| `<AvatarList>` | rows or stacks of avatars |
+
+The pluralised class names (`.badges-list`, `.tags-list`) are deprecated aliases of `.badge-list` / `.tag-list`. Do not add `me-2`/`mb-2` to individual items.
+
+## 6. Data and repetition
+
+- Loop over `shared/data/*.json` (`site.json` colors, `people.json`, `flags.json`) instead of pasting 20 near-identical blocks.
+- Cast JSON entries to a named type in the frontmatter when you index into them; `astro check` is part of the quality gates.
+
+## 7. Registering the page
+
+- Add the page to `shared/data/menu.json` so it is reachable, and use the same key in `pageMenu`.
+- A new `shared/ui` component usually needs both a demo page and a docs page. After finishing here, check `docs/content/**` and consult the `write-docs` skill if it is missing.
+
+## 8. Verify in the browser
+
+Never hand the page to the user unchecked.
+
+1. `preview_start` with the `preview` config from `.claude/launch.json`, then open `/<page-name>`.
+2. Screenshot it, and read the console for errors.
+3. For a page built by looping over data, assert the rendered structure instead of eyeballing it:
+
+```shell
+curl -s http://localhost:3000/badges | grep -o '<h[1-6]' | sort | uniq -c
+```
+
+A demo page should show exactly one `h1` and then `h2`s — no `h3` in the card grid.
+
+## 9. Quality checklist
+
+- [ ] `title` and `description` set; no `pageHeader` repeating the title
+- [ ] `DocsLink` present when a docs page exists; `pnpm run check-docs-links` passes
+- [ ] One card per variant; `CardTitle` + `CardSubtitle` on each
+- [ ] No raw `card-title` / `card-subtitle` / `page-title` markup
+- [ ] List wrappers instead of per-item margins
+- [ ] `pnpm run format-prettier` and `pnpm run type-check` clean (repo root, not a tail-filtered subset)
+- [ ] Page opened in the browser, console clean, heading order checked
+- [ ] Changeset written with the `generate-changeset` skill

.agents/skills/mr-description/SKILL.md

@@ -64,6 +64,8 @@ gh api repos/tabler/tabler/deployments/<id>/statuses --jq '.[0].environment_url'
 curl -s -o /dev/null -w '%{http_code}\n' <link>
 ```
 
+**Links to the published docs** (not a Vercel preview) belong to a different pair of hosts: `docs.tabler.io` serves the last release, `docs-dev.tabler.io` serves `dev`. Check any `docs.tabler.io` link you mention against `docs-dev.tabler.io` — production still serves the pre-content-collection URLs, so a page that exists in `docs/content/**` can 404 there without being a broken link.
+
 If the diff touches specific routes or pages, append that path. Path shape differs per project:
 
 - **Preview pages use the `.html` extension**: `preview/pages/icons.astro` → `/icons.html`, not `/icons`.

.agents/skills/write-docs/SKILL.md

@@ -114,6 +114,17 @@ Prose and example markup are only as accurate as their source. Before writing ex
 8. Ensure prose is in simple English.
 9. Verify heading hierarchy (`##` then `###`) and snippet validity.
 
+## 8a. Checking a page on the published site
+
+Two hosts serve the docs, and they are not in sync:
+
+| Host | Serves |
+| --- | --- |
+| `docs.tabler.io` | the last release — can be many commits behind `dev` |
+| `docs-dev.tabler.io` | the `dev` branch |
+
+Check a page's live url on `docs-dev.tabler.io`. Production still serves the pre-content-collection urls, so a page that exists in `docs/content/**` can return 404 there while being perfectly fine. A 404 on `docs.tabler.io` alone never justifies renaming a page or rewriting a link — confirm on `docs-dev.tabler.io` first.
+
 ## 9. Rules while updating existing docs
 
 - Preserve valid existing content that is still correct.

.build/check-docs-links.ts

@@ -4,6 +4,7 @@
 // - menu/link urls in shared/data/docs.json
 // - redirect destinations in docs/astro.config.mjs
 // - href string literals in docs .astro components
+// - docs paths linked from the demo site: <DocsLink path="…"> and getDocsUrl('…')
 // Anchors are checked against heading slugs computed with github-slugger —
 // the same library the markdown pipeline uses. Demo markup inside <Example>
 // blocks and code fences is ignored; its links are illustrative by design.
@@ -218,6 +219,19 @@ for (const file of sync(join(repoRoot, 'docs', '{components,layouts,pages}', '**
   }
 }
 
+// 5. Docs paths used by the demo site — <DocsLink path="…"> and getDocsUrl('…').
+// These render as absolute docs.tabler.io urls, so a typo only shows up in a browser.
+for (const file of sync(join(repoRoot, '{preview,shared}', '**', '*.astro'), { ignore: '**/node_modules/**' })) {
+  const label = relative(repoRoot, file)
+  const source = readFileSync(file, 'utf8')
+  for (const match of source.matchAll(/<DocsLink\b[^>]*?\spath=["'](\/[^"']*)["']/g)) {
+    checkTarget(label, match[1] ?? '')
+  }
+  for (const match of source.matchAll(/getDocsUrl\(\s*["'](\/[^"']*)["']/g)) {
+    checkTarget(label, match[1] ?? '')
+  }
+}
+
 const uniqueErrors = [...new Set(errors)]
 if (uniqueErrors.length > 0) {
   console.error(`Found ${uniqueErrors.length} dead link(s) (${checkedLinks} links checked):\n`)

.changeset/more-demo-page-docs-links.md

@@ -0,0 +1,5 @@
+---
+"@tabler/preview": patch
+---
+
+Added `DocsLink` to the header of 20 more demo pages, including Cards, Charts, Tables and Typography.

preview/pages/card-gradients.astro

@@ -12,9 +12,11 @@ import ProfileContact from '@shared/components/cards/ProfileContact.astro'
 import SmallStats from '@shared/components/cards/SmallStats.astro'
 import people from '@data/people.json'
 import { requireIndex } from '@shared/lib/array'
+import DocsLink from '@ui/DocsLink.astro'
 ---
 
 <DefaultLayout title="Card Gradients" pageMenu="base.cards.gradients" pageLibs={['apexcharts']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/card-gradient" />
   <div class="row row-cards">
     <div class="col-md-6">
       <div class="row row-cards">

preview/pages/cards.astro

@@ -12,12 +12,14 @@ import CardBackgroundIcon from '@shared/components/cards/CardBackgroundIcon.astr
 import CreditCard from '@shared/components/cards/CreditCard.astro'
 import EmptyTeam from '@shared/components/cards/EmptyTeam.astro'
 import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro'
+import DocsLink from '@ui/DocsLink.astro'
 
 const cardsStack = ['First', 'Second', 'Third']
 const cardsStackColors = ['red', 'green', 'blue']
 ---
 
 <DefaultLayout title="Cards" pageMenu="base.cards.base">
+  <DocsLink slot="page-header-actions" path="/ui/components/card" />
   <div class="row row-cards">
     <div class="col-md-6 col-lg-3">
       <div class="card">

preview/pages/charts.astro

@@ -8,11 +8,13 @@ import CardHeader from '@ui/CardHeader.astro'
 import CardBody from '@ui/CardBody.astro'
 import chartsData from '@data/charts.json'
 import { capitalize } from '@shared/lib/string-format'
+import DocsLink from '@ui/DocsLink.astro'
 
 const demoCharts = Object.entries(chartsData as Record<string, { demo?: boolean; name?: string }>).filter(([, chart]) => chart && chart.demo)
 ---
 
 <DefaultLayout title="Charts" pageMenu="plugins.charts" pageLibs={['apexcharts']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/chart" />
   <div class="row row-cards">
     <div class="col-lg-12">
       <Activity />

preview/pages/colorpicker.astro

@@ -5,11 +5,13 @@ import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import Colorpicker from '@ui/Colorpicker.astro'
 import site from '@data/site.json'
+import DocsLink from '@ui/DocsLink.astro'
 
 const colors = Object.values(site.colors) as { hex: string; title: string }[]
 ---
 
 <DefaultLayout title="Color picker" pageMenu="plugins.colorpicker" pageLibs={['coloris.js']}>
+  <DocsLink slot="page-header-actions" path="/ui/forms/form-colorpicker" />
   <Card>
     <CardBody>
       <CardTitle>Basic</CardTitle>

preview/pages/dropzone.astro

@@ -4,9 +4,11 @@ import Dropzone from '@ui/Dropzone.astro'
 import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
+import DocsLink from '@ui/DocsLink.astro'
 ---
 
 <DefaultLayout title="Dropzone" pageMenu="plugins.dropzone" pageLibs={['dropzone']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/dropzone" />
   <div class="row row-cards">
     <div class="col-md-6">
       <Card>

preview/pages/empty.astro

@@ -1,7 +1,9 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
+import DocsLink from '@ui/DocsLink.astro'
 ---
 
 <DefaultLayout title="Empty page" pageMenu="extra.empty">
+  <DocsLink slot="page-header-actions" path="/ui/components/empty" />
   <!-- Content here -->
 </DefaultLayout>

preview/pages/flags.astro

@@ -5,12 +5,14 @@ import CardHeader from '@ui/CardHeader.astro'
 import CardBody from '@ui/CardBody.astro'
 import flags from '@data/flags.json'
 import CardTitle from '@ui/CardTitle.astro'
+import DocsLink from '@ui/DocsLink.astro'
 
 // 21 filler divs for flexbox layout.
 const fillers = Array.from({ length: 21 })
 ---
 
 <DefaultLayout title="Flags" pageMenu="addons.flags">
+  <DocsLink slot="page-header-actions" path="/ui/plugins/flags" />
   <Card>
     <CardHeader>
       <CardTitle>List of all flags</CardTitle>

preview/pages/form-elements.astro

@@ -20,6 +20,7 @@ import CardTitle from '@ui/CardTitle.astro'
 import FormGroup from '@ui/FormGroup.astro'
 import people from '@data/people.json'
 import { requireIndex } from '@shared/lib/array'
+import DocsLink from '@ui/DocsLink.astro'
 
 const httpMethods = ['GET', 'POST', 'PUT', 'HEAD', 'DELETE', 'PATCH']
 const comparisons = [
@@ -51,6 +52,7 @@ const rows = [
 ---
 
 <DefaultLayout title="Form elements" pageMenu="form.elements" pageLibs={['nouislider', 'autosize', 'tabler-flags', 'tabler-payments', 'litepicker', 'tom-select', 'imask']}>
+  <DocsLink slot="page-header-actions" path="/ui/forms/form-elements" />
   <div class="row row-cards">
     <div class="col-12">
       <Card as="form" action="https://httpbin.org/post" method="post">

preview/pages/fullcalendar.astro

@@ -3,9 +3,11 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import Fullcalendar from '@ui/Fullcalendar.astro'
+import DocsLink from '@ui/DocsLink.astro'
 ---
 
 <DefaultLayout title="Fullcalendar" pageMenu="plugins.fullcalendar" pageLibs={['fullcalendar']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/fullcalendar" />
   <Card>
     <CardBody>
       <Fullcalendar sampleEvents />

preview/pages/icons.astro

@@ -2,9 +2,11 @@
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import IconsBanner from '@shared/components/cards/IconsBanner.astro'
 import Icons from '@shared/components/cards/Icons.astro'
+import DocsLink from '@ui/DocsLink.astro'
 ---
 
 <DefaultLayout title="Icons" pageMenu="addons.icons">
+  <DocsLink slot="page-header-actions" path="/ui/components/icon" />
   <div class="row row-cards">
     <div class="col-lg-4">
       <IconsBanner />

preview/pages/inline-player.astro

@@ -6,11 +6,13 @@ import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import InlinePlayer from '@ui/InlinePlayer.astro'
 import players from '@data/inline-players.json'
+import DocsLink from '@ui/DocsLink.astro'
 
 type Provider = { 'title': string; 'type': string; 'id': string; 'embed-id': string | number }
 ---
 
 <DefaultLayout title="Inline Player" pageMenu="plugins.plyr" pageLibs={['plyr']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/inline-player" />
   <div class="row row-cards">
     {
       (players as Provider[]).map((provider) => (

preview/pages/lightbox.astro

@@ -3,11 +3,13 @@
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
 import Photo from '@ui/Photo.astro'
 import photos from '@data/photos.json'
+import DocsLink from '@ui/DocsLink.astro'
 
 const filteredPhotos = photos.filter((photo) => photo.horizontal)
 ---
 
 <DefaultLayout title="Lightbox" pageMenu="plugins.lightbox" pageLibs={['fslightbox']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/lightbox" />
   <div class="row row-cols-3 row-cols-md-4 row-cols-lg-6 g-3">
     {
       filteredPhotos.map((photo) => (

preview/pages/maps-vector.astro

@@ -4,9 +4,11 @@ import MapVector from '@ui/MapVector.astro'
 import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
+import DocsLink from '@ui/DocsLink.astro'
 ---
 
 <DefaultLayout title="Vector Maps" pageMenu="plugins.maps-vector" pageLibs={['jsvectormap']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/vector-map" />
   <div class="row row-cards">
     <div class="col-md-6">
       <Card>

preview/pages/maps.astro

@@ -6,12 +6,14 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import maps from '@data/maps.json'
 import CardTitle from '@ui/CardTitle.astro'
+import DocsLink from '@ui/DocsLink.astro'
 
 type MapData = { title?: string; card?: boolean }
 const mapEntries = Object.entries(maps as Record<string, MapData>)
 ---
 
 <DefaultLayout title="Maps" pageMenu="plugins.maps" pageLibs={['mapbox']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/map" />
   <div class="row row-cards">
     {
       mapEntries.map(([mapId, data]) =>

preview/pages/payment-providers.astro

@@ -6,11 +6,13 @@ import CardHeader from '@ui/CardHeader.astro'
 import CardBody from '@ui/CardBody.astro'
 import payments from '@data/payments.json'
 import CardTitle from '@ui/CardTitle.astro'
+import DocsLink from '@ui/DocsLink.astro'
 
 const providers = payments as { name: string; logo: string }[]
 ---
 
 <DefaultLayout title="Payment Providers" pageMenu="addons.payment-providers">
+  <DocsLink slot="page-header-actions" path="/ui/plugins/payments" />
   <div class="row row-cards">
     <div class="col-12">
       <Card>

preview/pages/progress.astro

@@ -9,9 +9,11 @@ import Progress from '@ui/Progress.astro'
 import ProgressSteps from '@ui/ProgressSteps.astro'
 import ProgressBg from '@ui/ProgressBg.astro'
 import ProgressDescription from '@ui/ProgressDescription.astro'
+import DocsLink from '@ui/DocsLink.astro'
 ---
 
 <DefaultLayout title="Progress" pageMenu="base.progress">
+  <DocsLink slot="page-header-actions" path="/ui/components/progress" />
   <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
     <div class="col">
       <Card>

preview/pages/signatures.astro

@@ -10,6 +10,7 @@ import CardBody from '@ui/CardBody.astro'
 import CardTitle from '@ui/CardTitle.astro'
 import FormGroup from '@ui/FormGroup.astro'
 import CaptureModal from '@shared/components/CaptureModal.astro'
+import DocsLink from '@ui/DocsLink.astro'
 
 const simpleJs = `signaturePad.fromDataURL("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA1OTIgMjAwIj4KICA8ZyBjbGlwLXBhdGg9InVybCgjYSkiPgogICAgPHBhdGggZmlsbD0iIzAwMCIgZD0iTTEzMi4wOTIgNzkuMDY1YzAgLjMwNC0uMzU1IDEuNDAzLTEuMDYzIDMuMjk4LS42OTQgMS44OTQtMS4xNDIgMy4wMjItMS4zNDUgMy4zODQtMi4zNDIgMy44NDctNi43NiA3LjE4LTEzLjI1MiAxMC4wMDEtNS4zNjUgMi4yMjctMTMuNDU1IDUuNTktMjQuMjcgMTAuMDg4YTE0OC4xOSAxNDguMTkgMCAwIDAtMTAuMzQ3IDMuMTI0Yy0yLjY5Ljg4Mi02LjU4NiAyLjk1LTExLjY5IDYuMjA0YTE4Ny42NiAxODcuNjYgMCAwIDAtMS4wNjMgMTAuMTk2IDQwNy40OSA0MDcuNDkgMCAwIDEtMS40MzIgMTUuMzM4Yy0uODgyIDEuMTg2LTEuOTg4IDEuNzc5LTMuMzE4IDEuNzc5LjExNSAwIC4xNzMtLjAxNS4xNzMtLjA0NC0uMjAyLS4xMDEtLjg5Ni0uMjgyLTIuMDgyLS41NDJ2LTIuODg1YzAtMi43MDUuMjMxLTUuNDYuNjk0LTguMjY2IDAtLjA1Ny4yNTMtLjc3My43Ni0yLjE0Ny41MDUtMS4zMzEuNzU4LTIuMTQxLjc1OC0yLjQzIDAtMS42MDUtLjI5Ni0zLjI0LS44ODktNC45MDMtLjM5IDEuMTI4LTEuMTEzIDEuODU5LTIuMTY5IDIuMTkxLTEuMjQ0LS43MjMtMS44NjUtMS45ODgtMS44NjUtMy43OTYgMC0uMjAzIDEuMDQ4LTEuNzI5IDMuMTQ1LTQuNTc4IDIuMTQtMi45NjUgMy4zODMtNS4wMDQgMy43My02LjExNy4yNzUtLjgxLjc2Ny0zLjQ1IDEuNDc1LTcuOTE5IDEuMDQxLTYuNjEgMS45Ni0xMS40NCAyLjc1NS0xNC40OTEgMS42OTItNi42MzkgMy42OTQtMTAuODYyIDYuMDA4LTEyLjY3bDIuNDMgMS44MjN2MS44NjVjLTEuNTA1IDEuMTU3LTIuNTY3IDMuMjYyLTMuMTkgNi4zMTMtLjE4Ny45NC0uNjM2IDMuMzQxLTEuMzQ0IDcuMjAzLS4xNDUuNzA4LS43MjMgMi41NDUtMS43MzUgNS41MS0uOTExIDIuNjAzLTEuMzY3IDQuMTg3LTEuMzY3IDQuNzUxdjUuNDI0Yy4yNi4yNDUuNS4zNjguNzE2LjM2OCAxLjIxNSAwIDMuMTA5LS41MDYgNS42ODMtMS41MTggMy4wOC0xLjE1NyA1LjAxNy0xLjg1MSA1LjgxMy0yLjA4MyAxMy4wNzEtMy4zODQgMjMuMTUtNy4yMzggMzAuMjM1LTExLjU2MyA2LjIxOC0zLjc0NiA5Ljk5Mi02LjI5OCAxMS4zMjItNy42NTggMS41NzYtMS41NjIgMi4zNjQtMy42NjYgMi4zNjQtNi4zMTMgMC00LjY3MS0yLjEwNC04LjU2OS02LjMxMi0xMS42OTMtMy44Ni0yLjkwNy04LjE5MS00LjM2LTEyLjk5Mi00LjM2LTMuNzg4IDAtOC4yNzEuNDYyLTEzLjQ0NyAxLjM4OC02LjY2NiAxLjIxNS0xMi45MiAyLjkwNy0xOC43NjIgNS4wNzYtOC44NjQgMy4yODQtMTMuNzM2IDYuODM0LTE0LjYxOCAxMC42NTJsLTEuMDg1LjgwM0M1OC44MzkgNzguNDIyIDU4IDc3LjA2MiA1OCA3NS43OWMwLTEuODA4IDEuODgtNC4wMTQgNS42NC02LjYxNyAzLjA4LTIuMTQgNS44Mi0zLjU2NSA4LjIyLTQuMjc0IDE1Ljk0OS00LjkxNyAyNy44NjQtNy4zNzYgMzUuNzQ0LTcuMzc2IDcuNDYxIDAgMTMuNDEyIDEuOTUzIDE3Ljg1MSA1Ljg1NyA0LjQyNCAzLjg2MiA2LjYzNyA5LjA5IDYuNjM3IDE1LjY4NVptMzIuMjk1IDU1LjQwN3YxLjkwOWMtLjU5Mi44MjQtMS4yNDMgMS4yMzYtMS45NTIgMS4yMzYtLjQ0OCAwLTEuOTczLTEuMzU5LTQuNTc2LTQuMDc4LTIuNjAzLTIuNzMzLTQuMzM4LTQuMS01LjIwNi00LjEgMCAuMDU4LTMuMDggMS4yNDQtOS4yMzkgMy41NTgtNi4zMDUgMi4zNDMtMTAuMzE3IDMuNTE0LTEyLjAzOCAzLjUxNC0xLjQxNyAwLTIuOTg2LS42OTQtNC43MDctMi4wODMtMS43Mi0xLjM3NC0yLjU4MS0yLjY2OC0yLjU4MS0zLjg4MyAwLTMuMTM4IDMuNDM0LTYuNzk3IDEwLjMwMy0xMC45NzcgNi40MzQtMy45NjMgMTEuMzQzLTUuOTQ0IDE0LjcyNy01Ljk0NCAxLjQxNyAwIDIuNjkuODEgMy44MTcgMi40M3YxLjgyMmMtLjU2NC44MS0xLjIxNCAxLjIxNS0xLjk1MiAxLjIxNS0uMTMgMC0uNjE0LS4xODEtMS40NTMtLjU0My0uODM5LS4zNzYtMS4zMzctLjU2NC0xLjQ5Ni0uNTY0LTEuMTI4IDAtMy43MTcgMS4xNjUtNy43NjUgMy40OTMtMy44MzIgMi4xNjktNi4zOTkgMy43ODktNy43IDQuODYtMS4zMDIgMS4xMjgtMi4xMzMgMi40MTUtMi40OTQgMy44NjEuOTgzLjkyNiAyLjE1NCAxLjM4OCAzLjUxMyAxLjM4OC43MDkgMCA0LjEwNy0xLjE3MSAxMC4xOTQtMy41MTQgNi4wNzMtMi4zNzIgOS43NDYtMy41NTggMTEuMDE5LTMuNTU4IDEuODY1IDAgMy4yMS40NyA0LjAzNCAxLjQxLjE4OC4yMTcuOTA0IDEuNDkgMi4xNDcgMy44MThhMjEuOTAyIDIxLjkwMiAwIDAgMCAzLjQwNSA0LjczWm02OS44ODQtMTkuNzQydjEuOTUzYy0yLjk5MyAyLjQ1OC01Ljg5OSA1LjIxMy04LjcxOSA4LjI2NS04Ljc2MiA5LjQ1OS0xNC42NjIgMTQuMTg4LTE3LjY5OSAxNC4xODgtMi40NTggMC01LjE5OC0yLjIyLTguMjItNi42NmwtNi41MjgtOS42NTRjLTEuMjQ0LjIwMy0zLjQ5MiAyLjQ2Ni02Ljc0NiA2Ljc5LTMuMDUxIDQuMTIyLTUuODQyIDYuMTgzLTguMzcyIDYuMTgzbC0xLjE5My0uNjI5Yy0uODgyLTEuNjItMi41MzgtNS4xNy00Ljk2Ny0xMC42NTItMi42NDYtNS45MjktMy45NjktOS4zMDYtMy45NjktMTAuMTMxIDAtMS40MzIuODQ2LTIuNjE4IDIuNTM4LTMuNTU4IDEuNjkxIDIuMDQgMy4zNTQgNC44NjcgNC45ODggOC40ODMgMi40NTggNS4zMzYgMy44NzUgOC4zMyA0LjI1MSA4Ljk4MWgyLjA2MWMuNTY0LTEuMDQxIDEuODk0LTIuNjU0IDMuOTkxLTQuODM4LjczNy0xLjEyOCAxLjgyMi0yLjY5IDMuMjUzLTQuNjg2IDEuNjc3LTIuMzcyIDMuMDk1LTMuNTU3IDQuMjUxLTMuNTU3IDEuMDcgMCAxLjk3NC41OTIgMi43MTEgMS43NzggMS4wNzEgMS42OTMgMi45ODYgNC43MyA1Ljc0OCA5LjExMiAzLjA1MSA0Ljc0NCA1LjMgNy4xMTYgNi43NDYgNy4xMTYgMS4wNyAwIDUuMDgyLTMuMDgxIDEyLjAzNy05LjI0MiA2Ljk3LTYuMTYxIDEwLjc5NS05LjI0MiAxMS40NzQtOS4yNDJoMi4zNjRabTQ0LjU3MyAxOS41MjVjLTEuMDQyIDEuMjQ0LTIuNDAxIDEuODY2LTQuMDc4IDEuODY2aC0xNC45ODhjLTMuNDcgMC03LjMzOC0uNTIxLTExLjYwNC0xLjU2Mi01LjU5NS0xLjM2LTguNzYyLTMuMDY3LTkuNS01LjEyLS44MDktMi4zMTQtMS4yMTQtNC41MzQtMS4yMTQtNi42NiAwLTQuMjY3IDEuODM2LTcuNTQzIDUuNTA5LTkuODI4IDMuMDk0LTEuOTgxIDYuODc2LTIuOTcyIDExLjM0NC0yLjk3MiAzLjg0NiAwIDYuODk3LjgzMiA5LjE1MyAyLjQ5NSAyLjI1NSAxLjY0OSAzLjM4MyAzLjg5OCAzLjM4MyA2Ljc0NyAwIDEuNTkxLTIuNzExIDMuMzI2LTguMTMzIDUuMjA2LTQuNDgzIDEuNjItNy43NDQgMi40My05Ljc4MiAyLjQzYTQuNDkgNC40OSAwIDAgMS0uNjczLS4wNDNjMCAuMzktLjMxMS44NjgtLjkzMiAxLjQzMi4zMzIuNTY0IDEuOTgxIDEuMjE0IDQuOTQ1IDEuOTUyIDIuNjYuNjggNC41NTUgMS4wMiA1LjY4MiAxLjAyaDEzLjQ3YzAgLjAyOSAxLjY5OS4yODIgNS4wOTcuNzU5IDEuMDcuNjggMS44NDMgMS40MzkgMi4zMjEgMi4yNzhabS0xNy40NjEtMTYuOWMtMS41NzYtMS42MDUtNC4xMTMtMi40MDgtNy42MTMtMi40MDgtMi40NTggMC00LjczNS40NzctNi44MzIgMS40MzItMi43MDQgMS4yNDQtNC4wNTYgMi45MjktNC4wNTYgNS4wNTUgMCAuNzUyLjI1MyAxLjI4Ny43NTkgMS42MDVoMLine truncated
 
@@ -58,6 +59,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
 ---
 
 <DefaultLayout title="Signatures" pageMenu="extra.signatures" pageLibs={['signature_pad']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/signature" />
   <div class="row row-cards">
     <div class="col-lg-6">
       <Card>

preview/pages/tables.astro

@@ -5,9 +5,11 @@ import Progressbg from '@shared/components/cards/tables/Progressbg.astro'
 import Invoices from '@shared/components/cards/Invoices.astro'
 import AdvancedTable from '@ui/AdvancedTable.astro'
 import Card from '@ui/Card.astro'
+import DocsLink from '@ui/DocsLink.astro'
 ---
 
 <DefaultLayout title="Tables" pageMenu="base.tables" pageLibs={['lists']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/table" />
   <div class="row row-cards">
     <div class="col-lg-8">
       <Card>

preview/pages/typography.astro

@@ -1,8 +1,10 @@
 ---
 import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
+import DocsLink from '@ui/DocsLink.astro'
 ---
 
 <DefaultLayout title="Typography" pageMenu="base.typography">
+  <DocsLink slot="page-header-actions" path="/ui/base/typography" />
   <div class="card card-lg">
     <div class="card-body">
       <div class="row g-4">

preview/pages/wysiwyg.astro

@@ -4,9 +4,11 @@ import Card from '@ui/Card.astro'
 import CardBody from '@ui/CardBody.astro'
 import Wysiwyg from '@ui/Wysiwyg.astro'
 import FormGroup from '@ui/FormGroup.astro'
+import DocsLink from '@ui/DocsLink.astro'
 ---
 
 <DefaultLayout title="HugeRTE" pageMenu="plugins.wysiwyg" pageLibs={['hugerte']}>
+  <DocsLink slot="page-header-actions" path="/ui/components/wysiwyg" />
   <Card>
     <CardBody>
       <FormGroup label="Your name" for="wysiwyg-name">