fix: apply a2ui-root Strict Mode fix to example apps

Follow-up to #3607 — the same problematic `import { v0_8 } from "@a2ui/lit"`
pattern existed in 4 example files. Switch to `@a2ui/lit/0.8` subpath for value
imports and remove an unused v0_8 import. Also broaden the lint rule glob to
cover `examples/` and prevent regression.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Maxim
2026-04-03 20:31:58 +02:00
parent c2e9eedea6
commit 2fb966bd68
5 changed files with 49 additions and 50 deletions
+1 -1
View File
@@ -15,7 +15,7 @@
},
"overrides": [
{
"files": ["packages/**/*.{ts,tsx}"],
"files": ["packages/**/*.{ts,tsx}", "examples/**/*.{ts,tsx}"],
"rules": {
"no-restricted-imports": [
"error",
@@ -1,7 +1,6 @@
"use client";
import { useEffect, useState } from "react";
import { v0_8 } from "@a2ui/lit";
import * as UI from "@a2ui/lit/ui";
type Status = "pending" | "success" | "failure";
+17 -17
View File
@@ -14,7 +14,7 @@
limitations under the License.
*/
import { v0_8 } from "@a2ui/lit";
import { Styles, type Types } from "@a2ui/lit/0.8";
/** Elements */
@@ -169,29 +169,29 @@ 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 h4Light = v0_8.Styles.merge(h4, { "color-c-n5": true });
const h5Light = v0_8.Styles.merge(h5, { "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 h4Light = Styles.merge(h4, { "color-c-n5": true });
const h5Light = Styles.merge(h5, { "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: {
"--n-35": "var(--n-100)",
@@ -1,4 +1,4 @@
import { v0_8 } from "@a2ui/lit";
import { Styles, type Types } from "@a2ui/lit/0.8";
/** Elements */
@@ -153,29 +153,29 @@ 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 h4Light = v0_8.Styles.merge(h4, { "color-c-n5": true });
const h5Light = v0_8.Styles.merge(h5, { "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 h4Light = Styles.merge(h4, { "color-c-n5": true });
const h5Light = Styles.merge(h5, { "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: {
"--n-35": "var(--n-100)",
@@ -5,7 +5,7 @@
* Used by createA2UIMessageRenderer for rendering A2UI components.
*/
import { v0_8 } from "@a2ui/lit";
import { Styles, type Types } from "@a2ui/lit/0.8";
// Base element styles
const a = {
@@ -116,21 +116,21 @@ const textarea = {
};
// Light theme variants for better text visibility
const aLight = v0_8.Styles.merge(a, { "color-c-n5": true });
const bodyLight = v0_8.Styles.merge(body, { "color-c-n5": true });
const buttonLight = v0_8.Styles.merge(button, { "color-c-n5": 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 h4Light = v0_8.Styles.merge(h4, { "color-c-n5": true });
const h5Light = v0_8.Styles.merge(h5, { "color-c-n5": true });
const inputLight = v0_8.Styles.merge(input, { "color-c-n5": true });
const pLight = v0_8.Styles.merge(p, { "color-c-n35": true });
const preLight = v0_8.Styles.merge(pre, { "color-c-n5": true });
const textareaLight = v0_8.Styles.merge(textarea, { "color-c-n5": true });
const aLight = Styles.merge(a, { "color-c-n5": true });
const bodyLight = Styles.merge(body, { "color-c-n5": true });
const buttonLight = Styles.merge(button, { "color-c-n5": 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 h4Light = Styles.merge(h4, { "color-c-n5": true });
const h5Light = Styles.merge(h5, { "color-c-n5": true });
const inputLight = Styles.merge(input, { "color-c-n5": true });
const pLight = Styles.merge(p, { "color-c-n35": true });
const preLight = Styles.merge(pre, { "color-c-n5": true });
const textareaLight = Styles.merge(textarea, { "color-c-n5": true });
// Theme export using v0.8 structure
export const a2uiTheme: v0_8.Types.Theme = {
export const a2uiTheme: Types.Theme = {
additionalStyles: {
Button: {
"--n-35": "var(--n-100)", // Ensures hover state also uses white text