feat: add empty state and expand overlay qa

apps/docs/src/components/dialog.stories.tsx

@@ -10,6 +10,24 @@ import {
 } from "@ai-ui/ui";
 import type { Meta, StoryObj } from "@storybook/react";
 
+async function waitForCondition(
+  predicate: () => boolean,
+  message: string,
+  timeoutMs = 1500
+) {
+  const startedAt = Date.now();
+
+  while (Date.now() - startedAt < timeoutMs) {
+    if (predicate()) {
+      return;
+    }
+
+    await new Promise((resolve) => window.setTimeout(resolve, 16));
+  }
+
+  throw new Error(message);
+}
+
 type LaunchDialogProps = {
   description?: string;
   size?: "sm" | "md" | "lg";
@@ -62,7 +80,36 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Playground: Story = {
-  render: () => <LaunchDialog />
+  render: () => <LaunchDialog />,
+  play: async ({ canvasElement }) => {
+    const trigger = [...canvasElement.querySelectorAll("button")].find((element) =>
+      element.textContent?.includes("Open approval dialog")
+    );
+
+    if (!(trigger instanceof HTMLButtonElement)) {
+      throw new Error("Expected the dialog trigger to render.");
+    }
+
+    trigger.click();
+
+    await waitForCondition(
+      () => document.body.querySelector('[role="dialog"]') instanceof HTMLElement,
+      "Expected the dialog to open."
+    );
+
+    const closeButton = document.body.querySelector('[aria-label="Close dialog"]');
+
+    if (!(closeButton instanceof HTMLButtonElement)) {
+      throw new Error("Expected the dialog close control to render.");
+    }
+
+    closeButton.click();
+
+    await waitForCondition(
+      () => document.body.querySelector('[role="dialog"]') === null,
+      "Expected the dialog to close."
+    );
+  }
 };
 
 export const Sizes: Story = {