feat(mosaic): add the organization profile General page

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>

Author: maxyinger

.changeset/organization-profile-general.md

@@ -0,0 +1,2 @@
+---
+---

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();
+  });
+});

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>
+  );
+});

packages/mosaic/src/components/copy-button/index.ts

@@ -0,0 +1,2 @@
+export { CopyButton } from './copy-button';
+export type { CopyButtonProps } from './copy-button';

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` }),
 });

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,
         },
       },