docs(lab): add LabConcurrencyAnimator

docs/.vitepress/config.mts

@@ -1,6 +1,20 @@
 import { defineConfig } from 'vitepress'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
 
+/** Draft Lab (docs/lab): included in `docs:dev`; omitted from `docs:build` via scripts/docs-build-prod.mjs (sets LAB_PAGES=0). */
+const includeLabPages = process.env.LAB_PAGES !== '0'
+
+const presetSidebar = [
+    {
+        text: 'Presets (maintainers)',
+        items: [
+            { text: 'Preset development', link: '/PRESET_DEVELOPMENT' },
+            { text: 'Preset template', link: '/PRESET_TEMPLATE' },
+            { text: '← Advanced overview', link: '/advanced/' }
+        ]
+    }
+]
+
 export default defineConfig({
   markdown: {
     config(md) {
@@ -21,69 +35,187 @@ export default defineConfig({
       ['meta', { name: 'twitter:image', content: 'https://rickcedwhat.github.io/playwright-smart-table/og.png' }],
     ],
     themeConfig: {
-    nav: [
-      { text: 'Guide', link: '/guide/start' },
-      { text: 'Examples', link: '/examples/' },
-      { text: 'API', link: '/api/' },
-    ],
+        nav: [
+            { text: 'Guide', link: '/guide/getting-started' },
+            ...(includeLabPages ? ([{ text: 'Lab', link: '/lab/' }] as const) : []),
+            { text: 'API', link: '/api/' },
+            { text: 'Examples', link: '/examples/' },
+            { text: 'Help', link: '/troubleshooting' }
+        ],
 
-    sidebar: {
-      '/guide/': [
-        {
-          items: [
-            { text: 'Quick Start', link: '/guide/start' },
-            {
-              text: 'Describe Your Table',
-              link: '/guide/describe/',
-              collapsed: false,
-              items: [
-                { text: 'Where is your table?', link: '/guide/describe/locator' },
-                { text: 'Headers, rows & cells', link: '/guide/describe/identify' },
-                { text: 'Pagination', link: '/guide/describe/pagination' },
-                { text: 'Virtualization', link: '/guide/describe/virtualization' },
-                { text: 'Header text', link: '/guide/describe/header-text' },
-                { text: 'Editing cells', link: '/guide/describe/editing' },
-                { text: 'Column overrides', link: '/guide/describe/column-overrides' },
-              ]
-            },
-            {
-              text: 'Interact with Your Table',
-              link: '/guide/query/',
-              collapsed: false,
-              items: [
-                { text: 'Find rows', link: '/guide/query/find-rows' },
-                { text: 'Read cells', link: '/guide/query/read-cells' },
-                { text: 'Iterate rows', link: '/guide/query/iterate' },
-                { text: 'Write to cells', link: '/guide/query/write' },
-              ]
-            },
-          ]
-        }
-      ],
-      '/examples/': [
-        {
-          text: 'Examples',
-          items: [
-            { text: 'Overview', link: '/examples/' },
-          ]
-        }
-      ],
-      '/api/': [
-        {
-          text: 'API',
-          items: [
-            { text: 'Reference', link: '/api/' },
-          ]
-        }
-      ],
-    },
+        sidebar: {
+            '/guide/': [
+                {
+                    text: 'Guide',
+                    items: [
+                        { text: 'Getting Started', link: '/guide/getting-started' },
+                        { text: 'Why Smart Table?', link: '/guide/why' },
+                        { text: 'Filtering & Queries', link: '/guide/filtering' },
+                        { text: 'Configuration', link: '/guide/configuration' },
+                        {
+                            text: 'How It Works',
+                            collapsed: true,
+                            items: [
+                                { text: 'Table Anatomy', link: '/guide/table-anatomy' },
+                                { text: 'Header Mapping', link: '/guide/header-mapping' },
+                                { text: 'Pagination', link: '/guide/pagination' },
+                                { text: 'Strategies', link: '/guide/strategies' },
+                                { text: 'Concurrency Modes', link: '/guide/concurrency' },
+                            ]
+                        },
+                        {
+                            text: 'Advanced',
+                            collapsed: true,
+                            items: [
+                                { text: 'Custom Resolution', link: '/advanced/custom-resolution' },
+                                { text: 'TypeScript Tips', link: '/advanced/typescript' },
+                                { text: 'Custom Strategies', link: '/advanced/custom-strategies' },
+                                { text: 'Performance Tips', link: '/advanced/performance' },
+                                { text: 'Preset Development', link: '/PRESET_DEVELOPMENT' },
+                                { text: 'Preset Template', link: '/PRESET_TEMPLATE' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            ...(includeLabPages
+                ? {
+                      '/lab/': [
+                          {
+                              text: 'Lab (draft)',
+                              items: [{ text: 'Rough drafts', link: '/lab/' }]
+                          }
+                      ]
+                  }
+                : {}),
+            '/examples/': [
+                {
+                    text: 'Examples',
+                    items: [
+                        { text: 'Overview', link: '/examples/' },
+                        { text: 'Basic Usage', link: '/examples/basic' },
+                        { text: 'Pagination', link: '/examples/pagination' },
+                        { text: 'Infinite Scroll', link: '/examples/infinite-scroll' },
+                        { text: 'MUI DataGrid', link: '/examples/mui-datagrid' },
+                        { text: 'AG Grid', link: '/examples/ag-grid' },
+                        { text: 'Data Scraping', link: '/examples/data-scraping' },
+                    ]
+                }
+            ],
+            '/api/': [
+                {
+                    text: 'API',
+                    items: [
+                        { text: 'Overview', link: '/api/' },
+                        {
+                            text: 'TableConfig',
+                            link: '/api/table-config',
+                            collapsed: false,
+                            items: [
+                                { text: 'columnOverrides', link: '/api/table-config#columnoverrides' },
+                                { text: 'headerSelector', link: '/api/table-config#headerselector' },
+                                { text: 'rowSelector', link: '/api/table-config#rowselector' },
+                                { text: 'cellSelector', link: '/api/table-config#cellselector' },
+                                { text: 'maxPages', link: '/api/table-config#maxpages' },
+                                { text: 'concurrency', link: '/api/table-config#concurrency' },
+                                { text: 'headerTransformer', link: '/api/table-config#headertransformer' },
+                                { text: 'strategies', link: '/api/table-config#strategies' },
+                                { text: 'autoScroll', link: '/api/table-config#autoscroll' },
+                                { text: 'onReset', link: '/api/table-config#onreset' },
+                                { text: 'debug', link: '/api/table-config#debug' }
+                            ]
+                        },
+                        {
+                            text: 'Table Methods',
+                            link: '/api/table-methods',
+                            collapsed: false,
+                            items: [
+                                { text: 'init()', link: '/api/table-methods#init' },
+                                { text: 'isInitialized()', link: '/api/table-methods#isinitialized' },
+                                { text: 'getRow()', link: '/api/table-methods#getrow' },
+                                { text: 'getRowByIndex()', link: '/api/table-methods#getrowbyindex' },
+                                { text: 'findRow()', link: '/api/table-methods#findrow' },
+                                { text: 'findRows()', link: '/api/table-methods#findrows' },
+                                { text: 'forEach()', link: '/api/table-methods#foreach' },
+                                { text: 'map()', link: '/api/table-methods#map' },
+                                { text: 'filter()', link: '/api/table-methods#filter' },
+                                {
+                                    text: 'Async iterator',
+                                    link: '/api/table-methods#async-iterator-for-await-of'
+                                },
+                                { text: 'getHeaders()', link: '/api/table-methods#getheaders' },
+                                { text: 'getHeaderCell()', link: '/api/table-methods#getheadercell' },
+                                { text: 'scrollToColumn()', link: '/api/table-methods#scrolltocolumn' },
+                                { text: 'reset()', link: '/api/table-methods#reset' },
+                                { text: 'revalidate()', link: '/api/table-methods#revalidate' },
+                                { text: 'sorting', link: '/api/table-methods#sorting' },
+                                { text: 'generateConfig()', link: '/api/table-methods#generateconfig' },
+                                { text: 'generateConfigPrompt()', link: '/api/table-methods#generateconfigprompt' }
+                            ]
+                        },
+                        {
+                            text: 'SmartRow',
+                            link: '/api/smart-row',
+                            collapsed: false,
+                            items: [
+                                { text: 'getCell()', link: '/api/smart-row#getcell' },
+                                { text: 'toJSON()', link: '/api/smart-row#tojson' },
+                                { text: 'bringIntoView()', link: '/api/smart-row#bringintoview' },
+                                { text: 'smartFill()', link: '/api/smart-row#smartfill' },
+                                { text: 'wasFound()', link: '/api/smart-row#wasfound' }
+                            ]
+                        },
+                        {
+                            text: 'SmartRowArray',
+                            link: '/api/smart-row-array'
+                        },
+                        {
+                            text: 'Strategies',
+                            link: '/api/strategies',
+                            collapsed: false,
+                            items: [
+                                { text: 'Pagination', link: '/api/strategies#pagination-strategies' },
+                                { text: 'Sorting', link: '/api/strategies#sorting-strategies' },
+                                { text: 'Fill', link: '/api/strategies#fill-strategy' },
+                                { text: 'Header', link: '/api/strategies#header-strategy' },
+                                { text: 'Cell locator', link: '/api/strategies#cell-locator-strategy' },
+                                { text: 'Viewport', link: '/api/strategies#viewport-strategy' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            '/advanced/': [
+                {
+                    text: 'Advanced',
+                    items: [
+                        { text: 'Custom Resolution', link: '/advanced/custom-resolution' },
+                        { text: 'TypeScript Tips', link: '/advanced/typescript' },
+                        { text: 'Custom Strategies', link: '/advanced/custom-strategies' },
+                        { text: 'Performance Tips', link: '/advanced/performance' },
+                        { text: 'Preset Development', link: '/PRESET_DEVELOPMENT' },
+                        { text: 'Preset Template', link: '/PRESET_TEMPLATE' }
+                    ]
+                }
+            ],
+            '/PRESET_DEVELOPMENT': presetSidebar,
+            '/PRESET_TEMPLATE': presetSidebar,
+            '/troubleshooting': [
+                {
+                    text: 'Help',
+                    items: [
+                        { text: 'Troubleshooting', link: '/troubleshooting' }
+                    ]
+                }
+            ]
+        },
 
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/rickcedwhat/playwright-smart-table' }
-    ],
+        socialLinks: [
+            { icon: 'github', link: 'https://github.com/rickcedwhat/playwright-smart-table' }
+        ],
 
-    search: {
-      provider: 'local'
+        search: {
+            provider: 'local'
+        }
     }
-  }
 })

docs/.vitepress/theme/components/ConfigSwatch.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{
+  label: string
+  code: string
+}>()
+
+const open = ref(false)
+</script>
+
+<template>
+  <div class="cs" :class="{ 'cs--open': open }">
+    <button class="cs-toggle" @click="open = !open" :aria-expanded="open">
+      <span class="cs-icon" aria-hidden="true">{{ open ? '▾' : '▸' }}</span>
+      <span class="cs-label">{{ label }}</span>
+      <span class="cs-tag">config</span>
+    </button>
+    <transition name="cs-slide">
+      <div v-if="open" class="cs-body">
+        <pre class="cs-pre"><code>{{ code }}</code></pre>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.cs {
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  overflow: hidden;
+  margin: 10px 0;
+  background: var(--vp-c-bg-soft);
+  transition: border-color 0.2s;
+}
+.cs--open { border-color: color-mix(in srgb, var(--vp-c-brand-1) 45%, var(--vp-c-divider)); }
+
+.cs-toggle {
+  width: 100%;
+  display: flex; align-items: center; gap: 8px;
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  color: var(--vp-c-text-1);
+  transition: background 0.15s;
+}
+.cs-toggle:hover { background: color-mix(in srgb, var(--vp-c-brand-1) 5%, transparent); }
+
+.cs-icon {
+  font-size: 0.72rem; color: var(--vp-c-brand-1);
+  width: 12px; flex-shrink: 0;
+  transition: transform 0.15s;
+}
+.cs-label {
+  font-size: 0.76rem; font-weight: 600;
+  color: var(--vp-c-text-1);
+  flex: 1;
+}
+.cs-tag {
+  font-size: 0.60rem; font-weight: 700; text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 1px 6px; border-radius: 4px;
+  background: color-mix(in srgb, var(--vp-c-brand-1) 12%, var(--vp-c-bg));
+  color: var(--vp-c-brand-1);
+  border: 1px solid color-mix(in srgb, var(--vp-c-brand-1) 28%, transparent);
+  flex-shrink: 0;
+}
+
+.cs-body { border-top: 1px solid var(--vp-c-divider); }
+.cs-pre {
+  margin: 0;
+  padding: 12px 16px;
+  background: #1e1e1e;
+  color: #d4d4d4;
+  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
+  font-size: 0.73rem;
+  line-height: 1.55;
+  overflow-x: auto;
+  white-space: pre;
+}
+
+/* Slide transition */
+.cs-slide-enter-active { transition: opacity 0.18s ease, transform 0.18s ease; }
+.cs-slide-leave-active { transition: opacity 0.12s ease; }
+.cs-slide-enter-from  { opacity: 0; transform: translateY(-4px); }
+.cs-slide-leave-to    { opacity: 0; }
+</style>

docs/.vitepress/theme/components/MethodBadge.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+defineProps<{ type: 'async' | 'sync' }>()
+</script>
+
+<template>
+  <span class="mb" :class="`mb--${type}`">{{ type }}</span>
+</template>
+
+<style scoped>
+.mb {
+  display: inline-block;
+  font-size: 0.63rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  padding: 1px 6px;
+  border-radius: 4px;
+  vertical-align: middle;
+  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
+  line-height: 1.7;
+  position: relative;
+  top: -1px;
+  white-space: nowrap;
+  user-select: none;
+}
+.mb--async {
+  background: color-mix(in srgb, #c586c0 14%, var(--vp-c-bg-soft));
+  color: #c586c0;
+  border: 1px solid color-mix(in srgb, #c586c0 32%, transparent);
+}
+.mb--sync {
+  background: color-mix(in srgb, #9cdcfe 12%, var(--vp-c-bg-soft));
+  color: #569cd6;
+  border: 1px solid color-mix(in srgb, #569cd6 28%, transparent);
+}
+</style>