@agent-native/toolkit 0.10.0 → 0.10.1

package/src/conformance/runner.tsx

@@ -122,6 +122,87 @@ function elementWithText(document: Document, selector: string, text: string) {
   );
 }
 
+function assertInlineLayout(
+  container: Element,
+  iconSelector: string,
+  labelSelector: string,
+  message: string,
+) {
+  const icon = container.querySelector<HTMLElement>(iconSelector);
+  const label = container.querySelector<HTMLElement>(labelSelector);
+  invariant(icon && label, message);
+
+  const iconRect = icon.getBoundingClientRect();
+  const labelRect = label.getBoundingClientRect();
+  const hasGeometry =
+    iconRect.width > 0 ||
+    iconRect.height > 0 ||
+    labelRect.width > 0 ||
+    labelRect.height > 0;
+  if (hasGeometry) {
+    const verticalOverlap =
+      Math.min(iconRect.bottom, labelRect.bottom) -
+      Math.max(iconRect.top, labelRect.top);
+    invariant(
+      verticalOverlap > 0 || Math.abs(iconRect.top - labelRect.top) <= 2,
+      message,
+    );
+    return;
+  }
+
+  // happy-dom does not calculate layout. Still reject adapters that explicitly
+  // stack the tab contents, while browser-backed runs use the geometry check.
+  const commonAncestor = (() => {
+    let candidate: Element | null = icon;
+    while (candidate && !candidate.contains(label)) {
+      candidate = candidate.parentElement;
+    }
+    return candidate;
+  })();
+  const styles = [
+    container,
+    commonAncestor,
+    icon.parentElement,
+    label.parentElement,
+  ]
+    .filter((element): element is Element => Boolean(element))
+    .map((element) =>
+      element.ownerDocument.defaultView?.getComputedStyle(element),
+    );
+  invariant(
+    !styles.some(
+      (style) => style?.display === "flex" && style.flexDirection === "column",
+    ),
+    message,
+  );
+}
+
+function assertContainedFooter(dialog: Element, footerSelector: string) {
+  const footer = dialog.querySelector<HTMLElement>(footerSelector);
+  invariant(
+    footer,
+    "Dialog footer controls must be rendered inside the dialog surface.",
+  );
+
+  const dialogRect = (dialog as HTMLElement).getBoundingClientRect();
+  const footerRect = footer.getBoundingClientRect();
+  const hasGeometry =
+    dialogRect.width > 0 ||
+    dialogRect.height > 0 ||
+    footerRect.width > 0 ||
+    footerRect.height > 0;
+  if (!hasGeometry) return;
+
+  const epsilon = 2;
+  invariant(
+    footerRect.top >= dialogRect.top - epsilon &&
+      footerRect.bottom <= dialogRect.bottom + epsilon &&
+      footerRect.left >= dialogRect.left - epsilon &&
+      footerRect.right <= dialogRect.right + epsilon,
+    "Dialog footer controls must remain within the dialog surface bounds.",
+  );
+}
+
 const checks: readonly ConformanceCheck[] = [
   {
     id: "contract.components",
@@ -308,6 +389,21 @@ const checks: readonly ConformanceCheck[] = [
         "Tooltip must honor controlled open and portalContainer.",
       );
       unmount(probe);
+
+      const defaultOpenProbe = mount(
+        <components.Tooltip
+          trigger={<button>Help by default</button>}
+          content="Default tooltip"
+          defaultOpen
+          portalContainer={portal}
+        />,
+      );
+      await settle();
+      invariant(
+        portal.textContent?.includes("Default tooltip"),
+        "Tooltip must honor defaultOpen and portalContainer.",
+      );
+      unmount(defaultOpenProbe);
       portal.remove();
     },
   },
@@ -331,6 +427,21 @@ const checks: readonly ConformanceCheck[] = [
       click(item, document);
       invariant(selected === "archive", "Menu must report selected item ids.");
       unmount(probe);
+
+      const defaultOpenProbe = mount(
+        <components.Menu
+          trigger={<button>Default actions</button>}
+          items={[{ id: "restore", label: "Restore" }]}
+          defaultOpen
+          onAction={() => {}}
+        />,
+      );
+      await settle();
+      invariant(
+        elementWithText(document, '[role="menuitem"]', "Restore"),
+        "Menu must honor defaultOpen.",
+      );
+      unmount(defaultOpenProbe);
     },
   },
   {
@@ -393,6 +504,30 @@ const checks: readonly ConformanceCheck[] = [
         "Dialog must not invent actions when footer is omitted.",
       );
       unmount(probe);
+
+      const footerProbe = mount(
+        <components.Dialog
+          open
+          onOpenChange={() => {}}
+          title="Footer probe"
+          portalContainer={portal}
+          footer={
+            <button data-conformance-dialog-footer-action="true" type="button">
+              Save
+            </button>
+          }
+        >
+          Footer content
+        </components.Dialog>,
+      );
+      await settle();
+      const footerDialog = portal.querySelector('[role="dialog"]');
+      invariant(footerDialog, "Dialog footer probe did not render a dialog.");
+      assertContainedFooter(
+        footerDialog,
+        '[data-conformance-dialog-footer-action="true"]',
+      );
+      unmount(footerProbe);
       portal.remove();
     },
   },
@@ -466,7 +601,16 @@ const checks: readonly ConformanceCheck[] = [
           orientation="vertical"
           onChange={(next) => (value = next)}
           items={[
-            { value: "first", label: "First", content: "One" },
+            {
+              value: "first",
+              label: <span data-conformance-tab-label="true">First</span>,
+              icon: (
+                <span data-conformance-tab-icon="true" aria-hidden="true">
+                  ●
+                </span>
+              ),
+              content: "One",
+            },
             { value: "second", label: "Second", content: "Two" },
           ]}
         />,
@@ -477,6 +621,14 @@ const checks: readonly ConformanceCheck[] = [
         tabList.getAttribute("aria-orientation") === "vertical",
         "Tabs must honor vertical orientation in their tablist semantics.",
       );
+      const first = elementWithText(document, '[role="tab"]', "First");
+      invariant(first, "Tabs must expose the icon-bearing tab.");
+      assertInlineLayout(
+        first,
+        '[data-conformance-tab-icon="true"]',
+        '[data-conformance-tab-label="true"]',
+        "Tabs must lay out an icon and its label on the same row.",
+      );
       const second = elementWithText(document, '[role="tab"]', "Second");
       invariant(second, "Tabs must expose tab semantics.");
       click(second, document);

package/src/editor/SharedRichEditor.tsx

@@ -14,7 +14,12 @@ import {
   type SharedEditorFeatures,
 } from "./extensions.js";
 import type { ImageUploadFn } from "./ImageExtension.js";
-import { SlashCommandMenu, type SlashCommandItem } from "./SlashCommandMenu.js";
+import {
+  DEFAULT_SLASH_COMMANDS,
+  filterSlashCommandItems,
+  SlashCommandMenu,
+  type SlashCommandItem,
+} from "./SlashCommandMenu.js";
 import {
   useCollabReconcile,
   getEditorMarkdown,
@@ -200,6 +205,12 @@ export function SharedRichEditor({
 
   const collab = !!ydoc;
 
+  const effectiveSlashItems = useMemo(
+    () =>
+      filterSlashCommandItems(slashItems ?? DEFAULT_SLASH_COMMANDS, features),
+    [features, slashItems],
+  );
+
   // The collab hook needs the editor, but useEditor's `onUpdate` needs the
   // hook's guards. Break the cycle with a ref: `onUpdate` reads the guards
   // through `guardsRef`, which is populated right after the hook runs below.
@@ -313,7 +324,7 @@ export function SharedRichEditor({
         <BubbleToolbar editor={editor} buildItems={buildBubbleItems} />
       ) : null}
       {editable ? (
-        <SlashCommandMenu editor={editor} items={slashItems} />
+        <SlashCommandMenu editor={editor} items={effectiveSlashItems} />
       ) : null}
       <EditorContent editor={editor} />
     </div>

package/src/editor/SlashCommandMenu.spec.ts

@@ -0,0 +1,33 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  DEFAULT_SLASH_COMMANDS,
+  filterSlashCommandItems,
+} from "./SlashCommandMenu.js";
+
+describe("filterSlashCommandItems", () => {
+  it("hides commands whose editor extensions are disabled", () => {
+    const commands = filterSlashCommandItems(DEFAULT_SLASH_COMMANDS, {
+      codeBlock: false,
+      tables: false,
+      tasks: false,
+    });
+
+    expect(commands.map((command) => command.title)).not.toEqual(
+      expect.arrayContaining(["Code block", "Table", "To-do list"]),
+    );
+  });
+
+  it("keeps commands enabled when their feature is unspecified", () => {
+    const commands = filterSlashCommandItems(DEFAULT_SLASH_COMMANDS, {
+      tasks: false,
+    });
+
+    expect(commands.map((command) => command.title)).toEqual(
+      expect.arrayContaining(["Code block", "Table"]),
+    );
+    expect(commands.map((command) => command.title)).not.toContain(
+      "To-do list",
+    );
+  });
+});

package/src/editor/SlashCommandMenu.tsx

@@ -22,9 +22,26 @@ export interface SlashCommandItem {
   searchText?: string;
   /** Short text glyph shown in the menu (T, H1, tbl, …). */
   icon: string;
+  /** Hide this command when the shared editor feature is disabled. */
+  requires?: "tables" | "tasks" | "codeBlock";
   action: (editor: Editor) => void;
 }
 
+export interface SlashCommandFeatureFlags {
+  tables?: boolean;
+  tasks?: boolean;
+  codeBlock?: boolean;
+}
+
+export function filterSlashCommandItems(
+  items: readonly SlashCommandItem[],
+  features?: SlashCommandFeatureFlags,
+): SlashCommandItem[] {
+  return items.filter(
+    (item) => !item.requires || features?.[item.requires] !== false,
+  );
+}
+
 /**
  * The default block commands — Plan's current set. Apps pass their own `items`
  * (typically `[...DEFAULT_SLASH_COMMANDS, ...extra]`) to extend it.
@@ -73,6 +90,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommandItem[] = [
     title: "To-do list",
     description: "Checklist items",
     icon: "[]",
+    requires: "tasks",
     action: (editor) => editor.chain().focus().toggleTaskList().run(),
   },
   {
@@ -85,6 +103,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommandItem[] = [
     title: "Code block",
     description: "Code snippet",
     icon: "<>",
+    requires: "codeBlock",
     action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
   },
   {
@@ -97,6 +116,7 @@ export const DEFAULT_SLASH_COMMANDS: SlashCommandItem[] = [
     title: "Table",
     description: "Three by three table",
     icon: "tbl",
+    requires: "tables",
     action: (editor) =>
       editor
         .chain()

package/src/editor/index.ts

@@ -25,8 +25,10 @@ export {
   SlashCommandMenu,
   DEFAULT_SLASH_COMMANDS,
   createImageSlashCommand,
+  filterSlashCommandItems,
   type SlashCommandItem,
   type SlashCommandMenuProps,
+  type SlashCommandFeatureFlags,
 } from "./SlashCommandMenu.js";
 export {
   SharedImage,

package/src/styles.css

@@ -20,37 +20,66 @@
  */
 @source "./**/*.{js,ts,tsx}";
 
-.agent-realtime-voice-working::after {
+.agent-realtime-voice-glow {
+  --agent-realtime-voice-edge-opacity: 0.52;
+  --agent-realtime-voice-halo-opacity: 0.28;
   position: absolute;
   z-index: 0;
+  inset: -4px;
+  border-radius: inherit;
+  pointer-events: none;
+  transform: rotate(0turn);
+  will-change: transform;
+}
+
+.agent-realtime-voice-working {
+  --agent-realtime-voice-edge-opacity: 0.92;
+  --agent-realtime-voice-halo-opacity: 0.58;
+}
+
+.agent-realtime-voice-glow::before,
+.agent-realtime-voice-glow::after {
+  position: absolute;
   inset: 0;
   border-radius: inherit;
   pointer-events: none;
   content: "";
+  background: conic-gradient(
+    from -18deg,
+    transparent 0deg 228deg,
+    oklch(0.65 0.2 294 / 0.18) 244deg,
+    oklch(0.7 0.2 265 / 0.7) 274deg,
+    oklch(0.79 0.16 235 / 0.96) 306deg,
+    oklch(0.96 0.035 210) 326deg,
+    oklch(0.88 0.11 202 / 0.72) 340deg,
+    transparent 360deg
+  );
+  opacity: var(--agent-realtime-voice-edge-opacity);
+  padding: 1.5px;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  transition: opacity 220ms ease-out;
 }
 
-@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%
-    );
-    background-repeat: repeat;
-    background-size: 14rem 100%;
-    animation: agent-realtime-voice-shine 2.6s linear infinite;
-  }
-
-  @keyframes agent-realtime-voice-shine {
-    from {
-      background-position: 0 0;
-    }
+.agent-realtime-voice-glow::before {
+  inset: -1px;
+  opacity: var(--agent-realtime-voice-halo-opacity);
+  padding: 2px;
+  filter: blur(1px) drop-shadow(0 0 2px oklch(0.9 0.07 215 / 0.95))
+    drop-shadow(0 0 6px oklch(0.78 0.15 236 / 0.82))
+    drop-shadow(0 0 14px oklch(0.67 0.2 258 / 0.48))
+    drop-shadow(0 0 28px oklch(0.62 0.18 276 / 0.26));
+  mix-blend-mode: plus-lighter;
+}
 
-    to {
-      background-position: 14rem 0;
-    }
+@media (prefers-reduced-motion: reduce) {
+  .agent-realtime-voice-glow {
+    transform: rotate(35deg);
   }
 }