fix: resolve a2ui-root Strict Mode error (CopilotKit#3607)

## Summary

Fixes the `NotSupportedError: Failed to execute 'define' on
'CustomElementRegistry': the name "a2ui-root" has already been used`
error reported by a customer under React Strict Mode.

### Root cause

`@a2ui/lit` registers the `a2ui-root` custom element via Lit's
`@customElement` decorator as a side effect when its UI module loads.
Several files in `@copilotkit/a2ui-renderer` used value imports (`import
{ v0_8 } from "@a2ui/lit"`) when only types were needed — this pulled in
the full module tree including the custom element registration. React
Strict Mode double-mounts, and since `customElements.define()` is
irreversible, the second mount throws.

### Fix

- Changed to `import type` where only types are needed (erased at
compile time, no side effects)
- Switched remaining value imports to the narrower `@a2ui/lit/0.8`
subpath (core.js only, no UI/custom element registration)

Credit to Alem for identifying React Strict Mode as the likely cause.

## Test plan

- [x] All pre-commit hooks pass (tests, publint, attw)
- [ ] Verify no `a2ui-root` error in React Strict Mode

https://claude.ai/code/session_01CUPfWAF8EmLieEasaepAgp

Author: marthakelly

.oxlintrc.json

@@ -10,9 +10,27 @@
     "react/react-in-jsx-scope": "off",
     "import/no-unassigned-import": "off",
     "unicorn/no-array-sort": "off",
-    "copilotkit/require-cpk-prefix": "off"
+    "copilotkit/require-cpk-prefix": "off",
+    "no-restricted-imports": "off"
   },
   "overrides": [
+    {
+      "files": ["packages/**/*.{ts,tsx}"],
+      "rules": {
+        "no-restricted-imports": [
+          "error",
+          {
+            "paths": [
+              {
+                "name": "@a2ui/lit",
+                "message": "Do not use value imports from '@a2ui/lit' — it registers custom elements as a side effect, which breaks React Strict Mode. Use `import type` for types, or import from '@a2ui/lit/0.8' for value access (core only, no UI side effects).",
+                "allowTypeImports": true
+              }
+            ]
+          }
+        ]
+      }
+    },
     {
       "files": ["packages/react-ui/src/**/*.{ts,tsx}"],
       "rules": {

packages/a2ui-renderer/src/A2UIViewer.tsx

@@ -2,7 +2,7 @@
 
 import React, { useId, useMemo, useEffect, useRef } from "react";
 import type { Types } from "@a2ui/lit/0.8";
-import { v0_8 } from "@a2ui/lit";
+import type { v0_8 } from "@a2ui/lit";
 import {
   A2UIProvider,
   useA2UIActions,

packages/a2ui-renderer/src/a2ui-types.ts

@@ -1,6 +1,5 @@
-import { v0_8 } from "@a2ui/lit";
+import { Data, type Types } from "@a2ui/lit/0.8";
 
-export type Theme = v0_8.Types.Theme;
-export type A2UIClientEventMessage = v0_8.Types.A2UIClientEventMessage;
-export const DEFAULT_SURFACE_ID =
-  v0_8.Data.A2uiMessageProcessor.DEFAULT_SURFACE_ID;
+export type Theme = Types.Theme;
+export type A2UIClientEventMessage = Types.A2UIClientEventMessage;
+export const DEFAULT_SURFACE_ID = Data.A2uiMessageProcessor.DEFAULT_SURFACE_ID;

packages/a2ui-renderer/src/index.ts

@@ -22,7 +22,7 @@ export type { A2UIViewerProps } from "./A2UIViewer.js";
 export { theme as viewerTheme } from "./theme/viewer-theme.js";
 
 // Re-export v0_8 types namespace for consumers
-import { v0_8 } from "@a2ui/lit";
+import type { v0_8 } from "@a2ui/lit";
 export type ComponentInstance = v0_8.Types.ComponentInstance;
 export type UserAction = v0_8.Types.UserAction;
 export type Action = v0_8.Types.Action;

packages/a2ui-renderer/src/theme/viewer-theme.ts

@@ -14,7 +14,7 @@
  limitations under the License.
  */
 
-import { v0_8 } from "@a2ui/lit";
+import { Styles, type Types } from "@a2ui/lit/0.8";
 
 /** Elements */
 
@@ -159,27 +159,27 @@ const video = {
   "layout-el-cv": true,
 };
 
-const aLight = v0_8.Styles.merge(a, { "color-c-n5": true });
-const inputLight = v0_8.Styles.merge(input, { "color-c-n5": true });
-const textareaLight = v0_8.Styles.merge(textarea, { "color-c-n5": true });
-const buttonLight = v0_8.Styles.merge(button, { "color-c-n100": true });
-const h1Light = v0_8.Styles.merge(h1, { "color-c-n5": true });
-const h2Light = v0_8.Styles.merge(h2, { "color-c-n5": true });
-const h3Light = v0_8.Styles.merge(h3, { "color-c-n5": true });
-const bodyLight = v0_8.Styles.merge(body, { "color-c-n5": true });
-const pLight = v0_8.Styles.merge(p, { "color-c-n35": true });
-const preLight = v0_8.Styles.merge(pre, { "color-c-n35": true });
-const orderedListLight = v0_8.Styles.merge(orderedList, {
+const aLight = Styles.merge(a, { "color-c-n5": true });
+const inputLight = Styles.merge(input, { "color-c-n5": true });
+const textareaLight = Styles.merge(textarea, { "color-c-n5": true });
+const buttonLight = Styles.merge(button, { "color-c-n100": true });
+const h1Light = Styles.merge(h1, { "color-c-n5": true });
+const h2Light = Styles.merge(h2, { "color-c-n5": true });
+const h3Light = Styles.merge(h3, { "color-c-n5": true });
+const bodyLight = Styles.merge(body, { "color-c-n5": true });
+const pLight = Styles.merge(p, { "color-c-n35": true });
+const preLight = Styles.merge(pre, { "color-c-n35": true });
+const orderedListLight = Styles.merge(orderedList, {
   "color-c-n35": true,
 });
-const unorderedListLight = v0_8.Styles.merge(unorderedList, {
+const unorderedListLight = Styles.merge(unorderedList, {
   "color-c-n35": true,
 });
-const listItemLight = v0_8.Styles.merge(listItem, {
+const listItemLight = Styles.merge(listItem, {
   "color-c-n35": true,
 });
 
-export const theme: v0_8.Types.Theme = {
+export const theme: Types.Theme = {
   additionalStyles: {
     Button: {
       background: "var(--primary, oklch(0.205 0 0))",