feat(a2ui-playground): add loading in examples

.changeset/eager-days-try.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/genui": patch
+---
+
+fix: resolve import error

packages/genui/a2ui-playground/lynx-src/a2ui/App.tsx

@@ -620,7 +620,12 @@ export function App() {
             {!isInstantPreview && store === null && error === ''
               ? (
                 <view className='a2ui-loadingOverlay'>
-                  <text className='a2ui-loadingText'>loading ...</text>
+                  <text className='a2ui-loadingTitle'>loading ...</text>
+                  <view className='a2ui-loadingDots'>
+                    <view className='a2ui-loadingDot' />
+                    <view className='a2ui-loadingDot a2ui-loadingDotDelay1' />
+                    <view className='a2ui-loadingDot a2ui-loadingDotDelay2' />
+                  </view>
                 </view>
               )
               : null}

packages/genui/a2ui-playground/lynx-src/a2ui/index.css

@@ -38,26 +38,81 @@
 
 .a2ui-loadingOverlay {
   position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
   display: flex;
+  flex-direction: column;
   align-items: center;
-  display: flex;
   justify-content: center;
+  gap: 12px;
+  padding: 16px;
+  box-sizing: border-box;
+  background-color: var(--canvas);
+  color: var(--content-muted);
+  z-index: 10;
 }
 
-.a2ui-loadingText {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 120px;
-  min-height: 44px;
-  padding: 0 18px;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  background: var(--neutral-film);
+.a2ui-loadingTitle {
   color: var(--content-muted);
   font-size: 14px;
-  font-weight: 600;
-  line-height: 1.4;
+  font-weight: 500;
+  line-height: 1.35;
+  text-align: center;
+  max-width: 220px;
+  animation-name: a2ui-loading-pulse;
+  animation-duration: 1.8s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+.a2ui-loadingDots {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  align-items: center;
+  justify-content: center;
+}
+
+.a2ui-loadingDot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background-color: var(--content-muted);
+  opacity: 0.35;
+  animation-name: a2ui-loading-dot;
+  animation-duration: 1.2s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+.a2ui-loadingDotDelay1 {
+  animation-delay: 0.15s;
+}
+
+.a2ui-loadingDotDelay2 {
+  animation-delay: 0.3s;
+}
+
+@keyframes a2ui-loading-pulse {
+  0%, 100% {
+    opacity: 0.55;
+  }
+  50% {
+    opacity: 0.85;
+  }
+}
+
+@keyframes a2ui-loading-dot {
+  0%, 100% {
+    transform: translateY(0);
+    opacity: 0.25;
+  }
+  50% {
+    transform: translateY(-2px);
+    opacity: 0.9;
+  }
 }
 
 /* Override A2UI tokens with Luna tokens for the playground preview. */

packages/genui/a2ui-playground/src/mock/basic/citywalk-list.json

@@ -22,9 +22,8 @@
         },
         {
           "id": "answer",
-          "component": "Text",
-          "variant": "body",
-          "text": "Generating..."
+          "component": "Loading",
+          "variant": "block"
         },
         {
           "id": "divider",

packages/genui/a2ui-playground/src/mock/basic/fridge-search.json

@@ -29,9 +29,8 @@
         },
         {
           "id": "statusBarText",
-          "component": "Text",
-          "variant": "body",
-          "text": "Searching..."
+          "component": "Loading",
+          "variant": "inline"
         },
         {
           "id": "productList",
@@ -101,7 +100,7 @@
             "product-1-store"
           ]
         },
-        { "id": "product-1-title", "component": "Text", "variant": "body", "text": "Loading..." },
+        { "id": "product-1-title", "component": "Loading", "variant": "inline" },
         { "id": "product-1-price", "component": "Text", "variant": "body", "text": "" },
         { "id": "product-1-promo", "component": "Text", "variant": "caption", "text": "" },
         { "id": "product-1-store", "component": "Text", "variant": "caption", "text": "" },
@@ -186,7 +185,7 @@
             "product-2-store"
           ]
         },
-        { "id": "product-2-title", "component": "Text", "variant": "body", "text": "Loading..." },
+        { "id": "product-2-title", "component": "Loading", "variant": "inline" },
         { "id": "product-2-price", "component": "Text", "variant": "body", "text": "" },
         { "id": "product-2-promo", "component": "Text", "variant": "caption", "text": "" },
         { "id": "product-2-store", "component": "Text", "variant": "caption", "text": "" },
@@ -271,7 +270,7 @@
             "product-3-store"
           ]
         },
-        { "id": "product-3-title", "component": "Text", "variant": "body", "text": "Loading..." },
+        { "id": "product-3-title", "component": "Loading", "variant": "inline" },
         { "id": "product-3-price", "component": "Text", "variant": "body", "text": "" },
         { "id": "product-3-promo", "component": "Text", "variant": "caption", "text": "" },
         { "id": "product-3-store", "component": "Text", "variant": "caption", "text": "" },
@@ -356,7 +355,7 @@
             "product-4-store"
           ]
         },
-        { "id": "product-4-title", "component": "Text", "variant": "body", "text": "Loading..." },
+        { "id": "product-4-title", "component": "Loading", "variant": "inline" },
         { "id": "product-4-price", "component": "Text", "variant": "body", "text": "" },
         { "id": "product-4-promo", "component": "Text", "variant": "caption", "text": "" },
         { "id": "product-4-store", "component": "Text", "variant": "caption", "text": "" },

packages/genui/a2ui-playground/src/mock/basic/hangzhou-weather-trend.json

@@ -28,6 +28,30 @@
           "variant": "body",
           "text": "Temperatures trend upward through the week, with a slight dip on the weekend."
         },
+        {
+          "id": "chart",
+          "component": "Loading",
+          "variant": "block"
+        }
+      ]
+    }
+  },
+  {
+    "updateDataModel": {
+      "surfaceId": "default",
+      "value": {
+        "weather": {
+          "dates": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+          "temperatures": [12, 14, 16, 18, 20, 22, 19],
+          "precipitations": [6, 7, 8, 10, 11, 13, 12]
+        }
+      }
+    }
+  },
+  {
+    "updateComponents": {
+      "surfaceId": "default",
+      "components": [
         {
           "id": "chart",
           "component": "LineChart",
@@ -56,17 +80,5 @@
         }
       ]
     }
-  },
-  {
-    "updateDataModel": {
-      "surfaceId": "default",
-      "value": {
-        "weather": {
-          "dates": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
-          "temperatures": [12, 14, 16, 18, 20, 22, 19],
-          "precipitations": [6, 7, 8, 10, 11, 13, 12]
-        }
-      }
-    }
   }
 ]

packages/genui/a2ui-playground/src/mock/basic/recs.json

@@ -22,9 +22,8 @@
         },
         {
           "id": "answer",
-          "component": "Text",
-          "variant": "body",
-          "text": "Generating..."
+          "component": "Loading",
+          "variant": "block"
         },
         {
           "id": "divider",
@@ -83,9 +82,8 @@
         },
         {
           "id": "recCard-1-text",
-          "component": "Text",
-          "variant": "body",
-          "text": "1. Moonlight Terrace\nFilling in details..."
+          "component": "Loading",
+          "variant": "block"
         }
       ]
     }
@@ -131,9 +129,8 @@
         },
         {
           "id": "recCard-2-text",
-          "component": "Text",
-          "variant": "body",
-          "text": "2. Pinewood Bistro\nFilling in details..."
+          "component": "Loading",
+          "variant": "block"
         }
       ]
     }
@@ -179,9 +176,8 @@
         },
         {
           "id": "recCard-3-text",
-          "component": "Text",
-          "variant": "body",
-          "text": "3. Sea Breeze Kitchen\nFilling in details..."
+          "component": "Loading",
+          "variant": "block"
         }
       ]
     }

packages/genui/a2ui-playground/src/mock/basic/trip-planner.json

@@ -24,9 +24,8 @@
         },
         {
           "id": "summary",
-          "component": "Text",
-          "variant": "body",
-          "text": "Drafting a two-day route..."
+          "component": "Loading",
+          "variant": "block"
         },
         {
           "id": "divider",
@@ -82,7 +81,7 @@
           "children": ["day1-title", "day1-weather"]
         },
         { "id": "day1-title", "component": "Text", "variant": "h4", "text": "Day 1 · East Kyoto" },
-        { "id": "day1-weather", "component": "Text", "variant": "caption", "text": "Preparing..." },
+        { "id": "day1-weather", "component": "Loading", "variant": "inline" },
         {
           "id": "day1-cover",
           "component": "Image",
@@ -132,7 +131,7 @@
           "children": ["d1-stop1-title", "d1-stop1-desc"]
         },
         { "id": "d1-stop1-title", "component": "Text", "variant": "h5", "text": "Kiyomizu-dera" },
-        { "id": "d1-stop1-desc", "component": "Text", "variant": "caption", "text": "Fetching notes..." }
+        { "id": "d1-stop1-desc", "component": "Loading", "variant": "inline" }
       ]
     }
   },

packages/genui/a2ui-playground/src/mock/basic/workout-plan.json

@@ -24,9 +24,8 @@
         },
         {
           "id": "subheader",
-          "component": "Text",
-          "variant": "body",
-          "text": "Generating your plan..."
+          "component": "Loading",
+          "variant": "block"
         },
         {
           "id": "progressRow",

packages/genui/cli/src/a2ui/index.ts

@@ -106,7 +106,7 @@ export async function runA2UICli(
       return 0;
     }
     const { runCli: runCatalogExtractorCli } = await import(
-      '@lynx-js/genui-a2ui-catalog-extractor/cli'
+      '../../../a2ui-catalog-extractor/dist/cli.js'
     );
     return await runCatalogExtractorCli(targetArgs, cwd);
   }
@@ -137,7 +137,7 @@ async function runGeneratePromptCli(
     BASIC_CATALOG_ID,
     buildA2UISystemPrompt,
     readA2UICatalogFromDirectory,
-  } = await import('@lynx-js/genui-a2ui-prompt');
+  } = await import('../../../a2ui-prompt/dist/index.js');
   const catalog = options.catalogDir
     ? readA2UICatalogFromDirectory({
       catalogDir: options.catalogDir,

packages/genui/ui-judge/.gitignore

@@ -0,0 +1,7 @@
+# Local environment files (do not commit secrets)
+.env
+.env.local
+.env.*.local
+
+# Local UI judge result outputs
+ui-judge-results.json