@agent-native/toolkit 0.10.0 → 0.10.2

package/dist/editor/index.d.ts

@@ -1,7 +1,7 @@
 export { createSharedEditorExtensions, MARKDOWN_DIALECT_CONFIG, type RichMarkdownDialect, type RichMarkdownEditorPreset, type RichMarkdownCollabUser, type SharedEditorCollab, type SharedEditorFeatures, type CreateSharedEditorExtensionsOptions, } from "./extensions.js";
 export { useCollabReconcile, getEditorMarkdown, RICH_MARKDOWN_PROGRAMMATIC_TRANSACTION, type UseCollabReconcileOptions, type UseCollabReconcileResult, } from "./useCollabReconcile.js";
 export { applyDocSurgically, defaultParseValue, diffTopLevel, type TopLevelDiff, } from "./surgical-apply.js";
-export { SlashCommandMenu, DEFAULT_SLASH_COMMANDS, createImageSlashCommand, type SlashCommandItem, type SlashCommandMenuProps, } from "./SlashCommandMenu.js";
+export { SlashCommandMenu, DEFAULT_SLASH_COMMANDS, createImageSlashCommand, filterSlashCommandItems, type SlashCommandItem, type SlashCommandMenuProps, type SlashCommandFeatureFlags, } from "./SlashCommandMenu.js";
 export { SharedImage, createImageExtension, pickAndInsertImage, type ImageUploadFn, type SharedImageOptions, } from "./ImageExtension.js";
 export { BubbleToolbar, buildDefaultBubbleItems, type BubbleToolbarItem, type BubbleToolbarProps, } from "./BubbleToolbar.js";
 export { SharedRichEditor, type SharedRichEditorProps, } from "./SharedRichEditor.js";

package/dist/editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,uBAAuB,EACvB,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,KAAK,mCAAmC,GACzC,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,sCAAsC,EACtC,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,GAC9B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACvB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,KAAK,aAAa,EAClB,KAAK,kBAAkB,GACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,GAChC,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,kBAAkB,EAClB,4BAA4B,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,mCAAmC,GACzC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,oCAAoC,EACpC,KAAK,qBAAqB,EAC1B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,uBAAuB,EACvB,qBAAqB,EACrB,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,8BAA8B,EACnC,KAAK,2BAA2B,EAChC,KAAK,sBAAsB,EAC3B,KAAK,+BAA+B,EACpC,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,yBAAyB,GAC/B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,4BAA4B,EAC5B,gCAAgC,EAChC,+BAA+B,EAC/B,KAAK,mCAAmC,EACxC,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,GAC5B,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,uBAAuB,EACvB,KAAK,mBAAmB,EACxB,KAAK,wBAAwB,EAC7B,KAAK,sBAAsB,EAC3B,KAAK,kBAAkB,EACvB,KAAK,oBAAoB,EACzB,KAAK,mCAAmC,GACzC,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,sCAAsC,EACtC,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,GAC9B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,EACZ,KAAK,YAAY,GAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,KAAK,gBAAgB,EACrB,KAAK,qBAAqB,EAC1B,KAAK,wBAAwB,GAC9B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,EAClB,KAAK,aAAa,EAClB,KAAK,kBAAkB,GACxB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,aAAa,EACb,uBAAuB,EACvB,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,GACxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,gBAAgB,EAChB,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,KAAK,0BAA0B,GAChC,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,kBAAkB,EAClB,4BAA4B,EAC5B,KAAK,uBAAuB,EAC5B,KAAK,mCAAmC,GACzC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,oCAAoC,EACpC,KAAK,qBAAqB,EAC1B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,uBAAuB,EACvB,qBAAqB,EACrB,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,EACpB,KAAK,8BAA8B,EACnC,KAAK,2BAA2B,EAChC,KAAK,sBAAsB,EAC3B,KAAK,+BAA+B,EACpC,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,EAC/B,KAAK,yBAAyB,EAC9B,KAAK,yBAAyB,GAC/B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,4BAA4B,EAC5B,gCAAgC,EAChC,+BAA+B,EAC/B,KAAK,mCAAmC,EACxC,KAAK,0BAA0B,EAC/B,KAAK,sBAAsB,GAC5B,MAAM,4BAA4B,CAAC;AACpC,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC"}

package/dist/editor/index.js

@@ -1,7 +1,7 @@
 export { createSharedEditorExtensions, MARKDOWN_DIALECT_CONFIG, } from "./extensions.js";
 export { useCollabReconcile, getEditorMarkdown, RICH_MARKDOWN_PROGRAMMATIC_TRANSACTION, } from "./useCollabReconcile.js";
 export { applyDocSurgically, defaultParseValue, diffTopLevel, } from "./surgical-apply.js";
-export { SlashCommandMenu, DEFAULT_SLASH_COMMANDS, createImageSlashCommand, } from "./SlashCommandMenu.js";
+export { SlashCommandMenu, DEFAULT_SLASH_COMMANDS, createImageSlashCommand, filterSlashCommandItems, } from "./SlashCommandMenu.js";
 export { SharedImage, createImageExtension, pickAndInsertImage, } from "./ImageExtension.js";
 export { BubbleToolbar, buildDefaultBubbleItems, } from "./BubbleToolbar.js";
 export { SharedRichEditor, } from "./SharedRichEditor.js";

package/dist/editor/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,uBAAuB,GAOxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,sCAAsC,GAGvC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,GAEb,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,GAGxB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,GAGnB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,aAAa,EACb,uBAAuB,GAGxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,gBAAgB,GAEjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,sBAAsB,GAIvB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,kBAAkB,EAClB,4BAA4B,GAG7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,oCAAoC,GAIrC,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,uBAAuB,EACvB,qBAAqB,EACrB,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,GASrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,4BAA4B,EAC5B,gCAAgC,EAChC,+BAA+B,GAIhC,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,4BAA4B,EAC5B,uBAAuB,GAOxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,sCAAsC,GAGvC,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACL,kBAAkB,EAClB,iBAAiB,EACjB,YAAY,GAEb,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,GAIxB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,WAAW,EACX,oBAAoB,EACpB,kBAAkB,GAGnB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,aAAa,EACb,uBAAuB,GAGxB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,gBAAgB,GAEjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EACL,mBAAmB,EACnB,sBAAsB,GAIvB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,kBAAkB,EAClB,4BAA4B,GAG7B,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,oCAAoC,GAIrC,MAAM,iBAAiB,CAAC;AACzB,OAAO,EACL,uBAAuB,EACvB,qBAAqB,EACrB,yBAAyB,EACzB,qBAAqB,EACrB,oBAAoB,GASrB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,4BAA4B,EAC5B,gCAAgC,EAChC,+BAA+B,GAIhC,MAAM,4BAA4B,CAAC"}

package/dist/styles.css

@@ -20,37 +20,213 @@
  */
 @source "./**/*.{js,ts,tsx}";
 
-.agent-realtime-voice-working::after {
+@property --agent-realtime-voice-angle {
+  syntax: "<angle>";
+  inherits: true;
+  initial-value: 0deg;
+}
+
+.agent-realtime-voice-glow {
+  --agent-realtime-voice-angle: 0deg;
+  --agent-realtime-voice-proximity: 72;
+  --agent-realtime-voice-edge-sensitivity: 30;
+  --agent-realtime-voice-color-sensitivity: 50;
+  --agent-realtime-voice-cone-spread: 25;
+  --agent-realtime-voice-fill-opacity: 0.5;
+  --agent-realtime-voice-card-bg: hsl(var(--background));
+  --agent-realtime-voice-glow-color: 40 80% 80%;
+  --agent-realtime-voice-glow-padding: 18px;
+  --agent-realtime-voice-gradient-one: radial-gradient(
+    at 80% 55%,
+    #c084fc 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-two: radial-gradient(
+    at 69% 34%,
+    #f472b6 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-three: radial-gradient(
+    at 8% 6%,
+    #38bdf8 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-four: radial-gradient(
+    at 41% 38%,
+    #c084fc 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-five: radial-gradient(
+    at 86% 85%,
+    #f472b6 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-six: radial-gradient(
+    at 82% 18%,
+    #38bdf8 0,
+    transparent 50%
+  );
+  --agent-realtime-voice-gradient-seven: radial-gradient(
+    at 51% 4%,
+    #f472b6 0,
+    transparent 50%
+  );
   position: absolute;
   z-index: 0;
+  inset: -1px;
+  border-radius: inherit;
+  isolation: isolate;
+  pointer-events: none;
+  transform: translate3d(0, 0, 0.01px);
+}
+
+.agent-realtime-voice-working {
+  --agent-realtime-voice-proximity: 96;
+}
+
+.agent-realtime-voice-glow::before,
+.agent-realtime-voice-glow::after {
+  position: absolute;
   inset: 0;
+  z-index: 0;
   border-radius: inherit;
   pointer-events: none;
   content: "";
+  transition: opacity 250ms ease-out;
+}
+
+.agent-realtime-voice-glow::before {
+  border: 1px solid transparent;
+  background:
+    linear-gradient(
+        var(--agent-realtime-voice-card-bg),
+        var(--agent-realtime-voice-card-bg)
+      )
+      padding-box,
+    linear-gradient(transparent 0 100%) border-box,
+    var(--agent-realtime-voice-gradient-one) border-box,
+    var(--agent-realtime-voice-gradient-two) border-box,
+    var(--agent-realtime-voice-gradient-three) border-box,
+    var(--agent-realtime-voice-gradient-four) border-box,
+    var(--agent-realtime-voice-gradient-five) border-box,
+    var(--agent-realtime-voice-gradient-six) border-box,
+    var(--agent-realtime-voice-gradient-seven) border-box,
+    linear-gradient(#c084fc 0 100%) border-box;
+  opacity: calc(
+    (
+        var(--agent-realtime-voice-proximity) -
+          var(--agent-realtime-voice-color-sensitivity)
+      ) /
+      (100 - var(--agent-realtime-voice-color-sensitivity))
+  );
+  mask-image: conic-gradient(
+    from var(--agent-realtime-voice-angle) at center,
+    #000 calc(var(--agent-realtime-voice-cone-spread) * 1%),
+    rgb(0 0 0 / 75%) calc((var(--agent-realtime-voice-cone-spread) + 4) * 1%),
+    rgb(0 0 0 / 45%) calc((var(--agent-realtime-voice-cone-spread) + 8) * 1%),
+    rgb(0 0 0 / 18%) calc((var(--agent-realtime-voice-cone-spread) + 12) * 1%),
+    transparent calc((var(--agent-realtime-voice-cone-spread) + 15) * 1%),
+    transparent calc((100 - var(--agent-realtime-voice-cone-spread) - 15) * 1%),
+    rgb(0 0 0 / 18%)
+      calc((100 - var(--agent-realtime-voice-cone-spread) - 12) * 1%),
+    rgb(0 0 0 / 45%)
+      calc((100 - var(--agent-realtime-voice-cone-spread) - 8) * 1%),
+    rgb(0 0 0 / 75%)
+      calc((100 - var(--agent-realtime-voice-cone-spread) - 4) * 1%),
+    #000 calc((100 - var(--agent-realtime-voice-cone-spread)) * 1%)
+  );
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .agent-realtime-voice-working::after {
-    background: linear-gradient(
-      90deg,
-      transparent 0%,
-      transparent 36%,
-      hsl(var(--foreground) / 0.14) 50%,
-      transparent 64%,
-      transparent 100%
+.agent-realtime-voice-glow::after {
+  border: 1px solid transparent;
+  background:
+    var(--agent-realtime-voice-gradient-one) padding-box,
+    var(--agent-realtime-voice-gradient-two) padding-box,
+    var(--agent-realtime-voice-gradient-three) padding-box,
+    var(--agent-realtime-voice-gradient-four) padding-box,
+    var(--agent-realtime-voice-gradient-five) padding-box,
+    var(--agent-realtime-voice-gradient-six) padding-box,
+    var(--agent-realtime-voice-gradient-seven) padding-box,
+    linear-gradient(#c084fc 0 100%) padding-box;
+  mask-image:
+    linear-gradient(to bottom, #000, #000),
+    radial-gradient(ellipse at 50% 50%, #000 40%, transparent 65%),
+    radial-gradient(ellipse at 66% 66%, #000 5%, transparent 40%),
+    radial-gradient(ellipse at 33% 33%, #000 5%, transparent 40%),
+    radial-gradient(ellipse at 66% 33%, #000 5%, transparent 40%),
+    radial-gradient(ellipse at 33% 66%, #000 5%, transparent 40%),
+    conic-gradient(
+      from var(--agent-realtime-voice-angle) at center,
+      transparent 5%,
+      #000 15%,
+      #000 85%,
+      transparent 95%
     );
-    background-repeat: repeat;
-    background-size: 14rem 100%;
-    animation: agent-realtime-voice-shine 2.6s linear infinite;
-  }
+  mask-composite: subtract, add, add, add, add, add;
+  opacity: calc(
+    var(--agent-realtime-voice-fill-opacity) *
+      (
+        var(--agent-realtime-voice-proximity) -
+          var(--agent-realtime-voice-color-sensitivity)
+      ) /
+      (100 - var(--agent-realtime-voice-color-sensitivity))
+  );
+  mix-blend-mode: soft-light;
+}
 
-  @keyframes agent-realtime-voice-shine {
-    from {
-      background-position: 0 0;
-    }
+.agent-realtime-voice-edge-light {
+  position: absolute;
+  z-index: 1;
+  inset: calc(var(--agent-realtime-voice-glow-padding) * -1);
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: calc(
+    (
+        var(--agent-realtime-voice-proximity) -
+          var(--agent-realtime-voice-edge-sensitivity)
+      ) /
+      (100 - var(--agent-realtime-voice-edge-sensitivity))
+  );
+  mask-image: conic-gradient(
+    from var(--agent-realtime-voice-angle) at center,
+    #000 2.5%,
+    rgb(0 0 0 / 85%) 4%,
+    rgb(0 0 0 / 55%) 7%,
+    rgb(0 0 0 / 25%) 11%,
+    transparent 15%,
+    transparent 85%,
+    rgb(0 0 0 / 25%) 89%,
+    rgb(0 0 0 / 55%) 93%,
+    rgb(0 0 0 / 85%) 96%,
+    #000 97.5%
+  );
+  mix-blend-mode: plus-lighter;
+  transition: opacity 250ms ease-out;
+}
+
+.agent-realtime-voice-edge-light::before {
+  position: absolute;
+  inset: var(--agent-realtime-voice-glow-padding);
+  border-radius: inherit;
+  content: "";
+  box-shadow:
+    inset 0 0 0 1px hsl(var(--agent-realtime-voice-glow-color) / 100%),
+    inset 0 0 1px hsl(var(--agent-realtime-voice-glow-color) / 60%),
+    inset 0 0 3px hsl(var(--agent-realtime-voice-glow-color) / 50%),
+    inset 0 0 6px hsl(var(--agent-realtime-voice-glow-color) / 40%),
+    inset 0 0 15px hsl(var(--agent-realtime-voice-glow-color) / 30%),
+    inset 0 0 25px 2px hsl(var(--agent-realtime-voice-glow-color) / 20%),
+    inset 0 0 50px 2px hsl(var(--agent-realtime-voice-glow-color) / 10%),
+    0 0 1px hsl(var(--agent-realtime-voice-glow-color) / 60%),
+    0 0 3px hsl(var(--agent-realtime-voice-glow-color) / 50%),
+    0 0 6px hsl(var(--agent-realtime-voice-glow-color) / 40%),
+    0 0 15px hsl(var(--agent-realtime-voice-glow-color) / 30%),
+    0 0 25px 2px hsl(var(--agent-realtime-voice-glow-color) / 20%),
+    0 0 50px 2px hsl(var(--agent-realtime-voice-glow-color) / 10%);
+}
 
-    to {
-      background-position: 14rem 0;
-    }
+@media (prefers-reduced-motion: reduce) {
+  .agent-realtime-voice-glow {
+    --agent-realtime-voice-angle: 35deg;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agent-native/toolkit",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "Reusable app-building UI and helpers for Agent-Native apps.",
   "homepage": "https://github.com/BuilderIO/agent-native#readme",
   "bugs": {

package/src/chat-history.css

@@ -211,7 +211,7 @@
   white-space: nowrap;
   font-size: 12px;
   font-weight: 500;
-  color: hsl(var(--foreground));
+  color: hsl(var(--muted-foreground));
 }
 
 .an-chat-history-row--active .an-chat-history-row__title {
@@ -227,7 +227,7 @@
 .an-chat-history--rail
   .an-chat-history-row--pinned:not(.an-chat-history-row--active)
   .an-chat-history-row__title {
-  color: hsl(var(--foreground));
+  color: hsl(var(--muted-foreground));
 }
 
 .an-chat-history-row__timestamp {

package/src/composer/PromptComposer.tsx

@@ -59,7 +59,6 @@ import type {
 } from "./types.js";
 
 const MAX_INLINE_TEXT_FILE_CHARS = 60_000;
-const SUBMIT_ENGINE_STATUS_TIMEOUT_MS = 1000;
 
 /**
  * Files the user attached via the "+" button in PromptComposer. The host owns
@@ -532,31 +531,6 @@ function PromptComposerInner({
       window.dispatchEvent(new Event("agent-engine:configured-changed"));
     }
   }, []);
-  const ensureAgentEngineReadyForSubmit = useCallback(async () => {
-    if (!resolvedModelStatusChecksEnabled) return true;
-    const state =
-      agentEngineConfigured.state === "missing"
-        ? "missing"
-        : await modelsAdapter.fetchAgentEngineConfiguredState!(
-            resolvedModelStatusChecksEnabled,
-            {
-              timeoutMs: SUBMIT_ENGINE_STATUS_TIMEOUT_MS,
-            },
-          );
-    if (state === "missing") {
-      bounceMissingKeySetup();
-      return false;
-    }
-    if (typeof window !== "undefined") {
-      window.dispatchEvent(new Event("agent-engine:configured-changed"));
-    }
-    return false;
-  }, [
-    agentEngineConfigured.state,
-    bounceMissingKeySetup,
-    modelsAdapter,
-    resolvedModelStatusChecksEnabled,
-  ]);
   const retryAgentEngineStatus = useCallback(() => {
     if (typeof window !== "undefined") {
       window.dispatchEvent(new Event("agent-engine:configured-changed"));
@@ -653,7 +627,6 @@ function PromptComposerInner({
           initialText={initialText}
           initialTextKey={initialTextKey}
           onSubmit={handleSubmit}
-          onBeforeSubmit={ensureAgentEngineReadyForSubmit}
           clearOnSubmit={!preserveDraftOnSubmit}
           plusMenuMode={
             plusMenuMode ?? (attachmentsEnabled ? "upload-only" : "hidden")

package/src/composer/RealtimeVoiceMode.spec.tsx

@@ -89,9 +89,28 @@ const copy: RealtimeVoiceModeCopy = {
 describe("RealtimeVoiceMode", () => {
   let container: HTMLDivElement;
   let root: Root;
+  let animate: ReturnType<typeof vi.fn>;
+  let cancelGlowAnimation: ReturnType<typeof vi.fn>;
+  let updateGlowPlaybackRate: ReturnType<typeof vi.fn>;
+  let originalAnimate: typeof HTMLElement.prototype.animate | undefined;
 
   beforeEach(() => {
     vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+    originalAnimate = HTMLElement.prototype.animate;
+    cancelGlowAnimation = vi.fn();
+    updateGlowPlaybackRate = vi.fn();
+    animate = vi.fn(
+      () =>
+        ({
+          cancel: cancelGlowAnimation,
+          playbackRate: 1,
+          updatePlaybackRate: updateGlowPlaybackRate,
+        }) as unknown as Animation,
+    );
+    Object.defineProperty(HTMLElement.prototype, "animate", {
+      configurable: true,
+      value: animate,
+    });
     container = document.createElement("div");
     document.body.appendChild(container);
     root = createRoot(container);
@@ -100,6 +119,14 @@ describe("RealtimeVoiceMode", () => {
   afterEach(() => {
     act(() => root.unmount());
     container.remove();
+    if (originalAnimate) {
+      Object.defineProperty(HTMLElement.prototype, "animate", {
+        configurable: true,
+        value: originalAnimate,
+      });
+    } else {
+      Reflect.deleteProperty(HTMLElement.prototype, "animate");
+    }
     vi.unstubAllGlobals();
   });
 
@@ -291,22 +318,21 @@ describe("RealtimeVoiceMode", () => {
     expect(document.body.textContent).toContain("Set up voice mode");
     const prompt = document.querySelector<HTMLElement>('[role="dialog"]');
     expect(prompt?.className).toContain(
-      "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,30rem),30rem)]",
+      "w-[min(calc(100vw-2rem),var(--radix-popover-content-available-width,24rem),24rem)]",
     );
     expect(prompt?.dataset.collisionBoundary).toBe("agent-panel");
     const actions = Array.from(prompt?.querySelectorAll("div") ?? []).find(
-      (element) => element.className.includes("sm:flex-row"),
+      (element) => element.className.includes("bg-muted/30"),
     );
     const actionClasses = actions?.className.split(/\s+/) ?? [];
-    expect(actionClasses).toContain("sm:flex-wrap");
-    expect(actionClasses).not.toContain("sm:flex-nowrap");
+    expect(actionClasses).toContain("grid");
+    expect(actionClasses).toContain("rounded-lg");
     const buttons = Array.from(
       document.querySelectorAll<HTMLButtonElement>("button"),
     );
     expect(
-      buttons.find((button) => button.textContent === "Connect Builder.io")
-        ?.className,
-    ).toContain("whitespace-nowrap");
+      buttons.find((button) => button.textContent === "Connect Builder.io"),
+    ).toBeDefined();
     act(() =>
       buttons
         .find((button) => button.textContent === "Connect Builder.io")
@@ -766,7 +792,31 @@ describe("RealtimeVoiceMode", () => {
     },
   );
 
-  it("shines only while the agent is working", () => {
+  it.each(["listening", "speaking"] as const)(
+    "keeps a soft session glow while %s",
+    (state) => {
+      render(
+        <RealtimeVoiceModeDock
+          state={state}
+          copy={copy}
+          chatVisible={false}
+          onToggleChat={vi.fn()}
+          onEndVoiceMode={vi.fn()}
+        />,
+      );
+      expect(
+        document.querySelector(".agent-realtime-voice-glow"),
+      ).not.toBeNull();
+      expect(
+        document.querySelector(".agent-realtime-voice-edge-light"),
+      ).not.toBeNull();
+      expect(
+        document.querySelector(".agent-realtime-voice-working"),
+      ).toBeNull();
+    },
+  );
+
+  it("brightens the live glow while working", () => {
     render(
       <RealtimeVoiceModeDock
         state="working"
@@ -776,10 +826,14 @@ describe("RealtimeVoiceMode", () => {
         onEndVoiceMode={vi.fn()}
       />,
     );
+    expect(document.querySelector(".agent-realtime-voice-glow")).not.toBeNull();
     expect(
       document.querySelector(".agent-realtime-voice-working"),
     ).not.toBeNull();
+  });
 
+  it("changes glow speed without restarting or jumping its rotation", () => {
+    vi.useFakeTimers();
     render(
       <RealtimeVoiceModeDock
         state="listening"
@@ -789,9 +843,77 @@ describe("RealtimeVoiceMode", () => {
         onEndVoiceMode={vi.fn()}
       />,
     );
-    expect(document.querySelector(".agent-realtime-voice-working")).toBeNull();
+    const glow = document.querySelector('[data-realtime-voice-glow="true"]');
+
+    expect(animate).toHaveBeenCalledTimes(1);
+    expect(animate).toHaveBeenCalledWith(
+      [
+        { "--agent-realtime-voice-angle": "0deg" },
+        { "--agent-realtime-voice-angle": "360deg" },
+      ],
+      {
+        duration: 12_000,
+        easing: "linear",
+        iterations: Number.POSITIVE_INFINITY,
+      },
+    );
+    expect(updateGlowPlaybackRate).toHaveBeenLastCalledWith(1);
+
+    render(
+      <RealtimeVoiceModeDock
+        state="working"
+        copy={copy}
+        chatVisible={false}
+        onToggleChat={vi.fn()}
+        onEndVoiceMode={vi.fn()}
+      />,
+    );
+
+    expect(document.querySelector('[data-realtime-voice-glow="true"]')).toBe(
+      glow,
+    );
+    expect(animate).toHaveBeenCalledTimes(1);
+    expect(cancelGlowAnimation).not.toHaveBeenCalled();
+    expect(updateGlowPlaybackRate).toHaveBeenLastCalledWith(2.4);
+
+    render(
+      <RealtimeVoiceModeDock
+        state="speaking"
+        copy={copy}
+        chatVisible={false}
+        onToggleChat={vi.fn()}
+        onEndVoiceMode={vi.fn()}
+      />,
+    );
+
+    expect(animate).toHaveBeenCalledTimes(1);
+    expect(cancelGlowAnimation).not.toHaveBeenCalled();
+    expect(updateGlowPlaybackRate).toHaveBeenLastCalledWith(2.4);
+
+    act(() => vi.advanceTimersByTime(800));
+    expect(updateGlowPlaybackRate).toHaveBeenLastCalledWith(1);
+    vi.useRealTimers();
   });
 
+  it.each(["connecting", "error", "ending"] as const)(
+    "does not show the live glow while %s",
+    (state) => {
+      render(
+        <RealtimeVoiceModeDock
+          state={state}
+          copy={copy}
+          chatVisible={false}
+          onToggleChat={vi.fn()}
+          onEndVoiceMode={vi.fn()}
+        />,
+      );
+      expect(document.querySelector(".agent-realtime-voice-glow")).toBeNull();
+      expect(
+        document.querySelector(".agent-realtime-voice-working"),
+      ).toBeNull();
+    },
+  );
+
   it("shows an unmistakable loader and ignores early audio until connected", () => {
     const audioLevels = createRealtimeVoiceAudioLevelStore();
     audioLevels.set({ input: 0.8, output: 0 });