@gntik-ai/blocks 0.6.0 → 0.8.0

package/src/feedback/ConfirmDestructive/ConfirmDestructive.tsx

@@ -1,4 +1,4 @@
-import { Trash2 } from '@gntik-ai/icons';
+import { Lock, Trash2 } from '@gntik-ai/icons';
 import {
   AlertDialog,
   AlertDialogCancel,
@@ -11,9 +11,46 @@ import {
   Button,
   Field,
   FieldLabel,
+  EmptyState,
   Input,
+  useI18n,
 } from '@gntik-ai/ui';
-import { useState, type FormEvent, type ReactNode } from 'react';
+import { useLayoutEffect, useRef, useState, type ReactNode, type RefObject } from 'react';
+import { ErrorPanel } from '../ErrorPanel/ErrorPanel';
+import { NotFoundEmpty } from '../EmptyStates/EmptyStates';
+
+export type ConfirmDestructiveFailure =
+  | { kind: 'server'; title: string; message?: string; status?: number; requestId?: string }
+  | { kind: 'network'; title: string; message?: string }
+  | { kind: 'no-access' | 'not-found'; title: string; description?: string };
+
+function normalizeFailure(value: unknown): ConfirmDestructiveFailure | null {
+  if (!value || typeof value !== 'object' || !('kind' in value) || !('title' in value)) return null;
+  if (typeof value.title !== 'string' || !value.title.trim()) return null;
+  const title = value.title;
+  const message = 'message' in value && typeof value.message === 'string' ? value.message : undefined;
+  if (value.kind === 'server') {
+    return {
+      kind: 'server',
+      title,
+      message,
+      status:
+        'status' in value && typeof value.status === 'number' && Number.isFinite(value.status)
+          ? value.status
+          : undefined,
+      requestId: 'requestId' in value && typeof value.requestId === 'string' ? value.requestId : undefined,
+    };
+  }
+  if (value.kind === 'network') return { kind: 'network', title, message };
+  if (value.kind === 'no-access' || value.kind === 'not-found') {
+    return {
+      kind: value.kind,
+      title,
+      description: 'description' in value && typeof value.description === 'string' ? value.description : undefined,
+    };
+  }
+  return null;
+}
 
 export interface ConfirmDestructiveProps {
   /** Exact name the user must type to unlock the action. */
@@ -33,6 +70,12 @@ export interface ConfirmDestructiveProps {
   onOpenChange?: (open: boolean) => void;
   /** Runs on confirm. Returning a promise keeps the dialog open with a spinner until it settles; a rejection shows its message. */
   onConfirm?: () => void | Promise<void>;
+  /** Extra fields inside the form, outside its accessible description. */
+  children?: ReactNode;
+  /** Additional consumer validity; the exact typed-name match is always required. */
+  canConfirm?: boolean;
+  /** Focus destination when there is no internal trigger. Defaults to the opener. */
+  returnFocusRef?: RefObject<HTMLElement | null>;
 }
 
 /**
@@ -55,47 +98,143 @@ export function ConfirmDestructive({
   defaultOpen = false,
   onOpenChange,
   onConfirm,
+  children,
+  canConfirm = true,
+  returnFocusRef,
 }: ConfirmDestructiveProps) {
+  const { t } = useI18n();
   const [innerOpen, setInnerOpen] = useState(defaultOpen);
   const [typed, setTyped] = useState('');
   const [pending, setPending] = useState(false);
+  const pendingRef = useRef(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const cancelRef = useRef<HTMLButtonElement>(null);
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const focusedControl = useRef<HTMLElement | null>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const previousFocus = useRef<HTMLElement | null>(null);
   const [error, setError] = useState<string | null>(null);
+  const [announcementId, setAnnouncementId] = useState(0);
+  const [failure, setFailure] = useState<ConfirmDestructiveFailure | null>(null);
   const isOpen = open ?? innerOpen;
+  const [previousOpen, setPreviousOpen] = useState(isOpen);
+  const session = useRef(0);
+  // Reset controlled closes during render so a reopened form never paints old values.
+  if (previousOpen !== isOpen) {
+    setPreviousOpen(isOpen);
+    if (!isOpen) {
+      setTyped('');
+      setError(null);
+      setFailure(null);
+      setPending(false);
+    }
+  }
+  useLayoutEffect(() => {
+    session.current = session.current + 1;
+    pendingRef.current = false;
+    focusedControl.current = null;
+    if (isOpen && document.activeElement instanceof HTMLElement) previousFocus.current = document.activeElement;
+    return () => {
+      session.current++;
+    };
+  }, [isOpen]);
   const label = confirmLabel ?? `Delete ${resourceType}`;
   const matches = typed === resourceName;
+  const terminal = failure?.kind === 'no-access' || failure?.kind === 'not-found' ? failure : null;
+
+  useLayoutEffect(() => {
+    if (!isOpen || !popupRef.current) return;
+    const popup = popupRef.current;
+    const available = (element: HTMLElement | null, keepLoading = false) =>
+      element?.isConnected &&
+      popup.contains(element) &&
+      !element.closest('[hidden], [inert], [aria-hidden="true"]') &&
+      (!element.matches(':disabled, [aria-disabled="true"]') ||
+        (keepLoading && element.getAttribute('aria-busy') === 'true'));
+    const restore = () => {
+      if (!focusedControl.current || available(focusedControl.current, true)) return;
+      // This composition disables secondary actions and details, so Retry is the last panel button.
+      const retry = panelRef.current?.querySelectorAll<HTMLButtonElement>('button');
+      const target = [
+        retry?.item(retry.length - 1) ?? null,
+        inputRef.current,
+        cancelRef.current,
+        closeRef.current,
+      ].find((element) => available(element));
+      target?.focus();
+    };
+    restore();
+    const observer = new MutationObserver(restore);
+    observer.observe(popup, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ['disabled', 'aria-disabled', 'hidden', 'inert', 'aria-hidden'],
+    });
+    return () => observer.disconnect();
+  });
 
   const setOpen = (next: boolean) => {
     if (!next) {
+      session.current++;
+      pendingRef.current = false;
+      setPending(false);
       setTyped('');
       setError(null);
+      setFailure(null);
     }
     setInnerOpen(next);
     onOpenChange?.(next);
   };
 
-  const confirm = async (event: FormEvent) => {
-    event.preventDefault();
-    if (!matches || pending) return;
+  const confirm = async () => {
+    if (!isOpen || !matches || canConfirm === false || pendingRef.current || terminal) return;
+    const attemptSession = session.current;
+    pendingRef.current = true;
     setPending(true);
     setError(null);
     try {
       await onConfirm?.();
+      if (session.current !== attemptSession) return;
+      pendingRef.current = false;
       setPending(false);
       setOpen(false);
     } catch (err) {
+      if (session.current !== attemptSession) return;
+      pendingRef.current = false;
       setPending(false);
-      setError(err instanceof Error ? err.message : 'Something went wrong. Try again.');
+      const next = normalizeFailure(err);
+      setAnnouncementId((id) => id + 1);
+      setFailure(next);
+      setError(
+        next
+          ? [next.title, 'message' in next ? next.message : 'description' in next ? next.description : undefined]
+              .filter(Boolean)
+              .join(' ')
+          : err instanceof Error
+            ? err.message
+            : 'Something went wrong. Try again.',
+      );
     }
   };
 
   return (
     <AlertDialog open={isOpen} onOpenChange={(next) => !pending && setOpen(next)}>
       {triggerLabel !== null && (
-        <AlertDialogTrigger render={<Button variant="destructive" icon={Trash2} />}>
+        <AlertDialogTrigger ref={triggerRef} render={<Button variant="destructive" icon={Trash2} />}>
           {triggerLabel ?? label}
         </AlertDialogTrigger>
       )}
-      <AlertDialogContent>
+      <AlertDialogContent
+        ref={popupRef}
+        initialFocus={inputRef}
+        finalFocus={() => triggerRef.current ?? returnFocusRef?.current ?? previousFocus.current ?? true}
+        onFocusCapture={(event) => {
+          if (event.target !== event.currentTarget) focusedControl.current = event.target;
+        }}
+      >
         <AlertDialogHeader tone="destructive">
           <AlertDialogTitle>{title ?? `Delete ${resourceType}?`}</AlertDialogTitle>
           <AlertDialogDescription>
@@ -107,36 +246,88 @@ export function ConfirmDestructive({
             )}
           </AlertDialogDescription>
         </AlertDialogHeader>
-        {consequences.length > 0 && (
+        {!terminal && consequences.length > 0 && (
           <ul className="mt-4 list-disc space-y-1 rounded-md border border-destructive/25 bg-destructive/5 py-2.5 pe-3 ps-8 text-[12.5px] text-muted-foreground">
             {consequences.map((c) => (
               <li key={c}>{c}</li>
             ))}
           </ul>
         )}
-        <form onSubmit={(e) => void confirm(e)} className="mt-4">
-          <Field>
-            <FieldLabel>
-              Type <span className="font-mono font-semibold text-foreground">{resourceName}</span> to confirm
-            </FieldLabel>
-            <Input
-              value={typed}
-              onChange={(e) => setTyped(e.target.value)}
-              autoComplete="off"
-              spellCheck={false}
-              disabled={pending}
-            />
-          </Field>
-          {error && (
-            <p role="alert" className="mt-2 text-[12.5px] text-destructive-text">
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            void confirm();
+          }}
+          className="mt-4"
+        >
+          {terminal ? (
+            terminal.kind === 'no-access' ? (
+              <EmptyState icon={Lock} title={terminal.title} description={terminal.description ?? null} />
+            ) : (
+              <NotFoundEmpty title={terminal.title} description={terminal.description ?? null} />
+            )
+          ) : (
+            <>
+              {children}
+              <Field>
+                <FieldLabel>
+                  Type <span className="font-mono font-semibold text-foreground">{resourceName}</span> to confirm
+                </FieldLabel>
+                <Input
+                  ref={inputRef}
+                  value={typed}
+                  onChange={(e) => setTyped(e.target.value)}
+                  autoComplete="off"
+                  spellCheck={false}
+                  readOnly={pending}
+                />
+              </Field>
+              {(failure?.kind === 'server' || failure?.kind === 'network') && (
+                <div ref={panelRef}>
+                  <ErrorPanel
+                    title={failure.title}
+                    message={failure.message ?? null}
+                    code={failure.kind === 'server' ? (failure.status ?? null) : null}
+                    requestId={failure.kind === 'server' ? (failure.requestId ?? '') : ''}
+                    details=""
+                    secondaryAction={null}
+                    retrying={pending}
+                    retryLabel={t('error.retry')}
+                    onRetry={() => confirm()}
+                    announce={false}
+                    className="mt-4"
+                  />
+                </div>
+              )}
+            </>
+          )}
+          {error !== null && (
+            <p
+              key={announcementId}
+              role="alert"
+              className={failure ? 'sr-only' : 'mt-2 text-[12.5px] text-destructive-text'}
+            >
               {error}
             </p>
           )}
           <AlertDialogFooter className="mt-5">
-            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
-            <Button type="submit" variant="destructive" loading={pending} disabled={!matches}>
-              {label}
-            </Button>
+            {terminal ? (
+              <AlertDialogCancel ref={closeRef}>{t('common.close')}</AlertDialogCancel>
+            ) : (
+              <>
+                <AlertDialogCancel ref={cancelRef} disabled={pending}>
+                  {t('common.cancel')}
+                </AlertDialogCancel>
+                <Button
+                  type="submit"
+                  variant="destructive"
+                  loading={pending}
+                  disabled={!matches || canConfirm === false}
+                >
+                  {label}
+                </Button>
+              </>
+            )}
           </AlertDialogFooter>
         </form>
       </AlertDialogContent>

package/src/feedback/ConfirmDestructive/block.meta.ts

@@ -5,6 +5,6 @@ export const meta: BlockMeta = {
   family: 'feedback',
   status: 'beta',
   description:
-    'AlertDialog for irreversible actions that requires typing the resource name, with async confirm and error display.',
-  uses: ['AlertDialog', 'Button', 'Field', 'Input'],
+    'AlertDialog for irreversible actions with exact typed-name and optional canConfirm gating, extra form fields, typed failure states, guarded retry and focus return. See the plain deletion and secret revocation examples.',
+  uses: ['AlertDialog', 'Button', 'Field', 'Input', 'EmptyState'],
 };

package/src/feedback/ConfirmDestructive/examples/FailureStates.tsx

@@ -0,0 +1,39 @@
+import type { ConfirmDestructiveFailure } from '../ConfirmDestructive';
+import SecretRevocation from './SecretRevocation';
+
+// Consumers map HTTP and fetch failures; the dialog never infers a state from a status.
+const server: ConfirmDestructiveFailure = {
+  kind: 'server',
+  title: 'Could not revoke version',
+  message: 'Try again after checking the service.',
+  status: 500,
+  requestId: 'req_revoke_7',
+};
+const network: ConfirmDestructiveFailure = {
+  kind: 'network',
+  title: 'Connection lost',
+  message: 'Check your connection and try again.',
+};
+const noAccess: ConfirmDestructiveFailure = {
+  kind: 'no-access',
+  title: 'You cannot revoke this version',
+  description: 'Ask an administrator to review your permissions.',
+};
+const notFound: ConfirmDestructiveFailure = {
+  kind: 'not-found',
+  title: 'Version not found',
+  description: 'This version has already been removed.',
+};
+
+export function ServerFailure() {
+  return <SecretRevocation onConfirm={() => Promise.reject(server)} />;
+}
+export function NetworkFailure() {
+  return <SecretRevocation onConfirm={() => Promise.reject(network)} />;
+}
+export function NoAccessFailure() {
+  return <SecretRevocation onConfirm={() => Promise.reject(noAccess)} />;
+}
+export function NotFoundFailure() {
+  return <SecretRevocation onConfirm={() => Promise.reject(notFound)} />;
+}

package/src/feedback/ConfirmDestructive/examples/PlainDeletion.tsx

@@ -0,0 +1,6 @@
+import { ConfirmDestructive } from '../ConfirmDestructive';
+
+/** Exact-name deletion; all optional extensions may be omitted. */
+export default function PlainDeletion() {
+  return <ConfirmDestructive />;
+}

package/src/feedback/ConfirmDestructive/examples/SecretRevocation.tsx

@@ -0,0 +1,34 @@
+import { Checkbox, Field, FieldLabel, Stack, Textarea } from '@gntik-ai/ui';
+import { useState } from 'react';
+import { ConfirmDestructive } from '../ConfirmDestructive';
+
+/** Justification is optional here; use canConfirm to require it for a different policy. */
+export default function SecretRevocation({ onConfirm }: { onConfirm?: () => void | Promise<void> }) {
+  const [justification, setJustification] = useState('');
+  const [forceRevoke, setForceRevoke] = useState(false);
+  return (
+    <ConfirmDestructive
+      resourceName="version-7"
+      resourceType="secret version"
+      title="Revoke secret version?"
+      confirmLabel="Revoke version"
+      description="This is the last valid version. Revoking it may interrupt services that still use it."
+      consequences={['Services must switch to a valid version before this one is revoked.']}
+      onConfirm={onConfirm}
+      onOpenChange={(open) => {
+        if (!open) {
+          setJustification('');
+          setForceRevoke(false);
+        }
+      }}
+    >
+      <Stack gap={3} className="mb-4">
+        <Field>
+          <FieldLabel>Justification</FieldLabel>
+          <Textarea value={justification} onChange={(event) => setJustification(event.target.value)} />
+        </Field>
+        <Checkbox label="Force revocation" checked={forceRevoke} onCheckedChange={setForceRevoke} />
+      </Stack>
+    </ConfirmDestructive>
+  );
+}

package/src/feedback/EmptyStates/EmptyStates.test.tsx

@@ -1,9 +1,19 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { expectNoAxeViolations } from '../../test/a11y';
-import { FirstRunEmpty, NoAccessEmpty, NoResultsEmpty } from './EmptyStates';
+import { FirstRunEmpty, NoAccessEmpty, NoResultsEmpty, NotFoundEmpty } from './EmptyStates';
 
 describe('EmptyStates', () => {
+  it('renders not found copy without actions or live regions, and accepts an action', async () => {
+    const { container, rerender } = render(<NotFoundEmpty title="Resource missing" description="It was deleted." />);
+    expect(screen.getByRole('heading', { name: 'Resource missing' })).toBeVisible();
+    expect(screen.getByText('It was deleted.')).toBeVisible();
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+    expect(container.querySelector('[role="alert"], [role="status"], [aria-live]')).toBeNull();
+    await expectNoAxeViolations(container);
+    rerender(<NotFoundEmpty action={<button>Go back</button>} />);
+    expect(screen.getByRole('button', { name: 'Go back' })).toBeVisible();
+  });
   it('renders the three defaults', async () => {
     const { container } = render(
       <>

package/src/feedback/EmptyStates/EmptyStates.tsx

@@ -2,7 +2,7 @@ import { Check, FolderPlus, Lock, SearchX } from '@gntik-ai/icons';
 import type { LucideIcon } from '@gntik-ai/icons';
 import { Button, EmptyState, Link, cn } from '@gntik-ai/ui';
 import { useState, type ReactNode } from 'react';
-import { firstRunSteps, noAccessSample, noResultsSample } from './fixtures';
+import { firstRunSteps, noAccessSample, noResultsSample, notFoundSample } from './fixtures';
 
 interface SharedEmptyProps {
   /** Heading level that fits the page outline. */
@@ -12,6 +12,36 @@ interface SharedEmptyProps {
   className?: string;
 }
 
+export interface NotFoundEmptyProps extends SharedEmptyProps {
+  icon?: LucideIcon;
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+}
+
+/** Missing resource state; consumers may supply an optional way back. */
+export function NotFoundEmpty({
+  icon = SearchX,
+  title = notFoundSample.title,
+  description = notFoundSample.description,
+  action,
+  titleAs,
+  bordered = true,
+  className,
+}: NotFoundEmptyProps) {
+  return (
+    <EmptyState
+      icon={icon}
+      title={title}
+      description={description}
+      primaryAction={action}
+      titleAs={titleAs}
+      bordered={bordered}
+      className={cn('mx-auto', className)}
+    />
+  );
+}
+
 export interface FirstRunEmptyProps extends SharedEmptyProps {
   icon?: LucideIcon;
   title?: ReactNode;

package/src/feedback/EmptyStates/block.meta.ts

@@ -5,6 +5,6 @@ export const meta: BlockMeta = {
   family: 'feedback',
   status: 'beta',
   description:
-    'Three canonical empty states: first run (with checklist), no results (clear filters/search) and no access (request access).',
+    'Four canonical empty states: first run (with checklist), no results (clear filters/search), no access (request access) and not found (optional action).',
   uses: ['EmptyState', 'Button', 'Link'],
 };

package/src/feedback/EmptyStates/fixtures.ts

@@ -4,3 +4,8 @@ export const firstRunSteps = ['Connect a Git repository', 'Configure build setti
 export const noResultsSample = { query: 'billing-api', filterCount: 2, entity: 'projects' } as const;
 
 export const noAccessSample = { resource: 'Billing', owner: 'an organization admin' } as const;
+
+export const notFoundSample = {
+  title: 'Resource not found',
+  description: 'This resource may have been deleted or moved.',
+} as const;

package/src/feedback/ErrorPanel/ErrorPanel.test.tsx

@@ -4,6 +4,13 @@ import { expectNoAxeViolations } from '../../test/a11y';
 import { ErrorPanel } from './ErrorPanel';
 
 describe('ErrorPanel', () => {
+  it('allows its caller to own announcements while preserving the default status region', () => {
+    const { rerender } = render(<ErrorPanel />);
+    expect(screen.getByRole('status')).toBeInTheDocument();
+    rerender(<ErrorPanel announce={false} />);
+    expect(screen.queryByRole('status')).not.toBeInTheDocument();
+    expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+  });
   it('accepts a null code to hide the fixture chip', () => {
     render(<ErrorPanel code={null} />);
     expect(screen.queryByText('503')).not.toBeInTheDocument();

package/src/feedback/ErrorPanel/ErrorPanel.tsx

@@ -24,6 +24,8 @@ export interface ErrorPanelProps {
   secondaryAction?: FeedbackAction | null;
   titleAs?: 'h2' | 'h3';
   className?: string;
+  /** Disable the status region when a parent owns announcements. */
+  announce?: boolean;
 }
 
 /** Error summary for a failed load or action: what happened, request id, retry and technical details. */
@@ -40,6 +42,7 @@ export function ErrorPanel({
   secondaryAction = { label: 'Contact support', variant: 'ghost' },
   titleAs: Heading = 'h3',
   className,
+  announce = true,
 }: ErrorPanelProps) {
   const { t } = useI18n();
   const retryLabel = retryLabelProp ?? t('error.retry');
@@ -136,9 +139,11 @@ export function ErrorPanel({
               </CollapsiblePanel>
             </Collapsible>
           )}
-          <p role="status" className="sr-only">
-            {busy ? t('error.retryingStatus') : copied ? t('error.requestIdCopied') : ''}
-          </p>
+          {announce && (
+            <p role="status" className="sr-only">
+              {busy ? t('error.retryingStatus') : copied ? t('error.requestIdCopied') : ''}
+            </p>
+          )}
         </div>
       </div>
     </section>