mirror of
https://github.com/CopilotKit/CopilotKit.git
synced 2026-09-14 16:26:20 +08:00
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:
+1
-1
@@ -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";
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user