@gntik-ai/templates 0.6.0 → 0.7.0

package/src/create-wizard/Flow.tsx

@@ -0,0 +1,199 @@
+import { DescriptionListCard } from '@gntik-ai/blocks';
+import { Heading, Link, LiveAnnouncer, Stack, WizardLayout, useAnnounce, useHasLiveAnnouncer } from '@gntik-ai/ui';
+import { useEffect, useEffectEvent, useId, useLayoutEffect, useRef, useState } from 'react';
+import { useSubmitState } from './useSubmitState';
+import type { CreateWizardFlowProps } from './flow-types';
+export type {
+  CreateWizardFlowProps,
+  CreateWizardFlowLabels,
+  CreateWizardFlowStep,
+  CreateWizardFieldErrors,
+  CreateWizardSubmitState,
+} from './flow-types';
+
+/** Additive caller-defined flow; the legacy page retains its original props and defaults. */
+export function CreateWizardFlow<V extends object>(props: CreateWizardFlowProps<V>) {
+  return useHasLiveAnnouncer() ? (
+    <Flow {...props} />
+  ) : (
+    <LiveAnnouncer>
+      <Flow {...props} />
+    </LiveAnnouncer>
+  );
+}
+
+function Flow<V extends object>(props: CreateWizardFlowProps<V>) {
+  const { flowSteps, initialValues, summary, labels, onExit } = props;
+  const { state, finish, reset, successText, errorText } = useSubmitState(props);
+  const id = useId();
+  const announce = useAnnounce();
+  const focused = useRef<HTMLElement | null>(null);
+  const [step, setStep] = useState(() =>
+    props.submitState && props.submitState.status !== 'idle' ? flowSteps.length : 0,
+  );
+  const [values, setValues] = useState(initialValues);
+  const [visited, setVisited] = useState<ReadonlySet<string>>(new Set());
+  const [invalidPress, setInvalidPress] = useState(0);
+  const body = useRef<HTMLElement>(null);
+  const editFocus = useRef(false);
+  const current = flowSteps[step];
+  const validation = current?.validate?.(values);
+  const fieldErrors = current?.readOnly ? {} : (validation?.fieldErrors ?? {});
+  const errors = current && visited.has(current.id) ? fieldErrors : {};
+  const blocking = validation?.blocking;
+  const locked = state.status === 'submitting' || state.status === 'success';
+  const resource = state.status === 'success' && state.result != null ? props.resourceHref?.(state.result) : undefined;
+  const headingId = `${id}-heading`;
+  const steps = [...flowSteps.map(({ id, label }) => ({ id, label })), { id: `${id}-review`, label: labels.review }];
+
+  const active = props.mode !== 'overlay' || props.open === true;
+  useEffect(() => {
+    if (!active || !blocking) return;
+    const frame = requestAnimationFrame(() => announce(blocking));
+    return () => cancelAnimationFrame(frame);
+  }, [active, step, blocking, announce]);
+  const announceStep = useEffectEvent(() => {
+    if (!blocking && (current || state.status === 'idle'))
+      announce(
+        labels.stepAnnouncement({
+          position: step + 1,
+          total: flowSteps.length + 1,
+          label: current?.label ?? labels.review,
+        }),
+      );
+  });
+  useEffect(() => {
+    if (!active || props.mode !== 'overlay') return;
+    const frame = requestAnimationFrame(() => announceStep());
+    return () => cancelAnimationFrame(frame);
+  }, [active, step, props.mode]);
+  useLayoutEffect(() => {
+    const previous = focused.current;
+    if (!active || !previous) return;
+    const disabled = previous.matches(':disabled');
+    const removed = !previous.isConnected;
+    if ((disabled || removed) && (document.activeElement === previous || document.activeElement === document.body))
+      (state.status === 'success'
+        ? (body.current?.querySelector<HTMLElement>('[data-flow-success] a[href]') ??
+          body.current?.querySelector<HTMLElement>('[data-flow-success] h2'))
+        : body.current?.querySelector<HTMLElement>('h1')
+      )?.focus();
+  });
+  useLayoutEffect(() => {
+    if (invalidPress) body.current?.querySelector<HTMLElement>('[aria-invalid="true"]')?.focus();
+  }, [invalidPress]);
+  useLayoutEffect(() => {
+    if (editFocus.current) {
+      body.current?.querySelector<HTMLElement>('h1')?.focus();
+      editFocus.current = false;
+    }
+  }, [step]);
+
+  const go = (next: number) => {
+    if (locked || (next > step && blocking)) return;
+    if (next > step && current) setVisited((previous) => new Set([...previous, current.id]));
+    if (next > step && current && Object.values(fieldErrors).some(Boolean)) {
+      setInvalidPress((press) => press + 1);
+      return;
+    }
+    setStep(next);
+  };
+  const rows = current ? [] : summary(values);
+  return (
+    <WizardLayout
+      mode={props.mode}
+      size={props.size}
+      open={props.open}
+      onOpenChange={props.onOpenChange}
+      description={props.description}
+      returnFocusRef={props.returnFocusRef}
+      closeOnInteractOutside={props.closeOnInteractOutside}
+      confirmExit={props.confirmExit}
+      fullScreen
+      title={labels.title}
+      steps={steps}
+      current={step}
+      onFocusCapture={(event) => {
+        if (event.target instanceof HTMLElement) focused.current = event.target;
+      }}
+      onStepChange={go}
+      stepsInteractive={false}
+      nextDisabled={Boolean(blocking) || state.status === 'success'}
+      backDisabled={locked}
+      onExit={() => {
+        reset();
+        setValues(initialValues);
+        setStep(0);
+        setVisited(new Set());
+        setInvalidPress(0);
+        onExit();
+      }}
+      onFinish={() => void finish(values)}
+      nextLoading={state.status === 'submitting'}
+      exitLabel={labels.exit}
+      backLabel={labels.back}
+      nextLabel={labels.next}
+      finishLabel={state.status === 'submitting' ? labels.pending : labels.finish}
+      pendingLabel={labels.pending}
+      cancelLabel={labels.cancel}
+      stepsLabel={labels.steps}
+      stepsSummaryLabel={labels.stepsSummary}
+      skipLinkLabel={labels.skipLink}
+      stepStatusText={labels.stepStatusText}
+      formatStepCount={labels.formatStepCount}
+      stepAnnouncement={() => ''}
+      exitTitle={labels.exitTitle}
+      exitDescription={labels.exitDescription}
+      exitConfirmLabel={labels.exitConfirm}
+      exitCancelLabel={labels.exitCancel}
+    >
+      <section ref={body} aria-labelledby={headingId}>
+        <Stack gap={6}>
+          <Heading level={1} id={headingId} tabIndex={-1} size="lg">
+            {current?.label ?? labels.reviewTitle}
+          </Heading>
+          {current
+            ? current.render({
+                values,
+                setValue: (key, value) => setValues((previous) => ({ ...previous, [key]: value })),
+                errors,
+              })
+            : flowSteps.map((source, index) => (
+                <DescriptionListCard
+                  key={source.id}
+                  titleAs="h2"
+                  title={source.label}
+                  description=""
+                  editLabel={labels.edit(source.label)}
+                  onEdit={
+                    locked
+                      ? undefined
+                      : () => {
+                          editFocus.current = true;
+                          go(index);
+                        }
+                  }
+                  items={rows
+                    .filter((row) => row.stepId === source.id)
+                    .map((row, rowIndex) => ({
+                      id: `${source.id}-${rowIndex}`,
+                      label: row.label,
+                      value: row.value || labels.emptyValue,
+                    }))}
+                />
+              ))}
+          {state.status === 'error' && <p className="text-destructive-text">{errorText}</p>}
+          {state.status === 'success' && (
+            <div data-flow-success>
+              <Heading level={2} tabIndex={-1}>
+                {successText}
+              </Heading>
+              {resource && <Link href={resource}>{labels.openResource}</Link>}
+            </div>
+          )}
+          {blocking && <p className="text-destructive-text">{blocking}</p>}
+        </Stack>
+      </section>
+    </WizardLayout>
+  );
+}

package/src/create-wizard/Page.tsx

@@ -1,3 +1,4 @@
+import { CreateWizardFlow, type CreateWizardFlowProps } from './Flow';
 import { DescriptionListCard } from '@gntik-ai/blocks';
 import {
   Checkbox,
@@ -18,7 +19,7 @@ import {
   type StepItem,
   type WizardLayoutProps,
 } from '@gntik-ai/ui';
-import { useId, useState, type ReactNode } from 'react';
+import { useId, useState, type ReactNode, type ReactElement } from 'react';
 import {
   PROJECT_NAME_RE,
   wizardCopy,
@@ -73,7 +74,7 @@ function StepIntro({ id, title, children }: { id: string; title: string; childre
 }
 
 /** Multi-step create flow in the focus-mode WizardLayout, ending in a review of every answer. */
-export default function CreateWizardPage({
+function LegacyCreateWizardPage({
   title = 'New project',
   steps = wizardSteps,
   initialValues = wizardInitialValues,
@@ -244,3 +245,33 @@ export default function CreateWizardPage({
     </WizardLayout>
   );
 }
+
+/** flowSteps selects the additive variant; legacy props cannot be combined with it. */
+export default function CreateWizardPage(
+  props: Partial<CreateWizardProps> & {
+    flowSteps?: never;
+    labels?: never;
+    summary?: never;
+    submitState?: never;
+    onComplete?: never;
+    resourceHref?: never;
+    errorMessage?: never;
+  },
+): ReactElement;
+export default function CreateWizardPage<V extends object>(props: CreateWizardFlowProps<V>): ReactElement;
+export default function CreateWizardPage<V extends object>(
+  props:
+    | CreateWizardFlowProps<V>
+    | (Partial<CreateWizardProps> & {
+        flowSteps?: never;
+        labels?: never;
+        summary?: never;
+        submitState?: never;
+        onComplete?: never;
+        resourceHref?: never;
+        errorMessage?: never;
+      }),
+) {
+  if (props.flowSteps !== undefined) return <CreateWizardFlow {...props} />;
+  return <LegacyCreateWizardPage {...props} />;
+}

package/src/create-wizard/Page.types.test.tsx

@@ -0,0 +1,52 @@
+import { expectTypeOf } from 'vitest';
+import type { ReactElement } from 'react';
+import CreateWizardPage from './Page';
+import type { CreateWizardFlowProps } from './Flow';
+import { flowLabels } from './examples/labels';
+
+it('preserves legacy async callback contextual typing', () => {
+  const navigate = () => {};
+  const page = <CreateWizardPage onFinish={() => new Promise<void>((resolve) => resolve()).then(() => navigate())} />;
+  expectTypeOf(page).toMatchTypeOf<ReactElement>();
+});
+
+it('keeps legacy props separate from caller-defined flow props', () => {
+  // Compile-only public API checks; these functions are never invoked.
+  const check = (flow: CreateWizardFlowProps<{ name: string }>) => {
+    // @ts-expect-error flow mode cannot mix with the legacy copy model
+    CreateWizardPage({ ...flow, copy: {} });
+    // @ts-expect-error flow mode cannot mix with legacy Stepper-only steps
+    CreateWizardPage({ ...flow, steps: [] });
+  };
+  expectTypeOf(check).toBeFunction();
+});
+
+it('infers caller value keys and setter types through the public page', () => {
+  const page = (
+    <CreateWizardPage
+      initialValues={{ email: '', count: 0 }}
+      labels={flowLabels}
+      onExit={() => {}}
+      flowSteps={[
+        {
+          id: 'recipient',
+          label: 'Recipient',
+          render: ({ values, setValue }) => {
+            expectTypeOf(values.email).toEqualTypeOf<string>();
+            expectTypeOf(values.count).toEqualTypeOf<number>();
+            // @ts-expect-error caller numeric values reject strings
+            setValue('count', 'wrong type');
+            // @ts-expect-error setters accept caller keys only
+            setValue('unknown', 'value');
+            return values.email;
+          },
+        },
+      ]}
+      summary={(values) => [{ stepId: 'recipient', label: 'Email', value: values.email }]}
+      onFinish={async (values) => {
+        expectTypeOf(values.email).toEqualTypeOf<string>();
+      }}
+    />
+  );
+  expectTypeOf(page).toMatchTypeOf<ReactElement>();
+});

package/src/create-wizard/examples/ControlledError.tsx

@@ -0,0 +1,6 @@
+import FlowExample from './FlowExample';
+
+/** A snapshot of caller-owned submit state. See template.meta.ts for the abort-aware handler. */
+export default function ControlledError() {
+  return <FlowExample submitState={{ status: 'error' }} />;
+}

package/src/create-wizard/examples/ControlledIdle.tsx

@@ -0,0 +1,6 @@
+import FlowExample from './FlowExample';
+
+/** A snapshot of caller-owned submit state. See template.meta.ts for the abort-aware handler. */
+export default function ControlledIdle() {
+  return <FlowExample submitState={{ status: 'idle' }} />;
+}

package/src/create-wizard/examples/ControlledSubmitting.tsx

@@ -0,0 +1,6 @@
+import FlowExample from './FlowExample';
+
+/** A snapshot of caller-owned submit state. See template.meta.ts for the abort-aware handler. */
+export default function ControlledSubmitting() {
+  return <FlowExample submitState={{ status: 'submitting' }} />;
+}

package/src/create-wizard/examples/ControlledSuccess.tsx

@@ -0,0 +1,6 @@
+import FlowExample from './FlowExample';
+
+/** A snapshot of caller-owned submit state. See template.meta.ts for the abort-aware handler. */
+export default function ControlledSuccess() {
+  return <FlowExample submitState={{ status: 'success', result: '#created-resource' }} />;
+}

package/src/create-wizard/examples/FlowExample.tsx

@@ -0,0 +1,60 @@
+import { Field, FieldLabel, Input, LiveAnnouncer } from '@gntik-ai/ui';
+import { useState } from 'react';
+import CreateWizardPage from '../Page';
+import type { CreateWizardSubmitState } from '../Flow';
+import { flowLabels } from './labels';
+
+/** Keep the announcer at page level if onComplete closes the wizard. */
+export default function FlowExample({
+  outcome = 'success',
+  submitState,
+}: {
+  outcome?: 'pending' | 'success' | 'error';
+  submitState?: CreateWizardSubmitState;
+}) {
+  const [controlled] = useState(() => submitState !== undefined);
+  const [callerState, setCallerState] = useState<CreateWizardSubmitState>(submitState ?? { status: 'idle' });
+  const target = submitState?.status === 'submitting' ? 'pending' : submitState?.status === 'error' ? 'error' : outcome;
+  return (
+    <LiveAnnouncer>
+      <CreateWizardPage
+        labels={flowLabels}
+        initialValues={{ name: 'Example resource' }}
+        flowSteps={[
+          {
+            id: 'details',
+            label: 'Resource details',
+            render: ({ values, setValue }) => (
+              <Field>
+                <FieldLabel>Resource name</FieldLabel>
+                <Input value={values.name} onValueChange={(value) => setValue('name', value)} />
+              </Field>
+            ),
+          },
+        ]}
+        summary={(values) => [{ stepId: 'details', label: 'Resource name', value: values.name }]}
+        submitState={controlled ? callerState : undefined}
+        resourceHref={(result) => (typeof result === 'string' ? result : undefined)}
+        onExit={() => {
+          if (controlled) setCallerState({ status: 'idle' });
+        }}
+        onFinish={async (_values, { signal }) => {
+          if (controlled) setCallerState({ status: 'submitting' });
+          try {
+            // Commit the caller-owned pending state before this example transport settles.
+            await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+            if (signal.aborted) return;
+            if (target === 'pending') return await new Promise<unknown>(() => {});
+            if (target === 'error') throw new Error('Example transport failure');
+            const result = '#created-resource';
+            if (controlled && !signal.aborted) setCallerState({ status: 'success', result });
+            return result;
+          } catch (error: unknown) {
+            if (controlled && !signal.aborted) setCallerState({ status: 'error', error });
+            throw error;
+          }
+        }}
+      />
+    </LiveAnnouncer>
+  );
+}

package/src/create-wizard/examples/FlowExamples.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Pending from './UncontrolledPending';
+import Success from './UncontrolledSuccess';
+import ErrorExample from './UncontrolledError';
+import ControlledIdle from './ControlledIdle';
+import ControlledSubmitting from './ControlledSubmitting';
+import ControlledSuccess from './ControlledSuccess';
+import ControlledError from './ControlledError';
+import { expectNoAxeViolations } from '../../test/a11y';
+
+it.each([
+  ['pending', Pending],
+  ['success', Success],
+  ['error', ErrorExample],
+  ['idle', ControlledIdle],
+  ['submitting', ControlledSubmitting],
+  ['success', ControlledSuccess],
+  ['error', ControlledError],
+] as const)('walks and renders the %s example without accessibility violations', async (state, Example) => {
+  const user = userEvent.setup();
+  const { container } = render(<Example />);
+  if (screen.queryByRole('button', { name: 'Next' })) {
+    await expectNoAxeViolations(container);
+    await user.click(screen.getByRole('button', { name: 'Next' }));
+    await expectNoAxeViolations(container);
+    await user.click(screen.getByRole('button', { name: 'Create resource' }));
+  }
+  if (state === 'pending' || state === 'submitting')
+    expect(screen.getByRole('button', { name: 'Creating resource…' })).toHaveAttribute('aria-disabled', 'true');
+  if (state === 'success') expect(await screen.findByRole('heading', { name: 'Resource created' })).toBeInTheDocument();
+  if (state === 'error')
+    expect(await screen.findByText('Could not create the resource. Try again.', { selector: 'p' })).toBeInTheDocument();
+  await expectNoAxeViolations(container);
+});
+
+it('resets a controlled example to idle when exit is confirmed', async () => {
+  const user = userEvent.setup();
+  render(<ControlledSubmitting />);
+  await user.click(screen.getByRole('button', { name: 'Exit' }));
+  await user.click(await screen.findByRole('button', { name: 'Leave' }));
+  const next = await screen.findByRole('button', { name: 'Next' });
+  expect(next).not.toHaveAttribute('aria-disabled', 'true');
+  await user.click(next);
+  expect(screen.getByRole('heading', { name: 'Review resource' })).toBeInTheDocument();
+});
+
+it('passes through controlled submitting before announcing completion', async () => {
+  const user = userEvent.setup();
+  const { container } = render(<ControlledIdle />);
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  await user.click(screen.getByRole('button', { name: 'Create resource' }));
+  await screen.findByRole('heading', { name: 'Resource created' });
+  await waitFor(() =>
+    expect(container.querySelector('[data-live-announcer="polite"]')).toHaveTextContent('Resource created'),
+  );
+});

package/src/create-wizard/examples/Invite.test.tsx

@@ -0,0 +1,47 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Invite from './Invite';
+
+it('invites one recipient with quota revalidation, three roles and a 500-character optional message', async () => {
+  const user = userEvent.setup();
+  const onFinish = vi.fn(async () => undefined);
+  const { rerender } = render(<Invite members={{ count: 3, limit: 3 }} onFinish={onFinish} />);
+  expect(screen.getByText('Example team')).toBeInTheDocument();
+  expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  expect(screen.getByRole('button', { name: 'Next' })).toBeDisabled();
+  await waitFor(() =>
+    expect(document.querySelector('[data-live-announcer="polite"]')).toHaveTextContent(
+      'Your member limit has been reached.',
+    ),
+  );
+  rerender(<Invite members={{ count: 2, limit: 3 }} onFinish={onFinish} />);
+  expect(screen.getByRole('button', { name: 'Next' })).toBeEnabled();
+  const email = screen.getByRole('textbox', { name: 'Email address' });
+  await user.type(email, 'bad@');
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  expect(email).toHaveFocus();
+  expect(screen.getByText('Enter a valid email address.')).toBeInTheDocument();
+  await user.clear(email);
+  await user.type(email, 'person@example.com');
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  await user.click(screen.getByRole('combobox', { name: 'Role' }));
+  expect(within(await screen.findByRole('listbox')).getAllByRole('option')).toHaveLength(3);
+  for (const role of ['Owner', 'Admin', 'Member'])
+    expect(screen.getByRole('option', { name: role })).toBeInTheDocument();
+  await user.click(screen.getByRole('option', { name: 'Admin' }));
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  const message = screen.getByRole('textbox', { name: 'Message (optional)' });
+  expect(message).toHaveAttribute('maxlength', '500');
+  await user.click(message);
+  await user.paste('Welcome to the team.');
+  await user.click(screen.getByRole('button', { name: 'Next' }));
+  expect(screen.getByText('person@example.com')).toBeInTheDocument();
+  expect(screen.getByText('Admin')).toBeInTheDocument();
+  expect(screen.getByText('Welcome to the team.')).toBeInTheDocument();
+  await user.click(screen.getByRole('button', { name: 'Send invitation' }));
+  expect(onFinish).toHaveBeenCalledExactlyOnceWith(
+    { workspaceId: 'example-team', email: 'person@example.com', role: 'admin', message: 'Welcome to the team.' },
+    { signal: expect.any(AbortSignal) },
+  );
+});

package/src/create-wizard/examples/Invite.tsx

@@ -0,0 +1,114 @@
+import { Field, FieldError, FieldLabel, Input, LiveAnnouncer, SimpleSelect, Textarea } from '@gntik-ai/ui';
+import CreateWizardPage from '../Page';
+import type { CreateWizardFlowProps, CreateWizardFlowStep } from '../Flow';
+import { flowLabels } from './labels';
+
+interface InviteValues {
+  workspaceId: string;
+  email: string;
+  role: string;
+  message: string;
+}
+
+// Same single-address format and three-role semantics as InviteMembersDialog.
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const copy = {
+  ...flowLabels,
+  title: 'Invite a member',
+  finish: 'Send invitation',
+  pending: 'Sending invitation…',
+  reviewTitle: 'Review invitation',
+  steps: 'Invitation progress',
+  stepsSummary: 'Invitation progress summary',
+  success: () => 'Invitation sent',
+  errorFallback: 'Could not send the invitation. Try again.',
+  openResource: 'Open member',
+  workspace: 'Workspace',
+  workspaceValue: 'Example team',
+  email: 'Email address',
+  emailError: 'Enter a valid email address.',
+  quota: 'Your member limit has been reached.',
+  role: 'Role',
+  rolePlaceholder: 'Choose a role',
+  message: 'Message (optional)',
+  roleItems: [
+    { value: 'owner', label: 'Owner' },
+    { value: 'admin', label: 'Admin' },
+    { value: 'member', label: 'Member' },
+  ],
+};
+const initialValues: InviteValues = { workspaceId: 'example-team', email: '', role: 'member', message: '' };
+const submit = async (values: InviteValues) => ({ email: values.email });
+
+/** Generic single-recipient invite; members.count models a caller-owned quota. */
+export default function Invite({
+  members = { count: 1, limit: 5 },
+  onFinish = submit,
+}: {
+  members?: { count: number; limit: number };
+  onFinish?: CreateWizardFlowProps<InviteValues>['onFinish'];
+}) {
+  const flowSteps: CreateWizardFlowStep<InviteValues>[] = [
+    { id: 'workspace', label: copy.workspace, readOnly: true, render: () => <p>{copy.workspaceValue}</p> },
+    {
+      id: 'email',
+      label: copy.email,
+      validate: (values) => ({
+        fieldErrors: EMAIL_RE.test(values.email) ? {} : { email: copy.emailError },
+        blocking: members.count >= members.limit ? copy.quota : undefined,
+      }),
+      render: ({ values, setValue, errors }) => (
+        <Field invalid={Boolean(errors.email)}>
+          <FieldLabel>{copy.email}</FieldLabel>
+          <Input type="email" value={values.email} onValueChange={(value) => setValue('email', value)} />
+          <FieldError match={Boolean(errors.email)}>{errors.email}</FieldError>
+        </Field>
+      ),
+    },
+    {
+      id: 'role',
+      label: copy.role,
+      render: ({ values, setValue }) => (
+        <SimpleSelect
+          label={copy.role}
+          placeholder={copy.rolePlaceholder}
+          items={copy.roleItems}
+          value={values.role}
+          onValueChange={(value) => value && setValue('role', value)}
+        />
+      ),
+    },
+    {
+      id: 'message',
+      label: copy.message,
+      render: ({ values, setValue }) => (
+        <Field>
+          <FieldLabel>{copy.message}</FieldLabel>
+          <Textarea
+            rows={4}
+            maxLength={500}
+            value={values.message}
+            onValueChange={(value) => setValue('message', value)}
+          />
+        </Field>
+      ),
+    },
+  ];
+  return (
+    <LiveAnnouncer>
+      <CreateWizardPage
+        labels={copy}
+        initialValues={initialValues}
+        flowSteps={flowSteps}
+        summary={(values) => [
+          { stepId: 'workspace', label: copy.workspace, value: copy.workspaceValue },
+          { stepId: 'email', label: copy.email, value: values.email },
+          { stepId: 'role', label: copy.role, value: copy.roleItems.find((role) => role.value === values.role)?.label },
+          { stepId: 'message', label: copy.message, value: values.message },
+        ]}
+        onFinish={onFinish}
+        onExit={() => {}}
+      />
+    </LiveAnnouncer>
+  );
+}

package/src/create-wizard/examples/UncontrolledError.tsx

@@ -0,0 +1,5 @@
+import FlowExample from './FlowExample';
+
+export default function UncontrolledError() {
+  return <FlowExample outcome="error" />;
+}

package/src/create-wizard/examples/UncontrolledPending.tsx

@@ -0,0 +1,5 @@
+import FlowExample from './FlowExample';
+
+export default function UncontrolledPending() {
+  return <FlowExample outcome="pending" />;
+}

package/src/create-wizard/examples/UncontrolledSuccess.tsx

@@ -0,0 +1,5 @@
+import FlowExample from './FlowExample';
+
+export default function UncontrolledSuccess() {
+  return <FlowExample outcome="success" />;
+}

package/src/create-wizard/examples/labels.ts

@@ -0,0 +1,29 @@
+import type { CreateWizardFlowLabels } from '../Flow';
+
+/** A page namespace: every template-owned string is supplied here. */
+export const flowLabels: CreateWizardFlowLabels = {
+  title: 'Create resource',
+  exit: 'Exit',
+  cancel: 'Cancel',
+  back: 'Back',
+  next: 'Next',
+  finish: 'Create resource',
+  pending: 'Creating resource…',
+  review: 'Review',
+  reviewTitle: 'Review resource',
+  edit: (label) => `Edit ${label}`,
+  emptyValue: 'Not provided',
+  success: () => 'Resource created',
+  errorFallback: 'Could not create the resource. Try again.',
+  openResource: 'Open resource',
+  exitTitle: 'Leave this flow?',
+  exitDescription: 'Your answers will be discarded.',
+  exitConfirm: 'Leave',
+  exitCancel: 'Stay',
+  steps: 'Creation progress',
+  stepsSummary: 'Creation progress summary',
+  skipLink: 'Skip to step',
+  stepStatusText: { complete: 'completed', current: 'current', upcoming: 'upcoming', error: 'error' },
+  formatStepCount: (position, total) => `Step ${position} of ${total}`,
+  stepAnnouncement: ({ position, total, label }) => `Step ${position} of ${total}: ${label}`,
+};