zidane-ui 9.0.4 → 9.1.3

package/src/appearance/headless/zoom-commands.ts

@@ -1,21 +0,0 @@
-/**
- * The interface zoom as key commands (`zoomIn`, `zoomOut`, `zoomReset`): one
- * step of the interface scale up or down, or back to 100%, written through
- * the host's preferences (the appearance provider applies it).
- */
-import type { KeyCommands } from '../../keybindings/headless/commands';
-import type { AppearancePrefs } from './host';
-import { stepInterfaceScale } from './prefs';
-
-/**
- * The zoom key commands over a host's preferences.
- *
- * @param prefs - The appearance host's preferences.
- */
-export function zoomKeyCommands(prefs: Pick<AppearancePrefs, 'set'>): KeyCommands {
-  return {
-    zoomIn: () => prefs.set((prev) => stepInterfaceScale(prev, 1)),
-    zoomOut: () => prefs.set((prev) => stepInterfaceScale(prev, -1)),
-    zoomReset: () => prefs.set((prev) => stepInterfaceScale(prev, 0)),
-  };
-}

package/src/appearance/index.ts

@@ -1,11 +0,0 @@
-/**
- * `zidane-ui/appearance`: an app's runtime theme over an `AppearanceHost`.
- * `AppearanceProvider` applies themes, contrast, accent, fonts, the code
- * theme and the motion level to the document and writes the pre-paint
- * snapshot; `useTheme`, `usePalette`, `useShikiTheme`, `useAppearance` and
- * `useAppearanceState` read it back. The React-free model is
- * `zidane-ui/appearance/headless`.
- */
-export * from './AppearanceProvider';
-export * from './apply';
-export { codeThemesOf, codeThemeTypeOf } from '../code/code-themes';

package/src/appearance/testing/contract.ts

@@ -1,210 +0,0 @@
-/**
- * What every `AppearanceHost` implementation does alike, as a vitest suite: the in-memory fixture
- * (`createFixtureAppearanceHost`), the browser one (`createBrowserAppearanceHost`), the desktop app's.
- *
- * An implementation's test calls {@link describeAppearanceHostContract} with a harness factory. The
- * contract hands it an {@link AppearanceHostContractBackend}: the preferences blob already stored (or
- * none) and the extra themes per folder. The harness builds the host over a backend that holds them,
- * and returns an {@link AppearanceHostContractControl} that reads the backend and changes it from
- * outside (another window stored new preferences). The capabilities list says which optional members
- * the host offers: the suite checks the others are left out (undefined, never a throwing stub) and
- * skips the behaviours that need them.
- *
- *   describeAppearanceHostContract('createBrowserAppearanceHost', (backend) => ({ host, control }), [
- *     'boot',
- *   ]);
- */
-import { afterEach, describe, expect, it, vi } from 'vitest';
-
-import type { AppearanceHost, BootSnapshot, Theme } from '../headless/host';
-import { DEFAULT_APPEARANCE, type AppearanceMode } from '../headless/prefs';
-
-/** An optional `AppearanceHost` member, by its path. */
-export type AppearanceHostCapability =
-  'themes' | 'boot' | 'window' | 'window.setBackground' | 'window.setZoom' | 'window.setNativeTheme';
-
-const CAPABILITIES: readonly AppearanceHostCapability[] = [
-  'themes',
-  'boot',
-  'window',
-  'window.setBackground',
-  'window.setZoom',
-  'window.setNativeTheme',
-];
-
-/** A window call the backend saw. */
-export type AppearanceHostContractWindowCall =
-  | { kind: 'background'; color: string }
-  | { kind: 'zoom'; factor: number }
-  | { kind: 'nativeTheme'; mode: AppearanceMode };
-
-/** What the backend behind the host holds. */
-export interface AppearanceHostContractBackend {
-  /** The stored preferences blob, or `null` when nothing is stored (a first run). */
-  stored: string | null;
-  /** The extra themes per folder (a folder missing here has none). */
-  themes: Readonly<Record<string, readonly Theme[]>>;
-}
-
-/** Reads the backend and changes it from outside. */
-export interface AppearanceHostContractControl {
-  /** The blob the backend holds now. */
-  stored(): string | null;
-  /** Another window stored this blob (`null` clears it), announced as the backend does. */
-  storeExternally(raw: string | null): void;
-  /** The snapshot the backend holds, or `null` (hosts with `boot`). */
-  boot?(): BootSnapshot | null;
-  /** The window calls the backend saw, in order (hosts with `window`). */
-  windowCalls?(): readonly AppearanceHostContractWindowCall[];
-  /** A fresh host over the same backend: what a relaunch reads. */
-  reopen(): AppearanceHost;
-}
-
-/** A host built over a backend, the backend's control, and how to tear them down. */
-export interface AppearanceHostHarness {
-  /** The host under test. */
-  host: AppearanceHost;
-  /** Reads and changes the backend. */
-  control: AppearanceHostContractControl;
-  /** Closes listeners after each test. */
-  dispose?(): void;
-}
-
-/** Builds a fresh host (and its backend) for one test. */
-export type AppearanceHostHarnessFactory = (
-  backend: AppearanceHostContractBackend,
-) => AppearanceHostHarness | Promise<AppearanceHostHarness>;
-
-const DUSK = { id: 'contract-dusk', label: 'Dusk' } as Theme;
-
-function member(host: AppearanceHost, capability: AppearanceHostCapability): unknown {
-  const [head, tail] = capability.split('.') as [keyof AppearanceHost, string | undefined];
-  const value = host[head] as Record<string, unknown> | undefined;
-  return tail ? value?.[tail] : value;
-}
-
-const waitFor = <T>(check: () => T) => vi.waitFor(check, { timeout: 3000, interval: 2 });
-
-/**
- * Declares the shared `AppearanceHost` suite for one implementation.
- *
- * @param name - The implementation's name, shown in the suite title.
- * @param makeHarness - Builds a fresh host over a backend that holds what it is given, once per test.
- * @param capabilities - The optional members the host offers. Every other optional member must be undefined.
- */
-export function describeAppearanceHostContract(
-  name: string,
-  makeHarness: AppearanceHostHarnessFactory,
-  capabilities: readonly AppearanceHostCapability[],
-): void {
-  const has = (...needed: AppearanceHostCapability[]) => needed.every((c) => capabilities.includes(c));
-
-  describe(`AppearanceHost contract: ${name}`, () => {
-    const cleanup: (() => void)[] = [];
-    afterEach(() => {
-      for (const done of cleanup.splice(0).reverse()) done();
-    });
-
-    const setup = async (backend: Partial<AppearanceHostContractBackend> = {}) => {
-      const harness = await makeHarness({ stored: null, themes: { '/repo': [DUSK] }, ...backend });
-      cleanup.push(() => harness.dispose?.());
-      return harness;
-    };
-
-    it('offers exactly its capabilities; the members it leaves out are undefined', async () => {
-      const { host } = await setup();
-      expect(typeof host.prefs.get).toBe('function');
-      expect(typeof host.prefs.set).toBe('function');
-      for (const capability of CAPABILITIES) {
-        const value = member(host, capability);
-        if (!has(capability)) {
-          expect(value, capability).toBeUndefined();
-          continue;
-        }
-        const object = capability === 'boot' || capability === 'window';
-        expect(typeof value, capability).toBe(object ? 'object' : 'function');
-      }
-    });
-
-    describe('prefs', () => {
-      it('reads the defaults on a first run', async () => {
-        const { host } = await setup();
-        expect(host.prefs.get()).toEqual(DEFAULT_APPEARANCE);
-        expect(host.prefs.isFirstRun()).toBe(true);
-      });
-
-      it('reads a stored blob, and the defaults for one it cannot read', async () => {
-        const stored = JSON.stringify({ ...DEFAULT_APPEARANCE, mode: 'dark', contrast: 140 });
-        const { host } = await setup({ stored });
-        expect(host.prefs.get()).toMatchObject({ mode: 'dark', contrast: 140 });
-        expect(host.prefs.isFirstRun()).toBe(false);
-        const { host: broken } = await setup({ stored: 'not json' });
-        expect(broken.prefs.get()).toEqual(DEFAULT_APPEARANCE);
-      });
-
-      it('set merges, stores, tells subscribers, and a relaunch reads it', async () => {
-        const { host, control } = await setup();
-        const seen = vi.fn();
-        cleanup.push(host.prefs.subscribe(seen));
-        host.prefs.set({ mode: 'light', accentOverride: '#ff0000' });
-        expect(host.prefs.get()).toMatchObject({ mode: 'light', accentOverride: '#ff0000', contrast: 100 });
-        expect(seen).toHaveBeenCalledTimes(1);
-        expect(host.prefs.isFirstRun()).toBe(false);
-        await waitFor(() => expect(JSON.parse(control.stored() ?? '{}')).toMatchObject({ mode: 'light' }));
-        expect(control.reopen().prefs.get()).toMatchObject({ mode: 'light', accentOverride: '#ff0000' });
-      });
-
-      it('an equal set changes nothing; the function form replaces', async () => {
-        const { host } = await setup();
-        const seen = vi.fn();
-        cleanup.push(host.prefs.subscribe(seen));
-        host.prefs.set({ mode: DEFAULT_APPEARANCE.mode });
-        expect(seen).not.toHaveBeenCalled();
-        host.prefs.set((prev) => ({ ...prev, sidebarWidth: 300 }));
-        expect(host.prefs.get().sidebarWidth).toBe(300);
-        expect(seen).toHaveBeenCalledTimes(1);
-      });
-
-      it('reset goes back to the defaults', async () => {
-        const { host } = await setup({ stored: JSON.stringify({ ...DEFAULT_APPEARANCE, mode: 'dark' }) });
-        host.prefs.reset();
-        expect(host.prefs.get()).toEqual(DEFAULT_APPEARANCE);
-      });
-
-      it("adopts another window's change and tells subscribers", async () => {
-        const { host, control } = await setup();
-        const seen = vi.fn();
-        cleanup.push(host.prefs.subscribe(seen));
-        expect(host.prefs.get().mode).toBe('system');
-        control.storeExternally(JSON.stringify({ ...DEFAULT_APPEARANCE, mode: 'dark' }));
-        await waitFor(() => expect(seen).toHaveBeenCalled());
-        expect(host.prefs.get().mode).toBe('dark');
-      });
-    });
-
-    it.skipIf(!has('themes'))("lists a folder's extra themes, none for another folder", async () => {
-      const { host } = await setup();
-      expect((await host.themes!('/repo')).map((t) => t.id)).toEqual(['contract-dusk']);
-      expect(await host.themes!('/elsewhere')).toEqual([]);
-    });
-
-    it.skipIf(!has('boot'))('stores the pre-paint snapshot', async () => {
-      const { host, control } = await setup();
-      host.boot!.write({ appearance: 'light', vars: { '--zg-bg': '#ffffff' } });
-      await waitFor(() => expect(control.boot?.()).toEqual({ appearance: 'light', vars: { '--zg-bg': '#ffffff' } }));
-    });
-
-    it.skipIf(!has('window'))('passes window effects through', async () => {
-      const { host, control } = await setup();
-      if (has('window.setBackground')) await host.window!.setBackground!('#101010');
-      if (has('window.setZoom')) await host.window!.setZoom!(1.25);
-      if (has('window.setNativeTheme')) await host.window!.setNativeTheme!('dark');
-      const expected: AppearanceHostContractWindowCall[] = [
-        ...(has('window.setBackground') ? [{ kind: 'background' as const, color: '#101010' }] : []),
-        ...(has('window.setZoom') ? [{ kind: 'zoom' as const, factor: 1.25 }] : []),
-        ...(has('window.setNativeTheme') ? [{ kind: 'nativeTheme' as const, mode: 'dark' as const }] : []),
-      ];
-      await waitFor(() => expect(control.windowCalls?.()).toEqual(expected));
-    });
-  });
-}

package/src/appearance/testing/index.ts

@@ -1,6 +0,0 @@
-/**
- * `zidane-ui/appearance/testing`: an `AppearanceHost` that runs in memory
- * (`createFixtureAppearanceHost`), for docs, demos, galleries and an app's
- * own tests. Not for production hosts.
- */
-export * from '../headless/fixture-host';

package/src/approvals/ApprovalBar.tsx

@@ -1,227 +0,0 @@
-/**
- * The approval that waits above a session's composer: the inline card for a
- * tool call (the command or its input, Deny / Always allow / Allow once, with
- * esc, ⌘⇧↵ and ⌘↵), or, for the tools that write files, the file-edit review.
- */
-import { useEffect, useId, useRef, type CSSProperties, type ReactElement, type ReactNode } from 'react';
-
-import { buttonClass } from '../components/button';
-import { KeyCombo } from '../components/Keycap';
-import { useTranscriptRendererOverrides } from '../chat/transcript/renderer-slots';
-import { HighlightedCode } from '../code/HighlightedCode';
-import { ApprovalConcern } from './ApprovalConcern';
-import { useApprovalsLabels, useResolveApproval, useSessionApprovalHead } from './ApprovalsProvider';
-import { FileEditApproval } from './FileEditApproval';
-import type { ApprovalDecision, ApprovalRequest } from './headless/host';
-import { approvalPreview, isFileEditApproval } from './headless/preview';
-import { isEditorKeyEvent, isTypingFocused } from './key-scope';
-
-/* The three risk tiers, from the shared button vocabulary. */
-const PRIMARY = buttonClass({ variant: 'solid' });
-const SECONDARY = `${buttonClass({ variant: 'secondary' })} !text-[var(--zg-text)] font-medium`;
-const DESTRUCTIVE = buttonClass({ variant: 'danger-solid' });
-
-/** The card surface tinted with the warn color: an approval waits for the user. */
-const ATTENTION: CSSProperties = {
-  background: 'color-mix(in srgb, var(--zg-warn) 7%, var(--zg-raised))',
-  borderColor: 'color-mix(in srgb, var(--zg-warn) 35%, var(--zg-hairline))',
-};
-
-/** What {@link ApprovalCardProps.renderFrame} receives: the card's layout classes and its content. */
-export interface ApprovalFrameProps {
-  /** Always `attention`: the frame of something waiting for the user. */
-  tone: 'attention';
-  /** The card's layout classes (a column, capped in height), to put on the frame. */
-  className: string;
-  /** The card's content. */
-  children: ReactNode;
-}
-
-function DefaultFrame({ className, children }: ApprovalFrameProps) {
-  return (
-    // Inline: `.zg-raised` paints background and border after the utilities.
-    <div className={`zg-raised border rounded-zg-lg px-4 py-2 ${className}`} style={ATTENTION}>
-      {children}
-    </div>
-  );
-}
-
-/** A key binding as small keycaps. */
-function KeyHint({ spec }: { spec: string }) {
-  return (
-    <span className="ml-1.5 inline-flex">
-      <span className="inline-flex items-center gap-0.5 " data-size="sm">
-        <span className="contents">
-          <KeyCombo spec={spec} size="sm" physical />
-        </span>
-      </span>
-    </span>
-  );
-}
-
-/** Props for {@link ApprovalCard}. */
-export interface ApprovalCardProps {
-  /** The pending approval to show. */
-  request: ApprovalRequest;
-  /** Called with the user's decision. Absent: the card shows the request without its buttons. */
-  onResolve?: (requestId: string, decision: ApprovalDecision) => void;
-  /** Draws the card's surface (an app's own dock card). Default: a raised card tinted with the warn color. */
-  renderFrame?: (props: ApprovalFrameProps) => ReactElement;
-  /** Extra classes on the root (the `alertdialog`). */
-  className?: string;
-  /** Inline styles on the root. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the inline approval card: the tool, what worried the decision model, the command or
- * input (scrolling inside a capped body while the title and actions stay on screen), and the
- * decisions. Once per request, focus lands on the card itself, never on a button, unless the user
- * is typing somewhere.
- *
- * @param props - The `request`, `onResolve`, an optional `renderFrame`, `className` and `style`.
- */
-export function ApprovalCard({ request, onResolve, renderFrame, className = '', style }: ApprovalCardProps) {
-  const labels = useApprovalsLabels();
-  // The app's CodeBlock slot, else the kit's highlighter: never the transcript's markdown defaults.
-  const CodeBlock = useTranscriptRendererOverrides().CodeBlock ?? HighlightedCode;
-  const titleId = useId();
-  const cardRef = useRef<HTMLDivElement | null>(null);
-  const preview = approvalPreview(request.input, labels);
-  const Frame = renderFrame ?? DefaultFrame;
-
-  /*
-   * A plain Enter meant for the composer must not approve a command, so a keyboard or
-   * screen-reader user lands on the dialog. Someone typing keeps their caret (⌘↵ / esc decide).
-   */
-  useEffect(() => {
-    if (!isTypingFocused()) cardRef.current?.focus();
-  }, [request.id]);
-
-  return (
-    <div
-      ref={cardRef}
-      role="alertdialog"
-      aria-labelledby={titleId}
-      tabIndex={-1}
-      className={`outline-none ${className}`.trim()}
-      style={style}
-    >
-      <Frame tone="attention" className="flex flex-col gap-2 py-3 max-h-[60vh]">
-        <div className="flex items-center gap-2 min-h-7 text-xs shrink-0">
-          <span
-            aria-hidden
-            className="w-3 shrink-0 inline-flex items-center justify-center text-[var(--zg-text-muted)] "
-          >
-            <span className="w-1.5 h-1.5 rounded-full bg-[var(--zg-warn)]" />
-          </span>
-          <div className="flex-1 min-w-0">
-            <div id={titleId} className="text-sm font-semibold text-[var(--zg-text)]">
-              {`${labels.approvalRunBefore} `}
-              <span className="font-mono">{request.tool}</span>
-              {labels.approvalRunAfter}
-            </div>
-          </div>
-        </div>
-        {request.concern && <ApprovalConcern concern={request.concern} className="shrink-0" />}
-
-        <div data-approval-body className="flex-1 min-h-0 overflow-auto">
-          <CodeBlock code={preview.code} language={preview.language} />
-          {preview.meta.length > 0 && (
-            <div className="zg-meta flex flex-wrap gap-x-3 font-mono">
-              {preview.meta.map((line) => (
-                <span key={line}>{line}</span>
-              ))}
-            </div>
-          )}
-        </div>
-
-        {onResolve && (
-          <div className="shrink-0 flex flex-wrap items-center gap-2">
-            <button type="button" onClick={() => onResolve(request.id, 'deny')} className={DESTRUCTIVE}>
-              {labels.approvalDeny}
-              <KeyHint spec="esc" />
-            </button>
-            <div className="flex-1" />
-            <button type="button" onClick={() => onResolve(request.id, 'accept-safelist')} className={SECONDARY}>
-              {labels.approvalAlwaysAllow}
-              <KeyHint spec="cmd+shift+enter" />
-            </button>
-            <button type="button" onClick={() => onResolve(request.id, 'accept-once')} className={PRIMARY}>
-              {labels.approvalAllowOnce}
-              <KeyHint spec="cmd+enter" />
-            </button>
-          </div>
-        )}
-      </Frame>
-    </div>
-  );
-}
-
-/** Props for {@link ApprovalBar}. */
-export interface ApprovalBarProps {
-  /** The session whose first pending approval shows. `null`: nothing shows. */
-  sessionId: string | null;
-  /**
-   * Opens the file-edit review for an `edit`, `multi_edit` or `write_file` approval on the
-   * app's modal layer (once per request; the bar then renders nothing). Absent: the bar renders
-   * {@link FileEditApproval} in place.
-   */
-  onFileEdit?: (request: ApprovalRequest) => void;
-  /** Draws the inline card's surface. See {@link ApprovalCardProps.renderFrame}. */
-  renderFrame?: (props: ApprovalFrameProps) => ReactElement;
-  /** Extra classes on the inline card's root. */
-  className?: string;
-  /** Inline styles on the inline card's root. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders the first pending approval of a session: the inline {@link ApprovalCard}, or the
- * file-edit review for the tools that write files. While the inline card shows, esc denies (not
- * from inside the code editor, where it clears the selection), ⌘↵ allows once and ⌘⇧↵ always
- * allows. Renders nothing when the session has no pending approval.
- *
- * @param props - The `sessionId`, an optional `onFileEdit`, `renderFrame`, `className` and `style`.
- */
-export function ApprovalBar({ sessionId, onFileEdit, renderFrame, className, style }: ApprovalBarProps) {
-  const head = useSessionApprovalHead(sessionId);
-  const resolve = useResolveApproval();
-  const isFileEdit = head !== null && isFileEditApproval(head);
-
-  // The review is opened once per request: a re-render never opens a second one.
-  const openedForRef = useRef<string | null>(null);
-  useEffect(() => {
-    if (!head) {
-      openedForRef.current = null;
-      return;
-    }
-    if (!isFileEdit || !onFileEdit || openedForRef.current === head.id) return;
-    openedForRef.current = head.id;
-    onFileEdit(head);
-  }, [head, isFileEdit, onFileEdit]);
-
-  // The inline card's shortcuts. The file-edit review binds its own keys.
-  useEffect(() => {
-    if (!head || isFileEdit || !resolve) return undefined;
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape' && !isEditorKeyEvent(e)) resolve(head.id, 'deny');
-      else if (e.key === 'Enter' && e.metaKey && e.shiftKey) resolve(head.id, 'accept-safelist');
-      else if (e.key === 'Enter' && e.metaKey) resolve(head.id, 'accept-once');
-    };
-    window.addEventListener('keydown', onKey);
-    return () => window.removeEventListener('keydown', onKey);
-  }, [head, isFileEdit, resolve]);
-
-  if (!head) return null;
-  if (isFileEdit) return onFileEdit ? null : <FileEditApproval key={head.id} request={head} />;
-  return (
-    <ApprovalCard
-      request={head}
-      {...(resolve ? { onResolve: resolve } : {})}
-      {...(renderFrame ? { renderFrame } : {})}
-      {...(className ? { className } : {})}
-      {...(style ? { style } : {})}
-    />
-  );
-}

package/src/approvals/ApprovalConcern.tsx

@@ -1,33 +0,0 @@
-/**
- * What worried the decision model when it handed a call to the user, as one
- * metadata line (the approval card, the file-edit review).
- */
-import type { CSSProperties } from 'react';
-import type { ModelApproval } from 'zidane/chat';
-
-import { useApprovalsLabels } from './ApprovalsProvider';
-
-/** Props for {@link ApprovalConcern}. */
-export interface ApprovalConcernProps {
-  /** The decision model's verdict, from the request's `concern`. */
-  concern: ModelApproval;
-  /** Extra classes on the line. */
-  className?: string;
-  /** Inline styles on the line. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders what worried the decision model about a call it handed to the user.
- *
- * @param props - The `concern`, plus `className` and `style`.
- */
-export function ApprovalConcern({ concern, className = '', style }: ApprovalConcernProps) {
-  const labels = useApprovalsLabels();
-  return (
-    <div data-testid="approval-concern" className={`zg-meta flex items-baseline gap-1.5 ${className}`} style={style}>
-      <span aria-hidden className="i-ph-sparkle self-center" />
-      <span>{labels.approvalConcern(concern)}</span>
-    </div>
-  );
-}

package/src/approvals/ApprovalShell.tsx

@@ -1,69 +0,0 @@
-/**
- * The panel the file-edit review and the safelist draw in when the app gives
- * them no shell of its own: a header (title, description, close), a body and
- * an optional footer, on the floating surface. Placing it on a modal layer
- * (`Overlay`) is the app's: an app with its own modal shell passes it as
- * `renderShell` instead.
- */
-import { useId, type CSSProperties, type ReactNode } from 'react';
-
-import { IconButton } from '../components/IconButton';
-import { useApprovalsLabels } from './ApprovalsProvider';
-
-/** What a shell receives: the panel's title, description, content and footer, and how to close it. */
-export interface ApprovalShellProps {
-  /** The panel's heading. */
-  title: string;
-  /** A line under the heading. */
-  description?: string;
-  /** Called by the close button (the file-edit review denies). Absent: no close button. */
-  onClose?: () => void;
-  /** The actions row under the body. */
-  footer?: ReactNode;
-  /** The body. */
-  children: ReactNode;
-  /** Extra classes on the panel. */
-  className?: string;
-  /** Inline styles on the panel. */
-  style?: CSSProperties;
-}
-
-/**
- * Renders a titled panel with a body and an optional footer, as a `dialog` named by its title.
- *
- * @param props - The `title`, `description`, `onClose`, `footer`, `children`, `className` and `style`.
- */
-export function ApprovalShell({
-  title,
-  description,
-  onClose,
-  footer,
-  children,
-  className = '',
-  style,
-}: ApprovalShellProps) {
-  const labels = useApprovalsLabels();
-  const titleId = useId();
-  return (
-    <div
-      role="dialog"
-      aria-labelledby={titleId}
-      className={`zg-float max-w-full flex flex-col overflow-hidden ${className}`}
-      style={style}
-    >
-      <header className="flex items-start gap-2 px-5 py-3.5 border-b border-[var(--zg-hairline)]">
-        <div className="flex-1 min-w-0 self-center">
-          <h2 id={titleId} className="text-sm font-semibold text-[var(--zg-text)] m-0 zg-balance">
-            {title}
-          </h2>
-          {description && <p className="text-xs text-[var(--zg-text-muted)] mt-0.5 m-0 zg-pretty">{description}</p>}
-        </div>
-        {onClose && (
-          <IconButton icon="i-ph-x" label={labels.approvalClose} size="lg" onClick={onClose} className="-mr-2" />
-        )}
-      </header>
-      <div className="flex-1 min-h-0 px-5 py-4 overflow-y-auto">{children}</div>
-      {footer && <footer className="shrink-0 px-5 py-3 bg-[var(--zg-tray)]">{footer}</footer>}
-    </div>
-  );
-}