From 2777fff4336b4203060332697480020a44848955 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Sat, 8 Aug 2026 17:17:40 +0200
Subject: [PATCH] Clear remaining astro check hints in shared, docs, and
 screenshots (#2837)

---
 docs/env.d.ts                               |  7 +++++++
 screenshots/pages/social-icons.astro        |  3 ---
 screenshots/tsconfig.json                   |  2 +-
 shared/components/js/TablerList.astro       |  2 +-
 shared/components/marketing/hero/Side.astro |  3 ++-
 shared/env.d.ts                             | 10 ++++++++++
 shared/layouts/RedirectLayout.astro         |  2 +-
 shared/ui/AdvancedTable.astro               | 22 +++++++++++----------
 shared/ui/Chart.astro                       |  2 +-
 shared/ui/ChartRadial.astro                 |  2 +-
 shared/ui/ChartSparkline.astro              |  2 +-
 shared/ui/Colorpicker.astro                 |  2 +-
 shared/ui/Datepicker.astro                  |  2 +-
 shared/ui/Dropzone.astro                    |  2 +-
 shared/ui/Fullcalendar.astro                |  2 +-
 shared/ui/InlinePlayer.astro                |  2 +-
 shared/ui/Map.astro                         |  2 +-
 shared/ui/MapVector.astro                   |  2 +-
 shared/ui/Range.astro                       |  2 +-
 shared/ui/Rating.astro                      |  2 +-
 shared/ui/Select.astro                      |  2 +-
 shared/ui/Wysiwyg.astro                     |  2 +-
 22 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/docs/env.d.ts b/docs/env.d.ts
index f964fe0cf..098c13ca1 100644
--- a/docs/env.d.ts
+++ b/docs/env.d.ts
@@ -1 +1,8 @@
 /// <reference types="astro/client" />
+
+// clipboard.js, loaded via a page lib (libs.json) as a classic <script> global, not an
+// npm package — declared ambiently so `astro check` can resolve it in DocsLayout's copy script.
+declare var ClipboardJS: new (
+  selector: Element,
+  options: Record<string, unknown>
+) => { on(event: string, callback: (e: { clearSelection(): void; trigger: HTMLElement }) => void): void }
diff --git a/screenshots/pages/social-icons.astro b/screenshots/pages/social-icons.astro
index 2d4bbc29e..cea99664a 100644
--- a/screenshots/pages/social-icons.astro
+++ b/screenshots/pages/social-icons.astro
@@ -4,9 +4,6 @@
 // The grid itself is built from scratch here (not preview's .demo-icons-list)
 // since that class lives in preview/scss/demo.scss, which this app never loads.
 import ScreenshotLayout from '../layouts/ScreenshotLayout.astro'
-import Card from '@ui/Card.astro'
-import CardHeader from '@ui/CardHeader.astro'
-import CardBody from '@ui/CardBody.astro'
 import socials from '@data/socials.json'
 ---
 
diff --git a/screenshots/tsconfig.json b/screenshots/tsconfig.json
index cb68b41ea..a4549949e 100644
--- a/screenshots/tsconfig.json
+++ b/screenshots/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "astro/tsconfigs/strict",
+  "extends": "astro/tsconfigs/strictest",
   "include": [".astro/types.d.ts", "**/*"],
   "exclude": ["dist", "public"],
   "compilerOptions": {
diff --git a/shared/components/js/TablerList.astro b/shared/components/js/TablerList.astro
index b061ea2e9..542c59c23 100644
--- a/shared/components/js/TablerList.astro
+++ b/shared/components/js/TablerList.astro
@@ -13,7 +13,7 @@ const listId = `table-${id}`
 
 <CaptureScript>
   <!-- BEGIN TABLER LIST -->
-  <script define:vars={{ listId, valueNames }}>
+  <script is:inline define:vars={{ listId, valueNames }}>
     function initTablerList() {
       window.tabler_list ??= {}
       window.tabler_list[listId] = new List(listId, {
diff --git a/shared/components/marketing/hero/Side.astro b/shared/components/marketing/hero/Side.astro
index 3d22d08de..ca6f09a18 100644
--- a/shared/components/marketing/hero/Side.astro
+++ b/shared/components/marketing/hero/Side.astro
@@ -55,7 +55,8 @@ const typedId = 'typed'
 <!-- END HERO -->
 <CaptureScript>
   <!-- BEGIN TYPED -->
-  <script define:vars={{ typedId, strings }}>
+  <script is:inline define:vars={{ typedId, strings }}>
+    // @ts-nocheck — typedId is used in a template literal, which the type checker resolves independently of define:vars.
     function initTyped() {
       const typed = new Typed(`#${typedId}`, {
         strings,
diff --git a/shared/env.d.ts b/shared/env.d.ts
index f964fe0cf..ec9d44a79 100644
--- a/shared/env.d.ts
+++ b/shared/env.d.ts
@@ -1 +1,11 @@
 /// <reference types="astro/client" />
+
+// Loaded via page libs (libs.json) as classic <script> globals, not npm packages —
+// declared ambiently so `astro check` can resolve them in the demo init scripts.
+
+/** list.js, used by TablerList.astro / AdvancedTable.astro */
+declare var List: new (idOrElement: string | Element, options: Record<string, unknown>) => { search(query: string): void; page: number; update(): void }
+/** typed.js, used by marketing/hero/Side.astro */
+declare var Typed: new (selector: string, options: Record<string, unknown>) => unknown
+/** tom-select, used by ui/Select.astro / FormElements1.astro */
+declare var TomSelect: (new (element: Element | null, options: Record<string, unknown>) => unknown) | undefined
diff --git a/shared/layouts/RedirectLayout.astro b/shared/layouts/RedirectLayout.astro
index 70cab6c14..f94b7ba97 100644
--- a/shared/layouts/RedirectLayout.astro
+++ b/shared/layouts/RedirectLayout.astro
@@ -24,7 +24,7 @@ const target = isAbsolute ? url : `${base}${url}`
   <!-- END META -->
   <noscript><a href={target}>Click here if you are not redirected.</a></noscript>
   <!-- BEGIN REDIRECT -->
-  <script define:vars={{ target }}>
+  <script is:inline define:vars={{ target }}>
     location = target
   </script>
   <!-- END REDIRECT -->
diff --git a/shared/ui/AdvancedTable.astro b/shared/ui/AdvancedTable.astro
index 402e2383f..249cf8d21 100644
--- a/shared/ui/AdvancedTable.astro
+++ b/shared/ui/AdvancedTable.astro
@@ -47,6 +47,7 @@ const rows = (people as Person[]).map((person, i) => {
 })
 
 const perPageDefault = requireIndex(perPage, 1)
+const sortKeys = headers.map((header) => header['data-sort'])
 ---
 
 <div class="card">
@@ -152,7 +153,7 @@ const perPageDefault = requireIndex(perPage, 1)
           <div class="dropdown-menu">
             {
               perPage.map((record) => (
-                <button type="button" class="dropdown-item" onclick="setPageListItems(event)" data-value={record}>
+                <button type="button" class="dropdown-item" onclick="setPageListItems(this)" data-value={record}>
                   {record} records
                 </button>
               ))
@@ -168,24 +169,24 @@ const perPageDefault = requireIndex(perPage, 1)
 
 <CaptureScript>
   <!-- BEGIN ADVANCED TABLE -->
-  <script define:vars={{ tableId, advancedTable, perPageDefault }}>
+  <script is:inline define:vars={{ tableId, sortKeys, perPageDefault }}>
     // Astro wraps define:vars scripts in an IIFE, so this needs an explicit window
-    // assignment to stay reachable from the onclick="setPageListItems(event)" markup below.
+    // assignment to stay reachable from the onclick="setPageListItems(this)" markup below.
     // Each AdvancedTable instance redefines this identically, so it stays safe to share:
     // the table id is resolved from the clicked element instead of being closed over.
-    window.setPageListItems = function setPageListItems(e) {
-      const id = e.target.closest('[data-table-id]')?.dataset.tableId
+    window.setPageListItems = function setPageListItems(el) {
+      const id = el.closest('[data-table-id]')?.dataset.tableId
       if (!id || !window.tabler_list?.[id]) return
 
-      window.tabler_list[id].page = parseInt(e.target.dataset.value)
+      window.tabler_list[id].page = parseInt(el.dataset.value)
       window.tabler_list[id].update()
 
-      document.querySelector(`#${id}-page-count`).innerHTML = e.target.dataset.value
+      document.querySelector(`#${id}-page-count`).innerHTML = el.dataset.value
     }
 
     function initAdvancedTable() {
       window.tabler_list ??= {}
-      const list = (window.tabler_list[tableId] = new List(tableId, {
+      window.tabler_list[tableId] = new List(tableId, {
         sortClass: 'table-sort',
         listClass: 'table-tbody',
         page: parseInt(perPageDefault),
@@ -196,8 +197,9 @@ const perPageDefault = requireIndex(perPage, 1)
           left: 0,
           right: 0,
         },
-        valueNames: advancedTable.headers.map((header) => header['data-sort']),
-      }))
+        valueNames: sortKeys,
+      })
+      const list = window.tabler_list[tableId]
 
       const searchInput = document.querySelector(`#${tableId}-search`)
       searchInput?.addEventListener('input', () => list.search(searchInput.value))
diff --git a/shared/ui/Chart.astro b/shared/ui/Chart.astro
index 0ccbc893d..12f1de39d 100644
--- a/shared/ui/Chart.astro
+++ b/shared/ui/Chart.astro
@@ -48,7 +48,7 @@ const elementId = `chart-${id}`;
 			<Fragment set:html={style} />
 			<CaptureScript>
 				<!-- BEGIN CHART -->
-				<script define:vars={{ chartKey, elementId, config, xFormatterExpr }}>
+				<script is:inline define:vars={{ chartKey, elementId, config, xFormatterExpr }}>
 					window.tabler_chart ??= {};
 
 					// Heatmap shades each cell by computing off the literal base color in JS
diff --git a/shared/ui/ChartRadial.astro b/shared/ui/ChartRadial.astro
index 3722d501c..23a7becad 100644
--- a/shared/ui/ChartRadial.astro
+++ b/shared/ui/ChartRadial.astro
@@ -18,7 +18,7 @@ const fixedTitle = title.toUpperCase()
 <div id={chartId} class={`position-relative ${className}`} role="img" aria-label={title}></div>
 <CaptureScript>
   <!-- BEGIN CHART RADIAL -->
-  <script define:vars={{ chartId, height, value, fixedTitle }}>
+  <script is:inline define:vars={{ chartId, height, value, fixedTitle }}>
     function initRadialChart() {
       window.tabler_chart ??= {}
 
diff --git a/shared/ui/ChartSparkline.astro b/shared/ui/ChartSparkline.astro
index e9aeb98a4..5c3dde07f 100644
--- a/shared/ui/ChartSparkline.astro
+++ b/shared/ui/ChartSparkline.astro
@@ -92,7 +92,7 @@ const chartOptions = id
 	id && (
 		<CaptureScript>
 			<!-- BEGIN CHART SPARKLINE -->
-			<script define:vars={{ chartKey, chartOptions }}>
+			<script is:inline define:vars={{ chartKey, chartOptions }}>
 				function initSparkline() {
 					window.tabler_chart ??= {};
 					window.ApexCharts && (window.tabler_chart[chartKey] = new ApexCharts(document.getElementById(chartKey), chartOptions)).render();
diff --git a/shared/ui/Colorpicker.astro b/shared/ui/Colorpicker.astro
index 68815177a..2019bd537 100644
--- a/shared/ui/Colorpicker.astro
+++ b/shared/ui/Colorpicker.astro
@@ -25,7 +25,7 @@ const colorpickerSelector = `#colorpicker-${id}`
 <input type="text" class={`form-control d-block${className ? ` ${className}` : ''}`} id={colorpickerId} value={value} aria-label={ariaLabel ?? 'Color value'} />
 <CaptureScript>
   <!-- BEGIN COLORPICKER -->
-  <script define:vars={{ colorpickerId, colorpickerSelector, alpha, format, swatchesOnly, swatchProps }}>
+  <script is:inline define:vars={{ colorpickerId, colorpickerSelector, alpha, format, swatchesOnly, swatchProps }}>
     function initColorpicker() {
       window.tabler_colorpicker ??= {}
 
diff --git a/shared/ui/Datepicker.astro b/shared/ui/Datepicker.astro
index fb157e3d7..2d4dbc790 100644
--- a/shared/ui/Datepicker.astro
+++ b/shared/ui/Datepicker.astro
@@ -66,7 +66,7 @@ const datepickerId = id ? `datepicker-${id}` : undefined;
 	id && (
 		<CaptureScript>
 			<!-- BEGIN DATEPICKER -->
-			<script define:vars={{ datepickerId, chevronLeft, chevronRight, inline }}>
+			<script is:inline define:vars={{ datepickerId, chevronLeft, chevronRight, inline }}>
 				function initDatepicker() {
 					window.tabler_datepicker ??= {};
 
diff --git a/shared/ui/Dropzone.astro b/shared/ui/Dropzone.astro
index a7419934b..e804ea37d 100644
--- a/shared/ui/Dropzone.astro
+++ b/shared/ui/Dropzone.astro
@@ -32,7 +32,7 @@ const fileInputId = `${dropzoneId}-file`
 </form>
 <CaptureScript>
   <!-- BEGIN DROPZONE -->
-  <script define:vars={{ dropzoneId, dropzoneSelector }}>
+  <script is:inline define:vars={{ dropzoneId, dropzoneSelector }}>
     window.tabler_dropzone ??= {}
 
     function initDropzone() {
diff --git a/shared/ui/Fullcalendar.astro b/shared/ui/Fullcalendar.astro
index 5f329e8ac..749a05f55 100644
--- a/shared/ui/Fullcalendar.astro
+++ b/shared/ui/Fullcalendar.astro
@@ -38,7 +38,7 @@ const sampleEventData = sampleEvents
 <div id={calendarId}></div>
 <CaptureScript>
   <!-- BEGIN FULLCALENDAR -->
-  <script define:vars={{ calendarId, sampleEventData }}>
+  <script is:inline define:vars={{ calendarId, sampleEventData }}>
     function initCalendar() {
       const calendarEl = document.getElementById(calendarId)
       const currentYear = new Date().getFullYear()
diff --git a/shared/ui/InlinePlayer.astro b/shared/ui/InlinePlayer.astro
index 9760e780d..2e3d42c49 100644
--- a/shared/ui/InlinePlayer.astro
+++ b/shared/ui/InlinePlayer.astro
@@ -23,7 +23,7 @@ const playerSelector = `#player-${id}`;
 	enabled && (
 		<CaptureScript>
 			<!-- BEGIN PLAYER -->
-			<script define:vars={{ playerId, playerSelector }}>
+			<script is:inline define:vars={{ playerId, playerSelector }}>
 				window.tabler_player ??= {};
 
 				function initPlayer() {
diff --git a/shared/ui/Map.astro b/shared/ui/Map.astro
index f2fcf77b1..eef4c3b20 100644
--- a/shared/ui/Map.astro
+++ b/shared/ui/Map.astro
@@ -47,7 +47,7 @@ const ratioClass = data?.ratio ?? ratio ?? '16x9';
 	data && (
 		<CaptureScript>
 			<!-- BEGIN MAP -->
-			<script define:vars={{ mapboxKey: site.mapboxKey, mapContainerId, style, zoom, center, markers }}>
+			<script is:inline define:vars={{ mapboxKey: site.mapboxKey, mapContainerId, style, zoom, center, markers }}>
 				window.tabler_map ??= {};
 
 				function initMap() {
diff --git a/shared/ui/MapVector.astro b/shared/ui/MapVector.astro
index a7cc3aba3..cf55c0ae2 100644
--- a/shared/ui/MapVector.astro
+++ b/shared/ui/MapVector.astro
@@ -109,7 +109,7 @@ const mapOptions = data
 			</div>
 			<CaptureScript>
 				<!-- BEGIN MAP VECTOR -->
-				<script define:vars={{ mapKey, mapSelector, mapName: data.map, mapOptions }}>
+				<script is:inline define:vars={{ mapKey, mapSelector, mapName: data.map, mapOptions }}>
 					window.tabler_map_vector ??= {};
 
 					function createMapVector() {
diff --git a/shared/ui/Range.astro b/shared/ui/Range.astro
index 35953b379..ac8c631a3 100644
--- a/shared/ui/Range.astro
+++ b/shared/ui/Range.astro
@@ -40,7 +40,7 @@ const rangeId = `range-${id}`;
 	id && (
 		<CaptureScript>
 			<!-- BEGIN RANGE -->
-			<script define:vars={{ rangeId, startValue, connectValue, step, min, max }}>
+			<script is:inline define:vars={{ rangeId, startValue, connectValue, step, min, max }}>
 				function initRange() {
 					window.noUiSlider &&
 						noUiSlider.create(document.getElementById(rangeId), {
diff --git a/shared/ui/Rating.astro b/shared/ui/Rating.astro
index a389b3765..21349c32c 100644
--- a/shared/ui/Rating.astro
+++ b/shared/ui/Rating.astro
@@ -35,7 +35,7 @@ const ratingKey = `rating-${id}`
 </select>
 <CaptureScript>
   <!-- BEGIN RATING -->
-  <script define:vars={{ ratingSelector, ratingKey, star }}>
+  <script is:inline define:vars={{ ratingSelector, ratingKey, star }}>
     window.tabler_rating ??= {}
 
     function initRating() {
diff --git a/shared/ui/Select.astro b/shared/ui/Select.astro
index 28e3243ee..d727e90c5 100644
--- a/shared/ui/Select.astro
+++ b/shared/ui/Select.astro
@@ -125,7 +125,7 @@ const selectId = id ? `select-${id}` : undefined;
 	id && (
 		<CaptureScript>
 			<!-- BEGIN SELECT -->
-			<script define:vars={{ selectId, showSearch }}>
+			<script is:inline define:vars={{ selectId, showSearch }}>
 				function initSelect() {
 					window.tabler_select ??= {};
 
diff --git a/shared/ui/Wysiwyg.astro b/shared/ui/Wysiwyg.astro
index e3a5beb23..0d7d9d789 100644
--- a/shared/ui/Wysiwyg.astro
+++ b/shared/ui/Wysiwyg.astro
@@ -13,7 +13,7 @@ const selector = `#hugerte-${id}`
 </form>
 <CaptureScript>
   <!-- BEGIN WYSIWYG -->
-  <script define:vars={{ selector }}>
+  <script is:inline define:vars={{ selector }}>
     function initWysiwyg() {
       const options = {
         selector,