web: enable custom-element-manifest and DOM/JS integration checking. (#10177)

* web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.

* web: add more linting

* A reliable test for the extra code needed in analyzer, passing shellcheck

* web: re-enable custom-element-manifest and enable component checking in Typescript

This commit includes a monkeypatch to allow custom-element-manifest (CEM) to work correctly again
despite our rich collection of mixins, reactive controllers, symbol-oriented event handlers, and the
like. With that monkeypatch in place, we can now create the CEM manifest file and then exploit it so
that IDEs and the Typescript compilation pass can tell when a component is being used incorrectly;
when the wrong types are being passed to it, or when a required attribute is not initialized.

* Added building the manifest to the build process, rather than storing it.  It is not appreciably slow.

web/package.json

@@ -8,12 +8,13 @@
         "build-locales": "node scripts/build-locales.mjs",
         "build-locales:build": "lit-localize build",
         "build-locales:repair": "prettier --write ./src/locale-codes.ts",
+        "build:manifest": "custom-elements-manifest analyze --litelement --globs 'src/**/*.ts' --exclude 'src/**/*.stories.ts' --exclude 'src/**/*.tests.ts'",
         "esbuild:build": "node build.mjs",
         "esbuild:build-proxy": "node build.mjs --proxy",
         "esbuild:watch": "node build.mjs --watch",
-        "build": "run-s build-locales esbuild:build",
+        "build": "run-s build-locales build:manifest  esbuild:build",
         "build-proxy": "run-s build-locales esbuild:build-proxy",
-        "watch": "run-s build-locales esbuild:watch",
+        "watch": "run-s build-locales build:manifest esbuild:watch",
         "lint": "cross-env NODE_OPTIONS='--max_old_space_size=65536' eslint . --max-warnings 0 --fix",
         "lint:lockfile": "lockfile-lint --path package.json --type npm --allowed-hosts npm --validate-https",
         "lint:precommit": "bun scripts/eslint-precommit.mjs",
@@ -81,6 +82,9 @@
         "@babel/plugin-transform-runtime": "^7.24.7",
         "@babel/preset-env": "^7.24.8",
         "@babel/preset-typescript": "^7.24.7",
+        "@changesets/cli": "^2.27.5",
+        "@custom-elements-manifest/analyzer": "^0.10.2",
+        "@genesiscommunitysuccess/custom-elements-lsp": "^5.0.3",
         "@hcaptcha/types": "^1.0.3",
         "@jeysal/storybook-addon-css-user-preferences": "^0.2.0",
         "@lit/localize-tools": "^0.7.2",

web/scripts/patch-analyser.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+
+TARGET="./node_modules/@custom-elements-manifest/analyzer/src/features/analyse-phase/creators/handlers.js"
+
+# If the second question mark is not there in this test, put it there. The flags to grep ensure it
+# will behave correctly on both MacOS and Linux by requiring it to use only the POSIX "basic"
+# regular expression behavior.
+#
+
+if ! grep -GL 'node\.name?\.text?\.startsWith' "$TARGET" > /dev/null 2>&1; then
+patch --forward -V none --no-backup-if-mismatch -p0 $TARGET <<EOF
+--- a/packages/analyzer/src/features/analyse-phase/creators/handlers.js
++++ b/packages/analyzer/src/features/analyse-phase/creators/handlers.js
+@@ -34,7 +34,7 @@ export function handleModifiers(doc, node) {
+     }
+   });
+ 
+-  if (node.name?.text.startsWith('#')) {
++  if (node.name?.text?.startsWith('#')) {
+     doc.privacy = 'private';
+   }
+EOF
+fi

web/tsconfig.base.json

@@ -48,6 +48,13 @@
                     "no-unknown-property": "off",
                     "no-unknown-attribute": "off"
                 }
+            },
+            {
+                "name": "@genesiscommunitysuccess/custom-elements-lsp",
+                "designSystemPrefix": "ak-",
+                "parser": {
+                    "timeout": 2000
+                }
             }
         ]
     }