From aeb92cd08f42911f334bbda1bf23673dec14b6f0 Mon Sep 17 00:00:00 2001
From: Max Yinger <max.yinger@clerk.dev>
Date: Mon, 21 Sep 2026 11:12:47 -0600
Subject: [PATCH 1/4] feat(mosaic): add the organization profile General page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds `OrganizationProfileView`: the organization profile as a `Profile`, with
General, Members, Security, Billing, and API Keys in its navigation. Only
General is built — the rest hold their place with a placeholder.

General carries the workspace details (logo, name, and a slug that truncates to
one line beside a copy control) and a danger zone whose Leave and Delete
actions each ask for the workspace's name to be typed out, as the legacy
organization profile does. Copy says "Workspace" throughout, per the design.

Along with it:

- `CopyButton`, a `Button` that puts a value on the clipboard and confirms it
  in a tooltip.
- `Section.Error` now animates in and out. The collapse, crossfade, and message
  body it needs already existed inside `Field.Message`, so those move to
  `utils/feedback` and both compose them. It reads its open state from its
  children, so its five callers now render it with the message it has rather
  than behind a conditional.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .changeset/organization-profile-general.md    |   2 +
 .../copy-button/copy-button.test.tsx          |  99 ++++++++++++
 .../components/copy-button/copy-button.tsx    | 107 +++++++++++++
 .../src/components/copy-button/index.ts       |   2 +
 .../src/components/field/field.styles.ts      |  52 +------
 .../src/components/field/field.test.tsx       |   2 +-
 .../mosaic/src/components/field/field.tsx     |  66 ++------
 .../src/components/section/section.styles.ts  |  10 --
 .../src/components/section/section.test.tsx   |  44 +++++-
 .../mosaic/src/components/section/section.tsx |  46 ++++--
 ...zation-profile-general-panel.view.test.tsx | 128 ++++++++++++++++
 .../organization-profile-action-menu.tsx      |  52 +++++++
 ...zation-profile-danger-action.controller.ts |  71 +++++++++
 ...ization-profile-danger-section.messages.ts |  25 ++++
 ...ganization-profile-danger-section.view.tsx | 114 ++++++++++++++
 ...ganization-profile-general-panel.styles.ts |  17 +++
 ...rganization-profile-general-panel.view.tsx |  56 +++++++
 ...ization-profile-placeholder-panel.view.tsx |  22 +++
 ...anization-profile-edit-field.controller.ts | 113 ++++++++++++++
 ...organization-profile-edit-field.dialog.tsx | 130 ++++++++++++++++
 .../organization-profile-logo-row.view.tsx    | 141 ++++++++++++++++++
 .../organization-profile-name-row.view.tsx    |  57 +++++++
 .../organization-profile-slug-row.view.tsx    |  76 ++++++++++
 ...tion-profile-workspace-section.messages.ts |  38 +++++
 ...zation-profile-workspace-section.styles.ts |  14 ++
 ...ization-profile-workspace-section.view.tsx |  56 +++++++
 .../organization-profile.layout.ts            |  48 ++++++
 .../organization-profile.messages.ts          |  11 ++
 .../organization-profile.types.ts             |  36 +++++
 .../organization-profile.view.tsx             | 100 +++++++++++++
 .../user-profile-picture-row.view.tsx         |   2 +-
 ...ser-profile-connected-account-row.view.tsx |   8 +-
 ...er-profile-enterprise-account-row.view.tsx |   2 +-
 .../user-profile-web3-wallet-row.view.tsx     |   4 +-
 packages/mosaic/src/localization/registry.ts  |   6 +
 packages/mosaic/src/utils/feedback.styles.ts  |  56 +++++++
 packages/mosaic/src/utils/feedback.tsx        |  55 +++++++
 .../swingset/src/components/Composition.tsx   |  10 +-
 .../swingset/src/components/DocsViewer.tsx    |   9 ++
 packages/swingset/src/lib/registry.ts         |  67 +++++++++
 packages/swingset/src/stories/copy-button.mdx |  43 ++++++
 .../src/stories/copy-button.stories.tsx       |  65 ++++++++
 .../stories/fixtures/organization-profile.ts  |  53 +++++++
 .../organization-profile-danger-section.mdx   |  34 +++++
 ...ization-profile-danger-section.stories.tsx |  66 ++++++++
 .../organization-profile-general-panel.mdx    |  24 +++
 ...nization-profile-general-panel.stories.tsx |  35 +++++
 ...organization-profile-workspace-section.mdx |  24 +++
 ...tion-profile-workspace-section.stories.tsx |  50 +++++++
 .../src/stories/organization-profile.mdx      |  25 ++++
 .../stories/organization-profile.stories.tsx  |  47 ++++++
 51 files changed, 2279 insertions(+), 141 deletions(-)
 create mode 100644 .changeset/organization-profile-general.md
 create mode 100644 packages/mosaic/src/components/copy-button/copy-button.test.tsx
 create mode 100644 packages/mosaic/src/components/copy-button/copy-button.tsx
 create mode 100644 packages/mosaic/src/components/copy-button/index.ts
 create mode 100644 packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-action-menu.tsx
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.messages.ts
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view.tsx
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-general-panel.styles.ts
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-placeholder-panel.view.tsx
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-name-row.view.tsx
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.messages.ts
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.styles.ts
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view.tsx
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile.layout.ts
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile.messages.ts
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile.types.ts
 create mode 100644 packages/mosaic/src/features/organization-profile/organization-profile.view.tsx
 create mode 100644 packages/mosaic/src/utils/feedback.styles.ts
 create mode 100644 packages/mosaic/src/utils/feedback.tsx
 create mode 100644 packages/swingset/src/stories/copy-button.mdx
 create mode 100644 packages/swingset/src/stories/copy-button.stories.tsx
 create mode 100644 packages/swingset/src/stories/fixtures/organization-profile.ts
 create mode 100644 packages/swingset/src/stories/organization-profile-danger-section.mdx
 create mode 100644 packages/swingset/src/stories/organization-profile-danger-section.stories.tsx
 create mode 100644 packages/swingset/src/stories/organization-profile-general-panel.mdx
 create mode 100644 packages/swingset/src/stories/organization-profile-general-panel.stories.tsx
 create mode 100644 packages/swingset/src/stories/organization-profile-workspace-section.mdx
 create mode 100644 packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx
 create mode 100644 packages/swingset/src/stories/organization-profile.mdx
 create mode 100644 packages/swingset/src/stories/organization-profile.stories.tsx

diff --git a/.changeset/organization-profile-general.md b/.changeset/organization-profile-general.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/organization-profile-general.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/mosaic/src/components/copy-button/copy-button.test.tsx b/packages/mosaic/src/components/copy-button/copy-button.test.tsx
new file mode 100644
index 00000000000..d74c514e650
--- /dev/null
+++ b/packages/mosaic/src/components/copy-button/copy-button.test.tsx
@@ -0,0 +1,99 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { CopyButton } from './copy-button';
+
+describe('Mosaic CopyButton', () => {
+  it('writes the value to the clipboard', async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value='acme-inc' />);
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    await expect(navigator.clipboard.readText()).resolves.toBe('acme-inc');
+  });
+
+  it('announces the copy and keeps the button named', async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value='acme-inc' />);
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Copied'));
+    expect(screen.getByRole('button', { name: 'Copy' })).toBeInTheDocument();
+  });
+
+  it('confirms the copy in a tooltip', async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value='acme-inc' />);
+
+    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    const tooltip = await screen.findByRole('tooltip');
+    expect(tooltip).toHaveTextContent('Copied');
+    expect(tooltip.querySelector('.cl-icon')).toBeInTheDocument();
+  });
+
+  it('takes the tooltip label from copiedLabel', async () => {
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        copiedLabel='Slug copied'
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    await waitFor(() => expect(screen.getByRole('tooltip')).toHaveTextContent('Slug copied'));
+  });
+
+  it('settles back after the copied state expires', async () => {
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        resetAfter={200}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Copied'));
+
+    await waitFor(() => expect(screen.getByRole('status')).toBeEmptyDOMElement());
+  });
+
+  it('copies through onCopy when one is given', async () => {
+    const onCopy = vi.fn();
+    const user = userEvent.setup();
+    const writeText = vi.spyOn(navigator.clipboard, 'writeText');
+    render(
+      <CopyButton
+        value='acme-inc'
+        onCopy={onCopy}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    expect(onCopy).toHaveBeenCalledWith('acme-inc');
+    expect(writeText).not.toHaveBeenCalled();
+  });
+
+  it('stays quiet when the copy fails', async () => {
+    const user = userEvent.setup();
+    render(
+      <CopyButton
+        value='acme-inc'
+        onCopy={() => Promise.reject(new Error('denied'))}
+      />,
+    );
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+
+    expect(screen.getByRole('status')).toBeEmptyDOMElement();
+  });
+});
diff --git a/packages/mosaic/src/components/copy-button/copy-button.tsx b/packages/mosaic/src/components/copy-button/copy-button.tsx
new file mode 100644
index 00000000000..0e87584a01a
--- /dev/null
+++ b/packages/mosaic/src/components/copy-button/copy-button.tsx
@@ -0,0 +1,107 @@
+import React from 'react';
+
+import type { ButtonProps } from '../button';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { Tooltip } from '../tooltip';
+import { VisuallyHidden } from '../visually-hidden';
+
+export interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onCopy'> {
+  value: string;
+  label?: string;
+  copiedLabel?: string;
+  placement?: 'top' | 'bottom' | 'left' | 'right';
+  resetAfter?: number;
+  onCopy?: (value: string) => void | Promise<void>;
+}
+
+export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(function MosaicCopyButton(
+  {
+    value,
+    label = 'Copy',
+    copiedLabel = 'Copied',
+    placement = 'top',
+    resetAfter = 2000,
+    onCopy,
+    color = 'neutral',
+    variant = 'ghost',
+    size = 'xs',
+    shape = 'square',
+    onClick,
+    ...rest
+  },
+  ref,
+) {
+  const [copied, setCopied] = React.useState(false);
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  React.useEffect(() => () => clearTimeout(timeout.current), []);
+
+  const settle = () => {
+    clearTimeout(timeout.current);
+    setCopied(false);
+  };
+
+  const copy = async () => {
+    try {
+      await (onCopy ? onCopy(value) : navigator.clipboard.writeText(value));
+    } catch {
+      // A blocked clipboard leaves the button as it was; there is nothing to report.
+      return;
+    }
+
+    setCopied(true);
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => setCopied(false), resetAfter);
+  };
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    onClick?.(event);
+    if (!event.defaultPrevented) {
+      void copy();
+    }
+  };
+
+  return (
+    <Tooltip.Root
+      open={copied}
+      placement={placement}
+      // Only the close is honoured, so hover cannot open a tooltip this button does not have.
+      onOpenChange={next => {
+        if (!next) {
+          settle();
+        }
+      }}
+    >
+      <Tooltip.Trigger
+        ref={ref}
+        render={
+          <Button
+            type='button'
+            aria-label={label}
+            color={color}
+            variant={variant}
+            size={size}
+            shape={shape}
+            {...rest}
+          />
+        }
+        onClick={handleClick}
+      >
+        <Icon
+          name='clipboard'
+          size='sm'
+        />
+        <VisuallyHidden render={<span role='status' />}>{copied ? copiedLabel : ''}</VisuallyHidden>
+      </Tooltip.Trigger>
+      <Tooltip.Popup>
+        {copiedLabel}
+        <Icon
+          name='checkmark'
+          size='sm'
+          aria-hidden='true'
+        />
+      </Tooltip.Popup>
+    </Tooltip.Root>
+  );
+});
diff --git a/packages/mosaic/src/components/copy-button/index.ts b/packages/mosaic/src/components/copy-button/index.ts
new file mode 100644
index 00000000000..067cd97f96b
--- /dev/null
+++ b/packages/mosaic/src/components/copy-button/index.ts
@@ -0,0 +1,2 @@
+export { CopyButton } from './copy-button';
+export type { CopyButtonProps } from './copy-button';
diff --git a/packages/mosaic/src/components/field/field.styles.ts b/packages/mosaic/src/components/field/field.styles.ts
index b7f5406c529..725113a9037 100644
--- a/packages/mosaic/src/components/field/field.styles.ts
+++ b/packages/mosaic/src/components/field/field.styles.ts
@@ -1,12 +1,10 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, durationVars, easingVars, fontWeightVars, space } from '../../tokens.stylex';
-
-const ROOT_GAP = space['2'];
+import { colorVars, fontWeightVars, space } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   root: {
-    gap: ROOT_GAP,
+    gap: space['2'],
     display: 'flex',
     flexDirection: 'column',
   },
@@ -20,50 +18,4 @@ export const styles = stylex.create({
   description: {
     color: colorVars['--cl-color-foreground-secondary'],
   },
-  messageRoot: {
-    overflow: 'clip',
-    alignContent: 'start',
-    display: 'grid',
-    position: 'relative',
-    transitionDuration: durationVars['--cl-duration-slow'],
-    transitionProperty: {
-      default: 'height, margin-top',
-      '@media (prefers-reduced-motion: reduce)': 'none',
-    },
-    transitionTimingFunction: easingVars['--cl-ease-enter'],
-    height: {
-      default: 'var(--_cl-field-message-height)',
-      ':where(:not([data-open]), [data-starting-style])': 0,
-    },
-    marginTop: {
-      default: 0,
-      ':where(:not([data-open]), [data-starting-style])': `calc(-1 * ${ROOT_GAP})`,
-    },
-  },
-  feedback: {
-    inset: { default: null, ':where([data-ending-style])': '0 0 auto' },
-    gap: space['1'],
-    alignItems: 'flex-start',
-    display: 'flex',
-    opacity: { default: 1, ':where([data-starting-style], [data-ending-style])': 0 },
-    position: { default: null, ':where([data-ending-style])': 'absolute' },
-    textWrap: 'pretty',
-    transitionDuration: durationVars['--cl-duration-base'],
-    transitionProperty: 'opacity',
-    transitionTimingFunction: 'linear',
-  },
-  error: {
-    color: colorVars['--cl-color-negative'],
-  },
-  success: {
-    color: colorVars['--cl-color-positive'],
-  },
-  feedbackIcon: {
-    flexShrink: 0,
-    height: '1lh',
-  },
-});
-
-export const dynamic = stylex.create({
-  messageHeight: (height: number) => ({ '--_cl-field-message-height': `${height}px` }),
 });
diff --git a/packages/mosaic/src/components/field/field.test.tsx b/packages/mosaic/src/components/field/field.test.tsx
index 1eea5b36df5..8d5a1e61c10 100644
--- a/packages/mosaic/src/components/field/field.test.tsx
+++ b/packages/mosaic/src/components/field/field.test.tsx
@@ -391,7 +391,7 @@ describe('Mosaic Field', () => {
           '@media (prefers-reduced-motion: reduce)': 'none',
         },
         height: {
-          default: 'var(--_cl-field-message-height)',
+          default: 'var(--_cl-feedback-height)',
           ':where(:not([data-open]), [data-starting-style])': 0,
         },
       },
diff --git a/packages/mosaic/src/components/field/field.tsx b/packages/mosaic/src/components/field/field.tsx
index e2cf715b14c..28b5c1470b0 100644
--- a/packages/mosaic/src/components/field/field.tsx
+++ b/packages/mosaic/src/components/field/field.tsx
@@ -1,4 +1,3 @@
-import { useSafeLayoutEffect } from '@clerk/shared/react';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
@@ -7,10 +6,11 @@ import { useTransition } from '../../primitives/hooks';
 import { useRender } from '../../primitives/utils';
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { FeedbackBody, hasMessage, useHeldMessage, useMessageHeight } from '../../utils/feedback';
+import { feedbackHeight, feedbackStyles } from '../../utils/feedback.styles';
 import { reset } from '../../utils/reset.styles';
 import { sizes as typographySizes, styles as typographyStyles } from '../../utils/typography.styles';
 import { visuallyHidden } from '../../utils/visually-hidden.styles';
-import { Icon } from '../icon';
 import {
   FieldMessageProvider,
   FieldProvider,
@@ -18,7 +18,7 @@ import {
   useRegisterFieldMessage,
   useRegisterFieldPartId,
 } from './field.context';
-import { dynamic, styles } from './field.styles';
+import { styles } from './field.styles';
 
 function useNativeLabelWarning(label: HTMLElement | null) {
   React.useEffect(() => {
@@ -139,29 +139,6 @@ const Description = React.forwardRef<HTMLParagraphElement, FieldDescriptionProps
 /** Props for the container that animates field feedback height and crossfades its messages. */
 export type FieldMessageProps = MosaicComponentProps<'div'>;
 
-function useMessageHeight(active: HTMLElement | null) {
-  const [height, setHeight] = React.useState(0);
-
-  useSafeLayoutEffect(() => {
-    if (!active) {
-      return undefined;
-    }
-
-    const measure = () => setHeight(active.offsetHeight);
-    measure();
-
-    if (typeof ResizeObserver === 'undefined') {
-      return undefined;
-    }
-
-    const observer = new ResizeObserver(measure);
-    observer.observe(active);
-    return () => observer.disconnect();
-  }, [active]);
-
-  return height;
-}
-
 const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function MosaicFieldMessage(
   { render, xstyle, children, ...rest },
   ref,
@@ -186,7 +163,7 @@ const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function Mos
     props: {
       ...mergeStyleProps(
         themeProps('field-message'),
-        stylex.props(reset.base, styles.messageRoot, dynamic.messageHeight(height), xstyle),
+        stylex.props(reset.base, feedbackStyles.collapse, feedbackHeight.measured(height), xstyle),
         { role: 'status', ...transitionProps },
         rest,
       ),
@@ -200,18 +177,14 @@ const Message = React.forwardRef<HTMLDivElement, FieldMessageProps>(function Mos
 type FieldFeedbackKind = 'error' | 'success';
 
 const FEEDBACK: Record<FieldFeedbackKind, { slot: string; icon: IconName; color: stylex.StyleXStyles }> = {
-  error: { slot: 'field-error', icon: 'exclamation-circle', color: styles.error },
-  success: { slot: 'field-success', icon: 'checkmark', color: styles.success },
+  error: { slot: 'field-error', icon: 'exclamation-circle', color: feedbackStyles.error },
+  success: { slot: 'field-success', icon: 'checkmark', color: feedbackStyles.success },
 };
 
 interface FieldFeedbackProps extends MosaicComponentProps<'p'> {
   kind: FieldFeedbackKind;
 }
 
-function hasMessage(children: React.ReactNode) {
-  return React.Children.toArray(children).some(child => child !== '');
-}
-
 const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackProps>(function MosaicFieldFeedback(
   { render, xstyle, id: idProp, children, kind, ...rest },
   ref,
@@ -223,10 +196,7 @@ const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackProps>
   const open = hasMessage(children);
   const element = React.useRef<HTMLElement | null>(null);
   const { mounted, transitionProps } = useTransition({ open, ref: element });
-  const lastMessage = React.useRef(children);
-  if (open) {
-    lastMessage.current = children;
-  }
+  const message = useHeldMessage(children, open);
   useRegisterFieldPartId(open ? id : undefined, context?.setMessageIds);
   const registerMessage = useRegisterFieldMessage(open);
   return useRender({
@@ -237,30 +207,12 @@ const FieldFeedback = React.forwardRef<HTMLParagraphElement, FieldFeedbackProps>
     props: {
       ...mergeStyleProps(
         themeProps(slot),
-        stylex.props(
-          reset.base,
-          typographyStyles.base,
-          typographySizes.xs,
-          styles.message,
-          styles.feedback,
-          color,
-          xstyle,
-        ),
+        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, feedbackStyles.message, color, xstyle),
         { 'aria-hidden': open ? undefined : true, ...transitionProps },
         rest,
       ),
       id,
-      children: (
-        <>
-          <Icon
-            name={icon}
-            size='sm'
-            aria-hidden='true'
-            xstyle={styles.feedbackIcon}
-          />
-          <span>{lastMessage.current}</span>
-        </>
-      ),
+      children: <FeedbackBody icon={icon}>{message}</FeedbackBody>,
     },
   });
 });
diff --git a/packages/mosaic/src/components/section/section.styles.ts b/packages/mosaic/src/components/section/section.styles.ts
index a886e8d57fe..f115c72135e 100644
--- a/packages/mosaic/src/components/section/section.styles.ts
+++ b/packages/mosaic/src/components/section/section.styles.ts
@@ -131,17 +131,7 @@ export const styles = stylex.create({
   // Sits under the row's item rather than inside its content, so a message never shifts the
   // media and actions off the centre line they share.
   error: {
-    margin: 0,
-    gap: space['1'],
-    alignItems: 'flex-start',
-    color: colorVars['--cl-color-negative'],
-    display: 'flex',
-    textWrap: 'pretty',
     width: '100%',
   },
-  errorIcon: {
-    flexShrink: 0,
-    height: '1lh',
-  },
 });
 /* eslint-enable @stylexjs/no-lookahead-selectors */
diff --git a/packages/mosaic/src/components/section/section.test.tsx b/packages/mosaic/src/components/section/section.test.tsx
index 10afc633570..425884ef539 100644
--- a/packages/mosaic/src/components/section/section.test.tsx
+++ b/packages/mosaic/src/components/section/section.test.tsx
@@ -1,5 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 
@@ -205,4 +205,46 @@ describe('Section', () => {
     expect(icon).toHaveAttribute('aria-hidden', 'true');
     expect(icon).toHaveAttribute('data-size', 'sm');
   });
+
+  it('renders nothing while the row has no message', () => {
+    render(
+      <Section.Row>
+        <Section.Item>
+          <Section.Content>
+            <Section.Label>Profile picture</Section.Label>
+          </Section.Content>
+        </Section.Item>
+        <Section.Error data-testid='error'>{undefined}</Section.Error>
+      </Section.Row>,
+    );
+
+    expect(screen.queryByTestId('error')).not.toBeInTheDocument();
+  });
+
+  it('opens on a new message and leaves when it clears', async () => {
+    function Host({ message }: { message?: string }) {
+      return (
+        <Section.Row>
+          <Section.Item>
+            <Section.Content>
+              <Section.Label>Profile picture</Section.Label>
+            </Section.Content>
+          </Section.Item>
+          <Section.Error data-testid='error'>{message}</Section.Error>
+        </Section.Row>
+      );
+    }
+
+    const { rerender } = render(<Host />);
+    rerender(<Host message='File type not supported.' />);
+
+    const error = await screen.findByTestId('error');
+    await waitFor(() => expect(error).toHaveAttribute('data-open'));
+    expect(error).toHaveTextContent('File type not supported.');
+    expect(error).not.toHaveAttribute('aria-hidden');
+
+    // jsdom runs no transitions, so the exit finishes at once and the row empties again.
+    rerender(<Host />);
+    await waitFor(() => expect(screen.queryByTestId('error')).not.toBeInTheDocument());
+  });
 });
diff --git a/packages/mosaic/src/components/section/section.tsx b/packages/mosaic/src/components/section/section.tsx
index 7ab7c420fa4..570d20ec9a1 100644
--- a/packages/mosaic/src/components/section/section.tsx
+++ b/packages/mosaic/src/components/section/section.tsx
@@ -2,14 +2,16 @@ import { useSafeLayoutEffect } from '@clerk/shared/react';
 import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
+import { useTransition } from '../../primitives/hooks/use-transition';
 import { useRender } from '../../primitives/utils';
 import type { MosaicComponentProps } from '../../props';
 import { mergeStyleProps, themeProps } from '../../props';
+import { FeedbackBody, hasMessage, useHeldMessage, useMessageHeight } from '../../utils/feedback';
+import { feedbackHeight, feedbackStyles } from '../../utils/feedback.styles';
 import { reset } from '../../utils/reset.styles';
 import { sizes as typographySizes, styles as typographyStyles } from '../../utils/typography.styles';
 import type { HeadingProps } from '../heading';
 import { Heading } from '../heading';
-import { Icon } from '../icon';
 import { sectionItemsMarker } from './section.markers.stylex';
 import { styles } from './section.styles';
 
@@ -228,32 +230,52 @@ const Actions = React.forwardRef<HTMLDivElement, SectionActionsProps>(function S
  * sibling of `Section.Item` inside `Section.Row`, not inside `Section.Content`: the item stays a
  * single centred line, so the media and actions hold their position whether or not it is showing.
  * Carries `role='alert'` for the announcement a `Field.Root` would otherwise wire up.
+ *
+ * It opens and closes on the message it is given, so render it with that message —
+ * `<Section.Error>{error}</Section.Error>` — rather than behind a conditional.
  */
 const SectionError = React.forwardRef<HTMLParagraphElement, SectionErrorProps>(function SectionError(
   { render, xstyle, children, ...rest },
   ref,
 ) {
+  const open = hasMessage(children);
+  const element = React.useRef<HTMLElement | null>(null);
+  const [messageElement, setMessageElement] = React.useState<HTMLElement | null>(null);
+  const height = useMessageHeight(messageElement);
+  const { mounted, transitionProps } = useTransition({ open, ref: element });
+  const message = useHeldMessage(children, open);
+  const messageProps = stylex.props(reset.base, feedbackStyles.message, feedbackStyles.error);
+
   return useRender({
     defaultTagName: 'p',
     render,
-    ref,
+    enabled: mounted,
+    ref: [ref, element],
     props: {
       role: 'alert',
       ...mergeStyleProps(
         themeProps('section-error'),
-        stylex.props(reset.base, typographyStyles.base, typographySizes.xs, styles.error, xstyle),
+        stylex.props(
+          reset.base,
+          typographyStyles.base,
+          typographySizes.xs,
+          feedbackStyles.collapse,
+          feedbackHeight.measured(height),
+          styles.error,
+          xstyle,
+        ),
+        { 'aria-hidden': open ? undefined : true, ...transitionProps },
         rest,
       ),
       children: (
-        <>
-          <Icon
-            name='exclamation-circle'
-            size='sm'
-            aria-hidden='true'
-            xstyle={styles.errorIcon}
-          />
-          <span>{children}</span>
-        </>
+        <span
+          ref={setMessageElement}
+          {...messageProps}
+          {...transitionProps}
+          style={{ ...messageProps.style, ...transitionProps.style }}
+        >
+          <FeedbackBody icon='exclamation-circle'>{message}</FeedbackBody>
+        </span>
       ),
     },
   });
diff --git a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx
new file mode 100644
index 00000000000..7e4f732c3bd
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx
@@ -0,0 +1,128 @@
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MosaicProvider } from '../../../MosaicProvider';
+import type { OrganizationProfileGeneralPanelViewProps } from '../organization-profile-general-panel.view';
+import { OrganizationProfileGeneralPanelView } from '../organization-profile-general-panel.view';
+
+function renderPanel(overrides: Partial<OrganizationProfileGeneralPanelViewProps> = {}) {
+  const props: OrganizationProfileGeneralPanelViewProps = {
+    name: 'Clerk',
+    slug: 'clerkWorkspace-177654156132154',
+    memberCount: 20,
+    ...overrides,
+  };
+  return render(
+    <MosaicProvider>
+      <OrganizationProfileGeneralPanelView {...props} />
+    </MosaicProvider>,
+  );
+}
+
+describe('organization profile general panel', () => {
+  it('shows the workspace details as read-only when nothing can be edited', () => {
+    renderPanel();
+
+    expect(screen.getByRole('heading', { name: 'Workspace details' })).toBeVisible();
+    expect(screen.getByText('Clerk')).toBeVisible();
+    expect(screen.getByText('clerkWorkspace-177654156132154')).toBeVisible();
+    expect(screen.queryByRole('button', { name: 'Edit name' })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: 'Upload' })).not.toBeInTheDocument();
+  });
+
+  it('hides the danger zone when neither action is available', () => {
+    renderPanel();
+
+    expect(screen.queryByRole('heading', { name: 'Danger zone' })).not.toBeInTheDocument();
+  });
+
+  it('offers a copy button for the slug, and keeps the full value reachable when it truncates', () => {
+    renderPanel();
+
+    expect(screen.getByRole('button', { name: 'Copy slug' })).toBeVisible();
+    expect(screen.getByText('clerkWorkspace-177654156132154')).toHaveAttribute(
+      'title',
+      'clerkWorkspace-177654156132154',
+    );
+  });
+
+  it('saves a new name', async () => {
+    const user = userEvent.setup();
+    const onSubmitName = vi.fn().mockResolvedValue(undefined);
+    renderPanel({ onSubmitName });
+
+    await user.click(screen.getByRole('button', { name: 'Edit name' }));
+    const field = await screen.findByRole('textbox', { name: 'Name' });
+    await user.clear(field);
+    await user.type(field, 'Clerk Inc');
+    await user.click(screen.getByRole('button', { name: 'Save changes' }));
+
+    await waitFor(() => expect(onSubmitName).toHaveBeenCalledWith('Clerk Inc'));
+  });
+
+  it('names the slug field without showing a label, and explains the change under the title', async () => {
+    const user = userEvent.setup();
+    renderPanel({ onSubmitSlug: vi.fn().mockResolvedValue(undefined) });
+
+    await user.click(screen.getByRole('button', { name: 'Edit slug' }));
+    const dialog = await screen.findByRole('dialog');
+
+    expect(within(dialog).getByRole('textbox', { name: 'Slug' })).toBeVisible();
+    expect(within(dialog).getByText('Slug')).toHaveAttribute('data-visually-hidden', '');
+    expect(
+      within(dialog).getByText('A unique identifier used in workspace URLs. Changing it may break existing links.'),
+    ).toBeVisible();
+  });
+
+  it('names the name field without showing a label', async () => {
+    const user = userEvent.setup();
+    renderPanel({ onSubmitName: vi.fn().mockResolvedValue(undefined) });
+
+    await user.click(screen.getByRole('button', { name: 'Edit name' }));
+    const dialog = await screen.findByRole('dialog');
+
+    expect(within(dialog).getByRole('textbox', { name: 'Name' })).toBeVisible();
+    expect(within(dialog).getByText('Name')).toHaveAttribute('data-visually-hidden', '');
+  });
+
+  it('keeps each danger action inert until the workspace name is typed', async () => {
+    const user = userEvent.setup();
+    const onDelete = vi.fn().mockResolvedValue(undefined);
+    renderPanel({ onDelete });
+
+    await user.click(screen.getByRole('button', { name: 'Delete Workspace' }));
+    const dialog = await screen.findByRole('dialog');
+    const confirm = within(dialog).getByRole('button', { name: 'Delete Workspace' });
+    expect(dialog).toHaveTextContent(
+      'Are you sure you want to delete Clerk? This removes 20 members and permanently deletes all Workspace data.',
+    );
+
+    await user.click(confirm);
+    expect(onDelete).not.toHaveBeenCalled();
+
+    await user.type(within(dialog).getByRole('textbox'), 'Clerk');
+    await user.click(confirm);
+
+    await waitFor(() => expect(onDelete).toHaveBeenCalled());
+  });
+
+  it('shows both danger rows and asks for the name in each', async () => {
+    const user = userEvent.setup();
+    const onLeave = vi.fn().mockResolvedValue(undefined);
+    renderPanel({ onLeave, onDelete: vi.fn().mockResolvedValue(undefined) });
+
+    expect(screen.getByRole('heading', { name: 'Danger zone' })).toBeVisible();
+
+    await user.click(screen.getByRole('button', { name: 'Leave Workspace' }));
+    const dialog = await screen.findByRole('dialog');
+    expect(within(dialog).getByRole('heading', { name: 'Leave Workspace' })).toBeVisible();
+    expect(within(dialog).getByText(/You will lose access to this workspace and its applications\./)).toBeVisible();
+    expect(within(dialog).getByText('Type “Clerk” below to continue')).toBeVisible();
+
+    await user.type(within(dialog).getByRole('textbox'), 'Clerk');
+    await user.click(within(dialog).getByRole('button', { name: 'Leave Workspace' }));
+
+    await waitFor(() => expect(onLeave).toHaveBeenCalled());
+  });
+});
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-action-menu.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-action-menu.tsx
new file mode 100644
index 00000000000..e770d43e378
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-action-menu.tsx
@@ -0,0 +1,52 @@
+import type { Ref } from 'react';
+
+import { Icon } from '../../components/icon';
+import { Menu } from '../../components/menu';
+import type { IconName } from '../../icons/registry';
+
+export interface OrganizationProfileMenuAction {
+  label: string;
+  color?: 'neutral' | 'negative';
+  icon?: IconName;
+  onClick: () => void;
+}
+
+export function OrganizationProfileActionMenu({
+  label,
+  actions,
+  triggerRef,
+}: {
+  label: string;
+  actions: OrganizationProfileMenuAction[];
+  triggerRef?: Ref<HTMLButtonElement>;
+}) {
+  if (actions.length === 0) {
+    return null;
+  }
+
+  return (
+    <Menu.Root placement='bottom-end'>
+      <Menu.Trigger
+        ref={triggerRef}
+        aria-label={label}
+      />
+      <Menu.Popup>
+        {actions.map(action => (
+          <Menu.Item
+            key={action.label}
+            color={action.color}
+            label={action.label}
+            onClick={action.onClick}
+          >
+            {action.icon ? (
+              <Menu.Media>
+                <Icon name={action.icon} />
+              </Menu.Media>
+            ) : null}
+            <Menu.Label>{action.label}</Menu.Label>
+          </Menu.Item>
+        ))}
+      </Menu.Popup>
+    </Menu.Root>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts
new file mode 100644
index 00000000000..2c5c4c5fc00
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-action.controller.ts
@@ -0,0 +1,71 @@
+import { setup } from '../../../machine/setup';
+import { useMachine } from '../../../machine/useMachine';
+
+export interface OrganizationProfileDangerActionContext {
+  run: () => Promise<void>;
+  errorMessage: string | undefined;
+}
+
+export type OrganizationProfileDangerActionEvent = { type: 'OPEN' } | { type: 'CONFIRM' } | { type: 'CANCEL' };
+
+const { createMachine, assign, fromPromise } = setup<
+  OrganizationProfileDangerActionContext,
+  OrganizationProfileDangerActionEvent
+>();
+
+export const organizationProfileDangerActionMachine = createMachine({
+  id: 'organizationDangerAction',
+  initial: 'idle',
+  context: {
+    run: async () => {},
+    errorMessage: undefined,
+  },
+  states: {
+    idle: { on: { OPEN: 'confirming' } },
+    confirming: {
+      on: {
+        CONFIRM: 'running',
+        CANCEL: { target: 'idle', actions: assign(() => ({ errorMessage: undefined })) },
+      },
+    },
+    running: {
+      invoke: fromPromise(context => context.run(), {
+        onDone: 'done',
+        onError: {
+          target: 'confirming',
+          actions: assign((_, event) => ({
+            errorMessage:
+              event.error instanceof Error ? event.error.message : 'Something went wrong. Please try again.',
+          })),
+        },
+      }),
+    },
+    done: { type: 'final' },
+  },
+});
+
+export interface OrganizationProfileDangerActionControllerOptions {
+  onRun: () => Promise<void>;
+}
+
+export interface OrganizationProfileDangerActionController {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onConfirm: () => void;
+  isRunning: boolean;
+  errorMessage: string | undefined;
+}
+
+export function useOrganizationProfileDangerActionController({
+  onRun,
+}: OrganizationProfileDangerActionControllerOptions): OrganizationProfileDangerActionController {
+  const [snapshot, send] = useMachine(organizationProfileDangerActionMachine, { context: { run: onRun } });
+
+  return {
+    isOpen: snapshot.value === 'confirming' || snapshot.value === 'running',
+    onOpenChange: open => send({ type: open ? 'OPEN' : 'CANCEL' }),
+    onConfirm: () => send({ type: 'CONFIRM' }),
+    isRunning: snapshot.value === 'running',
+    errorMessage: snapshot.context.errorMessage,
+  };
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.messages.ts b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.messages.ts
new file mode 100644
index 00000000000..a088f27cd63
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.messages.ts
@@ -0,0 +1,25 @@
+export const organizationProfileDangerSectionMessages = {
+  sectionTitle: 'Danger zone',
+  fieldLabel: 'Type “{phrase}” below to continue',
+  cancelLabel: 'Cancel',
+  leave: {
+    label: 'Leave Workspace',
+    description: 'You will lose access to this Workspace and its applications.',
+    actionLabel: 'Leave Workspace',
+    dialogTitle: 'Leave Workspace',
+    dialogDescription:
+      'Are you sure you want to leave this Workspace? You will lose access to this workspace and its applications.',
+  },
+  delete: {
+    label: 'Delete Workspace',
+    description:
+      'Permanently delete this workspace and all its data. This cannot be undone. All members will lose access.',
+    actionLabel: 'Delete Workspace',
+    dialogTitle: 'Delete Workspace',
+    dialogDescription: {
+      one: 'Are you sure you want to delete {name}? This removes {count} member and permanently deletes all Workspace data. This can’t be undone.',
+      other:
+        'Are you sure you want to delete {name}? This removes {count} members and permanently deletes all Workspace data. This can’t be undone.',
+    },
+  },
+} as const;
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view.tsx
new file mode 100644
index 00000000000..6d70e5a9bef
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view.tsx
@@ -0,0 +1,114 @@
+import { Destructive } from '../../../blocks/destructive';
+import { Button } from '../../../components/button';
+import { Section } from '../../../components/section';
+import { fill, plural, useLocale, useMessages } from '../../../localization';
+import { useOrganizationProfileDangerActionController } from './organization-profile-danger-action.controller';
+
+export interface OrganizationProfileDangerSectionViewProps {
+  name: string;
+  memberCount: number;
+  onLeave?: () => Promise<void>;
+  onDelete?: () => Promise<void>;
+}
+
+export function OrganizationProfileDangerSectionView({
+  name,
+  memberCount,
+  onLeave,
+  onDelete,
+}: OrganizationProfileDangerSectionViewProps) {
+  const m = useMessages('organizationProfileDangerSection');
+  const locale = useLocale();
+
+  if (!onLeave && !onDelete) {
+    return null;
+  }
+
+  return (
+    <Section.Root>
+      <Section.Title>{m.sectionTitle}</Section.Title>
+      <Section.Group>
+        {onLeave ? (
+          <DangerRow
+            confirmationValue={name}
+            label={m.leave.label}
+            description={m.leave.description}
+            actionLabel={m.leave.actionLabel}
+            dialogTitle={m.leave.dialogTitle}
+            dialogDescription={m.leave.dialogDescription}
+            onRun={onLeave}
+          />
+        ) : null}
+        {onDelete ? (
+          <DangerRow
+            confirmationValue={name}
+            label={m.delete.label}
+            description={m.delete.description}
+            actionLabel={m.delete.actionLabel}
+            dialogTitle={m.delete.dialogTitle}
+            dialogDescription={plural(m.delete.dialogDescription, memberCount, locale, { name })}
+            onRun={onDelete}
+          />
+        ) : null}
+      </Section.Group>
+    </Section.Root>
+  );
+}
+
+function DangerRow({
+  confirmationValue,
+  label,
+  description,
+  actionLabel,
+  dialogTitle,
+  dialogDescription,
+  onRun,
+}: {
+  confirmationValue: string;
+  label: string;
+  description: string;
+  actionLabel: string;
+  dialogTitle: string;
+  dialogDescription: string;
+  onRun: () => Promise<void>;
+}) {
+  const m = useMessages('organizationProfileDangerSection');
+  const { isOpen, onOpenChange, onConfirm, isRunning, errorMessage } = useOrganizationProfileDangerActionController({
+    onRun,
+  });
+
+  return (
+    <Section.Row>
+      <Section.Item>
+        <Section.Content>
+          <Section.Label>{label}</Section.Label>
+          <Section.Description>{description}</Section.Description>
+        </Section.Content>
+        <Section.Actions>
+          <Destructive
+            open={isOpen}
+            onOpenChange={onOpenChange}
+            trigger={
+              <Button
+                color='negative'
+                size='sm'
+                variant='outline'
+              >
+                {actionLabel}
+              </Button>
+            }
+            title={dialogTitle}
+            description={dialogDescription}
+            fieldLabel={fill(m.fieldLabel, { phrase: confirmationValue })}
+            confirmationValue={confirmationValue}
+            actionLabel={actionLabel}
+            cancelLabel={m.cancelLabel}
+            onDelete={onConfirm}
+            isDeleting={isRunning}
+            errorMessage={errorMessage}
+          />
+        </Section.Actions>
+      </Section.Item>
+    </Section.Row>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.styles.ts b/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.styles.ts
new file mode 100644
index 00000000000..814c042ef69
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.styles.ts
@@ -0,0 +1,17 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { space } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  root: {
+    gap: space['4'],
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  sections: {
+    gap: space['8'],
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+  },
+});
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx
new file mode 100644
index 00000000000..1a42eea05fa
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx
@@ -0,0 +1,56 @@
+import * as stylex from '@stylexjs/stylex';
+import type { ReactElement } from 'react';
+
+import { Profile } from '../../components/profile';
+import { useMessages } from '../../localization';
+import { mergeStyleProps, themeProps } from '../../props';
+import type { OrganizationProfileDangerSectionViewProps } from './organization-profile-danger-section/organization-profile-danger-section.view';
+import { OrganizationProfileDangerSectionView } from './organization-profile-danger-section/organization-profile-danger-section.view';
+import { styles } from './organization-profile-general-panel.styles';
+import type { OrganizationProfileWorkspaceSectionViewProps } from './organization-profile-workspace-section/organization-profile-workspace-section.view';
+import { OrganizationProfileWorkspaceSectionView } from './organization-profile-workspace-section/organization-profile-workspace-section.view';
+
+export interface OrganizationProfileGeneralPanelViewProps
+  extends OrganizationProfileWorkspaceSectionViewProps, Omit<OrganizationProfileDangerSectionViewProps, 'name'> {}
+
+export function OrganizationProfileGeneralPanelView({
+  name,
+  slug,
+  memberCount,
+  imageUrl,
+  hasImage,
+  onLogoChange,
+  onLogoReject,
+  onRemoveLogo,
+  onSubmitName,
+  onSubmitSlug,
+  onLeave,
+  onDelete,
+}: OrganizationProfileGeneralPanelViewProps): ReactElement {
+  const m = useMessages('organizationProfile');
+
+  return (
+    <div {...mergeStyleProps(themeProps('organization-profile-general-panel'), stylex.props(styles.root))}>
+      <Profile.PageTitle>{m.pages.general}</Profile.PageTitle>
+      <div {...stylex.props(styles.sections)}>
+        <OrganizationProfileWorkspaceSectionView
+          name={name}
+          slug={slug}
+          imageUrl={imageUrl}
+          hasImage={hasImage}
+          onLogoChange={onLogoChange}
+          onLogoReject={onLogoReject}
+          onRemoveLogo={onRemoveLogo}
+          onSubmitName={onSubmitName}
+          onSubmitSlug={onSubmitSlug}
+        />
+        <OrganizationProfileDangerSectionView
+          name={name}
+          memberCount={memberCount}
+          onLeave={onLeave}
+          onDelete={onDelete}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-placeholder-panel.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-placeholder-panel.view.tsx
new file mode 100644
index 00000000000..5c7d404a0e4
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-placeholder-panel.view.tsx
@@ -0,0 +1,22 @@
+import { EmptyState } from '../../components/empty-state';
+import { Profile } from '../../components/profile';
+import { fill, useMessages } from '../../localization';
+import type { OrganizationProfilePageId } from './organization-profile.types';
+
+export interface OrganizationProfilePlaceholderPanelViewProps {
+  page: OrganizationProfilePageId;
+}
+
+export function OrganizationProfilePlaceholderPanelView({ page }: OrganizationProfilePlaceholderPanelViewProps) {
+  const m = useMessages('organizationProfile');
+  const title = m.pages[page];
+
+  return (
+    <>
+      <Profile.PageTitle>{title}</Profile.PageTitle>
+      <EmptyState.Root>
+        <EmptyState.Label>{fill(m.placeholder, { page: title })}</EmptyState.Label>
+      </EmptyState.Root>
+    </>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts
new file mode 100644
index 00000000000..0d269a4b384
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.controller.ts
@@ -0,0 +1,113 @@
+import { setup } from '../../../machine/setup';
+import { useMachine } from '../../../machine/useMachine';
+import type { OrganizationProfileFormError } from '../organization-profile.types';
+import { OrganizationProfileSaveError } from '../organization-profile.types';
+
+export interface OrganizationProfileEditFieldContext {
+  save: (value: string) => Promise<void>;
+  savedValue: string;
+  value: string;
+  error: OrganizationProfileFormError | undefined;
+}
+
+export type OrganizationProfileEditFieldEvent =
+  | { type: 'OPEN' }
+  | { type: 'TYPE'; value: string }
+  | { type: 'SAVE' }
+  | { type: 'CANCEL' };
+
+const { createMachine, assign, fromPromise } = setup<
+  OrganizationProfileEditFieldContext,
+  OrganizationProfileEditFieldEvent
+>();
+
+function notSeated(): Promise<never> {
+  return Promise.reject(new Error('edit-field deps are not seated'));
+}
+
+function isSaveable(context: OrganizationProfileEditFieldContext): boolean {
+  return context.value !== context.savedValue && context.value !== '';
+}
+
+function toFormError(cause: unknown): OrganizationProfileFormError {
+  if (cause instanceof OrganizationProfileSaveError) {
+    return { message: cause.message, field: cause.field };
+  }
+  if (cause instanceof Error) {
+    return { message: cause.message };
+  }
+  return { message: 'Something went wrong. Please try again.' };
+}
+
+export const organizationProfileEditFieldMachine = createMachine({
+  id: 'editOrganizationField',
+  initial: 'idle',
+  context: {
+    save: notSeated,
+    savedValue: '',
+    value: '',
+    error: undefined,
+  },
+  states: {
+    idle: {
+      on: {
+        OPEN: {
+          target: 'editing',
+          actions: assign(context => ({ value: context.savedValue, error: undefined })),
+        },
+      },
+    },
+    editing: {
+      on: {
+        TYPE: { actions: assign((_, event) => ({ value: event.value })) },
+        SAVE: { target: 'saving', guard: isSaveable },
+        CANCEL: { target: 'idle', actions: assign(() => ({ error: undefined })) },
+      },
+    },
+    saving: {
+      invoke: fromPromise(context => context.save(context.value), {
+        onDone: { target: 'idle', actions: assign(() => ({ error: undefined })) },
+        onError: {
+          target: 'editing',
+          actions: assign((_, event) => ({ error: toFormError(event.error) })),
+        },
+      }),
+    },
+  },
+});
+
+export interface OrganizationProfileEditFieldControllerOptions {
+  value?: string;
+  onSubmit: (value: string) => Promise<void>;
+}
+
+export interface OrganizationProfileEditFieldController {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  value: string;
+  onValueChange: (value: string) => void;
+  onSubmit: () => void;
+  canSave: boolean;
+  isSaving: boolean;
+  error: OrganizationProfileFormError | undefined;
+}
+
+export function useOrganizationProfileEditFieldController({
+  value = '',
+  onSubmit,
+}: OrganizationProfileEditFieldControllerOptions): OrganizationProfileEditFieldController {
+  const [snapshot, send] = useMachine(organizationProfileEditFieldMachine, {
+    context: { save: onSubmit, savedValue: value },
+  });
+
+  return {
+    isOpen: snapshot.value === 'editing' || snapshot.value === 'saving',
+    onOpenChange: open => send({ type: open ? 'OPEN' : 'CANCEL' }),
+    value: snapshot.context.value,
+    onValueChange: next => send({ type: 'TYPE', value: next }),
+    onSubmit: () => send({ type: 'SAVE' }),
+    canSave: isSaveable(snapshot.context),
+    isSaving: snapshot.value === 'saving',
+    error: snapshot.context.error,
+  };
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx
new file mode 100644
index 00000000000..f090b9b6c92
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx
@@ -0,0 +1,130 @@
+import type { FormEvent } from 'react';
+import { useId, useRef } from 'react';
+
+import { Banner } from '../../../components/banner';
+import { Button, SubmitButton } from '../../../components/button';
+import { Card } from '../../../components/card';
+import type { DialogTriggerProps } from '../../../components/dialog';
+import { Dialog } from '../../../components/dialog';
+import { Field } from '../../../components/field';
+import { Input } from '../../../components/input';
+import type { OrganizationProfileFormError } from '../organization-profile.types';
+
+export interface OrganizationProfileEditFieldDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  trigger?: DialogTriggerProps['render'];
+  title: string;
+  description?: string;
+  fieldLabel: string;
+  cancelLabel: string;
+  saveLabel: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  canSave?: boolean;
+  isSaving?: boolean;
+  error?: OrganizationProfileFormError;
+  onSubmit: () => void;
+}
+
+export function OrganizationProfileEditFieldDialog({
+  open,
+  onOpenChange,
+  trigger,
+  title,
+  description,
+  fieldLabel,
+  cancelLabel,
+  saveLabel,
+  value,
+  onValueChange,
+  canSave = true,
+  isSaving = false,
+  error,
+  onSubmit,
+}: OrganizationProfileEditFieldDialogProps) {
+  const formId = useId();
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    if (canSave && !isSaving) {
+      onSubmit();
+    }
+  };
+
+  return (
+    <Dialog.Root
+      open={open}
+      onOpenChange={onOpenChange}
+    >
+      {trigger ? <Dialog.Trigger render={trigger} /> : null}
+      <Dialog.Popup
+        variant='card'
+        initialFocus={inputRef}
+      >
+        <Card.Root
+          elevation='overlay'
+          renderBranding={false}
+        >
+          <Card.Header>
+            <Card.Title>{title}</Card.Title>
+            {description ? <Card.Description>{description}</Card.Description> : null}
+          </Card.Header>
+
+          <Card.Content
+            render={
+              <form
+                id={formId}
+                onSubmit={handleSubmit}
+              />
+            }
+          >
+            {error?.message ? (
+              <Banner.Root
+                role='alert'
+                color='negative'
+              >
+                <Banner.Label>{error.message}</Banner.Label>
+              </Banner.Root>
+            ) : null}
+            <Field.Root invalid={Boolean(error?.field)}>
+              <Field.Label visuallyHidden>{fieldLabel}</Field.Label>
+              <Input
+                ref={inputRef}
+                disabled={isSaving}
+                value={value}
+                onChange={event => onValueChange(event.target.value)}
+              />
+              <Field.Message>
+                <Field.Error>{error?.field}</Field.Error>
+              </Field.Message>
+            </Field.Root>
+          </Card.Content>
+          <Card.Footer>
+            <Dialog.Close
+              render={
+                <Button
+                  variant='outline'
+                  color='neutral'
+                  fullWidth
+                >
+                  {cancelLabel}
+                </Button>
+              }
+            />
+            <SubmitButton
+              form={formId}
+              fullWidth
+              isPending={isSaving}
+              disabled={!canSave}
+              focusableWhenDisabled
+            >
+              {saveLabel}
+            </SubmitButton>
+          </Card.Footer>
+        </Card.Root>
+      </Dialog.Popup>
+    </Dialog.Root>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx
new file mode 100644
index 00000000000..417b98dcf2b
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx
@@ -0,0 +1,141 @@
+import { useState } from 'react';
+
+import { Avatar } from '../../../components/avatar';
+import { Button } from '../../../components/button';
+import { Section } from '../../../components/section';
+import { useMessages } from '../../../localization';
+import type { FileRejection } from '../../../primitives/file-upload';
+import { FileUpload } from '../../../primitives/file-upload';
+import type { OrganizationProfileMenuAction } from '../organization-profile-action-menu';
+import { OrganizationProfileActionMenu } from '../organization-profile-action-menu';
+
+const LOGO_MIME_TYPES = 'image/png,image/jpeg,image/gif,image/webp';
+const LOGO_MAX_BYTES = 10 * 1000 * 1000;
+
+export interface OrganizationProfileLogoRowViewProps {
+  name: string;
+  imageUrl?: string;
+  hasImage?: boolean;
+  errorMessage?: string;
+  onChange?: (file: File) => void;
+  onReject?: (rejections: FileRejection[]) => void;
+  onRemove?: () => void;
+}
+
+export function OrganizationProfileLogoRowView({
+  name,
+  imageUrl,
+  hasImage = false,
+  errorMessage,
+  onChange,
+  onReject,
+  onRemove,
+}: OrganizationProfileLogoRowViewProps) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  const [rejectionError, setRejectionError] = useState<string>();
+  const displayedError = errorMessage ?? rejectionError;
+  const initials = name
+    .split(/\s+/)
+    .map(part => part[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase();
+
+  return (
+    <FileUpload.Root
+      accept={LOGO_MIME_TYPES}
+      maxSize={LOGO_MAX_BYTES}
+      render={<Section.Row />}
+      onReject={rejections => {
+        const rejection = rejections[0];
+        setRejectionError(rejection ? m.logo.errors[rejection.reason] : undefined);
+        onReject?.(rejections);
+      }}
+      onValueChange={files => {
+        const file = files[0];
+        if (file) {
+          setRejectionError(undefined);
+          onChange?.(file);
+        }
+      }}
+    >
+      <Section.Item>
+        <Section.Media size='lg'>
+          <Avatar.Root
+            shape='square'
+            size='fit'
+          >
+            <Avatar.Image
+              alt={name}
+              src={imageUrl}
+            />
+            <Avatar.Fallback>{initials}</Avatar.Fallback>
+          </Avatar.Root>
+        </Section.Media>
+        <Section.Content>
+          <Section.Label>{m.logo.label}</Section.Label>
+          <Section.Description>{m.logo.description}</Section.Description>
+        </Section.Content>
+        <LogoActions
+          canChange={Boolean(onChange)}
+          hasImage={hasImage}
+          onRemove={onRemove}
+        />
+      </Section.Item>
+      <Section.Error>{displayedError}</Section.Error>
+    </FileUpload.Root>
+  );
+}
+
+function LogoActions({
+  hasImage,
+  canChange,
+  onRemove,
+}: {
+  hasImage: boolean;
+  canChange: boolean;
+  onRemove?: () => void;
+}) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  const { openFilePicker } = FileUpload.useFileUpload();
+  const actions: OrganizationProfileMenuAction[] = [];
+
+  if (hasImage && canChange) {
+    actions.push({ label: m.logo.change, icon: 'pen', onClick: openFilePicker });
+  }
+
+  if (hasImage && onRemove) {
+    actions.push({ label: m.logo.remove, icon: 'x', onClick: onRemove });
+  }
+
+  if (actions.length > 0) {
+    return (
+      <Section.Actions>
+        <OrganizationProfileActionMenu
+          actions={actions}
+          label={m.logo.manage}
+        />
+      </Section.Actions>
+    );
+  }
+
+  if (!hasImage && canChange) {
+    return (
+      <Section.Actions>
+        <FileUpload.Trigger
+          render={
+            <Button
+              color='neutral'
+              size='sm'
+              variant='outline'
+            />
+          }
+        >
+          {m.logo.upload}
+        </FileUpload.Trigger>
+      </Section.Actions>
+    );
+  }
+
+  return null;
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-name-row.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-name-row.view.tsx
new file mode 100644
index 00000000000..a91c912e2fc
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-name-row.view.tsx
@@ -0,0 +1,57 @@
+import { Button } from '../../../components/button';
+import { Section } from '../../../components/section';
+import { useMessages } from '../../../localization';
+import { useOrganizationProfileEditFieldController } from './organization-profile-edit-field.controller';
+import { OrganizationProfileEditFieldDialog } from './organization-profile-edit-field.dialog';
+
+export interface OrganizationProfileNameRowViewProps {
+  name: string;
+  onSubmit?: (name: string) => Promise<void>;
+}
+
+export function OrganizationProfileNameRowView({ name, onSubmit }: OrganizationProfileNameRowViewProps) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  return (
+    <Section.Row>
+      <Section.Item>
+        <Section.Content>
+          <Section.Label>{m.name.label}</Section.Label>
+          <Section.Description>{name}</Section.Description>
+        </Section.Content>
+        {onSubmit ? (
+          <Section.Actions>
+            <EditName
+              name={name}
+              onSubmit={onSubmit}
+            />
+          </Section.Actions>
+        ) : null}
+      </Section.Item>
+    </Section.Row>
+  );
+}
+
+function EditName({ name, onSubmit }: { name: string; onSubmit: (name: string) => Promise<void> }) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  const controller = useOrganizationProfileEditFieldController({ value: name, onSubmit });
+
+  return (
+    <OrganizationProfileEditFieldDialog
+      {...controller}
+      open={controller.isOpen}
+      title={m.name.dialogTitle}
+      fieldLabel={m.name.fieldLabel}
+      cancelLabel={m.name.cancel}
+      saveLabel={m.name.save}
+      trigger={
+        <Button
+          color='neutral'
+          size='sm'
+          variant='outline'
+        >
+          {m.name.edit}
+        </Button>
+      }
+    />
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx
new file mode 100644
index 00000000000..e11ed2c6b84
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-slug-row.view.tsx
@@ -0,0 +1,76 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { Button } from '../../../components/button';
+import { CopyButton } from '../../../components/copy-button';
+import { Section } from '../../../components/section';
+import { useMessages } from '../../../localization';
+import { truncationStyles } from '../../../utils/typography.styles';
+import { useOrganizationProfileEditFieldController } from './organization-profile-edit-field.controller';
+import { OrganizationProfileEditFieldDialog } from './organization-profile-edit-field.dialog';
+import { styles } from './organization-profile-workspace-section.styles';
+
+export interface OrganizationProfileSlugRowViewProps {
+  slug: string;
+  onSubmit?: (slug: string) => Promise<void>;
+}
+
+export function OrganizationProfileSlugRowView({ slug, onSubmit }: OrganizationProfileSlugRowViewProps) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  return (
+    <Section.Row>
+      <Section.Item>
+        <Section.Content>
+          <Section.Label>{m.slug.label}</Section.Label>
+          <Section.Description xstyle={styles.copyableValue}>
+            <span
+              {...stylex.props(truncationStyles.singleLine, styles.copyableText)}
+              title={slug}
+            >
+              {slug}
+            </span>
+            <CopyButton
+              value={slug}
+              label={m.slug.copy}
+              copiedLabel={m.slug.copied}
+              xstyle={styles.copyAction}
+            />
+          </Section.Description>
+        </Section.Content>
+        {onSubmit ? (
+          <Section.Actions>
+            <EditSlug
+              slug={slug}
+              onSubmit={onSubmit}
+            />
+          </Section.Actions>
+        ) : null}
+      </Section.Item>
+    </Section.Row>
+  );
+}
+
+function EditSlug({ slug, onSubmit }: { slug: string; onSubmit: (slug: string) => Promise<void> }) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+  const controller = useOrganizationProfileEditFieldController({ value: slug, onSubmit });
+
+  return (
+    <OrganizationProfileEditFieldDialog
+      {...controller}
+      open={controller.isOpen}
+      title={m.slug.dialogTitle}
+      description={m.slug.dialogDescription}
+      fieldLabel={m.slug.fieldLabel}
+      cancelLabel={m.slug.cancel}
+      saveLabel={m.slug.save}
+      trigger={
+        <Button
+          color='neutral'
+          size='sm'
+          variant='outline'
+        >
+          {m.slug.edit}
+        </Button>
+      }
+    />
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.messages.ts b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.messages.ts
new file mode 100644
index 00000000000..c9cb5417eb0
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.messages.ts
@@ -0,0 +1,38 @@
+export const organizationProfileWorkspaceSectionMessages = {
+  sectionTitle: 'Workspace details',
+  logo: {
+    label: 'Logo',
+    description: 'Recommended size 1:1, up to 10MB.',
+    upload: 'Upload',
+    manage: 'Manage logo',
+    change: 'Change logo',
+    remove: 'Remove logo',
+
+    errors: {
+      accept: 'File type not supported. Please upload a JPG, PNG, GIF, or WEBP image.',
+      size: 'File size exceeds the maximum limit of 10MB. Please choose a smaller file.',
+      overflow: 'Only one file can be uploaded at a time.',
+    },
+  },
+  name: {
+    label: 'Name',
+    edit: 'Edit name',
+
+    dialogTitle: 'Edit name',
+    fieldLabel: 'Name',
+    cancel: 'Cancel',
+    save: 'Save changes',
+  },
+  slug: {
+    label: 'Slug',
+    edit: 'Edit slug',
+    copy: 'Copy slug',
+    copied: 'Copied',
+
+    dialogTitle: 'Edit slug',
+    dialogDescription: 'A unique identifier used in workspace URLs. Changing it may break existing links.',
+    fieldLabel: 'Slug',
+    cancel: 'Cancel',
+    save: 'Save changes',
+  },
+} as const;
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.styles.ts b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.styles.ts
new file mode 100644
index 00000000000..512d0b115cc
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.styles.ts
@@ -0,0 +1,14 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { space } from '../../../tokens.stylex';
+
+export const styles = stylex.create({
+  copyableValue: {
+    gap: space['1'],
+    alignItems: 'center',
+    display: 'flex',
+    minWidth: 0,
+  },
+  copyableText: { minWidth: 0 },
+  copyAction: { flexShrink: 0 },
+});
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view.tsx
new file mode 100644
index 00000000000..11d06db54d8
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view.tsx
@@ -0,0 +1,56 @@
+import { Section } from '../../../components/section';
+import { useMessages } from '../../../localization';
+import type { FileRejection } from '../../../primitives/file-upload';
+import { OrganizationProfileLogoRowView } from './organization-profile-logo-row.view';
+import { OrganizationProfileNameRowView } from './organization-profile-name-row.view';
+import { OrganizationProfileSlugRowView } from './organization-profile-slug-row.view';
+
+export interface OrganizationProfileWorkspaceSectionViewProps {
+  name: string;
+  slug: string;
+  imageUrl?: string;
+  hasImage?: boolean;
+  onLogoChange?: (file: File) => void;
+  onLogoReject?: (rejections: FileRejection[]) => void;
+  onRemoveLogo?: () => void;
+  onSubmitName?: (name: string) => Promise<void>;
+  onSubmitSlug?: (slug: string) => Promise<void>;
+}
+
+export function OrganizationProfileWorkspaceSectionView({
+  name,
+  slug,
+  imageUrl,
+  hasImage = false,
+  onLogoChange,
+  onLogoReject,
+  onRemoveLogo,
+  onSubmitName,
+  onSubmitSlug,
+}: OrganizationProfileWorkspaceSectionViewProps) {
+  const m = useMessages('organizationProfileWorkspaceSection');
+
+  return (
+    <Section.Root>
+      <Section.Title>{m.sectionTitle}</Section.Title>
+      <Section.Group>
+        <OrganizationProfileLogoRowView
+          name={name}
+          imageUrl={imageUrl}
+          hasImage={hasImage}
+          onChange={onLogoChange}
+          onReject={onLogoReject}
+          onRemove={onRemoveLogo}
+        />
+        <OrganizationProfileNameRowView
+          name={name}
+          onSubmit={onSubmitName}
+        />
+        <OrganizationProfileSlugRowView
+          slug={slug}
+          onSubmit={onSubmitSlug}
+        />
+      </Section.Group>
+    </Section.Root>
+  );
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile.layout.ts b/packages/mosaic/src/features/organization-profile/organization-profile.layout.ts
new file mode 100644
index 00000000000..d9e9747fada
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile.layout.ts
@@ -0,0 +1,48 @@
+import type { IconName } from '../../icons/registry';
+import { applyOrder } from '../../utils/apply-order';
+import type {
+  CustomOrganizationProfilePage,
+  OrganizationProfilePageId,
+  OrganizationProfilePages,
+} from './organization-profile.types';
+
+export const ORGANIZATION_PROFILE_PAGE_IDS: readonly OrganizationProfilePageId[] = [
+  'general',
+  'members',
+  'security',
+  'billing',
+  'apiKeys',
+];
+
+export const ORGANIZATION_PROFILE_PAGE_ICONS: Record<OrganizationProfilePageId, IconName> = {
+  general: 'building',
+  members: 'users',
+  security: 'security-lock-square',
+  billing: 'credit-card',
+  apiKeys: 'key',
+};
+
+export type OrganizationProfileNavEntry =
+  | { id: OrganizationProfilePageId; custom?: undefined }
+  | { id: string; custom: CustomOrganizationProfilePage };
+
+export function getAvailableOrganizationProfilePages(pages: OrganizationProfilePages): OrganizationProfilePageId[] {
+  return ORGANIZATION_PROFILE_PAGE_IDS.filter(id => pages[id] !== undefined);
+}
+
+export function resolveOrganizationProfilePages(
+  builtIn: readonly OrganizationProfilePageId[],
+  customPages: readonly CustomOrganizationProfilePage[] = [],
+  order?: readonly string[],
+): OrganizationProfileNavEntry[] {
+  const customById = new Map(customPages.map(page => [page.path, page]));
+  const builtInIds = new Set<string>(builtIn);
+  const entries: OrganizationProfileNavEntry[] = [
+    ...builtIn.map((id): OrganizationProfileNavEntry => {
+      const custom = customById.get(id);
+      return custom ? { id, custom } : { id };
+    }),
+    ...customPages.filter(page => !builtInIds.has(page.path)).map(page => ({ id: page.path, custom: page })),
+  ];
+  return applyOrder(order, entries, entry => entry.id);
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile.messages.ts b/packages/mosaic/src/features/organization-profile/organization-profile.messages.ts
new file mode 100644
index 00000000000..9dd9cf3775e
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile.messages.ts
@@ -0,0 +1,11 @@
+export const organizationProfileMessages = {
+  label: 'Workspace',
+  pages: {
+    general: 'General',
+    members: 'Members',
+    security: 'Security',
+    billing: 'Billing',
+    apiKeys: 'API Keys',
+  },
+  placeholder: '{page} is not built yet.',
+} as const;
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile.types.ts b/packages/mosaic/src/features/organization-profile/organization-profile.types.ts
new file mode 100644
index 00000000000..19eab34d998
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile.types.ts
@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+
+import type { OrganizationProfileGeneralPanelViewProps } from './organization-profile-general-panel.view';
+
+export type OrganizationProfilePageId = 'general' | 'members' | 'security' | 'billing' | 'apiKeys';
+
+export interface OrganizationProfilePages {
+  general: OrganizationProfileGeneralPanelViewProps;
+  members?: Record<string, never>;
+  security?: Record<string, never>;
+  billing?: Record<string, never>;
+  apiKeys?: Record<string, never>;
+}
+
+export interface CustomOrganizationProfilePage {
+  label: string;
+  path: string;
+  href?: never;
+  icon?: ReactNode;
+  content: ReactNode;
+}
+
+export interface OrganizationProfileFormError {
+  message?: string;
+  field?: string;
+}
+
+export class OrganizationProfileSaveError extends Error {
+  readonly field?: string;
+
+  constructor(message: string, field?: string) {
+    super(message);
+    this.name = 'OrganizationProfileSaveError';
+    this.field = field;
+  }
+}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile.view.tsx
new file mode 100644
index 00000000000..466e73d0d37
--- /dev/null
+++ b/packages/mosaic/src/features/organization-profile/organization-profile.view.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { Icon } from '../../components/icon';
+import type { ProfileRootProps } from '../../components/profile';
+import { Profile } from '../../components/profile';
+import { useMessages } from '../../localization';
+import {
+  getAvailableOrganizationProfilePages,
+  ORGANIZATION_PROFILE_PAGE_ICONS,
+  resolveOrganizationProfilePages,
+} from './organization-profile.layout';
+import type {
+  CustomOrganizationProfilePage,
+  OrganizationProfilePageId,
+  OrganizationProfilePages,
+} from './organization-profile.types';
+import { OrganizationProfileGeneralPanelView } from './organization-profile-general-panel.view';
+import { OrganizationProfilePlaceholderPanelView } from './organization-profile-placeholder-panel.view';
+
+export interface OrganizationProfileViewProps extends Omit<ProfileRootProps, 'children' | 'value' | 'onValueChange'> {
+  label?: string;
+  activePage: OrganizationProfilePageId | (string & {});
+  pages: OrganizationProfilePages;
+  customPages?: readonly CustomOrganizationProfilePage[];
+  pageOrder?: readonly (OrganizationProfilePageId | (string & {}))[];
+  onPageChange: (page: OrganizationProfilePageId | (string & {})) => void;
+}
+
+function BuiltInPage({
+  id,
+  pages,
+}: {
+  id: OrganizationProfilePageId;
+  pages: OrganizationProfilePages;
+}): React.ReactElement | null {
+  if (id === 'general') {
+    return <OrganizationProfileGeneralPanelView {...pages.general} />;
+  }
+  return <OrganizationProfilePlaceholderPanelView page={id} />;
+}
+
+export const OrganizationProfileView = React.forwardRef<HTMLDivElement, OrganizationProfileViewProps>(
+  function OrganizationProfileView({ activePage, pages, customPages, pageOrder, onPageChange, label, ...rest }, ref) {
+    const m = useMessages('organizationProfile');
+    const entries = resolveOrganizationProfilePages(
+      getAvailableOrganizationProfilePages(pages),
+      customPages,
+      pageOrder,
+    );
+    const resolvedPage = entries.some(entry => entry.id === activePage) ? activePage : entries[0].id;
+
+    return (
+      <Profile.Root
+        ref={ref}
+        value={resolvedPage}
+        onValueChange={onPageChange}
+        {...rest}
+      >
+        <Profile.Title>{label ?? m.label}</Profile.Title>
+        <Profile.Nav>
+          {entries.map(entry => (
+            <Profile.NavItem
+              key={entry.id}
+              value={entry.id}
+              icon={
+                entry.custom ? (
+                  entry.custom.icon
+                ) : (
+                  <Icon
+                    name={ORGANIZATION_PROFILE_PAGE_ICONS[entry.id]}
+                    size='sm'
+                  />
+                )
+              }
+            >
+              {entry.custom ? entry.custom.label : m.pages[entry.id]}
+            </Profile.NavItem>
+          ))}
+        </Profile.Nav>
+        <Profile.Content>
+          {entries.map(entry => (
+            <Profile.ContentPanel
+              key={entry.id}
+              value={entry.id}
+            >
+              {entry.custom ? (
+                entry.custom.content
+              ) : (
+                <BuiltInPage
+                  id={entry.id}
+                  pages={pages}
+                />
+              )}
+            </Profile.ContentPanel>
+          ))}
+        </Profile.Content>
+      </Profile.Root>
+    );
+  },
+);
diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
index 4eef4285037..edb02157f6b 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
@@ -80,7 +80,7 @@ export function UserProfilePictureRowView({
           onRemove={onRemove}
         />
       </Section.Item>
-      {displayedError ? <Section.Error>{displayedError}</Section.Error> : null}
+      <Section.Error>{displayedError}</Section.Error>
     </FileUpload.Root>
   );
 }
diff --git a/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx
index e953d8ccdfc..b40219081a2 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx
@@ -92,11 +92,9 @@ export function UserProfileConnectedAccountRowView({
           </Section.Actions>
         ) : null}
       </Section.Item>
-      {account.connectError ? <Section.Error>{account.connectError}</Section.Error> : null}
-      {account.reconnectError ? <Section.Error>{account.reconnectError}</Section.Error> : null}
-      {account.status === 'error' && account.verificationError ? (
-        <Section.Error>{account.verificationError}</Section.Error>
-      ) : null}
+      <Section.Error>{account.connectError}</Section.Error>
+      <Section.Error>{account.reconnectError}</Section.Error>
+      <Section.Error>{account.status === 'error' ? account.verificationError : undefined}</Section.Error>
     </Section.Row>
   );
 }
diff --git a/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx
index f6330c2052f..b37b3e4ac29 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-enterprise-accounts-section/user-profile-enterprise-account-row.view.tsx
@@ -88,7 +88,7 @@ export function UserProfileEnterpriseAccountRowView({
           </Section.Actions>
         ) : null}
       </Section.Item>
-      {onConnect && account.connectError ? <Section.Error>{account.connectError}</Section.Error> : null}
+      <Section.Error>{onConnect ? account.connectError : undefined}</Section.Error>
     </Section.Row>
   );
 }
diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx
index 5027b5c64da..4a1e67ca191 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx
@@ -100,8 +100,8 @@ export function UserProfileWeb3WalletRowView({
           </Section.Actions>
         ) : null}
       </Section.Item>
-      {'connectError' in wallet && wallet.connectError ? <Section.Error>{wallet.connectError}</Section.Error> : null}
-      {linkedWallet?.primaryError ? <Section.Error>{linkedWallet.primaryError}</Section.Error> : null}
+      <Section.Error>{'connectError' in wallet ? wallet.connectError : undefined}</Section.Error>
+      <Section.Error>{linkedWallet?.primaryError}</Section.Error>
     </Section.Row>
   );
 }
diff --git a/packages/mosaic/src/localization/registry.ts b/packages/mosaic/src/localization/registry.ts
index 6c37b74b67b..a194045f8a1 100644
--- a/packages/mosaic/src/localization/registry.ts
+++ b/packages/mosaic/src/localization/registry.ts
@@ -1,3 +1,6 @@
+import { organizationProfileMessages } from '../features/organization-profile/organization-profile.messages';
+import { organizationProfileDangerSectionMessages } from '../features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.messages';
+import { organizationProfileWorkspaceSectionMessages } from '../features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.messages';
 import { reverificationMessages } from '../features/reverification/reverification.messages';
 import { userButtonMessages } from '../features/user-button/user-button.messages';
 import { userProfileMessages } from '../features/user-profile/user-profile.messages';
@@ -19,6 +22,9 @@ import { userProfilePasswordSectionMessages } from '../features/user-profile/use
 import { userProfileWeb3WalletsMessages } from '../features/user-profile/user-profile-web3-wallets.messages';
 
 export const mosaicMessages = {
+  organizationProfile: organizationProfileMessages,
+  organizationProfileDangerSection: organizationProfileDangerSectionMessages,
+  organizationProfileWorkspaceSection: organizationProfileWorkspaceSectionMessages,
   reverification: reverificationMessages,
   userButton: userButtonMessages,
   userProfile: userProfileMessages,
diff --git a/packages/mosaic/src/utils/feedback.styles.ts b/packages/mosaic/src/utils/feedback.styles.ts
new file mode 100644
index 00000000000..92bcd4fbd4c
--- /dev/null
+++ b/packages/mosaic/src/utils/feedback.styles.ts
@@ -0,0 +1,56 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars, durationVars, easingVars, space } from '../tokens.stylex';
+
+const GAP = space['2'];
+
+export const feedbackStyles = stylex.create({
+  collapse: {
+    overflow: 'clip',
+    alignContent: 'start',
+    display: 'grid',
+    position: 'relative',
+    transitionDuration: durationVars['--cl-duration-slow'],
+    transitionProperty: {
+      default: 'height, margin-top',
+      '@media (prefers-reduced-motion: reduce)': 'none',
+    },
+    transitionTimingFunction: easingVars['--cl-ease-enter'],
+    height: {
+      default: 'var(--_cl-feedback-height)',
+      ':where(:not([data-open]), [data-starting-style])': 0,
+    },
+    marginTop: {
+      default: 0,
+      ':where(:not([data-open]), [data-starting-style])': `calc(-1 * ${GAP})`,
+    },
+  },
+  message: {
+    inset: { default: null, ':where([data-ending-style])': '0 0 auto' },
+    margin: 0,
+    gap: space['1'],
+    alignItems: 'flex-start',
+    display: 'flex',
+    opacity: { default: 1, ':where([data-starting-style], [data-ending-style])': 0 },
+    // Leaves the flow while it exits so the message arriving behind it takes the row.
+    position: { default: null, ':where([data-ending-style])': 'absolute' },
+    textWrap: 'pretty',
+    transitionDuration: durationVars['--cl-duration-base'],
+    transitionProperty: 'opacity',
+    transitionTimingFunction: 'linear',
+  },
+  icon: {
+    flexShrink: 0,
+    height: '1lh',
+  },
+  error: {
+    color: colorVars['--cl-color-negative'],
+  },
+  success: {
+    color: colorVars['--cl-color-positive'],
+  },
+});
+
+export const feedbackHeight = stylex.create({
+  measured: (height: number) => ({ '--_cl-feedback-height': `${height}px` }),
+});
diff --git a/packages/mosaic/src/utils/feedback.tsx b/packages/mosaic/src/utils/feedback.tsx
new file mode 100644
index 00000000000..48419840072
--- /dev/null
+++ b/packages/mosaic/src/utils/feedback.tsx
@@ -0,0 +1,55 @@
+import { useSafeLayoutEffect } from '@clerk/shared/react';
+import React from 'react';
+
+import { Icon } from '../components/icon';
+import type { IconName } from '../icons/registry';
+import { feedbackStyles } from './feedback.styles';
+
+export function hasMessage(children: React.ReactNode) {
+  return React.Children.toArray(children).some(child => child !== '');
+}
+
+export function useMessageHeight(active: HTMLElement | null) {
+  const [height, setHeight] = React.useState(0);
+
+  useSafeLayoutEffect(() => {
+    if (!active) {
+      return undefined;
+    }
+
+    const measure = () => setHeight(active.offsetHeight);
+    measure();
+
+    if (typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+
+    const observer = new ResizeObserver(measure);
+    observer.observe(active);
+    return () => observer.disconnect();
+  }, [active]);
+
+  return height;
+}
+
+export function useHeldMessage(children: React.ReactNode, open: boolean) {
+  const held = React.useRef(children);
+  if (open) {
+    held.current = children;
+  }
+  return held.current;
+}
+
+export function FeedbackBody({ icon, children }: { icon: IconName; children: React.ReactNode }) {
+  return (
+    <>
+      <Icon
+        name={icon}
+        size='sm'
+        aria-hidden='true'
+        xstyle={feedbackStyles.icon}
+      />
+      <span>{children}</span>
+    </>
+  );
+}
diff --git a/packages/swingset/src/components/Composition.tsx b/packages/swingset/src/components/Composition.tsx
index 37d0d781440..0a525e5a687 100644
--- a/packages/swingset/src/components/Composition.tsx
+++ b/packages/swingset/src/components/Composition.tsx
@@ -13,7 +13,15 @@ export interface CompositionPiece {
 
 // Mosaic layers, high → low. Drives the order the composition groups render in.
 // Matches the sidebar group names.
-const LAYER_ORDER = ['User Button', 'User Profile', 'Blocks', 'Components', 'Styles', 'Primitives'];
+const LAYER_ORDER = [
+  'User Button',
+  'User Profile',
+  'Organization Profile',
+  'Blocks',
+  'Components',
+  'Styles',
+  'Primitives',
+];
 
 function layerRank(layer: string): number {
   const i = LAYER_ORDER.indexOf(layer);
diff --git a/packages/swingset/src/components/DocsViewer.tsx b/packages/swingset/src/components/DocsViewer.tsx
index f4cadf172f1..c648301e3a7 100644
--- a/packages/swingset/src/components/DocsViewer.tsx
+++ b/packages/swingset/src/components/DocsViewer.tsx
@@ -39,6 +39,14 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
     'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
   },
+  'organization-profile': {
+    'organization-profile': dynamic(() => import('../stories/organization-profile.mdx')),
+    'organization-profile-general-panel': dynamic(() => import('../stories/organization-profile-general-panel.mdx')),
+    'organization-profile-workspace-section': dynamic(
+      () => import('../stories/organization-profile-workspace-section.mdx'),
+    ),
+    'organization-profile-danger-section': dynamic(() => import('../stories/organization-profile-danger-section.mdx')),
+  },
   reverification: {
     reverification: dynamic(() => import('../stories/reverification.mdx')),
   },
@@ -54,6 +62,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     card: dynamic(() => import('../stories/card.component.mdx')),
     checkbox: dynamic(() => import('../stories/checkbox.mdx')),
     combobox: dynamic(() => import('../stories/combobox.mdx')),
+    'copy-button': dynamic(() => import('../stories/copy-button.mdx')),
     'data-list': dynamic(() => import('../stories/data-list.mdx')),
     input: dynamic(() => import('../stories/input.mdx')),
     'input-group': dynamic(() => import('../stories/input-group.mdx')),
diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts
index eadd81c7f4c..3b1127eba1d 100644
--- a/packages/swingset/src/lib/registry.ts
+++ b/packages/swingset/src/lib/registry.ts
@@ -42,6 +42,12 @@ import {
   meta as confirmationMeta,
   WithError as ConfirmationWithError,
 } from '../stories/confirmation.stories';
+import {
+  Default as CopyButtonDefault,
+  Inline as CopyButtonInline,
+  Labelled as CopyButtonLabelled,
+  meta as copyButtonMeta,
+} from '../stories/copy-button.stories';
 import { Default as DataListDefault, meta as dataListMeta, Plain as DataListPlain } from '../stories/data-list.stories';
 import {
   Default as DestructiveDefault,
@@ -124,6 +130,27 @@ import {
 } from '../stories/localization.stories';
 import { Default as MenuComponentDefault, meta as menuComponentMeta } from '../stories/menu.component.stories';
 import { meta as menuMeta } from '../stories/menu.stories';
+import {
+  Default as OrganizationProfileDefault,
+  meta as organizationProfileMeta,
+  Overlay as OrganizationProfileOverlay,
+} from '../stories/organization-profile.stories';
+import {
+  Default as OrganizationProfileDangerSectionDefault,
+  LeaveOnly as OrganizationProfileDangerSectionLeaveOnly,
+  meta as organizationProfileDangerSectionMeta,
+  WithError as OrganizationProfileDangerSectionWithError,
+} from '../stories/organization-profile-danger-section.stories';
+import {
+  Default as OrganizationProfileGeneralPanelDefault,
+  meta as organizationProfileGeneralPanelMeta,
+  ReadOnly as OrganizationProfileGeneralPanelReadOnly,
+} from '../stories/organization-profile-general-panel.stories';
+import {
+  Default as OrganizationProfileWorkspaceSectionDefault,
+  meta as organizationProfileWorkspaceSectionMeta,
+  SaveFails as OrganizationProfileWorkspaceSectionSaveFails,
+} from '../stories/organization-profile-workspace-section.stories';
 import {
   Default as OtpComponentDefault,
   Disabled as OtpComponentDisabled,
@@ -396,6 +423,38 @@ const comboboxModule: StoryModule = {
   Scrolling: ComboboxScrolling,
 };
 
+const copyButtonModule: StoryModule = {
+  meta: copyButtonMeta,
+  Default: CopyButtonDefault,
+  Inline: CopyButtonInline,
+  Labelled: CopyButtonLabelled,
+};
+
+const organizationProfileModule: StoryModule = {
+  meta: organizationProfileMeta,
+  Default: OrganizationProfileDefault,
+  Overlay: OrganizationProfileOverlay,
+};
+
+const organizationProfileGeneralPanelModule: StoryModule = {
+  meta: organizationProfileGeneralPanelMeta,
+  Default: OrganizationProfileGeneralPanelDefault,
+  ReadOnly: OrganizationProfileGeneralPanelReadOnly,
+};
+
+const organizationProfileWorkspaceSectionModule: StoryModule = {
+  meta: organizationProfileWorkspaceSectionMeta,
+  Default: OrganizationProfileWorkspaceSectionDefault,
+  SaveFails: OrganizationProfileWorkspaceSectionSaveFails,
+};
+
+const organizationProfileDangerSectionModule: StoryModule = {
+  meta: organizationProfileDangerSectionMeta,
+  Default: OrganizationProfileDangerSectionDefault,
+  WithError: OrganizationProfileDangerSectionWithError,
+  LeaveOnly: OrganizationProfileDangerSectionLeaveOnly,
+};
+
 const avatarModule: StoryModule = {
   meta: avatarMeta,
   Primary: AvatarPrimary,
@@ -783,6 +842,13 @@ export const registry: StoryModule[] = [
   userProfileEnterpriseAccountsSectionModule,
   userProfileWeb3WalletsSectionModule,
   userProfileDeleteSectionModule,
+  // Organization Profile
+  organizationProfileModule,
+  // Organization Profile · Panels
+  organizationProfileGeneralPanelModule,
+  // Organization Profile · Sections
+  organizationProfileWorkspaceSectionModule,
+  organizationProfileDangerSectionModule,
   // Reverification
   reverificationModule,
   // Blocks — flows assembled from components, wired by the caller's machine.
@@ -796,6 +862,7 @@ export const registry: StoryModule[] = [
   cardComponentModule,
   checkboxModule,
   comboboxModule,
+  copyButtonModule,
   flowComponentModule,
   inputModule,
   inputGroupModule,
diff --git a/packages/swingset/src/stories/copy-button.mdx b/packages/swingset/src/stories/copy-button.mdx
new file mode 100644
index 00000000000..8eacc940644
--- /dev/null
+++ b/packages/swingset/src/stories/copy-button.mdx
@@ -0,0 +1,43 @@
+import * as Stories from './copy-button.stories';
+
+# CopyButton
+
+Puts a value on the clipboard. A tooltip confirms the copy and settles after `resetAfter`. It
+opens only on the copy, so the button carries no hover tooltip of its own.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[{ name: 'Button', href: '/components/button', layer: 'Components' }]}
+/>
+
+## Props
+
+<PropTable
+  meta={Stories.meta}
+  extra={[
+    { name: 'value', type: 'string' },
+    { name: 'label', type: 'string', default: 'Copy' },
+    { name: 'copiedLabel', type: 'string', default: 'Copied' },
+    { name: 'placement', type: "'top' | 'bottom' | 'left' | 'right'", default: 'top' },
+    { name: 'resetAfter', type: 'number', default: '2000' },
+    { name: 'onCopy', type: '(value: string) => void | Promise<void>' },
+  ]}
+/>
+
+## Inline with the value
+
+<Story
+  name='Inline'
+  storyModule={Stories}
+/>
+
+## Naming what it copies
+
+The button keeps its name while the copy is fresh. A tooltip opened without the pointer is not
+announced, so the outcome comes from a live region instead.
+
+<Story
+  name='Labelled'
+  storyModule={Stories}
+/>
diff --git a/packages/swingset/src/stories/copy-button.stories.tsx b/packages/swingset/src/stories/copy-button.stories.tsx
new file mode 100644
index 00000000000..8b34f3ad844
--- /dev/null
+++ b/packages/swingset/src/stories/copy-button.stories.tsx
@@ -0,0 +1,65 @@
+import { CopyButton } from '@clerk/mosaic/components/copy-button';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './copy-button.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Components',
+  status: 'stable',
+  title: 'CopyButton',
+  source: 'packages/mosaic/src/components/copy-button/copy-button.tsx',
+  styles: {
+    _variants: {
+      color: { primary: {}, neutral: {}, negative: {} },
+      variant: { filled: {}, outline: {}, ghost: {}, link: {} },
+      size: { xs: {}, sm: {}, md: {}, lg: {} },
+      shape: { default: {}, square: {}, circle: {} },
+    },
+    _defaultVariants: {
+      color: 'neutral',
+      variant: 'ghost',
+      size: 'xs',
+      shape: 'square',
+    },
+  },
+};
+
+function knobsAsProps(props: Record<string, unknown>) {
+  return props as unknown as Record<string, never>;
+}
+
+export function Default(props: Record<string, unknown>) {
+  return (
+    <CopyButton
+      {...knobsAsProps(props)}
+      value='clerkWorkspace-177654156132154'
+    />
+  );
+}
+
+export function Inline(props: Record<string, unknown>) {
+  return (
+    <div style={{ display: 'flex', gap: 4, alignItems: 'center', fontSize: 14 }}>
+      <span>clerkWorkspace-177654156132154</span>
+      <CopyButton
+        {...knobsAsProps(props)}
+        value='clerkWorkspace-177654156132154'
+        label='Copy slug'
+      />
+    </div>
+  );
+}
+
+export function Labelled(props: Record<string, unknown>) {
+  return (
+    <CopyButton
+      {...knobsAsProps(props)}
+      value='sk_test_0000000000000000000000000000'
+      label='Copy API key'
+      copiedLabel='API key copied'
+      variant='outline'
+      size='sm'
+    />
+  );
+}
diff --git a/packages/swingset/src/stories/fixtures/organization-profile.ts b/packages/swingset/src/stories/fixtures/organization-profile.ts
new file mode 100644
index 00000000000..caa3c2ea489
--- /dev/null
+++ b/packages/swingset/src/stories/fixtures/organization-profile.ts
@@ -0,0 +1,53 @@
+import type { OrganizationProfileViewProps } from '@clerk/mosaic/features/organization-profile/organization-profile.view';
+import { useState } from 'react';
+
+import { usePreviewImage } from './use-preview-image';
+
+const INITIAL_NAME = 'Clerk';
+const INITIAL_SLUG = 'clerkWorkspace-177654156132154';
+const MEMBER_COUNT = 20;
+
+const settleAfter = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
+
+export interface OrganizationProfileFixtureOptions {
+  failWith?: string;
+}
+
+export function useOrganizationProfileFixture({ failWith }: OrganizationProfileFixtureOptions = {}) {
+  const [activePage, setActivePage] = useState<OrganizationProfileViewProps['activePage']>('general');
+  const [name, setName] = useState(INITIAL_NAME);
+  const [slug, setSlug] = useState(INITIAL_SLUG);
+  const { imageUrl, showFile, clearImage } = usePreviewImage();
+
+  const save = async (apply: () => void) => {
+    await settleAfter(800);
+    if (failWith) {
+      throw new Error(failWith);
+    }
+    apply();
+  };
+
+  const general: OrganizationProfileViewProps['pages']['general'] = {
+    name,
+    slug,
+    memberCount: MEMBER_COUNT,
+    imageUrl,
+    hasImage: Boolean(imageUrl),
+    onLogoChange: showFile,
+    onRemoveLogo: clearImage,
+    onSubmitName: async next => save(() => setName(next)),
+    onSubmitSlug: async next => save(() => setSlug(next)),
+    onLeave: () => settleAfter(1200),
+    onDelete: () => settleAfter(1200),
+  };
+
+  const pages: OrganizationProfileViewProps['pages'] = {
+    general,
+    members: {},
+    security: {},
+    billing: {},
+    apiKeys: {},
+  };
+
+  return { activePage, setActivePage, pages, general, name };
+}
diff --git a/packages/swingset/src/stories/organization-profile-danger-section.mdx b/packages/swingset/src/stories/organization-profile-danger-section.mdx
new file mode 100644
index 00000000000..3fc943b842c
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-danger-section.mdx
@@ -0,0 +1,34 @@
+import * as Stories from './organization-profile-danger-section.stories';
+
+# OrganizationProfileDangerSection
+
+Leaving and deleting the workspace. Both ask for the workspace's name to be typed out, as the
+legacy organization profile does.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Destructive', href: '/blocks/destructive', layer: 'Blocks' },
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+  ]}
+/>
+
+## A failed action
+
+The dialog stays up and renders the reason under the confirmation field.
+
+<Story
+  name='WithError'
+  storyModule={Stories}
+/>
+
+## One action only
+
+A row appears only when its callback is given, so a member who cannot delete the workspace is left
+with leaving it.
+
+<Story
+  name='LeaveOnly'
+  storyModule={Stories}
+/>
diff --git a/packages/swingset/src/stories/organization-profile-danger-section.stories.tsx b/packages/swingset/src/stories/organization-profile-danger-section.stories.tsx
new file mode 100644
index 00000000000..6f8630a1e3e
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-danger-section.stories.tsx
@@ -0,0 +1,66 @@
+import { OrganizationProfileDangerSectionView } from '@clerk/mosaic/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view';
+import { useState } from 'react';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './organization-profile-danger-section.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Organization Profile',
+  status: 'wip',
+  substatus: 'needs wire-up',
+  title: 'OrganizationProfileDangerSection',
+  label: 'Danger zone',
+  navigation: { category: 'Sections' },
+  source:
+    'packages/mosaic/src/features/organization-profile/organization-profile-danger-section/organization-profile-danger-section.view.tsx',
+};
+
+const settleAfter = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
+
+export function Default() {
+  const [runId, setRunId] = useState(0);
+
+  // Both actions are terminal in the real flow, so the story remounts the section to repeat.
+  const settle = async () => {
+    await settleAfter(1500);
+    setRunId(current => current + 1);
+  };
+
+  return (
+    <OrganizationProfileDangerSectionView
+      key={runId}
+      name='Clerk'
+      memberCount={20}
+      onLeave={settle}
+      onDelete={settle}
+    />
+  );
+}
+
+export function WithError() {
+  return (
+    <OrganizationProfileDangerSectionView
+      name='Clerk'
+      memberCount={20}
+      onLeave={async () => {
+        await settleAfter(1500);
+        throw new Error('You are the last admin. Promote another member before you leave.');
+      }}
+      onDelete={async () => {
+        await settleAfter(1500);
+        throw new Error('This workspace has an active subscription. Cancel it before you delete.');
+      }}
+    />
+  );
+}
+
+export function LeaveOnly() {
+  return (
+    <OrganizationProfileDangerSectionView
+      name='Clerk'
+      memberCount={1}
+      onLeave={() => settleAfter(1500)}
+    />
+  );
+}
diff --git a/packages/swingset/src/stories/organization-profile-general-panel.mdx b/packages/swingset/src/stories/organization-profile-general-panel.mdx
new file mode 100644
index 00000000000..4ac9768f947
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-general-panel.mdx
@@ -0,0 +1,24 @@
+import * as Stories from './organization-profile-general-panel.stories';
+
+# OrganizationProfileGeneralPanel
+
+The workspace's General page: its details, and the danger zone under them.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Workspace details', href: '/organization-profile/organization-profile-workspace-section', layer: 'Organization Profile' },
+    { name: 'Danger zone', href: '/organization-profile/organization-profile-danger-section', layer: 'Organization Profile' },
+  ]}
+/>
+
+## Without permission to manage
+
+Each action appears only when the panel is handed its callback, so a member who cannot manage the
+workspace sees the details and nothing to act on.
+
+<Story
+  name='ReadOnly'
+  storyModule={Stories}
+/>
diff --git a/packages/swingset/src/stories/organization-profile-general-panel.stories.tsx b/packages/swingset/src/stories/organization-profile-general-panel.stories.tsx
new file mode 100644
index 00000000000..ae48d62a07b
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-general-panel.stories.tsx
@@ -0,0 +1,35 @@
+import { OrganizationProfileGeneralPanelView } from '@clerk/mosaic/features/organization-profile/organization-profile-general-panel.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+import { useOrganizationProfileFixture } from './fixtures/organization-profile';
+
+export { default as __source } from './organization-profile-general-panel.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Organization Profile',
+  status: 'wip',
+  substatus: 'needs wire-up',
+  title: 'OrganizationProfileGeneralPanel',
+  label: 'General panel',
+  navigation: { category: 'Panels' },
+  source: 'packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx',
+};
+
+export function Default() {
+  const { general } = useOrganizationProfileFixture();
+  return <OrganizationProfileGeneralPanelView {...general} />;
+}
+
+export function ReadOnly() {
+  const { general } = useOrganizationProfileFixture();
+  return (
+    <OrganizationProfileGeneralPanelView
+      name={general.name}
+      slug={general.slug}
+      memberCount={general.memberCount}
+      imageUrl={general.imageUrl}
+      hasImage={general.hasImage}
+    />
+  );
+}
diff --git a/packages/swingset/src/stories/organization-profile-workspace-section.mdx b/packages/swingset/src/stories/organization-profile-workspace-section.mdx
new file mode 100644
index 00000000000..9f441942104
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-workspace-section.mdx
@@ -0,0 +1,24 @@
+import * as Stories from './organization-profile-workspace-section.stories';
+
+# OrganizationProfileWorkspaceSection
+
+The workspace's logo, name, and slug. The slug carries a `CopyButton` beside its value.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+    { name: 'Avatar', href: '/components/avatar', layer: 'Components' },
+    { name: 'CopyButton', href: '/components/copy-button', layer: 'Components' },
+  ]}
+/>
+
+## A rejected save
+
+The dialog stays open and renders the reason in its banner.
+
+<Story
+  name='SaveFails'
+  storyModule={Stories}
+/>
diff --git a/packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx b/packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx
new file mode 100644
index 00000000000..daab0c37052
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx
@@ -0,0 +1,50 @@
+import { OrganizationProfileWorkspaceSectionView } from '@clerk/mosaic/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+import { useOrganizationProfileFixture } from './fixtures/organization-profile';
+
+export { default as __source } from './organization-profile-workspace-section.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Organization Profile',
+  status: 'wip',
+  substatus: 'needs wire-up',
+  title: 'OrganizationProfileWorkspaceSection',
+  label: 'Workspace details',
+  navigation: { category: 'Sections' },
+  source:
+    'packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-workspace-section.view.tsx',
+};
+
+export function Default() {
+  const { general } = useOrganizationProfileFixture();
+  return (
+    <OrganizationProfileWorkspaceSectionView
+      name={general.name}
+      slug={general.slug}
+      imageUrl={general.imageUrl}
+      hasImage={general.hasImage}
+      onLogoChange={general.onLogoChange}
+      onRemoveLogo={general.onRemoveLogo}
+      onSubmitName={general.onSubmitName}
+      onSubmitSlug={general.onSubmitSlug}
+    />
+  );
+}
+
+export function SaveFails() {
+  const { general } = useOrganizationProfileFixture({ failWith: 'That slug is already taken.' });
+  return (
+    <OrganizationProfileWorkspaceSectionView
+      name={general.name}
+      slug={general.slug}
+      imageUrl={general.imageUrl}
+      hasImage={general.hasImage}
+      onLogoChange={general.onLogoChange}
+      onRemoveLogo={general.onRemoveLogo}
+      onSubmitName={general.onSubmitName}
+      onSubmitSlug={general.onSubmitSlug}
+    />
+  );
+}
diff --git a/packages/swingset/src/stories/organization-profile.mdx b/packages/swingset/src/stories/organization-profile.mdx
new file mode 100644
index 00000000000..b30bff04dd4
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile.mdx
@@ -0,0 +1,25 @@
+import * as Stories from './organization-profile.stories';
+
+# OrganizationProfile
+
+The organization profile: a `Profile` whose navigation lists the General, Members, Security,
+Billing, and API Keys pages it was given content for, then any pages of the consumer's own, in the
+order asked for. Only General is built — the rest hold their place with a placeholder.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'General panel', href: '/organization-profile/organization-profile-general-panel', layer: 'Organization Profile' },
+  ]}
+/>
+
+## As an overlay
+
+The same view inside a `profile` dialog, opened from a trigger on the page. The dialog positions
+and animates the popup; the profile paints it, names it, and carries the dismiss.
+
+<Story
+  name='Overlay'
+  storyModule={Stories}
+/>
diff --git a/packages/swingset/src/stories/organization-profile.stories.tsx b/packages/swingset/src/stories/organization-profile.stories.tsx
new file mode 100644
index 00000000000..70ce6a0f492
--- /dev/null
+++ b/packages/swingset/src/stories/organization-profile.stories.tsx
@@ -0,0 +1,47 @@
+import { Button } from '@clerk/mosaic/components/button';
+import { Dialog } from '@clerk/mosaic/components/dialog';
+import { OrganizationProfileView } from '@clerk/mosaic/features/organization-profile/organization-profile.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+import { useOrganizationProfileFixture } from './fixtures/organization-profile';
+
+export { default as __source } from './organization-profile.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Organization Profile',
+  status: 'wip',
+  substatus: 'needs wire-up',
+  title: 'OrganizationProfile',
+  label: 'Organization profile',
+  layout: 'wide',
+  source: 'packages/mosaic/src/features/organization-profile/organization-profile.view.tsx',
+};
+
+export function Default() {
+  const { activePage, setActivePage, pages } = useOrganizationProfileFixture();
+  return (
+    <OrganizationProfileView
+      activePage={activePage}
+      pages={pages}
+      onPageChange={setActivePage}
+      elevation='flush'
+    />
+  );
+}
+
+export function Overlay() {
+  const { activePage, setActivePage, pages } = useOrganizationProfileFixture();
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button />}>Manage workspace</Dialog.Trigger>
+      <Dialog.Popup variant='profile'>
+        <OrganizationProfileView
+          activePage={activePage}
+          pages={pages}
+          onPageChange={setActivePage}
+        />
+      </Dialog.Popup>
+    </Dialog.Root>
+  );
+}

From 0c2c63fc2e8c815c651d28ea727cfa271a8c6c0d Mon Sep 17 00:00:00 2001
From: Max Yinger <max.yinger@clerk.dev>
Date: Mon, 21 Sep 2026 16:30:03 -0600
Subject: [PATCH 2/4] refactor(mosaic): share the action menu and the profile
 panel layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`ActionMenu` moves to `components/action-menu`: the user profile and the
organization profile each carried an identical copy, differing only in name.

The five profile panels each declared their own `root` and `sections` cells —
the same column stack with a drifting gap — so the layout moves to
`panelStyles` on the `Profile` component, standardised at a `4` gap under the
headline and `10` between sections. `width: 100%` goes with them: every one of
those elements is a block child or a stretched flex item, so it painted the
same width either way.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../action-menu/action-menu.test.tsx          | 39 ++++++++++++++
 .../action-menu/action-menu.tsx}              | 24 +++++----
 .../src/components/action-menu/index.ts       |  2 +
 .../mosaic/src/components/profile/index.ts    |  1 +
 .../src/components/profile/profile.styles.ts  | 18 +++++++
 .../organization-profile-action-menu.tsx      | 52 -------------------
 ...ganization-profile-general-panel.styles.ts | 17 ------
 ...rganization-profile-general-panel.view.tsx |  7 ++-
 .../organization-profile-logo-row.view.tsx    |  8 +--
 .../user-profile-contact-list-row.view.tsx    |  8 +--
 .../user-profile-picture-row.view.tsx         |  8 +--
 ...er-profile-active-devices-section.view.tsx |  8 +--
 .../user-profile-api-keys-panel.styles.ts     |  6 ---
 .../user-profile-api-keys-panel.view.tsx      |  4 +-
 .../user-profile-billing-panel.styles.ts      | 14 +----
 .../user-profile-billing-panel.view.tsx       |  7 ++-
 ...ser-profile-connected-account-row.view.tsx |  8 +--
 .../user-profile-mfa-row.view.tsx             |  8 +--
 .../user-profile-passkey-row.view.tsx         |  8 +--
 ...r-profile-payment-methods-section.view.tsx |  8 +--
 .../user-profile-profile-panel.styles.ts      | 11 ----
 .../user-profile-profile-panel.view.tsx       |  7 ++-
 .../user-profile-security-panel.styles.ts     | 12 -----
 .../user-profile-security-panel.view.tsx      |  6 +--
 .../user-profile-web3-wallet-row.view.tsx     |  8 +--
 25 files changed, 125 insertions(+), 174 deletions(-)
 create mode 100644 packages/mosaic/src/components/action-menu/action-menu.test.tsx
 rename packages/mosaic/src/{features/user-profile/user-profile-action-menu.tsx => components/action-menu/action-menu.tsx} (64%)
 create mode 100644 packages/mosaic/src/components/action-menu/index.ts
 delete mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-action-menu.tsx
 delete mode 100644 packages/mosaic/src/features/organization-profile/organization-profile-general-panel.styles.ts

diff --git a/packages/mosaic/src/components/action-menu/action-menu.test.tsx b/packages/mosaic/src/components/action-menu/action-menu.test.tsx
new file mode 100644
index 00000000000..56bf6f568f9
--- /dev/null
+++ b/packages/mosaic/src/components/action-menu/action-menu.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+
+import { MosaicProvider } from '../../MosaicProvider';
+import { ActionMenu } from './action-menu';
+
+function renderMenu(actions: Parameters<typeof ActionMenu>[0]['actions']) {
+  return render(
+    <MosaicProvider>
+      <ActionMenu
+        label='Manage passkey'
+        actions={actions}
+      />
+    </MosaicProvider>,
+  );
+}
+
+describe('Mosaic ActionMenu', () => {
+  it('renders nothing when there are no actions', () => {
+    renderMenu([]);
+
+    expect(screen.queryByRole('button')).not.toBeInTheDocument();
+  });
+
+  it('names its trigger and runs the action picked from it', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup();
+    renderMenu([
+      { label: 'Rename', icon: 'pen', onClick },
+      { label: 'Remove', color: 'negative', onClick: vi.fn() },
+    ]);
+
+    await user.click(screen.getByRole('button', { name: 'Manage passkey' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Rename' }));
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});
diff --git a/packages/mosaic/src/features/user-profile/user-profile-action-menu.tsx b/packages/mosaic/src/components/action-menu/action-menu.tsx
similarity index 64%
rename from packages/mosaic/src/features/user-profile/user-profile-action-menu.tsx
rename to packages/mosaic/src/components/action-menu/action-menu.tsx
index 19750de3c17..bee2bf1d49f 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-action-menu.tsx
+++ b/packages/mosaic/src/components/action-menu/action-menu.tsx
@@ -1,26 +1,30 @@
 import type { Ref } from 'react';
 
-import { Icon } from '../../components/icon';
-import { Menu } from '../../components/menu';
 import type { IconName } from '../../icons/registry';
+import { Icon } from '../icon';
+import { Menu } from '../menu';
 
-export interface UserProfileMenuAction {
+export interface ActionMenuAction {
   label: string;
   color?: 'neutral' | 'negative';
   icon?: IconName;
   onClick: () => void;
 }
 
-export function UserProfileActionMenu({
-  label,
-  actions,
-  triggerRef,
-}: {
+export interface ActionMenuProps {
+  /** Names the trigger, which carries no label of its own. */
   label: string;
-  actions: UserProfileMenuAction[];
+  /** Rendered in order. An empty list renders nothing, so a row with no actions shows no trigger. */
+  actions: ActionMenuAction[];
   /** The trigger element, for a caller that has to hand focus back to this row. */
   triggerRef?: Ref<HTMLButtonElement>;
-}) {
+}
+
+/**
+ * The overflow menu a row hangs its secondary actions from: an icon trigger over a `Menu` of
+ * labelled, optionally iconed items.
+ */
+export function ActionMenu({ label, actions, triggerRef }: ActionMenuProps) {
   if (actions.length === 0) {
     return null;
   }
diff --git a/packages/mosaic/src/components/action-menu/index.ts b/packages/mosaic/src/components/action-menu/index.ts
new file mode 100644
index 00000000000..677d8fd8576
--- /dev/null
+++ b/packages/mosaic/src/components/action-menu/index.ts
@@ -0,0 +1,2 @@
+export { ActionMenu } from './action-menu';
+export type { ActionMenuAction, ActionMenuProps } from './action-menu';
diff --git a/packages/mosaic/src/components/profile/index.ts b/packages/mosaic/src/components/profile/index.ts
index 6c45a55fe12..7f599456c0b 100644
--- a/packages/mosaic/src/components/profile/index.ts
+++ b/packages/mosaic/src/components/profile/index.ts
@@ -1,3 +1,4 @@
+export { panelStyles } from './profile.styles';
 export { Profile } from './profile';
 export type {
   ProfileContentProps,
diff --git a/packages/mosaic/src/components/profile/profile.styles.ts b/packages/mosaic/src/components/profile/profile.styles.ts
index 2b8f0e2a71c..140902ae036 100644
--- a/packages/mosaic/src/components/profile/profile.styles.ts
+++ b/packages/mosaic/src/components/profile/profile.styles.ts
@@ -352,3 +352,21 @@ export const styles = stylex.create({
 export const contentScroll = scrollAreaRoot;
 // A held gutter: switching to a page that does not scroll must not reflow the one that did.
 export const contentViewportScroll = scrollAreaViewport('stable');
+
+/**
+ * The layout every page inside `Profile.Content` is built on: a column under the headline, and a
+ * column of sections under that. Composed by the panel views rather than applied by
+ * `Profile.ContentPanel`, so each page keeps a slot of its own to theme against.
+ */
+export const panelStyles = stylex.create({
+  root: {
+    gap: space['4'],
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  sections: {
+    gap: space['10'],
+    display: 'flex',
+    flexDirection: 'column',
+  },
+});
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-action-menu.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-action-menu.tsx
deleted file mode 100644
index e770d43e378..00000000000
--- a/packages/mosaic/src/features/organization-profile/organization-profile-action-menu.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import type { Ref } from 'react';
-
-import { Icon } from '../../components/icon';
-import { Menu } from '../../components/menu';
-import type { IconName } from '../../icons/registry';
-
-export interface OrganizationProfileMenuAction {
-  label: string;
-  color?: 'neutral' | 'negative';
-  icon?: IconName;
-  onClick: () => void;
-}
-
-export function OrganizationProfileActionMenu({
-  label,
-  actions,
-  triggerRef,
-}: {
-  label: string;
-  actions: OrganizationProfileMenuAction[];
-  triggerRef?: Ref<HTMLButtonElement>;
-}) {
-  if (actions.length === 0) {
-    return null;
-  }
-
-  return (
-    <Menu.Root placement='bottom-end'>
-      <Menu.Trigger
-        ref={triggerRef}
-        aria-label={label}
-      />
-      <Menu.Popup>
-        {actions.map(action => (
-          <Menu.Item
-            key={action.label}
-            color={action.color}
-            label={action.label}
-            onClick={action.onClick}
-          >
-            {action.icon ? (
-              <Menu.Media>
-                <Icon name={action.icon} />
-              </Menu.Media>
-            ) : null}
-            <Menu.Label>{action.label}</Menu.Label>
-          </Menu.Item>
-        ))}
-      </Menu.Popup>
-    </Menu.Root>
-  );
-}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.styles.ts b/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.styles.ts
deleted file mode 100644
index 814c042ef69..00000000000
--- a/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.styles.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as stylex from '@stylexjs/stylex';
-
-import { space } from '../../tokens.stylex';
-
-export const styles = stylex.create({
-  root: {
-    gap: space['4'],
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  sections: {
-    gap: space['8'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
-});
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx
index 1a42eea05fa..da696ac1733 100644
--- a/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-general-panel.view.tsx
@@ -1,12 +1,11 @@
 import * as stylex from '@stylexjs/stylex';
 import type { ReactElement } from 'react';
 
-import { Profile } from '../../components/profile';
+import { panelStyles, Profile } from '../../components/profile';
 import { useMessages } from '../../localization';
 import { mergeStyleProps, themeProps } from '../../props';
 import type { OrganizationProfileDangerSectionViewProps } from './organization-profile-danger-section/organization-profile-danger-section.view';
 import { OrganizationProfileDangerSectionView } from './organization-profile-danger-section/organization-profile-danger-section.view';
-import { styles } from './organization-profile-general-panel.styles';
 import type { OrganizationProfileWorkspaceSectionViewProps } from './organization-profile-workspace-section/organization-profile-workspace-section.view';
 import { OrganizationProfileWorkspaceSectionView } from './organization-profile-workspace-section/organization-profile-workspace-section.view';
 
@@ -30,9 +29,9 @@ export function OrganizationProfileGeneralPanelView({
   const m = useMessages('organizationProfile');
 
   return (
-    <div {...mergeStyleProps(themeProps('organization-profile-general-panel'), stylex.props(styles.root))}>
+    <div {...mergeStyleProps(themeProps('organization-profile-general-panel'), stylex.props(panelStyles.root))}>
       <Profile.PageTitle>{m.pages.general}</Profile.PageTitle>
-      <div {...stylex.props(styles.sections)}>
+      <div {...stylex.props(panelStyles.sections)}>
         <OrganizationProfileWorkspaceSectionView
           name={name}
           slug={slug}
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx
index 417b98dcf2b..9685ad99cca 100644
--- a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-logo-row.view.tsx
@@ -1,13 +1,13 @@
 import { useState } from 'react';
 
+import type { ActionMenuAction } from '../../../components/action-menu';
+import { ActionMenu } from '../../../components/action-menu';
 import { Avatar } from '../../../components/avatar';
 import { Button } from '../../../components/button';
 import { Section } from '../../../components/section';
 import { useMessages } from '../../../localization';
 import type { FileRejection } from '../../../primitives/file-upload';
 import { FileUpload } from '../../../primitives/file-upload';
-import type { OrganizationProfileMenuAction } from '../organization-profile-action-menu';
-import { OrganizationProfileActionMenu } from '../organization-profile-action-menu';
 
 const LOGO_MIME_TYPES = 'image/png,image/jpeg,image/gif,image/webp';
 const LOGO_MAX_BYTES = 10 * 1000 * 1000;
@@ -98,7 +98,7 @@ function LogoActions({
 }) {
   const m = useMessages('organizationProfileWorkspaceSection');
   const { openFilePicker } = FileUpload.useFileUpload();
-  const actions: OrganizationProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
 
   if (hasImage && canChange) {
     actions.push({ label: m.logo.change, icon: 'pen', onClick: openFilePicker });
@@ -111,7 +111,7 @@ function LogoActions({
   if (actions.length > 0) {
     return (
       <Section.Actions>
-        <OrganizationProfileActionMenu
+        <ActionMenu
           actions={actions}
           label={m.logo.manage}
         />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx
index 9f950b2461b..42dee231f9a 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-contact-list-row.view.tsx
@@ -1,12 +1,12 @@
 import type { ReactNode } from 'react';
 
+import type { ActionMenuAction } from '../../../components/action-menu';
+import { ActionMenu } from '../../../components/action-menu';
 import { Badge } from '../../../components/badge';
 import { Button } from '../../../components/button';
 import { Icon } from '../../../components/icon';
 import { Section } from '../../../components/section';
 import { fill, useMessages } from '../../../localization';
-import type { UserProfileMenuAction } from '../user-profile-action-menu';
-import { UserProfileActionMenu } from '../user-profile-action-menu';
 import { styles } from '../user-profile-profile-panel.styles';
 
 export interface UserProfileContactListRowViewProps {
@@ -69,7 +69,7 @@ export function UserProfileContactListRowView({
           </Section.Item>
         ) : (
           items.map(item => {
-            const actions: UserProfileMenuAction[] = [];
+            const actions: ActionMenuAction[] = [];
 
             if (item.isVerified === false && onVerify) {
               actions.push({
@@ -98,7 +98,7 @@ export function UserProfileContactListRowView({
                 </Section.Content>
                 {actions.length > 0 ? (
                   <Section.Actions>
-                    <UserProfileActionMenu
+                    <ActionMenu
                       actions={actions}
                       label={fill(m.manageValue, { value: item.value })}
                     />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
index edb02157f6b..ff827ccb985 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-account-section/user-profile-picture-row.view.tsx
@@ -1,13 +1,13 @@
 import { useState } from 'react';
 
+import type { ActionMenuAction } from '../../../components/action-menu';
+import { ActionMenu } from '../../../components/action-menu';
 import { Avatar } from '../../../components/avatar';
 import { Button } from '../../../components/button';
 import { Section } from '../../../components/section';
 import { useMessages } from '../../../localization';
 import type { FileRejection } from '../../../primitives/file-upload';
 import { FileUpload } from '../../../primitives/file-upload';
-import type { UserProfileMenuAction } from '../user-profile-action-menu';
-import { UserProfileActionMenu } from '../user-profile-action-menu';
 
 const PROFILE_PICTURE_MIME_TYPES = 'image/png,image/jpeg,image/gif,image/webp';
 /** Matches the limit the row's own description advertises. */
@@ -96,7 +96,7 @@ function ProfilePictureActions({
 }) {
   const m = useMessages('userProfileAccountSection');
   const { openFilePicker } = FileUpload.useFileUpload();
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
 
   if (hasImage && canChange) {
     actions.push({ label: m.picture.change, icon: 'pen', onClick: openFilePicker });
@@ -109,7 +109,7 @@ function ProfilePictureActions({
   if (actions.length > 0) {
     return (
       <Section.Actions>
-        <UserProfileActionMenu
+        <ActionMenu
           actions={actions}
           label={m.picture.manage}
         />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx
index f238eab6987..4ad560377c2 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-active-devices-section.view.tsx
@@ -3,6 +3,8 @@ import type { Ref } from 'react';
 import { useMemo, useRef, useState } from 'react';
 
 import { Confirmation } from '../../blocks/confirmation';
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Badge } from '../../components/badge';
 import { Button } from '../../components/button';
 import { Dialog } from '../../components/dialog';
@@ -10,8 +12,6 @@ import { Section } from '../../components/section';
 import { useListRemovalFocus } from '../../hooks/useListRemovalFocus';
 import type { MosaicMessages } from '../../localization';
 import { fill, plural, useLocale, useMessages } from '../../localization';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import type { UserProfileDevice } from './user-profile-active-devices.types';
 import { UserProfileDeviceDetailsDialog } from './user-profile-device-details.dialog';
 import { UserProfileSecurityIcon } from './user-profile-security-icon';
@@ -211,7 +211,7 @@ function DeviceItem({
   onSignOut?: (device: UserProfileDevice) => void;
 }) {
   const m = useMessages('userProfileActiveDevices');
-  const actions: UserProfileMenuAction[] = [{ label: m.viewDetails, onClick: () => onViewDetails(device) }];
+  const actions: ActionMenuAction[] = [{ label: m.viewDetails, onClick: () => onViewDetails(device) }];
 
   if (onSignOut) {
     actions.push({ label: m.signOut, onClick: () => onSignOut(device) });
@@ -235,7 +235,7 @@ function DeviceItem({
         {device.description ? <Section.Description>{device.description}</Section.Description> : null}
       </Section.Content>
       <Section.Actions>
-        <UserProfileActionMenu
+        <ActionMenu
           actions={actions}
           label={fill(m.manageLabel, { name: device.name })}
           triggerRef={triggerRef}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.styles.ts
index c2439445187..168858bb2e8 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.styles.ts
@@ -96,12 +96,6 @@ export const styles = stylex.create({
     alignItems: 'center',
     display: 'flex',
   },
-  root: {
-    gap: space['6'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
   row: {
     borderBlockStartColor: colorVars['--cl-color-border'],
     borderBlockStartStyle: 'solid',
diff --git a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx
index 4e0e2e50f1a..3c400b9db7f 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-api-keys-panel.view.tsx
@@ -6,7 +6,7 @@ import { Button } from '../../components/button';
 import { Icon } from '../../components/icon';
 import { Input } from '../../components/input';
 import { Menu } from '../../components/menu';
-import { Profile } from '../../components/profile';
+import { panelStyles, Profile } from '../../components/profile';
 import { mergeStyleProps, themeProps } from '../../props';
 import { rtl } from '../../utils/rtl.styles';
 import { styles } from './user-profile-api-keys-panel.styles';
@@ -65,7 +65,7 @@ export function UserProfileApiKeysPanelView({
   };
 
   return (
-    <div {...mergeStyleProps(themeProps('user-profile-api-keys-panel'), stylex.props(styles.root))}>
+    <div {...mergeStyleProps(themeProps('user-profile-api-keys-panel'), stylex.props(panelStyles.root))}>
       <Profile.PageTitle>API Keys</Profile.PageTitle>
       <div {...stylex.props(styles.toolbar)}>
         <div {...stylex.props(styles.searchWrapper)}>
diff --git a/packages/mosaic/src/features/user-profile/user-profile-billing-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-billing-panel.styles.ts
index 639aa008564..100d8be4f42 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-billing-panel.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-billing-panel.styles.ts
@@ -1,6 +1,6 @@
 import * as stylex from '@stylexjs/stylex';
 
-import { colorVars, fontWeightVars, space, typeScaleVars } from '../../tokens.stylex';
+import { colorVars, fontWeightVars, typeScaleVars } from '../../tokens.stylex';
 
 export const styles = stylex.create({
   amount: {
@@ -9,16 +9,4 @@ export const styles = stylex.create({
     fontWeight: fontWeightVars['--cl-font-semibold'],
     lineHeight: typeScaleVars['--cl-text-base-leading'],
   },
-  root: {
-    gap: space['4'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
-  sections: {
-    gap: space['4'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
 });
diff --git a/packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx
index 0c8678ba65f..ddfba8d14d6 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-billing-panel.view.tsx
@@ -1,14 +1,13 @@
 import * as stylex from '@stylexjs/stylex';
 import type { ReactElement } from 'react';
 
-import { Profile } from '../../components/profile';
+import { panelStyles, Profile } from '../../components/profile';
 import { mergeStyleProps, themeProps } from '../../props';
 import type {
   UserProfileBillingHistoryItem,
   UserProfileBillingHistoryPagination,
 } from './user-profile-billing-history-section.view';
 import { UserProfileBillingHistorySectionView } from './user-profile-billing-history-section.view';
-import { styles } from './user-profile-billing-panel.styles';
 import type { UserProfilePaymentMethod } from './user-profile-payment-methods-section.view';
 import { UserProfilePaymentMethodsSectionView } from './user-profile-payment-methods-section.view';
 import type { UserProfileSubscription } from './user-profile-subscription-section.view';
@@ -49,9 +48,9 @@ export function UserProfileBillingPanelView({
   onViewInvoice,
 }: UserProfileBillingPanelViewProps): ReactElement {
   return (
-    <div {...mergeStyleProps(themeProps('user-profile-billing-panel'), stylex.props(styles.root))}>
+    <div {...mergeStyleProps(themeProps('user-profile-billing-panel'), stylex.props(panelStyles.root))}>
       <Profile.PageTitle>Billing</Profile.PageTitle>
-      <div {...stylex.props(styles.sections)}>
+      <div {...stylex.props(panelStyles.sections)}>
         <UserProfileSubscriptionSectionView
           subscription={subscription}
           onChangePlan={onChangePlan}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx
index b40219081a2..78c1f4a7c50 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-connected-account-row.view.tsx
@@ -1,12 +1,12 @@
 import * as stylex from '@stylexjs/stylex';
 
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Badge } from '../../components/badge';
 import { Button } from '../../components/button';
 import { Icon, IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
 import { fill, useMessages } from '../../localization';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import { styles } from './user-profile-connected-accounts.styles';
 import type { UserProfileConnectedAccount } from './user-profile-connected-accounts-section.view';
 
@@ -23,7 +23,7 @@ export function UserProfileConnectedAccountRowView({
 }) {
   const m = useMessages('userProfileConnectedAccounts');
   const iconUrl = account.iconUrl?.trim();
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
   if (account.status === 'reconnect' && onReconnect) {
     actions.push({ label: m.reconnect, onClick: () => onReconnect(account.id) });
   }
@@ -85,7 +85,7 @@ export function UserProfileConnectedAccountRowView({
           </Section.Actions>
         ) : actions.length > 0 ? (
           <Section.Actions>
-            <UserProfileActionMenu
+            <ActionMenu
               label={fill(m.manageLabel, { provider: account.provider })}
               actions={actions}
             />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-mfa-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-mfa-row.view.tsx
index 25cd5afc34c..8bd28ef15c9 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-mfa-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-mfa-row.view.tsx
@@ -1,8 +1,8 @@
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Badge } from '../../components/badge';
 import { Section } from '../../components/section';
 import { fill, useMessages } from '../../localization';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import { styles } from './user-profile-mfa-section.styles';
 import type { UserProfileMfaMethod, UserProfileMfaSectionViewProps } from './user-profile-mfa-section.view';
 import { UserProfileSecurityIcon } from './user-profile-security-icon';
@@ -23,7 +23,7 @@ export function UserProfileMfaRowView({
     method.type === 'sms' && method.description
       ? fill(m.manageSms, { label, phoneNumber: method.description })
       : fill(m.manage, { label });
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
 
   if (method.type === 'sms' && method.canSetDefault && !method.isDefault && onSetDefault) {
     actions.push({ label: m.setDefault, onClick: () => onSetDefault(method.id) });
@@ -49,7 +49,7 @@ export function UserProfileMfaRowView({
       </Section.Content>
       {actions.length > 0 ? (
         <Section.Actions>
-          <UserProfileActionMenu
+          <ActionMenu
             actions={actions}
             label={manageLabel}
           />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
index ee428cc0ef0..1263e0b2847 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-passkey-row.view.tsx
@@ -1,12 +1,12 @@
 import type { Ref } from 'react';
 import { useMemo } from 'react';
 
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Dialog } from '../../components/dialog';
 import { Icon, IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
 import { fill } from '../../localization/messages';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import { userProfilePasskeysMessages as m } from './user-profile-passkeys-section.messages';
 import { styles } from './user-profile-passkeys-section.styles';
 import type { UserProfilePasskey } from './user-profile-passkeys-section.view';
@@ -31,7 +31,7 @@ export function UserProfilePasskeyRowView({
       ? fill(m.details, { createdAt: passkey.createdAtLabel, lastUsedAt: passkey.lastUsedAtLabel })
       : passkey.createdAtLabel || passkey.lastUsedAtLabel;
 
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
   if (onRename) {
     actions.push({ label: m.rename, onClick: () => renameDialog.open(undefined) });
   }
@@ -61,7 +61,7 @@ export function UserProfilePasskeyRowView({
         </Section.Content>
         {actions.length > 0 ? (
           <Section.Actions>
-            <UserProfileActionMenu
+            <ActionMenu
               triggerRef={triggerRef}
               actions={actions}
               label={fill(m.manage, { name: passkey.name })}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx
index e27c7bfd6fa..1a58aa7fd1f 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-payment-methods-section.view.tsx
@@ -1,9 +1,9 @@
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Badge } from '../../components/badge';
 import { Button } from '../../components/button';
 import { Icon } from '../../components/icon';
 import { Section } from '../../components/section';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import { UserProfileProviderIcon } from './user-profile-provider-icon';
 
 export interface UserProfilePaymentMethod {
@@ -87,7 +87,7 @@ function PaymentMethodItem({
   onMakeDefault?: (id: string) => void;
   onRemove?: (id: string) => void;
 }) {
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
 
   if (!paymentMethod.isDefault && onMakeDefault) {
     actions.push({ label: 'Make default', onClick: () => onMakeDefault(paymentMethod.id) });
@@ -106,7 +106,7 @@ function PaymentMethodItem({
         {paymentMethod.expiryLabel ? <Section.Description>{paymentMethod.expiryLabel}</Section.Description> : null}
       </Section.Content>
       <Section.Actions>
-        <UserProfileActionMenu
+        <ActionMenu
           actions={actions}
           label={`Manage ${paymentMethod.label}`}
         />
diff --git a/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts
index 3c975ee22fc..3935170e88a 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.styles.ts
@@ -20,15 +20,4 @@ export const styles = stylex.create({
     height: space['5'],
     width: space['5'],
   },
-  root: {
-    gap: space['4'],
-    display: 'flex',
-    flexDirection: 'column',
-  },
-  sections: {
-    gap: space['8'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
 });
diff --git a/packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx
index 3d79c599f22..cb33e5ab840 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-profile-panel.view.tsx
@@ -1,7 +1,7 @@
 import * as stylex from '@stylexjs/stylex';
 import type { ReactElement } from 'react';
 
-import { Profile } from '../../components/profile';
+import { panelStyles, Profile } from '../../components/profile';
 import { mergeStyleProps, themeProps } from '../../props';
 import type {
   UserProfileAccountSectionViewProps,
@@ -15,7 +15,6 @@ import type {
 } from './user-profile-connected-accounts-section.view';
 import { UserProfileConnectedAccountsSectionView } from './user-profile-connected-accounts-section.view';
 import { UserProfileDeleteSectionView } from './user-profile-delete-section/user-profile-delete-section.view';
-import { styles } from './user-profile-profile-panel.styles';
 import type { UserProfileWeb3Provider, UserProfileWeb3Wallet } from './user-profile-web3-wallets-section.view';
 import { UserProfileWeb3WalletsSectionView } from './user-profile-web3-wallets-section.view';
 
@@ -84,9 +83,9 @@ export function UserProfileProfilePanelView({
   onDeleteAccount,
 }: UserProfileProfilePanelViewProps): ReactElement {
   return (
-    <div {...mergeStyleProps(themeProps('user-profile-profile-panel'), stylex.props(styles.root))}>
+    <div {...mergeStyleProps(themeProps('user-profile-profile-panel'), stylex.props(panelStyles.root))}>
       <Profile.PageTitle>Account</Profile.PageTitle>
-      <div {...stylex.props(styles.sections)}>
+      <div {...stylex.props(panelStyles.sections)}>
         <UserProfileAccountSectionView
           allowMultipleAccounts={allowMultipleAccounts}
           emails={emails}
diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts b/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts
index 438797596fa..67454eca28a 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts
+++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.styles.ts
@@ -22,24 +22,12 @@ export const styles = stylex.create({
     borderWidth: '1px',
     backgroundColor: colorVars['--cl-color-background-subtle'],
   },
-  root: {
-    gap: space['4'],
-    display: 'flex',
-    flexDirection: 'column',
-  },
   sectionCards: {
     gap: space['3'],
     display: 'flex',
     flexDirection: 'column',
-    width: '100%',
   },
   emptySectionCards: {
     display: 'none',
   },
-  sections: {
-    gap: space['10'],
-    display: 'flex',
-    flexDirection: 'column',
-    width: '100%',
-  },
 });
diff --git a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
index 5f432029909..b92721f077a 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-security-panel.view.tsx
@@ -1,7 +1,7 @@
 import * as stylex from '@stylexjs/stylex';
 import type { ReactElement, ReactNode } from 'react';
 
-import { Profile } from '../../components/profile';
+import { panelStyles, Profile } from '../../components/profile';
 import { mergeStyleProps, themeProps } from '../../props';
 import type {
   UserProfileActiveDevicesSectionViewProps,
@@ -83,9 +83,9 @@ export function UserProfileSecurityPanelView({
   const hasAuthentication = showPassword || showPasskeys || mfaMethods !== undefined;
 
   return (
-    <div {...mergeStyleProps(themeProps('user-profile-security-panel'), stylex.props(styles.root))}>
+    <div {...mergeStyleProps(themeProps('user-profile-security-panel'), stylex.props(panelStyles.root))}>
       <Profile.PageTitle>Security</Profile.PageTitle>
-      <div {...stylex.props(styles.sections)}>
+      <div {...stylex.props(panelStyles.sections)}>
         <div {...stylex.props(styles.sectionCards, !hasAuthentication && styles.emptySectionCards)}>
           {showPassword ? (
             <UserProfilePasswordSectionView
diff --git a/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx b/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx
index 4a1e67ca191..eb4b77413ac 100644
--- a/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx
+++ b/packages/mosaic/src/features/user-profile/user-profile-web3-wallet-row.view.tsx
@@ -1,12 +1,12 @@
 import * as stylex from '@stylexjs/stylex';
 
+import type { ActionMenuAction } from '../../components/action-menu';
+import { ActionMenu } from '../../components/action-menu';
 import { Badge } from '../../components/badge';
 import { Button } from '../../components/button';
 import { Icon, IconFrame } from '../../components/icon';
 import { Section } from '../../components/section';
 import { fill, useMessages } from '../../localization';
-import type { UserProfileMenuAction } from './user-profile-action-menu';
-import { UserProfileActionMenu } from './user-profile-action-menu';
 import { styles } from './user-profile-web3-wallets.styles';
 import type { UserProfileWeb3Provider, UserProfileWeb3Wallet } from './user-profile-web3-wallets-section.view';
 
@@ -26,7 +26,7 @@ export function UserProfileWeb3WalletRowView({
   const linkedWallet = 'address' in wallet ? wallet : undefined;
   const address = linkedWallet?.address;
   const shortAddress = address && (address.length <= 10 ? address : `${address.slice(0, 6)}...${address.slice(-4)}`);
-  const actions: UserProfileMenuAction[] = [];
+  const actions: ActionMenuAction[] = [];
 
   if (linkedWallet && !linkedWallet.isPrimary && linkedWallet.isVerified && onSetPrimary) {
     actions.push({ label: m.setPrimary, onClick: () => onSetPrimary(wallet.id) });
@@ -93,7 +93,7 @@ export function UserProfileWeb3WalletRowView({
           </Section.Actions>
         ) : actions.length > 0 ? (
           <Section.Actions>
-            <UserProfileActionMenu
+            <ActionMenu
               actions={actions}
               label={fill(m.manageLabel, { wallet: wallet.provider || address || '' })}
             />

From a705a9b118b363cb0296add5936605cfc04c0a48 Mon Sep 17 00:00:00 2001
From: Max Yinger <max.yinger@clerk.dev>
Date: Tue, 22 Sep 2026 09:55:11 -0600
Subject: [PATCH 3/4] feat(mosaic): confirm a copy in an anchored toast
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`CopyButton` swaps its tooltip for a toast anchored to the button, on the
`Toast.Positioner` the primitive gained in #9850. The confirmation reads the
same, but it announces itself from a live region the button's `label` names,
`F6` reaches it, and `Escape` dismisses it — a tooltip carries none of that,
and this confirmation is an event rather than a description of the control.

`placement` becomes `side`, following the positioner. The anchor is the button
the click came from, passed per toast through `positionerProps`.

Also drops the comments from `ActionMenu`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../components/action-menu/action-menu.tsx    |   7 -
 .../copy-button/copy-button.styles.ts         |  49 +++++
 .../copy-button/copy-button.test.tsx          |  48 ++--
 .../components/copy-button/copy-button.tsx    | 206 ++++++++++--------
 packages/swingset/src/stories/copy-button.mdx |  11 +-
 5 files changed, 208 insertions(+), 113 deletions(-)
 create mode 100644 packages/mosaic/src/components/copy-button/copy-button.styles.ts

diff --git a/packages/mosaic/src/components/action-menu/action-menu.tsx b/packages/mosaic/src/components/action-menu/action-menu.tsx
index bee2bf1d49f..480c4655625 100644
--- a/packages/mosaic/src/components/action-menu/action-menu.tsx
+++ b/packages/mosaic/src/components/action-menu/action-menu.tsx
@@ -12,18 +12,11 @@ export interface ActionMenuAction {
 }
 
 export interface ActionMenuProps {
-  /** Names the trigger, which carries no label of its own. */
   label: string;
-  /** Rendered in order. An empty list renders nothing, so a row with no actions shows no trigger. */
   actions: ActionMenuAction[];
-  /** The trigger element, for a caller that has to hand focus back to this row. */
   triggerRef?: Ref<HTMLButtonElement>;
 }
 
-/**
- * The overflow menu a row hangs its secondary actions from: an icon trigger over a `Menu` of
- * labelled, optionally iconed items.
- */
 export function ActionMenu({ label, actions, triggerRef }: ActionMenuProps) {
   if (actions.length === 0) {
     return null;
diff --git a/packages/mosaic/src/components/copy-button/copy-button.styles.ts b/packages/mosaic/src/components/copy-button/copy-button.styles.ts
new file mode 100644
index 00000000000..18c8307d6fa
--- /dev/null
+++ b/packages/mosaic/src/components/copy-button/copy-button.styles.ts
@@ -0,0 +1,49 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { colorVars, durationVars, easingVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  toast: {
+    borderRadius: radiusVars['--cl-radius-md'],
+    gap: space['1'],
+    paddingBlock: space['1'],
+    paddingInline: space['1.5'],
+    alignItems: 'center',
+    backgroundColor: colorVars['--cl-color-foreground'],
+    color: colorVars['--cl-color-background'],
+    // A copy while one is still showing queues behind the `limit`; only the newest is wanted.
+    display: { default: 'flex', ':where([data-limited])': 'none' },
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+    opacity: {
+      default: 1,
+      ':where([data-starting-style], [data-ending-style])': 0,
+    },
+    transform: {
+      default: 'scale(1)',
+      ':where([data-starting-style], [data-ending-style])': 'scale(0.94)',
+      '@media (prefers-reduced-motion: reduce)': {
+        default: 'scale(1)',
+        ':where([data-starting-style], [data-ending-style])': 'scale(1)',
+      },
+    },
+    transformOrigin: 'var(--cl-anchor-origin, center)',
+    transitionDuration: {
+      default: `${durationVars['--cl-duration-fast']}, ${durationVars['--cl-duration-base']}`,
+      ':where([data-ending-style])': durationVars['--cl-duration-fast'],
+    },
+    transitionProperty: {
+      default: 'opacity, transform',
+      '@media (prefers-reduced-motion: reduce)': 'opacity',
+    },
+    transitionTimingFunction: {
+      default: `${easingVars['--cl-ease-enter']}, ${easingVars['--cl-ease-default']}`,
+      ':where([data-ending-style])': easingVars['--cl-ease-exit'],
+    },
+    whiteSpace: 'nowrap',
+  },
+  title: {
+    font: 'inherit',
+    margin: 0,
+  },
+});
diff --git a/packages/mosaic/src/components/copy-button/copy-button.test.tsx b/packages/mosaic/src/components/copy-button/copy-button.test.tsx
index d74c514e650..e843a28c744 100644
--- a/packages/mosaic/src/components/copy-button/copy-button.test.tsx
+++ b/packages/mosaic/src/components/copy-button/copy-button.test.tsx
@@ -14,30 +14,35 @@ describe('Mosaic CopyButton', () => {
     await expect(navigator.clipboard.readText()).resolves.toBe('acme-inc');
   });
 
-  it('announces the copy and keeps the button named', async () => {
+  it('confirms the copy in a toast and keeps the button named', async () => {
     const user = userEvent.setup();
     render(<CopyButton value='acme-inc' />);
 
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
     await user.click(screen.getByRole('button', { name: 'Copy' }));
 
-    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Copied'));
+    const toast = await screen.findByRole('dialog', { name: 'Copied' });
+    expect(toast.querySelector('.cl-icon')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Copy' })).toBeInTheDocument();
   });
 
-  it('confirms the copy in a tooltip', async () => {
+  it('announces the copy from the region the button names', async () => {
     const user = userEvent.setup();
-    render(<CopyButton value='acme-inc' />);
-
-    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+    render(
+      <CopyButton
+        value='acme-inc'
+        label='Copy slug'
+      />,
+    );
 
-    await user.click(screen.getByRole('button', { name: 'Copy' }));
+    await user.click(screen.getByRole('button', { name: 'Copy slug' }));
 
-    const tooltip = await screen.findByRole('tooltip');
-    expect(tooltip).toHaveTextContent('Copied');
-    expect(tooltip.querySelector('.cl-icon')).toBeInTheDocument();
+    expect(await screen.findByRole('region', { name: 'Copy slug' })).toBeInTheDocument();
+    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Copied'));
   });
 
-  it('takes the tooltip label from copiedLabel', async () => {
+  it('takes the confirmation text from copiedLabel', async () => {
     const user = userEvent.setup();
     render(
       <CopyButton
@@ -48,10 +53,10 @@ describe('Mosaic CopyButton', () => {
 
     await user.click(screen.getByRole('button', { name: 'Copy' }));
 
-    await waitFor(() => expect(screen.getByRole('tooltip')).toHaveTextContent('Slug copied'));
+    expect(await screen.findByRole('dialog', { name: 'Slug copied' })).toBeInTheDocument();
   });
 
-  it('settles back after the copied state expires', async () => {
+  it('settles back after the confirmation expires', async () => {
     const user = userEvent.setup();
     render(
       <CopyButton
@@ -61,9 +66,20 @@ describe('Mosaic CopyButton', () => {
     );
 
     await user.click(screen.getByRole('button', { name: 'Copy' }));
-    await waitFor(() => expect(screen.getByRole('status')).toHaveTextContent('Copied'));
+    await screen.findByRole('dialog');
+
+    await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
+  });
+
+  it('shows one confirmation when the value is copied twice', async () => {
+    const user = userEvent.setup();
+    render(<CopyButton value='acme-inc' />);
+
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
+    await screen.findByRole('dialog');
+    await user.click(screen.getByRole('button', { name: 'Copy' }));
 
-    await waitFor(() => expect(screen.getByRole('status')).toBeEmptyDOMElement());
+    await waitFor(() => expect(screen.getAllByRole('dialog')).toHaveLength(1));
   });
 
   it('copies through onCopy when one is given', async () => {
@@ -94,6 +110,6 @@ describe('Mosaic CopyButton', () => {
 
     await user.click(screen.getByRole('button', { name: 'Copy' }));
 
-    expect(screen.getByRole('status')).toBeEmptyDOMElement();
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
   });
 });
diff --git a/packages/mosaic/src/components/copy-button/copy-button.tsx b/packages/mosaic/src/components/copy-button/copy-button.tsx
index 0e87584a01a..2f92f0ac3fc 100644
--- a/packages/mosaic/src/components/copy-button/copy-button.tsx
+++ b/packages/mosaic/src/components/copy-button/copy-button.tsx
@@ -1,107 +1,143 @@
+import * as stylex from '@stylexjs/stylex';
 import React from 'react';
 
+import type { ToastSide } from '../../primitives/toast';
+import { Toast } from '../../primitives/toast';
+import { mergeStyleProps, themeProps } from '../../props';
 import type { ButtonProps } from '../button';
 import { Button } from '../button';
 import { Icon } from '../icon';
-import { Tooltip } from '../tooltip';
-import { VisuallyHidden } from '../visually-hidden';
+import { styles } from './copy-button.styles';
+
+/** Matches the gap the tooltip keeps from its trigger. */
+const SIDE_OFFSET = 4;
 
 export interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onCopy'> {
+  /** Text written to the clipboard. */
   value: string;
+  /** Names the button, and the region its confirmation is announced from. @default 'Copy' */
   label?: string;
+  /** Shown and announced once the value is on the clipboard. @default 'Copied' */
   copiedLabel?: string;
-  placement?: 'top' | 'bottom' | 'left' | 'right';
+  /** Which side of the button the confirmation sits on. @default 'top' */
+  side?: ToastSide;
+  /** How long the confirmation holds, in milliseconds. @default 2000 */
   resetAfter?: number;
+  /** Replaces the clipboard write, e.g. to copy something richer than text. */
   onCopy?: (value: string) => void | Promise<void>;
 }
 
+/**
+ * Puts a value on the clipboard and confirms it in a toast anchored to the button. A toast rather
+ * than a tooltip because the confirmation is an event, not a description of the control: it
+ * announces itself, `F6` reaches it, `Escape` dismisses it, and the button keeps its own name.
+ *
+ * @example
+ * <CopyButton value={organization.slug} />
+ *
+ * @example
+ * // Named for what it copies, in a row that holds more than one
+ * <CopyButton value={apiKey} label='Copy API key' />
+ */
 export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(function MosaicCopyButton(
-  {
-    value,
-    label = 'Copy',
-    copiedLabel = 'Copied',
-    placement = 'top',
-    resetAfter = 2000,
-    onCopy,
-    color = 'neutral',
-    variant = 'ghost',
-    size = 'xs',
-    shape = 'square',
-    onClick,
-    ...rest
-  },
+  { resetAfter = 2000, ...rest },
   ref,
 ) {
-  const [copied, setCopied] = React.useState(false);
-  const timeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
-
-  React.useEffect(() => () => clearTimeout(timeout.current), []);
-
-  const settle = () => {
-    clearTimeout(timeout.current);
-    setCopied(false);
-  };
-
-  const copy = async () => {
-    try {
-      await (onCopy ? onCopy(value) : navigator.clipboard.writeText(value));
-    } catch {
-      // A blocked clipboard leaves the button as it was; there is nothing to report.
-      return;
-    }
-
-    setCopied(true);
-    clearTimeout(timeout.current);
-    timeout.current = setTimeout(() => setCopied(false), resetAfter);
-  };
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onClick?.(event);
-    if (!event.defaultPrevented) {
-      void copy();
-    }
-  };
-
   return (
-    <Tooltip.Root
-      open={copied}
-      placement={placement}
-      // Only the close is honoured, so hover cannot open a tooltip this button does not have.
-      onOpenChange={next => {
-        if (!next) {
-          settle();
-        }
-      }}
+    <Toast.Provider
+      timeout={resetAfter}
+      limit={1}
     >
-      <Tooltip.Trigger
+      <CopyButtonTrigger
         ref={ref}
-        render={
-          <Button
-            type='button'
-            aria-label={label}
-            color={color}
-            variant={variant}
-            size={size}
-            shape={shape}
-            {...rest}
-          />
-        }
-        onClick={handleClick}
-      >
-        <Icon
-          name='clipboard'
-          size='sm'
-        />
-        <VisuallyHidden render={<span role='status' />}>{copied ? copiedLabel : ''}</VisuallyHidden>
-      </Tooltip.Trigger>
-      <Tooltip.Popup>
-        {copiedLabel}
-        <Icon
-          name='checkmark'
-          size='sm'
-          aria-hidden='true'
-        />
-      </Tooltip.Popup>
-    </Tooltip.Root>
+        {...rest}
+      />
+    </Toast.Provider>
   );
 });
+
+const CopyButtonTrigger = React.forwardRef<HTMLButtonElement, Omit<CopyButtonProps, 'resetAfter'>>(
+  function CopyButtonTrigger(
+    {
+      value,
+      label = 'Copy',
+      copiedLabel = 'Copied',
+      side = 'top',
+      onCopy,
+      color = 'neutral',
+      variant = 'ghost',
+      size = 'xs',
+      shape = 'square',
+      onClick,
+      ...rest
+    },
+    ref,
+  ) {
+    const manager = Toast.useToastManager();
+
+    const copy = async (anchor: HTMLElement) => {
+      try {
+        await (onCopy ? onCopy(value) : navigator.clipboard.writeText(value));
+      } catch {
+        // A blocked clipboard leaves the button as it was; there is nothing to report.
+        return;
+      }
+      manager.add({
+        title: copiedLabel,
+        positionerProps: { anchor, side, sideOffset: SIDE_OFFSET },
+      });
+    };
+
+    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) {
+        void copy(event.currentTarget);
+      }
+    };
+
+    return (
+      <>
+        <Button
+          ref={ref}
+          type='button'
+          aria-label={label}
+          color={color}
+          variant={variant}
+          size={size}
+          shape={shape}
+          onClick={handleClick}
+          {...rest}
+        >
+          <Icon
+            name='clipboard'
+            size='sm'
+          />
+        </Button>
+        <Toast.Portal>
+          <Toast.Viewport aria-label={label}>
+            {manager.toasts.map(toast => (
+              <Toast.Positioner
+                key={toast.id}
+                toast={toast}
+              >
+                <Toast.Root
+                  toast={toast}
+                  {...mergeStyleProps(themeProps('copy-button-toast'), stylex.props(styles.toast))}
+                >
+                  <Toast.Title
+                    {...mergeStyleProps(themeProps('copy-button-toast-title'), stylex.props(styles.title))}
+                  />
+                  <Icon
+                    name='checkmark'
+                    size='sm'
+                    aria-hidden='true'
+                  />
+                </Toast.Root>
+              </Toast.Positioner>
+            ))}
+          </Toast.Viewport>
+        </Toast.Portal>
+      </>
+    );
+  },
+);
diff --git a/packages/swingset/src/stories/copy-button.mdx b/packages/swingset/src/stories/copy-button.mdx
index 8eacc940644..9d2056840fa 100644
--- a/packages/swingset/src/stories/copy-button.mdx
+++ b/packages/swingset/src/stories/copy-button.mdx
@@ -2,8 +2,9 @@ import * as Stories from './copy-button.stories';
 
 # CopyButton
 
-Puts a value on the clipboard. A tooltip confirms the copy and settles after `resetAfter`. It
-opens only on the copy, so the button carries no hover tooltip of its own.
+Puts a value on the clipboard and confirms it in a toast anchored to the button, which settles after
+`resetAfter`. A toast rather than a tooltip because the confirmation is an event, not a description
+of the control: it announces itself, `F6` reaches it and `Escape` dismisses it.
 
 <Story
   name='Default'
@@ -19,7 +20,7 @@ opens only on the copy, so the button carries no hover tooltip of its own.
     { name: 'value', type: 'string' },
     { name: 'label', type: 'string', default: 'Copy' },
     { name: 'copiedLabel', type: 'string', default: 'Copied' },
-    { name: 'placement', type: "'top' | 'bottom' | 'left' | 'right'", default: 'top' },
+    { name: 'side', type: "'top' | 'bottom' | 'left' | 'right'", default: 'top' },
     { name: 'resetAfter', type: 'number', default: '2000' },
     { name: 'onCopy', type: '(value: string) => void | Promise<void>' },
   ]}
@@ -34,8 +35,8 @@ opens only on the copy, so the button carries no hover tooltip of its own.
 
 ## Naming what it copies
 
-The button keeps its name while the copy is fresh. A tooltip opened without the pointer is not
-announced, so the outcome comes from a live region instead.
+The button keeps its name while the copy is fresh; the confirmation is announced by the toast's own
+live region, from a landmark the `label` names.
 
 <Story
   name='Labelled'

From 251447363f6e42f8b401e66ab42b8ce32cfd982a Mon Sep 17 00:00:00 2001
From: Max Yinger <max.yinger@clerk.dev>
Date: Tue, 22 Sep 2026 12:37:25 -0600
Subject: [PATCH 4/4] fix(mosaic): render a scoped save failure under its field
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A save that names the control it failed on rendered the control's *name*
under the input — "slug" rather than "Slug is taken" — and put the message in
the banner above it. The message now renders wherever the failure points: under
the named control, or in the banner when it names none.

Along with it, from review:

- `CopyButton` takes `onCopyError`, so a rejected clipboard write is no longer
  swallowed with no way for a caller to react. It still confirms nothing.
- The swingset fixture's configured failure is scoped to one field, so the
  `SaveFails` story no longer reports a slug error when the name is edited.
- Drops the comments from `CopyButton`.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../copy-button/copy-button.test.tsx          |  8 +++--
 .../components/copy-button/copy-button.tsx    | 26 +++-------------
 ...zation-profile-general-panel.view.test.tsx | 31 +++++++++++++++++++
 ...organization-profile-edit-field.dialog.tsx |  4 +--
 .../organization-profile.types.ts             |  1 +
 packages/swingset/src/stories/copy-button.mdx |  1 +
 .../stories/fixtures/organization-profile.ts  | 15 +++++----
 ...tion-profile-workspace-section.stories.tsx |  2 +-
 8 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/packages/mosaic/src/components/copy-button/copy-button.test.tsx b/packages/mosaic/src/components/copy-button/copy-button.test.tsx
index e843a28c744..4c91fb33603 100644
--- a/packages/mosaic/src/components/copy-button/copy-button.test.tsx
+++ b/packages/mosaic/src/components/copy-button/copy-button.test.tsx
@@ -99,17 +99,21 @@ describe('Mosaic CopyButton', () => {
     expect(writeText).not.toHaveBeenCalled();
   });
 
-  it('stays quiet when the copy fails', async () => {
+  it('confirms nothing when the copy fails, and hands the caller the reason', async () => {
+    const onCopyError = vi.fn();
+    const denied = new Error('denied');
     const user = userEvent.setup();
     render(
       <CopyButton
         value='acme-inc'
-        onCopy={() => Promise.reject(new Error('denied'))}
+        onCopy={() => Promise.reject(denied)}
+        onCopyError={onCopyError}
       />,
     );
 
     await user.click(screen.getByRole('button', { name: 'Copy' }));
 
+    await waitFor(() => expect(onCopyError).toHaveBeenCalledWith(denied));
     expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
   });
 });
diff --git a/packages/mosaic/src/components/copy-button/copy-button.tsx b/packages/mosaic/src/components/copy-button/copy-button.tsx
index 2f92f0ac3fc..ff29996ff4b 100644
--- a/packages/mosaic/src/components/copy-button/copy-button.tsx
+++ b/packages/mosaic/src/components/copy-button/copy-button.tsx
@@ -9,36 +9,18 @@ import { Button } from '../button';
 import { Icon } from '../icon';
 import { styles } from './copy-button.styles';
 
-/** Matches the gap the tooltip keeps from its trigger. */
 const SIDE_OFFSET = 4;
 
 export interface CopyButtonProps extends Omit<ButtonProps, 'children' | 'onCopy'> {
-  /** Text written to the clipboard. */
   value: string;
-  /** Names the button, and the region its confirmation is announced from. @default 'Copy' */
   label?: string;
-  /** Shown and announced once the value is on the clipboard. @default 'Copied' */
   copiedLabel?: string;
-  /** Which side of the button the confirmation sits on. @default 'top' */
   side?: ToastSide;
-  /** How long the confirmation holds, in milliseconds. @default 2000 */
   resetAfter?: number;
-  /** Replaces the clipboard write, e.g. to copy something richer than text. */
   onCopy?: (value: string) => void | Promise<void>;
+  onCopyError?: (error: unknown) => void;
 }
 
-/**
- * Puts a value on the clipboard and confirms it in a toast anchored to the button. A toast rather
- * than a tooltip because the confirmation is an event, not a description of the control: it
- * announces itself, `F6` reaches it, `Escape` dismisses it, and the button keeps its own name.
- *
- * @example
- * <CopyButton value={organization.slug} />
- *
- * @example
- * // Named for what it copies, in a row that holds more than one
- * <CopyButton value={apiKey} label='Copy API key' />
- */
 export const CopyButton = React.forwardRef<HTMLButtonElement, CopyButtonProps>(function MosaicCopyButton(
   { resetAfter = 2000, ...rest },
   ref,
@@ -64,6 +46,7 @@ const CopyButtonTrigger = React.forwardRef<HTMLButtonElement, Omit<CopyButtonPro
       copiedLabel = 'Copied',
       side = 'top',
       onCopy,
+      onCopyError,
       color = 'neutral',
       variant = 'ghost',
       size = 'xs',
@@ -78,8 +61,9 @@ const CopyButtonTrigger = React.forwardRef<HTMLButtonElement, Omit<CopyButtonPro
     const copy = async (anchor: HTMLElement) => {
       try {
         await (onCopy ? onCopy(value) : navigator.clipboard.writeText(value));
-      } catch {
-        // A blocked clipboard leaves the button as it was; there is nothing to report.
+      } catch (error) {
+        // A blocked clipboard confirms nothing; the caller decides whether to say so.
+        onCopyError?.(error);
         return;
       }
       manager.add({
diff --git a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx
index 7e4f732c3bd..759098b4c1f 100644
--- a/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx
+++ b/packages/mosaic/src/features/organization-profile/__tests__/organization-profile-general-panel.view.test.tsx
@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 
 import { MosaicProvider } from '../../../MosaicProvider';
+import { OrganizationProfileSaveError } from '../organization-profile.types';
 import type { OrganizationProfileGeneralPanelViewProps } from '../organization-profile-general-panel.view';
 import { OrganizationProfileGeneralPanelView } from '../organization-profile-general-panel.view';
 
@@ -86,6 +87,36 @@ describe('organization profile general panel', () => {
     expect(within(dialog).getByText('Name')).toHaveAttribute('data-visually-hidden', '');
   });
 
+  it('shows a rejected save under the field it names and leaves the dialog open', async () => {
+    const user = userEvent.setup();
+    const onSubmitSlug = vi.fn().mockRejectedValue(new OrganizationProfileSaveError('Slug is taken', 'slug'));
+    renderPanel({ onSubmitSlug });
+
+    await user.click(screen.getByRole('button', { name: 'Edit slug' }));
+    const field = await screen.findByRole('textbox', { name: 'Slug' });
+    await user.type(field, '-2');
+    await user.click(screen.getByRole('button', { name: 'Save changes' }));
+
+    const dialog = await screen.findByRole('dialog');
+    expect(await within(dialog).findByText('Slug is taken')).toBeVisible();
+    expect(within(dialog).getByRole('textbox', { name: 'Slug' })).toBeEnabled();
+    expect(within(dialog).getByRole('textbox', { name: 'Slug' })).toBeInvalid();
+  });
+
+  it('shows an unscoped rejection in the banner instead', async () => {
+    const user = userEvent.setup();
+    const onSubmitName = vi.fn().mockRejectedValue(new Error('Something went wrong.'));
+    renderPanel({ onSubmitName });
+
+    await user.click(screen.getByRole('button', { name: 'Edit name' }));
+    await user.type(await screen.findByRole('textbox', { name: 'Name' }), '!');
+    await user.click(screen.getByRole('button', { name: 'Save changes' }));
+
+    const dialog = await screen.findByRole('dialog');
+    expect(await within(dialog).findByRole('alert')).toHaveTextContent('Something went wrong.');
+    expect(within(dialog).getByRole('textbox', { name: 'Name' })).toBeValid();
+  });
+
   it('keeps each danger action inert until the workspace name is typed', async () => {
     const user = userEvent.setup();
     const onDelete = vi.fn().mockResolvedValue(undefined);
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx
index f090b9b6c92..e9f6565515e 100644
--- a/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx
+++ b/packages/mosaic/src/features/organization-profile/organization-profile-workspace-section/organization-profile-edit-field.dialog.tsx
@@ -80,7 +80,7 @@ export function OrganizationProfileEditFieldDialog({
               />
             }
           >
-            {error?.message ? (
+            {error?.message && !error.field ? (
               <Banner.Root
                 role='alert'
                 color='negative'
@@ -97,7 +97,7 @@ export function OrganizationProfileEditFieldDialog({
                 onChange={event => onValueChange(event.target.value)}
               />
               <Field.Message>
-                <Field.Error>{error?.field}</Field.Error>
+                <Field.Error>{error?.field ? error.message : undefined}</Field.Error>
               </Field.Message>
             </Field.Root>
           </Card.Content>
diff --git a/packages/mosaic/src/features/organization-profile/organization-profile.types.ts b/packages/mosaic/src/features/organization-profile/organization-profile.types.ts
index 19eab34d998..af9601569d1 100644
--- a/packages/mosaic/src/features/organization-profile/organization-profile.types.ts
+++ b/packages/mosaic/src/features/organization-profile/organization-profile.types.ts
@@ -22,6 +22,7 @@ export interface CustomOrganizationProfilePage {
 
 export interface OrganizationProfileFormError {
   message?: string;
+  /** Names the control the failure belongs to. Set, and `message` renders under it instead of in the banner. */
   field?: string;
 }
 
diff --git a/packages/swingset/src/stories/copy-button.mdx b/packages/swingset/src/stories/copy-button.mdx
index 9d2056840fa..9ae30fd7c10 100644
--- a/packages/swingset/src/stories/copy-button.mdx
+++ b/packages/swingset/src/stories/copy-button.mdx
@@ -23,6 +23,7 @@ of the control: it announces itself, `F6` reaches it and `Escape` dismisses it.
     { name: 'side', type: "'top' | 'bottom' | 'left' | 'right'", default: 'top' },
     { name: 'resetAfter', type: 'number', default: '2000' },
     { name: 'onCopy', type: '(value: string) => void | Promise<void>' },
+    { name: 'onCopyError', type: '(error: unknown) => void' },
   ]}
 />
 
diff --git a/packages/swingset/src/stories/fixtures/organization-profile.ts b/packages/swingset/src/stories/fixtures/organization-profile.ts
index caa3c2ea489..af162a81f71 100644
--- a/packages/swingset/src/stories/fixtures/organization-profile.ts
+++ b/packages/swingset/src/stories/fixtures/organization-profile.ts
@@ -1,3 +1,4 @@
+import { OrganizationProfileSaveError } from '@clerk/mosaic/features/organization-profile/organization-profile.types';
 import type { OrganizationProfileViewProps } from '@clerk/mosaic/features/organization-profile/organization-profile.view';
 import { useState } from 'react';
 
@@ -10,7 +11,8 @@ const MEMBER_COUNT = 20;
 const settleAfter = (ms: number) => new Promise<void>(resolve => setTimeout(resolve, ms));
 
 export interface OrganizationProfileFixtureOptions {
-  failWith?: string;
+  /** Rejects that field's save with this message, scoped to the field so it renders under it. */
+  failWith?: Partial<Record<'name' | 'slug', string>>;
 }
 
 export function useOrganizationProfileFixture({ failWith }: OrganizationProfileFixtureOptions = {}) {
@@ -19,10 +21,11 @@ export function useOrganizationProfileFixture({ failWith }: OrganizationProfileF
   const [slug, setSlug] = useState(INITIAL_SLUG);
   const { imageUrl, showFile, clearImage } = usePreviewImage();
 
-  const save = async (apply: () => void) => {
+  const save = async (field: 'name' | 'slug', apply: () => void) => {
     await settleAfter(800);
-    if (failWith) {
-      throw new Error(failWith);
+    const message = failWith?.[field];
+    if (message) {
+      throw new OrganizationProfileSaveError(message, field);
     }
     apply();
   };
@@ -35,8 +38,8 @@ export function useOrganizationProfileFixture({ failWith }: OrganizationProfileF
     hasImage: Boolean(imageUrl),
     onLogoChange: showFile,
     onRemoveLogo: clearImage,
-    onSubmitName: async next => save(() => setName(next)),
-    onSubmitSlug: async next => save(() => setSlug(next)),
+    onSubmitName: async next => save('name', () => setName(next)),
+    onSubmitSlug: async next => save('slug', () => setSlug(next)),
     onLeave: () => settleAfter(1200),
     onDelete: () => settleAfter(1200),
   };
diff --git a/packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx b/packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx
index daab0c37052..574e5167cef 100644
--- a/packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx
+++ b/packages/swingset/src/stories/organization-profile-workspace-section.stories.tsx
@@ -34,7 +34,7 @@ export function Default() {
 }
 
 export function SaveFails() {
-  const { general } = useOrganizationProfileFixture({ failWith: 'That slug is already taken.' });
+  const { general } = useOrganizationProfileFixture({ failWith: { slug: 'That slug is already taken.' } });
   return (
     <OrganizationProfileWorkspaceSectionView
       name={general.name}